/* CC开团助手 - 淡暖黄主题 */
:root{
  --bg:#fffdf7;          /* 极淡暖白背景 */
  --bg2:#fdf8ec;         /* 略深一点点 */
  --card:#ffffff;        /* 卡片纯白 */
  --line:#f0e8d6;        /* 极淡暖描边 */
  --ink:#6b5c40;         /* 柔和棕文字 */
  --sub:#b3a482;         /* 浅棕副文字 */
  --accent:#eec97a;      /* 淡暖黄(按钮) */
  --accent-d:#e0b45c;    /* 深一点 hover */
  --accent-soft:#fdf3dc; /* 极淡黄高亮 */
  --head:#f3ecd8;        /* 表格抬头淡暖 */
  --on-accent:#6b5c40;   /* 强调色底上的文字 */
  --drop-line:#dcc48a;   /* 拖入框虚线 */
  --head-line:#d8c088;   /* 表头边线 */
  --switch-off:#e6dcc4;  /* 开关关闭底色 */
  --cell:#5a4a2f;        /* 表格正文字 */
  --disabled:#e6d8b8;    /* 禁用按钮 */
  --tint:190,160,90;     /* 阴影色(RGB) */
  --glow:224,166,60;     /* 强调光晕色(RGB) */
  --ok:#5aa76a; --bad:#dd7a5c;
  --radius:16px; --shadow:0 3px 18px rgba(var(--tint),.07);
}

/* ---- 换肤:html[data-theme=…] 覆盖上面的颜色变量;米黄即默认 :root ---- */
html[data-theme="white"]{
  --bg:#ffffff; --bg2:#f6f6f7; --card:#ffffff; --line:#e7e7ea;
  --ink:#3a3a40; --sub:#8e8e96;
  --accent:#e4e4e8; --accent-d:#9d9da6; --accent-soft:#f1f1f3; --head:#efeff2;
  --on-accent:#3a3a40; --drop-line:#cfcfd6; --head-line:#d4d4da; --switch-off:#dedee3;
  --cell:#3a3a40; --disabled:#e4e4e8; --tint:120,120,140; --glow:120,120,140;
}
/* 白色皮肤:顶栏选中标签单独加深,不然跟白底分不太开 */
html[data-theme="white"] .tab.active{background:#cfcfd6;}
html[data-theme="purple"]{
  --bg:#fcfaff; --bg2:#f6f1fd; --card:#ffffff; --line:#ebe2f7;
  --ink:#4f4266; --sub:#a497b8;
  --accent:#cdb6f0; --accent-d:#b093e3; --accent-soft:#f1e9fc; --head:#eee5fa;
  --on-accent:#4f4266; --drop-line:#c8b3ea; --head-line:#cdb9ec; --switch-off:#e2d8f0;
  --cell:#4a3d60; --disabled:#e5dcf2; --tint:150,120,200; --glow:160,120,220;
}
html[data-theme="blue"]{
  --bg:#f8fbff; --bg2:#eff5fd; --card:#ffffff; --line:#dde8f5;
  --ink:#3b4f66; --sub:#8fa2b8;
  --accent:#a9cbf2; --accent-d:#84b1e6; --accent-soft:#e7f1fc; --head:#e3edf9;
  --on-accent:#3b4f66; --drop-line:#a9c6e8; --head-line:#b3cde9; --switch-off:#d8e3ef;
  --cell:#34485e; --disabled:#d9e6f3; --tint:100,140,190; --glow:90,150,220;
}
html[data-theme="green"]{
  --bg:#f9fcf8; --bg2:#f0f7ee; --card:#ffffff; --line:#dfecdb;
  --ink:#435a41; --sub:#98ae93;
  --accent:#b4dba8; --accent-d:#92c783; --accent-soft:#e9f5e5; --head:#e4f0e0;
  --on-accent:#435a41; --drop-line:#b3d4a8; --head-line:#bcd8b2; --switch-off:#dbe7d6;
  --cell:#3c5239; --disabled:#dcebd6; --tint:110,160,100; --glow:110,170,90;
}

/* 标题行 + 换肤色点(整理页右上) */
.title-row{display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--line); padding-bottom:16px;}
.title-row .page-title{border:none; padding:0;}
.skin{margin-left:auto; display:flex; align-items:center; gap:10px;}
.skin-label{font-size:12px; color:var(--sub); margin-right:2px;}
.skin-dot{
  width:22px; height:22px; border-radius:50%; cursor:pointer; padding:0;
  border:1px solid rgba(0,0,0,.12); transition:transform .15s, box-shadow .15s;
}
.skin-dot:hover{transform:scale(1.12);}
.skin-dot.active{box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--accent-d);}
.skin-dot:focus-visible{outline:2px solid var(--accent-d); outline-offset:3px;}
*{box-sizing:border-box;}
body{
  margin:0; font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  background:var(--bg); color:var(--ink);
}

/* 顶栏 */
.topbar{
  display:flex; align-items:center; gap:20px;
  background:linear-gradient(180deg,var(--bg2),var(--bg));
  border-bottom:1px solid var(--line);
  padding:0 24px; height:60px; position:sticky; top:0; z-index:10;
  box-shadow:0 2px 10px rgba(var(--tint),.06);
}
.brand{display:flex; align-items:center; gap:10px; font-size:19px; font-weight:800; white-space:nowrap;}
.brand .logo{height:31px; width:auto; display:block; image-rendering:pixelated;}
/* 版本号:品牌名右下角的小字,发新版时改 index.html 里的 v 数字 */
.brand .ver{align-self:flex-end; margin:0 4px 3px -4px; font-size:11px; font-weight:600; color:var(--sub); letter-spacing:.3px;}
.tabs{display:flex; gap:6px; flex:1;}
.tab{
  border:none; background:transparent; color:var(--sub);
  padding:9px 18px; border-radius:10px; font-size:15px; font-weight:600;
  cursor:pointer; transition:.15s; font-family:inherit;
}
.tab:hover{background:var(--accent-soft); color:var(--ink);}
.tab.active{background:var(--accent); color:var(--on-accent); box-shadow:0 2px 8px rgba(var(--glow),.22);}
.tools{display:flex; gap:8px;}
.tool-btn{
  border:1px solid var(--line); background:var(--card); color:var(--sub);
  padding:7px 12px; border-radius:9px; font-size:12.5px; cursor:pointer;
  transition:.15s; font-family:inherit; white-space:nowrap;
}
.tool-btn:hover{border-color:var(--accent); color:var(--accent-d); background:var(--accent-soft);}
/* 清空临时缓存:主题色字和框 + 淡主题色底,和旁边的红色按钮一样醒目 */
#clearCache{border-color:var(--accent); color:var(--ink); background:var(--accent-soft); font-weight:600;}
#clearCache:hover{background:var(--accent); color:var(--on-accent);}
/* 清空所有数据:同「清空账本」悬停时的红色(红字红框 + 淡红底) */
.tool-btn.danger{background:rgba(221,122,92,.08); border-color:var(--bad); color:var(--bad); font-weight:600;}
.tool-btn.danger:hover{background:rgba(221,122,92,.16); border-color:var(--bad); color:var(--bad);}

/* 内容区 */
.wrap{max-width:1120px; margin:0 auto; padding:28px 24px 60px;}
.page{display:none;} .page.active{display:block;}
.page-title{font-size:24px; font-weight:800; margin:0; padding:0 0 16px; border-bottom:1px solid var(--line);}
.page-title .req{color:#d9412e;}
.page-desc{color:var(--sub); font-size:13px; margin:0; padding:0 0 16px; border-bottom:1px solid var(--line);}
.page-desc + *{margin-top:32px;}

/* 整理类型:两个分类按钮 */
.mode-header{display:flex; align-items:center; justify-content:space-between; margin:22px 0 12px;}
.mode-label{font-size:20px; font-weight:700; color:var(--ink); margin:0; display:inline-flex; align-items:center; gap:8px;}
.mode-label .step-no{font-size:20px; font-weight:800; color:var(--ink);}
.mode-switch{display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap;}
.mode-opt{
  border:1.5px solid var(--line); background:var(--card); cursor:pointer;
  padding:11px 20px; font-size:14px; font-weight:600; color:var(--sub);
  font-family:inherit; transition:.15s; white-space:nowrap; border-radius:12px;
  display:inline-flex; align-items:center; gap:8px;
}
.mode-opt .dot{width:8px; height:8px; border-radius:50%; background:transparent; flex:none; transition:.15s;}
.mode-opt.active .dot{background:#3fbf5f; box-shadow:0 0 0 3px rgba(63,191,95,.2);}
.mode-opt:hover{border-color:var(--accent-d); color:var(--ink);}
.mode-opt.active{
  border-color:var(--accent-d); background:var(--accent-soft); color:var(--ink);
  box-shadow:0 2px 8px rgba(var(--glow),.18);
}
/* 小工具:4 个工具一排切换(样式同上面的打表方式按钮) */
.tool-switch{display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 20px;}
.tool-opt{
  border:1.5px solid var(--line); background:var(--card); cursor:pointer;
  padding:11px 20px; font-size:14px; font-weight:600; color:var(--sub);
  font-family:inherit; transition:.15s; white-space:nowrap; border-radius:12px;
  display:inline-flex; align-items:center; gap:8px;
}
.tool-opt .dot{width:8px; height:8px; border-radius:50%; background:transparent; flex:none; transition:.15s;}
.tool-opt:hover{border-color:var(--accent-d); color:var(--ink);}
.tool-opt.active{border-color:var(--accent-d); background:var(--accent-soft); color:var(--ink); box-shadow:0 2px 8px rgba(var(--glow),.18);}
.tool-opt.active .dot{background:#3fbf5f; box-shadow:0 0 0 3px rgba(63,191,95,.2);}
.tool-panel{margin-top:0;}
.tool-desc{margin:0; padding:0 0 16px; font-size:13.5px; line-height:1.7; color:var(--sub); border-bottom:1px solid var(--line);}
.tool-body{min-height:260px;}

/* ---- 小工具内部 ---- */
.tstep{font-size:14px; font-weight:800; color:var(--ink); margin:20px 0 10px;}
.tstep-hint{font-size:12px; font-weight:400; color:var(--sub); margin-left:8px;}
.tgrid2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.tdrop{padding:26px 16px;}
.tmap{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; padding:12px 14px;
  background:var(--bg2); border:1px solid var(--line); border-radius:12px; font-size:13px; color:var(--ink);}
.tmap label{display:flex; align-items:center; gap:6px; font-weight:600;}
.tmap select{min-width:150px; padding:6px 10px;}
.tsum{display:flex; gap:12px; flex-wrap:wrap; margin:20px 0 12px;}
.tstat{flex:1 1 130px; background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:12px 16px;
  font-size:13px; color:var(--sub);}
.tstat span{display:block; margin-bottom:4px;}
.tstat b{font-size:24px; color:var(--ink); margin-right:3px; font-variant-numeric:tabular-nums;}
.tstat.ok b{color:var(--ok);} .tstat.warn b{color:#b07600;} .tstat.bad b{color:var(--bad);}
.tnote{font-size:13px; color:var(--sub); margin:8px 0; line-height:1.7;}
.tnote b{color:var(--ink);}
.tnote.warn, .tnote .warn{color:#b07600;}
.terr{font-size:13px; color:var(--bad); margin:16px 0;}
.tok{font-size:14px; color:var(--ok); font-weight:700; margin:18px 0;}
.tbtns{display:flex; justify-content:flex-end; gap:12px; margin:14px 0;}
.tbtns.left{justify-content:flex-start; margin-top:10px;}
.tbtns .btn:not(.sm){min-width:160px;}
.tbox{max-height:340px; margin-top:10px;}
.tbox .ledger th{position:sticky; top:0; z-index:1;}
.taddr{white-space:normal; display:inline-block; min-width:280px; max-width:460px;}
.tlist{margin-top:12px;}
.tlist summary{cursor:pointer; font-size:13.5px; font-weight:700; color:var(--ink); padding:6px 0;}
/* 地址检查:问题等级(红=要处理 黄=建议确认 灰=提醒),颜色旁边都有文字 */
.tchips{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0;}
.tchip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:10px; padding:6px 12px; font-size:13px; cursor:pointer; font-family:inherit; transition:.15s;}
.tchip:hover{border-color:var(--accent-d);}
.tchip.active{border-color:var(--accent-d); background:var(--accent-soft);}
.tchip i, .tlegend i{width:8px; height:8px; border-radius:50%; display:inline-block;}
.tchip b{font-variant-numeric:tabular-nums;}
.lv-bad i, i.lv-bad{background:var(--bad);} .lv-warn i, i.lv-warn{background:#eda100;} .lv-info i, i.lv-info{background:#a8a29a;}
.tlegend{margin-left:14px; display:inline-flex; align-items:center; gap:6px; font-size:12px;}
.tlegend i{margin-left:6px;}
.itag{display:inline-block; padding:2px 8px; border-radius:6px; font-size:12px; margin:2px 4px 2px 0; white-space:nowrap;}
.itag.lv-bad{color:var(--bad); background:rgba(221,122,92,.13);}
.itag.lv-warn{color:#9a6700; background:rgba(237,161,0,.15);}
.itag.lv-info{color:var(--sub); background:var(--bg2); border:1px solid var(--line);}
/* 包材/胶带:表单与可编辑表格 */
.tform{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin:12px 0; font-size:13px; color:var(--ink);}
.tform label{display:flex; align-items:center; gap:6px; font-weight:600;}
.tform input[type=number]{width:90px; min-width:0; padding:6px 10px;}
.tform select{min-width:140px; padding:6px 10px;}
.tform .tnote{flex-basis:100%; margin:0;}
.tedit input{width:100%; min-width:70px; padding:6px 8px; font-size:13px;}
.tedit td{padding:6px 8px;}
.tbox input.tp-n{width:90px; min-width:0; padding:6px 8px;}
.tbox input.tp-box{width:72px; min-width:0; padding:6px 8px;}
.tbox input.tp-box[data-k=name]{width:110px;}
.tdist{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:12px 0;}
.tdist-i{font-size:12.5px; background:var(--bg2); border:1px solid var(--line); border-radius:8px; padding:3px 10px; color:var(--ink);}
.thero{display:flex; align-items:baseline; gap:10px; margin:18px 0 4px; color:var(--sub); font-size:14px;}
.thero b{font-size:40px; color:var(--ink); font-variant-numeric:tabular-nums;}
@media (max-width:900px){ .tgrid2{grid-template-columns:1fr;} }
.mode-tag{
  font-size:11px; margin-left:8px; padding:2px 8px; border-radius:9px;
  background:var(--accent); color:var(--on-accent); font-weight:600; vertical-align:1px;
}

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:24px; margin-bottom:20px;
}

/* 单表模式:拖入区上方的选项条(自动合并开关) */
.opt-bar{display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:16px;}
.switch-row{display:flex; align-items:flex-start; gap:11px; cursor:pointer; user-select:none;}
.switch-row input{position:absolute; opacity:0; width:0; height:0;}
.switch{
  flex:0 0 auto; position:relative; width:40px; height:23px; margin-top:1px;
  background:var(--switch-off); border-radius:23px; transition:.18s;
}
.switch::after{
  content:""; position:absolute; top:2.5px; left:2.5px; width:18px; height:18px;
  background:#fff; border-radius:50%; transition:.18s; box-shadow:0 1px 3px rgba(var(--tint),.35);
}
.switch-row input:checked + .switch{background:var(--ok);}
.switch-row input:checked + .switch::after{transform:translateX(17px);}
.switch-row input:focus-visible + .switch{outline:2px solid var(--accent); outline-offset:2px;}
.switch-text{font-size:14px; font-weight:700; color:var(--ink); line-height:1.35;}
.switch-sub{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:400; color:var(--sub); margin-top:4px;}
.switch-sub + .switch-sub{margin-top:3px;}
/* 说明行抬头的"开/关"小标签 */
.switch-sub .tag{
  flex:none; font-style:normal; font-size:11px; font-weight:700; line-height:1;
  padding:3px 6px; border-radius:6px;
}
.switch-sub .tag.on{background:rgba(90,167,106,.15); color:var(--ok);}
.switch-sub .tag.off{background:var(--bg2); color:var(--sub); border:1px solid var(--line); padding:2px 5px;}

/* 拖拽区 */
#drop{
  border:2.5px dashed var(--drop-line); border-radius:var(--radius);
  padding:52px 24px; text-align:center; cursor:pointer;
  transition:.18s; background:var(--bg2);
}
#drop:hover{border-color:var(--accent); background:var(--accent-soft);}
#drop.over{border-color:var(--accent); background:var(--accent-soft); transform:scale(1.006);}
/* 确认地址模式:双表拖入 */
.dual-drop{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.drop.dual{
  border:2.5px dashed var(--drop-line); border-radius:var(--radius);
  padding:40px 20px; text-align:center; cursor:pointer;
  transition:.18s; background:var(--bg2); position:relative;
}
.drop.dual:hover{border-color:var(--accent); background:var(--accent-soft);}
.drop.dual.over{border-color:var(--accent); background:var(--accent-soft); transform:scale(1.006);}
.drop.dual.filled{border-style:solid; border-color:#3fbf5f; background:rgba(63,191,95,.08);}
.drop.dual.filled::after{content:"✓ 已放入"; position:absolute; top:10px; right:14px; font-size:12px; font-weight:700; color:#2f9e4d;}
/* 拖入了不支持的表格:红框 + 红字 */
#drop.bad, .drop.dual.bad{border-style:solid; border-color:var(--bad); background:rgba(221,122,92,.08);}
#drop.bad .drop-main, .drop.dual.bad .drop-main{color:var(--bad);}
.dual-foot{display:flex; align-items:center; justify-content:space-between; margin-top:16px; gap:16px;}
.dual-foot .hint{font-size:13px; color:var(--sub);}
.dual-foot .hint.warn{color:#d9412e; font-weight:700;} /* 两表不相关等警告,标红 */
.dual-foot .btn:disabled{opacity:.5; cursor:not-allowed;}
.drop-icon{margin-bottom:10px; color:var(--accent-d); line-height:0;}
.drop-icon svg{width:46px; height:46px;} /* 矢量表格图标(跟随皮肤颜色) */
.drop-main{font-size:17px; font-weight:700;}
.drop-sub{font-size:12.5px; color:var(--sub); margin-top:8px;}

/* 引导步骤条 */
.steps{display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap;}
.step{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--sub);
  background:var(--card); border:1px solid var(--line); border-radius:20px; padding:6px 14px;
}
.step .n{
  width:20px; height:20px; border-radius:50%; background:var(--accent-soft);
  color:var(--accent-d); display:grid; place-items:center; font-weight:700; font-size:12px;
}
.step.done{color:var(--ink); border-color:var(--accent);}
.step.done .n{background:var(--accent); color:var(--on-accent);}

/* 状态条 + 按钮 */
.bar{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.btn-export{margin-left:auto; min-width:200px; font-size:15px; padding:12px 28px;}
.preview-hint-row{margin-top:10px;}
.statline{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.stat{font-size:16px; color:var(--sub);}
.stat b{font-size:24px; color:var(--ink); margin-left:6px;}
.statline .sep{color:var(--line); font-size:20px;}

/* 导入历史:按钮 + 下拉列表 */
.import-wrap{position:relative; display:inline-block; margin-left:auto;}
.clear-hist{font-size:12px; color:var(--sub); cursor:pointer; user-select:none;}
.clear-hist:hover{text-decoration:underline;}
.import-wrap .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:160px;}
.import-wrap .btn i{width:16px; height:16px;}
.import-panel{
  position:absolute; top:calc(100% + 6px); right:0; z-index:20;
  min-width:320px; max-height:340px; overflow:auto;
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 8px 24px rgba(var(--tint),.16); padding:6px;
}
.import-item{
  display:flex; align-items:center; gap:12px; padding:9px 12px;
  border-radius:9px; cursor:default; transition:.12s;
}
.import-item:hover{background:var(--accent-soft);}
.import-item .t{flex:1; font-size:14px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.import-item .d{font-size:12.5px; color:var(--sub); white-space:nowrap;}
.import-item .eye{
  border:none; background:transparent; color:var(--sub); cursor:pointer;
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center; transition:.12s;
}
.import-item .eye:hover{background:var(--accent); color:var(--on-accent);}
.import-item .eye i{width:18px; height:18px;}
.import-empty{padding:18px 12px; text-align:center; color:var(--sub); font-size:13px;}

/* 预览表上方的标签(标名) - 浏览器标签页风格,可并排多个,可拖动换位 */
.tabrow{display:flex; gap:6px; margin-top:28px; padding-left:20px; align-items:flex-end; position:relative; z-index:1;}
.data-tab{
  display:inline-flex; align-items:center; justify-content:space-between; gap:10px; cursor:grab;
  background:var(--bg2); border:1px solid var(--line); border-bottom:none;
  color:var(--sub); font-size:13.5px; font-weight:600;
  padding:9px 18px; border-radius:10px 10px 0 0; margin-bottom:-1px;
  min-width:180px; user-select:none; touch-action:none;
  transition:transform .18s ease, background .15s, color .15s;
}
.data-tab:hover{background:var(--accent-soft); color:var(--ink);}
.data-tab.active{
  background:var(--card); color:var(--ink);
  box-shadow:0 -2px 6px rgba(var(--tint),.06);
}
.data-tab.dragging{
  cursor:grabbing; transition:none; z-index:5;
  box-shadow:0 4px 14px rgba(var(--tint),.22); opacity:.96;
}
.data-tab .name{max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.data-tab .x{
  border:none; background:transparent; color:var(--sub); cursor:pointer;
  font-size:15px; line-height:1; padding:0; border-radius:7px;
  /* 点击热区放大到 28×28(×号本身大小不变);负外边距抵掉多出的尺寸,标签高度不变 */
  width:28px; height:28px; display:grid; place-items:center; flex:none;
  margin:-7px -10px -7px 0; position:relative;
}
/* 再往外扩一圈看不见的点击范围 */
.data-tab .x::before{content:""; position:absolute; inset:-4px;}
.data-tab .x:hover{background:rgba(0,0,0,.06); color:var(--bad);}
.btn{
  border:none; background:var(--accent); color:var(--on-accent);
  padding:11px 22px; border-radius:11px; font-size:14.5px; font-weight:600;
  cursor:pointer; transition:.15s; font-family:inherit;
}
.btn:hover{background:var(--accent-d);}
.btn:disabled{background:var(--disabled); cursor:not-allowed;}
.btn.ghost{background:var(--card); color:var(--accent-d); border:1px solid var(--accent);}
.btn.ghost:hover{background:var(--accent-soft);}
.hint{color:var(--sub); font-size:12px;}

/* 预览表 */
.tablebox{overflow:auto; border-radius:12px; border:1px solid var(--line); max-height:58vh; margin-top:16px;}
table{border-collapse:collapse; width:100%; font-size:13px; white-space:nowrap;}
th{
  background:var(--head); font-weight:700; font-size:14px; padding:10px 12px;
  position:sticky; top:0; text-align:center; border:1px solid var(--head-line); color:var(--ink);
}
td{padding:8px 12px; border:1px solid var(--line); color:var(--cell);}
tr:nth-child(even) td{background:var(--bg2);}
.addr{white-space:normal; min-width:360px;}

/* 表单 */
.field{display:flex; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
.field label{font-size:13.5px; min-width:96px; color:var(--ink); font-weight:600;}
input[type=text],input[type=number],select{
  border:1px solid var(--line); border-radius:9px; padding:8px 12px; font-size:14px;
  font-family:inherit; color:var(--ink); background:var(--card); min-width:160px;
}
input:focus,select:focus{outline:none; border-color:var(--accent);}
/* 下拉框:自画小箭头,离右边框留出距离(系统自带的箭头贴得太靠边) */
select{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  padding-right:38px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23857a6a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:12px 8px;
}
.tmap .terr{margin:0; flex-basis:100%;}

/* 记账明细 */
.cost-row{display:flex; gap:10px; align-items:center; margin-bottom:10px;}
.cost-row input.name{flex:1;} .cost-row input.amt{width:140px;}
/* × 按钮:上下拉满跟输入框一样高,× 在正中 */
.cost-row .del{border:none; background:var(--accent-soft); color:var(--accent-d);
  width:36px; align-self:stretch; padding:0; display:grid; place-items:center; line-height:1;
  border-radius:9px; cursor:pointer; font-size:16px;}
.pl-box{display:flex; gap:24px; flex-wrap:wrap; margin-top:8px;}
.pl-item{font-size:14px; color:var(--sub);} .pl-item b{font-size:24px; display:block; margin-top:2px;}
.pl-item b.ok{color:var(--ok);} .pl-item b.bad{color:var(--bad);}

/* ---- 记账页 ---- */
.title-row + .card, .title-row + .m-sec-title + .card{margin-top:32px;} /* 标题行下第一张卡片(记账/小工具/历史)留出间距 */
/* 拖入框上方:支持的表格类型说明(常驻,读完表也不消失) */
.acct-note{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; font-size:13px; font-weight:600; color:var(--ink);}
.fmt-tag{font-size:12px; font-weight:600; color:var(--accent-d); background:var(--accent-soft);
  border:1px solid var(--accent); border-radius:8px; padding:3px 10px;}
/* 表格来源拖入区(仿整理页拖入框) */
.acct-drop{
  border:2.5px dashed var(--drop-line); border-radius:var(--radius);
  padding:34px 24px; text-align:center; cursor:pointer;
  transition:.18s; background:var(--bg2);
}
.acct-drop:hover, .acct-drop.over{border-color:var(--accent); background:var(--accent-soft);}
.acct-drop.filled{border-style:solid; border-color:#3fbf5f; background:rgba(63,191,95,.08);}
.acct-drop.bad{border-style:solid; border-color:var(--bad); background:rgba(221,122,92,.08);}
.acct-drop.bad .drop-main{color:var(--bad);}
.acct-src-row{display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap;}
.acct-src-row .hint{font-size:13px;}
.acct-src-row select{min-width:260px;}
/* 已拖入表格时,下拉置灰不可点 */
.acct-src-row.locked .hint{opacity:.55;}
.acct-src-row select:disabled{background-color:var(--bg2); color:var(--sub); opacity:.6; cursor:not-allowed;}
/* 右上角"清空当前表格" */
.acct-note .acct-clear{margin-left:auto;}
.acct-note .acct-clear.hidden{display:none;}
.acct-rev{margin-left:auto; font-size:14px; color:var(--sub);}
.acct-rev b{font-size:22px; color:var(--ink); margin:0 4px;}

/* 三栏:成本项 | 汇总 | 环形图 */
.acct-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.65fr) minmax(0,1.35fr); gap:28px; align-items:start;}
.acct-col ~ .acct-col{border-left:1px solid var(--line); padding-left:28px;}
.acct-col-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;
  font-size:14px; font-weight:700; color:var(--ink);}
.btn.sm{padding:6px 14px; font-size:13px;}
.acct-grid .cost-row input.amt{width:110px; min-width:0;}
.acct-grid .cost-row input.name{min-width:0;}
.acct-sum{display:flex; flex-direction:column; gap:16px;}
.acct-sum .pl-item b{font-size:26px;}

/* 成本行前的颜色格子(点击换色) */
.cost-row .sw-btn{
  flex:none; width:22px; height:22px; border-radius:6px; padding:0; cursor:pointer;
  border:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); transition:transform .12s;
}
.cost-row .sw-btn:hover{transform:scale(1.12);}
.cost-row .sw-btn:focus-visible{outline:2px solid var(--accent-d); outline-offset:2px;}
/* 换色小面板:10 个色点,两排 */
.color-pop{
  position:absolute; z-index:50; display:grid; grid-template-columns:repeat(5,24px); gap:8px;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px;
  box-shadow:0 8px 24px rgba(var(--tint),.2);
}
.color-pop.hidden{display:none;}
.cp-dot{width:24px; height:24px; border-radius:6px; border:none; padding:0; cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); transition:transform .12s;}
.cp-dot:hover{transform:scale(1.12);}
.cp-dot.active{box-shadow:0 0 0 2px var(--card), 0 0 0 4px var(--accent-d);}

/* 环形图 */
.acct-chart{display:flex; flex-direction:column; align-items:center; gap:14px;}
/* 画布左右留出放外侧标注的地方,圆环居中 */
.donut-wrap{position:relative; width:100%; max-width:400px; aspect-ratio:420/224;}
.donut-wrap .lbl-line{stroke:var(--sub); stroke-width:1; opacity:.7;}
.donut-wrap .lbl{font-size:15px;}
.donut-wrap .lbl-n{fill:var(--ink); font-weight:600;}
.donut-wrap .lbl-p{fill:var(--sub); font-variant-numeric:tabular-nums;}
.donut-wrap svg{width:100%; height:100%; display:block; overflow:visible;}
.donut-wrap .seg{cursor:pointer; transition:stroke-width .12s;}
.donut-wrap .seg:hover, .donut-wrap .seg.hot{stroke-width:30;}
.donut-tip{position:absolute; z-index:5; pointer-events:none; white-space:nowrap;
  background:var(--card); border:1px solid var(--line); border-radius:9px; padding:7px 10px;
  box-shadow:0 6px 18px rgba(var(--tint),.18); font-size:12.5px; color:var(--ink);}
.donut-tip b{font-variant-numeric:tabular-nums;}
.donut-legend{width:100%; display:flex; flex-direction:column; gap:6px;}
.donut-legend .basis{font-size:12px; color:var(--sub); margin-bottom:2px;}
.lg-row{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); padding:3px 6px; border-radius:7px;}
.lg-row.hot{background:var(--accent-soft);}
.lg-row .sw{width:10px; height:10px; border-radius:3px; flex:none;}
.lg-row .n{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lg-row .a{color:var(--sub); font-variant-numeric:tabular-nums;}
.lg-row .p{width:48px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums;}
/* 本次项目预览 / 账本 */
.sec-head{display:flex; align-items:center; gap:16px; margin-bottom:14px; flex-wrap:wrap;}
.sec-title{font-size:15px; font-weight:800; color:var(--ink);}
.proj-name{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink);}
.proj-name input{min-width:260px;}
.ledger-box{overflow:auto; border:1px solid var(--line); border-radius:12px;}
.ledger{white-space:nowrap;}
.ledger th{position:static;}
.ledger td{vertical-align:middle;}
.ledger td.num{text-align:right; font-variant-numeric:tabular-nums;}
.ledger td.net.ok{color:var(--ok); font-weight:700;} .ledger td.net.bad{color:var(--bad); font-weight:700;}
.ledger td.costs{white-space:normal; min-width:220px;}
.ledger td.empty-row{text-align:center; color:var(--sub); padding:22px;}
.cchip{display:inline-flex; align-items:center; gap:5px; margin:2px 10px 2px 0; font-size:12.5px;}
.cchip i{width:9px; height:9px; border-radius:3px; flex:none;}
.rec-foot{display:flex; align-items:center; justify-content:flex-end; gap:14px; margin-top:14px;}
.rec-foot .btn{min-width:160px;}
/* 预览卡和账本之间拉开距离 */
.ledger-head{display:flex; align-items:flex-end; gap:16px; margin:52px 0 14px; padding-bottom:12px; border-bottom:1px solid var(--line);}
.sec-big{font-size:22px; font-weight:800; margin:0; color:var(--ink);}
.ledger-count{font-size:13px; font-weight:600; color:var(--sub); margin-left:6px;}
.ledger-sort{margin-left:auto; display:flex; align-items:center; gap:8px; font-size:13px; color:var(--sub);}
.ledger-sort select{min-width:170px;}
/* 账本备份提醒:红色加粗加大 */
.backup-warn{margin:-4px 0 14px; font-size:17px; font-weight:800; color:#e03131;}
.backup-warn.sort-warn{margin:18px 0 0;} /* 整理表格页标题下的同款提醒 */
.ledger-head #exportLedger{min-width:160px;} /* 同「记入账本」按钮 */
.ledger-head #clearLedger:hover{border-color:var(--bad); color:var(--bad); background:rgba(221,122,92,.08);}
/* 行首拖动把手 */
.ledger .col-handle, .ledger .col-del{width:44px; padding:0;}
.ledger .handle{
  width:44px; height:40px; display:grid; place-items:center; cursor:grab; color:var(--sub);
  touch-action:none; user-select:none; font-size:16px; letter-spacing:-2px;
}
.ledger .handle:hover{color:var(--ink); background:var(--accent-soft);}
/* 拖动:被拖的行浮起来跟着鼠标走,其它行平滑让位 */
.ledger tbody tr{position:relative;}
.ledger tr.shifting{transition:transform .18s ease;}
.ledger tr.dragging{z-index:5; filter:drop-shadow(0 10px 18px rgba(var(--tint),.35));}
.ledger tr.dragging td{background:var(--card) !important; box-shadow:inset 0 1px 0 var(--accent), inset 0 -1px 0 var(--accent);}
.ledger tr.dragging .handle{cursor:grabbing; color:var(--ink);}
@media (prefers-reduced-motion:reduce){ .ledger tr.shifting{transition:none;} }
body.row-dragging{cursor:grabbing; user-select:none;}
.ledger td.col-del{text-align:center;}
.ledger .row-del{border:none; background:transparent; color:var(--sub); cursor:pointer;
  width:32px; height:32px; border-radius:8px; font-size:15px;
  display:grid; place-items:center; margin:0 auto; padding:0; line-height:1;} /* 在格子里水平+垂直居中 */
.ledger .row-del:hover{background:rgba(221,122,92,.12); color:var(--bad);}

@media (max-width:900px){
  .acct-grid{grid-template-columns:minmax(0,1fr);} /* minmax(0,…) 防止被输入框撑宽 */
  .acct-col ~ .acct-col{border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:20px;}
}

/* 历史页顶部:条数 + 清空历史 */
.hist-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.hist-head .ledger-count{margin-left:0;}
#clearHistory:hover{border-color:var(--bad); color:var(--bad); background:rgba(221,122,92,.08);}

/* 历史 */
.hist-item{display:flex; align-items:center; gap:14px; padding:12px 14px;
  border:1px solid var(--line); border-radius:12px; margin-bottom:10px; background:var(--card);}
.hist-item .info{flex:1;} .hist-item .info .t{font-weight:700; font-size:14px;}
.hist-item .info .s{font-size:12px; color:var(--sub); margin-top:2px;}

/* 弹窗(同名副本命名) */
.modal-mask{
  position:fixed; inset:0; z-index:100; background:rgba(20,16,10,.32);
  display:flex; align-items:center; justify-content:center;
}
.modal{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 12px 40px rgba(var(--tint),.24); padding:24px; width:400px; max-width:90vw;
}
.modal-title{font-size:17px; font-weight:800; color:var(--ink); margin-bottom:10px;}
.modal-text{font-size:13.5px; color:var(--sub); line-height:1.6; margin:0 0 16px;}
.modal-input{width:100%; margin-bottom:20px;}
.modal-btns{display:flex; gap:12px; justify-content:flex-end;}

.err{color:var(--bad); font-size:13px; white-space:pre-wrap;}
.empty{color:var(--sub); font-size:14px; text-align:center; padding:40px 0;}
.hidden{display:none;}
.soon{display:inline-block; background:var(--accent-soft); color:var(--accent-d);
  font-size:11px; padding:2px 8px; border-radius:10px; margin-left:8px; font-weight:600;}

/* =====================================================================
   手机版(屏幕宽 ≤ 720px):按手机 App 单独排版
   顶部一行(品牌 + ⋯菜单)、底部导航、卡片分块、按钮加大;电脑版不受影响
   ===================================================================== */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
/* 电脑上:手机专用的东西不显示 */
.m-only, .m-nav, .m-more{display:none;}
.mode-seg, .m-card{display:contents;}
/* 手机点按时系统会给整块加一层灰色高亮(点开关整行变黑),统一关掉,改用下面各自的按压效果 */
*{-webkit-tap-highlight-color:transparent;}

@media (max-width:720px){
  body{overflow-x:clip; padding-bottom:calc(74px + env(safe-area-inset-bottom));} /* 底部给导航栏让位 */
  .d-only{display:none;}
  span.m-only{display:inline;}

  /* ---- 顶部:只留一行,品牌在左,「⋯」在右 ---- */
  .topbar{height:auto; padding:10px 14px 10px 16px; padding-top:calc(10px + env(safe-area-inset-top)); gap:10px;}
  .topbar .tabs{display:none;}
  .brand{font-size:17px; gap:7px;}
  .brand .logo{height:26px;}
  .m-more{display:grid; place-items:center; margin-left:auto; width:40px; height:40px; padding:0; cursor:pointer;
    border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink);}
  .m-more svg{width:20px; height:20px;}
  .topbar.menu-open .m-more{background:var(--accent-soft); border-color:var(--accent);}
  /* ⋯ 菜单:换肤 + 两个清空按钮 */
  .tools{display:none; position:absolute; top:calc(100% + 6px); right:12px; width:min(290px, calc(100vw - 24px));
    flex-direction:column; align-items:stretch; gap:10px; z-index:30;
    background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px;
    box-shadow:0 14px 36px rgba(var(--tint),.25);}
  .topbar.menu-open .tools{display:flex;}
  .tools .skin.m-only{display:flex; margin:0; justify-content:space-between; padding:2px 2px 12px; border-bottom:1px solid var(--line);}
  .tools .skin-label{font-size:13px; font-weight:600; color:var(--ink);}
  .tools .skin-dot{width:28px; height:28px;}
  .tools .tool-btn{padding:12px; font-size:15px; border-radius:12px; text-align:center;}
  .title-row .skin{display:none;} /* 换肤挪进 ⋯ 菜单 */

  /* ---- 底部导航 ---- */
  .m-nav{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; position:fixed; left:0; right:0; bottom:0; z-index:25;
    background:var(--card); border-top:1px solid var(--line); box-shadow:0 -4px 18px rgba(var(--tint),.1);
    padding:6px 10px calc(6px + env(safe-area-inset-bottom));}
  .m-nav .tab{display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 0 6px;
    background:none; box-shadow:none; border-radius:12px; font-size:11.5px; font-weight:600; color:var(--sub);}
  .m-nav .tab svg{width:22px; height:22px;}
  .m-nav .tab.active{background:var(--accent-soft); color:var(--ink); box-shadow:none;}
  .m-nav .tab.active svg{color:var(--accent-d); stroke-width:2.4;}

  /* ---- 通用:间距、卡片、字号层级 ---- */
  .wrap{padding:18px 16px 24px;}
  .card{padding:16px; border-radius:16px; margin-bottom:14px;}
  .title-row{border-bottom:none; padding-bottom:0; flex-wrap:wrap; gap:10px;}
  .page-title{font-size:20px; line-height:1.35;}
  .title-row + .card{margin-top:16px;}
  .backup-warn{font-size:14px; line-height:1.55;}
  /* 输入框 16px:iPhone 上小于 16px 一点输入框就会自动放大页面 */
  input[type=text], input[type=number], select{font-size:16px; min-width:0; max-width:100%;}

  /* ---- 分组卡片:底色略深,每块是独立白卡片,卡片上方一行灰色小标题(同手机「设置」) ---- */
  body{background:color-mix(in srgb, var(--bg2) 60%, var(--line));}
  .card, .m-card{background:var(--card); border:1px solid var(--line); border-radius:16px;
    box-shadow:0 2px 12px rgba(var(--tint),.1);}
  .m-card{display:block; padding:14px; margin-bottom:6px;}
  .m-sec-title.m-only, .mode-header .mode-label{display:block; margin:24px 6px 8px; padding:0;
    font-size:13px; font-weight:700; color:var(--sub); letter-spacing:.5px;}
  .mode-header .mode-label{margin:0;}
  .res-title:has(+ #tabrow:empty){display:none;} /* 还没整理出结果时不显示「整理结果」 */
  /* 「整理设置」「放入表格」拆成两张卡片:外层 .sort-card 只当容器 */
  .sort-card{background:none; border:none; box-shadow:none; padding:0; margin:0;}
  .sort-card .m-sec-title:first-child{margin-top:24px;}
  .sort-card .opt-bar, #dropCardSingle, #dropCardDual:not(.hidden){background:var(--card); border:1px solid var(--line);
    border-radius:16px; box-shadow:0 2px 12px rgba(var(--tint),.1); padding:4px 16px; margin:0;}
  #dropCardSingle, #dropCardDual:not(.hidden){padding:14px;}
  /* 按压反馈(代替系统灰色高亮) */
  .btn:active, .tool-btn:active, .mode-opt:active, .m-nav .tab:active, .m-more:active{transform:scale(.97);}
  .switch-row:active .switch{filter:brightness(.95);}
  #drop:active, .drop.dual:active, .acct-drop:active{filter:brightness(.97);}

  /* ---- 整理表格页 ---- */
  /* 提醒:一条带感叹号的小提示条 */
  .backup-warn.sort-warn{display:flex; gap:8px; align-items:flex-start; margin:12px 0 0; padding:10px 12px;
    font-size:12.5px; font-weight:600; color:#c92a2a; background:rgba(224,49,49,.06);
    border:1px solid rgba(224,49,49,.16); border-radius:12px;}
  .sort-warn::before{content:"!"; flex:none; width:17px; height:17px; margin-top:1px; border-radius:50%;
    display:grid; place-items:center; background:#e03131; color:#fff; font-size:11px; font-weight:800;}
  /* 打表方式:左右切换块 + 下面一行流程说明 */
  .mode-header{margin:24px 6px 8px; align-items:baseline;}
  .clear-hist{font-size:12.5px;}
  .mode-switch{display:block; margin:0;}
  .mode-seg{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
    background:var(--bg2); border:1px solid var(--line); border-radius:14px;}
  .mode-opt, .mode-opt:hover{justify-content:center; border:none; background:transparent; box-shadow:none;
    padding:11px 6px; font-size:15px; border-radius:11px;}
  .mode-opt.active{background:var(--card); color:var(--ink); box-shadow:0 2px 8px rgba(var(--tint),.2);}
  /* 流程说明:放大、显眼,只写箭头流程 */
  .mode-desc.m-only{display:block; margin:12px 0 4px; padding:12px 14px; border-radius:12px;
    background:var(--accent-soft); font-size:16px; font-weight:700; line-height:1.6; color:var(--ink); text-align:center;}
  .mode-desc > span{display:none;}
  .mode-desc i{font-style:normal; white-space:nowrap;} /* 只在箭头处换行,不把一步拆成两半 */
  #modeSwitch[data-mode=direct] .mode-desc [data-for=direct],
  #modeSwitch[data-mode=confirm] .mode-desc [data-for=confirm]{display:inline;}
  /* 导入历史:弱化成右下角一个小文字按钮 */
  .import-wrap{display:flex; justify-content:flex-end; margin:8px 0 -4px;}
  .import-wrap .btn{min-width:0; padding:6px 4px; border:none; background:none; font-size:13px; font-weight:600; color:var(--sub);}
  .import-wrap .btn i, .import-wrap .btn svg{width:14px; height:14px;}
  .import-panel{left:0; right:0; min-width:0;}
  /* 两个开关:手机「设置」列表样式,文字在左、开关在右 */
  .opt-bar{gap:0; align-items:stretch;}
  .switch-row{flex-direction:row-reverse; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid var(--line);}
  .switch-row:last-child{border-bottom:none;}
  .switch-text{flex:1; font-size:15px;}
  .switch{width:48px; height:28px; margin-top:0;}
  .switch::after{top:3px; left:3px; width:22px; height:22px;}
  .switch-row input:checked + .switch::after{transform:translateX(20px);}
  .switch-sub{font-size:12px;}
  /* 放表:一个大按钮 */
  #drop, .drop.dual{padding:24px 14px; border-width:1.5px; border-radius:14px; background:var(--accent-soft); border-color:var(--accent);}
  .drop-icon{margin-bottom:8px;}
  .drop-icon svg{width:34px; height:34px;}
  .drop-main{font-size:16px;}
  .drop-sub{font-size:12px;}
  .dual-drop{grid-template-columns:1fr; gap:10px;}
  .dual-foot{flex-direction:column; align-items:stretch; gap:10px;}
  .dual-foot .btn{width:100%; padding:13px;}
  /* 结果:三个数字卡片 + 导出按钮贴在屏幕底部(导航栏上方) */
  /* 已打开的表:手机上不用文件夹标签样式,改成一排圆角小胶囊,和下面的卡片分开;
     多了可以左右滑,但不显示滑条、不能上下滑 */
  .tabrow{gap:8px; margin:0 0 10px; padding:2px 0; overflow-x:auto; overflow-y:hidden;
    scrollbar-width:none; align-items:center;}
  .tabrow::-webkit-scrollbar{display:none;}
  .data-tab{min-width:0; flex:none; margin:0; padding:8px 8px 8px 14px; gap:6px; border:1px solid var(--line);
    border-radius:999px; background:var(--card); font-size:14px; box-shadow:none; touch-action:pan-x;}
  .data-tab.active{background:var(--accent-soft); border-color:var(--accent-d); color:var(--ink); box-shadow:none;}
  .data-tab .name{max-width:180px;}
  .data-tab .x{margin:-6px -2px -6px 0;}
  #result:not(.hidden){display:flex; flex-direction:column; padding:14px;}
  #result .bar{display:contents;}
  .statline{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
  .statline .sep{display:none;}
  .stat{display:flex; flex-direction:column; padding:10px; font-size:12px;
    background:var(--bg2); border:1px solid var(--line); border-radius:12px;}
  .stat b{margin:4px 0 0; font-size:19px; overflow-wrap:anywhere;}
  .btn-export{order:10; position:sticky; bottom:calc(76px + env(safe-area-inset-bottom)); z-index:3;
    margin:14px 0 0; width:100%; min-width:0; padding:14px; font-size:16px; box-shadow:0 6px 18px rgba(var(--glow),.3);}
  .addr{min-width:240px;}

  /* 通用:标题行下面紧跟分组小标题时,不再额外空一大块 */
  .title-row + .m-sec-title + .card{margin-top:0;}
  .title-row + .m-sec-title.m-only{margin-top:18px;}
  .m-card, .card{margin-bottom:6px;}

  /* ---- 记账页 ---- */
  /* 支持的表格类型:说明 + 两个标签挤在同一排;「清空当前表格」出现时掉到下一行靠右 */
  .acct-note{margin-bottom:10px; gap:6px; font-size:12px;}
  .acct-note > span{white-space:nowrap;}
  .acct-note .fmt-tag{font-size:11px; padding:2px 7px;}
  .acct-note .acct-clear{margin-left:auto;}
  /* 「+ 加一项」拉成一整排 */
  .acct-col-head #addCost{flex:1; padding:11px; font-size:14px;}
  .acct-drop{padding:24px 14px; border-width:1.5px; border-radius:14px; background:var(--accent-soft); border-color:var(--accent);}
  .acct-src-row{margin-top:12px;}
  .acct-src-row select{min-width:0; flex:1 1 100%;}
  /* 总流水:单独一行,大字 */
  .acct-rev{flex:1 1 100%; margin:4px 0 0; padding-top:12px; border-top:1px solid var(--line);
    display:flex; align-items:baseline; justify-content:space-between; font-size:13px;}
  .acct-rev b{font-size:24px; margin-left:auto;}
  /* 成本 / 汇总 / 占比:外层透明,三块各自是卡片 */
  .acct-grid{display:block; background:none; border:none; box-shadow:none; padding:0;}
  .acct-col, .acct-col ~ .acct-col{background:var(--card); border:1px solid var(--line); border-radius:16px;
    box-shadow:0 2px 12px rgba(var(--tint),.1); padding:14px 16px; margin-bottom:6px;}
  .acct-col-head > span{display:none;} /* 标题已在卡片上方 */
  .acct-col-head{justify-content:flex-end; margin-bottom:10px;}
  .acct-grid .cost-row input.name{flex:1;}
  .acct-grid .cost-row input.amt{width:92px;}
  .cost-row .del{width:42px;} /* 高度跟输入框一样(见上面 align-self:stretch) */
  .acct-sum{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
  .acct-sum .pl-item{background:var(--bg2); border:1px solid var(--line); border-radius:12px; padding:10px; font-size:12px;}
  .acct-sum .pl-item b{font-size:18px; margin-top:4px; overflow-wrap:anywhere;}
  .donut-wrap{max-width:340px;}
  /* 本次项目预览:项目名称一整行,记入账本按钮铺满 */
  .rec-card .sec-title{display:none;}
  .sec-head{margin-bottom:12px;}
  .proj-name{margin-left:0; flex:1 1 100%;}
  .proj-name input{min-width:0; flex:1;}
  .rec-foot{flex-direction:column; align-items:stretch; gap:8px;}
  .rec-foot .btn{width:100%; padding:14px; font-size:16px;}
  /* 账本:标题同分组小标题,排序占一行,清空/导出各半 */
  /* 账本区:最上面提醒 → 标题 → 排序(短) + 右边「清空账本」文字 → 账本卡片 → 导出长按钮 */
  .ledger-head{flex-wrap:wrap; align-items:center; gap:8px; margin:28px 0 10px; padding:0; border:none;}
  .sec-big{flex:1 1 100%; margin:0 6px 2px; font-size:13px; font-weight:700; color:var(--sub); letter-spacing:.5px;}
  .sec-big .ledger-count{font-size:12px; font-weight:600;}
  .ledger-sort{margin-left:0; flex:0 1 auto; font-size:13px;}
  .ledger-sort select{width:168px; min-width:0; padding-top:8px; padding-bottom:8px;}
  .ledger-head #clearLedger{margin-left:auto; min-width:0; padding:8px 6px; border:none; background:none;
    font-size:14px; font-weight:600; color:var(--bad);}
  .ledger-head #exportLedger{display:none;}
  #exportLedgerM{display:block; width:100%; margin:14px 0 0; padding:14px; font-size:16px;}
  .backup-warn.ledger-warn:not(.ledger-warn-top){display:none;}
  .backup-warn.ledger-warn-top{flex:1 1 100%; margin:0 0 4px;} /* 在「账本」标题下面、排序上面 */
  .backup-warn.ledger-warn{display:flex; gap:8px; padding:10px 12px; font-size:12.5px; font-weight:600;
    color:#c92a2a; background:rgba(224,49,49,.06); border:1px solid rgba(224,49,49,.16); border-radius:12px;}
  .ledger-warn::before{content:"!"; flex:none; width:17px; height:17px; margin-top:1px; border-radius:50%;
    display:grid; place-items:center; background:#e03131; color:#fff; font-size:11px; font-weight:800;}
  .ledger-card{padding:4px 12px;}
  /* 账本/预览的每一条:一张小卡片(名称、日期、四个数字、成本明细) */
  .rec-card .ledger-box, .ledger-card .ledger-box{border:none; overflow:visible; border-radius:0;}
  .ledger thead{display:none;}
  .ledger, .ledger tbody{display:block; width:100%;}
  .ledger tr{display:grid; column-gap:10px; row-gap:6px; padding:12px 0; border-bottom:1px solid var(--line);
    grid-template-columns:26px minmax(0,1fr) minmax(0,1fr) 32px;
    grid-template-areas:"h name name del" "h date date del" "h rev cost del" "h net rate del" "h chips chips del";}
  .ledger tr:last-child{border-bottom:none;}
  #recPreview tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:4px 0;
    grid-template-areas:"name name" "date date" "rev cost" "net rate" "chips chips";}
  .ledger tr td{display:block; border:none; padding:0; background:transparent; white-space:normal; min-width:0;}
  .ledger tr:has(.empty-row){display:block;}
  .ledger td.empty-row{padding:18px 6px; font-size:13px;}
  .ledger td.col-handle{grid-area:h; width:auto;}
  .ledger .handle{width:28px; height:100%; min-height:60px; border-radius:8px;}
  .ledger td.col-del{grid-area:del; width:auto;}
  .ledger td.c-name{grid-area:name; font-size:15px; font-weight:700; color:var(--ink);}
  .ledger td.c-date{grid-area:date; font-size:12px; color:var(--sub); margin-top:-4px;}
  .ledger td.c-rev{grid-area:rev;} .ledger td.c-cost{grid-area:cost;} .ledger td.c-net{grid-area:net;} .ledger td.c-rate{grid-area:rate;}
  .ledger td.num{text-align:left; font-size:14px; font-weight:700; overflow-wrap:anywhere;}
  .ledger td.num::before{content:attr(data-l); display:block; font-size:11px; font-weight:500; color:var(--sub); margin-bottom:2px;}
  .ledger td.c-costs{grid-area:chips; min-width:0;}
  .ledger td.c-costs:empty{display:none;}
  .ledger tr.dragging{background:var(--card); border-radius:12px;}

  /* ---- 小工具页 ---- */
  /* 工具切换:同打表方式的左右切换块 */
  .tool-switch{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; margin:18px 0 12px;
    background:var(--bg2); border:1px solid var(--line); border-radius:14px;}
  .tool-opt, .tool-opt:hover{justify-content:center; border:none; background:transparent; box-shadow:none;
    padding:11px 4px; font-size:13.5px; border-radius:11px; white-space:normal; text-align:center; line-height:1.3;}
  .tool-opt .dot{display:none;}
  .tool-opt.active{background:var(--card); color:var(--ink); box-shadow:0 2px 8px rgba(var(--tint),.2);}
  .tool-desc{padding:10px 12px; margin-bottom:4px; border:none; border-radius:12px; background:var(--accent-soft);
    font-size:13px; color:var(--ink);}
  .tool-body{min-height:0;}
  .tstep{margin:18px 0 8px;}
  .tstep-hint{display:block; margin:4px 0 0;}
  .tdrop{padding:22px 14px;}
  .tbtns{flex-wrap:wrap;}
  .tbtns .btn:not(.sm){flex:1 1 100%; min-width:0; padding:13px;}
  .tlegend{margin-left:0;}
  .thero b{font-size:34px;}
  .tstat{flex:1 1 40%;}
  .tstat b{font-size:20px;}
  /* 结果表格变成一条一张小卡片,每格前面带列名 */
  .tbox{max-height:none; border:none; overflow:visible;}
  .tbox .ledger thead, .tbox table thead{display:none;}
  .tbox table, .tbox tbody{display:block; width:100%;}
  .tbox tr{display:flex; flex-wrap:wrap; gap:6px 12px; padding:12px; margin-bottom:8px;
    background:var(--bg2); border:1px solid var(--line); border-radius:12px;}
  .tbox tr td{display:block; flex:1 1 40%; min-width:0; border:none; padding:0; background:transparent; white-space:normal;
    font-size:14px; overflow-wrap:anywhere;}
  .tbox td::before{content:attr(data-l); display:block; font-size:11px; color:var(--sub); margin-bottom:2px;}
  .tbox td[data-l=""]::before{display:none;}
  .tbox td[data-l="地址"], .tbox td[data-l="问题"], .tbox td[data-l="可能是"]{flex-basis:100%;}
  .taddr{min-width:0; max-width:none;}
  /* 胶带表:名称 + 删除一行,长宽高一行,数量/每个用胶/小计一行 */
  .tbox tr{grid-template-areas:none;} /* 不沿用上面账本卡片的布局 */
  #tpTable tr{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-areas:none; gap:8px 10px;}
  #tpTable tr td{grid-area:auto;}
  #tpTable td:nth-child(1){grid-column:1 / 3;}
  #tpTable td:nth-child(8){grid-column:3; grid-row:1; justify-self:end; align-self:center;}
  #tpTable td:nth-child(6){grid-row:3; grid-column:1;}
  #tpTable td input{width:100% !important;}
  #tpTable .tbtns.left .btn, #pkBoxes .tbtns.left .btn{flex:1 1 100%; padding:11px; font-size:14px;} /* 「+ 加一种箱型」拉成一整排 */
  #tpTable .row-del{border:none; background:transparent; color:var(--sub); width:34px; height:34px; border-radius:8px; font-size:16px;}

  /* ---- 历史页:清空历史挪到标题同一行,列表外层透明、每条一张卡片 ---- */
  #page-history .title-row{flex-wrap:nowrap; align-items:center;}
  #page-history .page-title .hist-count{font-size:13px; font-weight:600; margin-left:4px;}
  #clearHistoryM{display:inline-block; margin-left:auto; padding:8px 14px; font-size:13px; flex:none;}
  #clearHistoryM:active{border-color:var(--bad); color:var(--bad);}
  .hist-head{display:none;}
  .hist-card{background:none; border:none; box-shadow:none; padding:0; margin-top:14px !important;}
  .hist-item{flex-wrap:wrap; gap:10px; padding:14px; border-radius:16px; box-shadow:0 2px 12px rgba(var(--tint),.1); margin-bottom:10px;}
  .hist-item .info{flex:1 1 100%;}
  .hist-item .info .t{font-size:15px;}
  .hist-item .btn{flex:1; padding:10px;}
  .hist-card .empty{background:var(--card); border:1px solid var(--line); border-radius:16px;}
}