:root{--bg:#0b0c0e;--sf:#16171a;--nv:#1c1e22;--sf-menu:#1f2125;--bd:#22252a;--bdh:#33363c;--inp:#16181b;--t1:#e2e5ea;--t2:#aeb3bd;--t3:#8e939e;--t4:#6d727e;--ok:#35bc68;--er:#e06060;--in:#5a9de8;--ac:#d8dce3;--act:#0a0a0a;--sx-top:60px;--sx-side:256px;--sx-tabs:62px;--sx-max:1440px}
*,*::before,*::after{box-sizing:border-box}
html{color-scheme:dark}
body.sx-body-root{margin:0;background:var(--bg);color:var(--t2);font:500 15px/1.55 'Figtree',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.sx{min-height:100vh;display:flex;flex-direction:column;overflow-x:clip}
.sx a{color:inherit}
.sx :focus-visible{outline:2px solid var(--in);outline-offset:2px}

.sx-top{position:sticky;top:0;z-index:50;height:var(--sx-top);display:flex;align-items:center;gap:12px;padding:0 max(20px,calc((100% - var(--sx-max)) / 2 + 20px));background:#0e0f11;border-bottom:1px solid #1b1d21}
.sx-logo{display:flex;align-items:center;gap:10px;width:calc(var(--sx-side) - 20px);flex-shrink:0;min-width:0}
.sx-logo img{width:26px;height:26px;object-fit:contain}
.sx-logo b{font-size:1.06rem;font-weight:800;letter-spacing:-.02em;color:var(--t1)}
.sx-logo span{font:600 .66rem var(--fm);letter-spacing:.12em;padding:3px 7px;border-radius:6px;background:var(--nv);color:var(--t2)}
.sx-fill{flex:1}
.sx-bal{display:flex;align-items:center;gap:8px;height:40px;padding:0 5px 0 13px;border-radius:12px;border:1px solid #1f3a2a;background:#0f1a14;color:#4fd68a!important;font-size:.9rem;white-space:nowrap;transition:border-color .15s}
.sx-bal:hover{border-color:#2d5a3f}
.sx-bal>i{font-size:.95rem}
.sx-bal b{font-weight:700}
.sx-bal em{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#17301f;font-style:normal}
.sx-me{position:relative}
.sx-me summary{list-style:none;display:flex;align-items:center;gap:6px;height:40px;padding:0 9px 0 4px;border-radius:12px;border:1px solid var(--bd);background:var(--sf);cursor:pointer;color:var(--t3)}
.sx-me summary::-webkit-details-marker{display:none}
.sx-me summary>i{font-size:.75rem;transition:transform .15s}
.sx-me[open] summary>i{transform:rotate(180deg)}
.sx-av{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--nv);color:var(--t1);font-weight:800;font-size:.85rem;overflow:hidden}
.sx-av img{width:100%;height:100%;object-fit:cover}
.sx-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;padding:6px;border:1px solid var(--bdh);border-radius:14px;background:var(--sf-menu);box-shadow:0 12px 32px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:2px}
.sx-mh{display:flex;flex-direction:column;padding:8px 10px 10px;border-bottom:1px solid var(--bd);margin-bottom:4px}
.sx-mh b{color:var(--t1);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sx-mh span{font-size:.78rem;color:var(--t3)}
.sx-menu a{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:9px;font-size:.9rem;color:var(--t2)}
.sx-menu a:hover{background:var(--nv);color:var(--t1)}
.sx-menu a.sx-out{color:#f08a8a}

.sx-wrap{flex:1;display:flex;align-items:stretch;min-width:0;width:100%;max-width:var(--sx-max);margin:0 auto}
@media (min-width:1441px){.sx-side{border-left:1px solid #1b1d21}}
.sx-side{position:sticky;top:var(--sx-top);align-self:flex-start;width:var(--sx-side);flex-shrink:0;height:calc(100vh - var(--sx-top));overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:14px;padding:16px 14px 18px;border-right:1px solid #1b1d21;background:#0e0f11}
.sx-nav{display:flex;flex-direction:column;gap:2px;padding-bottom:14px;border-bottom:1px solid #1b1d21}
.sx-nav a{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 12px;border-radius:10px;font-size:.92rem;color:var(--t2);transition:background .14s,color .14s}
.sx-nav a i{font-size:1.02rem;width:18px;text-align:center}
.sx-nav a:hover{background:var(--sf);color:var(--t1)}
.sx-nav a.on{background:var(--nv);color:var(--t1);font-weight:700}
@media (min-width:901px){.sx-side .sk-side{position:static;top:auto;max-height:none;overflow:visible;padding:0}}
.sx-sfoot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:14px;border-top:1px solid #1b1d21}
.sx-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:3px;border:1px solid var(--bd);border-radius:10px;background:var(--sf)}
.sx-seg a{display:grid;place-items:center;height:30px;border-radius:7px;font:600 .74rem var(--fm);color:var(--t3)}
.sx-seg a:hover{color:var(--t1)}
.sx-seg a.on{background:var(--nv);color:var(--t1)}
.sx-backl{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 4px;font-size:.84rem;color:var(--t3)!important}
.sx-backl:hover{color:var(--t1)!important}

.sx-main{flex:1;min-width:0;padding-bottom:40px}
.sx-main .skw{max-width:none;padding:0 clamp(16px,2.4vw,32px)}
.sx-main .sk-top{border-bottom:0;padding-bottom:6px}
.sk-shop.sk-shop-solo{grid-template-columns:minmax(0,1fr)}
.sx-tabs{display:none}

@media (max-width:1100px){:root{--sx-side:228px}}
@media (max-width:900px){
  .sx-top{padding:0 12px;gap:8px}
  .sx-logo{width:auto}
  .sx-logo b{font-size:1rem}
  .sx-bal{height:36px;padding:0 4px 0 10px;font-size:.84rem}
  .sx-bal em{width:28px;height:28px}
  .sx-bal>i{display:none}
  .sx-me summary{height:36px}
  .sx-me summary>i{display:none}
  .sx-wrap{flex-direction:column}
  .sx-side{display:contents}
  .sx-nav{display:none}
  .sx-sfoot{order:2;margin:0 16px calc(var(--sx-tabs) + 20px);padding-top:16px}
  .sx-main{order:1;padding-bottom:16px}
  .sx-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--sx-tabs) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#0e0f11;border-top:1px solid #1b1d21}
  .sx-tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.7rem;font-weight:600;color:var(--t3)}
  .sx-tabs a i{font-size:1.15rem}
  .sx-tabs a.on{color:var(--t1)}
  .sx .sk-sbar{bottom:calc(var(--sx-tabs) + env(safe-area-inset-bottom))}
}
@media (max-width:640px){
  .sx .sk-bar{flex-wrap:wrap}
  .sx .sk-bar .sk-search{flex:1 1 100%}
  .sx .sk-bar .sk-fbtn,.sx .sk-bar .sk-sort{flex:1 1 0}
  .sx .sk-bar .sk-sort select{max-width:none;flex:1}
  .sx .sk-bar .sk-fbtn span{display:inline}
}
@media (max-width:420px){
  .sx-logo b{display:none}
}