/* ===== Общее: слот авторизации в шапке ===== */
#auth-slot{
  display:inline-flex; align-items:center; gap:6px;
  flex-shrink:0;
}
.auth-user-link{
  display:flex; align-items:center; gap:8px;
  flex-shrink:0;
}
.auth-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  font-family:var(--mono); font-size:12px; font-weight:700;
}
.auth-user-name{
  max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ===== Мобильный дубль слота авторизации внутри выпадающего меню =====
   На десктопе #auth-slot в header-actions полностью покрывает задачу,
   этот блок скрыт. На мобильном (<=760px) header-actions .btn-ghost
   прячется целиком (см. styles.css), поэтому без этого блока залогиненный
   пользователь на телефоне не видел бы ни своё имя, ни кнопку "Выйти". */
.mobile-auth-slot{ display:none; }

@media (max-width: 760px){
  #auth-slot{ display:none; }

  .mobile-auth-slot{
    display:flex; flex-direction:column; align-items:flex-start;
    gap:14px;
    width:100%;
    margin-top:2px; padding-top:16px;
  }
  .mobile-auth-slot .auth-user-link{padding:0; min-width:0; max-width:100%;}
  .mobile-auth-slot .auth-user-name{max-width:220px;}
  .mobile-auth-slot .btn-outline{
    width:100%;
    padding:10px 16px;
  }
  .mobile-auth-slot a.btn-ghost{
    width:100%;
    justify-content:flex-start;
    padding:0;
  }
}

/* ===== Страницы login.html / dashboard.html ===== */
.auth-shell{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:120px 20px 60px;
}
.auth-card{
  width:100%; max-width:380px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);
  padding:36px 32px;
  text-align:center;
}
.auth-card .logo{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; font-size:17px; margin-bottom:22px;
}
.auth-card h1{ font-size:20px; margin-bottom:8px; }
.auth-card .auth-sub{ color:var(--text-dim); font-size:14px; margin-bottom:28px; }

.btn-google{
  width:100%;
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#fff; color:#1f1f1f;
  border-radius:var(--radius-sm);
  padding:12px 18px;
  font-weight:600; font-size:14.5px;
  border:1px solid var(--border);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn-google:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -12px rgba(0,0,0,0.5); }
.btn-google svg{ flex-shrink:0; }

.auth-error{
  margin-top:18px; padding:10px 14px;
  border-radius:var(--radius-sm);
  background:rgba(220,90,90,0.12);
  color:#e39a9a;
  font-size:13px;
  display:none;
}
.auth-error.is-visible{ display:block; }

.auth-loading{
  color:var(--text-faint); font-size:13.5px; font-family:var(--mono);
}

/* ===== Личный кабинет (dashboard.html) ===== */
.dash-shell{ padding:140px 0 100px; }
.dash-head{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px; margin-bottom:36px;
}
.dash-user{ display:flex; align-items:center; gap:14px; }
.dash-avatar{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent);
  font-family:var(--mono); font-weight:700; font-size:18px;
  overflow:hidden;
}
.dash-avatar img{ width:100%; height:100%; object-fit:cover; }
.dash-user h1{ font-size:20px; margin-bottom:2px; }
.dash-user p{ color:var(--text-dim); font-size:13.5px; }

.dash-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:18px;
}
.dash-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:24px;
}
.dash-card h3{ font-size:15px; margin-bottom:6px; }
.dash-card p{ color:var(--text-dim); font-size:13.8px; }

.dash-empty{
  grid-column:1/-1;
  text-align:center; padding:48px 20px;
  border:1px dashed var(--border); border-radius:var(--radius-md);
  color:var(--text-dim);
}
.dash-empty a{ color:var(--accent); }

/* ============ Mobile auth/dashboard hardening ============ */
@media (max-width:760px){
  .auth-shell{min-height:100svh; padding:88px 16px 28px; align-items:flex-start;}
  .auth-card{max-width:100%; padding:28px 20px 24px; border-radius:16px;}
  .auth-card h1{font-size:19px; line-height:1.25;}
  .auth-card .auth-sub{font-size:13.5px; line-height:1.55; margin-bottom:22px;}
  .btn-google{min-height:46px; padding:11px 14px;}

  .dash-shell{padding:96px 16px 56px;}
  .dash-head{align-items:flex-start; margin-bottom:24px;}
  .dash-user{gap:11px; min-width:0;}
  .dash-avatar{width:42px; height:42px; flex:0 0 42px; font-size:16px;}
  .dash-user h1{font-size:18px; line-height:1.25; overflow-wrap:anywhere;}
  .dash-user p{font-size:12.5px; overflow-wrap:anywhere;}
  .dash-grid{grid-template-columns:1fr; gap:12px;}
  .dash-card{padding:20px;}
  .dash-empty{padding:36px 16px; font-size:13.5px; line-height:1.6;}
}