html[data-theme]{
  --bg:#f5f6f8;--surface:#ffffff;--surface-2:#f1f3f7;
  --line:rgba(15,23,42,.07);--line-2:rgba(15,23,42,.12);
  --text:#0f172a;--dim:#5c6577;--faint:#8d95a6;
  --inset:#f7f8fa;--panel:#ffffff;--img-bg:#f1f3f7;
  --toast-bg:#0f172a;--toast-text:#fff;
  --top-bg:rgba(255,255,255,.72);--bar-bg:rgba(255,255,255,.88);
  --overlay-bg:rgba(15,23,42,.32);--viewer-bg:rgba(9,12,20,.92);
  --scroll-thumb:rgba(15,23,42,.16);--bg-image:none;--bg-size:auto;
  --shadow:0 14px 34px -14px rgba(16,24,40,.30);
  --danger:#e11d48;--ok:#059669;--wechat:#07c160;--fav:#f43f5e;--surcharge:#b45309;
  --ink:#0f172a;--btn-bg:linear-gradient(180deg,#26313f,#0b1220);
  --btn-shadow:0 12px 24px -14px rgba(15,23,42,.60);--on-btn:#fff;
  --ease:cubic-bezier(.32,.72,0,1);
  --accent:#4f46e5;--accent-line:rgba(79,70,229,.26);--accent-soft:rgba(79,70,229,.07);--on-accent:#fff;
  --s-shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --s-shadow-md:0 10px 26px -16px rgba(16,24,40,.30);
  --s-shadow-lg:0 24px 60px -24px rgba(16,24,40,.35);
}
html[data-theme="ocean"]{--accent:#0284c7;--accent-line:rgba(2,132,199,.26);--accent-soft:rgba(2,132,199,.07)}
html[data-theme="purple"]{--accent:#7c3aed;--accent-line:rgba(124,58,237,.26);--accent-soft:rgba(124,58,237,.07)}
html[data-theme="forest"]{--accent:#059669;--accent-line:rgba(5,150,105,.26);--accent-soft:rgba(5,150,105,.07)}
html[data-theme="wine"]{--accent:#e11d48;--accent-line:rgba(225,29,72,.26);--accent-soft:rgba(225,29,72,.07)}
html[data-theme="light"]{--accent:#4f46e5;--accent-line:rgba(79,70,229,.26);--accent-soft:rgba(79,70,229,.07)}
html[data-theme="night"]{
  --bg:#0b0f16;--surface:#131926;--surface-2:#1a2130;
  --line:rgba(255,255,255,.07);--line-2:rgba(255,255,255,.13);
  --text:#e6e9f2;--dim:#9aa3b5;--faint:#6b7488;
  --inset:#0f1520;--panel:#131926;--img-bg:#1a2130;
  --top-bg:rgba(11,15,22,.78);--bar-bg:rgba(19,25,38,.92);
  --overlay-bg:rgba(0,0,0,.62);--toast-bg:#e6e9f2;--toast-text:#0b0f16;
  --scroll-thumb:rgba(255,255,255,.16);--shadow:0 20px 48px -20px rgba(0,0,0,.7);
  --accent:#8b8cf0;--accent-line:rgba(139,140,240,.34);--accent-soft:rgba(139,140,240,.12);
  --on-accent:#0b0f16;--ink:#e6e9f2;
  --btn-bg:linear-gradient(180deg,#e8ebf5,#b9c1d4);--on-btn:#0b0f16;
  --btn-shadow:0 12px 26px -14px rgba(139,140,240,.5);
}

body{background:var(--bg);background-image:none;color:var(--text)}
.top{background:var(--top-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line)}
.brand{padding:12px 14px 11px;gap:9px}
.brand-mark{width:36px;height:36px;border-radius:11px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--s-shadow-sm)}
.brand h1{font-size:16px;letter-spacing:-.2px}
.brand .sub{font-size:9px;letter-spacing:1.4px;color:var(--faint)}
.status{background:var(--surface);border:1px solid var(--line);color:var(--dim);box-shadow:var(--s-shadow-sm)}
.status i{background:var(--ok);box-shadow:0 0 0 3px rgba(5,150,105,.14)}
.icon-btn{width:33px;height:33px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--dim);box-shadow:var(--s-shadow-sm)}
.icon-btn:hover{background:var(--surface-2);border-color:var(--line-2);color:var(--text)}
.ticker{height:28px;border-top:1px solid var(--line);background:var(--surface)}
.ticker-item{color:var(--faint)}

.nav{width:92px;background:var(--surface);border-right:1px solid var(--line);padding:10px 0 120px}
.nav-item{margin:4px 8px;padding:12px 6px;border-radius:12px;font-size:12px;font-weight:600;color:var(--faint);border:1px solid transparent;transition:.18s var(--ease)}
.nav-item:hover{background:var(--surface-2);color:var(--dim)}
.nav-item.active{background:var(--ink);color:var(--bg);border-color:transparent;box-shadow:0 8px 18px -10px rgba(15,23,42,.5)}
.nav-item.active::before{display:none}
.nav-item.active .nav-count{color:var(--bg)}
.nav-sep{background:var(--line);margin:10px 16px}
.nav-tool{margin:4px 8px;padding:10px 6px;border-radius:12px;font-size:11.5px;color:var(--faint);border:1px dashed var(--line-2);background:var(--surface)}
.nav-tool:hover{color:var(--ink);border-color:var(--ink);background:var(--surface-2)}

.content{padding:12px 14px 132px}
.search-box{padding:8px 0 14px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 74%,transparent 100%)}
.search-input-wrap{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--s-shadow-sm);transition:.18s}
.search-input-wrap:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 4px var(--accent-soft)}
.search-clear{background:var(--surface-2)}
.search-history,.suggest-box{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--s-shadow-md)}
.history-tag{background:var(--surface-2);border:1px solid var(--line);color:var(--dim)}
.history-tag:hover{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}

.section-title{font-size:13px;letter-spacing:.2px}
.section-title::before{background:var(--ink);height:12px}
.sort-btn,.filter-btn{background:var(--surface);border:1px solid var(--line);color:var(--dim);box-shadow:var(--s-shadow-sm)}
.sort-btn:hover,.filter-btn:hover{background:var(--surface-2)}
.sort-btn.active,.filter-btn.active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.sub-title::before{background:var(--ink)}

.r-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--s-shadow-sm);transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s}
@media (hover:hover){.r-card:hover{transform:translateY(-3px);border-color:var(--line-2);box-shadow:var(--s-shadow-md)}}
.r-name{font-weight:650;letter-spacing:-.1px}
.r-desc{color:var(--faint)}
.r-kefu{background:var(--surface-2);border:1px solid var(--line);color:var(--dim)}
.r-btn{background:var(--ink);color:var(--bg);border:1px solid var(--ink);border-radius:8px;font-weight:600;box-shadow:0 6px 14px -10px rgba(15,23,42,.6)}
.r-card:hover .r-btn{background:var(--ink);color:var(--bg)}
.fav-btn.fav-sm{background:var(--surface);border:1px solid var(--line);color:var(--faint)}
.fav-btn.fav-sm.active{background:rgba(244,63,94,.1);border-color:rgba(244,63,94,.35);color:var(--fav)}

.btn-primary{background:var(--btn-bg);color:var(--on-btn);border-radius:12px;font-weight:700;letter-spacing:0;box-shadow:var(--btn-shadow)}
.btn-accent{background:var(--btn-bg);color:var(--on-btn);border-radius:12px;font-weight:700;box-shadow:var(--btn-shadow)}
.btn-ghost{background:var(--surface);border:1px solid var(--line-2);color:var(--dim);border-radius:12px;font-weight:600}
.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn-danger{background:rgba(225,29,72,.08);border:1px solid rgba(225,29,72,.24);color:#be123c;border-radius:12px}

footer.bar{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));padding:10px 12px 10px 16px;border-radius:18px;background:var(--bar-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--line-2);box-shadow:0 18px 40px -18px rgba(16,24,40,.42)}
.bar-price{font-size:20px;letter-spacing:-.6px}
.fab{right:16px;bottom:calc(96px + env(safe-area-inset-bottom));border-radius:15px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--s-shadow-md)}
.fab.has-items{background:var(--ink)}
.fab.has-items svg{fill:var(--bg)}
.badge{background:var(--ink);color:var(--bg);border-color:var(--bg)}
.fab.has-items .badge{background:var(--bg);color:var(--ink);border-color:var(--ink)}
.back-top{right:16px;bottom:calc(158px + env(safe-area-inset-bottom));border-radius:15px;background:var(--surface);border:1px solid var(--line-2);box-shadow:var(--s-shadow-md)}

.overlay{background:var(--overlay-bg);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal{background:var(--panel);border:1px solid var(--line-2);border-radius:20px;box-shadow:var(--s-shadow-lg)}
.sheet{background:var(--panel);border-radius:22px 22px 0 0}
.theme-panel{background:var(--panel);border:1px solid var(--line-2);box-shadow:var(--s-shadow-lg)}
.email-input,.email-textarea,.ticket-form input,.ticket-form textarea,.coupon-input-row input,.redeem-input-row input,.cloud-query-card input{background:var(--surface);border:1px solid var(--line-2);color:var(--text);border-radius:11px}
.email-input:focus,.email-textarea:focus,.coupon-input-row input:focus,.redeem-input-row input:focus{border-color:var(--accent-line);box-shadow:0 0 0 4px var(--accent-soft);outline:none}
.remark{background:var(--inset);border:1px dashed var(--line-2);color:var(--dim)}
.spec{background:var(--surface);border:1px solid var(--line);border-radius:12px}
.spec:hover{background:var(--surface-2)}
.spec.active{background:var(--accent-soft);border-color:var(--accent)}
.spec-opt{background:var(--surface);border:1px solid var(--line)}
.spec-opt.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.pay-choose-btn,.pay-tab,.info-step,.faq-item,.order-item,.coupon-item,.ticket-item,.kefu-script,.rel-item,.cart-item{background:var(--surface);border:1px solid var(--line)}
.pay-choose-btn:hover,.pay-tab:hover,.faq-q:hover{background:var(--surface-2)}
.pay-tab.active{background:var(--accent-soft);border-color:var(--accent)}
.warn{background:rgba(225,29,72,.07);border:1px solid rgba(225,29,72,.2);color:#b91c1c}
.warn.surcharge,.surcharge-tip{background:rgba(180,83,9,.08);border:1px solid rgba(180,83,9,.22);color:#a16207}
html[data-theme="night"] .warn{color:#fca5a5}
html[data-theme="night"] .warn.surcharge,html[data-theme="night"] .surcharge-tip{color:#fbbf24}
.toast{background:var(--toast-bg);color:var(--toast-text);border:none;border-radius:12px}
.empty .empty-btn{background:var(--ink);border-color:var(--ink);color:var(--bg)}

.ux-action,.ux-panel,.ux-order-card,.ux-cloud-order-card,.ux-order-empty{background:var(--surface);border:1px solid var(--line);box-shadow:var(--s-shadow-sm)}
.ux-action-icon{background:var(--surface-2);border:1px solid var(--line)}
.ux-order-status{background:var(--surface-2);color:var(--text)}
.ux-shipping-info{background:var(--inset);border:1px solid var(--line)}

@media (max-width:680px){
  #uxBottomNav{grid-template-columns:repeat(4,1fr)!important;background:var(--top-bg)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--line)!important;padding:6px 10px calc(6px + env(safe-area-inset-bottom))!important}
  #uxBottomNav button{color:var(--faint);font-size:10.5px}
  #uxBottomNav button.active{color:var(--ink);background:var(--surface-2)}
  footer.bar{left:10px;right:10px;bottom:calc(68px + env(safe-area-inset-bottom));padding:8px 10px 8px 14px;border-radius:16px}
  .fab{bottom:calc(136px + env(safe-area-inset-bottom))}
  .back-top{bottom:calc(198px + env(safe-area-inset-bottom))}
  .content{padding-bottom:120px}
}

/* ---- 补丁新增：工具栏 / 筛选 / 对比 / 最近浏览 ---- */
.saas-hide{display:none!important}
.saas-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 10px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--s-shadow-sm)}
.saas-seg{display:flex;gap:4px;padding:3px;background:var(--surface-2);border-radius:9px}
.saas-seg button{border:0;background:transparent;color:var(--dim);font:inherit;font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:7px;cursor:pointer}
.saas-seg button.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(16,24,40,.12)}
.saas-chips{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.saas-chips::-webkit-scrollbar{display:none}
.saas-chips button{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--dim);font:inherit;font-size:11px;padding:5px 10px;border-radius:99px;cursor:pointer;white-space:nowrap}
.saas-chips button.active{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600}
.saas-recent{margin-bottom:10px}
.saas-recent-h{font-size:11px;color:var(--faint);margin-bottom:6px;padding-left:2px}
.saas-recent-track{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.saas-recent-track::-webkit-scrollbar{display:none}
.saas-recent-item{flex:none;max-width:170px;border:1px solid var(--line);background:var(--surface);color:var(--dim);font:inherit;font-size:11.5px;padding:7px 11px;border-radius:99px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--s-shadow-sm)}
.saas-recent-item:hover{border-color:var(--line-2);color:var(--text)}
.saas-cmp-btn{border:1px solid var(--line);background:var(--surface-2);color:var(--faint);font:inherit;font-size:10.5px;padding:4px 8px;border-radius:7px;cursor:pointer}
.saas-cmp-btn.on{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600}
.compare-bar{left:12px;right:12px;bottom:calc(96px + env(safe-area-inset-bottom));background:var(--panel);border:1px solid var(--line-2);box-shadow:var(--s-shadow-md);border-radius:14px}
.compare-bar b{color:inherit}
.compare-bar button{background:var(--ink);color:var(--bg);border-radius:8px;font-weight:700}
.compare-bar .cb-close{background:transparent;color:var(--faint);border:1px solid var(--line)}
.saas-cmp-row{display:grid;gap:1px;margin-bottom:1px;background:var(--line)}
.saas-cmp-row>div{background:var(--surface);padding:9px 10px;font-size:12px;line-height:1.5;text-align:left;word-break:break-word}
.saas-cmp-k{color:var(--faint);font-size:11px!important;background:var(--inset)!important}
.saas-cmp{margin-bottom:14px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.suggest-box{position:absolute;left:0;right:0;top:calc(100% - 8px);z-index:30;display:none;padding:6px;max-height:260px;overflow-y:auto}
.suggest-box.show{display:block}
.suggest-item{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:8px;font-size:12px;color:var(--dim);cursor:pointer}
.suggest-item em{font-style:normal;font-size:10px;color:var(--faint);flex:none}
.suggest-item:hover{background:var(--accent-soft);color:var(--accent)}
.offline-bar{position:fixed;top:0;left:0;right:0;z-index:100001;padding:6px;text-align:center;background:#e11d48;color:#fff;font-size:11.5px;display:none}
.offline-bar.show{display:block}
.saas-camp{display:flex;align-items:center;gap:8px;padding:8px 12px;margin-bottom:10px;border-radius:10px;background:var(--accent-soft);border:1px solid var(--accent-line);font-size:11.5px;color:var(--dim)}
.saas-camp b{color:var(--accent);font-family:var(--mono)}