/* Site header + top-right avatar menu — nền Discord tối #1E1F22, accent xanh dương nhạt */
:root{
  --um-bg:#1e1f22;
  --um-panel:rgba(43,45,49,.85);
  --um-card:rgba(49,51,56,.85);
  --um-line:#3f4147;
  --um-text:#dbdee1;
  --um-muted:#949ba4;
  --um-accent:#3aa0ef;
  --um-accent-hover:#2f92e0;
  --um-link:#6ec1ff;
  --um-ok:#23a559;
  --um-bad:#f23f43;
  --um-ghost:#4e5058;
  --um-ghost-hover:#5c5e66;
  --um-ghost-line:#6d6f78;
  color-scheme:dark;
}

html{
  background:var(--um-bg);
  min-height:100%;
}

body{
  margin:0;
  min-height:100vh;
  background:var(--um-bg);
  color:var(--um-text);
}
body.has-user-menu{padding-top:calc(56px + env(safe-area-inset-top, 0px))}

.site-header{
  position:fixed;top:0;left:0;right:0;z-index:7900;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;padding-top:env(safe-area-inset-top, 0px);
  height:calc(56px + env(safe-area-inset-top, 0px));
  box-sizing:border-box;gap:12px;
  background:rgba(30,31,34,.7);border-bottom:1px solid var(--um-line);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  font-family:"Outfit",gg sans,system-ui,-apple-system,sans-serif;
  overflow:visible;
}
.site-header a{color:inherit;text-decoration:none}
.site-brand{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;line-height:1;
  flex:0 1 auto;min-width:0;
}
.site-brand img{
  height:34px;width:34px;display:block;flex:0 0 auto;
  border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px rgba(58,160,239,.35);
}
.site-brand .logo-word{
  font-weight:800;font-size:1.02rem;font-style:normal;letter-spacing:.01em;color:#c8e7ff;
  display:inline-block;margin-left:0;transform:none;text-shadow:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:min(42vw,280px);
}

.site-right{
  display:flex;align-items:center;gap:6px;margin-left:auto;flex:0 0 auto;
  overflow:visible;
}
.site-nav{
  display:flex;align-items:center;gap:2px;
}
.nav-mob{display:none}
@media(max-width:720px){
  .nav-desk{display:none!important}
  .nav-mob{display:block}
}
.site-footer{
  max-width:1120px;margin:56px auto 0;padding:20px 24px 32px;
  border-top:1px solid var(--um-line);
  font-family:"Outfit",gg sans,system-ui,-apple-system,sans-serif;
  text-align:center;
}
.site-footer nav{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:0;
  justify-content:center;align-items:center;
}
.site-footer nav a{color:var(--um-muted);text-decoration:none;font-size:.86rem}
.site-footer nav a:hover{color:#fff}
.site-footer p{display:none}

.site-link{
  color:var(--um-muted);font-size:.9rem;padding:8px 12px;border-radius:8px;
  white-space:nowrap;text-decoration:none;
}
.site-link:hover{color:#fff;background:rgba(255,255,255,.06)}
.site-link.on{color:#fff;font-weight:700}
.tools-menu{position:relative}
.tools-menu-btn{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--um-muted);background:transparent;border:0;cursor:pointer;
  font:inherit;font-size:.9rem;padding:8px 12px;border-radius:8px;white-space:nowrap;
  text-decoration:none;
}
.tools-menu-btn:hover,.tools-menu.open .tools-menu-btn{color:#fff;background:rgba(255,255,255,.06)}
.tools-menu-btn.on{color:#fff;font-weight:700}
.tools-chevron{width:12px;height:12px;opacity:.75;transition:transform .15s}
.tools-menu.open .tools-chevron{transform:rotate(180deg)}
.tools-menu-panel{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  min-width:168px;background:var(--um-panel);border:1px solid var(--um-line);
  border-radius:12px;padding:6px;box-shadow:0 12px 40px #000a;
  flex-direction:column;gap:2px;z-index:8010;
}
.tools-menu-panel::before{
  content:"";position:absolute;top:-10px;left:0;right:0;height:10px;
}
.tools-menu.open .tools-menu-panel{display:flex}
@media (hover:hover) and (pointer:fine){
  .tools-menu:hover .tools-menu-panel{display:flex}
  .tools-menu:hover .tools-chevron{transform:rotate(180deg)}
}
.tools-menu-panel a{
  color:var(--um-muted);text-decoration:none;font-size:.9rem;
  padding:10px 12px;border-radius:8px;white-space:nowrap;
}
.tools-menu-panel a:hover{color:#fff;background:rgba(255,255,255,.06)}
.tools-menu-panel a.on{color:#fff;background:rgba(255,255,255,.08)}

.user-menu{
  position:relative;z-index:8000;
  font-family:system-ui,-apple-system,sans-serif;
}
.user-menu-btn{
  width:40px;height:40px;padding:0;border:2px solid var(--um-line);border-radius:50%;
  background:#0a0a0a;cursor:pointer;display:block;overflow:hidden;
  box-shadow:0 2px 10px #0005;transition:border-color .15s,transform .15s;
  appearance:none;-webkit-appearance:none;
}
.user-menu-btn:hover,.user-menu.open .user-menu-btn{border-color:var(--um-accent);transform:scale(1.04)}
.user-menu-btn.has-frame{
  width:44px;height:44px;border:0;background:transparent;box-shadow:none;overflow:visible;
}
.user-menu-btn.has-frame:hover,.user-menu.open .user-menu-btn.has-frame{
  border:0;transform:scale(1.06);
}
.user-ava-wrap{
  position:relative;display:block;width:100%;height:100%;
}
.user-menu-btn img.user-ava,.user-menu-btn img:not(.user-ava-frame){
  width:100%;height:100%;object-fit:cover;display:block;background:#000;border-radius:50%;
}
.user-menu-btn.has-frame .user-ava{
  width:72%;height:72%;position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);border-radius:50%;
}
.user-ava-frame{
  position:absolute;left:50%;top:50%;width:148%;height:148%;
  transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;
  display:block;z-index:2;background:transparent!important;border-radius:0!important;
}
.user-ava-frame[hidden]{display:none!important}
.user-menu-panel{
  display:none;position:absolute;top:calc(100% + 10px);right:0;
  min-width:220px;background:var(--um-panel);border:1px solid var(--um-line);
  border-radius:14px;padding:8px;box-shadow:0 12px 40px #000a;
}
.user-menu.open .user-menu-panel{display:flex;flex-direction:column;gap:2px}
#userMenuAuth{display:flex;flex-direction:column;gap:2px}
.user-menu-panel a,.user-menu-panel button.um-link{
  display:block;width:100%;text-align:left;color:var(--um-muted);text-decoration:none;
  font-size:.92rem;padding:11px 14px;border-radius:10px;border:0;background:transparent;
  cursor:pointer;font:inherit;box-sizing:border-box;
}
.user-menu-panel a:hover,.user-menu-panel button.um-link:hover{
  color:var(--um-text);background:#35373c;
}
.user-menu-panel a.um-discord{
  color:#fff;background:var(--um-accent);font-weight:600;
  display:inline-flex;align-items:center;gap:8px;justify-content:flex-start;
}
.user-menu-panel a.um-discord:hover{
  background:var(--um-accent-hover);color:#fff;
}
.user-menu-panel a.um-discord svg{width:16px;height:16px;flex:0 0 auto}
.user-menu-panel a.um-auth{
  color:var(--um-muted);background:transparent;font-weight:500;
}
.user-menu-panel a.um-auth:hover{
  color:var(--um-text);background:#35373c;
}
.user-menu-panel .um-sep{
  height:1px;background:var(--um-line);margin:6px 8px;
}
.user-menu-panel button.um-logout{
  color:#f87171;display:inline-flex;align-items:center;gap:8px;justify-content:flex-start;
  font-weight:600;
}
.user-menu-panel button.um-logout:hover{
  color:#fecaca;background:#3a1f21;
}
.user-menu-panel button.um-logout svg{width:16px;height:16px;flex:0 0 auto}
.user-menu-panel .um-who{
  padding:8px 14px 10px;color:var(--um-muted);font-size:.88rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.user-menu-panel .um-who .um-who-name{
  margin-left:4px;vertical-align:baseline;
}
button.user-menu-backdrop{
  display:none;position:fixed;inset:0;z-index:7999;
  margin:0;border:0!important;border-radius:0!important;padding:0!important;
  width:auto;height:auto;min-width:0;min-height:0;
  background:transparent!important;box-shadow:none!important;color:transparent!important;
  cursor:default;appearance:none;-webkit-appearance:none;
}
.user-menu.open button.user-menu-backdrop{display:block}

.btn-discord{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--um-accent);color:#fff;border:none;border-radius:10px;
  padding:11px 14px;font-weight:600;font-size:.9rem;cursor:pointer;text-decoration:none;
  font-family:inherit;
}
.btn-discord:hover{background:var(--um-accent-hover);color:#fff}
.btn-discord svg{width:18px;height:18px;flex:0 0 auto}

@media(max-width:640px){
  body.has-user-menu{padding-top:calc(52px + env(safe-area-inset-top, 0px))}
  .site-header{
    height:calc(52px + env(safe-area-inset-top, 0px));
    padding:0 10px;padding-top:env(safe-area-inset-top, 0px);gap:6px;
  }
  .site-brand img{height:30px;width:30px}
  .site-brand .logo-word{font-size:.92rem;margin-left:0;max-width:min(38vw,200px)}
  .site-right{gap:4px;max-width:calc(100% - 96px)}
  .tools-menu-btn{font-size:.78rem;padding:6px 7px;gap:4px;max-width:100%}
  .tools-menu-panel{
    min-width:min(220px, calc(100vw - 20px));
    right:0;left:auto;
    max-height:min(70vh, 420px);overflow:auto;
  }
  .tools-menu-panel a{font-size:.85rem;padding:10px 12px}
  .user-menu-btn{width:34px;height:34px;flex:0 0 auto}
  .user-menu-btn.has-frame{width:38px;height:38px}
}

/* Account page */
.account-wrap{max-width:520px;margin:0 auto;padding:40px 24px 64px;font-family:gg sans,system-ui,-apple-system,sans-serif}
.account-wrap h1{font-size:1.5rem;margin-bottom:6px}
.account-wrap .sub{color:var(--um-muted);font-size:.92rem;margin-bottom:24px}
.account-card{background:var(--um-panel);border:1px solid var(--um-line);border-radius:16px;padding:24px}
.account-head{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.account-ava-wrap{position:relative;width:72px;height:72px;flex:0 0 auto}
.account-ava{width:72px;height:72px;border-radius:50%;object-fit:cover;background:var(--um-ghost);display:block}
.account-ava-wrap.has-frame{width:84px;height:84px}
.account-ava-wrap.has-frame .account-ava{
  width:72%;height:72%;position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
}
.account-ava-frame{
  position:absolute;left:50%;top:50%;width:148%;height:148%;
  transform:translate(-50%,-50%);object-fit:contain;pointer-events:none;z-index:2;
}
.account-ava-frame[hidden]{display:none!important}
.account-head .names{min-width:0;flex:1}
.account-head .names b{display:block;font-size:1.1rem;margin-bottom:4px}
.account-tier,.tier-style{
  display:inline-block;font-size:.92rem;font-weight:800;letter-spacing:.04em;
  font-style:italic;line-height:1.2;transform:skewX(-6deg);
  text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.um-who .tier-style{font-size:.95em}
.account-tier.tier-bronze,.tier-style.tier-bronze{
  color:#c9895a;
  text-shadow:0 0 10px rgba(201,137,90,.35),0 1px 0 rgba(0,0,0,.4);
}
.account-tier.tier-silver,.tier-style.tier-silver{
  color:#c8d0dc;
  text-shadow:0 0 12px rgba(200,208,220,.35),0 1px 0 rgba(0,0,0,.45);
}
.account-tier.tier-gold,.tier-style.tier-gold{
  background:linear-gradient(100deg,#8a5a00 0%,#f6d860 22%,#fff4b0 40%,#d4a017 58%,#f0c14a 78%,#8a5a00 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:tier-shine 3.2s linear infinite;
  text-shadow:none;filter:drop-shadow(0 0 6px rgba(240,193,74,.35));
}
.account-tier.tier-platinum,.tier-style.tier-platinum{
  background:linear-gradient(100deg,#6b7c8f 0%,#e8eef6 24%,#a8bdd4 42%,#ffffff 55%,#91a8c2 72%,#6b7c8f 100%);
  background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:tier-shine 2.6s linear infinite;
  text-shadow:none;filter:drop-shadow(0 0 8px rgba(180,200,220,.4));
}
.account-tier.tier-diamond,.tier-style.tier-diamond{
  background:linear-gradient(100deg,#5b4db8 0%,#b8a6ff 18%,#e8f4ff 36%,#7ad7ff 52%,#d4b5ff 70%,#5b4db8 100%);
  background-size:240% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:tier-shine 2.1s linear infinite;
  text-shadow:none;filter:drop-shadow(0 0 10px rgba(122,215,255,.45));
}
@keyframes tier-shine{
  0%{background-position:0% center}
  100%{background-position:220% center}
}
@media (prefers-reduced-motion:reduce){
  .account-tier.tier-gold,.account-tier.tier-platinum,.account-tier.tier-diamond,
  .tier-style.tier-gold,.tier-style.tier-platinum,.tier-style.tier-diamond{animation:none}
}
.account-card label{display:block;font-size:.8rem;color:var(--um-muted);margin:14px 0 6px}
.account-card input[type=text],.account-card input[type=url]{
  width:100%;max-width:100%;background:var(--um-bg);border:1px solid transparent;border-radius:10px;
  padding:12px 14px;color:var(--um-text);font:inherit;outline:none;box-sizing:border-box;
  overflow-x:auto;
}
.account-card input:focus{border-color:var(--um-accent)}
.account-row{display:flex;gap:8px;align-items:center}
.account-row>input{flex:1}
.account-card .btn{
  background:var(--um-accent);color:#fff;border:none;border-radius:10px;padding:11px 16px;
  font-weight:600;cursor:pointer;font:inherit;
}
.account-card .btn:hover{background:var(--um-accent-hover)}
.account-card .btn.ghost{background:var(--um-ghost);border:1px solid var(--um-ghost-line)}
.account-card .btn.ghost:hover{background:var(--um-ghost-hover)}
.account-card .btn.bad{background:var(--um-bad)}
.account-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.account-msg{margin-top:12px;font-size:.88rem;display:none}
.account-msg.show{display:block}
.account-msg.ok{color:var(--um-ok)}
.account-msg.err{color:#f87171}
.account-danger{margin-top:28px;padding-top:20px;border-top:1px solid var(--um-line)}
.account-danger h2{font-size:.95rem;margin-bottom:8px;color:#f87171}
.account-danger p{color:var(--um-muted);font-size:.85rem;margin-bottom:12px;line-height:1.45}
.account-login{text-align:center;padding:40px 20px}
.account-login p{color:var(--um-muted);margin:12px 0 20px}

.account-modal{
  position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.62);backdrop-filter:blur(2px);
}
.account-modal.show{display:flex}
.account-modal-card{
  width:100%;max-width:400px;background:var(--um-panel);border:1px solid #f23f4388;
  border-radius:16px;padding:22px 22px 18px;box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.account-modal-card h3{font-size:1.05rem;margin:0 0 10px;color:#fecaca}
.account-modal-card p{color:var(--um-muted);font-size:.88rem;line-height:1.5;margin:0 0 8px}
.account-modal-card .warn{color:#fca5a5;font-weight:600;font-size:.88rem;margin-bottom:18px}
.account-modal-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.account-modal-actions .btn{
  background:var(--um-ghost);color:#fff;border:1px solid var(--um-ghost-line);border-radius:10px;padding:11px 16px;
  font-weight:600;cursor:pointer;font:inherit;
}
.account-modal-actions .btn:hover{background:var(--um-ghost-hover)}
.account-modal-actions .btn.bad{background:var(--um-bad);border-color:var(--um-bad)}
.account-modal-actions .btn:disabled{opacity:.6;cursor:wait}

/* ── Cảnh nền trang (orbs + lưới) — vị trí do shell.js gán theo path ──────── */
body.has-scene{
  background:
    radial-gradient(1000px 520px at var(--scene-glow-x, 12%) var(--scene-glow-y, -8%), rgba(58,160,239,.16), transparent 55%),
    radial-gradient(800px 420px at var(--scene-glow2-x, 88%) var(--scene-glow2-y, 0%), rgba(110,190,255,.1), transparent 50%),
    var(--um-bg);
  overflow-x:hidden;
}
body.has-scene.dash,
body.dash.has-scene{
  /* Giữ gradient cảnh nền — không ép nền phẳng */
  background:
    radial-gradient(1000px 520px at var(--scene-glow-x, 12%) var(--scene-glow-y, -8%), rgba(58,160,239,.14), transparent 55%),
    radial-gradient(800px 420px at var(--scene-glow2-x, 88%) var(--scene-glow2-y, 0%), rgba(110,190,255,.09), transparent 50%),
    var(--um-bg);
}
.site-scene{
  position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.site-scene .orb{
  position:absolute;border-radius:50%;filter:blur(52px);
  animation:sceneFloat 14s ease-in-out infinite;
}
.site-scene .orb-a{
  width:min(420px,70vw);height:min(420px,70vw);
  left:var(--orb-a-x,-8%);top:var(--orb-a-y,6%);
  background:rgba(58,160,239,.2);
}
.site-scene .orb-b{
  width:min(340px,60vw);height:min(340px,60vw);
  left:var(--orb-b-x,72%);top:var(--orb-b-y,18%);
  background:rgba(110,190,255,.14);
  animation-delay:-4.5s;
}
.site-scene .orb-c{
  width:min(260px,50vw);height:min(260px,50vw);
  left:var(--orb-c-x,38%);top:var(--orb-c-y,62%);
  background:rgba(47,146,224,.11);
  animation-delay:-8s;
}
.site-scene .grid-fade{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(110,190,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,190,255,.035) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at var(--grid-cx,50%) var(--grid-cy,28%), #000 18%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at var(--grid-cx,50%) var(--grid-cy,28%), #000 18%, transparent 72%);
}
.site-scene .spark{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:rgba(200,231,255,.55);
  box-shadow:0 0 12px rgba(110,190,255,.45);
  animation:sceneTwinkle 5.5s ease-in-out infinite;
}
.site-scene .spark-b{width:4px;height:4px;animation-delay:-2s;opacity:.7}
.site-scene .spark-c{width:5px;height:5px;animation-delay:-3.4s;opacity:.55}
@keyframes sceneFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-16px,0)}
}
@keyframes sceneTwinkle{
  0%,100%{opacity:.35;transform:scale(1)}
  50%{opacity:.95;transform:scale(1.35)}
}
body.has-scene .site-header{z-index:7900}
body.has-scene .site-footer{position:relative;z-index:2}
body.has-scene > *:not(.site-scene):not(.site-header):not(.site-footer):not(script):not(style):not(link){
  position:relative;z-index:1;
}