/* ===== ARTPOET Auth UI ===== */
/* 导航栏登录入口 */
#ap-auth-slot{display:flex;align-items:center;margin-left:6px}
.ap-login-btn{
  font-family:var(--font-mono,'Share Tech Mono',monospace);font-size:13.5px;letter-spacing:1.5px;
  color:#04040a;font-weight:700;cursor:pointer;
  padding:9px 20px;border:1px solid transparent;border-radius:3px;
  background:linear-gradient(120deg,var(--neon-cyan,#00f0ff),var(--neon-magenta,#ff2bd6));
  box-shadow:0 0 20px rgba(0,240,255,.35);transition:.25s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  white-space:nowrap;
}
.ap-login-btn:hover{transform:translateY(-2px);box-shadow:0 0 30px rgba(255,43,214,.6)}
.ap-login-btn:active{transform:translateY(0)}

.ap-user{position:relative}
.ap-user-btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  background:rgba(12,12,24,.6);border:1px solid var(--line,rgba(0,240,255,.22));
  border-radius:30px;padding:5px 14px 5px 5px;color:var(--text,#e8f6ff);
  font-family:var(--font-mono,monospace);font-size:13px;letter-spacing:.5px;transition:.25s;
}
.ap-user-btn:hover{border-color:var(--neon-cyan,#00f0ff);box-shadow:0 0 18px rgba(0,240,255,.3)}
.ap-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;display:block;flex:none;border:1px solid rgba(0,240,255,.5)}
.ap-avatar-ph{display:flex;align-items:center;justify-content:center;font-family:var(--font-display,'Orbitron',sans-serif);font-weight:700;font-size:13px;color:#04040a;background:linear-gradient(120deg,var(--neon-cyan,#00f0ff),var(--neon-magenta,#ff2bd6))}
.ap-user-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-menu{
  position:absolute;right:0;top:calc(100% + 10px);min-width:210px;z-index:300;
  background:rgba(8,10,20,.97);border:1px solid var(--line,rgba(0,240,255,.22));
  border-radius:8px;padding:6px;backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 24px rgba(0,240,255,.12);
}
.ap-menu-head{padding:11px 12px 12px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:6px}
.ap-menu-nick{font-family:var(--font-display,'Orbitron',sans-serif);font-weight:700;color:#fff;font-size:14px}
.ap-menu-mail{font-family:var(--font-mono,monospace);font-size:11.5px;color:var(--text-dim,#7c8dab);margin-top:3px;word-break:break-all}
.ap-menu-item{
  display:block;width:100%;text-align:left;background:transparent;border:none;cursor:pointer;
  color:var(--text-dim,#7c8dab);font-family:var(--font-mono,monospace);font-size:13px;
  padding:10px 12px;border-radius:5px;transition:.2s;
}
.ap-menu-item:hover{background:rgba(255,43,214,.12);color:#ff5c7a}

/* 弹窗 */
.ap-modal{position:fixed;inset:0;z-index:9990;display:none;align-items:center;justify-content:center;padding:20px}
.ap-modal.is-open{display:flex}
.ap-modal-mask{
  position:absolute;inset:0;background:rgba(2,2,8,.82);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:apFade .25s ease;
}
@keyframes apFade{from{opacity:0}to{opacity:1}}
.ap-modal-box{
  position:relative;width:100%;max-width:410px;max-height:92vh;overflow-y:auto;
  background:linear-gradient(180deg,rgba(10,12,24,.98),rgba(5,6,14,.99));
  border:1px solid var(--line,rgba(0,240,255,.22));border-radius:14px;
  padding:30px 28px 26px;
  box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 60px rgba(0,240,255,.12);
  animation:apRise .32s cubic-bezier(.22,1,.36,1);
}
@keyframes apRise{from{opacity:0;transform:translateY(26px) scale(.98)}to{opacity:1;transform:none}}
.ap-modal-box::-webkit-scrollbar{width:8px}
.ap-modal-box::-webkit-scrollbar-thumb{background:rgba(0,240,255,.25);border-radius:4px}
.ap-modal-x{
  position:absolute;top:14px;right:14px;width:32px;height:32px;cursor:pointer;
  background:transparent;border:1px solid transparent;border-radius:6px;
  color:var(--text-dim,#7c8dab);font-size:15px;line-height:1;transition:.2s;
}
.ap-modal-x:hover{color:#fff;border-color:var(--line,rgba(0,240,255,.22));background:rgba(255,255,255,.04)}
.ap-modal-head{text-align:center;margin-bottom:20px}
.ap-modal-logo{font-family:var(--font-display,'Orbitron',sans-serif);font-weight:900;font-size:23px;letter-spacing:3px;color:#fff}
.ap-modal-logo b{
  background:linear-gradient(90deg,var(--neon-cyan,#00f0ff),var(--neon-magenta,#ff2bd6));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ap-modal-sub{font-family:var(--font-mono,monospace);font-size:11.5px;letter-spacing:3px;color:var(--neon-cyan,#00f0ff);margin-top:5px;opacity:.85}

.ap-tabs{display:flex;gap:6px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:4px;margin-bottom:20px}
.ap-tab{
  flex:1;cursor:pointer;background:transparent;border:none;border-radius:6px;
  font-family:var(--font-mono,monospace);font-size:13.5px;letter-spacing:1px;
  color:var(--text-dim,#7c8dab);padding:10px 0;transition:.25s;
}
.ap-tab.is-on{background:linear-gradient(120deg,rgba(0,240,255,.18),rgba(255,43,214,.18));color:#fff;box-shadow:0 0 18px rgba(0,240,255,.18) inset}

.ap-form{display:flex;flex-direction:column;gap:14px}
.ap-field{display:flex;flex-direction:column;gap:7px}
.ap-field span{font-family:var(--font-mono,monospace);font-size:12px;letter-spacing:1.5px;color:var(--text-dim,#7c8dab);text-transform:uppercase}
.ap-field input{
  background:rgba(0,0,0,.5);border:1px solid rgba(0,240,255,.22);border-radius:8px;
  padding:12px 14px;color:#eafffb;font-family:var(--font-body,sans-serif);font-size:15px;
  outline:none;transition:border-color .2s,box-shadow .2s;width:100%;
}
.ap-field input::placeholder{color:#4a5a72}
.ap-field input:focus{border-color:var(--neon-cyan,#00f0ff);box-shadow:0 0 0 3px rgba(0,240,255,.13)}
.ap-submit{
  margin-top:6px;cursor:pointer;border:none;border-radius:6px;padding:14px 20px;
  font-family:var(--font-mono,monospace);font-weight:700;font-size:14px;letter-spacing:1.5px;
  color:#04040a;background:linear-gradient(120deg,var(--neon-cyan,#00f0ff),var(--neon-magenta,#ff2bd6));
  box-shadow:0 0 24px rgba(0,240,255,.4);transition:.25s;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.ap-submit:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 36px rgba(255,43,214,.6)}
.ap-submit:disabled{opacity:.6;cursor:default}

.ap-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--text-dim,#7c8dab);font-family:var(--font-mono,monospace);font-size:12px}
.ap-or::before,.ap-or::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(0,240,255,.3),transparent)}

.ap-discord{
  display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;
  font-family:var(--font-mono,monospace);font-size:13.5px;letter-spacing:1px;
  color:#fff;background:#5865F2;border:1px solid #5865F2;border-radius:8px;padding:13px;
  transition:.25s;
}
.ap-discord:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 8px 30px rgba(88,101,242,.5)}

.ap-err{
  margin-top:14px;padding:11px 14px;border-radius:8px;font-size:13px;
  font-family:var(--font-body,sans-serif);line-height:1.5;
  background:rgba(255,92,122,.1);border:1px solid rgba(255,92,122,.4);color:#ff8fa3;
}
.ap-err.ok{background:rgba(0,255,157,.08);border-color:rgba(0,255,157,.4);color:#00ff9d}

@media(max-width:640px){
  #ap-auth-slot{margin-left:0}
  .ap-login-btn{padding:8px 15px;font-size:12.5px;letter-spacing:1px}
  .ap-user-name{display:none}
  .ap-user-btn{padding:4px;gap:0}
  .ap-modal-box{padding:26px 20px 22px;border-radius:12px;max-width:100%}
  .ap-modal-logo{font-size:20px}
  .ap-field input{font-size:16px}
}