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

:root{
  --papa-color:#2196F3; --papa-bg:#e3f2fd;
  --maman-color:#E91E63; --maman-bg:#fce4ec;
  --child-a-color:#FF9800; --child-a-bg:#fff3e0;
  --child-b-color:#7e57c2; --child-b-bg:#ede7f6;
  --florent-color:var(--child-a-color); --florent-bg:var(--child-a-bg);
  --harry-color:var(--child-b-color); --harry-bg:var(--child-b-bg);
  --app-bg: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  --app-text: #222222;
  --app-font-size: 16px;
  --app-header-text: #ffffff;
}

html{ font-size: 16px; }

body{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--app-bg);
  min-height:100vh;
  padding:20px;
  font-size: var(--app-font-size);
}

.container{ max-width:1400px; margin:0 auto; }

/* ===== HEADER ===== */
.main-header{
  color:var(--app-header-text);
  margin-bottom:20px;
  padding:26px;
  border-radius:20px;
  box-shadow:0 10px 40px rgba(0,0,0,.18);
  position:relative;
  z-index:5;
  overflow:visible;
}
.main-header::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:20px;
  background:rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  pointer-events:none;
}
.main-header h1{ font-size:3rem; margin-bottom:10px; text-shadow:2px 2px 8px rgba(0,0,0,.25); }
.main-header p{ font-size:1.2rem; opacity:.92; }
.main-header .referral-thanks{
  font-size:14px;
  opacity:1;
}

.header-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.header-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  position:relative;
}
.header-action-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background: rgba(255,255,255,.95);
  color:#333;
  border:none;
  padding:10px 14px;
  min-height:46px;
  border-radius:14px;
  cursor:pointer;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  transition: all .25s ease;
}
.header-action-btn:hover{ transform: translateY(-2px); }
.header-action-btn[aria-expanded="true"]{ background:#fff; }
.header-action-btn:focus-visible,
.admin-mode-btn:focus-visible,
.account-menu-item:focus-visible{
  outline:3px solid #ffe082;
  outline-offset:2px;
}

.btn-refresh{
  background:#17a2b8;
  color:#fff;
  border:none;
  padding:12px 20px;
  border-radius:12px;
  cursor:pointer;
  font-size:16px;
  font-weight:800;
  transition:all .25s ease;
  box-shadow:0 2px 8px rgba(23,162,184,.3);
}
.btn-refresh:hover{ background:#138496; transform:scale(1.03); }

/* ===== FILTERS ===== */
.filters{
  display:flex;
  gap:10px;
  justify-content:center;
  margin: 10px 0 18px;
  flex-wrap:wrap;
}
.filter-btn{
  padding:12px 22px;
  border:none;
  border-radius:25px;
  background: rgba(255,255,255,.95);
  color:#222;
  font-size:1em;
  font-weight:800;
  cursor:pointer;
  transition: all .25s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.filter-btn:hover{ transform: translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.16); }
.filter-btn.active{ background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; }

/* ===== ADD TASK ===== */
.add-task-section{
  background:rgba(255,255,255,.96);
  padding:26px;
  border-radius:22px;
  margin: 15px 0 25px;
  box-shadow:0 10px 40px rgba(0,0,0,.14);
}

.add-task-toggle{ cursor:pointer; user-select:none; }
.add-task-toggle:focus{ outline: 3px solid rgba(102,126,234,.35); border-radius: 14px; }

.task-form{ margin-top:18px; }
.task-form.hidden{ display:none; }
.task-form h3{ margin-bottom:18px; color:var(--app-text); }

.form-group{ margin-bottom:18px; }
.form-group label{ display:block; margin-bottom:8px; font-weight:800; color:#444; }

.form-group input,
.form-group textarea,
.form-group select{
  width:100%;
  padding:12px;
  border:2px solid #e6e6e6;
  border-radius:12px;
  font-size:1rem;
  transition:border-color .25s ease, box-shadow .25s ease;
  background:#fff;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  outline:none;
  border-color:#667eea;
  box-shadow:0 0 0 4px rgba(102,126,234,.14);
}

.hint{ display:block; margin-top:6px; color:#666; font-size:.9rem; }

.form-actions{ display:flex; gap:12px; justify-content:flex-end; }

.btn-primary,.btn-secondary{
  padding:12px 26px;
  border:none;
  border-radius:14px;
  font-size:1rem;
  font-weight:900;
  cursor:pointer;
  transition: all .25s ease;
}
.btn-primary{
  background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(102,126,234,.35); }
.btn-secondary{ background:#e9e9e9; color:#444; }
.btn-secondary:hover{ background:#dedede; }

/* ===== PERSON GRID ===== */
.persons-container{
  display:grid;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  gap:25px;
}

.person-section{
  border-radius:22px;
  padding:25px;
  box-shadow:0 12px 44px rgba(0,0,0,.16);
  border:5px solid;
  transition:transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
.person-section:hover{ transform:translateY(-5px); box-shadow:0 18px 56px rgba(0,0,0,.2); }

.person-section.papa{ border-color:var(--papa-color); background:var(--papa-bg); }
.person-section.maman{ border-color:var(--maman-color); background:var(--maman-bg); }
.person-section.florent,.person-section.child-a{ border-color:var(--child-a-color); background:var(--child-a-bg); }
.person-section.harry,.person-section.child-b{ border-color:var(--child-b-color); background:var(--child-b-bg); }

.person-section.hidden{ display:none; }

/* ===== PERSON HEADER ===== */
.person-header{
  display:flex;
  flex-direction:column;          /* important: permet d’empiler badges sous la ligne titre */
  gap:10px;
  margin-bottom:18px;
  padding-bottom:12px;
  border-bottom:3px solid;
  align-items:stretch;
}

.papa .person-header{ border-color:var(--papa-color); }
.maman .person-header{ border-color:var(--maman-color); }
.florent .person-header,.child-a .person-header{ border-color:var(--child-a-color); }
.harry .person-header,.child-b .person-header{ border-color:var(--child-b-color); }

/* Ligne "Nom ... étoiles" */
.person-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-width:0; /* évite les débordements */
}

/* Compat anciens blocs (Papa/Maman) */
.person-title > div:first-child{ min-width:0; }

/* Nouveaux wrappers (Florent/Harry) */
.person-left{ min-width:0; }
.person-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  min-width:0;
}

.person-name{ font-size:2rem; font-weight:900; }
.person-name-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  min-width:0;
}
.btn-rename-person{
  font-size:12px;
  font-weight:800;
  padding:4px 10px;
  border-radius:999px;
  border:2px solid currentColor;
  background:#fff;
  cursor:pointer;
  line-height:1.2;
}
.btn-rename-person:hover{ opacity:.85; }
.btn-rename-person:disabled{ opacity:.55; cursor:wait; }
.papa .person-name{ color:var(--papa-color); }
.maman .person-name{ color:var(--maman-color); }
.florent .person-name,.child-a .person-name{ color:var(--child-a-color); }
.harry .person-name,.child-b .person-name{ color:var(--child-b-color); }

.stats{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
}

/* Empêche "22 / 19" de se couper */
.stars-earned{
  font-size:1.7rem;
  font-weight:900;
  color:#FFD700;
  text-shadow: 1px 1px 2px rgba(0,0,0,.18);
  white-space:nowrap;
}

.tasks-count{ color:#555; font-weight:800; }

/* Détails (ex: %) */
.progress-details{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  color:#555;
  font-weight:800;
}
.progress-details span[id^="percentage-"]{ font-size:1.35rem; font-weight:900; }

.papa span[id^="percentage-"]{ color:var(--papa-color); }
.maman span[id^="percentage-"]{ color:var(--maman-color); }
.florent span[id^="percentage-"],.child-a span[id^="percentage-"]{ color:var(--child-a-color); }
.harry span[id^="percentage-"],.child-b span[id^="percentage-"]{ color:var(--child-b-color); }

/* ✅ FIX FINAL: Base/Total sur 2 lignes sous le titre, sans être coupés */
.person-badges{
  display:flex;
  flex-direction:column;          /* 2 lignes (Base puis Total) */
  align-items:flex-end;           /* collé à droite */
  gap:8px;
  width:100%;
}
.person-badges .screen-time-badge{
  width:max-content;              /* taille au contenu */
  max-width:100%;                 /* mais ne déborde jamais du bloc */
  white-space:nowrap;             /* badge reste sur 1 ligne */
  overflow:hidden;
  text-overflow:ellipsis;         /* si vraiment trop long, ça coupe proprement */
}

/* Si tu préfères que le badge WRAP au lieu d’ellipsis, remplace par :
.person-badges .screen-time-badge{ white-space:normal; }
*/

.screen-time-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 14px;
  border-radius:999px;
  background: rgba(46,204,113,.16);
  border: 2px solid rgba(46,204,113,.28);
  font-weight:900;
  color:#0f5132;
  min-width:0;
}
.bonus-time{ font-weight:900; color:#b8860b; }

/* ===== TASKS ===== */
.tasks-list{ display:flex; flex-direction:column; gap:15px; }

.task-item{
  background:rgba(255,255,255,.92);
  padding:16px;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  transition: all .25s ease;
}
.task-item:hover{ transform: translateX(4px); box-shadow:0 10px 24px rgba(0,0,0,.14); }
.task-item.completed{ opacity:.65; }

.task-item.bonus{ border-left:6px solid #FFD700; }
.task-item.penalty{ border-left:6px solid #f44336; }
.task-item.serious-fault{ border-left:6px solid #d32f2f; }

.task-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:8px;
}

.drag-handle{
  cursor:grab;
  user-select:none;
  font-weight:900;
  opacity:.55;
}
.task-item.dragging .drag-handle{ cursor:grabbing; }

.checkbox{
  width:30px; height:30px;
  border:3px solid;
  border-radius:50%;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .15s ease, background .25s ease, border-color .25s ease;
}
.checkbox:hover{ transform:scale(1.05); }

.papa .checkbox{ border-color:var(--papa-color); }
.maman .checkbox{ border-color:var(--maman-color); }
.florent .checkbox,.child-a .checkbox{ border-color:var(--child-a-color); }
.harry .checkbox,.child-b .checkbox{ border-color:var(--child-b-color); }

.checkbox.checked::after{
  content:'✓';
  color:#fff;
  font-size:18px;
  font-weight:900;
}

.papa .checkbox.checked{ background:var(--papa-color); border-color:var(--papa-color); }
.maman .checkbox.checked{ background:var(--maman-color); border-color:var(--maman-color); }
.florent .checkbox.checked,.child-a .checkbox.checked{ background:var(--child-a-color); border-color:var(--child-a-color); }
.harry .checkbox.checked,.child-b .checkbox.checked{ background:var(--child-b-color); border-color:var(--child-b-color); }

.task-content{ flex:1; display:flex; flex-direction:column; gap:6px; min-width:0; }
.task-title{ font-size:1.08em; font-weight:900; color:var(--app-text); }
.task-item.completed .task-title{ text-decoration:line-through; }

.task-meta{
  display:flex;
  gap:10px;
  margin-top:8px;
  padding-left: 45px;
  font-size:.85rem;
  color:#8b8b8b;
  align-items:center;
  flex-wrap:wrap;
}

.task-category{
  padding:4px 10px;
  background:#f5f5f5;
  border-radius:12px;
  font-weight:800;
}

.task-stars{
  padding:4px 12px;
  border-radius:999px;
  font-size:.95rem;
  font-weight:900;
  background: linear-gradient(135deg,#FFD700 0%,#FFA500 100%);
  color:#fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,.2);
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  font-size:.75rem;
  font-weight:900;
}
.badge-bonus{ background:#ffeb3b; color:#333; }
.badge-penalty{ background:#f44336; color:#fff; }
.badge-fault{ background:#d32f2f; color:#fff; }

/* actions (admin only) */
.task-actions{
  display:none;
  gap:10px;
  margin-top:10px;
  padding-left:45px;
}
.admin-mode-active .task-actions{ display:flex; }

.btn-edit,.btn-delete{
  border:none;
  border-radius:12px;
  padding:8px 12px;
  font-weight:900;
  cursor:pointer;
}
.btn-edit{ background:#607D8B; color:#fff; }
.btn-delete{ background:#f44336; color:#fff; }

/* ===== PROGRESS ===== */
.progress-container{ margin: 14px 0 18px; }

.progress-bar{
  position:relative;
  height:22px;
  background: linear-gradient(180deg,#ececec 0%,#dedede 100%);
  border-radius:999px;
  overflow:hidden;
  box-shadow: inset 0 3px 8px rgba(0,0,0,.12);
  margin-bottom:12px;
}
.progress-bar::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 30% 50%, rgba(255,255,255,.95) 0 8px, rgba(0,0,0,0) 9px),
    radial-gradient(circle at 55% 50%, rgba(255,255,255,.95) 0 8px, rgba(0,0,0,0) 9px),
    radial-gradient(circle at 80% 50%, rgba(255,255,255,.95) 0 8px, rgba(0,0,0,0) 9px);
  opacity:.9;
}
.progress-fill{
  position:absolute;
  inset:0 auto 0 0;
  width:0%;
  background: linear-gradient(90deg,#4CAF50 0%,#8BC34A 55%,#FFC107 80%,#FF9800 100%);
  border-radius:999px;
  transition:width .6s ease;
  box-shadow:0 6px 16px rgba(76,175,80,.35);
}

/* ===== ADMIN ===== */
.admin-mode-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:auto;
  min-height:46px;
  height:auto;
  padding:10px 14px;
  border-radius:14px;
  border:none;
  cursor:pointer;
  font-size:14px;
  font-weight:800;
  background: rgba(255,255,255,.95);
  color:#333;
  white-space:nowrap;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  transition: all .25s ease;
}
.admin-mode-btn:hover{ transform: translateY(-2px); }
.admin-mode-btn.active{
  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;
}
.admin-mode-icon{ font-size:18px; line-height:1; }
.admin-mode-label{ font-weight:800; }

.admin-buttons{ display:none; gap:8px; align-items:center; margin-bottom:12px; }
.admin-mode-active .admin-buttons{ display:flex; }

.btn-check-all,.btn-uncheck-all,.btn-reset{
  border:none;
  padding:8px 14px;
  border-radius:10px;
  cursor:pointer;
  font-size:.85rem;
  font-weight:900;
  transition:all .25s ease;
}
.btn-check-all{ background:linear-gradient(135deg,#4CAF50 0%,#45a049 100%); color:#fff; }
.btn-uncheck-all{ background:linear-gradient(135deg,#9E9E9E 0%,#757575 100%); color:#fff; }
.btn-reset{ background:linear-gradient(135deg,#ff9800 0%,#f57c00 100%); color:#fff; }
.btn-check-all:hover,.btn-uncheck-all:hover,.btn-reset:hover{ transform: translateY(-2px); }

/* ===== NAVIGATION DES JOURS ===== */
.day-navigation{
  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  border-radius:15px;
  padding:20px;
  margin: 15px 0;
  box-shadow:0 4px 15px rgba(0,0,0,.1);
}
.day-nav-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
}
.day-nav-title{
  color:#fff;
  font-size:1.5em;
  font-weight:900;
  margin:0;
  text-align:center;
  flex:1;
}
.day-nav-btn{
  background: rgba(255,255,255,.2);
  border:none;
  color:#fff;
  padding:10px 15px;
  border-radius:10px;
  cursor:pointer;
  font-size:1em;
  font-weight:900;
  transition: all .3s ease;
}
.day-nav-btn:hover{ background: rgba(255,255,255,.3); transform: scale(1.05); }

.day-nav-quick{
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}
.day-quick-btn{
  background: rgba(255,255,255,.2);
  border:2px solid rgba(255,255,255,.3);
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  font-size:.9em;
  font-weight:900;
  transition: all .3s ease;
}
.day-quick-btn:hover{ background: rgba(255,255,255,.3); transform: translateY(-2px); }
.day-quick-btn.active{
  background:#fff;
  color:#667eea;
  border-color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
}

/* warning banner */
.day-warning-banner{
  background: linear-gradient(135deg,#ff6b6b 0%,#ee5a6f 100%);
  color:#fff;
  padding:15px 20px;
  margin:15px 0;
  border-radius:10px;
  box-shadow:0 4px 15px rgba(255,107,107,.3);
  animation: slideInDown .5s ease;
}
.day-warning-banner.hidden{ display:none; }

.warning-content{
  display:flex;
  align-items:center;
  gap:15px;
  justify-content:space-between;
}
.warning-icon{ font-size:2em; }
.warning-text{ flex:1; }
.warning-text strong{ font-size:1.1em; }
.warning-text small{ opacity:.9; }

.btn-today{
  background:#fff;
  color:#ff6b6b;
  border:none;
  padding:10px 20px;
  border-radius:8px;
  font-weight:900;
  cursor:pointer;
  transition: all .3s ease;
}
.btn-today:hover{ background:#f8f9fa; transform:scale(1.05); }

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

/* days checkboxes */
.days-checkboxes{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.day-checkbox-label{
  display:flex;
  align-items:center;
  gap:5px;
  background:#f8f9fa;
  padding:8px 12px;
  border-radius:8px;
  cursor:pointer;
  transition: all .3s ease;
  border:2px solid transparent;
}
.day-checkbox-label:hover{ background:#e9ecef; }
.day-checkbox-label input[type="checkbox"]:checked + span{ font-weight:900; }
.day-checkbox-label:has(input[type="checkbox"]:checked){
  background:#667eea;
  color:#fff;
  border-color:#667eea;
}
.day-checkbox{ cursor:pointer; }

/* ===== DEBUG PANEL ===== */
.debug-panel{
  display:none;
  position:fixed;
  bottom:0; left:0; right:0;
  background:#1a1a1a;
  color:#00ff00;
  padding:15px;
  max-height:220px;
  overflow-y:auto;
  font-family: monospace;
  font-size:12px;
  border-top:3px solid #00ff00;
  z-index:9999;
}
.debug-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
}
.btn-debug-clear{
  background:#333;
  color:#00ff00;
  border:1px solid #00ff00;
  padding:5px 10px;
  cursor:pointer;
  border-radius:6px;
  font-weight:900;
}
.debug-logs{ white-space:pre-wrap; word-break: break-all; }

/* ===== MODALS ===== */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20000;
  padding: 16px;
}
.modal-overlay.hidden{ display:none; }

.modal{
  width: min(560px, 100%);
  background: #fff;
  color: #222;
  border-radius: 18px;
  box-shadow: 0 16px 50px rgba(0,0,0,.25);
  overflow: hidden;
  max-height: 90vh;
  overflow:auto;
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.modal-header h3{
  margin:0;
  font-size: 18px;
  font-weight: 900;
}
.modal-close{
  border:none;
  background: transparent;
  font-size: 18px;
  cursor:pointer;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.modal-close:hover{ background: rgba(0,0,0,.06); }

.modal-body{ padding: 16px 18px 10px 18px; }

.modal-label{
  display:block;
  font-weight: 900;
  margin: 10px 0 6px;
}
.modal-input, .modal-textarea{
  width: 100%;
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 800;
  outline: none;
}
.modal-textarea{ resize: vertical; }

.modal-row{
  display:flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.modal-col{ min-width: 180px; flex: 1; }

.modal-check{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  background: rgba(0,0,0,.04);
  padding: 10px 12px;
  border-radius: 12px;
}
.modal-hint{
  margin-top: 6px;
  font-size: 12px;
  opacity: .75;
  font-weight: 700;
}

.modal-footer{
  display:flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* boutons uniquement dans la modale */
.modal .btn{ border:none; cursor:pointer; border-radius: 12px; padding: 10px 14px; font-weight: 900; }
.modal .btn-primary{ background:#111; color:#fff; }
.modal .btn-secondary{ background:rgba(0,0,0,.08); color:#111; }
.modal .btn-primary:hover{ opacity: .92; }
.modal .btn-secondary:hover{ background:rgba(0,0,0,.12); }

/* ===== Mobile: force 1 colonne pleine largeur ===== */

@media (max-width: 900px){
  .container{
    max-width: none !important;
    width: 100% !important;
    padding-left: 12px;
    padding-right: 12px;
  }

  .persons-container{
    display: block !important;   /* pas de grid sur mobile */
    width: 100% !important;
  }

  .person-section{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .header-row{
    flex-direction:column;
    align-items:stretch;
  }
  .header-actions{
    justify-content:flex-start;
  }
  .account-menu{
    max-width:100%;
    position:static;
  }
  .account-menu-list{
    left:0;
    right:0;
    min-width:0;
    max-width:none;
    width:auto;
  }
  .main-header h1{ font-size:2.1rem; }
  .referral-cash-card{
    max-width:100%;
  }
  .referral-cash-card-heading{
    gap:6px 10px;
  }
  .referral-cash-card-link{
    text-align:right;
  }
}


/* ===== Screen time compact row ===== */
.progress-details{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Force "Total" on its own line */
[id^="screen-time-badge-"]{
  flex-basis: 100%;
}

/* ===== Gift badge states ===== */
.gift-time{
  background: rgba(180,180,180,.18);
  border: 2px solid rgba(180,180,180,.35);
  color: #777;
  opacity: .6;
  transition: transform .18s ease, opacity .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

/* Active (bonus > 0) */
.gift-time.active{
  background: rgba(255,193,7,.22);
  border: 2px solid rgba(255,193,7,.45);
  color: #7a5a00;
  opacity: 1;
}

/* Small "pop" animation when bonus becomes active */
.gift-time.pop{
  transform: scale(1.10);
  filter: drop-shadow(0 6px 14px rgba(255,193,7,.35));
}
/* ===== Confetti canvas overlay ===== */
#confettiCanvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 30000;
}

.account-bar{
  display:contents;
  color:#fff;
  font-weight:800;
  font-size:13px;
}
.account-bar.hidden{ display:none; }
.account-bar .hidden{ display:none !important; }
.account-status{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  order:1;
}
.account-menu{ order:2; position:relative; }
.admin-mode-btn{ order:3; }
.daily-email-optin{ order:4; }
.change-admin-pin-btn{ order:5; }
.account-menu-caret{ font-size:12px; opacity:.7; }
.account-menu-list{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  left:auto;
  z-index:50;
  min-width:min(280px, calc(100vw - 32px));
  max-width:min(320px, calc(100vw - 24px));
  padding:6px;
  background:#fff;
  color:#222;
  border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.22);
}
.account-menu-list[hidden]{ display:none !important; }
.account-menu-item{
  display:block;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
  font-size:14px;
  font-weight:800;
  color:#222;
}
.account-menu-item:hover,
.account-menu-item:focus{
  background:#f3f0ff;
  outline:none;
}
.account-menu-item-logout{
  margin-top:4px;
  border-top:1px solid #ece6ff;
  border-radius:0 0 10px 10px;
}
.legal-page .legal-register{ overflow-x:auto; }
.account-bar #changeAdminPinBtn{ padding:8px 12px; font-size:13px; }
.legal-register{
  width:100%;
  border-collapse:collapse;
  margin:12px 0 4px;
  font-size:13px;
}
.legal-register th,
.legal-register td{
  border:1px solid #ece6ff;
  padding:8px 10px;
  text-align:left;
  vertical-align:top;
  font-weight:600;
}
.legal-register th{ background:#faf8ff; font-weight:800; }
.legal-page .legal-register + p{ margin-top:10px; }
.change-admin-pin-btn{ display:none; }
.admin-mode-active .change-admin-pin-btn{ display:inline-flex; }
.daily-email-optin{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#fff;
  font-weight:800;
  font-size:12px;
  cursor:pointer;
}
.daily-email-optin.hidden{ display:none; }
.referral-thanks{
  margin:10px 0 0;
  padding:8px 12px;
  background:rgba(255,255,255,.16);
  border-radius:12px;
  font-weight:800;
  font-size:14px;
  line-height:1.4;
}
.referral-thanks.hidden{ display:none; }
.referral-cash-card{
  margin:12px 0 0;
  padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(255,236,179,.95), rgba(255,255,255,.88));
  color:#4a2c00;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  border:1px solid rgba(255,193,7,.45);
  max-width:min(100%, 36rem);
}
.referral-cash-card.hidden{ display:none; }
.referral-cash-card-modal{
  margin:0 0 14px;
  max-width:none;
}
.referral-cash-card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px 14px;
  flex-wrap:wrap;
}
.referral-cash-card-label{
  flex:1 1 12rem;
  min-width:0;
  font-size:13px;
  font-weight:800;
  line-height:1.35;
}
.referral-cash-card-link{
  flex:0 1 auto;
  margin-left:auto;
  max-width:100%;
  background:none;
  border:0;
  padding:0;
  color:#6a3d00;
  font:inherit;
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  text-align:right;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
  white-space:normal;
}
.referral-cash-card-link:hover,
.referral-cash-card-link:focus-visible{
  color:#4a2c00;
}
.referral-cash-card-link:focus-visible{
  outline:3px solid #ffe082;
  outline-offset:2px;
  border-radius:4px;
}
.referral-cash-card-amount{
  font-size:28px;
  font-weight:900;
  line-height:1.2;
  margin:4px 0;
}
.referral-cash-card-payout{
  font-size:13px;
  font-weight:800;
}
.referral-cash-example{
  font-size: 13px;
  opacity: .9;
  font-weight: 800;
}
.referral-cash-note{ font-size:13px; }
.referral-cash-ok{
  color:#1b5e20;
  font-weight:800;
  margin:8px 0;
}
.referral-cash-ok.hidden{ display:none; }

.lang-switcher{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50000;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #ece6ff;
  font-weight:800;
  font-size:13px;
  color:#222;
}
.lang-switcher select{
  font-weight:800;
  border:2px solid #ece6ff;
  border-radius:10px;
  padding:4px 8px;
  background:#fff;
}
body{ padding-top:44px; padding-bottom:56px; }
.auth-gate{
  position:fixed;
  top:44px;
  left:0;
  right:0;
  bottom:56px;
  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  z-index:20000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.auth-gate.hidden{ display:none; }
.auth-card{
  background:#fff;
  border-radius:20px;
  padding:24px;
  max-width:520px;
  width:100%;
  box-shadow:0 18px 50px rgba(0,0,0,.25);
}
.auth-card h2{ margin:0 0 8px; }
.gate-lead{ color:#444; font-weight:700; margin:0 0 14px; }
.gate-error{
  background:#fdecea;
  color:#c0392b;
  padding:10px 12px;
  border-radius:10px;
  font-weight:800;
  margin-bottom:12px;
}
.gate-stripe-trust{
  color:#1f4d32;
  font-weight:700;
  font-size:13px;
  line-height:1.45;
  margin:10px 0 12px;
  padding:10px 12px;
  background:#eef7f1;
  border-radius:10px;
}
.plan-row{ display:flex; gap:12px; flex-wrap:wrap; }
.plan-card{
  flex:1;
  min-width:140px;
  border:2px solid #ece6ff;
  background:#faf8ff;
  border-radius:16px;
  padding:16px;
  cursor:pointer;
  font-weight:800;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.plan-card:hover{ border-color:#764ba2; transform:translateY(-2px); }
.auth-card .hidden { display: none !important; }
.auth-card .modal-input{ margin-bottom:10px; }
.auth-card a{ font-weight:800; color:#5b4bce; }
.auth-legal-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:12px 0 4px;
  font-size:13px;
  font-weight:700;
  color:#333;
  text-align:left;
  line-height:1.45;
}
.auth-legal-check[hidden]{ display:none !important; }
.auth-legal-check input{ margin-top:3px; flex-shrink:0; }
.app-legal-footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:50001;
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:8px 12px;
  background:rgba(255,255,255,.98);
  border-top:1px solid #ece6ff;
  font-size:12px;
  font-weight:700;
  color:#4b5563;
}
.app-legal-footer a{ color:#5b4bce; font-weight:800; }
.legal-body{ background:#f6f7fb; }
.legal-page{
  max-width:720px;
  margin:24px auto 24px;
  padding:22px 18px 28px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  line-height:1.55;
}
.legal-page h1{ margin:0 0 12px; }
.legal-page h2{ margin:22px 0 8px; font-size:18px; }
.legal-page p, .legal-page li{ font-weight:600; color:#333; }
.legal-back{ margin:0 0 10px; }
.legal-identity{
  background:#faf8ff;
  border:1px solid #ece6ff;
  border-radius:14px;
  padding:14px 16px;
  margin:16px 0 8px;
}
.legal-identity h2{ margin:0 0 8px; }
.legal-identity p{ margin:4px 0; font-weight:800; }

html[data-family-theme="custom"]{
  --app-header-text: var(--app-text);
}
html[data-family-theme="custom"] body{
  color: var(--app-text);
}
html[data-family-theme="custom"] .day-nav-title,
html[data-family-theme="custom"] .day-nav-btn,
html[data-family-theme="custom"] .day-quick-btn{
  color: var(--app-text);
}
html[data-family-theme="custom"] .day-quick-btn.active{
  background: var(--app-text);
  color: var(--app-bg);
  border-color: var(--app-text);
}

.theme-refresh-note{
  margin: 10px 0 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #eef4ff;
  color: #2a3a6b;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
}
.theme-fields{ margin-top: 8px; }
.theme-color-row,
.theme-size-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.theme-color-input{
  width:56px;
  height:40px;
  padding:0;
  border:1px solid rgba(0,0,0,.15);
  border-radius:10px;
  background:#fff;
  cursor:pointer;
}
.theme-hex{
  font-weight:800;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:#444;
}
.theme-size-presets{
  display:flex;
  gap:8px;
  margin: 4px 0 10px;
}
.theme-preset-btn{
  min-width:44px;
  min-height:40px;
  border:2px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:12px;
  font-weight:900;
  cursor:pointer;
}
.theme-preset-btn.active,
.theme-preset-btn[aria-pressed="true"]{
  border-color:#667eea;
  background:#eef0ff;
  color:#3d348b;
}
.theme-size-row input[type="range"]{ flex:1; }
.theme-size-value{ font-weight:800; min-width:3.2em; }
.theme-preview-label{
  font-weight:900;
  margin: 14px 0 6px;
}
.theme-preview{
  border-radius:14px;
  padding:16px;
  min-height:72px;
  background: linear-gradient(135deg,#667eea 0%,#764ba2 100%);
  color:#fff;
  font-weight:800;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.theme-contrast-warn{
  margin-top:10px;
  color:#8a4b00;
  background:#fff6e5;
  border-radius:10px;
  padding:8px 10px;
  font-weight:700;
}
.theme-contrast-warn.hidden{ display:none; }
.theme-footer{ flex-wrap:wrap; }

.export-format-modal{ width: min(420px, 100%); }
.export-format-lead{
  margin: 0 0 12px;
  font-size: 14px;
  opacity: .8;
}
.export-format-choices{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.export-format-btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  width:100%;
  border:2px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius:14px;
  padding:14px 16px;
  cursor:pointer;
  text-align:left;
}
.export-format-btn:hover{
  border-color:#667eea;
  background:#eef0ff;
}
.export-format-btn:focus{
  outline:2px solid #667eea;
  outline-offset:2px;
}
.export-format-btn:disabled{ opacity:.6; cursor:wait; }
.export-format-label{
  font-weight:900;
  font-size:16px;
  color:#111;
}
.export-format-hint{
  font-weight:700;
  font-size:12px;
  opacity:.75;
}