/* 一年级听读 · 统一样式（移动端优先）
   ---------------------------------------------------------------
   1) 设计变量  2) 前台(点读)  3) 后台(桌面侧栏 / 移动底栏)  4) 登录页
   前台与后台共用同一套 :root 变量，风格统一。 */
:root {
    --primary: #4f46e5;
    --primary-d: #4338ca;
    --bg: #f5f6fb;
    --card: #ffffff;
    --text: #1f2430;
    --muted: #8b90a0;
    --line: #e6e8f0;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(16,24,40,.05);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    /* ── 字体栈（版权相关，请勿随意改）──────────────────────────
       全部使用「操作系统自带字体」，本项目**不加载任何字体文件**
       （没有 @font-face、没有 woff/woff2/ttf、没有 Google Fonts、
         也没有任何字体 CDN）。浏览器只是调用用户本机已授权的字体
         来显示文字，服务器不传输字体数据，因此不涉及字体授权。

       反过来：如果你往项目里放一份 .woff/.ttf 并用 @font-face 引入，
       那就属于「字体的商业性再分发」，绝大多数中文字体（方正、汉仪、
       思源以外的多数商业字体）都需要单独购买 Web 授权，风险很高。
       —— 所以这里一律不引入字体文件。 ───────────────────────── */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
                 "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* 自绘 SVG 图标（见 admin/icons.php）：统一尺寸与描边风格 */
.ic { flex: 0 0 auto; display: block; width: 19px; height: 19px; }
.ic.logo { width: 24px; height: 24px; }
.ic.sm   { width: 14px; height: 14px; }
.ic-inline { display: inline-flex; vertical-align: -3px; margin-right: 4px; }
.ic-inline .ic { width: 14px; height: 14px; }

/* ============================================================
   通用顶栏（后台自检页 admin/check.php 在用，前台已改为 .hero）
   ============================================================ */
.topbar {
    background: var(--primary);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar h1 { font-size: 18px; margin: 0; font-weight: 600; }
.topbar .link { color: #fff; text-decoration: none; font-size: 14px; }

/* ============================================================
   前台点读页 —— 面向小朋友：大字号、大按钮、少层级
   ------------------------------------------------------------
   色板独立于后台（--f-* 前缀），避免动后台的观感
   ============================================================ */
body.front {
    --f-primary: #4f6ef7;
    --f-accent:  #ff7a45;
    --f-ink:     #182142;
    --f-muted:   #8a92ad;
    --f-line:    #e9ecf6;
    --f-bg:      #f4f6fc;
    --f-r:       18px;
    --pb-h:      116px;   /* 吸底播放条大致高度，页面底部留白要跟着它 */
    background: var(--f-bg);
    color: var(--f-ink);
    padding-bottom: calc(var(--pb-h) + env(safe-area-inset-bottom));
}

/* 手机上的可点元素：禁掉双击缩放带来的 300ms 延迟，长按不选中文字 */
body.front button { touch-action: manipulation; -webkit-user-select: none; user-select: none; }

/* 顶部品牌区 */
.hero {
    background: linear-gradient(135deg, #5b6ef8 0%, #7a5cf6 100%);
    color: #fff;
    padding: 20px calc(18px + env(safe-area-inset-right)) 24px calc(18px + env(safe-area-inset-left));
    border-radius: 0 0 26px 26px;
}
.hero-row { display: flex; align-items: center; gap: 12px; max-width: 680px; margin: 0 auto; }
.hero-mark {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 13px;
    background: rgba(255,255,255,.22);
    display: grid; place-items: center;
    font-size: 19px; font-weight: 700;
}
.hero-text { flex: 1; min-width: 0; }
.hero-text h1 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: .3px; }
.hero-text p { margin: 3px 0 0; font-size: 12.5px; color: rgba(255,255,255,.82); }
.hero-link {
    flex: 0 0 auto; color: #fff; text-decoration: none; font-size: 12.5px;
    background: rgba(255,255,255,.18); border-radius: 999px; padding: 7px 14px;
}

.wrap {
    max-width: 680px; margin: 0 auto;
    padding: 16px calc(16px + env(safe-area-inset-right)) 16px calc(16px + env(safe-area-inset-left));
}

/* 页脚（内容来自后台「网站设置」） */
.site-foot {
    margin-top: 26px; padding: 18px 4px 4px;
    border-top: 1px solid var(--f-line);
    text-align: center; font-size: 12.5px; color: var(--f-muted); line-height: 1.85;
}
.site-foot a { color: var(--f-muted); text-decoration: none; }
.site-foot .ft-sub { margin-top: 2px; }

/* 面包屑：可横向滚动，点任意一段直接回退 */
.crumbs {
    display: flex; align-items: center; gap: 6px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 2px 0 14px; margin: 0;
    scrollbar-width: none;
}
.crumbs::-webkit-scrollbar { display: none; }
.crumbs .cr {
    flex: 0 0 auto; border: none; font-family: inherit; cursor: pointer;
    background: #fff; color: var(--f-muted);
    font-size: 13.5px; padding: 7px 14px; border-radius: 999px;
    box-shadow: 0 1px 2px rgba(24,33,66,.06);
}
.crumbs .cr.on { background: var(--f-ink); color: #fff; font-weight: 600; cursor: default; }
.crumbs .sep { flex: 0 0 auto; color: #c6ccdf; font-size: 12px; }

/* 区块小标题 */
.sec-title {
    display: flex; align-items: baseline; gap: 8px;
    margin: 0 0 10px; font-size: 12.5px; color: var(--f-muted);
}
.sec-title b { font-size: 15px; color: var(--f-ink); font-weight: 600; }

/* 下级分类：卡片网格（点击区够大，孩子好点） */
.nav-sec { margin-bottom: 20px; }
.nav-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
}
.nav-card {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 8px;
    text-align: left; cursor: pointer; font-family: inherit; color: var(--f-ink);
    background: #fff; border: 1px solid var(--f-line);
    border-radius: 15px; padding: 14px 14px 13px;
    box-shadow: 0 1px 3px rgba(24,33,66,.05);
    transition: transform .12s, box-shadow .12s;
}
.nav-card:active { transform: scale(.975); }
.nav-card .nc-bar {
    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--nc, var(--f-primary));
}
.nav-card .nc-name {
    font-size: 15.5px; font-weight: 600; line-height: 1.35;
    padding-left: 7px; word-break: break-word;
}
.nav-card .nc-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding-left: 7px; font-size: 12px; color: var(--f-muted);
}
.nav-card .nc-meta .arrow { font-size: 16px; color: #c6ccdf; line-height: 1; }

/* 音频列表：按分类分组，组头吸顶 */
.list-sec { margin-bottom: 8px; }
.list { display: flex; flex-direction: column; gap: 9px; }

.grp-head {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 9px;
    padding: 9px 2px 7px;
    background: var(--f-bg);
    font-size: 13.5px; font-weight: 600; color: var(--f-ink);
}
.grp-head .gh-dot {
    flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%;
    background: var(--gh, var(--f-primary));
}
.grp-head .gh-cnt { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--f-muted); }
.grp-head.tap { cursor: pointer; }
.grp-head.tap:active { opacity: .6; }

.card {
    display: flex; align-items: center; gap: 12px;
    width: 100%; text-align: left; cursor: pointer; font-family: inherit;
    padding: 14px 15px;
    background: #fff; border: 1.5px solid var(--f-line);
    border-radius: var(--f-r); color: var(--f-ink);
    box-shadow: 0 1px 3px rgba(24,33,66,.05);
    transition: transform .12s, border-color .15s, background .15s;
}
.card:active { transform: scale(.985); }
.card .idx {
    flex: 0 0 32px; height: 32px; border-radius: 11px;
    background: #f0f3fe; color: var(--f-primary);
    display: grid; place-items: center;
    font-size: 13.5px; font-weight: 700;
}
.card .t { flex: 1; min-width: 0; font-size: 15.5px; line-height: 1.42; word-break: break-word; }
.card .pg {
    flex: 0 0 auto; font-size: 12px; font-weight: 600;
    color: var(--f-primary); background: #f0f3fe;
    border-radius: 8px; padding: 3px 9px;
}
.card.on { border-color: var(--f-primary); background: #f6f8ff; }
.card.on .idx { background: var(--f-primary); color: #fff; }
.card.on .pg { background: #fff; }

/* 播放中的跳动小柱 */
.card .bars { display: none; }
.card.playing .bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; flex: 0 0 auto; }
.card.playing .bars i {
    width: 3px; border-radius: 2px; background: var(--f-primary);
    animation: eq .9s infinite ease-in-out;
}
.card.playing .bars i:nth-child(1) { height: 60%; animation-delay: -.2s; }
.card.playing .bars i:nth-child(2) { height: 100%; }
.card.playing .bars i:nth-child(3) { height: 45%; animation-delay: -.45s; }
@keyframes eq { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .card.playing .bars i { animation: none; } }

.hint { color: var(--f-muted); text-align: center; padding: 34px 16px; font-size: 14px; line-height: 1.75; }

/* 吸底播放条 */
.player-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: none; flex-direction: column;
    padding: 0 calc(14px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
    background: rgba(255,255,255,.97);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--f-line);
    box-shadow: 0 -4px 20px rgba(24,33,66,.08);
}
.player-bar.show { display: flex; }

/* 倍速面板：从播放条上方弹出，选项按手指尺寸做（≥44px） */
.rate-pop {
    position: absolute; left: 50%; bottom: calc(100% - 4px);
    transform: translateX(-50%);
    width: min(340px, calc(100vw - 28px));
    background: #fff; border: 1px solid var(--f-line);
    border-radius: 16px; padding: 13px;
    box-shadow: 0 10px 32px rgba(24,33,66,.17);
}
.rate-pop[hidden] { display: none; }
.rp-title { font-size: 12.5px; color: var(--f-muted); margin: 0 0 10px 2px; }
.rp-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rp-item {
    font-family: inherit; cursor: pointer;
    border: 1px solid var(--f-line); background: #fff; color: var(--f-ink);
    border-radius: 11px; padding: 10px 4px;
    font-size: 13.5px; font-weight: 600; min-height: 44px;
}
.rp-item:active { transform: scale(.96); }
.rp-item.on { background: var(--f-primary); border-color: var(--f-primary); color: #fff; }

/* 进度条：整条通栏；手机上可点可拖，区域加高到 26px */
.pb-track {
    position: relative; height: 18px; cursor: pointer;
    margin: 0 calc(-14px - env(safe-area-inset-right)) 0 calc(-14px - env(safe-area-inset-left));
    touch-action: none;           /* 手指拖动时不要连带滚动页面 */
}
.pb-track:focus-visible { outline: 2px solid var(--f-primary); outline-offset: 4px; }
.pb-track::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: 4px; margin-top: -2px; background: var(--f-line);
}
.pb-fill {
    position: absolute; left: 0; top: 50%;
    height: 4px; margin-top: -2px; width: 0;
    background: var(--f-primary); transition: width .18s linear;
}

.pb-main { display: flex; align-items: center; gap: 9px; width: 100%; max-width: 680px; margin: 0 auto; }
.pb-info { flex: 1; min-width: 0; padding-right: 2px; }
.pb-title {
    font-size: 14.5px; font-weight: 600; color: var(--f-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pb-sub { font-size: 11.5px; color: var(--f-muted); margin-top: 2px; }

.pb-btn {
    flex: 0 0 auto; width: 42px; height: 42px;
    border: none; border-radius: 50%; cursor: pointer;
    background: #f0f3fe; color: var(--f-primary);
    display: grid; place-items: center;
}
.pb-btn:active { transform: scale(.93); }
.pb-btn svg { width: 19px; height: 19px; fill: currentColor; }
.pb-btn.main { width: 50px; height: 50px; background: var(--f-primary); color: #fff; }
.pb-btn.main svg { width: 21px; height: 21px; }
.pb-btn.main .ic-pause { display: none; }
.pb-btn.main.playing .ic-play { display: none; }
.pb-btn.main.playing .ic-pause { display: block; }

/* 倍速按钮：胶囊形，显示当前倍速 */
.pb-btn.rate {
    width: auto; min-width: 46px; height: 42px;
    padding: 0 10px; border-radius: 999px;
    font-family: inherit; font-size: 13px; font-weight: 700;
}
.pb-btn.rate[hidden] { display: none; }

/* 小屏微调（触摸目标一律 ≥44px，符合 iOS/Android 人机规范） */
@media (max-width: 480px) {
    .hero { padding: 18px calc(16px + env(safe-area-inset-right)) 22px calc(16px + env(safe-area-inset-left)); border-radius: 0 0 22px 22px; }
    .hero-text h1 { font-size: 19px; }
    .wrap { padding: 14px calc(14px + env(safe-area-inset-right)) 14px calc(14px + env(safe-area-inset-left)); }
    .nav-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 9px; }
    .nav-card { padding: 13px 13px 12px; }
    .card { padding: 14px; }
    .card .t { font-size: 15px; }

    body.front { --pb-h: 126px; }
    .pb-track { height: 26px; }              /* 手指按压区域更大 */
    .pb-track::before, .pb-fill { height: 5px; margin-top: -2.5px; }
    .pb-btn { width: 44px; height: 44px; }
    .pb-btn.main { width: 52px; height: 52px; }
    .pb-btn.rate { height: 44px; min-width: 44px; font-size: 12.5px; padding: 0 8px; }
}

/* 横屏（手机躺过来）：顶栏压扁，别把列表挤没了 */
@media (max-height: 480px) and (orientation: landscape) {
    .hero { padding: 12px calc(16px + env(safe-area-inset-right)) 14px calc(16px + env(safe-area-inset-left)); border-radius: 0 0 16px 16px; }
    .hero-mark { width: 34px; height: 34px; font-size: 16px; border-radius: 10px; }
    .hero-text h1 { font-size: 17px; }
    .hero-text p { display: none; }
    body.front { --pb-h: 108px; }
    .pb-track { height: 20px; }
}

/* ============================================================
   后台（桌面：左侧导航；移动：顶栏 + 底部标签栏）
   ============================================================ */
body.admin { background: var(--bg); }

.admin-side {
    position: fixed; left: 0; top: 0; bottom: 0; width: 216px;
    background: var(--card);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    z-index: 20;
}
.admin-side .brand {
    display: flex; align-items: center; gap: 10px;
    padding: 18px; font-weight: 700; font-size: 16px;
    border-bottom: 1px solid var(--line);
}
.admin-side .brand .logo { flex: 0 0 auto; }
.admin-side .brand .txt { display: flex; flex-direction: column; line-height: 1.25; }
.admin-side .brand .txt b { font-size: 12px; color: var(--muted); font-weight: 500; }

.admin-nav { padding: 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; overflow: auto; }
.admin-nav button {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 11px 14px;
    border: none; border-radius: 10px;
    background: transparent; color: #4b5563;
    font-size: 15px; text-align: left; cursor: pointer;
}
.admin-nav button:hover { background: #f2f3fa; }
.admin-nav button.on { background: #eef0ff; color: var(--primary); font-weight: 600; }
.admin-nav button .ic { width: 20px; height: 20px; }

.admin-user { padding: 14px 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.admin-user .uname { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: var(--text); font-size: 14px; }
.admin-user .acts { display: flex; gap: 14px; }
.admin-user .link, .admin-mobile-top .link { display: inline-flex; align-items: center; gap: 5px; }
.admin-user .link { color: var(--muted); text-decoration: none; }
.admin-user .link:hover { color: var(--primary); }

.admin-mobile-top { display: none; }

.admin-content { margin-left: 216px; padding: 22px 26px 40px; max-width: 1000px; }
.content-head { margin-bottom: 18px; }
.content-head h1 { font-size: 22px; margin: 0 0 4px; }
.content-head .crumb { margin: 0; color: var(--muted); font-size: 13px; }

/* 卡片面板 */
.panel {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 16px; padding: 20px; margin-bottom: 18px;
    box-shadow: var(--shadow);
}
.panel h2 { font-size: 17px; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; }
.tab[hidden] { display: none; }

/* 表单 */
body.admin form { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center; }
body.admin input:not([type=checkbox]):not([type=file]),
body.admin select,
body.admin textarea {
    flex: 1 1 170px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-size: 15px;
    background: #fff; color: var(--text); font-family: inherit;
}
body.admin input:focus, body.admin select:focus, body.admin textarea:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}
body.admin textarea { width: 100%; flex-basis: 100%; resize: vertical; min-height: 84px; }
body.admin input[type=file] { flex: 1 1 100%; padding: 10px; font-size: 14px; }
body.admin button, body.admin .btn {
    flex: 0 0 auto;
    padding: 12px 22px;
    border: none; border-radius: 12px;
    background: var(--primary); color: #fff;
    font-size: 15px; font-weight: 500; cursor: pointer;
}
body.admin button:active { transform: scale(.98); }
body.admin button.ghost { background: #eef0ff; color: #3730a3; }
body.admin button[disabled] { opacity: .55; cursor: default; }
.ck { display: flex; align-items: center; gap: 8px; font-size: 14px; flex: 0 0 auto; }
.ck input { flex: none; width: 18px; height: 18px; }
.tip { color: var(--muted); font-size: 13px; margin: 0 0 12px; line-height: 1.65; }

/* 网站设置表单：纵向排布（覆盖上面后台通用的横向 flex 表单） */
body.admin form.set-form { display: block; margin-bottom: 0; }
.set-grp { border: 1px solid var(--line); border-radius: 12px; padding: 4px 16px 14px; margin: 0 0 16px; }
.set-grp legend { padding: 0 6px; font-size: 14px; font-weight: 600; color: var(--primary); }
.set-row { margin-bottom: 18px; }
.set-row:last-child { margin-bottom: 4px; }
.set-lb { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
body.admin .set-form .set-ctl { flex: none; width: 100%; margin: 0; }
/* 等宽字体同样只用系统自带的，不引入任何字体文件 */
.set-form textarea.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    font-size: 13px; line-height: 1.6;
}
.set-hp { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.65; }
.set-hp.grp-desc { margin: 2px 0 16px; }
.set-ck { margin-bottom: 6px; font-size: 14.5px; }
.set-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* 列表 / 树 */
.tree { list-style: none; margin: 0; padding: 0; }
.tree li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 6px; border-bottom: 1px solid var(--line); font-size: 15px;
}
.tree li:last-child { border-bottom: none; }
.tree li > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.btn-sm { padding: 7px 13px; border: none; border-radius: 9px; cursor: pointer; font-size: 13px; background: #eef0ff; color: #3730a3; }
.btn-sm.danger { background: #fee2e2; color: #b91c1c; }
.empty { color: var(--muted); text-align: center; padding: 26px 0; font-size: 14px; }
.tree li.empty { justify-content: center; border-bottom: none; color: var(--muted); }
.badge { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 6px; background: #eef0ff; color: #3730a3; margin-left: 6px; }
.badge.warn { background: #fffbe6; color: #b45309; }
.badge.ghost { background: #f2f3fa; color: #6b7280; }

/* 树节点单元（分类管理 / 音频管理共用）：名称 + 徽标允许换行，不被省略号截断 */
.tree li > span.cat-cell {
    flex: 1; min-width: 0;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    overflow: visible; white-space: normal; text-overflow: clip;
}
.tree li > span.cat-cell .cat-nm { word-break: break-word; line-height: 1.45; }

/* 列表筛选行（分类筛选 + 关键字搜索） */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 14px; }

/* 批量导入预览 */
.imp-preview { border: 1px dashed var(--line); border-radius: 12px; padding: 6px 4px; max-height: 460px; overflow: auto; }
.imp-head { padding: 10px 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.imp-unit { border-top: 1px solid var(--line); padding: 6px 12px; }
.imp-unit > summary { cursor: pointer; font-weight: 600; padding: 6px 0; font-size: 15px; }
.imp-page { padding: 2px 0 6px 12px; }
.imp-pg { font-size: 14px; color: var(--primary); font-weight: 600; margin: 6px 0 2px; }
.imp-page ul { list-style: none; margin: 0; padding: 0 0 0 12px; }
.imp-page li { font-size: 13px; color: #4b5563; padding: 2px 0; }
code { background: #f2f3fa; border-radius: 5px; padding: 1px 6px; font-size: 12px; color: #4338ca; }

/* 移动端 */
@media (max-width: 820px) {
    .admin-side {
        left: 0; right: 0; top: auto; bottom: 0;
        width: auto; height: auto;
        flex-direction: row;
        border-right: none; border-top: 1px solid var(--line);
        box-shadow: 0 -2px 12px rgba(16,24,40,.06);
    }
    .admin-side .brand, .admin-side .admin-user { display: none; }
    .admin-nav {
        flex-direction: row; gap: 0; width: 100%; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        overflow: visible;
    }
    .admin-nav button {
        flex: 1; flex-direction: column; gap: 2px;
        padding: 8px 4px; font-size: 11px; text-align: center; border-radius: 10px;
    }
    .admin-nav button .ic { width: 22px; height: 22px; }
    .admin-nav button span { font-size: 11px; }

    .admin-mobile-top {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        position: sticky; top: 0; z-index: 20;
        background: var(--primary); color: #fff; padding: 13px 16px;
    }
    .admin-mobile-top .brand { font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 8px; }
    .admin-mobile-top .acts { display: flex; gap: 14px; }
    .admin-mobile-top .link { color: #fff; text-decoration: none; font-size: 14px; }

    .admin-content { margin-left: 0; padding: 16px 14px 92px; }
    .content-head { display: none; }
    .panel { padding: 16px; border-radius: 14px; }
    body.admin form { gap: 8px; }
    body.admin input:not([type=checkbox]):not([type=file]),
    body.admin select, body.admin textarea { font-size: 16px; } /* 防 iOS 缩放 */
}

/* ============================================================
   前台公告
   ============================================================ */
.notices { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.notice {
    background: #fff; border: 1px solid #e9ecf6;
    border-left: 4px solid #ffc53d;
    border-radius: 14px; padding: 12px 14px;
    box-shadow: 0 1px 3px rgba(24,33,66,.05);
}
.notice.pin { border-left-color: #4f6ef7; background: #f7f9ff; }
.notice .nt { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.notice .nc { white-space: pre-wrap; font-size: 13.5px; color: #4b5563; line-height: 1.55; }
.notice .tag { font-size: 11px; background: #4f6ef7; color: #fff; border-radius: 5px; padding: 1px 7px; }

/* ============================================================
   轻提示 toast
   ============================================================ */
/* ============================================================
   PWA 安装横幅（添加到主屏）
   ============================================================ */
.pwa-banner {
    position: fixed; top: 12px; right: 12px; left: auto; z-index: 55;
    display: flex; align-items: center; gap: 8px;
    background: #1f2430; color: #fff; padding: 10px 12px; border-radius: 12px;
    box-shadow: 0 6px 24px rgba(0,0,0,.28);
    font-size: 13px; line-height: 1.35; max-width: calc(100vw - 24px);
}
.pwa-banner span { flex: 1; }
.pwa-banner button {
    border: none; border-radius: 8px; padding: 8px 12px; font-size: 13px;
    background: #4f46e5; color: #fff; cursor: pointer; white-space: nowrap;
}
.pwa-banner button.x {
    background: transparent; color: #aab; padding: 4px 6px; font-size: 16px; line-height: 1;
}
@media (min-width: 640px) {
    .pwa-banner { top: 16px; right: 16px; min-width: 360px; max-width: 420px; }
}

.toast {
    position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
    background: #1f2430; color: #fff; padding: 10px 18px; border-radius: 10px;
    font-size: 14px; opacity: 0; transition: .2s; pointer-events: none; z-index: 60;
    max-width: 86vw; text-align: center;
}
.toast.show { opacity: .95; }

/* ============================================================
   登录页
   ============================================================ */
body.login {
    display: flex; min-height: 100vh; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    padding: 16px;
}
.login-wrap { width: 100%; max-width: 340px; }
.login-card { background: #fff; border-radius: 18px; padding: 28px 24px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.login-card h1 { margin: 0 0 4px; font-size: 22px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.login-card .sub { margin: 0 0 20px; text-align: center; color: #8b90a0; font-size: 14px; }
.login-card .err { background: #fee2e2; color: #b91c1c; padding: 10px; border-radius: 10px; font-size: 14px; margin-bottom: 14px; text-align: center; }
.login-card label { display: block; font-size: 14px; color: #4b5563; margin-bottom: 14px; }
.login-card input { width: 100%; margin-top: 6px; padding: 12px; border: 1px solid #e6e8f0; border-radius: 10px; font-size: 15px; box-sizing: border-box; }
.login-card button { width: 100%; padding: 12px; border: none; border-radius: 10px; background: #4f46e5; color: #fff; font-size: 16px; cursor: pointer; }
.login-card .back { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 16px; color: #8b90a0; font-size: 13px; text-decoration: none; }
.login-card .back .ic { vertical-align: -2px; }