/* Shared auth UI (login/signup modal + user dropdown) — Dive Into Stories.
   Uses the same CSS variables + class names as home/story so it matches everywhere. */
.auth-avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;cursor:pointer;transition:transform .2s;background-size:cover;background-position:center}
.auth-avatar:hover{transform:scale(1.1)}
.auth-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:600;display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.auth-modal{background:var(--card-bg);border:1px solid var(--border);border-radius:20px;padding:36px 28px;max-width:400px;width:90%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.2);animation:authPop .4s ease}
[data-theme=dark] .auth-modal{background:#2a241e;border-color:#433b31;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.auth-modal .am-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:20px;color:var(--ink-muted);cursor:pointer}
.auth-modal .am-close:hover{color:var(--accent)}
.auth-modal h2{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:700;margin-bottom:6px;text-align:center;color:var(--ink)}
.auth-modal .am-sub{text-align:center;font-size:13px;color:var(--ink-muted);margin-bottom:20px;font-family:'IBM Plex Mono',monospace}
.am-field{margin-bottom:14px}
.am-field label{display:block;font-size:12px;font-family:'IBM Plex Mono',monospace;color:var(--ink-muted);margin-bottom:4px;font-weight:600}
.am-field input{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:10px;font-size:14px;font-family:'Source Serif 4',serif;background:var(--paper-warm);color:var(--ink);transition:border-color .2s}
.am-field input:focus{outline:none;border-color:var(--accent)}
.am-submit{width:100%;padding:12px;border:none;border-radius:10px;background:var(--accent);color:#fff;font-size:15px;font-weight:600;font-family:'IBM Plex Mono',monospace;cursor:pointer;transition:all .2s;margin-top:4px}
.am-submit:hover{box-shadow:0 4px 16px rgba(192,113,58,.3)}
.am-switch{text-align:center;margin-top:14px;font-size:12px;color:var(--ink-muted);font-family:'IBM Plex Mono',monospace}
.am-switch a{color:var(--accent);cursor:pointer;font-weight:600;text-decoration:none}
.am-switch a:hover{text-decoration:underline}
.am-error{color:#e74c3c;font-size:12px;font-family:'IBM Plex Mono',monospace;margin-top:6px;text-align:center;display:none}
.am-success{color:#2ecc71;font-size:12px;font-family:'IBM Plex Mono',monospace;margin-top:6px;text-align:center;display:none}
.user-dd{position:relative}
.dd-menu{position:absolute;top:38px;right:0;background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:6px;min-width:180px;box-shadow:0 8px 30px var(--shadow,rgba(0,0,0,.18));display:none;z-index:150;animation:authFadeUp .2s ease}
.dd-menu.show{display:block}
.dd-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font-size:13px;font-family:'IBM Plex Mono',monospace;color:var(--ink-soft);cursor:pointer;transition:all .15s;border:none;background:none;width:100%;text-align:left;text-decoration:none}
.dd-item:hover{background:var(--highlight);color:var(--accent)}
.dd-item.danger{color:#e74c3c}
.dd-item.danger:hover{background:rgba(231,76,60,.08)}
@keyframes authPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes authFadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:480px){
  .auth-modal{width:92%;padding:28px 20px;border-radius:18px}
  .auth-modal h2{font-size:20px}
  .am-field input{padding:10px 14px;font-size:14px}
  .am-submit{padding:12px;font-size:14px}
  .dd-menu{min-width:170px}
}