/* ============================================================
   YOUTH PROFILE - BLOOM STYLE
   Matches youth-profile-sample.html exactly
   ============================================================ */

/* TOKENS */
.youth-profile-bloom {
  --cream:      #FFF8F0;
  --coral:      #FF6B5B;
  --amber:      #FFB347;
  --mint:       #6DDAB4;
  --lavender:   #C3B1E1;
  --sky:        #7BC8F6;
  --rose:       #F7A8B8;
  --sage:       #A8D5A2;
  --gold:       #F5C842;
  --dark:       #1C1B2E;
  --text:       #2D2726;
  --muted:      #9B8E87;
  --border:     rgba(45,39,38,.09);
  --card-bg:    white;
  --shadow-sm:  0 2px 12px rgba(0,0,0,.07);
  --shadow-md:  0 8px 32px rgba(0,0,0,.11);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.16);
  --r-card:     22px;
  --r-pill:     100px;
  --tab-h:      72px;
  --page-bg:    var(--cream);
  --text-main:  var(--text);
  --text-muted: var(--muted);
  --border-col: var(--border);
}

/* Dark theme */
.youth-profile-bloom[data-theme="dark"] {
  --page-bg:   #12111E;
  --card-bg:   #1E1D30;
  --text-main: #F0EAE4;
  --text-muted:#7A7080;
  --border-col:rgba(255,255,255,.07);
  --cream:     #12111E;
}

/* Neo theme */
.youth-profile-bloom[data-theme="neo"] {
  --page-bg:   #0A0A0F;
  --card-bg:   #141420;
  --text-main: #E8F5E9;
  --text-muted:#4CAF72;
  --border-col:rgba(109,218,180,.15);
  --cream:     #0A0A0F;
  --coral:     #6DDAB4;
  --amber:     #4ECDC4;
}

.youth-profile-bloom {
  font-family: 'DM Sans', sans-serif;
  background: var(--page-bg);
  color: var(--text-main);
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: 20px;
  transition: background .35s, color .35s;
}

/* grain */
.youth-profile-bloom::after {
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.025'/%3E%3C/svg%3E");
  pointer-events:none;
  z-index:9998;
}

/* ambient orbs */
.youth-profile-bloom .orb {
  position:fixed;
  border-radius:50%;
  filter:blur(100px);
  pointer-events:none;
  z-index:0;
  animation:bloom-drift 14s ease-in-out infinite alternate;
}
.youth-profile-bloom .orb-1 {
  width:420px;
  height:420px;
  background:rgba(255,179,71,.10);
  top:-80px;
  right:-80px;
}
.youth-profile-bloom .orb-2 {
  width:300px;
  height:300px;
  background:rgba(109,218,180,.08);
  bottom:18%;
  left:-60px;
  animation-duration:18s;
  animation-direction:alternate-reverse;
}
@keyframes bloom-drift {
  from { transform:translate(0,0) }
  to { transform:translate(24px,30px) }
}

/* PROFILE HERO BAND */
.youth-profile-bloom .profile-band {
  background:linear-gradient(135deg, var(--coral) 0%, #FF8F70 50%, var(--amber) 100%);
  padding:36px 24px 80px;
  position:relative;
  overflow:hidden;
  text-align:center;
  animation:bloom-fadeDown .6s ease both;
}
.youth-profile-bloom .profile-band::before {
  content:'✦ ✦ ✦';
  position:absolute;
  right:-10px;
  top:16px;
  font-size:4rem;
  opacity:.08;
  color:white;
  letter-spacing:14px;
  line-height:1;
}
.youth-profile-bloom .profile-band::after {
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  right:0;
  height:48px;
  background:var(--page-bg);
  border-radius:36px 36px 0 0;
  transition: background .35s;
}
@keyframes bloom-fadeDown {
  from { opacity:0; transform:translateY(-12px) }
  to { opacity:1; transform:translateY(0) }
}

.youth-profile-bloom .avatar-ring {
  width:90px;
  height:90px;
  border-radius:50%;
  background:rgba(255,255,255,.25);
  backdrop-filter:blur(10px);
  border:3px solid rgba(255,255,255,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.6rem;
  margin:0 auto 14px;
  box-shadow:0 8px 32px rgba(0,0,0,.2);
  position:relative;
  z-index:1;
  animation:bloom-popIn .5s cubic-bezier(.34,1.56,.64,1) .1s both;
}
@keyframes bloom-popIn {
  from { opacity:0; transform:scale(.7) }
  to { opacity:1; transform:scale(1) }
}

.youth-profile-bloom .profile-name {
  font-family:'Fraunces',serif;
  font-size:1.9rem;
  font-weight:900;
  color:white;
  letter-spacing:-.5px;
  margin-bottom:6px;
  position:relative;
  z-index:1;
}
.youth-profile-bloom .profile-intro {
  font-size:.85rem;
  font-weight:400;
  color:rgba(255,255,255,.82);
  position:relative;
  z-index:1;
}

/* THEME TOGGLE */
.youth-profile-bloom .theme-toggle-wrap {
  display:flex;
  justify-content:center;
  padding:0 24px;
  margin-top:-28px;
  position:relative;
  z-index:10;
  margin-bottom:28px;
}
.youth-profile-bloom .theme-toggle {
  background:var(--card-bg);
  border:2px solid var(--border-col);
  border-radius:var(--r-pill);
  padding:5px;
  display:flex;
  gap:4px;
  box-shadow:var(--shadow-md);
  transition: background .35s, border-color .35s;
}
.youth-profile-bloom .theme-btn {
  background:none;
  border:none;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  font-size:.78rem;
  font-weight:600;
  color:var(--text-muted);
  padding:8px 18px;
  border-radius:var(--r-pill);
  transition:background .22s, color .22s;
  white-space:nowrap;
}
.youth-profile-bloom .theme-btn.active {
  background:var(--coral);
  color:white;
  box-shadow:0 2px 10px rgba(255,107,91,.35);
}
.youth-profile-bloom[data-theme="neo"] .theme-btn.active {
  background:var(--mint);
  color:var(--dark);
}

/* MAIN CONTENT */
.youth-profile-bloom main {
  position:relative;
  z-index:1;
  max-width:900px;
  margin:0 auto;
  padding:0 20px;
}

/* STAT CARDS */
.youth-profile-bloom .stats-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-bottom:28px;
}
.youth-profile-bloom .stat-card {
  background:var(--card-bg);
  border:2px solid var(--border-col);
  border-radius:var(--r-card);
  padding:20px 18px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  transition:transform .25s, box-shadow .25s, border-color .25s, background .35s;
  animation:bloom-cardUp .5s ease both;
  position:relative;
  overflow:hidden;
}
.youth-profile-bloom .stat-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,rgba(255,255,255,.06) 0%,transparent 50%);
  pointer-events:none;
}
.youth-profile-bloom .stat-card:hover {
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.youth-profile-bloom .stat-card:nth-child(1) { animation-delay:.05s; border-color:rgba(255,107,91,.2); }
.youth-profile-bloom .stat-card:nth-child(2) { animation-delay:.10s; border-color:rgba(245,200,66,.25); }
.youth-profile-bloom .stat-card:nth-child(3) { animation-delay:.15s; border-color:rgba(109,218,180,.2); }
.youth-profile-bloom .stat-card:nth-child(4) { animation-delay:.20s; border-color:rgba(247,168,184,.25); }

@keyframes bloom-cardUp {
  from { opacity:0; transform:translateY(20px) }
  to { opacity:1; transform:translateY(0) }
}

.youth-profile-bloom .stat-icon {
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  flex-shrink:0;
}
.youth-profile-bloom .si-coral   { background:#FFE8E5; }
.youth-profile-bloom .si-amber   { background:#FFF0D6; }
.youth-profile-bloom .si-mint    { background:#D8F8ED; }
.youth-profile-bloom .si-rose    { background:#FFE4EE; }
.youth-profile-bloom[data-theme="dark"] .si-coral  { background:rgba(255,107,91,.15); }
.youth-profile-bloom[data-theme="dark"] .si-amber  { background:rgba(255,179,71,.15); }
.youth-profile-bloom[data-theme="dark"] .si-mint   { background:rgba(109,218,180,.15); }
.youth-profile-bloom[data-theme="dark"] .si-rose   { background:rgba(247,168,184,.15); }
.youth-profile-bloom[data-theme="neo"]  .si-coral  { background:rgba(109,218,180,.15); }

.youth-profile-bloom .stat-value {
  font-family:'Fraunces',serif;
  font-size:2.2rem;
  font-weight:900;
  line-height:1;
  letter-spacing:-1px;
  color:var(--text-main);
}
.youth-profile-bloom .stat-label {
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.4px;
  color:var(--text-muted);
  line-height:1.3;
}

.youth-profile-bloom .stat-card.streak-active {
  background:linear-gradient(135deg,#FFF0D6,#FFE8E5);
  border-color:var(--amber);
}
.youth-profile-bloom[data-theme="dark"] .stat-card.streak-active {
  background:rgba(255,179,71,.08);
}

/* SECTION LABEL */
.youth-profile-bloom .section-label {
  font-family:'Fraunces',serif;
  font-size:1.3rem;
  font-weight:900;
  letter-spacing:-.3px;
  color:var(--text-main);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:10px;
}
.youth-profile-bloom .section-label-note {
  font-family:'DM Sans',sans-serif;
  font-size:.75rem;
  font-weight:500;
  color:var(--text-muted);
  margin-left:auto;
  letter-spacing:0;
}

/* BADGES */
.youth-profile-bloom .badges-wrap {
  background:var(--card-bg);
  border:2px solid var(--border-col);
  border-radius:var(--r-card);
  padding:24px;
  margin-bottom:14px;
  transition: background .35s, border-color .35s;
  animation:bloom-cardUp .5s ease .25s both;
}
.youth-profile-bloom .badges-empty {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:20px 0;
  text-align:center;
}
.youth-profile-bloom .badges-empty-icon {
  width:64px;
  height:64px;
  border-radius:50%;
  background:linear-gradient(135deg,#FFE8E5,#FFF0D6);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.8rem;
}
.youth-profile-bloom .badges-empty h4 {
  font-family:'Fraunces',serif;
  font-size:1rem;
  font-weight:800;
  color:var(--text-main);
}
.youth-profile-bloom .badges-empty p {
  font-size:.8rem;
  color:var(--text-muted);
  line-height:1.6;
  max-width:260px;
}

.youth-profile-bloom .badges-earned-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
}
.youth-profile-bloom .badge-earned-card {
  background:var(--page-bg);
  border:2px solid rgba(255,107,91,.2);
  border-radius:18px;
  padding:16px;
  text-align:center;
  transition:transform .22s, box-shadow .22s;
}
.youth-profile-bloom .badge-earned-card:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-sm);
}
.youth-profile-bloom .badge-earned-icon {
  font-size:2rem;
  display:block;
  margin-bottom:8px;
}
.youth-profile-bloom .badge-earned-name {
  font-weight:700;
  font-size:.85rem;
  color:var(--text-main);
  margin-bottom:4px;
}
.youth-profile-bloom .badge-earned-desc {
  font-size:.72rem;
  color:var(--text-muted);
  line-height:1.3;
}

/* NEXT BADGE */
.youth-profile-bloom .next-badge-card {
  background:var(--card-bg);
  border:2px solid rgba(245,200,66,.3);
  border-radius:var(--r-card);
  padding:20px 22px;
  margin-bottom:28px;
  position:relative;
  overflow:hidden;
  transition: background .35s;
  animation:bloom-cardUp .5s ease .3s both;
}
.youth-profile-bloom .next-badge-card::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(245,200,66,.06) 0%,transparent 60%);
}
.youth-profile-bloom .nb-head {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  position:relative;
  z-index:1;
}
.youth-profile-bloom .nb-icon {
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg,#FFF0D6,#FFE8E5);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.5rem;
  flex-shrink:0;
}
.youth-profile-bloom .nb-title {
  font-family:'Fraunces',serif;
  font-size:1.05rem;
  font-weight:800;
  color:var(--text-main);
  margin-bottom:3px;
}
.youth-profile-bloom .nb-desc {
  font-size:.78rem;
  color:var(--text-muted);
  line-height:1.5;
}
.youth-profile-bloom .nb-progress-bar {
  height:8px;
  background:var(--border-col);
  border-radius:var(--r-pill);
  overflow:hidden;
  margin-bottom:8px;
  position:relative;
  z-index:1;
}
.youth-profile-bloom .nb-progress-fill {
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--amber),var(--coral));
  border-radius:var(--r-pill);
  transition:width 1s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 10px rgba(255,179,71,.4);
}
.youth-profile-bloom .nb-progress-label {
  font-size:.72rem;
  font-weight:600;
  color:var(--text-muted);
  display:flex;
  justify-content:space-between;
  position:relative;
  z-index:1;
}

/* DISCOVERIES */
.youth-profile-bloom .discoveries-wrap {
  margin-bottom:28px;
  animation:bloom-cardUp .5s ease .35s both;
  background:var(--card-bg);
  border:2px solid var(--border-col);
  border-radius:var(--r-card);
  overflow:hidden;
  transition: background .35s, border-color .35s;
}
.youth-profile-bloom .discoveries-head {
  padding:18px 22px 14px;
  border-bottom:1.5px solid var(--border-col);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.youth-profile-bloom .discoveries-intro {
  font-size:.78rem;
  color:var(--text-muted);
  line-height:1.5;
  max-width:300px;
}
.youth-profile-bloom .discoveries-count {
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--text-muted);
  background:var(--border-col);
  padding:4px 10px;
  border-radius:var(--r-pill);
  white-space:nowrap;
  flex-shrink:0;
}
.youth-profile-bloom .discoveries-scroll {
  max-height:320px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--border-col) transparent;
  padding:10px 12px 12px;
}
.youth-profile-bloom .discoveries-scroll::-webkit-scrollbar { width:4px; }
.youth-profile-bloom .discoveries-scroll::-webkit-scrollbar-track { background:transparent; }
.youth-profile-bloom .discoveries-scroll::-webkit-scrollbar-thumb { background:var(--border-col); border-radius:4px; }
.youth-profile-bloom .discoveries-fade::after {
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:48px;
  background:linear-gradient(to top, var(--card-bg) 0%, transparent 100%);
  border-radius:0 0 var(--r-card) var(--r-card);
  pointer-events:none;
  transition: background .35s;
}
.youth-profile-bloom .discoveries-fade {
  position:relative;
}

.youth-profile-bloom .discovery-item {
  background:var(--page-bg);
  border:2px solid var(--border-col);
  border-radius:18px;
  padding:16px 18px;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:14px;
  transition:transform .22s, box-shadow .22s, background .35s;
  cursor:default;
  animation:bloom-cardUp .4s ease both;
}
.youth-profile-bloom .discovery-item:hover {
  transform:translateX(4px);
  box-shadow:var(--shadow-sm);
}

.youth-profile-bloom .discovery-item:nth-child(1){animation-delay:.38s}
.youth-profile-bloom .discovery-item:nth-child(2){animation-delay:.42s}
.youth-profile-bloom .discovery-item:nth-child(3){animation-delay:.46s}
.youth-profile-bloom .discovery-item:nth-child(4){animation-delay:.50s}
.youth-profile-bloom .discovery-item:nth-child(5){animation-delay:.54s}
.youth-profile-bloom .discovery-item:nth-child(6){animation-delay:.58s}

.youth-profile-bloom .disc-icon {
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  flex-shrink:0;
}
.youth-profile-bloom .disc-coral    { background:#FFE8E5; }
.youth-profile-bloom .disc-amber   { background:#FFF0D6; }
.youth-profile-bloom .disc-mint   { background:#D8F8ED; }
.youth-profile-bloom .disc-lavender{ background:#EDE6F8; }
.youth-profile-bloom .disc-sky     { background:#DCF0FC; }
.youth-profile-bloom[data-theme="dark"] .disc-coral    { background:rgba(255,107,91,.12); }
.youth-profile-bloom[data-theme="dark"] .disc-amber    { background:rgba(255,179,71,.12); }
.youth-profile-bloom[data-theme="dark"] .disc-mint     { background:rgba(109,218,180,.12); }
.youth-profile-bloom[data-theme="dark"] .disc-lavender { background:rgba(195,177,225,.12); }
.youth-profile-bloom[data-theme="dark"] .disc-sky      { background:rgba(123,200,246,.12); }

.youth-profile-bloom .disc-body { flex:1; min-width:0; }
.youth-profile-bloom .disc-name {
  font-weight:700;
  font-size:.88rem;
  color:var(--text-main);
  margin-bottom:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.youth-profile-bloom .disc-desc {
  font-size:.75rem;
  color:var(--text-muted);
  line-height:1.4;
}
.youth-profile-bloom .disc-time {
  font-size:.68rem;
  font-weight:500;
  color:var(--text-muted);
  white-space:nowrap;
  flex-shrink:0;
}

/* PREFERENCES */
.youth-profile-bloom .prefs-wrap {
  background:var(--card-bg);
  border:2px solid var(--border-col);
  border-radius:var(--r-card);
  overflow:hidden;
  margin-bottom:28px;
  transition: background .35s, border-color .35s;
  animation:bloom-cardUp .5s ease .4s both;
}

.youth-profile-bloom .pref-row {
  display:flex;
  align-items:center;
  padding:18px 22px;
  gap:14px;
  border-bottom:1.5px solid var(--border-col);
  transition:background .18s;
}
.youth-profile-bloom .pref-row:last-child { border-bottom:none; }
.youth-profile-bloom .pref-row:hover { background:rgba(255,107,91,.04); }

.youth-profile-bloom .pref-icon {
  font-size:1.2rem;
  width:22px;
  text-align:center;
  flex-shrink:0;
}
.youth-profile-bloom .pref-body { flex:1; min-width:0; }
.youth-profile-bloom .pref-label {
  font-size:.88rem;
  font-weight:600;
  color:var(--text-main);
  margin-bottom:2px;
}
.youth-profile-bloom .pref-desc {
  font-size:.74rem;
  color:var(--text-muted);
  line-height:1.4;
}

.youth-profile-bloom .toggle {
  position:relative;
  width:46px;
  height:26px;
  flex-shrink:0;
}
.youth-profile-bloom .toggle input { opacity:0; width:0; height:0; }
.youth-profile-bloom .toggle-track {
  position:absolute;
  inset:0;
  background:var(--border-col);
  border-radius:var(--r-pill);
  cursor:pointer;
  transition:background .3s;
}
.youth-profile-bloom .toggle input:checked + .toggle-track { background:var(--coral); }
.youth-profile-bloom .toggle-track::after {
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:white;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.youth-profile-bloom .toggle input:checked + .toggle-track::after { transform:translateX(20px); }

.youth-profile-bloom .font-btns {
  display:flex;
  gap:6px;
  flex-shrink:0;
}
.youth-profile-bloom .font-btn {
  background:var(--border-col);
  border:none;
  border-radius:8px;
  padding:6px 10px;
  cursor:pointer;
  font-family:'DM Sans',sans-serif;
  font-size:.72rem;
  font-weight:600;
  color:var(--text-muted);
  transition:background .18s, color .18s;
}
.youth-profile-bloom .font-btn.active { background:var(--coral); color:white; }

/* LOGOUT */
.youth-profile-bloom .logout-btn {
  width:100%;
  background:var(--card-bg);
  border:2px solid var(--border-col);
  border-radius:var(--r-card);
  padding:18px;
  font-family:'Fraunces',serif;
  font-size:1rem;
  font-weight:700;
  color:var(--coral);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition:background .22s, border-color .22s, transform .22s;
  margin-bottom:12px;
  animation:bloom-cardUp .5s ease .45s both;
}
.youth-profile-bloom .logout-btn:hover {
  background:#FFE8E5;
  border-color:var(--coral);
  transform:translateY(-2px);
}
.youth-profile-bloom[data-theme="dark"] .logout-btn:hover { background:rgba(255,107,91,.12); }

@media (min-width:600px) {
  .youth-profile-bloom .stats-grid { grid-template-columns:repeat(4,1fr); }
  .youth-profile-bloom main { padding:0 40px; }
}