/* ════════════════════════════════════════════════════
   pomo-flip-orbital.css — Flip Clock + Orbital Timer
═══════════════════════════════════════════════════ */

/* ── SHARED: All pomo style panels ── */
.flip-panel {
  position: fixed;
  z-index: 20;
  animation: fpIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  user-select: none;
  font-family: inherit;
}

body.zen-mode-0 .flip-panel,
body.zen-mode-1 .flip-panel,
body.zen-mode-2 .flip-panel {
  opacity: 0;
  pointer-events: none;
}

@keyframes fpIn {
  0%   { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ════════════════════════════════════════════════════
   FLIP CLOCK PANEL
═══════════════════════════════════════════════════ */
#pan-pomo-flip {
  width: 270px;
}

.flip-panel {
  border-radius: 14px;
  overflow: hidden;
  background: rgba(10, 9, 18, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.flip-header {
  display: flex;
  flex-direction: column;
  padding: 12px 14px 0;
  cursor: grab;
}

.flip-header:active {
  cursor: grabbing;
}

.flip-drag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.drag-h {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.flip-mode-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
}

.flip-sess-row {
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 12px;
}

.flip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.flip-dot.done {
  background: var(--acc, #e8c99a);
  border-color: var(--acc, #e8c99a);
  box-shadow: 0 0 8px var(--acc, #e8c99a), 0 0 20px rgba(232, 201, 154, 0.3);
}

.flip-dot.current {
  background: rgba(232, 201, 154, 0.3);
  border-color: var(--acc, #e8c99a);
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 201, 154, 0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(232, 201, 154, 0); }
}

/* Flip digits */
.flip-digits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 14px 14px;
}

.flip-cell {
  position: relative;
  width: 50px;
  height: 80px;
  perspective: 200px;
}

.flip-rotor {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.flip-rt,
.flip-rb {
  position: absolute;
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.flip-rt {
  top: 0;
  background: rgba(38, 35, 55, 0.97);
  border-radius: 8px 8px 0 0;
  align-items: flex-end;
}

.flip-rb {
  bottom: 0;
  background: rgba(24, 21, 37, 0.97);
  border-radius: 0 0 8px 8px;
  align-items: flex-start;
}

/* Hinge line */
.flip-rotor::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: 0 0.5px 0 rgba(255, 255, 255, 0.04);
}

/* Flip leaf (animated part) */
.flip-leaf {
  position: absolute;
  width: 100%;
  height: 50%;
  top: 0;
  z-index: 2;
  transform-style: preserve-3d;
  transition: none;
}

.flip-leaf.flipped {
  transition: all 0.3s ease-in-out;
  transform: rotateX(-180deg);
}

.flip-lf,
.flip-lr {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 48px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip-lf {
  background: rgba(38, 35, 55, 0.97);
}

.flip-lr {
  background: rgba(28, 25, 45, 0.97);
  transform: rotateX(180deg);
}

/* Separator */
.flip-sep {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: center;
  padding-bottom: 4px;
}

.flip-d1,
.flip-d2 {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acc, #e8c99a);
  box-shadow: 0 0 8px var(--acc, #e8c99a);
  opacity: 0.8;
  animation: colonBlink 1s ease-in-out infinite;
}

.flip-d2 {
  animation-delay: 0.1s;
}

@keyframes colonBlink {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 0.2; }
}

/* Controls */
.flip-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 12px;
}

/* Premium shared button styles */
.flip-play {
  flex: 1;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(var(--acc-rgb,232,201,154), .3);
  background: rgba(var(--acc-rgb,232,201,154), .12);
  color: var(--acc, #e8c99a);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .04em;
  transition: all .15s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}

.flip-play:hover {
  background: rgba(var(--acc-rgb,232,201,154), .2);
  box-shadow: 0 4px 12px rgba(var(--acc-rgb,232,201,154), .25);
}

.flip-play:active {
  transform: translateY(1px);
}

.flip-play.paused {
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.12);
}

.flip-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}

.flip-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
}

/* Mode tabs */
.flip-tabs {
  display: flex;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.flip-tab {
  flex: 1;
  padding: 9px 4px;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.2);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.13s;
  letter-spacing: 0.04em;
  position: relative;
}

.flip-tab:hover {
  color: rgba(255, 255, 255, 0.55);
}

.flip-tab.active {
  color: var(--acc, #e8c99a);
}

.flip-tab.active::before {
  content:'';
  position:absolute;
  top:0;
  left:12%;
  right:12%;
  height:2px;
  background:var(--acc, #e8c99a);
  border-radius:0 0 2px 2px;
  opacity:.9;
}

/* ─────────────────────────────────────────────
   Visual upgrade — Flip + Orbital premium cards
───────────────────────────────────────────── */
#pan-pomo-flip {
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(var(--acc-rgb,232,201,154),.20), transparent 34%),
    linear-gradient(156deg, rgba(26,23,37,.88), rgba(9,9,15,.82)) !important;
  border: 1px solid rgba(255,255,255,.105) !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(22px) saturate(1.18) !important;
}
.flip-panel { padding: 18px !important; }
.flip-drag-zone,.flip-header {
  cursor: grab;
  color: rgba(255,255,255,.58) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .62rem;
}
.flip-digits { justify-content: center; gap: 8px !important; margin: 10px 0 15px !important; }
.flip-digit {
  width: 54px !important;
  height: 82px !important;
  border-radius: 13px !important;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.42)) !important;
}
.flip-top,.flip-bot,.flip-card-a,.flip-card-b {
  font-size: 54px !important;
  color: rgba(255,255,255,.96) !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.38);
}
.flip-top,.flip-card-a {
  background: linear-gradient(180deg, rgba(62,56,83,.96), rgba(31,29,43,.98));
  border-color: rgba(255,255,255,.11);
}
.flip-bot,.flip-card-b {
  background: linear-gradient(180deg, rgba(24,22,34,.98), rgba(12,12,19,.99));
  border-color: rgba(255,255,255,.08);
}
.flip-play {
  box-shadow: 0 14px 38px rgba(var(--acc-rgb,232,201,154),.24), inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.flip-icon,.flip-tab {
  border-color: rgba(255,255,255,.09) !important;
  background: rgba(255,255,255,.045) !important;
}
.flip-tab.active {
  background: rgba(var(--acc-rgb,232,201,154),.16) !important;
  color: rgba(255,255,255,.94) !important;
  border-color: rgba(var(--acc-rgb,232,201,154),.32) !important;
}

/* ─────────────────────────────────────────────
   Visual upgrade — Flip + Orbital premium cards (smaller)
───────────────────────────────────────────── */
#pan-pomo-flip {
  border-radius: 22px !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
}
.flip-panel { padding: 16px !important; }
.flip-drag-zone,.flip-header {
  font-size: .60rem;
  letter-spacing: .07em;
}
.flip-digits { gap: 6px; margin: 8px 0 13px; }
.flip-digit {
  width: 50px !important;
  height: 76px !important;
  border-radius: 12px !important;
  filter: drop-shadow(0 16px 22px rgba(0,0,0,.38)) !important;
}
.flip-top,.flip-bot,.flip-card-a,.flip-card-b {
  font-size: 48px !important;
  text-shadow: 0 1px 16px rgba(0,0,0,.32);
}
.flip-play {
  box-shadow: 0 12px 36px rgba(var(--acc-rgb,232,201,154),.20), inset 0 1px 0 rgba(255,255,255,.20);
}
.flip-icon,.flip-tab {
  border-color: rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.flip-tab.active {
  border-color: rgba(var(--acc-rgb,232,201,154),.28) !important;
}

/* ── Current Flip DOM: real split-flap halves ── */
.flip-drag-zone{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:4px 8px;background:rgba(255,255,255,.08);border-radius:6px;cursor:move}.drag-handle{font-size:14px;color:rgba(255,255,255,.4);transition:color 0.2s}.drag-handle:hover{color:rgba(255,255,255,.8)}
.flip-session-row{display:flex;gap:6px;margin:0 0 10px}.flip-sess-dot{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.12)}.flip-sess-dot.done{background:var(--acc,#e8c99a);box-shadow:0 0 12px var(--acc,#e8c99a)}.flip-sess-dot.current{border-color:var(--acc,#e8c99a);background:rgba(232,201,154,.28)}
.flip-group{display:flex;gap:5px}.flip-colon{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;padding:0 1px}.flip-colon-dot{width:5px;height:5px;border-radius:50%;background:var(--acc,#e8c99a);box-shadow:0 0 8px var(--acc,#e8c99a)}
.flip-digit{position:relative;width:48px;height:76px;perspective:520px;border-radius:10px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.38))}.flip-top,.flip-bot,.flip-card-a,.flip-card-b{position:absolute;left:0;width:100%;height:50%;overflow:hidden;display:flex;justify-content:center;background:#171522;color:rgba(255,255,255,.94);font-size:50px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.06em;border:1px solid rgba(255,255,255,.075);box-sizing:border-box}.flip-top,.flip-card-a{top:0;align-items:flex-end;border-radius:10px 10px 0 0;background:linear-gradient(180deg,#312d45 0%,#211e31 100%);transform-origin:bottom}.flip-bot,.flip-card-b{bottom:0;align-items:flex-start;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#171522 0%,#100f19 100%);transform-origin:top}.flip-top span,.flip-card-a span{transform:translateY(50%)}.flip-bot span,.flip-card-b span{transform:translateY(-50%)}.flip-digit::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.82);box-shadow:0 1px 0 rgba(255,255,255,.05);z-index:7}.flip-card-a,.flip-card-b{z-index:6;backface-visibility:hidden;-webkit-backface-visibility:hidden}.flip-card-a{display:none}.flip-card-b{display:none}.flip-digit.flipping-a .flip-card-a{display:flex;animation:flipTopDown .22s cubic-bezier(.4,0,.2,1) forwards}.flip-digit.flipping-b .flip-card-b{display:flex;animation:flipBottomIn .26s cubic-bezier(.2,.8,.2,1) .12s both}@keyframes flipTopDown{0%{transform:rotateX(0);filter:brightness(1.06)}100%{transform:rotateX(-90deg);filter:brightness(.62)}}@keyframes flipBottomIn{0%{transform:rotateX(90deg);filter:brightness(.55)}100%{transform:rotateX(0);filter:brightness(1)}}

/* ─────────────────────────────────────────────
   F.R.I.D.A.Y polish — Flip/Orbital controls + drag affordance
   Keeps legacy class names working and matches generated DOM classes.
───────────────────────────────────────────── */
#pan-pomo-flip .flip-btn-play {
  flex: 1;
  min-width: 0;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(var(--acc-rgb,232,201,154), .34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
    rgba(var(--acc-rgb,232,201,154), .13);
  color: rgba(255,255,255,.94);
  box-shadow:
    0 12px 28px rgba(var(--acc-rgb,232,201,154), .18),
    inset 0 1px 0 rgba(255,255,255,.22);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
#pan-pomo-flip .flip-btn-play:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--acc-rgb,232,201,154), .55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.06)),
    rgba(var(--acc-rgb,232,201,154), .22);
  box-shadow:
    0 16px 36px rgba(var(--acc-rgb,232,201,154), .24),
    inset 0 1px 0 rgba(255,255,255,.28);
}
#pan-pomo-flip .flip-btn-play:active {
  transform: translateY(0) scale(.985);
}
#pan-pomo-flip .flip-btn-play.paused {
  background: rgba(255,255,255,.105);
  color: rgba(255,255,255,.82);
  border-color: rgba(255,255,255,.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
#pan-pomo-flip .flip-btn-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.055);
  color: rgba(255,255,255,.55);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .14s ease, background .14s ease, color .14s ease, border-color .14s ease;
}
#pan-pomo-flip .flip-btn-icon:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.11);
  color: rgba(255,255,255,.92);
  border-color: rgba(var(--acc-rgb,232,201,154), .28);
}
#pan-pomo-flip .flip-drag-zone,
#pan-pomo-flip .flip-header {
  cursor: grab;
  touch-action: none;
}
#pan-pomo-flip.is-dragging .flip-drag-zone,
#pan-pomo-flip.is-dragging .flip-header {
  cursor: grabbing;
}

/* ─────────────────────────────────────────────
   F.R.I.D.A.Y final subtle vibe pass — keep old Flip layout
   Only tint digits/buttons lightly with current vibe color.
───────────────────────────────────────────── */
#pan-pomo-flip .flip-top,
#pan-pomo-flip .flip-bot,
#pan-pomo-flip .flip-card-a,
#pan-pomo-flip .flip-card-b {
  color: color-mix(in srgb, var(--tx, #fff) 86%, var(--acc, #e8c99a) 14%) !important;
  text-shadow:
    0 1px 14px rgba(0,0,0,.38),
    0 0 18px rgba(var(--acc-rgb,232,201,154), .16) !important;
  border-color: rgba(var(--acc-rgb,232,201,154), .16) !important;
}

#pan-pomo-flip .flip-top,
#pan-pomo-flip .flip-card-a {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, rgba(var(--acc-rgb,232,201,154), .20) 28%, #312d45 72%) 0%,
      color-mix(in srgb, rgba(var(--acc-rgb,232,201,154), .10) 18%, #211e31 82%) 100%) !important;
}

#pan-pomo-flip .flip-bot,
#pan-pomo-flip .flip-card-b {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, rgba(var(--acc-rgb,232,201,154), .11) 18%, #171522 82%) 0%,
      color-mix(in srgb, rgba(var(--acc-rgb,232,201,154), .07) 14%, #100f19 86%) 100%) !important;
}

#pan-pomo-flip .flip-colon-dot {
  background: var(--acc, #e8c99a) !important;
  box-shadow: 0 0 10px rgba(var(--acc-rgb,232,201,154), .58) !important;
}

#pan-pomo-flip .flip-btn-play {
  color: #0b0a10 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.08)),
    var(--acc, #e8c99a) !important;
  border-color: rgba(var(--acc-rgb,232,201,154), .42) !important;
  box-shadow:
    0 10px 24px rgba(var(--acc-rgb,232,201,154), .22),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
}

#pan-pomo-flip .flip-btn-play.paused {
  color: color-mix(in srgb, var(--tx, #fff) 82%, var(--acc, #e8c99a) 18%) !important;
  background: rgba(var(--acc-rgb,232,201,154), .13) !important;
}

/* ─────────────────────────────────────────────
   Flip digits — force same vibe color as Settings
   Removes old purple cast from flip number cards.
───────────────────────────────────────────── */
#pan-pomo-flip .flip-top,
#pan-pomo-flip .flip-bot,
#pan-pomo-flip .flip-card-a,
#pan-pomo-flip .flip-card-b {
  color: var(--acc, #e8c99a) !important;
  border-color: rgba(var(--acc-rgb, 232,201,154), .28) !important;
  text-shadow:
    0 1px 10px rgba(0,0,0,.45),
    0 0 22px rgba(var(--acc-rgb, 232,201,154), .30) !important;
}

#pan-pomo-flip .flip-top,
#pan-pomo-flip .flip-card-a {
  background:
    linear-gradient(180deg,
      rgba(var(--acc-rgb, 232,201,154), .18) 0%,
      rgba(var(--acc-rgb, 232,201,154), .08) 46%,
      rgba(18,17,25,.94) 100%) !important;
}

#pan-pomo-flip .flip-bot,
#pan-pomo-flip .flip-card-b {
  background:
    linear-gradient(180deg,
      rgba(14,14,20,.96) 0%,
      rgba(var(--acc-rgb, 232,201,154), .075) 100%) !important;
}

#pan-pomo-flip .flip-digit {
  filter:
    drop-shadow(0 12px 18px rgba(0,0,0,.38))
    drop-shadow(0 0 10px rgba(var(--acc-rgb, 232,201,154), .12)) !important;
}

@media (max-width: 600px) {
  .flip-digit { width: 42px; height: 68px; }
  .flip-top, .flip-bot { font-size: 40px; }
  .flip-digits { gap: 4px; padding: 10px 12px 12px; }
}



/* ═══════════════════════════════════════════════════════════
   pomo-ring-upgrade.css — ZenFlow Ring Style Upgrade
   - Gradient arc thay stroke đơn
   - Orbital glowing dot chạy theo arc
   - Pulse ring phía sau khi running
   - Số thời gian depth + glow
   - Session dots đẹp hơn
═══════════════════════════════════════════════════════════ */

/* ── Bọc timer-ring lại để có thêm lớp ── */
.timer-ring {
  position: relative;
  width: 148px !important;
  height: 148px !important;
  margin: 6px auto 8px !important;
}

/* ── SVG base ── */
.timer-ring svg {
  width: 100% !important;
  height: 100% !important;
  transform: rotate(-90deg);
  overflow: visible;
}

/* ── Background track ── */
.ring-bg {
  fill: none;
  stroke: rgba(255,255,255,.04);
  stroke-width: 3;
}

/* ── Gradient foreground arc ── */
.ring-fg {
  fill: none;
  stroke: url(#ringGradient);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 0 6px rgba(var(--acc-rgb,232,201,154),.5))
          drop-shadow(0 0 14px rgba(var(--acc-rgb,232,201,154),.25));
}

/* ── Inject SVG gradient + defs vào ring ── */
/* Gradient được inject bằng JS bên dưới — xem phần script */

/* ── Pulse ring khi running ── */
.timer-ring::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(var(--acc-rgb,232,201,154),.0);
  transition: all .4s ease;
  pointer-events: none;
}
.timer-ring.running::before {
  border-color: rgba(var(--acc-rgb,232,201,154),.14);
  box-shadow:
    0 0 0 4px rgba(var(--acc-rgb,232,201,154),.06),
    0 0 32px rgba(var(--acc-rgb,232,201,154),.08);
  animation: ringPulse 2.4s ease-in-out infinite;
}
@keyframes ringPulse {
  0%,100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.025); }
}

/* ── Orbital glowing dot ── */
.ring-orbital-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--acc, #e8c99a);
  box-shadow:
    0 0 6px var(--acc, #e8c99a),
    0 0 14px rgba(var(--acc-rgb,232,201,154),.5),
    0 0 28px rgba(var(--acc-rgb,232,201,154),.2);
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -5px;
  pointer-events: none;
  transition: transform .05s linear;
  z-index: 3;
}

/* ── Inner display ── */
.ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

#timer-display, #timer-display-c {
  font-size: 2.4rem !important;
  font-weight: 200 !important;
  letter-spacing: -.04em;
  line-height: 1;
  color: rgba(255,255,255,.97);
  text-shadow:
    0 2px 20px rgba(0,0,0,.4),
    0 0 40px rgba(var(--acc-rgb,232,201,154),.12);
  font-variant-numeric: tabular-nums;
}

#timer-sub, #timer-sub-c {
  font-size: .5rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.22);
}

/* ── Session dots bên dưới ring ── */
.pomo-session-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 12px;
}
.pomo-session-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid rgba(var(--acc-rgb,232,201,154),.2);
  background: transparent;
  transition: all .3s cubic-bezier(.34,1.56,.64,1);
}
.pomo-session-dot.done {
  background: var(--acc, #e8c99a);
  border-color: var(--acc, #e8c99a);
  box-shadow: 0 0 8px rgba(var(--acc-rgb,232,201,154),.55);
}
.pomo-session-dot.current {
  border-color: var(--acc, #e8c99a);
  background: rgba(var(--acc-rgb,232,201,154),.22);
  animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(var(--acc-rgb,232,201,154),.4); }
  50%      { box-shadow: 0 0 0 4px rgba(var(--acc-rgb,232,201,154),.0); }
}

/* ── Timer controls nâng cấp ── */
.timer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

/* btn-main vibe glow */
#pan-pomo .btn-main {
  padding: 8px 28px !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  border-radius: 999px !important;
  background: var(--acc, #e8c99a) !important;
  color: #08060f !important;
  border: none !important;
  box-shadow:
    0 8px 28px rgba(var(--acc-rgb,232,201,154),.3),
    inset 0 1px 0 rgba(255,255,255,.35) !important;
  transition: all .18s cubic-bezier(.34,1.56,.64,1) !important;
}
#pan-pomo .btn-main:hover {
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow:
    0 12px 36px rgba(var(--acc-rgb,232,201,154),.4),
    inset 0 1px 0 rgba(255,255,255,.4) !important;
}
#pan-pomo .btn-main:active {
  transform: translateY(0) scale(.98) !important;
}

#pan-pomo .btn-sm {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  color: rgba(255,255,255,.45) !important;
  font-size: .82rem !important;
  transition: all .16s cubic-bezier(.34,1.56,.64,1) !important;
}
#pan-pomo .btn-sm:hover {
  background: rgba(var(--acc-rgb,232,201,154),.12) !important;
  border-color: rgba(var(--acc-rgb,232,201,154),.28) !important;
  color: var(--acc, #e8c99a) !important;
  transform: scale(1.1) !important;
}

/* ── Mode tabs ── */
#pomo-mode-tabs {
  background: rgba(255,255,255,.04) !important;
  border-radius: 8px !important;
  padding: 2px !important;
  gap: 2px !important;
}
#pomo-mode-tabs .mt {
  border-radius: 6px !important;
  font-size: .62rem !important;
  font-weight: 600 !important;
  transition: all .15s ease !important;
}
#pomo-mode-tabs .mt.active {
  background: rgba(var(--acc-rgb,232,201,154),.15) !important;
  color: var(--acc, #e8c99a) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* ── Pan-pomo panel nâng cấp ── */
#pan-pomo {
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 30% 0%, rgba(var(--acc-rgb,232,201,154),.12), transparent 42%),
    rgba(8,7,20,.82) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(28px) saturate(1.2) !important;
  border: 1px solid rgba(var(--acc-rgb,232,201,154),.12) !important;
}

#pan-pomo .fp-header {
  border-bottom: 1px solid rgba(var(--acc-rgb,232,201,154),.07) !important;
  background: transparent !important;
}

/* ═══════════════════════════════════════════════════════════
   USER FEEDBACK CUSTOM OVERRIDES
═══════════════════════════════════════════════════════════ */

/* ── 1. Flip Header Layout & Digit Rounded Corners ── */
#pan-pomo-flip .flip-header,
#pan-pomo-flip .fp-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 44px !important;
  padding: 0 14px !important;
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid rgba(var(--acc-rgb,232,201,154),.08) !important;
}

#pan-pomo-flip .flip-drag-zone {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  margin-bottom: 0 !important;
}

#pan-pomo-flip .flip-session-row {
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

/* Round the corners of the flip card halves */
#pan-pomo-flip .flip-top,
#pan-pomo-flip .flip-card-a {
  border-radius: 12px 12px 0 0 !important;
}
#pan-pomo-flip .flip-bot,
#pan-pomo-flip .flip-card-b {
  border-radius: 0 0 12px 12px !important;
}


/* ── 2. Settings Panel Polish (Compact size + Input fields visible) ── */
#settings-panel {
  width: min(290px, calc(100vw - 20px)) !important; /* Make it more compact */
}

/* Fix input grid layout */
#settings-panel .set-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 0 !important;
  margin-bottom: 8px !important;
}

#settings-panel .set-lbl {
  font-size: 0.76rem !important;
  color: rgba(255,255,255,.6) !important;
}

#settings-panel .set-inp {
  width: 52px !important;
  padding: 6px 4px !important;
  text-align: center !important;
  font-size: 0.8rem !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  min-width: 0 !important;
}

/* Hide spin buttons inside inputs */
#settings-panel .set-inp::-webkit-outer-spin-button,
#settings-panel .set-inp::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
#settings-panel .set-inp {
  -moz-appearance: textfield !important;
}


/* ── 3. Moodist-style Ambience (Sounds) Redesign ── */
#pan-sounds .sound-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

#pan-sounds .sound-item {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 10px 4px 8px !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  min-height: 74px !important;
  height: auto !important;
  box-sizing: border-box !important;
}

#pan-sounds .sound-item:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-2px) !important;
}

/* Colorful gradients for different active sound categories */
#pan-sounds #sg-rain .sound-item.on {
  background: linear-gradient(135deg, #00c6ff, #0072ff) !important;
  box-shadow: 0 6px 14px rgba(0, 114, 255, 0.25) !important;
  border-color: transparent !important;
}
#pan-sounds #sg-nature .sound-item.on {
  background: linear-gradient(135deg, #11998e, #38ef7d) !important;
  box-shadow: 0 6px 14px rgba(56, 239, 125, 0.25) !important;
  border-color: transparent !important;
}
#pan-sounds #sg-indoor .sound-item.on {
  background: linear-gradient(135deg, #ff9966, #ff5e62) !important;
  box-shadow: 0 6px 14px rgba(255, 94, 98, 0.25) !important;
  border-color: transparent !important;
}
#pan-sounds #sg-noise .sound-item.on {
  background: linear-gradient(135deg, #da22ff, #9733ee) !important;
  box-shadow: 0 6px 14px rgba(151, 51, 238, 0.25) !important;
  border-color: transparent !important;
}

#pan-sounds .sound-item .si-ico {
  font-size: 1.45rem !important;
  margin-bottom: 4px !important;
  display: block !important;
  transition: transform 0.2s ease !important;
}
#pan-sounds .sound-item:hover .si-ico {
  transform: scale(1.15) !important;
}

#pan-sounds .sound-item .si-name {
  font-size: 0.54rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
  display: block !important;
}
#pan-sounds .sound-item.on .si-name {
  color: #ffffff !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

/* Inline thin sliders inside active sound cards */
#pan-sounds .sound-item .si-vol-wrap {
  display: none !important;
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  right: 8px !important;
  width: calc(100% - 16px) !important;
  align-items: center !important;
  gap: 6px !important;
}
#pan-sounds .sound-item.on .si-vol-wrap {
  display: flex !important;
}
#pan-sounds .sound-item .si-vol {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: 3px !important;
  flex: 1 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: rgba(255, 255, 255, 0.35) !important;
  border-radius: 999px !important;
  outline: none !important;
  cursor: pointer !important;
  margin-top: 0 !important;
}

#pan-sounds .sound-item .si-vol::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  cursor: pointer !important;
}
#pan-sounds .sound-item .si-vol::-moz-range-thumb {
  width: 7px !important;
  height: 7px !important;
  border: none !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  cursor: pointer !important;
}

/* Master Volume Row redesign */
#pan-sounds .master-row {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#pan-sounds .master-lbl {
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: rgba(255, 255, 255, 0.45) !important;
  font-weight: 600 !important;
}

#pan-sounds .master-row .vol-slider {
  flex: 1 !important;
  max-width: 140px !important;
  margin-bottom: 0 !important;
}