.floating-timer {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 45;
  display: grid;
  justify-items: end;
  pointer-events: none;
}

.timer-launcher,
.timer-panel {
  pointer-events: auto;
}

.timer-launcher {
  display: none;
  min-height: 42px;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pill);
  padding: 0 14px;
  background: linear-gradient(135deg, #1d3f38, #0b1513);
  color: #f7e7b1;
  font-size: 0.95rem;
  font-weight: 1000;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.timer-panel {
  width: min(300px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid rgba(216, 191, 114, 0.65);
  border-radius: 18px;
  padding: var(--space-3);
  background:
    radial-gradient(circle at 85% 0%, rgba(216, 191, 114, .16), transparent 36%),
    linear-gradient(145deg, rgba(27, 61, 52, .98), rgba(10, 22, 19, .98));
  color: #f7f2db;
  box-shadow: 0 22px 54px rgba(8, 18, 15, 0.34), inset 0 0 0 1px rgba(255,255,255,.05);
}

.timer-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2-5);
  align-items: start;
}

.timer-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.timer-brand { display: flex; gap: 10px; align-items: center; }
.timer-brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(216,191,114,.7); border-radius: 50%;
  color: #d8bf72; font-size: 1.35rem; box-shadow: inset 0 0 14px rgba(216,191,114,.12);
}
.timer-head .eyebrow { color: rgba(247,242,219,.58); }

.timer-window-actions {
  display: inline-flex;
  gap: var(--space-1-5);
}

.timer-window-actions button {
  min-height: 30px;
  border: 1px solid rgba(247,242,219,.2);
  border-radius: var(--radius-sm);
  padding: 0 8px;
  background: rgba(255,255,255,.07);
  color: rgba(247,242,219,.72);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.timer-display {
  margin: 10px 0;
  border: 1px solid rgba(216,191,114,.3);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.015) 18px 19px),
    #07100e;
  color: #f3d883;
  text-shadow: 0 0 18px rgba(243,216,131,.28);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
}

.timer-status { display: flex; justify-content: center; gap: 7px; align-items: center; margin: -2px 0 9px; color: rgba(247,242,219,.62); font-size: .72rem; letter-spacing: .16em; }
.timer-status span { width: 7px; height: 7px; border-radius: 50%; background: #d8bf72; box-shadow: 0 0 10px rgba(216,191,114,.65); }
.floating-timer.is-running .timer-status span { background: #5ed5bd; box-shadow: 0 0 12px rgba(94,213,189,.8); animation: timerGlow 1.2s ease-in-out infinite alternate; }
@keyframes timerGlow { to { opacity: .38; transform: scale(.75); } }

.timer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: var(--space-2);
}

.timer-actions button {
  min-height: 38px;
  border: 1px solid rgba(247,242,219,.22);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.08);
  color: #f7f2db;
  font-weight: 1000;
  cursor: pointer;
}

#timerToggle {
  border-color: #d8bf72;
  background: linear-gradient(135deg, #d8bf72, #a87a2d);
  color: #15110a;
}

#timerBell {
  border-color: rgba(216,191,114,.62);
  background: rgba(216,191,114,.12);
  color: #f3d883;
}

.floating-timer.is-running #timerToggle,
.floating-timer.is-running .timer-launcher {
  border-color: #5ed5bd;
  background: linear-gradient(135deg, #2d9a88, #14564c);
  color: #fff;
}

.floating-timer.is-collapsed .timer-panel {
  display: none;
}

.floating-timer.is-collapsed .timer-launcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

body.is-edit-mode .floating-timer {
  right: 392px;
}

@media (max-width: 900px) {
  .floating-timer,
  body.is-edit-mode .floating-timer {
    right: 10px;
    bottom: 10px;
  }
}

@media (max-width: 560px) {
  .floating-timer:not(.is-collapsed) {
    right: 10px;
    bottom: 10px;
    left: 10px;
  }

  .floating-timer:not(.is-collapsed) .timer-panel {
    width: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: var(--space-2);
    align-items: stretch;
    padding: 10px;
    border-radius: var(--radius-lg);
  }

  .floating-timer:not(.is-collapsed) .timer-head {
    grid-column: 1 / -1;
    margin-bottom: var(--space-2);
  }

  .floating-timer:not(.is-collapsed) .timer-display {
    min-height: 54px;
    border-radius: var(--radius-md-lg);
    font-size: 2rem;
  }

  .floating-timer:not(.is-collapsed) .timer-actions {
    grid-template-columns: 1fr;
    gap: var(--space-1-5);
  }

  .floating-timer:not(.is-collapsed) .timer-actions button {
    min-height: 24px;
    font-size: 0.82rem;
  }
}