.page-profile { background: #f3f6f5; }
.page-profile .mobile-conversion-bar { display: none !important; }
.user-login-page { background: radial-gradient(circle at 12% 8%, rgba(47, 101, 125, 0.15), transparent 31rem), #f3f6f5; min-height: calc(100vh - var(--header-height)); }
.user-login-shell { display: grid; min-height: calc(100vh - var(--header-height)); padding-block: clamp(2rem, 6vw, 5rem); place-items: center; }
.user-login-card { background: rgba(255, 255, 255, 0.96); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 22px 65px rgba(20, 38, 47, 0.1); max-width: 590px; padding: clamp(1.6rem, 5vw, 3.2rem); text-align: center; width: 100%; }
.user-login-icon { align-items: center; background: #e8f0f3; border-radius: 50%; color: var(--blue); display: inline-flex; height: 58px; justify-content: center; margin-bottom: 1.15rem; width: 58px; }
.user-login-icon svg { fill: none; height: 30px; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; width: 30px; }
.user-login-card h1 { font-size: clamp(2.3rem, 6vw, 4rem); margin: 0.55rem 0 1rem; }
.user-login-card > p { color: var(--muted); margin: 0 auto 1.4rem; max-width: 47ch; }
.user-login-card form { margin: 1.4rem 0 1rem; }
.user-google-button { align-items: center; background: #fff; border: 1px solid #cbd5d9; border-radius: 11px; color: var(--soft-ink); display: flex; font-weight: 800; gap: 0.75rem; justify-content: center; min-height: 52px; padding: 0.75rem 1rem; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; width: 100%; }
.user-google-button:hover { border-color: #9fadb3; box-shadow: 0 9px 22px rgba(20, 38, 47, 0.08); transform: translateY(-1px); }
.user-google-button svg { height: 22px; width: 22px; }
.user-login-card small { color: var(--muted); display: block; font-size: 0.7rem; line-height: 1.55; margin: 0 auto; max-width: 55ch; }
.user-login-unavailable { background: #fff3e0; border: 1px solid #ecd5ad; border-radius: 10px; color: #81591c !important; padding: 0.8rem !important; }
.profile-page { background: radial-gradient(circle at 8% 4%, rgba(47, 101, 125, 0.12), transparent 30rem), #f3f6f5; min-height: calc(100vh - var(--header-height)); padding: clamp(2.2rem, 5vw, 4.5rem) 0 clamp(4rem, 8vw, 7rem); }
.profile-shell { display: grid; gap: 1.5rem; }
.profile-flashes { display: grid; gap: 0.5rem; }
.profile-flash { border: 1px solid transparent; border-radius: 12px; margin: 0; padding: 0.8rem 1rem; }
.profile-flash--error { background: #fff0f0; border-color: #efc7c7; color: #902c2c; }
.profile-flash--success { background: #e9f6ee; border-color: #bddfc9; color: #17603b; }
.profile-header { align-items: center; background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 18px 55px rgba(20, 38, 47, 0.07); display: flex; gap: 2rem; justify-content: space-between; padding: clamp(1.4rem, 4vw, 2.4rem); }
.profile-identity { align-items: center; display: flex; gap: 1.2rem; min-width: 0; }
.profile-identity img, .profile-avatar-fallback { border: 4px solid #fff; border-radius: 50%; box-shadow: 0 7px 22px rgba(20, 38, 47, 0.15); flex: 0 0 auto; height: 88px; object-fit: cover; width: 88px; }
.profile-avatar-fallback { align-items: center; background: var(--blue); color: #fff; display: flex; font-size: 2rem; font-weight: 800; justify-content: center; }
.profile-identity h1 { font-size: clamp(2rem, 4.8vw, 3.3rem); margin: 0.2rem 0 0.35rem; overflow-wrap: anywhere; }
.profile-identity p { color: var(--muted); margin: 0; overflow-wrap: anywhere; }
.profile-header__actions { align-items: stretch; display: flex; flex: 0 0 auto; gap: 0.65rem; }
.profile-header__actions form { margin: 0; }
.profile-signout { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-button); color: var(--soft-ink); font-size: 0.82rem; font-weight: 700; height: 100%; min-height: 44px; padding: 0.6rem 1rem; }
.profile-signout:hover { border-color: #aeb9bd; color: var(--blue); }
.profile-live-note { align-items: center; color: var(--muted); display: flex; font-size: 0.76rem; gap: 0.55rem; justify-content: flex-end; min-height: 22px; padding: 0 0.35rem; }
.profile-live-dot { background: #1f9b5d; border-radius: 50%; box-shadow: 0 0 0 5px rgba(31, 155, 93, 0.1); height: 8px; width: 8px; }
.profile-live-note.is-syncing .profile-live-dot { animation: profile-pulse 1s ease-in-out infinite; }
.profile-live-note.is-error .profile-live-dot { background: #c54a4a; box-shadow: 0 0 0 5px rgba(197, 74, 74, 0.1); }
.profile-query-section { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: clamp(1.25rem, 3vw, 2rem); }
.profile-query-section--history { background: rgba(255, 255, 255, 0.72); }
.profile-section-heading { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin-bottom: 1.1rem; padding-bottom: 1rem; }
.profile-section-heading h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); margin: 0.15rem 0 0; }
.profile-section-count { align-items: center; background: #eaf1f4; border-radius: 999px; color: var(--blue); display: flex; font-size: 0.8rem; font-weight: 800; height: 36px; justify-content: center; min-width: 36px; padding: 0 0.65rem; }
.profile-query-grid { display: grid; gap: 0.85rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.profile-query-card { background: #fafcfb; border: 1px solid #dfe6e4; border-left: 4px solid #d59b34; border-radius: 14px; min-width: 0; padding: 1.15rem; }
.profile-query-card--accepted { border-left-color: var(--blue); }
.profile-query-card--completed { background: #f7f9f8; border-left-color: #7f8b90; }
.profile-query-card__topline { align-items: center; display: flex; gap: 0.75rem; justify-content: space-between; }
.profile-query-type { color: var(--muted); font-size: 0.67rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.profile-status-badge { border-radius: 999px; font-size: 0.65rem; font-weight: 800; padding: 0.32rem 0.55rem; white-space: nowrap; }
.profile-status-badge--pending { background: #fff1d8; color: #835314; }
.profile-status-badge--accepted { background: #e3eff5; color: #265d74; }
.profile-status-badge--completed { background: #e9edee; color: #58656b; }
.profile-query-card h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 0.95rem 0 0.4rem; }
.profile-query-reference { color: var(--muted); font-size: 0.72rem; margin-bottom: 1rem; }
.profile-query-update { background: #fff7e7; border-radius: 9px; color: #72501f; font-size: 0.76rem; font-weight: 650; margin: 0; padding: 0.75rem 0.85rem; }
.profile-query-update--accepted { align-items: center; background: #eaf3f7; color: #214f63; display: flex; gap: 0.55rem; }
.profile-query-update--accepted span { animation: profile-pulse 1.8s ease-in-out infinite; background: #2f7897; border-radius: 50%; height: 8px; width: 8px; }
.profile-query-update--completed { background: #edf1f1; color: #526066; }
.profile-empty-state { align-items: center; border: 1px dashed #cbd5d2; border-radius: 14px; display: flex; flex-direction: column; grid-column: 1 / -1; justify-content: center; min-height: 210px; padding: 2rem; text-align: center; }
.profile-empty-state[hidden] { display: none; }
.profile-empty-state > span { align-items: center; background: #eaf1f4; border-radius: 50%; color: var(--blue); display: flex; font-size: 1.25rem; height: 48px; justify-content: center; margin-bottom: 0.7rem; width: 48px; }
.profile-empty-state h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.profile-empty-state p { color: var(--muted); font-size: 0.82rem; margin: 0 0 0.75rem; max-width: 48ch; }
.profile-empty-state a { color: var(--blue); font-size: 0.78rem; font-weight: 800; }
.profile-empty-state--history { min-height: 150px; }
.profile-security-note { color: var(--muted); font-size: 0.72rem; margin: 0; text-align: center; }

@keyframes profile-pulse { 0%, 100% { opacity: 0.45; transform: scale(0.88); } 50% { opacity: 1; transform: scale(1.08); } }

@media (max-width: 820px) {
  .profile-header { align-items: flex-start; flex-direction: column; }
  .profile-header__actions { width: 100%; }
  .profile-header__actions > * { flex: 1; }
  .profile-header__actions .button, .profile-signout { justify-content: center; width: 100%; }
}

@media (max-width: 640px) {
  .profile-page { padding-top: 1rem; }
  .profile-header { border-radius: 17px; }
  .profile-identity { align-items: flex-start; }
  .profile-identity img, .profile-avatar-fallback { height: 62px; width: 62px; }
  .profile-avatar-fallback { font-size: 1.4rem; }
  .profile-identity h1 { font-size: 1.8rem; }
  .profile-identity p { font-size: 0.77rem; }
  .profile-header__actions { display: grid; grid-template-columns: 1fr 0.8fr; }
  .profile-live-note { justify-content: flex-start; }
  .profile-query-section { border-radius: 17px; }
  .profile-query-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-live-dot, .profile-query-update--accepted span { animation: none; }
}
