/* 从 profile.html 抽取的页面专属样式 */
/* ========= 尺寸与缩放 ========= */
:root {
  --base-width: 375;
  --base-height: 812;
  --u: 1;
  --primary-color: #5669FF;
  --background-dark: #1a1a1a;
  --text-white: #ffffff;
  --text-gray: #cccccc;
  --card-bg: rgba(255, 255, 255, 0.1);
  --border-radius: calc(12 * var(--u));
  --shadow: 0 calc(4 * var(--u)) calc(20 * var(--u)) rgba(0, 0, 0, 0.3);
}

/* < 375px：固定 375 宽，固定高度并允许滚轮滚动 */
@media (max-width: 374px) {
  :root {
    --u: calc(100vw / var(--base-width));
  }

  html,
  body {
    height: 100svh;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }

  body {
    background: linear-gradient(135deg, #728dff 0%, #9ab2ff 100%);
    overflow-y: auto;
  }

  .mobile-container {
    width: 100vw;
    min-height: 100svh;
    margin: 0;
    overflow-y: auto;
    padding: calc(20 * var(--u));
  }
}

/* 375px ~ 1024px：宽度=视口宽度，高度 auto，可纵向滚动 */
@media (min-width: 375px) and (max-width: 1024px) {
  :root {
    --u: calc(100vw / var(--base-width));
  }

  html,
  body {
    height: auto;
    min-height: 100svh;
  }

  body {
    margin: 0;
    background: linear-gradient(135deg, #728dff 0%, #9ab2ff 100%);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .mobile-container {
    width: 100vw;
    height: auto;
    min-height: calc(var(--base-height) * var(--u));
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    padding: calc(20 * var(--u));
  }
}

/* > 1024px：固定 1024 宽，固定高度并允许滚轮滚动 */
@media (min-width: 1025px) {
  :root {
    --u: calc(1024px / var(--base-width));
  }

  html,
  body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
  }

  body {
    background: linear-gradient(135deg, #728dff 0%, #9ab2ff 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    padding: calc(20 * var(--u)) 0;
  }

  .mobile-container {
    width: 1024px;
    min-height: calc(var(--base-height) * var(--u));
    margin: 0 auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .3);
    overflow: visible;
    padding: calc(20 * var(--u));
  }
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Alibaba Sans', 'Noto Sans SC', 'Noto Sans JP', sans-serif;
  background: linear-gradient(135deg, #728dff 0%, #9ab2ff 100%);
  min-height: 100svh;
  color: var(--text-white);
  overflow-x: hidden;
}

.mobile-container {
  background: linear-gradient(135deg,
      rgba(114, 141, 255, 0.9) 0%,
      rgba(154, 178, 255, 0.9) 50%,
      rgba(26, 26, 26, 0.95) 100%);
  backdrop-filter: blur(10px);
  position: relative;
}

/* 强制覆盖：确保容器可滚动并适配底部安全区 */
.mobile-container { min-height: 100svh !important; overflow-y: auto !important; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important; }

/* 仅在个人资料页禁用页面层滚动，统一滚动到内容区（与通知页一致） */
body {
  overflow-y: auto !important;
}

/* 容器防止外层滚动泄漏 */
  .mobile-container {
    height: auto;
    min-height: 100svh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    -webkit-overflow-scrolling: touch;
  }

/* 内容区滚动与滚动隔离 */
.mobile-container {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 中等移动端（481–767px）：统一滚动到内容区 */
@media (min-width: 481px) and (max-width: 767px) {
  .mobile-container {
    height: auto;
    min-height: 100svh;
    overflow-y: auto;
  }
}

/* 平板（768–1024px）：统一滚动到内容区并消除底部空白 */
@media (min-width: 768px) and (max-width: 1024px) {
  .mobile-container {
    height: auto;
    min-height: 100svh;
    overflow-y: auto;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  }
}

/* 桌面（≥1025px）：移除 body 顶/底部额外留白，容器贴底 */
@media (min-width: 1025px) {
  body {
    padding: 0 !important;
  }

  .mobile-container {
    height: auto;
    min-height: 100svh;
    margin: 0 auto;
    overflow-y: auto;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  }
}

/* Header */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: calc(30 * var(--u));
  position: relative;
}

.back-button {
  background: var(--card-bg);
  border: none;
  border-radius: calc(8 * var(--u));
  padding: calc(8 * var(--u));
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(calc(-2 * var(--u)));
}

.back-button svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  fill: var(--text-white);
}

.page-title {
  font-size: calc(24 * var(--u));
  font-weight: 600;
  color: var(--text-white);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* Avatar Section */
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(30 * var(--u));
}

.avatar-container {
  width: calc(100 * var(--u));
  height: calc(100 * var(--u));
  border-radius: 50%;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: calc(15 * var(--u));
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.avatar-placeholder {
  font-size: calc(36 * var(--u));
  font-weight: 600;
  color: var(--text-white);
  text-transform: uppercase;
}

.user-name {
  font-size: calc(20 * var(--u));
  font-weight: 600;
  color: var(--text-white);
  margin-bottom: calc(5 * var(--u));
}

.user-email {
  font-size: calc(14 * var(--u));
  color: var(--text-gray);
}

/* Info Cards */
.info-cards {
  display: flex;
  flex-direction: column;
  gap: calc(20 * var(--u));
  margin-bottom: calc(40 * var(--u));
}

.info-card {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border-radius: var(--border-radius);
  padding: calc(20 * var(--u));
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.info-card:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(calc(-2 * var(--u)));
}

.card-title {
  font-size: calc(16 * var(--u));
  font-weight: 600;
  color: var(--text-white);
  margin-bottom: calc(15 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}

.card-title img {
  width: calc(25 * var(--u));
  height: calc(25 * var(--u));
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: calc(10 * var(--u));
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: calc(14 * var(--u));
  color: #5669ff;
  font-weight: 600;
}

.info-value {
  font-size: calc(14 * var(--u));
  color: var(--text-white);
  font-weight: 500;
}

.membership-status {
  display: inline-block;
  padding: calc(4 * var(--u)) calc(12 * var(--u));
  border-radius: calc(20 * var(--u));
  font-size: calc(12 * var(--u));
  font-weight: 600;
  text-align: center;
}

.membership-status.active {
  background: linear-gradient(135deg, #4CAF50, #45a049);
  color: white;
}

.membership-status.expired {
  background: linear-gradient(135deg, #757575, #616161);
  color: white;
}

/* Logout Button */
.logout-button {
  width: 100%;
  padding: calc(16 * var(--u));
  background: linear-gradient(135deg, #f44336, #d32f2f);
  border: none;
  border-radius: var(--border-radius);
  color: var(--text-white);
  font-size: calc(16 * var(--u));
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--u));
}

.logout-button:hover {
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  transform: translateY(calc(-2 * var(--u)));
  box-shadow: 0 calc(6 * var(--u)) calc(25 * var(--u)) rgba(244, 67, 54, 0.4);
}

.logout-button svg {
  width: calc(20 * var(--u));
  height: calc(20 * var(--u));
  fill: var(--text-white);
}

/* Clear Cache Button - 继承布局，改变配色 */
.clear-cache-button {
  background: linear-gradient(135deg, #ff9800, #f57c00);
}

.clear-cache-button:hover {
  background: linear-gradient(135deg, #f57c00, #e65100);
  transform: translateY(calc(-2 * var(--u)));
  box-shadow: 0 calc(6 * var(--u)) calc(25 * var(--u)) rgba(255, 152, 0, 0.4);
}

/* Error Message */
.error-message {
  text-align: center;
  color: #ff6b6b;
  font-size: calc(16 * var(--u));
  margin: calc(20 * var(--u)) 0;
  padding: calc(20 * var(--u));
  background: rgba(255, 107, 107, 0.1);
  border-radius: var(--border-radius);
  backdrop-filter: blur(10px);
}

/* Hidden class */
.hidden {
  display: none !important;
}

/* ≥768px：相对缩小元素尺寸，避免显示过大 */
@media (min-width: 768px) and (max-width: 1024px) {
  .header {
    margin-bottom: clamp(16px, 2.4vw, 22px);
  }

  .back-button {
    padding: clamp(6px, 1.2vw, 8px);
    border-radius: 8px;
  }

  .back-button svg {
    width: clamp(16px, 2.2vw, 18px);
    height: clamp(16px, 2.2vw, 18px);
  }

  .page-title {
    font-size: clamp(18px, 2.6vw, 22px);
  }

  .avatar-section {
    margin-bottom: clamp(18px, 2.4vw, 24px);
  }

  .avatar-container {
    width: clamp(72px, 12vw, 96px);
    height: clamp(72px, 12vw, 96px);
  }

  .avatar-placeholder {
    font-size: clamp(24px, 3.2vw, 32px);
  }

  .user-name {
    font-size: clamp(16px, 2.2vw, 20px);
  }

  .user-email {
    font-size: clamp(12px, 1.8vw, 14px);
  }

  .info-cards {
    gap: clamp(12px, 2vw, 16px);
    margin-bottom: clamp(20px, 3vw, 28px);
  }

  .info-card {
    padding: clamp(14px, 2.2vw, 18px);
    border-radius: clamp(10px, 1.2vw, 12px);
  }

  .card-title {
    font-size: clamp(14px, 2vw, 16px);
    margin-bottom: clamp(10px, 1.6vw, 12px);
    gap: clamp(6px, 1.2vw, 8px);
  }

  .card-title img {
    width: clamp(18px, 2.8vw, 22px);
    height: clamp(18px, 2.8vw, 22px);
  }

  .info-item {
    margin-bottom: clamp(8px, 1.4vw, 10px);
  }

  .info-label {
    font-size: clamp(12px, 1.8vw, 14px);
  }

  .info-value {
    font-size: clamp(12px, 1.8vw, 14px);
  }

  .membership-status {
    font-size: clamp(11px, 1.6vw, 12px);
    padding: clamp(3px, 0.8vw, 4px) clamp(10px, 1.6vw, 12px);
    border-radius: 20px;
  }

  .logout-button {
    padding: clamp(12px, 2vw, 14px);
    font-size: clamp(14px, 2vw, 16px);
    border-radius: clamp(10px, 1.2vw, 12px);
  }

  .logout-button svg {
    width: clamp(16px, 2.2vw, 18px);
    height: clamp(16px, 2.2vw, 18px);
  }

  .error-message {
    font-size: clamp(14px, 2vw, 16px);
    padding: clamp(14px, 2.4vw, 18px);
    border-radius: clamp(10px, 1.2vw, 12px);
  }
}

/* ≥1025px：进一步降低上限，保持紧凑视觉比例 */
@media (min-width: 1025px) {
  .header {
    margin-bottom: clamp(16px, 1.6vw, 24px);
  }

  .back-button {
    padding: clamp(6px, 0.9vw, 8px);
    border-radius: 8px;
  }

  .back-button svg {
    width: clamp(16px, 1.2vw, 18px);
    height: clamp(16px, 1.2vw, 18px);
  }

  .page-title {
    font-size: clamp(18px, 1.8vw, 22px);
  }

  .avatar-section {
    margin-bottom: clamp(18px, 1.8vw, 24px);
  }

  .avatar-container {
    width: clamp(72px, 8vw, 92px);
    height: clamp(72px, 8vw, 92px);
  }

  .avatar-placeholder {
    font-size: clamp(24px, 2.2vw, 30px);
  }

  .user-name {
    font-size: clamp(16px, 1.6vw, 20px);
  }

  .user-email {
    font-size: clamp(12px, 1.2vw, 14px);
  }

  .info-cards {
    gap: clamp(12px, 1.6vw, 16px);
    margin-bottom: clamp(20px, 2.4vw, 28px);
  }

  .info-card {
    padding: clamp(14px, 1.6vw, 18px);
    border-radius: clamp(10px, 0.9vw, 12px);
  }

  .card-title {
    font-size: clamp(14px, 1.4vw, 16px);
    margin-bottom: clamp(10px, 1.2vw, 12px);
    gap: clamp(6px, 0.9vw, 8px);
  }

  .card-title img {
    width: clamp(18px, 1.8vw, 22px);
    height: clamp(18px, 1.8vw, 22px);
  }

  .info-item {
    margin-bottom: clamp(8px, 1vw, 10px);
  }

  .info-label {
    font-size: clamp(12px, 1.2vw, 14px);
  }

  .info-value {
    font-size: clamp(12px, 1.2vw, 14px);
  }

  .membership-status {
    font-size: clamp(11px, 1vw, 12px);
    padding: clamp(3px, 0.6vw, 4px) clamp(10px, 1vw, 12px);
    border-radius: 20px;
  }

  .logout-button {
    padding: clamp(12px, 1.2vw, 14px);
    font-size: clamp(14px, 1.4vw, 16px);
    border-radius: clamp(10px, 0.9vw, 12px);
  }

  .logout-button svg {
    width: clamp(16px, 1.2vw, 18px);
    height: clamp(16px, 1.2vw, 18px);
  }

  .error-message {
    font-size: clamp(14px, 1.4vw, 16px);
    padding: clamp(14px, 1.6vw, 18px);
    border-radius: clamp(10px, 0.9vw, 12px);
  }
}