* { box-sizing: border-box; }

:root {
  color-scheme: dark;
  font-family: Bahnschrift, "Segoe UI", sans-serif;
  color: #f9f5ff;
  background: #191532;
}

body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 15% 0, rgba(139, 105, 196, .46), transparent 38%),
    radial-gradient(ellipse at 95% 18%, rgba(95, 163, 193, .22), transparent 34%),
    linear-gradient(135deg, #191532, #252456 58%, #29375f);
}

main { width: min(1180px, 100%); margin: auto; padding: 30px 24px 64px; }
.page-header { margin-bottom: 22px; }
.eyebrow { margin: 25px 0 6px; color: #bfeeff; font-size: 12px; font-weight: 800; letter-spacing: .2em; }
h1 { margin: 0; font-size: clamp(30px, 5vw, 44px); letter-spacing: .035em; }
.intro { max-width: 720px; color: #ddd7ef; line-height: 1.55; }

.toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px 14px;
  margin: 22px 0 12px;
  padding: 16px;
  border: 1px solid rgba(191, 238, 255, .25);
  border-radius: 16px;
  background: rgba(28, 25, 61, .78);
}
.toolbar label { grid-column: 1 / -1; color: #ddd7ef; font-size: 13px; }
.toolbar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
input {
  width: 100%; min-height: 44px; padding: 0 13px;
  border: 1px solid rgba(191, 238, 255, .4); border-radius: 10px;
  color: #fff; background: rgba(10, 10, 30, .5); font: inherit;
}
button {
  min-height: 42px; padding: 0 15px; border: 0; border-radius: 10px;
  color: #241c48; background: linear-gradient(100deg, #f5bfdf, #b9eaff);
  font: inherit; font-weight: 750; cursor: pointer;
}
button.secondary { border: 1px solid rgba(191, 238, 255, .4); color: #f9f5ff; background: rgba(255, 255, 255, .08); }
button.danger { border: 1px solid rgba(255, 160, 194, .5); color: #ffeaf3; background: rgba(138, 54, 91, .42); }
button:disabled { opacity: .55; cursor: wait; }
.status { min-height: 24px; color: #d8d0e8; }
.status.error { color: #ffd0e4; }

.profiles { display: grid; gap: 14px; }
.profile-card {
  padding: 18px;
  border: 1px solid rgba(218, 200, 246, .3);
  border-radius: 16px;
  background: rgba(28, 25, 61, .88);
  box-shadow: 0 8px 26px rgba(12, 12, 35, .18), inset 0 0 0 1px rgba(255, 255, 255, .025);
}
.profile-card.suppressed { opacity: .78; border-color: rgba(255, 195, 224, .38); }
.profile-head { display: flex; align-items: center; gap: 13px; min-width: 0; margin-bottom: 15px; }
.avatar { width: 54px; height: 54px; flex: 0 0 54px; border: 2px solid #c9b7ff; border-radius: 16px; object-fit: cover; background: linear-gradient(145deg, #bca9ff, #65bbd4); }
.avatar-fallback { display: grid; place-items: center; color: #fff; font-size: 24px; }
.avatar-fallback { display: grid; place-items: center; color: #fff; font-size: 24px; }
.profile-title { min-width: 0; flex: 1; }
.profile-title h2 { margin: 0 0 4px; overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
.profile-id { color: #b8b0cb; font-size: 12px; overflow-wrap: anywhere; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.badge { padding: 3px 8px; border: 1px solid rgba(191, 238, 255, .3); border-radius: 999px; color: #d8f7ff; background: rgba(93, 171, 192, .12); font-size: 11px; font-weight: 750; }
.badge.sub { color: #ffe0ef; border-color: rgba(255, 195, 224, .35); background: rgba(255, 195, 224, .1); }
.badge.streamer { color: #fff3c4; border-color: rgba(255, 215, 130, .5); background: rgba(255, 200, 80, .18); font-weight: 800; }
.badge.suppressed { color: #ffd5e5; border-color: rgba(255, 195, 224, .45); background: rgba(138, 54, 91, .28); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 15px; }
.stat { min-width: 0; padding: 10px 12px; border: 1px solid rgba(191, 238, 255, .13); border-radius: 10px; background: rgba(10, 10, 30, .27); }
.stat dt { color: #bdb5d0; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.stat dd { margin: 5px 0 0; color: #fffaff; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.adjust-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 10px; padding-top: 13px; border-top: 1px solid rgba(191, 238, 255, .14); }
.adjust-form label { display: grid; gap: 6px; color: #d8d0e8; font-size: 12px; }
.adjust-form input { min-height: 40px; }
.profile-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
.empty { padding: 32px; border: 1px dashed rgba(191, 238, 255, .3); border-radius: 14px; color: #c9c1d9; text-align: center; }

@media (max-width: 720px) {
  main { padding: 20px 14px 42px; }
  .toolbar { grid-template-columns: minmax(0, 1fr); }
  .toolbar-actions button { flex: 1 1 auto; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adjust-form { grid-template-columns: 1fr 1fr; }
  .adjust-form button { grid-column: 1 / -1; }
}

.identity-icons { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.pokemon-current {
  display: grid; place-items: center; width: 58px; height: 58px; min-height: 58px; padding: 4px;
  border: 1px solid rgba(191, 238, 255, .5); border-radius: 16px;
  background: linear-gradient(145deg, rgba(245, 191, 223, .17), rgba(185, 234, 255, .15));
  box-shadow: 0 0 16px rgba(185, 234, 255, .12);
}
.pokemon-current:hover:not(:disabled) { border-color: #f5bfdf; box-shadow: 0 0 18px rgba(245, 191, 223, .3); transform: translateY(-1px); }
.pokemon-current:disabled { cursor: not-allowed; }
.pokemon-visibility {
  min-height: 32px; padding: 0 10px; border: 1px solid rgba(191, 238, 255, .35);
  color: #d8f7ff; background: rgba(93, 171, 192, .12);
  font-size: 12px; font-weight: 750; border-radius: 9px;
}
.pokemon-visibility:hover:not(:disabled) { border-color: #bfeeff; background: rgba(112, 164, 214, .22); }
.pokemon-visibility.is-hidden { color: #ffd5e5; border-color: rgba(255, 195, 224, .45); background: rgba(138, 54, 91, .28); }
.pokemon-visibility.is-hidden:hover:not(:disabled) { border-color: #f5bfdf; background: rgba(245, 191, 223, .2); }
.pokemon-visibility:disabled { opacity: .4; cursor: not-allowed; }
.pokemon-sprite {
  display: block; width: 48px; height: 48px; flex: 0 0 48px;
  background-repeat: no-repeat; background-size: 960px 768px; image-rendering: pixelated;
}
.pokemon-unknown { display: grid; place-items: center; border: 1px dashed rgba(191, 238, 255, .35); border-radius: 10px; color: #d8d0e8; font-weight: 800; }
#pokemon-picker {
  width: min(940px, calc(100vw - 28px)); max-width: none; max-height: 90vh; padding: 20px;
  overflow: hidden; border: 1px solid rgba(191, 238, 255, .38); border-radius: 18px;
  color: #f9f5ff; background: linear-gradient(145deg, #211c45, #292654 65%, #29375f);
  box-shadow: 0 24px 90px rgba(5, 4, 20, .72), 0 0 30px rgba(185, 234, 255, .12);
}
#pokemon-picker::backdrop { background: rgba(8, 7, 24, .76); backdrop-filter: blur(4px); }
.picker-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.picker-header .eyebrow { margin: 0 0 5px; }
.picker-header h2 { margin: 0; font-size: clamp(22px, 4vw, 30px); }
.picker-description { margin: 7px 0 0; color: #d8d0e8; font-size: 13px; }
.picker-close { min-width: 42px; padding: 0 12px; }
.picker-status { min-height: 20px; margin: 14px 0 8px; color: #bfeeff; font-size: 13px; }
.picker-status.error { color: #ffd0e4; }
.pokemon-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 8px;
  max-height: min(62vh, 640px); padding: 3px 5px 8px 0; overflow: auto;
  scrollbar-color: rgba(191, 238, 255, .48) rgba(10, 10, 30, .25);
}
.pokemon-option {
  display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 78px; padding: 5px;
  border: 1px solid rgba(191, 238, 255, .18); border-radius: 11px;
  color: #f9f5ff; background: rgba(10, 10, 30, .3);
}
.pokemon-option:hover:not(:disabled), .pokemon-option:focus-visible { border-color: #bfeeff; background: rgba(112, 164, 214, .2); outline: none; }
.pokemon-option.selected { border-color: #f5bfdf; background: rgba(245, 191, 223, .16); box-shadow: inset 0 0 0 1px rgba(245, 191, 223, .28); }
.picker-sprite { width: 48px; height: 48px; }
.pokemon-number { color: #ddd7ef; font-size: 11px; font-weight: 750; }
@media (max-width: 520px) {
  .profile-head { align-items: flex-start; }
  .identity-icons { gap: 5px; }
  .avatar, .pokemon-current { width: 46px; height: 46px; flex-basis: 46px; border-radius: 13px; }
  .pokemon-current { min-height: 46px; padding: 0; }
  .pokemon-current .pokemon-sprite { transform: scale(.8); }
  #pokemon-picker { padding: 15px; }
  .pokemon-grid { grid-template-columns: repeat(auto-fill, minmax(68px, 1fr)); gap: 6px; }
}
.pokemon-frame-previews {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin: -3px 0 14px; padding: 8px 12px;
  border: 1px solid rgba(191, 238, 255, .16); border-radius: 12px;
  background: rgba(10, 10, 30, .2);
}
.frame-preview-caption { color: #bdb5d0; font-size: 11px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.frame-preview-list { display: flex; align-items: center; gap: 10px; }
.frame-preview-item { display: grid; justify-items: center; gap: 1px; min-width: 54px; }
.frame-preview-sprite { width: 48px; height: 48px; }
.frame-preview-label { color: #d8d0e8; font-size: 10px; }
.frame-preview-empty { color: #d8d0e8; font-size: 12px; }
@media (max-width: 520px) {
  .pokemon-frame-previews { align-items: flex-start; flex-direction: column; gap: 5px; }
}