/* ==================== Base ==================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg-primary: #f5f6fa;
    --bg-card: #ffffff;
    --bg-card-hover: #f7f8fc;
    --bg-soft: rgba(15, 23, 42, 0.03);
    --border: rgba(15, 23, 42, 0.09);
    --border-strong: rgba(15, 23, 42, 0.14);

    --text-primary: #1e1e2e;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;

    --accent: #6366f1;
    --accent-deep: #4f46e5;
    --accent-soft: rgba(99, 102, 241, 0.12);
    --accent-glow: rgba(99, 102, 241, 0.18);

    --up: #dc2626;          /* 名次上升 = 红（国内惯例） */
    --up-bg: rgba(220, 38, 38, 0.09);
    --down: #16a34a;        /* 名次下降 = 绿 */
    --down-bg: rgba(22, 163, 74, 0.1);
    --gold: #d97706;
    --gold-bg: rgba(217, 119, 6, 0.11);
    --neutral: #64748b;
    --neutral-bg: rgba(100, 116, 139, 0.09);

    --micro: #07c160;       /* 微小 */
    --micro-bg: rgba(7, 193, 96, 0.1);
    --dou: #2563eb;         /* 抖小 */
    --dou-bg: rgba(37, 99, 235, 0.1);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
    --mono: 'SF Mono', 'Cascadia Code', Consolas, monospace;
    --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 页面恒定预留竖向滚动条位置 —— 切换书城/筛选时列表高度会剧烈变化
   （多行 <-> 空态），滚动条随之出现/消失会把视口宽度推来推去，
   表现为整页左右抖动。这里把两侧各留 gutter/2，宽度就锁死了。 */
html {
    font-size: 15px;
    overflow-y: scroll;      /* 内容再短也保留滚动条轨道，避免轨道来去 */
    scrollbar-gutter: stable;/* 现代浏览器：连滚动条宽度也恒定 */
}
body {
    font-family: var(--font);
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

/* ==================== Header ==================== */
.header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}
.header-inner {
    max-width: 1180px; margin: 0 auto; padding: 12px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { display: flex; }
.header-title {
    font-size: 1.1rem; font-weight: 700; white-space: nowrap;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.header-sep { width: 1px; height: 18px; background: var(--border-strong); }
.breadcrumb { font-size: 0.825rem; display: flex; align-items: center; gap: 6px; min-width: 0; }
.crumb-section { color: var(--text-muted); }
.crumb-sep { color: var(--text-muted); }
.crumb-current { color: var(--text-secondary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-right { display: flex; align-items: center; gap: 10px; }
.last-update { color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; }
.icon-btn {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text-secondary); cursor: pointer; transition: all var(--transition);
}
.icon-btn:hover { background: var(--bg-card-hover); color: var(--accent-deep); border-color: rgba(99, 102, 241, 0.4); }
.icon-btn.spin svg { animation: spin 0.9s linear infinite; }

/* ==================== Main ==================== */
.main { max-width: 1180px; margin: 0 auto; padding: 18px 20px 48px; }

/* ==================== Tabs ==================== */
.tabs {
    display: flex; align-items: center; gap: 6px; background: var(--bg-soft);
    border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 4px; margin-bottom: 14px; flex-wrap: wrap;
}
.tab {
    padding: 8px 20px; background: transparent; border: none; border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 0.875rem; font-weight: 500; font-family: var(--font);
    cursor: pointer; transition: all var(--transition);
}
.tab:hover { color: var(--text-primary); }
.tab.active {
    background: var(--bg-card); color: var(--accent-deep); font-weight: 600;
    border: 1px solid var(--border); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
}
.tab-ghost {
    margin-left: auto; margin-right: 8px; font-size: 0.75rem; color: var(--text-muted);
    border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 5px 12px;
}
/* 采集类书城（数据由采集端推送）的小圆点标记 */
.tab-dot {
    display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: #0ea5e9; margin-left: 5px; vertical-align: middle;
}

/* ==================== Filter Bar ==================== */
.filter-bar {
    display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 14px 16px; margin-bottom: 14px;
}
.filter-group { display: flex; flex-direction: column; gap: 6px; }
.filter-group.grow { flex: 1 1 220px; min-width: 180px; }
.filter-label { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; letter-spacing: 0.02em; }
.select, .input {
    height: 34px; padding: 0 12px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.825rem;
    font-family: var(--font); outline: none; transition: border-color var(--transition), box-shadow var(--transition);
}
.select { min-width: 168px; cursor: pointer; appearance: none; padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 11px center; }
.select-sm { min-width: 118px; }
.input { width: 100%; }
.select:focus, .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

.segmented { display: flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; }
.seg {
    display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 14px;
    background: transparent; border: none; border-radius: 6px; color: var(--text-secondary);
    font-size: 0.8rem; font-weight: 500; font-family: var(--font); cursor: pointer; transition: all var(--transition);
}
.seg:hover { color: var(--text-primary); }
.seg.active { background: var(--bg-card); color: var(--accent-deep); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08); }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.dot.micro { background: var(--micro); }
.dot.dou { background: var(--dou); }

/* ==================== Stats ==================== */
.stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.stat-card {
    display: flex; align-items: baseline; gap: 7px; padding: 9px 15px; cursor: pointer;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    transition: all var(--transition);
}
.stat-card:hover { border-color: rgba(99, 102, 241, 0.4); transform: translateY(-1px); }
.stat-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.stat-card .num { font-size: 1.05rem; font-weight: 700; }
.stat-card .lbl { font-size: 0.75rem; color: var(--text-muted); }
.stat-card .num.up { color: var(--up); }
.stat-card .num.down { color: var(--down); }
.stat-card .num.new { color: var(--up); }
/* 上架档位：当天 / 近三天 / 近七天，越近越红，色阶区分 */
.stat-card .num.shelf-today { color: var(--up); }
.stat-card .num.shelf-3 { color: #d9541f; }
.stat-card .num.shelf-7 { color: #b7791f; }
/* 统计卡上的「命中/基数」提示：点了别的筛选时，这档实际还剩多少 */
.stat-card .hit {
    font-size: 0.66rem; color: var(--text-muted); font-weight: 600;
    font-variant-numeric: tabular-nums; margin-left: 3px;
}
.stat-card.active .hit { color: var(--accent-deep); opacity: .8; }

/* 列表上方的筛选提示条 */
.list-filter-note {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 8px 18px; font-size: 0.74rem; color: var(--text-secondary);
    background: var(--accent-soft); border-bottom: 1px solid var(--border);
}
.list-filter-note b { color: var(--accent-deep); font-variant-numeric: tabular-nums; }
/* 两组筛选叠加时的连接符 */
.list-filter-note .note-sep { color: var(--text-muted); margin: 0 2px; }
.list-filter-note .note-clear {
    margin-left: auto; padding: 2px 9px; border-radius: 5px; cursor: pointer;
    font-size: 0.7rem; font-weight: 600; font-family: var(--font);
    background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
    transition: all var(--transition);
}
.list-filter-note .note-clear:hover {
    border-color: rgba(99, 102, 241, 0.45); color: var(--accent-deep);
}

/* ==================== Rank Strip ==================== */
.rank-strip {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 9px 14px; margin-bottom: 14px;
}
.rank-strip-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; margin-right: 4px; white-space: nowrap; }
.rank-chip {
    display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 9px; cursor: pointer;
    background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text-secondary); font-size: 0.775rem; font-weight: 600;
    font-family: var(--font); font-variant-numeric: tabular-nums; transition: all var(--transition);
}
.rank-chip:hover { border-color: rgba(99, 102, 241, 0.4); color: var(--accent-deep); }
.rank-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }
.rank-chip i { font-style: normal; font-size: 0.68rem; color: var(--text-muted); font-weight: 500; }
.rank-chip.active i { color: var(--accent-deep); opacity: 0.75; }
.rank-chip.all { font-weight: 500; }

/* ==================== List ==================== */
.list-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.list-head, .row {
    display: grid;
    /* 平台在桌面上不再占列（移动端才露出内联标签）；ID 列固定宽度，不随 ID 长短抖动 */
    grid-template-columns: 48px minmax(0, 1fr) 132px 76px 96px 156px 64px;
    gap: 12px; align-items: center;
}
.list-head {
    padding: 11px 18px; font-size: 0.7rem; font-weight: 700; color: var(--text-muted);
    letter-spacing: 0.04em; background: rgba(15, 23, 42, 0.02); border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.list-head .ta-r { text-align: right; }
.row {
    padding: 10px 18px; border-bottom: 1px solid rgba(15, 23, 42, 0.05);
    transition: background var(--transition); animation: slideIn 0.28s ease-out both;
}
.row:hover { background: var(--bg-card-hover); }
.row:last-child { border-bottom: none; }

.rk { font-weight: 700; font-size: 0.95rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.rk.top1 { color: var(--gold); }
.rk.top2 { color: #64748b; }
.rk.top3 { color: #b45309; }

.book { min-width: 0; }
.book-name {
    font-size: 0.875rem; font-weight: 600; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.book-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.id-cell { min-width: 0; }
.book-id {
    display: block; font-size: 0.7rem; color: var(--text-muted); font-family: var(--mono);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ID 列：主 ID 一行，悬停看该书在另一个平台上的其他 ID */
.id-cell .ids-badge { margin-top: 3px; }

/* 新上榜：红色「新」标（当天新上榜才显示） */
.new-tag {
    display: inline-block; font-size: 0.62rem; font-weight: 700; line-height: 1.5;
    color: #fff; background: var(--up); border-radius: 3px; padding: 0 4px;
    margin-left: 5px; vertical-align: 1px; letter-spacing: 0.02em;
}
.rank-card .new-tag { margin-left: 4px; }
.fresh-badge {
    font-size: 0.64rem; color: var(--up); background: var(--up-bg);
    border-radius: 4px; padding: 1px 5px; white-space: nowrap; font-weight: 600;
}
/* 筛选条里的「新」小标 */
.new-dot {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 3px; background: var(--up); color: #fff;
    font-size: 0.6rem; font-weight: 700; line-height: 1;
}
.seg-fresh, .seg-shelf { gap: 4px; }
.seg-fresh.active .new-dot, .seg-shelf.active .new-dot { background: var(--up); }

/* 窄屏备用：ID / 次数内联显示（默认隐藏，只在窄屏露出） */
.id-inline, .days-inline, .plat-inline { display: none; }

.days-cell { display: flex; flex-direction: column; gap: 2px; }
.days-num { font-size: 0.86rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.days-num .u { font-size: 0.66rem; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
.days-bar { height: 3px; border-radius: 2px; background: var(--bg-soft); overflow: hidden; width: 56px; }
.days-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.days-bar i.full { background: var(--up); }
/* 窄屏内联版（默认隐藏，宽度不足时露出） */
.days-inline { font-size: 0.66rem; color: var(--text-muted); }
.tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag {
    font-size: 0.66rem; color: var(--text-secondary); background: var(--bg-soft);
    border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}
.tag-more { font-size: 0.66rem; color: var(--text-muted); }
.dup-badge {
    font-size: 0.64rem; color: var(--accent-deep); background: var(--accent-soft);
    border-radius: 4px; padding: 1px 5px; white-space: nowrap;
}

/* ID 图标：悬停显示其他 ID（一行一个） */
.ids-badge {
    position: relative; display: inline-flex; align-items: center;
    font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--accent-deep); background: var(--accent-soft);
    border: 1px solid rgba(79, 70, 229, 0.18);
    border-radius: 4px; padding: 1px 5px; cursor: default; white-space: nowrap;
}
.ids-badge .ids-tip {
    position: absolute; left: -6px; top: calc(100% + 8px); z-index: 40;
    display: none; flex-direction: column; gap: 1px;
    background: #1e293b; color: #f1f5f9; border-radius: 7px;
    padding: 7px 10px 8px; box-shadow: 0 10px 26px rgba(15, 23, 42, 0.3);
    font-family: var(--mono); font-size: 0.68rem; font-weight: 500; letter-spacing: 0;
    white-space: nowrap; pointer-events: none;
}
.ids-badge .ids-tip::before {
    content: '其他 ID'; font-family: inherit; font-size: 0.58rem;
    color: #94a3b8; letter-spacing: 0.05em; margin-bottom: 3px;
}
.ids-badge .ids-tip::after {
    content: ''; position: absolute; left: 12px; bottom: 100%;
    border: 5px solid transparent; border-bottom-color: #1e293b;
}
.ids-badge:hover .ids-tip { display: flex; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.badge.micro { background: var(--micro-bg); color: var(--micro); }
.badge.dou { background: var(--dou-bg); color: var(--dou); }
/* 两个平台都有：蓝→绿渐变 + 深色字，一眼区分 */
.badge.mixed {
    background: linear-gradient(120deg, var(--dou-bg) 0%, var(--micro-bg) 100%);
    color: #4338ca; box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.18);
}

.cell-2 { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.45; }
.cell-2 .sub { color: var(--text-muted); font-size: 0.7rem; }

.change { display: flex; justify-content: flex-end; }.change-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 9px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.change-badge.up { background: var(--up-bg); color: var(--up); }
.change-badge.down { background: var(--down-bg); color: var(--down); }
.change-badge.new { background: var(--gold-bg); color: var(--gold); }
.change-badge.same { background: var(--neutral-bg); color: var(--neutral); }

/* ==================== Trend ==================== */
.trend-cell { display: flex; justify-content: flex-end; }
.trend-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-muted);
    transition: all var(--transition);
}
.trend-btn:hover { color: var(--accent-deep); border-color: rgba(99, 102, 241, 0.45); background: var(--accent-soft); }
.trend-btn svg { pointer-events: none; }

.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.42); animation: fadeIn 0.16s ease-out both; }
.modal-panel {
    position: relative; z-index: 1; width: min(720px, 100%); max-height: 88vh; overflow: auto;
    background: var(--bg-card); border-radius: var(--radius-lg); border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22); animation: popIn 0.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.modal-head {
    display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 12px;
    border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-card); z-index: 2;
}
.modal-head-text { flex: 1; min-width: 0; }
.modal-title { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
.modal-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 3px; }
.modal-body { padding: 16px 20px 20px; }

.trend-days { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.trend-days-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; margin-right: 2px; }
.trend-day {
    padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 0.75rem; font-weight: 600;
    background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-secondary);
    font-family: var(--font); transition: all var(--transition);
}
.trend-day:hover { border-color: rgba(99, 102, 241, 0.4); color: var(--accent-deep); }
.trend-day.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-deep); }

.trend-chart { background: rgba(15, 23, 42, 0.015); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px; }
.trend-chart svg { display: block; width: 100%; height: auto; }
.trend-chart .ax { font-size: 9px; fill: var(--text-muted); font-family: var(--font); }
.trend-legend { display: flex; align-items: center; gap: 14px; margin: 10px 2px 0; }
.trend-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--text-secondary); font-weight: 600; }
.trend-legend-item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.trend-legend-note { margin-left: auto; font-size: 0.72rem; color: var(--text-muted); }

.trend-table-wrap { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--radius-md); max-height: 240px; overflow: auto; }
.trend-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.trend-table th { position: sticky; top: 0; background: #f4f5fa; color: var(--text-muted); font-size: 0.7rem; font-weight: 700; text-align: left; padding: 8px 12px; }
.trend-table td { padding: 7px 12px; border-top: 1px solid rgba(15, 23, 42, 0.05); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.trend-table tr:hover td { background: var(--bg-card-hover); }
.trend-table .td-dash { color: var(--text-muted); }
.trend-loading, .trend-empty { padding: 40px 16px; text-align: center; color: var(--text-muted); font-size: 0.84rem; }
.trend-foot { margin-top: 12px; font-size: 0.7rem; color: var(--text-muted); text-align: right; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ==================== Empty / Footnote ==================== */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 64px 20px; color: var(--text-muted); gap: 12px; }
.empty-state p { font-size: 0.875rem; }
.footnote { margin-top: 12px; font-size: 0.72rem; color: var(--text-muted); line-height: 1.7; }
.footnote code { font-family: var(--mono); background: var(--bg-soft); padding: 0 4px; border-radius: 3px; }

/* ==================== Login ==================== */
.login-body {
    background: var(--bg-primary);
    background-image:
        radial-gradient(ellipse at 30% 20%, rgba(99, 102, 241, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(79, 70, 229, 0.05) 0%, transparent 60%);
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
.login-container { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; max-width: 400px; padding: 20px; animation: fadeInUp 0.5s ease-out; }
.login-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 44px 34px 36px; width: 100%; text-align: center; box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06); }
.login-icon { margin-bottom: 18px; }
.login-title { font-size: 1.4rem; font-weight: 700; background: linear-gradient(135deg, #6366f1, #4f46e5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; }
.login-subtitle { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 26px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-input { height: 44px; font-size: 0.9rem; }
.login-btn {
    height: 44px; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); border: none;
    border-radius: var(--radius-md); color: #fff; font-size: 0.9rem; font-weight: 600;
    font-family: var(--font); cursor: pointer; transition: transform var(--transition), box-shadow var(--transition);
}
.login-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow); }
.login-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.error-message { color: var(--up); font-size: 0.8rem; text-align: left; }
.login-footer { color: var(--text-muted); font-size: 0.72rem; }

/* ==================== Animations ==================== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* 平台列：桌面上不占列（平台信息在移动端以行内标签露出） */
.cell-mobile-only { display: none; }

/* ==================== Responsive ==================== */
@media (max-width: 1024px) {
    /* 中等宽度：字数/上架两列收起，剩下 名次/书(ID)/次数/走势 */
    .list-head, .row { grid-template-columns: 44px minmax(0, 1fr) 118px 72px 56px; }
    .row .cell-hide-md, .list-head .cell-hide-md { display: none; }
}
@media (max-width: 900px) {
    .list-head { display: none; }
    .row { grid-template-columns: 40px minmax(0, 1fr) 68px 40px; row-gap: 4px; }
    .row .cell-hide-sm { display: none; }
    /* 窄屏把平台标签露出来（移到书籍单元格内） */
    .row .cell-mobile-only { display: none; }
    .book .plat-inline { display: inline-flex; }
    .row .trend-cell { align-self: center; }
    .trend-btn { width: 26px; height: 26px; }
    .breadcrumb { display: none; }
    .modal { padding: 10px; }
    .days-bar { width: 44px; }
}
@media (max-width: 640px) {
    /* 窄屏：ID 与次数合进书籍单元格内展示（写在 .book-meta 里） */
    .row { grid-template-columns: 34px minmax(0, 1fr) 36px; }
    .row .id-cell, .row .days-cell { display: none; }
    .book .id-inline, .book .days-inline { display: inline; }
}