/* ============================================================================
   Auth UI — account button, auth modals, walls. Layers on top of app.css design
   tokens; matches the existing .modal / .btn-primary / .set-input vocabulary.
   ========================================================================== */

/* --- sidebar account button --------------------------------------------- */
.acct-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line, #2a2a33);
  background: transparent; color: inherit; cursor: pointer; font: inherit;
  text-align: start; transition: background .15s, border-color .15s;
}
.acct-btn:hover { background: var(--hover, rgba(255,255,255,.05)); }
.acct-btn .acct-av {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; font-weight: 700; font-size: .95rem;
  background: #8b7cff; color: #0b0a12; text-transform: uppercase;
}
.acct-btn .acct-meta { min-width: 0; line-height: 1.2; }
.acct-btn .acct-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-btn .acct-sub { font-size: .72rem; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-btn .acct-pro {
  margin-inline-start: auto; flex: 0 0 auto; font-size: .62rem; font-weight: 700;
  letter-spacing: .04em; padding: 2px 7px; border-radius: 999px;
  background: linear-gradient(135deg,#8b7cff,#b7aaff); color: #0b0a12;
}

/* --- auth modal (reuses .modal backdrop from app.css) -------------------- */
.auth-modal { position: fixed; inset: 0; z-index: 1200; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(6,6,10,.62); backdrop-filter: blur(4px); }
.auth-modal.open { display: flex; }
.auth-box {
  width: 100%; max-width: 400px; background: var(--panel, #17171d);
  border: 1px solid var(--line, #2a2a33); border-radius: 18px;
  padding: 26px 26px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
  max-height: calc(100vh - 40px); overflow-y: auto;
}
.auth-box h2 { margin: 0 0 4px; font-size: 1.32rem; font-weight: 700; }
.auth-box .auth-sub { margin: 0 0 18px; font-size: .86rem; opacity: .7; line-height: 1.45; }
.auth-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.auth-brand .mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: #8b7cff; color: #0b0a12; font: 700 1.3rem Georgia, serif; }
.auth-brand b { font-size: 1.05rem; }

.auth-field { margin-bottom: 13px; }
.auth-field label { display: block; font-size: .76rem; font-weight: 600; opacity: .8; margin-bottom: 5px; }
.auth-field input {
  width: 100%; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--line, #2a2a33); background: var(--bg, #0e0e12);
  color: inherit; font: inherit; font-size: .92rem;
}
.auth-field input:focus { outline: 2px solid #8b7cff; outline-offset: 1px; border-color: transparent; }
.auth-field .hint { font-size: .72rem; opacity: .55; margin-top: 4px; }

.auth-btn {
  width: 100%; padding: 12px; border: none; border-radius: 10px; cursor: pointer;
  background: #8b7cff; color: #0b0a12; font: inherit; font-weight: 700; font-size: .95rem;
  transition: filter .15s; margin-top: 4px;
}
.auth-btn:hover { filter: brightness(1.06); }
.auth-btn[disabled] { opacity: .6; cursor: default; }
.auth-btn.secondary { background: transparent; color: inherit; border: 1px solid var(--line, #2a2a33); }
.auth-btn.danger { background: transparent; color: #ff6b6b; border: 1px solid rgba(255,107,107,.4); font-weight: 600; }

.auth-alt { margin-top: 15px; font-size: .82rem; text-align: center; opacity: .85; }
.auth-alt a, .auth-link { color: #8b7cff; cursor: pointer; text-decoration: none; font-weight: 600; }
.auth-alt a:hover, .auth-link:hover { text-decoration: underline; }

.auth-msg { font-size: .82rem; padding: 10px 12px; border-radius: 9px; margin-bottom: 14px; line-height: 1.4; display: none; }
.auth-msg.show { display: block; }
.auth-msg.err { background: rgba(255,107,107,.12); color: #ff9d9d; border: 1px solid rgba(255,107,107,.3); }
.auth-msg.ok  { background: rgba(120,220,150,.12); color: #9fe6b4; border: 1px solid rgba(120,220,150,.3); }
.auth-msg.info{ background: rgba(139,124,255,.12); color: #c3b8ff; border: 1px solid rgba(139,124,255,.3); }

.auth-x { position: absolute; top: 14px; inset-inline-end: 16px; background: none; border: none; color: inherit;
  opacity: .6; cursor: pointer; font-size: 1.4rem; line-height: 1; }
.auth-x:hover { opacity: 1; }
.auth-box { position: relative; }

.auth-remember { display: flex; align-items: center; gap: 8px; font-size: .82rem; margin-bottom: 14px; opacity: .9; }
.auth-remember input { width: auto; }

/* --- upgrade / plan card ------------------------------------------------- */
.plan-card { border: 1px solid var(--line, #2a2a33); border-radius: 14px; padding: 18px; margin-bottom: 14px; }
.plan-card.pro { border-color: #8b7cff; box-shadow: 0 0 0 1px rgba(139,124,255,.3) inset; }
.plan-card h3 { margin: 0 0 3px; font-size: 1.05rem; }
.plan-price { font-size: 1.7rem; font-weight: 800; margin: 4px 0 10px; }
.plan-price small { font-size: .8rem; font-weight: 500; opacity: .6; }
.plan-feats { list-style: none; margin: 0 0 4px; padding: 0; font-size: .85rem; }
.plan-feats li { padding: 4px 0 4px 22px; position: relative; opacity: .9; }
.plan-feats li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: #8b7cff; font-weight: 800; }

/* --- account rows -------------------------------------------------------- */
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line, #2a2a33); }
.acct-row:last-child { border-bottom: none; }
.acct-row .lbl { font-size: .82rem; opacity: .65; }
.acct-row .val { font-size: .9rem; font-weight: 600; }
.sess-item { font-size: .78rem; opacity: .8; padding: 7px 0; display: flex; justify-content: space-between; gap: 10px; }

[dir="rtl"] .acct-btn { text-align: right; }