/* ============================================================
   PATRON AUTH BADGE
============================================================ */

.patron-auth-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surf);
  font-size: .82rem; font-weight: 600; color: var(--text);
  text-decoration: none; transition: .15s; white-space: nowrap; line-height: 1;
}
.patron-auth-badge:hover { border-color: var(--accent); color: var(--accent); }
.patron-auth-badge--guest { color: var(--accent); border-color: var(--accent); }
.patron-auth-badge--guest:hover { background: var(--accent); color: #fff; }
.patron-auth-badge--follower { border-color: rgba(var(--accent-rgb),.3); }
.patron-auth-badge--patron { border-color: var(--accent); }
.patron-auth-badge-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.patron-auth-badge-name { font-size: .78rem; font-weight: 650; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; line-height: 1.2; }
.patron-auth-badge-tier { font-size: .65rem; font-weight: 500; color: var(--mute); line-height: 1.2; }
.patron-auth-badge--patron .patron-auth-badge-tier { color: var(--accent); }
@media (max-width: 480px) { .patron-auth-badge-text { display: none; } }

/* ============================================================
   LOGIN CHOOSER
============================================================ */

.login-chooser { max-width: 680px; margin: 0 auto; }
.login-chooser__head { text-align: center; margin-bottom: 32px; }
.login-chooser__title { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); margin-bottom: 8px; }
.login-chooser__sub { font-size: .9rem; color: var(--mute); line-height: 1.5; }
.login-chooser__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.login-chooser__cards--single { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
@media (max-width: 560px) { .login-chooser__cards { grid-template-columns: 1fr; } }

.login-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 28px 24px; background: var(--surf); border: 1px solid var(--border);
  border-radius: 16px; text-decoration: none; color: var(--text); overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.login-card, .login-card:hover, .login-card * { text-decoration: none; }
.login-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(var(--accent-rgb),.08) 0%, transparent 70%); opacity: 0; transition: opacity .3s; }
.login-card:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 8px 32px var(--glow); transform: translateY(-2px); color: var(--text); }
.login-card:hover::before { opacity: 1; }
.login-card:active { transform: translateY(0); }

.login-card__beta { display: inline-block; font-size: .6rem; font-family: var(--font-mono); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(224,120,49,.15); color: #c46a00; border: 1px solid rgba(224,120,49,.3); border-radius: 4px; padding: 1px 6px; vertical-align: middle; margin-left: 6px; position: relative; top: -1px; }
.login-card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--glow); border: 1px solid rgba(var(--accent-rgb),.2); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--accent); margin-bottom: 4px; transition: background .2s, border-color .2s; }
.login-card:hover .login-card__icon { background: rgba(var(--accent-rgb),.15); border-color: var(--accent); }
.login-card__label { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.login-card__desc { font-size: .83rem; color: var(--mute); line-height: 1.55; flex: 1; }
.login-card__note { font-size: .75rem; color: var(--mute); display: flex; align-items: flex-start; gap: 6px; background: rgba(var(--accent-rgb),.06); border: 1px solid rgba(var(--accent-rgb),.15); border-radius: 8px; padding: 8px 10px; line-height: 1.4; }
.login-card__note i { color: var(--accent); margin-top: 1px; flex-shrink: 0; }
.login-card__cta { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 7px; margin-top: 4px; transition: gap .2s; }
.login-card:hover .login-card__cta { gap: 11px; }
.login-chooser__footer { text-align: center; font-size: .72rem; color: var(--mute); margin-top: 24px; opacity: .7; }
.login-chooser__footer a { color: var(--mute); text-decoration: underline; }
.login-chooser__footer a:hover { color: var(--accent); }

/* ============================================================
   PROFILE PANEL
============================================================ */

.profile-panel {
  background: var(--surf);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

/* Identity */
.profile-panel__identity {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
}

.profile-panel__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--glow); border: 1px solid rgba(var(--accent-rgb),.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--accent); flex-shrink: 0;
}

.profile-panel__identity-info { flex: 1; min-width: 0; }
.profile-panel__name { font-size: 1rem; font-weight: 700; color: var(--text); }
.profile-panel__sub { font-size: .78rem; color: var(--mute); margin-top: 3px; display: flex; align-items: center; gap: 5px; }

.profile-panel__logout {
  flex-shrink: 0; font-size: .78rem; font-weight: 600;
  color: var(--mute); text-decoration: none;
  display: flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border);
  transition: .15s;
}
.profile-panel__logout:hover { border-color: #e03131; color: #e03131; }

/* Two-column account section */
.profile-panel__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}

.profile-panel__col { padding: 18px 28px; }
.profile-panel__col:first-child { border-right: 1px solid var(--border); }

.profile-panel__section-label {
  font-size: .68rem; font-weight: 700; font-family: var(--font-mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); opacity: .55; margin-bottom: 12px;
}

.profile-panel__rows { display: flex; flex-direction: column; gap: 8px; }

.profile-panel__row { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; }
.profile-panel__key { color: var(--mute); }
.profile-panel__val { font-weight: 600; color: var(--text); }
.profile-panel__val--mono { font-family: var(--font-mono); font-size: .78rem; font-weight: 400; color: var(--mute); }

.profile-panel__connect {
  font-size: .78rem; font-weight: 600;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb),.3);
}
.profile-panel__connect:hover { border-color: var(--accent); }

/* Services */
.profile-panel__services {
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
}

.profile-panel__service {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .85rem; padding: 9px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.profile-panel__service:last-child { border-bottom: none; }
.profile-panel__service--link:hover .profile-panel__service-name { color: var(--accent); }

.profile-panel__service-name {
  color: var(--mute); display: flex; align-items: center; gap: 8px;
  transition: color .15s;
}
.profile-panel__service-name i { font-size: .85rem; opacity: .6; width: 14px; text-align: center; }

.profile-panel__service-status { display: flex; align-items: center; gap: 8px; }

.profile-panel__status--ok { color: var(--status-ok); font-size: .78rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.profile-panel__status--muted { color: var(--mute); font-size: .78rem; display: flex; align-items: center; gap: 4px; }

.profile-panel__chevron { font-size: .75rem; color: var(--mute); opacity: .5; }

.profile-panel__beta {
  font-size: .6rem; font-weight: 700; font-family: var(--font-mono);
  letter-spacing: .05em; text-transform: uppercase;
  background: rgba(224,120,49,.12); color: #c46a00;
  border: 1px solid rgba(224,120,49,.25); border-radius: 4px;
  padding: 1px 5px;
}

/* Footer */
.profile-panel__footer {
  padding: 12px 28px; text-align: center;
  font-size: .72rem; color: var(--mute); opacity: .65;
}
.profile-panel__footer a { color: var(--mute); text-decoration: underline; }
.profile-panel__footer a:hover { color: var(--accent); }

@media (max-width: 600px) {
  .profile-panel__cols { grid-template-columns: 1fr; }
  .profile-panel__col:first-child { border-right: none; border-bottom: 1px solid var(--border); }
}