/* ===== Modo Foco ===== */
.focus-wrap{
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem 2rem;
}

/* título principal da página */
.focus-wrap > h1{
  text-align: center;
  margin: 70px 0 1rem; /* topo fixo em 70px */
  color: var(--secondary);
}

.focus-panel{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 70px;
  box-shadow: var(--shadow);
  text-align: center;
}

.focus-panel h1{
  color: var(--primary);
  margin: .2rem 0 1rem;
}

/* controles */
.focus-controls{
  display:flex; gap:.75rem; flex-wrap:wrap; justify-content:center;
  margin-bottom: .75rem;
}
.focus-controls label{
  display:flex; align-items:center; gap:.4rem; font-weight:600;
  color: var(--text);
}
.focus-controls input{
  width: 90px; 
  padding:.45rem .6rem; 
  border:1px solid var(--border); 
  border-radius:10px;
  background: color-mix(in srgb, var(--card) 96%, transparent); 
  color: var(--text);
  text-align:center;
}

/* visor do tempo */
.focus-timer{
  font-size: clamp(2.2rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--primary);
  margin: .4rem 0 1rem;
}

/* ações */
.focus-actions{
  display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;
}
.focus-actions button{
  padding:.65rem 1.1rem; 
  border-radius:12px; 
  border:1px solid var(--border); 
  background: var(--card); 
  cursor:pointer;
  font-weight:700;
  color: var(--text);
}
.focus-actions .primary{ 
  background: var(--primary); 
  color:#fff; 
  border-color: var(--primary); 
}
.focus-actions .danger { 
  background: var(--danger, #b94c4c); 
  color:#fff; 
  border-color: var(--danger, #b94c4c); 
}
.focus-actions .ghost  { 
  background: var(--secondary); 
  color:#fff; 
  border-color: var(--secondary); 
}
.focus-actions .pause  {
  background: var(--muted, #808080); 
  color:#fff; 
  border-color: var(--muted, #808080);
}

/* stats */
.focus-stats{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  color: color-mix(in srgb, var(--text) 75%, var(--border)); 
  font-weight:600; 
  margin-top:.85rem;
}
.goalbar{
  display:inline-block; 
  min-width:160px; 
  background: color-mix(in srgb, var(--card) 92%, transparent); 
  border:1px solid var(--border);
  border-radius:999px; 
  padding:.25rem .6rem;
}

/* notas rápidas */
.notes{ 
  text-align:left; 
  margin-top: .9rem; 
}
.notes textarea{
  width:100%; 
  min-height:120px; 
  border:1px solid var(--border); 
  border-radius:12px; 
  padding:.7rem;
  resize:vertical; 
  font:inherit; 
  background: color-mix(in srgb, var(--card) 95%, transparent);
  color: var(--text);
}

/* ===== Modo Imersivo: esconde header/footer e ajusta o painel ===== */
body.is-focus header.ss-header,
body.is-focus .ss-footer { 
  display: none !important; 
}

body.is-focus .focus-wrap{
  max-width: 1000px;
  margin: 3vh auto;
}