/* Utility / calculator tool layout */
.ut-form { display: flex; flex-direction: column; gap: 14px; max-width: 560px; }
.ut-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 575.98px) { .ut-form-row { grid-template-columns: 1fr; } }

.ut-result { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 22px; }

.ut-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 14px 16px; }
.ut-stat-label { font-size: .75rem; font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.ut-stat-value { font-size: 1.375rem; font-weight: 800; color: var(--color-text); line-height: 1.2; word-break: break-word; }
.ut-stat-help { font-size: .75rem; color: var(--color-text-muted); margin-top: 4px; }

.ut-stat-primary { color: #1D4ED8; }
.ut-stat-success { color: #15803D; }
.ut-stat-warning { color: #B45309; }
.ut-stat-info { color: #0369A1; }

.ut-help { font-size: .8125rem; color: var(--color-text-muted); margin: 0; }
.ut-help.text-success { color: #15803D; }
.ut-help.text-warning { color: #B45309; }
.ut-help.text-danger { color: #B91C1C; }

.ut-ua-code { display: block; padding: 10px 12px; background: #0F172A; color: #CBD5E1; border-radius: 8px; font-size: .75rem; word-break: break-all; white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace; }

.ut-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── 3D Coin Flip animation ─────────────────────────────────────── */
.coin-stage {
    perspective: 1000px;
    width: 160px;
    height: 160px;
    margin: 24px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.coin {
    position: relative;
    width: 140px;
    height: 140px;
    transform-style: preserve-3d;
    transition: transform 1.4s cubic-bezier(.5, .15, .25, 1);
    will-change: transform;
}
.coin-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: .04em;
    color: #4a2e00;
    box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .25), inset 0 8px 14px rgba(255, 255, 255, .4), 0 6px 16px rgba(0, 0, 0, .25);
}
.coin-face.coin-heads {
    background: radial-gradient(circle at 30% 30%, #FFE066, #F4A100 75%, #B47800 100%);
}
.coin-face.coin-tails {
    background: radial-gradient(circle at 30% 30%, #FFE066, #F4A100 75%, #B47800 100%);
    transform: rotateY(180deg);
}
.coin.is-flipping { transition-duration: 2s; }
.coin-result {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-top: 12px;
    min-height: 2rem;
}
.coin-result.is-active {
    animation: coin-pop .35s ease-out;
}
@keyframes coin-pop {
    0%   { transform: scale(.6); opacity: 0; }
    60%  { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* ── 3D Dice Roller animation ──────────────────────────────────── */
/* Strategy: at rest, the cube sits in an isometric tilt (rotateX(-22) rotateY(28))
   so THREE faces are visible at once (front + top + right). That's the secret
   to the cube reading as 3D - it never appears flat-on. Each face has shading
   tuned to its angle to the imagined light source so the cube looks like a
   solid lit object instead of paper. */
.dice-stage {
    perspective: 700px;
    perspective-origin: 50% 30%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 64px 16px 40px;
    min-height: 220px;
}
.die {
    width: 100px;
    height: 100px;
    position: relative;
    transform-style: preserve-3d;
    /* Isometric resting pose - visible from above-right at ~22°/28° angle. */
    transform: rotateX(-22deg) rotateY(28deg);
    transition: transform 1.6s cubic-bezier(.4, .12, .25, 1);
    will-change: transform;
    /* Soft cast shadow so the die feels grounded, not floating. */
    filter: drop-shadow(8px 16px 14px rgba(0, 0, 0, .35));
}

.die-face {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 2.75rem;
    color: #DC2626;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* FRONT face - directly facing camera, brightest. White with a red pip. */
.die-face.die-front {
    transform: translateZ(50px);
    background: linear-gradient(155deg, #FFFFFF 0%, #F1F5F9 100%);
    box-shadow:
        inset 0 -8px 14px rgba(15, 23, 42, .15),
        inset 0  4px  8px rgba(255, 255, 255, .9),
        inset 0 0 0 2px #475569;
}

/* TOP face - angled toward the imagined upper-left light, lighter gray. */
.die-face.die-top {
    transform: translateY(-50px) rotateX(90deg);
    background: linear-gradient(155deg, #F8FAFC 0%, #CBD5E1 100%);
    box-shadow:
        inset 0 -6px 12px rgba(15, 23, 42, .25),
        inset 0  4px  8px rgba(255, 255, 255, .8),
        inset 0 0 0 2px #475569;
    color: transparent; /* number only on front face for now */
}

/* RIGHT face - angled away from light, darkest of the three visible faces. */
.die-face.die-right {
    transform: translateX(50px) rotateY(90deg);
    background: linear-gradient(155deg, #94A3B8 0%, #64748B 100%);
    box-shadow:
        inset 0 -6px 12px rgba(15, 23, 42, .4),
        inset 0  4px  8px rgba(255, 255, 255, .35),
        inset 0 0 0 2px #475569;
    color: transparent;
}

/* Hidden faces (back / left / bottom) - visible only during rotation. */
.die-face.die-back {
    transform: translateZ(-50px) rotateY(180deg);
    background: linear-gradient(155deg, #FFFFFF 0%, #F1F5F9 100%);
    box-shadow:
        inset 0 -8px 14px rgba(15, 23, 42, .15),
        inset 0  4px  8px rgba(255, 255, 255, .9),
        inset 0 0 0 2px #475569;
}
.die-face.die-left {
    transform: translateX(-50px) rotateY(-90deg);
    background: linear-gradient(155deg, #94A3B8 0%, #64748B 100%);
    box-shadow:
        inset 0 -6px 12px rgba(15, 23, 42, .4),
        inset 0  4px  8px rgba(255, 255, 255, .35),
        inset 0 0 0 2px #475569;
    color: transparent;
}
.die-face.die-bottom {
    transform: translateY(50px) rotateX(-90deg);
    background: linear-gradient(155deg, #94A3B8 0%, #64748B 100%);
    box-shadow:
        inset 0 -6px 12px rgba(15, 23, 42, .4),
        inset 0  4px  8px rgba(255, 255, 255, .35),
        inset 0 0 0 2px #475569;
    color: transparent;
}

.die.is-rolling { transition-duration: 1.7s; }

.dice-total {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-top: 8px;
    min-height: 1.5rem;
}
.dice-total.is-active { animation: coin-pop .35s ease-out; }

/* ── Random Time Generator - split-flap / departure-board reels ──── */
/* Each tile is a small dark "panel" holding 4 digit reels and a blinking
   colon. Digits start amber while spinning (unlocked), turn sky-blue when
   they lock into the final value, and the whole tile becomes clickable
   to copy once every digit has settled. */
.time-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    padding: 8px 0;
}
.time-tile {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 12px 18px;
    background: linear-gradient(160deg, #1E293B 0%, #0B1220 100%);
    border-radius: 12px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        inset 0 -2px 6px rgba(0, 0, 0, .45),
        0 6px 14px rgba(0, 0, 0, .3);
    cursor: default;
    user-select: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.time-tile.is-settled { cursor: pointer; }
.time-tile.is-settled:hover { transform: translateY(-2px); }
.time-tile.is-copied {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .12),
        0 0 0 2px var(--color-primary),
        0 6px 14px rgba(0, 0, 0, .3);
}
.time-tile.is-copied::after {
    content: 'Copied';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    pointer-events: none;
    white-space: nowrap;
}
.time-digit {
    display: inline-block;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 1.875rem;
    font-weight: 800;
    color: #FBBF24;
    min-width: .7em;
    text-align: center;
    text-shadow: 0 0 10px rgba(251, 191, 36, .4);
    transition: color .25s ease, text-shadow .25s ease;
}
.time-digit.is-settled {
    color: #38BDF8;
    text-shadow: 0 0 10px rgba(56, 189, 248, .5);
    animation: time-digit-land .4s ease;
}
.time-colon {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 1.875rem;
    font-weight: 800;
    color: #94A3B8;
    padding: 0 4px;
    animation: time-colon-blink 1s step-end infinite;
}
@keyframes time-colon-blink { 50% { opacity: .35; } }
@keyframes time-digit-land {
    0%   { transform: translateY(-6px) scale(1.15); }
    60%  { transform: translateY(2px)  scale(.94); }
    100% { transform: translateY(0)    scale(1); }
}

/* ── Yes / No Decision Maker - Magic 8-Ball ──────────────────────── */
/* Black sphere with a white "8" window. On ask: the sphere shakes, the
   "8" fades, and a smaller blue ball scales up showing YES or NO with
   a slight rotation, evoking the icosahedron tumbling into view. */
.eight-ball-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 24px 16px;
}
.eight-ball {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, #6B7280 0%, #1F2937 40%, #030712 100%);
    box-shadow:
        inset 0 -25px 45px rgba(0, 0, 0, .85),
        inset 0  20px 30px rgba(255, 255, 255, .15),
        0 18px 32px rgba(0, 0, 0, .55);
    position: relative;
}
.eight-ball.is-shaking { animation: eight-ball-shake .25s linear infinite; }
@keyframes eight-ball-shake {
    0%, 100% { transform: translate(0, 0)       rotate(0deg); }
    20%      { transform: translate(-5px, 2px)  rotate(-2deg); }
    40%      { transform: translate(5px, -3px)  rotate(2deg); }
    60%      { transform: translate(-3px, 4px)  rotate(-1.5deg); }
    80%      { transform: translate(4px, -2px)  rotate(1deg); }
}
.eight-ball-window {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 32% 32%, #FFFFFF 0%, #E5E7EB 100%);
    box-shadow:
        inset 0 -5px 10px rgba(0, 0, 0, .25),
        inset 0  4px  6px rgba(255, 255, 255, .8);
    overflow: hidden;
}
.eight-ball-eight {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.5rem;
    font-weight: 900;
    color: #111827;
    line-height: 1;
    transition: opacity .3s ease;
}
.eight-ball-answer {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #3B82F6 0%, #1D4ED8 55%, #0F172A 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.25rem;
    text-align: center;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow:
        inset 0 -5px 10px rgba(0, 0, 0, .45),
        inset 0  3px  6px rgba(255, 255, 255, .25);
    transform: scale(0) rotate(-15deg);
    opacity: 0;
    transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .25s ease;
}
.eight-ball-answer.is-visible {
    transform: scale(1) rotate(0deg);
    opacity: 1;
}
.eight-ball-result {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary);
    min-height: 2.2rem;
}
.eight-ball-result.is-yes { color: #15803D; }
.eight-ball-result.is-no  { color: #B91C1C; }
.eight-ball-result.is-active { animation: coin-pop .35s ease-out; }

/* ── Random Word Generator - scramble-decode chips ────────────────── */
.scramble-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 4px 0; }
.scramble-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-weight: 700;
    color: #B45309;
    cursor: default;
    transition: color .25s ease, border-color .25s ease, transform .15s ease;
    user-select: none;
    white-space: nowrap;
}
.scramble-chip.is-settled {
    color: var(--color-primary);
    border-color: var(--color-primary);
    cursor: pointer;
}
.scramble-chip.is-settled:hover { transform: translateY(-2px); }
.scramble-chip.is-copied {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* ── Random Letter Generator - alphabet slot cards ───────────────── */
.letter-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 4px 0; }
.letter-card {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 64px;
    background: linear-gradient(160deg, #FEF3C7 0%, #FDE68A 100%);
    border: 1px solid #F59E0B;
    border-radius: 10px;
    font-family: Georgia, serif;
    font-size: 2rem;
    font-weight: 900;
    color: #92400E;
    box-shadow: 0 3px 8px rgba(146, 64, 14, .2), inset 0 -3px 0 rgba(146, 64, 14, .15);
    cursor: default;
    transition: transform .15s ease, box-shadow .15s ease;
    user-select: none;
}
.letter-card.is-settled {
    cursor: pointer;
    animation: letter-land .35s ease-out;
}
.letter-card.is-settled:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(146, 64, 14, .3), inset 0 -3px 0 rgba(146, 64, 14, .15);
}
.letter-card.is-copied {
    background: linear-gradient(160deg, var(--color-primary), var(--color-primary));
    color: #fff;
    border-color: var(--color-primary);
}
@keyframes letter-land {
    0%   { transform: translateY(-10px) scale(1.15); }
    60%  { transform: translateY(3px) scale(.95); }
    100% { transform: translateY(0) scale(1); }
}

/* ── Random Date Generator - calendar tiles ──────────────────────── */
.date-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; padding: 4px 0; }
.date-tile {
    width: 110px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    cursor: default;
    transform: translateY(-30px);
    opacity: 0;
    transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), opacity .3s ease, box-shadow .15s ease;
    user-select: none;
}
.date-tile.is-settled {
    transform: translateY(0);
    opacity: 1;
    cursor: pointer;
}
.date-tile.is-settled:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, .15);
}
.date-tile.is-copied {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
}
.date-tile-month {
    background: #DC2626;
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: 4px 0;
}
.date-tile-day {
    font-size: 2.25rem;
    font-weight: 900;
    color: var(--color-text);
    padding: 8px 0 2px;
    line-height: 1;
}
.date-tile-meta {
    font-size: .75rem;
    color: var(--color-text-muted);
    padding: 0 0 8px;
}

/* ── Random IP Generator - terminal rows ─────────────────────────── */
.ip-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #0F172A;
    border: 1px solid #1E293B;
    border-radius: 8px;
    padding: 10px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
}
.ip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 4px;
    color: #4ADE80;
    cursor: default;
    transition: background .15s ease;
    user-select: none;
}
.ip-row.is-settled { cursor: pointer; }
.ip-row.is-settled:hover { background: rgba(74, 222, 128, .1); }
.ip-row.is-copied { background: rgba(74, 222, 128, .25); color: #BBF7D0; }
.ip-prompt { color: #94A3B8; font-weight: 700; }
.ip-text { letter-spacing: .02em; }
.ip-text.is-settled { animation: ip-flash .4s ease; }
@keyframes ip-flash {
    0%   { color: #FBBF24; text-shadow: 0 0 8px rgba(251, 191, 36, .5); }
    100% { color: #4ADE80; text-shadow: 0 0 8px rgba(74, 222, 128, .3); }
}

/* ── Random Sentence - typewriter lines ──────────────────────────── */
.sentence-stack { display: flex; flex-direction: column; gap: 8px; }
.sentence-line {
    padding: 10px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: .9375rem;
    line-height: 1.55;
    color: var(--color-text);
    cursor: default;
    transition: border-color .15s ease, transform .15s ease;
    user-select: none;
}
.sentence-line.is-settled { cursor: pointer; }
.sentence-line.is-settled:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}
.sentence-line.is-copied {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.sentence-caret {
    display: inline-block;
    color: var(--color-primary);
    font-weight: 700;
    margin-left: 1px;
    animation: caret-blink 1s step-end infinite;
}
.sentence-caret.is-quiet { opacity: 0; }

/* ── Random Quote - typewriter quote card ────────────────────────── */
.quote-card {
    position: relative;
    max-width: 640px;
    margin: 8px auto;
    padding: 36px 24px 24px 60px;
    background: linear-gradient(160deg, #F0F9FF 0%, #E0F2FE 100%);
    border: 1px solid #BAE6FD;
    border-left: 4px solid #0284C7;
    border-radius: 12px;
    cursor: default;
    transition: transform .15s ease, box-shadow .15s ease;
    user-select: none;
}
.quote-card.is-settled { cursor: pointer; }
.quote-card.is-settled:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(2, 132, 199, .15);
}
.quote-card.is-copied {
    background: linear-gradient(160deg, var(--color-primary), var(--color-primary));
    color: #fff;
    border-color: var(--color-primary);
}
.quote-card.is-copied .quote-mark { color: rgba(255, 255, 255, .35); }
.quote-mark {
    position: absolute;
    top: 0;
    left: 16px;
    font-family: Georgia, serif;
    font-size: 4.5rem;
    font-weight: 900;
    color: rgba(2, 132, 199, .25);
    line-height: 1;
}
.quote-body {
    font-size: 1.0625rem;
    font-style: italic;
    line-height: 1.65;
    color: #0C4A6E;
    min-height: 1.65em;
}
.quote-card.is-copied .quote-body { color: #fff; }
.quote-caret {
    display: inline-block;
    color: #0284C7;
    font-weight: 700;
    margin-left: 1px;
    animation: caret-blink 1s step-end infinite;
}
.quote-card.is-copied .quote-caret { color: #fff; }
.quote-caret.is-quiet { opacity: 0; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* ── Lottery Number Generator - bouncing balls ───────────────────── */
.lottery-stage {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    padding: 16px 8px;
    min-height: 90px;
}
.lottery-ball {
    --ball-hue: 10;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 28%, hsl(var(--ball-hue), 95%, 88%) 0%, hsl(var(--ball-hue), 90%, 60%) 45%, hsl(var(--ball-hue), 80%, 38%) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Georgia, serif;
    font-size: 1.75rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    box-shadow:
        inset 0 -8px 14px rgba(0, 0, 0, .35),
        inset 0  6px 10px rgba(255, 255, 255, .45),
        0 8px 16px rgba(0, 0, 0, .25);
    cursor: default;
    transform: translateY(-200px) scale(.6);
    opacity: 0;
    transition: transform .15s ease, box-shadow .15s ease;
    user-select: none;
    position: relative;
}
.lottery-ball.is-settled {
    transform: translateY(0) scale(1);
    opacity: 1;
    cursor: pointer;
    animation: ball-drop .8s cubic-bezier(.34, 1.56, .64, 1);
}
.lottery-ball.is-settled:hover {
    transform: translateY(-4px) scale(1);
}
.lottery-ball.is-copied {
    box-shadow:
        inset 0 -8px 14px rgba(0, 0, 0, .35),
        inset 0  6px 10px rgba(255, 255, 255, .45),
        0 0 0 3px var(--color-primary),
        0 8px 16px rgba(0, 0, 0, .25);
}
@keyframes ball-drop {
    0%   { transform: translateY(-200px) scale(.55); opacity: 0; }
    50%  { transform: translateY(20px)   scale(1.1); opacity: 1; }
    70%  { transform: translateY(-10px)  scale(.95); }
    85%  { transform: translateY(5px)    scale(1.02); }
    100% { transform: translateY(0)      scale(1); opacity: 1; }
}

/* ── List Picker - roulette strip with center marker ─────────────── */
.picker-window {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 50%, #F8FAFC 100%);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: inset 0 2px 6px rgba(15, 23, 42, .08);
}
.picker-window::before,
.picker-window::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    pointer-events: none;
    z-index: 2;
}
.picker-window::before {
    top: 0;
    background: linear-gradient(180deg, rgba(248, 250, 252, .95) 0%, rgba(248, 250, 252, 0) 100%);
}
.picker-window::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(248, 250, 252, .95) 0%, rgba(248, 250, 252, 0) 100%);
}
.picker-strip {
    will-change: transform;
}
.picker-item {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 1px solid rgba(15, 23, 42, .04);
}
.picker-item.is-winner {
    color: var(--color-primary);
    font-weight: 800;
    font-size: 1.25rem;
}
.picker-marker {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 50px;
    border-top: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    background: rgba(29, 78, 216, .04);
    pointer-events: none;
    z-index: 1;
}
.picker-results {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
   WORLD CLOCK - ECharts world map + list view
═══════════════════════════════════════════════════════════════════ */
.wc-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.wc-controls .ut-help {
    margin: 0;
    flex: 1 1 240px;
    min-width: 0;
}
.wc-views { width: 100%; }

/* MAP - ECharts container */
.wc-echarts-frame {
    position: relative;
    width: 100%;
    background: linear-gradient(180deg, #0b1f3d 0%, #0e2a52 50%, #102e5c 100%);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .35);
    padding: 4px;
}
.wc-echarts {
    width: 100%;
    height: 480px;
}
@media (max-width: 768px) {
    .wc-echarts { height: 360px; }
}
@media (max-width: 480px) {
    .wc-echarts { height: 280px; }
}
.wc-map-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 0.875rem;
    background: rgba(11, 31, 61, 0.85);
    z-index: 2;
}

/* LIST */
.wc-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.wc-list-item {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
}
.wc-list-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text-muted, #64748b);
    margin-bottom: 4px;
}
.wc-list-time {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary, #4f46e5);
    font-family: ui-monospace, 'SF Mono', monospace;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.wc-list-date {
    font-size: 0.75rem;
    color: var(--color-text-muted, #64748b);
    margin-top: 2px;
}

/* Mobile: smaller pin tooltip */
@media (max-width: 640px) {
    .wc-pin-name { font-size: 9px; }
    .wc-pin-time { font-size: 11px; }
    .wc-pin-bg { stroke-width: 0.8; }
}