.panel-head__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 16px;
}

.panel--stats .panel-head__stats {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}
/* Renk paleti */
:root {
  --panel-bg: #f5f7fb;
  --panel-card-bg: #ffffff;
  --panel-primary: #823dea;
  --panel-primary-dark: #833deb;
  --panel-accent: #e0640c;
  --panel-muted: #7e859d;
  --panel-border: rgba(47, 57, 103, 0.12);
}

.panel {
  background: var(--panel-bg);
  min-height: 500px;
  padding: 0px 0 80px;
}

.panel-head {
  background: linear-gradient(135deg, #823dea 0%, #833deb 100%);
  color: #ffffff;
  border-radius: 28px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: minmax(260px, 1.2fr) 1fr;
  align-items: center;
  gap: 32px;
  box-shadow: 0 20px 45px rgba(130, 61, 234, 0.26);
  position: relative;
  overflow: hidden;
}

.panel-head::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.35), rgba(255,255,255,0.08) 60%, transparent 70%);
}

.panel-head__user {
  display: flex;
  align-items: center;
  gap: 18px;
}

.panel-head__avatar {
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.panel-head__name {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 600;
}

.panel-head__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.95rem;
}

.panel-head__meta span {
  color: rgba(255, 255, 255, 0.82);
}

.panel-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
}

.panel-stat {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 18px;
}

.panel-stat__label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.panel-stat__value {
  display: block;
  font-size: 1.6rem;
  margin-top: 6px;
  font-weight: 600;
}

.panel-body {
  margin-top: 36px;
}

.panel-card {
  background: var(--panel-card-bg);
  border-radius: 22px;
  padding: 28px;
  border: 1px solid var(--panel-border);
  box-shadow: 0 20px 45px rgba(47, 57, 103, 0.08);
}

.panel-card + .panel-card {
  margin-top: 28px;
}

.panel-card--menu {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.panel-card--menu .panel-card__title {
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--panel-primary);
}

.panel-card--menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.panel-card--menu li a,
.panel-card--menu .panel-menu__baglanti {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  color: #2f3967;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.panel-card--menu li a:hover,
.panel-card--menu .panel-menu__baglanti:hover {
  background: rgba(47, 57, 103, 0.06);
  border-color: rgba(47, 57, 103, 0.12);
  box-shadow: 0 8px 18px rgba(47, 57, 103, 0.08);
  color: #1a1a1a;
}

.panel-card--menu li a:hover [uk-icon],
.panel-card--menu .panel-menu__baglanti:hover [uk-icon] {
  color: #1a1a1a;
}

.panel-card--menu li.is-active > a,
.panel-card--menu li.uk-active > a,
.panel-card--menu a[aria-current="page"],
.panel-card--menu .panel-menu__baglanti.is-active {
  background: rgba(130, 61, 234, 0.1);
  border-color: rgba(130, 61, 234, 0.35);
  box-shadow: 0 12px 26px rgba(130, 61, 234, 0.16);
  color: #823dea;
}

.panel-card--menu li a .menu-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f3967;
  box-shadow: 0 0 0 4px rgba(47, 57, 103, 0.12);
}

.panel-card--menu li.is-active > a .menu-dot,
.panel-card--menu li.uk-active > a .menu-dot,
.panel-card--menu .panel-menu__baglanti.is-active .menu-dot {
  background: #823dea;
  box-shadow: 0 0 0 4px rgba(130, 61, 234, 0.12);
}

.panel-card--menu li a [uk-icon],
.panel-card--menu .panel-menu__baglanti [uk-icon] {
  color: #2f3967;
}

.panel-card--menu li.is-active > a [uk-icon],
.panel-card--menu li.uk-active > a [uk-icon],
.panel-card--menu .panel-menu__baglanti.is-active [uk-icon] {
  color: #823dea;
}

.panel-card--note {
  margin-top: 20px;
  background: #fff7f7;
  border-color: rgba(238, 49, 49, 0.18);
  color: #c13c3c;
}

.panel-card--content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-card__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(130, 61, 234, 0.12);
}

.panel-card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--panel-primary);
}

.panel-card__actions {
  display: flex;
  gap: 10px;
}

.panel-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  border: 1px solid var(--panel-border);
  background: #f5f7fb;
  color: var(--panel-primary);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.panel-button:hover {
  background: #e8ebf5;
  color: var(--panel-primary-dark);
}

.panel-button--primary {
  background: linear-gradient(135deg, #823dea 0%, #833deb 100%);
  color: #ffffff;
  border: none;
  box-shadow: 0 12px 24px rgba(130, 61, 234, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.panel-button--primary:hover {
  background: linear-gradient(135deg, #823dea 0%, #833deb 100%);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(130, 61, 234, 0.45);
}

.panel-button--danger {
  background: #ee3131;
  color: #ffffff;
  border: none;
}

.panel-button--danger:hover {
  background: #c62828;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(238, 49, 49, 0.2);
}

.panel-button--ghost {
  background: #ffffff;
  color: #823dea;
  border: 2px solid rgba(130, 61, 234, 0.25);
}

.panel-button--ghost:hover,
.panel-button--ghost:focus {
  border-color: #823dea;
  box-shadow: 0 12px 24px rgba(130, 61, 234, 0.18);
  color: #823dea;
}

.panel-button--activate,
.panel-button[data-site-activate],
.panel-button--primary[data-site-activate] {
  background: linear-gradient(135deg, #32cd32 0%, #7cb342 100%) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 12px 24px rgba(50, 205, 50, 0.35) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.panel-button--activate:hover,
.panel-button[data-site-activate]:hover,
.panel-button--primary[data-site-activate]:hover {
  background: linear-gradient(135deg, #32cd32 0%, #7cb342 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 18px 32px rgba(50, 205, 50, 0.45) !important;
}

.panel-button--gri {
  background: #ffffff;
  color: #474747;
  border: 2px solid #474747;
}

.panel-button--gri:hover,
.panel-button--gri:focus {
  border-color: #823dea;
  box-shadow: 0 12px 24px rgba(130, 61, 234, 0.18);
  color: #823dea;
}

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

.panel--account .panel-body {
  margin-top: 28px;
}

.panel-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  background: #f8f9fd;
  min-height: 100%;
}

.panel-summary__label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--panel-muted);
}

.panel-summary__value {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--panel-primary);
  word-break: break-word;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: #eef0f6;
  color: #344054;
  box-shadow: inset 0 0 0 1px rgba(52, 64, 84, 0.08);
}

.status-badge__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(52, 64, 84, 0.12);
}

.status-badge--aktif {
  background: linear-gradient(135deg, #e5f9ec, #def5e6);
  color: #0f6b3d;
  box-shadow: inset 0 0 0 1px rgba(15, 107, 61, 0.18);
}

.status-badge--beklemede {
  background: linear-gradient(135deg, #eaf1ff, #e1ecff);
  color: #1c46a0;
  box-shadow: inset 0 0 0 1px rgba(28, 70, 160, 0.16);
}

.status-badge--dogrulama {
  background: linear-gradient(135deg, #fff6e6, #ffefd1);
  color: #ad5b00;
  box-shadow: inset 0 0 0 1px rgba(173, 91, 0, 0.18);
}

.status-badge--askiya {
  background: linear-gradient(135deg, #ffe6e6, #ffdede);
  color: #b02318;
  box-shadow: inset 0 0 0 1px rgba(176, 35, 24, 0.18);
}

.status-badge--genel {
  background: #eef0f6;
  color: #44495d;
}

.status-badge--info {
  background: linear-gradient(135deg, #e6f0ff, #d6e7ff);
  color: #1e4a8c;
  box-shadow: inset 0 0 0 1px rgba(30, 74, 140, 0.18);
}

.status-badge--closed {
  background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
  color: #666666;
  box-shadow: inset 0 0 0 1px rgba(102, 102, 102, 0.18);
}

.alert-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
}

.alert-box__title {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.alert-box__text {
  font-size: 0.92rem;
  line-height: 1.4;
}

.alert-box--success {
  background: linear-gradient(135deg, #e6f8ef, #eafbf3);
  border-color: rgba(15, 107, 61, 0.24);
  color: #145a32;
}

.alert-box--error {
  background: linear-gradient(135deg, #fff1f0, #ffe4e3);
  border-color: rgba(176, 35, 24, 0.26);
  color: #a1251a;
}

.panel-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.panel-menu__baglanti {
  color: #2f3967;
  font-weight: 500;
}

.panel-menu__baglanti.is-active,
.panel-menu li.uk-active .panel-menu__baglanti {
  color: #823dea;
}

.panel-table table {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

.panel-table thead {
  background: rgba(47, 57, 103, 0.08);
}

.panel-table th {
  font-weight: 600;
  color: #272727;
}

.panel-table tbody tr:hover {
  background: rgba(47, 57, 103, 0.04);
}

.panel-text {
  color: var(--panel-muted);
  font-size: 0.95rem;
  margin: 0;
}

.panel-steps {
  margin: 0;
  padding-left: 18px;
  color: var(--panel-primary);
}

.panel-modal .uk-modal-dialog {
  border-radius: 20px;
  padding: 32px;
}

.panel-modal .uk-input,
.panel-modal .uk-select {
  border-radius: 12px;
  border: 1px solid rgba(47, 57, 103, 0.18);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.panel-modal .uk-input:focus,
.panel-modal .uk-select:focus {
  border-color: var(--panel-primary);
  box-shadow: 0 0 0 3px rgba(130, 61, 234, 0.15);
  outline: none;
}

/* Unified UI input styling within the panel */
.panel .uk-input,
.panel .uk-textarea,
.panel .uk-select {
  border-radius: 14px;
  border: 1px solid rgba(47, 57, 103, 0.18);
  background: #ffffff;
  color: var(--panel-primary);
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.panel .uk-input:hover,
.panel .uk-textarea:hover,
.panel .uk-select:hover {
  border-color: rgba(130, 61, 234, 0.35);
  background: rgba(130, 61, 234, 0.02);
}

.panel .uk-input:focus,
.panel .uk-textarea:focus,
.panel .uk-select:focus {
  border-color: var(--panel-primary);
  box-shadow: 0 0 0 3px rgba(130, 61, 234, 0.15);
  outline: none;
}

.panel .uk-input::placeholder,
.panel .uk-textarea::placeholder {
  color: rgba(47, 57, 103, 0.45);
}

.panel .uk-input[disabled],
.panel .uk-textarea[disabled],
.panel .uk-select[disabled] {
  background: #f3f5fa;
  color: #8a91a6;
  border-color: rgba(47, 57, 103, 0.12);
}

/* Select arrow styled to primary */
.panel .uk-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath fill='%23823dea' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}
.panel .uk-select::-ms-expand{ display:none; }

/* Textarea sizing */
.panel .uk-textarea {
  min-height: 110px;
  resize: vertical;
}

/* Validation states */
.panel .uk-form-danger,
.panel .uk-input.uk-form-danger,
.panel .uk-select.uk-form-danger,
.panel .uk-textarea.uk-form-danger {
  border-color: #ee3131;
  box-shadow: 0 0 0 3px rgba(238, 49, 49, 0.15);
}
.panel .uk-form-success,
.panel .uk-input.uk-form-success,
.panel .uk-select.uk-form-success,
.panel .uk-textarea.uk-form-success {
  border-color: #0f6b3d;
  box-shadow: 0 0 0 3px rgba(15, 107, 61, 0.15);
}

/* Checkbox and radio accent */
.panel input.uk-checkbox,
.panel input.uk-radio {
  accent-color: var(--panel-primary);
  width: 18px;
  height: 18px;
}

/* Keep modal rules consistent (inherits from .panel) */
.panel-modal .panel-button {
  margin-top: 8px;
}

.modal-flow {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.modal-flow__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-flow__steps {
  display: inline-flex;
  gap: 8px;
}

.modal-flow__dot {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(47, 57, 103, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--panel-primary);
  transition: background 0.2s ease, color 0.2s ease;
}

.modal-flow__dot.is-active {
  background: var(--panel-primary);
  color: #ffffff;
}

.modal-flow__dot.is-pass {
  background: rgba(47, 57, 103, 0.25);
  color: #ffffff;
}

.modal-flow__title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--panel-primary);
}

.modal-flow__section {
  display: grid;
  gap: 18px;
}

.modal-flow__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}

.modal-flow__footer-left,
.modal-flow__footer-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-flow__footer-left {
  flex: 1;
}

.modal-flow__footer-right {
  justify-content: flex-end;
  flex: 1;
}

.modal-flow__footer-right .panel-button {
  min-width: 150px;
}

.modal-flow__footer .panel-button {
  margin-top: 0;
}

.modal-hint {
  font-size: 0.85rem;
  color: var(--panel-muted);
  margin-top: 8px;
}

.modal-code {
  display: grid;
  gap: 12px;
}

.modal-code__title {
  font-weight: 600;
  color: var(--panel-primary);
}

.modal-code__block {
  background: rgba(47, 57, 103, 0.08);
  border-radius: 12px;
  padding: 16px;
  overflow-x: auto;
  font-family: 'Fira Code', 'Source Code Pro', monospace;
  color: var(--panel-primary-dark);
}

.modal-code__copy {
  justify-content: center;
}

.modal-feedback {
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.95rem;
}

.modal-feedback.uk-alert {
  background: rgba(47, 57, 103, 0.05);
  color: var(--panel-primary);
}

.modal-complete {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
}

.modal-complete__icon {
  font-size: 2.5rem;
}

.modal-complete__title {
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--panel-primary);
}

.modal-complete__text {
  color: var(--panel-muted);
  font-size: 0.95rem;
  max-width: 320px;
}

@media (max-width: 1024px) {
  .panel-head {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .panel-head__stats {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .panel-card {
    padding: 22px;
  }

  .renew-section {
    padding: 20px;
  }

  .renew-plan-list {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (max-width: 760px) {
  .panel-card__actions {
    width: 100%;
  }

  .panel-card__actions .panel-button {
    flex: 1;
  }

  .renew-form-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}


.panel-modal .panel-color-input {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.panel-modal .panel-color-picker {
  -webkit-appearance: none;
  appearance: none;
  width: 64px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #d8dde6;
  padding: 0;
  background: #fff;
  cursor: pointer;
}

.panel-modal .panel-color-picker::-webkit-color-swatch {
  border-radius: 10px;
  border: none;
}

.panel-modal .panel-color-picker::-moz-color-swatch {
  border-radius: 10px;
  border: none;
}

.panel-modal .panel-color-value {
  min-width: 96px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid #d8dde6;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background-color: #fff;
  color: #1c1f27;
}

.panel-modal .panel-color-value[data-empty="true"] {
  color: #7d8593;
}

.panel-modal .panel-color-clear {
  padding: 10px 16px;
}
.panel-modal .feature-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.panel-modal .feature-group-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border: none;
  background: none;
  font-size: 16px;
  font-weight: 600;
  color: #1c1f27;
  cursor: pointer;
}
.panel-modal .feature-group-toggle:focus-visible {
  outline: 2px solid #823dea;
  border-radius: 6px;
  outline-offset: 2px;
}
.panel-modal .feature-group-toggle__state {
  font-size: 12px;
  font-weight: 600;
  color: #7d8593;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.panel-modal [data-feature-group-list] {
  margin-top: 6px;
}
/* Ensure items respect UIkit grid columns */
.panel-modal [data-feature-group-list] label span {
  width: 100%;
}

/* Feature checkbox chips */
.panel-modal [data-feature-group-list] label {
  display: flex;
  align-items: center;
  position: relative;
}

.panel-modal [data-feature-group-list] label .uk-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.panel-modal [data-feature-group-list] label span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0px 14px 0px 36px;
  border-radius: 12px;
  border: 1px solid rgba(47, 57, 103, 0.16);
  background: #ffffff;
  color: var(--panel-primary);
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  min-height: 40px;
}

.panel-modal [data-feature-group-list] label span::before {
  content: "";
  position: absolute;
  left: 12px;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 2px solid rgba(130, 61, 234, 0.35);
  background: #fff;
  box-sizing: border-box;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.panel-modal [data-feature-group-list] label:hover span {
  border-color: rgba(130, 61, 234, 0.35);
  box-shadow: 0 6px 18px rgba(130, 61, 234, 0.12);
}

.panel-modal [data-feature-group-list] label .uk-checkbox:focus + span {
  box-shadow: 0 0 0 3px rgba(130, 61, 234, 0.15);
}

.panel-modal [data-feature-group-list] label .uk-checkbox:checked + span {
  background: rgba(130, 61, 234, 0.08);
  border-color: rgba(130, 61, 234, 0.6);
  color: #2c2c2c;
}

.panel-modal [data-feature-group-list] label .uk-checkbox:checked + span::before {
  background: linear-gradient(135deg, #823dea, #833deb);
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(130, 61, 234, 0.25);
}

.panel-modal [data-feature-group-list] label .uk-checkbox:checked + span::after {
  content: "\2713";
  position: absolute;
  left: 15px;
  font-size: 12px;
  line-height: 1;
  color: #ffffff;
}

.renew-modal-grid {
  margin-top: 16px;
}

.renew-section {
  background: #ffffff;
  border-radius: 22px;
  padding: 24px 26px;
  border: 1px solid rgba(47, 57, 103, 0.12);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.12);
}
.renew-section + .renew-section { margin-top: 18px; }

.renew-plan-list {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: 18px;
}

.renew-plan-card {
  position: relative;
  display: block;
  border-radius: 20px;
  padding: 18px 20px;
  border: 1px solid rgba(47, 57, 103, 0.16);
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 12px 26px rgba(31, 47, 92, 0.12);
}

.renew-plan-card input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.renew-plan-card__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.renew-plan-card__duration {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--panel-muted);
}

.renew-plan-card__price {
  font-size: 1.38rem;
  font-weight: 700;
  color: var(--panel-primary);
}

.renew-plan-card__description {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--panel-muted);
}

.renew-plan-card__badge {
  position: absolute;
  top: 14px;
  right: 18px;
  background: linear-gradient(120deg, #ffe082, #ffb300);
  color: #5f4100;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.renew-plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(47, 57, 103, 0.18);
  border-color: rgba(130, 61, 234, 0.35);
}

.renew-plan-card:focus-within {
  outline: 3px solid rgba(130, 61, 234, 0.3);
  outline-offset: 4px;
}

.renew-plan-card.is-selected {
  border-color: #823dea;
  box-shadow: 0 24px 48px rgba(130, 61, 234, 0.22);
  background: #ffffff;
}

.renew-plan-card.is-selected .renew-plan-card__duration {
  color: #823dea;
}

.renew-plan-card.is-selected::after {
  content: '';
  position: absolute;
  top: 16px;
  right: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #823dea, #4b7bf7);
  box-shadow: 0 6px 16px rgba(130, 61, 234, 0.35);
}

.renew-license-info {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(130, 61, 234, 0.08);
  color: #1f2f5c;
  font-size: 0.92rem;
  line-height: 1.5;
}

.renew-license-info__projected {
  display: block;
  margin-top: 6px;
  font-weight: 600;
}

.renew-card-form-grid .uk-input,
.renew-card-form-grid .uk-textarea {
  border-radius: 14px;
  border: 1px solid rgba(47, 57, 103, 0.2);
  background: #ffffff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Input icons for better affordance */
#payment-card-name { padding-left: 44px; background-repeat: no-repeat; background-position: 12px center; background-size: 20px 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%237e859d' d='M12 12q-1.875 0-3.188-1.313T7.5 7.5t1.313-3.188T12 3t3.188 1.313T16.5 7.5t-1.313 3.188T12 12m-9 9v-2.25q0-1.125.563-2.063t1.537-1.462Q6.3 14.4 7.8 14.025T10.5 13.5h3q1.5.075 3 .563t2.7 1.725q.975.525 1.538 1.463T21 18.75V21z'/%3E%3C/svg%3E"); }
#payment-card-number { padding-left: 44px; background-repeat: no-repeat; background-position: 12px center; background-size: 20px 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23823dea' d='M3 6h18a1 1 0 0 1 1 1v2H2V7a1 1 0 0 1 1-1m-1 6h20v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1zm4 3v2h4v-2z'/%3E%3C/svg%3E"); }
#payment-exp-month, #payment-exp-year { padding-left: 44px; background-repeat: no-repeat; background-position: 12px center; background-size: 20px 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%237e859d' d='M7 2v2H5a2 2 0 0 0-2 2v2h18V6a2 2 0 0 0-2-2h-2V2h-2v2H9V2zM3 10v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V10z'/%3E%3C/svg%3E"); }
#payment-card-cvv { padding-left: 44px; background-repeat: no-repeat; background-position: 12px center; background-size: 20px 20px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%237e859d' d='M12 1a5 5 0 0 1 5 5v3h1a2 2 0 0 1 2 2v9H4V11a2 2 0 0 1 2-2h1V6a5 5 0 0 1 5-5m3 8V6a3 3 0 0 0-6 0v3z'/%3E%3C/svg%3E"); }

.renew-card-form-grid .uk-input:focus,
.renew-card-form-grid .uk-textarea:focus {
  border-color: #823dea;
  box-shadow: 0 0 0 3px rgba(130, 61, 234, 0.15);
}

.renew-form-footer {
  margin-top: 28px;
}

.renew-form-footer .panel-button--primary {
  padding: 12px 28px;
  font-size: 1rem;
}

.renew-plan-card__description:empty,
#renew-plan-description:empty,
.renew-license-info:empty {
  display: none;
}

#renew-paytr-frame iframe {
  border-radius: 24px;
  border: none;
  box-shadow: 0 24px 54px rgba(15, 23, 42, 0.18);
}

.panel--payment .payment-hero {
  margin-top: 36px;
  margin-bottom: 24px;
  padding: 32px 36px;
  border-radius: 28px;
  background: linear-gradient(120deg, #2f3a72 0%, #45539a 50%, #6171db 100%);
  color: #fff;
  box-shadow: 0 26px 60px rgba(24, 39, 75, 0.32);
}

.payment-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.payment-hero__title {
  margin: 16px 0 4px;
  font-size: 2.2rem;
  font-weight: 700;
}

/* Payment panel section headers */
.payment-panel__head h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--panel-primary);
}
.payment-panel__head p {
  margin: 6px 0 0;
  color: var(--panel-muted);
}
.payment-panel__head {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(130, 61, 234, 0.12);
}

/* Installment table rows as selectable */
.payment-installment-table-wrapper { overflow: hidden; }
.payment-installment-table { border-collapse: separate; border-spacing: 0; }
.payment-installment-table tbody tr {
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.payment-installment-table tbody tr:hover {
  background: rgba(130, 61, 234, 0.08);
}
.payment-installment-table tbody tr.is-selected {
  background: rgba(130, 61, 234, 0.12);
  box-shadow: inset 3px 0 0 #823dea;
}

/* Hide native radio look in installment option */
.payment-installment-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.payment-installment-option {
  position: relative;
}
.payment-installment-option span {
  position: relative;
  padding-left: 28px;
}
.payment-installment-option span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 6px;
  border: 2px solid rgba(130, 61, 234, 0.35);
  background: #fff;
}
.payment-installment-table tbody tr.is-selected .payment-installment-option span::before {
  background: linear-gradient(135deg, #823dea, #833deb);
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(130, 61, 234, 0.18);
}

/* Summary spacing tweaks */
.payment-summary__actions { gap: 10px; }
.payment-summary__actions .panel-button { min-height: 46px; }

.payment-hero__domain {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.82);
}

.payment-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
  font-size: 0.95rem;
}

.payment-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 600;
}

.payment-meta__item {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.payment-hero__actions {
  margin-top: 22px;
}

.payment-layout {
  margin-top: 28px;
}

.payment-panel__head h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--panel-primary);
}

.payment-panel__head p {
  margin: 6px 0 0;
  color: var(--panel-muted);
}

.payment-summary__list {
  margin: 20px 0;
}

.payment-summary__list li + li {
  margin-top: 12px;
}

.payment-summary__list .renew-summary__value {
  font-size: 1.1rem;
}

.payment-summary .panel-button--ghost {
  width: 100%;
  justify-content: center;
}

.payment-form {
  margin-bottom: 48px;
}

.payment-summary .panel-button {
  min-height: 46px;
}

.payment-card {
  margin-top: 28px;
}

.payment-card-grid .uk-input,
.payment-card-grid .uk-textarea {
  min-height: 46px;
}

/* Credit Card Preview */
.ccard-wrap { perspective: 1200px; margin: 12px 0 22px; }
.ccard { position: relative; width: 100%; max-width: 420px; aspect-ratio: 16/10; border-radius: 18px; transform-style: preserve-3d; transition: transform 0.7s ease; box-shadow: 0 24px 60px rgba(130,61,234,0.25); }
.ccard.is-flipped { transform: rotateY(180deg); }

.ccard__side { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 18px; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; }
.ccard__front { background: radial-gradient(1200px 600px at -20% -20%, rgba(255,255,255,0.18), rgba(130,61,234,0.28)), linear-gradient(135deg, #823dea 0%, #833deb 100%); }
.ccard__back { background: linear-gradient(135deg, #823dea 0%, #833deb 100%); transform: rotateY(180deg); }

.ccard__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ccard__chip { width: 44px; height: 32px; border-radius: 6px; background: linear-gradient(180deg, #ffd57a, #d3a93a); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); }
.ccard__brand { font-weight: 700; letter-spacing: 1px; text-transform: uppercase; opacity: 0.92; }

.ccard__number { font-family: 'Fira Code','Source Code Pro',monospace; font-size: 1.12rem; letter-spacing: 2px; word-spacing: 6px; opacity: 0.98; }
.ccard__meta { display: flex; gap: 16px; font-size: 0.86rem; opacity: 0.95; }
.ccard__label { font-size: 0.72rem; opacity: 0.82; display:block; }

/* Back side */
.ccard__strip { height: 42px; background: rgba(0,0,0,0.6); margin: 12px 0; }
.ccard__cvvbox { display: flex; align-items: center; gap: 10px; }
.ccard__cvvfield { background: #fff; color: #000; padding: 6px 10px; border-radius: 6px; min-width: 90px; text-align: right; font-family: 'Fira Code','Source Code Pro',monospace; }

/* Layout helper for the preview row */
.payment-card__preview { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.payment-card__preview .ccard { flex: 0 0 auto; }
.payment-card__preview .ccard-help { color: var(--panel-muted); font-size: 0.92rem; max-width: 420px; }

@media (max-width: 640px) {
  .ccard { max-width: 100%; }
  .payment-card__preview { justify-content: center; }
}

.payment-summary__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

.payment-installments {
  margin-top: 24px;
}

.payment-installment-table-wrapper {
  margin-top: 12px;
  border-radius: 18px;
  border: 1px solid rgba(47, 57, 103, 0.14);
  overflow: hidden;
  box-shadow: 0 18px 36px rgba(31, 47, 92, 0.12);
}

.payment-installment-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
}

.payment-installment-table th,
.payment-installment-table td {
  padding: 14px 18px;
  font-size: 0.95rem;
  color: #223056;
  text-align: left;
}

.payment-installment-table thead {
  background: rgba(47, 57, 103, 0.06);
  font-weight: 600;
}

.payment-installment-table tbody tr + tr {
  border-top: 1px solid rgba(47, 57, 103, 0.1);
}

.payment-installment-table tbody tr {
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.payment-installment-table tbody tr:hover {
  background: rgba(130, 61, 234, 0.08);
}

.payment-installment-table tbody tr.is-selected {
  background: rgba(130, 61, 234, 0.12);
  box-shadow: inset 3px 0 0 #823dea;
}

.payment-installment-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #1f2f5c;
}

.payment-installment-option input[type="radio"] {
  accent-color: #823dea;
  width: 18px;
  height: 18px;
}

.payment-installment-note {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--panel-muted);
}

@media (max-width: 960px) {
  .panel--payment .payment-hero {
    padding: 26px;
  }

  .payment-layout {
    margin-top: 20px;
  }

  .payment-summary {
    margin-top: 20px;
  }
}




    /* Payment summary polish */
    .payment-summary {
      box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12);
      border: 1px solid rgba(47, 57, 103, 0.12);
    }

    .payment-summary__amount {
      font-size: 1.28rem;
      font-weight: 800;
      color: #823dea;
    }

    .payment-summary__actions {
      display: flex;
      gap: 10px;
      margin-top: 14px;
    }

    /* Enhanced summary header and separators */
    .payment-summary__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 2px 0 12px;
    }
    .payment-summary__badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(130, 61, 234, 0.1);
      color: #823dea;
      font-weight: 600;
      font-size: 12px;
    }
    .payment-summary__title {
      margin: 0;
      font-size: 1.12rem;
      font-weight: 800;
      color: var(--panel-primary);
    }
    .payment-summary__separator {
      height: 1px;
      background: rgba(47, 57, 103, 0.12);
      margin: 8px 0 12px;
    }
    .payment-summary__list li + li {
      border-top: 1px solid rgba(47, 57, 103, 0.12);
      padding-top: 8px;
      margin-top: 8px;
    }
    @media (max-width: 640px) {
      .payment-summary__actions .panel-button { width: 100%; }
    }

/* Support Chat Styles */
.support-chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 500px;
}

.support-chat__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: #f8f9fa;
  border-radius: 16px;
  max-height: 600px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.support-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--panel-muted);
}

.support-empty span[uk-icon] {
  color: var(--panel-muted);
  opacity: 0.5;
  margin-bottom: 16px;
}

.support-empty p {
  margin: 0;
  font-size: 0.95rem;
}

.support-message {
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: messageSlideIn 0.3s ease-out;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.support-message--user {
  align-items: flex-end;
}

.support-message--admin {
  align-items: flex-start;
}

.support-message__bubble {
  max-width: 75%;
  padding: 14px 18px;
  border-radius: 18px;
  position: relative;
  word-wrap: break-word;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.support-message--user .support-message__bubble {
  background: linear-gradient(135deg, #823dea 0%, #833deb 100%);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}

.support-message--user .support-message__bubble::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -8px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom-color: #823dea;
  border-right: none;
  border-bottom-left-radius: 0;
}

.support-message--admin .support-message__bubble {
  background: #ffffff;
  color: #2f3967;
  border: 1px solid rgba(47, 57, 103, 0.12);
  border-bottom-left-radius: 4px;
}

.support-message--admin .support-message__bubble::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -8px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom-color: #ffffff;
  border-left: none;
  border-bottom-right-radius: 0;
}

.support-message__bubble p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.support-message__bubble p:not(:last-child) {
  margin-bottom: 8px;
}

.support-message__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--panel-muted);
  padding: 0 4px;
}

.support-message--user .support-message__meta {
  justify-content: flex-end;
}

.support-message--admin .support-message__meta {
  justify-content: flex-start;
}

.support-message__meta span:first-child {
  font-weight: 500;
}

.support-message__meta span:last-child {
  font-weight: 600;
  color: var(--panel-primary);
}

.support-chat__composer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(47, 57, 103, 0.12);
}

.support-chat__composer textarea {
  border-radius: 12px;
  border: 2px solid rgba(47, 57, 103, 0.12);
  padding: 14px 18px;
  font-size: 0.95rem;
  transition: all 0.2s ease;
  resize: none;
}

.support-chat__composer textarea:focus {
  border-color: #823dea;
  box-shadow: 0 0 0 3px rgba(130, 61, 234, 0.1);
  outline: none;
}

.support-chat__composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  gap: 12px;
}

.support-chat__hint {
  font-size: 0.85rem;
  color: var(--panel-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.support-chat__hint span[uk-icon] {
  color: var(--panel-muted);
  opacity: 0.7;
}

.support-chat__composer button[type="submit"] {
  min-width: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Scrollbar styling for chat */
.support-chat__body::-webkit-scrollbar {
  width: 6px;
}

.support-chat__body::-webkit-scrollbar-track {
  background: transparent;
}

.support-chat__body::-webkit-scrollbar-thumb {
  background: rgba(47, 57, 103, 0.2);
  border-radius: 3px;
}

.support-chat__body::-webkit-scrollbar-thumb:hover {
  background: rgba(47, 57, 103, 0.3);
}

/* Responsive adjustments */
@media (max-width: 960px) {
  .support-chat__body {
    padding: 16px;
    max-height: 500px;
    min-height: 300px;
  }

  .support-message__bubble {
    max-width: 85%;
    padding: 12px 16px;
  }

  .support-chat__composer-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .support-chat__composer button[type="submit"] {
    width: 100%;
  }
}