/**
 * JUICER V2 utilities — replaces inline style="" on views.
 * Dynamic values: only CSS custom properties on .v2-var-* elements.
 */

/* Layout widths */
.v2-max-760 { max-width: 760px; margin-left: auto; margin-right: auto; }
.v2-max-800 { max-width: 800px; margin-left: auto; margin-right: auto; }
.v2-max-900 { max-width: 900px; margin-left: auto; margin-right: auto; }
.v2-max-980 { max-width: 980px; margin-left: auto; margin-right: auto; }
.v2-max-1000 { max-width: 1000px; margin-left: auto; margin-right: auto; }
.v2-max-1050 { max-width: 1050px; margin-left: auto; margin-right: auto; }
.v2-max-1080 { max-width: 1080px; margin-left: auto; margin-right: auto; }
.v2-max-1100 { max-width: 1100px; margin-left: auto; margin-right: auto; }
.v2-max-1320 { max-width: 1320px; margin-left: auto; margin-right: auto; }
.v2-max-1700 { max-width: 1700px; margin-left: auto; margin-right: auto; }
.v2-w-full { width: 100%; }
.v2-w-90 { width: 90px; }
.v2-w-80 { width: 80px; max-width: 80px; }
.v2-w-450 { max-width: 450px; }
.v2-h-700 { max-height: 700px; }
.v2-h-80-scroll { max-height: 80px; overflow-y: auto; }
.v2-modal-body-scroll { max-height: 75vh; overflow-y: auto; }

/* Letter-spacing / typography */
.v2-ls-1 { letter-spacing: 0.06em; }
.v2-ls-2 { letter-spacing: 0.12em; }
.v2-ls-3 { letter-spacing: 0.18em; }
.v2-ls-4 { letter-spacing: 0.22em; }
.v2-ls-5 { letter-spacing: 0.28em; }
.v2-ls-wide { letter-spacing: 0.2em; }
.v2-fs-62 { font-size: 0.62rem; }
.v2-fs-65 { font-size: 0.65rem; }
.v2-fs-70 { font-size: 0.7rem; }
.v2-fs-72 { font-size: 0.72rem; }
.v2-fs-75 { font-size: 0.75rem; }
.v2-fs-78 { font-size: 0.78rem; }
.v2-fs-82 { font-size: 0.82rem; }
.v2-fs-85 { font-size: 0.85rem; }
.v2-fs-90 { font-size: 0.9rem; }
.v2-fs-92 { font-size: 0.92rem; }
.v2-fs-95 { font-size: 0.95rem; }
.v2-fs-105 { font-size: 1.05rem; }
.v2-fs-108 { font-size: 1.08rem; }
.v2-fs-110 { font-size: 1.1rem; }
.v2-fs-130 { font-size: 1.3rem; }
.v2-fs-160 { font-size: 1.6rem; }
.v2-fs-190 { font-size: 1.9rem; }
.v2-lh-tight { line-height: 1.1; }
.v2-title-glow { text-shadow: 0 0 15px var(--accent-glow); }
.v2-icon-glow { text-shadow: 0 0 10px var(--accent-glow); }
.v2-icon-glow-lg { text-shadow: 0 0 20px var(--accent-glow); }

/* Position / z-index */
.v2-z-front { position: relative; z-index: 2; }
.v2-z-content { position: relative; z-index: 10; }
.v2-cursor-pointer { cursor: pointer; }

/* Borders / cards */
.v2-border-top-accent { border-top: 4px solid var(--v2-accent, #fbbf24) !important; }
.v2-border-top-twitch { border-top: 4px solid #9146ff !important; }
.v2-border-top-discord { border-top: 4px solid #5865f2 !important; }
.v2-rounded-16 { border-radius: 16px; }
.v2-rounded-12 { border-radius: 12px; }
.v2-rounded-6 { border-radius: 6px; }
.v2-rounded-4 { border-radius: 4px; }
.v2-pill-muted {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--v2-accent, #fbbf24);
    color: var(--v2-accent, #fbbf24);
}

/* Brand colors */
.v2-text-twitch { color: #9146ff !important; }
.v2-text-discord { color: #5865f2 !important; }
.v2-bg-twitch { background-color: #9146ff !important; }
.v2-bg-discord { background-color: #5865f2 !important; }
.v2-bg-twitch-soft { background: rgba(145, 70, 255, 0.15); }
.v2-border-twitch { border-color: #9146ff !important; }
.v2-border-discord { border-color: #5865f2 !important; }
.v2-btn-twitch { background-color: #9146ff; color: #fff; transition: filter 0.2s; }
.v2-btn-twitch:hover { filter: brightness(1.15); }
.v2-btn-discord-field {
    background: rgba(0, 0, 0, 0.3);
    border-color: #5865f2;
    color: #fff;
}

/* Badges */
.v2-badge-accent { background: var(--v2-accent, #fbbf24); color: #0a0a0c; }
.v2-badge-black-on-accent { background: var(--v2-accent, #fbbf24); color: #000; }

/* Surfaces */
.v2-surface-dark { background: rgba(0, 0, 0, 0.3); }
.v2-surface-glass { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); }
.v2-surface-info {
    font-size: 0.85rem;
    background: rgba(23, 162, 184, 0.1);
    border: 1px solid rgba(23, 162, 184, 0.3);
    color: #e0f7fa;
}
.v2-muted-zinc { color: #a1a1aa; }
.v2-text-dim { color: var(--text-muted, rgba(255, 255, 255, 0.5)); }
.v2-live-dot { font-size: 8px; vertical-align: middle; }
.v2-icon-rank { vertical-align: text-bottom; filter: drop-shadow(0 0 5px var(--accent-glow)); }

/* Buttons */
.v2-btn-close-popup {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    border-radius: 12px;
}
.v2-btn-spin-lg { font-size: 1.3rem; border-radius: 16px; letter-spacing: 0.12em; }
.v2-btn-outline-subtle {
    font-size: 0.85rem;
    border-color: rgba(255, 255, 255, 0.2);
}
.v2-btn-py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.v2-btn-action-blue { color: #60a5fa; }
.v2-btn-action-red { color: #f87171; }
.v2-btn-no-radius-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Dynamic CSS variables only */
.v2-fill-pct { width: var(--fill, 0%); }
.v2-w-pct { width: var(--w, auto); }
.v2-opacity-var { opacity: var(--op, 1); }
.v2-display-var { display: var(--display, block); }
.v2-tier-surface {
    background: color-mix(in srgb, var(--tier) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--tier) 33%, transparent);
}
.v2-tier-icon {
    width: 36px;
    height: 36px;
    background: color-mix(in srgb, var(--tier) 20%, transparent);
    color: var(--tier);
    font-size: 1rem;
}
.v2-tier-label {
    font-size: 0.62rem;
    color: var(--tier);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
}
.v2-ach-showcase { min-width: 90px; max-width: 130px; }
.v2-rank-glow { color: var(--rank-color); text-shadow: var(--rank-shadow, none); }
.v2-username-tint { color: var(--name-color, #fff); }

/* Discord stale banner */
.discord-stale-banner-global {
    background: rgba(217, 119, 6, 0.22);
    border-bottom: 1px solid rgba(251, 191, 36, 0.45);
    padding: 10px 16px;
    color: #fcd34d;
    font: 600 13px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    text-align: center;
    z-index: 2000;
    margin: 0;
}
.discord-stale-banner-global strong { color: #fde68a; }
.discord-stale-banner-global a {
    color: #fde68a;
    text-decoration: underline;
}

/* Splash pulse */
.v2-pulse-dot-lg {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--v2-accent, #fbbf24);
    box-shadow: 0 0 16px var(--v2-glow, rgba(251, 191, 36, 0.35));
}

/* Wrapped / progress dynamic */
.v2-bar-fill { width: var(--bar-w, 0%); background: var(--bar-bg, var(--v2-accent)); }

/* Turnier admin preview */
.v2-preview-faded { opacity: 0.1; }
.v2-preview-live { opacity: 1; }

/* Empty state icon */
.v2-empty-icon { font-size: 2rem; }

/* Input compact */
.v2-input-compact { text-align: center; padding: 4px; }

/* Pass-2 utilities */
.v2-fs-75 { font-size: 0.75rem; }
.v2-fs-80 { font-size: 0.8rem; }
.v2-fs-100 { font-size: 1rem; }
.v2-fs-120 { font-size: 1.2rem; }
.v2-fs-150 { font-size: 1.5rem; }
.v2-fs-400 { font-size: 4rem; }
.v2-fs-clamp { font-size: clamp(0.8rem, 2.5vw, 1rem); }
.v2-fs-var { font-size: var(--fs, 1.4rem); }
.v2-ls-half { letter-spacing: 0.05em; }
.v2-ls-6 { letter-spacing: 0.35em; }
.v2-uppercase { text-transform: uppercase; }
.v2-min-w-0 { min-width: 0; }
.v2-min-w-150 { min-width: 150px; }
.v2-min-w-250 { min-width: 250px; }
.v2-max-400 { max-width: 400px; margin-left: auto; margin-right: auto; }
.v2-max-500 { max-width: 500px; margin-left: auto; margin-right: auto; }
.v2-max-600 { max-width: 600px; margin-left: auto; margin-right: auto; }
.v2-max-640 { max-width: 640px; margin-left: auto; margin-right: auto; }
.v2-mono-counter {
    min-width: 60px;
    text-align: right;
    font-size: 0.85rem;
    font-family: 'JetBrains Mono', monospace;
}
.v2-text-slate { color: #e2e8f0; }
.v2-text-bronze { color: #d97706; }
.v2-text-live { color: #ff0055; }
.v2-text-win { color: #2ecc71; }
.v2-win-amount { color: #2ecc71; font-weight: bold; font-size: 1.1rem; }
.v2-option-muted { color: #888; }
.v2-avatar-50 { width: 50px; height: 50px; object-fit: cover; }
.v2-guild-icon {
    width: 85px;
    height: 85px;
    border-color: var(--v2-accent, #fbbf24) !important;
    padding: 3px;
    background: rgba(0, 0, 0, 0.5);
}
.v2-dot-12 { width: 12px; height: 12px; }
.v2-rank-icon-sm { width: 18px; height: 18px; object-fit: contain; }
.v2-rank-icon-lg {
    width: 55px;
    height: 55px;
    object-fit: contain;
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
    transition: filter 0.3s ease;
}
.v2-rank-hover-card:hover .v2-rank-icon-lg {
    filter: drop-shadow(0 0 15px var(--hover-color));
}
.v2-dc-scroll-panel { max-height: 400px; overflow-y: auto; background: rgba(10, 10, 15, 0.8); }
.v2-scroll-320 { max-height: 320px; overflow-y: auto; padding-right: 6px; }
.v2-rank-carousel {
    overflow-x: auto;
    gap: 15px;
    scroll-snap-type: x mandatory;
    text-align: left;
}
.v2-rank-carousel-item { flex: 0 0 140px; scroll-snap-align: start; }
.v2-rounded-20 { border-radius: 20px; }
.v2-podium-badge-pos { top: 15px; left: 15px; z-index: 20; }
.v2-top-20 { top: 20px; }
.v2-abs-tr { position: absolute; top: 20px; right: 20px; z-index: 1000; }
.v2-progress-h-14 { height: 14px; }
.v2-progress-glow { box-shadow: var(--prog-glow, none); }
.v2-bar-track { height: 8px; background: rgba(255, 255, 255, 0.08); }
.v2-overlay-winner-label {
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    opacity: 0.7;
}
.v2-btn-accent-solid { background-color: var(--v2-accent, #fbbf24); transition: all 0.3s; }
.v2-btn-accent-solid:hover { filter: brightness(1.2); }
.v2-bg-discord-online { background-color: #3ba55c; }
.v2-dc-header-bg { background: rgba(88, 101, 242, 0.15); backdrop-filter: blur(10px); }
.v2-live-card {
    border-left-color: #ff0055 !important;
    border-radius: 12px;
}
.v2-hover-lift-sm { transition: transform 0.2s; }
.v2-hover-lift-sm:hover { transform: translateY(-3px); }
.v2-opacity-85 { opacity: 0.85; }
.v2-title-glow-lg { text-shadow: 0 0 25px var(--accent-glow); }
.v2-border-subtle { border-color: rgba(255, 255, 255, 0.2); }
.v2-profile-title-bar {
    background: rgba(0, 0, 0, 0.3);
    font-size: 0.85rem;
    color: var(--v2-accent, #fbbf24);
    text-shadow: 0 0 10px var(--accent-glow);
    letter-spacing: 0.12em;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.v2-surface-form { background: rgba(15, 15, 20, 0.9); }
.v2-card-wrapped-promo {
    border-color: #9146ff;
    background: linear-gradient(135deg, rgba(145, 70, 255, 0.15), rgba(251, 191, 36, 0.05));
    box-shadow: 0 0 25px rgba(145, 70, 255, 0.2);
}
.v2-card-twitch-unlinked {
    border-color: #e74c3c;
    background: linear-gradient(45deg, rgba(231, 76, 60, 0.05), transparent);
}
.v2-card-boss-event {
    border: 1px solid var(--danger, #ff0055);
    box-shadow: 0 5px 15px rgba(255, 0, 85, 0.1);
}
.v2-input-accent-glow {
    border-color: var(--v2-accent, #fbbf24);
    box-shadow: inset 0 0 15px rgba(251, 191, 36, 0.1);
}
.v2-bh-warning-box {
    background: rgba(255, 204, 0, 0.1);
    border-left: 4px solid #ffcc00;
    padding: 15px;
    margin: 15px 0 25px;
    text-align: left;
    border-radius: 4px;
}
.v2-bh-warning-title {
    color: #ffcc00;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 14px;
    text-transform: uppercase;
}
.v2-bh-warning-list {
    color: #ccc;
    font-size: 13px;
    margin: 0;
    padding-left: 20px;
    line-height: 1.6;
}
.v2-bg-half { background: rgba(0, 0, 0, 0.5); }
.v2-pill-pad { font-weight: bold; padding: 8px 16px; }
.v2-surface-muted-center { background: rgba(255, 255, 255, 0.05); margin: 0 auto 20px; }
.v2-stat-hero { font-size: 2.5rem; font-weight: 800; color: var(--v2-accent, #fbbf24); }
.v2-img-border-warn { max-width: 100%; border: 1px solid rgba(255, 122, 0, 0.25); }
.v2-color-var { color: var(--c, inherit); }
.v2-user-glow-sm { text-shadow: 0 0 10px var(--glow, transparent); }
.v2-user-glow-md { text-shadow: 0 0 10px var(--glow, transparent); }
.v2-rank-name { font-size: 0.85rem; color: var(--c); }
.v2-rank-label {
    font-size: 0.75rem;
    line-height: 1.3;
    color: var(--c);
    text-shadow: 0 0 8px var(--glow, transparent);
}
.v2-row-hover:hover { background: var(--row-hover, transparent); }
.v2-quest-border { border-left-color: var(--quest-border, var(--info, #0dcaf0)); }
.v2-badge-tier {
    background: color-mix(in srgb, var(--tier) 20%, transparent);
    color: var(--tier);
    font-size: 0.65rem;
}
.v2-ach-picker-row { background: color-mix(in srgb, var(--tier) 4%, transparent); }
.v2-ach-picker-label { background: color-mix(in srgb, var(--tier) 4%, transparent); }
.v2-title-display {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    color: var(--title-color, rgba(255, 255, 255, 0.4));
}
.v2-rank-hover-card {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.v2-rank-hover-card:hover {
    transform: translateY(-5px);
    border-color: var(--hover-color);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.02);
}
.v2-turnier-hero-title {
    color: var(--v2-accent, #fbbf24);
    font-size: 4.5rem;
    letter-spacing: 0.55em;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(251, 191, 36, 0.4);
    margin-bottom: 5px;
}
.v2-turnier-hero-sub {
    letter-spacing: 0.25em;
    font-size: 1.4rem;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.8);
}
.v2-chip-dynamic {
    background: var(--bg);
    color: var(--c);
}

.v2-fs-50 { font-size: 0.5rem; }
.v2-fs-60 { font-size: 0.6rem; }
.v2-mono-pct-sm {
    min-width: 50px;
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
}
.v2-user-glow-xs { text-shadow: 0 0 5px var(--glow, transparent); }
.v2-truncate-150 { max-width: 150px; }
.v2-settings-guild-icon {
    width: 80px;
    height: 80px;
    border-color: var(--v2-accent, #fbbf24) !important;
}
.v2-user-avatar-sm {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    object-fit: cover;
}
.v2-input-w-80 { width: 80px; padding: 4px 10px; }
.v2-px-12 { padding-left: 12px; padding-right: 12px; }
.v2-reward-row {
    background: rgba(0, 0, 0, 0.3);
    border-left: 3px solid var(--v2-accent, #fbbf24);
}
.v2-font-mono { font-family: 'JetBrains Mono', monospace; }
.v2-badge-role {
    background: rgba(251, 191, 36, 0.1);
    color: var(--v2-accent, #fbbf24);
    border: 1px solid var(--v2-accent, #fbbf24);
    margin-top: 4px;
}
.v2-channel-scroll {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    max-height: 250px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--v2-accent, #fbbf24) transparent;
}
.v2-max-h-160 { max-height: 160px; overflow: hidden; }
.v2-ach-list-item {
    border-color: color-mix(in srgb, var(--tier) 20%, transparent) !important;
    background: color-mix(in srgb, var(--tier) 7%, transparent);
}
.v2-deco-icon-br {
    font-size: 8rem;
    right: -20px;
    bottom: -20px;
    position: absolute;
    opacity: 0.1;
}
.v2-deco-icon-tl {
    font-size: 8rem;
    left: -20px;
    top: -20px;
    position: absolute;
    opacity: 0.1;
}
.v2-deco-warning { color: var(--warning, #ffc107); }
.v2-deco-success { color: var(--success, #2ecc71); }
.v2-stat-front { z-index: 2; position: relative; }
.v2-stat-glow-warning { text-shadow: 0 0 20px rgba(255, 193, 7, 0.4); }
.v2-modal-accent {
    border: 2px solid var(--v2-accent, #fbbf24);
    box-shadow: 0 0 30px var(--accent-glow);
}
.v2-surface-log { background: rgba(0, 0, 0, 0.45); }
.v2-select-140 { min-width: 0; max-width: 100%; width: 140px; }
.v2-select-130 { min-width: 0; max-width: 100%; width: 130px; }
.v2-max-w-340 { max-width: 340px; }
.v2-break-all { word-break: break-all; }
.v2-w-4rem { width: 4rem; }
.v2-slot-placeholder {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
}
.v2-modal-glass {
    background: rgba(16, 16, 24, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Bootstrap modals outside <main> — above V2 nav (1100), below splash (2000) */
body.juicer-v2-page .modal-backdrop {
    z-index: 1190;
}
body.juicer-v2-page .modal {
    z-index: 1200;
}
.v2-grid-span-2 { grid-column: span 2; }
.v2-meta-twitch {
    border-color: rgba(145, 70, 255, 0.33);
    background: rgba(145, 70, 255, 0.14);
}

.v2-poll-bar-alt { background: #fff; }
.v2-trophy-glow {
    color: #fbbf24;
    filter: drop-shadow(0 10px 20px rgba(251, 191, 36, 0.6));
}
.v2-max-w-220 { max-width: 220px; }
.v2-dot-info { width: 10px; height: 10px; }
.v2-surface-challenge-form { background: rgba(0, 0, 0, 0.35); }
.v2-surface-hint { background: rgba(255, 255, 255, 0.03); }
.v2-glass-card-dark {
    border-radius: 16px;
    background: rgba(10, 10, 15, 0.8);
}
.v2-btn-bh-submit {
    font-size: 0.9rem;
    border-radius: 6px;
}
.v2-text-pending { color: var(--text-dim, rgba(255, 255, 255, 0.5)); }

.v2-divider-subtle { border-color: rgba(255, 255, 255, 0.05); }
.v2-id-dim { font-size: 0.7rem; color: rgba(255, 255, 255, 0.3); }
.v2-card-discord-cta {
    max-width: 600px;
    border-color: rgba(88, 101, 242, 0.4) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(88, 101, 242, 0.1);
}
.v2-discord-icon-lg {
    color: #5865f2;
    text-shadow: 0 0 15px rgba(88, 101, 242, 0.4);
}
.v2-btn-discord-solid { background: #5865f2; color: #fff; text-shadow: none; }
.v2-label-filter {
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 600;
}
.v2-hint-spin { font-size: 1.1rem; font-weight: 500; }