/* CF 回归轮换台 —— 浅色粉主题（按设计稿重做） */

:root {
    --bg: #f7f4f7;
    --bg-soft: #faf6fa;
    --card: #ffffff;
    --card-2: #fbf7fa;
    --line: #f0e6ee;
    --line-strong: #e7dae4;
    --text: #3a3340;
    --muted: #8b8494;
    --dim: #b9b2c0;
    --accent: #e85b93;
    --accent-2: #f47bab;
    --accent-soft: rgba(232, 91, 147, .1);
    --green: #23b26f;
    --green-soft: rgba(35, 178, 111, .12);
    --orange: #f2912b;
    --orange-soft: rgba(242, 145, 43, .13);
    --pink: #e85b93;
    --pink-soft: rgba(232, 91, 147, .1);
    --red: #e24b63;
    --red-soft: rgba(226, 75, 99, .1);
    --gray: #9c96a4;
    --gray-soft: rgba(156, 150, 164, .12);
    --gold: #c08a2e;
    --gold-soft: rgba(214, 158, 60, .14);
    --radius: 12px;
    --radius-card: 18px;
    --shadow: 0 8px 26px rgba(120, 80, 110, .07);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }

code {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 12px;
    color: #7a5568;
    word-break: break-all;
}

/* ---------- 布局 ---------- */

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.topbar {
    position: sticky; top: 0; z-index: 20;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.topbar-in { display: flex; align-items: center; gap: 28px; height: 64px; }

.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .02em; }

.brand-mark {
    display: inline-grid; place-items: center;
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-size: 14px; font-weight: 800; letter-spacing: .04em;
    box-shadow: 0 6px 16px rgba(232, 91, 147, .3);
}

.brand-text { font-size: 15px; color: var(--text); }

.nav { display: flex; gap: 4px; margin-left: 8px; }

.nav a {
    padding: 8px 16px; border-radius: 99px;
    color: var(--muted); font-size: 14px; font-weight: 600;
    transition: color .15s ease, background .15s ease;
}

.nav a:hover { color: var(--text); background: var(--accent-soft); }
.nav a.on { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.badge-dot {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 22px; height: 24px; padding: 0 10px; border-radius: 99px;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    color: #fff; font-size: 12px; font-weight: 700;
}

.badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }

main.wrap { padding-top: 24px; padding-bottom: 40px; }

.footer { padding: 18px 24px 40px; color: var(--dim); font-size: 12px; text-align: center; }

/* ---------- 按钮 ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 18px; border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: var(--card); color: var(--text);
    font-family: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: transform .12s ease, background .15s, border-color .15s, box-shadow .15s;
}

.btn:hover { background: var(--card-2); border-color: #e0c9d8; }
.btn:active { transform: translateY(1px); }

.btn.primary, .btn.pink {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border-color: transparent; color: #fff;
    box-shadow: 0 8px 20px rgba(232, 91, 147, .26);
}
.btn.primary:hover, .btn.pink:hover { box-shadow: 0 10px 24px rgba(232, 91, 147, .34); }

.btn.ghost { background: transparent; border-color: var(--line-strong); color: var(--muted); }
.btn.ghost:hover { color: var(--text); background: var(--card-2); }

.btn.danger { background: transparent; border-color: rgba(226, 75, 99, .4); color: var(--red); }
.btn.danger:hover { background: var(--red-soft); }

.btn.sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- 页面标题（枪械清单） ---------- */

.page-head { margin: 4px 0 20px; }
.page-head h1 { font-size: 26px; letter-spacing: -.02em; }
.page-head p { margin-top: 4px; color: var(--muted); font-size: 13px; }

/* ---------- Hero ---------- */

.hero {
    position: relative; overflow: hidden;
    padding: 30px 34px 24px; border-radius: 24px;
    border: 1px solid #ffe0ee;
    background: linear-gradient(135deg, #fff2f8 0%, #ffe6f0 55%, #ffeef5 100%);
    box-shadow: var(--shadow);
}

.hero.warn { border-color: rgba(226, 75, 99, .35); background: linear-gradient(135deg, #fff2f5, #ffe4ec); }

.hero::after {
    content: ""; position: absolute; width: 420px; height: 420px;
    right: -120px; top: -200px; pointer-events: none;
    background: radial-gradient(circle, rgba(232, 91, 147, .12), transparent 65%);
}

.hero-inner { position: relative; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.hero-main { flex: 1 1 420px; min-width: 0; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; letter-spacing: .1em; color: var(--accent); font-weight: 700;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.hero h1 { margin-top: 10px; font-size: clamp(22px, 3vw, 32px); line-height: 1.3; letter-spacing: -.02em; color: #47313d; }
.hero h1 em { font-style: normal; color: var(--accent); }

.hero-sub { margin-top: 10px; color: #9a7f8d; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hero-sub strong { color: #5b4551; font-weight: 700; }
.hero-sub.warn-line { color: var(--red); }

.hero-actions { display: flex; flex-direction: column; gap: 10px; min-width: 180px; }
.hero-actions .btn.ghost { background: rgba(255, 255, 255, .65); }

.hero-stats {
    position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #f5dbe7;
}
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.2; color: #47313d; }
.stat span { font-size: 12px; color: #a48896; }
.stat.is-green b { color: var(--green); }
.stat.is-orange b { color: var(--orange); }
.stat.is-red b { color: var(--red); }

/* ---------- 段落标题 ---------- */

.section-head { display: flex; align-items: baseline; gap: 12px; margin: 28px 2px 14px; flex-wrap: wrap; }
.section-head h2 { font-size: 16px; }
.section-head span { font-size: 12px; color: var(--dim); }
.section-head .right { margin-left: auto; font-size: 12px; color: var(--dim); }

/* 顶栏是 sticky，锚点跳转要留出高度 */
#accounts, #timeline, #play { scroll-margin-top: 84px; }

/* ---------- 账号卡片 ---------- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }

.acct {
    --state: var(--gray);
    position: relative; display: flex; flex-direction: column; gap: 14px;
    padding: 18px; border-radius: var(--radius-card);
    background: var(--card); border: 1px solid var(--line);
    box-shadow: var(--shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.acct:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(120, 80, 110, .12); }

.acct.st-claimable { --state: var(--green); border-color: rgba(35, 178, 111, .28); }
.acct.st-playing { --state: var(--orange); }
.acct.st-expiring { --state: var(--pink); border-color: rgba(232, 91, 147, .3); }
.acct.st-cooling { --state: var(--gray); }
.acct.st-permanent { --state: var(--gold); border-color: rgba(214, 158, 60, .32); }

.acct-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.acct-name { display: flex; align-items: center; gap: 10px; min-width: 0; }

.acct-avatar {
    flex: none; display: inline-grid; place-items: center;
    width: 38px; height: 38px; border-radius: 11px;
    font-size: 15px; font-weight: 800; color: #fff;
    background: linear-gradient(135deg, var(--gray), #b6b0bd);
}
.acct-avatar.st-claimable { background: linear-gradient(135deg, #2fc47d, #6bdb9d); }
.acct-avatar.st-playing { background: linear-gradient(135deg, #f2912b, #ffb057); }
.acct-avatar.st-expiring { background: linear-gradient(135deg, var(--pink), #f79abf); }
.acct-avatar.st-cooling { background: linear-gradient(135deg, #a9a3b0, #c6c0cc); }
.acct-avatar.st-permanent { background: linear-gradient(135deg, #d69e3c, #f3cd85); }

.acct-name-txt { min-width: 0; }
.acct-name h3 { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-name .srv { display: block; margin-top: 1px; font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pill {
    flex: none; padding: 4px 11px; border-radius: 99px;
    font-size: 12px; font-weight: 700; letter-spacing: .02em;
    border: 1px solid transparent; white-space: nowrap;
}
.pill-green  { color: var(--green);  background: var(--green-soft);  border-color: rgba(35, 178, 111, .26); }
.pill-orange { color: var(--orange); background: var(--orange-soft); border-color: rgba(242, 145, 43, .28); }
.pill-pink   { color: var(--pink);   background: var(--pink-soft);   border-color: rgba(232, 91, 147, .28); }
.pill-gray   { color: var(--gray);   background: var(--gray-soft);   border-color: var(--line-strong); }
.pill-gold   { color: var(--gold);   background: var(--gold-soft);   border-color: rgba(214, 158, 60, .3); }

.acct-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag {
    display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
    border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap;
    color: var(--muted); background: var(--card-2); border: 1px solid var(--line);
}
.tag-rank  { color: var(--accent); background: var(--pink-soft); border-color: rgba(232, 91, 147, .25); }
.tag-money { color: #a8781f; background: #fdf4e3; border-color: #f0dfb8; }

.acct-body { display: flex; align-items: center; gap: 16px; }

.ring { position: relative; flex: none; width: 92px; height: 92px; }
.ring svg { display: block; width: 92px; height: 92px; }
.ring-track { color: var(--line-strong); }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring-center b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--text); }
.ring-center span { font-size: 11px; color: var(--dim); }

.meta { margin: 0; flex: 1; min-width: 0; }
.meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 2px 0; font-size: 12.5px; }
.meta-row dt { color: var(--dim); white-space: nowrap; }
.meta-row dd { margin: 0; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.note-cell { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-note { display: block; font-size: 11px; font-weight: 500; color: var(--dim); margin-top: 1px; }

.score { font-weight: 800; }
.score-ok { color: var(--green); }
.score-warn { color: var(--orange); }
.score-danger { color: var(--red); }

.acct > .btn { width: 100%; }
.acct-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acct-actions .btn { flex: 1 1 118px; height: 38px; font-size: 13px; }
.acct-actions .capsule { height: 38px; padding: 0 10px; }

/* 计时中 */
.play-live {
    flex: 1 1 auto; display: flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 12px; border-radius: 10px;
    background: var(--pink-soft); border: 1px solid rgba(232, 91, 147, .3);
    color: var(--accent); font-size: 13px; font-weight: 700;
}
.play-live .live-dot {
    flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
    animation: livePulse 1.6s ease-in-out infinite;
}
.play-live .live-time { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.play-live.is-long { background: var(--orange-soft); border-color: rgba(242, 145, 43, .36); color: var(--orange); }
.play-live.is-long .live-dot { background: var(--orange); }

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .3; transform: scale(.75); }
}

.capsule {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 12px; border-radius: 10px; font-size: 12px; font-weight: 700;
    border: 1px solid transparent; white-space: nowrap;
}
.capsule-green { color: var(--green);  background: var(--green-soft);  border-color: rgba(35, 178, 111, .26); }
.capsule-orange{ color: var(--orange); background: var(--orange-soft); border-color: rgba(242, 145, 43, .28); }
.capsule-warn  { color: var(--orange); background: var(--orange-soft); border-color: rgba(242, 145, 43, .28); }
.capsule-red   { color: var(--red);    background: var(--red-soft);    border-color: rgba(226, 75, 99, .28); }
.capsule-gray  { color: var(--gray);   background: var(--gray-soft);   border-color: var(--line-strong); }

.link-btn {
    flex: none; margin-left: auto; padding: 0; border: 0; background: none;
    color: var(--dim); font-size: 12px; font-weight: 600; font-family: inherit;
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-btn:hover { color: var(--accent); }

/* ---------- 面板 / 时间线 ---------- */

.panel {
    padding: 20px 22px; border-radius: var(--radius-card);
    background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.panel + .panel { margin-top: 16px; }

.panel-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.panel-head h2 { font-size: 15px; }
.panel-head span { font-size: 12px; color: var(--dim); }

.count-chip { display: inline-block; padding: 1px 8px; border-radius: 99px; background: var(--pink-soft); color: var(--accent); font-size: 12px; font-weight: 700; }

.split { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; margin-top: 16px; }
.split > .panel { margin-top: 0; }

.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 12px; color: var(--dim); }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 1px; }
.legend .gun { background: rgba(35, 178, 111, .6); }
.legend .gap { background: rgba(226, 75, 99, .5); }
.legend .claim { background: var(--accent); border-radius: 50%; }

.tl { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }

.tl-cell {
    position: relative; padding: 7px 4px 6px; text-align: center;
    border-radius: 10px; border: 1px solid var(--line);
    background: var(--card-2); font-size: 12px; color: var(--muted);
    font-variant-numeric: tabular-nums; line-height: 1.3;
}
.tl-cell .m { font-size: 10px; color: var(--dim); display: block; }
.tl-cell .d { font-size: 14px; font-weight: 700; color: var(--text); display: block; }
.tl-cell.gun { background: var(--green-soft); border-color: rgba(35, 178, 111, .32); }
.tl-cell.gun .d { color: #1e9c62; }
.tl-cell.gap { background: var(--red-soft); border-color: rgba(226, 75, 99, .26); }
.tl-cell.gap .d { color: #cf5266; }
.tl-cell.today { box-shadow: inset 0 0 0 1px rgba(232, 91, 147, .55); }
.tl-cell.today .m { color: var(--accent); }
.tl-claim { position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- 今天提醒 ---------- */

.remind-block + .remind-block { margin-top: 14px; }
.remind-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.remind-block.danger .remind-title { color: var(--red); }

.cap-list { display: flex; flex-direction: column; gap: 8px; }

.cap-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 10px;
    background: var(--red-soft); border: 1px solid rgba(226, 75, 99, .16);
    font-size: 13px;
}
.remind-block:not(.danger) .cap-item { background: var(--gray-soft); border-color: var(--line-strong); }
.cap-item .n { font-weight: 700; color: var(--text); }
.cap-item .t { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.remind-block.danger .cap-item .t { color: var(--red); }

.empty { padding: 26px 12px; text-align: center; color: var(--dim); font-size: 13px; }

/* ---------- 提示条 ---------- */

.tipbar {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 16px; padding: 12px 16px; border-radius: 14px;
    background: #fff4f7; border: 1px solid #ffdbe6;
    color: #a4738a; font-size: 13px; line-height: 1.7;
}
.tipbar b { color: #7d4257; }
.tip-ico {
    flex: none; display: inline-grid; place-items: center;
    width: 20px; height: 20px; margin-top: 1px; border-radius: 50%;
    background: var(--accent); color: #fff; font-size: 12px; font-weight: 800;
}

/* ---------- 今日建议 ---------- */

.advice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

.advice {
    position: relative; padding: 16px 16px 14px; border-radius: 16px;
    background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.advice.pri { border-color: rgba(232, 91, 147, .4); background: #fff7fa; }
.advice.pri-red { border-color: rgba(226, 75, 99, .38); background: #fff5f6; }

.pri-tag {
    position: absolute; top: 12px; right: 12px;
    font-size: 11px; color: var(--dim); font-weight: 700; letter-spacing: .04em;
}
.advice.pri .pri-tag { color: var(--accent); }
.advice.pri-red .pri-tag { color: var(--red); }

.advice h3 { font-size: 15px; margin: 6px 0 4px; }
.advice p { font-size: 12.5px; color: var(--muted); line-height: 1.6; }

/* ---------- 洞察 ---------- */

.insight {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
    padding: 16px 20px; border-radius: var(--radius-card);
    background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
    margin-top: 16px;
}
.insight .item { font-size: 13px; color: var(--muted); }
.insight .item b { color: var(--accent); font-weight: 700; }
.insight .bad, .bad { color: var(--red); }

/* ---------- 表格 ---------- */

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
    text-align: left; padding: 10px 12px; color: var(--dim); font-weight: 600;
    font-size: 12px; letter-spacing: .02em; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { font-variant-numeric: tabular-nums; }
.num-orange { color: var(--orange); font-weight: 700; }
.num-pink { color: var(--pink); font-weight: 700; }
.table .actions { text-align: right; white-space: nowrap; }
.table .actions form { display: inline; }

.tbl-acct { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.dot-ico {
    display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
    background: var(--pink-soft); color: var(--accent); font-size: 12px; font-weight: 800;
}

/* ---------- 枪库 ---------- */

.gun-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }

.gun-card { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.gun-thumb {
    position: relative;
    display: grid; place-items: center; height: 92px;
    background: linear-gradient(135deg, #fbe3ea, #f8d2dd);
    color: #c9527a;
}
.gun-thumb.has-img { background: #f7f2f4; }
.gun-thumb svg { width: 68px; height: 34px; }
.gun-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.gun-ico { display: grid; place-items: center; color: #c9527a; opacity: .92; }
.gun-perm {
    position: absolute; top: 8px; right: 8px;
    font-size: 10px; font-weight: 700; letter-spacing: .3px;
    color: #fff; background: rgba(201, 82, 122, .92);
    padding: 2px 7px; border-radius: 999px;
}
.gun-body { padding: 12px 14px 14px; }
.gun-body h3 { font-size: 14px; }
.gun-meta { margin-top: 2px; font-size: 12px; color: var(--dim); }
.gun-src { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.src-tag {
    font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px;
    background: var(--bg-soft); color: var(--dim); border: 1px solid var(--line);
}
.src-tag.src-free    { color: #2f7d55; background: #e8f6ee; border-color: #cbe9d8; }
.src-tag.src-weekend { color: #b3611a; background: #fdf1e4; border-color: #f6ddc4; }
.src-tag.src-source  { color: #8a4fb0; background: #f3ecfa; border-color: #e2d2f2; }
.src-tag.src-rehab   { color: #2b6ea8; background: #e9f3fb; border-color: #cfe4f5; }
.src-tag.src-daoju   { color: #a06a12; background: #fbf3e0; border-color: #f0e2bf; }
.src-tag.src-seckill { color: #b83f4c; background: #fdeced; border-color: #f6d3d6; }
.gun-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.gun-foot .hint { font-size: 12px; }
.gun-del { margin-left: auto; }
.gun-img-edit { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 8px; }
.gun-img-edit summary {
    cursor: pointer; font-size: 12px; color: var(--dim);
    list-style: none; user-select: none;
}
.gun-img-edit summary::-webkit-details-marker { display: none; }
.gun-img-edit summary::before { content: '＋ '; color: var(--accent); }
.gun-img-edit[open] summary::before { content: '− '; }
.gun-img-edit form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.gun-img-edit input[type="file"],
.gun-img-edit input[name="icon_url"] { font-size: 11.5px; width: 100%; box-sizing: border-box; }
.gun-img-edit input[name="icon_url"] {
    height: 30px; padding: 0 8px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--bg-soft); color: inherit;
}
.gun-img-row { display: flex; gap: 6px; flex-wrap: wrap; }
.gun-img-edit .hint { font-size: 11px; line-height: 1.6; }
.src-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.src-pick {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 11px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: var(--bg-soft); font-size: 12.5px;
}
.src-pick input { accent-color: var(--accent); }
.src-pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, #fde9ef); color: var(--accent); }
.gun-add { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ---------- 设置页 ---------- */

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.settings-grid > .panel { margin-top: 0; }
.settings-grid .span-2 { grid-column: 1 / -1; }

/* 账号总览 */
.acc-summary {
    display: flex; flex-wrap: wrap; gap: 8px 22px;
    padding: 12px 14px; margin-bottom: 14px;
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--card-2);
}
.acc-summary > div { display: flex; align-items: baseline; gap: 6px; }
.acc-summary b { font-size: 19px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.acc-summary span { font-size: 12px; color: var(--muted); }
.acc-summary .s-claim b { color: var(--green); }
.acc-summary .s-cool b { color: var(--gray); }
.acc-summary .s-warn b { color: var(--orange); }

.link-btn.to-right { text-decoration: none; color: var(--accent); }
.add-box[id] { scroll-margin-top: 20px; }

/* 账号行：默认折叠，点开编辑 */
.acct-list { display: flex; flex-direction: column; gap: 10px; }

.acct-row {
    border: 1px solid var(--line); border-radius: 14px;
    background: var(--bg-soft); overflow: hidden;
    transition: border-color .16s ease, background .16s ease;
}
.acct-row[open] { background: var(--card); border-color: var(--line-strong); box-shadow: var(--shadow); }

.acct-row > summary {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; cursor: pointer; list-style: none;
}
.acct-row > summary::-webkit-details-marker { display: none; }
.acct-row > summary:hover { background: rgba(232, 91, 147, .045); }
.acct-row[open] > summary { background: var(--card-2); border-bottom: 1px dashed var(--line); }

.ar-name { display: flex; flex-direction: column; flex: 1 1 150px; min-width: 0; }
.ar-name b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-name em {
    font-style: normal; font-size: 11.5px; color: var(--dim);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ar-meta { flex: 0 0 auto; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.ar-meta b { color: var(--text); font-weight: 600; }
.ar-meta .mute { color: var(--dim); }

.ar-toggle { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--accent); }
.ar-toggle .t-close { display: none; }
.acct-row[open] .ar-toggle .t-open { display: none; }
.acct-row[open] .ar-toggle .t-close { display: inline; }

.ar-body { padding: 14px; }

/* 规则说明条 */
.rule-strip {
    display: flex; flex-wrap: wrap; gap: 4px 16px;
    padding: 9px 12px; margin-bottom: 14px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--card-2);
    font-size: 12px; color: var(--muted);
}
.rule-strip b { color: var(--text); font-weight: 600; }

/* 表单分区（.form 自身有 14px gap，这里不再加外边距） */
.form-sec > h3 {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: var(--muted);
    margin-bottom: 9px;
}
.form-sec > h3::before {
    content: ''; width: 3px; height: 11px; border-radius: 2px;
    background: var(--accent); flex: none;
}
.form-sec > .form-row + .form-row { margin-top: 14px; }

/* 快捷填写 */
.quick-row { display: flex; flex-wrap: wrap; gap: 6px; }
.quick-btn {
    height: 24px; padding: 0 9px; cursor: pointer;
    font-family: inherit; font-size: 11.5px; color: var(--muted);
    background: var(--card-2); border: 1px solid var(--line-strong); border-radius: 7px;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.quick-btn:hover { color: var(--accent); border-color: rgba(232, 91, 147, .34); background: var(--pink-soft); }

/* 危险操作 */
.ar-danger {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: 16px; padding-top: 12px;
    border-top: 1px dashed var(--line-strong);
}
.ar-danger p { flex: 1 1 220px; min-width: 0; font-size: 11.5px; color: var(--dim); }
.ar-danger form { flex: none; margin-left: auto; }

.add-box { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }

/* 开通项 / 充值记录 */
.perk-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.perk-item {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 9px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--line); background: var(--card-2);
    font-size: 12px; color: var(--muted);
}
.perk-item input { margin: 0; }
.perk-item:has(input:checked) {
    color: var(--accent); background: var(--pink-soft);
    border-color: rgba(232, 91, 147, .3); font-weight: 600;
}

.recharge-box { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.recharge-box > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.recharge-box > summary b { color: #a8781f; font-variant-numeric: tabular-nums; }
.rech-list { margin: 10px 0 4px; }
.rech-item {
    display: flex; align-items: baseline; gap: 10px;
    padding: 5px 0; font-size: 12.5px; border-bottom: 1px solid var(--line);
}
.rech-item .d { width: 46px; color: var(--dim); flex: none; }
.rech-item .a { font-weight: 700; flex: none; }
.rech-item .n { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rech-item form { margin-left: auto; flex: none; }
.rech-add { margin-top: 12px; }


.backup-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.backup-import { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.backup-import input[type="file"] { color: var(--muted); font-size: 13px; max-width: 100%; }

/* 备份文件列表 */
.backup-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.backup-list li {
    display: flex; gap: 12px; align-items: center;
    padding: 8px 12px; background: var(--card-2);
    border: 1px solid var(--line); border-radius: 9px; font-size: 12.5px;
}
.backup-list .bf-name { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); }
.backup-list .bf-meta { margin-left: auto; color: var(--muted); white-space: nowrap; }

/* ---------- 表单 ---------- */

.form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: grid; gap: 14px; }
.form-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-row.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-row.start { display: flex; justify-content: flex-start; }
.form-row.end { display: flex; justify-content: flex-end; }

.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; min-width: 0; }
.field > span { color: var(--muted); font-size: 12px; }

.field input, .field select, .field textarea {
    width: 100%; min-width: 0; height: 40px; padding: 0 12px;
    border-radius: 10px; border: 1px solid var(--line-strong);
    background: var(--bg-soft); color: var(--text);
    font-family: inherit; font-size: 14px; outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { height: 90px; padding: 10px 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: rgba(232, 91, 147, .55);
    box-shadow: 0 0 0 3px rgba(232, 91, 147, .12);
    background: #fff;
}
.field input::placeholder { color: var(--dim); }
.field input[type="checkbox"] { width: auto; height: auto; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--accent); }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); cursor: pointer; }
.check input { accent-color: var(--accent); }

.alert { padding: 11px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; border: 1px solid transparent; }
.alert-red { background: var(--red-soft); border-color: rgba(226, 75, 99, .28); color: #c43f55; }
.alert-green { background: var(--green-soft); border-color: rgba(35, 178, 111, .28); color: #1c8f59; }
.alert-gray { background: var(--card-2); border-color: var(--line); color: var(--muted); }
.alert-orange { background: var(--orange-soft); border-color: rgba(242, 145, 43, .3); color: #a8641a; }

.hint { font-size: 12px; color: var(--dim); line-height: 1.7; }
.hint.warn { color: var(--red); }
.hint.ok { color: var(--green); }
.muted { color: var(--muted); }

/* ---------- 登录页 ---------- */

.auth-body { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 24px; background: linear-gradient(135deg, #fff2f8, #f7f4f7); }
.auth-wrap { width: 100%; max-width: 400px; }
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px; font-size: 16px; font-weight: 700; }
.auth-body .panel { padding: 26px 24px; }
.auth-body h1 { font-size: 20px; margin-bottom: 6px; }
.auth-body .muted { font-size: 13px; margin-bottom: 18px; }

/* ---------- 弹层 ---------- */

.modal {
    position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
    padding: 20px; background: rgba(60, 40, 52, .38); backdrop-filter: blur(4px);
}
.modal[hidden] { display: none; }

.modal-card {
    position: relative; width: 100%; max-width: 440px; padding: 26px 24px;
    border-radius: 20px; background: var(--card); border: 1px solid var(--line-strong);
    box-shadow: 0 30px 70px rgba(80, 40, 65, .28); animation: pop .16s ease-out;
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.modal-x {
    position: absolute; top: 14px; right: 16px; width: 30px; height: 30px; border: 0;
    border-radius: 50%; background: var(--card-2); color: var(--muted); font-size: 18px; cursor: pointer;
}
.modal-x:hover { background: var(--accent-soft); color: var(--accent); }

.modal-card h2 { font-size: 18px; }
.modal-sub { margin: 6px 0 18px; font-size: 13px; color: var(--muted); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

.quick-days { display: flex; gap: 8px; }
.chip {
    padding: 6px 14px; border-radius: 99px; border: 1px solid var(--line-strong);
    background: var(--card-2); color: var(--muted); font-size: 12.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.chip:hover { border-color: #e0c9d8; }
.chip.on { background: var(--accent-soft); border-color: rgba(232, 91, 147, .4); color: var(--accent); }

/* ---------- 游玩统计 ---------- */

.ps-tabs {
    display: inline-flex; gap: 3px; padding: 3px;
    border-radius: 10px; background: var(--card); border: 1px solid var(--line);
}
.ps-tab { padding: 4px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ps-tab:hover { color: var(--accent); }
.ps-tab.on { background: var(--pink-soft); color: var(--accent); }

.ps-panel { padding: 18px 22px 20px; }
.ps-sum {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 14px 20px; flex-wrap: wrap; margin-bottom: 16px;
}
.ps-total b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.ps-total span { font-size: 12px; color: var(--dim); }
.ps-total em { font-style: normal; color: var(--accent); font-weight: 700; }
.ps-side { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.ps-kv b { color: var(--text); font-weight: 700; }

.ps-list { display: flex; flex-direction: column; gap: 10px; }
.ps-row { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.ps-name { flex: none; width: 96px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-bar {
    flex: 1; height: 9px; border-radius: 99px; overflow: hidden;
    background: var(--card-2); border: 1px solid var(--line);
}
.ps-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #f9a8c4, var(--accent)); }
.ps-val { flex: none; min-width: 88px; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 充值卡片 */
.wallet-bar i { background: linear-gradient(90deg, #f7c86a, #e0892f); }
.wallet-hint { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.wallet-hint b { color: var(--text); }
.wallet-add { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.wallet-add summary {
    cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent);
    list-style: none; user-select: none;
}
.wallet-add summary::-webkit-details-marker { display: none; }
.wallet-add summary::before { content: '＋ '; }
.wallet-add[open] summary::before { content: '− '; }
.wallet-add form { margin-top: 14px; }

/* 登录页「记住这台设备」 */
.remember-row {
    display: flex; gap: 8px; align-items: center;
    font-size: 13px; color: var(--muted);
    cursor: pointer; user-select: none; margin: -2px 0 2px;
}
.remember-row input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; }

/* 时间线文字摘要 */
.tl-notes { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.tl-note {
    display: flex; gap: 10px; align-items: baseline;
    padding: 8px 12px; font-size: 12.5px; line-height: 1.7;
    background: var(--card-2); border: 1px solid var(--line); border-radius: 9px;
}
.tl-note b { flex: 0 0 auto; font-weight: 600; color: var(--muted); }
.tl-note span { color: var(--text); }
.tl-note.bad { background: var(--red-soft); border-color: rgba(226, 75, 99, .24); }
.tl-note.bad b { color: var(--red); }
.tl-note.ok { background: var(--green-soft); border-color: rgba(35, 178, 111, .24); }
.tl-note.ok b { color: var(--green); }

/* 可领号码的「先领再玩」提示 */
.claim-hint {
    margin: 8px 0 10px;
    padding: 8px 11px;
    font-size: 12px;
    line-height: 1.65;
    color: #4a7a5f;
    background: var(--green-soft);
    border: 1px solid rgba(35, 178, 111, .22);
    border-radius: 10px;
}
.claim-hint b { color: var(--green); font-weight: 600; }

/* 永久神器：金色，区别于其他状态 */
.perm-txt { color: var(--gold); font-weight: 700; }
.perm-hint {
    margin: 8px 0 10px;
    padding: 8px 11px;
    font-size: 12px;
    line-height: 1.65;
    color: #8a6218;
    background: var(--gold-soft);
    border: 1px solid rgba(214, 158, 60, .3);
    border-radius: 10px;
}

/* 领取记录里「改期限」：把误标成永久的记录纠正回有期限 */
.fix-claim { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.fix-claim input[type=number] {
    width: 62px; padding: 5px 7px;
    font-size: 12px; font-family: inherit;
    color: var(--text); background: var(--card);
    border: 1px solid var(--line-strong); border-radius: 8px;
}

/* ---------- 轻提示 ---------- */
.toast {
    position: fixed; left: 50%; bottom: 32px; z-index: 80; transform: translate(-50%, 20px);
    padding: 11px 18px; border-radius: 12px; background: #fff; border: 1px solid var(--line-strong);
    color: var(--text); font-size: 13px; box-shadow: 0 14px 34px rgba(80, 40, 65, .2);
    opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
    max-width: calc(100vw - 40px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { border-color: rgba(35, 178, 111, .45); }
.toast.err { border-color: rgba(226, 75, 99, .5); }

/* ---------- 截图入库 ---------- */

.shot-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; padding: 38px 20px; cursor: pointer; text-align: center;
    border: 1.5px dashed var(--line-strong); border-radius: 16px;
    background: var(--card-2); color: var(--muted);
    transition: border-color .16s ease, background .16s ease;
}
.shot-drop:hover, .shot-drop.is-hot {
    border-color: rgba(232, 91, 147, .55);
    background: var(--pink-soft);
}
.shot-drop input[type="file"] { display: none; }
.sd-icon { font-size: 26px; line-height: 1; }
.sd-title { font-size: 15px; font-weight: 700; color: var(--text); }
.sd-sub { font-size: 12px; color: var(--dim); line-height: 1.7; }
.sd-sub b { color: var(--accent); }

.shot-preview { display: inline-block; max-width: 100%; }
.shot-preview img {
    max-width: 100%; max-height: 280px; display: block;
    border-radius: 12px; border: 1px solid var(--line);
}
.shot-preview .link-btn { margin-top: 8px; }

.scan-raw {
    margin: 0; padding: 12px; max-height: 280px; overflow: auto;
    background: var(--card-2); border: 1px solid var(--line); border-radius: 10px;
    font-family: ui-monospace, Consolas, monospace; font-size: 12px;
    color: var(--muted); white-space: pre-wrap; word-break: break-all;
}

.scan-review { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
.scan-shot { position: sticky; top: 16px; text-align: center; }
.scan-shot img { width: 100%; display: block; border-radius: 12px; border: 1px solid var(--line); }
.scan-shot .hint { display: block; margin-top: 6px; }

/* 设置页：截图识别的模型快捷选择 */
.model-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 2px 0 12px; }
.mc-label { font-size: 12px; color: var(--dim); margin-right: 2px; }
.model-chip {
    display: inline-flex; align-items: baseline; gap: 5px;
    padding: 5px 10px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line); background: var(--card);
    font-size: 12px; color: var(--text); line-height: 1.4;
}
.model-chip em { font-style: normal; font-size: 11px; color: var(--dim); }
.model-chip:hover { border-color: rgba(226, 75, 99, .45); }
.model-chip.on { border-color: rgba(226, 75, 99, .55); background: var(--red-soft); color: #c43f55; }
.model-chip.on em { color: #c43f55; }

/* 设置页：截图识别「测试连接」的结果块 */
.vision-test {
    margin-top: 12px; padding: 12px 14px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--bg-soft);
}
.vision-test.is-wait { border-style: dashed; }
.vision-test.is-ok   { border-color: rgba(35, 178, 111, .4); background: var(--green-soft); }
.vision-test.is-warn { border-color: rgba(242, 145, 43, .45); background: var(--orange-soft); }
.vision-test.is-fail { border-color: rgba(226, 75, 99, .4); background: var(--red-soft); }
.vt-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.vt-head b { font-size: 14px; }
.vt-head span { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.vision-test p { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: var(--text); }
.vision-test.is-fail p { color: var(--red); }
.vision-test details { margin-top: 8px; }
.vision-test summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.vision-test details .scan-raw { margin-top: 8px; max-height: 200px; }

.scan-rows { display: flex; flex-direction: column; gap: 10px; }
.scan-row {
    display: flex; gap: 10px; padding: 12px;
    border: 1px solid var(--line); border-radius: 12px;
    background: var(--bg-soft);
}
.scan-row.is-dup { border-color: rgba(242, 145, 43, .45); background: var(--orange-soft); }
.scan-check { flex: none; padding-top: 1px; }
.scan-check input { width: 18px; height: 18px; accent-color: var(--accent); }
.scan-body { flex: 1; min-width: 0; }

.scan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.scan-name { font-size: 14px; font-weight: 700; }
.scan-badge {
    font-size: 11px; padding: 1px 7px; border-radius: 999px;
    border: 1px solid var(--line-strong); color: var(--muted); background: var(--card);
}
.scan-badge.ok { color: var(--green); border-color: rgba(35, 178, 111, .3); background: var(--green-soft); }
.scan-badge.warn { color: var(--orange); border-color: rgba(242, 145, 43, .35); background: var(--orange-soft); }

.scan-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }

/* 勾了行却没选账号：提交前高亮拦住 */
.scan-fields select.is-miss,
.scan-fields input.is-miss {
    border-color: var(--red);
    background: var(--red-soft);
    box-shadow: 0 0 0 3px rgba(226, 75, 99, .1);
}

/* 校对页：模型抄下来的原文，用来跟识别结果对照 */
.scan-rawline {
    margin: -2px 0 10px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--muted);
    background: var(--bg-soft);
    border-left: 3px solid var(--line-strong);
    border-radius: 0 8px 8px 0;
    word-break: break-all;
}

/* 永久道具：天数和到期日不再填 */
.scan-fields input:disabled {
    background: var(--bg-soft);
    color: var(--dim);
    cursor: not-allowed;
}
.field-perm { justify-content: flex-start; }
.perm-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #fff;
    color: var(--muted);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.perm-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--gold); cursor: pointer; }
.perm-toggle:has(input:checked) {
    color: var(--gold);
    border-color: rgba(214, 158, 60, .45);
    background: var(--gold-soft);
    font-weight: 600;
}
.scan-row.is-perm .perm-toggle { box-shadow: 0 0 0 3px rgba(214, 158, 60, .12); }

/* ---------- 响应式 ---------- */

@media (max-width: 900px) {
    .split { grid-template-columns: 1fr; }
    .settings-grid { grid-template-columns: 1fr; }
    .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
    .scan-review { grid-template-columns: 1fr; }
    .scan-shot { position: static; }
    .scan-shot img { max-height: 220px; width: auto; max-width: 100%; margin: 0 auto; }
}

@media (max-width: 620px) {
    .wrap { padding: 0 16px; }
    .topbar-in { gap: 12px; height: auto; padding: 12px 0; flex-wrap: wrap; }
    .nav { order: 3; width: 100%; margin-left: 0; }
    .nav a { flex: 1; text-align: center; }
    .topbar-right { gap: 8px; }
    .hero { padding: 22px 20px 20px; border-radius: 18px; }
    .hero-inner { gap: 18px; }
    .hero-actions { width: 100%; flex-direction: row; flex-wrap: wrap; }
    .hero-actions .btn { flex: 1; }
    .hero h1 { font-size: 22px; }
    .acct-body { gap: 12px; }
    .form-row.two, .form-row.three, .form-row.four { grid-template-columns: 1fr; }

    /* 账号行：摘要折成两行 */
    .acct-row > summary { flex-wrap: wrap; gap: 7px 8px; padding: 11px 12px; }
    .ar-name { flex: 1 1 100%; }
    .ar-toggle { margin-left: auto; }
    .ar-body { padding: 12px; }
    .acc-summary { gap: 6px 16px; }
    .ar-danger form { margin-left: 0; }
    .table { font-size: 12px; }
    .table th, .table td { padding: 8px; }
    .tl { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
    .ps-name { width: 66px; }
    .ps-val { min-width: 72px; }
    .ps-tab { padding: 4px 9px; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}