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

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.feature-off { display:none !important; }

:root {
  --green: #34d399;
  --green-dark: #059669;
  --green-mid: #10b981;
  --green-light: #ecfdf5;
  --green-glow: rgba(5,150,105,.18);
  --red: #ef4444;
  --red-light: #fee2e2;
  --blue: #0ea5e9;
  --blue-dark: #0284c7;
  --blue-light: #e0f2fe;
  --teal: #0d9488;
  --teal-light: #ccfbf1;
  --orange: #f97316;
  --purple: #7c3aed;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --white: #ffffff;
  --radius: 20px;
  --radius-sm: 14px;
  --radius-xs: 8px;
  --shadow-xs: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow: 0 4px 20px rgba(0,0,0,.08), 0 1px 4px rgba(0,0,0,.04);
  --shadow-md: 0 8px 32px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.08);
  --shadow-green: 0 4px 24px rgba(5,150,105,.28), 0 1px 4px rgba(5,150,105,.14);
  --gradient-brand: linear-gradient(135deg, #059669 0%, #10b981 50%, #0ea5e9 100%);
  --gradient-dark: linear-gradient(160deg, #064e3b 0%, #065f46 60%, #0c4a6e 100%);
}

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

html {
  direction: rtl;
  font-family: 'Heebo', sans-serif;
  background: var(--gray-50);
  color: var(--gray-900);
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}

body { min-height: 100vh; }

/* ===== LAYOUT ===== */
.app { display: flex; flex-direction: column; min-height: 100vh; }

.view { display: none; flex-direction: column; min-height: 100vh; }
.view.active {
  display: flex;
  animation: viewSlideIn 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.view.slide-left { animation: viewSlideLeft 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }
.view.slide-right { animation: viewSlideRight 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; }
@keyframes viewSlideIn   { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
@keyframes viewSlideLeft { from { opacity:0; transform: translateX(-22px); } to { opacity:1; transform: translateX(0); } }
@keyframes viewSlideRight{ from { opacity:0; transform: translateX(22px); }  to { opacity:1; transform: translateX(0); } }

/* Swipe hint on first visit */
.swipe-hint {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.65); color: white; padding: 8px 18px;
  border-radius: 20px; font-size: 13px; z-index: 999;
  animation: swipeHintFade 3s forwards;
  pointer-events: none;
}
@keyframes swipeHintFade { 0%{opacity:0} 15%{opacity:1} 75%{opacity:1} 100%{opacity:0} }

/* ===== VIDEO LIBRARY — Netflix Style ===== */
.netflix-wrap { background: #141414; padding: 0 0 100px; min-height: 100%; }
.nf-hero {
  position: relative; height: 220px; overflow: hidden;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #0d2137 100%);
  display: flex; align-items: flex-end; padding: 0 16px 20px;
}
.nf-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(20,20,20,0.5) 60%, #141414 100%);
}
.nf-hero-content { position: relative; z-index: 1; }
.nf-hero-badge { font-size: 10px; font-weight: 900; letter-spacing: 2px; color: #e50914; margin-bottom: 6px; }
.nf-hero-title { font-size: 26px; font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 4px; }
.nf-hero-sub { font-size: 13px; color: #aaa; }
.nf-hero-emoji { position: absolute; top: 20px; left: 20px; font-size: 64px; opacity: 0.15; }

.nf-row { padding: 0 0 20px; }
.nf-row-title { color: #e5e5e5; font-size: 15px; font-weight: 800; padding: 16px 16px 10px; }
.nf-row-cards { display: flex; gap: 6px; overflow-x: auto; padding: 0 16px; scrollbar-width: none; }
.nf-row-cards::-webkit-scrollbar { display: none; }

.nf-card {
  flex-shrink: 0; width: 138px; border-radius: 6px; overflow: hidden;
  cursor: pointer; position: relative; transition: transform 0.2s;
}
.nf-card:active { transform: scale(0.95); }
.nf-card-bg {
  width: 138px; height: 82px;
  display: flex; align-items: center; justify-content: center;
  position: relative; font-size: 32px;
}
.nf-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 20%, rgba(0,0,0,0.75) 100%);
}
.nf-card-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; border: 1.5px solid rgba(255,255,255,0.5);
}
.nf-card-dur {
  position: absolute; top: 5px; left: 5px; font-size: 9px; font-weight: 800;
  background: rgba(0,0,0,0.75); color: #fff; padding: 1px 5px; border-radius: 4px;
}
.nf-card-bottom { background: #1f1f1f; padding: 6px 7px 8px; }
.nf-card-title { color: #e5e5e5; font-size: 11px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* courses page — light Netflix variant */
#vid-lib-courses.netflix-wrap { background: #f8fafc; }
#vid-lib-courses .nf-hero { background: linear-gradient(135deg,#e0f2fe 0%,#dbeafe 50%,#ede9fe 100%); }
#vid-lib-courses .nf-hero::before { background: linear-gradient(to bottom, transparent 0%, rgba(248,250,252,0.5) 60%, #f8fafc 100%); }
#vid-lib-courses .nf-hero-badge { color: #7c3aed; }
#vid-lib-courses .nf-hero-title { color: #1e293b; }
#vid-lib-courses .nf-hero-sub { color: #475569; }
#vid-lib-courses .nf-row-title { color: #334155; }
#vid-lib-courses .nf-card-bottom { background: #fff; border: 1px solid #e2e8f0; }
#vid-lib-courses .nf-card-title { color: #1e293b; }

/* family vid-lib — keep as card list inside normal bg */
.vid-lib-wrap { padding: 0 16px 8px; }
.vid-cats { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 8px; scrollbar-width: none; }
.vid-cats::-webkit-scrollbar { display: none; }
.vid-cat-btn {
  flex-shrink: 0; padding: 6px 14px; border-radius: 20px;
  border: 1.5px solid var(--gray-200); background: white;
  font-family: 'Heebo',sans-serif; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: all 0.15s;
}
.vid-cat-btn.active { background: var(--green); color: white; border-color: var(--green); }
.vid-cards { display: flex; flex-direction: column; gap: 10px; }
.vid-card {
  display: flex; align-items: center; gap: 12px;
  background: white; border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.07); cursor: pointer;
  transition: transform 0.15s;
}
.vid-card:active { transform: scale(0.98); }
.vid-thumb {
  width: 54px; height: 54px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0; position: relative;
}
.vid-play-badge {
  position: absolute; bottom: 2px; right: 2px;
  background: rgba(0,0,0,0.6); color: white; font-size: 10px;
  padding: 1px 4px; border-radius: 4px; font-weight: 700;
}
.vid-info { flex: 1; }
.vid-title { font-size: 14px; font-weight: 800; color: var(--gray-800); margin-bottom: 2px; line-height: 1.3; }
.vid-desc { font-size: 12px; color: var(--gray-500); margin-bottom: 4px; line-height: 1.4; }
.vid-meta { display: flex; align-items: center; gap: 6px; }
.vid-dur { font-size: 11px; font-weight: 800; color: var(--green); background: #d1fae5; padding: 2px 7px; border-radius: 8px; }
.vid-cat-tag { font-size: 11px; color: var(--gray-400); }

/* ===== VIDEO MODAL ===== */
#video-modal {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(0,0,0,0.88); display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
#video-modal.active { display: flex; animation: viewSlideIn 0.2s ease; }
.vid-modal-inner {
  background: white; border-radius: 20px; width: 100%; max-width: 500px;
  overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.vid-modal-thumb {
  width: 100%; height: 180px;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; position: relative;
}
.vid-modal-dur-badge {
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(0,0,0,0.7); color: white; font-size: 13px; font-weight: 800;
  padding: 4px 10px; border-radius: 8px;
}
.vid-modal-body { padding: 20px 20px 24px; }
.vid-modal-cat { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--gray-400); margin-bottom: 6px; }
.vid-modal-title { font-size: 18px; font-weight: 900; color: var(--gray-800); margin-bottom: 8px; line-height: 1.3; }
.vid-modal-desc { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin-bottom: 20px; }
.vid-modal-actions { display: flex; gap: 10px; }
.vid-modal-watch-btn {
  flex: 1; padding: 14px; background: linear-gradient(135deg,#059669,#10b981); color: white;
  border: none; border-radius: 12px; font-family: 'Heebo',sans-serif;
  font-size: 15px; font-weight: 800; cursor: pointer; display: flex;
  align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(16,185,129,0.3);
}
.vid-modal-close-btn {
  padding: 14px 18px; background: var(--gray-100); color: var(--gray-700);
  border: none; border-radius: 12px; font-family: 'Heebo',sans-serif;
  font-size: 15px; font-weight: 700; cursor: pointer;
}

/* ===== PROFILE PHOTO MODAL ===== */
#profile-photo-modal {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(0,0,0,0.5);
  display: none; align-items: flex-end; justify-content: center;
  backdrop-filter: blur(3px);
}
#profile-photo-modal.active { display: flex; }
.pp-sheet {
  background: white; border-radius: 24px 24px 0 0;
  width: 100%; max-width: 500px; padding: 12px 20px 40px;
  animation: slideUpModal .3s cubic-bezier(.32,1.01,.55,1);
  max-height: 92vh; overflow-y: auto;
}
.pp-sheet-handle {
  width: 40px; height: 4px; background: #e5e7eb; border-radius: 2px;
  margin: 0 auto 20px;
}
.pp-preview-row {
  display: flex; align-items: center; gap: 16px; margin-bottom: 24px;
  padding: 16px; background: #f9fafb; border-radius: 16px;
}
.pp-preview-circle {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg,#d1fae5,#bfdbfe);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; flex-shrink: 0; cursor: pointer;
  position: relative; overflow: hidden;
  border: 3px solid #10b981;
  box-shadow: 0 4px 14px rgba(16,185,129,0.25);
}
.pp-camera-badge {
  position: absolute; bottom: 0; right: 0;
  background: #10b981; color: white; border-radius: 50%;
  width: 24px; height: 24px; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid white;
}
.pp-preview-name { font-size: 17px; font-weight: 800; color: #1e293b; margin-bottom: 4px; font-family: 'Heebo',sans-serif; }
.pp-preview-sub { font-size: 12px; color: #94a3b8; font-family: 'Heebo',sans-serif; }
.pp-options { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; }
.pp-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 12px; border-radius: 14px;
  cursor: pointer; transition: background .15s;
}
.pp-option:hover { background: #f8fafc; }
.pp-option:active { background: #f1f5f9; }
.pp-option-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.pp-option-text { flex: 1; }
.pp-option-title { font-size: 15px; font-weight: 700; color: #1e293b; font-family: 'Heebo',sans-serif; }
.pp-option-sub { font-size: 12px; color: #94a3b8; font-family: 'Heebo',sans-serif; margin-top: 2px; }
.pp-emoji-label { font-size: 13px; font-weight: 700; color: #64748b; margin-bottom: 10px; font-family: 'Heebo',sans-serif; }
.pp-emoji-list {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 16px;
}
.pp-emoji-btn {
  background: #f8fafc; border: 1.5px solid #e2e8f0; border-radius: 12px;
  font-size: 28px; padding: 10px; cursor: pointer; transition: all .15s;
}
.pp-emoji-btn:hover { background: #f0fdf4; border-color: #86efac; transform: scale(1.1); }
.pp-remove-btn {
  display: block; width: 100%; background: #fef2f2; color: #dc2626;
  border: 1.5px solid #fecaca; border-radius: 12px;
  padding: 12px; font-size: 14px; font-weight: 700;
  font-family: 'Heebo',sans-serif; cursor: pointer; margin-bottom: 10px;
}
.pp-save-btn {
  display: block; width: 100%;
  background: linear-gradient(135deg,#059669,#10b981); color: white;
  border: none; border-radius: 16px; padding: 16px;
  font-size: 16px; font-weight: 800;
  font-family: 'Heebo',sans-serif; cursor: pointer;
  box-shadow: 0 4px 14px rgba(16,185,129,0.3);
}

/* ===== VIDEO IFRAME PANEL ===== */
#video-iframe-panel {
  position: fixed; inset: 0; z-index: 1200;
  background: #000; display: none;
  flex-direction: column;
}
#video-iframe-panel.active { display: flex; }
.vif-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; background: #111;
  border-bottom: 1px solid #222;
}
.vif-close {
  background: #333; border: none; color: #fff;
  font-family: 'Heebo',sans-serif; font-size: 13px; font-weight: 700;
  padding: 8px 14px; border-radius: 8px; cursor: pointer;
}
.vif-title { color: #e5e5e5; font-size: 14px; font-weight: 700; font-family: 'Heebo',sans-serif; text-align: center; flex: 1; }
.vif-frame-wrap { flex: 1; position: relative; }
.vif-frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.vif-note { padding: 8px 16px; background: #111; color: #64748b; font-size: 11px; font-family: 'Heebo',sans-serif; text-align: center; }

/* ===== PRO GATE MODAL ===== */
#pro-modal {
  position: fixed; inset: 0; z-index: 1300;
  background: rgba(0,0,0,0.6); display: none;
  align-items: flex-end; justify-content: center;
  backdrop-filter: blur(3px);
}
#pro-modal.active { display: flex; }
.pro-modal-card {
  background: white; border-radius: 28px 28px 0 0;
  padding: 32px 24px 40px; width: 100%; max-width: 500px;
  text-align: center; position: relative;
  animation: slideUpModal 0.3s cubic-bezier(.32,1.01,.55,1);
}
@keyframes slideUpModal { from { transform: translateY(100%); } to { transform: translateY(0); } }
.pro-modal-close {
  position: absolute; top: 14px; right: 16px;
  background: #f1f5f9; border: none; border-radius: 50%;
  width: 32px; height: 32px; font-size: 14px; cursor: pointer; color: #64748b;
}
.pro-modal-icon { font-size: 48px; margin-bottom: 12px; }
.pro-modal-title { font-size: 22px; font-weight: 900; color: #1e293b; margin-bottom: 8px; font-family: 'Heebo',sans-serif; }
.pro-modal-sub { font-size: 14px; color: #64748b; margin-bottom: 20px; line-height: 1.6; font-family: 'Heebo',sans-serif; }
.pro-modal-perks { text-align: right; margin-bottom: 24px; display: flex; flex-direction: column; gap: 10px; }
.pro-perk { font-size: 15px; color: #1e293b; font-weight: 600; font-family: 'Heebo',sans-serif; display: flex; align-items: center; gap: 8px; }
.pro-modal-cta {
  display: block; width: 100%;
  background: linear-gradient(135deg,#059669,#10b981); color: white;
  border: none; border-radius: 16px; padding: 17px;
  font-size: 17px; font-weight: 800; font-family: 'Heebo',sans-serif;
  cursor: pointer; margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(16,185,129,0.3);
}
.pro-modal-cancel {
  background: none; border: none; color: #94a3b8;
  font-size: 14px; font-family: 'Heebo',sans-serif; cursor: pointer; padding: 8px;
}

/* ===== NAVBAR ===== */
.navbar {
  background: var(--white);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar-logo {
  font-size: 20px;
  font-weight: 900;
  color: var(--green-dark);
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.navbar-logo span { color: var(--gray-400); font-weight: 400; font-size: 13px; letter-spacing: 0; margin-inline-end: 4px; }
.back-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--gray-600);
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Heebo', sans-serif;
}

/* ===== PERSONAL AI MESSAGE ===== */
.personal-msg-section {
  background: var(--white);
  border-radius: var(--radius);
  margin: 0 16px 16px;
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1.5px solid #a7f3d0;
}
.personal-msg-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.personal-msg-title { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.personal-msg-sub { font-size: 13px; color: var(--gray-600); line-height: 1.5; }
.personal-msg-time-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.personal-msg-preview {
  background: #f0fdf4;
  border: 1px solid #a7f3d0;
  border-radius: var(--radius-sm);
  padding: 14px;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-line;
  color: var(--gray-800);
  margin-bottom: 12px;
  direction: rtl;
}
.personal-msg-actions { display: flex; gap: 10px; margin-bottom: 12px; }
.pmsg-btn {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.pmsg-btn.preview { background: var(--gray-100); color: var(--gray-700); }
.pmsg-btn.send { background: linear-gradient(135deg, #059669, #34d399); color: white; }
.personal-msg-note { font-size: 12px; color: var(--gray-400); line-height: 1.5; }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: var(--gray-200);
  border-radius: 26px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-slider:before {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .toggle-slider { background: var(--green-dark); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(22px); }

/* ===== PREP SCREEN ===== */
.prep-modal-inner { text-align: center; }
.prep-icon { font-size: 48px; margin-bottom: 8px; }
.prep-desc { font-size: 14px; color: var(--gray-600); line-height: 1.7; margin-bottom: 18px; }
.prep-dnd-link {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #0284c7; color: white; border-radius: var(--radius-sm);
  padding: 14px; text-decoration: none; margin-bottom: 16px;
  font-size: 15px; font-weight: 700;
  transition: background 0.15s;
}
.prep-dnd-link:active { background: #0369a1; }
.prep-manual { background: var(--gray-50); border-radius: var(--radius-sm); padding: 14px; text-align: right; }
.prep-manual-title { font-size: 12px; font-weight: 700; color: var(--gray-400); margin-bottom: 8px; }
.prep-steps { display: flex; flex-direction: column; gap: 8px; }
.prep-step { display: flex; justify-content: space-between; font-size: 13px; color: var(--gray-700); }
.prep-step span:first-child { font-weight: 700; }

/* ===== RETURN BANNER ===== */
.return-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #059669, #34d399);
  color: white;
  padding: 12px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
.return-banner-inner { display: flex; align-items: center; gap: 12px; max-width: 480px; margin: 0 auto; }
.return-banner-text { flex: 1; font-size: 14px; font-weight: 600; line-height: 1.5; }
.return-banner-text small { font-size: 12px; opacity: 0.85; }
.return-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
.rb-btn { padding: 6px 14px; border: none; border-radius: 20px; font-family: 'Heebo',sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; }
.rb-btn.green { background: white; color: var(--green-dark); }
.rb-btn.gray  { background: rgba(255,255,255,0.25); color: white; }

/* ===== שיתוף-שיקוף ===== */
.sr-modal-inner { text-align: center; }
.sr-header { margin-bottom: 20px; }
.sr-title { font-size: 20px; font-weight: 900; margin-bottom: 6px; }
.sr-sub { font-size: 14px; color: var(--gray-600); line-height: 1.5; }
.sr-mic-btn {
  width: 100%; padding: 18px;
  background: linear-gradient(135deg, #059669, #34d399);
  color: white; border: none; border-radius: var(--radius-sm);
  font-family: 'Heebo',sans-serif; font-size: 18px; font-weight: 800;
  cursor: pointer; margin-bottom: 10px;
  box-shadow: 0 4px 20px rgba(5,150,105,0.3);
  transition: all 0.2s;
}
.sr-mic-btn.recording {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  box-shadow: 0 4px 20px rgba(220,38,38,0.4);
  animation: pulse-red 1.2s infinite;
}
@keyframes pulse-red {
  0%,100% { box-shadow: 0 4px 20px rgba(220,38,38,0.4); }
  50%      { box-shadow: 0 4px 36px rgba(220,38,38,0.7); }
}
.sr-status { font-size: 13px; color: var(--gray-600); min-height: 20px; margin-bottom: 14px; }
.sr-divider { font-size: 12px; color: var(--gray-400); margin: 8px 0 10px; }

.sr-resp-head { font-size: 13px; font-weight: 800; color: var(--green-dark); margin-bottom: 14px; text-align: right; }
.sr-resp-block { background: var(--gray-50); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 10px; text-align: right; }
.sr-resp-block.mirror { background: #ecfdf5; }
.sr-resp-block.tip { background: #eff6ff; }
.sr-resp-label { font-size: 11px; font-weight: 800; color: var(--gray-400); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 6px; }
.sr-resp-block div:last-child { font-size: 14px; line-height: 1.7; color: var(--gray-800); }
.sr-resp-footer { font-size: 13px; color: var(--gray-400); margin-top: 14px; }

/* ===== MISSIONS NEW STYLE ===== */
.missions-pts-row { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; color: var(--gray-500); margin-bottom: 6px; }
.mission-item-new {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; background: var(--white);
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  margin-bottom: 8px; cursor: pointer; transition: all 0.15s;
  width: 100%; text-align: right; font-family: 'Heebo', sans-serif;
  -webkit-appearance: none; appearance: none; outline: none;
}
.mission-item-new:hover { border-color: var(--green); background: #f0fdf4; }
.mission-item-new.done { background: var(--green-light); border-color: var(--green); opacity: 0.8; cursor: default; }
.mi-icon { font-size: 24px; flex-shrink: 0; }
.mi-body { flex: 1; }
.mi-title { font-size: 15px; font-weight: 700; }
.mi-sub { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.mi-right { flex-shrink: 0; }
.mi-pts { font-size: 13px; font-weight: 800; color: var(--green-dark); }
.mi-check { font-size: 18px; color: var(--green-dark); font-weight: 900; }

/* ===== PREMIUM ===== */
.premium-badge {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white; font-size: 9px; font-weight: 900;
  padding: 2px 5px; border-radius: 4px; letter-spacing: 0.5px;
  vertical-align: middle; margin-inline-end: 2px;
}
.premium-badge-lg {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white; font-size: 12px; font-weight: 900;
  padding: 3px 10px; border-radius: 6px; letter-spacing: 1px;
}
.today-action-btn.premium-locked {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  color: #92400e;
  border: 1.5px solid #fcd34d;
  position: relative;
}
.premium-lock-icon { font-size: 22px; display: flex; align-items: center; gap: 4px; }

.premium-teaser-card {
  background: linear-gradient(135deg, #fffbeb, #fef9c3);
  border: 1.5px solid #fcd34d;
  border-radius: var(--radius);
  margin: 0 16px 16px;
  padding: 20px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s;
}
.premium-teaser-card:active { transform: scale(0.98); }
.premium-teaser-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.premium-teaser-icon { font-size: 28px; }
.premium-teaser-title { font-size: 16px; font-weight: 800; color: var(--gray-800); margin-bottom: 6px; }
.premium-teaser-desc { font-size: 13px; color: var(--gray-600); line-height: 1.6; margin-bottom: 12px; }
.premium-teaser-btn { font-size: 13px; font-weight: 700; color: #92400e; }

.premium-modal-inner { text-align: center; }
.premium-modal-hero { padding: 8px 0 20px; }
.premium-modal-crown { font-size: 48px; margin-bottom: 8px; }
.premium-modal-title { font-size: 26px; font-weight: 900; background: linear-gradient(135deg, #f59e0b, #d97706); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 4px; }
.premium-modal-sub { font-size: 13px; color: var(--gray-400); }

.premium-features-list { text-align: right; margin-bottom: 20px; }
.pf-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); align-items: flex-start; }
.pf-item:last-child { border: none; }
.pf-icon { font-size: 22px; width: 36px; flex-shrink: 0; text-align: center; margin-top: 2px; }
.pf-title { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.pf-desc { font-size: 12px; color: var(--gray-500); }

.premium-price-row { margin-bottom: 16px; }
.premium-price { font-size: 36px; font-weight: 900; color: var(--gray-900); }
.premium-price-period { font-size: 16px; color: var(--gray-400); }

.premium-cta-btn {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white; border: none; border-radius: var(--radius-sm);
  font-family: 'Heebo',sans-serif; font-size: 16px; font-weight: 800;
  cursor: pointer; margin-bottom: 10px;
  box-shadow: 0 4px 16px rgba(245,158,11,0.35);
}

/* ===== PIN SCREEN ===== */
.pin-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(160deg, #059669 0%, #10b981 50%, #34d399 100%);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: white;
}
.pin-logo { font-size: 48px; }
.pin-title { font-size: 28px; font-weight: 900; letter-spacing: 4px; }
.pin-subtitle { font-size: 14px; opacity: 0.75; margin-bottom: 8px; }
.pin-dots { display: flex; gap: 16px; margin-bottom: 4px; }
.pin-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.6); background: transparent; transition: background 0.15s; }
.pin-dot.filled { background: white; border-color: white; }
.pin-error { font-size: 13px; color: #fde68a; min-height: 18px; }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.pin-key { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,0.2); border: none; color: white; font-size: 24px; font-weight: 700; font-family: 'Heebo',sans-serif; cursor: pointer; transition: background 0.1s; }
.pin-key:active { background: rgba(255,255,255,0.4); }
.pin-key-empty { background: transparent; pointer-events: none; }
.pin-key-del { font-size: 20px; }
.pin-forgot { margin-top: 16px; background: none; border: none; color: rgba(255,255,255,0.6); font-family: 'Heebo',sans-serif; font-size: 13px; cursor: pointer; text-decoration: underline; }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-8px)} 40%,80%{transform:translateX(8px)} }
.pin-dots.shake { animation: shake 0.5s; }

/* ===== WA SIMPLE SETUP ===== */
.wa-modal-sub { font-size: 14px; color: var(--gray-600); margin-bottom: 20px; line-height: 1.6; }
.wa-time-choice { display: flex; gap: 10px; }
.wa-time-btn {
  flex: 1; padding: 14px 10px; border-radius: var(--radius-sm);
  border: 2px solid var(--gray-200); background: var(--gray-50);
  font-family: 'Heebo',sans-serif; font-size: 15px; font-weight: 700;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: all 0.15s;
}
.wa-time-btn span { font-size: 12px; font-weight: 400; color: var(--gray-500); }
.wa-time-btn.active { border-color: var(--green-dark); background: var(--green-light); color: var(--green-dark); }
.wa-time-btn.active span { color: var(--green-dark); }
.today-action-btn.connected { background: var(--green-light); color: var(--green-dark); }

/* ===== BOTTOM NAV ===== */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 68px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(0,0,0,.06);
  display: flex;
  z-index: 500;
  box-shadow: 0 -8px 32px rgba(0,0,0,.10), 0 -1px 0 rgba(0,0,0,.04);
  padding-bottom: env(safe-area-inset-bottom);
}
.bn-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 0 6px;
  transition: all 0.2s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.bn-item:active { transform: scale(0.92); }
.bn-item::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%) scale(0);
  width: 44px;
  height: 32px;
  background: var(--green-glow);
  border-radius: 12px;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.bn-item.active::before { transform: translateX(-50%) scale(1); }
.bn-icon {
  font-size: 20px; line-height: 1;
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; z-index: 1;
}
.bn-label {
  font-size: 9.5px; font-weight: 600; font-family: 'Heebo',sans-serif;
  color: var(--gray-400); transition: color 0.2s;
  position: relative; z-index: 1;
}
.bn-item.active .bn-label { color: var(--green-dark); font-weight: 800; }
.bn-item.active .bn-icon { transform: translateY(-2px) scale(1.1); }

/* All views get bottom padding for nav */
.view { padding-bottom: 72px; }
#view-community { padding-top: 0 !important; }

/* ===== INNER TABS ===== */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
  background: var(--white);
  border-bottom: 1px solid var(--gray-100);
  position: sticky;
  top: 0;
  z-index: 50;
}
.view-header-title { font-size: 18px; font-weight: 800; }
.view-header-sub { font-size: 13px; color: var(--gray-400); }

.inner-tabs {
  display: flex;
  gap: 0;
  background: var(--gray-100);
  margin: 12px 16px;
  border-radius: 12px;
  padding: 4px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.inner-tab {
  flex: 1;
  padding: 12px 4px;
  min-height: 46px;
  background: none;
  border: none;
  border-radius: 9px;
  font-family: 'Heebo',sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.inner-tab.active {
  background: var(--white);
  color: var(--green-dark);
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ad-tab { display: none; }
.ad-tab.active { display: block; }

/* ===== HOME COMPACT ===== */
.home-hero--compact { padding: 24px 24px 28px; }
.home-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.home-greeting-sm { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.8); }
.settings-icon-btn {
  background: rgba(255,255,255,0.95);
  border: none;
  border-radius: 50%;
  width: 42px; height: 42px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.settings-icon-btn:active { background: rgba(255,255,255,0.35); }

.home-quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px;
}
.hq-card {
  border-radius: var(--radius);
  padding: 20px 16px;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s;
  box-shadow: var(--shadow);
  -webkit-tap-highlight-color: transparent;
}
button.hq-card { width: 100%; font-family: 'Heebo', sans-serif; text-align: start; }
.hq-card:active { transform: scale(0.95); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.hq-card.green  { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 1.5px solid #a7f3d0; }
.hq-card.blue   { background: linear-gradient(135deg, #eff6ff, #dbeafe); border: 1.5px solid #93c5fd; }
.hq-card.teal   { background: linear-gradient(135deg, #f0fdfa, #ccfbf1); border: 1.5px solid #99f6e4; }
.hq-card.purple { background: linear-gradient(135deg, #f5f3ff, #ede9fe); border: 1.5px solid #c4b5fd; }
.hq-card.red   { background: linear-gradient(135deg, #dc2626, #ef4444); border: 2px solid #b91c1c; }
.hq-card.red .hq-label { color: white; }
.hq-card.red .hq-sub   { color: rgba(255,255,255,0.8); }
.hq-sos {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  animation: sos-pulse 2.8s ease-in-out infinite;
}
@keyframes sos-pulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(220,38,38,0.4); }
  50%       { box-shadow: 0 4px 28px rgba(220,38,38,0.7); }
}
.hq-sos .hq-icon { font-size: 34px; margin-bottom: 0; }
.hq-icon { font-size: 30px; margin-bottom: 10px; display: block; }
.hq-label { font-size: 15px; font-weight: 800; color: var(--gray-800); margin-bottom: 4px; }
.hq-sub { font-size: 13px; color: var(--gray-500); line-height: 1.4; }

/* Today tab actions row */
.today-actions-row { display: flex; gap: 12px; padding: 0 16px 16px; }
.today-action-btn {
  flex: 1;
  padding: 16px 12px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  font-family: 'Heebo',sans-serif;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow);
  transition: transform 0.15s;
}
.today-action-btn:active { transform: scale(0.97); }
.today-action-btn.green  { background: var(--green-light); color: var(--green-dark); }
.today-action-btn.blue   { background: var(--blue-light);  color: #1d4ed8; }
.today-action-btn.wa-action { background: #dcfce7; color: #166534; }

/* ===== KLEER LOGO ===== */
.kleer-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 8px 0 16px;
}
.kleer-logo-svg {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}
.kleer-logo-circle {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 2px solid rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  backdrop-filter: blur(4px);
}
.kleer-logo-img {
  width: 34px;
  height: 40px;
  filter: brightness(0) invert(1);
}
.kleer-logo-text {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 10px;
  color: white;
  text-shadow: 0 2px 12px rgba(0,0,0,0.15);
  font-family: 'Heebo', sans-serif;
  line-height: 1;
}
.kleer-logo-sub {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 3.5px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  margin-top: 5px;
}
.kleer-logo-heb {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  margin-top: 6px;
  letter-spacing: 0.3px;
}
.home-hero-desc {
  font-size: 14px;
  opacity: 0.75;
  line-height: 1.6;
  max-width: 280px;
  margin: 0 auto;
}

/* Navbar logo icon */
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-logo-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* ===== HOME VIEW ===== */
.home-hero {
  background: linear-gradient(160deg, #059669 0%, #10b981 45%, #34d399 80%, #6ee7b7 100%);
  padding: 48px 24px 36px;
  text-align: center;
  color: white;
}
.home-greeting { font-size: 14px; opacity: 0.75; font-weight: 500; margin-bottom: 8px; letter-spacing: 0.3px; }
.home-hero h1 { font-size: 38px; font-weight: 900; margin-bottom: 10px; letter-spacing: -1px; }
.home-days-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Home clean counter — compact days display in hero */
.home-clean-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 6px;
  gap: 2px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  padding: 10px 32px;
  backdrop-filter: blur(4px);
}
.home-clean-num {
  font-size: 40px;
  font-weight: 900;
  line-height: 1;
  color: white;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0,0,0,0.12);
}
.home-clean-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.5px;
}
.home-hero p { font-size: 15px; opacity: 0.85; line-height: 1.6; max-width: 300px; margin: 0 auto; }

/* ===== 24-HOUR COMMITMENT CARD ===== */
.dc-card {
  background: white;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.07);
  border: 1.5px solid #e8ecf0;
}
.dc-card.dc-active { background: #f0fdf4; border-color: #86efac; }
.dc-card.dc-evening { background: linear-gradient(135deg,#fffbeb,#fef9c3); border-color: #fde68a; }
.dc-card.dc-done { background: linear-gradient(135deg,#f0fdf4,#dcfce7); border-color: #86efac; }
.dc-card.dc-tomorrow { background: #f8fafc; border-color: #e2e8f0; text-align: center; padding: 24px 18px; }
.dc-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.dc-emoji { font-size: 28px; flex-shrink: 0; }
.dc-meta { flex: 1; }
.dc-title { font-size: 16px; font-weight: 800; color: #1e293b; font-family: 'Heebo',sans-serif; }
.dc-sub { font-size: 12px; color: #64748b; margin-top: 2px; font-family: 'Heebo',sans-serif; }
.dc-streak {
  background: #fff7ed; border: 1.5px solid #fed7aa;
  border-radius: 20px; padding: 4px 10px;
  font-size: 13px; font-weight: 800; color: #ea580c;
  white-space: nowrap; flex-shrink: 0;
}
.dc-quote {
  font-size: 14px; line-height: 1.7; color: #475569;
  font-family: 'Heebo',sans-serif; margin-bottom: 14px;
  padding: 10px 14px; background: rgba(0,0,0,0.03);
  border-radius: 10px; border-inline-start: 3px solid #10b981;
  font-style: italic;
}
.dc-commit-btn {
  display: block; width: 100%;
  background: linear-gradient(135deg,#059669,#10b981); color: white;
  border: none; border-radius: 14px; padding: 16px;
  font-size: 17px; font-weight: 800; font-family: 'Heebo',sans-serif;
  cursor: pointer; box-shadow: 0 4px 14px rgba(16,185,129,0.35);
  letter-spacing: 0.3px;
}
.dc-commit-btn:active { transform: scale(0.98); }
.dc-answer-row { display: flex; gap: 10px; }
.dc-yes-btn {
  flex: 1; background: linear-gradient(135deg,#059669,#10b981); color: white;
  border: none; border-radius: 12px; padding: 14px;
  font-size: 15px; font-weight: 800; font-family: 'Heebo',sans-serif; cursor: pointer;
}
.dc-no-btn {
  flex: 1; background: white; color: #64748b;
  border: 1.5px solid #e2e8f0; border-radius: 12px; padding: 14px;
  font-size: 15px; font-weight: 700; font-family: 'Heebo',sans-serif; cursor: pointer;
}
.dc-emoji-center { font-size: 40px; margin-bottom: 10px; }

/* ===== DAILY QUESTION CARD ===== */
.dq-card {
  background: linear-gradient(135deg,#eff6ff,#e0e7ff);
  border-radius: 16px; padding: 16px;
  border: 1.5px solid #c7d2fe;
}
.dq-badge {
  display: inline-block; font-size: 11px; font-weight: 800; color: #4338ca;
  background: #e0e7ff; border-radius: 20px; padding: 3px 10px; margin-bottom: 10px;
  font-family: 'Heebo',sans-serif; letter-spacing: 0.3px;
}
.dq-text {
  font-size: 16px; font-weight: 800; color: #1e1b4b;
  font-family: 'Heebo',sans-serif; margin-bottom: 14px; line-height: 1.5;
}
.dq-answer-btn {
  background: #4338ca; color: white; border: none;
  border-radius: 10px; padding: 10px 18px;
  font-size: 14px; font-weight: 700; font-family: 'Heebo',sans-serif;
  cursor: pointer;
}

/* ===== EVENING STATS CARD ===== */
.hes-card {
  background: linear-gradient(135deg,#0f172a,#1e293b);
  border-radius: 16px; padding: 16px;
}
.hes-title {
  font-size: 13px; font-weight: 800; color: #94a3b8;
  font-family: 'Heebo',sans-serif; margin-bottom: 14px; letter-spacing: 0.5px;
}
.hes-stats { display: flex; gap: 0; }
.hes-stat {
  flex: 1; text-align: center;
  border-inline-start: 1px solid rgba(255,255,255,0.08);
}
.hes-stat:first-child { border-inline-start: none; }
.hes-num { font-size: 26px; font-weight: 900; color: #10b981; font-family: 'Heebo',sans-serif; }
.hes-label { font-size: 11px; color: #64748b; font-family: 'Heebo',sans-serif; margin-top: 3px; line-height: 1.4; }

.daily-quote-card {
  margin: 16px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  border-inline-start: 4px solid var(--green);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.daily-quote-card::before {
  content: '"';
  position: absolute;
  top: -8px;
  right: 16px;
  font-size: 80px;
  color: var(--green-light);
  font-family: Georgia, serif;
  line-height: 1;
  pointer-events: none;
}
.quote-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; z-index: 1; }
.quote-text { font-size: 15px; line-height: 1.65; font-weight: 500; color: var(--gray-800); z-index: 1; font-style: italic; transition: opacity 0.15s; }
.quote-author { font-size: 12px; color: var(--gray-400); margin-top: 6px; font-style: normal; font-weight: 600; }
.quote-more { display: none; font-size: 11.5px; color: var(--green); margin-top: 10px; font-style: normal; font-weight: 700; z-index: 1; position: relative; }
.daily-quote-card.tappable { cursor: pointer; transition: transform 0.12s, box-shadow 0.12s; }
.daily-quote-card.tappable:active { transform: scale(0.985); box-shadow: var(--shadow-sm, var(--shadow)); }
.daily-quote-card.tappable .quote-more { display: block; }
.quote-refresh-btn {
  flex-shrink: 0;
  align-self: flex-start;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--gray-400);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: color 0.15s, transform 0.3s;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}
.quote-refresh-btn:active { color: var(--green-dark); transform: rotate(180deg); }

.home-settings-row {
  display: flex;
  gap: 10px;
  padding: 0 20px 28px;
}
.settings-link {
  flex: 1;
  padding: 10px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
  cursor: pointer;
}

.path-section { padding: 12px 16px 16px; flex: 1; }
.path-section h2 { font-size: 16px; font-weight: 700; color: var(--gray-500); text-align: center; margin-bottom: 14px; }

/* ===== ONBOARDING ===== */
.ob-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.ob-overlay.active { display: flex; }

.ob-card {
  background: var(--white);
  border-radius: 24px 24px 0 0;
  padding: 28px 24px 40px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.35s ease;
}

.ob-step { display: none; text-align: center; }
.ob-step.active { display: block; }

.ob-emoji { font-size: 48px; margin-bottom: 14px; display: block; }
.ob-card h2 { font-size: 24px; font-weight: 900; margin-bottom: 8px; }
.ob-card p { font-size: 14px; color: var(--gray-600); line-height: 1.6; margin-bottom: 20px; }

.ob-field { text-align: right; margin-bottom: 16px; }
.ob-field label { display: block; font-size: 13px; font-weight: 700; color: var(--gray-600); margin-bottom: 6px; }
.ob-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif;
  font-size: 15px;
  direction: rtl;
  outline: none;
}
.ob-input:focus { border-color: var(--green); }

.ob-quick-days {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.ob-day-btn {
  padding: 10px 6px;
  background: var(--gray-50);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.ob-day-btn:hover {
  background: var(--green-light);
  border-color: var(--green);
  color: var(--green-dark);
}
.ob-day-btn.selected {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: white;
  font-weight: 800;
  box-shadow: 0 2px 10px rgba(5,150,105,0.35);
}

.ob-addiction-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}
.ob-addict-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #f0fdf4;
  border: 2px solid #d1fae5;
  border-radius: 14px;
  padding: 14px 8px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  color: #064e3b;
  cursor: pointer;
  transition: all 0.18s;
}
.ob-addict-btn span:first-child { font-size: 28px; }
.ob-addict-btn:hover { border-color: #059669; background: #dcfce7; }
.ob-addict-btn.selected {
  background: var(--green-dark);
  border-color: var(--green-dark);
  color: #fff;
  box-shadow: 0 3px 12px rgba(5,150,105,0.4);
}

.ob-date-preview {
  display: none;
  background: var(--green-light);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-dark);
  text-align: center;
  margin: 8px 0;
}

.ob-summary {
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 20px;
  text-align: right;
}
.ob-sum-item {
  font-size: 15px;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-200);
}
.ob-sum-item:last-child { border: none; }

.ob-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #059669, #34d399);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  margin-bottom: 10px;
}
.ob-btn-green { background: linear-gradient(135deg, #059669, #34d399); }
.ob-back {
  width: 100%;
  padding: 10px;
  background: none;
  border: none;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  color: var(--gray-400);
  cursor: pointer;
}
.ob-returning-btn {
  width: 100%;
  padding: 10px;
  background: none;
  border: none;
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--green-dark);
  cursor: pointer;
  margin-top: 4px;
}

.ob-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.ob-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gray-200);
  transition: background 0.3s;
}
.ob-dot.active { background: var(--green); }

/* ===== BACK BUTTON ===== */
.back-home-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  background: var(--gray-100);
  border: none;
  color: var(--gray-700);
}

/* ===== BREATHING EXERCISE ===== */
.breath-section {
  background: var(--white);
  margin: 0 20px 16px;
  border-radius: var(--radius);
  padding: 24px 20px;
  text-align: center;
  box-shadow: var(--shadow);
}
.breath-section h3 { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.breath-section > p { font-size: 13px; color: var(--gray-600); margin-bottom: 20px; }

.breath-container { position: relative; width: 160px; height: 160px; margin: 0 auto 20px; }
.breath-circle {
  width: 160px; height: 160px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border: 3px solid #f87171;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 4s ease-in-out, background 1s;
  cursor: pointer;
}
.breath-container.active .breath-circle {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0);
  border-color: var(--green);
}
.breath-circle-inner { text-align: center; }
#breath-label { font-size: 16px; font-weight: 800; color: var(--gray-800); }
.breath-count { font-size: 28px; font-weight: 900; color: var(--green-dark); }

.breath-start-btn {
  padding: 12px 28px;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 50px;
  font-family: 'Heebo', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.breath-container.active ~ .breath-start-btn { background: var(--gray-600); }

.path-cards { display: flex; flex-direction: column; gap: 16px; }

.path-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 24px;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: var(--shadow);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: right;
}
.path-card:hover, .path-card:active { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.path-card.green { border-color: var(--green-light); }
.path-card.green:hover { border-color: var(--green); }
.path-card.blue { border-color: var(--blue-light); }
.path-card.blue:hover { border-color: var(--blue); }

.path-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
}
.path-icon.green { background: var(--green-light); }
.path-icon.blue { background: var(--blue-light); }

.path-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.path-card p { font-size: 14px; color: var(--gray-600); line-height: 1.5; }

/* ===== SOS FLOATING BUTTON ===== */
.sos-float {
  position: fixed;
  bottom: 88px;
  left: 20px;
  z-index: 600;
  background: var(--red);
  color: white;
  border: none;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  font-size: 13px;
  font-weight: 800;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(239,68,68,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s;
}
.sos-float:active { transform: scale(0.96); }
.sos-float.hidden { display: none; }

/* ===== ADDICT VIEW ===== */
.counter-card {
  background: linear-gradient(135deg, #059669, #10b981, #34d399);
  margin: 16px;
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
  color: white;
  box-shadow: var(--shadow-lg);
}
.counter-top-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 14px;
}
.counter-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin-bottom: 20px;
}
.counter-unit { text-align: center; min-width: 52px; }
.counter-num {
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
}
.counter-secs { font-size: 30px; opacity: 0.75; }
.counter-lbl { font-size: 10px; opacity: 0.6; letter-spacing: 0.5px; margin-top: 3px; }
.counter-sep { font-size: 32px; font-weight: 900; opacity: 0.4; padding: 0 1px; margin-bottom: 10px; }

.counter-stats { display: flex; gap: 8px; }
.stat-pill {
  flex: 1;
  background: rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: background 0.15s;
}
button.stat-pill { font-family: 'Heebo', sans-serif; }
.stat-pill:hover { background: rgba(255,255,255,0.24); }
.stat-icon { font-size: 16px; }
.stat-val { font-size: 13px; font-weight: 800; }
.stat-lbl { font-size: 9px; opacity: 0.7; text-align: center; }

.counter-milestone {
  font-size: 13px;
  font-weight: 700;
  color: var(--green-dark);
  background: var(--green-light);
  border-radius: 20px;
  padding: 4px 16px;
  margin: 4px auto 8px;
  text-align: center;
  animation: viewFadeIn 0.3s ease;
}

.reset-wrap { margin: 0 16px 16px; }
.reset-btn {
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 11px;
  font-size: 13px;
  color: var(--gray-600);
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
  width: 100%;
}
.reset-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 10px 12px;
  background: #fff1f2;
  border: 1px solid #fca5a5;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--red);
  font-weight: 600;
  animation: viewFadeIn 0.2s ease;
}
.reset-confirm span { flex: 1; }
.reset-yes {
  background: var(--red); color: white; border: none; border-radius: 8px;
  padding: 6px 14px; font-family: 'Heebo',sans-serif; font-size: 13px; font-weight: 700; cursor: pointer;
}
.reset-no {
  background: var(--gray-100); color: var(--gray-600); border: 1px solid var(--gray-200); border-radius: 8px;
  padding: 6px 14px; font-family: 'Heebo',sans-serif; font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ===== ACTION BUTTONS ===== */
.actions { padding: 0 20px; display: flex; flex-direction: column; gap: 12px; }

.action-btn {
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
  text-align: right;
  transition: all 0.15s;
  box-shadow: var(--shadow);
}
.action-btn:active { transform: scale(0.98); }
.action-btn .btn-icon {
  font-size: 24px;
  width: 44px;
  height: 44px;
  background: var(--gray-100);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.action-btn h4 { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.action-btn p { font-size: 13px; color: var(--gray-600); }

.action-btn.checkin .btn-icon { background: #dcfce7; }
.action-btn.journal .btn-icon { background: #fef9c3; }
.action-btn.guardian .btn-icon { background: #dbeafe; }
.action-btn.map .btn-icon { background: #fce7f3; }

/* ===== CHECK-IN MODAL ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  display: none;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--gray-50);
  border-radius: 24px 24px 0 0;
  padding: 24px 24px calc(80px + env(safe-area-inset-bottom));
  width: 100%;
  max-width: 480px;
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  animation: slideUp 0.3s ease;
  position: relative;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.modal h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.modal p { font-size: 14px; color: var(--gray-600); margin-bottom: 24px; line-height: 1.6; }

/* mood grid 14 options */
.mood-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.mood-btn2 {
  padding: 12px 4px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--gray-200);
  background: var(--white);
  cursor: pointer;
  font-size: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: 'Heebo', sans-serif;
  transition: all 0.15s;
}
.mood-btn2 span { font-size: 10px; color: var(--gray-600); }
.mood-btn2.selected { border-color: var(--green); background: var(--green-light); transform: scale(1.05); }

/* keep old for compatibility */
.mood-buttons { display: flex; gap: 12px; justify-content: center; margin-bottom: 20px; }
.mood-btn {
  flex: 1; padding: 16px 8px; border-radius: var(--radius-sm); border: 2px solid var(--gray-200);
  background: var(--white); cursor: pointer; font-size: 28px; display: flex; flex-direction: column;
  align-items: center; gap: 4px; font-family: 'Heebo', sans-serif;
}
.mood-btn span { font-size: 11px; color: var(--gray-600); }
.mood-btn.selected { border-color: var(--green); background: var(--green-light); }

/* ===== CHECKIN HEADER ===== */
.checkin-header { text-align: center; margin-bottom: 16px; }
.checkin-day-badge {
  display: inline-block;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
}

/* ===== MINDFUL MODAL ===== */
.mindful-overlay { align-items: flex-end; }
.mindful-inner {
  background: #0f172a;
  border-radius: 24px 24px 0 0;
  width: 100%;
  max-width: 480px;
  padding: 24px 24px 24px;
  color: white;
  text-align: center;
  min-height: 50vh;
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.mindful-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.mindful-close { background: rgba(255,255,255,0.1); border: none; color: white; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 14px; }
.mindful-mute-btn { background: rgba(255,255,255,0.1); border: none; color: white; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 16px; -webkit-tap-highlight-color: transparent; transition: background 0.15s; }
.mindful-mute-btn:active { background: rgba(255,255,255,0.25); }
.mindful-title { font-size: 18px; font-weight: 800; }
.mindful-sub { font-size: 12px; opacity: 0.5; }
.mindful-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
.mindful-circle {
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 3px solid rgba(52,211,153,0.4);
  background: radial-gradient(circle, rgba(52,211,153,0.15), rgba(52,211,153,0.05));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform 4s ease-in-out, box-shadow 4s ease-in-out;
  box-shadow: 0 0 40px rgba(52,211,153,0.15);
}
.mindful-circle-text { font-size: 18px; font-weight: 800; color: #34d399; }
.mindful-count { font-size: 36px; font-weight: 900; color: white; }
.mindful-phase-desc { font-size: 14px; opacity: 0.6; max-width: 220px; line-height: 1.5; }
.mindful-bottom { padding-top: 20px; }
.mindful-start-btn {
  padding: 14px 40px;
  background: linear-gradient(135deg, #059669, #34d399);
  color: white; border: none; border-radius: 50px;
  font-family: 'Heebo',sans-serif; font-size: 16px; font-weight: 800;
  cursor: pointer; margin-bottom: 12px;
}
.mindful-cycles { font-size: 13px; opacity: 0.5; margin-bottom: 12px; }
.mindful-done { padding: 20px 0; }
.mindful-done-icon { font-size: 40px; margin-bottom: 12px; }
.mindful-done-text { font-size: 15px; line-height: 1.7; opacity: 0.85; margin-bottom: 20px; }

/* ===== MOOD FEEDBACK ===== */
.mood-feedback {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 14px;
  animation: fadeIn 0.3s ease;
  text-align: right;
}
.mood-feedback.positive {
  background: #f0fdf4;
  border: 1.5px solid #a7f3d0;
  color: #065f46;
}
.mood-feedback.supportive {
  background: #eff6ff;
  border: 1.5px solid #93c5fd;
  color: #1e3a8a;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== AI REFLECTION ===== */
.reflection-card {
  background: var(--white);
  border-radius: var(--radius);
  margin: 0 16px 16px;
  padding: 20px;
  box-shadow: var(--shadow);
  border: 1.5px solid #dbeafe;
}
.reflection-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.reflection-icon {
  width: 44px; height: 44px;
  background: #dbeafe;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.reflection-header h3 { font-size: 17px; font-weight: 800; margin-bottom: 2px; }
.reflection-header p { font-size: 13px; color: var(--gray-600); line-height: 1.4; }

.reflection-textarea {
  width: 100%;
  min-height: 100px;
  padding: 12px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif;
  font-size: 15px;
  direction: rtl;
  resize: vertical;
  outline: none;
  line-height: 1.6;
  margin-bottom: 12px;
}
.reflection-textarea:focus { border-color: var(--blue); }

.reflection-actions { display: flex; gap: 10px; }
.refl-mic-btn {
  padding: 10px 16px;
  background: var(--gray-100);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.refl-send-btn {
  flex: 1;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1d4ed8, #3b82f6);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.reflection-response { margin-top: 4px; }

/* Writing type chips */
.writing-type-chip {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1.5px solid #e5e7eb;
  background: #f9fafb;
  font-family: 'Heebo', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.writing-type-chip.active {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: #fff;
}
.writing-type-chip:active { transform: scale(0.96); }

.mentor-day-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #d1fae5;
  background: #f0fdf4; color: #6b7280; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: 'Heebo', sans-serif; transition: .15s;
}
.mentor-day-btn.active { background: #16a34a; border-color: #16a34a; color: #fff; }

.mentor-yes-no {
  flex: 1; padding: 9px 0; border-radius: 10px; border: 1.5px solid #e5e7eb;
  background: #f9fafb; color: #6b7280; font-size: 13px; font-weight: 700;
  cursor: pointer; font-family: 'Heebo', sans-serif; transition: .15s;
}
.mentor-yes-no.active { background: #16a34a; border-color: #16a34a; color: #fff; }

#mentor-toggle-track { background: #d1fae5; }
#set-mentor-active:checked ~ #mentor-toggle-track { background: #16a34a; }
#set-mentor-active:checked ~ #mentor-toggle-track #mentor-toggle-thumb { right: auto; left: 3px; }

.close-modal, .confirm-btn {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  border: none;
}
.confirm-btn { background: var(--green); color: white; margin-bottom: 10px; }
.close-modal { background: var(--gray-100); color: var(--gray-600); }
.lang-btn {
  background: #f9fafb; border: 2px solid #e5e7eb; border-radius: 14px;
  padding: 12px 8px; font-size: 22px; font-family: 'Heebo', sans-serif;
  cursor: pointer; font-weight: 700; color: #374151; transition: all 0.18s;
  text-align: center; line-height: 1.4; display: flex; flex-direction: column;
  align-items: center; gap: 4px;
}
.lang-btn:active { transform: scale(0.95); }
.lang-btn:hover { border-color: #6ee7b7; background: #f0fdf4; }
.lang-btn.active { background: #ecfdf5; border-color: #10b981; color: #065f46; box-shadow: 0 0 0 3px #d1fae5; }

/* ===== VOICE JOURNAL ===== */
.voice-area {
  background: var(--white);
  border-radius: var(--radius);
  margin: 20px;
  padding: 24px;
  box-shadow: var(--shadow);
}
.voice-area h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.voice-area p { font-size: 14px; color: var(--gray-600); margin-bottom: 20px; }

.record-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  box-shadow: 0 4px 16px rgba(239,68,68,0.3);
  transition: all 0.2s;
}
.record-btn.recording {
  background: var(--gray-800);
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
  50% { box-shadow: 0 4px 32px rgba(0,0,0,0.5); }
}
.voice-record-row { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.record-status { text-align: center; font-size: 14px; color: var(--gray-600); }
.voice-transcript {
  margin-top: 12px; padding: 12px 14px;
  background: #f0fdf4; border: 1.5px solid #86efac;
  border-radius: var(--radius-sm);
  font-size: 15px; line-height: 1.7; color: #166534;
  min-height: 48px;
}

.entries-list { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.entry-item {
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.entry-icon-badge {
  font-size: 22px; flex-shrink: 0; padding-top: 2px;
}
.entry-text {
  font-size: 13px; color: var(--gray-700);
  margin-top: 4px; line-height: 1.6;
  white-space: pre-wrap;
}
.play-btn {
  width: 36px; height: 36px;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.entry-info { flex: 1; }
.entry-info strong { font-size: 14px; display: block; }
.entry-info span { font-size: 12px; color: var(--gray-400); }

/* ===== ACTIVE ADDICT VIEW ===== */
.active-hero {
  background: linear-gradient(135deg, #7c3aed, #a855f7, #c084fc);
  padding: 28px 24px 32px;
  color: white;
  text-align: center;
}
.active-hero-title { font-size: 26px; font-weight: 900; margin-bottom: 8px; }
.active-hero-sub { font-size: 15px; opacity: 0.88; line-height: 1.65; }

.active-section { padding: 0 16px 4px; margin-bottom: 8px; }
.active-section-title { font-size: 14px; font-weight: 800; color: var(--gray-600); text-transform: uppercase; letter-spacing: 0.5px; padding: 16px 0 6px; }
.active-section-sub { font-size: 13px; color: var(--gray-500); margin-bottom: 12px; }

/* WhatsApp Templates */
.wa-templates { display: flex; flex-direction: column; gap: 10px; }
.wa-tpl-btn {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1.5px solid #dcfce7; border-radius: 14px;
  padding: 14px 16px; text-align: right; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s; width: 100%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.wa-tpl-btn:active { transform: scale(0.98); }
.wa-tpl-icon { font-size: 26px; flex-shrink: 0; }
.wa-tpl-text { flex: 1; }
.wa-tpl-title { font-size: 14px; font-weight: 800; color: var(--gray-800); margin-bottom: 2px; }
.wa-tpl-sub { font-size: 12px; color: var(--gray-500); }

.active-chips { display: flex; flex-direction: column; gap: 8px; }
.active-chip-item { display: flex; flex-direction: column; }
.active-chip-answer { overflow: hidden; }
.active-chip-answer.open { margin-top: 4px; }
.active-chip.active { background: #ede9fe; border-color: #7c3aed; }
.active-chip {
  width: 100%;
  padding: 14px 16px;
  background: #f5f3ff;
  border: 1.5px solid #c4b5fd;
  border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #5b21b6;
  text-align: right;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.active-chip:active { background: #ede9fe; }

.active-info-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  border-inline-start: 3px solid #a855f7;
}
.active-info-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
.active-info-title { font-size: 14px; font-weight: 800; color: var(--gray-800); margin-bottom: 4px; }
.active-info-body { font-size: 13px; color: var(--gray-600); line-height: 1.6; }
.active-info-card--highlight { background: #f0fdf4; border-inline-start-color: #16a34a; }
.active-info-card--highlight .active-info-title { color: #15803d; }

.active-hotline-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
  text-decoration: none;
  border: 1.5px solid var(--gray-200);
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.active-hotline-btn:active { background: var(--gray-50); }
.active-hotline-icon { font-size: 26px; }
.active-hotline-name { font-size: 14px; font-weight: 800; color: var(--gray-800); }
.active-hotline-num { font-size: 13px; color: var(--gray-500); margin-top: 2px; }

.active-ready-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 16px 16px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border: 1.5px solid #a7f3d0;
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.active-ready-banner:active { opacity: 0.85; }
.active-ready-icon { font-size: 28px; }
.active-ready-title { font-size: 15px; font-weight: 800; color: #065f46; }
.active-ready-sub { font-size: 12px; color: var(--green-dark); margin-top: 2px; }
.active-ready-arrow { margin-inline-start: auto; font-size: 20px; color: var(--green-dark); }
.active-guide-card {
  background: #faf5ff;
  border: 1.5px solid #c4b5fd;
  border-radius: var(--radius-sm);
  padding: 16px;
  animation: viewFadeIn 0.2s ease;
}
.active-guide-title { font-size: 15px; font-weight: 800; color: #5b21b6; margin-bottom: 10px; }
.active-guide-body  { font-size: 14px; color: var(--gray-700); line-height: 1.75; }
.active-guide-body p { margin: 0 0 12px; }
.active-guide-body p:last-child { margin-bottom: 0; }
.active-guide-ai-status {
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  animation: pulse 1.5s ease-in-out infinite;
}

/* ===== FAMILY VIEW ===== */

.ai-ask-section {
  margin: 20px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.ai-ask-section h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.ai-ask-section p { font-size: 14px; color: var(--gray-600); margin-bottom: 16px; }

.ask-input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}
.ask-input {
  flex: 1;
  padding: 12px 16px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: 'Heebo', sans-serif;
  direction: rtl;
  outline: none;
}
.ask-input:focus { border-color: var(--blue); }

.mic-btn, .ask-send-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mic-btn { background: var(--gray-100); }
.mic-btn.recording { background: var(--red); color: white; }
.ask-send-btn { background: var(--blue); color: white; }

.ai-response {
  background: var(--blue-light);
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: 14px;
  line-height: 1.7;
  display: none;
}
.ai-response.visible { display: block; }
.ai-response-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.quick-questions {
  margin: 0 20px 20px;
}
.quick-questions h3 { font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.quick-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  background: var(--white);
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  text-align: right;
  cursor: pointer;
  margin-bottom: 8px;
  color: var(--gray-800);
  transition: border-color 0.15s;
}
.quick-btn:hover { border-color: var(--blue); }

.videos-section { margin: 0 20px 32px; }
.videos-section h3 { font-size: 18px; font-weight: 700; margin-bottom: 14px; }
.video-cards { display: flex; flex-direction: column; gap: 12px; }

.video-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--shadow);
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: border-color 0.15s;
}
.video-card:hover { border-color: var(--blue); }
.video-thumb {
  width: 60px;
  height: 60px;
  background: var(--blue-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}
.video-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.video-card p { font-size: 12px; color: var(--gray-600); }
.video-duration { font-size: 11px; color: var(--gray-400); margin-top: 4px; }

/* Videos gallery modal */
.vids-filter {
  background: #f3f4f6;
  border: none;
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  color: #374151;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.vids-filter.active { background: #1e1b4b; color: #fff; }

/* Video card — gallery style (replaces old .video-card inside modal) */
#videos-list .video-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1.5px solid #f3f4f6;
  padding: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
#videos-list .video-thumb {
  width: 100%;
  height: 180px;
  border-radius: 0;
  background: #1e1b4b;
  position: relative;
  overflow: hidden;
}
#videos-list .video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 50px;
  height: 50px;
  background: rgba(0,0,0,0.55);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  pointer-events: none;
}
.video-card-info { padding: 10px 14px 12px; }
.video-card-title { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 4px; }
.video-card-platform { font-size: 12px; font-weight: 600; }

/* ===== SOS VIEW ===== */
.sos-view { background: var(--red-light); }
.sos-header {
  background: var(--red);
  padding: 40px 24px 32px;
  text-align: center;
  color: white;
}
.sos-header h2 { font-size: 28px; font-weight: 900; margin-bottom: 8px; }
.sos-header p { font-size: 15px; opacity: 0.9; }

.sos-actions { padding: 24px 20px; display: flex; flex-direction: column; gap: 14px; }
.sos-action-btn {
  background: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  box-shadow: var(--shadow);
  font-family: 'Heebo', sans-serif;
  text-align: right;
}
.sos-action-btn .s-icon {
  font-size: 28px;
  width: 50px;
  height: 50px;
  background: var(--red-light);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sos-action-btn h4 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.sos-action-btn p { font-size: 13px; color: var(--gray-600); }

/* ===== SOS COMMUNITY MENTORS ===== */
.sos-community-section {
  background: linear-gradient(135deg, #064e3b, #065f46);
  border: 1.5px solid #34d399;
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sos-community-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}
.sos-pulse-dot {
  width: 10px; height: 10px;
  background: #34d399;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px #34d399;
  animation: pulse 1.5s infinite;
}
.sos-slot-badge {
  background: rgba(52,211,153,.2);
  color: #6ee7b7;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  margin-inline-start: auto;
}
.sos-mentors-loading {
  color: #6ee7b7; font-size: 13px; text-align: center; padding: 8px 0;
}
.sos-mentor-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 10px 12px;
}
.sos-mentor-av {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg,#059669,#34d399);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  border: 2px solid rgba(52,211,153,.5);
}
.sos-mentor-info { flex: 1; min-width: 0; }
.sos-mentor-name { font-size: 14px; font-weight: 800; color: #fff; }
.sos-mentor-meta { font-size: 11px; color: #6ee7b7; margin-top: 2px; }
.sos-mentor-call-btn {
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s;
}
.sos-mentor-call-btn:active { background: #059669; }
.sos-mentors-empty {
  color: #6ee7b7; font-size: 13px; text-align: center; padding: 6px 0; line-height: 1.6;
}

.sos-text-section {
  background: var(--white);
  margin: 0 20px 20px;
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.sos-text-section h3 { font-size: 16px; font-weight: 700; margin-bottom: 14px; }
.tip-item {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  align-items: flex-start;
}
.tip-num {
  width: 28px;
  height: 28px;
  background: var(--red);
  color: white;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tip-item p { font-size: 14px; line-height: 1.6; padding-top: 4px; }

/* ===== SECTION SPACER ===== */
.section-title {
  padding: 20px 20px 8px;
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-600);
}

/* ===== MILESTONE TOAST ===== */
.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--green-dark);
  color: white;
  padding: 13px 24px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  z-index: 9000;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(5,150,105,0.4);
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== FAMILY HERO UPDATED ===== */
.family-hero {
  background: linear-gradient(135deg, #1e3a8a, #2563eb, #3b82f6);
  padding: 40px 24px 36px;
  text-align: center;
  color: white;
}
.family-hero-badge {
  display: inline-block;
  background: rgba(255,255,255,0.2);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
}
.family-hero h2 { font-size: 30px; font-weight: 900; margin-bottom: 10px; }
.family-hero p { font-size: 15px; opacity: 0.9; line-height: 1.6; max-width: 340px; margin: 0 auto; }

/* ===== PRO BANNER ===== */
.pro-banner {
  margin: 16px;
  background: linear-gradient(135deg, #1e40af, #3b82f6);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: white;
  box-shadow: 0 4px 20px rgba(37,99,235,0.3);
}
.pro-banner-icon { font-size: 28px; }
.pro-banner-text { flex: 1; }
.pro-banner-text strong { display: block; font-size: 16px; font-weight: 800; }
.pro-banner-text span { font-size: 13px; opacity: 0.85; }
.pro-banner-btn {
  background: white;
  color: #1e40af;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 800;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

/* ===== AI ASK UPDATED ===== */
.ai-ask-section {
  margin: 12px 16px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.ai-ask-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.ai-icon {
  width: 44px;
  height: 44px;
  background: #dbeafe;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.ai-ask-header h3 { font-size: 17px; font-weight: 800; margin-bottom: 2px; }
.ai-ask-header p { font-size: 13px; color: var(--gray-600); }

.ask-input-row { display: flex; gap: 8px; margin-bottom: 12px; }
.ask-input {
  flex: 1;
  padding: 12px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: 'Heebo', sans-serif;
  direction: rtl;
  outline: none;
}
.ask-input:focus { border-color: var(--blue); }
.mic-btn, .ask-send-btn {
  height: 44px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mic-btn { width: 44px; background: var(--gray-100); }
.mic-btn.recording { background: var(--red); color: white; }
.ask-send-btn {
  padding: 0 16px;
  background: var(--blue);
  color: white;
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: 14px;
}

.ai-response {
  background: #eff6ff;
  border: 1.5px solid #bfdbfe;
  border-radius: var(--radius-sm);
  padding: 16px;
  font-size: 14px;
  line-height: 1.8;
  display: none;
  margin-bottom: 12px;
}
.ai-response.visible { display: block; }
.ai-response.match { background: #f0fdf4; border-color: #bbf7d0; }
.ai-response-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--blue);
  margin-bottom: 10px;
}
.ai-response.match .ai-response-header { color: var(--green-dark); }

.quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.chip {
  padding: 6px 14px;
  background: var(--gray-100);
  border: 1.5px solid var(--gray-200);
  border-radius: 20px;
  font-size: 13px;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  color: var(--gray-800);
  transition: all 0.15s;
}
.chip:hover { background: var(--blue-light); border-color: var(--blue); color: var(--blue); }

/* ===== QUESTION BANK ===== */
.qbank-section { margin: 16px; }
.qbank-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--gray-900);
}

.category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.category-tabs::-webkit-scrollbar { display: none; }

.cat-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--gray-200);
  background: var(--white);
  font-family: 'Heebo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
  color: var(--gray-700);
}
.cat-tab.active.cat-red { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.cat-tab.active.cat-orange { background: #ffedd5; border-color: #fdba74; color: #c2410c; }
.cat-tab.active.cat-blue { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; }
.cat-tab.active.cat-green { background: #dcfce7; border-color: #86efac; color: #15803d; }
.cat-tab.active.cat-purple { background: #f3e8ff; border-color: #c4b5fd; color: #7e22ce; }

.questions-content { display: flex; flex-direction: column; gap: 8px; }

.qa-item {
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  overflow: hidden;
  transition: border-color 0.15s;
}
.qa-item.open { border-color: var(--blue); }

.qa-question {
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  gap: 12px;
  line-height: 1.4;
}
.qa-arrow { font-size: 12px; color: var(--gray-400); flex-shrink: 0; }

.qa-answer { white-space: pre-line;
  display: none;
  padding: 0 16px 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray-800);
  border-top: 1px solid var(--gray-100);
  padding-top: 14px;
}
.qa-item.open .qa-answer { display: block; }

/* ===== FIND PROFESSIONAL ===== */
.find-pro-section {
  margin: 16px;
  background: var(--white);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow);
}
.find-pro-header { margin-bottom: 20px; }
.find-pro-header h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.find-pro-header p { font-size: 14px; color: var(--gray-600); }

.pro-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }

.pro-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200);
  text-decoration: none;
  color: var(--gray-900);
  transition: all 0.15s;
  background: var(--gray-50);
}
.pro-card:hover { border-color: var(--blue); background: var(--blue-light); }
.pro-card-primary {
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border-color: #93c5fd;
}
.pro-card-icon {
  font-size: 26px;
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pro-card strong { display: block; font-size: 15px; font-weight: 800; margin-bottom: 2px; }
.pro-card span { display: block; font-size: 14px; color: var(--blue); font-weight: 600; }
.pro-card em { display: block; font-size: 12px; color: var(--gray-600); font-style: normal; margin-top: 2px; }
.pro-card > div { flex: 1; }
.pro-card-arrow { font-size: 16px; color: var(--gray-400); }

.city-search { border-top: 1px solid var(--gray-100); padding-top: 20px; }
.city-search h4 { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.city-row { display: flex; gap: 10px; }
.city-select {
  flex: 1;
  padding: 10px 14px;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  direction: rtl;
  outline: none;
}
.city-btn {
  padding: 10px 18px;
  background: var(--blue);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.city-result {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gray-800);
}

/* ===== VIDEOS UPDATED ===== */
.videos-section { margin: 16px 16px 32px; }
.videos-section h3 { font-size: 18px; font-weight: 800; margin-bottom: 14px; }
.video-duration.coming {
  display: inline-block;
  background: var(--gray-100);
  color: var(--gray-600);
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  margin-top: 4px;
}

/* ===== FAMILY NEW DESIGN ===== */
.fam-hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 60%, #3b82f6 100%);
  padding: 32px 24px 28px; text-align: center; color: white;
}
.fam-hero-icon { font-size: 40px; margin-bottom: 8px; }
.fam-hero-title { font-size: 26px; font-weight: 900; margin-bottom: 6px; }
.fam-hero-sub { font-size: 14px; opacity: 0.85; line-height: 1.6; }

.fam-tab-bar {
  display: flex; gap: 0; background: var(--gray-100);
  padding: 4px; margin: 12px 16px; border-radius: 12px;
}
.fam-tab-btn {
  flex: 1;
  padding: 12px 4px;
  min-height: 46px;
  background: none; border: none;
  border-radius: 9px; font-family: 'Heebo',sans-serif;
  font-size: 13px; font-weight: 600; color: var(--gray-500); cursor: pointer;
  transition: all 0.2s; text-align: center;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.fam-tab-btn.active {
  background: var(--white); color: #1d4ed8; font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.fam-tab { display: none; }
.fam-tab.active { display: block; }

.fam-section {
  background: var(--white); border-radius: var(--radius);
  margin: 0 16px 14px; padding: 18px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.fam-section-title { font-size: 16px; font-weight: 800; color: var(--gray-900); margin-bottom: 4px; }
.fam-section-sub { font-size: 13px; color: var(--gray-500); margin-bottom: 14px; }

/* AI Ask */
.fam-ask-box { display: flex; gap: 8px; margin-bottom: 10px; align-items: center; }
.fam-mic-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--gray-100); font-size: 18px; cursor: pointer;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.fam-mic-btn.recording { background: #ef4444; color: white; }
.fam-ask-input {
  /* min-width:0 — בלעדיו תיבת הקלט לא מתכווצת והשורה גולשת מהמסך בשפות ארוכות כמו רוסית */
  flex: 1; min-width: 0; padding: 13px 14px; border: 2px solid var(--gray-200);
  border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif;
  font-size: 15px; direction: rtl; outline: none;
}
.fam-ask-input:focus { border-color: #3b82f6; }
.fam-ask-send {
  flex-shrink: 0; max-width: 42%; overflow: hidden; text-overflow: ellipsis;
  padding: 0 14px; background: #2563eb; color: white;
  border: none; border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif;
  font-size: 15px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
.fam-ai-response {
  background: #eff6ff; border: 1.5px solid #93c5fd;
  border-radius: var(--radius-sm); padding: 14px; margin-bottom: 12px;
}
.fam-ai-label { font-size: 12px; font-weight: 800; color: #1d4ed8; margin-bottom: 8px; }
.fam-ai-text { font-size: 14px; line-height: 1.8; color: var(--gray-800); }
.fam-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fam-chip {
  padding: 7px 14px; background: var(--gray-50); border: 1.5px solid var(--gray-200);
  border-radius: 20px; font-family: 'Heebo',sans-serif; font-size: 13px;
  font-weight: 600; cursor: pointer; color: var(--gray-700); transition: all 0.15s;
}
.fam-chip:active { background: #dbeafe; border-color: #3b82f6; color: #1d4ed8; }

/* Scripts */
.script-list { display: flex; flex-direction: column; gap: 8px; }
.script-item {
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  overflow: hidden; cursor: pointer;
}
.script-q {
  padding: 14px 16px; font-size: 15px; font-weight: 700;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--gray-50);
}
.script-q span { font-size: 11px; color: var(--gray-400); transition: transform 0.2s; }
.script-a { display: none; padding: 12px 16px; background: white; }
.script-item.open .script-q { background: #eff6ff; }
.script-item.open .script-q span { transform: rotate(180deg); }
.script-item.open .script-a { display: block; }
.script-do, .script-dont {
  font-size: 14px; line-height: 1.7; padding: 4px 0;
}
.script-do { color: #166534; }
.script-dont { color: #b91c1c; }
.script-do em, .script-dont em { font-style: normal; font-weight: 600; }

/* SOS Buttons */
.fam-sos-section .fam-section-title { margin-bottom: 14px; }
.fam-sos-btn {
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border-radius: var(--radius-sm); text-decoration: none; color: white;
  margin-bottom: 10px; transition: opacity 0.15s;
}
.fam-sos-btn:active { opacity: 0.85; }
.fsos-icon { font-size: 24px; flex-shrink: 0; }
.fsos-name { font-size: 15px; font-weight: 800; }
.fsos-num  { font-size: 13px; opacity: 0.85; }
.fsos-go   { margin-inline-start: auto; font-size: 18px; opacity: 0.7; }

/* Live calls */
.fam-live-btns { display: flex; gap: 10px; margin-bottom: 14px; }
.fam-live-btn {
  flex: 1; padding: 13px; border: none; border-radius: var(--radius-sm);
  font-family: 'Heebo',sans-serif; font-size: 14px; font-weight: 800; cursor: pointer;
}
.fam-live-btn.primary  { background: #2563eb; color: white; }
.fam-live-btn.secondary{ background: #dbeafe; color: #1d4ed8; }
.fam-groups { margin-top: 12px; border-top: 1px solid var(--gray-100); padding-top: 12px; }
.fam-groups-title { font-size: 12px; font-weight: 700; color: var(--gray-400); margin-bottom: 8px; }
.fam-group-link {
  display: flex; align-items: center; padding: 11px 14px;
  background: var(--gray-50); border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm); text-decoration: none; color: var(--gray-700);
  font-family: 'Heebo',sans-serif; font-size: 14px; font-weight: 600; margin-bottom: 8px;
}

/* Videos */
.fam-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fam-video-card {
  background: var(--gray-50); border-radius: var(--radius-sm);
  padding: 14px; border: 1px solid var(--gray-200);
  display: flex; align-items: center; gap: 10px;
}
.fvc-thumb { font-size: 28px; flex-shrink: 0; }
.fvc-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.fvc-dur { font-size: 11px; color: var(--gray-400); }

/* Rubrics in family help tab */
.fam-rubrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; }
.fam-region-btn { background: #f0fdf4; border: 1.5px solid #86efac; color: #166534; border-radius: 20px; padding: 8px 14px; font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .18s; white-space: nowrap; }
.fam-region-btn:hover, .fam-region-btn:active { background: #16a34a; color: #fff; border-color: #16a34a; }
.fam-rub {
  border-radius: var(--radius-sm); padding: 16px 12px; text-align: center;
  cursor: pointer; border: 2px solid transparent; transition: all 0.15s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.fam-rub:active { transform: scale(0.97); }
.fam-rub > div:first-child { font-size: 26px; margin-bottom: 6px; }
.fam-rub-name { font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.fam-rub-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; display: inline-block; }
.fam-rub.green  { background: #f0fdf4; border-color: #a7f3d0; }
.fam-rub.green .fam-rub-tag { background: #dcfce7; color: #166534; }
.fam-rub.blue   { background: #eff6ff; border-color: #93c5fd; }
.fam-rub.blue .fam-rub-tag { background: #dbeafe; color: #1d4ed8; }
.fam-rub.purple { background: #faf5ff; border-color: #c4b5fd; }
.fam-rub.purple .fam-rub-tag { background: #f3e8ff; color: #7e22ce; }
.fam-rub.teal   { background: #f0fdfa; border-color: #99f6e4; }
.fam-rub.teal .fam-rub-tag { background: #ccfbf1; color: #0f766e; }

/* ===== SOS FIXES ===== */
.sos-action-btn {
  display: flex; align-items: center; gap: 16px;
  background: var(--white); border: none; border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 10px;
  text-align: right; text-decoration: none; color: var(--gray-900);
  cursor: pointer; font-family: 'Heebo', sans-serif; width: 100%;
  transition: transform 0.1s;
}
.sos-action-btn:active { transform: scale(0.98); }
.sos-emergency { border: 2px solid #fca5a5; background: #fef2f2; }
.sos-guardian-btn { border: 2px solid #a7f3d0; background: #f0fdf4; }
.sos-arrow { margin-inline-start: auto; font-size: 18px; color: var(--gray-400); }

/* ===== FAMILY SOS ===== */
.family-sos { margin: 16px; background: var(--white); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.fsos-title { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.fsos-btn { display: flex; align-items: center; padding: 13px 16px; border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif; font-size: 15px; font-weight: 700; text-decoration: none; margin-bottom: 8px; color: white; }
.fsos-btn.green  { background: var(--green-dark); }
.fsos-btn.blue   { background: #2563eb; }
.fsos-btn.purple { background: #7e22ce; }
.fsos-btn.orange { background: #d97706; }

/* ===== SCRIPT CARDS ===== */
.scripts-section { margin: 0 16px 16px; }
.script-card { background: var(--white); border-radius: var(--radius-sm); border: 1.5px solid var(--gray-200); margin-bottom: 8px; overflow: hidden; cursor: pointer; }
.sc-title { padding: 14px 16px; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; }
.sc-title::after { content: '▼'; font-size: 11px; color: var(--gray-400); }
.sc-body { display: none; padding: 0 16px 14px; font-size: 13px; line-height: 1.8; color: var(--gray-700); border-top: 1px solid var(--gray-100); }
.sc-body p { margin-bottom: 6px; }
.script-card.open .sc-body { display: block; }
.script-card.open .sc-title::after { content: '▲'; }

/* ===== הכרת תודה ===== */
.gratitude-card { background: linear-gradient(135deg,#fdf4ff,#f3e8ff); border:1.5px solid #d8b4fe; border-radius:var(--radius); margin:0 16px 16px; padding:18px; }
.gratitude-header { font-size:15px; font-weight:800; color:#7e22ce; margin-bottom:14px; }
.gratitude-inputs { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.gratitude-input { padding:10px 12px; border:1.5px solid #e9d5ff; border-radius:var(--radius-sm); font-family:'Heebo',sans-serif; font-size:14px; direction:rtl; outline:none; background:white; }
.gratitude-input:focus { border-color:#a855f7; }
.gratitude-btn { width:100%; padding:12px; background:linear-gradient(135deg,#7e22ce,#a855f7); color:white; border:none; border-radius:var(--radius-sm); font-family:'Heebo',sans-serif; font-size:15px; font-weight:800; cursor:pointer; margin-bottom:12px; }
.gratitude-entry { display:flex; gap:10px; padding:8px 0; border-top:1px solid #f3e8ff; font-size:13px; }
.ge-date { color:#a855f7; font-weight:700; white-space:nowrap; }
.ge-items { color:var(--gray-700); }

/* ===== שיחות Live ===== */
.live-card { background:var(--white); border-radius:var(--radius); margin:0 16px 16px; padding:18px; box-shadow:var(--shadow); border:1.5px solid #bfdbfe; }
.live-header { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; }
.live-icon { font-size:28px; }
.live-title { font-size:16px; font-weight:800; margin-bottom:2px; }
.live-sub { font-size:13px; color:var(--gray-500); }
.live-actions { display:flex; gap:10px; margin-bottom:14px; }
.live-btn { flex:1; padding:12px; border:none; border-radius:var(--radius-sm); font-family:'Heebo',sans-serif; font-size:14px; font-weight:800; cursor:pointer; }
.live-btn.start { background:linear-gradient(135deg,#2563eb,#3b82f6); color:white; }
.live-btn.join { background:var(--blue-light); color:#1d4ed8; }
.live-room-box { background:var(--gray-50); border-radius:var(--radius-sm); padding:14px; border:1px solid var(--gray-200); }
.live-room-label { font-size:12px; font-weight:700; color:var(--gray-500); margin-bottom:6px; }
.live-room-link { font-size:13px; color:#2563eb; word-break:break-all; margin-bottom:10px; }
.live-copy-btn,.live-open-btn { display:inline-block; padding:8px 14px; border-radius:var(--radius-sm); font-family:'Heebo',sans-serif; font-size:13px; font-weight:700; cursor:pointer; margin-inline-start:8px; border:none; text-decoration:none; }
.live-copy-btn { background:var(--gray-100); color:var(--gray-700); }
.live-open-btn { background:#2563eb; color:white; }
.live-group-links { margin-top:12px; border-top:1px solid var(--gray-100); padding-top:12px; }
.live-group-title { font-size:12px; font-weight:700; color:var(--gray-400); margin-bottom:8px; }
.live-group-btn { display:block; padding:10px 14px; background:var(--gray-50); border:1px solid var(--gray-200); border-radius:var(--radius-sm); font-family:'Heebo',sans-serif; font-size:13px; font-weight:600; color:var(--gray-700); text-decoration:none; margin-bottom:6px; }

/* ===== חגיגת אבן דרך ===== */
.milestone-cel { position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,0.85); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.cel-content { background:white; border-radius:24px; padding:32px 24px; text-align:center; max-width:320px; width:90%; position:relative; overflow:hidden; }
.cel-emoji { font-size:64px; margin-bottom:12px; animation:bounceIn 0.6s; }
@keyframes bounceIn { 0%{transform:scale(0)} 60%{transform:scale(1.2)} 100%{transform:scale(1)} }
.cel-title { font-size:26px; font-weight:900; margin-bottom:8px; color:var(--gray-900); }
.cel-desc { font-size:15px; color:var(--gray-600); line-height:1.6; margin-bottom:20px; }
.cel-share-btn { width:100%; padding:13px; background:linear-gradient(135deg,#059669,#34d399); color:white; border:none; border-radius:var(--radius-sm); font-family:'Heebo',sans-serif; font-size:15px; font-weight:800; cursor:pointer; margin-bottom:8px; }
.cel-close { width:100%; padding:10px; background:none; border:none; font-family:'Heebo',sans-serif; font-size:14px; color:var(--gray-400); cursor:pointer; }
.cel-confetti { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.confetti-piece { position:absolute; top:-20px; width:10px; height:10px; border-radius:50%; animation:fall 2s ease-in infinite; }
@keyframes fall { 0%{top:-20px;transform:rotate(0)} 100%{top:110%;transform:rotate(720deg)} }

/* ===== דפוס שלי ===== */
.pattern-insight { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--gray-100); font-size:14px; line-height:1.6; color:var(--gray-800); }
.pi-icon { font-size:20px; flex-shrink:0; }
.pattern-empty { font-size:13px; color:var(--gray-400); text-align:center; padding:12px 0; }

/* ===== שיעור היום ===== */
.lesson-card { background: linear-gradient(135deg,#f0fdf4,#dcfce7); border: 1.5px solid #a7f3d0; border-radius: var(--radius); margin: 0 16px 16px; padding: 18px 16px; }
.lesson-badge { font-size: 12px; font-weight: 800; color: var(--green-dark); letter-spacing: 0.5px; margin-bottom: 8px; }
.lesson-title { font-size: 18px; font-weight: 900; color: var(--gray-900); margin-bottom: 10px; }
.lesson-body { font-size: 14px; line-height: 1.8; color: var(--gray-700); margin-bottom: 10px; }
.lesson-category { display: inline-block; font-size: 11px; font-weight: 700; background: white; color: var(--green-dark); padding: 3px 10px; border-radius: 20px; border: 1px solid #a7f3d0; }

/* ===== מכתב לעצמי ===== */
.letter-card { background: var(--white); border-radius: var(--radius); margin: 0 16px 16px; padding: 18px; box-shadow: var(--shadow); border: 1.5px solid #e9d5ff; }
.letter-header { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.letter-icon { font-size: 28px; }
.letter-title { font-size: 16px; font-weight: 800; margin-bottom: 2px; }
.letter-sub { font-size: 13px; color: var(--gray-500); }
.letter-textarea { width: 100%; min-height: 90px; padding: 12px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif; font-size: 14px; direction: rtl; resize: none; outline: none; margin-bottom: 12px; }
.letter-textarea:focus { border-color: #a855f7; }
.letter-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; font-size: 13px; color: var(--gray-600); }
.letter-when-btn { padding: 5px 12px; border-radius: 20px; border: 1.5px solid var(--gray-200); background: var(--gray-50); font-family: 'Heebo',sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; }
.letter-when-btn.active { background: #f3e8ff; border-color: #a855f7; color: #7e22ce; }
.letter-send-btn { width: 100%; padding: 12px; background: linear-gradient(135deg,#7e22ce,#a855f7); color: white; border: none; border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif; font-size: 15px; font-weight: 800; cursor: pointer; margin-bottom: 12px; }
.letter-saved-item { display: flex; justify-content: space-between; font-size: 13px; padding: 8px 0; border-top: 1px solid var(--gray-100); color: var(--gray-700); }
.letter-days-left { font-size: 11px; color: var(--gray-400); }

/* ===== קול לעצמי ===== */
.voice-self-card { background: var(--white); border-radius: var(--radius); margin: 0 16px 16px; padding: 18px; box-shadow: var(--shadow); border: 1.5px solid #fde68a; }
.voice-self-status { font-size: 13px; color: var(--gray-500); margin: 10px 0; text-align: center; }
.voice-self-actions { display: flex; gap: 10px; margin-bottom: 10px; }
.vs-btn { flex: 1; padding: 12px; border: none; border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.vs-btn.record { background: linear-gradient(135deg,#f59e0b,#fbbf24); color: white; }
.vs-btn.play { background: var(--green-light); color: var(--green-dark); }
.voice-self-hint { font-size: 12px; color: var(--gray-400); text-align: center; font-style: italic; }

/* ===== סרטונים ===== */
.videos-card { background: var(--white); border-radius: var(--radius); margin: 0 16px 16px; padding: 16px; box-shadow: var(--shadow); }
.coming-soon-badge { font-size: 11px; font-weight: 700; background: #fef3c7; color: #92400e; padding: 2px 8px; border-radius: 10px; }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.video-slot { background: var(--gray-50); border-radius: var(--radius-sm); padding: 14px; border: 1px solid var(--gray-200); cursor: pointer; }
.video-thumb-placeholder { font-size: 24px; margin-bottom: 8px; width: 44px; height: 44px; background: var(--blue-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.video-slot-title { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.video-slot-dur { font-size: 11px; color: var(--gray-400); }
.premium-slot { border: 1.5px solid #fcd34d; background: #fffbeb; }
.premium-slot .video-thumb-placeholder { background: #fef3c7; }

/* ===== GRAPHS ===== */
.graphs-section { background: var(--white); border-radius: var(--radius); margin: 16px; padding: 16px; box-shadow: var(--shadow); }
.graphs-tabs { display: flex; gap: 6px; margin-bottom: 16px; background: var(--gray-100); border-radius: 10px; padding: 4px; }
.graph-tab { flex:1; padding: 8px; background: none; border: none; border-radius: 8px; font-family: 'Heebo',sans-serif; font-size: 13px; font-weight: 600; color: var(--gray-500); cursor: pointer; transition: all 0.2s; }
.graph-tab.active { background: var(--white); color: var(--green-dark); font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.graph-panel { display: none; }
.graph-panel.active { display: block; }
.graph-container { padding: 4px 0; }
.graph-title { font-size: 12px; font-weight: 700; color: var(--gray-400); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ===== BAR CHART (weekly + monthly) ===== */
.bar-chart { display: flex; gap: 5px; align-items: flex-end; height: 110px; margin-bottom: 12px; }
.bar-chart.monthly { gap: 2px; height: 90px; }
.bc-col { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; }
.bc-col.slim { flex: 1; }
.bc-score-lbl { font-size: 10px; font-weight: 700; color: var(--gray-500); height: 14px; line-height: 14px; }
.bc-track { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.bc-bar { width: 100%; border-radius: 4px 4px 0 0; min-height: 4px; transition: height 0.4s ease; }
.bc-bar.today { outline: 2px solid var(--green-dark); outline-offset: 1px; }
.bc-bar.empty { background: #e5e7eb !important; border-radius: 4px; opacity: 0.5; }
.bc-day { font-size: 10px; font-weight: 600; color: var(--gray-500); margin-top: 3px; height: 14px; white-space: nowrap; }
.bc-day.today { color: var(--green-dark); font-weight: 800; }

/* Graph stats row */
.graph-stats-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 6px; }
.gsr-item { font-size: 12px; color: var(--gray-600); background: var(--gray-50); border-radius: 8px; padding: 4px 8px; }
.gsr-item b { color: var(--gray-800); }
.gsr-avg { background: #f0fdf4; color: #065f46; }
.gsr-avg b { color: var(--green-dark); }

/* Consistency bar */
.graph-consistency { margin-top: 8px; }
.consistency-bar-wrap { height: 6px; background: #e5e7eb; border-radius: 99px; overflow: hidden; margin-bottom: 4px; }
.consistency-bar { height: 100%; background: linear-gradient(90deg, var(--green), #10b981); border-radius: 99px; transition: width 0.5s ease; }
.consistency-label { font-size: 11px; color: var(--gray-500); }

/* Legacy dots (yearly still uses them) */
.weekly-dots { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 10px; }
.wd-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.wd-dot { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: rgba(0,0,0,0.3); font-weight: 700; border: 2px solid rgba(0,0,0,0.06); }
.wd-label { font-size: 11px; font-weight: 600; color: var(--gray-500); }
.wd-label.today { color: var(--green-dark); font-weight: 800; }
.monthly-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 10px; }
.mg-cell { border-radius: 6px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.mg-cell span { font-size: 9px; color: rgba(0,0,0,0.35); font-weight: 700; }

/* Yearly */
.yearly-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.yearly-grid { display: flex; gap: 3px; min-width: max-content; }
.yg-col { display: flex; flex-direction: column; gap: 3px; }
.yg-cell { width: 11px; height: 11px; border-radius: 2px; }

/* Legend */
.graph-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--gray-500); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Export */
.export-btn { width: 100%; margin-top: 14px; padding: 10px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif; font-size: 13px; font-weight: 600; color: var(--gray-600); cursor: pointer; }
.export-btn:hover { background: var(--gray-200); }

/* ===== BADGES ===== */
.badges-section { padding: 0 16px 8px; }
.badges-count-label { font-size: 13px; color: var(--gray-400); font-weight: 600; }
.badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-bottom: 8px;
}
.badge-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 12px 6px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--gray-200); background: var(--white);
  text-align: center; position: relative; transition: all 0.2s;
}
.badge-item.earned { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border-color: var(--green); }
.badge-item.locked { opacity: 0.5; }
.badge-icon { font-size: 26px; line-height: 1; }
.badge-title { font-size: 10px; font-weight: 700; color: var(--gray-700); line-height: 1.3; }
.badge-need { font-size: 9px; color: var(--gray-400); }
.badge-check { position: absolute; top: 4px; left: 6px; font-size: 10px; color: var(--green-dark); font-weight: 900; }

/* ===== TRIGGER TRACKER ===== */
.trigger-section { background: var(--white); border-radius: var(--radius); margin: 0 16px 16px; padding: 16px 16px 20px; box-shadow: var(--shadow); }
.trigger-desc { font-size: 13px; color: var(--gray-600); margin-bottom: 12px; line-height: 1.5; }
.trigger-history-btn { font-size: 12px; font-weight: 700; font-family: 'Heebo',sans-serif; padding: 4px 12px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 20px; cursor: pointer; color: var(--gray-700); }
.trigger-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.trigger-chip { padding: 7px 12px; background: #fff7ed; border: 1.5px solid #fdba74; border-radius: 20px; font-family: 'Heebo',sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; color: #c2410c; transition: all 0.15s; }
.trigger-chip:active { background: #fed7aa; }
.trigger-custom-row { display: flex; gap: 8px; }
.trigger-input { flex: 1; padding: 10px 12px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif; font-size: 14px; direction: rtl; outline: none; }
.trigger-input:focus { border-color: var(--orange); }
.trigger-add-btn { padding: 10px 16px; background: var(--orange); color: white; border: none; border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; }
.trigger-history { margin-top: 14px; border-top: 1px solid var(--gray-100); padding-top: 12px; }
.trigger-pattern { font-size: 13px; color: var(--gray-700); margin-bottom: 10px; line-height: 1.6; }
.trigger-log-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.trigger-log-label { font-size: 14px; font-weight: 600; }
.trigger-log-time { font-size: 11px; color: var(--gray-400); }

/* ===== WHATSAPP GUARDIAN ===== */
.wa-section { background: var(--white); border-radius: var(--radius); margin: 0 16px 16px; padding: 16px; box-shadow: var(--shadow); }
.wa-setup-btn { font-size: 12px; font-weight: 700; font-family: 'Heebo',sans-serif; padding: 4px 12px; background: #dcfce7; border: 1px solid var(--green); border-radius: 20px; cursor: pointer; color: var(--green-dark); }
.wa-empty { font-size: 13px; color: var(--gray-400); text-align: center; padding: 12px 0; }
.wa-guardian-card { background: #f0fdf4; border: 1.5px solid var(--green); border-radius: var(--radius-sm); padding: 14px; }
.wa-guardian-name { font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.wa-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.wa-btn { flex: 1; min-width: 80px; padding: 10px 8px; border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; display: block; }
.wa-btn.ok { background: #dcfce7; color: var(--green-dark); border: 1.5px solid var(--green); }
.wa-btn.sos { background: #fee2e2; color: #b91c1c; border: 1.5px solid #fca5a5; }
.wa-btn.share { background: #dbeafe; color: #1d4ed8; border: 1.5px solid #93c5fd; }

/* ===== SHARE ===== */
.share-section { background: var(--white); border-radius: var(--radius); margin: 0 16px 16px; padding: 16px; box-shadow: var(--shadow); }
.share-preview { background: var(--gray-50); border-radius: var(--radius-sm); padding: 14px; font-size: 15px; line-height: 1.8; white-space: pre-line; margin-bottom: 14px; border: 1px solid var(--gray-200); color: var(--gray-800); }
.share-buttons { display: flex; gap: 10px; }
.share-btn { flex: 1; padding: 12px; border: none; border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; }
.share-btn.wa { background: #dcfce7; color: var(--green-dark); }
.share-btn.copy { background: var(--gray-100); color: var(--gray-700); }

/* ===== NOTIFICATIONS ===== */
.notif-section { background: var(--white); border-radius: var(--radius); margin: 0 16px 16px; padding: 16px; box-shadow: var(--shadow); }
.notif-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.notif-label { font-size: 14px; font-weight: 600; flex: 1; min-width: 120px; }
.notif-time-input { padding: 8px 10px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif; font-size: 14px; outline: none; }
.notif-enable-btn { padding: 8px 16px; background: var(--blue); color: white; border: none; border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; }
.notif-status { font-size: 13px; color: var(--gray-600); margin-top: 8px; }

/* ===== STEPS WORKSHOP ===== */
.steps-workshop-card {
  background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
  border: 1.5px solid #a7f3d0;
  border-radius: var(--radius);
  margin: 0 16px 16px;
  padding: 20px 16px;
  box-shadow: var(--shadow);
}
.swk-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.swk-icon { font-size: 32px; }
.swk-title { font-size: 16px; font-weight: 900; color: #065f46; }
.swk-sub { font-size: 13px; color: #047857; margin-top: 2px; }
.swk-step-select-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.swk-label { font-size: 14px; font-weight: 700; color: var(--gray-700); }
.swk-select {
  width: 100%; padding: 10px 12px; border: 1.5px solid #6ee7b7;
  border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif;
  font-size: 14px; background: white; color: var(--gray-800); outline: none;
}
.swk-content { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.swk-awareness-block, .swk-exercise-block, .swk-q-block {
  background: white; border-radius: var(--radius-sm);
  padding: 14px; border-inline-start: 3px solid #34d399;
}
.swk-awareness-label, .swk-exercise-label, .swk-q-label {
  font-size: 12px; font-weight: 800; color: #059669;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.swk-awareness-text, .swk-exercise-text, .swk-q-text {
  font-size: 14px; color: var(--gray-700); line-height: 1.7;
}
.swk-answer-row { display: flex; gap: 8px; margin-top: 10px; align-items: flex-start; }
.swk-mic-btn {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  border: none; background: #d1fae5; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.swk-mic-btn.recording { background: #fecaca; animation: micPulse 1s infinite; }
.swk-answer-area {
  flex: 1; min-height: 80px; padding: 10px 12px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-family: 'Heebo',sans-serif; font-size: 14px; resize: vertical;
  outline: none; line-height: 1.6;
}
.swk-answer-area:focus { border-color: #34d399; }
.swk-save-btn {
  width: 100%; margin-top: 10px; padding: 12px;
  background: var(--green); color: white; border: none;
  border-radius: var(--radius-sm); font-family: 'Heebo',sans-serif;
  font-size: 15px; font-weight: 800; cursor: pointer;
}
.swk-saved-answers { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.swk-saved-entry {
  background: #f0fdf4; border-radius: var(--radius-sm); padding: 12px;
  border: 1px solid #a7f3d0;
}
.swk-saved-date { font-size: 11px; color: var(--gray-500); margin-bottom: 4px; }
.swk-saved-text { font-size: 14px; color: var(--gray-700); line-height: 1.6; }
.swk-daily-book-link {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #fffbeb, #fef9c3);
  border: 1.5px solid #fde68a; border-radius: var(--radius-sm);
  padding: 14px; text-decoration: none; cursor: pointer;
}
.swk-daily-book-link:active { opacity: 0.85; }
.swk-db-icon { font-size: 26px; flex-shrink: 0; }
.swk-db-text { flex: 1; }
.swk-db-title { font-size: 14px; font-weight: 800; color: #92400e; }
.swk-db-sub { font-size: 12px; color: #b45309; margin-top: 2px; }
.swk-db-arr { font-size: 18px; color: #d97706; }

/* ===== PATH CARD TEAL ===== */
.path-card.teal { border-color: var(--teal-light); }
.path-card.teal:hover { border-color: var(--teal); }
.path-icon.teal { background: var(--teal-light); }

/* ===== SECTION TITLE ROW ===== */
.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 8px;
}
.section-title-text { font-size: 16px; font-weight: 800; color: var(--gray-800); }
.add-addiction-btn {
  font-size: 13px; font-weight: 700; font-family: 'Heebo', sans-serif;
  padding: 5px 12px; background: var(--teal-light); color: var(--teal);
  border: 1.5px solid var(--teal); border-radius: 20px; cursor: pointer;
}

/* ===== DAILY MISSIONS ===== */
.daily-missions-container { padding: 0 16px 8px; }
.missions-progress { margin-bottom: 12px; }
.missions-pts { font-size: 13px; font-weight: 700; color: var(--gray-600); margin-bottom: 6px; }
.missions-bar { height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; }
.missions-fill { height: 100%; background: linear-gradient(90deg, #059669, #34d399); border-radius: 3px; transition: width 0.5s; }

.mission-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--white);
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  margin-bottom: 8px; cursor: pointer; transition: all 0.15s;
  position: relative;
}
.mission-item:hover { border-color: var(--green); background: #f0fdf4; }
.mission-item.done { background: var(--green-light); border-color: var(--green); opacity: 0.7; }
.mission-icon { font-size: 20px; flex-shrink: 0; }
.mission-text { flex: 1; font-size: 14px; font-weight: 600; }
.mission-pts { font-size: 12px; font-weight: 700; color: var(--green-dark); }
.mission-check { position: absolute; left: 12px; font-size: 16px; color: var(--green-dark); font-weight: 900; }

/* ===== MULTI ADDICTION ===== */
.multi-addictions { padding: 0 16px 8px; display: flex; flex-direction: column; gap: 8px; }
.addiction-pill {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--white);
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-size: 20px;
}
.ap-label { font-size: 14px; font-weight: 700; }
.ap-days { font-size: 12px; color: var(--green-dark); font-weight: 600; }
.ap-remove { margin-inline-start: auto; background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 16px; }

.add-addiction-panel { display: none; padding: 0 16px 12px; }
.add-addiction-panel.open { display: block; }
.addiction-types-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.type-add-btn {
  padding: 10px 6px; background: var(--gray-50);
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.type-add-btn:hover { background: var(--teal-light); border-color: var(--teal); color: var(--teal); }

/* ===== INDEX RUBRICS ===== */
.index-rubrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px 4px; }
.rubric-card {
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  cursor: pointer;
  text-align: center;
  border: 2px solid transparent;
  transition: all 0.15s;
  box-shadow: var(--shadow);
}
.rubric-card:active { transform: scale(0.97); }
.rubric-card.private  { background: #f0fdf4; border-color: #a7f3d0; }
.rubric-card.public   { background: #eff6ff; border-color: #93c5fd; }
.rubric-card.therapist{ background: #f0f9ff; border-color: #7dd3fc; }
.rubric-card.group    { background: #faf5ff; border-color: #c4b5fd; }
.rubric-icon  { font-size: 26px; margin-bottom: 6px; }
.rubric-label { font-size: 13px; font-weight: 800; color: var(--gray-800); margin-bottom: 4px; }
.rubric-entry { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.rubric-entry.green  { background: #dcfce7; color: #166534; }
.rubric-entry.orange { background: #ffedd5; color: #c2410c; }
.rubric-entry.blue   { background: #dbeafe; color: #1d4ed8; }

/* wait/cost badges */
.idx-wait { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.wait-green  { background: #dcfce7; color: #166534; }
.wait-orange { background: #ffedd5; color: #c2410c; }
.wait-red    { background: #fee2e2; color: #b91c1c; }
.idx-cost { font-size: 11px; color: var(--gray-600); padding: 2px 8px; background: var(--gray-100); border-radius: 10px; }

/* ===== INDEX VIEW ===== */
.index-hero {
  background: linear-gradient(135deg, #0f4c75, #1b6ca8, #0d9488);
  padding: 32px 24px 28px; text-align: center; color: white;
}
.index-hero h2 { font-size: 26px; font-weight: 900; margin-bottom: 8px; }
.index-hero p { font-size: 14px; opacity: 0.85; }

.index-search-row { padding: 14px 16px 4px; }
.index-search {
  width: 100%; padding: 12px 16px;
  border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif; font-size: 15px; direction: rtl; outline: none;
}
.index-search:focus { border-color: var(--teal); }

.index-tabs {
  display: flex; gap: 6px; padding: 10px 16px 4px;
  overflow-x: auto; scrollbar-width: none;
}
.index-tabs::-webkit-scrollbar { display: none; }
.idx-tab {
  padding: 7px 14px; border-radius: 20px; border: 1.5px solid var(--gray-200);
  background: var(--white); font-family: 'Heebo', sans-serif;
  font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: all 0.15s;
}
.idx-tab.active { background: var(--teal); border-color: var(--teal); color: white; }

.region-filter {
  display: flex; gap: 6px; padding: 8px 16px 6px; overflow-x: auto; scrollbar-width: none;
}
.region-filter::-webkit-scrollbar { display: none; }
.region-btn {
  padding: 5px 12px; border-radius: 20px; border: 1px solid var(--gray-200);
  background: var(--white); font-family: 'Heebo', sans-serif;
  font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; color: var(--gray-600);
}
.region-btn.active { background: var(--gray-800); border-color: var(--gray-800); color: white; }

.index-results { padding: 4px 16px; }

.idx-card {
  border-radius: var(--radius); border: 1.5px solid;
  padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow);
}
.idx-card-top { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.idx-card-info { flex: 1; }
.idx-type-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  border: 1px solid; border-radius: 10px; padding: 2px 8px; margin-bottom: 6px;
}
.idx-card h4 { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.idx-city { font-size: 12px; color: var(--gray-600); }
.idx-call-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--white); border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-sm); padding: 10px 12px; text-decoration: none;
  color: var(--gray-800); font-size: 12px; font-weight: 700;
  flex-shrink: 0; transition: all 0.15s; text-align: center; min-width: 80px;
}
.idx-call-btn:hover { background: #f0fdf4; border-color: var(--green); color: var(--green-dark); }
.idx-website-link {
  display: inline-block; font-size: 12px; color: #0369a1;
  margin-bottom: 8px; text-decoration: none; direction: ltr;
}
.idx-website-link:hover { text-decoration: underline; }
.idx-desc { font-size: 13px; color: var(--gray-700); line-height: 1.6; margin-bottom: 10px; }
.idx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.idx-tag {
  font-size: 11px; padding: 2px 8px; background: rgba(255,255,255,0.6);
  border-radius: 10px; border: 1px solid rgba(0,0,0,0.1); color: var(--gray-700);
}

/* ===== RESPONSIVE ===== */
@media (min-width: 480px) {
  .path-cards { flex-direction: row; flex-wrap: wrap; }
  .home-hero h1 { font-size: 42px; }
  .pro-cards { display: grid; grid-template-columns: 1fr 1fr; }
  .index-results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .index-results > div:first-child { grid-column: 1/-1; }
}

/* ===== COMMUNITY ===== */
.comm-header {
  position: relative;
  color: white;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(135deg, #064e3b, #0284c7);
  min-height: 260px;
  flex-shrink: 0;
}
.comm-hero-img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: center 35%;
  display: block;
  position: absolute;
  top: 0; left: 0;
}
.comm-header-text {
  position: relative;
  z-index: 1;
  padding: 24px 24px 24px;
  background: linear-gradient(to top, rgba(5,20,15,0.78) 0%, rgba(5,20,15,0.35) 60%, transparent 100%);
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.comm-title { font-size: 24px; font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,.5); letter-spacing: -0.3px; }
.comm-sub { font-size: 14px; opacity: 0.92; margin-top: 6px; text-shadow: 0 1px 4px rgba(0,0,0,.4); font-weight: 500; }

.comm-tabs {
  display: flex;
  margin: 0;
  border-bottom: 2px solid var(--gray-200);
  background: var(--white);
}
.comm-tab {
  flex: 1;
  padding: 14px;
  background: none;
  border: none;
  font-family: 'Heebo',sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-500);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}
.comm-tab.active { color: var(--green-dark); border-bottom-color: var(--green-dark); }

.comm-panel { padding: 16px; }
.feed-wins-tab.active {
  background: linear-gradient(135deg, #fef08a, #fcd34d) !important;
  color: #451a03 !important;
}
.feed-story-ring.family {
  background: linear-gradient(135deg, #7c3aed, #c084fc);
  box-shadow: 0 2px 8px rgba(124,58,237,.3);
}

/* Feed background — nature image */
#comm-feed {
  background-image: url('https://images.unsplash.com/photo-1448375240586-882707db888b?w=800&q=70');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.feed-tag-filter.active {
  background: linear-gradient(135deg, #059669, #0ea5e9);
  color: #fff; border-color: transparent;
  box-shadow: 0 3px 10px rgba(5,150,105,.3);
}
.tag-win      { background: #fef9c3; color: #78350f; }
.tag-tip      { background: #dbeafe; color: #1e3a8a; }
.tag-question { background: #f3e8ff; color: #6b21a8; }
.tag-struggle { background: #fee2e2; color: #991b1b; }
.tag-gratitude{ background: #dcfce7; color: #14532d; }
.tag-family   { background: #ede9fe; color: #4c1d95; }
.feed-post-tag.active {
  background: linear-gradient(135deg, #059669, #0ea5e9);
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 8px rgba(5,150,105,.3);
}

.mentors-list { display: flex; flex-direction: column; gap: 12px; }
.mentors-loading, .mentors-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--gray-500);
  font-size: 15px;
  line-height: 1.7;
}

.mentor-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.mentor-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.mentor-avatar {
  width: 44px; height: 44px;
  background: var(--green-light);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.mentor-name { font-size: 16px; font-weight: 700; color: var(--gray-800); }
.mentor-meta { font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.mentor-langs { font-size: 12px; color: var(--green-dark); margin-top: 3px; }
.mentor-about {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 12px;
  background: var(--gray-50);
  padding: 10px 12px;
  border-radius: 10px;
}
.mentor-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.mentor-connect-btn {
  background: var(--green-dark);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-family: 'Heebo',sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.mentor-connect-btn:active { opacity: 0.8; }
.mentor-report-btn {
  background: none;
  border: 1px solid var(--gray-300);
  border-radius: 20px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--gray-500);
}

.comm-form-wrap {
  background: var(--white);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--gray-200);
}
.comm-form-title { font-size: 18px; font-weight: 800; color: var(--gray-800); margin-bottom: 4px; }
.comm-form-sub { font-size: 13px; color: var(--gray-500); margin-bottom: 20px; }
.comm-disclaimer-text {
  font-size: 12px;
  color: var(--gray-500);
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 16px 0;
  line-height: 1.5;
}
.comm-submit-btn {
  width: 100%;
  background: var(--green-dark);
  color: white;
  border: none;
  border-radius: 14px;
  padding: 14px;
  font-family: 'Heebo',sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.2s;
}
.comm-submit-btn:disabled { opacity: 0.6; }

/* Disclaimer modal */
.modal-box {
  background: var(--white);
  border-radius: 20px;
  padding: 28px 24px;
  width: calc(100% - 48px);
  max-width: 360px;
  text-align: center;
  animation: scaleIn 0.2s ease;
}
@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-icon { font-size: 36px; margin-bottom: 8px; }
.modal-title { font-size: 20px; font-weight: 800; color: var(--gray-800); margin-bottom: 12px; }
.modal-body { font-size: 15px; color: var(--gray-600); line-height: 1.7; margin-bottom: 24px; }
.modal-cta {
  width: 100%;
  background: var(--green-dark);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-family: 'Heebo',sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 10px;
}
.modal-cancel {
  width: 100%;
  background: none;
  border: none;
  color: var(--gray-500);
  font-family: 'Heebo',sans-serif;
  font-size: 14px;
  cursor: pointer;
  padding: 8px;
}
#disclaimer-modal { align-items: center; justify-content: center; }

/* ===== PWA INSTALL BANNER ===== */
.install-banner {
  display: none;
  position: fixed;
  bottom: 76px;
  left: 12px;
  right: 12px;
  background: var(--green-dark);
  color: white;
  padding: 12px 14px;
  border-radius: 14px;
  align-items: center;
  gap: 10px;
  z-index: 950;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  animation: slideUp 0.3s ease;
}
.install-banner.show { display: flex; }
.install-banner-text { flex: 1; font-weight: 600; font-size: 14px; }
.install-banner-btn {
  background: white;
  color: var(--green-dark);
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
  white-space: nowrap;
}
.install-banner-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 18px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}

/* ===== VIDEO SLOTS HOVER ===== */
.video-slot { transition: background 0.15s, transform 0.15s; }
.video-slot:hover { background: var(--gray-100); transform: translateY(-2px); }
.fam-video-card { cursor: pointer; transition: background 0.15s, transform 0.15s; }
.fam-video-card:hover { background: var(--gray-100); transform: translateY(-2px); }

/* ===== COMMUNITY HERO GRADIENT ===== */
.comm-hero-gradient {
  background: linear-gradient(135deg, #16a34a 0%, #059669 45%, #0d9488 100%);
}

/* ===== COMMUNITY HERO — polished gradient art ===== */
.comm-hero-gradient {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 55%, #1e3a5f 100%);
  overflow: hidden;
}
.comm-hero-gradient::before {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(52,211,153,0.18) 0%, transparent 70%);
  border-radius: 50%;
  top: -90px;
  left: -70px;
  pointer-events: none;
}
.comm-hero-gradient::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(56,189,248,0.14) 0%, transparent 70%);
  border-radius: 50%;
  bottom: -70px;
  right: -30px;
  pointer-events: none;
}

/* ===== MIC INLINE BUTTONS ===== */
.mic-wrap {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}
.mic-wrap textarea,
.mic-wrap input {
  flex: 1;
  min-width: 0;
}
.mic-inline-btn {
  background: var(--green-light);
  border: 1.5px solid var(--green-dark);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s;
  align-self: flex-start;
  margin-top: 2px;
  flex-shrink: 0;
}
.mic-inline-btn:active { transform: scale(0.88); }
.mic-inline-btn.recording {
  background: #fee2e2;
  border-color: #ef4444;
  animation: micPulse 0.7s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* ===== ONBOARDING WHO-ARE-YOU ===== */
.ob-who-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 24px;
}
.ob-who-btn {
  background: #fff;
  border: 2px solid var(--gray-200);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  font-family: 'Heebo', sans-serif;
  text-align: right;
  width: 100%;
  transition: all 0.15s ease;
}
.ob-who-btn:active { transform: scale(0.97); }
.ob-who-btn.recovering { border-color: var(--green); background: #f0fdf4; }
.ob-who-btn.family { border-color: #3b82f6; background: #eff6ff; }
.ob-who-btn.active-user { border-color: var(--red); background: #fef2f2; }
.ob-who-icon { font-size: 30px; flex-shrink: 0; }
.ob-who-text { display: flex; flex-direction: column; text-align: right; }
.ob-who-label { font-size: 16px; font-weight: 800; color: var(--gray-800); margin-bottom: 2px; }
.ob-who-sub { font-size: 13px; color: var(--gray-500); line-height: 1.4; }
.course-card-btn.nlp { background: linear-gradient(135deg, #f0f9ff, #e0e7ff); border-color: #6366f1; }
.ccb-icon { font-size: 28px; flex-shrink: 0; }
.ccb-info { flex: 1; }
.ccb-title { font-size: 15px; font-weight: 800; color: var(--gray-800); margin-bottom: 2px; }
.ccb-sub { font-size: 12px; color: var(--gray-500); }
.ccb-arr { font-size: 20px; color: var(--green); }
.course-card-btn.nlp .ccb-arr { color: #6366f1; }
.course-overlay.active { transform: translateY(0); }
.clr-check { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 20px; }
.clr-num {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: #64748b;
}
.clr-lock {
  width: 32px; height: 32px;
  background: #f1f5f9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #94a3b8;
}
.clr-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.clr-emoji { font-size: 16px; }
.clr-title { font-size: 14px; font-weight: 700; color: var(--gray-800); }
.clr-sub { font-size: 11px; color: #94a3b8; font-weight: 500; }
.clr-arr { color: #cbd5e1; font-size: 16px; }
@keyframes pulseCert {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { transform: scale(1.02); box-shadow: 0 0 0 10px rgba(34,197,94,0); }
}
.csd-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f8fafc; border: 1.5px solid #e2e8f0;
  border-radius: 10px; padding: 7px 14px;
  color: #475569; font-family: 'Heebo', sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer; margin-bottom: 20px;
}
.csd-top {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border-radius: 20px;
  padding: 24px 20px;
  text-align: center;
  margin-bottom: 20px;
  border: 1px solid #bbf7d0;
}
.csd-emoji { font-size: 44px; margin-bottom: 8px; }
.csd-counter {
  display: inline-block;
  font-size: 11px; color: #10b981; font-weight: 700;
  background: #d1fae5; border-radius: 20px;
  padding: 3px 10px; margin-bottom: 10px;
  letter-spacing: 0.3px;
}
.csd-title { font-size: 20px; font-weight: 900; color: #1e293b; margin: 0; line-height: 1.3; }
.csd-step {
  background: white;
  border: 1.5px solid #e2e8f0;
  border-inline-start: 4px solid #10b981;
  padding: 14px 16px;
  border-radius: 12px;
  font-style: italic;
  font-size: 14px;
  color: #475569;
  margin: 0 0 16px;
  line-height: 1.75;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.csd-body { font-size: 15px; line-height: 1.85; color: #334155; margin-bottom: 20px; }
.csd-reflection {
  background: #fffbeb;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 24px;
  border: 1px solid #fde68a;
}
.csd-ref-label { font-size: 12px; font-weight: 800; color: #92400e; margin-bottom: 8px; letter-spacing: 0.3px; }
.csd-ref-text { font-size: 14px; color: #78350f; line-height: 1.75; }
.csd-complete-btn {
  display: block; width: 100%;
  background: linear-gradient(135deg, #059669, #10b981); color: white;
  border: none; border-radius: 16px;
  padding: 17px; font-size: 16px; font-weight: 800;
  font-family: 'Heebo', sans-serif; cursor: pointer; margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(16,185,129,0.3);
}
.csd-done-badge {
  text-align: center; background: #dcfce7; color: #059669;
  border-radius: 14px; padding: 14px; font-size: 15px; font-weight: 800; margin-bottom: 12px;
  border: 1px solid #86efac;
}
.csd-next-btn {
  display: block; width: 100%;
  background: white; color: #475569;
  border: 1.5px solid #e2e8f0; border-radius: 14px;
  padding: 14px; font-size: 15px; font-weight: 700;
  font-family: 'Heebo', sans-serif; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.ccert-header { margin-bottom: 16px; }
.ccert-logo { font-size: 22px; font-weight: 900; color: var(--green); }
.ccert-sub { font-size: 11px; color: var(--gray-400); margin-top: 2px; }
.ccert-divider { height: 2px; background: linear-gradient(90deg, transparent, #fbbf24, transparent); margin: 16px 0; }
.ccert-award { font-size: 20px; font-weight: 900; color: #92400e; margin-bottom: 10px; }
.ccert-to { font-size: 12px; color: var(--gray-500); margin-bottom: 4px; }
.ccert-name { font-size: 26px; font-weight: 900; color: var(--green); margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px dashed var(--gray-300); }
.ccert-text { font-size: 14px; color: var(--gray-600); line-height: 1.8; margin-bottom: 16px; }
.ccert-seal { font-size: 52px; margin-bottom: 8px; }
.ccert-date { font-size: 12px; color: var(--gray-400); margin-bottom: 16px; }
.ccert-sign { font-size: 12px; color: var(--gray-400); font-style: italic; }
.ccert-share-btn {
  display: block; width: 100%;
  background: #fbbf24; color: white;
  border: none; border-radius: 14px;
  padding: 16px; font-size: 16px; font-weight: 800;
  font-family: 'Heebo', sans-serif; cursor: pointer;
}

/* ===== DAILY WA CARD ===== */
.daily-wa-card {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1.5px solid #86efac;
  border-radius: var(--radius);
  margin: 0 16px 16px;
  padding: 18px 16px;
  box-shadow: var(--shadow);
}
.dwa-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.dwa-icon { font-size: 30px; flex-shrink: 0; }
.dwa-title { font-size: 16px; font-weight: 800; color: #065f46; margin-bottom: 2px; }
.dwa-sub { font-size: 13px; color: #047857; line-height: 1.5; }
.dwa-toggle-wrap {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  flex-shrink: 0;
}
.dwa-toggle-wrap input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}
.dwa-toggle-track {
  position: relative;
  width: 44px; height: 24px;
  background: var(--gray-300);
  border-radius: 99px;
  transition: background 0.2s;
  display: block;
}
.dwa-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px; right: 3px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.dwa-toggle-wrap input:checked + .dwa-toggle-track { background: var(--green); }
.dwa-toggle-wrap input:checked + .dwa-toggle-track::after { transform: translateX(-20px); }
.dwa-time-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.dwa-time-label { font-size: 14px; font-weight: 600; color: var(--gray-700); }
.dwa-time-input {
  padding: 8px 12px;
  border: 1.5px solid #86efac;
  border-radius: var(--radius-sm);
  font-family: 'Heebo', sans-serif;
  font-size: 14px;
  outline: none;
  background: white;
}
.dwa-time-input:focus { border-color: var(--green); }
.dwa-setup-hint {
  font-size: 12px;
  color: #047857;
  background: #dcfce7;
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dwa-setup-link {
  font-weight: 700;
  color: var(--green-dark);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  font-family: 'Heebo', sans-serif;
  font-size: 12px;
  padding: 0;
}
@keyframes reactionPop { from { transform: translateX(-50%) scale(.6); opacity:0; } to { transform: translateX(-50%) scale(1); opacity:1; } }

/* ===== SHARE OPTIONS ===== */
.share-option-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border: none; background: none;
  border-radius: 12px; cursor: pointer; width: 100%;
  font-family: 'Heebo',sans-serif; font-size: 16px; font-weight: 600;
  color: var(--gray-800); text-align: right;
  transition: background 0.12s;
}
.share-option-btn:active { background: var(--gray-100); }
.feed-tag-filter.identity-recovering.active {
  background: #059669; color: #fff; border-color: #059669;
  box-shadow: 0 3px 10px rgba(5,150,105,.3);
}
.feed-tag-filter.identity-family.active {
  background: #7c3aed; color: #fff; border-color: #7c3aed;
  box-shadow: 0 3px 10px rgba(124,58,237,.3);
}
.feed-tag-filter.identity-active.active {
  background: #2563eb; color: #fff; border-color: #2563eb;
  box-shadow: 0 3px 10px rgba(37,99,235,.3);
}

/* ===== TODAY ACTION WA BTN ===== */
.today-action-btn.wa-action {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  border: none;
}
.comments-sheet.open { display: flex; }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.today-action-btn.wa-action:active { opacity: 0.88; }

@keyframes coachPulse {
  0%,100%{opacity:1}
  50%{opacity:0.45}
}
@keyframes coachDot {
  0%,80%,100% { transform:translateY(0); opacity:0.35; }
  40% { transform:translateY(-7px); opacity:1; }
}
.coach-typing-dots { display:inline-flex; align-items:center; gap:5px; padding:2px 0; }
.coach-typing-dots span {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#1d4ed8; animation:coachDot 1.3s ease-in-out infinite;
}
.coach-typing-dots span:nth-child(2) { animation-delay:.2s; }
.coach-typing-dots span:nth-child(3) { animation-delay:.4s; }

/* ===== LTR MODE — אנגלית / רוסית =====
   העיצוב נבנה RTL-first, ו-`html { direction: rtl }` גובר על התכונה dir="ltr".
   הבלוק הזה מנטרל את כפיית ה-RTL כשהשפה לא עברית, בלי לגעת בכללים המקוריים. */
html[dir="ltr"] { direction: ltr; }
html[dir="ltr"] .personal-msg-preview,
html[dir="ltr"] .ob-input,
html[dir="ltr"] .reflection-textarea,
html[dir="ltr"] .ask-input,
html[dir="ltr"] .city-select,
html[dir="ltr"] .fam-ask-input,
html[dir="ltr"] .gratitude-input,
html[dir="ltr"] .letter-textarea,
html[dir="ltr"] .trigger-input,
html[dir="ltr"] .index-search,
html[dir="ltr"] input,
html[dir="ltr"] textarea,
html[dir="ltr"] select { direction: ltr; }
html[dir="ltr"] .pro-modal-perks,
html[dir="ltr"] .prep-manual,
html[dir="ltr"] .sr-resp-head,
html[dir="ltr"] .sr-resp-block,
html[dir="ltr"] .mission-item-new,
html[dir="ltr"] .premium-features-list,
html[dir="ltr"] .ob-field,
html[dir="ltr"] .ob-summary,
html[dir="ltr"] .path-card,
html[dir="ltr"] .action-btn,
html[dir="ltr"] .mood-feedback,
html[dir="ltr"] .wa-tpl-btn,
html[dir="ltr"] .active-chip,
html[dir="ltr"] .quick-btn,
html[dir="ltr"] .sos-action-btn,
html[dir="ltr"] .feed-composer-btn,
html[dir="ltr"] .ob-who-btn,
html[dir="ltr"] .ob-who-text,
html[dir="ltr"] .course-card-btn,
html[dir="ltr"] .share-option-btn { text-align: left; }
html[dir="ltr"] [style*="direction:rtl"],
html[dir="ltr"] [style*="direction: rtl"] { direction: ltr !important; }
html[dir="ltr"] [style*="text-align:right"],
html[dir="ltr"] [style*="text-align: right"] { text-align: left !important; }