/* 调色程序 · 宣纸石青 */
:root{
  --paper:#F7F5F0; --card:#FFFFFF; --ink:#1A1A1A; --ink2:#5C5650; --ink3:#9A9086;
  --line:#E3DCCC; --line2:#F2EEE6;
  --qing:#2E4A54; --qing-l:#3A5A64; --zhu:#A63D2F; --lv:#3E7C6A; --zhe:#8C7A62;
  --zhu-bg:#FBEDE9; --lv-bg:#F0F5F3; --zhe-bg:#F5F0E6;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
/* 压住橡皮筋回弹把 fixed 元素一起拖下来（2026-10-21 tabbar 跟手问题）。
   ★ 必须写在 html 上：视口滚动的控制元素是 html（scrollingElement=HTML），
   写在 body 上不生效——第一版就错过这道 */
html{overscroll-behavior:none}
body{
  font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--paper);color:var(--ink);font-size:14px;line-height:1.6;
  max-width:560px;margin:0 auto;position:relative;
  /* 底部要留够 tabbar（68px）+ 呼吸空间 + 刘海屏安全区，否则最后一排卡片会被压住 */
  padding-bottom:calc(96px + env(safe-area-inset-bottom));
  overflow-x:hidden;              /* 任何元素超宽都不许把整页撑宽（标题曾经把卡片全挤歪） */
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Georgia,"Songti SC","STSong",serif;font-weight:600;letter-spacing:.5px}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;width:100%;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--qing)}
code,.mono{font-family:"SF Mono",Consolas,monospace;font-size:12px}

/* 顶栏 */
.topbar{position:sticky;top:0;z-index:20;background:rgba(247,245,240,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
  padding:14px 16px;display:flex;align-items:center;gap:12px}
.topbar h1{font-size:19px;letter-spacing:2px}
.topbar .back{flex:0 0 32px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink2);flex-shrink:0;
  margin-right:6px}   /* 光靠父级 gap 会被 h1 的 letter-spacing 吃掉视觉间距，这里补一刀 */
.topbar .spacer{flex:1}
.icon-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--ink2);flex-shrink:0}

/* 内容 */
.page{padding:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.card.pad{padding:16px 18px}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin:22px 0 10px}
.sec h2{font-size:15px;letter-spacing:1.5px}
.sec span{font-size:11.5px;color:var(--ink3)}

/* 首页 hero */
.hero{background:linear-gradient(135deg,var(--qing),var(--qing-l));border-radius:20px;
  padding:22px 20px;color:var(--paper);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-36px;top:-36px;width:150px;height:150px;
  border-radius:50%;border:1px solid rgba(247,245,240,.14)}
.hero::before{content:"";position:absolute;right:-8px;top:28px;width:92px;height:92px;
  border-radius:50%;border:1px solid rgba(247,245,240,.1)}
.hero .lbl{font-size:10px;letter-spacing:3px;opacity:.6;margin-bottom:6px}
.hero .ttl{font-family:Georgia,"Songti SC",serif;font-size:23px;letter-spacing:2px;font-weight:600}
.hero .rule{width:32px;height:2px;background:var(--zhu);margin:11px 0}
.hero .desc{font-size:12px;opacity:.74;line-height:1.7;position:relative;z-index:1}

/* 功能格 */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fn{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 15px;
  position:relative;overflow:hidden;text-align:left;width:100%}
.fn::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--qing)}
.fn.zhu::before{background:var(--zhu)} .fn.lv::before{background:var(--lv)} .fn.zhe::before{background:var(--zhe)}
.fn .ico{width:33px;height:33px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  font-size:15px;margin-bottom:10px}
.fn .n{font-size:14px;font-weight:600}
.fn .d{font-size:11px;color:var(--ink3);margin-top:2px}
.fn .wip{position:absolute;top:10px;right:10px;font-size:9.5px;padding:2px 7px;border-radius:20px;
  background:var(--zhe-bg);color:var(--zhe);font-weight:600}

/* 统计 */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:13px 10px;text-align:center}
.stat b{display:block;font-family:Georgia,serif;font-size:22px;color:var(--qing);line-height:1.2}
.stat span{font-size:10.5px;color:var(--ink3)}

/* 列表 */
.row{display:flex;align-items:center;gap:12px;padding:12px 15px;border-bottom:1px solid var(--line2);
  background:var(--card);cursor:pointer}
.row:last-child{border-bottom:none}
.row:active{background:#FCFAF6}
.chip{width:34px;height:34px;border-radius:10px;flex-shrink:0;border:1px solid rgba(0,0,0,.09)}
.row .info{flex:1;min-width:0}
.row .n{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .c{font-size:10.5px;color:var(--ink3);font-family:"SF Mono",monospace;margin-top:1px}
.row .r{text-align:right;flex-shrink:0;font-size:11px;color:var(--ink3)}
.tsbar{width:44px;height:3px;background:var(--line2);border-radius:2px;overflow:hidden;margin-bottom:3px}
.tsbar i{display:block;height:100%;background:var(--qing);border-radius:2px}

/* 标签栏 */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:0 0 2px;margin-bottom:14px}
.tabs::-webkit-scrollbar{display:none}
/* 2026-10-21 用户要求「胶囊太多、降噪」：整体缩小一号，未选中浅底细边、选中才实心 */
.tab{flex-shrink:0;padding:6px 12px;border-radius:20px;background:var(--line2);border:1px solid transparent;
  color:var(--ink2);font-size:12px}
/* 色卡页的分类是"标题性"的：圆角矩形 + 字大一号（用户要求） */
.tabs.sq .tab{padding:9px 16px;border-radius:10px;font-size:13.5px;font-weight:600}
.tabs.sq .tab .num{font-size:11.5px;opacity:.75;font-family:"SF Mono",monospace}
.tab.on{background:var(--qing);border-color:var(--qing);color:var(--paper);font-weight:600}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 18px;border-radius:12px;font-size:14px;font-weight:600}
.btn.primary{background:var(--qing);color:var(--paper)}
.btn.zhu{background:var(--zhu);color:var(--paper)}
.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--ink2)}
.btn:disabled{opacity:.42;cursor:not-allowed}
.btn.block{width:100%}
.btn:active{opacity:.85}

/* 底部导航（2026-10-21 用户要求：毛玻璃 + 压「下拉跟手」）——
   translateZ(0) 独立合成层，配合 html 的 overscroll-behavior:none，
   压住 overscroll 橡皮筋把 fixed 元素一起拖下来的问题。
   ★ 毛玻璃做 @supports 检测：微信 X5 等不支持 backdrop-filter 的内核，
   半透明背景没有 blur 会直接透出内容（很花），那些内核走实底 fallback
   ★ 双保险 overscroll 跟手（v5.5）：iOS 橡皮筋下拉时 window.scrollY 会变负，
   app.js 监听后给 body 加 sb-hide，把 tabbar 整个移出屏幕，松手回弹时移除——
   overscroll-behavior 在老内核上不生效时这条兜底（不是猜：负 scrollY 是
   iOS/Firefox 橡皮筋的确定行为） */
.tabbar{position:fixed;bottom:0;left:0;right:0;max-width:560px;margin:0 auto;
  height:68px;background:#F7F5F0;
  border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-around;
  padding-bottom:env(safe-area-inset-bottom);z-index:30;
  transform:translateZ(0);transition:transform .18s ease}
body.sb-hide .tabbar{transform:translateY(calc(100% + env(safe-area-inset-bottom)))}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)){
  .tabbar{background:rgba(247,245,240,.72);backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);border-top-color:rgba(227,220,204,.7)}
}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:11.5px;color:var(--ink3);letter-spacing:.5px;flex:1;padding-top:4px}
.tabbar button.on{color:var(--qing);font-weight:700}
.tabbar .ti{width:24px;height:24px;display:flex;align-items:center;justify-content:center}
.tabbar .ti svg{width:23px;height:23px;display:block}

/* 备案号页脚（云端部署才显示，见 app.js beianHtml()） */
.beian{text-align:center;font-size:10.5px;color:var(--ink3);padding:6px 16px 2px;line-height:1.7}
.beian a{color:var(--ink3);text-decoration:none}
.beian a:active{color:var(--qing)}
.beian .bdot{margin:0 6px;opacity:.6}

/* 表单 */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:var(--ink2);margin-bottom:6px;font-weight:600}
.field .hint{font-size:11px;color:var(--ink3);margin-top:5px;line-height:1.6}
.hint{font-size:11px;color:var(--ink3);line-height:1.7}
.field .row2{display:flex;gap:8px}
.field .row2>*{flex:1}
.field .row3{display:flex;gap:8px}
.field .row3>*{flex:1}

/* 色块输入 */
.color-input{display:flex;gap:8px;align-items:center}
.color-input .sw{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);flex-shrink:0}

/* 明细行 */
.item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line2)}
.item:last-child{border-bottom:none}
.item .info{flex:1;min-width:0}
.item .g{width:78px;text-align:right}
.item input{padding:6px 8px;font-size:13px}
.item .del{width:26px;height:26px;border-radius:50%;color:var(--ink3);flex-shrink:0}

/* 色卡网格 */
.grid-colors{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cc{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--card)}
.cc .sw{height:56px}
.cc .m{padding:5px 6px 7px}
.cc .n{font-size:10px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc .x{font-size:9px;color:var(--ink3);font-family:monospace}

/* 提示 */
.empty{text-align:center;padding:50px 20px;color:var(--ink3)}
.empty .ico{font-size:38px;opacity:.3;margin-bottom:12px}
.empty p{font-size:13px;margin-bottom:16px}

.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);
  background:rgba(26,26,26,.9);color:#fff;font-size:13px;padding:10px 18px;border-radius:12px;
  z-index:99;opacity:0;transition:opacity .2s;pointer-events:none;max-width:80%}
.toast.show{opacity:1}

.sheet-mask{position:fixed;inset:0;background:rgba(26,26,26,.42);z-index:40;display:none}
.sheet-mask.show{display:block}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;
  background:var(--paper);border-radius:20px 20px 0 0;z-index:41;max-height:88vh;overflow-y:auto;
  padding:20px 18px calc(20px + env(safe-area-inset-bottom));display:none}
.sheet.show{display:block}
.sheet h3{font-size:16px;margin-bottom:14px}
/* 面板底部按钮吸底：内容再长也不会把「使用此色 / 取消」滚没（用户反馈点完取色找不到确认按钮） */
.sheet .sheet-actions{
  position:sticky;bottom:0;z-index:2;
  background:linear-gradient(180deg,rgba(247,244,238,0) 0%,var(--paper) 34%,var(--paper) 100%);
  padding:14px 0 2px;margin-top:6px;
}

.badge{display:inline-block;font-size:10.5px;padding:2px 9px;border-radius:20px;font-weight:600}
.badge.ok{background:var(--lv-bg);color:var(--lv)}
.badge.warn{background:var(--zhe-bg);color:var(--zhe)}
.badge.bad{background:var(--zhu-bg);color:var(--zhu)}

.warn-box{background:var(--zhu-bg);border:1px solid #F0D8D2;border-radius:12px;
  padding:11px 14px;font-size:12.5px;color:var(--zhu);margin-bottom:14px}
.ok-box{background:var(--lv-bg);border-left:2px solid var(--lv);border-radius:0 10px 10px 0;
  padding:11px 14px;font-size:12.5px;color:var(--qing);margin-bottom:14px}

/* ================= 玲玲配色系统 · 新增组件 ================= */

/* 品牌区：简洁居中 */
.brand-sub{
  font-size:10.5px;letter-spacing:3px;color:var(--ink3);margin-top:8px;
  text-transform:uppercase;
}

/* 大卡：智能调色 */
.big-card{
  margin:0 16px 12px;border-radius:22px;padding:20px 18px 16px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#22434E 0%,#2E4A54 50%,#3C6270 100%);
  color:#F2F6F7;box-shadow:0 10px 30px rgba(34,67,78,.26);cursor:pointer;
  display:block;width:calc(100% - 32px);text-align:left;border:none;
}
.big-card::after{
  content:"";position:absolute;right:-50px;top:-50px;width:180px;height:180px;border-radius:50%;
  border:1px solid rgba(242,246,247,.13);
}
.big-card::before{
  content:"";position:absolute;right:-12px;top:34px;width:112px;height:112px;border-radius:50%;
  border:1px solid rgba(242,246,247,.09);
}
.big-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.big-ico{
  width:52px;height:52px;border-radius:16px;flex-shrink:0;
  background:rgba(247,245,240,.13);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-size:23px;
}
.big-txt{flex:1;min-width:0}
.big-title{
  font-family:Georgia,"Songti SC",serif;font-size:21px;font-weight:600;letter-spacing:2px;line-height:1.25;
}
.big-desc{font-size:11.5px;opacity:.74;margin-top:3px;letter-spacing:.4px}
.big-arrow{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:rgba(247,245,240,.16);display:flex;align-items:center;justify-content:center;
  font-size:15px;
}
.big-foot{
  display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:13px;
  border-top:1px solid rgba(242,246,247,.13);position:relative;z-index:1;
}
.big-foot .dots{display:flex;gap:5px}
.big-foot .dot{width:15px;height:15px;border-radius:50%;border:1px solid rgba(255,255,255,.3)}
.big-foot .lbl{font-size:10.5px;opacity:.68;letter-spacing:.6px;margin-left:4px}

/* 中卡：辅助调色 */
.mid-card{
  margin:0 16px 12px;border-radius:18px;padding:15px 17px;
  /* 不再用纯白底：淡青绿渐变，跟智能调色大卡的深青呼应，又不抢它 */
  background:linear-gradient(135deg,#F3F9F6 0%,#E9F3EE 55%,#E3EFE9 100%);
  border:1px solid #D5E5DC;
  display:flex;align-items:center;gap:13px;cursor:pointer;width:calc(100% - 32px);
  text-align:left;position:relative;overflow:hidden;
}
/* 右侧淡圆装饰，跟大卡呼应 */
.mid-card::after{
  content:"";position:absolute;right:-34px;top:-34px;width:108px;height:108px;
  border-radius:50%;border:1px solid rgba(58,122,102,.12);pointer-events:none;
}
.mid-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--lv)}
.mid-card .mid-title{color:#1E4A3C}
.mid-card .mid-desc{color:#5B7A6E}
.mid-ico{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;
  background:var(--lv-bg);color:var(--lv);
  display:flex;align-items:center;justify-content:center;font-size:19px;
}
.mid-txt{flex:1;min-width:0}
.mid-title{font-size:15.5px;font-weight:600;letter-spacing:.8px}
.mid-desc{font-size:11.5px;color:var(--ink3);margin-top:2px}
.mid-arrow{color:var(--ink3);font-size:15px;flex-shrink:0}

/* 工具九宫格 */
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 16px}
.tool{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px 8px 13px;text-align:center;position:relative;cursor:pointer;
}
.tool .ico{
  width:38px;height:38px;border-radius:12px;margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.tool .n{font-size:12px;font-weight:600;letter-spacing:.4px}
.tool .d{font-size:9.5px;color:var(--ink3);margin-top:2px}
.tool .dot-red{position:absolute;top:11px;right:13px;width:6px;height:6px;border-radius:50%;background:var(--zhu)}
.tool.gold{background:linear-gradient(150deg,#FBF6EA,#F5EBD6);border-color:#E6D5A8}
.tool.gold .n{color:#7A5F22}

/* 会员页 */
.gold-hero{
  margin:14px 16px 16px;border-radius:22px;padding:22px 20px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#2E2517 0%,#4A3A20 46%,#6E5730 100%);
  color:#F5E7C6;box-shadow:0 12px 34px rgba(74,58,32,.3);
}
.gold-hero::after{
  content:"";position:absolute;right:-56px;top:-56px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,206,120,.28),transparent 66%);
}
.gold-hero::before{
  content:"";position:absolute;left:-30px;bottom:-46px;width:140px;height:140px;border-radius:50%;
  border:1px solid rgba(245,231,198,.09);
}
.gh-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.gh-avatar{
  width:56px;height:56px;border-radius:50%;flex-shrink:0;
  background:radial-gradient(circle at 32% 28%,#8C6E3A,#3A2E1C);
  border:1.5px solid rgba(240,206,120,.5);
  display:flex;align-items:center;justify-content:center;
  font-family:Georgia,serif;font-size:22px;color:#F0CE78;
}
.gh-info{flex:1;min-width:0}
.gh-name{font-family:Georgia,"Songti SC",serif;font-size:19px;letter-spacing:2px}
.gh-badge{
  display:inline-block;font-size:9.5px;padding:2px 8px;border-radius:20px;margin-left:7px;
  background:rgba(240,206,120,.16);color:#F0CE78;border:1px solid rgba(240,206,120,.32);
  letter-spacing:.5px;vertical-align:2px;
}
.gh-id{font-size:11px;opacity:.6;margin-top:4px;letter-spacing:1px}
.gh-nums{
  display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(245,231,198,.16);position:relative;z-index:1;
}
.gh-nums div{text-align:center}
.gh-nums b{display:block;font-family:Georgia,serif;font-size:22px;color:#F0CE78;line-height:1.2}
.gh-nums span{font-size:10.5px;opacity:.6;letter-spacing:.5px}

.gold-note{
  margin:0 16px 16px;padding:15px 17px;border-radius:16px;
  background:linear-gradient(135deg,#FBF6EA,#F7EFDC);border:1px solid #EADBBB;
  font-size:12.5px;color:#6E5730;line-height:1.75;
}
.gold-note b{color:#4A3A20}

.perm-row{
  display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line2);
  background:var(--card);
}
.perm-row:last-child{border-bottom:none}
.perm-row .tick{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(140deg,#F0CE78,#C9A44E);color:#4A3A20;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
}
.perm-row .n{flex:1;font-size:13px}
.perm-row .k{font-size:10px;color:var(--ink3);font-family:monospace}

/* 我的页 */
.me-card{
  margin:8px 16px 16px;border-radius:22px;padding:20px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#22434E,#2E4A54 55%,#416B78);color:#F2F6F7;
  box-shadow:0 10px 28px rgba(34,67,78,.24);
}
.me-card::after{
  content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;
  border:1px solid rgba(242,246,247,.12);
}
.me-top{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.me-avatar{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;
  background:rgba(247,245,240,.14);border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  font-family:Georgia,"Songti SC",serif;font-size:21px;
}
.me-info{flex:1}
.me-name{font-size:17px;font-weight:600;letter-spacing:1px}
.me-sub{font-size:11px;opacity:.68;margin-top:3px;letter-spacing:.5px}
.me-nums{
  display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;padding-top:15px;
  border-top:1px solid rgba(242,246,247,.14);position:relative;z-index:1;
}
.me-nums div{text-align:center}
.me-nums b{display:block;font-family:Georgia,serif;font-size:21px;line-height:1.2}
.me-nums span{font-size:10.5px;opacity:.66}

.list-card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:0 16px}
.list-row{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line2);
  cursor:pointer;
}
.list-row:last-child{border-bottom:none}
.list-row .ico{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.list-row .n{flex:1;font-size:13.5px}
.list-row .v{font-size:11.5px;color:var(--ink3)}
.list-row .ar{color:var(--line);font-size:14px;flex-shrink:0;margin-left:2px}

/* 开发中标签 */
.wip-tag{
  font-size:9.5px;padding:2px 7px;border-radius:20px;
  background:var(--zhe-bg);color:var(--zhe);font-weight:600;letter-spacing:.3px;flex-shrink:0;
}

/* 页面底部留白（防被 tabbar 遮住） */
.page{padding-bottom:8px}
.page::after{content:"";display:block;height:18px}

/* 色卡页：排序（左） + 每行列数（右） */
.opt-row{display:flex;align-items:flex-start;justify-content:flex-start;gap:10px;margin-bottom:12px}
.sort-det{flex:0 0 auto;min-width:0}
.sort-det summary{
  list-style:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink2);
  padding:8px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);display:inline-block;
}
.sort-det summary::-webkit-details-marker{display:none}
.sort-det summary::before{content:"▾ ";font-size:10px}
.sort-det .chip-row{margin:8px 0 0}

/* 批量导入：解析结果预览表 */.imp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.imp-table{width:100%;border-collapse:collapse;font-size:11.5px}
.imp-table th{
  text-align:left;color:var(--ink3);font-weight:500;white-space:nowrap;
  padding:7px 9px;border-bottom:1px solid var(--line);background:var(--line2);
}
.imp-table td{padding:7px 9px;border-bottom:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.imp-table tr:last-child td{border-bottom:none}

/* 每行列数：2个 / 3个 / 4个 */
.col-btns{display:flex;gap:0;flex-shrink:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.col-btn{
  padding:8px 13px;border:none;background:transparent;font-size:13px;font-weight:600;
  color:var(--ink3);cursor:pointer;border-right:1px solid var(--line);
}
.col-btn:last-child{border-right:none}
.col-btn.on{background:var(--qing);color:var(--paper);font-weight:600}

/* 小胶囊行 */
.chip-row{display:flex;gap:6px;overflow-x:auto;margin-bottom:10px;padding-bottom:2px}
.chip-row::-webkit-scrollbar{display:none}
.chip-row .lb{font-size:11px;color:var(--ink3);flex-shrink:0;align-self:center;margin-right:2px}
.chip-s{
  flex-shrink:0;padding:7px 14px;border-radius:9px;background:var(--card);
  border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--ink2);
}
.chip-s.on{background:var(--qing);border-color:var(--qing);color:var(--paper);font-weight:600}
.chip-s.dot{display:flex;align-items:center;gap:5px}
.chip-s.dot i{width:10px;height:10px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.1)}

/* 收藏星标 */
.fav-star{
  position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.25);backdrop-filter:blur(4px);
  color:rgba(255,255,255,.55);font-size:13px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.fav-star.on{color:#F5C842}
.icon-btn.on{color:var(--qing);border-color:var(--qing);background:#EEF2F4}

/* 浮动按钮 */
.fab{
  position:fixed;right:22px;bottom:84px;width:52px;height:52px;border-radius:50%;
  background:var(--qing);color:var(--paper);font-size:22px;border:none;cursor:pointer;
  box-shadow:0 6px 22px rgba(46,74,84,.34);z-index:25;
  display:flex;align-items:center;justify-content:center;
}
.fab:active{transform:scale(.92)}

/* 搜索展开动画 */
.field{transition:all .2s}

/* 分类数字 */
.tab .num{font-style:normal;font-size:11px;opacity:.55;margin-left:2px;font-family:"SF Mono",monospace}

/* ============ v1.9 新增：需求缺口补齐 ============ */

/* 配方卡片三操作：复制 / 评分 / 比对 */
.ops{display:flex;gap:6px;margin-top:6px}
.op{
  font-size:10.5px;padding:3px 10px;border-radius:20px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink2);
}
.op:active{background:var(--line2)}
.stars{color:#F5C842;font-size:11px;margin-left:4px;letter-spacing:-1px}
.rate-star{background:none;border:none;font-size:26px;color:var(--line);padding:0 2px}
.rate-star.on{color:#F5C842}

/* 明细行：百分比 + 克数 双输入 */
.item .nums{display:flex;align-items:center;gap:4px;flex-shrink:0}
.item .nums .in-pct{width:50px;padding:6px 5px;font-size:12px;text-align:right}
.item .nums .in-g{width:66px;padding:6px 6px;font-size:12px;text-align:right}
.item .code{font-family:"SF Mono",monospace;font-size:10.5px;color:var(--ink3);margin-left:5px;font-weight:400}
.total-line{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line2);
  font-size:12px;color:var(--ink2);
}
.total-line b{color:var(--ink)}

/* 实测记录 / 历史版本 */
.test-row{padding:8px 0;border-bottom:1px solid var(--line2)}
.test-row:last-child{border-bottom:none}
.test-row b{font-size:13.5px}
.verdict{font-size:10.5px;padding:1px 8px;border-radius:20px;margin-left:5px}
.verdict.ok{background:var(--lv-bg);color:var(--lv)}
.verdict.warn{background:var(--zhe-bg);color:var(--zhe)}
.verdict.bad{background:var(--zhu-bg);color:var(--zhu)}

/* 库存预警按钮 */
.icon-btn.warn{color:var(--zhu);border-color:#E8C4BC}
.icon-btn.warn::after{
  content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;
  border-radius:50%;background:var(--zhu);
}
.icon-btn{position:relative}

/* ============ v2.0 智能调色 / 辅助调色（照色小里实机复刻） ============ */

/* 三步步骤条：取色 → 配方 → 评估 */
.steps{display:flex;align-items:center;gap:8px;padding:14px 16px 4px}
.steps .st{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.steps .st:last-child{flex:0 0 auto}
.steps .num{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;background:var(--line2);color:var(--ink3);
}
.steps .st.done .num{background:var(--lv);color:#fff}
.steps .st.now .num{background:var(--qing);color:var(--paper)}
.steps .lb{font-size:11.5px;color:var(--ink3);white-space:nowrap}
.steps .st.done .lb,.steps .st.now .lb{color:var(--ink);font-weight:600}
.steps .bar{flex:1;height:1px;background:var(--line);min-width:8px}

/* 大图取色区 */
.pick-stage{
  margin:10px 16px;border-radius:14px;overflow:hidden;position:relative;
  background:#EDE9E0;border:1px solid var(--line);min-height:190px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.pick-stage .cam{font-size:40px;color:var(--ink3);opacity:.5}
.pick-stage .hint{font-size:12.5px;color:var(--ink3)}
.pick-stage img{width:100%;display:block}
.pick-stage .bigsw{width:64px;height:64px;border-radius:14px;border:1px solid var(--line)}
.ai-btn{
  margin:0 16px 12px;padding:13px;border-radius:14px;text-align:center;
  width:calc(100% - 32px);      /* button 默认按内容宽，不显式给就只占半行 */
  box-sizing:border-box;
  background:linear-gradient(135deg,#3A5A64,#2E4A54);color:var(--paper);
  font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;
}
.ai-btn .q{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.22);
  font-size:11px;display:flex;align-items:center;justify-content:center}
.three-entry{display:flex;gap:10px;margin:0 16px 14px}
.three-entry .te{
  flex:1;padding:11px 0;border-radius:12px;background:var(--card);border:1px solid var(--line);
  text-align:center;font-size:12px;color:var(--ink2);
}
.three-entry .te b{display:block;font-size:16px;margin-bottom:3px;color:var(--qing)}
.three-entry .te:disabled{opacity:.45}

/* 色卡缩略横排 */
.cardlib{display:flex;gap:8px;overflow-x:auto;padding:0 16px 4px}
.cardlib::-webkit-scrollbar{display:none}
.cardlib .cl{
  width:52px;flex-shrink:0;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:var(--card);cursor:pointer;
}
.cardlib .cl .sw{height:34px}
.cardlib .cl .n{font-size:9px;padding:3px 4px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 配方结果页：色块对比行 */
.de-row{display:flex;align-items:center;gap:10px;padding:14px 16px}
.de-row .swbox{flex:1;text-align:center}
.de-row .swbox .sw{height:56px;border-radius:12px;border:1px solid var(--line)}
.de-row .swbox .lb{font-size:10.5px;color:var(--ink3);margin-top:5px}
.de-badge{
  flex-shrink:0;padding:8px 12px;border-radius:12px;text-align:center;
  background:var(--lv-bg);border:1px solid #CFE3DB;
}
.de-badge b{display:block;font-size:19px;font-family:Georgia,serif;color:var(--lv);line-height:1.1}
.de-badge span{font-size:9.5px;color:var(--ink3)}
.de-badge.bad{background:var(--zhu-bg);border-color:#EBD3CC}
.de-badge.bad b{color:var(--zhu)}
.de-badge.warn{background:var(--zhe-bg);border-color:#E5DCC8}
.de-badge.warn b{color:var(--zhe)}

/* 配方清单行 */
.rec-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line2)}
.rec-row:last-child{border-bottom:none}
.rec-row .chip{width:32px;height:32px;border-radius:9px;flex-shrink:0;border:1px solid rgba(0,0,0,.09)}
.rec-row .info{flex:1;min-width:0}
.rec-row .nm{font-size:13px;font-weight:600}
.rec-row .cd{font-size:10px;color:var(--ink3);font-family:"SF Mono",monospace}
.rec-row .bar{height:4px;border-radius:2px;background:var(--line2);overflow:hidden;margin-top:4px}
.rec-row .bar i{display:block;height:100%;background:var(--qing);border-radius:2px}
.rec-row .pct{width:44px;text-align:right;font-size:12.5px;font-weight:600;flex-shrink:0}
.rec-row .gm{width:62px;text-align:right;font-size:11.5px;color:var(--ink2);flex-shrink:0;font-family:"SF Mono",monospace}

/* 辅助调色：双取色画面 */
.dual{display:flex;gap:8px;margin:10px 16px 0}
.dual .pane{flex:1;min-width:0;border-radius:12px;overflow:hidden;position:relative;background:#000;border:1px solid var(--line)}
.dual .pane canvas{width:100%;display:block}
.dual .pane .tag{
  position:absolute;top:6px;left:6px;font-size:10px;padding:2px 8px;border-radius:20px;
  background:rgba(255,255,255,.85);color:var(--ink);display:flex;align-items:center;gap:4px;
}
.dual .pane .tag i{width:5px;height:5px;border-radius:50%;background:var(--zhu)}
.dual .pane .tag.cur i{background:var(--lv)}
.dual .pane .coord{position:absolute;bottom:6px;left:6px;right:6px;font-size:9.5px;color:rgba(255,255,255,.85);
  font-family:"SF Mono",monospace;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.dual .empty-pane{height:120px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;
  color:rgba(255,255,255,.6);font-size:11px;background:#2A2A2A}
.dual .empty-pane b{font-size:22px;opacity:.6}

/* 辅助调色 tab */
.ast-tabs{display:flex;gap:6px;margin:10px 16px 0;overflow-x:auto}
.ast-tabs::-webkit-scrollbar{display:none}
.ast-tabs button{flex-shrink:0;padding:5px 13px;border-radius:20px;font-size:11.5px;
  background:var(--card);border:1px solid var(--line);color:var(--ink2)}
.ast-tabs button.on{background:var(--qing);border-color:var(--qing);color:var(--paper);font-weight:600}

/* 目数档位（标准量） */
.mesh-row{display:flex;gap:6px;margin:10px 16px 0;align-items:center}
.mesh-row .lb{font-size:11px;color:var(--ink3);flex-shrink:0}
.mesh-row .mp{flex:1;padding:5px 0;border-radius:10px;font-size:11px;text-align:center;
  background:var(--card);border:1px solid var(--line);color:var(--ink2)}
.mesh-row .mp.on{background:var(--qing);border-color:var(--qing);color:var(--paper);font-weight:600}

/* 大字 ΔE */
.de-hero{display:flex;align-items:center;gap:12px;margin:14px 16px 0;padding:14px;border-radius:14px;
  background:var(--card);border:1px solid var(--line)}
.de-hero .sw{width:46px;height:46px;border-radius:12px;border:1px solid var(--line);flex-shrink:0}
.de-hero .mid{flex:1;text-align:center}
.de-hero .mid b{font-size:30px;font-family:Georgia,serif;line-height:1;color:var(--ink)}
.de-hero .mid span{display:block;font-size:10.5px;color:var(--ink3);margin-top:3px}

/* 文字指导条 */
.guide{margin:12px 16px 0;padding:11px 13px;border-radius:12px;font-size:12.5px;line-height:1.7}
.guide.ok{background:var(--lv-bg);color:var(--lv);border-left:2px solid var(--lv)}
.guide.warn{background:var(--zhe-bg);color:#8A6A2F;border-left:2px solid var(--zhe)}
.guide.bad{background:var(--zhu-bg);color:var(--zhu);border-left:2px solid var(--zhu)}

/* 第 N 步建议卡 */
.step-card{margin:12px 16px 0;padding:13px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.step-card .hd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.step-card .hd .no{font-size:11px;padding:2px 9px;border-radius:20px;background:var(--line2);color:var(--ink2)}
.step-card .hd .tagx{font-size:10px;padding:2px 8px;border-radius:20px;background:#E8F0F3;color:#2E6B8A}
.step-card .body{display:flex;align-items:center;gap:11px}
.step-card .body .chip{width:38px;height:38px;border-radius:11px;flex-shrink:0;border:1px solid rgba(0,0,0,.09)}
.step-card .body .nm{flex:1;font-size:13.5px;font-weight:600}
.step-card .body .g{font-size:19px;font-weight:700;color:#2E6B8A;font-family:Georgia,serif}
.step-card .foot{font-size:10.5px;color:var(--ink3);margin-top:9px;line-height:1.7}

/* 颜色历史 */
.hist{margin:14px 16px 0}
.hist .hr{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2)}
.hist .hr:last-child{border-bottom:none}
.hist .hr .sw{width:26px;height:26px;border-radius:8px;flex-shrink:0;border:1px solid var(--line)}
.hist .hr .t{flex:1;font-size:11.5px;color:var(--ink2)}
.hist .hr .de{font-size:11px;padding:2px 8px;border-radius:20px;background:var(--line2);color:var(--ink2);flex-shrink:0}

/* 实时中标签 */
.live{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--lv)}
.live i{width:6px;height:6px;border-radius:50%;background:var(--lv);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ============ v2.1 数据诚实标识 ============ */

/* 色值来源徽标：告诉客户这色值是哪来的、是不是实测 */
.src-badge{
  display:inline-flex;align-items:center;gap:3px;flex-shrink:0;
  font-size:9.5px;line-height:1.5;padding:1px 7px;border-radius:20px;
  background:var(--zhe-bg);color:#8A6A2F;border:1px dashed #D9C9A3;
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.src-badge i{font-style:normal;opacity:.75}
.src-row{display:flex;align-items:center;gap:6px;margin-top:4px;min-width:0}

/* 调不准警告条（缺口说明） */
.gap-box{
  margin:12px 16px 0;padding:12px 13px;border-radius:12px;
  background:var(--zhu-bg);border:1px solid #EBD3CC;
}
.gap-box .hd{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--zhu)}
.gap-box .bd{font-size:12px;color:#8A3A2E;line-height:1.75;margin-top:6px}
.gap-box .act{display:flex;gap:8px;margin-top:10px}
.gap-box .act button{
  flex:1;padding:7px 0;border-radius:10px;font-size:11.5px;
  background:var(--card);border:1px solid #EBD3CC;color:var(--zhu);
}

/* 色值来源说明卡（色母库顶部） */
.provenance{
  margin:0 16px 12px;padding:12px 13px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);
}
.provenance .hd{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink)}
.provenance .bd{font-size:11.5px;color:var(--ink2);line-height:1.8;margin-top:6px}
.provenance .bd b{color:var(--zhe)}

/* ============ v3.8 配方库网格卡片（照色小里 8.6 实机结构） ============ */
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.fcard{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:11px 12px 10px;cursor:pointer;
}
.fcard:active{background:#FCFAF6}
.fcard .sw{height:36px;border-radius:9px;border:1px solid rgba(0,0,0,.08);margin-bottom:9px}
.fcard .hex{font-size:14px;font-weight:700;font-family:"SF Mono",monospace;letter-spacing:.4px}
.fcard .nm{font-size:12.5px;font-weight:600;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard .meta{font-size:10px;color:var(--ink3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcard .ops2{display:flex;gap:4px;margin-top:9px}
.fcard .ops2 button{
  flex:1;font-size:10px;padding:4px 0;border-radius:8px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink2);
}
.fcard .ops2 button:active{background:var(--line2)}
.fcard .time{font-size:9.5px;color:var(--ink3);margin-top:7px}
.fcard .fav{position:absolute;top:7px;right:9px;font-size:15px;color:#D8D2C6;line-height:1}
.fcard .fav.on{color:#F5C842}

/* ============ v3.9 厂家页（照色小里 2.1.3：厂家只是壳） ============ */
.brand-row{display:flex;align-items:center;gap:10px;padding:13px 15px;border-bottom:1px solid var(--line2);cursor:pointer}
.brand-row:last-child{border-bottom:none}
.brand-row:active{background:#FCFAF6}
.brand-row .ico{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--line2);color:var(--qing);font-size:15px;
}
.brand-row .nm{flex:1;font-size:13.5px;font-weight:600;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-row .cnt{font-size:10.5px;color:var(--ink3);flex-shrink:0}
.brand-row .act{display:flex;gap:4px;flex-shrink:0}
.brand-row .act button{
  width:28px;height:28px;border-radius:50%;font-size:12px;
  border:1px solid var(--line);background:var(--card);color:var(--ink2);
}
.add-brand{
  margin:14px 16px;padding:14px;border-radius:12px;text-align:center;
  border:1px dashed var(--line);background:var(--card);color:var(--ink2);font-size:13px;
}
.add-brand:active{background:var(--line2)}

/* ============ v4.0 评估页（智能调色第 3 步的色差报告） ============ */
.rep-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line2);font-size:12.5px;
}
.rep-row:last-child{border-bottom:none}
.rep-row span{color:var(--ink3);flex-shrink:0}
.rep-row b{font-weight:600;color:var(--ink);text-align:right;
  font-family:"SF Mono",monospace;font-size:12.5px}

/* 辅助调色：画面里的准星（照色小里，摄影取色点标在图上） */
.dual .pane img{width:100%;display:block}
.dual .pane .pin{
  position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;pointer-events:none;
  border:1.5px solid #fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 1px 4px rgba(0,0,0,.4);
}
.dual .pane .pin::before{
  content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px 0 0 -1.5px;
  border-radius:50%;background:#A63D2F;
}
.dual .pane .pin-box{
  position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;pointer-events:none;
}
.dual .pane .pin-box::before,.dual .pane .pin-box::after{
  content:"";position:absolute;background:rgba(255,255,255,.9);
}
.dual .pane .pin-box::before{left:50%;top:0;bottom:0;width:1px;margin-left:-.5px}
.dual .pane .pin-box::after{top:50%;left:0;right:0;height:1px;margin-top:-.5px}

/* 会员页：「会员中心」放到金卡右上角，不再占一整个标题区 */
.gh-mc{
  margin-left:auto;flex-shrink:0;align-self:flex-start;
  font-size:11.5px;letter-spacing:2.5px;padding:4px 11px;border-radius:20px;
  color:rgba(255,242,208,.78);border:1px solid rgba(234,205,118,.34);
  background:rgba(255,255,255,.05);
}

/* ============ 顶栏文字按钮（用户要求：导入/新增做成按钮，不要小图标） ============ */
.tb-btn{
  flex-shrink:0;display:inline-flex;align-items:center;gap:3px;
  padding:7px 12px;border-radius:10px;font-size:12.5px;font-weight:600;
  border:1px solid var(--line);background:var(--card);color:var(--ink2);
  white-space:nowrap;
}
.tb-btn:active{opacity:.82}
.tb-btn.primary{background:var(--qing);border-color:var(--qing);color:var(--paper)}
.tb-btn.sm{padding:6px 10px;font-size:12px}
.topbar .tb-btn{margin-left:6px}
.topbar h1{flex-shrink:0}

/* ============ 首页标题：宋体宽字距 + 宣纸纹理 + 四角角标（v4.2） ============ */
.brand{
  /* 宣纸纹理：细密颗粒 + 极淡纤维纹，纯 CSS 不用图片 */
  /* 用户明确要求：两版标题都不要底纹 */
  background-image: none;
  padding: 26px 16px 22px;
  position: relative;
}
/* 顶部一道极淡的暖光，压住纹理的噪点感 */
.brand::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 18%, rgba(255,252,244,.85), rgba(255,252,244,0) 72%);
}
.brand-frame{
  position:relative;margin:0 auto;max-width:320px;padding:20px 12px 14px;
  text-align:center;
}
/* 四角角标：像老书封/取景框的直角 */
.bc{
  position:absolute;width:16px;height:16px;border:0 solid #A8843F;opacity:.66;
}
.bc.tl{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px;border-top-left-radius:5px}
.bc.tr{top:0;right:0;border-top-width:1.5px;border-right-width:1.5px;border-top-right-radius:5px}
.bc.bl{bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px;border-bottom-left-radius:5px}
.bc.br{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px;border-bottom-right-radius:5px}

/* 系统名称：宋体 + 宽字距（方案 01） */
.brand-name{
  font-family:"Songti SC","SimSun","STSong","Noto Serif SC",serif;
  font-size:27px;font-weight:600;letter-spacing:6px;
  color:#2A2622;line-height:1.25;
  /* 极轻的墨色投影，让字"压"在纸上 */
  text-shadow:0 1px 0 rgba(255,255,255,.65), 0 1px 2px rgba(42,38,34,.06);
  /* letter-spacing 会在最后一个字后面也留一份空隙，用 margin-right 抵消 */
  margin-right:-6px;
}
/* 名下的装饰线：细线 + 中间小菱形 */
.brand-rule{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:9px auto 7px;max-width:200px;
}
.brand-rule span{flex:1;height:1px;background:linear-gradient(90deg,transparent,#C9B486,transparent)}
.brand-rule .dm{
  width:4px;height:4px;background:#A8843F;opacity:.7;
  transform:rotate(45deg);flex-shrink:0;
}
.brand-sub{
  font-family:"Songti SC","SimSun",serif;
  font-size:11.5px;color:#8E8271;letter-spacing:5px;margin-right:-5px;
}

/* ============ 一键识别 + 取色记录（照色小里取色页） ============ */
.ai-btn.big{
  flex-direction:column;gap:3px;padding:14px 16px;margin-bottom:12px;
  border-radius:14px;
}
.ai-btn .ai-main{font-size:15.5px;font-weight:700;letter-spacing:1px}
.ai-btn .ai-sub{font-size:11px;font-weight:400;opacity:.72;letter-spacing:.3px}

/* 识别出的候选色 */
.ai-cands{display:flex;gap:10px}
.ai-cand{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 6px;border-radius:12px;border:1px solid var(--line);background:var(--card);
}
.ai-cand .sw{width:100%;height:52px;border-radius:9px;border:1px solid rgba(0,0,0,.08)}
.ai-cand b{font-size:12px;font-family:"SF Mono",monospace;letter-spacing:.3px}
.ai-cand .pct{font-size:10.5px;color:var(--ink3)}
.ai-cand:active{background:var(--line2)}

/* 辅助调色页：实时中状态 + 引导，别让标题被挤 */
.ast-head{display:flex;align-items:center;gap:10px;margin:10px 16px 0}
.ast-head .live{font-size:11.5px}
.ast-head .ast-tip{font-size:11px;color:var(--ink3);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============ 标题版式 A：欧式花饰框（用户给的图，抠成 mask 可染色） ============ */
.brand-frame.art{padding:32px 26px 24px;max-width:100%}
.bc-art{
  position:absolute;display:block;opacity:.86;
}
.bc-art.tl{left:0;top:0;width:96px;height:auto}
.bc-art.tr{right:0;top:0;width:98px;height:auto}
.brand-rule-art{display:block;margin:4px auto 3px;width:168px;height:auto;opacity:.86}


/* ============ 标题版式 B：中式回纹边框（用 border-image 拉伸，角不变形） ============ */
.brand-frame.art2{
  position:relative;margin:0 auto;max-width:338px;
  border:26px solid transparent;
  border-image:url(../img/huiwen-frame.png) 46 fill / 26px stretch;
  padding:6px 12px 4px;text-align:center;
  background:none;
}
.brand-frame.art2 .brand-name{font-size:24px;letter-spacing:5px;margin-right:-5px}
.brand-frame.art2 .brand-sub{font-size:11px;letter-spacing:4px;margin-top:4px}

/* 智能指导的建议卡：少量多次提醒（语音反复强调的三次） */
.sug-warn{
  margin-top:10px;padding:9px 11px;border-radius:9px;font-size:11.5px;line-height:1.75;
  background:var(--zhe-bg);color:#8A6A2F;border-left:2px solid var(--zhe);
}
.sug-warn b{color:#7A5A20}

/* 补光灯提示（语音里师傅强调：必须 6500K 中性白，相当于自然光） */
.light-tip{
  margin:0 16px 12px;padding:9px 12px;border-radius:10px;font-size:11.5px;line-height:1.75;
  background:#F2F6F7;color:#4A6570;border-left:2px solid #7FA3B0;
}
.light-tip b{color:#2E5A68}

/* ============ iOS ActionSheet 风格选择菜单（照色小里实机） ============ */
.as-wrap{padding:4px 0 2px}
.as-group{background:rgba(255,255,255,.96);border-radius:14px;overflow:hidden;margin-bottom:8px}
.as-item{
  display:block;width:100%;padding:17px 18px;font-size:16px;font-weight:500;
  text-align:center;color:var(--ink);background:transparent;position:relative;
  border-bottom:1px solid rgba(0,0,0,.07);letter-spacing:.5px;
}
.as-group .as-item:last-child{border-bottom:none}
.as-item:active{background:rgba(0,0,0,.05)}
.as-cancel{
  background:#fff;border-radius:14px;font-weight:700;border-bottom:none;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.as-arrow{
  position:absolute;right:18px;top:50%;transform:translateY(-50%);
  color:var(--ink3);font-size:19px;font-weight:400;
}

/* ============ 色母库列表（照色小里：大色块 + 名称/编码 + 标签 + 着色力条） ============ */
.mat-list{padding:6px 0}
.mcard{
  display:flex;gap:13px;align-items:flex-start;
  padding:13px 15px;border-bottom:1px solid var(--line2);cursor:pointer;
}
.mcard:last-child{border-bottom:none}
.mcard:active{background:#FCFAF6}
.msw{
  width:56px;height:56px;border-radius:13px;flex-shrink:0;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.mbody{flex:1;min-width:0}
.mtop{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mname{font-size:14.5px;font-weight:600;letter-spacing:.4px}
.mcode{
  font-size:11px;font-family:"SF Mono",monospace;padding:1px 7px;border-radius:5px;
  background:var(--line2);color:var(--ink2);letter-spacing:.3px;
}
.mtags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.mtag{font-size:10.5px;padding:2px 7px;border-radius:5px;letter-spacing:.3px}
.mtag.cat{background:#EAF0F2;color:var(--qing)}
.mtag.den{background:#EAF3EE;color:#2E6B4A}
.mts{display:flex;align-items:center;gap:8px;margin-top:8px}
.mts-lb{font-size:10.5px;color:var(--ink3);flex-shrink:0}
.mts-bar{
  flex:1;height:4px;border-radius:2px;background:var(--line2);overflow:hidden;
  max-width:150px;
}
.mts-bar i{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,#8E7BC8,#6B5BA8)}
.mts-num{font-size:11px;color:var(--ink2);font-family:"SF Mono",monospace;flex-shrink:0}

/* ---- 批量调色（v5.1） ---- */
.bt-toolbar{display:flex;gap:10px;margin:12px 16px 0}
.bt-summary{margin:12px 16px 0;font-size:12.5px;color:var(--ink2)}
.bt-prog{height:4px;background:var(--line2);border-radius:2px;margin-top:6px;overflow:hidden}
.bt-prog i{display:block;height:100%;background:var(--qing);border-radius:2px;transition:width .3s}
.bt-card{margin:10px 16px 0}
.bt-top{display:flex;align-items:center;gap:12px}
.bt-sw{width:52px;height:52px;border-radius:12px;border:1px solid var(--line);flex:none;cursor:pointer}
.bt-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.bt-hex{font-family:monospace;font-weight:600;font-size:14px;cursor:pointer}
.bt-de{font-size:11.5px;color:var(--ink3)}
.bt-de.ok{color:var(--lv);font-weight:600}
.bt-de.warn{color:#B07C2A;font-weight:600}
.bt-de.bad{color:var(--zhu);font-weight:600}
.bt-del{color:var(--ink3);font-size:15px;padding:6px;flex:none}
.bt-recipe{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.bt-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink2);
  background:var(--line2);border-radius:8px;padding:3px 8px}
.bt-chip i{width:10px;height:10px;border-radius:3px;border:1px solid rgba(0,0,0,.1)}
.bt-more{font-size:11.5px;color:var(--ink3);align-self:center}
.bt-act{display:flex;gap:10px;margin-top:10px}
.bt-act button{flex:1;border:1px solid var(--line);border-radius:10px;padding:7px 0;font-size:13px;
  color:var(--qing);background:var(--card)}
.bt-act button:active{background:var(--line2)}