/* sayyad-auth.css — account button + auth modal. Additive, RTL-first. Reuses the page
   design tokens (--panelA/B, --line, --gold*, --rL, --danger/--safe, fonts) and the
   existing .btn / .btn.ghost / .btn.gold classes. No new color system. */

/* Header account button (hidden until sayyad-auth.js activates — progressive enhancement). */
.syd-auth-btn { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syd-auth-btn-em { font-family: var(--font-body); font-size: 12.5px; letter-spacing: .2px; }

/* Overlay + panel */
.syd-auth-ov {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(2, 6, 10, .72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.syd-auth-ov[hidden] { display: none; }
.syd-auth-panel {
  position: relative; width: 100%; max-width: 400px;
  background: linear-gradient(160deg, var(--panelA), var(--panelB));
  border: 1px solid var(--goldBrd); border-radius: var(--rL);
  box-shadow: var(--shadow);
  padding: 26px 24px 24px; color: var(--text); font-family: var(--font-body);
}
.syd-auth-x {
  position: absolute; inset-inline-end: 14px; top: 12px;
  width: 34px; height: 34px; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer;
}
.syd-auth-x:hover { background: rgba(255, 255, 255, .06); color: var(--text); }

.syd-auth-step[hidden] { display: none; }
.syd-auth-title { font-family: var(--font-display); font-weight: 700; font-size: 20px; margin: 0 0 6px; }
.syd-auth-sub { color: var(--muted); font-size: 13.5px; line-height: 1.7; margin: 0 0 16px; }
.syd-auth-lbl { display: block; font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }

.syd-auth-in {
  width: 100%; box-sizing: border-box;
  background: var(--surface, #0A0F17); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; color: var(--text); font-family: var(--font-body); font-size: 15px; outline: none;
}
.syd-auth-in:focus { border-color: var(--goldBrd); box-shadow: 0 0 0 3px var(--goldSoft); }
.syd-auth-code { letter-spacing: .5em; text-align: center; font-size: 20px; padding-inline-start: .5em; }

.syd-auth-go { width: 100%; margin-top: 14px; }
.syd-auth-link {
  display: block; margin: 12px auto 0; padding: 4px 8px;
  background: 0; border: 0; color: var(--cyan); font-family: var(--font-body); font-size: 13px; cursor: pointer;
}
.syd-auth-link:hover { text-decoration: underline; }
.syd-auth-msg { min-height: 18px; margin: 12px 0 0; font-size: 13px; color: var(--danger); text-align: center; }
.syd-auth-msg.ok { color: var(--safe); }

@media (max-width: 480px) { .syd-auth-panel { max-width: none; } }