/* sms688 UI 2026-10 · catalog workspace */
:root{
  --workspace-nav:244px;
  --mx-bg:#f3f5f8;
  --mx-surface:#ffffff;
  --mx-surface-2:#f8f9fc;
  --mx-ink:#111827;
  --mx-body:#4b5565;
  --mx-mute:#6b7485;
  --mx-line:#dfe4ec;
  --mx-line-strong:#cbd3df;
  --mx-accent:#2557d6;
  --mx-accent-2:#1744b8;
  --mx-accent-soft:#eef3ff;
  --mx-navy:#0b1524;
  --mx-navy-2:#12213a;
  --mx-side-bg:#fbfcff;
  --mx-side-line:#e4e9f2;
  --mx-side-text:#5b677b;
  --mx-side-strong:#111827;
  --mx-side-hover:#eef3fb;
  --mx-side-active:#e9f0ff;
  --mx-side-active-line:#d3e0fb;
  --mx-warn:#8a4b08;
  --mx-warn-bg:#fff8e9;
  --mx-warn-line:#efd3a0;
  --mx-ok:#0d7a53;
  --mx-radius:12px;
  --mx-shadow:0 1px 2px rgba(17,24,39,.04),0 10px 30px rgba(17,24,39,.04);
}
/* Dark tokens: switch the whole component set at the variable level. */
[data-theme="dark"]{
  --mx-bg:#0d121b;
  --mx-surface:#151d2a;
  --mx-surface-2:#101824;
  --mx-ink:#eef3fb;
  --mx-body:#b9c5d6;
  --mx-mute:#93a4ba;
  --mx-line:#293447;
  --mx-line-strong:#33435b;
  --mx-accent:#7fa8f0;
  --mx-accent-2:#9ebdff;
  --mx-accent-soft:#1c2e52;
  --mx-side-bg:#0f1724;
  --mx-side-line:#243044;
  --mx-side-text:#b8c5d8;
  --mx-side-strong:#ffffff;
  --mx-side-hover:#14243b;
  --mx-side-active:#172b49;
  --mx-side-active-line:#294570;
  --mx-warn:#f0c860;
  --mx-warn-bg:#2a2113;
  --mx-warn-line:#5b4624;
  --mx-ok:#4ac58f;
  --mx-shadow:0 1px 2px rgba(0,0,0,.18),0 12px 34px rgba(0,0,0,.16);
}
html{background:var(--mx-bg)}
body{background:var(--mx-bg);color:var(--mx-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
.workspace .app{grid-template-columns:var(--workspace-nav) minmax(0,1fr)}
.workspace .app>aside{
  background:var(--mx-side-bg);
  border-right:1px solid var(--mx-side-line);
  padding:20px 13px;
  color:var(--mx-side-text);
  box-shadow:1px 0 0 rgba(17,24,39,.02);
}
.workspace .brand{
  color:var(--mx-side-strong);
  font-size:19px;
  letter-spacing:-.35px;
  padding:2px 12px 20px;
  gap:11px;
}
.workspace .brand .logo{width:34px;height:34px;border-radius:10px}
.workspace .workspace-nav-label{
  color:#8a94a6;
  font-size:9.5px;
  letter-spacing:1.55px;
  padding:19px 12px 7px;
}
.workspace .workspace-nav-group .nav{
  color:var(--mx-side-text);
  min-height:39px;
  padding:9px 12px;
  border-radius:8px;
  gap:11px;
  font-size:13px;
}
.workspace aside a.nav:hover{background:var(--mx-side-hover);color:#1f2b45}
.workspace aside a.nav.on{
  background:var(--mx-side-active);
  color:#1f4fc4;
  box-shadow:inset 0 0 0 1px var(--mx-side-active-line);
}
.workspace aside>a.nav{color:#6b7485;font-size:12px}
.workspace aside .side-user{border-top-color:var(--mx-side-line);margin-top:18px;padding:15px 11px 4px}
.workspace aside .side-user-name{color:var(--mx-side-strong);font-size:12.5px}
.workspace aside .side-user-bal{color:#6b7485}
.workspace aside .side-user-bal b{color:var(--mx-side-strong)}
.workspace .app>main{
  padding:0 30px 48px;
  width:100%;
  max-width:1760px;
  margin:0 auto;
}
.workspace-toolbar{
  height:74px;
  margin-bottom:24px;
  border-bottom:1px solid var(--mx-line);
  background:rgba(243,245,248,.92);
  backdrop-filter:blur(12px);
  position:sticky;
  top:0;
  z-index:90;
}
.workspace-location>span{font-size:9.5px;letter-spacing:1.35px;color:var(--mx-mute)}
.workspace-location>strong{font-size:14.5px;color:var(--mx-ink)}
.workspace-search{
  border-radius:8px;
  border-color:var(--mx-line);
  background:#fff;
  color:var(--mx-mute);
  box-shadow:0 1px 2px rgba(17,24,39,.03);
}
.workspace-search:hover{border-color:var(--mx-line-strong);color:var(--mx-body)}
.workspace-admin{color:var(--mx-accent);font-weight:600}
.workspace-eyebrow{color:var(--mx-accent);letter-spacing:1.75px;font-size:9.5px}
.workspace #v-buy>.top{align-items:flex-end;gap:16px;margin-bottom:16px}
.workspace #v-buy h2{font-size:30px;line-height:1.15;letter-spacing:-1.15px;font-weight:700;color:var(--mx-ink)}
.workspace #v-buy>.top>.mut{font-size:12.5px;color:var(--mx-mute)}
.workspace .purchase-steps{gap:18px;margin:0 0 18px;font-size:11.5px;color:var(--mx-mute)}
.workspace .purchase-steps li{gap:7px;padding-right:18px;border-right:1px solid var(--mx-line)}
.workspace .purchase-steps li:last-child{border-right:0}
.workspace .purchase-steps b{width:20px;height:20px;background:#fff;border:1px solid var(--mx-line-strong);color:var(--mx-body);font-weight:600}

/* Policy notice */
.mx-policy{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:13px;
  align-items:center;
  padding:14px 16px;
  margin:0 0 18px;
  background:var(--mx-warn-bg);
  border:1px solid var(--mx-warn-line);
  border-radius:10px;
  color:#59401f;
}
.mx-policy-icon{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:#f5c76e;color:#5b3700;font-weight:800;font-size:15px;
}
.mx-policy strong{display:block;font-size:13px;color:#4e3110;margin-bottom:2px}
.mx-policy p{margin:0;font-size:12px;line-height:1.55;color:#73542d}
.mx-policy p b{color:#9d2f20;font-weight:700}
.mx-policy button{
  border:1px solid #d8b36e;background:#fffaf0;color:#65451e;
  border-radius:7px;padding:7px 11px;font-size:11.5px;font-weight:600;white-space:nowrap;
}
.mx-policy button:hover{background:#fff;border-color:#b98532}

/* Project finder */
.mx-finder{
  background:var(--mx-surface);
  border:1px solid var(--mx-line);
  border-radius:var(--mx-radius);
  box-shadow:var(--mx-shadow);
  padding:18px 18px 16px;
  margin-bottom:18px;
}
.mx-finder-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:14px}
.mx-kicker{display:block;font-size:9.5px;letter-spacing:1.65px;color:var(--mx-accent);font-weight:700;margin-bottom:4px}
.mx-finder-head h3{margin:0;font-size:19px;letter-spacing:-.35px;color:var(--mx-ink)}
.mx-finder-head p{margin:0 0 1px auto;font-size:11.5px;color:var(--mx-mute)}
.workspace .mx-finder .srow{
  display:grid;
  grid-template-columns:minmax(0,1fr) 180px 205px;
  gap:10px;
  margin:0 0 14px;
}
.workspace .mx-finder #q{
  height:46px;
  padding:0 15px;
  border-radius:9px;
  border-color:var(--mx-line-strong);
  background:#fff;
  font-size:13.5px;
  box-shadow:none;
}
.workspace .mx-finder #q:focus{border-color:#6d91ea;box-shadow:0 0 0 3px rgba(37,87,214,.10)}
.workspace .mx-finder #sort{
  height:46px;
  max-width:none;
  border-radius:9px;
  border-color:var(--mx-line);
  background:var(--mx-surface-2);
  color:var(--mx-body);
  font-size:12px;
}
.workspace .mx-finder #ctSelect{
  height:46px;
  max-width:none;
  padding:0 12px;
  border-radius:9px;
  border-color:var(--mx-line);
  background:var(--mx-surface-2);
  color:var(--mx-body);
  font-size:12px;
}
.workspace .mx-finder #ctSelect:focus{border-color:#6d91ea;box-shadow:0 0 0 3px rgba(37,87,214,.10)}
.mx-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mx-cat{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-height:58px;
  padding:9px 10px;
  border:1px solid var(--mx-line);
  border-radius:9px;
  background:#fff;
  color:var(--mx-ink);
  text-align:left;
  transition:border-color .14s,background .14s,transform .14s;
}
.mx-cat:hover{border-color:#aebddf;background:#fbfcff;transform:translateY(-1px)}
.mx-cat.on{background:#eef3ff;border-color:#b9cdf7;color:#1f4fc4;box-shadow:inset 0 0 0 1px #d7e3ff}
.mx-cat-icon{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  background:var(--mx-accent-soft);color:var(--mx-accent);font-size:10px;font-weight:800;letter-spacing:.2px;
}
.mx-cat.on .mx-cat-icon{background:#dfe9ff;color:#2557d6}
.mx-cat-copy{min-width:0}
.mx-cat-copy b{display:block;font-size:12.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-cat-copy small{display:block;font-size:9.5px;color:var(--mx-mute);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-cat.on .mx-cat-copy small{color:#5a7fbd}
.mx-cat-count{font:600 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--mx-mute);font-variant-numeric:tabular-nums}
.mx-cat.on .mx-cat-count{color:#2f5bb7}
.mx-hotrow{display:flex;align-items:center;gap:9px;margin-top:12px;padding-top:12px;border-top:1px solid #edf0f5;min-width:0}
.mx-hotlabel{font-size:9.5px;letter-spacing:1px;color:var(--mx-mute);font-weight:700;white-space:nowrap}
.mx-hot{display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
.mx-hot::-webkit-scrollbar{display:none}
.mx-hot button{
  flex:0 0 auto;
  white-space:nowrap;
  border:1px solid var(--mx-line);
  background:var(--mx-surface-2);
  color:var(--mx-body);
  border-radius:999px;
  padding:5px 9px;
  font-size:10.5px;
  white-space:nowrap;
}
.mx-hot button:hover{border-color:#aabbdf;color:var(--mx-accent);background:#fff}


/* Catalog */
.workspace .buylayout{grid-template-columns:minmax(0,1fr) 338px;gap:18px}
.workspace .side{width:338px;position:sticky;top:92px}
.workspace .card{border-radius:var(--mx-radius);border-color:var(--mx-line);box-shadow:var(--mx-shadow);background:var(--mx-surface)}
.workspace .card>.hd{
  min-height:48px;
  padding:12px 16px;
  font-size:11.5px;
  letter-spacing:.15px;
  color:var(--mx-body);
  background:#fff;
  border-bottom-color:var(--mx-line);
}
.workspace #cnt{color:var(--mx-ink);font-weight:650}
.workspace #list>.row{
  grid-template-columns:38px minmax(0,1fr) 94px 56px 90px 12px;
  gap:12px;
  min-height:66px;
  padding:12px 16px;
  border-left:0;
  border-bottom:1px solid #edf0f5;
}
.workspace #list>.row:hover{background:#f8faff}
.workspace #list>.row.on{background:#f4f7ff;border-left:0;box-shadow:inset 0 0 0 1px #c9d8fb}
.workspace #list>.row::after{
  content:"";
  width:7px;height:7px;
  border-right:1.5px solid #9aa6b8;border-top:1.5px solid #9aa6b8;
  transform:rotate(45deg);
  align-self:center;justify-self:center;
}
.mx-mark{
  width:36px;height:36px;border-radius:9px;
  display:grid;place-items:center;
  font:700 10px/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:.2px;
  background:#eef2f8;color:#526174;
  border:1px solid #e2e7ef;
}
.mx-mark[data-tone="0"]{background:#eef3ff;color:#2557d6;border-color:#d9e3ff}
.mx-mark[data-tone="1"]{background:#eef9f4;color:#0d7a53;border-color:#d5efe5}
.mx-mark[data-tone="2"]{background:#fff5eb;color:#9a5a12;border-color:#f5e1c8}
.mx-mark[data-tone="3"]{background:#f8f0ff;color:#7342a8;border-color:#eadcf7}
.mx-mark[data-tone="4"]{background:#fff1f2;color:#a63b47;border-color:#f4d9dc}
.workspace #list .namecell{gap:12px;max-width:none}
.workspace #list .namebox{max-width:none;flex:1 1 auto;min-width:0}
.workspace #list .nm{font-size:14px;font-weight:650;letter-spacing:-.15px;color:var(--mx-ink)}
.workspace #list .sub{font-size:10.5px;color:var(--mx-mute);margin-top:4px}
.mx-cat-inline{
  display:inline-block;margin-left:7px;padding:1px 5px;border-radius:4px;
  background:#f0f3f8;color:#637086;font-size:9px;font-weight:600;vertical-align:1px;
}
.workspace #list .desc{
  color:var(--mx-mute);
  font-size:10.5px;
  line-height:1.55;
  max-width:440px;
  display:none;
}
.workspace #list>.row>.st{font-size:11px;color:var(--mx-body);font-variant-numeric:tabular-nums;text-align:right}
.workspace #list>.row>.st:first-of-type{font-weight:600;color:var(--mx-ink)}
.workspace #list .pr{font-size:14px;font-weight:700;color:var(--mx-accent);font-variant-numeric:tabular-nums;text-align:right;letter-spacing:-.2px}
.workspace #list>.row.is-empty{opacity:.72}
.workspace #list>.row.is-empty .pr{color:#8591a4}
.workspace #more{color:var(--mx-accent);justify-content:center;cursor:pointer;background:#fbfcff;font-weight:600}

/* Order panel */
.workspace .side .card{margin-bottom:12px}
.workspace .side .card>.hd{
  background:#fff;
  color:var(--mx-ink);
  font-size:12px;
  font-weight:650;
  justify-content:space-between;
}
.workspace .side .card>.hd .mut{font-size:9.5px;color:var(--mx-mute);font-weight:400}
.workspace .side .sum{padding:15px 16px}
.workspace .side .kv{font-size:11.5px;color:var(--mx-mute)}
.workspace .side .kv .v{font-size:11.5px;color:var(--mx-ink);font-weight:600}
.workspace #tierBox .chip,
.workspace #pfInline .chip{font-size:10.5px;padding:6px 8px;border-radius:6px}
.workspace #pfSearch{height:34px;border-radius:7px}
.workspace .qty{border:1px solid var(--mx-line);border-radius:7px;overflow:hidden}
.workspace .qty button{background:#f7f8fb;color:var(--mx-body)}
.workspace .qty input{background:#fff}
.workspace .side .total{padding:13px 16px;border-top:1px solid var(--mx-line);background:#fbfcff}
.workspace .side .total .k{font-size:11.5px;color:var(--mx-mute)}
.workspace .side .total b{font-size:22px;color:var(--mx-ink);letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.mx-order-note{
  margin:0 16px 10px;padding:9px 10px;
  border:1px solid var(--mx-warn-line);border-radius:7px;
  background:var(--mx-warn-bg);color:#6d4a1b;font-size:10px;line-height:1.5;
}
.mx-order-note b{display:block;color:#972d20;font-size:10.5px}
.workspace .side .buy{
  width:calc(100% - 32px);
  min-height:46px;
  margin:0 16px 12px;
  border-radius:8px;
  background:var(--mx-accent);
  color:#fff;
  font-size:13px;
  letter-spacing:.1px;
  box-shadow:0 7px 16px rgba(18,33,58,.15);
}
.workspace .side .buy:hover{background:var(--mx-accent-2)}
.workspace .side #abBuyBtn{font-size:11px!important;border-radius:8px!important}
.workspace #pfTip{font-size:10.5px!important;color:var(--mx-mute)!important}
.workspace #pfBox .chip{font-size:10.5px}

/* Tables in account pages */
.workspace table{font-size:12px}
.workspace th{font-size:10px;letter-spacing:.25px;color:var(--mx-mute);background:#f7f8fb}
.workspace td{padding:11px 12px;border-color:#edf0f5}
.workspace tbody tr:hover{background:#f8faff}

/* Rule dialog */
.mx-dialog-mask{position:fixed;inset:0;z-index:20000;background:rgba(8,17,31,.58);display:grid;place-items:center;padding:16px;backdrop-filter:blur(3px)}
.mx-dialog{
  width:min(560px,100%);max-height:88dvh;overflow:auto;background:#fff;color:var(--mx-ink);
  border:1px solid var(--mx-line);border-radius:14px;box-shadow:0 28px 80px rgba(8,17,31,.3);padding:22px;
}
.mx-dialog-head{display:flex;gap:13px;align-items:flex-start;margin-bottom:15px}
.mx-dialog-mark{width:38px;height:38px;border-radius:50%;background:var(--mx-warn-bg);border:1px solid var(--mx-warn-line);color:var(--mx-warn);display:grid;place-items:center;font-weight:800;flex:none}
.mx-dialog h3{margin:0 0 4px;font-size:19px;letter-spacing:-.35px}
.mx-dialog .mx-dialog-sub{margin:0;color:var(--mx-mute);font-size:11.5px}
.mx-rule-list{display:grid;gap:8px;margin:14px 0 18px}
.mx-rule{display:grid;grid-template-columns:24px 1fr;gap:9px;align-items:flex-start;padding:10px 11px;border:1px solid var(--mx-line);border-radius:8px;background:#fbfcfe}
.mx-rule i{font-style:normal;width:22px;height:22px;border-radius:50%;background:#eef3ff;color:var(--mx-accent);display:grid;place-items:center;font-size:10px;font-weight:800}
.mx-rule b{display:block;font-size:12px;margin-bottom:2px}
.mx-rule span{display:block;font-size:11px;line-height:1.55;color:var(--mx-mute)}
.mx-rule.danger{border-color:#f0d6d6;background:#fff8f8}
.mx-rule.danger i{background:#feecec;color:#b73a3a}
.mx-rule.danger b{color:#9f2f2f}
.mx-dialog-actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.mx-dialog-actions button{min-height:40px;border-radius:8px;padding:0 16px;font-size:12px;font-weight:600}
.mx-dialog-actions .ghost{background:#fff;border:1px solid var(--mx-line-strong);color:var(--mx-body)}
.mx-dialog-actions .primary{background:var(--mx-accent);border:1px solid var(--mx-accent);color:#fff}
.mx-dialog-actions .warn{background:#a44b16;border:1px solid #a44b16;color:#fff}
.mx-dialog-actions button:hover{filter:brightness(1.04)}

/* Dark theme */
[data-theme="dark"] body{background:#0d121b;color:#e7edf6}
[data-theme="dark"] .workspace .app>aside{background:#0f1724;border-color:#243044;color:#b8c5d8;box-shadow:none}
[data-theme="dark"] .workspace .brand{color:#fff}
[data-theme="dark"] .workspace .workspace-nav-label{color:#7286a2}
[data-theme="dark"] .workspace .workspace-nav-group .nav{color:#b8c5d8}
[data-theme="dark"] .workspace aside a.nav:hover{background:#14243b;color:#fff}
[data-theme="dark"] .workspace aside a.nav.on{background:#172b49;color:#fff;box-shadow:inset 0 0 0 1px #294570}
[data-theme="dark"] .workspace aside>a.nav{color:#95a7bf}
[data-theme="dark"] .workspace aside .side-user{border-color:#1d304c}
[data-theme="dark"] .workspace aside .side-user-name{color:#fff}
[data-theme="dark"] .workspace aside .side-user-bal{color:#8194ad}
[data-theme="dark"] .workspace aside .side-user-bal b{color:#fff}
[data-theme="dark"] .workspace-toolbar{background:rgba(13,18,27,.92);border-color:#273142}
[data-theme="dark"] .workspace #v-buy h2,[data-theme="dark"] .workspace-location>strong{color:#f3f6fb}
[data-theme="dark"] .mx-finder,[data-theme="dark"] .workspace .card,[data-theme="dark"] .mx-cat{background:#151d2a;border-color:#293447}
[data-theme="dark"] .mx-cat.on{background:#20375e;border-color:#2d4a79}
[data-theme="dark"] .mx-cat.on{color:#d7e5ff}
[data-theme="dark"] .mx-cat.on .mx-cat-copy small,
[data-theme="dark"] .mx-cat.on .mx-cat-count{color:#c1d4f5}
[data-theme="dark"] .mx-cat-icon{background:#1c2e52;color:#9ebdff}
[data-theme="dark"] .workspace #list>.row{border-bottom-color:#263143}
[data-theme="dark"] .workspace #list>.row:hover{background:#182233}
[data-theme="dark"] .workspace #list>.row.on{background:#192844}
[data-theme="dark"] .workspace #list .nm,[data-theme="dark"] .workspace .side .kv .v,[data-theme="dark"] .workspace .side .total b{color:#eef3fb}
[data-theme="dark"] .workspace #list .sub,[data-theme="dark"] .workspace #list .desc,[data-theme="dark"] .workspace .side .kv{color:#94a4ba}
[data-theme="dark"] .mx-mark{background:#1b2636;border-color:#2a374a;color:#afbdd0}
[data-theme="dark"] .mx-cat-inline{background:#1d2939;color:#a7b7cc}
[data-theme="dark"] .workspace .side .card>.hd,[data-theme="dark"] .workspace .side .total{background:#151d2a;border-color:#293447}
[data-theme="dark"] .mx-policy{background:#2a2113;border-color:#5b4624;color:#e6d4b7}
[data-theme="dark"] .mx-policy p{color:#baa27e}
[data-theme="dark"] .mx-policy strong{color:#ffd79a}
[data-theme="dark"] .mx-policy p b{color:#ffb4b4}
[data-theme="dark"] .mx-order-note{background:#2a2113;border-color:#5b4624;color:#c5ae8a}
[data-theme="dark"] .mx-order-note b{color:#ffb4b4}
[data-theme="dark"] .mx-dialog{background:#151d2a;border-color:#2b374a;color:#eef3fb}
[data-theme="dark"] .mx-rule{background:#121a27;border-color:#293447}
[data-theme="dark"] .mx-rule span{color:#93a4ba}
[data-theme="dark"] .workspace-search{background:#151d2a;border-color:#293447;color:#9aa8bd;box-shadow:none}
[data-theme="dark"] .workspace-search:hover{background:#182233;border-color:#3a4b65;color:#dce6f4}
[data-theme="dark"] .workspace .purchase-steps b{background:#151d2a;border-color:#33435b;color:#c5d2e4}
[data-theme="dark"] .mx-policy button{background:#211b12;border-color:#5b4624;color:#e7c993}
[data-theme="dark"] .mx-policy button:hover{background:#2a2113;border-color:#7a6132}
[data-theme="dark"] .mx-cat.on .mx-cat-icon{background:#294570;color:#d7e5ff}
[data-theme="dark"] .workspace .qty button,
[data-theme="dark"] .workspace .qty input{background:#101824;border-color:#2b374a;color:#e9eff8}
[data-theme="dark"] .workspace .qty button:hover{background:#18263b;border-color:#3a4b65}
[data-theme="dark"] .mx-dialog-actions .ghost{background:#172233;border-color:#33435b;color:#c5d0df}

@media(min-width:1500px){
  .workspace .buylayout{grid-template-columns:minmax(0,1fr) 362px}
  .workspace .side{width:362px}
}
@media(max-width:1180px) and (min-width:901px){
  :root{--workspace-nav:214px}
  .workspace .app>main{padding:0 20px 36px}
  .workspace .buylayout{grid-template-columns:minmax(0,1fr) 304px;gap:14px}
  .workspace .side{width:304px}
  .mx-cats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .workspace .app>main{padding:0 14px 100px}
  .workspace-toolbar{height:64px;margin-bottom:18px}
  .workspace #v-buy h2{font-size:24px;letter-spacing:-.7px}
  .workspace #v-buy>.top>.mut{font-size:11px}
  .workspace .purchase-steps{display:none}
  .mx-policy{grid-template-columns:30px minmax(0,1fr);padding:12px;gap:10px}
  .mx-policy button{grid-column:2;justify-self:start;padding:6px 9px}
  .mx-policy p{font-size:11px}
  .mx-finder{padding:14px;border-radius:10px}
  .mx-finder-head{align-items:flex-start;display:block}
  .mx-finder-head p{margin-top:5px}
  .workspace .mx-finder .srow{grid-template-columns:minmax(0,1fr) 132px}
  .workspace .mx-finder #q{grid-column:1/-1}
  .workspace .mx-finder #q,.workspace .mx-finder #ctSelect,.workspace .mx-finder #sort{height:42px}
  .mx-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .mx-cat{min-height:54px;padding:8px}
  .mx-cat-copy small{display:none}
  .mx-hotrow{align-items:flex-start;flex-direction:column;gap:6px}
  .workspace #list>.row{
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:10px;padding:13px 12px;min-height:76px;
  }
  .workspace #list>.row::after{display:none}
  .workspace #list .namecell{grid-column:2;max-width:none;padding-right:6px}
  .workspace #list .namebox{max-width:100%}
  .workspace #list .desc{display:none}
  .workspace #list>.row>.st{display:none}
  .workspace #list .pr{grid-column:3;font-size:13.5px}
  .mx-mark{width:32px;height:32px;border-radius:8px}
  .workspace .side{width:100%;position:static;margin-top:14px}
  .workspace .side .card{box-shadow:none}
  .mx-dialog{padding:18px;border-radius:12px}
  .mx-dialog-actions button{flex:1 1 120px}
}
@media(prefers-reduced-motion:reduce){
  .mx-cat{transition:none}
  .mx-cat:hover{transform:none}
}
.mx-prefix-tip{
  margin-top:7px;padding:7px 8px;border-radius:6px;
  background:#fff8e9;border:1px solid #efd3a0;color:#74501f;
  font-size:9.5px;line-height:1.55;
}
.mx-prefix-tip b{color:#9a2b1e}
.mx-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:180px;padding:28px 18px;text-align:center;color:var(--mx-mute);
}
.mx-empty b{font-size:14px;color:var(--mx-ink)}
.mx-empty span{font-size:11px}
.mx-empty button{
  margin-top:7px;border:1px solid var(--mx-line-strong);background:#fff;color:var(--mx-accent);
  border-radius:7px;padding:7px 11px;font-size:11px;font-weight:600;
}
[data-theme="dark"] .mx-prefix-tip{background:#2a2113;border-color:#5b4624;color:#c6ae87}
[data-theme="dark"] .mx-prefix-tip b{color:#ffb4b4}
[data-theme="dark"] .mx-empty b{color:#eef3fb}
[data-theme="dark"] .mx-empty button{background:#172233;border-color:#33435b;color:#9ebdff}

/* Mobile: compact finder, no page-wide horizontal overflow. */
@media(max-width:900px){
  .mx-finder{overflow:hidden}
  .workspace .mx-finder .srow{grid-template-columns:minmax(0,1fr) 132px;gap:8px}
  .workspace .mx-finder #q{grid-column:1/-1}
  .workspace .mx-finder #ctSelect,.workspace .mx-finder #sort{width:100%}
  .mx-cats{
    display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;
    padding-bottom:2px;scrollbar-width:none;
    scroll-behavior:smooth;scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 18px),transparent 100%);
  }
  .mx-cats::-webkit-scrollbar{display:none}
  .mx-cat{flex:0 0 auto;min-height:36px;padding:7px 11px;gap:7px;border-radius:999px;grid-template-columns:auto auto;scroll-snap-align:start}
  .mx-cat-copy b{font-size:12px;line-height:1.2}
  .mx-cat-icon{display:none}
  .mx-cat-count{font-size:11px}
  .mx-hotrow{width:100%;flex-direction:row;align-items:center}
  .mx-hot{width:auto;max-width:100%;min-width:0;flex:1 1 0;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 14px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 14px),transparent 100%);}
  .workspace #list>.row{min-height:68px;padding:11px 12px}
}

/* Dark theme polish: headings, card headers, inputs and chips. */
[data-theme="dark"] .mx-finder-head h3,
[data-theme="dark"] .workspace #cnt{color:#eef3fb}
[data-theme="dark"] .workspace .card>.hd{background:#151d2a;border-color:#293447;color:#eef3fb}
[data-theme="dark"] .workspace #more{background:#151d2a;border-color:#293447;color:#9ebdff}
[data-theme="dark"] .workspace .mx-finder #q,
[data-theme="dark"] .workspace .mx-finder #ctSelect,
[data-theme="dark"] .workspace .mx-finder #sort{background:#101824;border-color:#293447;color:#e9eff8}
[data-theme="dark"] .workspace .mx-finder #q::placeholder{color:#7f8ea6}
[data-theme="dark"] .mx-hot button{background:#151d2a;border-color:#293447;color:#b9c5d6}
[data-theme="dark"] .mx-hot button:hover{background:#1b2b44;color:#fff}

/* Login / register modal must follow the same theme as the storefront. */
.lg-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#f1f5fb;
  border:1px solid #e6ebf4;border-radius:12px;padding:5px;margin:0 0 14px;
}
.lg-tab{
  border:0;border-radius:9px;padding:9px 0;font-weight:700;font-size:14px;line-height:1.2;
  cursor:pointer;background:transparent;color:#5b6b88;font-family:inherit;
}
.lg-tab.on{background:#3f6ac4;color:#fff}
[data-theme="dark"] .lg-tabs{background:#101824;border-color:#293447}
[data-theme="dark"] .lg-tab{color:#b9c5d6}
[data-theme="dark"] .lg-tab.on{background:#3f6ac4;color:#fff}
[data-theme="dark"] #__lg_agree{background:#2a2113!important;border-color:#5b4624!important;color:#e6d4b7!important}
[data-theme="dark"] #__lg_agree b{color:#ffb4b4!important}
[data-theme="dark"] #__lg_captcha_img{border-color:#2b374a!important}
[data-theme="dark"] #__lg_hint a{color:#9ebdff!important}

/* Solid action buttons need a darker fill than accent text in dark mode. */
[data-theme="dark"] .btn{background:#3f6ac4}
[data-theme="dark"] .mx-dialog-actions .primary{background:#3f6ac4;border-color:#3f6ac4;color:#fff}
[data-theme="dark"] .workspace .side .buy{background:#3f6ac4;color:#fff;box-shadow:0 7px 16px rgba(0,0,0,.24)}
[data-theme="dark"] .workspace .side .buy:hover{background:#3560b3}