  /* ── DARK MODE SWITCH ── */
  .dm-switch { position:relative; display:inline-block; width:44px; height:24px; cursor:pointer; flex-shrink:0; }
  .dm-switch input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
  .dm-slider { position:absolute; inset:0; background:rgba(0,0,0,0.18); border-radius:var(--radius-pill); transition:background 0.25s; }
  .dm-slider::before { content:''; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:white; box-shadow:0 1px 4px rgba(0,0,0,0.28); transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
  .dm-switch input:checked ~ .dm-slider { background:var(--moss); }
  .dm-switch input:checked ~ .dm-slider::before { transform:translateX(20px); }
  /* Blue variant — used on own (dark-bg) profile */
  .dm-switch-blue .dm-slider { background:rgba(255,255,255,0.18); }
  .dm-switch-blue input:checked ~ .dm-slider { background:rgba(71,206,255,0.75); }

  /* ── USER AVATAR / LOGIN ── */
  .user-avatar,
  .profile-modal-avatar {
    border-radius:50%;
    background:var(--moss); color:var(--white);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .user-avatar {
    width: var(--avatar-sm); height: var(--avatar-sm);
    font-size: var(--text-base); font-weight: var(--weight-semibold); cursor: pointer;
    border: 2px solid rgba(255,255,255,0.25);
    transition: all var(--transition-fast); user-select: none;
    position: relative;
  }
  .user-avatar.avatar-border-rainbow {
    background: none;
    overflow: visible !important;
  }
  .user-avatar:hover { border-color:var(--moss-light); filter: brightness(1.05); }

  .header-coin-badge, .header-streak-badge { cursor: pointer; }
  .header-coin-badge {
    font-weight: var(--weight-bold);
    color: var(--bark);
    background: var(--cream);
    border: var(--border-card);
  }
  .header-streak-badge {
    font-weight: var(--weight-extrabold);
    background:linear-gradient(135deg,#ff6b35,#ffd700);
    color: var(--white);
    box-shadow:0 2px 10px rgba(255,107,53,0.4);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  }
  .header-streak-badge:hover { filter: brightness(1.1); }

  /* ── LOGIN MODAL ── */
  .login-modal { max-width:400px; }
  .login-tabs { display:flex; border-bottom:var(--border-divider); margin-bottom:var(--space-5); }
  .login-tab {
    flex:1; padding:var(--space-3) 0; border:none; background:none;
    font-size:var(--text-base); font-weight:var(--weight-semibold);
    color:var(--stone-dark); cursor:pointer;
    border-bottom:2px solid transparent; transition:all var(--transition-fast);
  }
  .login-tab.active { color:var(--moss); border-bottom-color:var(--moss); }
  .login-tab:hover:not(.active) { color:var(--bark); }
  .input-icon-wrap { position:relative; }
  .input-icon { position:absolute; left:var(--space-3); top:50%; transform:translateY(-50%); font-size:var(--text-md); pointer-events:none; }
  .input-icon-wrap .form-input { padding-left:36px; }

  .remember-row { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-sm); color:var(--stone-dark); cursor:pointer; }
  .remember-row input { accent-color:var(--moss); width:15px; height:15px; cursor:pointer; }

  .forgot-link { font-size:var(--text-sm); color:var(--moss); cursor:pointer; text-decoration:underline; margin-left:auto; }
  .forgot-link:hover { color:var(--moss-light); }

  .strength-bar { height:var(--space-1); border-radius:4px; margin-top:var(--space-2); background:var(--parchment); overflow:hidden; }
  .strength-fill { height:100%; border-radius:4px; transition: width var(--transition-slow), background var(--transition-slow); width:0; }

  .login-note { font-size:var(--text-sm); color:var(--stone-dark); text-align:center; margin-top:var(--space-3); line-height:1.5; }


  /* ── PROFILE MODAL ── */
  .profile-modal-avatar {
    width:64px; height:64px;
    font-family:var(--font-display); font-size:1.5rem;
    margin:0 auto var(--space-3);
  }
  .profile-modal-name { font-size:var(--text-xl); font-weight:var(--weight-bold); text-align:center; margin-bottom:var(--space-1); }
  .profile-modal-email { font-size:var(--text-sm); color:var(--stone-dark); text-align:center; margin-bottom:var(--space-4); }
  .profile-joined, .my-profile-joined { font-size:var(--text-sm); color:var(--stone); text-align:center; margin-bottom:var(--space-4); }
  .profile-stats-row { display:flex; gap:var(--space-3); margin-bottom:var(--space-4); }
  .profile-stat { flex:1; background:var(--cream); border-radius:var(--radius); padding:var(--space-3) var(--space-2); text-align:center; }
  .profile-stat-num { font-size:var(--text-xl); font-weight:var(--weight-bold); color:var(--moss); }
  .profile-stat-label { font-size:var(--text-2xs); color:var(--stone-dark); text-transform:uppercase; letter-spacing:0.4px; margin-top:var(--space-1); }
  .profile-bench-list { display:flex; flex-direction:column; gap:var(--space-2); }
  .profile-bench-row { display:flex; align-items:center; gap:var(--profile-bench-gap,12px); }
  .profile-bench-row--compact { --profile-bench-gap:10px; }
  .profile-bench-rating-base { white-space:nowrap; margin-left:auto; flex-shrink:0; }
  .profile-bench-item { padding:var(--space-3); border-radius:var(--radius); border:var(--border-card); cursor:pointer; transition:border-color var(--transition-fast), box-shadow var(--transition-fast); }
  .profile-bench-item:hover { border-color:var(--moss); box-shadow:0 2px 10px var(--shadow); }
  .profile-bench-emoji { font-size:1.5rem; width:36px; text-align:center; flex-shrink:0; }
  .profile-bench-name,.claude-bench-name,.my-bench-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .profile-bench-name { font-weight:var(--weight-semibold); font-size:var(--text-base); }
  .profile-bench-loc { font-size:var(--text-sm); color:var(--stone-dark); }
  .profile-bench-rating { font-size:var(--text-sm); color:var(--gold); font-weight:var(--weight-semibold); }


  /* ── SPECIAL PROFILE THEMES (Claude + My Profile) ── */
  @keyframes specialGlow{0%,100%{box-shadow:0 0 20px var(--special-glow-soft),0 0 40px var(--special-glow-faint)}50%{box-shadow:0 0 35px var(--special-glow-strong),0 0 70px var(--special-glow-mid)}}
  @keyframes specialFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @keyframes specialShimmer{0%{background-position:-200% center}100%{background-position:200% center}}
  @keyframes specialBarFill{from{width:0}}
  @keyframes specialFadeSlideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
  @keyframes specialPulseRing{0%{transform:scale(1);opacity:0.6}100%{transform:scale(1.6);opacity:0}}
  @keyframes particleDrift{0%{transform:translateY(0) translateX(0) scale(1);opacity:0}10%{opacity:0.6}80%{opacity:0.4}100%{transform:translateY(-100px) translateX(var(--dx)) scale(0.3);opacity:0}}
  @keyframes starTwinkle{0%,100%{opacity:0;transform:scale(0.5) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(180deg)}}
  .claude-profile-overlay,.my-profile-overlay{max-width:460px!important;padding:0!important;overflow:hidden!important;border:none!important}
  .my-profile-overlay{--special-accent:#47ceff;--special-accent-strong:#0d9ec4;--special-tag-color:rgba(71,206,255,0.6);--special-label-color:rgba(71,206,255,0.5);--special-card-border:rgba(71,206,255,0.15);--special-card-border-hover:rgba(71,206,255,0.5);--special-card-bg:rgba(71,206,255,0.05);--special-card-bg-hover:rgba(71,206,255,0.12);--special-name-color:rgba(180,235,255,0.95);--special-loc-color:rgba(71,206,255,0.5);--special-close-color:rgba(71,206,255,0.7);--special-close-bg-hover:rgba(71,206,255,0.4);--special-ring-1:rgba(71,206,255,0.5);--special-ring-2:rgba(71,206,255,0.3);--special-avatar-border:rgba(71,206,255,0.8);--special-avatar-gradient:linear-gradient(135deg,#0d9ec4 0%,#47ceff 100%);--special-bar-gradient:linear-gradient(90deg,#0d9ec4,#47ceff);--special-radial:rgba(71,206,255,0.2);--special-name-gradient-start:#9ae8ff;--special-name-gradient-end:#47ceff;--special-decor-color:rgba(71,206,255,0.9);--special-decor-shadow:rgba(71,206,255,0.6);--special-glow-soft:rgba(71,206,255,0.4);--special-glow-faint:rgba(71,206,255,0.2);--special-glow-strong:rgba(71,206,255,0.7);--special-glow-mid:rgba(71,206,255,0.3);background:linear-gradient(160deg,#050f1a 0%,#0a1f30 40%,#050f1a 100%)!important}
  .my-profile-header{position:relative;padding:32px 28px 24px;text-align:center;overflow:hidden}
  .my-profile-header{background:linear-gradient(160deg,#061220 0%,#0d2238 50%,#061220 100%)}
  .my-profile-header::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,var(--special-radial) 0%,transparent 70%);pointer-events:none}
  .my-avatar-wrap{position:relative;display:inline-block;margin-bottom:14px;animation:specialFloat 4s ease-in-out infinite}
  .my-avatar-circle,.my-avatar-wrap img{width:80px;height:80px;border-radius:50%;border:3px solid var(--special-avatar-border);animation:specialGlow 3s ease-in-out infinite;position:relative;z-index:1}
  .my-avatar-wrap img{object-fit:cover}.my-avatar-circle{background:var(--special-avatar-gradient);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.8rem;color:white}
  .my-pulse-ring,.my-pulse-ring-2{position:absolute;inset:-6px;border-radius:50%;animation:specialPulseRing 2s ease-out infinite}
  .my-pulse-ring{border:2px solid var(--special-ring-1)}.my-pulse-ring-2{border:2px solid var(--special-ring-2);animation-delay:0.7s}
  .my-profile-name{font-family:var(--font-display);font-size:1.5rem;background:linear-gradient(90deg,var(--special-name-gradient-start),var(--special-name-gradient-end),var(--special-name-gradient-start),var(--special-name-gradient-end));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:specialShimmer 3s linear infinite;margin-bottom:4px}
  .my-profile-tagline{color:var(--special-tag-color);letter-spacing:0.5px;text-transform:uppercase;display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
  .my-stars-field{position:absolute;inset:0;pointer-events:none;overflow:hidden}
  .my-star{position:absolute;color:var(--special-decor-color);animation:starTwinkle var(--dur) ease-in-out infinite;font-size:var(--sz);animation-delay:var(--delay)}
  .my-stats-row{display:flex;border-bottom:1px solid rgba(255,255,255,0.06)}
  .my-stat{flex:1;padding:16px 8px;text-align:center;border-right:1px solid rgba(255,255,255,0.06);animation:specialFadeSlideUp 0.5s ease both}
  .my-stat:last-child{border-right:none}
  .my-stat-num{font-family:var(--font-display);font-size:1.4rem;color:var(--special-accent);line-height:1}
  .my-stat-label{font-size:0.62rem;color:var(--special-label-color);text-transform:uppercase;letter-spacing:0.5px;margin-top:3px}
  .my-benches-section{padding:0 20px;margin-bottom:var(--space-3)}
  .my-benches-title{font-size:0.72rem;color:var(--special-label-color);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
  .my-bench-card{padding:11px 14px;border-radius:12px;border:1px solid var(--special-card-border);background:var(--special-card-bg);cursor:pointer;margin-bottom:8px;transition:all 0.2s;animation:specialFadeSlideUp 0.4s ease both}
  .my-bench-card:hover{border-color:var(--special-card-border-hover);background:var(--special-card-bg-hover)}
  .my-bench-name{font-weight:600;font-size:0.86rem;color:var(--special-name-color)}
  .my-bench-loc{font-size:0.72rem;color:var(--special-loc-color);margin-top:1px}
  .my-bench-rating{color:var(--special-accent);font-size:0.78rem;font-weight:700}
  .my-bench-bar-wrap{height:3px;background:rgba(255,255,255,0.08);border-radius:var(--radius-pill);margin-top:4px;overflow:hidden}
  .my-bench-bar{height:100%;border-radius:var(--radius-pill);background:var(--special-bar-gradient);animation:specialBarFill 1s cubic-bezier(0.4,0,0.2,1) both}
  .my-close-btn{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.08);border:none;color:var(--special-close-color);font-size:0.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;z-index:10}
  .my-close-btn:hover{background:var(--special-close-bg-hover);color:white}


  /* ── LEVEL SYSTEM ── */
  @keyframes levelBarFill {
    from { width:0; }
  }
  .level-section {
    padding: 14px 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
  .level-row {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:6px;
  }
  .level-badge {
    font-size:0.78rem; font-weight:700; letter-spacing:0.3px;
  }
  .level-next {
    font-size:0.68rem; opacity:0.5;
  }
  .level-bar-wrap {
    height:5px; border-radius:var(--radius-pill);
    background:rgba(255,255,255,0.08);
    overflow:hidden; margin-bottom:14px;
  }
  .level-bar {
    height:100%; border-radius:var(--radius-pill);
    animation: levelBarFill 1.2s cubic-bezier(0.4,0,0.2,1) both 0.3s;
  }
  .level-bar.blue  { background:linear-gradient(90deg,#0d9ec4,#47ceff); }
  .level-bar.orange{ background:linear-gradient(90deg,#cc785c,#e8a882); }
  .level-bar.green { background:linear-gradient(90deg,var(--moss),var(--moss-light)); }

  .profile-user-tag {
    display:inline-flex; align-items:center; gap:4px;
    padding:3px 10px; border-radius:var(--radius-pill);
    margin:2px;
  }

  /* ── GOOGLE SIGN IN ── */
  .btn-google {
    width:100%; padding:var(--space-3) var(--space-4); border-radius:var(--radius);
    border:var(--border-card); background:var(--white);
    display:flex; align-items:center; justify-content:center; gap:var(--space-3);
    font-size:var(--text-base); font-weight:var(--weight-semibold);
    color:var(--bark); cursor:pointer; transition:all var(--transition-fast);
    margin-bottom:var(--space-3);
  }
  .btn-google:hover { background:var(--cream); border-color:var(--stone); box-shadow:0 2px 8px var(--shadow); }
  .btn-google svg { width:18px; height:18px; flex-shrink:0; }
/* ── STREAK COUNTER ── */
  .streak-count-num { font-size:var(--text-md); }
  .streak-count-label { font-size:var(--text-2xs); opacity:0.7; }
  @keyframes streakPop {
    0%   { transform:scale(1); }
    30%  { transform:scale(1.4) rotate(-10deg); }
    60%  { transform:scale(1.2) rotate(5deg); }
    100% { transform:scale(1) rotate(0deg); }
  }
  @keyframes streakGlow {
    0%,100% { box-shadow:0 0 0 rgba(255,100,0,0); }
    50%      { box-shadow:0 0 12px rgba(255,100,0,0.5); }
  }
  .header-streak-badge.popping {
    animation: streakPop 0.5s cubic-bezier(0.34,1.56,0.64,1), streakGlow 0.8s ease;
  }

  .login-divider {
    display:flex; align-items:center; gap:var(--space-3);
    margin:var(--space-3) 0; color:var(--stone-dark); font-size:var(--text-sm); width:100%;
  }
  .login-divider::before, .login-divider::after {
    content:''; flex:1; height:1px; background:var(--parchment);
  }


  /* ── PROFILE TAGS ── */
  .profile-user-tag {
    font-size:var(--text-sm); font-weight:var(--weight-semibold);
    background:rgba(71,206,255,0.12); border:1px solid rgba(71,206,255,0.3);
    color:rgba(71,206,255,0.9);
  }
  .profile-tag-picker-item {
    padding:var(--space-1) var(--space-3); border-radius:var(--radius-pill); font-size:var(--text-sm); font-weight:var(--weight-semibold);
    border:var(--border-card); background:var(--white); cursor:pointer;
    transition:all var(--transition-fast); color:var(--stone-dark);
  }
  .profile-tag-picker-item.selected { background:var(--moss); color:white; border-color:var(--moss); }
  .profile-tag-picker-item.locked { opacity:0.3; cursor:not-allowed; }

