:root{--bg:#14121c;--pill:#2a2638;--pill-hover:#352f49;--pill-border:#3d3852;--text:#fff;--muted:#9a94b0;--purple:#8b3fe0}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--text);font-family:'Fustat',sans-serif;user-select:none;-webkit-user-select:none;overflow-x:hidden}

.ns-top{position:relative;padding:14px 20px 0 20px;display:flex;align-items:flex-start;gap:16px}
.ns-logo{height:26px;width:auto;display:block;margin-top:6px;cursor:pointer}
.ns-center{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.ns-row{display:flex;align-items:center;gap:16px}

.ns-pill{background:var(--pill);border:1px solid var(--pill-border);border-radius:9px}
.ns-nav{display:flex;align-items:center;gap:4px;height:36px;padding:0 6px}
.ns-sub{display:flex;align-items:center;gap:4px;height:32px;padding:0 6px}
.ns-link{display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 9px;border-radius:6px;color:var(--text);text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;transition:background .15s}
.ns-sub .ns-link{font-size:13px;padding:0 8px}
.ns-link:hover{background:var(--pill-hover)}
.ns-link svg{width:15px;height:15px;fill:var(--purple);flex-shrink:0}

.ns-search{display:flex;align-items:center;gap:9px;width:300px;max-width:34vw;height:36px;padding:0 12px;color:var(--muted)}
.ns-search svg{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2.4;stroke-linecap:round;flex-shrink:0}
.ns-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:500 14px 'Fustat',sans-serif;user-select:text;-webkit-user-select:text}
.ns-search input::placeholder{color:var(--muted)}
.ns-search:focus-within{border-color:var(--accent,#6b4fb0)}

.ns-right{position:absolute;top:14px;right:20px;display:flex;align-items:center;gap:8px}
.hx-corner-currency{display:flex;align-items:center;gap:16px;height:36px;padding:0 13px}
.hx-corner-currency-item{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap}
.hx-corner-currency-item svg{width:16px;height:16px;fill:var(--purple);flex-shrink:0}
.ns-icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;color:var(--text);text-decoration:none;transition:background .15s}
.ns-icon-btn:hover{background:var(--pill-hover)}
.ns-icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}

/* ---- morph-in animation (plays on every load; extra-smooth when arriving from the classic site) ---- */
.ns-logo,.ns-nav,.ns-sub,.ns-search,.ns-right{opacity:0;will-change:transform,opacity;animation:nsIn .4s cubic-bezier(.2,.8,.3,1) forwards}
.ns-logo{animation-delay:.02s;transform:rotate(-12deg) scale(.6)}
.ns-nav{animation-delay:.06s;transform-origin:left center;transform:translate3d(-16px,-6px,0)}
.ns-search{animation-delay:.1s;transform:translate3d(0,-6px,0)}
.ns-right{animation-delay:.14s;transform:scale(.6)}
.ns-sub{animation-delay:.18s;transform-origin:top left;transform:translate3d(-10px,-8px,0)}
.ns-link{opacity:0;animation:nsLink .25s ease-out forwards}
.ns-nav .ns-link:nth-child(1){animation-delay:.2s}.ns-nav .ns-link:nth-child(2){animation-delay:.24s}
.ns-nav .ns-link:nth-child(3){animation-delay:.28s}.ns-nav .ns-link:nth-child(4){animation-delay:.32s}
.ns-sub .ns-link:nth-child(1){animation-delay:.34s}.ns-sub .ns-link:nth-child(2){animation-delay:.38s}
.ns-sub .ns-link:nth-child(3){animation-delay:.42s}.ns-sub .ns-link:nth-child(4){animation-delay:.46s}
@keyframes nsIn{to{opacity:1;transform:none}}
@keyframes nsLink{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* soft purple glow that fades out right after the morph */
body::before{content:"";position:fixed;left:0;top:0;width:100%;height:240px;pointer-events:none;will-change:opacity;
  background:radial-gradient(ellipse at 50% 0,rgba(var(--accent-rgb,139,63,224),.25),transparent 70%);opacity:0;animation:nsGlow .9s ease-out forwards}
@keyframes nsGlow{0%{opacity:0}30%{opacity:1}100%{opacity:0}}

@media(max-width:760px){
  .ns-top{flex-wrap:wrap;padding:12px 12px 0}
  .ns-search{display:none}
  .ns-nav{overflow-x:auto;max-width:calc(100vw - 130px)}
  .ns-right{right:12px;top:12px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-delay:0s!important}}

.ns-logout{display:flex;align-items:center;height:36px;padding:0 13px;color:var(--text);text-decoration:none;font-size:14px;font-weight:500;transition:background .15s}
.ns-logout:hover{background:var(--pill-hover)}
html,body{min-height:100vh}
body{display:flex;flex-direction:column}
main{flex:1 0 auto}
footer{padding:18px 20px 24px;margin-top:40px;flex-shrink:0;border-top:0!important;background:none!important}
footer .footer-content{display:flex;align-items:center;justify-content:center;gap:10px}
footer .footer-link{color:var(--muted)!important}
footer .footer-social{display:flex;align-items:center;gap:10px}
footer .footer-social-link svg{width:16px;height:16px;fill:var(--muted);display:block}
footer .footer-social-link:hover svg{fill:var(--text)}
@media(max-width:760px){.ns-logout{display:none}}

/* ---- undo the classic settings.css header/currency/main rules that clashed with the new bar ---- */
header.ns-top{height:auto;min-height:0;box-sizing:border-box;background:none;justify-content:flex-start;align-items:flex-start;padding:14px 20px 0;z-index:2001}
header.ns-top .ns-right{z-index:2002}
.ns-pill.hx-corner-currency{align-self:auto;gap:16px;height:36px;padding:0 13px;background:var(--pill);border:1px solid var(--pill-border);border-radius:9px}
.ns-pill .hx-corner-currency-item{display:inline-flex;align-items:center;gap:7px}
.ns-pill .hx-corner-currency-item svg{width:16px;height:16px;fill:var(--purple)}
.ns-pill .hx-corner-currency-item span{font-family:'Fustat',sans-serif;font-size:14px;font-weight:600;color:#fff;line-height:1}
.ns-link svg{width:16px;height:16px;fill:var(--purple);flex-shrink:0}

input,textarea,code{user-select:text;-webkit-user-select:text}
header.ns-top{box-sizing:border-box}

/* ===== Market page in the new Hexi (Beta) theme ===== */
html[data-theme]{--bg-page:#14121c;--bg-panel:#1d1a28;--text-primary:#e8e5f2;--text-heading:#ffffff;--text-muted:#9a94b0;--text-faint:#8a84a0;--border-color:#3d3852;--border-strong:#4d4768;--input-bg:#2a2638;--hover-bg:#2a2638;--accent:#a35cf0;--accent-soft:rgba(139,63,224,.18);--sidebar-bg:#181520;color-scheme:dark}
html[data-theme] body{background:var(--bg-page,#14121c);color:var(--text-primary,#e8e5f2);font-family:'Fustat',sans-serif}
html[data-theme] .market-page *:not(svg):not(path),html[data-theme] input,html[data-theme] button{font-family:'Fustat',sans-serif}
html[data-theme] main{max-width:1100px;padding:28px 20px 40px}
html[data-theme] .market-sidebar-title{font-weight:700}
html[data-theme] .market-filter-block{border-top:1px solid var(--border-color,#3d3852)}
html[data-theme] .market-search-input,html[data-theme] .market-filter-input{background:var(--input-bg,#2a2638);border:1px solid var(--border-color,#3d3852);border-radius:9px;color:#fff}
html[data-theme] .market-search-input:focus,html[data-theme] .market-filter-input:focus{border-color:var(--accent,#6b4fb0)}
html[data-theme] .market-create-btn{background:var(--accent,#8b3fe0);border-radius:8px}
html[data-theme] .market-create-btn:hover{background:var(--accent-hover,#9d57ea);opacity:1}
html[data-theme] .item-card{background:var(--bg-panel,#1d1a28);border:1px solid var(--border-color,#3d3852);border-radius:12px}
html[data-theme] .item-card:hover{filter:none;border-color:var(--accent,#6b4fb0);background:#231f32}
html[data-theme] .item-info{background:transparent;border-radius:0 0 12px 12px}
html[data-theme] .item-thumbnail{background:transparent}
html[data-theme] .item-detail-thumbnail{background:var(--bg-panel,#1d1a28);border:1px solid var(--border-color,#3d3852);border-radius:12px}
html[data-theme] .item-detail-buy-btn{background:var(--accent,#8b3fe0);border-color:var(--accent,#8b3fe0);border-radius:8px}
html[data-theme] .item-detail-buy-btn:hover{background:var(--accent-hover,#9d57ea);border-color:var(--accent-hover,#9d57ea);opacity:1}
html[data-theme] .item-detail-buy-btn.owned,html[data-theme] .item-detail-buy-btn:disabled{background:var(--input-bg,#2a2638);border-color:var(--border-color,#3d3852);color:var(--text-faint,#8a84a0)}
html[data-theme] .item-detail-back:hover{color:#fff}
html[data-theme] .ns-link.active{background:var(--hover-bg,#352f49)}
.ns-link.active{background:var(--pill-hover)}
@media(max-width:760px){html[data-theme] main{padding:20px 14px}}

.item-detail-delete-btn{background:transparent!important;border:1px solid #c0475a!important;color:#ff7b8a!important;margin-left:10px}
.item-detail-delete-btn:hover:not(:disabled){background:rgba(192,71,90,.18)!important}
.item-detail-delete-btn[hidden]{display:none!important}