/* ============ Profile Specific Styles ============ */
    body {
      padding-bottom: 100px;
    }

    .back-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--bg);
      border: 1.5px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 1rem;
      cursor: pointer;
      text-decoration: none;
      transition: all var(0.2s);
    }

    .back-btn:hover {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }

    .page-header {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 18px 0 14px;
    }

    .page-header-title {
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--ink);
    }

    /* Avatar Card */
    .avatar-card {
      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
      border-radius: var(--r-md-xl);
      padding: 24px;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 18px;
      margin-bottom: 20px;
      box-shadow: var(--shadow-brand);
      position: relative;
      overflow: hidden;
    }

    .avatar-card::after {
      content: '';
      position: absolute;
      bottom: -50px;
      right: -30px;
      width: 150px;
      height: 150px;
      background: rgba(255, 255, 255, 0.07);
      border-radius: 50%;
    }

    .avatar-circle {
      width: 64px;
      height: 64px;
      background: rgba(255, 255, 255, 0.22);
      border: 2px solid rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      font-weight: 900;
      flex-shrink: 0;
      text-transform: uppercase;
    }

    .avatar-info {}

    .avatar-name {
      font-size: 1.2rem;
      font-weight: 800;
    }

    .avatar-phone {
      font-size: 0.85rem;
      opacity: 0.8;
      margin-top: 2px;
    }

    .avatar-since {
      font-size: 0.72rem;
      opacity: 0.65;
      margin-top: 4px;
    }

    /* Stats Row */
    .stats-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
      margin-bottom: 20px;
    }

    .stat-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      padding: 14px 12px;
      text-align: center;
      box-shadow: var(--shadow-sm);
    }

    .stat-icon {
      font-size: 1.2rem;
      margin-bottom: 6px;
    }

    .stat-val {
      font-size: 1.1rem;
      font-weight: 900;
      color: var(--ink);
    }

    .stat-val.warning {
      color: #d97706;
    }

    .stat-val.danger {
      color: var(--danger);
    }

    .stat-lbl {
      font-size: 0.68rem;
      color: var(--muted-2);
      margin-top: 2px;
      font-weight: 600;
    }

    /* Section */
    .list-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md-lg);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      margin-bottom: 16px;
    }

    .list-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 15px 16px;
      text-decoration: none;
      cursor: pointer;
      border-bottom: 1px solid var(--border);
      transition: background var(0.2s);
    }

    .list-item:last-child {
      border-bottom: none;
    }

    .list-item:hover {
      background: var(--border-2);
    }

    .li-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      flex-shrink: 0;
    }

    .li-icon.orange {
      background: #fff7ed;
      color: var(--brand);
    }

    .li-icon.purple {
      background: #f5f3ff;
      color: #7c3aed;
    }

    .li-icon.green {
      background: #f0fdf4;
      color: var(--success);
    }

    .li-icon.red {
      background: #fef2f2;
      color: var(--danger);
    }

    .li-info {
      flex-grow: 1;
    }

    .li-title {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--ink);
    }

    .li-sub {
      font-size: 0.75rem;
      color: var(--muted-2);
      margin-top: 1px;
    }

    .li-arrow {
      color: var(--muted-2);
      font-size: 0.8rem;
    }

    .li-badge {
      background: var(--danger);
      color: #fff;
      border-radius: 99px;
      padding: 2px 7px;
      font-size: 0.7rem;
      font-weight: 700;
    }

    /* Section label */
    .section-label-sm {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--muted-2);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin: 20px 0 8px;
    }

    /* Logout */
    .logout-btn {
      width: 100%;
      padding: 14px;
      background: #fef2f2;
      color: var(--danger);
      border: 1.5px solid #fecaca;
      border-radius: var(--r-md);
      font-size: 0.9rem;
      font-weight: 700;
      font-family: var(--font);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all var(0.2s);
    }

    .logout-btn:hover {
      background: var(--danger);
      color: #fff;
      border-color: var(--danger);
    }

    .version-tag {
      text-align: center;
      font-size: 0.72rem;
      color: var(--muted-2);
      margin-top: 20px;
    }

    /* Mobile Header */
    .mobile-top-header {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 14px 18px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .header-container {
      display: flex;
      align-items: center;
    }
    .logo {
      display: flex;
      align-items: center;
      gap: 10px;
      font-weight: 800;
      color: var(--ink);
    }
    .logo-icon {
      background: var(--brand-grd);
      color: #fff;
      width: 32px;
      height: 32px;
      border-radius: var(--r-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
    }

    /* Desktop Breakpoints */
    @media (min-width: 768px) {
      .mobile-top-header {
        display: none;
      }
      .profile-main {
        padding: 40px;
        display: flex;
        justify-content: center;
      }
      .profile-max-width {
        width: 100%;
        max-width: 700px;
      }
      .page-header {
        margin-bottom: 20px;
      }
      .page-header-title {
        font-size: 1.5rem;
      }
      .avatar-card {
        padding: 30px;
        margin-bottom: 30px;
      }
      .avatar-circle {
        width: 80px;
        height: 80px;
        font-size: 2rem;
      }
      .avatar-name {
        font-size: 1.5rem;
      }
      .stats-row {
        gap: 20px;
        margin-bottom: 30px;
      }
      .stat-card {
        padding: 20px;
      }
      .stat-val {
        font-size: 1.5rem;
        margin-bottom: 4px;
      }
      .list-card {
        margin-bottom: 24px;
      }
      .list-item {
        padding: 18px 20px;
      }
      .li-icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
      }
      .li-title {
        font-size: 1rem;
      }
      .li-sub {
        font-size: 0.85rem;
      }
      .section-label-sm {
        font-size: 0.8rem;
        margin: 30px 0 12px;
      }
      .logout-btn {
        padding: 18px;
        font-size: 1rem;
      }
    }