: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}}

/* ===== Settings 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:#352f49;--accent:#8b3fe0;--accent-soft:rgba(139,63,224,.18);--sidebar-bg:#181520;color-scheme:dark}
html[data-theme] body{background:var(--bg-page);color:var(--text-primary);font-family:'Fustat',sans-serif}
html[data-theme] .settings-layout *:not(code):not(.btn-icon),html[data-theme] button,html[data-theme] input,html[data-theme] textarea,html[data-theme] select{font-family:'Fustat',sans-serif}
html[data-theme] .settings-nav{background:transparent;border:0;border-radius:12px}
html[data-theme] .settings-nav-item{border-radius:8px}
html[data-theme] .settings-nav-item:hover{background:var(--input-bg)}
html[data-theme] .settings-nav-item.active{background:var(--hover-bg);color:#fff}
html[data-theme] .settings-card{background:transparent;border:0;border-radius:12px;box-shadow:none}
html[data-theme] .setting-input,html[data-theme] .settings-card input[type=text],html[data-theme] .settings-card input[type=email],html[data-theme] .settings-card input[type=password]{background:var(--input-bg);border:1px solid var(--border-color);color:#fff;border-radius:8px}
html[data-theme] .setting-input:focus{border-color:var(--accent);outline:0}
html[data-theme] .save-btn:not(.save-btn-green):not(.twofa-cancel){background:var(--accent);border-color:var(--accent);color:#fff;border-radius:8px}
html[data-theme] .save-btn:not(.save-btn-green):not(.twofa-cancel):hover{background:var(--accent-hover,var(--accent));border-color:var(--accent-hover,var(--accent))}
html[data-theme] .twofa-cancel{background:var(--input-bg);border:1px solid var(--border-color);color:var(--text-primary)}
html[data-theme] .danger-btn{background:transparent;border-radius:8px}
html[data-theme] .twofa-modal{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:12px}
html[data-theme] .slider{background:var(--border-color)}
html[data-theme] input:checked+.slider{background:var(--accent)}
html[data-theme] .twofa-secret{background:var(--input-bg);color:var(--text-primary)}
.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}}

input,textarea,code,.settings-card p{user-select:text;-webkit-user-select:text}

/* ---- 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}
html[data-theme] main{max-width:1000px;padding:28px 20px 40px;gap:20px}
@media(max-width:760px){header.ns-top{padding:12px 12px 0}html[data-theme] main{padding:20px 14px}}

html[data-theme] .settings-layout{justify-content:center}

/* ===== Themes dropdown + custom theme builder ===== */
.theme-dd{position:relative;display:inline-block;margin-top:6px;min-width:240px}
.theme-dd-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;background:var(--input-bg);color:var(--text-primary);border:1px solid var(--border-color);border-radius:8px;padding:11px 14px;font:600 15px 'Fustat',sans-serif;cursor:pointer}
.theme-dd-btn:hover{background:var(--hover-bg)}
.theme-dd-btn svg{transition:transform .15s}
.theme-dd.open .theme-dd-btn svg{transform:rotate(180deg)}
.theme-dd-menu{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;margin:0;padding:6px;list-style:none;background:var(--bg-panel);border:1px solid var(--border-color);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.theme-dd-menu[hidden]{display:none}
.theme-dd-opt{padding:10px 12px;border-radius:7px;cursor:pointer;font:600 14px 'Fustat',sans-serif;color:var(--text-primary)}
.theme-dd-opt:hover{background:var(--hover-bg)}
.theme-dd-opt.selected{background:var(--accent-soft)}
.theme-dd-opt[hidden]{display:none}
.ct-group{margin-top:28px;padding-top:22px;border-top:1px solid var(--border-color)}
.ct-grid{display:grid;grid-template-columns:repeat(2,minmax(0,160px));gap:12px;margin:12px 0 16px}
.ct-field{display:flex;flex-direction:column;gap:6px;font:600 13px 'Fustat',sans-serif;color:var(--text-muted)}
.ct-field input[type=color]{width:100%;height:42px;padding:3px;border:1px solid var(--border-color);border-radius:8px;background:var(--input-bg);cursor:pointer}