:root {
  --bg: #fff;
  --bg-alt: #e3f2fd;
  --panel: #f7faff;
  --accent: #1976d2;
  --accent-bright: #1565c0;
  --accent-pink: #ff1493;
  --accent-purple: #9d4edd;
  --muted: #90a4ae;
  --success: #00bfae;
  --danger: #ff3366;
  --glass: rgba(25, 118, 210, 0.08);
  --radius: 16px;
  --gap: 16px;
  --max-width: 1200px;
  --card-padding: 20px;
  --shadow-glow: 0 0 30px rgba(25,118,210,0.08), 0 0 60px rgba(25,118,210,0.04);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', 'Trebuchet MS', -apple-system, Arial, sans-serif;
  background: var(--bg);
  color: #222;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px);}
  to { opacity: 1; transform: translateY(0);}
}
@keyframes pulse {
  0%,100% { transform: scale(1);}
  50% { transform: scale(1.05);}
}

.tm-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.tm-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 2px solid var(--glass);
  background: var(--accent);
  color: #fff;
  position: sticky; top:0; z-index:100;
  box-shadow: var(--shadow-glow);
  animation: slideUp .6s ease;
}

.tm-brand {
  font-weight:900; color:#fff; font-size:22px; letter-spacing:1px;
  text-shadow:0 0 20px rgba(25,118,210,.12);
}

.tm-nav {
  display:flex; gap:12px; flex-wrap:wrap;
}
.nav-btn {
  background:#fff;
  border:2px solid transparent;
  padding:10px 18px; color:var(--accent);
  border-radius:var(--radius); cursor:pointer; font-weight:700;
  transition:.3s cubic-bezier(.34,1.56,.64,1);
}
.nav-btn:hover {
  color:#fff; background:var(--accent-bright); border-color:#fff; 
}
.nav-btn.active {
  background:var(--accent-bright); color:#fff; border-color:#fff; 
}

.tm-main {
  flex:1; max-width:var(--max-width); margin:30px auto; padding:0 20px 80px; width:100%;
}

.tm-main h1, .tm-main h2 {
  color: var(--accent);
  margin-bottom:1.5rem; font-size:2rem; font-weight:900; letter-spacing:.5px;
}

.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-bottom:var(--gap);}
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }

.card {
  background:#fff;
  border-radius:var(--radius);
  padding:var(--card-padding);
  border:2px solid var(--bg-alt);
  margin-bottom:var(--gap);
  box-shadow:0 8px 32px rgba(25,118,210,.06), var(--shadow-glow);
}
.card:hover {
   border-color:var(--accent); box-shadow:0 12px 40px rgba(25,118,210,.12), var(--shadow-glow); transform:translateY(-4px);
}
.card h3 { color:var(--accent-bright); margin-bottom:.8rem; font-size:1.2rem;}
.card p { font-size:1.5rem; font-weight:bold; color:var(--accent); }

.list { list-style:none; padding:0; margin:0;}
.list li {
   padding:12px 16px; border-radius:10px; margin-bottom:10px;
   background:#e3f2fd; display:flex; justify-content:space-between; align-items:center;
   border:1px solid #bbdefb; transition:.3s; cursor:pointer;
}
.list li:hover { background:#bbdefb; border-color:#1976d2;}

.form-inline { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:.8rem;}
.form-inline input,
.form-inline select {
   padding:12px 16px; border-radius:10px; border:2px solid #bbdefb;
   background:#fff; color:#222; min-width:140px; font-size:1rem; transition:.3s;
}
.form-inline input::placeholder { color:#90a4ae;}
.form-inline input:focus,
.form-inline select:focus {
   border-color:#1976d2; box-shadow:0 0 20px #e3f2fd,inset 0 0 10px #bbdefb; outline:none; transform:translateY(-2px);
}

.btn {
   padding:12px 20px; border-radius:10px; border:none;
   background:#1976d2; color:#fff; cursor:pointer; font-weight:bold;
   transition:.3s cubic-bezier(.34,1.56,.64,1);
}
.btn:hover { background:#1565c0;}
.btn-primary { background:#1976d2;}
.btn-primary:hover { background:#1565c0;}

.timer-card { display:flex; flex-direction:column; align-items:center; gap:20px;}
.timer-display {
   font-family:'Courier New',monospace;font-size:56px;font-weight:bold;color:#1976d2;text-shadow:none;
   animation:pulse .8s ease infinite alternate;
}
.timer-controls { display:flex; gap:12px; align-items:center;}

.tm-footer {
   text-align:center;padding:16px;color:#90a4ae;border-top:2px solid #e3f2fd;margin-top:auto;font-size:.9rem;background:#f7faff
}

/* Responsivo */
@media (max-width:900px) {
 .grid-3 { grid-template-columns:1fr;}
 .grid-2 { grid-template-columns:1fr;}
 .tm-nav { overflow-x:auto;}
 .timer-display { font-size:40px;}
 .tm-main h1,.tm-main h2{font-size:1.5rem;}
}
@media (max-width:600px) {
 .tm-header{padding:16px 12px;}
 .tm-brand{font-size:18px;}
 .form-inline{flex-direction:column;}
 .form-inline input,.form-inline select,.btn{width:100%;}
 .timer-display{font-size:32px;}
 .card{padding:16px;}

 .timer-controls {
  display: flex;
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center;     /* Centraliza verticalmente se a altura permitir */
  gap: 12px;               /* Espaço entre os botões */
  width: 100%;
  margin: 0 auto;
}

/* Responsivo para telas pequenas */
@media (max-width: 600px) {
  .timer-controls {
    flex-direction: column; /* Empilha os botões no mobile */
    gap: 10px;
    width: 100%;
    padding: 0 8px;
  }
}
}