/* 秋招工作台 · focus-hud.css —— 任务专注倒计时 HUD */
/* ==========================================================================
   1. 任务轻量专注倒计时 HUD (Focus Timer)
   ========================================================================== */
.task-play-btn {
  border: 1px solid var(--line); background: var(--panel-sub); color: var(--ink);
  font-size: 11.5px; font-weight: 650; padding: 3px 9px; border-radius: 99px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 4px; flex: none;
  transition: all .18s cubic-bezier(0.16, 1, 0.3, 1);
}
.task-play-btn:hover { border-color: var(--ok); color: var(--ok); background: var(--ok-soft); transform: scale(1.04); }
.task-play-btn.playing {
  border-color: var(--ok); background: var(--ok); color: #fff;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4); animation: pulseGlow 1.8s infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
.task-item.focus-active {
  border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok-soft), 0 4px 14px rgba(16, 185, 129, 0.12);
  background: var(--panel);
}

.focus-hud {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 90; width: max-content; max-width: calc(100vw - 36px);
  animation: hudSlideUp .25s cubic-bezier(0.16, 1, 0.3, 1);
}
.focus-hud.hide { display: none; }
@keyframes hudSlideUp {
  from { opacity: 0; transform: translate(-50%, 20px) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.focus-hud-inner {
  display: flex; align-items: center; gap: 16px; padding: 10px 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 99px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.22), 0 0 0 1px var(--line-soft);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.focus-hud-indicator { display: flex; align-items: center; gap: 8px; flex: none; }
.focus-pulse-dot {
  width: 10px; height: 10px; border-radius: 50%; background: #10b981;
  box-shadow: 0 0 8px #10b981; animation: dotBlink 1.4s infinite ease-in-out;
}
@keyframes dotBlink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }
.focus-status-text { font-size: 12px; font-weight: 700; color: #10b981; letter-spacing: .02em; }
.focus-hud-info {
  display: flex; align-items: center; gap: 12px; border-left: 1px solid var(--line);
  padding-left: 14px; min-width: 140px;
}
.focus-hud-task-title {
  max-width: 220px; font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.focus-hud-time {
  font-size: 19px; font-weight: 800; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums; color: var(--accent); letter-spacing: 0.5px;
}
.focus-hud-sound {
  display: flex; align-items: center; gap: 6px; border-left: 1px solid var(--line);
  padding-left: 12px;
}
.hud-sound-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  background: var(--panel-sub); color: var(--ink); font-size: 11.5px; font-weight: 650;
  padding: 5px 10px; border-radius: 99px; cursor: pointer; transition: all .15s ease;
  white-space: nowrap; max-width: 140px;
}
.hud-sound-btn:hover { border-color: var(--accent); color: var(--accent); }
.hud-sound-btn .sound-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80px;
}
.hud-sound-toggle-btn {
  border: 1px solid var(--line); background: var(--panel-sub); color: var(--ink);
  font-size: 12px; width: 28px; height: 28px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; transition: all .15s ease;
}
.hud-sound-toggle-btn:hover { border-color: var(--accent); }
.sound-bars {
  display: inline-flex; align-items: flex-end; gap: 2px; width: 11px; height: 11px; margin-left: 2px;
}
.sound-bars .bar {
  display: inline-block; width: 2px; background: #10b981; border-radius: 1px;
}
.sound-bars.playing .bar:nth-child(1) { height: 60%; animation: soundBounce .6s infinite ease-in-out alternate; }
.sound-bars.playing .bar:nth-child(2) { height: 100%; animation: soundBounce .8s infinite ease-in-out alternate .2s; }
.sound-bars.playing .bar:nth-child(3) { height: 40%; animation: soundBounce .5s infinite ease-in-out alternate .1s; }
.sound-bars:not(.playing) .bar { height: 3px; background: var(--faint); }
@keyframes soundBounce {
  0% { height: 25%; }
  100% { height: 100%; }
}
.focus-hud-actions { display: flex; align-items: center; gap: 8px; }
.hud-btn {
  border: 1px solid var(--line); background: var(--panel-sub); color: var(--ink);
  font-size: 12px; font-weight: 650; padding: 6px 12px; border-radius: 99px; cursor: pointer;
  transition: all .15s ease;
}
.hud-btn:hover { border-color: var(--accent); color: var(--accent); }
.hud-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.hud-btn.primary:hover { opacity: .9; transform: scale(1.03); }
.hud-btn.danger { color: var(--bad); border-color: var(--line); }
.hud-btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); }