/* ─────────────────────────────────────────────────────────────────────────
   CULT Kids · Profile Picker styles (v5 — Cadet Forge)
   Cosmic backdrop · sci-fi tab UI · toggles · none-state swatches.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Overlay ──────────────────────────────────────────────────────────── */
.cp-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(106, 76, 147, 0.32) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 75%, rgba(61, 111, 181, 0.28) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(8, 4, 14, 0.96) 0%, rgba(2, 1, 5, 0.99) 100%);
}
.cp-overlay.is-open { display: flex; }
body.cp-overlay-open { overflow: hidden; }

/* ── Cosmic backdrop ──────────────────────────────────────────────────── */
.cp-cosmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.cp-stars {
  position: absolute; inset: 0; background-repeat: repeat;
  animation: cp-twinkle 6s ease-in-out infinite; opacity: 0.85;
}
.cp-stars--1 {
  background-image:
    radial-gradient(1px 1px at 12% 18%, white 50%, transparent 100%),
    radial-gradient(1px 1px at 28% 64%, white 50%, transparent 100%),
    radial-gradient(1px 1px at 47% 28%, white 50%, transparent 100%),
    radial-gradient(1px 1px at 73% 81%, white 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 88% 12%, white 50%, transparent 100%),
    radial-gradient(1px 1px at 8% 88%, white 50%, transparent 100%),
    radial-gradient(1px 1px at 92% 47%, white 50%, transparent 100%),
    radial-gradient(1.2px 1.2px at 35% 92%, white 50%, transparent 100%),
    radial-gradient(1px 1px at 62% 5%, white 50%, transparent 100%);
  background-size: 100% 100%;
  animation-duration: 4s;
}
.cp-stars--2 {
  background-image:
    radial-gradient(0.8px 0.8px at 20% 35%, rgba(220,220,255,0.9) 50%, transparent 100%),
    radial-gradient(0.8px 0.8px at 55% 18%, rgba(220,220,255,0.9) 50%, transparent 100%),
    radial-gradient(0.8px 0.8px at 78% 60%, rgba(220,220,255,0.9) 50%, transparent 100%),
    radial-gradient(0.8px 0.8px at 38% 75%, rgba(220,220,255,0.9) 50%, transparent 100%),
    radial-gradient(0.9px 0.9px at 67% 32%, rgba(220,220,255,0.9) 50%, transparent 100%),
    radial-gradient(0.8px 0.8px at 18% 78%, rgba(220,220,255,0.9) 50%, transparent 100%),
    radial-gradient(0.8px 0.8px at 96% 22%, rgba(220,220,255,0.9) 50%, transparent 100%);
  background-size: 100% 100%;
  animation-duration: 6.5s; animation-delay: 1s; opacity: 0.55;
}
.cp-stars--3 {
  background-image:
    radial-gradient(1.4px 1.4px at 25% 55%, #FFD580 50%, transparent 100%),
    radial-gradient(1.4px 1.4px at 70% 22%, #C99FFF 50%, transparent 100%),
    radial-gradient(1.4px 1.4px at 50% 88%, #80D0FF 50%, transparent 100%),
    radial-gradient(1.4px 1.4px at 85% 75%, #FFAACC 50%, transparent 100%);
  background-size: 100% 100%;
  animation-duration: 9s; animation-delay: 2s; opacity: 0.7;
}
@keyframes cp-twinkle { 0%,100% { opacity: 0.85; } 50% { opacity: 0.35; } }

.cp-shoot {
  position: absolute; width: 140px; height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0) 10%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%);
  filter: drop-shadow(0 0 6px rgba(255, 220, 180, 0.8));
  opacity: 0; pointer-events: none;
}
.cp-shoot--1 { top: 18%; left: -160px; transform: rotate(15deg);  animation: cp-shoot1 7s linear infinite;  animation-delay: 1s; }
.cp-shoot--2 { top: 60%; left: -160px; transform: rotate(-8deg);  animation: cp-shoot2 11s linear infinite; animation-delay: 4s; }
.cp-shoot--3 { top: 35%; left: -160px; transform: rotate(22deg);  animation: cp-shoot3 9s linear infinite;  animation-delay: 7s; }
@keyframes cp-shoot1 { 0%{transform:translateX(0) translateY(0) rotate(15deg);opacity:0;} 3%{opacity:1;} 20%{opacity:1;} 25%{transform:translateX(110vw) translateY(30vh) rotate(15deg);opacity:0;} 100%{opacity:0;} }
@keyframes cp-shoot2 { 0%{transform:translateX(0) translateY(0) rotate(-8deg);opacity:0;} 3%{opacity:1;} 18%{opacity:1;} 23%{transform:translateX(110vw) translateY(-15vh) rotate(-8deg);opacity:0;} 100%{opacity:0;} }
@keyframes cp-shoot3 { 0%{transform:translateX(0) translateY(0) rotate(22deg);opacity:0;} 3%{opacity:1;} 20%{opacity:1;} 25%{transform:translateX(110vw) translateY(40vh) rotate(22deg);opacity:0;} 100%{opacity:0;} }

.cp-nebula {
  position: absolute; top: -10%; left: -10%; width: 60%; height: 60%;
  background: radial-gradient(ellipse, rgba(106, 76, 147, 0.18) 0%, transparent 70%);
  filter: blur(40px); animation: cp-nebula-drift 32s ease-in-out infinite;
}
@keyframes cp-nebula-drift { 0%,100%{transform:translate(0,0);} 50%{transform:translate(40px,30px);} }

/* ── Modal ────────────────────────────────────────────────────────────── */
.cp-modal {
  position: relative;
  max-width: 940px; width: 100%; margin: auto;
  background: linear-gradient(180deg, rgba(20,12,28,0.94) 0%, rgba(8,5,16,0.96) 100%);
  border: 1px solid rgba(201,168,76,0.4); border-radius: 6px;
  padding: 36px 40px 32px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7), inset 0 0 60px rgba(106,76,147,0.06), 0 0 0 1px rgba(106,76,147,0.18);
  z-index: 10;
}
.cp-modal::before {
  content: ''; position: absolute; inset: -1px; border-radius: 6px;
  background: linear-gradient(135deg, rgba(201,168,76,0.4), transparent 30%, transparent 70%, rgba(106,76,147,0.4));
  z-index: -1; filter: blur(2px); opacity: 0.5;
}

.cp-eyebrow {
  font-family: 'Segoe UI', sans-serif;
  font-size: 9px; letter-spacing: .32em; text-transform: uppercase;
  color: #C9A84C; margin: 0 0 14px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(201,168,76,0.18); text-align: center;
}
.cp-modal__h {
  font-family: Georgia, serif; font-size: 30px; color: #FFCC88;
  margin: 0 0 8px; text-shadow: 0 0 30px rgba(255,204,136,0.25);
}
.cp-modal__sub {
  font-family: Georgia, serif; font-size: 14px; line-height: 1.55;
  color: #D8C0A0; margin: 0 0 22px;
}

/* ── Existing-profile list ───────────────────────────────────────────── */
.cp-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.cp-profile {
  background: rgba(201,168,76,0.05);
  border: 1px solid rgba(201,168,76,0.25); border-radius: 4px;
  padding: 14px 8px 12px; cursor: pointer; text-align: center;
  transition: all .18s; font-family: Georgia, serif; color: inherit;
}
.cp-profile:hover {
  background: rgba(201,168,76,0.16); border-color: #C9A84C;
  transform: translateY(-3px); box-shadow: 0 8px 24px rgba(201,168,76,0.15);
}
.cp-profile__avatar { display: block; width: 90px; height: 135px; margin: 0 auto 6px; }
.cp-profile__avatar svg { width: 100%; height: 100%; display: block; }
.cp-profile__name { display: block; font-size: 13px; color: #FFCC88; word-break: break-word; letter-spacing: .03em; }
.cp-empty { font-family: Georgia, serif; font-size: 14px; color: #B89878; font-style: italic; padding: 14px 0; text-align: center; }

/* ── New-explorer button ─────────────────────────────────────────────── */
.cp-new-btn {
  display: block; width: 100%; background: transparent;
  border: 1px solid #C9A84C; color: #C9A84C;
  font-family: 'Segoe UI', sans-serif; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase;
  padding: 14px; border-radius: 2px; cursor: pointer;
  transition: all .18s; margin-bottom: 12px;
}
.cp-new-btn:hover {
  background: rgba(201,168,76,0.15); color: #FFCC88; border-color: #FFCC88; letter-spacing: .26em;
}

/* ── Form layout ──────────────────────────────────────────────────────── */
.cp-form { margin-top: 18px; padding-top: 22px; border-top: 1px solid rgba(201,168,76,0.2); }
.cp-form__layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }

/* Preview pane */
.cp-form__preview { position: sticky; top: 0; text-align: center; }
.cp-preview-frame {
  position: relative; width: 260px; height: 360px; margin: 0 auto;
  background: radial-gradient(ellipse at center, rgba(106,76,147,0.18) 0%, rgba(8,5,16,0.6) 70%);
  border: 1px solid rgba(201,168,76,0.35); border-radius: 4px;
  box-shadow: inset 0 0 30px rgba(106,76,147,0.15), 0 0 30px rgba(106,76,147,0.18);
  overflow: hidden; transition: box-shadow .4s;
}
.cp-preview-frame::before {
  content: ''; position: absolute; inset: 6px;
  border: 1px solid rgba(255,204,136,0.3); border-radius: 2px;
  pointer-events: none;
  background:
    linear-gradient(to right, rgba(255,204,136,0.5) 14px, transparent 14px) 0 0 / 16px 1px no-repeat,
    linear-gradient(to bottom, rgba(255,204,136,0.5) 14px, transparent 14px) 0 0 / 1px 16px no-repeat,
    linear-gradient(to left, rgba(255,204,136,0.5) 14px, transparent 14px) 100% 0 / 16px 1px no-repeat,
    linear-gradient(to bottom, rgba(255,204,136,0.5) 14px, transparent 14px) 100% 0 / 1px 16px no-repeat,
    linear-gradient(to right, rgba(255,204,136,0.5) 14px, transparent 14px) 0 100% / 16px 1px no-repeat,
    linear-gradient(to top, rgba(255,204,136,0.5) 14px, transparent 14px) 0 100% / 1px 16px no-repeat,
    linear-gradient(to left, rgba(255,204,136,0.5) 14px, transparent 14px) 100% 100% / 16px 1px no-repeat,
    linear-gradient(to top, rgba(255,204,136,0.5) 14px, transparent 14px) 100% 100% / 1px 16px no-repeat;
}
.cp-preview-frame svg { width: 100%; height: 100%; display: block; position: relative; z-index: 2; transition: filter .4s; }
.cp-preview-frame.cp-preview--reveal {
  box-shadow: inset 0 0 60px rgba(255,204,136,0.4), 0 0 60px rgba(255,204,136,0.5), 0 0 120px rgba(106,76,147,0.4);
  animation: cp-pulse 0.7s ease-out;
}
.cp-preview-frame.cp-preview--reveal svg { filter: brightness(1.15) saturate(1.1); }
@keyframes cp-pulse { 0%{transform:scale(1);} 50%{transform:scale(1.03);} 100%{transform:scale(1);} }

.cp-scanlines {
  position: absolute; pointer-events: none;
  width: 260px; height: 360px; margin: -360px auto 0;
  background: repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(255,255,255,0.025) 4px);
  border-radius: 4px; z-index: 3;
}

.cp-preview-caption {
  font-family: Georgia, serif; font-style: italic;
  font-size: 12px; line-height: 1.55; color: #C9A84C;
  padding: 14px 8px 0;
}
.cp-preview-caption em { color: #FFCC88; font-style: italic; }

/* ── Tabs ─────────────────────────────────────────────────────────────── */
.cp-tabs {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px;
  margin-bottom: 16px; padding: 4px;
  background: rgba(8,4,14,0.5);
  border: 1px solid rgba(201,168,76,0.15); border-radius: 3px;
}
.cp-tab {
  background: transparent; border: 1px solid transparent; color: #8A7028;
  padding: 10px 6px; cursor: pointer; transition: all .15s;
  font-family: 'Segoe UI', sans-serif; border-radius: 2px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.cp-tab:hover { background: rgba(201,168,76,0.08); color: #C9A84C; }
.cp-tab.is-active {
  background: linear-gradient(180deg, rgba(255,204,136,0.18), rgba(106,76,147,0.12));
  border-color: rgba(255,204,136,0.5); color: #FFCC88;
  box-shadow: 0 0 16px rgba(255,204,136,0.2), inset 0 0 12px rgba(255,204,136,0.06);
}
.cp-tab__num { font-size: 8px; letter-spacing: .26em; opacity: 0.7; }
.cp-tab__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }

/* ── Panels ──────────────────────────────────────────────────────────── */
.cp-panel {
  padding: 18px 18px 16px;
  background: rgba(255,204,136,0.025);
  border: 1px solid rgba(201,168,76,0.18);
  border-left: 2px solid rgba(201,168,76,0.4);
  border-radius: 2px;
  animation: cp-fade-in .3s ease-out;
}
@keyframes cp-fade-in { from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} }

.cp-label {
  display: block; font-family: 'Segoe UI', sans-serif;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: #C9A84C; margin: 14px 0 8px;
}
.cp-label:first-child { margin-top: 0; }
.cp-label__hint {
  font-size: 8px; color: #8A7028; letter-spacing: .14em;
  font-weight: normal; margin-left: 4px;
}

.cp-input {
  width: 100%; padding: 11px 12px;
  background: rgba(8,4,14,0.7); border: 1px solid rgba(201,168,76,0.3);
  border-radius: 2px; color: #FFEAD0; font-family: Georgia, serif;
  font-size: 15px; box-sizing: border-box; transition: border-color .15s;
}
.cp-input:focus {
  outline: none; border-color: #FFCC88;
  box-shadow: 0 0 0 2px rgba(255,204,136,0.1);
}

/* ── Color swatches ──────────────────────────────────────────────────── */
.cp-swatches {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px;
}
.cp-swatch {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--cp-color);
  border: 2px solid rgba(255,255,255,0.08); border-radius: 50%;
  cursor: pointer; padding: 0; transition: all .15s;
}
.cp-swatch:hover {
  border-color: rgba(255,204,136,0.6); transform: scale(1.1);
  box-shadow: 0 0 12px var(--cp-color);
}
.cp-swatch.is-picked {
  border-color: #FFCC88;
  box-shadow: 0 0 0 2px rgba(255,204,136,0.35), 0 0 16px var(--cp-color);
  transform: scale(1.12);
}
/* "None" swatch — transparent with diagonal slash */
.cp-swatch--none {
  background: rgba(8,4,14,0.6) !important;
  border: 2px dashed rgba(201,168,76,0.4) !important;
}
.cp-swatch--none .cp-swatch__slash {
  position: absolute; inset: 4px;
  background: linear-gradient(135deg, transparent 45%, rgba(201,168,76,0.5) 47%, rgba(201,168,76,0.5) 53%, transparent 55%);
  border-radius: 50%;
}
.cp-swatch--none.is-picked {
  border-color: #FFCC88 !important; border-style: solid !important;
  box-shadow: 0 0 0 2px rgba(255,204,136,0.35), 0 0 14px rgba(255,204,136,0.4);
}

/* ── Style buttons (hair previews + small choice buttons) ─────────────── */
.cp-styles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.cp-styles--inline {
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}
.cp-style {
  background: rgba(201,168,76,0.04); border: 1px solid rgba(201,168,76,0.2);
  border-radius: 3px; padding: 8px 4px; cursor: pointer;
  transition: all .15s; text-align: center;
}
.cp-style:hover {
  background: rgba(255,204,136,0.12); border-color: rgba(255,204,136,0.5);
  transform: translateY(-1px);
}
.cp-style.is-picked {
  background: rgba(255,204,136,0.18); border-color: #FFCC88;
  transform: scale(1.05); box-shadow: 0 0 14px rgba(255,204,136,0.2);
}
.cp-style__svg { display: block; width: 56px; height: 64px; margin: 0 auto 2px; }
.cp-style__svg svg { width: 100%; height: 100%; display: block; }
.cp-style__label {
  display: block; font-family: 'Segoe UI', sans-serif;
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: #C9A84C;
}
.cp-style.is-picked .cp-style__label { color: #FFCC88; }

/* ── Toggles (off/on pill pair) ──────────────────────────────────────── */
.cp-toggles {
  display: inline-flex; gap: 2px;
  padding: 3px; background: rgba(8,4,14,0.6);
  border: 1px solid rgba(201,168,76,0.25); border-radius: 999px;
}
.cp-toggle {
  background: transparent; border: none;
  padding: 7px 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; transition: all .15s;
  font-family: 'Segoe UI', sans-serif;
}
.cp-toggle:hover { background: rgba(201,168,76,0.08); }
.cp-toggle__pip {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; background: #5A4A28;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.4);
  transition: all .15s;
}
.cp-toggle__label {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #8A7028;
}
.cp-toggle.is-picked {
  background: linear-gradient(180deg, rgba(255,204,136,0.22), rgba(106,76,147,0.12));
}
.cp-toggle.is-picked .cp-toggle__pip {
  background: #FFCC88; box-shadow: 0 0 8px rgba(255,204,136,0.7);
}
.cp-toggle.is-picked .cp-toggle__label { color: #FFCC88; }

/* ── Form actions ─────────────────────────────────────────────────────── */
.cp-form-actions {
  display: flex; gap: 12px; margin-top: 26px;
  justify-content: flex-end; align-items: center;
}
.cp-cancel-btn {
  background: transparent; border: 1px solid rgba(201,168,76,0.3); color: #B89878;
  font-family: 'Segoe UI', sans-serif; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase;
  padding: 10px 18px; border-radius: 2px; cursor: pointer; transition: all .15s;
}
.cp-cancel-btn:hover { color: #C9A84C; border-color: #C9A84C; }

.cp-create-btn {
  background: linear-gradient(135deg, #C9A84C, #FFCC88);
  border: 1px solid #FFCC88; color: #0F0703;
  font-family: 'Segoe UI', sans-serif; font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  padding: 12px 22px; border-radius: 2px; cursor: pointer; transition: all .18s;
  box-shadow: 0 4px 18px rgba(201,168,76,0.4);
}
.cp-create-btn:disabled {
  opacity: 0.35; cursor: not-allowed;
  background: linear-gradient(135deg, #6A5A2C, #8A7A48); box-shadow: none;
}
.cp-create-btn:not(:disabled):hover {
  transform: translateY(-1px); box-shadow: 0 6px 24px rgba(255,204,136,0.5); letter-spacing: .26em;
}

.cp-skip { text-align: center; margin-top: 16px; }
.cp-skip a {
  font-family: 'Segoe UI', sans-serif; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: #888;
  text-decoration: none; border-bottom: 1px dotted #555; padding-bottom: 1px;
}
.cp-skip a:hover { color: #C9A84C; border-color: #C9A84C; }

/* ── Header chip ─────────────────────────────────────────────────────── */
.cp-chip {
  position: fixed; bottom: 14px; right: 14px; z-index: 4500;
  background: rgba(15,7,3,0.95); border: 1px solid rgba(201,168,76,0.55);
  border-radius: 999px; padding: 4px 16px 4px 4px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Segoe UI', sans-serif; color: #FFEAD0;
  transition: all .15s; box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.cp-chip:hover {
  background: rgba(201,168,76,0.15); border-color: #C9A84C; transform: translateY(-1px);
}
.cp-chip__avatar {
  display: inline-block; width: 36px; height: 36px;
  border-radius: 50%; overflow: hidden;
  background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.4);
  flex-shrink: 0;
}
.cp-chip__avatar svg { width: 100%; height: 100%; display: block; }
.cp-chip__name {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #FFCC88;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-chip__placeholder {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: #C9A84C; padding: 6px 4px;
}

/* ── Auto-rendered avatars ───────────────────────────────────────────── */
[data-cp-avatar="large"]  { display: block; width: 240px; height: 340px; margin: 0 auto; }
[data-cp-avatar="medium"] { display: block; width: 130px; height: 184px; margin: 0 auto; }
[data-cp-avatar="small"] {
  display: inline-block; width: 48px; height: 48px;
  border-radius: 50%; overflow: hidden;
  background: rgba(201,168,76,0.08); border: 1px solid rgba(201,168,76,0.3);
}
[data-cp-avatar] svg { width: 100%; height: 100%; display: block; }
.cp-auto-name {
  font-family: Georgia, serif; font-size: 16px; color: #FFCC88;
  text-align: center; margin-top: 8px; letter-spacing: .04em;
}

/* ── Earned-not-picked memo (inside Cadet Kit panel) ─────────────────── */
.cp-earned-memo {
  background: linear-gradient(135deg, rgba(255,204,136,0.12), rgba(106,76,147,0.10));
  border: 1px solid rgba(255,204,136,0.4);
  border-left: 3px solid #FFCC88;
  border-radius: 3px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.cp-earned-memo__h {
  font-family: 'Segoe UI', sans-serif;
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #FFCC88;
  margin-bottom: 8px;
}
.cp-earned-memo p {
  font-family: Georgia, serif;
  font-size: 13px;
  line-height: 1.6;
  color: #E0C8A0;
  margin: 0;
}
.cp-earned-memo strong {
  color: #FFCC88;
}

/* ── Teaser popup (rotating space facts + gear teases) ─────────────────
   Positioned bottom-LEFT so it doesn't interfere with the entrance/avatar
   button at bottom-right. Slide-in animates from the left edge. */
.cp-teaser {
  position: absolute;
  bottom: 14px;
  left: 14px;
  max-width: 360px;
  background: linear-gradient(135deg, rgba(15,7,3,0.96), rgba(20,12,28,0.96));
  border: 1px solid rgba(255,204,136,0.5);
  border-radius: 4px;
  padding: 10px 36px 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 24px rgba(255,204,136,0.2);
  opacity: 0;
  transform: translateX(-20px) translateY(8px);
  transition: opacity .35s, transform .35s;
  pointer-events: none;
  z-index: 50;
}
.cp-teaser.is-shown {
  opacity: 1;
  transform: translateX(0) translateY(0);
  pointer-events: auto;
}
.cp-teaser--gear {
  border-color: rgba(123, 92, 192, 0.65);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 24px rgba(123, 92, 192, 0.3);
}
.cp-teaser__icon {
  font-size: 22px;
  line-height: 1;
  color: #FFCC88;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  padding-top: 2px;
}
.cp-teaser--gear .cp-teaser__icon { color: #C9A4F0; }
.cp-teaser__body { flex: 1 1 auto; min-width: 0; }
.cp-teaser__kind {
  font-family: 'Segoe UI', sans-serif;
  font-size: 8px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #C9A84C;
  margin-bottom: 4px;
}
.cp-teaser--gear .cp-teaser__kind { color: #9B7FD9; }
.cp-teaser__text {
  font-family: Georgia, serif;
  font-size: 12px;
  line-height: 1.55;
  color: #FFEAD0;
  font-style: italic;
}
.cp-teaser__close {
  position: absolute;
  top: 4px;
  right: 6px;
  background: transparent;
  border: none;
  color: #B89878;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.cp-teaser__close:hover { color: #FFCC88; }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .cp-modal { padding: 26px 22px 20px; }
  .cp-modal__h { font-size: 24px; }
  .cp-form__layout { grid-template-columns: 1fr; gap: 22px; }
  .cp-form__preview { position: static; }
  .cp-preview-frame { width: 200px; height: 280px; }
  .cp-scanlines { display: none; }
  .cp-list { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .cp-styles { grid-template-columns: repeat(3, 1fr); }
  .cp-swatches { grid-template-columns: repeat(6, 1fr); }
  .cp-tabs { grid-template-columns: repeat(3, 1fr); }
  .cp-tab__num { display: none; }
  .cp-chip__name { display: none; }
  .cp-chip { padding: 6px 6px 6px 4px; }
}

@media (max-width: 460px) {
  .cp-styles { grid-template-columns: repeat(2, 1fr); }
  .cp-swatches { grid-template-columns: repeat(4, 1fr); }
  .cp-tabs { grid-template-columns: repeat(2, 1fr); }
}

/* ── A named avatar must make room for its name · 2026-09-05 ─────────────
   The size rules above pin a fixed height on the CONTAINER, and
   `[data-cp-avatar] svg` fills 100% of it. So when `data-cp-show-name` adds
   the name div, the name rendered OUTSIDE the container's own box and
   collided with whatever came next — on /the-sky/ it landed directly on top
   of the "This is you, in your training kit" caption.

   With a name present, the fixed height moves to the svg and the container
   is allowed to grow. Attribute-pair selectors outrank the single-attribute
   size rules, so no !important is needed. */
[data-cp-avatar][data-cp-show-name] { height: auto; }
[data-cp-avatar="large"][data-cp-show-name]  svg { height: 340px; }
[data-cp-avatar="medium"][data-cp-show-name] svg { height: 184px; }