/* Shared pro refresh for timer and live-duration overlay designs. */
.timerDesignGrid,
.designGrid{
  grid-template-columns:repeat(auto-fit, minmax(184px, 1fr));
  gap:12px;
  align-items:stretch;
}

.timerDesignOption,
.designOption{
  position:relative;
  min-height:174px;
  grid-template-rows:minmax(116px, 1fr) auto;
  align-content:start;
  justify-items:stretch;
  gap:10px;
  padding:12px;
  overflow:hidden;
  border:1px solid rgba(137,154,180,.24);
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.018)),
    linear-gradient(135deg, rgba(56,189,248,.08), transparent 44%, rgba(34,197,94,.055)),
    rgba(7,12,20,.92);
  color:#edf6ff;
  box-shadow:
    0 16px 34px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.timerDesignOption::before,
.designOption::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 28%, transparent 72%, rgba(255,255,255,.08)) top/100% 1px no-repeat,
    linear-gradient(90deg, rgba(56,189,248,.22), transparent 36%, transparent 64%, rgba(34,197,94,.18)) bottom/100% 1px no-repeat;
  opacity:.72;
}

.timerDesignOption:hover,
.designOption:hover{
  transform:translateY(-1px);
  border-color:rgba(125,211,252,.54);
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    linear-gradient(135deg, rgba(125,211,252,.12), transparent 46%, rgba(74,222,128,.08)),
    rgba(8,14,24,.96);
  box-shadow:
    0 18px 38px rgba(0,0,0,.32),
    0 0 0 1px rgba(125,211,252,.12),
    inset 0 1px 0 rgba(255,255,255,.1);
}

.timerDesignOption.active,
.designOption.active{
  border-color:rgba(125,211,252,.76);
  background:
    linear-gradient(180deg, rgba(125,211,252,.16), rgba(255,255,255,.025)),
    linear-gradient(135deg, rgba(34,197,94,.11), transparent 42%, rgba(245,158,11,.08)),
    rgba(7,12,20,.98);
  box-shadow:
    0 0 0 1px rgba(125,211,252,.26),
    0 18px 40px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.11);
}

.timerDesignOption.active::after,
.designOption.active::after{
  content:"";
  position:absolute;
  top:10px;
  right:10px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#7dd3fc;
  box-shadow:0 0 16px rgba(125,211,252,.76);
}

.timerDesignMini,
.designMini{
  min-height:116px;
  padding:20px 18px 16px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 14px 24px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.1);
  font:900 20px Orbitron, Inter, sans-serif;
  letter-spacing:0;
}

.timerDesignMini span,
.designMini span{
  background:linear-gradient(90deg, var(--timer-accent-a, var(--design-accent-a)), #ffffff 46%, var(--timer-accent-b, var(--design-accent-b)));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size:clamp(22px, 1.8vw, 28px);
  line-height:1;
  -webkit-text-stroke:0;
  text-shadow:none;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.24));
}

.timerDesignMini small,
.designMini small{
  top:12px;
  color:rgba(237,246,255,.82);
  font:800 9px Inter, Arial, sans-serif;
  letter-spacing:0;
  text-transform:uppercase;
}

.timerDesignName,
.designOptionName{
  align-self:end;
  margin-top:0;
  color:#d9e7f7;
  font-size:11px;
  font-weight:900;
  letter-spacing:0;
  text-align:center;
}

.timerDesignFrame,
.timerOverlayPreview,
#timerBox{
  border:1px solid rgba(var(--timer-accent-a-rgb), .28);
  background-color:var(--timer-surface);
  background-image:
    linear-gradient(90deg, rgba(var(--timer-accent-a-rgb), .28), transparent 28%, transparent 72%, rgba(var(--timer-accent-b-rgb), .24)),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 40%, rgba(0,0,0,.42)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 18px),
    linear-gradient(var(--timer-bg), var(--timer-bg));
  box-shadow:
    0 0 0 1px rgba(var(--timer-accent-a-rgb), .2),
    0 20px 42px rgba(0,0,0,.38),
    0 0 30px rgba(var(--timer-accent-a-rgb), .2),
    0 0 46px rgba(var(--timer-accent-b-rgb), .16),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -22px 48px rgba(0,0,0,.48);
}

.durationDesign,
.durationPreview,
#durationBox{
  border:1px solid rgba(var(--design-accent-a-rgb), .28);
  background-color:var(--design-surface);
  background-image:
    linear-gradient(90deg, rgba(var(--design-accent-a-rgb), .28), transparent 28%, transparent 72%, rgba(var(--design-accent-b-rgb), .24)),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.02) 40%, rgba(0,0,0,.42)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 18px),
    linear-gradient(var(--duration-bg), var(--duration-bg));
  box-shadow:
    0 0 0 1px rgba(var(--design-accent-a-rgb), .2),
    0 20px 42px rgba(0,0,0,.38),
    0 0 30px rgba(var(--design-accent-a-rgb), .2),
    0 0 46px rgba(var(--design-accent-b-rgb), .16),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -22px 48px rgba(0,0,0,.48);
}

.timerDesignFrame::before,
.timerOverlayPreview::before,
#timerBox::before,
.durationDesign::before,
.durationPreview::before,
#durationBox::before{
  inset:8px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:inherit;
  clip-path:inherit;
  background:
    linear-gradient(90deg, rgba(255,255,255,.28), transparent 22%, transparent 78%, rgba(255,255,255,.18)) top/100% 1px no-repeat,
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 26%, transparent 74%, rgba(255,255,255,.11)) bottom/100% 1px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 34%, rgba(0,0,0,.18));
}

.timerDesignFrame::after,
.timerOverlayPreview::after,
#timerBox::after,
.durationDesign::after,
.durationPreview::after,
#durationBox::after{
  inset:0;
  height:auto;
  opacity:.72;
  mix-blend-mode:screen;
}

.timerOverlayPreview .timerPreviewContent,
#liveText,
#timer,
.durationPreview .previewContent,
#durationBox .content{
  z-index:3;
}

.timerPreviewClock,
#timer,
.previewTimer,
#duration{
  font-variant-numeric:tabular-nums;
}

.timer-design-prism,
#timerBox.timer-design-prism{
  clip-path:polygon(4% 0, 96% 0, 100% 24%, 100% 76%, 96% 100%, 4% 100%, 0 76%, 0 24%);
  border-radius:min(var(--timer-radius), 18px);
}

.timer-design-forge,
#timerBox.timer-design-forge{
  clip-path:polygon(0 18%, 9% 18%, 12% 0, 88% 0, 91% 18%, 100% 18%, 100% 82%, 91% 82%, 88% 100%, 12% 100%, 9% 82%, 0 82%);
  border-radius:min(var(--timer-radius), 14px);
}

.timer-design-halo,
#timerBox.timer-design-halo{
  clip-path:none;
  border-radius:999px;
}

.timer-design-matrix,
#timerBox.timer-design-matrix,
.timer-design-circuit,
#timerBox.timer-design-circuit{
  clip-path:polygon(0 0, 86% 0, 86% 12%, 100% 12%, 100% 100%, 14% 100%, 14% 88%, 0 88%);
  border-radius:min(var(--timer-radius), 10px);
}

.timer-design-royal,
#timerBox.timer-design-royal{
  clip-path:polygon(0 16%, 15% 16%, 20% 0, 80% 0, 85% 16%, 100% 16%, 96% 100%, 4% 100%);
  border-radius:min(var(--timer-radius), 18px);
}

.timer-design-ice,
#timerBox.timer-design-ice,
.timer-design-diamond,
#timerBox.timer-design-diamond{
  clip-path:polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  border-radius:min(var(--timer-radius), 14px);
}

.timer-design-solar,
#timerBox.timer-design-solar,
.timer-design-eclipse,
#timerBox.timer-design-eclipse{
  clip-path:polygon(7% 0, 93% 0, 100% 50%, 93% 100%, 7% 100%, 0 50%);
  border-radius:min(var(--timer-radius), 24px);
}

.timer-design-stealth,
#timerBox.timer-design-stealth,
.timer-design-velocity,
#timerBox.timer-design-velocity{
  clip-path:polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  border-radius:min(var(--timer-radius), 12px);
}

.timer-design-arcade,
#timerBox.timer-design-arcade{
  clip-path:polygon(0 0, 100% 0, 100% 74%, 94% 74%, 94% 100%, 6% 100%, 6% 74%, 0 74%);
  border-radius:min(var(--timer-radius), 16px);
}

.timer-design-rift,
#timerBox.timer-design-rift{
  clip-path:polygon(0 0, 45% 0, 50% 13%, 100% 13%, 100% 100%, 55% 100%, 50% 87%, 0 87%);
  border-radius:min(var(--timer-radius), 12px);
}

.timer-design-chrome,
#timerBox.timer-design-chrome,
.timer-design-nebula,
#timerBox.timer-design-nebula{
  clip-path:polygon(5% 8%, 16% 0, 84% 0, 95% 8%, 100% 50%, 95% 92%, 84% 100%, 16% 100%, 5% 92%, 0 50%);
  border-radius:min(var(--timer-radius), 26px);
}

.timer-design-forge::before,
#timerBox.timer-design-forge::before,
.timer-design-velocity::before,
#timerBox.timer-design-velocity::before{
  background:
    repeating-linear-gradient(112deg, transparent 0 20px, rgba(var(--timer-accent-a-rgb), .18) 20px 27px, transparent 27px 48px),
    linear-gradient(90deg, rgba(var(--timer-accent-a-rgb), .64), transparent 28%, transparent 72%, rgba(var(--timer-accent-b-rgb), .6)) bottom/100% 3px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 42%, rgba(0,0,0,.2));
}

.timer-design-halo::before,
#timerBox.timer-design-halo::before,
.timer-design-chrome::before,
#timerBox.timer-design-chrome::before{
  inset:7px;
  background:
    linear-gradient(90deg, rgba(var(--timer-accent-a-rgb), .3), transparent 30%, transparent 70%, rgba(var(--timer-accent-b-rgb), .3)) center/100% 2px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.1), transparent 40%, rgba(0,0,0,.16));
}

.timer-design-matrix::before,
#timerBox.timer-design-matrix::before,
.timer-design-circuit::before,
#timerBox.timer-design-circuit::before{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 19px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, transparent 1px 16px),
    linear-gradient(90deg, rgba(var(--timer-accent-a-rgb), .48), transparent 30%, transparent 70%, rgba(var(--timer-accent-b-rgb), .48)) top/100% 3px no-repeat;
}

.timer-design-royal::before,
#timerBox.timer-design-royal::before,
.timer-design-diamond::before,
#timerBox.timer-design-diamond::before,
.timer-design-ice::before,
#timerBox.timer-design-ice::before{
  background:
    linear-gradient(125deg, transparent 0 28%, rgba(255,255,255,.16) 29% 38%, transparent 39%),
    linear-gradient(90deg, rgba(var(--timer-accent-a-rgb), .55), transparent 26%, transparent 74%, rgba(var(--timer-accent-b-rgb), .52)) top/100% 3px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%, rgba(0,0,0,.18));
}

.timer-design-solar::before,
#timerBox.timer-design-solar::before,
.timer-design-eclipse::before,
#timerBox.timer-design-eclipse::before,
.timer-design-nebula::before,
#timerBox.timer-design-nebula::before,
.timer-design-rift::before,
#timerBox.timer-design-rift::before,
.timer-design-arcade::before,
#timerBox.timer-design-arcade::before{
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(var(--timer-accent-a-rgb), .2) 19% 27%, transparent 28% 70%, rgba(var(--timer-accent-b-rgb), .18) 71% 79%, transparent 80%),
    linear-gradient(90deg, rgba(var(--timer-accent-a-rgb), .5), transparent 30%, transparent 70%, rgba(var(--timer-accent-b-rgb), .5)) bottom/100% 3px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 40%, rgba(0,0,0,.2));
}

.timer-design-stealth,
#timerBox.timer-design-stealth{
  box-shadow:
    0 16px 34px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.08),
    0 0 22px rgba(var(--timer-accent-a-rgb), .12),
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -20px 40px rgba(0,0,0,.54);
}

.timer-fx-none::after,
#timerBox.timer-fx-none::after{
  display:none;
}

.timer-fx-sweep::after,
#timerBox.timer-fx-sweep::after{
  top:-40%;
  bottom:-40%;
  left:-34%;
  width:26%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), rgba(var(--timer-accent-a-rgb), .24), transparent);
  transform:skewX(-16deg);
  animation:proTimerSweep 4.2s cubic-bezier(.45,0,.2,1) infinite;
}

.timer-fx-scan::after,
#timerBox.timer-fx-scan::after{
  background:
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(255,255,255,.07) 10px 11px, transparent 11px 20px),
    linear-gradient(180deg, transparent, rgba(var(--timer-accent-a-rgb), .08), transparent);
  animation:proTimerScan 3.2s linear infinite;
}

.timer-fx-pulse,
#timerBox.timer-fx-pulse{
  animation:proTimerPulse 3.6s ease-in-out infinite;
}

.timer-fx-glint::after,
#timerBox.timer-fx-glint::after{
  background:linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.24) 45%, rgba(var(--timer-accent-b-rgb), .16) 50%, transparent 62%);
  background-size:220% 100%;
  animation:proTimerGlint 4.8s ease-in-out infinite;
}

.timer-fx-orbit::after,
#timerBox.timer-fx-orbit::after{
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(var(--timer-accent-a-rgb), .5) 10%, transparent 16%, transparent 84%, rgba(var(--timer-accent-b-rgb), .46) 90%, transparent 96%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.06), transparent);
  animation:proTimerTrace 4.8s ease-in-out infinite;
}

.timer-fx-flicker::after,
#timerBox.timer-fx-flicker::after{
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,255,255,.1) 18px 19px, transparent 19px 42px),
    linear-gradient(90deg, rgba(var(--timer-accent-a-rgb), .08), transparent 46%, rgba(var(--timer-accent-b-rgb), .08));
  animation:proTimerFlicker 2.1s steps(2, end) infinite;
}

.timer-fx-bars::after,
#timerBox.timer-fx-bars::after{
  background:repeating-linear-gradient(112deg, transparent 0 24px, rgba(var(--timer-accent-a-rgb), .16) 24px 30px, transparent 30px 54px, rgba(var(--timer-accent-b-rgb), .13) 54px 60px, transparent 60px 86px);
  animation:proTimerBars 4s linear infinite;
}

.timer-fx-energy::after,
#timerBox.timer-fx-energy::after{
  background:
    conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(var(--timer-accent-a-rgb), .18) 70deg, transparent 130deg, rgba(var(--timer-accent-b-rgb), .16) 230deg, transparent 320deg),
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 50%, rgba(255,255,255,.04));
  animation:proTimerEnergy 7s linear infinite;
}

.design-classic,
#durationBox.design-classic{
  clip-path:none;
  border-radius:var(--overlay-radius);
}

.design-armored,
#durationBox.design-armored{
  clip-path:polygon(0 18%, 9% 18%, 12% 0, 88% 0, 91% 18%, 100% 18%, 100% 82%, 91% 82%, 88% 100%, 12% 100%, 9% 82%, 0 82%);
  border-radius:min(var(--overlay-radius), 14px);
}

.design-hex,
#durationBox.design-hex,
.design-crystal,
#durationBox.design-crystal{
  clip-path:polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  border-radius:min(var(--overlay-radius), 14px);
}

.design-pill,
#durationBox.design-pill,
.design-orbital,
#durationBox.design-orbital{
  clip-path:none;
  border-radius:999px;
}

.design-bolt,
#durationBox.design-bolt,
.design-turbo,
#durationBox.design-turbo{
  clip-path:polygon(0 10%, 84% 10%, 90% 0, 100% 50%, 90% 100%, 84% 90%, 0 90%, 8% 50%);
  border-radius:min(var(--overlay-radius), 14px);
}

.design-slant,
#durationBox.design-slant{
  clip-path:polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  border-radius:min(var(--overlay-radius), 12px);
}

.design-brush,
#durationBox.design-brush,
.design-plasma,
#durationBox.design-plasma{
  clip-path:polygon(3% 10%, 18% 0, 82% 0, 96% 12%, 100% 50%, 96% 88%, 82% 100%, 18% 100%, 3% 90%, 0 50%);
  border-radius:min(var(--overlay-radius), 24px);
}

.design-nova,
#durationBox.design-nova{
  clip-path:polygon(4% 0, 96% 0, 100% 28%, 96% 100%, 4% 100%, 0 72%);
  border-radius:min(var(--overlay-radius), 16px);
}

.design-luxe,
#durationBox.design-luxe{
  clip-path:polygon(0 16%, 32% 16%, 38% 0, 62% 0, 68% 16%, 100% 16%, 96% 100%, 4% 100%);
  border-radius:min(var(--overlay-radius), 20px);
}

.design-circuit,
#durationBox.design-circuit{
  clip-path:polygon(0 0, 84% 0, 84% 12%, 100% 12%, 100% 100%, 16% 100%, 16% 88%, 0 88%);
  border-radius:min(var(--overlay-radius), 10px);
}

.design-hex::before,
#durationBox.design-hex::before,
.design-crystal::before,
#durationBox.design-crystal::before,
.design-luxe::before,
#durationBox.design-luxe::before{
  background:
    linear-gradient(125deg, transparent 0 28%, rgba(255,255,255,.16) 29% 38%, transparent 39%),
    linear-gradient(90deg, rgba(var(--design-accent-a-rgb), .54), transparent 26%, transparent 74%, rgba(var(--design-accent-b-rgb), .52)) top/100% 3px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%, rgba(0,0,0,.18));
}

.design-slant::before,
#durationBox.design-slant::before,
.design-turbo::before,
#durationBox.design-turbo::before,
.design-bolt::before,
#durationBox.design-bolt::before{
  background:
    repeating-linear-gradient(112deg, transparent 0 22px, rgba(var(--design-accent-a-rgb), .17) 22px 29px, transparent 29px 52px),
    linear-gradient(90deg, rgba(var(--design-accent-a-rgb), .56), transparent 30%, transparent 70%, rgba(var(--design-accent-b-rgb), .52)) bottom/100% 3px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 42%, rgba(0,0,0,.2));
}

.design-brush::before,
#durationBox.design-brush::before,
.design-plasma::before,
#durationBox.design-plasma::before,
.design-nova::before,
#durationBox.design-nova::before,
.design-armored::before,
#durationBox.design-armored::before{
  background:
    linear-gradient(110deg, transparent 0 18%, rgba(var(--design-accent-a-rgb), .2) 19% 27%, transparent 28% 70%, rgba(var(--design-accent-b-rgb), .18) 71% 79%, transparent 80%),
    linear-gradient(90deg, rgba(var(--design-accent-a-rgb), .5), transparent 30%, transparent 70%, rgba(var(--design-accent-b-rgb), .5)) bottom/100% 3px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 40%, rgba(0,0,0,.2));
}

.design-circuit::before,
#durationBox.design-circuit::before{
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.09) 0 1px, transparent 1px 19px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, transparent 1px 16px),
    linear-gradient(90deg, rgba(var(--design-accent-a-rgb), .48), transparent 30%, transparent 70%, rgba(var(--design-accent-b-rgb), .48)) top/100% 3px no-repeat;
}

.design-pill::before,
#durationBox.design-pill::before,
.design-orbital::before,
#durationBox.design-orbital::before{
  inset:7px;
  background:
    linear-gradient(90deg, rgba(var(--design-accent-a-rgb), .3), transparent 30%, transparent 70%, rgba(var(--design-accent-b-rgb), .3)) center/100% 2px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.1), transparent 40%, rgba(0,0,0,.16));
}

.duration-fx-none::after,
#durationBox.duration-fx-none::after{
  display:none;
}

.duration-fx-sweep::after,
#durationBox.duration-fx-sweep::after{
  top:-40%;
  bottom:-40%;
  left:-34%;
  width:26%;
  height:auto;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.48), rgba(var(--design-accent-a-rgb), .24), transparent);
  transform:skewX(-16deg);
  animation:proDurationSweep 4.2s cubic-bezier(.45,0,.2,1) infinite;
}

.duration-fx-scan::after,
#durationBox.duration-fx-scan::after{
  inset:0;
  height:auto;
  background:
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(255,255,255,.07) 10px 11px, transparent 11px 20px),
    linear-gradient(180deg, transparent, rgba(var(--design-accent-a-rgb), .08), transparent);
  animation:proDurationScan 3.2s linear infinite;
}

.duration-fx-pulse,
#durationBox.duration-fx-pulse{
  animation:proDurationPulse 3.6s ease-in-out infinite;
}

.duration-fx-glint::after,
#durationBox.duration-fx-glint::after{
  inset:0;
  height:auto;
  background:linear-gradient(115deg, transparent 0 34%, rgba(255,255,255,.24) 45%, rgba(var(--design-accent-b-rgb), .16) 50%, transparent 62%);
  background-size:220% 100%;
  animation:proDurationGlint 4.8s ease-in-out infinite;
}

.duration-fx-orbit::after,
#durationBox.duration-fx-orbit::after{
  inset:0;
  height:auto;
  background:
    linear-gradient(90deg, transparent 0 8%, rgba(var(--design-accent-a-rgb), .48) 10%, transparent 16%, transparent 84%, rgba(var(--design-accent-b-rgb), .44) 90%, transparent 96%),
    linear-gradient(180deg, transparent, rgba(255,255,255,.06), transparent);
  animation:proDurationTrace 4.8s ease-in-out infinite;
}

.duration-fx-rays::after,
#durationBox.duration-fx-rays::after{
  inset:0;
  height:auto;
  background:
    conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(var(--design-accent-a-rgb), .16) 70deg, transparent 130deg, rgba(var(--design-accent-b-rgb), .14) 230deg, transparent 320deg),
    linear-gradient(90deg, rgba(255,255,255,.05), transparent 50%, rgba(255,255,255,.04));
  animation:proDurationEnergy 7s linear infinite;
}

@keyframes proTimerSweep{
  0%{transform:translateX(-80%) skewX(-16deg);}
  55%,100%{transform:translateX(520%) skewX(-16deg);}
}

@keyframes proTimerScan{
  0%{background-position:0 -48px, 0 0;}
  100%{background-position:0 48px, 0 0;}
}

@keyframes proTimerPulse{
  0%,100%{filter:saturate(1) brightness(1);}
  50%{filter:saturate(1.12) brightness(1.06);}
}

@keyframes proTimerGlint{
  0%,100%{background-position:160% 0;}
  50%{background-position:-30% 0;}
}

@keyframes proTimerTrace{
  0%,100%{transform:translateX(-2%); opacity:.42;}
  50%{transform:translateX(2%); opacity:.78;}
}

@keyframes proTimerFlicker{
  0%,100%{opacity:.28;}
  50%{opacity:.62;}
}

@keyframes proTimerBars{
  0%{background-position:-140px 0;}
  100%{background-position:140px 0;}
}

@keyframes proTimerEnergy{
  0%{transform:rotate(0deg) scale(1.08);}
  100%{transform:rotate(360deg) scale(1.08);}
}

@keyframes proDurationSweep{
  0%{transform:translateX(-80%) skewX(-16deg);}
  55%,100%{transform:translateX(520%) skewX(-16deg);}
}

@keyframes proDurationScan{
  0%{background-position:0 -48px, 0 0;}
  100%{background-position:0 48px, 0 0;}
}

@keyframes proDurationPulse{
  0%,100%{filter:saturate(1) brightness(1);}
  50%{filter:saturate(1.12) brightness(1.06);}
}

@keyframes proDurationGlint{
  0%,100%{background-position:160% 0;}
  50%{background-position:-30% 0;}
}

@keyframes proDurationTrace{
  0%,100%{transform:translateX(-2%); opacity:.42;}
  50%{transform:translateX(2%); opacity:.78;}
}

@keyframes proDurationEnergy{
  0%{transform:rotate(0deg) scale(1.08);}
  100%{transform:rotate(360deg) scale(1.08);}
}

@media (max-width:760px){
  .timerDesignGrid,
  .designGrid{
    grid-template-columns:1fr;
  }

  .timerDesignOption,
  .designOption{
    min-height:160px;
  }
}

.timerOverlayPreview.timer-transparent-bg,
#timerBox.timer-transparent-bg,
.durationPreview.duration-transparent-bg,
#durationBox.duration-transparent-bg{
  border:0 !important;
  outline:0 !important;
  clip-path:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  animation:none !important;
}

.timerOverlayPreview.timer-transparent-bg::before,
.timerOverlayPreview.timer-transparent-bg::after,
#timerBox.timer-transparent-bg::before,
#timerBox.timer-transparent-bg::after,
.durationPreview.duration-transparent-bg::before,
.durationPreview.duration-transparent-bg::after,
#durationBox.duration-transparent-bg::before,
#durationBox.duration-transparent-bg::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  background:none !important;
  box-shadow:none !important;
  animation:none !important;
}

.timerOverlayPreview.timer-transparent-bg img,
#timerBox.timer-transparent-bg #bgImage,
.durationPreview.duration-transparent-bg img,
#durationBox.duration-transparent-bg #bgImage{
  opacity:0 !important;
  visibility:hidden !important;
  filter:none !important;
}