/* ==========================================================================
   koyke.space — account area redesign
   Loaded after koyke-redesign.css, which defines the --kx-* tokens.

   Covers /system/profile, which is a single route rendering three tabs:
   account, settings and the admin panel. The bundle ships these screens with
   no media queries at all, so every breakpoint here is new behaviour rather
   than an adjustment of existing behaviour.

   Two structural notes that make the selectors below readable:
     * .profile-rightside is the column that appears on the LEFT and
       .profile-leftside the one on the RIGHT. The names are inverted in the
       bundle; they are used as-is here so this file still matches the DOM.
     * Layout is rebuilt by promoting children through `display: contents`,
       because the containers that need to become grid tracks are nested one
       level too deep to be addressed directly.

   Rows injected by koyke-profile.js reuse the bundle's own .profile-box shape
   and carry data-kx="1", so a single set of rules styles native and injected
   rows identically.
   ========================================================================== */

:root {
  --kxp-rail: 248px;
  --kxp-row: 52px;
  --kxp-ok: #6ee7a8;
  --kxp-warn: #f0c674;
  --kxp-bad: #f08a8a;
}

/* --------------------------------------------------------------------------
   1. Page shell
   The bundle centres the card cluster with `margin: 25vh 20px`, which leaves a
   quarter of the viewport empty above the fold and pushes the content of the
   admin tab far below it.
   -------------------------------------------------------------------------- */

.profile {
  display: grid !important;
  grid-template-columns: var(--kxp-rail) minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 0 !important;
  margin: 0 auto !important;
  /* The public header is position:fixed (~96–120px). The bundle cleared it
     with margin: 25vh; that gap is gone, so this padding has to do the job
     or the identity block sits under the header and reads as “cut off”. */
  padding: 128px 0 clamp(64px, 10vh, 120px) !important;
  max-width: none !important;
  width: 100% !important;
}

.profile-rightside,
.profile-rightside.profile-side {
  display: contents !important;
}

/* --------------------------------------------------------------------------
   2. Sidebar navigation
   -------------------------------------------------------------------------- */

.profile .profile-navigation {
  grid-column: 1 !important;
  grid-row: 1 / span 3 !important;
  position: sticky !important;
  top: 96px !important;
  display: block !important;
  padding: 0 28px 0 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--kx-line) !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  min-height: 220px !important;
}

.profile .profile-navigation nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  background: none !important;
  border: 0 !important;
}

.profile .profile-navigation nav li {
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: var(--kx-r-sm) !important;
  background: none !important;
  color: var(--kx-ink-3) !important;
  font-family: SILight, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0 !important;
  cursor: pointer !important;
  transition: color 0.2s var(--kx-ease), background-color 0.2s var(--kx-ease) !important;
}

.profile .profile-navigation nav li:hover {
  color: var(--kx-ink-2) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}

.profile .profile-navigation nav li.currentTab {
  color: var(--kx-ink) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}

/* Active state is carried by the tinted row alone. A left rule was tried here
   too, but it lands on the same pixel as the row's own left edge and reads as
   a stray artefact; the horizontal rail below reinstates it as an underline,
   where there is no tint to collide with. */
.profile .profile-navigation nav li {
  position: relative !important;
}

.profile .profile-navigation .navigation-icon {
  font-size: 14px !important;
  opacity: 0.75 !important;
  width: 16px !important;
  text-align: center !important;
  flex: 0 0 16px !important;
}

.profile .profile-navigation .navigation-text {
  font-size: 14px !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   3. Identity header
   .profile-information holds the avatar, the name, the two access lines, the
   avatar actions, the free-version footnote and the download button. It is
   flattened so those parts can be placed independently.
   -------------------------------------------------------------------------- */

.profile .profile-information {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 0 clamp(20px, 3vw, 44px) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.profile .profile-content {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 16px !important;
  row-gap: 2px !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 0 22px !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kx-line) !important;
  background: none !important;
}

.profile .profile-avatar {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid var(--kx-line-hi) !important;
  border-radius: var(--kx-r) !important;
  overflow: hidden !important;
  background: var(--kx-surface) !important;
}

.profile .profile-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}

/* .profile-username wraps the name and the two access lines together; the
   access lines are relocated into their own section below, so the wrapper is
   dissolved and only the name is kept in the header. */
.profile .profile-username {
  display: contents !important;
}

.profile .username-text {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: end !important;
  margin: 0 !important;
  font-family: SIMedium, sans-serif !important;
  font-size: clamp(19px, 1.6vw, 23px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: var(--kx-ink) !important;
}

.profile .username-text span {
  font-family: SILight, sans-serif !important;
  font-size: 0.62em !important;
  letter-spacing: 0.02em !important;
  color: var(--kx-ink-4) !important;
  font-variant-numeric: tabular-nums !important;
}

/* Hide the bundle's two-line summary only once the access cards are in the
   tree. Hiding them unconditionally left the page with no subscription data
   at all whenever the enhancement layer failed to run. */
.profile .profile-information:has(.kx-access-grid) .username-subtill {
  display: none !important;
}

.profile .profile-avatar-actions {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.profile .profile-avatar-actions button {
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  padding: 9px 14px !important;
  border-radius: var(--kx-r-sm) !important;
  border: 1px solid var(--kx-line-hi) !important;
  background: none !important;
  color: var(--kx-ink-3) !important;
  font-family: SIMedium, sans-serif !important;
  font-size: 11.5px !important;
  letter-spacing: 0.02em !important;
  box-shadow: none !important;
  transition: color 0.2s var(--kx-ease), border-color 0.2s var(--kx-ease) !important;
}

.profile .profile-avatar-actions button:hover {
  color: var(--kx-ink) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: none !important;
}

/* Injected by the JS layer: the identity line under the username, carrying
   group, account status and uid. */
.profile .kx-identity-meta {
  grid-column: 2 !important;
  grid-row: 2 !important;
  align-self: start !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: SILight, sans-serif !important;
  font-size: 12.5px !important;
  color: var(--kx-ink-3) !important;
}

.profile .kx-chip {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px !important;
  border: 1px solid var(--kx-line) !important;
  border-radius: var(--kx-r-sm) !important;
  font-family: SIMedium, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--kx-ink-2) !important;
  white-space: nowrap !important;
}

.profile .kx-chip[data-tone="ok"] {
  color: var(--kxp-ok) !important;
  border-color: rgba(110, 231, 168, 0.24) !important;
}

.profile .kx-chip[data-tone="bad"] {
  color: var(--kxp-bad) !important;
  border-color: rgba(240, 138, 138, 0.26) !important;
}

.profile .kx-chip[data-tone="strong"] {
  color: #0a0a0c !important;
  background: var(--kx-ink) !important;
  border-color: var(--kx-ink) !important;
}

.profile .kx-chip .kx-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* --------------------------------------------------------------------------
   4. Section scaffolding shared by the injected blocks
   -------------------------------------------------------------------------- */

.profile .kx-section {
  padding: clamp(26px, 4vh, 40px) 0 0 !important;
}

.profile .kx-eyebrow {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 0 14px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--kx-line) !important;
  font-family: SIMedium, sans-serif !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--kx-ink-3) !important;
}

.profile .kx-eyebrow-note {
  font-family: SILight, sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: 12px !important;
  color: var(--kx-ink-4) !important;
}

/* --------------------------------------------------------------------------
   5. Access cards
   The one place with genuinely new markup, because an expiry needs a state, a
   remaining count and a progress reading that no existing element provides.
   -------------------------------------------------------------------------- */

.profile .kx-access-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border-top: 1px solid var(--kx-line) !important;
}

.profile .kx-access-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 18px 20px 20px !important;
  border-bottom: 1px solid var(--kx-line) !important;
  transition: background-color 0.25s var(--kx-ease) !important;
}

.profile .kx-access-card + .kx-access-card {
  border-left: 1px solid var(--kx-line) !important;
}

.profile .kx-access-card:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.022),
    rgba(255, 255, 255, 0)
  ) !important;
}

.profile .kx-access-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.profile .kx-access-version {
  font-family: SIMedium, sans-serif !important;
  font-size: 14.5px !important;
  color: var(--kx-ink) !important;
  letter-spacing: -0.01em !important;
}

.profile .kx-access-until {
  margin: 0 !important;
  font-family: SILight, sans-serif !important;
  font-size: 12.5px !important;
  color: var(--kx-ink-3) !important;
}

.profile .kx-access-left {
  margin: 0 !important;
  font-family: SILight, sans-serif !important;
  font-size: 12.5px !important;
  color: var(--kx-ink-2) !important;
}

.profile .kx-access-left strong {
  font-family: SIMedium, sans-serif !important;
  font-size: 26px !important;
  line-height: 1 !important;
  color: var(--kx-ink) !important;
  letter-spacing: -0.03em !important;
  font-variant-numeric: tabular-nums !important;
  display: block !important;
  margin-bottom: 3px !important;
}

/* Remaining-time bar. Width is set inline by the JS layer from the real
   dates; a lifetime entitlement gets no bar at all. */
.profile .kx-meter {
  height: 2px !important;
  background: var(--kx-line) !important;
  overflow: hidden !important;
  margin-top: auto !important;
}

.profile .kx-meter span {
  display: block !important;
  height: 100% !important;
  background: var(--kx-ink-2) !important;
}

.profile .kx-access-card[data-state="expired"] .kx-meter span {
  background: var(--kxp-bad) !important;
}

.profile .kx-access-card[data-state="soon"] .kx-meter span {
  background: var(--kxp-warn) !important;
}

.profile .kx-access-card[data-state="expired"] .kx-access-left strong {
  color: var(--kxp-bad) !important;
}

/* The renewal link only appears on cards that need it. */
.profile .kx-access-cta {
  align-self: flex-start !important;
  padding: 8px 13px !important;
  border: 1px solid var(--kx-line-hi) !important;
  border-radius: var(--kx-r-sm) !important;
  color: var(--kx-ink-2) !important;
  text-decoration: none !important;
  font-family: SIMedium, sans-serif !important;
  font-size: 11.5px !important;
  transition: color 0.2s var(--kx-ease), border-color 0.2s var(--kx-ease) !important;
}

.profile .kx-access-cta:hover {
  color: var(--kx-ink) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}

/* --------------------------------------------------------------------------
   6. Data rows
   Applies to the bundle's own .profile-box rows and to the ones the JS layer
   injects in the same shape.
   -------------------------------------------------------------------------- */

.profile .profile-leftside {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 0 clamp(20px, 3vw, 44px) !important;
  background: none !important;
  border: 0 !important;
  flex: none !important;
}

.profile .profile-leftside .profile-side,
.profile .profile-side.profile-background {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.profile .profile-box {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: var(--kxp-row) !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kx-line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: background-color 0.2s var(--kx-ease) !important;
}

.profile .profile-box:hover {
  background: rgba(255, 255, 255, 0.016) !important;
}

.profile .profile-box .box-title {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.profile .profile-box .box-icon {
  font-size: 13px !important;
  color: var(--kx-ink-4) !important;
  width: 15px !important;
  flex: 0 0 15px !important;
  text-align: center !important;
}

.profile .profile-box .box-text {
  font-family: SILight, sans-serif !important;
  font-size: 13.5px !important;
  color: var(--kx-ink-3) !important;
  letter-spacing: 0 !important;
}

.profile .profile-box .box-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: SIMedium, sans-serif !important;
  font-size: 13.5px !important;
  color: var(--kx-ink) !important;
  text-align: right !important;
  min-width: 0 !important;
}

/* Identifiers and dates read as data, not prose. */
.profile .profile-box .box-info.kx-mono,
.profile .kx-mono {
  font-family: SIRegular, ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.01em !important;
  color: var(--kx-ink-2) !important;
}

.profile .profile-box .box-info .info-icon {
  font-size: 12px !important;
  color: var(--kx-ink-4) !important;
  cursor: pointer !important;
  transition: color 0.2s var(--kx-ease) !important;
}

.profile .profile-box .box-info .info-icon:hover {
  color: var(--kx-ink) !important;
}

.profile .profile-box .box-info.gauth-connected {
  color: var(--kxp-ok) !important;
}

.profile .kx-muted {
  color: var(--kx-ink-4) !important;
  font-family: SILight, sans-serif !important;
}

/* Once the access cards are present they state the same thing in place, so the
   footnote only earns its keep when the JS layer did not run. Scoped with
   :has() so a failed enhancement still leaves the sentence visible. */
.profile .profile-information:has(.kx-access-grid) .profile-subunlineremaining {
  display: none !important;
}

/* The free-version footnote is demoted to a footnote rather than sitting in
   the middle of the card as emphasised text. */
.profile .profile-subunlineremaining {
  display: block !important;
  margin: 0 !important;
  padding: 12px 0 0 !important;
  border: 0 !important;
  background: none !important;
  font-family: SILight, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  color: var(--kx-ink-4) !important;
  text-align: left !important;
}

/* --------------------------------------------------------------------------
   6b. Purchase history
   Built from GET /api/v1/user/payments. A ruled list rather than a table: four
   short values per entry do not need column rules, and a table would collide
   with the admin tables further down the same stylesheet.
   -------------------------------------------------------------------------- */

.profile .kx-purchase-list {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border-top: 1px solid var(--kx-line) !important;
}

.profile .kx-purchase {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 48px !important;
  padding: 10px 2px !important;
  border-bottom: 1px solid var(--kx-line) !important;
  transition: background-color 0.2s var(--kx-ease) !important;
}

.profile .kx-purchase:hover {
  background: rgba(255, 255, 255, 0.016) !important;
}

.profile .kx-purchase-name {
  font-family: SILight, sans-serif !important;
  font-size: 13.5px !important;
  color: var(--kx-ink) !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.profile .kx-purchase-date {
  font-size: 12.5px !important;
  color: var(--kx-ink-4) !important;
  white-space: nowrap !important;
}

.profile .kx-purchase-sum {
  font-family: SIMedium, sans-serif !important;
  font-size: 13.5px !important;
  color: var(--kx-ink) !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
  text-align: right !important;
}

/* Pre-discount price, shown only when a promocode actually changed it. */
.profile .kx-purchase-was {
  margin-right: 6px !important;
  color: var(--kx-ink-4) !important;
  text-decoration: line-through !important;
  font-family: SILight, sans-serif !important;
  font-size: 11.5px !important;
}

.profile .kx-empty {
  margin: 0 !important;
  padding: 20px 2px !important;
  font-family: SILight, sans-serif !important;
  font-size: 13px !important;
  color: var(--kx-ink-4) !important;
}

/* Leave a seat for the download control, which is a SIBLING of
   .profile-information (promoted onto .profile's grid via display:contents)
   and is pinned to the top-right of this same cell. */
.profile:has(.profile-button) .profile-content {
  padding-right: 148px !important;
}

/* --------------------------------------------------------------------------
   7. Primary action
   Live DOM: .profile-button is a child of .profile-rightside, not of
   .profile-information. display:contents promotes it onto .profile's grid,
   so grid-column/row here address THAT grid. Placing it in the same cell as
   .profile-information without justify-self:end stacked it on the avatar.
   -------------------------------------------------------------------------- */

.profile .profile-button,
.profile .profile-button.aos-init,
.profile .profile-button.aos-animate {
  grid-column: 2 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  align-self: start !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 6px 0 0 !important;
  border: 0 !important;
  background: none !important;
  transform: none !important;
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}

.profile .profile-button button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 11px 18px !important;
  border-radius: var(--kx-r-sm) !important;
  border: 1px solid var(--kx-ink) !important;
  background: var(--kx-ink) !important;
  color: #0a0a0c !important;
  font-family: SIMedium, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  transition: background-color 0.2s var(--kx-ease) !important;
}

.profile .profile-button button:hover {
  background: #fff !important;
  border-color: #fff !important;
}

/* --------------------------------------------------------------------------
   8. Settings tab
   Each control is wrapped in its own block (.activatekey, .changepassword,
   .googleauthentificator) so the rows are addressed through those wrappers.
   -------------------------------------------------------------------------- */

/* The action button is a SIBLING of .profile-box, not a child of it, so the
   wrapper is the row and .profile-box is only its label half. The rule that
   separates rows therefore has to live on the wrapper, or it would stop short
   of the button. */
.profile .activatekey,
.profile .changepassword,
.profile .googleauthentificator {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  width: 100% !important;
  min-height: 64px !important;
  margin: 0 !important;
  padding: 0 2px !important;
  border-bottom: 1px solid var(--kx-line) !important;
  transition: background-color 0.2s var(--kx-ease) !important;
}

.profile .activatekey:hover,
.profile .changepassword:hover,
.profile .googleauthentificator:hover {
  background: rgba(255, 255, 255, 0.016) !important;
}

.profile .activatekey .profile-box,
.profile .changepassword .profile-box,
.profile .googleauthentificator .profile-box {
  display: block !important;
  flex: 1 1 auto !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  background: none !important;
}

.profile .activatekey:hover .profile-box,
.profile .changepassword:hover .profile-box,
.profile .googleauthentificator:hover .profile-box {
  background: none !important;
}

/* The bundle renders .changeram as an empty .profile-box; with no rule of its
   own on the wrapper it collapses once the empty box is removed. */
.profile .changeram {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.profile .box-activatekey,
.profile .box-changepassword,
.profile .box-googleauthentificator {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.profile .activatekey-icon,
.profile .changepassword-icon,
.profile .googleauthentificator-icon {
  font-size: 13px !important;
  color: var(--kx-ink-4) !important;
  width: 15px !important;
  flex: 0 0 15px !important;
  text-align: center !important;
}

.profile .activatekey-text,
.profile .changepassword-text,
.profile .googleauthentificator-text {
  font-family: SILight, sans-serif !important;
  font-size: 13.5px !important;
  color: var(--kx-ink-2) !important;
}

/* The bundle caps these at 115px / 121px, which truncates the longer labels. */
.profile .activatekey button,
.profile .changepassword button,
.profile .googleauthentificator button {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 10px 16px !important;
  border-radius: var(--kx-r-sm) !important;
  border: 1px solid var(--kx-line-hi) !important;
  background: none !important;
  color: var(--kx-ink-2) !important;
  font-family: SIMedium, sans-serif !important;
  font-size: 12px !important;
  box-shadow: none !important;
  transition: color 0.2s var(--kx-ease), border-color 0.2s var(--kx-ease) !important;
}

.profile .activatekey button:hover,
.profile .changepassword button:hover,
.profile .googleauthentificator button:hover {
  color: var(--kx-ink) !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: none !important;
}

/* The bundle renders .changeram as an empty .profile-box, which would show up
   as a stray hairline with nothing in it. */
.profile .changeram .profile-box:empty {
  display: none !important;
}

/* --------------------------------------------------------------------------
   9. Modals
   The bundle centres these in a fixed, full-viewport flex container and gives
   .modal-body `width: 100%; margin: 25px`, capping the result with an inline
   `max-width`. That arrangement is already responsive, so only the cap is
   touched here — setting `width` instead would add to the 25px margins and
   overflow narrow screens.
   -------------------------------------------------------------------------- */

.profile-modals .modal-body,
.profile-modals [id$="-modal"],
.profile-modals [id^="userediting_"] {
  max-width: 480px !important;
  border-radius: var(--kx-r) !important;
  border: 1px solid var(--kx-line-hi) !important;
  background: var(--kx-surface) !important;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85) !important;
}

/* The authenticator modal is a two-column layout (QR plus instructions) and
   needs more room than the single-field ones. The bundle addresses it by
   class, not by id, so both are matched here. */
.profile-modals #googleauthentificator-modal,
.profile-modals .googleauthentificator-modal {
  max-width: 720px !important;
}

.profile-modals .gauth-content ul li {
  width: auto !important;
  max-width: none !important;
  font-family: SILight, sans-serif !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--kx-ink-2) !important;
}

.profile-modals .gauth-guide-title {
  font-family: SIMedium, sans-serif !important;
  font-size: 15px !important;
  color: var(--kx-ink) !important;
  letter-spacing: -0.01em !important;
}

.profile-modals .gauth-qr {
  width: 200px !important;
  flex: 0 0 200px !important;
  border-radius: var(--kx-r-sm) !important;
  overflow: hidden !important;
}

/* Empty src is `data:image/png;base64,` until Generate runs; browsers show a
   broken-image glyph with alt "QR Code". Hide that placeholder. */
.profile-modals .gauth-qr img[src="data:image/png;base64,"] {
  display: none !important;
}

.profile-modals .keys-list {
  max-height: min(52vh, 400px) !important;
}

.profile-modals input,
.profile .userediting-inputs input {
  border-radius: var(--kx-r-sm) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--kx-line) !important;
  color: var(--kx-ink) !important;
  font-family: SILight, sans-serif !important;
  font-size: 13.5px !important;
}

.profile-modals input:focus,
.profile .userediting-inputs input:focus {
  border-color: rgba(255, 255, 255, 0.26) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   10. Admin panel
   -------------------------------------------------------------------------- */

.profile .profile-panel,
.profile .profile-background.profile-panel {
  grid-column: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 0 clamp(20px, 3vw, 44px) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.profile .profile-panel nav {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  margin: 0 0 4px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kx-line) !important;
}

.profile .profile-panel nav li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 16px 12px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--kx-ink-3) !important;
  font-family: SILight, sans-serif !important;
  font-size: 13.5px !important;
  cursor: pointer !important;
  position: relative !important;
  transition: color 0.2s var(--kx-ease) !important;
}

.profile .profile-panel nav li:first-child {
  padding-left: 0 !important;
}

.profile .profile-panel nav li:hover {
  color: var(--kx-ink-2) !important;
}

.profile .profile-panel nav li.currentTab {
  color: var(--kx-ink) !important;
  font-family: SIMedium, sans-serif !important;
}

.profile .profile-panel nav li.currentTab::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: -1px;
  height: 1px;
  background: var(--kx-ink);
}

.profile .profile-panel nav li.currentTab:first-child::after {
  left: 0;
}

.profile .profile-users {
  grid-column: 2 !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 0 clamp(20px, 3vw, 44px) !important;
  background: none !important;
  border: 0 !important;
}

/* When the panel tab is active the panel nav and its content are siblings in
   column two, so the content must not repeat the left inset twice. */
.profile .profile-panel + .profile-users,
.profile .profile-leftside .profile-users {
  padding-left: 0 !important;
}

.profile .users-table {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  /* The table has a hard min-width; scrolling the table rather than the page
     keeps the surrounding layout intact on narrow screens. */
  overflow-x: auto !important;
}

.profile .users-table table {
  width: 100% !important;
  min-width: 720px !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: none !important;
}

.profile .users-table thead tr,
.profile .users-table tbody tr {
  height: auto !important;
  background: none !important;
  border-radius: 0 !important;
}

.profile .users-table thead th {
  padding: 0 14px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kx-line-hi) !important;
  background: none !important;
  text-align: left !important;
  font-family: SIMedium, sans-serif !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--kx-ink-3) !important;
  white-space: nowrap !important;
}

.profile .users-table thead th:first-child {
  padding-left: 0 !important;
}

.profile .users-table .table-headicon {
  display: none !important;
}

.profile .users-table tbody td {
  padding: 13px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kx-line) !important;
  background: none !important;
  font-family: SILight, sans-serif !important;
  font-size: 13px !important;
  color: var(--kx-ink-2) !important;
  vertical-align: middle !important;
}

.profile .users-table tbody td:first-child {
  padding-left: 0 !important;
  font-family: SIRegular, ui-monospace, monospace !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--kx-ink-4) !important;
}

.profile .users-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.02) !important;
}

.profile .users-table .table-empty {
  padding: 32px 0 !important;
  color: var(--kx-ink-4) !important;
  text-align: left !important;
}

.profile .users-table .table-graphical {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--kx-ink) !important;
}

.profile .users-table .table-graphical img {
  width: 24px !important;
  height: 24px !important;
  border-radius: var(--kx-r-sm) !important;
  border: 1px solid var(--kx-line) !important;
  object-fit: cover !important;
}

.profile .users-table .box-info {
  justify-content: flex-start !important;
  font-family: SILight, sans-serif !important;
  font-size: 13px !important;
  color: var(--kx-ink-2) !important;
  text-align: left !important;
}

/* Row actions stay invisible until the row is hovered, so eight rows of icons
   do not compete with the data. */
.profile .users-table .td-hover {
  color: var(--kx-ink-4) !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transition: opacity 0.2s var(--kx-ease), color 0.2s var(--kx-ease) !important;
}

.profile .users-table tbody tr:hover .td-hover {
  opacity: 1 !important;
}

.profile .users-table .td-hover:hover {
  color: var(--kx-ink) !important;
}

/* Keep the actions reachable without a pointer. */
.profile .users-table .td-hover:focus-visible {
  opacity: 1 !important;
  color: var(--kx-ink) !important;
}

/* Status badges: flat, single-weight, differentiated by hue only. */
.profile .payment-status,
.profile .launch-status {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  padding: 3px 9px !important;
  border-radius: var(--kx-r-sm) !important;
  border: 1px solid var(--kx-line) !important;
  background: none !important;
  font-family: SIMedium, sans-serif !important;
  font-size: 9.5px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--kx-ink-3) !important;
  white-space: nowrap !important;
}

.profile .payment-status-paid,
.profile .launch-status-finished {
  color: var(--kxp-ok) !important;
  border-color: rgba(110, 231, 168, 0.24) !important;
}

.profile .payment-status-active,
.profile .launch-status-started {
  color: var(--kxp-warn) !important;
  border-color: rgba(240, 198, 116, 0.24) !important;
}

.profile .payment-status-canceled,
.profile .payment-status-expired,
.profile .launch-status-blocked {
  color: var(--kx-ink-4) !important;
}

.profile .payment-status-chargebacked,
.profile .launch-status-crashed {
  color: var(--kxp-bad) !important;
  border-color: rgba(240, 138, 138, 0.26) !important;
}

.profile .payment-promocode-code {
  font-family: SIRegular, ui-monospace, monospace !important;
  font-size: 12px !important;
  color: var(--kx-ink-2) !important;
}

.profile .payment-original {
  color: var(--kx-ink-4) !important;
  text-decoration: line-through !important;
  font-size: 11.5px !important;
}

.profile .launch-details {
  min-width: 0 !important;
}

.profile .launch-details summary {
  cursor: pointer !important;
  font-size: 12px !important;
  color: var(--kx-ink-3) !important;
}

.profile .launch-details pre {
  width: min(680px, 60vw) !important;
  max-height: 240px !important;
  margin: 10px 0 0 !important;
  padding: 12px 14px !important;
  border: 1px solid var(--kx-line) !important;
  border-radius: var(--kx-r-sm) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  font-family: SIRegular, ui-monospace, monospace !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  color: var(--kx-ink-3) !important;
  overflow: auto !important;
}

/* Table toolbar: search first, then paging, with the destructive action
   separated from everything else. */
.profile .tbody-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 0 0 !important;
  border: 0 !important;
  background: none !important;
}

.profile .tbody-searcher {
  grid-column: 1 !important;
  grid-row: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 340px !important;
}

.profile .tbody-searcher input {
  width: 100% !important;
  max-width: none !important;
  padding: 10px 13px !important;
  border-radius: var(--kx-r-sm) !important;
  border: 1px solid var(--kx-line) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--kx-ink) !important;
  font-family: SILight, sans-serif !important;
  font-size: 13px !important;
}

.profile .tbody-searcher input:focus {
  border-color: rgba(255, 255, 255, 0.26) !important;
  outline: none !important;
}

.profile .tbody-pagination {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.profile .tbody-pagination button {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 9px 13px !important;
  border-radius: var(--kx-r-sm) !important;
  border: 1px solid var(--kx-line) !important;
  background: none !important;
  color: var(--kx-ink-3) !important;
  font-family: SIMedium, sans-serif !important;
  font-size: 11.5px !important;
  box-shadow: none !important;
  transition: color 0.2s var(--kx-ease), border-color 0.2s var(--kx-ease) !important;
}

.profile .tbody-pagination button:hover:not(:disabled) {
  color: var(--kx-ink) !important;
  border-color: rgba(255, 255, 255, 0.26) !important;
  background: none !important;
}

.profile .tbody-pagination button:disabled {
  opacity: 0.32 !important;
  cursor: default !important;
}

.profile .tbody-pages {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: SILight, sans-serif !important;
  font-size: 12px !important;
  color: var(--kx-ink-4) !important;
  font-variant-numeric: tabular-nums !important;
}

.profile .tbody-danger {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  margin: 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--kx-line) !important;
}

.profile .tbody-danger button {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 9px 14px !important;
  border-radius: var(--kx-r-sm) !important;
  border: 1px solid rgba(240, 138, 138, 0.24) !important;
  background: none !important;
  color: var(--kxp-bad) !important;
  font-family: SIMedium, sans-serif !important;
  font-size: 11.5px !important;
  box-shadow: none !important;
}

.profile .tbody-danger button:hover {
  border-color: rgba(240, 138, 138, 0.5) !important;
  background: rgba(240, 138, 138, 0.06) !important;
}

/* --------------------------------------------------------------------------
   11. Admin forms
   -------------------------------------------------------------------------- */

.profile .profile-keys,
.profile .profile-promocodes {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  align-items: end !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 780px !important;
  margin: 0 !important;
  padding: 20px 0 0 !important;
  background: none !important;
  border: 0 !important;
}

.profile .profile-keys > *,
.profile .profile-promocodes > * {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.profile .profile-keys input,
.profile .profile-promocodes input {
  width: 100% !important;
  padding: 11px 13px !important;
  border-radius: var(--kx-r-sm) !important;
  border: 1px solid var(--kx-line) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--kx-ink) !important;
  font-family: SILight, sans-serif !important;
  font-size: 13.5px !important;
}

.profile .keys-generatebtn button,
.profile .promocodes-referral button {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 12px 18px !important;
  border-radius: var(--kx-r-sm) !important;
  border: 1px solid var(--kx-ink) !important;
  background: var(--kx-ink) !important;
  color: #0a0a0c !important;
  font-family: SIMedium, sans-serif !important;
  font-size: 12.5px !important;
  box-shadow: none !important;
}

.profile .keys-generatebtn button:hover,
.profile .promocodes-referral button:hover {
  background: #fff !important;
  border-color: #fff !important;
}

.profile .userediting-modal .save-button {
  border-radius: var(--kx-r-sm) !important;
  border: 1px solid var(--kx-ink) !important;
  background: var(--kx-ink) !important;
  color: #0a0a0c !important;
  font-family: SIMedium, sans-serif !important;
}

/* --------------------------------------------------------------------------
   12. Responsive
   New behaviour throughout: the bundle defines no breakpoints for this route.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  :root {
    --kxp-rail: 208px;
  }

  .profile .kx-access-grid {
    grid-template-columns: 1fr !important;
  }

  .profile .kx-access-card + .kx-access-card {
    border-left: 0 !important;
  }
}

@media (max-width: 900px) {
  /* The rail becomes a horizontal strip above the content, which keeps all
     three tabs reachable without a sidebar eating half a tablet screen. */
  .profile {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .profile .profile-navigation {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--kx-line) !important;
    margin-bottom: 4px !important;
  }

  .profile .profile-navigation nav {
    flex-direction: row !important;
    gap: 0 !important;
    overflow-x: auto !important;
  }

  .profile .profile-navigation nav li {
    width: auto !important;
    flex: 0 0 auto !important;
    min-height: 42px !important;
    padding: 0 16px 12px !important;
    border-radius: 0 !important;
    background: none !important;
  }

  .profile .profile-navigation nav li:first-child {
    padding-left: 0 !important;
  }

  .profile .profile-navigation nav li.currentTab {
    background: none !important;
  }

  .profile .profile-navigation nav li.currentTab::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: -1px;
    height: 1px;
    background: var(--kx-ink);
  }

  .profile .profile-navigation nav li.currentTab:first-child::before {
    left: 0;
  }

  .profile .profile-information,
  .profile .profile-leftside,
  .profile .profile-panel,
  .profile .profile-background.profile-panel,
  .profile .profile-users,
  .profile .profile-button {
    grid-column: 1 !important;
    padding-left: 0 !important;
  }

  .profile .profile-information {
    grid-row: 2 !important;
  }

  .profile .profile-button,
  .profile .profile-button.aos-init,
  .profile .profile-button.aos-animate {
    grid-row: 3 !important;
    justify-self: stretch !important;
    padding: 4px 0 18px !important;
  }

  .profile:has(.profile-button) .profile-content {
    padding-right: 0 !important;
  }

  .profile:has(.profile-button) .profile-leftside {
    grid-row: 4 !important;
  }

  .profile .profile-leftside {
    grid-row: 3 !important;
  }
}

@media (max-width: 640px) {
  .profile .profile-content {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    row-gap: 6px !important;
  }

  .profile .profile-avatar {
    width: 46px !important;
    height: 46px !important;
  }

  .profile .profile-avatar-actions {
    grid-column: 1 / -1 !important;
    grid-row: 3 !important;
    padding-top: 4px !important;
  }

  .profile .profile-box {
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 4px !important;
    padding: 13px 2px !important;
    min-height: 0 !important;
  }

  .profile .profile-box .box-info {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  /* Four columns will not fit; name and status lead, date and sum sit under. */
  .profile .kx-purchase {
    grid-template-columns: minmax(0, 1fr) auto !important;
    row-gap: 4px !important;
  }

  .profile .kx-purchase-name {
    white-space: normal !important;
  }

  .profile .kx-purchase-date {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .profile .kx-purchase-sum {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  /* "Google Authenticator" plus its button do not fit on one line here, so the
     row is allowed to wrap and the button drops beneath its own label. */
  .profile .activatekey,
  .profile .changepassword,
  .profile .googleauthentificator {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 14px 2px !important;
  }

  .profile .activatekey .profile-box,
  .profile .changepassword .profile-box,
  .profile .googleauthentificator .profile-box {
    flex: 1 1 100% !important;
  }

  .profile .profile-button button {
    width: 100% !important;
    min-width: 0 !important;
  }

  .profile .tbody-actions {
    grid-template-columns: 1fr !important;
  }

  .profile .tbody-searcher {
    max-width: none !important;
  }

  .profile .tbody-pagination {
    grid-column: 1 !important;
    grid-row: 2 !important;
    flex-wrap: wrap !important;
  }

  .profile .tbody-pages {
    grid-row: 3 !important;
  }

  .profile .tbody-danger {
    grid-row: 4 !important;
  }

  .profile .launch-details pre {
    width: 100% !important;
  }

  .profile-modals .gauth-qr {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 420px) {
  .profile .username-text {
    font-size: 18px !important;
  }

  .profile .kx-access-left strong {
    font-size: 22px !important;
  }
}