.option-countdown-backdrop { position: fixed; inset: 0; z-index: 2147483100; display: grid; place-items: center; overflow-y: auto; padding: 16px; background: #0009; backdrop-filter: blur(4px); }
.option-countdown-backdrop, .option-countdown-backdrop * { box-sizing: border-box; letter-spacing: 0; }
.option-countdown-dialog { position: relative; width: min(100%, 400px); max-height: calc(100dvh - 32px); overflow: auto; padding: 26px 24px 22px; border: 1px solid #303745; border-radius: 8px; background: #141822; color: #f5f6f9; font-family: inherit; text-align: center; box-shadow: 0 24px 80px #0006; }
.option-countdown-dialog button { font: inherit; cursor: pointer; }
.option-countdown-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #a9b2c1; }
.option-countdown-close:hover { background: #242a36; color: #fff; }
.option-countdown-close svg { width: 20px; height: 20px; }
.option-countdown-dialog :is(button, a):focus-visible { outline: 2px solid #8baeff; outline-offset: 3px; }
.option-countdown-dialog h2 { margin: 8px 24px 6px; color: #f5f6f9; font-size: 19px; line-height: 1.4; font-weight: 600; }
.option-countdown-status { min-height: 22px; margin: 0; color: #9da7b6; font-size: 13px; line-height: 22px; }
.option-countdown-ring { position: relative; width: 184px; height: 184px; margin: 22px auto; }
.option-countdown-ring > svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.option-countdown-track, .option-countdown-progress { fill: none; stroke-width: 6; }
.option-countdown-track { stroke: #2a303c; }
.option-countdown-progress { stroke: #729cff; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--countdown-offset, 0); }
.option-countdown-center { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.option-countdown-value { max-width: 100%; padding: 0 12px; color: #f5f6f9; font-size: 44px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.option-countdown-unit { color: #9da7b6; font-size: 13px; }
.option-countdown-dialog[data-phase="settling"] .option-countdown-progress { stroke-dasharray: 18 82; stroke-dashoffset: 0; animation: option-settlement-spin 1.6s linear infinite; transform-origin: center; }
.option-countdown-dialog[data-phase="settling"] .option-countdown-value { font-size: 22px; }
.option-countdown-dialog[data-phase="settled"] .option-countdown-value { font-size: 24px; }
.option-countdown-dialog[data-phase="settled"] .option-countdown-progress { stroke-dashoffset: 0; stroke: #7f8998; }
.option-countdown-dialog[data-result="win"] .option-countdown-progress { stroke: #00b464; }
.option-countdown-dialog[data-result="loss"] .option-countdown-progress { stroke: #f04848; }
.option-countdown-profit { margin: -8px 0 18px; color: #f5f6f9; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.option-countdown-profit[data-result="win"] { color: #00b464; }
.option-countdown-profit[data-result="loss"] { color: #f04848; }
.option-countdown-details { display: grid; gap: 12px; margin: 0; padding: 18px 0; border-top: 1px solid #2a303c; border-bottom: 1px solid #2a303c; font-size: 13px; }
.option-countdown-details > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; text-align: left; }
.option-countdown-details dt { flex-shrink: 0; color: #9da7b6; font-weight: 400; }
.option-countdown-details dd { min-width: 0; margin: 0; color: #f5f6f9; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.option-countdown-details dd[data-side="up"] { color: #00b464; }
.option-countdown-details dd[data-side="down"] { color: #f04848; }
.option-countdown-footer { display: flex; gap: 10px; margin-top: 20px; }
.option-countdown-footer button { flex: 1; min-width: 0; min-height: 42px; padding: 9px 12px; border: 1px solid #384253; border-radius: 6px; background: #232a37; color: #f5f6f9; font-size: 14px; }
.option-countdown-footer button:hover { background: #2d3646; }
.option-countdown-footer button:disabled { opacity: .6; cursor: wait; }
.option-countdown-footer [hidden], .option-countdown-dialog [hidden] { display: none; }
@keyframes option-settlement-spin { to { transform: rotate(360deg); } }
@media (max-width: 350px) { .option-countdown-dialog { padding: 24px 16px 18px; } .option-countdown-ring { width: 160px; height: 160px; margin: 18px auto; } }
@media (prefers-reduced-motion: reduce) { .option-countdown-dialog[data-phase="settling"] .option-countdown-progress { animation: none; } }

.option-countdown-art { position: absolute; inset: 0; pointer-events: none; }
.option-countdown-art > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.option-countdown-dialog:not([data-style="ring"]) .option-countdown-ring > svg { visibility: hidden; }
.option-countdown-dialog:not([data-style="ring"]) { --countdown-accent: #56cde3; }
.option-countdown-dialog[data-style="bar"] .option-countdown-ring,
.option-countdown-dialog[data-style="flip"] .option-countdown-ring,
.option-countdown-dialog[data-style="blocks"] .option-countdown-ring { width: 100%; height: 184px; }
.option-countdown-dialog[data-style="bar"] .option-countdown-center { bottom: 36px; }
.option-countdown-dialog[data-style="bar"] .option-countdown-value { font-size: 52px; font-weight: 500; }
.countdown-bar, .countdown-flip-progress { position: absolute; left: 0; right: 0; bottom: 20px; height: 8px; background: #2a303c; border-radius: 4px; overflow: hidden; }
.countdown-bar > span, .countdown-flip-progress > span { display: block; width: 100%; height: 100%; background: #56cde3; transform: scaleX(var(--countdown-remaining, 1)); transform-origin: left; }
.countdown-bar > span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, #ffffff80 50%, transparent 75%); animation: countdown-bar-light 2s ease-in-out infinite; }
.option-countdown-dialog[data-style="segments"] { --countdown-accent: #f1c76e; }
.option-countdown-dialog[data-style="segments"] .option-countdown-art rect { fill: #f1c76e; transition: fill .2s; }
.option-countdown-dialog[data-style="segments"] .option-countdown-art rect.is-complete { fill: #303541; }
.option-countdown-dialog[data-style="segments"] .option-countdown-art rect.is-current { fill: #fff0ca; }
.option-countdown-dialog[data-style="segments"] .option-countdown-value { font-family: ui-monospace, monospace; font-weight: 500; }
.countdown-flip-face { position: absolute; inset: 12px 28px 30px; display: grid; gap: 2px; perspective: 400px; }
.countdown-flip-face > span { border: 1px solid #3b414d; border-radius: 6px; background: #282d37; }
.countdown-flip-face::before, .countdown-flip-face::after { content: ""; position: absolute; width: 5px; height: 18px; top: calc(50% - 9px); border-radius: 2px; background: #75808f; z-index: 1; }
.countdown-flip-face::before { left: -2px; } .countdown-flip-face::after { right: -2px; }
.option-countdown-dialog[data-style="flip"] .option-countdown-center { inset: 12px 28px 30px; }
.option-countdown-dialog[data-style="flip"] .option-countdown-value { font-family: ui-monospace, monospace; font-size: 54px; text-shadow: 0 2px 3px #0008; }
.option-countdown-dialog[data-style="flip"][data-phase="counting"] .option-countdown-value[data-beat="odd"] { animation: countdown-flip-odd .38s ease-out; }
.option-countdown-dialog[data-style="flip"][data-phase="counting"] .option-countdown-value[data-beat="even"] { animation: countdown-flip-even .38s ease-out; }
.countdown-flip-progress { bottom: 9px; height: 3px; left: 28px; right: 28px; }
.countdown-flip-progress > span { background: #e1e5ec; }
.option-countdown-dialog[data-style="radar"] { --countdown-accent: #58d6ad; }
.countdown-radar-grid { fill: none; stroke: #58d6ad30; stroke-width: 1; }
.countdown-budget { fill: none; stroke: var(--countdown-accent); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--countdown-remaining, 1) * 100); }
.option-countdown-dialog[data-style="radar"] .countdown-budget { transform: rotate(-90deg); transform-origin: center; }
.countdown-radar-sweep { transform-origin: 92px 92px; animation: option-settlement-spin 4s linear infinite; }
.countdown-radar-sweep path:first-child { fill: #58d6ad1c; }
.countdown-radar-sweep path:last-child { stroke: #58d6ad; stroke-width: 1.5; }
.countdown-radar-point { fill: #58d6ad; animation: countdown-node-pulse 2s ease-in-out infinite; }
.option-countdown-dialog[data-style="radar"] .option-countdown-center,
.option-countdown-dialog[data-style="web3"] .option-countdown-center { inset: 40px; border-radius: 50%; background: #141822ed; }
.option-countdown-dialog[data-style="radar"] .option-countdown-value,
.option-countdown-dialog[data-style="web3"] .option-countdown-value { padding: 0 4px; font-size: 38px; }
.option-countdown-dialog[data-style="web3"] { --countdown-accent: #b4a1ff; }
.countdown-network-edge { fill: none; stroke: #b4a1ff40; stroke-width: 1; }
.countdown-network-flow { fill: none; stroke: #c1aaff; stroke-width: 2; stroke-dasharray: 8 92; animation: countdown-network-flow 3s linear infinite; }
.countdown-network-node { fill: #22202f; stroke: #b4a1ff; stroke-width: 1.5; animation: countdown-node-pulse 3s ease-in-out infinite; animation-delay: calc(var(--node) * -.5s); }
.option-countdown-dialog[data-style="blocks"] { --countdown-accent: #77b0ff; }
.option-countdown-dialog[data-style="blocks"] .option-countdown-center { bottom: 50px; }
.countdown-block-chain { position: absolute; bottom: 17px; inset-inline: 4px; display: flex; justify-content: space-between; gap: 12px; }
.countdown-block-chain > span { position: relative; flex: 1; max-width: 38px; color: #3a465b; }
.countdown-block-chain > span:not(:last-child)::after { content: ""; position: absolute; left: 100%; top: 50%; width: 16px; height: 1px; background: currentColor; }
.countdown-block-chain svg { display: block; width: 100%; fill: #1c2432; stroke: currentColor; stroke-width: 1.3; }
.countdown-block-chain .is-complete { color: #77b0ff; }
.countdown-block-chain .is-complete svg { fill: #77b0ff26; }
.countdown-block-chain .is-current { color: #a9c9ff; }
.countdown-block-chain .is-current svg { animation: countdown-node-pulse 1.6s ease-in-out infinite; }
.countdown-block-beam { position: absolute; left: 4px; right: 4px; bottom: 7px; height: 2px; background: #26334b; }
.countdown-block-beam::after { content: ""; display: block; width: 100%; height: 100%; transform: scaleX(var(--countdown-elapsed, 0)); transform-origin: left; background: #77b0ff; }
.option-countdown-dialog:not([data-style="ring"])[data-phase="settling"] .option-countdown-art { animation: countdown-settling-pulse 1.8s ease-in-out infinite; }
.option-countdown-dialog:not([data-style="ring"])[data-phase="settled"] .option-countdown-art { opacity: .45; }
.option-countdown-dialog[data-phase="settled"] .option-countdown-art *,
.option-countdown-dialog[data-phase="settled"] .option-countdown-art *::after { animation: none; }
.option-countdown-dialog:not([data-style="ring"]):not([data-phase="counting"]) .option-countdown-value { font-size: 22px; animation: none; }
.option-countdown-dialog[data-phase="settling"] :is(.countdown-bar, .countdown-flip-progress) > span { width: 30%; animation: countdown-bar-pending 1.6s ease-in-out infinite; }
.option-countdown-dialog[data-phase="settled"] :is(.countdown-bar, .countdown-flip-progress) > span { transform: none; }
@keyframes countdown-bar-pending { from { transform: translateX(-100%); } to { transform: translateX(333%); } }
@keyframes countdown-bar-light { from { translate: -100% 0; } to { translate: 100% 0; } }
@keyframes countdown-flip-odd { from { transform: perspective(300px) rotateX(-55deg); opacity: .4; } to { transform: perspective(300px) rotateX(0); opacity: 1; } }
@keyframes countdown-flip-even { from { transform: perspective(300px) rotateX(-55deg); opacity: .4; } to { transform: perspective(300px) rotateX(0); opacity: 1; } }
@keyframes countdown-node-pulse { 50% { opacity: .4; } }
@keyframes countdown-network-flow { to { stroke-dashoffset: -100; } }
@keyframes countdown-settling-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .option-countdown-dialog *, .option-countdown-dialog *::after { animation: none !important; transition: none !important; }
}