#profile {
  width: min(460px, calc(100% - 32px));
  padding: 30px;
  border: 1px solid #4a3b67;
  border-radius: 24px;
  background: linear-gradient(145deg, #262038, #12141e 74%);
  box-shadow: 0 28px 80px #000a;
}

#profile::backdrop {
  background: rgba(5, 6, 10, .68);
  backdrop-filter: blur(5px);
}

#profile .eyebrow {
  color: #bda0f4;
}

#profile .close {
  color: #d8ccf0;
}

#profile label {
  color: #eee8fa;
}

#profile input {
  min-height: 48px;
  border: 1px solid #4b405f;
  border-radius: 12px;
  background: #171421;
  color: #f5f0ff;
}

#profile input:focus {
  border-color: #ae88ee;
  outline: 2px solid rgba(174, 136, 238, .18);
  outline-offset: 1px;
}

#profile form button,
#profile #logout {
  min-height: 48px;
  border: 1px solid #ae88ee;
  border-radius: 12px;
  background: #ae88ee;
  color: #1c132d;
  font-weight: 800;
}

#profile #register,
#profile #logout {
  background: #2a223d;
  color: #e9e1f7;
}

#profile #register:hover,
#profile #logout:hover {
  border-color: #c9adff;
  background: #382b51;
}

#profile .balance {
  padding: 14px 16px;
  border: 1px solid #403454;
  border-radius: 14px;
  background: #181522;
}

#profile:has(#account:not([hidden])) {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
}

#profile:has(#account:not([hidden])) .close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 20px;
}

.account-dashboard {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
}

.account-dashboard[hidden] {
  display: none !important;
}

.account-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 38px 24px 24px;
  background: rgba(13, 14, 23, .7);
  border-right: 1px solid rgba(175, 137, 239, .18);
}

.account-sidebar strong {
  overflow: hidden;
  color: #f0eaff;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-new-order,
.account-navigation button {
  width: 100%;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: #ece6f8;
  font: 700 15px/1 Manrope, Arial, sans-serif;
  text-align: left;
}

.account-new-order {
  background: #a978e5;
  color: #1d132d;
  text-align: center;
}

.account-navigation {
  display: grid;
  gap: 7px;
}

.account-navigation button {
  padding: 0 14px;
  background: transparent;
}

.account-navigation button::before {
  display: inline-block;
  width: 24px;
  color: #b993f2;
  content: "○";
}

.account-navigation button[data-account-view="orders"]::before {
  content: "▤";
}

.account-navigation button.active,
.account-navigation button:hover {
  border-color: rgba(183, 144, 243, .18);
  background: #302442;
}

#profile .account-sidebar #logout {
  margin-top: auto;
  background: transparent;
  color: #bdb2cf;
}

.account-main {
  min-width: 0;
  padding: 52px 58px;
  overflow-y: auto;
}

.account-view {
  max-width: 610px;
}

.account-view h2 {
  margin: 8px 0 30px;
  color: #f2ecff;
}

.account-balance-card {
  display: grid;
  gap: 8px;
  padding: 22px 24px;
  border: 1px solid rgba(184, 145, 245, .24);
  border-radius: 18px;
  background: linear-gradient(120deg, rgba(89, 59, 137, .44), rgba(28, 24, 40, .56));
}

.account-balance-card span {
  color: #bbb1ca;
  font-size: 14px;
}

.account-balance-card strong {
  color: #dfc8ff;
  font: 700 34px/1 Unbounded, Manrope, sans-serif;
}

.account-main #topup-form {
  max-width: 420px;
}

.account-main #orders {
  display: grid;
  gap: 4px;
}

.account-main .order-row {
  padding: 16px 0;
}

@media (max-width: 700px) {
  #profile:has(#account:not([hidden])) {
    max-height: calc(100vh - 20px);
  }

  .account-dashboard {
    grid-template-columns: 1fr;
  }

  .account-sidebar {
    gap: 10px;
    padding: 48px 20px 18px;
    border-right: 0;
    border-bottom: 1px solid rgba(175, 137, 239, .18);
  }

  .account-navigation {
    grid-template-columns: 1fr 1fr;
  }

  #profile .account-sidebar #logout {
    margin-top: 0;
  }

  .account-main {
    padding: 28px 20px;
  }
}