:root {
    --app-accent: #22d3ee;
    --app-accent-rgb: 34, 211, 238;
    --app-accent-contrast: #071014;
}

.text-cyan-400,
.text-cyan-500,
.hover\:text-cyan-400:hover {
    color: var(--app-accent) !important;
}

.text-cyan-400\/60,
.text-cyan-500\/60 {
    color: rgba(var(--app-accent-rgb), .6) !important;
}

.hover\:text-cyan-500\/40:hover {
    color: rgba(var(--app-accent-rgb), .4) !important;
}

.bg-cyan-400 {
    background-color: var(--app-accent) !important;
}

.bg-cyan-500\/10 {
    background-color: rgba(var(--app-accent-rgb), .1) !important;
}

.bg-cyan-500\/20,
.hover\:bg-cyan-500\/20:hover {
    background-color: rgba(var(--app-accent-rgb), .2) !important;
}

.hover\:bg-cyan-500\/30:hover {
    background-color: rgba(var(--app-accent-rgb), .3) !important;
}

.hover\:bg-cyan-50:hover {
    background-color: rgba(var(--app-accent-rgb), .13) !important;
}

.border-cyan-500\/10 {
    border-color: rgba(var(--app-accent-rgb), .1) !important;
}

.border-cyan-500\/20 {
    border-color: rgba(var(--app-accent-rgb), .2) !important;
}

.border-cyan-500\/30,
.hover\:border-cyan-500\/30:hover {
    border-color: rgba(var(--app-accent-rgb), .3) !important;
}

.hover\:border-cyan-500\/40:hover {
    border-color: rgba(var(--app-accent-rgb), .4) !important;
}

.focus\:border-cyan-500\/50:focus {
    border-color: rgba(var(--app-accent-rgb), .5) !important;
}

.app-appearance {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.premium-ball {
    border-color: rgba(var(--app-accent-rgb), .5);
    box-shadow: inset 0 0 60px rgba(var(--app-accent-rgb), .2);
}

.cyan-inner-ring {
    border-color: var(--app-accent);
    box-shadow: 0 0 40px rgba(var(--app-accent-rgb), 1),
        inset 0 0 30px rgba(var(--app-accent-rgb), .8);
}

.ball-glow {
    box-shadow: 0 0 100px -10px rgba(var(--app-accent-rgb), .6);
}

.text-cyan-bright {
    text-shadow: 0 0 20px rgba(var(--app-accent-rgb), 1),
        0 0 40px rgba(var(--app-accent-rgb), .8),
        0 0 60px rgba(var(--app-accent-rgb), .5);
}

.ball-letter-bright {
    text-shadow: 0 0 20px rgba(var(--app-accent-rgb), 1);
}

.poster-shine {
    background: radial-gradient(circle, rgba(255, 255, 255, .24) 0%, rgba(var(--app-accent-rgb), .13) 28%, transparent 70%);
}

.poster-open-btn,
.item-video-actions button {
    border-color: rgba(var(--app-accent-rgb), .35);
    background: rgba(var(--app-accent-rgb), .08);
}

.poster-open-btn:hover,
.poster-open-btn:focus-visible,
.item-video-actions button:hover,
.item-video-actions button:focus-visible {
    border-color: rgba(var(--app-accent-rgb), .8);
    background: rgba(var(--app-accent-rgb), .2);
}

.poster-title,
.host-claim-title-bingo,
.caller-row-letter,
.caller-cell.called,
.theme-library-kicker {
    color: var(--app-accent);
}

.poster-title {
    text-shadow: 0 0 15px rgba(var(--app-accent-rgb), .4);
}

.quote-mark {
    color: rgba(var(--app-accent-rgb), .4);
}

.quote-attribution {
    color: rgba(var(--app-accent-rgb), .6);
}

.history-chip:hover {
    border-color: rgba(var(--app-accent-rgb), .3);
}

.translate-toggle {
    border-color: rgba(var(--app-accent-rgb), .25);
    background: rgba(var(--app-accent-rgb), .08);
    color: rgba(var(--app-accent-rgb), .7);
}

.translate-toggle:hover {
    border-color: rgba(var(--app-accent-rgb), .5);
    background: rgba(var(--app-accent-rgb), .15);
    color: rgba(var(--app-accent-rgb), .9);
}

.host-claim-title-bingo {
    text-shadow: 0 0 40px rgba(var(--app-accent-rgb), .8),
        0 0 80px rgba(var(--app-accent-rgb), .5),
        0 0 120px rgba(var(--app-accent-rgb), .3),
        0 0 200px rgba(168, 85, 247, .2);
}

#caller-board {
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--app-accent-rgb), .06), transparent 60%), #050505;
}

.caller-row-letter {
    text-shadow: 0 0 20px rgba(var(--app-accent-rgb), .5);
}

.caller-cell.called {
    background: rgba(var(--app-accent-rgb), .15);
    border-color: rgba(var(--app-accent-rgb), .5);
    text-shadow: 0 0 12px rgba(var(--app-accent-rgb), .6);
}

.caller-cell.latest {
    background: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-accent-contrast);
    box-shadow: 0 0 30px rgba(var(--app-accent-rgb), .8), 0 0 60px rgba(var(--app-accent-rgb), .4);
}

@keyframes callerAccentPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(var(--app-accent-rgb), .8), 0 0 60px rgba(var(--app-accent-rgb), .4); }
    50% { transform: scale(1.08); box-shadow: 0 0 45px rgba(var(--app-accent-rgb), 1), 0 0 90px rgba(var(--app-accent-rgb), .6); }
}

.caller-cell.latest {
    animation-name: callerAccentPulse;
}

.theme-library-panel {
    border-color: rgba(var(--app-accent-rgb), .2);
    background: radial-gradient(circle at top, rgba(var(--app-accent-rgb), .08), transparent 45%), #111;
}

.theme-option {
    --theme-accent: var(--app-accent);
}

.print-pack-panel {
    border-color: rgba(var(--app-accent-rgb), .25);
    background: linear-gradient(115deg, rgba(var(--app-accent-rgb), .12), rgba(255, 255, 255, .03));
}

.print-pack-options button {
    border-color: rgba(var(--app-accent-rgb), .5);
    color: var(--app-accent-contrast);
    background: var(--app-accent);
}

.bingo-card {
    box-shadow: 0 0 60px rgba(var(--app-accent-rgb), .1);
}

.bingo-col-label,
.free-text,
.text-cyan,
.coverflow-item .item-number,
.ar-btn,
.ar-spinner,
.ar-loading-text {
    color: var(--app-accent);
}

.header-icon {
    background: rgba(var(--app-accent-rgb), .1);
    border-color: rgba(var(--app-accent-rgb), .2);
}

.header-dot {
    background: var(--app-accent);
}

.coverflow-item.active .item-card {
    box-shadow: 0 20px 80px rgba(var(--app-accent-rgb), .2), 0 10px 40px rgba(0, 0, 0, .8);
    border-color: rgba(var(--app-accent-rgb), .3);
}

.modal-close-btn:hover {
    border-color: rgba(var(--app-accent-rgb), .4);
}

.modal-attr {
    color: rgba(var(--app-accent-rgb), .6);
}

.ar-btn {
    border-color: rgba(var(--app-accent-rgb), .4);
    background: rgba(var(--app-accent-rgb), .1);
}

.ar-btn:hover {
    background: rgba(var(--app-accent-rgb), .25);
    border-color: rgba(var(--app-accent-rgb), .7);
    box-shadow: 0 0 12px rgba(var(--app-accent-rgb), .3);
}

.ar-modal-content {
    border-color: rgba(var(--app-accent-rgb), .2);
}

.ar-spinner {
    border-color: rgba(var(--app-accent-rgb), .15);
    border-top-color: var(--app-accent);
}

:root {
    --accent: var(--app-accent);
}