/* ============================================================
   AthaNet Accounts — Main Stylesheet
   ============================================================ */

/* ── Variables ─────────────────────────────────────────── */
:root {
  --blue:       #1967D2;
  --blue-dark:  #1558B0;
  --blue-light: #E8F0FE;
  --ink:        #202124;
  --ink-mid:    #3C4043;
  --ink-light:  #5F6368;
  --ink-faint:  #80868B;
  --border:     #DADCE0;
  --border-mid: #E8EAED;
  --surface:    #F8F9FA;
  --white:      #FFFFFF;
  --red:        #D93025;
  --green:      #1E8E3E;
  --yellow:     #F29900;
  --brand-grad: linear-gradient(135deg, #1967D2, #7C3AED);
  --ease:       cubic-bezier(.4,0,.2,1);
  --dur:        200ms;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ── Utility ────────────────────────────────────────────── */
.hidden { display: none !important; }
.mono   { font-family: 'SF Mono', 'Fira Code', monospace; font-size: .875em; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .6rem 1.25rem;
  border-radius: 4px;
  font-size: .875rem; font-weight: 500;
  line-height: 1; white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.btn:focus-visible { outline: 3px solid rgba(25,103,210,.35); outline-offset: 2px; }
.btn:disabled      { opacity: .55; pointer-events: none; }

.btn-primary {
  background: var(--blue);
  color: #fff;
}
.btn-primary:hover { background: var(--blue-dark); box-shadow: 0 1px 4px rgba(0,0,0,.2); }

.btn-ghost {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface); }

.btn-full  { width: 100%; justify-content: center; }
.btn-sm    { padding: .4rem 1rem; font-size: .8125rem; }

.btn-back {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-light); transition: all var(--dur) var(--ease);
}
.btn-back:hover { background: var(--surface); color: var(--ink); }
.btn-back .material-icons-round { font-size: 20px; }

.btn-icon-only {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-light); transition: all var(--dur) var(--ease);
}
.btn-icon-only:hover { background: var(--surface); color: var(--ink); }

.link-btn {
  font-size: .8125rem; color: var(--blue); font-weight: 500;
  background: none; border: none; cursor: pointer; padding: 0;
  transition: color var(--dur);
}
.link-btn:hover   { color: var(--blue-dark); }
.link-btn:disabled{ color: var(--ink-faint); cursor: not-allowed; }

/* ── Spinner ────────────────────────────────────────────── */
.spinner-sm {
  display: inline-block; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Alerts ─────────────────────────────────────────────── */
.alert {
  display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem; border-radius: 4px;
  font-size: .875rem; font-weight: 500; margin-bottom: 1.25rem;
}
.alert-error   { background: #FCE8E6; color: var(--red); border: 1px solid #F5C6C2; }
.alert-success { background: #E6F4EA; color: var(--green); border: 1px solid #CEEAD6; }
.alert .material-icons-round { font-size: 18px; flex-shrink: 0; }


/* ====================================================
   FULL-PAGE AUTH LAYOUT  (login + consent)
   ==================================================== */
.page-auth {
  min-height: 100vh;
  background: #fff;
  display: flex; flex-direction: column;
}

/* Top bar */
.auth-topbar {
  padding: .875rem 1.5rem;
  display: flex; align-items: center; gap: .5rem;
  border-bottom: 1px solid var(--border-mid);
  flex-shrink: 0;
}
.auth-topbar img      { width: 24px; height: 24px; object-fit: contain; }
.auth-topbar-name     { font-size: .875rem; font-weight: 600; color: var(--ink); }

/* Body */
.auth-body {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 2.5rem 1.5rem;
}

/* Login content (no card) */
.auth-content { width: 100%; max-width: 380px; }

/* Heading block */
.auth-heading { margin-bottom: 2rem; }
.auth-heading h1 {
  font-size: 1.5rem; font-weight: 400;
  color: var(--ink); margin-bottom: .375rem; letter-spacing: -.01em;
}
.auth-heading p { font-size: .875rem; color: var(--ink-light); }

/* Identifier pill (step 2/3 back row) */
.step-back {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1.5rem;
}
.step-identity {
  display: flex; align-items: center; gap: .375rem;
  font-size: .875rem; font-weight: 500; color: var(--ink-mid);
  background: var(--surface); border: 1px solid var(--border);
  padding: .35rem .875rem; border-radius: 999px;
}
.step-identity .material-icons-round { font-size: 16px; color: var(--ink-light); }

/* Fields */
.field-group  { margin-bottom: 1.25rem; }
.field-label  { display: block; font-size: .8125rem; font-weight: 500; color: var(--ink-mid); margin-bottom: .375rem; }
.field-wrap   { position: relative; display: flex; align-items: center; }
.field-icon   { position: absolute; left: .875rem; font-size: 18px; color: var(--ink-faint); pointer-events: none; }
.field-input  {
  width: 100%; height: 48px;
  padding: 0 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: .9375rem; font-family: inherit; color: var(--ink);
  background: #fff;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  outline: none;
}
.field-input::placeholder { color: var(--ink-faint); }
.field-input:focus {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.field-toggle {
  position: absolute; right: .75rem;
  padding: .25rem; color: var(--ink-light); display: flex; align-items: center;
  transition: color var(--dur);
}
.field-toggle:hover { color: var(--ink); }
.field-toggle .material-icons-round { font-size: 18px; }
.field-hint { font-size: .75rem; margin-top: .25rem; color: var(--red); }

/* Remember row */
.remember-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem;
}
.checkbox-label {
  display: flex; align-items: center; gap: .375rem;
  font-size: .8125rem; color: var(--ink-light); cursor: pointer;
}
.checkbox-label input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--blue); cursor: pointer; }

/* Submit row — right-aligned like Google */
.auth-actions { display: flex; justify-content: flex-end; margin-top: .25rem; }

/* OTP info box */
.otp-info {
  display: flex; align-items: center; gap: .75rem;
  background: var(--blue-light); border-radius: 4px;
  padding: .875rem 1rem; margin-bottom: 1.25rem;
  color: #174EA6; font-size: .875rem;
}
.otp-info-icon {
  width: 32px; height: 32px; background: rgba(25,103,210,.12);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.otp-info .material-icons-round { font-size: 18px; }

.otp-sent-banner {
  display: flex; align-items: center; gap: .5rem;
  background: #E6F4EA; border-radius: 4px;
  padding: .75rem 1rem; color: var(--green);
  font-size: .875rem; font-weight: 500; margin-bottom: 1.25rem;
}
.otp-sent-banner .material-icons-round { font-size: 18px; }

/* OTP Digit Boxes */
.otp-digits {
  display: flex; gap: 8px; justify-content: center; margin-bottom: 1.25rem;
}
.otp-digit {
  width: 46px; height: 56px; text-align: center;
  font-size: 1.5rem; font-weight: 700;
  border: 1px solid var(--border); border-radius: 4px;
  background: #fff; color: var(--ink); font-family: inherit;
  outline: none; transition: all var(--dur) var(--ease);
  caret-color: transparent;
}
.otp-digit:focus {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.otp-digit.filled { border-color: var(--blue); }

/* Login steps */
.login-step { display: none; animation: fadeIn var(--dur) var(--ease); }
.login-step.active { display: block; }
.login-step.slide-back { animation: fadeInBack var(--dur) var(--ease); }
@keyframes fadeIn     { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:none; } }
@keyframes fadeInBack { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:none; } }

/* Back to picker link */
.picker-back-link {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .875rem; color: var(--ink-light); margin-bottom: 1.25rem;
  text-decoration: none;
}
.picker-back-link:hover { color: var(--ink); text-decoration: none; }
.picker-back-link .material-icons-round { font-size: 18px; }

/* Google SSO button */
.auth-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1.25rem 0; color: var(--ink-faint); font-size: .8125rem;
}
.auth-divider::before,
.auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border-mid);
}
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .625rem;
  width: 100%; padding: .625rem 1rem;
  border: 1px solid var(--border-mid); border-radius: 4px;
  font-size: .9375rem; font-weight: 500; color: var(--ink);
  background: #fff; cursor: pointer; text-decoration: none;
  transition: background 120ms, box-shadow 120ms;
}
.btn-google:hover {
  background: #F8F9FA; box-shadow: 0 1px 3px rgba(0,0,0,.12);
  text-decoration: none;
}

/* Auth footer */
.auth-footer {
  padding: .875rem 1.5rem;
  border-top: 1px solid var(--border-mid);
  display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; flex-wrap: wrap; flex-shrink: 0;
}
.auth-footer span { font-size: .75rem; color: var(--ink-faint); }
.auth-footer a    { font-size: .75rem; color: var(--ink-light); }
.auth-footer a:hover { text-decoration: underline; }


/* ====================================================
   CONSENT PAGE
   ==================================================== */
.consent-content { width: 100%; max-width: 460px; }

/* Dual logos */
.consent-logos {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-bottom: 1.5rem;
}
.consent-logo-box {
  width: 56px; height: 56px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: #fff;
  overflow: hidden; flex-shrink: 0;
}
.consent-logo-box img   { width: 38px; height: 38px; object-fit: contain; }
.consent-logo-letter    { font-size: 1.375rem; font-weight: 700; color: var(--blue); }
.consent-logo-divider   { display: flex; align-items: center; gap: 5px; }
.consent-dot            { width: 5px; height: 5px; border-radius: 50%; background: var(--border); }

.consent-title {
  font-size: 1.125rem; font-weight: 400;
  color: var(--ink); text-align: center; line-height: 1.5; margin-bottom: .25rem;
}
.consent-provider {
  font-size: .8125rem; color: var(--ink-faint); text-align: center; margin-bottom: 1.5rem;
}

.consent-divider { border: none; border-top: 1px solid var(--border-mid); margin: 0 0 1rem; }

/* User chip */
.consent-user {
  display: flex; align-items: center; gap: .75rem;
  border: 1px solid var(--border); border-radius: 8px;
  padding: .625rem .875rem; margin-bottom: 1.25rem;
}
.consent-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-grad); color: #fff;
  font-size: .875rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.consent-user-name  { font-size: .9375rem; font-weight: 500; display: block; color: var(--ink); }
.consent-user-email { font-size: .8125rem; color: var(--ink-light); display: block; }

/* Scopes */
.consent-scopes-title { font-size: .8125rem; font-weight: 500; color: var(--ink-light); margin-bottom: .625rem; }
.scope-list { list-style: none; display: flex; flex-direction: column; }
.scope-item {
  display: flex; align-items: center; gap: .875rem;
  padding: .625rem .25rem;
  border-bottom: 1px solid var(--border-mid);
}
.scope-item:last-child { border-bottom: none; }
.scope-icon   { font-size: 20px; color: var(--ink-light); flex-shrink: 0; }
.scope-item strong { display: block; font-size: .875rem; color: var(--ink); font-weight: 500; }
.scope-item span   { display: block; font-size: .8125rem; color: var(--ink-light); }

/* Action row — right aligned */
.consent-actions {
  display: flex; justify-content: flex-end; gap: .5rem;
  margin-top: 1.5rem; padding-top: 1rem;
  border-top: 1px solid var(--border-mid);
}
.btn-consent {
  padding: .55rem 1.375rem; border-radius: 4px;
  font-size: .875rem; font-weight: 500;
}
.btn-consent.btn-ghost   { color: var(--blue); border: none; }
.btn-consent.btn-ghost:hover { background: var(--surface); }
.btn-consent.btn-primary { background: var(--blue); color: #fff; }
.btn-consent.btn-primary:hover { background: var(--blue-dark); }

.consent-notice {
  display: flex; align-items: flex-start; gap: .375rem;
  font-size: .75rem; color: var(--ink-faint);
  margin-top: .875rem; line-height: 1.5;
}
.consent-notice .material-icons-round { font-size: 14px; flex-shrink: 0; margin-top: 2px; }

.consent-switch {
  text-align: center; font-size: .8125rem; color: var(--ink-light); margin-top: .75rem;
}
.consent-switch a { color: var(--blue); font-weight: 500; }


/* ====================================================
   DASHBOARD
   ==================================================== */
.page-dashboard { min-height: 100vh; background: var(--surface); }

/* Header */
.dashboard-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-mid);
}
.header-inner {
  max-width: 920px; margin: 0 auto; padding: 0 1.5rem;
  height: 56px; display: flex; align-items: center; gap: 1rem;
}
.header-brand {
  display: flex; align-items: center; gap: .5rem; flex-shrink: 0; text-decoration: none;
}
.header-brand img       { width: 24px; height: 24px; object-fit: contain; }
.header-brand:hover     { text-decoration: none; }
.header-brand-name      { font-size: .875rem; font-weight: 600; color: var(--ink); }

.header-nav { display: flex; gap: .125rem; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: .375rem;
  padding: .4rem .875rem; border-radius: 999px;
  font-size: .875rem; font-weight: 500; color: var(--ink-light);
  transition: all var(--dur) var(--ease); text-decoration: none;
}
.nav-item .material-icons-round { font-size: 18px; }
.nav-item:hover  { background: var(--border-mid); color: var(--ink); text-decoration: none; }
.nav-item.active { background: var(--blue-light); color: var(--blue); }

.header-user {
  display: flex; align-items: center; gap: .625rem; flex-shrink: 0;
  margin-left: auto;
}
.user-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-grad); color: #fff;
  font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.user-name  { font-size: .8125rem; font-weight: 500; color: var(--ink); }
.user-email { font-size: .75rem; color: var(--ink-light); }
.user-info  { display: flex; flex-direction: column; line-height: 1.3; }

/* Main content */
.dashboard-main { max-width: 920px; margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/* Section visibility (tab switching via JS) */
.dashboard-section         { display: none; }
.dashboard-section.active  { display: block; }

/* ── Home Section ──────────────────────────────────────── */
.home-greeting {
  margin-bottom: 2rem;
}
.home-greeting h2 {
  font-size: 1.375rem; font-weight: 400; color: var(--ink);
  margin-bottom: .25rem; letter-spacing: -.01em;
}
.home-greeting p { font-size: .9375rem; color: var(--ink-light); }

.home-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.info-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 8px; padding: 1.25rem 1.5rem;
  display: flex; align-items: flex-start; gap: .875rem;
}
.info-card-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: var(--blue-light); color: var(--blue);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.info-card-icon .material-icons-round { font-size: 20px; }
.info-card-label { font-size: .75rem; color: var(--ink-light); margin-bottom: .25rem; }
.info-card-value { font-size: .9375rem; font-weight: 500; color: var(--ink); }

.home-action {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .875rem; color: var(--blue); font-weight: 500;
}
.home-action .material-icons-round { font-size: 16px; }
.home-action:hover { text-decoration: underline; }

/* ── Personal Info Section ─────────────────────────────── */
.profile-hero {
  display: flex; align-items: center; gap: 1.25rem;
  margin-bottom: 2rem;
}
.profile-avatar-lg {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--brand-grad); color: #fff;
  font-size: 1.5rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.profile-hero-name  { font-size: 1.25rem; font-weight: 400; color: var(--ink); margin-bottom: .125rem; }
.profile-hero-email { font-size: .875rem; color: var(--ink-light); }

.profile-section-title {
  font-size: .75rem; font-weight: 600; color: var(--ink-light);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .75rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--border-mid);
}

.profile-rows { margin-bottom: 2rem; }
.profile-row {
  display: flex; align-items: baseline;
  padding: .75rem 0; border-bottom: 1px solid var(--border-mid);
  gap: 1rem;
}
.profile-row:last-child { border-bottom: none; }
.profile-label {
  font-size: .8125rem; color: var(--ink-light);
  min-width: 140px; flex-shrink: 0;
}
.profile-value { font-size: .9375rem; color: var(--ink); }
.profile-value.empty { color: var(--ink-faint); }

.profile-edit-link {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .875rem; color: var(--blue); font-weight: 500;
  margin-top: .25rem;
}
.profile-edit-link .material-icons-round { font-size: 16px; }
.profile-edit-link:hover { text-decoration: underline; }

/* ── Mobile nav ─────────────────────────────────────────── */
.mobile-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.97); backdrop-filter: blur(8px);
  border-top: 1px solid var(--border-mid);
  padding: .375rem 0 calc(.375rem + env(safe-area-inset-bottom));
  grid-template-columns: repeat(3, 1fr);
}
.mobile-nav-item {
  display: flex; flex-direction: column; align-items: center; gap: .125rem;
  padding: .375rem .5rem; font-size: .6875rem; font-weight: 500;
  color: var(--ink-faint); text-decoration: none;
  transition: color var(--dur);
}
.mobile-nav-item .material-icons-round { font-size: 22px; }
.mobile-nav-item.active { color: var(--blue); }
.mobile-nav-item:hover  { color: var(--ink); text-decoration: none; }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .75rem; font-weight: 500;
}
.badge-active    { background: #E6F4EA; color: var(--green); }
.badge-suspended { background: #FEF3C7; color: #92400E; }
.badge-terminated,.badge-cancelled { background: #FCE8E6; color: var(--red); }
.badge-pending   { background: var(--blue-light); color: var(--blue); }

/* ── Error page ─────────────────────────────────────────── */
.error-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #fff; flex-direction: column; gap: 1rem; text-align: center; padding: 2rem;
}
.error-page h1 { font-size: 1.25rem; font-weight: 500; color: var(--ink); }
.error-page p  { font-size: .875rem; color: var(--ink-light); max-width: 400px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .dashboard-main { padding: 1.25rem 1rem 5rem; }
  .header-nav     { display: none; }
  .user-info      { display: none; }
  .mobile-nav     { display: grid; }
  .home-cards     { grid-template-columns: 1fr 1fr; }
  .profile-label  { min-width: 110px; }
}

@media (max-width: 480px) {
  .auth-body    { align-items: flex-start; padding-top: 2rem; }
  .auth-content,
  .consent-content { max-width: 100%; }
  .home-cards   { grid-template-columns: 1fr; }
  .profile-hero { flex-direction: column; text-align: center; }
}


/* ====================================================
   ACCOUNT PICKER  (multi-account selection)
   ==================================================== */
.account-tile {
  display: flex; align-items: center; gap: .875rem;
  padding: .75rem .5rem; border-radius: 8px;
  text-decoration: none; color: var(--ink);
  transition: background var(--dur) var(--ease);
  cursor: pointer;
}
.account-tile:hover { background: var(--surface); text-decoration: none; }

.account-tile-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-grad); color: #fff;
  font-size: .9375rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.account-tile-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--ink-light);
}
.account-tile-info  { flex: 1; min-width: 0; }
.account-tile-name  { display: block; font-size: .9375rem; font-weight: 500; color: var(--ink); }
.account-tile-email { display: block; font-size: .8125rem; color: var(--ink-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-tile-arrow { color: var(--ink-faint); font-size: 20px; }
.account-tile-sep   { border: none; border-top: 1px solid var(--border-mid); margin: .5rem 0; }
.account-tile-add .account-tile-name { color: var(--blue); }


/* ====================================================
   ACCOUNT SWITCHER DROPDOWN  (in dashboard header)
   ==================================================== */
.account-switcher { position: relative; }

.switcher-trigger {
  display: flex; align-items: center; gap: .25rem;
  padding: .25rem; border-radius: 999px;
  transition: background var(--dur) var(--ease);
}
.switcher-trigger:hover { background: var(--surface); }
.switcher-trigger .user-avatar { pointer-events: none; }
.switcher-chevron { font-size: 18px; color: var(--ink-light); transition: transform var(--dur) var(--ease); }
.switcher-trigger[aria-expanded="true"] .switcher-chevron { transform: rotate(180deg); }

.switcher-drop {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,.12);
  min-width: 260px; z-index: 200; overflow: hidden;
  animation: dropIn .15s var(--ease);
}
@keyframes dropIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.switcher-active {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1rem .875rem;
}
.switcher-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--brand-grad); color: #fff;
  font-size: .875rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.switcher-name  { display: block; font-size: .875rem; font-weight: 600; color: var(--ink); }
.switcher-email { display: block; font-size: .75rem; color: var(--ink-light); }

.switcher-sep   { border: none; border-top: 1px solid var(--border-mid); margin: .25rem 0; }
.switcher-label { font-size: .6875rem; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .06em; padding: .5rem 1rem .25rem; }

.switcher-item {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem 1rem; font-size: .875rem; color: var(--ink);
  text-decoration: none; transition: background var(--dur) var(--ease);
}
.switcher-item:hover { background: var(--surface); text-decoration: none; }
.switcher-item .material-icons-round { font-size: 18px; color: var(--ink-light); }

.switcher-item-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-grad); color: #fff;
  font-size: .75rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.switcher-item-name  { display: block; font-size: .875rem; font-weight: 500; color: var(--ink); }
.switcher-item-email { display: block; font-size: .75rem; color: var(--ink-light); }