/* 又浪费了啥 / 不要浪费啥
   配色与视觉规范对齐「聚宝猪」设计风格提示词：
   浅灰底 + 纯白大圆角卡片 + 品牌绿主色 + 薄荷浅底 + 点睛橙 + 警示红 */
:root{
  --bg:#F5F6F8; --card:#FFFFFF;
  --text:#1A1A1A; --body:#333333; --muted:#999999;
  --primary:#34C266; --primary-d:#28B357; --mint:#E9F8EF;
  --accent:#FF8F1F; --accent-d:#E07C0C; --danger:#FA5151; --danger-bg:#FFECEC;
  --line:#F0F0F0;
  --radius:18px; --radius-sm:12px;
  --shadow:0 2px 12px rgba(0,0,0,.05); --shadow-up:0 6px 20px rgba(0,0,0,.10);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text)}
.screen{min-height:100vh}
.hidden{display:none!important}
/* 长按记录卡片时不选中任何文字（含顶栏/悬浮按钮/登录区） */
.card,.topbar,.fab,.empty,.brand,.tab{-webkit-user-select:none;-webkit-touch-callout:none;user-select:none}
/* 连接失败横幅 */
.net-banner{position:sticky;top:0;z-index:50;background:var(--danger);color:#fff;padding:10px 14px;font-size:14px;text-align:center}
/* 直接双击打开文件时的致命提示 */
.fatal{max-width:460px;margin:12vh auto;padding:28px;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);font-size:16px;line-height:1.7;text-align:center}
.fatal code{background:#F5F6F8;padding:2px 6px;border-radius:5px}

/* ---------- 按钮：胶囊形，绿底白字 / 薄荷底绿字 ---------- */
button{font:inherit;cursor:pointer;border:none;border-radius:999px;padding:11px 20px;background:var(--primary);color:#fff;font-weight:600;transition:filter .15s ease}
button:active{filter:brightness(.94)}
button.secondary{background:var(--mint);color:var(--primary-d);font-weight:600}
button.danger{background:var(--danger-bg);color:var(--danger);font-weight:600;padding:6px 12px;font-size:13px}
button.link{background:none;color:var(--muted);padding:4px 8px;font-weight:400}

input,select,textarea{font:inherit;font-size:15px;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;margin-top:6px}
textarea{resize:vertical}
label{display:block;font-size:14px;color:var(--muted);margin-bottom:12px}
/* 登录 */
/* 登录页底部的版本号：用来分辨「网页缓存了旧代码」还是「APK 装的是旧包」 */
.ver{margin:14px 0 0;text-align:center;font-size:11px;color:#C4C7CC;letter-spacing:.3px}
.login-card{max-width:360px;margin:14vh auto;background:var(--card);padding:28px 22px;border-radius:20px;box-shadow:var(--shadow)}
.login-card .brand{text-align:center;margin-bottom:20px}
.login-card .logo{width:120px;height:120px;border-radius:24px;object-fit:cover;margin:0 auto 16px;display:block;box-shadow:var(--shadow)}
.login-card h1{margin:0 0 6px;font-size:26px;letter-spacing:-.5px}
.login-card .sub{margin:0;color:var(--muted);font-size:14px}
.login-card button{width:100%;margin-top:6px}
.err{color:var(--danger);font-size:13px;min-height:18px;margin:8px 0 0}

/* ---------- 顶栏 ---------- */
/* 顶栏与搜索框合并为同一块白色区域（中间不再有分隔线），这样：
   白块内 标题上方 7px / 搜索框下方 7px 对称；
   搜索框上方(文字→框) 14px = 下方(框→条目) 7px+分隔线+6px 灰隙 = 14px，同样对称。
   分界线只在白块底部出现一次。 */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:7px 18px 0;background:var(--card);border-bottom:none;position:sticky;top:0;z-index:5}
.title{font-weight:700;font-size:18px}
.total{font-size:13px;color:var(--accent);margin-top:2px;font-weight:600}
.total-sub{font-size:11px;color:var(--muted);margin-top:2px}
.user{display:flex;align-items:center;gap:8px;font-size:14px}

/* ---------- 列表 ---------- */
main{padding:0 14px 160px}
.searchbar{padding:14px 14px 7px;background:var(--card);border-bottom:1px solid var(--line)}
/* 搜索框用薄荷浅底，与白色条目卡片拉开差别 */
.searchbar input{margin-top:0;background:var(--mint);border-color:#DCF3E5;border-radius:999px}
.list{display:flex;flex-direction:column;gap:6px;margin-top:6px}

/* .item 是唯一承载「卡片 + 展开」的容器：白底、圆角、一个阴影。
   展开时只加深这一个阴影并让内容淡入，避免出现「先展开、下方再冒出另一块阴影」的割裂感。 */
.item{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow .24s ease}
.item.expanded{box-shadow:var(--shadow-up)}

.card{display:flex;gap:12px;background:transparent;padding:14px;border-radius:var(--radius);position:relative;transition:transform .18s ease,background .18s ease}
.item.expanded .card{border-radius:var(--radius) var(--radius) 0 0;padding-bottom:10px}
.thumb{width:84px;height:84px;border-radius:14px;object-fit:cover;flex:0 0 auto;background:#F0F0F0}
.thumb.placeholder{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px}
/* A 区（又浪费了啥）卡片只有 2 行信息（名称 / 浪费人·总价），配 84px 大图会显得空；
   缩小到 56px 让图文信息量匹配。B 区有 3 行信息，保持 84px。 */
.card.two-line .thumb{width:56px;height:56px;border-radius:10px}
.card.two-line{padding:12px 14px;gap:12px}
.card.two-line .name{margin-bottom:5px}
.card.two-line .meta{margin-bottom:0}
.info{flex:1;min-width:0}
/* 名称行：名称 + 获赠礼圈图标（垂直居中对齐） */
.name{font-weight:600;font-size:16px;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.name .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gift-ico{width:17px;height:17px;flex:0 0 auto;color:var(--accent);display:inline-flex;align-items:center}
.gift-ico svg{width:17px;height:17px;display:block}
.meta{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.badge{font-size:12px;padding:2px 9px;border-radius:999px;background:var(--mint);color:var(--primary-d)}
.badge.who-c0{background:var(--mint);color:var(--primary-d)}
.badge.who-c1{background:#FFF3E4;color:var(--accent-d)}
.badge.who-c2{background:#EAF0FF;color:#3B5BDB}
.badge.who-c3{background:#FDE8EE;color:#C2255C}
.badge.who-both{background:#F1EFE8;color:#5F5E5A}
.val{font-weight:700;color:var(--text)}

/* 长按选中的删除按钮 */
.ops{position:absolute;top:50%;right:12px;transform:translateY(-50%) scale(.85);display:flex;gap:10px;align-items:center;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.card.selected .ops{opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto}
.icon-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:transform .2s ease}
.card.selected .icon-btn{transform:scale(1)}
.icon-btn.del{background:var(--danger);color:#fff}
/* 删除按钮里的横杠：用 CSS 画的，保证在圆形里垂直居中 */
.icon-btn.del .bar{display:block;width:16px;height:2px;background:#fff;border-radius:2px}
.card.selected{background:var(--mint)}
.list.has-selection .card:not(.selected){filter:grayscale(.5);opacity:.55}

input[readonly]{background:#F5F6F8;color:var(--muted);cursor:not-allowed}
.empty{text-align:center;color:var(--muted);margin-top:40px;font-size:14px}

/* 悬浮按钮 */
.fab{position:fixed;right:18px;bottom:76px;width:56px;height:56px;border-radius:50%;font-size:28px;line-height:1;box-shadow:0 6px 18px rgba(52,194,102,.38);padding:0;z-index:6}

/* ---------- 底部弹层（表单 / 移动确认） ----------
   高度控制要点：
   ① position:fixed + inset:0 本身就精确等于"当前可视区"（含 dvh 的动态行为），
      不要再叠加显式 height —— 与 flex 布局打架会导致内容溢出且无法滚动。
   ② 必须写 min-height:0：弹层原本同时挂 .screen 类，其 min-height:100vh
      在真机上（地址栏展开时 100vh > 可视高度）会把层撑出屏幕，底部按钮看不见。
      min-height 与 height 取较大值，所以必须显式归零才能让 inset:0 生效。 */
.modal{position:fixed;inset:0;min-height:0;background:rgba(26,26,26,.42);display:flex;align-items:flex-end;justify-content:center;z-index:20;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s}
.modal.open{opacity:1;visibility:visible;pointer-events:auto}
/* 表单卡片：高度不得超过弹层（父层已被 inset:0 精确限定为可视高度）。
   留出底部 12px 让卡片不贴死屏幕边缘。 */
.form-card{background:var(--card);width:100%;max-width:480px;border-radius:20px 20px 0 0;padding:20px 18px 12px;max-height:calc(100% - 12px);overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;transform:translateY(30px);transition:transform .22s cubic-bezier(.2,.8,.2,1);box-shadow:0 -4px 24px rgba(0,0,0,.10)}
.modal.open .form-card{transform:translateY(0)}
.form-card h2{margin:0 0 14px;font-size:18px;font-weight:700}
.row{display:flex;gap:12px}.row label{flex:1}
/* 「获取方式」：waste 下与「谁那么浪费」各半；keep 下「谁那么浪费」隐藏，
   它与「获赠日期」同行也各占一半（用 flex-basis 固定为 50% 减去间距的一半） */
.row label.grow{flex:2}
.row label.acq-col{flex:1 1 0;min-width:0}
.row label.acqdate-col{flex:1 1 0;min-width:0}
/* 吸底操作条：必须留在 form-card 内最后。
   注意 sticky 需要滚动祖先（.form-card 有 overflow:auto）才生效；
   背景色 + 上方分隔线保证内容滚到下面时不会从按钮缝里透出来。
   底部内边距只给安全区 + 一小圈呼吸量，不要多留（否则吸底后下方空一大截）。
   注意：不要用负 margin 去抵消 form-card 的下内边距 —— 那会缩短内容总高度，
   滚到底时「移入已浪费」反而会钻到吸底条下面被压住。 */
.form-actions{display:flex;gap:12px;margin:12px 0 0;padding:12px 0 calc(10px + env(safe-area-inset-bottom));position:sticky;bottom:0;background:var(--card);z-index:3;box-shadow:0 -1px 0 var(--line)}
.form-actions button{flex:1}
/* 「移入已浪费」紧贴吸底条上方，两者之间留出呼吸间距 */
#f-move-wrap{margin-top:2px;padding-bottom:2px}
.preview{margin-top:8px}.preview img{max-width:120px;border-radius:12px}
.photo-label{margin-bottom:6px}

/* ---------- 自定义小下拉 ---------- */
.dd-wrap{position:relative;display:block;width:100%;margin-top:6px}
.dd-btn{width:100%;text-align:left;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 30px 11px 12px;background:#fff;color:var(--text);font-size:16px;font-weight:400;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-btn::after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--muted)}
.dd-pop{position:absolute;top:100%;left:0;z-index:30;margin-top:4px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,.10);padding:6px;max-height:280px;overflow:auto;min-width:100%}
.dd-pop.align-right{left:auto;right:0}
.dd-op{display:block;width:100%;text-align:left;border:0;background:transparent;font-family:inherit;font-size:15px;font-weight:400;color:var(--text);padding:10px 12px;border-radius:8px;cursor:pointer;white-space:nowrap}
.dd-op:hover,.dd-op:active{background:#F5F6F8}
.dd-op.on{color:var(--primary-d);font-weight:600;background:var(--mint)}

/* 获取方式分段控件（购买 / 获赠） */
.seg{display:flex;gap:6px;margin-top:6px}
.seg-op{flex:1;text-align:center;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 8px;background:#fff;color:var(--text);font-size:16px;font-weight:400}
.seg-op.on{color:#fff;background:var(--primary);border-color:var(--primary);font-weight:600}

/* ---------- 内联展开区 ---------- */
.expand{display:none;padding:0 14px 14px}
.item.expanded .expand{display:block;animation:expandIn .24s cubic-bezier(.2,.8,.2,1)}
@keyframes expandIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.expand .ex-sep{height:1px;background:var(--line);margin-bottom:10px}
.expand .ex-line{font-size:14px;line-height:1.6;color:var(--body);margin-bottom:6px}
.expand .ex-line .em{color:var(--accent);font-weight:700}
.expand .ex-arrow{color:var(--muted);margin:0 4px}
.expand .ex-note{font-size:13px;line-height:1.6;color:var(--body);background:#FAFBFC;border-radius:10px;padding:8px 10px;margin-top:8px;word-break:break-word}
.expand .ex-note .ex-k{color:var(--muted);margin-right:6px}
.expand .expand-actions{display:flex;gap:10px;margin-top:12px}
/* 「编辑」与「移入已浪费」字号/内边距完全一致；只有一个按钮时不占满整行 */
/* 「编辑」与「移入…」按钮：宽度统一（各占一半），字号/内边距也一致 */
.expand .expand-actions button{padding:10px 12px;font-size:14px;font-weight:600;flex:1 1 0;min-width:0}
.expand .expand-actions .ex-move{background:var(--danger-bg);color:var(--danger)}
/* 「移入未浪费」用薄荷绿，与「移入已浪费」的红色语义相反 */
.expand .expand-actions .ex-restore{background:var(--mint);color:var(--primary-d)}

/* ---------- 不要浪费啥 卡片：X天过期 高亮 ---------- */
.card .days-left{font-size:12px;color:var(--muted);margin-top:2px}
.card .days-left .num{font-size:18px;font-weight:800;color:var(--primary);margin:0 2px}
.card .days-left.soon .num{color:var(--accent)}
.card .days-left.expired .num{color:var(--danger)}

/* ---------- 底部导航 ---------- */
#bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:7;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
#bottomnav .tab{flex:1;background:none;border:none;border-radius:0;padding:8px 0 6px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:11px;font-weight:600}
#bottomnav .tab .tab-ico{width:26px;height:26px;display:block;color:var(--muted)}
#bottomnav .tab.on{color:var(--primary)}
#bottomnav .tab.on .tab-ico{color:var(--primary)}

/* ---------- 移入已浪费：确认层 ---------- */
#move{z-index:30}
#restore{z-index:30}
.move-card{max-width:420px}
.move-name{font-size:16px;font-weight:600;margin:0 0 4px}
.move-tip{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.6}
/* 信息不完整提示 */
.move-warn{display:flex;align-items:center;gap:10px;background:var(--danger-bg);color:var(--danger);font-size:13px;line-height:1.55;border-radius:12px;padding:11px 12px;margin-bottom:14px}
.move-warn .warn-txt{flex:1}
.move-warn button{flex:0 0 auto;background:#fff;color:var(--danger);padding:7px 12px;font-size:13px;font-weight:600}
/* 「移入已浪费」按钮：B 区编辑页已移除该按钮，改由条目展开后的详情区触发（.ex-move） */

/* ---------- 自绘确认框（替代浏览器原生 confirm） ---------- */
#confirm{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:26px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s}
#confirm.open{opacity:1;visibility:visible;pointer-events:auto}
#confirm .cf-mask{position:absolute;inset:0;background:rgba(26,26,26,.42)}
#confirm .cf-card{position:relative;width:100%;max-width:320px;background:var(--card);border-radius:20px;padding:26px 22px 20px;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.20);transform:scale(.9);transition:transform .22s cubic-bezier(.2,.9,.3,1.1)}
#confirm.open .cf-card{transform:scale(1)}
.cf-ico{width:46px;height:46px;border-radius:50%;background:var(--mint);color:var(--primary-d);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:22px;font-weight:800}
#confirm h3{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--text)}
#confirm p{margin:0 0 20px;font-size:14px;line-height:1.65;color:var(--body);white-space:pre-line}
#confirm p:empty{margin:0 0 20px;display:none}
#confirm p:empty + .cf-actions{margin-top:6px}
.cf-actions{display:flex;gap:10px}
.cf-actions button{flex:1;padding:11px 12px;font-size:15px}
.cf-actions .cf-cancel{background:#F5F6F8;color:var(--body)}

/* 侧滑关闭用的位移层 */
.modal .form-card,.modal .lb-wrap{transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
.modal.swiping .form-card,.modal.swiping .lb-wrap{transition:none}
.modal.slide-out .form-card,.modal.slide-out .lb-wrap{transform:translateX(100%);opacity:.6}

/* ---------- 灯箱 ---------- */
/* 注意：#lightbox 同时挂了 .screen 类，而 .screen{min-height:100vh}。
   min-height 与 height 是不同属性，会把我设的 100dvh 撑高成含地址栏的全高，
   导致图片在更大容器里居中、可见区只看到下半 → 手机上偏下。必须 min-height:0 覆盖。 */
#lightbox{position:fixed;left:0;width:100%;top:0;height:100dvh;min-height:0;z-index:100;background:#000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility .2s}
.lb-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0}
#lightbox.open{opacity:1;visibility:visible;pointer-events:auto}
#lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform:scale(.92);transition:transform .2s ease;cursor:zoom-out}
#lightbox.open img{transform:scale(1)}

/* ---------- 设置（C区） ----------
   全部走主题变量，默认皮肤与黑金皮肤自动适配。
   每组一张卡片；.set-row 是可点击的展开行（icon + 名称 + 向下箭头），
   展开区 .set-subrows 里放具体按钮/分段控件。 */
#settings-page{padding:14px 14px 160px}
.set-group{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden}
.set-row{display:flex;align-items:center;gap:12px;padding:13px 14px;cursor:pointer}
.set-row:active{background:rgba(0,0,0,.04)}
.set-ico{width:38px;height:38px;border-radius:11px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.set-ico svg{width:21px;height:21px;display:block}
.set-ico.i-user{background:var(--primary);color:#fff}
.set-ico.i-skin{background:var(--mint);color:var(--primary-d)}
.set-ico.i-backup{background:#EAF0FF;color:#3B5BDB}
.set-ico.i-page{background:#FFF3E4;color:var(--accent-d)}
.set-main{flex:1;min-width:0}
.set-name{font-size:16px;font-weight:600;color:var(--text)}
.set-sub{font-size:12px;color:var(--muted);margin-top:2px}
.set-value{font-size:13px;color:var(--muted)}
.set-arrow{width:18px;height:18px;flex:0 0 auto;color:var(--muted);transition:transform .22s ease}
.set-row.open .set-arrow{transform:rotate(180deg)}
/* 展开区：上边距与行自身的 padding-bottom(13px) 对齐，下边距 13px，上下对称 */
.set-subrows{display:flex;flex-direction:column;gap:9px;padding:0 14px 13px}
.set-subrows button{width:100%;padding:11px 12px;font-size:15px}
/* 同行并排的两个按钮（修改密码 / 退出登录） */
.set-subrows .btn-pair{display:flex;gap:9px}
.set-subrows .btn-pair button{flex:1;min-width:0;padding:11px 6px}
/* 退出登录：红色语义，与「修改密码」的金/绿主色区分 */
button.set-logout{background:var(--danger-bg);color:var(--danger)}
.set-msg{font-size:13px;line-height:1.6;color:var(--muted);word-break:break-all}
.set-msg.ok{color:var(--primary-d)}
.set-msg.err{color:var(--danger)}

/* ---------- 皮肤：黑金（麦金卡风格） ----------
   默认皮肤的旧规则一律不动；黑金全部走 body.skin-gold 覆盖：
   ① 主题变量整体换色（新页面只要用变量就自动适配）；
   ② 少数写死颜色的旧规则在此逐一覆盖（按钮字色、登录金卡、徽章、下拉底色等）。
   切换由 app.js 往 <body> 上加/去 .skin-gold 类完成，选择持久化在 localStorage。 */
body.skin-gold{
  --bg:#121110; --card:#1C1916; --card2:#211D18; --panel:#26221A;
  --text:#F3ECDD; --body:#C9C2B5; --muted:#8A8377;
  --primary:#D9B45B; --primary-d:#B8902F; --mint:#332B16;
  --accent:#F0D98A; --accent-d:#C9A227;
  --danger:#FA6E5A; --danger-bg:#3A1A1A;
  --line:#2E2A22;
  --shadow:0 2px 12px rgba(0,0,0,.45); --shadow-up:0 6px 22px rgba(0,0,0,.6);
  background:var(--bg); color:var(--text);
}
/* 按钮系统：金底墨字（会员卡质感） */
body.skin-gold button{color:#1A1408}
body.skin-gold button.secondary{background:var(--panel);color:var(--primary)}
body.skin-gold button.link{color:var(--muted)}
body.skin-gold button.set-logout{background:var(--danger-bg);color:var(--danger)}
body.skin-gold input,body.skin-gold select,body.skin-gold textarea{background:var(--card2);color:var(--text)}
body.skin-gold input::placeholder,body.skin-gold textarea::placeholder{color:var(--muted)}
body.skin-gold .ver{color:#6E675B}
body.skin-gold .fatal{border:1px solid var(--line)}
body.skin-gold .fatal code{background:var(--panel)}
/* 登录卡：金色金属卡面 */
body.skin-gold .login-card{background:linear-gradient(150deg,#E9CB7E 0%,#D2A23A 48%,#B98A28 100%);color:#1A1408;border-radius:24px;box-shadow:0 12px 44px rgba(217,180,91,.30);border:1px solid rgba(255,255,255,.28)}
body.skin-gold .login-card h1{color:#1A1408}
body.skin-gold .login-card .sub{color:#5A4516}
body.skin-gold .login-card input{background:rgba(26,20,8,.10);border-color:rgba(26,20,8,.22);color:#1A1408}
body.skin-gold .login-card input::placeholder{color:rgba(26,20,8,.45)}
body.skin-gold .login-card button{background:#1A1408;color:#F1D58A}
body.skin-gold .login-card .err{color:#7A1A10}
body.skin-gold .login-card .ver{color:rgba(26,20,8,.5)}
/* 顶栏 / 列表 */
/* 注意：黑金不给顶栏加 border-bottom —— 顶栏+搜索框是一整块白（黑金下是深色）区域，
   分隔线只允许出现在搜索框底部一次；多一条线会打破默认配色调好的上下边距平衡。 */
body.skin-gold .title{color:var(--primary)}
body.skin-gold .searchbar{border-bottom:1px solid var(--line)}
body.skin-gold .searchbar input{background:var(--mint);border-color:#3A3324;color:var(--text)}
body.skin-gold .searchbar input::placeholder{color:var(--muted)}
body.skin-gold .item{border:1px solid var(--line)}
body.skin-gold .thumb{background:#26221A}
body.skin-gold .name{color:var(--text)}
body.skin-gold .badge{background:var(--mint);color:var(--accent)}
body.skin-gold .badge.who-c0{background:#2A2417;color:#E8C977}
body.skin-gold .badge.who-c1{background:#3A2A14;color:#F0B860}
body.skin-gold .badge.who-c2{background:#1E2A3A;color:#8FB4E8}
body.skin-gold .badge.who-c3{background:#3A1E2A;color:#E89AB8}
body.skin-gold .badge.who-both{background:#2A2822;color:#BDB6A8}
body.skin-gold .card.selected{background:#2E2716}
body.skin-gold .icon-btn{box-shadow:0 2px 8px rgba(0,0,0,.4)}
body.skin-gold input[readonly]{background:#1A1712;color:var(--muted)}
body.skin-gold .fab{box-shadow:0 6px 18px rgba(217,180,91,.42)}
/* 弹层 / 下拉 / 分段控件 */
body.skin-gold .modal{background:rgba(10,9,8,.55)}
body.skin-gold .form-card{box-shadow:0 -4px 24px rgba(0,0,0,.5);border-top:1px solid var(--line)}
body.skin-gold .form-card h2{color:var(--text)}
body.skin-gold .dd-btn{background:var(--card2);color:var(--text)}
body.skin-gold .dd-pop{background:var(--card2);box-shadow:0 8px 24px rgba(0,0,0,.55)}
body.skin-gold .dd-op{color:var(--text)}
body.skin-gold .dd-op:hover,body.skin-gold .dd-op:active{background:var(--panel)}
body.skin-gold .dd-op.on{color:var(--primary);background:var(--mint)}
body.skin-gold .seg-op{background:var(--card2);color:var(--text)}
body.skin-gold .seg-op.on{color:#1A1408;background:var(--primary);border-color:var(--primary)}
body.skin-gold .expand .ex-note{background:var(--card2)}
body.skin-gold .expand .expand-actions .ex-move{background:var(--danger);color:#fff}
body.skin-gold .expand .expand-actions .ex-restore{background:var(--panel);color:var(--primary)}
body.skin-gold .move-warn button{background:var(--panel)}
/* 确认框 / 底部导航 */
body.skin-gold #confirm .cf-mask{background:rgba(10,9,8,.55)}
body.skin-gold #confirm .cf-card{border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.6)}
body.skin-gold .cf-ico{color:var(--primary)}
body.skin-gold .cf-actions .cf-cancel{background:var(--panel);color:var(--body)}
body.skin-gold #bottomnav{border-top:1px solid var(--line)}
/* 设置页在黑金下的细节 */
body.skin-gold .set-group{border:1px solid var(--line)}
body.skin-gold .set-row:active{background:rgba(255,255,255,.05)}
body.skin-gold .set-ico.i-user{color:#1A1408}
body.skin-gold .set-ico.i-skin{color:var(--primary)}
body.skin-gold .set-ico.i-backup{background:#1E2A3A;color:#8FB4E8}
body.skin-gold .set-ico.i-page{background:#3A2A14;color:#F0B860}
body.skin-gold .set-msg.ok{color:var(--primary)}