:root {
      --page-start: #edf5ff;
      --page-end: #f8f0ff;
      --card: rgba(255, 255, 255, 0.94);
      --heading: #172033;
      --text: #617083;
      --accent: #3568d4;
      --accent-dark: #244fa9;
      --tag-bg: #edf3ff;
      --tag-text: #315fae;
      --shadow: 0 24px 70px rgba(48, 74, 117, 0.16);
    }

    body.dark-mode {
      --page-start: #101827;
      --page-end: #1d1830;
      --card: rgba(24, 31, 48, 0.96);
      --heading: #f3f6ff;
      --text: #b9c4d8;
      --accent: #8db4ff;
      --accent-dark: #c7dbff;
      --tag-bg: #27344d;
      --tag-text: #c7dbff;
      --shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    }

    * {
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      margin: 0;
      padding: 32px 18px;
      display: grid;
      place-items: center;
      color: var(--heading);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
      background: linear-gradient(135deg, var(--page-start), var(--page-end));
    }

    .profile-card {
      width: min(100%, 560px);
      padding: clamp(34px, 7vw, 58px);
      text-align: center;
      border: 1px solid rgba(255, 255, 255, 0.85);
      border-radius: 28px;
      background: var(--card);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
    }

    .avatar {
      display: block;
      width: clamp(112px, 30vw, 144px);
      height: clamp(112px, 30vw, 144px);
      margin: 0 auto 22px;
      object-fit: cover;
      border: 5px solid rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      background: #ffffff;
      box-shadow: 0 12px 30px rgba(48, 74, 117, 0.18);
    }

    h1 {
      margin: 0 0 14px;
      color: var(--heading);
      font-size: clamp(2.1rem, 8vw, 3.4rem);
      line-height: 1.1;
      letter-spacing: 0.06em;
    }

    p {
      margin: 0;
      color: var(--text);
      font-size: 1rem;
      line-height: 1.85;
    }

    section {
      margin-top: 28px;
      padding-top: 24px;
      border-top: 1px solid rgba(53, 104, 212, 0.14);
    }

    h2 {
      margin: 0 0 10px;
      color: var(--heading);
      font-size: 1.25rem;
      line-height: 1.35;
    }

    .about p {
      margin: 0;
      text-align: left;
    }

    .interests ul {
      margin-top: 0;
    }

    .progress-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
    }

    .progress-card {
      min-height: 112px;
      padding: 18px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(53, 104, 212, 0.12);
      border-radius: 18px;
      background: rgba(237, 243, 255, 0.72);
    }

    .progress-card strong {
      color: var(--accent-dark);
      font-size: 1.45rem;
      line-height: 1.2;
    }

    .progress-card span {
      margin-top: 8px;
      color: var(--text);
      font-size: 0.9rem;
    }

    .email {
      display: inline-block;
      margin-top: 10px;
      color: var(--accent);
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: color 0.2s ease, border-color 0.2s ease;
    }

    .email:hover,
    .email:focus-visible {
      color: var(--accent-dark);
      border-bottom-color: currentColor;
      outline: none;
    }

    .theme-toggle {
      margin-top: 22px;
      padding: 10px 18px;
      border: 1px solid rgba(53, 104, 212, 0.16);
      border-radius: 999px;
      color: var(--tag-text);
      background: var(--tag-bg);
      font: inherit;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }

    .theme-toggle:hover,
    .theme-toggle:focus-visible {
      transform: translateY(-2px);
      border-color: var(--accent);
      outline: none;
    }

    .theme-toggle:active {
      transform: translateY(0);
    }

    body.dark-mode .progress-card {
      border-color: rgba(141, 180, 255, 0.18);
      background: rgba(39, 52, 77, 0.72);
    }

    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      margin: 28px 0 0;
      padding: 0;
      list-style: none;
    }

    li {
      padding: 8px 15px;
      color: var(--tag-text);
      font-size: 0.95rem;
      font-weight: 650;
      border-radius: 999px;
      background: var(--tag-bg);
    }

    @media (max-width: 420px) {
      .progress-grid {
        grid-template-columns: 1fr;
      }

      body {
        padding: 18px 12px;
      }

      .profile-card {
        border-radius: 22px;
      }
    }