.profile-page {
      min-height: 100vh;
      padding:
        30px 22px
        80px;

      background:
        radial-gradient(
          circle at 8% 8%,
          rgba(255,35,90,.10),
          transparent 32%
        ),
        radial-gradient(
          circle at 92% 15%,
          rgba(24,91,255,.10),
          transparent 38%
        ),
        #07090e;

      color: #fff;
    }


    .profile-shell {
      width:
        min(1320px,100%);

      margin:
        0 auto;
    }


    .profile-topbar {
      display:
        flex;

      align-items:
        center;

      justify-content:
        space-between;

      gap:
        20px;

      margin-bottom:
        60px;
    }


    .profile-brand {
      display:
        flex;

      align-items:
        center;

      gap:
        12px;

      color:
        #fff;

      text-decoration:
        none;
    }


    .profile-brand img {
      width:
        48px;

      height:
        48px;

      border-radius:
        14px;
    }


    .profile-brand strong {
      display:
        block;

      font-size:
        18px;
    }


    .profile-brand span {
      display:
        block;

      margin-top:
        3px;

      color:
        #7d8799;

      font-size:
        11px;
    }


    .profile-top-actions {
      display:
        flex;

      gap:
        10px;
    }


    .profile-secondary-btn,
    .profile-action-btn {
      height:
        42px;

      padding:
        0 15px;

      border:
        1px solid #27303e;

      border-radius:
        11px;

      background:
        #111620;

      color:
        #fff;

      font-weight:
        700;

      cursor:
        pointer;
    }


    .profile-secondary-btn:hover,
    .profile-action-btn:hover {
      background:
        #19212e;
    }


    .profile-heading {
      margin-bottom:
        32px;
    }


    .profile-eyebrow {
      margin-bottom:
        9px;

      color:
        #ff2d67;

      font-size:
        11px;

      font-weight:
        900;

      letter-spacing:
        .13em;
    }


    .profile-heading h1 {
      margin:
        0 0 10px;

      font-size:
        clamp(
          40px,
          5vw,
          58px
        );

      line-height:
        1;
    }


    .profile-heading p {
      max-width:
        620px;

      margin:
        0;

      color:
        #8e98aa;

      line-height:
        1.7;
    }


    .profile-layout {
      display:
        grid;

      grid-template-columns:
        minmax(0,1.4fr)
        minmax(320px,.6fr);

      gap:
        20px;

      align-items:
        start;
    }


    .profile-main,
    .profile-side {
      display:
        grid;

      gap:
        20px;
    }


    .profile-card {
      padding:
        25px;

      border:
        1px solid #212936;

      border-radius:
        20px;

      background:
        rgba(14,18,26,.93);
    }


    .profile-card-heading {
      display:
        flex;

      justify-content:
        space-between;

      gap:
        20px;

      margin-bottom:
        22px;
    }


    .profile-card-heading h2 {
      margin:
        0 0 5px;

      font-size:
        20px;
    }


    .profile-card-heading p {
      margin:
        0;

      color:
        #818b9d;

      font-size:
        12px;
    }


    .profile-user-header {
      display:
        flex;

      align-items:
        center;

      gap:
        15px;

      padding-bottom:
        22px;

      margin-bottom:
        22px;

      border-bottom:
        1px solid #202735;
    }


    .profile-avatar {
      width:
        58px;

      height:
        58px;

      display:
        grid;

      place-items:
        center;

      border-radius:
        17px;

      background:
        linear-gradient(
          135deg,
          #ff235d,
          #713cff
        );

      font-size:
        21px;

      font-weight:
        900;
    }


    .profile-user-header strong {
      display:
        block;

      font-size:
        18px;
    }


    .profile-user-header span {
      display:
        block;

      margin-top:
        4px;

      color:
        #808a9d;

      font-size:
        12px;
    }


    .profile-info-grid {
      display:
        grid;

      grid-template-columns:
        repeat(2,1fr);

      gap:
        12px;
    }


    .profile-info-item {
      padding:
        15px;

      border:
        1px solid #202735;

      border-radius:
        13px;

      background:
        #0a0e14;
    }


    .profile-info-wide {
      grid-column:
        1 / -1;
    }


    .profile-info-item span {
      display:
        block;

      margin-bottom:
        7px;

      color:
        #7f899c;

      font-size:
        11px;
    }


    .profile-info-item strong {
      font-size:
        13px;
    }


    .profile-card-actions {
      margin-top:
        18px;
    }


    .security-row {
      display:
        grid;

      grid-template-columns:
        44px
        1fr
        auto;

      gap:
        14px;

      align-items:
        center;

      padding:
        17px 0;

      border-top:
        1px solid #202735;
    }


    .security-row:first-of-type {
      border-top:
        0;
    }


    .security-icon {
      width:
        42px;

      height:
        42px;

      display:
        grid;

      place-items:
        center;

      border-radius:
        12px;

      background:
        #151b25;
    }


    .security-content strong {
      display:
        block;

      font-size:
        13px;
    }


    .security-content span {
      display:
        block;

      margin-top:
        4px;

      color:
        #7d8799;

      font-size:
        11px;
    }


    .membership-badge {
      display:
        inline-flex;

      margin-bottom:
        18px;

      padding:
        8px 11px;

      border-radius:
        999px;

      font-size:
        10px;

      font-weight:
        900;
    }


    .membership-badge.active {
      color:
        #45e3a0;

      background:
        rgba(34,197,134,.10);

      border:
        1px solid
        rgba(69,227,160,.20);
    }


    .membership-badge.inactive {
      color:
        #ff758b;

      background:
        rgba(255,66,99,.08);

      border:
        1px solid
        rgba(255,90,118,.18);
    }


    .membership-list {
      display:
        grid;

      gap:
        0;

      margin-bottom:
        20px;
    }


    .membership-list div {
      display:
        flex;

      align-items:
        center;

      justify-content:
        space-between;

      gap:
        15px;

      padding:
        13px 0;

      border-bottom:
        1px solid #202735;
    }


    .membership-list span {
      color:
        #7e889b;

      font-size:
        11px;
    }


    .membership-list strong {
      font-size:
        12px;

      text-align:
        right;
    }


    .profile-primary-btn {
      width:
        100%;

      height:
        45px;

      border:
        0;

      border-radius:
        11px;

      background:
        linear-gradient(
          90deg,
          #ff1853,
          #ff2d6e
        );

      color:
        #fff;

      font-weight:
        800;

      cursor:
        pointer;
    }


    .account-status-row {
      display:
        flex;

      justify-content:
        space-between;

      gap:
        15px;

      padding:
        13px 0;

      border-bottom:
        1px solid #202735;

      font-size:
        12px;
    }


    .account-status-row span {
      color:
        #7e899b;
    }


    .account-good {
      color:
        #45e3a0;
    }


    .profile-admin-btn {
      width:
        100%;

      margin-top:
        18px;
    }


    .profile-modal {
      position:
        fixed;

      inset:
        0;

      z-index:
        6000;

      place-items:
        center;

      padding:
        20px;

      background:
        rgba(0,0,0,.76);

      backdrop-filter:
        blur(8px);
    }


    .profile-modal-card {
      position:
        relative;

      width:
        min(500px,100%);

      padding:
        28px;

      border:
        1px solid #252d3a;

      border-radius:
        22px;

      background:
        #0d1119;

      box-shadow:
        0 30px 90px
        rgba(0,0,0,.6);
    }


    .profile-modal-card h2 {
      margin:
        7px 0 7px;

      font-size:
        28px;
    }


    .profile-modal-card > p {
      margin:
        0 0 22px;

      color:
        #828c9d;

      font-size:
        13px;

      line-height:
        1.6;
    }


    .profile-modal-close {
      position:
        absolute;

      top:
        15px;

      right:
        15px;

      width:
        38px;

      height:
        38px;

      border:
        0;

      border-radius:
        10px;

      background:
        #151b25;

      color:
        #fff;

      font-size:
        22px;

      cursor:
        pointer;
    }


    .profile-field {
      margin:
        14px 0;
    }


    .profile-field label {
      display:
        block;

      margin-bottom:
        7px;

      color:
        #a1a9b7;

      font-size:
        11px;
    }


    .profile-field input {
      width:
        100%;

      height:
        46px;

      padding:
        0 12px;

      border:
        1px solid #26303d;

      border-radius:
        11px;

      background:
        #090c12;

      color:
        #fff;

      outline:
        none;
    }


    .profile-message {
      min-height:
        18px;

      margin:
        12px 0;

      font-size:
        12px;
    }


    .profile-message.success {
      color:
        #45e3a0;
    }


    .profile-message.error {
      color:
        #ff6b84;
    }


    .profile-full-btn {
      margin-top:
        5px;
    }


    @media(
      max-width: 900px
    ) {

      .profile-layout {
        grid-template-columns:
          1fr;
      }
    }


    @media(
      max-width: 620px
    ) {

      .profile-page {
        padding:
          20px 12px
          60px;
      }


      .profile-topbar {
        align-items:
          flex-start;

        margin-bottom:
          45px;
      }


      .profile-top-actions {
        flex-direction:
          column;
      }


      .profile-info-grid {
        grid-template-columns:
          1fr;
      }


      .profile-info-wide {
        grid-column:
          auto;
      }


      .security-row {
        grid-template-columns:
          42px 1fr;
      }


      .security-row
      .profile-action-btn {
        grid-column:
          1 / -1;
      }
    }