/* social_emotional.css — QMB Portal · ADG-QMBP-18 · S009
   Extracted from social_emotional.php inline style block.
   Token audit: ADG-QMBP-19. Font audit: ADG-QMBP-20 · DEC-QMBP-S009-CD-01.
   All CSS edits go here, not in PHP. */

   @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;900&display=swap');

   :root {
       /* Premium Design System */
       --gold-primary: #D4AF37;
       --gold-dark: #B5952F;
       --gold-light: #F5E6B8;
       --red-orange: #FF4500;
       --red-dark: #CC3700;
       --blue-bright: #4da6ff;
       --blue-dark: #007acc;
       --cream-bg: #F9F7F2;
       --warm-white: #FFFBF5;
       --shadow-gold: rgba(212, 175, 55, 0.25);
       --shadow-soft: rgba(0, 0, 0, 0.08);
       --text-dark: #2C2416;
       --text-medium: #5C5444;
       --text-light: #8A8274;
       --glass-bg: rgba(255, 255, 255, 0.72);
       --glass-border: rgba(255, 255, 255, 0.95);
       --focus-outline: 3px solid var(--text-dark);   /* ADG-QMBP-19 · S009 */
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: var(--font-body);   /* ADG-QMBP-20 · DEC-QMBP-S009-CD-01 */
       background: linear-gradient(135deg, #F9F7F2 0%, #FFF8E7 50%, #F5EDD6 100%);
       min-height: 100vh;
       color: var(--text-dark);
       font-size: 18px;
       line-height: 1.6;
       overflow-x: hidden;
       position: relative;
   }

   /* ═══════════════════════════════════════════════════════════════
      FLOATING DECORATIONS - Ambient Visual Layer
      ═══════════════════════════════════════════════════════════════ */
   .floating-orbs {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
       z-index: 0;
       overflow: hidden;
   }

   .orb {
       position: absolute;
       border-radius: 50%;
       filter: blur(60px);
       opacity: 0.4;
       animation: floatOrb 20s ease-in-out infinite;
   }

   .orb-1 {
       width: 400px;
       height: 400px;
       background: radial-gradient(circle, rgba(212, 175, 55, 0.4) 0%, transparent 70%);
       top: -10%;
       right: -10%;
       animation-delay: 0s;
   }

   .orb-2 {
       width: 300px;
       height: 300px;
       background: radial-gradient(circle, rgba(77, 166, 255, 0.3) 0%, transparent 70%);
       bottom: 10%;
       left: -5%;
       animation-delay: -7s;
   }

   .orb-3 {
       width: 250px;
       height: 250px;
       background: radial-gradient(circle, rgba(255, 69, 0, 0.2) 0%, transparent 70%);
       top: 50%;
       right: 5%;
       animation-delay: -14s;
   }

   @keyframes floatOrb {
       0%, 100% { transform: translate(0, 0) scale(1); }
       25% { transform: translate(30px, -30px) scale(1.05); }
       50% { transform: translate(-20px, 20px) scale(0.95); }
       75% { transform: translate(20px, 10px) scale(1.02); }
   }

   /* Sparkle particles */
   .sparkles {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       pointer-events: none;
       z-index: 1;
   }

   .sparkle {
       position: absolute;
       width: 4px;
       height: 4px;
       background: var(--gold-primary);
       border-radius: 50%;
       opacity: 0;
       animation: sparkle 4s ease-in-out infinite;
   }

   @keyframes sparkle {
       0%, 100% { opacity: 0; transform: scale(0); }
       50% { opacity: 0.6; transform: scale(1); }
   }

   /* ═══════════════════════════════════════════════════════════════
      ACCESSIBILITY & FOCUS
      ═══════════════════════════════════════════════════════════════ */
   button:focus-visible, input:focus-visible {
       outline: var(--focus-outline);
       outline-offset: 4px;
   }

   /* ═══════════════════════════════════════════════════════════════
      PAGE TRANSITIONS
      ═══════════════════════════════════════════════════════════════ */
   .page {
       display: none;
       opacity: 0;
       animation: pageEnter 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
       padding-bottom: 4rem;
       position: relative;
       z-index: 10;
   }

   .page.active {
       display: block;
   }

   @keyframes pageEnter {
       from { 
           opacity: 0; 
           transform: translateY(30px) scale(0.98); 
       }
       to { 
           opacity: 1; 
           transform: translateY(0) scale(1); 
       }
   }

   /* ═══════════════════════════════════════════════════════════════
      LAYOUT & CONTAINERS
      ═══════════════════════════════════════════════════════════════ */
   .container {
       max-width: 800px;
       margin: 0 auto;
       padding: 2rem 1.5rem;
   }

   /* ═══════════════════════════════════════════════════════════════
      TYPOGRAPHY
      ═══════════════════════════════════════════════════════════════ */
   h1, h2, h3 {
       font-family: var(--font-display);   /* ADG-QMBP-20 · DEC-QMBP-S009-CD-01 */
       color: var(--gold-dark);
   }

   h1 {
       font-size: clamp(2.8rem, 6vw, 4.5rem);
       font-weight: 700;
       text-align: center;
       margin-bottom: 0.5rem;
       line-height: 1.1;
       background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-primary) 50%, #E8C547 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       text-shadow: 0 4px 30px rgba(212, 175, 55, 0.3);
       animation: titleShimmer 3s ease-in-out infinite;
   }

   @keyframes titleShimmer {
       0%, 100% { filter: brightness(1); }
       50% { filter: brightness(1.1); }
   }

   h2 {
       font-size: clamp(1.8rem, 4vw, 2.5rem);
       margin-bottom: 1.5rem;
       position: relative;
       display: inline-block;
   }

   .text-center { text-align: center; }
   .text-center h2 { display: block; }

   /* Decorative underline for h2 */
   h2::after {
       content: '';
       position: absolute;
       bottom: -8px;
       left: 50%;
       transform: translateX(-50%);
       width: 60px;
       height: 4px;
       background: linear-gradient(90deg, var(--gold-primary), var(--gold-light));
       border-radius: 2px;
   }

   /* ═══════════════════════════════════════════════════════════════
      GLASS CARDS - Premium Glassmorphism
      ═══════════════════════════════════════════════════════════════ */
   .glass-card {
       background: var(--glass-bg);
       backdrop-filter: blur(30px);
       -webkit-backdrop-filter: blur(30px);
       border: 1px solid var(--glass-border);
       border-radius: 28px;
       padding: clamp(1.75rem, 5vw, 3rem);
       box-shadow: 
           0 4px 24px rgba(0, 0, 0, 0.04),
           0 12px 48px rgba(212, 175, 55, 0.08),
           inset 0 1px 1px rgba(255, 255, 255, 0.9);
       position: relative;
       overflow: hidden;
       transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                   box-shadow 0.4s ease;
   }

   .glass-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 1px;
       background: linear-gradient(90deg, 
           transparent, 
           rgba(255, 255, 255, 0.8), 
           transparent);
   }

   .glass-card:hover {
       transform: translateY(-2px);
       box-shadow: 
           0 8px 32px rgba(0, 0, 0, 0.06),
           0 16px 64px rgba(212, 175, 55, 0.12),
           inset 0 1px 1px rgba(255, 255, 255, 0.9);
   }

   /* ═══════════════════════════════════════════════════════════════
      BUTTONS - Rich Interactive Elements
      ═══════════════════════════════════════════════════════════════ */
   .btn {
       background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-dark) 100%);
       color: white;
       border: none;
       padding: 1.25rem 2.5rem;
       border-radius: 16px;
       font-size: 1.15rem;
       font-weight: 700;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
       box-shadow: 
           0 4px 15px var(--shadow-gold),
           0 2px 4px rgba(0, 0, 0, 0.1);
       font-family: var(--font-body);   /* ADG-QMBP-20 · DEC-QMBP-S009-CD-01 */
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 0.6rem;
       position: relative;
       overflow: hidden;
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
   }

   .btn::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, 
           transparent, 
           rgba(255, 255, 255, 0.2), 
           transparent);
       transition: left 0.5s ease;
   }

   .btn:hover::before {
       left: 100%;
   }

   .btn:hover {
       transform: translateY(-3px);
       box-shadow: 
           0 8px 25px var(--shadow-gold),
           0 4px 8px rgba(0, 0, 0, 0.1);
   }

   .btn:active {
       transform: scale(0.98) translateY(0);
   }

   .btn-large {
       width: 100%;
       padding: 1.75rem 2rem;
       font-size: 1.35rem;
       margin-bottom: 1.25rem;
       border-radius: 20px;
   }

   .btn-blue {
       background: linear-gradient(135deg, var(--blue-bright) 0%, var(--blue-dark) 100%);
       box-shadow: 
           0 4px 15px rgba(77, 166, 255, 0.35),
           0 2px 4px rgba(0, 0, 0, 0.1);
   }

   .btn-blue:hover {
       box-shadow: 
           0 8px 25px rgba(77, 166, 255, 0.45),
           0 4px 8px rgba(0, 0, 0, 0.1);
   }

   .btn-secondary {
       background: white;
       color: var(--text-dark);
       border: 2px solid #e0e0e0;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
   }

   .btn-secondary:hover {
       border-color: var(--gold-primary);
       box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
   }

   /* ═══════════════════════════════════════════════════════════════
      HOME BUTTON
      ═══════════════════════════════════════════════════════════════ */
   #homeBtn {
       position: fixed;
       top: 1.25rem;
       left: 1.25rem;
       z-index: 1000;
       padding: 0.75rem 1.25rem;
       display: none;
       font-size: 1rem;
       border-radius: 12px;
       backdrop-filter: blur(10px);
       background: rgba(212, 175, 55, 0.9);
   }

   /* ═══════════════════════════════════════════════════════════════
      EMOJI BUTTONS - Student Quiz Options
      ═══════════════════════════════════════════════════════════════ */
   .emoji-options {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
       gap: 1.25rem;
       margin: 2rem 0;
   }

   .emoji-btn {
       background: white;
       border: 3px solid rgba(212, 175, 55, 0.15);
       border-radius: 24px;
       padding: 2rem 1.25rem;
       cursor: pointer;
       transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.75rem;
       position: relative;
       overflow: hidden;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
   }

   .emoji-btn::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: radial-gradient(circle at center, var(--gold-light) 0%, transparent 70%);
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .emoji-icon {
       font-size: 3.5rem;
       filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
       transition: transform 0.3s ease;
       position: relative;
       z-index: 1;
   }

   .emoji-btn span:last-child {
       font-weight: 600;
       color: var(--text-medium);
       font-size: 1rem;
       position: relative;
       z-index: 1;
   }

   .emoji-btn:hover {
       border-color: var(--gold-primary);
       transform: translateY(-6px);
       box-shadow: 0 12px 24px rgba(212, 175, 55, 0.15);
   }

   .emoji-btn:hover::before {
       opacity: 0.5;
   }

   .emoji-btn:hover .emoji-icon {
       transform: scale(1.1);
   }

   .emoji-btn.selected {
       background: linear-gradient(135deg, #FFFDF5 0%, #FFF9E5 100%);
       border-color: var(--gold-dark);
       box-shadow: 
           0 0 0 4px rgba(212, 175, 55, 0.15),
           0 8px 20px rgba(212, 175, 55, 0.2);
       transform: scale(0.98);
   }

   .emoji-btn.selected::before {
       opacity: 0.6;
   }

   /* ═══════════════════════════════════════════════════════════════
      PROGRESS BAR
      ═══════════════════════════════════════════════════════════════ */
   .progress-container {
       width: 100%;
       height: 10px;
       background: rgba(0, 0, 0, 0.05);
       border-radius: 20px;
       overflow: hidden;
       margin-bottom: 2.5rem;
       box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
   }

   .progress-bar {
       height: 100%;
       background: linear-gradient(90deg, 
           var(--gold-primary) 0%, 
           #E8C547 50%, 
           var(--red-orange) 100%);
       border-radius: 20px;
       transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
       box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
       position: relative;
   }

   .progress-bar::after {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background: linear-gradient(90deg, 
           transparent 0%, 
           rgba(255, 255, 255, 0.3) 50%, 
           transparent 100%);
       animation: progressShine 2s ease-in-out infinite;
   }

   @keyframes progressShine {
       0% { transform: translateX(-100%); }
       100% { transform: translateX(100%); }
   }

   /* ═══════════════════════════════════════════════════════════════
      TEACHER QUIZ - Slider Questions
      ═══════════════════════════════════════════════════════════════ */
   .slider-question {
       margin-bottom: 1.5rem;
       padding: 1.75rem;
       background: rgba(255, 255, 255, 0.65);
       border-radius: 20px;
       border-left: 5px solid var(--gold-primary);
       transition: all 0.3s ease;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
   }

   .slider-question:hover {
       background: rgba(255, 255, 255, 0.8);
       box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
   }

   .slider-question p {
       margin-bottom: 1rem;
       line-height: 1.5;
   }

   .slider-question p strong {
       color: var(--gold-dark);
   }

   .yes-no-buttons {
       display: flex;
       gap: 1rem;
       margin-bottom: 1rem;
   }

   .yes-no-buttons .btn {
       flex: 1;
       padding: 1rem;
       font-size: 1.1rem;
   }

   .intensity-wrapper {
       animation: slideDown 0.3s ease;
       padding-top: 0.5rem;
   }

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

   .intensity-slider {
       width: 100%;
       height: 10px;
       border-radius: 10px;
       background: linear-gradient(90deg, #e8e8e8, var(--red-orange));
       outline: none;
       -webkit-appearance: none;
       appearance: none;              /* standard — paired with vendor prefix */
       margin-top: 0.75rem;
   }

   .intensity-slider::-webkit-slider-thumb {
       -webkit-appearance: none;
       appearance: none;              /* standard — paired with vendor prefix */
       width: 26px;
       height: 26px;
       border-radius: 50%;
       background: white;
       cursor: pointer;
       box-shadow: 
           0 2px 8px rgba(0, 0, 0, 0.2),
           0 0 0 3px var(--red-orange);
       border: none;
       transition: transform 0.2s ease;
   }

   .intensity-slider::-webkit-slider-thumb:hover {
       transform: scale(1.1);
   }

   /* ═══════════════════════════════════════════════════════════════
      RESULT CARDS
      ═══════════════════════════════════════════════════════════════ */
   .result-card {
       background: white;
       border-radius: 24px;
       padding: 2.5rem;
       margin-bottom: 2rem;
       border-left: 6px solid var(--gold-primary);
       box-shadow: 
           0 4px 20px rgba(0, 0, 0, 0.04),
           0 8px 40px rgba(212, 175, 55, 0.08);
       position: relative;
       overflow: hidden;
   }

   .result-card::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       width: 200px;
       height: 200px;
       background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
       pointer-events: none;
   }

   .result-card h3 {
       font-size: 1.6rem;
       margin-bottom: 1rem;
   }

   .result-card.high-risk {
       border-left-color: var(--red-orange);
       background: linear-gradient(135deg, #FFF 0%, #FFF8F5 100%);
   }

   .result-card.high-risk::before {
       background: radial-gradient(circle, rgba(255, 69, 0, 0.08) 0%, transparent 70%);
   }

   /* ═══════════════════════════════════════════════════════════════
      BREATHING EXERCISE
      ═══════════════════════════════════════════════════════════════ */
   .breathing-container {
       text-align: center;
       padding: 2.5rem;
       background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(245, 237, 214, 0.4) 100%);
       border-radius: 24px;
       margin-top: 2rem;
       border: 1px solid rgba(212, 175, 55, 0.1);
   }

   .breathing-container h3 {
       margin-bottom: 0.5rem;
   }

   .breathing-bubble {
       width: 160px;
       height: 160px;
       margin: 2rem auto;
       background: radial-gradient(circle at 30% 30%, 
           var(--gold-light) 0%,
           var(--gold-primary) 50%, 
           var(--gold-dark) 100%);
       border-radius: 50%;
       animation: breathe 8s infinite ease-in-out;
       box-shadow: 
           0 0 60px rgba(212, 175, 55, 0.4),
           inset 0 -20px 40px rgba(0, 0, 0, 0.1),
           inset 0 20px 40px rgba(255, 255, 255, 0.3);
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-weight: 700;
       font-size: 1.4rem;
       position: relative;
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   }

   .breathing-bubble::after {
       content: 'Inhale';
       animation: breatheText 8s infinite ease-in-out;
   }

   /* Decorative ring around bubble */
   .breathing-bubble::before {
       content: '';
       position: absolute;
       width: 200px;
       height: 200px;
       border: 2px dashed rgba(212, 175, 55, 0.3);
       border-radius: 50%;
       animation: breatheRing 8s infinite ease-in-out;
   }

   @keyframes breathe {
       0%, 100% { transform: scale(1); }
       50% { transform: scale(1.35); }
   }

   @keyframes breatheRing {
       0%, 100% { transform: scale(1); opacity: 0.5; }
       50% { transform: scale(1.5); opacity: 0.2; }
   }

   @keyframes breatheText {
       0%, 95%, 100% { content: attr(data-inhale); }
       45%, 55% { content: attr(data-exhale); }
   }

   /* ═══════════════════════════════════════════════════════════════
      GROUNDING GAME MODAL
      ═══════════════════════════════════════════════════════════════ */
   .interactive-modal {
       display: none;
       margin-top: 1.5rem;
       background: linear-gradient(135deg, #FFFDF8 0%, #FFF9E8 100%);
       padding: 2rem;
       border-radius: 20px;
       border: 2px dashed var(--gold-primary);
       animation: modalEnter 0.4s ease;
   }

   @keyframes modalEnter {
       from { 
           opacity: 0; 
           transform: scale(0.95); 
       }
       to { 
           opacity: 1; 
           transform: scale(1); 
       }
   }

   .interactive-modal h4 {
       color: var(--gold-dark);
       font-size: 1.3rem;
       margin-bottom: 0.5rem;
   }

   .grounding-list {
       margin-top: 1rem;
   }

   .grounding-item {
       display: flex;
       align-items: center;
       gap: 12px;
       margin: 8px 0;
       cursor: pointer;
       padding: 14px 16px;
       border-radius: 12px;
       transition: all 0.25s ease;
       background: white;
       border: 1px solid rgba(212, 175, 55, 0.1);
   }

   .grounding-item:hover {
       background: #FFF9E5;
       border-color: rgba(212, 175, 55, 0.3);
       transform: translateX(4px);
   }

   .grounding-item.checked {
       background: rgba(212, 175, 55, 0.1);
       text-decoration: line-through;
       opacity: 0.7;
   }

   .grounding-checkbox {
       width: 28px;
       height: 28px;
       border: 2px solid var(--gold-dark);
       border-radius: 50%;
       display: grid;
       place-items: center;
       flex-shrink: 0;
       transition: all 0.25s ease;
   }

   .grounding-item.checked .grounding-checkbox {
       background: var(--gold-primary);
       border-color: var(--gold-primary);
   }

   .grounding-item.checked .grounding-checkbox::after {
       content: '✓';
       color: white;
       font-weight: bold;
       font-size: 1rem;
   }

   /* ═══════════════════════════════════════════════════════════════
      RECOVERY TOOLKIT
      ═══════════════════════════════════════════════════════════════ */
   .toolkit-header {
       margin: 2.5rem 0 1.5rem;
       color: var(--gold-dark);
       font-size: 1.5rem;
   }

   .toolkit-card {
       background: white;
       border-radius: 16px;
       padding: 1.75rem;
       margin-bottom: 1rem;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
       border-left: 4px solid var(--gold-primary);
       transition: all 0.3s ease;
   }

   .toolkit-card:hover {
       transform: translateX(4px);
       box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
   }

   .toolkit-card h4 {
       color: var(--gold-dark);
       font-size: 1.15rem;
       margin-bottom: 0.75rem;
       font-family: var(--font-display);   /* ADG-QMBP-20 · DEC-QMBP-S009-CD-01 */
   }

   .toolkit-card p {
       margin-bottom: 0.5rem;
   }

   .toolkit-card em {
       font-size: 0.9rem;
       color: var(--text-light);
   }

   /* ═══════════════════════════════════════════════════════════════
      STRATEGY CARDS (Student Results)
      ═══════════════════════════════════════════════════════════════ */
   .strategy-card {
       padding: 1.75rem;
       border-radius: 16px;
       margin-top: 1.25rem;
   }

   .strategy-card.energy {
       background: linear-gradient(135deg, #FFFBF0 0%, #FFF6E0 100%);
       border: 1px solid rgba(212, 175, 55, 0.2);
   }

   .strategy-card.calm {
       background: linear-gradient(135deg, #F0F9FF 0%, #E0F3FF 100%);
       border: 1px solid rgba(77, 166, 255, 0.2);
   }

   .strategy-card h4 {
       color: var(--gold-dark);
       margin-bottom: 0.75rem;
       font-size: 1.2rem;
   }

   .strategy-card ol {
       margin-left: 1.5rem;
       margin-top: 0.75rem;
   }

   .strategy-card li {
       margin-bottom: 0.4rem;
   }

   /* ═══════════════════════════════════════════════════════════════
      LANDING PAGE ENHANCEMENTS
      ═══════════════════════════════════════════════════════════════ */
   .landing-subtitle {
       font-size: 1.3rem;
       max-width: 580px;
       margin: 0 auto 2.5rem;
       color: var(--text-medium);
       line-height: 1.6;
   }

   .landing-icon {
       font-size: 4rem;
       display: block;
       text-align: center;
       margin-bottom: 1rem;
       filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
       animation: floatIcon 3s ease-in-out infinite;
   }

   @keyframes floatIcon {
       0%, 100% { transform: translateY(0); }
       50% { transform: translateY(-8px); }
   }

   .privacy-note {
       text-align: center;
       margin-top: 2.5rem;
       font-size: 0.9rem;
       color: var(--text-light);
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
   }

   /* ═══════════════════════════════════════════════════════════════
      MOBILE RESPONSIVE
      ═══════════════════════════════════════════════════════════════ */
   @media (max-width: 600px) {
       h1 { font-size: 2.4rem; }
       h2::after { width: 40px; }
       .btn-large { 
           padding: 1.4rem; 
           font-size: 1.15rem; 
       }
       .emoji-btn { 
           padding: 1.25rem 0.75rem; 
       }
       .emoji-icon { 
           font-size: 2.8rem; 
       }
       .glass-card { 
           padding: 1.5rem; 
           border-radius: 20px;
       }
       .slider-question {
           padding: 1.25rem;
       }
       .breathing-bubble {
           width: 130px;
           height: 130px;
           font-size: 1.2rem;
       }
       .breathing-bubble::before {
           width: 170px;
           height: 170px;
       }
       .orb-1 { width: 250px; height: 250px; }
       .orb-2 { width: 200px; height: 200px; }
       .orb-3 { display: none; }
   }

   /* ═══════════════════════════════════════════════════════════════
      REDUCED MOTION
      ═══════════════════════════════════════════════════════════════ */
   @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after {
           animation-duration: 0.01ms !important;
           animation-iteration-count: 1 !important;
           transition-duration: 0.01ms !important;
       }
       .breathing-bubble {
           animation: none;
       }
   }