/* /Components/Band/BandMemberCardModal.razor.rz.scp.css */
/* ============================================
   BAND MEMBER CARD MODAL
   Theme: Luxury VIP / Music Industry
   ============================================ */

/* ============================================
   BACKDROP
   ============================================ */
.modal-backdrop[b-d6t4xty41c] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-backdrop--open[b-d6t4xty41c] {
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(8px);
}

.visually-hidden[b-d6t4xty41c] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   PARTICLES
   ============================================ */
.modal-particles[b-d6t4xty41c] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.modal-particle[b-d6t4xty41c] {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(var(--wl-gold-rgb), 0.6);
    border-radius: 50%;
    left: calc(20% + var(--i) * 3%);
    top: 100%;
    animation: particleRise-b-d6t4xty41c 8s ease-out infinite;
    animation-delay: calc(var(--i) * 0.4s);
}

@keyframes particleRise-b-d6t4xty41c {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100vh) scale(0);
        opacity: 0;
    }
}

/* ============================================
   CONTAINER
   ============================================ */
.modal-container[b-d6t4xty41c] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px;
    max-height: calc(100vh - 3rem);
    max-height: calc(100dvh - 3rem);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%);
    border: 1px solid var(--wl-gold-bg-hover);
    animation: modalSlideIn-b-d6t4xty41c 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes modalSlideIn-b-d6t4xty41c {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================
   CORNERS
   ============================================ */
.modal-corners[b-d6t4xty41c] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.corner[b-d6t4xty41c] {
    position: absolute;
    width: 20px;
    height: 20px;
}

.corner[b-d6t4xty41c]::before,
.corner[b-d6t4xty41c]::after {
    content: '';
    position: absolute;
    background: var(--wl-gold);
}

.corner-tl[b-d6t4xty41c] { top: -1px; left: -1px; }
.corner-tr[b-d6t4xty41c] { top: -1px; right: -1px; }
.corner-bl[b-d6t4xty41c] { bottom: -1px; left: -1px; }
.corner-br[b-d6t4xty41c] { bottom: -1px; right: -1px; }

.corner-tl[b-d6t4xty41c]::before, .corner-tr[b-d6t4xty41c]::before { top: 0; height: 1px; width: 20px; }
.corner-bl[b-d6t4xty41c]::before, .corner-br[b-d6t4xty41c]::before { bottom: 0; height: 1px; width: 20px; }
.corner-tl[b-d6t4xty41c]::after, .corner-bl[b-d6t4xty41c]::after { left: 0; width: 1px; height: 20px; }
.corner-tr[b-d6t4xty41c]::after, .corner-br[b-d6t4xty41c]::after { right: 0; width: 1px; height: 20px; }

.corner-tl[b-d6t4xty41c]::before { left: 0; }
.corner-tr[b-d6t4xty41c]::before { right: 0; }
.corner-bl[b-d6t4xty41c]::before { left: 0; }
.corner-br[b-d6t4xty41c]::before { right: 0; }

/* ============================================
   GLOW EFFECTS
   ============================================ */
.modal-glow[b-d6t4xty41c] {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.modal-inner-glow[b-d6t4xty41c] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 60%);
    pointer-events: none;
}

/* ============================================
   CLOSE BUTTON
   ============================================ */
.modal-close[b-d6t4xty41c] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    padding: 6px;
    background: transparent;
    border: 1px solid var(--wl-border-medium);
    color: rgba(163, 163, 163, 0.6);
    cursor: pointer;
    transition: all 0.3s;
    z-index: 20;
}

.modal-close:hover[b-d6t4xty41c] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
    background: var(--wl-gold-bg);
}

.modal-close:disabled[b-d6t4xty41c] {
    opacity: 0.45;
    cursor: wait;
}

.modal-close svg[b-d6t4xty41c] {
    width: 100%;
    height: 100%;
}

/* ============================================
   HEADER
   ============================================ */
.modal-header[b-d6t4xty41c] {
    text-align: center;
    padding: 2.5rem 2rem 1.5rem;
    position: relative;
    flex: 0 0 auto;
}

.modal-icon-container[b-d6t4xty41c] {
    position: relative;
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
}

.modal-icon-bg[b-d6t4xty41c] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    transform: rotate(45deg);
}

.modal-icon-ring[b-d6t4xty41c] {
    position: absolute;
    inset: -4px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    transform: rotate(45deg);
    animation: iconRingRotate-b-d6t4xty41c 12s linear infinite;
}

@keyframes iconRingRotate-b-d6t4xty41c {
    to { transform: rotate(405deg); }
}

.modal-icon[b-d6t4xty41c] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-gold);
    filter: drop-shadow(0 0 12px rgba(var(--wl-gold-rgb), 0.5));
}

.modal-icon :deep(svg)[b-d6t4xty41c] {
    width: 2rem;
    height: 2rem;
}

.modal-title[b-d6t4xty41c] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    color: var(--wl-text-primary);
    margin: 0 0 0.375rem 0;
    text-transform: uppercase;
}

.modal-breadcrumb[b-d6t4xty41c] {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.75rem;
    color: rgba(163, 163, 163, 0.5);
    letter-spacing: 0.05em;
    margin: 0;
}

/* ============================================
   DIVIDER
   ============================================ */
.modal-divider[b-d6t4xty41c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0 2rem;
    flex: 0 0 auto;
}

.divider-line[b-d6t4xty41c] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.3), transparent);
}

.divider-ornament[b-d6t4xty41c] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--wl-gold-rgb), 0.5);
    animation: ornamentPulse-b-d6t4xty41c 2s ease-in-out infinite;
}

.divider-ornament :deep(svg)[b-d6t4xty41c] {
    width: 0.625rem;
    height: 0.625rem;
}

@keyframes ornamentPulse-b-d6t4xty41c {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* ============================================
   CONTENT
   ============================================ */
.modal-content[b-d6t4xty41c] {
    padding: 1.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

/* ============================================
   XP POOL INFO - Prominent display
   ============================================ */
.xp-pool-info[b-d6t4xty41c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.15) 0%, rgba(var(--wl-purple-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.25);
    border-radius: 0.5rem;
}

.xp-label[b-d6t4xty41c] {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.8125rem;
    color: rgba(var(--wl-purple-rgb), 0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.xp-value[b-d6t4xty41c] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    color: var(--wl-purple);
    letter-spacing: 0.03em;
}

.modal-description[b-d6t4xty41c] {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.9375rem;
    color: rgba(163, 163, 163, 0.8);
    line-height: 1.6;
    text-align: center;
    margin: 0;
}

/* ============================================
   REQUIREMENTS
   ============================================ */
.modal-requirements[b-d6t4xty41c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.requirements-label[b-d6t4xty41c] {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(163, 163, 163, 0.4);
}

.requirement[b-d6t4xty41c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-bg-modal-deep-rgb), 0.6);
    border-left: 2px solid;
}

.requirement--met[b-d6t4xty41c] {
    border-color: #10b981;
}

.requirement--not-met[b-d6t4xty41c] {
    border-color: #ef4444;
}

.requirement-icon[b-d6t4xty41c] {
    font-size: 0.875rem;
    font-weight: 700;
}

.requirement--met .requirement-icon[b-d6t4xty41c] {
    color: #10b981;
}

.requirement--not-met .requirement-icon[b-d6t4xty41c] {
    color: #ef4444;
}

.requirement-name[b-d6t4xty41c] {
    flex: 1;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.requirement-status[b-d6t4xty41c] {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.6875rem;
    color: rgba(163, 163, 163, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   LEVEL PROGRESS
   ============================================ */
.modal-level[b-d6t4xty41c] {
    background: rgba(var(--wl-bg-modal-deep-rgb), 0.6);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.level-header[b-d6t4xty41c] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.level-text[b-d6t4xty41c] {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.max-badge[b-d6t4xty41c] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, var(--wl-gold), #FFD700);
    color: black;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.level-progress[b-d6t4xty41c] {
    position: relative;
    height: 8px;
}

.level-progress-track[b-d6t4xty41c] {
    position: absolute;
    inset: 0;
    background: var(--wl-border-medium);
    overflow: hidden;
}

.level-progress-fill[b-d6t4xty41c] {
    height: 100%;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.6), var(--wl-gold));
    position: relative;
    transition: width 0.5s ease-out;
}

.level-progress-shine[b-d6t4xty41c] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--wl-text-muted), transparent);
    transform: translateX(-100%);
    animation: progressShine-b-d6t4xty41c 3s ease-in-out infinite;
}

@keyframes progressShine-b-d6t4xty41c {
    0%, 70%, 100% { transform: translateX(-100%); }
    30% { transform: translateX(200%); }
}

.level-progress-glow[b-d6t4xty41c] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.8) 0%, transparent 70%);
    border-radius: 50%;
}

.level-xp[b-d6t4xty41c] {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.75rem;
    color: rgba(163, 163, 163, 0.6);
    text-align: right;
}

/* ============================================
   ACTIONS
   ============================================ */
.modal-action[b-d6t4xty41c] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.action-btn[b-d6t4xty41c] {
    width: 100%;
    padding: 0.875rem 1.25rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.action-btn--primary[b-d6t4xty41c] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-light) 50%, var(--wl-gold) 100%);
    background-size: 200% auto;
    color: black;
}

.action-btn--primary:hover:not(:disabled)[b-d6t4xty41c] {
    background-position: right center;
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.4);
}

.action-btn--secondary[b-d6t4xty41c] {
    background: transparent;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

.action-btn--secondary:hover:not(:disabled)[b-d6t4xty41c] {
    background: var(--wl-gold-bg);
    border-color: var(--wl-gold);
}

.action-btn--disabled[b-d6t4xty41c],
.action-btn:disabled[b-d6t4xty41c] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-spinner[b-d6t4xty41c] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: black;
    border-radius: 50%;
    animation: spin-b-d6t4xty41c 0.8s linear infinite;
}

.btn-spinner--gold[b-d6t4xty41c] {
    border-color: var(--wl-gold-border);
    border-top-color: var(--wl-gold);
}

@keyframes spin-b-d6t4xty41c {
    to { transform: rotate(360deg); }
}

.action-info[b-d6t4xty41c] {
    display: flex;
    justify-content: space-between;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.75rem;
}

.action-cost[b-d6t4xty41c] {
    color: rgba(163, 163, 163, 0.6);
}

.action-detail[b-d6t4xty41c] {
    color: rgba(163, 163, 163, 0.5);
}

.action-warning[b-d6t4xty41c] {
    color: #ef4444;
}

@media (max-width: 480px), (max-height: 650px) {
    .modal-backdrop[b-d6t4xty41c] {
        padding: 0.5rem;
    }

    .modal-container[b-d6t4xty41c] {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .modal-header[b-d6t4xty41c] {
        padding: 2rem 1.25rem 1rem;
    }

    .modal-icon-container[b-d6t4xty41c] {
        width: 56px;
        height: 56px;
        margin-bottom: 0.75rem;
    }

    .modal-title[b-d6t4xty41c] {
        padding: 0 2rem;
        font-size: 1.5rem;
    }

    .modal-divider[b-d6t4xty41c] {
        padding: 0 1.25rem;
    }

    .modal-content[b-d6t4xty41c] {
        padding: 1.25rem;
    }

    .action-info[b-d6t4xty41c],
    .requirement[b-d6t4xty41c] {
        align-items: flex-start;
    }

    .action-info[b-d6t4xty41c] {
        flex-direction: column;
        gap: 0.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop[b-d6t4xty41c],
    .modal-container[b-d6t4xty41c],
    .modal-close[b-d6t4xty41c],
    .action-btn[b-d6t4xty41c],
    .level-progress-fill[b-d6t4xty41c] {
        transition: none;
    }

    .modal-container[b-d6t4xty41c],
    .modal-particle[b-d6t4xty41c],
    .modal-icon-ring[b-d6t4xty41c],
    .divider-ornament[b-d6t4xty41c],
    .level-progress-shine[b-d6t4xty41c],
    .btn-spinner[b-d6t4xty41c] {
        animation: none;
    }

    .modal-particles[b-d6t4xty41c],
    .level-progress-glow[b-d6t4xty41c] {
        display: none;
    }
}
/* /Components/Band/BandMemberCardTree.razor.rz.scp.css */
/* ============================================
   BAND MEMBER CARD TREE
   Theme: Luxury VIP / Music Industry
   Based on CardTree.razor styles
   ============================================ */

.skill-tree-wrapper[b-oyyr6y5857] {
    position: relative;
    width: 100%;
    height: calc(100vh - 400px);
    min-height: 500px;
    background:
        radial-gradient(ellipse at center, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 60%),
        linear-gradient(180deg, rgba(15, 15, 20, 0.95) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.98) 100%);
    overflow: hidden;
    border-radius: 0.5rem;
}

.visually-hidden[b-oyyr6y5857] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   MINIMAP
   ============================================ */
.skill-minimap[b-oyyr6y5857] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 120px;
    height: 120px;
    background: rgba(5, 5, 10, 0.95);
    border: 1px solid var(--wl-gold-border);
    border-radius: 4px;
    z-index: 30;
    cursor: default;
    overflow: hidden;
}

.minimap-content[b-oyyr6y5857] {
    position: absolute;
    inset: 8px;
}

.minimap-viewport[b-oyyr6y5857] {
    position: absolute;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.5);
    background: var(--wl-gold-bg);
    border-radius: 2px;
    pointer-events: none;
    transition: all 0.1s ease;
}

.minimap-label[b-oyyr6y5857] {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(163, 163, 163, 0.4);
}

.mm-node[b-oyyr6y5857] {
    appearance: none;
    position: absolute;
    width: 8px;
    height: 8px;
    padding: 0;
    background: rgba(120, 120, 140, 0.8);
    border: 1px solid rgba(160, 160, 180, 0.6);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.2s;
    cursor: pointer;
}

.mm-node:hover[b-oyyr6y5857] {
    transform: translate(-50%, -50%) scale(1.3);
    border-color: rgba(var(--wl-gold-rgb), 0.8);
}

.mm-node:focus-visible[b-oyyr6y5857] {
    z-index: 2;
    outline: none;
    border-color: var(--wl-gold);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.35);
    transform: translate(-50%, -50%) scale(1.35);
}

.mm-root[b-oyyr6y5857] {
    width: 12px;
    height: 12px;
    background: rgba(var(--wl-gold-rgb), 0.4);
    border-color: rgba(var(--wl-gold-rgb), 0.6);
}

.mm-small[b-oyyr6y5857] {
    width: 5px;
    height: 5px;
}

.mm-node.owned[b-oyyr6y5857] {
    background: rgba(var(--wl-gold-rgb), 0.6);
    border-color: var(--wl-gold);
}

.mm-node.maxed[b-oyyr6y5857] {
    background: linear-gradient(135deg, #FFD700, #B8860B);
    border-color: #FFD700;
}

/* ============================================
   ZOOM CONTROLS
   ============================================ */
.zoom-controls[b-oyyr6y5857] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(5, 5, 10, 0.95);
    border: 1px solid var(--wl-gold-border);
    border-radius: 4px;
    z-index: 30;
}

.zoom-btn[b-oyyr6y5857] {
    appearance: none;
    width: 28px;
    height: 28px;
    padding: 4px;
    background: transparent;
    border: 1px solid var(--wl-border-medium);
    border-radius: 4px;
    color: rgba(163, 163, 163, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.zoom-btn:hover[b-oyyr6y5857] {
    background: var(--wl-gold-bg);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.zoom-btn svg[b-oyyr6y5857] {
    width: 16px;
    height: 16px;
}

.zoom-level[b-oyyr6y5857] {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: rgba(163, 163, 163, 0.6);
    min-width: 40px;
    text-align: center;
}

/* ============================================
   CANVAS
   ============================================ */
.skill-canvas[b-oyyr6y5857] {
    position: absolute;
    inset: 0;
    cursor: grab;
    overflow: hidden;
}

.skill-canvas:active[b-oyyr6y5857] {
    cursor: grabbing;
}

.skill-viewport[b-oyyr6y5857] {
    position: absolute;
    width: 1600px;
    height: 1600px;
    left: calc(50% - 800px);
    top: calc(50% - 800px);
    transform-origin: 800px 800px;
}

/* ============================================
   CONNECTIONS (SVG)
   ============================================ */
.skill-connections[b-oyyr6y5857] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.conn-line[b-oyyr6y5857] {
    stroke: rgba(80, 80, 100, 0.4);
    stroke-width: 2;
    transition: stroke 0.3s;
}

.conn-thick[b-oyyr6y5857] {
    stroke-width: 3;
}

.conn-thin[b-oyyr6y5857] {
    stroke-width: 1.5;
}

.conn-owned[b-oyyr6y5857] {
    stroke: rgba(var(--wl-gold-rgb), 0.7);
}

/* ============================================
   NODES
   ============================================ */
.skill-nodes[b-oyyr6y5857] {
    position: absolute;
    inset: 0;
}

.skill-node[b-oyyr6y5857] {
    appearance: none;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translate(-50%, -50%);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: center;
}

.skill-node:hover[b-oyyr6y5857],
.skill-node:focus-visible[b-oyyr6y5857] {
    z-index: 20;
}

.skill-node:focus-visible[b-oyyr6y5857] {
    outline: none;
    box-shadow: none;
}

/* Root node */
.skill-node-root[b-oyyr6y5857] {
    padding: 16px;
}

.skill-node-root .node-icon[b-oyyr6y5857] {
    width: 64px;
    height: 64px;
    font-size: 1.1rem;
}

.skill-node-root .node-label[b-oyyr6y5857] {
    font-size: 14px;
}

/* Level 2 nodes */
.skill-node-l2[b-oyyr6y5857] {
    padding: 10px;
}

.skill-node-l2 .node-icon[b-oyyr6y5857] {
    width: 48px;
    height: 48px;
    font-size: 0.85rem;
}

.skill-node-l2 .node-label[b-oyyr6y5857] {
    font-size: 11px;
    max-width: 80px;
}

/* Level 3 nodes */
.skill-node-l3[b-oyyr6y5857] {
    padding: 4px;
}

.skill-node-l3 .node-icon[b-oyyr6y5857] {
    width: 28px;
    height: 28px;
    font-size: 0.55rem;
}

.skill-node-l3 .node-label[b-oyyr6y5857] {
    font-size: 9px;
    max-width: 70px;
}

.skill-node-l3 .node-ring[b-oyyr6y5857] {
    display: none;
}

/* Node elements */
.node-glow[b-oyyr6y5857] {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, var(--wl-gold-bg-hover) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.skill-node:hover .node-glow[b-oyyr6y5857],
.skill-node:focus-visible .node-glow[b-oyyr6y5857] {
    opacity: 1;
}

.node-ring[b-oyyr6y5857] {
    position: absolute;
    inset: 0;
    border: 1px solid var(--wl-gold-border);
    border-radius: 50%;
    animation: ringPulse-b-oyyr6y5857 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ringPulse-b-oyyr6y5857 {
    0%, 100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.1); opacity: 0.1; }
}

.node-icon[b-oyyr6y5857] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(25, 25, 35, 0.95) 0%, rgba(15, 15, 22, 0.98) 100%);
    border: 1px solid rgba(80, 80, 90, 0.4);
    border-radius: 50%;
    color: rgba(163, 163, 163, 0.6);
    transition: all 0.3s;
    order: 0;
}

.node-icon :deep(svg)[b-oyyr6y5857] {
    width: 70%;
    height: 70%;
}

.skill-node:hover .node-icon[b-oyyr6y5857],
.skill-node:focus-visible .node-icon[b-oyyr6y5857] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    color: var(--wl-gold);
    transform: scale(1.1);
}

.skill-node:focus-visible .node-icon[b-oyyr6y5857] {
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.35), 0 0 22px rgba(var(--wl-gold-rgb), 0.24);
}

.node-label[b-oyyr6y5857] {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(220, 220, 220, 0.9);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s;
    order: -2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.7);
}

.skill-node:hover .node-label[b-oyyr6y5857],
.skill-node:focus-visible .node-label[b-oyyr6y5857] {
    color: var(--wl-text-primary);
}

.node-level[b-oyyr6y5857] {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: rgba(163, 163, 163, 0.6);
    letter-spacing: 0.05em;
    order: 2;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* Node states */
.skill-node.locked[b-oyyr6y5857] {
    opacity: 0.6;
}

.skill-node.locked .node-icon[b-oyyr6y5857] {
    background: rgba(25, 25, 35, 0.95);
    border-color: rgba(100, 100, 120, 0.4);
}

.skill-node.owned .node-icon[b-oyyr6y5857] {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(25, 25, 35, 0.95) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

.skill-node.owned .node-label[b-oyyr6y5857] {
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.skill-node.owned .node-level[b-oyyr6y5857] {
    color: rgba(var(--wl-gold-rgb), 0.7);
}

.skill-node.maxed .node-icon[b-oyyr6y5857] {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(184, 134, 11, 0.15) 50%, rgba(25, 25, 35, 0.95) 100%);
    border-color: #FFD700;
    color: #FFD700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.skill-node.maxed .node-level[b-oyyr6y5857] {
    background: linear-gradient(90deg, #FFD700, var(--wl-gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .skill-tree-wrapper[b-oyyr6y5857] {
        height: calc(100vh - 450px);
        min-height: 350px;
    }

    .skill-minimap[b-oyyr6y5857] {
        width: 70px;
        height: 70px;
        top: 8px;
        right: 8px;
    }

    .minimap-label[b-oyyr6y5857] {
        display: none;
    }

    .mm-node[b-oyyr6y5857] {
        width: 6px;
        height: 6px;
    }

    .mm-root[b-oyyr6y5857] {
        width: 10px;
        height: 10px;
    }

    .mm-small[b-oyyr6y5857] {
        width: 4px;
        height: 4px;
    }

    .zoom-controls[b-oyyr6y5857] {
        bottom: 8px;
        right: 8px;
        gap: 4px;
        padding: 4px 6px;
    }

    .zoom-btn[b-oyyr6y5857] {
        width: 32px;
        height: 32px;
    }

    .zoom-level[b-oyyr6y5857] {
        font-size: 10px;
        min-width: 32px;
    }

    .skill-node-root .node-icon[b-oyyr6y5857] {
        width: 56px;
        height: 56px;
    }

    .skill-node-l2 .node-icon[b-oyyr6y5857] {
        width: 44px;
        height: 44px;
    }

    .skill-node-l3 .node-icon[b-oyyr6y5857] {
        width: 32px;
        height: 32px;
    }

    .skill-node-l3 .node-label[b-oyyr6y5857] {
        display: none;
    }
}

@media (max-width: 480px) {
    .skill-tree-wrapper[b-oyyr6y5857] {
        height: calc(100vh - 500px);
        min-height: 300px;
    }

    .skill-minimap[b-oyyr6y5857] {
        width: 60px;
        height: 60px;
    }

    .zoom-controls[b-oyyr6y5857] {
        padding: 3px 5px;
    }

    .zoom-level[b-oyyr6y5857] {
        display: none;
    }

    .skill-node-root .node-icon[b-oyyr6y5857] {
        width: 48px;
        height: 48px;
    }

    .skill-node-root .node-label[b-oyyr6y5857] {
        font-size: 11px;
    }

    .skill-node-l2 .node-icon[b-oyyr6y5857] {
        width: 36px;
        height: 36px;
    }

    .skill-node-l2 .node-label[b-oyyr6y5857] {
        font-size: 9px;
        max-width: 50px;
    }

    .skill-node-l3 .node-icon[b-oyyr6y5857] {
        width: 28px;
        height: 28px;
    }

    .node-level[b-oyyr6y5857] {
        display: none;
    }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
    .skill-canvas[b-oyyr6y5857] {
        touch-action: none;
    }

    .skill-node[b-oyyr6y5857] {
        min-width: 44px;
        min-height: 44px;
    }

    .zoom-btn[b-oyyr6y5857] {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .node-ring[b-oyyr6y5857] {
        animation: none;
    }

    .skill-node[b-oyyr6y5857],
    .node-icon[b-oyyr6y5857],
    .node-label[b-oyyr6y5857],
    .node-glow[b-oyyr6y5857],
    .mm-node[b-oyyr6y5857],
    .minimap-viewport[b-oyyr6y5857],
    .zoom-btn[b-oyyr6y5857] {
        transition: none;
    }
}
/* /Components/Band/BandMemberTakeoverModal.razor.rz.scp.css */
.takeover-modal[b-05tphjpj2p] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 0.5rem;
}

.takeover-lead[b-05tphjpj2p],
.takeover-warning[b-05tphjpj2p],
.takeover-status[b-05tphjpj2p] {
    color: rgba(var(--wl-contrast-rgb), 0.74);
    line-height: 1.55;
    margin: 0;
}

.takeover-warning[b-05tphjpj2p] {
    padding: 0.875rem 1rem;
    border: 1px solid rgba(var(--wl-red-rgb), 0.25);
    border-radius: 0.5rem;
    background: rgba(var(--wl-red-rgb), 0.08);
    color: #fca5a5;
}

.takeover-label[b-05tphjpj2p] {
    display: block;
    margin-bottom: -0.375rem;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
}

.takeover-input[b-05tphjpj2p] {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.75rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: rgba(var(--wl-bg-tertiary-rgb), 0.72);
    color: var(--wl-text-primary);
    outline: none;
}

.takeover-input:focus[b-05tphjpj2p] {
    border-color: var(--wl-gold-border);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.1);
}

.takeover-skins[b-05tphjpj2p] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.takeover-skin[b-05tphjpj2p] {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.22);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.takeover-skin.active[b-05tphjpj2p] {
    border-color: var(--wl-gold);
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.15);
}

.takeover-outfits[b-05tphjpj2p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 0.625rem;
    max-height: 17rem;
    overflow: auto;
    padding-right: 0.25rem;
}

.takeover-outfit[b-05tphjpj2p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem;
    border-radius: 0.625rem;
    border: 1px solid var(--wl-border-subtle);
    background: rgba(var(--wl-bg-tertiary-rgb), 0.55);
    color: var(--wl-text-secondary);
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.takeover-outfit.active[b-05tphjpj2p] {
    border-color: var(--wl-gold-border);
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-text-primary);
    transform: translateY(-1px);
}

.takeover-outfit img[b-05tphjpj2p] {
    width: 72px;
    height: 96px;
    object-fit: contain;
}

.takeover-outfit span[b-05tphjpj2p] {
    max-width: 100%;
    font-size: 0.6875rem;
    font-weight: 700;
    text-align: center;
    overflow-wrap: anywhere;
}

.modal-actions[b-05tphjpj2p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.btn-cancel[b-05tphjpj2p],
.btn-confirm-takeover[b-05tphjpj2p] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel[b-05tphjpj2p] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.btn-cancel:hover:not(:disabled)[b-05tphjpj2p] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
}

.btn-confirm-takeover[b-05tphjpj2p] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border: none;
    color: var(--wl-bg-primary);
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.25);
}

.btn-confirm-takeover:hover:not(:disabled)[b-05tphjpj2p] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--wl-gold-rgb), 0.35);
}

.btn-cancel:disabled[b-05tphjpj2p],
.btn-confirm-takeover:disabled[b-05tphjpj2p] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

@media (max-width: 520px) {
    .modal-actions[b-05tphjpj2p] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Band/PlayerBandLineup.razor.rz.scp.css */
.player-band-lineup[b-nd13vcbz7k] {
    position: relative;
    isolation: isolate;
    width: min(100%, 34rem);
    height: clamp(16rem, 31vw, 27rem);
    margin-inline: auto;
    overflow: hidden;
}

.lineup-glow[b-nd13vcbz7k] {
    position: absolute;
    z-index: -2;
    inset: 9% 2% 5%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 35%, rgba(var(--wl-gold-rgb), .3), transparent 48%),
        radial-gradient(circle at 50% 70%, rgba(var(--wl-purple-rgb), .2), transparent 62%);
    filter: blur(26px);
}

.lineup-stage[b-nd13vcbz7k] {
    position: absolute;
    z-index: 5;
    left: 8%;
    right: 8%;
    bottom: 2.5%;
    height: 12%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(var(--wl-gold-rgb), .24), rgba(var(--wl-contrast-rgb), .035) 55%, transparent 72%);
    border-top: 1px solid rgba(var(--wl-gold-rgb), .26);
    box-shadow: 0 -20px 55px rgba(var(--wl-gold-rgb), .08);
}

.lineup-member[b-nd13vcbz7k] {
    position: absolute;
    z-index: 2;
    bottom: 5%;
    left: 50%;
    width: 48%;
    height: 91%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: end;
    color: var(--wl-text-primary);
    text-decoration: none;
    filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .42));
    transition: filter .25s ease, transform .25s ease;
}

.lineup-member:hover[b-nd13vcbz7k],
.lineup-member:focus-visible[b-nd13vcbz7k] {
    z-index: 6;
    filter: drop-shadow(0 22px 30px rgba(var(--wl-gold-rgb), .24));
}

.lineup-member:focus-visible[b-nd13vcbz7k] {
    outline: 2px solid var(--wl-gold);
    outline-offset: -2px;
    border-radius: 1rem;
}

.lineup-member img[b-nd13vcbz7k] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

.lineup-member span[b-nd13vcbz7k] {
    position: absolute;
    z-index: 8;
    bottom: .35rem;
    left: 50%;
    max-width: 90%;
    transform: translateX(-50%);
    padding: .25rem .55rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-gold-rgb), .24);
    border-radius: 999px;
    background: rgba(var(--wl-bg-primary-rgb), .78);
    color: var(--wl-text-primary);
    font-size: .7rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
    backdrop-filter: blur(10px);
}

.members-2 .lineup-member[b-nd13vcbz7k] { width: 46%; }
.members-2 .lineup-member-0[b-nd13vcbz7k] { left: 37%; }
.members-2 .lineup-member-1[b-nd13vcbz7k] { left: 63%; }

.members-3 .lineup-member[b-nd13vcbz7k] { width: 41%; }
.members-3 .lineup-member-0[b-nd13vcbz7k] { left: 24%; transform: translateX(-50%) scale(.88); }
.members-3 .lineup-member-1[b-nd13vcbz7k] { left: 50%; z-index: 3; }
.members-3 .lineup-member-2[b-nd13vcbz7k] { left: 76%; transform: translateX(-50%) scale(.88); }

.members-4 .lineup-member[b-nd13vcbz7k] { width: 37%; }
.members-4 .lineup-member-0[b-nd13vcbz7k] { left: 16%; transform: translateX(-50%) scale(.79); }
.members-4 .lineup-member-1[b-nd13vcbz7k] { left: 39%; z-index: 3; transform: translateX(-50%) scale(.95); }
.members-4 .lineup-member-2[b-nd13vcbz7k] { left: 62%; z-index: 3; transform: translateX(-50%) scale(.95); }
.members-4 .lineup-member-3[b-nd13vcbz7k] { left: 85%; transform: translateX(-50%) scale(.79); }

.player-band-lineup--compact[b-nd13vcbz7k] {
    height: clamp(13rem, 23vw, 19rem);
}

@media (max-width: 620px) {
    .player-band-lineup[b-nd13vcbz7k] { height: 19rem; }
    .lineup-member span[b-nd13vcbz7k] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lineup-member[b-nd13vcbz7k] { transition: none; }
}
/* /Components/Buildings/BuildingCard.razor.rz.scp.css */
/* src/Wonderlife.Web/Components/Buildings/BuildingCard.razor.css */
.building-card[b-6qapj59dey] {
    background: rgba(var(--wl-bg-secondary-rgb), 0.95);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    padding: 1.5rem;
}

.building-header[b-6qapj59dey] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.building-icon[b-6qapj59dey] {
    color: var(--wl-gold);
    flex-shrink: 0;
}

.building-info[b-6qapj59dey] {
    flex: 1;
}

.building-name[b-6qapj59dey] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin-bottom: 0.25rem;
}

.building-description[b-6qapj59dey] {
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
}

.building-actions[b-6qapj59dey] {
    display: flex;
    justify-content: flex-end;
}

.dropdown[b-6qapj59dey] {
    position: relative;
}

.dropdown-toggle[b-6qapj59dey] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dropdown-arrow[b-6qapj59dey] {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

.dropdown-menu[b-6qapj59dey] {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.25rem;
    background: linear-gradient(180deg, var(--wl-bg-secondary) 0%, var(--wl-bg-primary) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    box-shadow:
        0 10px 25px -5px rgba(0, 0, 0, 0.5),
        0 8px 10px -6px rgba(0, 0, 0, 0.3);
    min-width: 200px;
    z-index: 10;
    animation: dropdownFadeIn-b-6qapj59dey 0.15s ease forwards;
}

@keyframes dropdownFadeIn-b-6qapj59dey {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item[b-6qapj59dey] {
    width: 100%;
    padding: 0.5rem 1rem;
    text-align: left;
    color: var(--wl-text-primary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.dropdown-item:first-child[b-6qapj59dey] {
    border-radius: 0.5rem 0.5rem 0 0;
}

.dropdown-item:last-child[b-6qapj59dey] {
    border-radius: 0 0 0.5rem 0.5rem;
}

.dropdown-item:hover[b-6qapj59dey] {
    background: var(--wl-gold-bg);
}
/* /Components/Buildings/InstrumentSelectionModal.razor.rz.scp.css */
.instrument-selection[b-v5c7hd0l69] {
    padding: 1.5rem;
}

.selection-prompt[b-v5c7hd0l69] {
    margin-bottom: 1.5rem;
    color: var(--wl-text-secondary);
    font-size: 0.95rem;
}

.category-grid[b-v5c7hd0l69] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
    .category-grid[b-v5c7hd0l69] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.category-btn[b-v5c7hd0l69] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--wl-surface-hover);
    border: 1px solid var(--wl-border);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    transition: all 0.2s ease;
    cursor: pointer;
}

.category-btn:hover[b-v5c7hd0l69] {
    border-color: var(--wl-gold);
    color: var(--wl-gold);
    background: var(--wl-surface-active);
}

.category-icon[b-v5c7hd0l69] {
    width: 2rem;
    height: 2rem;
}

.instrument-list[b-v5c7hd0l69] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    max-height: 15rem;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.instrument-option[b-v5c7hd0l69] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--wl-surface-hover);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.instrument-option:hover[b-v5c7hd0l69] {
    background: var(--wl-surface-active);
}

.instrument-option.selected[b-v5c7hd0l69] {
    border-color: var(--wl-gold);
    background: var(--wl-surface-active);
}

.instrument-option input[type="radio"][b-v5c7hd0l69] {
    accent-color: var(--wl-gold);
    width: 1rem;
    height: 1rem;
}

.instrument-name[b-v5c7hd0l69] {
    color: var(--wl-text-primary);
}

.cost-info[b-v5c7hd0l69] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--wl-surface-hover);
    border-radius: 0.5rem;
    color: var(--wl-text-muted);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.cost-icon[b-v5c7hd0l69] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-gold);
}

.action-buttons[b-v5c7hd0l69] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.btn-secondary[b-v5c7hd0l69] {
    padding: 0.625rem 1.25rem;
    background: var(--wl-surface-hover);
    border: 1px solid var(--wl-border);
    border-radius: 0.375rem;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-v5c7hd0l69] {
    background: var(--wl-surface-active);
    border-color: var(--wl-text-muted);
}

.btn-primary[b-v5c7hd0l69] {
    padding: 0.625rem 1.25rem;
    background: var(--wl-gold);
    border: none;
    border-radius: 0.375rem;
    color: var(--wl-bg-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover:not(:disabled)[b-v5c7hd0l69] {
    background: var(--wl-gold-hover);
}

.btn-primary:disabled[b-v5c7hd0l69] {
    opacity: 0.5;
    cursor: not-allowed;
}

.loading-text[b-v5c7hd0l69] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.error-message[b-v5c7hd0l69] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
    border-radius: 0.5rem;
    color: #ef4444;
    font-size: 0.875rem;
}

.error-icon[b-v5c7hd0l69] {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}
/* /Components/Events/EventModal.razor.rz.scp.css */
/* Event Modal Overlay */
.event-modal-overlay[b-su3mnh95ow] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: fadeIn-b-su3mnh95ow 0.3s ease-out;
}

@keyframes fadeIn-b-su3mnh95ow {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Container */
.event-modal[b-su3mnh95ow] {
    position: relative;
    max-width: 500px;
    width: 100%;
    background: linear-gradient(135deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.98) 50%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 0 40px var(--wl-gold-bg-hover),
        0 25px 50px -12px var(--wl-shadow-color);
    animation: slideUp-b-su3mnh95ow 0.4s ease-out;
}

@keyframes slideUp-b-su3mnh95ow {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Corner Decorations */
.event-modal-corner[b-su3mnh95ow] {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.5);
    z-index: 10;
}

.event-modal-corner-tl[b-su3mnh95ow] {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
}

.event-modal-corner-tr[b-su3mnh95ow] {
    top: 8px;
    right: 8px;
    border-left: none;
    border-bottom: none;
}

.event-modal-corner-bl[b-su3mnh95ow] {
    bottom: 8px;
    left: 8px;
    border-right: none;
    border-top: none;
}

.event-modal-corner-br[b-su3mnh95ow] {
    bottom: 8px;
    right: 8px;
    border-left: none;
    border-top: none;
}

/* Image Section */
.event-modal-image[b-su3mnh95ow] {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.event-modal-image[b-su3mnh95ow]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-modal-image-gradient[b-su3mnh95ow] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to top, var(--wl-bg-primary), transparent);
}

/* Body */
.event-modal-body[b-su3mnh95ow] {
    padding: 1.5rem 2rem 2rem;
}

/* Title */
.event-modal-title[b-su3mnh95ow] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--wl-gold);
    text-align: center;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.3);
}

.event-modal-title-decoration[b-su3mnh95ow] {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--wl-gold), transparent);
}

/* Content */
.event-modal-content[b-su3mnh95ow] {
    color: rgba(var(--wl-contrast-rgb), 0.9);
    line-height: 1.7;
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

/* Choices */
.event-modal-choices[b-su3mnh95ow] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.event-choice[b-su3mnh95ow] {
    position: relative;
    width: 100%;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold-bg) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 8px;
    color: var(--wl-text-primary);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.event-choice:hover:not(:disabled)[b-su3mnh95ow] {
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, var(--wl-gold-bg) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    transform: translateX(4px);
}

.event-choice:active:not(:disabled)[b-su3mnh95ow] {
    transform: translateX(2px);
}

.event-choice-disabled[b-su3mnh95ow] {
    opacity: 0.5;
    cursor: not-allowed;
}

.event-choice-text[b-su3mnh95ow] {
    display: block;
}

.event-choice-chance[b-su3mnh95ow] {
    display: block;
    font-size: 0.8rem;
    color: rgba(var(--wl-gold-rgb), 0.8);
    margin-top: 0.25rem;
}

.event-choice-disabled-reason[b-su3mnh95ow] {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 100, 100, 0.8);
    margin-top: 0.25rem;
}

/* Simple Button */
.event-modal-actions[b-su3mnh95ow] {
    display: flex;
    justify-content: center;
}

.event-modal-button[b-su3mnh95ow] {
    padding: 0.875rem 2.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #b8960c 100%);
    border: none;
    border-radius: 8px;
    color: var(--wl-bg-primary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.3);
}

.event-modal-button:hover[b-su3mnh95ow] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--wl-gold-rgb), 0.4);
}

.event-modal-button:active[b-su3mnh95ow] {
    transform: translateY(0);
}

/* Image Loading Placeholder */
.event-image-placeholder[b-su3mnh95ow] {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.98) 50%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.event-image-shimmer[b-su3mnh95ow] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.08) 20%,
        var(--wl-gold-bg-hover) 50%,
        rgba(var(--wl-gold-rgb), 0.08) 80%,
        transparent 100%
    );
    animation: shimmer-b-su3mnh95ow 1.5s infinite;
}

@keyframes shimmer-b-su3mnh95ow {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.event-image-loading-icon[b-su3mnh95ow] {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    color: rgba(var(--wl-gold-rgb), 0.5);
}

.event-image-loading-icon svg[b-su3mnh95ow] {
    width: 100%;
    height: 100%;
}

.event-modal-image[b-su3mnh95ow]  .event-image-loaded {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: imageReveal-b-su3mnh95ow 0.5s ease-out;
}

@keyframes imageReveal-b-su3mnh95ow {
    from {
        opacity: 0;
        transform: scale(1.05);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Choice Chance Colors */
.event-choice-chance[b-su3mnh95ow] {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.event-choice-chance.chance-high[b-su3mnh95ow] {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
}

.event-choice-chance.chance-medium[b-su3mnh95ow] {
    background: var(--wl-gold-border);
    color: var(--wl-gold);
}

.event-choice-chance.chance-low[b-su3mnh95ow] {
    background: rgba(255, 152, 0, 0.2);
    color: #ffb74d;
}

.event-choice-chance.chance-very-low[b-su3mnh95ow] {
    background: rgba(244, 67, 54, 0.2);
    color: #e57373;
}

/* Locked Icon */
.event-choice-locked-icon[b-su3mnh95ow] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 100, 100, 0.6);
}

/* Responsive */
@media (max-width: 640px) {
    .event-modal[b-su3mnh95ow] {
        max-width: 100%;
        margin: 0.5rem;
    }

    .event-modal-body[b-su3mnh95ow] {
        padding: 1rem 1.25rem 1.5rem;
    }

    .event-modal-title[b-su3mnh95ow] {
        font-size: 1.25rem;
    }
}
/* /Components/Events/QuestTracker.razor.rz.scp.css */
/* =====================================================
   QUEST TRACKER - Luxury Gaming Aesthetic
   Floating right-edge panel with premium feel
   ===================================================== */

.quest-tracker[b-ltjp5wilmo] {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 800;
    display: flex;
    align-items: stretch;
    pointer-events: none;
}

.quest-tracker > *[b-ltjp5wilmo] {
    pointer-events: auto;
}

/* Hide on mobile - show from xl (1280px) */
@media (max-width: 1279px) {
    .quest-tracker[b-ltjp5wilmo] {
        display: none;
    }
}

/* =====================================================
   TOGGLE BUTTON - Glowing edge tab
   ===================================================== */

.quest-tracker-toggle[b-ltjp5wilmo] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-height: 90px;
    background: linear-gradient(135deg,
        rgba(18, 18, 22, 0.95) 0%,
        rgba(12, 12, 16, 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-right: none;
    border-radius: 12px 0 0 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.quest-tracker-toggle[b-ltjp5wilmo]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        transparent 50%,
        rgba(var(--wl-gold-rgb), 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.quest-tracker-toggle:hover[b-ltjp5wilmo]::before {
    opacity: 1;
}

.quest-tracker-toggle:hover[b-ltjp5wilmo] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    box-shadow: -4px 0 20px var(--wl-gold-bg-hover);
}

/* Pulse animation when quests are active */
.quest-tracker-toggle.has-quests[b-ltjp5wilmo] {
    animation: togglePulse-b-ltjp5wilmo 2.5s ease-in-out infinite;
}

@keyframes togglePulse-b-ltjp5wilmo {
    0%, 100% {
        border-color: rgba(var(--wl-gold-rgb), 0.25);
        box-shadow: -2px 0 10px var(--wl-gold-bg);
    }
    50% {
        border-color: rgba(var(--wl-gold-rgb), 0.6);
        box-shadow: -4px 0 25px rgba(var(--wl-gold-rgb), 0.3);
    }
}

.toggle-inner[b-ltjp5wilmo] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 2;
}

.toggle-chevron[b-ltjp5wilmo] {
    width: 18px;
    height: 18px;
    color: var(--wl-gold);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.quest-tracker.expanded .toggle-chevron[b-ltjp5wilmo] {
    transform: rotate(180deg);
}

.toggle-glow[b-ltjp5wilmo] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, var(--wl-gold-bg-hover) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.quest-tracker-toggle:hover .toggle-glow[b-ltjp5wilmo] {
    opacity: 1;
}

/* Quest count badge */
.quest-count-badge[b-ltjp5wilmo] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #b8960c 100%);
    border-radius: 50%;
    box-shadow:
        0 2px 8px rgba(var(--wl-gold-rgb), 0.4),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.2);
}

.quest-count-badge span[b-ltjp5wilmo] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--wl-bg-primary);
    line-height: 1;
}

/* =====================================================
   PANEL - Glassmorphic container
   ===================================================== */

.quest-tracker-panel[b-ltjp5wilmo] {
    position: relative;
    width: 300px;
    max-height: 75vh;
    background: linear-gradient(165deg,
        rgba(18, 18, 22, 0.97) 0%,
        rgba(12, 12, 16, 0.99) 100%);
    border: 1px solid var(--wl-gold-border);
    border-right: none;
    border-radius: 16px 0 0 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        -20px 0 60px var(--wl-shadow-color),
        -5px 0 20px var(--wl-shadow-color),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.03);
    animation: panelSlideIn-b-ltjp5wilmo 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes panelSlideIn-b-ltjp5wilmo {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Decorative frame */
.panel-frame[b-ltjp5wilmo] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

.frame-corner[b-ltjp5wilmo] {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    border-style: solid;
}

.frame-tl[b-ltjp5wilmo] {
    top: 6px;
    left: 6px;
    border-width: 2px 0 0 2px;
}

.frame-tr[b-ltjp5wilmo] {
    top: 6px;
    right: 0;
    border-width: 2px 0 0 0;
    width: 20px;
}

.frame-bl[b-ltjp5wilmo] {
    bottom: 6px;
    left: 6px;
    border-width: 0 0 2px 2px;
}

.frame-br[b-ltjp5wilmo] {
    bottom: 6px;
    right: 0;
    border-width: 0 0 2px 0;
    width: 20px;
}

.frame-edge[b-ltjp5wilmo] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 30%,
        rgba(var(--wl-gold-rgb), 0.6) 50%,
        rgba(var(--wl-gold-rgb), 0.4) 70%,
        transparent 100%);
}

.frame-top[b-ltjp5wilmo] {
    top: 0;
}

.frame-bottom[b-ltjp5wilmo] {
    bottom: 0;
}

/* =====================================================
   HEADER
   ===================================================== */

.quest-tracker-header[b-ltjp5wilmo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        transparent 100%);
    border-bottom: 1px solid var(--wl-gold-bg-hover);
}

.header-icon[b-ltjp5wilmo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 6px;
}

.header-icon svg[b-ltjp5wilmo] {
    width: 16px;
    height: 16px;
    color: var(--wl-gold);
}

.header-title[b-ltjp5wilmo] {
    flex: 1;
    font-family: 'Bebas Neue', 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wl-gold);
    margin: 0;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.3);
}

.header-decoration[b-ltjp5wilmo] {
    width: 30px;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.5), transparent);
}

/* =====================================================
   EMPTY STATE
   ===================================================== */

.quest-empty-state[b-ltjp5wilmo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.empty-icon-container[b-ltjp5wilmo] {
    position: relative;
    margin-bottom: 1rem;
}

.empty-icon[b-ltjp5wilmo] {
    width: 48px;
    height: 48px;
    color: rgba(var(--wl-gold-rgb), 0.3);
}

.empty-icon-ring[b-ltjp5wilmo] {
    position: absolute;
    inset: -8px;
    border: 1px dashed var(--wl-gold-border);
    border-radius: 50%;
    animation: ringRotate-b-ltjp5wilmo 20s linear infinite;
}

@keyframes ringRotate-b-ltjp5wilmo {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.empty-text[b-ltjp5wilmo] {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 0.5rem;
}

.empty-hint[b-ltjp5wilmo] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

/* =====================================================
   QUEST LIST
   ===================================================== */

.quest-list[b-ltjp5wilmo] {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
}

/* Custom scrollbar */
.quest-list[b-ltjp5wilmo]::-webkit-scrollbar {
    width: 4px;
}

.quest-list[b-ltjp5wilmo]::-webkit-scrollbar-track {
    background: transparent;
}

.quest-list[b-ltjp5wilmo]::-webkit-scrollbar-thumb {
    background: rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 2px;
}

.quest-list[b-ltjp5wilmo]::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--wl-gold-rgb), 0.5);
}

/* =====================================================
   QUEST CARD
   ===================================================== */

.quest-card[b-ltjp5wilmo] {
    position: relative;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 10px;
    animation: cardFadeIn-b-ltjp5wilmo 0.3s ease forwards;
    opacity: 0;
    transform: translateY(10px);
}

@keyframes cardFadeIn-b-ltjp5wilmo {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.quest-card:last-child[b-ltjp5wilmo] {
    margin-bottom: 0;
}

.quest-card[b-ltjp5wilmo]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.3) 20%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        rgba(var(--wl-gold-rgb), 0.3) 80%,
        transparent 100%);
    border-radius: 10px 10px 0 0;
}

/* Card header */
.quest-card-header[b-ltjp5wilmo] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
}

.quest-icon[b-ltjp5wilmo] {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--wl-gold);
    opacity: 0.8;
}

.quest-icon svg[b-ltjp5wilmo] {
    width: 100%;
    height: 100%;
}

.quest-title[b-ltjp5wilmo] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.3;
}

.quest-timer[b-ltjp5wilmo] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    background: var(--wl-gold-bg);
    border: 1px solid var(--wl-gold-border);
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(var(--wl-gold-rgb), 0.9);
}

.quest-timer svg[b-ltjp5wilmo] {
    width: 12px;
    height: 12px;
}

.quest-timer.urgent[b-ltjp5wilmo] {
    background: rgba(var(--wl-red-rgb), 0.15);
    border-color: rgba(var(--wl-red-rgb), 0.3);
    color: #f87171;
    animation: timerPulse-b-ltjp5wilmo 1s ease-in-out infinite;
}

@keyframes timerPulse-b-ltjp5wilmo {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* =====================================================
   PROGRESS RING
   ===================================================== */

.quest-progress-section[b-ltjp5wilmo] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.875rem;
    padding: 0.625rem;
    background: var(--wl-surface-primary);
    border-radius: 8px;
}

.progress-ring-container[b-ltjp5wilmo] {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.progress-ring[b-ltjp5wilmo] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring-bg[b-ltjp5wilmo] {
    stroke: var(--wl-border-medium);
}

.progress-ring-fill[b-ltjp5wilmo] {
    stroke: var(--wl-gold);
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
    filter: drop-shadow(0 0 4px rgba(var(--wl-gold-rgb), 0.5));
}

.progress-percentage[b-ltjp5wilmo] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.progress-stats[b-ltjp5wilmo] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.progress-label[b-ltjp5wilmo] {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(var(--wl-contrast-rgb), 0.45);
}

.progress-count[b-ltjp5wilmo] {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

/* =====================================================
   OBJECTIVES
   ===================================================== */

.quest-objectives[b-ltjp5wilmo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.objective[b-ltjp5wilmo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0;
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    transition: all 0.2s ease;
}

.objective.completed[b-ltjp5wilmo] {
    color: rgba(var(--wl-gold-rgb), 0.7);
}

.objective.completed .objective-text[b-ltjp5wilmo] {
    text-decoration: line-through;
    opacity: 0.7;
}

.objective-check[b-ltjp5wilmo] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.objective.completed .objective-check[b-ltjp5wilmo] {
    background: var(--wl-gold-border);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.objective-check svg[b-ltjp5wilmo] {
    width: 12px;
    height: 12px;
    color: var(--wl-gold);
}

.objective-dot[b-ltjp5wilmo] {
    width: 6px;
    height: 6px;
    background: var(--wl-text-muted);
    border-radius: 50%;
}

.objective-text[b-ltjp5wilmo] {
    flex: 1;
    line-height: 1.3;
}

.objective-counter[b-ltjp5wilmo] {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.objective-counter .current[b-ltjp5wilmo] {
    color: var(--wl-gold);
}

.objective-counter .separator[b-ltjp5wilmo] {
    color: var(--wl-text-muted);
    margin: 0 1px;
}

.objective-counter .required[b-ltjp5wilmo] {
    color: var(--wl-text-muted);
}

/* =====================================================
   ACTIONS
   ===================================================== */

.quest-actions[b-ltjp5wilmo] {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.abandon-btn[b-ltjp5wilmo] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: transparent;
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(var(--wl-red-rgb), 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.abandon-btn svg[b-ltjp5wilmo] {
    width: 12px;
    height: 12px;
}

.abandon-btn:hover[b-ltjp5wilmo] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border-color: rgba(var(--wl-red-rgb), 0.4);
    color: #f87171;
}

/* =====================================================
   RESPONSIVE - Smaller screens within xl range
   ===================================================== */

@media (max-width: 1400px) {
    .quest-tracker-panel[b-ltjp5wilmo] {
        width: 280px;
    }
}
/* /Components/Layout/BlogLayout.razor.rz.scp.css */
.blog-page[b-v6zm9b0v5x] {
    min-height: 100vh;
    background: var(--wl-bg-primary);
    color: rgba(var(--wl-contrast-rgb), 0.92);
    display: flex;
    flex-direction: column;
    position: relative;
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
}

/* Film grain texture overlay */
.blog-grain[b-v6zm9b0v5x] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.018;
    z-index: 200;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Ambient gold warmth */
.blog-ambient[b-v6zm9b0v5x] {
    position: fixed;
    top: -30%;
    left: -10%;
    width: 60%;
    height: 60%;
    background: radial-gradient(ellipse, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Navigation */
.blog-nav[b-v6zm9b0v5x] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(var(--wl-bg-modal-deep-rgb), 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.blog-nav-content[b-v6zm9b0v5x] {
    max-width: 56rem;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-nav-accent[b-v6zm9b0v5x] {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.3), rgba(229, 193, 88, 0.15), transparent);
}

.blog-logo[b-v6zm9b0v5x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.blog-logo-img[b-v6zm9b0v5x] {
    height: 1.75rem;
    width: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.blog-logo:hover .blog-logo-img[b-v6zm9b0v5x] {
    opacity: 1;
}

.blog-logo-text[b-v6zm9b0v5x] {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(var(--wl-gold-rgb), 0.6);
    border-left: 1px solid var(--wl-border-medium);
    padding-left: 0.75rem;
}

.blog-nav-links[b-v6zm9b0v5x] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.blog-nav-link[b-v6zm9b0v5x] {
    color: rgba(var(--wl-contrast-rgb), 0.45);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.375rem 0.75rem;
    border-radius: 0.25rem;
    transition: color 0.3s ease, background 0.3s ease;
}

.blog-nav-link:hover[b-v6zm9b0v5x] {
    color: rgba(var(--wl-contrast-rgb), 0.85);
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.blog-nav-link.active[b-v6zm9b0v5x] {
    color: var(--wl-gold);
}

.blog-btn-ghost[b-v6zm9b0v5x] {
    color: rgba(var(--wl-contrast-rgb), 0.55);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    transition: color 0.3s ease;
}

.blog-btn-ghost:hover[b-v6zm9b0v5x] {
    color: var(--wl-text-primary);
}

.blog-btn-primary[b-v6zm9b0v5x] {
    background: linear-gradient(135deg, var(--wl-gold), #C9A431);
    color: var(--wl-bg-primary);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.5rem 1.25rem;
    border-radius: 0.375rem;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.blog-btn-primary:hover[b-v6zm9b0v5x] {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.25);
}

/* Main content */
.blog-main[b-v6zm9b0v5x] {
    flex: 1;
    max-width: 56rem;
    margin: 0 auto;
    padding: 3rem 2rem 4rem;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Footer */
.blog-footer[b-v6zm9b0v5x] {
    margin-top: auto;
    position: relative;
    z-index: 1;
}

.blog-footer-accent[b-v6zm9b0v5x] {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--wl-gold-bg-hover), transparent);
}

.blog-footer-content[b-v6zm9b0v5x] {
    max-width: 56rem;
    margin: 0 auto;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-footer-logo[b-v6zm9b0v5x] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: rgba(var(--wl-contrast-rgb), 0.25);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 500;
}

.blog-footer-img[b-v6zm9b0v5x] {
    height: 1.125rem;
    width: auto;
    opacity: 0.3;
}

.blog-footer-label[b-v6zm9b0v5x] {
    border-left: 1px solid var(--wl-border-medium);
    padding-left: 0.625rem;
}

.blog-footer-copy[b-v6zm9b0v5x] {
    color: rgba(var(--wl-contrast-rgb), 0.18);
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
}

@media (max-width: 640px) {
    .blog-nav-content[b-v6zm9b0v5x] {
        padding: 0.75rem 1.25rem;
    }

    .blog-main[b-v6zm9b0v5x] {
        padding: 2rem 1.25rem 3rem;
    }

    .blog-footer-content[b-v6zm9b0v5x] {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }

    .blog-logo-text[b-v6zm9b0v5x] {
        display: none;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-vz5wt5uo4e] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-vz5wt5uo4e] {
    flex: 1;
}

.sidebar[b-vz5wt5uo4e] {
    background-image: linear-gradient(180deg, var(--wl-bg-secondary) 0%, var(--wl-bg-secondary) 70%);
}

.top-row[b-vz5wt5uo4e] {
    background-color: var(--wl-bg-tertiary);
    border-bottom: 1px solid var(--wl-border-medium);
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-vz5wt5uo4e]  a, .top-row[b-vz5wt5uo4e]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-vz5wt5uo4e]  a:hover, .top-row[b-vz5wt5uo4e]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-vz5wt5uo4e]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-vz5wt5uo4e] {
        justify-content: space-between;
    }

    .top-row[b-vz5wt5uo4e]  a, .top-row[b-vz5wt5uo4e]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-vz5wt5uo4e] {
        flex-direction: row;
    }

    .sidebar[b-vz5wt5uo4e] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-vz5wt5uo4e] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-vz5wt5uo4e]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-vz5wt5uo4e], article[b-vz5wt5uo4e] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-vz5wt5uo4e] {
    background: var(--wl-bg-tertiary);
    bottom: 0;
    box-shadow: 0 -1px 2px var(--wl-shadow-color);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-vz5wt5uo4e] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-3rihc2gfr5] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--wl-text-primary);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid var(--wl-border-medium);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--wl-border-medium);
}

.navbar-toggler:checked[b-3rihc2gfr5] {
    background-color: var(--wl-text-muted);
}

.top-row[b-3rihc2gfr5] {
    height: 3.5rem;
    background-color: rgba(var(--wl-bg-modal-deep-rgb), 0.4);
}

.navbar-brand[b-3rihc2gfr5] {
    font-size: 1.1rem;
}

.bi[b-3rihc2gfr5] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-3rihc2gfr5] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-3rihc2gfr5] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-3rihc2gfr5] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-3rihc2gfr5] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-3rihc2gfr5] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-3rihc2gfr5] {
        padding-bottom: 1rem;
    }

    .nav-item[b-3rihc2gfr5]  .nav-link {
        color: var(--wl-text-secondary);
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-3rihc2gfr5]  a.active {
    background-color: rgba(var(--wl-contrast-rgb), 0.37);
    color: var(--wl-text-primary);
}

.nav-item[b-3rihc2gfr5]  .nav-link:hover {
    background-color: var(--wl-border-medium);
    color: var(--wl-text-primary);
}

.nav-scrollable[b-3rihc2gfr5] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-3rihc2gfr5] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-3rihc2gfr5] {
        display: none;
    }

    .nav-scrollable[b-3rihc2gfr5] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Negotiations/NegotiationModal.razor.rz.scp.css */
/* ============================================
   NEGOTIATION MODAL - FLAT LAYOUT
   No inner frame, compact, CTA always visible
   ============================================ */

/* Base - NO border, NO background, just content */
.negotiation-content[b-ptauasiu3r] {
    color: var(--wl-text-primary);
}

/* ============================================
   CANDIDATE HEADER - Compact
   ============================================ */

.candidate-header[b-ptauasiu3r] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--wl-gold-border);
}

.candidate-info[b-ptauasiu3r] {
    flex: 1;
    min-width: 0;
}

.candidate-name[b-ptauasiu3r] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    color: var(--wl-gold);
    margin: 0;
    line-height: 1.1;
}

.candidate-name span[b-ptauasiu3r] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-size: 0.9rem;
    font-family: inherit;
    margin-left: 0.5rem;
}

.candidate-tags[b-ptauasiu3r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.tag[b-ptauasiu3r] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tag svg[b-ptauasiu3r] {
    width: 0.75rem;
    height: 0.75rem;
}

.tag.vocalist[b-ptauasiu3r] {
    background: var(--wl-gold-bg-hover);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.tag.instrumentalist[b-ptauasiu3r] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.3);
    color: var(--wl-purple);
}

.tag.rating[b-ptauasiu3r] {
    background: var(--wl-gold-border);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.75rem;
    padding: 0.1875rem 0.5rem;
    line-height: 1;
}

/* Patience Bar - Compact */
.patience-bar[b-ptauasiu3r] {
    position: relative;
    width: 80px;
    height: 1.75rem;
    background: var(--wl-border-medium);
    border-radius: 1rem;
    overflow: hidden;
    flex-shrink: 0;
}

.patience-fill[b-ptauasiu3r] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 1rem;
    transition: width 0.5s ease, background 0.3s ease;
}

.patience-bar.high .patience-fill[b-ptauasiu3r] {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.patience-bar.medium .patience-fill[b-ptauasiu3r] {
    background: linear-gradient(90deg, #eab308, #facc15);
}

.patience-bar.low .patience-fill[b-ptauasiu3r] {
    background: linear-gradient(90deg, #dc2626, #f87171);
    animation: pulse-danger-b-ptauasiu3r 1s ease-in-out infinite;
}

@keyframes pulse-danger-b-ptauasiu3r {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.patience-text[b-ptauasiu3r] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    color: var(--wl-text-primary);
    text-shadow: 0 1px 2px var(--wl-shadow-color);
    z-index: 1;
}

/* ============================================
   OFFERS COMPARISON - Side by Side
   ============================================ */

.offers-comparison[b-ptauasiu3r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.offer-column[b-ptauasiu3r] {
    padding: 0.625rem;
    border-radius: 0.5rem;
}

.offer-column.theirs[b-ptauasiu3r] {
    background: rgba(var(--wl-purple-rgb), 0.08);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
}

.offer-column.yours[b-ptauasiu3r] {
    background: rgba(var(--wl-gold-rgb), 0.08);
    border: 1px solid var(--wl-gold-border);
}

.offer-label[b-ptauasiu3r] {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--wl-border-medium);
}

.offer-column.theirs .offer-label[b-ptauasiu3r] {
    color: var(--wl-purple);
}

.offer-column.yours .offer-label[b-ptauasiu3r] {
    color: var(--wl-gold);
}

.offer-row[b-ptauasiu3r] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin-bottom: 0.5rem;
}

.offer-row:last-child[b-ptauasiu3r] {
    margin-bottom: 0;
}

.row-label[b-ptauasiu3r] {
    font-size: 0.5625rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.row-value[b-ptauasiu3r] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    /* Match input height for symmetry */
    min-height: 2.125rem;
    display: flex;
    align-items: center;
}

.offer-column.theirs .row-value[b-ptauasiu3r] {
    color: #c4b5fd;
}

/* Input Wrap */
.input-wrap[b-ptauasiu3r] {
    display: flex;
    align-items: center;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border: 1px solid var(--wl-gold-border);
    border-radius: 0.25rem;
    transition: border-color 0.2s ease;
    /* Match row-value height for symmetry */
    min-height: 2.125rem;
}

.input-wrap:focus-within[b-ptauasiu3r] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
}

.input-wrap input[b-ptauasiu3r] {
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 0.375rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--wl-gold);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
}

.input-wrap input:focus[b-ptauasiu3r] {
    outline: none;
}

.input-wrap input[b-ptauasiu3r]::-webkit-outer-spin-button,
.input-wrap input[b-ptauasiu3r]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.input-wrap .unit[b-ptauasiu3r] {
    padding: 0 0.5rem;
    font-size: 0.625rem;
    color: rgba(var(--wl-gold-rgb), 0.6);
    font-weight: 600;
    text-transform: uppercase;
}

/* ============================================
   REACTION QUOTE
   ============================================ */

.reaction[b-ptauasiu3r] {
    padding: 0.625rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--wl-surface-primary);
    border-left: 3px solid rgba(var(--wl-contrast-rgb), 0.2);
    border-radius: 0 0.375rem 0.375rem 0;
    font-style: italic;
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    line-height: 1.4;
}

.reaction.warning[b-ptauasiu3r] {
    border-left-color: #eab308;
    background: rgba(234, 179, 8, 0.08);
}

.reaction.success[b-ptauasiu3r] {
    border-left-color: #22c55e;
    background: rgba(34, 197, 94, 0.08);
}

.reaction.error[b-ptauasiu3r] {
    border-left-color: #ef4444;
    background: rgba(var(--wl-red-rgb), 0.08);
}

.quote-mark[b-ptauasiu3r] {
    color: var(--wl-text-muted);
    font-size: 1rem;
}

/* ============================================
   BALANCE WARNING
   ============================================ */

.balance-warning[b-ptauasiu3r] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.25);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: #f87171;
}

.balance-warning svg[b-ptauasiu3r] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.action-row[b-ptauasiu3r] {
    display: flex;
    gap: 0.625rem;
}

.btn-secondary[b-ptauasiu3r],
.btn-primary[b-ptauasiu3r] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary[b-ptauasiu3r] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.btn-secondary:hover[b-ptauasiu3r] {
    background: var(--wl-border-medium);
    color: var(--wl-text-primary);
}

.btn-primary[b-ptauasiu3r] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border: none;
    color: var(--wl-bg-primary);
    box-shadow: 0 2px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-primary:hover:not(:disabled)[b-ptauasiu3r] {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.4);
}

.btn-primary:disabled[b-ptauasiu3r] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-primary.sign[b-ptauasiu3r] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    box-shadow: 0 2px 12px rgba(34, 197, 94, 0.3);
}

.btn-primary.sign:hover:not(:disabled)[b-ptauasiu3r] {
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
}

.btn-primary svg[b-ptauasiu3r],
.btn-secondary svg[b-ptauasiu3r] {
    width: 1rem;
    height: 1rem;
}

.spinner[b-ptauasiu3r] {
    width: 1rem;
    height: 1rem;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-ptauasiu3r 0.8s linear infinite;
}

@keyframes spin-b-ptauasiu3r {
    to { transform: rotate(360deg); }
}

/* ============================================
   RESULT STATES (Success/Rejected)
   ============================================ */

.result-state[b-ptauasiu3r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 0;
}

.result-icon[b-ptauasiu3r] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.result-icon svg[b-ptauasiu3r] {
    width: 100%;
    height: 100%;
}

.result-icon.success svg[b-ptauasiu3r] {
    color: #22c55e;
    filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.5));
}

.result-icon.rejected svg[b-ptauasiu3r] {
    color: #ef4444;
    filter: drop-shadow(0 0 12px rgba(var(--wl-red-rgb), 0.5));
}

.result-title[b-ptauasiu3r] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem 0;
}

.result-title.success[b-ptauasiu3r] { color: #22c55e; }
.result-title.rejected[b-ptauasiu3r] { color: #ef4444; }

.result-message[b-ptauasiu3r] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0 0 1.5rem 0;
    max-width: 260px;
    line-height: 1.5;
}

.btn-close[b-ptauasiu3r] {
    padding: 0.625rem 1.5rem;
    background: var(--wl-border-medium);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 0.375rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close:hover[b-ptauasiu3r] {
    background: rgba(var(--wl-contrast-rgb), 0.12);
}

.btn-close.success[b-ptauasiu3r] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.btn-close.success:hover[b-ptauasiu3r] {
    background: rgba(34, 197, 94, 0.15);
}

/* ============================================
   SIGNATURE STATE
   ============================================ */

.signature-state[b-ptauasiu3r] {
    padding: 0.5rem 0;
}

.signature-banner[b-ptauasiu3r] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 0.5rem;
}

.signature-banner svg[b-ptauasiu3r] {
    width: 1.5rem;
    height: 1.5rem;
    color: #22c55e;
    flex-shrink: 0;
}

.banner-text[b-ptauasiu3r] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.banner-text strong[b-ptauasiu3r] {
    font-size: 0.875rem;
    color: #4ade80;
}

.banner-text span[b-ptauasiu3r] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.final-terms[b-ptauasiu3r] {
    margin-bottom: 1rem;
}

.term-line[b-ptauasiu3r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.term-line:last-child[b-ptauasiu3r] {
    border-bottom: none;
}

.term-line > span:first-child[b-ptauasiu3r] {
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.term-amount[b-ptauasiu3r] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-gold);
}

.term-amount small[b-ptauasiu3r] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-gold-rgb), 0.7);
    margin-left: 0.25rem;
}

.term-amount em[b-ptauasiu3r] {
    font-size: 0.6875rem;
    font-style: normal;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 400px) {
    .offers-comparison[b-ptauasiu3r] {
        grid-template-columns: 1fr;
    }

    .candidate-header[b-ptauasiu3r] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .patience-bar[b-ptauasiu3r] {
        width: 100%;
    }

    .action-row[b-ptauasiu3r] {
        flex-direction: column;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .negotiation-content *[b-ptauasiu3r],
    .negotiation-content *[b-ptauasiu3r]::before,
    .negotiation-content *[b-ptauasiu3r]::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/Admin/AdminLayout.razor.rz.scp.css */
/* Admin Layout */
.admin-container[b-8udcix6ybi] {
    display: flex;
    min-height: 100vh;
    background: var(--wl-bg-primary);
}

/* Sidebar */
.admin-sidebar[b-8udcix6ybi] {
    width: 240px;
    min-width: 240px;
    background: var(--wl-bg-secondary);
    border-right: 1px solid var(--wl-border-medium);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
}

.sidebar-header[b-8udcix6ybi] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--wl-border-medium);
}

.sidebar-logo[b-8udcix6ybi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--wl-gold);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.sidebar-logo[b-8udcix6ybi]  svg {
    width: 1.5rem;
    height: 1.5rem;
}

.sidebar-nav[b-8udcix6ybi] {
    flex: 1;
    padding: 1rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nav-item[b-8udcix6ybi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.nav-item:hover[b-8udcix6ybi] {
    color: rgba(var(--wl-contrast-rgb), 0.9);
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.nav-item.active[b-8udcix6ybi] {
    color: var(--wl-gold);
    background: var(--wl-gold-bg-hover);
}

.nav-item[b-8udcix6ybi]  svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.sidebar-footer[b-8udcix6ybi] {
    padding: 0.75rem;
    border-top: 1px solid var(--wl-border-medium);
}

/* Main Content */
.admin-main[b-8udcix6ybi] {
    flex: 1;
    margin-left: 240px;
    padding: 2rem;
    overflow-y: auto;
    min-height: 100vh;
}

/* Loading State */
.admin-loading[b-8udcix6ybi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--wl-bg-primary);
    color: rgba(var(--wl-contrast-rgb), 0.6);
    gap: 1rem;
}

.loading-spinner[b-8udcix6ybi] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-8udcix6ybi 0.8s linear infinite;
}

@keyframes spin-b-8udcix6ybi {
    to { transform: rotate(360deg); }
}

/* Responsive: hide sidebar on small screens, show as overlay */
@media (max-width: 768px) {
    .admin-sidebar[b-8udcix6ybi] {
        display: none;
    }

    .admin-main[b-8udcix6ybi] {
        margin-left: 0;
        padding: 1rem;
    }
}
/* /Components/Pages/Admin/Blog/Edit.razor.rz.scp.css */
/* Back Link */
.back-link[b-5dod1qsr12] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    transition: color 0.15s ease;
}

.back-link:hover[b-5dod1qsr12] {
    color: var(--wl-gold);
}

.back-link[b-5dod1qsr12]  svg {
    width: 1rem;
    height: 1rem;
}

/* Loading & Not Found */
.loading-state[b-5dod1qsr12] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: var(--wl-text-muted);
    gap: 1rem;
}

.loading-spinner[b-5dod1qsr12] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-5dod1qsr12 0.8s linear infinite;
}

.not-found[b-5dod1qsr12] {
    text-align: center;
    padding: 4rem 0;
    color: var(--wl-text-muted);
}

.not-found h2[b-5dod1qsr12] {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin-bottom: 0.5rem;
}

.not-found p[b-5dod1qsr12] {
    margin-bottom: 1.5rem;
}

.btn-back[b-5dod1qsr12] {
    display: inline-flex;
    padding: 0.5rem 1rem;
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-back:hover[b-5dod1qsr12] {
    background: rgba(var(--wl-gold-rgb), 0.25);
}

/* Editor Container */
.editor-container[b-5dod1qsr12] {
    max-width: 52rem;
}

.page-title[b-5dod1qsr12] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
}

/* Error Banner */
.error-banner[b-5dod1qsr12] {
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-red-rgb), 0.12);
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
    border-radius: 0.5rem;
    color: #F87171;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    animation: fadeIn-b-5dod1qsr12 0.2s ease;
}

/* Form Card */
.form-card[b-5dod1qsr12] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    padding: 2rem;
}

.form-group[b-5dod1qsr12] {
    margin-bottom: 1.5rem;
}

.form-group:last-child[b-5dod1qsr12] {
    margin-bottom: 0;
}

.form-label[b-5dod1qsr12] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.char-count[b-5dod1qsr12] {
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--wl-text-muted);
}

.char-count.over-limit[b-5dod1qsr12] {
    color: #F87171;
}

/* Inputs */
.form-input[b-5dod1qsr12] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.form-input[b-5dod1qsr12]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.25);
}

.form-input:focus[b-5dod1qsr12] {
    outline: none;
    border-color: var(--wl-gold);
    box-shadow: 0 0 0 2px var(--wl-gold-bg-hover);
}

.form-textarea[b-5dod1qsr12] {
    resize: vertical;
    line-height: 1.6;
    min-height: 5rem;
}

.form-textarea-content[b-5dod1qsr12] {
    font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace;
    font-size: 0.8125rem;
    line-height: 1.7;
    min-height: 20rem;
}

/* Tags */
.tags-container[b-5dod1qsr12] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tag-chip[b-5dod1qsr12] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 9999px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.tag-chip:hover[b-5dod1qsr12] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.tag-chip.selected[b-5dod1qsr12] {
    background: var(--wl-gold-bg-hover);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold-light);
}

.tag-chip.selected:hover[b-5dod1qsr12] {
    background: var(--wl-gold-border);
    border-color: rgba(var(--wl-gold-rgb), 0.5);
}

.no-tags-hint[b-5dod1qsr12] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    font-style: italic;
    margin: 0;
}

/* Checkbox (Publish) */
.checkbox-label[b-5dod1qsr12] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
}

.checkbox-input[b-5dod1qsr12] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.checkbox-custom[b-5dod1qsr12] {
    width: 1.125rem;
    height: 1.125rem;
    border: 1.5px solid rgba(var(--wl-contrast-rgb), 0.25);
    border-radius: 0.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    transition: all 0.15s ease;
    position: relative;
    flex-shrink: 0;
}

.checkbox-input:checked ~ .checkbox-custom[b-5dod1qsr12] {
    background: var(--wl-gold);
    border-color: var(--wl-gold);
}

.checkbox-input:checked ~ .checkbox-custom[b-5dod1qsr12]::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid var(--wl-bg-primary);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-input:focus-visible ~ .checkbox-custom[b-5dod1qsr12] {
    box-shadow: 0 0 0 2px rgba(var(--wl-gold-rgb), 0.3);
}

.checkbox-text[b-5dod1qsr12] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

/* Audio Section */
.audio-section[b-5dod1qsr12] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    padding: 1.5rem 2rem;
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.audio-status[b-5dod1qsr12] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.audio-status-text[b-5dod1qsr12] {
    font-size: 0.8125rem;
    font-weight: 500;
}

.audio-ready[b-5dod1qsr12] {
    color: #4ADE80;
}

.audio-none[b-5dod1qsr12] {
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

.audio-preview[b-5dod1qsr12] {
    width: 100%;
    height: 2rem;
    border-radius: 0.25rem;
}

.btn-audio[b-5dod1qsr12] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--wl-gold-bg);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 0.5rem;
    color: var(--wl-gold);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    align-self: flex-start;
}

.btn-audio:hover:not(:disabled)[b-5dod1qsr12] {
    background: rgba(var(--wl-gold-rgb), 0.18);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.btn-audio:disabled[b-5dod1qsr12] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-audio[b-5dod1qsr12]  svg {
    width: 1rem;
    height: 1rem;
}

.audio-spinner[b-5dod1qsr12] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    border-top-color: var(--wl-gold);
}

.audio-message[b-5dod1qsr12] {
    font-size: 0.8125rem;
    font-weight: 500;
}

.audio-success[b-5dod1qsr12] {
    color: #4ADE80;
}

.audio-error[b-5dod1qsr12] {
    color: #F87171;
}

/* Form Actions */
.form-actions[b-5dod1qsr12] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* Save Button */
.btn-save[b-5dod1qsr12] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-save:hover:not(:disabled)[b-5dod1qsr12] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-save:disabled[b-5dod1qsr12] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-save[b-5dod1qsr12]  svg {
    width: 1rem;
    height: 1rem;
}

/* Cancel Button */
.btn-cancel[b-5dod1qsr12] {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    background: transparent;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 0.5rem;
    color: var(--wl-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-cancel:hover[b-5dod1qsr12] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

/* Delete Button */
.btn-delete[b-5dod1qsr12] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.25);
    border-radius: 0.5rem;
    color: #F87171;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-left: auto;
}

.btn-delete:hover:not(:disabled)[b-5dod1qsr12] {
    background: rgba(var(--wl-red-rgb), 0.18);
    border-color: rgba(var(--wl-red-rgb), 0.4);
}

.btn-delete:disabled[b-5dod1qsr12] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-delete[b-5dod1qsr12]  svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* Spinners */
.saving-spinner[b-5dod1qsr12] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--wl-bg-dark-rgb), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-5dod1qsr12 0.8s linear infinite;
    display: inline-block;
}

.delete-spinner[b-5dod1qsr12] {
    border-color: rgba(248, 113, 113, 0.3);
    border-top-color: #F87171;
}

/* Animations */
@keyframes spin-b-5dod1qsr12 {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn-b-5dod1qsr12 {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Components/Pages/Admin/Blog/Index.razor.rz.scp.css */
/* Page Header */
.page-header[b-8gb4ot6htd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.page-title[b-8gb4ot6htd] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
}

.page-subtitle[b-8gb4ot6htd] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin-top: 0.25rem;
}

.header-actions[b-8gb4ot6htd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-new[b-8gb4ot6htd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-new:hover[b-8gb4ot6htd] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-new[b-8gb4ot6htd]  svg {
    width: 1.125rem;
    height: 1.125rem;
}

.btn-secondary[b-8gb4ot6htd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
    color: rgba(var(--wl-contrast-rgb), 0.8);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-secondary:hover[b-8gb4ot6htd] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.25);
    color: var(--wl-text-primary);
}

.btn-secondary[b-8gb4ot6htd]  svg {
    width: 1rem;
    height: 1rem;
}

/* Posts Table */
.posts-table[b-8gb4ot6htd] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    overflow: hidden;
}

.table-header[b-8gb4ot6htd] {
    display: grid;
    grid-template-columns: 1fr 7rem 1fr 7rem 4rem;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-bottom: 1px solid var(--wl-border-medium);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table-row[b-8gb4ot6htd] {
    display: grid;
    grid-template-columns: 1fr 7rem 1fr 7rem 4rem;
    gap: 1rem;
    padding: 1rem 1.25rem;
    align-items: center;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    transition: background 0.15s ease;
}

.table-row:last-child[b-8gb4ot6htd] {
    border-bottom: none;
}

.table-row:hover[b-8gb4ot6htd] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

/* Title Column */
.col-title[b-8gb4ot6htd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.post-title[b-8gb4ot6htd] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    text-decoration: none;
    transition: color 0.15s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-title:hover[b-8gb4ot6htd] {
    color: var(--wl-gold);
}

.post-slug[b-8gb4ot6htd] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status Badges */
.badge[b-8gb4ot6htd] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    width: fit-content;
}

.badge-published[b-8gb4ot6htd] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ADE80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-draft[b-8gb4ot6htd] {
    background: rgba(245, 158, 11, 0.12);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Tags Column */
.col-tags[b-8gb4ot6htd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    min-width: 0;
}

.tag-chip[b-8gb4ot6htd] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: var(--wl-border-subtle);
    border: 1px solid var(--wl-border-medium);
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.55);
    white-space: nowrap;
}

/* Date Column */
.col-date[b-8gb4ot6htd] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
}

/* Actions Column */
.col-actions[b-8gb4ot6htd] {
    display: flex;
    justify-content: flex-end;
}

.btn-edit[b-8gb4ot6htd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: transparent;
    color: var(--wl-text-muted);
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-edit:hover[b-8gb4ot6htd] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
    background: var(--wl-gold-bg);
}

.btn-edit[b-8gb4ot6htd]  svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Loading State */
.loading-state[b-8gb4ot6htd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: var(--wl-text-muted);
    gap: 1rem;
}

.loading-spinner[b-8gb4ot6htd] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-8gb4ot6htd 0.8s linear infinite;
}

@keyframes spin-b-8gb4ot6htd {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state[b-8gb4ot6htd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    gap: 1rem;
}

.empty-state[b-8gb4ot6htd]  svg {
    width: 3rem;
    height: 3rem;
    opacity: 0.5;
}

.empty-state p[b-8gb4ot6htd] {
    font-size: 1rem;
}

.btn-new-small[b-8gb4ot6htd] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-new-small:hover[b-8gb4ot6htd] {
    background: rgba(var(--wl-gold-rgb), 0.25);
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-8gb4ot6htd] {
        flex-direction: column;
        gap: 1rem;
    }

    .header-actions[b-8gb4ot6htd] {
        width: 100%;
    }

    .table-header[b-8gb4ot6htd] {
        display: none;
    }

    .table-row[b-8gb4ot6htd] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem 1.25rem;
    }

    .col-title[b-8gb4ot6htd] {
        order: 1;
    }

    .col-status[b-8gb4ot6htd] {
        order: 2;
    }

    .col-tags[b-8gb4ot6htd] {
        order: 3;
    }

    .col-date[b-8gb4ot6htd] {
        order: 4;
        font-size: 0.75rem;
    }

    .col-actions[b-8gb4ot6htd] {
        order: 5;
        justify-content: flex-start;
    }
}
/* /Components/Pages/Admin/Blog/Tags.razor.rz.scp.css */
/* Page Header */
.page-header[b-u1xdk5o6mu] {
    margin-bottom: 2rem;
}

.page-title[b-u1xdk5o6mu] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
}

.page-subtitle[b-u1xdk5o6mu] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin-top: 0.25rem;
}

.back-link[b-u1xdk5o6mu] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.15s ease;
}

.back-link:hover[b-u1xdk5o6mu] {
    color: var(--wl-gold);
}

.back-link[b-u1xdk5o6mu]  svg {
    width: 1rem;
    height: 1rem;
}

/* Add Tag Form */
.add-tag-form[b-u1xdk5o6mu] {
    margin-bottom: 2rem;
}

.form-row[b-u1xdk5o6mu] {
    display: flex;
    gap: 0.75rem;
    max-width: 32rem;
}

.tag-input[b-u1xdk5o6mu] {
    flex: 1;
    padding: 0.625rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.15s ease;
}

.tag-input[b-u1xdk5o6mu]::placeholder {
    color: var(--wl-text-muted);
}

.tag-input:focus[b-u1xdk5o6mu] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
}

.btn-add[b-u1xdk5o6mu] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-add:hover:not(:disabled)[b-u1xdk5o6mu] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-add:disabled[b-u1xdk5o6mu] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-add[b-u1xdk5o6mu]  svg {
    width: 1rem;
    height: 1rem;
}

.btn-spinner[b-u1xdk5o6mu] {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid rgba(var(--wl-bg-dark-rgb), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-u1xdk5o6mu 0.6s linear infinite;
}

/* Tags List */
.tags-list[b-u1xdk5o6mu] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 40rem;
}

.tag-item[b-u1xdk5o6mu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    transition: border-color 0.15s ease;
}

.tag-item:hover[b-u1xdk5o6mu] {
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
}

.tag-info[b-u1xdk5o6mu] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tag-name[b-u1xdk5o6mu] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.tag-slug[b-u1xdk5o6mu] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    font-family: monospace;
    padding: 0.125rem 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.25rem;
}

.btn-delete[b-u1xdk5o6mu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    border: 1px solid var(--wl-border-medium);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.btn-delete:hover[b-u1xdk5o6mu] {
    border-color: rgba(var(--wl-red-rgb), 0.3);
    color: #EF4444;
    background: rgba(var(--wl-red-rgb), 0.1);
}

.btn-delete[b-u1xdk5o6mu]  svg {
    width: 1rem;
    height: 1rem;
}

/* Tags Count */
.tags-count[b-u1xdk5o6mu] {
    margin-top: 1rem;
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

/* Loading State */
.loading-state[b-u1xdk5o6mu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: var(--wl-text-muted);
    gap: 1rem;
}

.loading-spinner[b-u1xdk5o6mu] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-u1xdk5o6mu 0.8s linear infinite;
}

@keyframes spin-b-u1xdk5o6mu {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state[b-u1xdk5o6mu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    gap: 1rem;
}

.empty-state[b-u1xdk5o6mu]  svg {
    width: 3rem;
    height: 3rem;
    opacity: 0.5;
}

.empty-state p[b-u1xdk5o6mu] {
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 640px) {
    .form-row[b-u1xdk5o6mu] {
        flex-direction: column;
    }

    .tag-info[b-u1xdk5o6mu] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}
/* /Components/Pages/Admin/DesignerCollections/Index.razor.rz.scp.css */
.designer-admin[b-00s341n99u] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.page-header[b-00s341n99u],
.panel-header[b-00s341n99u],
.designer-selected[b-00s341n99u],
.danger-zone[b-00s341n99u],
.pager[b-00s341n99u] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.page-title[b-00s341n99u] {
    margin: 0;
    color: var(--wl-text-primary);
    font-size: 1.75rem;
    font-weight: 800;
}

.page-subtitle[b-00s341n99u],
.panel-header p[b-00s341n99u],
.danger-zone span[b-00s341n99u],
.designer-selected span[b-00s341n99u] {
    margin: 0.25rem 0 0;
    color: var(--wl-text-muted);
    font-size: 0.86rem;
}

.metric-grid[b-00s341n99u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
}

.metric-tile[b-00s341n99u],
.insight-panel[b-00s341n99u],
.collection-list[b-00s341n99u],
.editor-panel[b-00s341n99u] {
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.78);
}

.metric-tile[b-00s341n99u] {
    padding: 1rem;
}

.metric-value[b-00s341n99u] {
    display: block;
    color: var(--wl-text-primary);
    font-size: 1.6rem;
    font-weight: 800;
}

.metric-label[b-00s341n99u] {
    color: var(--wl-text-muted);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-sections[b-00s341n99u] {
    display: grid;
    gap: 1rem;
    align-items: start;
}

.insight-panel[b-00s341n99u],
.collection-list[b-00s341n99u],
.editor-panel[b-00s341n99u] {
    padding: 1rem;
}

.panel-header[b-00s341n99u] {
    margin-bottom: 1rem;
}

.panel-header.compact[b-00s341n99u] {
    align-items: center;
    margin: 1rem 0 0.75rem;
}

.panel-header h2[b-00s341n99u],
.panel-header h3[b-00s341n99u] {
    margin: 0;
    color: var(--wl-text-primary);
    font-size: 1.1rem;
}

.search-row[b-00s341n99u],
.designer-search[b-00s341n99u],
.upload-box[b-00s341n99u] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.search-row[b-00s341n99u] {
    margin-bottom: 0.75rem;
}

input[b-00s341n99u],
select[b-00s341n99u] {
    width: 100%;
    min-height: 2.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.45rem;
    background: var(--wl-bg-primary);
    color: var(--wl-text-primary);
}

input:disabled[b-00s341n99u] {
    opacity: 0.55;
    cursor: not-allowed;
}

.collection-rows[b-00s341n99u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 0.75rem;
}

.collection-row[b-00s341n99u] {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.collection-card[b-00s341n99u] {
    align-items: stretch;
}

.collection-row:hover[b-00s341n99u],
.collection-row.active[b-00s341n99u] {
    border-color: var(--wl-gold-border);
    background: var(--wl-gold-bg);
}

.collection-preview[b-00s341n99u],
.top-collection-preview[b-00s341n99u] {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.45rem;
    background:
        radial-gradient(circle at 50% 18%, rgba(var(--wl-gold-rgb), 0.08), transparent 48%),
        rgba(var(--wl-bg-primary-rgb), 0.64);
}

.collection-preview[b-00s341n99u] {
    width: 96px;
    min-height: 118px;
}

.collection-preview img[b-00s341n99u],
.top-collection-preview img[b-00s341n99u] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.collection-preview > span[b-00s341n99u],
.top-collection-preview > span[b-00s341n99u] {
    color: var(--wl-text-muted);
    font-weight: 900;
}

.top-collection-preview > span[b-00s341n99u] {
    font-size: 0.68rem;
}

.row-main[b-00s341n99u],
.card-badges[b-00s341n99u] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.collection-card-main[b-00s341n99u] {
    min-width: 0;
    gap: 0.7rem;
}

.collection-card-head[b-00s341n99u],
.status-pills[b-00s341n99u] {
    display: flex;
    gap: 0.6rem;
}

.collection-card-head[b-00s341n99u] {
    align-items: flex-start;
    justify-content: space-between;
}

.status-pills[b-00s341n99u] {
    align-items: flex-end;
    flex: 0 0 auto;
    flex-direction: column;
}

.row-title[b-00s341n99u] {
    color: var(--wl-text-primary);
    font-weight: 700;
}

.row-subtitle[b-00s341n99u],
.designer-note[b-00s341n99u] {
    color: var(--wl-text-muted);
    font-size: 0.78rem;
}

.row-subtitle[b-00s341n99u] {
    display: block;
    margin-top: 0.18rem;
    overflow-wrap: anywhere;
}

.collection-stats[b-00s341n99u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 0.45rem;
}

.collection-stats > span[b-00s341n99u] {
    min-width: 0;
    padding: 0.5rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.45rem;
    background: rgba(var(--wl-bg-primary-rgb), 0.42);
}

.collection-stats small[b-00s341n99u],
.top-collection-stat small[b-00s341n99u] {
    display: block;
    color: var(--wl-text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.collection-stats strong[b-00s341n99u],
.top-collection-stat strong[b-00s341n99u] {
    display: block;
    min-width: 0;
    margin-top: 0.16rem;
    color: var(--wl-text-primary);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.collection-limit[b-00s341n99u] {
    color: var(--wl-gold);
    font-size: 0.76rem;
    font-weight: 800;
}

.limited-pill[b-00s341n99u],
.era-current[b-00s341n99u],
.status-pill[b-00s341n99u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.16rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--wl-gold-border);
    color: var(--wl-gold);
    background: var(--wl-gold-bg);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.status-pill[b-00s341n99u] {
    border-color: var(--wl-border-subtle);
    color: var(--wl-text-muted);
    background: rgba(var(--wl-bg-primary-rgb), 0.45);
}

.status-pill.active-status[b-00s341n99u] {
    border-color: rgba(34, 197, 94, 0.35);
    color: #22C55E;
    background: rgba(34, 197, 94, 0.08);
}

.status-pill.inactive-status[b-00s341n99u] {
    border-color: rgba(var(--wl-red-rgb), 0.28);
    color: #EF4444;
    background: rgba(var(--wl-red-rgb), 0.08);
}

.top-collection-list[b-00s341n99u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.6rem;
}

.top-collection-row[b-00s341n99u] {
    display: grid;
    grid-template-columns: auto 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    background: rgba(var(--wl-bg-primary-rgb), 0.38);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.top-collection-row:hover[b-00s341n99u] {
    border-color: var(--wl-gold-border);
    background: var(--wl-gold-bg);
}

.top-collection-rank[b-00s341n99u] {
    color: var(--wl-gold);
    font-size: 0.74rem;
    font-weight: 900;
}

.top-collection-preview[b-00s341n99u] {
    width: 48px;
    height: 56px;
}

.top-collection-main[b-00s341n99u] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
}

.top-collection-main strong[b-00s341n99u] {
    color: var(--wl-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-collection-main small[b-00s341n99u] {
    color: var(--wl-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-collection-stat[b-00s341n99u] {
    text-align: right;
}

.form-grid[b-00s341n99u] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

label[b-00s341n99u] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--wl-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.field-hint[b-00s341n99u] {
    color: var(--wl-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: none;
}

.wide[b-00s341n99u] {
    grid-column: 1 / -1;
}

.toggle-row[b-00s341n99u] {
    align-items: center;
    flex-direction: row;
    grid-column: 1 / -1;
    text-transform: none;
    letter-spacing: 0;
}

.toggle-row input[b-00s341n99u],
.tag-chip input[b-00s341n99u] {
    width: auto;
    min-height: 0;
}

.designer-box[b-00s341n99u],
.limited-box[b-00s341n99u],
.readonly-limited[b-00s341n99u],
.detail-preview[b-00s341n99u],
.tag-editor[b-00s341n99u],
.danger-zone[b-00s341n99u],
.upload-box[b-00s341n99u] {
    margin-top: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    background: rgba(var(--wl-bg-primary-rgb), 0.46);
}

.designer-box[b-00s341n99u] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.designer-results[b-00s341n99u] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.4rem;
}

.designer-results button[b-00s341n99u] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.45rem;
    background: var(--wl-bg-secondary);
    color: var(--wl-text-primary);
    cursor: pointer;
}

.share-input[b-00s341n99u] {
    max-width: 220px;
}

.upload-box[b-00s341n99u] {
    justify-content: space-between;
    color: var(--wl-text-muted);
    font-size: 0.85rem;
}

.readonly-limited[b-00s341n99u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--wl-text-muted);
}

.readonly-limited strong[b-00s341n99u] {
    color: var(--wl-text-primary);
    text-align: right;
}

.item-strip[b-00s341n99u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.5rem;
}

.item-strip img[b-00s341n99u] {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.45rem;
    background: var(--wl-bg-secondary);
}

.tag-group[b-00s341n99u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.tag-group > span[b-00s341n99u],
.range-row > span[b-00s341n99u] {
    color: var(--wl-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tag-options[b-00s341n99u] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.tag-chip[b-00s341n99u] {
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: 0.35rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 999px;
    background: var(--wl-bg-secondary);
    color: var(--wl-text-secondary);
    text-transform: none;
    letter-spacing: 0;
}

.range-row[b-00s341n99u] {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin: 0.5rem 0 0.9rem;
}

.danger-zone[b-00s341n99u] {
    align-items: center;
    border-color: rgba(var(--wl-red-rgb), 0.3);
}

.danger-zone strong[b-00s341n99u] {
    display: block;
    color: #EF4444;
}

.notice[b-00s341n99u] {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 700;
}

.notice.success[b-00s341n99u] {
    color: #22C55E;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.28);
}

.notice.error[b-00s341n99u] {
    color: #EF4444;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.28);
}

.empty-inline[b-00s341n99u],
.loading-state[b-00s341n99u] {
    padding: 2rem;
    color: var(--wl-text-muted);
    text-align: center;
}

.btn-primary[b-00s341n99u],
.btn-secondary[b-00s341n99u],
.btn-ghost[b-00s341n99u],
.btn-danger[b-00s341n99u],
.btn-link[b-00s341n99u] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 0.45rem;
    border: 1px solid transparent;
    font-weight: 800;
    cursor: pointer;
}

.btn-primary[b-00s341n99u] {
    color: var(--wl-bg-primary);
    background: var(--wl-gold);
}

.btn-secondary[b-00s341n99u] {
    color: var(--wl-gold);
    border-color: var(--wl-gold-border);
    background: var(--wl-gold-bg);
}

.btn-ghost[b-00s341n99u] {
    color: var(--wl-text-secondary);
    border-color: var(--wl-border-medium);
    background: transparent;
}

.btn-danger[b-00s341n99u] {
    color: #fff;
    background: #DC2626;
}

.btn-link[b-00s341n99u] {
    min-height: 0;
    padding: 0;
    color: var(--wl-gold);
    background: transparent;
}

.wide-button[b-00s341n99u] {
    width: 100%;
    margin-top: 1rem;
}

button:disabled[b-00s341n99u] {
    opacity: 0.55;
    cursor: not-allowed;
}

@media (max-width: 1100px) {
    .metric-grid[b-00s341n99u] {
        grid-template-columns: 1fr;
    }

    .collection-rows[b-00s341n99u] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 680px) {
    .page-header[b-00s341n99u],
    .panel-header[b-00s341n99u],
    .designer-selected[b-00s341n99u],
    .danger-zone[b-00s341n99u],
    .pager[b-00s341n99u],
    .search-row[b-00s341n99u],
    .designer-search[b-00s341n99u],
    .upload-box[b-00s341n99u],
    .readonly-limited[b-00s341n99u] {
        align-items: stretch;
        flex-direction: column;
    }

    .form-grid[b-00s341n99u] {
        grid-template-columns: 1fr;
    }

    .collection-row[b-00s341n99u] {
        grid-template-columns: 1fr;
    }

    .collection-preview[b-00s341n99u] {
        width: 100%;
        min-height: 150px;
    }

    .collection-card-head[b-00s341n99u],
    .status-pills[b-00s341n99u] {
        align-items: flex-start;
        flex-direction: column;
    }

    .top-collection-row[b-00s341n99u] {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .top-collection-preview[b-00s341n99u],
    .top-collection-stat[b-00s341n99u] {
        display: none;
    }
}
/* /Components/Pages/Admin/EarlyAccess/Index.razor.rz.scp.css */
/* Page Header */
.page-header[b-46gep03ujq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.page-title[b-46gep03ujq] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
}

.page-subtitle[b-46gep03ujq] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin-top: 0.25rem;
}

.header-actions[b-46gep03ujq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-new[b-46gep03ujq] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-new:hover[b-46gep03ujq] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-new:disabled[b-46gep03ujq] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Banners */
.success-banner[b-46gep03ujq] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #22c55e;
    font-size: 0.875rem;
}

.error-banner[b-46gep03ujq] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #ef4444;
    font-size: 0.875rem;
}

/* Filter Tabs */
.tab-btn[b-46gep03ujq] {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.tab-btn:hover[b-46gep03ujq] {
    background: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.tab-btn.active[b-46gep03ujq] {
    background: var(--wl-gold-bg-hover);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

/* Table */
.posts-table[b-46gep03ujq] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    overflow: hidden;
}

.table-header[b-46gep03ujq] {
    display: grid;
    grid-template-columns: 1.5fr 7rem 1fr 8rem 8rem;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-bottom: 1px solid var(--wl-border-medium);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table-row[b-46gep03ujq] {
    display: grid;
    grid-template-columns: 1.5fr 7rem 1fr 8rem 8rem;
    gap: 1rem;
    padding: 1rem 1.25rem;
    align-items: center;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    transition: background 0.15s ease;
}

.table-row:last-child[b-46gep03ujq] {
    border-bottom: none;
}

.table-row:hover[b-46gep03ujq] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

/* Code Column */
.code-btn[b-46gep03ujq] {
    background: none;
    border: 1px solid var(--wl-border-medium);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--wl-text-primary);
}

.code-btn:hover[b-46gep03ujq] {
    border-color: var(--wl-gold);
    background: var(--wl-gold-bg);
}

.code-btn code[b-46gep03ujq] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
}

/* User Column */
.col-user[b-46gep03ujq] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

/* Date Column */
.col-date[b-46gep03ujq] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
}

/* Status Badges */
.badge[b-46gep03ujq] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    width: fit-content;
}

.badge-published[b-46gep03ujq] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ADE80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-draft[b-46gep03ujq] {
    background: rgba(245, 158, 11, 0.12);
    color: #FBBF24;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Loading State */
.loading-state[b-46gep03ujq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: var(--wl-text-muted);
    gap: 1rem;
}

.loading-spinner[b-46gep03ujq] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-46gep03ujq 0.8s linear infinite;
}

.loading-spinner-small[b-46gep03ujq] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--wl-bg-dark-rgb), 0.2);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-46gep03ujq 0.8s linear infinite;
}

@keyframes spin-b-46gep03ujq {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state[b-46gep03ujq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    gap: 1rem;
}

.empty-state p[b-46gep03ujq] {
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-46gep03ujq] {
        flex-direction: column;
        gap: 1rem;
    }

    .header-actions[b-46gep03ujq] {
        width: 100%;
    }

    .table-header[b-46gep03ujq] {
        display: none;
    }

    .table-row[b-46gep03ujq] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem 1.25rem;
    }
}
/* /Components/Pages/Admin/FandomWars/Index.razor.rz.scp.css */
.fandom-admin[b-d8pag9rszt] { padding: 2rem; color: var(--wl-text-primary); }
.fandom-admin__loading[b-d8pag9rszt] { padding: 3rem; color: var(--wl-text-muted); }
.fandom-admin__header[b-d8pag9rszt] { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.fandom-admin__header span[b-d8pag9rszt] { color: #fb923c; font-size: .7rem; font-weight: 800; letter-spacing: .18em; }
.fandom-admin__header h1[b-d8pag9rszt] { margin: .15rem 0; font-size: 2rem; }
.fandom-admin__header p[b-d8pag9rszt] { margin: 0; color: var(--wl-text-muted); }
.fandom-admin__buttons[b-d8pag9rszt] { display: flex; gap: .5rem; }
.fandom-admin button[b-d8pag9rszt] { padding: .65rem .9rem; border: 1px solid var(--wl-border-medium); border-radius: 9px; background: rgba(var(--wl-contrast-rgb),.04); color: var(--wl-text-primary); cursor: pointer; }
.fandom-admin button.primary[b-d8pag9rszt] { background: #ea580c; border-color: #ea580c; color: white; }
.fandom-admin button:disabled[b-d8pag9rszt] { opacity: .5; cursor: wait; }
.fandom-admin__message[b-d8pag9rszt] { margin-bottom: 1rem; padding: .75rem 1rem; border-radius: 10px; background: rgba(59,130,246,.12); color: #93c5fd; }
.fandom-admin__stats[b-d8pag9rszt] { display: grid; grid-template-columns: repeat(5,1fr); gap: .75rem; margin-bottom: 1rem; }
.fandom-admin__stats article[b-d8pag9rszt] { padding: 1rem; background: rgba(var(--wl-contrast-rgb),.035); border: 1px solid var(--wl-border-medium); border-radius: 12px; }
.fandom-admin__stats strong[b-d8pag9rszt], .fandom-admin__stats span[b-d8pag9rszt] { display: block; }
.fandom-admin__stats strong[b-d8pag9rszt] { font-size: 1.6rem; }
.fandom-admin__stats span[b-d8pag9rszt] { color: var(--wl-text-muted); font-size: .75rem; }
.fandom-admin__stats .danger strong[b-d8pag9rszt] { color: #f87171; }
.fandom-admin__panel[b-d8pag9rszt] { margin-top: 1rem; padding: 1rem; background: rgba(var(--wl-bg-modal-rgb),.6); border: 1px solid var(--wl-border-medium); border-radius: 14px; }
.fandom-admin__panel h2[b-d8pag9rszt] { margin: 0 0 .8rem; font-size: 1rem; }
.fandom-admin__table-wrap[b-d8pag9rszt] { overflow-x: auto; }
.fandom-admin table[b-d8pag9rszt] { width: 100%; border-collapse: collapse; font-size: .75rem; }
.fandom-admin th[b-d8pag9rszt] { text-align: left; color: var(--wl-text-muted); text-transform: uppercase; font-size: .62rem; letter-spacing: .05em; }
.fandom-admin th[b-d8pag9rszt], .fandom-admin td[b-d8pag9rszt] { padding: .55rem .6rem; border-bottom: 1px solid var(--wl-border-subtle); vertical-align: top; white-space: nowrap; }
.fandom-admin td small[b-d8pag9rszt] { display: block; color: var(--wl-text-muted); }
.fandom-admin code[b-d8pag9rszt] { font-size: .68rem; color: #c4b5fd; }
.fandom-admin .positive[b-d8pag9rszt] { color: #4ade80; }
.fandom-admin .negative[b-d8pag9rszt], .fandom-admin .row-error td[b-d8pag9rszt] { color: #f87171; }
.fandom-admin .stage[b-d8pag9rszt] { padding: .2rem .45rem; border-radius: 99px; background: rgba(249,115,22,.13); color: #fb923c; }
.fandom-admin .stage--war[b-d8pag9rszt] { background: rgba(239,68,68,.14); color: #f87171; }
.fandom-admin .stage--cooling[b-d8pag9rszt] { background: rgba(59,130,246,.14); color: #60a5fa; }
.fandom-admin .stage--resolved[b-d8pag9rszt] { background: rgba(34,197,94,.14); color: #4ade80; }
.fandom-admin .muted[b-d8pag9rszt] { color: var(--wl-text-muted); }
@media (max-width: 900px) { .fandom-admin[b-d8pag9rszt] { padding: 1rem; } .fandom-admin__header[b-d8pag9rszt] { align-items: start; flex-direction: column; } .fandom-admin__stats[b-d8pag9rszt] { grid-template-columns: repeat(2,1fr); } }
/* /Components/Pages/Admin/Feedback/Index.razor.rz.scp.css */
.feedback-admin-header[b-b3xf1u9gxw] {
    gap: 1.25rem;
}

.feedback-admin-actions[b-b3xf1u9gxw] {
    display: grid;
    grid-template-columns: minmax(14rem, 1.4fr) repeat(4, minmax(9rem, 1fr)) auto;
    gap: 0.6rem;
    align-items: center;
    width: min(100%, 980px);
}

.feedback-admin-metrics[b-b3xf1u9gxw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.feedback-admin-metrics > div[b-b3xf1u9gxw] {
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.72);
    padding: 1rem;
}

.feedback-admin-metrics span[b-b3xf1u9gxw] {
    display: block;
    color: var(--wl-text-primary);
    font-size: 2rem;
    font-weight: 950;
    line-height: 1;
}

.feedback-admin-metrics small[b-b3xf1u9gxw] {
    display: block;
    margin-top: 0.35rem;
    color: var(--wl-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.feedback-admin-list[b-b3xf1u9gxw] {
    display: grid;
    gap: 0.8rem;
}

.feedback-admin-load-more[b-b3xf1u9gxw] {
    display: flex;
    justify-content: center;
    padding: 1rem 0 0.25rem;
}

.feedback-admin-load-more .btn-secondary[b-b3xf1u9gxw] {
    min-width: 11rem;
}

.feedback-admin-card[b-b3xf1u9gxw] {
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.72);
    padding: 1rem;
}

.feedback-admin-card.is-hidden[b-b3xf1u9gxw] {
    opacity: 0.72;
}

.feedback-card-grid[b-b3xf1u9gxw] {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr) minmax(13rem, 0.28fr);
    gap: 1rem;
    align-items: start;
}

.feedback-score[b-b3xf1u9gxw] {
    display: grid;
    justify-items: center;
    gap: 0.2rem;
    padding: 0.75rem 0.4rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.035);
}

.feedback-score span[b-b3xf1u9gxw] {
    color: var(--wl-text-primary);
    font-size: 1.7rem;
    font-weight: 950;
    line-height: 1;
}

.feedback-score span.positive-score[b-b3xf1u9gxw] {
    color: #86efac;
}

.feedback-score span.negative-score[b-b3xf1u9gxw] {
    color: #fca5a5;
}

.feedback-score small[b-b3xf1u9gxw] {
    color: var(--wl-text-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.feedback-content[b-b3xf1u9gxw] {
    min-width: 0;
}

.feedback-badges[b-b3xf1u9gxw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.feedback-content h2[b-b3xf1u9gxw] {
    margin: 0.65rem 0 0;
    color: var(--wl-text-primary);
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.25;
}

.feedback-content p[b-b3xf1u9gxw] {
    display: -webkit-box;
    overflow: hidden;
    margin: 0.4rem 0 0;
    color: var(--wl-text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
    white-space: pre-wrap;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.feedback-meta[b-b3xf1u9gxw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.9rem 0 0;
    color: var(--wl-text-muted);
    font-size: 0.78rem;
}

.feedback-meta dt[b-b3xf1u9gxw] {
    color: var(--wl-text-secondary);
    font-weight: 900;
}

.feedback-meta dd[b-b3xf1u9gxw] {
    margin: 0.15rem 0 0;
}

.break-anywhere[b-b3xf1u9gxw] {
    overflow-wrap: anywhere;
}

.feedback-actions[b-b3xf1u9gxw] {
    display: grid;
    gap: 0.5rem;
}

.feedback-actions .btn-secondary[b-b3xf1u9gxw],
.feedback-open-public[b-b3xf1u9gxw],
.edit-actions .btn-secondary[b-b3xf1u9gxw],
.edit-actions .btn-new[b-b3xf1u9gxw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.35rem;
    border-radius: 8px;
    text-decoration: none;
}

.feedback-edit-panel[b-b3xf1u9gxw],
.feedback-comments-panel[b-b3xf1u9gxw] {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.035);
}

.feedback-edit-panel[b-b3xf1u9gxw],
.feedback-edit-panel label[b-b3xf1u9gxw] {
    display: grid;
    gap: 0.75rem;
}

.feedback-edit-panel label span[b-b3xf1u9gxw] {
    color: var(--wl-text-muted);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.edit-grid[b-b3xf1u9gxw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.feedback-edit-message[b-b3xf1u9gxw] {
    min-height: 8rem;
}

.feedback-edit-notes[b-b3xf1u9gxw],
.feedback-comment-edit[b-b3xf1u9gxw] {
    min-height: 6rem;
}

.edit-actions[b-b3xf1u9gxw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feedback-comments-panel[b-b3xf1u9gxw] {
    display: grid;
    gap: 0.7rem;
}

.admin-comment[b-b3xf1u9gxw] {
    display: grid;
    gap: 0.45rem;
    padding: 0.85rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--wl-bg-primary-rgb), 0.38);
}

.admin-comment.is-hidden[b-b3xf1u9gxw] {
    opacity: 0.64;
}

.admin-comment > div:first-child[b-b3xf1u9gxw] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    font-size: 0.78rem;
}

.admin-comment strong[b-b3xf1u9gxw] {
    color: var(--wl-text-primary);
}

.admin-comment p[b-b3xf1u9gxw] {
    color: var(--wl-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    white-space: pre-wrap;
}

@media (max-width: 1200px) {
    .feedback-admin-actions[b-b3xf1u9gxw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
    }

    .feedback-card-grid[b-b3xf1u9gxw] {
        grid-template-columns: 4rem minmax(0, 1fr);
    }

    .feedback-actions[b-b3xf1u9gxw] {
        grid-column: 1 / -1;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .feedback-admin-actions[b-b3xf1u9gxw],
    .feedback-admin-metrics[b-b3xf1u9gxw],
    .feedback-card-grid[b-b3xf1u9gxw],
    .feedback-meta[b-b3xf1u9gxw],
    .feedback-actions[b-b3xf1u9gxw],
    .edit-grid[b-b3xf1u9gxw] {
        grid-template-columns: 1fr;
    }

    .feedback-score[b-b3xf1u9gxw] {
        justify-items: start;
    }
}
/* /Components/Pages/Admin/Help/Edit.razor.rz.scp.css */
.back-link[b-uutwk3oigs] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.88rem;
    margin: 1.5rem 0 1rem 1.5rem;
}

.back-link:hover[b-uutwk3oigs] { color: var(--wl-text-primary); }

.editor-container[b-uutwk3oigs] {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 1.5rem 2rem;
}

.page-title[b-uutwk3oigs] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.04em;
    color: var(--wl-text-primary);
    margin: 0 0 1.25rem;
}

.form-card[b-uutwk3oigs] {
    background: var(--wl-bg-secondary);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.form-row[b-uutwk3oigs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group[b-uutwk3oigs] { margin-bottom: 1.25rem; }
.form-group:last-child[b-uutwk3oigs] { margin-bottom: 0; }

.form-label[b-uutwk3oigs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-secondary);
    margin-bottom: 0.5rem;
}

.char-count[b-uutwk3oigs] { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--wl-text-muted); }
.char-count.over-limit[b-uutwk3oigs] { color: var(--wl-red); }

.form-input[b-uutwk3oigs] {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: var(--wl-bg-primary);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 10px;
    color: var(--wl-text-primary);
    font-size: 0.95rem;
    font-family: inherit;
}

.form-input:focus[b-uutwk3oigs] { outline: none; border-color: var(--wl-gold); }

.form-textarea[b-uutwk3oigs] { resize: vertical; min-height: 80px; line-height: 1.5; }
.form-textarea-content[b-uutwk3oigs] { min-height: 320px; font-family: ui-monospace, monospace; font-size: 0.9rem; }

.checkbox-label[b-uutwk3oigs] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--wl-text-primary);
    font-size: 0.9rem;
}

.checkbox-input[b-uutwk3oigs] { width: 1.05rem; height: 1.05rem; accent-color: var(--wl-gold); }

.form-actions[b-uutwk3oigs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-save[b-uutwk3oigs] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-save:hover[b-uutwk3oigs] { opacity: 0.9; }
.btn-save:disabled[b-uutwk3oigs] { opacity: 0.6; cursor: not-allowed; }

.btn-cancel[b-uutwk3oigs] {
    padding: 0.7rem 1.25rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.9rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
}

.btn-cancel:hover[b-uutwk3oigs] { color: var(--wl-text-primary); }

.btn-delete[b-uutwk3oigs] {
    margin-left: auto;
    padding: 0.7rem 1.25rem;
    background: transparent;
    color: var(--wl-red);
    border: 1px solid rgba(var(--wl-red-rgb), 0.4);
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-delete:hover[b-uutwk3oigs] { background: rgba(var(--wl-red-rgb), 0.1); }
.btn-delete:disabled[b-uutwk3oigs] { opacity: 0.6; cursor: not-allowed; }

.error-banner[b-uutwk3oigs] {
    padding: 0.85rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    background: rgba(var(--wl-red-rgb), 0.12);
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
    color: var(--wl-red);
}

.not-found[b-uutwk3oigs] {
    max-width: 820px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--wl-text-secondary);
}

.loading-state[b-uutwk3oigs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem;
    color: var(--wl-text-secondary);
}

.loading-spinner[b-uutwk3oigs] {
    width: 36px; height: 36px;
    border: 3px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-uutwk3oigs 0.8s linear infinite;
}

.saving-spinner[b-uutwk3oigs] {
    width: 16px; height: 16px;
    border: 2px solid rgba(0,0,0,0.25);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-uutwk3oigs 0.8s linear infinite;
}

@keyframes spin-b-uutwk3oigs { to { transform: rotate(360deg); } }
/* /Components/Pages/Admin/Help/Index.razor.rz.scp.css */
.help-admin[b-gq3fuozzl6] {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem;
}

.page-head[b-gq3fuozzl6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-title[b-gq3fuozzl6] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.04em;
    color: var(--wl-text-primary);
    margin: 0;
}

.page-subtitle[b-gq3fuozzl6] {
    color: var(--wl-text-secondary);
    font-size: 0.88rem;
    margin: 0.2rem 0 0;
}

.btn-primary[b-gq3fuozzl6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary:hover[b-gq3fuozzl6] { opacity: 0.9; }

.data-table[b-gq3fuozzl6] {
    width: 100%;
    border-collapse: collapse;
    background: var(--wl-bg-secondary);
    border-radius: 12px;
    overflow: hidden;
}

.data-table th[b-gq3fuozzl6],
.data-table td[b-gq3fuozzl6] {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    font-size: 0.9rem;
}

.data-table th[b-gq3fuozzl6] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-muted);
}

.data-table tbody tr:last-child td[b-gq3fuozzl6] { border-bottom: none; }

.data-table .num[b-gq3fuozzl6] { text-align: right; }

.title-cell[b-gq3fuozzl6] { color: var(--wl-text-primary); font-weight: 600; }

.lang[b-gq3fuozzl6] { color: var(--wl-text-muted); font-size: 0.78rem; }

.status[b-gq3fuozzl6] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
}

.status.published[b-gq3fuozzl6] {
    color: var(--wl-green);
    background: rgba(var(--wl-green-rgb), 0.12);
}

.status.draft[b-gq3fuozzl6] {
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.08);
}

.actions[b-gq3fuozzl6] { text-align: right; }

.btn-edit[b-gq3fuozzl6] {
    color: var(--wl-gold);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
}

.btn-edit:hover[b-gq3fuozzl6] { text-decoration: underline; }

.empty[b-gq3fuozzl6] {
    padding: 3rem;
    text-align: center;
    color: var(--wl-text-muted);
    background: var(--wl-bg-secondary);
    border-radius: 12px;
}

.loading-state[b-gq3fuozzl6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem;
    color: var(--wl-text-secondary);
}

.loading-spinner[b-gq3fuozzl6] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-gq3fuozzl6 0.8s linear infinite;
}

@keyframes spin-b-gq3fuozzl6 { to { transform: rotate(360deg); } }
/* /Components/Pages/Admin/JobHealth/Index.razor.rz.scp.css */
/* Health Summary Bar */
.health-summary[b-nv9vgjwzh8] {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.summary-badge[b-nv9vgjwzh8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    background: var(--wl-surface-primary);
    border: 1px solid var(--wl-border-subtle);
}

.summary-badge.green[b-nv9vgjwzh8] { border-color: rgba(var(--wl-green-rgb), 0.3); }
.summary-badge.yellow[b-nv9vgjwzh8] { border-color: rgba(var(--wl-gold-rgb), 0.3); }
.summary-badge.red[b-nv9vgjwzh8] { border-color: rgba(var(--wl-red-rgb), 0.3); }

.summary-count[b-nv9vgjwzh8] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wl-text-primary);
}

.summary-label[b-nv9vgjwzh8] {
    font-size: 0.8125rem;
    color: var(--wl-text-secondary);
}

/* Health Dot */
.health-dot[b-nv9vgjwzh8] {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.health-dot.green[b-nv9vgjwzh8] {
    background: var(--wl-green);
    box-shadow: 0 0 6px rgba(var(--wl-green-rgb), 0.5);
}

.health-dot.yellow[b-nv9vgjwzh8] {
    background: var(--wl-gold);
    box-shadow: 0 0 6px rgba(var(--wl-gold-rgb), 0.5);
}

.health-dot.red[b-nv9vgjwzh8] {
    background: var(--wl-red);
    box-shadow: 0 0 6px rgba(var(--wl-red-rgb), 0.5);
}

/* Table Container */
.table-container[b-nv9vgjwzh8] {
    overflow-x: auto;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-subtle);
    background: var(--wl-surface-primary);
}

.job-table[b-nv9vgjwzh8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.job-table thead[b-nv9vgjwzh8] {
    background: var(--wl-bg-tertiary);
}

.job-table th[b-nv9vgjwzh8] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-secondary);
    border-bottom: 1px solid var(--wl-border-medium);
    white-space: nowrap;
}

.job-table td[b-nv9vgjwzh8] {
    padding: 0.625rem 1rem;
    color: var(--wl-text-primary);
    border-bottom: 1px solid var(--wl-border-subtle);
    white-space: nowrap;
}

.job-table tbody tr:last-child td[b-nv9vgjwzh8] {
    border-bottom: none;
}

.job-table tbody tr:hover[b-nv9vgjwzh8] {
    background: var(--wl-surface-hover);
}

/* Row highlights for unhealthy jobs */
.job-row.row-red[b-nv9vgjwzh8] {
    background: rgba(var(--wl-red-rgb), 0.05);
}

.job-row.row-yellow[b-nv9vgjwzh8] {
    background: rgba(var(--wl-gold-rgb), 0.04);
}

/* Job ID cell */
.job-id-cell[b-nv9vgjwzh8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.job-id-text[b-nv9vgjwzh8] {
    font-family: 'Source Sans 3', monospace;
    font-weight: 500;
}

/* Cron cell */
.cron-cell code[b-nv9vgjwzh8] {
    padding: 0.125rem 0.375rem;
    background: var(--wl-bg-tertiary);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    color: var(--wl-text-secondary);
}

/* State badges */
.state-badge[b-nv9vgjwzh8] {
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.state-succeeded[b-nv9vgjwzh8] {
    color: var(--wl-green);
    background: rgba(var(--wl-green-rgb), 0.1);
}

.state-failed[b-nv9vgjwzh8] {
    color: var(--wl-red);
    background: rgba(var(--wl-red-rgb), 0.1);
}

.state-processing[b-nv9vgjwzh8] {
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
}

.state-enqueued[b-nv9vgjwzh8] {
    color: var(--wl-diamond);
    background: rgba(var(--wl-diamond-rgb), 0.1);
}

.state-unknown[b-nv9vgjwzh8] {
    color: var(--wl-text-muted);
    background: var(--wl-bg-tertiary);
}

/* Health badges */
.health-badge[b-nv9vgjwzh8] {
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.health-badge.green[b-nv9vgjwzh8] {
    color: var(--wl-green);
    background: rgba(var(--wl-green-rgb), 0.12);
}

.health-badge.yellow[b-nv9vgjwzh8] {
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
}

.health-badge.red[b-nv9vgjwzh8] {
    color: var(--wl-red);
    background: rgba(var(--wl-red-rgb), 0.12);
}

/* Loading state */
.loading-state[b-nv9vgjwzh8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--wl-text-secondary);
}

/* Responsive */
@media (max-width: 640px) {
    .health-summary[b-nv9vgjwzh8] {
        flex-direction: column;
    }

    .job-table[b-nv9vgjwzh8] {
        font-size: 0.8125rem;
    }

    .job-table th[b-nv9vgjwzh8],
    .job-table td[b-nv9vgjwzh8] {
        padding: 0.5rem 0.625rem;
    }
}
/* /Components/Pages/Admin/KnowledgeGaps/Index.razor.rz.scp.css */
/* Loading state - .loading-state/.loading-spinner are not in the global stylesheet,
   they live in each admin page's scoped CSS (same block as Admin/Blog). */
.loading-state[b-tn0kja5dab] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: var(--wl-text-muted);
    gap: 1rem;
}

.loading-spinner[b-tn0kja5dab] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-tn0kja5dab 0.8s linear infinite;
}

@keyframes spin-b-tn0kja5dab {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Admin/News24/Index.razor.rz.scp.css */
.news24-admin[b-cbbqq2bh8k] {
    display: grid;
    gap: 1.25rem;
    max-width: 58rem;
    margin: 0 auto;
    padding: 1.5rem;
}

.news24-admin-header[b-cbbqq2bh8k] {
    display: grid;
    gap: 0.35rem;
}

.news24-admin-kicker[b-cbbqq2bh8k] {
    width: fit-content;
    padding: 0.2rem 0.45rem;
    border: 1px solid rgba(var(--wl-red-rgb), 0.32);
    border-radius: 4px;
    color: var(--wl-red);
    background: rgba(var(--wl-red-rgb), 0.1);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.news24-admin-header h1[b-cbbqq2bh8k],
.news24-admin-result h2[b-cbbqq2bh8k],
.news24-admin-effects h3[b-cbbqq2bh8k] {
    margin: 0;
}

.news24-admin-header h1[b-cbbqq2bh8k] {
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--wl-text-primary);
}

.news24-admin-header p[b-cbbqq2bh8k],
.news24-admin-result-head p[b-cbbqq2bh8k],
.news24-admin-effects p[b-cbbqq2bh8k],
.news24-admin-body p[b-cbbqq2bh8k] {
    margin: 0;
    color: var(--wl-text-secondary);
    line-height: 1.55;
}

.news24-admin-panel[b-cbbqq2bh8k],
.news24-admin-result[b-cbbqq2bh8k] {
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.88);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.news24-admin-panel[b-cbbqq2bh8k] {
    padding: 1.25rem;
}

.form-label[b-cbbqq2bh8k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    color: var(--wl-text-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.char-count[b-cbbqq2bh8k] {
    color: var(--wl-text-muted);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.char-count.over-limit[b-cbbqq2bh8k] {
    color: var(--wl-red);
}

.form-input[b-cbbqq2bh8k] {
    width: 100%;
    padding: 0.8rem 0.95rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.14);
    border-radius: 8px;
    color: var(--wl-text-primary);
    background: var(--wl-bg-primary);
    font: inherit;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-input:focus[b-cbbqq2bh8k] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.68);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.12);
}

.form-textarea[b-cbbqq2bh8k] {
    min-height: 14rem;
    resize: vertical;
    line-height: 1.55;
}

.field-hint[b-cbbqq2bh8k] {
    display: block;
    margin-top: 0.55rem;
    color: var(--wl-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.form-actions[b-cbbqq2bh8k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.btn-save[b-cbbqq2bh8k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 1.2rem;
    border: 0;
    border-radius: 8px;
    color: var(--wl-bg-primary);
    background: var(--wl-gold);
    font-weight: 800;
    cursor: pointer;
}

.btn-save:disabled[b-cbbqq2bh8k] {
    cursor: not-allowed;
    opacity: 0.55;
}

.saving-spinner[b-cbbqq2bh8k],
.loading-spinner[b-cbbqq2bh8k] {
    border-radius: 50%;
    animation: spin-b-cbbqq2bh8k 0.8s linear infinite;
}

.saving-spinner[b-cbbqq2bh8k] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.24);
    border-top-color: var(--wl-bg-primary);
}

.loading-state[b-cbbqq2bh8k] {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding: 4rem;
    color: var(--wl-text-secondary);
}

.loading-spinner[b-cbbqq2bh8k] {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-top-color: var(--wl-gold);
}

.error-banner[b-cbbqq2bh8k],
.success-banner[b-cbbqq2bh8k] {
    padding: 0.85rem 1rem;
    border-radius: 8px;
    font-size: 0.92rem;
}

.error-banner[b-cbbqq2bh8k] {
    color: var(--wl-red);
    border: 1px solid rgba(var(--wl-red-rgb), 0.32);
    background: rgba(var(--wl-red-rgb), 0.1);
}

.success-banner[b-cbbqq2bh8k] {
    color: var(--wl-green);
    border: 1px solid rgba(var(--wl-green-rgb), 0.3);
    background: rgba(var(--wl-green-rgb), 0.1);
}

.news24-admin-result[b-cbbqq2bh8k] {
    display: grid;
    gap: 1.25rem;
    padding: 1.25rem;
}

.news24-admin-result-head[b-cbbqq2bh8k] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.news24-admin-result h2[b-cbbqq2bh8k] {
    margin-top: 0.45rem;
    color: var(--wl-text-primary);
    font-size: 1.75rem;
    line-height: 1.05;
}

.news24-admin-window[b-cbbqq2bh8k] {
    flex: 0 0 auto;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-radius: 4px;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    font-size: 0.78rem;
    font-weight: 800;
}

.news24-admin-result[b-cbbqq2bh8k]  .news24-admin-hero {
    width: 100%;
    max-height: 22rem;
    border-radius: 8px;
    object-fit: cover;
}

.news24-admin-effects[b-cbbqq2bh8k] {
    display: grid;
    gap: 0.8rem;
}

.news24-admin-effects h3[b-cbbqq2bh8k] {
    color: var(--wl-text-primary);
    font-size: 1.1rem;
}

.news24-admin-effects ul[b-cbbqq2bh8k] {
    display: grid;
    gap: 0.65rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.news24-admin-effects li[b-cbbqq2bh8k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.38fr);
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.09);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.news24-admin-effects strong[b-cbbqq2bh8k] {
    color: var(--wl-text-primary);
}

.news24-admin-effect-meta[b-cbbqq2bh8k] {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    justify-content: flex-end;
    gap: 0.4rem;
}

.news24-admin-effect-meta span[b-cbbqq2bh8k] {
    padding: 0.22rem 0.45rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 4px;
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.04);
    font-size: 0.76rem;
    font-weight: 700;
}

.news24-admin-body[b-cbbqq2bh8k] {
    display: grid;
    gap: 0.9rem;
}

@keyframes spin-b-cbbqq2bh8k {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 760px) {
    .news24-admin[b-cbbqq2bh8k] {
        padding: 1rem;
    }

    .news24-admin-result-head[b-cbbqq2bh8k] {
        flex-direction: column;
    }

    .news24-admin-effects li[b-cbbqq2bh8k] {
        grid-template-columns: 1fr;
    }

    .news24-admin-effect-meta[b-cbbqq2bh8k] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/Admin/Notify/Index.razor.rz.scp.css */
.notify-container[b-t0cu30p6zb] {
    max-width: 720px;
    margin: 0 auto;
    padding: 1.5rem;
}

.page-title[b-t0cu30p6zb] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.04em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem;
}

.page-subtitle[b-t0cu30p6zb] {
    color: var(--wl-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0 0 1.5rem;
    max-width: 60ch;
}

.form-card[b-t0cu30p6zb] {
    background: var(--wl-bg-secondary);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.form-group[b-t0cu30p6zb] {
    margin-bottom: 1.25rem;
}

.form-group:last-child[b-t0cu30p6zb] {
    margin-bottom: 0;
}

.form-label[b-t0cu30p6zb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-secondary);
    margin-bottom: 0.5rem;
}

.char-count[b-t0cu30p6zb] {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--wl-text-muted);
}

.char-count.over-limit[b-t0cu30p6zb] {
    color: var(--wl-red);
}

.form-input[b-t0cu30p6zb] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--wl-bg-primary);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 10px;
    color: var(--wl-text-primary);
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.2s ease;
}

.form-input:focus[b-t0cu30p6zb] {
    outline: none;
    border-color: var(--wl-gold);
}

.form-textarea[b-t0cu30p6zb] {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

.field-hint[b-t0cu30p6zb] {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.78rem;
    color: var(--wl-text-muted);
}

.form-actions[b-t0cu30p6zb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-save[b-t0cu30p6zb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.btn-save:hover[b-t0cu30p6zb] {
    opacity: 0.9;
}

.btn-save:disabled[b-t0cu30p6zb] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-cancel[b-t0cu30p6zb] {
    padding: 0.75rem 1.25rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.9rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
}

.btn-cancel:hover[b-t0cu30p6zb] {
    color: var(--wl-text-primary);
}

.error-banner[b-t0cu30p6zb],
.success-banner[b-t0cu30p6zb] {
    padding: 0.85rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}

.error-banner[b-t0cu30p6zb] {
    background: rgba(var(--wl-red-rgb), 0.12);
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
    color: var(--wl-red);
}

.success-banner[b-t0cu30p6zb] {
    background: rgba(var(--wl-green-rgb), 0.12);
    border: 1px solid rgba(var(--wl-green-rgb), 0.3);
    color: var(--wl-green);
}

.loading-state[b-t0cu30p6zb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem;
    color: var(--wl-text-secondary);
}

.loading-spinner[b-t0cu30p6zb] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-t0cu30p6zb 0.8s linear infinite;
}

.saving-spinner[b-t0cu30p6zb] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-t0cu30p6zb 0.8s linear infinite;
}

@keyframes spin-b-t0cu30p6zb {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Admin/Quizzes/Create.razor.rz.scp.css */
/* Page Header */
.page-header[b-tjslngw3dh] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.page-title[b-tjslngw3dh] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
}

.page-subtitle[b-tjslngw3dh] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin-top: 0.25rem;
}

.header-actions[b-tjslngw3dh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-back[b-tjslngw3dh] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    transition: all 0.15s ease;
}

.btn-back:hover[b-tjslngw3dh] {
    color: var(--wl-text-primary);
    border-color: var(--wl-text-muted);
}

.btn-back[b-tjslngw3dh]  svg {
    width: 1rem;
    height: 1rem;
}

/* Error Banner */
.error-banner[b-tjslngw3dh] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #ef4444;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* Form Container */
.form-container[b-tjslngw3dh] {
    max-width: 48rem;
}

.form-section[b-tjslngw3dh] {
    margin-bottom: 2rem;
}

.form-label[b-tjslngw3dh] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin-bottom: 0.5rem;
}

.form-hint[b-tjslngw3dh] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    margin-bottom: 0.75rem;
}

.form-input[b-tjslngw3dh] {
    padding: 0.5rem 0.75rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    transition: border-color 0.15s ease;
}

.form-input:focus[b-tjslngw3dh] {
    outline: none;
    border-color: var(--wl-gold);
}

.form-textarea[b-tjslngw3dh] {
    width: 100%;
    padding: 0.75rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.15s ease;
}

.form-textarea:focus[b-tjslngw3dh] {
    outline: none;
    border-color: var(--wl-gold);
}

/* Answers */
.answers-list[b-tjslngw3dh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.answer-row[b-tjslngw3dh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.answer-correct[b-tjslngw3dh] {
    border-left: 3px solid #22c55e;
    padding-left: 0.75rem;
    border-radius: 0.25rem;
}

.answer-number[b-tjslngw3dh] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 3.5rem;
}

.answer-correct .answer-number[b-tjslngw3dh] {
    color: #22c55e;
}

.answer-input[b-tjslngw3dh] {
    flex: 1;
}

/* Buttons */
.btn-add[b-tjslngw3dh] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    color: var(--wl-gold);
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px dashed rgba(var(--wl-gold-rgb), 0.4);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-add:hover[b-tjslngw3dh] {
    background: rgba(var(--wl-gold-rgb), 0.05);
    border-color: var(--wl-gold);
}

.btn-add[b-tjslngw3dh]  svg {
    width: 1rem;
    height: 1rem;
}

.btn-remove[b-tjslngw3dh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    color: var(--wl-text-muted);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.btn-remove:hover[b-tjslngw3dh] {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.05);
}

.btn-remove[b-tjslngw3dh]  svg {
    width: 1rem;
    height: 1rem;
}

/* Schedule */
.schedule-row[b-tjslngw3dh] {
    display: flex;
    gap: 0.75rem;
}

.schedule-row .form-input[b-tjslngw3dh] {
    min-width: 10rem;
}

/* Duration */
.duration-buttons[b-tjslngw3dh] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.duration-btn[b-tjslngw3dh] {
    padding: 0.5rem 1rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.duration-btn:hover[b-tjslngw3dh] {
    border-color: var(--wl-text-muted);
    color: var(--wl-text-primary);
}

.duration-btn--active[b-tjslngw3dh] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: var(--wl-gold);
    color: var(--wl-gold);
    font-weight: 600;
}

/* Reward Tiers */
.tiers-list[b-tjslngw3dh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.tier-row[b-tjslngw3dh] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
}

.tier-field[b-tjslngw3dh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.tier-field-label[b-tjslngw3dh] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tier-input[b-tjslngw3dh] {
    width: 100%;
}

/* Cost Preview */
.cost-preview[b-tjslngw3dh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(var(--wl-gold-rgb), 0.05);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

.cost-label[b-tjslngw3dh] {
    font-size: 0.875rem;
    color: var(--wl-text-secondary);
}

.cost-value[b-tjslngw3dh] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-gold);
}

/* Submit */
.form-actions[b-tjslngw3dh] {
    display: flex;
    justify-content: flex-end;
}

.btn-submit[b-tjslngw3dh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-submit:hover[b-tjslngw3dh] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-submit:disabled[b-tjslngw3dh] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Loading */
.loading-spinner-small[b-tjslngw3dh] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--wl-bg-dark-rgb), 0.2);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-tjslngw3dh 0.8s linear infinite;
}

@keyframes spin-b-tjslngw3dh {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-tjslngw3dh] {
        flex-direction: column;
        gap: 1rem;
    }

    .schedule-row[b-tjslngw3dh] {
        flex-direction: column;
    }

    .tier-row[b-tjslngw3dh] {
        flex-wrap: wrap;
    }

    .duration-buttons[b-tjslngw3dh] {
        flex-direction: column;
    }
}
/* /Components/Pages/Admin/Quizzes/Detail.razor.rz.scp.css */
/* Page Header */
.page-header[b-q263wgs3no] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.page-title[b-q263wgs3no] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
}

.page-subtitle[b-q263wgs3no] {
    margin-top: 0.5rem;
}

.header-actions[b-q263wgs3no] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-back[b-q263wgs3no] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    transition: all 0.15s ease;
}

.btn-back:hover[b-q263wgs3no] {
    color: var(--wl-text-primary);
    border-color: var(--wl-text-muted);
}

.btn-back[b-q263wgs3no]  svg {
    width: 1rem;
    height: 1rem;
}

/* Status Badges */
.status-badge[b-q263wgs3no] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-scheduled[b-q263wgs3no] {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.status-active[b-q263wgs3no] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.status-completed[b-q263wgs3no] {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.status-cancelled[b-q263wgs3no] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Detail Card */
.detail-card[b-q263wgs3no] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.section-title[b-q263wgs3no] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.75rem;
}

.question-text[b-q263wgs3no] {
    font-size: 1.125rem;
    color: var(--wl-text-primary);
    line-height: 1.6;
    margin: 0;
}

/* Detail Grid */
.detail-grid[b-q263wgs3no] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--wl-border-medium);
}

.detail-item[b-q263wgs3no] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label[b-q263wgs3no] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-value[b-q263wgs3no] {
    font-size: 0.875rem;
    color: var(--wl-text-primary);
}

/* Answers */
.answers-list[b-q263wgs3no] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.answer-item[b-q263wgs3no] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.answer-correct[b-q263wgs3no] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.answer-marker[b-q263wgs3no] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #22c55e;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 3.5rem;
}

.answer-text[b-q263wgs3no] {
    font-size: 0.875rem;
    color: var(--wl-text-primary);
}

/* Tables (shared base for tiers, ranking, payouts) */
.tiers-table[b-q263wgs3no],
.ranking-table[b-q263wgs3no],
.payout-table[b-q263wgs3no] {
    overflow: hidden;
}

.tiers-header[b-q263wgs3no],
.ranking-header[b-q263wgs3no],
.payout-header[b-q263wgs3no] {
    display: grid;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--wl-border-medium);
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tiers-header[b-q263wgs3no] { grid-template-columns: 8rem 6rem 6rem; }
.ranking-header[b-q263wgs3no] { grid-template-columns: 3rem 1fr 8rem; }
.payout-header[b-q263wgs3no] { grid-template-columns: 3rem 1fr 6rem 6rem 10rem; }

.tiers-row[b-q263wgs3no],
.ranking-row[b-q263wgs3no],
.payout-row[b-q263wgs3no] {
    display: grid;
    gap: 1rem;
    padding: 0.625rem 0;
    align-items: center;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    font-size: 0.875rem;
    color: var(--wl-text-secondary);
}

.tiers-row[b-q263wgs3no] { grid-template-columns: 8rem 6rem 6rem; }
.ranking-row[b-q263wgs3no] { grid-template-columns: 3rem 1fr 8rem; }
.payout-row[b-q263wgs3no] { grid-template-columns: 3rem 1fr 6rem 6rem 10rem; }

.tiers-row:last-child[b-q263wgs3no],
.ranking-row:last-child[b-q263wgs3no],
.payout-row:last-child[b-q263wgs3no] {
    border-bottom: none;
}

.tier-amount[b-q263wgs3no],
.payout-amount[b-q263wgs3no] {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    color: var(--wl-gold);
}

.rank-place[b-q263wgs3no],
.payout-place[b-q263wgs3no] {
    font-weight: 700;
    color: var(--wl-text-primary);
}

.rank-nickname[b-q263wgs3no] {
    font-weight: 500;
    color: var(--wl-text-primary);
}

.rank-time[b-q263wgs3no] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
}

.payout-date[b-q263wgs3no] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
}

/* Loading & Empty */
.loading-state[b-q263wgs3no] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    gap: 1rem;
}

.loading-spinner[b-q263wgs3no] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-q263wgs3no 0.8s linear infinite;
}

@keyframes spin-b-q263wgs3no {
    to { transform: rotate(360deg); }
}

.empty-state[b-q263wgs3no] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    gap: 1rem;
}

.empty-state p[b-q263wgs3no] {
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-q263wgs3no] {
        flex-direction: column;
        gap: 1rem;
    }

    .detail-grid[b-q263wgs3no] {
        grid-template-columns: 1fr;
    }

    .ranking-header[b-q263wgs3no],
    .payout-header[b-q263wgs3no],
    .tiers-header[b-q263wgs3no] {
        display: none;
    }

    .ranking-row[b-q263wgs3no],
    .payout-row[b-q263wgs3no],
    .tiers-row[b-q263wgs3no] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.75rem 0;
    }
}
/* /Components/Pages/Admin/Quizzes/Index.razor.rz.scp.css */
/* Page Header */
.page-header[b-qsq4pk1nc0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.page-title[b-qsq4pk1nc0] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
}

.page-subtitle[b-qsq4pk1nc0] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin-top: 0.25rem;
}

.header-actions[b-qsq4pk1nc0] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-new[b-qsq4pk1nc0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
}

.btn-new:hover[b-qsq4pk1nc0] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-new[b-qsq4pk1nc0]  svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Budget Bar */
.budget-bar[b-qsq4pk1nc0] {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
}

.budget-item[b-qsq4pk1nc0] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.budget-label[b-qsq4pk1nc0] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 5rem;
}

.budget-track[b-qsq4pk1nc0] {
    flex: 1;
    height: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 9999px;
    overflow: hidden;
}

.budget-fill[b-qsq4pk1nc0] {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.budget-fill--diamonds[b-qsq4pk1nc0] {
    background: linear-gradient(90deg, #8b5cf6, #6366f1);
}

.budget-fill--credits[b-qsq4pk1nc0] {
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
}

.budget-value[b-qsq4pk1nc0] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--wl-text-secondary);
    min-width: 5rem;
    text-align: right;
}

/* Filter Bar */
.filter-bar[b-qsq4pk1nc0] {
    margin-bottom: 1.5rem;
}

.filter-select[b-qsq4pk1nc0] {
    padding: 0.5rem 0.75rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.filter-select:focus[b-qsq4pk1nc0] {
    outline: none;
    border-color: var(--wl-gold);
}

/* Quiz Table */
.quiz-table[b-qsq4pk1nc0] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    overflow: hidden;
}

.table-header[b-qsq4pk1nc0] {
    display: grid;
    grid-template-columns: 2fr 10rem 5rem 7rem 8rem;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-bottom: 1px solid var(--wl-border-medium);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table-row[b-qsq4pk1nc0] {
    display: grid;
    grid-template-columns: 2fr 10rem 5rem 7rem 8rem;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    align-items: center;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    transition: background 0.15s ease;
    text-decoration: none;
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
}

.table-row:last-child[b-qsq4pk1nc0] {
    border-bottom: none;
}

.table-row:hover[b-qsq4pk1nc0] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.question-cell[b-qsq4pk1nc0] {
    font-weight: 500;
    color: var(--wl-text-primary);
}

/* Status Badges */
.status-badge[b-qsq4pk1nc0] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-scheduled[b-qsq4pk1nc0] {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.status-active[b-qsq4pk1nc0] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.status-completed[b-qsq4pk1nc0] {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.status-cancelled[b-qsq4pk1nc0] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Loading & Empty */
.loading-state[b-qsq4pk1nc0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    gap: 1rem;
}

.loading-spinner[b-qsq4pk1nc0] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-qsq4pk1nc0 0.8s linear infinite;
}

@keyframes spin-b-qsq4pk1nc0 {
    to { transform: rotate(360deg); }
}

.empty-state[b-qsq4pk1nc0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    gap: 1rem;
}

.empty-state p[b-qsq4pk1nc0] {
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-qsq4pk1nc0] {
        flex-direction: column;
        gap: 1rem;
    }

    .budget-bar[b-qsq4pk1nc0] {
        flex-direction: column;
        gap: 1rem;
    }

    .table-header[b-qsq4pk1nc0] {
        display: none;
    }

    .table-row[b-qsq4pk1nc0] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem 1.25rem;
    }
}
/* /Components/Pages/Admin/StarterOutfits/Detail.razor.rz.scp.css */
/* Back Link */
.back-link[b-bhfan4fv36] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    transition: color 0.15s ease;
}

.back-link:hover[b-bhfan4fv36] {
    color: var(--wl-gold);
}

.back-link[b-bhfan4fv36]  svg {
    width: 1rem;
    height: 1rem;
}

/* Detail Layout */
.detail-layout[b-bhfan4fv36] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .detail-layout[b-bhfan4fv36] {
        grid-template-columns: 1fr;
    }
}

/* Section Titles */
.section-title[b-bhfan4fv36] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0 0 1rem 0;
}

/* Thumbnails */
.thumbnails-section[b-bhfan4fv36] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.thumbnail-grid[b-bhfan4fv36] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.thumbnail-item[b-bhfan4fv36] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.thumbnail-item img[b-bhfan4fv36] {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    background: var(--wl-bg-secondary);
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
}

.thumbnail-label[b-bhfan4fv36] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-weight: 500;
}

/* Edit Section */
.edit-section[b-bhfan4fv36] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Metadata Card */
.metadata-card[b-bhfan4fv36] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.metadata-grid[b-bhfan4fv36] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.meta-item[b-bhfan4fv36] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.meta-label[b-bhfan4fv36] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.meta-value[b-bhfan4fv36] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

/* Badges */
.badge[b-bhfan4fv36] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-female[b-bhfan4fv36] {
    background: rgba(var(--wl-pink-rgb), 0.15);
    color: var(--wl-pink);
}

.badge-male[b-bhfan4fv36] {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

/* Edit Card */
.edit-card[b-bhfan4fv36] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.form-group[b-bhfan4fv36] {
    margin-bottom: 1.25rem;
}

.form-label[b-bhfan4fv36] {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.form-input[b-bhfan4fv36] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: var(--wl-bg-secondary);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    transition: border-color 0.15s ease;
    box-sizing: border-box;
}

.form-input:focus[b-bhfan4fv36] {
    outline: none;
    border-color: var(--wl-gold);
    box-shadow: 0 0 0 2px var(--wl-gold-bg-hover);
}

.form-input-small[b-bhfan4fv36] {
    width: 6rem;
}

/* Toggle Button */
.toggle-btn[b-bhfan4fv36] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
    border-radius: 0.5rem;
    color: var(--wl-text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.toggle-btn:hover[b-bhfan4fv36] {
    border-color: var(--wl-text-muted);
}

.toggle-btn.is-active[b-bhfan4fv36] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22C55E;
}

.toggle-btn[b-bhfan4fv36]  svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Form Actions */
.form-actions[b-bhfan4fv36] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

.btn-save[b-bhfan4fv36] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.btn-save:hover:not(:disabled)[b-bhfan4fv36] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-save:disabled[b-bhfan4fv36] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-save[b-bhfan4fv36]  svg {
    width: 1rem;
    height: 1rem;
}

.saving-spinner[b-bhfan4fv36] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--wl-bg-dark-rgb), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-bhfan4fv36 0.8s linear infinite;
    display: inline-block;
}

.save-success[b-bhfan4fv36] {
    font-size: 0.875rem;
    color: #22C55E;
    font-weight: 500;
    animation: fadeIn-b-bhfan4fv36 0.3s ease;
}

@keyframes fadeIn-b-bhfan4fv36 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes spin-b-bhfan4fv36 {
    to { transform: rotate(360deg); }
}

/* Layers Section */
.layers-section[b-bhfan4fv36] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.table-wrapper[b-bhfan4fv36] {
    overflow-x: auto;
}

.layers-table[b-bhfan4fv36] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.layers-table th[b-bhfan4fv36] {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--wl-border-medium);
}

.layers-table td[b-bhfan4fv36] {
    padding: 0.625rem 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.layers-table tbody tr:hover[b-bhfan4fv36] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.layer-type[b-bhfan4fv36] {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.type-clothing[b-bhfan4fv36] {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.type-hair[b-bhfan4fv36] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    color: var(--wl-purple);
}

.type-face[b-bhfan4fv36] {
    background: rgba(251, 191, 36, 0.15);
    color: #FBBF24;
}

.type-makeup[b-bhfan4fv36] {
    background: rgba(var(--wl-pink-rgb), 0.15);
    color: var(--wl-pink);
}

.type-accessory[b-bhfan4fv36] {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.no-layers[b-bhfan4fv36] {
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-size: 0.875rem;
    text-align: center;
    padding: 2rem 0;
}

/* Loading & Not Found */
.loading-state[b-bhfan4fv36] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: var(--wl-text-muted);
    gap: 1rem;
}

.loading-spinner[b-bhfan4fv36] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-bhfan4fv36 0.8s linear infinite;
}

.not-found[b-bhfan4fv36] {
    text-align: center;
    padding: 4rem 0;
    color: var(--wl-text-muted);
}

.not-found h2[b-bhfan4fv36] {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin-bottom: 0.5rem;
}

.not-found p[b-bhfan4fv36] {
    margin-bottom: 1.5rem;
}

.btn-back[b-bhfan4fv36] {
    display: inline-flex;
    padding: 0.5rem 1rem;
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-back:hover[b-bhfan4fv36] {
    background: rgba(var(--wl-gold-rgb), 0.25);
}
/* /Components/Pages/Admin/StarterOutfits/Index.razor.rz.scp.css */
/* Page Header */
.page-header[b-pv4yvl5kt1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.page-title[b-pv4yvl5kt1] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
}

.page-subtitle[b-pv4yvl5kt1] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin-top: 0.25rem;
}

.btn-new[b-pv4yvl5kt1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-new:hover[b-pv4yvl5kt1] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-new[b-pv4yvl5kt1]  svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Filter Tabs */
.filter-tabs[b-pv4yvl5kt1] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.filter-tab[b-pv4yvl5kt1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-tab:hover[b-pv4yvl5kt1] {
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.filter-tab.active[b-pv4yvl5kt1] {
    background: var(--wl-gold-bg-hover);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.tab-count[b-pv4yvl5kt1] {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    background: var(--wl-border-medium);
    border-radius: 9999px;
    min-width: 1.25rem;
    text-align: center;
}

.filter-tab.active .tab-count[b-pv4yvl5kt1] {
    background: var(--wl-gold-border);
}

/* Outfit Grid */
.outfit-grid[b-pv4yvl5kt1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .outfit-grid[b-pv4yvl5kt1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .outfit-grid[b-pv4yvl5kt1] {
        grid-template-columns: 1fr;
    }
}

/* Outfit Card */
.outfit-card[b-pv4yvl5kt1] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.outfit-card:hover[b-pv4yvl5kt1] {
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--wl-shadow-color);
}

.card-thumbnail[b-pv4yvl5kt1] {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--wl-bg-secondary);
    position: relative;
}

.card-thumbnail img[b-pv4yvl5kt1] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.outfit-card:hover .card-thumbnail img[b-pv4yvl5kt1] {
    transform: scale(1.05);
}

.card-body[b-pv4yvl5kt1] {
    padding: 1rem;
}

.card-header[b-pv4yvl5kt1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.card-name[b-pv4yvl5kt1] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.card-name:hover[b-pv4yvl5kt1] {
    color: var(--wl-gold);
}

.sort-order[b-pv4yvl5kt1] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-weight: 500;
}

/* Badges */
.card-badges[b-pv4yvl5kt1] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.badge[b-pv4yvl5kt1] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-female[b-pv4yvl5kt1] {
    background: rgba(var(--wl-pink-rgb), 0.15);
    color: var(--wl-pink);
}

.badge-male[b-pv4yvl5kt1] {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.badge-active[b-pv4yvl5kt1] {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.badge-inactive[b-pv4yvl5kt1] {
    background: var(--wl-border-medium);
    color: var(--wl-text-muted);
}

/* Card Actions */
.card-actions[b-pv4yvl5kt1] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.btn-toggle[b-pv4yvl5kt1],
.btn-delete[b-pv4yvl5kt1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    color: var(--wl-text-muted);
}

.btn-toggle:hover[b-pv4yvl5kt1] {
    border-color: rgba(34, 197, 94, 0.3);
    color: #22C55E;
    background: rgba(34, 197, 94, 0.1);
}

.btn-toggle.is-active[b-pv4yvl5kt1] {
    color: #22C55E;
}

.btn-delete:hover[b-pv4yvl5kt1] {
    border-color: rgba(var(--wl-red-rgb), 0.3);
    color: #EF4444;
    background: rgba(var(--wl-red-rgb), 0.1);
}

.btn-toggle[b-pv4yvl5kt1]  svg,
.btn-delete[b-pv4yvl5kt1]  svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* Loading State */
.loading-state[b-pv4yvl5kt1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: var(--wl-text-muted);
    gap: 1rem;
}

.loading-spinner[b-pv4yvl5kt1] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-pv4yvl5kt1 0.8s linear infinite;
}

@keyframes spin-b-pv4yvl5kt1 {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state[b-pv4yvl5kt1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    gap: 1rem;
}

.empty-state[b-pv4yvl5kt1]  svg {
    width: 3rem;
    height: 3rem;
    opacity: 0.5;
}

.empty-state p[b-pv4yvl5kt1] {
    font-size: 1rem;
}

.btn-new-small[b-pv4yvl5kt1] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
    font-weight: 500;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.btn-new-small:hover[b-pv4yvl5kt1] {
    background: rgba(var(--wl-gold-rgb), 0.25);
}

/* Responsive header */
@media (max-width: 640px) {
    .page-header[b-pv4yvl5kt1] {
        flex-direction: column;
        gap: 1rem;
    }
}
/* /Components/Pages/Admin/TestAccounts/Index.razor.rz.scp.css */
/* Page Header */
.page-header[b-qeb4gmhg7h] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.page-title[b-qeb4gmhg7h] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
}

.page-subtitle[b-qeb4gmhg7h] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin-top: 0.25rem;
}

.header-actions[b-qeb4gmhg7h] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-new[b-qeb4gmhg7h] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-new:hover[b-qeb4gmhg7h] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-new:disabled[b-qeb4gmhg7h] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Banners */
.success-banner[b-qeb4gmhg7h] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #22c55e;
    font-size: 0.875rem;
}

.error-banner[b-qeb4gmhg7h] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #ef4444;
    font-size: 0.875rem;
}

/* Stats Row */
.stats-row[b-qeb4gmhg7h] {
    display: flex;
    gap: 1rem;
}

.stat-card[b-qeb4gmhg7h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    min-width: 8rem;
}

.stat-value[b-qeb4gmhg7h] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.stat-label[b-qeb4gmhg7h] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* Table */
.posts-table[b-qeb4gmhg7h] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    overflow: hidden;
}

.table-header[b-qeb4gmhg7h] {
    display: grid;
    grid-template-columns: 1fr 1.5fr 6rem 4rem 6rem;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-bottom: 1px solid var(--wl-border-medium);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table-row[b-qeb4gmhg7h] {
    display: grid;
    grid-template-columns: 1fr 1.5fr 6rem 4rem 6rem;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    align-items: center;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    transition: background 0.15s ease;
}

.table-row:last-child[b-qeb4gmhg7h] {
    border-bottom: none;
}

.table-row:hover[b-qeb4gmhg7h] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

/* Columns */
.col-nickname[b-qeb4gmhg7h] {
    font-weight: 600;
    color: var(--wl-text-primary);
}

.col-email code[b-qeb4gmhg7h] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
}

.col-songs[b-qeb4gmhg7h], .col-fans[b-qeb4gmhg7h] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

/* Tier Badges */
.badge[b-qeb4gmhg7h] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    width: fit-content;
}

.badge-newcomer[b-qeb4gmhg7h] {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.badge-rising[b-qeb4gmhg7h] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.badge-star[b-qeb4gmhg7h] {
    background: rgba(245, 158, 11, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.badge-superstar[b-qeb4gmhg7h] {
    background: rgba(168, 85, 247, 0.12);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

/* Hint */
.hint-text[b-qeb4gmhg7h] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
}

.hint-text code[b-qeb4gmhg7h] {
    font-family: 'JetBrains Mono', monospace;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.8125rem;
}

/* Loading */
.loading-spinner-small[b-qeb4gmhg7h] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--wl-bg-dark-rgb), 0.2);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-qeb4gmhg7h 0.8s linear infinite;
}

@keyframes spin-b-qeb4gmhg7h {
    to { transform: rotate(360deg); }
}

/* Empty State */
.empty-state[b-qeb4gmhg7h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    gap: 1rem;
}

.empty-state p[b-qeb4gmhg7h] {
    font-size: 1rem;
}

/* Section Divider */
.section-divider[b-qeb4gmhg7h] {
    border-top: 1px solid var(--wl-border-medium);
    margin: 2.5rem 0;
}

/* Awards Table */
.awards-table-header[b-qeb4gmhg7h] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 5rem;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-bottom: 1px solid var(--wl-border-medium);
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.awards-table-row[b-qeb4gmhg7h] {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 5rem;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    align-items: center;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    transition: background 0.15s ease;
}

.awards-table-row:last-child[b-qeb4gmhg7h] {
    border-bottom: none;
}

.awards-table-row:hover[b-qeb4gmhg7h] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.col-category[b-qeb4gmhg7h] {
    font-size: 0.875rem;
    color: var(--wl-text-primary);
    font-weight: 500;
}

.col-song[b-qeb4gmhg7h] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

.col-score[b-qeb4gmhg7h] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--wl-gold);
    font-weight: 600;
}

/* Tier Section */
.tier-section[b-qeb4gmhg7h] {
    margin-bottom: 1.5rem;
}

.tier-section:last-child[b-qeb4gmhg7h] {
    margin-bottom: 0;
}

.tier-header[b-qeb4gmhg7h] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.tier-label[b-qeb4gmhg7h] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Responsive */
@media (max-width: 768px) {
    .page-header[b-qeb4gmhg7h] {
        flex-direction: column;
        gap: 1rem;
    }

    .stats-row[b-qeb4gmhg7h] {
        flex-wrap: wrap;
    }

    .table-header[b-qeb4gmhg7h],
    .awards-table-header[b-qeb4gmhg7h] {
        display: none;
    }

    .table-row[b-qeb4gmhg7h],
    .awards-table-row[b-qeb4gmhg7h] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem 1.25rem;
    }
}
/* /Components/Pages/Artifacts/BookProfile.razor.rz.scp.css */
/* Artifact profile styles are shared in Styles/app.css for cross-profile consistency. */
/* /Components/Pages/Artifacts/FilmProfile.razor.rz.scp.css */
/* Artifact profile styles are shared in Styles/app.css for cross-profile consistency. */
/* /Components/Pages/Artifacts/ReleaseProfile.razor.rz.scp.css */
/* Artifact profile styles are shared in Styles/app.css for cross-profile consistency. */
/* /Components/Pages/Artifacts/RoleProfile.razor.rz.scp.css */
/* Artifact profile styles are shared in Styles/app.css for cross-profile consistency. */
/* /Components/Pages/Assets/Inventory.razor.rz.scp.css */
.inv-page[b-f42jleiyjd] {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    min-height: 100vh;
}

.inv-bg-atmosphere[b-f42jleiyjd] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.03) 0%, transparent 50%);
}

/* Loading */
.inv-loading[b-f42jleiyjd] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.inv-loading-spinner[b-f42jleiyjd] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-f42jleiyjd 1s linear infinite;
}

@keyframes spin-b-f42jleiyjd {
    to { transform: rotate(360deg); }
}

.inv-empty[b-f42jleiyjd] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    color: var(--wl-text-muted);
}

/* Header */
.inv-header[b-f42jleiyjd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.inv-header-info[b-f42jleiyjd] {
    display: flex;
    flex-direction: column;
}

.inv-eyebrow[b-f42jleiyjd] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-gold);
    margin-bottom: 0.375rem;
}

.inv-title[b-f42jleiyjd] {
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.inv-count[b-f42jleiyjd] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0.375rem 0 0 0;
}

/* Tabs */
.inv-tabs[b-f42jleiyjd] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.inv-tab[b-f42jleiyjd] {
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    border: 1px solid var(--wl-border-subtle);
    background: transparent;
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.inv-tab:hover[b-f42jleiyjd] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-text-primary);
}

.inv-tab.active[b-f42jleiyjd] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border-color: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-weight: 600;
}

/* Content */
.inv-content[b-f42jleiyjd] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Bonuses panel */
.inv-bonuses-panel[b-f42jleiyjd] {
    background: var(--wl-bg-secondary);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}

.inv-bonuses-panel[b-f42jleiyjd]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 60%);
    pointer-events: none;
}

.inv-bonuses-title[b-f42jleiyjd] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-gold);
    margin: 0 0 0.75rem 0;
    position: relative;
}

.inv-bonuses-list[b-f42jleiyjd] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
}

.inv-bonus-item[b-f42jleiyjd] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4ade80;
}

.inv-bonus-item[b-f42jleiyjd]  svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.inv-bonuses-empty[b-f42jleiyjd] {
    color: var(--wl-text-muted);
    font-size: 0.875rem;
    margin: 0;
    position: relative;
}

/* Grid */
.inv-grid[b-f42jleiyjd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

/* Card */
.inv-card[b-f42jleiyjd] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.2s ease;
    position: relative;
}

.inv-card:hover[b-f42jleiyjd] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--wl-shadow-color);
}

.inv-card.equipped[b-f42jleiyjd] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    box-shadow: 0 0 12px rgba(var(--wl-gold-rgb), 0.1);
}

.inv-card-header[b-f42jleiyjd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Tier stars */
.inv-card-tier[b-f42jleiyjd] {
    display: flex;
    gap: 2px;
}

.tier-star[b-f42jleiyjd] {
    color: var(--wl-text-muted);
    display: inline-flex;
    opacity: 0.3;
}

.tier-star.filled[b-f42jleiyjd] {
    color: var(--wl-gold);
    opacity: 1;
}

.tier-star[b-f42jleiyjd]  svg {
    width: 14px;
    height: 14px;
}

/* Badges */
.inv-badge[b-f42jleiyjd] {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.1875rem 0.625rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inv-badge.active[b-f42jleiyjd] {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.inv-badge.inactive[b-f42jleiyjd] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
    border: 1px solid var(--wl-border-subtle);
}

.property-profile-hint[b-f42jleiyjd] {
    display: block;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    margin-top: 0.25rem;
}

.inv-slot-badge[b-f42jleiyjd] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--wl-gold-light);
}

/* Name */
.inv-card-name[b-f42jleiyjd] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0;
}

.inv-card-city[b-f42jleiyjd] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

/* Stats */
.inv-card-stats[b-f42jleiyjd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.stat-line[b-f42jleiyjd] {
    font-size: 0.8125rem;
    color: var(--wl-text-secondary);
}

.stat-line.bonus[b-f42jleiyjd] {
    color: #4ade80;
    font-weight: 500;
}

/* Actions */
.inv-card-actions[b-f42jleiyjd] {
    margin-top: auto;
}

.inv-equip-btn[b-f42jleiyjd] {
    width: 100%;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border: none;
    border-radius: 8px;
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.inv-equip-btn:hover:not(:disabled)[b-f42jleiyjd] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.inv-equip-btn:disabled[b-f42jleiyjd] {
    opacity: 0.4;
    cursor: not-allowed;
}

.inv-unequip-btn[b-f42jleiyjd] {
    width: 100%;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    color: var(--wl-text-secondary);
    font-weight: 500;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.inv-unequip-btn:hover:not(:disabled)[b-f42jleiyjd] {
    border-color: var(--wl-text-secondary);
    color: var(--wl-text-primary);
}

.inv-unequip-btn:disabled[b-f42jleiyjd] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Equipment slots */
.inv-slots[b-f42jleiyjd] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.inv-slot[b-f42jleiyjd] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
    transition: all 0.2s ease;
}

.inv-slot.filled[b-f42jleiyjd] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    box-shadow: 0 0 16px rgba(var(--wl-gold-rgb), 0.08);
}

.inv-slot.empty[b-f42jleiyjd] {
    opacity: 0.6;
}

.inv-slot-icon[b-f42jleiyjd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-gold);
}

.inv-slot.empty .inv-slot-icon[b-f42jleiyjd] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-muted);
}

.inv-slot-icon[b-f42jleiyjd]  svg {
    width: 24px;
    height: 24px;
}

.inv-slot-type[b-f42jleiyjd] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-muted);
}

.inv-slot-name[b-f42jleiyjd] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.inv-slot-effect[b-f42jleiyjd] {
    font-size: 0.75rem;
    color: #4ade80;
    font-weight: 500;
}

.inv-slot-empty[b-f42jleiyjd] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
}

.inv-slot .inv-unequip-btn[b-f42jleiyjd] {
    width: auto;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Vehicle info bar */
.inv-vehicle-info[b-f42jleiyjd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-gold-rgb), 0.05);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 8px;
    color: var(--wl-text-secondary);
    font-size: 0.8125rem;
}

.inv-vehicle-info[b-f42jleiyjd]  svg {
    flex-shrink: 0;
    color: var(--wl-gold);
}

/* Empty state */
.inv-empty-state[b-f42jleiyjd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
}

.inv-empty-icon[b-f42jleiyjd] {
    display: flex;
    color: var(--wl-text-muted);
    opacity: 0.4;
}

.inv-empty-icon[b-f42jleiyjd]  svg {
    width: 48px;
    height: 48px;
}

.inv-empty-state p[b-f42jleiyjd] {
    color: var(--wl-text-muted);
    font-size: 0.9375rem;
    margin: 0;
}

.inv-shop-link[b-f42jleiyjd] {
    display: inline-flex;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border-radius: 8px;
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.inv-shop-link:hover[b-f42jleiyjd] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

/* Animations */
.animate-fade-in[b-f42jleiyjd] {
    animation: fadeIn-b-f42jleiyjd 0.3s ease forwards;
    opacity: 0;
}

.delay-50[b-f42jleiyjd] {
    animation-delay: 50ms;
}

.delay-100[b-f42jleiyjd] {
    animation-delay: 100ms;
}

@keyframes fadeIn-b-f42jleiyjd {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .inv-slots[b-f42jleiyjd] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .inv-grid[b-f42jleiyjd] {
        grid-template-columns: 1fr;
    }

    .inv-header[b-f42jleiyjd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .inv-tabs[b-f42jleiyjd] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .inv-bonuses-list[b-f42jleiyjd] {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* /Components/Pages/Assets/Shop.razor.rz.scp.css */
.shop-page[b-1xkqnohoou] {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    min-height: 100vh;
}

.shop-bg-atmosphere[b-1xkqnohoou] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.03) 0%, transparent 50%);
}

/* Loading */
.shop-loading[b-1xkqnohoou] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.shop-loading-spinner[b-1xkqnohoou] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-1xkqnohoou 1s linear infinite;
}

@keyframes spin-b-1xkqnohoou {
    to { transform: rotate(360deg); }
}

.shop-empty[b-1xkqnohoou] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    color: var(--wl-text-muted);
}

/* Header */
.shop-header[b-1xkqnohoou] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.shop-header-info[b-1xkqnohoou] {
    display: flex;
    flex-direction: column;
}

.shop-eyebrow[b-1xkqnohoou] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-gold);
    margin-bottom: 0.375rem;
}

.shop-title[b-1xkqnohoou] {
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.shop-city[b-1xkqnohoou] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0.375rem 0 0 0;
    display: block;
}

.shop-balance[b-1xkqnohoou] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-align: right;
}

.shop-credits[b-1xkqnohoou] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.shop-diamonds[b-1xkqnohoou] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #65d7ff;
}

/* Tabs */
.shop-tabs[b-1xkqnohoou] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.shop-tab[b-1xkqnohoou] {
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    border: 1px solid var(--wl-border-subtle);
    background: transparent;
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.shop-tab:hover[b-1xkqnohoou] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-text-primary);
}

.shop-tab.active[b-1xkqnohoou] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border-color: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-weight: 600;
}

/* Grid */
.shop-grid[b-1xkqnohoou] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

/* Card */
.shop-card[b-1xkqnohoou] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.2s ease;
    position: relative;
}

.shop-card:hover[b-1xkqnohoou] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--wl-shadow-color);
}

.shop-card.owned[b-1xkqnohoou] {
    opacity: 0.6;
    pointer-events: none;
}

.shop-card.owned[b-1xkqnohoou]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--wl-overlay-light);
    border-radius: 12px;
    pointer-events: none;
}

/* Locked overlay (fame gating) */
.shop-card.locked[b-1xkqnohoou] {
    pointer-events: none;
}

.shop-card-lock-overlay[b-1xkqnohoou] {
    position: absolute;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 10;
    cursor: help;
    pointer-events: auto;
}

.lock-icon[b-1xkqnohoou] {
    color: var(--wl-gold);
}

/* Tier stars */
.shop-card-tier[b-1xkqnohoou] {
    display: flex;
    gap: 2px;
}

.tier-star[b-1xkqnohoou] {
    color: var(--wl-text-muted);
    display: inline-flex;
    opacity: 0.3;
}

.tier-star.filled[b-1xkqnohoou] {
    color: var(--wl-gold);
    opacity: 1;
}

.tier-star[b-1xkqnohoou]  svg {
    width: 14px;
    height: 14px;
}

/* Name */
.shop-card-name[b-1xkqnohoou] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0;
}

/* Stats */
.shop-card-stats[b-1xkqnohoou] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.stat-line[b-1xkqnohoou] {
    font-size: 0.8125rem;
    color: var(--wl-text-secondary);
}

.stat-city[b-1xkqnohoou] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    font-style: italic;
    margin-top: 0.25rem;
}

.property-profile-hint[b-1xkqnohoou] {
    display: block;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
    margin-top: 0.25rem;
}

.purchase-property-note[b-1xkqnohoou] {
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
    margin: 0.75rem 0 0;
}

.slot-badge[b-1xkqnohoou] {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--wl-gold-light);
    width: fit-content;
}

/* Price */
.shop-card-price[b-1xkqnohoou] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.price-credits[b-1xkqnohoou] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.price-diamonds[b-1xkqnohoou] {
    font-size: 0.8125rem;
    color: var(--wl-gold);
}

/* Owned overlay */
.shop-card-owned[b-1xkqnohoou] {
    padding: 0.5rem;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

/* Buy button */
.shop-buy-btn[b-1xkqnohoou] {
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border: none;
    border-radius: 8px;
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.shop-buy-btn:hover:not(:disabled)[b-1xkqnohoou] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.shop-buy-btn:disabled[b-1xkqnohoou] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Purchase modal */
.purchase-confirm p[b-1xkqnohoou] {
    color: var(--wl-text-primary);
    font-size: 0.9375rem;
    margin: 0;
}

.purchase-confirm .purchase-premium-cost[b-1xkqnohoou] {
    color: #65d7ff;
    font-weight: 600;
    margin-top: 0.5rem;
}

.purchase-actions[b-1xkqnohoou] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.btn-cancel[b-1xkqnohoou] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    color: var(--wl-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-1xkqnohoou] {
    border-color: var(--wl-text-secondary);
}

.btn-confirm[b-1xkqnohoou] {
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border: none;
    border-radius: 8px;
    color: var(--wl-bg-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-confirm:hover[b-1xkqnohoou] {
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

/* Animations */
.animate-fade-in[b-1xkqnohoou] {
    animation: fadeIn-b-1xkqnohoou 0.3s ease forwards;
    opacity: 0;
}

.delay-50[b-1xkqnohoou] {
    animation-delay: 50ms;
}

.delay-100[b-1xkqnohoou] {
    animation-delay: 100ms;
}

@keyframes fadeIn-b-1xkqnohoou {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 640px) {
    .shop-grid[b-1xkqnohoou] {
        grid-template-columns: 1fr;
    }

    .shop-header[b-1xkqnohoou] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .shop-balance[b-1xkqnohoou] {
        text-align: left;
    }

    .shop-tabs[b-1xkqnohoou] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}
/* /Components/Pages/Assets/Travel.razor.rz.scp.css */
/* =========================================
   Travel Page - Premium Dark Luxury Theme
   ========================================= */

.travel-page[b-74rw0s4g58] {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
    min-height: 100vh;
}

.travel-bg-atmosphere[b-74rw0s4g58] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.03) 0%, transparent 50%);
}

/* ---- Loading ---- */
.travel-loading[b-74rw0s4g58] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.travel-loading-spinner[b-74rw0s4g58] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-74rw0s4g58 1s linear infinite;
}

@keyframes spin-b-74rw0s4g58 {
    to { transform: rotate(360deg); }
}

.travel-empty[b-74rw0s4g58] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    color: var(--wl-text-muted);
}

/* ---- Header ---- */
.travel-header[b-74rw0s4g58] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.travel-header-info[b-74rw0s4g58] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.travel-eyebrow[b-74rw0s4g58] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-gold);
}

.travel-title[b-74rw0s4g58] {
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.travel-current-city[b-74rw0s4g58] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.travel-city-label[b-74rw0s4g58] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.travel-city-name[b-74rw0s4g58] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.travel-city-icon[b-74rw0s4g58] {
    display: inline-flex;
    color: var(--wl-gold);
}

.travel-city-icon[b-74rw0s4g58]  svg {
    width: 20px;
    height: 20px;
}

.travel-balance[b-74rw0s4g58] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
}

.travel-balance-row[b-74rw0s4g58] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.travel-energy-icon[b-74rw0s4g58] {
    display: inline-flex;
    color: var(--wl-gold-light);
}

.travel-energy-icon[b-74rw0s4g58]  svg {
    width: 16px;
    height: 16px;
}

.travel-energy-val[b-74rw0s4g58] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-gold-light);
}

.travel-credits[b-74rw0s4g58] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-gold);
}

/* =========================================
   Promotional Deals Section
   ========================================= */
.travel-promos[b-74rw0s4g58] {
    margin-bottom: 2rem;
}

.travel-promos-title[b-74rw0s4g58] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0 0 1rem 0;
}

.promo-title-icon[b-74rw0s4g58] {
    display: inline-flex;
    color: var(--wl-gold);
}

.promo-title-icon[b-74rw0s4g58]  svg {
    width: 20px;
    height: 20px;
}

.promo-grid[b-74rw0s4g58] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* ---- Promo Card ---- */
.promo-card[b-74rw0s4g58] {
    position: relative;
    background: var(--wl-bg-secondary);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    transition: all 0.2s ease;
    overflow: hidden;
}

.promo-card[b-74rw0s4g58]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.4), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.promo-card:hover[b-74rw0s4g58] {
    border-color: rgba(var(--wl-gold-rgb), 0.45);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--wl-shadow-color), 0 0 40px rgba(var(--wl-gold-rgb), 0.05);
}

/* Discount Badge */
.promo-discount-badge[b-74rw0s4g58] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--wl-bg-primary);
    letter-spacing: -0.02em;
}

.promo-dest[b-74rw0s4g58] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    padding-right: 3.5rem;
}

.promo-dest-icon[b-74rw0s4g58] {
    display: inline-flex;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.promo-dest-icon[b-74rw0s4g58]  svg {
    width: 16px;
    height: 16px;
}

.promo-dist[b-74rw0s4g58] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
}

/* Prices */
.promo-price[b-74rw0s4g58] {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    margin-top: 0.125rem;
}

.promo-original-price[b-74rw0s4g58] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    text-decoration: line-through;
    opacity: 0.7;
}

.promo-discounted-price[b-74rw0s4g58] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wl-gold);
}

/* Meta row */
.promo-meta[b-74rw0s4g58] {
    display: flex;
    gap: 1rem;
}

.promo-meta-item[b-74rw0s4g58] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--wl-text-secondary);
}

.promo-meta-item[b-74rw0s4g58]  svg {
    width: 14px;
    height: 14px;
}

/* Expires */
.promo-expires[b-74rw0s4g58] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

/* Go button */
.promo-go-btn[b-74rw0s4g58] {
    margin-top: 0.25rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border: none;
    border-radius: 8px;
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.promo-go-btn:hover:not(:disabled)[b-74rw0s4g58] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.promo-go-btn:disabled[b-74rw0s4g58] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* =========================================
   Destination Picker
   ========================================= */
.travel-destination[b-74rw0s4g58] {
    margin-bottom: 2rem;
    /* animate-fade-in turns every section into its own stacking context (it keeps
       a transform), so the open city dropdown was painted UNDER the later
       travel-options section (the "Samolot" card bled through the list). Give the
       destination section an explicit higher z-index so its dropdown stays on top. */
    position: relative;
    z-index: 30;
}

.travel-section-title[b-74rw0s4g58] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text-secondary);
    margin: 0 0 0.75rem 0;
}

.travel-map-wrapper[b-74rw0s4g58] {
    margin-bottom: 1rem;
}

.travel-search-wrapper[b-74rw0s4g58] {
    width: 100%;
}

/* City dropdown row: name + muted country name (disambiguates duplicate city names) */
.city-option[b-74rw0s4g58] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
}

.city-option-country[b-74rw0s4g58] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    white-space: nowrap;
}

/* =========================================
   Route Info
   ========================================= */
.travel-options[b-74rw0s4g58] {
    margin-bottom: 2rem;
    /* Sits below the destination section so the open city dropdown overlays it. */
    position: relative;
    z-index: 20;
}

.travel-route-info[b-74rw0s4g58] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
}

.route-from[b-74rw0s4g58],
.route-to[b-74rw0s4g58] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
}

.route-divider[b-74rw0s4g58] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.route-line[b-74rw0s4g58] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.3), transparent);
}

.route-distance[b-74rw0s4g58] {
    font-size: 0.75rem;
    color: var(--wl-gold);
    white-space: nowrap;
    font-weight: 500;
}

.travel-no-options[b-74rw0s4g58] {
    text-align: center;
    padding: 2rem;
    color: var(--wl-text-muted);
}

/* =========================================
   Transport List
   ========================================= */
.transport-list[b-74rw0s4g58] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.transport-card[b-74rw0s4g58] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.transport-card:hover[b-74rw0s4g58] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: 0 4px 16px var(--wl-shadow-color);
}

.transport-card--blocked[b-74rw0s4g58] {
    border-color: rgba(255, 118, 96, 0.28);
    background:
        linear-gradient(90deg, rgba(255, 118, 96, 0.08), transparent 42%),
        var(--wl-bg-secondary);
}

.transport-card--blocked:hover[b-74rw0s4g58] {
    border-color: rgba(255, 118, 96, 0.36);
}

.transport-icon-wrap[b-74rw0s4g58] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-gold);
    flex-shrink: 0;
}

.transport-icon-wrap[b-74rw0s4g58]  svg {
    width: 24px;
    height: 24px;
}

.transport-info[b-74rw0s4g58] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.transport-name-row[b-74rw0s4g58] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.transport-name[b-74rw0s4g58] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.transport-private-badge[b-74rw0s4g58] {
    padding: 0.125rem 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--wl-gold-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.transport-news24-badge[b-74rw0s4g58] {
    border-color: rgba(255, 118, 96, 0.36);
    background: rgba(255, 118, 96, 0.12);
    color: rgb(255, 154, 135);
}

.transport-stats[b-74rw0s4g58] {
    display: flex;
    gap: 1rem;
}

.transport-stat[b-74rw0s4g58] {
    font-size: 0.8125rem;
    color: var(--wl-text-secondary);
}

.transport-blocked-reason[b-74rw0s4g58] {
    display: grid;
    gap: 0.15rem;
    margin: 0.35rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.72);
    font-size: 0.78rem;
    line-height: 1.35;
}

.transport-blocked-reason strong[b-74rw0s4g58] {
    color: rgb(255, 154, 135);
    font-size: 0.7rem;
    text-transform: uppercase;
}

.transport-costs[b-74rw0s4g58] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.transport-cost-credits[b-74rw0s4g58] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.transport-cost-energy[b-74rw0s4g58] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--wl-gold-light);
}

.transport-cost-energy[b-74rw0s4g58]  svg {
    width: 14px;
    height: 14px;
}

.transport-go-btn[b-74rw0s4g58] {
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border: none;
    border-radius: 8px;
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.transport-go-btn:hover:not(:disabled)[b-74rw0s4g58] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.transport-go-btn:disabled[b-74rw0s4g58] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* =========================================
   Modals
   ========================================= */
.travel-confirm p[b-74rw0s4g58] {
    color: var(--wl-text-primary);
    font-size: 0.9375rem;
    margin: 0;
}

.travel-confirm-actions[b-74rw0s4g58] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.btn-cancel[b-74rw0s4g58] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    color: var(--wl-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-74rw0s4g58] {
    border-color: var(--wl-text-secondary);
}

.btn-confirm[b-74rw0s4g58] {
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border: none;
    border-radius: 8px;
    color: var(--wl-bg-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-confirm:hover[b-74rw0s4g58] {
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

/* =========================================
   Animations
   ========================================= */
.animate-fade-in[b-74rw0s4g58] {
    animation: fadeIn-b-74rw0s4g58 0.3s ease forwards;
    opacity: 0;
}

.delay-50[b-74rw0s4g58] {
    animation-delay: 50ms;
}

.delay-100[b-74rw0s4g58] {
    animation-delay: 100ms;
}

@keyframes fadeIn-b-74rw0s4g58 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 768px) {
    .travel-header[b-74rw0s4g58] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .travel-balance[b-74rw0s4g58] {
        align-items: flex-start;
    }

    .promo-grid[b-74rw0s4g58] {
        grid-template-columns: 1fr;
    }

    .transport-card[b-74rw0s4g58] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .transport-icon-wrap[b-74rw0s4g58] {
        width: 40px;
        height: 40px;
    }

    .transport-icon-wrap[b-74rw0s4g58]  svg {
        width: 20px;
        height: 20px;
    }

    .transport-costs[b-74rw0s4g58] {
        flex-direction: row;
        gap: 0.75rem;
        align-items: center;
    }

    .transport-go-btn[b-74rw0s4g58] {
        width: 100%;
        text-align: center;
    }

    .route-from[b-74rw0s4g58],
    .route-to[b-74rw0s4g58] {
        font-size: 0.8125rem;
    }

    .travel-search-wrapper[b-74rw0s4g58] {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .travel-page[b-74rw0s4g58] {
        padding: 1rem;
    }

    .travel-route-info[b-74rw0s4g58] {
        flex-direction: column;
        gap: 0.375rem;
        text-align: center;
    }

    .route-divider[b-74rw0s4g58] {
        width: 100%;
    }
}

/* =========================================
   Quick Destinations (favorites + property cities)
   ========================================= */
.travel-quick-destinations[b-74rw0s4g58] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.quick-dest-chip[b-74rw0s4g58] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--wl-border-subtle);
    background: var(--wl-bg-secondary);
    color: var(--wl-text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.quick-dest-chip:hover[b-74rw0s4g58] {
    border-color: rgba(var(--wl-gold-rgb), 0.45);
    background: var(--wl-bg-tertiary);
    transform: translateY(-1px);
}

.quick-dest-chip.is-favorite[b-74rw0s4g58] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
}

.quick-dest-icon[b-74rw0s4g58] {
    display: inline-flex;
    align-items: center;
    color: var(--wl-text-muted);
}

.quick-dest-icon svg[b-74rw0s4g58] {
    width: 1.05rem;
    height: 1.05rem;
}

.quick-dest-chip.is-favorite .quick-dest-icon[b-74rw0s4g58] {
    color: var(--wl-gold);
}

.quick-dest-chip.is-favorite .quick-dest-icon svg[b-74rw0s4g58] {
    fill: var(--wl-gold);
}

.quick-dest-name[b-74rw0s4g58] {
    white-space: nowrap;
}

.quick-dest-tag[b-74rw0s4g58] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wl-text-muted);
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

/* Favorite toggle on the selected destination */
.travel-favorite-row[b-74rw0s4g58] {
    display: flex;
    justify-content: flex-end;
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

.favorite-toggle[b-74rw0s4g58] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--wl-border-subtle);
    background: transparent;
    color: var(--wl-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.favorite-toggle:hover[b-74rw0s4g58] {
    border-color: rgba(var(--wl-gold-rgb), 0.45);
    color: var(--wl-text-primary);
}

.favorite-toggle svg[b-74rw0s4g58] {
    width: 1.05rem;
    height: 1.05rem;
    transition: fill 0.16s ease, color 0.16s ease;
}

.favorite-toggle.is-on[b-74rw0s4g58] {
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.45);
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.favorite-toggle.is-on svg[b-74rw0s4g58] {
    fill: var(--wl-gold);
    color: var(--wl-gold);
}
/* /Components/Pages/Awards/AwardInvitation.razor.rz.scp.css */
/* ============================================
   AWARD INVITATION RESPONSE PAGE
   Theme: Elegant invitation card with gold accents
   ============================================ */

.invite-page[b-m5mqmkd3ww] {
    position: relative;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

/* Atmospheric background */
.invite-bg-atmosphere[b-m5mqmkd3ww] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.04) 0%, transparent 50%);
}

/* Loading */
.invite-loading[b-m5mqmkd3ww] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

.invite-loading-spinner[b-m5mqmkd3ww] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: invite-spin-b-m5mqmkd3ww 1s linear infinite;
}

@keyframes invite-spin-b-m5mqmkd3ww {
    to { transform: rotate(360deg); }
}

/* Not Found */
.invite-not-found[b-m5mqmkd3ww] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding: 3rem 1.5rem;
}

.invite-not-found-icon[b-m5mqmkd3ww] {
    width: 64px;
    height: 64px;
    color: rgba(var(--wl-gold-rgb), 0.3);
}

.invite-not-found-icon[b-m5mqmkd3ww]  svg {
    width: 100%;
    height: 100%;
}

.invite-not-found-text[b-m5mqmkd3ww] {
    color: var(--wl-text-muted);
    font-size: 0.9375rem;
}

/* ============================================
   INVITATION CARD
   ============================================ */

.invite-card[b-m5mqmkd3ww] {
    width: 100%;
    border-radius: 16px;
    padding: 2px;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.6) 0%,
        var(--wl-gold-border) 25%,
        rgba(var(--wl-gold-rgb), 0.3) 50%,
        var(--wl-gold-border) 75%,
        rgba(var(--wl-gold-rgb), 0.6) 100%);
    box-shadow:
        0 0 40px rgba(var(--wl-gold-rgb), 0.1),
        0 20px 60px rgba(0, 0, 0, 0.2);
}

.invite-card-inner[b-m5mqmkd3ww] {
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.98) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.96) 100%);
    border-radius: 14px;
    padding: 2rem 1.75rem;
    position: relative;
    overflow: hidden;
}

.invite-card-inner[b-m5mqmkd3ww]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* Header */
.invite-header[b-m5mqmkd3ww] {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.invite-tier-icon[b-m5mqmkd3ww] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    color: var(--wl-gold);
    flex-shrink: 0;
}

.invite-tier-icon[b-m5mqmkd3ww]  svg {
    width: 1.5rem;
    height: 1.5rem;
}

.invite-header-text[b-m5mqmkd3ww] {
    flex: 1;
    min-width: 0;
}

.invite-show-name[b-m5mqmkd3ww] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    line-height: 1.1;
    color: rgba(var(--wl-contrast-rgb), 0.95);
    margin: 0 0 0.375rem 0;
}

.invite-show-meta[b-m5mqmkd3ww] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.invite-tier-badge[b-m5mqmkd3ww] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
}

.invite-tier-badge.tier-newcomer[b-m5mqmkd3ww] {
    background: rgba(var(--wl-green-rgb), 0.15);
    color: var(--wl-green);
}

.invite-tier-badge.tier-local[b-m5mqmkd3ww] {
    background: rgba(var(--wl-blue-rgb), 0.15);
    color: var(--wl-blue);
}

.invite-tier-badge.tier-regional[b-m5mqmkd3ww] {
    background: rgba(var(--wl-teal-rgb, 45, 212, 191), 0.15);
    color: var(--wl-teal, #2dd4bf);
}

.invite-tier-badge.tier-global[b-m5mqmkd3ww] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    color: var(--wl-purple);
}

.invite-edition-label[b-m5mqmkd3ww] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

/* Divider */
.invite-divider[b-m5mqmkd3ww] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.invite-divider-line[b-m5mqmkd3ww] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--wl-gold-rgb), 0.3) 50%, transparent 100%);
}

.invite-divider-ornament[b-m5mqmkd3ww] {
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(var(--wl-gold-rgb), 0.5);
    flex-shrink: 0;
}

.invite-divider-ornament[b-m5mqmkd3ww]  svg {
    width: 100%;
    height: 100%;
}

/* Invitation title */
.invite-title-section[b-m5mqmkd3ww] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.invite-title-label[b-m5mqmkd3ww] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, var(--wl-gold-dark) 0%, var(--wl-gold) 50%, var(--wl-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Role Section */
.invite-role-section[b-m5mqmkd3ww] {
    margin-bottom: 1.5rem;
}

.invite-role-label[b-m5mqmkd3ww] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-gold-rgb), 0.7);
    margin-bottom: 0.75rem;
}

.invite-role-card[b-m5mqmkd3ww] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 12px;
}

.invite-role-icon[b-m5mqmkd3ww] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    color: var(--wl-gold);
    flex-shrink: 0;
}

.invite-role-icon[b-m5mqmkd3ww]  svg {
    width: 1.5rem;
    height: 1.5rem;
}

.invite-role-info[b-m5mqmkd3ww] {
    flex: 1;
    min-width: 0;
}

.invite-role-name[b-m5mqmkd3ww] {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.95);
    margin-bottom: 0.25rem;
}

.invite-role-desc[b-m5mqmkd3ww] {
    display: block;
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    line-height: 1.4;
}

/* Nominations */
.invite-nominations[b-m5mqmkd3ww] {
    margin-bottom: 1.5rem;
}

.invite-nominations-label[b-m5mqmkd3ww] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-gold-rgb), 0.7);
    margin-bottom: 0.75rem;
}

.invite-nominations-list[b-m5mqmkd3ww] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.invite-nomination-item[b-m5mqmkd3ww] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    border-radius: 8px;
}

.invite-nomination-icon[b-m5mqmkd3ww] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.invite-nomination-icon[b-m5mqmkd3ww]  svg {
    width: 100%;
    height: 100%;
}

.invite-nomination-name[b-m5mqmkd3ww] {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

/* Details Row */
.invite-details-row[b-m5mqmkd3ww] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.invite-detail[b-m5mqmkd3ww] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    border-radius: 8px;
}

.invite-detail-icon[b-m5mqmkd3ww] {
    width: 1.5rem;
    height: 1.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    flex-shrink: 0;
}

.invite-detail-icon[b-m5mqmkd3ww]  svg {
    width: 100%;
    height: 100%;
}

.invite-detail-icon.expired[b-m5mqmkd3ww] {
    color: rgba(var(--wl-red-rgb), 0.6);
}

.invite-detail-info[b-m5mqmkd3ww] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.invite-detail-label[b-m5mqmkd3ww] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
}

.invite-detail-value[b-m5mqmkd3ww] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.invite-detail-value.expired[b-m5mqmkd3ww] {
    color: rgba(var(--wl-red-rgb), 0.8);
}

.invite-detail-value.countdown[b-m5mqmkd3ww] {
    color: var(--wl-gold);
}

/* Action Buttons */
.invite-actions[b-m5mqmkd3ww] {
    display: flex;
    gap: 0.75rem;
}

.invite-btn[b-m5mqmkd3ww] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border: none;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.invite-btn:disabled[b-m5mqmkd3ww] {
    opacity: 0.5;
    cursor: not-allowed;
}

.invite-btn-accept[b-m5mqmkd3ww] {
    background: linear-gradient(135deg, var(--wl-gold-dark) 0%, var(--wl-gold) 100%);
    color: var(--wl-bg-primary);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.3);
}

.invite-btn-accept:not(:disabled):hover[b-m5mqmkd3ww] {
    box-shadow: 0 6px 30px rgba(var(--wl-gold-rgb), 0.5);
    transform: translateY(-1px);
}

.invite-btn-icon[b-m5mqmkd3ww] {
    width: 1.125rem;
    height: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.invite-btn-icon[b-m5mqmkd3ww]  svg {
    width: 100%;
    height: 100%;
}

.invite-btn-decline[b-m5mqmkd3ww] {
    background: transparent;
    color: var(--wl-text-muted);
    border: 1px solid var(--wl-border-medium);
}

.invite-btn-decline:not(:disabled):hover[b-m5mqmkd3ww] {
    color: rgba(var(--wl-red-rgb), 0.8);
    border-color: rgba(var(--wl-red-rgb), 0.3);
    background: rgba(var(--wl-red-rgb), 0.05);
}

/* Status Badge */
.invite-status[b-m5mqmkd3ww] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
}

.invite-status-badge[b-m5mqmkd3ww] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.invite-status-badge.status-accepted[b-m5mqmkd3ww],
.invite-status-badge.status-autoassigned[b-m5mqmkd3ww] {
    background: rgba(var(--wl-green-rgb), 0.15);
    color: var(--wl-green);
    border: 1px solid rgba(var(--wl-green-rgb), 0.25);
}

.invite-status-badge.status-declined[b-m5mqmkd3ww] {
    background: rgba(var(--wl-red-rgb), 0.1);
    color: rgba(var(--wl-red-rgb), 0.8);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
}

.invite-status-badge.status-pending[b-m5mqmkd3ww],
.invite-status-badge.status-expired[b-m5mqmkd3ww] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
    border: 1px solid var(--wl-border-medium);
}

.invite-status-note[b-m5mqmkd3ww] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

/* Footer */
.invite-footer[b-m5mqmkd3ww] {
    text-align: center;
}

.invite-back-link[b-m5mqmkd3ww] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.invite-back-link:hover[b-m5mqmkd3ww] {
    color: var(--wl-gold);
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animate-fade-in[b-m5mqmkd3ww] {
    animation: inviteFadeIn-b-m5mqmkd3ww 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes inviteFadeIn-b-m5mqmkd3ww {
    to { opacity: 1; }
}

.delay-100[b-m5mqmkd3ww] { animation-delay: 0.1s; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
    .invite-page[b-m5mqmkd3ww] {
        padding: 1rem;
    }

    .invite-card-inner[b-m5mqmkd3ww] {
        padding: 1.5rem 1.25rem;
    }

    .invite-show-name[b-m5mqmkd3ww] {
        font-size: 1.25rem;
    }

    .invite-title-label[b-m5mqmkd3ww] {
        font-size: 1.5rem;
    }

    .invite-details-row[b-m5mqmkd3ww] {
        grid-template-columns: 1fr;
    }

    .invite-actions[b-m5mqmkd3ww] {
        flex-direction: column;
    }
}
/* /Components/Pages/Awards/Awards.razor.rz.scp.css */
/* ============================================
   AWARDS DISCOVERY PAGE
   Theme: Luxury magazine / award show glamour
   ============================================ */

.awards-page[b-iatdr21eq3] {
    position: relative;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Atmospheric background */
.awards-bg-atmosphere[b-iatdr21eq3] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-diamond-rgb), 0.03) 0%, transparent 50%);
}

/* ============================================
   LOADING STATE
   ============================================ */

.awards-loading[b-iatdr21eq3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
}

.awards-loading-spinner[b-iatdr21eq3] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: awards-spin-b-iatdr21eq3 1s linear infinite;
}

@keyframes awards-spin-b-iatdr21eq3 {
    to { transform: rotate(360deg); }
}

/* ============================================
   PAGE HEADER
   ============================================ */

.awards-header[b-iatdr21eq3] {
    text-align: center;
    padding: 2rem 0 0.5rem;
}

.awards-header-icon[b-iatdr21eq3] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    color: var(--wl-gold);
    filter: drop-shadow(0 0 12px rgba(var(--wl-gold-rgb), 0.4));
}

.awards-header-icon[b-iatdr21eq3]  svg {
    width: 100%;
    height: 100%;
}

.awards-title[b-iatdr21eq3] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem;
    background: linear-gradient(135deg, var(--wl-gold-light), var(--wl-gold), var(--wl-gold-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.awards-subtitle[b-iatdr21eq3] {
    font-size: 0.9rem;
    color: var(--wl-text-muted);
    font-style: italic;
    margin: 0;
}

/* ============================================
   FILTER TABS
   ============================================ */

.awards-filters[b-iatdr21eq3] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0.5rem 0;
}

.awards-filter-tab[b-iatdr21eq3] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 9999px;
    background: var(--wl-bg-secondary);
    color: var(--wl-text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.awards-filter-tab:hover[b-iatdr21eq3] {
    border-color: var(--wl-border-medium);
    background: var(--wl-bg-tertiary);
    color: var(--wl-text-primary);
}

.awards-filter-tab.active[b-iatdr21eq3] {
    background: var(--wl-gold-bg);
    border-color: var(--wl-gold-border);
    color: var(--wl-gold);
}

.awards-filter-tab.active.tier-newcomer[b-iatdr21eq3] {
    background: rgba(var(--wl-green-rgb), 0.1);
    border-color: rgba(var(--wl-green-rgb), 0.3);
    color: var(--wl-green);
}

.awards-filter-tab.active.tier-local[b-iatdr21eq3] {
    background: rgba(var(--wl-blue-rgb), 0.1);
    border-color: rgba(var(--wl-blue-rgb), 0.3);
    color: var(--wl-blue);
}

.awards-filter-tab.active.tier-regional[b-iatdr21eq3] {
    background: rgba(var(--wl-teal-rgb, 45, 212, 191), 0.1);
    border-color: rgba(var(--wl-teal-rgb, 45, 212, 191), 0.3);
    color: var(--wl-teal, #2dd4bf);
}

.awards-filter-tab.active.tier-global[b-iatdr21eq3] {
    background: rgba(var(--wl-diamond-rgb), 0.1);
    border-color: rgba(var(--wl-diamond-rgb), 0.3);
    color: var(--wl-diamond);
}

.filter-icon[b-iatdr21eq3] {
    width: 14px;
    height: 14px;
    display: inline-flex;
}

.filter-icon[b-iatdr21eq3]  svg {
    width: 100%;
    height: 100%;
}

/* ============================================
   SECTION TITLES
   ============================================ */

.awards-section[b-iatdr21eq3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.awards-section-title[b-iatdr21eq3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
    color: var(--wl-text-primary);
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.section-icon[b-iatdr21eq3] {
    width: 22px;
    height: 22px;
    color: var(--wl-gold);
    display: inline-flex;
    flex-shrink: 0;
}

.section-icon[b-iatdr21eq3]  svg {
    width: 100%;
    height: 100%;
}

/* ============================================
   AWARDS GRID
   ============================================ */

.awards-grid[b-iatdr21eq3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1rem;
}

/* ============================================
   AWARD CARD - Base
   ============================================ */

.awards-card[b-iatdr21eq3] {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-subtle);
    cursor: pointer;
    transition: all 0.25s ease;
}

.awards-card:hover[b-iatdr21eq3] {
    border-color: var(--wl-gold-border);
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(var(--wl-gold-rgb), 0.1);
}

/* Tier stripe */
.card-tier-stripe[b-iatdr21eq3] {
    height: 4px;
    width: 100%;
}

.card-tier-stripe.tier-newcomer[b-iatdr21eq3] {
    background: linear-gradient(90deg, var(--wl-green), rgba(var(--wl-green-rgb), 0.4));
}

.card-tier-stripe.tier-local[b-iatdr21eq3] {
    background: linear-gradient(90deg, var(--wl-blue), rgba(var(--wl-blue-rgb), 0.4));
}

.card-tier-stripe.tier-regional[b-iatdr21eq3] {
    background: linear-gradient(90deg, var(--wl-teal, #2dd4bf), rgba(var(--wl-teal-rgb, 45, 212, 191), 0.4));
}

.card-tier-stripe.tier-global[b-iatdr21eq3] {
    background: linear-gradient(90deg, var(--wl-diamond), rgba(var(--wl-diamond-rgb), 0.4));
}

/* Card image (for past ceremonies with red carpet) */
.card-image[b-iatdr21eq3] {
    height: 120px;
    position: relative;
    overflow: hidden;
}

.card-image[b-iatdr21eq3]  .card-image-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.card-image-overlay[b-iatdr21eq3] {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 30%, var(--wl-bg-secondary) 100%);
}

/* Card content */
.card-content[b-iatdr21eq3] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.card-header[b-iatdr21eq3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.card-badges[b-iatdr21eq3] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* Tier badges */
.tier-badge[b-iatdr21eq3] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tier-badge.tier-newcomer[b-iatdr21eq3] {
    background: rgba(var(--wl-green-rgb), 0.15);
    color: var(--wl-green);
    border: 1px solid rgba(var(--wl-green-rgb), 0.25);
}

.tier-badge.tier-local[b-iatdr21eq3] {
    background: rgba(var(--wl-blue-rgb), 0.15);
    color: var(--wl-blue);
    border: 1px solid rgba(var(--wl-blue-rgb), 0.25);
}

.tier-badge.tier-regional[b-iatdr21eq3] {
    background: rgba(var(--wl-teal-rgb, 45, 212, 191), 0.15);
    color: var(--wl-teal, #2dd4bf);
    border: 1px solid rgba(var(--wl-teal-rgb, 45, 212, 191), 0.25);
}

.tier-badge.tier-global[b-iatdr21eq3] {
    background: rgba(var(--wl-diamond-rgb), 0.15);
    color: var(--wl-diamond);
    border: 1px solid rgba(var(--wl-diamond-rgb), 0.25);
}

.badge-icon[b-iatdr21eq3] {
    width: 12px;
    height: 12px;
    display: inline-flex;
}

.badge-icon[b-iatdr21eq3]  svg {
    width: 100%;
    height: 100%;
}

/* Scope badge */
.scope-badge[b-iatdr21eq3] {
    display: inline-flex;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
    border: 1px solid var(--wl-border-subtle);
}

/* Status badge */
.status-badge[b-iatdr21eq3] {
    display: inline-flex;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.status-badge.status-upcoming[b-iatdr21eq3] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
}

.status-badge.status-nominations[b-iatdr21eq3] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
    animation: nominations-pulse-b-iatdr21eq3 2s ease infinite;
}

@keyframes nominations-pulse-b-iatdr21eq3 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.status-badge.status-ceremony[b-iatdr21eq3] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: var(--wl-red);
    animation: ceremony-glow-b-iatdr21eq3 1.5s ease infinite;
}

@keyframes ceremony-glow-b-iatdr21eq3 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--wl-red-rgb), 0); }
    50% { box-shadow: 0 0 8px rgba(var(--wl-red-rgb), 0.2); }
}

.status-badge.status-completed[b-iatdr21eq3] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
}

/* Card title */
.card-title[b-iatdr21eq3] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    letter-spacing: 0.03em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.2;
}

.card-edition[b-iatdr21eq3] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

/* Card footer */
.card-footer[b-iatdr21eq3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.card-countdown[b-iatdr21eq3] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--wl-text-secondary);
}

.countdown-icon[b-iatdr21eq3] {
    width: 14px;
    height: 14px;
    color: var(--wl-gold);
    display: inline-flex;
    flex-shrink: 0;
}

.countdown-icon[b-iatdr21eq3]  svg {
    width: 100%;
    height: 100%;
}

.countdown-text[b-iatdr21eq3] {
    font-weight: 500;
}

.card-host[b-iatdr21eq3] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    color: var(--wl-text-muted);
}

.host-icon[b-iatdr21eq3] {
    width: 13px;
    height: 13px;
    color: var(--wl-gold);
    display: inline-flex;
    flex-shrink: 0;
}

.host-icon[b-iatdr21eq3]  svg {
    width: 100%;
    height: 100%;
}

.host-name[b-iatdr21eq3] {
    font-weight: 500;
    color: var(--wl-text-secondary);
}

/* Winner highlight in past cards */
.card-winner[b-iatdr21eq3] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    margin-top: 0.25rem;
    border-radius: 6px;
    background: var(--wl-gold-bg);
    border: 1px solid var(--wl-gold-border);
}

.winner-icon[b-iatdr21eq3] {
    width: 16px;
    height: 16px;
    color: var(--wl-gold);
    display: inline-flex;
    flex-shrink: 0;
}

.winner-icon[b-iatdr21eq3]  svg {
    width: 100%;
    height: 100%;
}

.winner-name[b-iatdr21eq3] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wl-gold);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.awards-empty-state[b-iatdr21eq3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-icon[b-iatdr21eq3] {
    width: 48px;
    height: 48px;
    color: rgba(var(--wl-gold-rgb), 0.25);
    margin-bottom: 1rem;
}

.empty-icon[b-iatdr21eq3]  svg {
    width: 100%;
    height: 100%;
}

.awards-empty-state p[b-iatdr21eq3] {
    color: var(--wl-text-muted);
    font-size: 0.85rem;
    font-style: italic;
    margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .awards-page[b-iatdr21eq3] {
        padding: 1rem;
    }

    .awards-title[b-iatdr21eq3] {
        font-size: 2rem;
    }

    .awards-grid[b-iatdr21eq3] {
        grid-template-columns: 1fr;
    }

    .awards-filters[b-iatdr21eq3] {
        gap: 0.35rem;
    }

    .awards-filter-tab[b-iatdr21eq3] {
        padding: 0.4rem 0.75rem;
        font-size: 0.7rem;
    }
}
/* /Components/Pages/Awards/AwardsTab.razor.rz.scp.css */
/* ============================================
   PROFILE AWARDS TAB
   Theme: Magazine trophy case with spotlight effects
   ============================================ */

.awards-tab[b-tqkfbonb06] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Loading */
.awards-tab-loading[b-tqkfbonb06] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
}

.awards-tab-spinner[b-tqkfbonb06] {
    width: 36px;
    height: 36px;
    border: 2px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: tab-spin-b-tqkfbonb06 1s linear infinite;
}

@keyframes tab-spin-b-tqkfbonb06 {
    to { transform: rotate(360deg); }
}

/* ============================================
   STATS ROW
   ============================================ */

.awards-stats-row[b-tqkfbonb06] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.awards-stat-card[b-tqkfbonb06] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1.25rem 0.75rem;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.awards-stat-card[b-tqkfbonb06]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.3), transparent);
}

.awards-stat-icon[b-tqkfbonb06] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.awards-stat-icon[b-tqkfbonb06]  svg {
    width: 1.25rem;
    height: 1.25rem;
}

.awards-stat-icon.wins[b-tqkfbonb06] {
    color: var(--wl-gold);
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15), rgba(var(--wl-gold-rgb), 0.05));
}

.awards-stat-icon.nominations[b-tqkfbonb06] {
    color: var(--wl-purple);
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.15), rgba(var(--wl-purple-rgb), 0.05));
}

.awards-stat-icon.hosted[b-tqkfbonb06] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.awards-stat-value[b-tqkfbonb06] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    line-height: 1;
    color: rgba(var(--wl-contrast-rgb), 0.95);
}

.awards-stat-label[b-tqkfbonb06] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
    text-align: center;
}

/* ============================================
   SECTIONS
   ============================================ */

.awards-section[b-tqkfbonb06] {
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}

.awards-section[b-tqkfbonb06]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.4), transparent);
}

.awards-section-title[b-tqkfbonb06] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin-bottom: 1rem;
}

.awards-section-icon[b-tqkfbonb06] {
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.awards-section-icon[b-tqkfbonb06]  svg {
    width: 100%;
    height: 100%;
}

/* Empty States */
.awards-empty[b-tqkfbonb06] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
}

.awards-empty-icon[b-tqkfbonb06] {
    width: 3rem;
    height: 3rem;
    color: rgba(var(--wl-gold-rgb), 0.2);
}

.awards-empty-icon[b-tqkfbonb06]  svg {
    width: 100%;
    height: 100%;
}

.awards-empty-text[b-tqkfbonb06] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    text-align: center;
}

/* ============================================
   TROPHY GALLERY
   ============================================ */

.awards-trophy-grid[b-tqkfbonb06] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.awards-trophy-group-name[b-tqkfbonb06] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin-bottom: 0.5rem;
}

.awards-trophy-items[b-tqkfbonb06] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.625rem;
}

.awards-trophy-item[b-tqkfbonb06] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    overflow: hidden;
    text-align: center;
    /* Reset button styles */
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    line-height: inherit;
}

.awards-trophy-item:hover[b-tqkfbonb06] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.04);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--wl-gold-rgb), 0.1);
}

.awards-trophy-icon[b-tqkfbonb06] {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--wl-gold);
    filter: drop-shadow(0 0 12px rgba(var(--wl-gold-rgb), 0.4));
    transition: filter 0.25s ease;
}

.awards-trophy-item:hover .awards-trophy-icon[b-tqkfbonb06] {
    filter: drop-shadow(0 0 20px rgba(var(--wl-gold-rgb), 0.6));
}

.awards-trophy-icon[b-tqkfbonb06]  svg {
    width: 100%;
    height: 100%;
}

.awards-trophy-info[b-tqkfbonb06] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.awards-trophy-category[b-tqkfbonb06] {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    line-height: 1.2;
}

.awards-trophy-edition[b-tqkfbonb06] {
    font-size: 0.625rem;
    color: var(--wl-text-muted);
}

/* Spotlight effect on hover */
.awards-trophy-spotlight[b-tqkfbonb06] {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.awards-trophy-item:hover .awards-trophy-spotlight[b-tqkfbonb06] {
    opacity: 1;
}

/* ============================================
   NOMINATION HISTORY
   ============================================ */

.awards-nomination-list[b-tqkfbonb06] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.awards-nomination-row[b-tqkfbonb06] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.awards-nomination-row:hover[b-tqkfbonb06] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.awards-nomination-row.winner[b-tqkfbonb06] {
    border-color: rgba(var(--wl-gold-rgb), 0.2);
    background: rgba(var(--wl-gold-rgb), 0.03);
}

.awards-nomination-rank[b-tqkfbonb06] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.awards-nomination-rank-num[b-tqkfbonb06] {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--wl-text-muted);
    font-variant-numeric: tabular-nums;
}

.awards-nomination-rank-icon[b-tqkfbonb06] {
    width: 1.5rem;
    height: 1.5rem;
}

.awards-nomination-rank-icon.winner[b-tqkfbonb06] {
    color: var(--wl-gold);
    filter: drop-shadow(0 0 8px rgba(var(--wl-gold-rgb), 0.4));
}

.awards-nomination-rank-icon[b-tqkfbonb06]  svg {
    width: 100%;
    height: 100%;
}

.awards-nomination-info[b-tqkfbonb06] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.awards-nomination-category[b-tqkfbonb06] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.awards-nomination-show[b-tqkfbonb06] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
}

.awards-nomination-edition[b-tqkfbonb06] {
    color: rgba(var(--wl-contrast-rgb), 0.3);
    margin-left: 0.25rem;
}

.awards-nomination-winner-badge[b-tqkfbonb06] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
    flex-shrink: 0;
}

/* ============================================
   APPEARANCES
   ============================================ */

.awards-appearance-list[b-tqkfbonb06] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.awards-appearance-row[b-tqkfbonb06] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 8px;
    transition: background 0.2s ease;
}

.awards-appearance-row:hover[b-tqkfbonb06] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.awards-appearance-role-icon[b-tqkfbonb06] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: rgba(var(--wl-contrast-rgb), 0.6);
    flex-shrink: 0;
}

.awards-appearance-role-icon[b-tqkfbonb06]  svg {
    width: 1.125rem;
    height: 1.125rem;
}

.awards-appearance-info[b-tqkfbonb06] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.awards-appearance-role[b-tqkfbonb06] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.awards-appearance-show[b-tqkfbonb06] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
}

.awards-appearance-edition[b-tqkfbonb06] {
    color: rgba(var(--wl-contrast-rgb), 0.3);
    margin-left: 0.25rem;
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animate-tab-fade-in[b-tqkfbonb06] {
    animation: tabFadeIn-b-tqkfbonb06 0.4s ease-out forwards;
    opacity: 0;
}

@keyframes tabFadeIn-b-tqkfbonb06 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.delay-tab-100[b-tqkfbonb06] { animation-delay: 0.1s; }
.delay-tab-200[b-tqkfbonb06] { animation-delay: 0.2s; }
.delay-tab-300[b-tqkfbonb06] { animation-delay: 0.3s; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
    .awards-stats-row[b-tqkfbonb06] {
        grid-template-columns: 1fr;
    }

    .awards-stat-card[b-tqkfbonb06] {
        flex-direction: row;
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }

    .awards-stat-value[b-tqkfbonb06] {
        font-size: 1.5rem;
    }

    .awards-trophy-items[b-tqkfbonb06] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Awards/CeremonyReport.razor.rz.scp.css */
/* ═══════════════════════════════════════════════
   CEREMONY REPORT - Cinematic Awards Broadcast
   Aesthetic: Oscars/Grammys editorial meets luxury
   ═══════════════════════════════════════════════ */

/* ─── Entrance Animation ─── */
.anim-rise[b-lax0lq4qir] {
    animation: riseIn-b-lax0lq4qir 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes riseIn-b-lax0lq4qir {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── Loading ─── */
.ceremony-loading[b-lax0lq4qir] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

.loading-ring[b-lax0lq4qir] {
    width: 44px;
    height: 44px;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.15);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-lax0lq4qir 0.9s linear infinite;
}

@keyframes spin-b-lax0lq4qir { to { transform: rotate(360deg); } }

/* ─── Not Found ─── */
.ceremony-void[b-lax0lq4qir] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    text-align: center;
}

.void-icon[b-lax0lq4qir] {
    width: 56px;
    height: 56px;
    color: rgba(var(--wl-gold-rgb), 0.2);
    margin-bottom: 1rem;
}

.void-icon[b-lax0lq4qir]  svg { width: 100%; height: 100%; }

.ceremony-void h2[b-lax0lq4qir] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    color: var(--wl-text-primary);
    margin: 0 0 0.4rem;
}

.ceremony-void p[b-lax0lq4qir] {
    color: var(--wl-text-muted);
    margin: 0 0 1.5rem;
    font-size: 0.85rem;
}

.btn-back[b-lax0lq4qir] {
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--wl-gold-border);
    background: var(--wl-gold-bg);
    color: var(--wl-gold);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-back:hover[b-lax0lq4qir] {
    background: var(--wl-gold-bg-hover);
    border-color: var(--wl-gold);
}

/* ═══════════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════════ */

.ceremony-page[b-lax0lq4qir] {
    display: flex;
    flex-direction: column;
    max-width: 820px;
    margin: 0 auto;
    gap: 2.5rem;
    padding-bottom: 4rem;
}

/* ═══════════════════════════════════════
   HERO BANNER
   ═══════════════════════════════════════ */

.hero[b-lax0lq4qir] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 320px;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--wl-bg-secondary);
    background-size: cover;
    background-position: center 30%;
    margin: -0.5rem -0.5rem 0;
    animation: heroFadeIn-b-lax0lq4qir 1s ease both;
}

.hero--with-image[b-lax0lq4qir] {
    min-height: 380px;
}

.hero[b-lax0lq4qir]  .hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

@keyframes heroFadeIn-b-lax0lq4qir {
    from { opacity: 0; transform: scale(1.02); }
    to { opacity: 1; transform: scale(1); }
}

/* Dark vignette over the hero image */
.hero-vignette[b-lax0lq4qir] {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(0, 0, 0, 0.85) 0%,
            rgba(0, 0, 0, 0.4) 40%,
            rgba(0, 0, 0, 0.15) 70%,
            rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
}

/* Film grain texture overlay */
.hero-grain[b-lax0lq4qir] {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0.035;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 128px;
}

/* Back nav inside hero */
.hero-nav[b-lax0lq4qir] {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
}

.nav-back[b-lax0lq4qir] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.65rem;
    border-radius: 8px;
    border: none;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-back:hover[b-lax0lq4qir] {
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
}

.nav-back svg[b-lax0lq4qir] {
    width: 14px;
    height: 14px;
}

/* Hero content (overlaid on image) */
.hero-content[b-lax0lq4qir] {
    position: relative;
    z-index: 5;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
}

/* Tier badge */
.hero-tier[b-lax0lq4qir] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.65rem;
    border-radius: 5px;
    font-size: 0.6rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 0.5rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero-tier.tier-newcomer[b-lax0lq4qir] {
    background: rgba(var(--wl-green-rgb), 0.2);
    color: var(--wl-green);
    border: 1px solid rgba(var(--wl-green-rgb), 0.35);
}

.hero-tier.tier-local[b-lax0lq4qir] {
    background: rgba(var(--wl-blue-rgb), 0.2);
    color: var(--wl-blue);
    border: 1px solid rgba(var(--wl-blue-rgb), 0.35);
}

.hero-tier.tier-regional[b-lax0lq4qir] {
    background: rgba(var(--wl-teal-rgb, 45, 212, 191), 0.2);
    color: var(--wl-teal, #2dd4bf);
    border: 1px solid rgba(var(--wl-teal-rgb, 45, 212, 191), 0.35);
}

.hero-tier.tier-global[b-lax0lq4qir] {
    background: rgba(var(--wl-diamond-rgb), 0.2);
    color: var(--wl-diamond);
    border: 1px solid rgba(var(--wl-diamond-rgb), 0.35);
}

.tier-pip[b-lax0lq4qir] {
    width: 12px;
    height: 12px;
    display: inline-flex;
}

.tier-pip[b-lax0lq4qir]  svg { width: 100%; height: 100%; }

/* Hero title - dramatic golden display text */
.hero-title[b-lax0lq4qir] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    letter-spacing: 0.06em;
    line-height: 1;
    margin: 0;
    background: linear-gradient(
        135deg,
        #f5deb3 0%,
        var(--wl-gold) 30%,
        #ffd700 50%,
        var(--wl-gold) 70%,
        #f5deb3 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer-b-lax0lq4qir 4s linear infinite;
    filter: drop-shadow(0 2px 8px rgba(var(--wl-gold-rgb), 0.3));
}

@keyframes shimmer-b-lax0lq4qir {
    to { background-position: 200% center; }
}

.hero-sub[b-lax0lq4qir] {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 0.5rem;
}

/* Meta chips */
.hero-meta[b-lax0lq4qir] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.meta-chip[b-lax0lq4qir] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.meta-chip svg[b-lax0lq4qir] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--wl-gold);
}

.chip-icon[b-lax0lq4qir] {
    width: 13px;
    height: 13px;
    display: inline-flex;
    flex-shrink: 0;
    color: var(--wl-gold);
}

.chip-icon[b-lax0lq4qir]  svg { width: 100%; height: 100%; }

/* ═══════════════════════════════════════
   FILMSTRIP (additional images)
   ═══════════════════════════════════════ */

.filmstrip[b-lax0lq4qir] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
    padding: 0 0.5rem;
}

.filmstrip-frame[b-lax0lq4qir] {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--wl-border-subtle);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.filmstrip-frame:hover[b-lax0lq4qir] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.filmstrip-frame[b-lax0lq4qir]  img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ═══════════════════════════════════════
   ACT DIVIDERS - Ornamental gold lines
   ═══════════════════════════════════════ */

.act[b-lax0lq4qir] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0 0.5rem;
}

.act-divider[b-lax0lq4qir] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dv-line[b-lax0lq4qir] {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.35) 50%,
        transparent 100%
    );
}

.dv-label[b-lax0lq4qir] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.18em;
    color: var(--wl-gold);
    white-space: nowrap;
    text-transform: uppercase;
}

.divider-gold .dv-line[b-lax0lq4qir] {
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--wl-gold) 50%,
        transparent 100%
    );
    height: 2px;
}

.divider-gold .dv-label[b-lax0lq4qir] {
    text-shadow: 0 0 16px rgba(var(--wl-gold-rgb), 0.5);
}

/* ═══════════════════════════════════════
   OPENING MONOLOGUE - Grand pullquote
   ═══════════════════════════════════════ */

.grand-quote[b-lax0lq4qir] {
    position: relative;
    padding: 1.75rem 1.5rem 1.5rem 2.5rem;
    margin: 0;
    border: none;
    border-radius: 14px;
    background: var(--wl-bg-secondary);
    border-left: 3px solid var(--wl-gold);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 0 40px rgba(var(--wl-gold-rgb), 0.02);
}

.gq-open[b-lax0lq4qir] {
    position: absolute;
    top: -0.1rem;
    left: 0.6rem;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 4rem;
    line-height: 1;
    color: rgba(var(--wl-gold-rgb), 0.2);
    pointer-events: none;
}

.grand-quote p[b-lax0lq4qir] {
    font-size: 0.92rem;
    font-style: italic;
    color: var(--wl-text-secondary);
    line-height: 1.7;
    margin: 0;
}

.grand-quote cite[b-lax0lq4qir] {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 600;
    color: var(--wl-gold);
    letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════
   WINNER SPOTLIGHTS - Dramatic cards
   ═══════════════════════════════════════ */

.spotlights[b-lax0lq4qir] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.spotlight[b-lax0lq4qir] {
    position: relative;
    border-radius: 14px;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-subtle);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Subtle spotlight radial on hover */
.spotlight:hover[b-lax0lq4qir] {
    border-color: rgba(var(--wl-gold-rgb), 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Top-left corner glow */
.spotlight[b-lax0lq4qir]::before {
    content: '';
    position: absolute;
    top: -40px;
    left: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 70%);
    pointer-events: none;
}

/* Category header */
.sp-head[b-lax0lq4qir] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.sp-trophy[b-lax0lq4qir] {
    width: 26px;
    height: 26px;
    color: var(--wl-gold);
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 0.1rem;
    filter: drop-shadow(0 0 6px rgba(var(--wl-gold-rgb), 0.4));
}

.sp-trophy[b-lax0lq4qir]  svg { width: 100%; height: 100%; }

.sp-cat h3[b-lax0lq4qir] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.04em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.15;
}

.sp-cat p[b-lax0lq4qir] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
    font-style: italic;
    margin: 0.1rem 0 0;
}

/* Presenter introduction */
.sp-intro[b-lax0lq4qir] {
    padding: 0;
}

.intro-quote[b-lax0lq4qir] {
    position: relative;
    padding: 0.65rem 0.75rem 0.65rem 1.5rem;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border-left: 2px solid rgba(var(--wl-purple-rgb), 0.35);
}

.iq-mark[b-lax0lq4qir] {
    position: absolute;
    top: -0.05rem;
    left: 0.25rem;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1.8rem;
    line-height: 1;
    color: rgba(var(--wl-purple-rgb), 0.15);
    pointer-events: none;
}

.intro-quote[b-lax0lq4qir] {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--wl-text-secondary);
    line-height: 1.55;
}

.intro-quote cite[b-lax0lq4qir] {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.65rem;
    font-style: normal;
    font-weight: 600;
    color: var(--wl-purple);
    letter-spacing: 0.03em;
}

/* Winner announcement flash */
.sp-announce[b-lax0lq4qir] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: linear-gradient(
        135deg,
        rgba(var(--wl-gold-rgb), 0.06) 0%,
        rgba(var(--wl-gold-rgb), 0.02) 100%
    );
    border: 1px dashed rgba(var(--wl-gold-rgb), 0.18);
}

.announce-flash[b-lax0lq4qir] {
    width: 16px;
    height: 16px;
    color: var(--wl-gold);
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 0.1rem;
    animation: crownPulse-b-lax0lq4qir 3s ease-in-out infinite;
}

.announce-flash[b-lax0lq4qir]  svg { width: 100%; height: 100%; }

.sp-announce p[b-lax0lq4qir] {
    font-size: 0.8rem;
    color: var(--wl-gold);
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
}

/* Winner reveal row */
.sp-winner[b-lax0lq4qir] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border-radius: 10px;
    background: linear-gradient(
        135deg,
        rgba(var(--wl-gold-rgb), 0.1) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 100%
    );
    border: 1px solid rgba(var(--wl-gold-rgb), 0.18);
}

.sw-crown[b-lax0lq4qir] {
    width: 32px;
    height: 32px;
    color: var(--wl-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(var(--wl-gold-rgb), 0.5));
    animation: crownPulse-b-lax0lq4qir 3s ease-in-out infinite;
}

@keyframes crownPulse-b-lax0lq4qir {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(var(--wl-gold-rgb), 0.4)); }
    50% { filter: drop-shadow(0 0 12px rgba(var(--wl-gold-rgb), 0.7)); }
}

.sw-crown[b-lax0lq4qir]  svg { width: 100%; height: 100%; }

.sw-info[b-lax0lq4qir] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.sw-name[b-lax0lq4qir] {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--wl-gold);
    line-height: 1.15;
}

.sw-work[b-lax0lq4qir] {
    font-size: 0.72rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

.sw-pct[b-lax0lq4qir] {
    display: flex;
    align-items: baseline;
    flex-shrink: 0;
}

.pct-num[b-lax0lq4qir] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    color: var(--wl-gold);
    line-height: 1;
    letter-spacing: 0.02em;
}

.pct-sign[b-lax0lq4qir] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    color: rgba(var(--wl-gold-rgb), 0.6);
}

/* Animated score bar */
.score-track[b-lax0lq4qir] {
    height: 4px;
    border-radius: 2px;
    background: rgba(var(--wl-gold-rgb), 0.1);
    overflow: hidden;
}

.score-fill[b-lax0lq4qir] {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--wl-gold), rgba(var(--wl-gold-rgb), 0.6));
    width: var(--pct);
    animation: barGrow-b-lax0lq4qir 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: inherit;
}

@keyframes barGrow-b-lax0lq4qir {
    from { width: 0; }
}

/* Acceptance speech */
.sp-speech[b-lax0lq4qir] {
    position: relative;
    padding: 0.75rem 0.75rem 0.75rem 1.75rem;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border-left: 2px solid rgba(var(--wl-gold-rgb), 0.25);
    font-size: 0.8rem;
    font-style: italic;
    color: var(--wl-text-secondary);
    line-height: 1.6;
}

.ss-mark[b-lax0lq4qir] {
    position: absolute;
    top: 0.1rem;
    left: 0.35rem;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 2.2rem;
    line-height: 1;
    color: rgba(var(--wl-gold-rgb), 0.15);
    pointer-events: none;
}

/* Runners up */
.sp-runners[b-lax0lq4qir] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.sr-label[b-lax0lq4qir] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
    margin-bottom: 0.15rem;
}

.sr-row[b-lax0lq4qir] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
}

.sr-pos[b-lax0lq4qir] {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--wl-text-muted);
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}

.sr-name[b-lax0lq4qir] {
    flex: 1;
    font-size: 0.78rem;
    color: var(--wl-text-secondary);
}

.sr-pct[b-lax0lq4qir] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════
   DRAMATIC EVENTS - Breaking-news panels
   ═══════════════════════════════════════ */

.drama-feed[b-lax0lq4qir] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.drama-card[b-lax0lq4qir] {
    display: flex;
    border-radius: 12px;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-subtle);
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.drama-card:hover[b-lax0lq4qir] {
    border-color: rgba(var(--wl-purple-rgb), 0.2);
    transform: translateX(2px);
}

/* Left accent strip */
.dc-accent[b-lax0lq4qir] {
    width: 4px;
    flex-shrink: 0;
}

.drama-positive .dc-accent[b-lax0lq4qir] {
    background: linear-gradient(to bottom, var(--wl-green), rgba(var(--wl-green-rgb), 0.3));
}

.drama-negative .dc-accent[b-lax0lq4qir] {
    background: linear-gradient(to bottom, var(--wl-red), rgba(var(--wl-red-rgb), 0.3));
}

.dc-body[b-lax0lq4qir] {
    flex: 1;
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.dc-title[b-lax0lq4qir] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.03em;
    color: var(--wl-text-primary);
    margin: 0;
}

.dc-spark[b-lax0lq4qir] {
    width: 16px;
    height: 16px;
    display: inline-flex;
    flex-shrink: 0;
    color: var(--wl-purple);
}

.dc-spark[b-lax0lq4qir]  svg { width: 100%; height: 100%; }

.dc-narration[b-lax0lq4qir] {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--wl-text-secondary);
    line-height: 1.55;
    margin: 0;
}

.dc-pills[b-lax0lq4qir] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.pill[b-lax0lq4qir] {
    display: inline-flex;
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.pill-up[b-lax0lq4qir] {
    background: rgba(var(--wl-green-rgb), 0.12);
    color: var(--wl-green);
}

.pill-down[b-lax0lq4qir] {
    background: rgba(var(--wl-red-rgb), 0.12);
    color: var(--wl-red);
}

/* ═══════════════════════════════════════
   YOUR NIGHT - VIP Card
   ═══════════════════════════════════════ */

.vip-card[b-lax0lq4qir] {
    position: relative;
    border-radius: 14px;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-gold-border);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    overflow: hidden;
}

/* Corner glow */
.vip-glow[b-lax0lq4qir] {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Role display */
.vip-role[b-lax0lq4qir] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.vr-icon[b-lax0lq4qir] {
    width: 32px;
    height: 32px;
    color: var(--wl-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(var(--wl-gold-rgb), 0.4));
}

.vr-icon[b-lax0lq4qir]  svg { width: 100%; height: 100%; }

.vr-text[b-lax0lq4qir] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.vr-label[b-lax0lq4qir] {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
}

.vr-name[b-lax0lq4qir] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.35rem;
    letter-spacing: 0.04em;
    color: var(--wl-gold);
}

/* VIP sections */
.vip-section[b-lax0lq4qir] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.vs-label[b-lax0lq4qir] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
}

/* Trophy rows */
.vip-trophy-row[b-lax0lq4qir] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: var(--wl-gold-bg);
    border: 1px solid var(--wl-gold-border);
}

.vtr-icon[b-lax0lq4qir] {
    width: 22px;
    height: 22px;
    color: var(--wl-gold);
    display: inline-flex;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px rgba(var(--wl-gold-rgb), 0.4));
}

.vtr-icon[b-lax0lq4qir]  svg { width: 100%; height: 100%; }

.vtr-cat[b-lax0lq4qir] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

/* Nomination rows */
.vip-nom-row[b-lax0lq4qir] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0;
}

.vnr-icon[b-lax0lq4qir] {
    width: 14px;
    height: 14px;
    color: var(--wl-text-muted);
    display: inline-flex;
    flex-shrink: 0;
}

.vnr-icon[b-lax0lq4qir]  svg { width: 100%; height: 100%; }

.vnr-cat[b-lax0lq4qir] {
    flex: 1;
    font-size: 0.78rem;
    color: var(--wl-text-secondary);
}

.vnr-rank[b-lax0lq4qir] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--wl-text-muted);
}

/* Stat grid */
.vip-stat-grid[b-lax0lq4qir] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.5rem;
}

.vstat[b-lax0lq4qir] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.6rem;
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.02);
}

.vstat-up[b-lax0lq4qir] { border-left: 2px solid var(--wl-green); }
.vstat-down[b-lax0lq4qir] { border-left: 2px solid var(--wl-red); }

.vstat-lbl[b-lax0lq4qir] {
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wl-text-muted);
}

.vstat-val[b-lax0lq4qir] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
}

.vstat-up .vstat-val[b-lax0lq4qir] { color: var(--wl-green); }
.vstat-down .vstat-val[b-lax0lq4qir] { color: var(--wl-red); }

/* ═══════════════════════════════════════
   CURTAIN CALL - Closing summary
   ═══════════════════════════════════════ */

.act-closing[b-lax0lq4qir] {
    padding-bottom: 2rem;
}

.closing-card[b-lax0lq4qir] {
    padding: 1.5rem;
    border-radius: 14px;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-subtle);
    text-align: center;
}

.closing-card p[b-lax0lq4qir] {
    font-size: 0.88rem;
    color: var(--wl-text-secondary);
    line-height: 1.65;
    font-style: italic;
    margin: 0;
}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */

@media (max-width: 640px) {
    .ceremony-page[b-lax0lq4qir] {
        gap: 2rem;
    }

    .hero[b-lax0lq4qir] {
        min-height: 280px;
        border-radius: 12px;
        margin: -0.25rem -0.25rem 0;
    }

    .hero--with-image[b-lax0lq4qir] {
        min-height: 300px;
    }

    .hero-title[b-lax0lq4qir] {
        font-size: 2.2rem;
    }

    .hero-content[b-lax0lq4qir] {
        padding: 1rem;
    }

    .hero-meta[b-lax0lq4qir] {
        gap: 0.4rem;
    }

    .filmstrip[b-lax0lq4qir] {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .act[b-lax0lq4qir] {
        padding: 0;
    }

    .spotlight[b-lax0lq4qir] {
        padding: 1rem;
    }

    .sp-winner[b-lax0lq4qir] {
        padding: 0.65rem;
    }

    .pct-num[b-lax0lq4qir] {
        font-size: 1.3rem;
    }

    .vip-card[b-lax0lq4qir] {
        padding: 1rem;
    }

    .vip-stat-grid[b-lax0lq4qir] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Band/Index.razor.rz.scp.css */
/* ============================================
   BAND INDEX PAGE - Team Management UI
   Theme: Luxury VIP / Music Industry
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.band-page[b-tco41dh8b7] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-atmosphere[b-tco41dh8b7] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(34, 211, 238, 0.03) 0%, transparent 50%);
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-tco41dh8b7] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 2rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--wl-gold-bg-hover);
}

.page-header[b-tco41dh8b7]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-tco41dh8b7] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-tco41dh8b7] {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid var(--wl-gold-border);
    border-radius: 0.625rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-tco41dh8b7] {
    width: 1.25rem;
    height: 1.25rem;
}

.band-eyebrow[b-tco41dh8b7] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-gold);
    margin-bottom: 0.375rem;
}

.band-title-group h1[b-tco41dh8b7] {
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.band-subtitle[b-tco41dh8b7] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0.375rem 0 0 0;
}

.member-count[b-tco41dh8b7] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.15) 0%, rgba(var(--wl-purple-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.25);
    border-radius: 2rem;
    margin-left: 1rem;
}

.count-value[b-tco41dh8b7] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-purple);
    line-height: 1;
}

.count-label[b-tco41dh8b7] {
    font-size: 0.75rem;
    color: rgba(var(--wl-purple-rgb), 0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.page-header-actions[b-tco41dh8b7] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.recruit-button[b-tco41dh8b7],
.player-band-link[b-tco41dh8b7] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.25);
}

.player-band-link[b-tco41dh8b7] {
    border: 1px solid var(--wl-gold-border);
    background: var(--wl-gold-bg);
    color: var(--wl-text-primary);
    box-shadow: none;
}

.player-band-link:hover[b-tco41dh8b7] {
    transform: translateY(-2px);
    border-color: rgba(var(--wl-gold-rgb), 0.42);
    background: var(--wl-gold-bg-hover);
}

.recruit-button:hover[b-tco41dh8b7] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--wl-gold-rgb), 0.35);
}

.recruit-button svg[b-tco41dh8b7],
.player-band-link svg[b-tco41dh8b7] {
    width: 1.125rem;
    height: 1.125rem;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-tco41dh8b7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    color: var(--wl-text-muted);
    gap: 1.5rem;
}

.loading-spinner[b-tco41dh8b7] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-gold-bg);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-tco41dh8b7 1s linear infinite;
}

@keyframes spin-b-tco41dh8b7 {
    to { transform: rotate(360deg); }
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-tco41dh8b7] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5rem 2rem;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.8) 0%, rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1.5rem;
    max-width: 500px;
    margin: 2rem auto;
}

.empty-icon-wrapper[b-tco41dh8b7] {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-bg) 0%, rgba(var(--wl-gold-rgb), 0.02) 100%);
    border: 1px solid var(--wl-gold-bg-hover);
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.empty-icon[b-tco41dh8b7] {
    width: 2.5rem;
    height: 2.5rem;
    color: rgba(var(--wl-gold-rgb), 0.6);
}

.empty-title[b-tco41dh8b7] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.75rem 0;
}

.empty-text[b-tco41dh8b7] {
    font-size: 0.9375rem;
    color: var(--wl-text-muted);
    margin: 0 0 2rem 0;
    max-width: 320px;
    line-height: 1.6;
}

.cta-button[b-tco41dh8b7] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.25);
}

.cta-button:hover[b-tco41dh8b7] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--wl-gold-rgb), 0.35);
}

.cta-button svg[b-tco41dh8b7] {
    width: 1.125rem;
    height: 1.125rem;
}

/* ============================================
   MEMBERS GRID
   ============================================ */

.members-grid[b-tco41dh8b7] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .members-grid[b-tco41dh8b7] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MEMBER CARD
   ============================================ */

.member-card[b-tco41dh8b7] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    animation: card-enter-b-tco41dh8b7 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes card-enter-b-tco41dh8b7 {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.member-card[b-tco41dh8b7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 20%,
        rgba(var(--wl-gold-rgb), 0.8) 50%,
        rgba(var(--wl-gold-rgb), 0.4) 80%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.member-card:hover[b-tco41dh8b7] {
    transform: translateY(-8px);
    border-color: var(--wl-gold-border);
    box-shadow:
        0 20px 60px var(--wl-shadow-color),
        0 0 40px rgba(var(--wl-gold-rgb), 0.08);
}

.member-card:hover[b-tco41dh8b7]::before {
    opacity: 1;
}

/* ============================================
   CARD HEADER - Rating & Type
   ============================================ */

.card-header[b-tco41dh8b7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.625rem 0.875rem;
    background: linear-gradient(180deg, rgba(var(--wl-contrast-rgb), 0.03) 0%, transparent 100%);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.rating-badge[b-tco41dh8b7] {
    display: flex;
    align-items: center;
    gap: 0.0625rem;
}

.rating-badge .star[b-tco41dh8b7] {
    width: 0.75rem;
    height: 0.75rem;
    fill: rgba(var(--wl-contrast-rgb), 0.12);
    stroke: none;
    transition: fill 0.3s ease;
}

.rating-badge .star.filled[b-tco41dh8b7] {
    fill: var(--wl-gold);
    filter: drop-shadow(0 0 3px rgba(var(--wl-gold-rgb), 0.4));
}

.type-badge[b-tco41dh8b7] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border-radius: 2rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.type-badge svg[b-tco41dh8b7] {
    width: 0.75rem;
    height: 0.75rem;
}

.type-badge.vocalist[b-tco41dh8b7] {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.type-badge.instrumentalist[b-tco41dh8b7] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.15) 0%, rgba(var(--wl-purple-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.25);
    color: var(--wl-purple);
}

/* ============================================
   IDENTITY SECTION
   ============================================ */

.identity-section[b-tco41dh8b7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1rem 0.75rem;
    text-align: center;
}

.member-surname[b-tco41dh8b7] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    color: var(--wl-gold);
    margin: 0;
    line-height: 1;
    text-shadow: 0 0 16px rgba(var(--wl-gold-rgb), 0.3);
}

.member-firstname[b-tco41dh8b7] {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

/* ============================================
   STATS SECTION
   ============================================ */

.stats-section[b-tco41dh8b7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--wl-surface-primary);
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.stat-item[b-tco41dh8b7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-header[b-tco41dh8b7] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--wl-text-muted);
}

.stat-header svg[b-tco41dh8b7] {
    width: 0.8125rem;
    height: 0.8125rem;
    opacity: 0.6;
}

.stat-label[b-tco41dh8b7] {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.level-display[b-tco41dh8b7] {
    display: flex;
    align-items: baseline;
}

.level-value[b-tco41dh8b7] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: #4ade80;
    line-height: 1;
    letter-spacing: 0.02em;
}

.salary-display[b-tco41dh8b7] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.salary-amount[b-tco41dh8b7] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-gold);
    line-height: 1;
    letter-spacing: 0.02em;
}

.salary-currency[b-tco41dh8b7] {
    font-size: 0.625rem;
    color: rgba(var(--wl-gold-rgb), 0.7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.salary-period[b-tco41dh8b7] {
    font-size: 0.5625rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    letter-spacing: 0.04em;
}

.popularity-strip[b-tco41dh8b7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.08), rgba(var(--wl-purple-rgb), 0.08));
    border-top: 1px solid rgba(var(--wl-gold-rgb), 0.12);
}

.popularity-strip div[b-tco41dh8b7] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.popularity-strip span[b-tco41dh8b7] {
    font-size: 0.5625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
}

.popularity-strip strong[b-tco41dh8b7] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--wl-text-primary);
    letter-spacing: 0.03em;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.action-buttons[b-tco41dh8b7] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.btn-manage[b-tco41dh8b7],
.btn-takeover[b-tco41dh8b7],
.btn-terminate[b-tco41dh8b7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-manage svg[b-tco41dh8b7],
.btn-takeover svg[b-tco41dh8b7],
.btn-terminate svg[b-tco41dh8b7] {
    width: 0.875rem;
    height: 0.875rem;
}

.btn-manage[b-tco41dh8b7] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.2) 0%, rgba(var(--wl-purple-rgb), 0.1) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.3);
    color: var(--wl-purple);
}

.btn-manage:hover[b-tco41dh8b7] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.3) 0%, rgba(var(--wl-purple-rgb), 0.15) 100%);
    border-color: rgba(var(--wl-purple-rgb), 0.5);
    transform: translateY(-2px);
}

.btn-takeover[b-tco41dh8b7] {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.18) 0%, rgba(34, 211, 238, 0.07) 100%);
    border: 1px solid rgba(34, 211, 238, 0.28);
    color: #67e8f9;
}

.btn-takeover:hover[b-tco41dh8b7] {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.26) 0%, rgba(34, 211, 238, 0.12) 100%);
    border-color: rgba(34, 211, 238, 0.45);
    transform: translateY(-2px);
}

.btn-terminate[b-tco41dh8b7] {
    background: linear-gradient(135deg, rgba(var(--wl-red-rgb), 0.15) 0%, rgba(var(--wl-red-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-red-rgb), 0.25);
    color: #f87171;
}

.btn-terminate:hover[b-tco41dh8b7] {
    background: linear-gradient(135deg, rgba(var(--wl-red-rgb), 0.25) 0%, rgba(var(--wl-red-rgb), 0.1) 100%);
    border-color: rgba(var(--wl-red-rgb), 0.4);
    transform: translateY(-2px);
}

/* ============================================
   TERMINATION MODAL
   ============================================ */

.termination-modal[b-tco41dh8b7] {
    padding: 0.5rem;
}

.termination-confirm[b-tco41dh8b7] {
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

.settlement-details[b-tco41dh8b7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

.settlement-row[b-tco41dh8b7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settlement-row.highlight[b-tco41dh8b7] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-medium);
}

.settlement-label[b-tco41dh8b7] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.settlement-value[b-tco41dh8b7] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.02em;
}

.settlement-row.highlight .settlement-value[b-tco41dh8b7] {
    color: var(--wl-gold);
}

.modal-actions[b-tco41dh8b7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.btn-cancel[b-tco41dh8b7],
.btn-confirm-terminate[b-tco41dh8b7] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel[b-tco41dh8b7] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.btn-cancel:hover:not(:disabled)[b-tco41dh8b7] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
}

.btn-confirm-terminate[b-tco41dh8b7] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border: none;
    color: var(--wl-text-primary);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.btn-confirm-terminate:hover:not(:disabled)[b-tco41dh8b7] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

.btn-cancel:disabled[b-tco41dh8b7],
.btn-confirm-terminate:disabled[b-tco41dh8b7] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 640px) {
    .band-page[b-tco41dh8b7] {
        padding: 0 1rem 3rem;
    }

    .page-header[b-tco41dh8b7] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .header-content[b-tco41dh8b7] {
        gap: 1rem;
    }

    .header-icon[b-tco41dh8b7] {
        width: 3rem;
        height: 3rem;
    }

    .header-icon svg[b-tco41dh8b7] {
        width: 1.5rem;
        height: 1.5rem;
    }

    .band-title-group h1[b-tco41dh8b7] {
        font-size: 2rem;
    }

    .member-count[b-tco41dh8b7] {
        margin-left: 0;
        margin-top: 0.5rem;
        align-self: flex-start;
    }

    .recruit-button[b-tco41dh8b7] {
        justify-content: center;
    }

    .page-header-actions[b-tco41dh8b7],
    .player-band-link[b-tco41dh8b7],
    .recruit-button[b-tco41dh8b7] {
        width: 100%;
    }

    .player-band-link[b-tco41dh8b7] {
        justify-content: center;
    }

    .stats-section[b-tco41dh8b7] {
        grid-template-columns: 1fr;
    }

    .popularity-strip[b-tco41dh8b7] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-tco41dh8b7] {
        grid-template-columns: 1fr;
    }

    .modal-actions[b-tco41dh8b7] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ANIMATION UTILITIES
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .member-card[b-tco41dh8b7] {
        animation: none;
        transition: none;
    }

    .loading-spinner[b-tco41dh8b7] {
        animation: none;
    }
}
/* /Components/Pages/Band/MemberDetails.razor.rz.scp.css */
/* ============================================
   MEMBER DETAILS PAGE
   Theme: Luxury VIP / Music Industry
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.member-details-page[b-uzhxri0hki] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-atmosphere[b-uzhxri0hki] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(34, 211, 238, 0.03) 0%, transparent 50%);
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-uzhxri0hki] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    color: var(--wl-text-muted);
    gap: 1.5rem;
}

.loading-spinner[b-uzhxri0hki] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-gold-bg);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-uzhxri0hki 1s linear infinite;
}

@keyframes spin-b-uzhxri0hki {
    to { transform: rotate(360deg); }
}

/* ============================================
   ERROR STATE
   ============================================ */

.error-state[b-uzhxri0hki] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5rem 2rem;
    max-width: 500px;
    margin: 2rem auto;
}

.error-icon[b-uzhxri0hki] {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--wl-red-rgb), 0.6);
    margin-bottom: 1.5rem;
}

.error-icon svg[b-uzhxri0hki] {
    width: 100%;
    height: 100%;
}

.error-state h2[b-uzhxri0hki] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.75rem 0;
}

.error-state p[b-uzhxri0hki] {
    font-size: 0.9375rem;
    color: var(--wl-text-muted);
    margin: 0 0 2rem 0;
    max-width: 320px;
    line-height: 1.6;
}

.back-link[b-uzhxri0hki] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.back-link:hover[b-uzhxri0hki] {
    background: var(--wl-gold-bg);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

/* ============================================
   PAGE NAVIGATION
   ============================================ */

.page-nav[b-uzhxri0hki] {
    position: relative;
    z-index: 1;
    padding: 1.5rem 0;
}

.nav-back[b-uzhxri0hki] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-back:hover[b-uzhxri0hki] {
    color: var(--wl-gold);
}

.nav-back svg[b-uzhxri0hki] {
    width: 1.125rem;
    height: 1.125rem;
}

/* ============================================
   MEMBER HEADER
   ============================================ */

.member-header[b-uzhxri0hki] {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
}

.member-header[b-uzhxri0hki]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 20%,
        rgba(var(--wl-gold-rgb), 0.8) 50%,
        rgba(var(--wl-gold-rgb), 0.4) 80%,
        transparent 100%);
}

.header-content[b-uzhxri0hki] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.member-identity[b-uzhxri0hki] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.member-name[b-uzhxri0hki] {
    font-family: 'Bebas Neue', sans-serif;
    margin: 0;
    line-height: 1;
}

.member-firstname[b-uzhxri0hki] {
    display: block;
    font-size: 1.25rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-weight: 400;
    letter-spacing: 0.05em;
}

.member-surname[b-uzhxri0hki] {
    display: block;
    font-size: 2.5rem;
    color: var(--wl-gold);
    letter-spacing: 0.08em;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.3);
}

.header-badges[b-uzhxri0hki] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.member-role[b-uzhxri0hki] {
    display: flex;
    align-items: center;
}

.role-badge[b-uzhxri0hki] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.role-badge svg[b-uzhxri0hki] {
    width: 0.8125rem;
    height: 0.8125rem;
}

.role-badge.vocalist[b-uzhxri0hki] {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.role-badge.instrumentalist[b-uzhxri0hki] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.15) 0%, rgba(var(--wl-purple-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.25);
    color: var(--wl-purple);
}

.rating-display[b-uzhxri0hki] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.rating-display .star[b-uzhxri0hki] {
    width: 0.875rem;
    height: 0.875rem;
    fill: rgba(var(--wl-contrast-rgb), 0.12);
    stroke: none;
    transition: fill 0.3s ease;
}

.rating-display .star.filled[b-uzhxri0hki] {
    fill: var(--wl-gold);
    filter: drop-shadow(0 0 3px rgba(var(--wl-gold-rgb), 0.4));
}

/* ============================================
   INFO GRID
   ============================================ */

.info-grid[b-uzhxri0hki] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.info-card[b-uzhxri0hki] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem;
    background: var(--wl-surface-primary);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 0.375rem;
}

.info-icon[b-uzhxri0hki] {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.5rem;
    color: var(--wl-text-muted);
    flex-shrink: 0;
}

.info-icon svg[b-uzhxri0hki] {
    width: 1.25rem;
    height: 1.25rem;
}

.info-icon.xp[b-uzhxri0hki] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.2) 0%, rgba(var(--wl-purple-rgb), 0.1) 100%);
    color: var(--wl-purple);
}

.info-content[b-uzhxri0hki] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.info-label[b-uzhxri0hki] {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wl-text-muted);
}

.info-value[b-uzhxri0hki] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.0625rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.02em;
}

.info-value.salary[b-uzhxri0hki] {
    color: var(--wl-gold);
}

.info-value.xp[b-uzhxri0hki] {
    color: var(--wl-purple);
}

.info-value .currency[b-uzhxri0hki] {
    font-size: 0.875rem;
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 0.25rem;
}

.info-value .period[b-uzhxri0hki] {
    font-size: 0.75rem;
    font-family: 'Source Sans 3', sans-serif;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.xp-card[b-uzhxri0hki] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.1) 0%, rgba(var(--wl-purple-rgb), 0.02) 100%);
    border-color: rgba(var(--wl-purple-rgb), 0.15);
}

/* ============================================
   HEADER ACTIONS
   ============================================ */

.header-actions[b-uzhxri0hki] {
    display: flex;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.btn-terminate[b-uzhxri0hki] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, rgba(var(--wl-red-rgb), 0.15) 0%, rgba(var(--wl-red-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-red-rgb), 0.25);
    border-radius: 0.375rem;
    color: #f87171;
    font-weight: 600;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-terminate:hover[b-uzhxri0hki] {
    background: linear-gradient(135deg, rgba(var(--wl-red-rgb), 0.25) 0%, rgba(var(--wl-red-rgb), 0.1) 100%);
    border-color: rgba(var(--wl-red-rgb), 0.4);
    transform: translateY(-2px);
}

.btn-terminate svg[b-uzhxri0hki] {
    width: 0.875rem;
    height: 0.875rem;
}

/* ============================================
   SKILLS SECTION
   ============================================ */

.skills-section[b-uzhxri0hki] {
    position: relative;
    z-index: 1;
}

.section-header[b-uzhxri0hki] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.section-icon[b-uzhxri0hki] {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid var(--wl-gold-border);
    border-radius: 0.5rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.section-icon :deep(svg)[b-uzhxri0hki] {
    width: 1.125rem;
    height: 1.125rem;
}

.section-text h2[b-uzhxri0hki] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem 0;
}

.section-text p[b-uzhxri0hki] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0;
}

.cards-tree-container[b-uzhxri0hki] {
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    overflow: hidden;
}

/* ============================================
   TERMINATION MODAL
   ============================================ */

.termination-modal[b-uzhxri0hki] {
    padding: 0.5rem;
}

.termination-confirm[b-uzhxri0hki] {
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin: 0 0 1.5rem 0;
    line-height: 1.6;
}

.settlement-details[b-uzhxri0hki] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

.settlement-row[b-uzhxri0hki] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settlement-row.highlight[b-uzhxri0hki] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-medium);
}

.settlement-label[b-uzhxri0hki] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.settlement-value[b-uzhxri0hki] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.02em;
}

.settlement-row.highlight .settlement-value[b-uzhxri0hki] {
    color: var(--wl-gold);
}

.modal-actions[b-uzhxri0hki] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.btn-cancel[b-uzhxri0hki],
.btn-confirm-terminate[b-uzhxri0hki] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel[b-uzhxri0hki] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.btn-cancel:hover:not(:disabled)[b-uzhxri0hki] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
}

.btn-confirm-terminate[b-uzhxri0hki] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border: none;
    color: var(--wl-text-primary);
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.3);
}

.btn-confirm-terminate:hover:not(:disabled)[b-uzhxri0hki] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4);
}

.btn-cancel:disabled[b-uzhxri0hki],
.btn-confirm-terminate:disabled[b-uzhxri0hki] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .member-details-page[b-uzhxri0hki] {
        padding: 0 1rem 3rem;
    }

    .member-header[b-uzhxri0hki] {
        padding: 1.5rem;
    }

    .header-content[b-uzhxri0hki] {
        flex-direction: column;
        align-items: flex-start;
    }

    .rating-display[b-uzhxri0hki] {
        align-self: flex-start;
    }

    .member-surname[b-uzhxri0hki] {
        font-size: 2rem;
    }

    .info-grid[b-uzhxri0hki] {
        grid-template-columns: 1fr 1fr;
    }

    .section-header[b-uzhxri0hki] {
        gap: 0.75rem;
    }

    .section-icon[b-uzhxri0hki] {
        width: 2.5rem;
        height: 2.5rem;
    }

    .section-icon :deep(svg)[b-uzhxri0hki] {
        width: 1.25rem;
        height: 1.25rem;
    }

    .section-text h2[b-uzhxri0hki] {
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .info-grid[b-uzhxri0hki] {
        grid-template-columns: 1fr;
    }

    .modal-actions[b-uzhxri0hki] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .loading-spinner[b-uzhxri0hki] {
        animation: none;
    }
}
/* /Components/Pages/Bands/Index.razor.rz.scp.css */
.public-bands-page[b-bya0czz5pc] {
    --directory-border: rgba(var(--wl-contrast-rgb), .1);
    position: relative;
    isolation: isolate;
    width: min(100%, 1320px);
    min-height: 80vh;
    margin: 0 auto;
    padding: 1.25rem clamp(.85rem, 2.5vw, 2rem) 5rem;
    color: var(--wl-text-primary);
}

.directory-atmosphere[b-bya0czz5pc] {
    position: fixed;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 82% 8%, rgba(var(--wl-purple-rgb), .16), transparent 33rem),
        radial-gradient(circle at 12% 28%, rgba(var(--wl-gold-rgb), .1), transparent 29rem);
}

.directory-kicker[b-bya0czz5pc] {
    margin: 0;
    color: var(--wl-gold);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.directory-hero[b-bya0czz5pc] {
    position: relative;
    display: grid;
    min-height: 27rem;
    grid-template-columns: minmax(0, 1.15fr) minmax(17rem, .85fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--directory-border);
    border-radius: 1.35rem;
    background:
        linear-gradient(105deg, rgba(var(--wl-bg-primary-rgb), .94), rgba(var(--wl-bg-secondary-rgb), .86) 55%, rgba(var(--wl-purple-rgb), .09)),
        var(--wl-bg-secondary);
    box-shadow: 0 28px 80px var(--wl-shadow-color);
}

.directory-hero[b-bya0czz5pc]::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: .28;
    background-image: linear-gradient(rgba(var(--wl-contrast-rgb), .025) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--wl-contrast-rgb), .025) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
    mask-image: linear-gradient(90deg, transparent, black 45%, black);
}

.hero-copy[b-bya0czz5pc] {
    position: relative;
    z-index: 3;
    padding: clamp(2rem, 5vw, 4.5rem);
}

.hero-copy h1[b-bya0czz5pc] {
    max-width: 12ch;
    margin: .35rem 0 .9rem;
    font-family: var(--font-display);
    font-size: clamp(4rem, 8vw, 7.2rem);
    font-weight: 400;
    letter-spacing: .02em;
    line-height: .82;
    text-wrap: balance;
}

.hero-copy > p:last-of-type[b-bya0czz5pc] { max-width: 38rem; margin: 0; color: var(--wl-text-secondary); font-size: 1rem; line-height: 1.6; }
.hero-links[b-bya0czz5pc] { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.5rem; }

.directory-button[b-bya0czz5pc] {
    display: inline-flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    border-radius: .55rem;
    padding: .7rem 1rem;
    color: inherit;
    font-weight: 900;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease;
}
.directory-button:hover[b-bya0czz5pc] { transform: translateY(-2px); }
.directory-button.primary[b-bya0czz5pc] { border-color: var(--wl-gold); background: var(--wl-gold); color: var(--wl-bg-primary); box-shadow: 0 10px 25px rgba(var(--wl-gold-rgb), .16); }
.directory-button.secondary[b-bya0czz5pc] { border-color: rgba(var(--wl-gold-rgb), .3); background: rgba(var(--wl-gold-rgb), .07); }

.hero-poster[b-bya0czz5pc] {
    position: relative;
    z-index: 2;
    width: min(22rem, 82%);
    aspect-ratio: .76;
    justify-self: center;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-gold-rgb), .25);
    border-radius: .3rem;
    background:
        radial-gradient(circle at 50% 35%, rgba(var(--wl-gold-rgb), .24), transparent 38%),
        linear-gradient(145deg, rgba(var(--wl-purple-rgb), .24), rgba(var(--wl-bg-primary-rgb), .9) 65%);
    box-shadow: 1.2rem 1.2rem 0 rgba(var(--wl-gold-rgb), .045), 0 25px 55px rgba(0, 0, 0, .32);
    transform: rotate(2deg);
}

.hero-poster[b-bya0czz5pc]::before,
.hero-poster[b-bya0czz5pc]::after { content: ""; position: absolute; z-index: 4; inset: .7rem; border: 1px solid rgba(var(--wl-gold-rgb), .18); pointer-events: none; }
.hero-poster[b-bya0czz5pc]::after { inset: auto .7rem .7rem; height: 23%; border-width: 1px 0 0; }
.hero-poster > strong[b-bya0czz5pc] { position: absolute; z-index: 5; top: .2em; left: .1em; color: rgba(var(--wl-contrast-rgb), .05); font-family: var(--font-display); font-size: 10rem; line-height: 1; }
.hero-poster > small[b-bya0czz5pc] { position: absolute; z-index: 6; right: 1.2rem; bottom: 1.1rem; color: var(--wl-gold); font-size: .63rem; font-weight: 900; letter-spacing: .22em; writing-mode: vertical-rl; }
.poster-beam[b-bya0czz5pc] { position: absolute; z-index: 1; top: -20%; width: 28%; height: 100%; background: linear-gradient(180deg, rgba(var(--wl-gold-rgb), .24), transparent 70%); filter: blur(12px); transform-origin: top; }
.beam-one[b-bya0czz5pc] { left: 15%; transform: rotate(-17deg); }
.beam-two[b-bya0czz5pc] { right: 15%; transform: rotate(17deg); }
.poster-figures[b-bya0czz5pc] { position: absolute; z-index: 3; inset: 23% 8% 8%; display: flex; align-items: end; justify-content: center; }
.poster-figures i[b-bya0czz5pc] { width: 28%; height: 74%; margin: 0 -2%; border-radius: 50% 50% .3rem .3rem; background: linear-gradient(180deg, rgba(var(--wl-contrast-rgb), .23), rgba(var(--wl-contrast-rgb), .04)); box-shadow: 0 15px 20px rgba(0,0,0,.22); }
.poster-figures i:nth-child(1)[b-bya0czz5pc], .poster-figures i:nth-child(4)[b-bya0czz5pc] { height: 62%; opacity: .72; }
.poster-figures i:nth-child(2)[b-bya0czz5pc] { height: 82%; }

.directory-summary[b-bya0czz5pc] {
    position: absolute;
    z-index: 8;
    right: clamp(1rem, 3vw, 2.5rem);
    bottom: 1.2rem;
    display: flex;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--directory-border);
    border-radius: .7rem;
    background: rgba(var(--wl-bg-primary-rgb), .78);
    backdrop-filter: blur(14px);
}
.directory-summary > div[b-bya0czz5pc] { min-width: 7.3rem; padding: .65rem .8rem; border-left: 1px solid var(--directory-border); }
.directory-summary > div:first-child[b-bya0czz5pc] { border-left: 0; }
.directory-summary dt[b-bya0czz5pc] { color: var(--wl-text-secondary); font-size: .56rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.directory-summary dd[b-bya0czz5pc] { margin: .1rem 0 0; font-family: var(--font-display); font-size: 1.45rem; line-height: 1; }

.directory-toolbar[b-bya0czz5pc] {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) auto auto;
    align-items: center;
    gap: .7rem;
    margin: 1rem 0 1.5rem;
    border: 1px solid var(--directory-border);
    border-radius: .85rem;
    padding: .65rem;
    background: rgba(var(--wl-bg-secondary-rgb), .72);
    box-shadow: 0 12px 35px rgba(var(--wl-bg-primary-rgb), .12);
    backdrop-filter: blur(14px);
}
.search-field[b-bya0czz5pc] { position: relative; }
.search-field > i[b-bya0czz5pc] { position: absolute; top: 50%; left: .8rem; transform: translateY(-50%); color: var(--wl-gold); font-size: 1.2rem; font-style: normal; }
.search-field input[b-bya0czz5pc],
.sort-field select[b-bya0czz5pc] { width: 100%; min-height: 2.65rem; border: 1px solid rgba(var(--wl-contrast-rgb), .12); border-radius: .55rem; background: rgba(var(--wl-bg-primary-rgb), .55); color: var(--wl-text-primary); font: inherit; }
.search-field input[b-bya0czz5pc] { padding: .6rem .8rem .6rem 2.4rem; }
.recruiting-filter[b-bya0czz5pc] { cursor: pointer; }
.recruiting-filter input[b-bya0czz5pc] { position: absolute; opacity: 0; pointer-events: none; }
.recruiting-filter > span[b-bya0czz5pc] { display: inline-flex; min-height: 2.65rem; align-items: center; gap: .45rem; border: 1px solid rgba(var(--wl-contrast-rgb), .12); border-radius: .55rem; padding: .55rem .8rem; color: var(--wl-text-secondary); font-size: .78rem; font-weight: 800; }
.recruiting-filter i[b-bya0czz5pc] { width: .5rem; height: .5rem; border-radius: 50%; background: var(--wl-text-muted); }
.recruiting-filter input:checked + span[b-bya0czz5pc] { border-color: rgba(var(--wl-green-rgb), .3); background: rgba(var(--wl-green-rgb), .07); color: var(--wl-green); }
.recruiting-filter input:checked + span i[b-bya0czz5pc] { background: var(--wl-green); box-shadow: 0 0 0 .22rem rgba(var(--wl-green-rgb), .1); }
.recruiting-filter input:focus-visible + span[b-bya0czz5pc],
.search-field input:focus-visible[b-bya0czz5pc],
.sort-field select:focus-visible[b-bya0czz5pc] { outline: 2px solid var(--wl-gold); outline-offset: 2px; }
.sort-field[b-bya0czz5pc] { display: flex; align-items: center; gap: .5rem; color: var(--wl-text-secondary); font-size: .72rem; white-space: nowrap; }
.sort-field select[b-bya0czz5pc] { min-width: 9rem; padding: .55rem .7rem; }

.results-heading[b-bya0czz5pc] { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
.results-heading h2[b-bya0czz5pc] { margin: .15rem 0 0; font-family: var(--font-display); font-size: 2.25rem; font-weight: 400; line-height: 1; }
.results-heading > span[b-bya0czz5pc] { color: var(--wl-text-secondary); font-size: .75rem; }
.public-band-grid[b-bya0czz5pc] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.public-band-grid.single-result[b-bya0czz5pc] { grid-template-columns: minmax(0, 1fr); }

.public-band-card[b-bya0czz5pc] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(9.5rem, .72fr) minmax(0, 1.28fr);
    min-height: 19rem;
    overflow: hidden;
    border: 1px solid var(--directory-border);
    border-radius: 1rem;
    background: linear-gradient(145deg, rgba(var(--wl-bg-tertiary-rgb), .68), rgba(var(--wl-bg-secondary-rgb), .94));
    color: inherit;
    text-decoration: none;
    box-shadow: 0 15px 42px rgba(var(--wl-bg-primary-rgb), .14);
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.public-band-card:hover[b-bya0czz5pc],
.public-band-card:focus-visible[b-bya0czz5pc] { transform: translateY(-5px); border-color: rgba(var(--wl-gold-rgb), .38); box-shadow: 0 24px 58px rgba(var(--wl-bg-primary-rgb), .24); }
.public-band-card:focus-visible[b-bya0czz5pc] { outline: 2px solid var(--wl-gold); outline-offset: 3px; }
.single-result .public-band-card[b-bya0czz5pc] { grid-template-columns: minmax(15rem, .72fr) minmax(0, 1.28fr); min-height: 22rem; }

.band-poster[b-bya0czz5pc] {
    position: relative;
    display: grid;
    min-height: 100%;
    place-items: center;
    overflow: hidden;
    border-right: 1px solid var(--directory-border);
    background:
        radial-gradient(circle at 50% 38%, rgba(var(--wl-gold-rgb), .2), transparent 43%),
        linear-gradient(160deg, rgba(var(--wl-purple-rgb), .19), rgba(var(--wl-bg-primary-rgb), .74));
}
.girlsband .band-poster[b-bya0czz5pc] { background: radial-gradient(circle at 50% 38%, rgba(var(--wl-pink-rgb), .18), transparent 43%), linear-gradient(160deg, rgba(var(--wl-purple-rgb), .22), rgba(var(--wl-bg-primary-rgb), .76)); }
.mixed .band-poster[b-bya0czz5pc] {
    background:
        radial-gradient(circle at 30% 34%, rgba(var(--wl-cyan-rgb), .18), transparent 39%),
        radial-gradient(circle at 72% 42%, rgba(var(--wl-pink-rgb), .17), transparent 42%),
        linear-gradient(160deg, rgba(var(--wl-purple-rgb), .2), rgba(var(--wl-bg-primary-rgb), .76));
}
.band-poster[b-bya0czz5pc]::before { content: ""; position: absolute; inset: 0; opacity: .25; background-image: repeating-linear-gradient(120deg, transparent 0 1.6rem, rgba(var(--wl-contrast-rgb), .035) 1.6rem 1.68rem); }
.poster-number[b-bya0czz5pc] { position: absolute; top: .8rem; left: .8rem; color: rgba(var(--wl-contrast-rgb), .25); font-size: .6rem; font-weight: 900; letter-spacing: .12em; }
.poster-monogram[b-bya0czz5pc] { position: relative; z-index: 2; display: grid; width: clamp(5rem, 9vw, 7rem); aspect-ratio: 1; place-items: center; border: 1px solid rgba(var(--wl-gold-rgb), .28); border-radius: 50%; background: rgba(var(--wl-bg-primary-rgb), .32); color: var(--wl-gold); font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 4rem); letter-spacing: .05em; box-shadow: 0 0 45px rgba(var(--wl-gold-rgb), .12); }
.poster-member-stack[b-bya0czz5pc] { position: absolute; z-index: 3; bottom: 2.7rem; display: flex; justify-content: center; }
.poster-member-stack i[b-bya0czz5pc] { width: 1.4rem; height: 1.4rem; margin-left: -.28rem; border: 2px solid var(--wl-bg-secondary); border-radius: 50%; background: linear-gradient(145deg, var(--wl-gold), var(--wl-purple)); }
.poster-member-stack i:first-child[b-bya0czz5pc] { margin-left: 0; }
.band-poster small[b-bya0czz5pc] { position: absolute; z-index: 3; bottom: .85rem; color: var(--wl-text-secondary); font-size: .58rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }

.band-card-copy[b-bya0czz5pc] { display: flex; min-width: 0; flex-direction: column; padding: clamp(1rem, 2.2vw, 1.5rem); }
.band-card-copy > header[b-bya0czz5pc] { display: flex; align-items: start; justify-content: space-between; gap: .7rem; }
.band-card-copy header p[b-bya0czz5pc] { margin: 0; color: var(--wl-gold); font-size: .62rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.band-card-copy h3[b-bya0czz5pc] { margin: .15rem 0 0; overflow-wrap: anywhere; font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 3rem); font-weight: 400; letter-spacing: .02em; line-height: .9; }
.card-arrow[b-bya0czz5pc] { color: var(--wl-gold); font-size: 1.2rem; transition: transform .2s ease; }
.public-band-card:hover .card-arrow[b-bya0czz5pc] { transform: translate(3px, -3px); }
.band-card-copy dl[b-bya0czz5pc] { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin: auto 0 .8rem; padding-top: 1rem; }
.band-card-copy dl > div[b-bya0czz5pc] { border-top: 1px solid var(--directory-border); padding-top: .55rem; }
.band-card-copy dt[b-bya0czz5pc] { color: var(--wl-text-secondary); font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.band-card-copy dd[b-bya0czz5pc] { margin: .1rem 0 0; font-family: var(--font-display); font-size: 1.4rem; }
.recruitment-callout[b-bya0czz5pc] { min-height: 4.1rem; border: 1px solid rgba(var(--wl-green-rgb), .2); border-radius: .6rem; padding: .6rem .7rem; background: rgba(var(--wl-green-rgb), .055); }
.recruitment-callout strong[b-bya0czz5pc] { display: flex; align-items: center; gap: .35rem; color: var(--wl-green); font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.recruitment-callout strong i[b-bya0czz5pc] { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; }
.recruitment-callout p[b-bya0czz5pc] { display: -webkit-box; margin: .28rem 0 0; overflow: hidden; color: var(--wl-text-secondary); font-size: .72rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.recruitment-callout.closed[b-bya0czz5pc] { display: flex; align-items: center; border-color: var(--directory-border); background: rgba(var(--wl-contrast-rgb), .025); }
.recruitment-callout.closed strong[b-bya0czz5pc] { color: var(--wl-text-muted); }

.public-bands-empty[b-bya0czz5pc] {
    display: grid;
    min-height: 22rem;
    place-items: center;
    align-content: center;
    gap: .5rem;
    border: 1px dashed rgba(var(--wl-contrast-rgb), .14);
    border-radius: 1rem;
    padding: 2rem;
    background: rgba(var(--wl-bg-secondary-rgb), .55);
    color: var(--wl-text-secondary);
    text-align: center;
}
.public-bands-empty h2[b-bya0czz5pc] { margin: .2rem 0 0; color: var(--wl-text-primary); font-family: var(--font-display); font-size: 2.4rem; font-weight: 400; }
.public-bands-empty p[b-bya0czz5pc] { max-width: 30rem; margin: 0; }
.public-bands-empty button[b-bya0czz5pc] { margin-top: .6rem; border: 1px solid rgba(var(--wl-gold-rgb), .3); border-radius: .5rem; padding: .6rem .8rem; background: rgba(var(--wl-gold-rgb), .07); color: var(--wl-text-primary); cursor: pointer; font-weight: 800; }
.empty-mark[b-bya0czz5pc] { display: grid; width: 4rem; height: 4rem; place-items: center; border: 1px solid rgba(var(--wl-gold-rgb), .25); border-radius: 50%; color: var(--wl-gold); font-size: 1.7rem; }
.directory-loader[b-bya0czz5pc] { width: 2.2rem; height: 2.2rem; border: 2px solid rgba(var(--wl-gold-rgb), .2); border-top-color: var(--wl-gold); border-radius: 50%; animation: directory-spin-b-bya0czz5pc .8s linear infinite; }
.sr-only[b-bya0czz5pc] { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes directory-spin-b-bya0czz5pc { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
    .directory-hero[b-bya0czz5pc] { grid-template-columns: minmax(0, 1fr) minmax(15rem, .65fr); }
    .public-band-grid[b-bya0czz5pc] { grid-template-columns: 1fr; }
    .public-band-card[b-bya0czz5pc] { grid-template-columns: minmax(12rem, .55fr) minmax(0, 1.45fr); }
}

@media (max-width: 780px) {
    .directory-hero[b-bya0czz5pc] { grid-template-columns: 1fr; padding-bottom: 1rem; }
    .hero-copy[b-bya0czz5pc] { padding-bottom: 1rem; }
    .hero-poster[b-bya0czz5pc] { width: min(18rem, 72%); }
    .directory-summary[b-bya0czz5pc] { position: relative; right: auto; bottom: auto; width: calc(100% - 2rem); margin: 1.4rem auto 0; justify-content: center; }
    .directory-summary > div[b-bya0czz5pc] { flex: 1; }
    .directory-toolbar[b-bya0czz5pc] { grid-template-columns: 1fr 1fr; }
    .search-field[b-bya0czz5pc] { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
    .public-bands-page[b-bya0czz5pc] { padding-inline: .7rem; }
    .directory-hero[b-bya0czz5pc] { border-radius: 1rem; }
    .hero-copy[b-bya0czz5pc] { padding: 1.5rem 1rem 1rem; }
    .hero-copy h1[b-bya0czz5pc] { font-size: clamp(3.6rem, 19vw, 5.4rem); }
    .hero-links[b-bya0czz5pc] { display: grid; }
    .directory-summary[b-bya0czz5pc] { display: grid; grid-template-columns: repeat(3, 1fr); width: calc(100% - 1rem); }
    .directory-summary > div[b-bya0czz5pc] { min-width: 0; padding: .55rem; }
    .directory-summary dt[b-bya0czz5pc] { font-size: .48rem; }
    .directory-toolbar[b-bya0czz5pc] { grid-template-columns: 1fr; }
    .search-field[b-bya0czz5pc] { grid-column: 1; }
    .recruiting-filter > span[b-bya0czz5pc] { width: 100%; }
    .sort-field[b-bya0czz5pc] { justify-content: space-between; }
    .public-band-card[b-bya0czz5pc],
    .single-result .public-band-card[b-bya0czz5pc] { grid-template-columns: 1fr; }
    .band-poster[b-bya0czz5pc] { min-height: 13rem; border-right: 0; border-bottom: 1px solid var(--directory-border); }
    .poster-monogram[b-bya0czz5pc] { width: 5.7rem; }
    .results-heading[b-bya0czz5pc] { align-items: start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    .directory-button[b-bya0czz5pc],
    .public-band-card[b-bya0czz5pc],
    .card-arrow[b-bya0czz5pc] { transition: none; }
    .directory-loader[b-bya0czz5pc] { animation: none; }
}
/* /Components/Pages/Bands/Profile.razor.rz.scp.css */
.public-band-profile[b-5l8uvjr18l] {
    --profile-border: rgba(var(--wl-contrast-rgb), .1);
    position: relative;
    isolation: isolate;
    width: min(100%, 1380px);
    min-height: 80vh;
    margin: 0 auto;
    padding: 1.25rem clamp(.8rem, 2.4vw, 2rem) 5rem;
    color: var(--wl-text-primary);
}

.profile-atmosphere[b-5l8uvjr18l] {
    position: fixed;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 79% 5%, rgba(var(--wl-purple-rgb), .16), transparent 34rem),
        radial-gradient(circle at 8% 35%, rgba(var(--wl-gold-rgb), .09), transparent 31rem);
}

.profile-kicker[b-5l8uvjr18l] {
    margin: 0;
    color: var(--wl-gold);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.artist-hero[b-5l8uvjr18l] {
    position: relative;
    display: grid;
    min-height: 31rem;
    grid-template-columns: minmax(0, 1.02fr) minmax(20rem, .98fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--profile-border);
    border-radius: 1.4rem;
    background:
        linear-gradient(104deg, rgba(var(--wl-bg-primary-rgb), .94), rgba(var(--wl-bg-secondary-rgb), .82) 56%, rgba(var(--wl-purple-rgb), .1)),
        var(--wl-bg-secondary);
    box-shadow: 0 30px 90px var(--wl-shadow-color);
}

.artist-hero[b-5l8uvjr18l]::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    opacity: .3;
    background-image: linear-gradient(rgba(var(--wl-contrast-rgb), .025) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--wl-contrast-rgb), .025) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: linear-gradient(90deg, transparent, black 48%, black);
}

.hero-copy[b-5l8uvjr18l] {
    position: relative;
    z-index: 5;
    padding: clamp(1.5rem, 5vw, 4.5rem);
}

.back-link[b-5l8uvjr18l] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 2rem;
    color: var(--wl-text-secondary);
    font-size: .76rem;
    font-weight: 700;
    text-decoration: none;
}
.back-link:hover[b-5l8uvjr18l] { color: var(--wl-gold); }
.hero-badges[b-5l8uvjr18l] { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }
.hero-badges > span[b-5l8uvjr18l] { display: inline-flex; min-height: 1.75rem; align-items: center; gap: .35rem; border: 1px solid var(--profile-border); border-radius: 999px; padding: .28rem .6rem; background: rgba(var(--wl-contrast-rgb), .03); color: var(--wl-text-secondary); font-size: .62rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.hero-badges .recruiting[b-5l8uvjr18l] { border-color: rgba(var(--wl-green-rgb), .28); background: rgba(var(--wl-green-rgb), .07); color: var(--wl-green); }
.hero-badges i[b-5l8uvjr18l] { width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .2rem rgba(var(--wl-green-rgb), .1); }
.hero-copy h1[b-5l8uvjr18l] { max-width: 14ch; margin: .35rem 0 .85rem; font-family: var(--font-display); font-size: clamp(4rem, 8vw, 7.4rem); font-weight: 400; letter-spacing: .02em; line-height: .8; overflow-wrap: anywhere; }
.hero-tagline[b-5l8uvjr18l] { max-width: 38rem; margin: 0; color: var(--wl-text-secondary); font-size: 1rem; line-height: 1.55; }
.hero-signature[b-5l8uvjr18l] { display: grid; width: fit-content; margin-top: 1.7rem; padding-left: .8rem; border-left: 2px solid var(--wl-gold); }
.hero-signature span[b-5l8uvjr18l] { color: var(--wl-text-secondary); font-size: .58rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.hero-signature strong[b-5l8uvjr18l] { font-size: .85rem; }
.hero-lineup[b-5l8uvjr18l] { position: relative; z-index: 3; align-self: end; padding: 1rem 1rem 0; }
.hero-marquee[b-5l8uvjr18l] { position: absolute; z-index: 1; right: -.03em; bottom: -.18em; max-width: 70%; overflow: hidden; color: rgba(var(--wl-contrast-rgb), .026); font-family: var(--font-display); font-size: clamp(8rem, 17vw, 14rem); line-height: .78; white-space: nowrap; pointer-events: none; }

.recruitment-banner[b-5l8uvjr18l] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    border: 1px solid rgba(var(--wl-green-rgb), .25);
    border-radius: .9rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(90deg, rgba(var(--wl-green-rgb), .075), rgba(var(--wl-bg-secondary-rgb), .78));
}
.recruitment-icon[b-5l8uvjr18l] { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; border: 1px solid rgba(var(--wl-green-rgb), .3); border-radius: .75rem; color: var(--wl-green); font-size: 1.4rem; }
.recruitment-banner h2[b-5l8uvjr18l] { margin: .12rem 0 0; font-family: var(--font-display); font-size: 1.65rem; font-weight: 400; line-height: 1; }
.recruitment-banner div > p:last-child[b-5l8uvjr18l] { margin: .3rem 0 0; color: var(--wl-text-secondary); font-size: .82rem; }
.recruitment-note[b-5l8uvjr18l] { max-width: 15rem; border-left: 1px solid rgba(var(--wl-green-rgb), .3); padding: .35rem 0 .35rem 1rem; color: var(--wl-green); font-size: .72rem; font-weight: 800; line-height: 1.35; }

.profile-stats[b-5l8uvjr18l] { display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); gap: .7rem; margin: 1rem 0; }
.profile-stats article[b-5l8uvjr18l] { position: relative; display: grid; min-height: 7.8rem; align-content: end; overflow: hidden; border: 1px solid var(--profile-border); border-radius: .85rem; padding: .9rem; background: rgba(var(--wl-bg-secondary-rgb), .62); }
.profile-stats article[b-5l8uvjr18l]::after { content: ""; position: absolute; right: -1.5rem; bottom: -3rem; width: 7rem; height: 7rem; border: 1px solid rgba(var(--wl-gold-rgb), .13); border-radius: 50%; }
.profile-stats .primary-stat[b-5l8uvjr18l] { border-color: rgba(var(--wl-gold-rgb), .28); background: linear-gradient(145deg, rgba(var(--wl-gold-rgb), .08), rgba(var(--wl-bg-secondary-rgb), .7)); }
.profile-stats article > span[b-5l8uvjr18l] { position: absolute; top: .7rem; right: .8rem; color: rgba(var(--wl-contrast-rgb), .18); font-size: .6rem; font-weight: 900; }
.profile-stats strong[b-5l8uvjr18l] { font-family: var(--font-display); font-size: 2.2rem; font-weight: 400; line-height: 1; }
.profile-stats small[b-5l8uvjr18l] { color: var(--wl-text-secondary); font-size: .65rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.profile-section[b-5l8uvjr18l] {
    margin-top: 1rem;
    overflow: hidden;
    border: 1px solid var(--profile-border);
    border-radius: 1rem;
    padding: clamp(1rem, 2.3vw, 1.6rem);
    background: linear-gradient(145deg, rgba(var(--wl-bg-tertiary-rgb), .56), rgba(var(--wl-bg-secondary-rgb), .84));
    box-shadow: 0 15px 45px rgba(var(--wl-bg-primary-rgb), .12);
}
.section-heading[b-5l8uvjr18l] { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-heading h2[b-5l8uvjr18l] { margin: .16rem 0 0; font-family: var(--font-display); font-size: 2.4rem; font-weight: 400; letter-spacing: .02em; line-height: 1; }
.section-heading > span[b-5l8uvjr18l] { max-width: 29rem; color: var(--wl-text-secondary); font-size: .75rem; line-height: 1.4; text-align: right; }

.public-roster[b-5l8uvjr18l] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.roster-card[b-5l8uvjr18l] { position: relative; overflow: hidden; border: 1px solid var(--profile-border); border-radius: .8rem; background: rgba(var(--wl-bg-primary-rgb), .26); color: inherit; text-decoration: none; transition: transform .22s ease, border-color .22s ease; }
.roster-card:hover[b-5l8uvjr18l],
.roster-card:focus-visible[b-5l8uvjr18l] { transform: translateY(-4px); border-color: rgba(var(--wl-gold-rgb), .36); }
.roster-card:focus-visible[b-5l8uvjr18l],
.back-link:focus-visible[b-5l8uvjr18l] { outline: 2px solid var(--wl-gold); outline-offset: 3px; }
.roster-portrait[b-5l8uvjr18l] { position: relative; height: 13rem; overflow: hidden; background: radial-gradient(circle at 50% 35%, rgba(var(--wl-gold-rgb), .12), transparent 55%); }
.roster-portrait[b-5l8uvjr18l]::after { content: ""; position: absolute; inset: auto 0 0; height: 50%; background: linear-gradient(transparent, rgba(var(--wl-bg-primary-rgb), .72)); }
.roster-portrait img[b-5l8uvjr18l] { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 15px 16px rgba(0,0,0,.28)); }
.roster-portrait > span[b-5l8uvjr18l] { position: absolute; z-index: 2; top: .65rem; right: .7rem; color: rgba(var(--wl-contrast-rgb), .24); font-size: .58rem; font-weight: 900; }
.roster-copy[b-5l8uvjr18l] { position: relative; padding: .8rem; }
.roster-copy > div[b-5l8uvjr18l] { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.roster-copy strong[b-5l8uvjr18l] { overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.leader-badge[b-5l8uvjr18l] { border-radius: 999px; padding: .15rem .35rem; background: rgba(var(--wl-gold-rgb), .09); color: var(--wl-gold); font-size: .55rem; font-weight: 900; text-transform: uppercase; }
.roster-copy p[b-5l8uvjr18l] { margin: .25rem 0 0; color: var(--wl-text-secondary); font-size: .7rem; }
.profile-arrow[b-5l8uvjr18l] { position: absolute; right: .7rem; bottom: .7rem; color: var(--wl-gold); }

.discography-empty[b-5l8uvjr18l] { display: grid; min-height: 16rem; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1.5rem, 5vw, 4rem); border: 1px dashed rgba(var(--wl-contrast-rgb), .13); border-radius: .8rem; padding: clamp(1.5rem, 4vw, 3rem); background: rgba(var(--wl-bg-primary-rgb), .2); }
.empty-record[b-5l8uvjr18l] { position: relative; display: grid; width: clamp(8rem, 18vw, 12rem); aspect-ratio: 1; place-items: center; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(var(--wl-contrast-rgb), .04) 0 .17rem, rgba(var(--wl-contrast-rgb), .09) .18rem .2rem); box-shadow: 0 20px 45px rgba(0,0,0,.22); }
.empty-record[b-5l8uvjr18l]::after { content: ""; width: 23%; aspect-ratio: 1; border: .55rem solid rgba(var(--wl-gold-rgb), .22); border-radius: 50%; background: var(--wl-bg-primary); }
.empty-record i[b-5l8uvjr18l] { position: absolute; inset: 8%; border: 1px solid rgba(var(--wl-gold-rgb), .18); border-radius: 50%; }
.discography-empty h3[b-5l8uvjr18l] { margin: .15rem 0 .4rem; font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 400; line-height: .9; }
.discography-empty p:last-child[b-5l8uvjr18l] { max-width: 34rem; margin: 0; color: var(--wl-text-secondary); }

.featured-track[b-5l8uvjr18l] { display: grid; grid-template-columns: minmax(12rem, .55fr) minmax(0, 1.45fr); min-height: 17rem; overflow: hidden; border: 1px solid rgba(var(--wl-gold-rgb), .25); border-radius: .8rem; background: linear-gradient(120deg, rgba(var(--wl-gold-rgb), .075), rgba(var(--wl-bg-primary-rgb), .34)); }
.track-artwork[b-5l8uvjr18l] { position: relative; display: grid; min-height: 17rem; place-items: center; overflow: hidden; border-right: 1px solid rgba(var(--wl-gold-rgb), .2); background: radial-gradient(circle at 50% 45%, rgba(var(--wl-gold-rgb), .22), transparent 42%), linear-gradient(145deg, rgba(var(--wl-purple-rgb), .22), rgba(var(--wl-bg-primary-rgb), .82)); }
.track-artwork[b-5l8uvjr18l]::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border: 1px solid rgba(var(--wl-gold-rgb), .19); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(var(--wl-gold-rgb), .025), 0 0 0 4rem rgba(var(--wl-gold-rgb), .018); }
.track-artwork > span[b-5l8uvjr18l] { position: relative; z-index: 2; display: grid; width: 5.5rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(var(--wl-gold-rgb), .3); border-radius: 50%; background: rgba(var(--wl-bg-primary-rgb), .56); color: var(--wl-gold); font-family: var(--font-display); font-size: 2.7rem; }
.track-artwork i[b-5l8uvjr18l] { position: absolute; inset: .7rem; border: 1px solid rgba(var(--wl-contrast-rgb), .07); }
.featured-track-copy[b-5l8uvjr18l] { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.2rem, 3vw, 2.3rem); }
.featured-track h3[b-5l8uvjr18l] { margin: .2rem 0; font-family: var(--font-display); font-size: clamp(2.8rem, 5vw, 4.6rem); font-weight: 400; line-height: .85; }
.featured-track-copy > span[b-5l8uvjr18l] { color: var(--wl-text-secondary); }
.featured-track dl[b-5l8uvjr18l] { display: flex; gap: 2rem; margin: 1.4rem 0 0; }
.featured-track dt[b-5l8uvjr18l] { color: var(--wl-text-secondary); font-size: .58rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.featured-track dd[b-5l8uvjr18l] { margin: .12rem 0 0; color: var(--wl-gold); font-family: var(--font-display); font-size: 1.6rem; }
.public-songs[b-5l8uvjr18l] { display: grid; margin-top: .75rem; }
.public-songs article[b-5l8uvjr18l] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; min-height: 4rem; padding: .65rem .7rem; border-bottom: 1px solid var(--profile-border); transition: background .15s ease; }
.public-songs article:last-child[b-5l8uvjr18l] { border-bottom: 0; }
.public-songs article:hover[b-5l8uvjr18l] { background: rgba(var(--wl-contrast-rgb), .025); }
.track-number[b-5l8uvjr18l] { color: rgba(var(--wl-contrast-rgb), .25); font-size: .65rem; font-weight: 900; }
.public-songs article > div[b-5l8uvjr18l] { display: grid; min-width: 0; }
.public-songs article > div strong[b-5l8uvjr18l] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.public-songs article > div span[b-5l8uvjr18l] { overflow: hidden; color: var(--wl-text-secondary); font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.public-songs small[b-5l8uvjr18l] { color: var(--wl-text-muted); }
.chart-peak[b-5l8uvjr18l] { border: 1px solid rgba(var(--wl-gold-rgb), .24); border-radius: 999px; padding: .2rem .42rem; color: var(--wl-gold); font-size: .67rem; font-weight: 900; }
.public-songs em[b-5l8uvjr18l] { display: grid; justify-items: end; color: var(--wl-gold); font-style: normal; font-weight: 900; }
.public-songs em small[b-5l8uvjr18l] { font-size: .52rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.legacy-grid[b-5l8uvjr18l] { display: grid; grid-template-columns: minmax(15rem, .62fr) minmax(0, 1.38fr); gap: .8rem; }
.live-footprint[b-5l8uvjr18l] { position: relative; display: grid; min-height: 16rem; overflow: hidden; border: 1px solid rgba(var(--wl-gold-rgb), .2); border-radius: .8rem; background: linear-gradient(145deg, rgba(var(--wl-purple-rgb), .14), rgba(var(--wl-bg-primary-rgb), .4)); }
.footprint-visual[b-5l8uvjr18l] { position: absolute; inset: 0; overflow: hidden; }
.footprint-visual[b-5l8uvjr18l]::before,
.footprint-visual[b-5l8uvjr18l]::after { content: ""; position: absolute; top: -35%; width: 30%; height: 105%; background: linear-gradient(180deg, rgba(var(--wl-gold-rgb), .2), transparent); filter: blur(13px); transform-origin: top; }
.footprint-visual[b-5l8uvjr18l]::before { left: 12%; transform: rotate(-18deg); }
.footprint-visual[b-5l8uvjr18l]::after { right: 12%; transform: rotate(18deg); }
.footprint-visual i[b-5l8uvjr18l] { position: absolute; bottom: 0; left: 50%; width: 1px; height: 55%; background: rgba(var(--wl-contrast-rgb), .08); transform-origin: bottom; }
.footprint-visual i:nth-child(1)[b-5l8uvjr18l] { transform: rotate(-32deg); }
.footprint-visual i:nth-child(3)[b-5l8uvjr18l] { transform: rotate(32deg); }
.live-footprint > div:last-child[b-5l8uvjr18l] { position: relative; z-index: 2; display: grid; align-content: end; padding: 1.2rem; }
.live-footprint strong[b-5l8uvjr18l] { font-family: var(--font-display); font-size: 4rem; font-weight: 400; line-height: .85; }
.live-footprint span[b-5l8uvjr18l] { color: var(--wl-text-secondary); font-size: .7rem; }
.public-awards[b-5l8uvjr18l] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.public-awards article[b-5l8uvjr18l] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; border: 1px solid var(--profile-border); border-radius: .7rem; padding: .75rem; background: rgba(var(--wl-contrast-rgb), .025); }
.award-emblem[b-5l8uvjr18l] { display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid rgba(var(--wl-gold-rgb), .25); border-radius: 50%; background: rgba(var(--wl-gold-rgb), .07); color: var(--wl-gold); }
.public-awards article > div:nth-child(2)[b-5l8uvjr18l] { display: grid; min-width: 0; }
.public-awards p[b-5l8uvjr18l] { margin: 0; color: var(--wl-gold); font-size: .55rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.public-awards strong[b-5l8uvjr18l],
.public-awards span[b-5l8uvjr18l] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.public-awards span[b-5l8uvjr18l] { color: var(--wl-text-secondary); font-size: .68rem; }
.public-awards time[b-5l8uvjr18l] { color: rgba(var(--wl-contrast-rgb), .3); font-family: var(--font-display); font-size: 1.3rem; }
.awards-empty[b-5l8uvjr18l] { display: flex; min-height: 16rem; align-items: center; justify-content: center; gap: 1rem; border: 1px dashed rgba(var(--wl-contrast-rgb), .13); border-radius: .8rem; padding: 1.5rem; color: var(--wl-text-secondary); }
.awards-empty > span[b-5l8uvjr18l] { display: grid; width: 3.5rem; height: 3.5rem; flex: 0 0 auto; place-items: center; border: 1px solid rgba(var(--wl-gold-rgb), .2); border-radius: 50%; color: var(--wl-gold); font-size: 1.4rem; }
.awards-empty strong[b-5l8uvjr18l] { color: var(--wl-text-primary); }
.awards-empty p[b-5l8uvjr18l] { margin: .2rem 0 0; font-size: .74rem; }

.profile-empty[b-5l8uvjr18l] { display: grid; min-height: 32rem; place-items: center; align-content: center; gap: .65rem; border: 1px solid var(--profile-border); border-radius: 1rem; padding: 2rem; background: rgba(var(--wl-bg-secondary-rgb), .7); color: var(--wl-text-secondary); text-align: center; }
.profile-empty h1[b-5l8uvjr18l] { margin: .2rem 0 0; color: var(--wl-text-primary); font-family: var(--font-display); font-size: 3.4rem; font-weight: 400; line-height: .9; }
.profile-empty p[b-5l8uvjr18l] { max-width: 30rem; margin: 0; }
.profile-empty a[b-5l8uvjr18l] { margin-top: .5rem; border: 1px solid rgba(var(--wl-gold-rgb), .3); border-radius: .5rem; padding: .6rem .8rem; color: var(--wl-gold); font-weight: 800; text-decoration: none; }
.empty-emblem[b-5l8uvjr18l] { display: grid; width: 4rem; height: 4rem; place-items: center; border: 1px solid rgba(var(--wl-gold-rgb), .24); border-radius: 50%; color: var(--wl-gold); font-family: var(--font-display); font-size: 2rem; }
.profile-loader[b-5l8uvjr18l] { width: 2.2rem; height: 2.2rem; border: 2px solid rgba(var(--wl-gold-rgb), .2); border-top-color: var(--wl-gold); border-radius: 50%; animation: profile-spin-b-5l8uvjr18l .8s linear infinite; }
@keyframes profile-spin-b-5l8uvjr18l { to { transform: rotate(360deg); } }

@media (max-width: 1050px) {
    .artist-hero[b-5l8uvjr18l] { grid-template-columns: minmax(0, 1fr) minmax(17rem, .7fr); }
    .public-roster[b-5l8uvjr18l] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-stats[b-5l8uvjr18l] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .profile-stats .primary-stat[b-5l8uvjr18l] { grid-column: span 1; }
}

@media (max-width: 820px) {
    .artist-hero[b-5l8uvjr18l] { grid-template-columns: 1fr; }
    .hero-copy[b-5l8uvjr18l] { padding-bottom: 0; }
    .hero-lineup[b-5l8uvjr18l] { width: min(100%, 34rem); justify-self: center; }
    .profile-stats[b-5l8uvjr18l] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .profile-stats .primary-stat[b-5l8uvjr18l] { grid-column: span 2; }
    .legacy-grid[b-5l8uvjr18l] { grid-template-columns: 1fr; }
    .public-awards[b-5l8uvjr18l] { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .public-band-profile[b-5l8uvjr18l] { padding-inline: .7rem; }
    .artist-hero[b-5l8uvjr18l] { border-radius: 1rem; }
    .hero-copy[b-5l8uvjr18l] { padding: 1.25rem 1rem 0; }
    .back-link[b-5l8uvjr18l] { margin-bottom: 1.2rem; }
    .hero-copy h1[b-5l8uvjr18l] { font-size: clamp(3.5rem, 18vw, 5.2rem); }
    .recruitment-banner[b-5l8uvjr18l] { grid-template-columns: auto 1fr; padding: .85rem; }
    .recruitment-note[b-5l8uvjr18l] { grid-column: 1 / -1; max-width: none; border-left: 0; border-top: 1px solid rgba(var(--wl-green-rgb), .2); padding: .65rem 0 0; }
    .section-heading[b-5l8uvjr18l] { align-items: start; flex-direction: column; }
    .section-heading > span[b-5l8uvjr18l] { text-align: left; }
    .public-roster[b-5l8uvjr18l] { grid-template-columns: 1fr 1fr; gap: .5rem; }
    .roster-portrait[b-5l8uvjr18l] { height: 10rem; }
    .roster-copy > div[b-5l8uvjr18l] { display: grid; }
    .leader-badge[b-5l8uvjr18l] { width: fit-content; }
    .discography-empty[b-5l8uvjr18l] { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .featured-track[b-5l8uvjr18l] { grid-template-columns: 1fr; }
    .track-artwork[b-5l8uvjr18l] { min-height: 13rem; border-right: 0; border-bottom: 1px solid rgba(var(--wl-gold-rgb), .2); }
    .public-songs article[b-5l8uvjr18l] { grid-template-columns: auto minmax(0, 1fr) auto; }
    .chart-peak[b-5l8uvjr18l] { display: none; }
    .public-songs em small[b-5l8uvjr18l] { display: none; }
}

@media (max-width: 420px) {
    .public-roster[b-5l8uvjr18l] { grid-template-columns: 1fr; }
    .roster-portrait[b-5l8uvjr18l] { height: 13rem; }
}

@media (prefers-reduced-motion: reduce) {
    .roster-card[b-5l8uvjr18l] { transition: none; }
    .profile-loader[b-5l8uvjr18l] { animation: none; }
}
/* /Components/Pages/Blog/Index.razor.rz.scp.css */
/* Header */
.blog-header[b-cn1xqbrire] {
    text-align: center;
    padding: 2rem 0 3rem;
}

.blog-overline[b-cn1xqbrire] {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--wl-gold);
    margin-bottom: 0.75rem;
}

.blog-title[b-cn1xqbrire] {
    font-family: 'Cormorant Garamond', serif;
    font-size: 3.25rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0 0 0.75rem;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.blog-subtitle[b-cn1xqbrire] {
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    margin: 0;
    font-weight: 300;
    letter-spacing: 0.02em;
}

.header-divider[b-cn1xqbrire] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.header-divider[b-cn1xqbrire]::before,
.header-divider[b-cn1xqbrire]::after {
    content: '';
    height: 1px;
    width: 4rem;
}

.header-divider[b-cn1xqbrire]::before {
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.3));
}

.header-divider[b-cn1xqbrire]::after {
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.3), transparent);
}

.divider-diamond[b-cn1xqbrire] {
    font-size: 0.5rem;
    color: var(--wl-gold);
    opacity: 0.6;
}

/* Loading */
.blog-loading[b-cn1xqbrire] {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
}

.loading-pulse[b-cn1xqbrire] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-cn1xqbrire 0.8s linear infinite;
}

@keyframes spin-b-cn1xqbrire {
    to { transform: rotate(360deg); }
}

/* Empty */
.blog-empty[b-cn1xqbrire] {
    text-align: center;
    padding: 5rem 0;
}

.empty-message[b-cn1xqbrire] {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin: 0 0 0.5rem;
}

.empty-hint[b-cn1xqbrire] {
    color: rgba(var(--wl-contrast-rgb), 0.25);
    font-size: 0.875rem;
    margin: 0;
}

/* Post list */
.post-list[b-cn1xqbrire] {
    display: flex;
    flex-direction: column;
}

/* Post card */
.post-card[b-cn1xqbrire] {
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--wl-border-subtle);
    position: relative;
    opacity: 0;
    animation: fadeIn-b-cn1xqbrire 0.5s ease forwards;
}

.post-card:first-child[b-cn1xqbrire] {
    padding-top: 0;
}

.post-card:last-child[b-cn1xqbrire] {
    border-bottom: none;
}

.post-card[b-cn1xqbrire]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-border));
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.post-card:hover[b-cn1xqbrire]::after {
    width: 100%;
}

/* Staggered entrance */
.post-card:nth-child(1)[b-cn1xqbrire] { animation-delay: 0s; }
.post-card:nth-child(2)[b-cn1xqbrire] { animation-delay: 0.06s; }
.post-card:nth-child(3)[b-cn1xqbrire] { animation-delay: 0.12s; }
.post-card:nth-child(4)[b-cn1xqbrire] { animation-delay: 0.18s; }
.post-card:nth-child(5)[b-cn1xqbrire] { animation-delay: 0.24s; }
.post-card:nth-child(6)[b-cn1xqbrire] { animation-delay: 0.3s; }
.post-card:nth-child(7)[b-cn1xqbrire] { animation-delay: 0.36s; }
.post-card:nth-child(8)[b-cn1xqbrire] { animation-delay: 0.42s; }
.post-card:nth-child(9)[b-cn1xqbrire] { animation-delay: 0.48s; }
.post-card:nth-child(10)[b-cn1xqbrire] { animation-delay: 0.54s; }

@keyframes fadeIn-b-cn1xqbrire {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Meta */
.post-meta[b-cn1xqbrire] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    margin-bottom: 0.625rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 500;
}

.meta-dot[b-cn1xqbrire] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(var(--wl-gold-rgb), 0.4);
}

.tag-chip[b-cn1xqbrire] {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 2px;
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: rgba(var(--wl-gold-rgb), 0.7);
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.3s ease, color 0.3s ease;
    border: 1px solid var(--wl-gold-bg);
}

.tag-chip:hover[b-cn1xqbrire] {
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
}

/* Post link & title */
.post-link[b-cn1xqbrire] {
    text-decoration: none;
    display: block;
}

.post-title[b-cn1xqbrire] {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.92);
    margin: 0 0 0.625rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.post-link:hover .post-title[b-cn1xqbrire] {
    color: var(--wl-gold);
}

/* Excerpt */
.post-excerpt[b-cn1xqbrire] {
    color: var(--wl-text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0 0 1rem;
    font-weight: 300;
}

/* Read more */
.read-more[b-cn1xqbrire] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--wl-gold);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: gap 0.3s ease;
}

.read-more:hover[b-cn1xqbrire] {
    gap: 0.625rem;
}

.read-more-arrow[b-cn1xqbrire] {
    transition: transform 0.3s ease;
    font-size: 0.875rem;
}

.read-more:hover .read-more-arrow[b-cn1xqbrire] {
    transform: translateX(2px);
}

/* Pagination */
.pagination[b-cn1xqbrire] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 0 1rem;
}

.page-btn[b-cn1xqbrire] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 0.5rem 1rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.25rem;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.page-btn:hover[b-cn1xqbrire] {
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.page-arrow[b-cn1xqbrire] {
    font-size: 0.75rem;
}

.page-indicator[b-cn1xqbrire] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-dot[b-cn1xqbrire] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(var(--wl-contrast-rgb), 0.15);
    text-decoration: none;
    display: block;
    transition: background 0.3s ease, transform 0.3s ease;
}

.page-dot:hover[b-cn1xqbrire] {
    background: rgba(var(--wl-gold-rgb), 0.5);
    transform: scale(1.3);
}

.page-dot.active[b-cn1xqbrire] {
    background: var(--wl-gold);
    transform: scale(1.2);
}

@media (max-width: 640px) {
    .blog-title[b-cn1xqbrire] {
        font-size: 2.25rem;
    }

    .post-title[b-cn1xqbrire] {
        font-size: 1.375rem;
    }

    .pagination[b-cn1xqbrire] {
        gap: 1rem;
    }
}
/* /Components/Pages/Blog/Post.razor.rz.scp.css */
/* Loading */
.blog-loading[b-s6kzafoz9w] {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
}

.loading-pulse[b-s6kzafoz9w] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-s6kzafoz9w 0.8s linear infinite;
}

@keyframes spin-b-s6kzafoz9w {
    to { transform: rotate(360deg); }
}

/* Not found */
.not-found[b-s6kzafoz9w] {
    text-align: center;
    padding: 5rem 0;
}

.not-found-code[b-s6kzafoz9w] {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4rem;
    font-weight: 700;
    color: var(--wl-gold-bg-hover);
    display: block;
    margin-bottom: 0.5rem;
}

.not-found-title[b-s6kzafoz9w] {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--wl-text-muted);
    margin: 0 0 1.5rem;
}

/* Back link */
.back-link[b-s6kzafoz9w] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    margin-bottom: 2rem;
    transition: color 0.3s ease, gap 0.3s ease;
}

.back-link:hover[b-s6kzafoz9w] {
    color: var(--wl-gold);
    gap: 0.625rem;
}

.back-arrow[b-s6kzafoz9w] {
    transition: transform 0.3s ease;
    font-size: 0.75rem;
}

.back-link:hover .back-arrow[b-s6kzafoz9w] {
    transform: translateX(-2px);
}

/* Post detail entrance */
.post-detail[b-s6kzafoz9w] {
    animation: fadeIn-b-s6kzafoz9w 0.6s ease;
}

@keyframes fadeIn-b-s6kzafoz9w {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Header */
.post-header[b-s6kzafoz9w] {
    margin-bottom: 0;
}

.post-meta[b-s6kzafoz9w] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    margin-bottom: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 500;
}

.post-author[b-s6kzafoz9w] {
    color: rgba(var(--wl-gold-rgb), 0.7);
}

.meta-dot[b-s6kzafoz9w] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(var(--wl-gold-rgb), 0.3);
    flex-shrink: 0;
}

.reading-time[b-s6kzafoz9w] {
    color: rgba(var(--wl-contrast-rgb), 0.25);
}

.post-title[b-s6kzafoz9w] {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.75rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0 0 1.25rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.post-tags[b-s6kzafoz9w] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tag-chip[b-s6kzafoz9w] {
    display: inline-block;
    padding: 0.1875rem 0.75rem;
    border-radius: 2px;
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: rgba(var(--wl-gold-rgb), 0.7);
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.3s ease, color 0.3s ease;
    border: 1px solid var(--wl-gold-bg);
}

.tag-chip:hover[b-s6kzafoz9w] {
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
}

/* Divider */
.header-divider[b-s6kzafoz9w],
.footer-divider[b-s6kzafoz9w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 0;
}

.header-divider[b-s6kzafoz9w]::before,
.header-divider[b-s6kzafoz9w]::after,
.footer-divider[b-s6kzafoz9w]::before,
.footer-divider[b-s6kzafoz9w]::after {
    content: '';
    height: 1px;
    flex: 1;
    max-width: 6rem;
}

.header-divider[b-s6kzafoz9w]::before,
.footer-divider[b-s6kzafoz9w]::before {
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.25));
}

.header-divider[b-s6kzafoz9w]::after,
.footer-divider[b-s6kzafoz9w]::after {
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.25), transparent);
}

.divider-diamond[b-s6kzafoz9w] {
    font-size: 0.4375rem;
    color: var(--wl-gold);
    opacity: 0.5;
}

/* Audio player */
.audio-player[b-s6kzafoz9w] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    margin-bottom: 2rem;
}

.audio-label[b-s6kzafoz9w] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(var(--wl-gold-rgb), 0.6);
}

.audio-player audio[b-s6kzafoz9w] {
    width: 100%;
    height: 2.25rem;
    border-radius: 0.25rem;
    filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9);
}

/* Excerpt - editorial standfirst */
.post-excerpt[b-s6kzafoz9w] {
    margin-bottom: 2.5rem;
}

.post-excerpt p[b-s6kzafoz9w] {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.65;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0.01em;
}

/* Markdown content */
.post-content[b-s6kzafoz9w] {
    font-size: 1.0625rem;
    line-height: 1.85;
    color: rgba(var(--wl-contrast-rgb), 0.78);
    font-weight: 300;
}

.post-content[b-s6kzafoz9w]  h1,
.post-content[b-s6kzafoz9w]  h2,
.post-content[b-s6kzafoz9w]  h3,
.post-content[b-s6kzafoz9w]  h4 {
    font-family: 'Cormorant Garamond', serif;
    color: var(--wl-text-primary);
    margin: 2.5rem 0 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.post-content[b-s6kzafoz9w]  h2 {
    font-size: 1.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.post-content[b-s6kzafoz9w]  h3 {
    font-size: 1.375rem;
}

.post-content[b-s6kzafoz9w]  h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.post-content[b-s6kzafoz9w]  p {
    margin: 0 0 1.5rem;
}

.post-content[b-s6kzafoz9w]  a {
    color: var(--wl-gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    transition: border-color 0.3s ease;
}

.post-content[b-s6kzafoz9w]  a:hover {
    border-bottom-color: var(--wl-gold);
}

.post-content[b-s6kzafoz9w]  strong {
    color: rgba(var(--wl-contrast-rgb), 0.92);
    font-weight: 600;
}

.post-content[b-s6kzafoz9w]  ul,
.post-content[b-s6kzafoz9w]  ol {
    margin: 0 0 1.5rem;
    padding-left: 1.25rem;
}

.post-content[b-s6kzafoz9w]  li {
    margin-bottom: 0.5rem;
    padding-left: 0.375rem;
}

.post-content[b-s6kzafoz9w]  li::marker {
    color: rgba(var(--wl-gold-rgb), 0.4);
}

.post-content[b-s6kzafoz9w]  code {
    background: rgba(var(--wl-gold-rgb), 0.06);
    border: 1px solid var(--wl-gold-bg);
    padding: 0.125rem 0.4375rem;
    border-radius: 3px;
    font-size: 0.875em;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    color: rgba(229, 193, 88, 0.9);
}

.post-content[b-s6kzafoz9w]  pre {
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin: 0 0 1.5rem;
    position: relative;
}

.post-content[b-s6kzafoz9w]  pre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-bg));
    border-radius: 0.5rem 0.5rem 0 0;
}

.post-content[b-s6kzafoz9w]  pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1.7;
    color: rgba(var(--wl-contrast-rgb), 0.75);
}

.post-content[b-s6kzafoz9w]  blockquote {
    border-left: 3px solid rgba(var(--wl-gold-rgb), 0.35);
    padding: 0.75rem 1.25rem;
    margin: 0 0 1.5rem;
    background: rgba(var(--wl-gold-rgb), 0.03);
    border-radius: 0 0.25rem 0.25rem 0;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.post-content[b-s6kzafoz9w]  blockquote p:last-child {
    margin-bottom: 0;
}

.post-content[b-s6kzafoz9w]  img {
    max-width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-subtle);
}

.post-content[b-s6kzafoz9w]  hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--wl-gold-border), transparent);
    margin: 2.5rem 0;
}

.post-content[b-s6kzafoz9w]  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
}

.post-content[b-s6kzafoz9w]  th,
.post-content[b-s6kzafoz9w]  td {
    padding: 0.625rem 1rem;
    border: 1px solid var(--wl-border-medium);
    text-align: left;
}

.post-content[b-s6kzafoz9w]  th {
    background: rgba(var(--wl-gold-rgb), 0.06);
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.post-content[b-s6kzafoz9w]  tr:hover td {
    background: rgba(var(--wl-contrast-rgb), 0.02);
}

/* Footer */
.post-footer[b-s6kzafoz9w] {
    padding-top: 1rem;
}

.back-link-bottom[b-s6kzafoz9w] {
    margin-bottom: 0;
    display: flex;
    justify-content: center;
}

@media (max-width: 640px) {
    .post-title[b-s6kzafoz9w] {
        font-size: 2rem;
    }

    .post-meta[b-s6kzafoz9w] {
        flex-wrap: wrap;
    }

    .post-excerpt p[b-s6kzafoz9w] {
        font-size: 1.0625rem;
    }

    .post-content[b-s6kzafoz9w]  pre {
        padding: 1rem;
        border-radius: 0.375rem;
    }
}
/* /Components/Pages/Blog/TagPosts.razor.rz.scp.css */
/* Header */
.blog-header[b-1bsdsacg5v] {
    text-align: center;
    padding: 0 0 1rem;
}

.back-link[b-1bsdsacg5v] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    margin-bottom: 1.5rem;
    transition: color 0.3s ease, gap 0.3s ease;
}

.back-link:hover[b-1bsdsacg5v] {
    color: var(--wl-gold);
    gap: 0.625rem;
}

.back-arrow[b-1bsdsacg5v] {
    transition: transform 0.3s ease;
    font-size: 0.75rem;
}

.back-link:hover .back-arrow[b-1bsdsacg5v] {
    transform: translateX(-2px);
}

.blog-overline[b-1bsdsacg5v] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
    margin-bottom: 0.5rem;
}

.blog-title[b-1bsdsacg5v] {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.75rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.tag-name[b-1bsdsacg5v] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, #F5E6A3 50%, var(--wl-gold) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer-b-1bsdsacg5v 3s ease-in-out infinite;
}

@keyframes shimmer-b-1bsdsacg5v {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

.header-divider[b-1bsdsacg5v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem 0 0;
}

.header-divider[b-1bsdsacg5v]::before,
.header-divider[b-1bsdsacg5v]::after {
    content: '';
    height: 1px;
    width: 4rem;
}

.header-divider[b-1bsdsacg5v]::before {
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.25));
}

.header-divider[b-1bsdsacg5v]::after {
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.25), transparent);
}

.divider-diamond[b-1bsdsacg5v] {
    font-size: 0.4375rem;
    color: var(--wl-gold);
    opacity: 0.5;
}

/* Loading */
.blog-loading[b-1bsdsacg5v] {
    display: flex;
    justify-content: center;
    padding: 5rem 0;
}

.loading-pulse[b-1bsdsacg5v] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-1bsdsacg5v 0.8s linear infinite;
}

@keyframes spin-b-1bsdsacg5v {
    to { transform: rotate(360deg); }
}

/* Empty */
.blog-empty[b-1bsdsacg5v] {
    text-align: center;
    padding: 5rem 0;
}

.empty-message[b-1bsdsacg5v] {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin: 0 0 1rem;
}

.empty-link[b-1bsdsacg5v] {
    color: var(--wl-gold);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

.empty-link:hover[b-1bsdsacg5v] {
    opacity: 0.8;
}

/* Post list */
.post-list[b-1bsdsacg5v] {
    display: flex;
    flex-direction: column;
}

/* Post card */
.post-card[b-1bsdsacg5v] {
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--wl-border-subtle);
    position: relative;
    opacity: 0;
    animation: fadeIn-b-1bsdsacg5v 0.5s ease forwards;
}

.post-card:first-child[b-1bsdsacg5v] {
    padding-top: 0;
}

.post-card:last-child[b-1bsdsacg5v] {
    border-bottom: none;
}

.post-card[b-1bsdsacg5v]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-border));
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.post-card:hover[b-1bsdsacg5v]::after {
    width: 100%;
}

.post-card:nth-child(1)[b-1bsdsacg5v] { animation-delay: 0s; }
.post-card:nth-child(2)[b-1bsdsacg5v] { animation-delay: 0.06s; }
.post-card:nth-child(3)[b-1bsdsacg5v] { animation-delay: 0.12s; }
.post-card:nth-child(4)[b-1bsdsacg5v] { animation-delay: 0.18s; }
.post-card:nth-child(5)[b-1bsdsacg5v] { animation-delay: 0.24s; }
.post-card:nth-child(6)[b-1bsdsacg5v] { animation-delay: 0.3s; }
.post-card:nth-child(7)[b-1bsdsacg5v] { animation-delay: 0.36s; }
.post-card:nth-child(8)[b-1bsdsacg5v] { animation-delay: 0.42s; }
.post-card:nth-child(9)[b-1bsdsacg5v] { animation-delay: 0.48s; }
.post-card:nth-child(10)[b-1bsdsacg5v] { animation-delay: 0.54s; }

@keyframes fadeIn-b-1bsdsacg5v {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Meta */
.post-meta[b-1bsdsacg5v] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    margin-bottom: 0.625rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 500;
}

.meta-dot[b-1bsdsacg5v] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(var(--wl-gold-rgb), 0.4);
}

.tag-chip[b-1bsdsacg5v] {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: 2px;
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: rgba(var(--wl-gold-rgb), 0.7);
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background 0.3s ease, color 0.3s ease;
    border: 1px solid var(--wl-gold-bg);
}

.tag-chip:hover[b-1bsdsacg5v],
.tag-chip.active[b-1bsdsacg5v] {
    background: rgba(var(--wl-gold-rgb), 0.18);
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

/* Post link & title */
.post-link[b-1bsdsacg5v] {
    text-decoration: none;
    display: block;
}

.post-title[b-1bsdsacg5v] {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.75rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.92);
    margin: 0 0 0.625rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

.post-link:hover .post-title[b-1bsdsacg5v] {
    color: var(--wl-gold);
}

/* Excerpt */
.post-excerpt[b-1bsdsacg5v] {
    color: var(--wl-text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0;
    font-weight: 300;
}

/* Pagination */
.pagination[b-1bsdsacg5v] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 0 1rem;
}

.page-btn[b-1bsdsacg5v] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 0.5rem 1rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.25rem;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.page-btn:hover[b-1bsdsacg5v] {
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.page-arrow[b-1bsdsacg5v] {
    font-size: 0.75rem;
}

.page-info[b-1bsdsacg5v] {
    color: rgba(var(--wl-contrast-rgb), 0.25);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
}

@media (max-width: 640px) {
    .blog-title[b-1bsdsacg5v] {
        font-size: 2rem;
    }

    .post-title[b-1bsdsacg5v] {
        font-size: 1.375rem;
    }

    .pagination[b-1bsdsacg5v] {
        gap: 1rem;
    }
}
/* /Components/Pages/Buildings/BuildingList.razor.rz.scp.css */
/* ============================================
   BUILDINGS LIST - CINEMATIC CITY EXPLORER
   Theme: Film Noir meets Modern Luxury
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.buildings-page[b-7b1l9g2033] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-atmosphere[b-7b1l9g2033] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.atmosphere-gradient[b-7b1l9g2033] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 60% at 50% -20%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 80% 50% at 0% 50%, rgba(var(--wl-purple-rgb), 0.04) 0%, transparent 40%),
        radial-gradient(ellipse 80% 50% at 100% 80%, rgba(59, 130, 246, 0.04) 0%, transparent 40%);
}

.atmosphere-noise[b-7b1l9g2033] {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.atmosphere-vignette[b-7b1l9g2033] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, var(--wl-vignette-strength)) 100%);
}

/* ============================================
   CITY HEADER
   ============================================ */

.city-header[b-7b1l9g2033] {
    position: relative;
    z-index: 1;
    padding: 2rem 0 1.5rem;
    margin-bottom: 2rem;
}

.city-header-content[b-7b1l9g2033] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
}

.city-location[b-7b1l9g2033] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.location-icon[b-7b1l9g2033] {
    width: 2.5rem;
    height: 2.5rem;
    margin-top: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(var(--wl-gold-rgb), 0.3));
}

.location-text[b-7b1l9g2033] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.location-label[b-7b1l9g2033] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-gold);
    margin-bottom: 0.375rem;
}

.city-name[b-7b1l9g2033] {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 400;
    margin: 0;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.country-name[b-7b1l9g2033] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0.375rem 0 0 0;
}

.city-vibe[b-7b1l9g2033] {
    padding-top: 0.5rem;
}

.vibe-indicator[b-7b1l9g2033] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 2rem;
    backdrop-filter: blur(8px);
}

.vibe-dot[b-7b1l9g2033] {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: vibePulse-b-7b1l9g2033 2s ease-in-out infinite;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

@keyframes vibePulse-b-7b1l9g2033 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(0.85); }
}

.vibe-text[b-7b1l9g2033] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    letter-spacing: 0.03em;
}

.header-divider[b-7b1l9g2033] {
    margin-top: 1.5rem;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(var(--wl-gold-rgb), 0.5) 0%,
        var(--wl-gold-border) 30%,
        rgba(var(--wl-gold-rgb), 0.05) 70%,
        transparent 100%);
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-state[b-7b1l9g2033] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.loading-card[b-7b1l9g2033] {
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, rgba(var(--wl-contrast-rgb), 0.02) 0%, rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}

.loading-shimmer[b-7b1l9g2033] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-contrast-rgb), 0.03) 50%,
        transparent 100%);
    animation: shimmer-b-7b1l9g2033 1.5s ease-in-out infinite;
}

@keyframes shimmer-b-7b1l9g2033 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-7b1l9g2033] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.empty-icon[b-7b1l9g2033] {
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.15);
}

.empty-icon svg[b-7b1l9g2033] {
    width: 100%;
    height: 100%;
}

.empty-title[b-7b1l9g2033] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0 0 0.5rem;
    letter-spacing: 0.05em;
}

.empty-subtitle[b-7b1l9g2033] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin: 0;
    max-width: 300px;
}

/* ============================================
   BUILDINGS GRID
   ============================================ */

.buildings-grid[b-7b1l9g2033] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

/* ============================================
   BUILDING CARD
   ============================================ */

.building-card[b-7b1l9g2033] {
    position: relative;
    aspect-ratio: 16 / 11;
    border-radius: 1rem;
    overflow: hidden;
    cursor: default;
    animation: cardReveal-b-7b1l9g2033 0.6s ease-out both;
    transform-style: preserve-3d;
    perspective: 1000px;
}

@keyframes cardReveal-b-7b1l9g2033 {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Background Image Layer */
.card-background[b-7b1l9g2033] {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(135deg,
            rgba(30, 30, 40, 1) 0%,
            rgba(20, 20, 30, 1) 100%);
}

.card-background[b-7b1l9g2033]::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(var(--wl-contrast-rgb), 0.01) 0px,
            rgba(var(--wl-contrast-rgb), 0.01) 1px,
            transparent 1px,
            transparent 20px
        );
    opacity: 0.5;
    transition: opacity 0.5s ease;
}

.building-card:has(.card-bg-image[src]) .card-background[b-7b1l9g2033]::after {
    opacity: 0;
}

.card-background[b-7b1l9g2033]  .card-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
    filter: saturate(0.9) brightness(0.85);
}

.building-card:hover .card-background[b-7b1l9g2033]  .card-bg-image {
    transform: scale(1.08);
    filter: saturate(1.1) brightness(0.9);
}

.card-bg-overlay[b-7b1l9g2033] {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.3) 40%,
            rgba(0, 0, 0, 0.7) 80%,
            rgba(0, 0, 0, 0.85) 100%);
}

.card-bg-gradient[b-7b1l9g2033] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 60% at 20% 20%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(var(--wl-purple-rgb), 0.05) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.building-card:hover .card-bg-gradient[b-7b1l9g2033] {
    opacity: 1;
}

/* Decorative Frame */
.card-frame[b-7b1l9g2033] {
    position: absolute;
    inset: 0.75rem;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.building-card:hover .card-frame[b-7b1l9g2033] {
    opacity: 1;
}

.frame-corner[b-7b1l9g2033] {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    border-style: solid;
    border-width: 0;
}

.frame-tl[b-7b1l9g2033] {
    top: 0; left: 0;
    border-top-width: 1px;
    border-left-width: 1px;
}

.frame-tr[b-7b1l9g2033] {
    top: 0; right: 0;
    border-top-width: 1px;
    border-right-width: 1px;
}

.frame-bl[b-7b1l9g2033] {
    bottom: 0; left: 0;
    border-bottom-width: 1px;
    border-left-width: 1px;
}

.frame-br[b-7b1l9g2033] {
    bottom: 0; right: 0;
    border-bottom-width: 1px;
    border-right-width: 1px;
}

/* Content Layer */
.card-content[b-7b1l9g2033] {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
}

/* Card Header */
.card-header[b-7b1l9g2033] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: auto;
}

.building-type-badge[b-7b1l9g2033] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    backdrop-filter: blur(8px);
    border: 1px solid var(--wl-border-medium);
    border-radius: 2rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.building-type-badge :deep(svg)[b-7b1l9g2033] {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--wl-gold);
}

/* Card Body */
.card-body[b-7b1l9g2033] {
    margin-top: auto;
    margin-bottom: 1rem;
}

.building-name[b-7b1l9g2033] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem;
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.03em;
}

.building-description[b-7b1l9g2033] {
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card Footer */
.card-footer[b-7b1l9g2033] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Action Button */
.action-button[b-7b1l9g2033] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: transparent;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.3s ease, transform 0.2s ease;
}

.action-button:hover[b-7b1l9g2033] {
    border-color: rgba(var(--wl-gold-rgb), 0.6);
    transform: translateY(-2px);
}

.action-button:active[b-7b1l9g2033] {
    transform: translateY(0);
}

.action-button-bg[b-7b1l9g2033] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.action-button:hover .action-button-bg[b-7b1l9g2033] {
    opacity: 1;
}

.action-icon[b-7b1l9g2033] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-gold);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.action-text[b-7b1l9g2033] {
    flex: 1;
    text-align: left;
    position: relative;
    z-index: 1;
}

.action-arrow[b-7b1l9g2033] {
    width: 1rem;
    height: 1rem;
    color: rgba(var(--wl-gold-rgb), 0.6);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, color 0.3s ease;
}

.action-button:hover .action-arrow[b-7b1l9g2033] {
    transform: translateX(4px);
    color: var(--wl-gold);
}

.no-actions[b-7b1l9g2033] {
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-align: center;
}

/* Hover Glow Effect */
.card-glow[b-7b1l9g2033] {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 1rem;
    opacity: 0;
    transition: opacity 0.5s ease;
    box-shadow:
        inset 0 1px 0 var(--wl-border-medium),
        0 0 40px var(--wl-gold-bg-hover),
        0 0 80px rgba(var(--wl-gold-rgb), 0.08);
    pointer-events: none;
}

.building-card:hover .card-glow[b-7b1l9g2033] {
    opacity: 1;
}

/* Card Border */
.building-card[b-7b1l9g2033]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: 1rem;
    border: 1px solid var(--wl-border-medium);
    pointer-events: none;
    transition: border-color 0.3s ease;
}

.building-card:hover[b-7b1l9g2033]::before {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

/* ============================================
   FLOATING PARTICLES
   ============================================ */

.floating-particles[b-7b1l9g2033] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.particle[b-7b1l9g2033] {
    position: absolute;
    width: 2px;
    height: 2px;
    background: rgba(var(--wl-gold-rgb), 0.4);
    border-radius: 50%;
    animation: particleFloat-b-7b1l9g2033 20s linear infinite;
    animation-delay: calc(var(--i) * -1.5s);
    left: calc(var(--i) * 8% + 5%);
    top: 100%;
}

.particle:nth-child(odd)[b-7b1l9g2033] {
    width: 3px;
    height: 3px;
    background: var(--wl-gold-border);
    animation-duration: 25s;
}

.particle:nth-child(3n)[b-7b1l9g2033] {
    background: rgba(var(--wl-purple-rgb), 0.3);
}

@keyframes particleFloat-b-7b1l9g2033 {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) translateX(20px);
        opacity: 0;
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .buildings-page[b-7b1l9g2033] {
        padding: 0 1rem 3rem;
    }

    .city-header-content[b-7b1l9g2033] {
        flex-direction: column;
        gap: 1rem;
    }

    .city-name[b-7b1l9g2033] {
        font-size: 2rem;
    }

    .buildings-grid[b-7b1l9g2033] {
        grid-template-columns: 1fr;
    }

    .building-card[b-7b1l9g2033] {
        aspect-ratio: 16 / 12;
    }

    .building-name[b-7b1l9g2033] {
        font-size: 1.25rem;
    }
}

/* ============================================
   POMOC SPOLECZNA (welfare safety-net card)
   ============================================ */
.welfare-card[b-7b1l9g2033] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.5rem 0;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-gold);
    border-radius: 1rem;
    position: relative;
    z-index: 1;
}

.welfare-icon[b-7b1l9g2033] {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    color: var(--wl-gold);
}

.welfare-icon svg[b-7b1l9g2033] {
    width: 100%;
    height: 100%;
}

.welfare-body[b-7b1l9g2033] {
    flex: 1;
    min-width: 0;
}

.welfare-title[b-7b1l9g2033] {
    margin: 0 0 0.25rem 0;
    font-size: 1.15rem;
    color: var(--wl-text-primary);
}

.welfare-desc[b-7b1l9g2033] {
    margin: 0;
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    line-height: 1.4;
}

.welfare-cooldown[b-7b1l9g2033] {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--wl-gold);
}

.welfare-button[b-7b1l9g2033] {
    flex-shrink: 0;
    padding: 0.65rem 1.25rem;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.welfare-button:hover:not(:disabled)[b-7b1l9g2033] {
    filter: brightness(1.08);
}

.welfare-button:disabled[b-7b1l9g2033] {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .welfare-card[b-7b1l9g2033] {
        flex-wrap: wrap;
    }
    .welfare-button[b-7b1l9g2033] {
        width: 100%;
    }
}
/* /Components/Pages/Buildings/RecruitmentResults.razor.rz.scp.css */
/* ============================================
   RECRUITMENT RESULTS - AAA TALENT AGENCY UI
   Theme: Luxury VIP / Backstage Exclusive
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.recruitment-page[b-70oiprv13p] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-atmosphere[b-70oiprv13p] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(34, 211, 238, 0.03) 0%, transparent 50%);
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-70oiprv13p] {
    position: relative;
    z-index: 1;
    padding: 2rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--wl-gold-bg-hover);
}

.page-header[b-70oiprv13p]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-70oiprv13p] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-70oiprv13p] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid var(--wl-gold-border);
    border-radius: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-70oiprv13p] {
    width: 1.75rem;
    height: 1.75rem;
}

.header-text h1[b-70oiprv13p] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.header-subtitle[b-70oiprv13p] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-70oiprv13p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    color: var(--wl-text-muted);
    gap: 1.5rem;
}

.loading-spinner[b-70oiprv13p] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-gold-bg);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-70oiprv13p 1s linear infinite;
}

@keyframes spin-b-70oiprv13p {
    to { transform: rotate(360deg); }
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-70oiprv13p] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5rem 2rem;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.8) 0%, rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1.5rem;
    max-width: 500px;
    margin: 2rem auto;
}

.empty-icon-wrapper[b-70oiprv13p] {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-bg) 0%, rgba(var(--wl-gold-rgb), 0.02) 100%);
    border: 1px solid var(--wl-gold-bg-hover);
    border-radius: 50%;
    margin-bottom: 1.5rem;
}

.empty-icon[b-70oiprv13p] {
    width: 2.5rem;
    height: 2.5rem;
    color: rgba(var(--wl-gold-rgb), 0.6);
}

.empty-title[b-70oiprv13p] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.75rem 0;
}

.empty-text[b-70oiprv13p] {
    font-size: 0.9375rem;
    color: var(--wl-text-muted);
    margin: 0 0 2rem 0;
    max-width: 320px;
    line-height: 1.6;
}

.cta-button[b-70oiprv13p] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.75rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.25);
}

.cta-button:hover[b-70oiprv13p] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--wl-gold-rgb), 0.35);
}

.cta-button svg[b-70oiprv13p] {
    width: 1.125rem;
    height: 1.125rem;
}

/* ============================================
   EXPIRATION BANNER
   ============================================ */

.expiration-banner[b-70oiprv13p] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.08) 0%, rgba(234, 179, 8, 0.02) 100%);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 0.75rem;
    margin-bottom: 2rem;
    overflow: hidden;
}

.expiration-banner[b-70oiprv13p]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #eab308 0%, #ca8a04 100%);
}

.expiration-banner.urgent[b-70oiprv13p] {
    background: linear-gradient(90deg, rgba(var(--wl-red-rgb), 0.1) 0%, rgba(var(--wl-red-rgb), 0.02) 100%);
    border-color: rgba(var(--wl-red-rgb), 0.25);
}

.expiration-banner.urgent[b-70oiprv13p]::before {
    background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}

.expiration-icon[b-70oiprv13p] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(234, 179, 8, 0.15);
    border-radius: 50%;
    color: #eab308;
    flex-shrink: 0;
}

.expiration-banner.urgent .expiration-icon[b-70oiprv13p] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: #ef4444;
    animation: pulse-icon-b-70oiprv13p 1.5s ease-in-out infinite;
}

@keyframes pulse-icon-b-70oiprv13p {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.expiration-icon svg[b-70oiprv13p] {
    width: 1.25rem;
    height: 1.25rem;
}

.expiration-content[b-70oiprv13p] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.expiration-label[b-70oiprv13p] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.expiration-time[b-70oiprv13p] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: #eab308;
}

.expiration-banner.urgent .expiration-time[b-70oiprv13p] {
    color: #ef4444;
}

.expiration-pulse[b-70oiprv13p] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-red-rgb), 0.1), transparent);
    animation: sweep-b-70oiprv13p 2s ease-in-out infinite;
}

@keyframes sweep-b-70oiprv13p {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ============================================
   CANDIDATES GRID
   ============================================ */

.candidates-grid[b-70oiprv13p] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .candidates-grid[b-70oiprv13p] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   TALENT CARD - The Star of the Show
   ============================================ */

.talent-card[b-70oiprv13p] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    animation: card-enter-b-70oiprv13p 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes card-enter-b-70oiprv13p {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.talent-card[b-70oiprv13p]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 20%,
        rgba(var(--wl-gold-rgb), 0.8) 50%,
        rgba(var(--wl-gold-rgb), 0.4) 80%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.talent-card:hover[b-70oiprv13p] {
    transform: translateY(-8px);
    border-color: var(--wl-gold-border);
    box-shadow:
        0 20px 60px var(--wl-shadow-color),
        0 0 40px rgba(var(--wl-gold-rgb), 0.08);
}

.talent-card:hover[b-70oiprv13p]::before {
    opacity: 1;
}

/* Usunięty card-glow - hover działa przez ::before */

/* ============================================
   CARD HEADER - Rating & Type
   ============================================ */

.card-header[b-70oiprv13p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, rgba(var(--wl-contrast-rgb), 0.03) 0%, transparent 100%);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.rating-badge[b-70oiprv13p] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, rgba(var(--wl-gold-rgb), 0.08) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 2rem;
    cursor: help;
}

.rating-value[b-70oiprv13p] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    color: var(--wl-gold);
    line-height: 1;
    letter-spacing: 0.02em;
}

.rating-star[b-70oiprv13p] {
    width: 1rem;
    height: 1rem;
    color: var(--wl-gold);
    filter: drop-shadow(0 0 4px rgba(var(--wl-gold-rgb), 0.5));
}

.type-badge[b-70oiprv13p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.type-badge svg[b-70oiprv13p] {
    width: 0.875rem;
    height: 0.875rem;
}

.type-badge.vocalist[b-70oiprv13p] {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.type-badge.instrumentalist[b-70oiprv13p] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.15) 0%, rgba(var(--wl-purple-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.25);
    color: var(--wl-purple);
}

/* ============================================
   IDENTITY SECTION - Avatar & Name
   ============================================ */

.identity-section[b-70oiprv13p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1.25rem 1rem;
    text-align: center;
}

/* Nazwisko - duże, wyróżnione, złote */
.candidate-surname[b-70oiprv13p] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.875rem;
    letter-spacing: 0.08em;
    color: var(--wl-gold);
    margin: 0;
    line-height: 1;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.3);
}

/* Imię - mniejsze, pod nazwiskiem */
.candidate-firstname[b-70oiprv13p] {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0.375rem 0 0 0;
    letter-spacing: 0.03em;
    text-transform: none;
}

/* ============================================
   SKILLS SECTION - Radar & Bars
   ============================================ */

.skills-section[b-70oiprv13p] {
    padding: 1rem 1.25rem;
}

.section-title[b-70oiprv13p] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
    margin: 0 0 1rem 0;
}

.section-title svg[b-70oiprv13p] {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--wl-gold);
    opacity: 0.7;
}

/* Radar Chart */
.skills-radar-container[b-70oiprv13p] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.radar-chart[b-70oiprv13p] {
    width: 140px;
    height: 140px;
}

.radar-bg[b-70oiprv13p] {
    fill: none;
    stroke: var(--wl-border-subtle);
    stroke-width: 1;
}

.radar-fill[b-70oiprv13p] {
    fill: var(--wl-gold-bg-hover);
    transition: all 0.5s ease;
}

.radar-stroke[b-70oiprv13p] {
    fill: none;
    stroke: rgba(var(--wl-gold-rgb), 0.6);
    stroke-width: 2;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(var(--wl-gold-rgb), 0.3));
    transition: all 0.5s ease;
}

.talent-card:hover .radar-fill[b-70oiprv13p] {
    fill: rgba(var(--wl-gold-rgb), 0.25);
}

.talent-card:hover .radar-stroke[b-70oiprv13p] {
    stroke: rgba(var(--wl-gold-rgb), 0.9);
    filter: drop-shadow(0 0 8px rgba(var(--wl-gold-rgb), 0.5));
}

.radar-label[b-70oiprv13p] {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    fill: rgba(var(--wl-contrast-rgb), 0.9);
}

/* Skill Bars */
.skill-bars[b-70oiprv13p] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skill-bar-row[b-70oiprv13p] {
    display: grid;
    grid-template-columns: 3.5rem 1fr 1.5rem;
    align-items: center;
    gap: 0.625rem;
}

.skill-bar-label[b-70oiprv13p] {
    font-size: 0.6875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-align: right;
}

.skill-bar-track[b-70oiprv13p] {
    height: 0.375rem;
    background: var(--wl-border-subtle);
    border-radius: 0.25rem;
    overflow: hidden;
}

.skill-bar-fill[b-70oiprv13p] {
    height: 100%;
    border-radius: 0.25rem;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.skill-bar-fill.skill-great[b-70oiprv13p] {
    background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
    box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
}

.skill-bar-fill.skill-average[b-70oiprv13p] {
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.8) 0%, rgba(var(--wl-gold-rgb), 1) 100%);
    box-shadow: 0 0 8px rgba(var(--wl-gold-rgb), 0.3);
}

.skill-bar-fill.skill-poor[b-70oiprv13p] {
    background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
}

.skill-bar-value[b-70oiprv13p] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    text-align: right;
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.skill-bar-value.skill-great[b-70oiprv13p] {
    color: #4ade80;
}

.skill-bar-value.skill-average[b-70oiprv13p] {
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.skill-bar-value.skill-poor[b-70oiprv13p] {
    color: #f87171;
}

/* ============================================
   STATS SECTION - Patience & Salary
   ============================================ */

.stats-section[b-70oiprv13p] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--wl-surface-primary);
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.stat-item[b-70oiprv13p] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-header[b-70oiprv13p] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--wl-text-muted);
}

.stat-header svg[b-70oiprv13p] {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.7;
}

.stat-label[b-70oiprv13p] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Patience Indicator */
.patience-indicator[b-70oiprv13p] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.patience-track[b-70oiprv13p] {
    height: 0.5rem;
    background: var(--wl-border-medium);
    border-radius: 0.25rem;
    overflow: hidden;
}

.patience-fill[b-70oiprv13p] {
    height: 100%;
    border-radius: 0.25rem;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.patience-fill.patience-high[b-70oiprv13p] {
    background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.3);
}

.patience-fill.patience-medium[b-70oiprv13p] {
    background: linear-gradient(90deg, #eab308 0%, #facc15 100%);
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.3);
}

.patience-fill.patience-low[b-70oiprv13p] {
    background: linear-gradient(90deg, #dc2626 0%, #f87171 100%);
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.3);
}

.patience-text[b-70oiprv13p] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.patience-text.patience-high[b-70oiprv13p] {
    color: #4ade80;
}

.patience-text.patience-medium[b-70oiprv13p] {
    color: #facc15;
}

.patience-text.patience-low[b-70oiprv13p] {
    color: #f87171;
}

/* Salary Display */
.salary-display[b-70oiprv13p] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.salary-amount[b-70oiprv13p] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-gold);
    line-height: 1;
    letter-spacing: 0.02em;
}

.salary-currency[b-70oiprv13p] {
    font-size: 0.75rem;
    color: rgba(var(--wl-gold-rgb), 0.7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.salary-period[b-70oiprv13p] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   NEGOTIATE BUTTON - Primary CTA
   ============================================ */

.negotiate-button[b-70oiprv13p] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: calc(100% - 2.5rem);
    margin: 1.25rem;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    color: var(--wl-bg-primary);
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.negotiate-button .button-bg[b-70oiprv13p] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    transition: all 0.3s ease;
    z-index: 0;
}

.negotiate-button svg[b-70oiprv13p] {
    position: relative;
    z-index: 1;
    width: 1.125rem;
    height: 1.125rem;
}

.negotiate-button span[b-70oiprv13p] {
    position: relative;
    z-index: 1;
}

.negotiate-button .arrow-icon[b-70oiprv13p] {
    opacity: 0;
    transform: translateX(-8px);
    transition: all 0.3s ease;
}

.negotiate-button:hover[b-70oiprv13p] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--wl-gold-rgb), 0.35);
}

.negotiate-button:hover .button-bg[b-70oiprv13p] {
    background: linear-gradient(135deg, var(--wl-gold-light) 0%, var(--wl-gold) 100%);
}

.negotiate-button:hover .arrow-icon[b-70oiprv13p] {
    opacity: 1;
    transform: translateX(0);
}

.negotiate-button:active[b-70oiprv13p] {
    transform: translateY(0);
}

/* ============================================
   NEGOTIATION PLACEHOLDER (Modal)
   ============================================ */

.negotiation-placeholder[b-70oiprv13p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 3rem 2rem;
    text-align: center;
}

.placeholder-icon[b-70oiprv13p] {
    width: 4rem;
    height: 4rem;
    color: rgba(var(--wl-gold-rgb), 0.5);
}

.negotiation-placeholder p[b-70oiprv13p] {
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 480px) {
    .recruitment-page[b-70oiprv13p] {
        padding: 0 1rem 3rem;
    }

    .header-content[b-70oiprv13p] {
        gap: 1rem;
    }

    .header-icon[b-70oiprv13p] {
        width: 3rem;
        height: 3rem;
    }

    .header-icon svg[b-70oiprv13p] {
        width: 1.5rem;
        height: 1.5rem;
    }

    .header-text h1[b-70oiprv13p] {
        font-size: 1.5rem;
    }

    .card-header[b-70oiprv13p] {
        flex-direction: column;
        gap: 0.75rem;
        align-items: stretch;
    }

    .rating-badge[b-70oiprv13p] {
        justify-content: center;
    }

    .type-badge[b-70oiprv13p] {
        justify-content: center;
    }

    .stats-section[b-70oiprv13p] {
        grid-template-columns: 1fr;
    }

    .skill-bar-row[b-70oiprv13p] {
        grid-template-columns: 2.5rem 1fr 1.25rem;
    }
}

/* ============================================
   ANIMATION UTILITIES
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .talent-card[b-70oiprv13p],
    .card-glow[b-70oiprv13p],
    .skill-bar-fill[b-70oiprv13p],
    .patience-fill[b-70oiprv13p],
    .radar-fill[b-70oiprv13p],
    .radar-stroke[b-70oiprv13p] {
        animation: none;
        transition: none;
    }
}
/* /Components/Pages/Career/Creator/Index.razor.rz.scp.css */
.creator-page[b-v0hcffifcu] {
    display: grid;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
    color: var(--wl-text-primary);
    letter-spacing: 0;
}

.creator-broadcast-hero[b-v0hcffifcu] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    gap: 2rem;
    min-height: 360px;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(20, 184, 166, 0.12), transparent 34%),
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.16), rgba(var(--wl-bg-secondary-rgb), 0.82));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34), inset 0 0 90px rgba(0, 0, 0, 0.3);
    padding: 2rem;
}

.creator-broadcast-hero[b-v0hcffifcu]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.78), transparent 80%);
}

.creator-hero-copy[b-v0hcffifcu],
.creator-hero-stage[b-v0hcffifcu] {
    position: relative;
    z-index: 1;
}

.creator-hero-copy[b-v0hcffifcu] {
    align-self: center;
}

.creator-eyebrow[b-v0hcffifcu],
.creator-section-kicker[b-v0hcffifcu] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-gold);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0;
}

.creator-live-dot[b-v0hcffifcu] {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: #14b8a6;
    box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.14), 0 0 22px rgba(20, 184, 166, 0.65);
}

.creator-broadcast-hero h1[b-v0hcffifcu] {
    max-width: 11ch;
    margin: 0.7rem 0 0.75rem;
    color: #fff7d7;
    font-size: 3.4rem;
    line-height: 0.95;
    font-weight: 900;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.creator-broadcast-hero p[b-v0hcffifcu] {
    max-width: 56ch;
    margin: 0;
    color: rgba(var(--wl-contrast-rgb), 0.74);
    font-size: 1.05rem;
    line-height: 1.65;
}

.creator-hero-actions[b-v0hcffifcu] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.creator-primary[b-v0hcffifcu],
.creator-secondary[b-v0hcffifcu],
.creator-mini-link[b-v0hcffifcu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    border-radius: 8px;
    border: 1px solid rgba(20, 184, 166, 0.45);
    font-weight: 800;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.creator-primary[b-v0hcffifcu] {
    background: linear-gradient(135deg, #14b8a6, #f6d365);
    color: #081313;
    padding: 0 1.2rem;
    box-shadow: 0 12px 30px rgba(20, 184, 166, 0.18);
}

.creator-primary--wide[b-v0hcffifcu] {
    width: 100%;
}

.creator-secondary[b-v0hcffifcu],
.creator-mini-link[b-v0hcffifcu] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-gold);
    padding: 0 1rem;
}

.creator-primary:hover[b-v0hcffifcu],
.creator-secondary:hover[b-v0hcffifcu],
.creator-mini-link:hover[b-v0hcffifcu] {
    transform: translateY(-2px);
    border-color: rgba(var(--wl-gold-rgb), 0.65);
}

.creator-primary:disabled[b-v0hcffifcu] {
    cursor: wait;
    opacity: 0.68;
}

.creator-button-light[b-v0hcffifcu] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #052e2b;
    box-shadow: 0 0 10px rgba(5, 46, 43, 0.65);
}

.creator-hero-note[b-v0hcffifcu] {
    color: rgba(var(--wl-contrast-rgb), 0.56);
    font-size: 0.9rem;
}

.creator-hero-stage[b-v0hcffifcu] {
    display: grid;
    place-items: center;
}

.creator-monitor[b-v0hcffifcu] {
    width: min(100%, 430px);
    border: 1px solid rgba(20, 184, 166, 0.36);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(3, 7, 18, 0.96), rgba(15, 23, 42, 0.8));
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42), inset 0 0 32px rgba(20, 184, 166, 0.08);
    padding: 1rem;
}

.creator-monitor-top[b-v0hcffifcu] {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
}

.creator-monitor-top span[b-v0hcffifcu] {
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    background: rgba(var(--wl-gold-rgb), 0.78);
}

.creator-video-frame[b-v0hcffifcu] {
    display: grid;
    grid-template-columns: 1fr 0.72fr;
    gap: 0.85rem;
    min-height: 160px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(244, 114, 182, 0.08)),
        #020617;
    padding: 0.85rem;
}

.creator-avatar-silhouette[b-v0hcffifcu] {
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        linear-gradient(180deg, transparent 0 45%, rgba(20, 184, 166, 0.2) 45% 52%, transparent 52%),
        linear-gradient(135deg, rgba(255, 247, 215, 0.18), rgba(20, 184, 166, 0.08));
}

.creator-chat-stack[b-v0hcffifcu] {
    display: grid;
    align-content: end;
    gap: 0.55rem;
}

.creator-chat-stack span[b-v0hcffifcu] {
    display: block;
    height: 1.8rem;
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
}

.creator-waveform[b-v0hcffifcu] {
    display: flex;
    align-items: end;
    gap: 0.35rem;
    height: 54px;
    margin-top: 0.9rem;
}

.creator-waveform span[b-v0hcffifcu] {
    flex: 1;
    height: calc(var(--bar) * 3px);
    border-radius: 999px 999px 0 0;
    background: linear-gradient(180deg, var(--wl-gold), #14b8a6);
}

.creator-live-pill[b-v0hcffifcu] {
    position: absolute;
    right: 1.2rem;
    top: 1.2rem;
    border: 1px solid rgba(244, 114, 182, 0.42);
    border-radius: 8px;
    background: rgba(244, 114, 182, 0.16);
    color: #fda4af;
    font-weight: 900;
    padding: 0.45rem 0.7rem;
}

.creator-state-panel[b-v0hcffifcu],
.creator-empty-studio[b-v0hcffifcu],
.creator-control-room[b-v0hcffifcu],
.creator-panel[b-v0hcffifcu] {
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(var(--wl-contrast-rgb), 0.045), rgba(var(--wl-bg-secondary-rgb), 0.72));
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}

.creator-tooltip-trigger[b-v0hcffifcu] {
    cursor: help;
}

.creator-tooltip-trigger:hover[b-v0hcffifcu] {
    border-color: rgba(var(--wl-gold-rgb), 0.34);
}

.creator-state-panel[b-v0hcffifcu] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 9rem;
    padding: 1.5rem;
}

.creator-loading-beam[b-v0hcffifcu] {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 2px solid rgba(20, 184, 166, 0.25);
    border-top-color: #14b8a6;
    animation: creatorSpin-b-v0hcffifcu 1s linear infinite;
}

@keyframes creatorSpin-b-v0hcffifcu {
    to { transform: rotate(360deg); }
}

.creator-empty-studio[b-v0hcffifcu] {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
    gap: 1.5rem;
    padding: 1.25rem;
}

.creator-empty-preview[b-v0hcffifcu] {
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 8px;
    background: #050a14;
    padding: 1rem;
}

.creator-preview-header[b-v0hcffifcu],
.creator-preview-metrics[b-v0hcffifcu],
.creator-section-head[b-v0hcffifcu],
.creator-session-row[b-v0hcffifcu],
.creator-clip-row[b-v0hcffifcu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.creator-preview-header span[b-v0hcffifcu],
.creator-section-head p[b-v0hcffifcu],
.creator-signal-card span[b-v0hcffifcu],
.creator-signal-card small[b-v0hcffifcu],
.creator-empty-list span[b-v0hcffifcu],
.creator-session-row span[b-v0hcffifcu],
.creator-clip-row small[b-v0hcffifcu] {
    color: rgba(var(--wl-contrast-rgb), 0.58);
}

.creator-preview-header strong[b-v0hcffifcu] {
    color: var(--wl-gold);
}

.creator-preview-live[b-v0hcffifcu] {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 1rem;
    align-items: center;
    min-height: 140px;
    margin: 1rem 0;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.11), rgba(244, 114, 182, 0.07));
    padding: 1rem;
}

.creator-preview-camera[b-v0hcffifcu] {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 8px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.32);
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-gold);
    font-size: 2rem;
    font-weight: 900;
}

.creator-preview-copy[b-v0hcffifcu] {
    display: grid;
    gap: 0.35rem;
}

.creator-preview-copy strong[b-v0hcffifcu] {
    color: #fff7d7;
    font-size: 1.25rem;
}

.creator-preview-copy span[b-v0hcffifcu] {
    color: rgba(var(--wl-contrast-rgb), 0.68);
}

.creator-preview-metrics span[b-v0hcffifcu] {
    display: grid;
    gap: 0.25rem;
    flex: 1;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    padding-top: 0.8rem;
    font-size: 0.78rem;
}

.creator-preview-metrics strong[b-v0hcffifcu] {
    color: #14b8a6;
    font-size: 1.15rem;
}

.creator-empty-copy[b-v0hcffifcu] {
    display: grid;
    align-content: center;
    gap: 0.85rem;
    padding: 1rem;
}

.creator-empty-copy h2[b-v0hcffifcu],
.creator-section-head h2[b-v0hcffifcu],
.creator-panel h2[b-v0hcffifcu] {
    margin: 0;
    color: #fff7d7;
}

.creator-empty-copy p[b-v0hcffifcu] {
    margin: 0;
    color: rgba(var(--wl-contrast-rgb), 0.72);
    line-height: 1.6;
}

.creator-title-field[b-v0hcffifcu] {
    display: grid;
    gap: 0.45rem;
}

.creator-title-field span[b-v0hcffifcu] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-weight: 700;
}

.creator-input[b-v0hcffifcu] {
    min-height: 2.75rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.24);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.24);
    color: var(--wl-text-primary);
    padding: 0 0.85rem;
}

.creator-error[b-v0hcffifcu] {
    margin: 0;
    color: #fda4af;
}

.creator-control-room[b-v0hcffifcu],
.creator-panel[b-v0hcffifcu] {
    padding: 1.25rem;
}

.creator-section-head[b-v0hcffifcu] {
    margin-bottom: 1rem;
}

.creator-section-head--compact[b-v0hcffifcu] {
    align-items: flex-start;
}

.creator-signal-grid[b-v0hcffifcu] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
}

.creator-signal-card[b-v0hcffifcu] {
    display: grid;
    gap: 0.55rem;
    min-height: 132px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.035);
    padding: 1rem;
}

.creator-signal-card--primary[b-v0hcffifcu] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.075);
}

.creator-signal-card--risk[b-v0hcffifcu] {
    border-color: rgba(244, 114, 182, 0.28);
}

.creator-signal-card strong[b-v0hcffifcu] {
    color: #fff7d7;
    font-size: 1.45rem;
}

.creator-signal-card meter[b-v0hcffifcu] {
    width: 100%;
    height: 0.55rem;
    accent-color: #14b8a6;
}

.creator-dashboard-grid[b-v0hcffifcu] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 1rem;
}

.creator-empty-list[b-v0hcffifcu],
.creator-session-list[b-v0hcffifcu],
.creator-clip-list[b-v0hcffifcu] {
    display: grid;
    gap: 0.65rem;
}

.creator-empty-list[b-v0hcffifcu] {
    min-height: 9rem;
    align-content: center;
    border: 1px dashed rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 8px;
    padding: 1rem;
}

.creator-session-row[b-v0hcffifcu],
.creator-clip-row[b-v0hcffifcu] {
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
    color: var(--wl-text-primary);
    text-decoration: none;
    padding: 0.85rem 1rem;
    transition: transform 0.16s ease, border-color 0.16s ease;
}

.creator-session-row:hover[b-v0hcffifcu],
.creator-clip-row:hover[b-v0hcffifcu] {
    transform: translateX(4px);
    border-color: rgba(20, 184, 166, 0.42);
}

.creator-session-row[b-v0hcffifcu] {
    display: grid;
    grid-template-columns: 0.75fr 1.2fr auto;
}

.creator-session-format[b-v0hcffifcu] {
    color: var(--wl-gold);
    font-weight: 800;
}

@media (max-width: 1060px) {
    .creator-broadcast-hero[b-v0hcffifcu],
    .creator-empty-studio[b-v0hcffifcu],
    .creator-dashboard-grid[b-v0hcffifcu] {
        grid-template-columns: 1fr;
    }

    .creator-signal-grid[b-v0hcffifcu] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .creator-page[b-v0hcffifcu] {
        padding: 1rem 1rem 8rem;
    }

    .creator-broadcast-hero[b-v0hcffifcu] {
        min-height: auto;
        padding: 1.25rem;
    }

    .creator-broadcast-hero h1[b-v0hcffifcu] {
        font-size: 2.35rem;
    }

    .creator-signal-grid[b-v0hcffifcu] {
        grid-template-columns: 1fr 1fr;
    }

    .creator-session-row[b-v0hcffifcu] {
        grid-template-columns: 1fr;
    }

    .creator-preview-live[b-v0hcffifcu] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .creator-primary[b-v0hcffifcu],
    .creator-secondary[b-v0hcffifcu],
    .creator-mini-link[b-v0hcffifcu],
    .creator-session-row[b-v0hcffifcu],
    .creator-clip-row[b-v0hcffifcu],
    .creator-loading-beam[b-v0hcffifcu] {
        animation: none;
        transition: none;
    }

    .creator-primary:hover[b-v0hcffifcu],
    .creator-secondary:hover[b-v0hcffifcu],
    .creator-mini-link:hover[b-v0hcffifcu],
    .creator-session-row:hover[b-v0hcffifcu],
    .creator-clip-row:hover[b-v0hcffifcu] {
        transform: none;
    }
}

.creator-panel--videos[b-v0hcffifcu] {
    margin-top: 1.25rem;
}

.creator-video-publish[b-v0hcffifcu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(20, 184, 166, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(20, 184, 166, 0.1), rgba(var(--wl-gold-rgb), 0.06)),
        rgba(0, 0, 0, 0.14);
    padding: 1rem;
}

.creator-video-publish .creator-primary[b-v0hcffifcu],
.creator-video-publish .creator-secondary[b-v0hcffifcu] {
    min-width: min(100%, 180px);
}

.creator-video-publish-copy[b-v0hcffifcu] {
    display: grid;
    gap: 0.25rem;
}

.creator-video-publish-copy strong[b-v0hcffifcu] {
    color: #fff7d7;
    font-size: 1.05rem;
}

.creator-video-publish-copy span[b-v0hcffifcu],
.creator-video-main small[b-v0hcffifcu],
.creator-video-metrics small[b-v0hcffifcu] {
    color: rgba(var(--wl-contrast-rgb), 0.62);
}

.creator-video-list[b-v0hcffifcu] {
    display: grid;
    gap: 0.7rem;
}

.creator-video-row[b-v0hcffifcu] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.58fr);
    align-items: center;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(20, 184, 166, 0.055), transparent 54%),
        rgba(var(--wl-contrast-rgb), 0.035);
}

.creator-video-main[b-v0hcffifcu] {
    display: grid;
    min-width: 0;
    gap: 0.25rem;
}

.creator-video-title[b-v0hcffifcu] {
    color: var(--wl-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 900;
}

.creator-video-metrics[b-v0hcffifcu] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
}

.creator-video-metrics span[b-v0hcffifcu] {
    display: grid;
    gap: 0.2rem;
    min-height: 3.25rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
    padding: 0.5rem;
}

.creator-video-metrics strong[b-v0hcffifcu] {
    color: var(--wl-gold);
    font-size: 1rem;
}

@media (max-width: 900px) {
    .creator-video-publish[b-v0hcffifcu],
    .creator-video-row[b-v0hcffifcu] {
        grid-template-columns: 1fr;
    }

    .creator-video-publish .creator-primary[b-v0hcffifcu] {
        width: 100%;
    }
}

@media (max-width: 640px) {
    .creator-video-metrics[b-v0hcffifcu] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/Pages/Career/Creator/Live.razor.rz.scp.css */
.creator-live[b-otdgx9nfci] {
    display: grid;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
    color: var(--wl-text-primary);
    letter-spacing: 0;
}

.creator-live-hero[b-otdgx9nfci] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.45fr);
    gap: 2rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(20, 184, 166, 0.14), transparent 40%),
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15), rgba(var(--wl-bg-secondary-rgb), 0.84));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34), inset 0 0 80px rgba(0, 0, 0, 0.24);
    padding: 2rem;
}

.creator-live-hero[b-otdgx9nfci]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8), transparent 82%);
}

.creator-live-hero > *[b-otdgx9nfci] {
    position: relative;
    z-index: 1;
}

.creator-section-kicker[b-otdgx9nfci] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-gold);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.creator-live-hero h1[b-otdgx9nfci] {
    max-width: 10ch;
    margin: 0.65rem 0 0.75rem;
    color: #fff7d7;
    font-size: 3.2rem;
    line-height: 0.98;
    font-weight: 900;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.creator-live-hero p[b-otdgx9nfci] {
    max-width: 64ch;
    margin: 0;
    color: rgba(var(--wl-contrast-rgb), 0.74);
    font-size: 1.04rem;
    line-height: 1.65;
}

.creator-live-meter[b-otdgx9nfci] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
    gap: 0.55rem;
    min-height: 180px;
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(20, 184, 166, 0.12), rgba(0, 0, 0, 0.2)),
        rgba(2, 6, 23, 0.72);
    padding: 1rem;
}

.creator-live-meter span[b-otdgx9nfci] {
    display: block;
    min-height: 36px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #fff7d7, var(--wl-gold) 42%, #14b8a6);
    box-shadow: 0 0 20px rgba(20, 184, 166, 0.22);
}

.creator-live-meter span:nth-child(1)[b-otdgx9nfci] { height: 34%; }
.creator-live-meter span:nth-child(2)[b-otdgx9nfci] { height: 68%; }
.creator-live-meter span:nth-child(3)[b-otdgx9nfci] { height: 52%; }
.creator-live-meter span:nth-child(4)[b-otdgx9nfci] { height: 88%; }
.creator-live-meter span:nth-child(5)[b-otdgx9nfci] { height: 46%; }

.creator-live-panel[b-otdgx9nfci],
.creator-command-deck[b-otdgx9nfci],
.creator-format-card[b-otdgx9nfci] {
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(var(--wl-contrast-rgb), 0.045), rgba(var(--wl-bg-secondary-rgb), 0.72));
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}

.creator-live-panel[b-otdgx9nfci] {
    min-height: 8rem;
    padding: 1.5rem;
}

.creator-command-deck[b-otdgx9nfci] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
    gap: 1.25rem;
    padding: 1.25rem;
}

.creator-command-copy[b-otdgx9nfci] {
    display: grid;
    align-content: center;
    gap: 0.8rem;
    min-height: 250px;
}

.creator-command-copy h2[b-otdgx9nfci] {
    margin: 0;
    color: #fff7d7;
    font-size: 2.25rem;
    line-height: 1.08;
}

.creator-command-copy p[b-otdgx9nfci] {
    max-width: 64ch;
    margin: 0;
    color: rgba(var(--wl-contrast-rgb), 0.72);
    line-height: 1.62;
}

.creator-command-stats[b-otdgx9nfci] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.creator-command-stats span[b-otdgx9nfci] {
    display: grid;
    gap: 0.25rem;
    min-height: 4.4rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.17);
    color: rgba(var(--wl-contrast-rgb), 0.82);
    padding: 0.85rem;
}

.creator-command-stats strong[b-otdgx9nfci] {
    color: var(--wl-gold);
    font-size: 0.76rem;
    text-transform: uppercase;
}

.creator-launch-console[b-otdgx9nfci] {
    display: grid;
    align-content: stretch;
    gap: 0.9rem;
}

.creator-console-screen[b-otdgx9nfci] {
    display: grid;
    align-content: end;
    gap: 0.55rem;
    min-height: 210px;
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(0deg, rgba(20, 184, 166, 0.16), transparent 54%),
        linear-gradient(135deg, rgba(244, 114, 182, 0.09), rgba(2, 6, 23, 0.92));
    padding: 1rem;
}

.creator-console-screen span[b-otdgx9nfci],
.creator-console-screen small[b-otdgx9nfci] {
    color: rgba(var(--wl-contrast-rgb), 0.64);
}

.creator-console-screen strong[b-otdgx9nfci] {
    color: #fff7d7;
    font-size: 2rem;
    line-height: 1.05;
}

.creator-live-error[b-otdgx9nfci] {
    margin: 0;
    color: #fda4af;
}

.creator-launch-button[b-otdgx9nfci] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 3.05rem;
    border: 1px solid rgba(20, 184, 166, 0.46);
    border-radius: 8px;
    background: linear-gradient(135deg, #14b8a6, #f6d365);
    color: #081313;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(20, 184, 166, 0.18);
    transition: transform 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

.creator-launch-button:hover[b-otdgx9nfci] {
    transform: translateY(-2px);
    filter: brightness(1.04);
}

.creator-launch-button:disabled[b-otdgx9nfci] {
    cursor: wait;
    opacity: 0.68;
}

.creator-launch-light[b-otdgx9nfci] {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: #052e2b;
    box-shadow: 0 0 10px rgba(5, 46, 43, 0.65);
}

.creator-format-grid[b-otdgx9nfci] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem;
}

.creator-format-card[b-otdgx9nfci] {
    display: grid;
    gap: 0.65rem;
    min-height: 190px;
    color: var(--wl-text-primary);
    text-align: left;
    cursor: pointer;
    padding: 1rem;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.creator-format-card:hover[b-otdgx9nfci],
.creator-format-card:focus-visible[b-otdgx9nfci] {
    transform: translateY(-3px);
    border-color: rgba(20, 184, 166, 0.44);
    outline: none;
}

.creator-format-card--active[b-otdgx9nfci] {
    border-color: rgba(var(--wl-gold-rgb), 0.45);
    background:
        linear-gradient(145deg, rgba(var(--wl-gold-rgb), 0.12), rgba(20, 184, 166, 0.08)),
        rgba(0, 0, 0, 0.18);
}

.creator-format-icon[b-otdgx9nfci] {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.34);
    border-radius: 8px;
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-gold);
    font-weight: 900;
}

.creator-format-card strong[b-otdgx9nfci] {
    color: #fff7d7;
    font-size: 1.08rem;
}

.creator-format-card span:not(.creator-format-icon)[b-otdgx9nfci],
.creator-format-card small[b-otdgx9nfci] {
    color: rgba(var(--wl-contrast-rgb), 0.68);
    line-height: 1.45;
}

.creator-format-card small[b-otdgx9nfci] {
    align-self: end;
    color: #fda4af;
    font-weight: 800;
}

@media (max-width: 980px) {
    .creator-live-hero[b-otdgx9nfci],
    .creator-command-deck[b-otdgx9nfci] {
        grid-template-columns: 1fr;
    }

    .creator-live-meter[b-otdgx9nfci] {
        min-height: 130px;
    }
}

@media (max-width: 720px) {
    .creator-live[b-otdgx9nfci] {
        padding: 1rem 1rem 8rem;
    }

    .creator-live-hero[b-otdgx9nfci] {
        padding: 1.25rem;
    }

    .creator-live-hero h1[b-otdgx9nfci] {
        font-size: 2.35rem;
    }

    .creator-command-copy h2[b-otdgx9nfci] {
        font-size: 1.7rem;
    }

    .creator-command-stats[b-otdgx9nfci] {
        grid-template-columns: 1fr;
    }

    .creator-format-grid[b-otdgx9nfci] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .creator-launch-button[b-otdgx9nfci],
    .creator-format-card[b-otdgx9nfci] {
        transition: none;
    }

    .creator-launch-button:hover[b-otdgx9nfci],
    .creator-format-card:hover[b-otdgx9nfci],
    .creator-format-card:focus-visible[b-otdgx9nfci] {
        transform: none;
    }
}
/* /Components/Pages/Career/Creator/Session.razor.rz.scp.css */
.creator-session[b-v4bzvbyag3] {
    display: grid;
    gap: 1.5rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
    color: var(--wl-text-primary);
    letter-spacing: 0;
}

.creator-report-state[b-v4bzvbyag3],
.creator-report-hero[b-v4bzvbyag3],
.creator-fallout-strip article[b-v4bzvbyag3],
.creator-report-panel[b-v4bzvbyag3] {
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(var(--wl-contrast-rgb), 0.045), rgba(var(--wl-bg-secondary-rgb), 0.72));
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}

.creator-tooltip-trigger[b-v4bzvbyag3] {
    cursor: help;
}

.creator-tooltip-trigger:hover[b-v4bzvbyag3] {
    border-color: rgba(var(--wl-gold-rgb), 0.34);
}

.creator-report-state[b-v4bzvbyag3] {
    min-height: 8rem;
    padding: 1.5rem;
}

.creator-report-hero[b-v4bzvbyag3] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(20, 184, 166, 0.14), transparent 42%),
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.16), rgba(var(--wl-bg-secondary-rgb), 0.86));
    padding: 2rem;
}

.creator-report-hero[b-v4bzvbyag3]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8), transparent 82%);
}

.creator-report-hero > *[b-v4bzvbyag3] {
    position: relative;
    z-index: 1;
}

.creator-section-kicker[b-v4bzvbyag3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-gold);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.creator-report-hero h1[b-v4bzvbyag3] {
    max-width: 18ch;
    margin: 0.65rem 0 0.75rem;
    color: #fff7d7;
    font-size: 3rem;
    line-height: 1;
    font-weight: 900;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.creator-report-hero p[b-v4bzvbyag3] {
    margin: 0;
    color: rgba(var(--wl-contrast-rgb), 0.68);
    font-weight: 700;
}

.creator-report-score[b-v4bzvbyag3] {
    display: grid;
    place-items: center;
    align-self: stretch;
    min-width: 170px;
    border: 1px solid rgba(20, 184, 166, 0.3);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(20, 184, 166, 0.14), rgba(0, 0, 0, 0.2)),
        rgba(2, 6, 23, 0.72);
    padding: 1rem;
}

.creator-report-score span[b-v4bzvbyag3] {
    color: rgba(var(--wl-contrast-rgb), 0.62);
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
}

.creator-report-score strong[b-v4bzvbyag3] {
    color: #fff7d7;
    font-size: 3.3rem;
    line-height: 1;
}

.creator-fallout-strip[b-v4bzvbyag3] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.creator-fallout-strip article[b-v4bzvbyag3] {
    display: grid;
    gap: 0.45rem;
    min-height: 128px;
    padding: 1rem;
}

.creator-fallout-strip span[b-v4bzvbyag3],
.creator-fallout-strip small[b-v4bzvbyag3],
.creator-section-head p[b-v4bzvbyag3],
.creator-delta-list span[b-v4bzvbyag3],
.creator-report-clips span[b-v4bzvbyag3],
.creator-report-clips small[b-v4bzvbyag3],
.creator-empty-list[b-v4bzvbyag3] {
    color: rgba(var(--wl-contrast-rgb), 0.62);
}

.creator-fallout-strip strong[b-v4bzvbyag3] {
    color: #fff7d7;
    font-size: 1.45rem;
}

.creator-report-grid[b-v4bzvbyag3] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.8fr) minmax(320px, 1.1fr);
    gap: 1rem;
}

.creator-report-panel[b-v4bzvbyag3] {
    padding: 1.25rem;
}

.creator-section-head[b-v4bzvbyag3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.creator-section-head h2[b-v4bzvbyag3] {
    margin: 0.25rem 0 0;
    color: #fff7d7;
}

.creator-delta-list[b-v4bzvbyag3] {
    display: grid;
    gap: 0.75rem;
}

.creator-quality-list[b-v4bzvbyag3] {
    display: grid;
    gap: 0.55rem;
}

.creator-quality-item[b-v4bzvbyag3],
.creator-delta-list div[b-v4bzvbyag3],
.creator-mastery-row[b-v4bzvbyag3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.35rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
    padding: 0.75rem 0.9rem;
}

.creator-quality-item span[b-v4bzvbyag3],
.creator-mastery-row span[b-v4bzvbyag3],
.creator-mastery-row small[b-v4bzvbyag3] {
    color: rgba(var(--wl-contrast-rgb), 0.62);
}

.creator-quality-item strong[b-v4bzvbyag3] {
    color: rgba(var(--wl-contrast-rgb), 0.86);
}

.creator-quality-item--positive strong[b-v4bzvbyag3] {
    color: #14b8a6;
}

.creator-quality-item--negative strong[b-v4bzvbyag3] {
    color: #fda4af;
}

.creator-mastery-row[b-v4bzvbyag3] {
    display: grid;
    grid-template-columns: 1fr auto;
    margin-top: 0.85rem;
    border-color: rgba(var(--wl-gold-rgb), 0.22);
    background: rgba(var(--wl-gold-rgb), 0.06);
}

.creator-mastery-row strong[b-v4bzvbyag3] {
    color: var(--wl-gold);
}

.creator-mastery-row small[b-v4bzvbyag3] {
    grid-column: 1 / -1;
}

.creator-delta-list strong[b-v4bzvbyag3] {
    color: var(--wl-gold);
    font-size: 1.1rem;
}

.creator-empty-list[b-v4bzvbyag3] {
    min-height: 9rem;
    display: grid;
    align-content: center;
    border: 1px dashed rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 8px;
    padding: 1rem;
}

.creator-report-clips[b-v4bzvbyag3] {
    display: grid;
    gap: 0.75rem;
}

.creator-report-clips article[b-v4bzvbyag3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    min-height: 4rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
    padding: 0.8rem 0.95rem;
}

.creator-report-clips strong[b-v4bzvbyag3] {
    color: #14b8a6;
    font-size: 1.15rem;
}

@media (max-width: 980px) {
    .creator-report-hero[b-v4bzvbyag3],
    .creator-report-grid[b-v4bzvbyag3] {
        grid-template-columns: 1fr;
    }

    .creator-fallout-strip[b-v4bzvbyag3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .creator-report-score[b-v4bzvbyag3] {
        min-height: 150px;
    }
}

@media (max-width: 720px) {
    .creator-session[b-v4bzvbyag3] {
        padding: 1rem 1rem 8rem;
    }

    .creator-report-hero[b-v4bzvbyag3] {
        padding: 1.25rem;
    }

    .creator-report-hero h1[b-v4bzvbyag3] {
        font-size: 2.15rem;
    }

    .creator-fallout-strip[b-v4bzvbyag3] {
        grid-template-columns: 1fr;
    }

    .creator-report-clips article[b-v4bzvbyag3] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Career/Creator/Videos/New.razor.rz.scp.css */
.creator-video-new[b-58titdygy9] {
    display: grid;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
    color: var(--wl-text-primary);
    letter-spacing: 0;
}

.creator-video-hero[b-58titdygy9] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.38fr);
    gap: 1.5rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(20, 184, 166, 0.14), transparent 40%),
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15), rgba(var(--wl-bg-secondary-rgb), 0.84));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34), inset 0 0 80px rgba(0, 0, 0, 0.24);
    padding: 2rem;
}

.creator-video-hero[b-58titdygy9]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8), transparent 82%);
}

.creator-video-hero > *[b-58titdygy9] {
    position: relative;
    z-index: 1;
}

.creator-section-kicker[b-58titdygy9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-gold);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.creator-video-hero h1[b-58titdygy9] {
    max-width: 12ch;
    margin: 0.65rem 0 0;
    color: #fff7d7;
    font-size: 3rem;
    line-height: 0.98;
    font-weight: 900;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.creator-video-hero p[b-58titdygy9] {
    max-width: 48rem;
    margin: 1rem 0 0;
    color: rgba(var(--wl-contrast-rgb), 0.76);
    font-size: 1.02rem;
    line-height: 1.6;
}

.creator-video-scope[b-58titdygy9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 0.6rem;
    min-height: 150px;
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(20, 184, 166, 0.12), rgba(0, 0, 0, 0.2)),
        rgba(2, 6, 23, 0.72);
    padding: 1rem;
}

.creator-video-scope span[b-58titdygy9] {
    display: block;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #fff7d7, var(--wl-gold) 42%, #14b8a6);
}

.creator-video-scope span:nth-child(1)[b-58titdygy9] { height: 42%; }
.creator-video-scope span:nth-child(2)[b-58titdygy9] { height: 82%; }
.creator-video-scope span:nth-child(3)[b-58titdygy9] { height: 58%; }

.creator-video-panel[b-58titdygy9],
.creator-video-console[b-58titdygy9],
.creator-video-blueprint[b-58titdygy9],
.creator-archetype-card[b-58titdygy9] {
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(var(--wl-contrast-rgb), 0.045), rgba(var(--wl-bg-secondary-rgb), 0.72));
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}

.creator-video-panel[b-58titdygy9] {
    min-height: 8rem;
    padding: 1.5rem;
}

.creator-video-console[b-58titdygy9] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: end;
    gap: 0.9rem;
    padding: 1.25rem;
}

.creator-title-field[b-58titdygy9] {
    display: grid;
    gap: 0.45rem;
}

.creator-title-field span[b-58titdygy9] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-weight: 800;
}

.creator-input[b-58titdygy9] {
    min-height: 2.9rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.24);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.24);
    color: var(--wl-text-primary);
    padding: 0 0.85rem;
}

.creator-video-error[b-58titdygy9] {
    grid-column: 1 / -1;
    margin: 0;
    color: #fda4af;
}

.creator-video-blueprint[b-58titdygy9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
    gap: 1rem;
    align-items: center;
    overflow: hidden;
    padding: 1.25rem;
}

.creator-video-blueprint h2[b-58titdygy9] {
    margin: 0.4rem 0 0;
    color: #fff7d7;
    font-size: 1.55rem;
    line-height: 1.1;
}

.creator-video-blueprint p[b-58titdygy9] {
    max-width: 62ch;
    margin: 0.55rem 0 0;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    line-height: 1.55;
}

.creator-video-modifiers[b-58titdygy9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.creator-video-modifiers span[b-58titdygy9],
.creator-archetype-traits small[b-58titdygy9],
.creator-archetype-topline small[b-58titdygy9] {
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.09);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.72);
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.5rem 0.6rem;
}

.creator-tooltip-trigger[b-58titdygy9] {
    cursor: help;
}

.creator-video-modifiers .creator-tooltip-trigger[b-58titdygy9] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.creator-video-modifiers .creator-tooltip-trigger:hover[b-58titdygy9],
.creator-video-modifiers .creator-tooltip-trigger:focus-visible[b-58titdygy9] {
    border-color: rgba(var(--wl-gold-rgb), 0.34);
}

.creator-video-modifiers small[b-58titdygy9] {
    display: inline-grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.32);
    border-radius: 50%;
    color: var(--wl-gold);
    font-size: 0.72rem;
    line-height: 1;
}

.creator-video-section-head[b-58titdygy9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.5rem;
}

.creator-start-button[b-58titdygy9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 2.9rem;
    border: 1px solid rgba(20, 184, 166, 0.46);
    border-radius: 8px;
    background: linear-gradient(135deg, #14b8a6, #f6d365);
    color: #081313;
    font-weight: 900;
    cursor: pointer;
    padding: 0 1.15rem;
    box-shadow: 0 12px 30px rgba(20, 184, 166, 0.18);
    transition: transform 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
}

.creator-start-button:hover[b-58titdygy9] {
    transform: translateY(-2px);
    filter: brightness(1.04);
}

.creator-start-button:disabled[b-58titdygy9] {
    cursor: wait;
    opacity: 0.68;
}

.creator-launch-light[b-58titdygy9] {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 50%;
    background: #052e2b;
    box-shadow: 0 0 10px rgba(5, 46, 43, 0.65);
}

.creator-video-archetypes[b-58titdygy9],
.creator-record-actions[b-58titdygy9],
.creator-record-stats[b-58titdygy9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
}

.creator-record-step[b-58titdygy9],
.creator-video-archetypes button[b-58titdygy9],
.creator-record-actions button[b-58titdygy9] {
    min-height: 96px;
}

.creator-archetype-card[b-58titdygy9] {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 0.8rem;
    color: var(--wl-text-primary);
    text-align: left;
    cursor: pointer;
    min-height: 178px;
    padding: 1rem;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.creator-archetype-card:hover[b-58titdygy9],
.creator-archetype-card:focus-visible[b-58titdygy9] {
    transform: translateY(-3px);
    border-color: rgba(20, 184, 166, 0.44);
    outline: none;
}

.creator-archetype-card--active[b-58titdygy9] {
    border-color: rgba(var(--wl-gold-rgb), 0.45);
    background:
        linear-gradient(145deg, rgba(var(--wl-gold-rgb), 0.12), rgba(20, 184, 166, 0.08)),
        rgba(0, 0, 0, 0.18);
}

.creator-archetype-card strong[b-58titdygy9] {
    color: #fff7d7;
    font-size: 1.08rem;
}

.creator-archetype-topline[b-58titdygy9] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.75rem;
}

.creator-archetype-topline small[b-58titdygy9] {
    flex: 0 0 auto;
    color: var(--wl-gold);
    padding: 0.35rem 0.5rem;
}

.creator-archetype-card span[b-58titdygy9] {
    color: rgba(var(--wl-contrast-rgb), 0.68);
    line-height: 1.45;
}

.creator-archetype-traits[b-58titdygy9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
    gap: 0.45rem;
    align-self: end;
}

.creator-archetype-traits small[b-58titdygy9] {
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    text-align: left;
    white-space: normal;
}

@media (max-width: 860px) {
    .creator-video-hero[b-58titdygy9],
    .creator-video-console[b-58titdygy9],
    .creator-video-blueprint[b-58titdygy9] {
        grid-template-columns: 1fr;
    }

    .creator-start-button[b-58titdygy9] {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .creator-video-new[b-58titdygy9] {
        padding: 1rem 1rem 8rem;
    }

    .creator-video-hero[b-58titdygy9] {
        padding: 1.25rem;
    }

    .creator-video-hero h1[b-58titdygy9] {
        font-size: 2.35rem;
    }

    .creator-video-modifiers[b-58titdygy9] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .creator-start-button[b-58titdygy9],
    .creator-archetype-card[b-58titdygy9] {
        transition: none;
    }

    .creator-start-button:hover[b-58titdygy9],
    .creator-archetype-card:hover[b-58titdygy9],
    .creator-archetype-card:focus-visible[b-58titdygy9] {
        transform: none;
    }
}
/* /Components/Pages/Career/Creator/Videos/Record.razor.rz.scp.css */
.creator-record[b-ujgy8tsny1] {
    display: grid;
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
    color: var(--wl-text-primary);
    letter-spacing: 0;
}

.creator-record-hero[b-ujgy8tsny1] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 0.24fr);
    align-items: stretch;
    gap: 1rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(20, 184, 166, 0.14), transparent 40%),
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15), rgba(var(--wl-bg-secondary-rgb), 0.84));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34), inset 0 0 80px rgba(0, 0, 0, 0.24);
    padding: 1.5rem;
}

.creator-record-hero[b-ujgy8tsny1]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.8), transparent 82%);
}

.creator-record-hero > *[b-ujgy8tsny1] {
    position: relative;
    z-index: 1;
}

.creator-section-kicker[b-ujgy8tsny1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-gold);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.creator-record-hero h1[b-ujgy8tsny1] {
    margin: 0.55rem 0 0;
    color: #fff7d7;
    font-size: 2.6rem;
    line-height: 1;
    font-weight: 900;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.creator-record-hero p[b-ujgy8tsny1] {
    max-width: 58rem;
    margin: 0.85rem 0 0;
    color: rgba(var(--wl-contrast-rgb), 0.74);
    line-height: 1.58;
}

.creator-record-hero-chips[b-ujgy8tsny1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.creator-record-hero-chips span[b-ujgy8tsny1],
.creator-record-history-head small[b-ujgy8tsny1] {
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
    color: rgba(var(--wl-contrast-rgb), 0.72);
    font-size: 0.82rem;
    font-weight: 800;
    padding: 0.45rem 0.58rem;
}

.creator-record-energy[b-ujgy8tsny1] {
    display: grid;
    align-content: center;
    gap: 0.35rem;
    min-height: 110px;
    border: 1px solid rgba(20, 184, 166, 0.28);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(20, 184, 166, 0.12), rgba(0, 0, 0, 0.2)),
        rgba(2, 6, 23, 0.72);
    padding: 1rem;
}

.creator-record-energy span[b-ujgy8tsny1] {
    color: rgba(var(--wl-contrast-rgb), 0.64);
    font-weight: 800;
}

.creator-record-energy strong[b-ujgy8tsny1] {
    color: #fff7d7;
    font-size: 2rem;
}

.creator-record-energy small[b-ujgy8tsny1] {
    color: rgba(var(--wl-contrast-rgb), 0.58);
    line-height: 1.35;
}

.creator-record-panel[b-ujgy8tsny1],
.creator-record-stats article[b-ujgy8tsny1],
.creator-record-readiness[b-ujgy8tsny1],
.creator-action-card[b-ujgy8tsny1],
.creator-record-controls[b-ujgy8tsny1],
.creator-record-history[b-ujgy8tsny1],
.creator-record-step[b-ujgy8tsny1] {
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(var(--wl-contrast-rgb), 0.045), rgba(var(--wl-bg-secondary-rgb), 0.72));
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}

.creator-record-panel[b-ujgy8tsny1] {
    min-height: 8rem;
    padding: 1.5rem;
}

.creator-record-error[b-ujgy8tsny1] {
    margin: 0;
    color: #fda4af;
}

.creator-video-archetypes[b-ujgy8tsny1],
.creator-record-actions[b-ujgy8tsny1],
.creator-record-stats[b-ujgy8tsny1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.75rem;
}

.creator-record-step[b-ujgy8tsny1],
.creator-video-archetypes button[b-ujgy8tsny1],
.creator-record-actions button[b-ujgy8tsny1] {
    min-height: 112px;
}

.creator-record-readiness[b-ujgy8tsny1] {
    display: grid;
    grid-template-columns: minmax(150px, 0.26fr) minmax(0, 1fr) minmax(220px, 0.34fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.creator-record-readiness > div:first-child[b-ujgy8tsny1] {
    display: grid;
    gap: 0.25rem;
}

.creator-record-readiness span[b-ujgy8tsny1],
.creator-record-readiness small[b-ujgy8tsny1] {
    color: rgba(var(--wl-contrast-rgb), 0.62);
}

.creator-record-readiness strong[b-ujgy8tsny1] {
    color: #fff7d7;
    font-size: 1.35rem;
}

.creator-record-readiness-bar[b-ujgy8tsny1] {
    overflow: hidden;
    height: 0.82rem;
    border: 1px solid rgba(20, 184, 166, 0.22);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.26);
}

.creator-record-readiness-bar span[b-ujgy8tsny1] {
    display: block;
    width: var(--progress);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, var(--wl-gold));
    box-shadow: 0 0 18px rgba(20, 184, 166, 0.34);
}

.creator-record-stats article[b-ujgy8tsny1] {
    display: grid;
    gap: 0.55rem;
    padding: 1rem;
}

.creator-tooltip-trigger[b-ujgy8tsny1] {
    cursor: help;
}

.creator-tooltip-trigger:hover[b-ujgy8tsny1],
.creator-tooltip-trigger:focus-visible[b-ujgy8tsny1] {
    border-color: rgba(var(--wl-gold-rgb), 0.34);
}

.creator-record-stats span[b-ujgy8tsny1],
.creator-record-deltas span[b-ujgy8tsny1],
.creator-record-empty[b-ujgy8tsny1] {
    color: rgba(var(--wl-contrast-rgb), 0.62);
}

.creator-stat-label[b-ujgy8tsny1] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.creator-stat-label small[b-ujgy8tsny1] {
    display: inline-grid;
    place-items: center;
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.32);
    border-radius: 50%;
    color: var(--wl-gold);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}

.creator-record-stats strong[b-ujgy8tsny1] {
    color: #fff7d7;
    font-size: 1.5rem;
}

.creator-stat-card[b-ujgy8tsny1] {
    position: relative;
    overflow: hidden;
}

.creator-stat-card[b-ujgy8tsny1]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-left: 3px solid rgba(20, 184, 166, 0.78);
}

.creator-stat-card--heat[b-ujgy8tsny1]::before {
    border-left-color: rgba(var(--wl-gold-rgb), 0.82);
}

.creator-stat-card--fatigue[b-ujgy8tsny1]::before {
    border-left-color: rgba(251, 146, 60, 0.82);
}

.creator-stat-card--risk[b-ujgy8tsny1]::before {
    border-left-color: rgba(244, 114, 182, 0.82);
}

.creator-record-stats meter[b-ujgy8tsny1] {
    width: 100%;
    height: 0.55rem;
    accent-color: #14b8a6;
}

.creator-action-card[b-ujgy8tsny1] {
    display: grid;
    grid-template-rows: auto auto auto auto auto;
    gap: 0.72rem;
    color: var(--wl-text-primary);
    text-align: left;
    cursor: pointer;
    padding: 1.05rem;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.creator-action-card:hover[b-ujgy8tsny1],
.creator-action-card:focus-visible[b-ujgy8tsny1] {
    transform: translateY(-3px);
    border-color: rgba(20, 184, 166, 0.44);
    outline: none;
}

.creator-action-card:disabled[b-ujgy8tsny1] {
    cursor: wait;
    opacity: 0.68;
}

.creator-action-card--safe[b-ujgy8tsny1] {
    border-color: rgba(20, 184, 166, 0.28);
}

.creator-action-card--standard[b-ujgy8tsny1] {
    border-color: rgba(var(--wl-gold-rgb), 0.32);
}

.creator-action-card--risk[b-ujgy8tsny1] {
    border-color: rgba(244, 114, 182, 0.34);
}

.creator-action-topline[b-ujgy8tsny1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
}

.creator-action-topline > span[b-ujgy8tsny1] {
    color: var(--wl-gold);
    font-weight: 900;
}

.creator-action-chance[b-ujgy8tsny1] {
    flex: 0 0 auto;
    display: grid;
    justify-items: end;
    gap: 0.08rem;
    min-width: 5.8rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.48);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.18), rgba(20, 184, 166, 0.08)),
        rgba(0, 0, 0, 0.28);
    box-shadow: inset 0 0 18px rgba(var(--wl-gold-rgb), 0.08), 0 0 20px rgba(0, 0, 0, 0.18);
    padding: 0.48rem 0.62rem;
}

.creator-action-chance span[b-ujgy8tsny1] {
    color: rgba(var(--wl-contrast-rgb), 0.66);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.creator-action-chance strong[b-ujgy8tsny1] {
    color: #fff7d7;
    font-size: 1.08rem;
    line-height: 1;
}

.creator-action-card > strong[b-ujgy8tsny1] {
    color: #fff7d7;
    font-size: 1.12rem;
    line-height: 1.35;
}

.creator-action-description[b-ujgy8tsny1] {
    color: rgba(var(--wl-contrast-rgb), 0.74);
    line-height: 1.42;
}

.creator-action-impact[b-ujgy8tsny1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.creator-action-outcome[b-ujgy8tsny1] {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
    min-height: 4.6rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    padding: 0.62rem;
}

.creator-action-outcome--success[b-ujgy8tsny1] {
    border-color: rgba(20, 184, 166, 0.24);
    background: linear-gradient(180deg, rgba(20, 184, 166, 0.12), rgba(0, 0, 0, 0.18));
}

.creator-action-outcome--failure[b-ujgy8tsny1] {
    border-color: rgba(244, 114, 182, 0.24);
    background: linear-gradient(180deg, rgba(244, 114, 182, 0.1), rgba(0, 0, 0, 0.18));
}

.creator-action-outcome > span[b-ujgy8tsny1] {
    color: rgba(var(--wl-contrast-rgb), 0.58);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.creator-action-outcome strong[b-ujgy8tsny1] {
    color: #fff7d7;
    font-size: 0.95rem;
    line-height: 1.25;
}

.creator-action-outcome small[b-ujgy8tsny1] {
    color: rgba(var(--wl-contrast-rgb), 0.66);
    font-weight: 800;
    line-height: 1.2;
}

.creator-action-metrics[b-ujgy8tsny1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    align-self: end;
}

.creator-action-metrics small[b-ujgy8tsny1] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-height: 2.25rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
    color: rgba(var(--wl-contrast-rgb), 0.62);
    font-size: 0.8rem;
    font-weight: 800;
    padding: 0.45rem 0.55rem;
    text-align: left;
    white-space: normal;
}

.creator-action-metrics strong[b-ujgy8tsny1] {
    color: #fff7d7;
    font-size: 0.95rem;
    line-height: 1;
}

.creator-record-section-head[b-ujgy8tsny1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 1.5rem;
}

.creator-record-controls[b-ujgy8tsny1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem;
}

.creator-primary[b-ujgy8tsny1],
.creator-secondary[b-ujgy8tsny1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-width: min(100%, 180px);
    min-height: 2.75rem;
    border-radius: 8px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.creator-primary[b-ujgy8tsny1] {
    border: 1px solid rgba(20, 184, 166, 0.45);
    background: linear-gradient(135deg, #14b8a6, #f6d365);
    color: #081313;
    padding: 0 1.2rem;
    box-shadow: 0 12px 30px rgba(20, 184, 166, 0.18);
}

.creator-secondary[b-ujgy8tsny1] {
    border: 1px solid rgba(var(--wl-gold-rgb), 0.32);
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-gold);
    padding: 0 1rem;
}

.creator-primary:hover[b-ujgy8tsny1],
.creator-secondary:hover[b-ujgy8tsny1] {
    transform: translateY(-2px);
    border-color: rgba(var(--wl-gold-rgb), 0.65);
}

.creator-primary:disabled[b-ujgy8tsny1],
.creator-secondary:disabled[b-ujgy8tsny1] {
    cursor: wait;
    opacity: 0.68;
}

.creator-button-light[b-ujgy8tsny1] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #052e2b;
    box-shadow: 0 0 10px rgba(5, 46, 43, 0.65);
}

.creator-record-history[b-ujgy8tsny1] {
    display: grid;
    gap: 0.65rem;
    padding: 1rem;
}

.creator-record-history-head[b-ujgy8tsny1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.creator-record-history-head small[b-ujgy8tsny1] {
    color: rgba(var(--wl-contrast-rgb), 0.64);
}

.creator-record-empty[b-ujgy8tsny1] {
    min-height: 5rem;
    display: grid;
    align-items: center;
    border: 1px dashed rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 8px;
    padding: 1rem;
}

.creator-record-step[b-ujgy8tsny1] {
    display: grid;
    grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.9rem 1rem;
}

.creator-record-step--kept[b-ujgy8tsny1] {
    border-color: rgba(244, 114, 182, 0.28);
    opacity: 0.86;
}

.creator-record-step > div:first-child[b-ujgy8tsny1] {
    display: grid;
    gap: 0.25rem;
}

.creator-record-step span[b-ujgy8tsny1] {
    color: rgba(var(--wl-contrast-rgb), 0.72);
}

.creator-record-step strong[b-ujgy8tsny1] {
    color: #fff7d7;
}

.creator-record-step small[b-ujgy8tsny1] {
    color: rgba(var(--wl-contrast-rgb), 0.58);
}

.creator-record-deltas[b-ujgy8tsny1] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.creator-record-deltas span[b-ujgy8tsny1] {
    min-height: 2.5rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.16);
    padding: 0.55rem;
}

@media (max-width: 860px) {
    .creator-record-hero[b-ujgy8tsny1],
    .creator-record-step[b-ujgy8tsny1],
    .creator-record-readiness[b-ujgy8tsny1] {
        grid-template-columns: 1fr;
    }

    .creator-record-controls[b-ujgy8tsny1] {
        justify-content: stretch;
    }

    .creator-primary[b-ujgy8tsny1],
    .creator-secondary[b-ujgy8tsny1] {
        flex: 1;
    }
}

@media (max-width: 720px) {
    .creator-record[b-ujgy8tsny1] {
        padding: 1rem 1rem 8rem;
    }

    .creator-record-hero[b-ujgy8tsny1] {
        padding: 1.25rem;
    }

    .creator-record-hero h1[b-ujgy8tsny1] {
        font-size: 2rem;
    }

    .creator-record-deltas[b-ujgy8tsny1] {
        grid-template-columns: 1fr 1fr;
    }

    .creator-action-impact[b-ujgy8tsny1],
    .creator-action-metrics[b-ujgy8tsny1] {
        grid-template-columns: 1fr;
    }

    .creator-record-history-head[b-ujgy8tsny1] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .creator-primary[b-ujgy8tsny1],
    .creator-secondary[b-ujgy8tsny1],
    .creator-action-card[b-ujgy8tsny1] {
        transition: none;
    }

    .creator-primary:hover[b-ujgy8tsny1],
    .creator-secondary:hover[b-ujgy8tsny1],
    .creator-action-card:hover[b-ujgy8tsny1],
    .creator-action-card:focus-visible[b-ujgy8tsny1] {
        transform: none;
    }
}
/* /Components/Pages/Career/Entrepreneur/Company.razor.rz.scp.css */
/* Public company profile layout. Shared look from the global .ent-* atoms (Styles/app.css). */

.company-profile-shell[b-t8xrxn7eh0] { color: var(--wl-text-primary); }

.company-profile-hero[b-t8xrxn7eh0] { align-items: flex-end; }
.profile-tags[b-t8xrxn7eh0] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.company-profile-summary[b-t8xrxn7eh0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.85rem;
}
.summary-card strong[b-t8xrxn7eh0] { font-size: 1.15rem; overflow-wrap: anywhere; }

.company-stat-grid[b-t8xrxn7eh0] { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.company-stat-card strong[b-t8xrxn7eh0] { font-size: 1.5rem; }
/* /Components/Pages/Career/Entrepreneur/Create.razor.rz.scp.css */
/* Create-company layout. Shared look from the global .ent-* atoms (Styles/app.css). */

.entrepreneur-create-shell[b-kgpkqk0l6h] { color: var(--wl-text-primary); }

.create-layout[b-kgpkqk0l6h] { align-items: start; }

.create-card[b-kgpkqk0l6h],
.create-form[b-kgpkqk0l6h] { gap: 1.1rem; }

.create-summary[b-kgpkqk0l6h] { align-content: start; gap: 0.85rem; }

.summary-row[b-kgpkqk0l6h] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    border-radius: 9px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    background: rgba(var(--wl-contrast-rgb), 0.025);
}
.summary-row .ent-ic[b-kgpkqk0l6h] {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0.45rem;
    border-radius: 9px;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
}
.summary-row > div[b-kgpkqk0l6h] { display: grid; gap: 0.15rem; }
.summary-row span[b-kgpkqk0l6h] { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wl-text-secondary); }
.summary-row strong[b-kgpkqk0l6h] { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.create-industry-preview[b-kgpkqk0l6h] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    border-radius: 9px;
    border: 1px solid rgba(var(--ent-accent-rgb), 0.22);
    background: rgba(var(--ent-accent-rgb), 0.08);
}
.create-industry-preview .ent-ic[b-kgpkqk0l6h] {
    width: 2.2rem;
    height: 2.2rem;
    padding: 0.45rem;
    border-radius: 9px;
    color: var(--ent-accent-2);
    background: rgba(var(--ent-accent-rgb), 0.12);
    border: 1px solid rgba(var(--ent-accent-rgb), 0.28);
}
.create-industry-preview > div[b-kgpkqk0l6h] { display: grid; gap: 0.15rem; }
.create-industry-preview span[b-kgpkqk0l6h] { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wl-text-secondary); }
.create-industry-preview strong[b-kgpkqk0l6h] { font-size: 1.05rem; }
/* /Components/Pages/Career/Entrepreneur/Hiring.razor.rz.scp.css */
/* Recruitment (employer) hub. Shared look from the global .ent-* atoms (Styles/app.css). */

.hiring-shell[b-68wa5p8ohd] { color: var(--wl-text-primary); }

.jobs-stage[b-68wa5p8ohd] { display: block; }
.jobs-hero-panel[b-68wa5p8ohd] { gap: 1.25rem; }

.jobs-hero[b-68wa5p8ohd] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}
.jobs-company[b-68wa5p8ohd] { margin-top: 0.15rem; }
.hiring-hero-actions[b-68wa5p8ohd] { align-items: center; }

.jobs-command-bar[b-68wa5p8ohd] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}
.jobs-status-card strong[b-68wa5p8ohd] { font-size: 1.6rem; }

.section-shell[b-68wa5p8ohd] { gap: 1.1rem; align-content: start; }
.list-block[b-68wa5p8ohd] { gap: 0.75rem; }

.posting-card-header[b-68wa5p8ohd] { align-items: flex-start; }
.posting-card-header h4[b-68wa5p8ohd] { margin: 0; font-size: 1rem; font-weight: 800; }
.posting-card-header > div[b-68wa5p8ohd] { display: grid; gap: 0.2rem; min-width: 0; }

.offer-card-band[b-68wa5p8ohd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
    background: rgba(var(--wl-contrast-rgb), 0.03);
    font-size: 0.85rem;
}
.empty-note[b-68wa5p8ohd] { margin: 0; color: var(--wl-text-muted); font-size: 0.82rem; }

.application-list[b-68wa5p8ohd] { display: grid; gap: 0.6rem; }
.application-row[b-68wa5p8ohd] {
    display: grid;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
    background: rgba(var(--wl-contrast-rgb), 0.025);
}
.application-who[b-68wa5p8ohd] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; min-width: 0; }
.application-who strong[b-68wa5p8ohd] { font-size: 0.95rem; }

/* The applicant card reads as a candidate row: name + status, a stat line (fame /
   experience / max salary), then a single "Make an offer" CTA. The salary input
   itself lives in the offer modal, so rows never spread edge-to-edge. */
.application-employed[b-68wa5p8ohd] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.application-meta[b-68wa5p8ohd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    font-size: 0.82rem;
    color: var(--wl-text-secondary);
}
.application-stat[b-68wa5p8ohd] { display: inline-flex; align-items: center; gap: 0.3rem; }
.application-stat strong[b-68wa5p8ohd] { color: var(--wl-text-primary); font-weight: 700; }
.application-stat .ent-ic[b-68wa5p8ohd] { display: inline-flex; }
.application-stat .ent-ic svg[b-68wa5p8ohd] { width: 0.95rem; height: 0.95rem; }

.application-cta[b-68wa5p8ohd] { display: flex; }

/* Candidate recap inside the offer modal, above the salary field. */
.offer-modal-candidate[b-68wa5p8ohd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
    background: rgba(var(--wl-contrast-rgb), 0.03);
    font-size: 0.82rem;
    color: var(--wl-text-secondary);
}

.contract-list[b-68wa5p8ohd] { display: grid; gap: 0.6rem; }
.contract-row[b-68wa5p8ohd] { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.85rem; }
.contract-who[b-68wa5p8ohd] { display: grid; gap: 0.15rem; min-width: 0; }
.contract-who strong[b-68wa5p8ohd] { font-size: 0.95rem; }

p.empty-state-card[b-68wa5p8ohd] {
    margin: 0;
    padding: 1rem;
    border-radius: 9px;
    border: 1px dashed rgba(var(--wl-contrast-rgb), 0.14);
    background: rgba(var(--wl-contrast-rgb), 0.02);
    color: var(--wl-text-secondary);
    font-size: 0.88rem;
    text-align: center;
}

/* ---- create-posting modal ---- */
.posting-modal-backdrop[b-68wa5p8ohd] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    /* Page renders inside main.relative.z-0, so this fixed overlay sits below the fixed nav
       bars. Pad so the card stays in the visible gap (never under TopNavBar/MobileNav). */
    padding: 5rem 1.5rem 1.5rem;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(5px);
    animation: hiringModalFade-b-68wa5p8ohd 0.18s ease;
}
.posting-modal[b-68wa5p8ohd] {
    width: min(100%, 540px);
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
    display: grid;
    gap: 1.1rem;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(var(--ent-accent-rgb), 0.28);
    background: linear-gradient(160deg, rgba(var(--wl-bg-secondary-rgb), 0.98), rgba(var(--wl-bg-tertiary-rgb), 0.96));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: hiringModalRise-b-68wa5p8ohd 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.posting-modal-header[b-68wa5p8ohd] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.posting-modal-header .ent-panel-head-copy span[b-68wa5p8ohd] { color: var(--ent-accent-2); font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; }
.posting-modal-header h2[b-68wa5p8ohd] { margin: 0.2rem 0 0; font-size: 1.3rem; font-weight: 800; }
.modal-close-button[b-68wa5p8ohd] {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-secondary);
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
}
.modal-close-button:hover[b-68wa5p8ohd] { color: var(--wl-text-primary); border-color: rgba(var(--ent-accent-rgb), 0.5); }
.modal-close-button svg[b-68wa5p8ohd] { width: 1.2rem; height: 1.2rem; }
.posting-modal-form[b-68wa5p8ohd] { display: grid; gap: 1rem; }
.modal-action-row[b-68wa5p8ohd] { justify-content: flex-end; }

@keyframes hiringModalFade-b-68wa5p8ohd { from { opacity: 0; } to { opacity: 1; } }
@keyframes hiringModalRise-b-68wa5p8ohd { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 720px) {
    .jobs-command-bar[b-68wa5p8ohd] { grid-template-columns: 1fr; }
    .contract-row[b-68wa5p8ohd] { flex-direction: column; align-items: stretch; }
    .posting-modal-backdrop[b-68wa5p8ohd] { place-items: end center; padding: 4rem 0.6rem calc(5.25rem + env(safe-area-inset-bottom, 0px)); }
    .posting-modal[b-68wa5p8ohd] { width: 100%; max-height: calc(100dvh - 9.5rem); }
}
@media (prefers-reduced-motion: reduce) {
    .posting-modal-backdrop[b-68wa5p8ohd], .posting-modal[b-68wa5p8ohd] { animation: none; }
}
/* /Components/Pages/Career/Entrepreneur/Index.razor.rz.scp.css */
/* Dashboard-specific layout. Shared look comes from the global .ent-* atoms
   (Styles/app.css); these rules tune the page grid + required contract hooks. */

.entrepreneur-dashboard[b-7o9sml42u1] { color: var(--wl-text-primary); }

.entrepreneur-hero[b-7o9sml42u1] { min-height: 320px; }

.dashboard-actions[b-7o9sml42u1] { margin-top: 0.85rem; gap: 0.6rem; }

/* Four auditable KPIs: money earned, net result, reputation and quality. */
.metrics-grid[b-7o9sml42u1] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card strong[b-7o9sml42u1] { font-size: 1.6rem; }
.metric-card .metric-ic[b-7o9sml42u1] { color: var(--wl-text-secondary); }
.metric-card.ent-stat--danger[b-7o9sml42u1] {
    border-color: color-mix(in srgb, var(--wl-danger, #ef4444) 42%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--wl-danger, #ef4444) 8%, transparent), var(--wl-surface));
}

.ranking-grid[b-7o9sml42u1] { align-items: start; }
.ranking-head-ic[b-7o9sml42u1] { width: 1.4rem; height: 1.4rem; color: var(--wl-text-secondary); }

.ent-liability-callout[b-7o9sml42u1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 1rem 0;
    padding: 1.15rem 1.25rem;
    border: 1px solid color-mix(in srgb, var(--wl-danger, #ef4444) 38%, transparent);
    border-radius: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--wl-danger, #ef4444) 10%, var(--wl-surface)), var(--wl-surface));
}
.ent-liability-callout h2[b-7o9sml42u1] { margin: 0.2rem 0 0.35rem; font-size: 1.15rem; }
.ent-liability-callout p[b-7o9sml42u1] { margin: 0; color: var(--wl-text-secondary); }
.ent-liability-callout .ent-btn[b-7o9sml42u1] { flex: 0 0 auto; }
.ent-operation-message[b-7o9sml42u1] {
    margin: 0.75rem 0 1rem;
    padding: 0.8rem 1rem;
    border-radius: 12px;
    font-weight: 700;
}
.ent-operation-message.is-success[b-7o9sml42u1] { background: color-mix(in srgb, var(--wl-success, #22c55e) 13%, transparent); }
.ent-operation-message.is-error[b-7o9sml42u1] { background: color-mix(in srgb, var(--wl-danger, #ef4444) 13%, transparent); }

/* preview terminal (no company yet) reads as a dimmed demo */
.ent-terminal.is-preview[b-7o9sml42u1] { opacity: 0.9; }
.ent-terminal.is-preview .ent-terminal-tick[b-7o9sml42u1],
.ent-terminal.is-preview .ent-spark span[b-7o9sml42u1] { filter: saturate(0.7); }

@media (max-width: 680px) {
    .metrics-grid[b-7o9sml42u1] { grid-template-columns: 1fr; }
    .ent-liability-callout[b-7o9sml42u1] { align-items: stretch; flex-direction: column; }
    .ent-liability-callout .ent-btn[b-7o9sml42u1] { width: 100%; }
}

@media (min-width: 681px) and (max-width: 980px) {
    .metrics-grid[b-7o9sml42u1] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* /Components/Pages/Career/Entrepreneur/Jobs.razor.rz.scp.css */
/* Employment (worker) hub. Shared look from the global .ent-* atoms (Styles/app.css). */

.jobs-shell[b-5j6cfqupmn] { color: var(--wl-text-primary); }

.jobs-stage[b-5j6cfqupmn] { display: block; }
.jobs-hero-panel[b-5j6cfqupmn] { gap: 1.25rem; }

.jobs-hero[b-5j6cfqupmn] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.jobs-command-bar[b-5j6cfqupmn] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}
.jobs-status-card strong[b-5j6cfqupmn] { font-size: 1.6rem; }

.section-shell[b-5j6cfqupmn] { gap: 1.1rem; align-content: start; }
.list-block[b-5j6cfqupmn] { gap: 0.75rem; }

.posting-card-header[b-5j6cfqupmn] { align-items: flex-start; }
.posting-card-header h4[b-5j6cfqupmn] { margin: 0; font-size: 1rem; font-weight: 800; }
.posting-card-header > div[b-5j6cfqupmn] { display: grid; gap: 0.2rem; min-width: 0; }

.offer-card-band[b-5j6cfqupmn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
    background: rgba(var(--wl-contrast-rgb), 0.03);
    font-size: 0.85rem;
}

.contract-list[b-5j6cfqupmn] { display: grid; gap: 0.6rem; }
.contract-row[b-5j6cfqupmn] { flex-direction: row; align-items: center; justify-content: space-between; gap: 0.85rem; }
.contract-who[b-5j6cfqupmn] { display: grid; gap: 0.15rem; min-width: 0; }
.contract-who strong[b-5j6cfqupmn] { font-size: 0.95rem; }

.contract-inbox[b-5j6cfqupmn] { padding-top: 0.5rem; border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.06); }

p.empty-state-card[b-5j6cfqupmn] {
    margin: 0;
    padding: 1rem;
    border-radius: 9px;
    border: 1px dashed rgba(var(--wl-contrast-rgb), 0.14);
    background: rgba(var(--wl-contrast-rgb), 0.02);
    color: var(--wl-text-secondary);
    font-size: 0.88rem;
    text-align: center;
}

@media (max-width: 720px) {
    .jobs-command-bar[b-5j6cfqupmn] { grid-template-columns: 1fr; }
    .contract-row[b-5j6cfqupmn] { flex-direction: column; align-items: stretch; }
}
/* /Components/Pages/Career/Entrepreneur/Stock.razor.rz.scp.css */
/* Stock-listing layout. Shared look from the global .ent-* atoms (Styles/app.css). */

.stock-listing-shell[b-mwbmaczqsc] { color: var(--wl-text-primary); }

.stock-listing-hero[b-mwbmaczqsc] { align-items: flex-end; }

.listing-action-panel[b-mwbmaczqsc] { gap: 1.25rem; }

.listing-status-grid[b-mwbmaczqsc] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.listing-integrity-alert[b-mwbmaczqsc] {
    display: flex;
    gap: 0.8rem;
    align-items: flex-start;
    padding: 0.95rem 1rem;
    border: 1px solid color-mix(in srgb, #ef4444 48%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, #ef4444 9%, var(--wl-surface));
    color: var(--wl-text-primary);
}

.listing-integrity-alert .ent-ic[b-mwbmaczqsc] { color: #ef4444; flex: 0 0 auto; }
.listing-integrity-alert div[b-mwbmaczqsc] { display: grid; gap: 0.2rem; }
.listing-integrity-alert span[b-mwbmaczqsc] { color: var(--wl-text-secondary); font-size: 0.9rem; }

.ent-stat--fair[b-mwbmaczqsc] {
    border-color: color-mix(in srgb, #22c55e 35%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, #22c55e 7%, transparent), var(--wl-surface));
}

.ent-stat--warning[b-mwbmaczqsc] {
    border-color: color-mix(in srgb, #f59e0b 42%, transparent);
}

.valuation-note[b-mwbmaczqsc] {
    margin: -0.15rem 0 0;
    color: var(--wl-text-secondary);
    font-size: 0.9rem;
    line-height: 1.55;
}

.listing-action-layout[b-mwbmaczqsc] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 1.25rem;
    align-items: start;
}

.listing-cost[b-mwbmaczqsc] { align-self: start; }

.listing-form[b-mwbmaczqsc] { gap: 0.75rem; padding: 1.25rem; }

.ticker-input[b-mwbmaczqsc] {
    text-transform: uppercase;
    letter-spacing: 0.4em;
    font-weight: 800;
    font-size: 1.2rem;
    text-align: center;
}

@media (max-width: 780px) {
    .listing-action-layout[b-mwbmaczqsc] { grid-template-columns: 1fr; }
    .listing-status-grid[b-mwbmaczqsc] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Career/Entrepreneur/Tenders.razor.rz.scp.css */
.tender-page[b-l5k7ihb8pe] {
    position: relative;
    isolation: isolate;
    max-width: 1240px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 1rem 1rem 4rem;
    color: var(--wl-text-primary);
}

.tender-atmosphere[b-l5k7ihb8pe] {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 82% 6%, rgba(var(--wl-gold-rgb), .09), transparent 32%),
        radial-gradient(circle at 10% 52%, rgba(34, 211, 238, .045), transparent 28%);
}

.tender-loading[b-l5k7ihb8pe],
.tender-empty[b-l5k7ihb8pe] {
    display: flex;
    min-height: 52vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    text-align: center;
}

.tender-spinner[b-l5k7ihb8pe] {
    width: 34px;
    height: 34px;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: tender-spin-b-l5k7ihb8pe .7s linear infinite;
}
@keyframes tender-spin-b-l5k7ihb8pe { to { transform: rotate(360deg); } }
.tender-empty__icon[b-l5k7ihb8pe] { width: 52px; color: var(--wl-gold); }
.tender-empty h1[b-l5k7ihb8pe], .tender-empty h3[b-l5k7ihb8pe], .tender-empty p[b-l5k7ihb8pe] { margin: 0; }
.tender-empty p[b-l5k7ihb8pe] { max-width: 520px; color: var(--wl-text-muted); }
.tender-empty--compact[b-l5k7ihb8pe] { min-height: 180px; padding: 2rem; border: 1px dashed var(--wl-border-medium); border-radius: 16px; }

.tender-hero[b-l5k7ihb8pe] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
    gap: 2rem;
    align-items: end;
    padding: 2rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-gold-rgb), .25);
    border-radius: 20px;
    background:
        linear-gradient(125deg, rgba(var(--wl-bg-modal-deep-rgb), .97), rgba(var(--wl-bg-modal-rgb), .8)),
        radial-gradient(circle at 88% 20%, rgba(var(--wl-gold-rgb), .16), transparent 42%);
    box-shadow: 0 28px 70px rgba(0,0,0,.26);
}

.tender-back[b-l5k7ihb8pe] { color: var(--wl-text-muted); font-size: .72rem; text-decoration: none; }
.tender-back:hover[b-l5k7ihb8pe] { color: var(--wl-gold); }
.tender-kicker[b-l5k7ihb8pe] {
    display: block;
    margin-top: 1.7rem;
    color: var(--wl-gold);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.tender-hero h1[b-l5k7ihb8pe] {
    margin: .2rem 0;
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 4.6rem);
    line-height: .95;
    letter-spacing: .035em;
    text-transform: uppercase;
}
.tender-hero p[b-l5k7ihb8pe] { max-width: 680px; margin: .7rem 0 0; color: var(--wl-text-muted); line-height: 1.6; }

.tender-company-card[b-l5k7ihb8pe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .8rem;
    padding: 1.15rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 14px;
    background: rgba(var(--wl-bg-modal-deep-rgb), .54);
}
.tender-company-card > span[b-l5k7ihb8pe], .tender-company-card > strong[b-l5k7ihb8pe] { grid-column: 1 / -1; }
.tender-company-card > span[b-l5k7ihb8pe] { font-size: 1.15rem; font-weight: 800; }
.tender-company-card > strong[b-l5k7ihb8pe] { color: var(--wl-gold); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.tender-company-card div[b-l5k7ihb8pe] { display: flex; flex-direction: column; gap: .15rem; }
.tender-company-card div span[b-l5k7ihb8pe] { color: var(--wl-text-muted); font-size: .65rem; text-transform: uppercase; }
.tender-company-card div b[b-l5k7ihb8pe] { font-size: 1.3rem; font-variant-numeric: tabular-nums; }

.tender-contract[b-l5k7ihb8pe] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    margin: 1rem 0 2.6rem;
    overflow: hidden;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 14px;
    background: var(--wl-border-subtle);
}
.tender-contract div[b-l5k7ihb8pe] { display: flex; align-items: baseline; gap: .55rem; padding: .9rem 1rem; background: rgba(var(--wl-bg-modal-rgb), .94); }
.tender-contract strong[b-l5k7ihb8pe] { color: var(--wl-gold); font-size: 1.25rem; }
.tender-contract span[b-l5k7ihb8pe] { color: var(--wl-text-muted); font-size: .7rem; }
.tender-contract p[b-l5k7ihb8pe] { grid-column: 1 / -1; margin: 0; padding: .8rem 1rem; background: rgba(var(--wl-bg-modal-deep-rgb), .96); color: var(--wl-text-muted); font-size: .72rem; line-height: 1.5; }

.tender-toast[b-l5k7ihb8pe] { position: sticky; top: 1rem; z-index: 5; margin: 0 auto 1rem; padding: .8rem 1rem; border-radius: 10px; backdrop-filter: blur(16px); }
.tender-toast.is-success[b-l5k7ihb8pe] { border: 1px solid rgba(52,211,153,.3); background: rgba(6,78,59,.86); }
.tender-toast.is-error[b-l5k7ihb8pe] { border: 1px solid rgba(248,113,113,.35); background: rgba(127,29,29,.86); }

.tender-section[b-l5k7ihb8pe] { margin-top: 2.5rem; }
.tender-section__head[b-l5k7ihb8pe] { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; }
.tender-section__head span[b-l5k7ihb8pe] { color: var(--wl-gold); font-size: .62rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.tender-section__head h2[b-l5k7ihb8pe] { margin: .15rem 0 0; font-family: var(--font-display); font-size: 1.8rem; letter-spacing: .04em; text-transform: uppercase; }
.tender-section__head p[b-l5k7ihb8pe] { max-width: 520px; margin: 0; color: var(--wl-text-muted); font-size: .76rem; line-height: 1.5; text-align: right; }

.tender-grid[b-l5k7ihb8pe] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tender-card[b-l5k7ihb8pe] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(var(--wl-bg-modal-rgb), .94), rgba(var(--wl-bg-modal-deep-rgb), .8));
    box-shadow: 0 18px 44px rgba(0,0,0,.14);
}
.tender-card.has-bid[b-l5k7ihb8pe] { border-color: rgba(var(--wl-gold-rgb), .38); }
.tender-card__top[b-l5k7ihb8pe] { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.tender-lane[b-l5k7ihb8pe] { display: inline-flex; width: fit-content; padding: .25rem .55rem; border-radius: 999px; font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tender-lane.lane-rookie[b-l5k7ihb8pe] { color: #67e8f9; background: rgba(8,145,178,.14); border: 1px solid rgba(34,211,238,.2); }
.tender-lane.lane-established[b-l5k7ihb8pe] { color: var(--wl-gold); background: rgba(var(--wl-gold-rgb),.1); border: 1px solid rgba(var(--wl-gold-rgb),.22); }
.tender-deadline[b-l5k7ihb8pe] { color: var(--wl-text-muted); font-size: .7rem; }
.tender-card h3[b-l5k7ihb8pe] { margin: 0; font-size: 1.2rem; }
.tender-kpis[b-l5k7ihb8pe] { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.tender-kpis div[b-l5k7ihb8pe] { display: flex; min-width: 0; flex-direction: column; gap: .2rem; padding: .65rem; border-radius: 9px; background: rgba(var(--wl-contrast-rgb), .025); }
.tender-kpis span[b-l5k7ihb8pe] { overflow: hidden; color: var(--wl-text-muted); font-size: .58rem; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.tender-kpis strong[b-l5k7ihb8pe] { font-size: .85rem; font-variant-numeric: tabular-nums; }

.tender-lock[b-l5k7ihb8pe] { display: flex; min-height: 150px; flex-direction: column; justify-content: center; gap: .25rem; padding: 1rem; border: 1px dashed rgba(248,113,113,.25); border-radius: 10px; background: rgba(127,29,29,.08); }
.tender-lock strong[b-l5k7ihb8pe] { color: #fca5a5; }
.tender-lock span[b-l5k7ihb8pe] { color: var(--wl-text-muted); font-size: .75rem; line-height: 1.5; }
.tender-form[b-l5k7ihb8pe] { display: grid; grid-template-columns: 1fr; gap: .6rem; }
.tender-form label[b-l5k7ihb8pe] { display: flex; flex-direction: column; gap: .3rem; color: var(--wl-text-muted); font-size: .65rem; }
.tender-form input[b-l5k7ihb8pe] { width: 100%; padding: .68rem; color: var(--wl-text-primary); border: 1px solid var(--wl-border-medium); border-radius: 8px; outline: none; background: rgba(var(--wl-bg-modal-deep-rgb), .72); font: inherit; font-size: .82rem; }
.tender-form input:focus[b-l5k7ihb8pe] { border-color: rgba(var(--wl-gold-rgb), .65); box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), .08); }
.tender-score-preview[b-l5k7ihb8pe] { display: flex; align-items: center; justify-content: space-between; padding: .7rem .85rem; border-radius: 9px; background: rgba(var(--wl-gold-rgb), .055); }
.tender-score-preview span[b-l5k7ihb8pe] { color: var(--wl-text-muted); font-size: .7rem; }
.tender-score-preview strong[b-l5k7ihb8pe] { color: var(--wl-gold); font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.tender-score-preview small[b-l5k7ihb8pe] { margin-left: .12rem; color: var(--wl-text-muted); font-size: .62rem; }
.tender-current-bid[b-l5k7ihb8pe] { color: #67e8f9; font-size: .7rem; }

.tender-btn[b-l5k7ihb8pe] { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: .7rem 1rem; border: 0; border-radius: 9px; font-weight: 800; text-decoration: none; cursor: pointer; }
.tender-btn--gold[b-l5k7ihb8pe] { color: #18130a; background: linear-gradient(135deg, #f7d77d, var(--wl-gold)); box-shadow: 0 8px 22px rgba(var(--wl-gold-rgb), .16); }
.tender-btn:hover[b-l5k7ihb8pe] { filter: brightness(1.06); transform: translateY(-1px); }
.tender-btn:disabled[b-l5k7ihb8pe] { opacity: .55; cursor: wait; transform: none; }

.tender-history__list[b-l5k7ihb8pe] { overflow: hidden; border: 1px solid var(--wl-border-subtle); border-radius: 14px; }
.tender-history__list article[b-l5k7ihb8pe] { display: grid; grid-template-columns: 105px minmax(160px, 1fr) minmax(160px, .7fr) minmax(170px, .8fr); align-items: center; gap: 1rem; padding: .9rem 1rem; border-bottom: 1px solid var(--wl-border-subtle); background: rgba(var(--wl-bg-modal-rgb), .68); }
.tender-history__list article:last-child[b-l5k7ihb8pe] { border-bottom: 0; }
.tender-history__list article > div[b-l5k7ihb8pe] { display: flex; flex-direction: column; gap: .15rem; }
.tender-history__list small[b-l5k7ihb8pe], .tender-history__winner span[b-l5k7ihb8pe] { color: var(--wl-text-muted); font-size: .64rem; }
.tender-history__mine[b-l5k7ihb8pe] { padding: .5rem .65rem; border-radius: 8px; background: rgba(var(--wl-contrast-rgb), .025); }
.tender-history__mine.status-won strong[b-l5k7ihb8pe] { color: var(--wl-gold); }
.tender-history__mine.status-lost strong[b-l5k7ihb8pe], .tender-history__mine.status-rejected strong[b-l5k7ihb8pe] { color: var(--wl-text-muted); }

@media (max-width: 900px) {
    .tender-hero[b-l5k7ihb8pe] { grid-template-columns: 1fr; }
    .tender-grid[b-l5k7ihb8pe] { grid-template-columns: 1fr; }
    .tender-contract[b-l5k7ihb8pe] { grid-template-columns: repeat(2, 1fr); }
    .tender-history__list[b-l5k7ihb8pe] {
        display: grid;
        gap: .7rem;
        overflow: visible;
        border: 0;
        border-radius: 0;
    }
    .tender-history__list article[b-l5k7ihb8pe] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        border: 1px solid var(--wl-border-subtle);
        border-radius: 12px;
    }
    .tender-history__list article:last-child[b-l5k7ihb8pe] { border-bottom: 1px solid var(--wl-border-subtle); }
    .tender-history__list article > div[b-l5k7ihb8pe] { min-width: 0; }
    .tender-history__list article > div strong[b-l5k7ihb8pe],
    .tender-history__list article > div span[b-l5k7ihb8pe],
    .tender-history__list article > div small[b-l5k7ihb8pe] { overflow-wrap: anywhere; }
}

@media (max-width: 600px) {
    .tender-page[b-l5k7ihb8pe] { padding-inline: .65rem; }
    .tender-hero[b-l5k7ihb8pe] { padding: 1.25rem; }
    .tender-section__head[b-l5k7ihb8pe] { align-items: flex-start; flex-direction: column; gap: .4rem; }
    .tender-section__head p[b-l5k7ihb8pe] { text-align: left; }
    .tender-kpis[b-l5k7ihb8pe] { grid-template-columns: repeat(2, 1fr); }
    .tender-form[b-l5k7ihb8pe] { grid-template-columns: 1fr; }
    .tender-contract[b-l5k7ihb8pe] { grid-template-columns: 1fr; }
    .tender-history__list article[b-l5k7ihb8pe] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Career/Entrepreneur/Work.razor.rz.scp.css */
/* Company work panel. Shared look from the global .ent-* atoms (Styles/app.css). */

.work-shell[b-pqeqy2ea6t] { color: var(--wl-text-primary); }

.work-header[b-pqeqy2ea6t] { align-items: flex-end; }
.company-picker[b-pqeqy2ea6t] { min-width: min(16rem, 100%); }
.company-picker > span[b-pqeqy2ea6t] { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wl-text-secondary); }

.task-list[b-pqeqy2ea6t] { display: grid; gap: 0.85rem; }

.task-card[b-pqeqy2ea6t] { gap: 0.85rem; }
.task-card.is-ready[b-pqeqy2ea6t] { border-color: rgba(var(--wl-gold-rgb), 0.4); }
.task-card.is-paid[b-pqeqy2ea6t] { opacity: 0.8; }
.task-card.is-claimed[b-pqeqy2ea6t] { opacity: 0.65; }

.task-header[b-pqeqy2ea6t] { align-items: flex-start; gap: 1rem; }
.task-heading[b-pqeqy2ea6t] { display: grid; gap: 0.5rem; min-width: 0; }
.task-heading h2[b-pqeqy2ea6t] { margin: 0; font-size: 1.1rem; font-weight: 800; }
.task-eyebrow[b-pqeqy2ea6t] { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

/* status chip colored by the card state */
.task-card.is-active .task-status[b-pqeqy2ea6t] { color: var(--ent-accent-2); background: rgba(var(--ent-accent-rgb), 0.12); border-color: rgba(var(--ent-accent-rgb), 0.3); }
.task-card.is-ready .task-status[b-pqeqy2ea6t] { color: var(--wl-gold); background: rgba(var(--wl-gold-rgb), 0.12); border-color: rgba(var(--wl-gold-rgb), 0.3); }
.task-card.is-paid .task-status[b-pqeqy2ea6t] { color: #7dd3fc; background: rgba(14, 165, 233, 0.12); border-color: rgba(14, 165, 233, 0.3); }

.task-rating[b-pqeqy2ea6t] { display: grid; gap: 0.3rem; justify-items: end; flex-shrink: 0; }
.task-rating > span[b-pqeqy2ea6t] { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wl-text-secondary); }

.quality-stars[b-pqeqy2ea6t] { display: inline-flex; gap: 0.14rem; }
.star[b-pqeqy2ea6t] { position: relative; display: inline-block; width: 1.05em; height: 1.05em; font-size: 1.05rem; line-height: 1; }
.star[b-pqeqy2ea6t]::before,
.star[b-pqeqy2ea6t]::after { content: "\2605"; position: absolute; left: 0; top: 0; height: 100%; }
.star[b-pqeqy2ea6t]::before { color: rgba(120, 130, 150, .35); }
.star[b-pqeqy2ea6t]::after { width: var(--fill, 0%); overflow: hidden; color: currentColor; }
.quality-stars.fire .star.filled[b-pqeqy2ea6t] { color: #ff7a1a; text-shadow: 0 0 10px rgba(255,122,26,.55); }
.quality-stars.diamond .star.filled[b-pqeqy2ea6t] { color: #74d8ff; text-shadow: 0 0 12px rgba(116,216,255,.7); }
.quality-stars.normal .star.filled[b-pqeqy2ea6t] { color: #d6a21e; }
.quality-stars .star.empty[b-pqeqy2ea6t] { color: rgba(120, 130, 150, .35); }

.task-description[b-pqeqy2ea6t] { margin: 0; }

.task-progress[b-pqeqy2ea6t] { display: grid; gap: 0.4rem; }
.task-progress .progress-track[b-pqeqy2ea6t] { margin-top: 0.1rem; }

.task-metrics[b-pqeqy2ea6t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
}
.task-metrics > div[b-pqeqy2ea6t] { display: grid; gap: 0.2rem; }
.task-metrics span[b-pqeqy2ea6t] { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wl-text-secondary); }
.task-metrics strong[b-pqeqy2ea6t] { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

.chance-row[b-pqeqy2ea6t] { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.82rem; }
.chance-up[b-pqeqy2ea6t] { color: var(--ent-accent-2); font-weight: 700; }
.chance-down[b-pqeqy2ea6t] { color: #f9a8a8; font-weight: 700; }

.action-cost[b-pqeqy2ea6t] { font-size: 0.72rem; font-weight: 700; opacity: 0.82; }

@media (max-width: 600px) {
    .task-header[b-pqeqy2ea6t] { flex-direction: column; }
    .task-rating[b-pqeqy2ea6t] { justify-items: start; }
}
/* /Components/Pages/Career/Fashion/Agency/Index.razor.rz.scp.css */
.agency-page[b-7q7ha565gl] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
}

/* Header */
.page-header[b-7q7ha565gl] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.back-link[b-7q7ha565gl] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-subtle);
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 1.25rem;
}

.back-link:hover[b-7q7ha565gl] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.back-link svg[b-7q7ha565gl] {
    width: 1.25rem;
    height: 1.25rem;
}

.header-eyebrow[b-7q7ha565gl] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-gold);
    font-weight: 600;
}

.header-text h1[b-7q7ha565gl] {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.95);
    margin: 0.25rem 0;
}

.header-subtitle[b-7q7ha565gl] {
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-size: 0.95rem;
    margin: 0;
    font-style: italic;
}

/* Section */
.current-section[b-7q7ha565gl],
.available-section[b-7q7ha565gl] {
    margin-bottom: 2.5rem;
}

.section-label[b-7q7ha565gl] {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

/* Current Agency Card */
.current-card[b-7q7ha565gl] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 1rem;
    padding: 1.75rem;
    position: relative;
    overflow: hidden;
}

.current-card[b-7q7ha565gl]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
}

.agency-tier[b-7q7ha565gl] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 0.5rem;
}

.tier-star[b-7q7ha565gl] {
    width: 1rem;
    height: 1rem;
    color: var(--wl-gold);
}

.agency-name[b-7q7ha565gl] {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.95);
    margin: 0 0 0.35rem;
}

.agency-desc[b-7q7ha565gl] {
    font-size: 0.9rem;
    color: rgba(var(--wl-contrast-rgb), 0.55);
    font-style: italic;
    margin: 0 0 1rem;
    line-height: 1.45;
}

/* Perks */
.agency-perks[b-7q7ha565gl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.perk[b-7q7ha565gl] {
    cursor: help;
}

.perk-value[b-7q7ha565gl] {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
    border-radius: 0.35rem;
    font-weight: 600;
}

.perk-value.positive[b-7q7ha565gl] {
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.15);
}

.perk-value.negative[b-7q7ha565gl] {
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.12);
}

/* Contract Meta */
.contract-meta[b-7q7ha565gl] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.meta-item[b-7q7ha565gl] {
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.55);
}

/* Quota Warning */
.quota-warning[b-7q7ha565gl] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    background: rgba(234, 179, 8, 0.08);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 0.5rem;
    color: #fbbf24;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.quota-warning svg[b-7q7ha565gl] {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

/* Leave Button */
.leave-btn[b-7q7ha565gl] {
    padding: 0.6rem 1.5rem;
    background: transparent;
    color: rgba(239, 68, 68, 0.7);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.leave-btn:hover:not(:disabled)[b-7q7ha565gl] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

.leave-btn:disabled[b-7q7ha565gl] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* No Agency */
.no-agency-card[b-7q7ha565gl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 2rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 1rem;
    text-align: center;
}

.no-agency-icon[b-7q7ha565gl] {
    width: 3.5rem;
    height: 3.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.15);
    margin-bottom: 0.75rem;
}

.no-agency-icon svg[b-7q7ha565gl] {
    width: 100%;
    height: 100%;
}

.no-agency-card h3[b-7q7ha565gl] {
    font-size: 1.15rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.65);
    margin: 0 0 0.35rem;
}

.no-agency-card p[b-7q7ha565gl] {
    font-size: 0.85rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin: 0;
    max-width: 420px;
    line-height: 1.5;
}

/* Agencies Grid */
.agencies-grid[b-7q7ha565gl] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Agency Card */
.agency-card[b-7q7ha565gl] {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.875rem;
    transition: all 0.25s ease;
    animation: card-enter-b-7q7ha565gl 0.4s ease both;
}

.agency-card.is-current[b-7q7ha565gl] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.04);
}

@keyframes card-enter-b-7q7ha565gl {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.agency-card:hover[b-7q7ha565gl] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: rgba(var(--wl-gold-rgb), 0.2);
}

.card-tier[b-7q7ha565gl] {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 0.5rem;
}

.tier-star-sm[b-7q7ha565gl] {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--wl-gold);
}

.tier-label[b-7q7ha565gl] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin-left: 0.35rem;
}

.card-name[b-7q7ha565gl] {
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0 0 0.25rem;
}

.card-desc[b-7q7ha565gl] {
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-style: italic;
    margin: 0 0 0.75rem;
    line-height: 1.4;
    flex: 1;
}

/* Card Perks */
.card-perks[b-7q7ha565gl] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.card-perk[b-7q7ha565gl] {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-weight: 600;
}

.card-perk.commission[b-7q7ha565gl] {
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
}

.card-perk.bonus[b-7q7ha565gl] {
    background: rgba(74, 222, 128, 0.08);
    color: #4ade80;
}

/* Card Requirements */
.card-requirements[b-7q7ha565gl] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
}

/* Sign Button */
.sign-btn[b-7q7ha565gl] {
    width: 100%;
    padding: 0.65rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto;
}

.sign-btn:hover:not(:disabled)[b-7q7ha565gl] {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(var(--wl-gold-rgb), 0.25);
}

.sign-btn:disabled[b-7q7ha565gl] {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

/* Loading */
.loading-container[b-7q7ha565gl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.loading-spinner[b-7q7ha565gl] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-7q7ha565gl 0.8s linear infinite;
}

@keyframes spin-b-7q7ha565gl {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 640px) {
    .agency-page[b-7q7ha565gl] {
        padding: 1rem;
    }

    .header-text h1[b-7q7ha565gl] {
        font-size: 1.5rem;
    }

    .agencies-grid[b-7q7ha565gl] {
        grid-template-columns: 1fr;
    }

    .agency-name[b-7q7ha565gl] {
        font-size: 1.25rem;
    }
}
/* /Components/Pages/Career/Fashion/BrandDeals/Index.razor.rz.scp.css */
.branddeals-page[b-y4nlx0ok6b] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Header */
.page-header[b-y4nlx0ok6b] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.back-link[b-y4nlx0ok6b] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-subtle);
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 1.25rem;
}

.back-link:hover[b-y4nlx0ok6b] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.back-link svg[b-y4nlx0ok6b] {
    width: 1.25rem;
    height: 1.25rem;
}

.header-text[b-y4nlx0ok6b] {
    flex: 1;
}

.header-eyebrow[b-y4nlx0ok6b] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-gold);
    font-weight: 600;
}

.header-text h1[b-y4nlx0ok6b] {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.95);
    margin: 0.25rem 0;
}

.header-subtitle[b-y4nlx0ok6b] {
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-size: 0.95rem;
    margin: 0;
    font-style: italic;
}

/* Slot Tracker */
.slot-tracker[b-y4nlx0ok6b] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    cursor: help;
    margin-top: 0.5rem;
}

.slot-count[b-y4nlx0ok6b] {
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-weight: 500;
}

.slot-bar[b-y4nlx0ok6b] {
    display: flex;
    gap: 4px;
}

.slot-pip[b-y4nlx0ok6b] {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    transition: all 0.2s ease;
}

.slot-pip.filled[b-y4nlx0ok6b] {
    background: var(--wl-gold);
    border-color: var(--wl-gold);
}

/* Section */
.deals-section[b-y4nlx0ok6b] {
    margin-bottom: 2rem;
}

.section-title[b-y4nlx0ok6b] {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

/* Deals Grid */
.deals-grid[b-y4nlx0ok6b] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* Deal Card */
.deal-card[b-y4nlx0ok6b] {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.875rem;
    transition: all 0.25s ease;
}

.offer-card[b-y4nlx0ok6b] {
    animation: card-enter-b-y4nlx0ok6b 0.4s ease both;
}

@keyframes card-enter-b-y4nlx0ok6b {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.deal-card:hover[b-y4nlx0ok6b] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: rgba(var(--wl-gold-rgb), 0.2);
}

.active-deal[b-y4nlx0ok6b] {
    border-left: 3px solid var(--wl-gold);
}

/* Deal Header */
.deal-header[b-y4nlx0ok6b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.deal-client[b-y4nlx0ok6b] {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.exclusivity-badge[b-y4nlx0ok6b] {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-weight: 600;
}

.exclusivity-badge.excl-nonexclusive[b-y4nlx0ok6b] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.exclusivity-badge.excl-categoryexclusive[b-y4nlx0ok6b] {
    background: rgba(234, 179, 8, 0.12);
    color: #fbbf24;
}

.exclusivity-badge.excl-fullexclusive[b-y4nlx0ok6b] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

/* Deal Content */
.deal-title[b-y4nlx0ok6b] {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin-bottom: 0.25rem;
}

.deal-category[b-y4nlx0ok6b] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: capitalize;
    margin-bottom: 0.75rem;
}

/* Deal Details */
.deal-details[b-y4nlx0ok6b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.deal-pay[b-y4nlx0ok6b] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.pay-amount[b-y4nlx0ok6b] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.pay-period[b-y4nlx0ok6b] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.deal-posts[b-y4nlx0ok6b] {
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.55);
    text-align: right;
}

.posts-bar[b-y4nlx0ok6b] {
    width: 80px;
    height: 4px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 2px;
    margin-top: 0.25rem;
    overflow: hidden;
}

.posts-fill[b-y4nlx0ok6b] {
    height: 100%;
    background: var(--wl-gold);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.deal-requirement[b-y4nlx0ok6b] {
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

/* Buttons */
.accept-btn[b-y4nlx0ok6b] {
    width: 100%;
    padding: 0.65rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto;
}

.accept-btn:hover:not(:disabled)[b-y4nlx0ok6b] {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(var(--wl-gold-rgb), 0.25);
}

.accept-btn:disabled[b-y4nlx0ok6b] {
    opacity: 0.5;
    cursor: not-allowed;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.terminate-btn[b-y4nlx0ok6b] {
    width: 100%;
    padding: 0.55rem;
    background: transparent;
    color: rgba(239, 68, 68, 0.7);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto;
}

.terminate-btn:hover:not(:disabled)[b-y4nlx0ok6b] {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.35);
    color: #f87171;
}

.terminate-btn:disabled[b-y4nlx0ok6b] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Empty & Loading */
.empty-state[b-y4nlx0ok6b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 2rem;
    text-align: center;
}

.empty-icon[b-y4nlx0ok6b] {
    width: 3.5rem;
    height: 3.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.12);
    margin-bottom: 0.75rem;
}

.empty-icon svg[b-y4nlx0ok6b] {
    width: 100%;
    height: 100%;
}

.empty-state h3[b-y4nlx0ok6b] {
    font-size: 1.15rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 0.35rem;
}

.empty-state p[b-y4nlx0ok6b] {
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-size: 0.85rem;
    margin: 0;
    max-width: 380px;
}

.loading-container[b-y4nlx0ok6b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.loading-spinner[b-y4nlx0ok6b] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-y4nlx0ok6b 0.8s linear infinite;
}

@keyframes spin-b-y4nlx0ok6b {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 640px) {
    .branddeals-page[b-y4nlx0ok6b] {
        padding: 1rem;
    }

    .page-header[b-y4nlx0ok6b] {
        flex-direction: column;
    }

    .slot-tracker[b-y4nlx0ok6b] {
        align-items: flex-start;
    }

    .deals-grid[b-y4nlx0ok6b] {
        grid-template-columns: 1fr;
    }

    .header-text h1[b-y4nlx0ok6b] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/Career/Fashion/Contracts/Details.razor.rz.scp.css */
.contract-details-page[b-fc010zqhy3] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
}

/* Header */
.page-header[b-fc010zqhy3] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.back-link[b-fc010zqhy3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-subtle);
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 1.25rem;
}

.back-link:hover[b-fc010zqhy3] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.back-link svg[b-fc010zqhy3] {
    width: 1.25rem;
    height: 1.25rem;
}

.header-eyebrow[b-fc010zqhy3] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-gold);
    font-weight: 600;
}

.header-text h1[b-fc010zqhy3] {
    font-size: 1.75rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.95);
    margin: 0.25rem 0 0;
}

/* Layout - two equal-height columns + full-width button row */
.details-layout[b-fc010zqhy3] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 1.25rem;
    align-items: stretch;
}

/* Info Panel */
.info-panel[b-fc010zqhy3] {
    display: flex;
    flex-direction: column;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 1.5rem;
}

.panel-header[b-fc010zqhy3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.contract-type[b-fc010zqhy3] {
    font-size: 0.7rem;
    padding: 0.25rem 0.65rem;
    border-radius: 0.35rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.contract-type.type-runway[b-fc010zqhy3] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
}

.contract-type.type-photo[b-fc010zqhy3] {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
}

.contract-type.type-presentation[b-fc010zqhy3] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    color: var(--wl-purple);
}

.contract-type.type-hostessing[b-fc010zqhy3] {
    background: rgba(244, 114, 182, 0.12);
    color: #f472b6;
}

.fw-tag[b-fc010zqhy3] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.65rem;
    padding: 0.2rem 0.55rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.18), rgba(var(--wl-gold-rgb), 0.08));
    color: var(--wl-gold);
    border-radius: 0.3rem;
    font-weight: 700;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    letter-spacing: 0.03em;
}

.fw-tag svg[b-fc010zqhy3] {
    width: 0.85rem;
    height: 0.85rem;
}

/* Client Section */
.client-section[b-fc010zqhy3] {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.client-info[b-fc010zqhy3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.client-name[b-fc010zqhy3] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: rgba(var(--wl-contrast-rgb), 0.95);
}

.client-prestige[b-fc010zqhy3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: help;
}

.prestige-stars[b-fc010zqhy3] {
    display: flex;
    gap: 2px;
}

.prestige-star[b-fc010zqhy3] {
    width: 1rem;
    height: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    transition: all 0.2s ease;
}

.prestige-star.filled[b-fc010zqhy3] {
    color: var(--wl-gold);
    filter: drop-shadow(0 0 3px rgba(var(--wl-gold-rgb), 0.3));
}

.prestige-label[b-fc010zqhy3] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Brief Description */
.brief-description[b-fc010zqhy3] {
    margin-bottom: 1.25rem;
}

.brief-description p[b-fc010zqhy3] {
    font-size: 0.95rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-style: italic;
    margin: 0;
    line-height: 1.5;
}

/* Unified section label */
.section-label[b-fc010zqhy3] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin: 0;
    font-weight: 600;
}

/* Requirements */
.requirements[b-fc010zqhy3] {
    margin-bottom: 1.25rem;
}

.requirements .section-label[b-fc010zqhy3] {
    margin-bottom: 0.75rem;
}

.req-row[b-fc010zqhy3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.req-row:last-child[b-fc010zqhy3] {
    border-bottom: none;
}

.req-label[b-fc010zqhy3] {
    font-size: 0.85rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-weight: 500;
}

.req-value[b-fc010zqhy3] {
    font-size: 0.85rem;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    font-weight: 600;
}

.req-tags[b-fc010zqhy3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.tag[b-fc010zqhy3] {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.tag-style[b-fc010zqhy3] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

.tag-slot[b-fc010zqhy3] {
    background: rgba(var(--wl-purple-rgb), 0.1);
    color: var(--wl-purple);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.15);
}

/* Formality Indicator */
.formality-indicator[b-fc010zqhy3] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.formality-bar[b-fc010zqhy3] {
    display: flex;
    gap: 4px;
}

.formality-pip[b-fc010zqhy3] {
    width: 20px;
    height: 6px;
    border-radius: 3px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    transition: all 0.2s ease;
}

.formality-pip.filled[b-fc010zqhy3] {
    background: var(--wl-gold);
}

.formality-level[b-fc010zqhy3] {
    font-size: 0.7rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-weight: 500;
    white-space: nowrap;
}

/* Rewards - pushed to bottom of info-panel via flex */
.rewards-section[b-fc010zqhy3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding-top: 1rem;
    margin-top: auto;
    border-top: 1px solid var(--wl-border-medium);
}

.reward-item[b-fc010zqhy3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.reward-label[b-fc010zqhy3] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.45);
}

.reward-value[b-fc010zqhy3] {
    font-size: 1.15rem;
    font-weight: 700;
}

.reward-value.credits[b-fc010zqhy3] {
    color: var(--wl-gold);
}

.reward-value.fame[b-fc010zqhy3] {
    color: var(--wl-purple);
}

.reward-value.energy[b-fc010zqhy3] {
    color: #fbbf24;
}

.rewards-hint[b-fc010zqhy3] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    text-align: center;
}

.rewards-hint span[b-fc010zqhy3] {
    font-size: 0.7rem;
    color: rgba(var(--wl-contrast-rgb), 0.3);
    font-style: italic;
}

/* Action Panel - stretches to match info-panel */
.action-panel[b-fc010zqhy3] {
    display: flex;
    flex-direction: column;
}

/* Score Preview */
.score-preview[b-fc010zqhy3] {
    display: flex;
    flex-direction: column;
    flex: 1;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 1.5rem;
}

.score-header-row[b-fc010zqhy3] {
    margin-bottom: 1rem;
}

.score-header-row .section-label[b-fc010zqhy3] {
    text-align: center;
}

/* Score Ring */
.score-ring-wrap[b-fc010zqhy3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.score-ring[b-fc010zqhy3] {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: conic-gradient(
        var(--wl-gold) 0% calc(var(--score, 0) * 1%),
        rgba(var(--wl-contrast-rgb), 0.06) calc(var(--score, 0) * 1%) 100%
    );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: score-appear-b-fc010zqhy3 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.score-ring[b-fc010zqhy3]::after {
    content: '';
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--wl-bg-primary);
}

.score-number[b-fc010zqhy3] {
    position: relative;
    z-index: 1;
    font-size: 2rem;
    font-weight: 700;
    color: var(--wl-gold);
    line-height: 1;
}

@keyframes score-appear-b-fc010zqhy3 {
    from {
        opacity: 0;
        transform: scale(0.65);
    }
    70% {
        transform: scale(1.06);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.score-verdict[b-fc010zqhy3] {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: center;
}

.verdict-perfect[b-fc010zqhy3] { color: #4ade80; }
.verdict-excellent[b-fc010zqhy3] { color: var(--wl-gold); }
.verdict-good[b-fc010zqhy3] { color: #60a5fa; }
.verdict-average[b-fc010zqhy3] { color: #fbbf24; }
.verdict-poor[b-fc010zqhy3] { color: #f87171; }

/* Score Breakdown */
.score-breakdown[b-fc010zqhy3] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.625rem;
    margin-bottom: 1rem;
}

.breakdown-row[b-fc010zqhy3] {
    display: grid;
    grid-template-columns: 4.75rem 1fr 1.75rem;
    align-items: center;
    gap: 0.5rem;
}

.breakdown-label[b-fc010zqhy3] {
    font-size: 0.7rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breakdown-bar[b-fc010zqhy3] {
    height: 5px;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border-radius: 3px;
    overflow: hidden;
}

.breakdown-fill[b-fc010zqhy3] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
    min-width: 2px;
}

.bd-style[b-fc010zqhy3] { background: var(--wl-gold); }
.bd-slots[b-fc010zqhy3] { background: var(--wl-purple); }
.bd-formality[b-fc010zqhy3] { background: #60a5fa; }
.bd-season[b-fc010zqhy3] { background: #4ade80; }
.bd-cohesion[b-fc010zqhy3] { background: #f472b6; }

.breakdown-val[b-fc010zqhy3] {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.breakdown-val.val-zero[b-fc010zqhy3] {
    color: rgba(var(--wl-contrast-rgb), 0.25);
}

/* Client Comments */
.comments-list[b-fc010zqhy3] {
    margin-bottom: 0;
}

.comments-list .section-label[b-fc010zqhy3] {
    margin-bottom: 0.5rem;
}

.comment[b-fc010zqhy3] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 0.5rem;
    margin-bottom: 0.3rem;
    font-size: 0.8rem;
    line-height: 1.4;
}

.comment-icon[b-fc010zqhy3] {
    flex-shrink: 0;
    width: 1.1rem;
    height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 700;
}

.comment-text[b-fc010zqhy3] {
    flex: 1;
}

.comment-positive[b-fc010zqhy3] {
    background: rgba(74, 222, 128, 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.75);
}

.comment-positive .comment-icon[b-fc010zqhy3] {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.comment-neutral[b-fc010zqhy3] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.comment-neutral .comment-icon[b-fc010zqhy3] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.comment-negative[b-fc010zqhy3] {
    background: rgba(248, 113, 113, 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.75);
}

.comment-negative .comment-icon[b-fc010zqhy3] {
    background: rgba(248, 113, 113, 0.2);
    color: #f87171;
}

.comment-warning[b-fc010zqhy3] {
    background: rgba(251, 191, 36, 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.75);
}

.comment-warning .comment-icon[b-fc010zqhy3] {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

/* Fatigue Bar - separated from comments */
.fatigue-bar[b-fc010zqhy3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    margin-top: auto;
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 0.5rem;
}

.fatigue-separator[b-fc010zqhy3] {
    border: none;
    border-top: 1px solid var(--wl-border-subtle);
    margin: 0.6rem 0;
}

.fatigue-icon[b-fc010zqhy3] {
    width: 1rem;
    height: 1rem;
    color: #fbbf24;
    flex-shrink: 0;
}

.fatigue-label[b-fc010zqhy3] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-weight: 500;
    flex: 1;
}

.fatigue-value[b-fc010zqhy3] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fbbf24;
}

/* Action Buttons - full-width row below both panels */
.action-buttons[b-fc010zqhy3] {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.75rem;
}

/* Submit Button - primary gold */
.submit-btn[b-fc010zqhy3] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    letter-spacing: 0.02em;
}

.submit-btn:hover:not(:disabled)[b-fc010zqhy3] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--wl-gold-rgb), 0.3);
}

.submit-btn:disabled[b-fc010zqhy3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.submit-btn svg[b-fc010zqhy3] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Submit secondary (when score is low) */
.submit-btn.secondary-submit[b-fc010zqhy3] {
    background: transparent;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    border: 1px solid var(--wl-border-medium);
    font-size: 0.9rem;
    padding: 0.85rem;
}

.submit-btn.secondary-submit:hover:not(:disabled)[b-fc010zqhy3] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    color: rgba(var(--wl-contrast-rgb), 0.7);
    transform: none;
    box-shadow: none;
}

.btn-spinner[b-fc010zqhy3] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-fc010zqhy3 0.8s linear infinite;
}

/* Creator Button */
.creator-btn[b-fc010zqhy3] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem;
    background: transparent;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    text-align: center;
}

.creator-btn:hover[b-fc010zqhy3] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.creator-btn svg[b-fc010zqhy3] {
    width: 1rem;
    height: 1rem;
}

/* Creator primary (when score is low - swap order) */
.creator-btn.primary-creator[b-fc010zqhy3] {
    padding: 1rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    border: none;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.creator-btn.primary-creator:hover[b-fc010zqhy3] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-bg-primary);
}

.creator-btn.primary-creator svg[b-fc010zqhy3] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Completed State */
.completed-state[b-fc010zqhy3] {
    flex: 1;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.completed-icon[b-fc010zqhy3] {
    width: 3rem;
    height: 3rem;
    color: #4ade80;
    margin: 0 auto 0.75rem;
}

.completed-icon svg[b-fc010zqhy3] {
    width: 100%;
    height: 100%;
}

.completed-state h3[b-fc010zqhy3] {
    font-size: 1.15rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    margin: 0 0 0.75rem;
}

.final-score[b-fc010zqhy3] {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--wl-gold);
    margin-bottom: 0.5rem;
}

.score-feedback[b-fc010zqhy3] {
    font-size: 0.9rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0;
}

/* Status Badge */
.status-badge[b-fc010zqhy3] {
    text-align: center;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.85rem;
}

.status-badge.status-expired[b-fc010zqhy3] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

.status-badge.status-failed[b-fc010zqhy3] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

/* Confirmation Overlay */
.confirm-overlay[b-fc010zqhy3] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-light);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(4px);
    animation: overlay-in-b-fc010zqhy3 0.2s ease;
}

.confirm-card[b-fc010zqhy3] {
    background: var(--wl-bg-primary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    max-width: 380px;
    width: 90%;
    animation: card-in-b-fc010zqhy3 0.25s ease;
}

.confirm-icon[b-fc010zqhy3] {
    width: 2.5rem;
    height: 2.5rem;
    color: #fbbf24;
    margin: 0 auto 0.75rem;
}

.confirm-icon svg[b-fc010zqhy3] {
    width: 100%;
    height: 100%;
}

.confirm-card h3[b-fc010zqhy3] {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0 0 0.5rem;
}

.confirm-card p[b-fc010zqhy3] {
    font-size: 0.9rem;
    color: rgba(var(--wl-contrast-rgb), 0.55);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

.confirm-buttons[b-fc010zqhy3] {
    display: flex;
    gap: 0.75rem;
}

.confirm-cancel[b-fc010zqhy3] {
    flex: 1;
    padding: 0.65rem;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-cancel:hover[b-fc010zqhy3] {
    background: rgba(var(--wl-contrast-rgb), 0.1);
}

.confirm-submit[b-fc010zqhy3] {
    flex: 1;
    padding: 0.65rem;
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 0.5rem;
    color: #f87171;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-submit:hover[b-fc010zqhy3] {
    background: rgba(248, 113, 113, 0.2);
}

/* Result Overlay */
.result-overlay[b-fc010zqhy3] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-light);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(4px);
    animation: overlay-in-b-fc010zqhy3 0.2s ease;
}

.result-card[b-fc010zqhy3] {
    background: var(--wl-bg-primary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 2.5rem;
    text-align: center;
    min-width: 300px;
    animation: card-in-b-fc010zqhy3 0.3s ease;
}

@keyframes overlay-in-b-fc010zqhy3 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes card-in-b-fc010zqhy3 {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.result-score[b-fc010zqhy3] {
    font-size: 4rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.result-feedback[b-fc010zqhy3] {
    font-size: 0.95rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 1.5rem;
}

.result-rewards[b-fc010zqhy3] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.result-reward-item[b-fc010zqhy3] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.result-reward-label[b-fc010zqhy3] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.result-credits[b-fc010zqhy3] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.result-fame[b-fc010zqhy3] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wl-purple);
}

.result-fatigue[b-fc010zqhy3] {
    font-size: 0.85rem;
    color: #fbbf24;
    margin-bottom: 1rem;
    font-weight: 500;
}

.result-close[b-fc010zqhy3] {
    padding: 0.5rem 2rem;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.result-close:hover[b-fc010zqhy3] {
    background: rgba(var(--wl-contrast-rgb), 0.12);
}

/* Empty & Loading */
.empty-state[b-fc010zqhy3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-state h3[b-fc010zqhy3] {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    margin: 0;
}

.loading-container[b-fc010zqhy3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.loading-spinner[b-fc010zqhy3] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-fc010zqhy3 0.8s linear infinite;
}

@keyframes spin-b-fc010zqhy3 {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .contract-details-page[b-fc010zqhy3] {
        padding: 1rem;
    }

    .details-layout[b-fc010zqhy3] {
        grid-template-columns: 1fr;
    }

    .action-panel[b-fc010zqhy3] {
        position: static;
    }

    .action-buttons[b-fc010zqhy3] {
        grid-column: auto;
        flex-direction: column;
    }

    .client-name[b-fc010zqhy3] {
        font-size: 1.25rem;
    }

    .rewards-section[b-fc010zqhy3] {
        grid-template-columns: repeat(3, 1fr);
    }

    .breakdown-row[b-fc010zqhy3] {
        grid-template-columns: 3.5rem 1fr 1.5rem;
    }
}
/* /Components/Pages/Career/Fashion/Contracts/Index.razor.rz.scp.css */
.contracts-page[b-umvh33brtz] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Header */
.page-header[b-umvh33brtz] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.back-link[b-umvh33brtz] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-subtle);
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 1.25rem;
}

.back-link:hover[b-umvh33brtz] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.back-link svg[b-umvh33brtz] {
    width: 1.25rem;
    height: 1.25rem;
}

.header-eyebrow[b-umvh33brtz] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-gold);
    font-weight: 600;
}

.header-text h1[b-umvh33brtz] {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.95);
    margin: 0.25rem 0;
}

.header-subtitle[b-umvh33brtz] {
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-size: 0.95rem;
    margin: 0;
    font-style: italic;
}

/* Contract Grid */
.contracts-grid[b-umvh33brtz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* Contract Card */
.contract-card[b-umvh33brtz] {
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.875rem;
    text-decoration: none;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    transition: all 0.25s ease;
    animation: card-enter-b-umvh33brtz 0.4s ease both;
    position: relative;
    overflow: hidden;
}

.contract-card[b-umvh33brtz]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 0.875rem 0.875rem 0 0;
}

.contract-card.type-runway[b-umvh33brtz]::before {
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
}

.contract-card.type-photo[b-umvh33brtz]::before {
    background: linear-gradient(90deg, #60a5fa, #818cf8);
}

.contract-card.type-presentation[b-umvh33brtz]::before {
    background: linear-gradient(90deg, var(--wl-purple), var(--wl-purple));
}

.contract-card.type-hostessing[b-umvh33brtz]::before {
    background: linear-gradient(90deg, #f472b6, #fb923c);
}

@keyframes card-enter-b-umvh33brtz {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contract-card:hover[b-umvh33brtz] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--wl-shadow-color);
}

/* Card Header */
.card-header[b-umvh33brtz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.contract-type[b-umvh33brtz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.type-icon[b-umvh33brtz] {
    display: flex;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-gold);
}

.type-icon[b-umvh33brtz]  svg {
    width: 100%;
    height: 100%;
}

.type-label[b-umvh33brtz] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.fw-badge[b-umvh33brtz] {
    font-size: 0.65rem;
    padding: 0.15rem 0.45rem;
    background: rgba(var(--wl-gold-rgb), 0.2);
    color: var(--wl-gold);
    border-radius: 0.25rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Client */
.card-client[b-umvh33brtz] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.client-name[b-umvh33brtz] {
    font-size: 1.15rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.95);
}

.client-prestige[b-umvh33brtz] {
    display: flex;
    gap: 3px;
}

.prestige-pip[b-umvh33brtz] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
}

.prestige-pip.filled[b-umvh33brtz] {
    background: var(--wl-gold);
    border-color: var(--wl-gold);
}

/* Brief */
.card-brief[b-umvh33brtz] {
    margin-bottom: 0.75rem;
    min-height: 2.5rem;
}

.brief-desc[b-umvh33brtz] {
    font-size: 0.85rem;
    color: rgba(var(--wl-contrast-rgb), 0.55);
    margin: 0;
    line-height: 1.45;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Tags */
.card-tags[b-umvh33brtz] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.875rem;
}

.tag[b-umvh33brtz] {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 500;
}

.tag-style[b-umvh33brtz] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

.tag-season[b-umvh33brtz] {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.15);
}

/* Footer */
.card-footer[b-umvh33brtz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-subtle);
    margin-top: auto;
}

.reward[b-umvh33brtz] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.reward-credits[b-umvh33brtz] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.reward-fame[b-umvh33brtz] {
    font-size: 0.75rem;
    color: rgba(var(--wl-purple-rgb), 0.8);
    font-weight: 500;
}

.energy-cost[b-umvh33brtz] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-weight: 500;
}

.energy-cost svg[b-umvh33brtz] {
    width: 0.9rem;
    height: 0.9rem;
    color: #fbbf24;
}

/* Empty & Loading */
.empty-state[b-umvh33brtz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon[b-umvh33brtz] {
    width: 4rem;
    height: 4rem;
    color: rgba(var(--wl-contrast-rgb), 0.15);
    margin-bottom: 1rem;
}

.empty-icon svg[b-umvh33brtz] {
    width: 100%;
    height: 100%;
}

.empty-state h3[b-umvh33brtz] {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0 0 0.5rem;
}

.empty-state p[b-umvh33brtz] {
    color: rgba(var(--wl-contrast-rgb), 0.45);
    font-size: 0.9rem;
    margin: 0;
    max-width: 400px;
}

.loading-container[b-umvh33brtz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.loading-spinner[b-umvh33brtz] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-umvh33brtz 0.8s linear infinite;
}

@keyframes spin-b-umvh33brtz {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 640px) {
    .contracts-page[b-umvh33brtz] {
        padding: 1rem;
    }

    .contracts-grid[b-umvh33brtz] {
        grid-template-columns: 1fr;
    }

    .header-text h1[b-umvh33brtz] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/Career/Fashion/FashionWeek/Index.razor.rz.scp.css */
.fashionweek-page[b-5z4hfx9tqo] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
}

/* Header */
.page-header[b-5z4hfx9tqo] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.back-link[b-5z4hfx9tqo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-subtle);
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 1.25rem;
}

.back-link:hover[b-5z4hfx9tqo] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.back-link svg[b-5z4hfx9tqo] {
    width: 1.25rem;
    height: 1.25rem;
}

.header-eyebrow[b-5z4hfx9tqo] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-gold);
    font-weight: 600;
}

.header-text h1[b-5z4hfx9tqo] {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.95);
    margin: 0.25rem 0;
}

.header-subtitle[b-5z4hfx9tqo] {
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-size: 0.95rem;
    margin: 0;
    font-style: italic;
}

/* City Banner */
.fw-city-banner[b-5z4hfx9tqo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.08), rgba(var(--wl-gold-rgb), 0.02));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.875rem;
    margin-bottom: 1.5rem;
}

.city-label[b-5z4hfx9tqo] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    display: block;
}

.city-name[b-5z4hfx9tqo] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wl-gold);
    display: block;
    margin-top: 0.15rem;
}

.season-info[b-5z4hfx9tqo] {
    font-size: 0.85rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-weight: 500;
}

/* Not Active */
.not-active[b-5z4hfx9tqo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 2rem;
    text-align: center;
}

.not-active-icon[b-5z4hfx9tqo] {
    width: 4rem;
    height: 4rem;
    color: rgba(var(--wl-contrast-rgb), 0.15);
    margin-bottom: 1rem;
}

.not-active-icon svg[b-5z4hfx9tqo] {
    width: 100%;
    height: 100%;
}

.not-active h3[b-5z4hfx9tqo] {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0 0 0.5rem;
}

.not-active p[b-5z4hfx9tqo] {
    color: rgba(var(--wl-contrast-rgb), 0.45);
    font-size: 0.9rem;
    margin: 0 0 1rem;
    max-width: 400px;
}

.phase-badge[b-5z4hfx9tqo] {
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
    border-radius: 0.35rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.phase-badge.phase-booking[b-5z4hfx9tqo] {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}

.phase-badge.phase-momentum[b-5z4hfx9tqo] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    color: var(--wl-purple);
}

/* Join Section */
.join-section[b-5z4hfx9tqo] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.join-card[b-5z4hfx9tqo] {
    text-align: center;
    padding: 3rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    max-width: 480px;
    width: 100%;
}

.join-icon[b-5z4hfx9tqo] {
    width: 4rem;
    height: 4rem;
    color: var(--wl-gold);
    margin: 0 auto 1rem;
}

.join-icon svg[b-5z4hfx9tqo] {
    width: 100%;
    height: 100%;
}

.join-card h2[b-5z4hfx9tqo] {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0 0 0.5rem;
}

.join-card p[b-5z4hfx9tqo] {
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
}

.join-btn[b-5z4hfx9tqo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 200px;
}

.join-btn:hover:not(:disabled)[b-5z4hfx9tqo] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--wl-gold-rgb), 0.3);
}

.join-btn:disabled[b-5z4hfx9tqo] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Dashboard */
.fw-dashboard[b-5z4hfx9tqo] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.status-notice[b-5z4hfx9tqo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(74, 222, 128, 0.08);
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 0.5rem;
    color: #4ade80;
    font-size: 0.9rem;
    font-weight: 500;
}

.status-notice svg[b-5z4hfx9tqo] {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Stats Grid */
.fw-stats[b-5z4hfx9tqo] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.fw-stat[b-5z4hfx9tqo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    text-align: center;
}

.combo-stat[b-5z4hfx9tqo] {
    cursor: help;
}

.fw-stat-value[b-5z4hfx9tqo] {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.fw-stat-value.combo[b-5z4hfx9tqo] {
    color: var(--wl-gold);
}

.fw-stat-value.fame[b-5z4hfx9tqo] {
    color: var(--wl-purple);
    font-size: 1.25rem;
}

.fw-stat-value.credits[b-5z4hfx9tqo] {
    color: var(--wl-gold);
    font-size: 1.15rem;
}

.fw-stat-value.entry[b-5z4hfx9tqo] {
    font-size: 0.9rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.fw-stat-label[b-5z4hfx9tqo] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.45);
}

/* Perfect Week */
.perfect-week[b-5z4hfx9tqo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.1), rgba(var(--wl-gold-rgb), 0.04));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 0.75rem;
    color: var(--wl-gold);
    font-weight: 700;
    font-size: 1.05rem;
    animation: shine-b-5z4hfx9tqo 3s ease-in-out infinite;
}

.perfect-week svg[b-5z4hfx9tqo] {
    width: 1.5rem;
    height: 1.5rem;
}

@keyframes shine-b-5z4hfx9tqo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--wl-gold-rgb), 0); }
    50% { box-shadow: 0 0 12px 4px rgba(var(--wl-gold-rgb), 0.1); }
}

/* FW Contracts */
.section-label[b-5z4hfx9tqo] {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    margin: 0;
    font-weight: 600;
}

.fw-contracts[b-5z4hfx9tqo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

.fw-contract-card[b-5z4hfx9tqo] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    text-decoration: none;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    transition: all 0.2s ease;
}

.fw-contract-card:hover[b-5z4hfx9tqo] {
    background: rgba(var(--wl-gold-rgb), 0.08);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    transform: translateY(-1px);
}

.fw-contract-type[b-5z4hfx9tqo] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    font-weight: 600;
}

.fw-contract-client[b-5z4hfx9tqo] {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.fw-contract-reward[b-5z4hfx9tqo] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--wl-gold);
}

/* Loading / Spinner */
.loading-container[b-5z4hfx9tqo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.loading-spinner[b-5z4hfx9tqo],
.btn-spinner[b-5z4hfx9tqo] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-5z4hfx9tqo 0.8s linear infinite;
}

.btn-spinner[b-5z4hfx9tqo] {
    width: 1.25rem;
    height: 1.25rem;
    border-top-color: var(--wl-bg-primary);
}

@keyframes spin-b-5z4hfx9tqo {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 640px) {
    .fashionweek-page[b-5z4hfx9tqo] {
        padding: 1rem;
    }

    .header-text h1[b-5z4hfx9tqo] {
        font-size: 1.5rem;
    }

    .fw-city-banner[b-5z4hfx9tqo] {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .city-name[b-5z4hfx9tqo] {
        font-size: 1.25rem;
    }

    .fw-stats[b-5z4hfx9tqo] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Career/Fashion/Index.razor.rz.scp.css */
.fashion-hub[b-3218c4hxp1] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    position: relative;
}

/* Thin vertical "runway" line */
.runway-line[b-3218c4hxp1] {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.15) 10%,
        rgba(var(--wl-gold-rgb), 0.06) 90%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Header */
.hub-header[b-3218c4hxp1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.08), rgba(var(--wl-gold-rgb), 0.02));
    border-radius: 1rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    position: relative;
    z-index: 1;
}

.header-content[b-3218c4hxp1] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-3218c4hxp1] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-3218c4hxp1] {
    width: 100%;
    height: 100%;
}

.header-text h1[b-3218c4hxp1] {
    font-size: 2.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.35rem 0;
    letter-spacing: -0.02em;
}

.header-text .subtitle[b-3218c4hxp1] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 1rem;
    margin: 0;
    font-style: italic;
}

/* Season Badge */
.season-badge[b-3218c4hxp1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
}

.season-type[b-3218c4hxp1] {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.season-phase[b-3218c4hxp1] {
    font-size: 0.7rem;
    padding: 0.25rem 0.65rem;
    border-radius: 0.35rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.season-phase.phase-booking[b-3218c4hxp1] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

.season-phase.phase-fashionweek[b-3218c4hxp1] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    animation: pulse-glow-b-3218c4hxp1 2s ease-in-out infinite;
}

.season-phase.phase-momentum[b-3218c4hxp1] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    color: var(--wl-purple);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.25);
}

@keyframes pulse-glow-b-3218c4hxp1 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--wl-gold-rgb), 0); }
    50% { box-shadow: 0 0 8px 2px rgba(var(--wl-gold-rgb), 0.15); }
}

/* Quick Stats */
.stats-row[b-3218c4hxp1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.stat-card[b-3218c4hxp1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    text-align: center;
}

.stat-value[b-3218c4hxp1] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.stat-label[b-3218c4hxp1] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.stat-agency .stat-value[b-3218c4hxp1] {
    font-size: 0.95rem;
    font-weight: 600;
}

/* Navigation Grid */
.hub-grid[b-3218c4hxp1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.hub-section[b-3218c4hxp1] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.hub-section:hover[b-3218c4hxp1] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
}

.section-title[b-3218c4hxp1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--wl-border-medium);
}

.section-title svg[b-3218c4hxp1] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
}

.section-links[b-3218c4hxp1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hub-link[b-3218c4hxp1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    text-decoration: none;
    transition: all 0.2s ease;
}

.hub-link:hover[b-3218c4hxp1] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
    transform: translateX(4px);
}

.link-icon[b-3218c4hxp1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.link-icon svg[b-3218c4hxp1] {
    width: 1.25rem;
    height: 1.25rem;
}

.link-text[b-3218c4hxp1] {
    flex: 1;
    font-weight: 500;
}

.link-badge[b-3218c4hxp1] {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.2);
    color: var(--wl-gold);
    border-radius: 0.25rem;
    font-weight: 700;
}

.link-badge.live[b-3218c4hxp1] {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    animation: pulse-glow-red-b-3218c4hxp1 2s ease-in-out infinite;
}

@keyframes pulse-glow-red-b-3218c4hxp1 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 6px 2px rgba(239, 68, 68, 0.2); }
}

/* Loading */
.loading-container[b-3218c4hxp1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.loading-spinner[b-3218c4hxp1] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-3218c4hxp1 0.8s linear infinite;
}

@keyframes spin-b-3218c4hxp1 {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 640px) {
    .fashion-hub[b-3218c4hxp1] {
        padding: 1rem;
    }

    .hub-header[b-3218c4hxp1] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .header-content[b-3218c4hxp1] {
        flex-direction: column;
    }

    .header-text h1[b-3218c4hxp1] {
        font-size: 1.75rem;
    }

    .season-badge[b-3218c4hxp1] {
        align-items: center;
    }

    .stats-row[b-3218c4hxp1] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Career/Fashion/Season/Index.razor.rz.scp.css */
.season-page[b-ht7h729dr5] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
}

/* Header */
.page-header[b-ht7h729dr5] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
}

.back-link[b-ht7h729dr5] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-subtle);
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 1.25rem;
}

.back-link:hover[b-ht7h729dr5] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.back-link svg[b-ht7h729dr5] {
    width: 1.25rem;
    height: 1.25rem;
}

.header-eyebrow[b-ht7h729dr5] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-gold);
    font-weight: 600;
}

.header-text h1[b-ht7h729dr5] {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.95);
    margin: 0.25rem 0;
}

.header-subtitle[b-ht7h729dr5] {
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-size: 0.95rem;
    margin: 0;
    font-style: italic;
}

/* Season Banner */
.season-banner[b-ht7h729dr5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.06), rgba(var(--wl-gold-rgb), 0.02));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 0.875rem;
    margin-bottom: 2rem;
    gap: 1.5rem;
}

.banner-left[b-ht7h729dr5] {
    display: flex;
    flex-direction: column;
}

.season-type[b-ht7h729dr5] {
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.season-year[b-ht7h729dr5] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--wl-gold);
    line-height: 1.1;
}

.banner-right[b-ht7h729dr5] {
    text-align: right;
}

.fw-city[b-ht7h729dr5] {
    font-size: 0.9rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-weight: 500;
}

/* Phase Track */
.phase-track[b-ht7h729dr5] {
    display: flex;
    align-items: center;
    gap: 0;
}

.phase-node[b-ht7h729dr5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.phase-dot[b-ht7h729dr5] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.15);
    transition: all 0.3s ease;
}

.phase-node.active .phase-dot[b-ht7h729dr5] {
    background: var(--wl-gold);
    border-color: var(--wl-gold);
    box-shadow: 0 0 6px rgba(var(--wl-gold-rgb), 0.3);
}

.phase-name[b-ht7h729dr5] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    white-space: nowrap;
}

.phase-node.active .phase-name[b-ht7h729dr5] {
    color: var(--wl-gold);
    font-weight: 600;
}

.phase-connector[b-ht7h729dr5] {
    width: 40px;
    height: 2px;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    margin: 0 0.25rem;
    margin-bottom: 1.1rem;
    transition: all 0.3s ease;
}

.phase-connector.active[b-ht7h729dr5] {
    background: var(--wl-gold);
}

/* Phase Timer */
.phase-timer[b-ht7h729dr5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    margin-bottom: 2rem;
}

.phase-timer-label[b-ht7h729dr5] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wl-gold);
    font-weight: 600;
    white-space: nowrap;
    min-width: 5rem;
}

.phase-timer-bar[b-ht7h729dr5] {
    flex: 1;
    height: 4px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.phase-timer-fill[b-ht7h729dr5] {
    height: 100%;
    background: var(--wl-gold);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.phase-timer-info[b-ht7h729dr5] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    white-space: nowrap;
}

.phase-timer-realtime[b-ht7h729dr5] {
    font-size: 0.7rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

/* Report Grid */
.report-grid[b-ht7h729dr5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.report-card[b-ht7h729dr5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.875rem;
    text-align: center;
}

.card-value[b-ht7h729dr5] {
    font-size: 2rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.card-value.score[b-ht7h729dr5] {
    color: var(--wl-gold);
}

.card-value.credits[b-ht7h729dr5] {
    color: var(--wl-gold);
    font-size: 1.5rem;
}

.card-value.positive[b-ht7h729dr5] {
    color: #4ade80;
}

.card-value.negative[b-ht7h729dr5] {
    color: #f87171;
}

.card-label[b-ht7h729dr5] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.45);
}

/* Best Look */
.best-look-card[b-ht7h729dr5] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.06), rgba(var(--wl-gold-rgb), 0.02));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.875rem;
    margin-bottom: 1.5rem;
}

.best-look-icon[b-ht7h729dr5] {
    width: 3rem;
    height: 3rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.best-look-icon svg[b-ht7h729dr5] {
    width: 100%;
    height: 100%;
}

.best-look-info[b-ht7h729dr5] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.best-look-info h3[b-ht7h729dr5] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    margin: 0;
    font-weight: 600;
}

.best-look-score[b-ht7h729dr5] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--wl-gold);
    line-height: 1.1;
}

.best-look-feedback[b-ht7h729dr5] {
    font-size: 0.85rem;
    color: rgba(var(--wl-contrast-rgb), 0.55);
    font-style: italic;
}

/* Fashion Week Result */
.fw-result[b-ht7h729dr5] {
    padding: 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.875rem;
    margin-bottom: 1.5rem;
}

.fw-result-header[b-ht7h729dr5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin-bottom: 0.75rem;
}

.fw-result-header svg[b-ht7h729dr5] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-gold);
}

.perfect-week-badge[b-ht7h729dr5] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.12), rgba(var(--wl-gold-rgb), 0.04));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 0.5rem;
    color: var(--wl-gold);
    font-weight: 700;
    font-size: 0.9rem;
}

/* No Report */
.no-report[b-ht7h729dr5] {
    text-align: center;
    padding: 2rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-style: italic;
}

.no-report p[b-ht7h729dr5] {
    margin: 0;
}

/* Empty State */
.empty-state[b-ht7h729dr5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon[b-ht7h729dr5] {
    width: 4rem;
    height: 4rem;
    color: rgba(var(--wl-contrast-rgb), 0.12);
    margin-bottom: 0.75rem;
}

.empty-icon svg[b-ht7h729dr5] {
    width: 100%;
    height: 100%;
}

.empty-state h3[b-ht7h729dr5] {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 0.35rem;
}

.empty-state p[b-ht7h729dr5] {
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-size: 0.9rem;
    margin: 0;
    max-width: 380px;
}

/* Loading */
.loading-container[b-ht7h729dr5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.loading-spinner[b-ht7h729dr5] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-ht7h729dr5 0.8s linear infinite;
}

@keyframes spin-b-ht7h729dr5 {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
    .season-page[b-ht7h729dr5] {
        padding: 1rem;
    }

    .header-text h1[b-ht7h729dr5] {
        font-size: 1.5rem;
    }

    .season-banner[b-ht7h729dr5] {
        flex-direction: column;
        text-align: center;
    }

    .banner-right[b-ht7h729dr5] {
        text-align: center;
    }

    .phase-track[b-ht7h729dr5] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .report-grid[b-ht7h729dr5] {
        grid-template-columns: repeat(2, 1fr);
    }

    .best-look-card[b-ht7h729dr5] {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .report-grid[b-ht7h729dr5] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Career/Film/Acting/GigOutcomeModal.razor.rz.scp.css */
.gig-modal-backdrop[b-ov32nmtdk9] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: gigOverlayFade-b-ov32nmtdk9 0.25s ease both;
}

@keyframes gigOverlayFade-b-ov32nmtdk9 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.gig-modal[b-ov32nmtdk9] {
    width: 100%;
    max-width: 440px;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 2rem 1.75rem;
    text-align: center;
    animation: gigModalAppear-b-ov32nmtdk9 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes gigModalAppear-b-ov32nmtdk9 {
    from { opacity: 0; transform: scale(0.85) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Tier accent on the modal border + glow. */
.gig-modal.tier-great[b-ov32nmtdk9] { border-color: var(--wl-gold); }
.gig-modal.tier-good[b-ov32nmtdk9] { border-color: var(--wl-purple); }
.gig-modal.tier-poor[b-ov32nmtdk9] { border-color: var(--wl-border-medium); }

/* ── Phase A: performing ── */
.perform-stage[b-ov32nmtdk9] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 0;
    overflow: hidden;
}

.clapper[b-ov32nmtdk9] {
    width: 5rem;
    height: 5rem;
    color: var(--wl-gold);
    position: relative;
}

.clapper-top[b-ov32nmtdk9] {
    position: absolute;
    top: -0.35rem;
    left: 0;
    right: 0;
    height: 0.7rem;
    background: repeating-linear-gradient(45deg, var(--wl-gold) 0 0.5rem, transparent 0.5rem 1rem);
    transform-origin: left center;
    animation: clapperSnap-b-ov32nmtdk9 1.5s ease-in-out infinite;
}

@keyframes clapperSnap-b-ov32nmtdk9 {
    0%, 100% { transform: rotate(-22deg); }
    15% { transform: rotate(2deg); }
    30% { transform: rotate(-22deg); }
}

.clapper-body[b-ov32nmtdk9]  svg { width: 5rem; height: 5rem; }

.spotlight-sweep[b-ov32nmtdk9] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(var(--wl-gold-rgb), 0.22), transparent 45%);
    animation: spotlightSweep-b-ov32nmtdk9 1.8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes spotlightSweep-b-ov32nmtdk9 {
    0% { transform: translateX(-30%); opacity: 0.4; }
    50% { transform: translateX(30%); opacity: 0.9; }
    100% { transform: translateX(-30%); opacity: 0.4; }
}

.perform-label[b-ov32nmtdk9] {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--wl-text-primary);
    margin: 0;
    animation: performPulse-b-ov32nmtdk9 1.2s ease-in-out infinite;
}

@keyframes performPulse-b-ov32nmtdk9 {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

/* ── Phase B: rating reveal ── */
.gig-modal-title[b-ov32nmtdk9] {
    margin: 0 0 1.1rem 0;
    color: var(--wl-text-primary);
    animation: gigTitleReveal-b-ov32nmtdk9 0.4s ease both;
}

@keyframes gigTitleReveal-b-ov32nmtdk9 {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.roll-reveal[b-ov32nmtdk9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.roll-ring[b-ov32nmtdk9] {
    position: relative;
    width: 6rem;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 3px solid var(--wl-gold);
}

.roll-ring[b-ov32nmtdk9]::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px dashed rgba(var(--wl-gold-rgb), 0.5);
    animation: rollRingSpin-b-ov32nmtdk9 0.7s cubic-bezier(0.4, 0.2, 0.6, 0.8) infinite;
}

.roll-reveal.shown .roll-ring[b-ov32nmtdk9]::before { animation-play-state: running; }

@keyframes rollRingSpin-b-ov32nmtdk9 {
    to { transform: rotate(360deg); }
}

.roll-glow[b-ov32nmtdk9] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--wl-gold-rgb), 0.35), transparent 70%);
    animation: rollGlowPulse-b-ov32nmtdk9 1.4s ease-in-out infinite;
}

@keyframes rollGlowPulse-b-ov32nmtdk9 {
    0%, 100% { opacity: 0.4; transform: scale(0.95); }
    50% { opacity: 0.9; transform: scale(1.08); }
}

.roll-number[b-ov32nmtdk9] {
    position: relative;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--wl-gold);
    z-index: 1;
}

.roll-stars[b-ov32nmtdk9] {
    display: flex;
    gap: 0.15rem;
    font-size: 1.5rem;
    color: var(--wl-gold);
    letter-spacing: 0.05em;
}

.star[b-ov32nmtdk9] { opacity: 0.35; transition: opacity 0.15s ease, transform 0.15s ease; display: inline-flex; color: var(--wl-gold); }
.star[b-ov32nmtdk9]  svg { width: 1.6rem; height: 1.6rem; }
.star.filled[b-ov32nmtdk9] { opacity: 1; animation: starPop-b-ov32nmtdk9 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes starPop-b-ov32nmtdk9 {
    from { transform: scale(0.4); }
    to { transform: scale(1); }
}

.roll-caption[b-ov32nmtdk9] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.tier-great .roll-caption[b-ov32nmtdk9] { color: var(--wl-gold); }
.tier-good .roll-caption[b-ov32nmtdk9] { color: var(--wl-purple); }
.tier-poor .roll-caption[b-ov32nmtdk9] { color: var(--wl-text-muted); }

/* ── Phase C: rewards stagger ── */
.reward-lines[b-ov32nmtdk9] {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1.25rem;
    text-align: left;
}

.reward-line[b-ov32nmtdk9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 0.5rem;
    animation: rewardLineIn-b-ov32nmtdk9 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes rewardLineIn-b-ov32nmtdk9 {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

.reward-icon[b-ov32nmtdk9] {
    display: inline-flex;
    color: var(--wl-gold);
}

.reward-icon[b-ov32nmtdk9]  svg {
    width: 1.1rem;
    height: 1.1rem;
}

.reward-label[b-ov32nmtdk9] {
    flex: 1;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    font-size: 0.9rem;
}

.reward-amount[b-ov32nmtdk9] {
    font-weight: 700;
    color: var(--wl-gold);
}

.btn-close[b-ov32nmtdk9] {
    padding: 0.55rem 1.6rem;
    border: none;
    border-radius: 0.6rem;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-weight: 700;
    cursor: pointer;
    animation: rewardLineIn-b-ov32nmtdk9 0.35s ease 0.2s both;
}

.btn-close:hover[b-ov32nmtdk9] { filter: brightness(1.1); }

/* Respect reduced-motion: no spins/pulses/sweeps/staggers - show everything static. */
@media (prefers-reduced-motion: reduce) {
    .gig-modal-backdrop[b-ov32nmtdk9],
    .gig-modal[b-ov32nmtdk9],
    .gig-modal-title[b-ov32nmtdk9],
    .clapper-top[b-ov32nmtdk9],
    .spotlight-sweep[b-ov32nmtdk9],
    .perform-label[b-ov32nmtdk9],
    .roll-ring[b-ov32nmtdk9]::before,
    .roll-glow[b-ov32nmtdk9],
    .star.filled[b-ov32nmtdk9],
    .reward-line[b-ov32nmtdk9],
    .btn-close[b-ov32nmtdk9] {
        animation: none !important;
    }
    .star[b-ov32nmtdk9] { opacity: 1; }
}
/* /Components/Pages/Career/Film/Acting/Index.razor.rz.scp.css */
.acting-page[b-9s5e76vw95] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
}

/* Page-load reveal cascade (the FilmPageHeader leads via its own reveal): the familiarity panel,
   then the offers section, then each gig card rises+fades in with an increasing delay. */
@keyframes actingReveal-b-9s5e76vw95 {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 'backwards' fill (not 'both') so the offer cards' :hover transform-lift still works after the
   reveal completes (a forwards-filled transform would freeze translateY(0) and block hover). */
.acting-page .familiarity-panel[b-9s5e76vw95],
.acting-page .gig-offers[b-9s5e76vw95] { animation: actingReveal-b-9s5e76vw95 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.acting-page .familiarity-panel[b-9s5e76vw95] { animation-delay: 0.08s; }
.acting-page .gig-offers[b-9s5e76vw95] { animation-delay: 0.16s; }
.acting-page .offer-card[b-9s5e76vw95] { animation: actingReveal-b-9s5e76vw95 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.acting-page .offer-card:nth-child(1)[b-9s5e76vw95] { animation-delay: 0.2s; }
.acting-page .offer-card:nth-child(2)[b-9s5e76vw95] { animation-delay: 0.27s; }
.acting-page .offer-card:nth-child(3)[b-9s5e76vw95] { animation-delay: 0.34s; }
.acting-page .offer-card:nth-child(4)[b-9s5e76vw95] { animation-delay: 0.41s; }
.acting-page .offer-card:nth-child(n+5)[b-9s5e76vw95] { animation-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) {
    .acting-page .familiarity-panel[b-9s5e76vw95],
    .acting-page .gig-offers[b-9s5e76vw95],
    .acting-page .offer-card[b-9s5e76vw95] { animation: none; }
}

.acting-toolbar[b-9s5e76vw95] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}

/* Familiarity panel: top genres + traits as chips (the headline number is a header stat card). */
.familiarity-panel[b-9s5e76vw95] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.fam-block[b-9s5e76vw95] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.85rem;
}

.fam-label[b-9s5e76vw95] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--wl-text-muted);
    font-weight: 600;
}

.fam-empty[b-9s5e76vw95] {
    font-size: 0.85rem;
    color: var(--wl-text-muted);
}

.xp-chip[b-9s5e76vw95] {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    margin: 0.1rem 0.15rem 0.1rem 0;
    border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
}

/* Gig offers */
.offers-head[b-9s5e76vw95] {
    margin-bottom: 1rem;
}

.offers-head h2[b-9s5e76vw95] {
    font-size: 1.25rem;
    color: var(--wl-text-primary);
    margin: 0;
}

.offer-list[b-9s5e76vw95] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* Gig card = a 3-column grid: genre-art spine | content (fills the middle) | fee + take action.
   The grid removes the old dead gap and reads like a real offer ticket. */
.offer-card[b-9s5e76vw95] {
    display: grid;
    grid-template-columns: 3.25rem 1fr auto;
    align-items: stretch;
    gap: 0;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.85rem;
    overflow: hidden;
    box-shadow: 0 2px 12px var(--wl-shadow-color);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.offer-card:hover[b-9s5e76vw95] {
    transform: translateY(-3px);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: 0 10px 30px var(--wl-shadow-color), 0 0 22px var(--wl-gold-bg);
}

@media (prefers-reduced-motion: reduce) {
    .offer-card[b-9s5e76vw95], .btn-take[b-9s5e76vw95] { transition: none; }
    .offer-card:hover[b-9s5e76vw95] { transform: none; }
}

/* ── Left genre-art spine: a vertical gradient "poster spine" tinted by the gig's genre, with a
   faint watermark glyph. Defaults to gold; per-genre tints below override the two accent stops. ── */
.offer-spine[b-9s5e76vw95] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    --spine-a: var(--wl-gold);
    --spine-b: #B8962E;
    background: linear-gradient(160deg, var(--spine-a) 0%, var(--spine-b) 100%);
}
.offer-spine[b-9s5e76vw95]::after { /* subtle inner sheen */
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,0.18) 0%, transparent 45%);
    pointer-events: none;
}
.offer-spine-icon[b-9s5e76vw95] {
    display: inline-flex; width: 1.5rem; height: 1.5rem;
    color: rgba(0, 0, 0, 0.55);
    opacity: 0.8;
}
.offer-spine-icon[b-9s5e76vw95]  svg { width: 100%; height: 100%; }

/* Per-genre spine tints (the card carries a genre-X class). */
.offer-card.genre-drama .offer-spine[b-9s5e76vw95] { --spine-a: #6C5CE7; --spine-b: #4834A6; }
.offer-card.genre-comedy .offer-spine[b-9s5e76vw95] { --spine-a: #F5B642; --spine-b: #C8881B; }
.offer-card.genre-action .offer-spine[b-9s5e76vw95] { --spine-a: #E0533D; --spine-b: #A8321F; }
.offer-card.genre-thriller .offer-spine[b-9s5e76vw95] { --spine-a: #3D7BE0; --spine-b: #234C99; }
.offer-card.genre-horror .offer-spine[b-9s5e76vw95] { --spine-a: #8B2F4A; --spine-b: #54172A; }
.offer-card.genre-scifi .offer-spine[b-9s5e76vw95] { --spine-a: #1FB6C8; --spine-b: #127986; }
.offer-card.genre-romance .offer-spine[b-9s5e76vw95] { --spine-a: #E06A9C; --spine-b: #A83C6C; }
.offer-card.genre-documentary .offer-spine[b-9s5e76vw95] { --spine-a: #6B7A8F; --spine-b: #3F4A59; }

.offer-main[b-9s5e76vw95] { padding: 1.1rem 1.25rem; min-width: 0; }
.offer-action[b-9s5e76vw95] {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.6rem; padding: 1.1rem 1.25rem; flex-shrink: 0;
    border-left: 1px solid var(--wl-border-subtle);
    background: rgba(var(--wl-contrast-rgb), 0.02);
}

.offer-title-row[b-9s5e76vw95] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.offer-name[b-9s5e76vw95] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wl-text-primary);
}

.adult-badge[b-9s5e76vw95] {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
    background: rgba(var(--wl-red-rgb), 0.15);
    color: var(--wl-red);
}

.offer-desc[b-9s5e76vw95] {
    font-size: 0.85rem;
    color: rgba(var(--wl-contrast-rgb), 0.65);
    margin: 0 0 0.5rem 0;
}

.offer-tags[b-9s5e76vw95] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

/* Larger, clearer color-coded chips, each with a leading icon. */
.tag[b-9s5e76vw95] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: rgba(var(--wl-contrast-rgb), 0.8);
    border: 1px solid transparent;
}
.tag-icon[b-9s5e76vw95] { display: inline-flex; width: 0.9rem; height: 0.9rem; flex-shrink: 0; }
.tag-icon[b-9s5e76vw95]  svg { width: 100%; height: 100%; }

.tag.genre[b-9s5e76vw95] { background: rgba(var(--wl-gold-rgb), 0.12); color: var(--wl-gold); border-color: rgba(var(--wl-gold-rgb), 0.25); }
.tag.trait[b-9s5e76vw95] { background: rgba(var(--wl-purple-rgb), 0.14); color: var(--wl-purple-light); border-color: rgba(var(--wl-purple-rgb), 0.25); }
.tag.diff[b-9s5e76vw95] { background: rgba(var(--wl-cyan-rgb), 0.12); color: rgb(var(--wl-cyan-rgb)); border-color: rgba(var(--wl-cyan-rgb), 0.25); }
.tag.energy[b-9s5e76vw95] { background: rgba(var(--wl-green-rgb), 0.12); color: var(--wl-green); border-color: rgba(var(--wl-green-rgb), 0.25); }

/* Prominent gold fee badge (boxed) instead of a bare number. */
.offer-fee[b-9s5e76vw95] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.9rem;
    border-radius: 0.7rem;
    background: var(--wl-gold-bg);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.35);
    box-shadow: inset 0 0 18px rgba(var(--wl-gold-rgb), 0.08);
}
.offer-fee-amount[b-9s5e76vw95] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.85rem;
    line-height: 1;
    color: var(--wl-gold);
    text-shadow: 0 0 24px rgba(var(--wl-gold-rgb), 0.3);
    font-variant-numeric: tabular-nums;
}
.offer-fee-unit[b-9s5e76vw95] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(var(--wl-gold-rgb), 0.7);
    margin-top: 0.1rem;
}

.btn-take[b-9s5e76vw95] {
    padding: 0.55rem 1.4rem;
    border: none;
    border-radius: 0.6rem;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.18s ease, box-shadow 0.18s ease;
}

.btn-take:hover:not(:disabled)[b-9s5e76vw95] { filter: brightness(1.1); box-shadow: 0 0 18px rgba(var(--wl-gold-rgb), 0.3); }
.btn-take:disabled[b-9s5e76vw95] { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 560px) {
    .offer-card[b-9s5e76vw95] { grid-template-columns: 0.5rem 1fr; }
    .offer-spine-icon[b-9s5e76vw95] { display: none; }
    .offer-action[b-9s5e76vw95] { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; border-left: none; border-top: 1px solid var(--wl-border-subtle); }
}

/* Outcome modal styles live in GigOutcomeModal.razor.css (its own scoped component). */

.loading-container[b-9s5e76vw95] {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    padding: 3rem; color: var(--wl-text-muted);
}

.loading-spinner[b-9s5e76vw95] {
    width: 2.5rem; height: 2.5rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: acting-spin-b-9s5e76vw95 0.8s linear infinite;
}

@keyframes acting-spin-b-9s5e76vw95 { to { transform: rotate(360deg); } }

.empty-state[b-9s5e76vw95] { padding: 2rem; text-align: center; color: var(--wl-text-muted); }
/* /Components/Pages/Career/Film/Acting/Scenes.razor.rz.scp.css */
.myscenes-page[b-7c2jus7eef] { max-width: 1100px; margin: 0 auto; padding: 2rem 2rem 9rem; }
.myscenes-toolbar[b-7c2jus7eef] { margin-bottom: 1rem; }
.back-link[b-7c2jus7eef] { color: var(--wl-gold); text-decoration: none; font-size: 0.9rem; }

.myscenes-section-head[b-7c2jus7eef] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
    margin: 2rem 0 0.75rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}
.myscenes-section-head h2[b-7c2jus7eef] {
    margin: 0;
    color: var(--wl-text-primary);
    font-size: 1.05rem;
    font-weight: 800;
}
.myscenes-section-head p[b-7c2jus7eef] {
    margin: 0.25rem 0 0;
    color: var(--wl-text-muted);
    font-size: 0.86rem;
}
.myscenes-section-head span[b-7c2jus7eef] {
    flex-shrink: 0;
    color: rgba(var(--wl-gold-rgb), 0.85);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Film block: a film the actor holds a role in (poster + title + status), with role blocks under it ── */
.film-block[b-7c2jus7eef] {
    margin-top: 1.5rem;
    padding: 1.1rem 1.2rem 1.2rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.5) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.9rem;
}
.film-block-head[b-7c2jus7eef] { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.9rem; }
.film-block-head[b-7c2jus7eef]  .film-poster { width: 3.4rem; flex-shrink: 0; }
.film-block-meta[b-7c2jus7eef] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.film-block-title-row[b-7c2jus7eef] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.film-block-title[b-7c2jus7eef] { font-size: 1.15rem; font-weight: 700; color: var(--wl-text-primary); margin: 0; }
.film-block-genre[b-7c2jus7eef] { font-size: 0.82rem; color: var(--wl-text-muted); }

/* Status pill (mirrors the producer pages' .project-status). */
.project-status[b-7c2jus7eef] {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.15rem 0.55rem; border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08); color: var(--wl-text-muted); white-space: nowrap;
}
.project-status.status-shooting[b-7c2jus7eef] { background: rgba(var(--wl-gold-rgb), 0.18); color: var(--wl-gold); }
.project-status.status-released[b-7c2jus7eef], .project-status.status-concluded[b-7c2jus7eef] { background: rgba(var(--wl-gold-rgb), 0.12); color: var(--wl-gold-light); }

/* ── Role block: the actor's role in this film + its scenes (or an awaiting state) ── */
.role-block[b-7c2jus7eef] { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--wl-border-subtle); }
.role-block:first-of-type[b-7c2jus7eef] { border-top: none; padding-top: 0; margin-top: 0; }
.role-block-head[b-7c2jus7eef] { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.role-name[b-7c2jus7eef] { font-weight: 700; color: var(--wl-text-primary); }
.role-billing[b-7c2jus7eef] {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 0.1rem 0.45rem; border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08); color: var(--wl-text-muted);
}
.role-billing.billing-lead[b-7c2jus7eef] { background: rgba(var(--wl-gold-rgb), 0.18); color: var(--wl-gold); }
.archetype-chip[b-7c2jus7eef] {
    font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.06); color: rgba(var(--wl-contrast-rgb), 0.7);
    display: inline-flex; align-items: center; gap: 0.25rem;
}
.trait-adult[b-7c2jus7eef] { font-size: 0.6rem; font-weight: 800; color: var(--wl-red); }

/* Awaiting state for a role with no scenes yet. */
.role-awaiting[b-7c2jus7eef] {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.85rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 0.7rem;
    color: var(--wl-text-muted); font-size: 0.88rem;
}
.awaiting-icon[b-7c2jus7eef] { display: inline-flex; width: 1.3rem; height: 1.3rem; flex-shrink: 0; color: rgba(var(--wl-gold-rgb), 0.6); }
.awaiting-icon[b-7c2jus7eef]  svg, .awaiting-icon svg[b-7c2jus7eef] { width: 100%; height: 100%; }

.btn-action[b-7c2jus7eef] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1rem; border: 1px solid var(--wl-border-medium); border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.04); color: var(--wl-text-primary);
    font-weight: 600; cursor: pointer; transition: all 0.18s ease;
}
.btn-action:hover:not(:disabled)[b-7c2jus7eef] { background: rgba(var(--wl-contrast-rgb), 0.08); border-color: rgba(var(--wl-gold-rgb), 0.3); }
.btn-action.primary[b-7c2jus7eef] { background: var(--wl-gold); color: var(--wl-bg-primary); border: none; }
.btn-action.primary:hover:not(:disabled)[b-7c2jus7eef] { background: var(--wl-gold-light); box-shadow: 0 0 18px rgba(var(--wl-gold-rgb), 0.25); }
.btn-action.small[b-7c2jus7eef] { padding: 0.32rem 0.7rem; font-size: 0.82rem; }
.btn-action:disabled[b-7c2jus7eef] { opacity: 0.5; cursor: not-allowed; }
.btn-icon[b-7c2jus7eef] { display: inline-flex; width: 1rem; height: 1rem; }
.btn-icon[b-7c2jus7eef]  svg { width: 100%; height: 100%; }

.empty-state[b-7c2jus7eef] { padding: 2rem; text-align: center; color: var(--wl-text-muted); }
.loading-container[b-7c2jus7eef] { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem; color: var(--wl-text-muted); }
.loading-spinner[b-7c2jus7eef] { width: 2.5rem; height: 2.5rem; border: 3px solid var(--wl-border-medium); border-top-color: var(--wl-gold); border-radius: 50%; animation: msSpin-b-7c2jus7eef 0.8s linear infinite; }
@keyframes msSpin-b-7c2jus7eef { to { transform: rotate(360deg); } }

/* ── Scene rows ── */
.scene-list[b-7c2jus7eef] { display: flex; flex-direction: column; gap: 0.55rem; }
.scene-row[b-7c2jus7eef] {
    display: flex; flex-direction: column; gap: 0.55rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-subtle); border-radius: 0.8rem;
    box-shadow: 0 2px 12px var(--wl-shadow-color);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.scene-head[b-7c2jus7eef] { display: flex; align-items: center; gap: 0.9rem; }
.scene-avg[b-7c2jus7eef] {
    font-weight: 800; font-variant-numeric: tabular-nums; color: var(--wl-gold);
    background: var(--wl-gold-bg); border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.45rem; padding: 0.1rem 0.5rem; flex-shrink: 0;
}
/* The actor's OWN performance element - the prominent recordable row. */
.my-element[b-7c2jus7eef] {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    background: rgba(var(--wl-gold-rgb), 0.06);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22); border-radius: 0.6rem;
}
.my-element .element-icon[b-7c2jus7eef] { display: inline-flex; width: 1.1rem; height: 1.1rem; color: var(--wl-gold); flex-shrink: 0; }
.my-element .element-icon[b-7c2jus7eef]  svg { width: 100%; height: 100%; }
.my-element .element-copy[b-7c2jus7eef] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.my-element .element-label[b-7c2jus7eef] { min-width: 0; font-weight: 700; color: var(--wl-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-element .element-meta[b-7c2jus7eef] { font-size: 0.74rem; color: rgba(var(--wl-contrast-rgb), 0.58); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.my-element .element-score[b-7c2jus7eef] {
    font-weight: 800; font-variant-numeric: tabular-nums; color: var(--wl-gold);
    background: var(--wl-gold-bg); border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.45rem; padding: 0.08rem 0.4rem; cursor: pointer; font-size: 0.82rem;
}
/* Read-only mini-list of the other elements (direction, other actors, music). */
.other-elements[b-7c2jus7eef] { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; padding-left: 0.2rem; }
.other-el[b-7c2jus7eef] {
    display: inline-grid;
    grid-template-columns: auto auto;
    gap: 0.02rem 0.45rem;
    align-items: baseline;
    max-width: 100%;
    padding: 0.28rem 0.45rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.45rem;
    background: rgba(var(--wl-contrast-rgb), 0.025);
    font-size: 0.76rem;
    color: var(--wl-text-muted);
}
.other-el.recorded[b-7c2jus7eef] {
    border-color: rgba(var(--wl-gold-rgb), 0.18);
    background: rgba(var(--wl-gold-rgb), 0.035);
    color: rgba(var(--wl-contrast-rgb), 0.75);
}
.other-label[b-7c2jus7eef] { font-weight: 700; color: var(--wl-text-primary); }
.other-meta[b-7c2jus7eef] {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(var(--wl-contrast-rgb), 0.52);
}
.other-score[b-7c2jus7eef] { font-weight: 800; color: var(--wl-gold); font-variant-numeric: tabular-nums; }
.other-el.pending .other-score[b-7c2jus7eef] { color: var(--wl-text-muted); }
.scene-row:hover[b-7c2jus7eef] {
    transform: translateY(-2px);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: 0 8px 24px var(--wl-shadow-color), 0 0 18px var(--wl-gold-bg);
}
@media (prefers-reduced-motion: reduce) {
    .scene-row[b-7c2jus7eef] { transition: none; }
    .scene-row:hover[b-7c2jus7eef] { transform: none; }
}
.scene-row.status-completed[b-7c2jus7eef] { border-color: rgba(var(--wl-gold-rgb), 0.3); }
.scene-main[b-7c2jus7eef] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.scene-title-row[b-7c2jus7eef] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.scene-type[b-7c2jus7eef] { font-weight: 700; color: var(--wl-text-primary); }
.scene-duration-pill[b-7c2jus7eef] {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.07);
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}
.role-tag[b-7c2jus7eef] {
    font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.12); color: var(--wl-gold);
}
.scene-state[b-7c2jus7eef] { font-size: 0.82rem; color: rgba(var(--wl-contrast-rgb), 0.6); }
.scene-side[b-7c2jus7eef] { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.scene-locked[b-7c2jus7eef] {
    font-size: 0.82rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-style: italic;
    padding: 0.32rem 0.6rem;
}
.quality-badge[b-7c2jus7eef] {
    min-width: 2.6rem; padding: 0.3rem 0.5rem; border-radius: 0.5rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4); background: var(--wl-gold-bg); color: var(--wl-gold);
    font-weight: 800; font-variant-numeric: tabular-nums; cursor: pointer;
}
.event-pill[b-7c2jus7eef] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.12rem 0.5rem; border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.12); color: var(--wl-gold);
    border: none; cursor: pointer; font-size: 0.72rem; font-weight: 600;
}
.event-pill .btn-icon[b-7c2jus7eef] { width: 0.8rem; height: 0.8rem; }
.event-pill.pending[b-7c2jus7eef] { background: rgba(var(--wl-gold-rgb), 0.22); animation: msPulse-b-7c2jus7eef 1.6s ease-in-out infinite; }
@keyframes msPulse-b-7c2jus7eef { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ── Report modal (same idioms as the producer shoot page) ── */
.report-modal-overlay[b-7c2jus7eef] {
    position: fixed; inset: 0; z-index: 9000;
    background: var(--wl-overlay-bg); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 80px 20px 20px; overflow-y: auto; animation: msFade-b-7c2jus7eef 0.2s ease-out;
}
@keyframes msFade-b-7c2jus7eef { from { opacity: 0; } to { opacity: 1; } }
.report-modal[b-7c2jus7eef] {
    position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 100px);
    display: flex; flex-direction: column; overflow: hidden; border-radius: 0.9rem;
    background: linear-gradient(135deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%);
    border: 1px solid var(--wl-gold-border);
    box-shadow: 0 25px 80px var(--wl-shadow-color), 0 0 100px rgba(var(--wl-gold-rgb), 0.05);
    animation: msRise-b-7c2jus7eef 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes msRise-b-7c2jus7eef { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.report-header[b-7c2jus7eef] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--wl-gold-bg-hover); flex-shrink: 0; }
.report-header h2[b-7c2jus7eef] { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--wl-gold); }
.report-title-stack[b-7c2jus7eef] { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.report-title-stack h2[b-7c2jus7eef] { line-height: 1.15; }
.report-title-stack p[b-7c2jus7eef] {
    margin: 0;
    color: rgba(var(--wl-contrast-rgb), 0.68);
    font-size: 0.86rem;
    line-height: 1.35;
}
.report-eyebrow[b-7c2jus7eef] {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}
.close-btn[b-7c2jus7eef] { width: 34px; height: 34px; padding: 7px; background: rgba(var(--wl-contrast-rgb), 0.03); border: 1px solid var(--wl-border-medium); border-radius: 0.5rem; color: rgba(var(--wl-contrast-rgb), 0.6); cursor: pointer; }
.close-btn:hover[b-7c2jus7eef] { background: var(--wl-gold-bg); color: var(--wl-gold); }
.close-btn[b-7c2jus7eef]  svg { width: 100%; height: 100%; }

.report-quality-hero[b-7c2jus7eef] { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.35rem 1.25rem 1rem; }
.hero-gauge[b-7c2jus7eef] { position: relative; width: 130px; height: 130px; }
.hero-ring[b-7c2jus7eef] { width: 100%; height: 100%; transform: rotate(-90deg); }
.hero-ring-bg[b-7c2jus7eef] { fill: none; stroke: rgba(var(--wl-contrast-rgb), 0.1); stroke-width: 2.5; }
.hero-ring-fill[b-7c2jus7eef] { fill: none; stroke-width: 2.5; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.hero-center[b-7c2jus7eef] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.1rem; }
.hero-value[b-7c2jus7eef] { font-size: 2.2rem; font-weight: 800; color: var(--wl-gold); }
.hero-max[b-7c2jus7eef] { font-size: 0.9rem; color: rgba(var(--wl-contrast-rgb), 0.5); }
.report-stats[b-7c2jus7eef] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
.report-stat[b-7c2jus7eef] {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.025);
}
.report-stat span[b-7c2jus7eef] {
    display: block;
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.48);
}
.report-stat strong[b-7c2jus7eef] {
    display: block;
    margin-top: 0.18rem;
    color: var(--wl-text-primary);
    font-variant-numeric: tabular-nums;
}

.report-factors[b-7c2jus7eef] { padding: 0.5rem 1.25rem; overflow-y: auto; flex: 1; min-height: 0; }
.factor-group[b-7c2jus7eef] { margin-bottom: 1rem; }
.factor-group h3[b-7c2jus7eef] { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(var(--wl-contrast-rgb), 0.5); margin: 0 0 0.4rem 0; }
.factor-row[b-7c2jus7eef] { padding: 0.45rem 0; border-bottom: 1px solid var(--wl-border-subtle); }
.factor-header[b-7c2jus7eef] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.factor-title[b-7c2jus7eef] { font-size: 0.88rem; color: var(--wl-text-primary); }
.contribution-value[b-7c2jus7eef] { font-weight: 700; font-variant-numeric: tabular-nums; }
.factor-row.positive .contribution-value[b-7c2jus7eef] { color: var(--wl-gold); }
.factor-row.negative .contribution-value[b-7c2jus7eef] { color: rgba(var(--wl-contrast-rgb), 0.55); }
.factor-progress[b-7c2jus7eef] { margin-top: 0.35rem; }
.progress-track[b-7c2jus7eef] { height: 4px; border-radius: 2px; background: var(--wl-border-medium); overflow: hidden; }
.progress-fill[b-7c2jus7eef] { height: 100%; background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light)); border-radius: 2px; transition: width 0.4s ease; }

.report-tips[b-7c2jus7eef] { padding: 0.5rem 1.25rem 1.25rem; }
.report-tips h3[b-7c2jus7eef] { font-size: 0.85rem; color: var(--wl-text-primary); margin: 0 0 0.5rem 0; }
.report-tips ul[b-7c2jus7eef] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.report-tips li[b-7c2jus7eef] { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: rgba(var(--wl-contrast-rgb), 0.75); }
.report-tips .btn-icon[b-7c2jus7eef] { color: var(--wl-gold); flex-shrink: 0; }

.event-card[b-7c2jus7eef] { margin: 0 1.25rem 0.75rem; padding: 0.8rem 1rem; border-radius: 0.6rem; background: rgba(var(--wl-contrast-rgb), 0.04); border: 1px solid var(--wl-border-subtle); }
.event-card.pending[b-7c2jus7eef] { border-color: rgba(var(--wl-gold-rgb), 0.5); background: var(--wl-gold-bg); }
.event-card-head[b-7c2jus7eef] { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--wl-gold); }
.event-card-head .btn-icon[b-7c2jus7eef] { width: 0.9rem; height: 0.9rem; }
.event-card-desc[b-7c2jus7eef] { margin: 0.4rem 0 0.5rem 0; font-size: 0.85rem; color: rgba(var(--wl-contrast-rgb), 0.8); }
.event-choices[b-7c2jus7eef] { display: flex; flex-wrap: wrap; gap: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
    .report-modal[b-7c2jus7eef], .report-modal-overlay[b-7c2jus7eef], .event-pill.pending[b-7c2jus7eef], .progress-fill[b-7c2jus7eef], .hero-ring-fill[b-7c2jus7eef], .loading-spinner[b-7c2jus7eef] { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
    .myscenes-page[b-7c2jus7eef] { padding: 1.25rem 1.25rem 9rem; }
    .myscenes-section-head[b-7c2jus7eef] { align-items: flex-start; flex-direction: column; }
    .report-modal-overlay[b-7c2jus7eef] { padding: 70px 12px 12px; }
    .report-stats[b-7c2jus7eef] { grid-template-columns: 1fr; }
    .scene-row[b-7c2jus7eef] { flex-wrap: wrap; }
}
/* /Components/Pages/Career/Film/BoxOffice/Index.razor.rz.scp.css */
.film-boxoffice[b-33yocznneh] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
}

.bo-header h1[b-33yocznneh] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0 0 0.35rem 0;
}

.bo-header .subtitle[b-33yocznneh] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0 0 1.5rem 0;
}

/* Positioned ranking (mirrors the music Charts rows): rank numeral + poster + bar + movement. */
.bo-ranking[b-33yocznneh] { display: flex; flex-direction: column; gap: 0.5rem; }

.bo-row[b-33yocznneh] {
    display: grid;
    grid-template-columns: 3rem 44px 1fr auto auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 1rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.8rem;
    box-shadow: 0 2px 10px var(--wl-shadow-color);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.bo-row:hover[b-33yocznneh] {
    transform: translateY(-2px);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    box-shadow: 0 8px 22px var(--wl-shadow-color), 0 0 16px var(--wl-gold-bg);
}

.bo-rank[b-33yocznneh] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    line-height: 1;
    text-align: center;
    color: var(--wl-text-muted);
}
/* Top-3 medals. */
.rank-1 .bo-rank[b-33yocznneh] { color: var(--wl-gold); text-shadow: 0 0 16px rgba(var(--wl-gold-rgb), 0.5); font-size: 2rem; }
.rank-2 .bo-rank[b-33yocznneh] { color: #c8d0dc; text-shadow: 0 0 12px rgba(200, 208, 220, 0.4); font-size: 1.85rem; }
.rank-3 .bo-rank[b-33yocznneh] { color: #cd8a52; text-shadow: 0 0 12px rgba(205, 138, 82, 0.4); font-size: 1.85rem; }
.rank-1[b-33yocznneh] { border-color: rgba(var(--wl-gold-rgb), 0.4); }

.bo-main[b-33yocznneh] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.bo-title[b-33yocznneh] {
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bo-sub[b-33yocznneh] { font-size: 0.75rem; color: var(--wl-text-muted); }

.bo-bar-track[b-33yocznneh] {
    height: 5px;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    overflow: hidden;
    margin-top: 0.15rem;
}
.bo-bar-fill[b-33yocznneh] {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.5) 0%, var(--wl-gold) 100%);
}

.bo-gross[b-33yocznneh] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    color: var(--wl-text-primary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}
.bo-gross-unit[b-33yocznneh] { font-size: 0.7rem; color: var(--wl-text-muted); }

.mv[b-33yocznneh] { font-weight: 700; font-size: 0.85rem; }
.mv-up[b-33yocznneh] { color: var(--wl-green); }
.mv-down[b-33yocznneh] { color: var(--wl-red); }
.mv-same[b-33yocznneh] { color: var(--wl-text-muted); }
.mv-new[b-33yocznneh] {
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 0.3rem;
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
}

@media (prefers-reduced-motion: reduce) {
    .bo-row[b-33yocznneh] { transition: none; }
    .bo-row:hover[b-33yocznneh] { transform: none; }
}

@media (max-width: 640px) {
    .bo-row[b-33yocznneh] { grid-template-columns: 2.2rem 36px 1fr auto; }
    .bo-move[b-33yocznneh] { display: none; }
}

.loading-container[b-33yocznneh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--wl-text-muted);
}

.loading-spinner[b-33yocznneh] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: bo-spin-b-33yocznneh 0.8s linear infinite;
}

@keyframes bo-spin-b-33yocznneh {
    to { transform: rotate(360deg); }
}

.empty-state[b-33yocznneh] {
    padding: 2rem;
    text-align: center;
    color: var(--wl-text-muted);
}
/* /Components/Pages/Career/Film/Casting/Index.razor.rz.scp.css */
.film-casting[b-rhmob5qu5x] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
}

.casting-header h1[b-rhmob5qu5x] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0 0 0.35rem 0;
}

.casting-header .subtitle[b-rhmob5qu5x] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0 0 1.5rem 0;
}

.my-familiarity[b-rhmob5qu5x] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    background: rgba(var(--wl-gold-rgb), 0.06);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.6rem;
}

.fam-label[b-rhmob5qu5x] {
    font-size: 0.85rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.fam-chip[b-rhmob5qu5x] {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
}

.role-list[b-rhmob5qu5x] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.role-card[b-rhmob5qu5x] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem 1.1rem 1.4rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.85rem;
    overflow: hidden;
    box-shadow: 0 2px 12px var(--wl-shadow-color);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.role-card[b-rhmob5qu5x]::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.2) 100%);
    opacity: 0.7;
}

.role-card:hover[b-rhmob5qu5x] {
    transform: translateY(-3px);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: 0 10px 30px var(--wl-shadow-color), 0 0 22px var(--wl-gold-bg);
}

@media (prefers-reduced-motion: reduce) {
    .role-card[b-rhmob5qu5x] { transition: none; }
    .role-card:hover[b-rhmob5qu5x] { transform: none; }
}

.role-title-row[b-rhmob5qu5x] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}

.role-name[b-rhmob5qu5x] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wl-text-primary);
}

.role-billing[b-rhmob5qu5x] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.75);
}

.billing-lead[b-rhmob5qu5x] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
}

.role-film[b-rhmob5qu5x] {
    display: block;
    font-size: 0.85rem;
    color: rgba(var(--wl-contrast-rgb), 0.65);
    margin-bottom: 0.5rem;
}

.role-chips[b-rhmob5qu5x] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    margin-top: 0.15rem;
}

.trait-chip[b-rhmob5qu5x] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: rgba(var(--wl-contrast-rgb), 0.8);
}
.trait-adult[b-rhmob5qu5x] {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.02rem 0.25rem;
    border-radius: 0.25rem;
    background: rgba(var(--wl-red-rgb), 0.18);
    color: var(--wl-red);
}

/* Min-skill chip (matches the Details cast-card). */
.skill-chip[b-rhmob5qu5x] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
    font-size: 0.72rem;
    font-weight: 600;
}
.skill-chip .chip-icon[b-rhmob5qu5x] { display: inline-flex; }
.skill-chip .chip-icon[b-rhmob5qu5x]  svg { width: 0.7rem; height: 0.7rem; }

.btn-apply[b-rhmob5qu5x] {
    padding: 0.55rem 1.1rem;
    border: none;
    border-radius: 0.6rem;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.2s ease;
}

.btn-apply:hover:not(:disabled)[b-rhmob5qu5x] {
    filter: brightness(1.1);
}

.btn-apply:disabled[b-rhmob5qu5x] {
    opacity: 0.5;
    cursor: not-allowed;
}

.applied-badge[b-rhmob5qu5x] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.loading-container[b-rhmob5qu5x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--wl-text-muted);
}

.loading-spinner[b-rhmob5qu5x] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: casting-spin-b-rhmob5qu5x 0.8s linear infinite;
}

@keyframes casting-spin-b-rhmob5qu5x {
    to { transform: rotate(360deg); }
}

.empty-state[b-rhmob5qu5x] {
    padding: 2rem;
    text-align: center;
    color: var(--wl-text-muted);
}
/* /Components/Pages/Career/Film/Dashboard.razor.rz.scp.css */
.film-dashboard[b-hl1jtfsfpc] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
}

.dash-prestige[b-hl1jtfsfpc] {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 1.5rem;
}

.dash-header[b-hl1jtfsfpc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-header h1[b-hl1jtfsfpc] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
}

/* (The dashboard stats now render as FilmStatCard components in the header - the old inline
   .stat-grid/.stat-card/.stat-label/.stat-value CSS was dead after the Phase 2 move and was removed.) */

/* Cinematic quick-nav panel - fills the former dead void with real navigation cards. */
.dash-panel[b-hl1jtfsfpc] {
    position: relative;
    overflow: hidden;
    padding: 1.75rem 1.75rem 2rem;
}
.dash-panel-head[b-hl1jtfsfpc] { margin: 0 0 1.25rem 0.5rem; }
.dash-panel-eyebrow[b-hl1jtfsfpc] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--wl-gold);
    font-weight: 700;
    text-shadow: 0 0 18px rgba(var(--wl-gold-rgb), 0.4);
}
.dash-panel-title[b-hl1jtfsfpc] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.7rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0.25rem 0 0 0;
}
.dash-nav-grid[b-hl1jtfsfpc] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}
.dash-nav-card[b-hl1jtfsfpc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 0.85rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.16);
    background: linear-gradient(180deg, rgba(var(--wl-contrast-rgb), 0.06) 0%, rgba(var(--wl-bg-secondary-rgb), 0.55) 100%);
    color: var(--wl-text-primary);
    text-decoration: none;
    box-shadow: 0 6px 18px -8px var(--wl-shadow-color), inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.07);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.dash-nav-card:hover[b-hl1jtfsfpc] {
    transform: translateY(-3px);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    box-shadow: 0 14px 32px -10px var(--wl-shadow-color), 0 0 24px rgba(var(--wl-gold-rgb), 0.12);
}
.dash-nav-card:focus-visible[b-hl1jtfsfpc] { outline: 2px solid var(--wl-gold-light); outline-offset: 2px; }
.dash-nav-icon[b-hl1jtfsfpc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem; height: 2.6rem;
    flex-shrink: 0;
    border-radius: 0.7rem;
    color: var(--wl-gold);
    background: radial-gradient(circle at 50% 40%, rgba(var(--wl-gold-rgb), 0.18) 0%, rgba(var(--wl-gold-rgb), 0.05) 70%, transparent 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
}
.dash-nav-icon[b-hl1jtfsfpc]  svg { width: 1.4rem; height: 1.4rem; }
.dash-nav-body[b-hl1jtfsfpc] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.dash-nav-label[b-hl1jtfsfpc] { font-weight: 700; color: var(--wl-text-primary); }
.dash-nav-desc[b-hl1jtfsfpc] { font-size: 0.8rem; color: var(--wl-text-muted); }
.dash-nav-arrow[b-hl1jtfsfpc] {
    display: inline-flex; align-items: center;
    color: var(--wl-text-muted); opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}
.dash-nav-arrow[b-hl1jtfsfpc]  svg { width: 1rem; height: 1rem; }
.dash-nav-card:hover .dash-nav-arrow[b-hl1jtfsfpc] { opacity: 1; color: var(--wl-gold); transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .dash-nav-card[b-hl1jtfsfpc], .dash-nav-arrow[b-hl1jtfsfpc] { transition: none; }
    .dash-nav-card:hover[b-hl1jtfsfpc] { transform: none; }
    .dash-nav-card:hover .dash-nav-arrow[b-hl1jtfsfpc] { transform: none; }
}

.loading-container[b-hl1jtfsfpc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--wl-text-muted);
}

.loading-spinner[b-hl1jtfsfpc] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: film-spin-b-hl1jtfsfpc 0.8s linear infinite;
}

@keyframes film-spin-b-hl1jtfsfpc {
    to { transform: rotate(360deg); }
}

.empty-state[b-hl1jtfsfpc] {
    padding: 2rem;
    text-align: center;
    color: var(--wl-text-muted);
}
/* /Components/Pages/Career/Film/Deals/Index.razor.rz.scp.css */
.film-deals[b-ljrfy9uuq1] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
}

.deal-list[b-ljrfy9uuq1] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* AAA card treatment: layered bg + left accent + hover-lift + border-glow (matches music cards). */
.deal-card[b-ljrfy9uuq1] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem 1.25rem 1.1rem 1.4rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.85rem;
    overflow: hidden;
    box-shadow: 0 2px 12px var(--wl-shadow-color);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Contributor-role icon tile (the offer's "what"). */
.deal-role-icon[b-ljrfy9uuq1] {
    display: flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; flex-shrink: 0;
    border-radius: 0.7rem;
    background: var(--wl-gold-bg);
    color: var(--wl-gold);
}
.deal-role-icon.role-author[b-ljrfy9uuq1] { background: rgba(var(--wl-cyan-rgb), 0.12); color: rgb(var(--wl-cyan-rgb)); }
.deal-role-icon.role-composer[b-ljrfy9uuq1] { background: rgba(var(--wl-purple-rgb), 0.14); color: var(--wl-purple-light); }
.deal-role-icon[b-ljrfy9uuq1]  svg { width: 1.5rem; height: 1.5rem; }

.deal-card[b-ljrfy9uuq1]::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.2) 100%);
    opacity: 0.7;
}

.deal-card:hover[b-ljrfy9uuq1] {
    transform: translateY(-3px);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: 0 10px 30px var(--wl-shadow-color), 0 0 22px var(--wl-gold-bg);
}

@media (prefers-reduced-motion: reduce) {
    .deal-card[b-ljrfy9uuq1] { transition: none; }
    .deal-card:hover[b-ljrfy9uuq1] { transform: none; }
}

.deal-title-row[b-ljrfy9uuq1] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}

.deal-film[b-ljrfy9uuq1] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wl-text-primary);
}

.deal-role[b-ljrfy9uuq1] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
}

.deal-rolename[b-ljrfy9uuq1] {
    display: block;
    font-size: 0.85rem;
    color: rgba(var(--wl-contrast-rgb), 0.65);
    margin-bottom: 0.5rem;
}

.deal-terms[b-ljrfy9uuq1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: flex-end;
}

/* Each deal term as a labeled mini-stat (label over value) so the offer reads clearly. */
.term-block[b-ljrfy9uuq1] { display: flex; flex-direction: column; gap: 0.1rem; }
.term-label[b-ljrfy9uuq1] {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
    font-weight: 600;
}
.term-value[b-ljrfy9uuq1] { font-size: 0.95rem; font-weight: 700; color: var(--wl-text-primary); }
.term-value.gold[b-ljrfy9uuq1] { color: var(--wl-gold); }

.deal-actions[b-ljrfy9uuq1] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.btn-accept[b-ljrfy9uuq1],
.btn-decline[b-ljrfy9uuq1] {
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter 0.2s ease, background 0.2s ease;
}

.btn-accept[b-ljrfy9uuq1] {
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    border: none;
}

.btn-accept:hover:not(:disabled)[b-ljrfy9uuq1] {
    filter: brightness(1.1);
}

.btn-decline[b-ljrfy9uuq1] {
    background: transparent;
    border-color: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.btn-decline:hover:not(:disabled)[b-ljrfy9uuq1] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.btn-accept:disabled[b-ljrfy9uuq1],
.btn-decline:disabled[b-ljrfy9uuq1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.loading-container[b-ljrfy9uuq1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--wl-text-muted);
}

.loading-spinner[b-ljrfy9uuq1] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: deals-spin-b-ljrfy9uuq1 0.8s linear infinite;
}

@keyframes deals-spin-b-ljrfy9uuq1 {
    to { transform: rotate(360deg); }
}

.empty-state[b-ljrfy9uuq1] {
    padding: 2rem;
    text-align: center;
    color: var(--wl-text-muted);
}
/* /Components/Pages/Career/Film/Index.razor.rz.scp.css */
.film-hub[b-qglanx3477] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
}

/* Page-load reveal cascade (mirrors the music pages): the hero leads, then the dashboard link,
   then each hub section, each rising+fading in with an increasing delay. Reduced-motion safe. */
@keyframes filmHubReveal-b-qglanx3477 {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.film-hub .hub-header[b-qglanx3477],
.film-hub .dashboard-link[b-qglanx3477],
.film-hub .hub-section[b-qglanx3477] {
    /* 'backwards' (not 'both'): applies the start frame during the delay, then RELEASES the end
       frame so the elements' :hover transform-lift still works (a forwards-filled transform would
       freeze translateY(0) and block hover). */
    animation: filmHubReveal-b-qglanx3477 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.film-hub .dashboard-link[b-qglanx3477] { animation-delay: 0.08s; }
.film-hub .hub-grid .hub-section:nth-child(1)[b-qglanx3477] { animation-delay: 0.16s; }
.film-hub .hub-grid .hub-section:nth-child(2)[b-qglanx3477] { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
    .film-hub .hub-header[b-qglanx3477],
    .film-hub .dashboard-link[b-qglanx3477],
    .film-hub .hub-section[b-qglanx3477] { animation: none; }
}

.hub-header[b-qglanx3477] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    background:
        radial-gradient(ellipse 60% 90% at 92% -10%, rgba(var(--wl-gold-rgb), 0.14) 0%, transparent 55%),
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.08), rgba(var(--wl-gold-rgb), 0.02));
    border-radius: 1rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    overflow: hidden;
}
/* Cinematic atmosphere: soft vignette + faint film-grain, behind content (matches FilmPageHeader). */
.hub-header[b-qglanx3477]::before {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    box-shadow: inset 0 0 110px 8px var(--wl-shadow-color);
    border-radius: inherit;
}
.hub-header[b-qglanx3477]::after {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: 0.4; mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    background-size: 160px 160px; border-radius: inherit;
}
.hub-header .header-content[b-qglanx3477], .hub-header .header-decoration[b-qglanx3477] { position: relative; z-index: 1; }
.hub-header .header-decoration[b-qglanx3477] { filter: drop-shadow(0 0 24px rgba(var(--wl-gold-rgb), 0.25)); }

.header-content h1[b-qglanx3477] {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.5rem 0;
}

.header-content .subtitle[b-qglanx3477] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-size: 1.1rem;
    margin: 0;
}

/* Hub hero emblem: the clapperboard now sits in a filled gold disc so it reads as a deliberate,
   solid motif (Basia flagged the bare thin outline as "a thin outline grid"). */
.header-emblem[b-qglanx3477] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    color: var(--wl-gold);
    background: radial-gradient(circle at 50% 38%,
        rgba(var(--wl-gold-rgb), 0.22) 0%,
        rgba(var(--wl-gold-rgb), 0.06) 60%,
        transparent 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: inset 0 0 24px rgba(var(--wl-gold-rgb), 0.12), 0 0 30px rgba(var(--wl-gold-rgb), 0.12);
}
.header-emblem[b-qglanx3477]  svg {
    width: 3rem;
    height: 3rem;
    filter: drop-shadow(0 2px 6px rgba(var(--wl-gold-rgb), 0.3));
}

/* Dashboard Link */

.dashboard-link[b-qglanx3477] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.08) 0%, rgba(var(--wl-gold-rgb), 0.02) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 0.75rem;
    color: var(--wl-text-primary);
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: all 0.2s ease;
}

.dashboard-link:hover[b-qglanx3477] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.14) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    transform: translateX(4px);
}

.dashboard-link .link-icon[b-qglanx3477] {
    color: var(--wl-gold);
}

.dashboard-link .link-text[b-qglanx3477] {
    font-weight: 600;
    font-size: 1rem;
}

.dashboard-link .link-arrow[b-qglanx3477] {
    display: flex;
    align-items: center;
    color: var(--wl-text-muted);
    flex-shrink: 0;
}

.dashboard-link .link-arrow[b-qglanx3477]  svg {
    width: 1.25rem;
    height: 1.25rem;
}

.hub-grid[b-qglanx3477] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.hub-section[b-qglanx3477] {
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 2px 12px var(--wl-shadow-color);
    transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.hub-section:hover[b-qglanx3477] {
    transform: translateY(-3px);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: 0 10px 30px var(--wl-shadow-color), 0 0 22px var(--wl-gold-bg);
}

@media (prefers-reduced-motion: reduce) {
    .hub-section[b-qglanx3477] { transition: none; }
    .hub-section:hover[b-qglanx3477] { transform: none; }
}

.section-title[b-qglanx3477] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--wl-border-medium);
}

.section-title[b-qglanx3477]  svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
}

.section-note[b-qglanx3477] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.85rem;
    margin: -0.5rem 0 1rem 0;
}

.section-links[b-qglanx3477] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hub-link[b-qglanx3477] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    text-decoration: none;
    transition: all 0.2s ease;
}

.hub-link:hover[b-qglanx3477] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-text-primary);
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .hub-link[b-qglanx3477], .dashboard-link[b-qglanx3477] { transition: none; }
    .hub-link:hover[b-qglanx3477] { transform: none; }
}

.link-icon[b-qglanx3477] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--wl-gold);
}

.link-icon[b-qglanx3477]  svg {
    width: 1.25rem;
    height: 1.25rem;
}

.link-text[b-qglanx3477] {
    flex: 1;
    font-weight: 500;
}

@media (max-width: 640px) {
    .film-hub[b-qglanx3477] {
        padding: 1rem 1rem 9rem; /* keep the bottom reserve so the cookie banner never clips content */
    }

    .hub-header[b-qglanx3477] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .header-content h1[b-qglanx3477] {
        font-size: 2rem;
    }

    .header-emblem[b-qglanx3477] { width: 4.25rem; height: 4.25rem; }
    .header-emblem[b-qglanx3477]  svg {
        width: 2.4rem;
        height: 2.4rem;
    }
}

/* ── Round 3: differentiated track headers (ACTOR free / PRODUCER gated) + locked rows ── */
.track-head[b-qglanx3477] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1rem 0;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--wl-border-medium);
}
.track-icon[b-qglanx3477] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem; height: 2.6rem;
    flex-shrink: 0;
    border-radius: 0.7rem;
    color: var(--wl-gold);
    background: radial-gradient(circle at 50% 40%, rgba(var(--wl-gold-rgb), 0.18) 0%, rgba(var(--wl-gold-rgb), 0.05) 70%, transparent 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
}
.track-icon[b-qglanx3477]  svg { width: 1.4rem; height: 1.4rem; }
.track-head-text[b-qglanx3477] { flex: 1; min-width: 0; }
.track-head .section-title[b-qglanx3477] {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.track-head .section-note[b-qglanx3477] { margin: 0.15rem 0 0 0; font-size: 0.82rem; }

/* Track badge: Free / Premium / Unlocked. */
.track-badge[b-qglanx3477] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
}
.track-badge.free[b-qglanx3477] { background: rgba(var(--wl-green-rgb), 0.14); color: var(--wl-green); border: 1px solid rgba(var(--wl-green-rgb), 0.3); }
.track-badge.premium[b-qglanx3477] { background: var(--wl-gold-bg); color: var(--wl-gold); border: 1px solid rgba(var(--wl-gold-rgb), 0.4); }
.track-badge.owned[b-qglanx3477] { background: rgba(var(--wl-gold-rgb), 0.16); color: var(--wl-gold); border: 1px solid rgba(var(--wl-gold-rgb), 0.3); }
.track-badge.promo[b-qglanx3477] { background: rgba(var(--wl-green-rgb), 0.14); color: var(--wl-green); border: 1px solid rgba(var(--wl-green-rgb), 0.34); }
.track-badge-lock[b-qglanx3477] { display: inline-flex; width: 0.8rem; height: 0.8rem; }
.track-badge-lock[b-qglanx3477]  svg { width: 100%; height: 100%; }

/* Distinct column identity: the gated producer track reads premium-but-locked. */
.track-producer.is-gated .track-icon[b-qglanx3477] { color: rgba(var(--wl-gold-rgb), 0.7); }

.producer-promo-callout[b-qglanx3477] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 0.25rem 0 1rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(var(--wl-green-rgb), 0.25);
    border-radius: 0.85rem;
    background:
        linear-gradient(135deg, rgba(var(--wl-green-rgb), 0.13), rgba(var(--wl-gold-rgb), 0.07)),
        rgba(var(--wl-bg-secondary-rgb), 0.72);
    color: var(--wl-text-secondary);
}

.producer-promo-icon[b-qglanx3477] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    flex: 0 0 1.6rem;
    border-radius: 999px;
    color: var(--wl-green);
    background: rgba(var(--wl-green-rgb), 0.16);
}

.producer-promo-icon[b-qglanx3477]  svg {
    width: 1rem;
    height: 1rem;
}

.producer-promo-callout strong[b-qglanx3477],
.producer-promo-callout span[b-qglanx3477] {
    display: block;
}

.producer-promo-callout strong[b-qglanx3477] {
    color: var(--wl-text-primary);
    font-size: 0.92rem;
    font-weight: 800;
}

.producer-promo-callout span[b-qglanx3477] {
    margin-top: 0.1rem;
    color: var(--wl-text-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

/* The free track's header icon gets a subtle green-open tint to separate it from premium gold. */
.track-actor .track-icon[b-qglanx3477] {
    color: var(--wl-green);
    background: radial-gradient(circle at 50% 40%, rgba(var(--wl-green-rgb), 0.16) 0%, rgba(var(--wl-green-rgb), 0.04) 70%, transparent 100%);
    border-color: rgba(var(--wl-green-rgb), 0.28);
}

/* Trailing chevron on every navigable hub row (resolves the lone-Dashboard-chevron ambiguity). */
.hub-link .link-arrow[b-qglanx3477] {
    display: inline-flex; align-items: center;
    margin-left: auto;
    color: var(--wl-text-muted);
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
}
.hub-link .link-arrow[b-qglanx3477]  svg { width: 1rem; height: 1rem; }
.hub-link:hover .link-arrow[b-qglanx3477] { opacity: 1; color: var(--wl-gold); transform: translateX(3px); }

/* Locked producer row: dimmed, lock left of the label, Odblokuj pill, hover restores opacity. */
.hub-link-locked[b-qglanx3477] { opacity: 0.5; }
.hub-link-locked:hover[b-qglanx3477] { opacity: 0.85; background: rgba(var(--wl-gold-rgb), 0.08); transform: none; }
.hub-link-locked .link-text[b-qglanx3477] { color: var(--wl-text-muted); }
.hub-link-locked .link-icon[b-qglanx3477] { color: var(--wl-text-muted); }
.link-unlock[b-qglanx3477] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wl-gold);
    background: var(--wl-gold-bg);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
}
.link-unlock-icon[b-qglanx3477] { display: inline-flex; width: 0.75rem; height: 0.75rem; }
.link-unlock-icon[b-qglanx3477]  svg { width: 100%; height: 100%; }

/* Atmosphere + content stacking on the hero (atmosphere is z-index 0, content z-index 1). */
.hub-header .header-content[b-qglanx3477], .hub-header .header-decoration[b-qglanx3477] { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .hub-link .link-arrow[b-qglanx3477] { transition: none; }
    .hub-link:hover .link-arrow[b-qglanx3477] { transform: none; }
}

@media (max-width: 640px) {
    .track-head[b-qglanx3477] { flex-wrap: wrap; }
    .track-badge[b-qglanx3477] { order: 3; }
}
/* /Components/Pages/Career/Film/MyFilms/Index.razor.rz.scp.css */
.film-myfilms[b-sdot8489ja] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
}

/* Toolbar: status tabs + sort (mirrors the music Releases toolbar). */
.film-toolbar[b-sdot8489ja] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.film-tabs[b-sdot8489ja] { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.film-tab[b-sdot8489ja] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
    border: 1px solid var(--wl-border-medium);
    background: rgba(var(--wl-contrast-rgb), 0.03);
    color: var(--wl-text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.film-tab:hover[b-sdot8489ja] { color: var(--wl-text-primary); border-color: rgba(var(--wl-gold-rgb), 0.3); }
.film-tab.active[b-sdot8489ja] {
    color: var(--wl-bg-primary);
    background: var(--wl-gold);
    border-color: var(--wl-gold);
}
.film-tab-count[b-sdot8489ja] {
    font-size: 0.72rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.12);
}
.film-tab.active .film-tab-count[b-sdot8489ja] { background: rgba(0, 0, 0, 0.18); }
.film-sort[b-sdot8489ja] { display: flex; align-items: center; gap: 0.5rem; }
.film-sort label[b-sdot8489ja] { font-size: 0.8rem; color: var(--wl-text-muted); }
.film-sort select[b-sdot8489ja] {
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: rgba(var(--wl-contrast-rgb), 0.03);
    color: var(--wl-text-primary);
    font-size: 0.85rem;
}

.film-grid[b-sdot8489ja] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 1rem;
}

/* AAA card: poster + info, layered bg + left gold accent + hover-lift + border-glow. */
.film-card[b-sdot8489ja] {
    position: relative;
    display: flex;
    gap: 0.9rem;
    padding: 1rem 1rem 1rem 1.2rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.85rem;
    overflow: hidden;
    box-shadow: 0 2px 12px var(--wl-shadow-color);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.film-card-info[b-sdot8489ja] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
    flex: 1;
}

.film-card[b-sdot8489ja]::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.2) 100%);
    opacity: 0.7;
}

.film-card:hover[b-sdot8489ja] {
    transform: translateY(-3px);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: 0 10px 30px var(--wl-shadow-color), 0 0 22px var(--wl-gold-bg);
}

@media (prefers-reduced-motion: reduce) {
    .film-card[b-sdot8489ja], .film-tab[b-sdot8489ja] { transition: none; }
    .film-card:hover[b-sdot8489ja] { transform: none; }
}

.film-title-row[b-sdot8489ja] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.film-title[b-sdot8489ja] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--wl-text-primary);
}

.film-status[b-sdot8489ja] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.75);
    white-space: nowrap;
}

.status-released[b-sdot8489ja],
.status-concluded[b-sdot8489ja] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
}

.film-genre[b-sdot8489ja] {
    font-size: 0.82rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.film-metrics[b-sdot8489ja] {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.25rem;
}

.film-metric[b-sdot8489ja] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.metric-label[b-sdot8489ja] {
    font-size: 0.7rem;
    color: rgba(var(--wl-contrast-rgb), 0.55);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.metric-value[b-sdot8489ja] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    color: var(--wl-text-primary);
    line-height: 1;
}

.loading-container[b-sdot8489ja] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--wl-text-muted);
}

.loading-spinner[b-sdot8489ja] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: myfilms-spin-b-sdot8489ja 0.8s linear infinite;
}

@keyframes myfilms-spin-b-sdot8489ja {
    to { transform: rotate(360deg); }
}

.empty-state[b-sdot8489ja] {
    padding: 2rem;
    text-align: center;
    color: var(--wl-text-muted);
}
/* /Components/Pages/Career/Film/Projects/Details.razor.rz.scp.css */
.project-detail[b-7kekfk457a] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
}

.detail-toolbar[b-7kekfk457a] { margin-bottom: 1rem; }
.back-link[b-7kekfk457a] {
    color: var(--wl-gold);
    text-decoration: none;
    font-size: 0.9rem;
}

/* Movie-page hero (when the film has a real poster): the SAME portrait poster blurred as a full-bleed
   backdrop (hides the portrait->landscape crop + gives ambiance) + the SHARP upright poster on the
   left + title/meta beside it. A strong scrim keeps the white text readable on ANY poster in all 3 themes. */
.detail-hero[b-7kekfk457a] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 300px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
}
.detail-hero[b-7kekfk457a]  .detail-hero-backdrop {
    position: absolute;
    inset: -8%;                 /* over-bleed so the blur's soft edges never show */
    width: 116%;
    height: 116%;
    object-fit: cover;
    filter: blur(32px) saturate(1.1);
    transform: scale(1.12);
    pointer-events: none;
}
.detail-hero-scrim[b-7kekfk457a] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.7) 100%);
    pointer-events: none;
}
.detail-hero-content[b-7kekfk457a] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.75rem;
    width: 100%;
}
.detail-hero-poster[b-7kekfk457a] {
    flex-shrink: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    border-radius: 0.6rem;
}
.detail-hero-info[b-7kekfk457a] { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.detail-hero .detail-eyebrow[b-7kekfk457a] { color: var(--wl-gold-light); }
.detail-hero .detail-title-row h1[b-7kekfk457a] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #fff;
    margin: 0;
    line-height: 1;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}
.detail-hero .detail-meta[b-7kekfk457a] { color: rgba(255, 255, 255, 0.85); }
.detail-hero .detail-quality[b-7kekfk457a] { color: var(--wl-gold-light); }

@media (max-width: 640px) {
    .detail-hero-content[b-7kekfk457a] { flex-direction: column; align-items: flex-start; }
}

/* Edit-poster affordance. */
.detail-poster-slot[b-7kekfk457a] { position: relative; flex-shrink: 0; }
.poster-edit-btn[b-7kekfk457a] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    padding: 0.4rem 0.7rem;
    width: 100%;
    justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-primary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.poster-edit-btn:hover[b-7kekfk457a] { border-color: rgba(var(--wl-gold-rgb), 0.4); background: var(--wl-gold-bg); }
.poster-edit-btn .btn-icon[b-7kekfk457a] { display: inline-flex; }
.poster-edit-btn .btn-icon svg[b-7kekfk457a] { width: 0.95rem; height: 0.95rem; }
.poster-edit-btn.on-hero[b-7kekfk457a] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: auto;
    z-index: 2;
    margin-top: 0;
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}
.poster-edit-btn.on-hero:hover[b-7kekfk457a] { background: rgba(0, 0, 0, 0.75); border-color: var(--wl-gold); }

@media (prefers-reduced-motion: reduce) {
    .poster-edit-btn[b-7kekfk457a] { transition: none; }
}

/* Poster-led cinematic detail header. */
.detail-header[b-7kekfk457a] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.1) 0%,
        rgba(var(--wl-gold-rgb), 0.03) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(var(--wl-gold-rgb), 0.07), inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}
.detail-header-bg[b-7kekfk457a] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 100% 0%, var(--wl-gold-bg-hover) 0%, transparent 45%);
    pointer-events: none;
}
.detail-header-info[b-7kekfk457a] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}
.detail-eyebrow[b-7kekfk457a] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--wl-gold);
    font-weight: 700;
}
.detail-quality[b-7kekfk457a] {
    font-size: 0.85rem;
    color: var(--wl-gold);
    font-weight: 600;
}

.detail-title-row[b-7kekfk457a] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.1rem 0 0.15rem 0;
    flex-wrap: wrap;
}

.detail-title-row h1[b-7kekfk457a] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.project-status[b-7kekfk457a] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.75);
}

.status-released[b-7kekfk457a], .status-concluded[b-7kekfk457a] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
}

.detail-meta[b-7kekfk457a] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.9rem;
}

/* ── Guided next-step banner ── */
.next-step[b-7kekfk457a] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.25rem;
    padding: 0.8rem 1.1rem;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--wl-gold-bg) 0%, rgba(var(--wl-gold-rgb), 0.04) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-text-primary);
    font-weight: 600;
}

.next-step.ready[b-7kekfk457a] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-color: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.85);
}

.next-step-icon[b-7kekfk457a] {
    display: inline-flex;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.next-step.ready .next-step-icon[b-7kekfk457a] { color: var(--wl-gold); }
.next-step-icon[b-7kekfk457a]  svg { width: 100%; height: 100%; }

/* ── Sections ── */
.detail-section[b-7kekfk457a] {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.85rem;
    box-shadow: 0 2px 12px var(--wl-shadow-color);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.detail-section:hover[b-7kekfk457a] {
    border-color: rgba(var(--wl-gold-rgb), 0.22);
    box-shadow: 0 6px 20px var(--wl-shadow-color), 0 0 16px var(--wl-gold-bg);
}
@media (prefers-reduced-motion: reduce) {
    .detail-section[b-7kekfk457a] { transition: none; }
}
@media (max-width: 640px) {
    .detail-header[b-7kekfk457a] { flex-direction: column; align-items: flex-start; text-align: left; }
}

.detail-section h2[b-7kekfk457a] {
    font-size: 1.1rem;
    margin: 0 0 0.85rem 0;
    color: var(--wl-text-primary);
}

.section-head[b-7kekfk457a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.section-head h2[b-7kekfk457a] { margin: 0; }

.slot-state[b-7kekfk457a] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
}

.state-none[b-7kekfk457a] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.state-proposed[b-7kekfk457a] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
}

.state-secured[b-7kekfk457a] {
    background: rgba(var(--wl-gold-rgb), 0.18);
    color: var(--wl-gold);
}

.state-blocked[b-7kekfk457a] {
    background: rgba(var(--wl-red-rgb), 0.14);
    color: var(--wl-red);
}

.action-row[b-7kekfk457a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.2rem;
}

.optional-note[b-7kekfk457a] {
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.55);
}

/* ── Buttons ── */
.btn-action[b-7kekfk457a] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s ease;
}

.btn-action:hover:not(:disabled)[b-7kekfk457a] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.btn-action.primary[b-7kekfk457a] {
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    border: none;
}

.btn-action.primary:hover:not(:disabled)[b-7kekfk457a] {
    background: var(--wl-gold-light);
    box-shadow: 0 0 18px rgba(var(--wl-gold-rgb), 0.25);
}

.btn-action.small[b-7kekfk457a] {
    padding: 0.32rem 0.7rem;
    font-size: 0.82rem;
}

.btn-action:disabled[b-7kekfk457a] { opacity: 0.5; cursor: not-allowed; }

.btn-icon[b-7kekfk457a] {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
}

.btn-icon[b-7kekfk457a]  svg { width: 100%; height: 100%; }

/* ── Production greenlight ── */
.production-section[b-7kekfk457a] {
    border-color: rgba(var(--wl-gold-rgb), 0.28);
}

.production-head[b-7kekfk457a] {
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.production-head h2[b-7kekfk457a] {
    margin-bottom: 0.35rem;
}

.production-hint[b-7kekfk457a] {
    max-width: 52rem;
}

.production-greenlight[b-7kekfk457a] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.36fr);
    gap: 1.25rem;
    align-items: start;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
}

.production-finance-list[b-7kekfk457a] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
}

.finance-list-row[b-7kekfk457a] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 0.85rem;
    align-items: baseline;
    min-width: 0;
    padding: 0.72rem 0;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
}

.finance-list-row.budget[b-7kekfk457a] {
    border-bottom-color: rgba(var(--wl-gold-rgb), 0.22);
}

.finance-label[b-7kekfk457a] {
    min-width: 0;
    color: rgba(var(--wl-contrast-rgb), 0.58);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.25;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.finance-label-with-help[b-7kekfk457a] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.finance-info[b-7kekfk457a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(var(--wl-gold-rgb), 0.72);
    cursor: help;
}

.finance-info:hover[b-7kekfk457a],
.finance-info:focus-visible[b-7kekfk457a] {
    color: var(--wl-gold);
}

.finance-info:focus-visible[b-7kekfk457a] {
    outline: 2px solid rgba(var(--wl-gold-rgb), 0.45);
    outline-offset: 2px;
}

.finance-info[b-7kekfk457a]  svg {
    width: 100%;
    height: 100%;
}

.finance-value[b-7kekfk457a] {
    color: var(--wl-text-primary);
    font-size: 1.04rem;
    line-height: 1.12;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.finance-list-row.debit .finance-value[b-7kekfk457a],
.finance-list-row.result.negative .finance-value[b-7kekfk457a] {
    color: var(--wl-red);
}

.finance-list-row.budget .finance-value[b-7kekfk457a] {
    color: var(--wl-gold);
}

.finance-list-note[b-7kekfk457a] {
    display: grid;
    grid-template-columns: minmax(7.5rem, 0.28fr) minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0.95rem 0 0.1rem;
    color: rgba(var(--wl-contrast-rgb), 0.68);
    font-size: 0.86rem;
    line-height: 1.35;
}

.finance-note-label[b-7kekfk457a] {
    color: var(--wl-text-primary);
    font-weight: 700;
}

.finance-note-list[b-7kekfk457a] {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    min-width: 0;
    padding-left: 1.05rem;
}

.finance-note-list li[b-7kekfk457a] {
    padding-left: 0.1rem;
}

.greenlight-action[b-7kekfk457a] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 0.65rem;
}

.production-cta[b-7kekfk457a] {
    justify-content: center;
    min-height: 3.65rem;
    min-width: 100%;
    padding: 0.95rem 1.35rem;
    border-radius: 0.8rem;
    font-size: 1.04rem;
    box-shadow: 0 10px 30px -16px rgba(var(--wl-gold-rgb), 0.75);
}

.production-cta .btn-icon[b-7kekfk457a] {
    width: 1.25rem;
    height: 1.25rem;
}

.production-cta:disabled[b-7kekfk457a] {
    opacity: 1;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    background: rgba(var(--wl-contrast-rgb), 0.055);
    color: rgba(var(--wl-contrast-rgb), 0.48);
    box-shadow: none;
}

.production-blocker[b-7kekfk457a],
.production-charge-note[b-7kekfk457a] {
    color: rgba(var(--wl-contrast-rgb), 0.58);
    font-size: 0.84rem;
    line-height: 1.3;
    text-align: center;
}

.production-blocker.danger[b-7kekfk457a] {
    color: var(--wl-red);
    font-weight: 700;
}

@media (max-width: 980px) {
    .production-greenlight[b-7kekfk457a] {
        grid-template-columns: 1fr;
    }

    .greenlight-action[b-7kekfk457a] {
        max-width: 28rem;
    }
}

@media (max-width: 760px) {
    .finance-list-note[b-7kekfk457a] {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }
}

@media (max-width: 520px) {
    .finance-list-row[b-7kekfk457a] {
        grid-template-columns: 1fr;
        gap: 0.28rem;
    }

    .finance-value[b-7kekfk457a] {
        text-align: left;
        white-space: normal;
    }

    .greenlight-action[b-7kekfk457a] {
        max-width: none;
    }
}

.btn-link[b-7kekfk457a] {
    background: none;
    border: none;
    color: var(--wl-gold);
    cursor: pointer;
    font-weight: 600;
    padding: 0;
}
.btn-link:disabled[b-7kekfk457a] { opacity: 0.5; cursor: not-allowed; }

/* Withdraw-offer link: muted by default, red on hover (a quiet destructive action). */
.btn-link.withdraw[b-7kekfk457a] { color: var(--wl-text-muted); font-size: 0.8rem; font-weight: 600; }
.btn-link.withdraw:hover:not(:disabled)[b-7kekfk457a] { color: var(--wl-red); }

/* Pending screenplay/soundtrack row: the waiting text + the withdraw link side by side. */
.pending-row[b-7kekfk457a] { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.hint[b-7kekfk457a] { font-size: 0.82rem; color: rgba(var(--wl-contrast-rgb), 0.55); margin: 0 0 0.6rem 0; }
.set-info[b-7kekfk457a] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin: 0;
}
.set-info .btn-icon[b-7kekfk457a] { color: var(--wl-gold); }

/* ── Add original role form ── */
.add-role-form[b-7kekfk457a] {
    margin: 0 0 1rem 0;
    padding: 1rem 1.1rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.7rem;
}

.add-role-field[b-7kekfk457a] { margin-bottom: 0.8rem; }
.add-role-field label[b-7kekfk457a] {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.55);
    margin-bottom: 0.35rem;
}

.add-role-input[b-7kekfk457a] {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: var(--wl-bg-primary);
    color: var(--wl-text-primary);
}
.add-role-input.narrow[b-7kekfk457a] { width: 6rem; }

.add-role-row[b-7kekfk457a] { display: flex; flex-wrap: wrap; gap: 1rem; }
.add-role-row .add-role-field[b-7kekfk457a] { flex: 1; min-width: 8rem; }

.add-role-actions[b-7kekfk457a] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.trait-chips[b-7kekfk457a] { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.trait-chip[b-7kekfk457a] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--wl-border-medium);
    background: rgba(var(--wl-contrast-rgb), 0.03);
    color: rgba(var(--wl-contrast-rgb), 0.8);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.trait-chip:hover[b-7kekfk457a] { border-color: rgba(var(--wl-gold-rgb), 0.4); }

.trait-chip.selected[b-7kekfk457a] {
    background: var(--wl-gold-bg);
    border-color: rgba(var(--wl-gold-rgb), 0.6);
    color: var(--wl-gold);
}

.trait-adult[b-7kekfk457a] {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.02rem 0.25rem;
    border-radius: 0.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.12);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.trait-chip.adult.selected .trait-adult[b-7kekfk457a] {
    background: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

/* ── Cast cards ── */
.role-table[b-7kekfk457a] { display: flex; flex-direction: column; gap: 0.7rem; }

/* Depth card: [slot] [identity grows] [actions], with a billing-colored left accent. */
.cast-card[b-7kekfk457a] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1rem 0.9rem 1.2rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.85rem;
    overflow: hidden;
    box-shadow: 0 2px 12px var(--wl-shadow-color);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.cast-card[b-7kekfk457a]::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
}
.cast-card.billing-lead[b-7kekfk457a]::before { background: linear-gradient(180deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.2) 100%); }
.cast-card.billing-supporting[b-7kekfk457a]::before { background: rgba(var(--wl-contrast-rgb), 0.35); }
.cast-card.billing-cameo[b-7kekfk457a]::before { background: rgba(var(--wl-contrast-rgb), 0.18); }
.cast-card.is-cast[b-7kekfk457a] { background: linear-gradient(145deg, rgba(var(--wl-gold-rgb), 0.06) 0%, rgba(var(--wl-bg-secondary-rgb), 0.6) 100%); }
.cast-card:hover[b-7kekfk457a] {
    transform: translateY(-2px);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: 0 8px 24px var(--wl-shadow-color), 0 0 18px var(--wl-gold-bg);
}

/* Casting slot. */
.cast-slot[b-7kekfk457a] { position: relative; width: 2.75rem; height: 2.75rem; flex-shrink: 0; }
.cast-avatar[b-7kekfk457a] {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
}
.cast-check[b-7kekfk457a] {
    position: absolute; right: -2px; bottom: -2px;
    display: flex; align-items: center; justify-content: center;
    width: 1.1rem; height: 1.1rem;
    border-radius: 50%;
    background: var(--wl-green);
    color: #fff;
    border: 2px solid var(--wl-bg-secondary);
}
.cast-check[b-7kekfk457a]  svg { width: 0.7rem; height: 0.7rem; }
.cast-seat[b-7kekfk457a] {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px dashed rgba(var(--wl-gold-rgb), 0.4);
    color: rgba(var(--wl-gold-rgb), 0.7);
    animation: cast-seat-pulse-b-7kekfk457a 2.4s ease-in-out infinite;
}
.cast-seat[b-7kekfk457a]  svg { width: 1.2rem; height: 1.2rem; }
@keyframes cast-seat-pulse-b-7kekfk457a {
    0%, 100% { border-color: rgba(var(--wl-gold-rgb), 0.3); }
    50% { border-color: rgba(var(--wl-gold-rgb), 0.6); }
}

/* Identity (grows). */
.cast-identity[b-7kekfk457a] { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.cast-name-row[b-7kekfk457a] { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.role-name[b-7kekfk457a] { font-weight: 600; color: var(--wl-text-primary); }
.cast-chips[b-7kekfk457a] { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }

.role-billing[b-7kekfk457a] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.75);
}
.billing-lead[b-7kekfk457a] { background: rgba(var(--wl-gold-rgb), 0.15); color: var(--wl-gold); }

/* Display-only chips inside a cast card (the .trait-chip base is cursor:pointer for the add form). */
.cast-chips .trait-chip[b-7kekfk457a] { cursor: default; padding: 0.18rem 0.5rem; font-size: 0.72rem; }
.cast-chips .trait-chip:hover[b-7kekfk457a] { border-color: var(--wl-border-medium); }
.skill-chip[b-7kekfk457a] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
    font-size: 0.72rem;
    font-weight: 600;
}
.skill-chip .chip-icon[b-7kekfk457a] { display: inline-flex; }
.skill-chip .chip-icon[b-7kekfk457a]  svg, .skill-chip .chip-icon svg[b-7kekfk457a] { width: 0.7rem; height: 0.7rem; }

/* Actions / status. */
.cast-actions[b-7kekfk457a] { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.cast-status[b-7kekfk457a] { font-size: 0.82rem; font-weight: 600; }
.cast-status.confirmed[b-7kekfk457a] { color: var(--wl-gold); }
.cast-status.pending[b-7kekfk457a] { color: rgba(var(--wl-gold-rgb), 0.85); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
    .cast-card[b-7kekfk457a] { transition: none; }
    .cast-card:hover[b-7kekfk457a] { transform: none; }
    .cast-seat[b-7kekfk457a] { animation: none; }
}

/* ── Screenplay / source card ── */
.source-card[b-7kekfk457a] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
}
.source-icon[b-7kekfk457a] {
    display: flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; flex-shrink: 0;
    border-radius: 0.7rem;
    background: var(--wl-gold-bg);
    color: var(--wl-gold);
}
.source-icon[b-7kekfk457a]  svg, .source-icon svg[b-7kekfk457a] { width: 1.5rem; height: 1.5rem; }
.source-body[b-7kekfk457a] { display: flex; flex-direction: column; gap: 0.2rem; }
.source-label[b-7kekfk457a] { font-weight: 600; color: var(--wl-text-primary); }
.source-meta[b-7kekfk457a] { font-size: 0.82rem; color: var(--wl-text-muted); }

.applicant-list[b-7kekfk457a] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: -0.2rem;
    padding: 0.75rem 0.9rem 0.9rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
}

/* Applicant row mirrors the cast-card grid: [identity grows] [fit chips] [select], no dead gap. */
.applicant-row[b-7kekfk457a] {
    display: grid;
    grid-template-columns: minmax(8rem, auto) 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.5) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.6rem;
}

.applicant-id[b-7kekfk457a] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.applicant-name[b-7kekfk457a] { font-weight: 600; color: var(--wl-text-primary); }
.applicant-skill[b-7kekfk457a] { font-size: 0.78rem; color: var(--wl-text-muted); }
.applicant-fam[b-7kekfk457a] { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: flex-end; }
.applicant-actions[b-7kekfk457a] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    min-width: min(12rem, 100%);
}
.applicant-limit-note[b-7kekfk457a] {
    max-width: 12rem;
    text-align: right;
}
.deal-limit-chip[b-7kekfk457a] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 0.1rem;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: rgba(var(--wl-contrast-rgb), 0.72);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .applicant-row[b-7kekfk457a] { grid-template-columns: 1fr; }
    .applicant-fam[b-7kekfk457a] { justify-content: flex-start; }
    .applicant-actions[b-7kekfk457a] { align-items: flex-start; }
    .applicant-limit-note[b-7kekfk457a] { text-align: left; }
}

.fam-chip[b-7kekfk457a] {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
}

/* OST genre-fit badge in the soundtrack picker (mirrors the per-scene picker on Shoot.razor). */
.ost-fit[b-7kekfk457a] {
    font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.03em; margin-left: 0.4rem; white-space: nowrap;
}
.fit-perfect[b-7kekfk457a] { background: rgba(var(--wl-gold-rgb), 0.2); color: var(--wl-gold); }
.fit-fits[b-7kekfk457a] { background: rgba(var(--wl-contrast-rgb), 0.08); color: rgba(var(--wl-contrast-rgb), 0.75); }
.fit-clashes[b-7kekfk457a] { background: rgba(var(--wl-contrast-rgb), 0.05); color: rgba(var(--wl-contrast-rgb), 0.5); }
.fit-licensed[b-7kekfk457a] { background: rgba(var(--wl-contrast-rgb), 0.06); color: var(--wl-text-muted); }

/* Licensed-song pool: one card per song (each its own deal), mirrors the source-card language. */
.song-pool[b-7kekfk457a] { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.6rem 0 0.85rem; }
.song-row[b-7kekfk457a] {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.6rem 0.85rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.7rem;
}
.song-row.licensed[b-7kekfk457a] { border-color: rgba(var(--wl-gold-rgb), 0.28); }
.song-icon[b-7kekfk457a] {
    display: flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 0.6rem;
    background: var(--wl-gold-bg); color: var(--wl-gold);
}
.song-icon[b-7kekfk457a]  svg, .song-icon svg[b-7kekfk457a] { width: 1.2rem; height: 1.2rem; }
.song-body[b-7kekfk457a] { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.song-title[b-7kekfk457a] { font-weight: 600; color: var(--wl-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-sub[b-7kekfk457a] { font-size: 0.8rem; color: var(--wl-text-muted); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.term-pill[b-7kekfk457a] {
    font-size: 0.7rem; font-weight: 700; padding: 0.08rem 0.4rem; border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.12); color: var(--wl-gold); white-space: nowrap;
}
/* Right-side actions cell of the 3-col song-row grid: status + action stack, never wraps the labels. */
.song-actions[b-7kekfk457a] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.2rem; flex-shrink: 0; }
.song-state[b-7kekfk457a] { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.song-state.licensed[b-7kekfk457a] { color: var(--wl-gold); }
.song-state.pending[b-7kekfk457a] { color: var(--wl-text-muted); }
.song-state.main-theme[b-7kekfk457a] { color: var(--wl-gold-light); }
.song-state .btn-icon[b-7kekfk457a] { display: inline-flex; }
.song-state .btn-icon svg[b-7kekfk457a] { width: 0.85rem; height: 0.85rem; }
.song-actions .btn-link[b-7kekfk457a] { white-space: nowrap; }
.btn-link.main-theme-set[b-7kekfk457a] { color: var(--wl-text-muted); font-size: 0.78rem; font-weight: 600; }
.btn-link.main-theme-set:hover:not(:disabled)[b-7kekfk457a] { color: var(--wl-gold); }

/* Live producer readout: committed flat fees vs cash + revenue share / points vs the configured cap. */
.commit-readout[b-7kekfk457a] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
}
.commit-stat[b-7kekfk457a] { display: flex; flex-direction: column; gap: 0.25rem; }
.commit-label[b-7kekfk457a] { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wl-text-muted); }
.commit-value[b-7kekfk457a] { font-size: 1.15rem; font-weight: 700; color: var(--wl-text-primary); }
.commit-unit[b-7kekfk457a] { font-size: 0.78rem; font-weight: 600; color: var(--wl-text-muted); }
.commit-sub[b-7kekfk457a] { font-size: 0.74rem; color: var(--wl-text-muted); }
.commit-bar[b-7kekfk457a] { height: 5px; border-radius: 999px; background: rgba(var(--wl-contrast-rgb), 0.1); overflow: hidden; margin-top: 0.1rem; }
.commit-bar-fill[b-7kekfk457a] { height: 100%; border-radius: 999px; background: var(--wl-gold); transition: width 0.25s ease; }
.commit-stat.warn .commit-value[b-7kekfk457a] { color: var(--wl-red); }
.commit-stat.warn .commit-bar-fill[b-7kekfk457a] { background: var(--wl-red); }

/* Invite picker "how the actor fits" panel. */
.actor-row-head[b-7kekfk457a] { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.actor-skill[b-7kekfk457a] { font-size: 0.78rem; font-weight: 600; color: var(--wl-gold); white-space: nowrap; }
.actor-fit-line[b-7kekfk457a] { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; margin-top: 0.2rem; }
.fit-stat[b-7kekfk457a] { font-size: 0.74rem; color: rgba(var(--wl-contrast-rgb), 0.7); }
.fit-stat.risk-high[b-7kekfk457a] { color: var(--wl-red); }
.actor-archetypes[b-7kekfk457a] { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.archetype-chip[b-7kekfk457a] {
    font-size: 0.7rem; font-weight: 600; padding: 0.1rem 0.4rem; border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08); color: rgba(var(--wl-contrast-rgb), 0.75);
}

/* ── Deal terms editor ── */
.deal-terms-editor[b-7kekfk457a] {
    margin-top: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.55rem;
}

.deal-terms-label[b-7kekfk457a] {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    margin-bottom: 0.45rem;
}

.deal-terms-row[b-7kekfk457a] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.deal-select[b-7kekfk457a], .deal-input[b-7kekfk457a] {
    padding: 0.45rem 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: var(--wl-bg-primary);
    color: var(--wl-text-primary);
}

.deal-input[b-7kekfk457a] { width: 7rem; }
.deal-input.invalid[b-7kekfk457a] {
    border-color: var(--wl-red);
    color: var(--wl-red);
}

.deal-unit[b-7kekfk457a] { font-size: 0.85rem; color: rgba(var(--wl-contrast-rgb), 0.6); }

.deal-limit-note[b-7kekfk457a] {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.62);
}

.deal-limit-note.error[b-7kekfk457a] { color: var(--wl-red); }

.deal-help[b-7kekfk457a] {
    display: inline-flex;
    width: 1.05rem;
    height: 1.05rem;
    color: rgba(var(--wl-gold-rgb), 0.7);
    cursor: help;
}
.deal-help[b-7kekfk457a]  svg { width: 100%; height: 100%; }

/* ── Picker modal (mirrors SongSelectionModal) ── */
.picker-overlay[b-7kekfk457a] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px 20px;
    overflow-y: auto;
    animation: pickerFade-b-7kekfk457a 0.2s ease-out;
}

@keyframes pickerFade-b-7kekfk457a { from { opacity: 0; } to { opacity: 1; } }

.picker-modal[b-7kekfk457a] {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%);
    border: 1px solid var(--wl-gold-border);
    box-shadow: 0 25px 80px var(--wl-shadow-color), 0 0 100px rgba(var(--wl-gold-rgb), 0.05);
    animation: pickerRise-b-7kekfk457a 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pickerRise-b-7kekfk457a {
    from { opacity: 0; transform: translateY(24px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.picker-close[b-7kekfk457a] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    padding: 7px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 5;
}
.picker-close:hover[b-7kekfk457a] { background: var(--wl-gold-bg); border-color: rgba(var(--wl-gold-rgb), 0.3); color: var(--wl-gold); }
.picker-close[b-7kekfk457a]  svg { width: 100%; height: 100%; }

.picker-header[b-7kekfk457a] {
    padding: 24px 48px 16px;
    text-align: center;
    border-bottom: 1px solid var(--wl-gold-bg-hover);
    flex-shrink: 0;
}

.picker-header h2[b-7kekfk457a] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--wl-gold);
    text-shadow: 0 0 30px rgba(var(--wl-gold-rgb), 0.3);
}

.picker-content[b-7kekfk457a] {
    padding: 1.1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.picker-empty[b-7kekfk457a] {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--wl-text-muted);
}

.picker-search[b-7kekfk457a] {
    width: 100%;
    margin-bottom: 0.8rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.55rem;
    border: 1px solid var(--wl-border-medium);
    background: var(--wl-bg-primary);
    color: var(--wl-text-primary);
}
.picker-search:focus[b-7kekfk457a] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
}

.picker-list[b-7kekfk457a] { display: flex; flex-direction: column; gap: 0.6rem; }

.picker-row[b-7kekfk457a] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.6rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    cursor: pointer;
    transition: all 0.18s ease;
}

.picker-row:hover[b-7kekfk457a] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: var(--wl-border-medium);
}

.picker-row.selected[b-7kekfk457a] {
    background: linear-gradient(135deg, var(--wl-gold-bg) 0%, rgba(var(--wl-gold-rgb), 0.03) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.picker-row.disabled[b-7kekfk457a] {
    opacity: 0.5;
    cursor: not-allowed;
}

.picker-radio[b-7kekfk457a] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.picker-row.selected .picker-radio[b-7kekfk457a] { border-color: var(--wl-gold); }

.picker-radio-dot[b-7kekfk457a] {
    width: 9px;
    height: 9px;
    background: var(--wl-gold);
    border-radius: 50%;
    animation: radioPop-b-7kekfk457a 0.18s ease-out;
}

@keyframes radioPop-b-7kekfk457a { from { transform: scale(0); } to { transform: scale(1); } }

.picker-row-info[b-7kekfk457a] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.picker-row-title[b-7kekfk457a] {
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.picker-row.selected .picker-row-title[b-7kekfk457a] { color: var(--wl-gold); }

.picker-row-sub[b-7kekfk457a] {
    font-size: 0.78rem;
    color: var(--wl-text-muted);
}

.picker-metrics[b-7kekfk457a] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}
.picker-quality[b-7kekfk457a] { flex-shrink: 0; }
.picker-streams[b-7kekfk457a] {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-variant-numeric: tabular-nums;
}

.picker-badge[b-7kekfk457a] {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
}

.quality-stars[b-7kekfk457a] { display: flex; gap: 2px; }
.quality-star[b-7kekfk457a] { width: 14px; height: 14px; color: rgba(var(--wl-contrast-rgb), 0.15); }
.quality-star.full[b-7kekfk457a] { color: var(--wl-gold); }
.quality-star.half[b-7kekfk457a] { color: rgba(var(--wl-gold-rgb), 0.5); }
.quality-star[b-7kekfk457a]  svg { width: 100%; height: 100%; }

.picker-footer[b-7kekfk457a] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem 1.25rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    flex-shrink: 0;
}

.picker-btn[b-7kekfk457a] {
    padding: 0.55rem 1.2rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s;
}

.picker-btn.primary[b-7kekfk457a] {
    background: var(--wl-gold);
    border-color: var(--wl-gold);
    color: var(--wl-bg-primary);
}
.picker-btn.primary:hover:not(:disabled)[b-7kekfk457a] {
    background: var(--wl-gold-light);
    box-shadow: 0 0 18px rgba(var(--wl-gold-rgb), 0.3);
}
.picker-btn.primary:disabled[b-7kekfk457a] { opacity: 0.5; cursor: not-allowed; }

.picker-btn.secondary[b-7kekfk457a] {
    background: transparent;
    border-color: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.8);
}
.picker-btn.secondary:hover[b-7kekfk457a] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-primary);
}

/* The deal-terms editor sits inside the modal between content and footer. */
.picker-modal .deal-terms-editor[b-7kekfk457a] {
    margin: 0 1.25rem;
    flex-shrink: 0;
}

/* ── Loading / empty ── */
.loading-container[b-7kekfk457a] {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    padding: 3rem; color: var(--wl-text-muted);
}

.loading-spinner[b-7kekfk457a] {
    width: 2.5rem; height: 2.5rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: detail-spin-b-7kekfk457a 0.8s linear infinite;
}

@keyframes detail-spin-b-7kekfk457a { to { transform: rotate(360deg); } }

.empty-state[b-7kekfk457a] { padding: 2rem; text-align: center; color: var(--wl-text-muted); }

@media (max-width: 640px) {
    .project-detail[b-7kekfk457a] { padding: 1.25rem 1.25rem 9rem; }
    .picker-overlay[b-7kekfk457a] { padding: 70px 12px 12px; }
    .picker-modal[b-7kekfk457a] { max-height: calc(100vh - 60px); }
    .picker-header[b-7kekfk457a] { padding: 18px 40px 14px; }
    .role-row[b-7kekfk457a] { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
    .picker-overlay[b-7kekfk457a], .picker-modal[b-7kekfk457a], .picker-radio-dot[b-7kekfk457a] { animation: none !important; }
}
/* /Components/Pages/Career/Film/Projects/Index.razor.rz.scp.css */
.film-projects[b-v2k7kdcvp6] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
}

.projects-header h1[b-v2k7kdcvp6] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
}

.dlc-gate[b-v2k7kdcvp6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2.5rem 2rem;
    text-align: center;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
}

.gate-text[b-v2k7kdcvp6] { color: rgba(var(--wl-contrast-rgb), 0.75); margin: 0; }

.gate-cta[b-v2k7kdcvp6] {
    padding: 0.6rem 1.4rem;
    border-radius: 0.6rem;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-weight: 700;
    text-decoration: none;
}

.create-card[b-v2k7kdcvp6] {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.06) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.85rem;
    box-shadow: 0 2px 12px var(--wl-shadow-color);
}

.create-card h2[b-v2k7kdcvp6] {
    font-size: 1.1rem;
    margin: 0 0 1rem 0;
    color: var(--wl-text-primary);
}

.create-row[b-v2k7kdcvp6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.main-fields[b-v2k7kdcvp6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
    align-items: end;
}

.create-field[b-v2k7kdcvp6] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.create-field label[b-v2k7kdcvp6],
.scale-picker-head[b-v2k7kdcvp6] {
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.58);
}

.create-input[b-v2k7kdcvp6],
.create-select[b-v2k7kdcvp6] {
    padding: 0.6rem 0.8rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: var(--wl-bg-primary);
    color: var(--wl-text-primary);
}

.create-input[b-v2k7kdcvp6] { width: 100%; }
.create-select[b-v2k7kdcvp6] { width: 100%; }

.scale-picker[b-v2k7kdcvp6] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.scale-picker-head[b-v2k7kdcvp6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.scale-options[b-v2k7kdcvp6] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.scale-option[b-v2k7kdcvp6] {
    display: grid;
    gap: 0.22rem;
    min-height: 5.2rem;
    padding: 0.75rem;
    text-align: left;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.035);
    color: var(--wl-text-primary);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.scale-option:hover[b-v2k7kdcvp6] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.scale-option.selected[b-v2k7kdcvp6] {
    border-color: rgba(var(--wl-gold-rgb), 0.75);
    background: rgba(var(--wl-gold-rgb), 0.11);
    box-shadow: inset 0 0 0 1px rgba(var(--wl-gold-rgb), 0.2), 0 0 20px rgba(var(--wl-gold-rgb), 0.08);
}

.scale-title[b-v2k7kdcvp6] {
    font-weight: 800;
    color: var(--wl-text-primary);
}

.scale-meta[b-v2k7kdcvp6] {
    font-size: 0.78rem;
    color: var(--wl-gold);
    font-weight: 700;
}

.scale-cost[b-v2k7kdcvp6] {
    font-size: 0.78rem;
    color: var(--wl-text-primary);
    font-weight: 800;
}

.scale-note[b-v2k7kdcvp6] {
    font-size: 0.74rem;
    line-height: 1.25;
    color: rgba(var(--wl-contrast-rgb), 0.62);
}

.create-submit-row[b-v2k7kdcvp6] {
    justify-content: flex-end;
    margin-top: 1rem;
}

.btn-create[b-v2k7kdcvp6] {
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-weight: 700;
    cursor: pointer;
}

.btn-create:disabled[b-v2k7kdcvp6] { opacity: 0.5; cursor: not-allowed; }

.project-list[b-v2k7kdcvp6] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.project-card[b-v2k7kdcvp6] {
    display: flex;
    gap: 0.9rem;
    padding: 1rem 1.25rem 1rem 1rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.85rem;
    text-decoration: none;
    color: var(--wl-text-primary);
    box-shadow: 0 2px 12px var(--wl-shadow-color);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.project-card-info[b-v2k7kdcvp6] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
    flex: 1;
}

.project-card:hover[b-v2k7kdcvp6] {
    transform: translateY(-3px);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: 0 10px 30px var(--wl-shadow-color), 0 0 22px var(--wl-gold-bg);
}

@media (prefers-reduced-motion: reduce) {
    .project-card[b-v2k7kdcvp6] { transition: none; }
    .project-card:hover[b-v2k7kdcvp6] { transform: none; }
    .scale-option[b-v2k7kdcvp6] { transition: none; }
}

.project-title-row[b-v2k7kdcvp6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.project-title[b-v2k7kdcvp6] { font-size: 1.05rem; font-weight: 700; }

.project-status[b-v2k7kdcvp6] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.75);
}

.status-released[b-v2k7kdcvp6], .status-concluded[b-v2k7kdcvp6] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
}

.project-meta[b-v2k7kdcvp6], .project-roles[b-v2k7kdcvp6] {
    font-size: 0.82rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.loading-container[b-v2k7kdcvp6] {
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
    padding: 3rem; color: var(--wl-text-muted);
}

.loading-spinner[b-v2k7kdcvp6] {
    width: 2.5rem; height: 2.5rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: proj-spin-b-v2k7kdcvp6 0.8s linear infinite;
}

@keyframes proj-spin-b-v2k7kdcvp6 { to { transform: rotate(360deg); } }

.empty-state[b-v2k7kdcvp6] { padding: 2rem; text-align: center; color: var(--wl-text-muted); }

@media (max-width: 820px) {
    .main-fields[b-v2k7kdcvp6],
    .scale-options[b-v2k7kdcvp6] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Career/Film/Projects/Shoot.razor.rz.scp.css */
.shoot-page[b-202gxutl3s] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
}

.shoot-toolbar[b-202gxutl3s] { margin-bottom: 1rem; }
.back-link[b-202gxutl3s] { color: var(--wl-gold); text-decoration: none; font-size: 0.9rem; }

/* Movie-page hero (mirrors the detail hero): same poster blurred as a full-bleed backdrop + the
   sharp upright poster on the left + title beside it. Strong scrim for readable white text, all 3 themes. */
.shoot-hero[b-202gxutl3s] {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 220px;
    padding: 1.75rem;
    margin-bottom: 0.25rem;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
}
.shoot-hero[b-202gxutl3s]  .shoot-hero-backdrop {
    position: absolute;
    inset: -8%;
    width: 116%;
    height: 116%;
    object-fit: cover;
    filter: blur(32px) saturate(1.1);
    transform: scale(1.12);
    pointer-events: none;
}
.shoot-hero-scrim[b-202gxutl3s] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.7) 100%);
    pointer-events: none;
}

/* Cinematic atmosphere on both hero variants: faint film-grain + soft vignette, behind content
   (matches the shared FilmPageHeader). Subtle, theme-agnostic, static (reduced-motion safe). */
.shoot-hero[b-202gxutl3s]::after, .shoot-header[b-202gxutl3s]::after {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: 0.4; mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    background-size: 160px 160px; border-radius: inherit;
}
.shoot-header[b-202gxutl3s]::before {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    box-shadow: inset 0 0 110px 8px var(--wl-shadow-color);
    border-radius: inherit;
}
.shoot-hero-content[b-202gxutl3s] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}
.shoot-hero-poster[b-202gxutl3s] {
    flex-shrink: 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    border-radius: 0.6rem;
}
.shoot-hero-info[b-202gxutl3s] { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.shoot-hero .shoot-eyebrow[b-202gxutl3s] { color: var(--wl-gold-light); }
.shoot-meta[b-202gxutl3s] {
    font-size: 0.86rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.82);
}
.shoot-hero .shoot-title-row h1[b-202gxutl3s] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: #fff;
    margin: 0;
    line-height: 1;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

@media (max-width: 640px) {
    .shoot-hero-content[b-202gxutl3s] { flex-direction: column; align-items: flex-start; }
}

/* Poster-led cinematic header (consistent with the project detail page). */
.shoot-header[b-202gxutl3s] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 0.25rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.1) 0%,
        rgba(var(--wl-gold-rgb), 0.03) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(var(--wl-gold-rgb), 0.07), inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}
.shoot-header-bg[b-202gxutl3s] {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 100% 0%, var(--wl-gold-bg-hover) 0%, transparent 45%);
    pointer-events: none;
}
.shoot-header-info[b-202gxutl3s] { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.shoot-eyebrow[b-202gxutl3s] { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--wl-gold); font-weight: 700; }
.shoot-header .shoot-meta[b-202gxutl3s] { color: rgba(var(--wl-contrast-rgb), 0.62); }

.shoot-title-row[b-202gxutl3s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.shoot-title-row h1[b-202gxutl3s] { font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem; font-weight: 400; letter-spacing: 0.03em; color: var(--wl-text-primary); margin: 0; line-height: 1; }

.project-status[b-202gxutl3s] {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.2rem 0.55rem; border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08); color: rgba(var(--wl-contrast-rgb), 0.75);
}
.status-released[b-202gxutl3s], .status-concluded[b-202gxutl3s] { background: rgba(var(--wl-gold-rgb), 0.15); color: var(--wl-gold); }

/* ── Phase card: a real visual stepper + next-action aside ── */
.phase-card[b-202gxutl3s] {
    margin-top: 1.25rem;
    padding: 1.4rem 1.5rem;
    border-radius: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 1.5rem 2rem;
    align-items: center;
    background: linear-gradient(135deg, var(--wl-gold-bg) 0%, rgba(var(--wl-gold-rgb), 0.03) 60%, rgba(var(--wl-bg-secondary-rgb), 0.5) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: 0 4px 24px var(--wl-shadow-color), inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

/* The stepper: nodes laid out across a horizontal track whose gold fill grows to --phase-fill. */
.phase-stepper[b-202gxutl3s] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.25rem 0.5rem 0;
}
.phase-track[b-202gxutl3s] {
    position: absolute;
    top: calc(0.25rem + 1.35rem); /* vertically centered on the 2.7rem dots */
    left: 2rem; right: 2rem;
    height: 3px;
    background: rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 2px;
    overflow: hidden;
}
.phase-track-fill[b-202gxutl3s] {
    height: 100%;
    width: var(--phase-fill, 0%);
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.5);
    transition: width 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.phase-node[b-202gxutl3s] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    min-width: 0;
}
.phase-node-dot[b-202gxutl3s] {
    width: 2.7rem; height: 2.7rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--wl-bg-secondary);
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.18);
    color: rgba(var(--wl-contrast-rgb), 0.4);
    transition: transform 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.phase-node-icon[b-202gxutl3s] { display: inline-flex; width: 1.3rem; height: 1.3rem; }
.phase-node-icon[b-202gxutl3s]  svg { width: 100%; height: 100%; }
.phase-node-label[b-202gxutl3s] {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    text-align: center;
    transition: color 0.3s ease;
}
/* Done: solid gold tint + gold check. Active: gold ring + glow + slight scale-up. Future: muted. */
.phase-node.done .phase-node-dot[b-202gxutl3s] {
    background: rgba(var(--wl-gold-rgb), 0.16);
    border-color: rgba(var(--wl-gold-rgb), 0.55);
    color: var(--wl-gold);
}
.phase-node.done .phase-node-label[b-202gxutl3s] { color: var(--wl-gold); }
.phase-node.active .phase-node-dot[b-202gxutl3s] {
    background: var(--wl-gold);
    border-color: var(--wl-gold);
    color: var(--wl-bg-primary);
    transform: scale(1.12);
    box-shadow: 0 0 0 4px var(--wl-gold-bg), 0 0 22px rgba(var(--wl-gold-rgb), 0.45);
}
.phase-node.active .phase-node-label[b-202gxutl3s] {
    color: var(--wl-text-primary);
    text-shadow: 0 0 16px rgba(var(--wl-gold-rgb), 0.4);
}

/* Aside: hint + next action + recording progress, filling the formerly-dead right side. */
.phase-aside[b-202gxutl3s] { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.phase-hint[b-202gxutl3s] { margin: 0; color: rgba(var(--wl-contrast-rgb), 0.82); font-size: 0.9rem; line-height: 1.45; }
.phase-actions[b-202gxutl3s] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.phase-progress-meter[b-202gxutl3s] { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.1rem; }
.phase-progress-bar[b-202gxutl3s] { height: 6px; border-radius: 3px; background: rgba(var(--wl-contrast-rgb), 0.1); overflow: hidden; }
.phase-progress-bar-fill[b-202gxutl3s] {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
    box-shadow: 0 0 8px rgba(var(--wl-gold-rgb), 0.4);
    transition: width 0.5s cubic-bezier(0.34, 1.2, 0.64, 1);
}
.phase-progress-text[b-202gxutl3s] {
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em;
    color: rgba(var(--wl-contrast-rgb), 0.6); font-variant-numeric: tabular-nums;
}

@media (max-width: 820px) {
    .phase-card[b-202gxutl3s] { grid-template-columns: 1fr; gap: 1.1rem; }
}

@media (max-width: 640px) {
    .phase-card[b-202gxutl3s] {
        padding: 1rem;
        border-radius: 0.75rem;
    }
    .phase-stepper[b-202gxutl3s] {
        padding: 0;
        gap: 0.15rem;
    }
    .phase-track[b-202gxutl3s] {
        top: 1.1rem;
        left: 1.65rem;
        right: 1.65rem;
    }
    .phase-node[b-202gxutl3s] {
        gap: 0.35rem;
    }
    .phase-node-dot[b-202gxutl3s] {
        width: 2.2rem;
        height: 2.2rem;
    }
    .phase-node-icon[b-202gxutl3s] {
        width: 1.05rem;
        height: 1.05rem;
    }
    .phase-node-label[b-202gxutl3s] {
        max-width: 4.8rem;
        font-size: 0.58rem;
        line-height: 1.05;
        letter-spacing: 0.02em;
    }
    .phase-aside[b-202gxutl3s] {
        align-items: center;
        text-align: center;
    }
    .phase-actions[b-202gxutl3s] {
        width: 100%;
    }
    .phase-actions .btn-action[b-202gxutl3s] {
        justify-content: center;
        width: 100%;
    }
}

/* ── Sections / buttons ── */
.scene-section[b-202gxutl3s] { margin-top: 1.5rem; }
.section-head[b-202gxutl3s] { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; }
.section-head h2[b-202gxutl3s] { margin: 0; font-size: 1.1rem; color: var(--wl-text-primary); }
.section-title-stack[b-202gxutl3s] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.section-title-stack span[b-202gxutl3s] {
    font-size: 0.78rem;
    color: rgba(var(--wl-contrast-rgb), 0.58);
    font-weight: 700;
}

.btn-action[b-202gxutl3s] {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1rem; border: 1px solid var(--wl-border-medium); border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.04); color: var(--wl-text-primary);
    font-weight: 600; cursor: pointer; transition: all 0.18s ease;
}
.btn-action:hover:not(:disabled)[b-202gxutl3s] { background: rgba(var(--wl-contrast-rgb), 0.08); border-color: rgba(var(--wl-gold-rgb), 0.3); }
.btn-action.primary[b-202gxutl3s] { background: var(--wl-gold); color: var(--wl-bg-primary); border: none; }
.btn-action.primary:hover:not(:disabled)[b-202gxutl3s] { background: var(--wl-gold-light); box-shadow: 0 0 18px rgba(var(--wl-gold-rgb), 0.25); }
.btn-action.small[b-202gxutl3s] { padding: 0.32rem 0.7rem; font-size: 0.82rem; }
.btn-action:disabled[b-202gxutl3s] { opacity: 0.5; cursor: not-allowed; }

.btn-icon[b-202gxutl3s] { display: inline-flex; width: 1rem; height: 1rem; }
.btn-icon[b-202gxutl3s]  svg { width: 100%; height: 100%; }

.hint[b-202gxutl3s] { font-size: 0.82rem; color: rgba(var(--wl-contrast-rgb), 0.55); }
.empty-state[b-202gxutl3s] { padding: 2rem; text-align: center; color: var(--wl-text-muted); }

/* ── Define scene form ── */
.define-form-shell[b-202gxutl3s] {
    margin: 0 0 1rem;
    padding: 0.85rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-contrast-rgb), 0.045) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.62) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-radius: 0.75rem;
    box-shadow: 0 10px 28px var(--wl-shadow-color), inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}
.define-form-head[b-202gxutl3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}
.define-heading[b-202gxutl3s] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}
.define-head-icon[b-202gxutl3s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 0.55rem;
    background: var(--wl-gold-bg);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.35);
}
.define-head-icon[b-202gxutl3s]  svg { width: 1rem; height: 1rem; }
.define-kicker[b-202gxutl3s] {
    display: block;
    margin-bottom: 0.05rem;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.55);
    font-weight: 800;
}
.define-heading h3[b-202gxutl3s] {
    margin: 0;
    color: var(--wl-text-primary);
    font-size: 1.05rem;
    line-height: 1.15;
}
.define-preview[b-202gxutl3s] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem;
    color: rgba(var(--wl-contrast-rgb), 0.58);
    font-size: 0.75rem;
    font-weight: 700;
    text-align: right;
}
.define-preview strong[b-202gxutl3s] {
    padding: 0.16rem 0.48rem;
    border-radius: 999px;
    background: var(--wl-gold-bg);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
    font-size: 0.76rem;
}
.define-form-grid[b-202gxutl3s] {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(300px, 1.2fr);
    grid-template-areas:
        "type cast"
        "duration cast";
    gap: 0.65rem;
    align-items: stretch;
}
.define-card[b-202gxutl3s] {
    min-width: 0;
    padding: 0.72rem 0.8rem;
    background: rgba(var(--wl-contrast-rgb), 0.026);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.55rem;
}
.define-card label[b-202gxutl3s], .define-card-head label[b-202gxutl3s] {
    display: block;
    margin: 0 0 0.35rem;
    font-size: 0.67rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.58);
    font-weight: 800;
}
.define-card-head[b-202gxutl3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}
.define-card-head label[b-202gxutl3s] { margin-bottom: 0; }
.define-card-head span[b-202gxutl3s] {
    flex: 0 0 auto;
    color: var(--wl-gold);
    font-size: 0.74rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.scene-type-card[b-202gxutl3s] { grid-area: type; }
.duration-card[b-202gxutl3s] { grid-area: duration; }
.cast-card[b-202gxutl3s] {
    grid-area: cast;
    display: flex;
    flex-direction: column;
}
.define-input[b-202gxutl3s] {
    width: 100%;
    min-height: 2.45rem;
    padding: 0.48rem 0.7rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: var(--wl-bg-primary);
    color: var(--wl-text-primary);
    font-weight: 700;
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}
.define-input:focus[b-202gxutl3s] {
    border-color: rgba(var(--wl-gold-rgb), 0.6);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.12);
}
.duration-control[b-202gxutl3s] {
    display: grid;
    grid-template-columns: 2.35rem minmax(4.8rem, 1fr) 2.35rem;
    align-items: center;
    gap: 0.35rem;
}
.duration-input[b-202gxutl3s] {
    width: 100%;
    text-align: center;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.duration-step[b-202gxutl3s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-primary);
    font-weight: 900;
    cursor: pointer;
}
.duration-step:hover:not(:disabled)[b-202gxutl3s] {
    border-color: rgba(var(--wl-gold-rgb), 0.45);
    background: var(--wl-gold-bg);
}
.duration-step:disabled[b-202gxutl3s] { opacity: 0.45; cursor: not-allowed; }
.duration-hint[b-202gxutl3s] {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.58);
}
.define-actions[b-202gxutl3s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-subtle);
}
.define-actions-meta[b-202gxutl3s] {
    min-width: 0;
    color: rgba(var(--wl-contrast-rgb), 0.62);
    font-size: 0.78rem;
    font-weight: 800;
}
.define-action-buttons[b-202gxutl3s] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cast-chips[b-202gxutl3s], .ost-list[b-202gxutl3s] { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cast-card .cast-chips[b-202gxutl3s] { align-content: flex-start; }
.cast-chip[b-202gxutl3s] {
    min-height: 2rem;
    padding: 0.28rem 0.65rem; border-radius: 999px; border: 1px solid var(--wl-border-medium);
    background: rgba(var(--wl-contrast-rgb), 0.03); color: rgba(var(--wl-contrast-rgb), 0.8);
    font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: all 0.15s ease;
}
.cast-chip:hover[b-202gxutl3s] { border-color: rgba(var(--wl-gold-rgb), 0.4); }
.cast-chip.selected[b-202gxutl3s] { background: var(--wl-gold-bg); border-color: rgba(var(--wl-gold-rgb), 0.6); color: var(--wl-gold); }

@media (max-width: 760px) {
    .define-form-head[b-202gxutl3s] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.65rem;
    }
    .define-preview[b-202gxutl3s] {
        justify-content: flex-start;
        text-align: left;
    }
    .define-form-grid[b-202gxutl3s] {
        grid-template-columns: 1fr;
        grid-template-areas:
            "type"
            "duration"
            "cast";
    }
    .define-actions[b-202gxutl3s] {
        align-items: stretch;
        flex-direction: column;
    }
    .define-action-buttons[b-202gxutl3s] {
        justify-content: stretch;
    }
    .define-action-buttons .btn-action[b-202gxutl3s] {
        justify-content: center;
        flex: 1 1 auto;
    }
}

/* ── Scene timeline ── */
.scene-list[b-202gxutl3s] { display: flex; flex-direction: column; gap: 0.6rem; }
/* Page-load reveal: scene cards rise+fade in with a short stagger (the hero + phase card lead).
   'backwards' fill so the existing :hover transform-lift still works after the reveal completes. */
@keyframes shootRowReveal-b-202gxutl3s {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
.scene-list .scene-row[b-202gxutl3s] { animation: shootRowReveal-b-202gxutl3s 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.scene-list .scene-row:nth-child(1)[b-202gxutl3s] { animation-delay: 0.06s; }
.scene-list .scene-row:nth-child(2)[b-202gxutl3s] { animation-delay: 0.12s; }
.scene-list .scene-row:nth-child(3)[b-202gxutl3s] { animation-delay: 0.18s; }
.scene-list .scene-row:nth-child(4)[b-202gxutl3s] { animation-delay: 0.24s; }
.scene-list .scene-row:nth-child(n+5)[b-202gxutl3s] { animation-delay: 0.3s; }
/* Scene timeline cards: depth + hover-lift, matching the WL card language. */
.scene-row[b-202gxutl3s] {
    display: flex; flex-direction: column; gap: 0.65rem;
    padding: 0.9rem 1rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.035) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.5) 100%);
    border: 1px solid var(--wl-border-subtle); border-radius: 0.5rem;
    box-shadow: 0 2px 12px var(--wl-shadow-color);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.scene-overview[b-202gxutl3s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
}
.scene-identity[b-202gxutl3s] { display: flex; align-items: flex-start; gap: 0.9rem; min-width: 0; }
.scene-complete-pill[b-202gxutl3s], .scene-pending-pill[b-202gxutl3s] {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 0.12rem 0.5rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap;
}
.scene-complete-pill[b-202gxutl3s] { background: rgba(var(--wl-gold-rgb), 0.18); color: var(--wl-gold); }
.scene-pending-pill[b-202gxutl3s] { background: rgba(var(--wl-contrast-rgb), 0.08); color: var(--wl-text-muted); }
.scene-duration-pill[b-202gxutl3s] {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.07);
    color: rgba(var(--wl-contrast-rgb), 0.72);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}
.scene-complete-pill .btn-icon[b-202gxutl3s] { display: inline-flex; }
.scene-complete-pill .btn-icon[b-202gxutl3s]  svg { width: 0.8rem; height: 0.8rem; }

/* Scene breakdown: cast recordings on the left, direction + music context on the right. */
.scene-breakdown[b-202gxutl3s] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
    gap: 0.75rem;
    margin-left: 2.8rem;
    padding-top: 0.1rem;
}
.breakdown-block[b-202gxutl3s] {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.breakdown-head[b-202gxutl3s] {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.55);
}
.element-grid[b-202gxutl3s], .support-grid[b-202gxutl3s] { display: grid; gap: 0.45rem; }
.element-tile[b-202gxutl3s] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.65rem;
    padding: 0.48rem 0.6rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.45rem;
    background: rgba(var(--wl-contrast-rgb), 0.025);
}
.element-tile.empty[b-202gxutl3s] {
    display: block;
    min-height: 0;
    color: var(--wl-text-muted);
    font-size: 0.84rem;
}
.element-tile.recorded[b-202gxutl3s] {
    border-color: rgba(var(--wl-gold-rgb), 0.24);
    background: rgba(var(--wl-gold-rgb), 0.04);
}
.element-tile.direction[b-202gxutl3s] {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
}
.element-icon[b-202gxutl3s] { display: inline-flex; width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--wl-text-muted); }
.element-tile.recorded .element-icon[b-202gxutl3s] { color: var(--wl-gold); }
.element-icon[b-202gxutl3s]  svg { width: 100%; height: 100%; }
.element-copy[b-202gxutl3s] { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.element-label[b-202gxutl3s] { min-width: 0; color: var(--wl-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.element-meta[b-202gxutl3s] { min-width: 0; color: rgba(var(--wl-contrast-rgb), 0.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; }
.element-state[b-202gxutl3s] { justify-self: end; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--wl-text-muted); white-space: nowrap; }
.element-score[b-202gxutl3s] {
    justify-self: end;
    font-weight: 800; font-variant-numeric: tabular-nums; color: var(--wl-gold);
    background: var(--wl-gold-bg); border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.45rem; padding: 0.08rem 0.4rem; cursor: pointer; font-size: 0.82rem;
}
.element-score.auto[b-202gxutl3s] { cursor: default; opacity: 0.85; } /* music auto - no report to open */
.element-tile.music .element-icon[b-202gxutl3s] { color: rgba(var(--wl-gold-rgb), 0.6); }
.scene-row:hover[b-202gxutl3s] {
    transform: translateY(-2px);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: 0 8px 24px var(--wl-shadow-color), 0 0 18px var(--wl-gold-bg);
}
/* Completed scenes get a subtle gold tint + the order numeral goes gold. */
.scene-row.status-completed[b-202gxutl3s] {
    border-color: rgba(var(--wl-gold-rgb), 0.24);
    background: linear-gradient(145deg, rgba(var(--wl-gold-rgb), 0.045) 0%, rgba(var(--wl-bg-secondary-rgb), 0.52) 100%);
}
.scene-row.status-completed .scene-order[b-202gxutl3s] { background: var(--wl-gold-bg); color: var(--wl-gold); }

.scene-order[b-202gxutl3s] {
    width: 1.9rem; height: 1.9rem; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 0.5rem; background: rgba(var(--wl-contrast-rgb), 0.06);
    font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}
.scene-main[b-202gxutl3s] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.scene-title-row[b-202gxutl3s] { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.scene-type[b-202gxutl3s] { font-weight: 800; color: var(--wl-text-primary); font-size: 1.05rem; }
.scene-cast[b-202gxutl3s] { font-size: 0.82rem; color: rgba(var(--wl-contrast-rgb), 0.6); }
.scene-subline[b-202gxutl3s] {
    display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
    font-size: 0.78rem; color: rgba(var(--wl-contrast-rgb), 0.58);
}
.scene-ost[b-202gxutl3s] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; color: var(--wl-gold);
}
.scene-ost .btn-icon[b-202gxutl3s] { width: 0.85rem; height: 0.85rem; }

.event-pill[b-202gxutl3s] {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.12rem 0.5rem; border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.12); color: var(--wl-gold);
    border: none; cursor: pointer; font-size: 0.72rem; font-weight: 600;
}
.event-pill .btn-icon[b-202gxutl3s] { width: 0.8rem; height: 0.8rem; }
.event-pill.pending[b-202gxutl3s] { background: rgba(var(--wl-gold-rgb), 0.22); animation: eventPulse-b-202gxutl3s 1.6s ease-in-out infinite; }

@keyframes eventPulse-b-202gxutl3s { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

.scene-score-panel[b-202gxutl3s] {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.35rem 0.5rem;
    align-items: center;
    justify-items: end;
    min-width: 5.25rem;
}
.score-label[b-202gxutl3s] {
    grid-column: 1 / -1;
    font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.48);
}

/* Compatibility for a stale --no-build server that still renders the pre-breakdown markup. */
.scene-head[b-202gxutl3s] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
}
.scene-side[b-202gxutl3s] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    justify-content: flex-end;
    min-width: max-content;
}
.element-checklist[b-202gxutl3s] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
    gap: 0.45rem 0.75rem;
    margin-left: 2.8rem;
    padding-top: 0.15rem;
}
.element-row[b-202gxutl3s] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.65rem;
    padding: 0.48rem 0.6rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.45rem;
    background: rgba(var(--wl-contrast-rgb), 0.025);
    font-size: 0.86rem;
}
.element-row.recorded[b-202gxutl3s] {
    border-color: rgba(var(--wl-gold-rgb), 0.22);
    background: rgba(var(--wl-gold-rgb), 0.04);
}
.element-row.pending .element-label[b-202gxutl3s] { color: var(--wl-text-muted); }
.element-row.music .element-icon[b-202gxutl3s] { color: rgba(var(--wl-gold-rgb), 0.6); }
.element-row .btn-action.small[b-202gxutl3s] { justify-self: end; }
.scene-side[b-202gxutl3s] { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.scene-actions[b-202gxutl3s] { display: flex; align-items: center; gap: 0.4rem; }

.quality-badge[b-202gxutl3s] {
    min-width: 2.6rem; padding: 0.3rem 0.5rem;
    border-radius: 0.5rem; border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    background: var(--wl-gold-bg); color: var(--wl-gold);
    font-weight: 800; font-variant-numeric: tabular-nums; text-align: center;
}
.quality-badge.is-static[b-202gxutl3s] { cursor: default; }
.quality-badge.muted[b-202gxutl3s] {
    border-color: var(--wl-border-medium);
    background: rgba(var(--wl-contrast-rgb), 0.035);
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

.btn-ost[b-202gxutl3s] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0.4rem;
    border: 1px solid var(--wl-border-medium); border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.04); color: rgba(var(--wl-contrast-rgb), 0.7);
    cursor: pointer;
}
.btn-ost:hover:not(:disabled)[b-202gxutl3s] { color: var(--wl-gold); border-color: rgba(var(--wl-gold-rgb), 0.3); }
.btn-ost .btn-icon[b-202gxutl3s] { width: 100%; height: 100%; }

/* ── Report modal (mirrors the music recording report) ── */
.report-modal-overlay[b-202gxutl3s] {
    position: fixed; inset: 0; z-index: 9000;
    background: var(--wl-overlay-bg); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 80px 20px 20px; overflow-y: auto;
    animation: shootFade-b-202gxutl3s 0.2s ease-out;
}
@keyframes shootFade-b-202gxutl3s { from { opacity: 0; } to { opacity: 1; } }

.report-modal[b-202gxutl3s], .picker-modal[b-202gxutl3s] {
    position: relative; width: 100%; max-width: 560px;
    max-height: calc(100vh - 100px); display: flex; flex-direction: column; overflow: hidden;
    border-radius: 0.9rem;
    background: linear-gradient(135deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%);
    border: 1px solid var(--wl-gold-border);
    box-shadow: 0 25px 80px var(--wl-shadow-color), 0 0 100px rgba(var(--wl-gold-rgb), 0.05);
    animation: shootRise-b-202gxutl3s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes shootRise-b-202gxutl3s { from { opacity: 0; transform: translateY(24px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

.report-header[b-202gxutl3s], .picker-header[b-202gxutl3s] {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--wl-gold-bg-hover); flex-shrink: 0;
}
.report-header h2[b-202gxutl3s], .picker-header h2[b-202gxutl3s] { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--wl-gold); }
.picker-header[b-202gxutl3s] { justify-content: center; }
.report-title-stack[b-202gxutl3s] { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; }
.report-title-stack h2[b-202gxutl3s] { line-height: 1.15; }
.report-title-stack p[b-202gxutl3s] {
    margin: 0;
    color: rgba(var(--wl-contrast-rgb), 0.68);
    font-size: 0.86rem;
    line-height: 1.35;
}
.report-eyebrow[b-202gxutl3s] {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.close-btn[b-202gxutl3s] {
    width: 34px; height: 34px; padding: 7px;
    background: rgba(var(--wl-contrast-rgb), 0.03); border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem; color: rgba(var(--wl-contrast-rgb), 0.6); cursor: pointer;
}
.close-btn:hover[b-202gxutl3s] { background: var(--wl-gold-bg); color: var(--wl-gold); }
.close-btn[b-202gxutl3s]  svg { width: 100%; height: 100%; }
.picker-modal .close-btn[b-202gxutl3s] { position: absolute; top: 14px; right: 14px; z-index: 5; }

/* Hero gauge */
.report-quality-hero[b-202gxutl3s] { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.35rem 1.25rem 1rem; }
.hero-gauge[b-202gxutl3s] { position: relative; width: 130px; height: 130px; }
.hero-ring[b-202gxutl3s] { width: 100%; height: 100%; transform: rotate(-90deg); }
.hero-ring-bg[b-202gxutl3s] { fill: none; stroke: rgba(var(--wl-contrast-rgb), 0.1); stroke-width: 2.5; }
.hero-ring-fill[b-202gxutl3s] { fill: none; stroke-width: 2.5; stroke-linecap: round; transition: stroke-dasharray 0.6s ease; }
.hero-center[b-202gxutl3s] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.1rem; }
.hero-value[b-202gxutl3s] { font-size: 2.2rem; font-weight: 800; color: var(--wl-gold); }
.hero-max[b-202gxutl3s] { font-size: 0.9rem; color: rgba(var(--wl-contrast-rgb), 0.5); }
.report-stats[b-202gxutl3s] {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
.report-stat[b-202gxutl3s] {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.025);
}
.report-stat span[b-202gxutl3s] {
    display: block;
    font-size: 0.64rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.48);
}
.report-stat strong[b-202gxutl3s] {
    display: block;
    margin-top: 0.18rem;
    color: var(--wl-text-primary);
    font-variant-numeric: tabular-nums;
}

.report-factors[b-202gxutl3s] { padding: 0.5rem 1.25rem; overflow-y: auto; flex: 1; min-height: 0; }
.factor-group[b-202gxutl3s] { margin-bottom: 1rem; }
.factor-group h3[b-202gxutl3s] {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.5); margin: 0 0 0.4rem 0;
}
.factor-row[b-202gxutl3s] { padding: 0.45rem 0; border-bottom: 1px solid var(--wl-border-subtle); }
.factor-header[b-202gxutl3s] { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.factor-title[b-202gxutl3s] { font-size: 0.88rem; color: var(--wl-text-primary); display: inline-flex; align-items: center; gap: 0.4rem; }
.performer-badge[b-202gxutl3s] {
    font-size: 0.68rem; font-weight: 700; padding: 0.05rem 0.35rem; border-radius: 0.25rem;
    background: rgba(var(--wl-gold-rgb), 0.12); color: var(--wl-gold);
}
.contribution-value[b-202gxutl3s] { font-weight: 700; font-variant-numeric: tabular-nums; }
.factor-row.positive .contribution-value[b-202gxutl3s] { color: var(--wl-gold); }
.factor-row.negative .contribution-value[b-202gxutl3s] { color: rgba(var(--wl-contrast-rgb), 0.55); }
.factor-progress[b-202gxutl3s] { margin-top: 0.35rem; }
.progress-track[b-202gxutl3s] { height: 4px; border-radius: 2px; background: var(--wl-border-medium); overflow: hidden; }
.progress-fill[b-202gxutl3s] { height: 100%; background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light)); border-radius: 2px; transition: width 0.4s ease; }

.report-tips[b-202gxutl3s] { padding: 0.5rem 1.25rem 1.25rem; }
.report-tips h3[b-202gxutl3s] { font-size: 0.85rem; color: var(--wl-text-primary); margin: 0 0 0.5rem 0; }
.report-tips ul[b-202gxutl3s] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.report-tips li[b-202gxutl3s] {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.85rem; color: rgba(var(--wl-contrast-rgb), 0.75);
}
.report-tips .btn-icon[b-202gxutl3s] { color: var(--wl-gold); flex-shrink: 0; }

/* Event card in the report */
.event-card[b-202gxutl3s] {
    margin: 0 1.25rem 0.75rem; padding: 0.8rem 1rem;
    border-radius: 0.6rem; background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-subtle);
}
.event-card.pending[b-202gxutl3s] { border-color: rgba(var(--wl-gold-rgb), 0.5); background: var(--wl-gold-bg); }
.event-card-head[b-202gxutl3s] { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; color: var(--wl-gold); }
.event-card-head .btn-icon[b-202gxutl3s] { width: 0.9rem; height: 0.9rem; }
.event-card-desc[b-202gxutl3s] { margin: 0.4rem 0 0.5rem 0; font-size: 0.85rem; color: rgba(var(--wl-contrast-rgb), 0.8); }
.event-choices[b-202gxutl3s] { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.event-resolved[b-202gxutl3s] { font-size: 0.82rem; color: var(--wl-gold); font-weight: 600; }

/* ── OST picker ── */
.picker-content[b-202gxutl3s] { padding: 1.1rem 1.25rem; overflow-y: auto; flex: 1; min-height: 0; }
.ost-list[b-202gxutl3s] { flex-direction: column; gap: 0.5rem; }
.ost-row[b-202gxutl3s] {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.7rem 0.85rem; border: 1px solid var(--wl-border-subtle); border-radius: 0.6rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
}
.ost-row.pinned[b-202gxutl3s] { border-color: rgba(var(--wl-gold-rgb), 0.4); background: var(--wl-gold-bg); }
.ost-info[b-202gxutl3s] { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ost-title[b-202gxutl3s] { font-weight: 600; color: var(--wl-text-primary); }
.ost-artist[b-202gxutl3s] { font-size: 0.78rem; color: var(--wl-text-muted); }
.ost-fit[b-202gxutl3s] {
    font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.fit-perfect[b-202gxutl3s] { background: rgba(var(--wl-gold-rgb), 0.2); color: var(--wl-gold); }
.fit-fits[b-202gxutl3s] { background: rgba(var(--wl-contrast-rgb), 0.08); color: rgba(var(--wl-contrast-rgb), 0.75); }
.fit-clashes[b-202gxutl3s] { background: rgba(var(--wl-contrast-rgb), 0.05); color: rgba(var(--wl-contrast-rgb), 0.5); }

.loading-container[b-202gxutl3s] { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem; color: var(--wl-text-muted); }
.loading-spinner[b-202gxutl3s] {
    width: 2.5rem; height: 2.5rem; border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold); border-radius: 50%; animation: shootSpin-b-202gxutl3s 0.8s linear infinite;
}
@keyframes shootSpin-b-202gxutl3s { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .report-modal[b-202gxutl3s], .picker-modal[b-202gxutl3s], .report-modal-overlay[b-202gxutl3s],
    .event-pill.pending[b-202gxutl3s], .progress-fill[b-202gxutl3s], .hero-ring-fill[b-202gxutl3s] { animation: none !important; transition: none !important; }
    .scene-row[b-202gxutl3s] { transition: none; animation: none; }
    .scene-row:hover[b-202gxutl3s] { transform: none; }
    .phase-track-fill[b-202gxutl3s], .phase-node-dot[b-202gxutl3s], .phase-node-label[b-202gxutl3s], .phase-progress-bar-fill[b-202gxutl3s] { transition: none !important; }
    .phase-node.active .phase-node-dot[b-202gxutl3s] { transform: none; } /* keep the glow ring, drop the scale animation */
}

@media (max-width: 640px) {
    .shoot-page[b-202gxutl3s] { padding: 1.25rem 1.25rem 9rem; }
    .report-modal-overlay[b-202gxutl3s] { padding: 70px 12px 12px; }
    .scene-overview[b-202gxutl3s], .scene-breakdown[b-202gxutl3s] { grid-template-columns: 1fr; }
    .scene-breakdown[b-202gxutl3s] { margin-left: 0; }
    .report-stats[b-202gxutl3s] { grid-template-columns: 1fr; }
    .scene-score-panel[b-202gxutl3s] { justify-items: start; grid-template-columns: auto auto; }
    .element-tile.direction[b-202gxutl3s] { grid-template-columns: auto minmax(0, 1fr) auto; }
    .element-tile.direction .btn-action[b-202gxutl3s] { grid-column: 2 / -1; justify-self: start; }
}
/* /Components/Pages/Career/Film/Shared/FilmEmptyState.razor.rz.scp.css */
/* Empty state - a SOLID elevated cinematic surface (Basia round 3: the old 2px dashed border read
   as a Figma dropzone / unfinished placeholder). Gold hairline + inner top highlight + surface
   gradient + drop shadow + a faint directional spotlight & grain, so empty reads intentional. */
.film-empty[b-aailgt8o2w] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 55%),
        linear-gradient(160deg, rgba(var(--wl-bg-modal-rgb), 0.55) 0%, rgba(var(--wl-bg-secondary-rgb), 0.55) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 1.5rem;
    /* Cinematic LETTERBOX bars (top/bottom dark bands with a gold inner edge) - the film motif,
       made visibly present (Basia round 4). */
    box-shadow:
        inset 0 7px 0 rgba(0, 0, 0, 0.4),
        inset 0 8px 0 rgba(var(--wl-gold-rgb), 0.3),
        inset 0 -7px 0 rgba(0, 0, 0, 0.4),
        inset 0 -8px 0 rgba(var(--wl-gold-rgb), 0.3),
        0 24px 60px -22px var(--wl-shadow-color),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.06);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Sprocket-hole rail down the left inner edge of the empty card (the film motif). */
.film-empty[b-aailgt8o2w]::after {
    content: "";
    position: absolute; top: 1rem; bottom: 1rem; left: 0.7rem; z-index: 0; pointer-events: none;
    width: 12px;
    opacity: 0.5;
    background: repeating-linear-gradient(180deg, transparent 0 8px, rgba(var(--wl-contrast-rgb), 0.28) 8px 16px);
    -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 8px, transparent 8px 16px);
    mask-image: repeating-linear-gradient(180deg, #000 0 8px, transparent 8px 16px);
}
/* Faint film-grain texture over the surface (round-3 atmosphere, static). */
.film-empty[b-aailgt8o2w]::before {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: 0.35; mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    border-radius: inherit;
}
.film-empty > *[b-aailgt8o2w] { position: relative; z-index: 1; }

.film-empty:hover[b-aailgt8o2w] {
    border-color: rgba(var(--wl-gold-rgb), 0.32);
    box-shadow:
        0 28px 70px -22px var(--wl-shadow-color),
        0 0 40px rgba(var(--wl-gold-rgb), 0.06),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.08);
}

/* Icon as a grounded crest: a circular plate (not a floating glow) with a gold ring + inset shadow,
   the radial glow layered BEHIND the plate. Sized to balance the Bebas headline. */
.film-empty-icon[b-aailgt8o2w] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 6.5rem;
    height: 6.5rem;
    margin-bottom: 1.75rem;
    border-radius: 50%;
    color: var(--wl-gold);
    background:
        radial-gradient(circle at 50% 36%, rgba(var(--wl-gold-rgb), 0.22) 0%, rgba(var(--wl-gold-rgb), 0.06) 62%, rgba(var(--wl-bg-modal-rgb), 0.6) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    box-shadow:
        inset 0 0 28px rgba(var(--wl-gold-rgb), 0.12),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.12),
        0 8px 24px -8px var(--wl-shadow-color);
    animation: film-empty-pulse-b-aailgt8o2w 3.2s ease-in-out infinite;
}

/* The icon SVG comes from the consumer (Icon slot), so reach it with ::deep. */
.film-empty-icon[b-aailgt8o2w]  svg { width: 3.1rem; height: 3.1rem; filter: drop-shadow(0 2px 8px rgba(var(--wl-gold-rgb), 0.3)); }

@keyframes film-empty-pulse-b-aailgt8o2w {
    0%, 100% { box-shadow: inset 0 0 28px rgba(var(--wl-gold-rgb), 0.12), inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.12), 0 8px 24px -8px var(--wl-shadow-color), 0 0 18px rgba(var(--wl-gold-rgb), 0.1); }
    50% { box-shadow: inset 0 0 28px rgba(var(--wl-gold-rgb), 0.18), inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.12), 0 8px 24px -8px var(--wl-shadow-color), 0 0 34px rgba(var(--wl-gold-rgb), 0.26); }
}

/* ── Bespoke art slot: a layered Hugeicon composition over a soft gold halo. Each section's art
   (FilmIcons.Art*) is a .film-art span with one .art-main hero glyph + two offset .art-sub accents.
   The SVGs are cross-component (from FilmIcons), so reach them with ::deep. ── */
.film-empty.has-art[b-aailgt8o2w] { padding-top: 3.5rem; }
.film-empty-art[b-aailgt8o2w] {
    position: relative;
    width: 8.5rem;
    height: 7rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Soft gold halo behind the composition (a gentle opacity breathe, not the plate box-shadow pulse). */
.film-empty-art[b-aailgt8o2w]::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 7rem; height: 7rem;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--wl-gold-rgb), 0.16) 0%, rgba(var(--wl-gold-rgb), 0.04) 55%, transparent 72%);
    animation: film-halo-breathe-b-aailgt8o2w 3.4s ease-in-out infinite;
}
@keyframes film-halo-breathe-b-aailgt8o2w {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
.film-empty-art[b-aailgt8o2w]  .film-art {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%; height: 100%;
}
/* The hero glyph (centered, gold) + the two accents (smaller, offset, dimmer) - layered like a
   little poster/marquee scene. */
.film-empty-art[b-aailgt8o2w]  .art-main {
    position: relative;
    z-index: 1;
    display: inline-flex;
    color: var(--wl-gold);
    filter: drop-shadow(0 3px 10px rgba(var(--wl-gold-rgb), 0.35));
}
.film-empty-art[b-aailgt8o2w]  .art-main svg { width: 3.4rem; height: 3.4rem; }
.film-empty-art[b-aailgt8o2w]  .art-sub {
    position: absolute;
    display: inline-flex;
    color: rgba(var(--wl-gold-rgb), 0.5);
}
.film-empty-art[b-aailgt8o2w]  .art-sub svg { width: 2rem; height: 2rem; }
.film-empty-art[b-aailgt8o2w]  .art-sub-1 { top: 0.2rem; left: 0.8rem; transform: rotate(-12deg); }
.film-empty-art[b-aailgt8o2w]  .art-sub-2 { bottom: 0.2rem; right: 0.8rem; transform: rotate(10deg); }
/* Contract motif: stack two documents for a "pile of offers" look. */
.film-empty-art[b-aailgt8o2w]  .art-contract .art-sub-1 { top: 0.6rem; left: 50%; transform: translateX(-58%) rotate(-9deg); opacity: 0.55; }
.film-empty-art[b-aailgt8o2w]  .art-contract .art-sub-2 { bottom: 0.5rem; right: 1.6rem; }

/* Empty-state headline must NOT compete with the page H1: ~28% smaller than before + muted off-white
   (the page Bebas hero owns the top of the hierarchy). */
.film-empty h3[b-aailgt8o2w] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.45rem;
    color: rgba(var(--wl-contrast-rgb), 0.78);
    margin: 0 0 0.6rem 0;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.film-empty p[b-aailgt8o2w] {
    color: var(--wl-text-muted);
    margin: 0 0 2rem 0;
    max-width: 420px;
    line-height: 1.6;
}

/* The empty-state primary CTA - the dominant gold gravitational center (AAA: gradient + inner sheen
   + soft gold glow + hover-lift + active + focus-visible ring; hero size). */
.film-empty-cta[b-aailgt8o2w] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 54px;
    padding: 0 2.4rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: linear-gradient(180deg, var(--wl-gold-light) 0%, var(--wl-gold) 55%, #B8962E 100%);
    border-radius: 0.75rem;
    color: var(--wl-bg-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease, filter 0.2s ease;
    box-shadow:
        0 6px 22px -6px rgba(var(--wl-gold-rgb), 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.film-empty-cta:hover[b-aailgt8o2w] {
    transform: translateY(-2px);
    box-shadow:
        0 12px 34px -8px rgba(var(--wl-gold-rgb), 0.6),
        0 0 44px rgba(var(--wl-gold-rgb), 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.film-empty-cta:active[b-aailgt8o2w] { transform: translateY(0); filter: brightness(0.96); }
.film-empty-cta:focus-visible[b-aailgt8o2w] { outline: 2px solid var(--wl-gold-light); outline-offset: 3px; }

.film-empty-cta-arrow[b-aailgt8o2w] { display: inline-flex; width: 1.1rem; height: 1.1rem; transition: transform 0.25s ease; }
.film-empty-cta-arrow[b-aailgt8o2w]  svg { width: 100%; height: 100%; }
.film-empty-cta:hover .film-empty-cta-arrow[b-aailgt8o2w] { transform: translateX(5px); }

@media (prefers-reduced-motion: reduce) {
    .film-empty[b-aailgt8o2w], .film-empty-icon[b-aailgt8o2w], .film-empty-cta[b-aailgt8o2w], .film-empty-cta-arrow[b-aailgt8o2w] { animation: none; transition: none; }
    .film-empty-art[b-aailgt8o2w]::before { animation: none; }
    .film-empty-cta:hover[b-aailgt8o2w] { transform: none; }
    .film-empty-cta:hover .film-empty-cta-arrow[b-aailgt8o2w] { transform: none; }
}
/* /Components/Pages/Career/Film/Shared/FilmLockedTeaser.razor.rz.scp.css */
/* DLC teaser - a tempting "here's what you'd unlock" card, not a bare lock. Mirrors the film
   gold-disc + dashed-frame language; theme-token based; reduced-motion guarded. */
.locked-teaser[b-1vphlz2z08] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 2rem 2.5rem;
    background: linear-gradient(160deg,
        rgba(var(--wl-gold-rgb), 0.06) 0%,
        rgba(var(--wl-contrast-rgb), 0.02) 45%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 1.5rem;
    box-shadow: 0 4px 28px var(--wl-shadow-color), inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

/* The clapperboard emblem in a gold disc, with a small lock badge overlaid - reads "premium". */
.locked-teaser-emblem[b-1vphlz2z08] {
    position: relative;
    width: 6rem;
    height: 6rem;
    margin-bottom: 1.5rem;
}
.locked-teaser-art[b-1vphlz2z08] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: var(--wl-gold);
    background: radial-gradient(circle at 50% 38%,
        rgba(var(--wl-gold-rgb), 0.22) 0%,
        rgba(var(--wl-gold-rgb), 0.06) 60%,
        transparent 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: inset 0 0 26px rgba(var(--wl-gold-rgb), 0.12);
    animation: locked-teaser-pulse-b-1vphlz2z08 3.2s ease-in-out infinite;
}
.locked-teaser-art[b-1vphlz2z08]  svg { width: 3rem; height: 3rem; }
@keyframes locked-teaser-pulse-b-1vphlz2z08 {
    0%, 100% { box-shadow: inset 0 0 26px rgba(var(--wl-gold-rgb), 0.12), 0 0 16px rgba(var(--wl-gold-rgb), 0.08); }
    50% { box-shadow: inset 0 0 26px rgba(var(--wl-gold-rgb), 0.18), 0 0 30px rgba(var(--wl-gold-rgb), 0.22); }
}
/* Lock badge bottom-right of the disc. */
.locked-teaser-lock[b-1vphlz2z08] {
    position: absolute;
    right: -2px; bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem; height: 2.1rem;
    border-radius: 50%;
    background: var(--wl-bg-secondary);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
    box-shadow: 0 2px 8px var(--wl-shadow-color);
}
.locked-teaser-lock[b-1vphlz2z08]  svg { width: 1.1rem; height: 1.1rem; }

.locked-teaser-eyebrow[b-1vphlz2z08] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: var(--wl-gold);
    font-weight: 700;
    text-shadow: 0 0 18px rgba(var(--wl-gold-rgb), 0.4);
}
.locked-teaser h3[b-1vphlz2z08] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(var(--wl-contrast-rgb), 0.92);
    margin: 0.4rem 0 0.6rem;
}
.locked-teaser-lede[b-1vphlz2z08] {
    color: var(--wl-text-muted);
    max-width: 440px;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

/* Feature bullets - what the expansion unlocks, each icon + line. */
/* Numbered production pipeline - UNIFORM rows (01 Found -> 04 Release). All four are identical
   resting state with a consistent left number + gold hairline rule, so there is no stray accent. */
.locked-teaser-features[b-1vphlz2z08] {
    list-style: none;
    margin: 0 0 1.75rem;
    padding: 0;
    counter-reset: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: left;
    width: 100%;
    max-width: 420px;
}
.locked-teaser-features li[b-1vphlz2z08] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    font-size: 0.92rem;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    padding: 0.65rem 0.95rem;
    background: linear-gradient(180deg, rgba(var(--wl-contrast-rgb), 0.05) 0%, rgba(var(--wl-contrast-rgb), 0.02) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.14);
    border-left: 2px solid rgba(var(--wl-gold-rgb), 0.45);
    border-radius: 0.6rem;
}
.feat-num[b-1vphlz2z08] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.05rem;
    line-height: 1;
    color: rgba(var(--wl-gold-rgb), 0.7);
    width: 1.4rem;
    flex-shrink: 0;
    text-align: center;
}
.feat-icon[b-1vphlz2z08] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem; height: 1.4rem;
    flex-shrink: 0;
    color: var(--wl-gold);
}
.feat-icon[b-1vphlz2z08]  svg { width: 100%; height: 100%; }
.feat-text[b-1vphlz2z08] { flex: 1; min-width: 0; }

/* Unlock CTA = the gravitational center. Base button styling comes from the global .film-cta
   .film-cta-hero classes; here we add the lock-open icon + the Brylanty price chip + the label. */
.locked-teaser-cta[b-1vphlz2z08] { gap: 0.7rem; }
.locked-teaser-cta-lock[b-1vphlz2z08] { display: inline-flex; width: 1.25rem; height: 1.25rem; }
.locked-teaser-cta-lock svg[b-1vphlz2z08] { width: 100%; height: 100%; }
.locked-teaser-cta-label[b-1vphlz2z08] { font-weight: 800; }
.locked-teaser-price[b-1vphlz2z08] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.2rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    font-size: 0.92rem;
}
.locked-teaser-price-icon[b-1vphlz2z08] { display: inline-flex; width: 0.95rem; height: 0.95rem; }
.locked-teaser-price-icon svg[b-1vphlz2z08] { width: 100%; height: 100%; }
.locked-teaser-reassure[b-1vphlz2z08] {
    margin-top: 0.7rem;
    font-size: 0.78rem;
    color: var(--wl-text-muted);
    letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
    .locked-teaser-art[b-1vphlz2z08] { animation: none; }
}
/* /Components/Pages/Career/Film/Shared/FilmPageHeader.razor.rz.scp.css */
/* Cinematic page header for the Film career. */
.film-header[b-l4u6s298q1] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 2.5rem 3rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.12) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 1.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow:
        0 0 60px rgba(var(--wl-gold-rgb), 0.08),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
    /* Page-load reveal: the hero fades+rises in first, leading the staggered cascade. */
    animation: filmHeaderReveal-b-l4u6s298q1 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes filmHeaderReveal-b-l4u6s298q1 {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .film-header[b-l4u6s298q1] { animation: none; }
}

/* Cinematic LETTERBOX bars - thin dark top/bottom bands with a gold inner edge, drawn as inset
   box-shadows on -bg (the grain ::after stays free). The most unmistakable "this is film" signal
   (Basia round 4: the subtle rail alone wasn't enough). */
.film-header-bg[b-l4u6s298q1] {
    position: absolute;
    inset: 0;
    box-shadow:
        inset 0 6px 0 rgba(0, 0, 0, 0.45),
        inset 0 7px 0 rgba(var(--wl-gold-rgb), 0.35),
        inset 0 -6px 0 rgba(0, 0, 0, 0.45),
        inset 0 -7px 0 rgba(var(--wl-gold-rgb), 0.35);
    background-image:
        /* Directional warm key-light / projector bloom from the top-right (round 3: made perceptible). */
        radial-gradient(ellipse 70% 100% at 90% -18%, rgba(var(--wl-gold-rgb), 0.24) 0%, rgba(var(--wl-gold-rgb), 0.07) 32%, transparent 60%),
        radial-gradient(circle at 0% 110%, rgba(var(--wl-gold-rgb), 0.1) 0%, transparent 32%),
        /* Faint film-strip ruling. */
        repeating-linear-gradient(90deg, transparent, transparent 80px,
            rgba(var(--wl-gold-rgb), 0.04) 80px, rgba(var(--wl-gold-rgb), 0.04) 81px);
    pointer-events: none;
}

/* 35mm sprocket-hole rail down the left edge - the signature film motif (round 4: more present). */
.film-header .film-header-left[b-l4u6s298q1]::before {
    content: "";
    position: absolute;
    left: -1.4rem; top: 0; bottom: 0;
    width: 14px;
    pointer-events: none;
    opacity: 0.8;
    background:
        linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.1), rgba(var(--wl-gold-rgb), 0.04)),
        repeating-linear-gradient(180deg, transparent 0 8px, rgba(var(--wl-contrast-rgb), 0.32) 8px 16px);
    -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 8px, transparent 8px 16px);
    mask-image: repeating-linear-gradient(180deg, #000 0 8px, transparent 8px 16px);
}

/* Cinematic atmosphere: a faint film-grain noise + a soft vignette, behind the content. Subtle
   (low opacity), theme-agnostic (the noise is a neutral SVG, the vignette uses the shadow token),
   and reduced-motion safe (the grain is static). */
.film-header[b-l4u6s298q1]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Soft inner vignette so the hero feels lit from within, like a frame (round 3: deeper). */
    box-shadow: inset 0 0 140px 14px var(--wl-shadow-color);
    border-radius: inherit;
}
.film-header[b-l4u6s298q1]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    border-radius: inherit;
}

.film-header-content[b-l4u6s298q1] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 1.25rem;
    z-index: 1;
}

.film-header-left[b-l4u6s298q1] {
    position: relative; /* anchors the sprocket-hole rail (::before) */
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    max-width: 52rem;
    padding-left: 0.5rem;
}

.film-header-eyebrow[b-l4u6s298q1] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--wl-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
}

.film-header h1[b-l4u6s298q1] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.5rem;
    font-weight: 400;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-gold) 50%, var(--wl-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.film-header-subtitle[b-l4u6s298q1] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 1rem;
    margin: 0.5rem 0 0 0;
    font-weight: 400;
}

.film-header-stats[b-l4u6s298q1] {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
    max-width: 100%;
    padding-left: 0.5rem;
}

.film-header-metrics[b-l4u6s298q1]  .film-stat-card {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.45rem;
    width: auto;
    min-width: 0;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-bg-modal-rgb), 0.5);
    border-color: rgba(var(--wl-gold-rgb), 0.16);
    border-radius: 0.625rem;
    box-shadow: inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.06);
}

.film-header-metrics[b-l4u6s298q1]  .film-stat-card:hover {
    transform: none;
    border-color: rgba(var(--wl-gold-rgb), 0.24);
    box-shadow: inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.08);
}

.film-header-metrics[b-l4u6s298q1]  .film-stat-icon {
    display: none;
}

.film-header-metrics[b-l4u6s298q1]  .film-stat-value {
    font-size: 1.45rem;
    line-height: 0.9;
    text-align: left;
}

.film-header-metrics[b-l4u6s298q1]  .film-stat-label {
    margin-top: 0;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-align: left;
    white-space: nowrap;
}

.film-header-metrics[b-l4u6s298q1]  .film-stat-sublabel {
    flex-basis: 100%;
    margin-top: -0.05rem;
    font-size: 0.58rem;
    letter-spacing: 0.02em;
    text-align: left;
}

.film-header-decoration[b-l4u6s298q1] {
    position: absolute;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 7rem;
    height: 7rem;
    color: rgba(var(--wl-gold-rgb), 0.18);
    pointer-events: none;
    z-index: 1; /* above the grain/vignette overlays (z-index 0) so the clapper motif reads */
    filter: drop-shadow(0 0 24px rgba(var(--wl-gold-rgb), 0.25)); /* soft spotlight on the motif */
}

.film-header-decoration[b-l4u6s298q1]  svg { width: 100%; height: 100%; }

@media (max-width: 1024px) {
    .film-header[b-l4u6s298q1] { padding: 2rem; }
    .film-header-stats[b-l4u6s298q1] { width: 100%; }
    .film-header-decoration[b-l4u6s298q1] { display: none; }
}

@media (max-width: 768px) {
    .film-header[b-l4u6s298q1] { padding: 1.75rem 1.5rem; border-radius: 1rem; }
    .film-header h1[b-l4u6s298q1] { font-size: 2.5rem; }
    .film-header-metrics[b-l4u6s298q1]  .film-stat-card { flex: 1 1 150px; }
}
/* /Components/Pages/Career/Film/Shared/FilmPoster.razor.rz.scp.css */
/* Procedural film poster. Each FilmGenre gets a distinct gradient (poster identity, the film analog
   of an album cover) blended over a dark base for title legibility across all three themes. */
.film-poster[b-ihyzevk5yw] {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 0.6rem;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    box-shadow: inset 0 -40px 50px -20px rgba(0, 0, 0, 0.55);
    flex-shrink: 0;
}

/* Real-image poster: fill with the image, drop the procedural text scrim. */
.film-poster.has-image[b-ihyzevk5yw] { box-shadow: none; background: rgba(var(--wl-contrast-rgb), 0.05); }
.film-poster.has-image[b-ihyzevk5yw]  img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sizes. */
.size-sm[b-ihyzevk5yw] { width: 44px; }
.size-md[b-ihyzevk5yw] { width: 96px; }
.size-lg[b-ihyzevk5yw] { width: 150px; }

/* Genre gradients (hue identity is intentional, like release covers). */
.genre-drama[b-ihyzevk5yw]       { background: linear-gradient(150deg, #3a4a63 0%, #1c2433 70%); }
.genre-comedy[b-ihyzevk5yw]      { background: linear-gradient(150deg, #d99a2b 0%, #8a5a14 70%); }
.genre-action[b-ihyzevk5yw]      { background: linear-gradient(150deg, #b5402e 0%, #5e1810 70%); }
.genre-thriller[b-ihyzevk5yw]    { background: linear-gradient(150deg, #394a4f 0%, #161e22 70%); }
.genre-horror[b-ihyzevk5yw]      { background: linear-gradient(150deg, #5a1f2b 0%, #160a10 70%); }
.genre-scifi[b-ihyzevk5yw]       { background: linear-gradient(150deg, #2f6c86 0%, #122633 70%); }
.genre-romance[b-ihyzevk5yw]     { background: linear-gradient(150deg, #c2557f 0%, #6a1f3e 70%); }
.genre-documentary[b-ihyzevk5yw] { background: linear-gradient(150deg, #5b6552 0%, #262b22 70%); }

/* Faint genre watermark, top-right. */
.poster-watermark[b-ihyzevk5yw] {
    position: absolute;
    top: 8%;
    right: 6%;
    width: 42%;
    color: rgba(255, 255, 255, 0.16);
    pointer-events: none;
}
.poster-watermark svg[b-ihyzevk5yw] { width: 100%; height: 100%; }

.poster-body[b-ihyzevk5yw] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.55rem 0.6rem;
    width: 100%;
}

.poster-genre[b-ihyzevk5yw] {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

.poster-title[b-ihyzevk5yw] {
    font-family: 'Bebas Neue', sans-serif;
    color: #fff;
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.size-sm .poster-title[b-ihyzevk5yw] { font-size: 0.8rem; -webkit-line-clamp: 2; }
.size-md .poster-title[b-ihyzevk5yw] { font-size: 1.15rem; }
.size-lg .poster-title[b-ihyzevk5yw] { font-size: 1.7rem; }

.size-sm .poster-genre[b-ihyzevk5yw] { display: none; }

.poster-stars[b-ihyzevk5yw] { display: flex; gap: 1px; margin-top: 0.15rem; }
.poster-star[b-ihyzevk5yw] { width: 10px; height: 10px; color: rgba(255, 255, 255, 0.25); }
.size-lg .poster-star[b-ihyzevk5yw] { width: 14px; height: 14px; }
.poster-star.full[b-ihyzevk5yw] { color: var(--wl-gold); }
.poster-star.half[b-ihyzevk5yw] { color: rgba(var(--wl-gold-rgb), 0.55); }
.poster-star[b-ihyzevk5yw]  svg { width: 100%; height: 100%; display: block; }
/* /Components/Pages/Career/Film/Shared/FilmPosterEditModal.razor.rz.scp.css */
/* Film poster editor - ported from ReleaseCoverEditModal.razor.css, with a 2:3 portrait preview and
   wl-* tokens for the error color (theme-correct in all three themes). */
.poster-modal-backdrop[b-kgpfr2o0ee] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: posterModalFade-b-kgpfr2o0ee 0.2s ease;
}

@keyframes posterModalFade-b-kgpfr2o0ee {
    from { opacity: 0; }
    to { opacity: 1; }
}

.poster-modal[b-kgpfr2o0ee] {
    width: 100%;
    max-width: 540px;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 16px;
    box-shadow: 0 24px 64px var(--wl-shadow-color);
}

.poster-modal-header[b-kgpfr2o0ee] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.poster-modal-header h3[b-kgpfr2o0ee] {
    margin: 0;
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.poster-modal-close[b-kgpfr2o0ee] {
    display: inline-flex;
    background: transparent;
    border: none;
    color: var(--wl-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
}

.poster-modal-close:hover[b-kgpfr2o0ee] { color: rgba(var(--wl-contrast-rgb), 0.9); }
.poster-modal-close[b-kgpfr2o0ee]  svg { width: 20px; height: 20px; }

.poster-modal-body[b-kgpfr2o0ee] {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem;
}

@media (max-width: 520px) {
    .poster-modal-body[b-kgpfr2o0ee] { flex-direction: column; align-items: center; }
}

/* 2:3 poster preview (portrait, unlike the square cover). */
.poster-modal-preview[b-kgpfr2o0ee] {
    flex-shrink: 0;
    width: 160px;
    aspect-ratio: 2 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.poster-modal-preview[b-kgpfr2o0ee]  img { width: 100%; height: 100%; object-fit: cover; }

.poster-modal-placeholder[b-kgpfr2o0ee],
.poster-modal-loading[b-kgpfr2o0ee] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
    text-align: center;
    padding: 1rem;
}

.poster-modal-placeholder[b-kgpfr2o0ee]  svg { width: 40px; height: 40px; opacity: 0.4; }

.poster-modal-spinner[b-kgpfr2o0ee] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: posterModalSpin-b-kgpfr2o0ee 0.8s linear infinite;
}

@keyframes posterModalSpin-b-kgpfr2o0ee { to { transform: rotate(360deg); } }

.poster-modal-controls[b-kgpfr2o0ee] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.poster-modal-error[b-kgpfr2o0ee] {
    font-size: 0.75rem;
    color: var(--wl-red);
    padding: 0.4rem 0.6rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border-radius: 6px;
}

.poster-modal-prompt-label[b-kgpfr2o0ee] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
}

.poster-modal-notes[b-kgpfr2o0ee] {
    width: 100%;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-family: inherit;
    font-size: 0.8125rem;
    padding: 0.5rem;
    resize: none;
}

.poster-modal-notes:focus[b-kgpfr2o0ee] { outline: none; border-color: rgba(var(--wl-gold-rgb), 0.4); }

.poster-modal-btn[b-kgpfr2o0ee] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--wl-border-medium);
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: rgba(var(--wl-contrast-rgb), 0.85);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.poster-modal-btn:hover:not(:disabled)[b-kgpfr2o0ee] { background: rgba(var(--wl-contrast-rgb), 0.08); }
.poster-modal-btn:disabled[b-kgpfr2o0ee] { opacity: 0.4; cursor: not-allowed; }
.poster-modal-btn[b-kgpfr2o0ee]  svg { width: 16px; height: 16px; }

.poster-modal-btn--ai[b-kgpfr2o0ee] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    border-color: rgba(var(--wl-purple-rgb), 0.3);
    color: var(--wl-purple);
}

.poster-modal-btn--ai:hover:not(:disabled)[b-kgpfr2o0ee] { background: rgba(var(--wl-purple-rgb), 0.2); }

.poster-modal-balance[b-kgpfr2o0ee] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
    text-align: center;
    margin-top: -0.25rem;
}

.poster-modal-btn--remove[b-kgpfr2o0ee] {
    color: var(--wl-red);
    border-color: rgba(var(--wl-red-rgb), 0.3);
    background: transparent;
}

.poster-modal-footer[b-kgpfr2o0ee] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.poster-modal-btn--ghost[b-kgpfr2o0ee] { background: transparent; }

.poster-modal-btn--save[b-kgpfr2o0ee] {
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    color: var(--wl-bg-primary);
}

.poster-modal-btn--save:hover:not(:disabled)[b-kgpfr2o0ee] {
    box-shadow: 0 6px 20px rgba(var(--wl-gold-rgb), 0.35);
}

@media (prefers-reduced-motion: reduce) {
    .poster-modal-backdrop[b-kgpfr2o0ee] { animation: none; }
    .poster-modal-spinner[b-kgpfr2o0ee] { animation-duration: 1.6s; }
    .poster-modal-btn[b-kgpfr2o0ee] { transition: none; }
}
/* /Components/Pages/Career/Film/Shared/FilmStatCard.razor.rz.scp.css */
/* AAA stat card - a raised, top-lit tile (Basia round 4: cards "almost disappeared" at near-zero
   contrast). TOP-LIT gradient (~8% lighter at the top edge), a visible gold-tinted hairline, a 1px
   inner top-highlight, and a real drop shadow so it reads as raised, not a flat rectangle. */
.film-stat-card[b-9602dn57d7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(180deg,
        rgba(var(--wl-contrast-rgb), 0.08) 0%,
        rgba(var(--wl-bg-modal-rgb), 0.92) 38%,
        rgba(var(--wl-bg-secondary-rgb), 0.96) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 1rem;
    min-width: 110px;
    box-shadow:
        0 10px 26px -10px var(--wl-shadow-color),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.1);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.film-stat-card:hover[b-9602dn57d7] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    transform: translateY(-2px);
    box-shadow:
        0 14px 34px -10px var(--wl-shadow-color),
        0 0 24px rgba(var(--wl-gold-rgb), 0.12),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.12);
}

/* Icon above the value - a faint gold chip, brighter on the primary (gold-accent) card + on hover. */
.film-stat-icon[b-9602dn57d7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    margin-bottom: 0.5rem;
    color: rgba(var(--wl-gold-rgb), 0.55);
    transition: color 0.3s ease, transform 0.3s ease;
}
.film-stat-icon[b-9602dn57d7]  svg { width: 100%; height: 100%; }
.film-stat-card.accent-gold .film-stat-icon[b-9602dn57d7] { color: var(--wl-gold); }
.film-stat-card:hover .film-stat-icon[b-9602dn57d7] { color: var(--wl-gold); transform: scale(1.08); }

.film-stat-value[b-9602dn57d7] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.6rem;
    color: var(--wl-text-primary);
    line-height: 1;
    letter-spacing: 0.02em;
    text-align: center;
}

.film-stat-card.accent-gold .film-stat-value[b-9602dn57d7] {
    color: var(--wl-gold);
    text-shadow: 0 0 30px rgba(var(--wl-gold-rgb), 0.4);
}

.film-stat-label[b-9602dn57d7] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-text-muted);
    margin-top: 0.375rem;
    font-weight: 500;
    text-align: center;
}

.film-stat-sublabel[b-9602dn57d7] {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    color: rgba(var(--wl-contrast-rgb), 0.42);
    margin-top: 0.2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Zero-state: dim the value + icon so a fresh "0"/"-" reads as "not started", not broken. The
   sublabel ("No films yet") carries the intent. */
.film-stat-card.is-empty .film-stat-value[b-9602dn57d7] { color: rgba(var(--wl-contrast-rgb), 0.32); text-shadow: none; }
.film-stat-card.is-empty.accent-gold .film-stat-value[b-9602dn57d7] { color: rgba(var(--wl-gold-rgb), 0.45); }
.film-stat-card.is-empty .film-stat-icon[b-9602dn57d7] { color: rgba(var(--wl-contrast-rgb), 0.28); }
.film-stat-card.is-empty .film-stat-sublabel[b-9602dn57d7] { color: rgba(var(--wl-gold-rgb), 0.55); }

@media (prefers-reduced-motion: reduce) {
    .film-stat-card[b-9602dn57d7], .film-stat-icon[b-9602dn57d7] { transition: none; }
    .film-stat-card:hover[b-9602dn57d7] { transform: none; }
    .film-stat-card:hover .film-stat-icon[b-9602dn57d7] { transform: none; }
}
/* /Components/Pages/Career/Film/Studio/Index.razor.rz.scp.css */
.film-studio[b-yzoki5yezv] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
}

/* Crafted "found your studio" state - centered, icon-led, gold-accented. */
.found-card[b-yzoki5yezv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.05) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 2px dashed var(--wl-gold-border);
    border-radius: 1.5rem;
}

.found-icon[b-yzoki5yezv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    color: var(--wl-gold);
    background: radial-gradient(circle at 50% 40%,
        rgba(var(--wl-gold-rgb), 0.18) 0%, rgba(var(--wl-gold-rgb), 0.05) 60%, transparent 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
}
.found-icon[b-yzoki5yezv]  svg { width: 2.4rem; height: 2.4rem; }

.found-card h3[b-yzoki5yezv] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0;
}

.found-card p[b-yzoki5yezv] {
    color: var(--wl-text-muted);
    margin: 0 0 0.5rem 0;
    max-width: 420px;
}

.studio-card[b-yzoki5yezv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    box-shadow: 0 2px 12px var(--wl-shadow-color);
}

.studio-name-input[b-yzoki5yezv] {
    padding: 0.7rem 1rem;
    border-radius: 0.6rem;
    border: 1px solid var(--wl-border-medium);
    background: var(--wl-bg-primary);
    color: var(--wl-text-primary);
    font-size: 1rem;
}

.btn-found[b-yzoki5yezv] {
    align-self: flex-start;
    padding: 0.6rem 1.4rem;
    border: none;
    border-radius: 0.6rem;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-weight: 700;
    cursor: pointer;
}

.btn-found:hover:not(:disabled)[b-yzoki5yezv] {
    filter: brightness(1.1);
}

.btn-found:disabled[b-yzoki5yezv] {
    opacity: 0.5;
    cursor: not-allowed;
}

.studio-name[b-yzoki5yezv] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.studio-stats[b-yzoki5yezv] {
    display: flex;
    gap: 2rem;
}

.studio-stat[b-yzoki5yezv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label[b-yzoki5yezv] {
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stat-value[b-yzoki5yezv] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    color: var(--wl-text-primary);
    line-height: 1;
}

.studio-link[b-yzoki5yezv] {
    align-self: flex-start;
    color: var(--wl-gold);
    text-decoration: none;
    font-weight: 600;
}

.studio-link:hover[b-yzoki5yezv] {
    text-decoration: underline;
}

.loading-container[b-yzoki5yezv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem;
    color: var(--wl-text-muted);
}

.loading-spinner[b-yzoki5yezv] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: studio-spin-b-yzoki5yezv 0.8s linear infinite;
}

@keyframes studio-spin-b-yzoki5yezv {
    to { transform: rotate(360deg); }
}

.empty-state[b-yzoki5yezv] {
    padding: 2rem;
    text-align: center;
    color: var(--wl-text-muted);
}
/* /Components/Pages/Career/Goals.razor.rz.scp.css */
.career-goals-page[b-sx7jxaoylv] {
    min-height: calc(100vh - 7rem);
    padding: clamp(0.15rem, 1.5vw, 0.75rem) 0 2.5rem;
}

.career-goals-back[b-sx7jxaoylv] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.25rem;
    color: rgba(var(--wl-text-primary-rgb), 0.56);
    font-size: 0.76rem;
    font-weight: 750;
    text-decoration: none;
    transition: color 0.16s ease, transform 0.16s ease;
}

.career-goals-back svg[b-sx7jxaoylv] {
    width: 1rem;
    height: 1rem;
}

.career-goals-back:hover[b-sx7jxaoylv] {
    color: rgb(var(--wl-gold-rgb));
    transform: translateX(-2px);
}

.career-goals-back:focus-visible[b-sx7jxaoylv] {
    border-radius: 3px;
    outline: 2px solid var(--wl-focus-ring, rgb(var(--wl-gold-rgb)));
    outline-offset: 3px;
}

.career-goals-hero[b-sx7jxaoylv] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.36fr);
    align-items: end;
    gap: 2rem;
    margin: clamp(0.75rem, 2vw, 1.25rem) 0 clamp(1.4rem, 3vw, 2.25rem);
    padding-bottom: clamp(1.35rem, 3vw, 2rem);
    border-bottom: 1px solid rgba(var(--wl-champagne-rgb), 0.16);
}

.career-goals-hero[b-sx7jxaoylv]::after {
    content: "";
    position: absolute;
    inset: auto auto -1px 0;
    width: min(24rem, 54%);
    height: 1px;
    background: linear-gradient(90deg, rgb(var(--wl-gold-rgb)), transparent);
}

.career-goals-kicker[b-sx7jxaoylv] {
    display: inline-flex;
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.career-goals-hero h1[b-sx7jxaoylv] {
    max-width: 14ch;
    margin: 0.35rem 0 0;
    color: rgb(var(--wl-text-primary-rgb));
    font-family: var(--font-display);
    font-size: clamp(2.7rem, 7vw, 5.7rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.01em;
}

.career-goals-hero p[b-sx7jxaoylv] {
    max-width: 48rem;
    margin: 0.85rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.65);
    font-size: clamp(0.92rem, 1.6vw, 1.04rem);
    line-height: 1.65;
}

.career-goals-route[b-sx7jxaoylv] {
    display: grid;
    grid-template-columns: auto repeat(3, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    padding-bottom: 0.55rem;
    color: rgb(var(--wl-gold-rgb));
}

.career-goals-route > span:not(.route-star)[b-sx7jxaoylv] {
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.22), rgba(var(--wl-gold-rgb), 0.66));
}

.career-goals-route > span:nth-child(3)[b-sx7jxaoylv] {
    opacity: 0.72;
}

.career-goals-route > span:nth-child(4)[b-sx7jxaoylv] {
    opacity: 0.44;
}

.route-star[b-sx7jxaoylv] {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 50%;
    background: rgba(var(--wl-gold-rgb), 0.07);
    box-shadow: 0 0 22px rgba(var(--wl-gold-rgb), 0.09);
}

@media (max-width: 760px) {
    .career-goals-page[b-sx7jxaoylv] {
        padding-top: 0;
    }

    .career-goals-hero[b-sx7jxaoylv] {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .career-goals-route[b-sx7jxaoylv] {
        max-width: 22rem;
    }
}

@media (max-width: 480px) {
    .career-goals-hero h1[b-sx7jxaoylv] {
        font-size: 2.7rem;
    }

    .career-goals-route[b-sx7jxaoylv] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .career-goals-back[b-sx7jxaoylv] {
        transition: none;
    }
}
/* /Components/Pages/Career/Index.razor.rz.scp.css */
.career-gateway[b-j01pxxfut1] {
    min-height: calc(100vh - 8rem);
    display: grid;
    align-content: start;
    gap: 1.5rem;
    padding: clamp(0.25rem, 2vw, 1.25rem) 0 1.5rem;
}

.career-gateway-header[b-j01pxxfut1] {
    max-width: 58rem;
}

.career-gateway-eyebrow[b-j01pxxfut1] {
    display: inline-flex;
    align-items: center;
    color: var(--wl-gold);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.career-gateway-header h1[b-j01pxxfut1] {
    margin: 0.35rem 0 0;
    color: var(--wl-text-primary);
    font-family: var(--wl-font-display, inherit);
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 0.95;
}

.career-gateway-header p[b-j01pxxfut1] {
    max-width: 42rem;
    margin: 0.85rem 0 0;
    color: var(--wl-text-secondary);
    font-size: 1rem;
    line-height: 1.65;
}

.career-gateway-grid[b-j01pxxfut1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0.75rem;
}

.career-gateway-card[b-j01pxxfut1] {
    --career-accent: var(--wl-gold);
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.875rem;
    min-height: 6.25rem;
    padding: 1rem;
    color: var(--wl-text-primary);
    text-decoration: none;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--career-accent) 13%, transparent), transparent 44%),
        rgba(var(--wl-bg-modal-rgb), 0.72);
    border: 1px solid color-mix(in srgb, var(--career-accent) 34%, var(--wl-border-subtle));
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.career-gateway-card[b-j01pxxfut1]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--career-accent);
    opacity: 0.85;
}

.career-gateway-card:hover[b-j01pxxfut1] {
    transform: translateY(-2px);
    border-color: var(--career-accent);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--career-accent) 18%, transparent), transparent 48%),
        rgba(var(--wl-bg-modal-rgb), 0.88);
}

.career-gateway-icon[b-j01pxxfut1] {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    color: var(--career-accent);
    background: color-mix(in srgb, var(--career-accent) 13%, transparent);
    border: 1px solid color-mix(in srgb, var(--career-accent) 28%, transparent);
    border-radius: 8px;
}

.career-gateway-icon svg[b-j01pxxfut1] {
    width: 1.65rem;
    height: 1.65rem;
}

.career-gateway-copy[b-j01pxxfut1] {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.career-gateway-copy strong[b-j01pxxfut1] {
    color: var(--wl-text-primary);
    font-size: 1rem;
    line-height: 1.2;
}

.career-gateway-copy small[b-j01pxxfut1] {
    color: var(--wl-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.career-gateway-arrow[b-j01pxxfut1] {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--wl-text-muted);
    border-radius: 999px;
    transition: color 0.16s ease, transform 0.16s ease;
}

.career-gateway-arrow svg[b-j01pxxfut1] {
    width: 1.1rem;
    height: 1.1rem;
}

.career-gateway-card:hover .career-gateway-arrow[b-j01pxxfut1] {
    color: var(--career-accent);
    transform: translateX(2px);
}

.career-gateway-card--music[b-j01pxxfut1] {
    --career-accent: #f6c453;
}

.career-gateway-card--film[b-j01pxxfut1] {
    --career-accent: #7dd3fc;
}

.career-gateway-card--fashion[b-j01pxxfut1] {
    --career-accent: #fb7185;
}

.career-gateway-card--creator[b-j01pxxfut1] {
    --career-accent: #a78bfa;
}

.career-gateway-card--wonderfeet[b-j01pxxfut1] {
    --career-accent: #34d399;
}

.career-gateway-card--entrepreneur[b-j01pxxfut1] {
    --career-accent: #60a5fa;
}

.career-gateway-card--organizer[b-j01pxxfut1] {
    --career-accent: #a78bfa;
}

.career-gateway-card--literature[b-j01pxxfut1] {
    --career-accent: #f59e0b;
}

@media (max-width: 640px) {
    .career-gateway[b-j01pxxfut1] {
        gap: 1rem;
        padding-top: 0;
    }

    .career-gateway-header h1[b-j01pxxfut1] {
        font-size: 2.15rem;
    }

    .career-gateway-header p[b-j01pxxfut1] {
        font-size: 0.92rem;
        line-height: 1.5;
    }

    .career-gateway-grid[b-j01pxxfut1] {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }

    .career-gateway-card[b-j01pxxfut1] {
        min-height: 5.6rem;
        padding: 0.875rem;
    }
}
/* /Components/Pages/Career/Literature/Bestsellers.razor.rz.scp.css */
.bestseller-page[b-2m3bcn8cli] { max-width: 1120px; min-height: 100vh; margin: 0 auto; padding: 1rem 1rem 4rem; color: var(--wl-text-primary); }
.bestseller-hero[b-2m3bcn8cli] { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: end; padding: 2rem; border: 1px solid rgba(217,164,94,.25); border-radius: 18px; background: radial-gradient(circle at 88% 8%, rgba(217,164,94,.15), transparent 32%), linear-gradient(135deg, rgba(var(--wl-bg-modal-deep-rgb),.98), rgba(var(--wl-bg-modal-rgb),.86)); box-shadow: 0 25px 65px rgba(0,0,0,.22); }
.bestseller-hero a[b-2m3bcn8cli] { color: var(--wl-text-muted); font-size: .7rem; text-decoration: none; }
.bestseller-hero > div:first-child > span[b-2m3bcn8cli] { display: block; margin-top: 1.5rem; color: #d9a45e; font-size: .65rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.bestseller-hero h1[b-2m3bcn8cli] { margin: .2rem 0; font-family: var(--font-display); font-size: clamp(2.5rem,7vw,4.6rem); line-height: .95; text-transform: uppercase; }
.bestseller-hero p[b-2m3bcn8cli] { max-width: 650px; margin: .7rem 0 0; color: var(--wl-text-muted); line-height: 1.55; }
.bestseller-window[b-2m3bcn8cli] { display: flex; width: 130px; height: 130px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(217,164,94,.3); border-radius: 50%; background: rgba(217,164,94,.06); }
.bestseller-window strong[b-2m3bcn8cli] { color: #e6be82; font-family: var(--font-display); font-size: 3rem; line-height: 1; }
.bestseller-window span[b-2m3bcn8cli] { max-width: 90px; color: var(--wl-text-muted); font-size: .6rem; line-height: 1.3; text-align: center; text-transform: uppercase; }
.bestseller-contract[b-2m3bcn8cli] { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 2.5rem; }
.bestseller-contract span[b-2m3bcn8cli] { padding: .4rem .7rem; border: 1px solid var(--wl-border-subtle); border-radius: 999px; background: rgba(var(--wl-bg-modal-rgb),.55); color: var(--wl-text-muted); font-size: .65rem; }
.bestseller-chart[b-2m3bcn8cli], .genre-share[b-2m3bcn8cli] { margin-top: 2.25rem; overflow: hidden; border: 1px solid var(--wl-border-subtle); border-radius: 16px; background: rgba(var(--wl-bg-modal-rgb),.7); }
.bestseller-chart__head[b-2m3bcn8cli] { display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--wl-border-subtle); }
.bestseller-chart__head h2[b-2m3bcn8cli] { margin: 0; font-family: var(--font-display); font-size: 1.55rem; letter-spacing: .04em; text-transform: uppercase; }
.bestseller-chart__head > span[b-2m3bcn8cli] { color: var(--wl-text-muted); font-size: .68rem; }
.bestseller-row[b-2m3bcn8cli] { display: grid; grid-template-columns: 50px minmax(180px,1fr) minmax(110px,.65fr) 95px 60px; align-items: center; gap: .8rem; padding: .85rem 1rem; color: var(--wl-text-secondary); border-bottom: 1px solid var(--wl-border-subtle); text-decoration: none; transition: background .15s ease; }
.bestseller-row:last-child[b-2m3bcn8cli] { border-bottom: 0; }
.bestseller-row:hover[b-2m3bcn8cli] { background: rgba(217,164,94,.055); }
.bestseller-row.rank-1[b-2m3bcn8cli] { background: linear-gradient(90deg, rgba(217,164,94,.11), transparent 55%); }
.bestseller-rank[b-2m3bcn8cli] { color: #d9a45e; font-family: var(--font-display); font-size: 1.15rem; }
.bestseller-row > div:nth-child(2)[b-2m3bcn8cli] { display: flex; min-width: 0; flex-direction: column; gap: .18rem; }
.bestseller-row strong[b-2m3bcn8cli] { overflow: hidden; color: var(--wl-text-primary); text-overflow: ellipsis; white-space: nowrap; }
.bestseller-row small[b-2m3bcn8cli] { color: var(--wl-text-muted); font-size: .62rem; }
.bestseller-share[b-2m3bcn8cli], .genre-share__bar[b-2m3bcn8cli] { height: 5px; overflow: hidden; border-radius: 99px; background: rgba(var(--wl-contrast-rgb),.06); }
.bestseller-share span[b-2m3bcn8cli], .genre-share__bar span[b-2m3bcn8cli] { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#9e6935,#e6be82); }
.bestseller-units[b-2m3bcn8cli] { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.bestseller-market[b-2m3bcn8cli] { color: #d9a45e; font-weight: 800; text-align: right; }
.genre-share[b-2m3bcn8cli] { padding-bottom: 1rem; }
.genre-share__grid[b-2m3bcn8cli] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; padding: 1rem; }
.genre-share__grid article[b-2m3bcn8cli] { display: grid; gap: .55rem; padding: .85rem; border: 1px solid var(--wl-border-subtle); border-radius: 10px; background: rgba(var(--wl-bg-modal-deep-rgb),.45); }
.genre-share__grid article > div:first-child[b-2m3bcn8cli] { display: flex; justify-content: space-between; gap: .7rem; }
.genre-share__grid article span[b-2m3bcn8cli] { color: #d9a45e; font-weight: 800; }
.genre-share__grid small[b-2m3bcn8cli] { color: var(--wl-text-muted); font-size: .65rem; }
.bestseller-empty[b-2m3bcn8cli] { display: flex; min-height: 40vh; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--wl-text-muted); }
@media (max-width:720px) {
    .bestseller-hero[b-2m3bcn8cli] { grid-template-columns:1fr; padding:1.25rem; }
    .bestseller-window[b-2m3bcn8cli] { width:90px; height:90px; }
    .bestseller-row[b-2m3bcn8cli] { grid-template-columns:40px minmax(0,1fr) 76px; gap:.6rem; }
    .bestseller-share[b-2m3bcn8cli],.bestseller-market[b-2m3bcn8cli] { display:none; }
    .bestseller-units[b-2m3bcn8cli] { min-width:0; }
    .bestseller-chart__head[b-2m3bcn8cli] { align-items:flex-start; flex-direction:column; }
    .genre-share__grid[b-2m3bcn8cli] { grid-template-columns:1fr; }
}
/* /Components/Pages/Career/Literature/BookCastPanel.razor.rz.scp.css */
.cast-panel[b-kaftqaypn5] {
    margin: 1.5rem 0;
    padding: 1.25rem;
    background: rgba(var(--wl-gold-rgb), 0.04);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 14px;
}

.cast-header[b-kaftqaypn5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}

.cast-count[b-kaftqaypn5] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
}

.cast-empty[b-kaftqaypn5],
.cast-hint[b-kaftqaypn5] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    margin: 0.5rem 0;
}

.cast-list[b-kaftqaypn5] {
    list-style: none;
    margin: 0 0 0.875rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cast-member[b-kaftqaypn5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--wl-bg-elevated, rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 10px;
}

.cast-member-info[b-kaftqaypn5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cast-member-name[b-kaftqaypn5] {
    font-weight: 600;
    color: var(--wl-text-primary);
}

.cast-role[b-kaftqaypn5] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid currentColor;
}

.cast-role--protagonist[b-kaftqaypn5] { color: var(--wl-gold); }
.cast-role--antagonist[b-kaftqaypn5] { color: #EF4444; }
.cast-role--supporting[b-kaftqaypn5] { color: var(--wl-text-secondary); }

.cast-crossover[b-kaftqaypn5],
.cast-retired[b-kaftqaypn5] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: var(--wl-text-muted);
}

.cast-remove[b-kaftqaypn5] {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--wl-text-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.cast-remove svg[b-kaftqaypn5] { width: 1rem; height: 1rem; }

.cast-remove:hover:not(:disabled)[b-kaftqaypn5] {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.1);
}

.cast-remove:disabled[b-kaftqaypn5] { opacity: 0.5; cursor: not-allowed; }

.cast-add[b-kaftqaypn5] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.cast-select[b-kaftqaypn5] { flex: 1; min-width: 9rem; }

.cast-add-btn[b-kaftqaypn5] {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    color: var(--wl-bg-primary);
    background: var(--wl-gold);
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.cast-add-btn:hover:not(:disabled)[b-kaftqaypn5] { transform: translateY(-1px); }
.cast-add-btn:disabled[b-kaftqaypn5] { opacity: 0.6; cursor: not-allowed; }

.cast-error[b-kaftqaypn5] {
    margin-top: 0.625rem;
    font-size: 0.75rem;
    color: #EF4444;
}

.cast-loading[b-kaftqaypn5] {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0;
}

.cast-spinner[b-kaftqaypn5] {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: cast-spin-b-kaftqaypn5 0.8s linear infinite;
}

@keyframes cast-spin-b-kaftqaypn5 {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Career/Literature/Books.razor.rz.scp.css */
.books-page[b-vvz0mn91qw] {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 4rem;
}

.loading-container[b-vvz0mn91qw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-height: 40vh;
    justify-content: center;
    color: var(--wl-text-muted);
}

.loading-spinner[b-vvz0mn91qw] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-vvz0mn91qw 1s linear infinite;
}

@keyframes spin-b-vvz0mn91qw {
    to { transform: rotate(360deg); }
}

/* ---- Header ---- */
.books-header[b-vvz0mn91qw] {
    margin-bottom: 2rem;
}

.back-link[b-vvz0mn91qw] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    color: var(--wl-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-link:hover[b-vvz0mn91qw] {
    color: var(--wl-gold);
}

.back-link svg[b-vvz0mn91qw] {
    width: 1rem;
    height: 1rem;
}

.books-eyebrow[b-vvz0mn91qw] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-gold);
    margin-bottom: 0.375rem;
}

.books-title-group h1[b-vvz0mn91qw] {
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.books-subtitle[b-vvz0mn91qw] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0.375rem 0 0 0;
}

/* ---- Empty state ---- */
.books-empty[b-vvz0mn91qw] {
    padding: 3.5rem 1.5rem;
    text-align: center;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
}

.books-empty .empty-icon[b-vvz0mn91qw] {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    color: var(--wl-gold);
    opacity: 0.6;
}

.books-empty h2[b-vvz0mn91qw] {
    color: var(--wl-text-primary);
    font-weight: 700;
    font-size: 1.1rem;
}

.books-empty p[b-vvz0mn91qw] {
    margin-top: 0.35rem;
    color: var(--wl-text-muted);
    font-size: 0.9rem;
}

.books-cta[b-vvz0mn91qw] {
    display: inline-flex;
    align-items: center;
    margin-top: 1.25rem;
    padding: 0.6rem 1.25rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.46);
    border-radius: 6px;
    background: rgba(var(--wl-gold-rgb), 0.11);
    color: var(--wl-gold);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.books-cta:hover[b-vvz0mn91qw] {
    background: rgba(var(--wl-gold-rgb), 0.18);
    border-color: rgba(var(--wl-gold-rgb), 0.7);
}

/* ---- Book list ---- */
.books-list[b-vvz0mn91qw] {
    display: grid;
    gap: 0.65rem;
}

.book-row[b-vvz0mn91qw] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 10px;
    background: var(--wl-surface-primary);
    color: inherit;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.book-row:hover[b-vvz0mn91qw] {
    transform: translateY(-1px);
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    background: rgba(var(--wl-gold-rgb), 0.05);
}

.book-cover[b-vvz0mn91qw] {
    width: 3rem;
    height: 4.2rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid var(--wl-border-medium);
    background: rgba(var(--wl-bg-tertiary-rgb), 0.6);
    color: var(--wl-text-muted);
}

.book-cover[b-vvz0mn91qw]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book-cover svg[b-vvz0mn91qw] {
    width: 1.4rem;
    height: 1.4rem;
}

.book-info[b-vvz0mn91qw] {
    min-width: 0;
}

.book-title-row[b-vvz0mn91qw] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
}

.book-title[b-vvz0mn91qw] {
    color: var(--wl-text-primary);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.book-penname[b-vvz0mn91qw] {
    color: var(--wl-text-muted);
    font-size: 0.78rem;
    font-style: italic;
    white-space: nowrap;
}

.book-meta[b-vvz0mn91qw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
    font-size: 0.74rem;
}

.book-genre[b-vvz0mn91qw] {
    color: var(--wl-text-secondary);
}

.book-released-at[b-vvz0mn91qw] {
    color: var(--wl-text-muted);
}

.book-status[b-vvz0mn91qw] {
    padding: 1px 8px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.65rem;
    border: 1px solid var(--wl-border-medium);
    color: var(--wl-text-secondary);
}

.book-status.status-released[b-vvz0mn91qw] {
    border-color: rgba(var(--wl-green-rgb), 0.3);
    background: rgba(var(--wl-green-rgb), 0.1);
    color: var(--wl-green);
}

.book-status.status-writing[b-vvz0mn91qw],
.book-status.status-editing[b-vvz0mn91qw],
.book-status.status-prerelease[b-vvz0mn91qw] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-gold);
}

/* ---- Stats ---- */
.book-stats[b-vvz0mn91qw] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.book-stat[b-vvz0mn91qw] {
    text-align: right;
}

.stat-num[b-vvz0mn91qw] {
    display: block;
    color: var(--wl-text-primary);
    font-weight: 700;
    font-size: 0.92rem;
    font-variant-numeric: tabular-nums;
}

.prize-stat .stat-num[b-vvz0mn91qw] {
    color: var(--wl-gold);
}

.stat-cap[b-vvz0mn91qw] {
    display: block;
    margin-top: 0.15rem;
    color: var(--wl-text-muted);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.book-wip-hint[b-vvz0mn91qw] {
    color: rgba(var(--wl-gold-rgb), 0.88);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.book-chevron[b-vvz0mn91qw] {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--wl-text-muted);
}

@media (max-width: 640px) {
    .book-row[b-vvz0mn91qw] {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .book-stats[b-vvz0mn91qw] {
        grid-column: 1 / -1;
        justify-content: flex-start;
        gap: 1.5rem;
    }

    .book-stat[b-vvz0mn91qw] {
        text-align: left;
    }
}
/* /Components/Pages/Career/Literature/Characters.razor.rz.scp.css */
/* ============================================
   FICTIONAL CHARACTERS LIST PAGE
   Theme: Warm Gold / Literary Elegance
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.characters-page[b-o7veeorgwk] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.page-atmosphere[b-o7veeorgwk] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 50%);
}

/* ============================================
   HEADER
   ============================================ */

.page-header[b-o7veeorgwk] {
    position: relative;
    z-index: 1;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

.page-header[b-o7veeorgwk]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-o7veeorgwk] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.back-link[b-o7veeorgwk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: all 0.3s ease;
}

.back-link:hover[b-o7veeorgwk] {
    color: var(--wl-gold);
}

.back-link svg[b-o7veeorgwk] {
    width: 1rem;
    height: 1rem;
}

.header-main[b-o7veeorgwk] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-o7veeorgwk] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-o7veeorgwk] {
    width: 1.75rem;
    height: 1.75rem;
}

.header-text h1[b-o7veeorgwk] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.header-subtitle[b-o7veeorgwk] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

/* ============================================
   LOADING
   ============================================ */

.loading-container[b-o7veeorgwk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    color: var(--wl-text-muted);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.loading-spinner[b-o7veeorgwk] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.1);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-o7veeorgwk 1s linear infinite;
}

@keyframes spin-b-o7veeorgwk {
    to { transform: rotate(360deg); }
}

/* ============================================
   CREATE SECTION
   ============================================ */

.create-section[b-o7veeorgwk] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    display: flex;
    justify-content: flex-end;
}

.btn-create[b-o7veeorgwk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-create:hover[b-o7veeorgwk] {
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
    transform: translateY(-1px);
    color: var(--wl-bg-primary);
}

.btn-create svg[b-o7veeorgwk] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-o7veeorgwk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 2rem;
    color: var(--wl-text-muted);
    position: relative;
    z-index: 1;
}

.empty-state svg[b-o7veeorgwk] {
    width: 3rem;
    height: 3rem;
    opacity: 0.4;
}

.empty-state p[b-o7veeorgwk] {
    font-size: 0.9375rem;
    margin: 0;
    text-align: center;
}

/* ============================================
   CHARACTERS GRID
   ============================================ */

.characters-list-section[b-o7veeorgwk] {
    position: relative;
    z-index: 1;
}

.characters-grid[b-o7veeorgwk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
}

/* ============================================
   CHARACTER CARD
   ============================================ */

.character-card[b-o7veeorgwk] {
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.1);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.character-card:hover[b-o7veeorgwk] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.character-card.expanded[b-o7veeorgwk] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.1);
}

.character-card.retired[b-o7veeorgwk] {
    opacity: 0.7;
}

.character-card.retired:hover[b-o7veeorgwk] {
    opacity: 0.85;
}

.character-card-header[b-o7veeorgwk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
    position: relative;
}

.character-info[b-o7veeorgwk] {
    flex: 1;
    min-width: 0;
}

.character-name[b-o7veeorgwk] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.06em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
}

.character-saga[b-o7veeorgwk] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    display: block;
    margin-bottom: 0.5rem;
}

/* ============================================
   TRAIT CHIPS
   ============================================ */

.trait-chips[b-o7veeorgwk] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.trait-chip[b-o7veeorgwk] {
    font-size: 0.6875rem;
    padding: 0.15rem 0.5rem;
    background: var(--wl-bg-tertiary);
    border-radius: 9999px;
    color: var(--wl-text-secondary);
    letter-spacing: 0.04em;
}

/* ============================================
   CHARACTER STATUS
   ============================================ */

.character-status[b-o7veeorgwk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ============================================
   PHASE BADGE
   ============================================ */

.phase-badge[b-o7veeorgwk] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.phase-badge.phase-rising[b-o7veeorgwk] {
    background: rgba(34, 197, 94, 0.15);
    color: rgb(74, 222, 128);
}

.phase-badge.phase-peak[b-o7veeorgwk] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
}

.phase-badge.phase-declining[b-o7veeorgwk] {
    background: rgba(234, 179, 8, 0.15);
    color: rgb(250, 204, 21);
}

.phase-badge.phase-resting[b-o7veeorgwk] {
    background: rgba(107, 114, 128, 0.15);
    color: rgb(156, 163, 175);
}

.phase-badge.retired[b-o7veeorgwk] {
    background: rgba(107, 114, 128, 0.2);
    color: rgb(156, 163, 175);
}

/* ============================================
   POPULARITY BAR
   ============================================ */

.popularity-section[b-o7veeorgwk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.popularity-bar[b-o7veeorgwk] {
    flex: 1;
    height: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.popularity-fill[b-o7veeorgwk] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.popularity-value[b-o7veeorgwk] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    color: var(--wl-text-secondary);
    letter-spacing: 0.04em;
    min-width: 2.5rem;
    text-align: right;
    flex-shrink: 0;
}

/* ============================================
   EXPAND ARROW
   ============================================ */

.expand-arrow[b-o7veeorgwk] {
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    flex-shrink: 0;
    transition: transform 0.3s ease;
    position: absolute;
    right: 1rem;
    top: 1.25rem;
}

.expand-arrow.rotated[b-o7veeorgwk] {
    transform: rotate(180deg);
}

/* ============================================
   CHARACTER DETAIL (EXPANDED)
   ============================================ */

.character-detail[b-o7veeorgwk] {
    padding: 0 1.5rem 1.25rem;
    border-top: 1px solid var(--wl-border-subtle);
    animation: fadeSlideIn-b-o7veeorgwk 0.3s ease;
}

@keyframes fadeSlideIn-b-o7veeorgwk {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.detail-stats[b-o7veeorgwk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1rem 0;
}

.stat-item[b-o7veeorgwk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label[b-o7veeorgwk] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.stat-value[b-o7veeorgwk] {
    font-size: 0.875rem;
    color: var(--wl-text-primary);
    font-weight: 500;
}

.peak-note[b-o7veeorgwk] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    font-weight: 400;
}

/* ============================================
   TWIST ACTIONS
   ============================================ */

.twist-actions[b-o7veeorgwk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.btn-twist[b-o7veeorgwk] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-twist:hover:not(.disabled)[b-o7veeorgwk] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
}

.btn-twist.disabled[b-o7veeorgwk] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-twist svg[b-o7veeorgwk] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-gold);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.twist-text[b-o7veeorgwk] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.twist-name[b-o7veeorgwk] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.twist-desc[b-o7veeorgwk] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    line-height: 1.4;
}

.btn-killoff:hover:not(.disabled) svg[b-o7veeorgwk] {
    color: rgb(248, 113, 113);
}

/* ============================================
   CONFIRM PANEL
   ============================================ */

.confirm-panel[b-o7veeorgwk] {
    padding: 0.75rem 1rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 0.5rem;
}

.confirm-panel p[b-o7veeorgwk] {
    font-size: 0.8125rem;
    color: rgb(252, 165, 165);
    margin: 0 0 0.75rem 0;
}

.confirm-actions[b-o7veeorgwk] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.btn-cancel[b-o7veeorgwk] {
    padding: 0.375rem 0.875rem;
    background: transparent;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.375rem;
    color: var(--wl-text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-cancel:hover[b-o7veeorgwk] {
    border-color: var(--wl-text-muted);
}

.btn-confirm-kill[b-o7veeorgwk] {
    padding: 0.375rem 0.875rem;
    background: rgba(239, 68, 68, 0.8);
    border: none;
    border-radius: 0.375rem;
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-confirm-kill:hover[b-o7veeorgwk] {
    background: rgb(239, 68, 68);
}

.btn-confirm-kill:disabled[b-o7veeorgwk] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .characters-page[b-o7veeorgwk] {
        padding: 0 1rem 3rem;
    }

    .characters-grid[b-o7veeorgwk] {
        grid-template-columns: 1fr;
    }

    .detail-stats[b-o7veeorgwk] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}
/* /Components/Pages/Career/Literature/CreateBook.razor.rz.scp.css */
/* ============================================
   BOOK CREATION WIZARD - Multi-step book creator
   Theme: Warm Gold / Literary Elegance
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.wizard-page[b-suyxbixrl7] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.page-atmosphere[b-suyxbixrl7] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 50%);
}

/* ============================================
   WIZARD HEADER
   ============================================ */

.wizard-header[b-suyxbixrl7] {
    position: relative;
    z-index: 1;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

.wizard-header[b-suyxbixrl7]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-suyxbixrl7] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.back-link[b-suyxbixrl7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: all 0.3s ease;
}

.back-link:hover[b-suyxbixrl7] {
    color: var(--wl-gold);
}

.back-link svg[b-suyxbixrl7] {
    width: 1rem;
    height: 1rem;
}

.header-main[b-suyxbixrl7] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-suyxbixrl7] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-suyxbixrl7] {
    width: 1.75rem;
    height: 1.75rem;
}

.header-text h1[b-suyxbixrl7] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.header-subtitle[b-suyxbixrl7] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

/* ============================================
   STEP INDICATOR
   ============================================ */

.step-indicator[b-suyxbixrl7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.step-item[b-suyxbixrl7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.step-circle[b-suyxbixrl7] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.15);
    border-radius: 50%;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-circle svg[b-suyxbixrl7] {
    width: 1rem;
    height: 1rem;
}

.step-item.active .step-circle[b-suyxbixrl7] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    border-color: var(--wl-gold);
    color: var(--wl-bg-primary);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
    transform: scale(1.1);
}

.step-item.completed .step-circle[b-suyxbixrl7] {
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    border-color: #22C55E;
    color: var(--wl-text-primary);
}

.step-label[b-suyxbixrl7] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.3s ease;
    text-align: center;
    max-width: 5rem;
}

.step-label-note[b-suyxbixrl7] {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.5625rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    letter-spacing: 0.06em;
}

.step-item.active .step-label[b-suyxbixrl7] {
    color: var(--wl-gold);
}

.step-item.active .step-label-note[b-suyxbixrl7] {
    color: rgba(var(--wl-gold-rgb), 0.75);
}

.step-item.completed .step-label[b-suyxbixrl7] {
    color: #4ADE80;
}

.step-item.completed .step-label-note[b-suyxbixrl7] {
    color: rgba(74, 222, 128, 0.75);
}

.step-connector[b-suyxbixrl7] {
    width: 3rem;
    height: 2px;
    background: var(--wl-border-medium);
    margin: 0 0.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.step-connector[b-suyxbixrl7]::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, #22C55E, #4ADE80);
    transition: width 0.5s ease;
}

.step-connector.completed[b-suyxbixrl7]::after {
    width: 100%;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-suyxbixrl7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    color: var(--wl-text-muted);
    gap: 1.5rem;
}

.loading-spinner[b-suyxbixrl7] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.1);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-suyxbixrl7 1s linear infinite;
}

@keyframes spin-b-suyxbixrl7 {
    to { transform: rotate(360deg); }
}

/* ============================================
   STEP CONTENT
   ============================================ */

.step-content[b-suyxbixrl7] {
    position: relative;
    z-index: 1;
    animation: fadeSlideIn-b-suyxbixrl7 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeSlideIn-b-suyxbixrl7 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-section[b-suyxbixrl7] {
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.form-section[b-suyxbixrl7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 20%,
        rgba(var(--wl-gold-rgb), 0.8) 50%,
        rgba(var(--wl-gold-rgb), 0.5) 80%,
        transparent 100%);
}

.section-title[b-suyxbixrl7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
}

.section-title svg[b-suyxbixrl7] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
}

.optional-badge[b-suyxbixrl7] {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 9999px;
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: rgba(var(--wl-gold-rgb), 0.9);
    font-family: inherit;
    font-size: 0.625rem;
    line-height: 1;
    letter-spacing: 0.06em;
}

.section-desc[b-suyxbixrl7] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: -0.75rem 0 1.5rem 0;
    line-height: 1.5;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.form-grid[b-suyxbixrl7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.form-group[b-suyxbixrl7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group.full-width[b-suyxbixrl7] {
    grid-column: 1 / -1;
}

.form-group label[b-suyxbixrl7] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.input-wrapper[b-suyxbixrl7] {
    position: relative;
}

.input-wrapper input[b-suyxbixrl7] {
    width: 100%;
    padding: 0.875rem 1rem;
    padding-right: 4rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.input-wrapper input:focus[b-suyxbixrl7] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.1);
}

.input-wrapper input[b-suyxbixrl7]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.3);
}

.char-count[b-suyxbixrl7] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.3);
}

.select-wrapper[b-suyxbixrl7] {
    position: relative;
}

.select-wrapper select[b-suyxbixrl7] {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.9375rem;
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.select-wrapper select:focus[b-suyxbixrl7] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.1);
}

.select-wrapper.compact select[b-suyxbixrl7] {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

.select-arrow[b-suyxbixrl7] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    pointer-events: none;
}

.field-desc[b-suyxbixrl7] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    line-height: 1.4;
    margin: 0.25rem 0 0 0;
    font-style: italic;
}

/* ============================================
   CHAPTER CARDS (Step 2)
   ============================================ */

.chapters-list[b-suyxbixrl7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.chapter-card[b-suyxbixrl7] {
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    transition: all 0.3s ease;
    animation: fadeSlideIn-b-suyxbixrl7 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.chapter-card:hover[b-suyxbixrl7] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.03);
}

.chapter-header[b-suyxbixrl7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.chapter-number[b-suyxbixrl7] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.chapter-type-badge[b-suyxbixrl7] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-weight: 600;
}

.chapter-type-badge.type-setup[b-suyxbixrl7] {
    background: rgba(59, 130, 246, 0.15);
    color: rgb(96, 165, 250);
}

.chapter-type-badge.type-risingaction[b-suyxbixrl7] {
    background: rgba(234, 179, 8, 0.15);
    color: rgb(250, 204, 21);
}

.chapter-type-badge.type-twist[b-suyxbixrl7] {
    background: rgba(168, 85, 247, 0.15);
    color: rgb(192, 132, 252);
}

.chapter-type-badge.type-climax[b-suyxbixrl7] {
    background: rgba(239, 68, 68, 0.15);
    color: rgb(248, 113, 113);
}

.chapter-type-badge.type-resolution[b-suyxbixrl7] {
    background: rgba(34, 197, 94, 0.15);
    color: rgb(74, 222, 128);
}

.chapter-type-badge.type-interlude[b-suyxbixrl7] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
}

.chapter-controls[b-suyxbixrl7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.chapter-control-group[b-suyxbixrl7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.chapter-control-group label[b-suyxbixrl7] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.chapter-tone-desc[b-suyxbixrl7] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    margin: 0.5rem 0 0 0;
    font-style: italic;
    line-height: 1.4;
}

.chapter-hint[b-suyxbixrl7] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    font-style: italic;
    margin-top: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-left: 2px solid var(--wl-gold);
}

.chapter-note[b-suyxbixrl7] {
    margin-top: 0.5rem;
}

.chapter-note input[b-suyxbixrl7] {
    width: 100%;
    padding: 0.375rem 0.5rem;
    font-size: 0.8rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border);
    border-radius: 0.25rem;
    color: var(--wl-text-primary);
}

.chapter-note input[b-suyxbixrl7]::placeholder {
    color: var(--wl-text-muted);
    font-style: italic;
}

/* ============================================
   CHAPTER ADD/REMOVE CONTROLS
   ============================================ */

.chapter-header-right[b-suyxbixrl7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-remove-chapter[b-suyxbixrl7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    color: rgba(var(--wl-contrast-rgb), 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.btn-remove-chapter svg[b-suyxbixrl7] {
    width: 0.875rem;
    height: 0.875rem;
}

.btn-remove-chapter:hover:not(:disabled)[b-suyxbixrl7] {
    color: rgb(248, 113, 113);
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

.btn-remove-chapter:disabled[b-suyxbixrl7] {
    opacity: 0.25;
    cursor: not-allowed;
}

.chapter-actions[b-suyxbixrl7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.3);
    border: 1px dashed var(--wl-border-subtle);
    border-radius: 0.75rem;
}

.chapter-limits[b-suyxbixrl7] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    letter-spacing: 0.04em;
}

.btn-add-chapter[b-suyxbixrl7] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: rgba(var(--wl-gold-rgb), 0.08);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 0.5rem;
    color: var(--wl-gold);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-add-chapter svg[b-suyxbixrl7] {
    width: 0.875rem;
    height: 0.875rem;
}

.btn-add-chapter:hover:not(:disabled)[b-suyxbixrl7] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    border-color: var(--wl-gold);
    box-shadow: 0 0 12px rgba(var(--wl-gold-rgb), 0.15);
}

.btn-add-chapter:disabled[b-suyxbixrl7] {
    opacity: 0.4;
    cursor: not-allowed;
}

.chapter-summary[b-suyxbixrl7] {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.summary-stat[b-suyxbixrl7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.summary-label[b-suyxbixrl7] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.summary-value[b-suyxbixrl7] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-gold);
    letter-spacing: 0.04em;
}

/* ============================================
   OPTIONS (Step 3)
   ============================================ */

.options-grid[b-suyxbixrl7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.option-card[b-suyxbixrl7] {
    display: flex;
    gap: 1rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.option-card:hover[b-suyxbixrl7] {
    border-color: rgba(var(--wl-gold-rgb), 0.2);
}

.option-card.full-width[b-suyxbixrl7] {
    grid-column: 1 / -1;
}

.option-icon[b-suyxbixrl7] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.625rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.option-icon svg[b-suyxbixrl7] {
    width: 1.25rem;
    height: 1.25rem;
}

.option-icon.ai[b-suyxbixrl7] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15) 0%, rgba(234, 179, 8, 0.1) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.option-content[b-suyxbixrl7] {
    flex: 1;
    min-width: 0;
}

.option-content h3[b-suyxbixrl7] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem 0;
}

.option-none[b-suyxbixrl7] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    margin: 0;
    font-style: italic;
}

.option-desc[b-suyxbixrl7] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}

.toggle-label[b-suyxbixrl7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.toggle-label input[type="checkbox"][b-suyxbixrl7] {
    accent-color: var(--wl-gold);
    width: 1rem;
    height: 1rem;
}

.toggle-text[b-suyxbixrl7] {
    font-size: 0.875rem;
    color: var(--wl-text-primary);
}

.ai-btn[b-suyxbixrl7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.5rem;
    color: var(--wl-gold);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ai-btn:hover:not(:disabled)[b-suyxbixrl7] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.25) 0%, rgba(var(--wl-gold-rgb), 0.1) 100%);
    border-color: var(--wl-gold);
    box-shadow: 0 0 15px rgba(var(--wl-gold-rgb), 0.2);
}

.ai-btn:disabled[b-suyxbixrl7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ai-btn svg[b-suyxbixrl7] {
    width: 1rem;
    height: 1rem;
}

.spinner-small[b-suyxbixrl7] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-suyxbixrl7 0.8s linear infinite;
}

.ai-suggestions[b-suyxbixrl7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.suggestion-chip[b-suyxbixrl7] {
    padding: 0.5rem 1rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    border: 1px solid var(--wl-border-medium);
    border-radius: 9999px;
    color: var(--wl-text-primary);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.suggestion-chip:hover[b-suyxbixrl7] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.suggestion-chip.selected[b-suyxbixrl7] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    border-color: var(--wl-gold);
    color: var(--wl-gold);
    font-weight: 500;
}

/* ============================================
   PREVIEW (Step 4)
   ============================================ */

.preview-card[b-suyxbixrl7] {
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.preview-header[b-suyxbixrl7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.book-icon[b-suyxbixrl7] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.75rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.book-icon svg[b-suyxbixrl7] {
    width: 1.5rem;
    height: 1.5rem;
}

.preview-title-area[b-suyxbixrl7] {
    flex: 1;
    min-width: 0;
}

.preview-book-title[b-suyxbixrl7] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.2;
}

.preview-pen-name[b-suyxbixrl7] {
    font-size: 0.8125rem;
    color: var(--wl-gold);
    margin: 0.25rem 0 0 0;
    font-style: italic;
}

.preview-stats[b-suyxbixrl7] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.preview-stat[b-suyxbixrl7] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.preview-stat .stat-label[b-suyxbixrl7] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.preview-stat .stat-value[b-suyxbixrl7] {
    font-size: 0.9375rem;
    color: var(--wl-text-primary);
    font-weight: 500;
}

.preview-theme[b-suyxbixrl7],
.preview-series[b-suyxbixrl7] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--wl-border-subtle);
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
}

.theme-label[b-suyxbixrl7],
.series-label[b-suyxbixrl7] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    flex-shrink: 0;
}

.theme-value[b-suyxbixrl7],
.series-value[b-suyxbixrl7] {
    font-size: 0.875rem;
    color: var(--wl-text-primary);
    font-style: italic;
}

/* ============================================
   ARC VISUALIZATION
   ============================================ */

.arc-visualization[b-suyxbixrl7] {
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.arc-visualization h4[b-suyxbixrl7] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 1rem 0;
    text-transform: uppercase;
}

.arc-flow[b-suyxbixrl7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.arc-block[b-suyxbixrl7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    min-width: 3.5rem;
}

.arc-block.type-setup[b-suyxbixrl7] {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.arc-block.type-risingaction[b-suyxbixrl7] {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.2);
}

.arc-block.type-twist[b-suyxbixrl7] {
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.arc-block.type-climax[b-suyxbixrl7] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.arc-block.type-resolution[b-suyxbixrl7] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.arc-block.type-interlude[b-suyxbixrl7] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
}

.arc-type[b-suyxbixrl7] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.arc-tone[b-suyxbixrl7] {
    font-size: 0.5625rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

/* ============================================
   WRITING ESTIMATE
   ============================================ */

.writing-estimate[b-suyxbixrl7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(var(--wl-gold-rgb), 0.05);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}

.estimate-icon[b-suyxbixrl7] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.estimate-icon svg[b-suyxbixrl7] {
    width: 1.5rem;
    height: 1.5rem;
}

.estimate-content[b-suyxbixrl7] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.estimate-label[b-suyxbixrl7] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.estimate-value[b-suyxbixrl7] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-gold);
    letter-spacing: 0.04em;
}

/* ============================================
   NAVIGATION BUTTONS
   ============================================ */

.nav-buttons[b-suyxbixrl7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wl-border-subtle);
    position: relative;
    z-index: 1;
}

.btn-secondary[b-suyxbixrl7],
.btn-primary[b-suyxbixrl7],
.btn-create[b-suyxbixrl7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-secondary[b-suyxbixrl7] {
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    border: 1px solid var(--wl-border-medium);
    color: var(--wl-text-muted);
}

.btn-secondary:hover[b-suyxbixrl7] {
    border-color: rgba(var(--wl-contrast-rgb), 0.3);
    color: var(--wl-text-primary);
}

.btn-secondary svg[b-suyxbixrl7],
.btn-primary svg[b-suyxbixrl7],
.btn-create svg[b-suyxbixrl7] {
    width: 1rem;
    height: 1rem;
}

.btn-primary[b-suyxbixrl7] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    color: var(--wl-bg-primary);
    font-weight: 600;
}

.btn-primary:hover:not(:disabled)[b-suyxbixrl7] {
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-suyxbixrl7],
.btn-create:disabled[b-suyxbixrl7] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-create[b-suyxbixrl7] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    color: var(--wl-bg-primary);
    font-weight: 600;
    padding: 0.875rem 2rem;
    font-size: 0.9375rem;
}

.btn-create:hover:not(:disabled)[b-suyxbixrl7] {
    box-shadow: 0 0 25px rgba(var(--wl-gold-rgb), 0.5);
    transform: translateY(-1px);
}

.spinner[b-suyxbixrl7] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(var(--wl-bg-primary), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-suyxbixrl7 0.8s linear infinite;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .wizard-page[b-suyxbixrl7] {
        padding: 0 1rem 3rem;
    }

    .form-grid[b-suyxbixrl7] {
        grid-template-columns: 1fr;
    }

    .options-grid[b-suyxbixrl7] {
        grid-template-columns: 1fr;
    }

    .preview-stats[b-suyxbixrl7] {
        grid-template-columns: 1fr;
    }

    .step-label[b-suyxbixrl7] {
        display: none;
    }

    .step-connector[b-suyxbixrl7] {
        margin-bottom: 0;
    }

    .chapter-controls[b-suyxbixrl7] {
        grid-template-columns: 1fr;
    }

    .arc-flow[b-suyxbixrl7] {
        gap: 0.25rem;
    }

    .arc-block[b-suyxbixrl7] {
        min-width: 2.5rem;
        padding: 0.25rem 0.375rem;
    }

    .arc-type[b-suyxbixrl7] {
        font-size: 0.5625rem;
    }

    .chapter-summary[b-suyxbixrl7] {
        gap: 1.5rem;
    }

    .cast-grid[b-suyxbixrl7] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   STEP 3: CAST
   ============================================ */

.step-cast .step-description[b-suyxbixrl7] {
    color: var(--wl-text-muted);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.cast-grid[b-suyxbixrl7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.cast-card[b-suyxbixrl7] {
    background: var(--wl-bg-tertiary);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.1);
    border-radius: 0.75rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cast-card:hover[b-suyxbixrl7] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    transform: translateY(-2px);
}

.cast-card.assigned[b-suyxbixrl7] {
    border-color: var(--wl-gold);
    box-shadow: 0 0 0 2px rgba(var(--wl-gold-rgb), 0.2);
}

.cast-name[b-suyxbixrl7] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--wl-text-primary);
    margin-bottom: 0.25rem;
}

.cast-meta[b-suyxbixrl7] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    margin-bottom: 0.5rem;
}

.cast-traits[b-suyxbixrl7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.cast-traits .trait-chip[b-suyxbixrl7] {
    font-size: 0.6875rem;
    padding: 0.125rem 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-radius: 9999px;
    color: var(--wl-gold);
}

.cast-role select[b-suyxbixrl7] {
    width: 100%;
    background: var(--wl-bg-secondary);
    color: var(--wl-text-primary);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.5rem;
    padding: 0.375rem 0.5rem;
    font-size: 0.8125rem;
}

.cast-max-notice[b-suyxbixrl7] {
    color: var(--wl-warning);
    font-size: 0.8125rem;
    margin-top: 1rem;
    text-align: center;
}

.cast-empty[b-suyxbixrl7] {
    text-align: center;
    padding: 2rem;
    color: var(--wl-text-muted);
    border: 1px dashed rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.75rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.35);
}

.cast-empty p[b-suyxbixrl7] {
    margin: 0;
}

.cast-empty-note[b-suyxbixrl7] {
    margin-top: 0.5rem !important;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(var(--wl-contrast-rgb), 0.55);
}
/* /Components/Pages/Career/Literature/CreateCharacter.razor.rz.scp.css */
/* ============================================
   CHARACTER CREATION WIZARD - Multi-step character creator
   Theme: Warm Gold / Literary Elegance
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.wizard-page[b-5y7t9eld8u] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.page-atmosphere[b-5y7t9eld8u] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 50%);
}

/* ============================================
   WIZARD HEADER
   ============================================ */

.wizard-header[b-5y7t9eld8u] {
    position: relative;
    z-index: 1;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

.wizard-header[b-5y7t9eld8u]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-5y7t9eld8u] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.back-link[b-5y7t9eld8u] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: all 0.3s ease;
}

.back-link:hover[b-5y7t9eld8u] {
    color: var(--wl-gold);
}

.back-link svg[b-5y7t9eld8u] {
    width: 1rem;
    height: 1rem;
}

.header-main[b-5y7t9eld8u] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-5y7t9eld8u] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-5y7t9eld8u] {
    width: 1.75rem;
    height: 1.75rem;
}

.header-text h1[b-5y7t9eld8u] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.header-subtitle[b-5y7t9eld8u] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

/* ============================================
   STEP INDICATOR
   ============================================ */

.step-indicator[b-5y7t9eld8u] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.step-item[b-5y7t9eld8u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.step-circle[b-5y7t9eld8u] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.15);
    border-radius: 50%;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-circle svg[b-5y7t9eld8u] {
    width: 1rem;
    height: 1rem;
}

.step-item.active .step-circle[b-5y7t9eld8u] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    border-color: var(--wl-gold);
    color: var(--wl-bg-primary);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
    transform: scale(1.1);
}

.step-item.completed .step-circle[b-5y7t9eld8u] {
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    border-color: #22C55E;
    color: var(--wl-text-primary);
}

.step-label[b-5y7t9eld8u] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.3s ease;
    text-align: center;
    max-width: 5rem;
}

.step-item.active .step-label[b-5y7t9eld8u] {
    color: var(--wl-gold);
}

.step-item.completed .step-label[b-5y7t9eld8u] {
    color: #4ADE80;
}

.step-connector[b-5y7t9eld8u] {
    width: 3rem;
    height: 2px;
    background: var(--wl-border-medium);
    margin: 0 0.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.step-connector[b-5y7t9eld8u]::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, #22C55E, #4ADE80);
    transition: width 0.5s ease;
}

.step-connector.completed[b-5y7t9eld8u]::after {
    width: 100%;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-5y7t9eld8u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    color: var(--wl-text-muted);
    gap: 1.5rem;
}

.loading-spinner[b-5y7t9eld8u] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.1);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-5y7t9eld8u 1s linear infinite;
}

@keyframes spin-b-5y7t9eld8u {
    to { transform: rotate(360deg); }
}

/* ============================================
   STEP CONTENT
   ============================================ */

.step-content[b-5y7t9eld8u] {
    position: relative;
    z-index: 1;
    animation: fadeSlideIn-b-5y7t9eld8u 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeSlideIn-b-5y7t9eld8u {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-section[b-5y7t9eld8u] {
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.form-section[b-5y7t9eld8u]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 20%,
        rgba(var(--wl-gold-rgb), 0.8) 50%,
        rgba(var(--wl-gold-rgb), 0.5) 80%,
        transparent 100%);
}

.section-title[b-5y7t9eld8u] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
}

.section-title svg[b-5y7t9eld8u] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
}

.section-desc[b-5y7t9eld8u] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: -0.75rem 0 1.5rem 0;
    line-height: 1.5;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.form-grid[b-5y7t9eld8u] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.form-grid.compact[b-5y7t9eld8u] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.form-group[b-5y7t9eld8u] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group.full-width[b-5y7t9eld8u] {
    grid-column: 1 / -1;
}

.form-group label[b-5y7t9eld8u] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.input-wrapper[b-5y7t9eld8u] {
    position: relative;
}

.input-wrapper input[b-5y7t9eld8u] {
    width: 100%;
    padding: 0.875rem 1rem;
    padding-right: 4rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.input-wrapper input:focus[b-5y7t9eld8u] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.1);
}

.input-wrapper input[b-5y7t9eld8u]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.3);
}

.textarea-wrapper textarea[b-5y7t9eld8u] {
    width: 100%;
    padding: 0.875rem 1rem;
    padding-right: 4rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.9375rem;
    resize: vertical;
    min-height: 4rem;
    font-family: inherit;
    transition: all 0.3s ease;
}

.textarea-wrapper textarea:focus[b-5y7t9eld8u] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.1);
}

.textarea-wrapper textarea[b-5y7t9eld8u]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.3);
}

.char-count[b-5y7t9eld8u] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.3);
}

.char-count.textarea-count[b-5y7t9eld8u] {
    top: auto;
    bottom: 0.5rem;
    transform: none;
}

.select-wrapper[b-5y7t9eld8u] {
    position: relative;
}

.select-wrapper select[b-5y7t9eld8u] {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.9375rem;
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.select-wrapper select:focus[b-5y7t9eld8u] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.1);
}

.select-arrow[b-5y7t9eld8u] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    pointer-events: none;
}

.field-hint[b-5y7t9eld8u] {
    margin: 0.125rem 0 0;
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.new-series-panel[b-5y7t9eld8u] {
    padding: 1.125rem;
    background: rgba(var(--wl-gold-rgb), 0.055);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.75rem;
}

.new-series-panel__header[b-5y7t9eld8u] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.new-series-panel__header span[b-5y7t9eld8u] {
    color: var(--wl-text-primary);
    font-weight: 700;
}

.new-series-panel__header small[b-5y7t9eld8u] {
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* ============================================
   TRAITS GRID (Step 2)
   ============================================ */

.traits-grid[b-5y7t9eld8u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.trait-tile[b-5y7t9eld8u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.875rem 0.75rem;
    background: var(--wl-bg-tertiary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.625rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.trait-tile:hover:not(:disabled)[b-5y7t9eld8u] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    background: rgba(var(--wl-gold-rgb), 0.05);
    transform: translateY(-2px);
}

.trait-tile.selected[b-5y7t9eld8u] {
    border-color: var(--wl-gold);
    box-shadow: 0 0 0 2px rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.08);
    transform: translateY(-2px);
}

.trait-tile.disabled[b-5y7t9eld8u] {
    opacity: 0.35;
    cursor: not-allowed;
}

.trait-tile.disabled:hover[b-5y7t9eld8u] {
    transform: none;
    border-color: var(--wl-border-subtle);
    background: var(--wl-bg-tertiary);
}

.trait-name[b-5y7t9eld8u] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    line-height: 1.2;
}

.trait-tile.selected .trait-name[b-5y7t9eld8u] {
    color: var(--wl-gold);
}

.trait-affinities[b-5y7t9eld8u] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    align-items: center;
}

.trait-affinity[b-5y7t9eld8u] {
    font-size: 0.625rem;
    color: var(--wl-text-muted);
    letter-spacing: 0.02em;
}

/* ============================================
   SELECTED TRAITS SUMMARY
   ============================================ */

.selected-traits-summary[b-5y7t9eld8u] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.selected-traits-summary h4[b-5y7t9eld8u] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 1rem 0;
    text-transform: uppercase;
}

.affinity-preview[b-5y7t9eld8u] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.affinity-row[b-5y7t9eld8u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
}

.affinity-trait-name[b-5y7t9eld8u] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.affinity-bonuses[b-5y7t9eld8u] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.affinity-badge[b-5y7t9eld8u] {
    font-size: 0.6875rem;
    padding: 0.1875rem 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 9999px;
    color: var(--wl-text-primary);
    white-space: nowrap;
}

/* ============================================
   PREVIEW (Step 3)
   ============================================ */

.preview-card[b-5y7t9eld8u] {
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.preview-header[b-5y7t9eld8u] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.character-icon[b-5y7t9eld8u] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.75rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.character-icon svg[b-5y7t9eld8u] {
    width: 1.5rem;
    height: 1.5rem;
}

.preview-title-area[b-5y7t9eld8u] {
    flex: 1;
    min-width: 0;
}

.preview-char-name[b-5y7t9eld8u] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.2;
}

.preview-description[b-5y7t9eld8u] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    font-style: italic;
    line-height: 1.4;
}

.preview-stats[b-5y7t9eld8u] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.preview-stat[b-5y7t9eld8u] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.preview-stat .stat-label[b-5y7t9eld8u] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.preview-stat .stat-value[b-5y7t9eld8u] {
    font-size: 0.9375rem;
    color: var(--wl-text-primary);
    font-weight: 500;
}

.preview-traits[b-5y7t9eld8u] {
    padding-top: 1rem;
    border-top: 1px solid var(--wl-border-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preview-trait-row[b-5y7t9eld8u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-gold-rgb), 0.03);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.1);
    border-radius: 0.5rem;
}

.preview-trait-name[b-5y7t9eld8u] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.preview-trait-affinities[b-5y7t9eld8u] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.preview-info[b-5y7t9eld8u] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(var(--wl-gold-rgb), 0.05);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}

.preview-info svg[b-5y7t9eld8u] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-gold);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.preview-info p[b-5y7t9eld8u] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   NAVIGATION BUTTONS
   ============================================ */

.nav-buttons[b-5y7t9eld8u] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wl-border-subtle);
    position: relative;
    z-index: 1;
}

.btn-secondary[b-5y7t9eld8u],
.btn-primary[b-5y7t9eld8u],
.btn-create[b-5y7t9eld8u] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-secondary[b-5y7t9eld8u] {
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    border: 1px solid var(--wl-border-medium);
    color: var(--wl-text-muted);
}

.btn-secondary:hover[b-5y7t9eld8u] {
    border-color: rgba(var(--wl-contrast-rgb), 0.3);
    color: var(--wl-text-primary);
}

.btn-secondary svg[b-5y7t9eld8u],
.btn-primary svg[b-5y7t9eld8u],
.btn-create svg[b-5y7t9eld8u] {
    width: 1rem;
    height: 1rem;
}

.btn-primary[b-5y7t9eld8u] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    color: var(--wl-bg-primary);
    font-weight: 600;
}

.btn-primary:hover:not(:disabled)[b-5y7t9eld8u] {
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
    transform: translateY(-1px);
}

.btn-primary:disabled[b-5y7t9eld8u],
.btn-create:disabled[b-5y7t9eld8u] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-create[b-5y7t9eld8u] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    color: var(--wl-bg-primary);
    font-weight: 600;
    padding: 0.875rem 2rem;
    font-size: 0.9375rem;
}

.btn-create:hover:not(:disabled)[b-5y7t9eld8u] {
    box-shadow: 0 0 25px rgba(var(--wl-gold-rgb), 0.5);
    transform: translateY(-1px);
}

.spinner[b-5y7t9eld8u] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(var(--wl-bg-primary), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-5y7t9eld8u 0.8s linear infinite;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .wizard-page[b-5y7t9eld8u] {
        padding: 0 1rem 3rem;
    }

    .traits-grid[b-5y7t9eld8u] {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    }

    .preview-stats[b-5y7t9eld8u] {
        grid-template-columns: 1fr;
    }

    .form-grid.compact[b-5y7t9eld8u] {
        grid-template-columns: 1fr;
    }

    .step-label[b-5y7t9eld8u] {
        display: none;
    }

    .step-connector[b-5y7t9eld8u] {
        margin-bottom: 0;
    }

    .affinity-row[b-5y7t9eld8u],
    .preview-trait-row[b-5y7t9eld8u] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
    }
}
/* /Components/Pages/Career/Literature/Editing.razor.rz.scp.css */
/* ============================================
   EDITING PAGE
   Theme: Warm Gold / Literary Elegance
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.editing-page[b-6b37yh9wi6] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.page-atmosphere[b-6b37yh9wi6] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 50%);
}

/* ============================================
   LOADING & ERROR STATES
   ============================================ */

.loading-container[b-6b37yh9wi6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: var(--wl-text-muted);
}

.loading-spinner[b-6b37yh9wi6] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-6b37yh9wi6 0.8s linear infinite;
}

@keyframes spin-b-6b37yh9wi6 {
    to { transform: rotate(360deg); }
}

.error-state[b-6b37yh9wi6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 1.5rem;
    color: var(--wl-text-muted);
    text-align: center;
}

.back-btn[b-6b37yh9wi6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(var(--wl-gold-rgb), 0.15);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.75rem;
    color: var(--wl-gold);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.back-btn:hover[b-6b37yh9wi6] {
    background: rgba(var(--wl-gold-rgb), 0.25);
}

/* ============================================
   HEADER
   ============================================ */

.editing-header[b-6b37yh9wi6] {
    position: relative;
    z-index: 1;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

.editing-header[b-6b37yh9wi6]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-6b37yh9wi6] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.back-link[b-6b37yh9wi6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: all 0.3s ease;
}

.back-link:hover[b-6b37yh9wi6] {
    color: var(--wl-gold);
}

.back-link svg[b-6b37yh9wi6] {
    width: 1rem;
    height: 1rem;
}

.header-main[b-6b37yh9wi6] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-6b37yh9wi6] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-6b37yh9wi6] {
    width: 1.75rem;
    height: 1.75rem;
}

.header-text h1[b-6b37yh9wi6] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.header-subtitle[b-6b37yh9wi6] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

.book-meta[b-6b37yh9wi6] {
    display: flex;
    gap: 0.5rem;
}

.genre-badge[b-6b37yh9wi6],
.status-badge[b-6b37yh9wi6] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.genre-badge[b-6b37yh9wi6] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.status-badge[b-6b37yh9wi6] {
    background: rgba(var(--wl-champagne-rgb), 0.10);
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.3);
    color: var(--wl-champagne);
}

/* ============================================
   SECTION LABELS
   ============================================ */

.section-label[b-6b37yh9wi6] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wl-gold);
    margin-bottom: 0.75rem;
}

/* ============================================
   PROGRESS CHECKLIST
   ============================================ */

.progress-section[b-6b37yh9wi6] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.progress-checklist[b-6b37yh9wi6] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.check-item[b-6b37yh9wi6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.6);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    transition: all 0.3s ease;
}

.check-item.done[b-6b37yh9wi6] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.08);
    color: var(--wl-text-primary);
}

.check-icon[b-6b37yh9wi6] {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.15);
    flex-shrink: 0;
}

.check-item.done .check-icon[b-6b37yh9wi6] {
    border-color: #22c55e;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

.check-icon svg[b-6b37yh9wi6] {
    width: 0.75rem;
    height: 0.75rem;
}

.check-detail[b-6b37yh9wi6] {
    font-size: 0.6875rem;
    color: #4ade80;
    font-weight: 600;
}

/* ============================================
   EDITING OPTIONS GRID
   ============================================ */

.options-section[b-6b37yh9wi6] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.options-grid[b-6b37yh9wi6] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.option-card[b-6b37yh9wi6] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.25rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.6);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    transition: all 0.3s ease;
    gap: 0.75rem;
}

.option-card:hover:not(.completed)[b-6b37yh9wi6] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    background: rgba(var(--wl-gold-rgb), 0.03);
}

.option-card.completed[b-6b37yh9wi6] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.done-overlay[b-6b37yh9wi6] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 50%;
    color: #22c55e;
}

.done-overlay svg[b-6b37yh9wi6] {
    width: 1rem;
    height: 1rem;
}

.card-icon[b-6b37yh9wi6] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-gold);
}

.card-icon svg[b-6b37yh9wi6] {
    width: 2rem;
    height: 2rem;
}

.option-card h3[b-6b37yh9wi6] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.06em;
    color: var(--wl-text-primary);
    margin: 0;
}

.card-desc[b-6b37yh9wi6] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    line-height: 1.5;
    margin: 0;
}

.card-costs[b-6b37yh9wi6] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    justify-content: center;
}

.cost-badge[b-6b37yh9wi6] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.cost-badge.free[b-6b37yh9wi6] {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.25);
    color: #4ade80;
}

.cost-badge.ai-cost[b-6b37yh9wi6] {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.25);
    color: #a78bfa;
}

.card-status[b-6b37yh9wi6] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #4ade80;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.12);
}

.card-controls[b-6b37yh9wi6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.reader-select[b-6b37yh9wi6] {
    flex: 0 0 auto;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    cursor: pointer;
}

.reader-select:focus[b-6b37yh9wi6] {
    outline: none;
    border-color: var(--wl-gold);
}

/* ============================================
   TIER SELECTOR
   ============================================ */

.tier-selector[b-6b37yh9wi6] {
    display: flex;
    gap: 0.375rem;
    width: 100%;
}

.tier-btn[b-6b37yh9wi6] {
    flex: 1;
    padding: 0.5rem 0.375rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    border: 2px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--wl-text-primary);
}

.tier-btn:hover[b-6b37yh9wi6] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.tier-btn.selected[b-6b37yh9wi6] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    box-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.15);
}

.tier-name[b-6b37yh9wi6] {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.btn-action[b-6b37yh9wi6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    border: none;
    border-radius: 0.625rem;
    color: var(--wl-bg-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 10px rgba(var(--wl-gold-rgb), 0.25);
    width: 100%;
}

.btn-action:hover:not(:disabled)[b-6b37yh9wi6] {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.35);
}

.btn-action:disabled[b-6b37yh9wi6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.boost-result[b-6b37yh9wi6] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wl-gold);
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.1);
    animation: fadeSlideIn-b-6b37yh9wi6 0.4s ease;
}

@keyframes fadeSlideIn-b-6b37yh9wi6 {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.spinner[b-6b37yh9wi6] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-6b37yh9wi6 0.8s linear infinite;
}

/* ============================================
   BOOK PROOF - cover & blurb as a physical book
   ============================================ */

.proof-section[b-6b37yh9wi6] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    padding: 2rem 1.5rem;
    background:
        radial-gradient(ellipse 70% 80% at 50% -10%, rgba(var(--wl-gold-rgb), 0.06), transparent 65%),
        rgba(var(--wl-bg-secondary-rgb), 0.4);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.18);
    border-radius: 1rem;
}

.proof-layout[b-6b37yh9wi6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    justify-items: center;
    margin-top: 0.5rem;
}

.proof-panel[b-6b37yh9wi6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
    max-width: 22rem;
}

/* --- The book object --- */
.proof-book[b-6b37yh9wi6] {
    position: relative;
    width: min(17rem, 100%);
    aspect-ratio: 5 / 7.4;
    border-radius: 4px 10px 10px 4px;
    overflow: hidden;
    background: linear-gradient(165deg, rgba(var(--wl-bg-modal-rgb), 0.96), rgba(var(--wl-bg-modal-deep-rgb), 0.98));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    box-shadow:
        0 24px 50px -12px rgba(0, 0, 0, 0.65),
        0 0 50px -10px rgba(var(--wl-gold-rgb), 0.1);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.proof-book:hover[b-6b37yh9wi6] {
    transform: translateY(-4px) rotate(-0.5deg);
    box-shadow:
        0 32px 60px -12px rgba(0, 0, 0, 0.7),
        0 0 70px -10px rgba(var(--wl-gold-rgb), 0.18);
}

/* Spine shading on the left edge */
.proof-spine[b-6b37yh9wi6] {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 14px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.12) 60%, transparent);
    pointer-events: none;
}

/* Page block peeking on the right edge */
.proof-pages[b-6b37yh9wi6] {
    position: absolute;
    top: 3px;
    bottom: 3px;
    right: 0;
    width: 5px;
    background: repeating-linear-gradient(180deg,
        rgba(var(--wl-champagne-rgb), 0.5) 0 1px,
        rgba(var(--wl-champagne-rgb), 0.15) 1px 3px);
    border-radius: 0 6px 6px 0;
    pointer-events: none;
}

.proof-pages--left[b-6b37yh9wi6] {
    right: auto;
    left: 0;
    border-radius: 6px 0 0 6px;
}

.proof-book--back[b-6b37yh9wi6] {
    border-radius: 10px 4px 4px 10px;
}

.proof-book--back .proof-spine[b-6b37yh9wi6] {
    left: auto;
    right: 0;
    transform: scaleX(-1);
}

.proof-book[b-6b37yh9wi6]  .proof-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Draft cover - placeholder that already looks like a cover */
.proof-cover-draft[b-6b37yh9wi6] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding: 1.5rem 1.25rem;
    text-align: center;
    background:
        radial-gradient(ellipse 90% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.10), transparent 60%);
}

.draft-genre[b-6b37yh9wi6] {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--wl-champagne);
}

.draft-rule[b-6b37yh9wi6] {
    width: 3rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--wl-gold), transparent);
}

.draft-title[b-6b37yh9wi6] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    line-height: 1.05;
    letter-spacing: 0.06em;
    background-image: linear-gradient(160deg, var(--wl-champagne) 0%, var(--wl-gold) 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--wl-gold);
}

/* Back cover interior */
.proof-back-inner[b-6b37yh9wi6] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem 1.25rem;
    gap: 1rem;
}

.proof-back-label[b-6b37yh9wi6] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--wl-champagne);
}

.proof-back-label[b-6b37yh9wi6]::before,
.proof-back-label[b-6b37yh9wi6]::after {
    content: "✦";
    color: var(--wl-gold);
    font-size: 0.85em;
    margin: 0 0.6em;
}

.proof-blurb[b-6b37yh9wi6] {
    flex: 1;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-right: 0.375rem;
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    font-style: italic;
    font-size: 0.8125rem;
    line-height: 1.75;
    color: rgba(var(--wl-champagne-rgb), 0.8);
    margin: 0;
}

.proof-blurb--empty[b-6b37yh9wi6] {
    color: var(--wl-text-muted);
    align-self: center;
    margin: auto 0;
    text-align: center;
}

/* Print detail: tiny barcode in the corner */
.proof-barcode[b-6b37yh9wi6] {
    align-self: flex-end;
    width: 3.25rem;
    height: 1.25rem;
    background: repeating-linear-gradient(90deg,
        rgba(var(--wl-champagne-rgb), 0.55) 0 1px,
        transparent 1px 3px,
        rgba(var(--wl-champagne-rgb), 0.55) 3px 5px,
        transparent 5px 6px);
    border: 2px solid rgba(var(--wl-champagne-rgb), 0.12);
    border-radius: 2px;
    opacity: 0.55;
}

/* Working overlay while AI renders */
.proof-working-overlay[b-6b37yh9wi6] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}

.proof-working-overlay .spinner[b-6b37yh9wi6] {
    width: 1.75rem;
    height: 1.75rem;
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    border-top-color: var(--wl-gold);
}

.proof-book--working[b-6b37yh9wi6] {
    pointer-events: none;
}

/* --- Actions under each book face --- */
.proof-actions[b-6b37yh9wi6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

.proof-btn[b-6b37yh9wi6] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem 1rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    border: none;
    border-radius: 0.625rem;
    color: var(--wl-bg-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.proof-btn svg[b-6b37yh9wi6] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.proof-btn:hover:not(:disabled)[b-6b37yh9wi6] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--wl-gold-rgb), 0.35);
}

.proof-btn:disabled[b-6b37yh9wi6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.proof-btn--secondary[b-6b37yh9wi6] {
    background: transparent;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.45);
    color: var(--wl-gold);
}

.proof-btn--secondary:hover[b-6b37yh9wi6] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    transform: translateY(-1px);
}

.proof-cost[b-6b37yh9wi6] {
    margin-left: auto;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.18);
    font-size: 0.6875rem;
    font-weight: 700;
}

.proof-btn--secondary .proof-cost[b-6b37yh9wi6] {
    background: rgba(var(--wl-gold-rgb), 0.12);
}

.proof-hint[b-6b37yh9wi6] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    text-align: center;
    margin: 0;
}

/* InputFile is a child component - its input doesn't get this component's
   scope attribute, so the selector needs ::deep to reach it. */
[b-6b37yh9wi6] .upload-input-hidden {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 720px) {
    .proof-layout[b-6b37yh9wi6] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   FINISH EDITING
   ============================================ */

.finish-section[b-6b37yh9wi6] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 2rem 0;
    margin-bottom: 3rem;
}

.finish-desc[b-6b37yh9wi6] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0;
    max-width: 500px;
}

.btn-finish[b-6b37yh9wi6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 3rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    border: none;
    border-radius: 0.75rem;
    color: var(--wl-bg-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.35);
    width: 100%;
    max-width: 500px;
}

.btn-finish:hover:not(:disabled)[b-6b37yh9wi6] {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(var(--wl-gold-rgb), 0.45);
}

.btn-finish:active:not(:disabled)[b-6b37yh9wi6] {
    transform: translateY(0);
}

.btn-finish:disabled[b-6b37yh9wi6] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-finish svg[b-6b37yh9wi6] {
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .editing-page[b-6b37yh9wi6] {
        padding: 0 1rem 3rem;
    }

    .header-text h1[b-6b37yh9wi6] {
        font-size: 1.5rem;
    }

    .options-grid[b-6b37yh9wi6],
    .ai-grid[b-6b37yh9wi6] {
        grid-template-columns: 1fr;
    }

    .progress-checklist[b-6b37yh9wi6] {
        flex-direction: column;
    }

    .tier-selector[b-6b37yh9wi6] {
        flex-direction: column;
    }

    .btn-finish[b-6b37yh9wi6] {
        max-width: 100%;
    }
}


/* Slim gold scrollbar for long blurbs */
.proof-blurb[b-6b37yh9wi6]::-webkit-scrollbar {
    width: 3px;
}

.proof-blurb[b-6b37yh9wi6]::-webkit-scrollbar-track {
    background: transparent;
}

.proof-blurb[b-6b37yh9wi6]::-webkit-scrollbar-thumb {
    background: rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 2px;
}

/* ── Live manuscript quality ─────────────────────────────── */
.quality-section[b-6b37yh9wi6] {
    margin-bottom: 2rem;
}

.quality-panel[b-6b37yh9wi6] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.10) 0%, rgba(var(--wl-gold-rgb), 0.03) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 14px;
}

.quality-total[b-6b37yh9wi6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 6rem;
    padding-right: 1.5rem;
    border-right: 1px solid rgba(var(--wl-gold-rgb), 0.2);
}

.quality-total-score[b-6b37yh9wi6] {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
}

.quality-total-value[b-6b37yh9wi6] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.75rem;
    line-height: 1;
    color: var(--wl-gold);
}

.quality-total-max[b-6b37yh9wi6] {
    font-size: 0.95rem;
    color: var(--wl-text-muted);
}

.quality-total-label[b-6b37yh9wi6] {
    margin-top: 0.35rem;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.quality-bars[b-6b37yh9wi6] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
}

.quality-bar-row[b-6b37yh9wi6] {
    display: grid;
    grid-template-columns: 6rem 1fr 2.25rem;
    align-items: center;
    gap: 0.75rem;
}

.quality-bar-label[b-6b37yh9wi6] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
}

.quality-bar-track[b-6b37yh9wi6] {
    height: 7px;
    border-radius: 4px;
    background: rgba(var(--wl-gold-rgb), 0.12);
    overflow: hidden;
}

.quality-bar-fill[b-6b37yh9wi6] {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.6) 0%, var(--wl-gold) 100%);
    transition: width 0.4s ease;
}

.quality-bar-value[b-6b37yh9wi6] {
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-size: 0.8125rem;
    color: var(--wl-text-primary);
}

.quality-hint[b-6b37yh9wi6] {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--wl-text-muted);
}

@media (max-width: 640px) {
    .quality-panel[b-6b37yh9wi6] {
        flex-direction: column;
        align-items: stretch;
    }

    .quality-total[b-6b37yh9wi6] {
        flex-direction: row;
        gap: 0.6rem;
        min-width: 0;
        padding-right: 0;
        padding-bottom: 0.75rem;
        border-right: none;
        border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    }
}
/* /Components/Pages/Career/Literature/Ghostwriting.razor.rz.scp.css */
/* ============================================
   GHOSTWRITING PAGE
   Theme: Warm Gold / Mysterious Shadows
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.ghostwriting-page[b-ocs12v1pbo] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.page-atmosphere[b-ocs12v1pbo] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 50%);
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-ocs12v1pbo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: var(--wl-text-muted);
}

.loading-spinner[b-ocs12v1pbo] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-ocs12v1pbo 0.8s linear infinite;
}

@keyframes spin-b-ocs12v1pbo {
    to { transform: rotate(360deg); }
}

/* ============================================
   HEADER
   ============================================ */

.ghost-header[b-ocs12v1pbo] {
    position: relative;
    z-index: 1;
    padding: 2rem 0 1.5rem;
}

.header-content[b-ocs12v1pbo] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.back-link[b-ocs12v1pbo] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-ocs12v1pbo] {
    color: var(--wl-gold);
}

.back-link svg[b-ocs12v1pbo] {
    width: 1rem;
    height: 1rem;
}

.header-main[b-ocs12v1pbo] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-icon[b-ocs12v1pbo] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-gold-rgb), 0.15);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    flex-shrink: 0;
}

.header-icon svg[b-ocs12v1pbo] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
}

.header-text h1[b-ocs12v1pbo] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.2;
}

.header-subtitle[b-ocs12v1pbo] {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

/* ============================================
   SECTION LABELS
   ============================================ */

.section-label[b-ocs12v1pbo] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-gold);
    margin-bottom: 1rem;
}

/* ============================================
   ACTIVE CONTRACT
   ============================================ */

.contract-section[b-ocs12v1pbo] {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
}

.contract-card[b-ocs12v1pbo] {
    background: rgba(var(--wl-gold-rgb), 0.06);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contract-header[b-ocs12v1pbo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.npc-info[b-ocs12v1pbo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.npc-name[b-ocs12v1pbo] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wl-text-primary);
}

.fame-badge[b-ocs12v1pbo] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: rgba(var(--wl-gold-rgb), 0.15);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.genre-badge[b-ocs12v1pbo] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 2rem;
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

.genre-badge.small[b-ocs12v1pbo] {
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
}

.tone-badge[b-ocs12v1pbo] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: rgba(var(--wl-gold-rgb), 0.05);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 2rem;
    font-size: 0.8rem;
    color: var(--wl-text-muted);
}

.contract-details[b-ocs12v1pbo] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detail-item[b-ocs12v1pbo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-label[b-ocs12v1pbo] {
    font-size: 0.9rem;
    color: var(--wl-text-secondary);
}

.urgent[b-ocs12v1pbo] {
    color: var(--wl-danger, #ef4444);
    font-weight: 700;
    animation: pulse-urgent-b-ocs12v1pbo 1.5s ease-in-out infinite;
}

@keyframes pulse-urgent-b-ocs12v1pbo {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ============================================
   SCANDAL RISK BAR
   ============================================ */

.scandal-risk-section[b-ocs12v1pbo] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.scandal-bar-container[b-ocs12v1pbo] {
    width: 100%;
    height: 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-radius: 0.25rem;
    overflow: hidden;
}

.scandal-bar[b-ocs12v1pbo] {
    height: 100%;
    border-radius: 0.25rem;
    background: linear-gradient(90deg, #f59e0b, #ef4444, #dc2626);
    transition: width 0.5s ease;
    min-width: 2%;
}

.scandal-value[b-ocs12v1pbo] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

/* ============================================
   WRITING BUTTON
   ============================================ */

.btn-writing[b-ocs12v1pbo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold), color-mix(in srgb, var(--wl-gold) 80%, #fff));
    border: none;
    border-radius: 0.75rem;
    color: var(--wl-bg-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-writing:hover[b-ocs12v1pbo] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-writing svg[b-ocs12v1pbo] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   OFFERS SECTION
   ============================================ */

.offers-section[b-ocs12v1pbo] {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
}

.offers-grid[b-ocs12v1pbo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.offer-card[b-ocs12v1pbo] {
    background: rgba(var(--wl-gold-rgb), 0.04);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.3s ease;
}

.offer-card:hover[b-ocs12v1pbo] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.offer-header[b-ocs12v1pbo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.offer-meta[b-ocs12v1pbo] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.offer-details[b-ocs12v1pbo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-row[b-ocs12v1pbo] {
    display: flex;
    align-items: center;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-accept[b-ocs12v1pbo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold), color-mix(in srgb, var(--wl-gold) 80%, #fff));
    border: none;
    border-radius: 0.75rem;
    color: var(--wl-bg-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: auto;
}

.btn-accept:hover:not(:disabled)[b-ocs12v1pbo] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-accept:disabled[b-ocs12v1pbo] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-generate[b-ocs12v1pbo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.75rem;
    color: var(--wl-gold);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-generate:hover:not(:disabled)[b-ocs12v1pbo] {
    background: rgba(var(--wl-gold-rgb), 0.2);
    border-color: rgba(var(--wl-gold-rgb), 0.5);
}

.btn-generate:disabled[b-ocs12v1pbo] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner[b-ocs12v1pbo] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-ocs12v1pbo 0.6s linear infinite;
}

/* ============================================
   HISTORY SECTION
   ============================================ */

.history-section[b-ocs12v1pbo] {
    position: relative;
    z-index: 1;
    margin-top: 2.5rem;
}

.history-list[b-ocs12v1pbo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-item[b-ocs12v1pbo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-gold-rgb), 0.04);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.1);
    border-radius: 0.75rem;
    gap: 1rem;
}

.history-info[b-ocs12v1pbo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.history-npc[b-ocs12v1pbo] {
    font-weight: 600;
    color: var(--wl-text-primary);
    font-size: 0.9rem;
}

.history-payment[b-ocs12v1pbo] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
}

/* ============================================
   STATUS BADGES
   ============================================ */

.status-badge[b-ocs12v1pbo] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.status-completed[b-ocs12v1pbo] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-badge.status-failed[b-ocs12v1pbo] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.status-badge.status-scandalrevealed[b-ocs12v1pbo] {
    background: rgba(239, 68, 68, 0.2);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.4);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-ocs12v1pbo] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .ghostwriting-page[b-ocs12v1pbo] {
        padding: 0 1rem 3rem;
    }

    .header-text h1[b-ocs12v1pbo] {
        font-size: 1.35rem;
    }

    .offers-grid[b-ocs12v1pbo] {
        grid-template-columns: 1fr;
    }

    .contract-header[b-ocs12v1pbo] {
        flex-direction: column;
    }

    .history-item[b-ocs12v1pbo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* /Components/Pages/Career/Literature/Index.razor.rz.scp.css */
.literature-hub[b-4iy6cqidkh] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    position: relative;
}

/* Thin vertical "ink" line */
.ink-line[b-4iy6cqidkh] {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.15) 10%,
        rgba(var(--wl-gold-rgb), 0.06) 90%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Header */
.hub-header[b-4iy6cqidkh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.08), rgba(var(--wl-gold-rgb), 0.02));
    border-radius: 1rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    position: relative;
    z-index: 1;
}

.header-content[b-4iy6cqidkh] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-4iy6cqidkh] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-4iy6cqidkh] {
    width: 100%;
    height: 100%;
}

.header-text h1[b-4iy6cqidkh] {
    font-size: 2.25rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.35rem 0;
    letter-spacing: -0.02em;
}

.header-text .subtitle[b-4iy6cqidkh] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 1rem;
    margin: 0;
    font-style: italic;
}

/* Quick Stats */
.stats-row[b-4iy6cqidkh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.stat-card[b-4iy6cqidkh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1rem;
    min-height: 6.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    text-align: center;
}

.stat-label[b-4iy6cqidkh] {
    font-size: 0.7rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    order: -1;
}

.stat-value[b-4iy6cqidkh] {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.stat-value.truncate[b-4iy6cqidkh] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stat-status-placeholder[b-4iy6cqidkh] {
    height: 1.15rem;
}

.stat-status[b-4iy6cqidkh] {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
    border-radius: 0.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-status.status-writing[b-4iy6cqidkh] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.stat-status.status-editing[b-4iy6cqidkh] {
    background: rgba(234, 179, 8, 0.15);
    color: #eab308;
}

.stat-status.status-prerelease[b-4iy6cqidkh] {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
}

.stat-status.status-released[b-4iy6cqidkh] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.progress-mini[b-4iy6cqidkh] {
    width: 100%;
    height: 6px;
    background: var(--wl-bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.progress-mini-bar[b-4iy6cqidkh] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), #f59e0b);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.ghostwriting-card .stat-status[b-4iy6cqidkh] {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.nominations-card .stat-value[b-4iy6cqidkh] {
    color: #8b5cf6;
}

.hub-link.disabled[b-4iy6cqidkh] {
    opacity: 0.4;
    pointer-events: auto;
    cursor: not-allowed;
}

.hub-link.disabled:hover[b-4iy6cqidkh] {
    transform: none;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-color: var(--wl-border-subtle);
    color: rgba(var(--wl-contrast-rgb), 0.85);
}

.hub-link.active-badge[b-4iy6cqidkh] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.hub-link.active-badge[b-4iy6cqidkh]::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    margin-left: auto;
    border-radius: 999px;
    background: var(--wl-gold);
    box-shadow: 0 0 8px rgba(var(--wl-gold-rgb), 0.6);
    flex-shrink: 0;
}

/* Navigation Grid */
.hub-grid[b-4iy6cqidkh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.hub-section[b-4iy6cqidkh] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.hub-section:hover[b-4iy6cqidkh] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
}

.section-title[b-4iy6cqidkh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--wl-border-medium);
}

.section-title svg[b-4iy6cqidkh] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
}

.section-links[b-4iy6cqidkh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hub-link[b-4iy6cqidkh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    text-decoration: none;
    transition: all 0.2s ease;
}

.hub-link:hover[b-4iy6cqidkh] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
    transform: translateX(4px);
}

.link-icon[b-4iy6cqidkh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.link-icon svg[b-4iy6cqidkh] {
    width: 1.25rem;
    height: 1.25rem;
}

.link-text[b-4iy6cqidkh] {
    flex: 1;
    font-weight: 500;
}

/* Loading */
.loading-container[b-4iy6cqidkh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.loading-spinner[b-4iy6cqidkh] {
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-4iy6cqidkh 0.8s linear infinite;
}

@keyframes spin-b-4iy6cqidkh {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 640px) {
    .literature-hub[b-4iy6cqidkh] {
        padding: 1rem;
    }

    .hub-header[b-4iy6cqidkh] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .header-content[b-4iy6cqidkh] {
        flex-direction: column;
    }

    .header-text h1[b-4iy6cqidkh] {
        font-size: 1.75rem;
    }

    .stats-row[b-4iy6cqidkh] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Components/Pages/Career/Literature/PenNames.razor.rz.scp.css */
/* ============================================
   PEN NAMES PAGE
   Theme: Warm Gold / Literary Elegance
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.pennames-page[b-9usrpxj1ol] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.page-atmosphere[b-9usrpxj1ol] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 50%);
}

/* ============================================
   HEADER
   ============================================ */

.page-header[b-9usrpxj1ol] {
    position: relative;
    z-index: 1;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

.page-header[b-9usrpxj1ol]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-9usrpxj1ol] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.back-link[b-9usrpxj1ol] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: all 0.3s ease;
}

.back-link:hover[b-9usrpxj1ol] {
    color: var(--wl-gold);
}

.back-link svg[b-9usrpxj1ol] {
    width: 1rem;
    height: 1rem;
}

.header-main[b-9usrpxj1ol] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-9usrpxj1ol] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-9usrpxj1ol] {
    width: 1.75rem;
    height: 1.75rem;
}

.header-text h1[b-9usrpxj1ol] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.header-subtitle[b-9usrpxj1ol] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

/* ============================================
   LOADING
   ============================================ */

.loading-container[b-9usrpxj1ol] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    color: var(--wl-text-muted);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.loading-spinner[b-9usrpxj1ol] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.1);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-9usrpxj1ol 1s linear infinite;
}

@keyframes spin-b-9usrpxj1ol {
    to { transform: rotate(360deg); }
}

/* ============================================
   SECTION TITLES
   ============================================ */

.section-title[b-9usrpxj1ol] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
}

.section-title svg[b-9usrpxj1ol] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
}

/* ============================================
   ACTIVE PEN NAME CARD
   ============================================ */

.active-section[b-9usrpxj1ol] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.penname-card[b-9usrpxj1ol] {
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.penname-card[b-9usrpxj1ol]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 20%,
        rgba(var(--wl-gold-rgb), 0.8) 50%,
        rgba(var(--wl-gold-rgb), 0.5) 80%,
        transparent 100%);
}

.penname-name[b-9usrpxj1ol] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.06em;
    color: var(--wl-gold);
    margin-bottom: 1.25rem;
    line-height: 1;
}

.penname-stats[b-9usrpxj1ol] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.stat-row[b-9usrpxj1ol] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stat-label[b-9usrpxj1ol] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    min-width: 6rem;
    flex-shrink: 0;
}

.reputation-bar[b-9usrpxj1ol] {
    flex: 1;
    height: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.reputation-fill[b-9usrpxj1ol] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), rgba(var(--wl-gold-rgb), 0.8));
    border-radius: 3px;
    transition: width 0.5s ease;
}

.stat-value[b-9usrpxj1ol] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: var(--wl-gold);
    letter-spacing: 0.04em;
    min-width: 3rem;
    text-align: right;
}

/* ============================================
   BOOKS UNDER PEN NAME
   ============================================ */

.books-under-pen[b-9usrpxj1ol] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.book-item[b-9usrpxj1ol] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
}

.book-title[b-9usrpxj1ol] {
    font-size: 0.875rem;
    color: var(--wl-text-primary);
}

.book-genre[b-9usrpxj1ol] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
    font-weight: 600;
}

/* ============================================
   REVEAL SECTION
   ============================================ */

.reveal-section[b-9usrpxj1ol] {
    margin-top: 1.5rem;
}

.reveal-card[b-9usrpxj1ol] {
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.reveal-header[b-9usrpxj1ol] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.reveal-header > svg[b-9usrpxj1ol] {
    width: 2rem;
    height: 2rem;
    color: rgba(239, 68, 68, 0.7);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.reveal-text h3[b-9usrpxj1ol] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.06em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem 0;
}

.reveal-text p[b-9usrpxj1ol] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    margin: 0;
    line-height: 1.4;
}

.btn-reveal[b-9usrpxj1ol] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 0.5rem;
    color: rgb(248, 113, 113);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-reveal:hover[b-9usrpxj1ol] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(239, 68, 68, 0.1) 100%);
    border-color: rgb(248, 113, 113);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);
}

.btn-reveal svg[b-9usrpxj1ol] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   REVEAL WARNING MODAL
   ============================================ */

.reveal-warning[b-9usrpxj1ol] {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.15);
    border-radius: 0.5rem;
    padding: 1.25rem;
    animation: fadeSlideIn-b-9usrpxj1ol 0.3s ease;
}

@keyframes fadeSlideIn-b-9usrpxj1ol {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.warning-text[b-9usrpxj1ol] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    line-height: 1.5;
    margin: 0 0 0.75rem 0;
}

.confirm-text[b-9usrpxj1ol] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgb(248, 113, 113);
    margin: 0 0 1rem 0;
}

.reveal-actions[b-9usrpxj1ol] {
    display: flex;
    gap: 0.75rem;
}

.btn-cancel[b-9usrpxj1ol] {
    padding: 0.625rem 1.25rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel:hover[b-9usrpxj1ol] {
    border-color: rgba(var(--wl-contrast-rgb), 0.3);
    color: var(--wl-text-primary);
}

.btn-reveal-confirm[b-9usrpxj1ol] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, rgb(239, 68, 68) 0%, rgb(220, 38, 38) 100%);
    border: none;
    border-radius: 0.5rem;
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-reveal-confirm:hover:not(:disabled)[b-9usrpxj1ol] {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    transform: translateY(-1px);
}

.btn-reveal-confirm:disabled[b-9usrpxj1ol] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   REVEAL RESULT
   ============================================ */

.reveal-result[b-9usrpxj1ol] {
    background: rgba(var(--wl-gold-rgb), 0.05);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.5rem;
    padding: 1.25rem;
    text-align: center;
    animation: fadeSlideIn-b-9usrpxj1ol 0.4s ease;
}

.result-narrative[b-9usrpxj1ol] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.06em;
    color: var(--wl-gold);
    margin: 0 0 1rem 0;
}

.result-stats[b-9usrpxj1ol] {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.result-fame[b-9usrpxj1ol] {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(74, 222, 128);
}

.result-reputation[b-9usrpxj1ol] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-gold);
}

/* ============================================
   CREATE PEN NAME
   ============================================ */

.create-section[b-9usrpxj1ol] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.create-card[b-9usrpxj1ol] {
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.create-card[b-9usrpxj1ol]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 20%,
        rgba(var(--wl-gold-rgb), 0.8) 50%,
        rgba(var(--wl-gold-rgb), 0.5) 80%,
        transparent 100%);
}

.no-penname-msg[b-9usrpxj1ol] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0 0 1.5rem 0;
    font-style: italic;
}

.create-form[b-9usrpxj1ol] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group[b-9usrpxj1ol] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-9usrpxj1ol] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.input-wrapper[b-9usrpxj1ol] {
    position: relative;
}

.input-wrapper input[b-9usrpxj1ol] {
    width: 100%;
    padding: 0.875rem 1rem;
    padding-right: 4rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.input-wrapper input:focus[b-9usrpxj1ol] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.1);
}

.input-wrapper input[b-9usrpxj1ol]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.3);
}

.char-count[b-9usrpxj1ol] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.3);
}

.create-info[b-9usrpxj1ol] {
    display: flex;
    align-items: center;
}

.cost-label[b-9usrpxj1ol] {
    font-size: 0.8125rem;
    color: var(--wl-gold);
    font-weight: 500;
}

.btn-create[b-9usrpxj1ol] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    align-self: flex-start;
}

.btn-create:hover:not(:disabled)[b-9usrpxj1ol] {
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
    transform: translateY(-1px);
}

.btn-create:disabled[b-9usrpxj1ol] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-create svg[b-9usrpxj1ol] {
    width: 1rem;
    height: 1rem;
}

.spinner-small[b-9usrpxj1ol] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--wl-bg-primary), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-9usrpxj1ol 0.8s linear infinite;
}

/* ============================================
   REVEALED PEN NAMES
   ============================================ */

.revealed-section[b-9usrpxj1ol] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.revealed-list[b-9usrpxj1ol] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.revealed-card[b-9usrpxj1ol] {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    transition: all 0.3s ease;
}

.revealed-card:hover[b-9usrpxj1ol] {
    border-color: rgba(var(--wl-gold-rgb), 0.2);
}

.revealed-info[b-9usrpxj1ol] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.revealed-name[b-9usrpxj1ol] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--wl-text-primary);
}

.revealed-badge[b-9usrpxj1ol] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
    font-weight: 600;
}

.revealed-date[b-9usrpxj1ol] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    flex-shrink: 0;
}

.revealed-books[b-9usrpxj1ol] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    flex-shrink: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .pennames-page[b-9usrpxj1ol] {
        padding: 0 1rem 3rem;
    }

    .penname-name[b-9usrpxj1ol] {
        font-size: 1.5rem;
    }

    .stat-row[b-9usrpxj1ol] {
        flex-wrap: wrap;
    }

    .reveal-actions[b-9usrpxj1ol] {
        flex-direction: column;
    }

    .revealed-card[b-9usrpxj1ol] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .result-stats[b-9usrpxj1ol] {
        flex-direction: column;
        gap: 0.5rem;
    }
}
/* /Components/Pages/Career/Literature/Prizes.razor.rz.scp.css */
/* ============================================
   LITERARY PRIZES PAGE
   Theme: Warm Gold / Award Prestige
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.prizes-page[b-nbougxj9a7] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.page-atmosphere[b-nbougxj9a7] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 50%);
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-nbougxj9a7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: var(--wl-text-muted);
}

.loading-spinner[b-nbougxj9a7] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-nbougxj9a7 0.8s linear infinite;
}

@keyframes spin-b-nbougxj9a7 {
    to { transform: rotate(360deg); }
}

/* ============================================
   HEADER
   ============================================ */

.prizes-header[b-nbougxj9a7] {
    position: relative;
    z-index: 1;
    padding: 2rem 0 1.5rem;
}

.header-content[b-nbougxj9a7] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.back-link[b-nbougxj9a7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.back-link:hover[b-nbougxj9a7] {
    color: var(--wl-gold);
}

.back-link svg[b-nbougxj9a7] {
    width: 1rem;
    height: 1rem;
}

.header-main[b-nbougxj9a7] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-icon[b-nbougxj9a7] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-gold-rgb), 0.15);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    flex-shrink: 0;
}

.header-icon svg[b-nbougxj9a7] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
}

.header-text h1[b-nbougxj9a7] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.2;
}

.header-subtitle[b-nbougxj9a7] {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

/* ============================================
   SECTION LABELS
   ============================================ */

.section-label[b-nbougxj9a7] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-gold);
    margin-bottom: 1rem;
}

/* ============================================
   PRIZES GRID
   ============================================ */

.prizes-section[b-nbougxj9a7] {
    position: relative;
    z-index: 1;
    margin-top: 2rem;
}

.prizes-grid[b-nbougxj9a7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.prize-card[b-nbougxj9a7] {
    background: rgba(var(--wl-gold-rgb), 0.04);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: all 0.3s ease;
}

.prize-card:hover[b-nbougxj9a7] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    background: rgba(var(--wl-gold-rgb), 0.08);
    transform: translateY(-2px);
}

.prize-header[b-nbougxj9a7] {
    display: flex;
    justify-content: flex-start;
}

.prize-name[b-nbougxj9a7] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
}

.prize-desc[b-nbougxj9a7] {
    font-size: 0.85rem;
    color: var(--wl-text-muted);
    line-height: 1.5;
    margin: 0;
}

/* ============================================
   PRESTIGE BADGES
   ============================================ */

.prestige-badge[b-nbougxj9a7] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.7rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.prestige-badge.prestige-local[b-nbougxj9a7] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.prestige-badge.prestige-national[b-nbougxj9a7] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.prestige-badge.prestige-international[b-nbougxj9a7] {
    background: rgba(var(--wl-gold-rgb), 0.2);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
}

.prestige-badge.prestige-commercial[b-nbougxj9a7] {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

/* Prestige accent on card border */
.prize-card.prestige-local[b-nbougxj9a7] {
    border-left: 3px solid rgba(34, 197, 94, 0.5);
}

.prize-card.prestige-national[b-nbougxj9a7] {
    border-left: 3px solid rgba(59, 130, 246, 0.5);
}

.prize-card.prestige-international[b-nbougxj9a7] {
    border-left: 3px solid rgba(var(--wl-gold-rgb), 0.6);
}

.prize-card.prestige-commercial[b-nbougxj9a7] {
    border-left: 3px solid rgba(168, 85, 247, 0.5);
}

/* ============================================
   GENRE TAGS
   ============================================ */

.prize-genres[b-nbougxj9a7] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.genres-label[b-nbougxj9a7] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-muted);
}

.genre-tags[b-nbougxj9a7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.genre-tag[b-nbougxj9a7] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.08);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 2rem;
    font-size: 0.7rem;
    color: var(--wl-text-secondary);
}

/* ============================================
   PRIZE STATS
   ============================================ */

.prize-stats[b-nbougxj9a7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.prize-stat[b-nbougxj9a7] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.06);
    border-radius: 0.4rem;
    font-size: 0.75rem;
    color: var(--wl-text-secondary);
}

.prize-stat.fame[b-nbougxj9a7] {
    color: var(--wl-gold);
    font-weight: 600;
}

.prize-stat.credits[b-nbougxj9a7] {
    color: #22c55e;
    font-weight: 600;
}

.prize-effect[b-nbougxj9a7] {
    font-size: 0.8rem;
    color: var(--wl-gold);
    font-style: italic;
    margin: 0;
    padding-top: 0.25rem;
    border-top: 1px solid rgba(var(--wl-gold-rgb), 0.1);
}

/* ============================================
   NOMINATIONS SECTION
   ============================================ */

.nominations-section[b-nbougxj9a7] {
    position: relative;
    z-index: 1;
    margin-top: 2.5rem;
}

.nominations-list[b-nbougxj9a7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nomination-item[b-nbougxj9a7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-gold-rgb), 0.04);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.1);
    border-radius: 0.75rem;
    gap: 1rem;
}

.nomination-info[b-nbougxj9a7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-width: 0;
}

.nomination-book[b-nbougxj9a7] {
    font-weight: 600;
    color: var(--wl-text-primary);
    font-size: 0.9rem;
}

.nomination-prize[b-nbougxj9a7] {
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

.nomination-period[b-nbougxj9a7] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

/* ============================================
   NOMINATION STATUS BADGES
   ============================================ */

.nom-status-badge[b-nbougxj9a7] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.nom-status-badge.nom-status-nominated[b-nbougxj9a7] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.nom-status-badge.nom-status-won[b-nbougxj9a7] {
    background: rgba(var(--wl-gold-rgb), 0.2);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
}

.nom-status-badge.nom-status-lost[b-nbougxj9a7] {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-nbougxj9a7] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .prizes-page[b-nbougxj9a7] {
        padding: 0 1rem 3rem;
    }

    .header-text h1[b-nbougxj9a7] {
        font-size: 1.35rem;
    }

    .prizes-grid[b-nbougxj9a7] {
        grid-template-columns: 1fr;
    }

    .nomination-item[b-nbougxj9a7] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* /Components/Pages/Career/Literature/Publishing.razor.rz.scp.css */
/* ============================================
   PUBLISHING PAGE
   Theme: Warm Gold / Literary Elegance
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.publishing-page[b-ojhccpae5s] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.page-atmosphere[b-ojhccpae5s] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 50%);
}

/* ============================================
   LOADING & ERROR STATES
   ============================================ */

.loading-container[b-ojhccpae5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: var(--wl-text-muted);
}

.loading-spinner[b-ojhccpae5s] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-ojhccpae5s 0.8s linear infinite;
}

@keyframes spin-b-ojhccpae5s {
    to { transform: rotate(360deg); }
}

.error-state[b-ojhccpae5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 1.5rem;
    color: var(--wl-text-muted);
    text-align: center;
}

.back-btn[b-ojhccpae5s] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(var(--wl-gold-rgb), 0.15);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.75rem;
    color: var(--wl-gold);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.back-btn:hover[b-ojhccpae5s] {
    background: rgba(var(--wl-gold-rgb), 0.25);
}

/* ============================================
   HEADER
   ============================================ */

.publishing-header[b-ojhccpae5s] {
    position: relative;
    z-index: 1;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

.publishing-header[b-ojhccpae5s]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-ojhccpae5s] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.back-link[b-ojhccpae5s] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: all 0.3s ease;
}

.back-link:hover[b-ojhccpae5s] {
    color: var(--wl-gold);
}

.back-link svg[b-ojhccpae5s] {
    width: 1rem;
    height: 1rem;
}

.header-main[b-ojhccpae5s] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-ojhccpae5s] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-ojhccpae5s] {
    width: 1.75rem;
    height: 1.75rem;
}

.header-text h1[b-ojhccpae5s] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.header-subtitle[b-ojhccpae5s] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

.book-meta[b-ojhccpae5s] {
    display: flex;
    gap: 0.5rem;
}

.genre-badge[b-ojhccpae5s],
.status-badge[b-ojhccpae5s] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.genre-badge[b-ojhccpae5s] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.status-badge.status-prerelease[b-ojhccpae5s] {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #c084fc;
}

.status-badge.status-released[b-ojhccpae5s] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

/* ============================================
   SECTION LABELS
   ============================================ */

.section-label[b-ojhccpae5s] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wl-gold);
    margin-bottom: 0.5rem;
}

.section-desc[b-ojhccpae5s] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0 0 1.25rem 0;
}

/* ============================================
   PUBLISHER GRID
   ============================================ */

.publisher-section[b-ojhccpae5s] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.publisher-grid[b-ojhccpae5s] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.publisher-card[b-ojhccpae5s] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.25rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.6);
    border: 2px solid var(--wl-border-medium);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    gap: 0.5rem;
    color: var(--wl-text-primary);
}

.publisher-card:hover[b-ojhccpae5s] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    background: rgba(var(--wl-gold-rgb), 0.03);
}

.publisher-card.selected[b-ojhccpae5s] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.08);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.15);
}

.publisher-card h3[b-ojhccpae5s] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.06em;
    color: var(--wl-text-primary);
    margin: 0;
}

.pub-desc[b-ojhccpae5s] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    line-height: 1.5;
    margin: 0;
}

.pub-tier-badge[b-ojhccpae5s] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tier-indiepress[b-ojhccpae5s] {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.tier-midtier[b-ojhccpae5s] {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #c084fc;
}

.tier-bigfive[b-ojhccpae5s] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.tier-prestigeimprint[b-ojhccpae5s] {
    background: rgba(236, 72, 153, 0.15);
    border: 1px solid rgba(236, 72, 153, 0.3);
    color: #f472b6;
}

.tier-self[b-ojhccpae5s] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.pub-stats[b-ojhccpae5s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.25rem;
}

.pub-stat[b-ojhccpae5s] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    color: var(--wl-text-secondary);
}

.pub-stat.prize[b-ojhccpae5s] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.pub-stat.fame[b-ojhccpae5s] {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.25);
    color: #c084fc;
}

.pub-stat.self[b-ojhccpae5s] {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.25);
    color: #4ade80;
}

.selected-indicator[b-ojhccpae5s] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-gold-rgb), 0.2);
    border: 1px solid var(--wl-gold);
    border-radius: 50%;
    color: var(--wl-gold);
    animation: fadeSlideIn-b-ojhccpae5s 0.3s ease;
}

.selected-indicator svg[b-ojhccpae5s] {
    width: 1rem;
    height: 1rem;
}

@keyframes fadeSlideIn-b-ojhccpae5s {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Self-publish card - green accent */
.self-publish-card[b-ojhccpae5s] {
    border-color: rgba(34, 197, 94, 0.2);
    background: rgba(34, 197, 94, 0.03);
}

.self-publish-card:hover[b-ojhccpae5s] {
    border-color: rgba(34, 197, 94, 0.4);
    background: rgba(34, 197, 94, 0.06);
}

.self-publish-card.selected[b-ojhccpae5s] {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.15);
}

.self-publish-card .selected-indicator[b-ojhccpae5s] {
    background: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
    color: #22c55e;
}

/* ============================================
   SERIALIZATION TOGGLE
   ============================================ */

.serialization-section[b-ojhccpae5s] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.serial-toggle[b-ojhccpae5s] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.6);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.serial-toggle:hover[b-ojhccpae5s] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.serial-toggle input[type="checkbox"][b-ojhccpae5s] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    accent-color: var(--wl-gold);
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-label[b-ojhccpae5s] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.toggle-label strong[b-ojhccpae5s] {
    font-size: 0.9375rem;
    color: var(--wl-text-primary);
}

.toggle-desc[b-ojhccpae5s] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    line-height: 1.5;
}

/* ============================================
   RELEASE BUTTON
   ============================================ */

.release-section[b-ojhccpae5s] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 2rem 0;
    margin-bottom: 3rem;
}

.btn-release[b-ojhccpae5s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 3rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    border: none;
    border-radius: 0.75rem;
    color: var(--wl-bg-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.35);
    width: 100%;
    max-width: 500px;
}

.btn-release:hover:not(:disabled)[b-ojhccpae5s] {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(var(--wl-gold-rgb), 0.45);
}

.btn-release:active:not(:disabled)[b-ojhccpae5s] {
    transform: translateY(0);
}

.btn-release:disabled[b-ojhccpae5s] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-release svg[b-ojhccpae5s] {
    width: 1.25rem;
    height: 1.25rem;
}

.spinner[b-ojhccpae5s] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-ojhccpae5s 0.8s linear infinite;
}

/* ============================================
   SALES DASHBOARD
   ============================================ */

.dashboard-section[b-ojhccpae5s] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.dashboard-row[b-ojhccpae5s] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.cover-preview[b-ojhccpae5s] {
    width: 140px;
    flex-shrink: 0;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cover-preview[b-ojhccpae5s]  img {
    width: 100%;
    height: auto;
    display: block;
}

.stats-grid[b-ojhccpae5s] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    flex: 1;
}

.stat-card[b-ojhccpae5s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.6);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.stat-card:hover[b-ojhccpae5s] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.stat-value[b-ojhccpae5s] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.05em;
    color: var(--wl-gold);
    line-height: 1;
}

.stat-label[b-ojhccpae5s] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
    margin-top: 0.5rem;
}

/* ============================================
   CONTRACT DETAILS
   ============================================ */

.contract-section[b-ojhccpae5s] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.contract-card[b-ojhccpae5s] {
    padding: 1.5rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.6);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contract-publisher[b-ojhccpae5s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.contract-publisher h3[b-ojhccpae5s] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.06em;
    color: var(--wl-text-primary);
    margin: 0;
}

.contract-stats[b-ojhccpae5s] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.contract-stat[b-ojhccpae5s] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

/* ============================================
   ADVANCE EARN-OUT
   ============================================ */

.earnout-section[b-ojhccpae5s] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.earnout-header[b-ojhccpae5s] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.earnout-title[b-ojhccpae5s] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wl-text-primary);
}

.earnout-detail[b-ojhccpae5s] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.earnout-bar-container[b-ojhccpae5s] {
    height: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 999px;
    overflow: hidden;
}

.earnout-bar[b-ojhccpae5s] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), rgba(var(--wl-gold-rgb), 0.8));
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   SERIALIZATION CONTROLS (POST-RELEASE)
   ============================================ */

.serial-section[b-ojhccpae5s] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.serial-stats[b-ojhccpae5s] {
    margin-bottom: 1rem;
}

.serial-stat[b-ojhccpae5s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.serial-stat-label[b-ojhccpae5s] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wl-text-secondary);
    white-space: nowrap;
}

.retention-bar-container[b-ojhccpae5s] {
    flex: 1;
    height: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 999px;
    overflow: hidden;
}

.retention-bar[b-ojhccpae5s] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #4ade80);
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.retention-value[b-ojhccpae5s] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #4ade80;
    min-width: 3rem;
    text-align: right;
}

.chapter-list[b-ojhccpae5s] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chapter-item[b-ojhccpae5s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.6);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.chapter-item.published[b-ojhccpae5s] {
    border-color: rgba(34, 197, 94, 0.2);
    background: rgba(34, 197, 94, 0.04);
}

.chapter-info[b-ojhccpae5s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chapter-number[b-ojhccpae5s] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.chapter-badge[b-ojhccpae5s] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
}

.badge-published[b-ojhccpae5s] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.badge-pending[b-ojhccpae5s] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    color: var(--wl-text-muted);
}

.btn-publish-chapter[b-ojhccpae5s] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    border: none;
    border-radius: 0.625rem;
    color: var(--wl-bg-primary);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 10px rgba(var(--wl-gold-rgb), 0.25);
}

.btn-publish-chapter:hover:not(:disabled)[b-ojhccpae5s] {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.35);
}

.btn-publish-chapter:disabled[b-ojhccpae5s] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .publishing-page[b-ojhccpae5s] {
        padding: 0 1rem 3rem;
    }

    .header-text h1[b-ojhccpae5s] {
        font-size: 1.5rem;
    }

    .publisher-grid[b-ojhccpae5s] {
        grid-template-columns: 1fr;
    }

    .dashboard-row[b-ojhccpae5s] {
        flex-direction: column;
        align-items: center;
    }

    .cover-preview[b-ojhccpae5s] {
        width: 120px;
    }

    .stats-grid[b-ojhccpae5s] {
        grid-template-columns: 1fr;
    }

    .earnout-header[b-ojhccpae5s] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .btn-release[b-ojhccpae5s] {
        max-width: 100%;
    }
}

/* ============================================
   PROMOTION SECTION
   ============================================ */

.promo-section[b-ojhccpae5s] {
    margin-top: 2rem;
}

.section-desc[b-ojhccpae5s] {
    color: var(--wl-text-secondary);
    font-size: 0.85rem;
    margin: 0.25rem 0 1rem;
}

.promo-grid[b-ojhccpae5s] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.promo-card[b-ojhccpae5s] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.promo-card:hover[b-ojhccpae5s] {
    border-color: var(--wl-gold);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.promo-card-header[b-ojhccpae5s] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.promo-category[b-ojhccpae5s] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--wl-bg-tertiary);
    color: var(--wl-text-secondary);
}

.promo-category.category-organic[b-ojhccpae5s] {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.promo-category.category-events[b-ojhccpae5s] {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.promo-category.category-paid[b-ojhccpae5s] {
    background: rgba(234, 179, 8, 0.12);
    color: var(--wl-gold);
}

.promo-category.category-influencer[b-ojhccpae5s] {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.promo-cooldown[b-ojhccpae5s] {
    font-size: 0.7rem;
    color: var(--wl-text-tertiary);
}

.promo-name[b-ojhccpae5s] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem;
}

.promo-desc[b-ojhccpae5s] {
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
    line-height: 1.4;
    margin: 0 0 0.75rem;
}

.promo-costs[b-ojhccpae5s] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.promo-cost[b-ojhccpae5s] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.promo-cost svg[b-ojhccpae5s] {
    width: 14px;
    height: 14px;
}

.promo-cost.energy[b-ojhccpae5s] {
    color: #f59e0b;
}

.promo-cost.credits[b-ojhccpae5s] {
    color: var(--wl-gold);
}

.promo-cost.influence[b-ojhccpae5s] {
    color: #8b5cf6;
}

@media (max-width: 640px) {
    .promo-grid[b-ojhccpae5s] {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   PREMIERE - literary fame meter & locked tiers
   ============================================ */

.lit-fame-meter[b-ojhccpae5s] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background:
        radial-gradient(ellipse 60% 100% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06), transparent 70%),
        rgba(var(--wl-bg-secondary-rgb), 0.6);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.18);
    border-radius: 0.75rem;
}

.lit-fame-label[b-ojhccpae5s] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wl-champagne);
}

.lit-fame-label[b-ojhccpae5s]::before {
    content: "✦";
    color: var(--wl-gold);
    font-size: 0.85em;
    margin-right: 0.5em;
}

.lit-fame-value[b-ojhccpae5s] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    line-height: 1;
    background-image: linear-gradient(160deg, var(--wl-champagne) 0%, var(--wl-gold) 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--wl-gold);
}

.lit-fame-hint[b-ojhccpae5s] {
    flex-basis: 100%;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

/* Locked publishers: visible goals, clearly not clickable */
.publisher-card--locked[b-ojhccpae5s] {
    position: relative;
    cursor: default;
    opacity: 0.6;
    filter: saturate(0.5);
}

.publisher-card--locked:hover[b-ojhccpae5s] {
    border-color: var(--wl-border-medium);
    transform: none;
}

.pub-locked-bar[b-ojhccpae5s] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.08);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    color: var(--wl-gold);
    font-size: 0.75rem;
    font-weight: 700;
}

.pub-locked-bar svg[b-ojhccpae5s] {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}


/* Promotion hub CTA on the sales page */
.promo-hub-cta[b-ojhccpae5s] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.promo-hub-link[b-ojhccpae5s] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.promo-hub-link svg[b-ojhccpae5s] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}


/* Recent campaigns under the hub CTA - closes the promote→result loop */
.recent-campaigns[b-ojhccpae5s] {
    width: min(100%, 28rem);
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.recent-campaigns-label[b-ojhccpae5s] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.6875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.recent-campaign-row[b-ojhccpae5s] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-left: 3px solid var(--wl-text-muted);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
}

.recent-campaign-row.outcome-viral[b-ojhccpae5s] { border-left-color: var(--wl-gold); }
.recent-campaign-row.outcome-success[b-ojhccpae5s] { border-left-color: var(--wl-green); }
.recent-campaign-row.outcome-backfire[b-ojhccpae5s],
.recent-campaign-row.outcome-flop[b-ojhccpae5s] { border-left-color: var(--wl-red); }

.rc-action[b-ojhccpae5s] {
    color: var(--wl-text-primary);
    font-weight: 600;
}

.rc-outcome[b-ojhccpae5s] {
    color: var(--wl-text-secondary);
    font-size: 0.75rem;
}

.rc-effect[b-ojhccpae5s] {
    margin-left: auto;
    color: var(--wl-champagne);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
/* /Components/Pages/Career/Literature/Series.razor.rz.scp.css */
/* ============================================
   SERIES & SAGAS PAGE
   Theme: Warm Gold / Literary Elegance
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.series-page[b-xmqdc7nyge] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.page-atmosphere[b-xmqdc7nyge] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 50%);
}

/* ============================================
   HEADER
   ============================================ */

.page-header[b-xmqdc7nyge] {
    position: relative;
    z-index: 1;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

.page-header[b-xmqdc7nyge]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-xmqdc7nyge] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.back-link[b-xmqdc7nyge] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: all 0.3s ease;
}

.back-link:hover[b-xmqdc7nyge] {
    color: var(--wl-gold);
}

.back-link svg[b-xmqdc7nyge] {
    width: 1rem;
    height: 1rem;
}

.header-main[b-xmqdc7nyge] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-xmqdc7nyge] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-xmqdc7nyge] {
    width: 1.75rem;
    height: 1.75rem;
}

.header-text h1[b-xmqdc7nyge] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.header-subtitle[b-xmqdc7nyge] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

/* ============================================
   LOADING
   ============================================ */

.loading-container[b-xmqdc7nyge] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    color: var(--wl-text-muted);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.loading-spinner[b-xmqdc7nyge] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.1);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-xmqdc7nyge 1s linear infinite;
}

@keyframes spin-b-xmqdc7nyge {
    to { transform: rotate(360deg); }
}

/* ============================================
   SECTION TITLES
   ============================================ */

.section-title[b-xmqdc7nyge] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
}

.section-title svg[b-xmqdc7nyge] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
}

/* ============================================
   CREATE FORM
   ============================================ */

.create-section[b-xmqdc7nyge] {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 2rem;
    overflow: hidden;
}

.create-section[b-xmqdc7nyge]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 20%,
        rgba(var(--wl-gold-rgb), 0.8) 50%,
        rgba(var(--wl-gold-rgb), 0.5) 80%,
        transparent 100%);
}

.create-form[b-xmqdc7nyge] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    align-items: end;
}

.form-group[b-xmqdc7nyge] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-xmqdc7nyge] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.input-wrapper[b-xmqdc7nyge] {
    position: relative;
}

.input-wrapper input[b-xmqdc7nyge] {
    width: 100%;
    padding: 0.875rem 1rem;
    padding-right: 4rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.input-wrapper input:focus[b-xmqdc7nyge] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.1);
}

.input-wrapper input[b-xmqdc7nyge]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.3);
}

.char-count[b-xmqdc7nyge] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.3);
}

.select-wrapper[b-xmqdc7nyge] {
    position: relative;
}

.select-wrapper select[b-xmqdc7nyge] {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.9375rem;
    appearance: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.select-wrapper select:focus[b-xmqdc7nyge] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.1);
}

.select-arrow[b-xmqdc7nyge] {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    pointer-events: none;
}

.form-actions[b-xmqdc7nyge] {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

.btn-create[b-xmqdc7nyge] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-create:hover:not(:disabled)[b-xmqdc7nyge] {
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
    transform: translateY(-1px);
}

.btn-create:disabled[b-xmqdc7nyge] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-create svg[b-xmqdc7nyge] {
    width: 1rem;
    height: 1rem;
}

.spinner-small[b-xmqdc7nyge] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--wl-bg-primary), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-xmqdc7nyge 0.8s linear infinite;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-xmqdc7nyge] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 2rem;
    color: var(--wl-text-muted);
    position: relative;
    z-index: 1;
}

.empty-state svg[b-xmqdc7nyge] {
    width: 3rem;
    height: 3rem;
    opacity: 0.4;
}

.empty-state p[b-xmqdc7nyge] {
    font-size: 0.9375rem;
    margin: 0;
}

/* ============================================
   SERIES GRID
   ============================================ */

.series-list-section[b-xmqdc7nyge] {
    position: relative;
    z-index: 1;
}

.series-grid[b-xmqdc7nyge] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.series-card[b-xmqdc7nyge] {
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.series-card:hover[b-xmqdc7nyge] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.series-card.expanded[b-xmqdc7nyge] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.1);
}

.series-card-header[b-xmqdc7nyge] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.series-info[b-xmqdc7nyge] {
    flex: 1;
    min-width: 0;
}

.series-info .series-title[b-xmqdc7nyge] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.06em;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.series-meta[b-xmqdc7nyge] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* ============================================
   GENRE BADGES
   ============================================ */

.genre-badge[b-xmqdc7nyge] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-weight: 600;
}

.genre-badge.genre-romance[b-xmqdc7nyge] { background: rgba(236, 72, 153, 0.15); color: rgb(244, 114, 182); }
.genre-badge.genre-thriller[b-xmqdc7nyge] { background: rgba(239, 68, 68, 0.15); color: rgb(248, 113, 113); }
.genre-badge.genre-fantasy[b-xmqdc7nyge] { background: rgba(168, 85, 247, 0.15); color: rgb(192, 132, 252); }
.genre-badge.genre-scifi[b-xmqdc7nyge] { background: rgba(59, 130, 246, 0.15); color: rgb(96, 165, 250); }
.genre-badge.genre-horror[b-xmqdc7nyge] { background: rgba(107, 114, 128, 0.2); color: rgb(156, 163, 175); }
.genre-badge.genre-literaryfiction[b-xmqdc7nyge] { background: rgba(var(--wl-gold-rgb), 0.15); color: var(--wl-gold); }
.genre-badge.genre-historicalnovel[b-xmqdc7nyge] { background: rgba(180, 83, 9, 0.15); color: rgb(217, 119, 6); }
.genre-badge.genre-poetry[b-xmqdc7nyge] { background: rgba(147, 51, 234, 0.15); color: rgb(167, 139, 250); }
.genre-badge.genre-autobiography[b-xmqdc7nyge] { background: rgba(6, 182, 212, 0.15); color: rgb(34, 211, 238); }
.genre-badge.genre-selfhelp[b-xmqdc7nyge] { background: rgba(34, 197, 94, 0.15); color: rgb(74, 222, 128); }
.genre-badge.genre-lifestyle[b-xmqdc7nyge] { background: rgba(236, 72, 153, 0.1); color: rgb(251, 146, 195); }
.genre-badge.genre-experimental[b-xmqdc7nyge] { background: rgba(234, 179, 8, 0.15); color: rgb(250, 204, 21); }
.genre-badge.genre-essaycollection[b-xmqdc7nyge] { background: rgba(107, 114, 128, 0.15); color: rgb(209, 213, 219); }
.genre-badge.genre-truecrime[b-xmqdc7nyge] { background: rgba(239, 68, 68, 0.1); color: rgb(252, 165, 165); }

/* ============================================
   STATUS & VOLUME BADGES
   ============================================ */

.volume-count[b-xmqdc7nyge] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.status-badge[b-xmqdc7nyge] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.625rem;
    border-radius: 9999px;
    font-weight: 600;
}

.status-badge.ongoing[b-xmqdc7nyge] {
    background: rgba(59, 130, 246, 0.15);
    color: rgb(96, 165, 250);
}

.status-badge.complete[b-xmqdc7nyge] {
    background: rgba(34, 197, 94, 0.15);
    color: rgb(74, 222, 128);
}

/* ============================================
   LOYALTY BAR
   ============================================ */

.loyalty-section[b-xmqdc7nyge] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    min-width: 8rem;
    flex-shrink: 0;
}

.loyalty-label[b-xmqdc7nyge] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.loyalty-bar[b-xmqdc7nyge] {
    width: 100%;
    height: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.loyalty-fill[b-xmqdc7nyge] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), rgba(var(--wl-gold-rgb), 0.8));
    border-radius: 3px;
    transition: width 0.5s ease;
}

.loyalty-value[b-xmqdc7nyge] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: var(--wl-gold);
    letter-spacing: 0.04em;
}

/* ============================================
   EXPAND ARROW
   ============================================ */

.expand-arrow[b-xmqdc7nyge] {
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.expand-arrow.rotated[b-xmqdc7nyge] {
    transform: rotate(180deg);
}

/* ============================================
   SERIES DETAIL (EXPANDED)
   ============================================ */

.series-detail[b-xmqdc7nyge] {
    padding: 0 1.5rem 1.25rem;
    border-top: 1px solid var(--wl-border-subtle);
    animation: fadeSlideIn-b-xmqdc7nyge 0.3s ease;
}

@keyframes fadeSlideIn-b-xmqdc7nyge {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.volumes-list[b-xmqdc7nyge] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1rem;
}

.volume-item[b-xmqdc7nyge] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
}

.volume-title[b-xmqdc7nyge] {
    font-size: 0.875rem;
    color: var(--wl-text-primary);
}

.volume-quality[b-xmqdc7nyge] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--wl-gold);
    font-weight: 500;
}

.volume-quality svg[b-xmqdc7nyge] {
    width: 0.875rem;
    height: 0.875rem;
}

.no-volumes[b-xmqdc7nyge] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    font-style: italic;
    margin: 1rem 0 0 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .series-page[b-xmqdc7nyge] {
        padding: 0 1rem 3rem;
    }

    .create-form[b-xmqdc7nyge] {
        grid-template-columns: 1fr;
    }

    .series-card-header[b-xmqdc7nyge] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .loyalty-section[b-xmqdc7nyge] {
        width: 100%;
        align-items: flex-start;
    }

    .expand-arrow[b-xmqdc7nyge] {
        position: absolute;
        right: 1rem;
        top: 1.25rem;
    }

    .series-card-header[b-xmqdc7nyge] {
        position: relative;
        padding-right: 3rem;
    }
}
/* /Components/Pages/Career/Literature/Writing.razor.rz.scp.css */
/* ============================================
   WRITING SESSION PAGE
   Theme: Warm Gold / Literary Elegance
   Chapter List + Typewriter Animation
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.writing-page[b-frz4vumtgi] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.page-atmosphere[b-frz4vumtgi] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 50%);
}

/* ============================================
   LOADING & ERROR STATES
   ============================================ */

.loading-container[b-frz4vumtgi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    color: var(--wl-text-muted);
}

.loading-spinner[b-frz4vumtgi] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-frz4vumtgi 0.8s linear infinite;
}

@keyframes spin-b-frz4vumtgi {
    to { transform: rotate(360deg); }
}

.error-state[b-frz4vumtgi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 1.5rem;
    color: var(--wl-text-muted);
    text-align: center;
}

.back-btn[b-frz4vumtgi] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(var(--wl-gold-rgb), 0.15);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.75rem;
    color: var(--wl-gold);
    text-decoration: none;
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.back-btn:hover[b-frz4vumtgi] {
    background: rgba(var(--wl-gold-rgb), 0.25);
}

/* ============================================
   HEADER
   ============================================ */

.writing-header[b-frz4vumtgi] {
    position: relative;
    z-index: 1;
    padding: 2rem 0 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    background-image: var(--wl-spotlight);
    background-repeat: no-repeat;
}

.writing-header[b-frz4vumtgi]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-frz4vumtgi] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.back-link[b-frz4vumtgi] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: all 0.3s ease;
}

.back-link:hover[b-frz4vumtgi] {
    color: var(--wl-gold);
}

.back-link svg[b-frz4vumtgi] {
    width: 1rem;
    height: 1rem;
}

.header-main[b-frz4vumtgi] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-frz4vumtgi] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-frz4vumtgi] {
    width: 1.75rem;
    height: 1.75rem;
}

.header-text h1[b-frz4vumtgi] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.08em;
    background-image: linear-gradient(160deg, var(--wl-champagne) 0%, var(--wl-gold) 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--wl-gold);
    filter: drop-shadow(0 1px 12px rgba(var(--wl-gold-rgb), 0.25));
    margin: 0;
    line-height: 1;
}

.header-meta[b-frz4vumtgi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* ============================================
   BADGES
   ============================================ */

.genre-badge[b-frz4vumtgi],
.status-badge[b-frz4vumtgi],
.quality-badge[b-frz4vumtgi] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.genre-badge[b-frz4vumtgi] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.status-badge[b-frz4vumtgi] {
    background: rgba(var(--wl-champagne-rgb), 0.10);
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.3);
    color: var(--wl-champagne);
}

.quality-badge[b-frz4vumtgi] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.quality-badge svg[b-frz4vumtgi] {
    width: 0.875rem;
    height: 0.875rem;
}

/* ============================================
   SECTION LABELS
   ============================================ */

.section-label[b-frz4vumtgi] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wl-champagne);
    margin-bottom: 0.75rem;
}

.section-label[b-frz4vumtgi]::before {
    content: "✦";
    color: var(--wl-gold);
    font-size: 0.85em;
    margin-right: 0.6em;
}

/* ============================================
   BOOK PROGRESS
   ============================================ */

.book-progress-bar-container[b-frz4vumtgi] {
    max-width: 34rem;
    margin-top: 0.25rem;
}

.book-progress-info[b-frz4vumtgi] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--wl-text-secondary);
    margin-bottom: 0.5rem;
}

.progress-bar[b-frz4vumtgi] {
    height: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 999px;
    overflow: hidden;
}

.progress-fill[b-frz4vumtgi] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), rgba(var(--wl-gold-rgb), 0.8));
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.progress-fill.complete[b-frz4vumtgi] {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

/* ============================================
   CHAPTER LIST - Editorial Manuscript Tracker
   ============================================ */

.chapters-section[b-frz4vumtgi] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.chapter-list[b-frz4vumtgi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid var(--wl-border-medium);
}

/* --- Chapter Row --- */
.ch[b-frz4vumtgi] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.125rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.85);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    animation: chSlideIn-b-frz4vumtgi 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes chSlideIn-b-frz4vumtgi {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ch:hover[b-frz4vumtgi] {
    background: rgba(var(--wl-bg-secondary-rgb), 1);
}

.ch--selected[b-frz4vumtgi] {
    background: rgba(var(--wl-gold-rgb), 0.06) !important;
    box-shadow: inset 3px 0 0 var(--wl-gold);
}

.ch--done[b-frz4vumtgi] {
    box-shadow: inset 3px 0 0 #22c55e;
}

.ch--done.ch--selected[b-frz4vumtgi] {
    box-shadow: inset 3px 0 0 var(--wl-gold);
}

.ch--active[b-frz4vumtgi] {
    background:
        radial-gradient(ellipse 70% 130% at 50% -20%, rgba(var(--wl-gold-rgb), 0.08), transparent 70%),
        rgba(var(--wl-gold-rgb), 0.03);
    box-shadow: inset 3px 0 0 rgba(var(--wl-gold-rgb), 0.55);
}

/* --- Chapter Number + Check --- */
.ch__num-wrap[b-frz4vumtgi] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
    min-width: fit-content;
}

.ch__num[b-frz4vumtgi] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    color: var(--wl-text-secondary);
    letter-spacing: 0.05em;
    line-height: 1;
    white-space: nowrap;
}

.ch--done .ch__num[b-frz4vumtgi] {
    color: var(--wl-text-muted);
}

.ch__check[b-frz4vumtgi] {
    width: 0.9375rem;
    height: 0.9375rem;
    color: #22c55e;
    flex-shrink: 0;
    filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.5));
}

/* --- Body: Tags + Progress --- */
.ch__body[b-frz4vumtgi] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ch__tags[b-frz4vumtgi] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.ch__type[b-frz4vumtgi] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Premiere tonal family: metals for structure, crimson for drama,
   gold for the spotlight moment. Green stays reserved for "done". */
.type-setup[b-frz4vumtgi] {
    background: rgba(192, 192, 192, 0.10);
    color: var(--wl-silver);
}

.type-risingaction[b-frz4vumtgi] {
    background: rgba(var(--wl-champagne-rgb), 0.10);
    color: var(--wl-champagne);
}

.type-twist[b-frz4vumtgi] {
    background: rgba(var(--wl-crimson-rgb), 0.22);
    color: var(--wl-crimson-light);
}

.type-climax[b-frz4vumtgi] {
    background: rgba(var(--wl-gold-rgb), 0.14);
    color: var(--wl-gold);
    box-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.15);
}

.type-resolution[b-frz4vumtgi] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.type-interlude[b-frz4vumtgi] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: var(--wl-text-secondary);
}

.ch__tone[b-frz4vumtgi] {
    font-size: 0.625rem;
    font-weight: 500;
    color: var(--wl-text-muted);
    letter-spacing: 0.02em;
}

/* --- Inline Progress (incomplete chapters only) --- */
.ch__progress-wrap[b-frz4vumtgi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ch__progress-track[b-frz4vumtgi] {
    flex: 1;
    height: 3px;
    max-width: 120px;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 999px;
    overflow: hidden;
}

.ch__progress-fill[b-frz4vumtgi] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), rgba(var(--wl-gold-rgb), 0.7));
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ch__progress-label[b-frz4vumtgi] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--wl-text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* --- Right: Score + Action --- */
.ch__right[b-frz4vumtgi] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}

/* Quality Score - the hero element */
.ch__score-wrap[b-frz4vumtgi] {
    display: flex;
    align-items: baseline;
    gap: 1px;
    min-width: 3.25rem;
    justify-content: flex-end;
}

.ch__score[b-frz4vumtgi] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    letter-spacing: 0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ch__score.tier-legendary[b-frz4vumtgi] {
    color: var(--wl-gold);
    text-shadow: 0 0 8px rgba(var(--wl-gold-rgb), 0.4);
}

.ch__score.tier-great[b-frz4vumtgi] {
    color: #4ade80;
}

.ch__score.tier-decent[b-frz4vumtgi] {
    color: var(--wl-champagne);
}

.ch__score.tier-low[b-frz4vumtgi] {
    color: var(--wl-text-muted);
}

.ch__score--unrated[b-frz4vumtgi] {
    color: var(--wl-text-muted);
    font-size: 1.125rem;
    opacity: 0.5;
}

.ch__score-max[b-frz4vumtgi] {
    font-size: 0.625rem;
    color: var(--wl-text-muted);
    font-weight: 500;
    opacity: 0.6;
}

/* --- Buttons --- */
.ch__btn[b-frz4vumtgi] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    border: none;
    white-space: nowrap;
}

.ch__btn svg[b-frz4vumtgi] {
    width: 0.75rem;
    height: 0.75rem;
}

.ch__btn:disabled[b-frz4vumtgi] {
    opacity: 0.35;
    cursor: not-allowed;
}

.ch__btn--write[b-frz4vumtgi] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    color: var(--wl-bg-primary);
    box-shadow: 0 2px 8px rgba(var(--wl-gold-rgb), 0.3);
}

.ch__btn--write:hover:not(:disabled)[b-frz4vumtgi] {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(var(--wl-gold-rgb), 0.45);
}

.ch__btn--rewrite[b-frz4vumtgi] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
}

.ch__btn--rewrite:hover:not(:disabled)[b-frz4vumtgi] {
    background: rgba(var(--wl-gold-rgb), 0.22);
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--wl-gold-rgb), 0.2);
}

/* Locked chapters */
.ch__locked[b-frz4vumtgi] {
    color: var(--wl-text-muted);
    opacity: 0.25;
}

.ch__locked svg[b-frz4vumtgi] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   SESSION CONFIG (Location + Intensity)
   ============================================ */

@keyframes fadeSlideIn-b-frz4vumtgi {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.session-config[b-frz4vumtgi] {
    position: relative;
    z-index: 1;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
    animation: fadeSlideIn-b-frz4vumtgi 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.config-header[b-frz4vumtgi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.config-title[b-frz4vumtgi] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
}

.btn-close-config[b-frz4vumtgi] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 0.5rem;
    color: var(--wl-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-config:hover[b-frz4vumtgi] {
    background: rgba(var(--wl-contrast-rgb), 0.15);
    color: var(--wl-text-primary);
}

.btn-close-config svg[b-frz4vumtgi] {
    width: 1rem;
    height: 1rem;
}

.config-group[b-frz4vumtgi] {
    margin-bottom: 1.25rem;
}

/* ============================================
   LOCATION SELECTOR
   ============================================ */

.location-grid[b-frz4vumtgi] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.625rem;
}

.location-card[b-frz4vumtgi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 0.5rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.6);
    border: 2px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--wl-text-primary);
    text-align: center;
}

.location-card:hover[b-frz4vumtgi] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    background: rgba(var(--wl-gold-rgb), 0.05);
    transform: translateY(-2px);
}

.location-card.selected[b-frz4vumtgi] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    box-shadow: 0 0 12px rgba(var(--wl-gold-rgb), 0.15);
}

.location-icon[b-frz4vumtgi] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-text-secondary);
    transition: color 0.3s ease;
}

.location-card.selected .location-icon[b-frz4vumtgi] {
    color: var(--wl-gold);
}

.location-icon svg[b-frz4vumtgi] {
    width: 1.5rem;
    height: 1.5rem;
}

.location-name[b-frz4vumtgi] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.location-cost[b-frz4vumtgi] {
    font-size: 0.6875rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: var(--wl-text-muted);
}

.location-cost.free[b-frz4vumtgi] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

/* ============================================
   INTENSITY SELECTOR
   ============================================ */

.intensity-grid[b-frz4vumtgi] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
}

.intensity-btn[b-frz4vumtgi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.6);
    border: 2px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--wl-text-primary);
}

.intensity-btn:hover[b-frz4vumtgi] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    background: rgba(var(--wl-gold-rgb), 0.05);
}

.intensity-btn.selected[b-frz4vumtgi] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    box-shadow: 0 0 12px rgba(var(--wl-gold-rgb), 0.15);
}

.intensity-name[b-frz4vumtgi] {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.intensity-cost[b-frz4vumtgi] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
}

/* ============================================
   WRITE BUTTON & ACTION
   ============================================ */

.write-action[b-frz4vumtgi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.energy-warning[b-frz4vumtgi] {
    font-size: 0.8125rem;
    color: #ef4444;
    margin: 0;
}

.btn-write[b-frz4vumtgi] {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 2.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    border: none;
    border-radius: 0.75rem;
    color: var(--wl-bg-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-write:hover:not(:disabled)[b-frz4vumtgi] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(var(--wl-gold-rgb), 0.4);
}

.btn-write:active:not(:disabled)[b-frz4vumtgi] {
    transform: translateY(0);
}

.btn-write:disabled[b-frz4vumtgi] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-write svg[b-frz4vumtgi] {
    width: 1.125rem;
    height: 1.125rem;
}

.spinner[b-frz4vumtgi] {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-frz4vumtgi 0.8s linear infinite;
}

/* ============================================
   THE MANUSCRIPT ROLL - Multi-phase Writing Modal
   Inspired by BuzzRollModal's phone + needle pattern
   but themed as a literary manuscript with flow meter
   ============================================ */

.ms[b-frz4vumtgi] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Top-align on the scroll axis - centering a flex child taller than an
       overflow:auto container clips its top and makes it unscrollable. Short
       content is re-centered via margin:auto on .ms__wrap below. */
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 24px 16px;
    animation: msBackdropIn-b-frz4vumtgi 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes msBackdropIn-b-frz4vumtgi {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ms__bg[b-frz4vumtgi] {
    /* fixed (not absolute) so the blurred backdrop stays pinned to the viewport
       while .ms scrolls a long report. */
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ms__wrap[b-frz4vumtgi] {
    position: relative;
    z-index: 1;
    width: clamp(380px, 36vw, 560px);
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centers short content vertically; tall content scrolls within .ms instead. */
    margin: auto 0;
    gap: 1.25rem;
    animation: msWrapIn-b-frz4vumtgi 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes msWrapIn-b-frz4vumtgi {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* --- The Manuscript Page Frame --- */
.ms__page[b-frz4vumtgi] {
    position: relative;
    width: 100%;
    background:
        radial-gradient(ellipse 90% 55% at 50% -5%, rgba(var(--wl-champagne-rgb), 0.07) 0%, transparent 60%),
        linear-gradient(
        165deg,
        rgba(var(--wl-bg-modal-rgb), 0.92) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.96) 100%
    );
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 1.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 50px 100px -20px var(--wl-shadow-color),
        0 0 0 1px rgba(var(--wl-contrast-rgb), 0.05),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.06),
        0 0 80px -10px rgba(var(--wl-gold-rgb), 0.08);
    transition: box-shadow 0.6s ease;
}

.ms--writing .ms__page[b-frz4vumtgi] {
    box-shadow:
        0 50px 100px -20px var(--wl-shadow-color),
        0 0 0 1px rgba(var(--wl-contrast-rgb), 0.05),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.06),
        0 0 120px -10px rgba(var(--wl-gold-rgb), 0.15);
}

.ms--reveal .ms__page[b-frz4vumtgi],
.ms--result .ms__page[b-frz4vumtgi] {
    box-shadow:
        0 50px 100px -20px var(--wl-shadow-color),
        0 0 0 1px rgba(var(--wl-contrast-rgb), 0.05),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.06),
        0 0 160px -10px rgba(var(--wl-gold-rgb), 0.2);
}

/* --- Page Header: Quill + Chapter --- */
.ms__top[b-frz4vumtgi] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px 10px;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.ms__quill[b-frz4vumtgi] {
    width: 1rem;
    height: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.ms__ch-label[b-frz4vumtgi] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.18em;
    color: var(--wl-champagne);
}

.ms__rewrite-tag[b-frz4vumtgi] {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-gold);
    padding: 2px 8px;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 4px;
    margin-left: auto;
}

/* --- Typewriter Area --- */
.ms__text-area[b-frz4vumtgi] {
    padding: 20px 24px 16px;
    min-height: 100px;
    font-family: 'Courier New', Courier, monospace;
    position: relative;
}

.ms__line[b-frz4vumtgi] {
    font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
    font-style: italic;
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(var(--wl-champagne-rgb), 0.8);
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    animation: msLineIn-b-frz4vumtgi 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes msLineIn-b-frz4vumtgi {
    from {
        opacity: 0;
        max-width: 0;
    }
    to {
        opacity: 1;
        max-width: 100%;
    }
}

.ms__cursor[b-frz4vumtgi] {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: var(--wl-gold);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: msBlink-b-frz4vumtgi 0.6s step-end infinite;
}

@keyframes msBlink-b-frz4vumtgi {
    50% { opacity: 0; }
}

/* --- FLOW METER - The tension engine --- */
.ms__meter[b-frz4vumtgi] {
    padding: 12px 20px 20px;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    background: linear-gradient(
        0deg,
        rgba(var(--wl-bg-modal-deep-rgb), 0.98) 0%,
        rgba(var(--wl-bg-modal-rgb), 0.9) 100%
    );
}

.ms__meter-head[b-frz4vumtgi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ms__meter-title[b-frz4vumtgi] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.15em;
    color: var(--wl-text-muted);
}

.ms__track[b-frz4vumtgi] {
    position: relative;
    height: 32px;
    border-radius: 16px;
    overflow: visible;
    display: flex;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.ms__zone[b-frz4vumtgi] {
    height: 100%;
    width: 25%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ms__zone:first-child[b-frz4vumtgi] {
    border-radius: 16px 0 0 16px;
}

.ms__zone:last-of-type[b-frz4vumtgi] {
    border-radius: 0 16px 16px 0;
}

.ms__zone--block[b-frz4vumtgi] {
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.12) 0%, rgba(239, 68, 68, 0.04) 100%);
}

.ms__zone--grind[b-frz4vumtgi] {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.04) 0%, rgba(245, 158, 11, 0.1) 50%, rgba(245, 158, 11, 0.04) 100%);
}

.ms__zone--flow[b-frz4vumtgi] {
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.04) 0%, rgba(34, 197, 94, 0.1) 50%, rgba(34, 197, 94, 0.04) 100%);
}

.ms__zone--muse[b-frz4vumtgi] {
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.04) 0%, rgba(var(--wl-gold-rgb), 0.15) 100%);
}

/* Zone divider lines */
.ms__zone + .ms__zone[b-frz4vumtgi]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(var(--wl-contrast-rgb), 0.12);
}

.ms__zlabel[b-frz4vumtgi] {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 1;
}

.ms__zone--block .ms__zlabel[b-frz4vumtgi] { color: rgba(239, 68, 68, 0.45); }
.ms__zone--grind .ms__zlabel[b-frz4vumtgi] { color: rgba(245, 158, 11, 0.45); }
.ms__zone--flow .ms__zlabel[b-frz4vumtgi] { color: rgba(34, 197, 94, 0.45); }
.ms__zone--muse .ms__zlabel[b-frz4vumtgi] { color: rgba(var(--wl-gold-rgb), 0.45); }

/* --- Needle - The heart-racing element --- */
.ms__needle[b-frz4vumtgi] {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 3px;
    transform: translateX(-50%);
    z-index: 5;
    transition: none;
    will-change: left;
}

.ms__needle--stopped[b-frz4vumtgi] {
    transition: none;
}

.ms__needle-bar[b-frz4vumtgi] {
    position: absolute;
    inset: 0;
    background: var(--wl-gold);
    border-radius: 2px;
    box-shadow:
        0 0 8px rgba(var(--wl-gold-rgb), 0.6),
        0 0 20px rgba(var(--wl-gold-rgb), 0.3);
}

.ms__needle-glow[b-frz4vumtgi] {
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -8px;
    right: -8px;
    background: radial-gradient(
        ellipse at center,
        rgba(var(--wl-gold-rgb), 0.3) 0%,
        transparent 70%
    );
    pointer-events: none;
    animation: msNeedleGlow-b-frz4vumtgi 0.8s ease-in-out infinite alternate;
}

.ms__needle--stopped .ms__needle-glow[b-frz4vumtgi] {
    animation: none;
}

@keyframes msNeedleGlow-b-frz4vumtgi {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

/* --- Flash effect --- */
.ms__flash[b-frz4vumtgi] {
    position: absolute;
    inset: 0;
    background: white;
    border-radius: 1.5rem;
    opacity: 0;
    pointer-events: none;
    animation: msFlash-b-frz4vumtgi 0.5s ease-out;
    z-index: 10;
}

@keyframes msFlash-b-frz4vumtgi {
    0% { opacity: 0.7; }
    100% { opacity: 0; }
}

/* ============================================
   PANEL - Styled container for reveal + result
   ============================================ */

.ms__panel[b-frz4vumtgi] {
    width: 100%;
    background: linear-gradient(
        165deg,
        rgba(var(--wl-bg-modal-rgb), 0.88) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.92) 100%
    );
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 1.25rem;
    padding: 1.25rem 1.25rem 1rem;
    box-shadow:
        0 20px 60px -15px var(--wl-shadow-color),
        0 0 0 1px rgba(var(--wl-contrast-rgb), 0.04),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
    animation: msPanelIn-b-frz4vumtgi 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes msPanelIn-b-frz4vumtgi {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(16px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================
   REVEAL SECTION - Flow badge + quality mod
   ============================================ */

.ms__reveal[b-frz4vumtgi] {
    text-align: center;
    animation: msRevealIn-b-frz4vumtgi 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes msRevealIn-b-frz4vumtgi {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(12px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.ms__flow-badge[b-frz4vumtgi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.75rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

.ms__flow-name[b-frz4vumtgi] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Badge variants */
.ms__flow-badge--block[b-frz4vumtgi] {
    background: rgba(239, 68, 68, 0.15);
    border: 2px solid rgba(239, 68, 68, 0.4);
    color: #ef4444;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.15);
    animation: msBadgePulse-b-frz4vumtgi 2s ease-in-out infinite;
}

.ms__flow-badge--grind[b-frz4vumtgi] {
    background: rgba(245, 158, 11, 0.15);
    border: 2px solid rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.15);
    animation: msBadgePulse-b-frz4vumtgi 2s ease-in-out infinite;
}

.ms__flow-badge--flow[b-frz4vumtgi] {
    background: rgba(34, 197, 94, 0.15);
    border: 2px solid rgba(34, 197, 94, 0.4);
    color: #22c55e;
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.15);
    animation: msBadgePulse-b-frz4vumtgi 2s ease-in-out infinite;
}

.ms__flow-badge--muse[b-frz4vumtgi] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(168, 85, 247, 0.15) 100%);
    border: 2px solid rgba(var(--wl-gold-rgb), 0.5);
    color: var(--wl-gold);
    box-shadow: 0 0 40px rgba(var(--wl-gold-rgb), 0.25);
    animation: msBadgePulse-b-frz4vumtgi 1.5s ease-in-out infinite, msMuseGlow-b-frz4vumtgi 3s ease-in-out infinite;
}

@keyframes msBadgePulse-b-frz4vumtgi {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

@keyframes msMuseGlow-b-frz4vumtgi {
    0%, 100% { box-shadow: 0 0 25px rgba(var(--wl-gold-rgb), 0.2); }
    50% { box-shadow: 0 0 50px rgba(var(--wl-gold-rgb), 0.4); }
}

.ms__flavor[b-frz4vumtgi] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    font-style: italic;
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.ms__qmod[b-frz4vumtgi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.05rem;
    margin-bottom: 0.25rem;
}

/* Small muted caption so the flow modifier reads as a bonus, not the chapter score */
.ms__qmod-label[b-frz4vumtgi] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.ms__qmod-value[b-frz4vumtgi] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.05em;
    line-height: 1;
}

.ms__qmod--positive .ms__qmod-value[b-frz4vumtgi] { color: #4ade80; }
.ms__qmod--negative .ms__qmod-value[b-frz4vumtgi] { color: #ef4444; }
.ms__qmod--neutral .ms__qmod-value[b-frz4vumtgi] { color: var(--wl-text-muted); }

/* ============================================
   RESULT SECTION - Full breakdown inside modal
   ============================================ */

.ms__result[b-frz4vumtgi] {
    text-align: center;
    animation: msResultIn-b-frz4vumtgi 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes msResultIn-b-frz4vumtgi {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ms__stats[b-frz4vumtgi] {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.ms__stat[b-frz4vumtgi] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
}

.ms__stat svg[b-frz4vumtgi] {
    width: 1rem;
    height: 1rem;
}

.ms__stat--progress[b-frz4vumtgi] {
    color: #22c55e;
}

.ms__bonus[b-frz4vumtgi] {
    font-size: 0.75rem;
    color: #22c55e;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 999px;
    display: inline-block;
    margin-bottom: 0.75rem;
}

/* Quality Breakdown */
.ms__breakdown[b-frz4vumtgi] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
    text-align: left;
}

.ms__breakdown-title[b-frz4vumtgi] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wl-gold);
    margin-bottom: 0.5rem;
}

.ms__brow[b-frz4vumtgi] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--wl-text-secondary);
    padding: 0.1875rem 0;
}

.ms__brow--bonus span:last-child[b-frz4vumtgi] {
    color: #22c55e;
    font-weight: 600;
}

.ms__brow--total[b-frz4vumtgi] {
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    font-weight: 700;
    color: var(--wl-gold);
    font-size: 0.9375rem;
}

.ms__factor-value[b-frz4vumtgi] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ms__factor-value--pos[b-frz4vumtgi] {
    color: var(--wl-green);
}

.ms__factor-value--neg[b-frz4vumtgi] {
    color: #e57373;
}

.ms__tips[b-frz4vumtgi] {
    margin-top: 0.625rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ms__tip[b-frz4vumtgi] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--wl-text-muted);
    font-style: italic;
    text-align: left;
}

.ms__tip svg[b-frz4vumtgi] {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    margin-top: 0.0625rem;
    color: var(--wl-gold);
}

/* Rewrite Comparison */
.ms__compare[b-frz4vumtgi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 0.75rem;
    padding: 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    border-radius: 0.75rem;
}

.ms__compare-col[b-frz4vumtgi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.ms__compare-label[b-frz4vumtgi] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
    font-weight: 600;
}

.ms__compare-val[b-frz4vumtgi] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.05em;
}

.ms__compare-val--old[b-frz4vumtgi] { color: var(--wl-text-muted); }
.ms__compare-val--new[b-frz4vumtgi] { color: var(--wl-gold); }

.ms__compare-arrow[b-frz4vumtgi] {
    color: var(--wl-text-muted);
}

.ms__compare-arrow svg[b-frz4vumtgi] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Rewrite Verdict */
.ms__verdict[b-frz4vumtgi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 0.375rem 0.875rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.ms__verdict--best[b-frz4vumtgi] {
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
    animation: msNewBest-b-frz4vumtgi 0.8s ease-in-out;
}

.ms__verdict--worse[b-frz4vumtgi] {
    color: var(--wl-red);
    background: rgba(var(--wl-red-rgb), 0.12);
}

.ms__verdict svg[b-frz4vumtgi] {
    width: 0.875rem;
    height: 0.875rem;
}

@keyframes msNewBest-b-frz4vumtgi {
    0% { transform: scale(0.9); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* Continue Button */
.ms__continue[b-frz4vumtgi] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 0.25rem;
    padding: 12px 32px;
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(var(--wl-gold-rgb), 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    animation: msContinueIn-b-frz4vumtgi 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

.ms__continue:hover[b-frz4vumtgi] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(var(--wl-gold-rgb), 0.45);
}

.ms__continue:active[b-frz4vumtgi] {
    transform: translateY(-1px);
}

.ms__continue svg[b-frz4vumtgi] {
    width: 16px;
    height: 16px;
}

@keyframes msContinueIn-b-frz4vumtgi {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Flow State Page Glow Variations --- */
.ms--flow-block .ms__page[b-frz4vumtgi] {
    box-shadow:
        0 50px 100px -20px var(--wl-shadow-color),
        0 0 0 1px rgba(239, 68, 68, 0.1),
        0 0 80px -10px rgba(239, 68, 68, 0.12);
}

.ms--flow-grinding .ms__page[b-frz4vumtgi] {
    box-shadow:
        0 50px 100px -20px var(--wl-shadow-color),
        0 0 0 1px rgba(245, 158, 11, 0.1),
        0 0 80px -10px rgba(245, 158, 11, 0.12);
}

.ms--flow-flow .ms__page[b-frz4vumtgi] {
    box-shadow:
        0 50px 100px -20px var(--wl-shadow-color),
        0 0 0 1px rgba(34, 197, 94, 0.1),
        0 0 80px -10px rgba(34, 197, 94, 0.12);
}

.ms--flow-inspired .ms__page[b-frz4vumtgi] {
    box-shadow:
        0 50px 100px -20px var(--wl-shadow-color),
        0 0 0 1px rgba(var(--wl-gold-rgb), 0.15),
        0 0 120px -10px rgba(var(--wl-gold-rgb), 0.2);
    animation: msInspiredGlow-b-frz4vumtgi 2.5s ease-in-out infinite;
}

@keyframes msInspiredGlow-b-frz4vumtgi {
    0%, 100% {
        box-shadow:
            0 50px 100px -20px var(--wl-shadow-color),
            0 0 0 1px rgba(var(--wl-gold-rgb), 0.15),
            0 0 80px -10px rgba(var(--wl-gold-rgb), 0.15);
    }
    50% {
        box-shadow:
            0 50px 100px -20px var(--wl-shadow-color),
            0 0 0 1px rgba(var(--wl-gold-rgb), 0.25),
            0 0 160px -10px rgba(var(--wl-gold-rgb), 0.3);
    }
}

/* ============================================
   COMPLETION SECTION
   ============================================ */

.completion-section[b-frz4vumtgi] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3rem 1.5rem;
    animation: fadeSlideIn-b-frz4vumtgi 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.completion-icon[b-frz4vumtgi] {
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.05) 100%);
    border: 2px solid rgba(34, 197, 94, 0.4);
    border-radius: 50%;
    color: #22c55e;
    margin-bottom: 1.5rem;
    animation: completionPop-b-frz4vumtgi 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes completionPop-b-frz4vumtgi {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.completion-icon svg[b-frz4vumtgi] {
    width: 2.5rem;
    height: 2.5rem;
}

.completion-section h2[b-frz4vumtgi] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem 0;
}

.completion-section p[b-frz4vumtgi] {
    font-size: 0.9375rem;
    color: var(--wl-text-muted);
    margin: 0 0 2rem 0;
}

.btn-primary[b-frz4vumtgi] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    border: none;
    border-radius: 0.75rem;
    color: var(--wl-bg-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-primary:hover[b-frz4vumtgi] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(var(--wl-gold-rgb), 0.4);
}

.btn-primary svg[b-frz4vumtgi] {
    width: 1.125rem;
    height: 1.125rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .writing-page[b-frz4vumtgi] {
        padding: 0 1rem 3rem;
    }

    .header-text h1[b-frz4vumtgi] {
        font-size: 1.5rem;
    }

    .header-main[b-frz4vumtgi] {
        gap: 0.75rem;
    }

    .header-icon[b-frz4vumtgi] {
        width: 2.75rem;
        height: 2.75rem;
    }

    .header-icon svg[b-frz4vumtgi] {
        width: 1.375rem;
        height: 1.375rem;
    }

    .ch[b-frz4vumtgi] {
        padding: 0.5rem 0.625rem;
        gap: 0.5rem;
    }

    .ch__tags[b-frz4vumtgi] {
        gap: 0.25rem;
    }

    .ch__score[b-frz4vumtgi] {
        font-size: 1.125rem;
    }

    .ch__btn[b-frz4vumtgi] {
        padding: 0.25rem 0.5rem;
        font-size: 0.625rem;
    }

    .ch__btn svg[b-frz4vumtgi] {
        display: none;
    }

    .location-grid[b-frz4vumtgi] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }

    .intensity-grid[b-frz4vumtgi] {
        grid-template-columns: 1fr;
    }

    /* .ms renders inside <main> (relative z-0), so its backdrop is trapped BELOW the
       fixed top bar (h-16 = 64px, z-500) and the bottom nav (z-50). Reserve their
       heights as padding so the modal sits in the visible gap and its close button
       (.ms__continue) clears the bottom nav. 100dvh dodges iOS toolbar clipping;
       .ms already scrolls (overflow-y:auto) so long reports stay reachable. */
    .ms[b-frz4vumtgi] {
        height: 100dvh;
        padding: 72px 8px 92px;
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    }

    .ms__wrap[b-frz4vumtgi] {
        max-width: calc(100vw - 16px);
    }

    .ms__compare[b-frz4vumtgi] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .ms__compare-arrow[b-frz4vumtgi] {
        transform: rotate(90deg);
    }

    .btn-write[b-frz4vumtgi] {
        width: 100%;
    }
}

/* ============================================
   REWRITE CONFIRM MODAL
   ============================================ */

.modal-backdrop[b-frz4vumtgi] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-frz4vumtgi 0.2s ease;
}

.rw-confirm[b-frz4vumtgi] {
    background: linear-gradient(180deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    width: min(420px, 90vw);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 30px rgba(var(--wl-gold-rgb), 0.08);
    animation: slideUp-b-frz4vumtgi 0.25s ease;
}

.rw-confirm__header[b-frz4vumtgi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
}

.rw-confirm__header h3[b-frz4vumtgi] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.rw-confirm__close[b-frz4vumtgi] {
    background: none;
    border: none;
    color: var(--wl-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.5rem;
    transition: color 0.15s, background 0.15s;
}

.rw-confirm__close:hover[b-frz4vumtgi] {
    color: var(--wl-text-primary);
    background: rgba(var(--wl-contrast-rgb), 0.08);
}

.rw-confirm__close svg[b-frz4vumtgi] {
    width: 20px;
    height: 20px;
}

.rw-confirm__body[b-frz4vumtgi] {
    padding: 1.5rem;
    text-align: center;
}

.rw-confirm__icon[b-frz4vumtgi] {
    margin: 0 auto 1rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--wl-gold-rgb), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rw-confirm__icon svg[b-frz4vumtgi] {
    width: 24px;
    height: 24px;
    color: var(--wl-gold);
}

.rw-confirm__chapter[b-frz4vumtgi] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem;
}

.rw-confirm__desc[b-frz4vumtgi] {
    font-size: 0.9rem;
    color: var(--wl-text-muted);
    margin: 0;
    line-height: 1.5;
}

.rw-confirm__score[b-frz4vumtgi] {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 0.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rw-confirm__score-label[b-frz4vumtgi] {
    font-size: 0.85rem;
    color: var(--wl-text-muted);
}

.rw-confirm__score-value[b-frz4vumtgi] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.rw-confirm__footer[b-frz4vumtgi] {
    display: flex;
    gap: 0.75rem;
    padding: 0 1.5rem 1.5rem;
}

.rw-confirm__btn[b-frz4vumtgi] {
    flex: 1;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.rw-confirm__btn--cancel[b-frz4vumtgi] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
    color: var(--wl-text-secondary);
}

.rw-confirm__btn--cancel:hover[b-frz4vumtgi] {
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border-color: rgba(var(--wl-contrast-rgb), 0.25);
}

.rw-confirm__btn--confirm[b-frz4vumtgi] {
    background: linear-gradient(135deg, var(--wl-red), color-mix(in srgb, var(--wl-red) 80%, black));
    border: none;
    color: white;
}

.rw-confirm__btn--confirm:hover:not(:disabled)[b-frz4vumtgi] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.rw-confirm__btn:disabled[b-frz4vumtgi] {
    opacity: 0.5;
    cursor: not-allowed;
}

.rw-confirm__spinner[b-frz4vumtgi] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-frz4vumtgi 0.6s linear infinite;
}

@keyframes slideUp-b-frz4vumtgi {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn-b-frz4vumtgi {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes spin-b-frz4vumtgi {
    to { transform: rotate(360deg); }
}


/* Premiere: WRITE button sheen sweep on hover */
.btn-write[b-frz4vumtgi]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -80%;
    width: 55%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    opacity: 0;
    pointer-events: none;
}

.btn-write:hover:not(:disabled)[b-frz4vumtgi]::after {
    animation: wl-sheen 0.65s ease;
}

/* Premiere: inner hairline frame on the manuscript page */
.ms__page[b-frz4vumtgi]::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.12);
    border-radius: 1.1rem;
    pointer-events: none;
}


/* ============================================
   PREMIERE REDESIGN - tension arc, acts, station
   ============================================ */

/* --- Tension arc strip --- */
.arc-strip[b-frz4vumtgi] {
    position: relative;
    margin-bottom: 0.875rem;
    padding: 0.875rem 1rem 0.625rem;
    background:
        radial-gradient(ellipse 80% 90% at 50% 0%, rgba(var(--wl-gold-rgb), 0.05), transparent 70%),
        rgba(var(--wl-bg-secondary-rgb), 0.6);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
}

.arc-svg[b-frz4vumtgi] {
    display: block;
    width: 100%;
    height: 96px;
}

.arc-path[b-frz4vumtgi] {
    fill: none;
    stroke: rgba(var(--wl-gold-rgb), 0.32);
    stroke-width: 1.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.arc-node[b-frz4vumtgi] {
    fill: rgba(var(--wl-contrast-rgb), 0.12);
    stroke: rgba(var(--wl-contrast-rgb), 0.3);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.arc-node--done[b-frz4vumtgi] {
    fill: var(--wl-text-muted);
    stroke: rgba(0, 0, 0, 0.45);
}

.arc-node--done.arc-tier-legendary[b-frz4vumtgi] {
    fill: var(--wl-gold);
    filter: drop-shadow(0 0 5px rgba(var(--wl-gold-rgb), 0.6));
}

.arc-node--done.arc-tier-great[b-frz4vumtgi] {
    fill: #4ade80;
}

.arc-node--done.arc-tier-decent[b-frz4vumtgi] {
    fill: var(--wl-champagne);
}

.arc-node--done.arc-tier-low[b-frz4vumtgi] {
    fill: var(--wl-text-muted);
}

.arc-node--active[b-frz4vumtgi] {
    fill: rgba(var(--wl-gold-rgb), 0.25);
    stroke: var(--wl-gold);
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: arcPulse-b-frz4vumtgi 2s ease-in-out infinite;
}

@keyframes arcPulse-b-frz4vumtgi {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.75; }
}

/* --- Act headers - kickers inside the list --- */
.act-header[b-frz4vumtgi] {
    padding: 0.75rem 1.125rem 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wl-champagne);
    background: rgba(var(--wl-bg-secondary-rgb), 0.45);
}

.act-header[b-frz4vumtgi]::before {
    content: "✦";
    color: var(--wl-gold);
    font-size: 0.85em;
    margin-right: 0.6em;
}

/* --- Writing station: expands in place under the selected row --- */
.ch-station[b-frz4vumtgi] {
    padding: 1.25rem 1.5rem 1.5rem;
    background:
        radial-gradient(ellipse 75% 90% at 50% -10%, rgba(var(--wl-gold-rgb), 0.07), transparent 65%),
        rgba(var(--wl-bg-modal-deep-rgb, 10, 10, 16), 0.55);
    border-top: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.18);
    box-shadow: inset 3px 0 0 var(--wl-gold);
    animation: stationOpen-b-frz4vumtgi 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes stationOpen-b-frz4vumtgi {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Sessions-left estimate on pending rows --- */
.ch__sessions-left[b-frz4vumtgi] {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--wl-text-muted);
    white-space: nowrap;
}

.ch__locked[b-frz4vumtgi] {
    opacity: 0.45;
}

/* --- Tier-colored chapter quality in the result breakdown --- */
.ms__total-q--legendary[b-frz4vumtgi] {
    color: var(--wl-gold);
    text-shadow: 0 0 8px rgba(var(--wl-gold-rgb), 0.4);
}

.ms__total-q--great[b-frz4vumtgi] {
    color: #4ade80;
}

.ms__total-q--decent[b-frz4vumtgi] {
    color: var(--wl-champagne);
}

.ms__total-q--low[b-frz4vumtgi] {
    color: var(--wl-text-muted);
}


/* Intensity the player can't afford - visibly out of reach */
.intensity-btn.insufficient[b-frz4vumtgi] {
    opacity: 0.4;
    cursor: not-allowed;
    filter: saturate(0.4);
}

.intensity-btn.insufficient .intensity-cost[b-frz4vumtgi] {
    color: var(--wl-red);
}
/* /Components/Pages/Career/Music/Band/Index.razor.rz.scp.css */
.band-center-page[b-pcggq5tya3] {
    --band-surface: linear-gradient(145deg, rgba(var(--wl-bg-tertiary-rgb), .72), rgba(var(--wl-bg-secondary-rgb), .92));
    --band-surface-soft: rgba(var(--wl-contrast-rgb), .035);
    --band-border: rgba(var(--wl-contrast-rgb), .1);
    --band-gold-border: rgba(var(--wl-gold-rgb), .3);
    position: relative;
    isolation: isolate;
    width: min(100%, 1380px);
    min-height: 80vh;
    margin: 0 auto;
    padding: 1.25rem clamp(1rem, 2.2vw, 2rem) 5rem;
    color: var(--wl-text-primary);
}

.band-atmosphere[b-pcggq5tya3] {
    position: fixed;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 76% 4%, rgba(var(--wl-purple-rgb), .14), transparent 34rem),
        radial-gradient(circle at 14% 24%, rgba(var(--wl-gold-rgb), .1), transparent 30rem),
        linear-gradient(180deg, rgba(var(--wl-bg-primary-rgb), .08), transparent 38rem);
}

.band-atmosphere[b-pcggq5tya3]::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .3;
    background-image: linear-gradient(rgba(var(--wl-contrast-rgb), .018) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--wl-contrast-rgb), .018) 1px, transparent 1px);
    background-size: 4rem 4rem;
    mask-image: linear-gradient(to bottom, black, transparent 62%);
}

.section-kicker[b-pcggq5tya3] {
    margin: 0;
    color: var(--wl-gold);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.button-primary[b-pcggq5tya3],
.button-secondary[b-pcggq5tya3],
.button-ghost[b-pcggq5tya3],
.critical-action button[b-pcggq5tya3],
.band-center-empty a[b-pcggq5tya3] {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border-radius: .55rem;
    padding: .7rem 1rem;
    color: inherit;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.button-primary[b-pcggq5tya3],
.critical-action button.button-primary[b-pcggq5tya3] {
    border: 1px solid var(--wl-gold);
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    box-shadow: 0 10px 28px rgba(var(--wl-gold-rgb), .15);
}

.button-secondary[b-pcggq5tya3] {
    border: 1px solid var(--band-gold-border);
    background: rgba(var(--wl-gold-rgb), .08);
}

.button-ghost[b-pcggq5tya3] {
    border: 1px solid transparent;
    color: var(--wl-text-secondary);
}

.button-primary:hover[b-pcggq5tya3],
.button-secondary:hover[b-pcggq5tya3],
.button-ghost:hover[b-pcggq5tya3],
.critical-action button:hover:not(:disabled)[b-pcggq5tya3] {
    transform: translateY(-2px);
}

.button-primary:focus-visible[b-pcggq5tya3],
.button-secondary:focus-visible[b-pcggq5tya3],
.button-ghost:focus-visible[b-pcggq5tya3],
button:focus-visible[b-pcggq5tya3],
input:focus-visible[b-pcggq5tya3],
textarea:focus-visible[b-pcggq5tya3],
summary:focus-visible[b-pcggq5tya3] {
    outline: 2px solid var(--wl-gold);
    outline-offset: 3px;
}

.band-command-hero[b-pcggq5tya3] {
    position: relative;
    display: grid;
    min-height: 25rem;
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--band-border);
    border-radius: 1.4rem;
    background:
        linear-gradient(105deg, rgba(var(--wl-bg-primary-rgb), .92) 5%, rgba(var(--wl-bg-secondary-rgb), .82) 55%, rgba(var(--wl-purple-rgb), .09)),
        var(--band-surface);
    box-shadow: 0 28px 80px var(--wl-shadow-color);
}

.band-command-hero[b-pcggq5tya3]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 48%;
    height: 2px;
    background: linear-gradient(90deg, var(--wl-gold), transparent);
}

.band-command-hero[b-pcggq5tya3]::after {
    content: "BACKSTAGE";
    position: absolute;
    right: -.03em;
    bottom: -.16em;
    color: rgba(var(--wl-contrast-rgb), .025);
    font-family: var(--font-display);
    font-size: clamp(7rem, 16vw, 13rem);
    line-height: .8;
    letter-spacing: .02em;
    pointer-events: none;
}

.hero-copy[b-pcggq5tya3] {
    position: relative;
    z-index: 3;
    padding: clamp(2rem, 5vw, 4.5rem);
}

.hero-status-row[b-pcggq5tya3] {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 2rem;
}

.hero-status-row > span[b-pcggq5tya3] {
    display: inline-flex;
    min-height: 1.8rem;
    align-items: center;
    gap: .4rem;
    padding: .3rem .65rem;
    border: 1px solid var(--band-border);
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), .035);
    color: var(--wl-text-secondary);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero-status-row .live-indicator[b-pcggq5tya3] {
    color: var(--wl-green);
    border-color: rgba(var(--wl-green-rgb), .26);
    background: rgba(var(--wl-green-rgb), .07);
}

.live-indicator i[b-pcggq5tya3] {
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 .22rem rgba(var(--wl-green-rgb), .12);
}

.hero-status-row .recruiting-chip[b-pcggq5tya3] { color: var(--wl-gold); }

.hero-copy h1[b-pcggq5tya3] {
    max-width: 16ch;
    margin: .35rem 0 .8rem;
    font-family: var(--font-display);
    font-size: clamp(3.4rem, 7vw, 6.8rem);
    font-weight: 400;
    letter-spacing: .025em;
    line-height: .82;
    text-wrap: balance;
}

.hero-lede[b-pcggq5tya3] {
    max-width: 38rem;
    margin: 0;
    color: var(--wl-text-secondary);
    font-size: 1rem;
    line-height: 1.6;
}

.hero-actions[b-pcggq5tya3] {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1.6rem;
}

.hero-lineup[b-pcggq5tya3] {
    position: relative;
    z-index: 2;
    align-self: end;
    padding: 1rem 1rem 0;
}

.lineup-caption[b-pcggq5tya3] {
    position: absolute;
    z-index: 8;
    right: 1.25rem;
    bottom: 1.25rem;
    display: grid;
    justify-items: end;
    padding: .65rem .8rem;
    border: 1px solid var(--band-gold-border);
    border-radius: .7rem;
    background: rgba(var(--wl-bg-primary-rgb), .78);
    backdrop-filter: blur(14px);
}

.lineup-caption span[b-pcggq5tya3] { color: var(--wl-text-secondary); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.lineup-caption strong[b-pcggq5tya3] { font-size: 1.1rem; }

.band-center-alert[b-pcggq5tya3] {
    margin: 1rem 0;
    padding: .8rem 1rem;
    border: 1px solid;
    border-radius: .7rem;
    font-weight: 700;
}

.band-center-alert.error[b-pcggq5tya3] { border-color: rgba(var(--wl-red-rgb), .35); color: var(--wl-red); background: rgba(var(--wl-red-rgb), .07); }
.band-center-alert.success[b-pcggq5tya3] { border-color: rgba(var(--wl-green-rgb), .35); color: var(--wl-green); background: rgba(var(--wl-green-rgb), .07); }

.critical-action[b-pcggq5tya3] {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    margin: 1rem 0;
    overflow: hidden;
    border: 1px solid var(--band-gold-border);
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), .11), rgba(var(--wl-bg-secondary-rgb), .88) 42%, rgba(var(--wl-purple-rgb), .06));
}

.critical-action.requires-action[b-pcggq5tya3] { border-color: rgba(245, 158, 11, .36); }
.critical-action.all-clear[b-pcggq5tya3] { border-color: rgba(var(--wl-green-rgb), .3); background: linear-gradient(90deg, rgba(var(--wl-green-rgb), .08), rgba(var(--wl-bg-secondary-rgb), .88)); }

.critical-symbol[b-pcggq5tya3] {
    display: grid;
    width: 3.1rem;
    height: 3.1rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: .8rem;
    color: #f59e0b;
    font-family: var(--font-display);
    font-size: 1.25rem;
    box-shadow: inset 0 0 22px rgba(245, 158, 11, .09);
}

.all-clear .critical-symbol[b-pcggq5tya3] { color: var(--wl-green); }
.critical-copy h2[b-pcggq5tya3] { margin: .12rem 0 0; font-family: var(--font-display); font-size: 1.8rem; font-weight: 400; letter-spacing: .03em; }
.critical-copy p:last-child[b-pcggq5tya3] { margin: .25rem 0 0; color: var(--wl-text-secondary); font-size: .88rem; }
.critical-action-cta[b-pcggq5tya3] { justify-self: end; }
.critical-action button[b-pcggq5tya3] { cursor: pointer; }
.critical-action button:disabled[b-pcggq5tya3] { opacity: .55; cursor: wait; }

.band-center-stats[b-pcggq5tya3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .7rem;
    margin-bottom: 1rem;
}

.band-center-stats article[b-pcggq5tya3] {
    position: relative;
    display: grid;
    min-height: 7.5rem;
    align-content: end;
    gap: .1rem;
    overflow: hidden;
    border: 1px solid var(--band-border);
    border-radius: .9rem;
    padding: 1rem;
    background: var(--band-surface-soft);
}

.band-center-stats article[b-pcggq5tya3]::after {
    content: "";
    position: absolute;
    right: -1rem;
    bottom: -2.2rem;
    width: 6rem;
    height: 6rem;
    border: 1px solid rgba(var(--wl-gold-rgb), .13);
    border-radius: 50%;
}

.band-center-stats strong[b-pcggq5tya3] { font-family: var(--font-display); font-size: 2.1rem; font-weight: 400; line-height: 1; }
.band-center-stats > article > span:last-child[b-pcggq5tya3] { color: var(--wl-text-secondary); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.metric-index[b-pcggq5tya3] { position: absolute; top: .8rem; right: .9rem; color: rgba(var(--wl-contrast-rgb), .18); font-size: .63rem; font-weight: 900; }

.band-operations-grid[b-pcggq5tya3],
.band-community-grid[b-pcggq5tya3] {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(19rem, .65fr);
    gap: 1rem;
    margin-bottom: 1rem;
    align-items: start;
}

.band-community-grid[b-pcggq5tya3] { grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr); }

.band-center-panel[b-pcggq5tya3] {
    overflow: hidden;
    border: 1px solid var(--band-border);
    border-radius: 1rem;
    padding: clamp(1rem, 2vw, 1.4rem);
    background: var(--band-surface);
    box-shadow: 0 16px 42px rgba(var(--wl-bg-primary-rgb), .12);
}

.band-center-title[b-pcggq5tya3] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.band-center-title h2[b-pcggq5tya3] { margin: .15rem 0 0; font-family: var(--font-display); font-size: 2rem; font-weight: 400; letter-spacing: .025em; line-height: 1; }
.band-center-title > span[b-pcggq5tya3] { max-width: 25rem; color: var(--wl-text-secondary); font-size: .75rem; line-height: 1.35; text-align: right; }

.recording-blockers[b-pcggq5tya3] { display: grid; gap: .55rem; margin-bottom: .8rem; }
.recording-blocker[b-pcggq5tya3] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; border: 1px solid rgba(var(--wl-red-rgb), .18); border-radius: .7rem; padding: .65rem; background: rgba(var(--wl-red-rgb), .045); }
.recording-blocker.is-mine[b-pcggq5tya3] { border-color: rgba(var(--wl-red-rgb), .35); }
.blocker-icon[b-pcggq5tya3] { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .55rem; background: rgba(var(--wl-red-rgb), .12); color: var(--wl-red); font-size: .62rem; font-weight: 900; letter-spacing: .06em; }
.recording-blocker > div:nth-child(2)[b-pcggq5tya3] { display: grid; }
.recording-blocker span[b-pcggq5tya3] { color: var(--wl-text-secondary); font-size: .74rem; }
.recording-blocker a[b-pcggq5tya3] { color: var(--wl-gold); font-size: .75rem; font-weight: 900; text-decoration: none; }
.active-song-projects[b-pcggq5tya3] { display: grid; gap: .55rem; margin-bottom: .9rem; padding-top: .75rem; border-top: 1px solid var(--band-border); }
.active-song-projects > header[b-pcggq5tya3] { display: grid; gap: .15rem; }
.active-song-projects > header span[b-pcggq5tya3] { color: var(--wl-text-secondary); font-size: .7rem; line-height: 1.4; }
.active-song-projects > article[b-pcggq5tya3] { display: grid; gap: .55rem; padding: .65rem; border: 1px solid rgba(var(--wl-contrast-rgb), .07); border-radius: .65rem; background: rgba(var(--wl-contrast-rgb), .025); }
.project-copy[b-pcggq5tya3] { display: grid; gap: .1rem; }
.project-copy a[b-pcggq5tya3] { color: var(--wl-text-primary); font-weight: 850; text-decoration: none; }
.project-copy span[b-pcggq5tya3] { color: var(--wl-text-secondary); font-size: .68rem; }
.project-rescue-actions[b-pcggq5tya3] { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.project-rescue-actions select[b-pcggq5tya3],
.project-rescue-actions button[b-pcggq5tya3] { min-height: 2.1rem; border: 1px solid rgba(var(--wl-contrast-rgb), .14); border-radius: .42rem; padding: .38rem .55rem; background: rgba(var(--wl-contrast-rgb), .04); color: var(--wl-text-primary); font-size: .66rem; font-weight: 800; }
.project-rescue-actions button[b-pcggq5tya3] { cursor: pointer; }
.project-rescue-actions button.confirm[b-pcggq5tya3] { border-color: rgba(var(--wl-gold-rgb), .35); background: var(--wl-gold); color: var(--wl-bg-primary); }
.project-rescue-actions button.danger[b-pcggq5tya3] { border-color: rgba(var(--wl-red-rgb), .3); background: rgba(var(--wl-red-rgb), .07); color: var(--wl-red); }
.project-danger-confirm[b-pcggq5tya3] { flex: 1 1 100%; color: var(--wl-red); font-size: .68rem; line-height: 1.35; }

.target-task-list[b-pcggq5tya3] { display: grid; gap: .85rem; }
.target-task-card[b-pcggq5tya3] { overflow: hidden; border: 1px solid var(--band-border); border-radius: .85rem; background: rgba(var(--wl-bg-primary-rgb), .3); }
.target-task-card > header[b-pcggq5tya3] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .85rem; }
.target-type-icon[b-pcggq5tya3] { display: grid; width: 3rem; height: 3rem; place-items: center; border: 1px solid var(--band-gold-border); border-radius: .7rem; background: rgba(var(--wl-gold-rgb), .07); color: var(--wl-gold); font-size: .65rem; font-weight: 900; letter-spacing: .06em; }
.target-heading > span[b-pcggq5tya3] { color: var(--wl-gold); font-size: .62rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.target-heading h3[b-pcggq5tya3] { margin: .05rem 0; font-size: 1rem; }
.target-heading p[b-pcggq5tya3] { display: flex; flex-wrap: wrap; gap: .6rem; margin: .1rem 0 0; color: var(--wl-text-secondary); font-size: .7rem; }
.readiness-score[b-pcggq5tya3] { display: grid; justify-items: end; }
.readiness-score strong[b-pcggq5tya3] { font-family: var(--font-display); font-size: 1.65rem; font-weight: 400; line-height: 1; }
.readiness-score span[b-pcggq5tya3] { color: var(--wl-text-secondary); font-size: .58rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.task-readiness[b-pcggq5tya3] { height: 4px; overflow: hidden; background: rgba(var(--wl-contrast-rgb), .08); }
.task-readiness i[b-pcggq5tya3] { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--wl-gold-dark), var(--wl-gold-light)); box-shadow: 0 0 12px rgba(var(--wl-gold-rgb), .45); }
.target-lineup[b-pcggq5tya3] { display: grid; }
.target-member-row[b-pcggq5tya3] { display: grid; grid-template-columns: auto minmax(8rem, .8fr) minmax(15rem, 1.4fr); align-items: center; gap: .65rem; padding: .7rem .85rem; border-top: 1px solid rgba(var(--wl-contrast-rgb), .065); }
.target-member-row.is-mine[b-pcggq5tya3] { background: rgba(var(--wl-gold-rgb), .045); box-shadow: inset 2px 0 var(--wl-gold); }
.target-member-row > img[b-pcggq5tya3] { width: 2.3rem; height: 2.3rem; border-radius: 50%; object-fit: cover; background: var(--wl-bg-tertiary); }
.member-task-identity[b-pcggq5tya3] { display: grid; }
.member-task-identity strong[b-pcggq5tya3] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-task-identity small[b-pcggq5tya3] { margin-left: .25rem; color: var(--wl-gold); font-size: .6rem; text-transform: uppercase; }
.member-task-identity span[b-pcggq5tya3] { color: var(--wl-text-secondary); font-size: .7rem; }
.task-statuses[b-pcggq5tya3] { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .3rem; }
.task-statuses span[b-pcggq5tya3] { display: inline-flex; align-items: center; gap: .25rem; padding: .24rem .4rem; border-radius: 999px; background: rgba(var(--wl-contrast-rgb), .06); color: var(--wl-text-secondary); font-size: .62rem; }
.task-statuses i[b-pcggq5tya3] { display: grid; width: 1rem; height: 1rem; place-items: center; border: 1px solid rgba(var(--wl-contrast-rgb), .14); border-radius: 50%; font-size: .52rem; font-style: normal; }
.task-statuses span.done[b-pcggq5tya3] { color: var(--wl-green); background: rgba(var(--wl-green-rgb), .08); }
.task-statuses span.done i[b-pcggq5tya3] { border-color: rgba(var(--wl-green-rgb), .28); }
.task-actions[b-pcggq5tya3] { display: flex; grid-column: 2 / -1; flex-wrap: wrap; gap: .4rem; padding-top: .2rem; }
.task-action-closed[b-pcggq5tya3] { flex: 1 1 100%; color: var(--wl-red); font-size: .68rem; font-weight: 750; }
.task-actions button[b-pcggq5tya3],
.band-governance button[b-pcggq5tya3],
.band-board-compose button[b-pcggq5tya3] {
    min-height: 2.2rem;
    border: 1px solid var(--wl-gold);
    border-radius: .45rem;
    padding: .45rem .65rem;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    cursor: pointer;
    font-size: .7rem;
    font-weight: 900;
}
.task-actions button.danger[b-pcggq5tya3] { border-color: rgba(var(--wl-red-rgb), .3); background: rgba(var(--wl-red-rgb), .07); color: var(--wl-red); }
button:disabled[b-pcggq5tya3] { opacity: .5; cursor: wait; }

.finance-panel[b-pcggq5tya3] { position: sticky; top: 5.5rem; }
.finance-title[b-pcggq5tya3] { margin-bottom: .25rem; }
.finance-total[b-pcggq5tya3] { display: flex; align-items: baseline; gap: .45rem; padding: .8rem 0 1rem; border-bottom: 1px solid var(--band-border); }
.finance-total strong[b-pcggq5tya3] { font-family: var(--font-display); font-size: clamp(2.7rem, 5vw, 4rem); font-weight: 400; line-height: .9; }
.finance-total span[b-pcggq5tya3] { color: var(--wl-gold); font-size: .7rem; font-weight: 900; }
.income-split[b-pcggq5tya3] { display: grid; gap: .65rem; padding: 1rem 0; }
.income-split article[b-pcggq5tya3] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .55rem; }
.income-split img[b-pcggq5tya3] { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; background: var(--wl-bg-tertiary); }
.income-split article > div[b-pcggq5tya3] { min-width: 0; }
.income-split article span[b-pcggq5tya3] { display: flex; justify-content: space-between; gap: .5rem; color: var(--wl-text-secondary); font-size: .68rem; }
.income-split article span strong[b-pcggq5tya3] { overflow: hidden; color: var(--wl-text-primary); text-overflow: ellipsis; white-space: nowrap; }
.income-split em[b-pcggq5tya3] { font-style: normal; }
.income-split b[b-pcggq5tya3] { color: var(--wl-text-secondary); font-size: .65rem; }
.income-bar[b-pcggq5tya3] { height: 3px; margin-top: .28rem; overflow: hidden; border-radius: 99px; background: rgba(var(--wl-contrast-rgb), .08); }
.income-bar i[b-pcggq5tya3] { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--wl-gold); }
.settlement-heading[b-pcggq5tya3] { padding: .8rem 0 .5rem; border-top: 1px solid var(--band-border); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.settlement-list[b-pcggq5tya3] { display: grid; gap: .35rem; }
.settlement-list article[b-pcggq5tya3] { display: flex; justify-content: space-between; gap: .7rem; padding: .55rem; border-radius: .5rem; background: rgba(var(--wl-contrast-rgb), .035); }
.settlement-list article > div[b-pcggq5tya3] { display: grid; }
.settlement-list span[b-pcggq5tya3] { color: var(--wl-text-secondary); font-size: .65rem; }
.settlement-list em[b-pcggq5tya3] { color: var(--wl-green); font-size: .78rem; font-style: normal; font-weight: 900; }

.band-center-roster[b-pcggq5tya3] { display: grid; gap: .55rem; }
.band-center-roster article[b-pcggq5tya3] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; padding: .65rem; border: 1px solid rgba(var(--wl-contrast-rgb), .06); border-radius: .65rem; background: rgba(var(--wl-contrast-rgb), .025); }
.roster-avatar[b-pcggq5tya3] { position: relative; width: 2.8rem; height: 2.8rem; }
.roster-avatar img[b-pcggq5tya3] { width: 100%; height: 100%; border: 1px solid var(--band-gold-border); border-radius: 50%; object-fit: cover; background: var(--wl-bg-tertiary); }
.roster-avatar i[b-pcggq5tya3] { position: absolute; right: -.15rem; bottom: -.05rem; display: grid; width: 1.15rem; height: 1.15rem; place-items: center; border-radius: 50%; background: var(--wl-gold); color: var(--wl-bg-primary); font-size: .55rem; font-style: normal; }
.band-center-roster article > div[b-pcggq5tya3] { display: grid; min-width: 0; }
.band-center-roster article > div strong[b-pcggq5tya3] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.band-center-roster span[b-pcggq5tya3],
.band-center-roster em[b-pcggq5tya3] { color: var(--wl-text-secondary); font-size: .68rem; font-style: normal; }
.roster-action[b-pcggq5tya3] { grid-column: 2 / -1; justify-self: start; border: 0; padding: 0; background: transparent; color: var(--wl-gold); cursor: pointer; font-size: .68rem; font-weight: 800; }
.roster-transfer-confirm[b-pcggq5tya3] { display: flex !important; grid-column: 2 / -1; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .55rem; border: 1px solid rgba(var(--wl-gold-rgb), .2); border-radius: .55rem; background: rgba(var(--wl-gold-rgb), .06); }
.roster-transfer-confirm span[b-pcggq5tya3] { flex: 1 1 100%; color: var(--wl-text-primary); line-height: 1.35; }
.roster-transfer-confirm button[b-pcggq5tya3] { min-height: 2rem; border: 1px solid rgba(var(--wl-contrast-rgb), .16); border-radius: .4rem; padding: .35rem .55rem; background: rgba(var(--wl-contrast-rgb), .05); color: var(--wl-text-secondary); cursor: pointer; font-size: .65rem; font-weight: 850; }
.roster-transfer-confirm button.confirm[b-pcggq5tya3] { border-color: rgba(var(--wl-gold-rgb), .35); background: var(--wl-gold); color: var(--wl-bg-primary); }

.band-governance[b-pcggq5tya3] { display: grid; gap: .65rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--band-border); }
.governance-heading[b-pcggq5tya3] { display: grid; }
.governance-heading span[b-pcggq5tya3] { color: var(--wl-text-secondary); font-size: .7rem; }
.switch-row[b-pcggq5tya3] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem; border-radius: .6rem; background: rgba(var(--wl-contrast-rgb), .035); }
.switch-row > span[b-pcggq5tya3] { display: grid; }
.switch-row small[b-pcggq5tya3] { color: var(--wl-text-secondary); font-size: .65rem; }
.switch-row input[b-pcggq5tya3] { width: 2.5rem; height: 1.35rem; accent-color: var(--wl-gold); }
.band-governance textarea[b-pcggq5tya3],
.band-governance input[b-pcggq5tya3],
.danger-zone input[b-pcggq5tya3],
.band-board-compose textarea[b-pcggq5tya3] { width: 100%; border: 1px solid rgba(var(--wl-contrast-rgb), .14); border-radius: .55rem; background: rgba(var(--wl-bg-primary-rgb), .55); color: var(--wl-text-primary); font: inherit; }
.band-governance textarea[b-pcggq5tya3] { min-height: 5rem; resize: vertical; padding: .65rem; }
.governance-actions[b-pcggq5tya3] { display: flex; align-items: center; justify-content: space-between; color: var(--wl-text-secondary); font-size: .68rem; }

.danger-zone[b-pcggq5tya3] { margin-top: .8rem; border: 1px solid rgba(var(--wl-red-rgb), .18); border-radius: .65rem; color: var(--wl-red); }
.danger-zone summary[b-pcggq5tya3] { padding: .65rem; cursor: pointer; font-size: .72rem; font-weight: 900; }
.danger-zone > div[b-pcggq5tya3] { display: grid; gap: .55rem; padding: 0 .7rem .7rem; }
.danger-zone p[b-pcggq5tya3] { margin: 0; color: var(--wl-text-secondary); font-size: .72rem; line-height: 1.4; }
.danger-zone label[b-pcggq5tya3] { display: grid; gap: .3rem; color: var(--wl-text-secondary); font-size: .68rem; }
.danger-zone input[b-pcggq5tya3] { min-height: 2.25rem; padding: .45rem .55rem; }
.danger-zone button.danger[b-pcggq5tya3] { width: fit-content; min-height: 2.2rem; border: 1px solid rgba(var(--wl-red-rgb), .35); border-radius: .45rem; padding: .45rem .65rem; background: rgba(var(--wl-red-rgb), .09); color: var(--wl-red); font-weight: 900; }

.privacy-chip[b-pcggq5tya3] { color: var(--wl-green) !important; }
.band-board-compose[b-pcggq5tya3] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; margin-bottom: 1rem; padding: .75rem; border: 1px solid var(--band-border); border-radius: .8rem; background: rgba(var(--wl-bg-primary-rgb), .26); }
.compose-avatar[b-pcggq5tya3] { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: 50%; background: rgba(var(--wl-gold-rgb), .12); color: var(--wl-gold); font-weight: 900; }
.band-board-compose textarea[b-pcggq5tya3] { min-height: 5.5rem; resize: vertical; padding: .65rem; }
.compose-footer[b-pcggq5tya3] { display: flex; grid-column: 2; align-items: center; justify-content: space-between; color: var(--wl-text-secondary); font-size: .68rem; }
.band-board-list[b-pcggq5tya3] { display: grid; gap: .65rem; }
.band-board-post[b-pcggq5tya3] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .65rem; padding: .75rem; border: 1px solid var(--band-border); border-radius: .75rem; background: rgba(var(--wl-contrast-rgb), .025); }
.band-board-post.pinned[b-pcggq5tya3] { border-color: var(--band-gold-border); background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), .065), rgba(var(--wl-contrast-rgb), .02)); }
.post-avatar[b-pcggq5tya3] { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; overflow: hidden; border-radius: 50%; background: rgba(var(--wl-gold-rgb), .12); color: var(--wl-gold); font-size: .72rem; font-weight: 900; }
.post-avatar img[b-pcggq5tya3] { width: 100%; height: 100%; object-fit: cover; }
.post-content[b-pcggq5tya3] { min-width: 0; }
.band-board-post header[b-pcggq5tya3] { display: flex; justify-content: space-between; gap: .7rem; }
.band-board-post header > div:first-child[b-pcggq5tya3] { display: grid; }
.band-board-post time[b-pcggq5tya3] { color: var(--wl-text-secondary); font-size: .65rem; }
.band-board-post p[b-pcggq5tya3] { margin: .55rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.band-board-actions[b-pcggq5tya3] { display: flex; align-items: center; flex-wrap: wrap; justify-content: end; gap: .3rem; }
.band-board-actions span[b-pcggq5tya3] { color: var(--wl-gold); font-size: .62rem; font-weight: 800; }
.band-board-actions button[b-pcggq5tya3] { border: 1px solid var(--band-border); border-radius: .4rem; padding: .3rem .45rem; background: rgba(var(--wl-contrast-rgb), .055); color: var(--wl-text-primary); cursor: pointer; font-size: .63rem; }
.band-board-actions button.danger[b-pcggq5tya3] { color: var(--wl-red); }

.band-board-empty[b-pcggq5tya3] {
    display: grid;
    min-height: 10rem;
    place-items: center;
    align-content: center;
    gap: .25rem;
    padding: 1.5rem;
    border: 1px dashed rgba(var(--wl-contrast-rgb), .12);
    border-radius: .75rem;
    color: var(--wl-text-secondary);
    text-align: center;
}
.band-board-empty > span[b-pcggq5tya3] { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: 50%; background: rgba(var(--wl-gold-rgb), .08); color: var(--wl-gold); font-size: 1.1rem; }
.band-board-empty strong[b-pcggq5tya3] { color: var(--wl-text-primary); }
.band-board-empty p[b-pcggq5tya3] { margin: 0; font-size: .75rem; }
.band-board-empty.complete > span[b-pcggq5tya3] { color: var(--wl-green); background: rgba(var(--wl-green-rgb), .08); }
.band-board-empty.compact[b-pcggq5tya3] { min-height: 5rem; padding: 1rem; font-size: .72rem; }

.band-center-state[b-pcggq5tya3],
.band-center-empty[b-pcggq5tya3] {
    display: grid;
    min-height: 35rem;
    place-items: center;
    align-content: center;
    gap: .8rem;
    overflow: hidden;
    border: 1px solid var(--band-border);
    border-radius: 1.3rem;
    padding: 3rem 1.5rem;
    background: var(--band-surface);
    text-align: center;
}
.band-center-state[b-pcggq5tya3] { min-height: 22rem; }
.state-pulse[b-pcggq5tya3] { width: 2.2rem; height: 2.2rem; border: 2px solid rgba(var(--wl-gold-rgb), .2); border-top-color: var(--wl-gold); border-radius: 50%; animation: band-spin-b-pcggq5tya3 .8s linear infinite; }
.band-center-empty h1[b-pcggq5tya3] { max-width: 18ch; margin: .1rem 0; font-family: var(--font-display); font-size: clamp(2.8rem, 7vw, 5rem); font-weight: 400; line-height: .9; }
.band-center-empty > p:not(.section-kicker)[b-pcggq5tya3] { max-width: 36rem; margin: 0 0 .5rem; color: var(--wl-text-secondary); }
.band-center-empty .text-link[b-pcggq5tya3] { min-height: auto; padding: .25rem; color: var(--wl-text-secondary); font-size: .8rem; text-decoration: underline; text-underline-offset: .25rem; }
.empty-stage[b-pcggq5tya3] { position: relative; width: min(26rem, 90%); height: 9rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(var(--wl-gold-rgb), .22); }
.empty-stage[b-pcggq5tya3]::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -1rem; height: 2rem; border-radius: 50%; background: rgba(var(--wl-gold-rgb), .1); filter: blur(10px); }
.empty-stage i[b-pcggq5tya3] { position: absolute; bottom: 0; width: 4rem; height: 7rem; border-radius: 2rem 2rem .4rem .4rem; background: linear-gradient(180deg, rgba(var(--wl-contrast-rgb), .12), rgba(var(--wl-contrast-rgb), .035)); }
.empty-stage i:nth-child(1)[b-pcggq5tya3] { left: 12%; transform: scale(.82); }
.empty-stage i:nth-child(2)[b-pcggq5tya3] { left: 34%; }
.empty-stage i:nth-child(3)[b-pcggq5tya3] { right: 34%; }
.empty-stage i:nth-child(4)[b-pcggq5tya3] { right: 12%; transform: scale(.82); }

@keyframes band-spin-b-pcggq5tya3 { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
    .band-command-hero[b-pcggq5tya3] { grid-template-columns: minmax(0, 1fr) minmax(17rem, .72fr); }
    .band-operations-grid[b-pcggq5tya3] { grid-template-columns: minmax(0, 1fr); }
    .finance-panel[b-pcggq5tya3] { position: static; }
    .finance-panel .income-split[b-pcggq5tya3] { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.2rem; }
}

@media (max-width: 820px) {
    .band-command-hero[b-pcggq5tya3] { grid-template-columns: 1fr; }
    .hero-copy[b-pcggq5tya3] { padding-bottom: 0; }
    .hero-lineup[b-pcggq5tya3] { width: min(100%, 34rem); justify-self: center; }
    .band-center-stats[b-pcggq5tya3] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .band-community-grid[b-pcggq5tya3] { grid-template-columns: 1fr; }
    .target-member-row[b-pcggq5tya3] { grid-template-columns: auto minmax(0, 1fr); }
    .task-statuses[b-pcggq5tya3] { grid-column: 2; justify-content: flex-start; }
    .task-actions[b-pcggq5tya3] { grid-column: 2; }
}

@media (max-width: 620px) {
    .band-center-page[b-pcggq5tya3] { padding-inline: .75rem; }
    .band-command-hero[b-pcggq5tya3] { min-height: 0; border-radius: 1rem; }
    .hero-copy[b-pcggq5tya3] { padding: 1.4rem 1rem 0; }
    .hero-status-row[b-pcggq5tya3] { margin-bottom: 1.2rem; }
    .hero-copy h1[b-pcggq5tya3] { font-size: clamp(3rem, 17vw, 4.8rem); }
    .hero-actions[b-pcggq5tya3] { display: grid; grid-template-columns: 1fr 1fr; }
    .hero-actions .button-ghost[b-pcggq5tya3] { grid-column: 1 / -1; }
    .critical-action[b-pcggq5tya3] { grid-template-columns: auto minmax(0, 1fr); padding: .85rem; }
    .critical-action-cta[b-pcggq5tya3] { grid-column: 1 / -1; justify-self: stretch; }
    .critical-action-cta > *[b-pcggq5tya3] { width: 100%; }
    .band-center-stats[b-pcggq5tya3] { gap: .5rem; }
    .band-center-stats article[b-pcggq5tya3] { min-height: 6.5rem; }
    .band-center-title[b-pcggq5tya3] { align-items: start; flex-direction: column; }
    .band-center-title > span[b-pcggq5tya3] { text-align: left; }
    .target-task-card > header[b-pcggq5tya3] { grid-template-columns: auto minmax(0, 1fr); }
    .readiness-score[b-pcggq5tya3] { grid-column: 1 / -1; grid-row: 2; justify-items: start; }
    .recording-blocker[b-pcggq5tya3] { grid-template-columns: auto 1fr; }
    .recording-blocker a[b-pcggq5tya3] { grid-column: 2; }
    .finance-panel .income-split[b-pcggq5tya3] { grid-template-columns: 1fr; }
    .band-board-compose[b-pcggq5tya3] { grid-template-columns: 1fr; }
    .compose-avatar[b-pcggq5tya3] { display: none; }
    .compose-footer[b-pcggq5tya3] { grid-column: 1; }
    .band-board-post header[b-pcggq5tya3] { flex-direction: column; }
    .band-board-actions[b-pcggq5tya3] { justify-content: start; }
}

@media (prefers-reduced-motion: reduce) {
    .state-pulse[b-pcggq5tya3] { animation: none; }
    .button-primary[b-pcggq5tya3],
    .button-secondary[b-pcggq5tya3],
    .button-ghost[b-pcggq5tya3],
    .critical-action button[b-pcggq5tya3] { transition: none; }
}
/* /Components/Pages/Career/Music/Charts/ArtistArchive.razor.rz.scp.css */
.chart-archive-page[b-0gq5zbvkox] {
    max-width: 980px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 6rem;
    color: var(--wl-text-primary);
}

/* ---- hero ---- */
.archive-hero[b-0gq5zbvkox] {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    background:
        radial-gradient(120% 150% at 85% 0%, rgba(var(--wl-gold-rgb), 0.2), transparent 55%),
        linear-gradient(135deg, rgba(var(--wl-bg-secondary-rgb), 0.9), rgba(0, 0, 0, 0.55));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 0 80px rgba(0, 0, 0, 0.28);
}
.archive-hero-bg[b-0gq5zbvkox] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.7), transparent 70%);
}
.archive-hero-emblem[b-0gq5zbvkox] {
    position: absolute;
    right: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 13rem;
    height: 13rem;
    color: rgba(var(--wl-gold-rgb), 0.16);
}
.archive-hero-emblem svg[b-0gq5zbvkox] { width: 100%; height: 100%; }
.archive-hero-inner[b-0gq5zbvkox] { position: relative; z-index: 1; display: grid; gap: 0.5rem; }

.archive-back[b-0gq5zbvkox] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    transition: color 0.16s ease, transform 0.16s ease;
}
.archive-back-ic[b-0gq5zbvkox] { width: 0.95rem; height: 0.95rem; display: inline-flex; }
.archive-back-ic svg[b-0gq5zbvkox] { width: 100%; height: 100%; }
.archive-back:hover[b-0gq5zbvkox] { color: var(--wl-gold); transform: translateX(-2px); }

.archive-eyebrow[b-0gq5zbvkox] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--wl-gold);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.8rem;
}
.archive-eyebrow-ic[b-0gq5zbvkox] { width: 1.05rem; height: 1.05rem; display: inline-flex; }
.archive-eyebrow-ic svg[b-0gq5zbvkox] { width: 100%; height: 100%; }

.archive-hero h1[b-0gq5zbvkox] {
    margin: 0.15rem 0 0;
    font-size: clamp(2.4rem, 6vw, 4rem);
    line-height: 0.98;
    font-weight: 900;
    overflow-wrap: anywhere;
}
.archive-hero p[b-0gq5zbvkox] { margin: 0; color: var(--wl-text-secondary); }

/* ---- stats ---- */
.archive-stats[b-0gq5zbvkox] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
.archive-stat[b-0gq5zbvkox] {
    position: relative;
    display: grid;
    gap: 0.4rem;
    padding: 1.1rem;
    border-radius: 10px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.18);
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--wl-gold-rgb), 0.08), transparent 70%),
        rgba(var(--wl-contrast-rgb), 0.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.archive-stat-ic[b-0gq5zbvkox] {
    width: 1.7rem;
    height: 1.7rem;
    padding: 0.3rem;
    border-radius: 8px;
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
}
.archive-stat-ic svg[b-0gq5zbvkox] { width: 100%; height: 100%; }
.archive-stat--gold[b-0gq5zbvkox] { border-color: rgba(var(--wl-gold-rgb), 0.4); }
.archive-stat--gold .archive-stat-ic[b-0gq5zbvkox] { color: var(--wl-gold); background: rgba(var(--wl-gold-rgb), 0.12); border-color: rgba(var(--wl-gold-rgb), 0.28); }
.archive-stat strong[b-0gq5zbvkox] { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.archive-stat span[b-0gq5zbvkox] { color: var(--wl-text-secondary); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }

/* ---- table ---- */
.archive-table-wrap[b-0gq5zbvkox] { display: grid; gap: 0.5rem; }
.archive-table-head[b-0gq5zbvkox],
.archive-row[b-0gq5zbvkox] {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 96px 86px 96px 76px;
    gap: 0.75rem;
    align-items: center;
}
.archive-table-head[b-0gq5zbvkox] {
    color: var(--wl-text-secondary);
    font-size: 0.7rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0 1rem 0.25rem;
}
.archive-row[b-0gq5zbvkox] {
    padding: 0.9rem 1rem;
    border-radius: 9px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    background:
        linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.05), transparent 45%),
        rgba(var(--wl-contrast-rgb), 0.025);
    color: var(--wl-text-primary);
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.archive-row:hover[b-0gq5zbvkox] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    background:
        linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.1), transparent 55%),
        rgba(var(--wl-contrast-rgb), 0.05);
    transform: translateX(3px);
}
.archive-row > *[b-0gq5zbvkox] { min-width: 0; }
.archive-cell[b-0gq5zbvkox] { color: var(--wl-text-secondary); font-variant-numeric: tabular-nums; }
.archive-row--legacy[b-0gq5zbvkox] { border-style: dashed; opacity: 0.92; }
.archive-title strong[b-0gq5zbvkox],
.archive-title em[b-0gq5zbvkox] { display: block; }
.archive-title strong[b-0gq5zbvkox] { overflow-wrap: anywhere; font-size: 0.98rem; }
.archive-title em[b-0gq5zbvkox] { color: var(--wl-text-muted); font-style: normal; font-size: 0.8rem; margin-top: 0.1rem; }
.archive-peak[b-0gq5zbvkox] {
    justify-self: start;
    min-width: 3rem;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: var(--wl-text-primary);
    font-weight: 900;
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
}
.archive-peak.is-one[b-0gq5zbvkox] {
    color: #1a1208;
    background: linear-gradient(135deg, #f7d774, var(--wl-gold));
    box-shadow: 0 4px 14px rgba(var(--wl-gold-rgb), 0.3);
}

/* ---- empty / loading ---- */
.archive-empty[b-0gq5zbvkox],
.archive-loading[b-0gq5zbvkox] {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding: 3.5rem 1.5rem;
    text-align: center;
    color: var(--wl-text-secondary);
}
.archive-empty-panel[b-0gq5zbvkox] {
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 12px;
    background: rgba(var(--wl-contrast-rgb), 0.02);
}
.archive-empty-ic[b-0gq5zbvkox] {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    padding: 0.85rem;
    border-radius: 14px;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
}
.archive-empty-ic svg[b-0gq5zbvkox] { width: 100%; height: 100%; }
.archive-empty h1[b-0gq5zbvkox], .archive-empty h2[b-0gq5zbvkox] { margin: 0; font-size: 1.5rem; }
.archive-back-btn[b-0gq5zbvkox] {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0 1.1rem;
    border-radius: 9px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
    font-weight: 800;
    text-decoration: none;
    background: rgba(var(--wl-gold-rgb), 0.08);
}
.archive-back-btn:hover[b-0gq5zbvkox] { background: rgba(var(--wl-gold-rgb), 0.16); }

@media (max-width: 720px) {
    .chart-archive-page[b-0gq5zbvkox] { padding: 1rem 1rem 5rem; }
    .archive-hero[b-0gq5zbvkox] { padding: 1.5rem; }
    .archive-hero-emblem[b-0gq5zbvkox] { width: 9rem; height: 9rem; right: -2rem; }
    .archive-stats[b-0gq5zbvkox] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .archive-table-head[b-0gq5zbvkox] { display: none; }
    .archive-row[b-0gq5zbvkox] { grid-template-columns: minmax(0, 1fr) 64px 56px; }
    .archive-row .archive-cell:nth-of-type(2)[b-0gq5zbvkox],
    .archive-row .archive-cell:nth-of-type(4)[b-0gq5zbvkox] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .archive-row[b-0gq5zbvkox], .archive-back[b-0gq5zbvkox] { transition: none; }
    .archive-row:hover[b-0gq5zbvkox], .archive-back:hover[b-0gq5zbvkox] { transform: none; }
}
/* /Components/Pages/Career/Music/Charts/Index.razor.rz.scp.css */
/* ============================================
   SONG CHARTS PAGE - AAA+++ Billboard Prestige
   Theme: Music magazine editorial, dark luxury
   ============================================ */

.charts-page[b-x1rl0khohf] {
    position: relative;
    min-height: 100vh;
    padding: 1.5rem;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* === CINEMATIC ATMOSPHERE === */
.charts-atmosphere[b-x1rl0khohf] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.charts-orb[b-x1rl0khohf] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.2;
}

.charts-orb--gold[b-x1rl0khohf] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    animation: chartsFloat-b-x1rl0khohf 22s ease-in-out infinite;
}

.charts-orb--purple[b-x1rl0khohf] {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--wl-purple) 0%, transparent 70%);
    bottom: -150px;
    left: -100px;
    animation: chartsFloat-b-x1rl0khohf 28s ease-in-out infinite reverse;
}

@keyframes chartsFloat-b-x1rl0khohf {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -12px) scale(1.03); }
    66% { transform: translate(-12px, 20px) scale(0.97); }
}

.charts-scanline[b-x1rl0khohf] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-gold-rgb), 0.012) 2px,
        rgba(var(--wl-gold-rgb), 0.012) 4px
    );
}

.charts-noise[b-x1rl0khohf] {
    position: absolute;
    inset: 0;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* === ANIMATIONS === */
.animate-fade-in[b-x1rl0khohf] {
    animation: chartsFadeIn-b-x1rl0khohf 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100[b-x1rl0khohf] { animation-delay: 0.1s; }
.delay-200[b-x1rl0khohf] { animation-delay: 0.2s; }

@keyframes chartsFadeIn-b-x1rl0khohf {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === HEADER === */
.charts-header[b-x1rl0khohf] {
    position: relative;
    z-index: 1;
}

.charts-header-top[b-x1rl0khohf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.charts-next-badge[b-x1rl0khohf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border-radius: 9999px;
    background: rgba(var(--wl-gold-rgb), 0.08);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
}

.charts-next-badge svg[b-x1rl0khohf] {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--wl-gold);
}

.charts-next-badge .next-label[b-x1rl0khohf] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wl-text-muted);
}

.charts-next-badge .next-value[b-x1rl0khohf] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.charts-back-btn[b-x1rl0khohf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

.charts-back-btn:hover[b-x1rl0khohf] {
    color: var(--wl-gold);
}

.charts-back-btn svg[b-x1rl0khohf] {
    width: 1rem;
    height: 1rem;
}

.charts-title-group[b-x1rl0khohf] {
    text-align: center;
}

.charts-eyebrow[b-x1rl0khohf] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-gold);
    margin-bottom: 0.375rem;
    font-family: 'JetBrains Mono', monospace;
}

.charts-eyebrow svg[b-x1rl0khohf] {
    width: 0.9rem;
    height: 0.9rem;
}

.charts-title-group h1[b-x1rl0khohf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--wl-text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.charts-subtitle[b-x1rl0khohf] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0.375rem 0 0 0;
}

/* ============================================
   MAIN CATEGORY TABS
   ============================================ */
.charts-tabs[b-x1rl0khohf] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.charts-tab[b-x1rl0khohf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: transparent;
    border: 1px solid var(--wl-border-medium);
    border-radius: 100px;
    color: var(--wl-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.charts-tab svg[b-x1rl0khohf] {
    width: 1.1rem;
    height: 1.1rem;
    flex-shrink: 0;
}

.charts-tab:hover[b-x1rl0khohf] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold-light);
    background: rgba(var(--wl-gold-rgb), 0.05);
}

.charts-tab--active[b-x1rl0khohf] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    border-color: var(--wl-gold);
    color: var(--wl-gold);
    box-shadow: 0 0 16px rgba(var(--wl-gold-rgb), 0.1);
}

.charts-tab--active:hover[b-x1rl0khohf] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    border-color: var(--wl-gold-light);
    color: var(--wl-gold-light);
}

/* ============================================
   SUB-FILTERS (Genre / Platform selectors)
   ============================================ */
.sub-filters[b-x1rl0khohf] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.sub-filter[b-x1rl0khohf] {
    padding: 0.375rem 0.875rem;
    background: transparent;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 100px;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sub-filter:hover[b-x1rl0khohf] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-gold-rgb), 0.04);
}

.sub-filter--active[b-x1rl0khohf] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

.sub-filter--active:hover[b-x1rl0khohf] {
    background: rgba(var(--wl-gold-rgb), 0.13);
    color: var(--wl-gold-light);
}

/* ============================================
   CONTENT AREA
   ============================================ */
.charts-content[b-x1rl0khohf] {
    position: relative;
    z-index: 1;
}

.chart-section[b-x1rl0khohf] {
    position: relative;
}

.section-header[b-x1rl0khohf] {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.section-header h2[b-x1rl0khohf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-champagne);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.section-header h2[b-x1rl0khohf]::before,
.section-header h2[b-x1rl0khohf]::after {
    content: "\2726";
    color: var(--wl-gold);
    font-size: 0.8em;
    margin: 0 0.6em;
    vertical-align: 0.1em;
}

.section-header h2[b-x1rl0khohf]::before {
    margin-left: 0;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.chart-empty-state[b-x1rl0khohf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--wl-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--wl-border-subtle);
}

.chart-empty-icon[b-x1rl0khohf] {
    width: 56px;
    height: 56px;
    color: rgba(var(--wl-gold-rgb), 0.25);
    margin-bottom: 1rem;
}

.chart-empty-icon svg[b-x1rl0khohf] {
    width: 100%;
    height: 100%;
}

.chart-empty-state p[b-x1rl0khohf] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .charts-page[b-x1rl0khohf] {
        padding: 1rem;
        gap: 1.25rem;
    }

    .charts-title-group h1[b-x1rl0khohf] {
        font-size: 2.25rem;
    }

    .charts-tabs[b-x1rl0khohf] {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .charts-tabs[b-x1rl0khohf]::-webkit-scrollbar {
        display: none;
    }

    .sub-filters[b-x1rl0khohf] {
        overflow-x: auto;
        flex-wrap: nowrap;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }

    .sub-filters[b-x1rl0khohf]::-webkit-scrollbar {
        display: none;
    }
}
/* /Components/Pages/Career/Music/Charts/SongHistory.razor.rz.scp.css */
.song-history-page[b-i8kvk78ur3] {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 6rem;
    color: var(--wl-text-primary);
}

/* ---- hero ---- */
.history-header[b-i8kvk78ur3] {
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    background:
        radial-gradient(120% 150% at 85% 0%, rgba(var(--wl-gold-rgb), 0.2), transparent 55%),
        linear-gradient(135deg, rgba(var(--wl-bg-secondary-rgb), 0.9), rgba(0, 0, 0, 0.55));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 0 80px rgba(0, 0, 0, 0.28);
}
.history-hero-bg[b-i8kvk78ur3] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(120deg, rgba(0, 0, 0, 0.7), transparent 70%);
}
.history-hero-emblem[b-i8kvk78ur3] {
    position: absolute;
    right: -1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 12rem;
    height: 12rem;
    color: rgba(var(--wl-gold-rgb), 0.16);
}
.history-hero-emblem svg[b-i8kvk78ur3] { width: 100%; height: 100%; }
.history-hero-inner[b-i8kvk78ur3] { position: relative; z-index: 1; display: grid; gap: 0.4rem; }

.history-back[b-i8kvk78ur3] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    width: fit-content;
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    transition: color 0.16s ease, transform 0.16s ease;
}
.history-back-ic[b-i8kvk78ur3] { width: 0.95rem; height: 0.95rem; display: inline-flex; }
.history-back-ic svg[b-i8kvk78ur3] { width: 100%; height: 100%; }
.history-back:hover[b-i8kvk78ur3] { color: var(--wl-gold); transform: translateX(-2px); }

.history-chart[b-i8kvk78ur3] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--wl-gold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 800;
    font-size: 0.8rem;
    margin-top: 0.35rem;
}
.history-chart-ic[b-i8kvk78ur3] { width: 1.05rem; height: 1.05rem; display: inline-flex; }
.history-chart-ic svg[b-i8kvk78ur3] { width: 100%; height: 100%; }

.history-header h1[b-i8kvk78ur3] {
    overflow-wrap: anywhere;
    font-size: clamp(2.2rem, 6vw, 3.8rem);
    line-height: 0.98;
    font-weight: 900;
    margin: 0.15rem 0 0;
}
.history-header p[b-i8kvk78ur3] { margin: 0; color: var(--wl-text-secondary); font-weight: 600; }

/* ---- stats ---- */
.history-stats[b-i8kvk78ur3] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.history-stat[b-i8kvk78ur3] {
    display: grid;
    gap: 0.4rem;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.16);
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--wl-gold-rgb), 0.08), transparent 70%),
        rgba(var(--wl-contrast-rgb), 0.03);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.history-stat-ic[b-i8kvk78ur3] {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0.3rem;
    border-radius: 8px;
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
}
.history-stat-ic svg[b-i8kvk78ur3] { width: 100%; height: 100%; }
.history-stat--gold[b-i8kvk78ur3] { border-color: rgba(var(--wl-gold-rgb), 0.4); }
.history-stat--gold .history-stat-ic[b-i8kvk78ur3] { color: var(--wl-gold); background: rgba(var(--wl-gold-rgb), 0.12); border-color: rgba(var(--wl-gold-rgb), 0.28); }
.history-stat strong[b-i8kvk78ur3] { font-size: 1.55rem; line-height: 1; font-variant-numeric: tabular-nums; }
.history-stat span[b-i8kvk78ur3] { color: var(--wl-text-secondary); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; }

/* ---- legacy note ---- */
.legacy-note[b-i8kvk78ur3] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-radius: 10px;
    padding: 1rem 1.1rem;
    background: rgba(var(--wl-gold-rgb), 0.06);
}
.legacy-note-ic[b-i8kvk78ur3] {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    padding: 0.5rem;
    border-radius: 9px;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.26);
}
.legacy-note-ic svg[b-i8kvk78ur3] { width: 100%; height: 100%; }
.legacy-note > div[b-i8kvk78ur3] { display: grid; gap: 0.2rem; }
.legacy-note strong[b-i8kvk78ur3] { font-size: 1.05rem; }
.legacy-note span[b-i8kvk78ur3] { color: var(--wl-text-secondary); font-size: 0.88rem; }

/* ---- chart run ---- */
.history-run[b-i8kvk78ur3] { margin-bottom: 1.25rem; }
.history-bars[b-i8kvk78ur3] {
    min-height: 220px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 12px;
    padding: 1.25rem 1rem 0.85rem;
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
    overflow-x: auto;
    background:
        linear-gradient(180deg, rgba(var(--wl-contrast-rgb), 0.04), rgba(var(--wl-contrast-rgb), 0.015)),
        repeating-linear-gradient(180deg, transparent 0 43px, rgba(var(--wl-contrast-rgb), 0.05) 44px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.history-bar[b-i8kvk78ur3] {
    position: relative;
    min-width: 30px;
    flex: 1 0 30px;
    background: linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.55), rgba(var(--wl-gold-rgb), 0.16));
    border-radius: 5px 5px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 0.35rem;
    color: var(--wl-text-secondary);
    font-weight: 800;
    font-size: 0.72rem;
    transition: filter 0.16s ease;
}
.history-bar:hover[b-i8kvk78ur3] { filter: brightness(1.15); }
.history-bar.is-peak[b-i8kvk78ur3] {
    background: linear-gradient(180deg, #f7d774, var(--wl-gold));
    color: #1a1208;
    box-shadow: 0 -8px 24px rgba(var(--wl-gold-rgb), 0.35);
}

/* ---- table ---- */
.history-table[b-i8kvk78ur3] { display: grid; gap: 0.5rem; }
.history-row[b-i8kvk78ur3] {
    display: grid;
    grid-template-columns: 92px 80px 84px minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 9px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    background: rgba(var(--wl-contrast-rgb), 0.025);
    align-items: center;
}
.history-row > *[b-i8kvk78ur3] { min-width: 0; }
.history-week[b-i8kvk78ur3] { color: var(--wl-text-secondary); font-weight: 700; font-size: 0.85rem; }
.history-pos[b-i8kvk78ur3] { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.history-pos.is-one[b-i8kvk78ur3] { color: var(--wl-gold); }
.history-move[b-i8kvk78ur3] { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.history-move.is-up[b-i8kvk78ur3] { color: #34d399; }
.history-move.is-down[b-i8kvk78ur3] { color: #f87171; }
.history-move.is-flat[b-i8kvk78ur3] { color: var(--wl-text-muted); }
.history-move.is-new[b-i8kvk78ur3] { color: var(--wl-gold); font-weight: 800; }
.history-points[b-i8kvk78ur3] { color: var(--wl-text-secondary); text-align: right; font-variant-numeric: tabular-nums; font-size: 0.85rem; }

/* ---- empty / loading ---- */
.history-loading[b-i8kvk78ur3],
.history-empty[b-i8kvk78ur3] {
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding: 3.5rem 1rem;
    text-align: center;
    color: var(--wl-text-secondary);
}
.history-empty-panel[b-i8kvk78ur3] { border: 1px solid rgba(var(--wl-gold-rgb), 0.2); border-radius: 12px; background: rgba(var(--wl-contrast-rgb), 0.02); }
.history-empty-ic[b-i8kvk78ur3] {
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    padding: 0.85rem;
    border-radius: 14px;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
}
.history-empty-ic svg[b-i8kvk78ur3] { width: 100%; height: 100%; }
.history-empty h1[b-i8kvk78ur3], .history-empty h2[b-i8kvk78ur3] { margin: 0; font-size: 1.5rem; }

@media (max-width: 720px) {
    .song-history-page[b-i8kvk78ur3] { padding: 1rem 1rem 5rem; }
    .history-header[b-i8kvk78ur3] { padding: 1.5rem; }
    .history-hero-emblem[b-i8kvk78ur3] { width: 8.5rem; height: 8.5rem; right: -1.5rem; }
    .history-stats[b-i8kvk78ur3] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .history-row[b-i8kvk78ur3] { grid-template-columns: 76px 64px minmax(0, 1fr); }
    .history-row .history-points[b-i8kvk78ur3] { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 420px) {
    .history-stats[b-i8kvk78ur3] { grid-template-columns: 1fr 1fr; }
    .history-stat strong[b-i8kvk78ur3] { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .history-bar[b-i8kvk78ur3], .history-back[b-i8kvk78ur3] { transition: none; }
    .history-back:hover[b-i8kvk78ur3] { transform: none; }
}
/* /Components/Pages/Career/Music/Concerts/Details.razor.rz.scp.css */
/* ============================================
   CONCERT DETAILS / REPORT PAGE
   Hollywood Glamour Aesthetic
   ============================================ */

.concert-details[b-0ay69864hf] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
}

/* ============================================
   BACK LINK
   ============================================ */

.back-link[b-0ay69864hf] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    transition: all 0.2s ease;
}

.back-link:hover[b-0ay69864hf] {
    color: var(--wl-gold);
}

.back-link svg[b-0ay69864hf] {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
}

.back-link:hover svg[b-0ay69864hf] {
    transform: translateX(-3px);
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-state[b-0ay69864hf] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 50vh;
}

.loading-spinner[b-0ay69864hf] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-0ay69864hf 0.8s linear infinite;
}

@keyframes spin-b-0ay69864hf {
    to { transform: rotate(360deg); }
}

/* ============================================
   REPORT HEADER (Completed Concert)
   ============================================ */

.report-header[b-0ay69864hf] {
    position: relative;
    padding: 3rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.15) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1.5rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow:
        0 0 80px rgba(var(--wl-gold-rgb), 0.1),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

.report-header-bg[b-0ay69864hf] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, var(--wl-gold-bg-hover) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 30%);
    pointer-events: none;
}

.report-header-content[b-0ay69864hf] {
    position: relative;
    z-index: 1;
}

.report-eyebrow[b-0ay69864hf] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--wl-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
}

.report-title[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.5rem;
    font-weight: 400;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-gold) 50%, var(--wl-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0.25rem 0 1rem 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.report-meta[b-0ay69864hf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.report-date[b-0ay69864hf] {
    font-size: 0.85rem;
    color: var(--wl-text-secondary);
}

/* Badges */
.badge[b-0ay69864hf] {
    padding: 0.3rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.badge-sold-out[b-0ay69864hf] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
}

.badge-legendary[b-0ay69864hf] {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ef4444 100%);
    color: #fff;
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.5);
    animation: legendary-glow-b-0ay69864hf 2s ease-in-out infinite;
}

@keyframes legendary-glow-b-0ay69864hf {
    0%, 100% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.4); }
    50% { box-shadow: 0 0 35px rgba(245, 158, 11, 0.7), 0 0 60px rgba(239, 68, 68, 0.3); }
}

/* Venue tier badges (reused from Index) */
.venue-tier-badge[b-0ay69864hf] {
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.tier-club[b-0ay69864hf] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.7);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
}

.tier-theater[b-0ay69864hf] {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.25);
}

.tier-hall[b-0ay69864hf] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    color: var(--wl-purple);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.25);
}

.tier-arena[b-0ay69864hf] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
}

.tier-stadium[b-0ay69864hf] {
    background: rgba(244, 63, 94, 0.12);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.25);
}

.tier-festival[b-0ay69864hf] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15), rgba(244, 63, 94, 0.15));
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
}

/* ============================================
   REPORT SECTIONS
   ============================================ */

.report-section[b-0ay69864hf] {
    padding: 1.5rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.report-section:hover[b-0ay69864hf] {
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
}

.section-heading[b-0ay69864hf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0 0 1.25rem 0;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--wl-border-medium);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.section-heading-icon[b-0ay69864hf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.4rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.section-heading-icon svg[b-0ay69864hf] {
    width: 1.125rem;
    height: 1.125rem;
}

.section-heading-icon.revenue-icon[b-0ay69864hf] {
    color: var(--wl-gold);
    background: var(--wl-gold-bg-hover);
}

.section-heading-icon.cost-icon[b-0ay69864hf] {
    color: #f87171;
    background: rgba(248, 113, 113, 0.1);
}

.section-heading-icon.fame-icon[b-0ay69864hf] {
    color: var(--wl-purple);
    background: rgba(var(--wl-purple-rgb), 0.12);
}

.section-heading-icon.momentum-icon[b-0ay69864hf] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

.section-heading-icon.tour-icon[b-0ay69864hf] {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.12);
}

/* ============================================
   ATTENDANCE SECTION
   ============================================ */

.attendance-display[b-0ay69864hf] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.attendance-numbers[b-0ay69864hf] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.attendance-actual[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.75rem;
    color: var(--wl-text-primary);
    line-height: 1;
    letter-spacing: 0.02em;
}

.attendance-separator[b-0ay69864hf] {
    font-size: 1.5rem;
    color: var(--wl-text-muted);
    margin: 0 0.125rem;
}

.attendance-max[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-text-muted);
    letter-spacing: 0.02em;
}

.attendance-bar-container[b-0ay69864hf] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.attendance-bar[b-0ay69864hf] {
    flex: 1;
    height: 8px;
    background: var(--wl-border-medium);
    border-radius: 4px;
    overflow: hidden;
}

.attendance-bar-fill[b-0ay69864hf] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.attendance-full[b-0ay69864hf] {
    background: linear-gradient(90deg, var(--wl-gold), #f59e0b);
    box-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.5);
}

.attendance-high[b-0ay69864hf] {
    background: linear-gradient(90deg, #22c55e, #10b981);
}

.attendance-medium[b-0ay69864hf] {
    background: linear-gradient(90deg, #f59e0b, #eab308);
}

.attendance-low[b-0ay69864hf] {
    background: linear-gradient(90deg, #ef4444, #f97316);
}

.attendance-percent[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-text-secondary);
    letter-spacing: 0.02em;
    min-width: 3rem;
    text-align: right;
}

.livestream-viewers[b-0ay69864hf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
}

.livestream-viewers svg[b-0ay69864hf] {
    width: 1.125rem;
    height: 1.125rem;
    color: #60a5fa;
}

/* ============================================
   CROWD ENERGY
   ============================================ */

.energy-display[b-0ay69864hf] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.energy-value-large[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    line-height: 1;
    letter-spacing: 0.02em;
}

.energy-value-large.energy-high[b-0ay69864hf] {
    color: #22c55e;
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.4);
}

.energy-value-large.energy-medium[b-0ay69864hf] {
    color: var(--wl-gold);
    text-shadow: 0 0 30px rgba(var(--wl-gold-rgb), 0.4);
}

.energy-value-large.energy-low[b-0ay69864hf] {
    color: #f97316;
    text-shadow: 0 0 30px rgba(249, 115, 22, 0.4);
}

.energy-value-large.energy-critical[b-0ay69864hf] {
    color: #ef4444;
    text-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
}

.energy-bar-container[b-0ay69864hf] {
    flex: 1;
}

.energy-bar[b-0ay69864hf] {
    width: 100%;
    height: 10px;
    background: var(--wl-border-medium);
    border-radius: 5px;
    overflow: hidden;
}

.energy-bar-fill[b-0ay69864hf] {
    height: 100%;
    border-radius: 5px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.energy-bar-fill.energy-high[b-0ay69864hf] {
    background: linear-gradient(90deg, #22c55e, #10b981);
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.4);
}

.energy-bar-fill.energy-medium[b-0ay69864hf] {
    background: linear-gradient(90deg, var(--wl-gold), #f59e0b);
    box-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.4);
}

.energy-bar-fill.energy-low[b-0ay69864hf] {
    background: linear-gradient(90deg, #f97316, #eab308);
}

.energy-bar-fill.energy-critical[b-0ay69864hf] {
    background: linear-gradient(90deg, #ef4444, #f97316);
}

/* ============================================
   SETLIST TRACKS
   ============================================ */

.setlist-tracks[b-0ay69864hf] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.setlist-track[b-0ay69864hf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    transition: background 0.2s ease;
    position: relative;
}

.setlist-track:last-of-type[b-0ay69864hf] {
    border-bottom: none;
}

.setlist-track:nth-child(odd)[b-0ay69864hf] {
    background: rgba(var(--wl-contrast-rgb), 0.02);
}

.setlist-track:hover[b-0ay69864hf] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.encore-track[b-0ay69864hf] {
    border-top: 2px solid rgba(var(--wl-gold-rgb), 0.2);
    margin-top: 0.5rem;
    padding-top: 1rem;
}

.encore-badge[b-0ay69864hf] {
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-radius: 0.25rem;
}

.track-position[b-0ay69864hf] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: var(--wl-text-muted);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.track-info[b-0ay69864hf] {
    flex: 1;
    min-width: 0;
}

.track-title[b-0ay69864hf] {
    font-size: 0.9rem;
    color: var(--wl-text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-energy-delta[b-0ay69864hf] {
    flex-shrink: 0;
}

.energy-delta[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.delta-positive[b-0ay69864hf] {
    color: #22c55e;
}

.delta-negative[b-0ay69864hf] {
    color: #ef4444;
}

/* ============================================
   CONCERT EVENTS IN SETLIST
   ============================================ */

.event-entry[b-0ay69864hf] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 1rem 0.625rem 3.5rem;
    border-left: 3px solid transparent;
    font-size: 0.825rem;
}

.event-entry.event-positive[b-0ay69864hf] {
    border-left-color: #22c55e;
    background: rgba(34, 197, 94, 0.04);
}

.event-entry.event-negative[b-0ay69864hf] {
    border-left-color: #ef4444;
    background: rgba(239, 68, 68, 0.04);
}

.event-entry.event-neutral[b-0ay69864hf] {
    border-left-color: #60a5fa;
    background: rgba(96, 165, 250, 0.04);
}

.event-icon[b-0ay69864hf] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
}

.event-icon svg[b-0ay69864hf] {
    width: 100%;
    height: 100%;
}

.event-positive .event-icon[b-0ay69864hf] {
    color: #22c55e;
}

.event-negative .event-icon[b-0ay69864hf] {
    color: #ef4444;
}

.event-neutral .event-icon[b-0ay69864hf] {
    color: #60a5fa;
}

.event-details[b-0ay69864hf] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.event-name[b-0ay69864hf] {
    font-weight: 500;
    color: var(--wl-text-primary);
}

.event-flavor[b-0ay69864hf] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

.event-impact[b-0ay69864hf] {
    flex-shrink: 0;
}

.impact[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.impact-positive[b-0ay69864hf] {
    color: #22c55e;
}

.impact-negative[b-0ay69864hf] {
    color: #ef4444;
}

/* ============================================
   FINANCIAL TABLE
   ============================================ */

.financial-table[b-0ay69864hf] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.financial-row[b-0ay69864hf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.financial-row:last-child[b-0ay69864hf] {
    border-bottom: none;
}

.financial-row:nth-child(odd)[b-0ay69864hf] {
    background: rgba(var(--wl-contrast-rgb), 0.015);
    border-radius: 0.375rem;
}

.financial-row-total[b-0ay69864hf] {
    border-top: 2px solid rgba(var(--wl-contrast-rgb), 0.1);
    margin-top: 0.25rem;
    padding-top: 1rem;
}

.financial-row-hint[b-0ay69864hf] {
    cursor: help;
}

.financial-row-hint .financial-label[b-0ay69864hf] {
    text-decoration: underline dotted rgba(var(--wl-contrast-rgb), 0.25);
    text-underline-offset: 3px;
}

.financial-label[b-0ay69864hf] {
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
}

.financial-value[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.02em;
}

.revenue-text[b-0ay69864hf] {
    color: var(--wl-gold);
}

.cost-text[b-0ay69864hf] {
    color: #f87171;
}

.total-value[b-0ay69864hf] {
    font-size: 1.375rem;
    text-shadow: 0 0 15px rgba(var(--wl-gold-rgb), 0.2);
}

/* ============================================
   PROFIT SECTION
   ============================================ */

.profit-section[b-0ay69864hf] {
    text-align: center;
}

.profit-section.profit-positive[b-0ay69864hf] {
    border-color: rgba(34, 197, 94, 0.25);
    background: linear-gradient(145deg,
        rgba(34, 197, 94, 0.06) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
}

.profit-section.profit-negative[b-0ay69864hf] {
    border-color: rgba(239, 68, 68, 0.25);
    background: linear-gradient(145deg,
        rgba(239, 68, 68, 0.06) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
}

.profit-display[b-0ay69864hf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.profit-label[b-0ay69864hf] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--wl-text-muted);
    font-weight: 600;
}

.profit-value[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.02em;
    line-height: 1;
}

.profit-green[b-0ay69864hf] {
    color: #22c55e;
    text-shadow: 0 0 30px rgba(34, 197, 94, 0.4);
}

.profit-red[b-0ay69864hf] {
    color: #ef4444;
    text-shadow: 0 0 30px rgba(239, 68, 68, 0.4);
}

/* ============================================
   FAME & FANS SECTION
   ============================================ */

.fame-stats[b-0ay69864hf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.fame-stat-card[b-0ay69864hf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.875rem;
    transition: all 0.3s ease;
}

.fame-stat-card:hover[b-0ay69864hf] {
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--wl-shadow-color);
}

.fame-stat-value[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    line-height: 1;
    letter-spacing: 0.02em;
}

.fame-value[b-0ay69864hf] {
    color: var(--wl-purple);
    text-shadow: 0 0 15px rgba(var(--wl-purple-rgb), 0.3);
}

.negative-value[b-0ay69864hf] {
    color: #ef4444;
}

.fan-casual[b-0ay69864hf] {
    color: #60a5fa;
}

.fan-regular[b-0ay69864hf] {
    color: #22c55e;
}

.fan-hardcore[b-0ay69864hf] {
    color: var(--wl-gold);
    text-shadow: 0 0 15px rgba(var(--wl-gold-rgb), 0.3);
}

.fame-stat-label[b-0ay69864hf] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--wl-text-muted);
    margin-top: 0.375rem;
    font-weight: 500;
    text-align: center;
}

/* ============================================
   MOMENTUM BOOSTS
   ============================================ */

.momentum-list[b-0ay69864hf] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.momentum-item[b-0ay69864hf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.75rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.momentum-item:last-child[b-0ay69864hf] {
    border-bottom: none;
}

.momentum-item:nth-child(odd)[b-0ay69864hf] {
    background: rgba(var(--wl-contrast-rgb), 0.015);
    border-radius: 0.375rem;
}

.momentum-song[b-0ay69864hf] {
    font-size: 0.9rem;
    color: var(--wl-text-primary);
    font-weight: 500;
}

.momentum-delta[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.02em;
}

/* ============================================
   TOUR INFO
   ============================================ */

.section-tour-info[b-0ay69864hf] {
    border-left: 4px solid #60a5fa;
    box-shadow: inset 4px 0 20px rgba(96, 165, 250, 0.05);
}

.tour-info-card[b-0ay69864hf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.tour-info-name[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tour-info-progress[b-0ay69864hf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    max-width: 300px;
}

.tour-info-count[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-text-secondary);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.tour-progress-bar-mini[b-0ay69864hf] {
    flex: 1;
    height: 6px;
    background: var(--wl-border-medium);
    border-radius: 3px;
    overflow: hidden;
}

.tour-progress-fill-mini[b-0ay69864hf] {
    height: 100%;
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   PLANNED CONCERT HEADER
   ============================================ */

.planned-header[b-0ay69864hf] {
    position: relative;
    padding: 3rem;
    background: linear-gradient(135deg,
        rgba(96, 165, 250, 0.1) 0%,
        rgba(96, 165, 250, 0.03) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 1.5rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.planned-header-bg[b-0ay69864hf] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.08) 0%, transparent 40%);
    pointer-events: none;
}

.planned-header-content[b-0ay69864hf] {
    position: relative;
    z-index: 1;
}

.planned-eyebrow[b-0ay69864hf] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #60a5fa;
    font-weight: 700;
}

.planned-title[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0.25rem 0 1rem 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.planned-meta[b-0ay69864hf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.planned-status-badge[b-0ay69864hf] {
    padding: 0.3rem 0.875rem;
    background: rgba(96, 165, 250, 0.15);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 2rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: #60a5fa;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Planned Details Grid */
.planned-details-grid[b-0ay69864hf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.25rem;
}

.planned-detail[b-0ay69864hf] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.planned-detail-label[b-0ay69864hf] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
    font-weight: 500;
}

.planned-detail-value[b-0ay69864hf] {
    font-size: 1rem;
    color: var(--wl-text-primary);
    font-weight: 600;
}

.livestream-active[b-0ay69864hf] {
    color: #22c55e;
}

/* Countdown */
.countdown-section[b-0ay69864hf] {
    text-align: center;
    border-color: rgba(96, 165, 250, 0.2);
    background: linear-gradient(145deg,
        rgba(96, 165, 250, 0.05) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
}

.countdown-display[b-0ay69864hf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.countdown-label[b-0ay69864hf] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--wl-text-muted);
    font-weight: 600;
}

.countdown-value[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    color: #60a5fa;
    text-shadow: 0 0 30px rgba(96, 165, 250, 0.3);
    letter-spacing: 0.05em;
}

/* Setlist empty hint */
.setlist-empty-hint[b-0ay69864hf] {
    color: var(--wl-text-muted);
    font-size: 0.875rem;
    font-style: italic;
    margin: 0;
    padding: 0.5rem 0;
}

/* ============================================
   ACTION BUTTONS (Planned Concert)
   ============================================ */

.planned-actions[b-0ay69864hf] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.action-btn[b-0ay69864hf] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.75rem;
    border: none;
    border-radius: 0.75rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-btn svg[b-0ay69864hf] {
    width: 1.125rem;
    height: 1.125rem;
}

.action-btn-primary[b-0ay69864hf] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    box-shadow:
        0 4px 20px rgba(var(--wl-gold-rgb), 0.35),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.25);
}

.action-btn-primary:hover[b-0ay69864hf] {
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px rgba(var(--wl-gold-rgb), 0.5),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.35);
}

.action-btn-secondary[b-0ay69864hf] {
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.06) 0%,
        rgba(var(--wl-contrast-rgb), 0.03) 100%);
    color: var(--wl-text-primary);
    border: 1px solid var(--wl-border-medium);
    box-shadow: 0 4px 15px var(--wl-shadow-color);
}

.action-btn-secondary:hover[b-0ay69864hf] {
    transform: translateY(-2px);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    box-shadow:
        0 8px 25px var(--wl-shadow-color),
        0 0 15px var(--wl-gold-bg);
}

.action-btn-danger[b-0ay69864hf] {
    background: rgba(239, 68, 68, 0.08);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.action-btn-danger:hover[b-0ay69864hf] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.15);
}

/* ============================================
   CANCELLED CONCERT HEADER
   ============================================ */

.cancelled-header[b-0ay69864hf] {
    position: relative;
    padding: 3rem;
    background: linear-gradient(135deg,
        rgba(239, 68, 68, 0.08) 0%,
        rgba(239, 68, 68, 0.02) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 1.5rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.cancelled-header-bg[b-0ay69864hf] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(239, 68, 68, 0.06) 0%, transparent 40%);
    pointer-events: none;
}

.cancelled-header-content[b-0ay69864hf] {
    position: relative;
    z-index: 1;
}

.cancelled-eyebrow[b-0ay69864hf] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #f87171;
    font-weight: 700;
}

.cancelled-title[b-0ay69864hf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 1rem 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: line-through;
    text-decoration-color: rgba(239, 68, 68, 0.4);
}

.cancelled-meta[b-0ay69864hf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cancelled-status-badge[b-0ay69864hf] {
    padding: 0.3rem 0.875rem;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 2rem;
    font-size: 0.65rem;
    font-weight: 600;
    color: #f87171;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Cancelled Notice */
.cancelled-notice[b-0ay69864hf] {
    border-color: rgba(239, 68, 68, 0.2);
    background: linear-gradient(145deg,
        rgba(239, 68, 68, 0.05) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
}

.cancelled-message[b-0ay69864hf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
}

.cancelled-message svg[b-0ay69864hf] {
    width: 2rem;
    height: 2rem;
    color: #f87171;
    flex-shrink: 0;
}

.cancelled-message p[b-0ay69864hf] {
    margin: 0;
    color: var(--wl-text-secondary);
    font-size: 1rem;
    line-height: 1.5;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .concert-details[b-0ay69864hf] {
        padding: 1rem;
    }

    .report-header[b-0ay69864hf],
    .planned-header[b-0ay69864hf],
    .cancelled-header[b-0ay69864hf] {
        padding: 2rem 1.5rem;
    }

    .report-title[b-0ay69864hf],
    .planned-title[b-0ay69864hf],
    .cancelled-title[b-0ay69864hf] {
        font-size: 2.5rem;
    }

    .attendance-actual[b-0ay69864hf] {
        font-size: 2rem;
    }

    .energy-display[b-0ay69864hf] {
        flex-direction: column;
        align-items: flex-start;
    }

    .energy-value-large[b-0ay69864hf] {
        font-size: 2.25rem;
    }

    .profit-value[b-0ay69864hf] {
        font-size: 2rem;
    }

    .fame-stats[b-0ay69864hf] {
        grid-template-columns: repeat(2, 1fr);
    }

    .planned-details-grid[b-0ay69864hf] {
        grid-template-columns: 1fr 1fr;
    }

    .planned-actions[b-0ay69864hf] {
        flex-direction: column;
    }

    .action-btn[b-0ay69864hf] {
        width: 100%;
        justify-content: center;
    }

    .tour-info-card[b-0ay69864hf] {
        flex-direction: column;
        align-items: flex-start;
    }

    .tour-info-progress[b-0ay69864hf] {
        width: 100%;
        max-width: none;
    }

    .countdown-value[b-0ay69864hf] {
        font-size: 2rem;
    }

    .setlist-track[b-0ay69864hf] {
        padding: 0.75rem 0.5rem;
    }

    .event-entry[b-0ay69864hf] {
        padding-left: 2rem;
    }
}

@media (max-width: 480px) {
    .planned-details-grid[b-0ay69864hf] {
        grid-template-columns: 1fr;
    }

    .fame-stats[b-0ay69864hf] {
        grid-template-columns: 1fr;
    }

    .report-meta[b-0ay69864hf],
    .planned-meta[b-0ay69864hf],
    .cancelled-meta[b-0ay69864hf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}
/* /Components/Pages/Career/Music/Concerts/Index.razor.rz.scp.css */
/* ============================================
   CONCERTS HUB - Hollywood Glamour Aesthetic
   Stage-inspired design with gold accents
   ============================================ */

.concerts-hub[b-u7wk34q8bv] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
}

/* ============================================
   HEADER - Cinematic banner with stats
   ============================================ */

.hub-header[b-u7wk34q8bv] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 3rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.12) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 1.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow:
        0 0 60px rgba(var(--wl-gold-rgb), 0.08),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

.header-bg-pattern[b-u7wk34q8bv] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, var(--wl-gold-bg-hover) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 30%),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 80px,
            rgba(var(--wl-gold-rgb), 0.03) 80px,
            rgba(var(--wl-gold-rgb), 0.03) 81px
        );
    pointer-events: none;
}

.header-content[b-u7wk34q8bv] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 2rem;
    z-index: 1;
}

.header-left[b-u7wk34q8bv] {
    flex: 1;
}

.header-title-group[b-u7wk34q8bv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-u7wk34q8bv] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--wl-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
}

.hub-header h1[b-u7wk34q8bv] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.5rem;
    font-weight: 400;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-gold) 50%, var(--wl-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.header-subtitle[b-u7wk34q8bv] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 1rem;
    margin: 0.5rem 0 0 0;
    font-weight: 400;
}

/* Header Stats */
.header-stats[b-u7wk34q8bv] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.stat-card[b-u7wk34q8bv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    min-width: 110px;
    box-shadow:
        0 4px 20px var(--wl-shadow-color),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
    transition: all 0.3s ease;
}

.stat-card:hover[b-u7wk34q8bv] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px var(--wl-shadow-color),
        0 0 20px var(--wl-gold-bg);
}

.stat-value[b-u7wk34q8bv] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.25rem;
    color: var(--wl-text-primary);
    line-height: 1;
    letter-spacing: 0.02em;
}

.stat-label[b-u7wk34q8bv] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-text-muted);
    margin-top: 0.375rem;
    font-weight: 500;
}

.stat-revenue .stat-value[b-u7wk34q8bv] {
    color: var(--wl-gold);
    text-shadow: 0 0 30px rgba(var(--wl-gold-rgb), 0.4);
}

/* Tour Indicator */
.stat-tour[b-u7wk34q8bv] {
    cursor: help;
}

.tour-indicator[b-u7wk34q8bv] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tour-icon[b-u7wk34q8bv] {
    width: 2rem;
    height: 2rem;
}

.tour-active[b-u7wk34q8bv] {
    color: #22c55e;
    filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.4));
}

.tour-none[b-u7wk34q8bv] {
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

/* Header Decoration */
.header-decoration[b-u7wk34q8bv] {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.2;
}

.stage-icon[b-u7wk34q8bv] {
    width: 200px;
    height: 200px;
    color: var(--wl-gold);
    filter: drop-shadow(0 0 20px rgba(var(--wl-gold-rgb), 0.3));
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.action-buttons[b-u7wk34q8bv] {
    display: flex;
    gap: 1rem;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
}

.cta-button[b-u7wk34q8bv] {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 2.25rem;
    border: none;
    border-radius: 0.875rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cta-primary[b-u7wk34q8bv] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    box-shadow:
        0 4px 20px rgba(var(--wl-gold-rgb), 0.35),
        0 0 40px var(--wl-gold-bg-hover),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.25);
}

.cta-primary:hover[b-u7wk34q8bv] {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 8px 35px rgba(var(--wl-gold-rgb), 0.5),
        0 0 60px var(--wl-gold-border),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.35);
}

.cta-secondary[b-u7wk34q8bv] {
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.06) 0%,
        rgba(var(--wl-contrast-rgb), 0.03) 100%);
    color: var(--wl-text-primary);
    border: 1px solid var(--wl-border-medium);
    box-shadow:
        0 4px 15px var(--wl-shadow-color),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

.cta-secondary:hover[b-u7wk34q8bv] {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    box-shadow:
        0 8px 25px var(--wl-shadow-color),
        0 0 20px var(--wl-gold-bg),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.08);
}

.cta-button:active[b-u7wk34q8bv] {
    transform: translateY(-1px) scale(1.01);
}

.cta-icon svg[b-u7wk34q8bv],
.cta-arrow svg[b-u7wk34q8bv] {
    width: 1.25rem;
    height: 1.25rem;
}

.cta-arrow[b-u7wk34q8bv] {
    transition: transform 0.3s ease;
}

.cta-button:hover .cta-arrow[b-u7wk34q8bv] {
    transform: translateX(6px);
}

/* ============================================
   CONCERT SECTIONS
   ============================================ */

.concerts-sections[b-u7wk34q8bv] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.concert-section[b-u7wk34q8bv] {
    padding: 1.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1.25rem;
    transition: all 0.3s ease;
}

.concert-section:hover[b-u7wk34q8bv] {
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-contrast-rgb), 0.02) 100%);
}

.section-title[b-u7wk34q8bv] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-medium);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.section-icon[b-u7wk34q8bv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.section-icon svg[b-u7wk34q8bv] {
    width: 1.25rem;
    height: 1.25rem;
}

.section-count[b-u7wk34q8bv] {
    margin-left: auto;
    padding: 0.375rem 1rem;
    background: var(--wl-border-medium);
    border-radius: 2rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    letter-spacing: 0.05em;
}

/* Section accents */
.section-tour[b-u7wk34q8bv] {
    border-left: 4px solid #22c55e;
    box-shadow: inset 4px 0 20px rgba(34, 197, 94, 0.05);
}

.tour-icon-section[b-u7wk34q8bv] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

.section-upcoming[b-u7wk34q8bv] {
    border-left: 4px solid #60a5fa;
    box-shadow: inset 4px 0 20px rgba(96, 165, 250, 0.05);
}

.upcoming-icon[b-u7wk34q8bv] {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}

.section-past[b-u7wk34q8bv] {
    border-left: 4px solid var(--wl-gold);
    box-shadow: inset 4px 0 20px rgba(var(--wl-gold-rgb), 0.05);
}

.past-icon[b-u7wk34q8bv] {
    color: var(--wl-gold);
    background: var(--wl-gold-bg-hover);
}

/* ============================================
   TOUR CARD
   ============================================ */

.tour-card[b-u7wk34q8bv] {
    background: linear-gradient(145deg,
        rgba(34, 197, 94, 0.06) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.tour-card:hover[b-u7wk34q8bv] {
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.1);
}

.tour-header[b-u7wk34q8bv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.tour-name[b-u7wk34q8bv] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: var(--wl-text-primary);
    margin: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tour-status-badge[b-u7wk34q8bv] {
    padding: 0.375rem 1rem;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #22c55e;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.tour-details[b-u7wk34q8bv] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tour-progress-section[b-u7wk34q8bv] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tour-progress-label[b-u7wk34q8bv] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

.tour-progress-count[b-u7wk34q8bv] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
}

.tour-progress-bar[b-u7wk34q8bv] {
    width: 100%;
    height: 6px;
    background: var(--wl-border-medium);
    border-radius: 3px;
    overflow: hidden;
}

.tour-progress-fill[b-u7wk34q8bv] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #10b981);
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.tour-meta[b-u7wk34q8bv] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.tour-meta-item[b-u7wk34q8bv] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.meta-label[b-u7wk34q8bv] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
}

.meta-value[b-u7wk34q8bv] {
    font-size: 0.9rem;
    color: var(--wl-text-primary);
    font-weight: 500;
}

.momentum-value[b-u7wk34q8bv] {
    color: #22c55e;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

/* ============================================
   CONCERT GRID
   ============================================ */

.concert-grid[b-u7wk34q8bv] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* ============================================
   CONCERT CARDS
   ============================================ */

.concert-card[b-u7wk34q8bv] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    overflow: hidden;
}

.concert-card:hover[b-u7wk34q8bv] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px var(--wl-shadow-color),
        0 0 20px var(--wl-gold-bg);
}

.concert-card:hover .card-arrow[b-u7wk34q8bv] {
    opacity: 1;
    transform: translateX(0);
}

.card-header-row[b-u7wk34q8bv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.card-city[b-u7wk34q8bv] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}

.card-venue-tier[b-u7wk34q8bv] {
    display: flex;
    align-items: center;
}

.venue-tier-badge[b-u7wk34q8bv] {
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.tier-club[b-u7wk34q8bv] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.7);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
}

.tier-theater[b-u7wk34q8bv] {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.25);
}

.tier-hall[b-u7wk34q8bv] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    color: var(--wl-purple);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.25);
}

.tier-arena[b-u7wk34q8bv] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
}

.tier-stadium[b-u7wk34q8bv] {
    background: rgba(244, 63, 94, 0.12);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.25);
}

.tier-festival[b-u7wk34q8bv] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15), rgba(244, 63, 94, 0.15));
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
}

.card-details[b-u7wk34q8bv] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.card-detail[b-u7wk34q8bv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--wl-text-secondary);
}

.detail-icon[b-u7wk34q8bv] {
    width: 1rem;
    height: 1rem;
    opacity: 0.6;
}

.card-stats[b-u7wk34q8bv] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.card-stat[b-u7wk34q8bv] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.stat-mini-label[b-u7wk34q8bv] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
}

.stat-mini-value[b-u7wk34q8bv] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.revenue-text[b-u7wk34q8bv] {
    color: var(--wl-gold);
}

.energy-text.energy-high[b-u7wk34q8bv] {
    color: #22c55e;
}

.energy-text.energy-medium[b-u7wk34q8bv] {
    color: var(--wl-gold);
}

.energy-text.energy-low[b-u7wk34q8bv] {
    color: #f97316;
}

.energy-text.energy-critical[b-u7wk34q8bv] {
    color: #ef4444;
}

.sold-out-badge[b-u7wk34q8bv] {
    padding: 0.2rem 0.625rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    border-radius: 2rem;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--wl-bg-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.card-date[b-u7wk34q8bv] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.card-arrow[b-u7wk34q8bv] {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateX(-8px) translateY(-50%);
    opacity: 0;
    transition: all 0.3s ease;
    color: var(--wl-gold);
}

.card-arrow svg[b-u7wk34q8bv] {
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-u7wk34q8bv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.02) 0%,
        rgba(var(--wl-gold-rgb), 0.02) 100%);
    border: 2px dashed var(--wl-gold-border);
    border-radius: 1.5rem;
    transition: all 0.3s ease;
}

.empty-state:hover[b-u7wk34q8bv] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 100%);
}

.empty-icon[b-u7wk34q8bv] {
    width: 6rem;
    height: 6rem;
    margin-bottom: 2rem;
    color: rgba(var(--wl-gold-rgb), 0.3);
    animation: pulse-glow-b-u7wk34q8bv 3s ease-in-out infinite;
}

@keyframes pulse-glow-b-u7wk34q8bv {
    0%, 100% {
        filter: drop-shadow(0 0 10px var(--wl-gold-bg));
        opacity: 0.3;
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(var(--wl-gold-rgb), 0.3));
        opacity: 0.5;
    }
}

.empty-icon svg[b-u7wk34q8bv] {
    width: 100%;
    height: 100%;
}

.empty-state h3[b-u7wk34q8bv] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0 0 0.75rem 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.empty-state p[b-u7wk34q8bv] {
    color: var(--wl-text-muted);
    margin: 0 0 2rem 0;
    max-width: 420px;
    line-height: 1.6;
}

.empty-cta[b-u7wk34q8bv] {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    border-radius: 0.75rem;
    color: var(--wl-bg-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 20px rgba(var(--wl-gold-rgb), 0.3),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.2);
}

.empty-cta:hover[b-u7wk34q8bv] {
    transform: translateY(-3px);
    box-shadow:
        0 8px 30px rgba(var(--wl-gold-rgb), 0.45),
        0 0 40px var(--wl-gold-bg-hover),
        inset 0 1px 0 var(--wl-text-muted);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .header-content[b-u7wk34q8bv] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-stats[b-u7wk34q8bv] {
        width: 100%;
        justify-content: flex-start;
    }

    .header-decoration[b-u7wk34q8bv] {
        display: none;
    }
}

@media (max-width: 768px) {
    .concerts-hub[b-u7wk34q8bv] {
        padding: 1rem;
    }

    .hub-header[b-u7wk34q8bv] {
        padding: 1.5rem;
    }

    .hub-header h1[b-u7wk34q8bv] {
        font-size: 2.5rem;
    }

    .header-stats[b-u7wk34q8bv] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .stat-card[b-u7wk34q8bv] {
        flex: 1;
        min-width: 90px;
        padding: 1rem;
    }

    .stat-value[b-u7wk34q8bv] {
        font-size: 1.75rem;
    }

    .action-buttons[b-u7wk34q8bv] {
        flex-direction: column;
    }

    .cta-button[b-u7wk34q8bv] {
        width: 100%;
        justify-content: center;
    }

    .concert-grid[b-u7wk34q8bv] {
        grid-template-columns: 1fr;
    }

    .section-title[b-u7wk34q8bv] {
        font-size: 1.25rem;
    }

    .tour-name[b-u7wk34q8bv] {
        font-size: 1.375rem;
    }

    .tour-meta[b-u7wk34q8bv] {
        flex-direction: column;
        gap: 1rem;
    }

    .empty-state[b-u7wk34q8bv] {
        padding: 3rem 1.5rem;
    }

    .empty-state h3[b-u7wk34q8bv] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/Career/Music/Concerts/Live.razor.rz.scp.css */
/* ============================================
   LIVE CONCERT SIMULATION - Hollywood Glamour
   Interactive concert performance page
   ============================================ */

.live-concert[b-9yz1zuwowh] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ============================================
   HEADER
   ============================================ */

.live-header[b-9yz1zuwowh] {
    position: relative;
    padding: 2rem 3rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.12) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow:
        0 0 60px rgba(var(--wl-gold-rgb), 0.08),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

.live-header .header-bg-pattern[b-9yz1zuwowh] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, var(--wl-gold-bg-hover) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 30%);
    pointer-events: none;
}

.live-header .header-content[b-9yz1zuwowh] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.live-header .header-left[b-9yz1zuwowh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.back-link[b-9yz1zuwowh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-link:hover[b-9yz1zuwowh] {
    color: var(--wl-gold);
}

.back-link svg[b-9yz1zuwowh] {
    width: 1rem;
    height: 1rem;
}

.header-title-group[b-9yz1zuwowh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-9yz1zuwowh] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--wl-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
}

.live-header h1[b-9yz1zuwowh] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-gold) 50%, var(--wl-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.header-right[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
}

.song-counter[b-9yz1zuwowh] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.05em;
}

.counter-current[b-9yz1zuwowh] {
    font-size: 2.5rem;
    color: var(--wl-gold);
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
}

.counter-separator[b-9yz1zuwowh] {
    font-size: 1.5rem;
    color: var(--wl-text-muted);
}

.counter-total[b-9yz1zuwowh] {
    font-size: 1.5rem;
    color: var(--wl-text-secondary);
}

/* ============================================
   CROWD ENERGY BAR
   ============================================ */

.energy-section[b-9yz1zuwowh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1.25rem;
}

.energy-label-row[b-9yz1zuwowh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.energy-label[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.energy-label svg[b-9yz1zuwowh] {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--wl-gold);
}

.energy-value[b-9yz1zuwowh] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.05em;
    transition: color 0.5s ease;
}

.energy-value.energy-low[b-9yz1zuwowh] {
    color: #3b82f6;
    text-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}

.energy-value.energy-medium[b-9yz1zuwowh] {
    color: #eab308;
    text-shadow: 0 0 15px rgba(234, 179, 8, 0.4);
}

.energy-value.energy-high[b-9yz1zuwowh] {
    color: #ef4444;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.energy-value.energy-legendary[b-9yz1zuwowh] {
    color: var(--wl-gold);
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.6);
    animation: legendaryPulse-b-9yz1zuwowh 2s ease-in-out infinite;
}

@keyframes legendaryPulse-b-9yz1zuwowh {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.75; }
}

.energy-bar-container[b-9yz1zuwowh] {
    height: 2rem;
    background: var(--wl-bg-tertiary);
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 6px var(--wl-shadow-color);
}

.energy-bar-fill[b-9yz1zuwowh] {
    height: 100%;
    transition: width 0.8s ease-out;
    border-radius: 1rem;
    position: relative;
}

.energy-bar-fill.energy-low[b-9yz1zuwowh] {
    background: linear-gradient(90deg, #1d4ed8, #3b82f6);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

.energy-bar-fill.energy-medium[b-9yz1zuwowh] {
    background: linear-gradient(90deg, #3b82f6 0%, #eab308 100%);
    box-shadow: 0 0 10px rgba(234, 179, 8, 0.3);
}

.energy-bar-fill.energy-high[b-9yz1zuwowh] {
    background: linear-gradient(90deg, #3b82f6 0%, #eab308 40%, #ef4444 100%);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

.energy-bar-fill.energy-legendary[b-9yz1zuwowh] {
    background: linear-gradient(90deg, #3b82f6 0%, #eab308 30%, #ef4444 60%, var(--wl-gold) 100%);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
    animation: legendaryBarGlow-b-9yz1zuwowh 2s ease-in-out infinite;
}

@keyframes legendaryBarGlow-b-9yz1zuwowh {
    0%, 100% { box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5); }
    50% { box-shadow: 0 0 35px rgba(var(--wl-gold-rgb), 0.8); }
}

.encore-unlocked-badge[b-9yz1zuwowh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 1rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15), rgba(var(--wl-gold-rgb), 0.08));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.35);
    border-radius: 2rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    color: var(--wl-gold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    align-self: flex-start;
    animation: encoreFadeIn-b-9yz1zuwowh 0.6s ease-out;
}

.encore-unlocked-badge svg[b-9yz1zuwowh] {
    width: 0.875rem;
    height: 0.875rem;
}

@keyframes encoreFadeIn-b-9yz1zuwowh {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   EVENT PANEL
   ============================================ */

.event-panel[b-9yz1zuwowh] {
    padding: 2rem;
    border-radius: 1.25rem;
    border: 2px solid;
    animation: eventSlideIn-b-9yz1zuwowh 0.4s ease-out;
    position: relative;
    overflow: hidden;
}

.event-panel[b-9yz1zuwowh]::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.06;
    pointer-events: none;
}

.event-positive[b-9yz1zuwowh] {
    background: linear-gradient(145deg,
        rgba(34, 197, 94, 0.08) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border-color: rgba(34, 197, 94, 0.35);
}

.event-negative[b-9yz1zuwowh] {
    background: linear-gradient(145deg,
        rgba(239, 68, 68, 0.08) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border-color: rgba(239, 68, 68, 0.35);
}

.event-neutral[b-9yz1zuwowh] {
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.35);
}

@keyframes eventSlideIn-b-9yz1zuwowh {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

.event-header[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.event-badge[b-9yz1zuwowh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.875rem;
    background: rgba(var(--wl-gold-rgb), 0.15);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 2rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    color: var(--wl-gold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.event-badge svg[b-9yz1zuwowh] {
    width: 0.875rem;
    height: 0.875rem;
}

.event-name[b-9yz1zuwowh] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.event-flavor[b-9yz1zuwowh] {
    font-size: 0.9rem;
    color: var(--wl-text-secondary);
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

.event-choices[b-9yz1zuwowh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.event-choice-btn[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.875rem;
    color: var(--wl-text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.event-choice-btn:not(:disabled):hover[b-9yz1zuwowh] {
    border-color: var(--wl-gold);
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    transform: translateY(-2px);
    box-shadow:
        0 4px 20px var(--wl-shadow-color),
        0 0 15px rgba(var(--wl-gold-rgb), 0.15);
}

.event-choice-btn:disabled[b-9yz1zuwowh] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   CURRENT SONG / PERFORMANCE RESULT
   ============================================ */

.current-song-section[b-9yz1zuwowh] {
    min-height: 120px;
}

.performance-result[b-9yz1zuwowh] {
    padding: 1.75rem;
    border-radius: 1.25rem;
    border: 1px solid var(--wl-border-medium);
    animation: performanceFadeIn-b-9yz1zuwowh 0.5s ease-out;
    position: relative;
    overflow: hidden;
}

.performance-result.positive[b-9yz1zuwowh] {
    background: linear-gradient(145deg,
        rgba(34, 197, 94, 0.06) 0%,
        rgba(var(--wl-contrast-rgb), 0.02) 100%);
    border-color: rgba(34, 197, 94, 0.2);
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.08);
}

.performance-result.negative[b-9yz1zuwowh] {
    background: linear-gradient(145deg,
        rgba(239, 68, 68, 0.06) 0%,
        rgba(var(--wl-contrast-rgb), 0.02) 100%);
    border-color: rgba(239, 68, 68, 0.2);
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.08);
}

@keyframes performanceFadeIn-b-9yz1zuwowh {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.performance-song-info[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.performance-title[b-9yz1zuwowh] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.625rem;
    color: var(--wl-text-primary);
    margin: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.encore-tag[b-9yz1zuwowh] {
    padding: 0.2rem 0.625rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2), rgba(var(--wl-gold-rgb), 0.1));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.35);
    border-radius: 2rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.7rem;
    color: var(--wl-gold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.performance-stats[b-9yz1zuwowh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.performance-rating[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rating-stars[b-9yz1zuwowh] {
    display: flex;
    gap: 0.2rem;
}

.star-icon[b-9yz1zuwowh] {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--wl-text-muted);
    transition: color 0.2s ease;
}

.star-icon.filled[b-9yz1zuwowh] {
    color: var(--wl-gold);
}

.rating-number[b-9yz1zuwowh] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
}

.energy-delta[b-9yz1zuwowh] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.05em;
}

.delta-positive[b-9yz1zuwowh] {
    color: #22c55e;
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
}

.delta-negative[b-9yz1zuwowh] {
    color: #ef4444;
    text-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

.delta-arrow[b-9yz1zuwowh] {
    display: block;
}

.flavor-text[b-9yz1zuwowh] {
    font-size: 0.9rem;
    color: var(--wl-text-secondary);
    font-style: italic;
    line-height: 1.5;
}

.special-moment[b-9yz1zuwowh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.12), rgba(var(--wl-gold-rgb), 0.06));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.75rem;
    font-size: 0.85rem;
    color: var(--wl-gold);
    font-weight: 600;
    animation: specialMomentGlow-b-9yz1zuwowh 2s ease-in-out infinite;
}

.special-moment svg[b-9yz1zuwowh] {
    width: 1rem;
    height: 1rem;
}

@keyframes specialMomentGlow-b-9yz1zuwowh {
    0%, 100% { box-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.1); }
    50% { box-shadow: 0 0 25px rgba(var(--wl-gold-rgb), 0.3); }
}

.ready-card[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2.5rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 1.25rem;
    color: var(--wl-text-muted);
    font-size: 1rem;
}

.ready-card svg[b-9yz1zuwowh] {
    width: 1.5rem;
    height: 1.5rem;
    opacity: 0.5;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.action-buttons[b-9yz1zuwowh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

.action-btn[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem 1.25rem;
    border-radius: 1rem;
    border: 1px solid var(--wl-border-medium);
    cursor: pointer;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    color: inherit;
}

.action-btn svg[b-9yz1zuwowh] {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.action-btn:not(:disabled):hover[b-9yz1zuwowh] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px var(--wl-shadow-color);
}

.action-btn:disabled[b-9yz1zuwowh] {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-play[b-9yz1zuwowh] {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    border-color: var(--wl-gold);
    font-size: 1.375rem;
    padding: 1.25rem;
    box-shadow:
        0 4px 25px rgba(var(--wl-gold-rgb), 0.35),
        0 0 40px var(--wl-gold-bg-hover),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.25);
}

.action-play:not(:disabled):hover[b-9yz1zuwowh] {
    box-shadow:
        0 8px 40px rgba(var(--wl-gold-rgb), 0.5),
        0 0 60px var(--wl-gold-border),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.35);
}

.action-play.processing[b-9yz1zuwowh] {
    pointer-events: none;
}

.action-swap[b-9yz1zuwowh] {
    background: linear-gradient(145deg,
        rgba(var(--wl-purple-rgb), 0.08) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    color: var(--wl-purple);
    border-color: rgba(var(--wl-purple-rgb), 0.25);
}

.action-swap:not(:disabled):hover[b-9yz1zuwowh] {
    border-color: rgba(var(--wl-purple-rgb), 0.5);
    box-shadow: 0 6px 25px rgba(var(--wl-purple-rgb), 0.15);
}

.swap-free-badge[b-9yz1zuwowh] {
    padding: 0.15rem 0.5rem;
    background: rgba(34, 197, 94, 0.2);
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 2rem;
    font-size: 0.625rem;
    color: #22c55e;
    letter-spacing: 0.15em;
}

.action-address[b-9yz1zuwowh] {
    background: linear-gradient(145deg,
        rgba(96, 165, 250, 0.08) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.25);
}

.action-address:not(:disabled):hover[b-9yz1zuwowh] {
    border-color: rgba(96, 165, 250, 0.5);
    box-shadow: 0 6px 25px rgba(96, 165, 250, 0.15);
}

.action-auto[b-9yz1zuwowh] {
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.05) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    color: var(--wl-text-secondary);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
}

.action-auto:not(:disabled):hover[b-9yz1zuwowh] {
    border-color: rgba(var(--wl-contrast-rgb), 0.3);
}

.spinner[b-9yz1zuwowh] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(var(--wl-bg-primary-rgb), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-9yz1zuwowh 0.8s linear infinite;
}

@keyframes spin-b-9yz1zuwowh {
    to { transform: rotate(360deg); }
}

/* ============================================
   SWAP PICKER OVERLAY
   ============================================ */

.swap-overlay[b-9yz1zuwowh] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(6px);
    animation: overlayFadeIn-b-9yz1zuwowh 0.2s ease-out;
}

@keyframes overlayFadeIn-b-9yz1zuwowh {
    from { opacity: 0; }
    to { opacity: 1; }
}

.swap-picker[b-9yz1zuwowh] {
    width: 90%;
    max-width: 480px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    background: var(--wl-bg-secondary);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow:
        0 20px 60px var(--wl-shadow-color),
        0 0 40px rgba(var(--wl-gold-rgb), 0.1);
    animation: pickerSlideIn-b-9yz1zuwowh 0.3s ease-out;
}

@keyframes pickerSlideIn-b-9yz1zuwowh {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.swap-picker-header[b-9yz1zuwowh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--wl-border-medium);
}

.swap-picker-header h3[b-9yz1zuwowh] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    color: var(--wl-text-primary);
    margin: 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.swap-close-btn[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.swap-close-btn:hover[b-9yz1zuwowh] {
    color: var(--wl-text-primary);
    border-color: var(--wl-text-muted);
}

.swap-close-btn svg[b-9yz1zuwowh] {
    width: 1rem;
    height: 1rem;
}

.swap-song-list[b-9yz1zuwowh] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

.swap-song-item[b-9yz1zuwowh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.75rem;
    color: var(--wl-text-primary);
    cursor: pointer;
    font-size: 0.9rem;
    font-family: inherit;
    transition: all 0.2s ease;
    text-align: left;
}

.swap-song-item:hover[b-9yz1zuwowh] {
    background: rgba(var(--wl-gold-rgb), 0.06);
    border-color: rgba(var(--wl-gold-rgb), 0.2);
}

.swap-song-title[b-9yz1zuwowh] {
    font-weight: 500;
}

.swap-song-quality[b-9yz1zuwowh] {
    display: flex;
    gap: 0.125rem;
}

.mini-star[b-9yz1zuwowh] {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--wl-text-muted);
}

.mini-star.filled[b-9yz1zuwowh] {
    color: var(--wl-gold);
}

.swap-cost-warning[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem;
    border-top: 1px solid var(--wl-border-medium);
    color: #f97316;
    font-size: 0.85rem;
    font-weight: 500;
}

.swap-cost-warning svg[b-9yz1zuwowh] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   SETLIST MINIATURE
   ============================================ */

.setlist-section[b-9yz1zuwowh] {
    padding: 1.5rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1.25rem;
}

.setlist-title[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-text-secondary);
    margin: 0 0 1.25rem 0;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--wl-border-medium);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.setlist-title svg[b-9yz1zuwowh] {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--wl-gold);
}

.setlist-track[b-9yz1zuwowh] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.setlist-item[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.625rem;
    transition: all 0.3s ease;
}

.setlist-item-status[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.setlist-item-status svg[b-9yz1zuwowh] {
    width: 1rem;
    height: 1rem;
}

.setlist-item-info[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.setlist-song-name[b-9yz1zuwowh] {
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setlist-song-label[b-9yz1zuwowh] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

.setlist-item-delta[b-9yz1zuwowh] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

/* Played songs */
.setlist-item.played[b-9yz1zuwowh] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.setlist-item.played .setlist-item-status[b-9yz1zuwowh] {
    color: #22c55e;
}

.setlist-item.played .setlist-song-name[b-9yz1zuwowh] {
    color: var(--wl-text-muted);
}

.setlist-encore-badge[b-9yz1zuwowh] {
    padding: 0.1rem 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 2rem;
    font-size: 0.6rem;
    color: var(--wl-gold);
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Current song */
.setlist-item.current[b-9yz1zuwowh] {
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        rgba(var(--wl-gold-rgb), 0.03) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
}

.setlist-item.current .setlist-item-status[b-9yz1zuwowh] {
    color: var(--wl-gold);
}

.setlist-item.current .setlist-song-label[b-9yz1zuwowh] {
    color: var(--wl-gold);
    font-style: normal;
    font-weight: 600;
}

.current-pulse[b-9yz1zuwowh] {
    animation: currentSongPulse-b-9yz1zuwowh 2s ease-in-out infinite;
}

@keyframes currentSongPulse-b-9yz1zuwowh {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Upcoming songs */
.setlist-item.upcoming[b-9yz1zuwowh] {
    opacity: 0.5;
}

.upcoming-dot[b-9yz1zuwowh] {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--wl-text-muted);
    margin: 0 auto;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-state[b-9yz1zuwowh] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    min-height: 60vh;
}

.loading-spinner[b-9yz1zuwowh] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-9yz1zuwowh 1s linear infinite;
}

.cancelled-state[b-9yz1zuwowh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 5rem 2rem;
    min-height: 60vh;
    text-align: center;
}

.cancelled-state svg[b-9yz1zuwowh] {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--wl-text-secondary);
    opacity: 0.6;
}

.cancelled-message[b-9yz1zuwowh] {
    margin: 0;
    max-width: 28rem;
    color: var(--wl-text-primary);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1.5;
}

.cancelled-back-link[b-9yz1zuwowh] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.35rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.cancelled-back-link:hover[b-9yz1zuwowh] {
    color: var(--wl-gold);
    border-color: var(--wl-gold);
}

.cancelled-back-link svg[b-9yz1zuwowh] {
    width: 1.1rem;
    height: 1.1rem;
    opacity: 1;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .live-concert[b-9yz1zuwowh] {
        padding: 1rem;
        gap: 1rem;
    }

    .live-header[b-9yz1zuwowh] {
        padding: 1.5rem;
    }

    .live-header .header-content[b-9yz1zuwowh] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .live-header h1[b-9yz1zuwowh] {
        font-size: 2.25rem;
    }

    .song-counter[b-9yz1zuwowh] {
        align-self: flex-end;
    }

    .counter-current[b-9yz1zuwowh] {
        font-size: 2rem;
    }

    .counter-total[b-9yz1zuwowh] {
        font-size: 1.25rem;
    }

    .energy-section[b-9yz1zuwowh] {
        padding: 1.25rem;
    }

    .energy-bar-container[b-9yz1zuwowh] {
        height: 1.5rem;
    }

    .event-panel[b-9yz1zuwowh] {
        padding: 1.5rem;
    }

    .event-name[b-9yz1zuwowh] {
        font-size: 1.375rem;
    }

    .action-buttons[b-9yz1zuwowh] {
        grid-template-columns: 1fr;
    }

    .action-play[b-9yz1zuwowh] {
        grid-column: 1;
    }

    .performance-stats[b-9yz1zuwowh] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .performance-title[b-9yz1zuwowh] {
        font-size: 1.375rem;
    }

    .setlist-section[b-9yz1zuwowh] {
        padding: 1.25rem;
    }
}

@media (max-width: 480px) {
    .action-btn[b-9yz1zuwowh] {
        padding: 0.875rem 1rem;
        font-size: 1rem;
    }

    .performance-result[b-9yz1zuwowh] {
        padding: 1.25rem;
    }

    .energy-value[b-9yz1zuwowh] {
        font-size: 1.375rem;
    }
}
/* /Components/Pages/Career/Music/Concerts/Plan.razor.rz.scp.css */
/* ============================================
   PLAN CONCERT - Hollywood Glamour Aesthetic
   Form-based layout with card selectors
   ============================================ */

.plan-concert[b-68rsqi8tbt] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
}

/* ============================================
   HEADER
   ============================================ */

.plan-header[b-68rsqi8tbt] {
    position: relative;
    padding: 2rem 3rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.12) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 1.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow:
        0 0 60px rgba(var(--wl-gold-rgb), 0.08),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

.plan-header .header-bg-pattern[b-68rsqi8tbt] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, var(--wl-gold-bg-hover) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 30%);
    pointer-events: none;
}

.plan-header .header-content[b-68rsqi8tbt] {
    position: relative;
    z-index: 1;
}

.plan-header .header-left[b-68rsqi8tbt] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.back-link[b-68rsqi8tbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-link:hover[b-68rsqi8tbt] {
    color: var(--wl-gold);
}

.back-link svg[b-68rsqi8tbt] {
    width: 1rem;
    height: 1rem;
}

.header-title-group[b-68rsqi8tbt] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-68rsqi8tbt] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--wl-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
}

.plan-header h1[b-68rsqi8tbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-gold) 50%, var(--wl-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ============================================
   FORM SECTIONS
   ============================================ */

.form-section[b-68rsqi8tbt] {
    margin-bottom: 2rem;
    padding: 1.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1.25rem;
    transition: all 0.3s ease;
}

.form-section:hover[b-68rsqi8tbt] {
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
}

.section-title[b-68rsqi8tbt] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-medium);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.section-icon[b-68rsqi8tbt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.section-icon svg[b-68rsqi8tbt] {
    width: 1.25rem;
    height: 1.25rem;
}

.city-icon[b-68rsqi8tbt] {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}

.venue-icon[b-68rsqi8tbt] {
    color: var(--wl-gold);
    background: var(--wl-gold-bg-hover);
}

.production-icon[b-68rsqi8tbt] {
    color: var(--wl-purple);
    background: rgba(var(--wl-purple-rgb), 0.15);
}

.ticket-icon[b-68rsqi8tbt] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

.date-icon[b-68rsqi8tbt] {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}

.livestream-icon[b-68rsqi8tbt] {
    color: #f43f5e;
    background: rgba(244, 63, 94, 0.15);
}

.support-icon[b-68rsqi8tbt] {
    color: #f97316;
    background: rgba(249, 115, 22, 0.15);
}

.summary-icon[b-68rsqi8tbt] {
    color: var(--wl-gold);
    background: var(--wl-gold-bg-hover);
}

.optional-label[b-68rsqi8tbt] {
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--wl-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================
   CITY INFO
   ============================================ */

.city-picker[b-68rsqi8tbt] {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 1rem;
    max-width: 40rem;
}

.city-selector[b-68rsqi8tbt] {
    position: relative;
}

.city-search[b-68rsqi8tbt] {
    padding-right: 2.75rem;
}

.city-dropdown[b-68rsqi8tbt] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    max-height: 18rem;
    overflow-y: auto;
    background: rgba(var(--wl-bg-modal-rgb), 0.98);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.75rem;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
}

.city-option[b-68rsqi8tbt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.85rem 1rem;
    border: 0;
    border-bottom: 1px solid var(--wl-border-subtle);
    background: transparent;
    color: var(--wl-text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.city-option:last-child[b-68rsqi8tbt] {
    border-bottom: 0;
}

.city-option:hover[b-68rsqi8tbt] {
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.city-option-empty[b-68rsqi8tbt],
.city-option-empty:hover[b-68rsqi8tbt] {
    cursor: default;
    background: transparent;
    color: var(--wl-text-muted);
}

.city-option-name[b-68rsqi8tbt] {
    font-weight: 700;
}

.city-option-country[b-68rsqi8tbt] {
    color: var(--wl-text-muted);
    font-size: 0.85rem;
}

.city-remote-hint[b-68rsqi8tbt] {
    margin: 0;
    color: var(--wl-text-secondary);
    font-size: 0.9rem;
}

.city-info-card[b-68rsqi8tbt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.city-name[b-68rsqi8tbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.city-size[b-68rsqi8tbt] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.size-badge[b-68rsqi8tbt] {
    padding: 0.3rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.size-small[b-68rsqi8tbt] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.7);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
}

.size-medium[b-68rsqi8tbt] {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.25);
}

.size-large[b-68rsqi8tbt] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    color: var(--wl-purple);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.25);
}

.size-extralarge[b-68rsqi8tbt] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
}

.city-max-venue[b-68rsqi8tbt] {
    font-size: 0.85rem;
    color: var(--wl-text-secondary);
}

/* ============================================
   VENUE LIST
   ============================================ */

.venue-list[b-68rsqi8tbt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.venue-row[b-68rsqi8tbt] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    text-align: left;
    width: 100%;
}

.venue-row:not(.disabled):hover[b-68rsqi8tbt] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    box-shadow: 0 4px 20px var(--wl-shadow-color);
}

.venue-row.selected[b-68rsqi8tbt] {
    border-color: var(--wl-gold);
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    box-shadow:
        0 0 25px rgba(var(--wl-gold-rgb), 0.15),
        inset 0 0 15px rgba(var(--wl-gold-rgb), 0.04);
}

.venue-row.selected[b-68rsqi8tbt]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--wl-gold), var(--wl-gold-light));
}

.venue-row.disabled[b-68rsqi8tbt] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* Tier dot indicator */
.venue-tier-dot[b-68rsqi8tbt] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.tier-club .venue-tier-dot[b-68rsqi8tbt] {
    background: rgba(var(--wl-contrast-rgb), 0.5);
}

.tier-theater .venue-tier-dot[b-68rsqi8tbt] {
    background: #60a5fa;
}

.tier-hall .venue-tier-dot[b-68rsqi8tbt] {
    background: var(--wl-purple);
}

.tier-arena .venue-tier-dot[b-68rsqi8tbt] {
    background: var(--wl-gold);
}

.tier-stadium .venue-tier-dot[b-68rsqi8tbt] {
    background: #f43f5e;
}

.tier-festival .venue-tier-dot[b-68rsqi8tbt] {
    background: linear-gradient(135deg, var(--wl-gold), #f43f5e);
}

/* Venue info (name + tier) */
.venue-info[b-68rsqi8tbt] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

.venue-name[b-68rsqi8tbt] {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.venue-tier-label[b-68rsqi8tbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}

.tier-club .venue-tier-label[b-68rsqi8tbt] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.tier-theater .venue-tier-label[b-68rsqi8tbt] {
    color: #60a5fa;
}

.tier-hall .venue-tier-label[b-68rsqi8tbt] {
    color: var(--wl-purple);
}

.tier-arena .venue-tier-label[b-68rsqi8tbt] {
    color: var(--wl-gold);
}

.tier-stadium .venue-tier-label[b-68rsqi8tbt] {
    color: #f43f5e;
}

.tier-festival .venue-tier-label[b-68rsqi8tbt] {
    background: linear-gradient(135deg, var(--wl-gold), #f43f5e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Capacity column */
.venue-capacity[b-68rsqi8tbt] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.85rem;
    color: var(--wl-text-secondary);
    flex-shrink: 0;
    min-width: 5rem;
    justify-content: flex-end;
}

.venue-capacity svg[b-68rsqi8tbt] {
    width: 1rem;
    height: 1rem;
    opacity: 0.6;
    flex-shrink: 0;
}

/* Cost column */
.venue-cost[b-68rsqi8tbt] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wl-gold);
    flex-shrink: 0;
    min-width: 5.5rem;
    text-align: right;
}

/* Locked Overlay (shared by venue list and production grid) */
.locked-overlay[b-68rsqi8tbt] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(var(--wl-bg-primary-rgb), 0.85);
    backdrop-filter: blur(4px);
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-align: center;
    padding: 0.5rem 1rem;
}

.locked-overlay svg[b-68rsqi8tbt] {
    width: 1.125rem;
    height: 1.125rem;
    opacity: 0.5;
    flex-shrink: 0;
}

/* ============================================
   PRODUCTION GRID (kept as cards)
   ============================================ */

.selector-grid[b-68rsqi8tbt] {
    display: grid;
    gap: 1rem;
}

.production-grid[b-68rsqi8tbt] {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.selector-card[b-68rsqi8tbt] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 2px solid var(--wl-border-medium);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    text-align: center;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.selector-card:not(.disabled):hover[b-68rsqi8tbt] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    transform: translateY(-3px);
    box-shadow:
        0 8px 30px var(--wl-shadow-color),
        0 0 20px var(--wl-gold-bg);
}

.selector-card.selected[b-68rsqi8tbt] {
    border-color: var(--wl-gold);
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    box-shadow:
        0 0 30px rgba(var(--wl-gold-rgb), 0.2),
        inset 0 0 20px rgba(var(--wl-gold-rgb), 0.05);
}

.selector-card.selected[b-68rsqi8tbt]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
}

.selector-card.disabled[b-68rsqi8tbt] {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

/* Production Card Level Names */
.card-level-name[b-68rsqi8tbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-text-primary);
    line-height: 1;
}

.level-basic .card-level-name[b-68rsqi8tbt] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.level-standard .card-level-name[b-68rsqi8tbt] {
    color: #60a5fa;
}

.level-pro .card-level-name[b-68rsqi8tbt] {
    color: var(--wl-purple);
}

.level-spectacular .card-level-name[b-68rsqi8tbt] {
    color: var(--wl-gold);
}

/* Card Stats (production cards) */
.card-stat-item[b-68rsqi8tbt] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

.cost-stat[b-68rsqi8tbt] {
    color: var(--wl-gold);
    font-weight: 600;
}

/* ============================================
   INPUT GROUPS
   ============================================ */

.input-group[b-68rsqi8tbt] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.input-wrapper[b-68rsqi8tbt] {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input[b-68rsqi8tbt] {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: rgba(var(--wl-bg-modal-rgb), 0.8);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    color: var(--wl-text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    outline: none;
}

.form-input:focus[b-68rsqi8tbt] {
    border-color: var(--wl-gold);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.15);
}

.form-input[b-68rsqi8tbt]::placeholder {
    color: var(--wl-text-muted);
}

.input-suffix[b-68rsqi8tbt] {
    position: absolute;
    right: 1.25rem;
    color: var(--wl-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    pointer-events: none;
}

input[type="number"][b-68rsqi8tbt] {
    padding-right: 3rem;
}

input[type="number"][b-68rsqi8tbt]::-webkit-inner-spin-button,
input[type="number"][b-68rsqi8tbt]::-webkit-outer-spin-button {
    opacity: 1;
}

input[type="date"][b-68rsqi8tbt] {
    color-scheme: dark;
}

.suggested-price[b-68rsqi8tbt] {
    font-size: 0.85rem;
    color: var(--wl-text-secondary);
}

.suggested-price strong[b-68rsqi8tbt] {
    color: var(--wl-gold);
}

.price-ceiling[b-68rsqi8tbt] {
    margin-left: 0.75rem;
    color: var(--wl-text-tertiary, var(--wl-text-secondary));
}

.price-tradeoff-hint[b-68rsqi8tbt] {
    margin: 0.5rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--wl-text-secondary);
}

/* ============================================
   TOGGLE SWITCH
   ============================================ */

.toggle-group[b-68rsqi8tbt] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toggle-label[b-68rsqi8tbt] {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
}

.toggle-switch[b-68rsqi8tbt] {
    position: relative;
    width: 3.25rem;
    height: 1.75rem;
    background: var(--wl-border-medium);
    border-radius: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-switch.active[b-68rsqi8tbt] {
    background: linear-gradient(135deg, var(--wl-gold), #B8962E);
    box-shadow: 0 0 15px rgba(var(--wl-gold-rgb), 0.3);
}

.toggle-knob[b-68rsqi8tbt] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 1.25rem;
    height: 1.25rem;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 6px var(--wl-shadow-color);
}

.toggle-switch.active .toggle-knob[b-68rsqi8tbt] {
    transform: translateX(1.5rem);
}

.toggle-text[b-68rsqi8tbt] {
    font-size: 0.9rem;
    color: var(--wl-text-primary);
}

.livestream-cost[b-68rsqi8tbt],
.support-cost[b-68rsqi8tbt] {
    font-size: 0.85rem;
    color: var(--wl-text-secondary);
    padding-left: 4.25rem;
}

.livestream-cost strong[b-68rsqi8tbt],
.support-cost strong[b-68rsqi8tbt] {
    color: var(--wl-gold);
}

/* ============================================
   COST SUMMARY
   ============================================ */

.cost-summary-section[b-68rsqi8tbt] {
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.04) 0%,
        rgba(var(--wl-contrast-rgb), 0.02) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.2);
}

.cost-breakdown[b-68rsqi8tbt] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cost-row[b-68rsqi8tbt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
}

.cost-label[b-68rsqi8tbt] {
    font-size: 0.9rem;
    color: var(--wl-text-secondary);
}

.cost-value[b-68rsqi8tbt] {
    font-size: 0.9rem;
    color: var(--wl-text-primary);
    font-weight: 500;
}

.cost-divider[b-68rsqi8tbt] {
    height: 1px;
    background: var(--wl-border-medium);
    margin: 0.25rem 0;
}

.cost-total[b-68rsqi8tbt] {
    padding-top: 0.75rem;
}

.cost-total .cost-label[b-68rsqi8tbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cost-total .cost-value[b-68rsqi8tbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-gold);
    letter-spacing: 0.05em;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.3);
}

.cost-available .cost-value[b-68rsqi8tbt] {
    color: #22c55e;
}

.cost-available.insufficient .cost-value[b-68rsqi8tbt] {
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

/* ============================================
   SUBMIT SECTION
   ============================================ */

.submit-section[b-68rsqi8tbt] {
    display: flex;
    justify-content: center;
    padding: 1rem 0 3rem;
}

.submit-button[b-68rsqi8tbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 3rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 25px rgba(var(--wl-gold-rgb), 0.35),
        0 0 40px var(--wl-gold-bg-hover),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.25);
}

.submit-button:not(:disabled):hover[b-68rsqi8tbt] {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 8px 40px rgba(var(--wl-gold-rgb), 0.5),
        0 0 60px var(--wl-gold-border),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.35);
}

.submit-button:active[b-68rsqi8tbt] {
    transform: translateY(-1px) scale(1.01);
}

.submit-button:disabled[b-68rsqi8tbt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.submit-button svg[b-68rsqi8tbt] {
    width: 1.375rem;
    height: 1.375rem;
}

.submit-button.submitting[b-68rsqi8tbt] {
    pointer-events: none;
}

.spinner[b-68rsqi8tbt] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(var(--wl-bg-primary-rgb), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-68rsqi8tbt 0.8s linear infinite;
}

@keyframes spin-b-68rsqi8tbt {
    to { transform: rotate(360deg); }
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-state[b-68rsqi8tbt] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
}

.loading-spinner[b-68rsqi8tbt] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-68rsqi8tbt 1s linear infinite;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .plan-concert[b-68rsqi8tbt] {
        padding: 1rem;
    }

    .plan-header[b-68rsqi8tbt] {
        padding: 1.5rem;
    }

    .plan-header h1[b-68rsqi8tbt] {
        font-size: 2.25rem;
    }

    .form-section[b-68rsqi8tbt] {
        padding: 1.25rem;
    }

    .section-title[b-68rsqi8tbt] {
        font-size: 1.25rem;
    }

    .venue-row[b-68rsqi8tbt] {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }

    .venue-capacity[b-68rsqi8tbt] {
        min-width: 4rem;
    }

    .venue-cost[b-68rsqi8tbt] {
        min-width: 4.5rem;
        font-size: 0.8rem;
    }

    .production-grid[b-68rsqi8tbt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .selector-card[b-68rsqi8tbt] {
        padding: 1.25rem 0.75rem;
    }

    .city-info-card[b-68rsqi8tbt] {
        flex-direction: column;
        align-items: flex-start;
    }

    .city-name[b-68rsqi8tbt] {
        font-size: 1.5rem;
    }

    .submit-button[b-68rsqi8tbt] {
        width: 100%;
        justify-content: center;
        padding: 1.125rem 2rem;
    }

    .livestream-cost[b-68rsqi8tbt],
    .support-cost[b-68rsqi8tbt] {
        padding-left: 0;
    }
}

@media (max-width: 480px) {
    .venue-row[b-68rsqi8tbt] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .venue-info[b-68rsqi8tbt] {
        flex: 1 1 60%;
    }

    .venue-capacity[b-68rsqi8tbt],
    .venue-cost[b-68rsqi8tbt] {
        min-width: auto;
    }

    .production-grid[b-68rsqi8tbt] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Payment Source Selector */
.payment-source-options[b-68rsqi8tbt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-option[b-68rsqi8tbt] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.1);
    cursor: pointer;
    transition: all 0.2s;
}
.payment-option:hover[b-68rsqi8tbt] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.03);
}
.payment-option.selected[b-68rsqi8tbt] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.08);
}
.payment-option input[type="radio"][b-68rsqi8tbt] {
    accent-color: var(--wl-gold);
}
.option-label[b-68rsqi8tbt] {
    font-size: 0.9rem;
    color: var(--wl-text-primary);
}

.budget-breakdown[b-68rsqi8tbt] {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(var(--wl-gold-rgb), 0.03);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.08);
}
.budget-row[b-68rsqi8tbt] {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 0.9rem;
    color: var(--wl-text-secondary);
}
.budget-value[b-68rsqi8tbt] {
    font-weight: 600;
    color: var(--wl-accent-green);
}
.cash-value[b-68rsqi8tbt] {
    font-weight: 600;
    color: var(--wl-text-primary);
}
/* /Components/Pages/Career/Music/Concerts/Setlist.razor.rz.scp.css */
/* ============================================
   SETLIST EDITOR - Hollywood Glamour Aesthetic
   Two-panel layout for song selection & ordering
   ============================================ */

.setlist-editor[b-ldq60e6jfm] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
}

/* ============================================
   HEADER
   ============================================ */

.setlist-header[b-ldq60e6jfm] {
    position: relative;
    padding: 2rem 3rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.12) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 1.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow:
        0 0 60px rgba(var(--wl-gold-rgb), 0.08),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

.setlist-header .header-bg-pattern[b-ldq60e6jfm] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, var(--wl-gold-bg-hover) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 30%);
    pointer-events: none;
}

.setlist-header .header-content[b-ldq60e6jfm] {
    position: relative;
    z-index: 1;
}

.setlist-header .header-left[b-ldq60e6jfm] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.back-link[b-ldq60e6jfm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-link:hover[b-ldq60e6jfm] {
    color: var(--wl-gold);
}

.back-link svg[b-ldq60e6jfm] {
    width: 1rem;
    height: 1rem;
}

.header-title-group[b-ldq60e6jfm] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-ldq60e6jfm] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--wl-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
}

.setlist-header h1[b-ldq60e6jfm] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-gold) 50%, var(--wl-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ============================================
   TWO-PANEL GRID
   ============================================ */

.panels-grid[b-ldq60e6jfm] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.panel[b-ldq60e6jfm] {
    padding: 1.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1.25rem;
    display: flex;
    flex-direction: column;
    max-height: 70vh;
}

.panel-title[b-ldq60e6jfm] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-medium);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    flex-shrink: 0;
}

.panel-icon[b-ldq60e6jfm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
}

.panel-icon svg[b-ldq60e6jfm] {
    width: 1.25rem;
    height: 1.25rem;
}

.available-icon[b-ldq60e6jfm] {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}

.setlist-icon[b-ldq60e6jfm] {
    color: var(--wl-gold);
    background: var(--wl-gold-bg-hover);
}

.panel-count[b-ldq60e6jfm] {
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--wl-text-muted);
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    margin-left: auto;
}

/* ============================================
   SONG LISTS
   ============================================ */

.song-list[b-ldq60e6jfm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-right: 0.5rem;
}

.song-list[b-ldq60e6jfm]::-webkit-scrollbar {
    width: 6px;
}

.song-list[b-ldq60e6jfm]::-webkit-scrollbar-track {
    background: transparent;
}

.song-list[b-ldq60e6jfm]::-webkit-scrollbar-thumb {
    background: rgba(var(--wl-contrast-rgb), 0.15);
    border-radius: 3px;
}

.song-list[b-ldq60e6jfm]::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
}

/* ============================================
   AVAILABLE SONG CARDS
   ============================================ */

.song-card[b-ldq60e6jfm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.875rem;
    transition: all 0.25s ease;
}

.song-card:hover:not(.in-setlist)[b-ldq60e6jfm] {
    border-color: rgba(96, 165, 250, 0.35);
    box-shadow: 0 4px 20px var(--wl-shadow-color);
}

.song-card.in-setlist[b-ldq60e6jfm] {
    opacity: 0.5;
    border-style: dashed;
}

.song-info[b-ldq60e6jfm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.song-title[b-ldq60e6jfm] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-meta[b-ldq60e6jfm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

.song-genre[b-ldq60e6jfm] {
    padding: 0.125rem 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.song-separator[b-ldq60e6jfm] {
    color: var(--wl-text-muted);
    font-size: 0.7rem;
}

.song-tempo[b-ldq60e6jfm] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.song-quality[b-ldq60e6jfm] {
    display: flex;
    gap: 0.125rem;
    margin-top: 0.25rem;
}

.star[b-ldq60e6jfm] {
    display: inline-flex;
}

.star svg[b-ldq60e6jfm] {
    width: 0.875rem;
    height: 0.875rem;
}

.star-filled[b-ldq60e6jfm] {
    color: var(--wl-gold);
}

.star-empty[b-ldq60e6jfm] {
    color: var(--wl-text-muted);
    opacity: 0.3;
}

/* Add Button */
.add-btn[b-ldq60e6jfm] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.25);
    border-radius: 0.625rem;
    color: #60a5fa;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-family: inherit;
}

.add-btn:not(.disabled):hover[b-ldq60e6jfm] {
    background: rgba(96, 165, 250, 0.2);
    border-color: #60a5fa;
    box-shadow: 0 0 15px rgba(96, 165, 250, 0.15);
}

.add-btn.disabled[b-ldq60e6jfm] {
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: var(--wl-border-medium);
    cursor: not-allowed;
}

.add-btn svg[b-ldq60e6jfm] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   SETLIST ENTRIES
   ============================================ */

.setlist-entry[b-ldq60e6jfm] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.875rem;
    transition: all 0.25s ease;
}

.setlist-entry:hover[b-ldq60e6jfm] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

/* Encore styling */
.encore-entry[b-ldq60e6jfm] {
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.06) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
}

.encore-entry:hover[b-ldq60e6jfm] {
    border-color: var(--wl-gold);
}

.entry-position[b-ldq60e6jfm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 2.5rem;
}

.position-number[b-ldq60e6jfm] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    color: var(--wl-text-muted);
    line-height: 1;
}

.encore-entry .position-number[b-ldq60e6jfm] {
    color: var(--wl-gold);
}

.encore-badge[b-ldq60e6jfm] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.15);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.5);
}

.entry-info[b-ldq60e6jfm] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.entry-controls[b-ldq60e6jfm] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.control-btn[b-ldq60e6jfm] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    color: var(--wl-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    font-family: inherit;
}

.control-btn:not(:disabled):hover[b-ldq60e6jfm] {
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: var(--wl-text-primary);
}

.control-btn:disabled[b-ldq60e6jfm] {
    opacity: 0.3;
    cursor: not-allowed;
}

.control-btn svg[b-ldq60e6jfm] {
    width: 1rem;
    height: 1rem;
}

.remove-btn:not(:disabled):hover[b-ldq60e6jfm] {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* ============================================
   ENCORE CONTROLS
   ============================================ */

.encore-controls[b-ldq60e6jfm] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--wl-border-medium);
    flex-shrink: 0;
}

.encore-header[b-ldq60e6jfm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.encore-label[b-ldq60e6jfm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-gold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.encore-label svg[b-ldq60e6jfm] {
    width: 1.125rem;
    height: 1.125rem;
}

.encore-toggle[b-ldq60e6jfm] {
    display: flex;
    gap: 0.375rem;
}

.encore-btn[b-ldq60e6jfm] {
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    color: var(--wl-text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.encore-btn:not(:disabled):hover[b-ldq60e6jfm] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-text-primary);
}

.encore-btn.active[b-ldq60e6jfm] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
    font-weight: 600;
}

.encore-btn:disabled[b-ldq60e6jfm] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================
   VALIDATION MESSAGE
   ============================================ */

.validation-message[b-ldq60e6jfm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 0.625rem;
    color: #f97316;
    font-size: 0.85rem;
    font-weight: 500;
    flex-shrink: 0;
}

.validation-message svg[b-ldq60e6jfm] {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

/* ============================================
   EMPTY PANEL STATE
   ============================================ */

.empty-panel[b-ldq60e6jfm] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    flex: 1;
}

/* ============================================
   ERROR STATE
   ============================================ */

.error-state[b-ldq60e6jfm] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    color: var(--wl-text-muted);
    font-size: 1rem;
}

/* ============================================
   SUBMIT SECTION
   ============================================ */

.submit-section[b-ldq60e6jfm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 2rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.04) 0%,
        rgba(var(--wl-contrast-rgb), 0.02) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 1.25rem;
}

.setlist-summary[b-ldq60e6jfm] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-count[b-ldq60e6jfm] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.08em;
}

.summary-encore[b-ldq60e6jfm] {
    font-size: 0.8rem;
    color: var(--wl-gold);
    font-weight: 600;
}

.submit-button[b-ldq60e6jfm] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 2.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 25px rgba(var(--wl-gold-rgb), 0.35),
        0 0 40px var(--wl-gold-bg-hover),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.25);
}

.submit-button:not(:disabled):hover[b-ldq60e6jfm] {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 8px 40px rgba(var(--wl-gold-rgb), 0.5),
        0 0 60px var(--wl-gold-border),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.35);
}

.submit-button:active[b-ldq60e6jfm] {
    transform: translateY(-1px) scale(1.01);
}

.submit-button:disabled[b-ldq60e6jfm] {
    opacity: 0.5;
    cursor: not-allowed;
}

.submit-button svg[b-ldq60e6jfm] {
    width: 1.25rem;
    height: 1.25rem;
}

.submit-button.submitting[b-ldq60e6jfm] {
    pointer-events: none;
}

.spinner[b-ldq60e6jfm] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(var(--wl-bg-primary-rgb), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-ldq60e6jfm 0.8s linear infinite;
}

@keyframes spin-b-ldq60e6jfm {
    to { transform: rotate(360deg); }
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-state[b-ldq60e6jfm] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
}

.loading-spinner[b-ldq60e6jfm] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-ldq60e6jfm 1s linear infinite;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .panels-grid[b-ldq60e6jfm] {
        grid-template-columns: 1fr;
    }

    .panel[b-ldq60e6jfm] {
        max-height: 50vh;
    }
}

@media (max-width: 768px) {
    .setlist-editor[b-ldq60e6jfm] {
        padding: 1rem;
    }

    .setlist-header[b-ldq60e6jfm] {
        padding: 1.5rem;
    }

    .setlist-header h1[b-ldq60e6jfm] {
        font-size: 2.25rem;
    }

    .panel[b-ldq60e6jfm] {
        padding: 1.25rem;
    }

    .panel-title[b-ldq60e6jfm] {
        font-size: 1.25rem;
    }

    .song-card[b-ldq60e6jfm] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .add-btn[b-ldq60e6jfm] {
        width: 100%;
        justify-content: center;
    }

    .setlist-entry[b-ldq60e6jfm] {
        flex-wrap: wrap;
    }

    .entry-controls[b-ldq60e6jfm] {
        width: 100%;
        justify-content: flex-end;
    }

    .submit-section[b-ldq60e6jfm] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
        padding: 1.25rem 1.5rem;
    }

    .submit-button[b-ldq60e6jfm] {
        width: 100%;
        justify-content: center;
    }

    .encore-header[b-ldq60e6jfm] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .panel[b-ldq60e6jfm] {
        padding: 1rem;
        max-height: 45vh;
    }

    .song-meta[b-ldq60e6jfm] {
        flex-wrap: wrap;
    }

    .encore-toggle[b-ldq60e6jfm] {
        flex-wrap: wrap;
    }
}
/* /Components/Pages/Career/Music/Concerts/Tours/Create.razor.rz.scp.css */
/* ============================================
   CREATE TOUR - Hollywood Glamour Aesthetic
   Multi-stop tour planner with cost calculator
   ============================================ */

.create-tour[b-f0jd1vg3ex] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
}

/* ============================================
   HEADER
   ============================================ */

.create-header[b-f0jd1vg3ex] {
    position: relative;
    padding: 2rem 3rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.12) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 1.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow:
        0 0 60px rgba(var(--wl-gold-rgb), 0.08),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

.create-header .header-bg-pattern[b-f0jd1vg3ex] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, var(--wl-gold-bg-hover) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 30%);
    pointer-events: none;
}

.create-header .header-content[b-f0jd1vg3ex] {
    position: relative;
    z-index: 1;
}

.create-header .header-left[b-f0jd1vg3ex] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.back-link[b-f0jd1vg3ex] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-link:hover[b-f0jd1vg3ex] {
    color: var(--wl-gold);
}

.back-link svg[b-f0jd1vg3ex] {
    width: 1rem;
    height: 1rem;
}

.header-title-group[b-f0jd1vg3ex] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-f0jd1vg3ex] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--wl-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
}

.create-header h1[b-f0jd1vg3ex] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-gold) 50%, var(--wl-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ============================================
   FORM SECTIONS
   ============================================ */

.form-section[b-f0jd1vg3ex] {
    margin-bottom: 2rem;
    padding: 1.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1.25rem;
    transition: all 0.3s ease;
}

.form-section:hover[b-f0jd1vg3ex] {
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
}

.section-title[b-f0jd1vg3ex] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-medium);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.section-icon[b-f0jd1vg3ex] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.section-icon svg[b-f0jd1vg3ex] {
    width: 1.25rem;
    height: 1.25rem;
}

.name-icon[b-f0jd1vg3ex] {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}

.production-icon[b-f0jd1vg3ex] {
    color: var(--wl-purple);
    background: rgba(var(--wl-purple-rgb), 0.15);
}

.support-icon[b-f0jd1vg3ex] {
    color: #f97316;
    background: rgba(249, 115, 22, 0.15);
}

.stops-icon[b-f0jd1vg3ex] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

.summary-icon[b-f0jd1vg3ex] {
    color: var(--wl-gold);
    background: var(--wl-gold-bg-hover);
}

.optional-label[b-f0jd1vg3ex] {
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--wl-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.stops-counter[b-f0jd1vg3ex] {
    margin-left: auto;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    letter-spacing: 0.05em;
}

/* ============================================
   INPUT GROUPS
   ============================================ */

.input-group[b-f0jd1vg3ex] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.input-wrapper[b-f0jd1vg3ex] {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input[b-f0jd1vg3ex] {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: rgba(var(--wl-bg-modal-rgb), 0.8);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    color: var(--wl-text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    outline: none;
}

.form-input:focus[b-f0jd1vg3ex] {
    border-color: var(--wl-gold);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.15);
}

.form-input[b-f0jd1vg3ex]::placeholder {
    color: var(--wl-text-muted);
}

.input-suffix[b-f0jd1vg3ex] {
    position: absolute;
    right: 1.25rem;
    color: var(--wl-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    pointer-events: none;
}

input[type="number"][b-f0jd1vg3ex] {
    /* Hide the native spinner arrows - they sat at the far right, under the "Dzień X" /
       currency suffix, and overlapped it. Players type the value (or use min). */
    -moz-appearance: textfield;
    appearance: textfield;
    padding-right: 3rem;
}

input[type="number"][b-f0jd1vg3ex]::-webkit-inner-spin-button,
input[type="number"][b-f0jd1vg3ex]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type="date"][b-f0jd1vg3ex] {
    color-scheme: dark;
}

/* ============================================
   PRODUCTION LEVEL SELECTOR
   ============================================ */

.selector-grid[b-f0jd1vg3ex] {
    display: grid;
    gap: 1rem;
}

.production-grid[b-f0jd1vg3ex] {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.selector-card[b-f0jd1vg3ex] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 2px solid var(--wl-border-medium);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    text-align: center;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.selector-card:hover[b-f0jd1vg3ex] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    transform: translateY(-3px);
    box-shadow:
        0 8px 30px var(--wl-shadow-color),
        0 0 20px var(--wl-gold-bg);
}

.selector-card.selected[b-f0jd1vg3ex] {
    border-color: var(--wl-gold);
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    box-shadow:
        0 0 30px rgba(var(--wl-gold-rgb), 0.2),
        inset 0 0 20px rgba(var(--wl-gold-rgb), 0.05);
}

.selector-card.selected[b-f0jd1vg3ex]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
}

.card-level-name[b-f0jd1vg3ex] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-text-primary);
    line-height: 1;
}

.level-basic .card-level-name[b-f0jd1vg3ex] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.level-standard .card-level-name[b-f0jd1vg3ex] {
    color: #60a5fa;
}

.level-pro .card-level-name[b-f0jd1vg3ex] {
    color: var(--wl-purple);
}

.level-spectacular .card-level-name[b-f0jd1vg3ex] {
    color: var(--wl-gold);
}

.card-stat-item[b-f0jd1vg3ex] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

.cost-stat[b-f0jd1vg3ex] {
    color: var(--wl-gold);
    font-weight: 600;
}

/* ============================================
   STOPS LIST
   ============================================ */

.stops-hint[b-f0jd1vg3ex] {
    font-size: 0.85rem;
    color: var(--wl-text-muted);
    text-align: center;
    padding: 0.75rem;
}

.warning-hint[b-f0jd1vg3ex] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-gold-rgb), 0.08);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.75rem;
    color: var(--wl-gold);
    margin-bottom: 1.25rem;
}

.hint-icon[b-f0jd1vg3ex] {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.stops-list[b-f0jd1vg3ex] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.stop-card[b-f0jd1vg3ex] {
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    transition: all 0.3s ease;
}

.stop-card:hover[b-f0jd1vg3ex] {
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
}

.stop-header[b-f0jd1vg3ex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--wl-border-medium);
}

.stop-number[b-f0jd1vg3ex] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-gold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.stop-remove-btn[b-f0jd1vg3ex] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 0.5rem;
    color: #ef4444;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.stop-remove-btn:hover[b-f0jd1vg3ex] {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

.stop-remove-btn svg[b-f0jd1vg3ex] {
    width: 0.875rem;
    height: 0.875rem;
}

.stop-fields[b-f0jd1vg3ex] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.stop-field[b-f0jd1vg3ex] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field-label[b-f0jd1vg3ex] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
    font-weight: 600;
}

.stop-field .form-input[b-f0jd1vg3ex] {
    padding: 0.625rem 1rem;
    font-size: 0.9rem;
}

.stop-field .ticket-input[b-f0jd1vg3ex] {
    padding-right: 2.5rem;
}

.livestream-field[b-f0jd1vg3ex] {
    grid-column: span 2;
}

/* ============================================
   CITY SELECTOR
   ============================================ */

.city-selector[b-f0jd1vg3ex] {
    position: relative;
}

.city-search[b-f0jd1vg3ex] {
    width: 100%;
}

.city-dropdown[b-f0jd1vg3ex] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    /* Must be fully opaque - this popover overlaps the fields below it. (--wl-bg-modal
       was undefined, which left it transparent and let those fields bleed through.) */
    background: rgb(var(--wl-bg-modal-rgb));
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    box-shadow: 0 8px 30px var(--wl-shadow-color);
    z-index: 50;
}

.city-option[b-f0jd1vg3ex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.625rem 1rem;
    background: none;
    border: none;
    border-bottom: 1px solid var(--wl-border-medium);
    color: var(--wl-text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
    font-family: inherit;
    font-size: 0.85rem;
    text-align: left;
}

.city-option:last-child[b-f0jd1vg3ex] {
    border-bottom: none;
}

.city-option:hover[b-f0jd1vg3ex] {
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.city-option-name[b-f0jd1vg3ex] {
    font-weight: 600;
}

.city-option-country[b-f0jd1vg3ex] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

/* ============================================
   VENUE TIER MINI SELECTOR
   ============================================ */

.venue-tier-selector[b-f0jd1vg3ex] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.venue-mini-btn[b-f0jd1vg3ex] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--wl-border-medium);
    background: rgba(var(--wl-bg-modal-rgb), 0.8);
    color: var(--wl-text-secondary);
    font-family: inherit;
}

.venue-mini-btn:hover:not(:disabled)[b-f0jd1vg3ex] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.venue-mini-btn.disabled[b-f0jd1vg3ex],
.venue-mini-btn:disabled[b-f0jd1vg3ex] {
    cursor: not-allowed;
    opacity: 0.48;
    background: rgba(var(--wl-bg-modal-rgb), 0.45);
}

.venue-mini-lock[b-f0jd1vg3ex] {
    max-width: 8rem;
    color: var(--wl-text-muted);
    font-size: 0.58rem;
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}

.venue-mini-meta[b-f0jd1vg3ex] {
    color: var(--wl-text-muted);
    font-size: 0.58rem;
    font-weight: 500;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: 0;
}

.venue-mini-btn.selected[b-f0jd1vg3ex] {
    border-color: var(--wl-gold);
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    box-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.15);
}

.venue-mini-btn.tier-club.selected[b-f0jd1vg3ex] { color: rgba(var(--wl-contrast-rgb), 0.8); border-color: rgba(var(--wl-contrast-rgb), 0.4); background: rgba(var(--wl-contrast-rgb), 0.08); }
.venue-mini-btn.tier-theater.selected[b-f0jd1vg3ex] { color: #60a5fa; border-color: rgba(96, 165, 250, 0.4); background: rgba(96, 165, 250, 0.1); }
.venue-mini-btn.tier-hall.selected[b-f0jd1vg3ex] { color: var(--wl-purple); border-color: rgba(var(--wl-purple-rgb), 0.4); background: rgba(var(--wl-purple-rgb), 0.1); }
.venue-mini-btn.tier-arena.selected[b-f0jd1vg3ex] { color: var(--wl-gold); border-color: rgba(var(--wl-gold-rgb), 0.4); background: rgba(var(--wl-gold-rgb), 0.1); }
.venue-mini-btn.tier-stadium.selected[b-f0jd1vg3ex] { color: #f43f5e; border-color: rgba(244, 63, 94, 0.4); background: rgba(244, 63, 94, 0.1); }
.venue-mini-btn.tier-festival.selected[b-f0jd1vg3ex] { color: var(--wl-gold); border-color: rgba(var(--wl-gold-rgb), 0.4); background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.1), rgba(244, 63, 94, 0.1)); }

/* ============================================
   TOGGLE SWITCH
   ============================================ */

.toggle-label[b-f0jd1vg3ex] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.toggle-switch[b-f0jd1vg3ex] {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    background: var(--wl-border-medium);
    border-radius: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    flex-shrink: 0;
}

.toggle-switch.active[b-f0jd1vg3ex] {
    background: linear-gradient(135deg, var(--wl-gold), #B8962E);
    box-shadow: 0 0 12px rgba(var(--wl-gold-rgb), 0.25);
}

.toggle-knob[b-f0jd1vg3ex] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.125rem;
    height: 1.125rem;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 5px var(--wl-shadow-color);
}

.toggle-switch.active .toggle-knob[b-f0jd1vg3ex] {
    transform: translateX(1.25rem);
}

.toggle-text[b-f0jd1vg3ex] {
    font-size: 0.85rem;
    color: var(--wl-text-primary);
}

/* ============================================
   ADD STOP BUTTON
   ============================================ */

.add-stop-btn[b-f0jd1vg3ex] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    width: 100%;
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 2px dashed var(--wl-border-medium);
    border-radius: 1rem;
    color: var(--wl-text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.add-stop-btn:hover[b-f0jd1vg3ex] {
    border-color: var(--wl-gold);
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.04);
}

.add-stop-btn svg[b-f0jd1vg3ex] {
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================
   COST SUMMARY
   ============================================ */

.cost-summary-section[b-f0jd1vg3ex] {
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.04) 0%,
        rgba(var(--wl-contrast-rgb), 0.02) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.2);
}

.cost-breakdown[b-f0jd1vg3ex] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cost-row[b-f0jd1vg3ex] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
}

.cost-label[b-f0jd1vg3ex] {
    font-size: 0.85rem;
    color: var(--wl-text-secondary);
}

.cost-value[b-f0jd1vg3ex] {
    font-size: 0.85rem;
    color: var(--wl-text-primary);
    font-weight: 500;
}

.cost-divider[b-f0jd1vg3ex] {
    height: 1px;
    background: var(--wl-border-medium);
    margin: 0.375rem 0;
}

.cost-total[b-f0jd1vg3ex] {
    padding-top: 0.75rem;
}

.cost-total .cost-label[b-f0jd1vg3ex] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cost-total .cost-value[b-f0jd1vg3ex] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-gold);
    letter-spacing: 0.05em;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.3);
}

.cost-available .cost-value[b-f0jd1vg3ex] {
    color: #22c55e;
}

.cost-available.insufficient .cost-value[b-f0jd1vg3ex] {
    color: #ef4444;
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}

/* ============================================
   SUBMIT SECTION
   ============================================ */

.submit-section[b-f0jd1vg3ex] {
    display: flex;
    justify-content: center;
    padding: 1rem 0 3rem;
}

.submit-button[b-f0jd1vg3ex] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 3rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 25px rgba(var(--wl-gold-rgb), 0.35),
        0 0 40px var(--wl-gold-bg-hover),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.25);
}

.submit-button:not(:disabled):hover[b-f0jd1vg3ex] {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 8px 40px rgba(var(--wl-gold-rgb), 0.5),
        0 0 60px var(--wl-gold-border),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.35);
}

.submit-button:active[b-f0jd1vg3ex] {
    transform: translateY(-1px) scale(1.01);
}

.submit-button:disabled[b-f0jd1vg3ex] {
    opacity: 0.5;
    cursor: not-allowed;
}

.submit-button svg[b-f0jd1vg3ex] {
    width: 1.375rem;
    height: 1.375rem;
}

.submit-button.submitting[b-f0jd1vg3ex] {
    pointer-events: none;
}

.spinner[b-f0jd1vg3ex] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(var(--wl-bg-primary-rgb), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-f0jd1vg3ex 0.8s linear infinite;
}

@keyframes spin-b-f0jd1vg3ex {
    to { transform: rotate(360deg); }
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-state[b-f0jd1vg3ex] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
}

.loading-spinner[b-f0jd1vg3ex] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-f0jd1vg3ex 1s linear infinite;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .create-tour[b-f0jd1vg3ex] {
        padding: 1rem;
    }

    .create-header[b-f0jd1vg3ex] {
        padding: 1.5rem;
    }

    .create-header h1[b-f0jd1vg3ex] {
        font-size: 2.25rem;
    }

    .form-section[b-f0jd1vg3ex] {
        padding: 1.25rem;
    }

    .section-title[b-f0jd1vg3ex] {
        font-size: 1.25rem;
    }

    .production-grid[b-f0jd1vg3ex] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stop-fields[b-f0jd1vg3ex] {
        grid-template-columns: 1fr;
    }

    .livestream-field[b-f0jd1vg3ex] {
        grid-column: span 1;
    }

    .venue-tier-selector[b-f0jd1vg3ex] {
        flex-wrap: wrap;
    }

    .stop-card[b-f0jd1vg3ex] {
        padding: 1rem;
    }

    .submit-button[b-f0jd1vg3ex] {
        width: 100%;
        justify-content: center;
        padding: 1.125rem 2rem;
    }
}

@media (max-width: 480px) {
    .production-grid[b-f0jd1vg3ex] {
        grid-template-columns: 1fr 1fr;
    }

    .selector-card[b-f0jd1vg3ex] {
        padding: 1.25rem 0.75rem;
    }
}
/* /Components/Pages/Career/Music/Concerts/Tours/Details.razor.rz.scp.css */
/* ============================================
   TOUR DETAILS - Hollywood Glamour Aesthetic
   Timeline visualization with certificate tiers
   ============================================ */

.tour-details-page[b-t5g01kcjwd] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
}

/* ============================================
   HEADER
   ============================================ */

.details-header[b-t5g01kcjwd] {
    position: relative;
    padding: 2rem 3rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.12) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 1.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow:
        0 0 60px rgba(var(--wl-gold-rgb), 0.08),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

.header-bg-pattern[b-t5g01kcjwd] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, var(--wl-gold-bg-hover) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 30%);
    pointer-events: none;
}

.header-content[b-t5g01kcjwd] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    z-index: 1;
}

.header-left[b-t5g01kcjwd] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}

.back-link[b-t5g01kcjwd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-link:hover[b-t5g01kcjwd] {
    color: var(--wl-gold);
}

.back-link svg[b-t5g01kcjwd] {
    width: 1rem;
    height: 1rem;
}

.header-title-group[b-t5g01kcjwd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-t5g01kcjwd] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--wl-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
}

.details-header h1[b-t5g01kcjwd] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-gold) 50%, var(--wl-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.header-badges[b-t5g01kcjwd] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 0.5rem;
}

/* ============================================
   STATUS & CERTIFICATE BADGES
   ============================================ */

.tour-status-badge[b-t5g01kcjwd] {
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.status-active[b-t5g01kcjwd] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.status-completed[b-t5g01kcjwd] {
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: #60a5fa;
}

.status-cancelled[b-t5g01kcjwd] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #ef4444;
}

.status-planning[b-t5g01kcjwd] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.certificate-badge[b-t5g01kcjwd] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: help;
}

.cert-icon[b-t5g01kcjwd] {
    width: 1rem;
    height: 1rem;
}

.cert-bronze[b-t5g01kcjwd] {
    background: rgba(205, 127, 50, 0.15);
    border: 1px solid rgba(205, 127, 50, 0.35);
    color: #CD7F32;
}

.cert-silver[b-t5g01kcjwd] {
    background: rgba(192, 192, 192, 0.15);
    border: 1px solid rgba(192, 192, 192, 0.35);
    color: #C0C0C0;
}

.cert-gold[b-t5g01kcjwd] {
    background: var(--wl-gold-bg-hover);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.35);
    color: var(--wl-gold);
}

.cert-platinum[b-t5g01kcjwd] {
    background: rgba(229, 228, 226, 0.12);
    border: 1px solid rgba(229, 228, 226, 0.35);
    color: #E5E4E2;
    animation: shimmer-platinum-b-t5g01kcjwd 3s ease-in-out infinite;
}

@keyframes shimmer-platinum-b-t5g01kcjwd {
    0%, 100% { box-shadow: 0 0 8px rgba(229, 228, 226, 0.15); }
    50% { box-shadow: 0 0 16px rgba(229, 228, 226, 0.3); }
}

.cert-legendary[b-t5g01kcjwd] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15), rgba(var(--wl-purple-rgb), 0.15));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.35);
    color: var(--wl-gold);
    animation: shimmer-legendary-b-t5g01kcjwd 2s ease-in-out infinite;
}

@keyframes shimmer-legendary-b-t5g01kcjwd {
    0%, 100% {
        box-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.2);
        border-color: rgba(var(--wl-gold-rgb), 0.35);
    }
    50% {
        box-shadow: 0 0 20px rgba(var(--wl-purple-rgb), 0.3);
        border-color: rgba(var(--wl-purple-rgb), 0.4);
    }
}

/* ============================================
   OVERVIEW SECTION
   ============================================ */

.overview-section[b-t5g01kcjwd] {
    margin-bottom: 2rem;
}

.overview-grid[b-t5g01kcjwd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.overview-card[b-t5g01kcjwd] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.overview-card:hover[b-t5g01kcjwd] {
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--wl-shadow-color);
}

.overview-label[b-t5g01kcjwd] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-text-muted);
    font-weight: 500;
}

.overview-value[b-t5g01kcjwd] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.03em;
    line-height: 1;
}

.momentum-value[b-t5g01kcjwd] {
    color: #22c55e;
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
}

.overview-progress-bar[b-t5g01kcjwd] {
    width: 100%;
    height: 4px;
    background: var(--wl-border-medium);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.375rem;
}

.overview-progress-fill[b-t5g01kcjwd] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   CERTIFICATE PROGRESS SECTION
   ============================================ */

.cert-progress-section[b-t5g01kcjwd] {
    margin-bottom: 2rem;
    padding: 1.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.04) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 1.25rem;
}

.section-title[b-t5g01kcjwd] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-medium);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.section-icon[b-t5g01kcjwd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.section-icon svg[b-t5g01kcjwd] {
    width: 1.25rem;
    height: 1.25rem;
}

.cert-progress-icon[b-t5g01kcjwd] {
    color: var(--wl-gold);
    background: var(--wl-gold-bg-hover);
}

.timeline-icon[b-t5g01kcjwd] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

.section-count[b-t5g01kcjwd] {
    margin-left: auto;
    padding: 0.375rem 1rem;
    background: var(--wl-border-medium);
    border-radius: 2rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    letter-spacing: 0.05em;
}

.cert-tier-track[b-t5g01kcjwd] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0.5rem 0;
}

.cert-tier-node[b-t5g01kcjwd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    flex: 1;
    position: relative;
}

.cert-tier-node[b-t5g01kcjwd]::after {
    content: '';
    position: absolute;
    top: 1rem;
    left: 50%;
    right: -50%;
    height: 2px;
    background: var(--wl-border-medium);
    z-index: 0;
}

.cert-tier-node:last-child[b-t5g01kcjwd]::after {
    display: none;
}

.cert-tier-node.achieved[b-t5g01kcjwd]::after {
    background: var(--wl-gold);
}

.cert-node-dot[b-t5g01kcjwd] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--wl-border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    background: var(--wl-bg-primary);
    transition: all 0.3s ease;
}

.achieved .cert-node-dot[b-t5g01kcjwd] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.15);
}

.current .cert-node-dot[b-t5g01kcjwd] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.2);
    box-shadow: 0 0 15px rgba(var(--wl-gold-rgb), 0.3);
}

.check-icon[b-t5g01kcjwd] {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--wl-gold);
}

.cert-node-label[b-t5g01kcjwd] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    color: var(--wl-text-muted);
    transition: color 0.3s ease;
}

.achieved .cert-node-label[b-t5g01kcjwd] {
    color: var(--wl-text-primary);
}

.current .cert-node-label[b-t5g01kcjwd] {
    color: var(--wl-gold);
}

/* Certificate-specific colors */
.cert-bronze .cert-node-dot[b-t5g01kcjwd] { border-color: #CD7F32; }
.cert-bronze.achieved .cert-node-dot[b-t5g01kcjwd] { background: rgba(205, 127, 50, 0.15); }
.cert-silver .cert-node-dot[b-t5g01kcjwd] { border-color: #C0C0C0; }
.cert-silver.achieved .cert-node-dot[b-t5g01kcjwd] { background: rgba(192, 192, 192, 0.15); }
.cert-gold .cert-node-dot[b-t5g01kcjwd] { border-color: var(--wl-gold); }
.cert-gold.achieved .cert-node-dot[b-t5g01kcjwd] { background: var(--wl-gold-bg-hover); }
.cert-platinum .cert-node-dot[b-t5g01kcjwd] { border-color: #E5E4E2; }
.cert-platinum.achieved .cert-node-dot[b-t5g01kcjwd] { background: rgba(229, 228, 226, 0.15); }
.cert-legendary .cert-node-dot[b-t5g01kcjwd] { border-color: var(--wl-purple); }
.cert-legendary.achieved .cert-node-dot[b-t5g01kcjwd] { background: rgba(var(--wl-purple-rgb), 0.15); }

/* ============================================
   TIMELINE SECTION
   ============================================ */

.timeline-section[b-t5g01kcjwd] {
    margin-bottom: 2rem;
    padding: 1.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1.25rem;
}

.timeline[b-t5g01kcjwd] {
    display: flex;
    flex-direction: column;
}

.timeline-stop[b-t5g01kcjwd] {
    display: flex;
    gap: 1.25rem;
    min-height: 80px;
}

.timeline-connector[b-t5g01kcjwd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 2.5rem;
    flex-shrink: 0;
}

.connector-dot[b-t5g01kcjwd] {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid var(--wl-border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--wl-bg-primary);
    z-index: 1;
    transition: all 0.3s ease;
}

.dot-completed[b-t5g01kcjwd] {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

.dot-cancelled[b-t5g01kcjwd] {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.dot-next[b-t5g01kcjwd] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.15);
    box-shadow: 0 0 15px rgba(var(--wl-gold-rgb), 0.3);
    animation: pulse-dot-b-t5g01kcjwd 2s ease-in-out infinite;
}

@keyframes pulse-dot-b-t5g01kcjwd {
    0%, 100% { box-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.2); }
    50% { box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4); }
}

.dot-check[b-t5g01kcjwd] {
    width: 0.875rem;
    height: 0.875rem;
    color: #22c55e;
}

.dot-x[b-t5g01kcjwd] {
    width: 0.75rem;
    height: 0.75rem;
    color: #ef4444;
}

.dot-number[b-t5g01kcjwd] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    letter-spacing: 0.05em;
}

.dot-next .dot-number[b-t5g01kcjwd] {
    color: var(--wl-gold);
}

.connector-line[b-t5g01kcjwd] {
    width: 2px;
    flex: 1;
    min-height: 20px;
    background: var(--wl-border-medium);
}

.line-completed[b-t5g01kcjwd] {
    background: rgba(34, 197, 94, 0.4);
}

/* Stop Content */
.stop-content[b-t5g01kcjwd] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 1.25rem;
    background: rgba(var(--wl-bg-modal-rgb), 0.5);
    border: 1px solid transparent;
    border-radius: 0.875rem;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.stop-completed .stop-content[b-t5g01kcjwd] {
    border-color: rgba(34, 197, 94, 0.1);
}

.stop-next .stop-content[b-t5g01kcjwd] {
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.06) 0%,
        rgba(var(--wl-bg-modal-rgb), 0.6) 100%);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.08);
}

.stop-cancelled .stop-content[b-t5g01kcjwd] {
    opacity: 0.5;
    border-color: rgba(239, 68, 68, 0.1);
}

.stop-main[b-t5g01kcjwd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 160px;
}

.stop-city-row[b-t5g01kcjwd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.stop-city-name[b-t5g01kcjwd] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}

.venue-tier-badge[b-t5g01kcjwd] {
    padding: 0.2rem 0.625rem;
    border-radius: 2rem;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.tier-club[b-t5g01kcjwd] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.7);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
}

.tier-theater[b-t5g01kcjwd] {
    background: rgba(96, 165, 250, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(96, 165, 250, 0.25);
}

.tier-hall[b-t5g01kcjwd] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    color: var(--wl-purple);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.25);
}

.tier-arena[b-t5g01kcjwd] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
}

.tier-stadium[b-t5g01kcjwd] {
    background: rgba(244, 63, 94, 0.12);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.25);
}

.tier-festival[b-t5g01kcjwd] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15), rgba(244, 63, 94, 0.15));
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
}

.stop-date[b-t5g01kcjwd] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
}

/* Stop Report */
.stop-report[b-t5g01kcjwd] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    align-items: center;
    flex: 1;
}

.report-stat[b-t5g01kcjwd] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.report-label[b-t5g01kcjwd] {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
}

.report-value[b-t5g01kcjwd] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.revenue-text[b-t5g01kcjwd] {
    color: var(--wl-gold);
}

.energy-text.energy-high[b-t5g01kcjwd] { color: #22c55e; }
.energy-text.energy-medium[b-t5g01kcjwd] { color: var(--wl-gold); }
.energy-text.energy-low[b-t5g01kcjwd] { color: #f97316; }
.energy-text.energy-critical[b-t5g01kcjwd] { color: #ef4444; }

.sold-out-badge[b-t5g01kcjwd] {
    padding: 0.2rem 0.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    border-radius: 2rem;
    font-size: 0.55rem;
    font-weight: 700;
    color: var(--wl-bg-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

/* Play Button */
.play-button[b-t5g01kcjwd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    border-radius: 0.75rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.3);
    white-space: nowrap;
    margin-left: auto;
}

.play-button:hover[b-t5g01kcjwd] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(var(--wl-gold-rgb), 0.45);
}

.play-button svg[b-t5g01kcjwd] {
    width: 0.875rem;
    height: 0.875rem;
}

.view-link[b-t5g01kcjwd] {
    display: flex;
    align-items: center;
    color: var(--wl-text-muted);
    transition: color 0.2s ease;
    margin-left: auto;
    text-decoration: none;
}

.view-link:hover[b-t5g01kcjwd] {
    color: var(--wl-gold);
}

.view-link svg[b-t5g01kcjwd] {
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================
   CANCEL SECTION
   ============================================ */

.cancel-section[b-t5g01kcjwd] {
    display: flex;
    justify-content: center;
    padding: 1rem 0 3rem;
}

.cancel-button[b-t5g01kcjwd] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 2rem;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 0.875rem;
    color: #ef4444;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.cancel-button:hover[b-t5g01kcjwd] {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
}

.cancel-button svg[b-t5g01kcjwd] {
    width: 1.125rem;
    height: 1.125rem;
}

.cancel-confirm[b-t5g01kcjwd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 1rem;
    max-width: 500px;
    width: 100%;
}

.cancel-warning[b-t5g01kcjwd] {
    font-size: 0.9rem;
    color: #ef4444;
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

.cancel-actions[b-t5g01kcjwd] {
    display: flex;
    gap: 0.75rem;
}

.confirm-cancel-btn[b-t5g01kcjwd] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 0.625rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.confirm-cancel-btn:hover:not(:disabled)[b-t5g01kcjwd] {
    background: #dc2626;
}

.confirm-cancel-btn:disabled[b-t5g01kcjwd] {
    opacity: 0.6;
    cursor: not-allowed;
}

.cancel-back-btn[b-t5g01kcjwd] {
    padding: 0.625rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: var(--wl-text-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.625rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.cancel-back-btn:hover[b-t5g01kcjwd] {
    background: rgba(var(--wl-contrast-rgb), 0.1);
}

.spinner-small[b-t5g01kcjwd] {
    width: 0.875rem;
    height: 0.875rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-t5g01kcjwd 0.8s linear infinite;
}

@keyframes spin-b-t5g01kcjwd {
    to { transform: rotate(360deg); }
}

/* ============================================
   LOADING & NOT FOUND
   ============================================ */

.loading-state[b-t5g01kcjwd] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
}

.loading-spinner[b-t5g01kcjwd] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-t5g01kcjwd 1s linear infinite;
}

.not-found[b-t5g01kcjwd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
}

.not-found h2[b-t5g01kcjwd] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--wl-text-secondary);
    margin: 0 0 1rem 0;
}

.back-link-cta[b-t5g01kcjwd] {
    padding: 0.75rem 2rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    border-radius: 0.75rem;
    color: var(--wl-bg-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.back-link-cta:hover[b-t5g01kcjwd] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.3);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .header-content[b-t5g01kcjwd] {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .tour-details-page[b-t5g01kcjwd] {
        padding: 1rem;
    }

    .details-header[b-t5g01kcjwd] {
        padding: 1.5rem;
    }

    .details-header h1[b-t5g01kcjwd] {
        font-size: 2.25rem;
    }

    .overview-grid[b-t5g01kcjwd] {
        grid-template-columns: repeat(2, 1fr);
    }

    .cert-tier-track[b-t5g01kcjwd] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .cert-tier-node[b-t5g01kcjwd]::after {
        display: none;
    }

    .stop-content[b-t5g01kcjwd] {
        flex-direction: column;
        align-items: flex-start;
    }

    .stop-report[b-t5g01kcjwd] {
        width: 100%;
    }

    .play-button[b-t5g01kcjwd],
    .view-link[b-t5g01kcjwd] {
        margin-left: 0;
    }

    .section-title[b-t5g01kcjwd] {
        font-size: 1.25rem;
    }

    .timeline-stop[b-t5g01kcjwd] {
        gap: 0.75rem;
    }
}

@media (max-width: 480px) {
    .overview-grid[b-t5g01kcjwd] {
        grid-template-columns: 1fr;
    }

    .cancel-actions[b-t5g01kcjwd] {
        flex-direction: column;
        width: 100%;
    }

    .confirm-cancel-btn[b-t5g01kcjwd],
    .cancel-back-btn[b-t5g01kcjwd] {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}
/* /Components/Pages/Career/Music/Concerts/Tours/Index.razor.rz.scp.css */
/* ============================================
   TOUR LIST - Hollywood Glamour Aesthetic
   Tour history with certificate badges
   ============================================ */

.tours-page[b-xgq3shosj8] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
}

/* ============================================
   HEADER
   ============================================ */

.tours-header[b-xgq3shosj8] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem 3rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.12) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 1.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow:
        0 0 60px rgba(var(--wl-gold-rgb), 0.08),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

.header-bg-pattern[b-xgq3shosj8] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, var(--wl-gold-bg-hover) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 30%);
    pointer-events: none;
}

.header-content[b-xgq3shosj8] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 2rem;
    z-index: 1;
}

.header-left[b-xgq3shosj8] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.back-link[b-xgq3shosj8] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-link:hover[b-xgq3shosj8] {
    color: var(--wl-gold);
}

.back-link svg[b-xgq3shosj8] {
    width: 1rem;
    height: 1rem;
}

.header-title-group[b-xgq3shosj8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-xgq3shosj8] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--wl-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
}

.tours-header h1[b-xgq3shosj8] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-gold) 50%, var(--wl-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.header-actions[b-xgq3shosj8] {
    display: flex;
    align-items: center;
}

.plan-disabled-hint[b-xgq3shosj8] {
    font-size: 0.85rem;
    color: var(--wl-text-muted);
    max-width: 280px;
    text-align: right;
    line-height: 1.5;
}

/* CTA Button */
.cta-button[b-xgq3shosj8] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border: none;
    border-radius: 0.875rem;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.cta-primary[b-xgq3shosj8] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    box-shadow:
        0 4px 20px rgba(var(--wl-gold-rgb), 0.35),
        0 0 40px var(--wl-gold-bg-hover),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.25);
}

.cta-primary:hover[b-xgq3shosj8] {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 8px 35px rgba(var(--wl-gold-rgb), 0.5),
        0 0 60px var(--wl-gold-border),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.35);
}

.cta-icon svg[b-xgq3shosj8] {
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================
   SECTIONS
   ============================================ */

.tour-section[b-xgq3shosj8] {
    margin-bottom: 2rem;
    padding: 1.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1.25rem;
    transition: all 0.3s ease;
}

.tour-section:hover[b-xgq3shosj8] {
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
}

.section-title[b-xgq3shosj8] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-medium);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.section-icon[b-xgq3shosj8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.section-icon svg[b-xgq3shosj8] {
    width: 1.25rem;
    height: 1.25rem;
}

.section-count[b-xgq3shosj8] {
    margin-left: auto;
    padding: 0.375rem 1rem;
    background: var(--wl-border-medium);
    border-radius: 2rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    letter-spacing: 0.05em;
}

/* Section accents */
.section-active[b-xgq3shosj8] {
    border-left: 4px solid #22c55e;
    box-shadow: inset 4px 0 20px rgba(34, 197, 94, 0.05);
}

.active-icon[b-xgq3shosj8] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

.section-past[b-xgq3shosj8] {
    border-left: 4px solid var(--wl-gold);
    box-shadow: inset 4px 0 20px rgba(var(--wl-gold-rgb), 0.05);
}

.past-icon[b-xgq3shosj8] {
    color: var(--wl-gold);
    background: var(--wl-gold-bg-hover);
}

/* ============================================
   ACTIVE TOUR CARD
   ============================================ */

.active-tour-card[b-xgq3shosj8] {
    position: relative;
    display: block;
    background: linear-gradient(145deg,
        rgba(34, 197, 94, 0.06) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.active-tour-card:hover[b-xgq3shosj8] {
    border-color: rgba(34, 197, 94, 0.35);
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.1);
    transform: translateY(-2px);
}

.active-tour-card:hover .card-arrow[b-xgq3shosj8] {
    opacity: 1;
    transform: translateX(0) translateY(-50%);
}

.active-tour-header[b-xgq3shosj8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.active-tour-name[b-xgq3shosj8] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: var(--wl-text-primary);
    margin: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.active-tour-body[b-xgq3shosj8] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.tour-progress-section[b-xgq3shosj8] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tour-progress-label[b-xgq3shosj8] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

.tour-progress-count[b-xgq3shosj8] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
}

.tour-progress-bar[b-xgq3shosj8] {
    width: 100%;
    height: 6px;
    background: var(--wl-border-medium);
    border-radius: 3px;
    overflow: hidden;
}

.tour-progress-fill[b-xgq3shosj8] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #10b981);
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.active-tour-meta[b-xgq3shosj8] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.meta-item[b-xgq3shosj8] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.meta-label[b-xgq3shosj8] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
}

.meta-value[b-xgq3shosj8] {
    font-size: 0.9rem;
    color: var(--wl-text-primary);
    font-weight: 500;
}

.momentum-value[b-xgq3shosj8] {
    color: #22c55e;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(34, 197, 94, 0.3);
}

/* ============================================
   STATUS BADGES
   ============================================ */

.tour-status-badge[b-xgq3shosj8] {
    padding: 0.375rem 1rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.status-active[b-xgq3shosj8] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.status-completed[b-xgq3shosj8] {
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: #60a5fa;
}

.status-cancelled[b-xgq3shosj8] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #ef4444;
}

.status-planning[b-xgq3shosj8] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

/* ============================================
   CERTIFICATE BADGES
   ============================================ */

.certificate-badge[b-xgq3shosj8] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: help;
}

.cert-icon[b-xgq3shosj8] {
    width: 0.875rem;
    height: 0.875rem;
}

.cert-bronze[b-xgq3shosj8] {
    background: rgba(205, 127, 50, 0.15);
    border: 1px solid rgba(205, 127, 50, 0.35);
    color: #CD7F32;
}

.cert-silver[b-xgq3shosj8] {
    background: rgba(192, 192, 192, 0.15);
    border: 1px solid rgba(192, 192, 192, 0.35);
    color: #C0C0C0;
}

.cert-gold[b-xgq3shosj8] {
    background: var(--wl-gold-bg-hover);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.35);
    color: var(--wl-gold);
}

.cert-platinum[b-xgq3shosj8] {
    background: rgba(229, 228, 226, 0.12);
    border: 1px solid rgba(229, 228, 226, 0.35);
    color: #E5E4E2;
    animation: shimmer-platinum-b-xgq3shosj8 3s ease-in-out infinite;
}

@keyframes shimmer-platinum-b-xgq3shosj8 {
    0%, 100% {
        box-shadow: 0 0 8px rgba(229, 228, 226, 0.15);
    }
    50% {
        box-shadow: 0 0 16px rgba(229, 228, 226, 0.3);
    }
}

.cert-legendary[b-xgq3shosj8] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15), rgba(var(--wl-purple-rgb), 0.15));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.35);
    color: var(--wl-gold);
    animation: shimmer-legendary-b-xgq3shosj8 2s ease-in-out infinite;
}

@keyframes shimmer-legendary-b-xgq3shosj8 {
    0%, 100% {
        box-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.2);
        border-color: rgba(var(--wl-gold-rgb), 0.35);
    }
    50% {
        box-shadow: 0 0 20px rgba(var(--wl-purple-rgb), 0.3);
        border-color: rgba(var(--wl-purple-rgb), 0.4);
    }
}

/* ============================================
   PAST TOURS GRID
   ============================================ */

.past-tours-grid[b-xgq3shosj8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1.25rem;
}

.past-tour-card[b-xgq3shosj8] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    overflow: hidden;
}

.past-tour-card:hover[b-xgq3shosj8] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px var(--wl-shadow-color),
        0 0 20px var(--wl-gold-bg);
}

.past-tour-card:hover .card-arrow[b-xgq3shosj8] {
    opacity: 1;
    transform: translateX(0) translateY(-50%);
}

.past-tour-header[b-xgq3shosj8] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.past-tour-name[b-xgq3shosj8] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    color: var(--wl-text-primary);
    margin: 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}

.past-tour-badges[b-xgq3shosj8] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.past-tour-stats[b-xgq3shosj8] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.past-stat[b-xgq3shosj8] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.past-stat-label[b-xgq3shosj8] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
}

.past-stat-value[b-xgq3shosj8] {
    font-size: 0.85rem;
    color: var(--wl-text-primary);
    font-weight: 500;
}

/* ============================================
   CARD ARROW
   ============================================ */

.card-arrow[b-xgq3shosj8] {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateX(-8px) translateY(-50%);
    opacity: 0;
    transition: all 0.3s ease;
    color: var(--wl-gold);
}

.card-arrow svg[b-xgq3shosj8] {
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-state[b-xgq3shosj8] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
}

.loading-spinner[b-xgq3shosj8] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-xgq3shosj8 1s linear infinite;
}

@keyframes spin-b-xgq3shosj8 {
    to { transform: rotate(360deg); }
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-xgq3shosj8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.02) 0%,
        rgba(var(--wl-gold-rgb), 0.02) 100%);
    border: 2px dashed var(--wl-gold-border);
    border-radius: 1.5rem;
    transition: all 0.3s ease;
}

.empty-state:hover[b-xgq3shosj8] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
}

.empty-icon[b-xgq3shosj8] {
    width: 6rem;
    height: 6rem;
    margin-bottom: 2rem;
    color: rgba(var(--wl-gold-rgb), 0.3);
    animation: pulse-glow-b-xgq3shosj8 3s ease-in-out infinite;
}

@keyframes pulse-glow-b-xgq3shosj8 {
    0%, 100% {
        filter: drop-shadow(0 0 10px var(--wl-gold-bg));
        opacity: 0.3;
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(var(--wl-gold-rgb), 0.3));
        opacity: 0.5;
    }
}

.empty-icon svg[b-xgq3shosj8] {
    width: 100%;
    height: 100%;
}

.empty-state h3[b-xgq3shosj8] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0 0 0.75rem 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.empty-state p[b-xgq3shosj8] {
    color: var(--wl-text-muted);
    margin: 0 0 2rem 0;
    max-width: 420px;
    line-height: 1.6;
}

.empty-cta[b-xgq3shosj8] {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    border-radius: 0.75rem;
    color: var(--wl-bg-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 20px rgba(var(--wl-gold-rgb), 0.3),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.2);
}

.empty-cta:hover[b-xgq3shosj8] {
    transform: translateY(-3px);
    box-shadow:
        0 8px 30px rgba(var(--wl-gold-rgb), 0.45),
        0 0 40px var(--wl-gold-bg-hover),
        inset 0 1px 0 var(--wl-text-muted);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .header-content[b-xgq3shosj8] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-actions[b-xgq3shosj8] {
        width: 100%;
    }

    .plan-disabled-hint[b-xgq3shosj8] {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .tours-page[b-xgq3shosj8] {
        padding: 1rem;
    }

    .tours-header[b-xgq3shosj8] {
        padding: 1.5rem;
    }

    .tours-header h1[b-xgq3shosj8] {
        font-size: 2.25rem;
    }

    .cta-button[b-xgq3shosj8] {
        width: 100%;
        justify-content: center;
    }

    .past-tours-grid[b-xgq3shosj8] {
        grid-template-columns: 1fr;
    }

    .section-title[b-xgq3shosj8] {
        font-size: 1.25rem;
    }

    .active-tour-name[b-xgq3shosj8] {
        font-size: 1.375rem;
    }

    .active-tour-meta[b-xgq3shosj8] {
        flex-direction: column;
        gap: 1rem;
    }

    .empty-state[b-xgq3shosj8] {
        padding: 3rem 1.5rem;
    }

    .empty-state h3[b-xgq3shosj8] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/Career/Music/Create/Index.razor.rz.scp.css */
/* ============================================
   SONG CREATION WIZARD - Multi-step song creator
   Theme: Luxury Music Production / Studio Vibes
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.wizard-page[b-f4e03lb0pa] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.page-atmosphere[b-f4e03lb0pa] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(34, 211, 238, 0.04) 0%, transparent 50%);
}

/* ============================================
   WIZARD HEADER
   ============================================ */

.wizard-header[b-f4e03lb0pa] {
    position: relative;
    z-index: 1;
    padding: 2rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

.wizard-header[b-f4e03lb0pa]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-f4e03lb0pa] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.back-link[b-f4e03lb0pa] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.8125rem;
    transition: all 0.3s ease;
}

.back-link:hover[b-f4e03lb0pa] {
    color: var(--wl-gold);
}

.back-link svg[b-f4e03lb0pa] {
    width: 1rem;
    height: 1rem;
}

.header-main[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-f4e03lb0pa] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-f4e03lb0pa] {
    width: 1.75rem;
    height: 1.75rem;
}

.header-text h1[b-f4e03lb0pa] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.header-subtitle[b-f4e03lb0pa] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

.band-project-banner[b-f4e03lb0pa] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.9rem;
    margin: -0.5rem 0 1.5rem;
    padding: 0.85rem 1rem;
    overflow: hidden;
    background:
        linear-gradient(110deg, rgba(var(--wl-gold-rgb), 0.13), rgba(34, 211, 238, 0.055) 58%, rgba(var(--wl-bg-secondary-rgb), 0.92)),
        rgba(var(--wl-bg-secondary-rgb), 0.92);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-radius: 0.875rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 34px rgba(0, 0, 0, 0.16);
}

.studio-required-state[b-f4e03lb0pa] {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 1.25rem;
    padding: clamp(2rem, 7vw, 4rem) clamp(1.25rem, 5vw, 3rem);
    text-align: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--wl-gold-rgb), 0.16), transparent 52%),
        rgba(var(--wl-bg-secondary-rgb), 0.9);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.24);
    border-radius: 1.25rem;
    box-shadow: 0 24px 65px rgba(0, 0, 0, 0.24);
}

.studio-required-icon[b-f4e03lb0pa] {
    display: grid;
    width: 4.5rem;
    height: 4.5rem;
    place-items: center;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-radius: 1.1rem;
    box-shadow: 0 0 35px rgba(var(--wl-gold-rgb), 0.12);
}

.studio-required-icon svg[b-f4e03lb0pa] {
    width: 2.25rem;
    height: 2.25rem;
}

.studio-required-copy[b-f4e03lb0pa] {
    max-width: 34rem;
}

.studio-required-eyebrow[b-f4e03lb0pa] {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--wl-gold);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.studio-required-copy h2[b-f4e03lb0pa] {
    margin: 0;
    color: var(--wl-text-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.8rem, 5vw, 2.5rem);
    letter-spacing: 0.045em;
}

.studio-required-copy p[b-f4e03lb0pa] {
    margin: 0.6rem 0 0;
    color: var(--wl-text-secondary);
    line-height: 1.65;
}

.studio-required-action[b-f4e03lb0pa] {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    width: auto;
    text-decoration: none;
}

.studio-required-action svg[b-f4e03lb0pa] {
    width: 1rem;
    height: 1rem;
}

.band-project-banner[b-f4e03lb0pa]::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--wl-gold), #22d3ee);
    box-shadow: 0 0 18px rgba(var(--wl-gold-rgb), 0.45);
}

.band-project-icon[b-f4e03lb0pa] {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.24);
    border-radius: 0.75rem;
}

.band-project-icon svg[b-f4e03lb0pa] {
    width: 1.45rem;
    height: 1.45rem;
}

.band-project-copy[b-f4e03lb0pa] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.12rem;
}

.band-project-eyebrow[b-f4e03lb0pa] {
    color: var(--wl-gold);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.band-project-copy strong[b-f4e03lb0pa] {
    overflow: hidden;
    color: var(--wl-text-primary);
    font-size: 0.95rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.band-project-description[b-f4e03lb0pa] {
    color: var(--wl-text-secondary);
    font-size: 0.72rem;
    line-height: 1.4;
}

.band-project-badge[b-f4e03lb0pa] {
    padding: 0.42rem 0.65rem;
    color: color-mix(in srgb, var(--wl-gold) 78%, white);
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.26);
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ============================================
   STEP INDICATOR
   ============================================ */

.step-indicator[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
}

.step-item[b-f4e03lb0pa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.step-circle[b-f4e03lb0pa] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.15);
    border-radius: 50%;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-circle svg[b-f4e03lb0pa] {
    width: 1rem;
    height: 1rem;
}

.step-item.active .step-circle[b-f4e03lb0pa] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    border-color: var(--wl-gold);
    color: var(--wl-bg-primary);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
    transform: scale(1.1);
}

.step-item.completed .step-circle[b-f4e03lb0pa] {
    background: linear-gradient(135deg, var(--wl-gold-dark) 0%, var(--wl-gold) 100%);
    border-color: var(--wl-gold-dark);
    color: var(--wl-bg-primary);
}

.step-label[b-f4e03lb0pa] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.3s ease;
    text-align: center;
    max-width: 5rem;
}

.step-item.active .step-label[b-f4e03lb0pa] {
    color: var(--wl-gold);
}

.step-item.completed .step-label[b-f4e03lb0pa] {
    color: var(--wl-gold-dark);
}

.step-connector[b-f4e03lb0pa] {
    width: 3rem;
    height: 2px;
    background: var(--wl-border-medium);
    margin: 0 0.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.step-connector[b-f4e03lb0pa]::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: linear-gradient(90deg, var(--wl-gold-dark), var(--wl-gold));
    transition: width 0.5s ease;
}

.step-connector.completed[b-f4e03lb0pa]::after {
    width: 100%;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-f4e03lb0pa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    color: var(--wl-text-muted);
    gap: 1.5rem;
}

.loading-spinner[b-f4e03lb0pa] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.1);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-f4e03lb0pa 1s linear infinite;
}

@keyframes spin-b-f4e03lb0pa {
    to { transform: rotate(360deg); }
}

/* ============================================
   STEP CONTENT
   ============================================ */

.step-content[b-f4e03lb0pa] {
    position: relative;
    z-index: 1;
    animation: fadeSlideIn-b-f4e03lb0pa 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeSlideIn-b-f4e03lb0pa {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-section[b-f4e03lb0pa] {
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.form-section[b-f4e03lb0pa]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 20%,
        rgba(var(--wl-gold-rgb), 0.8) 50%,
        rgba(var(--wl-gold-rgb), 0.5) 80%,
        transparent 100%);
}

.section-title[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
}

.section-title svg[b-f4e03lb0pa] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.form-grid[b-f4e03lb0pa] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.form-group[b-f4e03lb0pa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group.full-width[b-f4e03lb0pa] {
    grid-column: 1 / -1;
}

.form-group label[b-f4e03lb0pa] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.input-wrapper[b-f4e03lb0pa] {
    position: relative;
}

.input-wrapper input[b-f4e03lb0pa] {
    width: 100%;
    padding: 0.875rem 1rem;
    padding-right: 4rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.input-wrapper input:focus[b-f4e03lb0pa] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.1);
}

.input-wrapper input[b-f4e03lb0pa]::placeholder {
    color: var(--wl-text-muted);
}

.char-count[b-f4e03lb0pa] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.select-wrapper[b-f4e03lb0pa] {
    position: relative;
}

.select-wrapper select[b-f4e03lb0pa] {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.9375rem;
    cursor: pointer;
    appearance: none;
    transition: all 0.3s ease;
}

.select-wrapper select:focus[b-f4e03lb0pa] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.1);
}

.select-wrapper select option[b-f4e03lb0pa] {
    background: var(--wl-bg-secondary);
    color: var(--wl-text-primary);
}

.select-arrow[b-f4e03lb0pa] {
    position: absolute;
    right: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    pointer-events: none;
}

.select-wrapper.compact select[b-f4e03lb0pa] {
    padding: 0.625rem 2rem 0.625rem 0.75rem;
    font-size: 0.8125rem;
}

/* Slider */
.slider-wrapper[b-f4e03lb0pa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.slider-wrapper input[type="range"][b-f4e03lb0pa] {
    width: 100%;
    height: 6px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    border-radius: 3px;
    appearance: none;
    cursor: pointer;
}

.slider-wrapper input[type="range"][b-f4e03lb0pa]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.4);
    transition: transform 0.2s ease;
}

.slider-wrapper input[type="range"][b-f4e03lb0pa]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.slider-labels[b-f4e03lb0pa] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.slider-labels .current-value[b-f4e03lb0pa] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: var(--wl-gold);
}

/* ============================================
   STEP 2: AUTHORSHIP
   ============================================ */

.authorship-grid[b-f4e03lb0pa] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.author-card[b-f4e03lb0pa] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--wl-surface-primary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.author-card:hover[b-f4e03lb0pa] {
    border-color: rgba(var(--wl-gold-rgb), 0.2);
    background: rgba(var(--wl-gold-rgb), 0.03);
}

.author-icon[b-f4e03lb0pa] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

.author-icon svg[b-f4e03lb0pa] {
    width: 1.5rem;
    height: 1.5rem;
}

.author-icon.lyrics[b-f4e03lb0pa] {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.05) 100%);
    border: 1px solid rgba(34, 211, 238, 0.2);
    color: #22D3EE;
}

.author-icon.melody[b-f4e03lb0pa] {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(251, 146, 60, 0.05) 100%);
    border: 1px solid rgba(251, 146, 60, 0.2);
    color: #FB923C;
}

.author-content[b-f4e03lb0pa] {
    flex: 1;
    min-width: 0;
}

.author-content h3[b-f4e03lb0pa] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem 0;
}

.author-description[b-f4e03lb0pa] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin: 0 0 0.75rem 0;
}

.no-members-hint[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(var(--wl-gold-rgb), 0.05);
    border: 1px solid var(--wl-gold-bg-hover);
    border-radius: 0.5rem;
    color: rgba(var(--wl-gold-rgb), 0.8);
    font-size: 0.8125rem;
}

.no-members-hint svg[b-f4e03lb0pa] {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.no-members-hint p[b-f4e03lb0pa] {
    margin: 0;
}

.featured-lineup-panel[b-f4e03lb0pa] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 1.75rem;
    padding: clamp(1.25rem, 2vw, 2rem);
    border: 1px solid rgba(34, 211, 238, 0.28);
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 8% 0%, rgba(34, 211, 238, 0.12), transparent 32%),
        radial-gradient(circle at 92% 100%, rgba(168, 85, 247, 0.12), transparent 34%),
        linear-gradient(145deg, rgba(8, 25, 44, 0.96), rgba(7, 17, 34, 0.94));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 24px 70px rgba(0, 0, 0, 0.22);
}

.featured-lineup-panel[b-f4e03lb0pa]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, black, transparent 72%);
}

.featured-lineup-header[b-f4e03lb0pa] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.35rem;
}

.featured-eyebrow[b-f4e03lb0pa] {
    display: block;
    margin-bottom: 0.3rem;
    color: #22d3ee;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.featured-lineup-header h3[b-f4e03lb0pa] {
    margin: 0;
    color: var(--wl-text-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.55rem, 2.5vw, 2rem);
    letter-spacing: 0.045em;
}

.featured-lineup-header p[b-f4e03lb0pa] {
    max-width: 46rem;
    margin: 0.35rem 0 0;
    color: rgba(var(--wl-contrast-rgb), 0.68);
    font-size: 0.875rem;
    line-height: 1.55;
}

.featured-lineup-count[b-f4e03lb0pa] {
    flex: 0 0 auto;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(34, 211, 238, 0.24);
    border-radius: 999px;
    background: rgba(34, 211, 238, 0.08);
    color: #a5f3fc;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.featured-lineup-slots[b-f4e03lb0pa] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.featured-slot[b-f4e03lb0pa] {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 5.3rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.025);
    text-align: left;
}

.featured-slot[b-f4e03lb0pa]::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    border-radius: 0 0 0.9rem 0.9rem;
    opacity: 0.72;
}

.featured-slot img[b-f4e03lb0pa] {
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.8rem;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.25);
}

.featured-slot-copy[b-f4e03lb0pa] {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.2rem;
}

.featured-slot-copy strong[b-f4e03lb0pa] {
    overflow: hidden;
    color: var(--wl-text-primary);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.featured-slot-copy span[b-f4e03lb0pa] {
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-size: 0.67rem;
    line-height: 1.25;
}

.featured-slot-primary[b-f4e03lb0pa] {
    border-color: rgba(34, 211, 238, 0.24);
    background: linear-gradient(145deg, rgba(34, 211, 238, 0.1), rgba(34, 211, 238, 0.025));
}

.featured-slot-primary[b-f4e03lb0pa]::after { background: #22d3ee; }

.featured-slot-band[b-f4e03lb0pa] {
    border-color: rgba(var(--wl-gold-rgb), 0.24);
    background: linear-gradient(145deg, rgba(var(--wl-gold-rgb), 0.1), rgba(var(--wl-gold-rgb), 0.025));
}

.featured-slot-band[b-f4e03lb0pa]::after { background: var(--wl-gold); }

.featured-slot-guest[b-f4e03lb0pa] {
    border-color: rgba(168, 85, 247, 0.3);
    background: linear-gradient(145deg, rgba(168, 85, 247, 0.12), rgba(168, 85, 247, 0.025));
}

.featured-slot-guest[b-f4e03lb0pa]::after { background: #a855f7; }

.featured-slot-status[b-f4e03lb0pa],
.featured-slot-lock[b-f4e03lb0pa] {
    flex: 0 0 auto;
    color: rgba(165, 243, 252, 0.72);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.featured-slot-lock[b-f4e03lb0pa] {
    display: grid;
    width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
}

.featured-slot-remove[b-f4e03lb0pa] {
    display: grid;
    width: 1.8rem;
    height: 1.8rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(248, 113, 113, 0.28);
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.08);
    color: #fca5a5;
    cursor: pointer;
    font-size: 1.05rem;
    line-height: 1;
    transition: 160ms ease;
}

.featured-slot-remove:hover[b-f4e03lb0pa] {
    border-color: rgba(248, 113, 113, 0.6);
    background: rgba(248, 113, 113, 0.18);
    transform: scale(1.06);
}

.featured-slot-empty[b-f4e03lb0pa] {
    justify-content: center;
    border-style: dashed;
    border-color: rgba(var(--wl-contrast-rgb), 0.16);
    color: rgba(var(--wl-contrast-rgb), 0.48);
    cursor: pointer;
    font: inherit;
    transition: 180ms ease;
}

.featured-slot-empty:hover[b-f4e03lb0pa] {
    border-color: rgba(34, 211, 238, 0.45);
    background: rgba(34, 211, 238, 0.06);
    color: #a5f3fc;
    transform: translateY(-2px);
}

.featured-slot-plus[b-f4e03lb0pa] {
    display: grid;
    width: 1.7rem;
    height: 1.7rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 1.1rem;
}

.featured-title-preview[b-f4e03lb0pa] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.25rem 0.8rem;
    align-items: baseline;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(168, 85, 247, 0.18);
    border-radius: 0.8rem;
    background: rgba(168, 85, 247, 0.055);
}

.featured-title-preview > span[b-f4e03lb0pa] {
    color: #c4b5fd;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.featured-title-preview strong[b-f4e03lb0pa] {
    overflow-wrap: anywhere;
    color: var(--wl-text-primary);
    font-size: 0.9rem;
}

.featured-title-preview small[b-f4e03lb0pa] {
    grid-column: 2;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    font-size: 0.68rem;
}

.featured-search[b-f4e03lb0pa] {
    margin-top: 1.15rem;
}

.featured-search > label[b-f4e03lb0pa] {
    display: block;
    margin-bottom: 0.45rem;
    color: rgba(var(--wl-contrast-rgb), 0.82);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.featured-search-control[b-f4e03lb0pa] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
}

.featured-search-control > svg[b-f4e03lb0pa] {
    position: absolute;
    z-index: 1;
    left: 0.95rem;
    width: 1.1rem;
    height: 1.1rem;
    color: rgba(var(--wl-contrast-rgb), 0.42);
    pointer-events: none;
}

.featured-search-control input[b-f4e03lb0pa] {
    width: 100%;
    min-height: 3rem;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    border: 1px solid rgba(34, 211, 238, 0.22);
    border-radius: 0.75rem;
    outline: none;
    background: rgba(1, 9, 20, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    color: var(--wl-text-primary);
    font: inherit;
    font-size: 0.88rem;
    transition: 180ms ease;
}

.featured-search-control input[b-f4e03lb0pa]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

.featured-search-control input:focus[b-f4e03lb0pa] {
    border-color: rgba(34, 211, 238, 0.65);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.featured-search-control button[b-f4e03lb0pa] {
    display: inline-flex;
    min-width: 7.2rem;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.72rem 1rem;
    border: 1px solid rgba(34, 211, 238, 0.4);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.2), rgba(14, 116, 144, 0.13));
    color: #a5f3fc;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    transition: 180ms ease;
}

.featured-search-control button:hover:not(:disabled)[b-f4e03lb0pa] {
    border-color: rgba(34, 211, 238, 0.7);
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.3), rgba(14, 116, 144, 0.2));
    transform: translateY(-1px);
}

.featured-search-control button:disabled[b-f4e03lb0pa] {
    cursor: not-allowed;
    opacity: 0.42;
}

.featured-search-spinner[b-f4e03lb0pa] {
    width: 0.85rem;
    height: 0.85rem;
    border: 2px solid rgba(165, 243, 252, 0.25);
    border-top-color: #a5f3fc;
    border-radius: 50%;
    animation: featured-spin-b-f4e03lb0pa 700ms linear infinite;
}

@keyframes featured-spin-b-f4e03lb0pa { to { transform: rotate(360deg); } }

.featured-search-feedback[b-f4e03lb0pa] {
    margin-top: 0.65rem;
}

.featured-search-state[b-f4e03lb0pa] {
    margin: 0;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 0.65rem;
    background: rgba(0, 0, 0, 0.16);
    color: rgba(var(--wl-contrast-rgb), 0.58);
    font-size: 0.78rem;
}

.featured-search-state.error[b-f4e03lb0pa] {
    border-color: rgba(248, 113, 113, 0.25);
    color: #fca5a5;
}

.featured-search-results[b-f4e03lb0pa] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.featured-search-results > li[b-f4e03lb0pa] { min-width: 0; }

.featured-search-result[b-f4e03lb0pa] {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 4rem;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.025);
    color: var(--wl-text-primary);
    cursor: pointer;
    text-align: left;
    transition: 180ms ease;
}

.featured-search-result:hover[b-f4e03lb0pa] {
    border-color: rgba(168, 85, 247, 0.45);
    background: rgba(168, 85, 247, 0.08);
    transform: translateY(-1px);
}

.featured-search-result img[b-f4e03lb0pa] {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 auto;
    border-radius: 0.65rem;
    object-fit: cover;
}

.featured-result-copy[b-f4e03lb0pa] {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.15rem;
}

.featured-result-copy strong[b-f4e03lb0pa],
.featured-result-copy small[b-f4e03lb0pa] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.featured-result-copy strong[b-f4e03lb0pa] { font-size: 0.82rem; }
.featured-result-copy small[b-f4e03lb0pa] { color: rgba(var(--wl-contrast-rgb), 0.45); font-size: 0.68rem; }

.featured-result-action[b-f4e03lb0pa] {
    flex: 0 0 auto;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
    background: rgba(168, 85, 247, 0.14);
    color: #ddd6fe;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
}

.featured-lineup-full[b-f4e03lb0pa] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.75rem;
    background: rgba(var(--wl-gold-rgb), 0.06);
    flex-direction: column;
}

.featured-lineup-full strong[b-f4e03lb0pa] { color: var(--wl-gold); font-size: 0.82rem; }
.featured-lineup-full span[b-f4e03lb0pa] { color: rgba(var(--wl-contrast-rgb), 0.58); font-size: 0.75rem; line-height: 1.45; }

.featured-rules[b-f4e03lb0pa] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
}

.featured-rules-icon[b-f4e03lb0pa] {
    display: grid;
    width: 1.4rem;
    height: 1.4rem;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(34, 211, 238, 0.25);
    border-radius: 50%;
    color: #67e8f9;
    font-family: Georgia, serif;
    font-size: 0.75rem;
    font-weight: 700;
}

.featured-rules strong[b-f4e03lb0pa] {
    display: block;
    margin-bottom: 0.2rem;
    color: rgba(var(--wl-contrast-rgb), 0.78);
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.featured-rules p[b-f4e03lb0pa] {
    margin: 0;
    color: rgba(var(--wl-contrast-rgb), 0.46);
    font-size: 0.7rem;
    line-height: 1.5;
}

.featured-slot:focus-visible[b-f4e03lb0pa],
.featured-slot-remove:focus-visible[b-f4e03lb0pa],
.featured-search-control button:focus-visible[b-f4e03lb0pa],
.featured-search-result:focus-visible[b-f4e03lb0pa] {
    outline: 2px solid #67e8f9;
    outline-offset: 3px;
}

@media (max-width: 1450px) {
    .featured-lineup-slots[b-f4e03lb0pa] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .featured-lineup-header[b-f4e03lb0pa] { flex-direction: column; gap: 0.8rem; }
    .featured-lineup-slots[b-f4e03lb0pa],
    .featured-search-results[b-f4e03lb0pa] { grid-template-columns: 1fr; }
    .featured-title-preview[b-f4e03lb0pa] { grid-template-columns: 1fr; }
    .featured-title-preview small[b-f4e03lb0pa] { grid-column: 1; }
    .featured-search-control[b-f4e03lb0pa] { grid-template-columns: 1fr; }
    .featured-search-control button[b-f4e03lb0pa] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .featured-slot[b-f4e03lb0pa],
    .featured-slot-remove[b-f4e03lb0pa],
    .featured-search-control input[b-f4e03lb0pa],
    .featured-search-control button[b-f4e03lb0pa],
    .featured-search-result[b-f4e03lb0pa] { transition: none; }
    .featured-search-spinner[b-f4e03lb0pa] { animation: none; }
}

/* ============================================
   STEP 3: SECTIONS
   ============================================ */

.section-header-row[b-f4e03lb0pa] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-header-row .section-title[b-f4e03lb0pa] {
    margin: 0;
}

.add-section-btn[b-f4e03lb0pa] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.1) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.375rem;
    color: var(--wl-gold);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-section-btn:hover[b-f4e03lb0pa] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.3) 0%, rgba(var(--wl-gold-rgb), 0.15) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    transform: translateY(-2px);
}

.add-section-btn svg[b-f4e03lb0pa] {
    width: 1rem;
    height: 1rem;
}

/* Timeline */
.sections-timeline[b-f4e03lb0pa] {
    margin-bottom: 1.5rem;
}

.timeline-bar[b-f4e03lb0pa] {
    display: flex;
    height: 1rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-radius: 0.5rem;
    overflow: hidden;
}

.timeline-segment[b-f4e03lb0pa] {
    height: 100%;
    position: relative;
    transition: all 0.3s ease;
}

.timeline-segment[b-f4e03lb0pa]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
}

.timeline-segment:last-child[b-f4e03lb0pa]::after {
    display: none;
}

.timeline-segment.type-intro[b-f4e03lb0pa] { background: linear-gradient(90deg, #22D3EE, #06B6D4); }
.timeline-segment.type-verse[b-f4e03lb0pa] { background: linear-gradient(90deg, var(--wl-gold), rgba(var(--wl-gold-rgb), 0.85)); }
.timeline-segment.type-chorus[b-f4e03lb0pa] { background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-dark)); }
.timeline-segment.type-bridge[b-f4e03lb0pa] { background: linear-gradient(90deg, #F97316, #EA580C); }
.timeline-segment.type-outro[b-f4e03lb0pa] { background: linear-gradient(90deg, #22C55E, #16A34A); }
.timeline-segment.type-solo[b-f4e03lb0pa] { background: linear-gradient(90deg, var(--wl-pink), #DB2777); }
.timeline-segment.type-prechorus[b-f4e03lb0pa] { background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.7), var(--wl-gold)); }
.timeline-segment.type-breakdown[b-f4e03lb0pa] { background: linear-gradient(90deg, #F43F5E, #E11D48); }

.timeline-labels[b-f4e03lb0pa] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

/* Sections List */
.sections-list[b-f4e03lb0pa] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-card[b-f4e03lb0pa] {
    background: var(--wl-surface-primary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    overflow: hidden;
    animation: cardEnter-b-f4e03lb0pa 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes cardEnter-b-f4e03lb0pa {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-card-header[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--wl-surface-primary);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.section-index[b-f4e03lb0pa] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.05);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    min-width: 1.5rem;
    text-align: center;
}

.section-type-icon[b-f4e03lb0pa] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.section-type-icon svg[b-f4e03lb0pa] {
    width: 1.25rem;
    height: 1.25rem;
}

.section-type-icon.type-intro[b-f4e03lb0pa] { background: rgba(34, 211, 238, 0.15); color: #22D3EE; border: 1px solid rgba(34, 211, 238, 0.2); }
.section-type-icon.type-verse[b-f4e03lb0pa] { background: rgba(var(--wl-gold-rgb), 0.15); color: var(--wl-gold); border: 1px solid rgba(var(--wl-gold-rgb), 0.2); }
.section-type-icon.type-chorus[b-f4e03lb0pa] { background: var(--wl-gold-bg-hover); color: var(--wl-gold); border: 1px solid var(--wl-gold-border); }
.section-type-icon.type-bridge[b-f4e03lb0pa] { background: rgba(249, 115, 22, 0.15); color: #F97316; border: 1px solid rgba(249, 115, 22, 0.2); }
.section-type-icon.type-outro[b-f4e03lb0pa] { background: rgba(34, 197, 94, 0.15); color: #22C55E; border: 1px solid rgba(34, 197, 94, 0.2); }
.section-type-icon.type-solo[b-f4e03lb0pa] { background: rgba(var(--wl-pink-rgb), 0.15); color: var(--wl-pink); border: 1px solid rgba(var(--wl-pink-rgb), 0.2); }
.section-type-icon.type-prechorus[b-f4e03lb0pa] { background: rgba(var(--wl-gold-rgb), 0.15); color: var(--wl-gold); border: 1px solid rgba(var(--wl-gold-rgb), 0.2); }
.section-type-icon.type-breakdown[b-f4e03lb0pa] { background: rgba(244, 63, 94, 0.15); color: #F43F5E; border: 1px solid rgba(244, 63, 94, 0.2); }

.section-main[b-f4e03lb0pa] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.section-type-select select[b-f4e03lb0pa] {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.375rem;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    appearance: none;
    cursor: pointer;
}

.section-duration[b-f4e03lb0pa] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.section-actions[b-f4e03lb0pa] {
    display: flex;
    gap: 0.375rem;
}

.action-btn[b-f4e03lb0pa] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.375rem;
    color: var(--wl-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover:not(:disabled)[b-f4e03lb0pa] {
    background: var(--wl-border-medium);
    color: var(--wl-text-primary);
}

.action-btn:disabled[b-f4e03lb0pa] {
    opacity: 0.3;
    cursor: not-allowed;
}

.action-btn.danger:hover:not(:disabled)[b-f4e03lb0pa] {
    background: rgba(var(--wl-red-rgb), 0.2);
    border-color: rgba(var(--wl-red-rgb), 0.3);
    color: #F87171;
}

.action-btn svg[b-f4e03lb0pa] {
    width: 1rem;
    height: 1rem;
}

.section-card-body[b-f4e03lb0pa] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Intensity Control */
.intensity-control[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.intensity-control label[b-f4e03lb0pa] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-width: 5rem;
}

.intensity-slider[b-f4e03lb0pa] {
    display: flex;
    gap: 0.375rem;
}

.intensity-dot[b-f4e03lb0pa] {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--wl-border-medium);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
}

.intensity-dot:hover[b-f4e03lb0pa] {
    background: rgba(var(--wl-gold-rgb), 0.3);
    border-color: rgba(var(--wl-gold-rgb), 0.5);
}

.intensity-dot.active[b-f4e03lb0pa] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    border-color: var(--wl-gold);
    box-shadow: 0 0 8px rgba(var(--wl-gold-rgb), 0.4);
}

.intensity-value[b-f4e03lb0pa] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    margin-left: auto;
}

/* Instruments Control */
.instruments-control label[b-f4e03lb0pa] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: block;
}

.instruments-grid[b-f4e03lb0pa] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.instrument-chip[b-f4e03lb0pa] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 9999px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.instrument-chip:hover[b-f4e03lb0pa] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
}

.instrument-chip.selected[b-f4e03lb0pa] {
    background: rgba(var(--wl-gold-rgb), 0.2);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

/* Core synergy = strongest tier: full-strength gold; matching tier stays subtle */
.instrument-chip.synergy-core[b-f4e03lb0pa] {
    border-color: rgba(var(--wl-gold-rgb), 0.55);
}

.instrument-chip.synergy-core.selected[b-f4e03lb0pa] {
    background: rgba(var(--wl-gold-rgb), 0.25);
    border-color: var(--wl-gold);
    color: var(--wl-gold);
}

.instrument-chip.synergy-matching[b-f4e03lb0pa] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.instrument-chip.synergy-matching.selected[b-f4e03lb0pa] {
    background: var(--wl-gold-border);
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    color: var(--wl-gold);
}

.synergy-badge[b-f4e03lb0pa] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-left: 0.25rem;
}

.synergy-badge svg[b-f4e03lb0pa] {
    width: 0.625rem;
    height: 0.625rem;
}

.synergy-badge.core[b-f4e03lb0pa] {
    background: rgba(var(--wl-gold-rgb), 0.35);
    color: var(--wl-gold);
}

.synergy-badge.matching[b-f4e03lb0pa] {
    background: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

/* Vocals Control */
.vocal-roles-heading[b-f4e03lb0pa] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.75rem;
}

.vocal-roles-heading .subsection-title[b-f4e03lb0pa] {
    margin: 0;
}

.vocal-roles-heading p[b-f4e03lb0pa] {
    max-width: 38rem;
    margin: 0;
    color: var(--wl-text-muted);
    font-size: 0.78rem;
    line-height: 1.5;
    text-align: right;
}

.vocal-role-grid[b-f4e03lb0pa] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.85rem;
}

.vocal-role-card[b-f4e03lb0pa] {
    position: relative;
    overflow: hidden;
    min-height: 10.5rem;
}

.vocal-role-card[b-f4e03lb0pa]::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--role-accent, var(--wl-gold));
    opacity: 0.72;
}

.vocal-role-card.lead-role[b-f4e03lb0pa] { --role-accent: var(--wl-gold); }
.vocal-role-card.group-role[b-f4e03lb0pa] { --role-accent: #A78BFA; }
.vocal-role-card.featured-role[b-f4e03lb0pa] { --role-accent: #F472B6; }
.vocal-role-card.backing-role[b-f4e03lb0pa] { --role-accent: #38BDF8; }

.vocal-role-card.unavailable[b-f4e03lb0pa] {
    background: rgba(var(--wl-contrast-rgb), 0.025);
}

.author-icon.vocals[b-f4e03lb0pa],
.author-icon.group-vocals[b-f4e03lb0pa],
.author-icon.featured-vocals[b-f4e03lb0pa],
.author-icon.backing[b-f4e03lb0pa] {
    border: 1px solid color-mix(in srgb, var(--role-color) 28%, transparent);
    color: var(--role-color);
    background: color-mix(in srgb, var(--role-color) 11%, transparent);
}

.author-icon.vocals[b-f4e03lb0pa] { --role-color: var(--wl-gold); }
.author-icon.group-vocals[b-f4e03lb0pa] { --role-color: #A78BFA; }
.author-icon.featured-vocals[b-f4e03lb0pa] { --role-color: #F472B6; }
.author-icon.backing[b-f4e03lb0pa] { --role-color: #38BDF8; }

.vocals-control[b-f4e03lb0pa] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.vocal-group[b-f4e03lb0pa] {
    flex: 1;
    min-width: 150px;
}

.vocal-group label[b-f4e03lb0pa] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: block;
}

.backing-vocals-list[b-f4e03lb0pa] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.backing-vocal-chip[b-f4e03lb0pa] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.75rem;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.backing-vocal-chip span[b-f4e03lb0pa] {
    color: var(--wl-text-primary);
    font-weight: 700;
}

.backing-vocal-chip small[b-f4e03lb0pa] {
    color: var(--wl-text-muted);
    font-size: 0.625rem;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.backing-vocal-chip:hover[b-f4e03lb0pa] {
    background: var(--wl-border-medium);
}

.backing-vocal-chip.selected[b-f4e03lb0pa] {
    background: rgba(var(--wl-gold-rgb), 0.2);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

.backing-vocal-chip.group.selected[b-f4e03lb0pa] {
    color: #C4B5FD;
    background: rgba(139, 92, 246, 0.16);
    border-color: rgba(167, 139, 250, 0.46);
}

.backing-vocal-chip.group.selected span[b-f4e03lb0pa],
.backing-vocal-chip.group.selected small[b-f4e03lb0pa] {
    color: #C4B5FD;
}

.backing-vocal-chip.featured.selected[b-f4e03lb0pa] {
    color: #F9A8D4;
    background: rgba(236, 72, 153, 0.14);
    border-color: rgba(244, 114, 182, 0.44);
}

.backing-vocal-chip.featured.selected span[b-f4e03lb0pa],
.backing-vocal-chip.featured.selected small[b-f4e03lb0pa] {
    color: #F9A8D4;
}

.backing-vocal-chip.selected span[b-f4e03lb0pa],
.backing-vocal-chip.selected small[b-f4e03lb0pa] {
    color: var(--wl-gold);
}

.backing-vocal-chip.lead[b-f4e03lb0pa] {
    background: rgba(var(--wl-diamond-rgb), 0.1);
    border-color: rgba(var(--wl-diamond-rgb), 0.35);
}

.backing-vocal-chip.other-role[b-f4e03lb0pa] {
    border-style: dashed;
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
}

.backing-vocal-chip:focus-visible[b-f4e03lb0pa] {
    outline: 2px solid var(--wl-gold);
    outline-offset: 2px;
}

.backing-vocal-chip:disabled[b-f4e03lb0pa] {
    cursor: not-allowed;
    opacity: 0.72;
}

.vocal-cast-note[b-f4e03lb0pa] {
    margin: 0.75rem 0 0;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
}

/* ============================================
   STEP 4: PREVIEW
   ============================================ */

.preview-summary-card[b-f4e03lb0pa] {
    background: linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.08) 0%, rgba(var(--wl-contrast-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.summary-header[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.song-icon[b-f4e03lb0pa] {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.25) 0%, rgba(var(--wl-gold-rgb), 0.1) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    color: var(--wl-gold);
}

.song-icon svg[b-f4e03lb0pa] {
    width: 2rem;
    height: 2rem;
}

.song-info[b-f4e03lb0pa] {
    flex: 1;
}

.song-title[b-f4e03lb0pa] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem 0;
}

.song-meta[b-f4e03lb0pa] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0;
}

.summary-stats[b-f4e03lb0pa] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.stat-item[b-f4e03lb0pa] {
    text-align: center;
    padding: 0.75rem;
    background: var(--wl-surface-primary);
    border-radius: 0.5rem;
}

.stat-label[b-f4e03lb0pa] {
    display: block;
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.stat-value[b-f4e03lb0pa] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-text-primary);
}

/* Structure Visualization */
.structure-visualization[b-f4e03lb0pa] {
    background: var(--wl-surface-primary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.structure-visualization h4[b-f4e03lb0pa] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 1rem 0;
}

.structure-flow[b-f4e03lb0pa] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.structure-block[b-f4e03lb0pa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    min-width: 4.5rem;
    transition: transform 0.2s ease;
}

.structure-block:hover[b-f4e03lb0pa] {
    transform: translateY(-3px);
}

.structure-block.type-intro[b-f4e03lb0pa] { background: linear-gradient(135deg, rgba(34, 211, 238, 0.2) 0%, rgba(34, 211, 238, 0.1) 100%); border: 1px solid rgba(34, 211, 238, 0.3); }
.structure-block.type-verse[b-f4e03lb0pa] { background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.1) 100%); border: 1px solid rgba(var(--wl-gold-rgb), 0.3); }
.structure-block.type-chorus[b-f4e03lb0pa] { background: linear-gradient(135deg, var(--wl-gold-border) 0%, var(--wl-gold-bg) 100%); border: 1px solid rgba(var(--wl-gold-rgb), 0.3); }
.structure-block.type-bridge[b-f4e03lb0pa] { background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(249, 115, 22, 0.1) 100%); border: 1px solid rgba(249, 115, 22, 0.3); }
.structure-block.type-outro[b-f4e03lb0pa] { background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%); border: 1px solid rgba(34, 197, 94, 0.3); }
.structure-block.type-solo[b-f4e03lb0pa] { background: linear-gradient(135deg, rgba(var(--wl-pink-rgb), 0.2) 0%, rgba(var(--wl-pink-rgb), 0.1) 100%); border: 1px solid rgba(var(--wl-pink-rgb), 0.3); }
.structure-block.type-prechorus[b-f4e03lb0pa] { background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.1) 100%); border: 1px solid rgba(var(--wl-gold-rgb), 0.3); }
.structure-block.type-breakdown[b-f4e03lb0pa] { background: linear-gradient(135deg, rgba(244, 63, 94, 0.2) 0%, rgba(244, 63, 94, 0.1) 100%); border: 1px solid rgba(244, 63, 94, 0.3); }

.block-type[b-f4e03lb0pa] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin-bottom: 0.25rem;
}

.block-duration[b-f4e03lb0pa] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin-bottom: 0.375rem;
}

.block-intensity[b-f4e03lb0pa] {
    display: flex;
    gap: 2px;
}

.intensity-bar[b-f4e03lb0pa] {
    width: 4px;
    height: 12px;
    background: var(--wl-bg-tertiary);
    border-radius: 1px;
}

/* Quality Prediction */
.quality-prediction[b-f4e03lb0pa] {
    background: var(--wl-surface-primary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.quality-prediction h4[b-f4e03lb0pa] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 1rem 0;
}

.quality-bar-container[b-f4e03lb0pa] {
    margin-bottom: 0.5rem;
}

.quality-bar-track[b-f4e03lb0pa] {
    height: 1.5rem;
    background: linear-gradient(90deg,
        rgba(var(--wl-red-rgb), 0.3) 0%,
        rgba(251, 146, 60, 0.3) 25%,
        rgba(250, 204, 21, 0.3) 50%,
        rgba(34, 197, 94, 0.3) 75%,
        rgba(34, 211, 238, 0.3) 100%);
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
}

.quality-bar-range[b-f4e03lb0pa] {
    position: absolute;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem;
    box-shadow: 0 0 15px rgba(var(--wl-gold-rgb), 0.4);
}

.range-min[b-f4e03lb0pa],
.range-max[b-f4e03lb0pa] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    color: var(--wl-bg-primary);
    font-weight: 700;
}

.quality-scale[b-f4e03lb0pa] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.quality-hint[b-f4e03lb0pa] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin: 0;
    text-align: center;
}

/* Synergy Indicators */
.synergy-indicators[b-f4e03lb0pa] {
    background: var(--wl-surface-primary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.synergy-indicators h4[b-f4e03lb0pa] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 1rem 0;
}

.synergy-list[b-f4e03lb0pa] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.synergy-item[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
}

.synergy-item.synergy-core[b-f4e03lb0pa] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.synergy-item.synergy-matching[b-f4e03lb0pa] {
    background: var(--wl-gold-bg);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
}

.synergy-item.synergy-nonstandard[b-f4e03lb0pa] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
}

.instrument-name[b-f4e03lb0pa] {
    font-size: 0.8125rem;
    color: var(--wl-text-primary);
}

.synergy-label[b-f4e03lb0pa] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.synergy-item.synergy-core .synergy-label[b-f4e03lb0pa] { color: #4ADE80; }
.synergy-item.synergy-matching .synergy-label[b-f4e03lb0pa] { color: var(--wl-gold); }
.synergy-item.synergy-nonstandard .synergy-label[b-f4e03lb0pa] { color: #F87171; }

.no-instruments-hint[b-f4e03lb0pa] {
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-style: italic;
    margin: 0;
}

/* Recording Estimate */
.recording-estimate[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.1) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.75rem;
}

.estimate-icon[b-f4e03lb0pa] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 50%;
    color: var(--wl-gold);
}

.estimate-icon svg[b-f4e03lb0pa] {
    width: 1.5rem;
    height: 1.5rem;
}

.estimate-content[b-f4e03lb0pa] {
    display: flex;
    flex-direction: column;
}

.estimate-label[b-f4e03lb0pa] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.estimate-value[b-f4e03lb0pa] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-text-primary);
}

/* ============================================
   WIZARD NAVIGATION
   ============================================ */

.wizard-nav[b-f4e03lb0pa] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.step-dots[b-f4e03lb0pa] {
    display: flex;
    gap: 0.5rem;
}

.dot[b-f4e03lb0pa] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--wl-surface-primary);
    transition: all 0.3s ease;
}

.dot.active[b-f4e03lb0pa] {
    background: var(--wl-gold);
    box-shadow: 0 0 8px rgba(var(--wl-gold-rgb), 0.5);
}

.dot.completed[b-f4e03lb0pa] {
    background: #22C55E;
}

.nav-btn[b-f4e03lb0pa] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-btn svg[b-f4e03lb0pa] {
    width: 1.125rem;
    height: 1.125rem;
}

.nav-btn.secondary[b-f4e03lb0pa] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.nav-btn.secondary:hover:not(:disabled)[b-f4e03lb0pa] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.25);
    color: var(--wl-text-primary);
}

.nav-btn.primary[b-f4e03lb0pa] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, rgba(var(--wl-gold-rgb), 0.85) 100%);
    border: none;
    color: var(--wl-bg-primary);
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.3);
}

.nav-btn.primary:hover:not(:disabled)[b-f4e03lb0pa] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--wl-gold-rgb), 0.4);
}

.nav-btn.primary.record[b-f4e03lb0pa] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.3);
}

.nav-btn.primary.record:hover:not(:disabled)[b-f4e03lb0pa] {
    box-shadow: 0 6px 20px rgba(var(--wl-gold-rgb), 0.4);
}

.nav-btn:disabled[b-f4e03lb0pa] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

.btn-spinner[b-f4e03lb0pa] {
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-f4e03lb0pa 0.8s linear infinite;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .wizard-page[b-f4e03lb0pa] {
        padding: 0 1rem 3rem;
    }

    .step-indicator[b-f4e03lb0pa] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .step-connector[b-f4e03lb0pa] {
        width: 1.5rem;
        margin: 0 0.25rem;
    }

    .step-label[b-f4e03lb0pa] {
        display: none;
    }

    .band-project-banner[b-f4e03lb0pa] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .band-project-badge[b-f4e03lb0pa] {
        grid-column: 2;
        justify-self: start;
    }

    .form-grid[b-f4e03lb0pa] {
        grid-template-columns: 1fr;
    }

    .authorship-grid[b-f4e03lb0pa] {
        grid-template-columns: 1fr;
    }

    .vocal-roles-heading[b-f4e03lb0pa] {
        display: block;
    }

    .vocal-roles-heading p[b-f4e03lb0pa] {
        margin-top: 0.35rem;
        text-align: left;
    }

    .section-card-header[b-f4e03lb0pa] {
        flex-wrap: wrap;
    }

    .section-actions[b-f4e03lb0pa] {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.5rem;
    }

    .summary-stats[b-f4e03lb0pa] {
        grid-template-columns: 1fr;
    }

    .structure-flow[b-f4e03lb0pa] {
        justify-content: center;
    }

    .wizard-nav[b-f4e03lb0pa] {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .step-dots[b-f4e03lb0pa] {
        order: 3;
        width: 100%;
        justify-content: center;
    }

    .nav-btn[b-f4e03lb0pa] {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .header-text h1[b-f4e03lb0pa] {
        font-size: 1.5rem;
    }

    .step-circle[b-f4e03lb0pa] {
        width: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }

    .band-project-banner[b-f4e03lb0pa] {
        align-items: start;
        gap: 0.7rem;
        padding: 0.8rem;
    }

    .band-project-description[b-f4e03lb0pa] {
        font-size: 0.68rem;
    }

    .section-card-body[b-f4e03lb0pa] {
        padding: 0.75rem;
    }

    .instruments-grid[b-f4e03lb0pa] {
        gap: 0.375rem;
    }

    .instrument-chip[b-f4e03lb0pa] {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }
}

/* ============================================
   HINT BOX
   ============================================ */

.hint-box[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        rgba(34, 211, 238, 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hint-box:hover[b-f4e03lb0pa] {
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.12) 0%,
        rgba(34, 211, 238, 0.08) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.hint-icon[b-f4e03lb0pa] {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
}

.hint-icon svg[b-f4e03lb0pa] {
    width: 100%;
    height: 100%;
}

.hint-text[b-f4e03lb0pa] {
    flex: 1;
    font-size: 0.8125rem;
    line-height: 1.5;
    /* --wl-gray-300 never existed - the #d1d5db fallback was unreadable on light themes */
    color: rgba(var(--wl-contrast-rgb), 0.75);
}

.hint-refresh[b-f4e03lb0pa] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.hint-box:hover .hint-refresh[b-f4e03lb0pa] {
    opacity: 1;
}

.hint-refresh svg[b-f4e03lb0pa] {
    width: 100%;
    height: 100%;
}

/* ============================================
   TEMPLATE BUTTONS & MODALS
   ============================================ */

.section-header-actions[b-f4e03lb0pa] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.template-btn[b-f4e03lb0pa] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.1) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.375rem;
    color: var(--wl-gold);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.template-btn:hover[b-f4e03lb0pa] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.3) 0%, rgba(var(--wl-gold-rgb), 0.15) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    transform: translateY(-2px);
}

.template-btn svg[b-f4e03lb0pa] {
    width: 1rem;
    height: 1rem;
}

.template-save-section[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    margin-top: 1rem;
    background: rgba(var(--wl-bg-modal-deep-rgb), 0.5);
    border: 1px dashed rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.75rem;
}

.save-template-btn[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(var(--wl-gold-rgb), 0.15);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.5rem;
    color: var(--wl-gold);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.save-template-btn:hover:not(:disabled)[b-f4e03lb0pa] {
    background: rgba(var(--wl-gold-rgb), 0.25);
    border-color: rgba(var(--wl-gold-rgb), 0.5);
}

.save-template-btn:disabled[b-f4e03lb0pa] {
    opacity: 0.5;
    cursor: not-allowed;
}

.save-template-btn svg[b-f4e03lb0pa] {
    width: 1.125rem;
    height: 1.125rem;
}

.template-count[b-f4e03lb0pa] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
}

/* Modal Overlay */
.modal-overlay[b-f4e03lb0pa] {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    animation: fadeIn-b-f4e03lb0pa 0.2s ease;
}

@keyframes fadeIn-b-f4e03lb0pa {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content[b-f4e03lb0pa] {
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    background: linear-gradient(135deg,
        rgba(var(--wl-bg-modal-rgb), 0.98) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 1rem;
    overflow: hidden;
    animation: slideUp-b-f4e03lb0pa 0.3s ease;
}

@keyframes slideUp-b-f4e03lb0pa {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

.modal-header h3[b-f4e03lb0pa] {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.95);
}

.modal-close[b-f4e03lb0pa] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: rgba(var(--wl-contrast-rgb), 0.55);
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover[b-f4e03lb0pa] {
    background: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.85);
}

.modal-close svg[b-f4e03lb0pa] {
    width: 1.25rem;
    height: 1.25rem;
}

.modal-body[b-f4e03lb0pa] {
    padding: 1.25rem;
    overflow-y: auto;
    max-height: calc(80vh - 130px);
}

.modal-footer[b-f4e03lb0pa] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

/* Template List */
.template-list[b-f4e03lb0pa] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.template-item[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.template-item:hover[b-f4e03lb0pa] {
    background: var(--wl-border-subtle);
    border-color: rgba(var(--wl-gold-rgb), 0.2);
}

.template-info[b-f4e03lb0pa] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.template-name[b-f4e03lb0pa] {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.85);
}

.template-meta[b-f4e03lb0pa] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
}

.template-actions[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.template-load-btn[b-f4e03lb0pa] {
    padding: 0.375rem 0.75rem;
    background: rgba(var(--wl-gold-rgb), 0.2);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.375rem;
    color: var(--wl-gold);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-load-btn:hover[b-f4e03lb0pa] {
    background: rgba(var(--wl-gold-rgb), 0.3);
}

.template-delete-btn[b-f4e03lb0pa] {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 0.375rem;
    color: var(--wl-red-400, #f87171);
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-delete-btn:hover[b-f4e03lb0pa] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border-color: rgba(var(--wl-red-rgb), 0.4);
}

.template-delete-btn svg[b-f4e03lb0pa] {
    width: 0.875rem;
    height: 0.875rem;
}

.no-templates[b-f4e03lb0pa] {
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    font-size: 0.875rem;
}

/* Save Template Modal */
.save-template-modal .form-group[b-f4e03lb0pa] {
    margin-bottom: 1rem;
}

.save-template-modal .form-group label[b-f4e03lb0pa] {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.75);
}

.save-template-modal .form-group input[b-f4e03lb0pa] {
    width: 100%;
    padding: 0.625rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.95);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.save-template-modal .form-group input:focus[b-f4e03lb0pa] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.1);
}

.template-preview[b-f4e03lb0pa] {
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-radius: 0.5rem;
}

.preview-label[b-f4e03lb0pa] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
}

.preview-value[b-f4e03lb0pa] {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.75);
}

/* Modal Buttons */
.btn-secondary[b-f4e03lb0pa] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.2);
    border-radius: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.75);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-f4e03lb0pa] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: var(--wl-text-muted);
}

.btn-primary[b-f4e03lb0pa] {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.85), var(--wl-gold));
    border: none;
    border-radius: 0.5rem;
    color: white;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary:hover:not(:disabled)[b-f4e03lb0pa] {
    filter: brightness(1.1);
}

.btn-primary:disabled[b-f4e03lb0pa] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger[b-f4e03lb0pa] {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #dc2626, #ef4444);
    border: none;
    border-radius: 0.5rem;
    color: white;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger:hover[b-f4e03lb0pa] {
    filter: brightness(1.1);
}

/* Delete Confirmation Modal */
.delete-confirm-modal[b-f4e03lb0pa] {
    text-align: center;
    max-width: 400px;
}

.delete-modal-icon[b-f4e03lb0pa] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border-radius: 50%;
    color: #ef4444;
}

.delete-modal-icon svg[b-f4e03lb0pa] {
    width: 1.75rem;
    height: 1.75rem;
}

.delete-confirm-modal h3[b-f4e03lb0pa] {
    font-size: 1.125rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.95);
    margin: 0 0 0.5rem;
}

.delete-modal-message[b-f4e03lb0pa] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.55);
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .step-content[b-f4e03lb0pa],
    .section-card[b-f4e03lb0pa],
    .loading-spinner[b-f4e03lb0pa],
    .btn-spinner[b-f4e03lb0pa] {
        animation: none;
    }

    .step-connector[b-f4e03lb0pa]::after,
    .structure-block[b-f4e03lb0pa],
    .nav-btn[b-f4e03lb0pa],
    .modal-overlay[b-f4e03lb0pa],
    .modal-content[b-f4e03lb0pa] {
        transition: none;
        animation: none;
    }
}
/* /Components/Pages/Career/Music/Dashboard/Index.razor.rz.scp.css */
/* ============================================
   CAREER DASHBOARD PAGE
   Theme: Gold/Purple premium music career overview
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.dashboard-page[b-na375ygl92] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-atmosphere[b-na375ygl92] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-pink-rgb), 0.03) 0%, transparent 50%);
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-na375ygl92] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 2rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--wl-gold-bg-hover);
}

.page-header[b-na375ygl92]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-na375ygl92] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-na375ygl92] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-na375ygl92] {
    width: 1.75rem;
    height: 1.75rem;
}

.header-text h1[b-na375ygl92] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.header-subtitle[b-na375ygl92] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

/* ============================================
   LOADING
   ============================================ */

.loading-container[b-na375ygl92] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem 0;
    color: var(--wl-text-muted);
}

.loading-spinner[b-na375ygl92] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-na375ygl92 0.8s linear infinite;
}

@keyframes spin-b-na375ygl92 {
    to { transform: rotate(360deg); }
}

/* ============================================
   STATS OVERVIEW (TOP BAR)
   ============================================ */

.stats-overview[b-na375ygl92] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    animation: fadeInUp-b-na375ygl92 0.5s ease both;
}

.stat-card[b-na375ygl92] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: border-color 0.2s, background 0.2s;
}

.stat-card:hover[b-na375ygl92] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.stat-card.primary[b-na375ygl92] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.08) 0%, rgba(var(--wl-gold-rgb), 0.02) 100%);
}

.stat-icon[b-na375ygl92] {
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.75rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.stat-icon svg[b-na375ygl92] {
    width: 1.25rem;
    height: 1.25rem;
}

.stat-icon.fans[b-na375ygl92] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.15) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.2);
    color: var(--wl-gold);
}

.stat-icon.streams[b-na375ygl92] {
    background: linear-gradient(135deg, rgba(var(--wl-champagne-rgb), 0.15) 0%, rgba(var(--wl-champagne-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-champagne-rgb), 0.22);
    color: var(--wl-champagne);
}

.stat-icon.career[b-na375ygl92] {
    background: linear-gradient(135deg, rgba(var(--wl-crimson-rgb), 0.28) 0%, rgba(var(--wl-crimson-rgb), 0.10) 100%);
    border-color: rgba(var(--wl-crimson-rgb), 0.4);
    color: var(--wl-crimson-light);
}

.stat-icon.label[b-na375ygl92] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.18) 0%, rgba(var(--wl-gold-rgb), 0.06) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold-light);
}

.stat-details[b-na375ygl92] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.stat-value[b-na375ygl92] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    color: var(--wl-text-primary);
    line-height: 1.1;
}

.stat-value small[b-na375ygl92] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    letter-spacing: 0;
}

.stat-value.label-name[b-na375ygl92] {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
}

.stat-label[b-na375ygl92] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ============================================
   DASHBOARD GRID
   ============================================ */

.dashboard-grid[b-na375ygl92] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.dashboard-card[b-na375ygl92] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 1.5rem;
    animation: fadeInUp-b-na375ygl92 0.5s ease both;
}

.card-title[b-na375ygl92] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    color: var(--wl-text-primary);
    margin: 0 0 1.25rem 0;
}

.card-title svg[b-na375ygl92] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

/* ============================================
   REVENUE BREAKDOWN
   ============================================ */

.revenue-bars[b-na375ygl92] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.revenue-row[b-na375ygl92] {
    display: grid;
    grid-template-columns: 7rem 1fr 7rem;
    align-items: center;
    gap: 0.75rem;
}

.revenue-label[b-na375ygl92] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--wl-text-secondary);
}

.revenue-dot[b-na375ygl92] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.revenue-dot.concerts[b-na375ygl92] { background: var(--wl-gold); }
.revenue-dot.streaming[b-na375ygl92] { background: var(--wl-champagne); }
.revenue-dot.merch[b-na375ygl92] { background: var(--wl-silver); }
.revenue-dot.physical[b-na375ygl92] { background: #B0703D; }

.revenue-bar-wrapper[b-na375ygl92] {
    height: 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border-radius: 0.625rem;
    overflow: hidden;
}

.revenue-bar[b-na375ygl92] {
    height: 100%;
    border-radius: 0.625rem;
    min-width: 2px;
    transition: width 0.8s ease;
}

.revenue-bar.concerts[b-na375ygl92] { background: linear-gradient(90deg, var(--wl-gold), rgba(var(--wl-gold-rgb), 0.6)); }
.revenue-bar.streaming[b-na375ygl92] { background: linear-gradient(90deg, var(--wl-champagne), rgba(var(--wl-champagne-rgb), 0.55)); }
.revenue-bar.merch[b-na375ygl92] { background: linear-gradient(90deg, var(--wl-silver), rgba(192, 192, 192, 0.55)); }
.revenue-bar.physical[b-na375ygl92] { background: linear-gradient(90deg, #B0703D, rgba(176, 112, 61, 0.55)); }

.revenue-value[b-na375ygl92] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
}

.revenue-amount[b-na375ygl92] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--wl-text-primary);
}

.revenue-percent[b-na375ygl92] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
}

/* ============================================
   DISCOGRAPHY SUMMARY
   ============================================ */

.disco-grid[b-na375ygl92] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.disco-stat[b-na375ygl92] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 0.75rem;
    border: 1px solid var(--wl-border-light);
}

.disco-value[b-na375ygl92] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.04em;
    color: var(--wl-text-primary);
    line-height: 1;
}

.disco-label[b-na375ygl92] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Certificates */

.certificates-row[b-na375ygl92] {
    margin-bottom: 1rem;
}

.certificates-row h3[b-na375ygl92],
.best-charting h3[b-na375ygl92] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 0.5rem 0;
}

.cert-badges[b-na375ygl92] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.cert-badge[b-na375ygl92] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.cert-badge svg[b-na375ygl92] {
    width: 1rem;
    height: 1rem;
}

.cert-badge.gold[b-na375ygl92] {
    background: rgba(234, 179, 8, 0.12);
    border: 1px solid rgba(234, 179, 8, 0.3);
    color: #EAB308;
}

.cert-badge.platinum[b-na375ygl92] {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #94A3B8;
}

.cert-badge.diamond[b-na375ygl92] {
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: #22D3EE;
}

.no-data[b-na375ygl92] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

/* Best Charting */

.chart-highlight[b-na375ygl92] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.chart-position[b-na375ygl92] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-gold);
    letter-spacing: 0.04em;
}

.chart-title[b-na375ygl92] {
    font-size: 0.9rem;
    color: var(--wl-text-primary);
    font-weight: 500;
}

/* ============================================
   CONCERT STATS
   ============================================ */

.concert-grid[b-na375ygl92] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.concert-stat[b-na375ygl92] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 0.75rem;
    border: 1px solid var(--wl-border-light);
}

.concert-value[b-na375ygl92] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.04em;
    color: var(--wl-text-primary);
    line-height: 1;
}

.concert-value.venue[b-na375ygl92] {
    font-size: 1.25rem;
}

.concert-label[b-na375ygl92] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ============================================
   CAREER GOALS
   ============================================ */

.goals-card[b-na375ygl92] {
    grid-column: 1 / -1;
}

.goals-list[b-na375ygl92] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.goal-item[b-na375ygl92] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-light);
    border-radius: 0.75rem;
    transition: border-color 0.2s, background 0.2s;
}

.goal-item:hover[b-na375ygl92] {
    border-color: rgba(var(--wl-gold-rgb), 0.2);
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.goal-item.completed[b-na375ygl92] {
    opacity: 0.7;
}

.goal-item.completed .goal-title[b-na375ygl92] {
    text-decoration: line-through;
    text-decoration-color: var(--wl-text-muted);
}

.goal-check[b-na375ygl92] {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.goal-check svg[b-na375ygl92] {
    width: 1.5rem;
    height: 1.5rem;
}

.goal-item:not(.completed) .goal-check svg[b-na375ygl92] {
    color: var(--wl-text-muted);
}

.goal-item.completed .goal-check svg[b-na375ygl92] {
    color: #10B981;
}

.goal-info[b-na375ygl92] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.goal-title[b-na375ygl92] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.goal-desc[b-na375ygl92] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.goal-status[b-na375ygl92] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.25rem 0.625rem;
    border-radius: 2rem;
    flex-shrink: 0;
    white-space: nowrap;
}

.goal-item:not(.completed) .goal-status[b-na375ygl92] {
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
}

.goal-item.completed .goal-status[b-na375ygl92] {
    color: #10B981;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-na375ygl92] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    color: var(--wl-text-muted);
    text-align: center;
}

.empty-state svg[b-na375ygl92] {
    width: 3rem;
    height: 3rem;
    opacity: 0.3;
}

.empty-state p[b-na375ygl92] {
    font-size: 0.875rem;
    margin: 0;
}

/* ============================================
   ANIMATION
   ============================================ */

@keyframes fadeInUp-b-na375ygl92 {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .dashboard-grid[b-na375ygl92] {
        grid-template-columns: 1fr;
    }

    .goals-card[b-na375ygl92] {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .dashboard-page[b-na375ygl92] {
        padding: 0 1rem 3rem;
    }

    .stats-overview[b-na375ygl92] {
        grid-template-columns: repeat(2, 1fr);
    }

    .header-text h1[b-na375ygl92] {
        font-size: 1.75rem;
    }

    .disco-grid[b-na375ygl92] {
        grid-template-columns: repeat(3, 1fr);
    }

    .revenue-row[b-na375ygl92] {
        grid-template-columns: 5.5rem 1fr 5.5rem;
    }
}

@media (max-width: 480px) {
    .stats-overview[b-na375ygl92] {
        grid-template-columns: 1fr;
    }

    .disco-grid[b-na375ygl92] {
        grid-template-columns: repeat(2, 1fr);
    }

    .concert-grid[b-na375ygl92] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Career/Music/Index.razor.rz.scp.css */
.music-hub[b-cz7dcc1jwd] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.hub-header[b-cz7dcc1jwd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.08), rgba(var(--wl-gold-rgb), 0.02));
    border-radius: 1rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

.header-content h1[b-cz7dcc1jwd] {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.5rem 0;
}

.header-content .subtitle[b-cz7dcc1jwd] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-size: 1.1rem;
    margin: 0;
}

.header-decoration .music-icon[b-cz7dcc1jwd] {
    width: 5rem;
    height: 5rem;
    color: rgba(var(--wl-gold-rgb), 0.3);
}

/* Dashboard Link */

.dashboard-link[b-cz7dcc1jwd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.08) 0%, rgba(var(--wl-gold-rgb), 0.02) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 0.75rem;
    color: var(--wl-text-primary);
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: all 0.2s ease;
}

.dashboard-link:hover[b-cz7dcc1jwd] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.14) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    transform: translateX(4px);
}

.dashboard-link .link-icon[b-cz7dcc1jwd] {
    color: var(--wl-gold);
}

.dashboard-link .link-text[b-cz7dcc1jwd] {
    font-weight: 600;
    font-size: 1rem;
}

.dashboard-link .link-arrow[b-cz7dcc1jwd] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-text-muted);
    flex-shrink: 0;
}

.hub-grid[b-cz7dcc1jwd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.hub-section[b-cz7dcc1jwd] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.hub-section:hover[b-cz7dcc1jwd] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
}

.collaboration-section[b-cz7dcc1jwd] {
    margin-bottom: 1.5rem;
}

.section-title[b-cz7dcc1jwd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--wl-border-medium);
}

.section-title svg[b-cz7dcc1jwd] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
}

.section-links[b-cz7dcc1jwd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hub-link[b-cz7dcc1jwd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    text-decoration: none;
    transition: all 0.2s ease;
}

.hub-link:hover:not(.disabled)[b-cz7dcc1jwd] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-text-primary);
    transform: translateX(4px);
}

.hub-link.disabled[b-cz7dcc1jwd] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.link-icon[b-cz7dcc1jwd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--wl-gold);
}

.link-icon svg[b-cz7dcc1jwd] {
    width: 1.25rem;
    height: 1.25rem;
}

.link-icon .iconify-menu-icon[b-cz7dcc1jwd] {
    font-size: 1.25rem;
}

.link-text[b-cz7dcc1jwd] {
    flex: 1;
    font-weight: 500;
}

.coming-soon[b-cz7dcc1jwd] {
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    background: rgba(234, 179, 8, 0.2);
    color: #fbbf24;
    border-radius: 0.25rem;
    text-transform: uppercase;
    font-weight: 600;
}

@media (max-width: 640px) {
    .music-hub[b-cz7dcc1jwd] {
        padding: 1rem;
    }

    .hub-header[b-cz7dcc1jwd] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .header-content h1[b-cz7dcc1jwd] {
        font-size: 2rem;
    }

    .header-decoration .music-icon[b-cz7dcc1jwd] {
        width: 3rem;
        height: 3rem;
    }
}
/* /Components/Pages/Career/Music/Interviews/Index.razor.rz.scp.css */
/* ============================================
   INTERVIEWS PAGE - Luxury Media & Press
   Theme: Glamour / Celebrity Interview Show
   Gold + response-type accents
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.interview-page[b-pexhz4rerd] {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    position: relative;
    min-height: 80vh;
}

.interview-bg-atmosphere[b-pexhz4rerd] {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.03) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-pink-rgb), 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* ============================================
   LOADING STATES
   ============================================ */

.interview-loading[b-pexhz4rerd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 6rem 2rem;
    color: var(--wl-text-muted);
}

.interview-loading-spinner[b-pexhz4rerd] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-gold-bg);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-pexhz4rerd 1s linear infinite;
}

.interview-loading-spinner-small[b-pexhz4rerd] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.2);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-pexhz4rerd 0.6s linear infinite;
    display: inline-block;
}

@keyframes spin-b-pexhz4rerd {
    to { transform: rotate(360deg); }
}

/* ============================================
   EMPTY STATE
   ============================================ */

.interview-empty[b-pexhz4rerd] {
    text-align: center;
    padding: 6rem 2rem;
    animation: fadeInUp-b-pexhz4rerd 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.interview-empty h2[b-pexhz4rerd] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem 0;
}

.interview-empty p[b-pexhz4rerd] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
}

.interview-empty-icon[b-pexhz4rerd]  svg {
    width: 4rem;
    height: 4rem;
    color: var(--wl-gold);
    opacity: 0.4;
    margin-bottom: 1.25rem;
}

/* ============================================
   PAGE HEADER
   ============================================ */

.interview-header[b-pexhz4rerd] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 2rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--wl-gold-bg-hover);
    animation: fadeInUp-b-pexhz4rerd 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.interview-header[b-pexhz4rerd]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.interview-header-content[b-pexhz4rerd] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.interview-header-icon[b-pexhz4rerd] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid var(--wl-gold-border);
    border-radius: 0.75rem;
    flex-shrink: 0;
}

.interview-header-icon[b-pexhz4rerd]  svg {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
}

.interview-header-text[b-pexhz4rerd] {
    display: flex;
    flex-direction: column;
}

.interview-title[b-pexhz4rerd] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.interview-subtitle[b-pexhz4rerd] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

/* Resource display badges */
.interview-resources-display[b-pexhz4rerd] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.interview-resource-badge[b-pexhz4rerd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0.05) 100%);
    border: 1px solid rgba(251, 191, 36, 0.25);
    border-radius: 0.5rem;
    cursor: help;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    color: #fbbf24;
    transition: all 0.2s ease;
}

.interview-resource-badge:hover[b-pexhz4rerd] {
    border-color: rgba(251, 191, 36, 0.4);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.08) 100%);
}

.interview-resource-badge[b-pexhz4rerd]  svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #fbbf24;
}

/* ============================================
   PROGRESS BAR (Active Interview Header)
   ============================================ */

.interview-progress[b-pexhz4rerd] {
    text-align: right;
}

.interview-progress-text[b-pexhz4rerd] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
    display: block;
}

.interview-progress-bar[b-pexhz4rerd] {
    width: 140px;
    height: 4px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    border-radius: 9999px;
    overflow: hidden;
}

.interview-progress-fill[b-pexhz4rerd] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
    border-radius: 9999px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   SECTION TITLES
   ============================================ */

.interview-section-title[b-pexhz4rerd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin: 0 0 1.25rem 0;
}

.interview-section-title[b-pexhz4rerd]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--wl-gold-border), transparent);
}

/* ============================================
   INVITATION INBOX + TEMPLATE CARDS
   ============================================ */

.interview-available[b-pexhz4rerd] {
    position: relative;
    z-index: 1;
    animation: fadeInUp-b-pexhz4rerd 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}

/* ============================================
   INVITATION LIST (Inbox model)
   ============================================ */

.invitation-list[b-pexhz4rerd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.invitation-card[b-pexhz4rerd] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    animation: cardEnter-b-pexhz4rerd 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.invitation-card[b-pexhz4rerd]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 20%,
        rgba(var(--wl-gold-rgb), 0.8) 50%,
        rgba(var(--wl-gold-rgb), 0.4) 80%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.invitation-card:nth-child(1)[b-pexhz4rerd] { animation-delay: 0s; }
.invitation-card:nth-child(2)[b-pexhz4rerd] { animation-delay: 0.05s; }
.invitation-card:nth-child(3)[b-pexhz4rerd] { animation-delay: 0.1s; }
.invitation-card:nth-child(4)[b-pexhz4rerd] { animation-delay: 0.15s; }
.invitation-card:nth-child(5)[b-pexhz4rerd] { animation-delay: 0.2s; }

.invitation-card.available:hover[b-pexhz4rerd] {
    transform: translateY(-4px);
    border-color: var(--wl-gold-border);
    box-shadow:
        0 16px 50px var(--wl-shadow-color),
        0 0 30px rgba(var(--wl-gold-rgb), 0.05);
}

.invitation-card.available:hover[b-pexhz4rerd]::before {
    opacity: 1;
}

.invitation-card.locked[b-pexhz4rerd] {
    opacity: 0.5;
    filter: grayscale(0.3);
}

.invitation-card.available:hover .template-name[b-pexhz4rerd] {
    color: var(--wl-gold);
}

/* Card top row: badges + expiry */
.invitation-card-top[b-pexhz4rerd] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.invitation-badges[b-pexhz4rerd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Trigger source badges */
.invitation-trigger-badge[b-pexhz4rerd] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid;
}

.invitation-trigger-badge[b-pexhz4rerd]  svg {
    width: 0.65rem;
    height: 0.65rem;
}

.trigger-baseline[b-pexhz4rerd] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: rgba(var(--wl-contrast-rgb), 0.1);
    color: var(--wl-text-muted);
}

.trigger-newrelease[b-pexhz4rerd] {
    background: rgba(var(--wl-purple-rgb), 0.1);
    border-color: rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

.trigger-activebeef[b-pexhz4rerd] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.trigger-famespike[b-pexhz4rerd] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
    color: #4ade80;
}

.trigger-viralmoment[b-pexhz4rerd] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(251, 191, 36, 0.08));
    border-color: rgba(251, 191, 36, 0.25);
    color: #fbbf24;
}

.trigger-personamatch[b-pexhz4rerd] {
    background: rgba(var(--wl-pink-rgb), 0.1);
    border-color: rgba(var(--wl-pink-rgb), 0.2);
    color: #f472b6;
}

/* Expiry countdown */
.invitation-expiry[b-pexhz4rerd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.invitation-expiry[b-pexhz4rerd]  svg {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
}

.invitation-expiry.normal[b-pexhz4rerd] {
    color: #4ade80;
}

.invitation-expiry.warning[b-pexhz4rerd] {
    color: #fbbf24;
}

.invitation-expiry.urgent[b-pexhz4rerd] {
    color: #f87171;
    animation: expiryPulse-b-pexhz4rerd 2s ease-in-out infinite;
}

@keyframes expiryPulse-b-pexhz4rerd {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.invitation-expiry-bar[b-pexhz4rerd] {
    width: 60px;
    height: 3px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 9999px;
    overflow: hidden;
}

.invitation-expiry-fill[b-pexhz4rerd] {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.invitation-expiry.normal .invitation-expiry-fill[b-pexhz4rerd] {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.invitation-expiry.warning .invitation-expiry-fill[b-pexhz4rerd] {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.invitation-expiry.urgent .invitation-expiry-fill[b-pexhz4rerd] {
    background: linear-gradient(90deg, #dc2626, #f87171);
}

/* Card bottom: details + rewards + actions */
.invitation-card-bottom[b-pexhz4rerd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Action buttons */
.invitation-actions[b-pexhz4rerd] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.interview-btn-ghost[b-pexhz4rerd] {
    background: transparent;
    border: 1px solid var(--wl-border-subtle);
    color: var(--wl-text-muted);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.interview-btn-ghost:hover:not(:disabled)[b-pexhz4rerd] {
    border-color: rgba(239, 68, 68, 0.3);
    color: #f87171;
    background: rgba(239, 68, 68, 0.04);
}

/* Empty state with icon */
.interview-empty-state-icon[b-pexhz4rerd] {
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
}

.interview-empty-state-icon[b-pexhz4rerd]  svg {
    width: 3rem;
    height: 3rem;
    color: var(--wl-text-muted);
    opacity: 0.3;
}

/* Legacy grid (kept for reference) */
.interview-templates-grid[b-pexhz4rerd] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.interview-template-card[b-pexhz4rerd] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    animation: cardEnter-b-pexhz4rerd 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.interview-template-card[b-pexhz4rerd]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 20%,
        rgba(var(--wl-gold-rgb), 0.8) 50%,
        rgba(var(--wl-gold-rgb), 0.4) 80%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.interview-template-card:nth-child(1)[b-pexhz4rerd] { animation-delay: 0s; }
.interview-template-card:nth-child(2)[b-pexhz4rerd] { animation-delay: 0.05s; }
.interview-template-card:nth-child(3)[b-pexhz4rerd] { animation-delay: 0.1s; }
.interview-template-card:nth-child(4)[b-pexhz4rerd] { animation-delay: 0.15s; }
.interview-template-card:nth-child(5)[b-pexhz4rerd] { animation-delay: 0.2s; }
.interview-template-card:nth-child(6)[b-pexhz4rerd] { animation-delay: 0.25s; }

.interview-template-card.available:hover[b-pexhz4rerd] {
    transform: translateY(-6px);
    border-color: var(--wl-gold-border);
    box-shadow:
        0 20px 60px var(--wl-shadow-color),
        0 0 40px rgba(var(--wl-gold-rgb), 0.06);
}

.interview-template-card.available:hover[b-pexhz4rerd]::before {
    opacity: 1;
}

.interview-template-card.locked[b-pexhz4rerd] {
    opacity: 0.45;
    filter: grayscale(0.3);
}

/* Type badges */
.template-type-badge[b-pexhz4rerd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.625rem;
    border-radius: 9999px;
    width: fit-content;
}

.template-type-badge[b-pexhz4rerd]  svg {
    width: 0.8rem;
    height: 0.8rem;
}

.template-type-badge.talkshow[b-pexhz4rerd] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    color: var(--wl-purple);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.15);
}

.template-type-badge.podcast[b-pexhz4rerd] {
    background: rgba(var(--wl-pink-rgb), 0.12);
    color: #f472b6;
    border: 1px solid rgba(var(--wl-pink-rgb), 0.15);
}

.template-type-badge.radiointerview[b-pexhz4rerd] {
    background: rgba(251, 191, 36, 0.12);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.15);
}

.template-type-badge.pressconference[b-pexhz4rerd] {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.template-name[b-pexhz4rerd] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.1;
    transition: color 0.3s ease;
}

.interview-template-card.available:hover .template-name[b-pexhz4rerd] {
    color: var(--wl-gold);
}

.template-description[b-pexhz4rerd] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    margin: 0;
    line-height: 1.5;
    flex: 1;
}

.template-details[b-pexhz4rerd] {
    display: flex;
    gap: 1.25rem;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.template-detail[b-pexhz4rerd] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.template-detail[b-pexhz4rerd]  svg {
    width: 0.8rem;
    height: 0.8rem;
    color: #fbbf24;
    opacity: 0.8;
}

.template-detail.insufficient[b-pexhz4rerd] {
    color: #f87171;
}

.template-detail.insufficient[b-pexhz4rerd]  svg {
    color: #f87171;
}

/* Rewards */
.template-rewards[b-pexhz4rerd] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    cursor: help;
    padding-top: 0.5rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.reward[b-pexhz4rerd] {
    font-size: 0.6875rem;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.reward.fame[b-pexhz4rerd] {
    background: rgba(var(--wl-purple-rgb), 0.1);
    color: var(--wl-purple);
}

.reward.rep[b-pexhz4rerd] {
    background: rgba(34, 197, 94, 0.1);
    color: #4ade80;
}

.reward.hype[b-pexhz4rerd] {
    background: rgba(var(--wl-pink-rgb), 0.1);
    color: #f472b6;
}

/* ============================================
   BUTTONS
   ============================================ */

.interview-btn[b-pexhz4rerd] {
    width: 100%;
    padding: 0.875rem;
    border: none;
    border-radius: 0.375rem;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.interview-btn-primary[b-pexhz4rerd] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.25);
}

.interview-btn-primary:hover:not(:disabled)[b-pexhz4rerd] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--wl-gold-rgb), 0.4);
    background: linear-gradient(135deg, var(--wl-gold-light) 0%, var(--wl-gold) 100%);
}

.interview-btn-primary:active:not(:disabled)[b-pexhz4rerd] {
    transform: translateY(-1px);
}

.interview-btn-disabled[b-pexhz4rerd] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: rgba(var(--wl-contrast-rgb), 0.3);
    cursor: not-allowed;
    border: 1px solid var(--wl-border-subtle);
}

/* ============================================
   QUESTION FLOW
   ============================================ */

.interview-question[b-pexhz4rerd] {
    animation: fadeInUp-b-pexhz4rerd 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.interview-question-card[b-pexhz4rerd] {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    overflow: hidden;
}

.interview-question-card[b-pexhz4rerd]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 20%,
        rgba(var(--wl-gold-rgb), 0.9) 50%,
        rgba(var(--wl-gold-rgb), 0.5) 80%,
        transparent 100%);
}

.interview-question-header[b-pexhz4rerd] {
    text-align: center;
    margin-bottom: 2rem;
}

.interview-question-number[b-pexhz4rerd] {
    display: inline-block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: var(--wl-gold);
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid var(--wl-gold-border);
    padding: 0.3rem 1rem;
    border-radius: 9999px;
}

.interview-question-text[b-pexhz4rerd] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.04em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.2;
}

.interview-choose-label[b-pexhz4rerd] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 1.25rem 0;
}

/* ============================================
   RESPONSE CARDS - The Star of the Show
   ============================================ */

.interview-responses[b-pexhz4rerd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.interview-response[b-pexhz4rerd] {
    position: relative;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-align: left;
    width: 100%;
    overflow: hidden;
}

.interview-response[b-pexhz4rerd]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 0.75rem 0.75rem 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.interview-response:hover:not(:disabled)[b-pexhz4rerd] {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px var(--wl-shadow-color);
}

/* Safe - Green */
.interview-response.safe[b-pexhz4rerd]::before {
    background: linear-gradient(90deg, transparent, #22c55e, transparent);
}
.interview-response.safe:hover:not(:disabled)[b-pexhz4rerd] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.04);
}
.interview-response.safe.selected[b-pexhz4rerd] {
    border-color: rgba(34, 197, 94, 0.5);
    background: rgba(34, 197, 94, 0.06);
    box-shadow:
        0 0 30px rgba(34, 197, 94, 0.08),
        inset 0 1px 0 rgba(34, 197, 94, 0.1);
}
.interview-response.safe.selected[b-pexhz4rerd]::before { opacity: 1; }

/* Controversial - Red/Amber */
.interview-response.controversial[b-pexhz4rerd]::before {
    background: linear-gradient(90deg, transparent, #ef4444, transparent);
}
.interview-response.controversial:hover:not(:disabled)[b-pexhz4rerd] {
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.04);
}
.interview-response.controversial.selected[b-pexhz4rerd] {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.06);
    box-shadow:
        0 0 30px rgba(239, 68, 68, 0.08),
        inset 0 1px 0 rgba(239, 68, 68, 0.1);
}
.interview-response.controversial.selected[b-pexhz4rerd]::before { opacity: 1; }

/* Funny - Gold */
.interview-response.funny[b-pexhz4rerd]::before {
    background: linear-gradient(90deg, transparent, var(--wl-gold), transparent);
}
.interview-response.funny:hover:not(:disabled)[b-pexhz4rerd] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.04);
}
.interview-response.funny.selected[b-pexhz4rerd] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    background: rgba(var(--wl-gold-rgb), 0.06);
    box-shadow:
        0 0 30px rgba(var(--wl-gold-rgb), 0.08),
        inset 0 1px 0 rgba(var(--wl-gold-rgb), 0.1);
}
.interview-response.funny.selected[b-pexhz4rerd]::before { opacity: 1; }

/* Mysterious - Purple */
.interview-response.mysterious[b-pexhz4rerd]::before {
    background: linear-gradient(90deg, transparent, var(--wl-purple), transparent);
}
.interview-response.mysterious:hover:not(:disabled)[b-pexhz4rerd] {
    border-color: rgba(var(--wl-purple-rgb), 0.3);
    background: rgba(var(--wl-purple-rgb), 0.04);
}
.interview-response.mysterious.selected[b-pexhz4rerd] {
    border-color: rgba(var(--wl-purple-rgb), 0.5);
    background: rgba(var(--wl-purple-rgb), 0.06);
    box-shadow:
        0 0 30px rgba(var(--wl-purple-rgb), 0.08),
        inset 0 1px 0 rgba(var(--wl-purple-rgb), 0.1);
}
.interview-response.mysterious.selected[b-pexhz4rerd]::before { opacity: 1; }

/* Response header */
.response-header[b-pexhz4rerd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.625rem;
}

.response-type-badge[b-pexhz4rerd] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
}

.response-type-badge.safe[b-pexhz4rerd] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.response-type-badge.controversial[b-pexhz4rerd] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.response-type-badge.funny[b-pexhz4rerd] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold-light);
}

.response-type-badge.mysterious[b-pexhz4rerd] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    color: var(--wl-purple);
}

.response-hint[b-pexhz4rerd] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

.response-text[b-pexhz4rerd] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   IMPACT FLASH
   ============================================ */

.interview-impact-flash[b-pexhz4rerd] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    animation: impactPop-b-pexhz4rerd 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) backwards;
}

@keyframes impactPop-b-pexhz4rerd {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.impact-badge[b-pexhz4rerd] {
    padding: 0.35rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.impact-badge.fame[b-pexhz4rerd] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    color: var(--wl-purple);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.15);
}

.impact-badge.positive[b-pexhz4rerd] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.15);
}

.impact-badge.negative[b-pexhz4rerd] {
    background: rgba(var(--wl-red-rgb), 0.12);
    color: #f87171;
    border: 1px solid rgba(var(--wl-red-rgb), 0.15);
}

.impact-badge.hype[b-pexhz4rerd] {
    background: rgba(var(--wl-pink-rgb), 0.12);
    color: #f472b6;
    border: 1px solid rgba(var(--wl-pink-rgb), 0.15);
}

/* ============================================
   RESULT SCREEN - Grand Finale
   ============================================ */

.interview-result[b-pexhz4rerd] {
    animation: fadeInUp-b-pexhz4rerd 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.interview-result-card[b-pexhz4rerd] {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    padding: 2.5rem 2rem;
    text-align: center;
    overflow: hidden;
}

.interview-result-card[b-pexhz4rerd]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 20%,
        rgba(var(--wl-gold-rgb), 1) 50%,
        rgba(var(--wl-gold-rgb), 0.5) 80%,
        transparent 100%);
}

.interview-result-card[b-pexhz4rerd]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.04) 0%, transparent 100%);
    pointer-events: none;
}

.interview-result-title[b-pexhz4rerd] {
    position: relative;
    z-index: 1;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    color: var(--wl-gold);
    text-shadow: 0 0 40px rgba(var(--wl-gold-rgb), 0.3);
    margin: 0 0 1.5rem 0;
}

/* Viral moment */
.interview-viral-badge[b-pexhz4rerd] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(251, 191, 36, 0.15));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 9999px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: #fbbf24;
    margin-bottom: 0.5rem;
}

.interview-viral-badge[b-pexhz4rerd]  svg {
    width: 1.25rem;
    height: 1.25rem;
    animation: fireGlow-b-pexhz4rerd 1.5s ease-in-out infinite;
}

@keyframes fireGlow-b-pexhz4rerd {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.5)); }
    50% { filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.8)); }
}

.interview-viral-desc[b-pexhz4rerd] {
    position: relative;
    z-index: 1;
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
    margin: 0 0 1.5rem 0;
}

/* Result stats */
.interview-result-stats[b-pexhz4rerd] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.interview-stat[b-pexhz4rerd] {
    text-align: center;
    padding: 1rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    min-width: 100px;
}

.interview-stat-label[b-pexhz4rerd] {
    display: block;
    font-size: 0.625rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.375rem;
}

.interview-stat-value[b-pexhz4rerd] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.04em;
}

.interview-stat.fame .interview-stat-value[b-pexhz4rerd] {
    color: var(--wl-purple);
}

.interview-stat.positive .interview-stat-value[b-pexhz4rerd] {
    color: #4ade80;
}

.interview-stat.negative .interview-stat-value[b-pexhz4rerd] {
    color: #f87171;
}

.interview-stat.hype .interview-stat-value[b-pexhz4rerd] {
    color: #f472b6;
}

/* Result answer summary */
.interview-result-answers[b-pexhz4rerd] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 2rem;
    text-align: left;
}

.interview-answer-summary[b-pexhz4rerd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    transition: all 0.2s ease;
}

.interview-answer-summary:hover[b-pexhz4rerd] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: var(--wl-border-medium);
}

.interview-answer-question[b-pexhz4rerd] {
    flex: 1;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.8rem;
}

.interview-answer-type[b-pexhz4rerd] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    flex-shrink: 0;
}

.interview-answer-type.safe[b-pexhz4rerd] {
    background: rgba(34, 197, 94, 0.12);
    color: #4ade80;
}

.interview-answer-type.controversial[b-pexhz4rerd] {
    background: rgba(239, 68, 68, 0.12);
    color: #f87171;
}

.interview-answer-type.funny[b-pexhz4rerd] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold-light);
}

.interview-answer-type.mysterious[b-pexhz4rerd] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    color: var(--wl-purple);
}

.interview-answer-impact[b-pexhz4rerd] {
    display: flex;
    gap: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    flex-shrink: 0;
}

.impact-fame[b-pexhz4rerd] {
    color: var(--wl-purple);
}

.impact-rep.pos[b-pexhz4rerd] {
    color: #4ade80;
}

.impact-rep.neg[b-pexhz4rerd] {
    color: #f87171;
}

/* ============================================
   INTERVIEW HISTORY
   ============================================ */

.interview-history[b-pexhz4rerd] {
    position: relative;
    z-index: 1;
    margin-top: 2.5rem;
    animation: fadeInUp-b-pexhz4rerd 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

.interview-history-list[b-pexhz4rerd] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.interview-history-item[b-pexhz4rerd] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.interview-history-item:hover[b-pexhz4rerd] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: var(--wl-border-medium);
}

.interview-history-item.viral[b-pexhz4rerd] {
    border-color: rgba(251, 191, 36, 0.2);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.03), rgba(251, 191, 36, 0.03));
}

.interview-history-item.viral:hover[b-pexhz4rerd] {
    border-color: rgba(251, 191, 36, 0.35);
}

.history-icon[b-pexhz4rerd] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.history-icon[b-pexhz4rerd]  svg {
    width: 1rem;
    height: 1rem;
    color: var(--wl-text-muted);
}

.interview-history-item.viral .history-icon[b-pexhz4rerd] {
    border-color: rgba(251, 191, 36, 0.2);
    background: rgba(251, 191, 36, 0.06);
}

.interview-history-item.viral .history-icon[b-pexhz4rerd]  svg {
    color: #fbbf24;
}

.history-info[b-pexhz4rerd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.history-name[b-pexhz4rerd] {
    font-weight: 600;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

.history-time[b-pexhz4rerd] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    letter-spacing: 0.02em;
}

.history-results[b-pexhz4rerd] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.history-fame[b-pexhz4rerd] {
    color: var(--wl-purple);
}

.history-rep.positive[b-pexhz4rerd] {
    color: #4ade80;
}

.history-rep.negative[b-pexhz4rerd] {
    color: #f87171;
}

.history-viral[b-pexhz4rerd]  svg {
    width: 1rem;
    height: 1rem;
    color: #fbbf24;
    animation: fireGlow-b-pexhz4rerd 1.5s ease-in-out infinite;
}

/* Empty state */
.interview-empty-state[b-pexhz4rerd] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 0.75rem;
    font-size: 0.875rem;
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp-b-pexhz4rerd {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardEnter-b-pexhz4rerd {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.animate-fade-in[b-pexhz4rerd] {
    animation: fadeInUp-b-pexhz4rerd 0.4s ease-out both;
}

.animate-pulse[b-pexhz4rerd] {
    animation: pulse-b-pexhz4rerd 2s ease-in-out infinite;
}

@keyframes pulse-b-pexhz4rerd {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .interview-page[b-pexhz4rerd] {
        padding: 0 1rem 3rem;
    }

    .interview-header[b-pexhz4rerd] {
        flex-direction: column;
        align-items: flex-start;
    }

    .interview-title[b-pexhz4rerd] {
        font-size: 1.75rem;
    }

    .interview-resources-display[b-pexhz4rerd] {
        width: 100%;
        justify-content: center;
    }

    .interview-templates-grid[b-pexhz4rerd] {
        grid-template-columns: 1fr;
    }

    .interview-responses[b-pexhz4rerd] {
        grid-template-columns: 1fr;
    }

    .interview-result-stats[b-pexhz4rerd] {
        gap: 0.75rem;
    }

    .interview-stat[b-pexhz4rerd] {
        min-width: 80px;
        padding: 0.75rem 1rem;
    }

    .interview-question-text[b-pexhz4rerd] {
        font-size: 1.5rem;
    }

    .invitation-card-top[b-pexhz4rerd] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .invitation-actions[b-pexhz4rerd] {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .interview-header-content[b-pexhz4rerd] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .interview-header-icon[b-pexhz4rerd] {
        width: 2.5rem;
        height: 2.5rem;
    }

    .interview-header-icon[b-pexhz4rerd]  svg {
        width: 1.25rem;
        height: 1.25rem;
    }

    .interview-result-stats[b-pexhz4rerd] {
        flex-direction: column;
        align-items: center;
    }

    .interview-stat[b-pexhz4rerd] {
        width: 100%;
    }
}

/* ============================================
   HEADER RIGHT - Persona + Resources + Progress
   ============================================ */

.interview-header-right[b-pexhz4rerd] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ============================================
   PERSONA BADGE
   ============================================ */

.persona-badge[b-pexhz4rerd] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.875rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: help;
    transition: all 0.3s ease;
    border: 1px solid;
    margin-top: 0.5rem;
}

.persona-badge-icon[b-pexhz4rerd] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    line-height: 1;
}

/* Persona color variants */
.persona-versatile[b-pexhz4rerd] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: rgba(var(--wl-contrast-rgb), 0.1);
    color: var(--wl-text-muted);
}

.persona-provocateur[b-pexhz4rerd] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

.persona-entertainer[b-pexhz4rerd] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.persona-enigma[b-pexhz4rerd] {
    background: rgba(var(--wl-purple-rgb), 0.1);
    border-color: rgba(var(--wl-purple-rgb), 0.25);
    color: var(--wl-purple);
}

.persona-diplomat[b-pexhz4rerd] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
    color: #4ade80;
}

.persona-badge:hover[b-pexhz4rerd] {
    transform: translateY(-1px);
}

/* ============================================
   TEMPERATURE INDICATORS
   ============================================ */

.interview-question-meta[b-pexhz4rerd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 1rem;
}

.temp-indicator[b-pexhz4rerd] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    cursor: help;
    border: 1px solid;
}

.temp-cold[b-pexhz4rerd] {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}

.temp-warm[b-pexhz4rerd] {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.temp-hot[b-pexhz4rerd] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
    animation: tempHotPulse-b-pexhz4rerd 2s ease-in-out infinite;
}

@keyframes tempHotPulse-b-pexhz4rerd {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    50% { box-shadow: 0 0 12px -2px rgba(239, 68, 68, 0.2); }
}

/* Hot topic badge */
.hot-topic-badge[b-pexhz4rerd] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(251, 191, 36, 0.08));
    border: 1px solid rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.hot-topic-badge[b-pexhz4rerd]  svg {
    width: 0.625rem;
    height: 0.625rem;
}

/* Temperature in result answer summary */
.interview-answer-temp[b-pexhz4rerd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: 700;
}

.interview-answer-temp.temp-cold[b-pexhz4rerd] {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
}

.interview-answer-temp.temp-warm[b-pexhz4rerd] {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
}

.interview-answer-temp.temp-hot[b-pexhz4rerd] {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

/* ============================================
   RESPONSE - OUT-OF-TYPE & BUZZ WARNING
   ============================================ */

.interview-response.out-of-type[b-pexhz4rerd] {
    border-style: dashed;
}

.interview-response.out-of-type[b-pexhz4rerd]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent rgba(251, 191, 36, 0.3) transparent transparent;
    border-radius: 0 0.75rem 0 0;
}

.response-buzz-warning[b-pexhz4rerd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.625rem;
    padding: 0.4rem 0.625rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(251, 191, 36, 0.08));
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    color: #fbbf24;
    font-weight: 600;
    letter-spacing: 0.02em;
    animation: buzzWarningIn-b-pexhz4rerd 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.response-buzz-warning[b-pexhz4rerd]  svg {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    color: #fbbf24;
}

@keyframes buzzWarningIn-b-pexhz4rerd {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.buzz-odds-inline[b-pexhz4rerd] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
}

.odds-pos[b-pexhz4rerd] {
    color: #4ade80;
}

.odds-sep[b-pexhz4rerd] {
    color: var(--wl-text-muted);
}

.odds-neg[b-pexhz4rerd] {
    color: #f87171;
}

/* ============================================
   CONFIRM GROUP - Buzz Roll / Cancel buttons
   ============================================ */

.interview-confirm-group[b-pexhz4rerd] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0;
}

.interview-btn-buzz[b-pexhz4rerd] {
    flex: 1;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(251, 191, 36, 0.15));
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
    animation: buzzBtnPulse-b-pexhz4rerd 1.5s ease-in-out infinite;
}

.interview-btn-buzz[b-pexhz4rerd]  svg {
    width: 1rem;
    height: 1rem;
}

.interview-btn-buzz:hover:not(:disabled)[b-pexhz4rerd] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(251, 191, 36, 0.2);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(251, 191, 36, 0.2));
}

@keyframes buzzBtnPulse-b-pexhz4rerd {
    0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
    50% { box-shadow: 0 0 20px -4px rgba(251, 191, 36, 0.3); }
}

.interview-btn-cancel[b-pexhz4rerd] {
    flex: 0.6;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-subtle);
    color: var(--wl-text-muted);
}

.interview-btn-cancel:hover:not(:disabled)[b-pexhz4rerd] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border-color: var(--wl-border-medium);
    color: var(--wl-text-secondary);
}

/* ============================================
   TRIGGERED EVENTS - Post-Interview
   ============================================ */

.interview-events[b-pexhz4rerd] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    animation: fadeInUp-b-pexhz4rerd 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

.interview-event-card[b-pexhz4rerd] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid;
    animation: eventCardIn-b-pexhz4rerd 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.interview-event-card:nth-child(1)[b-pexhz4rerd] { animation-delay: 0.1s; }
.interview-event-card:nth-child(2)[b-pexhz4rerd] { animation-delay: 0.2s; }
.interview-event-card:nth-child(3)[b-pexhz4rerd] { animation-delay: 0.3s; }

@keyframes eventCardIn-b-pexhz4rerd {
    from {
        opacity: 0;
        transform: translateX(-10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Event variants */
.event-mediastorm[b-pexhz4rerd] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(239, 68, 68, 0.02));
    border-color: rgba(239, 68, 68, 0.2);
}

.event-viralclip[b-pexhz4rerd] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.06), rgba(var(--wl-gold-rgb), 0.02));
    border-color: rgba(var(--wl-gold-rgb), 0.2);
}

.event-hypespike[b-pexhz4rerd] {
    background: linear-gradient(135deg, rgba(var(--wl-pink-rgb), 0.06), rgba(var(--wl-pink-rgb), 0.02));
    border-color: rgba(var(--wl-pink-rgb), 0.2);
}

.event-beefescalation[b-pexhz4rerd] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(251, 191, 36, 0.02));
    border-color: rgba(239, 68, 68, 0.2);
}

.event-boringinterview[b-pexhz4rerd] {
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border-color: var(--wl-border-subtle);
}

.event-icon[b-pexhz4rerd] {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.event-icon[b-pexhz4rerd]  svg {
    width: 1.25rem;
    height: 1.25rem;
}

.event-mediastorm .event-icon[b-pexhz4rerd]  svg { color: #f87171; }
.event-viralclip .event-icon[b-pexhz4rerd]  svg { color: var(--wl-gold); }
.event-hypespike .event-icon[b-pexhz4rerd]  svg { color: #f472b6; }
.event-beefescalation .event-icon[b-pexhz4rerd]  svg { color: #f87171; }
.event-boringinterview .event-icon[b-pexhz4rerd]  svg { color: var(--wl-text-muted); }

.event-info[b-pexhz4rerd] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.event-name[b-pexhz4rerd] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    color: var(--wl-text-primary);
}

.event-desc[b-pexhz4rerd] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    line-height: 1.4;
}

/* ============================================
   RESPONSIVE - New Elements
   ============================================ */

@media (max-width: 768px) {
    .interview-header-right[b-pexhz4rerd] {
        width: 100%;
        justify-content: center;
    }

    .persona-badge[b-pexhz4rerd] {
        font-size: 0.6875rem;
    }

    .interview-confirm-group[b-pexhz4rerd] {
        flex-direction: column;
    }

    .interview-btn-cancel[b-pexhz4rerd] {
        flex: 1;
    }
}

@media (max-width: 480px) {
    .interview-question-meta[b-pexhz4rerd] {
        gap: 0.375rem;
    }

    .temp-indicator[b-pexhz4rerd],
    .hot-topic-badge[b-pexhz4rerd] {
        font-size: 0.5625rem;
    }

    .persona-badge-label[b-pexhz4rerd] {
        display: none;
    }
}

/* ============================================
   REACH BADGES
   ============================================ */

.reach-badge[b-pexhz4rerd] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid;
    cursor: help;
    transition: all 0.2s ease;
}

.reach-badge[b-pexhz4rerd]  svg {
    width: 0.65rem;
    height: 0.65rem;
}

.reach-local[b-pexhz4rerd] {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.2);
    color: #60a5fa;
}

.reach-national[b-pexhz4rerd] {
    background: rgba(var(--wl-purple-rgb), 0.1);
    border-color: rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

.reach-global[b-pexhz4rerd] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.12), rgba(var(--wl-gold-rgb), 0.06));
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.reach-badge:hover[b-pexhz4rerd] {
    transform: translateY(-1px);
}

/* ============================================
   BRANCH BADGES
   ============================================ */

.branch-badge[b-pexhz4rerd] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.625rem;
    border-radius: 9999px;
    border: 1px solid;
}

.branch-badge[b-pexhz4rerd]  svg {
    width: 0.65rem;
    height: 0.65rem;
}

.branch-music[b-pexhz4rerd] {
    background: rgba(var(--wl-pink-rgb), 0.1);
    border-color: rgba(var(--wl-pink-rgb), 0.2);
    color: #f472b6;
}

.branch-film[b-pexhz4rerd] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

.branch-fashion[b-pexhz4rerd] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.2);
    color: var(--wl-gold);
}

/* ============================================
   HQ CITY DISPLAY
   ============================================ */

.invitation-hq-city[b-pexhz4rerd] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    letter-spacing: 0.01em;
}

.invitation-hq-city[b-pexhz4rerd]  svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--wl-text-muted);
    opacity: 0.7;
    flex-shrink: 0;
}

.invitation-hq-city.needs-travel[b-pexhz4rerd] {
    color: #fbbf24;
}

.invitation-hq-city.needs-travel[b-pexhz4rerd]  svg {
    color: #fbbf24;
    opacity: 1;
}

/* ============================================
   TRAVEL GATE BUTTON
   ============================================ */

.interview-btn-travel[b-pexhz4rerd] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(96, 165, 250, 0.08));
    border: 1px solid rgba(96, 165, 250, 0.35);
    color: #60a5fa;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.interview-btn-travel[b-pexhz4rerd]  svg {
    width: 1rem;
    height: 1rem;
}

.interview-btn-travel:hover:not(:disabled)[b-pexhz4rerd] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.2);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.12));
    border-color: rgba(96, 165, 250, 0.5);
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .interview-template-card[b-pexhz4rerd],
    .invitation-card[b-pexhz4rerd],
    .interview-question[b-pexhz4rerd],
    .interview-result[b-pexhz4rerd],
    .interview-available[b-pexhz4rerd],
    .interview-history[b-pexhz4rerd],
    .interview-header[b-pexhz4rerd],
    .interview-empty[b-pexhz4rerd],
    .interview-impact-flash[b-pexhz4rerd],
    .interview-events[b-pexhz4rerd],
    .interview-event-card[b-pexhz4rerd],
    .response-buzz-warning[b-pexhz4rerd] {
        animation: none;
    }

    .invitation-expiry.urgent[b-pexhz4rerd] {
        animation: none;
    }

    .interview-loading-spinner[b-pexhz4rerd],
    .interview-loading-spinner-small[b-pexhz4rerd] {
        animation: none;
    }

    .interview-viral-badge[b-pexhz4rerd]  svg {
        animation: none;
    }

    .history-viral[b-pexhz4rerd]  svg {
        animation: none;
    }

    .temp-hot[b-pexhz4rerd] {
        animation: none;
    }

    .interview-btn-buzz[b-pexhz4rerd] {
        animation: none;
    }
}
/* /Components/Pages/Career/Music/Labels/Index.razor.rz.scp.css */
/* ============================================
   RECORD LABELS PAGE - Contract Management UI
   Theme: Music Industry Premium / Label Prestige
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.labels-page[b-995wshx7gf] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-atmosphere[b-995wshx7gf] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(192, 192, 192, 0.04) 0%, transparent 50%);
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-995wshx7gf] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 2rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--wl-gold-bg-hover);
}

.page-header[b-995wshx7gf]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-995wshx7gf] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-995wshx7gf] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid var(--wl-gold-border);
    border-radius: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-995wshx7gf] {
    width: 1.75rem;
    height: 1.75rem;
}

.header-text h1[b-995wshx7gf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.header-subtitle[b-995wshx7gf] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

.contract-indicator[b-995wshx7gf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 9999px;
    color: #22C55E;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
    animation: contractPulse-b-995wshx7gf 2s ease-in-out infinite;
}

@keyframes contractPulse-b-995wshx7gf {
    0%, 100% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.2); }
    50% { box-shadow: 0 0 30px rgba(34, 197, 94, 0.4); }
}

.contract-indicator svg[b-995wshx7gf] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-995wshx7gf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    color: var(--wl-text-muted);
    gap: 1.5rem;
}

.loading-spinner[b-995wshx7gf] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-gold-bg);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-995wshx7gf 1s linear infinite;
}

@keyframes spin-b-995wshx7gf {
    to { transform: rotate(360deg); }
}

/* ============================================
   SECTION TITLES
   ============================================ */

.section-title[b-995wshx7gf] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin: 0 0 1.5rem 0;
}

.section-title svg[b-995wshx7gf] {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.8;
}

/* ============================================
   CURRENT CONTRACT SECTION
   ============================================ */

.current-contract-section[b-995wshx7gf] {
    position: relative;
    z-index: 1;
    margin-bottom: 3rem;
    animation: fadeSlideIn-b-995wshx7gf 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes fadeSlideIn-b-995wshx7gf {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.contract-card[b-995wshx7gf] {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-gold-border);
    border-radius: 1rem;
    padding: 2rem;
    overflow: hidden;
}

.contract-card[b-995wshx7gf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light), var(--wl-gold));
}

.contract-glow[b-995wshx7gf] {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at center, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 60%);
    pointer-events: none;
    animation: glowPulse-b-995wshx7gf 3s ease-in-out infinite;
}

@keyframes glowPulse-b-995wshx7gf {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.contract-header[b-995wshx7gf] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.label-icon-large[b-995wshx7gf] {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    flex-shrink: 0;
}

.label-icon-large svg[b-995wshx7gf] {
    width: 2rem;
    height: 2rem;
}

.label-icon-large.tier-indie[b-995wshx7gf] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.15) 0%, rgba(var(--wl-purple-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

.label-icon-large.tier-midtier[b-995wshx7gf] {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.05) 100%);
    border: 1px solid rgba(34, 211, 238, 0.2);
    color: #22D3EE;
}

.label-icon-large.tier-major[b-995wshx7gf] {
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.label-icon-large.tier-legendary[b-995wshx7gf] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.3) 0%, rgba(184, 150, 15, 0.1) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.5);
    color: var(--wl-gold-light);
    box-shadow: 0 0 20px var(--wl-gold-border);
}

.contract-info[b-995wshx7gf] {
    flex: 1;
}

.label-name[b-995wshx7gf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem 0;
}

.tier-badge[b-995wshx7gf] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tier-badge.tier-indie[b-995wshx7gf] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.3);
    color: var(--wl-purple);
}

.tier-badge.tier-midtier[b-995wshx7gf] {
    background: rgba(34, 211, 238, 0.15);
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: #22D3EE;
}

.tier-badge.tier-major[b-995wshx7gf] {
    background: var(--wl-gold-bg-hover);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.tier-badge.tier-legendary[b-995wshx7gf] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.25) 0%, var(--wl-gold-bg) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.5);
    color: var(--wl-gold-light);
    box-shadow: 0 0 10px var(--wl-gold-border);
}

.contract-terms[b-995wshx7gf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.term-item[b-995wshx7gf] {
    text-align: center;
    padding: 1rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-radius: 0.75rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.term-label[b-995wshx7gf] {
    display: block;
    font-size: 0.625rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.term-value[b-995wshx7gf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-text-primary);
    line-height: 1;
}

.term-value.artist[b-995wshx7gf] {
    color: #22C55E;
}

.term-value.promo[b-995wshx7gf] {
    color: #22D3EE;
}

.term-value.reach[b-995wshx7gf] {
    color: var(--wl-purple);
}

.term-sublabel[b-995wshx7gf] {
    display: block;
    font-size: 0.5625rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

.contract-progress[b-995wshx7gf] {
    background: var(--wl-surface-primary);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.progress-header[b-995wshx7gf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.progress-title[b-995wshx7gf] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.progress-remaining[b-995wshx7gf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: #F59E0B;
}

.requirements-grid[b-995wshx7gf] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.requirement-item[b-995wshx7gf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-subtle);
}

.requirement-item svg[b-995wshx7gf] {
    width: 1.25rem;
    height: 1.25rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.requirement-item.completed[b-995wshx7gf] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-color: rgba(34, 197, 94, 0.2);
}

.requirement-item.completed svg[b-995wshx7gf] {
    color: #22C55E;
}

.req-count[b-995wshx7gf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-text-primary);
}

.requirement-item.completed .req-count[b-995wshx7gf] {
    color: #22C55E;
}

.req-label[b-995wshx7gf] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.terminate-contract-btn[b-995wshx7gf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 0.5rem;
    color: #F87171;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.terminate-contract-btn:hover:not(:disabled)[b-995wshx7gf] {
    background: rgba(var(--wl-red-rgb), 0.2);
    border-color: rgba(var(--wl-red-rgb), 0.4);
}

.terminate-contract-btn:disabled[b-995wshx7gf] {
    opacity: 0.5;
    cursor: not-allowed;
}

.terminate-contract-btn svg[b-995wshx7gf] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   LABEL TIERS SECTION
   ============================================ */

.tiers-section[b-995wshx7gf] {
    position: relative;
    z-index: 1;
    margin-bottom: 3rem;
    animation: fadeSlideIn-b-995wshx7gf 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.tiers-grid[b-995wshx7gf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.tier-card[b-995wshx7gf] {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    padding: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.tier-card[b-995wshx7gf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
}

.tier-card.tier-indie[b-995wshx7gf]::before {
    background: linear-gradient(90deg, transparent, rgba(var(--wl-purple-rgb), 0.6), transparent);
}

.tier-card.tier-midtier[b-995wshx7gf]::before {
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.6), transparent);
}

.tier-card.tier-major[b-995wshx7gf]::before {
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.6), transparent);
}

.tier-card.tier-legendary[b-995wshx7gf] {
    border-color: var(--wl-gold-border);
}

.tier-card.tier-legendary[b-995wshx7gf]::before {
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light), var(--wl-gold));
    height: 3px;
}

.tier-header[b-995wshx7gf] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1rem;
}

.tier-icon[b-995wshx7gf] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
}

.tier-icon svg[b-995wshx7gf] {
    width: 1.25rem;
    height: 1.25rem;
}

.tier-icon.tier-indie[b-995wshx7gf] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.15) 0%, rgba(var(--wl-purple-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

.tier-icon.tier-midtier[b-995wshx7gf] {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.05) 100%);
    border: 1px solid rgba(34, 211, 238, 0.2);
    color: #22D3EE;
}

.tier-icon.tier-major[b-995wshx7gf] {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid var(--wl-gold-border);
    color: var(--wl-gold);
}

.tier-icon.tier-legendary[b-995wshx7gf] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.25) 0%, rgba(184, 150, 15, 0.1) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold-light);
    box-shadow: 0 0 15px var(--wl-gold-bg-hover);
}

.tier-header h3[b-995wshx7gf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
}

.tier-card.tier-legendary .tier-header h3[b-995wshx7gf] {
    color: var(--wl-gold-light);
}

.tier-description[b-995wshx7gf] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

.tier-stats[b-995wshx7gf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tier-stat[b-995wshx7gf] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-radius: 0.375rem;
}

.tier-stat-label[b-995wshx7gf] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tier-stat-value[b-995wshx7gf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9375rem;
    color: var(--wl-text-primary);
}

/* ============================================
   LABELS GRID
   ============================================ */

.labels-section[b-995wshx7gf] {
    position: relative;
    z-index: 1;
    animation: fadeSlideIn-b-995wshx7gf 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.labels-grid[b-995wshx7gf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1.5rem;
}

.label-card[b-995wshx7gf] {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    padding: 1.5rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    animation: cardEnter-b-995wshx7gf 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes cardEnter-b-995wshx7gf {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.label-card[b-995wshx7gf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.label-card.tier-indie[b-995wshx7gf]::before {
    background: linear-gradient(90deg, transparent, rgba(var(--wl-purple-rgb), 0.7), transparent);
}

.label-card.tier-midtier[b-995wshx7gf]::before {
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.7), transparent);
}

.label-card.tier-major[b-995wshx7gf]::before {
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.7), transparent);
}

.label-card.tier-legendary[b-995wshx7gf]::before {
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light), var(--wl-gold));
    height: 3px;
    opacity: 1;
}

.label-card.tier-legendary[b-995wshx7gf] {
    border-color: var(--wl-gold-border);
}

.label-card.eligible:hover[b-995wshx7gf]::before {
    opacity: 1;
}

.label-card.eligible:hover[b-995wshx7gf] {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px var(--wl-shadow-color);
}

.label-card.current[b-995wshx7gf] {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.05) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
}

.label-card.current[b-995wshx7gf]::before {
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.8), transparent);
    opacity: 1;
}

.label-card.locked[b-995wshx7gf] {
    opacity: 0.7;
}

.current-label-badge[b-995wshx7gf] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: 9999px;
    color: #22C55E;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.current-label-badge svg[b-995wshx7gf] {
    width: 0.75rem;
    height: 0.75rem;
}

.label-header[b-995wshx7gf] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.label-icon[b-995wshx7gf] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.label-icon svg[b-995wshx7gf] {
    width: 1.5rem;
    height: 1.5rem;
}

.label-card.eligible:hover .label-icon[b-995wshx7gf] {
    transform: scale(1.05);
}

.label-title[b-995wshx7gf] {
    flex: 1;
    min-width: 0;
}

.label-title h3[b-995wshx7gf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
}

.prestige-badge[b-995wshx7gf] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-radius: 0.5rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.prestige-badge svg[b-995wshx7gf] {
    width: 0.875rem;
    height: 0.875rem;
}

.prestige-badge span[b-995wshx7gf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
}

.label-stats[b-995wshx7gf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.label-stat[b-995wshx7gf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-radius: 0.5rem;
}

.stat-icon[b-995wshx7gf] {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.stat-icon svg[b-995wshx7gf] {
    width: 0.875rem;
    height: 0.875rem;
}

.stat-icon.revenue[b-995wshx7gf] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #22C55E;
}

.stat-icon.reach[b-995wshx7gf] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.15) 0%, rgba(var(--wl-purple-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

.stat-icon.bonus[b-995wshx7gf] {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid var(--wl-gold-border);
    color: var(--wl-gold);
}

.stat-details[b-995wshx7gf] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stat-details .stat-label[b-995wshx7gf] {
    font-size: 0.5625rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-details .stat-value[b-995wshx7gf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: var(--wl-text-primary);
    line-height: 1.2;
}

.label-requirements[b-995wshx7gf] {
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: var(--wl-surface-primary);
    border-radius: 0.5rem;
}

.req-title[b-995wshx7gf] {
    display: block;
    font-size: 0.625rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.75rem;
}

.req-items[b-995wshx7gf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.req-item[b-995wshx7gf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
}

.req-item svg[b-995wshx7gf] {
    width: 0.875rem;
    height: 0.875rem;
    color: #F87171;
    flex-shrink: 0;
}

.req-item.met[b-995wshx7gf] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.req-item.met svg[b-995wshx7gf] {
    color: #22C55E;
}

.label-actions[b-995wshx7gf] {
    margin-top: auto;
}

.send-demo-btn[b-995wshx7gf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border: none;
    border-radius: 0.5rem;
    color: var(--wl-bg-primary);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.3);
}

.send-demo-btn:hover:not(:disabled)[b-995wshx7gf] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--wl-gold-rgb), 0.4);
    background: linear-gradient(135deg, var(--wl-gold-light) 0%, var(--wl-gold) 100%);
}

.send-demo-btn:disabled[b-995wshx7gf] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.send-demo-btn svg[b-995wshx7gf] {
    width: 1rem;
    height: 1rem;
}

.action-locked[b-995wshx7gf],
.action-blocked[b-995wshx7gf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-size: 0.8125rem;
    font-weight: 500;
}

.action-locked svg[b-995wshx7gf],
.action-blocked svg[b-995wshx7gf] {
    width: 1rem;
    height: 1rem;
    opacity: 0.5;
}

.current-badge[b-995wshx7gf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 0.5rem;
    color: #22C55E;
    font-size: 0.8125rem;
    font-weight: 600;
}

.current-badge svg[b-995wshx7gf] {
    width: 1rem;
    height: 1rem;
}

.offer-pending[b-995wshx7gf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.offer-info[b-995wshx7gf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(251, 146, 60, 0.05) 100%);
    border: 1px solid rgba(251, 146, 60, 0.3);
    border-radius: 0.5rem;
    color: #FB923C;
    font-size: 0.8125rem;
    font-weight: 600;
    animation: offerPulse-b-995wshx7gf 2s ease-in-out infinite;
}

@keyframes offerPulse-b-995wshx7gf {
    0%, 100% { border-color: rgba(251, 146, 60, 0.3); }
    50% { border-color: rgba(251, 146, 60, 0.6); }
}

.offer-info svg[b-995wshx7gf] {
    width: 1rem;
    height: 1rem;
}

.offer-actions[b-995wshx7gf] {
    display: flex;
    gap: 0.5rem;
}

.offer-btn[b-995wshx7gf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    flex: 1;
    padding: 0.625rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.offer-btn svg[b-995wshx7gf] {
    width: 0.875rem;
    height: 0.875rem;
}

.offer-btn.accept[b-995wshx7gf] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22C55E;
}

.offer-btn.accept:hover:not(:disabled)[b-995wshx7gf] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3) 0%, rgba(34, 197, 94, 0.15) 100%);
    border-color: rgba(34, 197, 94, 0.5);
}

.offer-btn.decline[b-995wshx7gf] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    color: #F87171;
}

.offer-btn.decline:hover:not(:disabled)[b-995wshx7gf] {
    background: rgba(var(--wl-red-rgb), 0.2);
    border-color: rgba(var(--wl-red-rgb), 0.4);
}

.offer-btn:disabled[b-995wshx7gf] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   MODALS
   ============================================ */

.modal-backdrop[b-995wshx7gf] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1000;
    animation: fadeIn-b-995wshx7gf 0.2s ease;
}

@keyframes fadeIn-b-995wshx7gf {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content[b-995wshx7gf] {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    max-width: 500px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    animation: modalSlideIn-b-995wshx7gf 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideIn-b-995wshx7gf {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close[b-995wshx7gf] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover[b-995wshx7gf] {
    background: var(--wl-border-medium);
    color: var(--wl-text-primary);
}

.modal-close svg[b-995wshx7gf] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Offer Modal */
.offer-modal .modal-header[b-995wshx7gf] {
    text-align: center;
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.offer-label-icon[b-995wshx7gf] {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
    margin: 0 auto 1rem;
}

.offer-label-icon svg[b-995wshx7gf] {
    width: 2rem;
    height: 2rem;
}

.offer-modal .modal-header h2[b-995wshx7gf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem 0;
}

.modal-subtitle[b-995wshx7gf] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0;
}

.modal-body[b-995wshx7gf] {
    padding: 1.5rem 2rem;
}

.offer-terms-grid[b-995wshx7gf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.offer-term[b-995wshx7gf] {
    text-align: center;
    padding: 1rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-radius: 0.75rem;
}

.offer-term-label[b-995wshx7gf] {
    display: block;
    font-size: 0.625rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
}

.offer-term-value[b-995wshx7gf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    color: var(--wl-text-primary);
}

.offer-term-value.bonus[b-995wshx7gf] {
    color: var(--wl-gold);
}

.offer-term-value.revenue[b-995wshx7gf] {
    color: #22C55E;
}

.offer-term-value.reach[b-995wshx7gf] {
    color: var(--wl-purple);
}

.offer-term-value.promo[b-995wshx7gf] {
    color: #22D3EE;
}

.offer-requirements[b-995wshx7gf] {
    background: var(--wl-surface-primary);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.offer-requirements h3[b-995wshx7gf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    color: var(--wl-gold);
    margin: 0 0 1rem 0;
}

.offer-req-items[b-995wshx7gf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.offer-req[b-995wshx7gf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.offer-req svg[b-995wshx7gf] {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--wl-text-muted);
}

.modal-footer[b-995wshx7gf] {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--wl-border-subtle);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.modal-btn[b-995wshx7gf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 7rem;
}

.modal-btn.secondary[b-995wshx7gf] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.modal-btn.secondary:hover[b-995wshx7gf] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.25);
    color: var(--wl-text-primary);
}

.modal-btn.primary[b-995wshx7gf] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border: none;
    color: var(--wl-bg-primary);
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.3);
}

.modal-btn.primary:hover:not(:disabled)[b-995wshx7gf] {
    box-shadow: 0 6px 20px rgba(var(--wl-gold-rgb), 0.4);
    background: linear-gradient(135deg, var(--wl-gold-light) 0%, var(--wl-gold) 100%);
}

.modal-btn.primary:disabled[b-995wshx7gf] {
    opacity: 0.6;
    cursor: not-allowed;
}

.modal-btn.danger[b-995wshx7gf] {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    border: none;
    color: var(--wl-text-primary);
}

.modal-btn.danger:hover:not(:disabled)[b-995wshx7gf] {
    background: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
}

.modal-btn.danger:disabled[b-995wshx7gf] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-spinner[b-995wshx7gf] {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--wl-text-muted);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-995wshx7gf 0.8s linear infinite;
}

.modal-btn.primary .btn-spinner[b-995wshx7gf] {
    border-color: rgba(var(--wl-bg-dark-rgb), 0.3);
    border-top-color: var(--wl-bg-primary);
}

/* Terminate Modal */
.terminate-modal[b-995wshx7gf] {
    text-align: center;
    padding: 2.5rem 2rem;
    max-width: 400px;
}

.modal-icon[b-995wshx7gf] {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
}

.modal-icon.warning[b-995wshx7gf] {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.modal-icon svg[b-995wshx7gf] {
    width: 2rem;
    height: 2rem;
}

.terminate-modal h2[b-995wshx7gf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.75rem 0;
}

.terminate-modal p[b-995wshx7gf] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

.penalty-warning[b-995wshx7gf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 0.5rem;
    color: #F87171;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.penalty-warning svg[b-995wshx7gf] {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.modal-actions[b-995wshx7gf] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 1200px) {
    .tiers-grid[b-995wshx7gf] {
        grid-template-columns: repeat(2, 1fr);
    }

    .contract-terms[b-995wshx7gf] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .labels-page[b-995wshx7gf] {
        padding: 0 1rem 3rem;
    }

    .page-header[b-995wshx7gf] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-text h1[b-995wshx7gf] {
        font-size: 1.75rem;
    }

    .contract-indicator[b-995wshx7gf] {
        width: 100%;
        justify-content: center;
    }

    .tiers-grid[b-995wshx7gf] {
        grid-template-columns: 1fr;
    }

    .contract-terms[b-995wshx7gf] {
        grid-template-columns: 1fr;
    }

    .requirements-grid[b-995wshx7gf] {
        grid-template-columns: 1fr;
    }

    .labels-grid[b-995wshx7gf] {
        grid-template-columns: 1fr;
    }

    .label-stats[b-995wshx7gf] {
        grid-template-columns: 1fr;
    }

    .offer-terms-grid[b-995wshx7gf] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .header-content[b-995wshx7gf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-icon[b-995wshx7gf] {
        width: 2.75rem;
        height: 2.75rem;
    }

    .header-icon svg[b-995wshx7gf] {
        width: 1.5rem;
        height: 1.5rem;
    }

    .offer-actions[b-995wshx7gf] {
        flex-direction: column;
    }

    .modal-actions[b-995wshx7gf] {
        flex-direction: column;
    }

    .modal-btn[b-995wshx7gf] {
        width: 100%;
    }

    .offer-terms-grid[b-995wshx7gf] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .current-contract-section[b-995wshx7gf],
    .tiers-section[b-995wshx7gf],
    .labels-section[b-995wshx7gf],
    .label-card[b-995wshx7gf],
    .modal-backdrop[b-995wshx7gf],
    .modal-content[b-995wshx7gf] {
        animation: none;
    }

    .loading-spinner[b-995wshx7gf],
    .btn-spinner[b-995wshx7gf],
    .contract-glow[b-995wshx7gf] {
        animation: none;
    }

    .contract-indicator[b-995wshx7gf],
    .offer-info[b-995wshx7gf] {
        animation: none;
    }

    .label-card.eligible:hover[b-995wshx7gf],
    .send-demo-btn:hover[b-995wshx7gf] {
        transform: none;
    }
}
/* /Components/Pages/Career/Music/Merch/Create.razor.rz.scp.css */
/* ============================================
   CREATE DESIGN - Luxury Fashion Aesthetic
   Two-column layout with sidebar panels
   ============================================ */

.create-design[b-wmm576agrb] {
    max-width: 1300px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
}

/* ============================================
   HEADER
   ============================================ */

.create-header[b-wmm576agrb] {
    position: relative;
    padding: 2rem 3rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.12) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 1.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow:
        0 0 60px rgba(var(--wl-gold-rgb), 0.08),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

.create-header .header-bg-pattern[b-wmm576agrb] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, var(--wl-gold-bg-hover) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 30%);
    pointer-events: none;
}

.create-header .header-content[b-wmm576agrb] {
    position: relative;
    z-index: 1;
}

.create-header .header-left[b-wmm576agrb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.back-link[b-wmm576agrb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-link:hover[b-wmm576agrb] {
    color: var(--wl-gold);
}

.back-link svg[b-wmm576agrb] {
    width: 1rem;
    height: 1rem;
}

.header-title-group[b-wmm576agrb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-wmm576agrb] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--wl-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
}

.create-header h1[b-wmm576agrb] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-light) 50%, var(--wl-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ============================================
   TWO-COLUMN LAYOUT
   ============================================ */

.form-layout[b-wmm576agrb] {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    align-items: start;
}

.form-main[b-wmm576agrb] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.form-sidebar[b-wmm576agrb] {
    position: sticky;
    top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ============================================
   FORM SECTIONS
   ============================================ */

.form-section[b-wmm576agrb] {
    margin-bottom: 1.5rem;
    padding: 1.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1.25rem;
    transition: all 0.3s ease;
}

.form-section:hover[b-wmm576agrb] {
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
}

.section-title[b-wmm576agrb] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-medium);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.section-icon[b-wmm576agrb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    flex-shrink: 0;
}

.section-icon svg[b-wmm576agrb] {
    width: 1.25rem;
    height: 1.25rem;
}

.type-section-icon[b-wmm576agrb] {
    color: var(--wl-gold);
    background: var(--wl-gold-bg-hover);
}

.name-section-icon[b-wmm576agrb] {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}

.assoc-section-icon[b-wmm576agrb] {
    color: var(--wl-purple);
    background: rgba(var(--wl-purple-rgb), 0.15);
}

.price-section-icon[b-wmm576agrb] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
}

.collab-section-icon[b-wmm576agrb] {
    color: #f97316;
    background: rgba(249, 115, 22, 0.15);
}

.optional-label[b-wmm576agrb] {
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--wl-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* ============================================
   PRODUCT TYPE GRID
   ============================================ */

.product-type-grid[b-wmm576agrb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.product-type-card[b-wmm576agrb] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 1.25rem 0.75rem 1rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 2px solid var(--wl-border-medium);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    text-align: center;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
}

.product-type-card:hover[b-wmm576agrb] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    transform: translateY(-3px);
    box-shadow:
        0 8px 30px var(--wl-shadow-color),
        0 0 20px var(--wl-gold-bg);
}

.product-type-card.selected[b-wmm576agrb] {
    border-color: var(--wl-gold);
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    box-shadow:
        0 0 30px rgba(var(--wl-gold-rgb), 0.2),
        inset 0 0 20px rgba(var(--wl-gold-rgb), 0.05);
}

.product-type-card.selected[b-wmm576agrb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
}

.type-icon-wrapper[b-wmm576agrb] {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--wl-text-secondary);
    transition: color 0.3s ease;
}

.type-icon-wrapper svg[b-wmm576agrb] {
    width: 100%;
    height: 100%;
}

.product-type-card.selected .type-icon-wrapper[b-wmm576agrb] {
    color: var(--wl-gold);
}

/* Per-type icon colors */
.type-tshirt .type-icon-wrapper[b-wmm576agrb] { color: #60a5fa; }
.type-hoodie .type-icon-wrapper[b-wmm576agrb] { color: var(--wl-purple); }
.type-poster .type-icon-wrapper[b-wmm576agrb] { color: #22c55e; }
.type-vinyl .type-icon-wrapper[b-wmm576agrb] { color: #f97316; }
.type-gadget .type-icon-wrapper[b-wmm576agrb] { color: #f43f5e; }
.type-limitededition .type-icon-wrapper[b-wmm576agrb] { color: var(--wl-gold); }

.product-type-card.selected .type-icon-wrapper[b-wmm576agrb] {
    color: var(--wl-gold);
}

.type-name[b-wmm576agrb] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-text-primary);
    line-height: 1;
}

.type-pricing[b-wmm576agrb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.type-price[b-wmm576agrb] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-gold);
}

/* Zeitgeist bar on product card */
.type-zeit-bar[b-wmm576agrb] {
    width: 80%;
    height: 3px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.125rem;
}

.type-zeit-fill[b-wmm576agrb] {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #22c55e, var(--wl-gold));
    transition: width 0.4s ease;
}

.type-zeit-label[b-wmm576agrb] {
    font-size: 0.65rem;
    font-weight: 600;
    color: #22c55e;
    letter-spacing: 0.02em;
}

/* ============================================
   INPUT GROUPS
   ============================================ */

.input-group[b-wmm576agrb] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.input-wrapper[b-wmm576agrb] {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input[b-wmm576agrb] {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: rgba(var(--wl-bg-modal-rgb), 0.8);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    color: var(--wl-text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    outline: none;
}

.form-input:focus[b-wmm576agrb] {
    border-color: var(--wl-gold);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.15);
}

.form-input[b-wmm576agrb]::placeholder {
    color: var(--wl-text-muted);
}

select.form-input[b-wmm576agrb] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

select.form-input option[b-wmm576agrb] {
    background: var(--wl-bg-primary);
    color: var(--wl-text-primary);
}

.assoc-dropdown[b-wmm576agrb] {
    margin-top: 1rem;
}

/* ============================================
   ASSOCIATION OPTIONS
   ============================================ */

.association-options[b-wmm576agrb] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.assoc-option[b-wmm576agrb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(var(--wl-bg-modal-rgb), 0.8);
    border: 2px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    color: var(--wl-text-secondary);
    font-size: 0.9rem;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
}

.assoc-option:hover:not(:disabled)[b-wmm576agrb] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    color: var(--wl-text-primary);
}

.assoc-option.selected[b-wmm576agrb] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.06);
    color: var(--wl-gold);
}

.assoc-option:disabled[b-wmm576agrb] {
    opacity: 0.4;
    cursor: not-allowed;
}

.assoc-option svg[b-wmm576agrb] {
    width: 1.125rem;
    height: 1.125rem;
}

/* ============================================
   DUAL ASSIGN ROW
   ============================================ */

.dual-assign-row[b-wmm576agrb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.assign-group[b-wmm576agrb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.assign-label[b-wmm576agrb] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wl-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.assign-empty-hint[b-wmm576agrb] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    margin: 0;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 0.75rem;
    line-height: 1.5;
}

/* ============================================
   PRICE SLIDER
   ============================================ */

.price-section[b-wmm576agrb] {
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.15);
}

.price-slider-area[b-wmm576agrb] {
    margin-bottom: 1.5rem;
}

.price-range-labels[b-wmm576agrb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.range-min[b-wmm576agrb],
.range-max[b-wmm576agrb] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    font-weight: 500;
}

.range-current[b-wmm576agrb] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--wl-gold);
    letter-spacing: 0.05em;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
    line-height: 1;
}

.slider-wrapper[b-wmm576agrb] {
    position: relative;
    padding: 0.75rem 0;
}

.slider-track[b-wmm576agrb] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 3px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
}

.slider-fill[b-wmm576agrb] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
    border-radius: 3px;
    transition: width 0.1s ease;
}

.slider-suggested[b-wmm576agrb] {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 16px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    border-radius: 1px;
    transform: translate(-50%, -50%);
    cursor: help;
    z-index: 2;
}

.slider-suggested[b-wmm576agrb]::after {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wl-text-secondary);
    border: 2px solid rgba(var(--wl-bg-primary-rgb), 0.8);
}

.price-range-input[b-wmm576agrb] {
    position: relative;
    width: 100%;
    height: 24px;
    background: transparent;
    appearance: none;
    outline: none;
    cursor: pointer;
    z-index: 3;
    margin: 0;
}

.price-range-input[b-wmm576agrb]::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wl-gold);
    border: 3px solid var(--wl-bg-primary);
    box-shadow:
        0 0 10px rgba(var(--wl-gold-rgb), 0.5),
        0 2px 8px var(--wl-shadow-color);
    cursor: grab;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.price-range-input[b-wmm576agrb]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow:
        0 0 20px rgba(var(--wl-gold-rgb), 0.7),
        0 2px 12px var(--wl-shadow-color);
}

.price-range-input[b-wmm576agrb]::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.1);
}

.price-range-input[b-wmm576agrb]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--wl-gold);
    border: 3px solid var(--wl-bg-primary);
    box-shadow:
        0 0 10px rgba(var(--wl-gold-rgb), 0.5),
        0 2px 8px var(--wl-shadow-color);
    cursor: grab;
}

.price-markers[b-wmm576agrb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
}

.marker-label[b-wmm576agrb] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
    font-weight: 500;
}

.marker-suggested[b-wmm576agrb] {
    color: var(--wl-text-secondary);
    cursor: help;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.25rem;
}

/* ============================================
   DEMAND CURVE
   ============================================ */

.demand-curve-section[b-wmm576agrb] {
    padding: 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    cursor: help;
}

.demand-header[b-wmm576agrb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.demand-title[b-wmm576agrb] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wl-text-primary);
}

.demand-factor-value[b-wmm576agrb] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
}

.demand-factor-value.demand-high[b-wmm576agrb] {
    color: #22c55e;
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
}

.demand-factor-value.demand-medium[b-wmm576agrb] {
    color: var(--wl-gold);
    text-shadow: 0 0 15px rgba(var(--wl-gold-rgb), 0.3);
}

.demand-factor-value.demand-low[b-wmm576agrb] {
    color: #f43f5e;
    text-shadow: 0 0 15px rgba(244, 63, 94, 0.3);
}

.demand-bar-container[b-wmm576agrb] {
    margin-bottom: 0.5rem;
}

.demand-bar[b-wmm576agrb] {
    height: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.demand-fill[b-wmm576agrb] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
}

.demand-fill.demand-high[b-wmm576agrb] {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.demand-fill.demand-medium[b-wmm576agrb] {
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
}

.demand-fill.demand-low[b-wmm576agrb] {
    background: linear-gradient(90deg, #f43f5e, #fb7185);
}

.demand-label-row[b-wmm576agrb] {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.375rem;
}

.demand-label-text[b-wmm576agrb] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.demand-label-text.demand-high[b-wmm576agrb] { color: #22c55e; }
.demand-label-text.demand-medium[b-wmm576agrb] { color: var(--wl-gold); }
.demand-label-text.demand-low[b-wmm576agrb] { color: #f43f5e; }

.demand-hint[b-wmm576agrb] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    margin: 0.5rem 0 0;
    line-height: 1.4;
}

/* ============================================
   SIDEBAR PANELS
   ============================================ */

.sidebar-panel[b-wmm576agrb] {
    padding: 1.25rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    transition: border-color 0.3s ease;
}

.sidebar-panel:hover[b-wmm576agrb] {
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
}

.sidebar-title[b-wmm576agrb] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--wl-border-medium);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.sidebar-title svg[b-wmm576agrb] {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

/* ============================================
   ZEITGEIST PREVIEW PANEL
   ============================================ */

.zeit-panel[b-wmm576agrb] {
    border-color: rgba(34, 197, 94, 0.15);
    background: linear-gradient(145deg,
        rgba(34, 197, 94, 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
}

.zeit-preview-grid[b-wmm576agrb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.zeit-row[b-wmm576agrb] {
    display: grid;
    grid-template-columns: 90px 1fr 48px;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    cursor: help;
}

.zeit-row:hover[b-wmm576agrb] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.zeit-row.zeit-active[b-wmm576agrb] {
    background: rgba(var(--wl-gold-rgb), 0.08);
    border-left: 2px solid var(--wl-gold);
    padding-left: calc(0.5rem - 2px);
}

.zeit-type-name[b-wmm576agrb] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--wl-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zeit-row.zeit-active .zeit-type-name[b-wmm576agrb] {
    color: var(--wl-gold);
    font-weight: 600;
}

.zeit-mini-bar[b-wmm576agrb] {
    height: 4px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.zeit-mini-fill[b-wmm576agrb] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.zeit-mini-fill.zeit-hot[b-wmm576agrb] {
    background: linear-gradient(90deg, #22c55e, var(--wl-gold));
}

.zeit-mini-fill.zeit-warm[b-wmm576agrb] {
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
}

.zeit-mini-fill.zeit-cold[b-wmm576agrb] {
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
}

.zeit-mini-value[b-wmm576agrb] {
    font-size: 0.7rem;
    font-weight: 600;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.zeit-mini-value.zeit-hot[b-wmm576agrb] { color: #22c55e; }
.zeit-mini-value.zeit-warm[b-wmm576agrb] { color: var(--wl-gold); }
.zeit-mini-value.zeit-cold[b-wmm576agrb] { color: var(--wl-text-muted); }

.zeit-hint[b-wmm576agrb] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
    margin: 0.75rem 0 0;
    line-height: 1.4;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-medium);
}

/* ============================================
   COST BREAKDOWN PANEL
   ============================================ */

.cost-panel[b-wmm576agrb] {
    border-color: rgba(var(--wl-gold-rgb), 0.2);
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
}

.cost-rows[b-wmm576agrb] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cost-row[b-wmm576agrb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.375rem 0;
}

.cost-label[b-wmm576agrb] {
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

.cost-value[b-wmm576agrb] {
    font-size: 0.85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cost-negative[b-wmm576agrb] { color: #f43f5e; }
.cost-sell[b-wmm576agrb] { color: var(--wl-gold); }
.cost-positive[b-wmm576agrb] { color: #22c55e; }

.cost-divider[b-wmm576agrb] {
    height: 1px;
    background: var(--wl-border-medium);
    margin: 0.25rem 0;
}

.cost-row.cost-highlight[b-wmm576agrb] {
    padding: 0.5rem 0;
}

.cost-row.cost-highlight .cost-label[b-wmm576agrb] {
    font-weight: 600;
    color: var(--wl-text-primary);
}

.cost-row.cost-highlight .cost-value[b-wmm576agrb] {
    font-size: 1rem;
}

.cost-row.cost-final[b-wmm576agrb] {
    padding: 0.625rem 0 0.25rem;
}

.cost-row.cost-final .cost-label[b-wmm576agrb] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cost-row.cost-final .cost-value[b-wmm576agrb] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    letter-spacing: 0.05em;
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
}

/* ============================================
   SUBMIT
   ============================================ */

.sidebar-submit[b-wmm576agrb] {
    position: sticky;
    bottom: 2rem;
}

.submit-button[b-wmm576agrb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1.125rem 2rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 25px rgba(var(--wl-gold-rgb), 0.35),
        0 0 40px var(--wl-gold-bg-hover),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.25);
}

.submit-button:not(:disabled):hover[b-wmm576agrb] {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 8px 40px rgba(var(--wl-gold-rgb), 0.5),
        0 0 60px var(--wl-gold-border),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.35);
}

.submit-button:active[b-wmm576agrb] {
    transform: translateY(-1px) scale(1.01);
}

.submit-button:disabled[b-wmm576agrb] {
    opacity: 0.5;
    cursor: not-allowed;
}

.submit-button svg[b-wmm576agrb] {
    width: 1.375rem;
    height: 1.375rem;
}

.submit-button.submitting[b-wmm576agrb] {
    pointer-events: none;
}

.spinner[b-wmm576agrb] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(var(--wl-bg-primary-rgb), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-wmm576agrb 0.8s linear infinite;
}

@keyframes spin-b-wmm576agrb {
    to { transform: rotate(360deg); }
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-state[b-wmm576agrb] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
}

.loading-spinner[b-wmm576agrb] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-wmm576agrb 1s linear infinite;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .form-layout[b-wmm576agrb] {
        grid-template-columns: 1fr;
    }

    .form-sidebar[b-wmm576agrb] {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .sidebar-submit[b-wmm576agrb] {
        grid-column: 1 / -1;
        position: static;
    }
}

@media (max-width: 768px) {
    .create-design[b-wmm576agrb] {
        padding: 1rem;
    }

    .create-header[b-wmm576agrb] {
        padding: 1.5rem;
    }

    .create-header h1[b-wmm576agrb] {
        font-size: 2.25rem;
    }

    .form-section[b-wmm576agrb] {
        padding: 1.25rem;
    }

    .section-title[b-wmm576agrb] {
        font-size: 1.25rem;
    }

    .product-type-grid[b-wmm576agrb] {
        grid-template-columns: repeat(3, 1fr);
    }

    .association-options[b-wmm576agrb] {
        flex-direction: column;
    }

    .dual-assign-row[b-wmm576agrb] {
        grid-template-columns: 1fr;
    }

    .form-sidebar[b-wmm576agrb] {
        grid-template-columns: 1fr;
    }

    .range-current[b-wmm576agrb] {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .product-type-grid[b-wmm576agrb] {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-type-card[b-wmm576agrb] {
        padding: 1rem 0.5rem 0.75rem;
    }

    .type-icon-wrapper[b-wmm576agrb] {
        width: 2rem;
        height: 2rem;
    }

    .type-name[b-wmm576agrb] {
        font-size: 0.85rem;
    }

    .submit-button[b-wmm576agrb] {
        padding: 1rem 1.5rem;
        font-size: 1.25rem;
    }
}

/* Fame-gate notice: shown when the artist can design merch but cannot yet sell it in the
   online store (fame below threshold). Uses theme variables so it adapts to all themes. */
.store-gate-notice[b-wmm576agrb] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-gold-rgb), 0.08);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 0.6rem;
    color: var(--wl-text-primary);
    font-size: 0.9rem;
}

.store-gate-notice svg[b-wmm576agrb] {
    flex-shrink: 0;
    color: var(--wl-gold);
}
/* /Components/Pages/Career/Music/Merch/Drop/Create.razor.rz.scp.css */
/* ============================================
   CREATE DROP - Luxury Fashion Aesthetic
   Two-column layout with hype & cost sidebar
   ============================================ */

.create-drop[b-czdlhi59b3] {
    max-width: 1300px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
}

/* ============================================
   HEADER
   ============================================ */

.drop-header[b-czdlhi59b3] {
    position: relative;
    padding: 2rem 3rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        rgba(96, 165, 250, 0.06) 50%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 1.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow:
        0 0 60px rgba(var(--wl-gold-rgb), 0.06),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

.drop-header .header-bg-pattern[b-czdlhi59b3] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 30%);
    pointer-events: none;
}

.drop-header .header-content[b-czdlhi59b3] {
    position: relative;
    z-index: 1;
}

.drop-header .header-left[b-czdlhi59b3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.back-link[b-czdlhi59b3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-link:hover[b-czdlhi59b3] {
    color: var(--wl-gold);
}

.back-link svg[b-czdlhi59b3] {
    width: 1rem;
    height: 1rem;
}

.header-title-group[b-czdlhi59b3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-czdlhi59b3] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: #60a5fa;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
}

.drop-header h1[b-czdlhi59b3] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, var(--wl-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ============================================
   TWO-COLUMN LAYOUT
   ============================================ */

.drop-layout[b-czdlhi59b3] {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 2rem;
    align-items: start;
}

.drop-form-main[b-czdlhi59b3] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.drop-sidebar[b-czdlhi59b3] {
    position: sticky;
    top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* ============================================
   FORM SECTIONS
   ============================================ */

.form-section[b-czdlhi59b3] {
    margin-bottom: 1.5rem;
    padding: 1.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1.25rem;
    transition: all 0.3s ease;
}

.form-section:hover[b-czdlhi59b3] {
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
}

.section-title[b-czdlhi59b3] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-medium);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.section-icon[b-czdlhi59b3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    flex-shrink: 0;
}

.section-icon svg[b-czdlhi59b3] {
    width: 1.25rem;
    height: 1.25rem;
}

.name-icon[b-czdlhi59b3] {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}

.date-icon[b-czdlhi59b3] {
    color: var(--wl-purple);
    background: rgba(var(--wl-purple-rgb), 0.15);
}

.items-icon[b-czdlhi59b3] {
    color: var(--wl-gold);
    background: var(--wl-gold-bg-hover);
}

/* ============================================
   INPUT
   ============================================ */

.input-group[b-czdlhi59b3] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.input-wrapper[b-czdlhi59b3] {
    position: relative;
    display: flex;
    align-items: center;
}

.form-input[b-czdlhi59b3] {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background: rgba(var(--wl-bg-modal-rgb), 0.8);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    color: var(--wl-text-primary);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.3s ease;
    outline: none;
}

.form-input:focus[b-czdlhi59b3] {
    border-color: var(--wl-gold);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.15);
}

.form-input[b-czdlhi59b3]::placeholder {
    color: var(--wl-text-muted);
}

select.form-input[b-czdlhi59b3] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

select.form-input option[b-czdlhi59b3] {
    background: var(--wl-bg-primary);
    color: var(--wl-text-primary);
}

/* Date inputs */
input[type="date"].form-input[b-czdlhi59b3] {
    color-scheme: dark;
}

/* ============================================
   DATE RANGE
   ============================================ */

.date-range-row[b-czdlhi59b3] {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
}

.date-field[b-czdlhi59b3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.date-label[b-czdlhi59b3] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wl-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.date-separator[b-czdlhi59b3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.875rem;
    color: var(--wl-text-muted);
}

.date-separator svg[b-czdlhi59b3] {
    width: 1.25rem;
    height: 1.25rem;
}

.date-duration[b-czdlhi59b3] {
    display: block;
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    text-align: right;
}

/* ============================================
   DROP ITEMS
   ============================================ */

.drop-items-empty[b-czdlhi59b3] {
    padding: 1.5rem;
    text-align: center;
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.drop-items-list[b-czdlhi59b3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

.drop-item-row[b-czdlhi59b3] {
    padding: 1.25rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    transition: border-color 0.3s ease;
}

.drop-item-row:hover[b-czdlhi59b3] {
    border-color: rgba(var(--wl-gold-rgb), 0.25);
}

.drop-item-info[b-czdlhi59b3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.drop-item-name[b-czdlhi59b3] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--wl-text-primary);
}

.product-type-badge[b-czdlhi59b3] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: var(--wl-text-secondary);
    border: 1px solid var(--wl-border-medium);
}

.type-tshirt[b-czdlhi59b3] { color: #60a5fa; border-color: rgba(96, 165, 250, 0.3); background: rgba(96, 165, 250, 0.1); }
.type-hoodie[b-czdlhi59b3] { color: var(--wl-purple); border-color: rgba(var(--wl-purple-rgb), 0.3); background: rgba(var(--wl-purple-rgb), 0.1); }
.type-poster[b-czdlhi59b3] { color: #22c55e; border-color: rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.1); }
.type-vinyl[b-czdlhi59b3] { color: #f97316; border-color: rgba(249, 115, 22, 0.3); background: rgba(249, 115, 22, 0.1); }
.type-gadget[b-czdlhi59b3] { color: #f43f5e; border-color: rgba(244, 63, 94, 0.3); background: rgba(244, 63, 94, 0.1); }
.type-limitededition[b-czdlhi59b3] { color: var(--wl-gold); border-color: rgba(var(--wl-gold-rgb), 0.3); background: rgba(var(--wl-gold-rgb), 0.1); }

.drop-item-controls[b-czdlhi59b3] {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.control-field[b-czdlhi59b3] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
}

.control-label[b-czdlhi59b3] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.control-input[b-czdlhi59b3] {
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
}

/* Number input styling */
input[type="number"].form-input[b-czdlhi59b3] {
    appearance: textfield;
}

input[type="number"].form-input[b-czdlhi59b3]::-webkit-inner-spin-button,
input[type="number"].form-input[b-czdlhi59b3]::-webkit-outer-spin-button {
    opacity: 1;
}

.btn-remove-item[b-czdlhi59b3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(244, 63, 94, 0.1);
    border: 1px solid rgba(244, 63, 94, 0.25);
    border-radius: 0.625rem;
    color: #f43f5e;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-bottom: 2px;
}

.btn-remove-item:hover[b-czdlhi59b3] {
    background: rgba(244, 63, 94, 0.2);
    border-color: #f43f5e;
}

.btn-remove-item svg[b-czdlhi59b3] {
    width: 1rem;
    height: 1rem;
}

.item-subtotal[b-czdlhi59b3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-medium);
    font-size: 0.75rem;
    flex-wrap: wrap;
}

.subtotal-label[b-czdlhi59b3] {
    color: var(--wl-text-muted);
}

.subtotal-cost[b-czdlhi59b3] {
    color: #f43f5e;
    font-weight: 600;
}

.subtotal-sep[b-czdlhi59b3] {
    width: 1px;
    height: 12px;
    background: var(--wl-border-medium);
    margin: 0 0.25rem;
}

.subtotal-revenue[b-czdlhi59b3] {
    color: #22c55e;
    font-weight: 600;
}

/* ============================================
   ADD ITEM
   ============================================ */

.add-item-section[b-czdlhi59b3] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.add-item-select[b-czdlhi59b3] {
    flex: 1;
}

.btn-add-item[b-czdlhi59b3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: rgba(var(--wl-gold-rgb), 0.08);
    border: 2px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.75rem;
    color: var(--wl-gold);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-add-item:hover:not(:disabled)[b-czdlhi59b3] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.15);
}

.btn-add-item:disabled[b-czdlhi59b3] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-add-item svg[b-czdlhi59b3] {
    width: 1.125rem;
    height: 1.125rem;
}

/* ============================================
   SIDEBAR PANELS
   ============================================ */

.sidebar-panel[b-czdlhi59b3] {
    padding: 1.25rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    transition: border-color 0.3s ease;
}

.sidebar-panel:hover[b-czdlhi59b3] {
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
}

.sidebar-title[b-czdlhi59b3] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0 0 1rem 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--wl-border-medium);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.sidebar-title svg[b-czdlhi59b3] {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

/* ============================================
   HYPE PREVIEW
   ============================================ */

.hype-panel[b-czdlhi59b3] {
    border-color: rgba(249, 115, 22, 0.2);
    background: linear-gradient(145deg,
        rgba(249, 115, 22, 0.04) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
}

.hype-preview[b-czdlhi59b3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    cursor: help;
}

.hype-big-value[b-czdlhi59b3] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.5rem;
    line-height: 1;
    letter-spacing: 0.02em;
}

.hype-big-value.hype-fire[b-czdlhi59b3] {
    color: #f97316;
    text-shadow: 0 0 30px rgba(249, 115, 22, 0.5);
}

.hype-big-value.hype-hot[b-czdlhi59b3] {
    color: #eab308;
    text-shadow: 0 0 25px rgba(234, 179, 8, 0.4);
}

.hype-big-value.hype-warm[b-czdlhi59b3] {
    color: var(--wl-gold);
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.3);
}

.hype-big-value.hype-cold[b-czdlhi59b3] {
    color: var(--wl-text-muted);
}

.hype-bar-preview[b-czdlhi59b3] {
    width: 100%;
    height: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.hype-fill-preview[b-czdlhi59b3] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease, background 0.3s ease;
}

.hype-fill-preview.hype-fire[b-czdlhi59b3] {
    background: linear-gradient(90deg, #f97316, #ef4444);
}

.hype-fill-preview.hype-hot[b-czdlhi59b3] {
    background: linear-gradient(90deg, #eab308, #f97316);
}

.hype-fill-preview.hype-warm[b-czdlhi59b3] {
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
}

.hype-fill-preview.hype-cold[b-czdlhi59b3] {
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
}

.hype-level-text[b-czdlhi59b3] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hype-level-text.hype-fire[b-czdlhi59b3] { color: #f97316; }
.hype-level-text.hype-hot[b-czdlhi59b3] { color: #eab308; }
.hype-level-text.hype-warm[b-czdlhi59b3] { color: var(--wl-gold); }
.hype-level-text.hype-cold[b-czdlhi59b3] { color: var(--wl-text-muted); }

.hype-hint[b-czdlhi59b3] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
    margin: 0.75rem 0 0;
    line-height: 1.4;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-medium);
    text-align: center;
}

/* ============================================
   COST SUMMARY
   ============================================ */

.cost-summary-panel[b-czdlhi59b3] {
    border-color: rgba(var(--wl-gold-rgb), 0.2);
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
}

.summary-rows[b-czdlhi59b3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.summary-row[b-czdlhi59b3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0;
}

.summary-label[b-czdlhi59b3] {
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

.summary-value[b-czdlhi59b3] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    font-variant-numeric: tabular-nums;
}

.cost-text[b-czdlhi59b3] {
    color: #f43f5e;
}

.revenue-text[b-czdlhi59b3] {
    color: var(--wl-gold);
}

.summary-divider[b-czdlhi59b3] {
    height: 1px;
    background: var(--wl-border-medium);
    margin: 0.125rem 0;
}

.summary-row.summary-profit[b-czdlhi59b3] {
    padding: 0.5rem 0 0;
}

.summary-row.summary-profit .summary-label[b-czdlhi59b3] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profit-positive[b-czdlhi59b3] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    color: #22c55e;
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
    letter-spacing: 0.05em;
}

.profit-negative[b-czdlhi59b3] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    color: #f43f5e;
    text-shadow: 0 0 15px rgba(244, 63, 94, 0.3);
    letter-spacing: 0.05em;
}

/* ============================================
   SUBMIT
   ============================================ */

.sidebar-submit[b-czdlhi59b3] {
    position: sticky;
    bottom: 2rem;
}

.submit-button[b-czdlhi59b3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 1.125rem 2rem;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, var(--wl-gold) 100%);
    color: #fff;
    border: none;
    border-radius: 1rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 25px rgba(96, 165, 250, 0.3),
        0 0 40px rgba(96, 165, 250, 0.1),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.25);
}

.submit-button:not(:disabled):hover[b-czdlhi59b3] {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 8px 40px rgba(96, 165, 250, 0.45),
        0 0 60px rgba(96, 165, 250, 0.15),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.35);
}

.submit-button:active[b-czdlhi59b3] {
    transform: translateY(-1px) scale(1.01);
}

.submit-button:disabled[b-czdlhi59b3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.submit-button svg[b-czdlhi59b3] {
    width: 1.375rem;
    height: 1.375rem;
}

.submit-button.submitting[b-czdlhi59b3] {
    pointer-events: none;
}

.spinner[b-czdlhi59b3] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-czdlhi59b3 0.8s linear infinite;
}

@keyframes spin-b-czdlhi59b3 {
    to { transform: rotate(360deg); }
}

/* ============================================
   EMPTY + LOADING STATES
   ============================================ */

.loading-state[b-czdlhi59b3] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
}

.loading-spinner[b-czdlhi59b3] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-czdlhi59b3 1s linear infinite;
}

.empty-state[b-czdlhi59b3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 4rem 2rem;
    text-align: center;
}

.empty-icon[b-czdlhi59b3] {
    width: 4rem;
    height: 4rem;
    color: var(--wl-text-muted);
    opacity: 0.5;
}

.empty-icon svg[b-czdlhi59b3] {
    width: 100%;
    height: 100%;
}

.empty-state h3[b-czdlhi59b3] {
    font-size: 1rem;
    color: var(--wl-text-secondary);
    margin: 0;
}

.empty-cta[b-czdlhi59b3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.3);
}

.empty-cta:hover[b-czdlhi59b3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(var(--wl-gold-rgb), 0.4);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .drop-layout[b-czdlhi59b3] {
        grid-template-columns: 1fr;
    }

    .drop-sidebar[b-czdlhi59b3] {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .sidebar-submit[b-czdlhi59b3] {
        grid-column: 1 / -1;
        position: static;
    }
}

@media (max-width: 768px) {
    .create-drop[b-czdlhi59b3] {
        padding: 1rem;
    }

    .drop-header[b-czdlhi59b3] {
        padding: 1.5rem;
    }

    .drop-header h1[b-czdlhi59b3] {
        font-size: 2.25rem;
    }

    .form-section[b-czdlhi59b3] {
        padding: 1.25rem;
    }

    .section-title[b-czdlhi59b3] {
        font-size: 1.25rem;
    }

    .date-range-row[b-czdlhi59b3] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .date-separator[b-czdlhi59b3] {
        transform: rotate(90deg);
        padding: 0;
    }

    .drop-item-controls[b-czdlhi59b3] {
        flex-wrap: wrap;
    }

    .add-item-section[b-czdlhi59b3] {
        flex-direction: column;
    }

    .btn-add-item[b-czdlhi59b3] {
        width: 100%;
        justify-content: center;
    }

    .drop-sidebar[b-czdlhi59b3] {
        grid-template-columns: 1fr;
    }

    .submit-button[b-czdlhi59b3] {
        padding: 1rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .drop-item-controls[b-czdlhi59b3] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .btn-remove-item[b-czdlhi59b3] {
        width: 100%;
        height: auto;
        padding: 0.5rem;
    }

    .item-subtotal[b-czdlhi59b3] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .subtotal-sep[b-czdlhi59b3] {
        display: none;
    }
}
/* /Components/Pages/Career/Music/Merch/Index.razor.rz.scp.css */
/* ============================================
   MERCH HUB - Luxury Fashion Brand x Game UI
   Tab-based merch empire with gold accents,
   editorial grid layouts, and premium card design
   ============================================ */

.merch-hub[b-kvg3wvsgri] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
}

/* ============================================
   HEADER
   ============================================ */

.hub-header[b-kvg3wvsgri] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 3rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.12) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 1.5rem 1.5rem 0 0;
    margin-bottom: 0;
    overflow: hidden;
    box-shadow:
        0 0 60px rgba(var(--wl-gold-rgb), 0.08),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

.header-bg-pattern[b-kvg3wvsgri] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, var(--wl-gold-bg-hover) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 30%),
        repeating-linear-gradient(90deg, transparent, transparent 80px, rgba(var(--wl-gold-rgb), 0.03) 80px, rgba(var(--wl-gold-rgb), 0.03) 81px);
    pointer-events: none;
}

.header-accent-line[b-kvg3wvsgri] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--wl-gold) 20%, var(--wl-gold-light) 50%, var(--wl-gold) 80%, transparent 100%);
    opacity: 0.6;
}

.header-content[b-kvg3wvsgri] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 2rem;
}

.header-left[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}


.header-title-group[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-kvg3wvsgri] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--wl-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
}

.hub-header h1[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-light) 50%, var(--wl-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.header-subtitle[b-kvg3wvsgri] {
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-size: 0.95rem;
    margin: 0.25rem 0 0 0;
    font-weight: 400;
    font-style: italic;
}

.header-stats[b-kvg3wvsgri] {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.stat-card[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 1rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 1rem;
    min-width: 100px;
    transition: all 0.3s ease;
    cursor: help;
}

.stat-card:hover[b-kvg3wvsgri] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px var(--wl-shadow-color), 0 0 20px var(--wl-gold-bg);
}

.stat-value[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
    line-height: 1;
}

.stat-revenue .stat-value[b-kvg3wvsgri] {
    color: var(--wl-gold);
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.3);
}

.stat-label[b-kvg3wvsgri] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-text-muted);
    font-weight: 500;
}


/* ============================================
   TAB NAVIGATION - Fashion Lookbook Style
   ============================================ */

.tab-nav[b-kvg3wvsgri] {
    display: flex;
    gap: 0;
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    border: 1px solid var(--wl-border-medium);
    border-top: none;
    border-radius: 0 0 1.25rem 1.25rem;
    overflow: hidden;
    margin-bottom: 2rem;
}

.tab-btn[b-kvg3wvsgri] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem 1.25rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--wl-text-muted);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.tab-btn svg[b-kvg3wvsgri] {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.tab-btn:hover[b-kvg3wvsgri] {
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.tab-btn.tab-active[b-kvg3wvsgri] {
    color: var(--wl-gold);
    border-bottom-color: var(--wl-gold);
    background: linear-gradient(180deg, transparent 0%, rgba(var(--wl-gold-rgb), 0.06) 100%);
}

.tab-btn.tab-locked[b-kvg3wvsgri] {
    opacity: 0.5;
}

.tab-lock-icon[b-kvg3wvsgri] {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.6;
}

.tab-count[b-kvg3wvsgri] {
    padding: 0.125rem 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 2rem;
    font-family: inherit;
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    letter-spacing: 0;
}

.tab-active .tab-count[b-kvg3wvsgri] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
}

.tab-badge-live[b-kvg3wvsgri] {
    padding: 0.15rem 0.5rem;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-radius: 2rem;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    animation: pulse-live-b-kvg3wvsgri 2s ease-in-out infinite;
}

@keyframes pulse-live-b-kvg3wvsgri {
    0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.7); }
}

.offers-count[b-kvg3wvsgri] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    color: var(--wl-purple);
}

/* ============================================
   TAB CONTENT & PANELS
   ============================================ */

.tab-content[b-kvg3wvsgri] {
    animation: fadeIn-b-kvg3wvsgri 0.3s ease;
}

@keyframes fadeIn-b-kvg3wvsgri {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.tab-panel[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.panel-header[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.panel-title[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ============================================
   CTA BUTTONS
   ============================================ */

.cta-button[b-kvg3wvsgri] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.75rem;
    border-radius: 0.75rem;
    text-decoration: none;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
}

.cta-button svg[b-kvg3wvsgri] {
    width: 1rem;
    height: 1rem;
}

.cta-primary[b-kvg3wvsgri] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.3), 0 0 30px var(--wl-gold-bg-hover);
}

.cta-primary:hover[b-kvg3wvsgri] {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 35px rgba(var(--wl-gold-rgb), 0.5), 0 0 50px var(--wl-gold-border);
}

/* ============================================
   DESIGNS TAB
   ============================================ */

.designs-grid[b-kvg3wvsgri] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.design-card[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.design-card[b-kvg3wvsgri]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.design-card:hover[b-kvg3wvsgri] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px var(--wl-shadow-color), 0 0 20px var(--wl-gold-bg);
}

.design-card:hover[b-kvg3wvsgri]::before { opacity: 1; }

.design-card-top[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.product-type-badge[b-kvg3wvsgri] {
    padding: 0.2rem 0.625rem;
    border-radius: 2rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.type-tshirt[b-kvg3wvsgri] { background: rgba(96, 165, 250, 0.12); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.25); }
.type-hoodie[b-kvg3wvsgri] { background: rgba(var(--wl-purple-rgb), 0.12); color: var(--wl-purple); border: 1px solid rgba(var(--wl-purple-rgb), 0.25); }
.type-poster[b-kvg3wvsgri] { background: rgba(34, 197, 94, 0.12); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.25); }
.type-vinyl[b-kvg3wvsgri] { background: rgba(249, 115, 22, 0.12); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.25); }
.type-gadget[b-kvg3wvsgri] { background: rgba(244, 63, 94, 0.12); color: #f43f5e; border: 1px solid rgba(244, 63, 94, 0.25); }
.type-limitededition[b-kvg3wvsgri] { background: rgba(var(--wl-gold-rgb), 0.12); color: var(--wl-gold); border: 1px solid rgba(var(--wl-gold-rgb), 0.25); }

.badge-sm[b-kvg3wvsgri] { font-size: 0.6rem; padding: 0.125rem 0.5rem; }

.collection-badge[b-kvg3wvsgri] {
    padding: 0.2rem 0.625rem;
    border-radius: 2rem;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.coll-standard[b-kvg3wvsgri] { background: rgba(var(--wl-contrast-rgb), 0.06); color: var(--wl-text-muted); border: 1px solid rgba(var(--wl-contrast-rgb), 0.12); }
.coll-seasonal[b-kvg3wvsgri] { background: rgba(96, 165, 250, 0.1); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.2); }
.coll-exclusive[b-kvg3wvsgri] { background: rgba(var(--wl-gold-rgb), 0.1); color: var(--wl-gold); border: 1px solid rgba(var(--wl-gold-rgb), 0.2); }

.collab-badge[b-kvg3wvsgri] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.625rem;
    border-radius: 2rem;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(var(--wl-purple-rgb), 0.1);
    color: var(--wl-purple);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
}

.badge-icon[b-kvg3wvsgri] { width: 0.75rem; height: 0.75rem; }

.design-name[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
}

.design-pricing[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.price-item[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.price-label[b-kvg3wvsgri] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
}

.price-value[b-kvg3wvsgri] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.cost-value[b-kvg3wvsgri] { color: var(--wl-text-secondary); }
.sell-value[b-kvg3wvsgri] { color: var(--wl-gold); }

.price-divider[b-kvg3wvsgri] {
    width: 1px;
    height: 2rem;
    background: var(--wl-border-medium);
    flex-shrink: 0;
}

/* Zeitgeist alignment bar */
.design-zeitgeist[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: rgba(var(--wl-gold-rgb), 0.04);
    border-radius: 0.5rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.1);
}

.zeit-label[b-kvg3wvsgri] {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
    white-space: nowrap;
}

.zeit-bar[b-kvg3wvsgri] {
    flex: 1;
    height: 4px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.zeit-fill[b-kvg3wvsgri] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold-dark), var(--wl-gold), var(--wl-gold-light));
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.zeit-value[b-kvg3wvsgri] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wl-gold);
    white-space: nowrap;
}

/* Design associations */
.design-assoc[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.375rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.assoc-icon[b-kvg3wvsgri] { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }
.assoc-tour[b-kvg3wvsgri] { color: var(--wl-purple); }
.assoc-release[b-kvg3wvsgri] { color: #60a5fa; }

.design-footer[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--wl-border-medium);
}

.design-units[b-kvg3wvsgri] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.btn-deactivate[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: transparent;
    color: var(--wl-text-muted);
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    font-family: inherit;
}

.btn-deactivate:hover:not(:disabled)[b-kvg3wvsgri] {
    background: rgba(244, 63, 94, 0.1);
    color: #f43f5e;
    border-color: rgba(244, 63, 94, 0.2);
}

.btn-deactivate:disabled[b-kvg3wvsgri] { opacity: 0.3; cursor: not-allowed; }
.btn-deactivate svg[b-kvg3wvsgri] { width: 0.875rem; height: 0.875rem; }

/* ============================================
   DROPS TAB
   ============================================ */

.drop-hero[b-kvg3wvsgri] {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    box-shadow: 0 4px 30px var(--wl-shadow-color), 0 0 40px rgba(var(--wl-gold-rgb), 0.06);
}

.drop-hero-bg[b-kvg3wvsgri] {
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 50%,
        rgba(var(--wl-bg-modal-rgb), 1) 100%);
    z-index: 0;
}

.drop-hero.drop-viral .drop-hero-bg[b-kvg3wvsgri] {
    background: linear-gradient(145deg,
        rgba(244, 63, 94, 0.1) 0%,
        rgba(var(--wl-gold-rgb), 0.06) 30%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 60%,
        rgba(var(--wl-bg-modal-rgb), 1) 100%);
}

.drop-hero-content[b-kvg3wvsgri] {
    position: relative;
    z-index: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.drop-hero-header[b-kvg3wvsgri] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.drop-hero-title-group[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.drop-status-badge[b-kvg3wvsgri] {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.status-announced[b-kvg3wvsgri] { background: rgba(96, 165, 250, 0.12); color: #60a5fa; border: 1px solid rgba(96, 165, 250, 0.25); }
.status-active[b-kvg3wvsgri] { background: rgba(34, 197, 94, 0.12); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.25); }
.status-completed[b-kvg3wvsgri] { background: rgba(var(--wl-gold-rgb), 0.12); color: var(--wl-gold); border: 1px solid rgba(var(--wl-gold-rgb), 0.25); }
.status-cancelled[b-kvg3wvsgri] { background: rgba(var(--wl-contrast-rgb), 0.06); color: var(--wl-text-muted); border: 1px solid rgba(var(--wl-contrast-rgb), 0.12); }

.viral-badge[b-kvg3wvsgri] {
    display: inline-flex;
    align-self: flex-start;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.15), rgba(249, 115, 22, 0.15));
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.3);
    animation: pulse-live-b-kvg3wvsgri 2s ease-in-out infinite;
}

.drop-hero-name[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.25rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

.drop-dates[b-kvg3wvsgri] {
    flex-shrink: 0;
}

.drop-date[b-kvg3wvsgri] {
    font-size: 0.85rem;
    color: var(--wl-text-secondary);
}

/* Hype Meter */
.hype-meter[b-kvg3wvsgri] {
    cursor: help;
}

.hype-label-row[b-kvg3wvsgri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.hype-label[b-kvg3wvsgri] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
    font-weight: 500;
}

.hype-value[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
}

.hype-bar[b-kvg3wvsgri] {
    width: 100%;
    height: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.hype-fill[b-kvg3wvsgri] {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.hype-fire[b-kvg3wvsgri] { color: #ef4444; }
.hype-fire.hype-fill[b-kvg3wvsgri] { background: linear-gradient(90deg, #f97316, #ef4444, #dc2626); box-shadow: 0 0 12px rgba(239, 68, 68, 0.4); }
.hype-hot[b-kvg3wvsgri] { color: #f97316; }
.hype-hot.hype-fill[b-kvg3wvsgri] { background: linear-gradient(90deg, var(--wl-gold), #f97316); }
.hype-warm[b-kvg3wvsgri] { color: var(--wl-gold); }
.hype-warm.hype-fill[b-kvg3wvsgri] { background: linear-gradient(90deg, var(--wl-gold-dark), var(--wl-gold)); }
.hype-cold[b-kvg3wvsgri] { color: var(--wl-text-muted); }
.hype-cold.hype-fill[b-kvg3wvsgri] { background: rgba(var(--wl-bg-tertiary-rgb), 0.5); }

/* Drop Items Grid */
.drop-items-grid[b-kvg3wvsgri] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.drop-item-card[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.drop-item-card:hover[b-kvg3wvsgri] {
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
}

.drop-item-header[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.drop-item-name[b-kvg3wvsgri] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--wl-text-primary);
}

.sell-through-bar[b-kvg3wvsgri] {
    width: 100%;
    height: 4px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 2px;
    overflow: hidden;
}

.sell-through-fill[b-kvg3wvsgri] {
    height: 100%;
    background: linear-gradient(90deg, #22c55e, #10b981);
    border-radius: 2px;
    transition: width 0.4s ease;
}

.drop-item-stats[b-kvg3wvsgri] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

.sold-out-badge[b-kvg3wvsgri] {
    padding: 0.15rem 0.5rem;
    background: linear-gradient(135deg, var(--wl-gold), #B8962E);
    border-radius: 2rem;
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--wl-bg-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.drop-hero-totals[b-kvg3wvsgri] {
    display: flex;
    gap: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    flex-wrap: wrap;
    align-items: center;
}

.drop-total[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.drop-total-label[b-kvg3wvsgri] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
}

.drop-total-value[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
}

.sold-out-total[b-kvg3wvsgri] {
    margin-left: auto;
}

.sold-out-mega[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: var(--wl-gold);
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Drop History */
.drop-history-section[b-kvg3wvsgri] {
    padding: 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
}

.sub-section-title[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 1.25rem 0;
}

.sub-section-title svg[b-kvg3wvsgri] { width: 1.125rem; height: 1.125rem; color: var(--wl-gold); }

.history-list[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-row[b-kvg3wvsgri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-bg-modal-rgb), 0.5);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 0.625rem;
    transition: all 0.2s ease;
}

.history-row:hover[b-kvg3wvsgri] {
    border-color: rgba(var(--wl-contrast-rgb), 0.1);
}

.history-info[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.history-name[b-kvg3wvsgri] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--wl-text-primary);
}

.history-stats[b-kvg3wvsgri] {
    display: flex;
    gap: 1.25rem;
    font-size: 0.85rem;
    color: var(--wl-text-secondary);
}

.no-history-text[b-kvg3wvsgri] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 2rem;
}

/* ============================================
   STORE TAB
   ============================================ */

.store-locked-overlay[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 2rem;
    text-align: center;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.02) 0%,
        rgba(var(--wl-gold-rgb), 0.02) 100%);
    border: 2px dashed rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 1.25rem;
}

.locked-icon-wrapper[b-kvg3wvsgri] {
    width: 3.5rem;
    height: 3.5rem;
    color: var(--wl-text-muted);
    opacity: 0.4;
}

.locked-icon-wrapper svg[b-kvg3wvsgri] { width: 100%; height: 100%; }

.locked-title[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

.locked-hint[b-kvg3wvsgri] {
    font-size: 0.9rem;
    color: var(--wl-text-muted);
    margin: 0;
}

.fame-progress-bar[b-kvg3wvsgri] {
    width: 200px;
    height: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.fame-progress-fill[b-kvg3wvsgri] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold-dark), var(--wl-gold));
    border-radius: 3px;
}

.fame-progress-label[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-gold);
    letter-spacing: 0.05em;
}

.status-indicator[b-kvg3wvsgri] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    display: inline-block;
}

.status-indicator.active[b-kvg3wvsgri] {
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
    animation: pulse-green-b-kvg3wvsgri 2s ease-in-out infinite;
}

@keyframes pulse-green-b-kvg3wvsgri {
    0%, 100% { box-shadow: 0 0 10px rgba(34, 197, 94, 0.5); }
    50% { box-shadow: 0 0 20px rgba(34, 197, 94, 0.8); }
}

.store-overview-stats[b-kvg3wvsgri] {
    display: flex;
    gap: 2rem;
}

.store-overview-stat[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
}

.store-stat-value[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
}

.store-stat-label[b-kvg3wvsgri] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
}

.store-items-grid[b-kvg3wvsgri] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

.store-item-card[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.25rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.store-item-card:hover[b-kvg3wvsgri] {
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
}

.store-item-header[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.stock-badge[b-kvg3wvsgri] {
    padding: 0.2rem 0.625rem;
    border-radius: 2rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stock-ok[b-kvg3wvsgri] { background: rgba(34, 197, 94, 0.1); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.2); }
.stock-low[b-kvg3wvsgri] { background: rgba(249, 115, 22, 0.1); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.2); animation: pulse-live-b-kvg3wvsgri 2s ease-in-out infinite; }

.store-item-name[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
}

.store-item-price[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
}

.store-price-value[b-kvg3wvsgri] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.demand-queue[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: rgba(var(--wl-purple-rgb), 0.08);
    border-radius: 0.5rem;
    font-size: 0.8rem;
    color: var(--wl-purple);
}

.demand-icon[b-kvg3wvsgri] { width: 0.875rem; height: 0.875rem; flex-shrink: 0; }

.store-item-actions[b-kvg3wvsgri] {
    margin-top: auto;
    padding-top: 0.5rem;
}

.btn-restock[b-kvg3wvsgri] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-restock:hover:not(:disabled)[b-kvg3wvsgri] { background: rgba(34, 197, 94, 0.2); border-color: rgba(34, 197, 94, 0.35); }
.btn-restock:disabled[b-kvg3wvsgri] { opacity: 0.5; cursor: not-allowed; }
.btn-restock svg[b-kvg3wvsgri] { width: 0.875rem; height: 0.875rem; }

.unstocked-section[b-kvg3wvsgri] {
    padding: 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
}

.unstocked-list[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.unstocked-row[b-kvg3wvsgri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-bg-modal-rgb), 0.5);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 0.625rem;
}

.unstocked-info[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.unstocked-name[b-kvg3wvsgri] {
    font-weight: 500;
    color: var(--wl-text-primary);
    font-size: 0.9rem;
}

.btn-add-store[b-kvg3wvsgri] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn-add-store:hover[b-kvg3wvsgri] { background: rgba(var(--wl-gold-rgb), 0.2); border-color: rgba(var(--wl-gold-rgb), 0.35); }
.btn-add-store svg[b-kvg3wvsgri] { width: 0.875rem; height: 0.875rem; }

/* ============================================
   COLLABS TAB
   ============================================ */

.no-active-collabs[b-kvg3wvsgri] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    padding: 1rem 0;
}

.collabs-active-section[b-kvg3wvsgri],
.collabs-offers-section[b-kvg3wvsgri] {
    padding: 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
}

.collabs-grid[b-kvg3wvsgri],
.offers-grid[b-kvg3wvsgri] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}

.collab-card[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.collab-card:hover[b-kvg3wvsgri] { border-color: rgba(var(--wl-contrast-rgb), 0.15); }
.collab-expired[b-kvg3wvsgri] { opacity: 0.6; }

.collab-card-header[b-kvg3wvsgri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.collab-partner-name[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}

.collab-expires[b-kvg3wvsgri] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.expired-badge[b-kvg3wvsgri] {
    padding: 0.15rem 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border-radius: 2rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.collab-stats-row[b-kvg3wvsgri] {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.collab-stat[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.collab-stat-label[b-kvg3wvsgri] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
}

.collab-stat-value[b-kvg3wvsgri] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.collab-designs-count[b-kvg3wvsgri] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    padding-top: 0.5rem;
    border-top: 1px solid var(--wl-border-medium);
}

/* Invite Form */
.collabs-invite-section[b-kvg3wvsgri] {
    padding: 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
}

.invite-form[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.invite-field[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.invite-label[b-kvg3wvsgri] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
    font-weight: 500;
}

.invite-input[b-kvg3wvsgri],
.invite-field[b-kvg3wvsgri]  input[type="text"] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.625rem;
    color: var(--wl-text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.invite-input:focus[b-kvg3wvsgri],
.invite-field[b-kvg3wvsgri]  input[type="text"]:focus {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.08);
}

.invite-input[b-kvg3wvsgri]::placeholder,
.invite-field[b-kvg3wvsgri]  input[type="text"]::placeholder {
    color: var(--wl-text-muted);
    opacity: 0.6;
}

.invite-slider[b-kvg3wvsgri] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.invite-slider[b-kvg3wvsgri]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--wl-gold), #B8962E);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--wl-gold-rgb), 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.invite-slider[b-kvg3wvsgri]::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 12px rgba(var(--wl-gold-rgb), 0.6);
}

.invite-slider[b-kvg3wvsgri]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, var(--wl-gold), #B8962E);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--wl-gold-rgb), 0.4);
}

.invite-split-labels[b-kvg3wvsgri] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--wl-text-secondary);
}

.btn-send-invite[b-kvg3wvsgri] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.3);
    margin-top: 0.5rem;
}

.btn-send-invite svg[b-kvg3wvsgri] {
    width: 1rem;
    height: 1rem;
}

.btn-send-invite:hover:not(:disabled)[b-kvg3wvsgri] {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 35px rgba(var(--wl-gold-rgb), 0.5);
}

.btn-send-invite:disabled[b-kvg3wvsgri] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-end-collab[b-kvg3wvsgri] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(244, 63, 94, 0.08);
    color: #f43f5e;
    border: 1px solid rgba(244, 63, 94, 0.2);
    border-radius: 0.625rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 0.25rem;
}

.btn-end-collab svg[b-kvg3wvsgri] {
    width: 0.875rem;
    height: 0.875rem;
}

.btn-end-collab:hover:not(:disabled)[b-kvg3wvsgri] {
    background: rgba(244, 63, 94, 0.15);
    border-color: rgba(244, 63, 94, 0.35);
}

.btn-end-collab:disabled[b-kvg3wvsgri] {
    opacity: 0.4;
    cursor: not-allowed;
}

.fame-gate-hint[b-kvg3wvsgri] {
    color: var(--wl-text-muted);
    font-size: 0.85rem;
    padding: 1rem 0;
    font-style: italic;
}

.collab-invitation-actions[b-kvg3wvsgri] {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.collab-invitation-actions .btn-accept-offer[b-kvg3wvsgri] {
    flex: 1;
}

.collab-invitation-actions .btn-deactivate[b-kvg3wvsgri] {
    width: auto;
    height: auto;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(244, 63, 94, 0.2);
    background: rgba(244, 63, 94, 0.08);
    color: #f43f5e;
    border-radius: 0.625rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Offer Cards */
.offer-card[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.5rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-purple-rgb), 0.04) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.15);
    border-radius: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.offer-card:hover[b-kvg3wvsgri] {
    border-color: rgba(var(--wl-purple-rgb), 0.35);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px var(--wl-shadow-color), 0 0 20px rgba(var(--wl-purple-rgb), 0.1);
}

.offer-header[b-kvg3wvsgri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offer-partner[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0;
}

.offer-fame[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-gold);
    letter-spacing: 0.05em;
}

.offer-style-match[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.style-label[b-kvg3wvsgri] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
    white-space: nowrap;
}

.style-bar[b-kvg3wvsgri] {
    flex: 1;
    height: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.style-fill[b-kvg3wvsgri] {
    height: 100%;
    background: linear-gradient(90deg, rgba(var(--wl-purple-rgb), 0.7), var(--wl-purple));
    border-radius: 3px;
    transition: width 0.4s ease;
}

.style-value[b-kvg3wvsgri] {
    font-size: 0.85rem;
    font-weight: 700;
}

.match-excellent[b-kvg3wvsgri] { color: #22c55e; }
.match-good[b-kvg3wvsgri] { color: var(--wl-gold); }
.match-low[b-kvg3wvsgri] { color: var(--wl-text-muted); }

.offer-split[b-kvg3wvsgri] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.split-label[b-kvg3wvsgri] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.split-value[b-kvg3wvsgri] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.btn-accept-offer[b-kvg3wvsgri] {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.7) 0%, var(--wl-purple) 100%);
    color: #fff;
    border: none;
    border-radius: 0.625rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--wl-purple-rgb), 0.3);
}

.btn-accept-offer:hover:not(:disabled)[b-kvg3wvsgri] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(var(--wl-purple-rgb), 0.5);
}

.btn-accept-offer:disabled[b-kvg3wvsgri] { opacity: 0.5; cursor: not-allowed; }

/* ============================================
   SHARED
   ============================================ */

.revenue-text[b-kvg3wvsgri] { color: var(--wl-gold); }

.empty-state[b-kvg3wvsgri] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    padding: 5rem 2rem;
    text-align: center;
}

.empty-compact[b-kvg3wvsgri] {
    padding: 3rem 2rem;
}

.empty-icon[b-kvg3wvsgri] {
    width: 5rem;
    height: 5rem;
    color: var(--wl-text-muted);
    opacity: 0.25;
}

.empty-icon svg[b-kvg3wvsgri] { width: 100%; height: 100%; }

.empty-state h3[b-kvg3wvsgri] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 0;
}

.empty-state p[b-kvg3wvsgri] {
    font-size: 0.9rem;
    color: var(--wl-text-muted);
    max-width: 400px;
    line-height: 1.6;
    margin: 0;
}

.empty-cta[b-kvg3wvsgri] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
    border-radius: 0.75rem;
    text-decoration: none;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.3);
}

.empty-cta:hover[b-kvg3wvsgri] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--wl-gold-rgb), 0.5);
}

.loading-state[b-kvg3wvsgri] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
}

.loading-spinner[b-kvg3wvsgri] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-kvg3wvsgri 1s linear infinite;
}

@keyframes spin-b-kvg3wvsgri { to { transform: rotate(360deg); } }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .header-content[b-kvg3wvsgri] { flex-direction: column; align-items: flex-start; }
    .header-stats[b-kvg3wvsgri] { width: 100%; justify-content: flex-start; }
    .header-decoration[b-kvg3wvsgri] { display: none; }
}

@media (max-width: 768px) {
    .merch-hub[b-kvg3wvsgri] { padding: 1rem; }
    .hub-header[b-kvg3wvsgri] { padding: 1.5rem; }
    .hub-header h1[b-kvg3wvsgri] { font-size: 2.25rem; }
    .header-stats[b-kvg3wvsgri] { flex-wrap: wrap; gap: 0.75rem; }
    .stat-card[b-kvg3wvsgri] { flex: 1; min-width: 80px; padding: 0.75rem 1rem; }
    .stat-value[b-kvg3wvsgri] { font-size: 1.5rem; }

    .tab-nav[b-kvg3wvsgri] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tab-btn[b-kvg3wvsgri] { flex: 0 0 auto; padding: 0.875rem 1rem; font-size: 1rem; white-space: nowrap; }
    .tab-btn span:not(.tab-count):not(.tab-badge-live)[b-kvg3wvsgri] { display: none; }
    .tab-btn svg[b-kvg3wvsgri] { width: 1.25rem; height: 1.25rem; }

    .designs-grid[b-kvg3wvsgri] { grid-template-columns: 1fr; }
    .drop-items-grid[b-kvg3wvsgri] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .store-items-grid[b-kvg3wvsgri] { grid-template-columns: 1fr; }
    .collabs-grid[b-kvg3wvsgri], .offers-grid[b-kvg3wvsgri] { grid-template-columns: 1fr; }

    .drop-hero-name[b-kvg3wvsgri] { font-size: 1.75rem; }
    .drop-hero-header[b-kvg3wvsgri] { flex-direction: column; }
    .drop-hero-content[b-kvg3wvsgri] { padding: 1.5rem; }

    .panel-header[b-kvg3wvsgri] { flex-direction: column; align-items: flex-start; }

    .store-overview-stats[b-kvg3wvsgri] { flex-direction: column; gap: 0.75rem; }
    .store-overview-stat[b-kvg3wvsgri] { align-items: flex-start; }
}

@media (max-width: 480px) {
    .stat-card[b-kvg3wvsgri] { min-width: 70px; }
    .designs-grid[b-kvg3wvsgri] { grid-template-columns: 1fr; }
    .drop-items-grid[b-kvg3wvsgri] { grid-template-columns: 1fr; }
    .design-pricing[b-kvg3wvsgri] { flex-direction: column; gap: 0.5rem; }
    .price-divider[b-kvg3wvsgri] { width: 100%; height: 1px; }
    .collab-stats-row[b-kvg3wvsgri] { flex-direction: column; gap: 0.5rem; }
}
/* /Components/Pages/Career/Music/Merch/MerchStockModal.razor.rz.scp.css */
.stock-modal-overlay[b-srwcar5in2] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: overlayFadeIn-b-srwcar5in2 0.2s ease-out;
    overflow-y: auto;
}

@keyframes overlayFadeIn-b-srwcar5in2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.stock-modal[b-srwcar5in2] {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: linear-gradient(135deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%);
    border: 1px solid var(--wl-gold-border);
    animation: modalSlideUp-b-srwcar5in2 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-shadow:
        0 0 0 1px var(--wl-shadow-color),
        0 25px 80px var(--wl-shadow-color),
        0 0 100px rgba(var(--wl-gold-rgb), 0.05);
}

@keyframes modalSlideUp-b-srwcar5in2 {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Corner decorations */
.modal-corner[b-srwcar5in2] {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    border-style: solid;
    pointer-events: none;
    z-index: 2;
}
.modal-corner-tl[b-srwcar5in2] { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.modal-corner-tr[b-srwcar5in2] { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.modal-corner-bl[b-srwcar5in2] { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.modal-corner-br[b-srwcar5in2] { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.modal-edge[b-srwcar5in2] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.3), transparent);
    pointer-events: none;
    z-index: 2;
}
.modal-edge-top[b-srwcar5in2] { top: 0; }
.modal-edge-bottom[b-srwcar5in2] { bottom: 0; }

/* Close button */
.modal-close[b-srwcar5in2] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    color: var(--wl-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 3;
    padding: 0;
}
.modal-close:hover[b-srwcar5in2] {
    border-color: var(--wl-gold);
    color: var(--wl-gold);
}
.modal-close svg[b-srwcar5in2] {
    width: 16px;
    height: 16px;
}

/* Header */
.modal-header[b-srwcar5in2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.1);
}
.modal-title[b-srwcar5in2] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wl-gold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.modal-title-decoration[b-srwcar5in2] {
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.5));
}
.modal-title-decoration:last-child[b-srwcar5in2] {
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.5), transparent);
}

/* Content */
.modal-content[b-srwcar5in2] {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Design Info */
.stock-design-info[b-srwcar5in2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(var(--wl-gold-rgb), 0.05);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.1);
}
.stock-design-name[b-srwcar5in2] {
    font-weight: 600;
    color: var(--wl-text-primary);
}
.stock-unit-cost[b-srwcar5in2] {
    font-size: 0.85rem;
    color: var(--wl-text-secondary);
}

/* Quantity Slider */
.stock-quantity-section[b-srwcar5in2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stock-label[b-srwcar5in2] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--wl-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.stock-slider-row[b-srwcar5in2] {
    display: flex;
    align-items: center;
    gap: 16px;
}
.stock-slider[b-srwcar5in2] {
    flex: 1;
    height: 6px;
    appearance: none;
    background: rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 3px;
    outline: none;
}
.stock-slider[b-srwcar5in2]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--wl-gold);
    cursor: pointer;
    box-shadow: 0 0 8px rgba(var(--wl-gold-rgb), 0.3);
}
.stock-qty-value[b-srwcar5in2] {
    width: 5.5rem;
    min-width: 5.5rem;
    text-align: right;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.06);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
}
.stock-qty-value:focus[b-srwcar5in2] {
    outline: none;
    border-color: var(--wl-gold);
}
.stock-slider-labels[b-srwcar5in2] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

/* Summary */
.stock-summary[b-srwcar5in2] {
    padding-top: 12px;
    border-top: 1px solid rgba(var(--wl-gold-rgb), 0.1);
}
.stock-summary-title[b-srwcar5in2] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wl-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
}

/* Payment Source */
.stock-payment-section[b-srwcar5in2] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.stock-payment-title[b-srwcar5in2] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wl-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.stock-radio[b-srwcar5in2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.1);
    cursor: pointer;
    transition: all 0.2s;
}
.stock-radio:hover[b-srwcar5in2] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.03);
}
.stock-radio.radio-selected[b-srwcar5in2] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.08);
}
.stock-radio input[type="radio"][b-srwcar5in2] {
    accent-color: var(--wl-gold);
}
.radio-label[b-srwcar5in2] {
    font-size: 0.9rem;
    color: var(--wl-text-primary);
}

/* Cost rows */
.stock-cost-row[b-srwcar5in2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 0.9rem;
    color: var(--wl-text-secondary);
}
.stock-cost-value[b-srwcar5in2] {
    font-weight: 700;
    color: var(--wl-gold);
}
.stock-budget-value[b-srwcar5in2] {
    font-weight: 600;
    color: var(--wl-accent-green);
}
.stock-cash-value[b-srwcar5in2] {
    font-weight: 600;
    color: var(--wl-text-primary);
}

/* Breakdown */
.stock-breakdown[b-srwcar5in2] {
    padding: 12px 16px;
    background: rgba(var(--wl-gold-rgb), 0.03);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.08);
}

/* Insufficient Funds */
.stock-insufficient[b-srwcar5in2] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(var(--wl-accent-red-rgb, 255, 70, 70), 0.1);
    border: 1px solid rgba(var(--wl-accent-red-rgb, 255, 70, 70), 0.3);
    color: var(--wl-accent-red, #ff4646);
    font-size: 0.85rem;
    font-weight: 500;
}
.stock-insufficient svg[b-srwcar5in2] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Footer */
.modal-footer[b-srwcar5in2] {
    padding: 16px 24px 20px;
    border-top: 1px solid rgba(var(--wl-gold-rgb), 0.1);
}

.stock-confirm-btn[b-srwcar5in2] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-dark));
    color: var(--wl-bg-primary);
    border: none;
    font-size: 0.95rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
}
.stock-confirm-btn:hover:not(:disabled)[b-srwcar5in2] {
    filter: brightness(1.1);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.3);
}
.stock-confirm-btn:disabled[b-srwcar5in2] {
    opacity: 0.4;
    cursor: not-allowed;
}
.stock-confirm-btn svg[b-srwcar5in2] {
    width: 18px;
    height: 18px;
}
/* /Components/Pages/Career/Music/Offers/Index.razor.rz.scp.css */
/* ============================================
   CONTRACT OFFERS PAGE
   Art Deco meets Modern Editorial
   ============================================ */

.offers-page[b-8xtnxlhqza] {
    position: relative;
    min-height: 100vh;
    padding: 2rem;
    overflow: hidden;
}

/* Atmospheric Background */
.atmosphere-layer[b-8xtnxlhqza] {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(var(--wl-purple-rgb), 0.05) 0%, transparent 40%),
        linear-gradient(180deg, var(--wl-bg-primary) 0%, var(--wl-bg-primary) 100%);
    pointer-events: none;
    z-index: -2;
}

.atmosphere-glow[b-8xtnxlhqza] {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 300px;
    background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-8xtnxlhqza] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--wl-gold-bg-hover);
    animation: headerSlide-b-8xtnxlhqza 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes headerSlide-b-8xtnxlhqza {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header-content[b-8xtnxlhqza] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-icon[b-8xtnxlhqza] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    color: var(--wl-gold);
}

.header-icon svg[b-8xtnxlhqza] {
    width: 2.25rem;
    height: 2.25rem;
}

.header-text[b-8xtnxlhqza] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-8xtnxlhqza] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(var(--wl-gold-rgb), 0.7);
}

.header-text h1[b-8xtnxlhqza] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.header-subtitle[b-8xtnxlhqza] {
    font-size: 0.9rem;
    color: var(--wl-text-muted);
    margin: 0;
}

.header-stats[b-8xtnxlhqza] {
    display: flex;
    gap: 1rem;
}

.stat-card[b-8xtnxlhqza] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    min-width: 80px;
}

.stat-value[b-8xtnxlhqza] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    line-height: 1;
}

.stat-label[b-8xtnxlhqza] {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin-top: 0.25rem;
}

.stat-negotiation .stat-value[b-8xtnxlhqza] {
    color: #60a5fa;
}

/* ============================================
   TAB NAVIGATION
   ============================================ */

.tab-nav[b-8xtnxlhqza] {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    margin-bottom: 2rem;
    animation: fadeIn-b-8xtnxlhqza 0.5s ease 0.1s both;
}

@keyframes fadeIn-b-8xtnxlhqza {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tab-btn[b-8xtnxlhqza] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0.875rem 1.25rem;
    background: transparent;
    border: none;
    border-radius: 0.75rem;
    color: var(--wl-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.tab-btn:hover[b-8xtnxlhqza] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.tab-btn.active[b-8xtnxlhqza] {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    color: var(--wl-gold);
    box-shadow: 0 0 20px var(--wl-gold-bg);
}

.tab-icon[b-8xtnxlhqza] {
    display: flex;
    width: 1.25rem;
    height: 1.25rem;
}

.tab-icon svg[b-8xtnxlhqza] {
    width: 100%;
    height: 100%;
}

.tab-text[b-8xtnxlhqza] {
    flex: 1;
    text-align: left;
}

.tab-badge[b-8xtnxlhqza] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    background: var(--wl-gold-border);
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.tab-badge.pulse[b-8xtnxlhqza] {
    animation: badgePulse-b-8xtnxlhqza 2s ease infinite;
}

@keyframes badgePulse-b-8xtnxlhqza {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--wl-gold-rgb), 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(var(--wl-gold-rgb), 0); }
}

/* ============================================
   TAB CONTENT
   ============================================ */

.tab-content[b-8xtnxlhqza] {
    animation: contentFade-b-8xtnxlhqza 0.4s ease;
}

@keyframes contentFade-b-8xtnxlhqza {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.offers-grid[b-8xtnxlhqza] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
}

/* ============================================
   HISTORY LIST
   ============================================ */

.history-list[b-8xtnxlhqza] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.history-item[b-8xtnxlhqza] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    animation: slideIn-b-8xtnxlhqza 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes slideIn-b-8xtnxlhqza {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.history-item.status-accepted[b-8xtnxlhqza] {
    border-left: 3px solid #22C55E;
}

.history-item.status-rejected[b-8xtnxlhqza] {
    border-left: 3px solid #EF4444;
}

.history-item.status-expired[b-8xtnxlhqza] {
    border-left: 3px solid var(--wl-text-muted);
}

.history-label[b-8xtnxlhqza] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.label-icon[b-8xtnxlhqza] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.label-icon svg[b-8xtnxlhqza] {
    width: 1.25rem;
    height: 1.25rem;
}

.label-icon.tier-indie[b-8xtnxlhqza] { color: rgba(var(--wl-contrast-rgb), 0.6); }
.label-icon.tier-midtier[b-8xtnxlhqza] { color: #60a5fa; }
.label-icon.tier-major[b-8xtnxlhqza] { color: var(--wl-gold); }
.label-icon.tier-legendary[b-8xtnxlhqza] { color: #F472B6; }

.label-info[b-8xtnxlhqza] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.label-name[b-8xtnxlhqza] {
    font-weight: 600;
    color: var(--wl-text-primary);
    font-size: 0.95rem;
}

.offer-source[b-8xtnxlhqza] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.history-status[b-8xtnxlhqza] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.status-badge[b-8xtnxlhqza] {
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-badge.status-accepted[b-8xtnxlhqza] {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.status-badge.status-rejected[b-8xtnxlhqza] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: #EF4444;
}

.status-badge.status-expired[b-8xtnxlhqza] {
    background: var(--wl-border-medium);
    color: var(--wl-text-muted);
}

.cooldown-info[b-8xtnxlhqza] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.cooldown-info svg[b-8xtnxlhqza] {
    width: 0.875rem;
    height: 0.875rem;
}

.history-terms[b-8xtnxlhqza] {
    display: flex;
    gap: 1rem;
}

.history-terms .term[b-8xtnxlhqza] {
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    padding: 0.25rem 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.25rem;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-8xtnxlhqza] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    animation: fadeIn-b-8xtnxlhqza 0.5s ease;
}

.empty-icon[b-8xtnxlhqza] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    margin-bottom: 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 50%;
    color: rgba(var(--wl-contrast-rgb), 0.2);
}

.empty-icon svg[b-8xtnxlhqza] {
    width: 2.5rem;
    height: 2.5rem;
}

.empty-state h3[b-8xtnxlhqza] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem;
}

.empty-state p[b-8xtnxlhqza] {
    font-size: 0.9rem;
    color: var(--wl-text-muted);
    margin: 0 0 1.5rem;
    max-width: 300px;
}

.empty-cta[b-8xtnxlhqza] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border: none;
    border-radius: 0.5rem;
    color: var(--wl-bg-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
}

.empty-cta:hover[b-8xtnxlhqza] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--wl-gold-rgb), 0.3);
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-8xtnxlhqza] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.loading-spinner[b-8xtnxlhqza] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-gold-bg);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-8xtnxlhqza 1s linear infinite;
}

@keyframes spin-b-8xtnxlhqza {
    to { transform: rotate(360deg); }
}

.loading-container p[b-8xtnxlhqza] {
    font-size: 0.9rem;
    color: var(--wl-text-muted);
    margin: 0;
}

/* ============================================
   MODAL STYLES
   ============================================ */

.modal-backdrop[b-8xtnxlhqza] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: backdropFade-b-8xtnxlhqza 0.2s ease;
}

@keyframes backdropFade-b-8xtnxlhqza {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content[b-8xtnxlhqza] {
    position: relative;
    width: 90%;
    max-width: 420px;
    background: linear-gradient(135deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    animation: modalSlide-b-8xtnxlhqza 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlide-b-8xtnxlhqza {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.reject-modal .modal-icon[b-8xtnxlhqza] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    background: rgba(var(--wl-red-rgb), 0.15);
    border-radius: 50%;
    color: #EF4444;
}

.modal-icon svg[b-8xtnxlhqza] {
    width: 2rem;
    height: 2rem;
}

.modal-content h2[b-8xtnxlhqza] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0 0 0.75rem;
}

.modal-content p[b-8xtnxlhqza] {
    font-size: 0.9rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 2rem;
    line-height: 1.5;
}

.modal-actions[b-8xtnxlhqza] {
    display: flex;
    gap: 1rem;
}

.modal-btn[b-8xtnxlhqza] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-btn.secondary[b-8xtnxlhqza] {
    background: var(--wl-border-medium);
    color: var(--wl-text-primary);
}

.modal-btn.secondary:hover[b-8xtnxlhqza] {
    background: var(--wl-surface-primary);
}

.modal-btn.danger[b-8xtnxlhqza] {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: white;
}

.modal-btn.danger:hover:not(:disabled)[b-8xtnxlhqza] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--wl-red-rgb), 0.3);
}

.modal-btn:disabled[b-8xtnxlhqza] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-spinner[b-8xtnxlhqza] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--wl-text-muted);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-8xtnxlhqza 0.8s linear infinite;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .offers-page[b-8xtnxlhqza] {
        padding: 1rem;
    }

    .page-header[b-8xtnxlhqza] {
        flex-direction: column;
        gap: 1.5rem;
    }

    .header-stats[b-8xtnxlhqza] {
        width: 100%;
        justify-content: center;
    }

    .header-icon[b-8xtnxlhqza] {
        width: 3.5rem;
        height: 3.5rem;
    }

    .header-icon svg[b-8xtnxlhqza] {
        width: 1.75rem;
        height: 1.75rem;
    }

    .header-text h1[b-8xtnxlhqza] {
        font-size: 1.5rem;
    }

    .tab-nav[b-8xtnxlhqza] {
        flex-wrap: wrap;
    }

    .tab-btn[b-8xtnxlhqza] {
        flex: 1 1 auto;
        min-width: calc(50% - 0.25rem);
        padding: 0.75rem 1rem;
    }

    .tab-text[b-8xtnxlhqza] {
        display: none;
    }

    .offers-grid[b-8xtnxlhqza] {
        grid-template-columns: 1fr;
    }

    .history-item[b-8xtnxlhqza] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .history-status[b-8xtnxlhqza] {
        align-items: flex-start;
    }

    .history-terms[b-8xtnxlhqza] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .stat-card[b-8xtnxlhqza] {
        padding: 0.75rem 1rem;
    }

    .stat-value[b-8xtnxlhqza] {
        font-size: 1.5rem;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *[b-8xtnxlhqza],
    *[b-8xtnxlhqza]::before,
    *[b-8xtnxlhqza]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/Career/Music/Offers/NegotiationScreen.razor.rz.scp.css */
/* ============================================
   NEGOTIATION SCREEN - Full-screen overlay
   Art Deco inspired negotiation interface
   ============================================ */

.negotiation-overlay[b-7vprmrnyx7] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: overlayFade-b-7vprmrnyx7 0.3s ease;
    overflow: hidden;
}

@keyframes overlayFade-b-7vprmrnyx7 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.negotiation-panel[b-7vprmrnyx7] {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    background: linear-gradient(135deg, rgba(15, 15, 22, 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%);
    border: 1px solid var(--wl-gold-border);
    border-radius: 1.25rem;
    animation: panelSlide-b-7vprmrnyx7 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes panelSlide-b-7vprmrnyx7 {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Corner decorations */
.negotiation-panel[b-7vprmrnyx7]::before,
.negotiation-panel[b-7vprmrnyx7]::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.3);
    pointer-events: none;
}

.negotiation-panel[b-7vprmrnyx7]::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
    border-radius: 1.25rem 0 0 0;
}

.negotiation-panel[b-7vprmrnyx7]::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
    border-radius: 0 0 1.25rem 0;
}

/* Close Button */
.close-btn[b-7vprmrnyx7] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.close-btn:hover[b-7vprmrnyx7] {
    background: rgba(var(--wl-red-rgb), 0.15);
    border-color: rgba(var(--wl-red-rgb), 0.3);
    color: #EF4444;
}

.close-btn svg[b-7vprmrnyx7] {
    width: 1.25rem;
    height: 1.25rem;
}

/* ============================================
   PANEL HEADER
   ============================================ */

.panel-header[b-7vprmrnyx7] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2rem 2rem 1.5rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.label-showcase[b-7vprmrnyx7] {
    display: flex;
    gap: 1.25rem;
    align-items: center;
}

.label-icon-large[b-7vprmrnyx7] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.label-icon-large svg[b-7vprmrnyx7] {
    width: 2.25rem;
    height: 2.25rem;
}

.label-icon-large.tier-indie[b-7vprmrnyx7] { color: rgba(var(--wl-contrast-rgb), 0.6); }
.label-icon-large.tier-midtier[b-7vprmrnyx7] { color: #60a5fa; background: rgba(96, 165, 250, 0.1); }
.label-icon-large.tier-major[b-7vprmrnyx7] { color: var(--wl-gold); background: var(--wl-gold-bg); }
.label-icon-large.tier-legendary[b-7vprmrnyx7] { color: #F472B6; background: rgba(244, 114, 182, 0.1); }

.label-details[b-7vprmrnyx7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tier-tag[b-7vprmrnyx7] {
    display: inline-flex;
    width: fit-content;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tier-tag.tier-indie[b-7vprmrnyx7] { background: var(--wl-border-medium); color: rgba(var(--wl-contrast-rgb), 0.6); }
.tier-tag.tier-midtier[b-7vprmrnyx7] { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.tier-tag.tier-major[b-7vprmrnyx7] { background: var(--wl-gold-bg-hover); color: var(--wl-gold); }
.tier-tag.tier-legendary[b-7vprmrnyx7] { background: rgba(244, 114, 182, 0.15); color: #F472B6; }

.label-details h2[b-7vprmrnyx7] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.2;
}

.source-info[b-7vprmrnyx7] {
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.counter-notice[b-7vprmrnyx7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(var(--wl-purple-rgb), 0.15);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.3);
    border-radius: 0.5rem;
    color: var(--wl-purple);
    font-size: 0.8rem;
    font-weight: 600;
}

.counter-notice svg[b-7vprmrnyx7] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   POWER SECTION
   ============================================ */

.power-section[b-7vprmrnyx7] {
    padding: 1.5rem 2rem;
    background: var(--wl-surface-primary);
}

.power-header[b-7vprmrnyx7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.power-header h3[b-7vprmrnyx7] {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.power-value[b-7vprmrnyx7] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.power-bar[b-7vprmrnyx7] {
    position: relative;
    height: 8px;
    background: var(--wl-border-medium);
    border-radius: 4px;
    overflow: visible;
    margin-bottom: 0.75rem;
}

.power-fill[b-7vprmrnyx7] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold) 0%, var(--wl-gold-light) 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.power-markers[b-7vprmrnyx7] {
    position: absolute;
    inset: 0;
}

.power-markers .marker[b-7vprmrnyx7] {
    position: absolute;
    top: -3px;
    bottom: -3px;
    width: 1px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
}

.power-breakdown[b-7vprmrnyx7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.power-item[b-7vprmrnyx7] {
    padding: 0.25rem 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.25rem;
    font-size: 0.7rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.power-item.gold[b-7vprmrnyx7] {
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
}

.power-item.purple[b-7vprmrnyx7] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    color: var(--wl-purple);
}

.power-description[b-7vprmrnyx7] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    margin: 0;
    font-style: italic;
}

/* ============================================
   TERMS SECTION
   ============================================ */

.terms-section[b-7vprmrnyx7] {
    padding: 1.5rem 2rem;
}

.terms-header[b-7vprmrnyx7] {
    display: grid;
    grid-template-columns: 1fr 100px 1fr;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--wl-border-subtle);
    margin-bottom: 0.75rem;
}

.col-label[b-7vprmrnyx7] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-align: center;
}

.col-label:first-child[b-7vprmrnyx7] {
    text-align: left;
}

.col-label:last-child[b-7vprmrnyx7] {
    text-align: right;
}

.terms-grid[b-7vprmrnyx7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.term-row[b-7vprmrnyx7] {
    display: grid;
    grid-template-columns: 1fr 100px 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border-radius: 0.5rem;
    transition: background 0.2s ease;
}

.term-row:hover[b-7vprmrnyx7] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.term-row.disabled[b-7vprmrnyx7] {
    opacity: 0.5;
    pointer-events: auto; /* Keep for tooltip */
}

.term-row.disabled .term-input input[b-7vprmrnyx7],
.term-row.disabled .term-input .toggle[b-7vprmrnyx7] {
    pointer-events: none;
    cursor: not-allowed;
}

.term-row.disabled input[type="range"][b-7vprmrnyx7]::-webkit-slider-thumb {
    background: rgba(128, 128, 128, 0.5);
    cursor: not-allowed;
}

.term-row.disabled input[type="range"][b-7vprmrnyx7]::-moz-range-thumb {
    background: rgba(128, 128, 128, 0.5);
    cursor: not-allowed;
}

.term-name[b-7vprmrnyx7] {
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.term-their[b-7vprmrnyx7] {
    text-align: center;
    font-size: 0.85rem;
    color: var(--wl-text-muted);
}

.term-input[b-7vprmrnyx7] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-end;
}

.term-input input[type="range"][b-7vprmrnyx7] {
    width: 100%;
    height: 4px;
    background: var(--wl-border-medium);
    border-radius: 2px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.term-input input[type="range"][b-7vprmrnyx7]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--wl-gold-rgb), 0.4);
    transition: transform 0.2s ease;
}

.term-input input[type="range"][b-7vprmrnyx7]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.term-input input[type="range"][b-7vprmrnyx7]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(var(--wl-gold-rgb), 0.4);
}

.input-value[b-7vprmrnyx7] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    min-width: 80px;
    text-align: right;
}

.input-value.better[b-7vprmrnyx7] {
    color: #22C55E;
}

.input-value.worse[b-7vprmrnyx7] {
    color: #EF4444;
}

/* Toggle Input */
.toggle-input[b-7vprmrnyx7] {
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.75rem;
    align-items: center;
}

.toggle[b-7vprmrnyx7] {
    position: relative;
    width: 44px;
    height: 24px;
}

.toggle input[b-7vprmrnyx7] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-7vprmrnyx7] {
    position: absolute;
    inset: 0;
    background: var(--wl-border-medium);
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-slider[b-7vprmrnyx7]::before {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.toggle input:checked + .toggle-slider[b-7vprmrnyx7] {
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
}

.toggle input:checked + .toggle-slider[b-7vprmrnyx7]::before {
    transform: translateX(20px);
}

/* ============================================
   BREACH WARNING
   ============================================ */

.breach-warning[b-7vprmrnyx7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-top: 0.75rem;
    background: linear-gradient(90deg, rgba(var(--wl-red-rgb), 0.1) 0%, transparent 100%);
    border: 1px solid rgba(var(--wl-red-rgb), 0.25);
    border-left: 3px solid #EF4444;
    border-radius: 0.5rem;
    cursor: help;
    transition: all 0.2s ease;
}

.breach-warning:hover[b-7vprmrnyx7] {
    background: linear-gradient(90deg, rgba(var(--wl-red-rgb), 0.15) 0%, transparent 100%);
    border-color: rgba(var(--wl-red-rgb), 0.4);
}

.breach-warning svg[b-7vprmrnyx7] {
    width: 1.25rem;
    height: 1.25rem;
    color: #EF4444;
    flex-shrink: 0;
}

.breach-content[b-7vprmrnyx7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
}

.breach-label[b-7vprmrnyx7] {
    font-size: 0.8rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.breach-value[b-7vprmrnyx7] {
    font-size: 0.9rem;
    font-weight: 700;
    color: #EF4444;
}

/* ============================================
   CHANCE SECTION
   ============================================ */

.chance-section[b-7vprmrnyx7] {
    padding: 1rem 2rem 1.5rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.chance-header[b-7vprmrnyx7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.chance-header span:first-child[b-7vprmrnyx7] {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.chance-value[b-7vprmrnyx7] {
    font-size: 1.25rem;
    font-weight: 700;
}

.chance-value.high[b-7vprmrnyx7] { color: #22C55E; }
.chance-value.medium[b-7vprmrnyx7] { color: #FBBF24; }
.chance-value.low[b-7vprmrnyx7] { color: #EF4444; }

.chance-bar[b-7vprmrnyx7] {
    height: 6px;
    background: var(--wl-border-medium);
    border-radius: 3px;
    overflow: hidden;
}

.chance-fill[b-7vprmrnyx7] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease, background 0.4s ease;
}

.chance-fill.high[b-7vprmrnyx7] { background: linear-gradient(90deg, #22C55E 0%, #34D399 100%); }
.chance-fill.medium[b-7vprmrnyx7] { background: linear-gradient(90deg, #FBBF24 0%, #F59E0B 100%); }
.chance-fill.low[b-7vprmrnyx7] { background: linear-gradient(90deg, #EF4444 0%, #DC2626 100%); }

/* ============================================
   PANEL FOOTER
   ============================================ */

.panel-footer[b-7vprmrnyx7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-top: 1px solid var(--wl-border-subtle);
}

.primary-actions[b-7vprmrnyx7] {
    display: flex;
    gap: 0.75rem;
}

.action-btn[b-7vprmrnyx7] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.action-btn.reject[b-7vprmrnyx7] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    color: #EF4444;
}

.action-btn.reject:hover:not(:disabled)[b-7vprmrnyx7] {
    background: rgba(var(--wl-red-rgb), 0.2);
    border-color: rgba(var(--wl-red-rgb), 0.4);
}

.action-btn.accept[b-7vprmrnyx7] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22C55E;
}

.action-btn.accept:hover:not(:disabled)[b-7vprmrnyx7] {
    background: rgba(34, 197, 94, 0.25);
    transform: translateY(-2px);
}

.action-btn.counter[b-7vprmrnyx7] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
}

.action-btn.counter:hover:not(:disabled)[b-7vprmrnyx7] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--wl-gold-rgb), 0.35);
}

.action-btn:disabled[b-7vprmrnyx7] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-spinner[b-7vprmrnyx7] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--wl-text-muted);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin-b-7vprmrnyx7 0.8s linear infinite;
}

@keyframes spin-b-7vprmrnyx7 {
    to { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .negotiation-panel[b-7vprmrnyx7] {
        max-height: 95vh;
        border-radius: 1rem 1rem 0 0;
    }

    .panel-header[b-7vprmrnyx7] {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .label-showcase[b-7vprmrnyx7] {
        gap: 1rem;
    }

    .label-icon-large[b-7vprmrnyx7] {
        width: 3.5rem;
        height: 3.5rem;
    }

    .label-icon-large svg[b-7vprmrnyx7] {
        width: 1.75rem;
        height: 1.75rem;
    }

    .label-details h2[b-7vprmrnyx7] {
        font-size: 1.25rem;
    }

    .power-section[b-7vprmrnyx7],
    .terms-section[b-7vprmrnyx7],
    .chance-section[b-7vprmrnyx7] {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .terms-header[b-7vprmrnyx7],
    .term-row[b-7vprmrnyx7] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .terms-header[b-7vprmrnyx7] {
        display: none;
    }

    .term-row[b-7vprmrnyx7] {
        padding: 1rem;
    }

    .term-name[b-7vprmrnyx7] {
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    .term-their[b-7vprmrnyx7] {
        text-align: left;
        font-size: 0.75rem;
        color: rgba(var(--wl-contrast-rgb), 0.4);
    }

    .term-their[b-7vprmrnyx7]::before {
        content: 'Their offer: ';
    }

    .term-input[b-7vprmrnyx7] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .input-value[b-7vprmrnyx7] {
        text-align: left;
    }

    .panel-footer[b-7vprmrnyx7] {
        flex-direction: column;
        gap: 1rem;
        padding: 1.25rem;
    }

    .action-btn.reject[b-7vprmrnyx7] {
        width: 100%;
        order: 3;
    }

    .primary-actions[b-7vprmrnyx7] {
        width: 100%;
        flex-direction: column;
    }

    .primary-actions .action-btn[b-7vprmrnyx7] {
        width: 100%;
    }
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

.negotiation-panel[b-7vprmrnyx7]::-webkit-scrollbar {
    width: 6px;
}

.negotiation-panel[b-7vprmrnyx7]::-webkit-scrollbar-track {
    background: rgba(var(--wl-contrast-rgb), 0.02);
}

.negotiation-panel[b-7vprmrnyx7]::-webkit-scrollbar-thumb {
    background: rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 3px;
}

.negotiation-panel[b-7vprmrnyx7]::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--wl-gold-rgb), 0.5);
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .negotiation-overlay[b-7vprmrnyx7],
    .negotiation-panel[b-7vprmrnyx7],
    .power-fill[b-7vprmrnyx7],
    .chance-fill[b-7vprmrnyx7],
    .btn-spinner[b-7vprmrnyx7] {
        animation: none !important;
        transition: none !important;
    }
}
/* /Components/Pages/Career/Music/Offers/OfferCard.razor.rz.scp.css */
/* ============================================
   OFFER CARD - Contract Offer Display
   Gold accent for new, red for expiring
   ============================================ */

.offer-card[b-exr185ybep] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(var(--wl-bg-modal-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    animation: cardAppear-b-exr185ybep 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes cardAppear-b-exr185ybep {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.offer-card:hover[b-exr185ybep] {
    transform: translateY(-4px);
    box-shadow: 0 20px 50px var(--wl-shadow-color);
}

/* New Offer State - Gold theme */
.offer-card.is-new[b-exr185ybep] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    box-shadow:
        0 0 30px var(--wl-gold-bg),
        inset 0 1px 0 var(--wl-gold-bg);
}

.offer-card.is-new:hover[b-exr185ybep] {
    border-color: rgba(var(--wl-gold-rgb), 0.6);
    box-shadow:
        0 20px 50px var(--wl-shadow-color),
        0 0 40px var(--wl-gold-bg-hover);
}

/* Expiring State - Red theme */
.offer-card.is-expiring[b-exr185ybep] {
    border-color: rgba(var(--wl-red-rgb), 0.4);
    box-shadow:
        0 0 30px rgba(var(--wl-red-rgb), 0.1),
        inset 0 1px 0 rgba(var(--wl-red-rgb), 0.1);
}

.offer-card.is-expiring:hover[b-exr185ybep] {
    border-color: rgba(var(--wl-red-rgb), 0.6);
}

/* In Negotiation State - Blue theme */
.offer-card.in-negotiation[b-exr185ybep] {
    border-color: rgba(96, 165, 250, 0.3);
}

.offer-card.has-counter[b-exr185ybep] {
    border-color: rgba(var(--wl-purple-rgb), 0.4);
    box-shadow: 0 0 30px rgba(var(--wl-purple-rgb), 0.1);
}

/* ============================================
   BADGES & INDICATORS
   ============================================ */

.new-badge[b-exr185ybep] {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border-radius: 0.25rem;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--wl-bg-primary);
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.4);
    z-index: 10;
}

.expiring-indicator[b-exr185ybep] {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    width: 0.75rem;
    height: 0.75rem;
    z-index: 10;
}

.expiring-pulse[b-exr185ybep] {
    position: absolute;
    inset: 0;
    background: #EF4444;
    border-radius: 50%;
    animation: expiringPulse-b-exr185ybep 1.5s ease infinite;
}

@keyframes expiringPulse-b-exr185ybep {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.expiring-pulse[b-exr185ybep]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #EF4444;
    border-radius: 50%;
}

.round-indicator[b-exr185ybep] {
    padding: 0.35rem 0.75rem;
    background: rgba(96, 165, 250, 0.15);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #60a5fa;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   CARD HEADER
   ============================================ */

.card-header[b-exr185ybep] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.label-section[b-exr185ybep] {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.label-icon[b-exr185ybep] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.label-icon svg[b-exr185ybep] {
    width: 1.5rem;
    height: 1.5rem;
}

.label-icon.tier-indie[b-exr185ybep] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.label-icon.tier-midtier[b-exr185ybep] {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
}

.label-icon.tier-major[b-exr185ybep] {
    color: var(--wl-gold);
    background: var(--wl-gold-bg);
}

.label-icon.tier-legendary[b-exr185ybep] {
    color: #F472B6;
    background: rgba(244, 114, 182, 0.1);
}

.label-info[b-exr185ybep] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.label-name[b-exr185ybep] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.2;
}

.label-meta[b-exr185ybep] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tier-badge[b-exr185ybep] {
    display: inline-flex;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tier-badge.tier-indie[b-exr185ybep] {
    background: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.tier-badge.tier-midtier[b-exr185ybep] {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}

.tier-badge.tier-major[b-exr185ybep] {
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
}

.tier-badge.tier-legendary[b-exr185ybep] {
    background: rgba(244, 114, 182, 0.15);
    color: #F472B6;
}

.source-tag[b-exr185ybep] {
    font-size: 0.7rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

/* ============================================
   TERMS PREVIEW
   ============================================ */

.terms-preview[b-exr185ybep] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 1rem 1.25rem;
}

.term-item[b-exr185ybep] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.625rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border-radius: 0.5rem;
}

.term-item.highlight[b-exr185ybep] {
    background: rgba(var(--wl-gold-rgb), 0.08);
    border: 1px solid var(--wl-gold-bg-hover);
}

.term-label[b-exr185ybep] {
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.term-value[b-exr185ybep] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wl-text-primary);
}

.term-value.revenue[b-exr185ybep] {
    color: #22C55E;
}

/* ============================================
   REQUIREMENTS SUMMARY
   ============================================ */

.requirements-summary[b-exr185ybep] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 1.25rem 1rem;
}

.req-item[b-exr185ybep] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.625rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 0.375rem;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.req-item svg[b-exr185ybep] {
    width: 0.875rem;
    height: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.req-item.bonus[b-exr185ybep] {
    background: rgba(34, 197, 94, 0.1);
    color: #22C55E;
}

.req-item.bonus svg[b-exr185ybep] {
    color: #22C55E;
}

/* ============================================
   CARD FOOTER
   ============================================ */

.card-footer[b-exr185ybep] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--wl-surface-primary);
    margin-top: auto;
}

.expiration[b-exr185ybep] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--wl-text-muted);
}

.expiration svg[b-exr185ybep] {
    width: 1rem;
    height: 1rem;
}

.expiration.urgent[b-exr185ybep] {
    color: #EF4444;
    font-weight: 600;
}

.expiration.urgent svg[b-exr185ybep] {
    animation: clockPulse-b-exr185ybep 1s ease infinite;
}

@keyframes clockPulse-b-exr185ybep {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.card-actions[b-exr185ybep] {
    display: flex;
    gap: 0.5rem;
}

.action-btn[b-exr185ybep] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.action-btn.primary[b-exr185ybep] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
}

.action-btn.primary:hover[b-exr185ybep] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--wl-gold-rgb), 0.35);
}

.action-btn.secondary[b-exr185ybep] {
    background: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.7);
    padding: 0.625rem;
}

.action-btn.secondary:hover[b-exr185ybep] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: #EF4444;
}

.action-btn.secondary svg[b-exr185ybep] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
    .card-header[b-exr185ybep] {
        padding: 1rem;
    }

    .label-icon[b-exr185ybep] {
        width: 2.5rem;
        height: 2.5rem;
    }

    .label-icon svg[b-exr185ybep] {
        width: 1.25rem;
        height: 1.25rem;
    }

    .label-name[b-exr185ybep] {
        font-size: 1rem;
    }

    .terms-preview[b-exr185ybep] {
        padding: 0.75rem 1rem;
        gap: 0.375rem;
    }

    .term-item[b-exr185ybep] {
        padding: 0.5rem 0.625rem;
    }

    .term-value[b-exr185ybep] {
        font-size: 0.9rem;
    }

    .requirements-summary[b-exr185ybep] {
        padding: 0 1rem 0.75rem;
    }

    .card-footer[b-exr185ybep] {
        flex-direction: column;
        gap: 0.75rem;
        padding: 0.875rem 1rem;
    }

    .expiration[b-exr185ybep] {
        width: 100%;
        justify-content: center;
    }

    .card-actions[b-exr185ybep] {
        width: 100%;
    }

    .action-btn.primary[b-exr185ybep] {
        flex: 1;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .expiring-pulse[b-exr185ybep],
    .expiration.urgent svg[b-exr185ybep],
    .offer-card[b-exr185ybep] {
        animation: none !important;
    }
}
/* /Components/Pages/Career/Music/Record/Index.razor.rz.scp.css */
/* ============================================
   DAW STUDIO - Professional Recording Interface
   ============================================ */

.daw-studio[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 10.5rem);
    min-height: calc(100dvh - 10.5rem);
    background: var(--wl-bg-primary);
    position: relative;
    overflow: visible;
    container-name: recording-studio;
    container-type: inline-size;
}

/* Animated Background */
.studio-bg[b-421xrwggr1] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.grid-overlay[b-421xrwggr1] {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--wl-contrast-rgb), 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--wl-contrast-rgb), 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 70%);
}

.glow-orb[b-421xrwggr1] {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    animation: orbFloat-b-421xrwggr1 20s ease-in-out infinite;
}

.glow-orb.orb-1[b-421xrwggr1] {
    width: 400px;
    height: 400px;
    background: #d4a853;
    top: -100px;
    right: -100px;
}

.glow-orb.orb-2[b-421xrwggr1] {
    width: 300px;
    height: 300px;
    background: var(--wl-purple);
    bottom: -50px;
    left: -50px;
    animation-delay: -10s;
}

@keyframes orbFloat-b-421xrwggr1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -20px) scale(1.05); }
    50% { transform: translate(-20px, 30px) scale(0.95); }
    75% { transform: translate(20px, 20px) scale(1.02); }
}

.scan-line[b-421xrwggr1] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(212, 168, 83, 0.3) 50%,
        transparent 100%);
    animation: scanMove-b-421xrwggr1 8s linear infinite;
}

@keyframes scanMove-b-421xrwggr1 {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}

/* Loading State */
.loading-container[b-421xrwggr1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.loading-waveform[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 40px;
}

.wave-bar[b-421xrwggr1] {
    width: 4px;
    background: linear-gradient(to top, #d4a853, #f59e0b);
    border-radius: 2px;
    animation: waveAnim-b-421xrwggr1 1s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.1s);
}

@keyframes waveAnim-b-421xrwggr1 {
    0%, 100% { height: 10px; }
    50% { height: 40px; }
}

.loading-container p[b-421xrwggr1] {
    color: var(--wl-text-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Error State */
.error-state[b-421xrwggr1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.error-state h2[b-421xrwggr1] {
    color: var(--wl-text);
    font-size: 1.25rem;
}

.back-btn[b-421xrwggr1] {
    padding: 0.75rem 1.5rem;
    background: rgba(212, 168, 83, 0.1);
    border: 1px solid rgba(212, 168, 83, 0.3);
    border-radius: 0.5rem;
    color: #d4a853;
    text-decoration: none;
    transition: all 0.2s;
}

.back-btn:hover[b-421xrwggr1] {
    background: rgba(212, 168, 83, 0.2);
}

/* ============================================
   TRANSPORT BAR - Top Control Strip
   ============================================ */

.transport-bar[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 0%,
        rgba(var(--wl-bg-dark-rgb), 0.98) 100%);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    position: relative;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.transport-btn[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    transition: all 0.2s;
}

.transport-btn:hover[b-421xrwggr1] {
    background: var(--wl-border-medium);
    color: var(--wl-text);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
}

.transport-btn svg[b-421xrwggr1] {
    width: 1.25rem;
    height: 1.25rem;
}

.transport-info[b-421xrwggr1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.track-title[b-421xrwggr1] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-meta[b-421xrwggr1] {
    display: flex;
    gap: 0.5rem;
}

.meta-tag[b-421xrwggr1] {
    padding: 0.125rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 0.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
}

.meta-tag.genre[b-421xrwggr1] {
    background: rgba(212, 168, 83, 0.1);
    color: #d4a853;
}

.transport-status[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-radius: 0.375rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.status-led[b-421xrwggr1] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #374151;
    position: relative;
}

.status-led.recording[b-421xrwggr1] {
    background: #ef4444;
    box-shadow: 0 0 10px rgba(var(--wl-red-rgb), 0.6);
}

.status-led.mixing[b-421xrwggr1] {
    background: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.6);
}

.status-led.mixed[b-421xrwggr1] {
    background: #22c55e;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
}

.status-led.mastering[b-421xrwggr1] {
    background: var(--wl-purple);
    box-shadow: 0 0 10px rgba(var(--wl-purple-rgb), 0.6);
}

.status-led.ready[b-421xrwggr1] {
    background: #10b981;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
}

.led-pulse[b-421xrwggr1] {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: #ef4444;
    animation: ledPulse-b-421xrwggr1 1s ease-in-out infinite;
}

@keyframes ledPulse-b-421xrwggr1 {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.5); opacity: 0; }
}

.status-text[b-421xrwggr1] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-muted);
}

.transport-time[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.375rem 0.75rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    border-radius: 0.375rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.time-display[b-421xrwggr1] {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 1rem;
    font-weight: 700;
    color: #d4a853;
    text-shadow: 0 0 10px rgba(212, 168, 83, 0.5);
}

.time-label[b-421xrwggr1] {
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
}

.transport-energy[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 0.375rem;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.transport-energy svg[b-421xrwggr1] {
    width: 1rem;
    height: 1rem;
    color: #10b981;
}

.transport-energy span[b-421xrwggr1] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #10b981;
}

/* ============================================
   MAIN STUDIO AREA
   ============================================ */

.studio-main[b-421xrwggr1] {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(22rem, 30vw, 28rem);
    gap: 0;
    min-width: 0;
    position: relative;
    z-index: 1;
    overflow: visible;
}

/* Timeline Panel (Left) */
.timeline-panel[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-dark-rgb), 0.95) 0%,
        rgba(var(--wl-bg-dark-rgb), 0.98) 100%);
    border-right: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    overflow: visible;
}

.panel-header[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    background: var(--wl-surface-primary);
    position: sticky;
    top: 4rem;
    z-index: 5;
}

.panel-header h2[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text);
    margin: 0;
}

.panel-header h2 svg[b-421xrwggr1] {
    width: 1.125rem;
    height: 1.125rem;
    color: #d4a853;
}

.progress-mini[b-421xrwggr1] {
    width: 80px;
    height: 4px;
    background: var(--wl-border-medium);
    border-radius: 2px;
    overflow: hidden;
}

.progress-mini .progress-fill[b-421xrwggr1] {
    height: 100%;
    background: linear-gradient(90deg, #d4a853, #f59e0b);
    border-radius: 2px;
    transition: width 0.3s;
}

/* Timeline Tracks */
.timeline-tracks[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    gap: 0.25rem;
}

.track-row[b-421xrwggr1] {
    display: grid;
    grid-template-areas: "section quality actions";
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.03);
    border-radius: 0.5rem;
    transition: all 0.2s;
}

.track-row:hover[b-421xrwggr1] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: var(--wl-border-medium);
}

.track-row:focus-within[b-421xrwggr1] {
    border-color: rgba(212, 168, 83, 0.55);
    box-shadow: 0 0 0 2px rgba(212, 168, 83, 0.2);
}

.track-select-control[b-421xrwggr1] {
    display: flex;
    grid-area: section;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    padding: 0;
    color: inherit;
    text-align: left;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.track-select-control:focus-visible[b-421xrwggr1] {
    outline: none;
}

.track-row.selected[b-421xrwggr1] {
    background: rgba(212, 168, 83, 0.08);
    border-color: rgba(212, 168, 83, 0.3);
    box-shadow: 0 0 0 1px rgba(212, 168, 83, 0.1);
}

.track-row.recorded[b-421xrwggr1] {
    border-left: 3px solid #10b981;
}

.track-row.queued[b-421xrwggr1] {
    border-left: 3px solid #f59e0b;
    animation: queuePulse-b-421xrwggr1 2s ease-in-out infinite;
}

@keyframes queuePulse-b-421xrwggr1 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.track-row.pending[b-421xrwggr1] {
    border-left: 3px solid transparent;
}

.track-indicator[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.track-row.recorded .track-indicator[b-421xrwggr1] {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.track-row.recorded .track-indicator svg[b-421xrwggr1] {
    width: 1rem;
    height: 1rem;
}

.track-num[b-421xrwggr1] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-text-muted);
}

.mini-spinner[b-421xrwggr1] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(245, 158, 11, 0.3);
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: spin-b-421xrwggr1 0.8s linear infinite;
}

@keyframes spin-b-421xrwggr1 {
    to { transform: rotate(360deg); }
}

.track-info[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 80px;
}

.track-type[b-421xrwggr1] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--wl-text);
}

.track-duration[b-421xrwggr1] {
    font-size: 0.65rem;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.track-waveform[b-421xrwggr1] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    height: 28px;
    padding: 0 0.5rem;
    background: var(--wl-surface-primary);
    border-radius: 3px;
    overflow: hidden;
}

.wf-bar[b-421xrwggr1] {
    width: 2px;
    min-width: 1px;
    background: rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 1px;
    height: var(--h, 50%);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Unfilled waveform - subtle gray */
.track-waveform:not(.filled) .wf-bar[b-421xrwggr1] {
    background: linear-gradient(to top,
        rgba(100, 100, 100, 0.15),
        rgba(150, 150, 150, 0.25));
}

/* Filled waveform - vibrant green gradient like real DAW */
.track-waveform.filled .wf-bar[b-421xrwggr1] {
    background: linear-gradient(to top,
        rgba(16, 185, 129, 0.5) 0%,
        rgba(34, 197, 94, 0.75) 40%,
        rgba(74, 222, 128, 0.9) 70%,
        rgba(134, 239, 172, 1) 100%);
    box-shadow: 0 0 2px rgba(16, 185, 129, 0.3);
}

/* Subtle glow effect for filled waveform container */
.track-waveform.filled[b-421xrwggr1] {
    background: rgba(16, 185, 129, 0.05);
    box-shadow: inset 0 0 8px rgba(16, 185, 129, 0.1);
}

.track-quality-group[b-421xrwggr1] {
    display: flex;
    grid-area: quality;
    max-width: 100%;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.track-quality[b-421xrwggr1] {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    gap: 0.42rem;
    padding: 0.25rem 0.5rem;
    color: color-mix(in srgb, var(--wl-gold) 55%, var(--wl-text-primary));
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.track-quality:hover[b-421xrwggr1] {
    background: rgba(var(--wl-gold-rgb), 0.2);
    border-color: rgba(var(--wl-gold-rgb), 0.38);
}

.track-quality--personal[b-421xrwggr1] {
    color: color-mix(in srgb, rgb(var(--wl-cyan-rgb)) 72%, var(--wl-text-primary));
    background: rgba(var(--wl-cyan-rgb), 0.09);
    border-color: rgba(var(--wl-cyan-rgb), 0.28);
}

.track-quality--personal:hover[b-421xrwggr1] {
    background: rgba(var(--wl-cyan-rgb), 0.17);
    border-color: rgba(var(--wl-cyan-rgb), 0.46);
}

.q-value[b-421xrwggr1] {
    font-size: 0.75rem;
    font-weight: 700;
    color: inherit;
    font-family: 'JetBrains Mono', monospace;
}

.track-quality-label[b-421xrwggr1] {
    max-width: 7.5rem;
    overflow: hidden;
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.035em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.track-repair-badge[b-421xrwggr1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 1.5rem;
    color: #fef3c7;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.42);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 800;
}

.track-actions[b-421xrwggr1] {
    display: flex;
    grid-area: actions;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

/*
 * Collaborative rows can expose two reports and two independent recording
 * actions at once. Give that dense state its own layout contract at every
 * desktop width: section identity and reports keep the flexible left rail,
 * while player/NPC actions form a fixed, predictable right rail.
 */
.track-row--dense[b-421xrwggr1] {
    grid-template-areas:
        "section actions"
        "quality actions";
    grid-template-columns: minmax(0, 1fr) 12.5rem;
    row-gap: 0.6rem;
}

.track-row--dense .track-quality-group[b-421xrwggr1] {
    align-self: start;
    justify-self: end;
}

.track-row--dense .track-actions[b-421xrwggr1] {
    align-self: stretch;
    flex-direction: column;
    flex-wrap: nowrap;
}

.track-row--dense .action-rec.performer-take-action[b-421xrwggr1],
.track-row--dense .action-npc[b-421xrwggr1] {
    width: 12.5rem;
    max-width: 100%;
}

.action-rec[b-421xrwggr1],
.action-redo[b-421xrwggr1],
.action-npc[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s;
}

.action-rec[b-421xrwggr1] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--wl-red-rgb), 0.3);
}

.action-rec:hover:not(:disabled)[b-421xrwggr1] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-red-rgb), 0.4);
}

.action-rec:disabled[b-421xrwggr1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-npc[b-421xrwggr1] {
    min-width: 8.75rem;
    justify-content: flex-start;
    color: #f8d78a;
    background: linear-gradient(135deg, rgba(76, 55, 24, 0.94), rgba(35, 45, 61, 0.96));
    border: 1px solid rgba(245, 178, 52, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 232, 180, 0.08), 0 4px 14px rgba(5, 10, 18, 0.24);
}

.action-npc:hover:not(:disabled)[b-421xrwggr1] {
    border-color: rgba(250, 190, 72, 0.72);
    background: linear-gradient(135deg, rgba(92, 64, 23, 0.98), rgba(39, 51, 69, 0.98));
    transform: translateY(-1px);
}

.action-npc:disabled[b-421xrwggr1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-npc > svg[b-421xrwggr1] {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
}

.action-npc .part-role-label[b-421xrwggr1] {
    color: rgba(255, 235, 190, 0.74);
}

.action-npc .take-energy-cost[b-421xrwggr1] {
    color: #ffcf63;
}

.action-rec.part-action[b-421xrwggr1] {
    min-width: 7.25rem;
    justify-content: flex-start;
    text-align: left;
}

.action-rec.performer-take-action[b-421xrwggr1] {
    width: min(12.5rem, 100%);
    min-width: 10.5rem;
}

.part-action-copy[b-421xrwggr1] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.05;
}

.part-action-state[b-421xrwggr1] {
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.06em;
}

.part-role-label[b-421xrwggr1] {
    max-width: 10rem;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.58rem;
    font-weight: 550;
    letter-spacing: 0.015em;
    line-height: 1.15;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.take-energy-cost[b-421xrwggr1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.65rem;
    min-height: 1.75rem;
    margin-left: auto;
    padding: 0.2rem 0.4rem;
    color: #fff7d6;
    background: rgba(3, 10, 24, 0.32);
    border: 1px solid rgba(253, 211, 77, 0.3);
    border-radius: 0.45rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: -0.025em;
    white-space: nowrap;
}

/* Per-take scorecard: deliberately denser than the arrangement editor. It answers the one
 * question beside Re-rec: who recorded what, and was that exact take worth keeping? */
.take-score-panel[b-421xrwggr1] {
    position: relative;
    margin: 0.45rem 0.5rem 1rem;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.075), transparent 38%),
        rgba(var(--wl-bg-modal-rgb), 0.88);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.75rem;
    box-shadow: inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.025);
}

.take-score-panel[b-421xrwggr1]::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: linear-gradient(180deg, var(--wl-gold-light), rgba(var(--wl-gold-rgb), 0.08));
    content: '';
}

.take-score-header[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem 0.62rem 1rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.take-score-heading[b-421xrwggr1] {
    display: flex;
    align-items: baseline;
    min-width: 0;
    gap: 0.55rem;
}

.take-score-kicker[b-421xrwggr1] {
    color: color-mix(in srgb, var(--wl-gold) 60%, var(--wl-text-primary));
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.take-score-heading h3[b-421xrwggr1] {
    margin: 0;
    color: var(--wl-text-primary);
    font-size: 0.9rem;
    font-weight: 750;
    letter-spacing: -0.015em;
}

.take-score-progress[b-421xrwggr1] {
    flex: 0 0 auto;
    padding: 0.25rem 0.48rem;
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.045);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
    border-radius: 99px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    font-weight: 700;
}

.take-score-header-actions[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.take-score-report-button[b-421xrwggr1] {
    display: inline-flex;
    align-items: center;
    min-height: 1.85rem;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem;
    color: color-mix(in srgb, var(--wl-gold) 55%, var(--wl-text-primary));
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.24);
    border-radius: 0.45rem;
    font-size: 0.62rem;
    font-weight: 750;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.take-score-report-button:hover[b-421xrwggr1] {
    background: rgba(var(--wl-gold-rgb), 0.18);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    transform: translateY(-1px);
}

.take-score-report-button:focus-visible[b-421xrwggr1] {
    outline: 2px solid color-mix(in srgb, var(--wl-gold) 70%, var(--wl-text-primary));
    outline-offset: 2px;
}

.take-score-report-button svg[b-421xrwggr1] {
    width: 0.82rem;
    height: 0.82rem;
}

.take-score-list[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
}

.take-performer-row[b-421xrwggr1] {
    display: grid;
    grid-template-columns: minmax(9.5rem, 0.7fr) minmax(0, 2.3fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.58rem 0.9rem 0.58rem 1rem;
}

.take-performer-report[b-421xrwggr1] {
    display: inline-grid;
    min-width: 4.4rem;
    min-height: 2.5rem;
    place-items: center;
    padding: 0.3rem 0.5rem;
    color: color-mix(in srgb, var(--wl-gold) 60%, var(--wl-text-primary));
    background: rgba(var(--wl-gold-rgb), 0.08);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.55rem;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.take-performer-report:hover[b-421xrwggr1] {
    background: rgba(var(--wl-gold-rgb), 0.16);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    transform: translateY(-1px);
}

.take-performer-report:focus-visible[b-421xrwggr1] {
    outline: 2px solid color-mix(in srgb, var(--wl-gold) 70%, var(--wl-text-primary));
    outline-offset: 2px;
}

.take-performer-report strong[b-421xrwggr1] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 850;
    letter-spacing: -0.035em;
}

.take-performer-report span[b-421xrwggr1] {
    color: var(--wl-text-secondary);
    font-size: 0.52rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.take-performer-report.take-score--great strong[b-421xrwggr1] {
    color: color-mix(in srgb, var(--wl-green) 55%, var(--wl-text-primary));
}

.take-performer-report.take-score--weak strong[b-421xrwggr1] {
    color: color-mix(in srgb, var(--wl-red) 68%, var(--wl-text-primary));
}

.take-performer-row + .take-performer-row[b-421xrwggr1] {
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.045);
}

.take-performer-identity[b-421xrwggr1] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.55rem;
}

.take-performer-avatar[b-421xrwggr1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.95rem;
    height: 1.95rem;
    flex: 0 0 1.95rem;
    color: color-mix(in srgb, var(--wl-gold) 60%, var(--wl-text-primary));
    background: linear-gradient(145deg, rgba(var(--wl-gold-rgb), 0.22), rgba(var(--wl-gold-rgb), 0.07));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 0.58rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    font-weight: 800;
}

.take-performer-copy[b-421xrwggr1] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.08rem;
}

.take-performer-copy strong[b-421xrwggr1] {
    overflow: hidden;
    color: var(--wl-text-primary);
    font-size: 0.74rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.take-performer-copy span[b-421xrwggr1] {
    color: var(--wl-text-secondary);
    font-size: 0.58rem;
}

.take-role-list[b-421xrwggr1] {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.take-role-chip[b-421xrwggr1] {
    display: grid;
    grid-template-columns: minmax(4.7rem, auto) auto;
    align-items: center;
    min-width: 8.2rem;
    padding: 0.38rem 0.42rem 0.38rem 0.55rem;
    column-gap: 0.5rem;
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.035);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.075);
    border-radius: 0.5rem;
}

.take-role-chip.is-recording[b-421xrwggr1] {
    background: rgba(245, 158, 11, 0.055);
    border-color: rgba(245, 158, 11, 0.22);
}

.take-role-name[b-421xrwggr1] {
    overflow: hidden;
    font-size: 0.66rem;
    font-weight: 650;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.take-role-score[b-421xrwggr1] {
    justify-self: end;
    min-width: 2rem;
    color: color-mix(in srgb, var(--wl-gold) 60%, var(--wl-text-primary));
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: -0.035em;
    text-align: right;
}

.take-role-status[b-421xrwggr1] {
    display: inline-flex;
    grid-column: 1 / -1;
    align-items: center;
    min-width: 0;
    margin-top: 0.18rem;
    gap: 0.3rem;
    color: var(--wl-text-secondary);
    font-size: 0.55rem;
    line-height: 1.2;
}

.take-role-status .mini-spinner[b-421xrwggr1] {
    width: 0.6rem;
    height: 0.6rem;
    flex: 0 0 0.6rem;
    border-width: 1px;
}

.take-role-score.take-score--great[b-421xrwggr1] {
    color: color-mix(in srgb, var(--wl-green) 55%, var(--wl-text-primary));
}

.take-role-score.take-score--good[b-421xrwggr1] {
    color: color-mix(in srgb, var(--wl-gold) 60%, var(--wl-text-primary));
}

.take-role-score.take-score--weak[b-421xrwggr1] {
    color: color-mix(in srgb, var(--wl-red) 68%, var(--wl-text-primary));
}

.take-score-hint[b-421xrwggr1] {
    margin: 0;
    padding: 0.5rem 0.9rem 0.55rem 1rem;
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.018);
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.045);
    font-size: 0.59rem;
    line-height: 1.35;
}

@media (max-width: 720px) {
    .take-score-header[b-421xrwggr1] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .take-score-header-actions[b-421xrwggr1] {
        width: 100%;
        justify-content: space-between;
    }

    .take-performer-row[b-421xrwggr1] {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .take-role-list[b-421xrwggr1] {
        padding-left: 2.5rem;
    }

    .take-performer-report[b-421xrwggr1] {
        width: calc(100% - 2.5rem);
        margin-left: 2.5rem;
        grid-template-columns: auto auto;
        justify-content: center;
        column-gap: 0.45rem;
    }
}

.rec-dot[b-421xrwggr1] {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: recBlink-b-421xrwggr1 1s ease-in-out infinite;
}

@keyframes recBlink-b-421xrwggr1 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.action-redo[b-421xrwggr1] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    color: var(--wl-text-muted);
}

.action-redo:hover:not(:disabled)[b-421xrwggr1] {
    background: var(--wl-border-medium);
    color: var(--wl-text);
}

.action-redo svg[b-421xrwggr1] {
    width: 0.875rem;
    height: 0.875rem;
}

.btn-spinner[b-421xrwggr1] {
    width: 14px;
    height: 14px;
    border: 2px solid var(--wl-text-muted);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-421xrwggr1 0.8s linear infinite;
}

/* Phase Cards */
.phase-action-card[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg,
        rgba(212, 168, 83, 0.1) 0%,
        rgba(212, 168, 83, 0.05) 100%);
    border: 1px solid rgba(212, 168, 83, 0.2);
    border-radius: 0.75rem;
}

.phase-icon[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background: rgba(212, 168, 83, 0.15);
    border-radius: 0.5rem;
    color: #d4a853;
}

.phase-icon svg[b-421xrwggr1] {
    width: 1.5rem;
    height: 1.5rem;
}

.phase-info[b-421xrwggr1] {
    flex: 1;
}

.phase-info h3[b-421xrwggr1] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wl-text);
    margin: 0 0 0.25rem;
}

.phase-info p[b-421xrwggr1] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    margin: 0;
}

.phase-action[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
}

.phase-invite-actions[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.phase-hint[b-421xrwggr1] {
    font-size: 0.65rem;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.phase-btn[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #d4a853 0%, #f59e0b 50%, #d4a853 100%);
    border: none;
    border-radius: 0.5rem;
    color: #000;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(212, 168, 83, 0.3);
}

.phase-btn svg[b-421xrwggr1] {
    width: 1.125rem;
    height: 1.125rem;
}

.phase-btn .btn-cost[b-421xrwggr1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.8;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

.phase-btn .btn-cost .energy-icon[b-421xrwggr1] {
    width: 0.75rem;
    height: 0.75rem;
}

.phase-btn:hover:not(:disabled)[b-421xrwggr1] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 168, 83, 0.5);
}

.phase-btn-secondary[b-421xrwggr1] {
    min-height: 2.65rem;
    padding: 0.65rem 1rem;
    color: #fca5a5;
    background: rgba(var(--wl-red-rgb), 0.07);
    border: 1px solid rgba(var(--wl-red-rgb), 0.22);
    border-radius: 0.5rem;
    font-size: 0.78rem;
    font-weight: 650;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.phase-btn-secondary:hover:not(:disabled)[b-421xrwggr1] {
    color: #fee2e2;
    background: rgba(var(--wl-red-rgb), 0.16);
    border-color: rgba(var(--wl-red-rgb), 0.38);
}

.phase-btn:disabled[b-421xrwggr1] {
    background: linear-gradient(135deg, #3a3a3a, #2a2a2a);
    color: #888;
    border: 1px solid #444;
    cursor: not-allowed;
    box-shadow: none;
}

.phase-btn:disabled svg[b-421xrwggr1] {
    opacity: 0.5;
}

.phase-btn:disabled .btn-cost[b-421xrwggr1] {
    border-left-color: #555;
}

/* Recording collaboration gate */
.recording-notices[b-421xrwggr1] {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.72),
        rgba(var(--wl-bg-dark-rgb), 0.48));
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.collaboration-strip[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 0.75rem 0.85rem;
    background: rgba(var(--wl-contrast-rgb), 0.025);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
    border-radius: 0.65rem;
    box-shadow: inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.025);
}

.collaboration-title[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
    color: var(--wl-text);
}

.collaboration-title strong[b-421xrwggr1] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.collaboration-icon[b-421xrwggr1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    color: #7dd3fc;
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 0.5rem;
}

.collaboration-icon svg[b-421xrwggr1] {
    width: 1.05rem;
    height: 1.05rem;
}

.contributor-chip-list[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-width: 0;
}

.contributor-chip[b-421xrwggr1] {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    min-width: 0;
    min-height: 2rem;
    padding: 0.35rem 0.45rem 0.35rem 0.55rem;
    color: var(--wl-text);
    background: rgba(var(--wl-bg-tertiary-rgb), 0.72);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 999px;
}

.contributor-status-dot[b-421xrwggr1] {
    width: 0.45rem;
    height: 0.45rem;
    flex: 0 0 0.45rem;
    background: #94a3b8;
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.1);
}

.contributor-name[b-421xrwggr1] {
    max-width: 13rem;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.contributor-status[b-421xrwggr1] {
    color: var(--wl-text-muted);
    font-size: 0.64rem;
    line-height: 1.2;
    white-space: nowrap;
}

.contributor-chip[data-status="Pending"][b-421xrwggr1] {
    background: rgba(245, 158, 11, 0.07);
    border-color: rgba(245, 158, 11, 0.22);
}

.contributor-chip[data-status="Pending"] .contributor-status-dot[b-421xrwggr1] {
    background: #fbbf24;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
}

.contributor-chip[data-status="Accepted"][b-421xrwggr1] {
    background: rgba(16, 185, 129, 0.07);
    border-color: rgba(16, 185, 129, 0.2);
}

.contributor-chip[data-status="Accepted"] .contributor-status-dot[b-421xrwggr1] {
    background: #34d399;
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1);
}

.contributor-chip[data-status="Declined"][b-421xrwggr1] {
    opacity: 0.72;
    background: rgba(var(--wl-red-rgb), 0.06);
    border-color: rgba(var(--wl-red-rgb), 0.18);
}

.contributor-chip[data-status="Declined"] .contributor-status-dot[b-421xrwggr1] {
    background: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1);
}

.contributor-withdraw[b-421xrwggr1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.45rem;
    height: 1.45rem;
    flex: 0 0 1.45rem;
    margin-left: 0.1rem;
    color: #fca5a5;
    background: rgba(var(--wl-red-rgb), 0.08);
    border: 1px solid rgba(var(--wl-red-rgb), 0.18);
    border-radius: 50%;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.contributor-withdraw:hover:not(:disabled)[b-421xrwggr1] {
    color: #fee2e2;
    background: rgba(var(--wl-red-rgb), 0.2);
    border-color: rgba(var(--wl-red-rgb), 0.38);
}

.contributor-withdraw:disabled[b-421xrwggr1] {
    opacity: 0.4;
    cursor: wait;
}

.contributor-withdraw svg[b-421xrwggr1] {
    width: 0.78rem;
    height: 0.78rem;
}

/* Phase Progress Cards */
.phase-progress-card[b-421xrwggr1] {
    margin: 1rem;
    padding: 1.5rem;
    border-radius: 0.75rem;
    text-align: center;
}

.phase-progress-card.mixing[b-421xrwggr1] {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.1) 0%,
        rgba(245, 158, 11, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.phase-progress-card.mastering[b-421xrwggr1] {
    background: linear-gradient(135deg,
        rgba(var(--wl-purple-rgb), 0.1) 0%,
        rgba(var(--wl-purple-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
}

/* Phase CTA Card (ready for next step) */
.phase-cta-card[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
}

.phase-cta-card.mixed[b-421xrwggr1] {
    background: linear-gradient(135deg,
        rgba(34, 197, 94, 0.15) 0%,
        rgba(34, 197, 94, 0.05) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.phase-cta-card .phase-icon[b-421xrwggr1] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 197, 94, 0.2);
    border-radius: 50%;
    color: #22c55e;
}

.phase-cta-card .phase-icon svg[b-421xrwggr1] {
    width: 24px;
    height: 24px;
}

.phase-cta-card .phase-info[b-421xrwggr1] {
    flex: 1;
}

.phase-cta-card .phase-info h3[b-421xrwggr1] {
    margin: 0 0 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: #22c55e;
}

.phase-cta-card .phase-info p[b-421xrwggr1] {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.phase-cta-card .phase-action[b-421xrwggr1] {
    flex-shrink: 0;
}

.phase-visual[b-421xrwggr1] {
    margin-bottom: 1rem;
}

.fader-anim[b-421xrwggr1] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    height: 60px;
}

.f-track[b-421xrwggr1] {
    width: 8px;
    height: 100%;
    background: var(--wl-border-medium);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.f-knob[b-421xrwggr1] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, #f59e0b, #fbbf24);
    border-radius: 4px;
    animation: faderAnim-b-421xrwggr1 1.5s ease-in-out infinite;
}

.f-track:nth-child(1) .f-knob[b-421xrwggr1] { animation-delay: 0s; }
.f-track:nth-child(2) .f-knob[b-421xrwggr1] { animation-delay: 0.2s; }
.f-track:nth-child(3) .f-knob[b-421xrwggr1] { animation-delay: 0.4s; }

@keyframes faderAnim-b-421xrwggr1 {
    0%, 100% { height: 30%; }
    50% { height: 80%; }
}

.master-waveform[b-421xrwggr1] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    height: 60px;
}

.m-bar[b-421xrwggr1] {
    width: 3px;
    background: linear-gradient(to top, var(--wl-purple), rgba(var(--wl-purple-rgb), 0.7));
    border-radius: 2px;
    animation: masterWave-b-421xrwggr1 2s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.05s);
}

@keyframes masterWave-b-421xrwggr1 {
    0%, 100% { height: 10px; }
    50% { height: 50px; }
}

.phase-progress-card h3[b-421xrwggr1] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text);
    margin: 0 0 0.25rem;
}

.phase-progress-card p[b-421xrwggr1] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    margin: 0;
}

/* Phase Complete Card */
.phase-complete-card[b-421xrwggr1] {
    margin: 1rem;
    padding: 2rem;
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.1) 0%,
        rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 0.75rem;
    text-align: center;
}

.complete-icon[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 50%;
    color: #10b981;
}

.complete-icon svg[b-421xrwggr1] {
    width: 2rem;
    height: 2rem;
}

.phase-complete-card h3[b-421xrwggr1] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wl-text);
    margin: 0 0 1rem;
}

.final-score[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.score-value[b-421xrwggr1] {
    font-size: 2.5rem;
    font-weight: 700;
    color: #d4a853;
    font-family: 'JetBrains Mono', monospace;
    text-shadow: 0 0 20px rgba(212, 168, 83, 0.5);
}

.score-label[b-421xrwggr1] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.popularity-preview[b-421xrwggr1] {
    width: min(48rem, 100%);
    margin: 0 auto 1.5rem;
    padding: 1rem;
    background: rgba(var(--wl-bg-primary-rgb), 0.42);
    border: 1px solid rgba(56, 189, 248, 0.22);
    border-radius: 0.75rem;
    text-align: left;
}

.popularity-preview__header[b-421xrwggr1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.popularity-preview__header h4[b-421xrwggr1] {
    margin: 0;
    color: var(--wl-text);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
}

.popularity-preview__header p[b-421xrwggr1] {
    margin: 0.2rem 0 0;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
}

.popularity-preview__legacy[b-421xrwggr1] {
    flex: none;
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 999px;
    color: var(--wl-text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.popularity-preview__list[b-421xrwggr1] {
    display: grid;
    gap: 0.45rem;
}

.popularity-preview__row[b-421xrwggr1] {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) minmax(5.75rem, auto) minmax(5.75rem, auto);
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.58);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
    border-radius: 0.55rem;
}

.popularity-preview__avatar[b-421xrwggr1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    font-size: 0.7rem;
    font-weight: 800;
}

.popularity-preview__identity[b-421xrwggr1],
.popularity-preview__metric[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.popularity-preview__identity strong[b-421xrwggr1] {
    overflow: hidden;
    color: var(--wl-text);
    font-size: 0.8rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.popularity-preview__identity small[b-421xrwggr1],
.popularity-preview__metric small[b-421xrwggr1] {
    color: var(--wl-text-muted);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.popularity-preview__metric[b-421xrwggr1] {
    align-items: flex-end;
}

.popularity-preview__metric strong[b-421xrwggr1] {
    color: #a5b4fc;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.86rem;
}

.popularity-preview__metric--fans strong[b-421xrwggr1] {
    color: #34d399;
}

@media (max-width: 640px) {
    .popularity-preview__row[b-421xrwggr1] {
        grid-template-columns: 2rem minmax(0, 1fr) auto;
    }

    .popularity-preview__metric--participation[b-421xrwggr1] {
        display: none;
    }
}

.complete-actions[b-421xrwggr1] {
    display: flex;
    justify-content: center;
}

.release-btn[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #d4a853, #f59e0b);
    border: none;
    border-radius: 0.5rem;
    color: #000;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.release-btn:hover[b-421xrwggr1] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 168, 83, 0.4);
}

.release-btn svg[b-421xrwggr1] {
    width: 1.125rem;
    height: 1.125rem;
}

/* ============================================
   DETAILS PANEL (Right)
   ============================================ */

.details-panel[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.98) 0%,
        rgba(var(--wl-bg-dark-rgb), 0.99) 100%);
    border-left: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    overflow: visible;
}

.no-selection[b-421xrwggr1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    color: var(--wl-text-muted);
}

.no-selection svg[b-421xrwggr1] {
    width: 3rem;
    height: 3rem;
    opacity: 0.3;
}

.no-selection p[b-421xrwggr1] {
    font-size: 0.875rem;
    text-align: center;
}

/* Vocal Assignment */
.vocal-repair-warning[b-421xrwggr1] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0.75rem 0.85rem 0;
    padding: 0.75rem 0.85rem;
    color: #fde68a;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.14), rgba(239, 68, 68, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.32);
    border-radius: 0.65rem;
    font-size: 0.74rem;
    line-height: 1.45;
}

.instrument-repair-warning[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem;
    padding: 0.8rem 0.9rem;
    color: #fde68a;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(239, 68, 68, 0.08));
    border: 1px solid rgba(245, 158, 11, 0.36);
    border-radius: 0.7rem;
}

.instrument-repair-copy[b-421xrwggr1] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    font-size: 0.76rem;
    line-height: 1.4;
}

.instrument-repair-action[b-421xrwggr1] {
    flex: 0 0 auto;
    padding: 0.55rem 0.8rem;
    color: #fff7d6;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.45);
    border-radius: 0.55rem;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.instrument-repair-action:disabled[b-421xrwggr1] {
    opacity: 0.48;
    cursor: not-allowed;
}

.contributor-part-warning[b-421xrwggr1] {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.72rem 0.85rem;
    font-size: 0.78rem;
    box-shadow: 0 12px 34px rgba(8, 15, 30, 0.24);
}

.vocal-repair-icon[b-421xrwggr1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
    color: #111827;
    background: #fbbf24;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 850;
}

.vocal-role-summary-grid[b-421xrwggr1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap: 0.6rem;
    padding: 0.85rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.vocal-assignment[b-421xrwggr1] {
    --vocal-role-color: var(--wl-gold);
    min-width: 0;
    padding: 0;
}

.vocal-assignment.group-role[b-421xrwggr1] { --vocal-role-color: #A78BFA; }
.vocal-assignment.featured-role[b-421xrwggr1] { --vocal-role-color: #F472B6; }
.vocal-assignment.backing-role[b-421xrwggr1] { --vocal-role-color: #38BDF8; }

.vocal-assignment.group-role .vocal-select-btn.assigned[b-421xrwggr1],
.vocal-assignment.featured-role .vocal-select-btn.assigned[b-421xrwggr1],
.vocal-assignment.backing-role .vocal-select-btn.assigned[b-421xrwggr1] {
    background: color-mix(in srgb, var(--vocal-role-color) 9%, transparent);
    border-color: color-mix(in srgb, var(--vocal-role-color) 28%, transparent);
}

.vocal-assignment h3[b-421xrwggr1] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
    margin: 0 0 0.45rem;
    color: color-mix(in srgb, var(--vocal-role-color) 72%, var(--wl-text-muted));
}

.vocal-select-btn[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 4.25rem;
    padding: 0.65rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.vocal-select-btn:hover:not(:disabled)[b-421xrwggr1] {
    background: color-mix(in srgb, var(--vocal-role-color) 10%, transparent);
    border-color: color-mix(in srgb, var(--vocal-role-color) 34%, transparent);
}

.vocal-select-btn:disabled[b-421xrwggr1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.vocal-select-btn.assigned[b-421xrwggr1] {
    background: rgba(212, 168, 83, 0.08);
    border-color: rgba(212, 168, 83, 0.2);
}

.vocal-select-btn .vo-avatar[b-421xrwggr1] {
    width: 2.25rem;
    height: 2.25rem;
}

.vo-avatar.group[b-421xrwggr1] {
    color: #C4B5FD;
    background: rgba(139, 92, 246, 0.16);
}

.vo-avatar.featured[b-421xrwggr1] {
    color: #F9A8D4;
    background: rgba(236, 72, 153, 0.14);
}

.vocal-select-btn .edit-icon[b-421xrwggr1] {
    width: 1rem;
    height: 1rem;
    color: var(--wl-text-muted);
    opacity: 0;
    transition: opacity 0.2s;
    margin-left: auto;
}

.vocal-select-btn:hover:not(:disabled) .edit-icon[b-421xrwggr1] {
    opacity: 1;
    color: #d4a853;
}

/* Backing vocals checkbox */
.backing-checkbox[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.2);
    border-radius: 0.25rem;
    flex-shrink: 0;
    transition: all 0.2s;
}

.backing-checkbox.checked[b-421xrwggr1] {
    background: #d4a853;
    border-color: #d4a853;
}

.backing-checkbox svg[b-421xrwggr1] {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--wl-bg-primary);
}

.backing-option[b-421xrwggr1] {
    gap: 0.5rem;
}

.performer-option.role-conflict[b-421xrwggr1] {
    border-style: dashed;
}

.vocal-role-modal-intro[b-421xrwggr1] {
    margin: 0 0 0.25rem;
    padding: 0.7rem 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.64);
    background: rgba(var(--wl-contrast-rgb), 0.025);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    border-radius: 0.65rem;
    font-size: 0.75rem;
    line-height: 1.5;
}

.vocal-options[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.vocal-option[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    text-align: left;
}

.vocal-option:hover[b-421xrwggr1] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: var(--wl-border-medium);
}

.vocal-option.selected[b-421xrwggr1] {
    background: rgba(212, 168, 83, 0.1);
    border-color: rgba(212, 168, 83, 0.3);
}

.vocal-option.none[b-421xrwggr1] {
    opacity: 0.7;
}

.vocal-option.none.selected[b-421xrwggr1] {
    opacity: 1;
}

.vo-avatar[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.vo-avatar svg[b-421xrwggr1] {
    width: 1rem;
    height: 1rem;
}

.vo-avatar.player[b-421xrwggr1] {
    background: linear-gradient(135deg, #d4a853, #f59e0b);
    color: var(--wl-bg-primary);
}

.vo-avatar.npc[b-421xrwggr1] {
    background: rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

.vo-avatar.empty[b-421xrwggr1] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
}

.vo-info[b-421xrwggr1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.vo-name[b-421xrwggr1] {
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--wl-text);
    overflow-wrap: anywhere;
}

.vo-level[b-421xrwggr1] {
    font-size: 0.65rem;
    line-height: 1.3;
    color: var(--wl-text-muted);
    overflow-wrap: anywhere;
}

.vo-check[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    background: #d4a853;
    border-radius: 50%;
    flex-shrink: 0;
}

.vo-check svg[b-421xrwggr1] {
    width: 0.75rem;
    height: 0.75rem;
    color: var(--wl-bg-primary);
}


/* ============================================
   MIXER PANEL (Bottom)
   ============================================ */

.mixer-panel[b-421xrwggr1] {
    position: relative;
    z-index: 10;
    background: linear-gradient(180deg,
        var(--wl-bg-primary) 0%,
        var(--wl-bg-primary) 100%);
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.mixer-header[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.03);
}

.mixer-header h3[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text);
    margin: 0;
}

.mixer-header h3 svg[b-421xrwggr1] {
    width: 1rem;
    height: 1rem;
    color: #d4a853;
}

.mixer-context[b-421xrwggr1] {
    font-size: 0.65rem;
    color: #d4a853;
    background: rgba(212, 168, 83, 0.1);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Mixing Console */
.mixer-console[b-421xrwggr1] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
}

/* Channel Strip */
.channel-strip[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 70px;
    gap: 0.375rem;
    padding: 0.5rem 0.375rem;
    min-width: 60px;
    width: 70px;
    scroll-snap-align: start;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-secondary-rgb), 0.9) 0%,
        rgba(var(--wl-bg-modal-rgb), 0.95) 100%);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 0.375rem;
    position: relative;
    transition: all 0.3s ease;
    animation: channelFadeIn-b-421xrwggr1 0.3s ease-out backwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes channelFadeIn-b-421xrwggr1 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.channel-strip.inactive[b-421xrwggr1] {
    opacity: 0.5;
}

.channel-strip.active[b-421xrwggr1] {
    background: linear-gradient(180deg,
        rgba(212, 168, 83, 0.06) 0%,
        rgba(var(--wl-bg-modal-rgb), 0.95) 100%);
    border-color: rgba(212, 168, 83, 0.15);
}

.channel-strip[b-421xrwggr1]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #d4a853;
    border-radius: 2px 2px 0 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.channel-strip.active[b-421xrwggr1]::before {
    opacity: 1;
}

/* Channel Header */
.channel-header[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-bg-tertiary-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border-radius: 0.375rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.channel-icon[b-421xrwggr1] {
    display: flex;
    color: #d4a853;
    filter: drop-shadow(0 0 3px rgba(212, 168, 83, 0.3));
}

.channel-icon[b-421xrwggr1]  svg,
.channel-icon svg[b-421xrwggr1] {
    width: 1rem;
    height: 1rem;
}

/* VU Meter */
.vu-meter[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.25rem;
    background: linear-gradient(180deg,
        var(--wl-overlay-light) 0%,
        rgba(var(--wl-bg-tertiary-rgb), 0.5) 100%);
    border-radius: 0.25rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.03);
}

.vu-scale[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vu-segment[b-421xrwggr1] {
    width: 1.5rem;
    height: 3px;
    border-radius: 1px;
    background: var(--wl-border-medium);
    transition: all 0.15s ease;
    position: relative;
    overflow: hidden;
}

.vu-segment[b-421xrwggr1]::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.vu-segment.lit[b-421xrwggr1]::before {
    opacity: 1;
}

.vu-segment.low[b-421xrwggr1]::before {
    background: linear-gradient(90deg, #10b981, #34d399);
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);
}

.vu-segment.mid[b-421xrwggr1]::before {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
}

.vu-segment.high[b-421xrwggr1]::before {
    background: linear-gradient(90deg, #f97316, #fb923c);
    box-shadow: 0 0 4px rgba(249, 115, 22, 0.5);
}

.vu-segment.peak[b-421xrwggr1]::before {
    background: linear-gradient(90deg, #ef4444, #f87171);
    box-shadow: 0 0 6px rgba(var(--wl-red-rgb), 0.6);
}

.vu-value[b-421xrwggr1] {
    font-size: 0.6rem;
    font-weight: 700;
    color: #d4a853;
    font-family: 'JetBrains Mono', monospace;
    text-shadow: 0 0 3px rgba(212, 168, 83, 0.5);
}

/* Fader */
.channel-fader[b-421xrwggr1] {
    width: 100%;
    padding: 0 0.125rem;
}

.fader-track[b-421xrwggr1] {
    width: 100%;
    height: 3px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    border-radius: 2px;
    overflow: hidden;
}

.fader-fill[b-421xrwggr1] {
    width: var(--level, 0%);
    height: 100%;
    background: linear-gradient(90deg, #d4a853, #f59e0b);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Performer Select */
.channel-selector[b-421xrwggr1] {
    width: 100%;
}

.channel-selector .performer-select[b-421xrwggr1] {
    width: 100%;
    padding: 0.25rem 0.125rem;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-secondary-rgb), 0.9) 0%,
        rgba(var(--wl-bg-modal-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.25rem;
    color: var(--wl-text);
    font-size: 0.55rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.channel-selector .performer-select:hover:not(:disabled)[b-421xrwggr1] {
    border-color: rgba(212, 168, 83, 0.4);
}

.channel-selector .performer-select:focus[b-421xrwggr1] {
    outline: none;
    border-color: #d4a853;
}

.channel-selector .performer-select:disabled[b-421xrwggr1] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Channel Label */
.channel-label[b-421xrwggr1] {
    width: 100%;
    text-align: center;
}

.channel-label span[b-421xrwggr1] {
    font-size: 0.5rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Status LED */
.channel-status[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.channel-status .status-led[b-421xrwggr1] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.channel-status.disconnected .status-led[b-421xrwggr1] {
    background: #374151;
}

.channel-status.connected .status-led[b-421xrwggr1] {
    background: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

/* ============================================
   REPORT MODAL
   ============================================ */

.report-modal-overlay[b-421xrwggr1] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.report-modal[b-421xrwggr1] {
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 0%,
        rgba(var(--wl-bg-dark-rgb), 0.99) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn-b-421xrwggr1 0.3s ease-out;
}

@keyframes modalSlideIn-b-421xrwggr1 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.report-header[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.report-header h2[b-421xrwggr1] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0;
}

.take-report-eyebrow[b-421xrwggr1] {
    display: block;
    margin-bottom: 0.18rem;
    color: color-mix(in srgb, var(--wl-gold) 62%, var(--wl-text-primary));
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.take-report-modal[b-421xrwggr1] {
    max-width: 520px;
}

.take-report-hero[b-421xrwggr1] {
    padding-block: 1.15rem;
}

.take-report-average-note[b-421xrwggr1] {
    max-width: 24rem;
    margin: 0.4rem 1.25rem 0;
    color: var(--wl-text-secondary);
    font-size: 0.62rem;
    line-height: 1.45;
    text-align: center;
}

.take-report-roles[b-421xrwggr1] {
    display: flex;
    padding: 0.9rem 1.25rem;
    overflow-y: auto;
    flex: 1;
    flex-direction: column;
    gap: 0.55rem;
}

.take-report-role[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.72rem 0.8rem;
    background: rgba(var(--wl-contrast-rgb), 0.035);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.075);
    border-radius: 0.65rem;
}

.take-report-role-copy[b-421xrwggr1] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.12rem;
}

.take-report-role-copy strong[b-421xrwggr1] {
    color: var(--wl-text-primary);
    font-size: 0.78rem;
}

.take-report-role-copy span[b-421xrwggr1] {
    color: var(--wl-text-secondary);
    font-size: 0.62rem;
}

.take-report-role-score[b-421xrwggr1] {
    min-width: 2.8rem;
    color: color-mix(in srgb, var(--wl-gold) 60%, var(--wl-text-primary));
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.15rem;
    font-weight: 850;
    letter-spacing: -0.045em;
    text-align: right;
}

.take-report-role-score.take-score--great[b-421xrwggr1] {
    color: color-mix(in srgb, var(--wl-green) 55%, var(--wl-text-primary));
}

.take-report-role-score.take-score--weak[b-421xrwggr1] {
    color: color-mix(in srgb, var(--wl-red) 68%, var(--wl-text-primary));
}

.take-report-context[b-421xrwggr1] {
    padding: 0.75rem 1.25rem 0;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.take-report-context p[b-421xrwggr1] {
    margin: 0;
    color: var(--wl-text-secondary);
    font-size: 0.68rem;
    line-height: 1.45;
}

.take-report-section-button[b-421xrwggr1] {
    width: 100%;
    margin-top: 0.65rem;
    padding: 0.62rem 0.75rem;
    color: color-mix(in srgb, var(--wl-gold) 58%, var(--wl-text-primary));
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.24);
    border-radius: 0.55rem;
    font-size: 0.72rem;
    font-weight: 750;
    cursor: pointer;
}

.take-report-section-button:hover[b-421xrwggr1] {
    background: rgba(var(--wl-gold-rgb), 0.18);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.close-btn[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: none;
    border-radius: 0.375rem;
    color: var(--wl-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.close-btn:hover[b-421xrwggr1] {
    background: var(--wl-border-medium);
    color: var(--wl-text-primary);
}

.close-btn svg[b-421xrwggr1] {
    width: 1.125rem;
    height: 1.125rem;
}

.report-quality-hero[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    background: var(--wl-surface-primary);
}

.hero-gauge[b-421xrwggr1] {
    position: relative;
    width: 100px;
    height: 100px;
}

.hero-ring[b-421xrwggr1] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.hero-ring-bg[b-421xrwggr1] {
    fill: none;
    stroke: var(--wl-border-medium);
    stroke-width: 3;
}

.hero-ring-fill[b-421xrwggr1] {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.hero-center[b-421xrwggr1] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-value[b-421xrwggr1] {
    font-size: 1.75rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--wl-gold) 55%, var(--wl-text-primary));
    font-family: 'JetBrains Mono', monospace;
}

.hero-max[b-421xrwggr1] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.hero-label[b-421xrwggr1] {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: color-mix(in srgb, var(--wl-gold) 55%, var(--wl-text-primary));
}

.report-factors[b-421xrwggr1] {
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.report-factors > h3[b-421xrwggr1] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
    margin: 0 0 0.75rem;
}

/* Factor Groups */
.factor-group[b-421xrwggr1] {
    margin-bottom: 1.25rem;
}

.factor-group:last-child[b-421xrwggr1] {
    margin-bottom: 0;
}

.factor-group h3[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: color-mix(in srgb, var(--wl-gold) 55%, var(--wl-text-primary));
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.2);
}

.factor-group h3 svg[b-421xrwggr1] {
    width: 1rem;
    height: 1rem;
}

/* Vocalist Info (read-only display) */
.vocalist-info[b-421xrwggr1] {
    margin-bottom: 1rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.vocalist-info h3[b-421xrwggr1] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-muted);
    margin: 0 0 0.75rem;
}

.vocalist-display[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.5rem;
}

.vocalist-display .vo-avatar[b-421xrwggr1] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--wl-gold-rgb), 0.2);
    color: color-mix(in srgb, var(--wl-gold) 55%, var(--wl-text-primary));
}

.vocalist-display .vo-avatar svg[b-421xrwggr1] {
    width: 1.25rem;
    height: 1.25rem;
}

.vocalist-display .vo-avatar.empty[b-421xrwggr1] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
}

.vocalist-display .vo-info[b-421xrwggr1] {
    flex: 1;
}

.vocalist-display .vo-name[b-421xrwggr1] {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--wl-text-primary);
}

.vocalist-display .vo-level[b-421xrwggr1] {
    display: block;
    font-size: 0.7rem;
    color: var(--wl-text-muted);
}

/* Session Comments */
.session-comments[b-421xrwggr1] {
    padding: 1rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.session-comment[b-421xrwggr1] {
    display: flex;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.5rem;
    animation: commentFadeIn-b-421xrwggr1 0.4s ease-out;
}

@keyframes commentFadeIn-b-421xrwggr1 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.session-comment.positive[b-421xrwggr1] {
    border-left: 2px solid #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.session-comment.negative[b-421xrwggr1] {
    border-left: 2px solid #ef4444;
    background: rgba(var(--wl-red-rgb), 0.05);
}

.session-comment.neutral[b-421xrwggr1] {
    border-left: 2px solid #f59e0b;
    background: rgba(245, 158, 11, 0.05);
}

.comment-icon[b-421xrwggr1] {
    display: flex;
    align-items: flex-start;
    padding-top: 0.125rem;
    flex-shrink: 0;
}

.comment-icon svg[b-421xrwggr1] {
    width: 1rem;
    height: 1rem;
}

.session-comment.positive .comment-icon[b-421xrwggr1] {
    color: #10b981;
}

.session-comment.negative .comment-icon[b-421xrwggr1] {
    color: #ef4444;
}

.session-comment.neutral .comment-icon[b-421xrwggr1] {
    color: #f59e0b;
}

.comment-text[b-421xrwggr1] {
    font-size: 0.75rem;
    color: var(--wl-text-primary);
    font-style: italic;
    line-height: 1.4;
}

.comment-author[b-421xrwggr1] {
    font-weight: 600;
    color: color-mix(in srgb, var(--wl-gold) 55%, var(--wl-text-primary));
    font-style: normal;
    margin-right: 0.25rem;
}

.performer-highlight[b-421xrwggr1] {
    color: color-mix(in srgb, var(--wl-gold) 55%, var(--wl-text-primary));
    font-weight: 600;
}

.instrument-name[b-421xrwggr1] {
    color: var(--wl-text-primary);
    font-weight: 500;
}

.performer-badge[b-421xrwggr1] {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.2);
    color: color-mix(in srgb, var(--wl-gold) 55%, var(--wl-text-primary));
    border-radius: 0.25rem;
    font-weight: 600;
}

.factor-title[b-421xrwggr1] {
    font-size: 0.85rem;
    color: var(--wl-text-primary);
    font-weight: 500;
}

/* Hierarchical factor layout */
.factor-row.has-participants[b-421xrwggr1] {
    flex-direction: column;
    align-items: stretch;
}

.factor-row.has-participants .factor-info[b-421xrwggr1] {
    flex: 1;
}

.factor-header[b-421xrwggr1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.factor-row.has-participants .factor-contribution[b-421xrwggr1] {
    position: static;
}

/* Participants breakdown */
.participants-breakdown[b-421xrwggr1] {
    margin: 0.5rem 0;
    padding-left: 1rem;
    border-left: 1px solid rgba(var(--wl-gold-rgb), 0.2);
}

.participant-row[b-421xrwggr1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
    font-size: 0.75rem;
}

.participant-row:not(:last-child)[b-421xrwggr1] {
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.participant-info[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.participant-name[b-421xrwggr1] {
    color: var(--wl-text-primary);
    font-weight: 500;
}

.participant-role[b-421xrwggr1] {
    font-size: 0.65rem;
    color: var(--wl-text-secondary);
    padding: 0.1rem 0.35rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.2rem;
}

.participant-stats[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.participant-level[b-421xrwggr1] {
    font-size: 0.65rem;
    color: var(--wl-text-secondary);
}

.participant-contribution[b-421xrwggr1] {
    font-size: 0.7rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    min-width: 3rem;
    text-align: right;
}

.participant-contribution.positive[b-421xrwggr1] {
    color: color-mix(in srgb, var(--wl-green) 55%, var(--wl-text-primary));
}

.participant-contribution.negative[b-421xrwggr1] {
    color: color-mix(in srgb, var(--wl-red) 60%, var(--wl-text-primary));
}

.factor-details[b-421xrwggr1] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    margin-left: 0.5rem;
}

.instrument-icon[b-421xrwggr1] {
    font-size: 1.2rem;
}

.factor-role[b-421xrwggr1] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
    margin-left: 0.25rem;
}

.factor-row[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

.factor-row.positive[b-421xrwggr1] {
    border-left: 2px solid #10b981;
}

.factor-row.negative[b-421xrwggr1] {
    border-left: 2px solid #ef4444;
}

.factor-icon[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.375rem;
    color: var(--wl-text-muted);
    flex-shrink: 0;
}

.factor-icon svg[b-421xrwggr1] {
    width: 1rem;
    height: 1rem;
}

.factor-info[b-421xrwggr1] {
    flex: 1;
    min-width: 0;
}

.factor-name[b-421xrwggr1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--wl-text-primary);
    margin-bottom: 0.25rem;
}

.factor-performer[b-421xrwggr1] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
}

.factor-progress[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.factor-progress .progress-track[b-421xrwggr1] {
    flex: 1;
    height: 4px;
    background: var(--wl-border-medium);
    border-radius: 2px;
    overflow: hidden;
}

.factor-progress .progress-fill[b-421xrwggr1] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
    border-radius: 2px;
}

.factor-level[b-421xrwggr1] {
    font-size: 0.65rem;
    color: var(--wl-text-muted);
    white-space: nowrap;
}

.factor-contribution[b-421xrwggr1] {
    text-align: right;
}

.contribution-value[b-421xrwggr1] {
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.factor-row.positive .contribution-value[b-421xrwggr1] {
    color: color-mix(in srgb, var(--wl-green) 55%, var(--wl-text-primary));
}

.factor-row.negative .contribution-value[b-421xrwggr1] {
    color: color-mix(in srgb, var(--wl-red) 60%, var(--wl-text-primary));
}

.report-tips[b-421xrwggr1] {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.report-tips h3[b-421xrwggr1] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
    margin: 0 0 0.75rem;
}

.report-tips ul[b-421xrwggr1] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.report-tips li[b-421xrwggr1] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--wl-text-primary);
    margin-bottom: 0.5rem;
}

.report-tips li svg[b-421xrwggr1] {
    width: 1rem;
    height: 1rem;
    color: #f59e0b;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.close-modal-btn[b-421xrwggr1] {
    margin: 1rem 1.25rem;
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.close-modal-btn:hover[b-421xrwggr1] {
    background: var(--wl-border-medium);
}

/* ============================================
   PERFORMER SELECTION MODAL
   ============================================ */

.performer-btn[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 1.75rem;
    padding: 0.25rem;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-tertiary-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.performer-btn:hover:not(:disabled)[b-421xrwggr1] {
    border-color: rgba(212, 168, 83, 0.5);
    background: rgba(212, 168, 83, 0.1);
}

.performer-btn:disabled[b-421xrwggr1] {
    opacity: 0.4;
    cursor: not-allowed;
}

.performer-btn.assigned[b-421xrwggr1] {
    border-color: rgba(212, 168, 83, 0.3);
}

.performer-initials[b-421xrwggr1] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.performer-initials.player[b-421xrwggr1] {
    color: #d4a853;
}

.performer-initials.npc[b-421xrwggr1] {
    color: var(--wl-purple);
}

.performer-initials.empty[b-421xrwggr1] {
    color: var(--wl-text-muted);
    font-size: 0.8rem;
}

.performer-modal-overlay[b-421xrwggr1] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.performer-modal[b-421xrwggr1] {
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 0%,
        rgba(var(--wl-bg-dark-rgb), 0.99) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn-b-421xrwggr1 0.25s ease-out;
}

.performer-modal-header[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    background: var(--wl-surface-primary);
}

.modal-instrument-info[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-instrument-icon[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.2), rgba(212, 168, 83, 0.05));
    border: 1px solid rgba(212, 168, 83, 0.3);
    border-radius: 0.75rem;
    color: #d4a853;
    box-shadow:
        0 0 20px rgba(212, 168, 83, 0.15),
        inset 0 1px 0 var(--wl-border-medium);
}

.modal-instrument-icon[b-421xrwggr1]  svg {
    width: 1.75rem;
    height: 1.75rem;
    filter: drop-shadow(0 0 4px rgba(212, 168, 83, 0.5));
}

.modal-instrument-text[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.modal-instrument-label[b-421xrwggr1] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
}

.performer-modal-header h3[b-421xrwggr1] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #d4a853;
    margin: 0;
    text-shadow: 0 0 20px rgba(212, 168, 83, 0.3);
}

.performer-modal-content[b-421xrwggr1] {
    display: flex;
    flex-direction: column;
    padding: 0.75rem;
    gap: 0.5rem;
    overflow-y: auto;
}

.performer-option[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    text-align: left;
}

.performer-option:hover:not(:disabled)[b-421xrwggr1] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: var(--wl-border-medium);
}

.performer-option:disabled[b-421xrwggr1] {
    cursor: not-allowed;
    opacity: 0.58;
}

.performer-option.selected[b-421xrwggr1] {
    background: rgba(212, 168, 83, 0.1);
    border-color: rgba(212, 168, 83, 0.4);
}

.po-avatar[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.po-avatar svg[b-421xrwggr1] {
    width: 1.25rem;
    height: 1.25rem;
}

.po-avatar.player[b-421xrwggr1] {
    background: linear-gradient(135deg, #d4a853, #f59e0b);
    color: var(--wl-bg-primary);
}

.po-avatar.npc[b-421xrwggr1] {
    background: rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

.po-avatar.empty[b-421xrwggr1] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
}

.po-info[b-421xrwggr1] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.po-name[b-421xrwggr1] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wl-text);
}

.po-desc[b-421xrwggr1] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
}

.po-level[b-421xrwggr1] {
    display: flex;
    align-items: center;
}

.level-badge[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid;
}

.level-badge .level-number[b-421xrwggr1] {
    font-size: 1.25rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
}

/* Tier 1: Beginner (1-4) - Gray */
.level-badge.tier-1[b-421xrwggr1] {
    background: linear-gradient(135deg, rgba(100, 100, 100, 0.2), rgba(80, 80, 80, 0.1));
    border-color: rgba(150, 150, 150, 0.3);
}
.level-badge.tier-1 .level-number[b-421xrwggr1] {
    color: #9ca3af;
}

/* Tier 2: Intermediate (5-8) - Green */
.level-badge.tier-2[b-421xrwggr1] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(16, 185, 129, 0.05));
    border-color: rgba(16, 185, 129, 0.4);
}
.level-badge.tier-2 .level-number[b-421xrwggr1] {
    color: #10b981;
}

/* Tier 3: Advanced (9-12) - Blue */
.level-badge.tier-3[b-421xrwggr1] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
    border-color: rgba(59, 130, 246, 0.4);
}
.level-badge.tier-3 .level-number[b-421xrwggr1] {
    color: #3b82f6;
}

/* Tier 4: Expert (13-16) - Purple */
.level-badge.tier-4[b-421xrwggr1] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.2), rgba(var(--wl-purple-rgb), 0.05));
    border-color: rgba(var(--wl-purple-rgb), 0.4);
}
.level-badge.tier-4 .level-number[b-421xrwggr1] {
    color: var(--wl-purple);
}

/* Tier 5: Master (17-20) - Gold */
.level-badge.tier-5[b-421xrwggr1] {
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.25), rgba(212, 168, 83, 0.1));
    border-color: rgba(212, 168, 83, 0.5);
    box-shadow: 0 0 12px rgba(212, 168, 83, 0.3);
}
.level-badge.tier-5 .level-number[b-421xrwggr1] {
    color: #d4a853;
    text-shadow: 0 0 8px rgba(212, 168, 83, 0.5);
}

.po-check[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: #d4a853;
    border-radius: 50%;
    flex-shrink: 0;
}

.po-check svg[b-421xrwggr1] {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--wl-bg-primary);
}

.performer-divider[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    margin: 0.25rem 0;
}

.performer-divider[b-421xrwggr1]::before,
.performer-divider[b-421xrwggr1]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--wl-border-medium);
}

.performer-divider span[b-421xrwggr1] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@container recording-studio (max-width: 56rem) {
    .studio-main[b-421xrwggr1] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
    }

    .timeline-panel[b-421xrwggr1] {
        border-right: none;
    }

    .details-panel[b-421xrwggr1] {
        max-height: none;
        border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
        border-left: none;
        overflow: visible;
    }

    .collaboration-strip[b-421xrwggr1] {
        align-items: stretch;
        flex-direction: column;
        gap: 0.65rem;
    }

    .contributor-chip-list[b-421xrwggr1] {
        justify-content: flex-start;
    }

    .phase-action-card[b-421xrwggr1] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .phase-invite-actions[b-421xrwggr1] {
        width: 100%;
        justify-content: flex-start;
    }

}

@container recording-studio (max-width: 36rem) {
    .track-row[b-421xrwggr1] {
        grid-template-areas:
            "section section"
            "quality actions";
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 0.55rem;
    }

    .track-quality-group[b-421xrwggr1] {
        justify-self: start;
        justify-content: flex-start;
    }

    .track-actions[b-421xrwggr1] {
        justify-self: end;
    }

    .take-score-header[b-421xrwggr1] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .take-score-header-actions[b-421xrwggr1] {
        width: 100%;
        justify-content: space-between;
    }

    .take-performer-row[b-421xrwggr1] {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .take-role-list[b-421xrwggr1] {
        padding-left: 2.5rem;
    }

    .take-performer-report[b-421xrwggr1] {
        width: calc(100% - 2.5rem);
        margin-left: 2.5rem;
        grid-template-columns: auto auto;
        justify-content: center;
        column-gap: 0.45rem;
    }

    .track-quality-label[b-421xrwggr1] {
        display: none;
    }

    .track-waveform[b-421xrwggr1] {
        display: none;
    }

    .track-info[b-421xrwggr1] {
        flex: 1;
        min-width: 0;
    }

    .track-type[b-421xrwggr1] {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (min-width: 1280px) {
    .daw-studio[b-421xrwggr1] {
        min-height: calc(100vh - 9.5rem);
        min-height: calc(100dvh - 9.5rem);
    }
}

@media (max-width: 768px) {
    .studio-main[b-421xrwggr1] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .details-panel[b-421xrwggr1] {
        border-left: none;
        border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
        max-height: none;
        overflow: visible;
    }

    .vocal-role-summary-grid[b-421xrwggr1] {
        grid-template-columns: 1fr;
    }

    .transport-bar[b-421xrwggr1] {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .transport-info[b-421xrwggr1] {
        order: 10;
        width: 100%;
        flex: auto;
    }

    .recording-notices[b-421xrwggr1] {
        padding-inline: 0.65rem;
    }

    .collaboration-strip[b-421xrwggr1] {
        align-items: stretch;
        flex-direction: column;
    }

    .contributor-chip-list[b-421xrwggr1] {
        justify-content: flex-start;
    }
}

/*
 * Phones (down to ~360px): keep the section identity, reports and actions in
 * separate grid rows. The waveform is decorative, so it yields the horizontal
 * budget to readable labels and full-size tap targets.
 */
@media (max-width: 480px) {
    .track-row[b-421xrwggr1] {
        grid-template-areas:
            "section"
            "quality"
            "actions";
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
        padding: 0.625rem;
    }

    .track-waveform[b-421xrwggr1] {
        display: none;
    }

    .track-select-control[b-421xrwggr1] {
        width: 100%;
    }

    .track-info[b-421xrwggr1] {
        flex: 1;
        min-width: 0;
    }

    .track-type[b-421xrwggr1] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .track-actions[b-421xrwggr1] {
        display: flex;
        width: 100%;
        max-width: 100%;
        flex-shrink: 0;
        flex-wrap: wrap;
        justify-content: flex-end;
        justify-self: stretch;
        margin-left: 0;
    }

    .action-rec[b-421xrwggr1],
    .action-redo[b-421xrwggr1],
    .action-npc[b-421xrwggr1] {
        min-height: 2rem;
        padding: 0.5rem 0.75rem;
    }

    .action-rec.part-action[b-421xrwggr1] {
        min-width: 7rem;
        max-width: 9.5rem;
    }

    .action-rec.performer-take-action[b-421xrwggr1] {
        width: min(12.5rem, 100%);
        max-width: 12.5rem;
    }

    .action-npc[b-421xrwggr1] {
        min-width: 8.25rem;
    }

    .part-role-label[b-421xrwggr1] {
        max-width: 7.75rem;
    }
}

/* Lyrics Panel */
.lyrics-panel[b-421xrwggr1] {
    background: rgba(var(--wl-bg-secondary-rgb), 0.95);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.lyrics-panel-header[b-421xrwggr1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.lyrics-panel-header:hover[b-421xrwggr1] {
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
}

.lyrics-panel-title[b-421xrwggr1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--wl-text-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.lyrics-panel-title svg[b-421xrwggr1] {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--wl-gold);
}

.lyrics-panel-header .chevron[b-421xrwggr1] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-text-muted);
    transition: transform 0.2s ease;
}

.lyrics-panel.expanded .lyrics-panel-header .chevron[b-421xrwggr1] {
    transform: rotate(180deg);
}

.lyrics-panel-content[b-421xrwggr1] {
    padding: 0;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.lyrics-panel-content[b-421xrwggr1]  .lyrics-editor {
    background: transparent;
    border: none;
    border-radius: 0;
}

.lyrics-panel-content[b-421xrwggr1]  .lyrics-header {
    background: transparent;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}
/* /Components/Pages/Career/Music/Releases/Charts.razor.rz.scp.css */
/* ============================================
   ALBUM CHARTS - AAA+++ Billboard Prestige
   Theme: Music magazine editorial, dark luxury
   ============================================ */

.charts-page[b-ucj8lulpur] {
    position: relative;
    min-height: 100vh;
    padding: 1.5rem;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* === CINEMATIC ATMOSPHERE === */
.charts-atmosphere[b-ucj8lulpur] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.charts-orb[b-ucj8lulpur] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.2;
}

.charts-orb--gold[b-ucj8lulpur] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    animation: chartsFloat-b-ucj8lulpur 22s ease-in-out infinite;
}

.charts-orb--purple[b-ucj8lulpur] {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--wl-purple) 0%, transparent 70%);
    bottom: -150px;
    left: -100px;
    animation: chartsFloat-b-ucj8lulpur 28s ease-in-out infinite reverse;
}

@keyframes chartsFloat-b-ucj8lulpur {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -12px) scale(1.03); }
    66% { transform: translate(-12px, 20px) scale(0.97); }
}

.charts-scanline[b-ucj8lulpur] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-gold-rgb), 0.012) 2px,
        rgba(var(--wl-gold-rgb), 0.012) 4px
    );
}

.charts-noise[b-ucj8lulpur] {
    position: absolute;
    inset: 0;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* === ANIMATIONS === */
.animate-fade-in[b-ucj8lulpur] {
    animation: chartsFadeIn-b-ucj8lulpur 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100[b-ucj8lulpur] { animation-delay: 0.1s; }
.delay-200[b-ucj8lulpur] { animation-delay: 0.2s; }
.delay-300[b-ucj8lulpur] { animation-delay: 0.3s; }

@keyframes chartsFadeIn-b-ucj8lulpur {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chartRowSlideIn-b-ucj8lulpur {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* === HEADER === */
.charts-header[b-ucj8lulpur] {
    position: relative;
    z-index: 1;
}

.charts-header-top[b-ucj8lulpur] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.charts-back-btn[b-ucj8lulpur] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

.charts-back-btn:hover[b-ucj8lulpur] {
    color: var(--wl-gold);
}

.charts-back-btn svg[b-ucj8lulpur] {
    width: 1rem;
    height: 1rem;
}

.charts-badges[b-ucj8lulpur] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.charts-week-badge[b-ucj8lulpur] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(var(--wl-gold-rgb), 0.06);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 100px;
}

.charts-next-badge .next-value[b-ucj8lulpur] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wl-gold);
    line-height: 1;
    letter-spacing: 0.02em;
}

.week-label[b-ucj8lulpur] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
}

.week-number[b-ucj8lulpur] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-gold);
    line-height: 1;
}

.charts-title-group[b-ucj8lulpur] {
    text-align: center;
}

.charts-eyebrow[b-ucj8lulpur] {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-gold);
    margin-bottom: 0.375rem;
    font-family: 'JetBrains Mono', monospace;
}

.charts-title-group h1[b-ucj8lulpur] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--wl-text-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.charts-subtitle[b-ucj8lulpur] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0.375rem 0 0 0;
}

/* === LOADING === */
.charts-loading[b-ucj8lulpur] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
}

.charts-loading-spinner[b-ucj8lulpur] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--wl-border-subtle);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-ucj8lulpur 1s linear infinite;
}

@keyframes spin-b-ucj8lulpur {
    to { transform: rotate(360deg); }
}

/* ============================================
   CATEGORY FILTER TABS
   ============================================ */
.charts-filters[b-ucj8lulpur] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.charts-filter[b-ucj8lulpur] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--wl-border-medium);
    border-radius: 100px;
    color: var(--wl-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.charts-filter svg[b-ucj8lulpur] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.charts-filter:hover[b-ucj8lulpur] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold-light);
    background: rgba(var(--wl-gold-rgb), 0.05);
}

.charts-filter--active[b-ucj8lulpur] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    border-color: var(--wl-gold);
    color: var(--wl-gold);
    box-shadow: 0 0 12px rgba(var(--wl-gold-rgb), 0.1);
}

.charts-filter--active:hover[b-ucj8lulpur] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    border-color: var(--wl-gold-light);
    color: var(--wl-gold-light);
}

/* ============================================
   YOUR RELEASES SPOTLIGHT
   ============================================ */
.charts-spotlight[b-ucj8lulpur] {
    position: relative;
    z-index: 1;
}

.spotlight-header[b-ucj8lulpur] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.spotlight-icon[b-ucj8lulpur] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-gold);
}

.spotlight-icon svg[b-ucj8lulpur] {
    width: 100%;
    height: 100%;
}

.spotlight-header h2[b-ucj8lulpur] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-text-primary);
    margin: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.spotlight-grid[b-ucj8lulpur] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.spotlight-card[b-ucj8lulpur] {
    display: block;
    text-decoration: none;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.5) 0%,
        rgba(var(--wl-gold-rgb), 0.15) 50%,
        rgba(var(--wl-purple-rgb), 0.25) 100%);
    transition: all 0.3s ease;
}

.spotlight-card:hover[b-ucj8lulpur] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--wl-gold-rgb), 0.12);
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.7) 0%,
        rgba(var(--wl-gold-rgb), 0.25) 50%,
        rgba(var(--wl-purple-rgb), 0.35) 100%);
}

.spotlight-card-inner[b-ucj8lulpur] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--wl-bg-secondary);
    border-radius: 10px;
}

.spotlight-rank[b-ucj8lulpur] {
    display: flex;
    align-items: baseline;
    flex-shrink: 0;
}

.spotlight-rank-hash[b-ucj8lulpur] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: var(--wl-gold);
    opacity: 0.6;
}

.spotlight-rank-num[b-ucj8lulpur] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--wl-gold);
    line-height: 1;
}

.spotlight-cover[b-ucj8lulpur] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.spotlight-cover[b-ucj8lulpur]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.spotlight-cover-placeholder[b-ucj8lulpur] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-bg-tertiary);
}

.spotlight-cover-placeholder svg[b-ucj8lulpur] {
    width: 24px;
    height: 24px;
    color: var(--wl-text-muted);
    opacity: 0.4;
}

.spotlight-info[b-ucj8lulpur] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.spotlight-title[b-ucj8lulpur] {
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spotlight-meta[b-ucj8lulpur] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.spotlight-type[b-ucj8lulpur] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.spotlight-type.type-single[b-ucj8lulpur] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.spotlight-type.type-ep[b-ucj8lulpur] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    color: var(--wl-purple);
}

.spotlight-type.type-album[b-ucj8lulpur] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
}

.spotlight-points[b-ucj8lulpur] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
}

.spotlight-movement[b-ucj8lulpur] {
    flex-shrink: 0;
}

.movement-badge[b-ucj8lulpur] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
}

.movement-badge svg[b-ucj8lulpur] {
    width: 0.8rem;
    height: 0.8rem;
}

.movement-new[b-ucj8lulpur] {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.movement-rising[b-ucj8lulpur] {
    background: rgba(34, 197, 94, 0.15);
    color: var(--wl-green);
}

.movement-falling[b-ucj8lulpur] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: var(--wl-red);
}

.movement-stable[b-ucj8lulpur] {
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

/* ============================================
   TOP 3 PODIUM
   ============================================ */
.charts-podium[b-ucj8lulpur] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 0.75rem;
    align-items: end;
    padding: 1rem 0;
}

.podium-slot[b-ucj8lulpur] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 0.75rem;
    border-radius: 16px;
    border: 1px solid var(--wl-border-subtle);
    background: var(--wl-bg-secondary);
    position: relative;
    transition: all 0.3s ease;
}

.podium-slot:hover[b-ucj8lulpur] {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Gold - #1 */
.podium-gold[b-ucj8lulpur] {
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    background: linear-gradient(180deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        var(--wl-bg-secondary) 50%);
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}

.podium-gold:hover[b-ucj8lulpur] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    box-shadow: 0 8px 32px rgba(var(--wl-gold-rgb), 0.12);
}

/* Silver - #2 */
.podium-silver[b-ucj8lulpur] {
    border-color: rgba(192, 192, 192, 0.15);
    background: linear-gradient(180deg,
        rgba(192, 192, 192, 0.04) 0%,
        var(--wl-bg-secondary) 50%);
}

/* Bronze - #3 */
.podium-bronze[b-ucj8lulpur] {
    border-color: rgba(205, 127, 50, 0.15);
    background: linear-gradient(180deg,
        rgba(205, 127, 50, 0.04) 0%,
        var(--wl-bg-secondary) 50%);
}

.podium-crown[b-ucj8lulpur] {
    position: absolute;
    top: -14px;
    width: 32px;
    height: 32px;
    color: var(--wl-gold);
    animation: crownBob-b-ucj8lulpur 3s ease-in-out infinite;
}

.podium-crown svg[b-ucj8lulpur] {
    width: 100%;
    height: 100%;
}

@keyframes crownBob-b-ucj8lulpur {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.podium-medal[b-ucj8lulpur] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    line-height: 1;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: var(--wl-text-muted);
    border: 1px solid var(--wl-border-subtle);
}

.podium-medal--champion[b-ucj8lulpur] {
    width: 36px;
    height: 36px;
    font-size: 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
    border: none;
    box-shadow: 0 2px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.podium-silver .podium-medal[b-ucj8lulpur] {
    background: linear-gradient(135deg, #C0C0C0 0%, #888 100%);
    color: var(--wl-bg-primary);
    border: none;
}

.podium-bronze .podium-medal[b-ucj8lulpur] {
    background: linear-gradient(135deg, #CD7F32 0%, #8B5A2B 100%);
    color: var(--wl-bg-primary);
    border: none;
}

.podium-cover[b-ucj8lulpur] {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.podium-cover--large[b-ucj8lulpur] {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 0 2px rgba(var(--wl-gold-rgb), 0.15);
}

.podium-cover[b-ucj8lulpur]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.podium-cover-ph[b-ucj8lulpur] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-bg-tertiary);
}

.podium-cover-ph svg[b-ucj8lulpur] {
    width: 32px;
    height: 32px;
    color: var(--wl-text-muted);
    opacity: 0.3;
}

.podium-info[b-ucj8lulpur] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    text-align: center;
    max-width: 100%;
}

.podium-title[b-ucj8lulpur] {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

a.podium-title[b-ucj8lulpur] {
    text-decoration: none;
    transition: color 0.2s ease;
}

a.podium-title:hover[b-ucj8lulpur] {
    color: var(--wl-gold);
}

.podium-mine[b-ucj8lulpur] {
    color: var(--wl-gold-light);
}

.podium-artist[b-ucj8lulpur] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

a.podium-artist[b-ucj8lulpur] {
    text-decoration: none;
    transition: color 0.2s ease;
}

a.podium-artist:hover[b-ucj8lulpur],
a.podium-artist:focus-visible[b-ucj8lulpur] {
    color: var(--wl-gold);
}

.podium-points[b-ucj8lulpur] {
    font-size: 0.7rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--wl-text-muted);
    letter-spacing: 0.02em;
}

.podium-gold .podium-points[b-ucj8lulpur] {
    color: var(--wl-gold);
}

/* ============================================
   CHART LIST (POSITIONS 4+)
   ============================================ */
.charts-list-section[b-ucj8lulpur] {
    position: relative;
    z-index: 1;
}

.charts-list[b-ucj8lulpur] {
    background: var(--wl-bg-secondary);
    border-radius: 16px;
    border: 1px solid var(--wl-border-subtle);
    overflow: hidden;
}

.chart-row[b-ucj8lulpur] {
    display: grid;
    grid-template-columns: 48px 52px 44px 1fr auto 90px;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--wl-border-subtle);
    transition: background 0.2s ease;
    animation: chartRowSlideIn-b-ucj8lulpur 0.4s ease-out forwards;
    opacity: 0;
}

.chart-row:last-child[b-ucj8lulpur] {
    border-bottom: none;
}

.chart-row:hover[b-ucj8lulpur] {
    background: rgba(var(--wl-contrast-rgb), 0.02);
}

.chart-row--mine[b-ucj8lulpur] {
    background: rgba(var(--wl-gold-rgb), 0.04);
    border-left: 3px solid var(--wl-gold);
}

.chart-row--mine:hover[b-ucj8lulpur] {
    background: rgba(var(--wl-gold-rgb), 0.07);
}

/* Position */
.chart-pos[b-ucj8lulpur] {
    text-align: center;
}

.chart-pos-num[b-ucj8lulpur] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-text-secondary);
    line-height: 1;
}

.chart-pos-top10[b-ucj8lulpur] {
    font-size: 1.25rem;
    color: var(--wl-text-primary);
}

/* Movement */
.chart-movement[b-ucj8lulpur] {
    display: flex;
    justify-content: center;
}

.mv[b-ucj8lulpur] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.375rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
}

.mv svg[b-ucj8lulpur] {
    width: 0.75rem;
    height: 0.75rem;
}

.mv-new[b-ucj8lulpur] {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}

.mv-up[b-ucj8lulpur] {
    background: rgba(34, 197, 94, 0.12);
    color: var(--wl-green);
}

.mv-down[b-ucj8lulpur] {
    background: rgba(var(--wl-red-rgb), 0.12);
    color: var(--wl-red);
}

.mv-stable[b-ucj8lulpur] {
    color: var(--wl-text-muted);
}

/* Cover */
.chart-cover[b-ucj8lulpur] {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.chart-cover[b-ucj8lulpur]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chart-cover-ph[b-ucj8lulpur] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-bg-tertiary);
}

.chart-cover-ph svg[b-ucj8lulpur] {
    width: 22px;
    height: 22px;
    color: var(--wl-text-muted);
    opacity: 0.3;
}

/* Info */
.chart-info[b-ucj8lulpur] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.chart-title[b-ucj8lulpur] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-title--link[b-ucj8lulpur] {
    text-decoration: none;
    transition: color 0.2s ease;
}

.chart-title--link:hover[b-ucj8lulpur] {
    color: var(--wl-gold);
}

.chart-artist[b-ucj8lulpur] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.chart-artist[b-ucj8lulpur] {
    text-decoration: none;
    transition: color 0.2s ease;
}

a.chart-artist:hover[b-ucj8lulpur],
a.chart-artist:focus-visible[b-ucj8lulpur] {
    color: var(--wl-gold);
}

/* Type pill */
.chart-type[b-ucj8lulpur] {
    display: flex;
    justify-content: center;
}

.type-pill[b-ucj8lulpur] {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}

.type-pill.type-single[b-ucj8lulpur] {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
}

.type-pill.type-ep[b-ucj8lulpur] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    color: var(--wl-purple);
}

.type-pill.type-album[b-ucj8lulpur] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
}

/* Points */
.chart-pts[b-ucj8lulpur] {
    text-align: right;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.25rem;
}

.chart-pts-val[b-ucj8lulpur] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: var(--wl-text-primary);
    line-height: 1;
}

.chart-pts-label[b-ucj8lulpur] {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.charts-empty[b-ucj8lulpur] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    text-align: center;
    padding: 3rem 1.5rem;
}

.charts-empty-icon[b-ucj8lulpur] {
    width: 64px;
    height: 64px;
    color: rgba(var(--wl-gold-rgb), 0.3);
    margin-bottom: 1.5rem;
}

.charts-empty-icon svg[b-ucj8lulpur] {
    width: 100%;
    height: 100%;
}

.charts-empty h2[b-ucj8lulpur] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.charts-empty p[b-ucj8lulpur] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .charts-page[b-ucj8lulpur] {
        padding: 1rem;
        gap: 1.25rem;
    }

    .charts-title-group h1[b-ucj8lulpur] {
        font-size: 2.25rem;
    }

    /* Filters scroll horizontally */
    .charts-filters[b-ucj8lulpur] {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }

    .charts-filters[b-ucj8lulpur]::-webkit-scrollbar {
        display: none;
    }

    /* Podium stacks on narrow */
    .charts-podium[b-ucj8lulpur] {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0.5rem;
    }

    .podium-cover[b-ucj8lulpur] {
        width: 56px;
        height: 56px;
    }

    .podium-cover--large[b-ucj8lulpur] {
        width: 72px;
        height: 72px;
    }

    .podium-slot[b-ucj8lulpur] {
        padding: 1rem 0.5rem;
    }

    .podium-title[b-ucj8lulpur] {
        font-size: 0.75rem;
    }

    .podium-artist[b-ucj8lulpur] {
        font-size: 0.65rem;
    }

    /* Chart list compact */
    .chart-row[b-ucj8lulpur] {
        grid-template-columns: 36px 44px 40px 1fr 72px;
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
    }

    .chart-type[b-ucj8lulpur] {
        display: none;
    }

    .chart-pts-val[b-ucj8lulpur] {
        font-size: 0.95rem;
    }

    /* Spotlight */
    .spotlight-card-inner[b-ucj8lulpur] {
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }

    .spotlight-rank-num[b-ucj8lulpur] {
        font-size: 1.5rem;
    }

    .spotlight-cover[b-ucj8lulpur] {
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 480px) {
    .charts-podium[b-ucj8lulpur] {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }

    .podium-slot[b-ucj8lulpur] {
        flex-direction: row;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border-radius: 12px;
    }

    .podium-gold[b-ucj8lulpur] {
        padding: 1rem 1.25rem;
        order: -1;
    }

    .podium-crown[b-ucj8lulpur] {
        position: static;
        width: 24px;
        height: 24px;
    }

    .podium-cover[b-ucj8lulpur],
    .podium-cover--large[b-ucj8lulpur] {
        width: 56px;
        height: 56px;
        border-radius: 8px;
    }

    .podium-info[b-ucj8lulpur] {
        text-align: left;
        align-items: flex-start;
    }

    .podium-points[b-ucj8lulpur] {
        margin-left: auto;
    }

    .chart-row[b-ucj8lulpur] {
        grid-template-columns: 32px 40px 36px 1fr 60px;
        gap: 0.375rem;
        padding: 0.5rem;
    }

    .chart-pos-num[b-ucj8lulpur] {
        font-size: 0.9rem;
    }

    .chart-cover[b-ucj8lulpur] {
        width: 36px;
        height: 36px;
    }

    .chart-title[b-ucj8lulpur] {
        font-size: 0.8rem;
    }

    .chart-artist[b-ucj8lulpur] {
        font-size: 0.7rem;
    }
}
/* /Components/Pages/Career/Music/Releases/Create/Index.razor.rz.scp.css */
/* ============================================
   RELEASE WIZARD - Multi-step form with Hollywood Glamour
   ============================================ */

.release-wizard[b-7g3tln0izt] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

/* ============================================
   PROGRESS INDICATOR
   ============================================ */

.wizard-progress[b-7g3tln0izt] {
    margin-bottom: 2.5rem;
}

.progress-track[b-7g3tln0izt] {
    height: 4px;
    background: var(--wl-border-medium);
    border-radius: 2px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.progress-fill[b-7g3tln0izt] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold) 0%, var(--wl-gold-light) 100%);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.progress-steps[b-7g3tln0izt] {
    display: flex;
    justify-content: space-between;
}

.step[b-7g3tln0izt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    cursor: pointer;
    transition: all 0.3s ease;
}

.step:disabled[b-7g3tln0izt] {
    cursor: not-allowed;
}

.step:not(.active):not(.completed):hover:not(:disabled)[b-7g3tln0izt] {
    color: var(--wl-text-muted);
}

.step.active[b-7g3tln0izt] {
    color: var(--wl-gold);
}

.step.completed[b-7g3tln0izt] {
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.step-number[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.15);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    transition: all 0.3s ease;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.step-number-active[b-7g3tln0izt] {
    background: var(--wl-gold) !important;
    border-color: var(--wl-gold) !important;
    color: var(--wl-bg-primary) !important;
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
}

.step-number-completed[b-7g3tln0izt] {
    background: rgba(74, 222, 128, 0.15) !important;
    border-color: rgba(74, 222, 128, 0.5) !important;
    color: #4ade80 !important;
}

.step-number-completed[b-7g3tln0izt]  svg {
    width: 1.25rem;
    height: 1.25rem;
}

.step-label[b-7g3tln0izt] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
}

/* ============================================
   WIZARD CONTENT
   ============================================ */

.wizard-content[b-7g3tln0izt] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 2rem;
    min-height: 400px;
    margin-bottom: 1.5rem;
}

.wizard-step h2[b-7g3tln0izt] {
    font-size: 1.75rem;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem 0;
}

.step-description[b-7g3tln0izt] {
    color: var(--wl-text-muted);
    margin: 0 0 2rem 0;
}

/* Form Groups */
.form-group[b-7g3tln0izt] {
    margin-bottom: 1.5rem;
}

.form-group > label[b-7g3tln0izt] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-group input[type="text"][b-7g3tln0izt],
.form-group input[type="number"][b-7g3tln0izt],
.form-group input[type="datetime-local"][b-7g3tln0izt] {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.form-group input:focus[b-7g3tln0izt] {
    border-color: var(--wl-gold);
    background: var(--wl-border-medium);
}

.char-count[b-7g3tln0izt] {
    display: block;
    text-align: right;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin-top: 0.25rem;
}

/* ============================================
   STEP 1: TYPE SELECTOR
   ============================================ */

.type-selector[b-7g3tln0izt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.cadence-info[b-7g3tln0izt] {
    margin-top: 0.75rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.06);
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.type-option[b-7g3tln0izt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 2px solid var(--wl-border-medium);
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.type-option:hover[b-7g3tln0izt] {
    background: var(--wl-border-subtle);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
}

.type-option.selected[b-7g3tln0izt] {
    background: var(--wl-gold-bg);
    border-color: var(--wl-gold);
}

.type-icon[b-7g3tln0izt] {
    display: flex;
    width: 3rem;
    height: 3rem;
    color: var(--wl-text-muted);
}

.type-option.selected .type-icon[b-7g3tln0izt] {
    color: var(--wl-gold);
}

.type-icon[b-7g3tln0izt]  svg {
    width: 100%;
    height: 100%;
}

.type-name[b-7g3tln0izt] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.type-info[b-7g3tln0izt] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

/* Hype Info */
.hype-info[b-7g3tln0izt] {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-radius: 0.5rem;
    border: 1px solid transparent;
    margin-top: 1rem;
    transition: all 0.3s ease;
}

.hype-cost[b-7g3tln0izt],
.hype-current[b-7g3tln0izt],
.release-quota[b-7g3tln0izt] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.hype-info .label[b-7g3tln0izt] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
}

.hype-cost .value[b-7g3tln0izt] {
    color: #ff6b6b;
    font-weight: 600;
}

.hype-current .value[b-7g3tln0izt] {
    color: var(--wl-gold);
    font-weight: 600;
}

/* Release-quota state - mirrors the hype indicator's ok/low switch. */
.release-quota .quota-ok[b-7g3tln0izt] {
    color: var(--wl-green);
    font-weight: 600;
}

.release-quota .quota-full[b-7g3tln0izt] {
    color: var(--wl-red);
    font-weight: 600;
}

/* Hype Warning State */
.hype-info.hype-insufficient[b-7g3tln0izt] {
    border: 1px solid rgba(var(--wl-red-rgb), 0.4);
    background: rgba(var(--wl-red-rgb), 0.08);
}

.hype-info.hype-insufficient .hype-current .value[b-7g3tln0izt] {
    color: #ef4444;
}

.hype-warning[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.35);
    border-radius: 0.5rem;
    color: #f87171;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: help;
    animation: pulse-warning-b-7g3tln0izt 2s ease-in-out infinite;
}

.hype-warning svg[b-7g3tln0izt] {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    color: #ef4444;
}

@keyframes pulse-warning-b-7g3tln0izt {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--wl-red-rgb), 0.3);
    }
    50% {
        box-shadow: 0 0 8px 2px rgba(var(--wl-red-rgb), 0.2);
    }
}

/* ============================================
   STEP 2: TRACKS
   ============================================ */

.track-requirements[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

.req-label[b-7g3tln0izt] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
}

.req-value[b-7g3tln0izt] {
    color: var(--wl-text-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.req-current[b-7g3tln0izt] {
    margin-left: auto;
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.req-current.count-empty[b-7g3tln0izt] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.req-current.count-partial[b-7g3tln0izt] {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
}

.req-current.count-valid[b-7g3tln0izt] {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.tracks-grid[b-7g3tln0izt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.available-songs h3[b-7g3tln0izt],
.selected-songs h3[b-7g3tln0izt] {
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--wl-border-medium);
}

.song-item[b-7g3tln0izt],
.track-item[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.625rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.song-item:hover[b-7g3tln0izt] {
    background: rgba(var(--wl-gold-rgb), 0.08);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    transform: translateX(4px);
}

.track-item[b-7g3tln0izt] {
    cursor: default;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-color: var(--wl-border-medium);
}

.track-item:hover[b-7g3tln0izt] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

/* Drag & Drop styles */
.tracklist-container[b-7g3tln0izt] {
    display: flex;
    flex-direction: column;
}

.track-item[b-7g3tln0izt] {
    cursor: grab;
    user-select: none;
}

.track-item:active[b-7g3tln0izt] {
    cursor: grabbing;
}

.track-item.dragging[b-7g3tln0izt] {
    opacity: 0.5;
    background: var(--wl-gold-bg);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.track-item.drag-over[b-7g3tln0izt] {
    border-color: var(--wl-gold);
    background: var(--wl-gold-bg-hover);
    box-shadow: 0 0 0 2px var(--wl-gold-border);
}

.drag-handle[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-text-muted);
    cursor: grab;
    transition: color 0.2s ease;
    flex-shrink: 0;
}

.drag-handle:active[b-7g3tln0izt] {
    cursor: grabbing;
}

.track-item:hover .drag-handle[b-7g3tln0izt] {
    color: rgba(var(--wl-gold-rgb), 0.7);
}

.drag-handle[b-7g3tln0izt]  svg {
    width: 100%;
    height: 100%;
}

.song-title[b-7g3tln0izt],
.track-title[b-7g3tln0izt] {
    flex: 1;
    color: var(--wl-text-primary);
    font-weight: 500;
}

.song-quality[b-7g3tln0izt],
.track-quality[b-7g3tln0izt] {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    font-variant-numeric: tabular-nums;
}

.song-quality.quality-legendary[b-7g3tln0izt],
.track-quality.quality-legendary[b-7g3tln0izt] {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.25);
}

.song-quality.quality-excellent[b-7g3tln0izt],
.track-quality.quality-excellent[b-7g3tln0izt] {
    color: var(--wl-purple);
    background: rgba(var(--wl-purple-rgb), 0.15);
}

.song-quality.quality-good[b-7g3tln0izt],
.track-quality.quality-good[b-7g3tln0izt] {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.15);
}

.song-quality.quality-average[b-7g3tln0izt],
.track-quality.quality-average[b-7g3tln0izt] {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}

.song-quality.quality-poor[b-7g3tln0izt],
.track-quality.quality-poor[b-7g3tln0izt] {
    color: rgba(var(--wl-contrast-rgb), 0.4);
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.add-icon[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    background: var(--wl-gold-bg-hover);
    border-radius: 50%;
    color: var(--wl-gold);
    transition: all 0.2s ease;
}

.add-icon[b-7g3tln0izt]  svg {
    width: 1rem;
    height: 1rem;
}

.song-item:hover .add-icon[b-7g3tln0izt] {
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
}

.track-number[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    background: var(--wl-border-medium);
    border-radius: 50%;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.remove-btn[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: none;
    border-radius: 50%;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remove-btn[b-7g3tln0izt]  svg {
    width: 0.875rem;
    height: 0.875rem;
}

.remove-btn:hover[b-7g3tln0izt] {
    background: rgba(var(--wl-red-rgb), 0.25);
    color: #f87171;
}

.no-songs[b-7g3tln0izt],
.no-tracks[b-7g3tln0izt] {
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-align: center;
    padding: 2rem;
}

/* ============================================
   STEP 3: PHYSICAL + COVER
   ============================================ */

.cover-section[b-7g3tln0izt],
.physical-section[b-7g3tln0izt] {
    margin-bottom: 2rem;
}

.cover-section h3[b-7g3tln0izt],
.physical-section h3[b-7g3tln0izt] {
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0 0 1rem 0;
}

.section-hint[b-7g3tln0izt] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin: -0.5rem 0 1rem 0;
}

.cover-layout[b-7g3tln0izt] {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.cover-preview[b-7g3tln0izt] {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 0.75rem;
    overflow: hidden;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 2px dashed rgba(var(--wl-contrast-rgb), 0.15);
    flex-shrink: 0;
}

.cover-controls[b-7g3tln0izt] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cover-preview[b-7g3tln0izt]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cover-placeholder[b-7g3tln0izt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 0.5rem;
    color: var(--wl-text-muted);
}

.cover-placeholder svg[b-7g3tln0izt] {
    width: 3rem;
    height: 3rem;
}

.cover-loading[b-7g3tln0izt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 1rem;
    color: var(--wl-gold);
    font-size: 0.875rem;
}

.loading-spinner[b-7g3tln0izt] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-7g3tln0izt 1s linear infinite;
}

@keyframes spin-b-7g3tln0izt {
    to { transform: rotate(360deg); }
}

.cover-overlay-actions[b-7g3tln0izt] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    gap: 0.375rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cover-preview:hover .cover-overlay-actions[b-7g3tln0izt] {
    opacity: 1;
}

.cover-download-btn[b-7g3tln0izt],
.cover-remove-btn[b-7g3tln0izt] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-bg-tertiary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.cover-download-btn[b-7g3tln0izt] {
    color: var(--wl-gold);
}

.cover-download-btn:hover[b-7g3tln0izt] {
    background: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold-light);
}

.cover-remove-btn[b-7g3tln0izt] {
    color: #ff6b6b;
}

.cover-remove-btn:hover[b-7g3tln0izt] {
    background: rgba(255, 107, 107, 0.3);
}

.cover-download-btn svg[b-7g3tln0izt],
.cover-remove-btn svg[b-7g3tln0izt] {
    width: 1rem;
    height: 1rem;
}

.cover-error[b-7g3tln0izt] {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 0.375rem;
    color: #ff6b6b;
    font-size: 0.875rem;
}

.cover-actions[b-7g3tln0izt] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cover-action-btn[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cover-action-btn:hover:not(:disabled)[b-7g3tln0izt] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
}

.cover-action-btn:disabled[b-7g3tln0izt] {
    opacity: 0.4;
    cursor: not-allowed;
}

.cover-action-btn svg[b-7g3tln0izt] {
    width: 1rem;
    height: 1rem;
}

.cover-action-btn.upload-btn[b-7g3tln0izt] {
    position: relative;
}

.cover-action-btn.upload-btn input[type="file"][b-7g3tln0izt] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.cover-action-btn.ai-btn[b-7g3tln0izt] {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

.cover-action-btn.ai-btn:hover:not(:disabled)[b-7g3tln0izt] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.25) 0%, var(--wl-gold-bg) 100%);
    border-color: var(--wl-gold);
    box-shadow: 0 0 15px var(--wl-gold-border);
}

.cover-action-btn.ai-btn:disabled[b-7g3tln0izt] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-color: var(--wl-border-medium);
    color: var(--wl-text-muted);
}

.cover-hint[b-7g3tln0izt] {
    margin-top: auto;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    padding-top: 0.5rem;
}

@media (max-width: 600px) {
    .cover-layout[b-7g3tln0izt] {
        flex-direction: column;
    }

    .cover-preview[b-7g3tln0izt] {
        width: 100%;
        max-width: 280px;
    }

    .cover-actions[b-7g3tln0izt] {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

.physical-option[b-7g3tln0izt] {
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
}

.physical-option.enabled[b-7g3tln0izt] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.05);
}

.option-toggle[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.option-toggle input[type="checkbox"][b-7g3tln0izt] {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--wl-gold);
}

.toggle-label[b-7g3tln0izt] {
    font-weight: 600;
    color: var(--wl-text-primary);
}

.option-config[b-7g3tln0izt] {
    display: grid;
    grid-template-columns: 180px 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--wl-border-medium);
}

.physical-cover-config[b-7g3tln0izt] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.physical-cover-preview[b-7g3tln0izt] {
    width: 104px;
    height: 104px;
    border: 1px solid var(--wl-border-medium);
    background: rgba(var(--wl-contrast-rgb), 0.04);
    overflow: hidden;
}

.physical-cover-preview[b-7g3tln0izt]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.physical-cover-placeholder[b-7g3tln0izt],
.physical-cover-loading[b-7g3tln0izt] {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: var(--wl-text-muted);
}

.physical-cover-placeholder svg[b-7g3tln0izt] {
    width: 34px;
    height: 34px;
    opacity: 0.55;
}

.physical-cover-actions[b-7g3tln0izt] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.physical-cover-btn[b-7g3tln0izt] {
    position: relative;
    min-height: 30px;
    padding: 0 0.55rem;
    border: 1px solid var(--wl-border-medium);
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
}

.physical-cover-btn:hover:not(:disabled)[b-7g3tln0izt] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

.physical-cover-btn:disabled[b-7g3tln0izt] {
    opacity: 0.45;
    cursor: not-allowed;
}

.physical-cover-btn input[type="file"][b-7g3tln0izt] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.physical-cover-btn.danger[b-7g3tln0izt] {
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.35);
}

.config-field[b-7g3tln0izt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.config-field label[b-7g3tln0izt] {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.field-input-group[b-7g3tln0izt] {
    display: flex;
    align-items: stretch;
    height: 2.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.field-input-group:focus-within[b-7g3tln0izt] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
}

.field-input-group input[b-7g3tln0izt] {
    flex: 1;
    padding: 0 0.75rem;
    background: transparent;
    border: none;
    color: var(--wl-text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    min-width: 0;
}

.field-input-group input:focus[b-7g3tln0izt] {
    outline: none;
}

.field-suffix[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-size: 0.8rem;
    border-left: 1px solid var(--wl-border-medium);
}

.field-hint[b-7g3tln0izt] {
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

/* Price Control - Slider with range labels */
.price-control[b-7g3tln0izt] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.625rem;
    height: 2.75rem;
    padding: 0 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
}

.price-range-label[b-7g3tln0izt] {
    font-size: 0.7rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    font-variant-numeric: tabular-nums;
}

.price-slider[b-7g3tln0izt] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: var(--wl-surface-primary);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.price-slider[b-7g3tln0izt]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(var(--wl-gold-rgb), 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.price-slider[b-7g3tln0izt]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(var(--wl-gold-rgb), 0.5);
}

.price-slider[b-7g3tln0izt]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 6px rgba(var(--wl-gold-rgb), 0.4);
}

.price-value[b-7g3tln0izt] {
    min-width: 50px;
    padding: 0.375rem 0.625rem;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
    border-radius: 0.375rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .option-config[b-7g3tln0izt] {
        grid-template-columns: 1fr 1fr;
    }

    .physical-cover-config[b-7g3tln0izt] {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
    }
}

@media (max-width: 500px) {
    .option-config[b-7g3tln0izt] {
        grid-template-columns: 1fr;
    }

    .physical-cover-config[b-7g3tln0izt] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================
   STEP 4: PREVIEW
   ============================================ */

.preview-card[b-7g3tln0izt] {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    margin-bottom: 2rem;
}

.preview-cover[b-7g3tln0izt] {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 0.75rem;
    overflow: hidden;
    background: rgba(var(--wl-bg-secondary-rgb), 1);
    flex-shrink: 0;
}

.preview-cover[b-7g3tln0izt]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.preview-cover .cover-placeholder[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(var(--wl-contrast-rgb), 0.2);
}

.preview-cover .cover-placeholder svg[b-7g3tln0izt] {
    width: 40%;
    height: 40%;
}

.type-badge[b-7g3tln0izt] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 0.25rem;
}

.preview-details[b-7g3tln0izt] {
    flex: 1;
}

.preview-title[b-7g3tln0izt] {
    font-size: 1.5rem;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem 0;
    text-transform: none;
    letter-spacing: 0;
}

.preview-tracks[b-7g3tln0izt] {
    color: var(--wl-text-muted);
    margin: 0 0 1rem 0;
}

.preview-physical[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.preview-physical .label[b-7g3tln0izt] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
}

.edition-badge[b-7g3tln0izt] {
    padding: 0.25rem 0.5rem;
    background: var(--wl-border-medium);
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: var(--wl-text-primary);
}

/* Schedule Section */
.schedule-section[b-7g3tln0izt] {
    margin-bottom: 2rem;
}

.schedule-section h3[b-7g3tln0izt] {
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0 0 0.75rem 0;
}

.release-delay-select[b-7g3tln0izt] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 1rem;
    cursor: pointer;
}

.release-date-preview[b-7g3tln0izt] {
    margin-top: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-gold-rgb), 0.08);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.production-info[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: var(--wl-text-muted);
}

/* Cost Summary */
.cost-summary[b-7g3tln0izt] {
    padding: 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
}

.cost-summary h3[b-7g3tln0izt] {
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0 0 1rem 0;
}

.cost-row[b-7g3tln0izt] {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.cost-row.total[b-7g3tln0izt] {
    border-top: 1px solid var(--wl-border-medium);
    margin-top: 0.5rem;
    padding-top: 1rem;
    font-weight: 600;
    color: var(--wl-gold);
}

/* ============================================
   NAVIGATION
   ============================================ */

.wizard-nav[b-7g3tln0izt] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.nav-btn[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-btn:disabled[b-7g3tln0izt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.nav-btn svg[b-7g3tln0izt] {
    width: 1.25rem;
    height: 1.25rem;
}

.btn-back[b-7g3tln0izt] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.btn-back:hover:not(:disabled)[b-7g3tln0izt] {
    background: var(--wl-border-medium);
}

.btn-next[b-7g3tln0izt] {
    background: var(--wl-border-medium);
    color: var(--wl-text-primary);
    margin-left: auto;
}

.btn-next:hover:not(:disabled)[b-7g3tln0izt] {
    background: var(--wl-surface-primary);
}

.btn-create[b-7g3tln0izt] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    color: var(--wl-bg-primary);
}

.btn-create:hover:not(:disabled)[b-7g3tln0izt] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.3);
}

.create-btn-wrapper[b-7g3tln0izt] {
    margin-left: auto;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .release-wizard[b-7g3tln0izt] {
        padding: 1rem;
    }

    .wizard-content[b-7g3tln0izt] {
        padding: 1.5rem;
    }

    .type-selector[b-7g3tln0izt] {
        grid-template-columns: 1fr;
    }

    .tracks-grid[b-7g3tln0izt] {
        grid-template-columns: 1fr;
    }

    .preview-card[b-7g3tln0izt] {
        flex-direction: column;
    }

    .preview-cover[b-7g3tln0izt] {
        width: 100%;
        height: 200px;
    }

    .step-label[b-7g3tln0izt] {
        display: none;
    }
}

/*
 * Phones (down to ~360px): keep each available/selected song row on one line
 * with its title truncating instead of pushing the add (+) / remove (x) button
 * off-screen. The action button must always stay visible and tappable so a song
 * can be added to or removed from the tracklist.
 */
@media (max-width: 480px) {
    .song-item[b-7g3tln0izt],
    .track-item[b-7g3tln0izt] {
        gap: 0.5rem;
        padding: 0.625rem 0.75rem;
    }

    .song-title[b-7g3tln0izt],
    .track-title[b-7g3tln0izt] {
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .add-icon[b-7g3tln0izt],
    .remove-btn[b-7g3tln0izt],
    .track-number[b-7g3tln0izt],
    .drag-handle[b-7g3tln0izt] {
        flex-shrink: 0;
    }
}

/* ============================================
   AI COVER GENERATOR WIZARD
   ============================================ */

.diamond-cost[b-7g3tln0izt] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    background: rgba(96, 165, 250, 0.15);
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #60a5fa;
}

.diamond-icon[b-7g3tln0izt] {
    width: 0.875rem;
    height: 0.875rem;
}

.ai-wizard-overlay[b-7g3tln0izt] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    z-index: 100;
}

.ai-wizard[b-7g3tln0izt] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    background: var(--wl-bg-secondary, var(--wl-bg-secondary));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    z-index: 101;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px var(--wl-shadow-color);
}

.ai-wizard-header[b-7g3tln0izt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--wl-border-medium);
}

.ai-wizard-header h4[b-7g3tln0izt] {
    margin: 0;
    font-size: 1.25rem;
    color: var(--wl-gold);
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.05em;
}

.wizard-close[b-7g3tln0izt] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: none;
    border-radius: 50%;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wizard-close:hover[b-7g3tln0izt] {
    background: var(--wl-border-medium);
    color: var(--wl-text-primary);
}

.ai-wizard-content[b-7g3tln0izt] {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.wizard-group[b-7g3tln0izt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.group-label[b-7g3tln0izt] {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.radio-grid[b-7g3tln0izt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.radio-grid-wide[b-7g3tln0izt] {
    grid-template-columns: repeat(2, 1fr);
}

.radio-option[b-7g3tln0izt] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.radio-option input[type="radio"][b-7g3tln0izt] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-option span[b-7g3tln0izt] {
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.radio-option:hover[b-7g3tln0izt] {
    background: var(--wl-border-subtle);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
}

.radio-option.selected[b-7g3tln0izt] {
    background: var(--wl-gold-bg-hover);
    border-color: var(--wl-gold);
}

.radio-option.selected span[b-7g3tln0izt] {
    color: var(--wl-gold);
    font-weight: 600;
}

.notes-input[b-7g3tln0izt] {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.9rem;
    resize: vertical;
    font-family: inherit;
}

.notes-input:focus[b-7g3tln0izt] {
    border-color: var(--wl-gold);
    outline: none;
}

.notes-input[b-7g3tln0izt]::placeholder {
    color: var(--wl-text-muted);
}

.ai-wizard-footer[b-7g3tln0izt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--wl-border-medium);
    background: var(--wl-surface-primary);
}

.diamond-balance[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.balance-label[b-7g3tln0izt] {
    font-size: 0.85rem;
    color: var(--wl-text-muted);
}

.balance-value[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 1rem;
    font-weight: 600;
    color: #60a5fa;
}

.balance-value .diamond-icon[b-7g3tln0izt] {
    width: 1rem;
    height: 1rem;
}

.generate-btn[b-7g3tln0izt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    border: none;
    border-radius: 0.5rem;
    color: var(--wl-bg-primary);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.generate-btn:hover:not(:disabled)[b-7g3tln0izt] {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.4);
}

.generate-btn:disabled[b-7g3tln0izt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.generate-btn svg[b-7g3tln0izt] {
    width: 1rem;
    height: 1rem;
}

.spinner-small[b-7g3tln0izt] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-7g3tln0izt 1s linear infinite;
}

@media (max-width: 640px) {
    .ai-wizard[b-7g3tln0izt] {
        width: 95%;
        max-height: 90vh;
    }

    .radio-grid[b-7g3tln0izt] {
        grid-template-columns: repeat(2, 1fr);
    }

    .radio-grid-wide[b-7g3tln0izt] {
        grid-template-columns: 1fr;
    }

    .ai-wizard-footer[b-7g3tln0izt] {
        flex-direction: column;
        gap: 1rem;
    }

    .generate-btn[b-7g3tln0izt] {
        width: 100%;
        justify-content: center;
    }
}

/* Share on board checkbox - was a bare native input with OS accent color */
.share-checkbox[b-7g3tln0izt] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--wl-text-secondary);
    cursor: pointer;
    user-select: none;
}

.share-checkbox input[type="checkbox"][b-7g3tln0izt] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--wl-gold);
    cursor: pointer;
}

.share-checkbox:hover[b-7g3tln0izt] {
    color: var(--wl-text-primary);
}
/* /Components/Pages/Career/Music/Releases/Details.razor.rz.scp.css */
/* Release Details - AAA+++ Cinematic Hollywood Glamour */

/* ═══════════════════════════════════════════════════════════════════════════
   ROOT & CONTAINER
   ═══════════════════════════════════════════════════════════════════════════ */

.release-details[b-l9t4kmtrbt] {
    min-height: 100vh;
    background: var(--wl-bg-primary);
    position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOADING STATE - Vinyl Spinner
   ═══════════════════════════════════════════════════════════════════════════ */

.loading-state[b-l9t4kmtrbt] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(180deg, var(--wl-bg-primary) 0%, var(--wl-bg-primary) 100%);
}

.vinyl-loader[b-l9t4kmtrbt] {
    position: relative;
    width: 120px;
    height: 120px;
}

.vinyl-disc[b-l9t4kmtrbt] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wl-bg-secondary) 0%, var(--wl-bg-primary) 100%);
    box-shadow:
        0 0 0 2px var(--wl-gold-border),
        0 20px 60px var(--wl-shadow-color),
        inset 0 0 30px var(--wl-shadow-color);
    animation: vinylSpin-b-l9t4kmtrbt 2s linear infinite;
    position: relative;
}

.vinyl-grooves[b-l9t4kmtrbt] {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: repeating-radial-gradient(
        circle at center,
        transparent 0px,
        transparent 2px,
        rgba(var(--wl-contrast-rgb), 0.03) 2px,
        rgba(var(--wl-contrast-rgb), 0.03) 4px
    );
}

.vinyl-label[b-l9t4kmtrbt] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35%;
    height: 35%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
}

@keyframes vinylSpin-b-l9t4kmtrbt {
    to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ERROR STATE
   ═══════════════════════════════════════════════════════════════════════════ */

.error-state[b-l9t4kmtrbt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    gap: 1.5rem;
    padding: 2rem;
    text-align: center;
}

.error-icon[b-l9t4kmtrbt] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(var(--wl-red-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-icon :deep(svg)[b-l9t4kmtrbt] {
    width: 40px;
    height: 40px;
    color: #ef4444;
}

.error-state p[b-l9t4kmtrbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.btn-back[b-l9t4kmtrbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-back[b-l9t4kmtrbt]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(var(--wl-contrast-rgb), 0.2) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.btn-back:hover[b-l9t4kmtrbt]::before {
    transform: translateX(100%);
}

.btn-back:hover[b-l9t4kmtrbt] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--wl-gold-rgb), 0.4);
}

.btn-back-icon :deep(svg)[b-l9t4kmtrbt] {
    width: 1.25rem;
    height: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO HEADER - Cinematic Atmosphere
   ═══════════════════════════════════════════════════════════════════════════ */

.details-header[b-l9t4kmtrbt] {
    position: relative;
    padding: 2rem;
    padding-top: 1.5rem;
    min-height: 400px;
    overflow: hidden;
}

/* Ambient glow from cover art */
.header-ambient[b-l9t4kmtrbt] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        transparent 50%);
    pointer-events: none;
    animation: ambientPulse-b-l9t4kmtrbt 8s ease-in-out infinite;
}

@keyframes ambientPulse-b-l9t4kmtrbt {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* CRT-style scanlines for atmosphere */
.header-scanlines[b-l9t4kmtrbt] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
}

/* Cinematic vignette */
.header-vignette[b-l9t4kmtrbt] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        transparent 40%,
        rgba(var(--wl-contrast-rgb), 0.05) 100%);
    pointer-events: none;
}

.header-content[b-l9t4kmtrbt] {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 1;
}

/* Back Link */
.back-link[b-l9t4kmtrbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 2rem;
    padding: 0.5rem 0;
    transition: all 0.3s ease;
}

.back-link:hover[b-l9t4kmtrbt] {
    color: var(--wl-gold);
}

.back-link:hover .back-link-icon[b-l9t4kmtrbt] {
    transform: translateX(-4px);
}

.back-link-icon[b-l9t4kmtrbt] {
    display: flex;
    transition: transform 0.3s ease;
}

.back-link-icon :deep(svg)[b-l9t4kmtrbt] {
    width: 1rem;
    height: 1rem;
}

/* Hero Layout */
.release-hero[b-l9t4kmtrbt] {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COVER ARTWORK - Vinyl Record Aesthetic
   ═══════════════════════════════════════════════════════════════════════════ */

.cover-container[b-l9t4kmtrbt] {
    position: relative;
    flex-shrink: 0;
}

.cover-edit-btn[b-l9t4kmtrbt] {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    border-radius: 100px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.75);
    backdrop-filter: blur(6px);
    color: var(--wl-gold);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.cover-container:hover .cover-edit-btn[b-l9t4kmtrbt],
.cover-edit-btn:focus-visible[b-l9t4kmtrbt] {
    opacity: 1;
}

.cover-edit-btn:hover[b-l9t4kmtrbt] {
    background: rgba(var(--wl-bg-secondary-rgb), 0.9);
}

.cover-edit-btn svg[b-l9t4kmtrbt] {
    width: 14px;
    height: 14px;
}

@media (hover: none) {
    /* Touch devices have no hover - keep the affordance visible. */
    .cover-edit-btn[b-l9t4kmtrbt] { opacity: 1; }
}

.cover-vinyl-shadow[b-l9t4kmtrbt] {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 280px;
    height: 280px;
    border-radius: 12px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    filter: blur(30px);
}

.cover-artwork[b-l9t4kmtrbt] {
    position: relative;
    width: 300px;
    height: 300px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px var(--wl-gold-bg-hover),
        0 25px 50px var(--wl-shadow-color);
    animation: coverReveal-b-l9t4kmtrbt 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes coverReveal-b-l9t4kmtrbt {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.cover-artwork[b-l9t4kmtrbt]  img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder layer behind the cover - revealed when there is no cover or the
   image 404s (onerror hides the <img> and adds the --placeholder class). */
.cover-placeholder[b-l9t4kmtrbt] {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-bg-secondary) 0%, var(--wl-bg-primary) 100%);
}

.cover-artwork--placeholder .cover-placeholder[b-l9t4kmtrbt] {
    display: flex;
}

.cover-placeholder :deep(svg)[b-l9t4kmtrbt] {
    width: 100px;
    height: 100px;
    color: rgba(var(--wl-gold-rgb), 0.3);
}

.cover-shine[b-l9t4kmtrbt] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(var(--wl-contrast-rgb), 0.15) 0%,
        transparent 40%,
        transparent 60%,
        rgba(var(--wl-contrast-rgb), 0.05) 100%);
    pointer-events: none;
}

.cover-reflection[b-l9t4kmtrbt] {
    position: absolute;
    bottom: -100%;
    left: 0;
    right: 0;
    height: 100%;
    background: inherit;
    transform: scaleY(-1);
    opacity: 0.1;
    filter: blur(10px);
    mask-image: linear-gradient(to top, black 0%, transparent 50%);
    -webkit-mask-image: linear-gradient(to top, black 0%, transparent 50%);
    pointer-events: none;
}

/* Art Deco corner decorations */
.cover-deco[b-l9t4kmtrbt] {
    position: absolute;
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.cover-deco[b-l9t4kmtrbt]::before,
.cover-deco[b-l9t4kmtrbt]::after {
    content: '';
    position: absolute;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
}

.cover-deco-tl[b-l9t4kmtrbt] {
    top: -8px;
    left: -8px;
}

.cover-deco-tl[b-l9t4kmtrbt]::before {
    width: 24px;
    height: 2px;
    top: 0;
    left: 0;
}

.cover-deco-tl[b-l9t4kmtrbt]::after {
    width: 2px;
    height: 24px;
    top: 0;
    left: 0;
}

.cover-deco-tr[b-l9t4kmtrbt] {
    top: -8px;
    right: -8px;
}

.cover-deco-tr[b-l9t4kmtrbt]::before {
    width: 24px;
    height: 2px;
    top: 0;
    right: 0;
}

.cover-deco-tr[b-l9t4kmtrbt]::after {
    width: 2px;
    height: 24px;
    top: 0;
    right: 0;
}

.cover-deco-bl[b-l9t4kmtrbt] {
    bottom: -8px;
    left: -8px;
}

.cover-deco-bl[b-l9t4kmtrbt]::before {
    width: 24px;
    height: 2px;
    bottom: 0;
    left: 0;
}

.cover-deco-bl[b-l9t4kmtrbt]::after {
    width: 2px;
    height: 24px;
    bottom: 0;
    left: 0;
}

.cover-deco-br[b-l9t4kmtrbt] {
    bottom: -8px;
    right: -8px;
}

.cover-deco-br[b-l9t4kmtrbt]::before {
    width: 24px;
    height: 2px;
    bottom: 0;
    right: 0;
}

.cover-deco-br[b-l9t4kmtrbt]::after {
    width: 2px;
    height: 24px;
    bottom: 0;
    right: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RELEASE INFO
   ═══════════════════════════════════════════════════════════════════════════ */

.release-info[b-l9t4kmtrbt] {
    flex: 1;
    padding-top: 0.5rem;
    animation: infoReveal-b-l9t4kmtrbt 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
}

@keyframes infoReveal-b-l9t4kmtrbt {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Type Badge */
.release-type-wrapper[b-l9t4kmtrbt] {
    margin-bottom: 1rem;
}

.release-type-badge[b-l9t4kmtrbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    border-radius: 2px;
    position: relative;
}

.badge-icon[b-l9t4kmtrbt] {
    display: flex;
}

.badge-icon :deep(svg)[b-l9t4kmtrbt] {
    width: 0.75rem;
    height: 0.75rem;
}

.release-type-badge.type-single[b-l9t4kmtrbt] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.release-type-badge.type-ep[b-l9t4kmtrbt] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.2), rgba(var(--wl-purple-rgb), 0.1));
    color: var(--wl-purple);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.3);
}

.release-type-badge.type-album[b-l9t4kmtrbt] {
    background: linear-gradient(135deg, var(--wl-gold-border), var(--wl-gold-bg));
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    box-shadow: 0 0 20px var(--wl-gold-bg);
}

/* Title */
.release-title[b-l9t4kmtrbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.5rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0 0 1rem 0;
    line-height: 1;
    letter-spacing: 0.02em;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.title-text[b-l9t4kmtrbt] {
    background: linear-gradient(180deg,
        var(--wl-text-primary) 0%,
        rgba(var(--wl-contrast-rgb), 0.9) 50%,
        rgba(var(--wl-contrast-rgb), 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Meta Info */
.release-meta[b-l9t4kmtrbt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.meta-item[b-l9t4kmtrbt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.9rem;
}

.meta-icon[b-l9t4kmtrbt] {
    display: flex;
    color: rgba(var(--wl-gold-rgb), 0.6);
}

.meta-icon :deep(svg)[b-l9t4kmtrbt] {
    width: 1rem;
    height: 1rem;
}

.meta-divider[b-l9t4kmtrbt] {
    display: flex;
    color: rgba(var(--wl-gold-rgb), 0.3);
}

.meta-divider :deep(svg)[b-l9t4kmtrbt] {
    width: 6px;
    height: 6px;
}

/* Status Badge */
.release-status-wrapper[b-l9t4kmtrbt] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.release-status[b-l9t4kmtrbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.25rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: default;
    transition: all 0.3s ease;
}

.status-indicator[b-l9t4kmtrbt] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: statusPulse-b-l9t4kmtrbt 2s ease-in-out infinite;
}

@keyframes statusPulse-b-l9t4kmtrbt {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.release-status.status-draft[b-l9t4kmtrbt] {
    background: rgba(107, 114, 128, 0.15);
    border: 1px solid rgba(107, 114, 128, 0.3);
    color: #9ca3af;
}

.release-status.status-draft .status-indicator[b-l9t4kmtrbt] {
    background: #9ca3af;
}

.release-status.status-production[b-l9t4kmtrbt] {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
}

.release-status.status-production .status-indicator[b-l9t4kmtrbt] {
    background: #60a5fa;
    animation: statusPulse-b-l9t4kmtrbt 1s ease-in-out infinite;
}

.release-status.status-scheduled[b-l9t4kmtrbt] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.3);
    color: var(--wl-purple);
    cursor: pointer;
}

.release-status.status-scheduled:hover[b-l9t4kmtrbt] {
    background: rgba(var(--wl-purple-rgb), 0.25);
    border-color: rgba(var(--wl-purple-rgb), 0.5);
}

.release-status.status-scheduled .status-indicator[b-l9t4kmtrbt] {
    background: var(--wl-purple);
}

.release-status.status-released[b-l9t4kmtrbt] {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.release-status.status-released .status-indicator[b-l9t4kmtrbt] {
    background: #4ade80;
}

.status-progress[b-l9t4kmtrbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    opacity: 0.9;
}

.status-countdown[b-l9t4kmtrbt] {
    display: flex;
    margin-left: 0.25rem;
}

.status-countdown :deep(svg)[b-l9t4kmtrbt] {
    width: 1rem;
    height: 1rem;
    opacity: 0.7;
}

/* Production Progress Bar */
.production-bar[b-l9t4kmtrbt] {
    width: 200px;
    height: 4px;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.production-bar-fill[b-l9t4kmtrbt] {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 2px;
    transition: width 0.5s ease;
}

.production-bar-glow[b-l9t4kmtrbt] {
    position: absolute;
    top: -4px;
    width: 20px;
    height: 12px;
    background: radial-gradient(ellipse at center, rgba(96, 165, 250, 0.6) 0%, transparent 70%);
    transform: translateX(-50%);
    transition: left 0.5s ease;
}

/* Hero Certificates */
.hero-certificates[b-l9t4kmtrbt] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.hero-cert[b-l9t4kmtrbt] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    animation: certFloat-b-l9t4kmtrbt 3s ease-in-out infinite;
}

.hero-cert:nth-child(2)[b-l9t4kmtrbt] { animation-delay: 0.5s; }
.hero-cert:nth-child(3)[b-l9t4kmtrbt] { animation-delay: 1s; }

@keyframes certFloat-b-l9t4kmtrbt {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.hero-cert :deep(svg)[b-l9t4kmtrbt] {
    width: 20px;
    height: 20px;
}

.hero-cert.cert-gold[b-l9t4kmtrbt] {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: #fbbf24;
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
}

.hero-cert.cert-platinum[b-l9t4kmtrbt] {
    background: linear-gradient(135deg, rgba(229, 231, 235, 0.2), rgba(229, 231, 235, 0.1));
    border: 1px solid rgba(229, 231, 235, 0.4);
    color: #e5e7eb;
    box-shadow: 0 0 15px rgba(229, 231, 235, 0.2);
}

.hero-cert.cert-diamond[b-l9t4kmtrbt] {
    background: linear-gradient(135deg, rgba(var(--wl-diamond-rgb), 0.2), rgba(var(--wl-diamond-rgb), 0.1));
    border: 1px solid rgba(var(--wl-diamond-rgb), 0.4);
    color: var(--wl-diamond);
    box-shadow: 0 0 15px rgba(var(--wl-diamond-rgb), 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════════════════════════════════════ */

.section-header[b-l9t4kmtrbt] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.section-header h2[b-l9t4kmtrbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--wl-gold);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
}

.section-line[b-l9t4kmtrbt] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        rgba(var(--wl-gold-rgb), 0.4) 0%,
        var(--wl-gold-bg) 100%);
}

.section-header .section-line:first-child[b-l9t4kmtrbt] {
    background: linear-gradient(90deg,
        var(--wl-gold-bg) 0%,
        rgba(var(--wl-gold-rgb), 0.4) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATS SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.stats-section[b-l9t4kmtrbt] {
    padding: 2.5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.stats-grid[b-l9t4kmtrbt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.stat-card[b-l9t4kmtrbt] {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-bg-secondary-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: statCardReveal-b-l9t4kmtrbt 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.stat-card:nth-child(1)[b-l9t4kmtrbt] { animation-delay: 0.1s; }
.stat-card:nth-child(2)[b-l9t4kmtrbt] { animation-delay: 0.2s; }
.stat-card:nth-child(3)[b-l9t4kmtrbt] { animation-delay: 0.3s; }
.stat-card:nth-child(4)[b-l9t4kmtrbt] { animation-delay: 0.4s; }

@keyframes statCardReveal-b-l9t4kmtrbt {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card:hover[b-l9t4kmtrbt] {
    transform: translateY(-4px);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.stat-card-bg[b-l9t4kmtrbt] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.stat-card:hover .stat-card-bg[b-l9t4kmtrbt] {
    opacity: 1;
}

.stat-card.stat-streams .stat-card-bg[b-l9t4kmtrbt] {
    background: radial-gradient(ellipse at bottom left, rgba(59, 130, 246, 0.1) 0%, transparent 60%);
}

.stat-card.stat-sales .stat-card-bg[b-l9t4kmtrbt] {
    background: radial-gradient(ellipse at bottom left, rgba(var(--wl-purple-rgb), 0.1) 0%, transparent 60%);
}

.stat-card.stat-chart .stat-card-bg[b-l9t4kmtrbt] {
    background: radial-gradient(ellipse at bottom left, var(--wl-gold-bg) 0%, transparent 60%);
}

.stat-card.stat-revenue .stat-card-bg[b-l9t4kmtrbt] {
    background: radial-gradient(ellipse at bottom left, rgba(34, 197, 94, 0.1) 0%, transparent 60%);
}

.stat-glow[b-l9t4kmtrbt] {
    position: absolute;
    bottom: -20px;
    left: 20%;
    width: 60%;
    height: 40px;
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.stat-card:hover .stat-glow[b-l9t4kmtrbt] {
    opacity: 1;
}

.stat-card.stat-streams .stat-glow[b-l9t4kmtrbt] { background: rgba(59, 130, 246, 0.3); }
.stat-card.stat-sales .stat-glow[b-l9t4kmtrbt] { background: rgba(var(--wl-purple-rgb), 0.3); }
.stat-card.stat-chart .stat-glow[b-l9t4kmtrbt] { background: rgba(var(--wl-gold-rgb), 0.3); }
.stat-card.stat-revenue .stat-glow[b-l9t4kmtrbt] { background: rgba(34, 197, 94, 0.3); }

.stat-icon[b-l9t4kmtrbt] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.stat-card.stat-streams .stat-icon[b-l9t4kmtrbt] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1));
    color: #3b82f6;
}

.stat-card.stat-sales .stat-icon[b-l9t4kmtrbt] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.2), rgba(var(--wl-purple-rgb), 0.1));
    color: var(--wl-purple);
}

.stat-card.stat-chart .stat-icon[b-l9t4kmtrbt] {
    background: linear-gradient(135deg, var(--wl-gold-border), var(--wl-gold-bg));
    color: var(--wl-gold);
}

.stat-card.stat-revenue .stat-icon[b-l9t4kmtrbt] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
    color: #22c55e;
}

.stat-icon :deep(svg)[b-l9t4kmtrbt] {
    width: 1.5rem;
    height: 1.5rem;
}

.stat-content[b-l9t4kmtrbt] {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.stat-content .stat-value[b-l9t4kmtrbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    line-height: 1;
    letter-spacing: 0.02em;
}

.stat-value.chart-highlight[b-l9t4kmtrbt] {
    color: var(--wl-gold);
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
}

.chart-hash[b-l9t4kmtrbt] {
    opacity: 0.5;
    font-size: 1.5rem;
}

.stat-card.top-ten[b-l9t4kmtrbt] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.05) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
}

.stat-content .stat-label[b-l9t4kmtrbt] {
    font-size: 0.7rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CERTIFICATES SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.certificates-section[b-l9t4kmtrbt] {
    padding: 0 2rem 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.certificates-grid[b-l9t4kmtrbt] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.certificate-card[b-l9t4kmtrbt] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-bg-secondary-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border-radius: 8px;
    border: 1px solid var(--wl-border-subtle);
    overflow: hidden;
    animation: certReveal-b-l9t4kmtrbt 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes certReveal-b-l9t4kmtrbt {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.cert-shine[b-l9t4kmtrbt] {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        var(--wl-border-medium) 0%,
        transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.certificate-card:hover .cert-shine[b-l9t4kmtrbt] {
    opacity: 1;
}

.cert-icon[b-l9t4kmtrbt] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cert-icon :deep(svg)[b-l9t4kmtrbt] {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 8px currentColor);
}

.certificate-card.cert-gold[b-l9t4kmtrbt] {
    border-color: rgba(251, 191, 36, 0.3);
}

.certificate-card.cert-gold .cert-icon[b-l9t4kmtrbt] {
    color: #fbbf24;
}

.certificate-card.cert-platinum[b-l9t4kmtrbt] {
    border-color: rgba(229, 231, 235, 0.3);
}

.certificate-card.cert-platinum .cert-icon[b-l9t4kmtrbt] {
    color: #e5e7eb;
}

.certificate-card.cert-diamond[b-l9t4kmtrbt] {
    border-color: rgba(var(--wl-diamond-rgb), 0.3);
}

.certificate-card.cert-diamond .cert-icon[b-l9t4kmtrbt] {
    color: var(--wl-diamond);
}

.cert-info[b-l9t4kmtrbt] {
    display: flex;
    flex-direction: column;
}

.cert-label[b-l9t4kmtrbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
}

.cert-date[b-l9t4kmtrbt] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.cert-deco[b-l9t4kmtrbt] {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    opacity: 0.05;
}

.certificate-card.cert-gold .cert-deco[b-l9t4kmtrbt] {
    background: radial-gradient(circle at bottom right, #fbbf24 0%, transparent 70%);
}

.certificate-card.cert-platinum .cert-deco[b-l9t4kmtrbt] {
    background: radial-gradient(circle at bottom right, #e5e7eb 0%, transparent 70%);
}

.certificate-card.cert-diamond .cert-deco[b-l9t4kmtrbt] {
    background: radial-gradient(circle at bottom right, var(--wl-diamond) 0%, transparent 70%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRACKLIST SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.tracklist-section[b-l9t4kmtrbt] {
    padding: 0 2rem 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.tracklist[b-l9t4kmtrbt] {
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-secondary-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    overflow: hidden;
}

.tracklist-header[b-l9t4kmtrbt] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(180deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        transparent 100%);
    border-bottom: 1px solid var(--wl-border-subtle);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.th-number[b-l9t4kmtrbt] {
    width: 2.5rem;
    text-align: center;
}

.th-title[b-l9t4kmtrbt] {
    flex: 1;
}

.th-duration[b-l9t4kmtrbt],
.th-hype[b-l9t4kmtrbt],
.th-streams[b-l9t4kmtrbt] {
    display: flex;
    justify-content: flex-end;
    min-width: 4rem;
}

.th-duration :deep(svg)[b-l9t4kmtrbt],
.th-streams :deep(svg)[b-l9t4kmtrbt] {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.4;
}

.tracklist-body[b-l9t4kmtrbt] {
    /* Container for tracks */
}

.track-item[b-l9t4kmtrbt] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.5rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    transition: all 0.2s ease;
    animation: trackReveal-b-l9t4kmtrbt 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes trackReveal-b-l9t4kmtrbt {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.track-item:last-child[b-l9t4kmtrbt] {
    border-bottom: none;
}

.track-item:hover[b-l9t4kmtrbt] {
    background: rgba(var(--wl-gold-rgb), 0.03);
}

.track-item:hover .track-number-text[b-l9t4kmtrbt] {
    opacity: 0;
}

.track-item:hover .track-play-icon[b-l9t4kmtrbt] {
    opacity: 1;
}

.track-item.promo-single[b-l9t4kmtrbt] {
    background: linear-gradient(90deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        transparent 50%);
}

.track-number[b-l9t4kmtrbt] {
    width: 2.5rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.track-number-text[b-l9t4kmtrbt] {
    font-size: 0.9rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.track-play-icon[b-l9t4kmtrbt] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.track-play-icon :deep(svg)[b-l9t4kmtrbt] {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--wl-gold);
}

.track-info[b-l9t4kmtrbt] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.track-title[b-l9t4kmtrbt] {
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.promo-badge[b-l9t4kmtrbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    border-radius: 3px;
    flex-shrink: 0;
}

.promo-badge :deep(svg)[b-l9t4kmtrbt] {
    width: 0.625rem;
    height: 0.625rem;
}

.track-duration[b-l9t4kmtrbt] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    min-width: 4rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.track-hype[b-l9t4kmtrbt] {
    min-width: 4rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 6px;
    background: rgba(var(--wl-gold-rgb), 0.06);
    color: var(--wl-gold);
    font-size: 0.78rem;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.track-hype:hover[b-l9t4kmtrbt],
.track-hype:focus-visible[b-l9t4kmtrbt] {
    border-color: rgba(var(--wl-gold-rgb), 0.48);
    background: rgba(var(--wl-gold-rgb), 0.12);
}

.track-hype:focus-visible[b-l9t4kmtrbt] {
    outline: 2px solid rgba(var(--wl-gold-rgb), 0.36);
    outline-offset: 2px;
}

.track-hype-static[b-l9t4kmtrbt] {
    display: inline-block;
    cursor: default;
}

.track-streams[b-l9t4kmtrbt] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    min-width: 5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tracklist-footer[b-l9t4kmtrbt] {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--wl-border-subtle);
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(var(--wl-contrast-rgb), 0.02) 100%);
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.total-duration[b-l9t4kmtrbt] {
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHYSICAL EDITIONS SECTION - Record Store Shelf
   ═══════════════════════════════════════════════════════════════════════════ */

.physical-section[b-l9t4kmtrbt] {
    padding: 0 2rem 2.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.editions-shelf[b-l9t4kmtrbt] {
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-secondary-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    overflow: hidden;
}

/* Row-based layout for each edition */
.edition-row[b-l9t4kmtrbt] {
    display: grid;
    grid-template-columns: 48px minmax(100px, 180px) 100px 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    transition: all 0.2s ease;
}

.edition-row:last-child[b-l9t4kmtrbt] {
    border-bottom: none;
}

.edition-row:hover[b-l9t4kmtrbt] {
    background: rgba(var(--wl-gold-rgb), 0.03);
}

.edition-row.sold-out[b-l9t4kmtrbt] {
    opacity: 0.6;
}

.edition-row.discounted[b-l9t4kmtrbt] {
    background: linear-gradient(90deg,
        rgba(249, 115, 22, 0.05) 0%,
        transparent 50%);
}

/* Media Icon Column */
.edition-media[b-l9t4kmtrbt] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}

.edition-row:hover .edition-media[b-l9t4kmtrbt] {
    transform: scale(1.05);
}

.edition-media :deep(svg)[b-l9t4kmtrbt] {
    width: 28px;
    height: 28px;
}

.edition-media[b-l9t4kmtrbt]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edition-cover-edit[b-l9t4kmtrbt] {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.45);
    background: rgba(var(--wl-bg-primary-rgb), 0.78);
    color: var(--wl-gold);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.edition-cover-edit:hover[b-l9t4kmtrbt] {
    background: rgba(var(--wl-bg-primary-rgb), 0.95);
}

.edition-cover-edit svg[b-l9t4kmtrbt] {
    width: 12px;
    height: 12px;
}

.edition-row:hover .edition-cover-edit[b-l9t4kmtrbt],
.edition-cover-edit:focus-visible[b-l9t4kmtrbt] {
    opacity: 1;
}

.edition-row.media-cd .edition-media[b-l9t4kmtrbt] {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.edition-row.media-vinyl .edition-media[b-l9t4kmtrbt] {
    color: var(--wl-purple);
    background: rgba(var(--wl-purple-rgb), 0.1);
}

.edition-row.media-boxset .edition-media[b-l9t4kmtrbt] {
    color: var(--wl-gold);
    background: var(--wl-gold-bg);
}

/* Format Name Column */
.edition-name[b-l9t4kmtrbt] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.format-label[b-l9t4kmtrbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
}

.discount-tag[b-l9t4kmtrbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8rem;
    color: #f97316;
    background: rgba(249, 115, 22, 0.15);
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    letter-spacing: 0.02em;
}

/* Price Column */
.edition-price-col[b-l9t4kmtrbt] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}

.price-old[b-l9t4kmtrbt] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    text-decoration: line-through;
}

.price-current[b-l9t4kmtrbt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-gold);
    letter-spacing: 0.02em;
}

.price-current.sale[b-l9t4kmtrbt] {
    color: #f97316;
}

/* Progress Column */
.edition-progress[b-l9t4kmtrbt] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 240px;
    justify-self: end;
}

.progress-info[b-l9t4kmtrbt] {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
}

.progress-sold[b-l9t4kmtrbt] {
    color: var(--wl-text-muted);
}

.progress-stock[b-l9t4kmtrbt] {
    color: #4ade80;
    font-weight: 500;
}

.progress-stock.empty[b-l9t4kmtrbt] {
    color: var(--wl-text-muted);
}

.progress-track[b-l9t4kmtrbt] {
    height: 4px;
    background: var(--wl-border-medium);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill[b-l9t4kmtrbt] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
    border-radius: 2px;
    transition: width 0.5s ease;
}

/* Actions Column */
.edition-actions-col[b-l9t4kmtrbt] {
    display: flex;
    justify-content: flex-end;
    min-width: 140px;
}

.status-badge[b-l9t4kmtrbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sold-out-badge[b-l9t4kmtrbt] {
    background: var(--wl-border-medium);
    color: var(--wl-text-muted);
    border: 1px solid var(--wl-border-medium);
}

.discount-badge[b-l9t4kmtrbt] {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.discount-badge :deep(svg)[b-l9t4kmtrbt] {
    width: 0.875rem;
    height: 0.875rem;
}

.quick-discount[b-l9t4kmtrbt] {
    display: flex;
    gap: 0.375rem;
}

.discount-quick-btn[b-l9t4kmtrbt] {
    padding: 0.375rem 0.75rem;
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.25);
    border-radius: 4px;
    color: #f97316;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.discount-quick-btn:hover:not(:disabled)[b-l9t4kmtrbt] {
    background: rgba(249, 115, 22, 0.15);
    border-color: #f97316;
}

.discount-quick-btn.deep[b-l9t4kmtrbt] {
    background: rgba(var(--wl-red-rgb), 0.08);
    border-color: rgba(var(--wl-red-rgb), 0.25);
    color: #ef4444;
}

.discount-quick-btn.deep:hover:not(:disabled)[b-l9t4kmtrbt] {
    background: rgba(var(--wl-red-rgb), 0.15);
    border-color: #ef4444;
}

.discount-quick-btn:disabled[b-l9t4kmtrbt] {
    opacity: 0.4;
    cursor: not-allowed;
}

.quick-discount.disabled-group[b-l9t4kmtrbt] {
    cursor: help;
}

.quick-discount.disabled-group .discount-quick-btn[b-l9t4kmtrbt] {
    pointer-events: none;
}

.discount-active[b-l9t4kmtrbt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    background: rgba(249, 115, 22, 0.1);
    border-radius: 6px;
    font-size: 0.8rem;
    color: #f97316;
    font-weight: 500;
}

.discount-active :deep(svg)[b-l9t4kmtrbt] {
    width: 1rem;
    height: 1rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACTION BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.action-bar[b-l9t4kmtrbt] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.btn-primary-action[b-l9t4kmtrbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-primary-action[b-l9t4kmtrbt]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(var(--wl-contrast-rgb), 0.2) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.btn-primary-action:hover[b-l9t4kmtrbt]::before {
    transform: translateX(100%);
}

.btn-primary-action:hover[b-l9t4kmtrbt] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--wl-gold-rgb), 0.4);
}

.btn-icon[b-l9t4kmtrbt] {
    display: flex;
}

.btn-icon :deep(svg)[b-l9t4kmtrbt] {
    width: 1.125rem;
    height: 1.125rem;
}

.btn-danger-action[b-l9t4kmtrbt] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: transparent;
    color: #ef4444;
    border: 1px solid rgba(var(--wl-red-rgb), 0.5);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-danger-action:hover[b-l9t4kmtrbt] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border-color: #ef4444;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .stats-grid[b-l9t4kmtrbt] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    /* Stack physical editions row into 2 lines */
    .edition-row[b-l9t4kmtrbt] {
        grid-template-columns: 48px 1fr 100px;
        grid-template-rows: auto auto;
        gap: 0.75rem 1rem;
    }

    .edition-media[b-l9t4kmtrbt] {
        grid-row: 1 / 3;
    }

    .edition-name[b-l9t4kmtrbt] {
        grid-column: 2;
    }

    .edition-price-col[b-l9t4kmtrbt] {
        grid-column: 3;
        align-items: flex-end;
    }

    .edition-progress[b-l9t4kmtrbt] {
        grid-column: 2 / 4;
        grid-row: 2;
    }

    .edition-actions-col[b-l9t4kmtrbt] {
        display: none;
    }
}

@media (max-width: 768px) {
    .details-header[b-l9t4kmtrbt] {
        padding: 1.5rem;
    }

    .release-hero[b-l9t4kmtrbt] {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2rem;
    }

    .cover-artwork[b-l9t4kmtrbt] {
        width: 240px;
        height: 240px;
    }

    .release-title[b-l9t4kmtrbt] {
        font-size: 2.5rem;
    }

    .release-meta[b-l9t4kmtrbt] {
        justify-content: center;
    }

    .release-status-wrapper[b-l9t4kmtrbt] {
        align-items: center;
    }

    .hero-certificates[b-l9t4kmtrbt] {
        justify-content: center;
    }

    .stats-section[b-l9t4kmtrbt],
    .certificates-section[b-l9t4kmtrbt],
    .tracklist-section[b-l9t4kmtrbt],
    .physical-section[b-l9t4kmtrbt] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .tracklist-header[b-l9t4kmtrbt] {
        display: none;
    }

    .track-item[b-l9t4kmtrbt] {
        flex-wrap: wrap;
    }

    .track-streams[b-l9t4kmtrbt] {
        width: 100%;
        text-align: left;
        padding-left: 3.5rem;
        margin-top: 0.25rem;
        opacity: 0.5;
    }

    .track-hype[b-l9t4kmtrbt] {
        margin-left: 3.5rem;
    }
}

@media (max-width: 600px) {
    /* Mobile: vertical card layout */
    .edition-row[b-l9t4kmtrbt] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1.25rem;
    }

    .edition-media[b-l9t4kmtrbt] {
        align-self: center;
        width: 56px;
        height: 56px;
    }

    .edition-name[b-l9t4kmtrbt] {
        text-align: center;
        justify-content: center;
    }

    .edition-price-col[b-l9t4kmtrbt] {
        align-items: center;
    }

    .edition-progress[b-l9t4kmtrbt] {
        width: 100%;
    }

    .edition-actions-col[b-l9t4kmtrbt] {
        justify-content: center;
        width: 100%;
    }

    .quick-discount[b-l9t4kmtrbt] {
        width: 100%;
        justify-content: center;
    }

    .discount-quick-btn[b-l9t4kmtrbt] {
        flex: 1;
        max-width: 80px;
    }
}

@media (max-width: 480px) {
    .stats-grid[b-l9t4kmtrbt] {
        grid-template-columns: 1fr;
    }

    .release-title[b-l9t4kmtrbt] {
        font-size: 2rem;
    }

    .cover-artwork[b-l9t4kmtrbt] {
        width: 200px;
        height: 200px;
    }

    .action-bar[b-l9t4kmtrbt] {
        flex-direction: column;
    }

    .btn-primary-action[b-l9t4kmtrbt],
    .btn-danger-action[b-l9t4kmtrbt] {
        width: 100%;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUDIO PLAYER
   ═══════════════════════════════════════════════════════════════════════════ */

.hidden-audio[b-l9t4kmtrbt] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Track number as playable button */
.track-number[b-l9t4kmtrbt] {
    background: none;
    border: none;
    padding: 0;
    cursor: default;
}

.track-number.playable[b-l9t4kmtrbt] {
    cursor: pointer;
}

.track-number.playable:hover .track-play-icon[b-l9t4kmtrbt] {
    opacity: 1;
}

.track-number.playable:hover .track-number-text[b-l9t4kmtrbt] {
    opacity: 0;
}

/* Track with audio - subtle indicator */
.track-item.has-audio .track-number[b-l9t4kmtrbt] {
    color: var(--wl-gold);
}

/* Track without audio - dimmed */
.track-item.no-audio[b-l9t4kmtrbt] {
    opacity: 0.5;
}

.track-item.no-audio:hover[b-l9t4kmtrbt] {
    opacity: 0.7;
}

/* Generate link for own songs without audio */
.track-number.generate-link[b-l9t4kmtrbt] {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.track-number.generate-link:hover .track-number-text[b-l9t4kmtrbt] {
    opacity: 0;
}

.track-number.generate-link:hover .track-play-icon[b-l9t4kmtrbt] {
    opacity: 1;
}

.track-number.generate-link .track-play-icon :deep(svg)[b-l9t4kmtrbt] {
    color: var(--wl-gold);
}

.track-item.no-audio:has(.generate-link)[b-l9t4kmtrbt] {
    opacity: 0.7;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RELEASE CHART HISTORY
   ═══════════════════════════════════════════════════════════════════════════ */

.release-chart-history[b-l9t4kmtrbt] {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 2.5rem;
}

.chart-history-stats[b-l9t4kmtrbt] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.chart-history-stats div[b-l9t4kmtrbt],
.chart-history-legacy[b-l9t4kmtrbt],
.chart-history-empty[b-l9t4kmtrbt] {
    min-width: 0;
    border: 1px solid rgba(var(--wl-gold-rgb, 212, 175, 55), 0.22);
    border-radius: 8px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.04);
}

.chart-history-stats strong[b-l9t4kmtrbt],
.chart-history-stats span[b-l9t4kmtrbt],
.chart-history-legacy strong[b-l9t4kmtrbt],
.chart-history-legacy span[b-l9t4kmtrbt],
.chart-history-empty strong[b-l9t4kmtrbt] {
    display: block;
    overflow-wrap: anywhere;
}

.chart-history-stats strong[b-l9t4kmtrbt] {
    color: var(--wl-text-primary, #ffffff);
    font-size: 1.6rem;
    line-height: 1.1;
}

.chart-history-stats span[b-l9t4kmtrbt],
.chart-history-legacy span[b-l9t4kmtrbt] {
    color: var(--wl-text-muted, rgba(255, 255, 255, 0.62));
    font-size: 0.78rem;
}

.chart-history-legacy strong[b-l9t4kmtrbt],
.chart-history-empty strong[b-l9t4kmtrbt] {
    color: var(--wl-text-primary, #ffffff);
    margin-bottom: 0.25rem;
}

.chart-history-empty strong[b-l9t4kmtrbt] {
    margin-bottom: 0;
}

.chart-history-rows[b-l9t4kmtrbt] {
    display: grid;
    gap: 0.5rem;
}

.chart-history-row[b-l9t4kmtrbt] {
    display: grid;
    grid-template-columns: 100px 80px 1fr;
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
    border-radius: 8px;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.05);
}

.chart-history-row span[b-l9t4kmtrbt],
.chart-history-row strong[b-l9t4kmtrbt] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.chart-history-row strong[b-l9t4kmtrbt] {
    color: var(--wl-gold, #d4af37);
}

@media (max-width: 720px) {
    .release-chart-history[b-l9t4kmtrbt] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .chart-history-stats[b-l9t4kmtrbt] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chart-history-row[b-l9t4kmtrbt] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

.track-item.no-audio:has(.generate-link):hover[b-l9t4kmtrbt] {
    opacity: 1;
    background: rgba(var(--wl-gold-rgb), 0.05);
}

/* Currently playing track */
.track-item.playing[b-l9t4kmtrbt] {
    background: linear-gradient(90deg,
        var(--wl-gold-bg) 0%,
        rgba(var(--wl-gold-rgb), 0.05) 30%,
        transparent 100%);
}

.track-item.playing .track-number-text[b-l9t4kmtrbt] {
    opacity: 0;
}

.track-item.playing .track-play-icon[b-l9t4kmtrbt] {
    opacity: 1;
}

.track-item.playing .track-play-icon :deep(svg)[b-l9t4kmtrbt] {
    animation: audioPulse-b-l9t4kmtrbt 1s ease-in-out infinite;
}

@keyframes audioPulse-b-l9t4kmtrbt {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}
/* /Components/Pages/Career/Music/Releases/Index.razor.rz.scp.css */
/* ============================================
   RELEASES HUB - Hollywood Glamour Aesthetic
   Cinematic vinyl-inspired design with gold accents
   ============================================ */

.releases-hub[b-wdkw0d16ce] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
}

/* ============================================
   HEADER - Cinematic banner with stats
   ============================================ */

.hub-header[b-wdkw0d16ce] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 3rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.12) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 40%,
        rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 1.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    box-shadow:
        0 0 60px rgba(var(--wl-gold-rgb), 0.08),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

.header-bg-pattern[b-wdkw0d16ce] {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 100% 0%, var(--wl-gold-bg-hover) 0%, transparent 40%),
        radial-gradient(circle at 0% 100%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 30%),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 80px,
            rgba(var(--wl-gold-rgb), 0.03) 80px,
            rgba(var(--wl-gold-rgb), 0.03) 81px
        );
    pointer-events: none;
}

.header-content[b-wdkw0d16ce] {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 2rem;
    z-index: 1;
}

.header-left[b-wdkw0d16ce] {
    flex: 1;
}

.header-title-group[b-wdkw0d16ce] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.header-eyebrow[b-wdkw0d16ce] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--wl-gold);
    font-weight: 700;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
}

.hub-header h1[b-wdkw0d16ce] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.5rem;
    font-weight: 400;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-gold) 50%, var(--wl-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.header-subtitle[b-wdkw0d16ce] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 1rem;
    margin: 0.5rem 0 0 0;
    font-weight: 400;
}

/* Header Stats */
.header-stats[b-wdkw0d16ce] {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}

.stat-card[b-wdkw0d16ce] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-bg-modal-rgb), 0.9) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    min-width: 110px;
    box-shadow:
        0 4px 20px var(--wl-shadow-color),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
    transition: all 0.3s ease;
}

.stat-card:hover[b-wdkw0d16ce] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px var(--wl-shadow-color),
        0 0 20px var(--wl-gold-bg);
}

.stat-value[b-wdkw0d16ce] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.25rem;
    color: var(--wl-text-primary);
    line-height: 1;
    letter-spacing: 0.02em;
}

.stat-label[b-wdkw0d16ce] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-text-muted);
    margin-top: 0.375rem;
    font-weight: 500;
}

.stat-streams .stat-value[b-wdkw0d16ce] {
    color: var(--wl-gold);
    text-shadow: 0 0 30px rgba(var(--wl-gold-rgb), 0.4);
}

/* Hype Card */
.stat-hype[b-wdkw0d16ce] {
    min-width: 110px;
    cursor: help;
    position: relative;
}

.stat-hype[title][b-wdkw0d16ce] {
    position: relative;
}

.hype-value-display[b-wdkw0d16ce] {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.hype-current[b-wdkw0d16ce] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.25rem;
    line-height: 1;
    letter-spacing: 0.02em;
    transition: color 0.3s ease;
}

.hype-current.hype-high[b-wdkw0d16ce] {
    color: #22c55e;
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
}

.hype-current.hype-medium[b-wdkw0d16ce] {
    color: var(--wl-gold);
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
}

.hype-current.hype-low[b-wdkw0d16ce] {
    color: #f97316;
    text-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
}

.hype-current.hype-critical[b-wdkw0d16ce] {
    color: #ef4444;
    text-shadow: 0 0 20px rgba(var(--wl-red-rgb), 0.4);
}

.hype-max[b-wdkw0d16ce] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin-left: 0.125rem;
}

.hype-bar[b-wdkw0d16ce] {
    width: 100%;
    height: 4px;
    background: var(--wl-border-medium);
    border-radius: 2px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.hype-bar-fill[b-wdkw0d16ce] {
    height: 100%;
    background: linear-gradient(90deg,
        #ef4444 0%,
        #f97316 25%,
        var(--wl-gold) 50%,
        #22c55e 75%,
        #10b981 100%);
    border-radius: 2px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header Decoration */
.header-decoration[b-wdkw0d16ce] {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.2;
}

.vinyl-icon[b-wdkw0d16ce] {
    width: 200px;
    height: 200px;
    color: var(--wl-gold);
    animation: spin-slow-b-wdkw0d16ce 25s linear infinite;
    filter: drop-shadow(0 0 20px rgba(var(--wl-gold-rgb), 0.3));
}

@keyframes spin-slow-b-wdkw0d16ce {
    from { transform: translateY(-50%) rotate(0deg); }
    to { transform: translateY(-50%) rotate(360deg); }
}

/* ============================================
   CREATE RELEASE CTA
   ============================================ */

.create-release-cta[b-wdkw0d16ce] {
    margin-bottom: 2.5rem;
}

.cta-button[b-wdkw0d16ce] {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 2.25rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    border: none;
    border-radius: 0.875rem;
    color: var(--wl-bg-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 20px rgba(var(--wl-gold-rgb), 0.35),
        0 0 40px var(--wl-gold-bg-hover),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.25);
}

.cta-button:hover[b-wdkw0d16ce] {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 8px 35px rgba(var(--wl-gold-rgb), 0.5),
        0 0 60px var(--wl-gold-border),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.35);
}

.cta-button:active[b-wdkw0d16ce] {
    transform: translateY(-1px) scale(1.01);
}

.cta-icon svg[b-wdkw0d16ce],
.cta-arrow svg[b-wdkw0d16ce] {
    width: 1.25rem;
    height: 1.25rem;
}

.cta-arrow[b-wdkw0d16ce] {
    transition: transform 0.3s ease;
}

.cta-button:hover .cta-arrow[b-wdkw0d16ce] {
    transform: translateX(6px);
}

/* ============================================
   RELEASE SECTIONS
   ============================================ */

.releases-sections[b-wdkw0d16ce] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.release-section[b-wdkw0d16ce] {
    padding: 1.75rem;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-contrast-rgb), 0.01) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1.25rem;
    transition: all 0.3s ease;
}

.release-section:hover[b-wdkw0d16ce] {
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.04) 0%,
        rgba(var(--wl-contrast-rgb), 0.02) 100%);
}

.section-title[b-wdkw0d16ce] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-medium);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.section-icon[b-wdkw0d16ce] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.section-icon svg[b-wdkw0d16ce] {
    width: 1.25rem;
    height: 1.25rem;
}

.draft-icon[b-wdkw0d16ce] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
    background: var(--wl-border-medium);
}
.production-icon[b-wdkw0d16ce] {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.15);
}
.scheduled-icon[b-wdkw0d16ce] {
    color: var(--wl-purple);
    background: rgba(var(--wl-purple-rgb), 0.15);
}
.released-icon[b-wdkw0d16ce] {
    color: var(--wl-gold);
    background: var(--wl-gold-bg-hover);
}

.section-count[b-wdkw0d16ce] {
    margin-left: auto;
    padding: 0.375rem 1rem;
    background: var(--wl-border-medium);
    border-radius: 2rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    letter-spacing: 0.05em;
}

/* Section-specific accents */
.section-drafts[b-wdkw0d16ce] {
    border-left: 4px solid rgba(var(--wl-contrast-rgb), 0.25);
}
.section-production[b-wdkw0d16ce] {
    border-left: 4px solid #60a5fa;
    box-shadow: inset 4px 0 20px rgba(96, 165, 250, 0.05);
}
.section-scheduled[b-wdkw0d16ce] {
    border-left: 4px solid var(--wl-purple);
    box-shadow: inset 4px 0 20px rgba(var(--wl-purple-rgb), 0.05);
}
.section-released[b-wdkw0d16ce] {
    border-left: 4px solid var(--wl-gold);
    box-shadow: inset 4px 0 20px rgba(var(--wl-gold-rgb), 0.05);
}

/* ============================================
   RELEASE GRID
   ============================================ */

.release-grid[b-wdkw0d16ce] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state[b-wdkw0d16ce] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.02) 0%,
        rgba(var(--wl-gold-rgb), 0.02) 100%);
    border: 2px dashed var(--wl-gold-border);
    border-radius: 1.5rem;
    transition: all 0.3s ease;
}

.empty-state:hover[b-wdkw0d16ce] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    background: linear-gradient(145deg,
        rgba(var(--wl-contrast-rgb), 0.03) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 100%);
}

.empty-icon[b-wdkw0d16ce] {
    width: 6rem;
    height: 6rem;
    margin-bottom: 2rem;
    color: rgba(var(--wl-gold-rgb), 0.3);
    animation: pulse-glow-b-wdkw0d16ce 3s ease-in-out infinite;
}

@keyframes pulse-glow-b-wdkw0d16ce {
    0%, 100% {
        filter: drop-shadow(0 0 10px var(--wl-gold-bg));
        opacity: 0.3;
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(var(--wl-gold-rgb), 0.3));
        opacity: 0.5;
    }
}

.empty-icon svg[b-wdkw0d16ce] {
    width: 100%;
    height: 100%;
}

.empty-state h3[b-wdkw0d16ce] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0 0 0.75rem 0;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.empty-state p[b-wdkw0d16ce] {
    color: var(--wl-text-muted);
    margin: 0 0 2rem 0;
    max-width: 420px;
    line-height: 1.6;
}

.empty-cta[b-wdkw0d16ce] {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8962E 100%);
    border-radius: 0.75rem;
    color: var(--wl-bg-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 20px rgba(var(--wl-gold-rgb), 0.3),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.2);
}

.empty-cta:hover[b-wdkw0d16ce] {
    transform: translateY(-3px);
    box-shadow:
        0 8px 30px rgba(var(--wl-gold-rgb), 0.45),
        0 0 40px var(--wl-gold-bg-hover),
        inset 0 1px 0 var(--wl-text-muted);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .header-content[b-wdkw0d16ce] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-stats[b-wdkw0d16ce] {
        width: 100%;
        justify-content: flex-start;
    }

    .header-decoration[b-wdkw0d16ce] {
        display: none;
    }
}

@media (max-width: 768px) {
    .releases-hub[b-wdkw0d16ce] {
        padding: 1rem;
    }

    .hub-header[b-wdkw0d16ce] {
        padding: 1.5rem;
    }

    .hub-header h1[b-wdkw0d16ce] {
        font-size: 2.5rem;
    }

    .header-stats[b-wdkw0d16ce] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .stat-card[b-wdkw0d16ce] {
        flex: 1;
        min-width: 90px;
        padding: 1rem;
    }

    .stat-value[b-wdkw0d16ce] {
        font-size: 1.75rem;
    }

    .release-grid[b-wdkw0d16ce] {
        grid-template-columns: 1fr;
    }

    .cta-button[b-wdkw0d16ce] {
        width: 100%;
        justify-content: center;
    }

    .section-title[b-wdkw0d16ce] {
        font-size: 1.25rem;
    }

    .empty-state[b-wdkw0d16ce] {
        padding: 3rem 1.5rem;
    }

    .empty-state h3[b-wdkw0d16ce] {
        font-size: 1.5rem;
    }
}

/* ===== Flat list redesign: toolbar (filters + sort) and rows ===== */
.releases-toolbar[b-wdkw0d16ce] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.releases-filters[b-wdkw0d16ce] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.filter-tab[b-wdkw0d16ce] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--wl-border-subtle);
    background: var(--wl-bg-secondary);
    color: var(--wl-text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-tab:hover[b-wdkw0d16ce] { border-color: rgba(var(--wl-gold-rgb), 0.4); color: var(--wl-text-primary); }

.filter-tab.active[b-wdkw0d16ce] {
    border-color: var(--wl-gold-border);
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
}

.filter-count[b-wdkw0d16ce] {
    font-size: 0.7rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    color: inherit;
}

.releases-sort[b-wdkw0d16ce] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

.releases-sort select[b-wdkw0d16ce] {
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    border: 1px solid var(--wl-border-subtle);
    background: var(--wl-bg-secondary);
    color: var(--wl-text-primary);
    font-size: 0.8rem;
}

.releases-list[b-wdkw0d16ce] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.releases-none[b-wdkw0d16ce] {
    text-align: center;
    color: var(--wl-text-muted);
    padding: 2rem 1rem;
}

@media (max-width: 640px) {
    .releases-toolbar[b-wdkw0d16ce] { flex-direction: column; align-items: stretch; }
    .releases-sort[b-wdkw0d16ce] { justify-content: space-between; }
}
/* /Components/Pages/Career/Music/Releases/ReleaseCoverEditModal.razor.rz.scp.css */
.cover-modal-backdrop[b-z7914istvr] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    animation: coverModalFade-b-z7914istvr 0.2s ease;
}

@keyframes coverModalFade-b-z7914istvr {
    from { opacity: 0; }
    to { opacity: 1; }
}

.cover-modal[b-z7914istvr] {
    width: 100%;
    max-width: 540px;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 16px;
    box-shadow: 0 24px 64px var(--wl-shadow-color);
}

.cover-modal-header[b-z7914istvr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.cover-modal-header h3[b-z7914istvr] {
    margin: 0;
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.cover-modal-close[b-z7914istvr] {
    display: inline-flex;
    background: transparent;
    border: none;
    color: var(--wl-text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
}

.cover-modal-close:hover[b-z7914istvr] { color: rgba(var(--wl-contrast-rgb), 0.9); }
.cover-modal-close svg[b-z7914istvr] { width: 20px; height: 20px; }

.cover-modal-body[b-z7914istvr] {
    display: flex;
    gap: 1.25rem;
    padding: 1.25rem;
}

@media (max-width: 520px) {
    .cover-modal-body[b-z7914istvr] { flex-direction: column; }
}

.cover-modal-preview[b-z7914istvr] {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cover-modal-preview[b-z7914istvr]  img { width: 100%; height: 100%; object-fit: cover; }

.cover-modal-placeholder[b-z7914istvr],
.cover-modal-loading[b-z7914istvr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
    text-align: center;
    padding: 1rem;
}

.cover-modal-placeholder svg[b-z7914istvr] { width: 40px; height: 40px; opacity: 0.4; }

.cover-modal-spinner[b-z7914istvr] {
    width: 28px;
    height: 28px;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: coverModalSpin-b-z7914istvr 0.8s linear infinite;
}

@keyframes coverModalSpin-b-z7914istvr { to { transform: rotate(360deg); } }

.cover-modal-controls[b-z7914istvr] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cover-modal-error[b-z7914istvr] {
    font-size: 0.75rem;
    color: #ef4444;
    padding: 0.4rem 0.6rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 6px;
}

.cover-modal-prompt-label[b-z7914istvr] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
}

.cover-modal-notes[b-z7914istvr] {
    width: 100%;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-family: inherit;
    font-size: 0.8125rem;
    padding: 0.5rem;
    resize: none;
}

.cover-modal-notes:focus[b-z7914istvr] { outline: none; border-color: rgba(var(--wl-gold-rgb), 0.4); }

.cover-modal-btn[b-z7914istvr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--wl-border-medium);
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: rgba(var(--wl-contrast-rgb), 0.85);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cover-modal-btn:hover:not(:disabled)[b-z7914istvr] { background: rgba(var(--wl-contrast-rgb), 0.08); }
.cover-modal-btn:disabled[b-z7914istvr] { opacity: 0.4; cursor: not-allowed; }
.cover-modal-btn svg[b-z7914istvr] { width: 16px; height: 16px; }

.cover-modal-btn--ai[b-z7914istvr] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    border-color: rgba(var(--wl-purple-rgb), 0.3);
    color: var(--wl-purple);
}

.cover-modal-btn--ai:hover:not(:disabled)[b-z7914istvr] { background: rgba(var(--wl-purple-rgb), 0.2); }

.cover-modal-balance[b-z7914istvr] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
    text-align: center;
    margin-top: -0.25rem;
}

.cover-modal-btn--remove[b-z7914istvr] {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    background: transparent;
}

.cover-modal-footer[b-z7914istvr] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.cover-modal-btn--ghost[b-z7914istvr] { background: transparent; }

.cover-modal-btn--save[b-z7914istvr] {
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    color: var(--wl-bg-primary);
}

.cover-modal-btn--save:hover:not(:disabled)[b-z7914istvr] {
    box-shadow: 0 6px 20px rgba(var(--wl-gold-rgb), 0.35);
}
/* /Components/Pages/Career/Music/Releases/ReleaseRow.razor.rz.scp.css */
.release-row[b-bnqg9fh66l] {
    --row-accent: var(--wl-text-muted);
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-subtle);
    border-left: 3px solid var(--row-accent);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.release-row:hover[b-bnqg9fh66l] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    box-shadow: 0 4px 16px var(--wl-shadow-color);
}

.release-row.status-draft[b-bnqg9fh66l] { --row-accent: var(--wl-text-muted); }
.release-row.status-production[b-bnqg9fh66l] { --row-accent: #F59E0B; }
.release-row.status-scheduled[b-bnqg9fh66l] { --row-accent: #3B82F6; }
.release-row.status-released[b-bnqg9fh66l] { --row-accent: var(--wl-gold); }

.rr-main[b-bnqg9fh66l] {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    text-decoration: none;
    color: inherit;
}

.rr-cover[b-bnqg9fh66l] {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.rr-cover[b-bnqg9fh66l]  img { width: 100%; height: 100%; object-fit: cover; }

.rr-cover-placeholder[b-bnqg9fh66l] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--wl-contrast-rgb), 0.3);
}

.rr-cover-placeholder svg[b-bnqg9fh66l] { width: 24px; height: 24px; }

.rr-type[b-bnqg9fh66l] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    padding: 1px 0;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
}

.rr-info[b-bnqg9fh66l] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.rr-title[b-bnqg9fh66l] {
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rr-sub[b-bnqg9fh66l] { font-size: 0.78rem; color: var(--wl-text-secondary); }

.rr-hype-warn[b-bnqg9fh66l] { font-size: 0.75rem; color: var(--wl-red); font-weight: 600; }

.rr-progress[b-bnqg9fh66l] { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.2rem; }

.rr-progress-bar[b-bnqg9fh66l] {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    overflow: hidden;
    max-width: 160px;
}

.rr-progress-fill[b-bnqg9fh66l] { height: 100%; background: #F59E0B; border-radius: 2px; }

.rr-progress-label[b-bnqg9fh66l] { font-size: 0.72rem; color: var(--wl-text-secondary); white-space: nowrap; }

.rr-metrics[b-bnqg9fh66l] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
}

.rr-metric[b-bnqg9fh66l] { display: flex; flex-direction: column; align-items: flex-end; gap: 0.05rem; }

.rr-metric-value[b-bnqg9fh66l] { font-weight: 700; color: var(--wl-text-primary); font-variant-numeric: tabular-nums; }

.rr-metric-label[b-bnqg9fh66l] {
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.rr-metric-sub[b-bnqg9fh66l] { font-size: 0.65rem; color: var(--wl-text-secondary); }

.rr-badges[b-bnqg9fh66l] { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-end; }

.rr-badge[b-bnqg9fh66l] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: var(--wl-text-secondary);
}

.rr-cert.cert-gold[b-bnqg9fh66l] { background: rgba(212, 175, 55, 0.18); color: #D4AF37; }
.rr-cert.cert-platinum[b-bnqg9fh66l] { background: rgba(180, 190, 200, 0.2); color: #B4C0CC; }
.rr-cert.cert-diamond[b-bnqg9fh66l] { background: rgba(120, 200, 255, 0.18); color: #78C8FF; }

.rr-action[b-bnqg9fh66l] {
    flex-shrink: 0;
    align-self: center;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    border: 1px solid var(--wl-gold-border);
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}

.rr-action:hover[b-bnqg9fh66l] { background: rgba(var(--wl-gold-rgb), 0.2); }

.rr-hype[b-bnqg9fh66l] {
    flex-shrink: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05rem;
    min-width: 5rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.025);
    color: var(--wl-text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.rr-hype:hover[b-bnqg9fh66l],
.rr-hype:focus-visible[b-bnqg9fh66l] {
    border-color: rgba(var(--wl-gold-rgb), 0.42);
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.rr-hype:focus-visible[b-bnqg9fh66l] {
    outline: 2px solid rgba(var(--wl-gold-rgb), 0.4);
    outline-offset: 2px;
}

.rr-hype-value[b-bnqg9fh66l] {
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rr-hype-value small[b-bnqg9fh66l] {
    margin-left: 0.1rem;
    color: var(--wl-text-muted);
    font-size: 0.58rem;
}

.rr-hype-label[b-bnqg9fh66l] {
    color: var(--wl-text-muted);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rr-hype-high .rr-hype-value[b-bnqg9fh66l] { color: #4ADE80; }
.rr-hype-medium .rr-hype-value[b-bnqg9fh66l] { color: #FACC15; }
.rr-hype-low .rr-hype-value[b-bnqg9fh66l] { color: #F87171; }

@media (max-width: 900px) {
    .release-row[b-bnqg9fh66l] { flex-wrap: wrap; }
    .rr-main[b-bnqg9fh66l] { flex-basis: 100%; }
    .rr-hype[b-bnqg9fh66l] { margin-left: auto; }
}

@media (max-width: 640px) {
    .release-row[b-bnqg9fh66l] { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .rr-main[b-bnqg9fh66l] { align-items: flex-start; }
    .rr-metrics[b-bnqg9fh66l] {
        flex-wrap: wrap;
        gap: 0.75rem 1.25rem;
        padding-left: calc(52px + 0.9rem);
    }
    .rr-metric[b-bnqg9fh66l] { align-items: flex-start; }
    .rr-badges[b-bnqg9fh66l] { flex-direction: row; }
    .rr-hype[b-bnqg9fh66l] { width: 100%; margin-left: 0; align-items: center; }
    .rr-action[b-bnqg9fh66l] { width: 100%; text-align: center; }
}
/* /Components/Pages/Career/Music/School/AdoptionWizard.razor.rz.scp.css */
/* ============================================
   ADOPTION WIZARD - 3-Step Modal
   ============================================ */

.aw[b-pp2kqyicuf] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aw__bg[b-pp2kqyicuf] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
}

.aw__wrap[b-pp2kqyicuf] {
    position: relative;
    z-index: 1;
    width: 92%;
    max-width: 480px;
    border-radius: 1rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.aw__header[b-pp2kqyicuf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.aw__header h3[b-pp2kqyicuf] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0;
}

.aw__close[b-pp2kqyicuf] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--wl-text-muted);
    cursor: pointer;
    border-radius: 0.375rem;
}

.aw__close svg[b-pp2kqyicuf] {
    width: 1rem;
    height: 1rem;
}

.aw__close:hover[b-pp2kqyicuf] {
    background: var(--wl-bg-tertiary);
}

/* Progress */
.aw__progress[b-pp2kqyicuf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1rem 2rem;
}

.aw__step[b-pp2kqyicuf] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    border: 2px solid var(--wl-border-medium);
    color: var(--wl-text-muted);
    background: transparent;
    flex-shrink: 0;
}

.aw__step--done[b-pp2kqyicuf] {
    background: var(--wl-gold);
    border-color: var(--wl-gold);
    color: var(--wl-bg-primary);
}

.aw__step--done svg[b-pp2kqyicuf] {
    width: 0.875rem;
    height: 0.875rem;
}

.aw__step--current[b-pp2kqyicuf] {
    border-color: var(--wl-gold);
    color: var(--wl-gold);
}

.aw__step-line[b-pp2kqyicuf] {
    width: 3rem;
    height: 2px;
    background: var(--wl-border-medium);
}

.aw__step-line--done[b-pp2kqyicuf] {
    background: var(--wl-gold);
}

/* Body */
.aw__body[b-pp2kqyicuf] {
    padding: 0 1.25rem;
    min-height: 200px;
}

.aw__step-content[b-pp2kqyicuf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    animation: aw-fade-b-pp2kqyicuf 0.3s ease-out;
}

@keyframes aw-fade-b-pp2kqyicuf {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Step 1: Student summary */
.aw__student-summary[b-pp2kqyicuf] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: var(--wl-bg-tertiary);
}

.aw__student-name[b-pp2kqyicuf] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.aw__student-meta[b-pp2kqyicuf],
.aw__student-sessions[b-pp2kqyicuf] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
}

.aw__cost-display[b-pp2kqyicuf] {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: var(--wl-gold-bg);
    border: 1px solid var(--wl-gold-border);
}

.aw__cost-label[b-pp2kqyicuf] {
    font-size: 0.875rem;
    color: var(--wl-text-secondary);
}

.aw__cost-value[b-pp2kqyicuf] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.aw__error[b-pp2kqyicuf] {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-red-rgb), 0.08);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    color: var(--wl-red);
    font-size: 0.875rem;
}

.aw__loading[b-pp2kqyicuf] {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.aw__spinner[b-pp2kqyicuf] {
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: aw-spin-b-pp2kqyicuf 0.8s linear infinite;
}

@keyframes aw-spin-b-pp2kqyicuf {
    to { transform: rotate(360deg); }
}

/* Step 2: Nickname */
.aw__label[b-pp2kqyicuf] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.aw__input[b-pp2kqyicuf] {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: var(--wl-bg-tertiary);
    color: var(--wl-text-primary);
    font-size: 1rem;
    transition: border-color 0.15s;
}

.aw__input:focus[b-pp2kqyicuf] {
    outline: none;
    border-color: var(--wl-gold);
}

.aw__input--error[b-pp2kqyicuf] {
    border-color: var(--wl-red);
}

.aw__field-error[b-pp2kqyicuf] {
    font-size: 0.75rem;
    color: var(--wl-red);
    margin: 0;
}

/* Step 3: Outfits */
.aw__outfit-grid[b-pp2kqyicuf] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}

.aw__outfit[b-pp2kqyicuf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem;
    border-radius: 0.75rem;
    border: 2px solid var(--wl-border-subtle);
    background: var(--wl-bg-tertiary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.aw__outfit:hover[b-pp2kqyicuf] {
    border-color: var(--wl-border-medium);
}

.aw__outfit--selected[b-pp2kqyicuf] {
    border-color: var(--wl-gold);
    background: var(--wl-gold-bg);
}

.aw__outfit-img[b-pp2kqyicuf] {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 0.375rem;
}

.aw__outfit-name[b-pp2kqyicuf] {
    font-size: 0.65rem;
    color: var(--wl-text-muted);
    text-align: center;
    line-height: 1.2;
}

.aw__no-outfits[b-pp2kqyicuf] {
    text-align: center;
    color: var(--wl-text-muted);
    padding: 2rem;
}

/* Footer */
.aw__footer[b-pp2kqyicuf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--wl-border-subtle);
    margin-top: auto;
}

.aw__footer-spacer[b-pp2kqyicuf] {
    flex: 1;
}

.aw__btn-back[b-pp2kqyicuf] {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: transparent;
    color: var(--wl-text-secondary);
    cursor: pointer;
}

.aw__btn-back svg[b-pp2kqyicuf] {
    width: 1rem;
    height: 1rem;
}

.aw__btn-back:hover[b-pp2kqyicuf] {
    background: var(--wl-bg-tertiary);
}

.aw__btn-next[b-pp2kqyicuf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.aw__btn-next svg[b-pp2kqyicuf] {
    width: 1rem;
    height: 1rem;
}

.aw__btn-next:hover[b-pp2kqyicuf] {
    background: var(--wl-gold-light);
}

.aw__btn-next:disabled[b-pp2kqyicuf] {
    opacity: 0.4;
    cursor: not-allowed;
}

.aw__btn-confirm[b-pp2kqyicuf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    border: none;
    background: var(--wl-green);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.aw__btn-confirm:hover[b-pp2kqyicuf] {
    opacity: 0.9;
}

.aw__btn-confirm:disabled[b-pp2kqyicuf] {
    opacity: 0.4;
    cursor: not-allowed;
}

.aw__btn-spinner[b-pp2kqyicuf] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: aw-spin-b-pp2kqyicuf 0.8s linear infinite;
}
/* /Components/Pages/Career/Music/School/SchoolDetail.razor.rz.scp.css */
/* ============================================
   SCHOOL DETAIL PAGE
   ============================================ */

.detail-page[b-hc9a8wkyr5] {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem;
    min-height: 100vh;
}

.detail-bg-atmosphere[b-hc9a8wkyr5] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%);
}

/* Loading & Error */
.detail-loading[b-hc9a8wkyr5] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.detail-loading-spinner[b-hc9a8wkyr5] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: detail-spin-b-hc9a8wkyr5 0.8s linear infinite;
}

@keyframes detail-spin-b-hc9a8wkyr5 {
    to { transform: rotate(360deg); }
}

.detail-error[b-hc9a8wkyr5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 1rem;
    color: var(--wl-text-muted);
}

.back-btn[b-hc9a8wkyr5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: var(--wl-bg-tertiary);
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
}

.back-btn svg[b-hc9a8wkyr5] {
    width: 1rem;
    height: 1rem;
}

/* Header */
.detail-header[b-hc9a8wkyr5] {
    position: relative;
    z-index: 1;
    padding: 1.5rem 0 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.back-link[b-hc9a8wkyr5] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    margin-bottom: 0.75rem;
    transition: color 0.15s;
}

.back-link svg[b-hc9a8wkyr5] {
    width: 0.875rem;
    height: 0.875rem;
}

.back-link:hover[b-hc9a8wkyr5] {
    color: var(--wl-gold);
}

.header-main h1[b-hc9a8wkyr5] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
}

.header-country[b-hc9a8wkyr5] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
}

.header-stats[b-hc9a8wkyr5] {
    margin-top: 1rem;
}

.header-prestige[b-hc9a8wkyr5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.stat-label[b-hc9a8wkyr5] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    flex-shrink: 0;
    width: 4rem;
}

.prestige-bar[b-hc9a8wkyr5] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(var(--wl-gold-rgb), 0.15);
    overflow: hidden;
}

.prestige-fill[b-hc9a8wkyr5] {
    height: 100%;
    border-radius: 3px;
    background: var(--wl-gold);
    transition: width 0.3s ease;
}

.prestige-value[b-hc9a8wkyr5] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-gold);
    width: 2.5rem;
    text-align: right;
}

.header-meta[b-hc9a8wkyr5] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.meta-item[b-hc9a8wkyr5] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

.meta-item svg[b-hc9a8wkyr5] {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.7;
}

/* Sections */
.section[b-hc9a8wkyr5] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.section-label[b-hc9a8wkyr5] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
    margin-bottom: 0.75rem;
}

.empty-section-text[b-hc9a8wkyr5] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    font-style: italic;
    padding: 1rem 0;
}

/* Student grid */
.student-grid[b-hc9a8wkyr5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Student card */
.student-card[b-hc9a8wkyr5] {
    border-radius: 0.875rem;
    border: 1px solid var(--wl-border-subtle);
    background: var(--wl-bg-secondary);
    padding: 1rem 1.25rem;
    transition: border-color 0.2s;
}

.student-card:hover[b-hc9a8wkyr5] {
    border-color: var(--wl-border-medium);
}

.student-card--candidate[b-hc9a8wkyr5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.student-header[b-hc9a8wkyr5] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.student-info[b-hc9a8wkyr5] {
    display: flex;
    flex-direction: column;
}

.student-name[b-hc9a8wkyr5] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.student-origin[b-hc9a8wkyr5] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    margin-top: 0.125rem;
}

.student-sessions[b-hc9a8wkyr5] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    white-space: nowrap;
}

/* Progress bar */
.student-progress[b-hc9a8wkyr5] {
    margin-bottom: 0.75rem;
    cursor: help;
}

.progress-label[b-hc9a8wkyr5] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
    margin-bottom: 0.25rem;
}

.progress-track[b-hc9a8wkyr5] {
    position: relative;
    height: 5px;
    border-radius: 3px;
    background: rgba(var(--wl-gold-rgb), 0.1);
    overflow: visible;
}

.progress-fill[b-hc9a8wkyr5] {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.5), var(--wl-gold));
    transition: width 0.4s ease;
}

.progress-fill--complete[b-hc9a8wkyr5] {
    background: linear-gradient(90deg, rgba(var(--wl-green-rgb), 0.6), var(--wl-green));
    box-shadow: 0 0 6px rgba(var(--wl-green-rgb), 0.3);
}

.progress-milestone[b-hc9a8wkyr5] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.milestone-dot[b-hc9a8wkyr5] {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wl-bg-secondary);
    border: 1.5px solid rgba(var(--wl-gold-rgb), 0.3);
    transition: border-color 0.2s, background 0.2s;
}

.progress-milestone--reached .milestone-dot[b-hc9a8wkyr5] {
    background: var(--wl-gold);
    border-color: var(--wl-gold);
    box-shadow: 0 0 4px rgba(var(--wl-gold-rgb), 0.4);
}

/* Skills learned */
.student-skills[b-hc9a8wkyr5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.skill-chip[b-hc9a8wkyr5] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.7rem;
    background: rgba(var(--wl-gold-rgb), 0.06);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

.skill-name[b-hc9a8wkyr5] {
    color: var(--wl-text-secondary);
    font-weight: 500;
}

.skill-xp[b-hc9a8wkyr5] {
    color: var(--wl-gold);
    font-weight: 600;
}

/* Combined badges (talents + traits in one row) */
.student-badges[b-hc9a8wkyr5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
}

.talent-badge[b-hc9a8wkyr5] {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 500;
}

.talent-badge--good[b-hc9a8wkyr5] {
    background: rgba(var(--wl-green-rgb), 0.12);
    color: var(--wl-green);
    border: 1px solid rgba(var(--wl-green-rgb), 0.2);
}

.talent-badge--bad[b-hc9a8wkyr5] {
    background: rgba(var(--wl-red-rgb), 0.12);
    color: var(--wl-red);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
}

.talent-badge--hidden[b-hc9a8wkyr5] {
    background: rgba(var(--wl-text-secondary-rgb), 0.08);
    color: var(--wl-text-muted);
    border: 1px solid var(--wl-border-subtle);
    font-style: italic;
}

.trait-badge[b-hc9a8wkyr5] {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 500;
}

.trait-badge--revealed[b-hc9a8wkyr5] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
    border: 1px solid var(--wl-gold-border);
}

/* Visual divider between student info and action buttons */
.student-divider[b-hc9a8wkyr5] {
    height: 1px;
    background: var(--wl-border-subtle);
    margin: 0.75rem 0;
}

/* Dismiss icon button (top-right of card) */
.btn-dismiss-icon[b-hc9a8wkyr5] {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--wl-text-muted);
    cursor: pointer;
    border-radius: 0.375rem;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.student-card:hover .btn-dismiss-icon[b-hc9a8wkyr5] {
    opacity: 1;
}

.btn-dismiss-icon svg[b-hc9a8wkyr5] {
    width: 0.875rem;
    height: 0.875rem;
}

.btn-dismiss-icon:hover[b-hc9a8wkyr5] {
    background: rgba(var(--wl-red-rgb), 0.1);
    color: var(--wl-red);
}

/* Hidden count badge (replaces individual "???" badges) */
.badge-hidden-count[b-hc9a8wkyr5] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--wl-text-muted);
    background: rgba(var(--wl-text-secondary-rgb), 0.06);
    border: 1px dashed var(--wl-border-subtle);
    cursor: help;
}

.badge-hidden-count svg[b-hc9a8wkyr5] {
    width: 0.75rem;
    height: 0.75rem;
    opacity: 0.5;
}

/* Student action buttons */
.student-actions[b-hc9a8wkyr5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.candidate-actions[b-hc9a8wkyr5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.actions-secondary[b-hc9a8wkyr5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.actions-locked-hint[b-hc9a8wkyr5] {
    font-size: 0.7rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

.btn-teach[b-hc9a8wkyr5],
.btn-adopt[b-hc9a8wkyr5],
.btn-hire[b-hc9a8wkyr5],
.btn-accept[b-hc9a8wkyr5],
.btn-reject[b-hc9a8wkyr5] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

/* Teach button - solid gold, primary action */
.btn-teach[b-hc9a8wkyr5] {
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    border-color: var(--wl-gold);
    font-weight: 600;
}

.btn-teach svg[b-hc9a8wkyr5] {
    width: 0.875rem;
    height: 0.875rem;
}

.btn-teach:hover[b-hc9a8wkyr5] {
    background: var(--wl-gold-light);
    border-color: var(--wl-gold-light);
    box-shadow: 0 0 12px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-adopt[b-hc9a8wkyr5] {
    background: rgba(var(--wl-green-rgb), 0.08);
    color: var(--wl-green);
    border-color: rgba(var(--wl-green-rgb), 0.2);
}

.btn-adopt:hover[b-hc9a8wkyr5] {
    background: rgba(var(--wl-green-rgb), 0.15);
}

.btn-hire[b-hc9a8wkyr5] {
    background: rgba(59, 130, 246, 0.08);
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.2);
}

.btn-hire:hover[b-hc9a8wkyr5] {
    background: rgba(59, 130, 246, 0.15);
}

.btn-accept[b-hc9a8wkyr5] {
    background: rgba(var(--wl-green-rgb), 0.1);
    color: var(--wl-green);
    border-color: rgba(var(--wl-green-rgb), 0.2);
}

.btn-accept svg[b-hc9a8wkyr5] {
    width: 0.875rem;
    height: 0.875rem;
}

.btn-accept:hover[b-hc9a8wkyr5] {
    background: rgba(var(--wl-green-rgb), 0.18);
}

.btn-accept:disabled[b-hc9a8wkyr5] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-reject[b-hc9a8wkyr5] {
    background: transparent;
    color: var(--wl-text-muted);
    border-color: var(--wl-border-subtle);
}

.btn-reject svg[b-hc9a8wkyr5] {
    width: 0.75rem;
    height: 0.75rem;
}

.btn-reject:hover[b-hc9a8wkyr5] {
    background: rgba(var(--wl-red-rgb), 0.08);
    color: var(--wl-red);
}

/* Disabled button wrapper - allows hover events on disabled buttons */
.btn-disabled-wrap[b-hc9a8wkyr5] {
    display: inline-flex;
    cursor: help;
}

.btn-teach:disabled[b-hc9a8wkyr5],
.btn-adopt:disabled[b-hc9a8wkyr5],
.btn-hire:disabled[b-hc9a8wkyr5] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Modals */
.modal-backdrop[b-hc9a8wkyr5] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.hire-modal[b-hc9a8wkyr5],
.dismiss-modal[b-hc9a8wkyr5] {
    width: 90%;
    max-width: 440px;
    border-radius: 1rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    overflow: hidden;
}

.hire-modal-header[b-hc9a8wkyr5],
.dismiss-modal-header[b-hc9a8wkyr5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.hire-modal-header h3[b-hc9a8wkyr5],
.dismiss-modal-header h3[b-hc9a8wkyr5] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0;
}

.hire-modal-close[b-hc9a8wkyr5],
.dismiss-modal-close[b-hc9a8wkyr5] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--wl-text-muted);
    cursor: pointer;
    border-radius: 0.375rem;
}

.hire-modal-close svg[b-hc9a8wkyr5],
.dismiss-modal-close svg[b-hc9a8wkyr5] {
    width: 1rem;
    height: 1rem;
}

.hire-modal-close:hover[b-hc9a8wkyr5],
.dismiss-modal-close:hover[b-hc9a8wkyr5] {
    background: var(--wl-bg-tertiary);
}

.hire-modal-body[b-hc9a8wkyr5],
.dismiss-modal-body[b-hc9a8wkyr5] {
    padding: 1.25rem;
}

.hire-student-name[b-hc9a8wkyr5] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin-bottom: 0.75rem;
}

.hire-talents[b-hc9a8wkyr5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.hire-details[b-hc9a8wkyr5] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.hire-row[b-hc9a8wkyr5] {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--wl-text-secondary);
}

.hire-value[b-hc9a8wkyr5] {
    font-weight: 600;
    color: var(--wl-gold);
}

.hire-modal-footer[b-hc9a8wkyr5],
.dismiss-modal-footer[b-hc9a8wkyr5] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.btn-cancel[b-hc9a8wkyr5] {
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: transparent;
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
}

.btn-cancel:hover[b-hc9a8wkyr5] {
    background: var(--wl-bg-tertiary);
}

.btn-confirm[b-hc9a8wkyr5] {
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    border: none;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-confirm:hover[b-hc9a8wkyr5] {
    background: var(--wl-gold-light);
}

.btn-confirm:disabled[b-hc9a8wkyr5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-danger[b-hc9a8wkyr5] {
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    border: none;
    background: var(--wl-red);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-danger:hover[b-hc9a8wkyr5] {
    background: var(--wl-red-dark);
}

.btn-danger:disabled[b-hc9a8wkyr5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-spinner[b-hc9a8wkyr5] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: detail-spin-b-hc9a8wkyr5 0.8s linear infinite;
}
/* /Components/Pages/Career/Music/School/SchoolList.razor.rz.scp.css */
/* ============================================
   SCHOOL LIST PAGE
   ============================================ */

.school-list-page[b-ss69h9dtqn] {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem;
    min-height: 100vh;
}

.school-bg-atmosphere[b-ss69h9dtqn] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%);
}

/* Loading */
.school-loading[b-ss69h9dtqn] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.school-loading-spinner[b-ss69h9dtqn] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: school-spin-b-ss69h9dtqn 0.8s linear infinite;
}

@keyframes school-spin-b-ss69h9dtqn {
    to { transform: rotate(360deg); }
}

/* No DLC */
.school-no-dlc[b-ss69h9dtqn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 1rem;
    text-align: center;
}

.no-dlc-icon[b-ss69h9dtqn] {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--wl-text-secondary-rgb), 0.1);
}

.no-dlc-icon svg[b-ss69h9dtqn] {
    width: 2rem;
    height: 2rem;
    color: var(--wl-text-muted);
}

.no-dlc-text[b-ss69h9dtqn] {
    color: var(--wl-text-secondary);
    font-size: 0.95rem;
    max-width: 300px;
}

.no-dlc-link[b-ss69h9dtqn] {
    padding: 0.625rem 1.5rem;
    border-radius: 0.5rem;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: background 0.2s;
}

.no-dlc-link:hover[b-ss69h9dtqn] {
    background: var(--wl-gold-light);
}

/* Header */
.school-header[b-ss69h9dtqn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.school-header-left[b-ss69h9dtqn] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.school-header-icon[b-ss69h9dtqn] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    background: var(--wl-gold-bg);
    border: 1px solid var(--wl-gold-border);
}

.school-header-icon svg[b-ss69h9dtqn] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-gold);
}

.school-header h1[b-ss69h9dtqn] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
}

.school-found-btn[b-ss69h9dtqn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 0.5rem;
    border: none;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.school-found-btn svg[b-ss69h9dtqn] {
    width: 1rem;
    height: 1rem;
}

.school-found-btn:hover[b-ss69h9dtqn] {
    background: var(--wl-gold-light);
}

/* Empty state */
.school-empty[b-ss69h9dtqn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
    color: var(--wl-text-muted);
}

.empty-icon[b-ss69h9dtqn] {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.empty-icon svg[b-ss69h9dtqn] {
    width: 2rem;
    height: 2rem;
    color: var(--wl-gold);
    opacity: 0.5;
}

/* Grid */
.school-grid[b-ss69h9dtqn] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .school-grid[b-ss69h9dtqn] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Card */
.school-card[b-ss69h9dtqn] {
    border-radius: 0.875rem;
    border: 1px solid var(--wl-border-subtle);
    background: var(--wl-bg-secondary);
    padding: 1.25rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.school-card:hover[b-ss69h9dtqn] {
    border-color: var(--wl-gold-border);
    box-shadow: 0 4px 16px rgba(var(--wl-gold-rgb), 0.08);
    transform: translateY(-2px);
}

.school-card-header[b-ss69h9dtqn] {
    margin-bottom: 1rem;
}

.school-city-name[b-ss69h9dtqn] {
    display: block;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.school-country[b-ss69h9dtqn] {
    display: block;
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    margin-top: 0.125rem;
}

.school-city-sub[b-ss69h9dtqn] {
    display: block;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    margin-top: 0.125rem;
    font-weight: 400;
}

/* Prestige */
.school-card-prestige[b-ss69h9dtqn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    cursor: help;
}

.prestige-label[b-ss69h9dtqn] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    flex-shrink: 0;
    width: 4rem;
}

.prestige-bar[b-ss69h9dtqn] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(var(--wl-gold-rgb), 0.15);
    overflow: hidden;
}

.prestige-fill[b-ss69h9dtqn] {
    height: 100%;
    border-radius: 3px;
    background: var(--wl-gold);
    transition: width 0.3s ease;
}

.prestige-value[b-ss69h9dtqn] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-gold);
    flex-shrink: 0;
    width: 2rem;
    text-align: right;
}

/* Stats */
.school-card-stats[b-ss69h9dtqn] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.stat-item[b-ss69h9dtqn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

.stat-item svg[b-ss69h9dtqn] {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Found School Modal */
.modal-backdrop[b-ss69h9dtqn] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.found-modal[b-ss69h9dtqn] {
    width: 90%;
    max-width: 420px;
    border-radius: 1rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    overflow: hidden;
}

.found-modal-header[b-ss69h9dtqn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.found-modal-header h3[b-ss69h9dtqn] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0;
}

.found-modal-close[b-ss69h9dtqn] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--wl-text-muted);
    cursor: pointer;
    border-radius: 0.375rem;
}

.found-modal-close svg[b-ss69h9dtqn] {
    width: 1rem;
    height: 1rem;
}

.found-modal-close:hover[b-ss69h9dtqn] {
    background: var(--wl-bg-tertiary);
    color: var(--wl-text-primary);
}

.found-modal-body[b-ss69h9dtqn] {
    padding: 1.25rem;
}

.found-modal-desc[b-ss69h9dtqn] {
    font-size: 0.875rem;
    color: var(--wl-text-secondary);
    margin: 0 0 1rem;
}

.found-modal-label[b-ss69h9dtqn] {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wl-text-secondary);
    margin-bottom: 0.5rem;
}

.school-name-input[b-ss69h9dtqn] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: var(--wl-bg-tertiary);
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    box-sizing: border-box;
}

.school-name-input:focus[b-ss69h9dtqn] {
    outline: none;
    border-color: var(--wl-gold);
    box-shadow: 0 0 0 2px rgba(var(--wl-gold-rgb), 0.15);
}

.found-modal-footer[b-ss69h9dtqn] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.btn-cancel[b-ss69h9dtqn] {
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: transparent;
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
}

.btn-cancel:hover[b-ss69h9dtqn] {
    background: var(--wl-bg-tertiary);
}

.btn-confirm[b-ss69h9dtqn] {
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    border: none;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-confirm:hover[b-ss69h9dtqn] {
    background: var(--wl-gold-light);
}

.btn-confirm:disabled[b-ss69h9dtqn] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-spinner[b-ss69h9dtqn] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: school-spin-b-ss69h9dtqn 0.8s linear infinite;
}
/* /Components/Pages/Career/Music/School/TeachingModal.razor.rz.scp.css */
/* ============================================
   TEACHING MODAL - 3-Phase Animation
   Adapted from Writing.razor flow meter pattern
   ============================================ */

.tm[b-gltwzf4e4n] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tm__bg[b-gltwzf4e4n] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
}

.tm__wrap[b-gltwzf4e4n] {
    position: relative;
    z-index: 1;
    width: 92%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tm__page[b-gltwzf4e4n] {
    border-radius: 1rem 1rem 0 0;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-bottom: none;
    overflow: hidden;
    position: relative;
}

.tm--setup .tm__page[b-gltwzf4e4n] {
    border-radius: 1rem;
    border-bottom: 1px solid var(--wl-border-medium);
}

/* Header */
.tm__top[b-gltwzf4e4n] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.tm__icon[b-gltwzf4e4n] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-gold);
}

.tm__title[b-gltwzf4e4n] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    flex: 1;
}

.tm__close[b-gltwzf4e4n] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--wl-text-muted);
    cursor: pointer;
    border-radius: 0.375rem;
}

.tm__close svg[b-gltwzf4e4n] {
    width: 1rem;
    height: 1rem;
}

.tm__close:hover[b-gltwzf4e4n] {
    background: var(--wl-bg-tertiary);
}

/* Setup Phase */
.tm__setup[b-gltwzf4e4n] {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tm__student[b-gltwzf4e4n] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem;
    border-radius: 0.625rem;
    background: var(--wl-bg-tertiary);
}

.tm__student-name[b-gltwzf4e4n] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.tm__student-sessions[b-gltwzf4e4n] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.tm__config-group[b-gltwzf4e4n] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tm__label[b-gltwzf4e4n] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.tm__select[b-gltwzf4e4n] {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: var(--wl-bg-tertiary);
    color: var(--wl-text-primary);
    font-size: 0.875rem;
}

/* Intensity buttons */
.tm__intensity-grid[b-gltwzf4e4n] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.tm__intensity-btn[b-gltwzf4e4n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    border-radius: 0.625rem;
    border: 1px solid var(--wl-border-subtle);
    background: var(--wl-bg-tertiary);
    color: var(--wl-text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.tm__intensity-btn.selected[b-gltwzf4e4n] {
    border-color: var(--wl-gold-border);
    background: var(--wl-gold-bg);
    color: var(--wl-gold);
}

.tm__intensity-btn:hover:not(.selected)[b-gltwzf4e4n] {
    border-color: var(--wl-border-medium);
    background: var(--wl-bg-secondary);
}

.tm__intensity-name[b-gltwzf4e4n] {
    font-size: 0.8rem;
    font-weight: 600;
}

.tm__intensity-cost[b-gltwzf4e4n],
.tm__intensity-credits[b-gltwzf4e4n] {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* Go button */
.tm__go-btn[b-gltwzf4e4n] {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: none;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 0.5rem;
}

.tm__go-btn:hover[b-gltwzf4e4n] {
    background: var(--wl-gold-light);
}

.tm__go-btn:disabled[b-gltwzf4e4n] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Typewriter text area */
.tm__text-area[b-gltwzf4e4n] {
    padding: 1.25rem;
    min-height: 100px;
}

.tm__line[b-gltwzf4e4n] {
    font-size: 0.875rem;
    color: var(--wl-text-secondary);
    line-height: 1.6;
    margin: 0 0 0.25rem;
    font-style: italic;
    opacity: 0;
    animation: tm-line-appear-b-gltwzf4e4n 0.5s ease-out forwards;
}

@keyframes tm-line-appear-b-gltwzf4e4n {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.tm__cursor[b-gltwzf4e4n] {
    display: inline-block;
    width: 2px;
    height: 1rem;
    background: var(--wl-gold);
    vertical-align: text-bottom;
    animation: tm-cursor-blink-b-gltwzf4e4n 0.8s infinite;
}

@keyframes tm-cursor-blink-b-gltwzf4e4n {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Flow Meter */
.tm__meter[b-gltwzf4e4n] {
    padding: 0 1.25rem 1.25rem;
}

.tm__meter-head[b-gltwzf4e4n] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.tm__meter-title[b-gltwzf4e4n] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.tm__track[b-gltwzf4e4n] {
    position: relative;
    display: flex;
    height: 2rem;
    border-radius: 0.375rem;
    overflow: hidden;
    border: 1px solid var(--wl-border-subtle);
}

.tm__zone[b-gltwzf4e4n] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.tm__zone--poor[b-gltwzf4e4n] { background: rgba(var(--wl-red-rgb), 0.15); }
.tm__zone--decent[b-gltwzf4e4n] { background: rgba(var(--wl-text-secondary-rgb), 0.08); }
.tm__zone--good[b-gltwzf4e4n] { background: rgba(var(--wl-green-rgb), 0.12); }
.tm__zone--great[b-gltwzf4e4n] { background: rgba(var(--wl-gold-rgb), 0.15); }

.tm__zlabel[b-gltwzf4e4n] {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wl-text-muted);
    opacity: 0.8;
}

/* Needle */
.tm__needle[b-gltwzf4e4n] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    transform: translateX(-50%);
    z-index: 2;
    transition: none;
}

.tm__needle--stopped[b-gltwzf4e4n] {
    transition: left 0.1s ease-out;
}

.tm__needle-bar[b-gltwzf4e4n] {
    position: absolute;
    inset: 0;
    background: var(--wl-gold);
    border-radius: 1.5px;
}

.tm__needle-glow[b-gltwzf4e4n] {
    position: absolute;
    inset: -2px -4px;
    background: rgba(var(--wl-gold-rgb), 0.4);
    border-radius: 4px;
    filter: blur(3px);
}

.tm__needle--active .tm__needle-glow[b-gltwzf4e4n] {
    animation: tm-needle-pulse-b-gltwzf4e4n 1.2s ease-in-out infinite;
}

@keyframes tm-needle-pulse-b-gltwzf4e4n {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

/* Flash */
.tm__flash[b-gltwzf4e4n] {
    position: absolute;
    inset: 0;
    background: rgba(var(--wl-gold-rgb), 0.3);
    pointer-events: none;
    animation: tm-flash-b-gltwzf4e4n 0.3s ease-out forwards;
}

@keyframes tm-flash-b-gltwzf4e4n {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Result Panel */
.tm__panel[b-gltwzf4e4n] {
    border-radius: 0 0 1rem 1rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-top: 1px solid var(--wl-gold-border);
    padding: 1.25rem;
    animation: tm-panel-slide-b-gltwzf4e4n 0.4s ease-out;
}

@keyframes tm-panel-slide-b-gltwzf4e4n {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.tm__reveal[b-gltwzf4e4n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.tm__session-badge[b-gltwzf4e4n] {
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
}

.tm__session-badge--good[b-gltwzf4e4n] {
    background: rgba(var(--wl-green-rgb), 0.12);
    color: var(--wl-green);
    border: 1px solid rgba(var(--wl-green-rgb), 0.2);
}

.tm__session-badge--poor[b-gltwzf4e4n] {
    background: rgba(var(--wl-red-rgb), 0.1);
    color: var(--wl-red);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
}

.tm__xp-display[b-gltwzf4e4n] {
    text-align: center;
}

.tm__xp-value[b-gltwzf4e4n] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.tm__prestige-change[b-gltwzf4e4n] {
    font-size: 0.8rem;
    font-weight: 500;
}

.tm__prestige--positive[b-gltwzf4e4n] {
    color: var(--wl-green);
}

.tm__prestige--negative[b-gltwzf4e4n] {
    color: var(--wl-red);
}

/* Discovery callout */
.tm__discovery[b-gltwzf4e4n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.75rem;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid var(--wl-gold-border);
    text-align: center;
}

.tm__discovery svg[b-gltwzf4e4n] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-gold);
    animation: tm-star-spin-b-gltwzf4e4n 1.5s ease-in-out;
}

@keyframes tm-star-spin-b-gltwzf4e4n {
    0% { transform: rotate(0deg) scale(0); opacity: 0; }
    50% { transform: rotate(180deg) scale(1.3); opacity: 1; }
    100% { transform: rotate(360deg) scale(1); opacity: 1; }
}

.tm__discovery span[b-gltwzf4e4n] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.tm__discovery-detail[b-gltwzf4e4n] {
    font-size: 0.75rem;
    color: var(--wl-text-secondary);
    font-weight: 400;
}

/* Continue button */
.tm__continue[b-gltwzf4e4n] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    margin-top: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-gold-border);
    background: var(--wl-gold-bg);
    color: var(--wl-gold);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.tm__continue svg[b-gltwzf4e4n] {
    width: 1rem;
    height: 1rem;
}

.tm__continue:hover[b-gltwzf4e4n] {
    background: var(--wl-gold-bg-hover);
}
/* /Components/Pages/Career/Music/Songs/AudioWizard.razor.rz.scp.css */
.audio-wizard-page[b-knhp5spzfg] {
    position: relative;
    min-height: 100vh;
    padding: 2rem;
    background: var(--wl-bg-primary);
}

.page-atmosphere[b-knhp5spzfg] {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(var(--wl-purple-rgb), 0.05) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

/* Loading State */
.loading-state[b-knhp5spzfg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.vinyl-loader[b-knhp5spzfg] {
    width: 80px;
    height: 80px;
}

.vinyl-disc[b-knhp5spzfg] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wl-bg-secondary), #2a2a2a);
    position: relative;
    animation: spin-b-knhp5spzfg 2s linear infinite;
    box-shadow: 0 0 20px var(--wl-gold-border);
}

.vinyl-grooves[b-knhp5spzfg] {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 1px solid var(--wl-border-medium);
}

.vinyl-label[b-knhp5spzfg] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-dark));
}

@keyframes spin-b-knhp5spzfg {
    to { transform: rotate(360deg); }
}

.loading-state p[b-knhp5spzfg] {
    color: var(--wl-text-muted);
    font-size: 0.875rem;
}

/* Error State */
.error-state[b-knhp5spzfg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
    text-align: center;
}

.error-icon[b-knhp5spzfg] {
    width: 80px;
    height: 80px;
    color: #EF4444;
}

.error-icon svg[b-knhp5spzfg] {
    width: 100%;
    height: 100%;
}

.error-state p[b-knhp5spzfg] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-size: 1.125rem;
}

.btn-back[b-knhp5spzfg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-back:hover[b-knhp5spzfg] {
    background: var(--wl-border-medium);
    color: var(--wl-text-primary);
}

.btn-back svg[b-knhp5spzfg] {
    width: 1rem;
    height: 1rem;
}

/* Page Header */
.page-header[b-knhp5spzfg] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.back-link[b-knhp5spzfg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    transition: color 0.2s ease;
}

.back-link:hover[b-knhp5spzfg] {
    color: var(--wl-gold);
}

.back-link svg[b-knhp5spzfg] {
    width: 1rem;
    height: 1rem;
}

.header-content[b-knhp5spzfg] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-icon[b-knhp5spzfg] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-border), var(--wl-gold-bg));
    border-radius: 0.75rem;
    color: var(--wl-gold);
}

.header-icon svg[b-knhp5spzfg] {
    width: 1.5rem;
    height: 1.5rem;
}

.header-text h1[b-knhp5spzfg] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
}

.header-subtitle[b-knhp5spzfg] {
    color: var(--wl-text-muted);
    font-size: 0.875rem;
    margin: 0.25rem 0 0;
}

/* Wizard Content */
.wizard-content[b-knhp5spzfg] {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Info Cards */
.info-card[b-knhp5spzfg] {
    background: rgba(var(--wl-bg-secondary-rgb), 0.95);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 1.5rem;
    animation: fadeInUp-b-knhp5spzfg 0.4s ease forwards;
    opacity: 0;
}

.info-card:nth-child(1)[b-knhp5spzfg] { animation-delay: 0ms; }
.info-card:nth-child(2)[b-knhp5spzfg] { animation-delay: 50ms; }
.info-card:nth-child(3)[b-knhp5spzfg] { animation-delay: 100ms; }
.info-card:nth-child(4)[b-knhp5spzfg] { animation-delay: 150ms; }

@keyframes fadeInUp-b-knhp5spzfg {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-header[b-knhp5spzfg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.card-header svg[b-knhp5spzfg] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-gold);
}

.card-header h2[b-knhp5spzfg] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
    flex: 1;
}

.duration-badge[b-knhp5spzfg] {
    padding: 0.375rem 1rem;
    background: linear-gradient(135deg, var(--wl-gold-border), var(--wl-gold-bg));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 1rem;
    font-size: 0.8125rem;
    color: var(--wl-gold);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.05em;
}

/* Song Info Grid */
.info-grid[b-knhp5spzfg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.info-item[b-knhp5spzfg] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.info-label[b-knhp5spzfg] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value[b-knhp5spzfg] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.info-value.song-title[b-knhp5spzfg] {
    font-weight: 600;
    color: var(--wl-gold);
}

/* Vocal Cast */
.vocal-cast-intro[b-knhp5spzfg] {
    margin: 0 0 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.62);
    line-height: 1.55;
}

.voice-fallback-warning[b-knhp5spzfg] {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin: 0 0 1rem;
    padding: 0.95rem 1rem;
    color: #FDE68A;
    background:
        linear-gradient(115deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.045)),
        rgba(var(--wl-bg-tertiary-rgb), 0.62);
    border: 1px solid rgba(245, 158, 11, 0.34);
    border-radius: 0.85rem;
    box-shadow: inset 3px 0 0 rgba(245, 158, 11, 0.74);
}

.voice-fallback-warning-icon[b-knhp5spzfg] {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 2rem;
    height: 2rem;
    color: #FBBF24;
    background: rgba(245, 158, 11, 0.12);
    border-radius: 0.6rem;
}

.voice-fallback-warning-icon svg[b-knhp5spzfg] {
    width: 1.1rem;
    height: 1.1rem;
}

.voice-fallback-warning strong[b-knhp5spzfg] {
    display: block;
    margin: 0 0 0.22rem;
    font-size: 0.88rem;
    letter-spacing: 0.02em;
}

.voice-fallback-warning p[b-knhp5spzfg] {
    margin: 0;
    color: rgba(254, 243, 199, 0.78);
    font-size: 0.8rem;
    line-height: 1.5;
}

.vocal-cast-list[b-knhp5spzfg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
}

.vocal-cast-member[b-knhp5spzfg] {
    padding: 1rem;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--wl-gold-rgb), 0.1), transparent 48%),
        rgba(var(--wl-bg-tertiary-rgb), 0.46);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 0.85rem;
}

.vocal-cast-member-header[b-knhp5spzfg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.vocal-cast-name[b-knhp5spzfg],
.vocal-source[b-knhp5spzfg] {
    display: block;
}

.vocal-cast-name[b-knhp5spzfg] {
    color: rgba(var(--wl-contrast-rgb), 0.94);
    font-size: 0.95rem;
}

.vocal-source[b-knhp5spzfg] {
    margin-top: 0.2rem;
    color: rgba(var(--wl-contrast-rgb), 0.46);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.vocal-cast-badges[b-knhp5spzfg] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.vocal-role-badge[b-knhp5spzfg] {
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.vocal-role-badge.lead[b-knhp5spzfg] {
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.11);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
}

.vocal-role-badge.group[b-knhp5spzfg] {
    color: #C4B5FD;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.24);
}

.vocal-role-badge.featured[b-knhp5spzfg] {
    color: #F9A8D4;
    background: rgba(236, 72, 153, 0.09);
    border: 1px solid rgba(236, 72, 153, 0.22);
}

.vocal-role-badge.backing[b-knhp5spzfg] {
    color: #7DD3FC;
    background: rgba(56, 189, 248, 0.09);
    border: 1px solid rgba(56, 189, 248, 0.2);
}

.vocal-profile-copy[b-knhp5spzfg] {
    min-height: 2.75rem;
    margin: 0.85rem 0 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-size: 0.82rem;
    line-height: 1.5;
}

.vocal-profile-copy.fallback[b-knhp5spzfg] {
    color: rgba(253, 230, 138, 0.76);
}

.edit-link[b-knhp5spzfg] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-gold);
    text-decoration: none;
    font-size: 0.875rem;
    transition: opacity 0.2s ease;
}

.edit-link:hover[b-knhp5spzfg] {
    opacity: 0.8;
}

.edit-link:focus-visible[b-knhp5spzfg],
.generate-btn:focus-visible[b-knhp5spzfg],
.play-btn:focus-visible[b-knhp5spzfg],
.make-active-btn:focus-visible[b-knhp5spzfg] {
    outline: 2px solid var(--wl-gold);
    outline-offset: 3px;
}

.edit-link svg[b-knhp5spzfg] {
    width: 0.875rem;
    height: 0.875rem;
}

.instrumental-cast[b-knhp5spzfg] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(var(--wl-gold-rgb), 0.045);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.14);
    border-radius: 0.75rem;
}

.instrumental-cast svg[b-knhp5spzfg] {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--wl-gold);
}

.instrumental-cast strong[b-knhp5spzfg] {
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.instrumental-cast p[b-knhp5spzfg] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0.2rem 0 0;
    line-height: 1.45;
}

.vocal-guidance-note[b-knhp5spzfg] {
    margin: 1rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
    color: rgba(var(--wl-contrast-rgb), 0.46);
    font-size: 0.76rem;
    line-height: 1.5;
}

/* Sections Preview */
.sections-list[b-knhp5spzfg] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.section-item[b-knhp5spzfg] {
    background: rgba(var(--wl-bg-tertiary-rgb), 0.4);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.75rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
}

.section-item[b-knhp5spzfg]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.4), var(--wl-gold-bg));
}

.section-type[b-knhp5spzfg] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.75rem;
}

.section-type.chorus[b-knhp5spzfg] {
    background: var(--wl-gold-border);
    color: var(--wl-gold);
}

.section-type.verse[b-knhp5spzfg] {
    background: rgba(59, 130, 246, 0.2);
    color: #60A5FA;
}

.section-type.bridge[b-knhp5spzfg] {
    background: rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

.section-type.prechorus[b-knhp5spzfg] {
    background: rgba(var(--wl-pink-rgb), 0.2);
    color: #F472B6;
}

.section-type.intro[b-knhp5spzfg],
.section-type.outro[b-knhp5spzfg] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ADE80;
}

.section-type.solo[b-knhp5spzfg] {
    background: rgba(251, 146, 60, 0.2);
    color: #FB923C;
}

.section-type.breakdown[b-knhp5spzfg] {
    background: rgba(var(--wl-red-rgb), 0.2);
    color: #F87171;
}

.section-duration[b-knhp5spzfg] {
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-size: 0.75rem;
}

.section-lyrics[b-knhp5spzfg] {
    margin: 0.75rem 0 0;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.4;
}

.section-lyrics.instrumental[b-knhp5spzfg] {
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.no-sections[b-knhp5spzfg] {
    text-align: center;
    padding: 1.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

/* Generation History */
.history-list[b-knhp5spzfg] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-item[b-knhp5spzfg] {
    background: rgba(var(--wl-bg-tertiary-rgb), 0.4);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
}

.history-item.active[b-knhp5spzfg] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.05);
}

.history-item.playing[b-knhp5spzfg] {
    border-color: rgba(34, 197, 94, 0.3);
}

.history-item-main[b-knhp5spzfg] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.play-btn[b-knhp5spzfg] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-dark));
    border: none;
    border-radius: 50%;
    color: var(--wl-bg-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.play-btn:hover[b-knhp5spzfg] {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.play-btn svg[b-knhp5spzfg] {
    width: 1rem;
    height: 1rem;
}

.history-item-info[b-knhp5spzfg] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.history-date[b-knhp5spzfg] {
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.875rem;
}

.history-duration[b-knhp5spzfg] {
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.active-badge[b-knhp5spzfg] {
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-dark));
    color: var(--wl-bg-primary);
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.make-active-btn[b-knhp5spzfg] {
    padding: 0.375rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.make-active-btn:hover:not(:disabled)[b-knhp5spzfg] {
    background: var(--wl-border-medium);
    color: var(--wl-text-primary);
}

.make-active-btn:disabled[b-knhp5spzfg] {
    opacity: 0.5;
    cursor: not-allowed;
}

.no-history[b-knhp5spzfg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.no-history svg[b-knhp5spzfg] {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.5;
}

.no-history p[b-knhp5spzfg] {
    margin: 0;
}

/* Generate Section */
.generate-section[b-knhp5spzfg] {
    margin-top: 1rem;
    animation: fadeInUp-b-knhp5spzfg 0.4s ease forwards;
    animation-delay: 200ms;
    opacity: 0;
}

.validation-error[b-knhp5spzfg] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    color: #F87171;
    font-size: 0.875rem;
}

.validation-error svg[b-knhp5spzfg] {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.generate-btn[b-knhp5spzfg] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border: none;
    border-radius: 0.75rem;
    color: var(--wl-bg-primary);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.generate-btn:hover:not(:disabled)[b-knhp5spzfg] {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--wl-gold-rgb), 0.4);
}

.generate-btn:disabled[b-knhp5spzfg] {
    cursor: not-allowed;
}

.generate-btn.disabled[b-knhp5spzfg] {
    background: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.generate-btn svg[b-knhp5spzfg] {
    width: 1.25rem;
    height: 1.25rem;
}

.aipoint-cost[b-knhp5spzfg] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: rgba(var(--wl-purple-rgb), 0.3);
    border-radius: 1rem;
    font-size: 0.875rem;
    color: var(--wl-bg-primary);
}

.aipoint-cost svg[b-knhp5spzfg] {
    width: 0.875rem;
    height: 0.875rem;
}

.generating-indicator[b-knhp5spzfg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.spinner[b-knhp5spzfg] {
    width: 1.75rem;
    height: 1.75rem;
    border: 2.5px solid rgba(var(--wl-bg-dark-rgb), 0.2);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-knhp5spzfg 0.8s linear infinite;
}

.progress-hint[b-knhp5spzfg] {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.8;
    animation: pulse-b-knhp5spzfg 2s ease-in-out infinite;
}

@keyframes pulse-b-knhp5spzfg {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.balance-info[b-knhp5spzfg] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    color: var(--wl-text-muted);
    font-size: 0.875rem;
}

.balance-value[b-knhp5spzfg] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--wl-gold);
    font-weight: 600;
}

.balance-value svg[b-knhp5spzfg] {
    width: 0.875rem;
    height: 0.875rem;
}

.aipoint-balance .balance-value[b-knhp5spzfg] {
    color: var(--wl-purple);
}

.aipoint-balance .balance-value svg[b-knhp5spzfg] {
    color: var(--wl-purple);
}

/* Hidden Audio Element */
.hidden-audio[b-knhp5spzfg] {
    display: none;
}

/* Responsive */
@media (max-width: 640px) {
    .audio-wizard-page[b-knhp5spzfg] {
        padding: 1rem;
    }

    .header-text h1[b-knhp5spzfg] {
        font-size: 1.5rem;
    }

    .info-grid[b-knhp5spzfg] {
        grid-template-columns: repeat(2, 1fr);
    }

    .vocal-cast-list[b-knhp5spzfg] {
        grid-template-columns: 1fr;
    }

    .vocal-cast-member-header[b-knhp5spzfg] {
        flex-direction: column;
    }

    .vocal-cast-badges[b-knhp5spzfg] {
        justify-content: flex-start;
    }

    .vocal-profile-copy[b-knhp5spzfg] {
        min-height: 0;
    }

    .instrumental-cast[b-knhp5spzfg] {
        align-items: flex-start;
    }

    .history-item-main[b-knhp5spzfg] {
        flex-wrap: wrap;
    }

    .make-active-btn[b-knhp5spzfg],
    .active-badge[b-knhp5spzfg] {
        margin-left: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .generate-section[b-knhp5spzfg],
    .spinner[b-knhp5spzfg],
    .progress-hint[b-knhp5spzfg] {
        animation: none;
    }
}
/* /Components/Pages/Career/Music/Songs/Edit/LyricsEditor.razor.rz.scp.css */
.lyrics-editor[b-qohvfkm93x] {
    background: rgba(var(--wl-bg-secondary-rgb), 0.95);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    overflow: hidden;
}

.lyrics-header[b-qohvfkm93x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.lyrics-title[b-qohvfkm93x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--wl-text-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
}

.lyrics-title svg[b-qohvfkm93x] {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--wl-gold);
}

.btn-generate[b-qohvfkm93x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-generate:hover:not(:disabled)[b-qohvfkm93x] {
    background: linear-gradient(135deg, var(--wl-gold-light) 0%, var(--wl-gold) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-generate:disabled[b-qohvfkm93x] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-generate.insufficient[b-qohvfkm93x] {
    background: var(--wl-border-medium);
    color: var(--wl-text-muted);
}

.diamond-badge[b-qohvfkm93x] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: var(--wl-surface-primary);
    border-radius: 1rem;
    font-size: 0.75rem;
}

.spinner[b-qohvfkm93x] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--wl-bg-dark-rgb), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-qohvfkm93x 0.8s linear infinite;
}

@keyframes spin-b-qohvfkm93x {
    to { transform: rotate(360deg); }
}

.balance-warning[b-qohvfkm93x] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border-bottom: 1px solid rgba(var(--wl-red-rgb), 0.2);
    color: #F87171;
    font-size: 0.875rem;
}

.balance-info[b-qohvfkm93x] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--wl-text-muted);
}

.sections-list[b-qohvfkm93x] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-item[b-qohvfkm93x] {
    background: rgba(var(--wl-bg-tertiary-rgb), 0.4);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 0.75rem;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.section-item:focus-within[b-qohvfkm93x] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.section-item.instrumental[b-qohvfkm93x] {
    opacity: 0.7;
}

.section-header[b-qohvfkm93x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--wl-surface-primary);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.section-info[b-qohvfkm93x] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-type[b-qohvfkm93x] {
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-type.chorus[b-qohvfkm93x] {
    background: var(--wl-gold-border);
    color: var(--wl-gold);
}

.section-type.verse[b-qohvfkm93x] {
    background: rgba(59, 130, 246, 0.2);
    color: #60A5FA;
}

.section-type.bridge[b-qohvfkm93x] {
    background: rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

.section-type.prechorus[b-qohvfkm93x] {
    background: rgba(var(--wl-pink-rgb), 0.2);
    color: #F472B6;
}

.section-type.intro[b-qohvfkm93x],
.section-type.outro[b-qohvfkm93x] {
    background: rgba(34, 197, 94, 0.2);
    color: #4ADE80;
}

.section-type.solo[b-qohvfkm93x] {
    background: rgba(251, 146, 60, 0.2);
    color: #FB923C;
}

.section-type.breakdown[b-qohvfkm93x] {
    background: rgba(var(--wl-red-rgb), 0.2);
    color: #F87171;
}

.section-duration[b-qohvfkm93x] {
    color: var(--wl-text-muted);
    font-size: 0.75rem;
}

.instrumental-badge[b-qohvfkm93x] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-size: 0.75rem;
    font-style: italic;
}

.lyrics-textarea[b-qohvfkm93x] {
    width: 100%;
    min-height: 100px;
    padding: 1rem;
    background: transparent;
    border: none;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    resize: vertical;
    transition: background-color 0.2s ease;
}

.lyrics-textarea:focus[b-qohvfkm93x] {
    outline: none;
    background: rgba(var(--wl-gold-rgb), 0.03);
}

.lyrics-textarea[b-qohvfkm93x]::placeholder {
    color: var(--wl-text-muted);
    font-style: italic;
}

.lyrics-textarea.instrumental[b-qohvfkm93x] {
    color: var(--wl-text-muted);
    font-style: italic;
}

.lyrics-textarea:disabled[b-qohvfkm93x] {
    opacity: 0.5;
    cursor: not-allowed;
}

.no-sections[b-qohvfkm93x] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-align: center;
}

.lyrics-generator-backdrop[b-qohvfkm93x] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background:
        radial-gradient(circle at 50% 20%, rgba(var(--wl-gold-rgb), 0.08), transparent 36%),
        rgba(3, 9, 20, 0.84);
    backdrop-filter: blur(10px);
    animation: lyrics-modal-fade-b-qohvfkm93x 160ms ease-out;
}

.lyrics-generator-modal[b-qohvfkm93x] {
    position: relative;
    width: min(100%, 620px);
    overflow: hidden;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.34);
    border-radius: 1rem;
    background:
        radial-gradient(circle at 8% 0%, rgba(var(--wl-gold-rgb), 0.09), transparent 35%),
        linear-gradient(155deg, rgba(var(--wl-bg-secondary-rgb), 0.99), rgba(var(--wl-bg-primary-rgb), 0.99));
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.62),
        0 0 48px rgba(var(--wl-gold-rgb), 0.08);
    animation: lyrics-modal-rise-b-qohvfkm93x 220ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

.lyrics-generator-accent[b-qohvfkm93x] {
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--wl-gold), #f6d879, transparent);
    box-shadow: 0 0 18px rgba(var(--wl-gold-rgb), 0.5);
}

.lyrics-generator-header[b-qohvfkm93x] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 1.5rem 1.1rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
}

.lyrics-generator-heading[b-qohvfkm93x] {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    min-width: 0;
}

.lyrics-generator-icon[b-qohvfkm93x] {
    display: grid;
    place-items: center;
    flex: 0 0 2.8rem;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.35);
    border-radius: 0.8rem;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.09);
}

.lyrics-generator-icon svg[b-qohvfkm93x] {
    width: 1.45rem;
    height: 1.45rem;
}

.lyrics-generator-heading h2[b-qohvfkm93x] {
    margin: 0 0 0.35rem;
    color: var(--wl-text-primary);
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    letter-spacing: 0.055em;
}

.lyrics-generator-heading p[b-qohvfkm93x] {
    max-width: 46ch;
    margin: 0;
    color: var(--wl-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.lyrics-generator-close[b-qohvfkm93x] {
    display: grid;
    place-items: center;
    flex: 0 0 2.3rem;
    width: 2.3rem;
    height: 2.3rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 0.65rem;
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.035);
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.lyrics-generator-close:hover[b-qohvfkm93x] {
    color: var(--wl-text-primary);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.07);
}

.lyrics-generator-close svg[b-qohvfkm93x] {
    width: 1.1rem;
    height: 1.1rem;
}

.lyrics-generator-body[b-qohvfkm93x] {
    padding: 1.35rem 1.5rem 1.1rem;
}

.lyrics-generator-body label[b-qohvfkm93x] {
    display: block;
    margin-bottom: 0.55rem;
    color: var(--wl-text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.lyrics-generator-body textarea[b-qohvfkm93x] {
    width: 100%;
    min-height: 9rem;
    resize: vertical;
    padding: 0.95rem 1rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 0.75rem;
    outline: none;
    color: var(--wl-text-primary);
    background: rgba(var(--wl-bg-primary-rgb), 0.72);
    font-size: 0.95rem;
    line-height: 1.55;
    box-shadow: inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.025);
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.lyrics-generator-body textarea:focus[b-qohvfkm93x] {
    border-color: rgba(var(--wl-gold-rgb), 0.55);
    background: rgba(var(--wl-bg-primary-rgb), 0.9);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.09);
}

.lyrics-generator-body textarea[b-qohvfkm93x]::placeholder {
    color: var(--wl-text-muted);
}

.lyrics-generator-meta[b-qohvfkm93x] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.55rem;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
}

.lyrics-generator-count[b-qohvfkm93x] {
    flex-shrink: 0;
    color: var(--wl-text-secondary);
    font-variant-numeric: tabular-nums;
}

.lyrics-generator-footer[b-qohvfkm93x] {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    padding: 1rem 1.5rem 1.35rem;
}

.lyrics-generator-cancel[b-qohvfkm93x],
.lyrics-generator-submit[b-qohvfkm93x] {
    min-height: 2.75rem;
    padding: 0.7rem 1.1rem;
    border-radius: 0.7rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.035em;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
}

.lyrics-generator-cancel[b-qohvfkm93x] {
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.035);
}

.lyrics-generator-cancel:hover[b-qohvfkm93x] {
    color: var(--wl-text-primary);
    border-color: rgba(var(--wl-contrast-rgb), 0.22);
}

.lyrics-generator-submit[b-qohvfkm93x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    border: 1px solid rgba(255, 229, 145, 0.38);
    color: #111827;
    background: linear-gradient(135deg, var(--wl-gold-light), var(--wl-gold));
    box-shadow: 0 8px 24px rgba(var(--wl-gold-rgb), 0.2);
}

.lyrics-generator-submit:hover[b-qohvfkm93x] {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #fff0b3, var(--wl-gold-light));
}

.lyrics-generator-submit .ai-badge[b-qohvfkm93x] {
    padding-left: 0.65rem;
    border-left: 1px solid rgba(17, 24, 39, 0.24);
}

@keyframes lyrics-modal-fade-b-qohvfkm93x {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lyrics-modal-rise-b-qohvfkm93x {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
    .lyrics-generator-backdrop[b-qohvfkm93x] {
        align-items: end;
        padding: 0.65rem 0.65rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
    }

    .lyrics-generator-modal[b-qohvfkm93x] {
        border-radius: 1rem;
    }

    .lyrics-generator-header[b-qohvfkm93x] {
        padding: 1.15rem 1rem 0.9rem;
    }

    .lyrics-generator-icon[b-qohvfkm93x] {
        display: none;
    }

    .lyrics-generator-body[b-qohvfkm93x] {
        padding: 1rem;
    }

    .lyrics-generator-footer[b-qohvfkm93x] {
        padding: 0.85rem 1rem 1rem;
    }

    .lyrics-generator-cancel[b-qohvfkm93x],
    .lyrics-generator-submit[b-qohvfkm93x] {
        flex: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lyrics-generator-backdrop[b-qohvfkm93x],
    .lyrics-generator-modal[b-qohvfkm93x] {
        animation: none;
    }
}
/* /Components/Pages/Career/Music/Songs/HotRightNow.razor.rz.scp.css */
.hot-right-now[b-bd5n80lg29] {
    margin-bottom: 2rem;
}

.section-header[b-bd5n80lg29] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.section-icon[b-bd5n80lg29] {
    width: 2rem;
    height: 2rem;
    color: var(--wl-gold);
}

.section-icon svg[b-bd5n80lg29] {
    width: 100%;
    height: 100%;
}

.section-header h2[b-bd5n80lg29] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0;
}

.hot-cards[b-bd5n80lg29] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.hot-card[b-bd5n80lg29] {
    position: relative;
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold-bg), rgba(var(--wl-gold-rgb), 0.05));
    border: 1px solid var(--wl-gold-border);
    border-radius: 1rem;
    transition: all 0.2s ease;
}

.hot-card:hover[b-bd5n80lg29] {
    transform: translateY(-2px);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    box-shadow: 0 8px 32px var(--wl-gold-bg-hover);
}

.certificate-badge[b-bd5n80lg29] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
}

.certificate-badge.cert-gold[b-bd5n80lg29] {
    color: var(--wl-gold);
}

.certificate-badge.cert-platinum[b-bd5n80lg29] {
    color: #E5E4E2;
}

.certificate-badge.cert-diamond[b-bd5n80lg29] {
    color: #B9F2FF;
}

.certificate-badge svg[b-bd5n80lg29] {
    width: 100%;
    height: 100%;
}

.momentum-indicator[b-bd5n80lg29] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.momentum-flame[b-bd5n80lg29] {
    width: 1.25rem;
    height: 1.25rem;
    color: #FF6B35;
    animation: flame-pulse-b-bd5n80lg29 1.5s ease-in-out infinite;
}

.momentum-flame svg[b-bd5n80lg29] {
    width: 100%;
    height: 100%;
}

@keyframes flame-pulse-b-bd5n80lg29 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

.momentum-value[b-bd5n80lg29] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #FF6B35;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.song-title[b-bd5n80lg29] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-meta[b-bd5n80lg29] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.streams[b-bd5n80lg29] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.streams svg[b-bd5n80lg29] {
    width: 0.875rem;
    height: 0.875rem;
}

.card-actions[b-bd5n80lg29] {
    display: flex;
    gap: 0.5rem;
}

.action-btn[b-bd5n80lg29] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: rgba(var(--wl-contrast-rgb), 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.action-btn:hover[b-bd5n80lg29] {
    background: var(--wl-border-medium);
    color: var(--wl-text-primary);
}

.action-btn.ai:hover[b-bd5n80lg29] {
    background: rgba(var(--wl-purple-rgb), 0.2);
    border-color: rgba(var(--wl-purple-rgb), 0.3);
    color: var(--wl-purple);
}

.action-btn svg[b-bd5n80lg29] {
    width: 1.125rem;
    height: 1.125rem;
}

@media (max-width: 1024px) {
    .hot-cards[b-bd5n80lg29] {
        grid-template-columns: repeat(2, 1fr);
    }

    .hot-cards .hot-card:last-child:nth-child(3)[b-bd5n80lg29] {
        grid-column: span 2;
        max-width: 50%;
        justify-self: center;
    }
}

@media (max-width: 640px) {
    .hot-cards[b-bd5n80lg29] {
        grid-template-columns: 1fr;
    }

    .hot-cards .hot-card:last-child:nth-child(3)[b-bd5n80lg29] {
        grid-column: auto;
        max-width: none;
    }
}
/* /Components/Pages/Career/Music/Songs/Index.razor.rz.scp.css */
/* ============================================
   MY SONGS DASHBOARD - Song Management UI
   Theme: Luxury Music Streaming / Discography
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.songs-page[b-bwoebj9s1i] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-atmosphere[b-bwoebj9s1i] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(34, 211, 238, 0.03) 0%, transparent 50%);
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-bwoebj9s1i] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 2rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--wl-gold-bg-hover);
}

.page-header[b-bwoebj9s1i]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-bwoebj9s1i] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-bwoebj9s1i] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid var(--wl-gold-border);
    border-radius: 1rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-bwoebj9s1i] {
    width: 1.75rem;
    height: 1.75rem;
}

.header-text h1[b-bwoebj9s1i] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.header-subtitle[b-bwoebj9s1i] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

.create-btn[b-bwoebj9s1i] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0.5rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.3);
}

.create-btn:hover[b-bwoebj9s1i] {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(var(--wl-gold-rgb), 0.4);
    background: linear-gradient(135deg, var(--wl-gold-light) 0%, var(--wl-gold) 100%);
}

.create-btn svg[b-bwoebj9s1i] {
    width: 1.125rem;
    height: 1.125rem;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-bwoebj9s1i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    color: var(--wl-text-muted);
    gap: 1.5rem;
}

.loading-spinner[b-bwoebj9s1i] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-gold-bg);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-bwoebj9s1i 1s linear infinite;
}

@keyframes spin-b-bwoebj9s1i {
    to { transform: rotate(360deg); }
}

/* ============================================
   QUICK STATS
   ============================================ */

.quick-stats[b-bwoebj9s1i] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    animation: fadeSlideIn-b-bwoebj9s1i 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes fadeSlideIn-b-bwoebj9s1i {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stat-card[b-bwoebj9s1i] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    position: relative;
    overflow: hidden;
}

.stat-card[b-bwoebj9s1i]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
}

.stat-icon[b-bwoebj9s1i] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

.stat-icon svg[b-bwoebj9s1i] {
    width: 1.5rem;
    height: 1.5rem;
}

.stat-icon.songs[b-bwoebj9s1i] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.15) 0%, rgba(var(--wl-purple-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

.stat-icon.streams[b-bwoebj9s1i] {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.05) 100%);
    border: 1px solid rgba(34, 211, 238, 0.2);
    color: #22D3EE;
}

.stat-icon.revenue[b-bwoebj9s1i] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #22C55E;
}

.stat-content[b-bwoebj9s1i] {
    display: flex;
    flex-direction: column;
}

.stat-value[b-bwoebj9s1i] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: var(--wl-text-primary);
    line-height: 1;
}

.stat-label[b-bwoebj9s1i] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* ============================================
   MODALS
   ============================================ */

.modal-backdrop[b-bwoebj9s1i] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1000;
    animation: fadeIn-b-bwoebj9s1i 0.2s ease;
}

@keyframes fadeIn-b-bwoebj9s1i {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content[b-bwoebj9s1i] {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    animation: modalSlideIn-b-bwoebj9s1i 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideIn-b-bwoebj9s1i {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-close[b-bwoebj9s1i] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover[b-bwoebj9s1i] {
    background: var(--wl-border-medium);
    color: var(--wl-text-primary);
}

.modal-close svg[b-bwoebj9s1i] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Details Modal */
.details-modal .modal-header[b-bwoebj9s1i] {
    padding: 2rem;
    padding-right: 4rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.details-modal .modal-header h2[b-bwoebj9s1i] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem 0;
}

.modal-subtitle[b-bwoebj9s1i] {
    font-size: 0.9375rem;
    color: var(--wl-text-muted);
    margin: 0;
}

.modal-certificate[b-bwoebj9s1i] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1rem;
}

.modal-certificate svg[b-bwoebj9s1i] {
    width: 1rem;
    height: 1rem;
}

.modal-certificate.cert-gold[b-bwoebj9s1i] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.25) 0%, var(--wl-gold-bg) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.5);
    color: var(--wl-gold);
}

.modal-certificate.cert-platinum[b-bwoebj9s1i] {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.25) 0%, rgba(192, 192, 192, 0.1) 100%);
    border: 1px solid rgba(192, 192, 192, 0.5);
    color: #E5E5E5;
}

.modal-certificate.cert-diamond[b-bwoebj9s1i] {
    background: linear-gradient(135deg, rgba(var(--wl-diamond-rgb), 0.25) 0%, rgba(var(--wl-diamond-rgb), 0.1) 100%);
    border: 1px solid rgba(var(--wl-diamond-rgb), 0.5);
    color: var(--wl-diamond);
}

.modal-body[b-bwoebj9s1i] {
    padding: 1.5rem 2rem;
}

.detail-section[b-bwoebj9s1i] {
    margin-bottom: 2rem;
}

.detail-section:last-child[b-bwoebj9s1i] {
    margin-bottom: 0;
}

.detail-section h3[b-bwoebj9s1i] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin: 0 0 1rem 0;
}

.detail-grid[b-bwoebj9s1i] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.detail-item[b-bwoebj9s1i] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label[b-bwoebj9s1i] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.detail-value[b-bwoebj9s1i] {
    font-size: 1rem;
    color: var(--wl-text-primary);
}

/* Platform Breakdown */
.platform-breakdown[b-bwoebj9s1i] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.platform-row[b-bwoebj9s1i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-radius: 0.5rem;
}

.platform-name[b-bwoebj9s1i] {
    font-size: 0.9375rem;
    color: var(--wl-text-primary);
}

.platform-streams[b-bwoebj9s1i] {
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.modal-footer[b-bwoebj9s1i] {
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--wl-border-subtle);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

.modal-btn[b-bwoebj9s1i] {
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-btn.secondary[b-bwoebj9s1i] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.modal-btn.secondary:hover[b-bwoebj9s1i] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.25);
    color: var(--wl-text-primary);
}

/* Delete Modal */
.delete-modal[b-bwoebj9s1i] {
    text-align: center;
    padding: 3rem 2rem;
    max-width: 400px;
}

.delete-icon[b-bwoebj9s1i] {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    color: #F87171;
}

.delete-icon svg[b-bwoebj9s1i] {
    width: 2rem;
    height: 2rem;
}

.delete-modal h2[b-bwoebj9s1i] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.75rem 0;
}

.delete-modal p[b-bwoebj9s1i] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 2rem 0;
}

.modal-actions[b-bwoebj9s1i] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.modal-btn.danger[b-bwoebj9s1i] {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    border: none;
    color: var(--wl-text-primary);
    min-width: 6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal-btn.danger:hover:not(:disabled)[b-bwoebj9s1i] {
    background: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
}

.modal-btn.danger:disabled[b-bwoebj9s1i] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-spinner[b-bwoebj9s1i] {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--wl-text-muted);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-bwoebj9s1i 0.8s linear infinite;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .songs-page[b-bwoebj9s1i] {
        padding: 0 1rem 3rem;
    }

    .page-header[b-bwoebj9s1i] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-text h1[b-bwoebj9s1i] {
        font-size: 1.75rem;
    }

    .create-btn[b-bwoebj9s1i] {
        width: 100%;
        justify-content: center;
    }

    .quick-stats[b-bwoebj9s1i] {
        grid-template-columns: 1fr;
    }

    .detail-grid[b-bwoebj9s1i] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-bwoebj9s1i] {
        margin: 1rem;
        max-height: 90vh;
    }
}

@media (max-width: 480px) {
    .header-content[b-bwoebj9s1i] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-icon[b-bwoebj9s1i] {
        width: 2.75rem;
        height: 2.75rem;
    }

    .header-icon svg[b-bwoebj9s1i] {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .quick-stats[b-bwoebj9s1i],
    .modal-backdrop[b-bwoebj9s1i],
    .modal-content[b-bwoebj9s1i] {
        animation: none;
    }

    .loading-spinner[b-bwoebj9s1i],
    .btn-spinner[b-bwoebj9s1i] {
        animation: none;
    }

    .create-btn:hover[b-bwoebj9s1i] {
        transform: none;
    }
}
/* /Components/Pages/Career/Music/Songs/SongHeatHistoryModal.razor.rz.scp.css */
.heat-history-backdrop[b-9br45hoi7d] {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(5px);
}

.heat-history-modal[b-9br45hoi7d] {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(38rem, 100%);
    max-height: min(46rem, calc(100vh - 2.5rem));
    overflow: hidden;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-radius: 16px;
    background: linear-gradient(180deg, rgb(var(--wl-bg-secondary-rgb)), rgb(var(--wl-bg-modal-deep-rgb)));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.heat-history-close[b-9br45hoi7d] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
    cursor: pointer;
}

.heat-history-close:hover[b-9br45hoi7d] {
    color: var(--wl-text-primary);
    background: rgba(var(--wl-contrast-rgb), 0.1);
}

.heat-history-close svg[b-9br45hoi7d] {
    width: 1.1rem;
    height: 1.1rem;
}

.heat-history-header[b-9br45hoi7d] {
    flex-shrink: 0;
    padding: 1.5rem 4rem 1.25rem 1.5rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.heat-history-eyebrow[b-9br45hoi7d] {
    color: var(--wl-gold);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.heat-history-header h2[b-9br45hoi7d] {
    margin: 0.25rem 0 0.4rem;
    color: var(--wl-text-primary);
    font-size: 1.45rem;
}

.heat-history-header p[b-9br45hoi7d] {
    margin: 0;
    color: var(--wl-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.heat-history-loading[b-9br45hoi7d],
.heat-history-empty[b-9br45hoi7d] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 12rem;
    padding: 2rem;
    color: var(--wl-text-muted);
}

.heat-history-spinner[b-9br45hoi7d] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: heat-history-spin-b-9br45hoi7d 0.8s linear infinite;
}

@keyframes heat-history-spin-b-9br45hoi7d {
    to { transform: rotate(360deg); }
}

.heat-history-current[b-9br45hoi7d] {
    flex-shrink: 0;
    margin: 1.25rem 1.5rem 0.75rem;
    padding: 1rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 10px;
    background: rgba(var(--wl-gold-rgb), 0.06);
}

.heat-history-current-copy[b-9br45hoi7d] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.heat-history-current-copy strong[b-9br45hoi7d] {
    color: var(--wl-text-primary);
    font-size: 1.35rem;
    letter-spacing: 0;
}

.heat-history-current-copy small[b-9br45hoi7d] {
    color: var(--wl-text-muted);
    font-size: 0.7rem;
}

.heat-history-current-bar[b-9br45hoi7d] {
    height: 0.4rem;
    margin-top: 0.7rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--wl-border-medium);
}

.heat-history-current-bar span[b-9br45hoi7d] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--wl-gold), #F59E0B);
}

.heat-history-list[b-9br45hoi7d] {
    position: relative;
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: 0.5rem 1.5rem 1.5rem;
}

.heat-history-row[b-9br45hoi7d] {
    position: relative;
    display: grid;
    grid-template-columns: 0.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.heat-history-marker[b-9br45hoi7d] {
    width: 0.55rem;
    height: 0.55rem;
    border: 2px solid var(--wl-text-muted);
    border-radius: 50%;
}

.heat-history-row.is-current .heat-history-marker[b-9br45hoi7d] {
    border-color: var(--wl-gold);
    background: var(--wl-gold);
    box-shadow: 0 0 0 4px rgba(var(--wl-gold-rgb), 0.12);
}

.heat-history-row-copy[b-9br45hoi7d],
.heat-history-values[b-9br45hoi7d] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.heat-history-row-copy strong[b-9br45hoi7d] {
    color: var(--wl-text-primary);
    font-size: 0.82rem;
}

.heat-history-row-copy span[b-9br45hoi7d] {
    color: var(--wl-text-muted);
    font-size: 0.7rem;
}

.heat-history-values[b-9br45hoi7d] {
    align-items: flex-end;
    min-width: 4.5rem;
    font-variant-numeric: tabular-nums;
}

.heat-history-values strong[b-9br45hoi7d] {
    color: var(--wl-text-primary);
    font-size: 0.9rem;
}

.heat-history-values span[b-9br45hoi7d] {
    font-size: 0.7rem;
    font-weight: 700;
}

.heat-history-values .positive[b-9br45hoi7d] { color: #22C55E; }
.heat-history-values .negative[b-9br45hoi7d] { color: #EF4444; }
.heat-history-values .neutral[b-9br45hoi7d] { color: var(--wl-text-muted); }

@media (max-width: 520px) {
    .heat-history-backdrop[b-9br45hoi7d] { padding: 0.5rem; }
    .heat-history-modal[b-9br45hoi7d] { max-height: calc(100vh - 1rem); }
    .heat-history-header[b-9br45hoi7d] { padding-left: 1rem; }
    .heat-history-current[b-9br45hoi7d] { margin-left: 1rem; margin-right: 1rem; }
    .heat-history-list[b-9br45hoi7d] { padding-left: 1rem; padding-right: 1rem; }
}
/* /Components/Pages/Career/Music/Songs/SongsFilters.razor.rz.scp.css */
/* ============================================
   SONGS FILTERS COMPONENT
   Status tabs, search box, and genre dropdown
   ============================================ */

.songs-filters[b-nq3rl9nmfe] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    animation: fadeSlideIn-b-nq3rl9nmfe 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes fadeSlideIn-b-nq3rl9nmfe {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   STATUS TABS
   ============================================ */

.status-tabs[b-nq3rl9nmfe] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.status-tab[b-nq3rl9nmfe] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    border: 1px solid var(--wl-border-medium);
    border-radius: 9999px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.status-tab:hover[b-nq3rl9nmfe] {
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    color: var(--wl-text-primary);
}

.status-tab.active[b-nq3rl9nmfe] {
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, var(--wl-gold-bg) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

.tab-count[b-nq3rl9nmfe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0 0.375rem;
    background: var(--wl-border-medium);
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-tab.active .tab-count[b-nq3rl9nmfe] {
    background: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

/* ============================================
   FILTER CONTROLS (Search + Genre)
   ============================================ */

.filter-controls[b-nq3rl9nmfe] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ============================================
   SEARCH BOX
   ============================================ */

.search-box[b-nq3rl9nmfe] {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
}

.search-box svg[b-nq3rl9nmfe] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    height: 1.125rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    pointer-events: none;
}

.search-box input[b-nq3rl9nmfe] {
    width: 100%;
    padding: 0.875rem 2.75rem 0.875rem 2.75rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.search-box input[b-nq3rl9nmfe]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.search-box input:focus[b-nq3rl9nmfe] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
}

.clear-btn[b-nq3rl9nmfe] {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-border-medium);
    border: none;
    border-radius: 0.375rem;
    color: var(--wl-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-btn:hover[b-nq3rl9nmfe] {
    background: var(--wl-surface-primary);
    color: var(--wl-text-primary);
}

.clear-btn svg[b-nq3rl9nmfe] {
    position: static;
    transform: none;
    width: 0.875rem;
    height: 0.875rem;
    pointer-events: none;
}

/* ============================================
   GENRE FILTER DROPDOWN
   ============================================ */

.genre-filter[b-nq3rl9nmfe] {
    position: relative;
    min-width: 180px;
}

.genre-filter select[b-nq3rl9nmfe] {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 1rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
    transition: all 0.3s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='var(--wl-text-muted)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.genre-filter select:focus[b-nq3rl9nmfe] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    background-color: rgba(var(--wl-bg-tertiary-rgb), 0.8);
}

.genre-filter select option[b-nq3rl9nmfe] {
    background: var(--wl-bg-secondary);
    color: var(--wl-text-primary);
    padding: 0.5rem;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .status-tabs[b-nq3rl9nmfe] {
        justify-content: center;
    }

    .filter-controls[b-nq3rl9nmfe] {
        flex-direction: column;
    }

    .search-box[b-nq3rl9nmfe] {
        max-width: none;
    }

    .genre-filter[b-nq3rl9nmfe] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .status-tab[b-nq3rl9nmfe] {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .songs-filters[b-nq3rl9nmfe] {
        animation: none;
    }

    .status-tab[b-nq3rl9nmfe],
    .search-box input[b-nq3rl9nmfe],
    .clear-btn[b-nq3rl9nmfe],
    .genre-filter select[b-nq3rl9nmfe] {
        transition: none;
    }
}
/* /Components/Pages/Career/Music/Songs/SongsTable.razor.rz.scp.css */
.songs-table-container[b-p5gvckntze] {
    overflow-x: auto;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
}

.songs-table[b-p5gvckntze] {
    width: 100%;
    border-collapse: collapse;
}

.songs-table th[b-p5gvckntze] {
    padding: 0.875rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-muted);
    border-bottom: 1px solid var(--wl-border-medium);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.songs-table th:hover[b-p5gvckntze] {
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.sort-icon[b-p5gvckntze] {
    margin-left: 0.25rem;
    color: var(--wl-gold);
}

.songs-table td[b-p5gvckntze] {
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.song-row:hover[b-p5gvckntze] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.empty-row[b-p5gvckntze] {
    text-align: center;
    padding: 3rem 1rem !important;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

/* Title column */
.title-cell[b-p5gvckntze] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.title-text[b-p5gvckntze] {
    font-weight: 500;
}

.title-genre[b-p5gvckntze] {
    display: none;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

/* Status badge */
.status-badge[b-p5gvckntze] {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.status-draft[b-p5gvckntze] {
    background: rgba(156, 163, 175, 0.2);
    color: #9CA3AF;
}

.status-badge.status-recording[b-p5gvckntze],
.status-badge.status-mixing[b-p5gvckntze],
.status-badge.status-mixed[b-p5gvckntze],
.status-badge.status-mastering[b-p5gvckntze] {
    background: rgba(var(--wl-red-rgb), 0.2);
    color: #EF4444;
}

.status-badge.status-ready[b-p5gvckntze] {
    background: rgba(59, 130, 246, 0.2);
    color: #3B82F6;
}

.status-badge.status-released[b-p5gvckntze] {
    background: rgba(34, 197, 94, 0.2);
    color: #22C55E;
}

.status-badge.status-scheduled[b-p5gvckntze] {
    background: rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

/* Momentum bar */
.momentum-cell[b-p5gvckntze] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    padding: 0.25rem 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.momentum-cell:hover .momentum-bar[b-p5gvckntze],
.momentum-cell:focus-visible .momentum-bar[b-p5gvckntze] {
    box-shadow: 0 0 0 2px rgba(var(--wl-gold-rgb), 0.18);
}

.momentum-cell:focus-visible[b-p5gvckntze] {
    outline: 2px solid rgba(var(--wl-gold-rgb), 0.45);
    outline-offset: 3px;
    border-radius: 4px;
}

.momentum-value[b-p5gvckntze] {
    color: var(--wl-text-primary);
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.momentum-value small[b-p5gvckntze] {
    margin-left: 0.1rem;
    color: var(--wl-text-muted);
    font-size: 0.6rem;
    font-weight: 500;
}

.momentum-bar[b-p5gvckntze] {
    height: 0.375rem;
    background: var(--wl-border-medium);
    border-radius: 9999px;
    overflow: hidden;
}

.momentum-fill[b-p5gvckntze] {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.momentum-fill.high[b-p5gvckntze] {
    background: linear-gradient(90deg, #22C55E, #4ADE80);
}

.momentum-fill.medium[b-p5gvckntze] {
    background: linear-gradient(90deg, #EAB308, #FACC15);
}

.momentum-fill.low[b-p5gvckntze] {
    background: linear-gradient(90deg, #EF4444, #F87171);
}

/* Actions */
.action-buttons[b-p5gvckntze] {
    display: flex;
    gap: 0.375rem;
}

.action-icon[b-p5gvckntze] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.375rem;
    background: transparent;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.action-icon:hover[b-p5gvckntze] {
    background: var(--wl-border-medium);
    color: var(--wl-text-primary);
}

.action-icon.primary:hover[b-p5gvckntze] {
    background: var(--wl-gold-border);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.action-icon.ai:hover[b-p5gvckntze] {
    background: rgba(var(--wl-purple-rgb), 0.2);
    border-color: rgba(var(--wl-purple-rgb), 0.3);
    color: var(--wl-purple);
}

.action-icon.danger:hover[b-p5gvckntze] {
    background: rgba(var(--wl-red-rgb), 0.2);
    border-color: rgba(var(--wl-red-rgb), 0.3);
    color: #EF4444;
}

.action-icon svg[b-p5gvckntze] {
    width: 1rem;
    height: 1rem;
}

.text-muted[b-p5gvckntze] {
    color: var(--wl-text-muted);
}

/* Column widths */
.col-title[b-p5gvckntze] { min-width: 200px; }
.col-genre[b-p5gvckntze] { width: 120px; }
.col-status[b-p5gvckntze] { width: 100px; }
.col-date[b-p5gvckntze] { width: 110px; }
.col-streams[b-p5gvckntze] { width: 90px; text-align: right; }
.col-revenue[b-p5gvckntze] { width: 90px; text-align: right; }
.col-momentum[b-p5gvckntze] { width: 120px; }
.col-actions[b-p5gvckntze] { width: 140px; }

/* Right-align numeric columns */
.col-streams[b-p5gvckntze], .col-revenue[b-p5gvckntze] {
    text-align: right;
}

th.col-streams[b-p5gvckntze], th.col-revenue[b-p5gvckntze] {
    text-align: right;
}

/* Responsive */
@media (max-width: 1024px) {
    .hide-tablet[b-p5gvckntze] {
        display: none;
    }
}

/*
 * Mobile: the fixed-width table overflowed horizontally and pushed the actions
 * column (and especially its second button, e.g. "open recorded song") off the
 * right edge of the viewport, leaving it unreachable. Below 768px we drop the
 * table semantics and render each row as a self-contained card with label:value
 * rows, so every song and all of its action buttons are visible and tappable
 * down to ~360px without any horizontal scrolling.
 */
@media (max-width: 768px) {
    .songs-table-container[b-p5gvckntze] {
        overflow-x: visible;
        border: none;
        background: transparent;
        border-radius: 0;
    }

    .songs-table[b-p5gvckntze],
    .songs-table tbody[b-p5gvckntze],
    .songs-table tr[b-p5gvckntze],
    .songs-table td[b-p5gvckntze] {
        display: block;
        width: 100%;
    }

    /* Header row is meaningless once rows become cards. */
    .songs-table thead[b-p5gvckntze] {
        display: none;
    }

    .mobile-only[b-p5gvckntze] {
        display: block;
    }

    .title-genre.mobile-only[b-p5gvckntze] {
        display: block;
    }

    /* Columns that were hidden on the desktop table stay hidden as card rows. */
    .songs-table td.hide-mobile[b-p5gvckntze] {
        display: none;
    }

    .song-row[b-p5gvckntze] {
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.875rem;
        border: 1px solid var(--wl-border-medium);
        border-radius: 0.75rem;
        background: rgba(var(--wl-contrast-rgb), 0.02);
    }

    .song-row:hover[b-p5gvckntze] {
        background: rgba(var(--wl-contrast-rgb), 0.02);
    }

    /* Generic label:value layout for each data cell inside the card. */
    .songs-table td[b-p5gvckntze] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.5rem 0;
        text-align: right;
        border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
        font-size: 0.875rem;
    }

    .songs-table td:last-child[b-p5gvckntze] {
        border-bottom: none;
    }

    .songs-table td[b-p5gvckntze]::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--wl-text-muted);
        text-align: left;
    }

    /* Title sits at the top of the card as a heading, no label prefix. */
    .songs-table td.col-title[b-p5gvckntze] {
        padding-top: 0.25rem;
        text-align: left;
        font-size: 1rem;
    }

    .songs-table td.col-title[b-p5gvckntze]::before {
        display: none;
    }

    .title-cell[b-p5gvckntze] {
        width: 100%;
    }

    .title-text[b-p5gvckntze] {
        font-weight: 600;
        font-size: 1rem;
    }

    /* Right-aligned numeric columns already align with the flex layout. */
    .songs-table td.col-streams[b-p5gvckntze],
    .songs-table td.col-revenue[b-p5gvckntze] {
        text-align: right;
    }

    .songs-table td.col-momentum[b-p5gvckntze] {
        width: 100%;
    }

    .songs-table td.col-momentum .momentum-cell[b-p5gvckntze] {
        width: min(12rem, 55vw);
        align-items: flex-end;
    }

    .songs-table td.col-momentum .momentum-bar[b-p5gvckntze] {
        width: 100%;
    }

    /* Actions: full-width, wrap if needed, every button reachable. */
    .songs-table td.col-actions[b-p5gvckntze] {
        width: 100%;
        padding-top: 0.625rem;
    }

    .songs-table td.col-actions[b-p5gvckntze]::before {
        align-self: center;
    }

    .action-buttons[b-p5gvckntze] {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .action-icon[b-p5gvckntze] {
        width: 2.5rem;
        height: 2.5rem;
    }

    .empty-row[b-p5gvckntze] {
        text-align: center !important;
        justify-content: center;
    }

    .empty-row[b-p5gvckntze]::before {
        display: none;
    }
}

/* Song rating column (Ocena) - visible directly in the list */
.col-rating[b-p5gvckntze] {
    white-space: nowrap;
}

.rating-badge[b-p5gvckntze] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.1rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.rating-badge .rating-max[b-p5gvckntze] {
    font-size: 0.7em;
    font-weight: 500;
    color: var(--wl-text-muted);
}
/* /Components/Pages/Career/Music/Streaming/ArtistPage.razor.rz.scp.css */
.artist-stats[b-80ei8o969u] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Header */
.stats-header[b-80ei8o969u] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.stats-eyebrow[b-80ei8o969u] {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
    margin-bottom: 0.25rem;
}

.stats-header h1[b-80ei8o969u] {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
}

/* Monthly listeners hero */
.listeners-hero[b-80ei8o969u] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: 16px;
    background: var(--wl-panel-grad);
    border: 1px solid var(--wl-gold-border);
    box-shadow: var(--wl-panel-shadow);
}

.listeners-main[b-80ei8o969u] {
    display: flex;
    flex-direction: column;
}

.listeners-value[b-80ei8o969u] {
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    font-weight: 800;
    line-height: 1;
    color: var(--wl-gold);
}

.listeners-label[b-80ei8o969u] {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--wl-text-secondary);
}

.listeners-trend[b-80ei8o969u] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
}

.listeners-trend .sparkline[b-80ei8o969u] {
    width: 100%;
    height: 56px;
}

.trend-caption[b-80ei8o969u] {
    font-size: 0.72rem;
    color: var(--wl-text-muted);
    text-align: center;
}

.listeners-total[b-80ei8o969u] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.total-value[b-80ei8o969u] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--wl-text-primary);
}

.total-label[b-80ei8o969u] {
    font-size: 0.78rem;
    color: var(--wl-text-secondary);
}

/* Grid of cards */
.stats-grid[b-80ei8o969u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.stats-card[b-80ei8o969u] {
    background: var(--wl-surface-primary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 14px;
    padding: 1.25rem;
}

.card-title[b-80ei8o969u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0 0 1rem;
}

.card-title svg[b-80ei8o969u] {
    width: 20px;
    height: 20px;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.card-empty[b-80ei8o969u] {
    color: var(--wl-text-muted);
    font-size: 0.88rem;
    margin: 0;
}

/* Rank list (popular songs) */
.rank-list[b-80ei8o969u] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.rank-row[b-80ei8o969u] {
    display: grid;
    grid-template-columns: 1.75rem 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.rank-row:last-child[b-80ei8o969u] {
    border-bottom: none;
}

.rank-num[b-80ei8o969u] {
    font-weight: 700;
    color: var(--wl-text-muted);
    text-align: center;
}

.rank-title[b-80ei8o969u] {
    color: var(--wl-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rank-meta[b-80ei8o969u] {
    font-size: 0.82rem;
    color: var(--wl-text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Release grid */
.release-grid[b-80ei8o969u] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
}

.release-card[b-80ei8o969u] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.release-cover[b-80ei8o969u] {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: var(--wl-surface-hover);
    border: 1px solid var(--wl-border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.release-cover[b-80ei8o969u]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.release-cover svg[b-80ei8o969u] {
    width: 36%;
    height: 36%;
    color: var(--wl-text-muted);
}

.release-title[b-80ei8o969u] {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.release-meta[b-80ei8o969u] {
    font-size: 0.76rem;
    color: var(--wl-text-secondary);
}

/* Playlists */
.playlist-list[b-80ei8o969u] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.playlist-row[b-80ei8o969u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.playlist-row:last-child[b-80ei8o969u] {
    border-bottom: none;
    padding-bottom: 0;
}

.playlist-info[b-80ei8o969u] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 200px;
}

.playlist-name[b-80ei8o969u] {
    font-weight: 700;
    color: var(--wl-gold);
}

.playlist-desc[b-80ei8o969u] {
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

.playlist-followers[b-80ei8o969u] {
    font-size: 0.72rem;
    color: var(--wl-text-muted);
}

.playlist-songs[b-80ei8o969u] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.playlist-song-pill[b-80ei8o969u] {
    font-size: 0.74rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--wl-gold-bg);
    border: 1px solid var(--wl-gold-border);
    color: var(--wl-text-primary);
}

/* Empty / loading */
.stats-empty[b-80ei8o969u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 4rem 1rem;
    color: var(--wl-text-muted);
    text-align: center;
}

.stats-empty svg[b-80ei8o969u] {
    width: 48px;
    height: 48px;
}

@media (max-width: 768px) {
    .listeners-hero[b-80ei8o969u] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .listeners-total[b-80ei8o969u] {
        align-items: center;
        text-align: center;
    }

    .stats-grid[b-80ei8o969u] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Career/Music/Streaming/Index.razor.rz.scp.css */
/* ============================================
   STREAMING DEALS PAGE - Distribution Platform UI
   Theme: Digital Streaming / Music Industry Premium
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.streaming-page[b-wuvix5cpch] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 1400px;
    margin: 0 auto;
}

.page-atmosphere[b-wuvix5cpch] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(34, 211, 238, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-purple-rgb), 0.03) 0%, transparent 50%);
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-wuvix5cpch] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 2rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--wl-gold-bg-hover);
}

.page-header[b-wuvix5cpch]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-wuvix5cpch] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-wuvix5cpch] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.05) 100%);
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 1rem;
    color: #22D3EE;
    flex-shrink: 0;
}

.header-icon svg[b-wuvix5cpch] {
    width: 1.75rem;
    height: 1.75rem;
}

.header-text h1[b-wuvix5cpch] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.25rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.header-subtitle[b-wuvix5cpch] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

.exclusive-indicator[b-wuvix5cpch] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, var(--wl-gold-bg) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    border-radius: 9999px;
    color: var(--wl-gold);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    box-shadow: 0 0 20px var(--wl-gold-border);
    animation: exclusivePulse-b-wuvix5cpch 2s ease-in-out infinite;
}

@keyframes exclusivePulse-b-wuvix5cpch {
    0%, 100% { box-shadow: 0 0 20px var(--wl-gold-border); }
    50% { box-shadow: 0 0 30px rgba(var(--wl-gold-rgb), 0.4); }
}

.exclusive-indicator svg[b-wuvix5cpch] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-wuvix5cpch] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    color: var(--wl-text-muted);
    gap: 1.5rem;
}

.loading-spinner[b-wuvix5cpch] {
    width: 3rem;
    height: 3rem;
    border: 3px solid rgba(34, 211, 238, 0.1);
    border-top-color: #22D3EE;
    border-radius: 50%;
    animation: spin-b-wuvix5cpch 1s linear infinite;
}

@keyframes spin-b-wuvix5cpch {
    to { transform: rotate(360deg); }
}

/* ============================================
   SECTION TITLES
   ============================================ */

.section-title[b-wuvix5cpch] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin: 0 0 1.5rem 0;
}

.section-title svg[b-wuvix5cpch] {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.8;
}

/* ============================================
   ACTIVE DEALS SECTION
   ============================================ */

.deals-section[b-wuvix5cpch] {
    position: relative;
    z-index: 1;
    margin-bottom: 3rem;
    animation: fadeSlideIn-b-wuvix5cpch 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes fadeSlideIn-b-wuvix5cpch {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.active-deals-grid[b-wuvix5cpch] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

.deal-card[b-wuvix5cpch] {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 1.5rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.deal-card[b-wuvix5cpch]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22D3EE, #3B82F6);
}

.deal-card:hover[b-wuvix5cpch] {
    transform: translateY(-4px);
    box-shadow: 0 15px 40px var(--wl-shadow-color);
}

.deal-card.exclusive[b-wuvix5cpch] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.deal-card.exclusive[b-wuvix5cpch]::before {
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
}

.deal-glow[b-wuvix5cpch] {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at center, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 60%);
    pointer-events: none;
    animation: glowPulse-b-wuvix5cpch 3s ease-in-out infinite;
}

@keyframes glowPulse-b-wuvix5cpch {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.deal-header[b-wuvix5cpch] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.platform-icon-large[b-wuvix5cpch] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.05) 100%);
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 0.75rem;
    color: #22D3EE;
}

.deal-card.exclusive .platform-icon-large[b-wuvix5cpch] {
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.platform-icon-large svg[b-wuvix5cpch] {
    width: 1.75rem;
    height: 1.75rem;
}

.deal-info[b-wuvix5cpch] {
    flex: 1;
}

.deal-info .platform-name[b-wuvix5cpch] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
}

.deal-type[b-wuvix5cpch] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.25rem;
}

.deal-type.non-exclusive[b-wuvix5cpch] {
    color: #22D3EE;
}

.deal-type.exclusive[b-wuvix5cpch] {
    color: var(--wl-gold);
}

.deal-type svg[b-wuvix5cpch] {
    width: 0.75rem;
    height: 0.75rem;
}

.deal-stats[b-wuvix5cpch] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.deal-stat[b-wuvix5cpch] {
    text-align: center;
    padding: 0.75rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-radius: 0.5rem;
}

.deal-stat .stat-label[b-wuvix5cpch] {
    display: block;
    font-size: 0.625rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
}

.deal-stat .stat-value[b-wuvix5cpch] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-text-primary);
}

.deal-stat .stat-value.bonus[b-wuvix5cpch] {
    color: #22C55E;
}

.deal-stat .stat-value.expires[b-wuvix5cpch] {
    color: #F59E0B;
}

.terminate-btn[b-wuvix5cpch] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 0.5rem;
    color: #F87171;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.terminate-btn:hover:not(:disabled)[b-wuvix5cpch] {
    background: rgba(var(--wl-red-rgb), 0.2);
    border-color: rgba(var(--wl-red-rgb), 0.4);
}

.terminate-btn:disabled[b-wuvix5cpch] {
    opacity: 0.5;
    cursor: not-allowed;
}

.terminate-btn svg[b-wuvix5cpch] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   DEAL TYPES SECTION
   ============================================ */

.deal-types-section[b-wuvix5cpch] {
    position: relative;
    z-index: 1;
    margin-bottom: 3rem;
    animation: fadeSlideIn-b-wuvix5cpch 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.deal-types-grid[b-wuvix5cpch] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.deal-type-card[b-wuvix5cpch] {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    padding: 1.5rem;
    overflow: hidden;
}

.deal-type-card.non-exclusive[b-wuvix5cpch]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22D3EE, #3B82F6);
}

.deal-type-card.exclusive[b-wuvix5cpch] {
    border-color: var(--wl-gold-border);
}

.deal-type-card.exclusive[b-wuvix5cpch]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
}

.type-glow[b-wuvix5cpch] {
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at center, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 60%);
    pointer-events: none;
}

.type-header[b-wuvix5cpch] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.type-icon[b-wuvix5cpch] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
}

.deal-type-card.non-exclusive .type-icon[b-wuvix5cpch] {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.05) 100%);
    border: 1px solid rgba(34, 211, 238, 0.2);
    color: #22D3EE;
}

.deal-type-card.exclusive .type-icon[b-wuvix5cpch] {
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
    box-shadow: 0 0 15px var(--wl-gold-bg-hover);
}

.type-icon svg[b-wuvix5cpch] {
    width: 1.5rem;
    height: 1.5rem;
}

.type-header h3[b-wuvix5cpch] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
}

.deal-type-card.exclusive .type-header h3[b-wuvix5cpch] {
    color: var(--wl-gold);
}

.type-description[b-wuvix5cpch] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
}

.type-benefits[b-wuvix5cpch] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.benefit[b-wuvix5cpch] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.benefit svg[b-wuvix5cpch] {
    width: 1rem;
    height: 1rem;
    color: #22C55E;
    flex-shrink: 0;
}

.benefit.warning[b-wuvix5cpch] {
    color: #F59E0B;
}

.benefit.warning svg[b-wuvix5cpch] {
    color: #F59E0B;
}

.type-bonus[b-wuvix5cpch] {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 9999px;
    color: #22C55E;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.type-bonus.premium[b-wuvix5cpch] {
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
    box-shadow: 0 0 15px var(--wl-gold-bg-hover);
}

/* ============================================
   PLATFORMS SECTION
   ============================================ */

.platforms-section[b-wuvix5cpch] {
    position: relative;
    z-index: 1;
    animation: fadeSlideIn-b-wuvix5cpch 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.platforms-grid[b-wuvix5cpch] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1.5rem;
}

.platform-card[b-wuvix5cpch] {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 1rem;
    padding: 1.5rem;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    animation: cardEnter-b-wuvix5cpch 0.5s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes cardEnter-b-wuvix5cpch {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.platform-card[b-wuvix5cpch]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(34, 211, 238, 0.5) 20%,
        rgba(34, 211, 238, 0.8) 50%,
        rgba(34, 211, 238, 0.5) 80%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.platform-card:hover:not(.has-deal)[b-wuvix5cpch] {
    transform: translateY(-8px);
    border-color: rgba(34, 211, 238, 0.2);
    box-shadow:
        0 20px 60px var(--wl-shadow-color),
        0 0 40px rgba(34, 211, 238, 0.08);
}

.platform-card:hover[b-wuvix5cpch]::before {
    opacity: 1;
}

.platform-card.has-deal[b-wuvix5cpch] {
    border-color: rgba(34, 197, 94, 0.2);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.05) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
}

.platform-card.has-deal[b-wuvix5cpch]::before {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(34, 197, 94, 0.5) 20%,
        rgba(34, 197, 94, 0.8) 50%,
        rgba(34, 197, 94, 0.5) 80%,
        transparent 100%);
    opacity: 1;
}

.platform-header[b-wuvix5cpch] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.platform-icon-container[b-wuvix5cpch] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.05) 100%);
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 0.75rem;
    color: #22D3EE;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.platform-card:hover .platform-icon-container[b-wuvix5cpch] {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.2);
}

.platform-icon-container svg[b-wuvix5cpch] {
    width: 1.75rem;
    height: 1.75rem;
}

.platform-title[b-wuvix5cpch] {
    flex: 1;
}

.platform-title h3[b-wuvix5cpch] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.2;
}

.signed-badge[b-wuvix5cpch] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 9999px;
    color: #22C55E;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.signed-badge svg[b-wuvix5cpch] {
    width: 0.75rem;
    height: 0.75rem;
}

.platform-description[b-wuvix5cpch] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    line-height: 1.6;
    margin: 0 0 1.25rem 0;
}

.platform-stats[b-wuvix5cpch] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.platform-stat[b-wuvix5cpch] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-radius: 0.5rem;
}

.stat-icon[b-wuvix5cpch] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    flex-shrink: 0;
}

.stat-icon svg[b-wuvix5cpch] {
    width: 1rem;
    height: 1rem;
}

.stat-icon.reach[b-wuvix5cpch] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.15) 0%, rgba(var(--wl-purple-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

.stat-icon.rate[b-wuvix5cpch] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #22C55E;
}

.stat-icon.viral[b-wuvix5cpch] {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.15) 0%, rgba(251, 146, 60, 0.05) 100%);
    border: 1px solid rgba(251, 146, 60, 0.2);
    color: #FB923C;
}

.stat-details[b-wuvix5cpch] {
    display: flex;
    flex-direction: column;
}

.stat-details .stat-label[b-wuvix5cpch] {
    font-size: 0.5625rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-details .stat-value[b-wuvix5cpch] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    color: var(--wl-text-primary);
    line-height: 1.2;
}

.platform-actions[b-wuvix5cpch] {
    display: flex;
    gap: 0.75rem;
}

.sign-btn[b-wuvix5cpch] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    padding: 0.875rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sign-btn svg[b-wuvix5cpch] {
    width: 1rem;
    height: 1rem;
}

.sign-btn.non-exclusive[b-wuvix5cpch] {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(34, 211, 238, 0.05) 100%);
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: #22D3EE;
}

.sign-btn.non-exclusive:hover:not(:disabled)[b-wuvix5cpch] {
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.25) 0%, rgba(34, 211, 238, 0.1) 100%);
    border-color: rgba(34, 211, 238, 0.5);
    transform: translateY(-2px);
}

.sign-btn.exclusive[b-wuvix5cpch] {
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, var(--wl-gold-bg) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

.sign-btn.exclusive:hover:not(:disabled)[b-wuvix5cpch] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.3) 0%, var(--wl-gold-bg-hover) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--wl-gold-border);
}

.sign-btn:disabled[b-wuvix5cpch] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.exclusive-lock-notice[b-wuvix5cpch] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, rgba(163, 163, 163, 0.1) 0%, rgba(163, 163, 163, 0.05) 100%);
    border: 1px solid rgba(163, 163, 163, 0.2);
    border-radius: 0.5rem;
    color: var(--wl-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.exclusive-lock-notice svg[b-wuvix5cpch] {
    width: 1rem;
    height: 1rem;
    opacity: 0.7;
}

.deal-active-badge[b-wuvix5cpch] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(34, 197, 94, 0.05) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 0.5rem;
    color: #22C55E;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.deal-active-badge svg[b-wuvix5cpch] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   MODAL
   ============================================ */

.modal-backdrop[b-wuvix5cpch] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 1000;
    animation: fadeIn-b-wuvix5cpch 0.2s ease;
}

@keyframes fadeIn-b-wuvix5cpch {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content[b-wuvix5cpch] {
    position: relative;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1rem;
    max-width: 400px;
    width: 100%;
    animation: modalSlideIn-b-wuvix5cpch 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalSlideIn-b-wuvix5cpch {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.terminate-modal[b-wuvix5cpch] {
    text-align: center;
    padding: 2.5rem 2rem;
}

.modal-icon[b-wuvix5cpch] {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
}

.modal-icon.warning[b-wuvix5cpch] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    color: #F87171;
}

.modal-icon svg[b-wuvix5cpch] {
    width: 2rem;
    height: 2rem;
}

.terminate-modal h2[b-wuvix5cpch] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.75rem 0;
}

.terminate-modal p[b-wuvix5cpch] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 2rem 0;
    line-height: 1.5;
}

.modal-actions[b-wuvix5cpch] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.modal-btn[b-wuvix5cpch] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 7rem;
}

.modal-btn.secondary[b-wuvix5cpch] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.modal-btn.secondary:hover[b-wuvix5cpch] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.25);
    color: var(--wl-text-primary);
}

.modal-btn.danger[b-wuvix5cpch] {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    border: none;
    color: var(--wl-text-primary);
}

.modal-btn.danger:hover:not(:disabled)[b-wuvix5cpch] {
    background: linear-gradient(135deg, #F87171 0%, #EF4444 100%);
}

.modal-btn.danger:disabled[b-wuvix5cpch] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-spinner[b-wuvix5cpch] {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--wl-text-muted);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin-b-wuvix5cpch 0.8s linear infinite;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .streaming-page[b-wuvix5cpch] {
        padding: 0 1rem 3rem;
    }

    .page-header[b-wuvix5cpch] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-text h1[b-wuvix5cpch] {
        font-size: 1.75rem;
    }

    .exclusive-indicator[b-wuvix5cpch] {
        width: 100%;
        justify-content: center;
    }

    .deal-types-grid[b-wuvix5cpch] {
        grid-template-columns: 1fr;
    }

    .platforms-grid[b-wuvix5cpch] {
        grid-template-columns: 1fr;
    }

    .platform-stats[b-wuvix5cpch] {
        grid-template-columns: 1fr;
    }

    .deal-stats[b-wuvix5cpch] {
        grid-template-columns: 1fr;
    }

    .platform-actions[b-wuvix5cpch] {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .header-content[b-wuvix5cpch] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-icon[b-wuvix5cpch] {
        width: 2.75rem;
        height: 2.75rem;
    }

    .header-icon svg[b-wuvix5cpch] {
        width: 1.5rem;
        height: 1.5rem;
    }

    .active-deals-grid[b-wuvix5cpch] {
        grid-template-columns: 1fr;
    }

    .modal-actions[b-wuvix5cpch] {
        flex-direction: column;
    }

    .modal-btn[b-wuvix5cpch] {
        width: 100%;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .deals-section[b-wuvix5cpch],
    .deal-types-section[b-wuvix5cpch],
    .platforms-section[b-wuvix5cpch],
    .platform-card[b-wuvix5cpch],
    .modal-backdrop[b-wuvix5cpch],
    .modal-content[b-wuvix5cpch] {
        animation: none;
    }

    .loading-spinner[b-wuvix5cpch],
    .btn-spinner[b-wuvix5cpch],
    .deal-glow[b-wuvix5cpch],
    .type-glow[b-wuvix5cpch] {
        animation: none;
    }

    .exclusive-indicator[b-wuvix5cpch] {
        animation: none;
        box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.3);
    }

    .platform-card:hover[b-wuvix5cpch],
    .sign-btn:hover[b-wuvix5cpch] {
        transform: none;
    }
}
/* /Components/Pages/Career/Music/Studio/Index.razor.rz.scp.css */
/* ============================================
   STUDIO RENTAL PAGE - Recording Studio UI
   Theme: Luxury VIP / Music Industry
   ============================================ */

/* ============================================
   PAGE LAYOUT & ATMOSPHERE
   ============================================ */

.studio-page[b-6e316ro74l] {
    position: relative;
    min-height: 100vh;
    padding: 0 1.5rem 4rem;
    max-width: 1200px;
    margin: 0 auto;
}

.page-atmosphere[b-6e316ro74l] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(34, 211, 238, 0.03) 0%, transparent 50%);
}

/* ============================================
   PAGE HEADER
   ============================================ */

.page-header[b-6e316ro74l] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 2rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--wl-gold-bg-hover);
}

.page-header[b-6e316ro74l]::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.header-content[b-6e316ro74l] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-icon[b-6e316ro74l] {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid var(--wl-gold-border);
    border-radius: 0.75rem;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.header-icon svg[b-6e316ro74l] {
    width: 1.5rem;
    height: 1.5rem;
}

.header-text h1[b-6e316ro74l] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.header-subtitle[b-6e316ro74l] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
    letter-spacing: 0.02em;
}

.balance-display[b-6e316ro74l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 0.5rem;
    color: #22C55E;
}

.balance-display svg[b-6e316ro74l] {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.8;
}

.balance-amount[b-6e316ro74l] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
}

.balance-currency[b-6e316ro74l] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/* ============================================
   LOADING STATE
   ============================================ */

.loading-container[b-6e316ro74l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    color: var(--wl-text-muted);
    gap: 1.5rem;
}

.loading-spinner[b-6e316ro74l] {
    width: 3rem;
    height: 3rem;
    border: 3px solid var(--wl-gold-bg);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-6e316ro74l 1s linear infinite;
}

@keyframes spin-b-6e316ro74l {
    to { transform: rotate(360deg); }
}

/* ============================================
   ACTIVE RENTAL SECTION
   ============================================ */

.active-rental[b-6e316ro74l] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    animation: card-enter-b-6e316ro74l 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes card-enter-b-6e316ro74l {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.rental-badge[b-6e316ro74l] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 0.25rem 0.25rem 0 0;
    margin-bottom: -1px;
}

.rental-badge svg[b-6e316ro74l] {
    width: 0.875rem;
    height: 0.875rem;
}

.rental-card[b-6e316ro74l] {
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-rgb), 0.95) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0 0.75rem 0.75rem 0.75rem;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.rental-card[b-6e316ro74l]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 50%);
    pointer-events: none;
}

.rental-header[b-6e316ro74l] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.rental-tier-icon[b-6e316ro74l] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.75rem;
    color: var(--wl-gold);
}

.rental-tier-icon svg[b-6e316ro74l] {
    width: 1.75rem;
    height: 1.75rem;
}

.rental-tier-icon.tier-4[b-6e316ro74l] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.25) 0%, var(--wl-gold-bg) 100%);
    box-shadow: 0 0 20px var(--wl-gold-border);
}

.rental-tier-name[b-6e316ro74l] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
}

.rental-tier-desc[b-6e316ro74l] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
}

.label-studio-access[b-6e316ro74l] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1.25rem;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.12) 0%, rgba(var(--wl-bg-secondary-rgb), 0.8) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 0.75rem;
    animation: card-enter-b-6e316ro74l 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.label-studio-icon[b-6e316ro74l] {
    width: 3rem;
    height: 3rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-radius: 0.75rem;
}

.label-studio-icon svg[b-6e316ro74l] {
    width: 1.5rem;
    height: 1.5rem;
}

.label-studio-access h2[b-6e316ro74l] {
    margin: 0;
    color: var(--wl-text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.label-studio-access p[b-6e316ro74l] {
    margin: 0.25rem 0 0;
    color: var(--wl-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.rental-stats[b-6e316ro74l] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rental-stat[b-6e316ro74l] {
    padding: 1rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-radius: 0.5rem;
}

.rental-stat .stat-label[b-6e316ro74l] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 0.5rem;
    display: block;
}

.quality-display[b-6e316ro74l] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quality-bar[b-6e316ro74l] {
    flex: 1;
    height: 0.5rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    border-radius: 9999px;
    overflow: hidden;
}

.quality-fill[b-6e316ro74l] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
    border-radius: 9999px;
    transition: width 0.5s ease;
}

.quality-value[b-6e316ro74l] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-gold);
}

.days-display[b-6e316ro74l] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
}

.days-value[b-6e316ro74l] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--wl-text-primary);
    line-height: 1;
}

.days-unit[b-6e316ro74l] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: lowercase;
}

.rental-progress[b-6e316ro74l] {
    margin-bottom: 1rem;
}

.progress-bar[b-6e316ro74l] {
    height: 4px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    border-radius: 9999px;
    overflow: hidden;
}

.progress-fill[b-6e316ro74l] {
    height: 100%;
    background: linear-gradient(90deg, #22C55E, #4ADE80);
    border-radius: 9999px;
    transition: width 0.5s ease;
}

.extend-button[b-6e316ro74l] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.2) 0%, rgba(var(--wl-purple-rgb), 0.1) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.3);
    border-radius: 0.375rem;
    color: var(--wl-purple);
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.extend-button:hover[b-6e316ro74l] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.3) 0%, rgba(var(--wl-purple-rgb), 0.15) 100%);
    border-color: rgba(var(--wl-purple-rgb), 0.5);
    transform: translateY(-2px);
}

.extend-button svg[b-6e316ro74l] {
    width: 1rem;
    height: 1rem;
}

.rental-management-grid[b-6e316ro74l] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.rental-action-button[b-6e316ro74l],
.rental-action-panel[b-6e316ro74l] {
    position: relative;
    display: flex;
    min-width: 0;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.45);
}

.rental-action-button[b-6e316ro74l] {
    align-items: center;
    gap: 0.8rem;
    padding: 0.9rem;
    color: var(--wl-text-primary);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.rental-action-button:hover:not(:disabled)[b-6e316ro74l] {
    transform: translateY(-1px);
    border-color: rgba(var(--wl-purple-rgb), 0.45);
    background: rgba(var(--wl-purple-rgb), 0.1);
}

.rental-action-button:disabled[b-6e316ro74l] {
    opacity: 0.55;
    cursor: not-allowed;
}

.rental-action-icon[b-6e316ro74l] {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--wl-purple-rgb), 0.28);
    border-radius: 0.45rem;
    color: var(--wl-purple);
    background: rgba(var(--wl-purple-rgb), 0.09);
}

.rental-action-icon svg[b-6e316ro74l] {
    width: 1.15rem;
    height: 1.15rem;
}

.rental-action-button strong[b-6e316ro74l],
.rental-action-copy strong[b-6e316ro74l] {
    display: block;
    color: var(--wl-text-primary);
    font-size: 0.82rem;
    line-height: 1.2;
}

.rental-action-button small[b-6e316ro74l],
.rental-action-copy small[b-6e316ro74l] {
    display: block;
    margin-top: 0.25rem;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

.rental-action-panel[b-6e316ro74l] {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem;
}

.rental-action-panel.danger[b-6e316ro74l] {
    border-color: rgba(var(--wl-red-rgb), 0.24);
}

.upgrade-options[b-6e316ro74l] {
    display: grid;
    gap: 0.45rem;
}

.upgrade-option[b-6e316ro74l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.35rem;
    padding: 0 0.75rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.4rem;
    color: var(--wl-text-primary);
    background: rgba(var(--wl-bg-primary-rgb), 0.34);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.upgrade-option:hover:not(:disabled)[b-6e316ro74l] {
    border-color: rgba(var(--wl-gold-rgb), 0.38);
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.upgrade-option:disabled[b-6e316ro74l] {
    opacity: 0.48;
    cursor: not-allowed;
}

.upgrade-option span[b-6e316ro74l] {
    min-width: 0;
    overflow: hidden;
    color: var(--wl-text-secondary);
    font-size: 0.75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upgrade-option strong[b-6e316ro74l] {
    color: #22C55E;
    font-size: 0.75rem;
    white-space: nowrap;
}

.upgrade-empty[b-6e316ro74l] {
    padding: 0.75rem;
    border: 1px dashed var(--wl-border-subtle);
    border-radius: 0.45rem;
    color: var(--wl-text-muted);
    font-size: 0.78rem;
}

.rental-action-link[b-6e316ro74l] {
    align-self: flex-start;
    min-height: 2.1rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(var(--wl-red-rgb), 0.28);
    border-radius: 0.35rem;
    color: #F87171;
    background: rgba(var(--wl-red-rgb), 0.08);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
}

.rental-action-link:disabled[b-6e316ro74l] {
    opacity: 0.55;
    cursor: not-allowed;
}

.cancel-rental-warning[b-6e316ro74l] {
    display: grid;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid rgba(var(--wl-red-rgb), 0.28);
    border-radius: 0.45rem;
    background: rgba(var(--wl-red-rgb), 0.08);
}

.cancel-rental-warning > span[b-6e316ro74l] {
    color: #FCA5A5;
    font-size: 0.78rem;
    line-height: 1.35;
}

.cancel-rental-warning div[b-6e316ro74l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.cancel-confirm[b-6e316ro74l],
.cancel-keep[b-6e316ro74l] {
    min-height: 2rem;
    padding: 0 0.7rem;
    border-radius: 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cancel-confirm[b-6e316ro74l] {
    border: 1px solid rgba(var(--wl-red-rgb), 0.36);
    color: #FEE2E2;
    background: rgba(var(--wl-red-rgb), 0.18);
}

.cancel-keep[b-6e316ro74l] {
    border: 1px solid var(--wl-border-subtle);
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

/* ============================================
   SECTION TITLES
   ============================================ */

.section-title[b-6e316ro74l] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin: 0 0 1.25rem 0;
}

.section-title svg[b-6e316ro74l] {
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.8;
}

/* ============================================
   TIER SELECTION
   ============================================ */

.tier-selection[b-6e316ro74l] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    animation: card-enter-b-6e316ro74l 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.tier-grid[b-6e316ro74l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.tier-card[b-6e316ro74l] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 1.25rem;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    animation: card-enter-b-6e316ro74l 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    overflow: hidden;
}

.tier-card[b-6e316ro74l]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 20%,
        rgba(var(--wl-gold-rgb), 0.8) 50%,
        rgba(var(--wl-gold-rgb), 0.4) 80%,
        transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tier-card:hover:not(.disabled)[b-6e316ro74l] {
    transform: translateY(-8px);
    border-color: var(--wl-gold-border);
    box-shadow:
        0 20px 60px var(--wl-shadow-color),
        0 0 40px rgba(var(--wl-gold-rgb), 0.08);
}

.tier-card:hover[b-6e316ro74l]::before {
    opacity: 1;
}

.tier-card.selected[b-6e316ro74l] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    background: linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.08) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    box-shadow:
        0 0 40px var(--wl-gold-bg-hover),
        inset 0 1px 0 var(--wl-gold-bg);
}

.tier-card.selected[b-6e316ro74l]::before {
    opacity: 1;
}

.tier-card.disabled[b-6e316ro74l] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.tier-glow[b-6e316ro74l] {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at center, var(--wl-gold-bg) 0%, transparent 70%);
    pointer-events: none;
    animation: glowPulse-b-6e316ro74l 2s ease-in-out infinite;
}

@keyframes glowPulse-b-6e316ro74l {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.tier-icon[b-6e316ro74l] {
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-contrast-rgb), 0.05) 0%, rgba(var(--wl-contrast-rgb), 0.02) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.tier-icon svg[b-6e316ro74l] {
    width: 1.75rem;
    height: 1.75rem;
}

.tier-card.selected .tier-icon[b-6e316ro74l],
.tier-card:hover .tier-icon[b-6e316ro74l] {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

/* Tier-specific icon styles */
.tier-card.tier-1 .tier-icon[b-6e316ro74l] { color: rgba(163, 163, 163, 0.7); }
.tier-card.tier-2 .tier-icon[b-6e316ro74l] { color: rgba(96, 165, 250, 0.7); }
.tier-card.tier-3 .tier-icon[b-6e316ro74l] { color: rgba(var(--wl-purple-rgb), 0.7); }
.tier-card.tier-4 .tier-icon[b-6e316ro74l] {
    color: var(--wl-gold);
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: 0 0 20px var(--wl-gold-bg-hover);
}

.tier-name[b-6e316ro74l] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.75rem 0;
    transition: color 0.3s ease;
}

.tier-card.selected .tier-name[b-6e316ro74l] {
    color: var(--wl-gold);
}

.tier-quality[b-6e316ro74l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    width: 100%;
}

.quality-label[b-6e316ro74l] {
    font-size: 0.625rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.quality-bar-small[b-6e316ro74l] {
    flex: 1;
    height: 4px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    border-radius: 9999px;
    overflow: hidden;
}

.quality-fill-small[b-6e316ro74l] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-purple), rgba(var(--wl-purple-rgb), 0.7));
    border-radius: 9999px;
    transition: width 0.5s ease;
}

.tier-card.tier-4 .quality-fill-small[b-6e316ro74l] {
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
}

.quality-percent[b-6e316ro74l] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    color: var(--wl-purple);
    flex-shrink: 0;
}

.tier-card.tier-4 .quality-percent[b-6e316ro74l] {
    color: var(--wl-gold);
}

.tier-cost[b-6e316ro74l] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.tier-cost .cost-value[b-6e316ro74l] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: #22C55E;
}

.tier-cost .cost-unit[b-6e316ro74l] {
    font-size: 0.6875rem;
    color: rgba(34, 197, 94, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tier-description[b-6e316ro74l] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin: 0;
    line-height: 1.5;
}

.selected-indicator[b-6e316ro74l] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border-radius: 50%;
    color: var(--wl-bg-primary);
    animation: checkPop-b-6e316ro74l 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes checkPop-b-6e316ro74l {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.selected-indicator svg[b-6e316ro74l] {
    width: 0.875rem;
    height: 0.875rem;
}

/* ============================================
   DURATION SELECTION
   ============================================ */

.duration-selection[b-6e316ro74l] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    animation: card-enter-b-6e316ro74l 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.duration-grid[b-6e316ro74l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.duration-btn[b-6e316ro74l] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    min-width: 5rem;
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: card-enter-b-6e316ro74l 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.duration-btn:hover[b-6e316ro74l] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px var(--wl-shadow-color);
}

.duration-btn.selected[b-6e316ro74l] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    background: linear-gradient(180deg, var(--wl-gold-bg) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    box-shadow: 0 0 25px var(--wl-gold-bg);
}

.duration-value[b-6e316ro74l] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--wl-text-primary);
    line-height: 1;
}

.duration-btn.selected .duration-value[b-6e316ro74l] {
    color: var(--wl-gold);
}

.duration-label[b-6e316ro74l] {
    font-size: 0.625rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.25rem;
}

.discount-badge[b-6e316ro74l] {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    color: var(--wl-text-primary);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: 9999px;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

/* ============================================
   COST SUMMARY
   ============================================ */

.cost-summary[b-6e316ro74l] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
    animation: card-enter-b-6e316ro74l 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.cost-card[b-6e316ro74l] {
    background: linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    padding: 1.5rem;
    position: relative;
}

.cost-card[b-6e316ro74l]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border-radius: 3px 0 0 3px;
}

.cost-breakdown[b-6e316ro74l] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.cost-row[b-6e316ro74l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cost-row .cost-label[b-6e316ro74l] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.cost-row .cost-value[b-6e316ro74l] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.02em;
}

.cost-row.discount .cost-value[b-6e316ro74l] {
    color: #22C55E;
}

.cost-row.total[b-6e316ro74l] {
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--wl-border-medium);
}

.cost-row.total .cost-label[b-6e316ro74l] {
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.cost-row.total .cost-value[b-6e316ro74l] {
    font-size: 1.5rem;
    color: var(--wl-gold);
}

.insufficient-funds[b-6e316ro74l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 0.5rem;
    color: #F87171;
    font-size: 0.875rem;
}

.insufficient-funds svg[b-6e316ro74l] {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* ============================================
   ACTION BAR
   ============================================ */

.action-bar[b-6e316ro74l] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    animation: card-enter-b-6e316ro74l 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.rent-button[b-6e316ro74l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 3rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.3);
}

.rent-button:not(:disabled):hover[b-6e316ro74l] {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(var(--wl-gold-rgb), 0.4);
    background: linear-gradient(135deg, var(--wl-gold-light) 0%, var(--wl-gold) 100%);
}

.rent-button:not(:disabled):active[b-6e316ro74l] {
    transform: translateY(-1px);
}

.rent-button:disabled[b-6e316ro74l] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.rent-button svg[b-6e316ro74l] {
    width: 1.25rem;
    height: 1.25rem;
}

.btn-spinner[b-6e316ro74l] {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-6e316ro74l 0.8s linear infinite;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .studio-page[b-6e316ro74l] {
        padding: 0 1rem 3rem;
    }

    .rental-management-grid[b-6e316ro74l] {
        grid-template-columns: 1fr;
    }

    .page-header[b-6e316ro74l] {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-text h1[b-6e316ro74l] {
        font-size: 1.75rem;
    }

    .balance-display[b-6e316ro74l] {
        width: 100%;
        justify-content: center;
    }

    .tier-grid[b-6e316ro74l] {
        grid-template-columns: 1fr;
    }

    .rental-stats[b-6e316ro74l] {
        grid-template-columns: 1fr;
    }

    .duration-grid[b-6e316ro74l] {
        justify-content: center;
    }

    .rent-button[b-6e316ro74l] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .header-content[b-6e316ro74l] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .header-icon[b-6e316ro74l] {
        width: 2.5rem;
        height: 2.5rem;
    }

    .header-icon svg[b-6e316ro74l] {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .tier-card[b-6e316ro74l],
    .duration-btn[b-6e316ro74l],
    .active-rental[b-6e316ro74l],
    .tier-selection[b-6e316ro74l],
    .duration-selection[b-6e316ro74l],
    .cost-summary[b-6e316ro74l],
    .action-bar[b-6e316ro74l] {
        animation: none;
    }

    .loading-spinner[b-6e316ro74l],
    .btn-spinner[b-6e316ro74l] {
        animation: none;
    }

    .tier-glow[b-6e316ro74l] {
        animation: none;
        opacity: 0.7;
    }

    .extend-modal[b-6e316ro74l] {
        animation: none;
    }

    .extend-backdrop[b-6e316ro74l] {
        animation: none;
    }
}

/* ============================================
   EXTEND RENTAL MODAL
   ============================================ */

.extend-backdrop[b-6e316ro74l] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    animation: extBackdropIn-b-6e316ro74l 0.2s ease-out;
}

@keyframes extBackdropIn-b-6e316ro74l {
    from { opacity: 0; }
    to { opacity: 1; }
}

.extend-modal[b-6e316ro74l] {
    position: relative;
    background: linear-gradient(145deg, var(--wl-bg-secondary) 0%, var(--wl-bg-primary) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 1.5rem;
    padding: 1.75rem;
    max-width: 420px;
    width: calc(100% - 2rem);
    box-shadow:
        0 25px 50px -12px var(--wl-shadow-color),
        0 0 0 1px rgba(var(--wl-contrast-rgb), 0.05),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.1);
    animation: extModalIn-b-6e316ro74l 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes extModalIn-b-6e316ro74l {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.extend-header[b-6e316ro74l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.extend-title[b-6e316ro74l] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.08em;
    color: var(--wl-text-primary);
    margin: 0;
}

.extend-close[b-6e316ro74l] {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    color: var(--wl-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.extend-close:hover:not(:disabled)[b-6e316ro74l] {
    background: rgba(var(--wl-contrast-rgb), 0.1);
    color: var(--wl-text-primary);
}

.extend-close:disabled[b-6e316ro74l] {
    opacity: 0.5;
    cursor: not-allowed;
}

.extend-current-info[b-6e316ro74l] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.extend-info-row[b-6e316ro74l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.extend-info-label[b-6e316ro74l] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
}

.extend-info-value[b-6e316ro74l] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.extend-duration-grid[b-6e316ro74l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.extend-duration-btn[b-6e316ro74l] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 1rem;
    min-width: 3.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
}

.extend-duration-btn:hover:not(:disabled)[b-6e316ro74l] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.extend-duration-btn.selected[b-6e316ro74l] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    background: linear-gradient(180deg, var(--wl-gold-bg) 0%, rgba(var(--wl-contrast-rgb), 0.04) 100%);
}

.extend-duration-btn:disabled[b-6e316ro74l] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ext-dur-value[b-6e316ro74l] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--wl-text-primary);
}

.extend-duration-btn.selected .ext-dur-value[b-6e316ro74l] {
    color: var(--wl-gold);
}

.ext-dur-label[b-6e316ro74l] {
    font-size: 0.5625rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.125rem;
}

.ext-dur-discount[b-6e316ro74l] {
    position: absolute;
    top: -0.375rem;
    right: -0.375rem;
    padding: 0.125rem 0.375rem;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    color: var(--wl-text-primary);
    font-size: 0.5625rem;
    font-weight: 700;
    border-radius: 9999px;
    box-shadow: 0 2px 6px rgba(34, 197, 94, 0.4);
}

.extend-cost-breakdown[b-6e316ro74l] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

.extend-cost-row[b-6e316ro74l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
    color: var(--wl-text-secondary);
}

.extend-cost-discount[b-6e316ro74l] {
    color: #22C55E;
}

.extend-cost-total[b-6e316ro74l] {
    padding-top: 0.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--wl-border-medium);
    font-weight: 600;
    color: var(--wl-gold);
    font-size: 1rem;
}

.extend-insufficient[b-6e316ro74l] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.625rem 0.875rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 0.5rem;
    color: #F87171;
    font-size: 0.8125rem;
}

.extend-confirm-btn[b-6e316ro74l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.3) 0%, rgba(var(--wl-purple-rgb), 0.15) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.4);
    border-radius: 0.5rem;
    color: var(--wl-purple);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.extend-confirm-btn:hover:not(:disabled)[b-6e316ro74l] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.4) 0%, rgba(var(--wl-purple-rgb), 0.25) 100%);
    border-color: rgba(var(--wl-purple-rgb), 0.6);
}

.extend-confirm-btn:disabled[b-6e316ro74l] {
    opacity: 0.5;
    cursor: not-allowed;
}
/* /Components/Pages/Career/Organizer/Bookings.razor.rz.scp.css */
/* All styling comes from the shared org-* atom system in Styles/app.css. */
/* /Components/Pages/Career/Organizer/CreateEvent.razor.rz.scp.css */
.org-create-main[b-wt80z04tt7] {
    display: grid;
    gap: 1.4rem;
    min-width: 0;
}

.org-type-picker[b-wt80z04tt7] {
    display: grid;
    gap: .65rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.org-type-picker > legend[b-wt80z04tt7] {
    margin-bottom: .55rem;
    color: var(--wl-text-secondary);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.org-type-grid[b-wt80z04tt7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem;
}

.org-type-card[b-wt80z04tt7] {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: .65rem;
    min-height: 8.5rem;
    padding: .85rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-contrast-rgb), .1);
    border-radius: 13px;
    background: rgba(var(--wl-contrast-rgb), .02);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.org-type-card:hover[b-wt80z04tt7] { transform: translateY(-1px); border-color: rgba(var(--org-accent-rgb),.38); }
.org-type-card--selected[b-wt80z04tt7] { border-color: rgba(var(--org-accent-rgb),.58); background: linear-gradient(145deg, rgba(var(--org-accent-rgb),.13), rgba(var(--org-hot-rgb),.035)); box-shadow: inset 0 0 0 1px rgba(var(--org-accent-rgb),.1); }
.org-type-card input[b-wt80z04tt7] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.org-type-card:has(input:focus-visible)[b-wt80z04tt7] { outline: 2px solid var(--org-accent); outline-offset: 2px; }
.org-type-icon[b-wt80z04tt7] { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 10px; color: var(--org-accent-2); background: rgba(var(--org-accent-rgb),.1); }
.org-type-icon .org-ic[b-wt80z04tt7] { width: 1.15rem; height: 1.15rem; }
.org-type-copy[b-wt80z04tt7] { display: grid; align-content: start; gap: .22rem; }
.org-type-copy strong[b-wt80z04tt7] { font-size: .88rem; }
.org-type-copy small[b-wt80z04tt7] { color: var(--wl-text-secondary); font-size: .72rem; line-height: 1.4; }
.org-type-visibility[b-wt80z04tt7] { grid-column: 1 / -1; align-self: end; width: fit-content; color: var(--wl-text-muted); font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.org-module-name[b-wt80z04tt7] {
    display: grid;
    gap: .12rem;
}

.org-module-effect[b-wt80z04tt7] {
    color: var(--wl-text-muted);
    font-size: .68rem;
    font-weight: 450;
    line-height: 1.35;
}

.org-validation-summary[b-wt80z04tt7] {
    color: #f87171;
    font-size: .82rem;
}

.org-summary-blocker[b-wt80z04tt7] {
    color: rgba(238,234,255,.58);
    font-size: .72rem;
    line-height: 1.4;
    text-align: center;
}

.org-summary-row--discount[b-wt80z04tt7],
.org-summary-row--discount strong[b-wt80z04tt7] {
    color: #6ee7b7;
}

.org-create-main[b-wt80z04tt7]  .org-field--wide,
.org-field--wide[b-wt80z04tt7] {
    grid-column: 1 / -1;
}

.org-city-picker[b-wt80z04tt7] {
    position: relative;
}

.org-city-dropdown[b-wt80z04tt7] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    margin-top: .3rem;
    display: grid;
    max-height: 16rem;
    overflow-y: auto;
    border-radius: 10px;
    border: 1px solid rgba(var(--org-accent-rgb), .35);
    background: var(--wl-bg-primary);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .4);
}

.org-city-option[b-wt80z04tt7] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    padding: .55rem .85rem;
    border: 0;
    background: transparent;
    color: var(--wl-text-primary);
    font-size: .9rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.org-city-option:hover[b-wt80z04tt7],
.org-city-option:focus-visible[b-wt80z04tt7],
.org-city-option--active[b-wt80z04tt7] {
    background: rgba(var(--org-accent-rgb), .12);
    outline: none;
}

.org-city-option--active[b-wt80z04tt7] {
    box-shadow: inset 3px 0 0 rgb(var(--org-accent-rgb));
}

.org-city-option--empty[b-wt80z04tt7] {
    color: var(--wl-text-muted);
    cursor: default;
}

.org-city-option-meta[b-wt80z04tt7] {
    font-size: .74rem;
    color: var(--wl-text-muted);
    white-space: nowrap;
}

.org-venue-meta[b-wt80z04tt7] {
    display: block;
    font-size: .74rem;
    font-weight: 400;
    color: var(--wl-text-muted);
}

[b-wt80z04tt7] .validation-message {
    color: #f87171;
    font-size: .72rem;
    font-weight: 600;
}

@media (max-width: 840px) {
    .org-type-grid[b-wt80z04tt7] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    .org-type-grid[b-wt80z04tt7] { grid-template-columns: 1fr; }
    .org-type-card[b-wt80z04tt7] { min-height: 7.4rem; }
}

@media (prefers-reduced-motion: reduce) {
    .org-type-card[b-wt80z04tt7] { transition: none; }
}
/* /Components/Pages/Career/Organizer/EventDetails.razor.rz.scp.css */
.org-details-head[b-hnrcu16y1l] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
}

.org-details-title[b-hnrcu16y1l] {
    display: grid;
    gap: .45rem;
    min-width: 0;
}

.org-details-meta[b-hnrcu16y1l] {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    font-size: .84rem;
    color: var(--wl-text-secondary);
}

.org-details-meta span[b-hnrcu16y1l] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.org-details-meta .org-ic[b-hnrcu16y1l] {
    width: .95rem;
    height: .95rem;
    color: var(--org-accent);
}

.org-details-actions[b-hnrcu16y1l] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .6rem;
}

.org-details-series[b-hnrcu16y1l] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    width: fit-content;
    padding: .3rem .58rem;
    border: 1px solid rgba(var(--org-accent-rgb),.2);
    border-radius: 999px;
    color: var(--org-accent-2);
    font-size: .72rem;
    font-weight: 750;
    text-decoration: none;
    background: rgba(var(--org-accent-rgb),.07);
}

.org-readiness[b-hnrcu16y1l] {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem,2.5vw,1.4rem);
    border: 1px solid rgba(var(--org-accent-rgb),.25);
    border-radius: 17px;
    background: radial-gradient(75% 130% at 0 0, rgba(var(--org-accent-rgb),.1), transparent 65%), rgba(var(--wl-contrast-rgb),.02);
}

.org-readiness-head[b-hnrcu16y1l] { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.org-readiness-head h2[b-hnrcu16y1l] { margin: .25rem 0 0; font: 400 clamp(1.65rem,3vw,2.2rem)/1 var(--font-display,sans-serif); letter-spacing: .05em; }
.org-readiness-score[b-hnrcu16y1l] { display: grid; justify-items: end; gap: .1rem; }
.org-readiness-score strong[b-hnrcu16y1l] { color: var(--org-accent-2); font: 400 2rem/1 var(--font-display,sans-serif); }
.org-readiness-score span[b-hnrcu16y1l] { color: var(--wl-text-muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }

.org-event-timeline[b-hnrcu16y1l] { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin: 0; padding: 0; list-style: none; }
.org-event-timeline li[b-hnrcu16y1l] { position: relative; display: grid; justify-items: center; gap: .4rem; color: var(--wl-text-muted); font-size: .67rem; text-align: center; }
.org-event-timeline li[b-hnrcu16y1l]::before { content: ''; position: absolute; z-index: 0; top: 1rem; left: -50%; width: 100%; height: 2px; background: rgba(var(--wl-contrast-rgb),.1); }
.org-event-timeline li:first-child[b-hnrcu16y1l]::before { display: none; }
.org-event-timeline li > span[b-hnrcu16y1l] { z-index: 1; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid rgba(var(--wl-contrast-rgb),.16); border-radius: 50%; background: var(--wl-bg-primary); }
.org-event-timeline .org-event-phase--done[b-hnrcu16y1l], .org-event-timeline .org-event-phase--current[b-hnrcu16y1l] { color: var(--wl-text-primary); }
.org-event-timeline .org-event-phase--done[b-hnrcu16y1l]::before, .org-event-timeline .org-event-phase--current[b-hnrcu16y1l]::before { background: rgba(var(--org-accent-rgb),.55); }
.org-event-timeline .org-event-phase--done > span[b-hnrcu16y1l] { border-color: rgba(52,211,153,.45); color: #34d399; }
.org-event-timeline .org-event-phase--current > span[b-hnrcu16y1l] { border-color: var(--org-accent); color: #fff; background: var(--org-accent); box-shadow: 0 0 0 .3rem rgba(var(--org-accent-rgb),.12); }

.org-readiness-grid[b-hnrcu16y1l] { display: grid; grid-template-columns: repeat(auto-fit,minmax(12rem,1fr)); gap: .55rem; }
.org-readiness-check[b-hnrcu16y1l] { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .65rem; min-height: 4rem; padding: .65rem .75rem; border: 1px solid rgba(var(--wl-contrast-rgb),.09); border-radius: 11px; background: rgba(var(--wl-contrast-rgb),.02); }
.org-readiness-check-icon[b-hnrcu16y1l] { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; color: var(--wl-text-muted); background: rgba(var(--wl-contrast-rgb),.05); }
.org-readiness-check > div[b-hnrcu16y1l] { display: grid; gap: .12rem; }
.org-readiness-check strong[b-hnrcu16y1l] { font-size: .8rem; }
.org-readiness-check > div span[b-hnrcu16y1l] { color: var(--wl-text-muted); font-size: .68rem; }
.org-readiness-check--ready[b-hnrcu16y1l] { border-color: rgba(52,211,153,.2); }
.org-readiness-check--ready .org-readiness-check-icon[b-hnrcu16y1l] { color: #34d399; background: rgba(52,211,153,.1); }
.org-readiness-check--attention[b-hnrcu16y1l] { border-color: rgba(var(--org-hot-rgb),.28); }
.org-readiness-check--attention .org-readiness-check-icon[b-hnrcu16y1l] { color: var(--org-hot); background: rgba(var(--org-hot-rgb),.08); }
.org-readiness-check--optional[b-hnrcu16y1l] { border-style: dashed; }

.org-report-explain[b-hnrcu16y1l] { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.org-report-breakdown[b-hnrcu16y1l] { display: grid; align-content: start; gap: .6rem; padding: 1rem; border: 1px solid rgba(var(--wl-contrast-rgb),.09); border-radius: 12px; background: rgba(var(--wl-contrast-rgb),.02); }
.org-report-breakdown > header[b-hnrcu16y1l] { display: flex; align-items: center; gap: .45rem; }
.org-report-breakdown > header .org-ic[b-hnrcu16y1l] { color: var(--org-accent); }
.org-report-breakdown h3[b-hnrcu16y1l] { margin: 0; font: 400 1.2rem/1 var(--font-display,sans-serif); letter-spacing: .04em; }
.org-report-breakdown > p[b-hnrcu16y1l] { margin: 0; color: var(--wl-text-secondary); font-size: .72rem; line-height: 1.45; }
.org-report-breakdown--score[b-hnrcu16y1l] { grid-column: 1 / -1; }
.org-report-bar-row[b-hnrcu16y1l] { display: grid; grid-template-columns: minmax(5rem,.8fr) minmax(5rem,1fr) auto; align-items: center; gap: .5rem; font-size: .7rem; }
.org-report-bar[b-hnrcu16y1l] { height: .38rem; overflow: hidden; border-radius: 999px; background: rgba(var(--wl-contrast-rgb),.08); }
.org-report-bar span[b-hnrcu16y1l] { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--org-accent),var(--org-hot)); }
.org-report-ledger[b-hnrcu16y1l] { display: grid; gap: .35rem; }
.org-report-ledger > span[b-hnrcu16y1l] { display: flex; justify-content: space-between; gap: .8rem; color: var(--wl-text-secondary); font-size: .75rem; }
.org-report-ledger strong[b-hnrcu16y1l] { color: var(--wl-text-primary); font-variant-numeric: tabular-nums; }
.org-report-ledger-total[b-hnrcu16y1l] { margin-top: .2rem; padding-top: .5rem; border-top: 1px solid rgba(var(--wl-contrast-rgb),.1); font-weight: 800; }
.org-report-drivers[b-hnrcu16y1l] { display: flex; flex-wrap: wrap; gap: .4rem; }
.org-report-drivers > span[b-hnrcu16y1l] { display: inline-flex; gap: .5rem; padding: .38rem .55rem; border: 1px solid rgba(var(--wl-contrast-rgb),.1); border-radius: 999px; color: var(--wl-text-secondary); font-size: .7rem; }
.org-report-drivers .org-report-driver--good[b-hnrcu16y1l] { color: #34d399; border-color: rgba(52,211,153,.25); }
.org-report-drivers .org-report-driver--bad[b-hnrcu16y1l] { color: #f87171; border-color: rgba(248,113,113,.25); }
.org-report-score-final[b-hnrcu16y1l] { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-top: .65rem; border-top: 1px solid rgba(var(--wl-contrast-rgb),.1); font-weight: 800; }
.org-report-score-final strong[b-hnrcu16y1l] { color: var(--org-accent-2); font: 400 2rem/1 var(--font-display,sans-serif); }

.org-offer-form[b-hnrcu16y1l],
.org-sponsor-form[b-hnrcu16y1l] {
    gap: .8rem;
    align-items: end;
}

.org-offer-form[b-hnrcu16y1l] {
    display: grid;
    grid-template-columns: minmax(16rem, 1.35fr) minmax(8rem, 0.65fr) auto;
    align-items: end;
}

.org-offer-form .org-field[b-hnrcu16y1l] {
    min-width: 0;
}

.org-offer-form .org-field input[b-hnrcu16y1l],
.org-offer-form .org-btn[b-hnrcu16y1l] {
    height: 2.7rem;
    min-height: 2.7rem;
}

.org-offer-form .org-btn[b-hnrcu16y1l] {
    white-space: nowrap;
}

.org-offer-form[b-hnrcu16y1l]  .searchable-dropdown button {
    height: 2.7rem;
    min-height: 2.7rem;
    border-radius: 9px;
}

.org-sponsor-form .org-field[b-hnrcu16y1l] {
    min-width: 11rem;
    flex: 1 1 11rem;
}

.org-sponsor-form[b-hnrcu16y1l] {
    display: flex;
    flex-wrap: wrap;
}

.org-slot-performance[b-hnrcu16y1l] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: .32rem;
    font-family: var(--font-body, sans-serif);
    font-size: .68rem;
    letter-spacing: .02em;
    text-transform: none;
}

.org-slot-performance strong[b-hnrcu16y1l] {
    padding-left: .45rem;
    border-left: 1px solid currentColor;
    font-variant-numeric: tabular-nums;
    opacity: .9;
}

.org-finish-warning[b-hnrcu16y1l] {
    display: grid;
    gap: 1rem;
    color: var(--wl-text-secondary);
}

.org-finish-warning > p[b-hnrcu16y1l] {
    margin: 0;
}

.org-finish-warning-list[b-hnrcu16y1l] {
    display: grid;
    gap: .55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.org-finish-warning-list li[b-hnrcu16y1l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
    padding: .75rem .85rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), .1);
    border-radius: 9px;
    background: rgba(var(--wl-contrast-rgb), .025);
}

.org-finish-warning-list li > span:first-child[b-hnrcu16y1l] {
    display: grid;
    gap: .16rem;
    min-width: 0;
}

.org-finish-warning-list strong[b-hnrcu16y1l] {
    overflow: hidden;
    color: var(--wl-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-finish-warning-list small[b-hnrcu16y1l] {
    color: var(--wl-text-muted);
    font-size: .75rem;
}

.org-finish-warning-list .org-chip[b-hnrcu16y1l] {
    flex: 0 0 auto;
}

.org-finish-warning-consequence[b-hnrcu16y1l] {
    padding: .78rem .9rem;
    border: 1px solid rgba(248, 113, 113, .32);
    border-radius: 9px;
    background: rgba(248, 113, 113, .08);
    color: var(--wl-text-primary);
    font-size: .86rem;
}

.org-finish-warning-actions[b-hnrcu16y1l] {
    display: flex;
    justify-content: flex-end;
    gap: .65rem;
    width: 100%;
}

.org-finish-warning-confirm[b-hnrcu16y1l] {
    border-color: rgba(248, 113, 113, .55);
    background: linear-gradient(135deg, #dc2626, #f43f5e);
    color: #fff;
    box-shadow: 0 6px 20px rgba(220, 38, 38, .24);
}

.org-finish-warning-confirm:hover[b-hnrcu16y1l] {
    transform: translateY(-1px);
    box-shadow: 0 9px 24px rgba(220, 38, 38, .34);
}

@media (max-width: 900px) {
    .org-details-head[b-hnrcu16y1l] {
        grid-template-columns: 1fr;
    }

    .org-details-actions[b-hnrcu16y1l] {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .org-offer-form[b-hnrcu16y1l] {
        grid-template-columns: 1fr;
    }

    .org-finish-warning-list li[b-hnrcu16y1l] {
        align-items: flex-start;
        flex-direction: column;
    }

    .org-finish-warning-actions[b-hnrcu16y1l] {
        flex-wrap: wrap;
    }

    .org-finish-warning-actions .org-btn[b-hnrcu16y1l] {
        flex: 1 1 10rem;
    }

    .org-report-explain[b-hnrcu16y1l] { grid-template-columns: 1fr; }
    .org-report-breakdown--score[b-hnrcu16y1l] { grid-column: 1; }
}

@media (max-width: 560px) {
    .org-readiness-head[b-hnrcu16y1l] { align-items: start; }
    .org-event-timeline[b-hnrcu16y1l] { overflow-x: auto; grid-template-columns: repeat(5,5.5rem); padding-bottom: .4rem; }
    .org-report-bar-row[b-hnrcu16y1l] { grid-template-columns: 1fr auto; }
    .org-report-bar[b-hnrcu16y1l] { grid-column: 1 / -1; grid-row: 2; }
}

.org-incidents[b-hnrcu16y1l] {
    display: grid;
    gap: .7rem;
}

.org-incident[b-hnrcu16y1l] {
    display: grid;
    gap: .4rem;
    padding: .9rem 1.05rem;
    border-radius: 10px;
    border: 1px solid rgba(var(--wl-contrast-rgb), .1);
    background: rgba(var(--wl-contrast-rgb), .02);
}

.org-incident--open[b-hnrcu16y1l] {
    border-color: rgba(var(--org-hot-rgb), .45);
    background: rgba(var(--org-hot-rgb), .06);
}

.org-incident-head[b-hnrcu16y1l] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
}

.org-incident-title[b-hnrcu16y1l] {
    font-weight: 700;
    font-size: .96rem;
}

.org-incident-desc[b-hnrcu16y1l] {
    margin: 0;
    font-size: .88rem;
    color: var(--wl-text-secondary);
}

.org-incident-crew[b-hnrcu16y1l] {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    color: var(--wl-text-muted);
}

.org-incident-crew .org-ic[b-hnrcu16y1l] {
    width: .9rem;
    height: .9rem;
    color: var(--org-accent);
}

.org-incident-actions[b-hnrcu16y1l] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .25rem;
}

.org-incident-response[b-hnrcu16y1l] {
    font-size: .85rem;
    font-weight: 600;
    color: var(--org-accent-2);
}
/* /Components/Pages/Career/Organizer/Index.razor.rz.scp.css */
.org-hero-actions[b-nwhndehj3a] {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    align-items: center;
}

.org-onboard-form[b-nwhndehj3a] {
    display: grid;
    gap: .55rem;
    max-width: 26rem;
    justify-items: start;
}

.org-onboard-form[b-nwhndehj3a]  .org-field,
.org-onboard-form .org-field[b-nwhndehj3a] {
    width: 100%;
    color: rgba(238, 234, 255, .65);
}

.org-crew-form[b-nwhndehj3a] {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: end;
}

.org-crew-form .org-field[b-nwhndehj3a] {
    min-width: 16rem;
}

.org-command[b-nwhndehj3a] {
    display: grid;
    gap: 1rem;
    padding: clamp(1rem, 2.5vw, 1.45rem);
    border: 1px solid rgba(var(--org-accent-rgb), .24);
    border-radius: 18px;
    background:
        radial-gradient(70% 120% at 0 0, rgba(var(--org-accent-rgb),.11), transparent 60%),
        rgba(var(--wl-contrast-rgb),.02);
}

.org-command-head[b-nwhndehj3a] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.org-command-head h2[b-nwhndehj3a] { margin: .25rem 0 0; font: 400 clamp(1.7rem, 3vw, 2.4rem)/1 var(--font-display, sans-serif); letter-spacing: .05em; }
.org-command-head p[b-nwhndehj3a] { max-width: 34rem; margin: 0; color: var(--wl-text-secondary); font-size: .82rem; line-height: 1.5; text-align: right; }
.org-command-list[b-nwhndehj3a] { display: grid; gap: .65rem; }

.org-command-card[b-nwhndehj3a] {
    display: grid;
    grid-template-columns: 6.3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 8.5rem;
    padding: .85rem 1rem .85rem 0;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-contrast-rgb),.1);
    border-radius: 14px;
    background: rgba(var(--wl-contrast-rgb),.025);
}

.org-command-card--live[b-nwhndehj3a] { border-color: rgba(var(--org-hot-rgb),.42); background: linear-gradient(120deg, rgba(var(--org-hot-rgb),.08), rgba(var(--wl-contrast-rgb),.02)); }
.org-command-date[b-nwhndehj3a] { align-self: stretch; display: grid; place-items: center; align-content: center; gap: .2rem; padding: .75rem; color: #fff; text-align: center; background: linear-gradient(160deg, #1a122a, #0d0917); }
.org-command-date strong[b-nwhndehj3a] { color: #c4b5fd; font: 400 1.25rem/1.05 var(--font-display, sans-serif); letter-spacing: .04em; }
.org-command-date span[b-nwhndehj3a] { color: rgba(255,255,255,.48); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.org-command-main[b-nwhndehj3a] { display: grid; gap: .8rem; min-width: 0; }
.org-command-titleline[b-nwhndehj3a] { display: flex; align-items: start; justify-content: space-between; gap: .8rem; }
.org-command-titleline > div[b-nwhndehj3a] { min-width: 0; }
.org-command-titleline > div > span[b-nwhndehj3a] { color: var(--org-accent-2); font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.org-command-titleline h3[b-nwhndehj3a] { margin: .15rem 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 1.4rem/1.1 var(--font-display, sans-serif); letter-spacing: .04em; }
.org-command-readiness[b-nwhndehj3a] { display: grid; gap: .35rem; }
.org-command-meterline[b-nwhndehj3a] { display: flex; justify-content: space-between; gap: 1rem; color: var(--wl-text-muted); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.org-command-meterline strong[b-nwhndehj3a] { color: var(--wl-text-primary); }
.org-command-facts[b-nwhndehj3a] { display: flex; flex-wrap: wrap; gap: .35rem 1rem; color: var(--wl-text-secondary); font-size: .72rem; }
.org-command-facts span[b-nwhndehj3a] { display: inline-flex; align-items: center; gap: .28rem; }
.org-command-facts .org-ic[b-nwhndehj3a] { width: .78rem; height: .78rem; color: var(--org-accent); }
.org-command-facts .org-command-attention[b-nwhndehj3a] { color: var(--org-hot); font-weight: 750; }
.org-command-card > .org-btn[b-nwhndehj3a] { margin-right: .2rem; }

.org-command-empty[b-nwhndehj3a] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem; border: 1px dashed rgba(var(--wl-contrast-rgb),.16); border-radius: 13px; }
.org-command-empty > div[b-nwhndehj3a] { display: grid; gap: .15rem; }
.org-command-empty > div span[b-nwhndehj3a] { color: var(--wl-text-secondary); font-size: .8rem; }
.org-command-orbit[b-nwhndehj3a] { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; color: var(--org-accent); background: rgba(var(--org-accent-rgb),.1); }

.org-brand-studio[b-nwhndehj3a] { border-color: rgba(var(--org-accent-rgb),.22); }
.org-brand-studio-grid[b-nwhndehj3a] { display: grid; grid-template-columns: minmax(16rem, .75fr) minmax(22rem, 1.25fr); gap: 1.25rem; }
.org-brand-description-form[b-nwhndehj3a] { display: grid; align-content: start; gap: .65rem; padding-right: 1.25rem; border-right: 1px solid rgba(var(--wl-contrast-rgb),.09); }
.org-brand-description-form .org-btn[b-nwhndehj3a] { justify-self: start; }
.org-brand-feedback[b-nwhndehj3a] { display: inline-flex; align-items: center; min-height: 2rem; color: #34d399; font-size: .78rem; font-weight: 700; }
.org-series-studio[b-nwhndehj3a] { display: grid; gap: .8rem; }
.org-series-studio h3[b-nwhndehj3a] { margin: 0; font: 400 1.3rem/1 var(--font-display, sans-serif); letter-spacing: .04em; }
.org-series-studio p[b-nwhndehj3a] { margin: .25rem 0 0; color: var(--wl-text-secondary); font-size: .78rem; }
.org-series-create[b-nwhndehj3a] { display: grid; grid-template-columns: 1fr 1.35fr auto; align-items: end; gap: .55rem; }
.org-series-list[b-nwhndehj3a] { display: grid; gap: .45rem; }
.org-series-row[b-nwhndehj3a] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .7rem .8rem; border: 1px solid rgba(var(--wl-contrast-rgb),.08); border-radius: 10px; background: rgba(var(--wl-contrast-rgb),.02); }
.org-series-row > div[b-nwhndehj3a] { display: grid; gap: .12rem; min-width: 0; }
.org-series-row strong[b-nwhndehj3a] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.org-series-row > div span[b-nwhndehj3a] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wl-text-muted); font-size: .7rem; }
.org-series-row--archived[b-nwhndehj3a] { opacity: .58; }

@media (max-width: 900px) {
    .org-command-head[b-nwhndehj3a] { align-items: start; flex-direction: column; }
    .org-command-head p[b-nwhndehj3a] { text-align: left; }
    .org-command-card[b-nwhndehj3a] { grid-template-columns: 5rem minmax(0, 1fr); padding-right: .8rem; }
    .org-command-card > .org-btn[b-nwhndehj3a] { grid-column: 2; justify-self: start; margin: 0; }
    .org-brand-studio-grid[b-nwhndehj3a] { grid-template-columns: 1fr; }
    .org-brand-description-form[b-nwhndehj3a] { padding: 0 0 1rem; border-right: 0; border-bottom: 1px solid rgba(var(--wl-contrast-rgb),.09); }
    .org-series-create[b-nwhndehj3a] { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .org-command-card[b-nwhndehj3a] { grid-template-columns: 1fr; padding: 0 0 .85rem; }
    .org-command-date[b-nwhndehj3a] { min-height: 4rem; }
    .org-command-main[b-nwhndehj3a], .org-command-card > .org-btn[b-nwhndehj3a] { grid-column: 1; margin-inline: .8rem; }
    .org-command-card > .org-btn[b-nwhndehj3a] { justify-self: stretch; min-height: 2.75rem; }
    .org-command-titleline[b-nwhndehj3a] { flex-direction: column; }
    .org-command-empty[b-nwhndehj3a] { grid-template-columns: 1fr; }
    .org-command-empty .org-btn[b-nwhndehj3a] { min-height: 2.75rem; }
}
/* /Components/Pages/Career/Promotion/ActionSelectionModal.razor.rz.scp.css */
/* Backdrop */
.action-modal-backdrop[b-ikfbwyqwxg] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(8px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px 20px;
    animation: backdropFadeIn-b-ikfbwyqwxg 0.2s ease-out;
    overflow-y: auto;
}

@keyframes backdropFadeIn-b-ikfbwyqwxg {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal */
.action-modal[b-ikfbwyqwxg] {
    position: relative;
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 100px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%);
    border: 1px solid var(--wl-gold-border);
    animation: modalSlideUp-b-ikfbwyqwxg 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-shadow:
        0 0 0 1px var(--wl-shadow-color),
        0 25px 80px var(--wl-shadow-color),
        0 0 100px rgba(var(--wl-gold-rgb), 0.05);
}

@keyframes modalSlideUp-b-ikfbwyqwxg {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Corner decorations */
.modal-corner[b-ikfbwyqwxg] {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    border-style: solid;
    pointer-events: none;
    z-index: 2;
}

.modal-corner-tl[b-ikfbwyqwxg] {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}

.modal-corner-tr[b-ikfbwyqwxg] {
    top: -1px;
    right: -1px;
    border-width: 2px 2px 0 0;
}

.modal-corner-bl[b-ikfbwyqwxg] {
    bottom: -1px;
    left: -1px;
    border-width: 0 0 2px 2px;
}

.modal-corner-br[b-ikfbwyqwxg] {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
}

/* Edge accents */
.modal-edge[b-ikfbwyqwxg] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 20%,
        rgba(var(--wl-gold-rgb), 0.6) 50%,
        rgba(var(--wl-gold-rgb), 0.4) 80%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 2;
}

.modal-edge-top[b-ikfbwyqwxg] { top: 0; }
.modal-edge-bottom[b-ikfbwyqwxg] { bottom: 0; }

/* Close button */
.modal-close[b-ikfbwyqwxg] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    padding: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    color: rgba(163, 163, 163, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.modal-close:hover:not(:disabled)[b-ikfbwyqwxg] {
    background: var(--wl-gold-bg);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.modal-close:disabled[b-ikfbwyqwxg] {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal-close[b-ikfbwyqwxg]  svg {
    width: 100%;
    height: 100%;
}

/* Header */
.modal-header[b-ikfbwyqwxg] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 24px 16px;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    flex-shrink: 0;
}

/* Scrollable content area */
.modal-content[b-ikfbwyqwxg] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.action-icon-wrapper[b-ikfbwyqwxg] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
    transition: all 0.3s;
}

.action-icon-wrapper[b-ikfbwyqwxg]  svg {
    width: 28px;
    height: 28px;
}

.action-icon-wrapper.organic[b-ikfbwyqwxg] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.05) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #22C55E;
}

.action-icon-wrapper.paid[b-ikfbwyqwxg] {
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.action-icon-wrapper.influencer[b-ikfbwyqwxg] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.2) 0%, rgba(var(--wl-purple-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.3);
    color: var(--wl-purple);
}

.action-icon-wrapper.events[b-ikfbwyqwxg] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3B82F6;
}

.action-icon-wrapper.controversial[b-ikfbwyqwxg] {
    background: linear-gradient(135deg, rgba(var(--wl-red-rgb), 0.2) 0%, rgba(var(--wl-red-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
    color: #EF4444;
}

.header-text[b-ikfbwyqwxg] {
    flex: 1;
    min-width: 0;
}

.modal-title[b-ikfbwyqwxg] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.2;
}

.action-category[b-ikfbwyqwxg] {
    font-size: 12px;
    color: rgba(163, 163, 163, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Description */
.action-description[b-ikfbwyqwxg] {
    padding: 16px 24px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(200, 200, 200, 0.85);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

/* Target Song */
.target-song[b-ikfbwyqwxg] {
    padding: 12px 24px;
    background: rgba(var(--wl-gold-rgb), 0.03);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.target-label[b-ikfbwyqwxg] {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(163, 163, 163, 0.6);
    margin-bottom: 8px;
}

.target-info[b-ikfbwyqwxg] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.target-icon[b-ikfbwyqwxg] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid var(--wl-gold-border);
    border-radius: 8px;
    color: var(--wl-gold);
}

.target-icon[b-ikfbwyqwxg]  svg {
    width: 18px;
    height: 18px;
}

.target-details[b-ikfbwyqwxg] {
    flex: 1;
    min-width: 0;
}

.target-title[b-ikfbwyqwxg] {
    display: block;
    font-weight: 600;
    color: var(--wl-text-primary);
    font-size: 14px;
}

.target-quality[b-ikfbwyqwxg] {
    font-size: 12px;
    color: rgba(163, 163, 163, 0.7);
}

/* Section labels */
.section-label[b-ikfbwyqwxg] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-gold-rgb), 0.8);
    margin-bottom: 12px;
}

.section-decoration[b-ikfbwyqwxg] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.3), transparent);
}

/* Costs Section */
.costs-section[b-ikfbwyqwxg] {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.costs-grid[b-ikfbwyqwxg] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.cost-item[b-ikfbwyqwxg] {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 10px;
    transition: all 0.2s;
}

.cost-item.insufficient[b-ikfbwyqwxg] {
    border-color: rgba(var(--wl-red-rgb), 0.3);
    background: rgba(var(--wl-red-rgb), 0.05);
}

.cost-icon[b-ikfbwyqwxg] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.cost-icon[b-ikfbwyqwxg]  svg {
    width: 18px;
    height: 18px;
}

.cost-icon.energy[b-ikfbwyqwxg] {
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.2) 0%, rgba(250, 204, 21, 0.05) 100%);
    color: #FACC15;
}

.cost-icon.influence[b-ikfbwyqwxg] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.2) 0%, rgba(var(--wl-purple-rgb), 0.05) 100%);
    color: var(--wl-purple);
}

.cost-icon.credits[b-ikfbwyqwxg] {
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    color: var(--wl-gold);
}

.cost-info[b-ikfbwyqwxg] {
    flex: 1;
    min-width: 0;
}

.cost-value[b-ikfbwyqwxg] {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    color: var(--wl-text-primary);
    letter-spacing: 0.02em;
    line-height: 1;
}

.cost-label[b-ikfbwyqwxg] {
    font-size: 11px;
    color: rgba(163, 163, 163, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cost-status[b-ikfbwyqwxg] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.cost-status[b-ikfbwyqwxg]  svg {
    width: 100%;
    height: 100%;
}

.cost-item:not(.insufficient) .cost-status[b-ikfbwyqwxg] {
    color: #22C55E;
}

.cost-item.insufficient .cost-status[b-ikfbwyqwxg] {
    color: #EF4444;
}

/* Payment Section */
.payment-section[b-ikfbwyqwxg] {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.payment-options[b-ikfbwyqwxg] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-option[b-ikfbwyqwxg] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
}

.payment-option:hover[b-ikfbwyqwxg] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
}

.payment-option.selected[b-ikfbwyqwxg] {
    background: rgba(var(--wl-gold-rgb), 0.08);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.payment-icon[b-ikfbwyqwxg] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.payment-icon[b-ikfbwyqwxg]  svg {
    width: 20px;
    height: 20px;
}

.payment-icon.budget[b-ikfbwyqwxg] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.05) 100%);
    color: #3B82F6;
}

.payment-icon.credits[b-ikfbwyqwxg] {
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    color: var(--wl-gold);
}

.payment-info[b-ikfbwyqwxg] {
    flex: 1;
    min-width: 0;
}

.payment-name[b-ikfbwyqwxg] {
    display: block;
    font-weight: 600;
    color: var(--wl-text-primary);
    font-size: 14px;
}

.payment-balance[b-ikfbwyqwxg] {
    font-size: 12px;
    color: rgba(163, 163, 163, 0.7);
}

.payment-selected[b-ikfbwyqwxg] {
    width: 20px;
    height: 20px;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.payment-selected[b-ikfbwyqwxg]  svg {
    width: 100%;
    height: 100%;
}

/* Thresholds Section */
.thresholds-section[b-ikfbwyqwxg] {
    padding: 16px 24px;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

/* Modifiers */
.modifiers-list[b-ikfbwyqwxg] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.modifier-item[b-ikfbwyqwxg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: help;
    transition: all 0.2s;
}

.modifier-item.positive[b-ikfbwyqwxg] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    color: #22C55E;
}

.modifier-item.negative[b-ikfbwyqwxg] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    color: #EF4444;
}

.modifier-item:hover[b-ikfbwyqwxg] {
    transform: translateY(-1px);
}

.modifier-arrow[b-ikfbwyqwxg] {
    font-weight: 700;
}

.modifier-value[b-ikfbwyqwxg] {
    font-weight: 600;
}

.modifier-name[b-ikfbwyqwxg] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

/* Chance Meters */
.chance-meters[b-ikfbwyqwxg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chance-meter[b-ikfbwyqwxg] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.meter-header[b-ikfbwyqwxg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.meter-label[b-ikfbwyqwxg] {
    font-size: 12px;
    font-weight: 500;
    color: rgba(200, 200, 200, 0.9);
}

.meter-value[b-ikfbwyqwxg] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 0.02em;
}

.chance-meter.success .meter-value[b-ikfbwyqwxg] {
    color: #22C55E;
}

.chance-meter.viral .meter-value[b-ikfbwyqwxg] {
    color: #F59E0B;
}

.chance-meter.neutral .meter-value[b-ikfbwyqwxg] {
    color: #94A3B8;
}

.chance-meter.flop .meter-value[b-ikfbwyqwxg] {
    color: #EF4444;
}

.meter-bar[b-ikfbwyqwxg] {
    height: 6px;
    background: var(--wl-border-subtle);
    border-radius: 3px;
    overflow: hidden;
}

.meter-fill[b-ikfbwyqwxg] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease-out;
}

.chance-meter.success .meter-fill[b-ikfbwyqwxg] {
    background: linear-gradient(90deg, #22C55E, #4ADE80);
}

.chance-meter.viral .meter-fill[b-ikfbwyqwxg] {
    background: linear-gradient(90deg, #F59E0B, #FBBF24);
}

.chance-meter.neutral .meter-fill[b-ikfbwyqwxg] {
    background: linear-gradient(90deg, #64748B, #94A3B8);
}

.chance-meter.flop .meter-fill[b-ikfbwyqwxg] {
    background: linear-gradient(90deg, #EF4444, #F87171);
}

/* Risk Warning */
.risk-warning[b-ikfbwyqwxg] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(var(--wl-red-rgb), 0.08);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 8px;
    color: #F87171;
    font-size: 12px;
}

.risk-warning[b-ikfbwyqwxg]  svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Effects Section */
.effects-section[b-ikfbwyqwxg] {
    padding: 16px 24px;
}

.effects-grid[b-ikfbwyqwxg] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.effect-item[b-ikfbwyqwxg] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    cursor: help;
    transition: all 0.2s;
}

.effect-item:hover[b-ikfbwyqwxg] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
}

.effect-icon[b-ikfbwyqwxg] {
    width: 20px;
    height: 20px;
}

.effect-icon[b-ikfbwyqwxg]  svg {
    width: 100%;
    height: 100%;
}

.effect-item.hype .effect-icon[b-ikfbwyqwxg] {
    color: #F59E0B;
}

.effect-item.momentum .effect-icon[b-ikfbwyqwxg] {
    color: #22C55E;
}

.effect-item.spillover .effect-icon[b-ikfbwyqwxg] {
    color: #3B82F6;
}

.effect-item.fatigue .effect-icon[b-ikfbwyqwxg] {
    color: #EF4444;
}

.effect-label[b-ikfbwyqwxg] {
    font-size: 12px;
    color: rgba(163, 163, 163, 0.7);
}

.effect-value[b-ikfbwyqwxg] {
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 13px;
}

/* Footer */
.modal-footer[b-ikfbwyqwxg] {
    display: flex;
    gap: 12px;
    padding: 16px 24px 24px;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    flex-shrink: 0;
}

.btn-cancel[b-ikfbwyqwxg],
.btn-confirm[b-ikfbwyqwxg] {
    padding: 12px 24px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-cancel[b-ikfbwyqwxg] {
    flex: 0.4;
    background: transparent;
    border: 1px solid var(--wl-border-medium);
    color: rgba(163, 163, 163, 0.8);
}

.btn-cancel:hover:not(:disabled)[b-ikfbwyqwxg] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.btn-confirm[b-ikfbwyqwxg] {
    flex: 0.6;
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, var(--wl-gold-bg) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

.btn-confirm:hover:not(:disabled):not(.disabled)[b-ikfbwyqwxg] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.3) 0%, var(--wl-gold-bg-hover) 100%);
    border-color: var(--wl-gold);
    box-shadow: 0 0 20px var(--wl-gold-border);
}

.btn-confirm.disabled[b-ikfbwyqwxg],
.btn-confirm:disabled[b-ikfbwyqwxg] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-icon[b-ikfbwyqwxg] {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-icon[b-ikfbwyqwxg]  svg {
    width: 100%;
    height: 100%;
}

.btn-spinner[b-ikfbwyqwxg] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-ikfbwyqwxg 1s linear infinite;
}

@keyframes spin-b-ikfbwyqwxg {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 560px) {
    /* The modal lives inside <main> (relative z-0), so its backdrop is trapped
       BELOW the fixed top bar (h-16, z-500) and bottom nav (z-50). Reserve their
       heights as padding so the centered modal sits in the visible gap between
       them - otherwise its top is hidden under the top bar and the footer
       (Launch campaign button) disappears under the bottom nav, unclickable.
       Use dvh so iOS dynamic toolbars don't add extra clipped height. */
    .action-modal-backdrop[b-ikfbwyqwxg] {
        height: 100dvh;
        padding: 76px 12px 92px;
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    }

    .action-modal[b-ikfbwyqwxg] {
        max-height: 100%;
    }

    .modal-header[b-ikfbwyqwxg] {
        padding: 20px 16px 14px;
    }

    .action-icon-wrapper[b-ikfbwyqwxg] {
        width: 48px;
        height: 48px;
    }

    .action-icon-wrapper[b-ikfbwyqwxg]  svg {
        width: 24px;
        height: 24px;
    }

    .modal-title[b-ikfbwyqwxg] {
        font-size: 20px;
    }

    .action-description[b-ikfbwyqwxg],
    .costs-section[b-ikfbwyqwxg],
    .payment-section[b-ikfbwyqwxg],
    .thresholds-section[b-ikfbwyqwxg],
    .effects-section[b-ikfbwyqwxg] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .costs-grid[b-ikfbwyqwxg] {
        flex-direction: column;
    }

    .cost-item[b-ikfbwyqwxg] {
        min-width: 100%;
    }

    .modal-footer[b-ikfbwyqwxg] {
        padding: 14px 16px 20px;
        flex-direction: column;
    }

    .btn-cancel[b-ikfbwyqwxg],
    .btn-confirm[b-ikfbwyqwxg] {
        flex: 1;
        width: 100%;
    }
}
/* /Components/Pages/Career/Promotion/Index.razor.rz.scp.css */
/* ============================================
   PROMOTION HUB - AAA+ Premium Design
   Theme: Dark luxury with gold accents
   ============================================ */

.promo-dashboard[b-kd0i1s4g3c] {
    position: relative;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Atmospheric background */
.promo-bg-atmosphere[b-kd0i1s4g3c] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(var(--wl-red-rgb), 0.03) 0%, transparent 50%);
}

/* ============================================
   LOADING STATE
   ============================================ */

.promo-loading[b-kd0i1s4g3c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
}

.promo-loading-spinner[b-kd0i1s4g3c] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-kd0i1s4g3c 1s linear infinite;
}

@keyframes spin-b-kd0i1s4g3c {
    to { transform: rotate(360deg); }
}

/* ============================================
   EMPTY STATE
   ============================================ */

.promo-empty[b-kd0i1s4g3c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}

.promo-empty-icon[b-kd0i1s4g3c] {
    width: 80px;
    height: 80px;
    color: rgba(var(--wl-gold-rgb), 0.3);
    margin-bottom: 1.5rem;
}

.promo-empty-icon[b-kd0i1s4g3c]  svg {
    width: 100%;
    height: 100%;
}

.promo-empty h2[b-kd0i1s4g3c] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin-bottom: 0.5rem;
}

.promo-empty p[b-kd0i1s4g3c] {
    color: var(--wl-text-muted);
    margin-bottom: 1.5rem;
}

.promo-empty-cta[b-kd0i1s4g3c] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.promo-empty-cta:hover[b-kd0i1s4g3c] {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.4);
}

.promo-empty-cta[b-kd0i1s4g3c]  svg {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   HEADER
   ============================================ */

.promo-header[b-kd0i1s4g3c] {
    margin-bottom: 1.5rem;
}

.promo-header-content[b-kd0i1s4g3c] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.promo-header-icon[b-kd0i1s4g3c] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 12px;
    color: var(--wl-gold);
}

.promo-header-icon[b-kd0i1s4g3c]  svg {
    width: 24px;
    height: 24px;
}

.promo-title[b-kd0i1s4g3c] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

.promo-subtitle[b-kd0i1s4g3c] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0.25rem 0 0 0;
}

/* ============================================
   RESOURCE BAR
   ============================================ */

.promo-resources[b-kd0i1s4g3c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(var(--wl-bg-modal-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
}

.promo-resource[b-kd0i1s4g3c] {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 9.5rem;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 8px;
    cursor: help;
    transition: all 0.2s ease;
}

.promo-resource:hover[b-kd0i1s4g3c] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: var(--wl-border-medium);
}

.promo-resource-icon[b-kd0i1s4g3c] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.promo-resource-icon[b-kd0i1s4g3c]  svg {
    width: 16px;
    height: 16px;
}

.promo-resource-icon.energy[b-kd0i1s4g3c] {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.2) 0%, rgba(234, 179, 8, 0.1) 100%);
    color: #EAB308;
}

.promo-resource-icon.influence[b-kd0i1s4g3c] {
    background: linear-gradient(135deg, rgba(var(--wl-champagne-rgb), 0.2) 0%, rgba(var(--wl-champagne-rgb), 0.08) 100%);
    color: var(--wl-champagne);
}

.promo-resource-icon.credits[b-kd0i1s4g3c] {
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, var(--wl-gold-bg) 100%);
    color: var(--wl-gold);
}

.promo-resource-icon.budget[b-kd0i1s4g3c] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(34, 197, 94, 0.1) 100%);
    color: #22C55E;
}

.promo-resource-info[b-kd0i1s4g3c] {
    display: flex;
    flex-direction: column;
}

.promo-resource-label[b-kd0i1s4g3c] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-muted);
}

.promo-resource-value[b-kd0i1s4g3c] {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-variant-numeric: tabular-nums;
}

/* ============================================
   ACTIVE RELEASE SECTION
   ============================================ */

.promo-release[b-kd0i1s4g3c] {
    margin-bottom: 1.5rem;
}

.promo-release-card[b-kd0i1s4g3c] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(var(--wl-bg-modal-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-gold-border);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.promo-release-card.has-focus-track[b-kd0i1s4g3c] {
    border-radius: 12px 12px 0 0;
}

.promo-release-card[b-kd0i1s4g3c]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--wl-gold-rgb), 0.6) 50%, transparent 100%);
}

.promo-release-cover[b-kd0i1s4g3c] {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    flex-shrink: 0;
}

.promo-release-cover[b-kd0i1s4g3c]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.promo-release-cover-placeholder[b-kd0i1s4g3c] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-text-muted);
}

.promo-release-cover-placeholder[b-kd0i1s4g3c]  svg {
    width: 32px;
    height: 32px;
}

.promo-release-cover-placeholder.brand-deal[b-kd0i1s4g3c] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.1) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    color: var(--wl-gold);
}

.promo-release-info[b-kd0i1s4g3c] {
    flex: 1;
    min-width: 0;
}

.promo-release-type[b-kd0i1s4g3c] {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin-bottom: 0.25rem;
}

.promo-release-title[b-kd0i1s4g3c] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.promo-release-meta[b-kd0i1s4g3c] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: center;
}

.promo-release-phase[b-kd0i1s4g3c] {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
}

.promo-release-phase.pre-release[b-kd0i1s4g3c] {
    background: rgba(234, 179, 8, 0.15);
    color: #EAB308;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

.promo-release-phase.released[b-kd0i1s4g3c] {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.promo-release-hype[b-kd0i1s4g3c] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 600;
    color: #F97316;
    white-space: nowrap;
}

.promo-release-hype[b-kd0i1s4g3c]  svg {
    width: 10px;
    height: 10px;
}

.promo-release-tracks[b-kd0i1s4g3c] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.promo-release-change[b-kd0i1s4g3c] {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.2);
    border-radius: 6px;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.promo-release-change:hover[b-kd0i1s4g3c] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: var(--wl-text-muted);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.promo-focus-track[b-kd0i1s4g3c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--wl-gold-border);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.08), rgba(var(--wl-bg-modal-deep-rgb), 0.92));
}

.promo-focus-track-copy[b-kd0i1s4g3c] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.promo-focus-track-label[b-kd0i1s4g3c] {
    color: var(--wl-gold);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.promo-focus-track-hint[b-kd0i1s4g3c] {
    color: var(--wl-text-muted);
    font-size: 0.75rem;
}

.promo-focus-track-control[b-kd0i1s4g3c] {
    position: relative;
    min-width: min(22rem, 45%);
}

.promo-focus-track-control select[b-kd0i1s4g3c] {
    width: 100%;
    appearance: none;
    padding: 0.75rem 2.5rem 0.75rem 0.875rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.35);
    border-radius: 8px;
    background: rgb(var(--wl-bg-modal-deep-rgb));
    color: var(--wl-text-primary);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
}

.promo-focus-track-control select:focus-visible[b-kd0i1s4g3c] {
    outline: 2px solid rgba(var(--wl-gold-rgb), 0.45);
    outline-offset: 2px;
}

.promo-focus-track-chevron[b-kd0i1s4g3c] {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    width: 1rem;
    height: 1rem;
    color: var(--wl-gold);
    pointer-events: none;
    transform: translateY(-50%);
}

.promo-focus-track-chevron[b-kd0i1s4g3c]  svg {
    width: 100%;
    height: 100%;
}

/* ============================================
   TARGET TYPE SELECTOR
   ============================================ */

.promo-target-selector[b-kd0i1s4g3c] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 10px;
}

.promo-target-tab[b-kd0i1s4g3c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.promo-target-tab:hover[b-kd0i1s4g3c] {
    color: rgba(var(--wl-contrast-rgb), 0.8);
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.promo-target-tab.active[b-kd0i1s4g3c] {
    background: var(--wl-bg-primary);
    border-color: var(--wl-border-medium);
    color: var(--wl-gold);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.promo-target-tab[b-kd0i1s4g3c]  svg {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   CATEGORY TABS
   ============================================ */

.promo-categories[b-kd0i1s4g3c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.promo-category-tab[b-kd0i1s4g3c] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.promo-category-tab:hover[b-kd0i1s4g3c] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.promo-category-tab.active[b-kd0i1s4g3c] {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.promo-category-icon[b-kd0i1s4g3c] {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-category-icon[b-kd0i1s4g3c]  svg {
    width: 100%;
    height: 100%;
}

.promo-category-name[b-kd0i1s4g3c] {
    display: none;
}

@media (min-width: 640px) {
    .promo-category-name[b-kd0i1s4g3c] {
        display: block;
    }
}

.promo-category-count[b-kd0i1s4g3c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: var(--wl-border-medium);
    border-radius: 9px;
    font-size: 0.625rem;
    font-weight: 600;
}

.promo-category-tab.active .promo-category-count[b-kd0i1s4g3c] {
    background: var(--wl-gold-border);
    color: var(--wl-gold);
}

/* ============================================
   ACTION CARDS GRID
   ============================================ */

.promo-actions[b-kd0i1s4g3c] {
    margin-bottom: 2rem;
}

.promo-actions-grid[b-kd0i1s4g3c] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.promo-actions-empty[b-kd0i1s4g3c] {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 12px;
}

/* Action Card */
.promo-action-card[b-kd0i1s4g3c] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    background: linear-gradient(180deg, rgba(var(--wl-bg-modal-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.promo-action-card[b-kd0i1s4g3c]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--wl-border-medium) 50%, transparent 100%);
    transition: all 0.2s ease;
}

.promo-action-card:hover:not(.locked):not(.cooldown)[b-kd0i1s4g3c] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    transform: translateY(-2px);
}

.promo-action-card:hover:not(.locked):not(.cooldown)[b-kd0i1s4g3c]::before {
    background: linear-gradient(90deg, transparent 0%, rgba(var(--wl-gold-rgb), 0.5) 50%, transparent 100%);
}

.promo-action-card.available[b-kd0i1s4g3c] {
    border-color: var(--wl-gold-border);
}

.promo-action-card.available[b-kd0i1s4g3c]::before {
    background: linear-gradient(90deg, transparent 0%, rgba(var(--wl-gold-rgb), 0.4) 50%, transparent 100%);
}

.promo-action-card.cooldown[b-kd0i1s4g3c] {
    opacity: 0.7;
}

.promo-action-card.locked[b-kd0i1s4g3c] {
    opacity: 0.5;
}

/* Locked overlay */
.promo-action-locked-overlay[b-kd0i1s4g3c] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--wl-bg-tertiary);
    border-radius: 12px;
    z-index: 10;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.75rem;
    font-weight: 600;
}

.promo-action-locked-overlay[b-kd0i1s4g3c]  svg {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

/* Cooldown badge */
.promo-action-cooldown-badge[b-kd0i1s4g3c] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 100px;
    font-size: 0.625rem;
    font-weight: 600;
    color: #F97316;
}

.promo-action-cooldown-badge[b-kd0i1s4g3c]  svg {
    width: 10px;
    height: 10px;
}

/* Action header */
.promo-action-header[b-kd0i1s4g3c] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.promo-action-icon[b-kd0i1s4g3c] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid var(--wl-gold-border);
    border-radius: 10px;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.promo-action-icon[b-kd0i1s4g3c]  svg {
    width: 20px;
    height: 20px;
}

.promo-action-name-wrapper[b-kd0i1s4g3c] {
    flex: 1;
    min-width: 0;
}

.promo-action-name[b-kd0i1s4g3c] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin-bottom: 0.25rem;
}

.promo-action-uses[b-kd0i1s4g3c] {
    display: block;
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
}

/* Action costs */
.promo-action-costs[b-kd0i1s4g3c] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.promo-action-cost[b-kd0i1s4g3c] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    cursor: help;
    transition: all 0.2s;
}

.promo-action-cost:hover[b-kd0i1s4g3c] {
    background: var(--wl-border-medium);
}

.promo-action-cost[b-kd0i1s4g3c]  svg {
    width: 12px;
    height: 12px;
}

.promo-action-cost.energy[b-kd0i1s4g3c] {
    color: #EAB308;
}

.promo-action-cost.influence[b-kd0i1s4g3c] {
    color: var(--wl-champagne);
}

.promo-action-cost.credits[b-kd0i1s4g3c] {
    color: var(--wl-gold);
}

.promo-action-cost.insufficient[b-kd0i1s4g3c] {
    color: #EF4444;
    background: rgba(var(--wl-red-rgb), 0.1);
}

/* Action chances */
.promo-action-chances[b-kd0i1s4g3c] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border-radius: 8px;
}

.promo-chance[b-kd0i1s4g3c] {
    flex: 1;
    text-align: center;
}

.promo-chance-value[b-kd0i1s4g3c] {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-variant-numeric: tabular-nums;
}

.promo-chance.success .promo-chance-value[b-kd0i1s4g3c] {
    color: #22C55E;
}

.promo-chance.viral .promo-chance-value[b-kd0i1s4g3c] {
    color: #F97316;
}

.promo-chance-label[b-kd0i1s4g3c] {
    display: block;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-muted);
    margin-top: 0.125rem;
}

/* Action button - outline by default; solid gold ONLY on the recommended card.
   Gold is the currency of attention: one full-gold CTA per page. */
.promo-action-btn[b-kd0i1s4g3c] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.5);
    border-radius: 8px;
    color: var(--wl-gold);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: auto;
}

.promo-action-btn:hover:not(:disabled)[b-kd0i1s4g3c] {
    transform: translateY(-1px);
    background: rgba(var(--wl-gold-rgb), 0.1);
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.2);
}

.promo-action-card.recommended .promo-action-btn[b-kd0i1s4g3c] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border: none;
    color: var(--wl-bg-primary);
}

.promo-action-card.recommended .promo-action-btn:hover:not(:disabled)[b-kd0i1s4g3c] {
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.4);
}

/* Recommended card - on stage */
.promo-action-card.recommended[b-kd0i1s4g3c] {
    background-image:
        var(--wl-spotlight),
        linear-gradient(180deg, rgba(var(--wl-bg-modal-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35), 0 0 40px rgba(var(--wl-gold-rgb), 0.07);
}

.promo-action-recommended-badge[b-kd0i1s4g3c] {
    position: absolute;
    top: -0.6rem;
    right: 0.875rem;
    padding: 0.2rem 0.6rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border-radius: 4px;
    color: var(--wl-bg-primary);
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 2px 10px rgba(var(--wl-gold-rgb), 0.45);
}

.promo-action-btn:disabled[b-kd0i1s4g3c] {
    background: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.4);
    cursor: not-allowed;
}

/* ============================================
   RECENT CAMPAIGNS HISTORY
   ============================================ */

.promo-history[b-kd0i1s4g3c] {
    background: linear-gradient(180deg, rgba(var(--wl-bg-modal-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}

.promo-history[b-kd0i1s4g3c]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--wl-gold-rgb), 0.4) 50%, transparent 100%);
}

.promo-section-title[b-kd0i1s4g3c] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin-bottom: 1rem;
}

.promo-section-title[b-kd0i1s4g3c]  svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.8;
}

.promo-history-list[b-kd0i1s4g3c] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.promo-history-item[b-kd0i1s4g3c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 8px;
}

.promo-history-item.viral[b-kd0i1s4g3c] {
    border-color: rgba(249, 115, 22, 0.3);
    background: rgba(249, 115, 22, 0.05);
}

.promo-history-item.success[b-kd0i1s4g3c] {
    border-color: rgba(34, 197, 94, 0.3);
    background: rgba(34, 197, 94, 0.05);
}

.promo-history-item.flop[b-kd0i1s4g3c],
.promo-history-item.backfire[b-kd0i1s4g3c] {
    border-color: rgba(var(--wl-red-rgb), 0.3);
    background: rgba(var(--wl-red-rgb), 0.05);
}

.promo-history-icon[b-kd0i1s4g3c] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 8px;
    flex-shrink: 0;
}

.promo-history-icon[b-kd0i1s4g3c]  svg {
    width: 16px;
    height: 16px;
}

.promo-history-item.viral .promo-history-icon[b-kd0i1s4g3c] {
    color: #F97316;
    background: rgba(249, 115, 22, 0.1);
}

.promo-history-item.success .promo-history-icon[b-kd0i1s4g3c] {
    color: #22C55E;
    background: rgba(34, 197, 94, 0.1);
}

.promo-history-item.neutral .promo-history-icon[b-kd0i1s4g3c] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.promo-history-item.flop .promo-history-icon[b-kd0i1s4g3c],
.promo-history-item.backfire .promo-history-icon[b-kd0i1s4g3c] {
    color: #EF4444;
    background: rgba(var(--wl-red-rgb), 0.1);
}

.promo-history-info[b-kd0i1s4g3c] {
    flex: 1;
    min-width: 0;
}

.promo-history-name[b-kd0i1s4g3c] {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.promo-history-time[b-kd0i1s4g3c] {
    display: block;
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin-top: 0.125rem;
}

.promo-history-outcome[b-kd0i1s4g3c] {
    text-align: right;
}

.promo-history-outcome-label[b-kd0i1s4g3c] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.promo-history-item.viral .promo-history-outcome-label[b-kd0i1s4g3c] {
    color: #F97316;
}

.promo-history-item.success .promo-history-outcome-label[b-kd0i1s4g3c] {
    color: #22C55E;
}

.promo-history-item.flop .promo-history-outcome-label[b-kd0i1s4g3c],
.promo-history-item.backfire .promo-history-outcome-label[b-kd0i1s4g3c] {
    color: #EF4444;
}

.promo-history-effect[b-kd0i1s4g3c] {
    display: block;
    font-size: 0.6875rem;
    margin-top: 0.125rem;
}

.promo-history-effect.positive[b-kd0i1s4g3c] {
    color: #22C55E;
}

.promo-history-effect.negative[b-kd0i1s4g3c] {
    color: #EF4444;
}

.promo-history-target[b-kd0i1s4g3c] {
    color: rgba(var(--wl-gold-rgb), 0.72);
    font-size: 0.7rem;
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animate-fade-in[b-kd0i1s4g3c] {
    animation: fadeIn-b-kd0i1s4g3c 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn-b-kd0i1s4g3c {
    to { opacity: 1; }
}

.delay-50[b-kd0i1s4g3c] { animation-delay: 0.05s; }
.delay-100[b-kd0i1s4g3c] { animation-delay: 0.1s; }
.delay-150[b-kd0i1s4g3c] { animation-delay: 0.15s; }
.delay-200[b-kd0i1s4g3c] { animation-delay: 0.2s; }
.delay-250[b-kd0i1s4g3c] { animation-delay: 0.25s; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .promo-dashboard[b-kd0i1s4g3c] {
        padding: 1rem;
    }

    .promo-title[b-kd0i1s4g3c] {
        font-size: 2rem;
    }

    .promo-resources[b-kd0i1s4g3c] {
        padding: 0.75rem;
    }

    .promo-resource[b-kd0i1s4g3c] {
        flex: 1;
        min-width: 120px;
    }

    .promo-release-card[b-kd0i1s4g3c] {
        flex-wrap: wrap;
    }

    .promo-release-cover[b-kd0i1s4g3c] {
        width: 56px;
        height: 56px;
    }

    .promo-release-title[b-kd0i1s4g3c] {
        font-size: 1.25rem;
    }

    .promo-release-change[b-kd0i1s4g3c] {
        width: 100%;
        margin-top: 0.75rem;
    }

    .promo-focus-track[b-kd0i1s4g3c] {
        align-items: stretch;
        flex-direction: column;
    }

    .promo-focus-track-control[b-kd0i1s4g3c] {
        min-width: 0;
        width: 100%;
    }

    .promo-actions-grid[b-kd0i1s4g3c] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   RELEASE SELECTOR MODAL
   ============================================ */

.release-selector-backdrop[b-kd0i1s4g3c] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px 20px;
    animation: overlayFadeIn-b-kd0i1s4g3c 0.2s ease-out;
    overflow-y: auto;
}

@keyframes overlayFadeIn-b-kd0i1s4g3c {
    from { opacity: 0; }
    to { opacity: 1; }
}

.release-selector-modal[b-kd0i1s4g3c] {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 100px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%);
    border: 1px solid var(--wl-gold-border);
    animation: modalSlideUp-b-kd0i1s4g3c 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-shadow:
        0 0 0 1px var(--wl-shadow-color),
        0 25px 80px var(--wl-shadow-color),
        0 0 100px rgba(var(--wl-gold-rgb), 0.05);
}

@keyframes modalSlideUp-b-kd0i1s4g3c {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.release-selector-header[b-kd0i1s4g3c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 28px 48px 20px;
    border-bottom: 1px solid var(--wl-gold-bg-hover);
    flex-shrink: 0;
}

.release-selector-content[b-kd0i1s4g3c] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.release-option[b-kd0i1s4g3c] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: linear-gradient(180deg, rgba(var(--wl-bg-modal-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.release-option:hover[b-kd0i1s4g3c] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: var(--wl-border-medium);
}

.release-option.selected[b-kd0i1s4g3c] {
    background: linear-gradient(135deg, var(--wl-gold-bg) 0%, rgba(var(--wl-gold-rgb), 0.03) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.release-option-cover[b-kd0i1s4g3c] {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.release-option-cover[b-kd0i1s4g3c]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.release-option-cover-placeholder[b-kd0i1s4g3c] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--wl-gold-rgb), 0.4);
}

.release-option-cover-placeholder[b-kd0i1s4g3c]  svg {
    width: 24px;
    height: 24px;
}

.release-option-info[b-kd0i1s4g3c] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.release-option-title[b-kd0i1s4g3c] {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.release-option.selected .release-option-title[b-kd0i1s4g3c] {
    color: var(--wl-gold);
}

.release-option-meta[b-kd0i1s4g3c] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
}

.release-option-type[b-kd0i1s4g3c] {
    color: rgba(163, 163, 163, 0.7);
}

.release-option-phase[b-kd0i1s4g3c] {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.release-option-phase.pre-release[b-kd0i1s4g3c] {
    background: rgba(250, 204, 21, 0.12);
    color: #FACC15;
}

.release-option-phase.released[b-kd0i1s4g3c] {
    background: rgba(34, 197, 94, 0.12);
    color: #22C55E;
}

.release-option-check[b-kd0i1s4g3c] {
    width: 20px;
    height: 20px;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.release-option-check[b-kd0i1s4g3c]  svg {
    width: 100%;
    height: 100%;
}

.release-selector-footer[b-kd0i1s4g3c] {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    flex-shrink: 0;
}

/* ============================================
   REPUTATION LOCKED OVERLAY & COST
   ============================================ */

/* Reputation locked overlay */
.promo-action-locked-overlay.rep-locked[b-kd0i1s4g3c] {
    background: rgba(239, 68, 68, 0.08);
}

.promo-action-locked-overlay.rep-locked span[b-kd0i1s4g3c] {
    color: rgba(239, 68, 68, 0.6);
    font-size: 0.55rem;
}

/* Reputation cost */
.promo-action-cost.reputation[b-kd0i1s4g3c] {
    color: #EF4444;
}

.rep-cost-icon[b-kd0i1s4g3c] {
    font-size: 0.5rem;
    vertical-align: middle;
}
/* /Components/Pages/Career/Promotion/PromotionResultModal.razor.rz.scp.css */
/* ============================================
   ROLLING PHASE
   ============================================ */

.roll-overlay[b-7xswoz23zs] {
    position: fixed;
    inset: 0;
    background: rgba(var(--wl-bg-dark-rgb), 0.9);
    backdrop-filter: blur(28px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: overlayFadeIn-b-7xswoz23zs 0.2s ease-out;
}

.roll-container[b-7xswoz23zs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    animation: rollContainerAppear-b-7xswoz23zs 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes rollContainerAppear-b-7xswoz23zs {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.roll-dice-ring[b-7xswoz23zs] {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
}

.roll-dice-ring[b-7xswoz23zs]::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--wl-gold);
    animation: rollRingSpin-b-7xswoz23zs 0.6s cubic-bezier(0.4, 0.2, 0.6, 0.8) infinite;
}

.roll-dice-ring[b-7xswoz23zs]::after {
    content: '✦   ✦';
    position: absolute;
    top: -2.2rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(var(--wl-gold-rgb), 0.7);
    font-size: 0.7rem;
    letter-spacing: 0.5em;
    white-space: pre;
}

@keyframes rollRingSpin-b-7xswoz23zs {
    to { transform: rotate(360deg); }
}

.roll-dice-glow[b-7xswoz23zs] {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--wl-gold-border) 0%, transparent 70%);
    animation: rollGlowPulse-b-7xswoz23zs 0.8s ease-in-out infinite alternate;
}

@keyframes rollGlowPulse-b-7xswoz23zs {
    from { opacity: 0.4; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1.1); }
}

.roll-number-display[b-7xswoz23zs] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.roll-spinning-number[b-7xswoz23zs] {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    background-image: linear-gradient(160deg, var(--wl-champagne) 0%, var(--wl-gold) 60%, var(--wl-gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(var(--wl-gold-rgb), 0.4));
    font-variant-numeric: tabular-nums;
}

.roll-label[b-7xswoz23zs] {
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-text-muted);
    animation: rollLabelPulse-b-7xswoz23zs 1s ease-in-out infinite alternate;
}

@keyframes rollLabelPulse-b-7xswoz23zs {
    from { opacity: 0.4; }
    to { opacity: 0.8; }
}

/* ============================================
   RESULT PHASE
   ============================================ */

/* Result Modal Overlay */
.result-modal-overlay[b-7xswoz23zs] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    animation: overlayFadeIn-b-7xswoz23zs 0.4s ease-out;
}

/* Outcome-specific overlay tints */
.result-modal-overlay.outcome-viral[b-7xswoz23zs] {
    background: radial-gradient(circle at center, var(--wl-gold-bg-hover) 0%, var(--wl-overlay-bg) 70%);
}

.result-modal-overlay.outcome-success[b-7xswoz23zs] {
    background: radial-gradient(circle at center, rgba(76, 175, 80, 0.1) 0%, var(--wl-overlay-bg) 70%);
}

.result-modal-overlay.outcome-neutral[b-7xswoz23zs] {
    background: radial-gradient(circle at center, rgba(128, 128, 128, 0.1) 0%, var(--wl-overlay-bg) 70%);
}

.result-modal-overlay.outcome-flop[b-7xswoz23zs] {
    background: radial-gradient(circle at center, rgba(244, 67, 54, 0.1) 0%, var(--wl-overlay-bg) 70%);
}

.result-modal-overlay.outcome-backfire[b-7xswoz23zs] {
    background: radial-gradient(circle at center, rgba(139, 0, 0, 0.15) 0%, var(--wl-overlay-bg) 70%);
}

@keyframes overlayFadeIn-b-7xswoz23zs {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Container */
.result-modal[b-7xswoz23zs] {
    position: relative;
    max-width: 480px;
    width: 100%;
    background: linear-gradient(135deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.98) 50%, rgba(var(--wl-bg-modal-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 12px;
    overflow: hidden;
    padding: 2rem;
    text-align: center;
    animation: modalReveal-b-7xswoz23zs 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Outcome-specific modal borders */
.result-modal.outcome-viral[b-7xswoz23zs] {
    border-color: rgba(var(--wl-gold-rgb), 0.6);
    box-shadow:
        0 0 60px rgba(var(--wl-gold-rgb), 0.3),
        0 0 120px var(--wl-gold-bg-hover),
        0 25px 50px -12px var(--wl-shadow-color);
}

.result-modal.outcome-success[b-7xswoz23zs] {
    border-color: rgba(76, 175, 80, 0.5);
    box-shadow:
        0 0 40px rgba(76, 175, 80, 0.2),
        0 25px 50px -12px var(--wl-shadow-color);
}

.result-modal.outcome-neutral[b-7xswoz23zs] {
    border-color: rgba(128, 128, 128, 0.4);
    box-shadow:
        0 0 30px rgba(128, 128, 128, 0.1),
        0 25px 50px -12px var(--wl-shadow-color);
}

.result-modal.outcome-flop[b-7xswoz23zs] {
    border-color: rgba(244, 67, 54, 0.4);
    box-shadow:
        0 0 40px rgba(244, 67, 54, 0.15),
        0 25px 50px -12px var(--wl-shadow-color);
}

.result-modal.outcome-backfire[b-7xswoz23zs] {
    border-color: rgba(139, 0, 0, 0.5);
    box-shadow:
        0 0 50px rgba(139, 0, 0, 0.2),
        0 0 100px rgba(139, 0, 0, 0.1),
        0 25px 50px -12px var(--wl-shadow-color);
}

@keyframes modalReveal-b-7xswoz23zs {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Corner Decorations */
.result-corner[b-7xswoz23zs] {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.5);
    z-index: 10;
    transition: border-color 0.3s ease;
}

.result-corner-tl[b-7xswoz23zs] {
    top: 8px;
    left: 8px;
    border-right: none;
    border-bottom: none;
}

.result-corner-tr[b-7xswoz23zs] {
    top: 8px;
    right: 8px;
    border-left: none;
    border-bottom: none;
}

.result-corner-bl[b-7xswoz23zs] {
    bottom: 8px;
    left: 8px;
    border-right: none;
    border-top: none;
}

.result-corner-br[b-7xswoz23zs] {
    bottom: 8px;
    right: 8px;
    border-left: none;
    border-top: none;
}

/* Outcome-specific corner colors */
.result-modal.outcome-viral .result-corner[b-7xswoz23zs] { border-color: rgba(var(--wl-gold-rgb), 0.7); }
.result-modal.outcome-success .result-corner[b-7xswoz23zs] { border-color: rgba(76, 175, 80, 0.6); }
.result-modal.outcome-neutral .result-corner[b-7xswoz23zs] { border-color: rgba(128, 128, 128, 0.5); }
.result-modal.outcome-flop .result-corner[b-7xswoz23zs] { border-color: rgba(244, 67, 54, 0.5); }
.result-modal.outcome-backfire .result-corner[b-7xswoz23zs] { border-color: rgba(139, 0, 0, 0.6); }

/* Animated Particles */
.result-particles[b-7xswoz23zs] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.result-particles .particle[b-7xswoz23zs] {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    animation: particleBurst-b-7xswoz23zs 1.5s ease-out var(--delay) infinite;
}

.result-particles.viral .particle[b-7xswoz23zs] {
    background: radial-gradient(circle, #FFD700, var(--wl-gold));
    box-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.8);
}

.result-particles.success .particle[b-7xswoz23zs] {
    background: radial-gradient(circle, #81c784, #4CAF50);
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

@keyframes particleBurst-b-7xswoz23zs {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1);
        opacity: 0;
    }
}

/* Glow Effect */
.result-glow[b-7xswoz23zs] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.5;
    animation: glowPulse-b-7xswoz23zs 2s ease-in-out infinite;
}

.result-modal.outcome-viral .result-glow[b-7xswoz23zs] {
    background: radial-gradient(circle, rgba(var(--wl-gold-rgb), 0.3) 0%, transparent 50%);
}

.result-modal.outcome-success .result-glow[b-7xswoz23zs] {
    background: radial-gradient(circle, rgba(76, 175, 80, 0.2) 0%, transparent 50%);
}

.result-modal.outcome-neutral .result-glow[b-7xswoz23zs] {
    background: radial-gradient(circle, rgba(128, 128, 128, 0.1) 0%, transparent 50%);
}

.result-modal.outcome-flop .result-glow[b-7xswoz23zs] {
    background: radial-gradient(circle, rgba(244, 67, 54, 0.15) 0%, transparent 50%);
}

.result-modal.outcome-backfire .result-glow[b-7xswoz23zs] {
    background: radial-gradient(circle, rgba(139, 0, 0, 0.2) 0%, transparent 50%);
}

@keyframes glowPulse-b-7xswoz23zs {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}

/* Icon Container */
.result-icon-container[b-7xswoz23zs] {
    position: relative;
    z-index: 5;
    margin-bottom: 1rem;
    animation: iconBounce-b-7xswoz23zs 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}

@keyframes iconBounce-b-7xswoz23zs {
    from {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

.result-icon[b-7xswoz23zs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, var(--wl-gold-bg) 100%);
    border: 2px solid rgba(var(--wl-gold-rgb), 0.4);
}

.result-icon-svg[b-7xswoz23zs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.result-icon-svg[b-7xswoz23zs]  svg {
    width: 100%;
    height: 100%;
    color: var(--wl-gold);
}

/* Outcome-specific icon styles */
.result-modal.outcome-viral .result-icon[b-7xswoz23zs] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.3) 0%, rgba(255, 215, 0, 0.2) 100%);
    border-color: rgba(255, 215, 0, 0.6);
    animation: viralIconPulse-b-7xswoz23zs 1s ease-in-out infinite;
}

.result-modal.outcome-viral .result-icon-svg[b-7xswoz23zs]  svg {
    color: #FFD700;
}

@keyframes viralIconPulse-b-7xswoz23zs {
    0%, 100% { box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4); }
    50% { box-shadow: 0 0 40px rgba(var(--wl-gold-rgb), 0.7); }
}

.result-modal.outcome-success .result-icon[b-7xswoz23zs] {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(76, 175, 80, 0.1) 100%);
    border-color: rgba(76, 175, 80, 0.5);
}

.result-modal.outcome-success .result-icon-svg[b-7xswoz23zs]  svg {
    color: #81c784;
}

.result-modal.outcome-neutral .result-icon[b-7xswoz23zs] {
    background: linear-gradient(135deg, rgba(128, 128, 128, 0.2) 0%, rgba(128, 128, 128, 0.1) 100%);
    border-color: rgba(128, 128, 128, 0.4);
}

.result-modal.outcome-neutral .result-icon-svg[b-7xswoz23zs]  svg {
    color: #9e9e9e;
}

.result-modal.outcome-flop .result-icon[b-7xswoz23zs] {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.2) 0%, rgba(244, 67, 54, 0.1) 100%);
    border-color: rgba(244, 67, 54, 0.4);
}

.result-modal.outcome-flop .result-icon-svg[b-7xswoz23zs]  svg {
    color: #e57373;
}

.result-modal.outcome-backfire .result-icon[b-7xswoz23zs] {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.3) 0%, rgba(139, 0, 0, 0.1) 100%);
    border-color: rgba(139, 0, 0, 0.5);
    animation: backfireIconShake-b-7xswoz23zs 0.5s ease-in-out 0.5s;
}

.result-modal.outcome-backfire .result-icon-svg[b-7xswoz23zs]  svg {
    color: #ff6b6b;
}

@keyframes backfireIconShake-b-7xswoz23zs {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* Roll Display */
.result-roll[b-7xswoz23zs] {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
    animation: rollReveal-b-7xswoz23zs 0.5s ease-out 0.3s both;
}

@keyframes rollReveal-b-7xswoz23zs {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-roll-label[b-7xswoz23zs] {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-text-muted);
}

.result-roll-value[b-7xswoz23zs] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    text-shadow: 0 0 20px var(--wl-text-muted);
}

/* Title */
.result-title[b-7xswoz23zs] {
    position: relative;
    z-index: 5;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 0 0 1rem 0;
    animation: titleReveal-b-7xswoz23zs 0.5s ease-out 0.4s both;
}

@keyframes titleReveal-b-7xswoz23zs {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Outcome-specific title colors */
.result-modal.outcome-viral .result-title[b-7xswoz23zs] {
    color: #FFD700;
    text-shadow: 0 0 30px rgba(var(--wl-gold-rgb), 0.6);
}

.result-modal.outcome-success .result-title[b-7xswoz23zs] {
    color: #81c784;
    text-shadow: 0 0 20px rgba(76, 175, 80, 0.4);
}

.result-modal.outcome-neutral .result-title[b-7xswoz23zs] {
    color: #9e9e9e;
    text-shadow: 0 0 15px rgba(128, 128, 128, 0.3);
}

.result-modal.outcome-flop .result-title[b-7xswoz23zs] {
    color: #e57373;
    text-shadow: 0 0 20px rgba(244, 67, 54, 0.3);
}

.result-modal.outcome-backfire .result-title[b-7xswoz23zs] {
    color: #ff6b6b;
    text-shadow: 0 0 25px rgba(139, 0, 0, 0.5);
}

/* Headline */
.result-headline[b-7xswoz23zs] {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    animation: headlineReveal-b-7xswoz23zs 0.5s ease-out 0.5s both;
}

@keyframes headlineReveal-b-7xswoz23zs {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-headline-decoration[b-7xswoz23zs] {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.5), transparent);
}

.result-headline-text[b-7xswoz23zs] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    font-style: italic;
}

/* Description */
.result-description[b-7xswoz23zs] {
    position: relative;
    z-index: 5;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 1.5rem 0;
    animation: descReveal-b-7xswoz23zs 0.5s ease-out 0.6s both;
}

@keyframes descReveal-b-7xswoz23zs {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Effects Section */
.result-effects[b-7xswoz23zs] {
    position: relative;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    animation: effectsReveal-b-7xswoz23zs 0.5s ease-out 0.7s both;
}

@keyframes effectsReveal-b-7xswoz23zs {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-effect[b-7xswoz23zs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.result-effect.positive[b-7xswoz23zs] {
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.3);
}

.result-effect.negative[b-7xswoz23zs] {
    background: rgba(244, 67, 54, 0.1);
    border-color: rgba(244, 67, 54, 0.3);
}

.result-effect-icon[b-7xswoz23zs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.result-effect-icon[b-7xswoz23zs]  svg {
    width: 100%;
    height: 100%;
}

.result-effect.positive .result-effect-icon[b-7xswoz23zs]  svg {
    color: #81c784;
}

.result-effect.negative .result-effect-icon[b-7xswoz23zs]  svg {
    color: #e57373;
}

.result-effect-label[b-7xswoz23zs] {
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.result-effect-value[b-7xswoz23zs] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    letter-spacing: 0.05em;
}

.result-effect.positive .result-effect-value[b-7xswoz23zs] {
    color: #81c784;
}

.result-effect.negative .result-effect-value[b-7xswoz23zs] {
    color: #e57373;
}

/* Thresholds Breakdown */
.result-thresholds[b-7xswoz23zs] {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--wl-surface-primary);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    animation: thresholdsReveal-b-7xswoz23zs 0.5s ease-out 0.8s both;
}

@keyframes thresholdsReveal-b-7xswoz23zs {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.result-threshold-item[b-7xswoz23zs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.result-threshold-item .threshold-label[b-7xswoz23zs] {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
    margin-bottom: 0.25rem;
}

.result-threshold-item .threshold-range[b-7xswoz23zs] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-family: monospace;
}

/* Roll zone bar - d100 scale with the landed roll marked */
.result-zonebar-wrap[b-7xswoz23zs] {
    position: relative;
    z-index: 5;
    margin-bottom: 1.5rem;
    animation: thresholdsReveal-b-7xswoz23zs 0.5s ease-out 0.8s both;
}

.result-zonebar[b-7xswoz23zs] {
    position: relative;
    display: flex;
    height: 0.65rem;
    border-radius: 999px;
    overflow: visible;
    margin: 1.4rem 0.25rem 0.6rem;
}

.result-zonebar .zone[b-7xswoz23zs] {
    height: 100%;
}

.result-zonebar .zone:first-child[b-7xswoz23zs] {
    border-radius: 999px 0 0 999px;
}

.result-zonebar .zone:nth-last-child(2)[b-7xswoz23zs] {
    border-radius: 0 999px 999px 0;
}

.zone-flop[b-7xswoz23zs] { background: rgba(var(--wl-red-rgb), 0.45); }
.zone-backfire[b-7xswoz23zs] { background: rgba(var(--wl-red-rgb), 0.75); }
.zone-neutral[b-7xswoz23zs] { background: rgba(var(--wl-text-secondary-rgb), 0.35); }
.zone-success[b-7xswoz23zs] { background: rgba(var(--wl-green-rgb), 0.5); }
.zone-viral[b-7xswoz23zs] { background: rgba(var(--wl-gold-rgb), 0.75); }

.zone-marker[b-7xswoz23zs] {
    position: absolute;
    top: -0.35rem;
    bottom: -0.35rem;
    width: 2px;
    background: var(--wl-text-primary);
    box-shadow: 0 0 8px rgba(var(--wl-contrast-rgb), 0.5);
    border-radius: 1px;
}

.zone-marker-value[b-7xswoz23zs] {
    position: absolute;
    top: -1.35rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--wl-text-primary);
}

.result-zonebar-legend[b-7xswoz23zs] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem 1rem;
}

.zone-legend[b-7xswoz23zs] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wl-text-muted);
    white-space: nowrap;
}

.zone-legend[b-7xswoz23zs]::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    margin-right: 0.35rem;
    vertical-align: -1px;
}

.zone-legend.flop[b-7xswoz23zs]::before { background: rgba(var(--wl-red-rgb), 0.45); }
.zone-legend.neutral[b-7xswoz23zs]::before { background: rgba(var(--wl-text-secondary-rgb), 0.35); }
.zone-legend.success[b-7xswoz23zs]::before { background: rgba(var(--wl-green-rgb), 0.5); }
.zone-legend.viral[b-7xswoz23zs]::before { background: rgba(var(--wl-gold-rgb), 0.75); }

/* Actions */
.result-actions[b-7xswoz23zs] {
    position: relative;
    z-index: 5;
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    animation: actionsReveal-b-7xswoz23zs 0.5s ease-out 0.9s both;
}

@keyframes actionsReveal-b-7xswoz23zs {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-button[b-7xswoz23zs] {
    padding: 0.875rem 3rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Outcome-specific button styles */
.result-modal.outcome-viral .result-button[b-7xswoz23zs] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, #b8960c 100%);
    color: var(--wl-bg-primary);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.4);
}

.result-modal.outcome-viral .result-button:hover[b-7xswoz23zs] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(var(--wl-gold-rgb), 0.5);
}

.result-modal.outcome-success .result-button[b-7xswoz23zs] {
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%);
    color: var(--wl-text-primary);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
}

.result-modal.outcome-success .result-button:hover[b-7xswoz23zs] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

.result-modal.outcome-neutral .result-button[b-7xswoz23zs] {
    background: linear-gradient(135deg, #9e9e9e 0%, #757575 100%);
    color: var(--wl-bg-primary);
    box-shadow: 0 4px 15px rgba(128, 128, 128, 0.3);
}

.result-modal.outcome-neutral .result-button:hover[b-7xswoz23zs] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(128, 128, 128, 0.4);
}

.result-modal.outcome-flop .result-button[b-7xswoz23zs] {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.2) 0%, rgba(244, 67, 54, 0.1) 100%);
    border: 1px solid rgba(244, 67, 54, 0.4);
    color: #e57373;
}

.result-modal.outcome-flop .result-button:hover[b-7xswoz23zs] {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.3) 0%, rgba(244, 67, 54, 0.15) 100%);
    border-color: rgba(244, 67, 54, 0.6);
}

.result-modal.outcome-backfire .result-button[b-7xswoz23zs] {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.3) 0%, rgba(139, 0, 0, 0.15) 100%);
    border: 1px solid rgba(139, 0, 0, 0.5);
    color: #ff6b6b;
}

.result-modal.outcome-backfire .result-button:hover[b-7xswoz23zs] {
    background: linear-gradient(135deg, rgba(139, 0, 0, 0.4) 0%, rgba(139, 0, 0, 0.2) 100%);
    border-color: rgba(139, 0, 0, 0.7);
}

/* Error state: a failed execution, not a real outcome. Amber "warning / retry" tone,
   distinct from the red flop/backfire results so players read it as a glitch to retry. */
.result-modal-overlay.outcome-error[b-7xswoz23zs] {
    background: radial-gradient(circle at center, rgba(245, 158, 11, 0.12) 0%, var(--wl-overlay-bg) 70%);
}

.result-modal.outcome-error[b-7xswoz23zs] {
    border-color: rgba(245, 158, 11, 0.45);
    box-shadow:
        0 0 40px rgba(245, 158, 11, 0.15),
        0 25px 50px -12px var(--wl-shadow-color);
}

.result-modal.outcome-error .result-corner[b-7xswoz23zs] { border-color: rgba(245, 158, 11, 0.5); }

.result-modal.outcome-error .result-glow[b-7xswoz23zs] {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.15) 0%, transparent 50%);
}

.result-modal.outcome-error .result-icon[b-7xswoz23zs] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-color: rgba(245, 158, 11, 0.45);
}

.result-modal.outcome-error .result-icon-svg[b-7xswoz23zs]  svg {
    color: #fbbf24;
}

.result-modal.outcome-error .result-title[b-7xswoz23zs] {
    color: #fbbf24;
}

.result-modal.outcome-error .result-button[b-7xswoz23zs] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, #b8960c 100%);
    color: var(--wl-bg-primary);
    box-shadow: 0 4px 15px rgba(var(--wl-gold-rgb), 0.3);
}

.result-modal.outcome-error .result-button:hover[b-7xswoz23zs] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--wl-gold-rgb), 0.4);
}

/* Secondary (dismiss) button sits beside the gold "Try again" primary */
.result-button.secondary[b-7xswoz23zs] {
    background: rgba(var(--wl-text-secondary-rgb), 0.12);
    color: var(--wl-text-secondary);
    border: 1px solid rgba(var(--wl-text-secondary-rgb), 0.25);
    box-shadow: none;
}

.result-button.secondary:hover[b-7xswoz23zs] {
    background: rgba(var(--wl-text-secondary-rgb), 0.2);
    color: var(--wl-text-primary);
    transform: translateY(-2px);
}

.result-button:active[b-7xswoz23zs] {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 640px) {
    .result-modal[b-7xswoz23zs] {
        max-width: 100%;
        margin: 0.5rem;
        padding: 1.5rem;
    }

    .result-icon[b-7xswoz23zs] {
        width: 64px;
        height: 64px;
    }

    .result-icon-svg[b-7xswoz23zs] {
        width: 28px;
        height: 28px;
    }

    .result-roll-value[b-7xswoz23zs] {
        font-size: 2rem;
    }

    .result-title[b-7xswoz23zs] {
        font-size: 1.5rem;
    }

    .result-headline-text[b-7xswoz23zs] {
        font-size: 1rem;
    }

    .result-thresholds[b-7xswoz23zs] {
        flex-wrap: wrap;
    }

    .result-effects[b-7xswoz23zs] {
        flex-direction: column;
    }

    .result-effect[b-7xswoz23zs] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Career/Promotion/SongSelectionModal.razor.rz.scp.css */
/* ============================================
   SONG SELECTION MODAL - AAA+ Premium Design
   Theme: Dark luxury with gold accents
   ============================================ */

/* Overlay */
.song-modal-overlay[b-6j1ja97fg0] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px 20px;
    animation: overlayFadeIn-b-6j1ja97fg0 0.2s ease-out;
    overflow-y: auto;
}

@keyframes overlayFadeIn-b-6j1ja97fg0 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Container */
.song-modal[b-6j1ja97fg0] {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 100px);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%);
    border: 1px solid var(--wl-gold-border);
    animation: modalSlideUp-b-6j1ja97fg0 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-shadow:
        0 0 0 1px var(--wl-shadow-color),
        0 25px 80px var(--wl-shadow-color),
        0 0 100px rgba(var(--wl-gold-rgb), 0.05);
    display: flex;
    flex-direction: column;
}

@keyframes modalSlideUp-b-6j1ja97fg0 {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Corner decorations */
.song-modal-corner[b-6j1ja97fg0] {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    border-style: solid;
    pointer-events: none;
    z-index: 2;
}

.song-modal-corner-tl[b-6j1ja97fg0] {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}

.song-modal-corner-tr[b-6j1ja97fg0] {
    top: -1px;
    right: -1px;
    border-width: 2px 2px 0 0;
}

.song-modal-corner-bl[b-6j1ja97fg0] {
    bottom: -1px;
    left: -1px;
    border-width: 0 0 2px 2px;
}

.song-modal-corner-br[b-6j1ja97fg0] {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
}

/* Edge accents */
.song-modal-edge[b-6j1ja97fg0] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 20%,
        rgba(var(--wl-gold-rgb), 0.6) 50%,
        rgba(var(--wl-gold-rgb), 0.4) 80%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 2;
}

.song-modal-edge-top[b-6j1ja97fg0] {
    top: 0;
}

.song-modal-edge-bottom[b-6j1ja97fg0] {
    bottom: 0;
}

/* Close button */
.song-modal-close[b-6j1ja97fg0] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    color: rgba(163, 163, 163, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.song-modal-close:hover[b-6j1ja97fg0] {
    background: var(--wl-gold-bg);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.song-modal-close[b-6j1ja97fg0]  svg {
    width: 100%;
    height: 100%;
}

/* Header */
.song-modal-header[b-6j1ja97fg0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 28px 48px 20px;
    border-bottom: 1px solid var(--wl-gold-bg-hover);
    flex-shrink: 0;
}

.song-modal-title[b-6j1ja97fg0] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-gold);
    margin: 0;
    text-shadow: 0 0 30px rgba(var(--wl-gold-rgb), 0.4);
}

.song-modal-title-decoration[b-6j1ja97fg0] {
    flex: 1;
    max-width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.4));
}

.song-modal-title-decoration:last-child[b-6j1ja97fg0] {
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.4), transparent);
}

/* Content */
.song-modal-content[b-6j1ja97fg0] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.song-modal-subtitle[b-6j1ja97fg0] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.875rem;
    margin: 0 0 1.5rem 0;
    text-align: center;
}

/* Loading State */
.song-modal-loading[b-6j1ja97fg0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 1rem;
    color: var(--wl-text-muted);
}

.song-modal-spinner[b-6j1ja97fg0] {
    width: 40px;
    height: 40px;
    border: 3px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-6j1ja97fg0 1s linear infinite;
}

@keyframes spin-b-6j1ja97fg0 {
    to { transform: rotate(360deg); }
}

/* Empty State */
.song-modal-empty[b-6j1ja97fg0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.song-modal-empty-icon[b-6j1ja97fg0] {
    width: 64px;
    height: 64px;
    color: rgba(var(--wl-gold-rgb), 0.3);
    margin-bottom: 1rem;
}

.song-modal-empty-icon[b-6j1ja97fg0]  svg {
    width: 100%;
    height: 100%;
}

.song-modal-empty p[b-6j1ja97fg0] {
    color: var(--wl-text-muted);
    margin: 0;
}

/* Divider */
.song-modal-divider[b-6j1ja97fg0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
}

.song-modal-divider[b-6j1ja97fg0]::before,
.song-modal-divider[b-6j1ja97fg0]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--wl-border-medium), transparent);
}

.song-modal-divider span[b-6j1ja97fg0] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Song List */
.song-list[b-6j1ja97fg0] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Song Option */
.song-option[b-6j1ja97fg0] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(var(--wl-bg-modal-rgb), 0.95) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.song-option:hover[b-6j1ja97fg0] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: var(--wl-border-medium);
}

.song-option.selected[b-6j1ja97fg0] {
    background: linear-gradient(135deg, var(--wl-gold-bg) 0%, rgba(var(--wl-gold-rgb), 0.03) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.song-option.selected:hover[b-6j1ja97fg0] {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
}

/* Radio Button */
.song-option-radio[b-6j1ja97fg0] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.song-option.selected .song-option-radio[b-6j1ja97fg0] {
    border-color: var(--wl-gold);
}

.song-option-radio-checked[b-6j1ja97fg0] {
    width: 10px;
    height: 10px;
    background: var(--wl-gold);
    border-radius: 50%;
    animation: radioCheck-b-6j1ja97fg0 0.2s ease-out;
}

@keyframes radioCheck-b-6j1ja97fg0 {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

/* Track Number */
.song-option-number[b-6j1ja97fg0] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    flex-shrink: 0;
}

.song-option.selected .song-option-number[b-6j1ja97fg0] {
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
}

/* Icon for whole release */
.song-option-icon[b-6j1ja97fg0] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.song-option-icon.whole-release[b-6j1ja97fg0] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.2) 0%, rgba(var(--wl-purple-rgb), 0.1) 100%);
    color: var(--wl-purple);
}

.song-option.selected .song-option-icon.whole-release[b-6j1ja97fg0] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.3) 0%, rgba(var(--wl-purple-rgb), 0.15) 100%);
}

.song-option-icon[b-6j1ja97fg0]  svg {
    width: 20px;
    height: 20px;
}

/* Song Info */
.song-option-info[b-6j1ja97fg0] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.song-option-title[b-6j1ja97fg0] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-option.selected .song-option-title[b-6j1ja97fg0] {
    color: var(--wl-gold);
}

.song-option-subtitle[b-6j1ja97fg0] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.song-option-meta[b-6j1ja97fg0] {
    display: flex;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.song-meta-genre[b-6j1ja97fg0] {
    padding: 0.125rem 0.375rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 4px;
}

/* Badge */
.song-option-badge[b-6j1ja97fg0] {
    padding: 0.25rem 0.625rem;
    background: rgba(var(--wl-purple-rgb), 0.15);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.3);
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--wl-purple);
    flex-shrink: 0;
}

/* Quality Stars */
.song-option-quality[b-6j1ja97fg0] {
    flex-shrink: 0;
}

.quality-stars[b-6j1ja97fg0] {
    display: flex;
    gap: 2px;
}

.quality-star[b-6j1ja97fg0] {
    width: 14px;
    height: 14px;
    color: rgba(var(--wl-contrast-rgb), 0.15);
}

.quality-star.full[b-6j1ja97fg0] {
    color: var(--wl-gold);
}

.quality-star.half[b-6j1ja97fg0] {
    color: rgba(var(--wl-gold-rgb), 0.5);
}

.quality-star[b-6j1ja97fg0]  svg {
    width: 100%;
    height: 100%;
}

/* Momentum */
.song-option-momentum[b-6j1ja97fg0] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
    min-width: 80px;
}

.momentum-label[b-6j1ja97fg0] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.momentum-bar-container[b-6j1ja97fg0] {
    width: 100%;
    height: 4px;
    background: var(--wl-border-medium);
    border-radius: 2px;
    overflow: hidden;
}

.momentum-bar[b-6j1ja97fg0] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.momentum-value[b-6j1ja97fg0] {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    font-variant-numeric: tabular-nums;
}

/* Footer */
.song-modal-footer[b-6j1ja97fg0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px 24px;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    flex-shrink: 0;
}

/* Buttons */
.song-modal-btn[b-6j1ja97fg0] {
    padding: 10px 24px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s;
}

.song-modal-btn-primary[b-6j1ja97fg0] {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

.song-modal-btn-primary:hover:not(:disabled)[b-6j1ja97fg0] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.25) 0%, var(--wl-gold-bg) 100%);
    border-color: var(--wl-gold);
    box-shadow: 0 0 20px var(--wl-gold-border);
}

.song-modal-btn-primary:disabled[b-6j1ja97fg0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.song-modal-btn-secondary[b-6j1ja97fg0] {
    background: transparent;
    border-color: var(--wl-border-medium);
    color: rgba(163, 163, 163, 0.8);
}

.song-modal-btn-secondary:hover[b-6j1ja97fg0] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

/* Responsive */
@media (max-width: 640px) {
    .song-modal-overlay[b-6j1ja97fg0] {
        padding: 70px 12px 12px;
    }

    .song-modal[b-6j1ja97fg0] {
        max-height: calc(100vh - 50px);
    }

    .song-modal-header[b-6j1ja97fg0] {
        padding: 20px 24px 16px;
    }

    .song-modal-title[b-6j1ja97fg0] {
        font-size: 22px;
    }

    .song-modal-content[b-6j1ja97fg0] {
        padding: 16px;
    }

    .song-option[b-6j1ja97fg0] {
        flex-wrap: wrap;
        padding: 0.875rem;
    }

    .song-option-quality[b-6j1ja97fg0],
    .song-option-momentum[b-6j1ja97fg0] {
        display: none;
    }

    .song-modal-footer[b-6j1ja97fg0] {
        padding: 12px 16px 16px;
        flex-direction: column;
    }

    .song-modal-btn[b-6j1ja97fg0] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Career/Wonderfeet/Index.razor.rz.scp.css */
.wonderfeet-page[b-23qf9cb36k] {
    display: grid;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 9rem;
    color: var(--wl-text-primary);
    letter-spacing: 0;
}

.wonderfeet-hero[b-23qf9cb36k],
.wonderfeet-onboarding[b-23qf9cb36k],
.wonderfeet-panel[b-23qf9cb36k],
.wonderfeet-report[b-23qf9cb36k],
.wonderfeet-control-strip article[b-23qf9cb36k] {
    border: 1px solid rgba(var(--wl-border-rgb), 0.7);
    background: rgba(var(--wl-bg-secondary-rgb), 0.82);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
}

.wonderfeet-hero[b-23qf9cb36k] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 2rem;
    align-items: stretch;
    overflow: hidden;
    min-height: 340px;
    padding: 2rem;
    border-radius: 8px;
    border-color: rgba(var(--wl-gold-rgb), 0.24);
    background:
        linear-gradient(90deg, rgba(41, 166, 159, 0.11), transparent 36%),
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.16), rgba(var(--wl-bg-secondary-rgb), 0.86));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34), inset 0 0 90px rgba(0, 0, 0, 0.22);
}

.wonderfeet-hero[b-23qf9cb36k]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.82), transparent 82%);
}

.wonderfeet-hero-copy[b-23qf9cb36k],
.wonderfeet-hero-stage[b-23qf9cb36k] {
    position: relative;
    z-index: 1;
}

.wonderfeet-hero-copy[b-23qf9cb36k] {
    align-self: center;
}

.wonderfeet-kicker[b-23qf9cb36k],
.wonderfeet-hero-metric span[b-23qf9cb36k],
.wonderfeet-control-strip span[b-23qf9cb36k],
.wonderfeet-request span[b-23qf9cb36k],
.wonderfeet-drop-card span[b-23qf9cb36k],
.wonderfeet-drop-history span[b-23qf9cb36k],
.wonderfeet-report-grid span[b-23qf9cb36k] {
    color: var(--wl-text-secondary);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0;
}

.wonderfeet-kicker[b-23qf9cb36k] {
    display: inline-flex;
    color: var(--wl-gold);
    font-weight: 800;
}

.wonderfeet-hero h1[b-23qf9cb36k],
.wonderfeet-onboarding h2[b-23qf9cb36k],
.wonderfeet-section-head h2[b-23qf9cb36k],
.wonderfeet-report h2[b-23qf9cb36k] {
    margin: 0.25rem 0 0;
    color: var(--wl-text-primary);
}

.wonderfeet-hero h1[b-23qf9cb36k] {
    max-width: 11ch;
    margin: 0.7rem 0 0.75rem;
    color: #fff7d7;
    font-size: 3.4rem;
    line-height: 0.95;
    font-weight: 900;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.wonderfeet-hero p[b-23qf9cb36k],
.wonderfeet-onboarding p[b-23qf9cb36k],
.wonderfeet-request p[b-23qf9cb36k],
.wonderfeet-empty[b-23qf9cb36k] {
    color: var(--wl-text-secondary);
    margin: 0.5rem 0 0;
}

.wonderfeet-hero-stage[b-23qf9cb36k] {
    display: grid;
    place-items: center;
}

.wonderfeet-vault-screen[b-23qf9cb36k] {
    width: min(100%, 430px);
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(41, 166, 159, 0.36);
    background: linear-gradient(145deg, rgba(3, 7, 18, 0.96), rgba(15, 23, 42, 0.82));
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42), inset 0 0 34px rgba(41, 166, 159, 0.08);
}

.wonderfeet-vault-top[b-23qf9cb36k] {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
}

.wonderfeet-vault-top span[b-23qf9cb36k] {
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    background: rgba(var(--wl-gold-rgb), 0.78);
}

.wonderfeet-vault-frame[b-23qf9cb36k] {
    min-height: 170px;
    display: grid;
    align-content: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    background:
        linear-gradient(135deg, rgba(41, 166, 159, 0.2), rgba(244, 114, 182, 0.08)),
        #020617;
}

.wonderfeet-vault-frame strong[b-23qf9cb36k] {
    color: var(--wl-gold);
    font-size: clamp(1.6rem, 4vw, 2.4rem);
}

.wonderfeet-status-pill[b-23qf9cb36k] {
    width: fit-content;
    padding: 0.35rem 0.6rem;
    border-radius: 8px;
    color: #7dd3fc;
    background: rgba(14, 165, 233, 0.14);
    border: 1px solid rgba(14, 165, 233, 0.3);
    font-weight: 800;
}

.wonderfeet-vault-lines[b-23qf9cb36k] {
    display: grid;
    gap: 0.45rem;
}

.wonderfeet-vault-lines span[b-23qf9cb36k] {
    display: block;
    height: 0.55rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
}

.wonderfeet-vault-lines span:nth-child(2)[b-23qf9cb36k] {
    width: 74%;
}

.wonderfeet-vault-lines span:nth-child(3)[b-23qf9cb36k] {
    width: 48%;
}

.wonderfeet-vault-stats[b-23qf9cb36k] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.wonderfeet-vault-stats span[b-23qf9cb36k] {
    display: grid;
    gap: 0.2rem;
    padding: 0.7rem;
    border-radius: 8px;
    color: rgba(var(--wl-contrast-rgb), 0.62);
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.wonderfeet-vault-stats strong[b-23qf9cb36k] {
    color: var(--wl-gold);
    font-size: 1rem;
}

.wonderfeet-state[b-23qf9cb36k],
.wonderfeet-error[b-23qf9cb36k] {
    padding: 1rem;
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.9);
}

.wonderfeet-error[b-23qf9cb36k] {
    color: #ff9f9f;
    border: 1px solid rgba(255, 120, 120, 0.35);
}

.wonderfeet-onboarding[b-23qf9cb36k] {
    display: grid;
    grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr);
    gap: 1.25rem;
    padding: 1.5rem;
    border-radius: 8px;
}

.wonderfeet-preview[b-23qf9cb36k] {
    display: grid;
    gap: 0.5rem;
    align-content: center;
    min-height: 14rem;
    padding: 1.25rem;
    border-radius: 8px;
    color: var(--wl-text-primary);
    background:
        linear-gradient(140deg, rgba(var(--wl-gold-rgb), 0.14), rgba(41, 166, 159, 0.16)),
        rgba(var(--wl-bg-tertiary-rgb), 0.92);
}

.wonderfeet-preview strong[b-23qf9cb36k] {
    font-size: clamp(1.5rem, 4vw, 2.4rem);
}

.wonderfeet-field[b-23qf9cb36k] {
    display: grid;
    gap: 0.4rem;
    margin: 1rem 0;
    color: var(--wl-text-secondary);
}

.wonderfeet-field input[b-23qf9cb36k] {
    width: 100%;
    min-height: 2.8rem;
    border: 1px solid rgba(var(--wl-border-rgb), 0.8);
    border-radius: 8px;
    padding: 0 0.9rem;
    color: var(--wl-text-primary);
    background: rgba(var(--wl-bg-tertiary-rgb), 0.9);
}

.wonderfeet-field small[b-23qf9cb36k] {
    color: var(--wl-text-secondary);
}

.wonderfeet-primary[b-23qf9cb36k],
.wonderfeet-secondary[b-23qf9cb36k],
.wonderfeet-drop-card[b-23qf9cb36k] {
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.wonderfeet-primary[b-23qf9cb36k],
.wonderfeet-secondary[b-23qf9cb36k] {
    min-height: 2.5rem;
    padding: 0 1rem;
    font-weight: 700;
}

.wonderfeet-primary[b-23qf9cb36k] {
    color: #16120a;
    background: var(--wl-gold);
}

.wonderfeet-secondary[b-23qf9cb36k] {
    color: var(--wl-text-primary);
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border: 1px solid rgba(var(--wl-border-rgb), 0.7);
}

.wonderfeet-primary:disabled[b-23qf9cb36k],
.wonderfeet-secondary:disabled[b-23qf9cb36k],
.wonderfeet-drop-card:disabled[b-23qf9cb36k] {
    cursor: wait;
    opacity: 0.6;
}

.wonderfeet-control-strip[b-23qf9cb36k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.75rem;
}

.wonderfeet-control-strip article[b-23qf9cb36k] {
    display: grid;
    gap: 0.25rem;
    padding: 1rem;
    border-radius: 8px;
}

.wonderfeet-control-strip strong[b-23qf9cb36k] {
    font-size: 1.35rem;
    color: var(--wl-text-primary);
}

.wonderfeet-meter[b-23qf9cb36k] {
    width: 100%;
    height: 0.45rem;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(var(--wl-contrast-rgb), 0.08);
}

.wonderfeet-meter[b-23qf9cb36k]::-webkit-meter-bar {
    border: 0;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
}

.wonderfeet-meter[b-23qf9cb36k]::-webkit-meter-optimum-value {
    border-radius: 999px;
    background: linear-gradient(90deg, #29a69f, var(--wl-gold));
}

.wonderfeet-meter--danger[b-23qf9cb36k]::-webkit-meter-optimum-value {
    background: linear-gradient(90deg, #f97316, #f43f5e);
}

.wonderfeet-report[b-23qf9cb36k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.9fr);
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 8px;
}

.wonderfeet-report-grid[b-23qf9cb36k] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.wonderfeet-report-grid span[b-23qf9cb36k],
.wonderfeet-breakdown span[b-23qf9cb36k] {
    display: grid;
    gap: 0.2rem;
    padding: 0.8rem;
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.wonderfeet-report-grid strong[b-23qf9cb36k] {
    color: var(--wl-gold);
    font-size: 1.25rem;
}

.wonderfeet-breakdown[b-23qf9cb36k] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.5rem;
}

.wonderfeet-breakdown span[b-23qf9cb36k] {
    padding: 0.65rem;
}

.wonderfeet-breakdown strong[b-23qf9cb36k] {
    color: var(--wl-text-primary);
}

.wonderfeet-workbench[b-23qf9cb36k] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.72fr);
    gap: 1rem;
}

.wonderfeet-panel[b-23qf9cb36k] {
    padding: 1.25rem;
    border-radius: 8px;
}

.wonderfeet-request-inbox[b-23qf9cb36k] {
    align-self: start;
}

.wonderfeet-section-head[b-23qf9cb36k] {
    display: grid;
    gap: 0.15rem;
    margin-bottom: 1rem;
}

.wonderfeet-drop-grid[b-23qf9cb36k] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.wonderfeet-drop-card[b-23qf9cb36k] {
    min-height: 8.5rem;
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: 1rem;
    text-align: left;
    color: var(--wl-text-primary);
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border: 1px solid rgba(var(--wl-border-rgb), 0.7);
}

.wonderfeet-drop-card:hover[b-23qf9cb36k],
.wonderfeet-request:hover[b-23qf9cb36k],
.wonderfeet-drop-history article:hover[b-23qf9cb36k] {
    border-color: rgba(var(--wl-gold-rgb), 0.7);
}

.wonderfeet-drop-card strong[b-23qf9cb36k] {
    color: var(--wl-text-primary);
    font-weight: 600;
}

.wonderfeet-drop-card small[b-23qf9cb36k],
.wonderfeet-drop-card em[b-23qf9cb36k],
.wonderfeet-request small[b-23qf9cb36k],
.wonderfeet-drop-history small[b-23qf9cb36k] {
    color: var(--wl-text-secondary);
}

.wonderfeet-drop-card em[b-23qf9cb36k] {
    font-style: normal;
    font-size: 0.78rem;
}

.wonderfeet-request-list[b-23qf9cb36k],
.wonderfeet-drop-history[b-23qf9cb36k] {
    display: grid;
    gap: 0.75rem;
}

.wonderfeet-request[b-23qf9cb36k],
.wonderfeet-drop-history article[b-23qf9cb36k] {
    display: grid;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.055);
    border: 1px solid rgba(var(--wl-border-rgb), 0.65);
}

.wonderfeet-request-actions[b-23qf9cb36k] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 1000px) {
    .wonderfeet-control-strip[b-23qf9cb36k] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .wonderfeet-workbench[b-23qf9cb36k],
    .wonderfeet-report[b-23qf9cb36k],
    .wonderfeet-onboarding[b-23qf9cb36k],
    .wonderfeet-hero[b-23qf9cb36k] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .wonderfeet-page[b-23qf9cb36k] {
        padding: 1rem 1rem 6rem;
    }

    .wonderfeet-control-strip[b-23qf9cb36k],
    .wonderfeet-drop-grid[b-23qf9cb36k],
    .wonderfeet-report-grid[b-23qf9cb36k],
    .wonderfeet-vault-stats[b-23qf9cb36k] {
        grid-template-columns: 1fr;
    }

    .wonderfeet-hero h1[b-23qf9cb36k] {
        font-size: 2.6rem;
    }
}
/* /Components/Pages/Character/Actions/Index.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   ACTION CENTER - Command Center Design
   A sophisticated mission control aesthetic for managing character actions
   ═══════════════════════════════════════════════════════════════════════════ */

/* ============================================
   ROOT CONTAINER
   ============================================ */
.cmd-center[b-1mmkfvda4m] {
    position: relative;
    min-height: 100vh;
    padding: 1.5rem;
    font-family: 'Source Sans 3', -apple-system, sans-serif;
    overflow: hidden;
}

/* ============================================
   ATMOSPHERIC BACKGROUND
   ============================================ */
.cmd-atmosphere[b-1mmkfvda4m] {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(165deg, var(--wl-bg-primary) 0%, var(--wl-bg-primary) 40%, var(--wl-bg-primary) 100%);
}

.cmd-gradient-orb[b-1mmkfvda4m] {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0;
    animation: orbFade-b-1mmkfvda4m 1.5s ease-out 0.3s forwards;
}

.cmd-gradient-orb--gold[b-1mmkfvda4m] {
    width: 600px;
    height: 600px;
    top: -200px;
    right: -100px;
    background: radial-gradient(circle, var(--wl-gold-bg-hover) 0%, transparent 70%);
}

.cmd-gradient-orb--violet[b-1mmkfvda4m] {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(var(--wl-purple-rgb), 0.08) 0%, transparent 70%);
}

@keyframes orbFade-b-1mmkfvda4m {
    to { opacity: 1; }
}

.cmd-scanline[b-1mmkfvda4m] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-contrast-rgb), 0.01) 2px,
        rgba(var(--wl-contrast-rgb), 0.01) 4px
    );
    animation: scanlineMove-b-1mmkfvda4m 8s linear infinite;
}

@keyframes scanlineMove-b-1mmkfvda4m {
    0% { background-position: 0 0; }
    100% { background-position: 0 100px; }
}

.cmd-noise[b-1mmkfvda4m] {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ============================================
   BOOT / LOADING STATE
   ============================================ */
.cmd-boot[b-1mmkfvda4m] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    z-index: 100;
}

.cmd-boot-ring[b-1mmkfvda4m] {
    width: 80px;
    height: 80px;
    position: relative;
}

.cmd-boot-ring[b-1mmkfvda4m]::before,
.cmd-boot-ring[b-1mmkfvda4m]::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid transparent;
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: bootSpin-b-1mmkfvda4m 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.cmd-boot-ring[b-1mmkfvda4m]::after {
    inset: 10px;
    border-top-color: rgba(var(--wl-gold-rgb), 0.3);
    animation-delay: 0.15s;
}

@keyframes bootSpin-b-1mmkfvda4m {
    to { transform: rotate(360deg); }
}

.cmd-boot-text[b-1mmkfvda4m] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.4em;
    color: rgba(var(--wl-gold-rgb), 0.5);
    animation: bootPulse-b-1mmkfvda4m 1.5s ease-in-out infinite;
}

@keyframes bootPulse-b-1mmkfvda4m {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* ============================================
   OFFLINE STATE
   ============================================ */
.cmd-offline[b-1mmkfvda4m] {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 10;
}

.cmd-offline-icon[b-1mmkfvda4m] {
    color: rgba(var(--wl-gold-rgb), 0.3);
}

.cmd-offline-icon :deep(svg)[b-1mmkfvda4m] {
    width: 48px;
    height: 48px;
}

.cmd-offline-label[b-1mmkfvda4m] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    color: rgba(var(--wl-text-secondary-rgb), 0.5);
}

/* ============================================
   HEADER
   ============================================ */
.cmd-header[b-1mmkfvda4m] {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 0 0.5rem;
    opacity: 0;
    transform: translateY(-10px);
}

.cmd-center--ready .cmd-header[b-1mmkfvda4m] {
    animation: headerReveal-b-1mmkfvda4m 0.6s ease-out 0.2s forwards;
}

@keyframes headerReveal-b-1mmkfvda4m {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cmd-header-line[b-1mmkfvda4m] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.3), transparent);
}

.cmd-header-content[b-1mmkfvda4m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.cmd-header-tag[b-1mmkfvda4m] {
    font-size: 0.625rem;
    letter-spacing: 0.3em;
    color: rgba(var(--wl-gold-rgb), 0.5);
    text-transform: uppercase;
}

.cmd-header-title[b-1mmkfvda4m] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: var(--wl-text-primary);
    margin: 0;
}

/* ============================================
   DASHBOARD LAYOUT
   ============================================ */
.cmd-dashboard[b-1mmkfvda4m] {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .cmd-dashboard[b-1mmkfvda4m] {
        grid-template-columns: 280px 1fr;
        gap: 2rem;
    }
}

/* ============================================
   ENERGY GAUGE SECTION
   ============================================ */
.cmd-gauge-section[b-1mmkfvda4m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
}

.cmd-center--ready .cmd-gauge-section[b-1mmkfvda4m] {
    animation: sectionReveal-b-1mmkfvda4m 0.6s ease-out 0.4s forwards;
}

@keyframes sectionReveal-b-1mmkfvda4m {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cmd-gauge[b-1mmkfvda4m] {
    position: relative;
    width: 220px;
    height: 220px;
}

.cmd-gauge-ring[b-1mmkfvda4m] {
    width: 100%;
    height: 100%;
}

.cmd-gauge-arc[b-1mmkfvda4m] {
    filter: drop-shadow(0 0 8px rgba(var(--wl-gold-rgb), 0.4));
    transition: stroke-dasharray 0.5s ease-out;
}

.cmd-gauge-center[b-1mmkfvda4m] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.cmd-gauge-label[b-1mmkfvda4m] {
    font-size: 0.625rem;
    letter-spacing: 0.25em;
    color: rgba(var(--wl-text-secondary-rgb), 0.5);
    text-transform: uppercase;
}

.cmd-gauge-value[b-1mmkfvda4m] {
    display: flex;
    align-items: baseline;
}

.cmd-gauge-current[b-1mmkfvda4m] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    color: var(--wl-gold);
    line-height: 1;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.3);
}

.cmd-gauge-max[b-1mmkfvda4m] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: rgba(var(--wl-text-secondary-rgb), 0.4);
}

.cmd-gauge-regen[b-1mmkfvda4m] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: rgba(var(--wl-gold-rgb), 0.6);
    font-size: 0.75rem;
}

.cmd-gauge-regen :deep(svg)[b-1mmkfvda4m] {
    width: 12px;
    height: 12px;
}

/* ============================================
   STATS
   ============================================ */
.cmd-stats[b-1mmkfvda4m] {
    display: flex;
    gap: 1rem;
}

.cmd-stat[b-1mmkfvda4m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 8px;
}

.cmd-stat--full[b-1mmkfvda4m] {
    border-color: var(--wl-gold-border);
    background: rgba(var(--wl-gold-rgb), 0.05);
}

.cmd-stat-label[b-1mmkfvda4m] {
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    color: rgba(var(--wl-text-secondary-rgb), 0.5);
    text-transform: uppercase;
}

.cmd-stat-value[b-1mmkfvda4m] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.cmd-stat--full .cmd-stat-value[b-1mmkfvda4m] {
    color: var(--wl-gold);
}

.cmd-stat-unit[b-1mmkfvda4m] {
    font-size: 0.875rem;
    color: rgba(var(--wl-text-secondary-rgb), 0.5);
    margin-left: 2px;
}

/* ============================================
   FREE ACTIONS BONUS
   ============================================ */
.cmd-bonus[b-1mmkfvda4m] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold-bg) 0%, rgba(184, 134, 11, 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 10px;
    overflow: hidden;
}

.cmd-bonus-icon[b-1mmkfvda4m] {
    color: var(--wl-gold);
    animation: bonusStar-b-1mmkfvda4m 3s ease-in-out infinite;
}

.cmd-bonus-icon :deep(svg)[b-1mmkfvda4m] {
    width: 20px;
    height: 20px;
}

@keyframes bonusStar-b-1mmkfvda4m {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        filter: drop-shadow(0 0 4px rgba(var(--wl-gold-rgb), 0.4));
    }
    50% {
        transform: scale(1.1) rotate(10deg);
        filter: drop-shadow(0 0 8px rgba(var(--wl-gold-rgb), 0.8));
    }
}

.cmd-bonus-content[b-1mmkfvda4m] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.cmd-bonus-count[b-1mmkfvda4m] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-gold);
    line-height: 1;
}

.cmd-bonus-label[b-1mmkfvda4m] {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-gold-rgb), 0.7);
    text-transform: uppercase;
}

.cmd-bonus-pulse[b-1mmkfvda4m] {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 50%, var(--wl-gold-bg-hover) 0%, transparent 60%);
    animation: bonusPulse-b-1mmkfvda4m 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bonusPulse-b-1mmkfvda4m {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ============================================
   QUEUE SECTION
   ============================================ */
.cmd-queue-section[b-1mmkfvda4m] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    background: linear-gradient(180deg, rgba(var(--wl-bg-modal-rgb), 0.6) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.8) 100%);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(20px);
}

.cmd-center--ready .cmd-queue-section[b-1mmkfvda4m] {
    animation: sectionReveal-b-1mmkfvda4m 0.6s ease-out 0.5s forwards;
}

.cmd-queue-header[b-1mmkfvda4m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.cmd-queue-indicator[b-1mmkfvda4m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.cmd-queue-dot[b-1mmkfvda4m] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(var(--wl-text-secondary-rgb), 0.3);
    transition: all 0.3s ease;
}

.cmd-queue-dot--active[b-1mmkfvda4m] {
    background: var(--wl-gold);
    box-shadow: 0 0 12px rgba(var(--wl-gold-rgb), 0.6);
    animation: queueDotPulse-b-1mmkfvda4m 2s ease-in-out infinite;
}

@keyframes queueDotPulse-b-1mmkfvda4m {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--wl-gold-rgb), 0.4); }
    50% { box-shadow: 0 0 16px rgba(var(--wl-gold-rgb), 0.8); }
}

.cmd-queue-title[b-1mmkfvda4m] {
    text-transform: uppercase;
    flex: 1;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin: 0;
}

.cmd-queue-count[b-1mmkfvda4m] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    color: rgba(var(--wl-text-secondary-rgb), 0.5);
    letter-spacing: 0.05em;
}

/* ============================================
   QUEUE BODY
   ============================================ */
.cmd-queue-body[b-1mmkfvda4m] {
    flex: 1;
    min-height: 200px;
}

/* Empty state */
.cmd-queue-empty[b-1mmkfvda4m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    gap: 0.75rem;
}

.cmd-queue-empty-visual[b-1mmkfvda4m] {
    color: var(--wl-gold-bg-hover);
    animation: emptyRotate-b-1mmkfvda4m 20s linear infinite;
}

.cmd-queue-empty-visual :deep(svg)[b-1mmkfvda4m] {
    width: 60px;
    height: 60px;
}

@keyframes emptyRotate-b-1mmkfvda4m {
    to { transform: rotate(360deg); }
}

.cmd-queue-empty-text[b-1mmkfvda4m] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.2em;
    color: rgba(var(--wl-text-secondary-rgb), 0.5);
}

.cmd-queue-empty-hint[b-1mmkfvda4m] {
    font-size: 0.75rem;
    color: rgba(var(--wl-text-secondary-rgb), 0.35);
    text-align: center;
    max-width: 200px;
}

/* ============================================
   QUEUE TIMELINE
   ============================================ */
.cmd-queue-timeline[b-1mmkfvda4m] {
    display: flex;
    flex-direction: column;
}

.cmd-action[b-1mmkfvda4m] {
    display: flex;
    gap: 1rem;
    opacity: 0;
    transform: translateX(-10px);
}

.cmd-center--ready .cmd-action[b-1mmkfvda4m] {
    animation: actionReveal-b-1mmkfvda4m 0.4s ease-out forwards;
    animation-delay: calc(0.6s + var(--index, 0) * 0.1s);
}

@keyframes actionReveal-b-1mmkfvda4m {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.cmd-action-timeline[b-1mmkfvda4m] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
    flex-shrink: 0;
}

.cmd-action-node[b-1mmkfvda4m] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.cmd-action-pulse[b-1mmkfvda4m] {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--wl-gold-border);
    animation: nodePulse-b-1mmkfvda4m 2s ease-out infinite;
}

@keyframes nodePulse-b-1mmkfvda4m {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

.cmd-action-dot[b-1mmkfvda4m] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(var(--wl-text-secondary-rgb), 0.3);
    border: 2px solid rgba(var(--wl-text-secondary-rgb), 0.2);
    transition: all 0.3s ease;
}

.cmd-action--active .cmd-action-dot[b-1mmkfvda4m] {
    background: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    box-shadow: 0 0 8px rgba(var(--wl-gold-rgb), 0.5);
}

.cmd-action-line[b-1mmkfvda4m] {
    flex: 1;
    width: 2px;
    min-height: 20px;
    background: linear-gradient(180deg, rgba(var(--wl-text-secondary-rgb), 0.2) 0%, rgba(var(--wl-text-secondary-rgb), 0.05) 100%);
    margin: 4px 0;
}

/* ============================================
   ACTION CARD
   ============================================ */
.cmd-action-card[b-1mmkfvda4m] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 8px;
    margin-bottom: 0.75rem;
    transition: all 0.3s ease;
}

.cmd-action-card:hover[b-1mmkfvda4m] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-color: var(--wl-border-medium);
}

.cmd-action--active .cmd-action-card[b-1mmkfvda4m] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.06) 0%, rgba(184, 134, 11, 0.03) 100%);
    border-color: var(--wl-gold-bg-hover);
}

.cmd-action-header[b-1mmkfvda4m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cmd-action-name[b-1mmkfvda4m] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    letter-spacing: 0.03em;
}

.cmd-action--active .cmd-action-name[b-1mmkfvda4m] {
    color: var(--wl-gold);
}

.cmd-action-cancel[b-1mmkfvda4m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--wl-border-medium);
    border-radius: 4px;
    color: rgba(var(--wl-text-secondary-rgb), 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cmd-action-cancel:hover[b-1mmkfvda4m] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border-color: rgba(var(--wl-red-rgb), 0.3);
    color: #ef4444;
}

.cmd-action-cancel :deep(svg)[b-1mmkfvda4m] {
    width: 12px;
    height: 12px;
}

.cmd-action-footer[b-1mmkfvda4m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cmd-action-badge[b-1mmkfvda4m] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.cmd-action-badge--active[b-1mmkfvda4m] {
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
}

.cmd-action-badge--queued[b-1mmkfvda4m] {
    background: rgba(var(--wl-text-secondary-rgb), 0.1);
    color: rgba(var(--wl-text-secondary-rgb), 0.6);
}

.cmd-action-badge-dot[b-1mmkfvda4m] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wl-gold);
    animation: badgeDotPulse-b-1mmkfvda4m 1s ease-in-out infinite;
}

@keyframes badgeDotPulse-b-1mmkfvda4m {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.cmd-action-time[b-1mmkfvda4m] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-gold);
    letter-spacing: 0.05em;
}

.cmd-action-duration[b-1mmkfvda4m] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: rgba(var(--wl-text-secondary-rgb), 0.5);
}

.cmd-action-duration :deep(svg)[b-1mmkfvda4m] {
    width: 12px;
    height: 12px;
}

/* Progress bar */
.cmd-action-progress[b-1mmkfvda4m] {
    height: 3px;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.cmd-action-progress-bar[b-1mmkfvda4m] {
    height: 100%;
    background: linear-gradient(90deg, #B8860B, var(--wl-gold));
    border-radius: 2px;
    transition: width 1s linear;
}

/* ============================================
   QUEUE CAPACITY
   ============================================ */
.cmd-queue-capacity[b-1mmkfvda4m] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.cmd-queue-capacity-label[b-1mmkfvda4m] {
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-text-secondary-rgb), 0.4);
    text-transform: uppercase;
    white-space: nowrap;
}

.cmd-queue-capacity-bar[b-1mmkfvda4m] {
    flex: 1;
    height: 4px;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 2px;
    overflow: hidden;
}

.cmd-queue-capacity-fill[b-1mmkfvda4m] {
    height: 100%;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.4), rgba(var(--wl-gold-rgb), 0.6));
    border-radius: 2px;
    transition: width 0.5s ease-out;
}

.cmd-queue-capacity-text[b-1mmkfvda4m] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-text-secondary-rgb), 0.5);
    white-space: nowrap;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
    .cmd-center[b-1mmkfvda4m] {
        padding: 1rem;
    }

    .cmd-header-title[b-1mmkfvda4m] {
        font-size: 1.5rem;
    }

    .cmd-gauge[b-1mmkfvda4m] {
        width: 180px;
        height: 180px;
    }

    .cmd-gauge-current[b-1mmkfvda4m] {
        font-size: 2.5rem;
    }

    .cmd-queue-section[b-1mmkfvda4m] {
        padding: 1rem;
    }
}
/* /Components/Pages/Character/Creator/ElementCard.razor.rz.scp.css */
.manager-highlight[b-ot94cp34x7] {
    border-color: rgba(var(--wl-gold-rgb), 0.8);
    box-shadow:
        0 0 0 2px rgba(var(--wl-gold-rgb), 0.5),
        0 0 24px rgba(var(--wl-gold-rgb), 0.35);
}

.manager-highlight-badge[b-ot94cp34x7] {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    max-width: calc(100% - 1rem);
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.92);
    color: rgb(var(--wl-bg-primary-rgb, 10, 10, 12));
    font-size: 0.65rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 0 16px rgba(var(--wl-gold-rgb), 0.35);
}
/* /Components/Pages/Character/Creator/FaceElementPreview.razor.rz.scp.css */
/* Small cropped viewport onto the 300x620 avatar stage. */
.face-preview[b-utsz6s1mox] {
    position: relative;
    overflow: hidden;
    border-radius: 0.375rem;
    background: var(--wl-bg-tertiary);
}

/* Full 300x620 stage, scaled+translated by inline transform so the face-crop fills the box. */
.face-preview-stage[b-utsz6s1mox] {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 620px;
    transform-origin: 0 0;
    pointer-events: none;
}

.fp-layer[b-utsz6s1mox] {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    image-rendering: auto;
    pointer-events: none;
    user-select: none;
}

/* Positioned element layers (body stays at 0,0). */
.fp-positioned[b-utsz6s1mox] {
    /* top/left/z-index supplied inline per layer */
}
/* /Components/Pages/Character/New.razor.rz.scp.css */
.mode-card[b-24lxjggilr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--wl-border-medium);
    background: var(--wl-bg-secondary);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mode-card:hover[b-24lxjggilr] {
    border-color: color-mix(in srgb, var(--wl-gold) 50%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--wl-gold) 12%, transparent);
}

.mode-icon[b-24lxjggilr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.625rem;
    background: color-mix(in srgb, var(--wl-gold) 12%, transparent);
    color: var(--wl-gold);
}

.mode-title[b-24lxjggilr] {
    font-weight: 600;
    color: var(--wl-text-primary);
    font-size: 1.05rem;
}

.mode-desc[b-24lxjggilr] {
    color: var(--wl-text-muted);
    font-size: 0.875rem;
    flex: 1;
}

.mode-price[b-24lxjggilr] {
    margin-top: 0.25rem;
    font-weight: 600;
    color: var(--wl-gold);
    font-size: 0.9rem;
}

.mode-price-free[b-24lxjggilr] {
    color: var(--wl-green);
}
/* /Components/Pages/Character/NewAdult.razor.rz.scp.css */
.skin-dot[b-t7v8hikbkt] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.skin-dot:hover[b-t7v8hikbkt] {
    transform: scale(1.15);
    border-color: rgba(var(--wl-contrast-rgb), 0.35);
}

.skin-dot.active[b-t7v8hikbkt] {
    border-color: var(--wl-gold);
    box-shadow: 0 0 0 1.5px rgba(var(--wl-gold-rgb), 0.45);
    transform: scale(1.15);
}

.outfit-row[b-t7v8hikbkt] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.outfit-chip[b-t7v8hikbkt] {
    width: 5.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.375rem;
    border-radius: 0.5rem;
    border: 1.5px solid var(--wl-border-subtle);
    background: rgba(var(--wl-contrast-rgb), 0.015);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.outfit-chip:hover[b-t7v8hikbkt] {
    border-color: rgba(var(--wl-contrast-rgb), 0.18);
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.outfit-chip.chosen[b-t7v8hikbkt] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.06);
}

.outfit-thumb[b-t7v8hikbkt] {
    width: 100%;
    aspect-ratio: 300 / 620;
    object-fit: contain;
    border-radius: 0.25rem;
}

.outfit-name[b-t7v8hikbkt] {
    font-size: 0.5625rem;
    color: var(--wl-text-muted);
    margin-top: 0.125rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 1.3;
}
/* /Components/Pages/Character/Settings/Blocked.razor.rz.scp.css */
.blocked-settings[b-85whkvpz60] {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 1.25rem;
    width: min(100%, 58rem);
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2.25rem);
}

.blocked-settings-glow[b-85whkvpz60] {
    position: absolute;
    z-index: -1;
    top: -5rem;
    right: -7rem;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(244, 63, 94, 0.12), transparent 68%);
    pointer-events: none;
}

.blocked-settings-back[b-85whkvpz60] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    width: fit-content;
    color: var(--wl-text-secondary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
}

.blocked-settings-back:hover[b-85whkvpz60] { color: var(--wl-text-primary); }

.blocked-settings-hero[b-85whkvpz60] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    overflow: hidden;
    border: 1px solid rgba(244, 63, 94, 0.2);
    border-radius: 20px;
    background:
        linear-gradient(125deg, rgba(244, 63, 94, 0.12), transparent 46%),
        rgba(var(--wl-bg-secondary-rgb), 0.76);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
}

.blocked-settings-symbol[b-85whkvpz60] {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid rgba(244, 63, 94, 0.28);
    border-radius: 16px;
    background: rgba(244, 63, 94, 0.1);
    color: #fb7185;
}

.blocked-settings-symbol svg[b-85whkvpz60] { width: 1.7rem; height: 1.7rem; }
.blocked-settings-eyebrow[b-85whkvpz60] { color: #fb7185; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; }
.blocked-settings-hero h1[b-85whkvpz60] { margin: 0.18rem 0 0.3rem; color: var(--wl-text-primary); font-size: clamp(1.55rem, 4vw, 2.35rem); line-height: 1.05; }
.blocked-settings-hero p[b-85whkvpz60] { max-width: 40rem; margin: 0; color: var(--wl-text-muted); font-size: 0.9rem; line-height: 1.55; }

.blocked-settings-count[b-85whkvpz60] {
    padding: 0.45rem 0.75rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 999px;
    background: rgba(var(--wl-bg-primary-rgb), 0.4);
    color: var(--wl-text-secondary);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.blocked-settings-feedback[b-85whkvpz60] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border: 1px solid;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 700;
}

.blocked-settings-feedback > span[b-85whkvpz60] { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; }
.blocked-settings-feedback--success[b-85whkvpz60] { border-color: rgba(34, 197, 94, 0.25); background: rgba(34, 197, 94, 0.08); color: #86efac; }
.blocked-settings-feedback--success > span[b-85whkvpz60] { background: rgba(34, 197, 94, 0.14); }
.blocked-settings-feedback--error[b-85whkvpz60] { border-color: rgba(239, 68, 68, 0.25); background: rgba(239, 68, 68, 0.08); color: #fca5a5; }
.blocked-settings-feedback--error > span[b-85whkvpz60] { background: rgba(239, 68, 68, 0.14); }

.blocked-settings-list[b-85whkvpz60] { display: grid; gap: 0.75rem; }

.blocked-settings-card[b-85whkvpz60] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.09);
    border-radius: 16px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.62);
    transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.blocked-settings-card:hover[b-85whkvpz60] {
    border-color: rgba(244, 63, 94, 0.2);
    background: rgba(var(--wl-bg-secondary-rgb), 0.82);
    transform: translateY(-1px);
}

.blocked-settings-person[b-85whkvpz60] { display: flex; align-items: center; gap: 0.85rem; min-width: 0; color: inherit; text-decoration: none; }
.blocked-settings-person img[b-85whkvpz60] { width: 3.25rem; height: 3.25rem; flex: 0 0 auto; border: 1px solid rgba(var(--wl-contrast-rgb), 0.12); border-radius: 14px; object-fit: cover; }
.blocked-settings-person > span[b-85whkvpz60] { display: grid; gap: 0.16rem; min-width: 0; }
.blocked-settings-person strong[b-85whkvpz60] { overflow: hidden; color: var(--wl-text-primary); font-size: 0.98rem; text-overflow: ellipsis; white-space: nowrap; }
.blocked-settings-person small[b-85whkvpz60] { color: var(--wl-text-muted); font-size: 0.72rem; }

.blocked-settings-unblock[b-85whkvpz60],
.blocked-settings-retry[b-85whkvpz60] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    min-height: 2.65rem;
    padding: 0.62rem 0.95rem;
    border: 1px solid rgba(244, 63, 94, 0.28);
    border-radius: 11px;
    background: rgba(244, 63, 94, 0.09);
    color: #fda4af;
    font-size: 0.78rem;
    font-weight: 850;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.blocked-settings-unblock svg[b-85whkvpz60] { width: 1rem; height: 1rem; }
.blocked-settings-unblock:hover:not(:disabled)[b-85whkvpz60], .blocked-settings-retry:hover:not(:disabled)[b-85whkvpz60] { border-color: rgba(244, 63, 94, 0.5); background: rgba(244, 63, 94, 0.16); transform: translateY(-1px); }
.blocked-settings-unblock:disabled[b-85whkvpz60], .blocked-settings-retry:disabled[b-85whkvpz60] { opacity: 0.55; cursor: wait; }

.blocked-settings-state[b-85whkvpz60] {
    display: grid;
    place-items: center;
    gap: 0.65rem;
    min-height: 15rem;
    padding: 2rem;
    border: 1px dashed rgba(var(--wl-contrast-rgb), 0.13);
    border-radius: 18px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.4);
    color: var(--wl-text-muted);
    text-align: center;
}

.blocked-settings-state strong[b-85whkvpz60] { color: var(--wl-text-primary); font-size: 1rem; }
.blocked-settings-state p[b-85whkvpz60] { max-width: 28rem; margin: 0; font-size: 0.82rem; line-height: 1.5; }
.blocked-settings-state-icon[b-85whkvpz60] { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(34, 197, 94, 0.1); color: #86efac; font-size: 1.2rem; font-weight: 900; }
.blocked-settings-state--error .blocked-settings-state-icon[b-85whkvpz60] { background: rgba(239, 68, 68, 0.1); color: #fca5a5; }

.blocked-settings-spinner[b-85whkvpz60] {
    width: 1.8rem;
    height: 1.8rem;
    border: 2px solid rgba(244, 63, 94, 0.18);
    border-top-color: #fb7185;
    border-radius: 50%;
    animation: blocked-settings-spin-b-85whkvpz60 700ms linear infinite;
}

.blocked-settings-spinner--small[b-85whkvpz60] { width: 0.95rem; height: 0.95rem; }

@keyframes blocked-settings-spin-b-85whkvpz60 { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
    .blocked-settings-hero[b-85whkvpz60] { grid-template-columns: auto minmax(0, 1fr); }
    .blocked-settings-count[b-85whkvpz60] { grid-column: 1 / -1; justify-self: start; }
    .blocked-settings-card[b-85whkvpz60] { align-items: stretch; flex-direction: column; }
    .blocked-settings-unblock[b-85whkvpz60] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .blocked-settings-card[b-85whkvpz60],
    .blocked-settings-unblock[b-85whkvpz60],
    .blocked-settings-retry[b-85whkvpz60] { transition: none; }
    .blocked-settings-card:hover[b-85whkvpz60],
    .blocked-settings-unblock:hover:not(:disabled)[b-85whkvpz60],
    .blocked-settings-retry:hover:not(:disabled)[b-85whkvpz60] { transform: none; }
}
/* /Components/Pages/Character/Settings/Identity.razor.rz.scp.css */
.identity[b-1zh81fa7l3] {
    max-width: 40rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.identity-card[b-1zh81fa7l3] {
    background: var(--wl-bg-elevated, rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 16px;
    padding: 2rem;
}

.identity-header[b-1zh81fa7l3] {
    margin-bottom: 1.75rem;
}

.identity-title[b-1zh81fa7l3] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wl-text-primary);
}

.identity-subtitle[b-1zh81fa7l3] {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--wl-text-muted);
}

.identity-field[b-1zh81fa7l3] {
    margin-bottom: 1.25rem;
    flex: 1;
}

.identity-row[b-1zh81fa7l3] {
    display: flex;
    gap: 1rem;
}

.identity-label[b-1zh81fa7l3] {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wl-text-secondary);
}

.identity-handle-wrap[b-1zh81fa7l3] {
    position: relative;
    display: flex;
    align-items: center;
}

.identity-handle-prefix[b-1zh81fa7l3] {
    position: absolute;
    left: 0.75rem;
    color: var(--wl-text-muted);
    font-weight: 600;
    pointer-events: none;
}

.identity-input--handle[b-1zh81fa7l3] {
    padding-left: 1.75rem;
}

.identity-input--error[b-1zh81fa7l3] {
    border-color: #EF4444 !important;
}

.identity-hint[b-1zh81fa7l3] {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.identity-ok[b-1zh81fa7l3] {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: #10B981;
}

.identity-error[b-1zh81fa7l3] {
    margin-top: 0.375rem;
    font-size: 0.75rem;
    color: #EF4444;
}

.identity-error--general[b-1zh81fa7l3] {
    margin-top: 0;
    margin-bottom: 1rem;
}

.identity-actions[b-1zh81fa7l3] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.identity-back[b-1zh81fa7l3] {
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
    color: var(--wl-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
}

.identity-back:hover[b-1zh81fa7l3] {
    color: var(--wl-text-primary);
}

.identity-save[b-1zh81fa7l3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    color: var(--wl-bg-primary);
    background: var(--wl-gold);
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.identity-save:hover:not(:disabled)[b-1zh81fa7l3] {
    transform: translateY(-1px);
}

.identity-save:disabled[b-1zh81fa7l3] {
    opacity: 0.6;
    cursor: not-allowed;
}

.identity-loading[b-1zh81fa7l3] {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}

.identity-spinner[b-1zh81fa7l3] {
    width: 2rem;
    height: 2rem;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: identity-spin-b-1zh81fa7l3 0.8s linear infinite;
}

.identity-spinner--small[b-1zh81fa7l3] {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

@keyframes identity-spin-b-1zh81fa7l3 {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Character/TraitSelection.razor.rz.scp.css */
/* =============================================================
   TRAIT SELECTION - RPG CHARACTER CREATION
   Two-tab identity picker with dark luxury aesthetic
   ============================================================= */

/* --- Category color tokens (theme-aware) ---
   NOT on :root - Blazor scoping rewrites it to :root[b-xxx], which matches
   nothing, silently killing every var() below (invisible selected checkbox) */
.trait-selection-overlay[b-rveigcj5ta] {
    --trait-nature: var(--wl-green);
    --trait-nature-rgb: var(--wl-green-rgb);
    --trait-talent: var(--wl-gold);
    --trait-talent-rgb: var(--wl-gold-rgb);
}

/* ---- OVERLAY ---- */
.trait-selection-overlay[b-rveigcj5ta] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(12px);
    animation: fadeIn-b-rveigcj5ta 0.3s ease-out;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}

@keyframes fadeIn-b-rveigcj5ta {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---- PANEL ---- */
.trait-selection-panel[b-rveigcj5ta] {
    position: relative;
    width: 95vw;
    max-width: 720px;
    max-height: 92vh;
    max-height: min(92vh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(175deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.18);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 30px 60px -15px rgba(0, 0, 0, 0.85),
        0 0 120px -30px rgba(var(--wl-gold-rgb), 0.12);
    animation: panelEnter-b-rveigcj5ta 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes panelEnter-b-rveigcj5ta {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---- CORNER DECORATIONS ---- */
.corner-decor[b-rveigcj5ta] {
    position: absolute;
    width: 20px;
    height: 20px;
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    border-style: solid;
    border-width: 0;
    z-index: 10;
    pointer-events: none;
}

.corner-decor.tl[b-rveigcj5ta] { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.corner-decor.tr[b-rveigcj5ta] { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; }
.corner-decor.bl[b-rveigcj5ta] { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; }
.corner-decor.br[b-rveigcj5ta] { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; }

/* ---- GLOW LINES ---- */
.glow-line[b-rveigcj5ta] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(var(--wl-gold-rgb), 0.35) 30%,
        rgba(var(--wl-gold-rgb), 0.6) 50%,
        rgba(var(--wl-gold-rgb), 0.35) 70%,
        transparent);
    pointer-events: none;
}

.glow-line.top[b-rveigcj5ta] { top: 0; box-shadow: 0 0 20px 3px rgba(var(--wl-gold-rgb), 0.08); }
.glow-line.bottom[b-rveigcj5ta] { bottom: 0; box-shadow: 0 0 20px 3px rgba(var(--wl-gold-rgb), 0.08); }

/* ---- HEADER ---- */
.panel-header[b-rveigcj5ta] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 28px 28px 12px;
}

.header-center[b-rveigcj5ta] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.header-icon[b-rveigcj5ta] {
    width: 28px;
    height: 28px;
    color: var(--wl-gold);
    opacity: 0.85;
}

.header-icon svg[b-rveigcj5ta] {
    width: 100%;
    height: 100%;
}

.header-rule[b-rveigcj5ta] {
    flex: 1;
    max-width: 100px;
    height: 1px;
}

.header-rule.left[b-rveigcj5ta] {
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.35));
}

.header-rule.right[b-rveigcj5ta] {
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.35), transparent);
}

.panel-title[b-rveigcj5ta] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.65rem;
    font-weight: 400;
    color: var(--wl-gold);
    text-shadow: 0 0 30px rgba(var(--wl-gold-rgb), 0.3);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.panel-subtitle[b-rveigcj5ta] {
    text-align: center;
    color: var(--wl-text-secondary);
    font-size: 0.85rem;
    padding: 0 28px 14px;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.5;
}

/* ---- POINTS HUD ---- */
.points-hud[b-rveigcj5ta] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 0 28px 16px;
    flex-wrap: wrap;
}

.hud-requirements[b-rveigcj5ta] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hud-req[b-rveigcj5ta] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--wl-text-muted);
    transition: color 0.3s ease;
}

.hud-req svg[b-rveigcj5ta] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.hud-req.met[b-rveigcj5ta] {
    color: var(--wl-green);
}

.hud-req.met svg[b-rveigcj5ta] {
    color: var(--wl-green);
}

.hud-points[b-rveigcj5ta] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 100px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.6);
    border: 1px solid var(--wl-border-subtle);
    transition: all 0.3s ease;
}

.hud-points.ok[b-rveigcj5ta] {
    border-color: var(--wl-border-medium);
}

.hud-points.perfect[b-rveigcj5ta] {
    border-color: rgba(var(--wl-green-rgb), 0.35);
    box-shadow: 0 0 16px rgba(var(--wl-green-rgb), 0.08);
}

.hud-points.over[b-rveigcj5ta] {
    border-color: rgba(var(--wl-red-rgb), 0.35);
    box-shadow: 0 0 16px rgba(var(--wl-red-rgb), 0.08);
}

.hud-points-label[b-rveigcj5ta] {
    font-size: 0.72rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hud-points-value[b-rveigcj5ta] {
    font-size: 1.3rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    transition: color 0.3s ease;
}

.hud-points.ok .hud-points-value[b-rveigcj5ta] { color: var(--wl-text-primary); }
.hud-points.perfect .hud-points-value[b-rveigcj5ta] { color: var(--wl-green); }
.hud-points.over .hud-points-value[b-rveigcj5ta] { color: var(--wl-red); }

/* ---- TAB NAVIGATION ---- */
.tab-nav[b-rveigcj5ta] {
    display: flex;
    gap: 4px;
    padding: 0 28px;
    margin-bottom: 2px;
}

.tab-btn[b-rveigcj5ta] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    border-bottom: 2px solid transparent;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    color: var(--wl-text-muted);
}

.tab-btn:hover:not(.active)[b-rveigcj5ta] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-secondary);
}

/* Nature tab active */
.tab-btn.nature.active[b-rveigcj5ta] {
    background: rgba(var(--trait-nature-rgb), 0.06);
    border-color: rgba(var(--trait-nature-rgb), 0.15);
    border-bottom-color: var(--trait-nature);
    color: var(--trait-nature);
}

/* Talent tab active */
.tab-btn.talent.active[b-rveigcj5ta] {
    background: rgba(var(--wl-gold-rgb), 0.06);
    border-color: rgba(var(--wl-gold-rgb), 0.15);
    border-bottom-color: var(--wl-gold);
    color: var(--wl-gold);
}

.tab-icon[b-rveigcj5ta] {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-icon[b-rveigcj5ta]  svg {
    width: 100%;
    height: 100%;
}

.tab-label[b-rveigcj5ta] {
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.tab-badge[b-rveigcj5ta] {
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    padding: 0 6px;
}

.tab-btn.nature .tab-badge[b-rveigcj5ta] {
    background: rgba(var(--trait-nature-rgb), 0.2);
    color: var(--trait-nature);
}

.tab-btn.talent .tab-badge[b-rveigcj5ta] {
    background: rgba(var(--wl-gold-rgb), 0.2);
    color: var(--wl-gold);
}

/* ---- TRAITS VIEWPORT ---- */
.traits-viewport[b-rveigcj5ta] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 28px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--wl-gold-rgb), 0.2) transparent;
    -webkit-overflow-scrolling: touch;
}

.traits-viewport[b-rveigcj5ta]::-webkit-scrollbar {
    width: 5px;
}

.traits-viewport[b-rveigcj5ta]::-webkit-scrollbar-track {
    background: transparent;
}

.traits-viewport[b-rveigcj5ta]::-webkit-scrollbar-thumb {
    background: rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 3px;
}

.traits-viewport[b-rveigcj5ta]::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--wl-gold-rgb), 0.4);
}

/* ---- TRAITS GRID ---- */
.traits-grid[b-rveigcj5ta] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

/* ---- TRAIT CARD ---- */
.trait-card[b-rveigcj5ta] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.4);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    text-align: left;
}

.trait-card:hover[b-rveigcj5ta] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
    transform: translateX(3px);
}

/* Nature card selected */
.trait-card.nature.selected[b-rveigcj5ta] {
    background: rgba(var(--trait-nature-rgb), 0.07);
    border-color: rgba(var(--trait-nature-rgb), 0.35);
    box-shadow: 0 0 20px rgba(var(--trait-nature-rgb), 0.08), inset 0 0 30px rgba(var(--trait-nature-rgb), 0.03);
}

.trait-card.nature.selected:hover[b-rveigcj5ta] {
    background: rgba(var(--trait-nature-rgb), 0.1);
}

/* Talent card selected */
.trait-card.talent.selected[b-rveigcj5ta] {
    background: rgba(var(--wl-gold-rgb), 0.07);
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.08), inset 0 0 30px rgba(var(--wl-gold-rgb), 0.03);
}

.trait-card.talent.selected:hover[b-rveigcj5ta] {
    background: rgba(var(--wl-gold-rgb), 0.1);
}

/* ---- CARD CHECK ---- */
.card-check[b-rveigcj5ta] {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.check-empty[b-rveigcj5ta] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid rgba(var(--wl-contrast-rgb), 0.15);
    transition: border-color 0.2s ease;
}

.trait-card:hover .check-empty[b-rveigcj5ta] {
    border-color: rgba(var(--wl-contrast-rgb), 0.3);
}

/* Nature check */
.trait-card.nature.selected .card-check[b-rveigcj5ta] {
    background: var(--trait-nature);
    color: #fff;
    animation: checkPop-b-rveigcj5ta 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Talent check */
.trait-card.talent.selected .card-check[b-rveigcj5ta] {
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    animation: checkPop-b-rveigcj5ta 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-check svg[b-rveigcj5ta] {
    width: 14px;
    height: 14px;
}

@keyframes checkPop-b-rveigcj5ta {
    0% { transform: scale(0); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* ---- CARD BODY ---- */
.card-body[b-rveigcj5ta] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.card-name[b-rveigcj5ta] {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    line-height: 1.3;
}

.card-desc[b-rveigcj5ta] {
    font-size: 0.74rem;
    color: var(--wl-text-muted);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.trait-card:hover .card-desc[b-rveigcj5ta] {
    color: var(--wl-text-secondary);
}

.trait-card.selected .card-desc[b-rveigcj5ta] {
    color: var(--wl-text-secondary);
}

/* ---- CARD POINTS BADGE ---- */
.card-points[b-rveigcj5ta] {
    flex-shrink: 0;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    min-width: 42px;
    text-align: center;
    transition: all 0.2s ease;
}

.trait-card.pt-pos .card-points[b-rveigcj5ta] {
    color: var(--wl-green);
    background: rgba(var(--wl-green-rgb), 0.12);
    border: 1px solid rgba(var(--wl-green-rgb), 0.12);
}

.trait-card.pt-neg .card-points[b-rveigcj5ta] {
    color: var(--wl-red);
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.1);
}

.trait-card.pt-zero .card-points[b-rveigcj5ta] {
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

/* Brighten points badge on select */
.trait-card.selected.pt-pos .card-points[b-rveigcj5ta] {
    background: rgba(var(--wl-green-rgb), 0.2);
    border-color: rgba(var(--wl-green-rgb), 0.2);
}

.trait-card.selected.pt-neg .card-points[b-rveigcj5ta] {
    background: rgba(var(--wl-red-rgb), 0.18);
    border-color: rgba(var(--wl-red-rgb), 0.18);
}

/* ---- CARD GLOW ---- */
.card-glow[b-rveigcj5ta] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.trait-card.nature.selected .card-glow[b-rveigcj5ta] {
    background: radial-gradient(ellipse at 30% 50%, rgba(var(--trait-nature-rgb), 0.06), transparent 70%);
    opacity: 1;
}

.trait-card.talent.selected .card-glow[b-rveigcj5ta] {
    background: radial-gradient(ellipse at 30% 50%, rgba(var(--wl-gold-rgb), 0.06), transparent 70%);
    opacity: 1;
}

/* ---- IDENTITY STRIP ---- */
.identity-strip[b-rveigcj5ta] {
    padding: 14px 28px 10px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.4);
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    animation: stripSlide-b-rveigcj5ta 0.25s ease-out;
    flex-shrink: 0;
}

@keyframes stripSlide-b-rveigcj5ta {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.strip-header[b-rveigcj5ta] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.strip-rule[b-rveigcj5ta] {
    flex: 1;
    height: 1px;
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.strip-title[b-rveigcj5ta] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    white-space: nowrap;
}

.strip-pills[b-rveigcj5ta] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ---- PILL ---- */
.pill[b-rveigcj5ta] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 100px;
    animation: pillPop-b-rveigcj5ta 0.2s cubic-bezier(0.34, 1.2, 0.64, 1);
}

@keyframes pillPop-b-rveigcj5ta {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

.pill.nature[b-rveigcj5ta] {
    background: rgba(var(--trait-nature-rgb), 0.1);
    border: 1px solid rgba(var(--trait-nature-rgb), 0.2);
}

.pill.talent[b-rveigcj5ta] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
}

.pill-name[b-rveigcj5ta] {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--wl-text-primary);
}

.pill-pts[b-rveigcj5ta] {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.7rem;
    font-weight: 600;
}

.pill.pt-pos .pill-pts[b-rveigcj5ta] { color: var(--wl-green); }
.pill.pt-neg .pill-pts[b-rveigcj5ta] { color: var(--wl-red); }
.pill.pt-zero .pill-pts[b-rveigcj5ta] { color: var(--wl-text-muted); }

.pill-remove[b-rveigcj5ta] {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border: none;
    border-radius: 50%;
    color: var(--wl-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.pill-remove svg[b-rveigcj5ta] {
    width: 10px;
    height: 10px;
}

.pill-remove:hover[b-rveigcj5ta] {
    background: rgba(var(--wl-red-rgb), 0.25);
    color: var(--wl-red);
}

/* ---- FOOTER ---- */
.panel-footer[b-rveigcj5ta] {
    padding: 14px 28px 24px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

/* ---- CONFIRM CTA ---- */
.cta-confirm[b-rveigcj5ta] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 15px 48px;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 50%, var(--wl-gold) 100%);
    background-size: 200% 200%;
    border: none;
    border-radius: 10px;
    color: var(--wl-bg-primary);
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow:
        0 4px 20px rgba(var(--wl-gold-rgb), 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.cta-shimmer[b-rveigcj5ta] {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 25%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 75%
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.cta-confirm:hover:not(:disabled) .cta-shimmer[b-rveigcj5ta] {
    transform: translateX(100%);
}

.cta-confirm:hover:not(:disabled)[b-rveigcj5ta] {
    background-position: 100% 0;
    transform: translateY(-2px);
    box-shadow:
        0 8px 30px rgba(var(--wl-gold-rgb), 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.cta-confirm:active:not(:disabled)[b-rveigcj5ta] {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(var(--wl-gold-rgb), 0.2);
}

.cta-confirm:disabled[b-rveigcj5ta] {
    opacity: 0.35;
    cursor: not-allowed;
    background: rgba(var(--wl-contrast-rgb), 0.15);
    box-shadow: none;
    color: var(--wl-text-muted);
}

.cta-text[b-rveigcj5ta] {
    position: relative;
    z-index: 1;
}

.cta-arrow[b-rveigcj5ta] {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.cta-arrow svg[b-rveigcj5ta] {
    width: 100%;
    height: 100%;
}

.cta-confirm:hover:not(:disabled) .cta-arrow[b-rveigcj5ta] {
    transform: translateX(4px);
}

/* ---- RESPONSIVE: MOBILE ---- */
@media (max-width: 640px) {
    .trait-selection-overlay[b-rveigcj5ta] {
        align-items: stretch;
        justify-content: stretch;
    }

    .trait-selection-panel[b-rveigcj5ta] {
        width: 100%;
        height: 100%;
        height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        max-height: 100%;
        max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        border: none;
    }

    .corner-decor[b-rveigcj5ta] { display: none; }

    .panel-header[b-rveigcj5ta] {
        padding: 20px 16px 10px;
        gap: 10px;
    }

    .panel-title[b-rveigcj5ta] { font-size: 1.35rem; }

    .panel-subtitle[b-rveigcj5ta] {
        font-size: 0.8rem;
        padding: 0 16px 10px;
    }

    .points-hud[b-rveigcj5ta] {
        flex-direction: column;
        gap: 10px;
        padding: 0 16px 12px;
    }

    .tab-nav[b-rveigcj5ta] {
        padding: 0 16px;
    }

    .tab-btn[b-rveigcj5ta] {
        padding: 12px 10px;
        gap: 8px;
    }

    .tab-label[b-rveigcj5ta] { font-size: 0.76rem; }

    .traits-viewport[b-rveigcj5ta] {
        padding: 12px 16px 8px;
    }

    .trait-card[b-rveigcj5ta] {
        padding: 10px 12px;
        gap: 10px;
    }

    .card-name[b-rveigcj5ta] { font-size: 0.84rem; }
    .card-desc[b-rveigcj5ta] { font-size: 0.72rem; }

    .identity-strip[b-rveigcj5ta] {
        padding: 10px 16px 8px;
        max-height: 24dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .panel-footer[b-rveigcj5ta] {
        padding: 12px 16px max(20px, calc(14px + env(safe-area-inset-bottom, 0px)));
    }

    .cta-confirm[b-rveigcj5ta] {
        width: 100%;
        padding: 14px 24px;
    }
}

/* ---- COMING SOON BADGE ---- */
.coming-soon-badge[b-rveigcj5ta] {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ---- RESPONSIVE: LARGE ---- */
@media (min-width: 640px) {
    .traits-grid[b-rveigcj5ta] {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}
/* /Components/Pages/Character/Unclaimed.razor.rz.scp.css */
/* ==========================================
   UNCLAIMED CHARACTERS PAGE - NURTURING DESIGN
   ========================================== */

.unclaimed-page[b-qznaghxqg3] {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 1.5rem;
    overflow: hidden;
}

/* === CINEMATIC ATMOSPHERE === */
.page-atmosphere[b-qznaghxqg3] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.page-gradient-orb[b-qznaghxqg3] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
}

.page-gradient-orb--rose[b-qznaghxqg3] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(244, 114, 182, 0.3) 0%, transparent 70%);
    top: -200px;
    left: -100px;
    animation: page-float-b-qznaghxqg3 20s ease-in-out infinite;
}

.page-gradient-orb--gold[b-qznaghxqg3] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
    animation: page-float-b-qznaghxqg3 25s ease-in-out infinite reverse;
}

@keyframes page-float-b-qznaghxqg3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 30px) scale(0.95); }
}

.page-scanline[b-qznaghxqg3] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-contrast-rgb), 0.02) 2px,
        rgba(var(--wl-contrast-rgb), 0.02) 4px
    );
    pointer-events: none;
}

/* === ANIMATIONS === */
.animate-fade-in[b-qznaghxqg3] {
    animation: page-fadeIn-b-qznaghxqg3 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100[b-qznaghxqg3] { animation-delay: 0.1s; }
.delay-200[b-qznaghxqg3] { animation-delay: 0.2s; }

@keyframes page-fadeIn-b-qznaghxqg3 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === LOADING STATE === */
.page-loading[b-qznaghxqg3] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.page-loading-ring[b-qznaghxqg3] {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(244, 114, 182, 0.2);
    border-top-color: #f472b6;
    border-radius: 50%;
    animation: page-spin-b-qznaghxqg3 1s linear infinite;
}

@keyframes page-spin-b-qznaghxqg3 {
    to { transform: rotate(360deg); }
}

.page-loading-text[b-qznaghxqg3] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--wl-text-muted);
}

/* === HEADER === */
.page-header[b-qznaghxqg3] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.page-header-content[b-qznaghxqg3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.page-back-link[b-qznaghxqg3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    color: var(--wl-text-muted);
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.page-back-link:hover[b-qznaghxqg3] {
    background: rgba(244, 114, 182, 0.1);
    border-color: rgba(244, 114, 182, 0.3);
    color: #f472b6;
}

.page-back-link svg[b-qznaghxqg3] {
    width: 18px;
    height: 18px;
}

.page-header-tag[b-qznaghxqg3] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    color: #f472b6;
    background: rgba(244, 114, 182, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 0.5rem;
}

.page-header-title[b-qznaghxqg3] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem;
}

.page-header-subtitle[b-qznaghxqg3] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0;
}

.page-count-badge[b-qznaghxqg3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.625rem;
    background: rgba(244, 114, 182, 0.2);
    color: #f472b6;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 700;
    border-radius: 100px;
    flex-shrink: 0;
}

/* === SECTIONS === */
.page-section[b-qznaghxqg3] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

/* === CHILD CARDS === */
.child-cards[b-qznaghxqg3] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.child-card[b-qznaghxqg3] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 16px;
    transition: all 0.3s ease;
}

.child-card:hover[b-qznaghxqg3] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: rgba(244, 114, 182, 0.25);
}

.child-card--urgent[b-qznaghxqg3] {
    border-color: rgba(var(--wl-red-rgb), 0.3);
    background: rgba(var(--wl-red-rgb), 0.03);
}

.child-card--urgent:hover[b-qznaghxqg3] {
    border-color: rgba(var(--wl-red-rgb), 0.4);
    background: rgba(var(--wl-red-rgb), 0.05);
}

/* === AVATAR === */
.child-avatar[b-qznaghxqg3] {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.15) 0%, rgba(244, 114, 182, 0.05) 100%);
    border: 2px solid rgba(244, 114, 182, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #f472b6;
}

.child-avatar svg[b-qznaghxqg3] {
    width: 28px;
    height: 28px;
}

/* === INFO === */
.child-info[b-qznaghxqg3] {
    flex: 1;
    min-width: 0;
}

.child-name-row[b-qznaghxqg3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.child-name[b-qznaghxqg3] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.child-gender[b-qznaghxqg3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.child-gender svg[b-qznaghxqg3] {
    width: 16px;
    height: 16px;
}

.child-gender--female[b-qznaghxqg3] {
    color: #f472b6;
}

.child-gender--male[b-qznaghxqg3] {
    color: #60a5fa;
}

/* === DETAILS === */
.child-details[b-qznaghxqg3] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.375rem;
    flex-wrap: wrap;
}

.child-detail[b-qznaghxqg3] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.child-detail svg[b-qznaghxqg3] {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

/* === PARENTS === */
.child-parents[b-qznaghxqg3] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.child-parent[b-qznaghxqg3] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
}

.parent-label[b-qznaghxqg3] {
    color: var(--wl-text-muted);
}

.parent-name[b-qznaghxqg3] {
    color: var(--wl-text-primary);
    font-weight: 500;
}

/* === TIMER === */
.child-timer[b-qznaghxqg3] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.04);
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
}

.child-timer svg[b-qznaghxqg3] {
    width: 14px;
    height: 14px;
}

.child-timer--urgent[b-qznaghxqg3] {
    color: var(--wl-red);
    background: rgba(var(--wl-red-rgb), 0.1);
}

/* === ACTION AREA === */
.child-action[b-qznaghxqg3] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

.claim-trigger-btn[b-qznaghxqg3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: rgba(244, 114, 182, 0.1);
    border: 1px solid rgba(244, 114, 182, 0.25);
    border-radius: 10px;
    color: #f472b6;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.claim-trigger-btn:hover[b-qznaghxqg3] {
    background: rgba(244, 114, 182, 0.2);
    border-color: rgba(244, 114, 182, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(244, 114, 182, 0.2);
}

.claim-trigger-btn svg[b-qznaghxqg3] {
    width: 16px;
    height: 16px;
}

/* === CLAIM FORM === */
.claim-form[b-qznaghxqg3] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 200px;
}

.claim-input[b-qznaghxqg3] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.3s ease;
}

.claim-input:focus[b-qznaghxqg3] {
    border-color: rgba(244, 114, 182, 0.5);
}

.claim-input[b-qznaghxqg3]::placeholder {
    color: var(--wl-text-muted);
}

.claim-error[b-qznaghxqg3] {
    font-size: 0.6875rem;
    color: var(--wl-red);
    padding: 0 0.25rem;
}

.claim-form-actions[b-qznaghxqg3] {
    display: flex;
    gap: 0.375rem;
}

.claim-btn[b-qznaghxqg3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    flex: 1;
}

.claim-btn--confirm[b-qznaghxqg3] {
    background: linear-gradient(135deg, #f472b6, var(--wl-pink));
    color: #fff;
    border-color: transparent;
}

.claim-btn--confirm:hover:not(:disabled)[b-qznaghxqg3] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 114, 182, 0.4);
}

.claim-btn--confirm:disabled[b-qznaghxqg3] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.claim-btn--cancel[b-qznaghxqg3] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
    border-color: var(--wl-border-medium);
}

.claim-btn--cancel:hover:not(:disabled)[b-qznaghxqg3] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: var(--wl-text-primary);
}

.claim-btn--cancel:disabled[b-qznaghxqg3] {
    opacity: 0.5;
    cursor: not-allowed;
}

.claim-spinner[b-qznaghxqg3] {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: page-spin-b-qznaghxqg3 0.8s linear infinite;
}

/* === EMPTY STATE === */
.page-empty[b-qznaghxqg3] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 3rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 20px;
    margin-bottom: 2rem;
}

.page-empty-icon[b-qznaghxqg3] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    color: var(--wl-text-muted);
}

.page-empty-icon svg[b-qznaghxqg3] {
    width: 64px;
    height: 64px;
}

.page-empty-title[b-qznaghxqg3] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin: 0 0 0.5rem;
}

.page-empty-text[b-qznaghxqg3] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0 0 1.5rem;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.page-empty-btn[b-qznaghxqg3] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #f472b6, var(--wl-pink));
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-empty-btn:hover[b-qznaghxqg3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 114, 182, 0.4);
}

.page-empty-btn svg[b-qznaghxqg3] {
    width: 16px;
    height: 16px;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .unclaimed-page[b-qznaghxqg3] {
        padding: 1rem;
    }

    .page-header[b-qznaghxqg3] {
        flex-direction: column;
        align-items: stretch;
    }

    .child-card[b-qznaghxqg3] {
        flex-direction: column;
        align-items: stretch;
    }

    .child-avatar[b-qznaghxqg3] {
        width: 48px;
        height: 48px;
        margin: 0 auto;
    }

    .child-avatar svg[b-qznaghxqg3] {
        width: 24px;
        height: 24px;
    }

    .child-info[b-qznaghxqg3] {
        text-align: center;
    }

    .child-name-row[b-qznaghxqg3] {
        justify-content: center;
    }

    .child-details[b-qznaghxqg3] {
        justify-content: center;
    }

    .child-parents[b-qznaghxqg3] {
        justify-content: center;
    }

    .child-timer[b-qznaghxqg3] {
        margin: 0 auto;
    }

    .child-action[b-qznaghxqg3] {
        width: 100%;
    }

    .claim-trigger-btn[b-qznaghxqg3] {
        width: 100%;
        justify-content: center;
    }

    .claim-form[b-qznaghxqg3] {
        min-width: unset;
        width: 100%;
    }
}
/* /Components/Pages/Competitions/Details.razor.rz.scp.css */
/* ============================================
   COMPETITION DETAILS PAGE
   Theme: Dark luxury with gold accents
   ============================================ */

.competition-details-page[b-bpexesq5c5] {
    position: relative;
    min-height: 100vh;
    padding: 0 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.details-bg-atmosphere[b-bpexesq5c5] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.04) 0%, transparent 50%);
}

/* ============================================
   LOADING & ERROR STATES
   ============================================ */

.details-loading[b-bpexesq5c5],
.details-not-found[b-bpexesq5c5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 1rem;
    text-align: center;
}

.loading-spinner[b-bpexesq5c5] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-bpexesq5c5 1s linear infinite;
}

@keyframes spin-b-bpexesq5c5 {
    to { transform: rotate(360deg); }
}

.details-not-found h2[b-bpexesq5c5] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.back-link[b-bpexesq5c5] {
    color: var(--wl-gold);
    text-decoration: none;
    font-size: 0.875rem;
}

.back-link:hover[b-bpexesq5c5] {
    text-decoration: underline;
}

/* ============================================
   BACK BUTTON
   ============================================ */

.back-button[b-bpexesq5c5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.back-button:hover[b-bpexesq5c5] {
    background: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.back-button svg[b-bpexesq5c5] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   HEADER
   ============================================ */

.details-header[b-bpexesq5c5] {
    position: relative;
    padding: 2rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.98) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 16px;
    overflow: hidden;
}

.header-bg-gradient[b-bpexesq5c5] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.details-header.amateur .header-bg-gradient[b-bpexesq5c5] {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(156, 163, 175, 0.1) 0%, transparent 60%);
}

.details-header.regional .header-bg-gradient[b-bpexesq5c5] {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(59, 130, 246, 0.1) 0%, transparent 60%);
}

.details-header.prestige .header-bg-gradient[b-bpexesq5c5] {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--wl-gold-bg-hover) 0%, transparent 60%);
}

.details-header.legendary .header-bg-gradient[b-bpexesq5c5] {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--wl-purple-rgb), 0.15) 0%, transparent 60%);
}

.details-header[b-bpexesq5c5]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.details-header.amateur[b-bpexesq5c5]::before {
    background: linear-gradient(90deg, transparent, rgba(156, 163, 175, 0.5), transparent);
}

.details-header.regional[b-bpexesq5c5]::before {
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.6), transparent);
}

.details-header.prestige[b-bpexesq5c5]::before {
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.7), transparent);
}

.details-header.legendary[b-bpexesq5c5]::before {
    background: linear-gradient(90deg, transparent, rgba(var(--wl-purple-rgb), 0.7), transparent);
}

.header-content[b-bpexesq5c5] {
    position: relative;
    z-index: 1;
}

.header-content .prestige-badge[b-bpexesq5c5] {
    display: inline-block;
    padding: 0.375rem 0.875rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: 100px;
    margin-bottom: 1rem;
}

.prestige-badge.amateur[b-bpexesq5c5] {
    background: rgba(156, 163, 175, 0.15);
    color: #9CA3AF;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

.prestige-badge.regional[b-bpexesq5c5] {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.prestige-badge.prestige[b-bpexesq5c5] {
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
}

.prestige-badge.legendary[b-bpexesq5c5] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.2) 0%, rgba(var(--wl-pink-rgb), 0.2) 100%);
    color: var(--wl-purple);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.4);
}

.header-content h1[b-bpexesq5c5] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
}

.header-content .description[b-bpexesq5c5] {
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin-bottom: 1.5rem;
    max-width: 600px;
}

.header-meta[b-bpexesq5c5] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.meta-item[b-bpexesq5c5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.meta-item svg[b-bpexesq5c5] {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--wl-gold);
}

/* Status Banner */
.status-banner[b-bpexesq5c5] {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
}

.status-banner.registration[b-bpexesq5c5] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-banner.stage1[b-bpexesq5c5],
.status-banner.stage2[b-bpexesq5c5] {
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.3);
}

.status-banner.judging[b-bpexesq5c5] {
    background: rgba(var(--wl-purple-rgb), 0.1);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.3);
}

.status-banner.completed[b-bpexesq5c5] {
    background: rgba(100, 116, 139, 0.1);
    border: 1px solid rgba(100, 116, 139, 0.3);
}

.status-label[b-bpexesq5c5] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-banner.registration .status-label[b-bpexesq5c5] { color: #22C55E; }
.status-banner.stage1 .status-label[b-bpexesq5c5],
.status-banner.stage2 .status-label[b-bpexesq5c5] { color: #F97316; }
.status-banner.judging .status-label[b-bpexesq5c5] { color: var(--wl-purple); }
.status-banner.completed .status-label[b-bpexesq5c5] { color: #64748B; }

.status-time[b-bpexesq5c5] {
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

/* ============================================
   DETAILS GRID
   ============================================ */

.details-grid[b-bpexesq5c5] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .details-grid[b-bpexesq5c5] {
        grid-template-columns: 1fr 1fr;
    }
}

.details-column[b-bpexesq5c5] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ============================================
   SECTIONS
   ============================================ */

.details-section[b-bpexesq5c5] {
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
}

.details-section[b-bpexesq5c5]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--wl-gold-rgb), 0.3) 50%, transparent 100%);
}

.section-title[b-bpexesq5c5] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin-bottom: 1rem;
}

.section-title svg[b-bpexesq5c5] {
    width: 1rem;
    height: 1rem;
    opacity: 0.8;
}

/* ============================================
   JUDGES
   ============================================ */

.judges-list[b-bpexesq5c5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.judge-card[b-bpexesq5c5] {
    display: flex;
    gap: 0.875rem;
    padding: 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 8px;
}

.judge-avatar[b-bpexesq5c5] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    color: rgba(var(--wl-gold-rgb), 0.6);
}

.judge-avatar img[b-bpexesq5c5] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.judge-avatar svg[b-bpexesq5c5] {
    width: 24px;
    height: 24px;
}

.judge-info[b-bpexesq5c5] {
    flex: 1;
}

.judge-name[b-bpexesq5c5] {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin-bottom: 0.25rem;
}

.judge-description[b-bpexesq5c5] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    line-height: 1.4;
    margin: 0;
}

.judge-weights[b-bpexesq5c5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.3rem 0.65rem;
    margin-top: 0.65rem;
    color: var(--wl-text-muted);
    font-size: 0.65rem;
}

.judge-weights span[b-bpexesq5c5] {
    display: flex;
    justify-content: space-between;
    gap: 0.4rem;
}

.judge-weights strong[b-bpexesq5c5] {
    color: var(--wl-gold);
    font-variant-numeric: tabular-nums;
}

.scoring-contract[b-bpexesq5c5] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.85rem;
    padding: 0.75rem;
    border-left: 2px solid rgba(var(--wl-gold-rgb), 0.65);
    background: rgba(var(--wl-gold-rgb), 0.055);
    color: var(--wl-text-muted);
    font-size: 0.72rem;
    line-height: 1.45;
}

.scoring-contract strong[b-bpexesq5c5] { color: var(--wl-text-primary); }

/* ============================================
   TIMELINE
   ============================================ */

.timeline[b-bpexesq5c5] {
    position: relative;
    padding-left: 1.5rem;
}

.timeline[b-bpexesq5c5]::before {
    content: '';
    position: absolute;
    left: 0.375rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--wl-border-medium);
}

.timeline-item[b-bpexesq5c5] {
    position: relative;
    padding-bottom: 1.25rem;
}

.timeline-item:last-child[b-bpexesq5c5] {
    padding-bottom: 0;
}

.timeline-marker[b-bpexesq5c5] {
    position: absolute;
    left: -1.5rem;
    top: 0.125rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--wl-border-medium);
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.2);
}

.timeline-item.active .timeline-marker[b-bpexesq5c5] {
    background: rgba(var(--wl-gold-rgb), 0.3);
    border-color: var(--wl-gold);
}

.timeline-item.completed .timeline-marker[b-bpexesq5c5] {
    background: var(--wl-gold);
    border-color: var(--wl-gold);
}

.timeline-content[b-bpexesq5c5] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.timeline-label[b-bpexesq5c5] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.timeline-item.active .timeline-label[b-bpexesq5c5] {
    color: var(--wl-gold);
    font-weight: 600;
}

.timeline-date[b-bpexesq5c5] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

/* ============================================
   PRIZES
   ============================================ */

.prizes-list[b-bpexesq5c5] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.prize-card[b-bpexesq5c5] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 8px;
}

.prize-card.gold[b-bpexesq5c5] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.05);
}

.prize-card.silver[b-bpexesq5c5] {
    border-color: rgba(192, 192, 192, 0.3);
    background: rgba(192, 192, 192, 0.03);
}

.prize-card.bronze[b-bpexesq5c5] {
    border-color: rgba(205, 127, 50, 0.3);
    background: rgba(205, 127, 50, 0.03);
}

.prize-rank[b-bpexesq5c5] {
    width: 2.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.prize-card.gold .prize-rank[b-bpexesq5c5] { color: var(--wl-gold); }
.prize-card.silver .prize-rank[b-bpexesq5c5] { color: var(--wl-silver); }
.prize-card.bronze .prize-rank[b-bpexesq5c5] { color: #CD7F32; }
.prize-card.finalist .prize-rank[b-bpexesq5c5] { color: var(--wl-text-muted); }

.prize-details[b-bpexesq5c5] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8125rem;
}

.prize-credits[b-bpexesq5c5] {
    color: #22C55E;
}

.prize-fame[b-bpexesq5c5] {
    color: var(--wl-gold);
}

.prize-extra[b-bpexesq5c5] {
    color: var(--wl-purple);
    font-style: italic;
}

/* ============================================
   ENTRY SECTION
   ============================================ */

.entry-section[b-bpexesq5c5] {
    border-color: var(--wl-gold-border);
}

.entry-blocked[b-bpexesq5c5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 8px;
    color: #EF4444;
}

.entry-blocked svg[b-bpexesq5c5] {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.entry-blocked p[b-bpexesq5c5] {
    font-size: 0.875rem;
    margin: 0;
}

.entry-form[b-bpexesq5c5] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.entry-info[b-bpexesq5c5] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0;
}

.song-select[b-bpexesq5c5] {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.9375rem;
    cursor: pointer;
}

.song-select:focus[b-bpexesq5c5] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
}

.song-select option[b-bpexesq5c5] {
    background: var(--wl-bg-secondary);
}

.entry-cost[b-bpexesq5c5] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: rgba(255, 193, 7, 0.9);
}

.entry-cost svg[b-bpexesq5c5] {
    width: 1rem;
    height: 1rem;
}

.btn-enter[b-bpexesq5c5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border: none;
    border-radius: 8px;
    color: var(--wl-bg-primary);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-enter:hover:not(:disabled)[b-bpexesq5c5] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--wl-gold-rgb), 0.3);
}

.btn-enter:disabled[b-bpexesq5c5] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-small[b-bpexesq5c5] {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(var(--wl-bg-dark-rgb), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-bpexesq5c5 0.6s linear infinite;
}

.error-message[b-bpexesq5c5] {
    font-size: 0.8125rem;
    color: #EF4444;
    margin: 0;
}

/* My Entry Info */
.my-entry-info[b-bpexesq5c5] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.entry-status[b-bpexesq5c5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.entry-status.active[b-bpexesq5c5] {
    background: rgba(34, 197, 94, 0.1);
    color: #22C55E;
}

.entry-status.eliminated[b-bpexesq5c5] {
    background: rgba(var(--wl-red-rgb), 0.1);
    color: #EF4444;
}

.entry-status svg[b-bpexesq5c5] {
    width: 1rem;
    height: 1rem;
}

.submitted-song[b-bpexesq5c5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.song-label[b-bpexesq5c5] {
    color: var(--wl-text-muted);
}

.song-title[b-bpexesq5c5] {
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-weight: 500;
}

.song-score[b-bpexesq5c5] {
    margin-left: auto;
    color: var(--wl-gold);
    font-weight: 600;
}

.final-rank[b-bpexesq5c5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--wl-gold-bg);
    border: 1px solid var(--wl-gold-border);
    border-radius: 8px;
}

.rank-label[b-bpexesq5c5] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.rank-value[b-bpexesq5c5] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-gold);
}

/* ============================================
   PARTICIPANTS
   ============================================ */

.participants-hidden[b-bpexesq5c5],
.no-participants[b-bpexesq5c5] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

.participants-list[b-bpexesq5c5] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    max-height: 400px;
    overflow-y: auto;
}

.participant-row[b-bpexesq5c5] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border-radius: 6px;
    font-size: 0.875rem;
}

.participant-row.is-me[b-bpexesq5c5] {
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.05);
}

.participant-row.eliminated[b-bpexesq5c5] {
    opacity: 0.5;
}

.participant-rank[b-bpexesq5c5] {
    width: 2rem;
    text-align: center;
    font-weight: 600;
    color: var(--wl-text-muted);
}

.participant-rank.rank-1[b-bpexesq5c5] { color: var(--wl-gold); }
.participant-rank.rank-2[b-bpexesq5c5] { color: var(--wl-silver); }
.participant-rank.rank-3[b-bpexesq5c5] { color: #CD7F32; }

.participant-name[b-bpexesq5c5] {
    flex: 1;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.participant-score[b-bpexesq5c5] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.participant-score small[b-bpexesq5c5] {
    color: var(--wl-text-muted);
    font-size: 0.65rem;
    font-weight: 500;
}

.participant-score strong[b-bpexesq5c5] { color: var(--wl-gold); }

/* ============================================
   WINNERS PODIUM
   ============================================ */

.results-section[b-bpexesq5c5] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.winners-podium[b-bpexesq5c5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.winner[b-bpexesq5c5] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    border-radius: 8px;
}

.winner.gold[b-bpexesq5c5] {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
}

.winner.silver[b-bpexesq5c5] {
    background: rgba(192, 192, 192, 0.05);
    border: 1px solid rgba(192, 192, 192, 0.2);
}

.winner.bronze[b-bpexesq5c5] {
    background: rgba(205, 127, 50, 0.05);
    border: 1px solid rgba(205, 127, 50, 0.2);
}

.winner-crown[b-bpexesq5c5] {
    width: 2rem;
    color: var(--wl-gold);
}

.winner-crown svg[b-bpexesq5c5] {
    width: 100%;
    height: auto;
}

.winner-rank[b-bpexesq5c5] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    width: 2.5rem;
}

.winner.gold .winner-rank[b-bpexesq5c5] { color: var(--wl-gold); }
.winner.silver .winner-rank[b-bpexesq5c5] { color: var(--wl-silver); }
.winner.bronze .winner-rank[b-bpexesq5c5] { color: #CD7F32; }

.winner-name[b-bpexesq5c5] {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animate-fade-in[b-bpexesq5c5] {
    animation: fadeIn-b-bpexesq5c5 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn-b-bpexesq5c5 {
    to { opacity: 1; }
}

.delay-100[b-bpexesq5c5] { animation-delay: 0.1s; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .competition-details-page[b-bpexesq5c5] {
        padding: 0 0.75rem 2rem;
    }

    .details-header[b-bpexesq5c5] {
        padding: 1.25rem;
    }

    .header-content h1[b-bpexesq5c5] {
        font-size: 2rem;
    }

    .header-meta[b-bpexesq5c5] {
        flex-direction: column;
        gap: 0.75rem;
    }
}
/* /Components/Pages/Competitions/Index.razor.rz.scp.css */
/* ============================================
   COMPETITIONS LIST PAGE
   Theme: Dark luxury with gold accents
   ============================================ */

.competitions-page[b-u2maqr2z1k] {
    position: relative;
    min-height: 100vh;
    padding: 0 1rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Atmospheric background */
.competitions-bg-atmosphere[b-u2maqr2z1k] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(34, 211, 238, 0.03) 0%, transparent 50%);
}

/* ============================================
   HEADER
   ============================================ */

.competitions-header[b-u2maqr2z1k] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.competitions-header[b-u2maqr2z1k]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.6) 50%,
        transparent 100%);
}

.competitions-eyebrow[b-u2maqr2z1k] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-gold);
    margin-bottom: 0.375rem;
}

.competitions-title-group h1[b-u2maqr2z1k] {
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.competitions-subtitle[b-u2maqr2z1k] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0.375rem 0 0 0;
}

.header-decoration[b-u2maqr2z1k] {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--wl-gold-rgb), 0.3);
}

.header-icon[b-u2maqr2z1k] {
    width: 48px;
    height: 48px;
}

/* ============================================
   SECTIONS
   ============================================ */

.competition-sections[b-u2maqr2z1k] {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

.competition-section[b-u2maqr2z1k] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.competition-section-header[b-u2maqr2z1k] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 0 0.25rem;
}

.competition-section-header h2[b-u2maqr2z1k] {
    margin: 0.15rem 0 0;
    color: var(--wl-text-primary);
    font-family: var(--font-display);
    font-size: 1.65rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.competition-section-header p[b-u2maqr2z1k] {
    max-width: 480px;
    margin: 0;
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
    line-height: 1.5;
    text-align: right;
}

.section-eyebrow[b-u2maqr2z1k] {
    color: var(--wl-gold);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.featured-section .competitions-grid[b-u2maqr2z1k] {
    grid-template-columns: minmax(280px, 720px);
}

.competition-section-empty[b-u2maqr2z1k] {
    padding: 1.25rem;
    background: rgba(var(--wl-bg-modal-rgb), 0.72);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 12px;
}

.competition-section-empty h3[b-u2maqr2z1k] {
    margin: 0 0 0.25rem;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    font-size: 1rem;
}

.competition-section-empty p[b-u2maqr2z1k] {
    margin: 0;
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
}

.next-competition-preview[b-u2maqr2z1k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1rem 1.25rem;
    background: rgba(var(--wl-bg-modal-rgb), 0.58);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 10px;
}

.next-competition-preview div[b-u2maqr2z1k] {
    text-align: right;
}

.next-competition-preview h3[b-u2maqr2z1k],
.next-competition-preview p[b-u2maqr2z1k] {
    margin: 0;
}

/* A real Hall of Fame: one durable record per artist, not a duplicate edition archive. */
.hall-of-fame-section[b-u2maqr2z1k] {
    padding: 1.25rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-radius: 16px;
    background:
        radial-gradient(circle at 88% 0%, rgba(var(--wl-gold-rgb), 0.12), transparent 34%),
        linear-gradient(145deg, rgba(var(--wl-bg-modal-rgb), 0.94), rgba(var(--wl-bg-modal-deep-rgb), 0.82));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.competition-hof[b-u2maqr2z1k] {
    overflow: hidden;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    background: rgba(var(--wl-bg-modal-deep-rgb), 0.48);
}

.competition-hof table[b-u2maqr2z1k] {
    width: 100%;
    border-collapse: collapse;
}

.competition-hof th[b-u2maqr2z1k],
.competition-hof td[b-u2maqr2z1k] {
    padding: 0.8rem 0.7rem;
    text-align: left;
}

.competition-hof th[b-u2maqr2z1k] {
    color: var(--wl-text-muted);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.competition-hof tbody tr[b-u2maqr2z1k] {
    color: var(--wl-text-secondary);
    border-bottom: 1px solid var(--wl-border-subtle);
    transition: background 150ms ease;
}

.competition-hof tbody tr:last-child[b-u2maqr2z1k] { border-bottom: 0; }
.competition-hof tbody tr:hover[b-u2maqr2z1k] {
    background: rgba(var(--wl-gold-rgb), 0.07);
}

.competition-hof__artist a[b-u2maqr2z1k] {
    color: var(--wl-text-primary);
    font-weight: 800;
    text-decoration: none;
}

.competition-hof__artist a:hover[b-u2maqr2z1k] { color: var(--wl-gold); }
.competition-hof__rank[b-u2maqr2z1k] {
    color: var(--wl-gold);
    font-family: var(--font-display);
    font-size: 1.2rem;
}

.competition-hof__metric[b-u2maqr2z1k],
.competition-hof__score[b-u2maqr2z1k] {
    font-variant-numeric: tabular-nums;
}

.competition-hof__metric.is-wins[b-u2maqr2z1k] {
    color: var(--wl-gold);
    font-weight: 800;
}

.competition-hof tr.rank-1[b-u2maqr2z1k] {
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.11), transparent 58%);
}

@media (max-width: 760px) {
    .competition-hof[b-u2maqr2z1k] {
        border: 0;
        background: transparent;
    }

    .competition-hof thead[b-u2maqr2z1k] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .competition-hof table[b-u2maqr2z1k],
    .competition-hof tbody[b-u2maqr2z1k],
    .competition-hof tr[b-u2maqr2z1k],
    .competition-hof td[b-u2maqr2z1k] {
        display: block;
        width: 100%;
    }

    .competition-hof tbody[b-u2maqr2z1k] {
        display: grid;
        gap: 0.65rem;
    }

    .competition-hof tbody tr[b-u2maqr2z1k] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.55rem 0.8rem;
        padding: 0.75rem;
        border: 1px solid var(--wl-border-subtle);
        border-radius: 10px;
        background: rgba(var(--wl-bg-modal-deep-rgb), 0.48);
    }

    .competition-hof td[b-u2maqr2z1k] {
        min-width: 0;
        padding: 0;
    }

    .competition-hof__rank[b-u2maqr2z1k],
    .competition-hof__artist[b-u2maqr2z1k] {
        align-self: center;
    }

    .competition-hof__artist[b-u2maqr2z1k] {
        overflow-wrap: anywhere;
        text-align: right;
    }

    .competition-hof__metric[b-u2maqr2z1k],
    .competition-hof__score[b-u2maqr2z1k] {
        display: grid !important;
        gap: 0.1rem;
        padding-top: 0.45rem !important;
        border-top: 1px solid var(--wl-border-subtle);
    }

    .competition-hof__metric[b-u2maqr2z1k]::before,
    .competition-hof__score[b-u2maqr2z1k]::before {
        content: attr(data-label);
        color: var(--wl-text-muted);
        font-size: 0.56rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }
}

.next-competition-preview h3[b-u2maqr2z1k] {
    color: var(--wl-text-primary);
    font-size: 1rem;
}

.next-competition-preview p[b-u2maqr2z1k] {
    margin-top: 0.2rem;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
}

/* ============================================
   LOADING & EMPTY STATES
   ============================================ */

.competitions-loading[b-u2maqr2z1k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1rem;
}

.loading-spinner[b-u2maqr2z1k] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-u2maqr2z1k 1s linear infinite;
}

@keyframes spin-b-u2maqr2z1k {
    to { transform: rotate(360deg); }
}

.competitions-empty[b-u2maqr2z1k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    text-align: center;
}

.empty-icon[b-u2maqr2z1k] {
    width: 80px;
    height: 80px;
    color: rgba(var(--wl-gold-rgb), 0.3);
    margin-bottom: 1.5rem;
}

.empty-icon svg[b-u2maqr2z1k] {
    width: 100%;
    height: 100%;
}

.competitions-empty h2[b-u2maqr2z1k] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin-bottom: 0.5rem;
}

.competitions-empty p[b-u2maqr2z1k] {
    color: var(--wl-text-muted);
}

/* ============================================
   COMPETITION GRID
   ============================================ */

.competitions-grid[b-u2maqr2z1k] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.25rem;
}

/* ============================================
   COMPETITION CARD
   ============================================ */

.competition-card[b-u2maqr2z1k] {
    position: relative;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
    color: inherit;
    text-decoration: none;
}

.competition-card:hover[b-u2maqr2z1k] {
    transform: translateY(-4px);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.competition-card[b-u2maqr2z1k]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, rgba(var(--wl-gold-rgb), 0.4) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.competition-card:hover[b-u2maqr2z1k]::before {
    opacity: 1;
}

/* Prestige Level Styling */
.competition-card.amateur[b-u2maqr2z1k]::before {
    background: linear-gradient(90deg, transparent, rgba(156, 163, 175, 0.5), transparent);
}

.competition-card.regional[b-u2maqr2z1k]::before {
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
}

.competition-card.prestige[b-u2maqr2z1k]::before {
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.6), transparent);
}

.competition-card.legendary[b-u2maqr2z1k]::before {
    background: linear-gradient(90deg, transparent, rgba(var(--wl-purple-rgb), 0.6), transparent);
}

/* Card Glow Effect */
.card-glow[b-u2maqr2z1k] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.competition-card:hover .card-glow[b-u2maqr2z1k] {
    opacity: 1;
}

.competition-card.amateur .card-glow[b-u2maqr2z1k] {
    background: radial-gradient(ellipse at 50% 0%, rgba(156, 163, 175, 0.1) 0%, transparent 70%);
}

.competition-card.regional .card-glow[b-u2maqr2z1k] {
    background: radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
}

.competition-card.prestige .card-glow[b-u2maqr2z1k] {
    background: radial-gradient(ellipse at 50% 0%, var(--wl-gold-bg-hover) 0%, transparent 70%);
}

.competition-card.legendary .card-glow[b-u2maqr2z1k] {
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--wl-purple-rgb), 0.15) 0%, transparent 70%);
}

/* ============================================
   PRESTIGE BADGE
   ============================================ */

.prestige-badge[b-u2maqr2z1k] {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
    z-index: 2;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.prestige-badge.amateur[b-u2maqr2z1k] {
    background: rgba(156, 163, 175, 0.15);
    color: #9CA3AF;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

.prestige-badge.regional[b-u2maqr2z1k] {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.prestige-badge.prestige[b-u2maqr2z1k] {
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
}

.prestige-badge.legendary[b-u2maqr2z1k] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.2) 0%, rgba(var(--wl-pink-rgb), 0.2) 100%);
    color: var(--wl-purple);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.4);
    box-shadow: 0 0 12px rgba(var(--wl-purple-rgb), 0.2);
}

/* ============================================
   STATUS INDICATOR
   ============================================ */

.status-indicator[b-u2maqr2z1k] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    z-index: 2;
}

.status-indicator.registration[b-u2maqr2z1k] {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.status-indicator.stage1[b-u2maqr2z1k],
.status-indicator.stage2[b-u2maqr2z1k] {
    background: rgba(249, 115, 22, 0.15);
    color: #F97316;
}

.status-indicator.judging[b-u2maqr2z1k] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    color: var(--wl-purple);
}

.status-indicator.completed[b-u2maqr2z1k] {
    background: rgba(100, 116, 139, 0.15);
    color: #64748B;
}

/* ============================================
   CARD CONTENT
   ============================================ */

.card-content[b-u2maqr2z1k] {
    position: relative;
    z-index: 1;
    padding-top: 2rem;
}

.competition-name[b-u2maqr2z1k] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--wl-text-primary);
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px var(--wl-shadow-color);
}

.competition-meta[b-u2maqr2z1k] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.meta-row[b-u2maqr2z1k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.meta-row svg[b-u2maqr2z1k] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    opacity: 0.7;
}

.meta-row.deadline[b-u2maqr2z1k] {
    color: rgba(var(--wl-gold-rgb), 0.9);
}

.meta-row.deadline svg[b-u2maqr2z1k] {
    opacity: 1;
    color: var(--wl-gold);
}

/* ============================================
   TIER REQUIREMENT
   ============================================ */

.tier-requirement[b-u2maqr2z1k] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.tier-requirement svg[b-u2maqr2z1k] {
    width: 1rem;
    height: 1rem;
}

.tier-requirement.can-enter[b-u2maqr2z1k] {
    border-color: rgba(34, 197, 94, 0.3);
    color: rgba(34, 197, 94, 0.9);
}

.tier-requirement.can-enter svg[b-u2maqr2z1k] {
    color: #22C55E;
}

.tier-requirement.cannot-enter[b-u2maqr2z1k] {
    border-color: rgba(var(--wl-red-rgb), 0.3);
    color: rgba(var(--wl-red-rgb), 0.8);
}

.tier-requirement.cannot-enter svg[b-u2maqr2z1k] {
    color: #EF4444;
}

.tier-warning[b-u2maqr2z1k] {
    margin-left: auto;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animate-fade-in[b-u2maqr2z1k] {
    animation: fadeIn-b-u2maqr2z1k 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn-b-u2maqr2z1k {
    to { opacity: 1; }
}

.delay-100[b-u2maqr2z1k] { animation-delay: 0.1s; }
.delay-200[b-u2maqr2z1k] { animation-delay: 0.2s; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .competitions-page[b-u2maqr2z1k] {
        padding: 0 0.75rem 2rem;
    }

    .competitions-header[b-u2maqr2z1k] {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }

    .competitions-title-group h1[b-u2maqr2z1k] {
        font-size: 2rem;
    }

    .header-decoration[b-u2maqr2z1k] {
        display: none;
    }

    .competition-section-header[b-u2maqr2z1k] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.375rem;
    }

    .competition-section-header p[b-u2maqr2z1k] {
        text-align: left;
    }

    .next-competition-preview[b-u2maqr2z1k] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }

    .next-competition-preview div[b-u2maqr2z1k] {
        text-align: left;
    }

    .competitions-grid[b-u2maqr2z1k] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Competitions/MyCompetitions.razor.rz.scp.css */
/* ============================================
   MY COMPETITIONS PAGE
   Theme: Dark luxury with gold accents
   ============================================ */

.my-competitions-page[b-2qjs2uts2v] {
    position: relative;
    min-height: 100vh;
    padding: 0 1rem 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.page-bg-atmosphere[b-2qjs2uts2v] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.04) 0%, transparent 50%);
}

/* ============================================
   HEADER
   ============================================ */

.page-header[b-2qjs2uts2v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.page-header[b-2qjs2uts2v]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.6) 50%,
        transparent 100%);
}

.header-content h1[b-2qjs2uts2v] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.375rem;
}

.header-content .subtitle[b-2qjs2uts2v] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
}

.btn-browse[b-2qjs2uts2v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--wl-gold-bg);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 8px;
    color: var(--wl-gold);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-browse:hover[b-2qjs2uts2v] {
    background: var(--wl-gold-border);
}

.btn-browse svg[b-2qjs2uts2v] {
    width: 1rem;
    height: 1rem;
}

/* ============================================
   STATS OVERVIEW
   ============================================ */

.stats-overview[b-2qjs2uts2v] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card[b-2qjs2uts2v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1.25rem 1rem;
    background: rgba(var(--wl-bg-modal-rgb), 0.9);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 10px;
    text-align: center;
}

.stat-value[b-2qjs2uts2v] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    line-height: 1;
    color: var(--wl-text-primary);
}

.stat-card.wins .stat-value[b-2qjs2uts2v] {
    color: var(--wl-gold);
}

.stat-card.podiums .stat-value[b-2qjs2uts2v] {
    color: var(--wl-purple);
}

.stat-card.best .stat-value[b-2qjs2uts2v] {
    color: #22C55E;
}

.stat-label[b-2qjs2uts2v] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
}

/* ============================================
   TABS
   ============================================ */

.tabs[b-2qjs2uts2v] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.375rem;
    background: rgba(var(--wl-bg-modal-rgb), 0.8);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 10px;
}

.tab[b-2qjs2uts2v] {
    flex: 1;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--wl-text-muted);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab:hover[b-2qjs2uts2v] {
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.tab.active[b-2qjs2uts2v] {
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
}

/* ============================================
   LOADING & EMPTY STATES
   ============================================ */

.page-loading[b-2qjs2uts2v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 30vh;
    gap: 1rem;
}

.loading-spinner[b-2qjs2uts2v] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-2qjs2uts2v 1s linear infinite;
}

@keyframes spin-b-2qjs2uts2v {
    to { transform: rotate(360deg); }
}

.empty-state[b-2qjs2uts2v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 30vh;
    text-align: center;
    padding: 2rem;
}

.empty-icon[b-2qjs2uts2v] {
    width: 64px;
    height: 64px;
    color: rgba(var(--wl-gold-rgb), 0.3);
    margin-bottom: 1rem;
}

.empty-icon svg[b-2qjs2uts2v] {
    width: 100%;
    height: 100%;
}

.empty-state h3[b-2qjs2uts2v] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin-bottom: 0.5rem;
}

.empty-state p[b-2qjs2uts2v] {
    color: var(--wl-text-muted);
    margin-bottom: 1.5rem;
}

.btn-cta[b-2qjs2uts2v] {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    border-radius: 8px;
    color: var(--wl-bg-primary);
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-cta:hover[b-2qjs2uts2v] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--wl-gold-rgb), 0.3);
}

/* ============================================
   ENTRIES LIST
   ============================================ */

.entries-list[b-2qjs2uts2v] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.entry-card[b-2qjs2uts2v] {
    display: block;
    position: relative;
    padding: 1.25rem;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    color: inherit;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.2s ease;
}

.entry-card:hover[b-2qjs2uts2v] {
    transform: translateX(4px);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.entry-card:focus-visible[b-2qjs2uts2v] {
    outline: 2px solid var(--wl-gold);
    outline-offset: 3px;
    border-color: rgba(var(--wl-gold-rgb), 0.55);
}

.entry-card[b-2qjs2uts2v]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

.entry-card.amateur[b-2qjs2uts2v]::before { background: #9CA3AF; }
.entry-card.regional[b-2qjs2uts2v]::before { background: #3B82F6; }
.entry-card.prestige[b-2qjs2uts2v]::before { background: var(--wl-gold); }
.entry-card.legendary[b-2qjs2uts2v]::before { background: var(--wl-purple); }

/* Winner highlight */
.entry-card.winner[b-2qjs2uts2v] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    background: linear-gradient(180deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.95) 100%);
}

.entry-card.winner[b-2qjs2uts2v]::before {
    background: linear-gradient(180deg, var(--wl-gold), #F5D76E);
    width: 4px;
}

.entry-header[b-2qjs2uts2v] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.prestige-badge[b-2qjs2uts2v] {
    padding: 0.25rem 0.625rem;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
}

.prestige-badge.amateur[b-2qjs2uts2v] {
    background: rgba(156, 163, 175, 0.15);
    color: #9CA3AF;
}

.prestige-badge.regional[b-2qjs2uts2v] {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.prestige-badge.prestige[b-2qjs2uts2v] {
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
}

.prestige-badge.legendary[b-2qjs2uts2v] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    color: var(--wl-purple);
}

.status-badge[b-2qjs2uts2v] {
    padding: 0.25rem 0.5rem;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
}

.status-badge.registration[b-2qjs2uts2v] { background: rgba(34, 197, 94, 0.15); color: #22C55E; }
.status-badge.stage1[b-2qjs2uts2v],
.status-badge.stage2[b-2qjs2uts2v] { background: rgba(249, 115, 22, 0.15); color: #F97316; }
.status-badge.judging[b-2qjs2uts2v] { background: rgba(var(--wl-purple-rgb), 0.15); color: var(--wl-purple); }

.rank-badge[b-2qjs2uts2v] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 4px;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.rank-badge.rank-1[b-2qjs2uts2v] {
    background: var(--wl-gold-border);
    color: var(--wl-gold);
}

.rank-badge.rank-2[b-2qjs2uts2v] {
    background: rgba(192, 192, 192, 0.15);
    color: var(--wl-silver);
}

.rank-badge.rank-3[b-2qjs2uts2v] {
    background: rgba(205, 127, 50, 0.15);
    color: #CD7F32;
}

.rank-icon[b-2qjs2uts2v] {
    width: 0.875rem;
    height: 0.875rem;
}

.rank-icon.gold[b-2qjs2uts2v] { color: var(--wl-gold); }
.rank-icon.silver[b-2qjs2uts2v] { color: var(--wl-silver); }
.rank-icon.bronze[b-2qjs2uts2v] { color: #CD7F32; }

.entry-name[b-2qjs2uts2v] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    color: var(--wl-text-primary);
    margin-bottom: 0.625rem;
}

.entry-meta[b-2qjs2uts2v] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.meta-item[b-2qjs2uts2v] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.meta-item svg[b-2qjs2uts2v] {
    width: 0.875rem;
    height: 0.875rem;
    opacity: 0.7;
}

.meta-item.deadline[b-2qjs2uts2v] {
    color: rgba(var(--wl-gold-rgb), 0.9);
}

.meta-item.deadline svg[b-2qjs2uts2v] {
    color: var(--wl-gold);
    opacity: 1;
}

.entry-score[b-2qjs2uts2v] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-radius: 6px;
    font-size: 0.8125rem;
}

.score-label[b-2qjs2uts2v] {
    color: var(--wl-text-muted);
}

.score-value[b-2qjs2uts2v] {
    font-weight: 600;
    color: var(--wl-gold);
}

.eliminated-banner[b-2qjs2uts2v] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.625rem;
    background: rgba(var(--wl-red-rgb), 0.15);
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #EF4444;
}

/* History entry results */
.entry-results[b-2qjs2uts2v] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.result-item[b-2qjs2uts2v] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
}

.result-label[b-2qjs2uts2v] {
    color: var(--wl-text-muted);
}

.result-value[b-2qjs2uts2v] {
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.winner-badge[b-2qjs2uts2v] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-left: auto;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, var(--wl-gold-bg) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.winner-badge svg[b-2qjs2uts2v] {
    width: 0.875rem;
    height: 0.875rem;
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animate-fade-in[b-2qjs2uts2v] {
    animation: fadeIn-b-2qjs2uts2v 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn-b-2qjs2uts2v {
    to { opacity: 1; }
}

.delay-100[b-2qjs2uts2v] { animation-delay: 0.1s; }
.delay-200[b-2qjs2uts2v] { animation-delay: 0.2s; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .my-competitions-page[b-2qjs2uts2v] {
        padding: 0 0.75rem 2rem;
    }

    .page-header[b-2qjs2uts2v] {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .btn-browse[b-2qjs2uts2v] {
        width: 100%;
        justify-content: center;
    }

    .stats-overview[b-2qjs2uts2v] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-value[b-2qjs2uts2v] {
        font-size: 1.5rem;
    }

    .tabs[b-2qjs2uts2v] {
        flex-direction: column;
    }
}
/* /Components/Pages/Fame/FameAdvisorTips.razor.rz.scp.css */
/* ============================================
   FAME ADVISOR TIPS
   ============================================ */

.advisor-tips[b-3hcih11hqc] {
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}

.fame-section-title[b-3hcih11hqc] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin-bottom: 1rem;
}

.fame-section-title svg[b-3hcih11hqc] {
    width: 1rem;
    height: 1rem;
    opacity: 0.8;
}

.advisor-tips[b-3hcih11hqc]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 50%,
        transparent 100%);
}

/* Advice list */
.advice-list[b-3hcih11hqc] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Individual advice card */
.advice-card[b-3hcih11hqc] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.advice-card:hover[b-3hcih11hqc] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: var(--wl-border-medium);
}

.advice-card.clickable[b-3hcih11hqc] {
    cursor: pointer;
}

.advice-card.clickable:hover[b-3hcih11hqc] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

/* Advice icon */
.advice-icon[b-3hcih11hqc] {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-radius: 6px;
    flex-shrink: 0;
    color: var(--wl-gold);
}

.advice-icon svg[b-3hcih11hqc] {
    width: 1rem;
    height: 1rem;
}

/* Advice content */
.advice-content[b-3hcih11hqc] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.advice-title[b-3hcih11hqc] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.advice-desc[b-3hcih11hqc] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    line-height: 1.4;
}

/* Arrow for clickable cards */
.advice-arrow[b-3hcih11hqc] {
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-text-muted);
    flex-shrink: 0;
    align-self: center;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.advice-arrow svg[b-3hcih11hqc] {
    width: 1rem;
    height: 1rem;
}

.advice-card.clickable:hover .advice-arrow[b-3hcih11hqc] {
    opacity: 1;
    transform: translateX(2px);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .advice-arrow[b-3hcih11hqc] {
        display: none;
    }
}
/* /Components/Pages/Fame/FameHistorySection.razor.rz.scp.css */
/* ============================================
   FAME HISTORY SECTION
   ============================================ */

.fame-history-section[b-ir1jb80fho] {
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}

.fame-section-title[b-ir1jb80fho] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin-bottom: 1rem;
}

.fame-section-title svg[b-ir1jb80fho] {
    width: 1rem;
    height: 1rem;
    opacity: 0.8;
}

.fame-history-section[b-ir1jb80fho] {
    margin-top: 0;
}

.fame-history-section[b-ir1jb80fho]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 50%,
        transparent 100%);
}

/* Loading */
.history-loading[b-ir1jb80fho] {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.loading-spinner[b-ir1jb80fho] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-ir1jb80fho 1s linear infinite;
}

@keyframes spin-b-ir1jb80fho {
    to { transform: rotate(360deg); }
}

/* Empty state */
.history-empty[b-ir1jb80fho] {
    text-align: center;
    padding: 2rem 0;
}

.history-empty-text[b-ir1jb80fho] {
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
}

/* Scrollable container */
.history-scroll[b-ir1jb80fho] {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.history-scroll[b-ir1jb80fho]::-webkit-scrollbar {
    width: 4px;
}

.history-scroll[b-ir1jb80fho]::-webkit-scrollbar-track {
    background: transparent;
}

.history-scroll[b-ir1jb80fho]::-webkit-scrollbar-thumb {
    background: var(--wl-border-medium);
    border-radius: 2px;
}

.history-scroll[b-ir1jb80fho]::-webkit-scrollbar-thumb:hover {
    background: var(--wl-border-subtle);
}

/* Day groups */
.history-day-group[b-ir1jb80fho] {
    margin-bottom: 0.75rem;
}

.history-day-group:last-child[b-ir1jb80fho] {
    margin-bottom: 0;
}

.history-day-header[b-ir1jb80fho] {
    padding: 0.375rem 0;
    margin-bottom: 0.375rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.history-day-label[b-ir1jb80fho] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-gold-rgb), 0.7);
}

/* Event items */
.history-event[b-ir1jb80fho] {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0.375rem;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.history-event:hover[b-ir1jb80fho] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.history-event.milestone[b-ir1jb80fho] {
    background: rgba(var(--wl-gold-rgb), 0.05);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
}

.history-event.milestone:hover[b-ir1jb80fho] {
    background: rgba(var(--wl-gold-rgb), 0.08);
}

/* Event type icon */
.history-event-icon[b-ir1jb80fho] {
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.history-event-icon svg[b-ir1jb80fho] {
    width: 0.875rem;
    height: 0.875rem;
}

.history-event-icon.type-release[b-ir1jb80fho] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: #EF4444;
}

.history-event-icon.type-decay[b-ir1jb80fho] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: var(--wl-text-muted);
}

.history-event-icon.type-pr[b-ir1jb80fho],
.history-event-icon.type-promotion[b-ir1jb80fho] {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.history-event-icon.type-milestone[b-ir1jb80fho] {
    background: rgba(var(--wl-gold-rgb), 0.2);
    color: var(--wl-gold);
}

.history-event-icon.type-interview[b-ir1jb80fho] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    color: var(--wl-purple);
}

.history-event-icon.type-collab[b-ir1jb80fho] {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.history-event-icon.type-beef[b-ir1jb80fho] {
    background: rgba(249, 115, 22, 0.15);
    color: #F97316;
}

.history-event-icon.type-zeitgeist[b-ir1jb80fho] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: rgba(var(--wl-gold-rgb), 0.8);
}

.history-event-icon.type-streaming[b-ir1jb80fho] {
    background: rgba(34, 211, 238, 0.15);
    color: #22D3EE;
}

.history-event-icon.type-region[b-ir1jb80fho] {
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
}

.history-event-icon.type-social[b-ir1jb80fho] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    color: var(--wl-purple);
}

.history-event-icon.type-marriage[b-ir1jb80fho] {
    background: rgba(var(--wl-pink-rgb), 0.15);
    color: var(--wl-pink);
}

/* Event content */
.history-event-content[b-ir1jb80fho] {
    flex: 1;
    min-width: 0;
}

.history-event-title[b-ir1jb80fho] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    line-height: 1.3;
}

.history-event-meta[b-ir1jb80fho] {
    font-weight: 400;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
}

.history-event-deltas[b-ir1jb80fho] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.history-delta[b-ir1jb80fho] {
    font-size: 0.6875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.history-delta.positive[b-ir1jb80fho] {
    color: #22C55E;
}

.history-delta.negative[b-ir1jb80fho] {
    color: #EF4444;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .history-scroll[b-ir1jb80fho] {
        max-height: 300px;
    }
}
/* /Components/Pages/Fame/FameMomentumBadge.razor.rz.scp.css */
/* ============================================
   FAME MOMENTUM BADGE
   ============================================ */

.momentum-badge[b-wfqjuk4t8z] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

/* Rising state */
.momentum-badge.rising[b-wfqjuk4t8z] {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    color: #22C55E;
}

/* Stable state */
.momentum-badge.stable[b-wfqjuk4t8z] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    color: var(--wl-gold);
}

/* Declining state */
.momentum-badge.declining[b-wfqjuk4t8z] {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #EF4444;
}

/* Arrow icon */
.momentum-arrow[b-wfqjuk4t8z] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
}

.momentum-arrow svg[b-wfqjuk4t8z] {
    width: 14px;
    height: 14px;
}

/* Percentage */
.momentum-percent[b-wfqjuk4t8z] {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* Label text */
.momentum-label[b-wfqjuk4t8z] {
    font-weight: 500;
    opacity: 0.9;
}
/* /Components/Pages/Fame/Index.razor.rz.scp.css */
/* ============================================
   FAME DASHBOARD - AAA+++ Hollywood Glamour
   Theme: Editorial luxury with data visualization
   ============================================ */

.fame-dashboard[b-vfrrcidmhf] {
    position: relative;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Atmospheric background */
.fame-bg-atmosphere[b-vfrrcidmhf] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-purple-rgb), 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 0% 80%, rgba(34, 211, 238, 0.03) 0%, transparent 50%);
}

/* Loading state */
.fame-loading[b-vfrrcidmhf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
}

.fame-loading-spinner[b-vfrrcidmhf] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-vfrrcidmhf 1s linear infinite;
}

@keyframes spin-b-vfrrcidmhf {
    to { transform: rotate(360deg); }
}

/* Empty state */
.fame-empty[b-vfrrcidmhf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}

.fame-empty-icon[b-vfrrcidmhf] {
    width: 80px;
    height: 80px;
    color: rgba(var(--wl-gold-rgb), 0.3);
    margin-bottom: 1.5rem;
}

.fame-empty-icon svg[b-vfrrcidmhf] {
    width: 100%;
    height: 100%;
}

.fame-empty h2[b-vfrrcidmhf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin-bottom: 0.5rem;
}

.fame-empty p[b-vfrrcidmhf] {
    color: var(--wl-text-muted);
}

/* ============================================
   HEADER - Global Fame Card
   ============================================ */

.fame-header[b-vfrrcidmhf] {
    margin-bottom: 0;
}

.fame-global-card[b-vfrrcidmhf] {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    padding: 2px;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.6) 0%,
        var(--wl-gold-border) 50%,
        rgba(var(--wl-purple-rgb), 0.3) 100%);
}

.fame-global-inner[b-vfrrcidmhf] {
    position: relative;
    background: linear-gradient(135deg,
        rgba(var(--wl-bg-modal-rgb), 0.98) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.95) 100%);
    border-radius: 14px;
    padding: 2rem;
    overflow: hidden;
}

.fame-global-bg[b-vfrrcidmhf] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 80% 20%, var(--wl-gold-bg-hover) 0%, transparent 50%),
        radial-gradient(ellipse 40% 60% at 20% 80%, rgba(var(--wl-purple-rgb), 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.fame-global-content[b-vfrrcidmhf] {
    position: relative;
    z-index: 1;
}

.fame-global-label[b-vfrrcidmhf] {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(var(--wl-gold-rgb), 0.8);
    margin-bottom: 0.5rem;
}

.fame-global-value[b-vfrrcidmhf] {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 1rem;
}

.fame-global-number[b-vfrrcidmhf] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--wl-gold-dark) 0%, var(--wl-gold) 50%, var(--wl-gold-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 60px rgba(var(--wl-gold-rgb), 0.3);
}

.fame-global-trend[b-vfrrcidmhf] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
}

.fame-global-trend svg[b-vfrrcidmhf] {
    width: 16px;
    height: 16px;
}

.fame-global-trend.up[b-vfrrcidmhf] {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.fame-global-trend.down[b-vfrrcidmhf] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: #EF4444;
}

.fame-global-bar[b-vfrrcidmhf] {
    height: 8px;
    background: var(--wl-border-medium);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.fame-global-bar-fill[b-vfrrcidmhf] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold-dark) 0%, var(--wl-gold) 50%, #F5D76E 100%);
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
    transition: width 0.8s ease-out;
}

.fame-global-reach[b-vfrrcidmhf] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.18);
    border-radius: 10px;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        rgba(34, 211, 238, 0.05) 100%);
}

.fame-reach-copy[b-vfrrcidmhf] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    gap: 0.65rem;
}

.fame-reach-label[b-vfrrcidmhf] {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-contrast-rgb), 0.72);
}

.fame-reach-value[b-vfrrcidmhf] {
    font-family: var(--font-display);
    font-size: 1.55rem;
    line-height: 1;
    color: #67E8F9;
}

.fame-reach-regions[b-vfrrcidmhf] {
    min-width: 0;
    color: var(--wl-text-muted);
    font-size: 0.88rem;
}

.fame-reach-meter[b-vfrrcidmhf] {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.1);
}

.fame-reach-meter-fill[b-vfrrcidmhf] {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #22D3EE 0%, var(--wl-gold) 100%);
    box-shadow: 0 0 16px rgba(34, 211, 238, 0.28);
    transition: width 0.8s ease-out;
}

.fame-reach-hint[b-vfrrcidmhf] {
    margin: 0;
    color: rgba(var(--wl-contrast-rgb), 0.78);
    font-size: 0.9rem;
    line-height: 1.35;
}

.fame-global-footer[b-vfrrcidmhf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.fame-global-stars[b-vfrrcidmhf] {
    display: flex;
    gap: 0.5rem;
}

.fame-star[b-vfrrcidmhf] {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: rgba(var(--wl-gold-rgb), 0.3);
    stroke-width: 1.5;
    transition: all 0.3s ease;
}

.fame-star.filled[b-vfrrcidmhf] {
    fill: var(--wl-gold);
    stroke: var(--wl-gold);
    filter: drop-shadow(0 0 8px rgba(var(--wl-gold-rgb), 0.6));
}

/* ============================================
   MAIN GRID
   ============================================ */

.fame-grid[b-vfrrcidmhf] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: stretch;
}

@media (min-width: 768px) {
    .fame-grid[b-vfrrcidmhf] {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   SECTIONS
   ============================================ */

.fame-section[b-vfrrcidmhf] {
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}

.fame-section[b-vfrrcidmhf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 50%,
        transparent 100%);
}

.fame-section-title[b-vfrrcidmhf] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin-bottom: 1rem;
}

.fame-section-title svg[b-vfrrcidmhf] {
    width: 1rem;
    height: 1rem;
    opacity: 0.8;
}

/* Interactive section titles with tooltip */
.fame-section-title-interactive[b-vfrrcidmhf] {
    cursor: help;
    transition: color 0.2s ease, text-shadow 0.2s ease;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    margin-bottom: 0.75rem;
    border-radius: 4px;
}

.fame-section-title-interactive:hover[b-vfrrcidmhf] {
    color: var(--wl-gold-light);
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
    background: rgba(var(--wl-gold-rgb), 0.05);
}

.fame-section-title-interactive:hover svg[b-vfrrcidmhf] {
    opacity: 1;
}

/* Interactive fan tier items */
.fame-tier-interactive[b-vfrrcidmhf] {
    cursor: help;
    transition: transform 0.2s ease, background 0.2s ease;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    border-radius: 4px;
}

.fame-tier-interactive:hover[b-vfrrcidmhf] {
    transform: translateX(4px);
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

/* ============================================
   BRANCH FAME CARDS
   ============================================ */

.fame-branches[b-vfrrcidmhf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fame-branch-card[b-vfrrcidmhf] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.fame-branch-card:hover[b-vfrrcidmhf] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: var(--wl-border-medium);
    transform: translateX(4px);
}

.fame-branch-icon[b-vfrrcidmhf] {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.fame-branch-icon svg[b-vfrrcidmhf] {
    width: 1.25rem;
    height: 1.25rem;
}

.fame-branch-card.music .fame-branch-icon[b-vfrrcidmhf] {
    background: linear-gradient(135deg, rgba(var(--wl-red-rgb), 0.2) 0%, rgba(var(--wl-red-rgb), 0.1) 100%);
    color: #EF4444;
}

.fame-branch-card.film .fame-branch-icon[b-vfrrcidmhf] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.1) 100%);
    color: #3B82F6;
}

.fame-branch-card.fashion .fame-branch-icon[b-vfrrcidmhf] {
    background: linear-gradient(135deg, rgba(var(--wl-pink-rgb), 0.2) 0%, rgba(var(--wl-pink-rgb), 0.1) 100%);
    color: var(--wl-pink);
}

.fame-branch-info[b-vfrrcidmhf] {
    flex: 1;
    min-width: 0;
}

.fame-branch-name[b-vfrrcidmhf] {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin-bottom: 0.375rem;
}

.fame-branch-bar[b-vfrrcidmhf] {
    height: 4px;
    background: var(--wl-border-medium);
    border-radius: 2px;
    overflow: hidden;
}

.fame-branch-bar-fill[b-vfrrcidmhf] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease-out;
}

.fame-branch-card.music .fame-branch-bar-fill[b-vfrrcidmhf] {
    background: linear-gradient(90deg, #DC2626, #EF4444);
    box-shadow: 0 0 10px rgba(var(--wl-red-rgb), 0.4);
}

.fame-branch-card.film .fame-branch-bar-fill[b-vfrrcidmhf] {
    background: linear-gradient(90deg, #2563EB, #3B82F6);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
}

.fame-branch-card.fashion .fame-branch-bar-fill[b-vfrrcidmhf] {
    background: linear-gradient(90deg, #DB2777, var(--wl-pink));
    box-shadow: 0 0 10px rgba(var(--wl-pink-rgb), 0.4);
}

.fame-branch-value[b-vfrrcidmhf] {
    font-size: 1.25rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-variant-numeric: tabular-nums;
}

/* ============================================
   FAN TIERS
   ============================================ */

.fame-fans-grid[b-vfrrcidmhf] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
}

.fame-fans-total[b-vfrrcidmhf] {
    text-align: center;
}

.fame-fans-total-value[b-vfrrcidmhf] {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    line-height: 1;
    color: var(--wl-text-primary);
    text-shadow: 0 0 30px rgba(var(--wl-contrast-rgb), 0.2);
}

.fame-fans-total-label[b-vfrrcidmhf] {
    display: block;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
    margin-top: 0.25rem;
}

.fame-fans-chart[b-vfrrcidmhf] {
    width: 80px;
    height: 80px;
}

.fame-pie[b-vfrrcidmhf] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.fame-fans-legend[b-vfrrcidmhf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.fame-fans-tier[b-vfrrcidmhf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
}

.fame-tier-dot[b-vfrrcidmhf] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.fame-fans-tier.casual .fame-tier-dot[b-vfrrcidmhf] {
    background: var(--wl-text-muted);
}

.fame-fans-tier.regular .fame-tier-dot[b-vfrrcidmhf] {
    background: var(--wl-gold);
    box-shadow: 0 0 6px rgba(var(--wl-gold-rgb), 0.5);
}

.fame-fans-tier.hardcore .fame-tier-dot[b-vfrrcidmhf] {
    background: var(--wl-purple);
    box-shadow: 0 0 6px rgba(var(--wl-purple-rgb), 0.5);
}

.fame-tier-label[b-vfrrcidmhf] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
    flex: 1;
}

.fame-tier-value[b-vfrrcidmhf] {
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-variant-numeric: tabular-nums;
}

/* ============================================
   TOP COUNTRIES
   ============================================ */

.fame-top-countries[b-vfrrcidmhf] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-radius: 8px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    margin-top: 0.25rem;
}

.fame-top-countries-header[b-vfrrcidmhf] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin-bottom: 0.125rem;
}

.fame-top-country-row[b-vfrrcidmhf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fame-top-country-name[b-vfrrcidmhf] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.fame-top-country-fans[b-vfrrcidmhf] {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

/* ============================================
   REPUTATION GAUGE
   ============================================ */

.fame-reputation[b-vfrrcidmhf] {
    padding: 0.5rem 0;
}

.fame-reputation-gauge[b-vfrrcidmhf] {
    position: relative;
    height: 12px;
    background: linear-gradient(90deg,
        #c0392b 0%,
        #e67e22 20%,
        var(--wl-border-medium) 50%,
        var(--wl-gold) 80%,
        #27ae60 100%);
    border-radius: 6px;
    overflow: visible;
    margin-bottom: 0.75rem;
}

.fame-reputation-needle[b-vfrrcidmhf] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 20px;
    background: #FFFFFF;
    border-radius: 2px;
    box-shadow: 0 0 10px var(--wl-text-muted);
}

.fame-reputation-labels[b-vfrrcidmhf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fame-rep-label[b-vfrrcidmhf] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fame-rep-label.negative[b-vfrrcidmhf] {
    color: rgba(var(--wl-red-rgb), 0.7);
}

.fame-rep-label.positive[b-vfrrcidmhf] {
    color: rgba(34, 197, 94, 0.7);
}

.fame-rep-value[b-vfrrcidmhf] {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fame-rep-value.positive[b-vfrrcidmhf] {
    color: #22C55E;
}

.fame-rep-value.negative[b-vfrrcidmhf] {
    color: #EF4444;
}

/* ============================================
   ZEITGEIST RADAR
   ============================================ */

.fame-zeitgeist[b-vfrrcidmhf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.fame-radar-container[b-vfrrcidmhf] {
    display: flex;
    justify-content: center;
}

.fame-radar[b-vfrrcidmhf] {
    width: 200px;
    height: 150px;
}

.fame-radar text[b-vfrrcidmhf] {
    font-size: 11px;
    font-family: 'Source Sans 3', sans-serif;
}

/* Zeitgeist data table */
.fame-zeitgeist-data[b-vfrrcidmhf] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-radius: 8px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.fame-zeitgeist-row[b-vfrrcidmhf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.fame-zeitgeist-axis-label[b-vfrrcidmhf] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fame-zeitgeist-values[b-vfrrcidmhf] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-variant-numeric: tabular-nums;
}

.fame-zeitgeist-val[b-vfrrcidmhf] {
    font-size: 0.75rem;
    font-weight: 600;
}

.fame-zeitgeist-val.zeitgeist-color[b-vfrrcidmhf] {
    color: var(--wl-gold);
}

.fame-zeitgeist-val.character-color[b-vfrrcidmhf] {
    color: var(--wl-purple);
}

.fame-zeitgeist-sep[b-vfrrcidmhf] {
    font-size: 0.625rem;
    color: rgba(var(--wl-contrast-rgb), 0.2);
}

.fame-radar-legend[b-vfrrcidmhf] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.fame-radar-item[b-vfrrcidmhf] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.fame-radar-item .fame-radar-dot[b-vfrrcidmhf] {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.fame-radar-item.zeitgeist .fame-radar-dot[b-vfrrcidmhf] {
    background: var(--wl-gold);
}

.fame-radar-item.character .fame-radar-dot[b-vfrrcidmhf] {
    background: var(--wl-purple);
}

.fame-alignment[b-vfrrcidmhf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
}

.fame-alignment-label[b-vfrrcidmhf] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.fame-alignment-value[b-vfrrcidmhf] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.fame-hotspot-badge[b-vfrrcidmhf] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.2) 0%, rgba(249, 115, 22, 0.1) 100%);
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 100px;
    font-size: 0.625rem;
    font-weight: 700;
    color: #F97316;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fame-hotspot-badge svg[b-vfrrcidmhf] {
    width: 0.875rem;
    height: 0.875rem;
    color: #F97316;
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animate-fade-in[b-vfrrcidmhf] {
    animation: fadeIn-b-vfrrcidmhf 0.5s ease-out forwards;
    opacity: 0;
}

@keyframes fadeIn-b-vfrrcidmhf {
    to { opacity: 1; }
}

.delay-50[b-vfrrcidmhf] { animation-delay: 0.05s; }
.delay-100[b-vfrrcidmhf] { animation-delay: 0.1s; }
.delay-200[b-vfrrcidmhf] { animation-delay: 0.2s; }
.delay-300[b-vfrrcidmhf] { animation-delay: 0.3s; }
.delay-350[b-vfrrcidmhf] { animation-delay: 0.35s; }
.delay-400[b-vfrrcidmhf] { animation-delay: 0.4s; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .fame-dashboard[b-vfrrcidmhf] {
        padding: 1rem;
    }

    .fame-global-inner[b-vfrrcidmhf] {
        padding: 1.25rem;
    }

    .fame-global-number[b-vfrrcidmhf] {
        font-size: 3rem;
    }

    .fame-reach-copy[b-vfrrcidmhf] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .fame-fans-grid[b-vfrrcidmhf] {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .fame-fans-chart[b-vfrrcidmhf] {
        margin: 0 auto;
    }

    .fame-fans-legend[b-vfrrcidmhf] {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ==================== Reputation Tier Badge ==================== */
.rep-tier-badge[b-vfrrcidmhf] {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-left: 0.5rem;
}

.rep-tier-badge.tier-beloved[b-vfrrcidmhf] { background: rgba(34, 197, 94, 0.2); color: #22C55E; }
.rep-tier-badge.tier-wellliked[b-vfrrcidmhf] { background: rgba(34, 197, 94, 0.1); color: #86EFAC; }
.rep-tier-badge.tier-neutral[b-vfrrcidmhf] { background: rgba(var(--wl-contrast-rgb), 0.1); color: var(--wl-text-muted); }
.rep-tier-badge.tier-controversial[b-vfrrcidmhf] { background: rgba(239, 68, 68, 0.1); color: rgba(239, 68, 68, 0.8); }
.rep-tier-badge.tier-infamous[b-vfrrcidmhf] { background: rgba(239, 68, 68, 0.2); color: #EF4444; }

/* Active Bonuses */
.rep-bonuses[b-vfrrcidmhf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.rep-bonus[b-vfrrcidmhf] {
    font-size: 0.625rem;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.rep-bonus.positive[b-vfrrcidmhf] {
    background: rgba(34, 197, 94, 0.1);
    color: #22C55E;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.rep-bonus.dark[b-vfrrcidmhf] {
    background: rgba(239, 68, 68, 0.1);
    color: rgba(239, 68, 68, 0.8);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.rep-bonus.neutral[b-vfrrcidmhf] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
}

/* Decay indicator */
.rep-decay[b-vfrrcidmhf] {
    font-size: 0.625rem;
    color: var(--wl-text-muted);
    font-style: italic;
    padding: 0.125rem 0.5rem;
}
/* /Components/Pages/Fame/MilestoneTracker.razor.rz.scp.css */
/* ============================================
   MILESTONE TRACKER
   ============================================ */

.milestone-tracker[b-k36wrdfi8d] {
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
}

.fame-section-title[b-k36wrdfi8d] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin-bottom: 1rem;
}

.fame-section-title svg[b-k36wrdfi8d] {
    width: 1rem;
    height: 1rem;
    opacity: 0.8;
}

.milestone-tracker[b-k36wrdfi8d]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 50%,
        transparent 100%);
}

/* Milestone list */
.milestone-list[b-k36wrdfi8d] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* Individual milestone card */
.milestone-card[b-k36wrdfi8d] {
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.milestone-card:hover[b-k36wrdfi8d] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: var(--wl-border-medium);
}

.milestone-header[b-k36wrdfi8d] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.milestone-name[b-k36wrdfi8d] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.milestone-percent[b-k36wrdfi8d] {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wl-gold);
    font-variant-numeric: tabular-nums;
}

/* Progress bar */
.milestone-bar[b-k36wrdfi8d] {
    height: 6px;
    background: var(--wl-border-medium);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.milestone-bar-fill[b-k36wrdfi8d] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold-dark) 0%, var(--wl-gold) 50%, #F5D76E 100%);
    border-radius: 3px;
    box-shadow: 0 0 12px rgba(var(--wl-gold-rgb), 0.3);
    transition: width 0.8s ease-out;
}

/* Values */
.milestone-values[b-k36wrdfi8d] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    font-variant-numeric: tabular-nums;
}

.milestone-current[b-k36wrdfi8d] {
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.milestone-separator[b-k36wrdfi8d] {
    opacity: 0.5;
}

.milestone-target[b-k36wrdfi8d] {
    font-weight: 500;
}
/* /Components/Pages/Fame/SocialInteractionsSection.razor.rz.scp.css */
/* ============================================
   SOCIAL INTERACTIONS SECTION - Fame 2.0
   Theme: Editorial luxury with social cards grid
   ============================================ */

.social-section[b-lg0fy17gda] {
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

.social-section[b-lg0fy17gda]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-purple-rgb), 0.4) 50%,
        transparent 100%);
}

/* Header */
.section-header[b-lg0fy17gda] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

.section-icon[b-lg0fy17gda] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-purple);
}

.section-icon svg[b-lg0fy17gda] {
    width: 100%;
    height: 100%;
}

.section-header h2[b-lg0fy17gda] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-purple);
    margin: 0;
    flex: 1;
}

.view-all-link[b-lg0fy17gda] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--wl-gold);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 4px;
    background: linear-gradient(180deg,
        var(--wl-gold-bg) 0%,
        rgba(var(--wl-gold-rgb), 0.05) 100%);
    transition: all 0.2s;
}

.view-all-link:hover[b-lg0fy17gda] {
    color: var(--wl-gold-light);
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    background: linear-gradient(180deg,
        var(--wl-gold-bg-hover) 0%,
        rgba(var(--wl-gold-rgb), 0.08) 100%);
    box-shadow: 0 0 12px var(--wl-gold-bg-hover);
}

/* Loading State */
.loading[b-lg0fy17gda] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 3rem 1rem;
}

.loading-spinner[b-lg0fy17gda] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(var(--wl-purple-rgb), 0.2);
    border-top-color: var(--wl-purple);
    border-radius: 50%;
    animation: spin-b-lg0fy17gda 1s linear infinite;
}

@keyframes spin-b-lg0fy17gda {
    to { transform: rotate(360deg); }
}

.text-muted[b-lg0fy17gda] {
    color: var(--wl-text-muted);
    font-size: 0.875rem;
}

/* Social Cards Grid */
.social-cards[b-lg0fy17gda] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

@media (min-width: 768px) {
    .social-cards[b-lg0fy17gda] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .social-cards[b-lg0fy17gda] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .social-cards[b-lg0fy17gda] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Social Card */
.social-card[b-lg0fy17gda] {
    background: linear-gradient(135deg,
        rgba(30, 30, 35, 0.8) 0%,
        rgba(25, 25, 30, 0.9) 100%);
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.social-card[b-lg0fy17gda]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    transition: opacity 0.2s;
    opacity: 0;
}

.social-card:hover[b-lg0fy17gda] {
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    transform: translateY(-2px);
}

.social-card:hover[b-lg0fy17gda]::before {
    opacity: 1;
}

/* Card Types */
.beef-card[b-lg0fy17gda]::before {
    background: linear-gradient(90deg, #EF4444, #DC2626);
}

.collab-card[b-lg0fy17gda]::before {
    background: linear-gradient(90deg, #10B981, #059669);
}

.invite-card[b-lg0fy17gda]::before {
    background: linear-gradient(90deg, #F59E0B, #D97706);
}

.mentor-card[b-lg0fy17gda]::before {
    background: linear-gradient(90deg, #3B82F6, #2563EB);
}

.mentoring-card[b-lg0fy17gda]::before {
    background: linear-gradient(90deg, var(--wl-purple), #7C3AED);
}

.rivalry-card[b-lg0fy17gda]::before {
    background: linear-gradient(90deg, var(--wl-pink), #DB2777);
}

/* Card Content */
.card-type[b-lg0fy17gda] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.7;
}

.beef-card .card-type[b-lg0fy17gda] {
    color: #EF4444;
}

.collab-card .card-type[b-lg0fy17gda] {
    color: #10B981;
}

.invite-card .card-type[b-lg0fy17gda] {
    color: #F59E0B;
}

.mentor-card .card-type[b-lg0fy17gda] {
    color: #3B82F6;
}

.mentoring-card .card-type[b-lg0fy17gda] {
    color: var(--wl-purple);
}

.rivalry-card .card-type[b-lg0fy17gda] {
    color: var(--wl-pink);
}

.opponent-name[b-lg0fy17gda],
.partner-name[b-lg0fy17gda],
.mentor-name[b-lg0fy17gda],
.rival-name[b-lg0fy17gda] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.heat-level[b-lg0fy17gda],
.status[b-lg0fy17gda],
.count[b-lg0fy17gda],
.expires[b-lg0fy17gda],
.score[b-lg0fy17gda] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.turn-status[b-lg0fy17gda] {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    text-align: center;
    margin-top: 0.25rem;
}

.beef-card .turn-status[b-lg0fy17gda] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: #EF4444;
}

/* Empty State */
.empty-state[b-lg0fy17gda] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state p[b-lg0fy17gda] {
    color: var(--wl-text-muted);
    font-size: 0.875rem;
    margin: 0 0 1rem 0;
}

.find-players-btn[b-lg0fy17gda] {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-purple), #7C3AED);
    color: var(--wl-text-primary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s;
    border: 1px solid rgba(var(--wl-purple-rgb), 0.3);
}

.find-players-btn:hover[b-lg0fy17gda] {
    background: linear-gradient(135deg, #7C3AED, #6D28D9);
    border-color: rgba(var(--wl-purple-rgb), 0.5);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 640px) {
    .social-section[b-lg0fy17gda] {
        padding: 1.25rem;
    }

    .social-cards[b-lg0fy17gda] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .social-card[b-lg0fy17gda] {
        padding: 0.875rem;
    }
}
/* /Components/Pages/Feedback/Detail.razor.rz.scp.css */
.feedback-detail-page[b-pzyenasy7t] {
    min-height: calc(100vh - 4rem);
    padding: 2rem clamp(1rem, 3vw, 2.5rem) 3.5rem;
    background:
        linear-gradient(180deg, rgba(var(--wl-bg-modal-deep-rgb), 0.78), rgba(var(--wl-bg-primary-rgb), 0.96)),
        var(--wl-bg-primary);
}

.feedback-detail-shell[b-pzyenasy7t] {
    max-width: 980px;
    margin: 0 auto;
}

.back-link[b-pzyenasy7t] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.back-link svg[b-pzyenasy7t] {
    width: 1rem;
    height: 1rem;
}

.back-link:hover[b-pzyenasy7t] {
    color: var(--wl-gold);
}

.detail-hero[b-pzyenasy7t],
.detail-admin-panel[b-pzyenasy7t],
.comments-panel[b-pzyenasy7t],
.detail-loading[b-pzyenasy7t],
.detail-empty[b-pzyenasy7t] {
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.72);
}

.detail-hero[b-pzyenasy7t] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.5rem;
    gap: 1rem;
    align-items: start;
    padding: 1.25rem;
}

.detail-hero-main[b-pzyenasy7t] {
    min-width: 0;
}

.detail-hero h1[b-pzyenasy7t] {
    margin: 0.75rem 0 0;
    color: var(--wl-text-primary);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(2.4rem, 5vw, 4.4rem);
    font-weight: 400;
    letter-spacing: 0.03em;
    line-height: 0.95;
}

.detail-message[b-pzyenasy7t] {
    margin: 1rem 0 0;
    color: var(--wl-text-secondary);
    font-size: 1rem;
    line-height: 1.65;
    white-space: pre-wrap;
}

.detail-meta[b-pzyenasy7t],
.comment-meta[b-pzyenasy7t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    color: var(--wl-text-muted);
    font-size: 0.8rem;
}

.detail-meta[b-pzyenasy7t] {
    margin-top: 1rem;
}

.detail-score-panel[b-pzyenasy7t] {
    display: grid;
    justify-items: center;
    gap: 0.55rem;
    padding: 0.85rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.035);
}

.vote-button[b-pzyenasy7t],
.secondary-action[b-pzyenasy7t],
.submit-button[b-pzyenasy7t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-weight: 900;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.vote-button[b-pzyenasy7t] {
    width: 3rem;
    height: 2.45rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.045);
}

.vote-button svg[b-pzyenasy7t],
.submit-button svg[b-pzyenasy7t] {
    width: 1.1rem;
    height: 1.1rem;
}

.vote-button:hover[b-pzyenasy7t],
.secondary-action:hover[b-pzyenasy7t] {
    transform: translateY(-1px);
}

.vote-button.active[b-pzyenasy7t] {
    color: var(--wl-bg-primary);
    border-color: var(--wl-gold);
    background: var(--wl-gold);
}

.vote-button.active.down[b-pzyenasy7t] {
    color: #fff;
    border-color: rgba(var(--wl-red-rgb), 0.7);
    background: rgb(var(--wl-red-rgb));
}

.score-total[b-pzyenasy7t] {
    display: grid;
    justify-items: center;
}

.score-total span[b-pzyenasy7t] {
    color: var(--wl-text-primary);
    font-size: 2.6rem;
    font-weight: 950;
    line-height: 1;
}

.score-total.positive span[b-pzyenasy7t] {
    color: #86efac;
}

.score-total.negative span[b-pzyenasy7t] {
    color: #fca5a5;
}

.score-total small[b-pzyenasy7t] {
    color: var(--wl-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.feedback-badges[b-pzyenasy7t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.feedback-badge[b-pzyenasy7t] {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 6px;
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.04);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.feedback-badge.new[b-pzyenasy7t] {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.28);
    background: rgba(59, 130, 246, 0.1);
}

.feedback-badge.review[b-pzyenasy7t],
.feedback-badge.planned[b-pzyenasy7t] {
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.34);
    background: rgba(var(--wl-gold-rgb), 0.09);
}

.feedback-badge.progress[b-pzyenasy7t] {
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.09);
}

.feedback-badge.resolved[b-pzyenasy7t] {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.09);
}

.feedback-badge.type[b-pzyenasy7t] {
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.28);
    background: rgba(139, 92, 246, 0.08);
}

.feedback-badge.severity[b-pzyenasy7t] {
    color: #fca5a5;
    border-color: rgba(var(--wl-red-rgb), 0.26);
    background: rgba(var(--wl-red-rgb), 0.08);
}

.comments-panel[b-pzyenasy7t] {
    margin-top: 1rem;
    padding: 1rem;
}

.detail-admin-panel[b-pzyenasy7t] {
    display: grid;
    gap: 0.9rem;
    margin-top: 1rem;
    padding: 1rem;
    border-color: rgba(var(--wl-gold-rgb), 0.22);
    background:
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.08), rgba(var(--wl-contrast-rgb), 0.035)),
        rgba(var(--wl-bg-secondary-rgb), 0.72);
}

.admin-panel-header[b-pzyenasy7t] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.admin-panel-header p[b-pzyenasy7t] {
    margin: 0 0 0.35rem;
    color: var(--wl-gold);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-panel-header h2[b-pzyenasy7t] {
    margin: 0;
    color: var(--wl-text-primary);
    font-size: 1.7rem;
    line-height: 1;
}

.admin-panel-actions[b-pzyenasy7t] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: flex-end;
    gap: 0.6rem;
}

.admin-panel-actions label[b-pzyenasy7t],
.admin-edit-panel label[b-pzyenasy7t] {
    display: grid;
    gap: 0.35rem;
    color: var(--wl-text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.admin-panel-actions select[b-pzyenasy7t],
.admin-edit-panel input[b-pzyenasy7t],
.admin-edit-panel select[b-pzyenasy7t],
.admin-edit-panel textarea[b-pzyenasy7t] {
    width: 100%;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 8px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.68);
    color: var(--wl-text-primary);
}

.admin-panel-actions select[b-pzyenasy7t],
.admin-edit-panel input[b-pzyenasy7t],
.admin-edit-panel select[b-pzyenasy7t] {
    min-height: 2.3rem;
    padding: 0 0.75rem;
}

.admin-edit-panel[b-pzyenasy7t] {
    display: grid;
    gap: 0.75rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
}

.admin-edit-grid[b-pzyenasy7t] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.admin-edit-panel textarea[b-pzyenasy7t] {
    min-height: 7rem;
    padding: 0.75rem;
    resize: vertical;
}

.comments-header[b-pzyenasy7t] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.comments-header p[b-pzyenasy7t] {
    margin: 0 0 0.35rem;
    color: var(--wl-gold);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.comments-header h2[b-pzyenasy7t] {
    margin: 0;
    color: var(--wl-text-primary);
    font-size: 2rem;
    font-weight: 900;
}

.comment-list[b-pzyenasy7t] {
    display: grid;
    gap: 0.75rem;
}

.comment-card[b-pzyenasy7t] {
    display: grid;
    grid-template-columns: 2.8rem minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0.9rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.035);
}

.comment-avatar[b-pzyenasy7t] {
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-radius: 8px;
    background: rgba(var(--wl-gold-rgb), 0.08);
    overflow: hidden;
}

.comment-avatar img[b-pzyenasy7t] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.comment-body[b-pzyenasy7t] {
    min-width: 0;
}

.comment-meta[b-pzyenasy7t] {
    align-items: center;
}

.comment-meta strong[b-pzyenasy7t] {
    color: var(--wl-text-primary);
}

.comment-body p[b-pzyenasy7t] {
    margin: 0.5rem 0 0;
    color: var(--wl-text-secondary);
    line-height: 1.55;
    white-space: pre-wrap;
}

.comment-actions[b-pzyenasy7t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.secondary-action[b-pzyenasy7t] {
    min-height: 2.25rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.04);
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.secondary-action.danger[b-pzyenasy7t] {
    color: #fecaca;
    border-color: rgba(var(--wl-red-rgb), 0.28);
    background: rgba(var(--wl-red-rgb), 0.08);
}

.secondary-action.muted[b-pzyenasy7t] {
    color: var(--wl-text-muted);
}

.comment-edit-box[b-pzyenasy7t],
.comment-composer textarea[b-pzyenasy7t] {
    width: 100%;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 8px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.68);
    color: var(--wl-text-primary);
    resize: vertical;
}

.comment-edit-box[b-pzyenasy7t] {
    min-height: 7rem;
    margin-top: 0.6rem;
    padding: 0.75rem;
}

.comment-composer[b-pzyenasy7t] {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
}

.comment-composer label[b-pzyenasy7t] {
    display: grid;
    gap: 0.4rem;
    color: var(--wl-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.comment-composer textarea[b-pzyenasy7t] {
    min-height: 8rem;
    padding: 0.8rem 0.85rem;
}

.submit-button[b-pzyenasy7t] {
    justify-self: end;
    gap: 0.45rem;
    min-height: 2.65rem;
    padding: 0 0.95rem;
    border: 1px solid var(--wl-gold);
    color: var(--wl-bg-primary);
    background: var(--wl-gold);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.submit-button:disabled[b-pzyenasy7t] {
    opacity: 0.58;
}

.feedback-error[b-pzyenasy7t] {
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
    border-radius: 8px;
    color: #fecaca;
    background: rgba(var(--wl-red-rgb), 0.08);
    font-size: 0.88rem;
}

.comment-empty[b-pzyenasy7t],
.detail-loading[b-pzyenasy7t],
.detail-empty[b-pzyenasy7t] {
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    min-height: 12rem;
    padding: 2rem;
    color: var(--wl-text-muted);
    text-align: center;
}

.detail-empty strong[b-pzyenasy7t] {
    color: var(--wl-text-primary);
}

.detail-empty a[b-pzyenasy7t] {
    color: var(--wl-gold);
}

.spinner[b-pzyenasy7t] {
    width: 2.2rem;
    height: 2.2rem;
    border: 3px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-top-color: var(--wl-gold);
    border-radius: 999px;
    animation: spin-b-pzyenasy7t 0.8s linear infinite;
}

@keyframes spin-b-pzyenasy7t {
    to { transform: rotate(360deg); }
}

@media (max-width: 760px) {
    .feedback-detail-page[b-pzyenasy7t] {
        padding: 1rem 0.85rem 2rem;
    }

    .detail-hero[b-pzyenasy7t] {
        grid-template-columns: 1fr;
    }

    .detail-score-panel[b-pzyenasy7t] {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .admin-panel-header[b-pzyenasy7t],
    .admin-panel-actions[b-pzyenasy7t],
    .admin-edit-grid[b-pzyenasy7t] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-panel-actions[b-pzyenasy7t] {
        justify-content: stretch;
    }

    .comment-card[b-pzyenasy7t] {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        padding: 0.8rem;
    }
}
/* /Components/Pages/Feedback/Index.razor.rz.scp.css */
.feedback-tracker-page[b-walz4a2rx9] {
    min-height: calc(100vh - 4rem);
    padding: 2rem clamp(1rem, 3vw, 2.5rem) 3.5rem;
    background:
        linear-gradient(180deg, rgba(var(--wl-bg-modal-deep-rgb), 0.78), rgba(var(--wl-bg-primary-rgb), 0.96)),
        var(--wl-bg-primary);
}

.feedback-shell[b-walz4a2rx9] {
    max-width: 1320px;
    margin: 0 auto;
}

.feedback-hero[b-walz4a2rx9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1rem;
}

.feedback-hero-copy[b-walz4a2rx9] {
    max-width: 760px;
}

.feedback-eyebrow[b-walz4a2rx9],
.section-heading p[b-walz4a2rx9],
.composer-header p[b-walz4a2rx9] {
    margin: 0 0 0.35rem;
    color: var(--wl-gold);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.feedback-hero h1[b-walz4a2rx9],
.section-heading h2[b-walz4a2rx9],
.composer-header h2[b-walz4a2rx9] {
    margin: 0;
    color: var(--wl-text-primary);
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    letter-spacing: 0.03em;
}

.feedback-hero h1[b-walz4a2rx9] {
    font-size: clamp(2.8rem, 6vw, 5.4rem);
    line-height: 0.9;
}

.feedback-hero p:last-child[b-walz4a2rx9] {
    max-width: 48rem;
    margin: 0.8rem 0 0;
    color: var(--wl-text-secondary);
    font-size: 1rem;
    line-height: 1.55;
}

.feedback-hero-stats[b-walz4a2rx9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(8rem, 1fr));
    gap: 0.75rem;
}

.feedback-hero-stats > div[b-walz4a2rx9],
.feedback-success[b-walz4a2rx9],
.feedback-top-section[b-walz4a2rx9],
.feedback-main[b-walz4a2rx9],
.feedback-modal[b-walz4a2rx9],
.feedback-empty[b-walz4a2rx9] {
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.72);
}

.feedback-hero-stats > div[b-walz4a2rx9] {
    padding: 1rem;
}

.feedback-hero-stats span[b-walz4a2rx9] {
    display: block;
    color: var(--wl-text-primary);
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.feedback-hero-stats small[b-walz4a2rx9] {
    display: block;
    margin-top: 0.3rem;
    color: var(--wl-text-muted);
    font-size: 0.78rem;
}

.feedback-success[b-walz4a2rx9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    color: #bbf7d0;
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.08);
}

.feedback-success strong[b-walz4a2rx9] {
    color: #dcfce7;
}

.feedback-top-section[b-walz4a2rx9] {
    padding: 1rem;
    margin-bottom: 1rem;
}

.section-heading[b-walz4a2rx9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.section-heading h2[b-walz4a2rx9],
.composer-header h2[b-walz4a2rx9] {
    font-size: 1.8rem;
}

.icon-button[b-walz4a2rx9],
.open-link[b-walz4a2rx9],
.vote-button[b-walz4a2rx9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-secondary);
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.icon-button[b-walz4a2rx9] {
    width: 2.5rem;
    height: 2.5rem;
}

.icon-button svg[b-walz4a2rx9],
.open-link svg[b-walz4a2rx9],
.vote-button svg[b-walz4a2rx9],
.search-box svg[b-walz4a2rx9],
.mine-toggle svg[b-walz4a2rx9],
.feedback-create-button svg[b-walz4a2rx9],
.public-notice svg[b-walz4a2rx9],
.submit-button svg[b-walz4a2rx9] {
    width: 1.05rem;
    height: 1.05rem;
}

.icon-button:hover[b-walz4a2rx9],
.open-link:hover[b-walz4a2rx9],
.vote-button:hover[b-walz4a2rx9] {
    border-color: rgba(var(--wl-gold-rgb), 0.36);
    color: var(--wl-text-primary);
    background: rgba(var(--wl-gold-rgb), 0.08);
    transform: translateY(-1px);
}

.feedback-top-grid[b-walz4a2rx9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.top-issue-card[b-walz4a2rx9],
.issue-card[b-walz4a2rx9] {
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.035);
}

.top-issue-card[b-walz4a2rx9] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: start;
    min-height: 10rem;
    padding: 0.95rem;
}

.top-issue-rank[b-walz4a2rx9] {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 8px;
    color: var(--wl-bg-primary);
    background: var(--wl-gold);
    font-weight: 900;
}

.top-issue-body[b-walz4a2rx9] {
    min-width: 0;
}

.top-issue-body a[b-walz4a2rx9],
.issue-title[b-walz4a2rx9] {
    color: var(--wl-text-primary);
    font-weight: 900;
    line-height: 1.22;
    text-decoration: none;
}

.top-issue-body a[b-walz4a2rx9] {
    display: block;
    margin-top: 0.65rem;
    font-size: 1.02rem;
}

.top-issue-body a:hover[b-walz4a2rx9],
.issue-title:hover[b-walz4a2rx9] {
    color: var(--wl-gold);
}

.top-issue-body p[b-walz4a2rx9],
.issue-card-content p[b-walz4a2rx9] {
    display: -webkit-box;
    overflow: hidden;
    margin: 0.45rem 0 0;
    color: var(--wl-text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
}

.top-issue-body p[b-walz4a2rx9] {
    -webkit-line-clamp: 3;
}

.issue-card-content p[b-walz4a2rx9] {
    -webkit-line-clamp: 2;
}

.feedback-badges[b-walz4a2rx9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.feedback-badge[b-walz4a2rx9] {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 6px;
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.04);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.feedback-badge.new[b-walz4a2rx9] {
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.28);
    background: rgba(59, 130, 246, 0.1);
}

.feedback-badge.review[b-walz4a2rx9],
.feedback-badge.planned[b-walz4a2rx9] {
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.34);
    background: rgba(var(--wl-gold-rgb), 0.09);
}

.feedback-badge.progress[b-walz4a2rx9] {
    color: #67e8f9;
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.09);
}

.feedback-badge.resolved[b-walz4a2rx9] {
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.28);
    background: rgba(34, 197, 94, 0.09);
}

.feedback-badge.type[b-walz4a2rx9] {
    color: #c4b5fd;
    border-color: rgba(139, 92, 246, 0.28);
    background: rgba(139, 92, 246, 0.08);
}

.feedback-badge.severity[b-walz4a2rx9] {
    color: #fca5a5;
    border-color: rgba(var(--wl-red-rgb), 0.26);
    background: rgba(var(--wl-red-rgb), 0.08);
}

.score-chip[b-walz4a2rx9] {
    display: grid;
    justify-items: center;
    min-width: 3.7rem;
    padding: 0.55rem 0.5rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 8px;
}

.score-chip span[b-walz4a2rx9],
.vote-score[b-walz4a2rx9] {
    color: var(--wl-text-primary);
    font-weight: 900;
}

.score-chip span[b-walz4a2rx9] {
    font-size: 1.45rem;
    line-height: 1;
}

.score-chip small[b-walz4a2rx9] {
    margin-top: 0.2rem;
    color: var(--wl-text-muted);
    font-size: 0.72rem;
}

.score-chip.positive span[b-walz4a2rx9],
.vote-score.positive[b-walz4a2rx9] {
    color: #86efac;
}

.score-chip.negative span[b-walz4a2rx9],
.vote-score.negative[b-walz4a2rx9] {
    color: #fca5a5;
}

.feedback-workspace[b-walz4a2rx9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.feedback-main[b-walz4a2rx9],
.feedback-modal[b-walz4a2rx9] {
    padding: 1rem;
}

.feedback-main[b-walz4a2rx9] {
    --feedback-toolbar-control-height: 3rem;
}

.feedback-toolbar[b-walz4a2rx9] {
    display: grid;
    grid-template-columns: minmax(260px, 1.1fr) minmax(0, 1.5fr) auto;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
}

.feedback-toolbar-actions[b-walz4a2rx9] {
    display: flex;
    align-items: end;
    gap: 0.65rem;
}

.search-box[b-walz4a2rx9],
.filter-grid select[b-walz4a2rx9],
.mine-toggle[b-walz4a2rx9],
.feedback-create-button[b-walz4a2rx9] {
    height: var(--feedback-toolbar-control-height);
    min-height: var(--feedback-toolbar-control-height);
}

.search-box[b-walz4a2rx9] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0 0.85rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.045);
    color: var(--wl-text-muted);
}

.search-box input[b-walz4a2rx9],
.feedback-form input[b-walz4a2rx9],
.feedback-form select[b-walz4a2rx9],
.feedback-form textarea[b-walz4a2rx9],
.filter-grid select[b-walz4a2rx9] {
    width: 100%;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 8px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.68);
    color: var(--wl-text-primary);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.search-box input[b-walz4a2rx9] {
    border: 0;
    padding: 0;
    background: transparent;
}

.search-box input:focus[b-walz4a2rx9],
.feedback-form input:focus[b-walz4a2rx9],
.feedback-form select:focus[b-walz4a2rx9],
.feedback-form textarea:focus[b-walz4a2rx9],
.filter-grid select:focus[b-walz4a2rx9] {
    border-color: rgba(var(--wl-gold-rgb), 0.52);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.1);
    outline: none;
}

.filter-grid[b-walz4a2rx9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
}

.filter-grid label[b-walz4a2rx9],
.feedback-form label[b-walz4a2rx9] {
    display: grid;
    gap: 0.35rem;
    color: var(--wl-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.filter-grid select[b-walz4a2rx9],
.feedback-form input[b-walz4a2rx9],
.feedback-form select[b-walz4a2rx9] {
    padding: 0 0.75rem;
}

.feedback-form input[b-walz4a2rx9],
.feedback-form select[b-walz4a2rx9] {
    min-height: 2.65rem;
}

.mine-toggle[b-walz4a2rx9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0 0.95rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 8px;
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.045);
    font-weight: 800;
}

.feedback-create-button[b-walz4a2rx9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0 1rem;
    border: 1px solid var(--wl-gold);
    border-radius: 8px;
    color: var(--wl-bg-primary);
    background: var(--wl-gold);
    font-weight: 900;
    white-space: nowrap;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.feedback-create-button:hover[b-walz4a2rx9] {
    border-color: var(--wl-gold-light);
    background: var(--wl-gold-light);
    transform: translateY(-1px);
}

.mine-toggle.active[b-walz4a2rx9] {
    color: var(--wl-bg-primary);
    border-color: var(--wl-gold);
    background: var(--wl-gold);
}

.list-heading[b-walz4a2rx9] {
    margin-top: 0.25rem;
}

.feedback-list[b-walz4a2rx9] {
    display: grid;
    gap: 0.65rem;
}

.load-more-row[b-walz4a2rx9] {
    display: flex;
    justify-content: center;
    padding-top: 0.95rem;
}

.load-more-button[b-walz4a2rx9] {
    min-width: 11rem;
    min-height: 2.6rem;
    padding: 0 1rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.38);
    border-radius: 8px;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.08);
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.load-more-button:disabled[b-walz4a2rx9] {
    opacity: 0.62;
}

.issue-card[b-walz4a2rx9] {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) 2.5rem;
    gap: 0.85rem;
    align-items: center;
    padding: 0.85rem;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.issue-card:hover[b-walz4a2rx9] {
    border-color: rgba(var(--wl-gold-rgb), 0.26);
    background: rgba(var(--wl-contrast-rgb), 0.055);
    transform: translateY(-1px);
}

.vote-column[b-walz4a2rx9] {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
}

.vote-button[b-walz4a2rx9] {
    width: 2rem;
    height: 1.8rem;
}

.vote-button.active[b-walz4a2rx9] {
    color: var(--wl-bg-primary);
    border-color: var(--wl-gold);
    background: var(--wl-gold);
}

.vote-button.active.down[b-walz4a2rx9] {
    color: #fff;
    border-color: rgba(var(--wl-red-rgb), 0.7);
    background: rgb(var(--wl-red-rgb));
}

.vote-score[b-walz4a2rx9] {
    min-width: 2.2rem;
    text-align: center;
    font-size: 1.2rem;
    line-height: 1;
}

.issue-card-content[b-walz4a2rx9] {
    min-width: 0;
}

.issue-title[b-walz4a2rx9] {
    display: inline-block;
    margin-top: 0.45rem;
    font-size: 1.08rem;
}

.issue-meta[b-walz4a2rx9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.8rem;
    margin-top: 0.55rem;
    color: var(--wl-text-muted);
    font-size: 0.78rem;
}

.open-link[b-walz4a2rx9] {
    width: 2.35rem;
    height: 2.35rem;
    text-decoration: none;
}

.composer-header[b-walz4a2rx9] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.composer-close[b-walz4a2rx9] {
    flex: 0 0 auto;
}

.feedback-modal-backdrop[b-walz4a2rx9] {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(var(--wl-bg-primary-rgb), 0.72);
    backdrop-filter: blur(14px);
}

.feedback-modal[b-walz4a2rx9] {
    width: min(46rem, calc(100vw - 2rem));
    max-height: min(88vh, 48rem);
    overflow-y: auto;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.45);
}

.public-notice[b-walz4a2rx9] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    margin-bottom: 1rem;
    padding: 0.85rem;
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 8px;
    color: #fde68a;
    background: rgba(245, 158, 11, 0.08);
    font-size: 0.88rem;
    line-height: 1.45;
}

.feedback-form[b-walz4a2rx9],
.form-grid[b-walz4a2rx9] {
    display: grid;
    gap: 0.85rem;
}

.form-grid[b-walz4a2rx9] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feedback-form textarea[b-walz4a2rx9] {
    min-height: 9rem;
    padding: 0.8rem 0.85rem;
    resize: vertical;
}

.feedback-error[b-walz4a2rx9] {
    padding: 0.75rem 0.85rem;
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
    border-radius: 8px;
    color: #fecaca;
    background: rgba(var(--wl-red-rgb), 0.08);
    font-size: 0.88rem;
}

.composer-actions[b-walz4a2rx9] {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
}

.ghost-button[b-walz4a2rx9],
.submit-button[b-walz4a2rx9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.65rem;
    padding: 0 0.95rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ghost-button[b-walz4a2rx9] {
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    color: var(--wl-text-secondary);
    background: transparent;
}

.submit-button[b-walz4a2rx9] {
    border: 1px solid var(--wl-gold);
    color: var(--wl-bg-primary);
    background: var(--wl-gold);
}

.submit-button:disabled[b-walz4a2rx9] {
    opacity: 0.58;
}

.feedback-empty[b-walz4a2rx9] {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    min-height: 14rem;
    padding: 2rem;
    text-align: center;
}

.feedback-empty.compact[b-walz4a2rx9] {
    min-height: 8rem;
}

.feedback-empty strong[b-walz4a2rx9] {
    color: var(--wl-text-primary);
}

.feedback-empty span[b-walz4a2rx9] {
    color: var(--wl-text-muted);
}

.feedback-skeleton-row[b-walz4a2rx9],
.feedback-skeleton-list[b-walz4a2rx9] {
    position: relative;
    overflow: hidden;
}

.feedback-skeleton-row[b-walz4a2rx9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.feedback-skeleton-row > div[b-walz4a2rx9],
.feedback-skeleton-list[b-walz4a2rx9] {
    min-height: 9rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.feedback-skeleton-list[b-walz4a2rx9] {
    min-height: 6.2rem;
}

@media (max-width: 1100px) {
    .feedback-workspace[b-walz4a2rx9],
    .feedback-hero[b-walz4a2rx9] {
        grid-template-columns: 1fr;
    }

    .feedback-toolbar[b-walz4a2rx9] {
        grid-template-columns: 1fr;
    }

    .feedback-toolbar-actions[b-walz4a2rx9] {
        align-items: stretch;
    }
}

@media (max-width: 820px) {
    .feedback-tracker-page[b-walz4a2rx9] {
        padding: 1rem 0.85rem 2rem;
    }

    .feedback-top-grid[b-walz4a2rx9],
    .feedback-skeleton-row[b-walz4a2rx9],
    .filter-grid[b-walz4a2rx9],
    .form-grid[b-walz4a2rx9],
    .feedback-hero-stats[b-walz4a2rx9] {
        grid-template-columns: 1fr;
    }

    .feedback-toolbar-actions[b-walz4a2rx9],
    .composer-actions[b-walz4a2rx9] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .mine-toggle[b-walz4a2rx9],
    .feedback-create-button[b-walz4a2rx9],
    .ghost-button[b-walz4a2rx9],
    .submit-button[b-walz4a2rx9] {
        width: 100%;
    }

    .feedback-modal-backdrop[b-walz4a2rx9] {
        place-items: end center;
        padding: 0.75rem;
    }

    .feedback-modal[b-walz4a2rx9] {
        width: 100%;
        max-height: calc(100vh - 1.5rem);
    }

    .issue-card[b-walz4a2rx9] {
        grid-template-columns: 2.75rem minmax(0, 1fr);
    }

    .open-link[b-walz4a2rx9] {
        display: none;
    }
}
/* /Components/Pages/GameSeasons/Index.razor.rz.scp.css */
.game-season-page[b-lu0z77hphm] {
    min-height: calc(100vh - 5rem);
    padding-bottom: 2rem;
    color: rgb(var(--wl-text-primary-rgb));
}

.game-season-empty[b-lu0z77hphm] {
    min-height: 52vh;
    display: grid;
    align-content: center;
    gap: 0.85rem;
    padding: 2rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 6px;
    background: var(--wl-panel-grad), rgb(var(--wl-bg-secondary-rgb));
}

.game-season-empty span[b-lu0z77hphm],
.game-season-meta span[b-lu0z77hphm],
.game-season-section-heading span[b-lu0z77hphm],
.game-season-featured > span[b-lu0z77hphm],
.game-season-task-main > span[b-lu0z77hphm] {
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.game-season-empty h1[b-lu0z77hphm],
.game-season-hero-copy h1[b-lu0z77hphm] {
    font-family: var(--font-display);
    font-size: clamp(2.7rem, 6vw, 5.5rem);
    line-height: 0.92;
    letter-spacing: 0;
}

.game-season-empty a[b-lu0z77hphm] {
    width: fit-content;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    padding: 0 0.85rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.34);
    border-radius: 4px;
    color: rgb(var(--wl-gold-rgb));
    font-weight: 900;
    text-transform: uppercase;
}

.game-season-hero[b-lu0z77hphm] {
    --game-season-hero-text: #fff7fb;
    --game-season-hero-muted: rgba(255, 247, 251, 0.84);
    --game-season-hero-soft: rgba(255, 247, 251, 0.68);

    position: relative;
    min-height: 28rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.35fr);
    gap: 1rem;
    align-items: end;
    padding: 1.5rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 6px;
    color: var(--game-season-hero-text);
    isolation: isolate;
}

.game-season-hero[b-lu0z77hphm]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.88) 100%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.76) 0%, rgba(0, 0, 0, 0.28) 72%);
}

.game-season-hero[b-lu0z77hphm]  .responsive-generated-picture > img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.game-season-hero-copy[b-lu0z77hphm] {
    max-width: 56rem;
    min-width: 0;
}

.game-season-hero-copy h1[b-lu0z77hphm] {
    color: var(--game-season-hero-text);
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.48);
}

.game-season-meta[b-lu0z77hphm] {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.game-season-meta span[b-lu0z77hphm] {
    display: inline-flex;
    min-height: 1.75rem;
    align-items: center;
    padding: 0 0.55rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.34);
}

.game-season-hero-copy p[b-lu0z77hphm],
.game-season-body p[b-lu0z77hphm] {
    max-width: 52rem;
    font-size: 1.02rem;
    line-height: 1.6;
}

.game-season-hero-copy p[b-lu0z77hphm] {
    color: var(--game-season-hero-muted);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42);
}

.game-season-body p[b-lu0z77hphm] {
    color: rgba(var(--wl-text-primary-rgb), 0.76);
}

.game-season-hero-stats[b-lu0z77hphm] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 8.5rem));
    gap: 0.65rem;
    margin-top: 1.15rem;
}

.game-season-hero-stats div[b-lu0z77hphm] {
    min-width: 0;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.42);
}

.game-season-hero-stats strong[b-lu0z77hphm] {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
    color: var(--game-season-hero-text);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.42);
}

.game-season-hero-stats small[b-lu0z77hphm] {
    display: block;
    margin-top: 0.25rem;
    color: var(--game-season-hero-soft);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-season-featured[b-lu0z77hphm] {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 6px;
    color: var(--game-season-hero-text);
    background: rgba(0, 0, 0, 0.42);
}

.game-season-featured div[b-lu0z77hphm] {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.75rem;
}

.game-season-featured a[b-lu0z77hphm] {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    color: var(--game-season-hero-text);
}

.game-season-featured img[b-lu0z77hphm] {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.42);
    background: rgba(255, 255, 255, 0.06);
}

.game-season-featured strong[b-lu0z77hphm],
.game-season-ranking-list strong[b-lu0z77hphm] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.game-season-body[b-lu0z77hphm],
.game-season-impact[b-lu0z77hphm],
.game-season-style-panel[b-lu0z77hphm],
.game-season-rivalries[b-lu0z77hphm],
.game-season-ranking-rewards[b-lu0z77hphm],
.game-season-tasks[b-lu0z77hphm] {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 6px;
    background: var(--wl-panel-grad), rgb(var(--wl-bg-secondary-rgb));
}

.game-season-section-heading[b-lu0z77hphm] {
    margin-bottom: 0.9rem;
}

.game-season-section-heading h2[b-lu0z77hphm] {
    margin-top: 0.2rem;
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 1;
    letter-spacing: 0;
}

.game-season-effect-list[b-lu0z77hphm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
}

.game-season-effect[b-lu0z77hphm],
.game-season-task[b-lu0z77hphm],
.game-season-ranking-panel[b-lu0z77hphm] {
    border: 1px solid var(--wl-border-subtle);
    border-radius: 6px;
    background: rgba(var(--wl-bg-primary-rgb), 0.34);
}

.game-season-effect[b-lu0z77hphm] {
    padding: 0.9rem;
}

.game-season-effect strong[b-lu0z77hphm] {
    color: rgb(var(--wl-text-primary-rgb));
}

.game-season-effect p[b-lu0z77hphm],
.game-season-muted[b-lu0z77hphm] {
    margin-top: 0.4rem;
    color: rgba(var(--wl-text-primary-rgb), 0.66);
    line-height: 1.45;
}

.game-season-effect span[b-lu0z77hphm] {
    display: block;
    margin-top: 0.65rem;
    color: rgb(var(--wl-gold-rgb));
    font-weight: 900;
}

.game-season-rankings[b-lu0z77hphm] {
    display: grid;
    /* auto-fit: two panels split the row; the organizer panel (when a season has
       organizer activity) joins as a third column instead of wrapping into a gap */
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.game-season-ranking-rewards-intro[b-lu0z77hphm],
.game-season-ranking-rewards-note[b-lu0z77hphm] {
    max-width: 76ch;
    color: rgba(var(--wl-text-primary-rgb), 0.7);
    line-height: 1.5;
}

.game-season-ranking-reward-groups[b-lu0z77hphm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.game-season-ranking-reward-group[b-lu0z77hphm] {
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.08), transparent 48%),
        rgba(var(--wl-bg-primary-rgb), 0.34);
}

.game-season-ranking-reward-group:last-child:nth-child(odd)[b-lu0z77hphm] {
    grid-column: 1 / -1;
}

.game-season-ranking-reward-group h3[b-lu0z77hphm] {
    margin-bottom: 0.65rem;
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 0.92rem;
    font-weight: 900;
}

.game-season-ranking-reward-group ol[b-lu0z77hphm] {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.game-season-ranking-reward-group li[b-lu0z77hphm] {
    display: grid;
    grid-template-columns: 2.1rem repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    align-items: center;
    min-height: 2.8rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(var(--wl-text-primary-rgb), 0.08);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.14);
}

.game-season-ranking-reward-group li > strong[b-lu0z77hphm] {
    color: rgb(var(--wl-gold-rgb));
    font-family: var(--font-display);
    font-size: 1.3rem;
}

.game-season-ranking-reward-group li > span[b-lu0z77hphm] {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    min-width: 0;
}

.game-season-ranking-reward-group li b[b-lu0z77hphm] {
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 0.95rem;
}

.game-season-ranking-reward-group li small[b-lu0z77hphm] {
    overflow: hidden;
    color: rgba(var(--wl-text-primary-rgb), 0.56);
    font-size: 0.65rem;
    font-weight: 800;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.game-season-ranking-rewards-note[b-lu0z77hphm] {
    margin-top: 0.8rem;
    font-size: 0.76rem;
}

.game-season-ranking-panel[b-lu0z77hphm] {
    padding: 1rem;
}

.game-season-ranking-list[b-lu0z77hphm] {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.game-season-ranking-list a[b-lu0z77hphm] {
    display: grid;
    grid-template-columns: 2.25rem 3.15rem minmax(0, 1fr) minmax(5.6rem, max-content);
    gap: 0.7rem;
    align-items: center;
    min-height: 4.4rem;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    color: inherit;
    background:
        linear-gradient(90deg, rgba(32, 211, 198, 0.08), transparent 52%),
        rgba(0, 0, 0, 0.18);
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.game-season-ranking-list a:hover[b-lu0z77hphm] {
    border-color: rgba(32, 211, 198, 0.34);
    background:
        linear-gradient(90deg, rgba(32, 211, 198, 0.13), transparent 56%),
        rgba(0, 0, 0, 0.24);
    transform: translateY(-1px);
}

.game-season-ranking-list li.is-leader a[b-lu0z77hphm] {
    border-color: rgba(var(--wl-gold-rgb), 0.38);
    background:
        linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.14), rgba(32, 211, 198, 0.07) 52%, transparent),
        rgba(var(--wl-bg-primary-rgb), 0.36);
}

.game-season-rank[b-lu0z77hphm] {
    color: rgb(var(--wl-gold-rgb));
    font-family: var(--font-display);
    font-size: 1.55rem;
    line-height: 1;
    text-align: center;
}

.game-season-ranking-avatar[b-lu0z77hphm] {
    width: 3.15rem;
    height: 3.15rem;
    object-fit: cover;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.42);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.game-season-ranking-name[b-lu0z77hphm] {
    min-width: 0;
    overflow: hidden;
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 1.02rem;
    font-weight: 900;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.game-season-ranking-score[b-lu0z77hphm] {
    display: grid;
    justify-items: end;
    gap: 0.12rem;
    color: rgba(var(--wl-text-primary-rgb), 0.58);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.game-season-ranking-score b[b-lu0z77hphm] {
    color: rgb(var(--wl-text-primary-rgb));
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0;
}

.game-season-style-panel[b-lu0z77hphm] {
    display: grid;
    gap: 0.85rem;
}

.game-season-style-head[b-lu0z77hphm] {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.game-season-style-head .game-season-section-heading[b-lu0z77hphm] {
    margin-bottom: 0;
}

.game-season-style-actions[b-lu0z77hphm] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.game-season-style-action[b-lu0z77hphm],
.game-season-style-toggle[b-lu0z77hphm] {
    max-width: 100%;
    min-height: 2.3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.8rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.36);
    border-radius: 4px;
    color: rgb(var(--wl-gold-rgb));
    background: rgba(var(--wl-gold-rgb), 0.08);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.15;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    white-space: normal;
    cursor: pointer;
}

.game-season-style-toggle[b-lu0z77hphm] {
    border-color: rgba(32, 211, 198, 0.34);
    color: rgb(var(--wl-text-primary-rgb));
    background: rgba(32, 211, 198, 0.08);
}

.game-season-style-action:hover[b-lu0z77hphm],
.game-season-style-toggle:hover[b-lu0z77hphm] {
    border-color: rgba(var(--wl-gold-rgb), 0.56);
    background: rgba(var(--wl-gold-rgb), 0.13);
}

.game-season-style-list[b-lu0z77hphm] {
    display: grid;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.game-season-style-row[b-lu0z77hphm] {
    display: grid;
    grid-template-columns: 2.25rem 3.15rem minmax(0, 1fr) minmax(9.5rem, max-content);
    gap: 0.7rem;
    align-items: center;
    min-height: 4.4rem;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    color: inherit;
    background:
        linear-gradient(90deg, rgba(32, 211, 198, 0.08), transparent 52%),
        rgba(0, 0, 0, 0.18);
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
}

.game-season-style-row:hover[b-lu0z77hphm] {
    border-color: rgba(32, 211, 198, 0.34);
    background:
        linear-gradient(90deg, rgba(32, 211, 198, 0.13), transparent 56%),
        rgba(0, 0, 0, 0.24);
    transform: translateY(-1px);
}

.game-season-style-list li.is-leader .game-season-style-row[b-lu0z77hphm] {
    border-color: rgba(var(--wl-gold-rgb), 0.38);
    background:
        linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.14), rgba(32, 211, 198, 0.07) 52%, transparent),
        rgba(var(--wl-bg-primary-rgb), 0.36);
}

.game-season-style-score[b-lu0z77hphm] {
    display: grid;
    justify-items: end;
    gap: 0.12rem;
    color: rgba(var(--wl-text-primary-rgb), 0.58);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.game-season-style-score b[b-lu0z77hphm] {
    color: rgb(var(--wl-text-primary-rgb));
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0;
}

.game-season-style-score span[b-lu0z77hphm] {
    max-width: 12rem;
    overflow-wrap: anywhere;
    text-align: right;
    white-space: normal;
}

.game-season-rivalry-list[b-lu0z77hphm] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 0.75rem;
}

.game-season-rivalry-card[b-lu0z77hphm] {
    display: grid;
    gap: 0.8rem;
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(32, 211, 198, 0.08), transparent 44%),
        rgba(var(--wl-bg-primary-rgb), 0.36);
}

.game-season-rivalry-card.is-viewer[b-lu0z77hphm] {
    border-color: rgba(32, 211, 198, 0.5);
    box-shadow: inset 0 0 0 1px rgba(32, 211, 198, 0.12);
}

.game-season-rivalry-card.is-resolved[b-lu0z77hphm] {
    background:
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.1), transparent 48%),
        rgba(var(--wl-bg-primary-rgb), 0.34);
}

.game-season-rivalry-header[b-lu0z77hphm],
.game-season-rivalry-footer[b-lu0z77hphm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-width: 0;
}

.game-season-rivalry-header span[b-lu0z77hphm],
.game-season-rivalry-footer span[b-lu0z77hphm] {
    color: rgba(var(--wl-text-primary-rgb), 0.58);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.game-season-rivalry-header strong[b-lu0z77hphm],
.game-season-rivalry-footer strong[b-lu0z77hphm] {
    min-width: 0;
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-align: right;
    text-transform: uppercase;
}

.game-season-rivalry-match[b-lu0z77hphm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
}

.game-season-rivalry-person[b-lu0z77hphm] {
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: 0.45rem;
    color: inherit;
    text-align: center;
}

.game-season-rivalry-person img[b-lu0z77hphm],
.game-season-rivalry-benchmark-mark[b-lu0z77hphm] {
    width: 3.3rem;
    aspect-ratio: 1;
    border: 1px solid rgba(32, 211, 198, 0.42);
    border-radius: 50%;
    background: rgba(32, 211, 198, 0.08);
}

.game-season-rivalry-person img[b-lu0z77hphm] {
    object-fit: cover;
}

.game-season-rivalry-benchmark-mark[b-lu0z77hphm] {
    display: inline-grid;
    place-items: center;
    color: rgb(var(--wl-gold-rgb));
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
}

.game-season-rivalry-person span:last-child[b-lu0z77hphm] {
    max-width: 100%;
    overflow-wrap: anywhere;
    color: rgb(var(--wl-text-primary-rgb));
    font-weight: 900;
}

.game-season-rivalry-person.is-benchmark span:last-child[b-lu0z77hphm] {
    color: rgba(var(--wl-text-primary-rgb), 0.72);
}

.game-season-rivalry-score[b-lu0z77hphm] {
    min-width: 5.5rem;
    display: grid;
    justify-items: center;
    gap: 0.15rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.24);
}

.game-season-rivalry-score strong[b-lu0z77hphm] {
    font-family: var(--font-display);
    font-size: 1.45rem;
    line-height: 0.9;
}

.game-season-rivalry-score span[b-lu0z77hphm] {
    color: rgba(var(--wl-text-primary-rgb), 0.48);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.game-season-rivalry-footer[b-lu0z77hphm] {
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.game-season-task-list[b-lu0z77hphm] {
    display: grid;
    gap: 0.7rem;
}

.game-season-task[b-lu0z77hphm] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.26fr);
    gap: 1rem;
    padding: 1rem;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.game-season-task.is-locked[b-lu0z77hphm] {
    border-color: rgba(255, 184, 77, 0.28);
    background:
        linear-gradient(135deg, rgba(255, 184, 77, 0.1), transparent 42%),
        rgba(var(--wl-bg-primary-rgb), 0.38);
}

.game-season-task.is-claimed[b-lu0z77hphm] {
    border-color: rgba(112, 187, 210, 0.28);
}

.game-season-task.is-complete[b-lu0z77hphm] {
    border-color: rgba(var(--wl-gold-rgb), 0.42);
    background:
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.12), transparent 45%),
        rgba(var(--wl-bg-primary-rgb), 0.4);
}

.game-season-task-main[b-lu0z77hphm] {
    min-width: 0;
}

.game-season-task-topline[b-lu0z77hphm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.game-season-task-main h3[b-lu0z77hphm] {
    margin-top: 0.28rem;
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 1.16rem;
    line-height: 1.18;
}

.game-season-task-main p[b-lu0z77hphm] {
    margin-top: 0.35rem;
    color: rgba(var(--wl-text-primary-rgb), 0.64);
    line-height: 1.45;
}

.game-season-task-progress[b-lu0z77hphm] {
    height: 0.48rem;
    overflow: hidden;
    margin-top: 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.game-season-task-progress span[b-lu0z77hphm] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgb(var(--wl-gold-rgb)), var(--wl-champagne));
}

.game-season-task-main small[b-lu0z77hphm] {
    display: block;
    margin-top: 0.38rem;
    color: rgba(var(--wl-text-primary-rgb), 0.54);
    font-weight: 800;
}

.game-season-task-side[b-lu0z77hphm] {
    display: grid;
    align-content: center;
    justify-items: end;
    gap: 0.65rem;
    text-align: right;
}

.game-season-task-status[b-lu0z77hphm] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.game-season-task-state[b-lu0z77hphm] {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 0.62rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-radius: 999px;
    color: rgb(var(--wl-gold-rgb));
    background: rgba(var(--wl-gold-rgb), 0.08);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-season-task-state.is-locked[b-lu0z77hphm] {
    border-color: rgba(255, 184, 77, 0.34);
    color: #ffd27a;
    background: rgba(255, 184, 77, 0.12);
}

.game-season-task-state.is-complete[b-lu0z77hphm] {
    border-color: rgba(var(--wl-gold-rgb), 0.56);
    background: rgba(var(--wl-gold-rgb), 0.16);
}

.game-season-task-state.is-claimed[b-lu0z77hphm] {
    border-color: rgba(112, 187, 210, 0.36);
    color: #9ed8ea;
    background: rgba(112, 187, 210, 0.1);
}

.game-season-task-status > span[b-lu0z77hphm] {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0 0.55rem;
    border: 1px solid rgba(255, 184, 77, 0.24);
    border-radius: 999px;
    color: rgba(var(--wl-text-primary-rgb), 0.7);
    background: rgba(255, 184, 77, 0.08);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-season-task-reward-card[b-lu0z77hphm] {
    display: grid;
    gap: 0.48rem;
    width: min(100%, 16rem);
    padding: 0.72rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 5px;
    background:
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.11), transparent 55%),
        rgba(0, 0, 0, 0.2);
}

.game-season-task-reward-card > span[b-lu0z77hphm] {
    color: rgba(var(--wl-text-primary-rgb), 0.52);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.game-season-task-reward-card > div[b-lu0z77hphm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.game-season-task-reward-card strong[b-lu0z77hphm] {
    min-width: 0;
    display: grid;
    gap: 0.12rem;
    padding: 0.48rem 0.52rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.17);
    border-radius: 4px;
    color: rgb(var(--wl-text-primary-rgb));
    background: rgba(0, 0, 0, 0.22);
    font-family: var(--font-display);
    font-size: 1.45rem;
    line-height: 0.92;
}

.game-season-task-reward-card small[b-lu0z77hphm] {
    color: rgba(var(--wl-text-primary-rgb), 0.58);
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-transform: uppercase;
}

.game-season-task-side button[b-lu0z77hphm] {
    min-height: 2.3rem;
    padding: 0 0.8rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    border-radius: 4px;
    color: rgb(var(--wl-gold-rgb));
    background: rgba(var(--wl-gold-rgb), 0.08);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.game-season-task-side button:disabled[b-lu0z77hphm] {
    opacity: 0.62;
    cursor: wait;
}

.game-season-claim-message[b-lu0z77hphm] {
    margin-top: 0.9rem;
    color: rgb(var(--wl-gold-rgb));
    font-weight: 800;
}

@media (max-width: 1020px) {
    .game-season-hero[b-lu0z77hphm],
    .game-season-rankings[b-lu0z77hphm],
    .game-season-rivalry-match[b-lu0z77hphm],
    .game-season-task[b-lu0z77hphm] {
        grid-template-columns: 1fr;
    }

    .game-season-featured[b-lu0z77hphm] {
        align-self: auto;
    }

    .game-season-featured div[b-lu0z77hphm] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .game-season-featured a[b-lu0z77hphm] {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .game-season-rivalry-score[b-lu0z77hphm] {
        width: min(100%, 12rem);
        justify-self: center;
    }

    .game-season-task-side[b-lu0z77hphm] {
        justify-items: start;
        text-align: left;
    }

    .game-season-task-status[b-lu0z77hphm] {
        justify-content: flex-start;
    }

    .game-season-task-reward-card[b-lu0z77hphm] {
        width: min(100%, 17rem);
    }

    .game-season-style-head[b-lu0z77hphm] {
        align-items: stretch;
        flex-direction: column;
    }

    .game-season-style-actions[b-lu0z77hphm] {
        justify-content: flex-start;
    }

    .game-season-ranking-reward-groups[b-lu0z77hphm] {
        grid-template-columns: 1fr;
    }

    .game-season-ranking-reward-group:last-child:nth-child(odd)[b-lu0z77hphm] {
        grid-column: auto;
    }
}

@media (max-width: 680px) {
    .game-season-hero[b-lu0z77hphm] {
        min-height: 24rem;
        padding: 1rem;
    }

    .game-season-hero-stats[b-lu0z77hphm],
    .game-season-featured div[b-lu0z77hphm] {
        grid-template-columns: 1fr;
    }

    .game-season-ranking-list a[b-lu0z77hphm],
    .game-season-style-row[b-lu0z77hphm] {
        grid-template-columns: 2rem 2.75rem minmax(0, 1fr);
        gap: 0.6rem;
    }

    .game-season-ranking-avatar[b-lu0z77hphm] {
        width: 2.75rem;
        height: 2.75rem;
    }

    .game-season-ranking-score[b-lu0z77hphm],
    .game-season-style-score[b-lu0z77hphm] {
        grid-column: 3;
        justify-items: start;
        white-space: normal;
    }
}
/* /Components/Pages/GameSeasons/Style.razor.rz.scp.css */
.season-style-page[b-cjshzhpebl] {
    min-height: calc(100vh - 5rem);
    padding-bottom: 2rem;
    color: rgb(var(--wl-text-primary-rgb));
}

.season-style-header[b-cjshzhpebl] {
    display: grid;
    gap: 0.45rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 6px;
    background: var(--wl-panel-grad), rgb(var(--wl-bg-secondary-rgb));
}

.season-style-header span[b-cjshzhpebl] {
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.season-style-header h1[b-cjshzhpebl] {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 0.95;
    letter-spacing: 0;
}

.season-style-header p[b-cjshzhpebl] {
    max-width: 46rem;
    color: rgba(var(--wl-text-primary-rgb), 0.68);
    line-height: 1.55;
}

.season-style-back[b-cjshzhpebl],
.season-style-state a[b-cjshzhpebl],
.season-style-next[b-cjshzhpebl] {
    width: fit-content;
    min-height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.85rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.36);
    border-radius: 4px;
    color: rgb(var(--wl-gold-rgb));
    background: rgba(var(--wl-gold-rgb), 0.08);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.15;
    text-decoration: none;
    text-transform: uppercase;
}

.season-style-state[b-cjshzhpebl] {
    min-height: 42vh;
    display: grid;
    place-content: center;
    gap: 0.8rem;
    padding: 2rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 6px;
    background: var(--wl-panel-grad), rgb(var(--wl-bg-secondary-rgb));
    text-align: center;
}

.season-style-state h2[b-cjshzhpebl] {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1;
    letter-spacing: 0;
}

.season-style-state p[b-cjshzhpebl] {
    max-width: 34rem;
    color: rgba(var(--wl-text-primary-rgb), 0.66);
    line-height: 1.5;
}

.season-style-state a[b-cjshzhpebl] {
    justify-self: center;
}

.season-style-sr-only[b-cjshzhpebl] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.season-style-duel[b-cjshzhpebl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
}

.season-style-versus[b-cjshzhpebl] {
    align-self: center;
    display: grid;
    place-items: center;
    width: 3.3rem;
    height: 3.3rem;
    border: 1px solid rgba(32, 211, 198, 0.36);
    border-radius: 50%;
    color: rgb(var(--wl-text-primary-rgb));
    background: rgba(32, 211, 198, 0.1);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.season-style-card[b-cjshzhpebl] {
    min-width: 0;
    display: grid;
    gap: 0.85rem;
    align-content: start;
    padding: 1rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(32, 211, 198, 0.09), transparent 44%),
        rgba(var(--wl-bg-secondary-rgb), 0.96);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.season-style-card.is-winner[b-cjshzhpebl] {
    border-color: rgba(var(--wl-gold-rgb), 0.58);
    box-shadow: inset 0 0 0 1px rgba(var(--wl-gold-rgb), 0.16), 0 16px 40px rgba(0, 0, 0, 0.24);
}

.season-style-avatar-shell[b-cjshzhpebl] {
    min-height: 27rem;
    display: grid;
    place-items: end center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.09), transparent 46%),
        rgba(var(--wl-bg-primary-rgb), 0.44);
}

.season-style-avatar-shell img[b-cjshzhpebl] {
    width: min(100%, 30rem);
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

.season-style-card h2[b-cjshzhpebl] {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
}

.season-style-card button[b-cjshzhpebl],
.season-style-next[b-cjshzhpebl] {
    width: 100%;
    min-height: 2.65rem;
    border-color: rgba(var(--wl-gold-rgb), 0.44);
    cursor: pointer;
}

.season-style-card button[b-cjshzhpebl] {
    border: 1px solid rgba(var(--wl-gold-rgb), 0.44);
    border-radius: 4px;
    color: rgb(var(--wl-bg-primary-rgb));
    background: rgb(var(--wl-gold-rgb));
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.season-style-card button:disabled[b-cjshzhpebl] {
    cursor: progress;
    opacity: 0.62;
}

.season-style-error[b-cjshzhpebl] {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(var(--wl-red-rgb), 0.38);
    border-radius: 6px;
    color: rgb(var(--wl-text-primary-rgb));
    background: rgba(var(--wl-red-rgb), 0.1);
    font-weight: 800;
}

.season-style-result[b-cjshzhpebl] {
    display: grid;
    gap: 0.85rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 6px;
    background: var(--wl-panel-grad), rgb(var(--wl-bg-secondary-rgb));
}

.season-style-result h2[b-cjshzhpebl] {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1;
    letter-spacing: 0;
}

.season-style-reveal-list[b-cjshzhpebl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.season-style-reveal[b-cjshzhpebl] {
    min-width: 0;
    display: grid;
    gap: 0.25rem;
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: inherit;
    background: rgba(var(--wl-bg-primary-rgb), 0.34);
    text-decoration: none;
}

.season-style-reveal.is-winner[b-cjshzhpebl] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    background:
        linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.14), rgba(32, 211, 198, 0.07)),
        rgba(var(--wl-bg-primary-rgb), 0.42);
}

.season-style-reveal strong[b-cjshzhpebl] {
    min-width: 0;
    overflow-wrap: anywhere;
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 1.1rem;
    font-weight: 900;
}

.season-style-reveal span[b-cjshzhpebl] {
    color: rgb(var(--wl-gold-rgb));
    font-family: var(--font-display);
    font-size: 1.35rem;
    line-height: 1;
}

.season-style-reveal small[b-cjshzhpebl] {
    color: rgba(var(--wl-text-primary-rgb), 0.62);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.season-style-next[b-cjshzhpebl] {
    justify-self: start;
}

@media (max-width: 760px) {
    .season-style-duel[b-cjshzhpebl],
    .season-style-reveal-list[b-cjshzhpebl] {
        grid-template-columns: 1fr;
    }

    .season-style-versus[b-cjshzhpebl] {
        justify-self: center;
        width: auto;
        height: auto;
        min-height: 2.2rem;
        padding: 0 0.85rem;
        border-radius: 4px;
    }

    .season-style-avatar-shell[b-cjshzhpebl] {
        min-height: 22rem;
    }
}
/* /Components/Pages/Help/Article.razor.rz.scp.css */
.help-article-page[b-h7tsnyactz] {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.help-back[b-h7tsnyactz] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    font-size: 0.88rem;
    margin-bottom: 1.5rem;
}

.help-back:hover[b-h7tsnyactz] {
    color: var(--wl-text-primary);
}

.help-back svg[b-h7tsnyactz] {
    width: 1rem;
    height: 1rem;
}

.help-article-cat[b-h7tsnyactz] {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.help-article-title[b-h7tsnyactz] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4rem;
    line-height: 1.1;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem;
}

.help-article-meta[b-h7tsnyactz] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
}

.help-article-body[b-h7tsnyactz] {
    color: var(--wl-text-secondary);
    font-size: 1rem;
    line-height: 1.7;
}

.help-article-body[b-h7tsnyactz]  h1,
.help-article-body[b-h7tsnyactz]  h2,
.help-article-body[b-h7tsnyactz]  h3 {
    color: var(--wl-text-primary);
    font-weight: 700;
    margin: 1.75rem 0 0.75rem;
    line-height: 1.25;
}

.help-article-body[b-h7tsnyactz]  h1 { font-size: 1.6rem; }
.help-article-body[b-h7tsnyactz]  h2 { font-size: 1.35rem; }
.help-article-body[b-h7tsnyactz]  h3 { font-size: 1.15rem; }

.help-article-body[b-h7tsnyactz]  p {
    margin: 0 0 1rem;
}

.help-article-body[b-h7tsnyactz]  a {
    color: var(--wl-gold);
    text-decoration: underline;
}

.help-article-body[b-h7tsnyactz]  ul,
.help-article-body[b-h7tsnyactz]  ol {
    margin: 0 0 1rem 1.25rem;
    padding-left: 0.75rem;
}

.help-article-body[b-h7tsnyactz]  li {
    margin-bottom: 0.35rem;
}

.help-article-body[b-h7tsnyactz]  code {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.9em;
}

.help-article-body[b-h7tsnyactz]  pre {
    background: rgba(var(--wl-contrast-rgb), 0.06);
    padding: 1rem;
    border-radius: 10px;
    overflow-x: auto;
    margin: 0 0 1rem;
}

.help-article-body[b-h7tsnyactz]  blockquote {
    border-left: 3px solid var(--wl-gold);
    padding-left: 1rem;
    margin: 0 0 1rem;
    color: var(--wl-text-muted);
}

.help-article-body[b-h7tsnyactz]  img {
    max-width: 100%;
    border-radius: 10px;
}

.help-notfound[b-h7tsnyactz] {
    text-align: center;
    padding: 3rem;
    color: var(--wl-text-secondary);
}

.help-back-link[b-h7tsnyactz] {
    color: var(--wl-gold);
    text-decoration: underline;
}

.help-loading[b-h7tsnyactz] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.spinner[b-h7tsnyactz] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-h7tsnyactz 0.8s linear infinite;
}

@keyframes spin-b-h7tsnyactz {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Help/Index.razor.rz.scp.css */
.help-page[b-60ppf759ii] {
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.help-header[b-60ppf759ii] {
    margin-bottom: 1.5rem;
}

.help-title[b-60ppf759ii] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.03em;
    color: var(--wl-text-primary);
    margin: 0;
}

.help-subtitle[b-60ppf759ii] {
    color: var(--wl-text-secondary);
    font-size: 1rem;
    margin: 0.25rem 0 0;
}

.help-toolbar[b-60ppf759ii] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.help-categories[b-60ppf759ii] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.help-chip[b-60ppf759ii] {
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    background: transparent;
    color: var(--wl-text-secondary);
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.help-chip:hover[b-60ppf759ii] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    color: var(--wl-text-primary);
}

.help-chip.active[b-60ppf759ii] {
    background: var(--wl-gold);
    border-color: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-weight: 600;
}

.help-sort[b-60ppf759ii] {
    display: flex;
    gap: 0.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 9999px;
    padding: 0.2rem;
}

.help-sort-btn[b-60ppf759ii] {
    padding: 0.35rem 0.8rem;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: var(--wl-text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.help-sort-btn.active[b-60ppf759ii] {
    background: var(--wl-bg-secondary);
    color: var(--wl-text-primary);
    font-weight: 600;
}

.help-grid[b-60ppf759ii] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.help-card[b-60ppf759ii] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
    border-radius: 14px;
    background: var(--wl-bg-secondary);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.help-card:hover[b-60ppf759ii] {
    transform: translateY(-2px);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.help-card-cat[b-60ppf759ii] {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
}

.help-card-title[b-60ppf759ii] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.3;
}

.help-card-excerpt[b-60ppf759ii] {
    font-size: 0.88rem;
    color: var(--wl-text-secondary);
    margin: 0;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.help-card-views[b-60ppf759ii] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: auto;
    font-size: 0.78rem;
    color: var(--wl-text-muted);
}

.help-card-views svg[b-60ppf759ii] {
    width: 0.95rem;
    height: 0.95rem;
}

.help-empty[b-60ppf759ii] {
    padding: 3rem;
    text-align: center;
    color: var(--wl-text-muted);
}

.help-loading[b-60ppf759ii] {
    display: flex;
    justify-content: center;
    padding: 3rem;
}

.spinner[b-60ppf759ii] {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-60ppf759ii 0.8s linear infinite;
}

@keyframes spin-b-60ppf759ii {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Home.razor.rz.scp.css */
.command-dashboard[b-l3gaw7olz7] {
    min-height: calc(100vh - 5rem);
    padding: 0.25rem 0 2rem;
    color: rgb(var(--wl-text-primary-rgb));
}

.command-loading[b-l3gaw7olz7] {
    min-height: 52vh;
    display: grid;
    place-items: center;
}

.command-page-header[b-l3gaw7olz7] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.command-header-actions[b-l3gaw7olz7] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.command-kicker[b-l3gaw7olz7],
.briefing-badge[b-l3gaw7olz7],
.panel-heading strong[b-l3gaw7olz7],
.move-meta[b-l3gaw7olz7],
.opportunity-type[b-l3gaw7olz7],
.opportunity-deadline[b-l3gaw7olz7],
.feed-badge[b-l3gaw7olz7] {
    font-size: 0.68rem;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.command-kicker[b-l3gaw7olz7] {
    color: var(--wl-champagne);
    margin-bottom: 0.35rem;
}

.command-kicker[b-l3gaw7olz7]::before,
.command-kicker[b-l3gaw7olz7]::after {
    content: "✦";
    color: rgb(var(--wl-gold-rgb));
    margin: 0 0.75em;
}

.command-kicker[b-l3gaw7olz7]::before {
    margin-left: 0;
}

.command-title[b-l3gaw7olz7] {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 0.95;
    letter-spacing: 0;
    color: rgb(var(--wl-text-primary-rgb));
}

.command-header-link[b-l3gaw7olz7],
.command-cta[b-l3gaw7olz7],
.next-move-card[b-l3gaw7olz7],
.opportunity-item[b-l3gaw7olz7],
.pulse-feed-card[b-l3gaw7olz7],
.social-pulse-action[b-l3gaw7olz7],
.social-feed-item[b-l3gaw7olz7] {
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.command-header-link[b-l3gaw7olz7] {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0 0.9rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.32);
    border-radius: 4px;
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.command-header-link:hover[b-l3gaw7olz7] {
    border-color: rgba(var(--wl-gold-rgb), 0.62);
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.dashboard-tabs[b-l3gaw7olz7] {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
    overflow-x: auto;
}

.dashboard-tab[b-l3gaw7olz7] {
    min-height: 2.7rem;
    padding: 0 1rem;
    border: 0;
    border-bottom: 2px solid transparent;
    color: rgba(var(--wl-text-primary-rgb), 0.62);
    background: transparent;
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.dashboard-tab:hover[b-l3gaw7olz7] {
    color: rgb(var(--wl-text-primary-rgb));
}

.dashboard-tab.is-active[b-l3gaw7olz7] {
    color: rgb(var(--wl-gold-rgb));
    border-bottom-color: rgb(var(--wl-gold-rgb));
}

.pwa-install-nudge[b-l3gaw7olz7] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    margin-bottom: 1rem;
    padding: 0.95rem;
    border-color: rgba(var(--wl-gold-rgb), 0.28);
    background:
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.12), rgba(72, 132, 137, 0.08) 48%, transparent),
        var(--wl-panel-grad),
        rgb(var(--wl-bg-secondary-rgb));
}

.pwa-install-mark[b-l3gaw7olz7] {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.34);
    border-radius: 6px;
    color: rgb(var(--wl-gold-rgb));
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.pwa-install-mark svg[b-l3gaw7olz7] {
    width: 1.35rem;
    height: 1.35rem;
}

.pwa-install-copy[b-l3gaw7olz7] {
    min-width: 0;
}

.pwa-install-copy strong[b-l3gaw7olz7] {
    display: block;
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 0.96rem;
    line-height: 1.2;
}

.pwa-install-copy p[b-l3gaw7olz7] {
    margin: 0.28rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.66);
    font-size: 0.86rem;
    line-height: 1.35;
}

.pwa-install-actions[b-l3gaw7olz7] {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.55rem;
    align-items: center;
    flex-wrap: wrap;
}

.pwa-install-button[b-l3gaw7olz7],
.pwa-install-actions a[b-l3gaw7olz7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0 0.8rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pwa-install-button[b-l3gaw7olz7] {
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    color: rgb(var(--wl-bg-primary-rgb));
    background: rgb(var(--wl-gold-rgb));
    cursor: pointer;
}

.pwa-install-button[hidden][b-l3gaw7olz7] {
    display: none;
}

.pwa-install-actions a[b-l3gaw7olz7] {
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.18);
    color: rgb(var(--wl-gold-rgb));
    background: rgba(var(--wl-champagne-rgb), 0.04);
}

.career-dashboard-grid[b-l3gaw7olz7] {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(20rem, 0.7fr);
    gap: 1rem;
    align-items: start;
}

.daily-issue-teaser[b-l3gaw7olz7],
.game-season-teaser[b-l3gaw7olz7],
.career-journey[b-l3gaw7olz7],
.dashboard-agenda[b-l3gaw7olz7],
.next-moves[b-l3gaw7olz7] {
    grid-column: 1 / -1;
}

.career-journey[b-l3gaw7olz7] {
    position: relative;
    overflow: hidden;
    padding: clamp(1rem, 2vw, 1.4rem);
    border-color: rgba(var(--wl-gold-rgb), 0.24);
    background:
        radial-gradient(circle at 94% 8%, rgba(var(--wl-gold-rgb), 0.12), transparent 24%),
        linear-gradient(118deg, rgba(var(--wl-gold-rgb), 0.055), transparent 48%),
        var(--wl-panel-grad),
        rgb(var(--wl-bg-secondary-rgb));
}

.career-journey[b-l3gaw7olz7]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgb(var(--wl-gold-rgb)), rgba(var(--wl-gold-rgb), 0.12));
}

.career-journey[b-l3gaw7olz7]  .career-goals-panel--compact {
    width: 100%;
    margin: 0;
    padding: 0;
}

.daily-issue-teaser[b-l3gaw7olz7] {
    position: relative;
    min-height: 24rem;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 0;
    isolation: isolate;
}

.daily-issue-teaser[b-l3gaw7olz7]  img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.daily-issue-teaser[b-l3gaw7olz7]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.82) 82%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.08) 66%);
}

.daily-issue-teaser > div[b-l3gaw7olz7] {
    position: relative;
    z-index: 1;
    max-width: 44rem;
    padding: 2rem;
}

.daily-issue-teaser span[b-l3gaw7olz7] {
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.daily-issue-teaser h2[b-l3gaw7olz7] {
    margin-top: 0.55rem;
    font-family: var(--font-display);
    font-size: 3.8rem;
    line-height: 0.94;
    letter-spacing: 0;
}

.daily-issue-teaser p[b-l3gaw7olz7] {
    max-width: 38rem;
    margin-top: 0.65rem;
    color: rgba(var(--wl-text-primary-rgb), 0.74);
    font-size: 1.02rem;
    line-height: 1.55;
}

.game-season-teaser[b-l3gaw7olz7] {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.36fr);
    gap: 1rem;
    min-height: 18rem;
    padding: 1.25rem;
    isolation: isolate;
}

.game-season-teaser[b-l3gaw7olz7]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.72) 48%, rgba(0, 0, 0, 0.42) 100%),
        linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.12), rgba(0, 0, 0, 0));
}

.game-season-teaser[b-l3gaw7olz7]  .game-season-teaser-picture {
    position: absolute;
    inset: 0;
    z-index: -2;
    display: block;
    width: 100%;
    height: 100%;
}

.game-season-teaser[b-l3gaw7olz7]  .game-season-teaser-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.game-season-teaser-copy[b-l3gaw7olz7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.game-season-teaser-copy > span[b-l3gaw7olz7],
.game-season-spotlight > span[b-l3gaw7olz7] {
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.game-season-teaser-copy h2[b-l3gaw7olz7] {
    max-width: 42rem;
    margin-top: 0.45rem;
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 4vw, 3.55rem);
    line-height: 0.94;
    letter-spacing: 0;
}

.game-season-teaser-copy p[b-l3gaw7olz7] {
    max-width: 39rem;
    margin-top: 0.65rem;
    color: rgba(var(--wl-text-primary-rgb), 0.76);
    font-size: 1rem;
    line-height: 1.55;
}

.game-season-teaser-stats[b-l3gaw7olz7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 8.5rem));
    gap: 0.65rem;
    margin: 1rem 0 0.8rem;
}

.game-season-teaser-stats div[b-l3gaw7olz7] {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.34);
}

.game-season-teaser-stats strong[b-l3gaw7olz7] {
    display: block;
    color: rgb(var(--wl-text-primary-rgb));
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 1;
}

.game-season-teaser-stats small[b-l3gaw7olz7] {
    display: block;
    margin-top: 0.25rem;
    color: rgba(var(--wl-text-primary-rgb), 0.62);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-season-progress[b-l3gaw7olz7] {
    max-width: 28rem;
    height: 0.42rem;
    overflow: hidden;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
}

.game-season-progress span[b-l3gaw7olz7] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgb(var(--wl-gold-rgb)), var(--wl-champagne));
}

.game-season-spotlight[b-l3gaw7olz7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.38);
}

.game-season-spotlight > strong[b-l3gaw7olz7] {
    margin-top: 0.65rem;
    color: rgba(var(--wl-text-primary-rgb), 0.76);
}

.game-season-spotlight > a[b-l3gaw7olz7] {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 0.65rem;
    color: rgb(var(--wl-text-primary-rgb));
}

.game-season-spotlight img[b-l3gaw7olz7],
.game-season-featured-row img[b-l3gaw7olz7] {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.45);
    background: rgba(255, 255, 255, 0.06);
}

.game-season-spotlight a strong[b-l3gaw7olz7] {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 1.05rem;
}

.game-season-featured-row[b-l3gaw7olz7] {
    display: flex;
    gap: 0.45rem;
    margin-top: 1rem;
}

.game-season-featured-row a[b-l3gaw7olz7] {
    width: 2.65rem;
    flex: 0 0 auto;
}

.social-dashboard-feed[b-l3gaw7olz7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.42fr);
    gap: 1rem;
    align-items: start;
}

.social-pulse-panel[b-l3gaw7olz7] {
    padding: 1rem;
}

.social-pulse-heading[b-l3gaw7olz7] {
    align-items: center;
}

.social-pulse-heading div[b-l3gaw7olz7] {
    display: grid;
    gap: 0.2rem;
}

.social-pulse-action[b-l3gaw7olz7] {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 4px;
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.social-pulse-stats[b-l3gaw7olz7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.social-pulse-stats div[b-l3gaw7olz7] {
    min-height: 5.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.85rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 5px;
    background: var(--wl-surface-primary);
}

.social-pulse-stats strong[b-l3gaw7olz7] {
    color: rgb(var(--wl-text-primary-rgb));
    font-family: var(--font-display);
    font-size: 2.1rem;
    line-height: 1;
}

.social-pulse-stats span[b-l3gaw7olz7] {
    margin-top: 0.25rem;
    color: rgba(var(--wl-text-primary-rgb), 0.56);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.analytics-dashboard-grid[b-l3gaw7olz7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.metric-widget[b-l3gaw7olz7] {
    min-height: 10rem;
    padding: 1rem;
    overflow: hidden;
}

.metric-widget-head[b-l3gaw7olz7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.metric-widget-head span[b-l3gaw7olz7] {
    color: rgba(var(--wl-gold-rgb), 0.8);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.metric-widget-head strong[b-l3gaw7olz7] {
    max-width: 12rem;
    color: rgba(var(--wl-text-primary-rgb), 0.68);
    font-size: 0.78rem;
    text-align: right;
}

.metric-widget-value[b-l3gaw7olz7] {
    margin-top: 1rem;
    color: rgb(var(--wl-text-primary-rgb));
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 0.95;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.metric-widget p[b-l3gaw7olz7] {
    margin-top: 0.55rem;
    color: rgba(var(--wl-text-primary-rgb), 0.54);
    line-height: 1.35;
}

.metric-widget-link[b-l3gaw7olz7] {
    display: inline-flex;
    margin-top: 0.85rem;
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.metric-widget.highlight[b-l3gaw7olz7] {
    border-color: rgba(var(--wl-gold-rgb), 0.38);
    background:
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.12), transparent 48%),
        var(--wl-panel-grad),
        rgb(var(--wl-bg-secondary-rgb));
}

.metric-widget.warning[b-l3gaw7olz7] {
    border-color: rgba(216, 120, 85, 0.38);
}

.command-panel[b-l3gaw7olz7] {
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.16);
    border-radius: 6px;
    background:
        var(--wl-panel-grad),
        rgb(var(--wl-bg-secondary-rgb));
    box-shadow: var(--wl-panel-shadow);
}

.career-briefing[b-l3gaw7olz7] {
    min-height: 23rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.48fr);
    overflow: hidden;
    position: relative;
    isolation: isolate;
    background:
        var(--wl-spotlight),
        var(--wl-briefing-scrim),
        url("/images/dashboard/career-briefing-backdrop.png");
    background-size: cover;
    background-position: center right;
}

.career-briefing[b-l3gaw7olz7]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.08), transparent 38%),
        radial-gradient(circle at 82% 18%, rgba(210, 183, 95, 0.16), transparent 27%),
        radial-gradient(circle at 78% 62%, rgba(91, 119, 94, 0.2), transparent 32%);
}

.briefing-copy[b-l3gaw7olz7] {
    position: relative;
    z-index: 1;
    padding: clamp(1.25rem, 3vw, 2rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.briefing-badge[b-l3gaw7olz7] {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    padding: 0 0.65rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.24);
    border-radius: 4px;
    color: rgb(var(--wl-gold-rgb));
    background: rgba(var(--wl-gold-rgb), 0.07);
    font-weight: 800;
}

.briefing-rank[b-l3gaw7olz7] {
    margin-top: 1.6rem;
    color: rgba(var(--wl-text-primary-rgb), 0.62);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.briefing-copy h2[b-l3gaw7olz7] {
    margin-top: 0.35rem;
    max-width: 10ch;
    font-family: var(--font-display);
    font-size: clamp(3rem, 8vw, 6.5rem);
    line-height: 0.9;
    letter-spacing: 0;
    background-image: linear-gradient(160deg, var(--wl-champagne) 0%, var(--wl-gold) 48%, var(--wl-gold-dark) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--wl-gold);
    filter: drop-shadow(0 2px 18px rgba(var(--wl-gold-rgb), 0.28));
}

.briefing-advice[b-l3gaw7olz7] {
    max-width: 38rem;
    margin-top: 1rem;
    color: rgba(var(--wl-text-primary-rgb), 0.76);
    font-size: 1rem;
    line-height: 1.65;
}

.pulse-meter[b-l3gaw7olz7] {
    height: 0.32rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
}

.pulse-meter span[b-l3gaw7olz7] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgb(var(--wl-gold-rgb)), rgba(152, 185, 111, 0.95));
}

.command-cta[b-l3gaw7olz7] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 2.65rem;
    margin-top: 1.25rem;
    padding: 0 1rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.46);
    border-radius: 4px;
    background: rgba(var(--wl-gold-rgb), 0.11);
    color: rgb(var(--wl-gold-rgb));
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.command-cta svg[b-l3gaw7olz7] {
    width: 1.1rem;
    height: 1.1rem;
}

.command-cta:hover[b-l3gaw7olz7] {
    transform: translateY(-1px);
    border-color: rgba(var(--wl-gold-rgb), 0.78);
    background: rgba(var(--wl-gold-rgb), 0.16);
}

.briefing-portrait[b-l3gaw7olz7] {
    position: relative;
    z-index: 1;
    min-height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem 1rem 0;
    border-left: 1px solid var(--wl-border-subtle);
    background: var(--wl-portrait-grad);
    box-shadow: inset 1px 0 0 rgba(var(--wl-contrast-rgb), 0.04);
}

.briefing-portrait[b-l3gaw7olz7]::before {
    content: "";
    position: absolute;
    inset: 13% 4% 11%;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 38%, rgba(var(--wl-gold-rgb), 0.18), transparent 42%),
        radial-gradient(circle at 54% 58%, rgba(142, 166, 117, 0.16), transparent 54%);
    filter: blur(18px);
    opacity: 0.78;
}

.briefing-avatar-shell[b-l3gaw7olz7] {
    position: relative;
    z-index: 1;
    width: min(88%, 19rem);
    height: 22rem;
    overflow: hidden;
    transform: translateX(0.35rem);
}

.briefing-avatar-shell[b-l3gaw7olz7]::after {
    content: "";
    position: absolute;
    right: 14%;
    bottom: 0.75rem;
    left: 14%;
    height: 2.2rem;
    border-radius: 999px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.52), transparent 68%);
    filter: blur(5px);
}

.briefing-avatar[b-l3gaw7olz7] {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter:
        drop-shadow(0 28px 38px rgba(0, 0, 0, 0.48))
        drop-shadow(0 0 28px rgba(var(--wl-gold-rgb), 0.1));
}

.portrait-caption[b-l3gaw7olz7] {
    position: absolute;
    z-index: 2;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 4px;
    background: var(--wl-glass-bg);
    backdrop-filter: blur(10px);
}

.portrait-caption span[b-l3gaw7olz7],
.portrait-caption strong[b-l3gaw7olz7] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.portrait-caption span[b-l3gaw7olz7] {
    color: rgba(var(--wl-text-primary-rgb), 0.55);
}

.portrait-caption strong[b-l3gaw7olz7] {
    color: rgb(var(--wl-text-primary-rgb));
}

.career-pulse[b-l3gaw7olz7] {
    padding: 1rem;
}

.panel-heading[b-l3gaw7olz7],
.section-heading[b-l3gaw7olz7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.panel-heading span[b-l3gaw7olz7],
.section-heading p[b-l3gaw7olz7] {
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 1rem;
    font-weight: 900;
}

/* Premiere costume for section titles - gold star, champagne tone */
.panel-heading span[b-l3gaw7olz7]::before,
.section-heading p[b-l3gaw7olz7]::before {
    content: "✦";
    color: rgb(var(--wl-gold-rgb));
    margin-right: 0.55em;
    font-size: 0.85em;
}

.next-move-card:hover[b-l3gaw7olz7],
.opportunity-item:hover[b-l3gaw7olz7],
.pulse-feed-card:hover[b-l3gaw7olz7] {
    transform: translateY(-2px);
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    box-shadow: 0 8px 22px var(--wl-shadow-color);
}

.panel-heading strong[b-l3gaw7olz7] {
    color: rgba(var(--wl-text-primary-rgb), 0.42);
}

.pulse-list[b-l3gaw7olz7] {
    display: grid;
    gap: 0.65rem;
}

.pulse-metric[b-l3gaw7olz7],
.next-move-card[b-l3gaw7olz7],
.opportunity-item[b-l3gaw7olz7],
.pulse-feed-card[b-l3gaw7olz7] {
    border: 1px solid var(--wl-border-subtle);
    border-radius: 5px;
    background: var(--wl-surface-primary);
}

.pulse-metric[b-l3gaw7olz7] {
    padding: 0.85rem;
}

.pulse-metric-main[b-l3gaw7olz7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.pulse-metric-main span[b-l3gaw7olz7] {
    color: rgba(var(--wl-text-primary-rgb), 0.58);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.pulse-metric-main strong[b-l3gaw7olz7] {
    color: rgb(var(--wl-text-primary-rgb));
    font-family: var(--font-display);
    font-size: 1.85rem;
    letter-spacing: 0;
    line-height: 1;
}

.pulse-metric p[b-l3gaw7olz7] {
    min-height: 1.1rem;
    margin: 0.3rem 0 0.6rem;
    color: rgba(var(--wl-text-primary-rgb), 0.54);
    font-size: 0.82rem;
}

.pulse-metric.low .pulse-meter span[b-l3gaw7olz7] {
    background: linear-gradient(90deg, #d87855, #d2b75f);
}

.dashboard-agenda[b-l3gaw7olz7] {
    overflow: hidden;
}

.dashboard-agenda-heading[b-l3gaw7olz7] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.2rem 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
    background: linear-gradient(120deg, rgba(var(--wl-gold-rgb), 0.08), transparent 48%);
}

.dashboard-agenda-heading span[b-l3gaw7olz7] {
    color: rgba(var(--wl-gold-rgb), 0.9);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dashboard-agenda-heading h2[b-l3gaw7olz7] {
    margin-top: 0.28rem;
    color: rgb(var(--wl-text-primary-rgb));
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1;
    letter-spacing: 0;
}

.dashboard-agenda-heading p[b-l3gaw7olz7] {
    margin-top: 0.35rem;
    color: rgba(var(--wl-text-primary-rgb), 0.56);
    font-size: 0.86rem;
}

.dashboard-agenda-grid[b-l3gaw7olz7] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dashboard-agenda-day[b-l3gaw7olz7] {
    min-width: 0;
    padding: 0.9rem;
    border-right: 1px solid var(--wl-border-subtle);
    background: rgba(var(--wl-contrast-rgb), 0.012);
}

.dashboard-agenda-day:last-child[b-l3gaw7olz7] {
    border-right: 0;
}

.dashboard-agenda-day.is-current[b-l3gaw7olz7] {
    background: linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.1), rgba(var(--wl-gold-rgb), 0.025));
    box-shadow: inset 0 2px 0 rgb(var(--wl-gold-rgb));
}

.dashboard-agenda-day-head[b-l3gaw7olz7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.dashboard-agenda-day-head strong[b-l3gaw7olz7] {
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 0.78rem;
    letter-spacing: 0.04em;
}

.dashboard-agenda-day-head span[b-l3gaw7olz7] {
    padding: 0.22rem 0.35rem;
    border-radius: 3px;
    color: rgb(var(--wl-bg-primary-rgb));
    background: rgb(var(--wl-gold-rgb));
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.dashboard-agenda-day > time[b-l3gaw7olz7] {
    display: block;
    min-height: 2rem;
    margin-top: 0.28rem;
    color: rgba(var(--wl-text-primary-rgb), 0.48);
    font-size: 0.68rem;
    line-height: 1.35;
}

.dashboard-agenda-events[b-l3gaw7olz7] {
    display: grid;
    gap: 0.42rem;
    margin-top: 0.45rem;
}

.dashboard-agenda-event[b-l3gaw7olz7] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.5rem;
    min-width: 0;
    padding: 0.55rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 4px;
    color: inherit;
    background: rgba(var(--wl-contrast-rgb), 0.025);
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.dashboard-agenda-event:hover[b-l3gaw7olz7] {
    transform: translateY(-1px);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    background: rgba(var(--wl-gold-rgb), 0.065);
}

.dashboard-agenda-event-icon[b-l3gaw7olz7] {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 3px;
    color: rgb(var(--wl-gold-rgb));
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.dashboard-agenda-event-icon svg[b-l3gaw7olz7] {
    width: 0.92rem;
    height: 0.92rem;
}

.dashboard-agenda-event strong[b-l3gaw7olz7],
.dashboard-agenda-event small[b-l3gaw7olz7] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-agenda-event strong[b-l3gaw7olz7] {
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 0.74rem;
    line-height: 1.25;
}

.dashboard-agenda-event small[b-l3gaw7olz7] {
    margin-top: 0.15rem;
    color: rgba(var(--wl-text-primary-rgb), 0.48);
    font-size: 0.65rem;
    white-space: nowrap;
}

.dashboard-agenda-empty[b-l3gaw7olz7] {
    margin: 0.6rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.34);
    font-size: 0.72rem;
    font-style: italic;
    line-height: 1.35;
}

.dashboard-agenda-footer[b-l3gaw7olz7] {
    display: flex;
    justify-content: flex-end;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.dashboard-agenda-footer a[b-l3gaw7olz7] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dashboard-agenda-footer svg[b-l3gaw7olz7] {
    width: 1rem;
    height: 1rem;
}

.next-moves[b-l3gaw7olz7] {
    margin-top: 0;
}

.section-heading[b-l3gaw7olz7] {
    margin-bottom: 0.75rem;
}

.section-heading span[b-l3gaw7olz7] {
    color: rgba(var(--wl-text-primary-rgb), 0.48);
    font-size: 0.9rem;
}

.next-move-grid[b-l3gaw7olz7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.next-move-card[b-l3gaw7olz7] {
    min-height: 7.5rem;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 0.75rem;
    padding: 1rem;
    color: inherit;
}

.next-move-card:hover[b-l3gaw7olz7],
.opportunity-item:hover[b-l3gaw7olz7],
.pulse-feed-card:hover[b-l3gaw7olz7] {
    transform: translateY(-1px);
    border-color: rgba(var(--wl-gold-rgb), 0.34);
    background: rgba(var(--wl-gold-rgb), 0.055);
}

.move-icon[b-l3gaw7olz7] {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.24);
    border-radius: 4px;
    color: rgb(var(--wl-gold-rgb));
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.move-icon svg[b-l3gaw7olz7] {
    width: 1.25rem;
    height: 1.25rem;
}

.move-copy[b-l3gaw7olz7] {
    min-width: 0;
}

.move-copy strong[b-l3gaw7olz7] {
    display: block;
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 1rem;
    line-height: 1.25;
}

.move-copy small[b-l3gaw7olz7] {
    display: block;
    margin-top: 0.25rem;
    color: rgba(var(--wl-text-primary-rgb), 0.54);
    line-height: 1.35;
}

.move-meta[b-l3gaw7olz7] {
    grid-column: 1 / -1;
    color: rgba(var(--wl-gold-rgb), 0.88);
    font-weight: 800;
}

.opportunities-panel[b-l3gaw7olz7],
.world-pulse[b-l3gaw7olz7],
.activity-panel[b-l3gaw7olz7],
.social-pulse-panel[b-l3gaw7olz7],
.social-feed-panel[b-l3gaw7olz7] {
    padding: 1rem;
}

.opportunity-list[b-l3gaw7olz7],
.world-pulse-list[b-l3gaw7olz7],
.social-feed-list[b-l3gaw7olz7] {
    display: grid;
    gap: 0.65rem;
}

.opportunity-item[b-l3gaw7olz7] {
    display: grid;
    grid-template-columns: 5.8rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem;
    color: inherit;
}

.opportunity-type[b-l3gaw7olz7] {
    color: rgba(var(--wl-gold-rgb), 0.88);
    font-weight: 900;
}

.opportunity-copy[b-l3gaw7olz7] {
    min-width: 0;
}

.opportunity-copy strong[b-l3gaw7olz7],
.pulse-feed-card strong[b-l3gaw7olz7] {
    display: block;
    color: rgb(var(--wl-text-primary-rgb));
    line-height: 1.25;
}

.opportunity-copy small[b-l3gaw7olz7],
.pulse-feed-card p[b-l3gaw7olz7] {
    display: block;
    margin-top: 0.2rem;
    color: rgba(var(--wl-text-primary-rgb), 0.54);
    line-height: 1.35;
}

.opportunity-deadline[b-l3gaw7olz7] {
    color: rgba(var(--wl-text-primary-rgb), 0.45);
    white-space: nowrap;
}

.world-pulse-list[b-l3gaw7olz7] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pulse-feed-card[b-l3gaw7olz7] {
    min-height: 7rem;
    padding: 0.9rem;
    color: inherit;
}

.activity-list[b-l3gaw7olz7] {
    display: grid;
    gap: 0.65rem;
}

.activity-item[b-l3gaw7olz7] {
    position: relative;
    display: block;
    min-height: 6rem;
    padding: 0.85rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 5px;
    background: var(--wl-surface-primary);
    color: inherit;
}

.activity-item strong[b-l3gaw7olz7] {
    display: block;
    color: rgb(var(--wl-text-primary-rgb));
}

.activity-item p[b-l3gaw7olz7],
.activity-empty[b-l3gaw7olz7] {
    margin-top: 0.25rem;
    color: rgba(var(--wl-text-primary-rgb), 0.54);
}

.activity-item em[b-l3gaw7olz7] {
    position: absolute;
    right: 0.8rem;
    bottom: 0.65rem;
    color: rgba(var(--wl-gold-rgb), 0.9);
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-style: normal;
}

.social-pulse-panel[b-l3gaw7olz7],
.social-feed-panel[b-l3gaw7olz7] {
    min-height: 10rem;
}

.social-pulse-panel[b-l3gaw7olz7] {
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(112, 187, 210, 0.08), transparent 46%),
        var(--wl-panel-grad),
        rgb(var(--wl-bg-secondary-rgb));
}

.social-pulse-heading[b-l3gaw7olz7] {
    align-items: center;
}

.social-pulse-heading div[b-l3gaw7olz7] {
    min-width: 0;
}

.social-pulse-heading span[b-l3gaw7olz7],
.social-pulse-heading strong[b-l3gaw7olz7] {
    display: block;
}

.social-pulse-heading strong[b-l3gaw7olz7] {
    margin-top: 0.25rem;
}

.social-pulse-action[b-l3gaw7olz7] {
    display: inline-flex;
    align-items: center;
    min-height: 2.15rem;
    padding: 0 0.75rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-radius: 4px;
    color: rgb(var(--wl-gold-rgb));
    background: rgba(var(--wl-gold-rgb), 0.08);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.social-pulse-action:hover[b-l3gaw7olz7] {
    transform: translateY(-1px);
    border-color: rgba(var(--wl-gold-rgb), 0.54);
    background: rgba(var(--wl-gold-rgb), 0.13);
}

.social-pulse-stats[b-l3gaw7olz7] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.social-pulse-stats div[b-l3gaw7olz7] {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 5px;
    background: rgba(var(--wl-bg-primary-rgb), 0.28);
}

.social-pulse-stats strong[b-l3gaw7olz7] {
    display: block;
    color: rgb(var(--wl-text-primary-rgb));
    font-family: var(--font-display);
    font-size: 1.8rem;
    line-height: 0.95;
}

.social-pulse-stats span[b-l3gaw7olz7] {
    display: block;
    margin-top: 0.3rem;
    overflow: hidden;
    color: rgba(var(--wl-text-primary-rgb), 0.52);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.social-feed-item[b-l3gaw7olz7] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.25rem 0.75rem;
    min-height: 6.1rem;
    padding: 0.85rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 5px;
    background: var(--wl-surface-primary);
    color: inherit;
}

.social-feed-item:hover[b-l3gaw7olz7] {
    border-color: rgba(var(--wl-gold-rgb), 0.34);
    background: rgba(var(--wl-gold-rgb), 0.06);
    transform: translateY(-1px);
}

.social-feed-item .feed-badge[b-l3gaw7olz7] {
    grid-column: 1 / -1;
    margin-bottom: 0.1rem;
}

.social-feed-item strong[b-l3gaw7olz7] {
    min-width: 0;
    overflow: hidden;
    color: rgb(var(--wl-text-primary-rgb));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.social-feed-time[b-l3gaw7olz7] {
    align-self: center;
    color: rgba(var(--wl-text-primary-rgb), 0.44);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.social-feed-item p[b-l3gaw7olz7] {
    grid-column: 1 / -1;
    display: -webkit-box;
    margin: 0.1rem 0 0;
    overflow: hidden;
    color: rgba(var(--wl-text-primary-rgb), 0.62);
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.social-feed-item.comment[b-l3gaw7olz7] {
    border-color: rgba(112, 187, 210, 0.22);
}

.social-feed-item.buzz[b-l3gaw7olz7] {
    border-color: rgba(var(--wl-gold-rgb), 0.2);
}

.email-confirmation-notice[b-l3gaw7olz7] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.32);
    border-radius: 0.85rem;
    background: rgba(var(--wl-gold-rgb), 0.09);
    color: rgb(var(--wl-text-primary-rgb));
}

.email-confirmation-icon[b-l3gaw7olz7] {
    display: grid;
    flex: 0 0 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(var(--wl-gold-rgb), 0.16);
    color: rgb(var(--wl-gold-rgb));
    font-weight: 900;
}

.email-confirmation-notice strong[b-l3gaw7olz7],
.email-confirmation-notice p[b-l3gaw7olz7],
.email-confirmation-notice small[b-l3gaw7olz7] {
    display: block;
}

.email-confirmation-notice p[b-l3gaw7olz7] {
    margin: 0.12rem 0;
    color: rgba(var(--wl-text-primary-rgb), 0.78);
}

.email-confirmation-notice small[b-l3gaw7olz7] {
    color: rgba(var(--wl-text-primary-rgb), 0.56);
}


.feed-badge[b-l3gaw7olz7] {
    display: inline-flex;
    margin-bottom: 0.55rem;
    color: rgba(var(--wl-gold-rgb), 0.88);
    font-weight: 900;
}

@media (min-width: 821px) {
    .pwa-install-nudge[b-l3gaw7olz7] {
        display: none;
    }
}

@media (max-width: 1180px) {
    .career-dashboard-grid[b-l3gaw7olz7],
    .social-dashboard-feed[b-l3gaw7olz7] {
        grid-template-columns: 1fr;
    }

    .career-pulse .pulse-list[b-l3gaw7olz7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .game-season-teaser[b-l3gaw7olz7] {
        grid-template-columns: 1fr;
    }

    .dashboard-agenda-grid[b-l3gaw7olz7] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-agenda-day:nth-child(3n)[b-l3gaw7olz7] {
        border-right: 0;
    }

    .dashboard-agenda-day:nth-child(n + 4)[b-l3gaw7olz7] {
        border-top: 1px solid var(--wl-border-subtle);
    }
}

@media (max-width: 820px) {
    .command-page-header[b-l3gaw7olz7] {
        align-items: flex-start;
        flex-direction: column;
    }

    .command-header-actions[b-l3gaw7olz7] {
        justify-content: flex-start;
    }


    .career-briefing[b-l3gaw7olz7] {
        grid-template-columns: 1fr;
    }

    .briefing-portrait[b-l3gaw7olz7] {
        min-height: 16rem;
        border-left: 0;
        border-top: 1px solid var(--wl-border-subtle);
    }

    .briefing-avatar-shell[b-l3gaw7olz7] {
        width: min(72%, 17rem);
        height: 18.5rem;
        transform: none;
    }

    .briefing-copy h2[b-l3gaw7olz7] {
        max-width: 100%;
        font-size: 3.2rem;
    }

    .daily-issue-teaser h2[b-l3gaw7olz7] {
        font-size: 2.7rem;
    }

    .daily-issue-teaser > div[b-l3gaw7olz7] {
        padding: 1.25rem;
    }

    .game-season-teaser[b-l3gaw7olz7] {
        padding: 1rem;
    }

    .game-season-teaser-copy h2[b-l3gaw7olz7] {
        font-size: 2.45rem;
    }

    .game-season-teaser-stats[b-l3gaw7olz7] {
        grid-template-columns: 1fr;
    }

    .game-season-spotlight[b-l3gaw7olz7] {
        align-items: stretch;
    }

    .career-pulse .pulse-list[b-l3gaw7olz7],
    .next-move-grid[b-l3gaw7olz7],
    .world-pulse-list[b-l3gaw7olz7],
    .social-pulse-stats[b-l3gaw7olz7] {
        grid-template-columns: 1fr;
    }

    .dashboard-agenda-grid[b-l3gaw7olz7] {
        grid-template-columns: 1fr;
    }

    .dashboard-agenda-day[b-l3gaw7olz7],
    .dashboard-agenda-day:nth-child(3n)[b-l3gaw7olz7] {
        border-right: 0;
    }

    .dashboard-agenda-day:nth-child(n + 2)[b-l3gaw7olz7] {
        border-top: 1px solid var(--wl-border-subtle);
    }


    .opportunity-item[b-l3gaw7olz7] {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .opportunity-deadline[b-l3gaw7olz7] {
        white-space: normal;
    }
}
/* /Components/Pages/LegacyImport/Index.razor.rz.scp.css */
.legacy-import-page[b-hbl85i1zps] {
    color: var(--wl-text-primary);
}

.legacy-import-header[b-hbl85i1zps] {
    margin-bottom: 1.5rem;
}

.legacy-import-header h1[b-hbl85i1zps] {
    font-size: 1.75rem;
    font-weight: 700;
}

.legacy-import-header p[b-hbl85i1zps] {
    color: var(--wl-text-muted);
    margin-top: .35rem;
}

.legacy-import-panel[b-hbl85i1zps],
.legacy-import-summary[b-hbl85i1zps],
.legacy-import-table[b-hbl85i1zps] {
    border: 1px solid var(--wl-border-medium);
    background: var(--wl-bg-secondary);
    border-radius: .5rem;
    padding: 1rem;
}

.legacy-import-panel[b-hbl85i1zps] {
    display: grid;
    gap: 1rem;
}

.legacy-import-summary[b-hbl85i1zps] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.legacy-import-summary span[b-hbl85i1zps],
.legacy-import-row small[b-hbl85i1zps] {
    color: var(--wl-text-muted);
}

.legacy-import-summary strong[b-hbl85i1zps] {
    display: block;
    margin-top: .25rem;
}

.legacy-import-row[b-hbl85i1zps] {
    display: grid;
    grid-template-columns: auto minmax(160px, 1fr) repeat(4, minmax(90px, auto));
    gap: .75rem;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.legacy-import-row:last-child[b-hbl85i1zps] {
    border-bottom: 0;
}

.legacy-import-row.disabled[b-hbl85i1zps] {
    opacity: .55;
}

.legacy-import-character strong[b-hbl85i1zps],
.legacy-import-character small[b-hbl85i1zps] {
    display: block;
}

.legacy-import-alert[b-hbl85i1zps] {
    border-radius: .5rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
}

.legacy-import-alert-error[b-hbl85i1zps] {
    border: 1px solid rgb(239 68 68 / .35);
    background: rgb(239 68 68 / .12);
    color: rgb(252 165 165);
}

.legacy-import-alert-success[b-hbl85i1zps] {
    border: 1px solid rgb(34 197 94 / .35);
    background: rgb(34 197 94 / .12);
    color: rgb(134 239 172);
}

@media (max-width: 760px) {
    .legacy-import-row[b-hbl85i1zps] {
        grid-template-columns: auto minmax(0, 1fr);
    }
}
/* /Components/Pages/Messages/Index.razor.rz.scp.css */
.msg-page[b-ziodfcqysb] {
    display: flex;
    gap: 1rem;
    height: calc(100dvh - 4.5rem - 6rem);
    min-height: 420px;
    max-width: 1100px;
    margin: 0 auto;
}

/* ---------- Conversation list ---------- */
.msg-list[b-ziodfcqysb] {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 14px;
    overflow: hidden;
}

.msg-list-head[b-ziodfcqysb] {
    padding: 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.msg-list-head h1[b-ziodfcqysb] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.92);
}
.msg-new-btn[b-ziodfcqysb] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-gold);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.msg-new-btn:hover[b-ziodfcqysb] { background: rgba(var(--wl-gold-rgb), 0.15); }
.msg-new-btn svg[b-ziodfcqysb] { width: 16px; height: 16px; }

.msg-list-empty[b-ziodfcqysb] {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--wl-text-muted);
    font-size: 0.85rem;
}
.msg-list-hint[b-ziodfcqysb] { font-size: 0.78rem; margin-top: 0.4rem; }

.msg-list-items[b-ziodfcqysb] { flex: 1; overflow-y: auto; padding: 0.4rem 0; }

.msg-list-item[b-ziodfcqysb] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.9rem;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    color: rgba(var(--wl-contrast-rgb), 0.88);
    text-align: left;
}
.msg-list-item:hover[b-ziodfcqysb] { background: rgba(var(--wl-contrast-rgb), 0.05); }
.msg-list-item--active[b-ziodfcqysb] {
    background: rgba(var(--wl-gold-rgb), 0.08);
    border-left-color: var(--wl-gold);
}

/* Conversations with unread messages: tinted row + bold name (active state still wins). */
.msg-list-item--unread[b-ziodfcqysb] { background: rgba(var(--wl-gold-rgb), 0.06); }
.msg-list-item--unread .msg-list-name[b-ziodfcqysb] { font-weight: 800; color: rgba(var(--wl-contrast-rgb), 1); }

.msg-list-avatar-wrap[b-ziodfcqysb] {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
}

.msg-list-avatar[b-ziodfcqysb] {
    width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--wl-border-subtle); flex-shrink: 0;
}
.msg-presence[b-ziodfcqysb] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--wl-bg-secondary);
    background: #64748b;
}
.msg-presence--online[b-ziodfcqysb] { background: #22c55e; }
.msg-presence--offline[b-ziodfcqysb] { background: #64748b; }
.msg-list-text[b-ziodfcqysb] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.msg-list-name[b-ziodfcqysb] {
    display: flex; align-items: center; gap: 0.3rem; min-width: 0;
    font-size: 0.88rem; font-weight: 600;
}
.msg-list-name-text[b-ziodfcqysb] {
    min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-list-thread-glyph[b-ziodfcqysb] {
    width: 13px; height: 13px; flex-shrink: 0;
    color: var(--wl-gold); opacity: 0.9;
}
.msg-list-preview[b-ziodfcqysb] {
    font-size: 0.74rem; color: var(--wl-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-list-unread[b-ziodfcqysb] {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--wl-gold); color: var(--wl-bg-primary);
    font-size: 0.62rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

/* ---------- Thread ---------- */
.msg-thread[b-ziodfcqysb] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 14px;
    overflow: hidden;
}

.msg-thread-empty[b-ziodfcqysb] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    padding: 2rem;
    text-align: center;
}

@media (max-width: 767px) {
    .msg-page[b-ziodfcqysb] {
        flex-direction: column;
        height: auto;
    }
    .msg-list[b-ziodfcqysb] { flex: none; max-height: 40vh; }
    .msg-thread[b-ziodfcqysb] { min-height: 60vh; }
}
/* /Components/Pages/Notifications/Index.razor.rz.scp.css */
.notifications-history-page[b-n561dgy8za] {
    min-height: calc(100vh - 4rem);
    padding: 2rem clamp(1rem, 3vw, 2.5rem);
    background:
        linear-gradient(180deg, rgba(var(--wl-bg-modal-deep-rgb), 0.92), rgba(var(--wl-bg-primary-rgb), 0.96)),
        var(--wl-bg-primary);
}

.notifications-history-shell[b-n561dgy8za] {
    max-width: 980px;
    margin: 0 auto;
}

.notifications-history-header[b-n561dgy8za] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.notifications-history-eyebrow[b-n561dgy8za] {
    color: var(--wl-gold);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0 0 0.35rem;
}

.notifications-history-header h1[b-n561dgy8za] {
    color: var(--wl-text-primary);
    font-family: "Bebas Neue", sans-serif;
    font-size: 2.5rem;
    font-weight: 400;
    margin: 0;
}

.notifications-history-header p[b-n561dgy8za] {
    color: var(--wl-text-muted);
    margin: 0.35rem 0 0;
    max-width: 42rem;
}

.notifications-history-actions[b-n561dgy8za] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.notifications-settings-link[b-n561dgy8za],
.notifications-mark-all[b-n561dgy8za] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0 0.9rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
}

.notifications-settings-link[b-n561dgy8za] {
    color: var(--wl-text-secondary);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    background: rgba(var(--wl-contrast-rgb), 0.035);
}

.notifications-mark-all[b-n561dgy8za] {
    color: var(--wl-bg-primary);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.45);
    background: var(--wl-gold);
    cursor: pointer;
}

.notifications-history-summary[b-n561dgy8za] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.notifications-history-summary > div[b-n561dgy8za] {
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    background: rgba(var(--wl-contrast-rgb), 0.035);
    padding: 1rem;
}

.summary-value[b-n561dgy8za] {
    display: block;
    color: var(--wl-text-primary);
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1;
}

.summary-label[b-n561dgy8za] {
    display: block;
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
    margin-top: 0.35rem;
}

.summary-unread.has-unread[b-n561dgy8za] {
    border-color: rgba(var(--wl-red-rgb), 0.3);
    background: rgba(var(--wl-red-rgb), 0.07);
}

.notifications-history-empty[b-n561dgy8za] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 16rem;
    gap: 0.35rem;
    color: var(--wl-text-muted);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.notifications-history-empty strong[b-n561dgy8za] {
    color: var(--wl-text-primary);
}

.notifications-history-list[b-n561dgy8za] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.notification-history-item[b-n561dgy8za] {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) auto;
    gap: 0.875rem;
    align-items: start;
    width: 100%;
    padding: 1rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.035);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.notification-history-item:hover[b-n561dgy8za] {
    border-color: rgba(var(--wl-gold-rgb), 0.26);
    background: rgba(var(--wl-contrast-rgb), 0.055);
    transform: translateY(-1px);
}

.notification-history-item.is-read[b-n561dgy8za] {
    opacity: 0.72;
}

.notification-history-icon[b-n561dgy8za] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 8px;
}

.notification-history-icon svg[b-n561dgy8za] {
    width: 1.2rem;
    height: 1.2rem;
}

.notification-history-icon.icon-success[b-n561dgy8za] {
    color: #86efac;
    background: rgba(34, 197, 94, 0.13);
}

.notification-history-icon.icon-warning[b-n561dgy8za] {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.13);
}

.notification-history-icon.icon-error[b-n561dgy8za] {
    color: var(--wl-red-light);
    background: rgba(var(--wl-red-rgb), 0.13);
}

.notification-history-icon.icon-info[b-n561dgy8za] {
    color: var(--wl-diamond);
    background: rgba(var(--wl-diamond-rgb), 0.13);
}

.notification-history-content[b-n561dgy8za] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.notification-history-title[b-n561dgy8za] {
    color: var(--wl-text-primary);
    font-weight: 800;
    line-height: 1.25;
}

.notification-history-message[b-n561dgy8za] {
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
    line-height: 1.45;
}

.notification-history-meta[b-n561dgy8za] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
}

.notification-history-dot[b-n561dgy8za] {
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.95rem;
    border-radius: 999px;
    background: var(--wl-diamond);
    box-shadow: 0 0 12px rgba(var(--wl-diamond-rgb), 0.5);
}

@media (max-width: 720px) {
    .notifications-history-page[b-n561dgy8za] {
        padding: 1rem;
    }

    .notifications-history-header[b-n561dgy8za] {
        align-items: stretch;
        flex-direction: column;
    }

    .notifications-history-actions[b-n561dgy8za] {
        justify-content: stretch;
    }

    .notifications-settings-link[b-n561dgy8za],
    .notifications-mark-all[b-n561dgy8za] {
        flex: 1;
    }

    .notifications-history-summary[b-n561dgy8za] {
        grid-template-columns: 1fr;
    }

    .notification-history-item[b-n561dgy8za] {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
        padding: 0.875rem;
    }
}
/* /Components/Pages/Premium/IconSettings.razor.rz.scp.css */
/* Icon Settings Page */

.icon-settings-page[b-vnog3j51t3] {
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        linear-gradient(180deg, var(--wl-bg-primary) 0%, var(--wl-bg-primary) 100%);
}

/* Header */
.page-header[b-vnog3j51t3] {
    display: flex;
    align-items: center;
}

.header-icon-wrap[b-vnog3j51t3] {
    filter: drop-shadow(0 4px 12px rgba(var(--wl-gold-rgb), 0.3));
}

/* Section Card (shared) */
.section-card[b-vnog3j51t3] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.section-title[b-vnog3j51t3] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    color: var(--wl-text-primary);
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.section-label[b-vnog3j51t3] {
    font-size: 12px;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
}

/* Live Preview */
.preview-area[b-vnog3j51t3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1.25rem 0;
}

.preview-nickname[b-vnog3j51t3] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

/* Tier Progress Track */
.tier-track[b-vnog3j51t3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1rem 0 0.5rem;
}

.tier-connector[b-vnog3j51t3] {
    flex: 1;
    max-width: 80px;
    height: 2px;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    transition: background 0.3s ease;
}

.connector-active[b-vnog3j51t3] {
    background: linear-gradient(90deg, var(--wl-gold), rgba(var(--wl-gold-rgb), 0.4));
}

.tier-node[b-vnog3j51t3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: default;
}

.tier-dot[b-vnog3j51t3] {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.15);
    transition: all 0.3s ease;
}

.node-active .tier-dot[b-vnog3j51t3] {
    background: var(--wl-gold);
    border-color: var(--wl-gold);
    box-shadow: 0 0 8px rgba(var(--wl-gold-rgb), 0.3);
}

.node-current .tier-dot[b-vnog3j51t3] {
    width: 18px;
    height: 18px;
    box-shadow: 0 0 0 4px rgba(var(--wl-gold-rgb), 0.2), 0 0 12px rgba(var(--wl-gold-rgb), 0.4);
}

.tier-label[b-vnog3j51t3] {
    font-size: 11px;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.node-active .tier-label[b-vnog3j51t3] {
    color: var(--wl-gold);
    font-weight: 600;
}

/* Predefined Icons Grid */
.icons-grid[b-vnog3j51t3] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .icons-grid[b-vnog3j51t3] {
        grid-template-columns: repeat(3, 1fr);
    }
}

.icon-option[b-vnog3j51t3] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 0.75rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.icon-option:hover[b-vnog3j51t3] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    transform: scale(1.05);
}

.icon-option.icon-selected[b-vnog3j51t3] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.15), 0 4px 12px rgba(var(--wl-gold-rgb), 0.2);
}

.icon-option[b-vnog3j51t3]  .icon-option-svg {
    width: 100%;
    height: 100%;
    max-width: 32px;
    max-height: 32px;
}

/* Color Picker */
.color-title[b-vnog3j51t3] {
    font-size: 13px;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
}

.color-swatches[b-vnog3j51t3] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.color-swatch[b-vnog3j51t3] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.color-swatch:hover[b-vnog3j51t3] {
    transform: scale(1.15);
    box-shadow: 0 2px 8px var(--wl-shadow-color);
}

.swatch-active[b-vnog3j51t3] {
    border-color: var(--wl-text-primary);
    box-shadow: 0 0 0 3px rgba(var(--wl-contrast-rgb), 0.15);
    transform: scale(1.15);
}

.swatch-check[b-vnog3j51t3] {
    width: 16px;
    height: 16px;
}

/* Upload Zone */
.upload-zone[b-vnog3j51t3] {
    position: relative;
    border: 2px dashed rgba(var(--wl-contrast-rgb), 0.15);
    border-radius: 0.75rem;
    padding: 2rem;
    text-align: center;
    transition: border-color 0.3s ease;
}

.upload-zone:hover[b-vnog3j51t3] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.upload-input[b-vnog3j51t3] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.upload-placeholder[b-vnog3j51t3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.upload-icon[b-vnog3j51t3] {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--wl-text-muted);
}

.upload-hint[b-vnog3j51t3] {
    font-size: 13px;
    color: var(--wl-text-secondary);
}

.upload-size[b-vnog3j51t3] {
    font-size: 12px;
    color: var(--wl-text-muted);
}

/* Upload History */
.history-grid[b-vnog3j51t3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
}

.history-item[b-vnog3j51t3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 0.75rem;
    transition: border-color 0.25s ease;
}

.history-active[b-vnog3j51t3] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.06);
}

.history-thumb[b-vnog3j51t3] {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    border-radius: 4px;
}

.history-actions[b-vnog3j51t3] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.history-btn[b-vnog3j51t3] {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-use[b-vnog3j51t3] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.2);
}

.btn-use:hover[b-vnog3j51t3] {
    background: rgba(var(--wl-gold-rgb), 0.2);
}

.btn-delete[b-vnog3j51t3] {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.15);
}

.btn-delete:hover[b-vnog3j51t3] {
    background: rgba(239, 68, 68, 0.15);
}

.empty-state[b-vnog3j51t3] {
    text-align: center;
    padding: 1.5rem 0;
    font-size: 14px;
    color: var(--wl-text-muted);
    font-style: italic;
}

/* Effects Grid */
.effects-grid[b-vnog3j51t3] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .effects-grid[b-vnog3j51t3] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.effect-card[b-vnog3j51t3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.25s ease;
}

.effect-card:hover[b-vnog3j51t3] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    transform: translateY(-2px);
}

.effect-active[b-vnog3j51t3] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.08);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.12), 0 4px 12px rgba(var(--wl-gold-rgb), 0.15);
}

.effect-preview[b-vnog3j51t3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.effect-preview[b-vnog3j51t3]  .effect-icon-svg {
    width: 2rem;
    height: 2rem;
}

.effect-name[b-vnog3j51t3] {
    font-size: 12px;
    color: var(--wl-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.effect-active .effect-name[b-vnog3j51t3] {
    color: var(--wl-gold);
    font-weight: 600;
}

/* Locked Section */
.section-locked[b-vnog3j51t3] {
    position: relative;
}

.section-locked > *:not(.locked-overlay)[b-vnog3j51t3] {
    opacity: 0.35;
    pointer-events: none;
}

.locked-overlay[b-vnog3j51t3] {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(var(--wl-bg-secondary-rgb, 30, 30, 36), 0.6);
    backdrop-filter: blur(2px);
    border-radius: 0.75rem;
    pointer-events: none;
}

.lock-icon[b-vnog3j51t3] {
    width: 2rem;
    height: 2rem;
    color: var(--wl-text-muted);
}

.locked-text[b-vnog3j51t3] {
    font-size: 13px;
    color: var(--wl-text-muted);
    text-align: center;
    max-width: 280px;
    line-height: 1.4;
}

/* Clear Button */
.clear-btn[b-vnog3j51t3] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.25rem;
    font-size: 13px;
    color: var(--wl-text-muted);
    background: transparent;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.clear-btn:hover[b-vnog3j51t3] {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
    background: rgba(239, 68, 68, 0.06);
}

/* Confirm Dialog */
.confirm-backdrop[b-vnog3j51t3] {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-overlay-light);
    backdrop-filter: blur(4px);
}

.confirm-dialog[b-vnog3j51t3] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border);
    border-radius: 1rem;
    padding: 1.5rem 2rem;
    max-width: 360px;
    text-align: center;
}

.confirm-text[b-vnog3j51t3] {
    font-size: 14px;
    color: var(--wl-text-secondary);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.confirm-actions[b-vnog3j51t3] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.confirm-btn[b-vnog3j51t3] {
    padding: 0.5rem 1.25rem;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.confirm-yes[b-vnog3j51t3] {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.25);
}

.confirm-yes:hover[b-vnog3j51t3] {
    background: rgba(239, 68, 68, 0.25);
}

.confirm-no[b-vnog3j51t3] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: var(--wl-text-secondary);
    border-color: rgba(var(--wl-contrast-rgb), 0.1);
}

.confirm-no:hover[b-vnog3j51t3] {
    background: rgba(var(--wl-contrast-rgb), 0.1);
}
/* /Components/Pages/Radio/Index.razor.rz.scp.css */
.radio-container[b-k3t2ty6hku] {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
    background: var(--wl-bg-secondary);
    border-radius: 1rem;
    border: 1px solid var(--wl-border);
}

.radio-header[b-k3t2ty6hku] {
    text-align: center;
    margin-bottom: 2rem;
}

.radio-header h1[b-k3t2ty6hku] {
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1;
    margin: 0.75rem 0 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.radio-subtitle[b-k3t2ty6hku] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0.375rem 0 0 0;
}

.radio-logo[b-k3t2ty6hku] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.radio-live[b-k3t2ty6hku] {
    background: #ef4444;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    letter-spacing: 0.05em;
}

.radio-pulse[b-k3t2ty6hku] {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse-b-k3t2ty6hku 1.5s ease-in-out infinite;
}

@keyframes pulse-b-k3t2ty6hku {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.5); }
}

.radio-loading[b-k3t2ty6hku] {
    text-align: center;
    padding: 3rem 0;
    color: var(--wl-text-secondary);
}

.now-playing[b-k3t2ty6hku] {
    text-align: center;
    padding: 1.5rem;
    background: var(--wl-bg-tertiary);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
}

.now-playing-label[b-k3t2ty6hku] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-secondary);
    margin-bottom: 0.5rem;
}

.now-playing-title[b-k3t2ty6hku] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.now-playing-artist[b-k3t2ty6hku] {
    color: var(--wl-gold);
    font-size: 0.95rem;
    margin-top: 0.25rem;
}

.player-controls[b-k3t2ty6hku] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.player-controls audio[b-k3t2ty6hku] {
    display: none;
}

.play-btn[b-k3t2ty6hku] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--wl-gold);
    background: transparent;
    color: var(--wl-gold);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.play-btn:hover[b-k3t2ty6hku] {
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
}

.play-btn svg[b-k3t2ty6hku] {
    width: 1.2rem;
    height: 1.2rem;
}

.volume-control[b-k3t2ty6hku] {
    flex: 1;
}

.volume-slider[b-k3t2ty6hku] {
    width: 100%;
    accent-color: var(--wl-gold);
}

.track-list[b-k3t2ty6hku] {
    margin-top: 1.5rem;
}

.track-list h3[b-k3t2ty6hku] {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-secondary);
    margin-bottom: 0.75rem;
}

.track-item[b-k3t2ty6hku] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    transition: background 0.15s;
}

.track-item:hover[b-k3t2ty6hku] {
    background: var(--wl-bg-tertiary);
}

.track-item.active[b-k3t2ty6hku] {
    background: var(--wl-bg-tertiary);
    border-left: 3px solid var(--wl-gold);
}

.track-title[b-k3t2ty6hku] {
    font-weight: 500;
    color: var(--wl-text-primary);
    flex: 1;
}

.track-artist[b-k3t2ty6hku] {
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
}

.track-genre[b-k3t2ty6hku] {
    color: var(--wl-text-tertiary);
    font-size: 0.75rem;
    background: var(--wl-bg-primary);
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
}
/* /Components/Pages/Rankings/Index.razor.rz.scp.css */
/* Rankings Page */
.rankings-page[b-2vzwq1koh1] {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Header */
.rankings-header[b-2vzwq1koh1] {
    text-align: center;
    margin-bottom: 1.25rem;
}

.rankings-header h1[b-2vzwq1koh1] {
    font-size: 2rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem;
}

.rankings-header .subtitle[b-2vzwq1koh1] {
    color: var(--wl-text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.season-filter[b-2vzwq1koh1] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 0.5rem;
    background: rgba(var(--wl-bg-secondary-rgb, 18, 20, 31), 0.72);
}

.season-filter label[b-2vzwq1koh1],
.season-filter span[b-2vzwq1koh1] {
    color: var(--wl-text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.season-filter select[b-2vzwq1koh1] {
    min-width: 220px;
    height: 2rem;
    padding: 0 2rem 0 0.75rem;
    color: var(--wl-text-primary);
    border: 1px solid var(--wl-border);
    border-radius: 0.375rem;
    background: var(--wl-bg-tertiary);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 700;
}

.season-filter select:focus-visible[b-2vzwq1koh1] {
    outline: 2px solid var(--wl-gold);
    outline-offset: 2px;
}

.ranking-surfaces[b-2vzwq1koh1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0 0 1rem;
}

.surface-card[b-2vzwq1koh1] {
    display: grid;
    gap: 0.18rem;
    min-height: 3.8rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--wl-border);
    border-radius: 0.7rem;
    background: linear-gradient(145deg, rgba(var(--wl-contrast-rgb), 0.04), rgba(var(--wl-bg-secondary-rgb), 0.8));
    color: var(--wl-text-primary);
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.surface-card strong[b-2vzwq1koh1] {
    font-size: 0.82rem;
    font-weight: 900;
}

.surface-card span[b-2vzwq1koh1] {
    color: var(--wl-text-secondary);
    font-size: 0.68rem;
    line-height: 1.25;
}

.surface-card:hover[b-2vzwq1koh1] {
    transform: translateY(-2px);
    border-color: rgba(var(--wl-gold-rgb), 0.38);
}

.surface-card.active[b-2vzwq1koh1] {
    border-color: rgba(var(--wl-gold-rgb), 0.68);
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.16), rgba(var(--wl-bg-secondary-rgb), 0.92));
    box-shadow: inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.08), 0 10px 26px rgba(0, 0, 0, 0.2);
}

.ranking-context[b-2vzwq1koh1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--wl-border);
    background: rgba(var(--wl-gold-rgb), 0.045);
}

.ranking-context span[b-2vzwq1koh1] {
    color: var(--wl-text-secondary);
    font-size: 0.72rem;
    font-weight: 750;
}

.ranking-context span + span[b-2vzwq1koh1]::before {
    content: "·";
    margin-right: 0.45rem;
    color: rgba(var(--wl-gold-rgb), 0.72);
}

/* Tab Navigation */
.rankings-tabs[b-2vzwq1koh1] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--wl-border);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.rankings-tabs[b-2vzwq1koh1]::-webkit-scrollbar {
    display: none;
}

.tab-btn[b-2vzwq1koh1] {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wl-text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.tab-btn:hover[b-2vzwq1koh1] {
    color: var(--wl-text-primary);
    background: var(--wl-bg-secondary);
}

.tab-btn.active[b-2vzwq1koh1] {
    color: var(--wl-gold);
    border-bottom-color: var(--wl-gold);
}

/* Content area */
.rankings-content[b-2vzwq1koh1] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.rankings-content.is-league[b-2vzwq1koh1] {
    overflow: visible;
    border: 0;
    background: transparent;
}

.rankings-content.is-league[b-2vzwq1koh1]  .career-trend {
    margin-bottom: 0;
}

/* Leaderboard Table */
[b-2vzwq1koh1] .leaderboard-table-wrapper {
    min-height: 200px;
}

[b-2vzwq1koh1] .leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}

[b-2vzwq1koh1] .leaderboard-table thead {
    background: var(--wl-bg-tertiary);
}

[b-2vzwq1koh1] .leaderboard-table th {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-secondary);
    text-align: left;
    border-bottom: 1px solid var(--wl-border);
}

[b-2vzwq1koh1] .leaderboard-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wl-border-subtle, var(--wl-border));
    vertical-align: middle;
}

[b-2vzwq1koh1] .leaderboard-table tbody tr {
    transition: background 0.15s ease, transform 0.2s ease;
}

[b-2vzwq1koh1] .leaderboard-table tbody tr:hover {
    background: rgba(var(--wl-gold-rgb), 0.05);
    transform: translateX(4px);
}

[b-2vzwq1koh1] .leaderboard-table tbody tr:last-child td {
    border-bottom: none;
}

/* Current player highlight - always lit, gold bar on the left */
[b-2vzwq1koh1] .current-player {
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.10), transparent 70%);
    box-shadow: inset 3px 0 0 var(--wl-gold);
}

[b-2vzwq1koh1] .current-player:hover {
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.14), transparent 70%);
}

/* Column sizing */
[b-2vzwq1koh1] .col-rank {
    width: 60px;
    text-align: center;
}

[b-2vzwq1koh1] .col-avatar {
    width: 48px;
}

[b-2vzwq1koh1] .col-score {
    width: 100px;
    text-align: right;
}

/* Rank badges */
[b-2vzwq1koh1] .rank-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
}

[b-2vzwq1koh1] .rank-1 {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
    background: linear-gradient(160deg, var(--wl-champagne) 0%, var(--wl-gold) 55%, var(--wl-gold-dark) 100%);
    color: #1a1a1a;
    box-shadow: 0 0 16px rgba(var(--wl-gold-rgb), 0.5);
}

[b-2vzwq1koh1] .rank-2 {
    background: linear-gradient(160deg, #E8E8E8 0%, var(--wl-silver) 60%, #8F8F8F 100%);
    color: #1a1a1a;
    box-shadow: 0 0 10px rgba(192, 192, 192, 0.3);
}

[b-2vzwq1koh1] .rank-3 {
    background: linear-gradient(160deg, #D9A06B 0%, #B0703D 60%, #8C5328 100%);
    color: #2A1A0E;
    box-shadow: 0 0 10px rgba(176, 112, 61, 0.3);
}

[b-2vzwq1koh1] .rank-number {
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Top 3 row accents */
[b-2vzwq1koh1] .rank-gold {
    border-left: 3px solid var(--wl-gold);
}

[b-2vzwq1koh1] .rank-silver {
    border-left: 3px solid var(--wl-silver);
}

[b-2vzwq1koh1] .rank-bronze {
    border-left: 3px solid #B0703D;
}

/* Avatar thumbnail - aspect-ratio + flex-shrink guard so a non-square source or a
   tight table cell can never squash it into an egg. */
[b-2vzwq1koh1] .avatar-thumb {
    width: 36px;
    height: 36px;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--wl-border);
}

/* Player link */
[b-2vzwq1koh1] .player-link {
    color: var(--wl-text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

[b-2vzwq1koh1] .player-link:hover {
    color: var(--wl-gold);
}

/* Score */
[b-2vzwq1koh1] .score-value {
    font-weight: 600;
    color: var(--wl-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Your rank footer - the player's row, always visible (sticky) */
[b-2vzwq1koh1] .your-rank-footer {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    color: var(--wl-text-primary);
    border-top: 1px solid rgba(var(--wl-gold-rgb), 0.35);
    background:
        linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.12), transparent 70%),
        var(--wl-bg-secondary);
    box-shadow: inset 3px 0 0 var(--wl-gold), 0 -6px 18px rgba(0, 0, 0, 0.35);
    font-size: 0.875rem;
}

[b-2vzwq1koh1] .your-rank-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.4rem;
    border-radius: 9999px;
    background: linear-gradient(160deg, var(--wl-champagne) 0%, var(--wl-gold) 75%);
    color: #1a1a1a;
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 0 12px rgba(var(--wl-gold-rgb), 0.4);
}

[b-2vzwq1koh1] .your-rank-label {
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Loading state */
[b-2vzwq1koh1] .leaderboard-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}

[b-2vzwq1koh1] .loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--wl-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-2vzwq1koh1 0.8s linear infinite;
}

@keyframes spin-b-2vzwq1koh1 {
    to { transform: rotate(360deg); }
}

/* Empty state */
[b-2vzwq1koh1] .leaderboard-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    color: var(--wl-text-secondary);
}

[b-2vzwq1koh1] .empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

/* Animations */
.animate-fade-in[b-2vzwq1koh1] {
    animation: fadeIn-b-2vzwq1koh1 0.4s ease both;
}

.delay-100[b-2vzwq1koh1] {
    animation-delay: 0.1s;
}

.delay-200[b-2vzwq1koh1] {
    animation-delay: 0.2s;
}

@keyframes fadeIn-b-2vzwq1koh1 {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 680px) {
    .ranking-surfaces[b-2vzwq1koh1] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .surface-card[b-2vzwq1koh1] {
        min-height: 3.5rem;
        padding: 0.55rem 0.35rem;
        text-align: center;
    }

    .surface-card strong[b-2vzwq1koh1] {
        overflow-wrap: anywhere;
        font-size: 0.76rem;
        line-height: 1.08;
    }

    .surface-card span[b-2vzwq1koh1] { display: none; }
}

/* Responsive */
@media (max-width: 640px) {
    .rankings-page[b-2vzwq1koh1] {
        padding: 1rem 0.5rem;
    }

    .rankings-header h1[b-2vzwq1koh1] {
        font-size: 1.5rem;
    }

    .tab-btn[b-2vzwq1koh1] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }

    [b-2vzwq1koh1] .leaderboard-table th,
    [b-2vzwq1koh1] .leaderboard-table td {
        padding: 0.5rem 0.5rem;
    }

    [b-2vzwq1koh1] .col-score {
        width: 70px;
    }
}
/* /Components/Pages/Register/Appearance.razor.rz.scp.css */
/* ── Card ── */
.appearance-card[b-ycutgi5fcn] {
    max-width: 30rem !important;
}

/* ── Progress steps ── */
.progress-row[b-ycutgi5fcn] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 0.5rem;
}

.step-dot[b-ycutgi5fcn] {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8125rem;
    flex-shrink: 0;
}

.step-dot.done[b-ycutgi5fcn] {
    background: var(--wl-gold);
    color: var(--wl-text-primary);
}

.step-dot.done svg[b-ycutgi5fcn] {
    width: 1rem;
    height: 1rem;
    stroke: #fff;
}

.step-dot.current[b-ycutgi5fcn] {
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
}

.step-line[b-ycutgi5fcn] {
    width: 2.5rem;
    height: 2px;
    background: var(--wl-border-medium);
}

.step-line.done[b-ycutgi5fcn] {
    background: var(--wl-gold);
}

.step-text[b-ycutgi5fcn] {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    margin-bottom: 1.25rem;
}

.page-subtitle[b-ycutgi5fcn] {
    text-align: center;
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin-bottom: 1.5rem;
}

/* ── Preview ── */
.preview-wrap[b-ycutgi5fcn] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.preview-frame[b-ycutgi5fcn] {
    width: 180px;
    aspect-ratio: 300 / 620;
    border-radius: 0.75rem;
    border: 1px solid var(--wl-border-subtle);
    background: rgba(var(--wl-contrast-rgb), 0.015);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-img[b-ycutgi5fcn] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.preview-empty[b-ycutgi5fcn] {
    color: var(--wl-border-medium);
}

/* ── Skin tone ── */
.skin-row[b-ycutgi5fcn] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.skin-dot[b-ycutgi5fcn] {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.skin-dot:hover[b-ycutgi5fcn] {
    transform: scale(1.15);
    border-color: rgba(var(--wl-contrast-rgb), 0.35);
}

.skin-dot.active[b-ycutgi5fcn] {
    border-color: var(--wl-gold);
    box-shadow: 0 0 0 1.5px rgba(var(--wl-gold-rgb), 0.45);
    transform: scale(1.15);
}

/* ── Outfit selection ── */
.outfit-section[b-ycutgi5fcn] {
    margin-bottom: 1rem;
}

.section-label[b-ycutgi5fcn] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
    text-align: center;
    margin-bottom: 0.5rem;
}

.outfit-row[b-ycutgi5fcn] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.outfit-chip[b-ycutgi5fcn] {
    width: 5.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.375rem;
    border-radius: 0.5rem;
    border: 1.5px solid var(--wl-border-subtle);
    background: rgba(var(--wl-contrast-rgb), 0.015);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.outfit-chip:hover[b-ycutgi5fcn] {
    border-color: rgba(var(--wl-contrast-rgb), 0.18);
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.outfit-chip.chosen[b-ycutgi5fcn] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.06);
}

.outfit-thumb[b-ycutgi5fcn] {
    width: 100%;
    aspect-ratio: 300 / 620;
    object-fit: contain;
    border-radius: 0.25rem;
}

.outfit-name[b-ycutgi5fcn] {
    font-size: 0.5625rem;
    color: var(--wl-text-muted);
    margin-top: 0.125rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 1.3;
}

/* ── Anonymous registration protection ── */
.registration-security[b-ycutgi5fcn] {
    display: flex;
    justify-content: center;
    min-height: 0;
    margin: 0.75rem 0;
}

.registration-turnstile[b-ycutgi5fcn] {
    min-height: 65px;
}

.registration-honeypot[b-ycutgi5fcn] {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ── Submit ── */
.submit-btn[b-ycutgi5fcn] {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wl-bg-primary);
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.submit-btn:hover:not(:disabled)[b-ycutgi5fcn] {
    background: linear-gradient(135deg, var(--wl-gold-light), var(--wl-gold));
    box-shadow: 0 0 20px var(--wl-gold-border);
}

.submit-btn:disabled[b-ycutgi5fcn] {
    opacity: 0.4;
    cursor: not-allowed;
}

.back-link[b-ycutgi5fcn] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    transition: color 0.2s ease;
}

.back-link:hover[b-ycutgi5fcn] {
    color: var(--wl-gold);
}

@media (max-width: 640px) {
    .appearance-card[b-ycutgi5fcn] {
        max-width: min(100%, 26rem) !important;
    }

    .progress-row[b-ycutgi5fcn] {
        margin-bottom: 0.35rem;
    }

    .step-dot[b-ycutgi5fcn] {
        width: 1.75rem;
        height: 1.75rem;
    }

    .step-line[b-ycutgi5fcn] {
        width: 2rem;
    }

    .step-text[b-ycutgi5fcn] {
        margin-bottom: 0.75rem;
    }

    .page-subtitle[b-ycutgi5fcn] {
        margin-bottom: 1rem;
        line-height: 1.35;
    }

    .preview-wrap[b-ycutgi5fcn] {
        margin-bottom: 0.75rem;
    }

    .preview-frame[b-ycutgi5fcn] {
        width: clamp(132px, 42vw, 152px);
        max-height: 42dvh;
    }

    .skin-row[b-ycutgi5fcn] {
        gap: 0.45rem;
        margin-bottom: 1rem;
    }

    .skin-dot[b-ycutgi5fcn] {
        width: 1.6rem;
        height: 1.6rem;
    }

    .outfit-section[b-ycutgi5fcn] {
        margin-bottom: 0.85rem;
    }

    .outfit-row[b-ycutgi5fcn] {
        gap: 0.4rem;
    }

    .outfit-chip[b-ycutgi5fcn] {
        width: clamp(4.35rem, 25vw, 5rem);
        padding: 0.3rem;
    }

    .submit-btn[b-ycutgi5fcn] {
        min-height: 2.75rem;
    }
}

@media (max-height: 700px) {
    .preview-frame[b-ycutgi5fcn] {
        width: clamp(120px, 35vw, 140px);
    }

    .page-subtitle[b-ycutgi5fcn] {
        margin-bottom: 0.75rem;
    }

    .skin-row[b-ycutgi5fcn] {
        margin-bottom: 0.85rem;
    }
}
/* /Components/Pages/Register/Finish.razor.rz.scp.css */
.quick-finish-page[b-cekpd7upt0] {
    min-height: calc(100vh - 4rem);
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background:
        radial-gradient(circle at 20% 10%, rgba(var(--wl-gold-rgb), .12), transparent 32%),
        var(--wl-bg-primary);
}

.quick-finish-card[b-cekpd7upt0] {
    width: min(100%, 34rem);
    padding: clamp(1.4rem, 4vw, 2.2rem);
    border: 1px solid rgba(var(--wl-gold-rgb), .22);
    border-radius: 1rem;
    background: var(--wl-bg-secondary);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
}

.quick-finish-card header > span[b-cekpd7upt0] {
    color: var(--wl-gold);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.quick-finish-card h1[b-cekpd7upt0] { margin: .55rem 0 0; color: var(--wl-text-primary); font-size: clamp(1.8rem, 5vw, 2.5rem); }
.quick-finish-card header p[b-cekpd7upt0] { margin: .7rem 0 0; color: var(--wl-text-secondary); line-height: 1.55; }
.quick-finish-card form[b-cekpd7upt0] { display: grid; gap: 1rem; margin-top: 1.5rem; }
.quick-finish-field[b-cekpd7upt0] { display: grid; gap: .35rem; }
.quick-finish-field label[b-cekpd7upt0] { color: var(--wl-text-secondary); font-size: .82rem; font-weight: 700; }
.quick-finish-field[b-cekpd7upt0]  .input-field { min-height: 3rem; }
.quick-finish-field[b-cekpd7upt0]  .validation-message { color: #f87171; font-size: .75rem; }
.quick-finish-password-hint[b-cekpd7upt0] { margin: 0; color: var(--wl-text-muted); font-size: .76rem; line-height: 1.5; }
.quick-finish-error[b-cekpd7upt0] { margin-top: 1rem; padding: .75rem; border: 1px solid rgba(248, 113, 113, .3); border-radius: .55rem; color: #fca5a5; background: rgba(127, 29, 29, .14); }
.quick-finish-card .btn-primary[b-cekpd7upt0] { width: 100%; min-height: 3rem; }
.quick-finish-card .btn-secondary[b-cekpd7upt0] { width: 100%; min-height: 2.75rem; margin: 0 0 .75rem; }
.quick-finish-success[b-cekpd7upt0] { text-align: center; }
.quick-finish-success > span[b-cekpd7upt0] { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto; border-radius: 50%; color: var(--wl-bg-primary); background: var(--wl-gold); font-size: 1.7rem; font-weight: 900; }
.quick-finish-success p[b-cekpd7upt0] { margin: .8rem 0 1.4rem; color: var(--wl-text-secondary); line-height: 1.55; }
.quick-finish-success .quick-finish-resend-status[b-cekpd7upt0] { margin: 0 0 .9rem; color: var(--wl-text-secondary); font-size: .8rem; }
.quick-finish-success .quick-finish-resend-status--error[b-cekpd7upt0] { color: #fca5a5; }
/* /Components/Pages/Shop/DlcStore.razor.rz.scp.css */
/* ============================================
   DLC STORE PAGE
   Theme: Premium / Diamond
   ============================================ */

.dlc-page[b-utynryy2ny] {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1.5rem;
    min-height: 100vh;
}

.dlc-bg-atmosphere[b-utynryy2ny] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(var(--wl-gold-rgb), 0.06) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 100% 100%, rgba(var(--wl-gold-rgb), 0.03) 0%, transparent 50%);
}

/* Loading */
.dlc-loading[b-utynryy2ny] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.dlc-loading-spinner[b-utynryy2ny] {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: dlc-spin-b-utynryy2ny 0.8s linear infinite;
}

@keyframes dlc-spin-b-utynryy2ny {
    to { transform: rotate(360deg); }
}

.dlc-empty[b-utynryy2ny] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    color: var(--wl-text-muted);
}

/* Header */
.dlc-header[b-utynryy2ny] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.dlc-header-icon[b-utynryy2ny] {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: var(--wl-gold-bg);
    border: 1px solid var(--wl-gold-border);
}

.dlc-header-icon svg[b-utynryy2ny] {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
}

.dlc-eyebrow[b-utynryy2ny] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-gold);
    margin-bottom: 0.375rem;
}

.dlc-title-group h1[b-utynryy2ny] {
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.dlc-subtitle[b-utynryy2ny] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0.375rem 0 0 0;
}

/* Grid */
.dlc-grid[b-utynryy2ny] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 640px) {
    .dlc-grid[b-utynryy2ny] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .dlc-grid[b-utynryy2ny] {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Card */
.dlc-card[b-utynryy2ny] {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    border: 1px solid var(--wl-border-subtle);
    background: var(--wl-bg-secondary);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.dlc-card:hover[b-utynryy2ny] {
    border-color: var(--wl-gold-border);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.08);
}

.dlc-card--purchased[b-utynryy2ny] {
    border-color: rgba(var(--wl-green-rgb), 0.3);
}

.dlc-card--locked[b-utynryy2ny] {
    opacity: 0.65;
}

.dlc-card-icon[b-utynryy2ny] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem 1rem;
}

.dlc-card-icon svg[b-utynryy2ny] {
    width: 3rem;
    height: 3rem;
    color: var(--wl-gold);
}

.dlc-card--purchased .dlc-card-icon svg[b-utynryy2ny] {
    color: var(--wl-green);
}

.dlc-card--locked .dlc-card-icon svg[b-utynryy2ny] {
    color: var(--wl-text-muted);
}

.dlc-card-body[b-utynryy2ny] {
    flex: 1;
    padding: 0 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dlc-card-name[b-utynryy2ny] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0;
    text-align: center;
}

.dlc-card-desc[b-utynryy2ny] {
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
    line-height: 1.5;
    margin: 0;
    text-align: center;
}

.dlc-card-price[b-utynryy2ny] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.diamond-icon[b-utynryy2ny] {
    width: 1rem;
    height: 1rem;
}

.dlc-card-fame[b-utynryy2ny] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    cursor: help;
}

.dlc-card-fame svg[b-utynryy2ny] {
    width: 0.875rem;
    height: 0.875rem;
}

/* Action area */
.dlc-card-action[b-utynryy2ny] {
    padding: 1rem 1.25rem 1.25rem;
    margin-top: auto;
}

.dlc-status[b-utynryy2ny] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.dlc-status svg[b-utynryy2ny] {
    width: 1rem;
    height: 1rem;
}

.dlc-status--owned[b-utynryy2ny] {
    color: var(--wl-green);
    background: rgba(var(--wl-green-rgb), 0.1);
    border: 1px solid rgba(var(--wl-green-rgb), 0.2);
}

.dlc-status--locked[b-utynryy2ny] {
    color: var(--wl-text-muted);
    background: rgba(var(--wl-text-secondary-rgb), 0.05);
    border: 1px solid var(--wl-border-subtle);
}

.dlc-status--locked svg[b-utynryy2ny] {
    width: 1.125rem;
    height: 1.125rem;
}

.dlc-buy-btn[b-utynryy2ny] {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: none;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.dlc-buy-btn:hover[b-utynryy2ny] {
    background: var(--wl-gold-light);
    transform: translateY(-1px);
}

.dlc-buy-btn:active[b-utynryy2ny] {
    transform: translateY(0);
}

/* Confirm modal inline styles */
.dlc-confirm-body[b-utynryy2ny] {
    padding: 0.5rem 0;
    color: var(--wl-text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.dlc-confirm-actions[b-utynryy2ny] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.btn-cancel[b-utynryy2ny] {
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-medium);
    background: transparent;
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-cancel:hover[b-utynryy2ny] {
    background: var(--wl-bg-tertiary);
}

.btn-confirm[b-utynryy2ny] {
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    border: none;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.btn-confirm:hover[b-utynryy2ny] {
    background: var(--wl-gold-light);
}
/* /Components/Pages/Social/Beef/Start.razor.rz.scp.css */
/* ============================================
   BEEF INITIATE - AAA+++ Cinematic Confrontation
   Theme: High-stakes drama, fire & intensity
   ============================================ */

.beef-initiate[b-w6elzmm2wm] {
    position: relative;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    max-width: 640px;
    margin: 0 auto;
}

/* ============================================
   CINEMATIC ATMOSPHERE
   ============================================ */

.beef-atmosphere[b-w6elzmm2wm] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.beef-gradient-orb[b-w6elzmm2wm] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: beef-pulse-b-w6elzmm2wm 8s ease-in-out infinite;
}

.beef-gradient-orb--red[b-w6elzmm2wm] {
    width: 500px;
    height: 500px;
    top: -200px;
    right: -150px;
    background: radial-gradient(circle, rgba(var(--wl-red-rgb), 0.4) 0%, transparent 70%);
    animation-delay: 0s;
}

.beef-gradient-orb--orange[b-w6elzmm2wm] {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.3) 0%, transparent 70%);
    animation-delay: 4s;
}

@keyframes beef-pulse-b-w6elzmm2wm {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

.beef-scanline[b-w6elzmm2wm] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
}

.beef-noise[b-w6elzmm2wm] {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.5;
}

/* ============================================
   LOADING STATE
   ============================================ */

.beef-loading[b-w6elzmm2wm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.beef-loading-ring[b-w6elzmm2wm] {
    width: 64px;
    height: 64px;
    border: 3px solid rgba(var(--wl-red-rgb), 0.2);
    border-top-color: #EF4444;
    border-radius: 50%;
    animation: spin-b-w6elzmm2wm 0.8s linear infinite;
}

@keyframes spin-b-w6elzmm2wm {
    to { transform: rotate(360deg); }
}

.beef-loading-text[b-w6elzmm2wm] {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(var(--wl-red-rgb), 0.8);
}

/* ============================================
   ERROR STATE
   ============================================ */

.beef-error[b-w6elzmm2wm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    gap: 1rem;
}

.beef-error-icon[b-w6elzmm2wm] {
    width: 80px;
    height: 80px;
    color: rgba(var(--wl-red-rgb), 0.6);
}

.beef-error-icon svg[b-w6elzmm2wm] {
    width: 100%;
    height: 100%;
}

.beef-error-title[b-w6elzmm2wm] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0;
}

.beef-error-message[b-w6elzmm2wm] {
    color: var(--wl-text-muted);
    margin: 0 0 1rem 0;
    max-width: 300px;
}

/* ============================================
   HEADER
   ============================================ */

.beef-header[b-w6elzmm2wm] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.beef-back-btn[b-w6elzmm2wm] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.beef-back-btn:hover[b-w6elzmm2wm] {
    background: var(--wl-border-subtle);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    color: var(--wl-text-primary);
}

.beef-back-btn svg[b-w6elzmm2wm] {
    width: 20px;
    height: 20px;
}

.beef-header-content[b-w6elzmm2wm] {
    flex: 1;
}

.beef-header-tag[b-w6elzmm2wm] {
    text-transform: uppercase;
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(var(--wl-red-rgb), 0.8);
    margin-bottom: 0.25rem;
}

.beef-header-title[b-w6elzmm2wm] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, #EF4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
}

.beef-header-line[b-w6elzmm2wm] {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--wl-red-rgb), 0.5) 0%, transparent 100%);
    border-radius: 1px;
}

/* ============================================
   TARGET CARD - Dramatic Confrontation
   ============================================ */

.beef-target-section[b-w6elzmm2wm] {
    margin-bottom: 2rem;
}

.beef-target-card[b-w6elzmm2wm] {
    position: relative;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg,
        rgba(var(--wl-red-rgb), 0.6) 0%,
        rgba(249, 115, 22, 0.3) 50%,
        rgba(var(--wl-red-rgb), 0.4) 100%);
    overflow: hidden;
}

.beef-target-glow[b-w6elzmm2wm] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--wl-red-rgb), 0.2) 0%, transparent 50%);
    pointer-events: none;
}

.beef-target-inner[b-w6elzmm2wm] {
    position: relative;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.98) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.95) 100%);
    border-radius: 18px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* VS Badge */
.beef-vs-badge[b-w6elzmm2wm] {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    border-radius: 0 0 12px 12px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.15em;
    color: white;
    box-shadow: 0 4px 20px rgba(var(--wl-red-rgb), 0.4);
}

/* Avatar */
.beef-target-avatar-container[b-w6elzmm2wm] {
    position: relative;
    width: 120px;
    height: 120px;
}

.beef-target-avatar-ring[b-w6elzmm2wm] {
    position: absolute;
    inset: -4px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(135deg, #EF4444, #F97316) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ring-pulse-b-w6elzmm2wm 2s ease-in-out infinite;
}

@keyframes ring-pulse-b-w6elzmm2wm {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.02); }
}

.beef-target-avatar[b-w6elzmm2wm] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(var(--wl-bg-modal-deep-rgb), 0.95);
}

/* Target Info */
.beef-target-info[b-w6elzmm2wm] {
    text-align: center;
}

.beef-target-name[b-w6elzmm2wm] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem 0;
}

.beef-target-stats[b-w6elzmm2wm] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.beef-target-stat[b-w6elzmm2wm] {
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--wl-gold-bg);
    border: 1px solid var(--wl-gold-border);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.beef-target-stat svg[b-w6elzmm2wm] {
    width: 14px;
    height: 14px;
}

/* Influence Cost Badge */
.beef-cost-badge[b-w6elzmm2wm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    cursor: help;
    transition: all 0.2s ease;
}

.beef-cost-badge:hover[b-w6elzmm2wm] {
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    border-color: var(--wl-border-medium);
}

.beef-cost-label[b-w6elzmm2wm] {
    text-transform: uppercase;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin-bottom: 0.25rem;
}

.beef-cost-value[b-w6elzmm2wm] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--wl-gold);
    line-height: 1;
}

.beef-cost-warning[b-w6elzmm2wm] {
    text-transform: uppercase;
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: rgba(var(--wl-red-rgb), 0.2);
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #EF4444;
}

/* ============================================
   ATTACK SELECTION
   ============================================ */

.beef-attacks-section[b-w6elzmm2wm] {
    margin-bottom: 1.5rem;
}

.beef-section-header[b-w6elzmm2wm] {
    margin-bottom: 0.25rem;
}

.beef-section-tag[b-w6elzmm2wm] {
    text-transform: uppercase;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.beef-section-title[b-w6elzmm2wm] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0;
}

.beef-section-hint[b-w6elzmm2wm] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    margin: 0 0 1rem 0;
}

.beef-attacks-grid[b-w6elzmm2wm] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Attack Card */
.beef-attack-card[b-w6elzmm2wm] {
    position: relative;
    border-radius: 16px;
    padding: 2px;
    background: var(--wl-border-subtle);
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    border: none;
    overflow: hidden;
}

.beef-attack-card:hover[b-w6elzmm2wm] {
    background: var(--wl-border-medium);
    transform: translateY(-2px);
}

.beef-attack-card.selected[b-w6elzmm2wm] {
    background: linear-gradient(135deg,
        rgba(var(--wl-red-rgb), 0.6) 0%,
        rgba(249, 115, 22, 0.4) 100%);
}

.beef-attack-bg[b-w6elzmm2wm] {
    position: absolute;
    inset: 2px;
    background: linear-gradient(135deg,
        rgba(var(--wl-bg-modal-deep-rgb), 0.98) 0%,
        rgba(var(--wl-bg-modal-rgb), 0.95) 100%);
    border-radius: 14px;
}

.beef-attack-content[b-w6elzmm2wm] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.beef-attack-icon[b-w6elzmm2wm] {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
}

.beef-attack-icon svg[b-w6elzmm2wm] {
    width: 28px;
    height: 28px;
}

.beef-attack-icon--fire[b-w6elzmm2wm] {
    background: linear-gradient(135deg, rgba(var(--wl-red-rgb), 0.2) 0%, rgba(249, 115, 22, 0.15) 100%);
    color: #EF4444;
}

.beef-attack-icon--cool[b-w6elzmm2wm] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(99, 102, 241, 0.15) 100%);
    color: #3B82F6;
}

.beef-attack-info[b-w6elzmm2wm] {
    flex: 1;
    min-width: 0;
}

.beef-attack-name[b-w6elzmm2wm] {
    text-transform: uppercase;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin-bottom: 0.25rem;
}

.beef-attack-desc[b-w6elzmm2wm] {
    display: block;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.beef-attack-meta[b-w6elzmm2wm] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
}

.beef-attack-heat[b-w6elzmm2wm] {
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.beef-attack-heat--hot[b-w6elzmm2wm] {
    background: rgba(var(--wl-red-rgb), 0.2);
    color: #EF4444;
}

.beef-attack-heat--neutral[b-w6elzmm2wm] {
    background: rgba(156, 163, 175, 0.15);
    color: #9CA3AF;
}

.beef-attack-skills[b-w6elzmm2wm] {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(var(--wl-gold-rgb), 0.8);
}

.beef-attack-check[b-w6elzmm2wm] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: check-pop-b-w6elzmm2wm 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes check-pop-b-w6elzmm2wm {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.beef-attack-check svg[b-w6elzmm2wm] {
    width: 14px;
    height: 14px;
}

/* ============================================
   WARNING BANNER
   ============================================ */

.beef-warning[b-w6elzmm2wm] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.beef-warning-icon[b-w6elzmm2wm] {
    width: 20px;
    height: 20px;
    color: #F97316;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.beef-warning-icon svg[b-w6elzmm2wm] {
    width: 100%;
    height: 100%;
}

.beef-warning-text[b-w6elzmm2wm] {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0;
}

.beef-warning-text strong[b-w6elzmm2wm] {
    color: #F97316;
    font-weight: 600;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.beef-actions[b-w6elzmm2wm] {
    display: flex;
    gap: 0.75rem;
}

.beef-btn[b-w6elzmm2wm] {
    text-transform: uppercase;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
    border-radius: 14px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.beef-btn svg[b-w6elzmm2wm] {
    width: 18px;
    height: 18px;
}

.beef-btn--ghost[b-w6elzmm2wm] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.beef-btn--ghost:hover:not(:disabled)[b-w6elzmm2wm] {
    background: var(--wl-border-subtle);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: var(--wl-text-primary);
}

.beef-btn--fire[b-w6elzmm2wm] {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(var(--wl-red-rgb), 0.3);
}

.beef-btn--fire:hover:not(:disabled):not(.disabled)[b-w6elzmm2wm] {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(var(--wl-red-rgb), 0.4);
}

.beef-btn--fire.disabled[b-w6elzmm2wm],
.beef-btn--fire:disabled[b-w6elzmm2wm] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.beef-btn-spinner[b-w6elzmm2wm] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--wl-text-muted);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-w6elzmm2wm 0.6s linear infinite;
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animate-fade-in[b-w6elzmm2wm] {
    animation: fade-in-b-w6elzmm2wm 0.5s ease-out both;
}

.delay-100[b-w6elzmm2wm] { animation-delay: 0.1s; }
.delay-200[b-w6elzmm2wm] { animation-delay: 0.2s; }
.delay-300[b-w6elzmm2wm] { animation-delay: 0.3s; }
.delay-400[b-w6elzmm2wm] { animation-delay: 0.4s; }

@keyframes fade-in-b-w6elzmm2wm {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
    .beef-initiate[b-w6elzmm2wm] {
        padding: 1rem;
    }

    .beef-header-title[b-w6elzmm2wm] {
        font-size: 1.5rem;
    }

    .beef-target-inner[b-w6elzmm2wm] {
        padding: 1.5rem 1rem;
    }

    .beef-target-avatar-container[b-w6elzmm2wm] {
        width: 100px;
        height: 100px;
    }

    .beef-attack-content[b-w6elzmm2wm] {
        flex-wrap: wrap;
    }

    .beef-attack-meta[b-w6elzmm2wm] {
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        margin-top: 0.5rem;
        padding-left: 68px;
    }

    .beef-actions[b-w6elzmm2wm] {
        flex-direction: column;
    }
}
/* /Components/Pages/Social/Beef/View.razor.rz.scp.css */
/* ============================================
   BEEF VIEW - AAA+++ Cinematic Battle Arena
   Theme: High-stakes drama, confrontation
   ============================================ */

.beef-view[b-aabyqp89wc] {
    position: relative;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    max-width: 640px;
    margin: 0 auto;
}

/* ============================================
   CINEMATIC ATMOSPHERE
   ============================================ */

.beef-atmosphere[b-aabyqp89wc] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.beef-gradient-orb[b-aabyqp89wc] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: beef-pulse-b-aabyqp89wc 8s ease-in-out infinite;
}

.beef-gradient-orb--red[b-aabyqp89wc] {
    width: 500px;
    height: 500px;
    top: -200px;
    right: -150px;
    background: radial-gradient(circle, rgba(var(--wl-red-rgb), 0.4) 0%, transparent 70%);
    animation-delay: 0s;
}

.beef-gradient-orb--orange[b-aabyqp89wc] {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(249, 115, 22, 0.3) 0%, transparent 70%);
    animation-delay: 4s;
}

@keyframes beef-pulse-b-aabyqp89wc {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

.beef-scanline[b-aabyqp89wc] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
}

.beef-noise[b-aabyqp89wc] {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.5;
}

/* ============================================
   LOADING & ERROR STATES
   ============================================ */

.beef-loading[b-aabyqp89wc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.beef-loading-ring[b-aabyqp89wc] {
    width: 64px;
    height: 64px;
    border: 3px solid rgba(var(--wl-red-rgb), 0.2);
    border-top-color: #EF4444;
    border-radius: 50%;
    animation: spin-b-aabyqp89wc 0.8s linear infinite;
}

@keyframes spin-b-aabyqp89wc {
    to { transform: rotate(360deg); }
}

.beef-loading-text[b-aabyqp89wc] {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(var(--wl-red-rgb), 0.8);
}

.beef-error[b-aabyqp89wc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    gap: 1rem;
}

.beef-error-icon[b-aabyqp89wc] {
    width: 80px;
    height: 80px;
    color: rgba(var(--wl-red-rgb), 0.6);
}

.beef-error-icon svg[b-aabyqp89wc] {
    width: 100%;
    height: 100%;
}

.beef-error-title[b-aabyqp89wc] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0;
}

.beef-error-message[b-aabyqp89wc] {
    color: var(--wl-text-muted);
    margin: 0 0 1rem 0;
    max-width: 300px;
}

/* ============================================
   HEADER
   ============================================ */

.beef-header[b-aabyqp89wc] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.beef-back-btn[b-aabyqp89wc] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.beef-back-btn:hover[b-aabyqp89wc] {
    background: var(--wl-border-subtle);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    color: var(--wl-text-primary);
}

.beef-back-btn svg[b-aabyqp89wc] {
    width: 20px;
    height: 20px;
}

.beef-header-content[b-aabyqp89wc] {
    flex: 1;
}

.beef-header-tag[b-aabyqp89wc] {
    text-transform: uppercase;
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(var(--wl-red-rgb), 0.8);
    margin-bottom: 0.25rem;
}

.beef-header-title[b-aabyqp89wc] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, #EF4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
}

.beef-header-line[b-aabyqp89wc] {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--wl-red-rgb), 0.5) 0%, transparent 100%);
    border-radius: 1px;
}

/* ============================================
   COMBATANTS CARD
   ============================================ */

.beef-combatants[b-aabyqp89wc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 20px;
    margin-bottom: 1.5rem;
}

.beef-combatant[b-aabyqp89wc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.beef-combatant.is-you .beef-combatant-avatar[b-aabyqp89wc] {
    border-color: var(--wl-gold);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.3);
}

.beef-combatant-avatar-wrap[b-aabyqp89wc] {
    position: relative;
    width: 80px;
    height: 80px;
}

.beef-combatant-avatar[b-aabyqp89wc] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--wl-border-medium);
    transition: all 0.3s ease;
}

.beef-turn-indicator[b-aabyqp89wc] {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: pulse-turn-b-aabyqp89wc 2s ease-in-out infinite;
}

@keyframes pulse-turn-b-aabyqp89wc {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.beef-turn-indicator svg[b-aabyqp89wc] {
    width: 14px;
    height: 14px;
}

.beef-winner-crown[b-aabyqp89wc] {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    color: var(--wl-gold);
    filter: drop-shadow(0 2px 8px rgba(var(--wl-gold-rgb), 0.5));
    animation: float-crown-b-aabyqp89wc 3s ease-in-out infinite;
}

@keyframes float-crown-b-aabyqp89wc {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-4px); }
}

.beef-winner-crown svg[b-aabyqp89wc] {
    width: 100%;
    height: 100%;
}

.beef-combatant-name[b-aabyqp89wc] {
    font-size: 0.875rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    text-align: center;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.beef-combatant-you[b-aabyqp89wc] {
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    background: var(--wl-gold-border);
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
}

.beef-vs-divider[b-aabyqp89wc] {
    padding: 0 0.5rem;
}

.beef-vs-badge[b-aabyqp89wc] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    border-radius: 50%;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    color: white;
    box-shadow: 0 4px 20px rgba(var(--wl-red-rgb), 0.4);
}

/* ============================================
   HEAT METER
   ============================================ */

.beef-heat-section[b-aabyqp89wc] {
    padding: 1.25rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 16px;
    margin-bottom: 1.5rem;
}

.beef-heat-header[b-aabyqp89wc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.beef-heat-label[b-aabyqp89wc] {
    text-transform: uppercase;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--wl-text-muted);
}

.beef-heat-value[b-aabyqp89wc] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: #EF4444;
}

.beef-heat-meter[b-aabyqp89wc] {
    display: flex;
    gap: 0.5rem;
    cursor: help;
}

.beef-heat-pip[b-aabyqp89wc] {
    flex: 1;
    height: 40px;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.beef-heat-pip svg[b-aabyqp89wc] {
    width: 20px;
    height: 20px;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.beef-heat-pip.active[b-aabyqp89wc] {
    background: linear-gradient(135deg, rgba(var(--wl-red-rgb), 0.3) 0%, rgba(249, 115, 22, 0.2) 100%);
    border-color: rgba(var(--wl-red-rgb), 0.4);
}

.beef-heat-pip.active svg[b-aabyqp89wc] {
    opacity: 1;
    transform: scale(1);
    color: #EF4444;
}

.beef-heat-pip.danger.active[b-aabyqp89wc] {
    background: linear-gradient(135deg, rgba(var(--wl-red-rgb), 0.5) 0%, rgba(220, 38, 38, 0.4) 100%);
    border-color: rgba(var(--wl-red-rgb), 0.6);
    animation: danger-pulse-b-aabyqp89wc 1.5s ease-in-out infinite;
}

@keyframes danger-pulse-b-aabyqp89wc {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--wl-red-rgb), 0.4); }
    50% { box-shadow: 0 0 20px 0 rgba(var(--wl-red-rgb), 0.6); }
}

.beef-heat-warning[b-aabyqp89wc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 8px;
    font-size: 0.75rem;
    color: #EF4444;
}

.beef-heat-warning svg[b-aabyqp89wc] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================================
   ROUND TIMELINE
   ============================================ */

.beef-timeline[b-aabyqp89wc] {
    margin-bottom: 1.5rem;
}

.beef-section-header[b-aabyqp89wc] {
    margin-bottom: 0.25rem;
}

.beef-section-tag[b-aabyqp89wc] {
    text-transform: uppercase;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.beef-section-title[b-aabyqp89wc] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0 0 1rem 0;
}

.beef-rounds[b-aabyqp89wc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.beef-round[b-aabyqp89wc] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.beef-round.right[b-aabyqp89wc] {
    flex-direction: row-reverse;
}

.beef-round.right .beef-round-content[b-aabyqp89wc] {
    align-items: flex-end;
}

.beef-round.right .beef-round-header[b-aabyqp89wc] {
    flex-direction: row-reverse;
}

.beef-round-avatar[b-aabyqp89wc] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.beef-round-avatar img[b-aabyqp89wc] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--wl-border-medium);
}

.beef-round-content[b-aabyqp89wc] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    min-width: 0;
}

.beef-round-header[b-aabyqp89wc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.beef-round-player[b-aabyqp89wc] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.beef-round-time[b-aabyqp89wc] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.beef-round-action[b-aabyqp89wc] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    width: fit-content;
}

.beef-round-action.fire[b-aabyqp89wc] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: #EF4444;
}

.beef-round-action.cool[b-aabyqp89wc] {
    background: rgba(59, 130, 246, 0.15);
    color: #3B82F6;
}

.beef-round-action.peace[b-aabyqp89wc] {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.beef-round-action.ignore[b-aabyqp89wc] {
    background: rgba(156, 163, 175, 0.15);
    color: #9CA3AF;
}

.beef-round-action.apology[b-aabyqp89wc] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    color: var(--wl-purple);
}

.beef-round-action-icon[b-aabyqp89wc] {
    font-size: 0.875rem;
}

.beef-round-result[b-aabyqp89wc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
}

.beef-round-result svg[b-aabyqp89wc] {
    width: 14px;
    height: 14px;
}

.beef-round-result.success[b-aabyqp89wc] {
    color: #22C55E;
}

.beef-round-result.fail[b-aabyqp89wc] {
    color: #EF4444;
}

.beef-round-heat[b-aabyqp89wc] {
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-weight: 700;
    margin-left: 0.25rem;
}

.beef-round-heat.up[b-aabyqp89wc] {
    background: rgba(var(--wl-red-rgb), 0.2);
    color: #EF4444;
}

.beef-round-heat.down[b-aabyqp89wc] {
    background: rgba(34, 197, 94, 0.2);
    color: #22C55E;
}

/* ============================================
   RESPONSE OPTIONS
   ============================================ */

.beef-response[b-aabyqp89wc] {
    margin-bottom: 1.5rem;
}

.beef-response-grid[b-aabyqp89wc] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.beef-response-card[b-aabyqp89wc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 2px solid var(--wl-border-medium);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.beef-response-card:hover[b-aabyqp89wc] {
    background: var(--wl-border-subtle);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    transform: translateY(-2px);
}

.beef-response-card.selected[b-aabyqp89wc] {
    border-color: rgba(var(--wl-red-rgb), 0.6);
    background: rgba(var(--wl-red-rgb), 0.1);
}

.beef-response-card.surrender[b-aabyqp89wc] {
    grid-column: span 2;
    flex-direction: row;
    justify-content: center;
    padding: 0.875rem 1rem;
    border-color: rgba(var(--wl-purple-rgb), 0.3);
}

.beef-response-card.surrender:hover[b-aabyqp89wc] {
    border-color: rgba(var(--wl-purple-rgb), 0.5);
}

.beef-response-card.surrender.selected[b-aabyqp89wc] {
    border-color: rgba(var(--wl-purple-rgb), 0.6);
    background: rgba(var(--wl-purple-rgb), 0.1);
}

.beef-response-icon[b-aabyqp89wc] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.beef-response-card.surrender .beef-response-icon[b-aabyqp89wc] {
    width: 32px;
    height: 32px;
}

.beef-response-icon svg[b-aabyqp89wc] {
    width: 24px;
    height: 24px;
}

.beef-response-card.surrender .beef-response-icon svg[b-aabyqp89wc] {
    width: 20px;
    height: 20px;
}

.beef-response-icon.fire[b-aabyqp89wc] {
    background: rgba(var(--wl-red-rgb), 0.2);
    color: #EF4444;
}

.beef-response-icon.cool[b-aabyqp89wc] {
    background: rgba(59, 130, 246, 0.2);
    color: #3B82F6;
}

.beef-response-icon.peace[b-aabyqp89wc] {
    background: rgba(34, 197, 94, 0.2);
    color: #22C55E;
}

.beef-response-icon.ignore[b-aabyqp89wc] {
    background: rgba(156, 163, 175, 0.15);
    color: #9CA3AF;
}

.beef-response-icon.apology[b-aabyqp89wc] {
    background: rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

.beef-response-name[b-aabyqp89wc] {
    text-transform: uppercase;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.beef-response-heat[b-aabyqp89wc] {
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
}

.beef-response-heat.heat-up[b-aabyqp89wc] {
    background: rgba(var(--wl-red-rgb), 0.2);
    color: #EF4444;
}

.beef-response-heat.heat-neutral[b-aabyqp89wc] {
    background: rgba(156, 163, 175, 0.15);
    color: #9CA3AF;
}

.beef-response-heat.heat-down[b-aabyqp89wc] {
    background: rgba(34, 197, 94, 0.2);
    color: #22C55E;
}

.beef-response-heat.heat-end[b-aabyqp89wc] {
    background: rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

/* ============================================
   SUCCESS CHANCE BADGES
   ============================================ */

.beef-response-chance[b-aabyqp89wc] {
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.beef-response-chance.chance-high[b-aabyqp89wc] {
    background: rgba(34, 197, 94, 0.2);
    color: #22C55E;
}

.beef-response-chance.chance-medium[b-aabyqp89wc] {
    background: rgba(234, 179, 8, 0.2);
    color: #EAB308;
}

.beef-response-chance.chance-low[b-aabyqp89wc] {
    background: rgba(var(--wl-red-rgb), 0.2);
    color: #EF4444;
}

.beef-response-chance.chance-guaranteed[b-aabyqp89wc] {
    background: rgba(59, 130, 246, 0.2);
    color: #3B82F6;
}

/* ============================================
   WAITING STATE
   ============================================ */

.beef-waiting[b-aabyqp89wc] {
    margin-bottom: 1.5rem;
}

.beef-waiting-content[b-aabyqp89wc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 16px;
}

.beef-waiting-icon[b-aabyqp89wc] {
    width: 64px;
    height: 64px;
    color: rgba(34, 197, 94, 0.6);
    margin-bottom: 1rem;
    animation: pulse-wait-b-aabyqp89wc 2s ease-in-out infinite;
}

@keyframes pulse-wait-b-aabyqp89wc {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.beef-waiting-icon svg[b-aabyqp89wc] {
    width: 100%;
    height: 100%;
}

.beef-waiting-title[b-aabyqp89wc] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0 0 0.5rem 0;
}

.beef-waiting-text[b-aabyqp89wc] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0;
}

/* ============================================
   ENDED STATE
   ============================================ */

.beef-ended[b-aabyqp89wc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.beef-ended-content[b-aabyqp89wc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 2rem;
    border-radius: 20px;
    width: 100%;
}

.beef-ended-content.victory[b-aabyqp89wc] {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(234, 179, 8, 0.1) 100%);
    border: 2px solid rgba(var(--wl-gold-rgb), 0.3);
}

.beef-ended-content.draw[b-aabyqp89wc] {
    background: rgba(156, 163, 175, 0.1);
    border: 2px solid rgba(156, 163, 175, 0.2);
}

.beef-ended-content.defeat[b-aabyqp89wc] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 2px solid rgba(var(--wl-red-rgb), 0.2);
}

.beef-ended-icon[b-aabyqp89wc] {
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
}

.beef-ended-icon svg[b-aabyqp89wc] {
    width: 100%;
    height: 100%;
}

.beef-ended-icon.victory[b-aabyqp89wc] {
    color: var(--wl-gold);
    filter: drop-shadow(0 4px 20px rgba(var(--wl-gold-rgb), 0.4));
    animation: float-crown-b-aabyqp89wc 3s ease-in-out infinite;
}

.beef-ended-icon.draw[b-aabyqp89wc] {
    color: #9CA3AF;
}

.beef-ended-icon.defeat[b-aabyqp89wc] {
    color: #EF4444;
}

.beef-ended-title[b-aabyqp89wc] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.1em;
    margin: 0 0 0.5rem 0;
}

.beef-ended-content.victory .beef-ended-title[b-aabyqp89wc] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, #F59E0B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.beef-ended-content.draw .beef-ended-title[b-aabyqp89wc] {
    color: #9CA3AF;
}

.beef-ended-content.defeat .beef-ended-title[b-aabyqp89wc] {
    color: #EF4444;
}

.beef-ended-text[b-aabyqp89wc] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0;
    max-width: 280px;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.beef-actions[b-aabyqp89wc] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Response Costs Display */
.beef-costs[b-aabyqp89wc] {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 0.625rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
}

.beef-cost[b-aabyqp89wc] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.beef-cost.insufficient[b-aabyqp89wc] {
    color: #EF4444;
}

.beef-cost.cooldown[b-aabyqp89wc] {
    color: var(--wl-text-muted);
}

.beef-cost-icon[b-aabyqp89wc] {
    width: 14px;
    height: 14px;
    opacity: 0.8;
}

/* Free Action Label */
.beef-free-action[b-aabyqp89wc] {
    display: flex;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: rgba(var(--wl-purple-rgb), 0.1);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-purple);
}

/* Blocked Reason Display */
.beef-blocked-reason[b-aabyqp89wc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #EF4444;
}

.beef-blocked-icon[b-aabyqp89wc] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.beef-btn[b-aabyqp89wc] {
    text-transform: uppercase;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
    border-radius: 14px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.beef-btn svg[b-aabyqp89wc] {
    width: 18px;
    height: 18px;
}

.beef-btn--ghost[b-aabyqp89wc] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.beef-btn--ghost:hover:not(:disabled)[b-aabyqp89wc] {
    background: var(--wl-border-subtle);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: var(--wl-text-primary);
}

.beef-btn--fire[b-aabyqp89wc] {
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(var(--wl-red-rgb), 0.3);
}

.beef-btn--fire:hover:not(:disabled):not(.disabled)[b-aabyqp89wc] {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(var(--wl-red-rgb), 0.4);
}

.beef-btn--fire.disabled[b-aabyqp89wc],
.beef-btn--fire:disabled[b-aabyqp89wc] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.beef-btn-spinner[b-aabyqp89wc] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--wl-text-muted);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-aabyqp89wc 0.6s linear infinite;
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animate-fade-in[b-aabyqp89wc] {
    animation: fade-in-b-aabyqp89wc 0.5s ease-out both;
}

.delay-100[b-aabyqp89wc] { animation-delay: 0.1s; }
.delay-200[b-aabyqp89wc] { animation-delay: 0.2s; }
.delay-300[b-aabyqp89wc] { animation-delay: 0.3s; }
.delay-400[b-aabyqp89wc] { animation-delay: 0.4s; }

@keyframes fade-in-b-aabyqp89wc {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

.beef-buzz-inline[b-aabyqp89wc] {
    margin: 0.75rem 0 0.75rem 2.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(var(--wl-gold-rgb), 0.3);
    opacity: 0.9;
}

@media (max-width: 480px) {
    .beef-view[b-aabyqp89wc] {
        padding: 1rem;
    }

    .beef-header-title[b-aabyqp89wc] {
        font-size: 1.5rem;
    }

    .beef-combatants[b-aabyqp89wc] {
        padding: 1rem;
    }

    .beef-combatant-avatar-wrap[b-aabyqp89wc] {
        width: 64px;
        height: 64px;
    }

    .beef-vs-badge[b-aabyqp89wc] {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .beef-response-grid[b-aabyqp89wc] {
        grid-template-columns: repeat(2, 1fr);
    }

    .beef-response-card.surrender[b-aabyqp89wc] {
        grid-column: span 2;
    }

    .beef-response-card:nth-child(5)[b-aabyqp89wc] {
        grid-column: span 2;
    }
}
/* /Components/Pages/Social/Board/ArtifactCommentCard.razor.rz.scp.css */
.artifact-comment-card[b-fktpkf0u7n] {
    display: grid;
    gap: 0.75rem;
}

.artifact-comment-content[b-fktpkf0u7n] {
    color: var(--color-text-primary, #f4f1ea);
    line-height: 1.55;
    white-space: pre-wrap;
}

.artifact-comment-context[b-fktpkf0u7n] {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    text-decoration: none;
}

.artifact-comment-context:hover[b-fktpkf0u7n] {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.07);
}

.artifact-comment-context[b-fktpkf0u7n]  .artifact-comment-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.08);
}

.artifact-comment-context-copy[b-fktpkf0u7n] {
    display: grid;
    min-width: 0;
    gap: 0.15rem;
}

.artifact-comment-context-copy span[b-fktpkf0u7n] {
    color: var(--color-text-secondary, #b9b2a5);
    font-size: 0.78rem;
}

.artifact-comment-context-copy strong[b-fktpkf0u7n] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Social/Board/AvatarShowcaseCard.razor.rz.scp.css */
/* ============================================
   AVATAR SHOWCASE CARD
   Premium integration card for AI avatar images
   ============================================ */

.showcase-card[b-gjfzieuklp] {
    position: relative;
    background: linear-gradient(135deg,
        rgba(var(--wl-pink-rgb), 0.05) 0%,
        rgba(var(--wl-purple-rgb), 0.03) 50%,
        rgba(var(--wl-pink-rgb), 0.02) 100%);
    border: 1px solid rgba(var(--wl-pink-rgb), 0.15);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 0.5rem;
    animation: showcaseCardIn-b-gjfzieuklp 0.6s ease forwards;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes showcaseCardIn-b-gjfzieuklp {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.showcase-card:hover[b-gjfzieuklp] {
    border-color: rgba(var(--wl-pink-rgb), 0.3);
    box-shadow:
        0 8px 32px rgba(var(--wl-pink-rgb), 0.08),
        0 0 60px rgba(var(--wl-purple-rgb), 0.04);
}

/* Badge */
.showcase-badge[b-gjfzieuklp] {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    background: rgba(var(--wl-pink-rgb), 0.2);
    border: 1px solid rgba(var(--wl-pink-rgb), 0.35);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #F472B6;
    z-index: 3;
    backdrop-filter: blur(12px);
}

.showcase-badge svg[b-gjfzieuklp] {
    width: 12px;
    height: 12px;
}

/* Image */
.showcase-image-wrapper[b-gjfzieuklp] {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.showcase-image-wrapper[b-gjfzieuklp]  .showcase-image {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

.showcase-card:hover .showcase-image-wrapper[b-gjfzieuklp]  .showcase-image {
    transform: scale(1.02);
}

.showcase-image-overlay[b-gjfzieuklp] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: linear-gradient(to top,
        rgba(var(--wl-bg-dark-rgb), 0.85) 0%,
        rgba(var(--wl-bg-dark-rgb), 0.3) 50%,
        transparent 100%);
    pointer-events: none;
}

.showcase-image--placeholder[b-gjfzieuklp] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    background: linear-gradient(135deg,
        rgba(var(--wl-pink-rgb), 0.08) 0%,
        rgba(var(--wl-purple-rgb), 0.05) 50%,
        rgba(var(--wl-pink-rgb), 0.03) 100%);
}

.showcase-image--placeholder svg[b-gjfzieuklp] {
    width: 56px;
    height: 56px;
    color: rgba(var(--wl-pink-rgb), 0.3);
}

/* Metadata */
.showcase-meta[b-gjfzieuklp] {
    padding: 1rem 1.25rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.showcase-announcement[b-gjfzieuklp] {
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    margin: 0;
    line-height: 1.4;
}

/* Tags */
.showcase-tags[b-gjfzieuklp] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.showcase-tag[b-gjfzieuklp] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.625rem;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: all 0.2s ease;
}

.showcase-tag svg[b-gjfzieuklp] {
    width: 13px;
    height: 13px;
    opacity: 0.8;
}

.showcase-tag--pose[b-gjfzieuklp] {
    background: rgba(var(--wl-pink-rgb), 0.1);
    border: 1px solid rgba(var(--wl-pink-rgb), 0.2);
    color: #F472B6;
}

.showcase-tag--time[b-gjfzieuklp] {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    color: #FBBF24;
}

.showcase-tag--location[b-gjfzieuklp] {
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.2);
    color: #60A5FA;
}

.showcase-tag--city[b-gjfzieuklp] {
    background: rgba(var(--wl-purple-rgb), 0.1);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

/* Responsive */
@media (max-width: 640px) {
    .showcase-meta[b-gjfzieuklp] {
        padding: 0.875rem 1rem;
    }

    .showcase-tags[b-gjfzieuklp] {
        gap: 0.375rem;
    }

    .showcase-tag[b-gjfzieuklp] {
        font-size: 0.625rem;
        padding: 0.25rem 0.5rem;
    }

    .showcase-badge[b-gjfzieuklp] {
        top: 8px;
        right: 8px;
        font-size: 0.5rem;
        padding: 0.15rem 0.4rem;
    }
}
/* /Components/Pages/Social/Board/AvatarShowcaseWizard.razor.rz.scp.css */
/* ============================================
   AVATAR SHOWCASE WIZARD
   Multi-step modal for AI avatar generation
   Dark luxury theme with gold accents
   ============================================ */

/* Overlay */
.wizard-overlay[b-7ldp7i4eu2] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(6px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px 20px;
    animation: wizardOverlayIn-b-7ldp7i4eu2 0.2s ease-out;
    overflow-y: auto;
}

@keyframes wizardOverlayIn-b-7ldp7i4eu2 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Modal Container */
.wizard-modal[b-7ldp7i4eu2] {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 100px);
    overflow: hidden;
    background: linear-gradient(135deg,
        rgba(var(--wl-bg-modal-rgb), 0.98) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%);
    border: 1px solid var(--wl-gold-border);
    animation: wizardSlideUp-b-7ldp7i4eu2 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-shadow:
        0 0 0 1px var(--wl-shadow-color),
        0 30px 100px var(--wl-shadow-color),
        0 0 120px rgba(var(--wl-gold-rgb), 0.05);
    display: flex;
    flex-direction: column;
}

@keyframes wizardSlideUp-b-7ldp7i4eu2 {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Decorative Corners */
.wizard-corner[b-7ldp7i4eu2] {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    border-style: solid;
    pointer-events: none;
    z-index: 2;
}

.wizard-corner-tl[b-7ldp7i4eu2] { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.wizard-corner-tr[b-7ldp7i4eu2] { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.wizard-corner-bl[b-7ldp7i4eu2] { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.wizard-corner-br[b-7ldp7i4eu2] { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

/* Edge Accents */
.wizard-edge[b-7ldp7i4eu2] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 20%,
        rgba(var(--wl-gold-rgb), 0.6) 50%,
        rgba(var(--wl-gold-rgb), 0.4) 80%,
        transparent 100%);
    pointer-events: none;
    z-index: 2;
}

.wizard-edge-top[b-7ldp7i4eu2] { top: 0; }
.wizard-edge-bottom[b-7ldp7i4eu2] { bottom: 0; }

/* Close Button */
.wizard-close[b-7ldp7i4eu2] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    color: rgba(163, 163, 163, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-close:hover[b-7ldp7i4eu2] {
    background: var(--wl-gold-bg);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.wizard-close svg[b-7ldp7i4eu2] {
    width: 100%;
    height: 100%;
}

/* Header */
.wizard-header[b-7ldp7i4eu2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 28px 48px 16px;
    flex-shrink: 0;
}

.wizard-title[b-7ldp7i4eu2] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-gold);
    margin: 0;
    text-shadow: 0 0 30px rgba(var(--wl-gold-rgb), 0.4);
    white-space: nowrap;
}

.wizard-title-decoration[b-7ldp7i4eu2] {
    flex: 1;
    max-width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.4));
}

.wizard-title-decoration:last-child[b-7ldp7i4eu2] {
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.4), transparent);
}

/* Progress Indicator */
.wizard-progress[b-7ldp7i4eu2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0 32px 20px;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.12);
    flex-shrink: 0;
}

.wizard-progress-step[b-7ldp7i4eu2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    min-width: 64px;
}

.wizard-progress-dot[b-7ldp7i4eu2] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.12);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--wl-text-muted);
    transition: all 0.3s ease;
}

.wizard-progress-step--active .wizard-progress-dot[b-7ldp7i4eu2] {
    background: var(--wl-gold-bg-hover);
    border-color: var(--wl-gold);
    color: var(--wl-gold);
    box-shadow: 0 0 16px rgba(var(--wl-gold-rgb), 0.25);
}

.wizard-progress-step--done .wizard-progress-dot[b-7ldp7i4eu2] {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.5);
    color: #22C55E;
}

.wizard-progress-dot svg[b-7ldp7i4eu2] {
    width: 14px;
    height: 14px;
}

.wizard-progress-label[b-7ldp7i4eu2] {
    font-size: 0.5625rem;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(var(--wl-contrast-rgb), 0.25);
    transition: color 0.3s ease;
}

.wizard-progress-step--active .wizard-progress-label[b-7ldp7i4eu2] {
    color: var(--wl-gold);
}

.wizard-progress-step--done .wizard-progress-label[b-7ldp7i4eu2] {
    color: rgba(34, 197, 94, 0.6);
}

.wizard-progress-line[b-7ldp7i4eu2] {
    width: 40px;
    height: 2px;
    background: var(--wl-border-medium);
    margin: 0 0.25rem;
    margin-bottom: 1.25rem;
    border-radius: 1px;
    transition: background 0.3s ease;
}

.wizard-progress-line--done[b-7ldp7i4eu2] {
    background: rgba(34, 197, 94, 0.35);
}

/* Insufficient AP Banner */
.wizard-insufficient-banner[b-7ldp7i4eu2] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 12px 24px 0;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-red-rgb), 0.06);
    border: 1px solid rgba(var(--wl-red-rgb), 0.18);
    border-radius: 8px;
    color: rgba(var(--wl-red-rgb), 0.9);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.wizard-insufficient-banner svg[b-7ldp7i4eu2] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.8;
}

/* Content Area */
.wizard-content[b-7ldp7i4eu2] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 24px;
}

.wizard-step-content[b-7ldp7i4eu2] {
    animation: wizardStepIn-b-7ldp7i4eu2 0.3s ease forwards;
}

@keyframes wizardStepIn-b-7ldp7i4eu2 {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.wizard-step-desc[b-7ldp7i4eu2] {
    color: rgba(var(--wl-contrast-rgb), 0.55);
    font-size: 0.875rem;
    margin: 0 0 1.25rem;
    text-align: center;
    line-height: 1.5;
}
.wizard-step-desc--spaced[b-7ldp7i4eu2] { margin-top: 1.25rem; }

/* Chooser card subtitle (AI vs free). */
.wizard-card-sub[b-7ldp7i4eu2] {
    font-size: 0.72rem;
    line-height: 1.35;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    text-align: center;
}

/* Free showcase: framing toggle (full body / portrait). */
.wizard-framing-toggle[b-7ldp7i4eu2] {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.wizard-framing-opt[b-7ldp7i4eu2] {
    flex: 1;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--wl-border-subtle);
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-size: 0.85rem; font-family: inherit;
    cursor: pointer;
}
.wizard-framing-opt:hover[b-7ldp7i4eu2] { border-color: rgba(var(--wl-gold-rgb), 0.4); }
.wizard-framing-opt--active[b-7ldp7i4eu2] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: rgba(var(--wl-contrast-rgb), 0.95);
    font-weight: 600;
}

/* Free showcase: optional caption. */
.wizard-caption-input[b-7ldp7i4eu2] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--wl-border-medium);
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-family: inherit; font-size: 0.875rem;
}
.wizard-caption-input:focus[b-7ldp7i4eu2] { outline: none; border-color: rgba(var(--wl-gold-rgb), 0.45); }

.wizard-error[b-7ldp7i4eu2] {
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(var(--wl-red-rgb), 0.4);
    background: rgba(var(--wl-red-rgb), 0.08);
    color: var(--wl-red);
    font-size: 0.85rem;
}

/* Selection Cards (2x2 grid) */
.wizard-cards[b-7ldp7i4eu2] {
    display: grid;
    gap: 0.75rem;
}

.wizard-cards--2x2[b-7ldp7i4eu2] {
    grid-template-columns: 1fr 1fr;
}

.wizard-card[b-7ldp7i4eu2] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1.375rem 1rem;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    color: inherit;
}

.wizard-card:hover[b-7ldp7i4eu2] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
    transform: translateY(-2px);
}

.wizard-card--selected[b-7ldp7i4eu2] {
    background: linear-gradient(135deg,
        var(--wl-gold-bg) 0%,
        rgba(var(--wl-gold-rgb), 0.03) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.45);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.08);
}

.wizard-card--selected:hover[b-7ldp7i4eu2] {
    background: linear-gradient(135deg,
        var(--wl-gold-bg-hover) 0%,
        rgba(var(--wl-gold-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.6);
}

.wizard-card-icon[b-7ldp7i4eu2] {
    width: 36px;
    height: 36px;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    transition: color 0.25s ease;
}

.wizard-card-icon svg[b-7ldp7i4eu2] {
    width: 100%;
    height: 100%;
}

.wizard-card--selected .wizard-card-icon[b-7ldp7i4eu2] {
    color: var(--wl-gold);
}

.wizard-card-label[b-7ldp7i4eu2] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.75);
    transition: color 0.25s ease;
}

.wizard-card--selected .wizard-card-label[b-7ldp7i4eu2] {
    color: var(--wl-gold);
}

/* Check indicator */
.wizard-card-check[b-7ldp7i4eu2] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--wl-gold-bg-hover);
    border: 1.5px solid rgba(var(--wl-gold-rgb), 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.25s ease;
}

.wizard-card--selected .wizard-card-check[b-7ldp7i4eu2] {
    opacity: 1;
    transform: scale(1);
}

.wizard-card-check svg[b-7ldp7i4eu2] {
    width: 12px;
    height: 12px;
    color: var(--wl-gold);
}

/* Time of day card backgrounds */
.wizard-card--time[b-7ldp7i4eu2] {
    border-color: rgba(var(--wl-contrast-rgb), 0.04);
}

.wizard-card--time:hover[b-7ldp7i4eu2] {
    border-color: var(--wl-border-medium);
}

.wizard-card--time.wizard-card--selected[b-7ldp7i4eu2] {
    border-color: rgba(var(--wl-gold-rgb), 0.45);
}

/* Location Step */
.wizard-location-options[b-7ldp7i4eu2] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wizard-location-option[b-7ldp7i4eu2] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    color: inherit;
    width: 100%;
    text-align: left;
}

.wizard-location-option:hover[b-7ldp7i4eu2] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: var(--wl-border-medium);
}

.wizard-location-option--selected[b-7ldp7i4eu2] {
    background: linear-gradient(135deg,
        var(--wl-gold-bg) 0%,
        rgba(var(--wl-gold-rgb), 0.03) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.wizard-location-option--selected:hover[b-7ldp7i4eu2] {
    background: linear-gradient(135deg,
        var(--wl-gold-bg-hover) 0%,
        rgba(var(--wl-gold-rgb), 0.05) 100%);
}

/* Radio */
.wizard-location-radio[b-7ldp7i4eu2] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.wizard-location-option--selected .wizard-location-radio[b-7ldp7i4eu2] {
    border-color: var(--wl-gold);
}

.wizard-location-radio-checked[b-7ldp7i4eu2] {
    width: 10px;
    height: 10px;
    background: var(--wl-gold);
    border-radius: 50%;
    animation: radioScale-b-7ldp7i4eu2 0.2s ease-out;
}

@keyframes radioScale-b-7ldp7i4eu2 {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* Location Icon */
.wizard-location-icon[b-7ldp7i4eu2] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.wizard-location-icon--auto[b-7ldp7i4eu2] {
    background: linear-gradient(135deg,
        rgba(96, 165, 250, 0.2) 0%,
        rgba(96, 165, 250, 0.08) 100%);
    color: #60A5FA;
}

.wizard-location-icon svg[b-7ldp7i4eu2] {
    width: 20px;
    height: 20px;
}

/* Location Info */
.wizard-location-info[b-7ldp7i4eu2] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.wizard-location-title[b-7ldp7i4eu2] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.wizard-location-option--selected .wizard-location-title[b-7ldp7i4eu2] {
    color: var(--wl-gold);
}

.wizard-location-subtitle[b-7ldp7i4eu2] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

/* Divider */
.wizard-location-divider[b-7ldp7i4eu2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.25rem 0;
}

.wizard-location-divider[b-7ldp7i4eu2]::before,
.wizard-location-divider[b-7ldp7i4eu2]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--wl-border-medium), transparent);
}

.wizard-location-divider span[b-7ldp7i4eu2] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-family: 'JetBrains Mono', monospace;
}

/* Location Grid */
.wizard-location-grid[b-7ldp7i4eu2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}

.wizard-location-grid--3col[b-7ldp7i4eu2] {
    grid-template-columns: 1fr 1fr 1fr;
}

.wizard-location-chip[b-7ldp7i4eu2] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.025);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.65);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.wizard-location-chip:hover[b-7ldp7i4eu2] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
    color: rgba(var(--wl-contrast-rgb), 0.85);
}

.wizard-location-chip--selected[b-7ldp7i4eu2] {
    background: linear-gradient(135deg,
        var(--wl-gold-bg) 0%,
        rgba(var(--wl-gold-rgb), 0.03) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

.wizard-location-chip--selected:hover[b-7ldp7i4eu2] {
    background: linear-gradient(135deg,
        var(--wl-gold-bg-hover) 0%,
        rgba(var(--wl-gold-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.55);
}

.wizard-location-chip-icon[b-7ldp7i4eu2] {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wizard-location-chip-icon svg[b-7ldp7i4eu2] {
    width: 100%;
    height: 100%;
}

/* Preview Step */
.wizard-preview[b-7ldp7i4eu2] {
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
}

.wizard-preview-row[b-7ldp7i4eu2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0;
}

.wizard-preview-row + .wizard-preview-row[b-7ldp7i4eu2] {
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.wizard-preview-label[b-7ldp7i4eu2] {
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.03em;
}

.wizard-preview-value[b-7ldp7i4eu2] {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.wizard-preview-divider[b-7ldp7i4eu2] {
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        var(--wl-gold-border),
        transparent);
    margin: 0.875rem 0;
}

.wizard-checkbox-option[b-7ldp7i4eu2] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
    padding: 0.625rem 0;
    color: rgba(var(--wl-contrast-rgb), 0.82);
    font-size: 0.8125rem;
    line-height: 1.4;
    cursor: pointer;
}

.wizard-checkbox-option + .wizard-checkbox-option[b-7ldp7i4eu2] {
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.wizard-checkbox-option input[b-7ldp7i4eu2] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    accent-color: var(--wl-gold);
    cursor: pointer;
}

.wizard-preview-notice[b-7ldp7i4eu2] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0 0.25rem;
    color: rgba(var(--wl-gold-rgb), 0.7);
    font-size: 0.75rem;
    line-height: 1.5;
}

.wizard-preview-notice svg[b-7ldp7i4eu2] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.6;
}

/* Generating State */
.wizard-generating[b-7ldp7i4eu2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 3rem 1rem;
    text-align: center;
}

.wizard-generating-spinner[b-7ldp7i4eu2] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--wl-gold-bg-hover);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: wizardSpin-b-7ldp7i4eu2 0.8s linear infinite;
}

.wizard-generating-title[b-7ldp7i4eu2] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 0.06em;
    color: var(--wl-gold);
    margin: 0;
}

.wizard-generating-desc[b-7ldp7i4eu2] {
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
    line-height: 1.6;
    margin: 0;
    max-width: 320px;
}

/* Cost Row */
.wizard-cost-row[b-7ldp7i4eu2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
}

.wizard-cost-info[b-7ldp7i4eu2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.55);
    font-size: 0.8125rem;
}

.wizard-cost-info svg[b-7ldp7i4eu2] {
    width: 18px;
    height: 18px;
    color: var(--wl-gold);
    opacity: 0.7;
}

.wizard-cost-value[b-7ldp7i4eu2] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.wizard-cost-balance-label[b-7ldp7i4eu2] {
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.wizard-cost-balance[b-7ldp7i4eu2] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.wizard-cost-balance--insufficient[b-7ldp7i4eu2] {
    color: #EF4444;
}

/* Insufficient Notice */
.wizard-insufficient-notice[b-7ldp7i4eu2] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem;
    margin-top: 0.75rem;
    background: rgba(var(--wl-red-rgb), 0.06);
    border: 1px solid rgba(var(--wl-red-rgb), 0.15);
    border-radius: 8px;
    color: rgba(var(--wl-red-rgb), 0.85);
    font-size: 0.75rem;
    line-height: 1.5;
}

.wizard-insufficient-notice svg[b-7ldp7i4eu2] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    opacity: 0.7;
}

/* Footer */
.wizard-footer[b-7ldp7i4eu2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 24px 24px;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    flex-shrink: 0;
}

/* Buttons */
.wizard-btn[b-7ldp7i4eu2] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 10px 24px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.wizard-btn svg[b-7ldp7i4eu2] {
    width: 16px;
    height: 16px;
}

.wizard-btn--secondary[b-7ldp7i4eu2] {
    background: transparent;
    border-color: var(--wl-border-medium);
    color: rgba(163, 163, 163, 0.8);
}

.wizard-btn--secondary:hover:not(:disabled)[b-7ldp7i4eu2] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.wizard-btn--primary[b-7ldp7i4eu2] {
    background: linear-gradient(135deg,
        var(--wl-gold-bg-hover) 0%,
        rgba(var(--wl-gold-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

.wizard-btn--primary:hover:not(:disabled)[b-7ldp7i4eu2] {
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.25) 0%,
        var(--wl-gold-bg) 100%);
    border-color: var(--wl-gold);
    box-shadow: 0 0 20px var(--wl-gold-bg-hover);
}

.wizard-btn--primary:disabled[b-7ldp7i4eu2] {
    opacity: 0.35;
    cursor: not-allowed;
}

.wizard-btn--generate[b-7ldp7i4eu2] {
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    color: var(--wl-bg-primary);
    font-weight: 600;
    padding: 12px 28px;
}

.wizard-btn--generate:hover:not(:disabled)[b-7ldp7i4eu2] {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(var(--wl-gold-rgb), 0.35);
}

.wizard-btn--generate:disabled[b-7ldp7i4eu2] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Spinner */
.wizard-spinner[b-7ldp7i4eu2] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(var(--wl-bg-dark-rgb), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: wizardSpin-b-7ldp7i4eu2 0.8s linear infinite;
}

@keyframes wizardSpin-b-7ldp7i4eu2 {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 640px) {
    .wizard-overlay[b-7ldp7i4eu2] {
        padding: 70px 12px 12px;
    }

    .wizard-modal[b-7ldp7i4eu2] {
        max-height: calc(100vh - 50px);
    }

    .wizard-header[b-7ldp7i4eu2] {
        padding: 20px 24px 12px;
    }

    .wizard-title[b-7ldp7i4eu2] {
        font-size: 22px;
    }

    .wizard-progress[b-7ldp7i4eu2] {
        padding: 0 16px 16px;
    }

    .wizard-progress-step[b-7ldp7i4eu2] {
        min-width: 48px;
    }

    .wizard-progress-line[b-7ldp7i4eu2] {
        width: 24px;
    }

    .wizard-progress-dot[b-7ldp7i4eu2] {
        width: 24px;
        height: 24px;
        font-size: 0.6rem;
    }

    .wizard-progress-label[b-7ldp7i4eu2] {
        font-size: 0.5rem;
    }

    .wizard-content[b-7ldp7i4eu2] {
        padding: 16px;
    }

    .wizard-cards--2x2[b-7ldp7i4eu2] {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .wizard-card[b-7ldp7i4eu2] {
        padding: 1rem 0.75rem;
    }

    .wizard-card-icon[b-7ldp7i4eu2] {
        width: 28px;
        height: 28px;
    }

    .wizard-card-label[b-7ldp7i4eu2] {
        font-size: 0.75rem;
    }

    .wizard-location-grid[b-7ldp7i4eu2] {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .wizard-location-grid--3col[b-7ldp7i4eu2] {
        grid-template-columns: 1fr 1fr;
    }

    .wizard-footer[b-7ldp7i4eu2] {
        padding: 12px 16px 16px;
    }

    .wizard-btn[b-7ldp7i4eu2] {
        padding: 8px 16px;
        font-size: 12px;
    }

    .wizard-btn--generate[b-7ldp7i4eu2] {
        padding: 10px 20px;
    }
}
/* /Components/Pages/Social/Board/CommentPreviewList.razor.rz.scp.css */
.comment-preview-list[b-6775ko4svj] {
    border-top: 1px solid var(--wl-border-subtle);
    margin-top: 0.75rem;
    padding-top: 0.5rem;
}

.comment-preview[b-6775ko4svj] {
    display: flex;
    gap: 0.625rem;
    padding: 0.4rem 0;
}

.comment-preview-avatar-link[b-6775ko4svj] {
    flex: 0 0 auto;
}

.comment-preview-avatar[b-6775ko4svj] {
    width: 28px;
    height: 28px;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 50%;
    object-fit: cover;
}

.comment-preview-body[b-6775ko4svj] {
    min-width: 0;
}

.comment-preview-header[b-6775ko4svj] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

.comment-preview-author[b-6775ko4svj] {
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.comment-preview-author:hover[b-6775ko4svj] {
    color: var(--wl-gold);
    text-decoration: underline;
}

.comment-preview-time[b-6775ko4svj] {
    color: rgba(var(--wl-contrast-rgb), 0.35);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
}

.comment-preview-edited[b-6775ko4svj] {
    color: var(--wl-text-muted);
    font-size: 0.6875rem;
    font-style: italic;
}

.comment-preview-content[b-6775ko4svj] {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    font-size: 0.8125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
/* /Components/Pages/Social/Board/CommentThread.razor.rz.scp.css */
/* ==========================================
   COMMENT THREAD - Social Board
   ========================================== */

.comment-thread[b-nk83o6ghxs] {
    border-top: 1px solid var(--wl-border-subtle);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
}

/* --- Loading --- */
.comment-loading[b-nk83o6ghxs] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.comment-loading-spinner[b-nk83o6ghxs] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: commentSpin-b-nk83o6ghxs 0.8s linear infinite;
}

.comment-loading-spinner--small[b-nk83o6ghxs] {
    width: 16px;
    height: 16px;
}

@keyframes commentSpin-b-nk83o6ghxs {
    to { transform: rotate(360deg); }
}

/* --- Single Comment --- */
.comment[b-nk83o6ghxs] {
    display: flex;
    gap: 0.625rem;
    padding: 0.5rem 0;
    animation: commentFadeIn-b-nk83o6ghxs 0.3s ease forwards;
}

@keyframes commentFadeIn-b-nk83o6ghxs {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comment--deleted[b-nk83o6ghxs] {
    opacity: 0.5;
}

.comment-avatar[b-nk83o6ghxs] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--wl-border-subtle);
}

.comment-body[b-nk83o6ghxs] {
    flex: 1;
    min-width: 0;
}

.comment-header[b-nk83o6ghxs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
    flex-wrap: wrap;
}

.comment-author[b-nk83o6ghxs] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.comment-author-link[b-nk83o6ghxs] {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.comment-author-link:hover[b-nk83o6ghxs] {
    color: var(--wl-gold);
    text-decoration: underline;
}

.comment-time[b-nk83o6ghxs] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

.comment-edited[b-nk83o6ghxs] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

.comment-actions[b-nk83o6ghxs] {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.comment:hover .comment-actions[b-nk83o6ghxs] {
    opacity: 1;
}

.comment-action-btn[b-nk83o6ghxs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.comment-action-btn:hover[b-nk83o6ghxs] {
    background: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.comment-action-btn--danger:hover[b-nk83o6ghxs] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: #ef4444;
}

.comment-action-btn svg[b-nk83o6ghxs] {
    width: 14px;
    height: 14px;
}

.comment-content[b-nk83o6ghxs] {
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    line-height: 1.5;
    word-break: break-word;
}

.comment-content[b-nk83o6ghxs]  a {
    color: var(--wl-gold);
    text-decoration: none;
}

.comment-content[b-nk83o6ghxs]  a:hover {
    text-decoration: underline;
}

.comment-content[b-nk83o6ghxs]  .board-tag {
    color: var(--wl-purple);
    font-weight: 500;
}

.comment-content[b-nk83o6ghxs]  .board-mention {
    color: #38BDF8;
    font-weight: 600;
    text-decoration: none;
    background: rgba(56, 189, 248, 0.1);
    padding: 0.05em 0.3em;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.comment-content[b-nk83o6ghxs]  a.board-mention:hover {
    color: #7DD3FC;
    background: rgba(56, 189, 248, 0.2);
    text-decoration: none;
}

.comment-footer[b-nk83o6ghxs] {
    margin-top: 0.25rem;
}

/* --- Deleted Comment Notice --- */
.comment-deleted-notice[b-nk83o6ghxs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

.comment-deleted-notice svg[b-nk83o6ghxs] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --- Edit Area --- */
.comment-edit-area[b-nk83o6ghxs] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-top: 0.25rem;
}

.comment-edit-input[b-nk83o6ghxs] {
    flex: 1;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.8125rem;
    font-family: inherit;
    resize: vertical;
    min-height: 36px;
    transition: border-color 0.2s ease;
}

.comment-edit-input:focus[b-nk83o6ghxs] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.comment-edit-save[b-nk83o6ghxs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    color: var(--wl-bg-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.comment-edit-save:hover[b-nk83o6ghxs] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.comment-edit-save:disabled[b-nk83o6ghxs] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.comment-edit-save svg[b-nk83o6ghxs] {
    width: 16px;
    height: 16px;
}

/* --- Load More --- */
.comment-load-more[b-nk83o6ghxs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem;
    background: transparent;
    border: 1px dashed var(--wl-border-medium);
    border-radius: 8px;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.comment-load-more:hover:not(:disabled)[b-nk83o6ghxs] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.comment-load-more:disabled[b-nk83o6ghxs] {
    cursor: not-allowed;
}

/* --- Add Comment --- */
.comment-add[b-nk83o6ghxs] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.comment-add-input[b-nk83o6ghxs] {
    flex: 1;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.8125rem;
    font-family: inherit;
    resize: none;
    min-height: 36px;
    transition: border-color 0.2s ease;
}

.comment-add-input[b-nk83o6ghxs]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.25);
}

.comment-add-input:focus[b-nk83o6ghxs] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.comment-add-submit[b-nk83o6ghxs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    color: var(--wl-bg-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.comment-add-submit:hover:not(:disabled)[b-nk83o6ghxs] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--wl-gold-rgb), 0.35);
}

.comment-add-submit:disabled[b-nk83o6ghxs] {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.comment-add-submit svg[b-nk83o6ghxs] {
    width: 18px;
    height: 18px;
}

/* --- Emoji Button --- */
.comment-emoji-wrapper[b-nk83o6ghxs] {
    position: relative;
    flex-shrink: 0;
}

.comment-emoji-btn[b-nk83o6ghxs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.4;
}

.comment-emoji-btn:hover[b-nk83o6ghxs] {
    opacity: 0.7;
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.comment-emoji-btn--active[b-nk83o6ghxs] {
    opacity: 1;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
}

.comment-emoji-btn img[b-nk83o6ghxs] {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.comment-emoji-wrapper[b-nk83o6ghxs]  .emoji-picker {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .comment-actions[b-nk83o6ghxs] {
        opacity: 1;
    }
}
/* /Components/Pages/Social/Board/DailyArticleCommentCard.razor.rz.scp.css */
/* ==========================================
   DAILY ARTICLE COMMENT CARD - Board
   ========================================== */

.daily-comment-card[b-r37rm8wvet] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.daily-comment-content[b-r37rm8wvet] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    line-height: 1.6;
    word-break: break-word;
    margin: 0;
}

.daily-comment-context[b-r37rm8wvet] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 9px;
    background: rgba(var(--wl-gold-rgb), 0.055);
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.daily-comment-context a[b-r37rm8wvet] {
    color: var(--wl-gold);
    font-weight: 700;
    text-decoration: none;
}

.daily-comment-context a:hover[b-r37rm8wvet] {
    text-decoration: underline;
}
/* /Components/Pages/Social/Board/DailyIssueStoryCommentCard.razor.rz.scp.css */
/* ==========================================
   DAILY ISSUE STORY COMMENT CARD - Board
   ========================================== */

.daily-comment-card[b-3udybrsts7] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.daily-comment-content[b-3udybrsts7] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    line-height: 1.6;
    word-break: break-word;
    margin: 0;
}

.daily-comment-context[b-3udybrsts7] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    padding: 0.45rem 0.7rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 9px;
    background: rgba(var(--wl-gold-rgb), 0.055);
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
    line-height: 1.35;
}

.daily-comment-context a[b-3udybrsts7] {
    color: var(--wl-gold);
    font-weight: 700;
    text-decoration: none;
}

.daily-comment-context a:hover[b-3udybrsts7] {
    text-decoration: underline;
}
/* /Components/Pages/Social/Board/Index.razor.rz.scp.css */
/* ==========================================
   SOCIAL BOARD - AAA+++ PREMIUM DESIGN
   ========================================== */

.board[b-9ig3oisxdt] {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-width: 0;
    padding: 1.5rem;
    max-width: 680px;
    margin: 0 auto;
}

/* === CINEMATIC ATMOSPHERE === */
.board-atmosphere[b-9ig3oisxdt] {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.board-gradient-orb[b-9ig3oisxdt] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
}

.board-gradient-orb--gold[b-9ig3oisxdt] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    animation: boardFloat-b-9ig3oisxdt 22s ease-in-out infinite;
}

.board-gradient-orb--purple[b-9ig3oisxdt] {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, var(--wl-purple) 0%, transparent 70%);
    bottom: -150px;
    left: -100px;
    animation: boardFloat-b-9ig3oisxdt 28s ease-in-out infinite reverse;
}

@keyframes boardFloat-b-9ig3oisxdt {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(25px, -15px) scale(1.04); }
    66% { transform: translate(-15px, 25px) scale(0.96); }
}

.board-scanline[b-9ig3oisxdt] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-gold-rgb), 0.015) 2px,
        rgba(var(--wl-gold-rgb), 0.015) 4px
    );
}

.board-noise[b-9ig3oisxdt] {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* === ANIMATIONS === */
.animate-fade-in[b-9ig3oisxdt] {
    animation: boardFadeIn-b-9ig3oisxdt 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100[b-9ig3oisxdt] { animation-delay: 0.1s; }
.delay-200[b-9ig3oisxdt] { animation-delay: 0.2s; }
.delay-300[b-9ig3oisxdt] { animation-delay: 0.3s; }

@keyframes boardFadeIn-b-9ig3oisxdt {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === HEADER === */
.board-header[b-9ig3oisxdt] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    margin-bottom: 1.5rem;
}

.board-header-content[b-9ig3oisxdt] {
    flex: 1;
    min-width: 0;
}

.board-header-tag[b-9ig3oisxdt] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 0.5rem;
}

.board-header-title[b-9ig3oisxdt] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
    overflow-wrap: anywhere;
}

.board-back-btn[b-9ig3oisxdt] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.board-back-btn:hover[b-9ig3oisxdt] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.board-back-btn svg[b-9ig3oisxdt] {
    width: 16px;
    height: 16px;
}

/* === FILTER TABS === */
.board-filters[b-9ig3oisxdt] {
    position: relative;
    z-index: 1200;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    margin-bottom: 1.5rem;
    overflow: visible;
    padding-bottom: 0.25rem;
}

.board-filter[b-9ig3oisxdt] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 100px;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    flex-shrink: 0;
    max-width: 100%;
    text-decoration: none;
}

.board-filter:hover:not(.board-filter--active)[b-9ig3oisxdt] {
    background: var(--wl-border-subtle);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.board-filter--active[b-9ig3oisxdt] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.board-filter--tag[b-9ig3oisxdt] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    border-color: rgba(var(--wl-purple-rgb), 0.25);
    color: var(--wl-purple);
}

.board-filter svg[b-9ig3oisxdt] {
    width: 14px;
    height: 14px;
}

.board-filter-clear[b-9ig3oisxdt] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--wl-border-medium);
    border: none;
    border-radius: 50%;
    color: currentColor;
    cursor: pointer;
    margin-left: 0.125rem;
    transition: background 0.15s ease;
}

.board-filter-clear:hover[b-9ig3oisxdt] {
    background: var(--wl-surface-primary);
}

.board-filter-clear svg[b-9ig3oisxdt] {
    width: 10px;
    height: 10px;
}

.board-type-filter[b-9ig3oisxdt] {
    position: relative;
    flex-shrink: 0;
}

.board-filter span[b-9ig3oisxdt] {
    color: rgba(var(--wl-contrast-rgb), 0.45);
}

.board-type-filter-menu[b-9ig3oisxdt] {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 1201;
    display: grid;
    gap: 0.25rem;
    width: min(260px, calc(100vw - 2rem));
    padding: 0.5rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    box-shadow: 0 14px 40px var(--wl-shadow-color);
}

.board-type-filter-item[b-9ig3oisxdt] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    color: var(--wl-text-secondary);
    font-size: 0.8125rem;
    cursor: pointer;
}

.board-type-filter-item:hover[b-9ig3oisxdt] {
    background: rgba(var(--wl-contrast-rgb), 0.045);
}

.board-type-filter-item input[b-9ig3oisxdt] {
    accent-color: var(--wl-gold);
}

/* === LOADING === */
.board-loading[b-9ig3oisxdt] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1.25rem;
}

.board-loading-ring[b-9ig3oisxdt] {
    width: 48px;
    height: 48px;
    border: 2.5px solid var(--wl-gold-bg-hover);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: boardSpin-b-9ig3oisxdt 1s linear infinite;
}

@keyframes boardSpin-b-9ig3oisxdt {
    to { transform: rotate(360deg); }
}

.board-loading-text[b-9ig3oisxdt] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.3em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.board-loading-spinner[b-9ig3oisxdt] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: boardSpin-b-9ig3oisxdt 0.8s linear infinite;
}

/* === EMPTY STATE === */
.board-empty[b-9ig3oisxdt] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 20px;
}

.board-empty-icon[b-9ig3oisxdt] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    color: rgba(var(--wl-contrast-rgb), 0.2);
}

.board-empty-icon svg[b-9ig3oisxdt] {
    width: 100%;
    height: 100%;
}

.board-empty-title[b-9ig3oisxdt] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    margin: 0;
    font-weight: 400;
    max-width: 300px;
    margin: 0 auto;
    line-height: 1.5;
}

/* === FEED === */
.board-feed[b-9ig3oisxdt] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

/* === LOAD MORE === */
.board-load-more[b-9ig3oisxdt] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding-bottom: 2rem;
}

.board-load-more-btn[b-9ig3oisxdt] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
}

.board-load-more-btn:hover:not(:disabled)[b-9ig3oisxdt] {
    background: rgba(var(--wl-gold-rgb), 0.08);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
    transform: translateY(-1px);
}

.board-load-more-btn:disabled[b-9ig3oisxdt] {
    cursor: not-allowed;
    opacity: 0.6;
}

.board-load-more-btn svg[b-9ig3oisxdt] {
    width: 16px;
    height: 16px;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .board[b-9ig3oisxdt] {
        padding: 0;
    }

    .board-header[b-9ig3oisxdt] {
        flex-direction: column;
        align-items: stretch;
    }

    .board-back-btn[b-9ig3oisxdt] {
        align-self: flex-start;
    }

    .board-header-title[b-9ig3oisxdt] {
        font-size: 2rem;
    }

    .board-filters[b-9ig3oisxdt] {
        gap: 0.375rem;
    }

    .board-filter[b-9ig3oisxdt] {
        padding: 0.4rem 0.625rem;
        font-size: 0.625rem;
    }
}

@media (max-width: 480px) {
    .board-header-title[b-9ig3oisxdt] {
        font-size: 2rem;
    }

    .board-back-btn[b-9ig3oisxdt] {
        width: 100%;
        justify-content: center;
    }

    .board-filters[b-9ig3oisxdt] {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        padding-bottom: 0.5rem;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .board-filters[b-9ig3oisxdt]::-webkit-scrollbar {
        display: none;
    }

    .board-filter[b-9ig3oisxdt] {
        flex: 0 0 auto;
    }
}

@media (min-width: 1024px) {
    .board[b-9ig3oisxdt] {
        padding: 2rem;
    }
}
/* /Components/Pages/Social/Board/MediaGallery.razor.rz.scp.css */
/* ==========================================
   MEDIA GALLERY - Social Board
   ========================================== */

.media-gallery[b-zy92j8u80n] {
    display: grid;
    gap: 3px;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 0.75rem;
}

/* --- Layouts --- */
.media-gallery--single[b-zy92j8u80n] {
    grid-template-columns: 1fr;
}

.media-gallery--duo[b-zy92j8u80n] {
    grid-template-columns: 1fr 1fr;
}

.media-gallery--trio[b-zy92j8u80n] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.media-gallery--grid[b-zy92j8u80n] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

/* --- Media Items --- */
.media-item[b-zy92j8u80n] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 16 / 10;
    background: var(--wl-bg-secondary);
    transition: opacity 0.2s ease;
}

.media-item:hover[b-zy92j8u80n] {
    opacity: 0.88;
}

.media-gallery--single .media-item[b-zy92j8u80n] {
    aspect-ratio: 16 / 9;
    max-height: 420px;
}

.media-gallery--trio .media-item--large[b-zy92j8u80n] {
    grid-row: span 2;
    aspect-ratio: auto;
}

.media-img[b-zy92j8u80n] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Overflow Counter --- */
.media-overflow[b-zy92j8u80n] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-bg-tertiary);
    backdrop-filter: blur(2px);
}

.media-overflow-count[b-zy92j8u80n] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    letter-spacing: 0.05em;
}

/* ==========================================
   LIGHTBOX
   ========================================== */

.lightbox[b-zy92j8u80n] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightboxFadeIn-b-zy92j8u80n 0.25s ease forwards;
}

@keyframes lightboxFadeIn-b-zy92j8u80n {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lightbox-backdrop[b-zy92j8u80n] {
    position: absolute;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(8px);
}

.lightbox-content[b-zy92j8u80n] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 3rem;
}

.lightbox-img[b-zy92j8u80n] {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    animation: lightboxZoomIn-b-zy92j8u80n 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes lightboxZoomIn-b-zy92j8u80n {
    from {
        transform: scale(0.92);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.lightbox-close[b-zy92j8u80n] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-border-medium);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 50%;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.lightbox-close:hover[b-zy92j8u80n] {
    background: rgba(var(--wl-contrast-rgb), 0.15);
    color: white;
}

.lightbox-close svg[b-zy92j8u80n] {
    width: 20px;
    height: 20px;
}

.lightbox-nav[b-zy92j8u80n] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-border-subtle);
    border: 1px solid var(--wl-border-medium);
    border-radius: 50%;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}

.lightbox-nav:hover[b-zy92j8u80n] {
    background: rgba(var(--wl-contrast-rgb), 0.12);
    color: white;
}

.lightbox-nav svg[b-zy92j8u80n] {
    width: 22px;
    height: 22px;
}

.lightbox-nav--prev[b-zy92j8u80n] {
    left: 1rem;
}

.lightbox-nav--next[b-zy92j8u80n] {
    right: 1rem;
}

.lightbox-counter[b-zy92j8u80n] {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    letter-spacing: 0.1em;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    padding: 0.35rem 0.75rem;
    border-radius: 100px;
    z-index: 2;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .lightbox-content[b-zy92j8u80n] {
        padding: 1rem;
    }

    .lightbox-nav[b-zy92j8u80n] {
        width: 36px;
        height: 36px;
    }

    .lightbox-nav svg[b-zy92j8u80n] {
        width: 18px;
        height: 18px;
    }
}
/* /Components/Pages/Social/Board/PopularTagsPanel.razor.rz.scp.css */
.poptags[b-xe3yz1faf6] {
    margin: 0 0 1.25rem;
    padding: 0.7rem 1rem;
    border-radius: 12px;
    border: 1px solid var(--wl-border-subtle, rgba(128, 128, 128, 0.18));
    background: var(--wl-bg-secondary);
}

.poptags-head[b-xe3yz1faf6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Title + chevron = the collapse toggle. */
.poptags-toggle[b-xe3yz1faf6] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--wl-text-primary);
    cursor: pointer;
}

.poptags-chevron[b-xe3yz1faf6] {
    display: inline-flex;
    color: var(--wl-text-muted);
    transition: transform 0.18s ease;
}
.poptags-chevron svg[b-xe3yz1faf6] {
    width: 1rem;
    height: 1rem;
}
.poptags.is-expanded .poptags-chevron[b-xe3yz1faf6] {
    transform: rotate(90deg);
}

.poptags-title[b-xe3yz1faf6] {
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

/* Compact source switch in the header. */
.poptags-tabs[b-xe3yz1faf6] {
    display: inline-flex;
    gap: 0.15rem;
    padding: 0.15rem;
    border-radius: 999px;
    border: 1px solid var(--wl-border-subtle, rgba(128, 128, 128, 0.18));
    background: var(--wl-bg-tertiary);
}

.poptags-tab[b-xe3yz1faf6] {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--wl-text-secondary);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.16s ease, color 0.16s ease;
}
.poptags-tab:hover[b-xe3yz1faf6] {
    color: var(--wl-text-primary);
}
.poptags-tab.is-active[b-xe3yz1faf6] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
}

.poptags-body[b-xe3yz1faf6] {
    margin-top: 0.85rem;
}

.poptags-empty[b-xe3yz1faf6] {
    margin: 0;
    color: var(--wl-text-muted);
    font-size: 0.82rem;
}

.poptags-list[b-xe3yz1faf6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.poptag[b-xe3yz1faf6] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--wl-border-subtle, rgba(128, 128, 128, 0.18));
    background: var(--wl-bg-tertiary);
    color: var(--wl-text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: border-color 0.16s ease, transform 0.16s ease;
}
.poptag:hover[b-xe3yz1faf6] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    transform: translateY(-1px);
}

.poptag-name[b-xe3yz1faf6] {
    color: var(--wl-gold);
    white-space: nowrap;
}

.poptag-spark[b-xe3yz1faf6] {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 22px;
    width: 56px;
}

.poptag-bar[b-xe3yz1faf6] {
    flex: 1;
    min-height: 2px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.85), rgba(var(--wl-gold-rgb), 0.35));
}

.poptag-count[b-xe3yz1faf6] {
    min-width: 1.4rem;
    text-align: right;
    color: var(--wl-text-secondary);
    font-variant-numeric: tabular-nums;
}
/* /Components/Pages/Social/Board/PostCard.razor.rz.scp.css */
/* ==========================================
   POST CARD - Social Board
   ========================================== */

.post-card[b-jsel2w62ap] {
    position: relative;
    background: rgba(var(--wl-contrast-rgb), 0.025);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 16px;
    padding: 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: postCardIn-b-jsel2w62ap 0.5s ease forwards;
    opacity: 0;
}

@keyframes postCardIn-b-jsel2w62ap {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.post-card:hover[b-jsel2w62ap] {
    background: rgba(var(--wl-contrast-rgb), 0.035);
    border-color: var(--wl-border-medium);
}

/* --- Card Modifiers --- */
.post-card--pinned[b-jsel2w62ap] {
    border-color: var(--wl-gold-border);
    background: rgba(var(--wl-gold-rgb), 0.02);
}

.post-card--pinned:hover[b-jsel2w62ap] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.post-card--release[b-jsel2w62ap] {
    border-color: rgba(var(--wl-purple-rgb), 0.15);
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.03), transparent);
}

.post-card--showcase[b-jsel2w62ap] {
    border-color: rgba(var(--wl-pink-rgb), 0.15);
    background: linear-gradient(135deg, rgba(var(--wl-pink-rgb), 0.03), transparent);
}

.post-card--spotlight-comment[b-jsel2w62ap] {
    border-color: rgba(var(--wl-gold-rgb), 0.16);
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.025), rgba(var(--wl-contrast-rgb), 0.018));
}

.post-card--poll[b-jsel2w62ap] {
    border-color: rgba(56, 189, 248, 0.18);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.025), rgba(var(--wl-contrast-rgb), 0.018));
}

.post-card--quiz[b-jsel2w62ap] {
    border-color: rgba(34, 197, 94, 0.18);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.025), rgba(var(--wl-contrast-rgb), 0.018));
}

.post-card--looking-for[b-jsel2w62ap] {
    border-color: rgba(var(--wl-pink-rgb), 0.16);
    background: linear-gradient(135deg, rgba(var(--wl-pink-rgb), 0.025), rgba(var(--wl-contrast-rgb), 0.018));
}

.post-card--buzz[b-jsel2w62ap] {
    border-color: var(--wl-gold-border);
    background: linear-gradient(165deg, rgba(var(--wl-gold-rgb), 0.04), rgba(var(--wl-bg-dark-rgb), 0.5));
}

.post-card--buzz:hover[b-jsel2w62ap] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
}

.post-card--deleted[b-jsel2w62ap] {
    opacity: 0.5;
}

/* --- Pin Badge --- */
.post-pin-badge[b-jsel2w62ap] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.2rem 0.625rem;
    background: rgba(var(--wl-gold-rgb), 0.12);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-gold);
    margin-bottom: 0.75rem;
}

.post-pin-badge svg[b-jsel2w62ap] {
    width: 12px;
    height: 12px;
}

/* --- Deleted Notice --- */
.post-deleted-notice[b-jsel2w62ap] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0;
    color: var(--wl-text-muted);
    font-style: italic;
    font-size: 0.875rem;
}

.post-deleted-notice svg[b-jsel2w62ap] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* --- Header --- */
.post-header[b-jsel2w62ap] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.post-avatar[b-jsel2w62ap] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid var(--wl-border-medium);
    transition: border-color 0.2s ease;
}

.post-card:hover .post-avatar[b-jsel2w62ap] {
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
}

.post-meta[b-jsel2w62ap] {
    flex: 1;
    min-width: 0;
}

.post-author[b-jsel2w62ap] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    min-width: 0;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--wl-text-primary);
    line-height: 1.35;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.post-author-link[b-jsel2w62ap] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.post-author-link:hover[b-jsel2w62ap] {
    color: var(--wl-gold);
    text-decoration: underline;
}

.post-meta-row[b-jsel2w62ap] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.post-time[b-jsel2w62ap] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    text-decoration: none;
    transition: color 0.15s ease;
}

.post-time:hover[b-jsel2w62ap] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.post-edited[b-jsel2w62ap] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

.post-wall-direction[b-jsel2w62ap] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
}

/* --- Type Badges --- */
.post-type-badge[b-jsel2w62ap] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.post-type-badge svg[b-jsel2w62ap] {
    width: 12px;
    height: 12px;
}

.post-type-badge--release[b-jsel2w62ap] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    color: var(--wl-purple);
}

.post-type-badge--showcase[b-jsel2w62ap] {
    background: rgba(var(--wl-pink-rgb), 0.15);
    color: #F472B6;
}

.post-type-badge--buzz[b-jsel2w62ap] {
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
}

.post-type-badge--spotlight-comment[b-jsel2w62ap] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
}

.post-type-badge--artifact-comment[b-jsel2w62ap] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: var(--wl-text-secondary);
}

.post-type-badge--poll[b-jsel2w62ap] {
    background: rgba(56, 189, 248, 0.12);
    color: #38BDF8;
}

.post-type-badge--quiz[b-jsel2w62ap] {
    background: rgba(34, 197, 94, 0.12);
    color: #22C55E;
}

.post-type-badge--looking-for[b-jsel2w62ap] {
    background: rgba(var(--wl-pink-rgb), 0.12);
    color: #F472B6;
}

/* --- Staff Badge --- */
.staff-badge[b-jsel2w62ap] {
    display: inline-flex;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    flex-shrink: 0;
}

.staff-badge--queued[b-jsel2w62ap] {
    background: rgba(251, 191, 36, 0.15);
    color: #FBBF24;
}

.staff-badge--inprogress[b-jsel2w62ap] {
    background: rgba(96, 165, 250, 0.15);
    color: #60A5FA;
}

.staff-badge--done[b-jsel2w62ap] {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.staff-badge--rejected[b-jsel2w62ap] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: #EF4444;
}

/* --- Menu --- */
.post-menu-wrapper[b-jsel2w62ap] {
    position: relative;
    flex-shrink: 0;
}

.post-menu-btn[b-jsel2w62ap] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    cursor: pointer;
    transition: all 0.2s ease;
}

.post-menu-btn:hover[b-jsel2w62ap] {
    background: var(--wl-border-subtle);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.post-menu-btn svg[b-jsel2w62ap] {
    width: 18px;
    height: 18px;
}

.post-menu[b-jsel2w62ap] {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 160px;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    padding: 0.375rem;
    box-shadow: 0 12px 40px var(--wl-shadow-color);
    z-index: 50;
    animation: menuDropIn-b-jsel2w62ap 0.15s ease forwards;
}

@keyframes menuDropIn-b-jsel2w62ap {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.post-menu-item[b-jsel2w62ap] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.post-menu-item:hover[b-jsel2w62ap] {
    background: var(--wl-border-subtle);
    color: var(--wl-text-primary);
}

.post-menu-item--danger:hover[b-jsel2w62ap] {
    background: rgba(var(--wl-red-rgb), 0.12);
    color: #EF4444;
}

.post-menu-item svg[b-jsel2w62ap] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --- Content --- */
.post-content[b-jsel2w62ap] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    line-height: 1.65;
    word-break: break-word;
    margin-bottom: 0.5rem;
}

.post-content[b-jsel2w62ap]  b {
    color: var(--wl-text-primary);
    font-weight: 700;
}

.post-content[b-jsel2w62ap]  i {
    color: rgba(var(--wl-contrast-rgb), 0.75);
}

.post-content[b-jsel2w62ap]  a {
    color: var(--wl-gold);
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-content[b-jsel2w62ap]  a:hover {
    color: var(--wl-gold-light);
    text-decoration: underline;
}

.post-content[b-jsel2w62ap]  .board-tag {
    color: var(--wl-purple);
    font-weight: 500;
    text-decoration: none;
}

.post-content[b-jsel2w62ap]  .board-tag:hover {
    color: var(--wl-purple);
}

.post-content[b-jsel2w62ap]  .board-mention {
    color: #38BDF8;
    font-weight: 600;
    text-decoration: none;
    background: rgba(56, 189, 248, 0.1);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.post-content[b-jsel2w62ap]  a.board-mention:hover {
    color: #7DD3FC;
    background: rgba(56, 189, 248, 0.2);
    text-decoration: none;
}

.post-content[b-jsel2w62ap]  ul {
    list-style: none;
    padding-left: 1rem;
    margin: 0.5rem 0;
}

.post-content[b-jsel2w62ap]  li {
    position: relative;
    padding-left: 0.75rem;
    margin-bottom: 0.25rem;
}

.post-content[b-jsel2w62ap]  li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 4px;
    height: 4px;
    background: var(--wl-gold);
    border-radius: 50%;
}

/* --- Interactive Posts --- */
.post-interactive[b-jsel2w62ap] {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.post-interactive-header[b-jsel2w62ap] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.post-interactive-header h3[b-jsel2w62ap] {
    margin: 0;
    color: var(--wl-text-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.post-interactive-stat[b-jsel2w62ap] {
    flex-shrink: 0;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.055);
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
}

.post-option-stack[b-jsel2w62ap] {
    display: grid;
    gap: 0.45rem;
}

.post-option[b-jsel2w62ap] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 42px;
    padding: 0.6rem 0.7rem;
    overflow: hidden;
    background: rgba(var(--wl-contrast-rgb), 0.035);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    color: var(--wl-text-primary);
    text-align: left;
    cursor: pointer;
}

.post-option:disabled[b-jsel2w62ap] {
    cursor: default;
}

.post-option:not(:disabled):hover[b-jsel2w62ap] {
    border-color: rgba(var(--wl-gold-rgb), 0.28);
    background: rgba(var(--wl-contrast-rgb), 0.052);
}

.post-option-label[b-jsel2w62ap],
.post-option-percent[b-jsel2w62ap] {
    position: relative;
    z-index: 1;
}

.post-option-label[b-jsel2w62ap] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.post-option-percent[b-jsel2w62ap] {
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

.post-option-bar[b-jsel2w62ap] {
    position: absolute;
    inset: 0 auto 0 0;
    background: rgba(56, 189, 248, 0.12);
    transition: width 0.25s ease;
}

.post-option--selected[b-jsel2w62ap] {
    border-color: rgba(56, 189, 248, 0.32);
}

.post-option--correct[b-jsel2w62ap] {
    border-color: rgba(34, 197, 94, 0.4);
}

.post-option--correct .post-option-bar[b-jsel2w62ap] {
    background: rgba(34, 197, 94, 0.16);
}

.post-option--wrong[b-jsel2w62ap] {
    border-color: rgba(var(--wl-red-rgb), 0.4);
}

.post-option--wrong .post-option-bar[b-jsel2w62ap] {
    background: rgba(var(--wl-red-rgb), 0.12);
}

.post-option-voters[b-jsel2w62ap] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding-left: 0.25rem;
}

.post-option-voters a[b-jsel2w62ap] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 130px;
    padding: 0.15rem 0.4rem 0.15rem 0.15rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-muted);
    font-size: 0.6875rem;
    text-decoration: none;
}

.post-option-voters img[b-jsel2w62ap] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.post-option-voters span[b-jsel2w62ap] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-looking-for[b-jsel2w62ap] {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
}

.post-looking-grid[b-jsel2w62ap] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.post-looking-grid span[b-jsel2w62ap] {
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.035);
    color: var(--wl-text-muted);
    font-size: 0.75rem;
}

.post-looking-grid strong[b-jsel2w62ap] {
    color: var(--wl-text-primary);
    font-weight: 600;
}

.post-looking-tags[b-jsel2w62ap] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.post-looking-tags a[b-jsel2w62ap] {
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(var(--wl-pink-rgb), 0.1);
    color: #F472B6;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    text-decoration: none;
}

.post-looking-tags a:hover[b-jsel2w62ap] {
    background: rgba(var(--wl-pink-rgb), 0.18);
    color: #F9A8D4;
}

/* --- Edit Area --- */
.post-edit-area[b-jsel2w62ap] {
    margin-bottom: 0.75rem;
}

.post-edit-input[b-jsel2w62ap] {
    width: 100%;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 12px;
    padding: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.post-edit-input:focus[b-jsel2w62ap] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
}

.post-edit-actions[b-jsel2w62ap] {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.post-edit-error[b-jsel2w62ap] {
    margin: .5rem 0 0;
    color: #f87171;
    font-size: .8rem;
    line-height: 1.4;
}

.post-edit-cancel[b-jsel2w62ap] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    color: var(--wl-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.post-edit-cancel:hover[b-jsel2w62ap] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border-color: rgba(var(--wl-red-rgb), 0.3);
    color: #EF4444;
}

.post-edit-cancel svg[b-jsel2w62ap] {
    width: 18px;
    height: 18px;
}

.post-edit-save[b-jsel2w62ap] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    color: var(--wl-bg-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.post-edit-save:hover:not(:disabled)[b-jsel2w62ap] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--wl-gold-rgb), 0.35);
}

.post-edit-save:disabled[b-jsel2w62ap] {
    opacity: 0.35;
    cursor: not-allowed;
}

.post-edit-save svg[b-jsel2w62ap] {
    width: 18px;
    height: 18px;
}

/* --- Tags --- */
.post-tags[b-jsel2w62ap] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.625rem;
}

.post-tag[b-jsel2w62ap] {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    background: rgba(var(--wl-purple-rgb), 0.1);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: var(--wl-purple);
    text-decoration: none;
    transition: all 0.2s ease;
}

.post-tag:hover[b-jsel2w62ap] {
    background: rgba(var(--wl-purple-rgb), 0.2);
    color: #C4B5FD;
}

/* --- Footer --- */
.post-footer[b-jsel2w62ap] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    gap: 0.75rem;
}

.post-comment-toggle[b-jsel2w62ap] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 100px;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.post-comment-toggle:hover[b-jsel2w62ap] {
    background: var(--wl-border-subtle);
    color: rgba(var(--wl-contrast-rgb), 0.7);
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
}

.post-comment-toggle svg[b-jsel2w62ap] {
    width: 15px;
    height: 15px;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .post-card[b-jsel2w62ap] {
        padding: 1rem;
        border-radius: 12px;
    }

    .post-header[b-jsel2w62ap] {
        gap: 0.5rem;
    }

    .post-avatar[b-jsel2w62ap] {
        width: 36px;
        height: 36px;
    }

    .post-footer[b-jsel2w62ap] {
        flex-direction: column;
        align-items: flex-start;
    }

    .post-interactive-header[b-jsel2w62ap] {
        flex-direction: column;
    }

    .post-looking-grid[b-jsel2w62ap] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Social/Board/PostComposer.razor.rz.scp.css */
/* ==========================================
   POST COMPOSER - Social Board
   ========================================== */

.composer[b-71kckdsl6h] {
    position: relative;
    z-index: 10;
    margin-bottom: 1.5rem;
    animation: composerFadeIn-b-71kckdsl6h 0.4s ease forwards;
}

@keyframes composerFadeIn-b-71kckdsl6h {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.composer-inner[b-71kckdsl6h] {
    background: rgba(var(--wl-contrast-rgb), 0.025);
    border: 1px solid var(--wl-border-medium);
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.composer--focused .composer-inner[b-71kckdsl6h] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    box-shadow: 0 0 0 1px rgba(var(--wl-gold-rgb), 0.08), 0 8px 32px var(--wl-shadow-color);
}

/* --- Type Tabs --- */
.composer-type-tabs[b-71kckdsl6h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.875rem;
}

.composer-type-tab[b-71kckdsl6h] {
    min-height: 32px;
    padding: 0.35rem 0.65rem;
    background: rgba(var(--wl-contrast-rgb), 0.035);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.18s ease;
}

.composer-type-tab:hover[b-71kckdsl6h] {
    border-color: var(--wl-border-medium);
    color: var(--wl-text-secondary);
}

.composer-type-tab--active[b-71kckdsl6h] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    border-color: rgba(var(--wl-gold-rgb), 0.32);
    color: var(--wl-gold);
}

/* --- Textarea --- */
.composer-input-area[b-71kckdsl6h] {
    position: relative;
}

.composer-textarea[b-71kckdsl6h] {
    width: 100%;
    background: transparent;
    border: none;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.6;
    resize: none;
    padding: 0;
    transition: min-height 0.3s ease;
}

.composer-textarea[b-71kckdsl6h]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.25);
}

.composer-textarea:focus[b-71kckdsl6h] {
    outline: none;
}

.composer-textarea--structured[b-71kckdsl6h] {
    min-height: 84px;
    padding: 0.65rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.035);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
}

.composer-textarea--structured:focus[b-71kckdsl6h] {
    border-color: rgba(var(--wl-gold-rgb), 0.28);
}

.composer-char-count[b-71kckdsl6h] {
    /* In normal flow below the textarea, right-aligned, so it can never overlap the
       text (an absolute overlay let the last scrolled line slide underneath it). */
    text-align: right;
    margin-top: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    letter-spacing: 0.05em;
    pointer-events: none;
}

.char-count--warning[b-71kckdsl6h] {
    color: var(--wl-gold-light);
}

.char-count--danger[b-71kckdsl6h] {
    color: #ef4444;
}

/* --- Mention Dropdown --- */
.mention-dropdown[b-71kckdsl6h] {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    padding: 0.375rem;
    box-shadow: 0 12px 40px var(--wl-shadow-color);
    z-index: 50;
    animation: mentionDropIn-b-71kckdsl6h 0.15s ease forwards;
    max-height: 240px;
    overflow-y: auto;
}

@keyframes mentionDropIn-b-71kckdsl6h {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mention-item[b-71kckdsl6h] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.mention-item:hover[b-71kckdsl6h] {
    background: var(--wl-border-subtle);
}

.mention-avatar[b-71kckdsl6h] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--wl-border-subtle);
}

.mention-info[b-71kckdsl6h] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.mention-nickname[b-71kckdsl6h] {
    font-weight: 600;
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.mention-name[b-71kckdsl6h] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

/* --- Tags Preview --- */
.composer-tags[b-71kckdsl6h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.composer-tag[b-71kckdsl6h] {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: rgba(var(--wl-purple-rgb), 0.12);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
    border-radius: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: var(--wl-purple);
    letter-spacing: 0.02em;
}

/* --- Structured Post Forms --- */
.composer-structured[b-71kckdsl6h] {
    display: grid;
    gap: 0.625rem;
}

.composer-grid[b-71kckdsl6h] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.composer-language-grid[b-71kckdsl6h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.composer-check-pill[b-71kckdsl6h] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 30px;
    padding: 0.3rem 0.55rem;
    background: rgba(var(--wl-contrast-rgb), 0.035);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 999px;
    color: var(--wl-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
}

.composer-check-pill:hover[b-71kckdsl6h] {
    border-color: rgba(var(--wl-gold-rgb), 0.24);
}

.composer-check-pill input[b-71kckdsl6h] {
    accent-color: var(--wl-gold);
}

.composer-field[b-71kckdsl6h] {
    width: 100%;
    min-height: 38px;
    padding: 0.55rem 0.65rem;
    background: rgba(var(--wl-contrast-rgb), 0.035);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    color: var(--wl-text-primary);
    font: inherit;
    font-size: 0.875rem;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.composer-field:focus[b-71kckdsl6h] {
    outline: none;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: rgba(var(--wl-gold-rgb), 0.28);
}

.composer-field[b-71kckdsl6h]::placeholder,
.composer-textarea--structured[b-71kckdsl6h]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.28);
}

.composer-option-list[b-71kckdsl6h] {
    display: grid;
    gap: 0.5rem;
}

.composer-option-row[b-71kckdsl6h] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
}

.composer-option-row--selectable[b-71kckdsl6h] {
    grid-template-columns: auto 28px minmax(0, 1fr);
}

.composer-option-index[b-71kckdsl6h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(var(--wl-contrast-rgb), 0.055);
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
}

.composer-icon-btn[b-71kckdsl6h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--wl-text-muted);
    cursor: pointer;
}

.composer-icon-btn:hover[b-71kckdsl6h] {
    border-color: rgba(var(--wl-red-rgb), 0.25);
    color: #ef4444;
}

.composer-icon-btn svg[b-71kckdsl6h] {
    width: 15px;
    height: 15px;
}

.composer-add-option[b-71kckdsl6h] {
    justify-self: start;
    padding: 0.35rem 0.65rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    color: var(--wl-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
}

.composer-add-option:hover[b-71kckdsl6h] {
    border-color: rgba(var(--wl-gold-rgb), 0.28);
    color: var(--wl-gold);
}

.composer-mode-hint[b-71kckdsl6h] {
    color: var(--wl-text-muted);
    font-size: 0.75rem;
}

/* --- Media Upload Preview --- */
.composer-media-preview[b-71kckdsl6h] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    overflow-x: auto;
}

.composer-media-thumb[b-71kckdsl6h] {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--wl-border-medium);
}

.composer-media-thumb img[b-71kckdsl6h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.composer-media-remove[b-71kckdsl6h] {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-bg-tertiary);
    border: none;
    border-radius: 50%;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    cursor: pointer;
    transition: background 0.15s ease;
}

.composer-media-remove:hover[b-71kckdsl6h] {
    background: rgba(var(--wl-red-rgb), 0.8);
}

.composer-media-remove svg[b-71kckdsl6h] {
    width: 12px;
    height: 12px;
}

/* --- Bottom Bar --- */
.composer-bar[b-71kckdsl6h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-subtle);
    gap: 0.75rem;
}

.composer-bar--hidden[b-71kckdsl6h] {
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.composer-bar-left[b-71kckdsl6h] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.composer-bar-right[b-71kckdsl6h] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.composer-upload-btn[b-71kckdsl6h] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    color: var(--wl-text-muted);
    font-size: 0.6875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.composer-upload-btn:hover[b-71kckdsl6h] {
    background: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.8);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
}

.composer-upload-btn svg[b-71kckdsl6h] {
    width: 16px;
    height: 16px;
}

.composer-max-hint[b-71kckdsl6h] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

.composer-format-hints[b-71kckdsl6h] {
    display: flex;
    gap: 0.375rem;
}

.format-hint[b-71kckdsl6h] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    color: rgba(var(--wl-contrast-rgb), 0.2);
    padding: 0.15rem 0.35rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-radius: 4px;
    user-select: none;
}

/* --- Emoji Picker Button --- */
.composer-emoji-wrapper[b-71kckdsl6h] {
    position: relative;
}

.composer-emoji-btn[b-71kckdsl6h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.5;
}

.composer-emoji-btn:hover[b-71kckdsl6h] {
    opacity: 0.8;
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.composer-emoji-btn--active[b-71kckdsl6h] {
    opacity: 1;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
}

.composer-emoji-btn img[b-71kckdsl6h] {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.composer-emoji-wrapper[b-71kckdsl6h]  .emoji-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-bottom: 8px;
}

.composer-rate-limit[b-71kckdsl6h] {
    font-size: 0.6875rem;
    color: #ef4444;
    white-space: nowrap;
}

/* --- Submit Button --- */
.composer-submit[b-71kckdsl6h] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    border-radius: 10px;
    color: var(--wl-bg-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.composer-submit:hover:not(:disabled)[b-71kckdsl6h] {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--wl-gold-rgb), 0.35);
}

.composer-submit:active:not(:disabled)[b-71kckdsl6h] {
    transform: translateY(0);
}

.composer-submit:disabled[b-71kckdsl6h] {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}

.composer-submit svg[b-71kckdsl6h] {
    width: 16px;
    height: 16px;
}

.composer-submit-spinner[b-71kckdsl6h] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(var(--wl-bg-dark-rgb), 0.3);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: composerSpin-b-71kckdsl6h 0.7s linear infinite;
}

@keyframes composerSpin-b-71kckdsl6h {
    to { transform: rotate(360deg); }
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .composer-inner[b-71kckdsl6h] {
        padding: 0.75rem;
    }

    .composer-bar[b-71kckdsl6h] {
        flex-wrap: wrap;
    }

    .composer-grid[b-71kckdsl6h] {
        grid-template-columns: 1fr;
    }

    .composer-format-hints[b-71kckdsl6h] {
        display: none;
    }
}
/* /Components/Pages/Social/Board/PostDetail.razor.rz.scp.css */
/* ==========================================
   POST DETAIL PAGE
   ========================================== */

.post-detail[b-lzbwch5g37] {
    position: relative;
    min-height: 100vh;
    padding: 1.5rem;
    overflow: hidden;
    max-width: 680px;
    margin: 0 auto;
}

/* === CINEMATIC ATMOSPHERE === */
.post-detail-atmosphere[b-lzbwch5g37] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.post-detail-gradient-orb[b-lzbwch5g37] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
}

.post-detail-gradient-orb--gold[b-lzbwch5g37] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    animation: postDetailFloat-b-lzbwch5g37 22s ease-in-out infinite;
}

.post-detail-gradient-orb--purple[b-lzbwch5g37] {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, var(--wl-purple) 0%, transparent 70%);
    bottom: -150px;
    left: -100px;
    animation: postDetailFloat-b-lzbwch5g37 28s ease-in-out infinite reverse;
}

@keyframes postDetailFloat-b-lzbwch5g37 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(25px, -15px) scale(1.04); }
    66% { transform: translate(-15px, 25px) scale(0.96); }
}

.post-detail-scanline[b-lzbwch5g37] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-gold-rgb), 0.015) 2px,
        rgba(var(--wl-gold-rgb), 0.015) 4px
    );
}

/* === ANIMATIONS === */
.animate-fade-in[b-lzbwch5g37] {
    animation: postDetailFadeIn-b-lzbwch5g37 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100[b-lzbwch5g37] { animation-delay: 0.1s; }
.delay-200[b-lzbwch5g37] { animation-delay: 0.2s; }

@keyframes postDetailFadeIn-b-lzbwch5g37 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === BACK LINK === */
.post-detail-back[b-lzbwch5g37] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    margin-bottom: 1.5rem;
}

.post-detail-back:hover[b-lzbwch5g37] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.post-detail-back[b-lzbwch5g37]  svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* === LOADING === */
.post-detail-loading[b-lzbwch5g37] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1.25rem;
}

.post-detail-loading-ring[b-lzbwch5g37] {
    width: 48px;
    height: 48px;
    border: 2.5px solid var(--wl-gold-bg-hover);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: postDetailSpin-b-lzbwch5g37 1s linear infinite;
}

@keyframes postDetailSpin-b-lzbwch5g37 {
    to { transform: rotate(360deg); }
}

.post-detail-loading-text[b-lzbwch5g37] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.3em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

/* === EMPTY / NOT FOUND === */
.post-detail-empty[b-lzbwch5g37] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 20px;
}

.post-detail-empty-icon[b-lzbwch5g37] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    color: rgba(var(--wl-contrast-rgb), 0.2);
}

.post-detail-empty-icon[b-lzbwch5g37]  svg {
    width: 100%;
    height: 100%;
}

.post-detail-empty-title[b-lzbwch5g37] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    margin: 0;
    font-weight: 400;
}

/* === CONTENT === */
.post-detail-content[b-lzbwch5g37] {
    position: relative;
    z-index: 1;
}

.post-detail-comments[b-lzbwch5g37] {
    position: relative;
    z-index: 1;
    margin-top: 0.5rem;
    padding-bottom: 2rem;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .post-detail[b-lzbwch5g37] {
        padding: 1rem;
    }
}

@media (min-width: 1024px) {
    .post-detail[b-lzbwch5g37] {
        padding: 2rem;
    }
}
/* /Components/Pages/Social/Board/ReactionBar.razor.rz.scp.css */
/* ==========================================
   REACTION BAR - Social Board
   ========================================== */

.reaction-bar[b-dukytmv0tr] {
    display: flex;
    align-items: center;
}

.reaction-pills[b-dukytmv0tr] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
}

/* --- Reaction Pill --- */
.reaction-pill[b-dukytmv0tr] {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0.18rem 0.28rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 100px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 0.75rem;
    font-weight: 500;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1;
}

.reaction-pill:hover[b-dukytmv0tr] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    color: rgba(var(--wl-contrast-rgb), 0.9);
    transform: translateY(-1px);
}

.reaction-pill--active[b-dukytmv0tr] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold-light);
}

.reaction-pill--active:hover[b-dukytmv0tr] {
    background: var(--wl-gold-border);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold-light);
}

.reaction-pill-hitbox[b-dukytmv0tr],
.reaction-pill-count-button[b-dukytmv0tr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.reaction-pill-hitbox[b-dukytmv0tr] {
    width: 24px;
    padding: 0;
    cursor: pointer;
}

.reaction-pill-count-button[b-dukytmv0tr] {
    min-width: 24px;
    padding: 0 0.35rem;
    cursor: help;
}

.reaction-pill-hitbox:hover[b-dukytmv0tr],
.reaction-pill-count-button:hover[b-dukytmv0tr] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
}

.reaction-pill-hitbox:focus-visible[b-dukytmv0tr],
.reaction-pill-count-button:focus-visible[b-dukytmv0tr] {
    outline: 2px solid rgba(var(--wl-gold-rgb), 0.55);
    outline-offset: 2px;
}

.reaction-pill-hitbox:disabled[b-dukytmv0tr] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.reaction-pill-icon[b-dukytmv0tr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.reaction-emoji[b-dukytmv0tr] {
    width: 20px;
    height: 20px;
    pointer-events: none;
}

.reaction-pill-icon .reaction-emoji[b-dukytmv0tr] {
    width: 16px;
    height: 16px;
}

.reaction-pill-icon[b-dukytmv0tr]  svg {
    width: 16px;
    height: 16px;
}

.reaction-pill-count[b-dukytmv0tr] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
}

/* --- Add Reaction Button --- */
.reaction-add-wrapper[b-dukytmv0tr] {
    position: relative;
}

.reaction-add-btn[b-dukytmv0tr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px dashed rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 50%;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.reaction-add-btn:hover[b-dukytmv0tr] {
    background: var(--wl-gold-bg);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
    transform: scale(1.1);
}

.reaction-add-btn svg[b-dukytmv0tr] {
    width: 16px;
    height: 16px;
}

/* --- Reaction Popup --- */
.reaction-popup[b-dukytmv0tr] {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 14px;
    padding: 0.625rem;
    box-shadow: 0 12px 40px var(--wl-shadow-color), 0 0 0 1px rgba(var(--wl-contrast-rgb), 0.05);
    z-index: 100;
    animation: reactionPopupIn-b-dukytmv0tr 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes reactionPopupIn-b-dukytmv0tr {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(6px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

.reaction-popup-grid[b-dukytmv0tr] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
}

.reaction-popup-item[b-dukytmv0tr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
}

.reaction-popup-item:hover[b-dukytmv0tr] {
    background: var(--wl-border-medium);
    color: var(--wl-text-primary);
    transform: scale(1.2);
}

.reaction-popup-item--active[b-dukytmv0tr] {
    background: var(--wl-gold-bg-hover);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold-light);
}

.reaction-popup-item:disabled[b-dukytmv0tr] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.reaction-popup-icon[b-dukytmv0tr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.reaction-popup-icon[b-dukytmv0tr]  svg {
    width: 20px;
    height: 20px;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    /* The "+" button sits at a variable x-offset after the reaction pills, so anchoring
       the popup to it (left:0 -> overflows right, right:0 -> overflows left) clips on
       narrow screens. Pin it to the viewport centre instead so it can never be cut off. */
    .reaction-popup[b-dukytmv0tr] {
        position: fixed;
        left: 50%;
        right: auto;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        max-width: calc(100vw - 1.5rem);
        z-index: 1000;
    }

    @keyframes reactionPopupIn-b-dukytmv0tr {
        from {
            opacity: 0;
            transform: translate(-50%, -50%) scale(0.9);
        }
        to {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1);
        }
    }

    .reaction-popup-grid[b-dukytmv0tr] {
        grid-template-columns: repeat(7, 1fr);
        gap: 0.2rem;
    }

    .reaction-popup-item[b-dukytmv0tr] {
        width: 32px;
        height: 32px;
    }
}
/* /Components/Pages/Social/Board/ReleaseAnnouncementCard.razor.rz.scp.css */
/* ============================================
   RELEASE ANNOUNCEMENT CARD
   Premium integration card for music releases
   ============================================ */

.release-card[b-bs3p4cbee0] {
    position: relative;
    display: flex;
    align-items: stretch;
    background: linear-gradient(135deg,
        rgba(var(--wl-purple-rgb), 0.06) 0%,
        rgba(var(--wl-gold-rgb), 0.03) 50%,
        rgba(var(--wl-purple-rgb), 0.02) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.15);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0.5rem;
    animation: releaseCardIn-b-bs3p4cbee0 0.6s ease forwards;
    opacity: 0;
}

@keyframes releaseCardIn-b-bs3p4cbee0 {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.release-card:hover[b-bs3p4cbee0] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    background: linear-gradient(135deg,
        rgba(var(--wl-purple-rgb), 0.1) 0%,
        rgba(var(--wl-gold-rgb), 0.06) 50%,
        rgba(var(--wl-purple-rgb), 0.04) 100%);
    box-shadow:
        0 8px 32px rgba(var(--wl-purple-rgb), 0.1),
        0 0 60px rgba(var(--wl-gold-rgb), 0.04);
    transform: translateY(-1px);
}

/* Gold Accent Strip */
.release-accent[b-bs3p4cbee0] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--wl-gold) 20%,
        var(--wl-gold-light) 50%,
        var(--wl-gold) 80%,
        transparent 100%);
    opacity: 0.8;
    z-index: 1;
}

.release-card:hover .release-accent[b-bs3p4cbee0] {
    opacity: 1;
}

/* Badge */
.release-badge[b-bs3p4cbee0] {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wl-gold);
    z-index: 2;
    backdrop-filter: blur(8px);
}

.release-badge svg[b-bs3p4cbee0] {
    width: 12px;
    height: 12px;
}

/* Body Layout */
.release-body[b-bs3p4cbee0] {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    padding: 1.25rem;
    padding-top: 1.5rem;
    flex: 1;
    min-width: 0;
}

/* Cover Art */
.release-cover[b-bs3p4cbee0] {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--wl-border-medium);
    transition: border-color 0.3s ease;
}

.release-card:hover .release-cover[b-bs3p4cbee0] {
    border-color: rgba(var(--wl-gold-rgb), 0.25);
}

.release-cover[b-bs3p4cbee0]  img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

/* Placeholder layer behind the image - revealed when there is no cover or the
   image 404s (onerror hides the <img> and adds the --placeholder class). */
.release-cover-fallback[b-bs3p4cbee0] {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
}

.release-cover--placeholder .release-cover-fallback[b-bs3p4cbee0] {
    display: flex;
}

.release-card:hover .release-cover[b-bs3p4cbee0]  img {
    transform: scale(1.05);
}

.release-cover--placeholder[b-bs3p4cbee0] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
        rgba(var(--wl-purple-rgb), 0.15) 0%,
        rgba(var(--wl-gold-rgb), 0.08) 100%);
}

.release-cover--placeholder svg[b-bs3p4cbee0] {
    width: 40px;
    height: 40px;
    color: rgba(var(--wl-purple-rgb), 0.5);
}

.release-cover-glow[b-bs3p4cbee0] {
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at center,
        var(--wl-gold-bg-hover) 0%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.release-card:hover .release-cover-glow[b-bs3p4cbee0] {
    opacity: 1;
}

/* Info */
.release-info[b-bs3p4cbee0] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.release-title[b-bs3p4cbee0] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--wl-gold);
    margin: 0;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 0 24px rgba(var(--wl-gold-rgb), 0.3);
    transition: text-shadow 0.3s ease;
}

.release-card:hover .release-title[b-bs3p4cbee0] {
    text-shadow: 0 0 32px rgba(var(--wl-gold-rgb), 0.5);
}

.release-meta[b-bs3p4cbee0] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
}

.release-artist[b-bs3p4cbee0],
.release-tracks[b-bs3p4cbee0],
.release-detail[b-bs3p4cbee0] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.55);
}

.release-artist svg[b-bs3p4cbee0],
.release-tracks svg[b-bs3p4cbee0] {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

.release-detail[b-bs3p4cbee0] {
    padding: 0.125rem 0.45rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.release-cast[b-bs3p4cbee0] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.release-cast-title[b-bs3p4cbee0] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.release-cast-list[b-bs3p4cbee0] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.release-cast-chip[b-bs3p4cbee0],
.release-cast-more[b-bs3p4cbee0] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    max-width: 100%;
    padding: 0.2rem 0.45rem;
    border: 1px solid rgba(var(--wl-purple-rgb), 0.14);
    border-radius: 999px;
    background: rgba(var(--wl-purple-rgb), 0.05);
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.56);
}

.release-cast-chip strong[b-bs3p4cbee0] {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(var(--wl-contrast-rgb), 0.72);
    font-weight: 600;
}

.release-cast-chip span[b-bs3p4cbee0] {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.release-cast-more[b-bs3p4cbee0] {
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.18);
    background: rgba(var(--wl-gold-rgb), 0.06);
}

.release-announcement[b-bs3p4cbee0] {
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin: 0.25rem 0 0;
    line-height: 1.4;
}

/* Link Arrow */
.release-link[b-bs3p4cbee0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    flex-shrink: 0;
    border-left: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    color: rgba(var(--wl-contrast-rgb), 0.2);
    transition: all 0.3s ease;
}

.release-link svg[b-bs3p4cbee0] {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.release-card:hover .release-link[b-bs3p4cbee0] {
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.04);
    border-left-color: var(--wl-gold-bg);
}

.release-card:hover .release-link svg[b-bs3p4cbee0] {
    transform: translateX(2px);
}

/* Responsive */
@media (max-width: 640px) {
    .release-body[b-bs3p4cbee0] {
        gap: 0.875rem;
        padding: 1rem;
        padding-top: 1.25rem;
    }

    .release-cover[b-bs3p4cbee0] {
        width: 72px;
        height: 72px;
        border-radius: 10px;
    }

    .release-title[b-bs3p4cbee0] {
        font-size: 1.125rem;
    }

    .release-meta[b-bs3p4cbee0] {
        gap: 0.5rem;
    }

    .release-link[b-bs3p4cbee0] {
        width: 40px;
    }

    .release-badge[b-bs3p4cbee0] {
        top: 8px;
        right: 8px;
        font-size: 0.5rem;
        padding: 0.15rem 0.4rem;
    }
}
/* /Components/Pages/Social/Board/SpotlightCommentCard.razor.rz.scp.css */
.spotlight-comment-card[b-frbimupwio] {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.spotlight-comment-content[b-frbimupwio] {
    margin: 0;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 1rem;
    line-height: 1.55;
    word-break: break-word;
}

.spotlight-comment-content[b-frbimupwio]  p {
    margin: 0;
}

.spotlight-comment-content[b-frbimupwio]  a {
    color: var(--wl-gold);
    text-decoration: none;
}

.spotlight-comment-content[b-frbimupwio]  a:hover {
    text-decoration: underline;
}

.spotlight-comment-context[b-frbimupwio] {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    width: fit-content;
    max-width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 0.5rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 10px;
    background: rgba(var(--wl-gold-rgb), 0.06);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.spotlight-comment-context:hover[b-frbimupwio] {
    border-color: rgba(var(--wl-gold-rgb), 0.42);
    background: rgba(var(--wl-gold-rgb), 0.1);
}

.spotlight-comment-context[b-frbimupwio]  .spotlight-comment-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    flex-shrink: 0;
}

.spotlight-comment-context-copy[b-frbimupwio] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.1rem;
}

.spotlight-comment-context-copy span[b-frbimupwio] {
    color: var(--wl-text-muted);
    font-size: 0.75rem;
    line-height: 1.25;
}

.spotlight-comment-context-copy strong[b-frbimupwio] {
    color: var(--wl-gold);
    font-size: 0.8125rem;
    line-height: 1.25;
}

@media (max-width: 640px) {
    .spotlight-comment-context[b-frbimupwio] {
        width: 100%;
    }
}
/* /Components/Pages/Social/Board/TheBuzzCard.razor.rz.scp.css */
/* ============================================
   THE BUZZ CARD
   AI tabloid gossip card - bold, dramatic,
   yellow-black newspaper aesthetic
   ============================================ */

.buzz-card[b-h41fvqx6ui] {
    position: relative;
    background: linear-gradient(165deg,
        rgba(var(--wl-gold-rgb), 0.06) 0%,
        rgba(var(--wl-bg-secondary-rgb), 0.95) 30%,
        rgba(var(--wl-bg-dark-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 14px;
    overflow: hidden;
    margin-top: 0.5rem;
    animation: buzzCardIn-b-h41fvqx6ui 0.6s ease forwards;
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes buzzCardIn-b-h41fvqx6ui {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.buzz-card:hover[b-h41fvqx6ui] {
    border-color: rgba(var(--wl-gold-rgb), 0.45);
    box-shadow:
        0 8px 32px rgba(var(--wl-gold-rgb), 0.08),
        0 0 60px rgba(var(--wl-gold-rgb), 0.03),
        inset 0 1px 0 var(--wl-gold-bg);
}

/* Scanline overlay - subtle newspaper print texture */
.buzz-scanlines[b-h41fvqx6ui] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(var(--wl-contrast-rgb), 0.008) 2px,
        rgba(var(--wl-contrast-rgb), 0.008) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* ---- Header ---- */
.buzz-header[b-h41fvqx6ui] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.125rem;
    background: linear-gradient(135deg,
        var(--wl-gold) 0%,
        #B8942E 40%,
        var(--wl-bg-secondary) 100%);
    z-index: 2;
}

.buzz-header[b-h41fvqx6ui]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        var(--wl-gold) 0%,
        rgba(var(--wl-gold-rgb), 0.4) 60%,
        transparent 100%);
}

.buzz-logo[b-h41fvqx6ui] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.buzz-logo-icon[b-h41fvqx6ui] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border-radius: 5px;
    animation: buzzIconPulse-b-h41fvqx6ui 2.5s ease-in-out infinite;
}

@keyframes buzzIconPulse-b-h41fvqx6ui {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.buzz-logo-icon svg[b-h41fvqx6ui] {
    width: 14px;
    height: 14px;
    color: var(--wl-text-primary);
    filter: drop-shadow(0 0 4px rgba(var(--wl-contrast-rgb), 0.4));
}

.buzz-logo-text[b-h41fvqx6ui] {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    color: var(--wl-text-primary);
    text-shadow: 0 1px 8px var(--wl-shadow-color);
    line-height: 1;
}

.buzz-badge[b-h41fvqx6ui] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
    border-radius: 3px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    backdrop-filter: blur(4px);
}

/* ---- Body ---- */
.buzz-body[b-h41fvqx6ui] {
    position: relative;
    padding: 1rem 1.25rem;
    z-index: 2;
}

.buzz-text[b-h41fvqx6ui] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.92);
    line-height: 1.65;
    margin: 0;
    word-break: break-word;
}

/* @mentions inside content */
.buzz-text[b-h41fvqx6ui]  .buzz-mention {
    color: var(--wl-gold-light);
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: 0 0 12px rgba(var(--wl-gold-rgb), 0.25);
}

/* ---- Character Avatars ---- */
.buzz-characters[b-h41fvqx6ui] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.25rem 1.25rem 1rem;
    position: relative;
    z-index: 2;
}

.buzz-avatar-wrapper[b-h41fvqx6ui] {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.buzz-avatar[b-h41fvqx6ui] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.4);
    transition: all 0.3s ease;
}

.buzz-card:hover .buzz-avatar[b-h41fvqx6ui] {
    border-color: rgba(var(--wl-gold-rgb), 0.7);
}

.buzz-avatar-ring[b-h41fvqx6ui] {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid var(--wl-gold-bg-hover);
    pointer-events: none;
}

.buzz-versus[b-h41fvqx6ui] {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.15em;
    color: rgba(var(--wl-gold-rgb), 0.6);
    text-shadow: 0 0 8px var(--wl-gold-bg-hover);
    padding: 0 0.25rem;
}

/* ---- Meta Bar (heat meter + link) ---- */
.buzz-meta[b-h41fvqx6ui] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--wl-gold-bg);
    background: var(--wl-surface-primary);
    position: relative;
    z-index: 2;
}

.buzz-heat[b-h41fvqx6ui] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.buzz-heat-label[b-h41fvqx6ui] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.buzz-heat-meter[b-h41fvqx6ui] {
    display: flex;
    align-items: center;
    gap: 3px;
}

.buzz-heat-bar[b-h41fvqx6ui] {
    width: 18px;
    height: 6px;
    border-radius: 2px;
    background: var(--wl-border-medium);
    transition: all 0.4s ease;
}

.buzz-heat-bar--active[b-h41fvqx6ui] {
    animation: heatBarGlow-b-h41fvqx6ui 1.8s ease-in-out infinite alternate;
}

/* Color escalation for heat levels */
.buzz-heat-bar--level-1[b-h41fvqx6ui] {
    background: #4ADE80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.3);
}

.buzz-heat-bar--level-2[b-h41fvqx6ui] {
    background: #FBBF24;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.3);
}

.buzz-heat-bar--level-3[b-h41fvqx6ui] {
    background: #FB923C;
    box-shadow: 0 0 6px rgba(251, 146, 60, 0.3);
}

.buzz-heat-bar--level-4[b-h41fvqx6ui] {
    background: #F87171;
    box-shadow: 0 0 8px rgba(248, 113, 113, 0.4);
}

.buzz-heat-bar--level-5[b-h41fvqx6ui] {
    background: #EF4444;
    box-shadow: 0 0 10px rgba(var(--wl-red-rgb), 0.5);
}

@keyframes heatBarGlow-b-h41fvqx6ui {
    from { opacity: 0.85; }
    to { opacity: 1; }
}

.buzz-heat-value[b-h41fvqx6ui] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    letter-spacing: 0.05em;
}

/* ---- Link Button ---- */
.buzz-link[b-h41fvqx6ui] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.625rem;
    background: rgba(var(--wl-gold-rgb), 0.08);
    border: 1px solid var(--wl-gold-border);
    border-radius: 100px;
    color: var(--wl-gold);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.25s ease;
}

.buzz-link:hover[b-h41fvqx6ui] {
    background: var(--wl-gold-bg-hover);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold-light);
    transform: translateX(2px);
}

.buzz-link svg[b-h41fvqx6ui] {
    width: 13px;
    height: 13px;
    transition: transform 0.2s ease;
}

.buzz-link:hover svg[b-h41fvqx6ui] {
    transform: translateX(2px);
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .buzz-header[b-h41fvqx6ui] {
        padding: 0.625rem 1rem;
    }

    .buzz-logo-text[b-h41fvqx6ui] {
        font-size: 1rem;
        letter-spacing: 0.14em;
    }

    .buzz-badge[b-h41fvqx6ui] {
        font-size: 0.5rem;
        padding: 0.1rem 0.375rem;
    }

    .buzz-body[b-h41fvqx6ui] {
        padding: 0.875rem 1rem;
    }

    .buzz-text[b-h41fvqx6ui] {
        font-size: 0.875rem;
    }

    .buzz-characters[b-h41fvqx6ui] {
        padding: 0.25rem 1rem 0.875rem;
        gap: 0.5rem;
    }

    .buzz-avatar-wrapper[b-h41fvqx6ui] {
        width: 40px;
        height: 40px;
    }

    .buzz-avatar[b-h41fvqx6ui] {
        width: 40px;
        height: 40px;
    }

    .buzz-meta[b-h41fvqx6ui] {
        padding: 0.625rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .buzz-heat-bar[b-h41fvqx6ui] {
        width: 14px;
        height: 5px;
    }

    .buzz-link[b-h41fvqx6ui] {
        font-size: 0.625rem;
    }
}
/* /Components/Pages/Social/Buzz/BuzzComposer.razor.rz.scp.css */
/* ==========================================
   BUZZ COMPOSER - Post creation widget
   ========================================== */

.composer[b-4zlamg98bd] {
    position: relative;
    z-index: 1;
    margin-bottom: 1.5rem;
}

.composer-input-wrap[b-4zlamg98bd] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 16px;
    padding: 1rem;
    transition: border-color 0.25s ease;
}

.composer-input-wrap:focus-within[b-4zlamg98bd] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.composer-textarea[b-4zlamg98bd] {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--wl-text-primary);
    font-size: 0.9375rem;
    line-height: 1.5;
    resize: none;
    font-family: inherit;
    min-height: 4rem;
}

.composer-textarea[b-4zlamg98bd]::placeholder {
    color: var(--wl-text-muted);
}

.composer-footer[b-4zlamg98bd] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-medium);
}

.composer-error[b-4zlamg98bd] {
    font-size: 0.75rem;
    color: var(--wl-red);
    flex: 1;
}

.composer-counter[b-4zlamg98bd] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    transition: color 0.2s ease;
}

.composer-counter--warn[b-4zlamg98bd] {
    color: #F59E0B;
}

.composer-counter--error[b-4zlamg98bd] {
    color: var(--wl-red);
}

.composer-post-btn[b-4zlamg98bd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    background: var(--wl-gold);
    color: #000;
    border: none;
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 80px;
    min-height: 36px;
}

.composer-post-btn:hover:not(:disabled)[b-4zlamg98bd] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.composer-post-btn:disabled[b-4zlamg98bd] {
    opacity: 0.4;
    cursor: not-allowed;
}

.composer-spinner[b-4zlamg98bd] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: composerSpin-b-4zlamg98bd 0.8s linear infinite;
}

@keyframes composerSpin-b-4zlamg98bd {
    to { transform: rotate(360deg); }
}

.composer-cooldown[b-4zlamg98bd] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.25rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 16px;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

.composer-cooldown svg[b-4zlamg98bd] {
    width: 1.125rem;
    height: 1.125rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.composer-ip-cost[b-4zlamg98bd] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    padding: 0.1875rem 0.5rem;
    border-radius: 100px;
    margin-right: auto;
}

.composer-ip-cost svg[b-4zlamg98bd] {
    width: 0.75rem;
    height: 0.75rem;
}

.composer-ip-cost--insufficient[b-4zlamg98bd] {
    color: var(--wl-red);
    background: rgba(var(--wl-red-rgb), 0.1);
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .composer-input-wrap[b-4zlamg98bd] {
        padding: 0.75rem;
        border-radius: 12px;
    }

    .composer-textarea[b-4zlamg98bd] {
        font-size: 0.875rem;
        min-height: 3.5rem;
    }

    .composer-post-btn[b-4zlamg98bd] {
        padding: 0.4375rem 1rem;
        font-size: 0.6875rem;
    }
}
/* /Components/Pages/Social/Buzz/BuzzPostCard.razor.rz.scp.css */
/* ==========================================
   BUZZ POST CARD - Individual post display
   ========================================== */

.post-card[b-0x84cgdzww] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 16px;
    padding: 1.25rem;
    transition: border-color 0.25s ease;
}

.post-card:hover[b-0x84cgdzww] {
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
}

/* === AUTHOR === */
.post-author[b-0x84cgdzww] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.post-avatar[b-0x84cgdzww] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.post-avatar--star[b-0x84cgdzww] {
    border: 2px solid rgba(var(--wl-gold-rgb), 0.3);
}

.post-avatar--fan[b-0x84cgdzww] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.post-avatar-initial[b-0x84cgdzww] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    color: var(--wl-text-primary);
    line-height: 1;
    text-transform: uppercase;
}

.post-avatar--system[b-0x84cgdzww] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
}

.post-avatar--system svg[b-0x84cgdzww] {
    width: 20px;
    height: 20px;
}

.post-author-info[b-0x84cgdzww] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.post-author-name[b-0x84cgdzww] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    line-height: 1.35;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}
.post-author-name .author-link[b-0x84cgdzww] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
}
.post-author-name .author-link:hover[b-0x84cgdzww] {
    color: var(--wl-gold);
    text-decoration: underline;
}

.post-author-time[b-0x84cgdzww] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s ease;
}

.post-author-time:hover[b-0x84cgdzww] {
    color: var(--wl-gold);
}

.post-card--permalink-target[b-0x84cgdzww] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    box-shadow: 0 0 0 1px rgba(var(--wl-gold-rgb), 0.16), 0 16px 40px rgba(0, 0, 0, 0.18);
}

/* === BADGES === */
.post-badge[b-0x84cgdzww] {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
}

.post-badge--fan[b-0x84cgdzww] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    color: var(--wl-purple);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.25);
}

.post-badge--system[b-0x84cgdzww] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
}

/* Press corps: journalist-authored fan posts get a newsprint-cyan identity */
.post-avatar--journalist[b-0x84cgdzww] {
    background: rgba(var(--wl-cyan-rgb), 0.15);
    border: 1px solid rgba(var(--wl-cyan-rgb), 0.35);
    color: rgb(var(--wl-cyan-rgb));
}

.post-avatar--journalist svg[b-0x84cgdzww] {
    width: 20px;
    height: 20px;
}

.post-badge--journalist[b-0x84cgdzww] {
    background: rgba(var(--wl-cyan-rgb), 0.12);
    color: rgb(var(--wl-cyan-rgb));
    border: 1px solid rgba(var(--wl-cyan-rgb), 0.25);
}

/* === CONTENT === */
.post-content[b-0x84cgdzww] {
    margin-bottom: 1rem;
}

.post-content p[b-0x84cgdzww] {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--wl-text-primary);
    word-break: break-word;
}

/* === FAN ART IMAGE === */
.buzz-post-image[b-0x84cgdzww] {
    margin-top: 0.75rem;
    border-radius: 12px;
    overflow: hidden;
}

.buzz-post-image[b-0x84cgdzww]  img {
    width: 100%;
    height: auto;
    display: block;
}

/* === EFFECT BADGE === */
.post-effect[b-0x84cgdzww] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    margin-top: 0.25rem;
}

.post-effect--positive[b-0x84cgdzww] {
    background: rgba(34, 197, 94, 0.1);
    color: #22C55E;
}

.post-effect--negative[b-0x84cgdzww] {
    background: rgba(var(--wl-red-rgb), 0.1);
    color: var(--wl-red);
}

.post-effect--neutral[b-0x84cgdzww] {
    background: rgba(var(--wl-text-muted-rgb, 128, 128, 128), 0.1);
    color: var(--wl-text-muted);
}

.post-effect-icon[b-0x84cgdzww] {
    font-size: 0.625rem;
}

.post-effect-label[b-0x84cgdzww] {
    white-space: nowrap;
}

/* === ACTION BUTTONS === */
.post-actions[b-0x84cgdzww] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-medium);
}

.action-btn[b-0x84cgdzww] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 100px;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.action-btn:hover:not(:disabled)[b-0x84cgdzww] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: var(--wl-border-medium);
    color: var(--wl-text-secondary);
}

.action-btn:disabled[b-0x84cgdzww] {
    opacity: 0.5;
    cursor: not-allowed;
}

.action-btn-icon[b-0x84cgdzww] {
    display: flex;
    align-items: center;
}

.action-btn-icon svg[b-0x84cgdzww] {
    width: 16px;
    height: 16px;
}

.action-btn-label[b-0x84cgdzww] {
    display: inline;
}

.action-btn-count[b-0x84cgdzww] {
    font-weight: 600;
    color: var(--wl-text-secondary);
}

/* Active states */
.action-btn--active-like[b-0x84cgdzww] {
    color: var(--wl-red);
    background: rgba(var(--wl-red-rgb), 0.08);
    border-color: rgba(var(--wl-red-rgb), 0.2);
}

.action-btn--active-like:hover:not(:disabled)[b-0x84cgdzww] {
    color: var(--wl-red);
    background: rgba(var(--wl-red-rgb), 0.12);
    border-color: rgba(var(--wl-red-rgb), 0.3);
}

.action-btn--active-like .action-btn-count[b-0x84cgdzww] {
    color: var(--wl-red);
}

.action-btn--active-repost[b-0x84cgdzww] {
    color: #22C55E;
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
}

.action-btn--active-repost:hover:not(:disabled)[b-0x84cgdzww] {
    color: #22C55E;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
}

.action-btn--active-repost .action-btn-count[b-0x84cgdzww] {
    color: #22C55E;
}

.action-btn--active-reply[b-0x84cgdzww] {
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.08);
    border-color: rgba(var(--wl-gold-rgb), 0.2);
}

/* DM / message link styled as an action button */
.action-btn--message[b-0x84cgdzww] {
    text-decoration: none;
}

.action-btn--message:hover[b-0x84cgdzww] {
    color: #3B82F6;
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.2);
}

.action-btn--follow[b-0x84cgdzww] {
    margin-left: auto;
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.16);
    background: rgba(var(--wl-gold-rgb), 0.055);
}

.action-btn--follow:hover:not(:disabled)[b-0x84cgdzww] {
    color: var(--wl-gold-light);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.11);
}

.action-btn--active-follow[b-0x84cgdzww] {
    color: rgb(var(--wl-cyan-rgb));
    border-color: rgba(var(--wl-cyan-rgb), 0.24);
    background: rgba(var(--wl-cyan-rgb), 0.08);
}

.action-btn--active-follow:hover:not(:disabled)[b-0x84cgdzww] {
    color: rgb(var(--wl-cyan-rgb));
    border-color: rgba(var(--wl-cyan-rgb), 0.34);
    background: rgba(var(--wl-cyan-rgb), 0.12);
}

.buzz-follow-spinner[b-0x84cgdzww] {
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: buzz-follow-spin-b-0x84cgdzww 700ms linear infinite;
}

@keyframes buzz-follow-spin-b-0x84cgdzww {
    to { transform: rotate(360deg); }
}

/* === REPLY COMPOSER === */
.post-reply-composer[b-0x84cgdzww] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-medium);
}

/* === THREAD TOGGLE === */
.post-thread-toggle[b-0x84cgdzww] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    padding: 0.375rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 100px;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all 0.25s ease;
}

.post-thread-toggle:hover[b-0x84cgdzww] {
    background: rgba(var(--wl-gold-rgb), 0.08);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.post-thread-toggle svg[b-0x84cgdzww] {
    width: 14px;
    height: 14px;
}

/* === THREAD === */
.post-thread[b-0x84cgdzww] {
    margin-top: 0.75rem;
    padding-left: 1.25rem;
    border-left: 2px solid rgba(var(--wl-gold-rgb), 0.2);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.post-thread[b-0x84cgdzww]  .post-card {
    border-radius: 12px;
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .post-card[b-0x84cgdzww] {
        padding: 1rem;
        border-radius: 12px;
    }

    .post-avatar[b-0x84cgdzww] {
        width: 36px;
        height: 36px;
    }

    .post-avatar--system[b-0x84cgdzww] {
        width: 36px;
        height: 36px;
    }

    .post-avatar--system svg[b-0x84cgdzww] {
        width: 18px;
        height: 18px;
    }

    .post-author-info[b-0x84cgdzww] {
        gap: 0.375rem;
    }

    .post-author-name[b-0x84cgdzww] {
        font-size: 0.8125rem;
    }

    .post-content p[b-0x84cgdzww] {
        font-size: 0.875rem;
    }

    .post-actions[b-0x84cgdzww] {
        gap: 0.125rem;
    }

    .action-btn[b-0x84cgdzww] {
        padding: 0.3125rem 0.5rem;
        font-size: 0.625rem;
    }

    .action-btn-icon svg[b-0x84cgdzww] {
        width: 14px;
        height: 14px;
    }

    .action-btn-label[b-0x84cgdzww] {
        display: none;
    }

    .post-thread[b-0x84cgdzww] {
        padding-left: 0.75rem;
    }
}

/* #tags inside Buzz post content link to the Buzz tag filter (rendered via MarkdownLiteParser). */
.post-content[b-0x84cgdzww]  .board-tag {
    color: var(--wl-purple);
    font-weight: 500;
    text-decoration: none;
}
.post-content[b-0x84cgdzww]  .board-tag:hover {
    color: var(--wl-purple);
    text-decoration: underline;
}
.post-content[b-0x84cgdzww]  .board-mention {
    color: var(--wl-gold);
    font-weight: 500;
}
/* /Components/Pages/Social/Buzz/Dms.razor.rz.scp.css */
/* ==========================================
   BUZZ DMs - compact private fan chat
   (child of the Buzz cinematic style)
   ========================================== */

.dms[b-0nmzn5wbid] {
    position: relative;
    min-height: 100vh;
    padding: 1.5rem;
    overflow: hidden;
    max-width: 920px;
    margin: 0 auto;
}

/* === ATMOSPHERE === */
.dms-atmosphere[b-0nmzn5wbid] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.dms-orb[b-0nmzn5wbid] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.22;
}

.dms-orb--gold[b-0nmzn5wbid] {
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    top: -200px;
    right: -120px;
    animation: dmsFloat-b-0nmzn5wbid 24s ease-in-out infinite;
}

.dms-orb--purple[b-0nmzn5wbid] {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, var(--wl-purple) 0%, transparent 70%);
    bottom: -160px;
    left: -120px;
    animation: dmsFloat-b-0nmzn5wbid 30s ease-in-out infinite reverse;
}

@keyframes dmsFloat-b-0nmzn5wbid {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(22px, -14px) scale(1.04); }
    66% { transform: translate(-14px, 22px) scale(0.96); }
}

/* === ANIMATIONS === */
.animate-fade-in[b-0nmzn5wbid] {
    animation: dmsFadeIn-b-0nmzn5wbid 0.5s ease-out forwards;
    opacity: 0;
}

.delay-100[b-0nmzn5wbid] { animation-delay: 0.1s; }
.delay-200[b-0nmzn5wbid] { animation-delay: 0.2s; }

@keyframes dmsFadeIn-b-0nmzn5wbid {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === HEADER === */
.dms-header[b-0nmzn5wbid] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.dms-header-content[b-0nmzn5wbid] {
    flex: 1;
}

.dms-header-tag[b-0nmzn5wbid] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 0.5rem;
}

.dms-header-title[b-0nmzn5wbid] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.25rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.dms-back-btn[b-0nmzn5wbid] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.dms-back-btn:hover[b-0nmzn5wbid] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.dms-back-btn svg[b-0nmzn5wbid] {
    width: 16px;
    height: 16px;
}

/* === LAYOUT === */
.dms-layout[b-0nmzn5wbid] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

/* === SHARED AVATAR === */
.dms-avatar[b-0nmzn5wbid] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.dms-avatar--sm[b-0nmzn5wbid] {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
}

/* === ROSTER === */
.dms-roster[b-0nmzn5wbid] {
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 16px;
    padding: 0.5rem;
    max-height: 65vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

.dms-roster-list[b-0nmzn5wbid] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dms-roster-row[b-0nmzn5wbid] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.dms-roster-row:hover[b-0nmzn5wbid] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.dms-roster-row.active[b-0nmzn5wbid] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
}

.dms-roster-main[b-0nmzn5wbid] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
}

.dms-roster-top[b-0nmzn5wbid] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.dms-roster-name[b-0nmzn5wbid] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dms-roster-time[b-0nmzn5wbid] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    color: var(--wl-text-muted);
    flex-shrink: 0;
}

.dms-roster-sub[b-0nmzn5wbid] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.dms-unread-dot[b-0nmzn5wbid] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--wl-gold);
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(var(--wl-gold-rgb), 0.5);
}

.dms-roster-preview[b-0nmzn5wbid] {
    font-size: 0.78rem;
    color: var(--wl-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* === ROSTER EMPTY === */
.dms-roster-empty[b-0nmzn5wbid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2.5rem 1.25rem;
}

.dms-roster-empty-icon[b-0nmzn5wbid] {
    width: 40px;
    height: 40px;
    color: rgba(var(--wl-contrast-rgb), 0.25);
}

.dms-roster-empty-icon svg[b-0nmzn5wbid] {
    width: 100%;
    height: 100%;
}

.dms-roster-empty-text[b-0nmzn5wbid] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--wl-text-secondary);
    line-height: 1.5;
}

/* === THREAD === */
.dms-thread[b-0nmzn5wbid] {
    display: flex;
    flex-direction: column;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 16px;
    /* Fixed-height pane: pinned header + internally-scrolling messages + pinned composer,
       mirroring the full Messenger conversation. min-height floors it on short viewports. */
    height: calc(100dvh - 16rem);
    min-height: 360px;
    overflow: hidden;
}

.dms-thread-head[b-0nmzn5wbid] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wl-border-medium);
    flex-shrink: 0;
}

.dms-thread-back[b-0nmzn5wbid] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    color: var(--wl-text-secondary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.dms-thread-back:hover[b-0nmzn5wbid] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: var(--wl-text-primary);
}

.dms-thread-back svg[b-0nmzn5wbid] {
    width: 16px;
    height: 16px;
}

.dms-thread-name[b-0nmzn5wbid] {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === MESSAGES === */
.dms-messages[b-0nmzn5wbid] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    flex: 1;
    /* min-height: 0 lets the flex child shrink below its content height so it scrolls
       internally instead of pushing the composer off-screen. */
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}

.dms-thread-empty[b-0nmzn5wbid] {
    margin: auto;
    text-align: center;
    font-size: 0.82rem;
    color: var(--wl-text-muted);
    padding: 2rem 1rem;
}

.dms-bubble[b-0nmzn5wbid] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    max-width: 78%;
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
}

.dms-bubble--me[b-0nmzn5wbid] {
    align-self: flex-end;
    background: rgba(var(--wl-gold-rgb), 0.16);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-bottom-right-radius: 4px;
}

.dms-bubble--fan[b-0nmzn5wbid] {
    align-self: flex-start;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-bottom-left-radius: 4px;
}

.dms-bubble-text[b-0nmzn5wbid] {
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--wl-text-primary);
    white-space: pre-wrap;
    word-break: break-word;
}

.dms-bubble-time[b-0nmzn5wbid] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.03em;
    color: var(--wl-text-muted);
    align-self: flex-end;
}

/* === TYPING INDICATOR === */
.dms-bubble--typing[b-0nmzn5wbid] {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.dms-typing[b-0nmzn5wbid] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.dms-typing span[b-0nmzn5wbid] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--wl-text-muted);
    animation: dmsTyping-b-0nmzn5wbid 1.2s infinite ease-in-out;
}

.dms-typing span:nth-child(2)[b-0nmzn5wbid] { animation-delay: 0.15s; }
.dms-typing span:nth-child(3)[b-0nmzn5wbid] { animation-delay: 0.3s; }

@keyframes dmsTyping-b-0nmzn5wbid {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

.dms-typing-label[b-0nmzn5wbid] {
    font-size: 0.72rem;
    font-style: italic;
    color: var(--wl-text-muted);
}

/* === COMPOSER === */
.dms-composer[b-0nmzn5wbid] {
    padding: 0.75rem 1rem 1rem;
    border-top: 1px solid var(--wl-border-medium);
    flex-shrink: 0;
}

/* Small, unobtrusive red privacy note: DMs are private, but fans may gossip on Buzz. */
.dms-privacy-warn[b-0nmzn5wbid] {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: var(--wl-red);
}

.dms-privacy-warn svg[b-0nmzn5wbid] {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    margin-top: 0.08rem;
}

.dms-textarea[b-0nmzn5wbid] {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--wl-text-primary);
    font-size: 0.9rem;
    line-height: 1.5;
    resize: none;
    font-family: inherit;
    min-height: 2.75rem;
}

.dms-textarea[b-0nmzn5wbid]::placeholder {
    color: var(--wl-text-muted);
}

.dms-textarea:disabled[b-0nmzn5wbid] {
    opacity: 0.6;
}

.dms-composer-footer[b-0nmzn5wbid] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.625rem;
    margin-top: 0.5rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--wl-border-medium);
}

.dms-cost[b-0nmzn5wbid] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    padding: 0.1875rem 0.5rem;
    border-radius: 100px;
    margin-right: auto;
}

.dms-cost svg[b-0nmzn5wbid] {
    width: 0.75rem;
    height: 0.75rem;
}

.dms-cost--insufficient[b-0nmzn5wbid] {
    color: var(--wl-red);
    background: rgba(var(--wl-red-rgb), 0.1);
}

/* Char counter - mirrors BuzzComposer's amber/red near-the-limit treatment. */
.dms-counter[b-0nmzn5wbid] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    transition: color 0.2s ease;
}

.dms-counter--warn[b-0nmzn5wbid] {
    color: #F59E0B;
}

.dms-counter--error[b-0nmzn5wbid] {
    color: var(--wl-red);
}

.dms-topup[b-0nmzn5wbid] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wl-red);
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--wl-red-rgb), 0.5);
}

.dms-topup:hover[b-0nmzn5wbid] {
    color: var(--wl-text-primary);
}

.dms-send-btn[b-0nmzn5wbid] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1.25rem;
    background: var(--wl-gold);
    color: #000;
    border: none;
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 80px;
    min-height: 36px;
}

.dms-send-btn:hover:not(:disabled)[b-0nmzn5wbid] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.dms-send-btn:disabled[b-0nmzn5wbid] {
    opacity: 0.4;
    cursor: not-allowed;
}

.dms-spinner[b-0nmzn5wbid] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: dmsSpin-b-0nmzn5wbid 0.8s linear infinite;
}

@keyframes dmsSpin-b-0nmzn5wbid {
    to { transform: rotate(360deg); }
}

/* === PLACEHOLDER (no thread selected, desktop) === */
.dms-thread--placeholder[b-0nmzn5wbid] {
    align-items: center;
    justify-content: center;
}

.dms-placeholder[b-0nmzn5wbid] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2.5rem 1.5rem;
}

.dms-placeholder-icon[b-0nmzn5wbid] {
    width: 48px;
    height: 48px;
    color: rgba(var(--wl-contrast-rgb), 0.2);
}

.dms-placeholder-icon svg[b-0nmzn5wbid] {
    width: 100%;
    height: 100%;
}

.dms-placeholder-text[b-0nmzn5wbid] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--wl-text-muted);
    max-width: 260px;
    line-height: 1.5;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .dms[b-0nmzn5wbid] {
        padding: 1rem;
    }

    .dms-header-title[b-0nmzn5wbid] {
        font-size: 1.875rem;
    }

    .dms-layout[b-0nmzn5wbid] {
        grid-template-columns: minmax(0, 1fr);
    }

    .dms-roster[b-0nmzn5wbid] {
        max-height: none;
    }

    /* Single-pane on mobile: roster OR the open thread, never both. */
    .dms-layout--thread-open .dms-roster[b-0nmzn5wbid] {
        display: none;
    }

    .dms-thread-back[b-0nmzn5wbid] {
        display: inline-flex;
    }
}
/* /Components/Pages/Social/Buzz/Index.razor.rz.scp.css */
/* ==========================================
   BUZZ FEED - AAA+++ PREMIUM DESIGN
   ========================================== */

.buzz[b-bigteb4w5b] {
    position: relative;
    min-height: 100vh;
    padding: 1.5rem;
    overflow: hidden;
    max-width: 680px;
    margin: 0 auto;
}

/* === CINEMATIC ATMOSPHERE === */
.buzz-atmosphere[b-bigteb4w5b] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.buzz-gradient-orb[b-bigteb4w5b] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
}

.buzz-gradient-orb--gold[b-bigteb4w5b] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    animation: buzzFloat-b-bigteb4w5b 22s ease-in-out infinite;
}

.buzz-gradient-orb--purple[b-bigteb4w5b] {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, var(--wl-purple) 0%, transparent 70%);
    bottom: -150px;
    left: -100px;
    animation: buzzFloat-b-bigteb4w5b 28s ease-in-out infinite reverse;
}

@keyframes buzzFloat-b-bigteb4w5b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(25px, -15px) scale(1.04); }
    66% { transform: translate(-15px, 25px) scale(0.96); }
}

.buzz-scanline[b-bigteb4w5b] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-gold-rgb), 0.015) 2px,
        rgba(var(--wl-gold-rgb), 0.015) 4px
    );
}

.buzz-noise[b-bigteb4w5b] {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* === ANIMATIONS === */
.animate-fade-in[b-bigteb4w5b] {
    animation: buzzFadeIn-b-bigteb4w5b 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100[b-bigteb4w5b] { animation-delay: 0.1s; }
.delay-200[b-bigteb4w5b] { animation-delay: 0.2s; }
.delay-300[b-bigteb4w5b] { animation-delay: 0.3s; }

@keyframes buzzFadeIn-b-bigteb4w5b {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === HEADER === */
.buzz-header[b-bigteb4w5b] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.buzz-header-content[b-bigteb4w5b] {
    flex: 1;
}

.buzz-header-tag[b-bigteb4w5b] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 0.5rem;
}

.buzz-header-title[b-bigteb4w5b] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.buzz-fandom-wars-link[b-bigteb4w5b] {
    display: inline-block;
    margin-top: .55rem;
    color: #fb923c;
    font-family: 'JetBrains Mono', monospace;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-decoration: none;
    text-transform: uppercase;
}

.buzz-fandom-wars-link:hover[b-bigteb4w5b] {
    color: #fdba74;
    text-decoration: underline;
}

.buzz-back-btn[b-bigteb4w5b] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.buzz-back-btn:hover[b-bigteb4w5b] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.buzz-back-btn svg[b-bigteb4w5b] {
    width: 16px;
    height: 16px;
}

/* === LOADING === */
.buzz-loading[b-bigteb4w5b] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1.25rem;
}

.buzz-loading-ring[b-bigteb4w5b] {
    width: 48px;
    height: 48px;
    border: 2.5px solid var(--wl-gold-bg-hover);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: buzzSpin-b-bigteb4w5b 1s linear infinite;
}

@keyframes buzzSpin-b-bigteb4w5b {
    to { transform: rotate(360deg); }
}

.buzz-loading-text[b-bigteb4w5b] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.3em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.buzz-loading-spinner[b-bigteb4w5b] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: buzzSpin-b-bigteb4w5b 0.8s linear infinite;
}

/* === LOCKED STATE === */
.buzz-locked[b-bigteb4w5b] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 20px;
}

.buzz-locked-icon[b-bigteb4w5b] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    color: var(--wl-gold);
    opacity: 0.5;
}

.buzz-locked-icon svg[b-bigteb4w5b] {
    width: 100%;
    height: 100%;
}

.buzz-locked-title[b-bigteb4w5b] {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    margin: 0 0 0.5rem;
}

.buzz-locked-desc[b-bigteb4w5b] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    max-width: 360px;
    margin: 0 auto;
    line-height: 1.6;
}

.buzz-readonly[b-bigteb4w5b] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    background: rgba(var(--wl-gold-rgb), 0.07);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 8px;
}

.buzz-readonly-icon[b-bigteb4w5b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-radius: 50%;
    flex-shrink: 0;
}

.buzz-readonly-icon svg[b-bigteb4w5b] {
    width: 20px;
    height: 20px;
}

.buzz-readonly-title[b-bigteb4w5b] {
    margin: 0 0 0.2rem;
    color: var(--wl-text-primary);
    font-size: 0.9rem;
    font-weight: 700;
}

.buzz-readonly-desc[b-bigteb4w5b] {
    margin: 0;
    color: var(--wl-text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
}

/* === EMPTY STATE === */
.buzz-empty[b-bigteb4w5b] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 20px;
}

.buzz-empty-icon[b-bigteb4w5b] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    color: rgba(var(--wl-contrast-rgb), 0.2);
}

.buzz-empty-icon svg[b-bigteb4w5b] {
    width: 100%;
    height: 100%;
}

.buzz-empty-title[b-bigteb4w5b] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    font-weight: 400;
    max-width: 300px;
    margin: 0 auto;
    line-height: 1.5;
}

/* === FEED FILTERS === */
.buzz-filters[b-bigteb4w5b] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.buzz-filters[b-bigteb4w5b]::-webkit-scrollbar {
    display: none;
}

.buzz-filter-btn[b-bigteb4w5b] {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 100px;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.buzz-filter-btn:hover[b-bigteb4w5b] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    color: rgba(var(--wl-contrast-rgb), 0.75);
}

.buzz-filter-btn.active[b-bigteb4w5b] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
    box-shadow: 0 0 12px rgba(var(--wl-gold-rgb), 0.08);
}

/* === SEARCH === */
.buzz-search[b-bigteb4w5b] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.5rem;
    margin: -0.25rem 0 1.25rem;
}

.buzz-search-field[b-bigteb4w5b] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    padding: 0 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

.buzz-search-field:focus-within[b-bigteb4w5b] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.08);
}

.buzz-search-field svg[b-bigteb4w5b] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.buzz-search-field input[b-bigteb4w5b] {
    width: 100%;
    min-width: 0;
    height: 42px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
}

.buzz-search-field input[b-bigteb4w5b]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

.buzz-search-submit[b-bigteb4w5b],
.buzz-search-clear[b-bigteb4w5b] {
    height: 42px;
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.buzz-search-submit[b-bigteb4w5b] {
    padding: 0 1rem;
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.buzz-search-submit:hover:not(:disabled)[b-bigteb4w5b] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    background: rgba(var(--wl-gold-rgb), 0.15);
}

.buzz-search-submit:disabled[b-bigteb4w5b] {
    cursor: wait;
    opacity: 0.65;
}

.buzz-search-clear[b-bigteb4w5b] {
    display: grid;
    place-items: center;
    width: 42px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    color: rgba(var(--wl-contrast-rgb), 0.45);
}

.buzz-search-clear:hover[b-bigteb4w5b] {
    background: rgba(var(--wl-contrast-rgb), 0.07);
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.buzz-search-clear svg[b-bigteb4w5b] {
    width: 16px;
    height: 16px;
}

/* === FEED === */
.buzz-feed[b-bigteb4w5b] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* === LOAD MORE === */
.buzz-load-more[b-bigteb4w5b] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding-bottom: 2rem;
}

.buzz-load-more-btn[b-bigteb4w5b] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
}

.buzz-load-more-btn:hover:not(:disabled)[b-bigteb4w5b] {
    background: rgba(var(--wl-gold-rgb), 0.08);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
    transform: translateY(-1px);
}

.buzz-load-more-btn:disabled[b-bigteb4w5b] {
    cursor: not-allowed;
    opacity: 0.6;
}

.buzz-load-more-btn svg[b-bigteb4w5b] {
    width: 16px;
    height: 16px;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .buzz[b-bigteb4w5b] {
        padding: 1rem;
    }

    .buzz-header[b-bigteb4w5b] {
        flex-direction: column;
        align-items: stretch;
    }

    .buzz-back-btn[b-bigteb4w5b] {
        align-self: flex-start;
    }

    .buzz-header-title[b-bigteb4w5b] {
        font-size: 2rem;
    }

    .buzz-feed[b-bigteb4w5b] {
        gap: 0.75rem;
    }

    .buzz-filter-btn[b-bigteb4w5b] {
        padding: 0.4rem 0.75rem;
        font-size: 0.625rem;
    }

    .buzz-search[b-bigteb4w5b] {
        grid-template-columns: minmax(0, 1fr) 42px;
    }

    .buzz-search-submit[b-bigteb4w5b] {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .buzz[b-bigteb4w5b] {
        padding: 2rem;
    }
}

/* Active #tag filter banner (when viewing /social/buzz/tag/{tag}) */
.buzz-tagfilter[b-bigteb4w5b] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.buzz-tagfilter-label[b-bigteb4w5b] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wl-text-muted);
}

.buzz-tagfilter-tag[b-bigteb4w5b] {
    font-weight: 700;
    color: var(--wl-gold);
}

.buzz-tagfilter-clear[b-bigteb4w5b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    color: var(--wl-text-secondary);
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease;
}

.buzz-tagfilter-clear:hover[b-bigteb4w5b] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: var(--wl-text-primary);
}

.buzz-tagfilter-clear svg[b-bigteb4w5b] {
    width: 0.9rem;
    height: 0.9rem;
}
/* /Components/Pages/Social/Buzz/PostDetail.razor.rz.scp.css */
.buzz-detail[b-c6ux44xrjh] {
    position: relative;
    min-height: 100vh;
    max-width: 680px;
    margin: 0 auto;
    padding: 1.5rem;
    overflow: hidden;
}

.buzz-detail-atmosphere[b-c6ux44xrjh] {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.buzz-detail-orb[b-c6ux44xrjh] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.22;
}

.buzz-detail-orb--gold[b-c6ux44xrjh] {
    width: 500px;
    height: 500px;
    top: -220px;
    right: -120px;
    background: radial-gradient(circle, var(--wl-gold), transparent 70%);
}

.buzz-detail-orb--purple[b-c6ux44xrjh] {
    width: 450px;
    height: 450px;
    bottom: -180px;
    left: -120px;
    background: radial-gradient(circle, var(--wl-purple), transparent 70%);
}

.buzz-detail-scanline[b-c6ux44xrjh] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-gold-rgb), 0.015) 2px,
        rgba(var(--wl-gold-rgb), 0.015) 4px);
}

.buzz-detail-back[b-c6ux44xrjh] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.buzz-detail-back:hover[b-c6ux44xrjh] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-gold);
}

.buzz-detail-back svg[b-c6ux44xrjh] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.buzz-detail-loading[b-c6ux44xrjh],
.buzz-detail-empty[b-c6ux44xrjh] {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 40vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: var(--wl-text-muted);
    text-align: center;
}

.buzz-detail-loading[b-c6ux44xrjh] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.3em;
}

.buzz-detail-loading-ring[b-c6ux44xrjh] {
    width: 46px;
    height: 46px;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.16);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: buzz-detail-spin-b-c6ux44xrjh 1s linear infinite;
}

@keyframes buzz-detail-spin-b-c6ux44xrjh {
    to { transform: rotate(360deg); }
}

.buzz-detail-empty[b-c6ux44xrjh] {
    min-height: 280px;
    padding: 3rem 2rem;
    border: 1px dashed var(--wl-border-medium);
    border-radius: 20px;
    background: rgba(var(--wl-contrast-rgb), 0.02);
}

.buzz-detail-empty svg[b-c6ux44xrjh] {
    width: 56px;
    height: 56px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.45;
}

.buzz-detail-empty h1[b-c6ux44xrjh] {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}

.buzz-detail-content[b-c6ux44xrjh] {
    position: relative;
    z-index: 1;
    padding-bottom: 2rem;
}

@media (max-width: 640px) {
    .buzz-detail[b-c6ux44xrjh] {
        padding: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .buzz-detail-loading-ring[b-c6ux44xrjh] {
        animation: none;
    }
}
/* /Components/Pages/Social/Collab/Invite.razor.rz.scp.css */
/* ============================================
   COLLAB INVITE - AAA+++ Partnership Vibes
   Theme: Connection, synergy, purple/blue gradient
   ============================================ */

.collab-invite[b-jgyhb9pqbk] {
    position: relative;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    max-width: 640px;
    margin: 0 auto;
}

/* ============================================
   CINEMATIC ATMOSPHERE
   ============================================ */

.collab-atmosphere[b-jgyhb9pqbk] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.collab-gradient-orb[b-jgyhb9pqbk] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: collab-pulse-b-jgyhb9pqbk 8s ease-in-out infinite;
}

.collab-gradient-orb--purple[b-jgyhb9pqbk] {
    width: 500px;
    height: 500px;
    top: -200px;
    right: -150px;
    background: radial-gradient(circle, rgba(var(--wl-purple-rgb), 0.4) 0%, transparent 70%);
    animation-delay: 0s;
}

.collab-gradient-orb--blue[b-jgyhb9pqbk] {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%);
    animation-delay: 4s;
}

@keyframes collab-pulse-b-jgyhb9pqbk {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

.collab-scanline[b-jgyhb9pqbk] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
}

.collab-noise[b-jgyhb9pqbk] {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.5;
}

/* ============================================
   LOADING & ERROR STATES
   ============================================ */

.collab-loading[b-jgyhb9pqbk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.collab-loading-ring[b-jgyhb9pqbk] {
    width: 64px;
    height: 64px;
    border: 3px solid rgba(var(--wl-purple-rgb), 0.2);
    border-top-color: var(--wl-purple);
    border-radius: 50%;
    animation: spin-b-jgyhb9pqbk 0.8s linear infinite;
}

@keyframes spin-b-jgyhb9pqbk {
    to { transform: rotate(360deg); }
}

.collab-loading-text[b-jgyhb9pqbk] {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(var(--wl-purple-rgb), 0.8);
}

.collab-error[b-jgyhb9pqbk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    gap: 1rem;
}

.collab-error-icon[b-jgyhb9pqbk] {
    width: 80px;
    height: 80px;
    color: rgba(var(--wl-purple-rgb), 0.6);
}

.collab-error-icon svg[b-jgyhb9pqbk] {
    width: 100%;
    height: 100%;
}

.collab-error-title[b-jgyhb9pqbk] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0;
}

.collab-error-message[b-jgyhb9pqbk] {
    color: var(--wl-text-muted);
    margin: 0 0 1rem 0;
    max-width: 300px;
}

/* ============================================
   HEADER
   ============================================ */

.collab-header[b-jgyhb9pqbk] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.collab-back-btn[b-jgyhb9pqbk] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.collab-back-btn:hover[b-jgyhb9pqbk] {
    background: var(--wl-border-subtle);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    color: var(--wl-text-primary);
}

.collab-back-btn svg[b-jgyhb9pqbk] {
    width: 20px;
    height: 20px;
}

.collab-header-content[b-jgyhb9pqbk] {
    flex: 1;
}

.collab-header-tag[b-jgyhb9pqbk] {
    text-transform: uppercase;
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(var(--wl-purple-rgb), 0.8);
    margin-bottom: 0.25rem;
}

.collab-header-title[b-jgyhb9pqbk] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
}

.collab-header-line[b-jgyhb9pqbk] {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--wl-purple-rgb), 0.5) 0%, transparent 100%);
    border-radius: 1px;
}

/* ============================================
   PARTNER CARD
   ============================================ */

.collab-partner-section[b-jgyhb9pqbk] {
    margin-bottom: 2rem;
}

.collab-partner-card[b-jgyhb9pqbk] {
    position: relative;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg,
        rgba(var(--wl-purple-rgb), 0.6) 0%,
        rgba(59, 130, 246, 0.3) 50%,
        rgba(var(--wl-purple-rgb), 0.4) 100%);
    overflow: hidden;
}

.collab-partner-glow[b-jgyhb9pqbk] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(var(--wl-purple-rgb), 0.2) 0%, transparent 50%);
    pointer-events: none;
}

.collab-partner-inner[b-jgyhb9pqbk] {
    position: relative;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.98) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.95) 100%);
    border-radius: 18px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Connection Badge */
.collab-connection-badge[b-jgyhb9pqbk] {
    text-transform: uppercase;
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-purple) 0%, #7C3AED 100%);
    border-radius: 0 0 12px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: white;
    box-shadow: 0 4px 20px rgba(var(--wl-purple-rgb), 0.4);
}

.collab-connection-badge svg[b-jgyhb9pqbk] {
    width: 16px;
    height: 16px;
}

/* Avatar */
.collab-partner-avatar-container[b-jgyhb9pqbk] {
    position: relative;
    width: 120px;
    height: 120px;
}

.collab-partner-avatar-ring[b-jgyhb9pqbk] {
    position: absolute;
    inset: -4px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wl-purple), #3B82F6) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ring-pulse-b-jgyhb9pqbk 2s ease-in-out infinite;
}

@keyframes ring-pulse-b-jgyhb9pqbk {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.02); }
}

.collab-partner-avatar[b-jgyhb9pqbk] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(var(--wl-bg-modal-deep-rgb), 0.95);
}

/* Partner Info */
.collab-partner-info[b-jgyhb9pqbk] {
    text-align: center;
}

.collab-partner-name[b-jgyhb9pqbk] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem 0;
}

.collab-partner-stats[b-jgyhb9pqbk] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.collab-partner-stat[b-jgyhb9pqbk] {
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--wl-gold-bg);
    border: 1px solid var(--wl-gold-border);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.collab-partner-stat svg[b-jgyhb9pqbk] {
    width: 14px;
    height: 14px;
}

/* Influence Cost Badge */
.collab-cost-badge[b-jgyhb9pqbk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    cursor: help;
    transition: all 0.2s ease;
}

.collab-cost-badge:hover[b-jgyhb9pqbk] {
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    border-color: var(--wl-border-medium);
}

.collab-cost-label[b-jgyhb9pqbk] {
    text-transform: uppercase;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin-bottom: 0.25rem;
}

.collab-cost-value[b-jgyhb9pqbk] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--wl-gold);
    line-height: 1;
}

.collab-cost-warning[b-jgyhb9pqbk] {
    text-transform: uppercase;
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: rgba(var(--wl-red-rgb), 0.2);
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #EF4444;
}

/* ============================================
   BENEFITS SECTION
   ============================================ */

.collab-benefits[b-jgyhb9pqbk] {
    margin-bottom: 1.5rem;
}

.collab-section-header[b-jgyhb9pqbk] {
    margin-bottom: 0.75rem;
}

.collab-section-tag[b-jgyhb9pqbk] {
    text-transform: uppercase;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.collab-section-title[b-jgyhb9pqbk] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0;
}

.collab-benefits-grid[b-jgyhb9pqbk] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.collab-benefit[b-jgyhb9pqbk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    background: rgba(var(--wl-purple-rgb), 0.05);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.15);
    border-radius: 12px;
    cursor: help;
    transition: all 0.2s ease;
}

.collab-benefit:hover[b-jgyhb9pqbk] {
    background: rgba(var(--wl-purple-rgb), 0.1);
    border-color: rgba(var(--wl-purple-rgb), 0.3);
}

.collab-benefit-icon[b-jgyhb9pqbk] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-purple);
}

.collab-benefit-icon svg[b-jgyhb9pqbk] {
    width: 100%;
    height: 100%;
}

.collab-benefit-label[b-jgyhb9pqbk] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.collab-benefit-value[b-jgyhb9pqbk] {
    font-size: 0.625rem;
    color: var(--wl-text-muted);
    text-align: center;
}

/* ============================================
   HOW IT WORKS
   ============================================ */

.collab-how[b-jgyhb9pqbk] {
    margin-bottom: 1.5rem;
}

.collab-steps[b-jgyhb9pqbk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--wl-surface-primary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
}

.collab-step[b-jgyhb9pqbk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    flex: 1;
}

.collab-step-num[b-jgyhb9pqbk] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-purple) 0%, #7C3AED 100%);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
}

.collab-step-text[b-jgyhb9pqbk] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    text-align: center;
}

.collab-step-arrow[b-jgyhb9pqbk] {
    color: rgba(var(--wl-contrast-rgb), 0.2);
}

.collab-step-arrow svg[b-jgyhb9pqbk] {
    width: 20px;
    height: 20px;
}

/* ============================================
   WARNING BANNER
   ============================================ */

.collab-warning[b-jgyhb9pqbk] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.collab-warning-icon[b-jgyhb9pqbk] {
    width: 20px;
    height: 20px;
    color: #3B82F6;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.collab-warning-icon svg[b-jgyhb9pqbk] {
    width: 100%;
    height: 100%;
}

.collab-warning-text[b-jgyhb9pqbk] {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0;
}

.collab-warning-text strong[b-jgyhb9pqbk] {
    color: #3B82F6;
    font-weight: 600;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.collab-actions[b-jgyhb9pqbk] {
    display: flex;
    gap: 0.75rem;
}

.collab-btn[b-jgyhb9pqbk] {
    text-transform: uppercase;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
    border-radius: 14px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.collab-btn svg[b-jgyhb9pqbk] {
    width: 18px;
    height: 18px;
}

.collab-btn--ghost[b-jgyhb9pqbk] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.collab-btn--ghost:hover:not(:disabled)[b-jgyhb9pqbk] {
    background: var(--wl-border-subtle);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: var(--wl-text-primary);
}

.collab-btn--primary[b-jgyhb9pqbk] {
    background: linear-gradient(135deg, var(--wl-purple) 0%, #7C3AED 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(var(--wl-purple-rgb), 0.3);
}

.collab-btn--primary:hover:not(:disabled):not(.disabled)[b-jgyhb9pqbk] {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(var(--wl-purple-rgb), 0.4);
}

.collab-btn--primary.disabled[b-jgyhb9pqbk],
.collab-btn--primary:disabled[b-jgyhb9pqbk] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.collab-btn-spinner[b-jgyhb9pqbk] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--wl-text-muted);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-jgyhb9pqbk 0.6s linear infinite;
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animate-fade-in[b-jgyhb9pqbk] {
    animation: fade-in-b-jgyhb9pqbk 0.5s ease-out both;
}

.delay-100[b-jgyhb9pqbk] { animation-delay: 0.1s; }
.delay-200[b-jgyhb9pqbk] { animation-delay: 0.2s; }
.delay-300[b-jgyhb9pqbk] { animation-delay: 0.3s; }
.delay-400[b-jgyhb9pqbk] { animation-delay: 0.4s; }
.delay-500[b-jgyhb9pqbk] { animation-delay: 0.5s; }

@keyframes fade-in-b-jgyhb9pqbk {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
    .collab-invite[b-jgyhb9pqbk] {
        padding: 1rem;
    }

    .collab-header-title[b-jgyhb9pqbk] {
        font-size: 1.5rem;
    }

    .collab-partner-inner[b-jgyhb9pqbk] {
        padding: 1.5rem 1rem;
    }

    .collab-partner-avatar-container[b-jgyhb9pqbk] {
        width: 100px;
        height: 100px;
    }

    .collab-benefits-grid[b-jgyhb9pqbk] {
        grid-template-columns: 1fr;
    }

    .collab-benefit[b-jgyhb9pqbk] {
        flex-direction: row;
        padding: 0.875rem 1rem;
        gap: 1rem;
    }

    .collab-benefit-icon[b-jgyhb9pqbk] {
        width: 32px;
        height: 32px;
    }

    .collab-steps[b-jgyhb9pqbk] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .collab-step-arrow[b-jgyhb9pqbk] {
        transform: rotate(90deg);
    }

    .collab-actions[b-jgyhb9pqbk] {
        flex-direction: column;
    }
}
/* /Components/Pages/Social/Collab/View.razor.rz.scp.css */
/* ============================================
   COLLAB VIEW - AAA+++ Partnership Progress
   Theme: Connection, synergy, purple/blue gradient
   ============================================ */

.collab-view[b-ewv297ozdj] {
    position: relative;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    max-width: 640px;
    margin: 0 auto;
}

/* Inherit atmosphere styles from Invite.razor.css */
.collab-atmosphere[b-ewv297ozdj],
.collab-gradient-orb[b-ewv297ozdj],
.collab-gradient-orb--purple[b-ewv297ozdj],
.collab-gradient-orb--blue[b-ewv297ozdj],
.collab-scanline[b-ewv297ozdj],
.collab-noise[b-ewv297ozdj],
.collab-loading[b-ewv297ozdj],
.collab-loading-ring[b-ewv297ozdj],
.collab-loading-text[b-ewv297ozdj],
.collab-error[b-ewv297ozdj],
.collab-error-icon[b-ewv297ozdj],
.collab-error-title[b-ewv297ozdj],
.collab-error-message[b-ewv297ozdj],
.collab-header[b-ewv297ozdj],
.collab-back-btn[b-ewv297ozdj],
.collab-header-content[b-ewv297ozdj],
.collab-header-tag[b-ewv297ozdj],
.collab-header-title[b-ewv297ozdj],
.collab-header-line[b-ewv297ozdj],
.collab-section-header[b-ewv297ozdj],
.collab-section-tag[b-ewv297ozdj],
.collab-section-title[b-ewv297ozdj],
.collab-actions[b-ewv297ozdj],
.collab-btn[b-ewv297ozdj],
.collab-btn--ghost[b-ewv297ozdj],
.collab-btn--primary[b-ewv297ozdj],
.collab-btn-spinner[b-ewv297ozdj] {
    /* These inherit from Invite.razor.css */
}

/* ============================================
   PARTNERS DISPLAY
   ============================================ */

.collab-partners[b-ewv297ozdj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
    border-radius: 20px;
    margin-bottom: 1.5rem;
}

.collab-partner[b-ewv297ozdj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.collab-partner.is-you .collab-partner-avatar[b-ewv297ozdj] {
    border-color: var(--wl-gold);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.3);
}

.collab-partner-avatar-wrap[b-ewv297ozdj] {
    position: relative;
    width: 80px;
    height: 80px;
}

.collab-partner-avatar[b-ewv297ozdj] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--wl-border-medium);
    transition: all 0.3s ease;
}

.collab-submitted-badge[b-ewv297ozdj] {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
}

.collab-submitted-badge svg[b-ewv297ozdj] {
    width: 16px;
    height: 16px;
}

.collab-partner-name[b-ewv297ozdj] {
    font-size: 0.875rem;
    font-weight: 700;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    text-align: center;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.collab-partner-you[b-ewv297ozdj] {
    text-transform: uppercase;
    padding: 0.125rem 0.5rem;
    background: var(--wl-gold-border);
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
}

/* Connection Line */
.collab-connection[b-ewv297ozdj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
}

.collab-connection-line[b-ewv297ozdj] {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--wl-purple-rgb), 0.3) 0%, rgba(59, 130, 246, 0.3) 100%);
}

.collab-connection-icon[b-ewv297ozdj] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-purple) 0%, #7C3AED 100%);
    border-radius: 50%;
    color: white;
}

.collab-connection-icon svg[b-ewv297ozdj] {
    width: 22px;
    height: 22px;
}

/* ============================================
   PENDING INVITE SECTION
   ============================================ */

.collab-pending[b-ewv297ozdj] {
    margin-bottom: 1.5rem;
}

.collab-invite-message[b-ewv297ozdj] {
    padding: 1.5rem;
    background: rgba(var(--wl-purple-rgb), 0.08);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.collab-invite-message p[b-ewv297ozdj] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin: 0;
    text-align: center;
}

/* ============================================
   WAITING SECTION
   ============================================ */

.collab-waiting[b-ewv297ozdj] {
    margin-bottom: 1.5rem;
}

.collab-waiting-content[b-ewv297ozdj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 16px;
}

.collab-waiting-icon[b-ewv297ozdj] {
    width: 64px;
    height: 64px;
    color: rgba(var(--wl-purple-rgb), 0.6);
    margin-bottom: 1rem;
    animation: pulse-wait-b-ewv297ozdj 2s ease-in-out infinite;
}

.collab-waiting-icon.submitted[b-ewv297ozdj] {
    color: rgba(34, 197, 94, 0.6);
}

@keyframes pulse-wait-b-ewv297ozdj {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.collab-waiting-icon svg[b-ewv297ozdj] {
    width: 100%;
    height: 100%;
}

.collab-waiting-title[b-ewv297ozdj] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0 0 0.5rem 0;
}

.collab-waiting-text[b-ewv297ozdj] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0;
}

/* ============================================
   CONTRIBUTION SELECTION
   ============================================ */

.collab-contribution[b-ewv297ozdj] {
    margin-bottom: 1.5rem;
}

.collab-section-hint[b-ewv297ozdj] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    margin: 0 0 1rem 0;
}

.collab-contribution-grid[b-ewv297ozdj] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.collab-contrib-card[b-ewv297ozdj] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 2px solid var(--wl-border-medium);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.collab-contrib-card:hover[b-ewv297ozdj] {
    background: var(--wl-border-subtle);
    border-color: rgba(var(--wl-purple-rgb), 0.3);
    transform: translateY(-2px);
}

.collab-contrib-card.selected[b-ewv297ozdj] {
    border-color: rgba(var(--wl-purple-rgb), 0.6);
    background: rgba(var(--wl-purple-rgb), 0.1);
}

.collab-contrib-header[b-ewv297ozdj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.collab-contrib-level[b-ewv297ozdj] {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.collab-contrib-cost[b-ewv297ozdj] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.collab-contrib-multiplier[b-ewv297ozdj] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-purple);
    margin-bottom: 0.375rem;
}

.collab-contrib-desc[b-ewv297ozdj] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    line-height: 1.3;
}

.collab-contrib-check[b-ewv297ozdj] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, var(--wl-purple) 0%, #7C3AED 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    animation: check-pop-b-ewv297ozdj 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes check-pop-b-ewv297ozdj {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

.collab-contrib-check svg[b-ewv297ozdj] {
    width: 12px;
    height: 12px;
}

/* Influence Info */
.collab-influence-info[b-ewv297ozdj] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--wl-surface-primary);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.collab-influence-label[b-ewv297ozdj] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.collab-influence-value[b-ewv297ozdj] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wl-gold);
}

/* ============================================
   COMPLETED/REJECTED STATES
   ============================================ */

.collab-completed[b-ewv297ozdj],
.collab-rejected[b-ewv297ozdj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.collab-completed-content[b-ewv297ozdj],
.collab-rejected-content[b-ewv297ozdj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 2rem;
    border-radius: 20px;
    width: 100%;
}

.collab-completed-content[b-ewv297ozdj] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.08) 100%);
    border: 2px solid rgba(34, 197, 94, 0.3);
}

.collab-rejected-content[b-ewv297ozdj] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 2px solid rgba(var(--wl-red-rgb), 0.2);
}

.collab-completed-icon[b-ewv297ozdj],
.collab-rejected-icon[b-ewv297ozdj] {
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
}

.collab-completed-icon svg[b-ewv297ozdj],
.collab-rejected-icon svg[b-ewv297ozdj] {
    width: 100%;
    height: 100%;
}

.collab-completed-icon[b-ewv297ozdj] {
    color: #22C55E;
    filter: drop-shadow(0 4px 20px rgba(34, 197, 94, 0.4));
}

.collab-rejected-icon[b-ewv297ozdj] {
    color: #EF4444;
}

.collab-completed-title[b-ewv297ozdj],
.collab-rejected-title[b-ewv297ozdj] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.1em;
    margin: 0 0 0.5rem 0;
}

.collab-completed-title[b-ewv297ozdj] {
    color: #22C55E;
}

.collab-rejected-title[b-ewv297ozdj] {
    color: #EF4444;
}

.collab-completed-text[b-ewv297ozdj],
.collab-rejected-text[b-ewv297ozdj] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0;
    max-width: 280px;
}

/* Result breakdown - who contributed what and what each side gained */
.collab-result[b-ewv297ozdj] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: 16px;
    background: rgba(var(--wl-purple-rgb), 0.06);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
}

.collab-result-title[b-ewv297ozdj] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wl-text-secondary);
}

.collab-result-grid[b-ewv297ozdj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.collab-result-row[b-ewv297ozdj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-subtle);
}

.collab-result-row.is-you[b-ewv297ozdj] {
    border-color: var(--wl-gold-border);
    background: rgba(var(--wl-gold-rgb), 0.06);
}

.collab-result-party[b-ewv297ozdj] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.collab-result-name[b-ewv297ozdj] {
    font-weight: 600;
    color: var(--wl-text-primary);
}

.collab-result-row.is-you .collab-result-name[b-ewv297ozdj] {
    color: var(--wl-gold);
}

.collab-result-contrib[b-ewv297ozdj] {
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.collab-result-gain[b-ewv297ozdj] {
    flex-shrink: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    color: #22C55E;
}

/* ============================================
   RESPONSIVE IMPORTS
   ============================================ */

/* Animation classes from invite page */
.animate-fade-in[b-ewv297ozdj] {
    animation: fade-in-b-ewv297ozdj 0.5s ease-out both;
}

.delay-100[b-ewv297ozdj] { animation-delay: 0.1s; }
.delay-200[b-ewv297ozdj] { animation-delay: 0.2s; }

@keyframes fade-in-b-ewv297ozdj {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    .collab-view[b-ewv297ozdj] {
        padding: 1rem;
    }

    .collab-partners[b-ewv297ozdj] {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem 1rem;
    }

    .collab-connection[b-ewv297ozdj] {
        flex-direction: column;
        padding: 0.5rem 0;
    }

    .collab-connection-line[b-ewv297ozdj] {
        width: 2px;
        height: 20px;
        background: linear-gradient(180deg, rgba(var(--wl-purple-rgb), 0.3) 0%, rgba(59, 130, 246, 0.3) 100%);
    }

    .collab-contribution-grid[b-ewv297ozdj] {
        grid-template-columns: 1fr;
    }

    .collab-contrib-card[b-ewv297ozdj] {
        flex-direction: row;
        text-align: left;
        gap: 1rem;
        padding: 1rem;
    }

    .collab-contrib-header[b-ewv297ozdj] {
        align-items: flex-start;
    }

    .collab-contrib-multiplier[b-ewv297ozdj] {
        margin-bottom: 0;
    }
}

/* Uppercase styling for localized HUD labels (values stored normal-case in resx) */
.collab-loading-text[b-ewv297ozdj],
.collab-error-title[b-ewv297ozdj],
.collab-header-tag[b-ewv297ozdj],
.collab-header-title[b-ewv297ozdj],
.collab-section-tag[b-ewv297ozdj],
.collab-section-title[b-ewv297ozdj],
.collab-btn[b-ewv297ozdj] {
    text-transform: uppercase;
}
/* /Components/Pages/Social/Daily/ArticleCard.razor.rz.scp.css */
/* ==========================================
   ARTICLE CARD - Luxury Tabloid Style
   ==========================================
   Strong left-border accent. Newspaper geometry.
   Cover of Day = the premium gold moment.
   ========================================== */

/* === BASE CARD === */
.article-card[b-714rbx6g1a] {
    position: relative;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    border-left: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 2px 12px 12px 2px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: card-enter-b-714rbx6g1a 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}

@keyframes card-enter-b-714rbx6g1a {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.article-card:hover[b-714rbx6g1a] {
    transform: translateY(-4px) scale(1.005);
    border-left-color: var(--wl-gold);
    background: rgba(var(--wl-contrast-rgb), 0.035);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25),
        0 4px 12px var(--wl-shadow-color);
}

/* === HERO IMAGE === */
.article-hero[b-714rbx6g1a] {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.article-hero[b-714rbx6g1a]  .article-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.article-card:hover .article-hero[b-714rbx6g1a]  .article-hero-img {
    transform: scale(1.04);
}

.article-hero-overlay[b-714rbx6g1a] {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.75) 100%);
    pointer-events: none;
}

/* === BODY === */
.article-body[b-714rbx6g1a] {
    padding: 1.25rem 1.25rem 1rem;
}

.article-card--image .article-body[b-714rbx6g1a] {
    padding-top: 1rem;
}

/* === TITLE - Dramatic Bebas Neue === */
.article-title[b-714rbx6g1a] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.025em;
    line-height: 1.1;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem;
    transition: color 0.25s ease;
}

/* Text-only articles get bigger titles */
.article-card:not(.article-card--image) .article-title[b-714rbx6g1a] {
    font-size: 1.75rem;
}

.article-card:hover .article-title[b-714rbx6g1a] {
    color: var(--wl-gold);
}

/* === INTRO / CAPTION === */
.article-intro[b-714rbx6g1a] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    line-height: 1.6;
    margin: 0 0 0.75rem;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(var(--wl-gold-rgb), 0.25);
}

.article-caption[b-714rbx6g1a] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.55);
    line-height: 1.6;
    margin: 0 0 0.75rem;
    font-style: italic;
}

/* === META === */
.article-meta[b-714rbx6g1a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.625rem;
}

.article-author[b-714rbx6g1a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-author-avatar[b-714rbx6g1a] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(var(--wl-contrast-rgb), 0.1);
}

.article-author-name[b-714rbx6g1a] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.article-date[b-714rbx6g1a] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    color: rgba(var(--wl-contrast-rgb), 0.28);
    text-transform: uppercase;
}

/* === TAGS - Margin annotations === */
.article-tags[b-714rbx6g1a] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.article-tag[b-714rbx6g1a] {
    display: inline-block;
    padding: 0 0.125rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.3);
    transition: color 0.2s ease;
}

.article-card:hover .article-tag[b-714rbx6g1a] {
    color: rgba(var(--wl-gold-rgb), 0.6);
}

/* === FOOTER === */
.article-footer[b-714rbx6g1a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

.article-stats[b-714rbx6g1a] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.article-stat[b-714rbx6g1a] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.45);
}

.article-stat svg[b-714rbx6g1a] {
    width: 14px;
    height: 14px;
}

.article-stat--positive[b-714rbx6g1a] {
    color: #10B981;
}

.article-stat--negative[b-714rbx6g1a] {
    color: var(--wl-red);
}

.article-comments[b-714rbx6g1a] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

.article-comments svg[b-714rbx6g1a] {
    width: 15px;
    height: 15px;
}

/* ==========================================
   COVER OF THE DAY - The Premium Moment
   ==========================================
   Gold foil energy. Animated glow. Stamp badge.
   This is the crown jewel of the feed.
   ========================================== */

.article-card--cover[b-714rbx6g1a] {
    border-left: 4px solid var(--wl-gold);
    background: linear-gradient(
        165deg,
        rgba(var(--wl-gold-rgb), 0.05) 0%,
        rgba(var(--wl-contrast-rgb), 0.02) 40%,
        rgba(var(--wl-gold-rgb), 0.03) 100%
    );
    box-shadow:
        0 0 0 1px rgba(var(--wl-gold-rgb), 0.12),
        0 4px 20px rgba(var(--wl-gold-rgb), 0.06);
    animation: card-enter-b-714rbx6g1a 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards,
               cover-glow-pulse-b-714rbx6g1a 3s ease-in-out 0.5s infinite;
}

@keyframes cover-glow-pulse-b-714rbx6g1a {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(var(--wl-gold-rgb), 0.12),
            0 4px 20px rgba(var(--wl-gold-rgb), 0.06);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(var(--wl-gold-rgb), 0.25),
            0 4px 30px rgba(var(--wl-gold-rgb), 0.15),
            0 0 60px rgba(var(--wl-gold-rgb), 0.04);
    }
}

.article-card--cover:hover[b-714rbx6g1a] {
    box-shadow:
        0 0 0 1px rgba(var(--wl-gold-rgb), 0.3),
        0 12px 40px rgba(var(--wl-gold-rgb), 0.15),
        0 0 80px rgba(var(--wl-gold-rgb), 0.06);
}

/* Gold ring on avatar for cover cards */
.article-card--cover .article-author-avatar[b-714rbx6g1a] {
    border-color: var(--wl-gold);
    box-shadow: 0 0 0 1px rgba(var(--wl-gold-rgb), 0.3);
}

/* === COVER BADGE - Gold foil stamp === */
.article-cover-badge[b-714rbx6g1a] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.75rem;
    margin-bottom: 0.625rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border-radius: 2px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--wl-bg-primary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: rotate(-1deg);
    transform-origin: left center;
    box-shadow: 0 2px 8px rgba(var(--wl-gold-rgb), 0.25);
}

.article-cover-badge svg[b-714rbx6g1a] {
    width: 14px;
    height: 14px;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .article-card[b-714rbx6g1a] {
        border-radius: 2px 10px 10px 2px;
    }

    .article-hero[b-714rbx6g1a] {
        height: 180px;
    }

    .article-body[b-714rbx6g1a] {
        padding: 1rem;
    }

    .article-title[b-714rbx6g1a] {
        font-size: 1.3rem;
    }

    .article-card:not(.article-card--image) .article-title[b-714rbx6g1a] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/Social/Daily/ArticleComposer.razor.rz.scp.css */
/* ==========================================
   ARTICLE COMPOSER - "Luxury Tabloid" Edition
   Inspiring, premium creation experience
   ========================================== */

/* === CONTAINER === */
.composer[b-osx7586xgo] {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    overflow: hidden;
}

/* === ATMOSPHERE === */
.composer-atmosphere[b-osx7586xgo] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

.composer-gradient-orb[b-osx7586xgo] {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.1;
    background: radial-gradient(circle, rgba(var(--wl-gold-rgb), 0.4) 0%, transparent 70%);
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
}

/* === STAGGERED ENTRANCE === */
.animate-fade-in[b-osx7586xgo] {
    animation: composer-fadeIn-b-osx7586xgo 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}

.delay-100[b-osx7586xgo] { animation-delay: 0.1s; }

@keyframes composer-fadeIn-b-osx7586xgo {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === BACK LINK - Editorial navigation === */
.composer-back[b-osx7586xgo] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    background: none;
    border: none;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 2rem;
    transition: color 0.25s ease;
}

.composer-back:hover[b-osx7586xgo] {
    color: var(--wl-gold);
}

.composer-back:hover svg[b-osx7586xgo] {
    transform: translateX(-2px);
}

.composer-back svg[b-osx7586xgo] {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}

/* === CARD - Premium container with decorative top rule === */
.composer-card[b-osx7586xgo] {
    position: relative;
    z-index: 1;
    background: transparent;
    border: none;
    border-top: 3px double var(--wl-gold);
    border-radius: 0;
    padding: 1.75rem 0 2rem;
}

/* --- Title - Aspirational headline --- */
.composer-title[b-osx7586xgo] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.03em;
    line-height: 1.05;
    color: var(--wl-text-primary);
    margin: 0 0 1.75rem;
}

/* === BLOCKED STATE === */
.composer-blocked[b-osx7586xgo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2.5rem 2rem;
    text-align: center;
    color: #F59E0B;
    border-left: 3px solid rgba(245, 158, 11, 0.3);
}

.composer-blocked svg[b-osx7586xgo] {
    width: 36px;
    height: 36px;
    opacity: 0.5;
}

.composer-blocked p[b-osx7586xgo] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    margin: 0;
}

/* === LANGUAGE SELECTOR - Clean pills === */
.composer-language-selector[b-osx7586xgo] {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 1.5rem;
}

.composer-lang-btn[b-osx7586xgo] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 1rem;
    background: transparent;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 2px;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.composer-lang-btn:hover:not(.composer-lang-btn--active)[b-osx7586xgo] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: rgba(var(--wl-contrast-rgb), 0.7);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
}

.composer-lang-btn--active[b-osx7586xgo] {
    background: var(--wl-gold);
    border-color: var(--wl-gold);
    color: var(--wl-bg-primary);
}

/* === TYPE SELECTOR - Two choice cards === */
.composer-type-selector[b-osx7586xgo] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-bottom: 2rem;
}

.composer-type-btn[b-osx7586xgo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-left: 3px solid transparent;
    border-radius: 0 4px 4px 0;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-family: inherit;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
}

.composer-type-btn svg[b-osx7586xgo] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.composer-type-btn:hover:not(.composer-type-btn--active)[b-osx7586xgo] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: rgba(var(--wl-contrast-rgb), 0.65);
    border-left-color: rgba(var(--wl-contrast-rgb), 0.1);
}

.composer-type-btn:disabled[b-osx7586xgo] {
    opacity: 0.45;
    cursor: not-allowed;
}

.composer-type-btn:disabled:hover[b-osx7586xgo] {
    background: rgba(var(--wl-contrast-rgb), 0.02);
    color: rgba(var(--wl-contrast-rgb), 0.4);
    border-left-color: transparent;
}

.composer-type-btn--active[b-osx7586xgo] {
    background: rgba(var(--wl-gold-rgb), 0.06);
    border-color: rgba(var(--wl-gold-rgb), 0.12);
    border-left: 3px solid var(--wl-gold);
    color: var(--wl-gold);
    font-weight: 600;
}

/* === FORM === */
.composer-form[b-osx7586xgo] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.composer-field[b-osx7586xgo] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* --- Labels - Tiny uppercase, wide-tracked --- */
.composer-label[b-osx7586xgo] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

/* --- Inputs - Gold bottom-border glow on focus --- */
.composer-input[b-osx7586xgo] {
    width: 100%;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-bottom: 2px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 4px 4px 0 0;
    padding: 0.75rem 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: all 0.25s ease;
}

.composer-input:focus[b-osx7586xgo] {
    outline: none;
    border-bottom-color: var(--wl-gold);
    box-shadow: 0 2px 12px rgba(var(--wl-gold-rgb), 0.1);
}

.composer-input[b-osx7586xgo]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.2);
}

/* --- Error state - Red left-border accent --- */
.composer-input--error[b-osx7586xgo] {
    border-left: 3px solid var(--wl-red);
    border-bottom-color: rgba(var(--wl-red-rgb), 0.4);
}

.composer-input--error:focus[b-osx7586xgo] {
    border-bottom-color: var(--wl-red);
    box-shadow: 0 2px 12px rgba(var(--wl-red-rgb), 0.08);
}

/* --- Textarea - Writing surface --- */
.composer-textarea[b-osx7586xgo] {
    width: 100%;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-bottom: 2px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 4px 4px 0 0;
    padding: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.65;
    resize: vertical;
    transition: all 0.25s ease;
}

.composer-textarea:focus[b-osx7586xgo] {
    outline: none;
    border-bottom-color: var(--wl-gold);
    box-shadow: 0 2px 12px rgba(var(--wl-gold-rgb), 0.1);
}

.composer-textarea[b-osx7586xgo]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.2);
}

.composer-textarea--large[b-osx7586xgo] {
    min-height: 220px;
}

.composer-error[b-osx7586xgo] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.04em;
    color: var(--wl-red);
}

/* === IMAGE UPLOAD - Premium upload zone === */
.composer-upload[b-osx7586xgo] {
    position: relative;
    border: 2px dashed rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 4px;
    overflow: hidden;
    transition: all 0.25s ease;
}

.composer-upload:hover[b-osx7586xgo] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    background: rgba(var(--wl-gold-rgb), 0.02);
}

.composer-upload--has-image[b-osx7586xgo] {
    border-style: solid;
    border-color: rgba(var(--wl-gold-rgb), 0.15);
}

.composer-upload-placeholder[b-osx7586xgo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem;
    color: rgba(var(--wl-contrast-rgb), 0.25);
}

.composer-upload-placeholder svg[b-osx7586xgo] {
    width: 36px;
    height: 36px;
}

.composer-upload-placeholder span[b-osx7586xgo] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.composer-upload-input[b-osx7586xgo] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.composer-upload-preview[b-osx7586xgo] {
    width: 100%;
    max-height: 340px;
    object-fit: cover;
    display: block;
}

.composer-upload-remove[b-osx7586xgo] {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.65);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
}

.composer-upload-remove:hover[b-osx7586xgo] {
    background: rgba(var(--wl-red-rgb), 0.85);
}

.composer-upload-remove svg[b-osx7586xgo] {
    width: 14px;
    height: 14px;
}

/* === TAGS PREVIEW - Clean inline pills === */
.composer-tags-preview[b-osx7586xgo] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.125rem;
}

.composer-tag-chip[b-osx7586xgo] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.06);
    border-radius: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    color: var(--wl-gold);
    letter-spacing: 0.02em;
}

/* === SUBMIT SECTION === */
.composer-actions[b-osx7586xgo] {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

/* --- THE button - Commanding gold gradient --- */
.composer-submit[b-osx7586xgo] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    border-radius: 4px;
    color: var(--wl-bg-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 2px 8px rgba(var(--wl-gold-rgb), 0.2);
}

.composer-submit:hover:not(:disabled)[b-osx7586xgo] {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(var(--wl-gold-rgb), 0.35),
        0 2px 8px rgba(var(--wl-gold-rgb), 0.2);
}

.composer-submit:active:not(:disabled)[b-osx7586xgo] {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 2px 6px rgba(var(--wl-gold-rgb), 0.2);
    transition-duration: 0.08s;
}

.composer-submit:disabled[b-osx7586xgo] {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

.composer-submit svg[b-osx7586xgo] {
    width: 18px;
    height: 18px;
}

.composer-submit-spinner[b-osx7586xgo] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: composer-spin-b-osx7586xgo 0.8s linear infinite;
}

@keyframes composer-spin-b-osx7586xgo {
    to { transform: rotate(360deg); }
}

.composer-submit-error[b-osx7586xgo] {
    text-align: center;
    font-size: 0.75rem;
    color: var(--wl-red);
    padding: 0.625rem 0.75rem;
    background: rgba(var(--wl-red-rgb), 0.06);
    border-left: 3px solid var(--wl-red);
    border-radius: 0 4px 4px 0;
    font-family: inherit;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .composer[b-osx7586xgo] {
        padding: 1.25rem 1rem;
    }

    .composer-title[b-osx7586xgo] {
        font-size: 1.75rem;
    }

    .composer-type-selector[b-osx7586xgo] {
        grid-template-columns: 1fr;
    }

    .composer-submit[b-osx7586xgo] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Social/Daily/ArticleDetail.razor.rz.scp.css */
/* ==========================================
   ARTICLE DETAIL - "Luxury Tabloid" Edition
   Premium magazine long-form reading experience
   ========================================== */

/* === CONTAINER === */
.detail[b-975z9c2rwr] {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    overflow: hidden;
}

/* === ATMOSPHERE === */
.detail-atmosphere[b-975z9c2rwr] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

.detail-gradient-orb[b-975z9c2rwr] {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.12;
    background: radial-gradient(circle, rgba(var(--wl-gold-rgb), 0.4) 0%, transparent 70%);
    top: -80px;
    right: -60px;
    animation: detail-float-b-975z9c2rwr 25s ease-in-out infinite;
}

@keyframes detail-float-b-975z9c2rwr {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-20px, 15px) scale(1.03); }
    66% { transform: translate(10px, -10px) scale(0.98); }
}

/* === STAGGERED ENTRANCE ANIMATIONS === */
.animate-fade-in[b-975z9c2rwr] {
    animation: detail-fadeIn-b-975z9c2rwr 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}

.delay-100[b-975z9c2rwr] { animation-delay: 0.1s; }
.delay-200[b-975z9c2rwr] { animation-delay: 0.2s; }

@keyframes detail-fadeIn-b-975z9c2rwr {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === BACK LINK - Editorial navigation === */
.detail-back[b-975z9c2rwr] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    background: none;
    border: none;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 2rem;
    transition: color 0.25s ease;
}

.detail-back:hover[b-975z9c2rwr] {
    color: var(--wl-gold);
}

.detail-back:hover svg[b-975z9c2rwr] {
    transform: translateX(-2px);
}

.detail-back svg[b-975z9c2rwr] {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
}

/* === LOADING === */
.detail-loading[b-975z9c2rwr] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1.5rem;
}

.detail-loading-ring[b-975z9c2rwr] {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.15);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: detail-spin-b-975z9c2rwr 0.9s linear infinite;
}

@keyframes detail-spin-b-975z9c2rwr {
    to { transform: rotate(360deg); }
}

.detail-loading-text[b-975z9c2rwr] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.35em;
    color: rgba(var(--wl-contrast-rgb), 0.25);
}

.detail-loading-spinner[b-975z9c2rwr] {
    width: 16px;
    height: 16px;
    border: 1.5px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: detail-spin-b-975z9c2rwr 0.8s linear infinite;
}

/* === NOT FOUND === */
.detail-not-found[b-975z9c2rwr] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 4rem 2rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

.detail-not-found h2[b-975z9c2rwr] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.06em;
}

/* === ARTICLE - Magazine page feel === */
.detail-article[b-975z9c2rwr] {
    position: relative;
    z-index: 1;
    background: transparent;
    border: none;
    border-top: 3px double var(--wl-gold);
    border-radius: 0;
    padding: 1.75rem 0 1.5rem;
    margin-bottom: 2rem;
}

/* --- Status Row --- */
.detail-status-row[b-975z9c2rwr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.detail-status[b-975z9c2rwr] {
    display: inline-flex;
    align-items: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    border-radius: 2px;
    font-weight: 500;
}

.detail-status--approved[b-975z9c2rwr] {
    background: rgba(16, 185, 129, 0.12);
    color: #10B981;
    border-left: 2px solid #10B981;
}

.detail-status--pending[b-975z9c2rwr] {
    background: rgba(245, 158, 11, 0.12);
    color: #F59E0B;
    border-left: 2px solid #F59E0B;
}

.detail-status--rejected[b-975z9c2rwr] {
    background: rgba(var(--wl-red-rgb), 0.12);
    color: var(--wl-red);
    border-left: 2px solid var(--wl-red);
}

.detail-status--expired[b-975z9c2rwr] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: rgba(var(--wl-contrast-rgb), 0.35);
    border-left: 2px solid rgba(var(--wl-contrast-rgb), 0.15);
}

/* --- Cover badge - Gold foil stamp --- */
.detail-cover-badge[b-975z9c2rwr] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border-radius: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    font-weight: 700;
    color: var(--wl-bg-primary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transform: rotate(-1deg);
    box-shadow:
        0 1px 3px rgba(var(--wl-gold-rgb), 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.detail-cover-badge svg[b-975z9c2rwr] {
    width: 13px;
    height: 13px;
}

.detail-type-badge[b-975z9c2rwr] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.08em;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    text-transform: uppercase;
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-gold);
}

.detail-type-badge svg[b-975z9c2rwr] {
    width: 11px;
    height: 11px;
}

/* --- Title - Front-page headline --- */
.detail-title[b-975z9c2rwr] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.75rem;
    letter-spacing: 0.01em;
    line-height: 1.05;
    color: var(--wl-text-primary);
    margin: 0 0 1.25rem;
}

/* --- Meta - Newspaper byline --- */
.detail-meta[b-975z9c2rwr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.detail-author[b-975z9c2rwr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.detail-author-avatar[b-975z9c2rwr] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(var(--wl-gold-rgb), 0.2);
}

.detail-author-name[b-975z9c2rwr] {
    display: block;
    font-weight: 700;
    font-size: 0.8125rem;
    font-variant: small-caps;
    letter-spacing: 0.03em;
    color: var(--wl-text-primary);
}

.detail-date[b-975z9c2rwr] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    color: rgba(var(--wl-contrast-rgb), 0.3);
    margin-top: 0.125rem;
    letter-spacing: 0.02em;
}

/* --- Delete button --- */
.detail-delete-btn[b-975z9c2rwr] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.4rem 0.625rem;
    background: transparent;
    border: 1px solid rgba(var(--wl-red-rgb), 0.15);
    border-radius: 4px;
    color: rgba(var(--wl-red-rgb), 0.6);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
}

.detail-delete-btn:hover[b-975z9c2rwr] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border-color: rgba(var(--wl-red-rgb), 0.3);
    color: var(--wl-red);
}

.detail-delete-btn svg[b-975z9c2rwr] {
    width: 13px;
    height: 13px;
}

/* --- Image - Full-bleed within article --- */
.detail-image[b-975z9c2rwr] {
    margin: 0 -1.5rem 0.75rem -1.5rem;
    overflow: hidden;
    border-radius: 0;
}

.detail-image[b-975z9c2rwr]  img {
    width: 100%;
    display: block;
}

.detail-caption[b-975z9c2rwr] {
    font-size: 0.75rem;
    font-style: italic;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-align: left;
    margin: 0 0 1.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    font-family: inherit;
    letter-spacing: 0.01em;
}

/* --- Text Content --- */
.detail-intro[b-975z9c2rwr] {
    max-width: 720px;
    font-size: 1.125rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.85);
    line-height: 1.6;
    margin: 0 0 1.5rem;
    padding-left: 1.25rem;
    border-left: 3px solid var(--wl-gold);
}

.detail-body[b-975z9c2rwr] {
    max-width: 720px;
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.72);
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 1.5rem;
}

.detail-caption[b-975z9c2rwr],
.detail-tags[b-975z9c2rwr],
.detail-votes[b-975z9c2rwr],
.detail-comments[b-975z9c2rwr] {
    max-width: 720px;
}

/* --- Tags --- */
.detail-tags[b-975z9c2rwr] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.detail-tag[b-975z9c2rwr] {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.06);
    border-radius: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: var(--wl-gold);
    letter-spacing: 0.02em;
}

/* --- Votes - Dramatic display --- */
.detail-votes[b-975z9c2rwr] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.25rem;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.detail-vote-count[b-975z9c2rwr] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    letter-spacing: 0.02em;
}

.detail-vote-count svg[b-975z9c2rwr] {
    width: 20px;
    height: 20px;
}

.detail-vote-count--positive[b-975z9c2rwr] {
    color: #10B981;
}

.detail-vote-count--negative[b-975z9c2rwr] {
    color: var(--wl-red);
}

.detail-vote-label[b-975z9c2rwr] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    color: rgba(var(--wl-contrast-rgb), 0.3);
    letter-spacing: 0.04em;
}

/* === COMMENTS SECTION - "Letters to the Editor" === */
.detail-comments[b-975z9c2rwr] {
    position: relative;
    z-index: 1;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 0;
    padding: 1.75rem 0 2rem;
    margin-bottom: 2rem;
}

.detail-comments-title[b-975z9c2rwr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    letter-spacing: 0.06em;
    color: var(--wl-text-primary);
    margin: 0 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.detail-comments-title svg[b-975z9c2rwr] {
    width: 18px;
    height: 18px;
    color: var(--wl-gold);
}

.detail-no-comments[b-975z9c2rwr] {
    text-align: center;
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.3);
    padding: 2rem 0;
    margin: 0;
    font-style: italic;
}

/* --- Comment List --- */
.detail-comment-list[b-975z9c2rwr] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1.25rem;
}

.detail-comment[b-975z9c2rwr] {
    padding: 1rem 0 1rem 1rem;
    background: transparent;
    border: none;
    border-left: 2px solid rgba(var(--wl-contrast-rgb), 0.06);
    border-radius: 0;
    transition: border-color 0.25s ease;
}

.detail-comment:hover[b-975z9c2rwr] {
    border-left-color: rgba(var(--wl-gold-rgb), 0.2);
}

.detail-comment + .detail-comment[b-975z9c2rwr] {
    margin-top: 0.25rem;
    padding-top: 1rem;
    border-top: none;
}

.detail-comment--deleted[b-975z9c2rwr] {
    opacity: 0.4;
}

.detail-comment-deleted[b-975z9c2rwr] {
    font-size: 0.75rem;
    font-style: italic;
    color: rgba(var(--wl-contrast-rgb), 0.3);
}

.detail-comment-header[b-975z9c2rwr] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.5rem;
}

.detail-comment-avatar[b-975z9c2rwr] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
}

.detail-comment-meta[b-975z9c2rwr] {
    flex: 1;
    min-width: 0;
}

.detail-comment-author[b-975z9c2rwr] {
    display: block;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.01em;
}

.detail-comment-time[b-975z9c2rwr] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    color: rgba(var(--wl-contrast-rgb), 0.25);
    letter-spacing: 0.02em;
}

.detail-comment-edited[b-975z9c2rwr] {
    font-style: italic;
}

.detail-comment-actions[b-975z9c2rwr] {
    display: flex;
    gap: 0.125rem;
    flex-shrink: 0;
}

.detail-comment-action[b-975z9c2rwr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    background: transparent;
    border: none;
    color: rgba(var(--wl-contrast-rgb), 0.2);
    cursor: pointer;
    transition: all 0.2s ease;
}

.detail-comment-action:hover[b-975z9c2rwr] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.detail-comment-action--danger:hover[b-975z9c2rwr] {
    background: rgba(var(--wl-red-rgb), 0.08);
    color: var(--wl-red);
}

.detail-comment-action svg[b-975z9c2rwr] {
    width: 13px;
    height: 13px;
}

.detail-comment-content[b-975z9c2rwr] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.68);
    line-height: 1.6;
    margin: 0;
    word-break: break-word;
}

/* --- Comment Edit --- */
.detail-comment-edit[b-975z9c2rwr] {
    margin-top: 0.5rem;
}

.detail-comment-edit-input[b-975z9c2rwr] {
    width: 100%;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-bottom: 2px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 4px 4px 0 0;
    padding: 0.625rem 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.55;
    resize: vertical;
    transition: border-color 0.2s ease;
}

.detail-comment-edit-input:focus[b-975z9c2rwr] {
    outline: none;
    border-bottom-color: var(--wl-gold);
    box-shadow: 0 2px 8px rgba(var(--wl-gold-rgb), 0.1);
}

.detail-comment-edit-actions[b-975z9c2rwr] {
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.detail-comment-edit-cancel[b-975z9c2rwr],
.detail-comment-edit-save[b-975z9c2rwr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.detail-comment-edit-cancel[b-975z9c2rwr] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.detail-comment-edit-cancel:hover[b-975z9c2rwr] {
    background: rgba(var(--wl-red-rgb), 0.08);
    color: var(--wl-red);
}

.detail-comment-edit-save[b-975z9c2rwr] {
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
}

.detail-comment-edit-save:hover:not(:disabled)[b-975z9c2rwr] {
    box-shadow: 0 2px 10px rgba(var(--wl-gold-rgb), 0.35);
}

.detail-comment-edit-save:disabled[b-975z9c2rwr] {
    opacity: 0.3;
    cursor: not-allowed;
}

.detail-comment-edit-cancel svg[b-975z9c2rwr],
.detail-comment-edit-save svg[b-975z9c2rwr] {
    width: 14px;
    height: 14px;
}

/* --- Load More Comments --- */
.detail-load-more-comments[b-975z9c2rwr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    width: 100%;
    padding: 0.625rem;
    background: transparent;
    border: none;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    border-radius: 0;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    margin-bottom: 1.25rem;
    transition: all 0.25s ease;
}

.detail-load-more-comments:hover:not(:disabled)[b-975z9c2rwr] {
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.12);
}

.detail-load-more-comments:disabled[b-975z9c2rwr] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Comment Input - Premium treatment --- */
.detail-comment-input-wrapper[b-975z9c2rwr] {
    display: flex;
    gap: 0.625rem;
    align-items: flex-end;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.detail-comment-input[b-975z9c2rwr] {
    flex: 1;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-bottom: 2px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 4px 4px 0 0;
    padding: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.875rem;
    font-family: inherit;
    line-height: 1.55;
    resize: vertical;
    transition: all 0.25s ease;
}

.detail-comment-input:focus[b-975z9c2rwr] {
    outline: none;
    border-bottom-color: var(--wl-gold);
    box-shadow: 0 2px 12px rgba(var(--wl-gold-rgb), 0.08);
}

.detail-comment-submit[b-975z9c2rwr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    color: var(--wl-bg-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.detail-comment-submit:hover:not(:disabled)[b-975z9c2rwr] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--wl-gold-rgb), 0.35);
}

.detail-comment-submit:active:not(:disabled)[b-975z9c2rwr] {
    transform: translateY(0) scale(0.97);
}

.detail-comment-submit:disabled[b-975z9c2rwr] {
    opacity: 0.3;
    cursor: not-allowed;
}

.detail-comment-submit svg[b-975z9c2rwr] {
    width: 18px;
    height: 18px;
}

.detail-comment-limit[b-975z9c2rwr] {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.3);
    font-style: italic;
    margin: 1rem 0 0;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .detail[b-975z9c2rwr] {
        padding: 1.25rem 1rem;
    }

    .detail-title[b-975z9c2rwr] {
        font-size: 2rem;
    }

    .detail-intro[b-975z9c2rwr] {
        font-size: 1rem;
    }

    .detail-image[b-975z9c2rwr] {
        margin-left: -1rem;
        margin-right: -1rem;
    }

    .detail-meta[b-975z9c2rwr] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .detail-comment-input-wrapper[b-975z9c2rwr] {
        flex-direction: column;
        align-items: stretch;
    }

    .detail-comment-submit[b-975z9c2rwr] {
        width: 100%;
        height: 40px;
    }
}
/* /Components/Pages/Social/Daily/Index.razor.rz.scp.css */
/* ==========================================
   DAILY WONDERLIFE - "Luxury Tabloid" Masthead
   ==========================================
   Design language: Vogue's design team built TMZ.
   Newspaper drama meets dark luxury UI.
   ========================================== */

/* === CONTAINER === */
.daily[b-rj2np2g7v9] {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 1.5rem;
}

/* === REFINED ATMOSPHERE === */
.daily-atmosphere[b-rj2np2g7v9] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.daily-gradient-orb[b-rj2np2g7v9] {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.daily-gradient-orb--amber[b-rj2np2g7v9] {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(var(--wl-gold-rgb), 0.25) 0%, transparent 70%);
    top: -80px;
    left: -60px;
    opacity: 0.12;
    animation: daily-drift-b-rj2np2g7v9 30s ease-in-out infinite;
}

/* Kill the second orb - less is more */
.daily-gradient-orb--gold[b-rj2np2g7v9] {
    display: none;
}

@keyframes daily-drift-b-rj2np2g7v9 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(15px, 10px); }
}

/* Kill the scanline - too heavy */
.daily-scanline[b-rj2np2g7v9] {
    display: none;
}

/* Noise texture - the only atmospheric detail we need */
.daily-noise[b-rj2np2g7v9] {
    position: absolute;
    inset: 0;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
}

/* === CHOREOGRAPHED ENTRANCE === */
.animate-fade-in[b-rj2np2g7v9] {
    animation: daily-entrance-b-rj2np2g7v9 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}

.delay-100[b-rj2np2g7v9] { animation-delay: 0.15s; }
.delay-200[b-rj2np2g7v9] { animation-delay: 0.25s; }
.delay-300[b-rj2np2g7v9] { animation-delay: 0.35s; }

@keyframes daily-entrance-b-rj2np2g7v9 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === MASTHEAD === */
.daily-header[b-rj2np2g7v9] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-top: 0.5rem;
}

.daily-header-content[b-rj2np2g7v9] {
    flex: 1;
}

/* TABLOID stamp - red, rotated, urgent */
.daily-header-tag[b-rj2np2g7v9] {
    display: inline-block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    color: var(--wl-red);
    border: 1.5px solid var(--wl-red);
    padding: 0.15rem 0.6rem;
    margin-bottom: 0.625rem;
    transform: rotate(-2deg);
    transform-origin: left center;
}

/* THE masthead title - massive Bebas Neue */
.daily-header-title[b-rj2np2g7v9] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3.5rem;
    letter-spacing: 0.06em;
    line-height: 0.9;
    color: var(--wl-text-primary);
    margin: 0 0 0.375rem;
    border-top: 3px double var(--wl-text-primary);
    padding-top: 0.375rem;
}

.daily-header-subtitle[b-rj2np2g7v9] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    margin: 0;
    letter-spacing: 0.01em;
}

/* Thin decorative rule below subtitle */
.daily-header-rule[b-rj2np2g7v9] {
    width: 100%;
    height: 0;
    border: none;
    border-top: 1px solid var(--wl-border-subtle);
    margin: 0.625rem 0 0;
}

.daily-header-actions[b-rj2np2g7v9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    padding-top: 0.25rem;
}

/* === WRITE BUTTON - Commanding, gold, big === */
.daily-write-btn[b-rj2np2g7v9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    border-radius: 4px;
    color: var(--wl-bg-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(var(--wl-gold-rgb), 0.2);
}

.daily-write-btn:hover:not(:disabled)[b-rj2np2g7v9] {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(var(--wl-gold-rgb), 0.35);
}

.daily-write-btn:active:not(:disabled)[b-rj2np2g7v9] {
    transform: translateY(0);
}

.daily-write-btn:disabled[b-rj2np2g7v9] {
    opacity: 0.35;
    cursor: not-allowed;
}

.daily-write-btn svg[b-rj2np2g7v9] {
    width: 18px;
    height: 18px;
}

/* === RANKING BUTTON - Outlined editorial === */
.daily-ranking-btn[b-rj2np2g7v9] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
    border-radius: 2px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-family: inherit;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s ease;
}

.daily-ranking-btn:hover[b-rj2np2g7v9] {
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    color: var(--wl-gold);
    transform: translateY(-1px);
}

.daily-ranking-btn svg[b-rj2np2g7v9] {
    width: 14px;
    height: 14px;
}

/* === BACK BUTTON === */
.daily-back-btn[b-rj2np2g7v9] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 2px;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-family: inherit;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.2s ease;
}

.daily-back-btn:hover[b-rj2np2g7v9] {
    border-color: rgba(var(--wl-contrast-rgb), 0.25);
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.daily-back-btn svg[b-rj2np2g7v9] {
    width: 14px;
    height: 14px;
}

/* === PUBLISH LIMIT === */
.daily-publish-limit[b-rj2np2g7v9] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-gold-rgb), 0.06);
    border-left: 2px solid var(--wl-gold);
    font-size: 0.8125rem;
    color: var(--wl-gold);
    margin-bottom: 1.25rem;
}

.daily-publish-limit svg[b-rj2np2g7v9] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* === TABS - Editorial section tabs === */
.daily-tabs[b-rj2np2g7v9] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--wl-border-subtle);
    margin-bottom: 1.5rem;
}

.daily-tab[b-rj2np2g7v9] {
    flex: 1;
    padding: 0.75rem 0.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    margin-bottom: -1px;
}

.daily-tab:hover:not(.daily-tab--active)[b-rj2np2g7v9] {
    color: rgba(var(--wl-contrast-rgb), 0.65);
}

.daily-tab--active[b-rj2np2g7v9] {
    border-bottom-color: var(--wl-gold);
    color: var(--wl-gold);
    font-weight: 600;
}

/* === TRENDING - Breaking news energy === */
.daily-trending[b-rj2np2g7v9] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.625rem 0;
    border-top: 1px solid rgba(var(--wl-red-rgb), 0.12);
    border-bottom: 1px solid rgba(var(--wl-red-rgb), 0.08);
}

.daily-trending-label[b-rj2np2g7v9] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--wl-red);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-right: 0.375rem;
}

.daily-trending-label svg[b-rj2np2g7v9] {
    width: 16px;
    height: 16px;
    animation: daily-pulse-fire-b-rj2np2g7v9 1.5s ease-in-out infinite;
}

@keyframes daily-pulse-fire-b-rj2np2g7v9 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.daily-trending-tag[b-rj2np2g7v9] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    background: transparent;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--wl-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.daily-trending-tag:hover[b-rj2np2g7v9] {
    background: rgba(var(--wl-red-rgb), 0.06);
    border-color: rgba(var(--wl-red-rgb), 0.25);
    color: var(--wl-red);
}

.daily-trending-tag--active[b-rj2np2g7v9] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border-color: rgba(var(--wl-red-rgb), 0.35);
    color: var(--wl-red);
    font-weight: 600;
}

.daily-trending-count[b-rj2np2g7v9] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    opacity: 0.5;
}

/* === LOADING STATE === */
.daily-loading[b-rj2np2g7v9] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1.5rem;
}

.daily-loading-ring[b-rj2np2g7v9] {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.15);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: daily-spin-b-rj2np2g7v9 0.9s linear infinite;
}

@keyframes daily-spin-b-rj2np2g7v9 {
    to { transform: rotate(360deg); }
}

.daily-loading-text[b-rj2np2g7v9] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.35em;
    color: var(--wl-text-muted);
}

.daily-loading-spinner[b-rj2np2g7v9] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: daily-spin-b-rj2np2g7v9 0.7s linear infinite;
}

/* === EMPTY STATE === */
.daily-empty[b-rj2np2g7v9] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 5rem 2rem;
}

.daily-empty-icon[b-rj2np2g7v9] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.25rem;
    color: rgba(var(--wl-contrast-rgb), 0.15);
}

.daily-empty-icon svg[b-rj2np2g7v9] {
    width: 100%;
    height: 100%;
}

.daily-empty-title[b-rj2np2g7v9] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.06em;
    color: rgba(var(--wl-contrast-rgb), 0.3);
    margin: 0;
}

/* === FEED === */
.daily-feed[b-rj2np2g7v9] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* === LOAD MORE - Editorial, understated === */
.daily-load-more[b-rj2np2g7v9] {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-top: 2rem;
    padding-bottom: 3rem;
}

.daily-load-more-btn[b-rj2np2g7v9] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2.5rem;
    background: transparent;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 0;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-family: inherit;
    font-size: 0.6875rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
}

.daily-load-more-btn:hover:not(:disabled)[b-rj2np2g7v9] {
    border-color: var(--wl-gold);
    color: var(--wl-gold);
    letter-spacing: 0.22em;
}

.daily-load-more-btn:disabled[b-rj2np2g7v9] {
    opacity: 0.4;
    cursor: not-allowed;
}

.daily-load-more-btn svg[b-rj2np2g7v9] {
    width: 14px;
    height: 14px;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .daily[b-rj2np2g7v9] {
        padding: 1rem;
    }

    .daily-header[b-rj2np2g7v9] {
        flex-direction: column;
        align-items: stretch;
    }

    .daily-header-actions[b-rj2np2g7v9] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .daily-header-title[b-rj2np2g7v9] {
        font-size: 2.5rem;
    }

    .daily-write-btn[b-rj2np2g7v9] {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }

    .daily-tabs[b-rj2np2g7v9] {
        flex-direction: row;
    }
}
/* /Components/Pages/Social/Daily/Ranking.razor.rz.scp.css */
/* ==========================================
   DAILY WONDERLIFE - Journalist Ranking
   "Luxury Tabloid" Edition - Hall of Fame
   ========================================== */

/* === CONTAINER === */
.ranking[b-ztbjnqn2m8] {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    overflow: hidden;
}

/* === ATMOSPHERE === */
.ranking-atmosphere[b-ztbjnqn2m8] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

.ranking-gradient-orb[b-ztbjnqn2m8] {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--wl-gold-rgb), 0.4) 0%, transparent 70%);
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    filter: blur(100px);
    opacity: 0.12;
    animation: ranking-float-b-ztbjnqn2m8 25s ease-in-out infinite;
}

@keyframes ranking-float-b-ztbjnqn2m8 {
    0%, 100% { transform: translateX(-50%) scale(1); }
    33% { transform: translateX(-48%) scale(1.03); }
    66% { transform: translateX(-52%) scale(0.98); }
}

/* === STAGGERED ENTRANCE === */
.animate-fade-in[b-ztbjnqn2m8] {
    animation: ranking-fadeIn-b-ztbjnqn2m8 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}

.delay-100[b-ztbjnqn2m8] { animation-delay: 0.1s; }
.delay-200[b-ztbjnqn2m8] { animation-delay: 0.2s; }

@keyframes ranking-fadeIn-b-ztbjnqn2m8 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === BACK LINK - Editorial navigation === */
.ranking-back[b-ztbjnqn2m8] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0;
    background: none;
    border: none;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.25s ease;
    margin-bottom: 2rem;
}

.ranking-back:hover[b-ztbjnqn2m8] {
    color: var(--wl-gold);
}

.ranking-back:hover svg[b-ztbjnqn2m8] {
    transform: translateX(-2px);
}

.ranking-back svg[b-ztbjnqn2m8] {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

/* === HEADER - Dramatic, prestigious === */
.ranking-header[b-ztbjnqn2m8] {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 2.5rem;
    padding-top: 0.5rem;
    padding-bottom: 1.75rem;
    border-top: 3px double var(--wl-gold);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.ranking-header-icon[b-ztbjnqn2m8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--wl-gold);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 8px rgba(var(--wl-gold-rgb), 0.2));
}

.ranking-title[b-ztbjnqn2m8] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.75rem;
    letter-spacing: 0.04em;
    line-height: 1.05;
    color: var(--wl-text-primary);
    margin: 0 0 0.375rem;
}

.ranking-subtitle[b-ztbjnqn2m8] {
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin: 0;
    letter-spacing: 0.01em;
}

/* === LOADING === */
.ranking-loading[b-ztbjnqn2m8] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1.5rem;
}

.ranking-loading-ring[b-ztbjnqn2m8] {
    width: 40px;
    height: 40px;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.15);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: ranking-spin-b-ztbjnqn2m8 0.9s linear infinite;
}

@keyframes ranking-spin-b-ztbjnqn2m8 {
    to { transform: rotate(360deg); }
}

.ranking-loading-text[b-ztbjnqn2m8] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.35em;
    color: rgba(var(--wl-contrast-rgb), 0.25);
}

/* === EMPTY STATE === */
.ranking-empty[b-ztbjnqn2m8] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 3rem 1.5rem;
    background: transparent;
    border: 1px dashed rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 4px;
}

.ranking-empty-icon[b-ztbjnqn2m8] {
    color: rgba(var(--wl-contrast-rgb), 0.2);
    margin-bottom: 1rem;
}

.ranking-empty p[b-ztbjnqn2m8] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin: 0;
}

/* === RANKING LIST - Tight leaderboard === */
.ranking-list[b-ztbjnqn2m8] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* === RANKING ROW - Cascading entrance from left === */
.ranking-row[b-ztbjnqn2m8] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: none;
    border-left: 3px solid transparent;
    border-radius: 0 4px 4px 0;
    transition: all 0.25s ease;
    animation: ranking-slideIn-b-ztbjnqn2m8 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* Staggered row entrance */
.ranking-row:nth-child(1)[b-ztbjnqn2m8]  { animation-delay: 0.05s; }
.ranking-row:nth-child(2)[b-ztbjnqn2m8]  { animation-delay: 0.10s; }
.ranking-row:nth-child(3)[b-ztbjnqn2m8]  { animation-delay: 0.15s; }
.ranking-row:nth-child(4)[b-ztbjnqn2m8]  { animation-delay: 0.20s; }
.ranking-row:nth-child(5)[b-ztbjnqn2m8]  { animation-delay: 0.25s; }
.ranking-row:nth-child(6)[b-ztbjnqn2m8]  { animation-delay: 0.30s; }
.ranking-row:nth-child(7)[b-ztbjnqn2m8]  { animation-delay: 0.35s; }
.ranking-row:nth-child(8)[b-ztbjnqn2m8]  { animation-delay: 0.40s; }
.ranking-row:nth-child(9)[b-ztbjnqn2m8]  { animation-delay: 0.45s; }
.ranking-row:nth-child(10)[b-ztbjnqn2m8] { animation-delay: 0.50s; }
.ranking-row:nth-child(n+11)[b-ztbjnqn2m8] { animation-delay: 0.55s; }

@keyframes ranking-slideIn-b-ztbjnqn2m8 {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ranking-row:hover[b-ztbjnqn2m8] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

/* --- Top 1: Gold --- */
.ranking-row--top1[b-ztbjnqn2m8] {
    background: rgba(var(--wl-gold-rgb), 0.06);
    border-left: 4px solid var(--wl-gold);
    padding: 0.875rem 1rem;
}

.ranking-row--top1:hover[b-ztbjnqn2m8] {
    background: rgba(var(--wl-gold-rgb), 0.1);
}

/* --- Top 2: Silver --- */
.ranking-row--top2[b-ztbjnqn2m8] {
    background: rgba(192, 192, 192, 0.04);
    border-left: 3px solid rgba(192, 192, 192, 0.5);
}

.ranking-row--top2:hover[b-ztbjnqn2m8] {
    background: rgba(192, 192, 192, 0.07);
}

/* --- Top 3: Bronze --- */
.ranking-row--top3[b-ztbjnqn2m8] {
    background: rgba(205, 127, 50, 0.04);
    border-left: 3px solid rgba(205, 127, 50, 0.5);
}

.ranking-row--top3:hover[b-ztbjnqn2m8] {
    background: rgba(205, 127, 50, 0.07);
}

/* === POSITION === */
.ranking-position[b-ztbjnqn2m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    flex-shrink: 0;
}

/* --- Medal icons - Larger with subtle glow --- */
.ranking-medal[b-ztbjnqn2m8] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ranking-medal--gold[b-ztbjnqn2m8] {
    color: var(--wl-gold);
    filter: drop-shadow(0 0 6px rgba(var(--wl-gold-rgb), 0.3));
}

.ranking-medal--gold svg[b-ztbjnqn2m8] {
    width: 24px;
    height: 24px;
}

.ranking-medal--silver[b-ztbjnqn2m8] {
    color: #C0C0C0;
    filter: drop-shadow(0 0 4px rgba(192, 192, 192, 0.25));
}

.ranking-medal--silver svg[b-ztbjnqn2m8] {
    width: 22px;
    height: 22px;
}

.ranking-medal--bronze[b-ztbjnqn2m8] {
    color: #CD7F32;
    filter: drop-shadow(0 0 4px rgba(205, 127, 50, 0.25));
}

.ranking-medal--bronze svg[b-ztbjnqn2m8] {
    width: 22px;
    height: 22px;
}

/* --- Position number - Bold, centered --- */
.ranking-number[b-ztbjnqn2m8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: rgba(var(--wl-contrast-rgb), 0.3);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    border-radius: 4px;
    background: rgba(var(--wl-contrast-rgb), 0.02);
}

/* === AUTHOR === */
.ranking-author[b-ztbjnqn2m8] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}

.ranking-nickname[b-ztbjnqn2m8] {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.ranking-row--top1 .ranking-nickname[b-ztbjnqn2m8] {
    color: var(--wl-gold);
    font-weight: 700;
}

/* === STATS - Clean mono data display === */
.ranking-stats[b-ztbjnqn2m8] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-shrink: 0;
}

.ranking-stat[b-ztbjnqn2m8] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    letter-spacing: 0.02em;
}

.ranking-stat svg[b-ztbjnqn2m8] {
    flex-shrink: 0;
    opacity: 0.5;
}

.ranking-stat--votes[b-ztbjnqn2m8] {
    color: #22c55e;
}

.ranking-stat--votes svg[b-ztbjnqn2m8] {
    opacity: 0.8;
}

.ranking-stat--covers[b-ztbjnqn2m8] {
    color: var(--wl-gold);
}

.ranking-stat--covers svg[b-ztbjnqn2m8] {
    opacity: 0.8;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .ranking[b-ztbjnqn2m8] {
        padding: 1.25rem 1rem;
    }

    .ranking-title[b-ztbjnqn2m8] {
        font-size: 2rem;
    }

    .ranking-row[b-ztbjnqn2m8] {
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
    }

    .ranking-stats[b-ztbjnqn2m8] {
        gap: 0.5rem;
    }

    .ranking-stat[b-ztbjnqn2m8] {
        font-size: 0.625rem;
    }

    .ranking-stat svg[b-ztbjnqn2m8] {
        width: 12px;
        height: 12px;
    }

    .ranking-number[b-ztbjnqn2m8] {
        width: 24px;
        height: 24px;
        font-size: 0.875rem;
    }
}
/* /Components/Pages/Social/Daily/VoteButtons.razor.rz.scp.css */
/* ==========================================
   VOTE BUTTONS - "Luxury Tabloid" Edition
   Tactile, satisfying press interactions
   ========================================== */

.vote-widget[b-sunvlqhhlr] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* === VOTE BUTTON - Tactile press feel === */
.vote-btn[b-sunvlqhhlr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.35);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
}

.vote-btn svg[b-sunvlqhhlr] {
    width: 18px;
    height: 18px;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Hover --- */
.vote-btn:hover:not(:disabled)[b-sunvlqhhlr] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    color: rgba(var(--wl-contrast-rgb), 0.7);
    transform: scale(1.08);
}

/* --- Press (active state) --- */
.vote-btn:active:not(:disabled)[b-sunvlqhhlr] {
    transform: scale(0.95);
    transition-duration: 0.08s;
}

/* --- Disabled --- */
.vote-btn:disabled[b-sunvlqhhlr] {
    opacity: 0.25;
    cursor: not-allowed;
}

/* === UPVOTE ACTIVE - Solid green fill === */
.vote-btn--up.vote-btn--active[b-sunvlqhhlr] {
    background: rgba(16, 185, 129, 0.2);
    border-color: rgba(16, 185, 129, 0.35);
    color: #10B981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.12);
}

.vote-btn--up.vote-btn--active:hover:not(:disabled)[b-sunvlqhhlr] {
    background: rgba(16, 185, 129, 0.28);
    border-color: rgba(16, 185, 129, 0.45);
    box-shadow: 0 0 16px rgba(16, 185, 129, 0.18);
}

/* === DOWNVOTE ACTIVE - Solid red fill === */
.vote-btn--down.vote-btn--active[b-sunvlqhhlr] {
    background: rgba(var(--wl-red-rgb), 0.2);
    border-color: rgba(var(--wl-red-rgb), 0.35);
    color: var(--wl-red);
    box-shadow: 0 0 12px rgba(var(--wl-red-rgb), 0.12);
}

.vote-btn--down.vote-btn--active:hover:not(:disabled)[b-sunvlqhhlr] {
    background: rgba(var(--wl-red-rgb), 0.28);
    border-color: rgba(var(--wl-red-rgb), 0.45);
    box-shadow: 0 0 16px rgba(var(--wl-red-rgb), 0.18);
}

/* === VOTE COUNT - Commanding number === */
.vote-count[b-sunvlqhhlr] {
    min-width: 32px;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    line-height: 1;
}

.vote-count--positive[b-sunvlqhhlr] {
    color: #10B981;
}

.vote-count--negative[b-sunvlqhhlr] {
    color: var(--wl-red);
}
/* /Components/Pages/Social/FamilyTree/Index.razor.rz.scp.css */
.family-tree-page[b-4hq2nn0dji] {
    max-width: 1040px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 1.5rem;
}

.family-tree-header[b-4hq2nn0dji] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.5rem;
}

.family-tree-back[b-4hq2nn0dji] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.family-tree-back svg[b-4hq2nn0dji] {
    width: 18px;
    height: 18px;
}

.family-tree-tag[b-4hq2nn0dji] {
    display: inline-block;
    color: var(--wl-gold);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.family-tree-header h1[b-4hq2nn0dji] {
    margin: 0.1rem 0;
    color: var(--wl-text-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.4rem;
    letter-spacing: 0.05em;
}

.family-tree-header p[b-4hq2nn0dji] {
    margin: 0;
    color: var(--wl-text-muted);
    font-size: 0.9rem;
}

.family-tree-loading[b-4hq2nn0dji],
.family-tree-empty[b-4hq2nn0dji] {
    padding: 2rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    color: var(--wl-text-muted);
    text-align: center;
}

.family-request-panel[b-4hq2nn0dji] {
    margin-bottom: 1.25rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.035);
}

.family-request-panel[b-4hq2nn0dji] {
    padding: 1rem;
}

.family-request-panel-header[b-4hq2nn0dji] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.family-request-panel-header h2[b-4hq2nn0dji] {
    margin: 0;
    color: var(--wl-text-primary);
    font-size: 1rem;
}

.family-request-panel-header span[b-4hq2nn0dji],
.family-request-type[b-4hq2nn0dji] {
    color: var(--wl-gold);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
}

.family-request-empty[b-4hq2nn0dji],
.family-request-item p[b-4hq2nn0dji] {
    margin: 0;
    color: var(--wl-text-muted);
    font-size: 0.82rem;
}

.family-request-status[b-4hq2nn0dji],
.family-request-error[b-4hq2nn0dji] {
    margin-bottom: 0.75rem;
    padding: 0.55rem 0.7rem;
    border-radius: 6px;
    font-size: 0.82rem;
}

.family-request-status[b-4hq2nn0dji] {
    color: #4ade80;
    background: rgba(34, 197, 94, 0.12);
}

.family-request-error[b-4hq2nn0dji] {
    color: #f87171;
    background: rgba(239, 68, 68, 0.12);
}

.family-request-list[b-4hq2nn0dji] {
    display: grid;
    gap: 0.65rem;
}

.family-request-item[b-4hq2nn0dji] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
}

.family-request-actions[b-4hq2nn0dji] {
    display: flex;
    gap: 0.5rem;
}

.family-request-actions button[b-4hq2nn0dji] {
    min-height: 34px;
    padding: 0 0.75rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.32);
    border-radius: 6px;
    color: var(--wl-text-primary);
    background: rgba(var(--wl-gold-rgb), 0.08);
    cursor: pointer;
}

.family-request-actions button:disabled[b-4hq2nn0dji] {
    cursor: wait;
    opacity: 0.6;
}

.family-tree-diagram[b-4hq2nn0dji] {
    position: relative;
    display: grid;
    gap: 0.95rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 0.35rem 0 1.25rem;
}

.family-tree-generation-band[b-4hq2nn0dji] {
    position: relative;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-height: 128px;
}

.family-tree-generation-band--current[b-4hq2nn0dji] {
    min-height: 210px;
}

.family-tree-generation-label[b-4hq2nn0dji] {
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    text-align: right;
    text-transform: uppercase;
}

.family-tree-generation-scroll[b-4hq2nn0dji] {
    position: relative;
    z-index: 1;
    overflow-x: auto;
    padding: 0.65rem 0.1rem;
}

.family-tree-node-row[b-4hq2nn0dji] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0.75rem;
    min-width: max-content;
}

.family-tree-node-row--compact[b-4hq2nn0dji] {
    gap: 0.65rem;
}

.family-tree-kinship-canvas[b-4hq2nn0dji] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    min-width: 0;
    overflow-x: auto;
    padding: 1rem 0.1rem;
}

.family-tree-side-branch[b-4hq2nn0dji],
.family-tree-couple-branch[b-4hq2nn0dji] {
    position: relative;
    z-index: 1;
}

.family-tree-side-branch[b-4hq2nn0dji] {
    display: grid;
    gap: 0.55rem;
    justify-items: center;
}

.family-tree-sibling-branch[b-4hq2nn0dji] {
    position: relative;
    min-width: 0;
    padding-right: 2.4rem;
}

.family-tree-sibling-branch[b-4hq2nn0dji]::after {
    content: "";
    position: absolute;
    right: -0.6rem;
    top: calc(50% + 0.7rem);
    width: 2.35rem;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.12), rgba(var(--wl-gold-rgb), 0.5));
}

.family-tree-branch-label[b-4hq2nn0dji] {
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    text-transform: uppercase;
}

.family-tree-side-nodes[b-4hq2nn0dji] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
}

.family-tree-couple[b-4hq2nn0dji] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    min-width: max-content;
    overflow-x: visible;
    padding: 0.85rem 0.1rem;
}

.family-tree-marriage-link[b-4hq2nn0dji] {
    position: relative;
    flex: 0 0 42px;
    height: 2px;
    margin: 0 0.12rem;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.32), rgba(var(--wl-gold-rgb), 0.82), rgba(var(--wl-gold-rgb), 0.32));
}

.family-tree-marriage-link[b-4hq2nn0dji]::before,
.family-tree-marriage-link[b-4hq2nn0dji]::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.75);
    border-radius: 50%;
    background: var(--wl-surface);
    transform: translateY(-50%);
}

.family-tree-marriage-link[b-4hq2nn0dji]::before {
    left: -3px;
}

.family-tree-marriage-link[b-4hq2nn0dji]::after {
    right: -3px;
}

.family-tree-parent-child-link[b-4hq2nn0dji] {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 1rem;
    height: 82px;
    margin: -3.3rem 0 -0.65rem;
    pointer-events: none;
}

.family-tree-parent-child-link[b-4hq2nn0dji]::before {
    content: "";
    grid-column: 2;
    width: 1px;
    height: 100%;
    justify-self: center;
    background: linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.5), rgba(236, 72, 153, 0.28));
    box-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.18);
}

.family-tree-parent-child-link[b-4hq2nn0dji]::after {
    content: "";
    grid-column: 2;
    width: 9px;
    height: 9px;
    align-self: center;
    justify-self: center;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.55);
    border-radius: 50%;
    background: var(--wl-surface);
}

.family-tree-node[b-4hq2nn0dji] {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 0.28rem;
    width: 138px;
    min-height: 122px;
    padding: 0.75rem 0.65rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    color: var(--wl-text-secondary);
    text-align: center;
    text-decoration: none;
    background: rgba(var(--wl-surface-rgb), 0.92);
}

.family-tree-node--side[b-4hq2nn0dji] {
    width: 124px;
    min-height: 110px;
    background: rgba(var(--wl-contrast-rgb), 0.035);
}

.family-tree-node:hover[b-4hq2nn0dji] {
    border-color: rgba(var(--wl-gold-rgb), 0.38);
    color: var(--wl-gold);
}

.family-tree-node--root[b-4hq2nn0dji] {
    width: 148px;
    min-height: 132px;
    border-color: rgba(var(--wl-gold-rgb), 0.7);
    box-shadow: 0 0 0 1px rgba(var(--wl-gold-rgb), 0.1), inset 0 0 28px rgba(var(--wl-gold-rgb), 0.08);
    background: linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.14), rgba(var(--wl-surface-rgb), 0.92));
}

.family-tree-node--spouse[b-4hq2nn0dji] {
    border-color: rgba(236, 72, 153, 0.4);
    background: linear-gradient(180deg, rgba(236, 72, 153, 0.09), rgba(var(--wl-surface-rgb), 0.92));
}

.family-tree-node img[b-4hq2nn0dji] {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    object-fit: cover;
}

.family-tree-node span[b-4hq2nn0dji],
.family-tree-node small[b-4hq2nn0dji],
.family-tree-node em[b-4hq2nn0dji] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.family-tree-node span[b-4hq2nn0dji] {
    color: var(--wl-text-primary);
    font-size: 0.88rem;
}

.family-tree-node small[b-4hq2nn0dji],
.family-tree-node em[b-4hq2nn0dji] {
    color: var(--wl-text-muted);
    font-size: 0.68rem;
    font-style: normal;
}

.family-tree-node em[b-4hq2nn0dji] {
    color: var(--wl-gold);
}

@media (max-width: 760px) {
    .family-tree-page[b-4hq2nn0dji] {
        padding: 1rem;
    }

    .family-request-item[b-4hq2nn0dji],
    .family-request-actions[b-4hq2nn0dji] {
        align-items: stretch;
        flex-direction: column;
    }

    .family-tree-generation-band[b-4hq2nn0dji] {
        grid-template-columns: 1fr;
        gap: 0.45rem;
        min-height: auto;
    }

    .family-tree-generation-label[b-4hq2nn0dji] {
        justify-content: flex-start;
        text-align: left;
    }

    .family-tree-kinship-canvas[b-4hq2nn0dji] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.85rem;
        overflow-x: visible;
    }

    .family-tree-side-branch[b-4hq2nn0dji] {
        justify-items: start;
        order: 2;
    }

    .family-tree-sibling-branch[b-4hq2nn0dji] {
        padding-right: 0;
    }

    .family-tree-sibling-branch[b-4hq2nn0dji]::after {
        display: none;
    }

    .family-tree-side-nodes[b-4hq2nn0dji] {
        justify-content: flex-start;
    }

    .family-tree-couple[b-4hq2nn0dji] {
        justify-content: flex-start;
    }

    .family-tree-node-row[b-4hq2nn0dji] {
        justify-content: flex-start;
    }

    .family-tree-marriage-link[b-4hq2nn0dji] {
        flex-basis: 36px;
    }

    .family-tree-parent-child-link[b-4hq2nn0dji] {
        grid-template-columns: 1fr;
        height: 28px;
        margin: -0.25rem 0;
    }

    .family-tree-parent-child-link[b-4hq2nn0dji]::before,
    .family-tree-parent-child-link[b-4hq2nn0dji]::after {
        grid-column: 1;
        justify-self: start;
        margin-left: 69px;
    }
}
/* /Components/Pages/Social/Fandoms/Detail.razor.rz.scp.css */
.fandom-detail[b-yhmehtdwq7] { max-width: 62rem; margin: 0 auto; color: rgb(var(--wl-text-primary-rgb)); }
.fandom-detail__back[b-yhmehtdwq7] { display: inline-flex; margin-bottom: 1rem; color: rgb(var(--wl-gold-rgb)); font-weight: 800; text-decoration: none; }
.fandom-detail__card[b-yhmehtdwq7], .fandom-detail__actions[b-yhmehtdwq7], .fandom-detail__readonly[b-yhmehtdwq7], .fandom-detail__state[b-yhmehtdwq7] { border: 1px solid rgba(var(--wl-champagne-rgb), .16); border-radius: 8px; background: var(--wl-panel-grad), rgb(var(--wl-bg-secondary-rgb)); padding: 1.25rem; box-shadow: var(--wl-panel-shadow); }
.fandom-detail__card header[b-yhmehtdwq7] { display: flex; align-items: center; gap: 1rem; }
.fandom-detail__faces[b-yhmehtdwq7] { display: flex; }
.fandom-detail__faces img[b-yhmehtdwq7] { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; border: 2px solid rgb(var(--wl-gold-rgb)); }
.fandom-detail__faces img + img[b-yhmehtdwq7] { margin-left: -1.2rem; }
.fandom-detail h1[b-yhmehtdwq7] { margin: .2rem 0; font-family: var(--font-display); font-size: clamp(2rem, 5vw, 4rem); line-height: 1; }
.fandom-detail h1 small[b-yhmehtdwq7] { color: rgba(var(--wl-text-primary-rgb), .5); font-size: .45em; }
.fandom-detail__topic[b-yhmehtdwq7] { padding: .75rem; background: rgba(var(--wl-gold-rgb), .08); border-radius: 6px; }
.fandom-detail__metrics[b-yhmehtdwq7] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.fandom-detail__card footer[b-yhmehtdwq7] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-top: 1rem; color: rgba(var(--wl-text-primary-rgb), .62); }
.fandom-detail__actions[b-yhmehtdwq7], .fandom-detail__readonly[b-yhmehtdwq7] { margin-top: 1rem; }
.fandom-detail__action-header[b-yhmehtdwq7] { display: flex; justify-content: space-between; align-items: center; }
.fandom-detail__action-grid[b-yhmehtdwq7] { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }
.fandom-detail__action-grid button[b-yhmehtdwq7] { display: grid; gap: .2rem; padding: .75rem; border: 1px solid rgba(var(--wl-gold-rgb), .3); border-radius: 6px; background: rgba(var(--wl-gold-rgb), .08); color: inherit; cursor: pointer; }
.fandom-detail__action-grid button:disabled[b-yhmehtdwq7] { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) { .fandom-detail__metrics[b-yhmehtdwq7] { grid-template-columns: 1fr; } .fandom-detail__card header[b-yhmehtdwq7] { align-items: flex-start; } }
/* /Components/Pages/Social/Fandoms/FandomMetric.razor.rz.scp.css */
.fandom-metric[b-qzo9e5o2bw] {
    min-width: 0;
    padding: .65rem .75rem;
    border: 1px solid rgba(var(--wl-champagne-rgb), .1);
    border-radius: 10px;
    background: rgba(var(--wl-contrast-rgb), .025);
}

.fandom-metric__heading[b-qzo9e5o2bw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    color: var(--wl-text-muted);
    font-size: .75rem;
    line-height: 1.2;
}

.fandom-metric__heading span[b-qzo9e5o2bw] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.fandom-metric__heading strong[b-qzo9e5o2bw] {
    flex: 0 0 auto;
    color: var(--wl-text-primary);
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

.fandom-metric__track[b-qzo9e5o2bw] {
    height: 7px;
    margin-top: .45rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), .09);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3);
}

.fandom-metric__fill[b-qzo9e5o2bw] {
    display: block;
    width: var(--fandom-meter-value);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #94a3b8, #cbd5e1);
    box-shadow: 0 0 12px rgba(148, 163, 184, .3);
    transition: width .25s ease;
}

.fandom-metric--hot .fandom-metric__fill[b-qzo9e5o2bw],
.fandom-metric--bad .fandom-metric__fill[b-qzo9e5o2bw] {
    background: linear-gradient(90deg, #f97316, #ef4444);
    box-shadow: 0 0 12px rgba(239, 68, 68, .32);
}

.fandom-metric--good .fandom-metric__fill[b-qzo9e5o2bw] {
    background: linear-gradient(90deg, #22c55e, #14b8a6);
    box-shadow: 0 0 12px rgba(20, 184, 166, .3);
}

.fandom-metric--tired .fandom-metric__fill[b-qzo9e5o2bw] {
    background: linear-gradient(90deg, #8b5cf6, #6366f1);
    box-shadow: 0 0 12px rgba(99, 102, 241, .3);
}

@media (prefers-reduced-motion: reduce) {
    .fandom-metric__fill[b-qzo9e5o2bw] {
        transition: none;
    }
}
/* /Components/Pages/Social/Fandoms/FandomMobilizeConfirmDialog.razor.rz.scp.css */
.fandom-confirm__backdrop[b-sthvpl3wi1] {
    position: fixed;
    inset: 0;
    z-index: 9200;
    display: grid;
    place-items: center;
    overflow-y: auto;
    padding: 1rem;
    background: rgba(2, 6, 14, .78);
    backdrop-filter: blur(8px);
    animation: fandom-confirm-fade-b-sthvpl3wi1 .16s ease-out;
}

.fandom-confirm[b-sthvpl3wi1] {
    position: relative;
    width: min(29rem, 100%);
    padding: 2rem;
    border: 1px solid rgba(249, 115, 22, .42);
    border-radius: 18px;
    outline: none;
    background:
        radial-gradient(circle at 50% 0, rgba(249, 115, 22, .14), transparent 42%),
        linear-gradient(145deg, rgba(var(--wl-bg-modal-rgb), .99), rgba(var(--wl-bg-modal-deep-rgb), .99));
    box-shadow: 0 28px 90px rgba(0, 0, 0, .55), 0 0 42px rgba(239, 68, 68, .09);
    color: var(--wl-text-primary);
    text-align: center;
    animation: fandom-confirm-enter-b-sthvpl3wi1 .18s ease-out;
}

.fandom-confirm:focus-visible[b-sthvpl3wi1] {
    box-shadow: 0 0 0 3px rgba(251, 146, 60, .32), 0 28px 90px rgba(0, 0, 0, .55);
}

.fandom-confirm__close[b-sthvpl3wi1] {
    position: absolute;
    top: .75rem;
    right: .75rem;
    display: grid;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    padding: .7rem;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: var(--wl-text-muted);
    cursor: pointer;
}

.fandom-confirm__close:hover:not(:disabled)[b-sthvpl3wi1],
.fandom-confirm__close:focus-visible[b-sthvpl3wi1] {
    border-color: var(--wl-border-medium);
    background: rgba(var(--wl-contrast-rgb), .05);
    color: var(--wl-text-primary);
    outline: none;
}

.fandom-confirm__close svg[b-sthvpl3wi1] {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

.fandom-confirm__icon[b-sthvpl3wi1] {
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    margin: 0 auto 1rem;
    border: 1px solid rgba(249, 115, 22, .42);
    border-radius: 50%;
    background: rgba(249, 115, 22, .12);
    box-shadow: 0 0 24px rgba(249, 115, 22, .14);
    color: #fb923c;
    font: 2rem/1 'Bebas Neue', sans-serif;
}

.fandom-confirm h2[b-sthvpl3wi1] {
    margin: 0;
    font: 2rem/1 'Bebas Neue', sans-serif;
    letter-spacing: .045em;
}

.fandom-confirm p[b-sthvpl3wi1] {
    max-width: 24rem;
    margin: .8rem auto 0;
    color: var(--wl-text-muted);
    line-height: 1.55;
}

.fandom-confirm__cost[b-sthvpl3wi1] {
    display: inline-flex;
    margin-top: 1rem;
    padding: .4rem .65rem;
    border: 1px solid rgba(251, 191, 36, .28);
    border-radius: 999px;
    background: rgba(251, 191, 36, .08);
    color: #fbbf24;
    font-size: .75rem;
    letter-spacing: .08em;
}

.fandom-confirm__actions[b-sthvpl3wi1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    margin-top: 1.5rem;
}

.fandom-confirm__actions button[b-sthvpl3wi1] {
    min-height: 2.75rem;
    padding: .65rem 1rem;
    border-radius: 10px;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
}

.fandom-confirm__cancel[b-sthvpl3wi1] {
    border: 1px solid var(--wl-border-medium);
    background: rgba(var(--wl-contrast-rgb), .035);
    color: var(--wl-text-primary);
}

.fandom-confirm__submit[b-sthvpl3wi1] {
    border: 1px solid rgba(239, 68, 68, .52);
    background: linear-gradient(135deg, rgba(249, 115, 22, .2), rgba(239, 68, 68, .2));
    color: #fed7aa;
}

.fandom-confirm__actions button:hover:not(:disabled)[b-sthvpl3wi1],
.fandom-confirm__actions button:focus-visible[b-sthvpl3wi1] {
    outline: none;
    transform: translateY(-1px);
    filter: brightness(1.15);
}

.fandom-confirm__actions button:focus-visible[b-sthvpl3wi1] {
    box-shadow: 0 0 0 3px rgba(251, 146, 60, .26);
}

.fandom-confirm__actions button:disabled[b-sthvpl3wi1],
.fandom-confirm__close:disabled[b-sthvpl3wi1] {
    opacity: .52;
    cursor: wait;
}

.fandom-confirm__spinner[b-sthvpl3wi1] {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    margin-right: .4rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -.1rem;
    animation: fandom-confirm-spin-b-sthvpl3wi1 .65s linear infinite;
}

@keyframes fandom-confirm-fade-b-sthvpl3wi1 {
    from { opacity: 0; }
}

@keyframes fandom-confirm-enter-b-sthvpl3wi1 {
    from { opacity: 0; transform: translateY(.75rem) scale(.98); }
}

@keyframes fandom-confirm-spin-b-sthvpl3wi1 {
    to { transform: rotate(360deg); }
}

@media (max-width: 440px) {
    .fandom-confirm[b-sthvpl3wi1] {
        padding: 1.5rem 1rem 1rem;
    }

    .fandom-confirm__actions[b-sthvpl3wi1] {
        grid-template-columns: 1fr;
    }

    .fandom-confirm__submit[b-sthvpl3wi1] {
        grid-row: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fandom-confirm__backdrop[b-sthvpl3wi1],
    .fandom-confirm[b-sthvpl3wi1],
    .fandom-confirm__spinner[b-sthvpl3wi1] {
        animation-duration: .001ms;
    }
}
/* /Components/Pages/Social/Fandoms/Index.razor.rz.scp.css */
.fandom-wars[b-ss8g7almy2] {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}

.fandom-wars__header[b-ss8g7almy2] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.fandom-wars__header h1[b-ss8g7almy2] {
    margin: .15rem 0;
    font: 2.25rem/1 'Bebas Neue', sans-serif;
    letter-spacing: .04em;
}

.fandom-wars__header p[b-ss8g7almy2] { margin: 0; color: var(--wl-text-muted); }
.fandom-wars__kicker[b-ss8g7almy2] { color: #f97316; font-size: .7rem; font-weight: 800; letter-spacing: .2em; }
.fandom-wars__back[b-ss8g7almy2] { color: var(--wl-text-primary); text-decoration: none; font-size: 1.5rem; padding: .65rem; }
.fandom-wars__influence[b-ss8g7almy2] { text-align: right; padding: .75rem 1rem; border: 1px solid var(--wl-border-medium); border-radius: 14px; }
.fandom-wars__influence span[b-ss8g7almy2] { display: block; color: var(--wl-text-muted); font-size: .7rem; text-transform: uppercase; }
.fandom-wars__influence strong[b-ss8g7almy2] { font-size: 1.35rem; color: #fbbf24; }

.fandom-wars__notice[b-ss8g7almy2] { padding: .8rem 1rem; border-radius: 12px; margin-bottom: 1rem; }
.fandom-wars__notice--success[b-ss8g7almy2] { background: rgba(34,197,94,.12); color: #86efac; }
.fandom-wars__notice--error[b-ss8g7almy2] { background: rgba(239,68,68,.12); color: #fca5a5; }
.fandom-wars__loading[b-ss8g7almy2], .fandom-wars__empty[b-ss8g7almy2] { min-height: 45vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; text-align: center; color: var(--wl-text-muted); }
.fandom-wars__loading span[b-ss8g7almy2] { width: 32px; height: 32px; border: 3px solid var(--wl-border-medium); border-top-color: #f97316; border-radius: 50%; animation: fandom-spin-b-ss8g7almy2 .8s linear infinite; }
@keyframes fandom-spin-b-ss8g7almy2 { to { transform: rotate(360deg); } }
.fandom-wars__empty h2[b-ss8g7almy2] { color: var(--wl-text-primary); margin: 0; }
.fandom-wars__empty p[b-ss8g7almy2] { max-width: 480px; margin: 0; }
.fandom-wars__empty a[b-ss8g7almy2] { color: #fb923c; }
.fandom-wars__empty-icon[b-ss8g7almy2] { font-size: 3rem; }
.fandom-wars__list[b-ss8g7almy2] { display: grid; gap: 1rem; }

.fandom-war-card[b-ss8g7almy2] {
    padding: 1.25rem;
    border: 1px solid rgba(249,115,22,.22);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(var(--wl-bg-modal-rgb),.96), rgba(var(--wl-bg-modal-deep-rgb),.9));
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
}
.fandom-war-card--war[b-ss8g7almy2] { border-color: rgba(239,68,68,.55); box-shadow: 0 18px 50px rgba(239,68,68,.12); }
.fandom-war-card--cooling[b-ss8g7almy2] { border-color: rgba(59,130,246,.28); }
.fandom-war-card__top[b-ss8g7almy2] { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 1rem; }
.fandom-war-card__top img[b-ss8g7almy2] { width: 62px; height: 62px; object-fit: cover; border-radius: 50%; border: 2px solid rgba(249,115,22,.4); }
.fandom-war-card__identity h2[b-ss8g7almy2] { margin: .1rem 0; font-size: 1.3rem; }
.fandom-war-card__identity h2 a[b-ss8g7almy2] { color: inherit; text-decoration: none; }
.fandom-war-card__identity h2 a:hover[b-ss8g7almy2] { color: rgb(var(--wl-gold-rgb)); }
.fandom-war-card__identity p[b-ss8g7almy2] { margin: 0; color: var(--wl-text-muted); font-size: .85rem; }
.fandom-war-card__stage[b-ss8g7almy2] { font-size: .65rem; color: #fb923c; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
.fandom-war-card__intensity[b-ss8g7almy2] { font-size: 1.7rem; color: #fb7185; }
.fandom-war-card__intensity small[b-ss8g7almy2] { font-size: .7rem; color: var(--wl-text-muted); }
.fandom-war-card__topic[b-ss8g7almy2] { margin-top: 1rem; padding: .65rem .8rem; background: rgba(var(--wl-contrast-rgb),.035); border-radius: 10px; color: var(--wl-text-muted); font-size: .85rem; }
.fandom-war-card__metrics[b-ss8g7almy2] { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 1rem; margin: 1.1rem 0; }
.fandom-war-card__actions[b-ss8g7almy2] { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .5rem; }
.fandom-war-card__cooldown[b-ss8g7almy2] { margin: -.25rem 0 .75rem; padding: .55rem .7rem; border-radius: 9px; background: rgba(59,130,246,.1); color: #93c5fd; font-size: .75rem; }
.fandom-war-action[b-ss8g7almy2] { min-height: 48px; border: 1px solid var(--wl-border-medium); border-radius: 11px; background: rgba(var(--wl-contrast-rgb),.04); color: var(--wl-text-primary); cursor: pointer; padding: .5rem; font: inherit; }
.fandom-war-action:hover:not(:disabled)[b-ss8g7almy2] { border-color: #fb923c; transform: translateY(-1px); }
.fandom-war-action:disabled[b-ss8g7almy2] { opacity: .42; cursor: not-allowed; }
.fandom-war-action span[b-ss8g7almy2], .fandom-war-action small[b-ss8g7almy2] { display: block; }
.fandom-war-action span[b-ss8g7almy2] { font-size: .78rem; font-weight: 700; }
.fandom-war-action small[b-ss8g7almy2] { margin-top: .2rem; color: #fbbf24; font-size: .62rem; }
.fandom-war-action--mobilize[b-ss8g7almy2] { border-color: rgba(239,68,68,.32); }
.fandom-war-action--apologize[b-ss8g7almy2], .fandom-war-action--ceasefire[b-ss8g7almy2] { border-color: rgba(34,197,94,.25); }
.fandom-war-card footer[b-ss8g7almy2] { display: flex; justify-content: space-between; margin-top: 1rem; color: var(--wl-text-muted); font-size: .68rem; }

@media (max-width: 700px) {
    .fandom-wars__header[b-ss8g7almy2] { grid-template-columns: auto 1fr; }
    .fandom-wars__influence[b-ss8g7almy2] { grid-column: 2; justify-self: start; text-align: left; }
    .fandom-war-card__metrics[b-ss8g7almy2] { grid-template-columns: 1fr; }
    .fandom-war-card__actions[b-ss8g7almy2] { grid-template-columns: repeat(2, 1fr); }
    .fandom-war-card footer[b-ss8g7almy2] { flex-direction: column; gap: .25rem; }
}
/* /Components/Pages/Social/Following/Index.razor.rz.scp.css */
.following-page[b-7p6apprivw] {
    position: relative;
    isolation: isolate;
    width: min(100%, 1180px);
    min-height: calc(100vh - 5rem);
    margin: 0 auto;
    padding: clamp(0.5rem, 2vw, 1.5rem) 0 4rem;
}

.following-atmosphere[b-7p6apprivw] {
    position: fixed;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.following-orb[b-7p6apprivw] {
    position: absolute;
    width: 38rem;
    height: 38rem;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.1;
}

.following-orb--cyan[b-7p6apprivw] { top: -12rem; right: -10rem; background: rgb(var(--wl-cyan-rgb)); }
.following-orb--gold[b-7p6apprivw] { bottom: -18rem; left: -12rem; background: var(--wl-gold); }

.following-grid[b-7p6apprivw] {
    position: absolute;
    inset: 0;
    opacity: 0.18;
    background-image: linear-gradient(rgba(var(--wl-contrast-rgb), 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--wl-contrast-rgb), 0.025) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at 75% 10%, black, transparent 68%);
}

.following-hero[b-7p6apprivw] {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(12rem, 22rem);
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    min-height: 17rem;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    overflow: hidden;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 28px;
    background:
        linear-gradient(115deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.94) 58%, rgba(var(--wl-cyan-rgb), 0.08) 100%);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.28), inset 0 1px rgba(var(--wl-contrast-rgb), 0.07);
}

.following-hero[b-7p6apprivw]::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-contrast-rgb), 0.035), transparent);
    transform: translateX(-100%);
    animation: following-sheen-b-7p6apprivw 9s ease-in-out infinite;
    pointer-events: none;
}

.following-back[b-7p6apprivw] {
    align-self: start;
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 50%;
    background: rgba(var(--wl-contrast-rgb), 0.035);
    color: var(--wl-text-secondary);
    transition: transform 160ms ease, color 160ms ease, border-color 160ms ease;
}

.following-back:hover[b-7p6apprivw] { transform: translateX(-3px); color: var(--wl-gold); border-color: rgba(var(--wl-gold-rgb), 0.32); }
.following-back svg[b-7p6apprivw] { width: 1.2rem; height: 1.2rem; }

.following-hero-copy[b-7p6apprivw] { z-index: 1; min-width: 0; }
.following-kicker[b-7p6apprivw] { color: rgb(var(--wl-cyan-rgb)); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.22em; text-transform: uppercase; }
.following-hero-copy h1[b-7p6apprivw] { max-width: 100%; margin: 0.45rem 0 0; color: var(--wl-text-primary); font-family: 'Bebas Neue', sans-serif; font-size: clamp(4rem, 7vw, 6.6rem); font-weight: 400; letter-spacing: 0.01em; line-height: 0.82; text-shadow: 0 12px 45px rgba(0, 0, 0, 0.35); }
.following-hero-copy p[b-7p6apprivw] { max-width: 40rem; margin: 1.3rem 0 0; color: var(--wl-text-secondary); font-size: clamp(0.92rem, 1.5vw, 1.08rem); line-height: 1.65; }

.following-signal[b-7p6apprivw] { position: relative; justify-self: center; width: min(15rem, 20vw); aspect-ratio: 1; }
.following-signal-core[b-7p6apprivw] { position: absolute; inset: 42%; border-radius: 50%; background: var(--wl-gold); box-shadow: 0 0 45px rgba(var(--wl-gold-rgb), 0.65); }
.following-signal-ring[b-7p6apprivw] { position: absolute; border: 1px solid rgba(var(--wl-cyan-rgb), 0.3); border-radius: 50%; }
.following-signal-ring--one[b-7p6apprivw] { inset: 23%; animation: following-orbit-b-7p6apprivw 16s linear infinite; }
.following-signal-ring--two[b-7p6apprivw] { inset: 5%; border-color: rgba(var(--wl-gold-rgb), 0.22); animation: following-orbit-b-7p6apprivw 26s linear infinite reverse; }
.following-signal-node[b-7p6apprivw] { position: absolute; width: 0.75rem; height: 0.75rem; border: 2px solid rgb(var(--wl-bg-modal-deep-rgb)); border-radius: 50%; background: rgb(var(--wl-cyan-rgb)); box-shadow: 0 0 16px rgba(var(--wl-cyan-rgb), 0.8); }
.following-signal-node--one[b-7p6apprivw] { top: 21%; left: 47%; }
.following-signal-node--two[b-7p6apprivw] { right: 14%; bottom: 25%; background: var(--wl-gold); box-shadow: 0 0 16px rgba(var(--wl-gold-rgb), 0.75); }
.following-signal-node--three[b-7p6apprivw] { left: 12%; bottom: 24%; }

.following-loading[b-7p6apprivw] { display: grid; justify-items: center; gap: 1rem; min-height: 25rem; padding: 7rem 1rem; color: var(--wl-text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; }
.following-loading-ring[b-7p6apprivw] { width: 2.6rem; height: 2.6rem; border: 2px solid rgba(var(--wl-gold-rgb), 0.16); border-top-color: var(--wl-gold); border-radius: 50%; animation: following-spin-b-7p6apprivw 800ms linear infinite; }

.following-metrics[b-7p6apprivw] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0; }
.following-metric[b-7p6apprivw] { display: flex; align-items: center; gap: 1rem; min-height: 6.2rem; padding: 1rem 1.25rem; border: 1px solid rgba(var(--wl-contrast-rgb), 0.08); border-radius: 18px; background: linear-gradient(145deg, rgba(var(--wl-bg-modal-rgb), 0.9), rgba(var(--wl-bg-modal-deep-rgb), 0.92)); color: inherit; text-align: left; box-shadow: inset 0 1px rgba(var(--wl-contrast-rgb), 0.04); transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.following-metric:hover[b-7p6apprivw], .following-metric.is-active[b-7p6apprivw] { transform: translateY(-3px); border-color: rgba(var(--wl-gold-rgb), 0.28); background: linear-gradient(145deg, rgba(var(--wl-bg-modal-rgb), 0.98), rgba(var(--wl-gold-rgb), 0.06)); }
.following-metric-icon[b-7p6apprivw] { display: grid; place-items: center; flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: 16px; }
.following-metric-icon svg[b-7p6apprivw] { width: 1.5rem; height: 1.5rem; }
.following-metric-icon--cyan[b-7p6apprivw] { background: rgba(var(--wl-cyan-rgb), 0.11); color: rgb(var(--wl-cyan-rgb)); }
.following-metric-icon--gold[b-7p6apprivw] { background: rgba(var(--wl-gold-rgb), 0.11); color: var(--wl-gold); }
.following-metric-icon--purple[b-7p6apprivw] { background: rgba(var(--wl-purple-rgb), 0.12); color: var(--wl-purple); }
.following-metric > span:last-child[b-7p6apprivw] { display: grid; }
.following-metric strong[b-7p6apprivw] { color: var(--wl-text-primary); font-family: 'Bebas Neue', sans-serif; font-size: 2rem; font-weight: 400; line-height: 1; }
.following-metric small[b-7p6apprivw] { margin-top: 0.2rem; color: var(--wl-text-muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }

.following-console[b-7p6apprivw] { overflow: hidden; border: 1px solid rgba(var(--wl-contrast-rgb), 0.08); border-radius: 24px; background: rgba(var(--wl-bg-modal-rgb), 0.86); box-shadow: 0 28px 75px rgba(0, 0, 0, 0.22); backdrop-filter: blur(18px); }
.following-console-header[b-7p6apprivw] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.07); }
.following-tabs[b-7p6apprivw] { display: flex; align-items: center; gap: 0.35rem; }
.following-tabs button[b-7p6apprivw], .following-filters button[b-7p6apprivw] { min-height: 2.55rem; padding: 0 0.9rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--wl-text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; transition: color 160ms ease, border-color 160ms ease, background 160ms ease; }
.following-tabs button span[b-7p6apprivw] { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; margin-left: 0.35rem; padding: 0 0.3rem; border-radius: 999px; background: rgba(var(--wl-contrast-rgb), 0.07); font-size: 0.6rem; }
.following-tabs button:hover[b-7p6apprivw], .following-tabs button.is-active[b-7p6apprivw] { color: var(--wl-gold); }
.following-tabs button.is-active[b-7p6apprivw] { border-color: rgba(var(--wl-gold-rgb), 0.25); background: rgba(var(--wl-gold-rgb), 0.08); }

.following-search[b-7p6apprivw] { display: flex; align-items: center; gap: 0.6rem; width: min(100%, 19rem); min-height: 2.75rem; padding: 0 0.85rem; border: 1px solid rgba(var(--wl-contrast-rgb), 0.1); border-radius: 999px; background: rgba(var(--wl-bg-primary-rgb), 0.35); color: var(--wl-text-muted); transition: border-color 160ms ease, box-shadow 160ms ease; }
.following-search:focus-within[b-7p6apprivw] { border-color: rgba(var(--wl-cyan-rgb), 0.38); box-shadow: 0 0 0 3px rgba(var(--wl-cyan-rgb), 0.08); }
.following-search svg[b-7p6apprivw] { flex: 0 0 auto; width: 1rem; height: 1rem; }
.following-search input[b-7p6apprivw] { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--wl-text-primary); font-size: 0.82rem; }
.following-search input[b-7p6apprivw]::placeholder { color: var(--wl-text-muted); }
.following-search button[b-7p6apprivw] { border: 0; background: transparent; color: var(--wl-text-muted); font-size: 1.15rem; }

.following-filters[b-7p6apprivw] { display: flex; gap: 0.25rem; padding: 0.8rem 1rem 0; }
.following-filters button[b-7p6apprivw] { min-height: 2.2rem; padding: 0 0.75rem; font-size: 0.6rem; }
.following-filters button:hover[b-7p6apprivw], .following-filters button.is-active[b-7p6apprivw] { background: rgba(var(--wl-cyan-rgb), 0.08); color: rgb(var(--wl-cyan-rgb)); }

.following-list[b-7p6apprivw] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; padding: 1rem; }
.following-card[b-7p6apprivw] { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 8rem; padding: 1rem; overflow: hidden; border: 1px solid rgba(var(--wl-contrast-rgb), 0.07); border-radius: 18px; background: linear-gradient(135deg, rgba(var(--wl-contrast-rgb), 0.045), rgba(var(--wl-contrast-rgb), 0.012)); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.following-card[b-7p6apprivw]::after { content: ''; position: absolute; right: -3rem; bottom: -4rem; width: 9rem; height: 9rem; border-radius: 50%; background: rgba(var(--wl-cyan-rgb), 0.07); filter: blur(22px); pointer-events: none; }
.following-card.is-fan[b-7p6apprivw]::after { background: rgba(var(--wl-purple-rgb), 0.09); }
.following-card:hover[b-7p6apprivw] { z-index: 1; transform: translateY(-3px); border-color: rgba(var(--wl-gold-rgb), 0.26); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18); }

.following-avatar[b-7p6apprivw] { position: relative; z-index: 1; display: grid; place-items: center; flex: 0 0 auto; width: 4.25rem; height: 4.25rem; border-radius: 20px; }
.following-avatar--character[b-7p6apprivw] { padding: 2px; background: linear-gradient(145deg, var(--wl-gold), rgb(var(--wl-cyan-rgb))); }
.following-avatar--character img[b-7p6apprivw] { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; border: 3px solid rgb(var(--wl-bg-modal-deep-rgb)); border-radius: 18px; background: var(--wl-bg-tertiary); }
.following-avatar--fan[b-7p6apprivw] { overflow: visible; background: radial-gradient(circle at 32% 25%, color-mix(in srgb, var(--fan-color) 70%, white), var(--fan-color)); color: white; font-family: 'Bebas Neue', sans-serif; font-size: 2rem; box-shadow: 0 10px 25px color-mix(in srgb, var(--fan-color) 22%, transparent); }
.following-avatar--fan[b-7p6apprivw]::before { content: ''; position: absolute; inset: -5px; border: 1px solid color-mix(in srgb, var(--fan-color) 45%, transparent); border-radius: 24px; }
.following-avatar--fan i[b-7p6apprivw] { position: absolute; right: -0.25rem; bottom: -0.2rem; width: 1rem; height: 1rem; border: 3px solid rgb(var(--wl-bg-modal-deep-rgb)); border-radius: 50%; background: var(--fan-color); box-shadow: 0 0 12px var(--fan-color); }

.following-card-copy[b-7p6apprivw] { z-index: 1; min-width: 0; }
.following-card-name-row[b-7p6apprivw] { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.following-card-name-row strong[b-7p6apprivw] { overflow: hidden; color: var(--wl-text-primary); font-size: 1rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.following-card-name-row a[b-7p6apprivw] { color: inherit; text-decoration: none; }
.following-card-name-row a:hover[b-7p6apprivw] { color: var(--wl-gold); }
.following-fan-badge[b-7p6apprivw] { flex: 0 0 auto; padding: 0.22rem 0.45rem; border: 1px solid rgba(var(--wl-purple-rgb), 0.24); border-radius: 999px; background: rgba(var(--wl-purple-rgb), 0.09); color: var(--wl-purple); font-family: 'JetBrains Mono', monospace; font-size: 0.52rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.following-card-handle[b-7p6apprivw] { display: flex; flex-wrap: wrap; gap: 0.55rem; min-height: 1rem; margin-top: 0.28rem; color: rgb(var(--wl-cyan-rgb)); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; }
.following-card-handle span + span[b-7p6apprivw] { color: var(--wl-purple); }
.following-card-stats[b-7p6apprivw] { display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; margin-top: 0.75rem; color: var(--wl-text-muted); font-size: 0.68rem; }
.following-card-stats strong[b-7p6apprivw] { color: var(--wl-text-secondary); }

.following-card-action[b-7p6apprivw] { z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 2.65rem; min-height: 2.65rem; padding: 0 0.85rem; border: 1px solid transparent; border-radius: 999px; background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light)); color: rgb(var(--wl-bg-modal-deep-rgb)); font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease; }
.following-card-action:hover:not(:disabled)[b-7p6apprivw] { transform: translateY(-2px); }
.following-card-action.is-following[b-7p6apprivw] { border-color: rgba(var(--wl-cyan-rgb), 0.26); background: rgba(var(--wl-cyan-rgb), 0.08); color: rgb(var(--wl-cyan-rgb)); }
.following-card-action:disabled[b-7p6apprivw] { opacity: 0.55; }
.following-card-action svg[b-7p6apprivw], .following-card-spinner[b-7p6apprivw] { width: 0.95rem; height: 0.95rem; }
.following-card-spinner[b-7p6apprivw] { border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: following-spin-b-7p6apprivw 700ms linear infinite; }

.following-empty[b-7p6apprivw] { display: grid; justify-items: center; min-height: 25rem; padding: 5rem 1.5rem; text-align: center; }
.following-empty-symbol[b-7p6apprivw] { display: grid; place-items: center; width: 6rem; height: 6rem; margin-bottom: 1.4rem; border: 1px solid rgba(var(--wl-cyan-rgb), 0.25); border-radius: 50%; background: radial-gradient(circle, rgba(var(--wl-cyan-rgb), 0.12), transparent 68%); color: rgb(var(--wl-cyan-rgb)); box-shadow: 0 0 45px rgba(var(--wl-cyan-rgb), 0.08); }
.following-empty-symbol svg[b-7p6apprivw] { width: 2.5rem; height: 2.5rem; }
.following-empty h2[b-7p6apprivw] { margin: 0; color: var(--wl-text-primary); font-family: 'Bebas Neue', sans-serif; font-size: 2.25rem; font-weight: 400; letter-spacing: 0.03em; }
.following-empty p[b-7p6apprivw] { max-width: 32rem; margin: 0.65rem 0 0; color: var(--wl-text-secondary); line-height: 1.65; }
.following-empty-cta[b-7p6apprivw] { min-height: 2.8rem; margin-top: 1.4rem; padding: 0 1.15rem; border: 1px solid rgba(var(--wl-gold-rgb), 0.32); border-radius: 999px; background: rgba(var(--wl-gold-rgb), 0.1); color: var(--wl-gold); font-weight: 850; }

.following-pager[b-7p6apprivw] { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.6rem 1rem 1.25rem; color: var(--wl-text-muted); font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; }
.following-pager button[b-7p6apprivw] { min-height: 2.55rem; padding: 0 1rem; border: 1px solid rgba(var(--wl-contrast-rgb), 0.1); border-radius: 999px; background: rgba(var(--wl-contrast-rgb), 0.04); color: var(--wl-text-secondary); font-weight: 800; }
.following-pager button:not(:disabled):hover[b-7p6apprivw] { border-color: rgba(var(--wl-gold-rgb), 0.3); color: var(--wl-gold); }
.following-pager button:disabled[b-7p6apprivw] { opacity: 0.35; }

@keyframes following-spin-b-7p6apprivw { to { transform: rotate(360deg); } }
@keyframes following-orbit-b-7p6apprivw { to { transform: rotate(360deg); } }
@keyframes following-sheen-b-7p6apprivw { 0%, 70% { transform: translateX(-100%); } 90%, 100% { transform: translateX(100%); } }

@media (max-width: 900px) {
    .following-hero[b-7p6apprivw] { grid-template-columns: auto minmax(0, 1fr); }
    .following-signal[b-7p6apprivw] { display: none; }
    .following-list[b-7p6apprivw] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
    .following-page[b-7p6apprivw] { padding-top: 0; }
    .following-hero[b-7p6apprivw] { grid-template-columns: minmax(0, 1fr); min-height: 15rem; padding: 1.25rem; border-radius: 20px; }
    .following-back[b-7p6apprivw] { position: absolute; top: 1rem; right: 1rem; }
    .following-kicker[b-7p6apprivw] { display: inline-block; max-width: calc(100% - 3.25rem); font-size: 0.58rem; letter-spacing: 0.15em; line-height: 1.5; }
    .following-hero-copy h1[b-7p6apprivw] { font-size: clamp(2.75rem, 13vw, 4rem); line-height: 0.88; }
    .following-hero-copy p[b-7p6apprivw] { padding-right: 1rem; font-size: 0.9rem; line-height: 1.6; }
    .following-metrics[b-7p6apprivw] { grid-template-columns: minmax(0, 1fr); gap: 0.65rem; }
    .following-metric[b-7p6apprivw] { min-height: 4.7rem; }
    .following-console[b-7p6apprivw] { border-radius: 18px; }
    .following-console-header[b-7p6apprivw] { align-items: stretch; flex-direction: column; }
    .following-tabs[b-7p6apprivw] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .following-tabs button[b-7p6apprivw] { min-width: 0; padding: 0 0.2rem; font-size: 0.52rem; letter-spacing: 0.025em; }
    .following-tabs button span[b-7p6apprivw] { display: none; }
    .following-search[b-7p6apprivw] { width: 100%; }
    .following-list[b-7p6apprivw] { padding: 0.75rem; }
    .following-card[b-7p6apprivw] { grid-template-columns: auto minmax(0, 1fr); }
    .following-card-action[b-7p6apprivw] { grid-column: 1 / -1; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .following-hero[b-7p6apprivw]::before, .following-signal-ring[b-7p6apprivw], .following-loading-ring[b-7p6apprivw], .following-card-spinner[b-7p6apprivw] { animation: none; }
    .following-card[b-7p6apprivw], .following-metric[b-7p6apprivw], .following-card-action[b-7p6apprivw], .following-back[b-7p6apprivw] { transition: none; }
}
/* /Components/Pages/Social/Friends/Index.razor.rz.scp.css */
/* ==========================================
   FRIENDS LIST PAGE - AAA+++ PREMIUM DESIGN
   ========================================== */

.friends-page[b-rndqonc4bp] {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 1.5rem;
    overflow: hidden;
}

/* === CINEMATIC ATMOSPHERE === */
.page-atmosphere[b-rndqonc4bp] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.page-gradient-orb[b-rndqonc4bp] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
}

.page-gradient-orb--green[b-rndqonc4bp] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.3) 0%, transparent 70%);
    top: -200px;
    left: -100px;
    animation: page-float-b-rndqonc4bp 20s ease-in-out infinite;
}

.page-gradient-orb--gold[b-rndqonc4bp] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
    animation: page-float-b-rndqonc4bp 25s ease-in-out infinite reverse;
}

@keyframes page-float-b-rndqonc4bp {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 30px) scale(0.95); }
}

.page-scanline[b-rndqonc4bp] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-contrast-rgb), 0.02) 2px,
        rgba(var(--wl-contrast-rgb), 0.02) 4px
    );
    pointer-events: none;
}

/* === ANIMATIONS === */
.animate-fade-in[b-rndqonc4bp] {
    animation: page-fadeIn-b-rndqonc4bp 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100[b-rndqonc4bp] { animation-delay: 0.1s; }
.delay-200[b-rndqonc4bp] { animation-delay: 0.2s; }
.delay-300[b-rndqonc4bp] { animation-delay: 0.3s; }

@keyframes page-fadeIn-b-rndqonc4bp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === LOADING STATE === */
.page-loading[b-rndqonc4bp] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.page-loading-ring[b-rndqonc4bp] {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: page-spin-b-rndqonc4bp 1s linear infinite;
}

@keyframes page-spin-b-rndqonc4bp {
    to { transform: rotate(360deg); }
}

.page-loading-text[b-rndqonc4bp] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--wl-text-muted);
}

/* === HEADER === */
.page-header[b-rndqonc4bp] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

.page-header-content[b-rndqonc4bp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.page-back-link[b-rndqonc4bp] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    color: var(--wl-text-muted);
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.page-back-link:hover[b-rndqonc4bp] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.page-back-link svg[b-rndqonc4bp] {
    width: 18px;
    height: 18px;
}

.page-header-tag[b-rndqonc4bp] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 0.5rem;
}

.page-header-title[b-rndqonc4bp] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem;
}

.page-header-subtitle[b-rndqonc4bp] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0;
}

.page-add-btn[b-rndqonc4bp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 12px;
    color: #22c55e;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    flex-shrink: 0;
}

.page-add-btn:hover[b-rndqonc4bp] {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.2);
}

.page-add-btn svg[b-rndqonc4bp] {
    width: 18px;
    height: 18px;
}

/* === SECTIONS === */
.page-section[b-rndqonc4bp] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.section-header[b-rndqonc4bp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-icon[b-rndqonc4bp] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.section-icon svg[b-rndqonc4bp] {
    width: 20px;
    height: 20px;
}

.section-icon--urgent[b-rndqonc4bp] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: var(--wl-red);
}

.section-icon--green[b-rndqonc4bp] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.section-tag[b-rndqonc4bp] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.section-title[b-rndqonc4bp] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0;
}

.section-badge[b-rndqonc4bp] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    background: rgba(var(--wl-red-rgb), 0.2);
    color: var(--wl-red);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 100px;
}

/* === PENDING REQUEST CARDS === */
.request-cards[b-rndqonc4bp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.request-card[b-rndqonc4bp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(var(--wl-red-rgb), 0.04);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 14px;
    transition: all 0.3s ease;
}

.request-card:hover[b-rndqonc4bp] {
    background: rgba(var(--wl-red-rgb), 0.06);
}

.request-avatar[b-rndqonc4bp] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.request-info[b-rndqonc4bp] {
    flex: 1;
    min-width: 0;
}

.request-name[b-rndqonc4bp] {
    display: block;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.request-meta[b-rndqonc4bp] {
    display: block;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.request-actions[b-rndqonc4bp] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.request-btn[b-rndqonc4bp] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.request-btn svg[b-rndqonc4bp] {
    width: 16px;
    height: 16px;
}

.request-btn--accept[b-rndqonc4bp] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border-color: rgba(34, 197, 94, 0.25);
}

.request-btn--accept:hover[b-rndqonc4bp] {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.4);
    transform: translateY(-1px);
}

.request-btn--reject[b-rndqonc4bp] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
    border-color: var(--wl-border-medium);
}

.request-btn--reject:hover[b-rndqonc4bp] {
    background: rgba(var(--wl-red-rgb), 0.1);
    color: var(--wl-red);
    border-color: rgba(var(--wl-red-rgb), 0.25);
}

.request-btn:disabled[b-rndqonc4bp] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* === SEARCH BAR === */
.search-bar[b-rndqonc4bp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    margin-bottom: 1rem;
    transition: border-color 0.3s ease;
}

.search-bar:focus-within[b-rndqonc4bp] {
    border-color: rgba(34, 197, 94, 0.4);
}

.search-bar svg[b-rndqonc4bp] {
    width: 18px;
    height: 18px;
    color: var(--wl-text-muted);
    flex-shrink: 0;
}

.search-bar input[b-rndqonc4bp] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
}

.search-bar input[b-rndqonc4bp]::placeholder {
    color: var(--wl-text-muted);
}

/* === FRIEND CARDS === */
.friend-cards[b-rndqonc4bp] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.friend-card[b-rndqonc4bp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.friend-card:hover[b-rndqonc4bp] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: rgba(34, 197, 94, 0.25);
    transform: translateX(4px);
}

.friend-avatar[b-rndqonc4bp] {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--wl-border-medium);
}

.friend-info[b-rndqonc4bp] {
    flex: 1;
    min-width: 0;
}

.friend-name-row[b-rndqonc4bp] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.375rem;
}

.friend-name[b-rndqonc4bp] {
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-nickname[b-rndqonc4bp] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === LEVEL BAR === */
.friend-level-row[b-rndqonc4bp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: help;
}

.level-bar[b-rndqonc4bp] {
    flex: 1;
    height: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 3px;
    overflow: hidden;
}

.level-fill[b-rndqonc4bp] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease-out;
}

.level-fill--tier-acquaintance[b-rndqonc4bp] {
    background: linear-gradient(90deg, var(--wl-text-muted), rgba(var(--wl-contrast-rgb), 0.4));
}

.level-fill--tier-closefriend[b-rndqonc4bp] {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.level-fill--tier-friend[b-rndqonc4bp] {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.level-fill--tier-bestfriend[b-rndqonc4bp] {
    background: linear-gradient(90deg, var(--wl-purple), var(--wl-purple));
}

.level-fill--tier-partner[b-rndqonc4bp] {
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
}

.level-text[b-rndqonc4bp] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    color: var(--wl-text-muted);
    white-space: nowrap;
    min-width: 30px;
    text-align: right;
}

/* === BADGES === */
.friend-badges[b-rndqonc4bp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.tier-badge[b-rndqonc4bp] {
    display: inline-flex;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.tier-acquaintance[b-rndqonc4bp] {
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.tier-closefriend[b-rndqonc4bp] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

.tier-friend[b-rndqonc4bp] {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.12);
}

.tier-bestfriend[b-rndqonc4bp] {
    color: var(--wl-purple);
    background: rgba(var(--wl-purple-rgb), 0.12);
}

.tier-partner[b-rndqonc4bp] {
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
}

.chem-badge[b-rndqonc4bp] {
    display: inline-flex;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    cursor: help;
}

.chem-weak[b-rndqonc4bp] {
    color: var(--wl-red);
    background: rgba(var(--wl-red-rgb), 0.1);
}

.chem-neutral[b-rndqonc4bp] {
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.chem-good[b-rndqonc4bp] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.chem-great[b-rndqonc4bp] {
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
}

.time-badge[b-rndqonc4bp] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.625rem;
    color: var(--wl-text-muted);
}

.time-badge svg[b-rndqonc4bp] {
    width: 12px;
    height: 12px;
}

/* === ARROW === */
.friend-arrow[b-rndqonc4bp] {
    width: 20px;
    height: 20px;
    color: var(--wl-text-muted);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.friend-card:hover .friend-arrow[b-rndqonc4bp] {
    transform: translateX(4px);
    color: #22c55e;
}

/* === EMPTY STATE === */
.page-empty[b-rndqonc4bp] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 3rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 20px;
    margin-bottom: 2rem;
}

.page-empty-icon[b-rndqonc4bp] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    color: var(--wl-text-muted);
}

.page-empty-icon svg[b-rndqonc4bp] {
    width: 64px;
    height: 64px;
}

.page-empty-title[b-rndqonc4bp] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin: 0 0 0.5rem;
}

.page-empty-text[b-rndqonc4bp] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0 0 1.5rem;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.page-empty-btn[b-rndqonc4bp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #22c55e, #4ade80);
    border: none;
    border-radius: 12px;
    color: var(--wl-text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-empty-btn:hover[b-rndqonc4bp] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.page-empty-btn svg[b-rndqonc4bp] {
    width: 16px;
    height: 16px;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .friends-page[b-rndqonc4bp] {
        padding: 1rem;
    }

    .page-header[b-rndqonc4bp] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-add-btn[b-rndqonc4bp] {
        justify-content: center;
    }

    .request-card[b-rndqonc4bp] {
        flex-wrap: wrap;
    }

    .request-actions[b-rndqonc4bp] {
        width: 100%;
        justify-content: flex-end;
    }

    .friend-card[b-rndqonc4bp] {
        padding: 0.875rem;
    }

    .friend-avatar[b-rndqonc4bp] {
        width: 44px;
        height: 44px;
    }

    .friend-badges[b-rndqonc4bp] {
        gap: 0.375rem;
    }
}
/* /Components/Pages/Social/Friends/View.razor.rz.scp.css */
/* ==========================================
   FRIEND PROFILE / VIEW PAGE - AAA+++ DESIGN
   ========================================== */

.friend-view[b-9k6ucwwhr1] {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 1.5rem;
    overflow: hidden;
}

/* === CINEMATIC ATMOSPHERE === */
.page-atmosphere[b-9k6ucwwhr1] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.page-gradient-orb[b-9k6ucwwhr1] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
}

.page-gradient-orb--green[b-9k6ucwwhr1] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.3) 0%, transparent 70%);
    top: -200px;
    left: -100px;
    animation: page-float-b-9k6ucwwhr1 20s ease-in-out infinite;
}

.page-gradient-orb--gold[b-9k6ucwwhr1] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
    animation: page-float-b-9k6ucwwhr1 25s ease-in-out infinite reverse;
}

@keyframes page-float-b-9k6ucwwhr1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 30px) scale(0.95); }
}

.page-scanline[b-9k6ucwwhr1] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-contrast-rgb), 0.02) 2px,
        rgba(var(--wl-contrast-rgb), 0.02) 4px
    );
    pointer-events: none;
}

/* === ANIMATIONS === */
.animate-fade-in[b-9k6ucwwhr1] {
    animation: page-fadeIn-b-9k6ucwwhr1 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100[b-9k6ucwwhr1] { animation-delay: 0.1s; }
.delay-200[b-9k6ucwwhr1] { animation-delay: 0.2s; }
.delay-300[b-9k6ucwwhr1] { animation-delay: 0.3s; }

@keyframes page-fadeIn-b-9k6ucwwhr1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === LOADING === */
.page-loading[b-9k6ucwwhr1] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.page-loading-ring[b-9k6ucwwhr1] {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: page-spin-b-9k6ucwwhr1 1s linear infinite;
}

@keyframes page-spin-b-9k6ucwwhr1 {
    to { transform: rotate(360deg); }
}

.page-loading-text[b-9k6ucwwhr1] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--wl-text-muted);
}

/* === ERROR STATE === */
.page-error[b-9k6ucwwhr1] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 3rem 1.5rem;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.page-error-icon[b-9k6ucwwhr1] {
    width: 64px;
    height: 64px;
    color: var(--wl-red);
}

.page-error-icon svg[b-9k6ucwwhr1] {
    width: 64px;
    height: 64px;
}

.page-error-title[b-9k6ucwwhr1] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin: 0;
}

.page-error-text[b-9k6ucwwhr1] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0;
}

.page-error-btn[b-9k6ucwwhr1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    color: var(--wl-text-secondary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.page-error-btn:hover[b-9k6ucwwhr1] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.page-error-btn svg[b-9k6ucwwhr1] {
    width: 18px;
    height: 18px;
}

/* === HEADER === */
.page-header[b-9k6ucwwhr1] {
    position: relative;
    z-index: 1;
    margin-bottom: 1.5rem;
}

.page-header-content[b-9k6ucwwhr1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-back-link[b-9k6ucwwhr1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    color: var(--wl-text-muted);
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.page-back-link:hover[b-9k6ucwwhr1] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.page-back-link svg[b-9k6ucwwhr1] {
    width: 18px;
    height: 18px;
}

.page-header-tag[b-9k6ucwwhr1] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 0.5rem;
}

.page-header-title[b-9k6ucwwhr1] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem;
}

.page-header-subtitle[b-9k6ucwwhr1] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0;
}

/* === FRIEND HEADER CARD === */
.friend-header-card[b-9k6ucwwhr1] {
    position: relative;
    z-index: 1;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 16px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.friend-header-top[b-9k6ucwwhr1] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.friend-profile-avatar[b-9k6ucwwhr1] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid var(--wl-border-medium);
}

.friend-header-info[b-9k6ucwwhr1] {
    flex: 1;
    min-width: 0;
}

.friend-header-names[b-9k6ucwwhr1] {
    margin-bottom: 0.5rem;
}

.friend-full-name[b-9k6ucwwhr1] {
    display: block;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friend-handle[b-9k6ucwwhr1] {
    display: block;
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    font-style: italic;
    margin-top: 0.125rem;
}

.friend-header-badges[b-9k6ucwwhr1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.friend-since[b-9k6ucwwhr1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: var(--wl-text-muted);
}

.friend-since svg[b-9k6ucwwhr1] {
    width: 12px;
    height: 12px;
}

/* === TIER BADGES (reused from Index) === */
.tier-badge[b-9k6ucwwhr1] {
    display: inline-flex;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.tier-acquaintance[b-9k6ucwwhr1] {
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.tier-closefriend[b-9k6ucwwhr1] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

.tier-friend[b-9k6ucwwhr1] {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.12);
}

.tier-bestfriend[b-9k6ucwwhr1] {
    color: var(--wl-purple);
    background: rgba(var(--wl-purple-rgb), 0.12);
}

.tier-partner[b-9k6ucwwhr1] {
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
}

.chem-badge[b-9k6ucwwhr1] {
    display: inline-flex;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    cursor: help;
}

.chem-weak[b-9k6ucwwhr1] { color: var(--wl-red); background: rgba(var(--wl-red-rgb), 0.1); }
.chem-neutral[b-9k6ucwwhr1] { color: var(--wl-text-muted); background: rgba(var(--wl-contrast-rgb), 0.06); }
.chem-good[b-9k6ucwwhr1] { color: #22c55e; background: rgba(34, 197, 94, 0.1); }
.chem-great[b-9k6ucwwhr1] { color: var(--wl-gold); background: rgba(var(--wl-gold-rgb), 0.12); }

/* === STATUS TAGS (marriage, pregnancy, etc.) === */
.status-tag[b-9k6ucwwhr1] {
    display: inline-flex;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.status-tag--marriage[b-9k6ucwwhr1] {
    color: var(--wl-pink);
    background: rgba(var(--wl-pink-rgb), 0.1);
}

.status-tag--pregnancy[b-9k6ucwwhr1] {
    color: #F59E0B;
    background: rgba(245, 158, 11, 0.1);
}

/* === RELATIONSHIP PROGRESS === */
.relationship-progress[b-9k6ucwwhr1] {
    cursor: help;
}

.relationship-progress-header[b-9k6ucwwhr1] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
}

.relationship-label[b-9k6ucwwhr1] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.relationship-pct[b-9k6ucwwhr1] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--wl-text-primary);
}

.relationship-bar[b-9k6ucwwhr1] {
    position: relative;
    height: 10px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 5px;
    overflow: hidden;
    margin-bottom: 0.375rem;
}

.relationship-fill[b-9k6ucwwhr1] {
    height: 100%;
    border-radius: 5px;
    transition: width 0.8s ease-out;
}

.relationship-fill--tier-acquaintance[b-9k6ucwwhr1] {
    background: linear-gradient(90deg, var(--wl-text-muted), rgba(var(--wl-contrast-rgb), 0.4));
}

.relationship-fill--tier-closefriend[b-9k6ucwwhr1] {
    background: linear-gradient(90deg, #22c55e, #4ade80);
}

.relationship-fill--tier-friend[b-9k6ucwwhr1] {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.relationship-fill--tier-bestfriend[b-9k6ucwwhr1] {
    background: linear-gradient(90deg, var(--wl-purple), var(--wl-purple));
}

.relationship-fill--tier-partner[b-9k6ucwwhr1] {
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
}

.tier-marker[b-9k6ucwwhr1] {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(var(--wl-contrast-rgb), 0.15);
}

.relationship-tier-labels[b-9k6ucwwhr1] {
    display: flex;
    justify-content: space-between;
}

.tier-label-text[b-9k6ucwwhr1] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.3);
}

/* === SECTIONS === */
.page-section[b-9k6ucwwhr1] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.section-header[b-9k6ucwwhr1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-icon[b-9k6ucwwhr1] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.section-icon svg[b-9k6ucwwhr1] {
    width: 20px;
    height: 20px;
}

.section-icon--green[b-9k6ucwwhr1] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.section-icon--blue[b-9k6ucwwhr1] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.section-icon--gold[b-9k6ucwwhr1] {
    background: rgba(var(--wl-gold-rgb), 0.14);
    color: var(--wl-gold);
}

.section-icon--muted[b-9k6ucwwhr1] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
}

.section-tag[b-9k6ucwwhr1] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.section-title[b-9k6ucwwhr1] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0;
}

.section-link[b-9k6ucwwhr1] {
    margin-left: auto;
    color: var(--wl-gold);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
}

.family-section[b-9k6ucwwhr1] {
    background: rgba(var(--wl-contrast-rgb), 0.025);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1rem;
}

.family-relation-list[b-9k6ucwwhr1],
.family-actions[b-9k6ucwwhr1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.family-relation-chip[b-9k6ucwwhr1] {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.22);
    border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-gold);
    font-size: 0.75rem;
}

.family-empty[b-9k6ucwwhr1],
.family-cost[b-9k6ucwwhr1] {
    margin: 0.5rem 0 0;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
}

.family-actions .action-btn[b-9k6ucwwhr1] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: var(--wl-border-medium);
    color: var(--wl-text-secondary);
}

.family-actions .action-btn:hover:not(:disabled)[b-9k6ucwwhr1] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

/* === ENERGY INDICATOR === */
.energy-indicator[b-9k6ucwwhr1] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.energy-indicator svg[b-9k6ucwwhr1] {
    width: 14px;
    height: 14px;
}

/* === TIER GROUPS === */
.tier-group[b-9k6ucwwhr1] {
    margin-bottom: 1.25rem;
}

.tier-group--locked[b-9k6ucwwhr1] {
    opacity: 0.5;
}

.tier-group-header[b-9k6ucwwhr1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.tier-group-name[b-9k6ucwwhr1] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.tier-group-threshold[b-9k6ucwwhr1] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    color: var(--wl-text-muted);
}

.tier-group-lock[b-9k6ucwwhr1] {
    margin-left: auto;
    color: var(--wl-text-muted);
}

.tier-group-lock svg[b-9k6ucwwhr1] {
    width: 14px;
    height: 14px;
}

/* === INTERACTION GRID === */
.interaction-grid[b-9k6ucwwhr1] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}

.interaction-card[b-9k6ucwwhr1] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.interaction-card:hover[b-9k6ucwwhr1] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border-color: rgba(34, 197, 94, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--wl-shadow-color);
}

.interaction-card--locked[b-9k6ucwwhr1] {
    cursor: not-allowed;
    background: rgba(var(--wl-contrast-rgb), 0.01);
    border-color: rgba(var(--wl-contrast-rgb), 0.05);
}

.interaction-card--locked:hover[b-9k6ucwwhr1] {
    transform: none;
    box-shadow: none;
    border-color: rgba(var(--wl-contrast-rgb), 0.05);
    background: rgba(var(--wl-contrast-rgb), 0.01);
}

.interaction-card--no-energy[b-9k6ucwwhr1] {
    border-color: rgba(var(--wl-red-rgb), 0.15);
}

.interaction-card--no-energy:hover[b-9k6ucwwhr1] {
    border-color: rgba(var(--wl-red-rgb), 0.25);
}

.interaction-icon[b-9k6ucwwhr1] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--wl-text-secondary);
}

.interaction-card:hover .interaction-icon[b-9k6ucwwhr1] {
    color: #22c55e;
}

.interaction-card--locked .interaction-icon[b-9k6ucwwhr1] {
    color: var(--wl-text-muted);
}

.interaction-card--locked:hover .interaction-icon[b-9k6ucwwhr1] {
    color: var(--wl-text-muted);
}

.interaction-icon[b-9k6ucwwhr1]  svg {
    width: 24px;
    height: 24px;
}

.interaction-info[b-9k6ucwwhr1] {
    flex: 1;
    min-width: 0;
}

.interaction-name[b-9k6ucwwhr1] {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.interaction-card--locked .interaction-name[b-9k6ucwwhr1] {
    color: var(--wl-text-muted);
}

.interaction-stats[b-9k6ucwwhr1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.interaction-energy[b-9k6ucwwhr1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    color: var(--wl-gold);
}

.interaction-energy svg[b-9k6ucwwhr1] {
    width: 12px;
    height: 12px;
}

.interaction-chance[b-9k6ucwwhr1] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    color: #22c55e;
}

.interaction-locked-label[b-9k6ucwwhr1] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.interaction-lock-overlay[b-9k6ucwwhr1] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--wl-text-muted);
    opacity: 0.5;
}

.interaction-lock-overlay svg[b-9k6ucwwhr1] {
    width: 16px;
    height: 16px;
}

/* === CONFIRMATION MODAL === */
.modal-overlay[b-9k6ucwwhr1] {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-card[b-9k6ucwwhr1] {
    width: 100%;
    max-width: 420px;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px var(--wl-shadow-color);
}

.modal-header[b-9k6ucwwhr1] {
    padding: 1.25rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.modal-tag[b-9k6ucwwhr1] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    letter-spacing: 0.2em;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 100px;
    margin-bottom: 0.375rem;
}

.modal-title[b-9k6ucwwhr1] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
}

.modal-body[b-9k6ucwwhr1] {
    padding: 1.25rem;
}

.modal-interaction-preview[b-9k6ucwwhr1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.modal-interaction-icon[b-9k6ucwwhr1] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #22c55e;
}

.modal-interaction-icon[b-9k6ucwwhr1]  svg {
    width: 28px;
    height: 28px;
}

.modal-interaction-name[b-9k6ucwwhr1] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wl-text-primary);
}

.modal-stats[b-9k6ucwwhr1] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1rem;
}

.modal-stat[b-9k6ucwwhr1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.modal-stat:last-child[b-9k6ucwwhr1] {
    border-bottom: none;
}

.modal-stat-label[b-9k6ucwwhr1] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
}

.modal-stat-value[b-9k6ucwwhr1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.modal-stat-value svg[b-9k6ucwwhr1] {
    width: 14px;
    height: 14px;
    color: var(--wl-gold);
}

.modal-stat-value--bonus[b-9k6ucwwhr1] {
    color: #22c55e;
}

.modal-warning[b-9k6ucwwhr1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: rgba(var(--wl-red-rgb), 0.08);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 8px;
    color: var(--wl-red);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.modal-warning svg[b-9k6ucwwhr1] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.modal-error[b-9k6ucwwhr1] {
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.2);
    border-radius: 8px;
    color: var(--wl-red);
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
}

.modal-success[b-9k6ucwwhr1] {
    padding: 0.5rem 0.75rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 8px;
    color: #22c55e;
    font-size: 0.8125rem;
    margin-bottom: 0.75rem;
}

.modal-actions[b-9k6ucwwhr1] {
    display: flex;
    gap: 0.75rem;
    padding: 0 1.25rem 1.25rem;
}

.modal-btn[b-9k6ucwwhr1] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.modal-btn:disabled[b-9k6ucwwhr1] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.modal-btn--cancel[b-9k6ucwwhr1] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: var(--wl-border-medium);
    color: var(--wl-text-muted);
}

.modal-btn--cancel:hover:not(:disabled)[b-9k6ucwwhr1] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
}

.modal-btn--confirm[b-9k6ucwwhr1] {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.modal-btn--confirm:hover:not(:disabled)[b-9k6ucwwhr1] {
    background: rgba(34, 197, 94, 0.25);
    border-color: rgba(34, 197, 94, 0.4);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

.btn-spinner[b-9k6ucwwhr1] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(34, 197, 94, 0.2);
    border-top-color: #22c55e;
    border-radius: 50%;
    animation: page-spin-b-9k6ucwwhr1 0.8s linear infinite;
}

/* === HISTORY === */
.history-list[b-9k6ucwwhr1] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-item[b-9k6ucwwhr1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.history-item:hover[b-9k6ucwwhr1] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.history-item--success[b-9k6ucwwhr1] {
    border-left: 3px solid rgba(34, 197, 94, 0.4);
}

.history-item--fail[b-9k6ucwwhr1] {
    border-left: 3px solid rgba(var(--wl-red-rgb), 0.3);
}

.history-icon[b-9k6ucwwhr1] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.history-icon svg[b-9k6ucwwhr1] {
    width: 24px;
    height: 24px;
}

.history-item--success .history-icon[b-9k6ucwwhr1] {
    color: #22c55e;
}

.history-item--fail .history-icon[b-9k6ucwwhr1] {
    color: var(--wl-red);
}

.history-content[b-9k6ucwwhr1] {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.history-main[b-9k6ucwwhr1] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.history-type[b-9k6ucwwhr1] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-initiator[b-9k6ucwwhr1] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
}

.history-meta[b-9k6ucwwhr1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
    flex-shrink: 0;
}

.history-result[b-9k6ucwwhr1] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.history-positive[b-9k6ucwwhr1] {
    color: #22c55e;
}

.history-negative[b-9k6ucwwhr1] {
    color: var(--wl-red);
}

.history-date[b-9k6ucwwhr1] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    color: var(--wl-text-muted);
}

.history-empty[b-9k6ucwwhr1] {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--wl-text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.history-empty svg[b-9k6ucwwhr1] {
    width: 40px;
    height: 40px;
    opacity: 0.4;
}

.history-empty span[b-9k6ucwwhr1] {
    font-size: 0.875rem;
}

.history-empty-desc[b-9k6ucwwhr1] {
    font-size: 0.75rem !important;
    max-width: 280px;
}

/* === ACTION BUTTONS === */
.action-buttons[b-9k6ucwwhr1] {
    display: flex;
    gap: 0.75rem;
}

.action-btn[b-9k6ucwwhr1] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.action-btn:disabled[b-9k6ucwwhr1] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.action-btn svg[b-9k6ucwwhr1] {
    width: 16px;
    height: 16px;
}

.action-btn--remove[b-9k6ucwwhr1] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: var(--wl-border-medium);
    color: var(--wl-text-muted);
}

.action-btn--remove:hover[b-9k6ucwwhr1] {
    background: rgba(var(--wl-red-rgb), 0.08);
    border-color: rgba(var(--wl-red-rgb), 0.2);
    color: var(--wl-red);
}

.action-btn--block[b-9k6ucwwhr1] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: var(--wl-border-medium);
    color: var(--wl-text-muted);
}

.action-btn--block:hover[b-9k6ucwwhr1] {
    background: rgba(var(--wl-red-rgb), 0.08);
    border-color: rgba(var(--wl-red-rgb), 0.2);
    color: var(--wl-red);
}

.action-btn--divorce[b-9k6ucwwhr1] {
    background: rgba(244, 63, 94, 0.1);
    border-color: rgba(244, 63, 94, 0.2);
    color: #F43F5E;
}

.action-btn--divorce:hover[b-9k6ucwwhr1] {
    background: rgba(244, 63, 94, 0.2);
    border-color: rgba(244, 63, 94, 0.4);
}

.action-btn--divorce[b-9k6ucwwhr1]  svg {
    width: 1rem;
    height: 1rem;
}

.action-btn--danger[b-9k6ucwwhr1] {
    background: rgba(var(--wl-red-rgb), 0.15);
    border-color: rgba(var(--wl-red-rgb), 0.3);
    color: var(--wl-red);
}

.action-btn--danger:hover:not(:disabled)[b-9k6ucwwhr1] {
    background: rgba(var(--wl-red-rgb), 0.25);
    border-color: rgba(var(--wl-red-rgb), 0.4);
}

.action-btn--ghost[b-9k6ucwwhr1] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: var(--wl-border-medium);
    color: var(--wl-text-muted);
}

.action-btn--ghost:hover:not(:disabled)[b-9k6ucwwhr1] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
}

.action-confirm[b-9k6ucwwhr1] {
    background: rgba(var(--wl-red-rgb), 0.04);
    border: 1px solid rgba(var(--wl-red-rgb), 0.15);
    border-radius: 12px;
    padding: 1rem;
}

.action-confirm-text[b-9k6ucwwhr1] {
    font-size: 0.875rem;
    color: var(--wl-text-secondary);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.action-confirm-btns[b-9k6ucwwhr1] {
    display: flex;
    gap: 0.75rem;
}

/* === BEEF BLOCKED OVERLAY === */
.beef-blocked-overlay[b-9k6ucwwhr1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;
    background: rgba(249, 115, 22, 0.05);
    border: 1px dashed rgba(249, 115, 22, 0.3);
    border-radius: 12px;
}

.beef-blocked-icon svg[b-9k6ucwwhr1] {
    width: 2.5rem;
    height: 2.5rem;
    color: #F97316;
}

.beef-blocked-title[b-9k6ucwwhr1] {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #F97316;
}

.beef-blocked-text[b-9k6ucwwhr1] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    max-width: 300px;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .friend-view[b-9k6ucwwhr1] {
        padding: 1rem;
    }

    .page-header-title[b-9k6ucwwhr1] {
        font-size: 2rem;
    }

    .friend-profile-avatar[b-9k6ucwwhr1] {
        width: 56px;
        height: 56px;
    }

    .interaction-grid[b-9k6ucwwhr1] {
        grid-template-columns: 1fr;
    }

    .action-buttons[b-9k6ucwwhr1] {
        flex-direction: column;
    }

    .action-confirm-btns[b-9k6ucwwhr1] {
        flex-direction: column;
    }

    .modal-card[b-9k6ucwwhr1] {
        margin: 0.5rem;
    }

    .history-content[b-9k6ucwwhr1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .history-meta[b-9k6ucwwhr1] {
        align-items: flex-start;
        flex-direction: row;
        gap: 0.5rem;
    }
}
/* /Components/Pages/Social/HotProfiles/Index.razor.rz.scp.css */
/* ==========================================
   HOT PROFILES - global 24h most-visited board
   Page chrome mirrors the Social Hub.
   ========================================== */

.social-hub[b-n27i26fl7t] {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    min-height: 100vh;
    min-width: 0;
    padding: 1.5rem;
    overflow: hidden;
}

/* === CINEMATIC ATMOSPHERE === */
.hub-atmosphere[b-n27i26fl7t] {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hub-gradient-orb[b-n27i26fl7t] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.3;
}

.hub-gradient-orb--purple[b-n27i26fl7t] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(var(--wl-contrast-rgb), 0.3) 0%, transparent 70%);
    top: -200px;
    left: -100px;
    animation: hub-float-b-n27i26fl7t 20s ease-in-out infinite;
}

.hub-gradient-orb--gold[b-n27i26fl7t] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
    animation: hub-float-b-n27i26fl7t 25s ease-in-out infinite reverse;
}

@keyframes hub-float-b-n27i26fl7t {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 30px) scale(0.95); }
}

.hub-scanline[b-n27i26fl7t] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-contrast-rgb), 0.02) 2px,
        rgba(var(--wl-contrast-rgb), 0.02) 4px
    );
    pointer-events: none;
}

.hub-noise[b-n27i26fl7t] {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* === ANIMATIONS === */
.animate-fade-in[b-n27i26fl7t] {
    animation: hub-fadeIn-b-n27i26fl7t 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100[b-n27i26fl7t] { animation-delay: 0.1s; }

@keyframes hub-fadeIn-b-n27i26fl7t {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === LOADING STATE === */
.hub-loading[b-n27i26fl7t] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 1.5rem;
}

.hub-loading-ring[b-n27i26fl7t] {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: hub-spin-b-n27i26fl7t 1s linear infinite;
}

@keyframes hub-spin-b-n27i26fl7t {
    to { transform: rotate(360deg); }
}

.hub-loading-text[b-n27i26fl7t] {
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--wl-text-muted);
}

/* === HEADER === */
.hub-header[b-n27i26fl7t] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    margin-bottom: 2rem;
}

.hub-title-group[b-n27i26fl7t] {
    flex: 1;
    min-width: 0;
}

.hub-eyebrow[b-n27i26fl7t] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-gold);
    margin-bottom: 0.375rem;
}

.hub-eyebrow svg[b-n27i26fl7t] {
    width: 0.95rem;
    height: 0.95rem;
}

.hub-title-group h1[b-n27i26fl7t] {
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wl-text-primary);
    overflow-wrap: anywhere;
}

.hub-subtitle[b-n27i26fl7t] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0.375rem 0 0 0;
}

/* === RANKED LIST === */
.hot-list[b-n27i26fl7t] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.hot-row[b-n27i26fl7t] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.hot-row:hover[b-n27i26fl7t] {
    background: rgba(var(--wl-gold-rgb), 0.06);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    transform: translateY(-1px);
}

/* Top 3 get a subtle podium emphasis. */
.hot-row--podium[b-n27i26fl7t] {
    border-color: rgba(var(--wl-gold-rgb), 0.32);
    background:
        linear-gradient(110deg, rgba(var(--wl-gold-rgb), 0.1), transparent 40%),
        rgba(var(--wl-contrast-rgb), 0.035);
}

.hot-row--podium[b-n27i26fl7t]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--wl-gold), rgba(var(--wl-gold-rgb), 0.25));
    box-shadow: 0 0 14px rgba(var(--wl-gold-rgb), 0.45);
}

/* Rank badge */
.hot-rank[b-n27i26fl7t] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 800;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border: 1px solid var(--wl-border-medium);
    color: var(--wl-text-muted);
}

.hot-rank--1[b-n27i26fl7t] {
    background: var(--wl-gold);
    border-color: var(--wl-gold);
    color: var(--wl-bg-primary);
    box-shadow: 0 0 14px rgba(var(--wl-gold-rgb), 0.45);
}

.hot-rank--2[b-n27i26fl7t] {
    background: rgba(var(--wl-gold-rgb), 0.55);
    border-color: rgba(var(--wl-gold-rgb), 0.55);
    color: var(--wl-bg-primary);
}

.hot-rank--3[b-n27i26fl7t] {
    background: rgba(var(--wl-gold-rgb), 0.28);
    border-color: rgba(var(--wl-gold-rgb), 0.45);
    color: var(--wl-gold);
}

.hot-avatar[b-n27i26fl7t] {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    background: var(--wl-bg-tertiary);
    border: 1px solid var(--wl-border-medium);
}

.hot-row--podium .hot-avatar[b-n27i26fl7t] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.hot-row-main[b-n27i26fl7t] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.hot-nick[b-n27i26fl7t] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hot-visitors[b-n27i26fl7t] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--wl-text-secondary);
    white-space: nowrap;
}

.hot-visitors svg[b-n27i26fl7t] {
    width: 0.82rem;
    height: 0.82rem;
    flex-shrink: 0;
    color: var(--wl-gold);
}

.hot-row-arrow[b-n27i26fl7t] {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--wl-text-muted);
    flex-shrink: 0;
}

/* === EMPTY STATE === */
.hot-empty[b-n27i26fl7t] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 4rem 1rem;
}

.hot-empty-icon[b-n27i26fl7t] {
    width: 64px;
    height: 64px;
    color: var(--wl-text-muted);
    opacity: 0.5;
    margin-bottom: 0.5rem;
}

.hot-empty-icon svg[b-n27i26fl7t] { width: 100%; height: 100%; }

.hot-empty-text[b-n27i26fl7t] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--wl-text-muted);
    max-width: 32ch;
}

@media (max-width: 560px) {
    .social-hub[b-n27i26fl7t] {
        padding: 0;
    }

    .hub-title-group h1[b-n27i26fl7t] { font-size: 2.1rem; }

    .hub-subtitle[b-n27i26fl7t] {
        font-size: 0.85rem;
    }

    .hot-row[b-n27i26fl7t] {
        gap: 0.65rem;
        padding: 0.65rem 0.7rem;
    }

    .hot-rank[b-n27i26fl7t] {
        width: 28px;
        height: 28px;
    }

    .hot-avatar[b-n27i26fl7t] {
        width: 46px;
        height: 46px;
    }
}
/* /Components/Pages/Social/Index.razor.rz.scp.css */
/* ==========================================
   SOCIAL HUB - AAA+++ PREMIUM DESIGN
   ========================================== */

.social-hub[b-5kj51ti5q5] {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    min-height: 100vh;
    min-width: 0;
    padding: 1.5rem;
    overflow: hidden;
}

/* === CINEMATIC ATMOSPHERE === */
.hub-atmosphere[b-5kj51ti5q5] {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hub-gradient-orb[b-5kj51ti5q5] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.3;
}

.hub-gradient-orb--purple[b-5kj51ti5q5] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(var(--wl-contrast-rgb), 0.3) 0%, transparent 70%);
    top: -200px;
    left: -100px;
    animation: hub-float-b-5kj51ti5q5 20s ease-in-out infinite;
}

.hub-gradient-orb--gold[b-5kj51ti5q5] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
    animation: hub-float-b-5kj51ti5q5 25s ease-in-out infinite reverse;
}

@keyframes hub-float-b-5kj51ti5q5 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 30px) scale(0.95); }
}

.hub-scanline[b-5kj51ti5q5] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-contrast-rgb), 0.02) 2px,
        rgba(var(--wl-contrast-rgb), 0.02) 4px
    );
    pointer-events: none;
}

.hub-noise[b-5kj51ti5q5] {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* === ANIMATIONS === */
.animate-fade-in[b-5kj51ti5q5] {
    animation: hub-fadeIn-b-5kj51ti5q5 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100[b-5kj51ti5q5] { animation-delay: 0.1s; }
.delay-200[b-5kj51ti5q5] { animation-delay: 0.2s; }
.delay-300[b-5kj51ti5q5] { animation-delay: 0.3s; }
.delay-400[b-5kj51ti5q5] { animation-delay: 0.4s; }
.delay-500[b-5kj51ti5q5] { animation-delay: 0.5s; }

@keyframes hub-fadeIn-b-5kj51ti5q5 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === LOADING STATE === */
.hub-loading[b-5kj51ti5q5] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.hub-loading-ring[b-5kj51ti5q5] {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: hub-spin-b-5kj51ti5q5 1s linear infinite;
}

@keyframes hub-spin-b-5kj51ti5q5 {
    to { transform: rotate(360deg); }
}

.hub-loading-text[b-5kj51ti5q5] {
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--wl-text-muted);
}

/* === HEADER === */
.hub-header[b-5kj51ti5q5] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    margin-bottom: 2rem;
}

.hub-title-group[b-5kj51ti5q5] {
    flex: 1;
    min-width: 0;
}

.hub-eyebrow[b-5kj51ti5q5] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-gold);
    margin-bottom: 0.375rem;
}

.hub-title-group h1[b-5kj51ti5q5] {
    font-family: var(--font-display);
    font-size: 2.75rem;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hub-subtitle[b-5kj51ti5q5] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0.375rem 0 0 0;
}

.hub-search-btn[b-5kj51ti5q5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.75rem 1.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
    border-radius: 12px;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hub-search-btn:hover[b-5kj51ti5q5] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.hub-search-btn svg[b-5kj51ti5q5] {
    width: 18px;
    height: 18px;
}

/* === STATS === */
.hub-stats[b-5kj51ti5q5] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    min-width: 0;
    margin-bottom: 2rem;
}

.hub-stat[b-5kj51ti5q5] {
    min-width: 0;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 16px;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hub-stat:hover[b-5kj51ti5q5] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    transform: translateY(-2px);
}

.hub-stat-icon[b-5kj51ti5q5] {
    width: 40px;
    height: 40px;
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.hub-stat-icon svg[b-5kj51ti5q5] {
    width: 22px;
    height: 22px;
}

.hub-stat-icon--red[b-5kj51ti5q5] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: var(--wl-red);
}

.hub-stat-icon--purple[b-5kj51ti5q5] {
    background: rgba(var(--wl-contrast-rgb), 0.1);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.hub-stat-icon--gold[b-5kj51ti5q5] {
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
}

.hub-stat-value[b-5kj51ti5q5] {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--wl-text-primary);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.hub-stat-label[b-5kj51ti5q5] {
    display: block;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* === SECTIONS === */
.hub-section[b-5kj51ti5q5] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.hub-section-header[b-5kj51ti5q5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    margin-bottom: 1rem;
}

.hub-section-icon[b-5kj51ti5q5] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.hub-section-icon svg[b-5kj51ti5q5] {
    width: 20px;
    height: 20px;
}

.hub-section-icon--red[b-5kj51ti5q5] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: var(--wl-red);
}

.hub-section-icon--purple[b-5kj51ti5q5] {
    background: rgba(var(--wl-contrast-rgb), 0.1);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.hub-section-icon--gold[b-5kj51ti5q5] {
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
}

.hub-section-tag[b-5kj51ti5q5] {
    text-transform: uppercase;
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.hub-section-title[b-5kj51ti5q5] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0;
}

/* === CARDS === */
.hub-cards[b-5kj51ti5q5] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hub-card[b-5kj51ti5q5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hub-card:hover[b-5kj51ti5q5] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    transform: translateX(4px);
}

.hub-card--beef:hover[b-5kj51ti5q5] {
    border-color: rgba(var(--wl-red-rgb), 0.3);
}

.hub-card--collab:hover[b-5kj51ti5q5] {
    border-color: rgba(var(--wl-contrast-rgb), 0.3);
}

.hub-card--mentor:hover[b-5kj51ti5q5],
.hub-card--mentee:hover[b-5kj51ti5q5] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.hub-card--urgent[b-5kj51ti5q5] {
    border-color: rgba(var(--wl-red-rgb), 0.3);
    background: rgba(var(--wl-red-rgb), 0.05);
}

.hub-card-avatar[b-5kj51ti5q5] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.hub-card-info[b-5kj51ti5q5] {
    flex: 1;
    min-width: 0;
}

.hub-card-name[b-5kj51ti5q5] {
    display: block;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-card-status[b-5kj51ti5q5] {
    display: block;
}

/* === STATUS BADGES === */
.status-badge[b-5kj51ti5q5] {
    display: inline-flex;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.status-badge--urgent[b-5kj51ti5q5] {
    background: rgba(var(--wl-red-rgb), 0.2);
    color: var(--wl-red);
}

.status-badge--waiting[b-5kj51ti5q5] {
    background: var(--wl-border-medium);
    color: var(--wl-text-muted);
}

.status-badge--active[b-5kj51ti5q5] {
    background: rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-gold);
}

.status-badge--gold[b-5kj51ti5q5] {
    background: var(--wl-gold-border);
    color: var(--wl-gold);
}

.status-badge--blue[b-5kj51ti5q5] {
    background: rgba(var(--wl-diamond-rgb), 0.2);
    color: var(--wl-diamond);
}

.status-badge--green[b-5kj51ti5q5] {
    background: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

/* === HEAT PIPS (for Beef) === */
.hub-card-heat[b-5kj51ti5q5] {
    display: flex;
    gap: 3px;
}

.heat-pip[b-5kj51ti5q5] {
    width: 6px;
    height: 16px;
    background: var(--wl-border-medium);
    border-radius: 2px;
}

.heat-pip--active[b-5kj51ti5q5] {
    background: linear-gradient(180deg, var(--wl-red), var(--wl-red-dark));
    box-shadow: 0 0 6px rgba(var(--wl-red-rgb), 0.5);
}

/* === DAYS REMAINING (for Mentorship) === */
.hub-card-days[b-5kj51ti5q5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 0.5rem;
}

.days-value[b-5kj51ti5q5] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-gold);
    line-height: 1;
}

.days-label[b-5kj51ti5q5] {
    font-size: 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.hub-card-arrow[b-5kj51ti5q5] {
    width: 20px;
    height: 20px;
    color: var(--wl-text-muted);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.hub-card:hover .hub-card-arrow[b-5kj51ti5q5] {
    transform: translateX(4px);
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

/* === EMPTY STATE === */
.hub-empty[b-5kj51ti5q5] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 3rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 20px;
    margin-bottom: 2rem;
}

.hub-empty-icon[b-5kj51ti5q5] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    color: var(--wl-text-muted);
}

.hub-empty-title[b-5kj51ti5q5] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin: 0 0 0.5rem;
}

.hub-empty-text[b-5kj51ti5q5] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0 0 1.5rem;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.hub-empty-btn[b-5kj51ti5q5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    border-radius: 12px;
    color: var(--wl-bg-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hub-empty-btn:hover[b-5kj51ti5q5] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--wl-gold-rgb), 0.4);
}

.hub-empty-btn svg[b-5kj51ti5q5] {
    width: 16px;
    height: 16px;
}

/* === ACTION BUTTONS === */
.hub-actions[b-5kj51ti5q5] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    min-width: 0;
}

.hub-action[b-5kj51ti5q5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 14px;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    background: transparent;
}

.hub-action svg[b-5kj51ti5q5] {
    width: 24px;
    height: 24px;
}

.hub-action--beef[b-5kj51ti5q5] {
    background: rgba(var(--wl-red-rgb), 0.05);
}

.hub-action--beef:hover[b-5kj51ti5q5] {
    background: rgba(var(--wl-red-rgb), 0.15);
    border-color: rgba(var(--wl-red-rgb), 0.3);
    color: var(--wl-red);
}

.hub-action--collab[b-5kj51ti5q5] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.hub-action--collab:hover[b-5kj51ti5q5] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.hub-action--mentor[b-5kj51ti5q5] {
    background: rgba(var(--wl-gold-rgb), 0.05);
}

.hub-action--mentor:hover[b-5kj51ti5q5] {
    background: var(--wl-gold-bg-hover);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .social-hub[b-5kj51ti5q5] {
        padding: 1rem;
    }

    .hub-header[b-5kj51ti5q5] {
        flex-direction: column;
        align-items: stretch;
    }

    .hub-search-btn[b-5kj51ti5q5] {
        justify-content: center;
        width: 100%;
    }

    .hub-stats[b-5kj51ti5q5] {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    .hub-stat[b-5kj51ti5q5] {
        padding: 1rem 0.5rem;
    }

    .hub-stat-icon[b-5kj51ti5q5] {
        width: 32px;
        height: 32px;
    }

    .hub-stat-icon svg[b-5kj51ti5q5] {
        width: 18px;
        height: 18px;
    }

    .hub-stat-value[b-5kj51ti5q5] {
        font-size: 1.5rem;
    }

    .hub-actions[b-5kj51ti5q5] {
        grid-template-columns: 1fr;
    }

    .hub-action[b-5kj51ti5q5] {
        flex-direction: row;
        justify-content: center;
    }

}

@media (max-width: 480px) {
    .social-hub[b-5kj51ti5q5] {
        padding: 0;
    }

    .hub-title-group h1[b-5kj51ti5q5] {
        font-size: 2.1rem;
    }

    .hub-subtitle[b-5kj51ti5q5] {
        font-size: 0.85rem;
    }

    .hub-stats[b-5kj51ti5q5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* === MODULE NAVIGATION CARDS === */
.hub-modules[b-5kj51ti5q5] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    margin-bottom: 2rem;
}

.hub-module-card[b-5kj51ti5q5] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    max-width: 100%;
    padding: 1.25rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.hub-module-card:hover[b-5kj51ti5q5] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    box-shadow: 0 8px 32px var(--wl-shadow-color);
    transform: translateY(-2px);
}

.hub-module-icon[b-5kj51ti5q5] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
}

.hub-module-icon svg[b-5kj51ti5q5] {
    width: 24px;
    height: 24px;
}

.hub-module-icon--blue[b-5kj51ti5q5] {
    background: rgba(var(--wl-diamond-rgb), 0.1);
    color: var(--wl-diamond);
}

.hub-module-icon--pink[b-5kj51ti5q5] {
    background: rgba(var(--wl-red-rgb), 0.1);
    color: var(--wl-red);
}

.hub-module-icon--gold[b-5kj51ti5q5] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
}

.hub-module-icon--green[b-5kj51ti5q5] {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.hub-module-icon--amber[b-5kj51ti5q5] {
    background: rgba(245, 158, 11, 0.15);
    color: #F59E0B;
}

.hub-module-badge[b-5kj51ti5q5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    border-radius: 100px;
    background: var(--wl-red);
    color: var(--wl-text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Live online count - green pill with a pulsing dot */
.hub-module-badge--online[b-5kj51ti5q5] {
    gap: 0.35rem;
    background: rgba(var(--wl-green-rgb), 0.15);
    color: var(--wl-green);
}

.online-card-dot[b-5kj51ti5q5] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wl-green);
    box-shadow: 0 0 0 0 rgba(var(--wl-green-rgb), 0.55);
    animation: hub-online-pulse-b-5kj51ti5q5 2s infinite;
}

@keyframes hub-online-pulse-b-5kj51ti5q5 {
    0%   { box-shadow: 0 0 0 0 rgba(var(--wl-green-rgb), 0.5); }
    70%  { box-shadow: 0 0 0 6px rgba(var(--wl-green-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--wl-green-rgb), 0); }
}

.hub-module-info[b-5kj51ti5q5] {
    flex: 1;
    min-width: 0;
}

.hub-module-title[b-5kj51ti5q5] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
    overflow-wrap: anywhere;
}

.hub-module-desc[b-5kj51ti5q5] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    margin: 0.125rem 0 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hub-module-arrow[b-5kj51ti5q5] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--wl-text-muted);
    transition: color 0.3s ease;
}

.hub-module-card:hover .hub-module-arrow[b-5kj51ti5q5] {
    color: var(--wl-gold);
}

/* Buzz + its compact DM sub-link, grouped as one stacked unit. */
.hub-module-stack[b-5kj51ti5q5] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

/* Compact "child of Buzz" link: indented, smaller, visually subordinate to the card above. */
.hub-submodule[b-5kj51ti5q5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: 2.5rem;
    min-width: 0;
    max-width: calc(100% - 2.5rem);
    padding: 0.55rem 1rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hub-submodule:hover[b-5kj51ti5q5] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    transform: translateX(2px);
}

/* Short L-connector tying the sub-link to the Buzz card above it. */
.hub-submodule-connector[b-5kj51ti5q5] {
    width: 0.75rem;
    height: 0.75rem;
    margin-left: -0.25rem;
    margin-top: -0.6rem;
    border-left: 1.5px solid var(--wl-border-medium);
    border-bottom: 1.5px solid var(--wl-border-medium);
    border-bottom-left-radius: 6px;
    flex-shrink: 0;
}

.hub-submodule-icon[b-5kj51ti5q5] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
    flex-shrink: 0;
}

.hub-submodule-icon svg[b-5kj51ti5q5] {
    width: 17px;
    height: 17px;
}

.hub-submodule-label[b-5kj51ti5q5] {
    flex: 1;
    min-width: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.04em;
    color: var(--wl-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-submodule:hover .hub-submodule-label[b-5kj51ti5q5] {
    color: var(--wl-text-primary);
}

.hub-submodule-arrow[b-5kj51ti5q5] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--wl-text-muted);
    transition: color 0.25s ease;
}

.hub-submodule:hover .hub-submodule-arrow[b-5kj51ti5q5] {
    color: var(--wl-gold);
}

@media (max-width: 480px) {
    .hub-module-card[b-5kj51ti5q5] {
        gap: 0.75rem;
        padding: 0.9rem;
        border-radius: 14px;
    }

    .hub-module-icon[b-5kj51ti5q5] {
        width: 42px;
        height: 42px;
        border-radius: 12px;
    }

    .hub-module-icon svg[b-5kj51ti5q5] {
        width: 21px;
        height: 21px;
    }

    .hub-module-arrow[b-5kj51ti5q5] {
        width: 16px;
        height: 16px;
    }

    .hub-submodule[b-5kj51ti5q5] {
        margin-left: 1.25rem;
        max-width: calc(100% - 1.25rem);
        padding: 0.5rem 0.75rem;
    }

    .hub-submodule-connector[b-5kj51ti5q5] {
        display: none;
    }
}
/* /Components/Pages/Social/Interactions/Index.razor.rz.scp.css */
/* ==========================================
   INTERACTIONS INBOX PAGE - AAA+++ DESIGN
   ========================================== */

.interactions-page[b-ysw85v1p1k] {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 1.5rem;
    overflow: hidden;
}

/* === CINEMATIC ATMOSPHERE === */
.page-atmosphere[b-ysw85v1p1k] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.page-gradient-orb[b-ysw85v1p1k] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
}

.page-gradient-orb--green[b-ysw85v1p1k] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(34, 197, 94, 0.3) 0%, transparent 70%);
    top: -200px;
    left: -100px;
    animation: page-float-b-ysw85v1p1k 20s ease-in-out infinite;
}

.page-gradient-orb--gold[b-ysw85v1p1k] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    bottom: -150px;
    right: -100px;
    animation: page-float-b-ysw85v1p1k 25s ease-in-out infinite reverse;
}

@keyframes page-float-b-ysw85v1p1k {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 30px) scale(0.95); }
}

.page-scanline[b-ysw85v1p1k] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-contrast-rgb), 0.02) 2px,
        rgba(var(--wl-contrast-rgb), 0.02) 4px
    );
    pointer-events: none;
}

/* === ANIMATIONS === */
.animate-fade-in[b-ysw85v1p1k] {
    animation: page-fadeIn-b-ysw85v1p1k 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100[b-ysw85v1p1k] { animation-delay: 0.1s; }
.delay-200[b-ysw85v1p1k] { animation-delay: 0.2s; }
.delay-300[b-ysw85v1p1k] { animation-delay: 0.3s; }

@keyframes page-fadeIn-b-ysw85v1p1k {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === LOADING STATE === */
.page-loading[b-ysw85v1p1k] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.page-loading-ring[b-ysw85v1p1k] {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: page-spin-b-ysw85v1p1k 1s linear infinite;
}

@keyframes page-spin-b-ysw85v1p1k {
    to { transform: rotate(360deg); }
}

.page-loading-text[b-ysw85v1p1k] {
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--wl-text-muted);
}

/* === HEADER === */
.page-header[b-ysw85v1p1k] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.page-header-content[b-ysw85v1p1k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.page-back-link[b-ysw85v1p1k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    color: var(--wl-text-muted);
    transition: all 0.3s ease;
    flex-shrink: 0;
    text-decoration: none;
}

.page-back-link:hover[b-ysw85v1p1k] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.page-back-link svg[b-ysw85v1p1k] {
    width: 18px;
    height: 18px;
}

.page-header-tag[b-ysw85v1p1k] {
    text-transform: uppercase;
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    color: #22c55e;
    background: rgba(34, 197, 94, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 0.5rem;
}

.page-header-title[b-ysw85v1p1k] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.25rem;
}

.page-header-subtitle[b-ysw85v1p1k] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0;
}

/* === TAB BAR === */
.tab-bar[b-ysw85v1p1k] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.25rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 14px;
}

.tab-btn[b-ysw85v1p1k] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    background: transparent;
    color: var(--wl-text-muted);
}

.tab-btn:hover[b-ysw85v1p1k] {
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.tab-btn--active[b-ysw85v1p1k] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
    color: #22c55e;
}

.tab-btn--active:hover[b-ysw85v1p1k] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.tab-btn svg[b-ysw85v1p1k] {
    width: 16px;
    height: 16px;
}

.tab-badge[b-ysw85v1p1k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 0.375rem;
    background: rgba(var(--wl-red-rgb), 0.2);
    color: var(--wl-red);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 100px;
}

/* === SECTIONS === */
.page-section[b-ysw85v1p1k] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.section-header[b-ysw85v1p1k] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.section-icon[b-ysw85v1p1k] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.section-icon svg[b-ysw85v1p1k] {
    width: 20px;
    height: 20px;
}

.section-icon--urgent[b-ysw85v1p1k] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: var(--wl-red);
}

.section-icon--blue[b-ysw85v1p1k] {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.section-tag[b-ysw85v1p1k] {
    text-transform: uppercase;
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.section-title[b-ysw85v1p1k] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0;
}

.section-badge[b-ysw85v1p1k] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    background: rgba(var(--wl-red-rgb), 0.2);
    color: var(--wl-red);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 100px;
}

/* === PENDING INTERACTION CARDS === */
.pending-cards[b-ysw85v1p1k] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pending-card[b-ysw85v1p1k] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.pending-card:hover[b-ysw85v1p1k] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: rgba(34, 197, 94, 0.2);
}

.pending-card--responded[b-ysw85v1p1k] {
    border-color: transparent;
}

.pending-card-top[b-ysw85v1p1k] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1rem 0.75rem;
}

.pending-avatar[b-ysw85v1p1k] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--wl-border-medium);
}

.pending-info[b-ysw85v1p1k] {
    flex: 1;
    min-width: 0;
}

.pending-name[b-ysw85v1p1k] {
    display: block;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.125rem;
}

.pending-type[b-ysw85v1p1k] {
    display: block;
    font-size: 0.8125rem;
    color: #22c55e;
    font-weight: 500;
}

.pending-meta[b-ysw85v1p1k] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.pending-timer[b-ysw85v1p1k] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    cursor: help;
}

.pending-timer svg[b-ysw85v1p1k] {
    width: 12px;
    height: 12px;
}

.pending-timer--urgent[b-ysw85v1p1k] {
    color: var(--wl-red);
    font-weight: 700;
}

.pending-chance[b-ysw85v1p1k] {
    display: inline-flex;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #22c55e;
    padding: 0.125rem 0.5rem;
    background: rgba(34, 197, 94, 0.1);
    border-radius: 6px;
    cursor: help;
}

/* === RESPONSE BUTTONS === */
.pending-actions[b-ysw85v1p1k] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem 1rem;
}

.response-btn[b-ysw85v1p1k] {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.625rem 0.5rem;
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.response-btn svg[b-ysw85v1p1k] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.response-btn:disabled[b-ysw85v1p1k] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.response-btn--positive[b-ysw85v1p1k] {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.response-btn--positive:hover:not(:disabled)[b-ysw85v1p1k] {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

.response-btn--neutral[b-ysw85v1p1k] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: var(--wl-border-medium);
    color: var(--wl-text-muted);
}

.response-btn--neutral:hover:not(:disabled)[b-ysw85v1p1k] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    transform: translateY(-2px);
}

.response-btn--negative[b-ysw85v1p1k] {
    background: rgba(var(--wl-red-rgb), 0.06);
    border-color: rgba(var(--wl-red-rgb), 0.15);
    color: rgba(var(--wl-red-rgb), 0.7);
}

.response-btn--negative:hover:not(:disabled)[b-ysw85v1p1k] {
    background: rgba(var(--wl-red-rgb), 0.12);
    border-color: rgba(var(--wl-red-rgb), 0.25);
    color: var(--wl-red);
    transform: translateY(-2px);
}

/* === INTERACTION RESULT (inline after responding) === */
.interaction-result[b-ysw85v1p1k] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    animation: resultSlideIn-b-ysw85v1p1k 0.4s ease-out;
}

@keyframes resultSlideIn-b-ysw85v1p1k {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.result-success[b-ysw85v1p1k] {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.25);
}

.result-fail[b-ysw85v1p1k] {
    background: rgba(var(--wl-red-rgb), 0.06);
    border-color: rgba(var(--wl-red-rgb), 0.2);
}

.result-icon[b-ysw85v1p1k] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.result-icon svg[b-ysw85v1p1k] {
    width: 36px;
    height: 36px;
}

.result-success .result-icon[b-ysw85v1p1k] {
    color: #22c55e;
}

.result-fail .result-icon[b-ysw85v1p1k] {
    color: var(--wl-red);
}

.result-details[b-ysw85v1p1k] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.result-label[b-ysw85v1p1k] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
}

.result-success .result-label[b-ysw85v1p1k] {
    color: #22c55e;
}

.result-fail .result-label[b-ysw85v1p1k] {
    color: var(--wl-red);
}

.result-change[b-ysw85v1p1k] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-text-secondary);
}

.result-bonus[b-ysw85v1p1k] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: var(--wl-gold);
    font-weight: 600;
}

/* === HISTORY CARDS === */
.history-list[b-ysw85v1p1k] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.history-card[b-ysw85v1p1k] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.history-card:hover[b-ysw85v1p1k] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.history-card--success[b-ysw85v1p1k] {
    border-left: 3px solid rgba(34, 197, 94, 0.4);
}

.history-card--fail[b-ysw85v1p1k] {
    border-left: 3px solid rgba(var(--wl-red-rgb), 0.3);
}

.history-card--expired[b-ysw85v1p1k] {
    border-left: 3px solid rgba(var(--wl-contrast-rgb), 0.15);
    opacity: 0.7;
}

.history-card-icon[b-ysw85v1p1k] {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.history-card-icon svg[b-ysw85v1p1k] {
    width: 24px;
    height: 24px;
}

.history-card--success .history-card-icon[b-ysw85v1p1k] {
    color: #22c55e;
}

.history-card--fail .history-card-icon[b-ysw85v1p1k] {
    color: var(--wl-red);
}

.history-card--expired .history-card-icon[b-ysw85v1p1k] {
    color: var(--wl-text-muted);
}

.history-card-content[b-ysw85v1p1k] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.history-card-main[b-ysw85v1p1k] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.history-card-type[b-ysw85v1p1k] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-card-friend[b-ysw85v1p1k] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
}

.history-card-badges[b-ysw85v1p1k] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.response-badge[b-ysw85v1p1k] {
    display: inline-flex;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.response-badge--positive[b-ysw85v1p1k] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
}

.response-badge--neutral[b-ysw85v1p1k] {
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.response-badge--negative[b-ysw85v1p1k] {
    color: var(--wl-red);
    background: rgba(var(--wl-red-rgb), 0.1);
}

.status-badge[b-ysw85v1p1k] {
    display: inline-flex;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
}

.status-badge--expired[b-ysw85v1p1k] {
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.history-card-meta[b-ysw85v1p1k] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
    flex-shrink: 0;
}

.history-card-result[b-ysw85v1p1k] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
}

.result-positive[b-ysw85v1p1k] {
    color: #22c55e;
}

.result-negative[b-ysw85v1p1k] {
    color: var(--wl-red);
}

.history-card-date[b-ysw85v1p1k] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5625rem;
    color: var(--wl-text-muted);
}

/* === EMPTY STATE === */
.page-empty[b-ysw85v1p1k] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 3rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 20px;
    margin-bottom: 2rem;
}

.page-empty-icon[b-ysw85v1p1k] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    color: var(--wl-text-muted);
}

.page-empty-icon svg[b-ysw85v1p1k] {
    width: 64px;
    height: 64px;
}

.page-empty-title[b-ysw85v1p1k] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin: 0 0 0.5rem;
}

.page-empty-text[b-ysw85v1p1k] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    margin: 0 0 1.5rem;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.page-empty-btn[b-ysw85v1p1k] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: linear-gradient(135deg, #22c55e, #4ade80);
    border: none;
    border-radius: 12px;
    color: var(--wl-text-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.page-empty-btn:hover[b-ysw85v1p1k] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
}

.page-empty-btn svg[b-ysw85v1p1k] {
    width: 16px;
    height: 16px;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .interactions-page[b-ysw85v1p1k] {
        padding: 1rem;
    }

    .page-header-title[b-ysw85v1p1k] {
        font-size: 2rem;
    }

    .tab-btn[b-ysw85v1p1k] {
        font-size: 0.625rem;
        padding: 0.625rem 0.5rem;
        gap: 0.375rem;
    }

    .pending-card-top[b-ysw85v1p1k] {
        flex-wrap: wrap;
    }

    .pending-meta[b-ysw85v1p1k] {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.25rem;
    }

    .pending-actions[b-ysw85v1p1k] {
        flex-direction: column;
    }

    .response-btn[b-ysw85v1p1k] {
        justify-content: center;
    }

    .history-card[b-ysw85v1p1k] {
        flex-wrap: wrap;
    }

    .history-card-meta[b-ysw85v1p1k] {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
    }
}
/* /Components/Pages/Social/Mentorship/Request.razor.rz.scp.css */
/* ============================================
   MENTORSHIP REQUEST - AAA+++ Wisdom & Growth
   Theme: Gold/amber, elegant, aspirational
   ============================================ */

.mentor-request[b-k7i5oh9rcv] {
    position: relative;
    min-height: 100vh;
    padding: 2rem 1.5rem;
    max-width: 640px;
    margin: 0 auto;
}

/* ============================================
   CINEMATIC ATMOSPHERE
   ============================================ */

.mentor-atmosphere[b-k7i5oh9rcv] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.mentor-gradient-orb[b-k7i5oh9rcv] {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    animation: mentor-pulse-b-k7i5oh9rcv 8s ease-in-out infinite;
}

.mentor-gradient-orb--gold[b-k7i5oh9rcv] {
    width: 500px;
    height: 500px;
    top: -200px;
    right: -150px;
    background: radial-gradient(circle, rgba(var(--wl-gold-rgb), 0.4) 0%, transparent 70%);
    animation-delay: 0s;
}

.mentor-gradient-orb--amber[b-k7i5oh9rcv] {
    width: 400px;
    height: 400px;
    bottom: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.3) 0%, transparent 70%);
    animation-delay: 4s;
}

@keyframes mentor-pulse-b-k7i5oh9rcv {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

.mentor-scanline[b-k7i5oh9rcv] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
    pointer-events: none;
}

.mentor-noise[b-k7i5oh9rcv] {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.5;
}

/* ============================================
   LOADING & ERROR STATES
   ============================================ */

.mentor-loading[b-k7i5oh9rcv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.mentor-loading-ring[b-k7i5oh9rcv] {
    width: 64px;
    height: 64px;
    border: 3px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-k7i5oh9rcv 0.8s linear infinite;
}

@keyframes spin-b-k7i5oh9rcv {
    to { transform: rotate(360deg); }
}

.mentor-loading-text[b-k7i5oh9rcv] {
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(var(--wl-gold-rgb), 0.8);
}

.mentor-error[b-k7i5oh9rcv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    gap: 1rem;
}

.mentor-error-icon[b-k7i5oh9rcv] {
    width: 80px;
    height: 80px;
    color: rgba(var(--wl-gold-rgb), 0.6);
}

.mentor-error-icon svg[b-k7i5oh9rcv] {
    width: 100%;
    height: 100%;
}

.mentor-error-title[b-k7i5oh9rcv] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0;
}

.mentor-error-message[b-k7i5oh9rcv] {
    color: var(--wl-text-muted);
    margin: 0 0 1rem 0;
    max-width: 300px;
}

/* ============================================
   HEADER
   ============================================ */

.mentor-header[b-k7i5oh9rcv] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.mentor-back-btn[b-k7i5oh9rcv] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.mentor-back-btn:hover[b-k7i5oh9rcv] {
    background: var(--wl-border-subtle);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    color: var(--wl-text-primary);
}

.mentor-back-btn svg[b-k7i5oh9rcv] {
    width: 20px;
    height: 20px;
}

.mentor-header-content[b-k7i5oh9rcv] {
    flex: 1;
}

.mentor-header-tag[b-k7i5oh9rcv] {
    text-transform: uppercase;
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(var(--wl-gold-rgb), 0.8);
    margin-bottom: 0.25rem;
}

.mentor-header-title[b-k7i5oh9rcv] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.05em;
    background: linear-gradient(135deg, var(--wl-text-primary) 0%, var(--wl-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
    line-height: 1;
}

.mentor-header-line[b-k7i5oh9rcv] {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.5) 0%, transparent 100%);
    border-radius: 1px;
}

/* ============================================
   MENTOR CARD
   ============================================ */

.mentor-target-section[b-k7i5oh9rcv] {
    margin-bottom: 2rem;
}

.mentor-target-card[b-k7i5oh9rcv] {
    position: relative;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.6) 0%,
        rgba(245, 158, 11, 0.3) 50%,
        rgba(var(--wl-gold-rgb), 0.4) 100%);
    overflow: hidden;
}

.mentor-target-glow[b-k7i5oh9rcv] {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--wl-gold-border) 0%, transparent 50%);
    pointer-events: none;
}

.mentor-target-inner[b-k7i5oh9rcv] {
    position: relative;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.98) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.95) 100%);
    border-radius: 18px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

/* Crown Badge */
.mentor-badge[b-k7i5oh9rcv] {
    text-transform: uppercase;
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.25rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8860B 100%);
    border-radius: 0 0 12px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: white;
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.4);
}

.mentor-badge svg[b-k7i5oh9rcv] {
    width: 16px;
    height: 16px;
}

/* Avatar */
.mentor-avatar-container[b-k7i5oh9rcv] {
    position: relative;
    width: 120px;
    height: 120px;
}

.mentor-avatar-ring[b-k7i5oh9rcv] {
    position: absolute;
    inset: -4px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wl-gold), #F59E0B) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: ring-pulse-b-k7i5oh9rcv 2s ease-in-out infinite;
}

@keyframes ring-pulse-b-k7i5oh9rcv {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.02); }
}

.mentor-avatar[b-k7i5oh9rcv] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(var(--wl-bg-modal-deep-rgb), 0.95);
}

/* Mentor Info */
.mentor-info[b-k7i5oh9rcv] {
    text-align: center;
}

.mentor-name[b-k7i5oh9rcv] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem 0;
}

.mentor-stats[b-k7i5oh9rcv] {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.mentor-stat[b-k7i5oh9rcv] {
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--wl-gold-bg);
    border: 1px solid var(--wl-gold-border);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.mentor-stat svg[b-k7i5oh9rcv] {
    width: 14px;
    height: 14px;
}

/* Influence Cost Badge */
.mentor-cost-badge[b-k7i5oh9rcv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 2rem;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    cursor: help;
    transition: all 0.2s ease;
}

.mentor-cost-badge:hover[b-k7i5oh9rcv] {
    background: rgba(var(--wl-bg-tertiary-rgb), 0.8);
    border-color: var(--wl-border-medium);
}

.mentor-cost-label[b-k7i5oh9rcv] {
    text-transform: uppercase;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin-bottom: 0.25rem;
}

.mentor-cost-value[b-k7i5oh9rcv] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--wl-gold);
    line-height: 1;
}

.mentor-cost-warning[b-k7i5oh9rcv] {
    text-transform: uppercase;
    margin-top: 0.5rem;
    padding: 0.25rem 0.75rem;
    background: rgba(var(--wl-red-rgb), 0.2);
    border-radius: 4px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #EF4444;
}

/* ============================================
   BENEFITS SECTION
   ============================================ */

.mentor-benefits[b-k7i5oh9rcv] {
    margin-bottom: 1.5rem;
}

.mentor-section-header[b-k7i5oh9rcv] {
    margin-bottom: 0.75rem;
}

.mentor-section-tag[b-k7i5oh9rcv] {
    text-transform: uppercase;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.mentor-section-title[b-k7i5oh9rcv] {
    text-transform: uppercase;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0;
}

.mentor-benefits-grid[b-k7i5oh9rcv] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.mentor-benefit[b-k7i5oh9rcv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    background: rgba(var(--wl-gold-rgb), 0.05);
    border: 1px solid var(--wl-gold-bg-hover);
    border-radius: 12px;
    cursor: help;
    transition: all 0.2s ease;
}

.mentor-benefit:hover[b-k7i5oh9rcv] {
    background: var(--wl-gold-bg);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.mentor-benefit-icon[b-k7i5oh9rcv] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-gold);
}

.mentor-benefit-icon svg[b-k7i5oh9rcv] {
    width: 100%;
    height: 100%;
}

.mentor-benefit-label[b-k7i5oh9rcv] {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.mentor-benefit-value[b-k7i5oh9rcv] {
    font-size: 0.625rem;
    color: var(--wl-text-muted);
    text-align: center;
}

/* ============================================
   HOW IT WORKS
   ============================================ */

.mentor-how[b-k7i5oh9rcv] {
    margin-bottom: 1.5rem;
}

.mentor-steps[b-k7i5oh9rcv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: var(--wl-surface-primary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
}

.mentor-step[b-k7i5oh9rcv] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    flex: 1;
}

.mentor-step-num[b-k7i5oh9rcv] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8860B 100%);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
}

.mentor-step-text[b-k7i5oh9rcv] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    text-align: center;
}

.mentor-step-arrow[b-k7i5oh9rcv] {
    color: rgba(var(--wl-contrast-rgb), 0.2);
}

.mentor-step-arrow svg[b-k7i5oh9rcv] {
    width: 20px;
    height: 20px;
}

/* ============================================
   INFO BANNER
   ============================================ */

.mentor-info-banner[b-k7i5oh9rcv] {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: rgba(var(--wl-gold-rgb), 0.08);
    border: 1px solid var(--wl-gold-border);
    border-radius: 12px;
    margin-bottom: 2rem;
}

.mentor-info-icon[b-k7i5oh9rcv] {
    width: 20px;
    height: 20px;
    color: var(--wl-gold);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.mentor-info-icon svg[b-k7i5oh9rcv] {
    width: 100%;
    height: 100%;
}

.mentor-info-text[b-k7i5oh9rcv] {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0;
}

/* ============================================
   ACTION BUTTONS
   ============================================ */

.mentor-actions[b-k7i5oh9rcv] {
    display: flex;
    gap: 0.75rem;
}

.mentor-btn[b-k7i5oh9rcv] {
    text-transform: uppercase;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 1rem 1.5rem;
    border-radius: 14px;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.mentor-btn svg[b-k7i5oh9rcv] {
    width: 18px;
    height: 18px;
}

.mentor-btn--ghost[b-k7i5oh9rcv] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.mentor-btn--ghost:hover:not(:disabled)[b-k7i5oh9rcv] {
    background: var(--wl-border-subtle);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: var(--wl-text-primary);
}

.mentor-btn--gold[b-k7i5oh9rcv] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, #B8860B 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.3);
}

.mentor-btn--gold:hover:not(:disabled):not(.disabled)[b-k7i5oh9rcv] {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(var(--wl-gold-rgb), 0.4);
}

.mentor-btn--gold.disabled[b-k7i5oh9rcv],
.mentor-btn--gold:disabled[b-k7i5oh9rcv] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.mentor-btn-spinner[b-k7i5oh9rcv] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--wl-text-muted);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-k7i5oh9rcv 0.6s linear infinite;
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animate-fade-in[b-k7i5oh9rcv] {
    animation: fade-in-b-k7i5oh9rcv 0.5s ease-out both;
}

.delay-100[b-k7i5oh9rcv] { animation-delay: 0.1s; }
.delay-200[b-k7i5oh9rcv] { animation-delay: 0.2s; }
.delay-300[b-k7i5oh9rcv] { animation-delay: 0.3s; }
.delay-400[b-k7i5oh9rcv] { animation-delay: 0.4s; }
.delay-500[b-k7i5oh9rcv] { animation-delay: 0.5s; }

@keyframes fade-in-b-k7i5oh9rcv {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 480px) {
    .mentor-request[b-k7i5oh9rcv] {
        padding: 1rem;
    }

    .mentor-header-title[b-k7i5oh9rcv] {
        font-size: 1.5rem;
    }

    .mentor-target-inner[b-k7i5oh9rcv] {
        padding: 1.5rem 1rem;
    }

    .mentor-avatar-container[b-k7i5oh9rcv] {
        width: 100px;
        height: 100px;
    }

    .mentor-benefits-grid[b-k7i5oh9rcv] {
        grid-template-columns: 1fr;
    }

    .mentor-benefit[b-k7i5oh9rcv] {
        flex-direction: row;
        padding: 0.875rem 1rem;
        gap: 1rem;
    }

    .mentor-benefit-icon[b-k7i5oh9rcv] {
        width: 32px;
        height: 32px;
    }

    .mentor-steps[b-k7i5oh9rcv] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .mentor-step-arrow[b-k7i5oh9rcv] {
        transform: rotate(90deg);
    }

    .mentor-actions[b-k7i5oh9rcv] {
        flex-direction: column;
    }
}
/* /Components/Pages/Social/Mentorship/View.razor.rz.scp.css */
/* ==========================================
   MENTORSHIP VIEW - AAA+++ GOLD/AMBER THEME
   ========================================== */

.mentorship-view[b-ada79jyymp] {
    position: relative;
    min-height: 100vh;
    padding: 1.5rem;
    overflow: hidden;
}

/* === CINEMATIC ATMOSPHERE === */
.mentorship-atmosphere[b-ada79jyymp] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.mentorship-gradient-orb[b-ada79jyymp] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.4;
}

.mentorship-gradient-orb--gold[b-ada79jyymp] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    animation: mentorship-float-b-ada79jyymp 20s ease-in-out infinite;
}

.mentorship-gradient-orb--amber[b-ada79jyymp] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #FFBF00 0%, transparent 70%);
    bottom: -150px;
    left: -100px;
    animation: mentorship-float-b-ada79jyymp 25s ease-in-out infinite reverse;
}

@keyframes mentorship-float-b-ada79jyymp {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 30px) scale(0.95); }
}

.mentorship-scanline[b-ada79jyymp] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-gold-rgb), 0.02) 2px,
        rgba(var(--wl-gold-rgb), 0.02) 4px
    );
    pointer-events: none;
}

.mentorship-noise[b-ada79jyymp] {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* === ANIMATIONS === */
.animate-fade-in[b-ada79jyymp] {
    animation: mentorship-fadeIn-b-ada79jyymp 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100[b-ada79jyymp] { animation-delay: 0.1s; }
.delay-200[b-ada79jyymp] { animation-delay: 0.2s; }
.delay-300[b-ada79jyymp] { animation-delay: 0.3s; }
.delay-400[b-ada79jyymp] { animation-delay: 0.4s; }
.delay-500[b-ada79jyymp] { animation-delay: 0.5s; }

@keyframes mentorship-fadeIn-b-ada79jyymp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === LOADING STATE === */
.mentorship-loading[b-ada79jyymp] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1.5rem;
}

.mentorship-loading-ring[b-ada79jyymp] {
    width: 60px;
    height: 60px;
    border: 3px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: mentorship-spin-b-ada79jyymp 1s linear infinite;
}

@keyframes mentorship-spin-b-ada79jyymp {
    to { transform: rotate(360deg); }
}

.mentorship-loading-text[b-ada79jyymp] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--wl-text-muted);
}

/* === ERROR STATE === */
.mentorship-error[b-ada79jyymp] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    gap: 1rem;
    text-align: center;
}

.mentorship-error-icon[b-ada79jyymp] {
    width: 64px;
    height: 64px;
    color: var(--wl-gold);
}

.mentorship-error-title[b-ada79jyymp] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.mentorship-error-message[b-ada79jyymp] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    max-width: 300px;
}

/* === HEADER === */
.mentorship-header[b-ada79jyymp] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.mentorship-back-btn[b-ada79jyymp] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
}

.mentorship-back-btn:hover[b-ada79jyymp] {
    background: var(--wl-gold-bg);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.mentorship-back-btn svg[b-ada79jyymp] {
    width: 20px;
    height: 20px;
}

.mentorship-header-content[b-ada79jyymp] {
    flex: 1;
}

.mentorship-header-tag[b-ada79jyymp] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    color: var(--wl-gold);
    background: var(--wl-gold-bg-hover);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 0.25rem;
}

.mentorship-header-title[b-ada79jyymp] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
}

.mentorship-header-line[b-ada79jyymp] {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.5), transparent);
}

/* === INVITE SECTION === */
.mentorship-invite[b-ada79jyymp] {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, var(--wl-gold-bg), rgba(255, 191, 0, 0.05));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.mentorship-invite-badge[b-ada79jyymp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    background: var(--wl-gold-border);
    padding: 0.5rem 1rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}

.mentorship-invite-badge svg[b-ada79jyymp] {
    width: 16px;
    height: 16px;
}

.mentorship-invite-text[b-ada79jyymp] {
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin-bottom: 1.5rem;
}

.mentorship-invite-actions[b-ada79jyymp] {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

/* === WAITING SECTION === */
.mentorship-waiting[b-ada79jyymp] {
    position: relative;
    z-index: 1;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.mentorship-waiting-icon[b-ada79jyymp] {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    color: rgba(var(--wl-gold-rgb), 0.6);
    animation: mentorship-pulse-b-ada79jyymp 2s ease-in-out infinite;
}

@keyframes mentorship-pulse-b-ada79jyymp {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.mentorship-waiting-title[b-ada79jyymp] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0 0 0.5rem;
}

.mentorship-waiting-text[b-ada79jyymp] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

/* === PARTICIPANTS SECTION === */
.mentorship-participants[b-ada79jyymp] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.mentorship-participant[b-ada79jyymp] {
    position: relative;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 20px;
    padding: 1.5rem;
    text-align: center;
    flex: 1;
    max-width: 180px;
}

.mentorship-participant-glow[b-ada79jyymp] {
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mentorship-participant--mentor .mentorship-participant-glow[b-ada79jyymp] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.3), transparent);
}

.mentorship-participant:hover .mentorship-participant-glow[b-ada79jyymp] {
    opacity: 1;
}

.mentorship-role-badge[b-ada79jyymp] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    padding: 0.25rem 0.5rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}

.mentorship-role-badge svg[b-ada79jyymp] {
    width: 12px;
    height: 12px;
}

.mentorship-role-badge--mentor[b-ada79jyymp] {
    color: var(--wl-gold);
    background: var(--wl-gold-border);
}

.mentorship-role-badge--mentee[b-ada79jyymp] {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.2);
}

.mentorship-avatar-container[b-ada79jyymp] {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
}

.mentorship-avatar-ring[b-ada79jyymp] {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.2);
}

.mentorship-avatar-ring--gold[b-ada79jyymp] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    animation: mentorship-ring-glow-b-ada79jyymp 3s ease-in-out infinite;
}

@keyframes mentorship-ring-glow-b-ada79jyymp {
    0%, 100% { box-shadow: 0 0 20px var(--wl-gold-border); }
    50% { box-shadow: 0 0 30px rgba(var(--wl-gold-rgb), 0.4); }
}

.mentorship-avatar[b-ada79jyymp] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.mentorship-avatar-you[b-ada79jyymp] {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    background: rgba(var(--wl-bg-dark-rgb), 0.9);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
}

.mentorship-participant-name[b-ada79jyymp] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0 0 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mentorship-participant-fame[b-ada79jyymp] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-muted);
}

.mentorship-participant-fame svg[b-ada79jyymp] {
    width: 12px;
    height: 12px;
    color: var(--wl-gold);
}

/* === CONNECTION LINE === */
.mentorship-connection[b-ada79jyymp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem;
}

.mentorship-connection-line[b-ada79jyymp] {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.5), rgba(96, 165, 250, 0.5));
}

.mentorship-connection-icon[b-ada79jyymp] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-gold-bg);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 50%;
    color: var(--wl-gold);
}

.mentorship-connection-icon svg[b-ada79jyymp] {
    width: 16px;
    height: 16px;
}

/* === STATUS SECTION === */
.mentorship-status[b-ada79jyymp] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.mentorship-status-card[b-ada79jyymp] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.08), rgba(255, 191, 0, 0.03));
    border: 1px solid var(--wl-gold-border);
    border-radius: 16px;
    padding: 1.5rem;
}

.mentorship-status-header[b-ada79jyymp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin-bottom: 1rem;
}

.mentorship-status-header svg[b-ada79jyymp] {
    width: 16px;
    height: 16px;
    color: var(--wl-gold);
}

.mentorship-time-display[b-ada79jyymp] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.mentorship-time-value[b-ada79jyymp] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    color: var(--wl-gold);
    line-height: 1;
}

.mentorship-time-label[b-ada79jyymp] {
    font-size: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.mentorship-progress-bar[b-ada79jyymp] {
    height: 6px;
    background: var(--wl-border-medium);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.mentorship-progress-fill[b-ada79jyymp] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), #FFBF00);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.mentorship-dates[b-ada79jyymp] {
    display: flex;
    justify-content: space-between;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    letter-spacing: 0.05em;
}

/* === BENEFITS SECTION === */
.mentorship-benefits[b-ada79jyymp] {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.mentorship-section-header[b-ada79jyymp] {
    margin-bottom: 1rem;
}

.mentorship-section-tag[b-ada79jyymp] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.15em;
    color: var(--wl-text-muted);
    margin-bottom: 0.25rem;
}

.mentorship-section-title[b-ada79jyymp] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.05em;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    margin: 0;
}

.mentorship-benefits-grid[b-ada79jyymp] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.mentorship-benefit[b-ada79jyymp] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mentorship-benefit:hover[b-ada79jyymp] {
    background: rgba(var(--wl-gold-rgb), 0.08);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    transform: translateY(-2px);
}

.mentorship-benefit--active[b-ada79jyymp] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: linear-gradient(135deg, var(--wl-gold-bg), transparent);
}

.mentorship-benefit--mentor[b-ada79jyymp] {
    border-color: rgba(96, 165, 250, 0.3);
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), transparent);
}

.mentorship-benefit-icon[b-ada79jyymp] {
    width: 36px;
    height: 36px;
    margin: 0 auto 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-gold-bg-hover);
    border-radius: 10px;
    color: var(--wl-gold);
}

.mentorship-benefit--mentor .mentorship-benefit-icon[b-ada79jyymp] {
    background: rgba(96, 165, 250, 0.15);
    color: #60a5fa;
}

.mentorship-benefit-icon svg[b-ada79jyymp] {
    width: 20px;
    height: 20px;
}

.mentorship-benefit-label[b-ada79jyymp] {
    display: block;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin-bottom: 0.25rem;
}

.mentorship-benefit-value[b-ada79jyymp] {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-gold);
}

.mentorship-benefit--mentor .mentorship-benefit-value[b-ada79jyymp] {
    color: #60a5fa;
}

/* === ACTIONS === */
.mentorship-actions[b-ada79jyymp] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.mentorship-btn[b-ada79jyymp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.mentorship-btn svg[b-ada79jyymp] {
    width: 16px;
    height: 16px;
}

.mentorship-btn--gold[b-ada79jyymp] {
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    box-shadow: 0 4px 20px rgba(var(--wl-gold-rgb), 0.3);
}

.mentorship-btn--gold:hover:not(:disabled)[b-ada79jyymp] {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(var(--wl-gold-rgb), 0.4);
}

.mentorship-btn--ghost[b-ada79jyymp] {
    background: transparent;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.mentorship-btn--ghost:hover:not(:disabled)[b-ada79jyymp] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: var(--wl-text-muted);
}

.mentorship-btn--danger[b-ada79jyymp] {
    background: rgba(var(--wl-red-rgb), 0.1);
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
    color: #ef4444;
}

.mentorship-btn--danger:hover:not(:disabled)[b-ada79jyymp] {
    background: rgba(var(--wl-red-rgb), 0.2);
    border-color: rgba(var(--wl-red-rgb), 0.5);
}

.mentorship-btn:disabled[b-ada79jyymp] {
    opacity: 0.5;
    cursor: not-allowed;
}

.mentorship-btn-spinner[b-ada79jyymp] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: mentorship-spin-b-ada79jyymp 0.8s linear infinite;
}

/* === WARNING TEXT === */
.mentorship-warning[b-ada79jyymp] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 191, 0, 0.8);
    text-align: center;
    padding: 0.75rem;
    background: rgba(255, 191, 0, 0.05);
    border-radius: 8px;
}

.mentorship-warning svg[b-ada79jyymp] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* === RESPONSIVE === */
@media (max-width: 480px) {
    .mentorship-view[b-ada79jyymp] {
        padding: 1rem;
    }

    .mentorship-participants[b-ada79jyymp] {
        flex-direction: column;
    }

    .mentorship-participant[b-ada79jyymp] {
        max-width: 100%;
        width: 100%;
    }

    .mentorship-connection[b-ada79jyymp] {
        transform: rotate(90deg);
        padding: 1rem 0;
    }

    .mentorship-benefits-grid[b-ada79jyymp] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/Pages/Social/Online/Index.razor.rz.scp.css */
.online-page[b-jwus6pyqsh] {
    width: 100%;
    max-width: 880px;
    min-width: 0;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

/* ---------- Header ---------- */
.online-header[b-jwus6pyqsh] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    min-width: 0;
    margin-bottom: 1.75rem;
}

.online-back[b-jwus6pyqsh] {
    position: absolute;
    top: -0.25rem;
    left: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.online-back:hover[b-jwus6pyqsh] { color: var(--wl-gold); }
.online-back svg[b-jwus6pyqsh] { width: 1rem; height: 1rem; }

.online-title-group[b-jwus6pyqsh] {
    min-width: 0;
    margin-top: 1.5rem;
}

.online-eyebrow[b-jwus6pyqsh] {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.online-title[b-jwus6pyqsh] {
    margin: 0.15rem 0 0;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--wl-text-primary);
    line-height: 1.1;
}

.online-subtitle[b-jwus6pyqsh] {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--wl-text-secondary);
}

.online-count-pill[b-jwus6pyqsh] {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    border-radius: 100px;
    background: rgba(var(--wl-green-rgb), 0.12);
    border: 1px solid rgba(var(--wl-green-rgb), 0.3);
    color: var(--wl-green);
    max-width: 100%;
}

.online-count-num[b-jwus6pyqsh] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.05rem;
    font-weight: 800;
}

.online-count-label[b-jwus6pyqsh] {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.85;
}

.online-dot[b-jwus6pyqsh] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--wl-green);
    box-shadow: 0 0 0 0 rgba(var(--wl-green-rgb), 0.6);
    animation: online-pulse-b-jwus6pyqsh 2s infinite;
}

@keyframes online-pulse-b-jwus6pyqsh {
    0%   { box-shadow: 0 0 0 0 rgba(var(--wl-green-rgb), 0.55); }
    70%  { box-shadow: 0 0 0 7px rgba(var(--wl-green-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--wl-green-rgb), 0); }
}

/* ---------- List ---------- */
.online-list[b-jwus6pyqsh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.online-row[b-jwus6pyqsh] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.online-row--long-session[b-jwus6pyqsh] {
    border-color: rgba(var(--wl-green-rgb), 0.32);
    background:
        linear-gradient(90deg, rgba(var(--wl-green-rgb), 0.08), transparent 42%),
        rgba(var(--wl-contrast-rgb), 0.03);
}

.online-row--long-session[b-jwus6pyqsh]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--wl-green), rgba(var(--wl-green-rgb), 0.25));
    box-shadow: 0 0 14px rgba(var(--wl-green-rgb), 0.45);
}

.online-row--premium[b-jwus6pyqsh] {
    border-color: rgba(var(--wl-gold-rgb), 0.32);
    background:
        linear-gradient(110deg, rgba(var(--wl-gold-rgb), 0.1), transparent 38%),
        rgba(var(--wl-contrast-rgb), 0.035);
}

.online-row--premium[b-jwus6pyqsh]::after {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    width: 70px;
    left: -90px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.14), transparent);
    transform: rotate(18deg);
    animation: online-premium-shimmer-b-jwus6pyqsh 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes online-premium-shimmer-b-jwus6pyqsh {
    0%, 65% { left: -90px; opacity: 0; }
    72% { opacity: 1; }
    100% { left: calc(100% + 90px); opacity: 0; }
}

.online-row:hover[b-jwus6pyqsh] {
    background: rgba(var(--wl-gold-rgb), 0.06);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    transform: translateY(-1px);
}

.online-avatar-wrap[b-jwus6pyqsh] {
    position: relative;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
}

.online-avatar[b-jwus6pyqsh] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    background: var(--wl-bg-tertiary);
    border: 1px solid var(--wl-border-medium);
}

.online-avatar-dot[b-jwus6pyqsh] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--wl-green);
    border: 2px solid var(--wl-bg-primary);
}

.online-premium-spark[b-jwus6pyqsh] {
    position: absolute;
    left: -2px;
    top: -2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--wl-gold);
    box-shadow: 0 0 12px rgba(var(--wl-gold-rgb), 0.65);
}

.online-row-main[b-jwus6pyqsh] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
    flex: 1;
}

.online-nick-line[b-jwus6pyqsh] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.online-nick[b-jwus6pyqsh] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Player's self-set status/description shown under their nickname in the online list. */
.online-status[b-jwus6pyqsh] {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.online-premium-chip[b-jwus6pyqsh] {
    flex-shrink: 0;
    padding: 0.12rem 0.38rem;
    border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.14);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    color: var(--wl-gold);
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.online-duration[b-jwus6pyqsh],
.online-activity[b-jwus6pyqsh] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    font-size: 0.72rem;
    color: var(--wl-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.online-duration svg[b-jwus6pyqsh],
.online-activity svg[b-jwus6pyqsh] {
    width: 0.82rem;
    height: 0.82rem;
    flex-shrink: 0;
}

.online-duration[b-jwus6pyqsh] {
    color: var(--wl-green);
    font-family: 'JetBrains Mono', monospace;
}

.online-activity[b-jwus6pyqsh] {
    color: rgba(var(--wl-gold-rgb), 0.9);
}

.online-loc[b-jwus6pyqsh] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.online-loc svg[b-jwus6pyqsh] { width: 0.85rem; height: 0.85rem; flex-shrink: 0; }

.online-stats[b-jwus6pyqsh] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex-shrink: 0;
}

.online-stat[b-jwus6pyqsh] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wl-text-secondary);
}

.online-stat svg[b-jwus6pyqsh] { width: 0.95rem; height: 0.95rem; }
.online-stat--fame[b-jwus6pyqsh] { color: var(--wl-gold); }
.online-stat--fans[b-jwus6pyqsh] { color: var(--wl-text-secondary); }

.online-row-arrow[b-jwus6pyqsh] {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--wl-text-muted);
    flex-shrink: 0;
}

/* ---------- Pager ---------- */
.online-pager[b-jwus6pyqsh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.online-pager-btn[b-jwus6pyqsh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    color: var(--wl-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.online-pager-btn:hover:not(:disabled)[b-jwus6pyqsh] {
    background: rgba(var(--wl-gold-rgb), 0.08);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.online-pager-btn:disabled[b-jwus6pyqsh] { opacity: 0.4; cursor: not-allowed; }
.online-pager-btn svg[b-jwus6pyqsh] { width: 1.1rem; height: 1.1rem; }

.online-pager-info[b-jwus6pyqsh] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    min-width: 90px;
    text-align: center;
}

/* ---------- Loading / empty ---------- */
.online-loading[b-jwus6pyqsh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4rem 1rem;
    color: var(--wl-text-muted);
    font-size: 0.85rem;
}

.online-loading-ring[b-jwus6pyqsh] {
    width: 38px;
    height: 38px;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: online-spin-b-jwus6pyqsh 0.9s linear infinite;
}

@keyframes online-spin-b-jwus6pyqsh { to { transform: rotate(360deg); } }

.online-empty[b-jwus6pyqsh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 4rem 1rem;
}

.online-empty-icon[b-jwus6pyqsh] {
    width: 64px;
    height: 64px;
    color: var(--wl-text-muted);
    opacity: 0.5;
    margin-bottom: 0.5rem;
}

.online-empty-icon svg[b-jwus6pyqsh] { width: 100%; height: 100%; }
.online-empty h3[b-jwus6pyqsh] { margin: 0; font-size: 1.1rem; color: var(--wl-text-primary); }
.online-empty p[b-jwus6pyqsh] { margin: 0; font-size: 0.85rem; color: var(--wl-text-muted); }

@media (max-width: 560px) {
    .online-page[b-jwus6pyqsh] {
        padding: 1rem 0 4rem;
    }

    .online-header[b-jwus6pyqsh] {
        align-items: flex-start;
        flex-direction: column;
    }

    .online-count-pill[b-jwus6pyqsh] {
        margin-left: 0;
    }

    .online-row[b-jwus6pyqsh] {
        gap: 0.65rem;
        padding: 0.65rem 0.7rem;
    }

    .online-avatar-wrap[b-jwus6pyqsh],
    .online-avatar[b-jwus6pyqsh] {
        width: 52px;
        height: 52px;
    }

    .online-stats[b-jwus6pyqsh] { gap: 0.6rem; }
    .online-stat--fans[b-jwus6pyqsh] { display: none; }
    .online-count-label[b-jwus6pyqsh] { display: none; }
}

@media (max-width: 380px) {
    .online-stat--fame[b-jwus6pyqsh],
    .online-row-arrow[b-jwus6pyqsh] {
        display: none;
    }
}
/* /Components/Pages/Social/Podgladacz/Index.razor.rz.scp.css */
.pg-page[b-e417v55ju6] {
    position: relative;
    max-width: 52rem;
    margin: 0 auto;
    min-height: 100vh;
    padding: 1.5rem 1rem 4rem;
    overflow: hidden;
}

/* Atmosphere - fixed + full-viewport so the background covers the whole container, not just the
   content height (matches the Social hub / Gorące profile pages). */
.pg-atmosphere[b-e417v55ju6] {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.pg-orb[b-e417v55ju6] {
    position: absolute;
    width: 22rem;
    height: 22rem;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.5;
}
.pg-orb--gold[b-e417v55ju6] {
    top: -6rem;
    right: -4rem;
    background: radial-gradient(circle, rgba(var(--wl-gold-rgb), 0.28), transparent 70%);
}
.pg-orb--purple[b-e417v55ju6] {
    bottom: -8rem;
    left: -6rem;
    background: radial-gradient(circle, rgba(var(--wl-pink-rgb), 0.18), transparent 70%);
}

.pg-page > *:not(.pg-atmosphere)[b-e417v55ju6] {
    position: relative;
    z-index: 1;
}

/* Header */
.pg-header[b-e417v55ju6] {
    margin-bottom: 1.6rem;
}
.pg-eyebrow[b-e417v55ju6] {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--wl-gold);
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.pg-subtitle[b-e417v55ju6] {
    margin: 0.35rem 0 0;
    color: var(--wl-text-secondary);
    font-size: 0.95rem;
}

/* Stats */
.pg-stats[b-e417v55ju6] {
    display: flex;
    gap: 0.85rem;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}
.pg-stat[b-e417v55ju6] {
    flex: 1 1 9rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.9rem 1.1rem;
    border-radius: 14px;
    border: 1px solid var(--wl-border-subtle, rgba(128, 128, 128, 0.16));
    background: var(--wl-bg-secondary);
}
.pg-stat-value[b-e417v55ju6] {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--wl-gold);
    line-height: 1;
}
.pg-stat-label[b-e417v55ju6] {
    font-size: 0.78rem;
    color: var(--wl-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Visitor list */
.pg-list[b-e417v55ju6] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.pg-row[b-e417v55ju6] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
    border: 1px solid var(--wl-border-subtle, rgba(128, 128, 128, 0.16));
    background: var(--wl-bg-secondary);
    color: var(--wl-text-primary);
    text-decoration: none;
    transition: border-color 0.16s ease, transform 0.16s ease;
}
.pg-row:hover[b-e417v55ju6] {
    border-color: rgba(var(--wl-gold-rgb), 0.45);
    transform: translateX(2px);
}
.pg-row--stalker[b-e417v55ju6] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.08), var(--wl-bg-secondary) 40%);
}

.pg-avatar[b-e417v55ju6] {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--wl-border-medium, rgba(128, 128, 128, 0.3));
}
.pg-nick[b-e417v55ju6] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-stalker[b-e417v55ju6] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wl-bg-primary);
    background: linear-gradient(135deg, var(--wl-gold-light, #f3d27a), var(--wl-gold));
    box-shadow: 0 1px 6px rgba(var(--wl-gold-rgb), 0.35);
    cursor: help;
}
.pg-stalker svg[b-e417v55ju6] {
    width: 0.85rem;
    height: 0.85rem;
}

.pg-count[b-e417v55ju6] {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--wl-gold);
}
.pg-when[b-e417v55ju6] {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--wl-text-muted, var(--wl-text-secondary));
    white-space: nowrap;
}

/* Upsell (non-premium) */
.pg-upsell[b-e417v55ju6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1.2rem 1.3rem;
    border-radius: 14px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.35);
    background: rgba(var(--wl-gold-rgb), 0.06);
}
.pg-upsell-text[b-e417v55ju6] {
    margin: 0;
    color: var(--wl-text-secondary);
}
.pg-upsell-cta[b-e417v55ju6] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.15rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--wl-bg-primary);
    background: linear-gradient(135deg, var(--wl-gold-light, #f3d27a), var(--wl-gold));
}

/* Empty + loading */
.pg-empty[b-e417v55ju6] {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--wl-text-secondary);
    border: 1px dashed var(--wl-border-subtle, rgba(128, 128, 128, 0.2));
    border-radius: 14px;
}
.pg-loading[b-e417v55ju6] {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}
.pg-loading-ring[b-e417v55ju6] {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 3px solid rgba(var(--wl-gold-rgb), 0.25);
    border-top-color: var(--wl-gold);
    animation: pg-spin-b-e417v55ju6 0.8s linear infinite;
}
@keyframes pg-spin-b-e417v55ju6 {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .pg-when[b-e417v55ju6] { display: none; }
}
/* /Components/Pages/Social/Search.razor.rz.scp.css */
.search-page[b-ht68jm524e] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.search-header[b-ht68jm524e] {
    margin-bottom: 2rem;
    text-align: center;
}

.search-header h1[b-ht68jm524e] {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
}

.search-subtitle[b-ht68jm524e] {
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-size: 1rem;
}

.search-filters[b-ht68jm524e] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.interaction-type-selector[b-ht68jm524e] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.type-button[b-ht68jm524e] {
    padding: 0.75rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.type-button:hover[b-ht68jm524e] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.type-button.active[b-ht68jm524e] {
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border-color: var(--wl-gold);
    color: var(--wl-bg-primary);
}

.search-input[b-ht68jm524e] {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    color: var(--wl-text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
}

.search-input[b-ht68jm524e]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.search-input:focus[b-ht68jm524e] {
    outline: none;
    background: var(--wl-border-medium);
    border-color: var(--wl-gold);
}

.search-results[b-ht68jm524e] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.search-loading[b-ht68jm524e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    gap: 1rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.loading-spinner[b-ht68jm524e] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    max-width: 48px;
    max-height: 48px;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin-b-ht68jm524e 0.8s linear infinite;
    flex-shrink: 0;
}

@keyframes spin-b-ht68jm524e {
    to {
        transform: rotate(360deg);
    }
}

.search-empty[b-ht68jm524e] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 1rem;
    gap: 1rem;
    color: var(--wl-text-muted);
}

.empty-icon[b-ht68jm524e] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    opacity: 0.3;
}

.empty-icon svg[b-ht68jm524e] {
    width: 100%;
    height: 100%;
}

.search-empty p[b-ht68jm524e] {
    font-size: 1.125rem;
    font-weight: 500;
}

/* Confirmation Modal */
.modal-backdrop[b-ht68jm524e] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
}

.confirm-modal[b-ht68jm524e] {
    background: linear-gradient(180deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 24px 48px var(--wl-shadow-color);
    animation: modal-appear-b-ht68jm524e 0.2s ease-out;
}

@keyframes modal-appear-b-ht68jm524e {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header[b-ht68jm524e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--wl-border-medium);
}

.modal-header h3[b-ht68jm524e] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
}

.modal-close[b-ht68jm524e] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--wl-text-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.modal-close:hover[b-ht68jm524e] {
    background: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.modal-close svg[b-ht68jm524e] {
    width: 18px;
    height: 18px;
}

.modal-body[b-ht68jm524e] {
    padding: 1.5rem;
}

.target-preview[b-ht68jm524e] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-radius: 12px;
    margin-bottom: 1rem;
}

.target-avatar[b-ht68jm524e] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.4);
}

.target-info[b-ht68jm524e] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.target-name[b-ht68jm524e] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.target-fame[b-ht68jm524e] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
}

.cost-info[b-ht68jm524e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--wl-gold-bg);
    border: 1px solid var(--wl-gold-border);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.cost-label[b-ht68jm524e] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.cost-value[b-ht68jm524e] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wl-gold);
}

.modal-description[b-ht68jm524e] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    line-height: 1.5;
    margin: 0;
}

.modal-footer[b-ht68jm524e] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem;
}

.btn-cancel[b-ht68jm524e],
.btn-confirm[b-ht68jm524e] {
    flex: 1;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-cancel[b-ht68jm524e] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.15);
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.btn-cancel:hover:not(:disabled)[b-ht68jm524e] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.25);
}

.btn-confirm[b-ht68jm524e] {
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    color: var(--wl-bg-primary);
}

.btn-confirm:hover:not(:disabled)[b-ht68jm524e] {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-cancel:disabled[b-ht68jm524e],
.btn-confirm:disabled[b-ht68jm524e] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner[b-ht68jm524e] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(0, 0, 0, 0.2);
    border-top-color: var(--wl-bg-primary);
    border-radius: 50%;
    animation: spin-b-ht68jm524e 0.6s linear infinite;
}

@media (max-width: 768px) {
    .search-page[b-ht68jm524e] {
        padding: 1rem;
    }

    .search-header h1[b-ht68jm524e] {
        font-size: 1.5rem;
    }

    .interaction-type-selector[b-ht68jm524e] {
        flex-direction: column;
    }

    .type-button[b-ht68jm524e] {
        width: 100%;
    }

    .confirm-modal[b-ht68jm524e] {
        max-width: none;
    }
}
/* /Components/Pages/Social/SetupNickname.razor.rz.scp.css */
/* ==========================================
   SETUP NICKNAME - DARK LUXURY AESTHETIC
   ========================================== */

.setup[b-egqsov5eub] {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    overflow: hidden;
}

/* === CINEMATIC ATMOSPHERE === */
.setup-atmosphere[b-egqsov5eub] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.setup-gradient-orb[b-egqsov5eub] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.3;
}

.setup-gradient-orb--gold[b-egqsov5eub] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    top: -150px;
    right: -100px;
    animation: setup-float-b-egqsov5eub 25s ease-in-out infinite reverse;
}

.setup-gradient-orb--purple[b-egqsov5eub] {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--wl-purple) 0%, transparent 70%);
    bottom: -200px;
    left: -100px;
    animation: setup-float-b-egqsov5eub 20s ease-in-out infinite;
}

@keyframes setup-float-b-egqsov5eub {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 30px) scale(0.95); }
}

.setup-scanline[b-egqsov5eub] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-purple-rgb), 0.02) 2px,
        rgba(var(--wl-purple-rgb), 0.02) 4px
    );
    pointer-events: none;
}

.setup-noise[b-egqsov5eub] {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* === ANIMATIONS === */
.animate-fade-in[b-egqsov5eub] {
    animation: setup-fadeIn-b-egqsov5eub 0.6s ease-out forwards;
    opacity: 0;
}

@keyframes setup-fadeIn-b-egqsov5eub {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === CARD === */
.setup-card[b-egqsov5eub] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 24px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

/* === HEADER ICON === */
.setup-icon[b-egqsov5eub] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-gold-bg-hover);
    border-radius: 16px;
    color: var(--wl-gold);
}

.setup-icon svg[b-egqsov5eub] {
    width: 28px;
    height: 28px;
}

/* === TITLE & DESCRIPTION === */
.setup-title[b-egqsov5eub] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
    text-align: center;
}

.setup-description[b-egqsov5eub] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
    text-align: center;
    margin: 0;
    max-width: 360px;
    line-height: 1.5;
}

/* === INPUT === */
.setup-input-wrapper[b-egqsov5eub] {
    width: 100%;
}

.setup-input-group[b-egqsov5eub] {
    display: flex;
    align-items: center;
    background: var(--wl-bg-primary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 14px;
    padding: 0 1rem;
    transition: all 0.3s ease;
}

.setup-input-group:focus-within[b-egqsov5eub] {
    border-color: var(--wl-gold);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.15),
                0 0 20px rgba(var(--wl-gold-rgb), 0.1);
}

.setup-input-group--success[b-egqsov5eub] {
    border-color: #22C55E;
}

.setup-input-group--success:focus-within[b-egqsov5eub] {
    border-color: #22C55E;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15),
                0 0 20px rgba(34, 197, 94, 0.1);
}

.setup-input-group--error[b-egqsov5eub] {
    border-color: var(--wl-red);
}

.setup-input-group--error:focus-within[b-egqsov5eub] {
    border-color: var(--wl-red);
    box-shadow: 0 0 0 3px rgba(var(--wl-red-rgb), 0.15),
                0 0 20px rgba(var(--wl-red-rgb), 0.1);
}

.setup-input-prefix[b-egqsov5eub] {
    display: flex;
    align-items: center;
    color: var(--wl-text-muted);
    flex-shrink: 0;
}

.setup-input-prefix svg[b-egqsov5eub] {
    width: 20px;
    height: 20px;
}

.setup-input[b-egqsov5eub] {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 0.875rem 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.02em;
}

.setup-input[b-egqsov5eub]::placeholder {
    color: var(--wl-text-muted);
    opacity: 0.5;
}

.setup-input-status[b-egqsov5eub] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.setup-input-status svg[b-egqsov5eub] {
    width: 20px;
    height: 20px;
}

.setup-input-status--success[b-egqsov5eub] {
    color: #22C55E;
}

.setup-input-status--error[b-egqsov5eub] {
    color: var(--wl-red);
}

/* === ERROR TEXT === */
.setup-error[b-egqsov5eub] {
    margin: 0.5rem 0 0;
    padding: 0 0.25rem;
    font-size: 0.75rem;
    color: var(--wl-red);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
}

/* === SPINNER === */
.setup-spinner[b-egqsov5eub] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.15);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: setup-spin-b-egqsov5eub 0.8s linear infinite;
}

@keyframes setup-spin-b-egqsov5eub {
    to { transform: rotate(360deg); }
}

/* === PREVIEW === */
.setup-preview[b-egqsov5eub] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 14px;
    width: 100%;
}

.setup-preview-label[b-egqsov5eub] {
    font-size: 0.625rem;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.setup-preview-handle[b-egqsov5eub] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.75rem;
    letter-spacing: 0.03em;
    color: var(--wl-gold);
    word-break: break-all;
}

/* === CLAIM BUTTON === */
.setup-claim-btn[b-egqsov5eub] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light, #f0c040));
    border: none;
    border-radius: 14px;
    color: #000;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.setup-claim-btn:not(:disabled):hover[b-egqsov5eub] {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(var(--wl-gold-rgb), 0.4);
}

.setup-claim-btn:not(:disabled):active[b-egqsov5eub] {
    transform: translateY(0);
}

.setup-claim-btn:disabled[b-egqsov5eub] {
    opacity: 0.4;
    cursor: not-allowed;
}

.setup-claim-btn svg[b-egqsov5eub] {
    width: 18px;
    height: 18px;
}

.setup-claim-btn .setup-spinner[b-egqsov5eub] {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: #000;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .setup[b-egqsov5eub] {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 4rem;
    }

    .setup-card[b-egqsov5eub] {
        padding: 2rem 1.25rem;
        border-radius: 20px;
    }

    .setup-title[b-egqsov5eub] {
        font-size: 1.75rem;
    }

    .setup-preview-handle[b-egqsov5eub] {
        font-size: 1.5rem;
    }
}
/* /Components/Pages/Social/Spotlight/Index.razor.rz.scp.css */
/* ==========================================
   SPOTLIGHT - AAA+++ PREMIUM DESIGN
   ========================================== */

.spotlight[b-r16njs0s05] {
    position: relative;
    min-height: 100vh;
    padding: 1.5rem;
    overflow: hidden;
    max-width: 680px;
    margin: 0 auto;
}

/* === CINEMATIC ATMOSPHERE === */
.spotlight-atmosphere[b-r16njs0s05] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.spotlight-gradient-orb[b-r16njs0s05] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
}

.spotlight-gradient-orb--gold[b-r16njs0s05] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    animation: spotlightFloat-b-r16njs0s05 22s ease-in-out infinite;
}

.spotlight-gradient-orb--purple[b-r16njs0s05] {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, var(--wl-purple) 0%, transparent 70%);
    bottom: -150px;
    left: -100px;
    animation: spotlightFloat-b-r16njs0s05 28s ease-in-out infinite reverse;
}

@keyframes spotlightFloat-b-r16njs0s05 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(25px, -15px) scale(1.04); }
    66% { transform: translate(-15px, 25px) scale(0.96); }
}

.spotlight-scanline[b-r16njs0s05] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-gold-rgb), 0.015) 2px,
        rgba(var(--wl-gold-rgb), 0.015) 4px
    );
}

.spotlight-noise[b-r16njs0s05] {
    position: absolute;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* === ANIMATIONS === */
.animate-fade-in[b-r16njs0s05] {
    animation: spotlightFadeIn-b-r16njs0s05 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100[b-r16njs0s05] { animation-delay: 0.1s; }
.delay-200[b-r16njs0s05] { animation-delay: 0.2s; }
.delay-300[b-r16njs0s05] { animation-delay: 0.3s; }

@keyframes spotlightFadeIn-b-r16njs0s05 {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === HEADER === */
.spotlight-header[b-r16njs0s05] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.spotlight-header-content[b-r16njs0s05] {
    flex: 1;
}

.spotlight-header-tag[b-r16njs0s05] {
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.2em;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    margin-bottom: 0.5rem;
}

.spotlight-header-title[b-r16njs0s05] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1;
}

.spotlight-header-actions[b-r16njs0s05] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.spotlight-showoff-btn[b-r16njs0s05] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    border-radius: 10px;
    color: var(--wl-bg-primary);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
}
.spotlight-showoff-btn:hover[b-r16njs0s05] { filter: brightness(1.06); transform: translateY(-1px); }
.spotlight-showoff-btn svg[b-r16njs0s05] { width: 16px; height: 16px; }

.spotlight-back-btn[b-r16njs0s05] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.spotlight-back-btn:hover[b-r16njs0s05] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.spotlight-back-btn svg[b-r16njs0s05] {
    width: 16px;
    height: 16px;
}

/* === FILTER TABS === */
.spotlight-filters[b-r16njs0s05] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
}

.spotlight-filter[b-r16njs0s05] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 100px;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.spotlight-filter:hover:not(.spotlight-filter--active)[b-r16njs0s05] {
    background: var(--wl-border-subtle);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.spotlight-filter--active[b-r16njs0s05] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

/* === LOADING === */
.spotlight-loading[b-r16njs0s05] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1.25rem;
}

.spotlight-loading-ring[b-r16njs0s05] {
    width: 48px;
    height: 48px;
    border: 2.5px solid var(--wl-gold-bg-hover);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spotlightSpin-b-r16njs0s05 1s linear infinite;
}

@keyframes spotlightSpin-b-r16njs0s05 {
    to { transform: rotate(360deg); }
}

.spotlight-loading-text[b-r16njs0s05] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.3em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.spotlight-loading-spinner[b-r16njs0s05] {
    width: 18px;
    height: 18px;
    border: 2px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spotlightSpin-b-r16njs0s05 0.8s linear infinite;
}

/* === EMPTY STATE === */
.spotlight-empty[b-r16njs0s05] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 20px;
}

.spotlight-empty-icon[b-r16njs0s05] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    color: rgba(var(--wl-contrast-rgb), 0.2);
}

.spotlight-empty-icon svg[b-r16njs0s05] {
    width: 100%;
    height: 100%;
}

.spotlight-empty-title[b-r16njs0s05] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    margin: 0;
    font-weight: 400;
    max-width: 300px;
    margin: 0 auto;
    line-height: 1.5;
}

/* === FEED === */
.spotlight-feed[b-r16njs0s05] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* === LOAD MORE === */
.spotlight-load-more[b-r16njs0s05] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    padding-bottom: 2rem;
}

.spotlight-load-more-btn[b-r16njs0s05] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
}

.spotlight-load-more-btn:hover:not(:disabled)[b-r16njs0s05] {
    background: rgba(var(--wl-gold-rgb), 0.08);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
    transform: translateY(-1px);
}

.spotlight-load-more-btn:disabled[b-r16njs0s05] {
    cursor: not-allowed;
    opacity: 0.6;
}

.spotlight-load-more-btn svg[b-r16njs0s05] {
    width: 16px;
    height: 16px;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .spotlight[b-r16njs0s05] {
        padding: 1rem;
    }

    .spotlight-header[b-r16njs0s05] {
        flex-direction: column;
        align-items: stretch;
    }

    .spotlight-back-btn[b-r16njs0s05] {
        align-self: flex-start;
    }

    .spotlight-header-title[b-r16njs0s05] {
        font-size: 2rem;
    }

    .spotlight-filters[b-r16njs0s05] {
        gap: 0.375rem;
    }

    .spotlight-filter[b-r16njs0s05] {
        padding: 0.4rem 0.625rem;
        font-size: 0.625rem;
    }
}

@media (min-width: 1024px) {
    .spotlight[b-r16njs0s05] {
        padding: 2rem;
    }
}
/* /Components/Pages/Social/Spotlight/PostDetail.razor.rz.scp.css */
.post-detail[b-8tbozhv8un] {
    position: relative;
    min-height: 100vh;
    padding: 1.5rem;
    overflow: hidden;
    max-width: 680px;
    margin: 0 auto;
}

.post-detail-atmosphere[b-8tbozhv8un] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.post-detail-gradient-orb[b-8tbozhv8un] {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
}

.post-detail-gradient-orb--gold[b-8tbozhv8un] {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--wl-gold) 0%, transparent 70%);
    top: -200px;
    right: -100px;
    animation: postDetailFloat-b-8tbozhv8un 22s ease-in-out infinite;
}

.post-detail-gradient-orb--purple[b-8tbozhv8un] {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, var(--wl-purple) 0%, transparent 70%);
    bottom: -150px;
    left: -100px;
    animation: postDetailFloat-b-8tbozhv8un 28s ease-in-out infinite reverse;
}

@keyframes postDetailFloat-b-8tbozhv8un {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(25px, -15px) scale(1.04); }
    66% { transform: translate(-15px, 25px) scale(0.96); }
}

.post-detail-scanline[b-8tbozhv8un] {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(var(--wl-gold-rgb), 0.015) 2px,
        rgba(var(--wl-gold-rgb), 0.015) 4px
    );
}

.animate-fade-in[b-8tbozhv8un] {
    animation: postDetailFadeIn-b-8tbozhv8un 0.6s ease-out forwards;
    opacity: 0;
}

.delay-100[b-8tbozhv8un] { animation-delay: 0.1s; }

@keyframes postDetailFadeIn-b-8tbozhv8un {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

.post-detail-back[b-8tbozhv8un] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.25s ease;
    margin-bottom: 1.5rem;
}

.post-detail-back:hover[b-8tbozhv8un] {
    background: var(--wl-border-medium);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.post-detail-back[b-8tbozhv8un]  svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.post-detail-loading[b-8tbozhv8un] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    gap: 1.25rem;
}

.post-detail-loading-ring[b-8tbozhv8un] {
    width: 48px;
    height: 48px;
    border: 2.5px solid var(--wl-gold-bg-hover);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: postDetailSpin-b-8tbozhv8un 1s linear infinite;
}

@keyframes postDetailSpin-b-8tbozhv8un { to { transform: rotate(360deg); } }

.post-detail-loading-text[b-8tbozhv8un] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.3em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.post-detail-empty[b-8tbozhv8un] {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px dashed var(--wl-border-medium);
    border-radius: 20px;
}

.post-detail-empty-icon[b-8tbozhv8un] {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    color: rgba(var(--wl-contrast-rgb), 0.2);
}

.post-detail-empty-icon[b-8tbozhv8un]  svg {
    width: 100%;
    height: 100%;
}

.post-detail-empty-title[b-8tbozhv8un] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    margin: 0;
    font-weight: 400;
}

.post-detail-error[b-8tbozhv8un] {
    position: relative;
    z-index: 1;
    margin-bottom: 0.75rem;
    color: var(--wl-red);
    font-size: 0.8125rem;
}

.post-detail-content[b-8tbozhv8un] {
    position: relative;
    z-index: 1;
    padding-bottom: 2rem;
}

@media (max-width: 640px) {
    .post-detail[b-8tbozhv8un] { padding: 1rem; }
}

@media (min-width: 1024px) {
    .post-detail[b-8tbozhv8un] { padding: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .post-detail-gradient-orb[b-8tbozhv8un],
    .post-detail-loading-ring[b-8tbozhv8un],
    .animate-fade-in[b-8tbozhv8un] {
        animation: none;
    }

    .animate-fade-in[b-8tbozhv8un] {
        opacity: 1;
    }
}
/* /Components/Pages/Social/Spotlight/SpotlightCard.razor.rz.scp.css */
/* ==========================================
   SPOTLIGHT CARD - Hot/Not Voting Card
   ========================================== */

.card[b-dtxwvwxnq1] {
    position: relative;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: cardIn-b-dtxwvwxnq1 0.5s ease forwards;
    opacity: 0;
}

@keyframes cardIn-b-dtxwvwxnq1 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card:hover[b-dtxwvwxnq1] {
    border-color: rgba(var(--wl-gold-rgb), 0.2);
    box-shadow: 0 8px 32px var(--wl-shadow-color);
}

/* === IMAGE === */
.card-image-wrap[b-dtxwvwxnq1] {
    position: relative;
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.card-image-wrap[b-dtxwvwxnq1]  .card-image {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.card:hover .card-image-wrap[b-dtxwvwxnq1]  .card-image {
    transform: scale(1.02);
}

/* === BODY === */
.card-body[b-dtxwvwxnq1] {
    padding: 1.25rem;
}

/* === AUTHOR === */
.card-author[b-dtxwvwxnq1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.card-avatar[b-dtxwvwxnq1] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.2);
    flex-shrink: 0;
}

.card-author-info[b-dtxwvwxnq1] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.card-author-name[b-dtxwvwxnq1] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-author-time[b-dtxwvwxnq1] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    color: var(--wl-text-muted);
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: color 0.2s ease;
}

.card-author-time:hover[b-dtxwvwxnq1] {
    color: var(--wl-gold);
}

/* === CAPTION === */
/* === METADATA TAGS === */
.card-tags[b-dtxwvwxnq1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.card-tag[b-dtxwvwxnq1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
    border: 1px solid var(--wl-border-medium);
}

.card-tag svg[b-dtxwvwxnq1] {
    width: 0.8125rem;
    height: 0.8125rem;
    opacity: 0.7;
}

.card-tag--pose[b-dtxwvwxnq1] {
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.08);
    border-color: rgba(var(--wl-gold-rgb), 0.2);
}

.card-tag--time[b-dtxwvwxnq1] {
    color: #818CF8;
    background: rgba(129, 140, 248, 0.08);
    border-color: rgba(129, 140, 248, 0.2);
}

.card-tag--location[b-dtxwvwxnq1] {
    color: #34D399;
    background: rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.2);
}

.card-tag--city[b-dtxwvwxnq1] {
    color: #F472B6;
    background: rgba(244, 114, 182, 0.08);
    border-color: rgba(244, 114, 182, 0.2);
}

.card-caption[b-dtxwvwxnq1] {
    font-size: 0.875rem;
    color: var(--wl-text-secondary);
    line-height: 1.5;
    margin: 0 0 1rem;
    word-wrap: break-word;
}

/* === VOTING === */
.card-voting[b-dtxwvwxnq1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.vote-btn[b-dtxwvwxnq1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 14px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.vote-btn:hover:not(:disabled):not(.vote-btn--selected)[b-dtxwvwxnq1] {
    transform: translateY(-1px);
}

.vote-btn:disabled[b-dtxwvwxnq1] {
    cursor: not-allowed;
    opacity: 0.7;
}

.vote-btn-icon[b-dtxwvwxnq1] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vote-btn-icon svg[b-dtxwvwxnq1] {
    width: 18px;
    height: 18px;
}

.vote-btn-label[b-dtxwvwxnq1] {
    font-weight: 600;
}

.vote-btn-count[b-dtxwvwxnq1] {
    opacity: 0.7;
    font-size: 0.6875rem;
}

/* --- HOT Button --- */
.vote-btn--hot:hover:not(:disabled):not(.vote-btn--selected)[b-dtxwvwxnq1] {
    background: rgba(var(--wl-red-rgb), 0.08);
    border-color: rgba(var(--wl-red-rgb), 0.3);
    color: var(--wl-red);
}

.vote-btn--hot.vote-btn--selected[b-dtxwvwxnq1] {
    background: rgba(var(--wl-red-rgb), 0.15);
    border-color: rgba(var(--wl-red-rgb), 0.4);
    color: var(--wl-red);
    box-shadow: 0 0 16px rgba(var(--wl-red-rgb), 0.15);
}

/* --- NOT Button --- */
.vote-btn--not:hover:not(:disabled):not(.vote-btn--selected)[b-dtxwvwxnq1] {
    background: rgba(96, 165, 250, 0.08);
    border-color: rgba(96, 165, 250, 0.3);
    color: #60A5FA;
}

.vote-btn--not.vote-btn--selected[b-dtxwvwxnq1] {
    background: rgba(96, 165, 250, 0.15);
    border-color: rgba(96, 165, 250, 0.4);
    color: #60A5FA;
    box-shadow: 0 0 16px rgba(96, 165, 250, 0.15);
}

/* === RESULTS BAR === */
.card-results[b-dtxwvwxnq1] {
    margin-top: 0.75rem;
    animation: resultsIn-b-dtxwvwxnq1 0.4s ease forwards;
}

@keyframes resultsIn-b-dtxwvwxnq1 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.results-bar[b-dtxwvwxnq1] {
    display: flex;
    height: 6px;
    border-radius: 100px;
    overflow: hidden;
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.results-bar-hot[b-dtxwvwxnq1] {
    background: linear-gradient(90deg, var(--wl-red), var(--wl-red-dark));
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 100px 0 0 100px;
    min-width: 4px;
}

.results-bar-not[b-dtxwvwxnq1] {
    background: linear-gradient(90deg, #60A5FA, #93C5FD);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 100px 100px 0;
    min-width: 4px;
}

.results-labels[b-dtxwvwxnq1] {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
}

.results-label[b-dtxwvwxnq1] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.results-label--hot[b-dtxwvwxnq1] {
    color: var(--wl-red);
}

.results-label--not[b-dtxwvwxnq1] {
    color: #60A5FA;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
    .card-body[b-dtxwvwxnq1] {
        padding: 1rem;
    }

    .card-image-wrap[b-dtxwvwxnq1] {
        max-height: 380px;
    }

    .card-image-wrap[b-dtxwvwxnq1]  .card-image {
        max-height: 380px;
    }

    .vote-btn[b-dtxwvwxnq1] {
        padding: 0.625rem 0.75rem;
        font-size: 0.6875rem;
        gap: 0.375rem;
    }

    .vote-btn-icon svg[b-dtxwvwxnq1] {
        width: 16px;
        height: 16px;
    }

    .card-avatar[b-dtxwvwxnq1] {
        width: 36px;
        height: 36px;
    }
}

.card-comment-toggle[b-dtxwvwxnq1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.875rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 10px;
    background: transparent;
    color: var(--wl-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.card-comment-toggle svg[b-dtxwvwxnq1] {
    width: 1rem;
    height: 1rem;
}

.card-comment-toggle:hover[b-dtxwvwxnq1],
.card-comment-toggle--active[b-dtxwvwxnq1] {
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), 0.35);
    background: rgba(var(--wl-gold-rgb), 0.06);
}

.card-comments[b-dtxwvwxnq1] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
}
/* /Components/Pages/Social/Spotlight/SpotlightCommentThread.razor.rz.scp.css */
/* ==========================================
   COMMENT THREAD - Social Board
   ========================================== */

.comment-thread[b-04hcvyiv3w] {
    border-top: 1px solid var(--wl-border-subtle);
    padding-top: 1rem;
    margin-top: 1rem;
}

/* --- Loading --- */
.comment-loading[b-04hcvyiv3w] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.comment-loading-spinner[b-04hcvyiv3w] {
    width: 24px;
    height: 24px;
    border: 2px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: commentSpin-b-04hcvyiv3w 0.8s linear infinite;
}

.comment-loading-spinner--small[b-04hcvyiv3w] {
    width: 16px;
    height: 16px;
}

@keyframes commentSpin-b-04hcvyiv3w {
    to { transform: rotate(360deg); }
}

/* --- Single Comment --- */
.comment[b-04hcvyiv3w] {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 14px;
    background: rgba(var(--wl-contrast-rgb), 0.025);
    animation: commentFadeIn-b-04hcvyiv3w 0.3s ease forwards;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.comment:hover[b-04hcvyiv3w] {
    border-color: rgba(var(--wl-contrast-rgb), 0.13);
    background: rgba(var(--wl-contrast-rgb), 0.035);
}

@keyframes commentFadeIn-b-04hcvyiv3w {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comment--deleted[b-04hcvyiv3w] {
    opacity: 0.5;
}

.comment-avatar[b-04hcvyiv3w] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--wl-border-subtle);
}

.comment-body[b-04hcvyiv3w] {
    flex: 1;
    min-width: 0;
}

.comment-header[b-04hcvyiv3w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
    flex-wrap: wrap;
}

.comment-author[b-04hcvyiv3w] {
    font-weight: 600;
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.comment-author-link[b-04hcvyiv3w] {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.comment-author-link:hover[b-04hcvyiv3w] {
    color: var(--wl-gold);
    text-decoration: underline;
}

.comment-time[b-04hcvyiv3w] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

.comment-edited[b-04hcvyiv3w] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

.comment-actions[b-04hcvyiv3w] {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.comment:hover .comment-actions[b-04hcvyiv3w] {
    opacity: 1;
}

.comment-action-btn[b-04hcvyiv3w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: transparent;
    border: none;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.comment-action-btn:hover[b-04hcvyiv3w] {
    background: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.8);
}

.comment-action-btn--danger:hover[b-04hcvyiv3w] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: #ef4444;
}

.comment-action-btn svg[b-04hcvyiv3w] {
    width: 14px;
    height: 14px;
}

.comment-content[b-04hcvyiv3w] {
    font-size: 0.9375rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    line-height: 1.5;
    word-break: break-word;
}

.comment-content[b-04hcvyiv3w]  a {
    color: var(--wl-gold);
    text-decoration: none;
}

.comment-content[b-04hcvyiv3w]  a:hover {
    text-decoration: underline;
}

.comment-content[b-04hcvyiv3w]  .board-tag {
    color: var(--wl-purple);
    font-weight: 500;
}

.comment-content[b-04hcvyiv3w]  .board-mention {
    color: #38BDF8;
    font-weight: 600;
    text-decoration: none;
    background: rgba(56, 189, 248, 0.1);
    padding: 0.05em 0.3em;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.comment-content[b-04hcvyiv3w]  a.board-mention:hover {
    color: #7DD3FC;
    background: rgba(56, 189, 248, 0.2);
    text-decoration: none;
}

.comment-footer[b-04hcvyiv3w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.comment-reply-toggle[b-04hcvyiv3w] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    min-height: 32px;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.035);
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.comment-reply-toggle:hover[b-04hcvyiv3w],
.comment-reply-toggle--active[b-04hcvyiv3w] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.24);
    color: var(--wl-gold);
}

.comment-reply-toggle svg[b-04hcvyiv3w] {
    width: 16px;
    height: 16px;
}

.comment-replies[b-04hcvyiv3w] {
    margin-top: 0.75rem;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(var(--wl-gold-rgb), 0.16);
}

/* --- Deleted Comment Notice --- */
.comment-deleted-notice[b-04hcvyiv3w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

.comment-deleted-notice svg[b-04hcvyiv3w] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --- Edit Area --- */
.comment-edit-area[b-04hcvyiv3w] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-top: 0.25rem;
}

.comment-edit-input[b-04hcvyiv3w] {
    flex: 1;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.8125rem;
    font-family: inherit;
    resize: vertical;
    min-height: 36px;
    transition: border-color 0.2s ease;
}

.comment-edit-input:focus[b-04hcvyiv3w] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.comment-edit-save[b-04hcvyiv3w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    color: var(--wl-bg-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.comment-edit-save:hover[b-04hcvyiv3w] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.3);
}

.comment-edit-save:disabled[b-04hcvyiv3w] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.comment-edit-save svg[b-04hcvyiv3w] {
    width: 16px;
    height: 16px;
}

/* --- Load More --- */
.comment-load-more[b-04hcvyiv3w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem;
    background: transparent;
    border: 1px dashed var(--wl-border-medium);
    border-radius: 8px;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.comment-load-more:hover:not(:disabled)[b-04hcvyiv3w] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.comment-load-more:disabled[b-04hcvyiv3w] {
    cursor: not-allowed;
}

/* --- Add Comment --- */
.comment-add[b-04hcvyiv3w] {
    display: flex;
    gap: 0.5rem;
    align-items: flex-end;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
}

.comment-add-input[b-04hcvyiv3w] {
    flex: 1;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.8125rem;
    font-family: inherit;
    resize: none;
    min-height: 36px;
    transition: border-color 0.2s ease;
}

.comment-add-input[b-04hcvyiv3w]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.25);
}

.comment-add-input:focus[b-04hcvyiv3w] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.comment-add-submit[b-04hcvyiv3w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border: none;
    color: var(--wl-bg-primary);
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.comment-add-submit:hover:not(:disabled)[b-04hcvyiv3w] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--wl-gold-rgb), 0.35);
}

.comment-add-submit:disabled[b-04hcvyiv3w] {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.comment-add-submit svg[b-04hcvyiv3w] {
    width: 18px;
    height: 18px;
}

/* --- Emoji Button --- */
.comment-emoji-wrapper[b-04hcvyiv3w] {
    position: relative;
    flex-shrink: 0;
}

.comment-emoji-btn[b-04hcvyiv3w] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.4;
}

.comment-emoji-btn:hover[b-04hcvyiv3w] {
    opacity: 0.7;
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.comment-emoji-btn--active[b-04hcvyiv3w] {
    opacity: 1;
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
}

.comment-emoji-btn img[b-04hcvyiv3w] {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.comment-emoji-wrapper[b-04hcvyiv3w]  .emoji-picker {
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 8px;
}

/* --- Responsive --- */
@media (max-width: 640px) {
    .comment-actions[b-04hcvyiv3w] {
        opacity: 1;
    }
}
/* /Components/Pages/Stock/Index.razor.rz.scp.css */
.gielda-page[b-qcqsyl733g] {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    min-height: 100%;
}

.gielda-atmosphere[b-qcqsyl733g] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at top, rgba(var(--wl-gold-rgb), 0.05) 0%, transparent 60%);
    z-index: 0;
}

.gielda-page > *[b-qcqsyl733g] {
    position: relative;
    z-index: 1;
}

/* Loading / empty */
.gielda-loading[b-qcqsyl733g],
.gielda-empty[b-qcqsyl733g] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    color: var(--wl-text-secondary);
}

.gielda-spinner[b-qcqsyl733g] {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid var(--wl-gold-border);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: gielda-spin-b-qcqsyl733g 0.8s linear infinite;
}

@keyframes gielda-spin-b-qcqsyl733g {
    to { transform: rotate(360deg); }
}

/* Header */
.gielda-header[b-qcqsyl733g] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.gielda-eyebrow[b-qcqsyl733g] {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wl-gold);
    margin-bottom: 0.35rem;
}

.gielda-title[b-qcqsyl733g] {
    font-size: 2.6rem;
    line-height: 1;
    color: var(--wl-text-primary);
    margin: 0;
}

.gielda-subtitle[b-qcqsyl733g] {
    display: block;
    margin-top: 0.4rem;
    color: var(--wl-text-secondary);
    font-size: 0.875rem;
}

.gielda-stats[b-qcqsyl733g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.gielda-stat[b-qcqsyl733g] {
    text-align: right;
    padding: 0.6rem 1rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.6rem;
    background: rgba(var(--wl-gold-rgb), 0.04);
    min-width: 9rem;
}

.gielda-stat-label[b-qcqsyl733g] {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
    margin-bottom: 0.15rem;
}

.gielda-credits[b-qcqsyl733g] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wl-gold);
    font-variant-numeric: tabular-nums;
}

.gielda-stat-value[b-qcqsyl733g] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    font-variant-numeric: tabular-nums;
}

.gielda-stat-pl[b-qcqsyl733g] {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.gielda-section-title[b-qcqsyl733g] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin: 0 0 1rem;
    letter-spacing: 0.02em;
}

/* Market wrapper */
.gielda-market.player-company-market[b-qcqsyl733g] {
    margin-bottom: 2.5rem;
}

/* Toolbar: filter tabs + search */
.market-toolbar[b-qcqsyl733g] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.market-tabs[b-qcqsyl733g] {
    display: inline-flex;
    padding: 0.25rem;
    gap: 0.2rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.6rem;
    background: var(--wl-surface-primary);
}

.market-tab[b-qcqsyl733g] {
    padding: 0.45rem 0.95rem;
    border: none;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--wl-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.market-tab:hover[b-qcqsyl733g] {
    color: var(--wl-text-primary);
}

.market-tab.active[b-qcqsyl733g] {
    color: var(--wl-bg-primary);
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
}

.market-search[b-qcqsyl733g] {
    position: relative;
    flex: 1 1 14rem;
    max-width: 22rem;
    min-width: 12rem;
}

.market-search-icon[b-qcqsyl733g] {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.05rem;
    height: 1.05rem;
    color: var(--wl-text-muted);
    pointer-events: none;
}

.market-search-input[b-qcqsyl733g] {
    width: 100%;
    padding: 0.6rem 0.85rem 0.6rem 2.35rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.55rem;
    background: var(--wl-bg-primary);
    color: var(--wl-text-primary);
    font-size: 0.875rem;
}

.market-search-input[b-qcqsyl733g]::placeholder {
    color: var(--wl-text-muted);
}

.market-search-input:focus[b-qcqsyl733g] {
    outline: none;
    border-color: var(--wl-gold);
}

/* Market list */
.market-list[b-qcqsyl733g] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.market-row[b-qcqsyl733g] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--wl-surface-primary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.6rem;
    cursor: pointer;
    transition: border-color 0.25s ease, transform 0.2s ease, background 0.25s ease;
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
}

.market-row:hover[b-qcqsyl733g] {
    border-color: var(--wl-gold-border);
    transform: translateY(-1px);
}

.market-row.selected[b-qcqsyl733g] {
    border-color: var(--wl-gold);
    background: var(--wl-gold-bg);
}

/* Player rows carry a subtle accent so the type is readable at a glance. */
.player-company-row[b-qcqsyl733g] {
    border-left: 3px solid rgba(var(--wl-gold-rgb), 0.55);
}

.player-company-row.is-halted[b-qcqsyl733g] {
    border-left-color: var(--wl-red);
    background: color-mix(in srgb, var(--wl-red) 5%, var(--wl-surface-primary));
}

.market-id[b-qcqsyl733g] {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.market-id-top[b-qcqsyl733g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.market-ticker[b-qcqsyl733g] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.05em;
}

.market-tag[b-qcqsyl733g] {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.4rem;
    border-radius: 0.3rem;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.tag-npc[b-qcqsyl733g] {
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border-color: var(--wl-border-subtle);
}

.tag-player[b-qcqsyl733g] {
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
    border-color: var(--wl-gold-border);
}

.tag-halted[b-qcqsyl733g] {
    color: var(--wl-red);
    background: color-mix(in srgb, var(--wl-red) 10%, transparent);
    border-color: color-mix(in srgb, var(--wl-red) 38%, transparent);
}

.market-name[b-qcqsyl733g] {
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.market-sub[b-qcqsyl733g] {
    font-size: 0.68rem;
    color: var(--wl-text-muted);
    letter-spacing: 0.02em;
}

.market-sub strong[b-qcqsyl733g] {
    color: var(--wl-text-secondary);
    font-variant-numeric: tabular-nums;
}

.market-fair[b-qcqsyl733g] { color: color-mix(in srgb, var(--wl-green) 78%, var(--wl-text-muted)); }
.market-fair strong[b-qcqsyl733g] { color: var(--wl-green); }

.market-sector[b-qcqsyl733g] {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.market-spark[b-qcqsyl733g] {
    width: 120px;
    height: 32px;
}

.market-price[b-qcqsyl733g] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    min-width: 5.5rem;
}

.market-price-value[b-qcqsyl733g] {
    font-weight: 600;
    color: var(--wl-text-primary);
    font-variant-numeric: tabular-nums;
}

.market-change[b-qcqsyl733g] {
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.up[b-qcqsyl733g] { color: var(--wl-green); }
.down[b-qcqsyl733g] { color: var(--wl-red); }

.market-news[b-qcqsyl733g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: -0.15rem 0 0.25rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.78rem;
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-gold-rgb), 0.06);
    border-left: 2px solid var(--wl-gold-border);
    border-radius: 0 0.4rem 0.4rem 0;
}

.news-icon[b-qcqsyl733g] {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--wl-gold);
}

/* Empty market state */
.market-empty[b-qcqsyl733g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--wl-text-muted);
    background: var(--wl-surface-primary);
    border: 1px dashed var(--wl-border-subtle);
    border-radius: 0.6rem;
}

.market-empty svg[b-qcqsyl733g] {
    width: 2.25rem;
    height: 2.25rem;
    color: var(--wl-text-muted);
    opacity: 0.7;
}

.market-empty p[b-qcqsyl733g] {
    margin: 0;
    font-size: 0.9rem;
}

/* Sparkline / chart SVG */
.spark[b-qcqsyl733g] {
    width: 100%;
    height: 100%;
    display: block;
}

.spark-line[b-qcqsyl733g] {
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.spark-up .spark-line[b-qcqsyl733g] { stroke: var(--wl-green); }
.spark-down .spark-line[b-qcqsyl733g] { stroke: var(--wl-red); }

.spark-up .spark-area[b-qcqsyl733g] { fill: rgba(var(--wl-green-rgb), 0.12); }
.spark-down .spark-area[b-qcqsyl733g] { fill: rgba(var(--wl-red-rgb), 0.12); }

/* ---- Trade modal (root overlay, above the fixed top nav) ---- */
.trade-modal-backdrop[b-qcqsyl733g] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    /* The page renders inside main.relative.z-0, so this fixed overlay sits BELOW the fixed
       TopNavBar/MobileNav. Pad so the card stays in the visible gap (never under the bars). */
    padding: 5rem 1.5rem 1.5rem;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(5px);
    animation: gielda-modal-fade-b-qcqsyl733g 0.18s ease;
}

.trade-modal[b-qcqsyl733g] {
    width: min(100%, 460px);
    max-height: calc(100dvh - 7rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 0.85rem;
    border: 1px solid var(--wl-gold-border);
    background: linear-gradient(160deg, rgba(var(--wl-bg-secondary-rgb), 0.98), rgba(var(--wl-bg-tertiary-rgb), 0.96));
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    animation: gielda-modal-rise-b-qcqsyl733g 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.trade-modal-head[b-qcqsyl733g] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.trade-modal-id[b-qcqsyl733g] {
    min-width: 0;
}

.trade-modal-id-top[b-qcqsyl733g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trade-ticker[b-qcqsyl733g] {
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    font-weight: 700;
}

.trade-name[b-qcqsyl733g] {
    margin: 0.2rem 0 0;
    font-size: 1.25rem;
    color: var(--wl-text-primary);
}

.modal-close-button[b-qcqsyl733g] {
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-secondary);
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease;
}

.modal-close-button:hover[b-qcqsyl733g] {
    color: var(--wl-text-primary);
    border-color: var(--wl-gold-border);
}

.modal-close-button svg[b-qcqsyl733g] {
    width: 1.2rem;
    height: 1.2rem;
}

.trade-modal-price[b-qcqsyl733g] {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
}

.trade-modal-price-value[b-qcqsyl733g] {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    font-variant-numeric: tabular-nums;
}

.trade-modal-change[b-qcqsyl733g] {
    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.trade-modal-price.up .trade-modal-change[b-qcqsyl733g] { color: var(--wl-green); }
.trade-modal-price.down .trade-modal-change[b-qcqsyl733g] { color: var(--wl-red); }

.trade-chart[b-qcqsyl733g] {
    width: 100%;
    height: 140px;
    background: var(--wl-surface-primary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    padding: 0.35rem;
}

.trade-meta-grid[b-qcqsyl733g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.trade-meta[b-qcqsyl733g] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    background: var(--wl-surface-primary);
}

.trade-meta span[b-qcqsyl733g] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.trade-meta strong[b-qcqsyl733g] {
    color: var(--wl-text-primary);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.trade-meta strong.warn[b-qcqsyl733g] { color: #f59e0b; }

.trade-halt-alert[b-qcqsyl733g] {
    display: grid;
    gap: 0.2rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid color-mix(in srgb, var(--wl-red) 42%, transparent);
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--wl-red) 8%, var(--wl-surface-primary));
}

.trade-halt-alert strong[b-qcqsyl733g] { color: var(--wl-red); }
.trade-halt-alert span[b-qcqsyl733g] { color: var(--wl-text-secondary); font-size: 0.78rem; line-height: 1.45; }

.trade-activity[b-qcqsyl733g] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    background: color-mix(in srgb, var(--wl-green) 7%, var(--wl-surface-primary));
    color: var(--wl-text-secondary);
    font-size: 0.78rem;
}

.trade-activity strong[b-qcqsyl733g] { color: var(--wl-green); }
.trade-activity.stale[b-qcqsyl733g] { background: color-mix(in srgb, #f59e0b 7%, var(--wl-surface-primary)); }
.trade-activity.stale strong[b-qcqsyl733g] { color: #f59e0b; }

.trade-owned[b-qcqsyl733g] {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
    color: var(--wl-text-secondary);
    padding: 0.55rem 0.75rem;
    background: var(--wl-surface-primary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    font-variant-numeric: tabular-nums;
}

.trade-controls[b-qcqsyl733g] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.trade-label[b-qcqsyl733g] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
}

.trade-input[b-qcqsyl733g] {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: var(--wl-bg-primary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.trade-input:focus[b-qcqsyl733g] {
    outline: none;
    border-color: var(--wl-gold);
}

.trade-estimate[b-qcqsyl733g] {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: var(--wl-text-secondary);
}

.trade-estimate-value[b-qcqsyl733g] {
    font-weight: 600;
    color: var(--wl-text-primary);
    font-variant-numeric: tabular-nums;
}

.trade-estimate-muted[b-qcqsyl733g] {
    color: var(--wl-text-muted);
    font-size: 0.78rem;
}

.trade-note[b-qcqsyl733g] {
    margin: 0.15rem 0 0;
    font-size: 0.74rem;
    line-height: 1.4;
    color: var(--wl-text-muted);
}

.trade-actions[b-qcqsyl733g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.trade-btn[b-qcqsyl733g] {
    padding: 0.7rem 1rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.15s ease, filter 0.2s ease, opacity 0.2s ease;
}

.trade-btn:disabled[b-qcqsyl733g] {
    opacity: 0.45;
    cursor: not-allowed;
}

.trade-btn:not(:disabled):hover[b-qcqsyl733g] {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

.trade-btn.buy[b-qcqsyl733g] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
}

.trade-btn.sell[b-qcqsyl733g] {
    background: transparent;
    border-color: var(--wl-border-medium);
    color: var(--wl-text-primary);
}

.trade-btn.sell:not(:disabled):hover[b-qcqsyl733g] {
    border-color: var(--wl-red);
    color: var(--wl-red);
}

.trade-company-link[b-qcqsyl733g] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wl-gold);
    text-decoration: none;
}

.trade-company-link:hover[b-qcqsyl733g] {
    text-decoration: underline;
}

.trade-company-link svg[b-qcqsyl733g] {
    width: 0.95rem;
    height: 0.95rem;
}

@keyframes gielda-modal-fade-b-qcqsyl733g {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes gielda-modal-rise-b-qcqsyl733g {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Portfolio / history */
.gielda-portfolio[b-qcqsyl733g],
.gielda-history[b-qcqsyl733g] {
    margin-bottom: 2.5rem;
}

.portfolio-summary[b-qcqsyl733g] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
    .portfolio-summary[b-qcqsyl733g] {
        grid-template-columns: 1fr;
    }
}

.summary-item[b-qcqsyl733g] {
    background: var(--wl-surface-primary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.6rem;
    padding: 0.9rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-label[b-qcqsyl733g] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
}

.summary-value[b-qcqsyl733g] {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    font-variant-numeric: tabular-nums;
}

.portfolio-table[b-qcqsyl733g] {
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.6rem;
    overflow: hidden;
}

.portfolio-head[b-qcqsyl733g],
.portfolio-row[b-qcqsyl733g] {
    display: grid;
    grid-template-columns: 2fr 0.8fr 1fr 1.2fr 1.5fr;
    gap: 0.75rem;
    align-items: center;
    padding: 0.75rem 1rem;
}

.portfolio-head[b-qcqsyl733g] {
    background: var(--wl-surface-primary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--wl-text-muted);
}

.portfolio-row[b-qcqsyl733g] {
    border-top: 1px solid var(--wl-border-subtle);
    cursor: pointer;
    transition: background 0.2s ease;
    font-variant-numeric: tabular-nums;
    color: var(--wl-text-primary);
    font-size: 0.875rem;
    width: 100%;
    background: transparent;
    font-family: inherit;
    text-align: left;
}

.portfolio-row:hover[b-qcqsyl733g] {
    background: var(--wl-gold-bg);
}

.num[b-qcqsyl733g] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.portfolio-company[b-qcqsyl733g] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.portfolio-ticker[b-qcqsyl733g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--wl-text-primary);
}

.portfolio-cname[b-qcqsyl733g] {
    font-size: 0.72rem;
    color: var(--wl-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pl-pct[b-qcqsyl733g] {
    font-size: 0.72rem;
    opacity: 0.85;
}

.portfolio-empty[b-qcqsyl733g] {
    color: var(--wl-text-muted);
    padding: 1.5rem;
    text-align: center;
    background: var(--wl-surface-primary);
    border: 1px dashed var(--wl-border-subtle);
    border-radius: 0.6rem;
}

/* Transactions */
.tx-list[b-qcqsyl733g] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.6rem;
    overflow: hidden;
}

.tx-row[b-qcqsyl733g] {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 0.7rem 1rem;
    font-size: 0.83rem;
    color: var(--wl-text-secondary);
    border-top: 1px solid var(--wl-border-subtle);
}

.tx-row:first-child[b-qcqsyl733g] {
    border-top: none;
}

.tx-type[b-qcqsyl733g] {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem;
    border-radius: 0.35rem;
}

.tx-type.buy[b-qcqsyl733g] {
    color: var(--wl-green);
    background: rgba(var(--wl-green-rgb), 0.12);
}

.tx-type.sell[b-qcqsyl733g] {
    color: var(--wl-red);
    background: rgba(var(--wl-red-rgb), 0.12);
}

.tx-company[b-qcqsyl733g] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    letter-spacing: 0.04em;
}

.tx-total[b-qcqsyl733g] {
    font-weight: 600;
    color: var(--wl-text-primary);
}

.tx-date[b-qcqsyl733g] {
    font-size: 0.72rem;
    color: var(--wl-text-muted);
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 700px) {
    .tx-row[b-qcqsyl733g] {
        grid-template-columns: auto 1fr auto;
        row-gap: 0.3rem;
    }
    .tx-shares[b-qcqsyl733g],
    .tx-date[b-qcqsyl733g] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 560px) {
    .gielda-title[b-qcqsyl733g] {
        font-size: 2rem;
    }
    .gielda-header[b-qcqsyl733g] {
        align-items: flex-start;
    }
    .gielda-stats[b-qcqsyl733g] {
        width: 100%;
    }
    .gielda-stat[b-qcqsyl733g] {
        flex: 1 1 auto;
    }
    .market-toolbar[b-qcqsyl733g] {
        flex-direction: column;
        align-items: stretch;
    }
    .market-search[b-qcqsyl733g] {
        max-width: none;
    }
    .market-tabs[b-qcqsyl733g] {
        justify-content: space-between;
    }
    .market-tab[b-qcqsyl733g] {
        flex: 1;
        text-align: center;
    }
    .market-row[b-qcqsyl733g] {
        grid-template-columns: 1fr auto;
        gap: 0.5rem 0.75rem;
    }
    .market-spark[b-qcqsyl733g] {
        grid-column: 1 / -1;
        order: 3;
        width: 100%;
        height: 30px;
    }
    .portfolio-head[b-qcqsyl733g] {
        display: none;
    }
    .portfolio-row[b-qcqsyl733g] {
        grid-template-columns: 1fr auto;
        row-gap: 0.2rem;
    }
    .portfolio-company[b-qcqsyl733g] {
        grid-column: 1 / -1;
    }
    .portfolio-row > .num[b-qcqsyl733g] {
        min-width: 0;
        text-align: left;
    }
    .portfolio-row > .num[b-qcqsyl733g]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.1rem;
        color: var(--wl-text-muted);
        font-size: 0.62rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        line-height: 1.2;
        text-transform: uppercase;
    }
    /* Bottom-sheet on mobile, lifted above the fixed MobileNav so Buy/Sell stay tappable. */
    .trade-modal-backdrop[b-qcqsyl733g] {
        place-items: end center;
        padding: 4rem 0.6rem calc(5.25rem + env(safe-area-inset-bottom, 0px));
    }
    .trade-modal[b-qcqsyl733g] {
        width: 100%;
        max-height: calc(100dvh - 9.5rem);
    }
}

/* Animations */
.animate-fade-in[b-qcqsyl733g] {
    animation: gielda-fade-in-b-qcqsyl733g 0.5s ease both;
}

.delay-50[b-qcqsyl733g] { animation-delay: 0.05s; }
.delay-100[b-qcqsyl733g] { animation-delay: 0.1s; }

@keyframes gielda-fade-in-b-qcqsyl733g {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .animate-fade-in[b-qcqsyl733g],
    .trade-modal-backdrop[b-qcqsyl733g],
    .trade-modal[b-qcqsyl733g] {
        animation: none;
    }
}
/* /Components/Pages/Venues/ChatPanel.razor.rz.scp.css */
/* ============================================
   CHAT PANEL - Premium Messaging Experience
   ============================================ */

.chat-panel[b-cxb7gb7tzv] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background:
        linear-gradient(180deg, rgba(var(--wl-bg-secondary-rgb), 0.3) 0%, var(--wl-bg-primary) 15%);
}

/* Messages Area */
.messages-container[b-cxb7gb7tzv] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 20px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    scroll-behavior: smooth;
}

/* Custom scrollbar */
.messages-container[b-cxb7gb7tzv]::-webkit-scrollbar {
    width: 4px;
}

.messages-container[b-cxb7gb7tzv]::-webkit-scrollbar-track {
    background: transparent;
}

.messages-container[b-cxb7gb7tzv]::-webkit-scrollbar-thumb {
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 4px;
}

.messages-container[b-cxb7gb7tzv]::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--wl-contrast-rgb), 0.2);
}

.empty-chat[b-cxb7gb7tzv] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
}

/* Message animation */
.message[b-cxb7gb7tzv] {
    animation: msgSlideIn 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

@@keyframes msgSlideIn {
    from[b-cxb7gb7tzv] {
        opacity: 0;
        transform: translateY(6px);
    }
    to[b-cxb7gb7tzv] {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Text Messages ---- */
.text-message[b-cxb7gb7tzv] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    transition: background 0.15s ease;
    position: relative;
}

.text-message:hover[b-cxb7gb7tzv] {
    background: rgba(var(--wl-contrast-rgb), 0.025);
}

/* Own message highlight */
.message-own .text-message[b-cxb7gb7tzv] {
    background: rgba(var(--wl-gold-rgb), 0.04);
}

.message-own .text-message:hover[b-cxb7gb7tzv] {
    background: rgba(var(--wl-gold-rgb), 0.06);
}

/* Avatar */
.message-avatar[b-cxb7gb7tzv] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.message-avatar img[b-cxb7gb7tzv] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder[b-cxb7gb7tzv] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(var(--wl-gold-rgb), 0.2) 0%, rgba(var(--wl-gold-rgb), 0.08) 100%);
    color: var(--wl-gold);
    font-weight: 700;
    font-size: 14px;
}

/* Message body */
.message-body[b-cxb7gb7tzv] {
    flex: 1;
    min-width: 0;
}

.message-nickname[b-cxb7gb7tzv] {
    display: inline;
    font-size: 13px;
    font-weight: 700;
    color: var(--wl-gold);
    margin-right: 8px;
    letter-spacing: 0.2px;
}

.message-own .message-nickname[b-cxb7gb7tzv] {
    color: var(--wl-gold-light);
}

.message-text[b-cxb7gb7tzv] {
    display: inline;
    font-size: 14px;
    color: var(--wl-text-primary);
    line-height: 1.55;
    word-break: break-word;
}

.message-time[b-cxb7gb7tzv] {
    font-size: 10px;
    color: var(--wl-text-muted);
    flex-shrink: 0;
    margin-top: 3px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.text-message:hover .message-time[b-cxb7gb7tzv] {
    opacity: 1;
}

/* ---- System Messages ---- */
.system-message[b-cxb7gb7tzv] {
    text-align: center;
    padding: 4px 16px;
    margin: 4px 0;
}

.system-message span[b-cxb7gb7tzv] {
    font-size: 11px;
    color: var(--wl-text-muted);
    font-style: italic;
    opacity: 0.7;
}

/* ---- Order Messages ---- */
.order-message[b-cxb7gb7tzv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    margin: 4px 40px 4px 48px;
    background: rgba(var(--wl-gold-rgb), 0.06);
    border-left: 2px solid rgba(var(--wl-gold-rgb), 0.4);
    border-radius: 0 10px 10px 0;
    font-size: 13px;
    color: var(--wl-gold);
}

.order-icon[b-cxb7gb7tzv] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--wl-gold);
    opacity: 0.7;
}

/* ---- Quiz Messages ---- */
.quiz-message[b-cxb7gb7tzv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 8px 0;
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.1) 0%, rgba(var(--wl-purple-rgb), 0.04) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.15);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #c4b5fd;
    position: relative;
    overflow: hidden;
}

/* Subtle shimmer on quiz */
.quiz-message[b-cxb7gb7tzv]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(var(--wl-purple-rgb), 0.08) 50%, transparent 60%);
    animation: quizShimmer 3s ease-in-out infinite;
}

@@keyframes quizShimmer {
    0%[b-cxb7gb7tzv], 100%[b-cxb7gb7tzv] { transform: translateX(-100%); }
    50%[b-cxb7gb7tzv] { transform: translateX(100%); }
}

.quiz-icon[b-cxb7gb7tzv] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--wl-purple);
    position: relative;
    z-index: 1;
}

.quiz-message span:last-child[b-cxb7gb7tzv] {
    position: relative;
    z-index: 1;
}

/* ---- Quiz Result Messages (rich) ---- */
.quiz-result-message[b-cxb7gb7tzv] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 16px;
    margin: 8px 0;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.08) 0%, rgba(var(--wl-gold-rgb), 0.02) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.18);
    border-radius: 12px;
    font-size: 13px;
}

.qr-header[b-cxb7gb7tzv] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--wl-gold);
}

.qr-title[b-cxb7gb7tzv] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
}

.qr-question[b-cxb7gb7tzv] {
    font-size: 13px;
    font-weight: 600;
    color: var(--wl-text-primary);
    line-height: 1.4;
}

.qr-answer[b-cxb7gb7tzv] {
    font-size: 12px;
    color: #14532d;
    font-weight: 600;
    padding: 4px 0;
}

.qr-answer-label[b-cxb7gb7tzv] {
    font-weight: 700;
    margin-right: 4px;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
    opacity: 0.7;
}

.qr-stats[b-cxb7gb7tzv] {
    font-size: 11px;
    color: var(--wl-text-muted);
}

.qr-payouts[b-cxb7gb7tzv] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 4px 0;
}

.qr-payout[b-cxb7gb7tzv] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--wl-text-secondary);
}

.qr-payout-place[b-cxb7gb7tzv] {
    font-weight: 700;
    color: var(--wl-text-muted);
    font-size: 11px;
}

.qr-payout-reward[b-cxb7gb7tzv] {
    font-weight: 700;
    font-size: 11px;
}

.qr-payout-reward.reward-diamonds[b-cxb7gb7tzv] {
    color: var(--wl-purple);
}

.qr-payout-reward.reward-credits[b-cxb7gb7tzv] {
    color: var(--wl-gold);
}

/* ============================================
   Chat Input - Refined
   ============================================ */
.chat-input-area[b-cxb7gb7tzv] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 16px;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    background: rgba(var(--wl-bg-secondary-rgb), 0.4);
    backdrop-filter: blur(12px);
}

.chat-input[b-cxb7gb7tzv] {
    flex: 1;
    padding: 11px 18px;
    border-radius: 12px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.25s ease;
}

.chat-input[b-cxb7gb7tzv]::placeholder {
    color: var(--wl-text-muted);
    font-size: 13px;
}

.chat-input:focus[b-cxb7gb7tzv] {
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    background: rgba(var(--wl-contrast-rgb), 0.06);
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.06);
}

.send-button[b-cxb7gb7tzv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: #0D0D0D;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
    flex-shrink: 0;
}

.send-button:hover:not(:disabled)[b-cxb7gb7tzv] {
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(var(--wl-gold-rgb), 0.3);
}

.send-button:active:not(:disabled)[b-cxb7gb7tzv] {
    transform: scale(0.95);
}

.send-button:disabled[b-cxb7gb7tzv] {
    opacity: 0.3;
    cursor: not-allowed;
    background: rgba(var(--wl-contrast-rgb), 0.1);
    color: var(--wl-text-muted);
}

/* ---- Emoji Button ---- */
.emoji-btn-wrapper[b-cxb7gb7tzv] {
    position: relative;
    flex-shrink: 0;
}

.emoji-btn[b-cxb7gb7tzv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.emoji-btn img[b-cxb7gb7tzv] {
    width: 22px;
    height: 22px;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.emoji-btn:hover img[b-cxb7gb7tzv] {
    opacity: 0.8;
}

.emoji-btn--active[b-cxb7gb7tzv] {
    background: rgba(var(--wl-gold-rgb), 0.08);
    border-color: rgba(var(--wl-gold-rgb), 0.15);
}

.emoji-btn--active img[b-cxb7gb7tzv] {
    opacity: 1;
}

.emoji-btn:disabled[b-cxb7gb7tzv] {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Inline emoji in messages */
.message-text[b-cxb7gb7tzv]  .inline-emoji,
.order-message[b-cxb7gb7tzv]  .inline-emoji {
    height: 1.25em;
    width: 1.25em;
    vertical-align: -0.25em;
    margin: 0 2px;
    display: inline;
}
/* /Components/Pages/Venues/Index.razor.rz.scp.css */
/* ============================================
   VENUE LIST - Luxury Nightlife Lounge
   ============================================ */

.venues-page[b-yc9vlq8fuh] {
    background:
        radial-gradient(ellipse 120% 60% at 20% -10%, rgba(var(--wl-gold-rgb), 0.07) 0%, transparent 60%),
        radial-gradient(ellipse 100% 50% at 80% 110%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
        var(--wl-bg-primary);
    min-height: 100vh;
    position: relative;
}

/* Subtle grain overlay */
.venues-page[b-yc9vlq8fuh]::before {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}

.page-header[b-yc9vlq8fuh] {
    text-align: center;
    position: relative;
    z-index: 1;
}

.page-header h1[b-yc9vlq8fuh] {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 6px;
    background: linear-gradient(135deg, var(--wl-gold-light) 0%, var(--wl-gold) 40%, var(--wl-gold-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-subtitle[b-yc9vlq8fuh] {
    font-size: 13px;
    color: var(--wl-text-muted);
    letter-spacing: 0.5px;
}

/* Grid */
.venues-grid[b-yc9vlq8fuh] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    position: relative;
    z-index: 1;
}

@@media (min-width: 640px) {
    .venues-grid[b-yc9vlq8fuh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Card ---- */
.venue-card[b-yc9vlq8fuh] {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    animation: cardReveal 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
    cursor: pointer;
}

.venue-card:nth-child(2)[b-yc9vlq8fuh] {
    animation-delay: 150ms;
}

@@keyframes cardReveal {
    from[b-yc9vlq8fuh] {
        opacity: 0;
        transform: translateY(40px) scale(0.92);
    }
    to[b-yc9vlq8fuh] {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.venue-card:hover[b-yc9vlq8fuh] {
    transform: translateY(-8px) scale(1.015);
}

/* Glass background layer */
.venue-card-bg[b-yc9vlq8fuh] {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 24px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
    transition: border-color 0.4s ease;
}

.venue-card-bar .venue-card-bg[b-yc9vlq8fuh] {
    background:
        linear-gradient(160deg, rgba(var(--wl-gold-rgb), 0.08) 0%, rgba(var(--wl-bg-tertiary-rgb), 0.95) 40%, rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.12);
}

.venue-card-pub .venue-card-bg[b-yc9vlq8fuh] {
    background:
        linear-gradient(160deg, rgba(var(--wl-purple-rgb), 0.08) 0%, rgba(var(--wl-bg-tertiary-rgb), 0.95) 40%, rgba(var(--wl-bg-secondary-rgb), 0.98) 100%);
    border-color: rgba(var(--wl-purple-rgb), 0.12);
}

.venue-card:hover .venue-card-bg[b-yc9vlq8fuh] {
    border-color: rgba(var(--wl-gold-rgb), 0.25);
}

.venue-card-pub:hover .venue-card-bg[b-yc9vlq8fuh] {
    border-color: rgba(var(--wl-purple-rgb), 0.25);
}

/* Ambient glow */
.venue-card-glow[b-yc9vlq8fuh] {
    position: absolute;
    inset: -80%;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: 0;
}

.venue-card-bar .venue-card-glow[b-yc9vlq8fuh] {
    background: radial-gradient(circle at 50% 30%, rgba(var(--wl-gold-rgb), 0.12) 0%, transparent 60%);
}

.venue-card-pub .venue-card-glow[b-yc9vlq8fuh] {
    background: radial-gradient(circle at 50% 30%, rgba(var(--wl-purple-rgb), 0.12) 0%, transparent 60%);
}

.venue-card:hover .venue-card-glow[b-yc9vlq8fuh] {
    opacity: 1;
}

/* Hover shadow */
.venue-card-bar:hover[b-yc9vlq8fuh] {
    box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.5),
        0 0 50px -10px rgba(var(--wl-gold-rgb), 0.15);
}

.venue-card-pub:hover[b-yc9vlq8fuh] {
    box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.5),
        0 0 50px -10px rgba(var(--wl-purple-rgb), 0.15);
}

/* Card content */
.venue-card-content[b-yc9vlq8fuh] {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 36px 28px 32px;
}

/* Type badge */
.venue-type-badge[b-yc9vlq8fuh] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.badge-bar[b-yc9vlq8fuh] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold-light);
}

.badge-pub[b-yc9vlq8fuh] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.25);
    color: var(--wl-purple);
}

/* Icon */
.venue-icon[b-yc9vlq8fuh] {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 24px;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
}

/* Pulsing ring around icon */
.venue-icon[b-yc9vlq8fuh]::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: border-color 0.4s ease, transform 0.4s ease;
}

.venue-card:hover .venue-icon[b-yc9vlq8fuh] {
    transform: scale(1.08);
}

.venue-card:hover .venue-icon[b-yc9vlq8fuh]::before {
    transform: scale(1.05);
}

.venue-card-bar .venue-icon[b-yc9vlq8fuh] {
    background: linear-gradient(145deg, rgba(var(--wl-gold-rgb), 0.18) 0%, rgba(var(--wl-gold-rgb), 0.06) 100%);
    color: var(--wl-gold);
    box-shadow: 0 0 30px rgba(var(--wl-gold-rgb), 0.1);
}

.venue-card-bar:hover .venue-icon[b-yc9vlq8fuh]::before {
    border-color: rgba(var(--wl-gold-rgb), 0.2);
}

.venue-card-pub .venue-icon[b-yc9vlq8fuh] {
    background: linear-gradient(145deg, rgba(var(--wl-purple-rgb), 0.18) 0%, rgba(var(--wl-purple-rgb), 0.06) 100%);
    color: var(--wl-purple);
    box-shadow: 0 0 30px rgba(var(--wl-purple-rgb), 0.1);
}

.venue-card-pub:hover .venue-icon[b-yc9vlq8fuh]::before {
    border-color: rgba(var(--wl-purple-rgb), 0.2);
}

/* Name */
.venue-name[b-yc9vlq8fuh] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 30px;
    letter-spacing: 2px;
    color: var(--wl-text-primary);
    margin-bottom: 8px;
    line-height: 1.1;
}

/* Description */
.venue-description[b-yc9vlq8fuh] {
    font-size: 13px;
    color: var(--wl-text-secondary);
    line-height: 1.7;
    margin-bottom: 28px;
    max-width: 260px;
    opacity: 0.8;
}

/* Features pill row */
.venue-features[b-yc9vlq8fuh] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.feature-pill[b-yc9vlq8fuh] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    color: var(--wl-text-muted);
}

.feature-pill svg[b-yc9vlq8fuh] {
    width: 12px;
    height: 12px;
    opacity: 0.7;
}

/* Enter button */
.enter-button[b-yc9vlq8fuh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 36px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
    border: none;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Shimmer on hover */
.enter-button[b-yc9vlq8fuh]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.venue-card:hover .enter-button[b-yc9vlq8fuh]::after {
    transform: translateX(100%);
}

.venue-card-bar .enter-button[b-yc9vlq8fuh] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: #0D0D0D;
}

.venue-card-bar .enter-button:hover[b-yc9vlq8fuh] {
    box-shadow: 0 10px 30px rgba(var(--wl-gold-rgb), 0.35);
    transform: scale(1.02);
}

.venue-card-pub .enter-button[b-yc9vlq8fuh] {
    background: linear-gradient(135deg, var(--wl-purple) 0%, #6D28D9 100%);
    color: #fff;
}

.venue-card-pub .enter-button:hover[b-yc9vlq8fuh] {
    box-shadow: 0 10px 30px rgba(var(--wl-purple-rgb), 0.35);
    transform: scale(1.02);
}

.enter-button svg[b-yc9vlq8fuh] {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.venue-card:hover .enter-button svg[b-yc9vlq8fuh] {
    transform: translateX(3px);
}
/* /Components/Pages/Venues/MenuPanel.razor.rz.scp.css */
/* ============================================
   MENU PANEL - Venue Ordering
   ============================================ */

.menu-panel[b-hypzf7b947] {
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;
    overflow-y: auto;
}

.menu-title[b-hypzf7b947] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--wl-text-primary);
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.menu-order-warning[b-hypzf7b947] {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.24);
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.menu-category[b-hypzf7b947] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.category-header[b-hypzf7b947] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--wl-text-muted);
    padding-bottom: 4px;
}

.category-icon[b-hypzf7b947] {
    display: flex;
    align-items: center;
    color: var(--wl-gold);
    opacity: 0.6;
}

.menu-items[b-hypzf7b947] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* ---- Menu Item ---- */
.menu-item[b-hypzf7b947] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    transition: all 0.2s ease;
}

.menu-item:hover[b-hypzf7b947] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border-color: rgba(var(--wl-contrast-rgb), 0.05);
}

.item-ordered[b-hypzf7b947] {
    border-color: rgba(var(--wl-green-rgb), 0.15) !important;
    background: rgba(var(--wl-green-rgb), 0.04) !important;
}

.item-info[b-hypzf7b947] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.item-name[b-hypzf7b947] {
    font-size: 13px;
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-desc[b-hypzf7b947] {
    font-size: 11px;
    color: var(--wl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.7;
}

.item-action[b-hypzf7b947] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.item-price[b-hypzf7b947] {
    font-size: 13px;
    font-weight: 700;
    color: var(--wl-gold);
    white-space: nowrap;
}

.price-currency[b-hypzf7b947] {
    font-size: 10px;
    font-weight: 500;
    color: var(--wl-text-muted);
    margin-left: 2px;
}

/* Order button */
.order-btn[b-hypzf7b947] {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-gold);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-btn:hover:not(:disabled)[b-hypzf7b947] {
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: #0D0D0D;
    border-color: transparent;
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(var(--wl-gold-rgb), 0.2);
}

.order-btn:disabled[b-hypzf7b947] {
    opacity: 0.4;
    cursor: not-allowed;
}

.order-success[b-hypzf7b947] {
    background: rgba(var(--wl-green-rgb), 0.12) !important;
    border-color: rgba(var(--wl-green-rgb), 0.25) !important;
    color: var(--wl-green) !important;
}

.order-spinner[b-hypzf7b947] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.2);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@@keyframes spin {
    to[b-hypzf7b947] { transform: rotate(360deg); }
}
/* /Components/Pages/Venues/PresencePanel.razor.rz.scp.css */
/* ============================================
   PRESENCE PANEL - Who's Here
   ============================================ */

.presence-panel[b-irw53od4he] {
    padding: 16px 14px;
}

.presence-header[b-irw53od4he] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    margin-bottom: 10px;
}

.presence-count[b-irw53od4he] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 8px;
    background: rgba(var(--wl-green-rgb), 0.12);
    color: var(--wl-green);
    font-size: 12px;
    font-weight: 700;
}

.presence-label[b-irw53od4he] {
    font-size: 11px;
    font-weight: 700;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.presence-list[b-irw53od4he] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.presence-empty[b-irw53od4he] {
    padding: 28px 0;
    text-align: center;
    font-size: 12px;
    color: var(--wl-text-muted);
    opacity: 0.6;
}

/* ---- User Row ---- */
.presence-item[b-irw53od4he] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    transition: background 0.15s ease;
}

.presence-item:hover[b-irw53od4he] {
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.presence-you[b-irw53od4he] {
    background: rgba(var(--wl-gold-rgb), 0.04);
}

.presence-you:hover[b-irw53od4he] {
    background: rgba(var(--wl-gold-rgb), 0.06);
}

/* Avatar */
.presence-avatar[b-irw53od4he] {
    position: relative;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.avatar-img[b-irw53od4he] {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.avatar-letter[b-irw53od4he] {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, rgba(var(--wl-gold-rgb), 0.18) 0%, rgba(var(--wl-gold-rgb), 0.08) 100%);
    color: var(--wl-gold);
    font-weight: 700;
    font-size: 13px;
}

.presence-dot[b-irw53od4he] {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--wl-green);
    border: 2px solid var(--wl-bg-primary);
}

/* Nickname */
.presence-nickname[b-irw53od4he] {
    font-size: 13px;
    color: var(--wl-text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.you-tag[b-irw53od4he] {
    font-size: 10px;
    color: var(--wl-text-muted);
    font-weight: 400;
    margin-left: 4px;
    opacity: 0.7;
}
/* /Components/Pages/Venues/QuizPanel.razor.rz.scp.css */
/* ============================================
   QUIZ CARD - Inline Chat Widget
   ============================================ */

.quiz-card[b-47mownr10m] {
    margin: 8px 12px 4px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(145deg,
        rgba(99, 102, 241, 0.08) 0%,
        rgba(99, 102, 241, 0.03) 100%);
    border: 1px solid rgba(99, 102, 241, 0.18);
    animation: quizCardIn 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.quiz-card--answered[b-47mownr10m] {
    border-color: rgba(34, 197, 94, 0.2);
    background: linear-gradient(145deg,
        rgba(34, 197, 94, 0.06) 0%,
        rgba(34, 197, 94, 0.02) 100%);
}

.quiz-card--results[b-47mownr10m] {
    border-color: rgba(var(--wl-gold-rgb), 0.2);
    background: linear-gradient(145deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        rgba(var(--wl-gold-rgb), 0.02) 100%);
}

@@keyframes quizCardIn {
    from[b-47mownr10m] {
        opacity: 0;
        transform: translateY(10px);
    }
    to[b-47mownr10m] {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Header ---- */
.qc-header[b-47mownr10m] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.qc-header--results[b-47mownr10m] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--wl-gold);
    margin-bottom: 12px;
}

.qc-header-left[b-47mownr10m] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #a5b4fc;
}

.qc-title[b-47mownr10m] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    letter-spacing: 1.5px;
    color: inherit;
}

/* Timer badge */
.qc-timer[b-47mownr10m] {
    display: flex;
    align-items: baseline;
    gap: 1px;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.qc-timer-value[b-47mownr10m] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    color: #a5b4fc;
    line-height: 1;
}

.qc-timer-unit[b-47mownr10m] {
    font-size: 11px;
    color: rgba(165, 180, 252, 0.6);
}

.qc-timer--critical[b-47mownr10m] {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.25);
    animation: timerPulse 0.5s ease-in-out infinite;
}

.qc-timer--critical .qc-timer-value[b-47mownr10m] {
    color: #fca5a5;
}

@@keyframes timerPulse {
    0%[b-47mownr10m], 100%[b-47mownr10m] { transform: scale(1); }
    50%[b-47mownr10m] { transform: scale(1.05); }
}

/* Progress bar */
.qc-bar[b-47mownr10m] {
    width: 100%;
    height: 3px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 12px;
}

.qc-bar-fill[b-47mownr10m] {
    height: 100%;
    background: linear-gradient(90deg, #818cf8 0%, #6366f1 100%);
    border-radius: 2px;
    transition: width 1s linear;
}

/* Question */
.qc-question[b-47mownr10m] {
    font-size: 15px;
    font-weight: 600;
    color: var(--wl-text-primary);
    line-height: 1.4;
    text-align: center;
    padding: 4px 0 10px;
}

/* ---- Reward Tiers ---- */
.qc-rewards[b-47mownr10m] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
}

.qc-rewards svg[b-47mownr10m] {
    flex-shrink: 0;
    opacity: 0.6;
}

.qc-reward-tier[b-47mownr10m] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.qc-reward-tier + .qc-reward-tier[b-47mownr10m]::before {
    content: '·';
    margin-right: 2px;
    color: var(--wl-text-muted);
    opacity: 0.4;
}

.qc-reward-place[b-47mownr10m] {
    font-weight: 700;
    color: var(--wl-text-secondary);
}

.qc-reward-amount[b-47mownr10m] {
    font-weight: 600;
}

.reward-diamonds[b-47mownr10m] {
    color: var(--wl-purple);
}

.reward-credits[b-47mownr10m] {
    color: var(--wl-gold);
}

/* ---- Answer Buttons ---- */
.qc-answers[b-47mownr10m] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.qc-answer[b-47mownr10m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    background: rgba(var(--wl-contrast-rgb), 0.03);
    color: var(--wl-text-primary);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qc-answer:hover:not(:disabled)[b-47mownr10m] {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.2);
    transform: translateX(3px);
}

.qc-answer--selected[b-47mownr10m] {
    background: rgba(99, 102, 241, 0.15) !important;
    border-color: rgba(99, 102, 241, 0.35) !important;
}

.qc-answer--disabled[b-47mownr10m] {
    opacity: 0.55;
    cursor: not-allowed;
}

.qc-answer--disabled:hover[b-47mownr10m] {
    transform: none !important;
}

.qc-answer-letter[b-47mownr10m] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.12);
    color: #818cf8;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}

.qc-answer--selected .qc-answer-letter[b-47mownr10m] {
    background: rgba(99, 102, 241, 0.35);
    color: #fff;
}

/* Status bar */
.qc-status[b-47mownr10m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    margin-top: 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
}

.qc-status--ok[b-47mownr10m] {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.15);
    color: #14532d;
}

.qc-status--error[b-47mownr10m] {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

/* ---- Results ---- */
.qc-podium[b-47mownr10m] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
}

.qc-podium-row[b-47mownr10m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.qc-podium-row.place-1[b-47mownr10m] {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.12) 0%, rgba(var(--wl-gold-rgb), 0.04) 100%);
}

.qc-podium-row.place-2[b-47mownr10m] {
    background: linear-gradient(135deg, rgba(192, 192, 192, 0.08) 0%, rgba(192, 192, 192, 0.02) 100%);
}

.qc-podium-row.place-3[b-47mownr10m] {
    background: linear-gradient(135deg, rgba(205, 127, 50, 0.08) 0%, rgba(205, 127, 50, 0.02) 100%);
}

.qc-place[b-47mownr10m] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 16px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.place-1 .qc-place[b-47mownr10m] { color: var(--wl-gold); }
.place-2 .qc-place[b-47mownr10m] { color: #c0c0c0; }
.place-3 .qc-place[b-47mownr10m] { color: #cd7f32; }

.qc-player[b-47mownr10m] {
    font-size: 13px;
    font-weight: 600;
    color: var(--wl-text-primary);
}

.qc-player--you[b-47mownr10m] {
    color: var(--wl-gold);
}

.qc-you-tag[b-47mownr10m] {
    font-size: 10px;
    font-weight: 400;
    color: var(--wl-text-muted);
    margin-left: 4px;
}

.qc-personal[b-47mownr10m] {
    font-size: 12px;
    color: var(--wl-text-secondary);
    text-align: center;
    padding: 4px 0;
}

.qc-personal--missed[b-47mownr10m] {
    color: var(--wl-text-muted);
    opacity: 0.7;
}

/* ---- Correct Answer Highlight ---- */
.qc-correct-answer[b-47mownr10m] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 8px;
    background: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.12);
}

.qc-correct-label[b-47mownr10m] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #14532d;
    flex-shrink: 0;
}

.qc-correct-text[b-47mownr10m] {
    font-size: 13px;
    font-weight: 600;
    color: var(--wl-text-primary);
}

/* ---- Stats Bar ---- */
.qc-stats[b-47mownr10m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 0;
    margin-bottom: 8px;
    font-size: 12px;
    color: var(--wl-text-muted);
}

.qc-stat-sep[b-47mownr10m] {
    opacity: 0.4;
}

/* ---- Payouts ---- */
.qc-payouts[b-47mownr10m] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}

.qc-payout-row[b-47mownr10m] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.qc-payout--you[b-47mownr10m] {
    background: rgba(var(--wl-gold-rgb), 0.06);
}

.qc-payout-place[b-47mownr10m] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    width: 28px;
    flex-shrink: 0;
    color: var(--wl-text-muted);
}

.qc-payout-name[b-47mownr10m] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--wl-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qc-payout-amount[b-47mownr10m] {
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.qc-correct[b-47mownr10m] {
    font-size: 12px;
    color: var(--wl-text-muted);
    text-align: center;
    padding: 2px 0;
    font-style: italic;
}
/* /Components/Pages/Venues/Venue.razor.rz.scp.css */
/* ============================================
   VENUE PAGE - Immersive Chat Layout
   ============================================ */

/* Cancel parent p-6 side/bottom padding for edge-to-edge layout.
   Main: <main class="p-6 pt-[4.5rem] pb-24 xl:pb-6">
   top padding = 4.5rem (navbar clearance), sides = 1.5rem, bottom = 6rem mobile / 1.5rem xl
   We cancel sides (-1.5rem L/R) and reduce top/bottom to fill the space. */
.venue-page[b-s1sy404yiw] {
    background: var(--wl-bg-primary);
    display: flex;
    flex-direction: column;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;
    /* Viewport minus navbar(4.5rem) minus full-top-padding(4.5rem) minus sides-padding-bottom(1.5rem) */
    height: calc(100vh - 4.5rem - 1.5rem);
    overflow: hidden;
}

.venue-loading[b-s1sy404yiw] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
}

/* ---- Header ---- */
.venue-header[b-s1sy404yiw] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 24px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.6);
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    backdrop-filter: blur(16px);
    flex-shrink: 0;
}

.back-button[b-s1sy404yiw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.back-button:hover[b-s1sy404yiw] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: var(--wl-text-primary);
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
}

.header-info[b-s1sy404yiw] {
    flex: 1;
    min-width: 0;
}

.header-title[b-s1sy404yiw] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    letter-spacing: 1.5px;
    color: var(--wl-text-primary);
    line-height: 1.2;
}

.header-desc[b-s1sy404yiw] {
    font-size: 11px;
    color: var(--wl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.venue-badge[b-s1sy404yiw] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 4px 12px;
    border-radius: 20px;
    flex-shrink: 0;
}

.badge-bar[b-s1sy404yiw] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    color: var(--wl-gold);
}

.badge-pub[b-s1sy404yiw] {
    background: rgba(var(--wl-purple-rgb), 0.12);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.2);
    color: var(--wl-purple);
}

/* ---- Main Layout ---- */
.venue-layout[b-s1sy404yiw] {
    display: flex;
    flex: 1;
    min-height: 0;
}

.chat-area[b-s1sy404yiw] {
    flex: 7;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

/* ---- Sidebar ---- */
.sidebar-area[b-s1sy404yiw] {
    flex: 3;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: rgba(var(--wl-bg-secondary-rgb), 0.2);
}

.sidebar-tabs[b-s1sy404yiw] {
    display: flex;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    flex-shrink: 0;
    background: rgba(var(--wl-bg-secondary-rgb), 0.3);
}

.sidebar-tab[b-s1sy404yiw] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--wl-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.sidebar-tab:hover[b-s1sy404yiw] {
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.sidebar-tab.tab-active[b-s1sy404yiw] {
    color: var(--wl-gold);
    border-bottom-color: var(--wl-gold);
}

.sidebar-tab svg[b-s1sy404yiw] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.8;
}

.sidebar-tab.tab-active svg[b-s1sy404yiw] {
    opacity: 1;
}

.sidebar-content[b-s1sy404yiw] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Custom scrollbar for sidebar */
.sidebar-content[b-s1sy404yiw]::-webkit-scrollbar {
    width: 3px;
}

.sidebar-content[b-s1sy404yiw]::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-content[b-s1sy404yiw]::-webkit-scrollbar-thumb {
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 3px;
}

/* ---- Responsive ---- */
@@media (max-width: 768px) {
    .venue-page[b-s1sy404yiw] {
        /* Mobile: navbar(4.5rem) + top-padding(4.5rem) + bottom-nav(6rem) */
        height: calc(100vh - 4.5rem - 6rem);
    }

    .venue-layout[b-s1sy404yiw] {
        flex-direction: column;
    }

    .chat-area[b-s1sy404yiw] {
        flex: 1;
        min-height: 0;
        border-right: none;
        border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    }

    .sidebar-area[b-s1sy404yiw] {
        flex: 0 0 auto;
        max-height: 40vh;
    }

    .header-desc[b-s1sy404yiw] {
        display: none;
    }

    .venue-header[b-s1sy404yiw] {
        padding: 10px 16px;
    }
}

@@media (min-width: 1280px) {
    .venue-page[b-s1sy404yiw] {
        /* XL: navbar(4.5rem) + top-padding(4.5rem) + bottom-padding(1.5rem) */
        height: calc(100vh - 4.5rem - 1.5rem);
    }
}
/* /Components/Pages/World/Daily/Index.razor.rz.scp.css */
.daily-issue-page[b-928nfn25wa] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    color: rgb(var(--wl-text-primary-rgb));
}

.daily-issue-main[b-928nfn25wa] {
    min-width: 0;
}

.daily-issue-hero[b-928nfn25wa],
.daily-issue-story[b-928nfn25wa],
.daily-issue-empty[b-928nfn25wa],
.daily-issue-cover-ranking[b-928nfn25wa],
.daily-issue-archive[b-928nfn25wa] {
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.16);
    border-radius: 6px;
    background: var(--wl-panel-grad), rgb(var(--wl-bg-secondary-rgb));
    box-shadow: var(--wl-panel-shadow);
}

.daily-issue-hero[b-928nfn25wa] {
    min-height: 20rem;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.15rem;
    align-items: stretch;
}

.daily-issue-hero-media[b-928nfn25wa] {
    position: relative;
    min-height: 18rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.14);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.14), transparent 42%),
        linear-gradient(180deg, rgba(var(--wl-bg-tertiary-rgb), 0.92), rgba(var(--wl-bg-primary-rgb), 0.98));
}

.daily-issue-hero-media[b-928nfn25wa]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.daily-issue-hero-media[b-928nfn25wa]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.72)),
        linear-gradient(90deg, rgba(0, 0, 0, 0.46), transparent 70%);
}

.daily-issue-hero-media--fallback[b-928nfn25wa]::before {
    content: "";
    position: absolute;
    inset: 1rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.18);
    border-radius: 4px;
    background:
        linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.12) 1px, transparent 1px),
        linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.10) 1px, transparent 1px);
    background-size: 2rem 2rem;
    opacity: 0.7;
}

.daily-issue-hero-edition[b-928nfn25wa] {
    position: absolute;
    left: 1.15rem;
    right: 1.15rem;
    bottom: 1.15rem;
    z-index: 1;
    display: grid;
    gap: 0.2rem;
}

.daily-issue-hero-edition span[b-928nfn25wa] {
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.daily-issue-hero-edition strong[b-928nfn25wa] {
    color: rgb(var(--wl-text-primary-rgb));
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 400;
    line-height: 0.95;
    text-transform: uppercase;
}

.daily-issue-hero-copy[b-928nfn25wa] {
    max-width: 42rem;
    padding: 0 0.35rem 0.25rem;
}

.daily-issue-kicker[b-928nfn25wa],
.daily-issue-story-category[b-928nfn25wa],
.daily-issue-archive-item span[b-928nfn25wa] {
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.daily-issue-hero-copy h1[b-928nfn25wa],
.daily-issue-empty h1[b-928nfn25wa] {
    margin: 0.55rem 0 0;
    font-family: var(--font-display);
    font-size: 3.2rem;
    line-height: 0.94;
    letter-spacing: 0;
}

.daily-issue-hero-copy p[b-928nfn25wa],
.daily-issue-empty p[b-928nfn25wa] {
    max-width: 42rem;
    margin: 0.75rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.76);
    font-size: 1.1rem;
    line-height: 1.5;
}

.daily-issue-stories[b-928nfn25wa] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.daily-issue-story[b-928nfn25wa],
.daily-issue-empty[b-928nfn25wa],
.daily-issue-cover-ranking[b-928nfn25wa],
.daily-issue-archive[b-928nfn25wa] {
    padding: 1.15rem;
}

.daily-issue-empty[b-928nfn25wa] {
    min-height: 18rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.daily-issue-story-meta[b-928nfn25wa] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.daily-issue-story-rank[b-928nfn25wa] {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.34);
    border-radius: 50%;
    color: rgb(var(--wl-gold-rgb));
    font-family: var(--font-display);
    font-size: 1.3rem;
}

.daily-issue-story-title[b-928nfn25wa] {
    display: block;
    color: inherit;
    text-decoration: none;
}

.daily-issue-story-title h2[b-928nfn25wa] {
    margin: 0.85rem 0 0;
    font-size: 1.45rem;
    line-height: 1.15;
}

.daily-issue-story-title:hover h2[b-928nfn25wa] {
    color: rgb(var(--wl-gold-rgb));
}

.daily-issue-story-lead[b-928nfn25wa] {
    margin: 0.5rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.82);
    font-size: 1.05rem;
    line-height: 1.45;
}

.daily-issue-story-body[b-928nfn25wa],
.daily-issue-archive-empty[b-928nfn25wa],
.daily-issue-archive-item small[b-928nfn25wa] {
    color: rgba(var(--wl-text-primary-rgb), 0.64);
    line-height: 1.52;
}

.daily-issue-story-body[b-928nfn25wa] {
    margin: 0.75rem 0 0;
}

.daily-issue-source-link[b-928nfn25wa] {
    display: inline-flex;
    margin-top: 1rem;
    color: rgb(var(--wl-gold-rgb));
    font-weight: 800;
    text-decoration: none;
}

.daily-issue-source-link:hover[b-928nfn25wa] {
    color: var(--wl-gold-light);
}

.daily-issue-cover-ranking[b-928nfn25wa] {
    margin-top: 1rem;
}

.daily-issue-cover-ranking-header h2[b-928nfn25wa] {
    margin: 0.25rem 0 0;
    font-size: 1.35rem;
}

.daily-issue-cover-summary[b-928nfn25wa] {
    max-width: 48rem;
    margin: 0.55rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.72);
    line-height: 1.48;
}

.daily-issue-cover-reward[b-928nfn25wa] {
    display: inline-flex;
    align-items: center;
    margin-top: 0.75rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.26);
    border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.82rem;
    font-weight: 900;
}

.daily-issue-cover-list[b-928nfn25wa] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.daily-issue-cover-item--leader[b-928nfn25wa] {
    grid-column: 1 / -1;
}

.daily-issue-cover-row[b-928nfn25wa] {
    display: grid;
    grid-template-columns: 2rem 3rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    min-height: 3.7rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.12);
    border-radius: 6px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.34);
    color: inherit;
    text-decoration: none;
}

.daily-issue-cover-row:hover[b-928nfn25wa] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    background: rgba(var(--wl-gold-rgb), 0.07);
}

.daily-issue-cover-row--podium[b-928nfn25wa] {
    border-color: rgba(var(--wl-gold-rgb), 0.22);
}

.daily-issue-cover-row--leader[b-928nfn25wa] {
    grid-template-columns: 2.5rem 4.4rem minmax(0, 1fr) auto;
    min-height: 5.4rem;
    padding: 0.85rem;
    background:
        linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.14), rgba(var(--wl-bg-tertiary-rgb), 0.32)),
        rgba(var(--wl-bg-tertiary-rgb), 0.34);
}

.daily-issue-cover-rank[b-928nfn25wa] {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-radius: 50%;
    color: rgb(var(--wl-gold-rgb));
    font-family: var(--font-display);
    font-size: 1.2rem;
}

.daily-issue-cover-row--leader .daily-issue-cover-rank[b-928nfn25wa] {
    width: 2.5rem;
    height: 2.5rem;
    border-color: rgba(var(--wl-gold-rgb), 0.48);
    background: rgba(var(--wl-gold-rgb), 0.12);
    font-size: 1.45rem;
}

.daily-issue-cover-avatar[b-928nfn25wa] {
    display: inline-grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.2);
    border-radius: 50%;
    background: rgba(var(--wl-bg-primary-rgb), 0.66);
    color: rgb(var(--wl-gold-rgb));
    font-weight: 900;
}

.daily-issue-cover-row--leader .daily-issue-cover-avatar[b-928nfn25wa] {
    width: 4.4rem;
    height: 4.4rem;
    border-color: rgba(var(--wl-gold-rgb), 0.38);
    box-shadow: 0 0 0 0.25rem rgba(var(--wl-gold-rgb), 0.08);
}

.daily-issue-cover-avatar img[b-928nfn25wa] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.daily-issue-cover-name[b-928nfn25wa] {
    min-width: 0;
    overflow: hidden;
    color: rgb(var(--wl-text-primary-rgb));
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daily-issue-cover-row--leader .daily-issue-cover-name[b-928nfn25wa] {
    font-size: 1.15rem;
}

.daily-issue-cover-points[b-928nfn25wa] {
    color: rgb(var(--wl-gold-rgb));
    font-weight: 900;
    white-space: nowrap;
}

.daily-issue-archive[b-928nfn25wa] {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.daily-issue-archive-header h2[b-928nfn25wa] {
    margin: 0.25rem 0 0.35rem;
    font-size: 1.25rem;
}

.daily-issue-archive-header[b-928nfn25wa],
.daily-issue-archive-empty[b-928nfn25wa] {
    grid-column: 1 / -1;
}

.daily-issue-archive-item[b-928nfn25wa] {
    display: grid;
    gap: 0.25rem;
    min-height: 8.25rem;
    padding: 0.9rem;
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.12);
    border-radius: 6px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.34);
    color: inherit;
    text-decoration: none;
}

.daily-issue-archive-item strong[b-928nfn25wa] {
    line-height: 1.15;
}

.daily-issue-archive-item:hover strong[b-928nfn25wa],
.daily-issue-archive-item--active strong[b-928nfn25wa] {
    color: rgb(var(--wl-gold-rgb));
}

.daily-issue-archive-item--active[b-928nfn25wa] {
    border-color: rgba(var(--wl-gold-rgb), 0.22);
    background: rgba(var(--wl-gold-rgb), 0.08);
}

@media (max-width: 980px) {
    .daily-issue-archive[b-928nfn25wa] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .daily-issue-stories[b-928nfn25wa],
    .daily-issue-cover-list[b-928nfn25wa],
    .daily-issue-archive[b-928nfn25wa] {
        grid-template-columns: 1fr;
    }

    .daily-issue-hero-copy h1[b-928nfn25wa],
    .daily-issue-empty h1[b-928nfn25wa] {
        font-size: 2.25rem;
    }

    .daily-issue-cover-row[b-928nfn25wa],
    .daily-issue-cover-row--leader[b-928nfn25wa] {
        grid-template-columns: 2rem 3rem minmax(0, 1fr) auto;
        min-height: 3.7rem;
        padding: 0.6rem 0.7rem;
    }

    .daily-issue-cover-row--leader .daily-issue-cover-rank[b-928nfn25wa],
    .daily-issue-cover-rank[b-928nfn25wa] {
        width: 2rem;
        height: 2rem;
        font-size: 1.2rem;
    }

    .daily-issue-cover-row--leader .daily-issue-cover-avatar[b-928nfn25wa],
    .daily-issue-cover-avatar[b-928nfn25wa] {
        width: 3rem;
        height: 3rem;
    }

}

@media (max-width: 640px) {
    .daily-issue-hero[b-928nfn25wa] {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .daily-issue-hero-copy[b-928nfn25wa] {
        padding: 0;
    }

    .daily-issue-hero-media[b-928nfn25wa] {
        min-height: 14rem;
        order: -1;
    }

    .daily-issue-hero-copy h1[b-928nfn25wa],
    .daily-issue-empty h1[b-928nfn25wa] {
        font-size: 2.25rem;
    }
}
/* /Components/Pages/World/Daily/News24Story.razor.rz.scp.css */
.news24-story-page[b-e5hgo1qpor] {
    max-width: 66rem;
    margin: 0 auto;
    color: rgb(var(--wl-text-primary-rgb));
}

.news24-story-back[b-e5hgo1qpor] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    color: rgb(var(--wl-gold-rgb));
    font-weight: 800;
    text-decoration: none;
}

.news24-story-back span:first-child[b-e5hgo1qpor] {
    font-size: 1.4rem;
    line-height: 1;
}

.daily-issue-kicker[b-e5hgo1qpor] {
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.news24-story-article[b-e5hgo1qpor],
.news24-story-empty[b-e5hgo1qpor] {
    overflow: hidden;
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.16);
    border-radius: 6px;
    background: var(--wl-panel-grad), rgb(var(--wl-bg-secondary-rgb));
    box-shadow: var(--wl-panel-shadow);
}

.news24-story-empty[b-e5hgo1qpor] {
    min-height: 18rem;
    padding: 2rem;
}

.news24-story-hero[b-e5hgo1qpor] {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
    gap: 1rem;
    padding: 1.15rem;
}

.news24-story-hero-copy[b-e5hgo1qpor] {
    align-self: center;
    min-width: 0;
    padding: 1rem;
}

.news24-story-meta[b-e5hgo1qpor] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.news24-story-hero h1[b-e5hgo1qpor],
.news24-story-empty h1[b-e5hgo1qpor] {
    margin: 0.75rem 0 0;
    font-family: var(--font-display);
    font-size: 4.1rem;
    line-height: 0.92;
    letter-spacing: 0;
}

.news24-story-hero p[b-e5hgo1qpor] {
    max-width: 42rem;
    margin: 1rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.78);
    font-size: 1.18rem;
    line-height: 1.52;
}

.news24-story-media[b-e5hgo1qpor] {
    position: relative;
    min-height: 26rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.14);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(255, 118, 96, 0.2), transparent 48%),
        linear-gradient(180deg, rgba(var(--wl-bg-tertiary-rgb), 0.92), rgba(var(--wl-bg-primary-rgb), 0.98));
}

.news24-story-media[b-e5hgo1qpor]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.news24-story-media--fallback[b-e5hgo1qpor]::before {
    content: "";
    position: absolute;
    inset: 1rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.18);
    background:
        linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.1) 1px, transparent 1px),
        linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.08) 1px, transparent 1px);
    background-size: 1.5rem 1.5rem;
}

.news24-story-impact[b-e5hgo1qpor] {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: 1rem;
    margin: 0 1.15rem;
    padding: 1rem;
    border: 1px solid rgba(255, 118, 96, 0.24);
    border-radius: 6px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.42);
}

.news24-story-impact h2[b-e5hgo1qpor] {
    margin: 0.25rem 0 0;
    font-size: 1.2rem;
}

.news24-story-impact ul[b-e5hgo1qpor] {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.news24-story-impact li[b-e5hgo1qpor] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.9rem;
    align-items: start;
    min-width: 0;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(255, 118, 96, 0.55);
}

.news24-story-impact strong[b-e5hgo1qpor] {
    color: rgb(var(--wl-text-primary-rgb));
}

.news24-story-impact p[b-e5hgo1qpor] {
    margin: 0.2rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.66);
    font-size: 0.9rem;
    line-height: 1.42;
}

.news24-story-impact li > span[b-e5hgo1qpor] {
    color: rgb(var(--wl-gold-rgb));
    font-weight: 900;
    white-space: nowrap;
}

.news24-story-body[b-e5hgo1qpor] {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 1.15rem 2.3rem;
    display: grid;
    gap: 1.05rem;
    color: rgba(var(--wl-text-primary-rgb), 0.84);
    font-size: 1.08rem;
    line-height: 1.72;
}

.news24-story-body p[b-e5hgo1qpor] {
    margin: 0;
}

@media (max-width: 860px) {
    .news24-story-hero[b-e5hgo1qpor],
    .news24-story-impact[b-e5hgo1qpor] {
        grid-template-columns: 1fr;
    }

    .news24-story-media[b-e5hgo1qpor] {
        min-height: 20rem;
        order: -1;
    }

    .news24-story-hero h1[b-e5hgo1qpor],
    .news24-story-empty h1[b-e5hgo1qpor] {
        font-size: 3rem;
    }
}

@media (max-width: 640px) {
    .news24-story-hero[b-e5hgo1qpor] {
        padding: 0.85rem;
    }

    .news24-story-hero-copy[b-e5hgo1qpor] {
        padding: 0.25rem;
    }

    .news24-story-media[b-e5hgo1qpor] {
        min-height: 16rem;
    }

    .news24-story-hero h1[b-e5hgo1qpor],
    .news24-story-empty h1[b-e5hgo1qpor] {
        font-size: 2.35rem;
    }

    .news24-story-impact[b-e5hgo1qpor] {
        margin: 0 0.85rem;
    }

    .news24-story-impact li[b-e5hgo1qpor] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}
/* /Components/Pages/World/Daily/Story.razor.rz.scp.css */
.daily-issue-detail-page[b-camnv6nwn4] {
    max-width: 58rem;
    margin: 0 auto;
    color: rgb(var(--wl-text-primary-rgb));
}

.daily-issue-detail-back[b-camnv6nwn4] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
    color: rgb(var(--wl-gold-rgb));
    font-weight: 800;
    text-decoration: none;
}

.daily-issue-detail-back span:first-child[b-camnv6nwn4] {
    font-size: 1.4rem;
    line-height: 1;
}

.daily-issue-detail-article[b-camnv6nwn4],
.daily-issue-detail-response[b-camnv6nwn4],
.daily-issue-detail-comments[b-camnv6nwn4],
.daily-issue-detail-empty[b-camnv6nwn4] {
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.16);
    border-radius: 6px;
    background: var(--wl-panel-grad), rgb(var(--wl-bg-secondary-rgb));
    box-shadow: var(--wl-panel-shadow);
}

.daily-issue-detail-article[b-camnv6nwn4],
.daily-issue-detail-empty[b-camnv6nwn4] {
    padding: 2rem;
}

.daily-issue-detail-meta[b-camnv6nwn4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    color: rgba(var(--wl-text-primary-rgb), 0.62);
    font-weight: 800;
    text-transform: uppercase;
}

.daily-issue-detail-article h1[b-camnv6nwn4],
.daily-issue-detail-empty h1[b-camnv6nwn4] {
    margin: 0.75rem 0 0;
    font-family: var(--font-display);
    font-size: 4.2rem;
    line-height: 0.95;
    letter-spacing: 0;
}

.daily-issue-detail-lead[b-camnv6nwn4] {
    max-width: 44rem;
    margin: 1rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.78);
    font-size: 1.18rem;
    line-height: 1.55;
}

.daily-issue-detail-body[b-camnv6nwn4] {
    margin-top: 1.6rem;
    display: grid;
    gap: 1rem;
    color: rgba(var(--wl-text-primary-rgb), 0.82);
    font-size: 1.05rem;
    line-height: 1.7;
}

.daily-issue-detail-body p[b-camnv6nwn4],
.daily-issue-detail-no-comments[b-camnv6nwn4],
.daily-issue-detail-limit[b-camnv6nwn4] {
    margin: 0;
}

.daily-issue-detail-source[b-camnv6nwn4] {
    display: inline-flex;
    margin-top: 1.5rem;
    color: rgb(var(--wl-gold-rgb));
    font-weight: 800;
    text-decoration: none;
}

.daily-issue-detail-comments[b-camnv6nwn4] {
    margin-top: 1rem;
    padding: 1rem;
}

.daily-issue-detail-response[b-camnv6nwn4] {
    display: grid;
    gap: 0.8rem;
    margin-top: 1rem;
    padding: 1rem;
}

.daily-issue-detail-response h2[b-camnv6nwn4],
.daily-issue-detail-response p[b-camnv6nwn4] {
    margin: 0;
}

.daily-issue-detail-response > div > p[b-camnv6nwn4] {
    margin-top: 0.35rem;
    color: rgba(var(--wl-text-primary-rgb), 0.68);
    line-height: 1.5;
}

.daily-issue-detail-response select[b-camnv6nwn4],
.daily-issue-detail-response textarea[b-camnv6nwn4] {
    width: 100%;
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.14);
    border-radius: 6px;
    background: rgba(var(--wl-bg-primary-rgb), 0.72);
    color: inherit;
    padding: 0.75rem;
}

.daily-issue-detail-response textarea[b-camnv6nwn4] {
    min-height: 6rem;
    resize: vertical;
}

.daily-issue-detail-response-actions[b-camnv6nwn4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.daily-issue-detail-response-actions span[b-camnv6nwn4] {
    color: rgba(var(--wl-text-primary-rgb), 0.55);
    font-size: 0.8rem;
}

.daily-issue-detail-response-actions button[b-camnv6nwn4] {
    border: 0;
    border-radius: 6px;
    padding: 0.55rem 0.85rem;
    background: rgba(var(--wl-gold-rgb), 0.18);
    color: rgb(var(--wl-gold-rgb));
    font-weight: 800;
}

.daily-issue-detail-response-message.success[b-camnv6nwn4] {
    color: rgb(74 222 128);
}

.daily-issue-detail-response-message.error[b-camnv6nwn4] {
    color: rgb(248 113 113);
}

.daily-issue-detail-comments-header[b-camnv6nwn4] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.daily-issue-detail-comments-header h2[b-camnv6nwn4] {
    margin: 0;
    font-size: 1.25rem;
}

.daily-issue-detail-comments-header span[b-camnv6nwn4] {
    color: rgb(var(--wl-gold-rgb));
    font-weight: 900;
}

.daily-issue-detail-comment-list[b-camnv6nwn4] {
    display: grid;
    gap: 0.8rem;
}

.daily-issue-detail-comment-list--board[b-camnv6nwn4] {
    gap: 1rem;
}

.daily-issue-detail-comment-list--board[b-camnv6nwn4]  .post-card {
    opacity: 1;
    animation: none;
    border-radius: 8px;
    background: rgba(var(--wl-bg-primary-rgb), 0.42);
}

.daily-issue-detail-comment-list--board[b-camnv6nwn4]  .post-card:hover {
    background: rgba(var(--wl-bg-primary-rgb), 0.52);
}

.daily-issue-detail-load-more[b-camnv6nwn4],
.daily-issue-detail-composer button[b-camnv6nwn4] {
    border: 0;
    border-radius: 6px;
    padding: 0.45rem 0.7rem;
    background: rgba(var(--wl-gold-rgb), 0.16);
    color: rgb(var(--wl-gold-rgb));
    font-weight: 800;
}

.daily-issue-detail-composer textarea[b-camnv6nwn4] {
    width: 100%;
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.14);
    border-radius: 6px;
    background: rgba(var(--wl-bg-primary-rgb), 0.72);
    color: inherit;
    resize: vertical;
}

.daily-issue-detail-load-more[b-camnv6nwn4] {
    margin-top: 0.9rem;
}

.daily-issue-detail-composer[b-camnv6nwn4] {
    display: grid;
    gap: 0.6rem;
    margin-top: 1rem;
}

.daily-issue-detail-composer textarea[b-camnv6nwn4] {
    padding: 0.75rem;
    min-height: 5rem;
}

.daily-issue-detail-composer button[b-camnv6nwn4] {
    justify-self: end;
}

@media (max-width: 640px) {
    .daily-issue-detail-article[b-camnv6nwn4],
    .daily-issue-detail-empty[b-camnv6nwn4] {
        padding: 1.2rem;
    }

    .daily-issue-detail-article h1[b-camnv6nwn4],
    .daily-issue-detail-empty h1[b-camnv6nwn4] {
        font-size: 2.8rem;
    }
}
/* /Components/Pages/World/Events/Brand.razor.rz.scp.css */
.org-brand-page[b-l44s0drf2o] {
    max-width: 1280px;
}

.org-brand-loading[b-l44s0drf2o] {
    min-height: 18rem;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .85rem;
    color: var(--wl-text-secondary);
}

.org-brand-loader[b-l44s0drf2o] {
    width: 2.25rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(var(--org-accent-rgb), .2);
    border-top-color: var(--org-accent);
    animation: brand-spin-b-l44s0drf2o .8s linear infinite;
}

.org-brand-stage[b-l44s0drf2o] {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.1rem, 3vw, 2.2rem);
    overflow: hidden;
    padding: clamp(1.4rem, 4vw, 2.6rem);
    border: 1px solid rgba(var(--org-accent-rgb), .34);
    border-radius: 20px;
    color: #f4efff;
    background:
        radial-gradient(80% 140% at 0% 0%, rgba(167, 139, 250, .32), transparent 62%),
        radial-gradient(70% 130% at 100% 0%, rgba(251, 113, 133, .2), transparent 62%),
        linear-gradient(145deg, #19112b 0%, #0d0917 72%);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .38);
}

.org-brand-stage[b-l44s0drf2o]::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .22;
    background-image: linear-gradient(115deg, transparent 44%, rgba(255,255,255,.08) 45%, transparent 46%);
    background-size: 2.4rem 100%;
    pointer-events: none;
}

.org-brand-mark[b-l44s0drf2o] {
    display: grid;
    place-items: center;
    width: clamp(5.5rem, 10vw, 8rem);
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 28% 72% 62% 38% / 35% 32% 68% 65%;
    color: #fff;
    font: 400 clamp(2rem, 4vw, 3.3rem)/1 var(--font-display, sans-serif);
    letter-spacing: .08em;
    background: linear-gradient(145deg, rgba(196,181,253,.23), rgba(251,113,133,.15));
    box-shadow: inset 0 0 30px rgba(255,255,255,.06), 0 12px 40px rgba(0,0,0,.3);
}

.org-brand-copy[b-l44s0drf2o] {
    display: grid;
    gap: .65rem;
    min-width: 0;
}

.org-brand-copy .org-title[b-l44s0drf2o] {
    overflow-wrap: anywhere;
    color: #fff;
    font-size: clamp(2.5rem, 7vw, 5rem);
    text-shadow: 0 0 38px rgba(167,139,250,.35);
}

.org-brand-copy p[b-l44s0drf2o] {
    max-width: 47rem;
    margin: 0;
    color: rgba(244,239,255,.72);
    line-height: 1.65;
}

.org-brand-owner[b-l44s0drf2o] {
    width: fit-content;
    color: #c4b5fd;
    font-size: .85rem;
    font-weight: 750;
    text-decoration: none;
}

.org-brand-owner:hover[b-l44s0drf2o] { color: #fff; }

.org-brand-action[b-l44s0drf2o] {
    display: grid;
    justify-items: stretch;
    gap: .5rem;
    width: min(100%, 15rem);
}

.org-brand-action small[b-l44s0drf2o] {
    color: rgba(244,239,255,.55);
    line-height: 1.45;
    text-align: center;
}

.org-brand-stage .org-btn--ghost[b-l44s0drf2o] {
    border-color: rgba(255,255,255,.2);
    background: rgba(255,255,255,.07);
    color: #fff;
}

.org-brand-metrics[b-l44s0drf2o] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 1.25rem;
}

.org-brand-metrics > div[b-l44s0drf2o] {
    display: grid;
    gap: .2rem;
    padding: 0 1rem;
    border-left: 1px solid rgba(255,255,255,.1);
}

.org-brand-metrics > div:first-child[b-l44s0drf2o] { border-left: 0; padding-left: 0; }
.org-brand-metrics span[b-l44s0drf2o] { color: rgba(244,239,255,.5); font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.org-brand-metrics strong[b-l44s0drf2o] { color: #fff; font: 400 1.8rem/1 var(--font-display, sans-serif); letter-spacing: .04em; }
.org-brand-metrics .org-brand-metric--accent strong[b-l44s0drf2o] { color: #c4b5fd; }

.org-brand-success[b-l44s0drf2o] {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(52,211,153,.35);
    border-radius: 10px;
    color: var(--wl-text-primary);
    background: rgba(52,211,153,.08);
}

.org-brand-success .org-ic[b-l44s0drf2o] { color: #34d399; }

.org-brand-series[b-l44s0drf2o] {
    display: grid;
    gap: 1rem;
}

.org-brand-section-head[b-l44s0drf2o] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.org-brand-section-head h2[b-l44s0drf2o] {
    margin: .2rem 0 0;
    font: 400 clamp(1.7rem, 3vw, 2.4rem)/1 var(--font-display, sans-serif);
    letter-spacing: .05em;
}

.org-brand-section-head p[b-l44s0drf2o] {
    max-width: 35rem;
    margin: 0;
    color: var(--wl-text-secondary);
    line-height: 1.55;
    text-align: right;
}

.org-brand-series-grid[b-l44s0drf2o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: .8rem;
}

.org-brand-series-card[b-l44s0drf2o] {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 1rem;
    min-height: 13rem;
    overflow: hidden;
    padding: 1.25rem;
    border: 1px solid rgba(var(--org-accent-rgb), .22);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(var(--org-accent-rgb),.09), rgba(var(--wl-contrast-rgb),.025));
}

.org-brand-series-card--archived[b-l44s0drf2o] { filter: saturate(.7); }
.org-brand-series-number[b-l44s0drf2o] { color: rgba(var(--org-accent-rgb), .3); font: 400 3rem/1 var(--font-display, sans-serif); }
.org-brand-series-topline[b-l44s0drf2o] { display: flex; justify-content: space-between; gap: .6rem; color: var(--org-accent-2); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.org-brand-series-topline span[b-l44s0drf2o] { display: inline-flex; align-items: center; gap: .3rem; }
.org-brand-series-card h3[b-l44s0drf2o] { margin: .45rem 0; font: 400 1.55rem/1.1 var(--font-display, sans-serif); letter-spacing: .04em; }
.org-brand-series-card p[b-l44s0drf2o] { display: -webkit-box; overflow: hidden; margin: 0; color: var(--wl-text-secondary); font-size: .86rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.org-brand-series-facts[b-l44s0drf2o] { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .8rem; color: var(--wl-text-muted); font-size: .75rem; font-weight: 700; }
.org-brand-series-card .org-btn[b-l44s0drf2o] { grid-column: 1 / -1; justify-self: start; }

@keyframes brand-spin-b-l44s0drf2o { to { transform: rotate(360deg); } }

@media (max-width: 800px) {
    .org-brand-stage[b-l44s0drf2o] { grid-template-columns: auto minmax(0, 1fr); }
    .org-brand-action[b-l44s0drf2o] { grid-column: 1 / -1; width: 100%; }
    .org-brand-metrics[b-l44s0drf2o] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0; }
    .org-brand-metrics > div[b-l44s0drf2o], .org-brand-metrics > div:first-child[b-l44s0drf2o] { padding: 0 .8rem; border-left: 1px solid rgba(255,255,255,.1); }
    .org-brand-metrics > div:nth-child(odd)[b-l44s0drf2o] { padding-left: 0; border-left: 0; }
    .org-brand-section-head[b-l44s0drf2o] { align-items: start; flex-direction: column; }
    .org-brand-section-head p[b-l44s0drf2o] { text-align: left; }
}

@media (max-width: 520px) {
    .org-brand-stage[b-l44s0drf2o] { grid-template-columns: 1fr; }
    .org-brand-mark[b-l44s0drf2o] { width: 4.5rem; }
    .org-brand-copy .org-title[b-l44s0drf2o] { font-size: 2.7rem; }
    .org-brand-metrics[b-l44s0drf2o] { grid-column: 1; }
    .org-brand-metrics strong[b-l44s0drf2o] { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
    .org-brand-loader[b-l44s0drf2o] { animation: none; }
}
/* /Components/Pages/World/Events/Details.razor.rz.scp.css */
.org-apply-form[b-7srgbo3q67] {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    align-items: end;
}

.org-apply-form .org-field[b-7srgbo3q67] {
    min-width: 9rem;
    max-width: 12rem;
}

.org-applied[b-7srgbo3q67] {
    display: flex;
    gap: .6rem;
    align-items: center;
    padding: .8rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(52, 211, 153, .35);
    background: rgba(52, 211, 153, .08);
    font-size: .9rem;
}

.org-applied .org-ic[b-7srgbo3q67] {
    width: 1.1rem;
    height: 1.1rem;
    color: #34d399;
}

.org-public-lifecycle[b-7srgbo3q67] {
    position: relative;
    margin-top: .65rem;
}

.org-public-cancelled[b-7srgbo3q67] {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(251, 113, 133, .4);
    border-radius: 14px;
    color: #ffe4e6;
    background: linear-gradient(135deg, rgba(159, 18, 57, .22), rgba(76, 5, 25, .12));
}

.org-public-cancelled .org-ic[b-7srgbo3q67] {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    color: #fb7185;
}

.org-public-cancelled div[b-7srgbo3q67] {
    display: grid;
    gap: .2rem;
}

.org-public-cancelled strong[b-7srgbo3q67] {
    font-size: .95rem;
}

.org-public-cancelled span:last-child[b-7srgbo3q67] {
    color: rgba(255, 228, 230, .72);
    font-size: .82rem;
}

.org-public-recap[b-7srgbo3q67] {
    display: grid;
    gap: 1.25rem;
}

.org-public-recap-stats[b-7srgbo3q67] {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.org-public-recap-day[b-7srgbo3q67] {
    display: grid;
    gap: .75rem;
}

.org-public-recap-day > h3[b-7srgbo3q67] {
    margin: 0;
    color: var(--org-muted, #a1a1aa);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.org-public-performances[b-7srgbo3q67] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: .9rem;
}

.org-public-performance[b-7srgbo3q67] {
    display: grid;
    align-content: start;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
}

.org-public-performance--no-show[b-7srgbo3q67] {
    border-color: rgba(251, 113, 133, .25);
    background: rgba(251, 113, 133, .045);
}

.org-public-performance > header[b-7srgbo3q67] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
}

.org-public-performance > header > div[b-7srgbo3q67] {
    display: grid;
    gap: .2rem;
}

.org-public-artist[b-7srgbo3q67] {
    color: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;
}

.org-public-artist:hover[b-7srgbo3q67] {
    text-decoration: underline;
}

.org-public-performance-meta[b-7srgbo3q67] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem 1rem;
    color: var(--org-muted, #a1a1aa);
    font-size: .82rem;
}

.org-public-performance h4[b-7srgbo3q67] {
    margin: .15rem 0 0;
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.org-public-setlist[b-7srgbo3q67] {
    display: grid;
    gap: .35rem;
    margin: 0;
    padding-left: 1.35rem;
}

.org-public-setlist li[b-7srgbo3q67] {
    padding-left: .15rem;
}

.org-public-setlist li[b-7srgbo3q67],
.org-public-setlist li > span:last-child[b-7srgbo3q67] {
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}

.org-public-setlist li[b-7srgbo3q67] {
    display: list-item;
}

.org-public-setlist li[b-7srgbo3q67]::marker {
    color: var(--org-muted, #a1a1aa);
    font-variant-numeric: tabular-nums;
}

.org-public-setlist li > span:last-child[b-7srgbo3q67] {
    display: inline-flex;
    float: right;
    color: var(--org-muted, #a1a1aa);
    font-size: .75rem;
}

.org-public-setlist strong[b-7srgbo3q67] {
    color: inherit;
    font-variant-numeric: tabular-nums;
}

.org-public-incidents[b-7srgbo3q67] {
    display: grid;
    gap: .7rem;
}

.org-public-incident[b-7srgbo3q67] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem 1rem;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 10px;
    background: rgba(255, 255, 255, .02);
}

.org-public-incident > div[b-7srgbo3q67] {
    display: grid;
    gap: .3rem;
}

.org-public-incident h3[b-7srgbo3q67],
.org-public-incident p[b-7srgbo3q67] {
    margin: 0;
}

.org-public-incident h3[b-7srgbo3q67] {
    font-size: .95rem;
}

.org-public-incident p[b-7srgbo3q67],
.org-public-incident-response[b-7srgbo3q67] {
    color: var(--org-muted, #a1a1aa);
    font-size: .8rem;
}

.org-public-incident-response[b-7srgbo3q67] {
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    .org-public-performance > header[b-7srgbo3q67],
    .org-public-incident[b-7srgbo3q67] {
        align-items: flex-start;
        flex-direction: column;
    }

    .org-public-setlist li > span:last-child[b-7srgbo3q67] {
        float: none;
        margin-left: .5rem;
    }
}
.org-public-brand-link[b-7srgbo3q67] {
    position: relative;
    color: #c4b5fd;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-decoration: none;
    text-transform: uppercase;
}

.org-public-brand-link:hover[b-7srgbo3q67] { color: #fff; }

.org-public-series[b-7srgbo3q67] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    margin-top: .25rem;
    padding: .3rem .55rem;
    border: 1px solid rgba(196,181,253,.25);
    border-radius: 999px;
    color: rgba(242,237,255,.72);
    font-size: .7rem;
    font-weight: 750;
    background: rgba(196,181,253,.08);
}
/* /Components/Pages/World/Events/EventSection.razor.rz.scp.css */
.org-event-section[b-cgykc3ftw1] {
    display: grid;
    gap: .9rem;
    padding: 1.1rem 0 0;
}

.org-event-section--accent[b-cgykc3ftw1] {
    margin-inline: -.7rem;
    padding: 1.2rem .7rem .8rem;
    border: 1px solid rgba(var(--org-accent-rgb), .18);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(var(--org-accent-rgb), .065), transparent 65%);
}

.org-event-section--muted .org-event-grid[b-cgykc3ftw1] { opacity: .9; }

.org-event-section-head[b-cgykc3ftw1] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.org-event-section-kicker[b-cgykc3ftw1] {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--wl-text-primary);
    font: 400 clamp(1.55rem, 3vw, 2.15rem)/1 var(--font-display, sans-serif);
    letter-spacing: .05em;
}

.org-event-section-kicker .org-ic[b-cgykc3ftw1] { width: 1.2rem; height: 1.2rem; color: var(--org-accent); }
.org-event-section-head p[b-cgykc3ftw1] { margin: .3rem 0 0; color: var(--wl-text-secondary); font-size: .82rem; line-height: 1.45; }
.org-event-section-count[b-cgykc3ftw1] { display: grid; place-items: center; min-width: 2rem; height: 2rem; padding-inline: .5rem; border: 1px solid rgba(var(--org-accent-rgb),.3); border-radius: 999px; color: var(--org-accent-2); font-size: .78rem; font-weight: 800; background: rgba(var(--org-accent-rgb),.08); }

.org-event-grid[b-cgykc3ftw1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: .8rem;
}

.org-event-card[b-cgykc3ftw1] {
    --event-tone: var(--org-accent-rgb);
    position: relative;
    display: grid;
    grid-template-columns: 5.2rem minmax(0, 1fr);
    min-height: 18rem;
    overflow: hidden;
    border: 1px solid rgba(var(--event-tone), .2);
    border-radius: 16px;
    background: rgba(var(--wl-contrast-rgb), .025);
    box-shadow: 0 12px 36px rgba(0,0,0,.12);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.org-event-card:hover[b-cgykc3ftw1] { transform: translateY(-2px); border-color: rgba(var(--event-tone),.5); box-shadow: 0 18px 45px rgba(0,0,0,.2); }
.org-event-card--festival[b-cgykc3ftw1] { --event-tone: 251, 113, 133; }
.org-event-card--gala[b-cgykc3ftw1] { --event-tone: 245, 190, 77; }
.org-event-card--charity[b-cgykc3ftw1] { --event-tone: 52, 211, 153; }
.org-event-card--personal[b-cgykc3ftw1] { box-shadow: 0 0 0 1px rgba(var(--org-accent-rgb),.22), 0 16px 42px rgba(var(--org-accent-rgb),.09); }

.org-event-card-art[b-cgykc3ftw1] {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: .32rem;
    padding: 1rem .45rem;
    color: #fff;
    text-align: center;
    background:
        radial-gradient(100% 70% at 50% 0%, rgba(var(--event-tone),.42), transparent 70%),
        linear-gradient(180deg, #1a122a, #0c0915);
}

.org-event-card-art[b-cgykc3ftw1]::after {
    content: '';
    position: absolute;
    inset: auto .8rem .8rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(var(--event-tone),0), rgba(var(--event-tone),.8), rgba(var(--event-tone),0));
}

.org-event-card-day[b-cgykc3ftw1] { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 1.35rem/1 var(--font-display, sans-serif); letter-spacing: .06em; }
.org-event-card-date[b-cgykc3ftw1] { margin-top: auto; color: rgba(255,255,255,.55); font-size: .62rem; font-weight: 800; line-height: 1.3; text-transform: uppercase; }

.org-event-card-content[b-cgykc3ftw1] {
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: .8rem;
    min-width: 0;
    padding: 1rem;
}

.org-event-card-topline[b-cgykc3ftw1] { display: flex; align-items: center; justify-content: space-between; gap: .65rem; color: var(--wl-text-muted); font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.org-event-card-badges[b-cgykc3ftw1] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }
.org-event-card-context[b-cgykc3ftw1] { border-style: dashed; }
.org-event-card-title[b-cgykc3ftw1] { display: block; width: fit-content; max-width: 100%; overflow-wrap: anywhere; color: var(--wl-text-primary); font: 400 clamp(1.35rem, 2.5vw, 1.75rem)/1.08 var(--font-display, sans-serif); letter-spacing: .035em; text-decoration: none; }
.org-event-card-title:hover[b-cgykc3ftw1] { color: var(--org-accent-2); }
.org-event-card-brandline[b-cgykc3ftw1] { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .35rem; color: var(--wl-text-muted); font-size: .74rem; }
.org-event-card-brandline a[b-cgykc3ftw1] { color: var(--wl-text-secondary); font-weight: 700; text-decoration: none; }
.org-event-card-brandline a:hover[b-cgykc3ftw1] { color: var(--org-accent-2); }

.org-event-card-series[b-cgykc3ftw1] { display: inline-flex; align-items: center; gap: .38rem; width: fit-content; max-width: 100%; padding: .3rem .55rem; border: 1px solid rgba(var(--org-accent-rgb),.18); border-radius: 999px; color: var(--org-accent-2); font-size: .7rem; font-weight: 750; background: rgba(var(--org-accent-rgb),.07); }
.org-event-card-series .org-ic[b-cgykc3ftw1] { width: .8rem; height: .8rem; }

.org-event-card-facts[b-cgykc3ftw1] { display: flex; align-content: start; flex-wrap: wrap; gap: .45rem .8rem; color: var(--wl-text-secondary); font-size: .75rem; }
.org-event-card-facts > span[b-cgykc3ftw1] { display: inline-flex; align-items: center; gap: .3rem; }
.org-event-card-facts .org-ic[b-cgykc3ftw1] { width: .82rem; height: .82rem; color: var(--org-accent); }
.org-event-card-facts .org-event-card-open[b-cgykc3ftw1] { color: var(--org-accent-2); font-weight: 800; }

.org-event-card-footer[b-cgykc3ftw1] { display: flex; align-items: end; justify-content: space-between; gap: .8rem; padding-top: .75rem; border-top: 1px solid rgba(var(--wl-contrast-rgb),.08); }
.org-event-card-profile[b-cgykc3ftw1] { display: grid; gap: .05rem; min-width: 0; color: var(--wl-text-muted); font-size: .62rem; font-weight: 750; text-decoration: none; text-transform: uppercase; }
.org-event-card-profile strong[b-cgykc3ftw1] { color: var(--wl-text-primary); font: 400 1.2rem/1 var(--font-display, sans-serif); }
.org-event-card-followers[b-cgykc3ftw1] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.org-event-card-profile:hover strong[b-cgykc3ftw1] { color: var(--org-accent-2); }
.org-event-card-footer .org-btn[b-cgykc3ftw1] { flex: 0 0 auto; }

@media (max-width: 520px) {
    .org-event-card[b-cgykc3ftw1] { grid-template-columns: 4.1rem minmax(0, 1fr); min-height: 19rem; }
    .org-event-card-content[b-cgykc3ftw1] { padding: .9rem .8rem; }
    .org-event-card-footer[b-cgykc3ftw1] { align-items: stretch; flex-direction: column; }
    .org-event-card-footer .org-btn[b-cgykc3ftw1] { min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .org-event-card[b-cgykc3ftw1] { transition: none; }
}
/* /Components/Pages/World/Events/Index.razor.rz.scp.css */
.org-discovery[b-9lswu4d4qq] {
    max-width: 1320px;
}

.org-discovery-hero[b-9lswu4d4qq] {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.4rem 2rem;
    overflow: hidden;
    padding: clamp(1.5rem, 4vw, 2.8rem);
    border: 1px solid rgba(var(--org-accent-rgb), .34);
    border-radius: 22px;
    color: #f4efff;
    background:
        radial-gradient(75% 150% at -5% -20%, rgba(167,139,250,.36), transparent 60%),
        radial-gradient(65% 130% at 105% -15%, rgba(251,113,133,.24), transparent 65%),
        linear-gradient(145deg, #181029, #0c0915 68%);
    box-shadow: 0 30px 85px rgba(0,0,0,.38);
}

.org-discovery-hero[b-9lswu4d4qq]::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .2;
    background-image:
        linear-gradient(115deg, transparent 47%, rgba(255,255,255,.1) 48%, transparent 49%),
        linear-gradient(65deg, transparent 47%, rgba(251,113,133,.1) 48%, transparent 49%);
    background-size: 4.2rem 100%, 5.4rem 100%;
}

.org-discovery-hero-copy[b-9lswu4d4qq] {
    display: grid;
    align-content: center;
    gap: .7rem;
    max-width: 48rem;
}

.org-discovery-hero .org-title[b-9lswu4d4qq] {
    color: #fff;
    font-size: clamp(2.7rem, 8vw, 5.8rem);
    text-shadow: 0 0 38px rgba(167,139,250,.35);
}

.org-discovery-hero-copy p[b-9lswu4d4qq] {
    max-width: 43rem;
    margin: 0;
    color: rgba(244,239,255,.68);
    font-size: clamp(.92rem, 1.5vw, 1.05rem);
    line-height: 1.65;
}

.org-discovery-hero-actions[b-9lswu4d4qq] {
    display: grid;
    align-content: center;
    gap: .65rem;
    min-width: 13rem;
}

.org-discovery-hero .org-btn--ghost[b-9lswu4d4qq] {
    border-color: rgba(255,255,255,.18);
    background: rgba(255,255,255,.06);
    color: #fff;
}

.org-discovery-pulse[b-9lswu4d4qq] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.1);
}

.org-discovery-pulse span[b-9lswu4d4qq] {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    padding: 0 1.1rem;
    border-left: 1px solid rgba(255,255,255,.1);
    color: rgba(244,239,255,.5);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.org-discovery-pulse span:first-child[b-9lswu4d4qq] { padding-left: 0; border-left: 0; }
.org-discovery-pulse strong[b-9lswu4d4qq] { color: #fff; font: 400 1.9rem/1 var(--font-display, sans-serif); letter-spacing: .04em; }

.org-discovery-loading[b-9lswu4d4qq] {
    min-height: 16rem;
    display: grid;
    place-items: center;
    align-content: center;
    gap: .8rem;
    color: var(--wl-text-secondary);
}

.org-discovery-loader[b-9lswu4d4qq] {
    width: 2.15rem;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 2px solid rgba(var(--org-accent-rgb), .2);
    border-top-color: var(--org-accent);
    animation: discovery-spin-b-9lswu4d4qq .8s linear infinite;
}

.org-discovery-controls[b-9lswu4d4qq] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1rem;
    padding: .75rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), .1);
    border-radius: 15px;
    background: rgba(var(--wl-contrast-rgb), .025);
}

.org-discovery-modes[b-9lswu4d4qq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
}

.org-discovery-mode[b-9lswu4d4qq] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .7rem;
    min-height: 4rem;
    padding: .7rem .9rem;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--wl-text-secondary);
    text-align: left;
    background: transparent;
    cursor: pointer;
}

.org-discovery-mode:hover[b-9lswu4d4qq] { background: rgba(var(--wl-contrast-rgb), .035); }
.org-discovery-mode:focus-visible[b-9lswu4d4qq] { outline: 2px solid var(--org-accent); outline-offset: 2px; }
.org-discovery-mode--active[b-9lswu4d4qq] { border-color: rgba(var(--org-accent-rgb), .35); color: var(--wl-text-primary); background: rgba(var(--org-accent-rgb), .1); }
.org-discovery-mode .org-ic[b-9lswu4d4qq] { width: 1.35rem; height: 1.35rem; color: var(--org-accent); }
.org-discovery-mode > span:last-child[b-9lswu4d4qq] { display: grid; gap: .08rem; }
.org-discovery-mode strong[b-9lswu4d4qq] { font-size: .9rem; }
.org-discovery-mode small[b-9lswu4d4qq] { color: var(--wl-text-muted); font-size: .72rem; line-height: 1.35; }

.org-discovery-filters[b-9lswu4d4qq] {
    display: flex;
    align-items: end;
    gap: .55rem;
}

.org-discovery-filters .org-field[b-9lswu4d4qq] { min-width: 10rem; }
.org-filter-reset[b-9lswu4d4qq] { min-height: 2.7rem; padding: 0 .7rem; border: 0; color: var(--org-accent-2); font: 700 .78rem/1 inherit; background: transparent; cursor: pointer; }
.org-filter-reset:hover[b-9lswu4d4qq] { text-decoration: underline; }
.org-filter-reset:focus-visible[b-9lswu4d4qq] { outline: 2px solid var(--org-accent); outline-offset: 2px; }

@keyframes discovery-spin-b-9lswu4d4qq { to { transform: rotate(360deg); } }

@media (max-width: 920px) {
    .org-discovery-hero[b-9lswu4d4qq], .org-discovery-controls[b-9lswu4d4qq] { grid-template-columns: 1fr; }
    .org-discovery-hero-actions[b-9lswu4d4qq] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .org-discovery-filters[b-9lswu4d4qq] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .org-filter-reset[b-9lswu4d4qq] { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 560px) {
    .org-discovery-hero[b-9lswu4d4qq] { border-radius: 16px; }
    .org-discovery-hero-actions[b-9lswu4d4qq], .org-discovery-modes[b-9lswu4d4qq], .org-discovery-filters[b-9lswu4d4qq] { grid-template-columns: 1fr; }
    .org-discovery-pulse[b-9lswu4d4qq] { grid-template-columns: 1fr; gap: .8rem; }
    .org-discovery-pulse span[b-9lswu4d4qq], .org-discovery-pulse span:first-child[b-9lswu4d4qq] { padding: 0; border-left: 0; }
    .org-discovery-mode[b-9lswu4d4qq] { min-height: 4.5rem; }
    .org-filter-reset[b-9lswu4d4qq] { grid-column: 1; min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .org-discovery-loader[b-9lswu4d4qq] { animation: none; }
}
/* /Components/Pages/World/Events/Invitation.razor.rz.scp.css */
.invitation-page[b-2rch3ks81h] {
    --inv-surface: rgba(var(--wl-contrast-rgb), 0.035);
    --inv-border: rgba(var(--wl-contrast-rgb), 0.12);
    max-width: 1120px;
    gap: 1.25rem;
}

.invitation-loading[b-2rch3ks81h] {
    min-height: 10rem;
    place-items: center;
    align-content: center;
    text-align: center;
}

.invitation-loading .org-ic[b-2rch3ks81h] {
    width: 2rem;
    height: 2rem;
    color: var(--org-accent);
    animation: invitation-pulse-b-2rch3ks81h 1.4s ease-in-out infinite;
}

.invitation-not-found[b-2rch3ks81h] {
    min-height: 18rem;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.invitation-not-found h1[b-2rch3ks81h],
.invitation-not-found p[b-2rch3ks81h] {
    margin: 0;
}

.invitation-not-found p[b-2rch3ks81h] {
    max-width: 34rem;
    color: var(--wl-text-secondary);
}

.invitation-poster[b-2rch3ks81h] {
    min-height: 25rem;
    padding: clamp(1.5rem, 5vw, 3.75rem) clamp(1.1rem, 5vw, 4rem);
    gap: 0.55rem;
    isolation: isolate;
}

.invitation-poster[b-2rch3ks81h]::after {
    content: '';
    position: absolute;
    inset: 1rem;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 9px;
    pointer-events: none;
}

.invitation-poster-topline[b-2rch3ks81h] {
    position: absolute;
    inset: 1.3rem 1.4rem auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: calc(100% - 2.8rem);
}

.invitation-kicker[b-2rch3ks81h] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 237, 255, 0.7);
}

.invitation-kicker .org-ic[b-2rch3ks81h] {
    width: 1rem;
    height: 1rem;
    color: #c4b5fd;
}

.invitation-poster .org-poster-presents[b-2rch3ks81h] {
    display: inline-flex;
    align-items: center;
    gap: 0.65em;
    margin-top: 2rem;
}

.invitation-poster .org-poster-separator[b-2rch3ks81h] {
    color: rgba(196, 181, 253, 0.72);
    letter-spacing: 0;
}

.invitation-poster .org-poster-title[b-2rch3ks81h] {
    max-width: 22ch;
    font-size: clamp(2.5rem, 7vw, 4.8rem);
    text-wrap: balance;
}

.invitation-event-type[b-2rch3ks81h] {
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fb7185;
}

.invitation-host[b-2rch3ks81h] {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    margin-top: 0.15rem;
    padding: 0.45rem 0.75rem 0.45rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.055);
    backdrop-filter: blur(10px);
}

.invitation-host-avatar[b-2rch3ks81h] {
    width: 2.4rem;
    height: 2.4rem;
    overflow: hidden;
    border: 1px solid rgba(196, 181, 253, 0.55);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
}

.invitation-host-avatar img[b-2rch3ks81h] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.invitation-host > div[b-2rch3ks81h] {
    display: grid;
    justify-items: start;
    line-height: 1.1;
}

.invitation-host span[b-2rch3ks81h] {
    font-size: 0.58rem;
    font-weight: 750;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(242, 237, 255, 0.55);
}

.invitation-host a[b-2rch3ks81h] {
    color: #f2edff;
    font-size: 0.83rem;
    font-weight: 750;
    text-decoration: none;
}

.invitation-host a:hover[b-2rch3ks81h] {
    color: #c4b5fd;
}

.invitation-poster-facts[b-2rch3ks81h] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem 1rem;
    margin-top: 0.45rem;
    font-size: 0.72rem;
    font-weight: 650;
    color: rgba(242, 237, 255, 0.65);
}

.invitation-poster-facts span[b-2rch3ks81h] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.invitation-poster-facts .org-ic[b-2rch3ks81h] {
    width: 0.9rem;
    height: 0.9rem;
    color: #c4b5fd;
}

.invitation-feedback[b-2rch3ks81h] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.25rem;
    padding: 0.8rem 1rem;
    border-radius: 11px;
}

.invitation-feedback--success[b-2rch3ks81h] {
    border: 1px solid rgba(52, 211, 153, 0.35);
    background: rgba(52, 211, 153, 0.08);
    color: var(--wl-text-primary);
}

.invitation-feedback .org-ic[b-2rch3ks81h] {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
}

.invitation-feedback--success .org-ic[b-2rch3ks81h] {
    color: #34d399;
}

.invitation-primary-grid[b-2rch3ks81h] {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.75fr);
    gap: 1rem;
    align-items: stretch;
}

.invitation-next[b-2rch3ks81h],
.invitation-timing[b-2rch3ks81h],
.invitation-card[b-2rch3ks81h] {
    background:
        radial-gradient(80% 100% at 0 0, rgba(var(--org-accent-rgb), 0.08), transparent 58%),
        var(--inv-surface);
    border-color: var(--inv-border);
}

.invitation-next[b-2rch3ks81h] {
    position: relative;
    align-content: start;
    min-height: 18rem;
    padding: clamp(1.35rem, 3vw, 2rem);
    overflow: hidden;
    border-color: rgba(var(--org-accent-rgb), 0.28);
}

.invitation-next[b-2rch3ks81h]::after {
    content: '';
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
    background: rgba(var(--org-hot-rgb), 0.06);
    filter: blur(2px);
    pointer-events: none;
}

.invitation-next > *[b-2rch3ks81h] {
    position: relative;
    z-index: 1;
}

.invitation-next > p[b-2rch3ks81h] {
    max-width: 58ch;
    margin: 0;
    color: var(--wl-text-secondary);
    line-height: 1.6;
}

.invitation-section-heading[b-2rch3ks81h] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.invitation-section-icon[b-2rch3ks81h] {
    display: inline-grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    flex: 0 0 auto;
    padding: 0.7rem;
    border: 1px solid rgba(var(--org-accent-rgb), 0.32);
    border-radius: 12px;
    background: rgba(var(--org-accent-rgb), 0.09);
    color: var(--org-accent-2);
}

.invitation-section-icon[b-2rch3ks81h]  svg {
    width: 100%;
    height: 100%;
}

.invitation-section-heading h2[b-2rch3ks81h] {
    margin: 0.1rem 0 0;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.045em;
    text-wrap: balance;
}

.invitation-section-heading--compact .invitation-section-icon[b-2rch3ks81h] {
    width: 2.35rem;
    height: 2.35rem;
    padding: 0.58rem;
    border-radius: 10px;
}

.invitation-section-heading--compact h2[b-2rch3ks81h] {
    font-size: 1.35rem;
}

.invitation-overline[b-2rch3ks81h] {
    display: block;
    color: var(--org-accent-2);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.invitation-main-cta[b-2rch3ks81h] {
    width: fit-content;
    min-height: 3rem;
    padding-inline: 1.5rem;
}

.invitation-response-actions[b-2rch3ks81h] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    margin-top: 0.25rem;
}

.invitation-donation[b-2rch3ks81h] {
    max-width: 24rem;
    margin-top: 0.15rem;
}

.invitation-money-input[b-2rch3ks81h] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.14);
    border-radius: 9px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

.invitation-money-input:focus-within[b-2rch3ks81h] {
    border-color: rgba(var(--org-accent-rgb), 0.65);
    box-shadow: 0 0 0 3px rgba(var(--org-accent-rgb), 0.16);
}

.org-field .invitation-money-input input[b-2rch3ks81h] {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.invitation-money-input > span[b-2rch3ks81h] {
    padding: 0 0.85rem;
    color: var(--wl-text-secondary);
    font-size: 0.78rem;
    font-weight: 750;
}

.invitation-cost-warning[b-2rch3ks81h] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    max-width: 52ch;
    padding: 0.65rem 0.8rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 9px;
    background: rgba(var(--wl-gold-rgb), 0.06);
    color: var(--wl-text-primary) !important;
    font-size: 0.82rem;
}

.invitation-cost-warning .org-ic[b-2rch3ks81h] {
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: var(--wl-gold);
}

.invitation-timing[b-2rch3ks81h] {
    position: relative;
    align-content: start;
    overflow: hidden;
    padding: 1.35rem;
}

.invitation-time-number[b-2rch3ks81h] {
    position: absolute;
    right: -0.15rem;
    top: 3.7rem;
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 8.5rem;
    line-height: 1;
    color: rgba(var(--org-accent-rgb), 0.07);
    pointer-events: none;
}

.invitation-timing > p[b-2rch3ks81h] {
    position: relative;
    min-height: 3rem;
    margin: 0;
    color: var(--wl-text-secondary);
    font-size: 0.85rem;
    line-height: 1.55;
}

.invitation-mini-facts[b-2rch3ks81h] {
    position: relative;
    display: grid;
    gap: 0;
    margin: 0;
}

.invitation-mini-facts > div[b-2rch3ks81h] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid var(--inv-border);
}

.invitation-mini-facts > div:last-child[b-2rch3ks81h] {
    border-bottom: 0;
}

.invitation-mini-facts dt[b-2rch3ks81h] {
    color: var(--wl-text-secondary);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.invitation-mini-facts dd[b-2rch3ks81h] {
    margin: 0;
    font-weight: 800;
    text-align: right;
}

.invitation-detail-grid[b-2rch3ks81h] {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.invitation-card[b-2rch3ks81h] {
    align-content: start;
    padding: 1.25rem;
}

.invitation-card > p[b-2rch3ks81h] {
    margin: 0;
    color: var(--wl-text-secondary);
    font-size: 0.84rem;
    line-height: 1.55;
}

.invitation-steps[b-2rch3ks81h] {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.invitation-steps li[b-2rch3ks81h] {
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--inv-border);
}

.invitation-steps li:last-child[b-2rch3ks81h] {
    border-bottom: 0;
}

.invitation-step-marker[b-2rch3ks81h] {
    display: inline-grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.2);
    border-radius: 50%;
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    font-weight: 900;
}

.is-complete .invitation-step-marker[b-2rch3ks81h] {
    border-color: rgba(52, 211, 153, 0.4);
    background: rgba(52, 211, 153, 0.1);
    color: #34d399;
}

.invitation-step-copy[b-2rch3ks81h] {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.invitation-step-copy strong[b-2rch3ks81h] {
    font-size: 0.82rem;
}

.invitation-step-copy small[b-2rch3ks81h] {
    color: var(--wl-text-muted);
    font-size: 0.68rem;
    line-height: 1.35;
}

.invitation-step-status[b-2rch3ks81h] {
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-muted);
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.is-complete .invitation-step-status[b-2rch3ks81h] {
    background: rgba(52, 211, 153, 0.08);
    color: #34d399;
}

.invitation-reward-pills[b-2rch3ks81h] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.invitation-reward-pills span[b-2rch3ks81h] {
    display: grid;
    gap: 0.05rem;
    padding: 0.7rem;
    border: 1px solid rgba(var(--org-accent-rgb), 0.18);
    border-radius: 9px;
    background: rgba(var(--org-accent-rgb), 0.06);
    color: var(--wl-text-secondary);
    font-size: 0.66rem;
}

.invitation-reward-pills strong[b-2rch3ks81h] {
    color: var(--org-accent-2);
    font-family: var(--font-display, 'Bebas Neue', sans-serif);
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
}

.invitation-bonus[b-2rch3ks81h] {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--inv-border);
}

.invitation-bonus .org-ic[b-2rch3ks81h] {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    margin-top: 0.1rem;
    color: var(--wl-gold);
}

.invitation-cost-list[b-2rch3ks81h] {
    display: grid;
    gap: 0;
    margin: 0;
}

.invitation-cost-list > div[b-2rch3ks81h] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--inv-border);
}

.invitation-cost-list dt[b-2rch3ks81h] {
    color: var(--wl-text-secondary);
    font-size: 0.74rem;
}

.invitation-cost-list dd[b-2rch3ks81h] {
    margin: 0;
    color: var(--wl-text-primary);
    font-weight: 850;
    text-align: right;
}

.invitation-cost-footnote[b-2rch3ks81h] {
    font-size: 0.7rem !important;
}

.invitation-page a:focus-visible[b-2rch3ks81h],
.invitation-page button:focus-visible[b-2rch3ks81h],
.invitation-page input:focus-visible[b-2rch3ks81h] {
    outline: 3px solid var(--org-accent);
    outline-offset: 3px;
}

@keyframes invitation-pulse-b-2rch3ks81h {
    0%, 100% { opacity: 0.45; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.04); }
}

@media (max-width: 900px) {
    .invitation-primary-grid[b-2rch3ks81h],
    .invitation-detail-grid[b-2rch3ks81h] {
        grid-template-columns: 1fr;
    }

    .invitation-timing[b-2rch3ks81h] {
        min-height: auto;
    }

    .invitation-detail-grid[b-2rch3ks81h] {
        align-items: start;
    }
}

@media (max-width: 620px) {
    .invitation-page[b-2rch3ks81h] {
        gap: 1rem;
    }

    .invitation-poster[b-2rch3ks81h] {
        min-height: 27rem;
        padding-top: 5.4rem;
    }

    .invitation-poster[b-2rch3ks81h]::after {
        inset: 0.65rem;
    }

    .invitation-poster-topline[b-2rch3ks81h] {
        inset: 1.25rem 1.2rem auto;
        width: calc(100% - 2.4rem);
        align-items: flex-start;
    }

    .invitation-kicker[b-2rch3ks81h] {
        max-width: 9rem;
    }

    .invitation-poster .org-poster-presents[b-2rch3ks81h] {
        margin-top: 0;
        letter-spacing: 0.2em;
    }

    .invitation-poster .org-poster-city[b-2rch3ks81h] {
        letter-spacing: 0.14em;
        line-height: 1.5;
    }

    .invitation-host[b-2rch3ks81h] {
        max-width: calc(100% - 1rem);
    }

    .invitation-next[b-2rch3ks81h],
    .invitation-timing[b-2rch3ks81h],
    .invitation-card[b-2rch3ks81h] {
        padding: 1.15rem;
    }

    .invitation-main-cta[b-2rch3ks81h],
    .invitation-response-actions[b-2rch3ks81h],
    .invitation-response-actions .org-btn[b-2rch3ks81h] {
        width: 100%;
    }

    .invitation-response-actions .org-btn[b-2rch3ks81h] {
        min-height: 2.85rem;
    }

    .invitation-reward-pills[b-2rch3ks81h] {
        grid-template-columns: 1fr 1fr;
    }

    .invitation-steps li[b-2rch3ks81h] {
        grid-template-columns: 1.6rem minmax(0, 1fr);
    }

    .invitation-step-status[b-2rch3ks81h] {
        grid-column: 2;
        justify-self: start;
        margin-top: -0.25rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .invitation-loading .org-ic[b-2rch3ks81h] {
        animation: none;
    }

    .invitation-page *[b-2rch3ks81h],
    .invitation-page *[b-2rch3ks81h]::before,
    .invitation-page *[b-2rch3ks81h]::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* /Components/Pages/World/Events/MyEvents.razor.rz.scp.css */
.org-my-events[b-x0yvhru6vc] { max-width: 1280px; }
.org-my-events-hero[b-x0yvhru6vc] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem; padding: clamp(1.25rem, 4vw, 2.2rem); border: 1px solid rgba(var(--org-accent-rgb),.3); border-radius: 18px; color: #f4efff; background: radial-gradient(90% 140% at 0 0, rgba(167,139,250,.28), transparent 62%), linear-gradient(145deg,#181029,#0c0915); box-shadow: 0 22px 60px rgba(0,0,0,.3); }
.org-my-events-hero .org-title[b-x0yvhru6vc] { margin-top: .45rem; color: #fff; font-size: clamp(2.5rem,7vw,4.8rem); }
.org-my-events-hero p[b-x0yvhru6vc] { max-width: 44rem; margin: .6rem 0 0; color: rgba(244,239,255,.65); line-height: 1.6; }
.org-my-events-summary[b-x0yvhru6vc] { display: grid; grid-template-columns: repeat(3, minmax(5.5rem,1fr)); }
.org-my-events-summary span[b-x0yvhru6vc] { display: grid; gap: .15rem; padding: 0 .9rem; border-left: 1px solid rgba(255,255,255,.1); color: rgba(244,239,255,.48); font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.org-my-events-summary strong[b-x0yvhru6vc] { color: #fff; font: 400 1.8rem/1 var(--font-display,sans-serif); }
.org-my-events-more[b-x0yvhru6vc] { display: flex; justify-content: center; padding: .5rem 0 1.5rem; }
@media (max-width: 760px) { .org-my-events-hero[b-x0yvhru6vc] { grid-template-columns: 1fr; } .org-my-events-summary span:first-child[b-x0yvhru6vc] { padding-left: 0; border-left: 0; } }
@media (max-width: 440px) { .org-my-events-summary[b-x0yvhru6vc] { grid-template-columns: 1fr; gap: .65rem; } .org-my-events-summary span[b-x0yvhru6vc], .org-my-events-summary span:first-child[b-x0yvhru6vc] { padding: 0; border-left: 0; } }
/* /Components/Pages/World/Scandals/Detail.razor.rz.scp.css */
.scandal-detail-page[b-dbw6cva0vw] {
    --detail-stage-rgb: 245, 158, 11;
    --detail-positive-rgb: 34, 197, 94;
    --detail-negative-rgb: 239, 68, 68;
    max-width: 1080px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.scandal-detail-page--blazing[b-dbw6cva0vw] {
    --detail-stage-rgb: 249, 115, 22;
}

.scandal-detail-page--inferno[b-dbw6cva0vw] {
    --detail-stage-rgb: 239, 68, 68;
}

.scandal-detail-page--resolved[b-dbw6cva0vw] {
    --detail-stage-rgb: 100, 116, 139;
}

.scandal-detail-page--permanent[b-dbw6cva0vw] {
    --detail-stage-rgb: var(--wl-gold-rgb);
}

.scandal-detail-back[b-dbw6cva0vw] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 1rem;
    color: var(--wl-text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
}

.scandal-detail-back:hover[b-dbw6cva0vw] {
    color: var(--wl-gold);
}

.scandal-detail-back svg[b-dbw6cva0vw] {
    width: 17px;
    height: 17px;
}

.scandal-detail-hero[b-dbw6cva0vw],
.scandal-detail-section[b-dbw6cva0vw],
.scandal-detail-not-found[b-dbw6cva0vw],
.scandal-detail-error[b-dbw6cva0vw] {
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.9rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.66);
}

.scandal-detail-hero[b-dbw6cva0vw] {
    position: relative;
    overflow: hidden;
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border-top: 3px solid rgb(var(--detail-stage-rgb));
    background:
        radial-gradient(circle at 90% 0%, rgba(var(--detail-stage-rgb), 0.2), transparent 42%),
        rgba(var(--wl-bg-secondary-rgb), 0.72);
}

.scandal-detail-pills[b-dbw6cva0vw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.9rem;
}

.scandal-detail-pill[b-dbw6cva0vw],
.scandal-detail-role[b-dbw6cva0vw] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: var(--wl-text-secondary);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.scandal-detail-pill--stage[b-dbw6cva0vw] {
    border-color: rgba(var(--detail-stage-rgb), 0.35);
    background: rgba(var(--detail-stage-rgb), 0.13);
    color: rgb(var(--detail-stage-rgb));
}

.scandal-detail-hero h1[b-dbw6cva0vw] {
    max-width: 850px;
    margin: 0;
    color: var(--wl-text-primary);
    font-size: clamp(1.55rem, 4vw, 2.65rem);
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.scandal-detail-summary[b-dbw6cva0vw] {
    max-width: 820px;
    margin: 0.9rem 0 0;
    color: var(--wl-text-secondary);
    font-size: 0.95rem;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.scandal-detail-hashtag[b-dbw6cva0vw] {
    display: inline-block;
    margin-top: 0.75rem;
    color: rgb(var(--wl-cyan-rgb));
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.scandal-detail-hashtag:hover[b-dbw6cva0vw] {
    text-decoration: underline;
}

.scandal-detail-meters[b-dbw6cva0vw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.35rem;
}

.scandal-detail-meter-heading[b-dbw6cva0vw] {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
}

.scandal-detail-meter-heading strong[b-dbw6cva0vw] {
    color: rgb(var(--detail-stage-rgb));
    font-variant-numeric: tabular-nums;
}

.scandal-detail-meter--fatigue .scandal-detail-meter-heading strong[b-dbw6cva0vw] {
    color: var(--wl-text-primary);
}

.scandal-detail-meter-track[b-dbw6cva0vw] {
    height: 8px;
    margin-top: 0.4rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.1);
}

.scandal-detail-meter-fill[b-dbw6cva0vw] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--detail-stage-rgb), 0.65), rgb(var(--detail-stage-rgb)));
}

.scandal-detail-meter--fatigue .scandal-detail-meter-fill[b-dbw6cva0vw] {
    background: linear-gradient(90deg, rgba(var(--wl-contrast-rgb), 0.35), rgba(var(--wl-contrast-rgb), 0.72));
}

.scandal-detail-section[b-dbw6cva0vw] {
    margin-top: 1rem;
    padding: 1.2rem;
}

.scandal-detail-section > h2[b-dbw6cva0vw],
.scandal-detail-section-heading h2[b-dbw6cva0vw] {
    margin: 0 0 1rem;
    color: var(--wl-text-primary);
    font-size: 1.05rem;
}

.scandal-detail-section-heading[b-dbw6cva0vw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.scandal-detail-section-heading > span[b-dbw6cva0vw] {
    color: var(--wl-text-muted);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.scandal-detail-metadata[b-dbw6cva0vw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 0;
}

.scandal-detail-metadata > div[b-dbw6cva0vw],
.scandal-detail-impact-grid > div[b-dbw6cva0vw] {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.65rem;
    background: rgba(var(--wl-contrast-rgb), 0.035);
}

.scandal-detail-metadata dt[b-dbw6cva0vw],
.scandal-detail-impact-grid span[b-dbw6cva0vw] {
    color: var(--wl-text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.scandal-detail-metadata dd[b-dbw6cva0vw] {
    margin: 0.28rem 0 0;
    color: var(--wl-text-primary);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.scandal-detail-metadata a[b-dbw6cva0vw],
.scandal-detail-event-header a[b-dbw6cva0vw],
.scandal-detail-source-post a[b-dbw6cva0vw],
.scandal-detail-replies a[b-dbw6cva0vw] {
    color: rgb(var(--wl-cyan-rgb));
    text-decoration: none;
}

.scandal-detail-metadata a:hover[b-dbw6cva0vw],
.scandal-detail-event-header a:hover[b-dbw6cva0vw],
.scandal-detail-source-post a:hover[b-dbw6cva0vw],
.scandal-detail-replies a:hover[b-dbw6cva0vw] {
    text-decoration: underline;
}

.scandal-detail-stigma[b-dbw6cva0vw] {
    display: flex;
    gap: 0.55rem;
    margin-top: 0.8rem;
    padding: 0.75rem;
    border-left: 3px solid var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-text-secondary);
    font-size: 0.82rem;
}

.scandal-detail-stigma strong[b-dbw6cva0vw] {
    color: var(--wl-gold);
    white-space: nowrap;
}

.scandal-detail-participants[b-dbw6cva0vw] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.scandal-detail-participant[b-dbw6cva0vw] {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    background: rgba(var(--wl-bg-primary-rgb), 0.34);
}

.scandal-detail-participant-header[b-dbw6cva0vw] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.scandal-detail-avatar[b-dbw6cva0vw] {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    overflow: hidden;
    border: 2px solid rgba(var(--detail-stage-rgb), 0.5);
    border-radius: 50%;
}

.scandal-detail-avatar img[b-dbw6cva0vw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scandal-detail-participant-header > div[b-dbw6cva0vw] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
}

.scandal-detail-participant-name[b-dbw6cva0vw] {
    color: var(--wl-text-primary);
    font-weight: 750;
    overflow-wrap: anywhere;
    text-decoration: none;
}

.scandal-detail-participant-name:hover[b-dbw6cva0vw] {
    color: var(--wl-gold);
}

.scandal-detail-handle[b-dbw6cva0vw] {
    color: var(--wl-text-muted);
    font-size: 0.72rem;
}

.scandal-detail-role[b-dbw6cva0vw] {
    flex-shrink: 0;
    color: rgb(var(--detail-stage-rgb));
}

.scandal-detail-impact-grid[b-dbw6cva0vw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 0.85rem;
}

.scandal-detail-impact-grid > div[b-dbw6cva0vw] {
    padding: 0.55rem;
}

.scandal-detail-impact-grid strong[b-dbw6cva0vw] {
    display: block;
    margin-top: 0.2rem;
    color: var(--wl-text-primary);
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}

.scandal-detail-impact-grid small[b-dbw6cva0vw] {
    display: block;
    margin-top: 0.15rem;
    color: var(--wl-text-muted);
    font-size: 0.62rem;
    line-height: 1.3;
}

.scandal-detail-fans[b-dbw6cva0vw],
.scandal-detail-effects[b-dbw6cva0vw] {
    margin-top: 0.9rem;
}

.scandal-detail-fans h3[b-dbw6cva0vw],
.scandal-detail-effects h3[b-dbw6cva0vw],
.scandal-detail-replies h3[b-dbw6cva0vw] {
    margin: 0 0 0.55rem;
    color: var(--wl-text-secondary);
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.scandal-detail-fans-current[b-dbw6cva0vw] {
    display: flex;
    justify-content: space-between;
    margin: 0 0 0.45rem;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
}

.scandal-detail-fans-current strong[b-dbw6cva0vw] {
    color: var(--wl-text-primary);
}

.scandal-detail-fan-tiers[b-dbw6cva0vw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
}

.scandal-detail-fan-tiers > div[b-dbw6cva0vw] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 0.55rem;
    border-radius: 0.55rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.scandal-detail-fan-tiers span[b-dbw6cva0vw] {
    color: var(--wl-text-muted);
    font-size: 0.64rem;
}

.scandal-detail-fan-tiers strong[b-dbw6cva0vw] {
    margin-top: 0.16rem;
    color: var(--wl-text-primary);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.scandal-detail-fan-tiers small[b-dbw6cva0vw] {
    margin-top: 0.16rem;
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
}

.scandal-detail-impact-note[b-dbw6cva0vw],
.scandal-detail-effects > p[b-dbw6cva0vw] {
    margin: 0.5rem 0 0;
    color: var(--wl-text-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.scandal-detail-effects ul[b-dbw6cva0vw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.scandal-detail-effects li[b-dbw6cva0vw] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 999px;
    color: var(--wl-text-secondary);
    font-size: 0.7rem;
}

.scandal-detail-effects strong[b-dbw6cva0vw] {
    font-variant-numeric: tabular-nums;
}

.positive[b-dbw6cva0vw] {
    color: rgb(var(--detail-positive-rgb)) !important;
}

.negative[b-dbw6cva0vw] {
    color: rgb(var(--detail-negative-rgb)) !important;
}

.neutral[b-dbw6cva0vw] {
    color: var(--wl-text-muted) !important;
}

.scandal-detail-timeline-list[b-dbw6cva0vw] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
    padding: 0 0 0 1.5rem;
    list-style: none;
}

.scandal-detail-timeline-list[b-dbw6cva0vw]::before {
    content: "";
    position: absolute;
    top: 0.4rem;
    bottom: 0.4rem;
    left: 4px;
    width: 2px;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.13);
}

.scandal-detail-timeline-entry[b-dbw6cva0vw] {
    --event-rgb: var(--detail-stage-rgb);
    position: relative;
}

.scandal-detail-timeline-entry--negative[b-dbw6cva0vw] {
    --event-rgb: var(--wl-cyan-rgb);
}

.scandal-detail-timeline-dot[b-dbw6cva0vw] {
    position: absolute;
    top: 0.55rem;
    left: -1.5rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgb(var(--event-rgb));
    box-shadow: 0 0 0 4px rgba(var(--event-rgb), 0.16);
}

.scandal-detail-timeline-entry > article[b-dbw6cva0vw] {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.7rem;
    background: rgba(var(--wl-bg-primary-rgb), 0.28);
}

.scandal-detail-event-header[b-dbw6cva0vw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.scandal-detail-event-header > div:first-child[b-dbw6cva0vw] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    color: var(--wl-text-primary);
    font-size: 0.82rem;
}

.scandal-detail-event-meta[b-dbw6cva0vw] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.55rem;
    color: var(--wl-text-muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
}

.scandal-detail-source-post[b-dbw6cva0vw] {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-left: 3px solid rgba(var(--event-rgb), 0.7);
    border-radius: 0.45rem;
    background: rgba(var(--wl-contrast-rgb), 0.045);
}

.scandal-detail-origin .scandal-detail-source-post[b-dbw6cva0vw] {
    --event-rgb: var(--detail-stage-rgb);
}

.scandal-detail-source-post > header[b-dbw6cva0vw],
.scandal-detail-replies li > header[b-dbw6cva0vw] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--wl-text-primary);
    font-size: 0.73rem;
}

.scandal-detail-source-post time[b-dbw6cva0vw],
.scandal-detail-replies time[b-dbw6cva0vw] {
    flex-shrink: 0;
    color: var(--wl-text-muted);
    font-size: 0.66rem;
}

.scandal-detail-source-content[b-dbw6cva0vw],
.scandal-detail-reply-content[b-dbw6cva0vw] {
    margin: 0.55rem 0;
    color: var(--wl-text-secondary);
    font-size: 0.8rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.scandal-detail-source-content[b-dbw6cva0vw]  p,
.scandal-detail-reply-content[b-dbw6cva0vw]  p {
    margin: 0;
}

.scandal-detail-source-content[b-dbw6cva0vw]  a,
.scandal-detail-reply-content[b-dbw6cva0vw]  a {
    color: rgb(var(--wl-cyan-rgb));
}

.scandal-detail-source-link[b-dbw6cva0vw],
.scandal-detail-replies li > a[b-dbw6cva0vw] {
    font-size: 0.68rem;
    font-weight: 600;
}

.scandal-detail-replies[b-dbw6cva0vw] {
    margin-top: 0.8rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--wl-border-subtle);
}

.scandal-detail-replies ol[b-dbw6cva0vw] {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.scandal-detail-replies li[b-dbw6cva0vw] {
    padding: 0.6rem;
    border-radius: 0.45rem;
    background: rgba(var(--wl-contrast-rgb), 0.035);
}

.scandal-detail-source-unavailable[b-dbw6cva0vw] {
    margin: 0.7rem 0 0;
    color: var(--wl-text-muted);
    font-size: 0.73rem;
    font-style: italic;
}

.scandal-detail-loading[b-dbw6cva0vw] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 2rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.9rem;
}

.scandal-detail-loading-bar[b-dbw6cva0vw] {
    height: 1rem;
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    animation: scandal-detail-pulse-b-dbw6cva0vw 1.2s ease-in-out infinite;
}

.scandal-detail-loading-bar:nth-child(1)[b-dbw6cva0vw] { width: 55%; }
.scandal-detail-loading-bar:nth-child(2)[b-dbw6cva0vw] { width: 90%; }
.scandal-detail-loading-bar:nth-child(3)[b-dbw6cva0vw] { width: 75%; }

.scandal-detail-loading-label[b-dbw6cva0vw] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.scandal-detail-not-found[b-dbw6cva0vw],
.scandal-detail-error[b-dbw6cva0vw] {
    padding: 3rem 1.25rem;
    text-align: center;
}

.scandal-detail-not-found h1[b-dbw6cva0vw],
.scandal-detail-error h1[b-dbw6cva0vw] {
    margin: 0;
    color: var(--wl-text-primary);
}

.scandal-detail-not-found p[b-dbw6cva0vw],
.scandal-detail-error p[b-dbw6cva0vw] {
    margin: 0.6rem 0 0;
    color: var(--wl-text-secondary);
}

.scandal-detail-retry[b-dbw6cva0vw] {
    margin-top: 1.15rem;
    padding: 0.55rem 1rem;
    border: 1px solid rgba(var(--detail-stage-rgb), 0.45);
    border-radius: 0.5rem;
    background: rgba(var(--detail-stage-rgb), 0.12);
    color: var(--wl-text-primary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.scandal-detail-retry:hover[b-dbw6cva0vw],
.scandal-detail-retry:focus-visible[b-dbw6cva0vw] {
    border-color: rgb(var(--detail-stage-rgb));
    background: rgba(var(--detail-stage-rgb), 0.2);
}

@keyframes scandal-detail-pulse-b-dbw6cva0vw {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

@media (max-width: 850px) {
    .scandal-detail-metadata[b-dbw6cva0vw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scandal-detail-participants[b-dbw6cva0vw] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .scandal-detail-page[b-dbw6cva0vw] {
        padding: 1rem 0.7rem 2rem;
    }

    .scandal-detail-meters[b-dbw6cva0vw],
    .scandal-detail-metadata[b-dbw6cva0vw] {
        grid-template-columns: 1fr;
    }

    .scandal-detail-section[b-dbw6cva0vw] {
        padding: 0.9rem;
    }

    .scandal-detail-impact-grid[b-dbw6cva0vw],
    .scandal-detail-fan-tiers[b-dbw6cva0vw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scandal-detail-event-header[b-dbw6cva0vw] {
        flex-direction: column;
        gap: 0.4rem;
    }

    .scandal-detail-event-meta[b-dbw6cva0vw] {
        justify-content: flex-start;
    }

    .scandal-detail-role[b-dbw6cva0vw] {
        max-width: 40%;
        text-align: center;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scandal-detail-loading-bar[b-dbw6cva0vw] {
        animation: none;
    }
}
/* /Components/Pages/World/Scandals/Index.razor.rz.scp.css */
/* ========================================
   WORLD SCANDALS PAGE
   Stage accents are component-local tokens
   declared on the page root (never :root in
   scoped CSS - it compiles to :root[b-xxx]
   and matches nothing).
   ======================================== */

.world-scandals-page[b-xy8vn7rvf5] {
    --scandal-simmering-rgb: 245, 158, 11;
    --scandal-blazing-rgb: 249, 115, 22;
    --scandal-inferno-rgb: 239, 68, 68;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* --- Header --- */
.world-scandals-header[b-xy8vn7rvf5] {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* --- Ranked list --- */
.world-scandal-list[b-xy8vn7rvf5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.world-scandal-card[b-xy8vn7rvf5] {
    --stage-rgb: var(--scandal-simmering-rgb);
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    overflow: hidden;
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--wl-border-subtle);
    border-left: 3px solid rgb(var(--stage-rgb));
    border-radius: 0.75rem;
    background:
        linear-gradient(135deg, rgba(var(--stage-rgb), 0.08) 0%, transparent 45%),
        rgba(var(--wl-bg-secondary-rgb), 0.6);
}

.world-scandal-card--simmering[b-xy8vn7rvf5] {
    --stage-rgb: var(--scandal-simmering-rgb);
}

.world-scandal-card--blazing[b-xy8vn7rvf5] {
    --stage-rgb: var(--scandal-blazing-rgb);
}

.world-scandal-card--inferno[b-xy8vn7rvf5] {
    --stage-rgb: var(--scandal-inferno-rgb);
    box-shadow: 0 0 24px rgba(var(--stage-rgb), 0.15);
}

/* --- Rank numeral --- */
.world-scandal-rank[b-xy8vn7rvf5] {
    flex-shrink: 0;
    min-width: 2.5rem;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--wl-text-muted);
    opacity: 0.85;
}

/* Podium ranks glow gold. */
.world-scandal-card:nth-child(-n+3) .world-scandal-rank[b-xy8vn7rvf5] {
    color: var(--wl-gold);
    opacity: 1;
    text-shadow: 0 0 18px rgba(var(--wl-gold-rgb), 0.35);
}

.world-scandal-main[b-xy8vn7rvf5] {
    flex: 1;
    min-width: 0;
}

/* --- Pills --- */
.world-scandal-pills[b-xy8vn7rvf5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.scandal-pill[b-xy8vn7rvf5] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.scandal-pill svg[b-xy8vn7rvf5] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.scandal-pill-category[b-xy8vn7rvf5] {
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.07);
    border: 1px solid var(--wl-border-subtle);
}

.scandal-pill-stage[b-xy8vn7rvf5] {
    color: rgb(var(--stage-rgb));
    background: rgba(var(--stage-rgb), 0.12);
    border: 1px solid rgba(var(--stage-rgb), 0.25);
}

/* --- Title & summary --- */
.world-scandal-title[b-xy8vn7rvf5] {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wl-text-primary);
    overflow-wrap: anywhere;
}

.world-scandal-title a[b-xy8vn7rvf5] {
    color: inherit;
    text-decoration: none;
}

.world-scandal-title a:hover[b-xy8vn7rvf5] {
    color: var(--wl-gold);
}

.world-scandal-summary[b-xy8vn7rvf5] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    margin: 0 0 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--wl-text-secondary);
    overflow-wrap: anywhere;
}

/* --- Heat meter --- */
.world-scandal-heat-heading[b-xy8vn7rvf5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.world-scandal-heat-heading strong[b-xy8vn7rvf5] {
    color: rgb(var(--stage-rgb));
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.world-scandal-heat-track[b-xy8vn7rvf5] {
    height: 7px;
    margin-top: 0.4rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.09);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.world-scandal-heat-fill[b-xy8vn7rvf5] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--stage-rgb), 0.65), rgb(var(--stage-rgb)));
    box-shadow: 0 0 12px rgba(var(--stage-rgb), 0.35);
    transition: width 0.25s ease;
}

/* --- Participants --- */
.world-scandal-participants[b-xy8vn7rvf5] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.world-scandal-participant[b-xy8vn7rvf5] {
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 0.75rem;
    color: var(--wl-text-primary);
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border: 1px solid var(--wl-border-subtle);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.world-scandal-participant:hover[b-xy8vn7rvf5] {
    color: var(--wl-gold);
    border-color: var(--wl-gold-border);
}

/* --- Empty state --- */
.world-scandals-empty[b-xy8vn7rvf5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1.5rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.4);
    text-align: center;
}

.world-scandals-empty svg[b-xy8vn7rvf5] {
    width: 36px;
    height: 36px;
    color: var(--wl-text-muted);
    opacity: 0.7;
}

.world-scandals-empty p[b-xy8vn7rvf5] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--wl-text-secondary);
}

/* --- Loading skeleton --- */
.world-scandals-loading[b-xy8vn7rvf5] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.world-scandal-skeleton[b-xy8vn7rvf5] {
    height: 8.5rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    animation: world-scandal-pulse-b-xy8vn7rvf5 1.4s ease-in-out infinite;
}

@keyframes world-scandal-pulse-b-xy8vn7rvf5 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* --- Mobile: single column, no horizontal scroll --- */
@media (max-width: 600px) {
    .world-scandals-page[b-xy8vn7rvf5] {
        padding: 1.25rem 0.75rem;
    }

    .world-scandal-card[b-xy8vn7rvf5] {
        gap: 0.75rem;
        padding: 0.85rem 1rem 1rem;
    }

    .world-scandal-rank[b-xy8vn7rvf5] {
        min-width: 2rem;
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .world-scandal-heat-fill[b-xy8vn7rvf5] {
        transition: none;
    }

    .world-scandal-skeleton[b-xy8vn7rvf5] {
        animation: none;
    }
}
/* /Components/Shared/ActiveQuestsPanel.razor.rz.scp.css */
/* Active Quests Panel - Home Page Version */

.active-quests-panel[b-zhqzzuyoir] {
    background: linear-gradient(165deg,
        rgba(18, 18, 22, 0.95) 0%,
        rgba(12, 12, 16, 0.98) 100%);
    border: 1px solid var(--wl-gold-border);
    border-radius: 12px;
    overflow: hidden;
}

/* Header */
.panel-header[b-zhqzzuyoir] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        transparent 100%);
    border-bottom: 1px solid var(--wl-gold-bg-hover);
}

.header-icon[b-zhqzzuyoir] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, var(--wl-gold-border) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 6px;
}

.header-icon :deep(svg)[b-zhqzzuyoir] {
    width: 16px;
    height: 16px;
    color: var(--wl-gold);
}

.header-title[b-zhqzzuyoir] {
    flex: 1;
    font-family: 'Bebas Neue', 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wl-gold);
    margin: 0;
}

.quest-count[b-zhqzzuyoir] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 0.5rem;
    background: linear-gradient(135deg, var(--wl-gold) 0%, #b8960c 100%);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wl-bg-primary);
}

/* Empty State */
.empty-state[b-zhqzzuyoir] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1.5rem;
    text-align: center;
}

.empty-icon-wrap[b-zhqzzuyoir] {
    position: relative;
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
}

.empty-icon-wrap :deep(svg)[b-zhqzzuyoir] {
    width: 100%;
    height: 100%;
    color: rgba(var(--wl-gold-rgb), 0.25);
}

.empty-text[b-zhqzzuyoir] {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    margin: 0 0 0.25rem;
}

.empty-hint[b-zhqzzuyoir] {
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.35);
}

/* Quest List */
.quest-list[b-zhqzzuyoir] {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* Quest Card */
.quest-card[b-zhqzzuyoir] {
    padding: 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    transition: border-color 0.2s ease;
}

.quest-card:hover[b-zhqzzuyoir] {
    border-color: var(--wl-gold-border);
}

.quest-header[b-zhqzzuyoir] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
}

.quest-star[b-zhqzzuyoir] {
    width: 16px;
    height: 16px;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.quest-title[b-zhqzzuyoir] {
    flex: 1;
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    line-height: 1.3;
}

.quest-timer[b-zhqzzuyoir] {
    padding: 0.2rem 0.5rem;
    background: var(--wl-gold-bg);
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--wl-gold);
}

.quest-timer.urgent[b-zhqzzuyoir] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: #f87171;
    animation: pulse-b-zhqzzuyoir 1.5s ease-in-out infinite;
}

@keyframes pulse-b-zhqzzuyoir {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Progress */
.quest-progress[b-zhqzzuyoir] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.progress-bar[b-zhqzzuyoir] {
    flex: 1;
    height: 4px;
    background: var(--wl-border-medium);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill[b-zhqzzuyoir] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold), var(--wl-gold-light));
    border-radius: 2px;
    transition: width 0.3s ease;
}

.progress-text[b-zhqzzuyoir] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--wl-text-muted);
    font-variant-numeric: tabular-nums;
}

/* Objectives */
.quest-objectives[b-zhqzzuyoir] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.objective[b-zhqzzuyoir] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.objective.completed[b-zhqzzuyoir] {
    color: rgba(var(--wl-gold-rgb), 0.6);
}

.objective.completed .obj-text[b-zhqzzuyoir] {
    text-decoration: line-through;
    opacity: 0.7;
}

.obj-check[b-zhqzzuyoir] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-medium);
    border-radius: 3px;
    flex-shrink: 0;
}

.objective.completed .obj-check[b-zhqzzuyoir] {
    background: var(--wl-gold-border);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.obj-check :deep(svg)[b-zhqzzuyoir] {
    width: 10px;
    height: 10px;
    color: var(--wl-gold);
}

.obj-text[b-zhqzzuyoir] {
    flex: 1;
}

.obj-counter[b-zhqzzuyoir] {
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-variant-numeric: tabular-nums;
}

.more-objectives[b-zhqzzuyoir] {
    font-size: 0.7rem;
    color: rgba(var(--wl-gold-rgb), 0.6);
    padding-left: 1.75rem;
}
/* /Components/Shared/Artifacts/ArtifactCommentThread.razor.rz.scp.css */
.artifact-comments[b-31cn4wyiok] {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.artifact-comments-header h2[b-31cn4wyiok] {
    margin: 0;
    font-size: 1.25rem;
}

.artifact-comment-form[b-31cn4wyiok] {
    display: grid;
    gap: 0.75rem;
}

.artifact-comment-input[b-31cn4wyiok] {
    width: 100%;
    min-height: 96px;
    resize: vertical;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    padding: 0.85rem;
}

.artifact-comment-submit[b-31cn4wyiok],
.artifact-comments-more[b-31cn4wyiok] {
    justify-self: start;
    border: 0;
    border-radius: 8px;
    background: var(--color-accent, #d8b56d);
    color: #17130d;
    font-weight: 700;
    padding: 0.65rem 1rem;
}

.artifact-comment-submit:disabled[b-31cn4wyiok],
.artifact-comments-more:disabled[b-31cn4wyiok] {
    cursor: not-allowed;
    opacity: 0.55;
}

.artifact-comment-list[b-31cn4wyiok] {
    display: grid;
    gap: 0.85rem;
}

.artifact-comments-empty[b-31cn4wyiok] {
    color: var(--color-text-secondary, #b9b2a5);
}
/* /Components/Shared/BuzzRollModal.razor.rz.scp.css */
/* ============================================
   BUZZ ROLL MODAL - Celebrity Phone Frenzy
   Theme: Social media meltdown / breaking news
   Glass-morphism phone with scrolling feed
   ============================================ */

/* ============================================
   BACKDROP
   ============================================ */

.buzz-backdrop[b-a6vfpl1qoo] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: buzzBackdropIn-b-a6vfpl1qoo 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.buzz-backdrop-dim[b-a6vfpl1qoo] {
    background: var(--wl-overlay-bg);
}

@keyframes buzzBackdropIn-b-a6vfpl1qoo {
    from { opacity: 0; backdrop-filter: blur(0); }
    to   { opacity: 1; backdrop-filter: blur(12px); }
}

/* ============================================
   CONTAINER - Centers the phone
   ============================================ */

.buzz-container[b-a6vfpl1qoo] {
    position: relative;
    animation: buzzContainerIn-b-a6vfpl1qoo 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes buzzContainerIn-b-a6vfpl1qoo {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* ============================================
   PHONE FRAME - Glass-morphism device
   ============================================ */

.buzz-phone[b-a6vfpl1qoo] {
    position: relative;
    width: 340px;
    max-width: calc(100vw - 48px);
    height: 620px;
    max-height: calc(100vh - 80px);
    background: linear-gradient(
        165deg,
        rgba(var(--wl-bg-modal-rgb), 0.92) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.96) 100%
    );
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 2.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow:
        0 50px 100px -20px var(--wl-shadow-color),
        0 0 0 1px rgba(var(--wl-contrast-rgb), 0.05),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.06),
        0 0 80px -10px rgba(var(--wl-gold-rgb), 0.08);
    transition: box-shadow 0.6s ease;
}

.buzz-phone.phase-scrolling[b-a6vfpl1qoo] {
    box-shadow:
        0 50px 100px -20px var(--wl-shadow-color),
        0 0 0 1px rgba(var(--wl-contrast-rgb), 0.05),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.06),
        0 0 120px -10px rgba(var(--wl-gold-rgb), 0.15);
}

.buzz-phone.phase-result[b-a6vfpl1qoo] {
    box-shadow:
        0 50px 100px -20px var(--wl-shadow-color),
        0 0 0 1px rgba(var(--wl-contrast-rgb), 0.05),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.06),
        0 0 160px -10px rgba(var(--wl-gold-rgb), 0.2);
}

/* ============================================
   NOTCH
   ============================================ */

.buzz-notch[b-a6vfpl1qoo] {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 28px;
    background: var(--wl-overlay-bg);
    border-radius: 0 0 1.25rem 1.25rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buzz-notch-camera[b-a6vfpl1qoo] {
    width: 8px;
    height: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.15);
    border-radius: 50%;
    border: 1.5px solid rgba(var(--wl-contrast-rgb), 0.08);
}

/* ============================================
   STATUS BAR
   ============================================ */

.buzz-status-bar[b-a6vfpl1qoo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 28px 0;
    height: 36px;
    flex-shrink: 0;
    z-index: 5;
}

.buzz-status-time[b-a6vfpl1qoo] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    letter-spacing: 0.01em;
}

.buzz-status-icons[b-a6vfpl1qoo] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.buzz-signal[b-a6vfpl1qoo] {
    display: flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 10px;
}

.signal-bar[b-a6vfpl1qoo] {
    width: 3px;
    background: var(--wl-text-secondary);
    border-radius: 1px;
}

.sb-1[b-a6vfpl1qoo] { height: 3px; }
.sb-2[b-a6vfpl1qoo] { height: 5px; }
.sb-3[b-a6vfpl1qoo] { height: 7px; }
.sb-4[b-a6vfpl1qoo] { height: 10px; }

.buzz-battery[b-a6vfpl1qoo] {
    width: 20px;
    height: 9px;
    border: 1.5px solid var(--wl-text-secondary);
    border-radius: 2px;
    padding: 1px;
    position: relative;
}

.buzz-battery[b-a6vfpl1qoo]::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 4px;
    background: var(--wl-text-secondary);
    border-radius: 0 1px 1px 0;
}

.battery-fill[b-a6vfpl1qoo] {
    width: 75%;
    height: 100%;
    background: #4ade80;
    border-radius: 1px;
}

/* ============================================
   APP HEADER - "TRENDING" + LIVE indicator
   ============================================ */

.buzz-app-header[b-a6vfpl1qoo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px 8px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.buzz-app-title[b-a6vfpl1qoo] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.125rem;
    letter-spacing: 0.12em;
    color: var(--wl-gold);
}

.buzz-app-logo[b-a6vfpl1qoo] {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--wl-gold);
}

.buzz-live-indicator[b-a6vfpl1qoo] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #f87171;
    text-transform: uppercase;
    padding: 3px 8px;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 4px;
}

.buzz-live-dot[b-a6vfpl1qoo] {
    width: 6px;
    height: 6px;
    background: #f87171;
    border-radius: 50%;
    animation: buzzLivePulse-b-a6vfpl1qoo 1.2s ease-in-out infinite;
}

@keyframes buzzLivePulse-b-a6vfpl1qoo {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.4); }
    50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(248, 113, 113, 0); }
}

/* ============================================
   NOTIFICATION FEED - The scrolling heart
   ============================================ */

.buzz-feed[b-a6vfpl1qoo] {
    flex: 1;
    overflow: hidden;
    position: relative;
    padding: 0 12px;
}

.buzz-feed[b-a6vfpl1qoo]::before,
.buzz-feed[b-a6vfpl1qoo]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 40px;
    z-index: 2;
    pointer-events: none;
}

.buzz-feed[b-a6vfpl1qoo]::before {
    top: 0;
    background: linear-gradient(
        180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        transparent 100%
    );
}

.buzz-feed[b-a6vfpl1qoo]::after {
    bottom: 0;
    background: linear-gradient(
        0deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        transparent 100%
    );
}

.buzz-feed-scroll[b-a6vfpl1qoo] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
}

.buzz-feed-scroll.scrolling[b-a6vfpl1qoo] {
    animation: buzzScrollUp-b-a6vfpl1qoo 4s linear infinite;
}

.buzz-feed-scroll.slowing[b-a6vfpl1qoo] {
    animation: buzzScrollSlow-b-a6vfpl1qoo 3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.buzz-feed-scroll.stopped[b-a6vfpl1qoo] {
    animation: none;
}

@keyframes buzzScrollUp-b-a6vfpl1qoo {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

@keyframes buzzScrollSlow-b-a6vfpl1qoo {
    from { transform: translateY(-20%); }
    to   { transform: translateY(-35%); }
}

/* ============================================
   NOTIFICATION CARD
   ============================================ */

.buzz-notification[b-a6vfpl1qoo] {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
    border-radius: 12px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    animation: buzzNotifIn-b-a6vfpl1qoo 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.buzz-notification.positive[b-a6vfpl1qoo] {
    border-left: 2px solid rgba(74, 222, 128, 0.4);
}

.buzz-notification.negative[b-a6vfpl1qoo] {
    border-left: 2px solid rgba(248, 113, 113, 0.4);
}

@keyframes buzzNotifIn-b-a6vfpl1qoo {
    from {
        opacity: 0;
        transform: translateX(-10px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Avatar */
.buzz-notif-avatar[b-a6vfpl1qoo] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.buzz-notif-avatar-inner[b-a6vfpl1qoo] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.2), rgba(var(--wl-gold-rgb), 0.05));
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--wl-gold);
    letter-spacing: 0.02em;
}

/* Content */
.buzz-notif-content[b-a6vfpl1qoo] {
    flex: 1;
    min-width: 0;
}

.buzz-notif-header[b-a6vfpl1qoo] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 2px;
}

.buzz-notif-username[b-a6vfpl1qoo] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buzz-notif-handle[b-a6vfpl1qoo] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.buzz-notif-text[b-a6vfpl1qoo] {
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    margin: 0;
    line-height: 1.4;
}

.buzz-notif-meta[b-a6vfpl1qoo] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.buzz-notif-time[b-a6vfpl1qoo] {
    font-size: 0.625rem;
    color: var(--wl-text-muted);
}

.buzz-notif-engagement[b-a6vfpl1qoo] {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 0.625rem;
    color: var(--wl-text-muted);
}

.buzz-notif-engagement svg[b-a6vfpl1qoo] {
    width: 10px;
    height: 10px;
}

/* ============================================
   BUZZ METER - The tension engine
   ============================================ */

.buzz-meter-container[b-a6vfpl1qoo] {
    flex-shrink: 0;
    padding: 12px 20px 28px;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    z-index: 3;
    background: linear-gradient(
        0deg,
        rgba(var(--wl-bg-modal-deep-rgb), 0.98) 0%,
        rgba(var(--wl-bg-modal-rgb), 0.9) 100%
    );
}

.buzz-meter-label[b-a6vfpl1qoo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.buzz-meter-title[b-a6vfpl1qoo] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.8125rem;
    letter-spacing: 0.15em;
    color: var(--wl-text-muted);
}

.buzz-meter-odds[b-a6vfpl1qoo] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.875rem;
    letter-spacing: 0.06em;
}

.odds-positive[b-a6vfpl1qoo] {
    color: #4ade80;
}

.odds-separator[b-a6vfpl1qoo] {
    color: var(--wl-text-muted);
    margin: 0 2px;
}

.odds-negative[b-a6vfpl1qoo] {
    color: #f87171;
}

/* Track */
.buzz-meter-track[b-a6vfpl1qoo] {
    position: relative;
    height: 32px;
    border-radius: 16px;
    overflow: visible;
    display: flex;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.buzz-meter-zone-positive[b-a6vfpl1qoo],
.buzz-meter-zone-negative[b-a6vfpl1qoo] {
    height: 100%;
    position: relative;
    overflow: hidden;
}

.buzz-meter-zone-positive[b-a6vfpl1qoo] {
    border-radius: 16px 0 0 16px;
}

.buzz-meter-zone-negative[b-a6vfpl1qoo] {
    border-radius: 0 16px 16px 0;
}

.buzz-zone-fill[b-a6vfpl1qoo] {
    position: absolute;
    inset: 0;
}

.buzz-zone-fill.positive[b-a6vfpl1qoo] {
    background: linear-gradient(90deg,
        rgba(74, 222, 128, 0.15) 0%,
        rgba(74, 222, 128, 0.06) 100%
    );
}

.buzz-zone-fill.negative[b-a6vfpl1qoo] {
    background: linear-gradient(90deg,
        rgba(248, 113, 113, 0.06) 0%,
        rgba(248, 113, 113, 0.15) 100%
    );
}

/* Zone divider line */
.buzz-meter-zone-positive[b-a6vfpl1qoo]::after {
    content: '';
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(var(--wl-contrast-rgb), 0.15);
}

/* Zone labels */
.buzz-zone-label[b-a6vfpl1qoo] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 1;
}

.buzz-zone-label-positive[b-a6vfpl1qoo] {
    left: 12px;
    color: rgba(74, 222, 128, 0.5);
}

.buzz-zone-label-negative[b-a6vfpl1qoo] {
    right: 12px;
    color: rgba(248, 113, 113, 0.5);
}

/* ============================================
   NEEDLE - The heart-racing element
   ============================================ */

.buzz-needle[b-a6vfpl1qoo] {
    position: absolute;
    top: -4px;
    bottom: -4px;
    width: 3px;
    transform: translateX(-50%);
    z-index: 5;
    transition: none;
    will-change: left;
}

.buzz-needle.needle-slowing[b-a6vfpl1qoo] {
    transition: left 60ms linear;
}

.buzz-needle.needle-stopped[b-a6vfpl1qoo] {
    transition: none;
}

.buzz-needle-head[b-a6vfpl1qoo] {
    position: absolute;
    inset: 0;
    background: var(--wl-gold);
    border-radius: 2px;
    box-shadow:
        0 0 8px rgba(var(--wl-gold-rgb), 0.6),
        0 0 20px rgba(var(--wl-gold-rgb), 0.3);
}

.buzz-needle-glow[b-a6vfpl1qoo] {
    position: absolute;
    top: -8px;
    bottom: -8px;
    left: -8px;
    right: -8px;
    background: radial-gradient(
        ellipse at center,
        rgba(var(--wl-gold-rgb), 0.3) 0%,
        transparent 70%
    );
    pointer-events: none;
    animation: buzzNeedleGlow-b-a6vfpl1qoo 0.8s ease-in-out infinite alternate;
}

.needle-stopped .buzz-needle-glow[b-a6vfpl1qoo] {
    animation: none;
}

@keyframes buzzNeedleGlow-b-a6vfpl1qoo {
    from { opacity: 0.5; }
    to   { opacity: 1; }
}

/* ============================================
   RESULT OVERLAY - The big reveal
   ============================================ */

.buzz-result-overlay[b-a6vfpl1qoo] {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    animation: buzzResultIn-b-a6vfpl1qoo 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.buzz-result-overlay.result-positive[b-a6vfpl1qoo] {
    background: linear-gradient(
        180deg,
        var(--wl-overlay-bg) 0%,
        rgba(16, 40, 24, 0.92) 100%
    );
}

.buzz-result-overlay.result-negative[b-a6vfpl1qoo] {
    background: linear-gradient(
        180deg,
        var(--wl-overlay-bg) 0%,
        rgba(40, 16, 16, 0.92) 100%
    );
}

@keyframes buzzResultIn-b-a6vfpl1qoo {
    from {
        opacity: 0;
        backdrop-filter: blur(0);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

/* Flash effect on result reveal */
.buzz-result-flash[b-a6vfpl1qoo] {
    position: absolute;
    inset: 0;
    background: white;
    opacity: 0;
    pointer-events: none;
    animation: buzzFlash-b-a6vfpl1qoo 0.6s ease-out;
}

@keyframes buzzFlash-b-a6vfpl1qoo {
    0% { opacity: 0.6; }
    100% { opacity: 0; }
}

/* Result card */
.buzz-result-card[b-a6vfpl1qoo] {
    text-align: center;
    animation: buzzResultCardIn-b-a6vfpl1qoo 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s backwards;
}

@keyframes buzzResultCardIn-b-a6vfpl1qoo {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.buzz-result-badge[b-a6vfpl1qoo] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.buzz-result-badge svg[b-a6vfpl1qoo] {
    width: 32px;
    height: 32px;
}

.buzz-result-badge.positive[b-a6vfpl1qoo] {
    background: rgba(74, 222, 128, 0.15);
    border: 2px solid rgba(74, 222, 128, 0.3);
    color: #4ade80;
    box-shadow: 0 0 40px rgba(74, 222, 128, 0.2);
    animation: buzzResultBadgePulse-b-a6vfpl1qoo 2s ease-in-out infinite;
}

.buzz-result-badge.negative[b-a6vfpl1qoo] {
    background: rgba(248, 113, 113, 0.15);
    border: 2px solid rgba(248, 113, 113, 0.3);
    color: #f87171;
    box-shadow: 0 0 40px rgba(248, 113, 113, 0.2);
    animation: buzzResultBadgePulse-b-a6vfpl1qoo 2s ease-in-out infinite;
}

@keyframes buzzResultBadgePulse-b-a6vfpl1qoo {
    0%, 100% { box-shadow: 0 0 40px rgba(var(--wl-gold-rgb), 0.15); }
    50% { box-shadow: 0 0 60px rgba(var(--wl-gold-rgb), 0.25); }
}

.buzz-result-breaking[b-a6vfpl1qoo] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: var(--wl-gold);
    margin-bottom: 8px;
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.5);
    animation: buzzBreakingFlash-b-a6vfpl1qoo 1s ease-in-out infinite alternate;
}

@keyframes buzzBreakingFlash-b-a6vfpl1qoo {
    from { opacity: 0.7; }
    to   { opacity: 1; }
}

.buzz-result-text[b-a6vfpl1qoo] {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--wl-text-primary);
    margin: 0;
    max-width: 260px;
    text-shadow: 0 2px 10px var(--wl-shadow-color);
}

/* Continue button */
.buzz-result-continue[b-a6vfpl1qoo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
    padding: 12px 32px;
    background: linear-gradient(135deg, var(--wl-gold) 0%, var(--wl-gold-dark) 100%);
    color: var(--wl-bg-primary);
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(var(--wl-gold-rgb), 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    animation: buzzContinueIn-b-a6vfpl1qoo 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s backwards;
}

.buzz-result-continue:hover[b-a6vfpl1qoo] {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(var(--wl-gold-rgb), 0.45);
    background: linear-gradient(135deg, var(--wl-gold-light) 0%, var(--wl-gold) 100%);
}

.buzz-result-continue:active[b-a6vfpl1qoo] {
    transform: translateY(-1px);
}

.buzz-result-continue svg[b-a6vfpl1qoo] {
    width: 16px;
    height: 16px;
}

@keyframes buzzContinueIn-b-a6vfpl1qoo {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 400px) {
    .buzz-phone[b-a6vfpl1qoo] {
        width: 100%;
        max-width: calc(100vw - 24px);
        height: 580px;
        border-radius: 2rem;
    }

    .buzz-notch[b-a6vfpl1qoo] {
        width: 100px;
        height: 24px;
    }

    .buzz-notification[b-a6vfpl1qoo] {
        padding: 8px 10px;
        gap: 8px;
    }

    .buzz-notif-avatar[b-a6vfpl1qoo] {
        width: 28px;
        height: 28px;
    }

    .buzz-notif-text[b-a6vfpl1qoo] {
        font-size: 0.75rem;
    }
}

@media (max-height: 700px) {
    .buzz-phone[b-a6vfpl1qoo] {
        height: calc(100vh - 60px);
    }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .buzz-backdrop[b-a6vfpl1qoo] {
        animation: none;
    }

    .buzz-container[b-a6vfpl1qoo] {
        animation: none;
    }

    .buzz-feed-scroll.scrolling[b-a6vfpl1qoo],
    .buzz-feed-scroll.slowing[b-a6vfpl1qoo] {
        animation: none;
    }

    .buzz-notification[b-a6vfpl1qoo] {
        animation: none;
    }

    .buzz-needle-glow[b-a6vfpl1qoo] {
        animation: none;
    }

    .buzz-result-overlay[b-a6vfpl1qoo] {
        animation: none;
    }

    .buzz-result-flash[b-a6vfpl1qoo] {
        animation: none;
        display: none;
    }

    .buzz-result-card[b-a6vfpl1qoo] {
        animation: none;
    }

    .buzz-result-continue[b-a6vfpl1qoo] {
        animation: none;
    }

    .buzz-live-dot[b-a6vfpl1qoo] {
        animation: none;
    }

    .buzz-result-badge[b-a6vfpl1qoo] {
        animation: none;
    }

    .buzz-result-breaking[b-a6vfpl1qoo] {
        animation: none;
    }
}


/* Labels store normal-case resx values - visuals stay uppercase */
.buzz-meter-title[b-a6vfpl1qoo],
.buzz-zone-label[b-a6vfpl1qoo],
.buzz-result-breaking[b-a6vfpl1qoo],
.buzz-result-continue span[b-a6vfpl1qoo],
.buzz-app-title span[b-a6vfpl1qoo] {
    text-transform: uppercase;
}
/* /Components/Shared/CareerGoalsPanel.razor.rz.scp.css */
.career-goals-panel[b-hjbd5ro0qi] {
    --cg-accent: var(--wl-gold);
    color: rgb(var(--wl-text-primary-rgb));
}

.career-goals-panel--compact[b-hjbd5ro0qi] {
    width: min(100%, 45rem);
    margin-top: auto;
    padding-top: 2rem;
}

.career-goals-panel--full[b-hjbd5ro0qi] {
    display: grid;
    gap: clamp(1.25rem, 3vw, 2rem);
}

.cg-compact-head[b-hjbd5ro0qi],
.cg-goal-meta[b-hjbd5ro0qi],
.cg-card-head[b-hjbd5ro0qi],
.cg-progress-label[b-hjbd5ro0qi],
.cg-chapter-head[b-hjbd5ro0qi],
.cg-overview-stats[b-hjbd5ro0qi],
.cg-dialog-actions[b-hjbd5ro0qi],
.cg-actions[b-hjbd5ro0qi] {
    display: flex;
    align-items: center;
}

.cg-compact-head[b-hjbd5ro0qi] {
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cg-eyebrow[b-hjbd5ro0qi],
.cg-chapter-number[b-hjbd5ro0qi],
.cg-status[b-hjbd5ro0qi],
.cg-progress-label[b-hjbd5ro0qi],
.cg-overall-count[b-hjbd5ro0qi] {
    font-size: 0.69rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cg-eyebrow[b-hjbd5ro0qi] {
    display: block;
    color: rgba(var(--wl-gold-rgb), 0.92);
}

.cg-compact-head h3[b-hjbd5ro0qi] {
    margin: 0.22rem 0 0;
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 1rem;
    font-weight: 800;
}

.cg-show-all[b-hjbd5ro0qi] {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.74rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-decoration: none;
    text-transform: uppercase;
}

.cg-show-all svg[b-hjbd5ro0qi] {
    width: 1rem;
    height: 1rem;
    transition: transform 0.18s ease;
}

.cg-show-all:hover svg[b-hjbd5ro0qi] {
    transform: translateX(3px);
}

.cg-compact-goal[b-hjbd5ro0qi] {
    --cg-accent: var(--wl-gold);
    position: relative;
    padding: clamp(1rem, 2.4vw, 1.35rem);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--cg-accent) 38%, transparent);
    border-radius: 8px;
    background:
        linear-gradient(118deg, color-mix(in srgb, var(--cg-accent) 13%, transparent), transparent 62%),
        rgba(var(--wl-bg-secondary-rgb), 0.66);
    box-shadow: inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.04);
}

.cg-compact-goal[b-hjbd5ro0qi]::before,
.cg-goal-card[b-hjbd5ro0qi]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--cg-accent);
}

.cg-goal-meta[b-hjbd5ro0qi] {
    justify-content: space-between;
    gap: 0.75rem;
}

.cg-category[b-hjbd5ro0qi] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--cg-accent);
    font-size: 0.73rem;
    font-weight: 800;
}

.cg-category-icon[b-hjbd5ro0qi] {
    display: grid;
    place-items: center;
    width: 1.45rem;
    height: 1.45rem;
    border: 1px solid color-mix(in srgb, var(--cg-accent) 36%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--cg-accent) 10%, transparent);
}

.cg-category-icon svg[b-hjbd5ro0qi] {
    width: 0.9rem;
    height: 0.9rem;
}

.cg-overall-count[b-hjbd5ro0qi] {
    color: rgba(var(--wl-text-primary-rgb), 0.68);
    white-space: nowrap;
}

.cg-compact-goal h4[b-hjbd5ro0qi],
.cg-goal-card h3[b-hjbd5ro0qi] {
    margin: 0.8rem 0 0;
    color: rgb(var(--wl-text-primary-rgb));
    font-size: clamp(1.18rem, 2.4vw, 1.45rem);
    font-weight: 850;
    line-height: 1.18;
}

.cg-compact-goal > p[b-hjbd5ro0qi],
.cg-goal-card > p[b-hjbd5ro0qi] {
    max-width: 48rem;
    margin: 0.42rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.72);
    font-size: 0.88rem;
    line-height: 1.55;
}

.cg-progress[b-hjbd5ro0qi] {
    margin-top: 1rem;
}

.cg-progress-label[b-hjbd5ro0qi] {
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
    color: rgba(var(--wl-text-primary-rgb), 0.68);
}

.cg-progress-label strong[b-hjbd5ro0qi] {
    color: var(--cg-accent);
    font-variant-numeric: tabular-nums;
}

.cg-progress-track[b-hjbd5ro0qi] {
    height: 0.38rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.09);
}

.cg-progress-track span[b-hjbd5ro0qi] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cg-accent), color-mix(in srgb, var(--cg-accent) 60%, #fff));
    box-shadow: 0 0 14px color-mix(in srgb, var(--cg-accent) 34%, transparent);
    transition: width 0.35s ease;
}

.cg-actions[b-hjbd5ro0qi] {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.cg-button[b-hjbd5ro0qi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 2.45rem;
    padding: 0 0.85rem;
    border: 1px solid transparent;
    border-radius: 5px;
    font: inherit;
    font-size: 0.73rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.cg-button svg[b-hjbd5ro0qi],
.cg-icon-button svg[b-hjbd5ro0qi] {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.cg-button:hover:not(:disabled)[b-hjbd5ro0qi] {
    transform: translateY(-1px);
}

.cg-button:disabled[b-hjbd5ro0qi] {
    cursor: wait;
    opacity: 0.58;
}

.cg-button--primary[b-hjbd5ro0qi] {
    color: rgb(var(--wl-bg-primary-rgb));
    border-color: var(--cg-accent);
    background: var(--cg-accent);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--cg-accent) 18%, transparent);
}

.cg-button--primary:hover[b-hjbd5ro0qi] {
    background: color-mix(in srgb, var(--cg-accent) 88%, #fff);
}

.cg-button--secondary[b-hjbd5ro0qi] {
    color: rgba(var(--wl-text-primary-rgb), 0.8);
    border-color: rgba(var(--wl-contrast-rgb), 0.16);
    background: rgba(var(--wl-contrast-rgb), 0.045);
}

.cg-button--secondary:hover[b-hjbd5ro0qi] {
    color: rgb(var(--wl-text-primary-rgb));
    border-color: rgba(var(--wl-contrast-rgb), 0.3);
    background: rgba(var(--wl-contrast-rgb), 0.08);
}

.cg-button--manager[b-hjbd5ro0qi] {
    color: #a9c6ff;
    border-color: rgba(122, 162, 236, 0.3);
    background: rgba(77, 111, 177, 0.12);
}

.cg-button--manager:hover[b-hjbd5ro0qi] {
    border-color: rgba(151, 184, 246, 0.56);
    background: rgba(77, 111, 177, 0.2);
}

.cg-skip-link[b-hjbd5ro0qi] {
    min-height: 2.45rem;
    margin-left: auto;
    padding: 0 0.3rem;
    border: 0;
    color: rgba(var(--wl-text-primary-rgb), 0.7);
    background: transparent;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 750;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.2rem;
    cursor: pointer;
}

.cg-skip-link:hover[b-hjbd5ro0qi] {
    color: rgba(var(--wl-text-primary-rgb), 0.85);
    text-decoration-color: currentColor;
}

.cg-loading[b-hjbd5ro0qi] {
    display: grid;
    gap: 0.68rem;
    min-height: 12rem;
    align-content: center;
    padding: 1rem 0;
}

.career-goals-panel--full .cg-loading[b-hjbd5ro0qi] {
    min-height: 26rem;
    padding: 2rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 10px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.5);
}

.cg-skeleton[b-hjbd5ro0qi] {
    display: block;
    border-radius: 5px;
    background: linear-gradient(90deg,
        rgba(var(--wl-contrast-rgb), 0.045) 0%,
        rgba(var(--wl-contrast-rgb), 0.11) 48%,
        rgba(var(--wl-contrast-rgb), 0.045) 100%);
    background-size: 220% 100%;
    animation: cg-shimmer-b-hjbd5ro0qi 1.35s ease-in-out infinite;
}

.cg-skeleton--eyebrow[b-hjbd5ro0qi] {
    width: 7rem;
    height: 0.7rem;
}

.cg-skeleton--title[b-hjbd5ro0qi] {
    width: min(72%, 24rem);
    height: 1.7rem;
}

.cg-skeleton--copy[b-hjbd5ro0qi] {
    width: min(92%, 38rem);
    height: 2.4rem;
}

.cg-skeleton--bar[b-hjbd5ro0qi] {
    width: min(100%, 44rem);
    height: 0.42rem;
}

@keyframes cg-shimmer-b-hjbd5ro0qi {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

.cg-state[b-hjbd5ro0qi] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 7rem;
    padding: 1rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.54);
}

.cg-state--page[b-hjbd5ro0qi] {
    min-height: 18rem;
    justify-content: center;
}

.cg-state-icon[b-hjbd5ro0qi] {
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.32);
    border-radius: 50%;
    color: rgb(var(--wl-gold-rgb));
    background: rgba(var(--wl-gold-rgb), 0.09);
    font-size: 1.1rem;
    font-weight: 900;
}

.cg-state strong[b-hjbd5ro0qi] {
    display: block;
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 0.98rem;
}

.cg-state p[b-hjbd5ro0qi] {
    margin: 0.25rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.68);
    font-size: 0.84rem;
    line-height: 1.45;
}

.cg-state .cg-button[b-hjbd5ro0qi] {
    margin-left: auto;
}

.cg-state--complete[b-hjbd5ro0qi] {
    border-color: rgba(130, 184, 121, 0.28);
    background: linear-gradient(115deg, rgba(101, 161, 95, 0.11), rgba(var(--wl-bg-secondary-rgb), 0.52));
}

.cg-state--complete .cg-state-icon[b-hjbd5ro0qi] {
    color: #a9d49b;
    border-color: rgba(130, 184, 121, 0.36);
    background: rgba(101, 161, 95, 0.13);
}

.cg-state--error[b-hjbd5ro0qi] {
    border-color: rgba(218, 105, 90, 0.28);
}

.cg-state--error .cg-state-icon[b-hjbd5ro0qi] {
    color: #ed9b8d;
    border-color: rgba(218, 105, 90, 0.34);
    background: rgba(218, 105, 90, 0.1);
}

.cg-overview[b-hjbd5ro0qi] {
    --cg-accent: var(--wl-gold);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.35rem 2rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.26);
    border-radius: 10px;
    background:
        radial-gradient(circle at 88% 12%, rgba(var(--wl-gold-rgb), 0.15), transparent 28%),
        linear-gradient(130deg, rgba(var(--wl-gold-rgb), 0.08), transparent 48%),
        var(--wl-panel-grad),
        rgb(var(--wl-bg-secondary-rgb));
    box-shadow: var(--wl-panel-shadow);
}

.cg-overview-copy h2[b-hjbd5ro0qi] {
    margin: 0.38rem 0 0;
    color: rgb(var(--wl-text-primary-rgb));
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1;
}

.cg-overview-copy p[b-hjbd5ro0qi] {
    max-width: 46rem;
    margin: 0.6rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.62);
    font-size: 0.9rem;
    line-height: 1.55;
}

.cg-overview-stats[b-hjbd5ro0qi] {
    align-self: center;
    gap: 0.6rem;
}

.cg-overview-stats > div[b-hjbd5ro0qi] {
    display: grid;
    justify-items: center;
    min-width: 5.4rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 7px;
    background: rgba(var(--wl-bg-primary-rgb), 0.28);
}

.cg-overview-stats strong[b-hjbd5ro0qi] {
    color: rgb(var(--wl-text-primary-rgb));
    font-family: var(--font-display);
    font-size: 1.6rem;
    line-height: 1;
}

.cg-overview-stats span[b-hjbd5ro0qi] {
    margin-top: 0.25rem;
    color: rgba(var(--wl-text-primary-rgb), 0.5);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.cg-overall-progress[b-hjbd5ro0qi] {
    grid-column: 1 / -1;
}

.cg-chapters[b-hjbd5ro0qi] {
    display: grid;
    gap: 1rem;
}

.cg-chapter[b-hjbd5ro0qi] {
    --cg-accent: var(--wl-gold);
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid color-mix(in srgb, var(--cg-accent) 20%, rgba(var(--wl-contrast-rgb), 0.08));
    border-radius: 10px;
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--cg-accent) 5%, transparent), transparent 35%),
        rgba(var(--wl-bg-secondary-rgb), 0.62);
}

.cg-category--foundations[b-hjbd5ro0qi] { --cg-accent: #e2bd69; }
.cg-category--community[b-hjbd5ro0qi] { --cg-accent: #68c7bd; }
.cg-category--growth[b-hjbd5ro0qi] { --cg-accent: #94bd72; }
.cg-category--breakthrough[b-hjbd5ro0qi] { --cg-accent: #d58ab8; }
.cg-category--exploration[b-hjbd5ro0qi] { --cg-accent: #8da4e8; }

.cg-chapter-head[b-hjbd5ro0qi] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
}

.cg-chapter-icon[b-hjbd5ro0qi] {
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    border: 1px solid color-mix(in srgb, var(--cg-accent) 36%, transparent);
    border-radius: 9px;
    color: var(--cg-accent);
    background: color-mix(in srgb, var(--cg-accent) 10%, transparent);
}

.cg-chapter-icon svg[b-hjbd5ro0qi] {
    width: 1.55rem;
    height: 1.55rem;
}

.cg-chapter-number[b-hjbd5ro0qi] {
    color: var(--cg-accent);
}

.cg-chapter-head h2[b-hjbd5ro0qi] {
    margin: 0.18rem 0 0;
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 1.28rem;
    line-height: 1.15;
}

.cg-chapter-head p[b-hjbd5ro0qi] {
    margin: 0.25rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.68);
    font-size: 0.82rem;
    line-height: 1.4;
}

.cg-chapter-count[b-hjbd5ro0qi] {
    display: grid;
    place-items: center;
    min-width: 3rem;
    min-height: 2rem;
    padding: 0 0.65rem;
    border: 1px solid color-mix(in srgb, var(--cg-accent) 28%, transparent);
    border-radius: 999px;
    color: var(--cg-accent);
    background: color-mix(in srgb, var(--cg-accent) 8%, transparent);
    font-size: 0.76rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
}

.cg-goal-grid[b-hjbd5ro0qi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 1.15rem;
}

.cg-goal-card[b-hjbd5ro0qi] {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 19rem;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.105);
    border-radius: 8px;
    background: rgba(var(--wl-bg-primary-rgb), 0.26);
    transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.cg-goal-card:hover[b-hjbd5ro0qi] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--cg-accent) 38%, transparent);
    background: color-mix(in srgb, var(--cg-accent) 4%, rgba(var(--wl-bg-primary-rgb), 0.3));
}

.cg-card-head[b-hjbd5ro0qi] {
    justify-content: space-between;
    gap: 0.75rem;
}

.cg-goal-order[b-hjbd5ro0qi] {
    color: color-mix(in srgb, var(--cg-accent) 74%, rgba(var(--wl-text-primary-rgb), 0.4));
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

.cg-status[b-hjbd5ro0qi] {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0 0.5rem;
    border-radius: 999px;
}

.cg-status--active[b-hjbd5ro0qi] {
    color: var(--cg-accent);
    background: color-mix(in srgb, var(--cg-accent) 10%, transparent);
}

.cg-status--complete[b-hjbd5ro0qi] {
    color: #a9d49b;
    background: rgba(101, 161, 95, 0.12);
}

.cg-status--skipped[b-hjbd5ro0qi] {
    color: rgba(var(--wl-text-primary-rgb), 0.68);
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.cg-goal-card .cg-progress[b-hjbd5ro0qi] {
    margin-top: auto;
    padding-top: 1rem;
}

.cg-resolved[b-hjbd5ro0qi] {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
}

.cg-resolved > h3[b-hjbd5ro0qi] {
    margin: 0 0 0.65rem;
    color: rgba(var(--wl-text-primary-rgb), 0.66);
    font-size: 0.69rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cg-resolved-list[b-hjbd5ro0qi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.cg-resolved-goal[b-hjbd5ro0qi] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
    border-radius: 7px;
    background: rgba(var(--wl-bg-primary-rgb), 0.18);
}

.cg-resolved-goal.is-completed[b-hjbd5ro0qi] {
    border-color: rgba(110, 163, 101, 0.14);
}

.cg-resolved-goal.is-skipped[b-hjbd5ro0qi] {
    opacity: 0.72;
}

.cg-resolved-check[b-hjbd5ro0qi] {
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    color: #a9d49b;
    background: rgba(101, 161, 95, 0.1);
    font-size: 0.82rem;
    font-weight: 900;
}

.is-skipped .cg-resolved-check[b-hjbd5ro0qi] {
    color: rgba(var(--wl-text-primary-rgb), 0.48);
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.cg-resolved-copy[b-hjbd5ro0qi] {
    min-width: 0;
}

.cg-resolved-copy h3[b-hjbd5ro0qi] {
    margin: 0.28rem 0 0;
    overflow: hidden;
    color: rgba(var(--wl-text-primary-rgb), 0.72);
    font-size: 0.84rem;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cg-resolved-copy .cg-status[b-hjbd5ro0qi] {
    min-height: auto;
    padding: 0;
    background: transparent;
    font-size: 0.58rem;
}

.cg-resolved-actions[b-hjbd5ro0qi] {
    display: flex;
    gap: 0.3rem;
}

.cg-icon-button[b-hjbd5ro0qi] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 5px;
    color: rgba(var(--wl-text-primary-rgb), 0.56);
    background: rgba(var(--wl-contrast-rgb), 0.03);
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.cg-icon-button:hover[b-hjbd5ro0qi] {
    color: var(--cg-accent);
    border-color: color-mix(in srgb, var(--cg-accent) 32%, transparent);
    background: color-mix(in srgb, var(--cg-accent) 7%, transparent);
}

.cg-dialog-backdrop[b-hjbd5ro0qi] {
    position: fixed;
    z-index: 1400;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(4, 5, 8, 0.76);
    backdrop-filter: blur(8px);
}

.cg-dialog[b-hjbd5ro0qi] {
    width: min(100%, 29rem);
    padding: clamp(1.25rem, 4vw, 1.75rem);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 10px;
    outline: none;
    background:
        radial-gradient(circle at 82% 12%, rgba(var(--wl-gold-rgb), 0.12), transparent 32%),
        rgb(var(--wl-bg-secondary-rgb));
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.56);
}

.cg-dialog-mark[b-hjbd5ro0qi] {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 9px;
    color: rgb(var(--wl-gold-rgb));
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.cg-dialog-mark svg[b-hjbd5ro0qi] {
    width: 1.55rem;
    height: 1.55rem;
}

.cg-dialog h2[b-hjbd5ro0qi] {
    margin: 1rem 0 0;
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 1.35rem;
}

.cg-dialog > p[b-hjbd5ro0qi] {
    margin: 0.55rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.62);
    font-size: 0.9rem;
    line-height: 1.55;
}

.cg-dialog .cg-dialog-error[b-hjbd5ro0qi] {
    color: #ed9b8d;
}

.cg-dialog-actions[b-hjbd5ro0qi] {
    justify-content: flex-end;
    gap: 0.55rem;
    margin-top: 1.35rem;
}

.cg-button--skip-confirm[b-hjbd5ro0qi] {
    color: #f5c7bd;
    border-color: rgba(218, 105, 90, 0.34);
    background: rgba(218, 105, 90, 0.12);
}

.cg-button--skip-confirm:hover:not(:disabled)[b-hjbd5ro0qi] {
    border-color: rgba(231, 130, 115, 0.62);
    background: rgba(218, 105, 90, 0.2);
}

.cg-button:focus-visible[b-hjbd5ro0qi],
.cg-show-all:focus-visible[b-hjbd5ro0qi],
.cg-skip-link:focus-visible[b-hjbd5ro0qi],
.cg-icon-button:focus-visible[b-hjbd5ro0qi] {
    outline: 2px solid var(--wl-focus-ring, rgb(var(--wl-gold-rgb)));
    outline-offset: 3px;
}

@media (max-width: 900px) {
    .cg-goal-grid[b-hjbd5ro0qi],
    .cg-resolved-list[b-hjbd5ro0qi] {
        grid-template-columns: 1fr;
    }

    .cg-goal-card[b-hjbd5ro0qi] {
        min-height: 0;
    }

    .cg-goal-card .cg-progress[b-hjbd5ro0qi] {
        margin-top: 1rem;
        padding-top: 0;
    }
}

@media (max-width: 720px) {
    .career-goals-panel--compact[b-hjbd5ro0qi] {
        padding-top: 1.5rem;
    }

    .cg-overview[b-hjbd5ro0qi] {
        grid-template-columns: 1fr;
    }

    .cg-overview-stats[b-hjbd5ro0qi] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cg-overview-stats > div[b-hjbd5ro0qi] {
        min-width: 0;
    }
}

@media (max-width: 540px) {
    .cg-compact-head[b-hjbd5ro0qi] {
        align-items: flex-start;
    }

    .cg-show-all[b-hjbd5ro0qi] {
        font-size: 0.68rem;
    }

    .cg-goal-meta[b-hjbd5ro0qi] {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.4rem;
    }

    .cg-actions .cg-button--primary[b-hjbd5ro0qi] {
        width: 100%;
    }

    .cg-button--secondary[b-hjbd5ro0qi],
    .cg-button--manager[b-hjbd5ro0qi] {
        flex: 1 1 calc(50% - 0.25rem);
    }

    .cg-skip-link[b-hjbd5ro0qi] {
        width: 100%;
        margin-left: 0;
    }

    .cg-state[b-hjbd5ro0qi] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .cg-state .cg-button[b-hjbd5ro0qi] {
        width: 100%;
        margin-left: 0;
    }

    .cg-overview-stats[b-hjbd5ro0qi] {
        grid-template-columns: 1fr;
    }

    .cg-overview-stats > div[b-hjbd5ro0qi] {
        grid-template-columns: auto 1fr;
        justify-items: start;
        align-items: baseline;
        gap: 0.55rem;
    }

    .cg-chapter-head[b-hjbd5ro0qi] {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .cg-chapter-count[b-hjbd5ro0qi] {
        grid-column: 2;
        justify-self: start;
        margin-top: 0.2rem;
    }

    .cg-resolved-goal[b-hjbd5ro0qi] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .cg-resolved-actions[b-hjbd5ro0qi] {
        grid-column: 2;
    }

    .cg-dialog-actions[b-hjbd5ro0qi] {
        flex-direction: column-reverse;
    }

    .cg-dialog-actions .cg-button[b-hjbd5ro0qi] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cg-skeleton[b-hjbd5ro0qi] {
        animation: none;
    }

    .cg-button[b-hjbd5ro0qi],
    .cg-show-all svg[b-hjbd5ro0qi],
    .cg-goal-card[b-hjbd5ro0qi],
    .cg-progress-track span[b-hjbd5ro0qi] {
        transition: none;
    }
}
/* /Components/Shared/CareerTrendingPanel.razor.rz.scp.css */
.career-trend[b-uxd8z0q6ry] {
    --career-accent-rgb: var(--wl-gold-rgb);
    --career-alt-rgb: var(--wl-crimson-rgb);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 0 0 1.5rem;
    border: 1px solid rgba(var(--career-accent-rgb), 0.28);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(var(--career-accent-rgb), 0.13), transparent 36%),
        linear-gradient(180deg, rgba(var(--wl-contrast-rgb), 0.055), rgba(var(--wl-bg-secondary-rgb), 0.86));
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.06);
    color: var(--wl-text-primary);
    scroll-margin-top: 1rem;
}

.career-trend--footer[b-uxd8z0q6ry] {
    margin-top: 2rem;
}

.career-trend-teaser[b-uxd8z0q6ry] {
    --career-accent-rgb: var(--wl-gold-rgb);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    margin: 0 0 1rem;
    padding: 0.65rem 0.75rem 0.65rem 0.9rem;
    border: 1px solid rgba(var(--career-accent-rgb), 0.25);
    border-radius: 8px;
    background: linear-gradient(100deg, rgba(var(--career-accent-rgb), 0.1), rgba(var(--wl-bg-secondary-rgb), 0.72));
    color: var(--wl-text-primary);
}

.career-trend-teaser__copy[b-uxd8z0q6ry] {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    min-width: 0;
}

.career-trend-teaser__copy > span[b-uxd8z0q6ry] {
    color: rgb(var(--career-accent-rgb));
    font-size: 0.7rem;
    font-weight: 900;
    text-transform: uppercase;
}

.career-trend-teaser__copy strong[b-uxd8z0q6ry] {
    overflow: hidden;
    color: var(--wl-text-primary);
    font-size: 0.86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.career-trend-teaser__copy small[b-uxd8z0q6ry] {
    color: var(--wl-text-secondary);
    font-size: 0.68rem;
    white-space: nowrap;
}

.career-trend-teaser__link[b-uxd8z0q6ry] {
    flex: 0 0 auto;
    padding: 0.48rem 0.68rem;
    border-radius: 7px;
    background: rgba(var(--career-accent-rgb), 0.14);
    color: rgb(var(--career-accent-rgb));
    font-size: 0.74rem;
    font-weight: 850;
    text-decoration: none;
}

.career-trend-teaser__link:hover[b-uxd8z0q6ry] {
    background: rgba(var(--career-accent-rgb), 0.22);
}

.career-trend--film[b-uxd8z0q6ry] {
    --career-accent-rgb: var(--wl-diamond-rgb);
    --career-alt-rgb: var(--wl-gold-rgb);
}

.career-trend--fashion[b-uxd8z0q6ry] {
    --career-accent-rgb: var(--wl-pink-rgb);
    --career-alt-rgb: var(--wl-gold-rgb);
}

.career-trend--literature[b-uxd8z0q6ry] {
    --career-accent-rgb: var(--wl-green-rgb);
    --career-alt-rgb: var(--wl-gold-rgb);
}

.career-trend--creator[b-uxd8z0q6ry] {
    --career-accent-rgb: 20, 184, 166;
    --career-alt-rgb: 244, 114, 182;
}

.career-trend--wonderfeet[b-uxd8z0q6ry] {
    --career-accent-rgb: 41, 166, 159;
    --career-alt-rgb: 244, 114, 182;
}

.career-trend--entrepreneur[b-uxd8z0q6ry] {
    --career-accent-rgb: 52, 211, 153;
    --career-alt-rgb: 250, 204, 21;
}

.career-trend--organizer[b-uxd8z0q6ry] {
    --career-accent-rgb: 167, 139, 250;
    --career-alt-rgb: 244, 114, 182;
}

.career-trend--filmactor[b-uxd8z0q6ry],
.career-trend--filmproducer[b-uxd8z0q6ry] {
    --career-accent-rgb: var(--wl-diamond-rgb);
    --career-alt-rgb: var(--wl-gold-rgb);
}

.career-trend-teaser.career-trend--fashion[b-uxd8z0q6ry] { --career-accent-rgb: var(--wl-pink-rgb); }
.career-trend-teaser.career-trend--literature[b-uxd8z0q6ry] { --career-accent-rgb: var(--wl-green-rgb); }
.career-trend-teaser.career-trend--creator[b-uxd8z0q6ry] { --career-accent-rgb: 20, 184, 166; }
.career-trend-teaser.career-trend--wonderfeet[b-uxd8z0q6ry] { --career-accent-rgb: 41, 166, 159; }
.career-trend-teaser.career-trend--entrepreneur[b-uxd8z0q6ry] { --career-accent-rgb: 52, 211, 153; }
.career-trend-teaser.career-trend--organizer[b-uxd8z0q6ry] { --career-accent-rgb: 167, 139, 250; }
.career-trend-teaser.career-trend--film[b-uxd8z0q6ry],
.career-trend-teaser.career-trend--filmactor[b-uxd8z0q6ry],
.career-trend-teaser.career-trend--filmproducer[b-uxd8z0q6ry] { --career-accent-rgb: var(--wl-diamond-rgb); }

.career-trend[b-uxd8z0q6ry]::before,
.career-trend[b-uxd8z0q6ry]::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.career-trend[b-uxd8z0q6ry]::before {
    inset: 0;
    background-image:
        linear-gradient(90deg, rgba(var(--wl-contrast-rgb), 0.045) 1px, transparent 1px),
        linear-gradient(rgba(var(--wl-contrast-rgb), 0.035) 1px, transparent 1px),
        linear-gradient(115deg, transparent 0 58%, rgba(var(--career-accent-rgb), 0.13) 58% 59%, transparent 59% 100%);
    background-size: 46px 46px, 46px 46px, 100% 100%;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.88), transparent 82%);
    opacity: 0.68;
}

.career-trend[b-uxd8z0q6ry]::after {
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background: linear-gradient(
        90deg,
        rgba(var(--career-accent-rgb), 0.55),
        rgba(var(--career-accent-rgb), 1),
        rgba(var(--career-alt-rgb), 0.82),
        rgba(var(--wl-gold-rgb), 0.95),
        rgba(var(--career-accent-rgb), 0.55));
    background-size: 220% 100%;
    animation: careerTrendBorderFlow-b-uxd8z0q6ry 7s linear infinite;
}

.career-trend__head[b-uxd8z0q6ry],
.career-trend__list[b-uxd8z0q6ry],
.career-trend__empty[b-uxd8z0q6ry] {
    position: relative;
    z-index: 1;
}

.career-trend__head[b-uxd8z0q6ry] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem 0.8rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
}

.career-trend__kicker[b-uxd8z0q6ry] {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.3rem;
    color: rgb(var(--career-accent-rgb));
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0;
}

.career-trend__kicker[b-uxd8z0q6ry]::before {
    content: "";
    width: 1.45rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgb(var(--career-accent-rgb)), rgba(var(--career-alt-rgb), 0.3));
}

.career-trend h2[b-uxd8z0q6ry] {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1;
    letter-spacing: 0.04em;
}

.career-trend__round[b-uxd8z0q6ry] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.5rem;
}

.career-trend__rules[b-uxd8z0q6ry] {
    margin-top: 0.45rem;
    color: var(--wl-text-secondary);
    font-size: 0.72rem;
}

.career-trend__rules summary[b-uxd8z0q6ry] {
    width: fit-content;
    color: rgb(var(--career-accent-rgb));
    font-weight: 800;
    cursor: pointer;
}

.career-trend__rules p[b-uxd8z0q6ry] {
    max-width: 68ch;
    margin: 0.4rem 0 0;
    color: var(--wl-text-secondary);
    line-height: 1.45;
}

.career-trend__reward-summary[b-uxd8z0q6ry] {
    display: grid;
    gap: 0.45rem;
    max-width: 44rem;
    margin-top: 0.65rem;
    padding: 0.65rem;
    border: 1px solid rgba(var(--career-accent-rgb), 0.2);
    border-radius: 7px;
    background: rgba(var(--career-accent-rgb), 0.055);
}

.career-trend__reward-summary > strong[b-uxd8z0q6ry] {
    color: var(--wl-text-primary);
    font-size: 0.72rem;
}

.career-trend__reward-summary > div[b-uxd8z0q6ry] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.career-trend__reward-summary > div span[b-uxd8z0q6ry] {
    padding: 0.24rem 0.42rem;
    border-radius: 999px;
    background: rgba(var(--career-accent-rgb), 0.11);
    color: rgb(var(--career-accent-rgb));
    font-size: 0.66rem;
    font-weight: 850;
}

.career-trend__reward-summary small[b-uxd8z0q6ry] {
    color: var(--wl-text-secondary);
    font-size: 0.66rem;
    line-height: 1.4;
}

.career-trend__round span[b-uxd8z0q6ry] {
    padding: 0.28rem 0.52rem;
    border: 1px solid rgba(var(--career-accent-rgb), 0.24);
    border-radius: 999px;
    background: rgba(var(--career-accent-rgb), 0.08);
    color: rgb(var(--career-accent-rgb));
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.03em;
}

.career-trend__toggle[b-uxd8z0q6ry] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.35rem;
    padding: 0 0.9rem;
    border: 1px solid rgba(var(--career-accent-rgb), 0.42);
    border-radius: 8px;
    background: rgba(var(--career-accent-rgb), 0.1);
    color: rgb(var(--career-accent-rgb));
    font-weight: 850;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.career-trend__toggle[b-uxd8z0q6ry]::after {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-0.12rem);
    transition: transform 0.16s ease;
}

.career-trend__toggle[aria-expanded="true"][b-uxd8z0q6ry]::after,
.career-trend__toggle[aria-expanded="True"][b-uxd8z0q6ry]::after {
    transform: rotate(225deg) translateY(-0.12rem);
}

.career-trend__toggle:hover[b-uxd8z0q6ry] {
    transform: translateY(-1px);
    border-color: rgba(var(--career-accent-rgb), 0.68);
    background: rgba(var(--career-accent-rgb), 0.16);
}

.career-trend__list[b-uxd8z0q6ry] {
    display: grid;
    gap: 0.55rem;
    padding: 0.75rem;
}

.career-trend__row[b-uxd8z0q6ry] {
    position: relative;
    display: grid;
    grid-template-columns: 3rem 3rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    min-height: 3.8rem;
    overflow: hidden;
    padding: 0.62rem 0.75rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.035);
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.career-trend__row[b-uxd8z0q6ry]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(var(--career-accent-rgb), 0.82), rgba(var(--career-alt-rgb), 0.22));
    opacity: 0.45;
}

.career-trend__row:hover[b-uxd8z0q6ry] {
    transform: translateX(3px);
    border-color: rgba(var(--career-accent-rgb), 0.34);
    background: rgba(var(--career-accent-rgb), 0.07);
}

.career-trend__row.is-leader[b-uxd8z0q6ry] {
    grid-template-columns: 3rem 3rem minmax(0, 1fr) auto;
    min-height: 3.8rem;
    padding: 0.62rem 0.75rem;
    border-color: rgba(var(--career-accent-rgb), 0.42);
    background:
        linear-gradient(120deg, rgba(var(--career-accent-rgb), 0.16), transparent 48%),
        rgba(var(--wl-contrast-rgb), 0.05);
    box-shadow: inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.08);
}

.career-trend__row.is-leader[b-uxd8z0q6ry]::before {
    width: 5px;
    opacity: 1;
}

.career-trend__row.is-current[b-uxd8z0q6ry] {
    border-color: rgba(var(--wl-gold-rgb), 0.62);
    background:
        linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.13), transparent 42%),
        rgba(var(--career-accent-rgb), 0.055);
}

.career-trend__row.is-detached[b-uxd8z0q6ry] {
    border-style: dashed;
}

.career-trend__rank[b-uxd8z0q6ry] {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid rgba(var(--career-accent-rgb), 0.28);
    border-radius: 8px;
    background: rgba(var(--career-accent-rgb), 0.1);
    color: rgb(var(--career-accent-rgb));
    font-size: 0.98rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.career-trend__row.is-leader .career-trend__rank[b-uxd8z0q6ry] {
    width: 2.5rem;
    height: 2.5rem;
    border-color: transparent;
    background: linear-gradient(135deg, rgb(var(--career-accent-rgb)), rgba(var(--wl-gold-rgb), 0.95));
    color: #111;
    box-shadow: 0 6px 14px rgba(var(--career-accent-rgb), 0.2);
}

.career-trend__avatar[b-uxd8z0q6ry] {
    width: 3rem;
    height: 3rem;
    border: 2px solid rgba(var(--career-accent-rgb), 0.34);
    border-radius: 50%;
    background: rgba(var(--wl-contrast-rgb), 0.06);
    object-fit: cover;
    box-shadow: 0 0 0 4px rgba(var(--career-accent-rgb), 0.07);
}

.career-trend__row.is-leader .career-trend__avatar[b-uxd8z0q6ry] {
    width: 3rem;
    height: 3rem;
    border-color: rgba(var(--career-accent-rgb), 0.64);
    box-shadow: 0 0 0 4px rgba(var(--career-accent-rgb), 0.09);
}

.career-trend__body[b-uxd8z0q6ry] {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
}

.career-trend__name[b-uxd8z0q6ry] {
    color: var(--wl-text-primary);
    font-size: 0.96rem;
    font-weight: 900;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.career-trend__row.is-leader .career-trend__name[b-uxd8z0q6ry] {
    font-size: 0.96rem;
}

.career-trend__name:hover[b-uxd8z0q6ry] {
    color: rgb(var(--career-accent-rgb));
}

.career-trend__event[b-uxd8z0q6ry] {
    color: var(--wl-text-secondary);
    font-size: 0.82rem;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.career-trend__breakdown[b-uxd8z0q6ry] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.career-trend__breakdown span[b-uxd8z0q6ry] {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.18rem 0.38rem;
    border: 1px solid rgba(var(--career-accent-rgb), 0.12);
    border-radius: 999px;
    background: rgba(var(--career-accent-rgb), 0.055);
    color: var(--wl-text-muted);
    font-size: 0.59rem;
    line-height: 1.2;
}

.career-trend__breakdown strong[b-uxd8z0q6ry] {
    color: rgb(var(--career-accent-rgb));
    font-variant-numeric: tabular-nums;
}

.career-trend__score[b-uxd8z0q6ry] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0 0.65rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-secondary);
    font-size: 0.78rem;
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.career-trend__result[b-uxd8z0q6ry] {
    display: grid;
    justify-items: end;
    gap: 0.18rem;
    min-width: 7.5rem;
}

.career-trend__movement[b-uxd8z0q6ry] {
    color: var(--wl-text-secondary);
    font-size: 0.72rem;
    font-weight: 900;
}

.career-trend__movement.is-up[b-uxd8z0q6ry] { color: #5ee6a8; }
.career-trend__movement.is-down[b-uxd8z0q6ry] { color: #ff7b8e; }

.career-trend__gap[b-uxd8z0q6ry],
.career-trend__days[b-uxd8z0q6ry] {
    color: var(--wl-text-tertiary, var(--wl-text-secondary));
    font-size: 0.68rem;
    line-height: 1.2;
}

.career-trend__row.is-leader .career-trend__score[b-uxd8z0q6ry] {
    border-color: transparent;
    background: linear-gradient(135deg, rgba(var(--career-accent-rgb), 0.92), rgba(var(--wl-gold-rgb), 0.9));
    color: #111;
}

.career-trend__divider[b-uxd8z0q6ry] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    margin: 0.2rem 0;
    color: var(--wl-text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.career-trend__divider[b-uxd8z0q6ry]::before,
.career-trend__divider[b-uxd8z0q6ry]::after {
    content: "";
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--career-accent-rgb), 0.42), transparent);
}

.career-trend__empty[b-uxd8z0q6ry] {
    margin: 1rem;
    padding: 1rem;
    border: 1px dashed rgba(var(--career-accent-rgb), 0.42);
    border-radius: 8px;
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.025);
    text-align: center;
}

@keyframes careerTrendBorderFlow-b-uxd8z0q6ry {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 220% 50%;
    }
}

@media (max-width: 640px) {
    .career-trend--footer[b-uxd8z0q6ry] {
        margin-top: 1.5rem;
    }

    .career-trend-teaser[b-uxd8z0q6ry] {
        min-height: 3.25rem;
        padding: 0.55rem 0.6rem 0.55rem 0.75rem;
    }

    .career-trend-teaser__copy[b-uxd8z0q6ry] {
        display: grid;
        gap: 0.08rem;
    }

    .career-trend-teaser__copy > span[b-uxd8z0q6ry] {
        display: none;
    }

    .career-trend-teaser__copy strong[b-uxd8z0q6ry] {
        font-size: 0.8rem;
    }

    .career-trend-teaser__copy small[b-uxd8z0q6ry] {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .career-trend-teaser__link[b-uxd8z0q6ry] {
        padding: 0.45rem 0.55rem;
        font-size: 0.7rem;
    }

    .career-trend__head[b-uxd8z0q6ry] {
        display: grid;
        padding: 0.8rem;
    }

    .career-trend h2[b-uxd8z0q6ry] {
        font-size: 1.12rem;
    }

    .career-trend__toggle[b-uxd8z0q6ry] {
        width: auto;
        justify-self: start;
        min-height: 2.1rem;
    }

    .career-trend__list[b-uxd8z0q6ry] {
        padding: 0.85rem;
    }

    .career-trend__row[b-uxd8z0q6ry],
    .career-trend__row.is-leader[b-uxd8z0q6ry] {
        grid-template-columns: 2.35rem 2.6rem minmax(0, 1fr) auto;
        gap: 0.5rem;
        min-height: 0;
        padding: 0.6rem;
    }

    .career-trend__rank[b-uxd8z0q6ry] {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 0.78rem;
    }

    .career-trend__row.is-leader .career-trend__rank[b-uxd8z0q6ry] {
        width: 2.1rem;
        height: 2.1rem;
    }

    .career-trend__avatar[b-uxd8z0q6ry],
    .career-trend__row.is-leader .career-trend__avatar[b-uxd8z0q6ry] {
        width: 2.6rem;
        height: 2.6rem;
    }

    .career-trend__row.is-leader .career-trend__name[b-uxd8z0q6ry] {
        font-size: 1rem;
    }

    .career-trend__score[b-uxd8z0q6ry] {
        min-height: 1.75rem;
        padding: 0 0.45rem;
        font-size: 0.7rem;
    }

    .career-trend__result[b-uxd8z0q6ry] {
        min-width: 0;
    }

    .career-trend:not(.is-expanded) .career-trend__movement[b-uxd8z0q6ry],
    .career-trend:not(.is-expanded) .career-trend__gap[b-uxd8z0q6ry],
    .career-trend:not(.is-expanded) .career-trend__days[b-uxd8z0q6ry],
    .career-trend:not(.is-expanded) .career-trend__event[b-uxd8z0q6ry],
    .career-trend:not(.is-expanded) .career-trend__breakdown[b-uxd8z0q6ry] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .career-trend__row[b-uxd8z0q6ry],
    .career-trend__toggle[b-uxd8z0q6ry],
    .career-trend__toggle[b-uxd8z0q6ry]::after {
        transition: none;
    }

    .career-trend[b-uxd8z0q6ry]::after {
        animation: none;
    }

    .career-trend[b-uxd8z0q6ry]::after,
    .career-trend__row:hover[b-uxd8z0q6ry],
    .career-trend__toggle:hover[b-uxd8z0q6ry] {
        transform: none;
    }
}
/* /Components/Shared/CharacterSwitcher.razor.rz.scp.css */
/* ============================================
   CHARACTER SWITCHER - Editorial Luxury
   Collapsible dropdown with stats
   ============================================ */

.character-switcher[b-pth5u7yode] {
    position: relative;
}

/* Header button (always visible) */
.switcher-header[b-pth5u7yode] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    background: linear-gradient(
        135deg,
        rgba(30, 30, 35, 0.95) 0%,
        rgba(var(--wl-bg-modal-rgb), 0.95) 100%
    );
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    box-shadow: 0 2px 8px var(--wl-shadow-color);
}

.switcher-header:hover[b-pth5u7yode] {
    background: linear-gradient(
        135deg,
        rgba(40, 40, 45, 0.98) 0%,
        rgba(35, 35, 38, 0.98) 100%
    );
    border-color: rgba(var(--wl-contrast-rgb), 0.12);
}

.switcher-header.expanded[b-pth5u7yode] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

/* Header avatar */
.header-avatar[b-pth5u7yode] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(30, 30, 35, 0.8);
    box-shadow: 0 0 0 2px rgba(var(--wl-gold-rgb), 0.4);
}

.header-avatar img[b-pth5u7yode] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-avatar.skeleton[b-pth5u7yode] {
    animation: pulse-b-pth5u7yode 1.5s ease-in-out infinite;
}

/* Header info */
.header-info[b-pth5u7yode] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.header-nickname[b-pth5u7yode] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-nickname.skeleton-text[b-pth5u7yode] {
    color: var(--wl-text-muted);
}

.header-meta[b-pth5u7yode] {
    font-size: 0.625rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Header stats (energy + notifications) */
.header-stats[b-pth5u7yode] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.stat-badge[b-pth5u7yode] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.6875rem;
    font-weight: 600;
}

.stat-badge svg[b-pth5u7yode] {
    width: 12px;
    height: 12px;
}

.energy-badge[b-pth5u7yode] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.notification-badge[b-pth5u7yode] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: #ef4444;
}

/* Chevron */
.header-chevron[b-pth5u7yode] {
    width: 16px;
    height: 16px;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.header-chevron svg[b-pth5u7yode] {
    width: 100%;
    height: 100%;
}

.switcher-header.expanded .header-chevron[b-pth5u7yode] {
    transform: rotate(180deg);
}

/* Backdrop */
.switcher-backdrop[b-pth5u7yode] {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

/* Dropdown - fixed position to escape overflow containers */
.switcher-dropdown[b-pth5u7yode] {
    position: fixed;
    z-index: 9999;
    background: linear-gradient(
        180deg,
        rgba(var(--wl-bg-modal-rgb), 0.98) 0%,
        rgba(var(--wl-bg-modal-rgb), 0.98) 100%
    );
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 10px;
    margin-top: 4px;
    box-shadow:
        0 8px 24px var(--wl-shadow-color),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.03);
    overflow: hidden;
    animation: dropdown-open-b-pth5u7yode 0.15s ease-out;
}

@keyframes dropdown-open-b-pth5u7yode {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dropdown item */
.dropdown-item[b-pth5u7yode] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.625rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.dropdown-item:hover:not(.active):not(:disabled)[b-pth5u7yode] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.dropdown-item:disabled[b-pth5u7yode] {
    opacity: 0.5;
    cursor: wait;
}

.dropdown-item.active[b-pth5u7yode] {
    background: linear-gradient(
        90deg,
        var(--wl-gold-bg) 0%,
        transparent 100%
    );
}

.dropdown-item.switching[b-pth5u7yode] {
    animation: pulse-b-pth5u7yode 0.8s ease infinite;
}

@keyframes pulse-b-pth5u7yode {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Item avatar */
.item-avatar[b-pth5u7yode] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(30, 30, 35, 0.8);
    transition: box-shadow 0.2s ease;
}

.item-avatar img[b-pth5u7yode] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-avatar.avatar-active[b-pth5u7yode] {
    box-shadow: 0 0 0 2px rgba(var(--wl-gold-rgb), 0.5);
}

/* Item info */
.item-info[b-pth5u7yode] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
}

.item-nickname[b-pth5u7yode] {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item.active .item-nickname[b-pth5u7yode] {
    color: var(--wl-gold-light);
}

.item-meta[b-pth5u7yode] {
    font-size: 0.5625rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Item stats */
.item-stats[b-pth5u7yode] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.mini-stat[b-pth5u7yode] {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    font-size: 0.625rem;
    font-weight: 600;
}

.mini-stat svg[b-pth5u7yode] {
    width: 10px;
    height: 10px;
}

.mini-stat.energy[b-pth5u7yode] {
    color: #22c55e;
}

.mini-stat.notifications[b-pth5u7yode] {
    color: #ef4444;
}

/* Active mark (checkmark) */
.item-active-mark[b-pth5u7yode] {
    width: 14px;
    height: 14px;
    color: var(--wl-gold);
    flex-shrink: 0;
}

.item-active-mark svg[b-pth5u7yode] {
    width: 100%;
    height: 100%;
}

/* Empty state */
.dropdown-empty[b-pth5u7yode] {
    padding: 1rem;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    font-style: italic;
}

/* Divider */
.dropdown-divider[b-pth5u7yode] {
    height: 1px;
    background: var(--wl-border-medium);
    margin: 0.25rem 0;
}

/* Manage link */
.dropdown-manage[b-pth5u7yode] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem;
    color: var(--wl-text-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    letter-spacing: 0.02em;
}

.dropdown-manage:hover[b-pth5u7yode] {
    color: rgba(var(--wl-gold-rgb), 0.9);
    background: rgba(var(--wl-gold-rgb), 0.05);
}

.dropdown-manage svg[b-pth5u7yode] {
    width: 12px;
    height: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .header-avatar[b-pth5u7yode] {
        width: 32px;
        height: 32px;
    }

    .header-nickname[b-pth5u7yode] {
        font-size: 0.75rem;
    }

    .stat-badge[b-pth5u7yode] {
        padding: 0.1875rem 0.375rem;
        font-size: 0.625rem;
    }

    .stat-badge svg[b-pth5u7yode] {
        width: 10px;
        height: 10px;
    }
}
/* /Components/Shared/EmojiPicker.razor.rz.scp.css */
.emoji-picker[b-prowzjzclx] {
    width: 320px;
    max-height: 340px;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 12px;
    box-shadow: 0 12px 40px var(--wl-shadow-color), 0 0 0 1px rgba(var(--wl-contrast-rgb), 0.05);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: emojiPickerIn-b-prowzjzclx 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    z-index: 50;
}

@keyframes emojiPickerIn-b-prowzjzclx {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Search */
.emoji-search[b-prowzjzclx] {
    padding: 0.5rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.emoji-search-input[b-prowzjzclx] {
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: var(--wl-bg-primary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    color: var(--wl-text-primary);
    font-size: 0.8125rem;
    outline: none;
    transition: border-color 0.2s ease;
}

.emoji-search-input:focus[b-prowzjzclx] {
    border-color: rgba(var(--wl-gold-rgb), 0.4);
}

.emoji-search-input[b-prowzjzclx]::placeholder {
    color: var(--wl-text-muted);
}

/* Tabs */
.emoji-tabs[b-prowzjzclx] {
    display: flex;
    gap: 0;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.emoji-tab[b-prowzjzclx] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
    transition: all 0.2s ease;
    opacity: 0.5;
}

.emoji-tab:hover[b-prowzjzclx] {
    opacity: 0.8;
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.emoji-tab--active[b-prowzjzclx] {
    opacity: 1;
    border-bottom-color: var(--wl-gold);
}

.emoji-tab-icon[b-prowzjzclx] {
    width: 20px;
    height: 20px;
}

/* Grid */
.emoji-grid[b-prowzjzclx] {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.125rem;
    max-height: 220px;
    align-content: start;
}

.emoji-grid-item[b-prowzjzclx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.emoji-grid-item:hover[b-prowzjzclx] {
    background: var(--wl-bg-tertiary);
    transform: scale(1.15);
}

.emoji-grid-item img[b-prowzjzclx] {
    width: 24px;
    height: 24px;
    pointer-events: none;
}

/* No results */
.emoji-no-results[b-prowzjzclx] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 1.5rem;
    color: var(--wl-text-muted);
    font-size: 0.8125rem;
}

/* Scrollbar styling */
.emoji-grid[b-prowzjzclx]::-webkit-scrollbar {
    width: 4px;
}

.emoji-grid[b-prowzjzclx]::-webkit-scrollbar-track {
    background: transparent;
}

.emoji-grid[b-prowzjzclx]::-webkit-scrollbar-thumb {
    background: rgba(var(--wl-contrast-rgb), 0.15);
    border-radius: 2px;
}

/* Mobile */
@media (max-width: 640px) {
    .emoji-picker[b-prowzjzclx] {
        width: 280px;
    }
}
/* /Components/Shared/Fame/BranchFilter.razor.rz.scp.css */
.branch-filter[b-3er7r84y72] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.branch-filter-btn[b-3er7r84y72] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 6px;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.branch-filter-btn:hover[b-3er7r84y72] {
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.branch-filter-btn.active[b-3er7r84y72] {
    background: rgba(var(--wl-gold-rgb), 0.1);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.branch-filter-btn.music.active[b-3er7r84y72] {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #EF4444;
}

.branch-filter-btn.film.active[b-3er7r84y72] {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #3B82F6;
}

.branch-filter-btn.fashion.active[b-3er7r84y72] {
    background: rgba(var(--wl-pink-rgb), 0.1);
    border-color: rgba(var(--wl-pink-rgb), 0.3);
    color: var(--wl-pink);
}

.branch-filter-btn svg[b-3er7r84y72] {
    width: 0.875rem;
    height: 0.875rem;
}
/* /Components/Shared/Fame/CollabImpactPreviewCard.razor.rz.scp.css */
/* ============================================
   COLLAB IMPACT PREVIEW CARD
   Theme: Compact luxury card matching ReleaseImpactPreviewCard
   ============================================ */

.collab-preview-card[b-yvkogfm0ls] {
    position: relative;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    overflow: hidden;
}

.collab-preview-card[b-yvkogfm0ls]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-purple-rgb), 0.4) 50%,
        transparent 100%);
}

.preview-card-glow[b-yvkogfm0ls] {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(var(--wl-purple-rgb), 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Header */
.preview-card-header[b-yvkogfm0ls] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.preview-card-icon[b-yvkogfm0ls] {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--wl-purple);
    opacity: 0.8;
}

.preview-card-header h3[b-yvkogfm0ls] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-purple);
    margin: 0;
}

/* Style Compatibility */
.preview-compatibility[b-yvkogfm0ls] {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.compat-header[b-yvkogfm0ls] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.compat-label[b-yvkogfm0ls] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.compat-value[b-yvkogfm0ls] {
    font-size: 0.875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.compat-bar[b-yvkogfm0ls] {
    height: 6px;
    background: var(--wl-border-medium);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.compat-bar-fill[b-yvkogfm0ls] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease-out;
}

.compat-bar-fill.high[b-yvkogfm0ls] {
    background: linear-gradient(90deg, #22C55E, #4ADE80);
}

.compat-bar-fill.medium[b-yvkogfm0ls] {
    background: linear-gradient(90deg, var(--wl-gold-dark), var(--wl-gold));
}

.compat-bar-fill.low[b-yvkogfm0ls] {
    background: linear-gradient(90deg, #EF4444, #F87171);
}

.compat-risk[b-yvkogfm0ls] {
    display: flex;
    justify-content: flex-end;
}

.risk-badge[b-yvkogfm0ls] {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
}

.risk-badge.safe[b-yvkogfm0ls] {
    color: #22C55E;
    background: rgba(34, 197, 94, 0.1);
}

.risk-badge.moderate[b-yvkogfm0ls] {
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
}

.risk-badge.risky[b-yvkogfm0ls] {
    color: #F97316;
    background: rgba(249, 115, 22, 0.1);
}

.risk-badge.very-risky[b-yvkogfm0ls] {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Fan Gain Range */
.preview-gain-range[b-yvkogfm0ls] {
    margin-bottom: 1rem;
}

.gain-header[b-yvkogfm0ls] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    margin-bottom: 0.625rem;
}

.gain-values[b-yvkogfm0ls] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.gain-item[b-yvkogfm0ls] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 0.5rem;
    border-radius: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.02);
}

.gain-scenario[b-yvkogfm0ls] {
    font-size: 0.5625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    margin-bottom: 0.25rem;
}

.gain-amount[b-yvkogfm0ls] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.gain-item.worst .gain-amount[b-yvkogfm0ls] {
    color: #F97316;
}

.gain-item.best .gain-amount[b-yvkogfm0ls] {
    color: #22C55E;
    text-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}

.gain-separator[b-yvkogfm0ls] {
    flex-shrink: 0;
    color: rgba(var(--wl-contrast-rgb), 0.2);
}

.gain-separator svg[b-yvkogfm0ls] {
    width: 1rem;
    height: 1rem;
}

/* Partner Rating */
.preview-partner-rating[b-yvkogfm0ls] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.375rem 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border-radius: 4px;
}

.rating-label[b-yvkogfm0ls] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.rating-value[b-yvkogfm0ls] {
    font-size: 0.75rem;
    font-weight: 700;
}

.rating-value.high[b-yvkogfm0ls] {
    color: #22C55E;
}

.rating-value.medium[b-yvkogfm0ls] {
    color: var(--wl-gold);
}

.rating-value.low[b-yvkogfm0ls] {
    color: #EF4444;
}

.rating-value.unknown[b-yvkogfm0ls] {
    color: rgba(var(--wl-contrast-rgb), 0.35);
    font-weight: 400;
    font-style: italic;
}

/* Responsive */
@media (max-width: 480px) {
    .gain-amount[b-yvkogfm0ls] {
        font-size: 1.125rem;
    }
}
/* /Components/Shared/Fame/CountryDetailPanel.razor.rz.scp.css */
/* ============================================
   COUNTRY DETAIL PANEL - Slide-in Side Panel
   Theme: Luxury detail view for per-country fans
   ============================================ */

/* Panel Container */
.country-panel[b-xzpklwyqrd] {
    display: none;
    overflow-y: auto;
    padding: 1.5rem;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.98) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.95) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    box-shadow: -4px 0 20px var(--wl-shadow-color);
    max-height: 600px;
    align-self: start;
}

.country-panel.open[b-xzpklwyqrd] {
    display: block;
}

.country-panel[b-xzpklwyqrd]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
        rgba(var(--wl-gold-rgb), 0.4) 0%,
        rgba(var(--wl-gold-rgb), 0.1) 50%,
        transparent 100%);
}

/* Backdrop (mobile tap-to-close) */
.panel-backdrop[b-xzpklwyqrd] {
    display: none;
}

/* Header */
.panel-header[b-xzpklwyqrd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.header-left[b-xzpklwyqrd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.iso-badge[b-xzpklwyqrd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    padding: 0.25rem 0.5rem;
    background: linear-gradient(135deg,
        var(--wl-gold-bg-hover) 0%,
        rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid var(--wl-gold-border);
    border-radius: 6px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9375rem;
    letter-spacing: 0.05em;
    color: var(--wl-gold);
}

.country-name[b-xzpklwyqrd] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.3;
}

.home-badge[b-xzpklwyqrd] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #22C55E;
}

.home-badge svg[b-xzpklwyqrd] {
    width: 0.75rem;
    height: 0.75rem;
}

.close-btn[b-xzpklwyqrd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 6px;
    color: var(--wl-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.close-btn:hover[b-xzpklwyqrd] {
    background: rgba(var(--wl-contrast-rgb), 0.1);
    color: var(--wl-text-primary);
    border-color: var(--wl-border-medium);
}

.close-btn svg[b-xzpklwyqrd] {
    width: 1rem;
    height: 1rem;
}

/* Meta Row */
.meta-row[b-xzpklwyqrd] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-radius: 8px;
    border: 1px solid var(--wl-border-subtle);
}

.meta-item[b-xzpklwyqrd] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1;
    min-width: 0;
}

.meta-label[b-xzpklwyqrd] {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
}

.meta-value[b-xzpklwyqrd] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    font-variant-numeric: tabular-nums;
}

.economy-stars[b-xzpklwyqrd] {
    font-size: 0.6875rem;
    letter-spacing: 0.02em;
    color: var(--wl-gold);
}

/* Total Fans Section */
.total-fans-section[b-xzpklwyqrd] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.08) 0%,
        rgba(var(--wl-gold-rgb), 0.02) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    border-radius: 10px;
}

.total-fans-label[b-xzpklwyqrd] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
    margin-bottom: 0.25rem;
}

.total-fans-value[b-xzpklwyqrd] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.5rem;
    line-height: 1;
    color: var(--wl-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Branch List */
.branch-list[b-xzpklwyqrd] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

/* Branch Row */
.branch-row[b-xzpklwyqrd] {
    padding: 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-radius: 8px;
    border: 1px solid var(--wl-border-subtle);
    border-left: 3px solid var(--wl-text-muted);
    transition: border-color 0.2s ease;
}

.branch-row.branch-music[b-xzpklwyqrd] {
    border-left-color: #EF4444;
}

.branch-row.branch-film[b-xzpklwyqrd] {
    border-left-color: #3B82F6;
}

.branch-row.branch-fashion[b-xzpklwyqrd] {
    border-left-color: var(--wl-pink);
}

.branch-header[b-xzpklwyqrd] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.branch-icon[b-xzpklwyqrd] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.branch-icon svg[b-xzpklwyqrd] {
    width: 1.125rem;
    height: 1.125rem;
}

.branch-music .branch-icon[b-xzpklwyqrd] {
    color: #EF4444;
}

.branch-film .branch-icon[b-xzpklwyqrd] {
    color: #3B82F6;
}

.branch-fashion .branch-icon[b-xzpklwyqrd] {
    color: var(--wl-pink);
}

.branch-name[b-xzpklwyqrd] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    flex: 1;
}

.branch-total[b-xzpklwyqrd] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--wl-text-primary);
    font-variant-numeric: tabular-nums;
}

/* Tier Breakdown */
.tier-breakdown[b-xzpklwyqrd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 2rem;
}

.tier-item[b-xzpklwyqrd] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.tier-dot[b-xzpklwyqrd] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tier-item.casual .tier-dot[b-xzpklwyqrd] {
    background: var(--wl-text-muted);
}

.tier-item.regular .tier-dot[b-xzpklwyqrd] {
    background: var(--wl-gold);
}

.tier-item.hardcore .tier-dot[b-xzpklwyqrd] {
    background: var(--wl-purple);
}

.tier-label[b-xzpklwyqrd] {
    flex: 1;
    font-weight: 500;
}

.tier-count[b-xzpklwyqrd] {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: rgba(var(--wl-contrast-rgb), 0.85);
}

/* Branch Activity */
.branch-activity[b-xzpklwyqrd] {
    margin-top: 0.375rem;
    padding-left: 2rem;
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    font-style: italic;
}

/* Important Market Badge */
.important-badge[b-xzpklwyqrd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: linear-gradient(135deg,
        rgba(var(--wl-gold-rgb), 0.12) 0%,
        rgba(var(--wl-gold-rgb), 0.04) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.25);
    border-radius: 8px;
}

.important-badge[b-xzpklwyqrd]  svg {
    width: 1rem;
    height: 1rem;
    color: var(--wl-gold);
    filter: drop-shadow(0 0 4px rgba(var(--wl-gold-rgb), 0.5));
}

.important-badge span[b-xzpklwyqrd] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-gold);
}

/* Scrollbar Styling */
.country-panel[b-xzpklwyqrd]::-webkit-scrollbar {
    width: 4px;
}

.country-panel[b-xzpklwyqrd]::-webkit-scrollbar-track {
    background: transparent;
}

.country-panel[b-xzpklwyqrd]::-webkit-scrollbar-thumb {
    background: rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 2px;
}

.country-panel[b-xzpklwyqrd]::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--wl-bg-tertiary-rgb), 0.5);
}

/* Responsive - Mobile Full Width */
@media (max-width: 768px) {
    .country-panel.open[b-xzpklwyqrd] {
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        max-height: none;
        z-index: 50;
        border-radius: 0;
    }

    .panel-backdrop[b-xzpklwyqrd] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 49;
        background: var(--wl-overlay-light);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
}

@media (max-width: 640px) {
    .country-panel[b-xzpklwyqrd] {
        padding: 1.25rem;
    }

    .total-fans-value[b-xzpklwyqrd] {
        font-size: 2rem;
    }

    .meta-row[b-xzpklwyqrd] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .meta-item[b-xzpklwyqrd] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}
/* /Components/Shared/Fame/InfluenceBar.razor.rz.scp.css */
/* ============================================
   INFLUENCE BAR - Fame 2.0 Resource Display
   Theme: Gold/amber luxury with lightning motif
   ============================================ */

.influence-bar[b-e31p117aqj] {
    position: relative;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    overflow: hidden;
    cursor: help;
    transition: all 0.2s ease;
    margin-bottom: 1.5rem;
}

.influence-bar[b-e31p117aqj]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.5) 50%,
        transparent 100%);
}

.influence-bar:hover[b-e31p117aqj] {
    border-color: var(--wl-gold-border);
    box-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.08);
}

/* Header */
.influence-header[b-e31p117aqj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.influence-icon[b-e31p117aqj] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--wl-gold);
    filter: drop-shadow(0 0 4px rgba(var(--wl-gold-rgb), 0.5));
}

.influence-icon svg[b-e31p117aqj] {
    width: 100%;
    height: 100%;
}

.influence-label[b-e31p117aqj] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--wl-gold);
    text-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.3);
}

/* Bar Container */
.influence-bar-container[b-e31p117aqj] {
    position: relative;
    height: 1.5rem;
    background: var(--wl-border-medium);
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 0.625rem;
}

.influence-bar-container[b-e31p117aqj]::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--wl-gold-bg-hover);
    border-radius: 0.75rem;
    pointer-events: none;
}

.influence-bar-fill[b-e31p117aqj] {
    height: 100%;
    background: linear-gradient(90deg,
        var(--wl-gold-dark) 0%,
        var(--wl-gold) 40%,
        var(--wl-gold-light) 60%,
        #F5D76E 100%);
    border-radius: 0.75rem;
    box-shadow:
        0 0 20px rgba(var(--wl-gold-rgb), 0.4),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.2);
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.influence-bar-fill[b-e31p117aqj]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg,
        rgba(var(--wl-contrast-rgb), 0.15) 0%,
        transparent 100%);
    border-radius: 0.75rem 0.75rem 0 0;
}

/* Value Text */
.influence-value[b-e31p117aqj] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(0, 0, 0, 0.3);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.025em;
}

/* Regen Info */
.influence-regen-info[b-e31p117aqj] {
    font-size: 0.6875rem;
    color: var(--wl-text-muted);
    text-align: center;
    letter-spacing: 0.02em;
}

/* Responsive */
@media (max-width: 640px) {
    .influence-bar[b-e31p117aqj] {
        padding: 0.875rem 1rem;
    }

    .influence-bar-container[b-e31p117aqj] {
        height: 1.25rem;
    }

    .influence-value[b-e31p117aqj] {
        font-size: 0.75rem;
    }

    .influence-regen-info[b-e31p117aqj] {
        font-size: 0.625rem;
    }
}
/* /Components/Shared/Fame/RegionSummaryCards.razor.rz.scp.css */
/* ============================================
   REGION SUMMARY CARDS - Compact Region Grid
   Theme: Luxury data cards with hotspot accents
   ============================================ */

.region-cards-grid[b-ocwsfl9732] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.625rem;
}

/* ============================================
   CARD BASE
   ============================================ */

.region-card[b-ocwsfl9732] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.875rem 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    border-radius: 8px;
    transition: all 0.2s ease;
    cursor: help;
    gap: 0.125rem;
}

.region-card:hover[b-ocwsfl9732] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    transform: translateY(-2px);
}

/* ============================================
   CARD STATES
   ============================================ */

.region-card.active[b-ocwsfl9732] {
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.region-card.active:hover[b-ocwsfl9732] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
    box-shadow: 0 4px 16px rgba(var(--wl-gold-rgb), 0.1);
}

.region-card.inactive[b-ocwsfl9732] {
    opacity: 0.5;
}

.region-card.inactive:hover[b-ocwsfl9732] {
    opacity: 0.7;
}

.region-card.hotspot[b-ocwsfl9732] {
    border-color: rgba(249, 115, 22, 0.4);
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.12);
    opacity: 1;
}

.region-card.hotspot[b-ocwsfl9732]::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15) 0%, transparent 50%);
    pointer-events: none;
}

.region-card.hotspot:hover[b-ocwsfl9732] {
    box-shadow: 0 0 28px rgba(249, 115, 22, 0.2);
}

/* ============================================
   HOTSPOT BADGE
   ============================================ */

.hotspot-badge[b-ocwsfl9732] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F97316, #EA580C);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
    animation: hotspot-pulse-b-ocwsfl9732 2s ease-in-out infinite;
    z-index: 2;
}

.hotspot-badge svg[b-ocwsfl9732] {
    width: 10px;
    height: 10px;
    color: white;
}

@keyframes hotspot-pulse-b-ocwsfl9732 {
    0%, 100% { box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4); }
    50% { box-shadow: 0 2px 14px rgba(249, 115, 22, 0.6); }
}

/* ============================================
   CARD CONTENT
   ============================================ */

.region-abbr[b-ocwsfl9732] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-variant-caps: small-caps;
    color: var(--wl-gold);
    line-height: 1;
}

.region-card.inactive .region-abbr[b-ocwsfl9732] {
    color: var(--wl-text-muted);
}

.region-card.hotspot .region-abbr[b-ocwsfl9732] {
    color: #F97316;
}

.region-name[b-ocwsfl9732] {
    display: block;
    font-size: 0.6875rem;
    font-weight: 500;
    color: rgba(var(--wl-contrast-rgb), 0.7);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.region-fans[b-ocwsfl9732] {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.375rem;
    line-height: 1;
    color: var(--wl-text-primary);
    text-shadow: 0 0 20px rgba(var(--wl-contrast-rgb), 0.15);
}

.region-card.hotspot .region-fans[b-ocwsfl9732] {
    color: #F97316;
    text-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}

.region-countries[b-ocwsfl9732] {
    display: block;
    font-size: 0.5625rem;
    color: var(--wl-text-muted);
    letter-spacing: 0.02em;
}

.region-empty[b-ocwsfl9732] {
    display: block;
    font-size: 0.625rem;
    color: var(--wl-text-muted);
    font-style: italic;
    margin-top: 0.25rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .region-cards-grid[b-ocwsfl9732] {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 400px) {
    .region-cards-grid[b-ocwsfl9732] {
        grid-template-columns: repeat(2, 1fr);
    }

    .region-card[b-ocwsfl9732] {
        padding: 0.75rem 0.375rem;
    }

    .region-fans[b-ocwsfl9732] {
        font-size: 1.125rem;
    }
}
/* /Components/Shared/Fame/ReleaseImpactPreviewCard.razor.rz.scp.css */
/* ============================================
   RELEASE IMPACT PREVIEW CARD
   Theme: Compact luxury card with tier distribution
   ============================================ */

.release-impact-card[b-fxx3qzzhs7] {
    position: relative;
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    overflow: hidden;
}

.release-impact-card[b-fxx3qzzhs7]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 50%,
        transparent 100%);
}

.impact-card-glow[b-fxx3qzzhs7] {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(var(--wl-gold-rgb), 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Header */
.impact-card-header[b-fxx3qzzhs7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.impact-card-icon[b-fxx3qzzhs7] {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--wl-gold);
    opacity: 0.8;
}

.impact-card-header h3[b-fxx3qzzhs7] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin: 0;
}

/* Total Expected Fans */
.impact-total-fans[b-fxx3qzzhs7] {
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.total-fans-value[b-fxx3qzzhs7] {
    display: block;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.25rem;
    line-height: 1;
    color: #22C55E;
    text-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
    margin-bottom: 0.25rem;
}

.total-fans-label[b-fxx3qzzhs7] {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
}

/* Tier Distribution Bar */
.impact-tier-bar[b-fxx3qzzhs7] {
    margin-bottom: 1rem;
}

.tier-bar-track[b-fxx3qzzhs7] {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--wl-border-medium);
    margin-bottom: 0.625rem;
}

.tier-bar-casual[b-fxx3qzzhs7] {
    background: #666666;
    transition: width 0.6s ease-out;
}

.tier-bar-regular[b-fxx3qzzhs7] {
    background: var(--wl-gold);
    transition: width 0.6s ease-out;
}

.tier-bar-hardcore[b-fxx3qzzhs7] {
    background: var(--wl-purple);
    transition: width 0.6s ease-out;
}

.tier-bar-legend[b-fxx3qzzhs7] {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.tier-legend-item[b-fxx3qzzhs7] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.6875rem;
}

.legend-dot[b-fxx3qzzhs7] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tier-legend-item.casual .legend-dot[b-fxx3qzzhs7] {
    background: #666666;
}

.tier-legend-item.regular .legend-dot[b-fxx3qzzhs7] {
    background: var(--wl-gold);
}

.tier-legend-item.hardcore .legend-dot[b-fxx3qzzhs7] {
    background: var(--wl-purple);
}

.legend-label[b-fxx3qzzhs7] {
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.legend-pct[b-fxx3qzzhs7] {
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    font-variant-numeric: tabular-nums;
}

/* Modifiers */
.impact-modifiers[b-fxx3qzzhs7] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.modifier-row[b-fxx3qzzhs7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border-radius: 4px;
}

.modifier-label[b-fxx3qzzhs7] {
    font-size: 0.6875rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.modifier-value[b-fxx3qzzhs7] {
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.modifier-value.positive[b-fxx3qzzhs7] {
    color: #22C55E;
}

.modifier-value.negative[b-fxx3qzzhs7] {
    color: #EF4444;
}

/* Hype Bar */
.hype-bar-container[b-fxx3qzzhs7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    max-width: 140px;
}

.hype-bar[b-fxx3qzzhs7] {
    flex: 1;
    height: 4px;
    background: var(--wl-border-medium);
    border-radius: 2px;
    overflow: hidden;
}

.hype-bar-fill[b-fxx3qzzhs7] {
    height: 100%;
    background: linear-gradient(90deg, var(--wl-gold-dark), var(--wl-gold));
    border-radius: 2px;
    transition: width 0.6s ease-out;
}

.hype-value[b-fxx3qzzhs7] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--wl-gold);
    font-variant-numeric: tabular-nums;
    min-width: 1.5rem;
    text-align: right;
}

/* Responsive */
@media (max-width: 640px) {
    .tier-bar-legend[b-fxx3qzzhs7] {
        flex-direction: column;
        gap: 0.25rem;
    }

    .tier-legend-item[b-fxx3qzzhs7] {
        justify-content: space-between;
    }
}

.modifier-hint[b-fxx3qzzhs7] {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    font-style: italic;
    color: var(--wl-text-muted);
    line-height: 1.4;
}
/* /Components/Shared/Fame/WorldMap.razor.rz.scp.css */
/* ============================================
   WORLD MAP - Fame Choropleth Map
   Theme: Gray -> Purple -> Gold gradient
   ============================================ */

.world-map-container[b-g5ozpmzlf1] {
    position: relative;
    width: 100%;
}

/* SVG Map */
.world-map-svg[b-g5ozpmzlf1] {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
}

/* Country Paths - Base */
.country-path[b-g5ozpmzlf1] {
    stroke: rgba(var(--wl-contrast-rgb), 0.15);
    stroke-width: 0.5;
    cursor: pointer;
    transition: fill 0.2s ease, stroke 0.2s ease, stroke-width 0.15s ease;
}

.country-path:hover[b-g5ozpmzlf1] {
    stroke: rgba(var(--wl-contrast-rgb), 0.4);
    stroke-width: 1;
    filter: brightness(1.15);
}

/* Selected Country */
.country-path.selected[b-g5ozpmzlf1] {
    stroke: var(--wl-gold);
    stroke-width: 1.5;
    filter: drop-shadow(0 0 3px rgba(var(--wl-gold-rgb), 0.5));
}

/* Home Country */
.country-path.home[b-g5ozpmzlf1] {
    stroke: var(--wl-gold);
    stroke-width: 1;
    stroke-dasharray: 3 2;
}

.country-path.home.selected[b-g5ozpmzlf1] {
    stroke-dasharray: none;
    stroke-width: 1.5;
}

/* ============================================
   CHOROPLETH TIERS - Fill Colors
   Gray -> Purple -> Gold gradient
   ============================================ */

/* Tier None: No fans - neutral gray */
.country-path.tier-none[b-g5ozpmzlf1] {
    fill: rgba(var(--wl-contrast-rgb), 0.06);
}

/* Tier 1: <5% - light purple */
.country-path.tier-1[b-g5ozpmzlf1] {
    fill: rgba(var(--wl-purple-rgb), 0.2);
}

/* Tier 2: <15% - medium purple */
.country-path.tier-2[b-g5ozpmzlf1] {
    fill: rgba(var(--wl-purple-rgb), 0.35);
}

/* Tier 3: <30% - dark purple */
.country-path.tier-3[b-g5ozpmzlf1] {
    fill: rgba(var(--wl-purple-rgb), 0.55);
}

/* Tier 4: <50% - light gold */
.country-path.tier-4[b-g5ozpmzlf1] {
    fill: rgba(var(--wl-gold-rgb), 0.35);
}

/* Tier 5: <75% - medium gold */
.country-path.tier-5[b-g5ozpmzlf1] {
    fill: rgba(var(--wl-gold-rgb), 0.55);
}

/* Tier 6: >=75% - bright gold */
.country-path.tier-6[b-g5ozpmzlf1] {
    fill: rgba(var(--wl-gold-rgb), 0.8);
}

/* ============================================
   LEGEND
   ============================================ */

.legend[b-g5ozpmzlf1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0 1rem;
}

.legend-label[b-g5ozpmzlf1] {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--wl-text-muted);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.legend-bar[b-g5ozpmzlf1] {
    display: flex;
    height: 0.5rem;
    border-radius: 0.25rem;
    overflow: hidden;
    flex: 1;
    max-width: 16rem;
    border: 1px solid var(--wl-border-subtle);
}

.legend-segment[b-g5ozpmzlf1] {
    flex: 1;
}

/* Legend tier background colors */
.tier-none-bg[b-g5ozpmzlf1] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.tier-1-bg[b-g5ozpmzlf1] {
    background: rgba(var(--wl-purple-rgb), 0.2);
}

.tier-2-bg[b-g5ozpmzlf1] {
    background: rgba(var(--wl-purple-rgb), 0.35);
}

.tier-3-bg[b-g5ozpmzlf1] {
    background: rgba(var(--wl-purple-rgb), 0.55);
}

.tier-4-bg[b-g5ozpmzlf1] {
    background: rgba(var(--wl-gold-rgb), 0.35);
}

.tier-5-bg[b-g5ozpmzlf1] {
    background: rgba(var(--wl-gold-rgb), 0.55);
}

.tier-6-bg[b-g5ozpmzlf1] {
    background: rgba(var(--wl-gold-rgb), 0.8);
}

/* ============================================
   LOADING STATE
   ============================================ */

.map-loading[b-g5ozpmzlf1] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-radius: 8px;
    border: 1px solid var(--wl-border-subtle);
}

.loading-text[b-g5ozpmzlf1] {
    font-size: 0.8125rem;
    color: var(--wl-text-muted);
    letter-spacing: 0.02em;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .legend[b-g5ozpmzlf1] {
        gap: 0.375rem;
        margin-top: 0.5rem;
    }

    .legend-label[b-g5ozpmzlf1] {
        font-size: 0.625rem;
    }

    .legend-bar[b-g5ozpmzlf1] {
        height: 0.375rem;
        max-width: 12rem;
    }
}
/* /Components/Shared/Fame/WorldMapSection.razor.rz.scp.css */
.world-map-section[b-r2mvnj1vdq] {
    background: linear-gradient(180deg,
        rgba(var(--wl-bg-modal-rgb), 0.95) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.9) 100%);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.world-map-section[b-r2mvnj1vdq]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 50%,
        transparent 100%);
}

.wms-header[b-r2mvnj1vdq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.wms-header .fame-section-title[b-r2mvnj1vdq] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    margin: 0;
    cursor: help;
    transition: color 0.2s ease, text-shadow 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.wms-header .fame-section-title:hover[b-r2mvnj1vdq] {
    color: var(--wl-gold-light);
    text-shadow: 0 0 20px rgba(var(--wl-gold-rgb), 0.4);
    background: rgba(var(--wl-gold-rgb), 0.05);
}

.wms-header .fame-section-title[b-r2mvnj1vdq]  svg {
    width: 1rem;
    height: 1rem;
    opacity: 0.8;
}

.wms-header .fame-section-title:hover[b-r2mvnj1vdq]  svg {
    opacity: 1;
}

.wms-desktop[b-r2mvnj1vdq] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.wms-desktop:has(.country-panel.open)[b-r2mvnj1vdq] {
    grid-template-columns: 1fr 320px;
}

.wms-mobile[b-r2mvnj1vdq] {
    display: none;
}

.wms-map-area[b-r2mvnj1vdq] {
    position: relative;
}

/* Mobile country list */
.mobile-region-group[b-r2mvnj1vdq] {
    margin-bottom: 1rem;
}

.mobile-region-title[b-r2mvnj1vdq] {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-gold);
    padding-bottom: 0.375rem;
    border-bottom: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    margin-bottom: 0.375rem;
}

.mobile-country-row[b-r2mvnj1vdq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid rgba(var(--wl-contrast-rgb), 0.04);
    cursor: pointer;
    transition: background 0.15s;
}

.mobile-country-row:hover[b-r2mvnj1vdq] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
}

.mobile-country-iso[b-r2mvnj1vdq] {
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--wl-text-muted);
    width: 1.75rem;
    text-align: center;
}

.mobile-country-name[b-r2mvnj1vdq] {
    flex: 1;
    font-size: 0.8125rem;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.mobile-home-tag[b-r2mvnj1vdq] {
    font-size: 0.5625rem;
    padding: 0 0.25rem;
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
    border-radius: 3px;
    margin-left: 0.25rem;
    font-weight: 600;
}

.mobile-country-fans[b-r2mvnj1vdq] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(var(--wl-contrast-rgb), 0.8);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .wms-desktop[b-r2mvnj1vdq] {
        display: none;
    }
    .wms-mobile[b-r2mvnj1vdq] {
        display: block;
    }
}
/* /Components/Shared/FeedModeToggle.razor.rz.scp.css */
.feed-mode-toggle[b-7qzjoeifvc] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 100px;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: auto;
}

.feed-mode-toggle:hover:not(.feed-mode-toggle--active):not(.feed-mode-toggle--disabled)[b-7qzjoeifvc] {
    background: var(--wl-border-subtle);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.feed-mode-toggle--active[b-7qzjoeifvc] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    border-color: rgba(var(--wl-gold-rgb), 0.25);
    color: var(--wl-gold);
}

.feed-mode-toggle--disabled[b-7qzjoeifvc] {
    opacity: 0.4;
    cursor: not-allowed;
}

.feed-mode-toggle svg[b-7qzjoeifvc] {
    width: 14px;
    height: 14px;
}
/* /Components/Shared/GlobalSearchBox.razor.rz.scp.css */
.gsearch[b-0orx9sughr] {
    position: relative;
    margin-bottom: 0.75rem;
}

.gsearch-field[b-0orx9sughr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    background: linear-gradient(135deg, rgba(var(--wl-bg-modal-rgb), 0.9) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.95) 100%);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 10px;
    transition: border-color 0.2s ease;
}

.gsearch-field:focus-within[b-0orx9sughr] {
    border-color: rgba(var(--wl-gold-rgb), 0.5);
}

.gsearch-icon[b-0orx9sughr] {
    width: 0.9rem;
    height: 0.9rem;
    color: rgba(var(--wl-gold-rgb), 0.6);
    flex-shrink: 0;
}

.gsearch-input[b-0orx9sughr] {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--wl-text-primary);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 0.8rem;
}

.gsearch-input[b-0orx9sughr]::placeholder {
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.gsearch-clear[b-0orx9sughr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--wl-text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.gsearch-clear svg[b-0orx9sughr] {
    width: 0.85rem;
    height: 0.85rem;
}

.gsearch-clear:hover[b-0orx9sughr] {
    color: var(--wl-text-primary);
}

.gsearch-dropdown[b-0orx9sughr] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 320px;
    overflow-y: auto;
    background: var(--wl-bg-secondary);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 10px;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6);
    padding: 0.25rem;
}

.gsearch-status[b-0orx9sughr] {
    padding: 0.85rem;
    text-align: center;
    font-size: 0.78rem;
    color: var(--wl-text-muted);
}

.gsearch-result[b-0orx9sughr] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.gsearch-result:hover[b-0orx9sughr] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
}

.gsearch-result-avatar[b-0orx9sughr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.5);
}

.gsearch-result-avatar img[b-0orx9sughr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gsearch-result-avatar svg[b-0orx9sughr] {
    width: 1.1rem;
    height: 1.1rem;
}

.gsearch-result-text[b-0orx9sughr] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.gsearch-result-title[b-0orx9sughr] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gsearch-result-sub[b-0orx9sughr] {
    font-size: 0.72rem;
    color: var(--wl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gsearch-spinner[b-0orx9sughr] {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(var(--wl-contrast-rgb), 0.15);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: gsearch-spin-b-0orx9sughr 0.7s linear infinite;
}

@keyframes gsearch-spin-b-0orx9sughr {
    to { transform: rotate(360deg); }
}
/* /Components/Shared/InsufficientAiPointsModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-juswlvcgur] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
    padding: 1rem;
}

/* Modal Container */
.modal-container[b-juswlvcgur] {
    position: relative;
    background: linear-gradient(145deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.98) 100%);
    border: 1px solid rgba(var(--wl-purple-rgb), 0.3);
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 24rem;
    width: 100%;
    box-shadow: 0 0 40px rgba(var(--wl-purple-rgb), 0.2),
                inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.05);
}

/* Close Button */
.modal-close[b-juswlvcgur] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-text-muted);
    background: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover[b-juswlvcgur] {
    color: var(--wl-text-primary);
    background: var(--wl-border-medium);
}

.modal-close :deep(svg)[b-juswlvcgur] {
    width: 1.25rem;
    height: 1.25rem;
}

/* Modal Header */
.modal-header[b-juswlvcgur] {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-icon[b-juswlvcgur] {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.2), rgba(var(--wl-purple-rgb), 0.1));
    border: 1px solid rgba(var(--wl-purple-rgb), 0.3);
    border-radius: 50%;
    margin-bottom: 1rem;
    color: var(--wl-purple);
}

.modal-icon :deep(svg)[b-juswlvcgur] {
    width: 2rem;
    height: 2rem;
}

.modal-title[b-juswlvcgur] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
    text-align: center;
}

/* Modal Body */
.modal-body[b-juswlvcgur] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.modal-message[b-juswlvcgur] {
    color: rgba(var(--wl-contrast-rgb), 0.7);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

.shortage-badge[b-juswlvcgur] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(var(--wl-red-rgb), 0.15);
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
    border-radius: 9999px;
    color: #EF4444;
    font-weight: 600;
    font-size: 0.9375rem;
}

.shortage-icon[b-juswlvcgur] {
    width: 1rem;
    height: 1rem;
}

/* Packages Section */
.packages-section[b-juswlvcgur] {
    margin-bottom: 1.5rem;
}

.packages-label[b-juswlvcgur] {
    color: var(--wl-text-muted);
    font-size: 0.875rem;
    margin: 0 0 0.75rem 0;
}

.packages-grid[b-juswlvcgur] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

/* Package Card */
.package-card[b-juswlvcgur] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.package-card:hover[b-juswlvcgur] {
    background: rgba(var(--wl-purple-rgb), 0.1);
    border-color: rgba(var(--wl-purple-rgb), 0.3);
    transform: translateY(-2px);
}

.package-card.recommended[b-juswlvcgur] {
    background: rgba(var(--wl-purple-rgb), 0.15);
    border-color: rgba(var(--wl-purple-rgb), 0.5);
    box-shadow: 0 0 20px rgba(var(--wl-purple-rgb), 0.2);
}

.package-card.recommended:hover[b-juswlvcgur] {
    background: rgba(var(--wl-purple-rgb), 0.2);
    border-color: rgba(var(--wl-purple-rgb), 0.6);
}

.package-points[b-juswlvcgur] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--wl-purple);
}

.package-label[b-juswlvcgur] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.package-price[b-juswlvcgur] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    margin-top: 0.25rem;
}

.package-badge[b-juswlvcgur] {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-purple), var(--wl-purple));
    border-radius: 50%;
    color: white;
}

.package-badge :deep(svg)[b-juswlvcgur] {
    width: 0.875rem;
    height: 0.875rem;
}

/* Modal Footer */
.modal-footer[b-juswlvcgur] {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid var(--wl-border-medium);
}

.shop-link[b-juswlvcgur] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-purple);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.shop-link:hover[b-juswlvcgur] {
    color: var(--wl-purple-light, #C084FC);
}

.shop-link :deep(svg)[b-juswlvcgur] {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.2s ease;
}

.shop-link:hover :deep(svg)[b-juswlvcgur] {
    transform: translateX(4px);
}
/* /Components/Shared/LuxuryModal.razor.rz.scp.css */
.luxury-modal-overlay[b-z1bmgafh1d] {
    position: fixed;
    inset: 0;
    background: var(--wl-overlay-bg);
    backdrop-filter: blur(4px);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: overlayFadeIn-b-z1bmgafh1d 0.2s ease-out;
    overflow-y: auto;
}

@keyframes overlayFadeIn-b-z1bmgafh1d {
    from { opacity: 0; }
    to { opacity: 1; }
}

.luxury-modal[b-z1bmgafh1d] {
    position: relative;
    width: 100%;
    max-height: calc(100vh - 100px);
    overflow: hidden;
    background: linear-gradient(135deg, rgba(var(--wl-bg-modal-rgb), 0.98) 0%, rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%);
    border: 1px solid var(--wl-gold-border);
    animation: modalSlideUp-b-z1bmgafh1d 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    box-shadow:
        0 0 0 1px var(--wl-shadow-color),
        0 25px 80px var(--wl-shadow-color),
        0 0 100px rgba(var(--wl-gold-rgb), 0.05);
}

@keyframes modalSlideUp-b-z1bmgafh1d {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Size variants */
.luxury-modal.modal-small[b-z1bmgafh1d] { max-width: 400px; }
.luxury-modal.modal-medium[b-z1bmgafh1d] { max-width: 600px; }
.luxury-modal.modal-large[b-z1bmgafh1d] { max-width: 800px; }
.luxury-modal.modal-fullwidth[b-z1bmgafh1d] { max-width: 95vw; }

/* Corner decorations */
.modal-corner[b-z1bmgafh1d] {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    border-style: solid;
    pointer-events: none;
    z-index: 2;
}

.modal-corner-tl[b-z1bmgafh1d] {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}

.modal-corner-tr[b-z1bmgafh1d] {
    top: -1px;
    right: -1px;
    border-width: 2px 2px 0 0;
}

.modal-corner-bl[b-z1bmgafh1d] {
    bottom: -1px;
    left: -1px;
    border-width: 0 0 2px 2px;
}

.modal-corner-br[b-z1bmgafh1d] {
    bottom: -1px;
    right: -1px;
    border-width: 0 2px 2px 0;
}

/* Edge accents */
.modal-edge[b-z1bmgafh1d] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--wl-gold-rgb), 0.4) 20%,
        rgba(var(--wl-gold-rgb), 0.6) 50%,
        rgba(var(--wl-gold-rgb), 0.4) 80%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 2;
}

.modal-edge-top[b-z1bmgafh1d] {
    top: 0;
}

.modal-edge-bottom[b-z1bmgafh1d] {
    bottom: 0;
}

/* Glow effects - inside modal to prevent overflow */
.modal-glow[b-z1bmgafh1d] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 40px;
    pointer-events: none;
    z-index: 1;
}

.modal-glow-top[b-z1bmgafh1d] {
    top: 0;
    background: radial-gradient(ellipse at center top, var(--wl-gold-bg-hover) 0%, transparent 80%);
}

.modal-glow-bottom[b-z1bmgafh1d] {
    bottom: 0;
    background: radial-gradient(ellipse at center bottom, var(--wl-gold-bg) 0%, transparent 80%);
}

/* Close button */
.modal-close[b-z1bmgafh1d] {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border: 1px solid var(--wl-border-medium);
    color: rgba(163, 163, 163, 0.6);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.modal-close:hover[b-z1bmgafh1d] {
    background: var(--wl-gold-bg);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
    color: var(--wl-gold);
}

.modal-close svg[b-z1bmgafh1d] {
    width: 100%;
    height: 100%;
}

/* Header */
.modal-header[b-z1bmgafh1d] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 28px 48px 20px;
    border-bottom: 1px solid var(--wl-gold-bg-hover);
}

.modal-title[b-z1bmgafh1d] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-gold);
    margin: 0;
    text-shadow: 0 0 30px rgba(var(--wl-gold-rgb), 0.4);
}

.modal-title-decoration[b-z1bmgafh1d] {
    flex: 1;
    max-width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.4));
}

.modal-title-decoration:last-child[b-z1bmgafh1d] {
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.4), transparent);
}

/* Content */
.modal-content[b-z1bmgafh1d] {
    padding: 28px 36px;
    color: rgba(220, 220, 220, 0.9);
    font-family: 'Source Sans 3', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

/* Footer */
.modal-footer[b-z1bmgafh1d] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 32px 24px;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.05);
}

/* Common button styles for modal */
[b-z1bmgafh1d] .modal-btn {
    padding: 10px 24px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.2s;
}

[b-z1bmgafh1d] .modal-btn-primary {
    background: linear-gradient(135deg, var(--wl-gold-bg-hover) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-gold-rgb), 0.4);
    color: var(--wl-gold);
}

[b-z1bmgafh1d] .modal-btn-primary:hover {
    background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.25) 0%, var(--wl-gold-bg) 100%);
    border-color: var(--wl-gold);
    box-shadow: 0 0 20px var(--wl-gold-border);
}

[b-z1bmgafh1d] .modal-btn-secondary {
    background: transparent;
    border-color: var(--wl-border-medium);
    color: rgba(163, 163, 163, 0.8);
}

[b-z1bmgafh1d] .modal-btn-secondary:hover {
    background: rgba(var(--wl-contrast-rgb), 0.03);
    border-color: rgba(var(--wl-contrast-rgb), 0.2);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

/* Common content styles */
[b-z1bmgafh1d] .help-section {
    margin-bottom: 28px;
}

[b-z1bmgafh1d] .help-section:last-of-type {
    margin-bottom: 0;
}

[b-z1bmgafh1d] .help-section h3 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    margin: 10px 0 12px 0;
}

[b-z1bmgafh1d] .help-section p {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(200, 200, 200, 0.9);
    margin: 0 0 12px 0;
}

[b-z1bmgafh1d] .help-section p:last-child {
    margin-bottom: 0;
}

[b-z1bmgafh1d] .help-section ul {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 14px;
    line-height: 1.8;
    color: rgba(200, 200, 200, 0.9);
    margin: 0;
    padding-left: 24px;
}

[b-z1bmgafh1d] .help-section li {
    margin-bottom: 8px;
}

[b-z1bmgafh1d] .help-section li:last-child {
    margin-bottom: 0;
}

[b-z1bmgafh1d] .help-section strong {
    color: var(--wl-gold);
}

[b-z1bmgafh1d] .help-controls {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--wl-gold-border);
}

[b-z1bmgafh1d] .help-controls p {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    color: rgba(163, 163, 163, 0.7);
    margin: 0;
    text-align: center;
    line-height: 1.6;
}

[b-z1bmgafh1d] .help-controls strong {
    color: rgba(var(--wl-contrast-rgb), 0.85);
}

/* Responsive */
@media (max-width: 640px) {
    .luxury-modal-overlay[b-z1bmgafh1d] {
        padding: 12px;
    }

    .luxury-modal[b-z1bmgafh1d] {
        max-height: calc(100vh - 50px);
    }

    .modal-header[b-z1bmgafh1d] {
        padding: 20px 24px 16px;
    }

    .modal-title[b-z1bmgafh1d] {
        font-size: 22px;
    }

    .modal-content[b-z1bmgafh1d] {
        padding: 16px 20px;
    }

    .modal-footer[b-z1bmgafh1d] {
        padding: 12px 20px 16px;
        flex-direction: column;
    }

    [b-z1bmgafh1d] .modal-btn {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Shared/Manager/ManagerPointerOverlay.razor.rz.scp.css */
.mgr-pointer[b-na7wn1p6dz] {
    position: fixed;
    inset: 0;
    z-index: 10050; /* above fixed nav (which the cutout panels dim) */
    animation: mgr-pointer-in-b-na7wn1p6dz 0.18s ease-out;
}

.mgr-pointer-dim[b-na7wn1p6dz] {
    position: fixed;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(1px);
}
.mgr-pointer-dim--full[b-na7wn1p6dz] { inset: 0; width: 100vw; height: 100vh; }

.mgr-pointer-ring[b-na7wn1p6dz] {
    position: fixed;
    border: 2px solid var(--wl-gold);
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.35), 0 0 22px rgba(var(--wl-gold-rgb), 0.5);
    pointer-events: none;
    animation: mgr-pointer-pulse-b-na7wn1p6dz 1.8s ease-in-out infinite;
}

.mgr-pointer-panel[b-na7wn1p6dz] {
    position: fixed;
    max-width: min(320px, calc(100vw - 24px));
    padding: 16px 18px 14px;
    border-radius: 14px;
    background: var(--wl-bg-elevated, var(--wl-bg-secondary));
    border: 1px solid color-mix(in srgb, var(--wl-gold) 40%, transparent);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(var(--wl-gold-rgb), 0.15);
    color: var(--wl-text-primary);
}

.mgr-pointer-corner[b-na7wn1p6dz] {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid var(--wl-gold);
    opacity: 0.8;
}
.mgr-pointer-corner--tl[b-na7wn1p6dz] { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.mgr-pointer-corner--br[b-na7wn1p6dz] { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

.mgr-pointer-close[b-na7wn1p6dz] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--wl-text-secondary);
    cursor: pointer;
}
.mgr-pointer-close:hover[b-na7wn1p6dz] { color: var(--wl-gold); background: rgba(var(--wl-gold-rgb), 0.12); }
.mgr-pointer-close svg[b-na7wn1p6dz] { width: 16px; height: 16px; }

.mgr-pointer-label[b-na7wn1p6dz] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--wl-gold);
    margin: 2px 22px 6px 4px;
}
.mgr-pointer-hint[b-na7wn1p6dz] {
    font-size: 0.78rem;
    color: var(--wl-text-secondary);
    margin-left: 4px;
}

@keyframes mgr-pointer-in-b-na7wn1p6dz { from { opacity: 0; } to { opacity: 1; } }
@keyframes mgr-pointer-pulse-b-na7wn1p6dz {
    0%, 100% { box-shadow: 0 0 0 3px rgba(var(--wl-gold-rgb), 0.35), 0 0 18px rgba(var(--wl-gold-rgb), 0.45); }
    50% { box-shadow: 0 0 0 4px rgba(var(--wl-gold-rgb), 0.5), 0 0 28px rgba(var(--wl-gold-rgb), 0.65); }
}

@media (prefers-reduced-motion: reduce) {
    .mgr-pointer[b-na7wn1p6dz] { animation: none; }
    .mgr-pointer-ring[b-na7wn1p6dz] { animation: none; }
}
/* /Components/Shared/Messenger/ManagerStar.razor.rz.scp.css */
.mgr-star[b-ayorz9rel1] {
    position: relative;
    width: var(--mgr-star-size, 30px);
    height: var(--mgr-star-size, 30px);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--wl-gold) 30%, transparent), transparent 70%);
    border: 1px solid color-mix(in srgb, var(--wl-gold) 45%, transparent);
}

.mgr-star-glow[b-ayorz9rel1] {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--wl-gold) 45%, transparent), transparent 65%);
    animation: mgr-star-glow-b-ayorz9rel1 3s ease-in-out infinite;
    pointer-events: none;
}

.mgr-star-svg[b-ayorz9rel1] {
    position: relative;
    width: 70%;
    height: 70%;
    color: var(--wl-gold);
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--wl-gold) 60%, transparent));
    animation: mgr-star-pulse-b-ayorz9rel1 3s ease-in-out infinite;
}

.mgr-star-glint[b-ayorz9rel1] {
    position: absolute;
    width: 18%;
    height: 18%;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    box-shadow: 0 0 4px #fff;
    pointer-events: none;
}

.mgr-star-glint--1[b-ayorz9rel1] { top: 12%; right: 16%; animation: mgr-glint-b-ayorz9rel1 2.6s ease-in-out infinite; }
.mgr-star-glint--2[b-ayorz9rel1] { bottom: 18%; left: 14%; animation: mgr-glint-b-ayorz9rel1 2.6s ease-in-out 1.3s infinite; }

@keyframes mgr-star-pulse-b-ayorz9rel1 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes mgr-star-glow-b-ayorz9rel1  { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
@keyframes mgr-glint-b-ayorz9rel1      { 0%, 78%, 100% { opacity: 0; transform: scale(.4); } 38% { opacity: .9; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .mgr-star-svg[b-ayorz9rel1], .mgr-star-glow[b-ayorz9rel1], .mgr-star-glint[b-ayorz9rel1] { animation: none; }
}
/* /Components/Shared/Messenger/MessengerConversation.razor.rz.scp.css */
.dm-conversation[b-5xq5v8az6d] {
    width: 300px;
    height: 420px;
    display: flex;
    flex-direction: column;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 32px var(--wl-shadow-color);
    overflow: hidden;
}

.dm-conversation--mobile[b-5xq5v8az6d] {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
}

/* Full-page mode: fill the container the page gives it. */
.dm-conversation--full[b-5xq5v8az6d] {
    width: 100%;
    height: 100%;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}
.dm-conversation--full .dm-conv-name[b-5xq5v8az6d] { font-size: 1rem; }
.dm-conversation--full .dm-msg-bubble[b-5xq5v8az6d] { font-size: 0.92rem; max-width: 70%; }

.dm-conv-header[b-5xq5v8az6d] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border-bottom: 1px solid var(--wl-border-subtle);
    flex-shrink: 0;
}

.dm-conv-avatar-wrap[b-5xq5v8az6d] {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
}

.dm-conv-avatar[b-5xq5v8az6d] { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 1px solid var(--wl-border-subtle); }
/* Manager star sits in the same 30px slot but draws its own glow, so drop the avatar chrome. */
.dm-conv-avatar--star[b-5xq5v8az6d] { border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.dm-presence[b-5xq5v8az6d] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid var(--wl-bg-secondary);
    background: #64748b;
}
.dm-presence--on[b-5xq5v8az6d] { background: #22c55e; }
.dm-presence--offline[b-5xq5v8az6d] { background: #64748b; }

/* Free-message quota strip shown above the composer in the Manager conversation. */
.dm-manager-quota[b-5xq5v8az6d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 0.7rem;
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-gold-rgb), 0.06);
    border-top: 1px solid var(--wl-border-subtle);
}
.dm-manager-quota--paid[b-5xq5v8az6d] { color: var(--wl-gold); background: rgba(var(--wl-gold-rgb), 0.12); }
.dm-manager-quota .dm-quota-dot[b-5xq5v8az6d] { opacity: 0.5; }
.dm-manager-quota .dm-quota-cost[b-5xq5v8az6d],
.dm-manager-quota .dm-quota-balance[b-5xq5v8az6d] { font-weight: 600; }

/* Clickable action buttons the Manager can attach below a message. */
.dm-msg-actions[b-5xq5v8az6d] { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.dm-msg-action[b-5xq5v8az6d] {
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 999px;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    border: 1px solid color-mix(in srgb, var(--wl-gold) 35%, transparent);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease;
}
.dm-msg-action:hover[b-5xq5v8az6d] { background: rgba(var(--wl-gold-rgb), 0.2); }
.dm-conv-name[b-5xq5v8az6d] { flex: 1; font-weight: 600; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dm-conv-header--toggle[b-5xq5v8az6d] { cursor: pointer; }
.dm-conv-header--toggle:hover[b-5xq5v8az6d] { background: rgba(var(--wl-contrast-rgb), 0.04); }

/* New-message indicator on an open/minimized panel: count badge + gold-tinted header. */
.dm-conv-unseen[b-5xq5v8az6d] {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--wl-gold); color: var(--wl-bg-primary);
    font-size: 0.62rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.dm-conversation--unseen .dm-conv-header[b-5xq5v8az6d] { background: rgba(var(--wl-gold-rgb), 0.1); }
.dm-conversation--unseen .dm-conv-name[b-5xq5v8az6d] { font-weight: 700; }

.dm-conv-min[b-5xq5v8az6d],
.dm-conv-action[b-5xq5v8az6d],
.dm-conv-mobile-min[b-5xq5v8az6d],
.dm-conv-close[b-5xq5v8az6d] {
    background: transparent; border: none; cursor: pointer; padding: 0.25rem;
    color: var(--wl-text-muted); display: inline-flex; border-radius: 6px;
}
.dm-conv-min:hover[b-5xq5v8az6d],
.dm-conv-action:hover[b-5xq5v8az6d],
.dm-conv-mobile-min:hover[b-5xq5v8az6d],
.dm-conv-close:hover[b-5xq5v8az6d] { color: rgba(var(--wl-contrast-rgb), 0.9); }
.dm-conv-min svg[b-5xq5v8az6d],
.dm-conv-action svg[b-5xq5v8az6d],
.dm-conv-mobile-min svg[b-5xq5v8az6d] { width: 18px; height: 18px; }
.dm-conv-close svg[b-5xq5v8az6d] { width: 18px; height: 18px; }

/* Search bar (full-page mode) */
.dm-conv-search[b-5xq5v8az6d] {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--wl-border-subtle);
    flex-shrink: 0;
}
.dm-conv-search-input[b-5xq5v8az6d] {
    flex: 1; min-width: 0;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-family: inherit; font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
}
.dm-conv-search-input:focus[b-5xq5v8az6d] { outline: none; border-color: rgba(var(--wl-gold-rgb), 0.4); }
.dm-conv-search-clear[b-5xq5v8az6d] {
    background: transparent; border: none; cursor: pointer; padding: 0.25rem;
    color: var(--wl-text-muted); display: inline-flex; border-radius: 6px;
}
.dm-conv-search-clear:hover[b-5xq5v8az6d] { color: rgba(var(--wl-contrast-rgb), 0.9); }
.dm-conv-search-clear svg[b-5xq5v8az6d] { width: 16px; height: 16px; }

/* Load earlier paginator */
.dm-load-earlier[b-5xq5v8az6d] {
    align-self: center;
    margin-bottom: 0.4rem;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: rgba(var(--wl-contrast-rgb), 0.8);
    font-size: 0.78rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.dm-load-earlier:hover:not(:disabled)[b-5xq5v8az6d] { background: rgba(var(--wl-contrast-rgb), 0.08); }
.dm-load-earlier:disabled[b-5xq5v8az6d] { opacity: 0.6; cursor: default; }
.dm-spinner--sm[b-5xq5v8az6d] { width: 14px; height: 14px; border-width: 2px; }

.dm-conv-empty[b-5xq5v8az6d] {
    text-align: center;
    color: var(--wl-text-muted);
    font-size: 0.82rem;
    padding: 1.5rem 1rem;
}

/* Minimized: collapse to just the header bar (desktop only). */
.dm-conversation--minimized[b-5xq5v8az6d] { height: auto; }
.dm-conversation--minimized .dm-conv-messages[b-5xq5v8az6d],
.dm-conversation--minimized .dm-conv-composer[b-5xq5v8az6d] { display: none; }
.dm-conversation--minimized .dm-conv-header[b-5xq5v8az6d] { border-bottom: none; }

.dm-conv-messages[b-5xq5v8az6d] {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.dm-conv-loading[b-5xq5v8az6d] { display: flex; justify-content: center; padding: 1rem; }
.dm-spinner[b-5xq5v8az6d] {
    width: 24px; height: 24px;
    border: 3px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: dmSpin-b-5xq5v8az6d 0.8s linear infinite;
}
@keyframes dmSpin-b-5xq5v8az6d { to { transform: rotate(360deg); } }

.dm-msg[b-5xq5v8az6d] { display: flex; flex-direction: column; gap: 0.1rem; }
.dm-msg--own[b-5xq5v8az6d] { align-items: flex-end; }
.dm-msg--their[b-5xq5v8az6d] { align-items: flex-start; }

.dm-msg-time[b-5xq5v8az6d] {
    font-size: 0.62rem;
    line-height: 1;
    color: var(--wl-text-muted);
    padding: 0 0.35rem;
    user-select: none;
}
.dm-conversation--full .dm-msg-time[b-5xq5v8az6d] { font-size: 0.68rem; }

.dm-msg-bubble[b-5xq5v8az6d] {
    max-width: 78%;
    padding: 0.45rem 0.7rem;
    border-radius: 14px;
    font-size: 0.82rem;
    line-height: 1.4;
    word-break: break-word;
}

.dm-msg--their .dm-msg-bubble[b-5xq5v8az6d] {
    background: rgba(var(--wl-contrast-rgb), 0.06);
    color: rgba(var(--wl-contrast-rgb), 0.92);
    border-bottom-left-radius: 4px;
}

.dm-msg--own .dm-msg-bubble[b-5xq5v8az6d] {
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    border-bottom-right-radius: 4px;
}

.dm-msg-bubble[b-5xq5v8az6d]  .inline-emoji { width: 1.1em; height: 1.1em; vertical-align: -0.15em; }
.dm-msg-bubble[b-5xq5v8az6d]  a { color: inherit; text-decoration: underline; }

/* typing indicator */
.dm-typing[b-5xq5v8az6d] { display: inline-flex; gap: 3px; align-items: center; }
.dm-typing span[b-5xq5v8az6d] {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(var(--wl-contrast-rgb), 0.5);
    animation: dmTyping-b-5xq5v8az6d 1.2s infinite ease-in-out;
}
.dm-typing span:nth-child(2)[b-5xq5v8az6d] { animation-delay: 0.2s; }
.dm-typing span:nth-child(3)[b-5xq5v8az6d] { animation-delay: 0.4s; }
@keyframes dmTyping-b-5xq5v8az6d { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.dm-conv-composer[b-5xq5v8az6d] {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
    padding: 0.5rem;
    border-top: 1px solid var(--wl-border-subtle);
    flex-shrink: 0;
}

.dm-emoji-wrapper[b-5xq5v8az6d] { position: relative; flex-shrink: 0; }
.dm-emoji-btn[b-5xq5v8az6d] {
    background: transparent; border: none; cursor: pointer; padding: 0.25rem;
    opacity: 0.6; display: inline-flex;
}
.dm-emoji-btn:hover[b-5xq5v8az6d] { opacity: 1; }
.dm-emoji-btn img[b-5xq5v8az6d] { width: 20px; height: 20px; }
.dm-emoji-wrapper[b-5xq5v8az6d]  .emoji-picker { position: absolute; bottom: 100%; left: 0; margin-bottom: 8px; }

.dm-conv-input[b-5xq5v8az6d] {
    flex: 1;
    min-width: 0;
    resize: none;
    max-height: 80px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-family: inherit;
    font-size: 0.82rem;
    padding: 0.45rem 0.6rem;
}
.dm-conv-input:focus[b-5xq5v8az6d] { outline: none; border-color: rgba(var(--wl-gold-rgb), 0.4); }

.dm-conv-send[b-5xq5v8az6d] {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
    display: inline-flex; align-items: center; justify-content: center;
}
.dm-conv-send:disabled[b-5xq5v8az6d] { opacity: 0.4; cursor: not-allowed; }
.dm-conv-send svg[b-5xq5v8az6d] { width: 16px; height: 16px; }

/* ===================== Image attachments ===================== */

/* Rendered thumbnails under a message bubble / thread entry. */
.dm-msg-attachments[b-5xq5v8az6d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    max-width: 78%;
}
.dm-msg--own .dm-msg-attachments[b-5xq5v8az6d] { justify-content: flex-end; }
.dm-conversation--full .dm-msg-attachments[b-5xq5v8az6d] { max-width: 70%; }
.dm-entry .dm-msg-attachments[b-5xq5v8az6d] { max-width: 100%; margin-top: 0.4rem; }

.dm-msg-attachment[b-5xq5v8az6d] {
    display: inline-flex;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--wl-border-subtle);
    line-height: 0;
}
.dm-msg-img[b-5xq5v8az6d] {
    width: 130px;
    height: 130px;
    object-fit: cover;
    display: block;
    cursor: pointer;
    transition: opacity 0.15s ease;
}
.dm-msg-img:hover[b-5xq5v8az6d] { opacity: 0.88; }

/* Staged-attachment preview strip above the composer. */
.dm-compose-attachments[b-5xq5v8az6d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem 0;
    flex-shrink: 0;
}
.dm-attach-thumb[b-5xq5v8az6d] {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--wl-border-medium);
}
.dm-attach-thumb img[b-5xq5v8az6d] { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-attach-remove[b-5xq5v8az6d] {
    position: absolute;
    top: 2px; right: 2px;
    width: 18px; height: 18px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
}
.dm-attach-remove svg[b-5xq5v8az6d] { width: 12px; height: 12px; }
.dm-attach-remove:hover[b-5xq5v8az6d] { background: rgba(0, 0, 0, 0.8); }

/* Attach-image button in the composer (the file input itself is hidden). */
.dm-attach-btn[b-5xq5v8az6d] {
    flex-shrink: 0;
    cursor: pointer;
    padding: 0.25rem;
    opacity: 0.6;
    display: inline-flex;
    color: var(--wl-text-muted);
}
.dm-attach-btn:hover[b-5xq5v8az6d] { opacity: 1; }
.dm-attach-btn--disabled[b-5xq5v8az6d] { opacity: 0.35; pointer-events: none; cursor: not-allowed; }
.dm-attach-btn--hidden[b-5xq5v8az6d] { visibility: hidden; }
.dm-attach-btn svg[b-5xq5v8az6d] { width: 20px; height: 20px; }

.dm-send-error[b-5xq5v8az6d] {
    padding: 0.35rem 0.7rem 0;
    color: var(--wl-danger, #e5484d);
    font-size: 0.75rem;
    line-height: 1.3;
    flex-shrink: 0;
}

/* ===================== Thread (fiction / roleplay) mode ===================== */

/* Wider reading column and roomier spacing than the chat bubbles. */
.dm-conversation--thread .dm-conv-messages[b-5xq5v8az6d] {
    padding: 0.5rem 0.25rem;
    gap: 0;
}

.dm-entry[b-5xq5v8az6d] {
    display: flex;
    gap: 0.7rem;
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}
.dm-entry:last-of-type[b-5xq5v8az6d] { border-bottom: none; }
/* Subtle gold wash + left accent on the current player's own posts. */
.dm-entry--own[b-5xq5v8az6d] {
    background: rgba(var(--wl-gold-rgb), 0.05);
    box-shadow: inset 3px 0 0 rgba(var(--wl-gold-rgb), 0.5);
}

.dm-entry-avatar[b-5xq5v8az6d] {
    width: 38px; height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--wl-border-subtle);
    flex-shrink: 0;
}

.dm-entry-main[b-5xq5v8az6d] { flex: 1; min-width: 0; }

.dm-entry-head[b-5xq5v8az6d] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}
.dm-entry-author[b-5xq5v8az6d] {
    font-weight: 700;
    font-size: 0.85rem;
    color: rgba(var(--wl-contrast-rgb), 0.92);
}
.dm-entry-time[b-5xq5v8az6d] {
    font-size: 0.68rem;
    color: var(--wl-text-muted);
    user-select: none;
}

.dm-entry-body[b-5xq5v8az6d] {
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(var(--wl-contrast-rgb), 0.88);
    word-break: break-word;
}
.dm-entry-body[b-5xq5v8az6d]  .inline-emoji { width: 1.15em; height: 1.15em; vertical-align: -0.15em; }
.dm-entry-body[b-5xq5v8az6d]  a { color: var(--wl-gold); text-decoration: underline; }

/* Inline emphasis: "*walks over*" -> understated muted italic, like a quiet stage direction. */
.dm-entry-body[b-5xq5v8az6d]  .rp-action {
    font-style: italic;
    color: var(--wl-text-muted);
}

/* Character counter above the thread composer. */
.dm-thread-hint[b-5xq5v8az6d] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.35rem 0.7rem 0;
    flex-shrink: 0;
}
.dm-thread-counter[b-5xq5v8az6d] { font-size: 0.68rem; color: var(--wl-text-muted); font-variant-numeric: tabular-nums; }
.dm-thread-counter--max[b-5xq5v8az6d] { color: var(--wl-danger, #e5484d); font-weight: 700; }

/* Taller composer for long roleplay posts. */
.dm-conversation--thread .dm-conv-input[b-5xq5v8az6d] { max-height: 220px; min-height: 60px; }
/* /Components/Shared/Messenger/MessengerDock.razor.rz.scp.css */
/* ============ Desktop roster dock ============ */
.dm-dock[b-rwegpsnib5] {
    position: fixed;
    bottom: 0;
    right: 1.5rem;
    z-index: 900;
    width: 280px;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 32px var(--wl-shadow-color);
    display: flex;
    flex-direction: column;
    max-height: 60vh;
}

.dm-dock-header[b-rwegpsnib5] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(var(--wl-contrast-rgb), 0.9);
}

.dm-dock-icon[b-rwegpsnib5] { width: 18px; height: 18px; color: var(--wl-gold); }
.dm-dock-title[b-rwegpsnib5] { font-weight: 600; font-size: 0.85rem; flex: 1; text-align: left; }
.dm-dock-chevron[b-rwegpsnib5] { width: 16px; height: 16px; color: var(--wl-text-muted); }

.dm-badge[b-rwegpsnib5] {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--wl-gold);
    color: var(--wl-bg-primary);
    font-size: 0.65rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dm-roster[b-rwegpsnib5] { overflow-y: auto; padding: 0.25rem 0 0.5rem; }
.dm-roster-empty[b-rwegpsnib5] { padding: 1rem; font-size: 0.78rem; color: var(--wl-text-muted); text-align: center; }

/* New-conversation button */
.dm-new-btn[b-rwegpsnib5] {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    margin: 0.5rem 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.4);
    border-radius: 10px;
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-gold);
    font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.dm-new-btn:hover[b-rwegpsnib5] { background: rgba(var(--wl-gold-rgb), 0.16); }
.dm-new-btn svg[b-rwegpsnib5] { width: 16px; height: 16px; }

/* Conversation list row layout (name + preview) */
.dm-conv-list-text[b-rwegpsnib5] { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; text-align: left; }
.dm-conv-preview[b-rwegpsnib5] {
    font-size: 0.7rem; color: var(--wl-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dm-group-label[b-rwegpsnib5] {
    padding: 0.4rem 0.9rem 0.2rem;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wl-text-muted);
}

.dm-friend[b-rwegpsnib5] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.9rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: rgba(var(--wl-contrast-rgb), 0.88);
    text-align: left;
}

.dm-friend:hover[b-rwegpsnib5] { background: rgba(var(--wl-contrast-rgb), 0.05); }

/* Conversations with unread messages: tinted row + bold name + a leading gold marker. */
.dm-friend--unread[b-rwegpsnib5] { background: rgba(var(--wl-gold-rgb), 0.07); }
.dm-friend--unread:hover[b-rwegpsnib5] { background: rgba(var(--wl-gold-rgb), 0.12); }
.dm-friend--unread .dm-friend-name[b-rwegpsnib5] { font-weight: 700; color: rgba(var(--wl-contrast-rgb), 1); }
.dm-friend--unread .dm-friend-avatar-wrap[b-rwegpsnib5]::before {
    content: "";
    position: absolute;
    left: -5px; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--wl-gold);
}

.dm-friend-avatar-wrap[b-rwegpsnib5] { position: relative; flex-shrink: 0; }
.dm-friend-avatar[b-rwegpsnib5] { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--wl-border-subtle); }

.dm-presence[b-rwegpsnib5] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--wl-text-muted);
    border: 2px solid var(--wl-bg-secondary);
}
.dm-presence--on[b-rwegpsnib5] { background: #22c55e; }
.dm-presence--offline[b-rwegpsnib5] { background: #64748b; }

.dm-friend-name[b-rwegpsnib5] { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; }
.dm-friend-name-text[b-rwegpsnib5] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-thread-glyph[b-rwegpsnib5] { width: 13px; height: 13px; flex-shrink: 0; color: var(--wl-gold); opacity: 0.9; }

.dm-friend-unread[b-rwegpsnib5] {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
    background: var(--wl-gold); color: var(--wl-bg-primary);
    font-size: 0.62rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

/* ============ Desktop open conversation panels ============ */
.dm-panels[b-rwegpsnib5] {
    position: fixed;
    bottom: 0;
    right: calc(1.5rem + 280px + 0.75rem);
    z-index: 900;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.dm-dock.dm-with-player[b-rwegpsnib5],
.dm-panels.dm-with-player[b-rwegpsnib5] {
    bottom: 4.75rem;
}

/* New-conversation modal styles live in NewConversationModal.razor.css (shared component). */

/* ============ Mobile ============ */
.dm-mobile[b-rwegpsnib5] { display: none; }

@media (max-width: 1023px) {
    .dm-dock[b-rwegpsnib5], .dm-panels[b-rwegpsnib5] { display: none; }
    .dm-mobile[b-rwegpsnib5] { display: block; }

    .dm-bubbles[b-rwegpsnib5] {
        position: fixed;
        right: 0.75rem;
        bottom: 5.5rem; /* clear MobileNav */
        z-index: 1300;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 0.6rem;
    }

    .dm-bubbles.dm-with-player[b-rwegpsnib5] {
        bottom: 9.65rem;
    }

    .dm-bubble[b-rwegpsnib5] { position: relative; }

    .dm-bubble-face[b-rwegpsnib5] {
        width: 52px; height: 52px; border-radius: 50%;
        padding: 0; border: 2px solid var(--wl-gold);
        background: var(--wl-bg-secondary);
        box-shadow: 0 4px 16px var(--wl-shadow-color);
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .dm-bubble-face img[b-rwegpsnib5] { width: 100%; height: 100%; object-fit: cover; }

    .dm-bubble-presence[b-rwegpsnib5] {
        position: absolute;
        right: 2px;
        bottom: 2px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 2px solid var(--wl-bg-secondary);
        box-shadow: 0 0 0 1px rgba(var(--wl-bg-primary-rgb), 0.5);
    }

    .dm-bubble-dot[b-rwegpsnib5] {
        position: absolute; top: -2px; right: -2px;
        width: 14px; height: 14px; border-radius: 50%;
        background: var(--wl-gold); border: 2px solid var(--wl-bg-primary);
    }

    .dm-bubble-close[b-rwegpsnib5] {
        position: absolute; top: -6px; left: -6px;
        width: 20px; height: 20px; border-radius: 50%;
        background: var(--wl-bg-tertiary); color: rgba(var(--wl-contrast-rgb), 0.9);
        border: 1px solid var(--wl-border-medium); cursor: pointer;
        font-size: 0.8rem; line-height: 1; display: flex; align-items: center; justify-content: center;
    }

    .dm-fab[b-rwegpsnib5] {
        width: 52px; height: 52px; border-radius: 50%;
        border: none; cursor: pointer; position: relative;
        background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
        color: var(--wl-bg-primary);
        box-shadow: 0 4px 16px var(--wl-shadow-color);
        display: flex; align-items: center; justify-content: center;
    }
    .dm-fab svg[b-rwegpsnib5] { width: 24px; height: 24px; }
    .dm-fab .dm-badge[b-rwegpsnib5] { position: absolute; top: -2px; right: -2px; border: 2px solid var(--wl-bg-primary); }

    .dm-mobile-sheet[b-rwegpsnib5] {
        position: fixed;
        inset: 0;
        bottom: 0;
        z-index: 1400;
        background: var(--wl-bg-primary);
    }

    .dm-mobile-roster-backdrop[b-rwegpsnib5] {
        position: fixed; inset: 0; z-index: 1350;
        background: rgba(0,0,0,0.5);
        display: flex; align-items: flex-end;
    }
    .dm-mobile-roster[b-rwegpsnib5] {
        width: 100%;
        max-height: 70vh;
        overflow-y: auto;
        background: var(--wl-bg-secondary);
        border-radius: 16px 16px 0 0;
        padding-bottom: 1rem;
    }
    .dm-mobile-roster-head[b-rwegpsnib5] {
        padding: 1rem; font-weight: 600; font-size: 0.95rem;
        border-bottom: 1px solid var(--wl-border-subtle);
    }
}
/* /Components/Shared/Messenger/NewConversationModal.razor.rz.scp.css */
/* New-conversation modal - shared by the dock and the full /messages page. */
.dm-modal-backdrop[b-9hu1fcvsot] {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(0, 0, 0, 0.55);
    display: flex; align-items: center; justify-content: center;
    /* Reserve the fixed-nav safe area: when this modal is rendered inside the
       /messages page (main.relative.z-0 stacking context) its z-index is trapped
       below the fixed TopNavBar (~4.5rem) and the bottom MobileNav. The centered
       box would then slide under those bars, so we pad the backdrop to keep the
       modal inside the visible band in both consumers (dock and /messages). */
    padding: max(5rem, env(safe-area-inset-top)) 1rem max(5.5rem, env(safe-area-inset-bottom));
}
.dm-modal[b-9hu1fcvsot] {
    width: 100%; max-width: 380px;
    max-height: 100%;
    /* Column layout so the body scrolls and the head/footer stay visible on short
       viewports (instead of the footer being clipped by max-height + overflow:hidden). */
    display: flex;
    flex-direction: column;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    border-radius: 14px;
    box-shadow: 0 20px 60px var(--wl-shadow-color);
    overflow: hidden;
}
.dm-modal-head[b-9hu1fcvsot] {
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
    font-weight: 600; font-size: 0.95rem;
    color: rgba(var(--wl-contrast-rgb), 0.92);
}
.dm-modal-close[b-9hu1fcvsot] {
    background: transparent; border: none; cursor: pointer; padding: 0.25rem;
    color: var(--wl-text-muted); display: inline-flex; border-radius: 6px;
}
.dm-modal-close:hover[b-9hu1fcvsot] { color: rgba(var(--wl-contrast-rgb), 0.9); }
.dm-modal-close svg[b-9hu1fcvsot] { width: 18px; height: 18px; }

.dm-modal-body[b-9hu1fcvsot] { padding: 1rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dm-field-label[b-9hu1fcvsot] {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--wl-text-muted); margin-top: 0.5rem;
}
.dm-field-label:first-child[b-9hu1fcvsot] { margin-top: 0; }
.dm-field-input[b-9hu1fcvsot] {
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-family: inherit; font-size: 0.85rem;
    padding: 0.5rem 0.65rem;
}
.dm-field-input:focus[b-9hu1fcvsot] { outline: none; border-color: rgba(var(--wl-gold-rgb), 0.4); }

/* Chat / Thread type chooser. */
.dm-mode-toggle[b-9hu1fcvsot] { display: flex; gap: 0.5rem; }
.dm-mode-opt[b-9hu1fcvsot] {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    padding: 0.6rem 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    color: var(--wl-text-muted);
    cursor: pointer;
    text-align: center;
}
.dm-mode-opt:hover[b-9hu1fcvsot] { border-color: rgba(var(--wl-gold-rgb), 0.4); }
.dm-mode-opt svg[b-9hu1fcvsot] { width: 20px; height: 20px; }
.dm-mode-opt-label[b-9hu1fcvsot] { font-size: 0.82rem; font-weight: 600; color: rgba(var(--wl-contrast-rgb), 0.9); }
.dm-mode-opt-desc[b-9hu1fcvsot] { font-size: 0.66rem; line-height: 1.25; }
.dm-mode-opt--active[b-9hu1fcvsot] {
    border-color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: rgba(var(--wl-contrast-rgb), 0.9);
}
.dm-mode-opt--active svg[b-9hu1fcvsot] { color: var(--wl-gold); }

.dm-results[b-9hu1fcvsot] {
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    max-height: 200px; overflow-y: auto;
    margin-top: 0.1rem;
}
.dm-result[b-9hu1fcvsot] {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%; padding: 0.45rem 0.6rem;
    background: transparent; border: none; cursor: pointer;
    color: rgba(var(--wl-contrast-rgb), 0.88); text-align: left;
    font-size: 0.84rem;
}
.dm-result:hover[b-9hu1fcvsot] { background: rgba(var(--wl-contrast-rgb), 0.05); }
.dm-result img[b-9hu1fcvsot] { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--wl-border-subtle); }

.dm-selected[b-9hu1fcvsot] {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 8px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
}
.dm-selected img[b-9hu1fcvsot] { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--wl-border-subtle); }
.dm-selected span[b-9hu1fcvsot] { flex: 1; font-size: 0.85rem; }
.dm-selected-clear[b-9hu1fcvsot] {
    background: transparent; border: none; cursor: pointer; padding: 0.2rem;
    color: var(--wl-text-muted); display: inline-flex; border-radius: 6px;
}
.dm-selected-clear:hover[b-9hu1fcvsot] { color: rgba(var(--wl-contrast-rgb), 0.9); }
.dm-selected-clear svg[b-9hu1fcvsot] { width: 15px; height: 15px; }

.dm-modal-foot[b-9hu1fcvsot] {
    display: flex; justify-content: flex-end; gap: 0.5rem;
    flex-shrink: 0;
    padding: 0.8rem 1rem;
    border-top: 1px solid var(--wl-border-subtle);
}
.dm-btn[b-9hu1fcvsot] {
    padding: 0.45rem 1rem; border-radius: 8px;
    font-size: 0.84rem; font-weight: 600; cursor: pointer;
    border: 1px solid transparent;
}
.dm-btn--ghost[b-9hu1fcvsot] {
    background: transparent;
    border-color: var(--wl-border-medium);
    color: rgba(var(--wl-contrast-rgb), 0.8);
}
.dm-btn--ghost:hover[b-9hu1fcvsot] { background: rgba(var(--wl-contrast-rgb), 0.05); }
.dm-btn--gold[b-9hu1fcvsot] {
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: var(--wl-bg-primary);
}
.dm-btn--gold:disabled[b-9hu1fcvsot] { opacity: 0.5; cursor: not-allowed; }
/* /Components/Shared/Music/ChartList.razor.rz.scp.css */
/* ============================================
   SONG CHART LIST - Shared Component
   Premium list matching Billboard Prestige style
   ============================================ */

.chart-list[b-ig8xls21za] {
    display: flex;
    flex-direction: column;
    background: var(--wl-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--wl-border-subtle);
    overflow: hidden;
}

.chart-entry[b-ig8xls21za] {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--wl-border-subtle);
    transition: background 0.2s ease;
    animation: songSlideIn-b-ig8xls21za 0.35s ease-out forwards;
    opacity: 0;
}

.chart-entry:last-child[b-ig8xls21za] {
    border-bottom: none;
}

.chart-entry:hover[b-ig8xls21za] {
    background: rgba(var(--wl-gold-rgb), 0.04);
    transform: translateX(4px);
}

/* Top 3 rows get more presence - podium tint, #1 brightest */
.chart-entry:has(.pos-1)[b-ig8xls21za] {
    background:
        radial-gradient(ellipse 60% 100% at 30% 0%, rgba(var(--wl-gold-rgb), 0.07), transparent 70%),
        linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.08), transparent 65%);
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Song of the week - #1 title shimmers (keyframes from global app.css) */
.chart-entry:has(.pos-1) .song-title[b-ig8xls21za] {
    background: linear-gradient(90deg,
        var(--wl-gold) 0%,
        #F5D76E 25%,
        var(--wl-gold) 50%,
        var(--wl-gold-dark) 75%,
        var(--wl-gold) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

.chart-entry:has(.pos-2)[b-ig8xls21za],
.chart-entry:has(.pos-3)[b-ig8xls21za] {
    background: linear-gradient(90deg, rgba(var(--wl-contrast-rgb), 0.03), transparent 60%);
}

/* Movement border accents */
.chart-entry.is-new[b-ig8xls21za] {
    border-left: 3px solid var(--wl-gold);
}

.chart-entry.is-rising[b-ig8xls21za] {
    border-left: 3px solid var(--wl-green);
}

.chart-entry.is-falling[b-ig8xls21za] {
    border-left: 3px solid var(--wl-red);
}

@keyframes songSlideIn-b-ig8xls21za {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Position column */
.entry-pos[b-ig8xls21za] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.pos-num[b-ig8xls21za] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    color: var(--wl-text-secondary);
    line-height: 1;
}

.pos-top[b-ig8xls21za] {
    font-size: 1.5rem;
    color: var(--wl-gold);
}

/* Medal treatment - gold / silver / bronze discs */
.pos-1[b-ig8xls21za],
.pos-2[b-ig8xls21za],
.pos-3[b-ig8xls21za] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    font-size: 1.1rem;
}

.pos-1[b-ig8xls21za] {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.25rem;
    color: #1A1A1A;
    background: linear-gradient(160deg, var(--wl-champagne) 0%, var(--wl-gold) 55%, var(--wl-gold-dark) 100%);
    box-shadow: 0 0 16px rgba(var(--wl-gold-rgb), 0.5);
}

.pos-2[b-ig8xls21za] {
    color: #1A1A1A;
    background: linear-gradient(160deg, #E8E8E8 0%, var(--wl-silver) 60%, #8F8F8F 100%);
    box-shadow: 0 0 10px rgba(192, 192, 192, 0.3);
}

.pos-3[b-ig8xls21za] {
    color: #2A1A0E;
    background: linear-gradient(160deg, #D9A06B 0%, #B0703D 60%, #8C5328 100%);
    box-shadow: 0 0 10px rgba(176, 112, 61, 0.3);
}

/* Movement badges */
.mv[b-ig8xls21za] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.02em;
}

.mv svg[b-ig8xls21za] {
    width: 0.7rem;
    height: 0.7rem;
}

.mv-new[b-ig8xls21za] {
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
    text-transform: uppercase;
}

.mv-up[b-ig8xls21za] {
    background: rgba(34, 197, 94, 0.12);
    color: var(--wl-green);
}

.mv-down[b-ig8xls21za] {
    background: rgba(var(--wl-red-rgb), 0.12);
    color: var(--wl-red);
}

.mv-stable[b-ig8xls21za] {
    color: var(--wl-text-muted);
}

/* Song info */
.entry-song[b-ig8xls21za] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.song-title[b-ig8xls21za] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-artist[b-ig8xls21za] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.song-title[b-ig8xls21za],
a.song-artist[b-ig8xls21za] {
    text-decoration: none;
    transition: color 0.2s ease;
}

a.song-title:hover[b-ig8xls21za],
a.song-title:focus-visible[b-ig8xls21za],
a.song-artist:hover[b-ig8xls21za],
a.song-artist:focus-visible[b-ig8xls21za] {
    color: var(--wl-gold);
}

/* Stats column */
.entry-stats[b-ig8xls21za] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.stat-weeks[b-ig8xls21za],
.stat-peak[b-ig8xls21za] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

.stat-val[b-ig8xls21za] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wl-text-secondary);
}

.stat-unit[b-ig8xls21za],
.stat-label[b-ig8xls21za] {
    font-size: 0.65rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Empty state */
.chart-empty[b-ig8xls21za] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.chart-empty-icon[b-ig8xls21za] {
    width: 48px;
    height: 48px;
    color: rgba(var(--wl-gold-rgb), 0.25);
    margin-bottom: 1rem;
}

.chart-empty-icon svg[b-ig8xls21za] {
    width: 100%;
    height: 100%;
}

.chart-empty p[b-ig8xls21za] {
    color: var(--wl-text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
    .chart-entry[b-ig8xls21za] {
        grid-template-columns: 60px 1fr auto;
        gap: 0.75rem;
        padding: 0.625rem 0.75rem;
    }

    .pos-num[b-ig8xls21za] {
        font-size: 1rem;
    }

    .pos-top[b-ig8xls21za] {
        font-size: 1.25rem;
    }

    .song-title[b-ig8xls21za] {
        font-size: 0.85rem;
    }

    .song-artist[b-ig8xls21za] {
        font-size: 0.75rem;
    }
}
/* /Components/Shared/Music/HypeIndicator.razor.rz.scp.css */
/* HypeIndicator Component - Hollywood Glamour Aesthetic */
.hype-indicator[b-qok5u8worx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

/* Size Variants */
.hype-indicator.size-small .hype-ring[b-qok5u8worx] {
    width: 48px;
    height: 48px;
}

.hype-indicator.size-medium .hype-ring[b-qok5u8worx] {
    width: 80px;
    height: 80px;
}

.hype-indicator.size-large .hype-ring[b-qok5u8worx] {
    width: 120px;
    height: 120px;
}

/* Ring Container */
.hype-ring[b-qok5u8worx] {
    position: relative;
}

.hype-ring :deep(svg)[b-qok5u8worx] {
    width: 100%;
    height: 100%;
    transform: rotateY(180deg); /* Flip so progress goes clockwise */
}

/* Ring Styles */
.ring-bg[b-qok5u8worx] {
    stroke: var(--wl-border-subtle);
    opacity: 0.3;
}

.ring-progress[b-qok5u8worx] {
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease-out, stroke 0.3s ease;
}

/* Hype Level Colors */
.ring-progress.hype-max[b-qok5u8worx] {
    stroke: url(#hypeGradientMax);
    filter: drop-shadow(0 0 8px rgba(var(--wl-gold-rgb), 0.6));
}

.ring-progress.hype-high[b-qok5u8worx] {
    stroke: var(--wl-gold);
    filter: drop-shadow(0 0 6px rgba(var(--wl-gold-rgb), 0.4));
}

.ring-progress.hype-medium[b-qok5u8worx] {
    stroke: #22c55e;
}

.ring-progress.hype-low[b-qok5u8worx] {
    stroke: #f59e0b;
}

.ring-progress.hype-critical[b-qok5u8worx] {
    stroke: #ef4444;
    animation: pulse-b-qok5u8worx 2s ease-in-out infinite;
}

@keyframes pulse-b-qok5u8worx {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Value Display */
.hype-value[b-qok5u8worx] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.size-small .hype-value .value[b-qok5u8worx] {
    font-size: 0.875rem;
    font-weight: 700;
}

.size-medium .hype-value .value[b-qok5u8worx] {
    font-size: 1.5rem;
    font-weight: 800;
}

.size-large .hype-value .value[b-qok5u8worx] {
    font-size: 2rem;
    font-weight: 800;
}

.hype-value .value[b-qok5u8worx] {
    color: var(--wl-text-primary);
    font-family: var(--wl-font-display);
    line-height: 1;
}

.hype-value .label[b-qok5u8worx] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--wl-text-muted);
    margin-top: 0.125rem;
}

.size-large .hype-value .label[b-qok5u8worx] {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Trend Indicator */
.hype-trend[b-qok5u8worx] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.hype-trend :deep(svg)[b-qok5u8worx] {
    width: 0.875rem;
    height: 0.875rem;
}

.hype-trend.rising[b-qok5u8worx] {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.hype-trend.falling[b-qok5u8worx] {
    background: rgba(var(--wl-red-rgb), 0.15);
    color: #ef4444;
}

/* Hype max gets special gold glow */
.hype-indicator:has(.hype-max) .hype-value .value[b-qok5u8worx] {
    color: var(--wl-gold);
    text-shadow: 0 0 10px rgba(var(--wl-gold-rgb), 0.5);
}

/* Add gradient definitions via inline SVG in parent */
@supports (stroke: url(#gradient)) {
    .ring-progress.hype-max[b-qok5u8worx] {
        stroke: url(#hypeGradientMax);
    }
}

/* Fallback for hype-max without gradient support */
@supports not (stroke: url(#gradient)) {
    .ring-progress.hype-max[b-qok5u8worx] {
        stroke: var(--wl-gold);
    }
}
/* /Components/Shared/MusicPlayer.razor.rz.scp.css */
.music-player-scrim[b-fr7ywxuly1] {
    position: fixed;
    inset: 0;
    z-index: 1280;
    border: 0;
    background: rgba(2, 6, 15, .55);
    backdrop-filter: blur(2px);
}

.music-player-drawer[b-fr7ywxuly1] {
    position: fixed;
    z-index: 1290;
    top: 4rem;
    right: 0;
    bottom: 4.75rem;
    display: flex;
    flex-direction: column;
    width: min(30rem, 100vw);
    color: var(--wl-text-primary);
    border-left: 1px solid rgba(var(--wl-gold-rgb), .22);
    background:
        radial-gradient(circle at 85% 0, rgba(var(--wl-gold-rgb), .09), transparent 30%),
        rgba(var(--wl-bg-modal-rgb), .985);
    box-shadow: -22px 0 60px rgba(0, 0, 0, .38);
    animation: music-drawer-in-b-fr7ywxuly1 .22s ease-out;
}

@keyframes music-drawer-in-b-fr7ywxuly1 { from { transform: translateX(1.5rem); opacity: 0; } }

.music-player-drawer-header[b-fr7ywxuly1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 4.4rem;
    padding: .8rem 1rem .7rem 1.25rem;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.music-player-kicker[b-fr7ywxuly1] {
    display: block;
    color: var(--wl-gold);
    font-size: .62rem;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.music-player-drawer h2[b-fr7ywxuly1] {
    margin: .1rem 0 0;
    font-family: "Bebas Neue", sans-serif;
    font-size: 1.55rem;
    font-weight: 400;
    letter-spacing: .06em;
}

.music-player-close[b-fr7ywxuly1],
.music-section-title > button[b-fr7ywxuly1] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    color: var(--wl-text-muted);
    background: transparent;
    font-size: 1.5rem;
}

.music-player-close:hover[b-fr7ywxuly1],
.music-section-title > button:hover[b-fr7ywxuly1] { color: var(--wl-text-primary); background: var(--wl-bg-hover); }

.music-player-tabs[b-fr7ywxuly1] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: .45rem .7rem 0;
    border-bottom: 1px solid var(--wl-border-subtle);
}

.music-player-tabs button[b-fr7ywxuly1] {
    position: relative;
    padding: .7rem .2rem .75rem;
    border: 0;
    color: var(--wl-text-muted);
    background: transparent;
    font-size: .73rem;
    font-weight: 650;
}

.music-player-tabs button span[b-fr7ywxuly1] {
    display: inline-grid;
    place-items: center;
    min-width: 1.05rem;
    height: 1.05rem;
    margin-left: .15rem;
    padding: 0 .2rem;
    border-radius: 999px;
    background: var(--wl-bg-tertiary);
    font-size: .6rem;
}

.music-player-tabs button.active[b-fr7ywxuly1] { color: var(--wl-gold); }
.music-player-tabs button.active[b-fr7ywxuly1]::after {
    content: "";
    position: absolute;
    right: .5rem;
    bottom: -1px;
    left: .5rem;
    height: 2px;
    background: var(--wl-gold);
    box-shadow: 0 0 10px rgba(var(--wl-gold-rgb), .55);
}

.music-player-drawer-body[b-fr7ywxuly1] {
    position: relative;
    flex: 1;
    min-height: 0;
    padding: .9rem .8rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.music-player-search[b-fr7ywxuly1] {
    position: sticky;
    z-index: 2;
    top: -.9rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: -.1rem 0 .8rem;
    padding: .7rem .8rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: .65rem;
    background: rgba(var(--wl-bg-secondary-rgb), .98);
}

.music-player-search:focus-within[b-fr7ywxuly1] { border-color: rgba(var(--wl-gold-rgb), .5); }
.music-player-search svg[b-fr7ywxuly1] { width: 1rem; height: 1rem; color: var(--wl-text-muted); }
.music-player-search input[b-fr7ywxuly1] {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--wl-text-primary);
    background: transparent;
    font-size: .85rem;
}

.music-track-list[b-fr7ywxuly1] { display: flex; flex-direction: column; gap: .2rem; }
.music-track-row[b-fr7ywxuly1] {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto 2rem 2rem;
    align-items: center;
    gap: .2rem;
    min-height: 3.4rem;
    padding: .25rem .3rem;
    border: 1px solid transparent;
    border-radius: .55rem;
    transition: .16s ease;
}

.music-track-row:hover[b-fr7ywxuly1] { border-color: var(--wl-border-subtle); background: var(--wl-bg-hover); }
.music-track-row.active[b-fr7ywxuly1] { border-color: rgba(var(--wl-gold-rgb), .2); background: rgba(var(--wl-gold-rgb), .06); }
.music-track-play[b-fr7ywxuly1],
.music-track-action[b-fr7ywxuly1] {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 50%;
    color: var(--wl-text-muted);
    background: transparent;
}

.music-track-play[b-fr7ywxuly1] { color: var(--wl-gold); background: rgba(var(--wl-gold-rgb), .1); }
.music-track-play svg[b-fr7ywxuly1] { width: .85rem; height: .85rem; }
.music-track-action[b-fr7ywxuly1] { font-size: 1.15rem; }
.music-track-action.playlist[b-fr7ywxuly1] { font-size: .82rem; }
.music-track-action:hover[b-fr7ywxuly1] { color: var(--wl-text-primary); background: var(--wl-bg-tertiary); }
.music-track-main[b-fr7ywxuly1] {
    min-width: 0;
    padding: .25rem .35rem;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
}

.music-track-main strong[b-fr7ywxuly1],
.music-track-main small[b-fr7ywxuly1] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-track-main strong[b-fr7ywxuly1] { font-size: .83rem; font-weight: 650; }
.music-track-main small[b-fr7ywxuly1] { margin-top: .13rem; color: var(--wl-text-muted); font-size: .7rem; }
.music-track-main small span[b-fr7ywxuly1] { color: var(--wl-text-muted); opacity: .72; }
.music-track-duration[b-fr7ywxuly1] { color: var(--wl-text-muted); font-size: .67rem; font-variant-numeric: tabular-nums; }
.music-track-index[b-fr7ywxuly1] { color: var(--wl-text-muted); font-size: .72rem; text-align: center; }

.music-player-empty[b-fr7ywxuly1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 12rem;
    padding: 1rem;
    color: var(--wl-text-muted);
    font-size: .82rem;
    text-align: center;
}

.music-player-empty.small[b-fr7ywxuly1] { min-height: 5rem; }
.music-player-spinner[b-fr7ywxuly1] {
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--wl-border-medium);
    border-top-color: var(--wl-gold);
    border-radius: 50%;
    animation: music-spin-b-fr7ywxuly1 .8s linear infinite;
}

@keyframes music-spin-b-fr7ywxuly1 { to { transform: rotate(360deg); } }
.music-player-hint[b-fr7ywxuly1] {
    margin: .1rem .3rem .8rem;
    padding: .65rem .75rem;
    border-left: 2px solid rgba(var(--wl-gold-rgb), .5);
    color: var(--wl-text-muted);
    background: rgba(var(--wl-gold-rgb), .045);
    font-size: .72rem;
    line-height: 1.4;
}

.music-player-primary[b-fr7ywxuly1],
.music-play-all[b-fr7ywxuly1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 2.2rem;
    padding: .45rem .8rem;
    border: 1px solid rgba(var(--wl-gold-rgb), .4);
    border-radius: .5rem;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), .08);
    font-size: .75rem;
    font-weight: 650;
}

.music-play-all svg[b-fr7ywxuly1] { width: .8rem; height: .8rem; }
.music-player-section-heading[b-fr7ywxuly1] {
    margin: 1.15rem .25rem .45rem;
    color: var(--wl-text-secondary);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.music-playlist-create[b-fr7ywxuly1] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .6rem;
    padding: .8rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: .65rem;
    background: var(--wl-bg-secondary);
}

.music-playlist-create > input[b-fr7ywxuly1] {
    min-width: 0;
    padding: .55rem .65rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: .4rem;
    color: var(--wl-text-primary);
    background: var(--wl-bg-primary);
}

.music-playlist-create label[b-fr7ywxuly1] { display: flex; align-items: center; gap: .35rem; color: var(--wl-text-secondary); font-size: .75rem; }
.music-playlist-create > div[b-fr7ywxuly1] { grid-column: 1 / -1; display: flex; gap: .4rem; }
.music-playlist-create button[b-fr7ywxuly1] {
    padding: .4rem .7rem;
    border: 1px solid rgba(var(--wl-gold-rgb), .4);
    border-radius: .4rem;
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), .08);
    font-size: .72rem;
}
.music-playlist-create button.secondary[b-fr7ywxuly1] { color: var(--wl-text-muted); border-color: var(--wl-border-medium); background: transparent; }

.music-playlist-grid[b-fr7ywxuly1] { display: flex; flex-direction: column; gap: .35rem; }
.music-playlist-card[b-fr7ywxuly1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .25rem;
    padding: .35rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: .6rem;
    background: rgba(var(--wl-bg-secondary-rgb), .55);
}

.music-playlist-main[b-fr7ywxuly1] { display: flex; align-items: center; gap: .65rem; min-width: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.music-playlist-cover[b-fr7ywxuly1] { display: grid; place-items: center; flex: 0 0 2.55rem; height: 2.55rem; border-radius: .4rem; color: var(--wl-gold); background: linear-gradient(135deg, rgba(var(--wl-gold-rgb), .18), var(--wl-bg-tertiary)); }
.music-playlist-cover svg[b-fr7ywxuly1] { width: 1.25rem; height: 1.25rem; }
.music-playlist-main > span:last-child[b-fr7ywxuly1] { min-width: 0; }
.music-playlist-main strong[b-fr7ywxuly1], .music-playlist-main small[b-fr7ywxuly1] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-playlist-main strong[b-fr7ywxuly1] { font-size: .8rem; }
.music-playlist-main small[b-fr7ywxuly1] { margin-top: .15rem; color: var(--wl-text-muted); font-size: .66rem; }
.music-playlist-visibility[b-fr7ywxuly1] { padding: .3rem .45rem; border: 1px solid var(--wl-border-subtle); border-radius: 999px; color: var(--wl-text-muted); background: transparent; font-size: .61rem; }
.music-playlist-delete[b-fr7ywxuly1] { width: 1.8rem; height: 1.8rem; border: 0; color: var(--wl-text-muted); background: transparent; font-size: 1rem; }

.music-open-playlist[b-fr7ywxuly1] {
    margin-top: .8rem;
    padding: .7rem;
    border: 1px solid rgba(var(--wl-gold-rgb), .22);
    border-radius: .7rem;
    background: rgba(var(--wl-gold-rgb), .035);
}

.music-section-title[b-fr7ywxuly1] { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .55rem; }
.music-section-title strong[b-fr7ywxuly1], .music-section-title small[b-fr7ywxuly1] { display: block; }
.music-section-title strong[b-fr7ywxuly1] { font-size: .83rem; }
.music-section-title small[b-fr7ywxuly1] { margin-top: .1rem; color: var(--wl-text-muted); font-size: .67rem; }
.music-open-playlist .music-play-all[b-fr7ywxuly1] { margin-bottom: .45rem; }
.music-track-list.compact .music-track-row[b-fr7ywxuly1] { grid-template-columns: 2rem minmax(0, 1fr) 2rem; }

.music-playlist-picker[b-fr7ywxuly1] {
    position: absolute;
    z-index: 4;
    right: .75rem;
    bottom: 1rem;
    left: .75rem;
    max-height: 16rem;
    padding: .75rem;
    overflow-y: auto;
    border: 1px solid rgba(var(--wl-gold-rgb), .35);
    border-radius: .75rem;
    background: rgba(var(--wl-bg-modal-rgb), .995);
    box-shadow: 0 16px 50px rgba(0, 0, 0, .5);
}

.music-playlist-picker > button[b-fr7ywxuly1] { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .6rem .65rem; border: 0; border-radius: .4rem; color: var(--wl-text-primary); background: transparent; font-size: .76rem; text-align: left; }
.music-playlist-picker > button:hover[b-fr7ywxuly1] { background: var(--wl-bg-hover); }
.music-playlist-picker > button small[b-fr7ywxuly1] { color: var(--wl-text-muted); font-size: .63rem; }

.music-playlist-confirm[b-fr7ywxuly1] {
    position: absolute;
    z-index: 5;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    padding: 1rem;
    border: 1px solid rgba(239, 68, 68, .45);
    border-radius: .75rem;
    background: rgba(var(--wl-bg-modal-rgb), .995);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .55);
}

.music-playlist-confirm > strong[b-fr7ywxuly1] { display: block; font-size: .9rem; }
.music-playlist-confirm > p[b-fr7ywxuly1] { margin: .45rem 0 .9rem; color: var(--wl-text-secondary); font-size: .75rem; line-height: 1.45; }
.music-playlist-confirm > div[b-fr7ywxuly1] { display: flex; gap: .5rem; }
.music-playlist-confirm button[b-fr7ywxuly1] { padding: .45rem .75rem; border: 1px solid var(--wl-border-medium); border-radius: .45rem; color: var(--wl-text-secondary); background: transparent; font-size: .72rem; }
.music-playlist-confirm button.danger[b-fr7ywxuly1] { border-color: rgba(239, 68, 68, .5); color: #fca5a5; background: rgba(127, 29, 29, .25); }
.music-playlist-confirm button:disabled[b-fr7ywxuly1] { opacity: .55; }

.music-ranking-list[b-fr7ywxuly1] { display: flex; flex-direction: column; gap: .25rem; }
.music-ranking-row[b-fr7ywxuly1] { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: center; min-height: 3.4rem; padding: .3rem .45rem; border-bottom: 1px solid var(--wl-border-subtle); }
.music-ranking-position[b-fr7ywxuly1] { color: var(--wl-gold); font-family: "Bebas Neue", sans-serif; font-size: 1.35rem; text-align: center; }
.music-ranking-count[b-fr7ywxuly1] { color: var(--wl-text-muted); font-size: .65rem; }

.music-now-playing[b-fr7ywxuly1] {
    position: fixed;
    z-index: 1305;
    right: 0;
    bottom: 4.7rem;
    left: 0;
    display: grid;
    grid-template-columns: 3rem minmax(7rem, 1fr) auto minmax(7rem, 1.4fr) auto;
    align-items: center;
    gap: .75rem;
    min-height: 4.65rem;
    padding: .55rem .8rem;
    border-top: 1px solid rgba(var(--wl-gold-rgb), .28);
    color: var(--wl-text-primary);
    background: rgba(var(--wl-bg-modal-rgb), .985);
    box-shadow: 0 -12px 35px rgba(0, 0, 0, .22);
    backdrop-filter: blur(18px);
}

.music-now-playing.is-empty[b-fr7ywxuly1] { display: none; }

.music-now-playing audio[b-fr7ywxuly1] { display: none; }
.music-now-art[b-fr7ywxuly1] { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .48rem; color: var(--wl-gold); background: radial-gradient(circle at 30% 20%, rgba(var(--wl-gold-rgb), .3), transparent 40%), linear-gradient(135deg, var(--wl-bg-tertiary), var(--wl-bg-primary)); font-family: "Bebas Neue", sans-serif; font-size: 1.05rem; letter-spacing: .05em; }
.music-now-meta[b-fr7ywxuly1] { min-width: 0; border: 0; color: inherit; background: transparent; text-align: left; }
.music-now-meta strong[b-fr7ywxuly1], .music-now-meta small[b-fr7ywxuly1] { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-now-meta strong[b-fr7ywxuly1] { font-size: .78rem; }
.music-now-meta small[b-fr7ywxuly1] { margin-top: .12rem; color: var(--wl-text-muted); font-size: .66rem; }
.music-now-controls[b-fr7ywxuly1] { display: flex; align-items: center; gap: .25rem; }
.music-now-controls button[b-fr7ywxuly1] { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 0; border-radius: 50%; color: var(--wl-text-secondary); background: transparent; }
.music-now-controls button:hover[b-fr7ywxuly1] { color: var(--wl-gold); background: rgba(var(--wl-gold-rgb), .08); }
.music-now-controls .music-now-play[b-fr7ywxuly1] { color: var(--wl-bg-primary); background: var(--wl-gold); }
.music-now-controls svg[b-fr7ywxuly1] { width: .95rem; height: .95rem; }
.music-now-progress[b-fr7ywxuly1] { display: grid; grid-template-columns: minmax(4rem, 1fr) auto; align-items: center; gap: .55rem; }
.music-now-progress input[b-fr7ywxuly1],
.music-now-volume input[b-fr7ywxuly1] {
    height: .22rem;
    border-radius: 999px;
    outline: none;
    appearance: none;
    background: linear-gradient(to right, var(--wl-gold) var(--player-progress, 0%), var(--wl-border-medium) var(--player-progress, 0%));
}
.music-now-progress input[b-fr7ywxuly1]::-webkit-slider-thumb,
.music-now-volume input[b-fr7ywxuly1]::-webkit-slider-thumb { width: .7rem; height: .7rem; border: 0; border-radius: 50%; appearance: none; background: var(--wl-gold); }
.music-now-progress span[b-fr7ywxuly1] { color: var(--wl-text-muted); font-size: .6rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.music-now-volume[b-fr7ywxuly1] { display: flex; align-items: center; gap: .4rem; }
.music-now-volume svg[b-fr7ywxuly1] { width: 1rem; height: 1rem; color: var(--wl-text-muted); }
.music-now-volume input[b-fr7ywxuly1] { width: 4.5rem; background: var(--wl-border-medium); }

@media (min-width: 1280px) {
    .music-player-drawer[b-fr7ywxuly1] {
        bottom: 4.75rem;
        width: clamp(38rem, 42vw, 46rem);
    }

    .music-player-drawer-header[b-fr7ywxuly1] {
        min-height: 5.15rem;
        padding: 1rem 1.4rem 1rem 1.55rem;
    }

    .music-player-drawer h2[b-fr7ywxuly1] { font-size: 1.8rem; }
    .music-player-tabs[b-fr7ywxuly1] { padding: .55rem 1.1rem 0; }
    .music-player-tabs button[b-fr7ywxuly1] {
        padding: .85rem .45rem 1rem;
        font-size: .8rem;
    }

    .music-player-drawer-body[b-fr7ywxuly1] { padding: 1.15rem 1.15rem 2.5rem; }
    .music-player-search[b-fr7ywxuly1] {
        top: -1.15rem;
        margin-bottom: 1rem;
        padding: .85rem 1rem;
    }

    .music-player-search input[b-fr7ywxuly1] { font-size: .95rem; }
    .music-track-list[b-fr7ywxuly1] { gap: .3rem; }
    .music-track-row[b-fr7ywxuly1] {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto 2.5rem 2.5rem;
        gap: .4rem;
        min-height: 4.15rem;
        padding: .4rem .5rem;
    }

    .music-track-play[b-fr7ywxuly1],
    .music-track-action[b-fr7ywxuly1] {
        width: 2.25rem;
        height: 2.25rem;
    }

    .music-track-main[b-fr7ywxuly1] { padding: .35rem .45rem; }
    .music-track-main strong[b-fr7ywxuly1] { font-size: .9rem; }
    .music-track-main small[b-fr7ywxuly1] { font-size: .75rem; }
    .music-track-duration[b-fr7ywxuly1] { font-size: .72rem; }
    .music-ranking-row[b-fr7ywxuly1] { min-height: 4rem; }
    .music-playlist-card[b-fr7ywxuly1] { padding: .55rem; }
    .music-now-playing[b-fr7ywxuly1] { left: 18rem; bottom: 0; }
}

@media (min-width: 701px) and (max-width: 1279px) {
    .music-player-drawer[b-fr7ywxuly1] { bottom: 9.4rem; }
}

@media (max-width: 700px) {
    .music-player-drawer[b-fr7ywxuly1] { bottom: 8.9rem; width: 100vw; }
    .music-player-drawer-body[b-fr7ywxuly1] { padding-bottom: 1rem; }
    .music-now-playing[b-fr7ywxuly1] {
        grid-template-columns: 2.7rem minmax(0, 1fr) auto;
        gap: .5rem;
        min-height: 4.15rem;
        padding: .42rem .65rem;
    }
    .music-now-art[b-fr7ywxuly1] { width: 2.7rem; height: 2.7rem; }
    .music-now-progress[b-fr7ywxuly1] { position: absolute; top: -1px; right: 0; left: 0; display: block; }
    .music-now-progress input[b-fr7ywxuly1] { display: block; width: 100%; height: 2px; }
    .music-now-progress span[b-fr7ywxuly1], .music-now-volume[b-fr7ywxuly1] { display: none; }
    .music-track-row[b-fr7ywxuly1] { grid-template-columns: 2rem minmax(0, 1fr) 2rem 2rem; }
    .music-track-duration[b-fr7ywxuly1] { display: none; }
    .music-ranking-count[b-fr7ywxuly1] { max-width: 5rem; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
    .music-player-drawer[b-fr7ywxuly1] { animation: none; }
}
/* /Components/Shared/MusicPlayerButton.razor.rz.scp.css */
.music-player-trigger[b-0aetxsymzd] {
    position: relative;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--wl-text-secondary);
    background: transparent;
    transition: .2s ease;
}

.music-player-trigger:hover[b-0aetxsymzd],
.music-player-trigger.is-playing[b-0aetxsymzd] {
    color: var(--wl-gold);
    border-color: rgba(var(--wl-gold-rgb), .3);
    background: rgba(var(--wl-gold-rgb), .08);
}

.music-player-trigger svg[b-0aetxsymzd] { width: 1.35rem; height: 1.35rem; }
.music-player-live[b-0aetxsymzd] {
    position: absolute;
    right: .18rem;
    bottom: .22rem;
    width: .48rem;
    height: .48rem;
    border: 2px solid var(--wl-bg-secondary);
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 8px #22c55e;
}
/* /Components/Shared/News24WorldEventFeed.razor.rz.scp.css */
.news24-feed[b-nnvixre5hd] {
    display: block;
    grid-column: 1 / -1;
    min-width: 0;
    padding: 1.15rem;
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.16);
    border-radius: 6px;
    background: var(--wl-panel-grad), rgb(var(--wl-bg-secondary-rgb));
    box-shadow: var(--wl-panel-shadow);
    color: rgb(var(--wl-text-primary-rgb));
}

.news24-feed-header[b-nnvixre5hd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.news24-kicker[b-nnvixre5hd] {
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.news24-feed-header h2[b-nnvixre5hd] {
    margin: 0.2rem 0 0;
    font-size: 1.35rem;
}

.news24-carousel-controls[b-nnvixre5hd] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: rgba(var(--wl-text-primary-rgb), 0.72);
    font-size: 0.78rem;
    font-weight: 900;
}

.news24-carousel-button[b-nnvixre5hd] {
    display: inline-grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.18);
    border-radius: 50%;
    background: rgba(var(--wl-bg-primary-rgb), 0.62);
    color: rgb(var(--wl-gold-rgb));
    font-size: 1.35rem;
    line-height: 1;
}

.news24-carousel-button:hover[b-nnvixre5hd] {
    border-color: rgba(var(--wl-gold-rgb), 0.42);
    background: rgba(var(--wl-gold-rgb), 0.12);
}

.news24-card[b-nnvixre5hd] {
    display: grid;
    grid-template-columns: minmax(18rem, 0.95fr) minmax(0, 1.05fr);
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.12);
    border-radius: 6px;
    background: rgba(var(--wl-bg-primary-rgb), 0.42);
}

.news24-card--crisis[b-nnvixre5hd],
.news24-card--emergency[b-nnvixre5hd] {
    border-color: rgba(255, 118, 96, 0.32);
}

.news24-media[b-nnvixre5hd] {
    display: block;
    position: relative;
    min-height: 21rem;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255, 118, 96, 0.18), transparent 48%),
        linear-gradient(180deg, rgba(var(--wl-bg-tertiary-rgb), 0.9), rgba(var(--wl-bg-primary-rgb), 0.96));
}

.news24-media[b-nnvixre5hd]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.news24-media--fallback[b-nnvixre5hd]::before {
    content: "";
    position: absolute;
    inset: 0.75rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.18);
    background:
        linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.1) 1px, transparent 1px),
        linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.08) 1px, transparent 1px);
    background-size: 1.25rem 1.25rem;
}

.news24-badge[b-nnvixre5hd] {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.46);
    color: rgb(var(--wl-text-primary-rgb));
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.news24-copy[b-nnvixre5hd] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 1.25rem;
}

.news24-meta[b-nnvixre5hd] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.news24-copy h3[b-nnvixre5hd] {
    margin: 0.45rem 0 0;
    font-size: 1.7rem;
    line-height: 1.08;
}

.news24-title-link[b-nnvixre5hd] {
    color: inherit;
    text-decoration: none;
}

.news24-title-link:hover h3[b-nnvixre5hd] {
    color: rgb(var(--wl-gold-rgb));
}

.news24-copy p[b-nnvixre5hd] {
    margin: 0.65rem 0 0;
    color: rgba(var(--wl-text-primary-rgb), 0.74);
    font-size: 1rem;
    line-height: 1.45;
}

.news24-effects-panel[b-nnvixre5hd] {
    margin-top: 1rem;
    padding: 0.85rem;
    border: 1px solid rgba(var(--wl-champagne-rgb), 0.12);
    border-radius: 6px;
    background: rgba(var(--wl-bg-tertiary-rgb), 0.38);
}

.news24-effects-panel strong[b-nnvixre5hd] {
    color: rgb(var(--wl-gold-rgb));
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.news24-effects[b-nnvixre5hd] {
    display: grid;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.news24-effects li[b-nnvixre5hd] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    padding-left: 0.7rem;
    border-left: 2px solid rgba(255, 118, 96, 0.5);
    color: rgba(var(--wl-text-primary-rgb), 0.82);
    font-size: 0.84rem;
    line-height: 1.35;
}

.news24-effects li span[b-nnvixre5hd] {
    min-width: 0;
}

.news24-effects li small[b-nnvixre5hd] {
    color: rgb(var(--wl-gold-rgb));
    font-weight: 900;
    white-space: nowrap;
}

.news24-source-link[b-nnvixre5hd] {
    display: inline-flex;
    margin-top: 1rem;
    color: rgb(var(--wl-gold-rgb));
    font-weight: 800;
    text-decoration: none;
}

.news24-source-link:hover[b-nnvixre5hd] {
    color: var(--wl-gold-light);
}

.news24-dots[b-nnvixre5hd] {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

.news24-dot[b-nnvixre5hd] {
    width: 0.55rem;
    height: 0.55rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--wl-text-primary-rgb), 0.26);
}

.news24-dot--active[b-nnvixre5hd] {
    background: rgb(var(--wl-gold-rgb));
}

@media (max-width: 980px) {
    .news24-card[b-nnvixre5hd] {
        grid-template-columns: 1fr;
    }

    .news24-media[b-nnvixre5hd] {
        min-height: 18rem;
    }
}

@media (max-width: 720px) {
    .news24-feed-header[b-nnvixre5hd] {
        align-items: flex-start;
        flex-direction: column;
    }

    .news24-copy h3[b-nnvixre5hd] {
        font-size: 1.35rem;
    }

    .news24-effects li[b-nnvixre5hd] {
        flex-direction: column;
        gap: 0.2rem;
    }
}
/* /Components/Shared/Pagination.razor.rz.scp.css */
.pagination-container[b-so443bnpoe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 0;
    flex-wrap: wrap;
}

.pagination-info[b-so443bnpoe] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

.pagination-controls[b-so443bnpoe] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-btn[b-so443bnpoe] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.5rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: rgba(var(--wl-contrast-rgb), 0.8);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pagination-btn:hover:not(:disabled)[b-so443bnpoe] {
    background: var(--wl-gold-border);
    border-color: rgba(var(--wl-gold-rgb), 0.3);
}

.pagination-btn.active[b-so443bnpoe] {
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    border-color: transparent;
    color: var(--wl-bg-primary);
    font-weight: 600;
}

.pagination-btn:disabled[b-so443bnpoe] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-btn svg[b-so443bnpoe] {
    width: 1rem;
    height: 1rem;
}

.pagination-ellipsis[b-so443bnpoe] {
    padding: 0 0.5rem;
    color: rgba(var(--wl-contrast-rgb), 0.4);
}

.pagination-size[b-so443bnpoe] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.size-select[b-so443bnpoe] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--wl-border-medium);
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: rgba(var(--wl-contrast-rgb), 0.9);
    font-size: 0.875rem;
    cursor: pointer;
}

.size-select:focus[b-so443bnpoe] {
    outline: none;
    border-color: rgba(var(--wl-gold-rgb), 0.5);
}

.size-label[b-so443bnpoe] {
    font-size: 0.875rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
}

@media (max-width: 640px) {
    .pagination-container[b-so443bnpoe] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .pagination-info[b-so443bnpoe] {
        order: 3;
    }
}
/* /Components/Shared/PremiumBadge.razor.rz.scp.css */
.premium-badge[b-vhmu81n9a8] {
    --premium-badge-icon-size: 1rem;
    --premium-badge-slot-size: 1.7rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    flex: 0 0 auto;
    width: var(--premium-badge-slot-size);
    height: var(--premium-badge-slot-size);
    margin-left: 0.2rem;
    vertical-align: middle;
    line-height: 1;
    overflow: visible;
}

.premium-badge--staff[b-vhmu81n9a8] {
    --premium-badge-icon-size: 0.75rem;
    --premium-badge-slot-size: 1.25rem;
    transform: translateY(-0.08rem);
}

.premium-badge img[b-vhmu81n9a8] {
    display: block;
    max-width: calc(var(--premium-badge-slot-size) - 0.35rem);
    max-height: calc(var(--premium-badge-slot-size) - 0.35rem);
    object-fit: contain;
    image-rendering: pixelated;
}

.premium-badge.fx-shimmer[b-vhmu81n9a8] {
    overflow: hidden;
    border-radius: 999px;
}

.premium-badge > span[b-vhmu81n9a8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--premium-badge-icon-size);
    height: var(--premium-badge-icon-size);
    overflow: visible;
}

.premium-badge[b-vhmu81n9a8]  .badge-icon {
    display: block;
    flex: 0 0 auto;
    width: var(--premium-badge-icon-size);
    height: var(--premium-badge-icon-size);
    overflow: visible;
}
/* /Components/Shared/PremiumCurrencyPurchaseLock.razor.rz.scp.css */
.purchase-lock[b-3a837fo0xb] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.125rem 1.25rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.28);
    border-radius: 0.875rem;
    background:
        linear-gradient(135deg, rgba(var(--wl-gold-rgb), 0.09), transparent 65%),
        var(--wl-bg-secondary);
    color: var(--wl-text-primary);
}

.purchase-lock__icon[b-3a837fo0xb] {
    display: grid;
    flex: 0 0 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
    place-items: center;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.32);
    border-radius: 50%;
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
}

.purchase-lock__icon svg[b-3a837fo0xb] {
    width: 1.25rem;
    height: 1.25rem;
}

.purchase-lock__content[b-3a837fo0xb] {
    min-width: 0;
}

.purchase-lock__content strong[b-3a837fo0xb] {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: 0.035em;
}

.purchase-lock__content p[b-3a837fo0xb] {
    margin: 0;
    color: var(--wl-text-muted);
    font-size: 0.875rem;
    line-height: 1.55;
}

.purchase-lock__content small[b-3a837fo0xb] {
    display: block;
    margin-top: 0.625rem;
    color: var(--wl-text-secondary);
    font-size: 0.75rem;
}

.purchase-lock__action[b-3a837fo0xb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    color: var(--wl-gold);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.purchase-lock__action:hover[b-3a837fo0xb] {
    color: var(--wl-gold-light);
}

@media (max-width: 480px) {
    .purchase-lock[b-3a837fo0xb] {
        padding: 1rem;
    }
}
/* /Components/Shared/Profile/PrestigeBadge.razor.rz.scp.css */
.prestige-badge[b-wlun1g83vp] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    border: 1px solid var(--wl-border);
    background: var(--wl-bg-secondary);
    color: var(--wl-text-primary);
    white-space: nowrap;
}

/* Multi-Threat: subtle accent. */
.prestige-multithreat[b-wlun1g83vp] {
    border-color: var(--wl-purple);
    color: var(--wl-purple);
    background: color-mix(in srgb, var(--wl-purple) 12%, transparent);
}

/* EGOT: the prestige peak - gold. */
.prestige-egot[b-wlun1g83vp] {
    border-color: var(--wl-gold);
    color: var(--wl-gold);
    background: color-mix(in srgb, var(--wl-gold) 14%, transparent);
}

.prestige-icon svg[b-wlun1g83vp] {
    width: 1rem;
    height: 1rem;
    display: block;
}
/* /Components/Shared/Profile/ProfileAboutSection.razor.rz.scp.css */
.profile-facts[b-hk7jua5fum] {
    position: relative;
    z-index: 15;
    margin-top: clamp(-3.5rem, -4vw, -2rem);
}

.profile-facts-grid[b-hk7jua5fum] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0.7rem;
    align-items: stretch;
}

.profile-fact-card[b-hk7jua5fum] {
    position: relative;
    display: grid;
    grid-template-columns: 2.15rem minmax(0, 1fr);
    gap: 0.72rem;
    align-items: start;
    min-width: 0;
    min-height: 5.75rem;
    padding: 0.78rem 0.85rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 8px;
    background:
        radial-gradient(circle at 0 0, rgba(var(--wl-cyan-rgb), 0.1), transparent 40%),
        linear-gradient(135deg, rgba(var(--wl-bg-secondary-rgb), 0.9), rgba(var(--wl-bg-primary-rgb), 0.7));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.profile-fact-card[b-hk7jua5fum]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, rgba(var(--wl-cyan-rgb), 0.92), rgba(var(--wl-gold-rgb), 0.42));
}

.profile-fact-icon[b-hk7jua5fum] {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid rgba(var(--wl-cyan-rgb), 0.28);
    border-radius: 8px;
    background: rgba(var(--wl-cyan-rgb), 0.08);
    color: rgb(var(--wl-cyan-rgb));
}

.profile-fact-icon svg[b-hk7jua5fum] {
    width: 1.02rem;
    height: 1.02rem;
}

.profile-fact-copy[b-hk7jua5fum] {
    position: relative;
    display: grid;
    gap: 0.48rem;
    min-width: 0;
}

.profile-fact-copy h3[b-hk7jua5fum] {
    margin: 0;
    color: var(--wl-text-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.05rem;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.profile-fact-lines[b-hk7jua5fum] {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.profile-fact-line[b-hk7jua5fum] {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
}

.profile-fact-line span[b-hk7jua5fum] {
    color: var(--wl-text-muted);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-fact-line strong[b-hk7jua5fum] {
    min-width: 0;
    color: var(--wl-text-primary);
    font-size: 0.94rem;
    line-height: 1.18;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.profile-fact-line strong.profile-fact-primary[b-hk7jua5fum] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.25rem, 1.45vw, 1.55rem);
    letter-spacing: 0.02em;
}

.profile-fact-line small[b-hk7jua5fum] {
    color: var(--wl-text-soft);
    font-size: 0.72rem;
    line-height: 1.25;
}

.profile-fact-card-identity[b-hk7jua5fum] {
    grid-template-columns: 2.15rem minmax(0, 1fr);
}

.profile-joined-lines[b-hk7jua5fum] {
    gap: 0.45rem;
}

.profile-joined-headline[b-hk7jua5fum] {
    gap: 0.08rem;
}

.profile-fact-microgrid[b-hk7jua5fum] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6.8rem, 1fr));
    gap: 0.48rem 0.65rem;
    min-width: 0;
}

@media (max-width: 1024px) {
    .profile-facts[b-hk7jua5fum] {
        margin-top: -1.35rem;
    }
}

@media (max-width: 768px) {
    .profile-facts[b-hk7jua5fum] {
        margin-top: 0;
    }

    .profile-fact-card[b-hk7jua5fum] {
        min-height: auto;
    }
}
/* /Components/Shared/Profile/ProfileAwardsSection.razor.rz.scp.css */
/* Shared section chrome (.profile-section, header, .see-all, base .empty-state)
   lives in Styles/app.css. Only awards-unique rules remain below. */

/* Fame bar */
.fame-bar[b-u5apcukem0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--wl-gold-border);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, var(--wl-gold-bg) 0%, rgba(var(--wl-bg-secondary-rgb), 0.6) 100%);
    margin-bottom: 1.5rem;
}

.tier-badge[b-u5apcukem0] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--wl-gold-border);
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold);
}

.tier-badge svg[b-u5apcukem0] {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.tier-name[b-u5apcukem0] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wl-gold-light);
}

.fame-metrics[b-u5apcukem0] {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex: 1;
    flex-wrap: wrap;
}

.metric[b-u5apcukem0] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.metric-value[b-u5apcukem0] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--wl-text-primary);
}

.metric-label[b-u5apcukem0] {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.peak-caption[b-u5apcukem0] {
    width: 100%;
    margin: 0;
    font-size: 0.8rem;
    color: var(--wl-text-secondary);
}

/* Tile row */
.tile-row[b-u5apcukem0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.season-titles[b-u5apcukem0] {
    margin-bottom: 1.25rem;
}

.season-titles-title[b-u5apcukem0] {
    margin-bottom: 0.75rem;
    color: var(--wl-text-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.25rem;
    letter-spacing: 0.04em;
}

.award-tile.season-title[b-u5apcukem0] {
    border-color: var(--wl-gold-border);
    background: linear-gradient(145deg, var(--wl-gold-bg), rgba(var(--wl-bg-secondary-rgb), 0.82));
}

.award-tile[b-u5apcukem0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 1.25rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-subtle);
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.award-tile:hover[b-u5apcukem0] {
    transform: translateY(-3px);
    border-color: var(--wl-gold-border);
    box-shadow: 0 10px 30px var(--wl-shadow-color);
}

.tile-icon[b-u5apcukem0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 999px;
    background: var(--wl-gold-bg);
    color: var(--wl-gold);
}

.tile-icon svg[b-u5apcukem0] {
    width: 1.6rem;
    height: 1.6rem;
}

/* Achievement icons are injected as raw SVG via MarkupString, so they don't
   receive this component's scoped attribute - target them through ::deep, scoped to
   the achievement tile so the inline (scoped) trophy svg above keeps its own size. */
.award-tile.achievement .tile-icon[b-u5apcukem0]  svg {
    width: 1.6rem;
    height: 1.6rem;
}

.tile-title[b-u5apcukem0] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    line-height: 1.2;
}

.tile-sub[b-u5apcukem0] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--wl-gold);
}

@media (max-width: 600px) {
    .tile-row[b-u5apcukem0] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .fame-metrics[b-u5apcukem0] {
        gap: 1.25rem;
    }
}
/* /Components/Shared/Profile/ProfileBoardSection.razor.rz.scp.css */
/* Shared section chrome (.profile-section, header, .see-all, .empty-state)
   lives in Styles/app.css. Only board-unique rules remain below. */

/* PostCard brings its own styling - this only stacks the cards */
.profile-section.board[b-k3nyiw1071] {
    width: min(100%, 680px);
    margin-inline: auto;
}

.profile-board-posts[b-k3nyiw1071] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.profile-load-more[b-k3nyiw1071] {
    display: flex;
    justify-content: center;
    padding-top: 0.25rem;
}

.profile-load-more-btn[b-k3nyiw1071] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 1rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.32);
    border-radius: 7px;
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-gold);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.profile-load-more-btn:hover:not(:disabled)[b-k3nyiw1071] {
    background: rgba(var(--wl-gold-rgb), 0.14);
    border-color: rgba(var(--wl-gold-rgb), 0.48);
}

.profile-load-more-btn:disabled[b-k3nyiw1071] {
    cursor: wait;
    opacity: 0.64;
}

.profile-load-more-spinner[b-k3nyiw1071] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.26);
    border-top-color: var(--wl-gold);
    border-radius: 999px;
    animation: profile-load-spin-b-k3nyiw1071 0.8s linear infinite;
}

@keyframes profile-load-spin-b-k3nyiw1071 {
    to { transform: rotate(360deg); }
}
/* /Components/Shared/Profile/ProfileBuzzSection.razor.rz.scp.css */
.profile-section.buzz[b-od50attn6f] {
    width: min(100%, 680px);
    margin-inline: auto;
}

.profile-buzz-posts[b-od50attn6f] {
    display: grid;
    gap: 1rem;
}

.profile-load-more[b-od50attn6f] {
    display: flex;
    justify-content: center;
    padding-top: 0.25rem;
}

.profile-load-more-btn[b-od50attn6f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 1rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.32);
    border-radius: 7px;
    background: rgba(var(--wl-gold-rgb), 0.08);
    color: var(--wl-gold);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.profile-load-more-btn:hover:not(:disabled)[b-od50attn6f] {
    background: rgba(var(--wl-gold-rgb), 0.14);
    border-color: rgba(var(--wl-gold-rgb), 0.48);
}

.profile-load-more-btn:disabled[b-od50attn6f] {
    cursor: wait;
    opacity: 0.64;
}

.profile-load-more-spinner[b-od50attn6f] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(var(--wl-gold-rgb), 0.26);
    border-top-color: var(--wl-gold);
    border-radius: 999px;
    animation: profile-load-spin-b-od50attn6f 0.8s linear infinite;
}

@keyframes profile-load-spin-b-od50attn6f {
    to { transform: rotate(360deg); }
}
/* /Components/Shared/Profile/ProfileCareerSection.razor.rz.scp.css */
/* Shared section chrome (.profile-section, header) lives in Styles/app.css.
   Only career-unique rules remain below. */

/* Status cards */
.status-row[b-wolg318xn1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.status-card[b-wolg318xn1] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--wl-border-subtle);
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.status-card:hover[b-wolg318xn1] {
    border-color: var(--wl-gold-border);
    box-shadow: 0 10px 30px var(--wl-shadow-color);
}

.card-icon[b-wolg318xn1] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--wl-gold-bg);
    color: var(--wl-gold);
}

.card-icon svg[b-wolg318xn1] {
    width: 1.6rem;
    height: 1.6rem;
}

.card-body[b-wolg318xn1] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.card-label[b-wolg318xn1] {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.card-value[b-wolg318xn1] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-sub[b-wolg318xn1] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wl-gold);
}

/* Branch pills */
.branch-pills[b-wolg318xn1] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.branch-pill[b-wolg318xn1] {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--wl-gold-border);
    background: var(--wl-gold-bg);
    color: var(--wl-gold-light);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 600px) {
    .status-row[b-wolg318xn1] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/Profile/ProfileDiscographySection.razor.rz.scp.css */
/* Shared section chrome (.profile-section, header, .see-all, .empty-state)
   lives in Styles/app.css. Only discography-unique rules remain below. */

.discography-actions[b-rqf6m7riwc] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.era-filter[b-rqf6m7riwc] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wl-text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.era-filter select[b-rqf6m7riwc] {
    appearance: none;
    min-width: 190px;
    max-width: 280px;
    padding: 0.45rem 2rem 0.45rem 0.7rem;
    color: var(--wl-text-primary);
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.45rem;
    background:
        linear-gradient(45deg, transparent 50%, var(--wl-text-muted) 50%) calc(100% - 14px) 50% / 6px 6px no-repeat,
        linear-gradient(135deg, var(--wl-text-muted) 50%, transparent 50%) calc(100% - 10px) 50% / 6px 6px no-repeat,
        rgba(var(--wl-bg-secondary-rgb), 0.82);
    font-size: 0.75rem;
}

.era-context[b-rqf6m7riwc] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    margin: -0.35rem 0 1.1rem;
    color: var(--wl-text-secondary);
}

.era-name[b-rqf6m7riwc] {
    font-weight: 700;
    color: var(--wl-text-primary);
}

.era-range[b-rqf6m7riwc] {
    font-size: 0.8rem;
    color: var(--wl-text-muted);
}

.era-current[b-rqf6m7riwc] {
    padding: 0.18rem 0.45rem;
    border: 1px solid var(--wl-gold-border);
    border-radius: 999px;
    background: var(--wl-gold-bg);
    color: var(--wl-gold);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cta[b-rqf6m7riwc] {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--wl-gold);
    text-decoration: none;
    border: 1px solid var(--wl-gold-border);
    background: var(--wl-gold-bg);
    transition: all 0.2s ease;
}

.cta:hover[b-rqf6m7riwc] {
    background: var(--wl-gold-bg-hover);
    color: var(--wl-gold-light);
}

/* Cover grid - fixed-width tiles packed to the left so 1-2 releases
   don't stretch across the row or strand empty cells. */
.cover-grid[b-rqf6m7riwc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, 172px);
    justify-content: start;
    gap: 1.25rem 1.5rem;
}

.cover-tile[b-rqf6m7riwc] {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.cover-tile:hover[b-rqf6m7riwc] {
    transform: translateY(-3px);
}

.cover-img[b-rqf6m7riwc] {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 1px solid var(--wl-border-subtle);
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.cover-tile:hover .cover-img[b-rqf6m7riwc] {
    border-color: var(--wl-gold-border);
    box-shadow: 0 10px 30px var(--wl-shadow-color);
}

.cover-img[b-rqf6m7riwc]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cover-placeholder[b-rqf6m7riwc] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-text-muted);
    background: linear-gradient(135deg, var(--wl-gold-bg) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
}

.cover-placeholder svg[b-rqf6m7riwc] {
    width: 40%;
    height: 40%;
    opacity: 0.7;
}

.cover-meta[b-rqf6m7riwc] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.6rem 0.25rem 0;
}

.cover-title[b-rqf6m7riwc] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cover-type[b-rqf6m7riwc] {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.cover-stats[b-rqf6m7riwc] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.15rem;
    font-size: 0.75rem;
}

.cover-stats .peak[b-rqf6m7riwc] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    color: var(--wl-gold);
}

.cover-stats .streams[b-rqf6m7riwc] {
    color: var(--wl-text-secondary);
}

/* Desktop/tablet auto-fill the fixed tiles (left-aligned). Mobile fills two
   equal columns edge-to-edge so the row doesn't leave a trailing gap. */
@media (max-width: 600px) {
    .discography-actions[b-rqf6m7riwc] {
        width: 100%;
        justify-content: flex-start;
    }

    .era-filter[b-rqf6m7riwc],
    .era-filter select[b-rqf6m7riwc] {
        width: 100%;
    }

    .era-filter[b-rqf6m7riwc] {
        align-items: stretch;
        flex-direction: column;
        gap: 0.35rem;
    }

    .cover-grid[b-rqf6m7riwc] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}
/* /Components/Shared/Profile/ProfileFamilyTreeSection.razor.rz.scp.css */
.profile-family-tree[b-h9h8ojmovd] {
    display: grid;
    gap: 1rem;
}

.profile-family-tree-header[b-h9h8ojmovd] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.profile-family-tree-header span[b-h9h8ojmovd] {
    color: rgb(var(--wl-cyan-rgb));
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.profile-family-tree-header h2[b-h9h8ojmovd] {
    margin: 0.2rem 0 0;
    color: var(--wl-text-primary);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 0.95;
}

.profile-family-tree-header a[b-h9h8ojmovd] {
    min-height: 2.25rem;
    padding: 0.52rem 0.85rem;
    border: 1px solid rgba(var(--wl-cyan-rgb), 0.26);
    border-radius: 8px;
    background: rgba(var(--wl-cyan-rgb), 0.08);
    color: rgb(var(--wl-cyan-rgb));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-decoration: none;
    text-transform: uppercase;
}

.profile-family-tree-loading[b-h9h8ojmovd],
.profile-family-tree-empty[b-h9h8ojmovd] {
    padding: 1.2rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.68);
    color: var(--wl-text-secondary);
}

.profile-family-tree-canvas[b-h9h8ojmovd] {
    display: grid;
    gap: 0.85rem;
}

.profile-family-tree-band[b-h9h8ojmovd],
.profile-family-tree-band-current[b-h9h8ojmovd] {
    display: grid;
    gap: 0.65rem;
    padding: 0.85rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.62);
}

.profile-family-tree-band-label[b-h9h8ojmovd],
.profile-family-tree-side > span[b-h9h8ojmovd] {
    color: var(--wl-text-muted);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.profile-family-tree-row[b-h9h8ojmovd] {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding-bottom: 0.12rem;
}

.profile-family-tree-band-current[b-h9h8ojmovd] {
    grid-template-columns: minmax(11rem, 0.5fr) minmax(0, 1fr);
    align-items: center;
    background:
        radial-gradient(circle at 50% 0, rgba(var(--wl-gold-rgb), 0.12), transparent 52%),
        rgba(var(--wl-bg-secondary-rgb), 0.72);
}

.profile-family-tree-side[b-h9h8ojmovd] {
    display: grid;
    gap: 0.5rem;
    min-width: 0;
}

.profile-family-tree-side > div[b-h9h8ojmovd] {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
}

.profile-family-tree-focus[b-h9h8ojmovd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-width: 0;
    overflow-x: auto;
}

.profile-family-tree-marriage-link[b-h9h8ojmovd] {
    flex: 0 0 1.8rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--wl-gold), rgb(var(--wl-cyan-rgb)));
    opacity: 0.8;
}

.profile-family-tree-node[b-h9h8ojmovd] {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.22rem;
    flex: 0 0 8.25rem;
    min-height: 9.2rem;
    padding: 0.7rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 8px;
    background: rgba(var(--wl-bg-primary-rgb), 0.48);
    color: inherit;
    text-align: center;
    text-decoration: none;
}

.profile-family-tree-node:hover[b-h9h8ojmovd] {
    border-color: rgba(var(--wl-cyan-rgb), 0.34);
}

.profile-family-tree-node.is-root[b-h9h8ojmovd] {
    border-color: rgba(var(--wl-gold-rgb), 0.34);
    background: rgba(var(--wl-gold-rgb), 0.08);
}

.profile-family-tree-node img[b-h9h8ojmovd] {
    width: 58px;
    height: 58px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 8px;
    object-fit: cover;
}

.profile-family-tree-node strong[b-h9h8ojmovd] {
    max-width: 100%;
    overflow: hidden;
    color: var(--wl-text-primary);
    font-size: 0.86rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-family-tree-node span[b-h9h8ojmovd] {
    color: var(--wl-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
}

.profile-family-tree-node em[b-h9h8ojmovd] {
    color: rgb(var(--wl-cyan-rgb));
    font-size: 0.65rem;
    font-style: normal;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .profile-family-tree-header[b-h9h8ojmovd] {
        align-items: start;
        flex-direction: column;
    }

    .profile-family-tree-band-current[b-h9h8ojmovd] {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-family-tree-focus[b-h9h8ojmovd] {
        justify-content: flex-start;
    }
}
/* /Components/Shared/Profile/ProfileFilmographySection.razor.rz.scp.css */
.artifact-list[b-objnwgkdec] {
    display: grid;
    gap: 0.75rem;
}

.artifact-row[b-objnwgkdec] {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) minmax(150px, auto);
    gap: 0.9rem;
    align-items: center;
    min-height: 92px;
    padding: 0.75rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.68);
    color: inherit;
    text-decoration: none;
}

.artifact-row:hover[b-objnwgkdec] {
    border-color: var(--wl-gold-border);
    background: rgba(var(--wl-bg-secondary-rgb), 0.86);
}

.artifact-thumb[b-objnwgkdec] {
    display: grid;
    place-items: center;
    width: 76px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: var(--wl-gold);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
}

.artifact-thumb[b-objnwgkdec]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artifact-main[b-objnwgkdec] {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
}

.artifact-title-row[b-objnwgkdec] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.artifact-title-row strong[b-objnwgkdec] {
    min-width: 0;
    overflow: hidden;
    color: var(--wl-text-primary);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artifact-title-row span[b-objnwgkdec] {
    flex-shrink: 0;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: var(--wl-gold-bg);
    color: var(--wl-gold);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.artifact-meta[b-objnwgkdec],
.artifact-stats[b-objnwgkdec] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    color: var(--wl-text-muted);
    font-size: 0.78rem;
}

.artifact-stats[b-objnwgkdec] {
    justify-content: flex-end;
}

.artifact-stats span[b-objnwgkdec] {
    display: grid;
    gap: 0.1rem;
    min-width: 58px;
    text-align: right;
}

.artifact-stats strong[b-objnwgkdec] {
    color: var(--wl-text-primary);
    font-size: 0.95rem;
}

.artifact-stats small[b-objnwgkdec] {
    color: var(--wl-text-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .artifact-row[b-objnwgkdec] {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .artifact-thumb[b-objnwgkdec] {
        width: 60px;
    }

    .artifact-stats[b-objnwgkdec] {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .artifact-stats span[b-objnwgkdec] {
        text-align: left;
    }
}
/* /Components/Shared/Profile/ProfileFollowsSection.razor.rz.scp.css */
.profile-network-section[b-87kdpd1ac4] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1.25rem, 2.8vw, 2.25rem);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.2);
    border-radius: 24px;
    background:
        radial-gradient(circle at 8% 0%, rgba(var(--wl-cyan-rgb), 0.12), transparent 32%),
        radial-gradient(circle at 92% 12%, rgba(var(--wl-gold-rgb), 0.1), transparent 34%),
        linear-gradient(145deg, rgba(var(--wl-bg-modal-rgb), 0.98), rgba(var(--wl-bg-modal-deep-rgb), 0.97));
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24), inset 0 1px rgba(var(--wl-contrast-rgb), 0.05);
}

.profile-network-section[b-87kdpd1ac4]::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: 0.22;
    background-image: linear-gradient(rgba(var(--wl-contrast-rgb), 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--wl-contrast-rgb), 0.035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.profile-network-header[b-87kdpd1ac4] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.75rem;
}

.profile-network-heading[b-87kdpd1ac4] {
    min-width: 0;
}

.profile-network-eyebrow[b-87kdpd1ac4] {
    display: block;
    margin-bottom: 0.35rem;
    color: rgb(var(--wl-cyan-rgb));
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.profile-network-heading h2[b-87kdpd1ac4] {
    margin: 0;
    color: var(--wl-text-primary);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 400;
    letter-spacing: 0.025em;
    line-height: 0.95;
}

.profile-network-heading p[b-87kdpd1ac4] {
    max-width: 42rem;
    margin: 0.75rem 0 0;
    color: var(--wl-text-secondary);
    font-size: 0.96rem;
    line-height: 1.6;
}

.profile-network-total[b-87kdpd1ac4] {
    display: grid;
    justify-items: end;
    flex: 0 0 auto;
}

.profile-network-total strong[b-87kdpd1ac4] {
    color: var(--wl-gold);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 0.8;
}

.profile-network-total span[b-87kdpd1ac4] {
    margin-top: 0.45rem;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.profile-network-grid[b-87kdpd1ac4] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.profile-network-card[b-87kdpd1ac4] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.9rem;
    min-height: 9.25rem;
    padding: 1rem;
    overflow: hidden;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(var(--wl-contrast-rgb), 0.055), rgba(var(--wl-contrast-rgb), 0.018));
    box-shadow: inset 0 1px rgba(var(--wl-contrast-rgb), 0.045);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.profile-network-card[b-87kdpd1ac4]::after {
    content: '';
    position: absolute;
    inset: auto -35% -65% 35%;
    height: 8rem;
    border-radius: 50%;
    background: rgba(var(--wl-cyan-rgb), 0.11);
    filter: blur(30px);
    pointer-events: none;
}

.profile-network-card:hover[b-87kdpd1ac4] {
    z-index: 1;
    transform: translateY(-4px);
    border-color: rgba(var(--wl-gold-rgb), 0.34);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22), inset 0 1px rgba(var(--wl-contrast-rgb), 0.08);
}

.profile-network-profile[b-87kdpd1ac4] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.profile-network-avatar-shell[b-87kdpd1ac4] {
    position: relative;
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    padding: 3px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--wl-gold), rgb(var(--wl-cyan-rgb)) 60%, rgba(var(--wl-contrast-rgb), 0.2));
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.24);
}

.profile-network-avatar-shell img[b-87kdpd1ac4] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border: 3px solid rgb(var(--wl-bg-modal-deep-rgb));
    border-radius: 19px;
    background: var(--wl-bg-tertiary);
}

.profile-network-avatar-shell--fan[b-87kdpd1ac4] {
    display: grid;
    place-items: center;
    padding: 0;
    background: radial-gradient(circle at 32% 24%, color-mix(in srgb, var(--fan-color) 68%, white), var(--fan-color));
    color: white;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--fan-color) 24%, transparent);
}

.profile-network-card.is-fan[b-87kdpd1ac4]::after {
    background: rgba(var(--wl-purple-rgb), 0.12);
}

.profile-network-identity[b-87kdpd1ac4] {
    display: grid;
    min-width: 0;
}

.profile-network-identity strong[b-87kdpd1ac4] {
    overflow: hidden;
    color: var(--wl-text-primary);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-network-identity > span[b-87kdpd1ac4] {
    overflow: hidden;
    margin-top: 0.22rem;
    color: rgb(var(--wl-cyan-rgb));
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-network-meta[b-87kdpd1ac4] {
    z-index: 1;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.8rem;
    border-top: 1px solid rgba(var(--wl-contrast-rgb), 0.07);
    color: var(--wl-text-muted);
    font-size: 0.72rem;
}

.profile-network-meta strong[b-87kdpd1ac4] {
    color: var(--wl-text-primary);
}

.profile-network-since[b-87kdpd1ac4] {
    text-align: right;
}

.profile-network-action[b-87kdpd1ac4] {
    z-index: 2;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 2.4rem;
    min-height: 2.4rem;
    padding: 0 0.75rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--wl-gold), var(--wl-gold-light));
    color: rgb(var(--wl-bg-modal-deep-rgb));
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.profile-network-action:hover:not(:disabled)[b-87kdpd1ac4] {
    transform: translateY(-1px) scale(1.02);
}

.profile-network-action.is-following[b-87kdpd1ac4] {
    border-color: rgba(var(--wl-cyan-rgb), 0.26);
    background: rgba(var(--wl-cyan-rgb), 0.1);
    color: rgb(var(--wl-cyan-rgb));
}

.profile-network-action:disabled[b-87kdpd1ac4] {
    opacity: 0.55;
}

.profile-network-action svg[b-87kdpd1ac4],
.profile-network-action-spinner[b-87kdpd1ac4] {
    width: 0.9rem;
    height: 0.9rem;
}

.profile-network-action-spinner[b-87kdpd1ac4] {
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: profile-network-spin-b-87kdpd1ac4 700ms linear infinite;
}

.profile-network-empty[b-87kdpd1ac4] {
    display: grid;
    justify-items: center;
    min-height: 22rem;
    padding: 4rem 1.5rem;
    text-align: center;
}

.profile-network-empty-orbit[b-87kdpd1ac4] {
    position: relative;
    display: block;
    width: 7rem;
    height: 7rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(var(--wl-cyan-rgb), 0.28);
    border-radius: 50%;
    box-shadow: inset 0 0 35px rgba(var(--wl-cyan-rgb), 0.08), 0 0 40px rgba(var(--wl-cyan-rgb), 0.08);
}

.profile-network-empty-orbit[b-87kdpd1ac4]::before,
.profile-network-empty-orbit span[b-87kdpd1ac4] {
    content: '';
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: var(--wl-gold);
    box-shadow: 0 0 18px rgba(var(--wl-gold-rgb), 0.7);
}

.profile-network-empty-orbit[b-87kdpd1ac4]::before { inset: calc(50% - 0.4rem); }
.profile-network-empty-orbit span:nth-child(1)[b-87kdpd1ac4] { top: -0.4rem; left: calc(50% - 0.4rem); }
.profile-network-empty-orbit span:nth-child(2)[b-87kdpd1ac4] { right: 0.6rem; bottom: 0.65rem; }
.profile-network-empty-orbit span:nth-child(3)[b-87kdpd1ac4] { left: 0.55rem; bottom: 0.65rem; }

.profile-network-empty h3[b-87kdpd1ac4] {
    margin: 0;
    color: var(--wl-text-primary);
    font-size: 1.35rem;
}

.profile-network-empty p[b-87kdpd1ac4] {
    max-width: 32rem;
    margin: 0.65rem 0 0;
    color: var(--wl-text-secondary);
    line-height: 1.65;
}

.profile-network-discover[b-87kdpd1ac4] {
    margin-top: 1.35rem;
    padding: 0.75rem 1.15rem;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
    border-radius: 999px;
    background: rgba(var(--wl-gold-rgb), 0.1);
    color: var(--wl-gold);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.profile-network-pager[b-87kdpd1ac4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    color: var(--wl-text-muted);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
}

.profile-network-pager button[b-87kdpd1ac4] {
    min-height: 2.6rem;
    padding: 0 1rem;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.1);
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.04);
    color: var(--wl-text-secondary);
    font-weight: 800;
}

.profile-network-pager button:disabled[b-87kdpd1ac4] { opacity: 0.35; }

.profile-network-skeleton[b-87kdpd1ac4] {
    min-height: 9.25rem;
    background: linear-gradient(100deg, rgba(var(--wl-contrast-rgb), 0.025) 25%, rgba(var(--wl-contrast-rgb), 0.08) 45%, rgba(var(--wl-contrast-rgb), 0.025) 65%);
    background-size: 240% 100%;
    animation: profile-network-shimmer-b-87kdpd1ac4 1.35s ease-in-out infinite;
}

@keyframes profile-network-spin-b-87kdpd1ac4 { to { transform: rotate(360deg); } }
@keyframes profile-network-shimmer-b-87kdpd1ac4 { to { background-position: -140% 0; } }

@media (max-width: 960px) {
    .profile-network-grid[b-87kdpd1ac4] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .profile-network-section[b-87kdpd1ac4] { padding: 1rem; border-radius: 18px; }
    .profile-network-header[b-87kdpd1ac4] { align-items: flex-start; }
    .profile-network-heading p[b-87kdpd1ac4] { font-size: 0.86rem; }
    .profile-network-total[b-87kdpd1ac4] { display: none; }
    .profile-network-grid[b-87kdpd1ac4] { grid-template-columns: minmax(0, 1fr); }
    .profile-network-card[b-87kdpd1ac4] { min-height: 8.8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .profile-network-card[b-87kdpd1ac4],
    .profile-network-action[b-87kdpd1ac4] { transition: none; }
    .profile-network-skeleton[b-87kdpd1ac4],
    .profile-network-action-spinner[b-87kdpd1ac4] { animation: none; }
}
/* /Components/Shared/Profile/ProfileFriendsSection.razor.rz.scp.css */
.profile-friends-section[b-6uc3kvr6cb] {
    display: grid;
    gap: 1rem;
}

.profile-friends-header[b-6uc3kvr6cb] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
}

.profile-friends-header span[b-6uc3kvr6cb] {
    color: rgb(var(--wl-cyan-rgb));
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.profile-friends-header h2[b-6uc3kvr6cb] {
    margin: 0.2rem 0 0;
    color: var(--wl-text-primary);
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 0.95;
}

.profile-friends-header strong[b-6uc3kvr6cb] {
    color: var(--wl-text-primary);
    font-family: "Bebas Neue", sans-serif;
    font-size: 2.2rem;
    line-height: 1;
}

.profile-friends-loading[b-6uc3kvr6cb],
.profile-friends-empty[b-6uc3kvr6cb] {
    padding: 1.2rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.68);
    color: var(--wl-text-secondary);
}

.profile-friends-grid[b-6uc3kvr6cb] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 0.85rem;
}

.profile-friends-card[b-6uc3kvr6cb] {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
        "avatar name"
        "avatar tier"
        "avatar bar"
        "avatar meta";
    gap: 0.18rem 0.75rem;
    align-items: center;
    min-width: 0;
    min-height: 88px;
    padding: 0.75rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    background:
        radial-gradient(circle at 0 0, rgba(var(--wl-cyan-rgb), 0.08), transparent 42%),
        rgba(var(--wl-bg-secondary-rgb), 0.72);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.profile-friends-card:hover[b-6uc3kvr6cb] {
    border-color: rgba(var(--wl-cyan-rgb), 0.36);
    background: rgba(var(--wl-bg-secondary-rgb), 0.88);
    transform: translateY(-1px);
}

.profile-friends-card img[b-6uc3kvr6cb] {
    grid-area: avatar;
    width: 64px;
    height: 64px;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.12);
    border-radius: 8px;
    object-fit: cover;
    background: rgba(var(--wl-bg-primary-rgb), 0.55);
}

.profile-friends-name[b-6uc3kvr6cb] {
    grid-area: name;
    min-width: 0;
    overflow: hidden;
    color: var(--wl-text-primary);
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-friends-tier[b-6uc3kvr6cb] {
    grid-area: tier;
    width: fit-content;
    color: var(--wl-gold);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-friends-bar[b-6uc3kvr6cb] {
    grid-area: bar;
    display: block;
    overflow: hidden;
    height: 0.42rem;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.1);
}

.profile-friends-bar span[b-6uc3kvr6cb] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgb(var(--wl-cyan-rgb)), var(--wl-gold));
}

.profile-friends-meta[b-6uc3kvr6cb] {
    grid-area: meta;
    color: var(--wl-text-muted);
    font-size: 0.78rem;
}

.profile-friends-pager[b-6uc3kvr6cb] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--wl-text-secondary);
}

.profile-friends-pager button[b-6uc3kvr6cb] {
    min-height: 2.25rem;
    padding: 0 0.85rem;
    border: 1px solid rgba(var(--wl-cyan-rgb), 0.24);
    border-radius: 8px;
    background: rgba(var(--wl-cyan-rgb), 0.08);
    color: rgb(var(--wl-cyan-rgb));
    font-size: 0.76rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-friends-pager button:disabled[b-6uc3kvr6cb] {
    opacity: 0.38;
}
/* /Components/Shared/Profile/ProfileLegacyHistorySection.razor.rz.scp.css */
/* Shared section chrome (.profile-section, header) lives in Styles/app.css. */

.legacy-archive-grid[b-7jfpke9wku] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem;
}

.legacy-release-card[b-7jfpke9wku] {
    display: grid;
    grid-template-rows: auto 1fr;
    overflow: hidden;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.7);
}

.legacy-release-media[b-7jfpke9wku] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 0;
    padding: 0;
    background: rgba(var(--wl-bg-primary-rgb), 0.62);
    color: var(--wl-text-secondary);
    cursor: pointer;
}

.legacy-release-media-placeholder[b-7jfpke9wku] {
    cursor: default;
}

.legacy-release-media img[b-7jfpke9wku],
.legacy-release-gallery img[b-7jfpke9wku],
.legacy-media-lightbox img[b-7jfpke9wku] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.legacy-release-media span[b-7jfpke9wku] {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

.legacy-release-body[b-7jfpke9wku] {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.95rem;
}

.legacy-release-kicker[b-7jfpke9wku] {
    color: var(--wl-gold);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.legacy-release-body h3[b-7jfpke9wku] {
    margin: 0;
    color: var(--wl-text-primary);
    font-size: 1rem;
    line-height: 1.25;
}

.legacy-release-body p[b-7jfpke9wku] {
    min-height: 1.2rem;
    margin: 0;
    color: var(--wl-text-secondary);
    font-size: 0.84rem;
}

.legacy-release-metrics[b-7jfpke9wku] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
}

.legacy-release-metrics div[b-7jfpke9wku] {
    min-width: 0;
    padding: 0.55rem;
    border-radius: 6px;
    background: rgba(var(--wl-bg-primary-rgb), 0.46);
}

.legacy-release-metrics dt[b-7jfpke9wku] {
    color: var(--wl-text-secondary);
    font-size: 0.68rem;
    text-transform: uppercase;
}

.legacy-release-metrics dd[b-7jfpke9wku] {
    margin: 0.15rem 0 0;
    color: var(--wl-text-primary);
    font-size: 0.84rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.legacy-release-ratings[b-7jfpke9wku] {
    display: grid;
    gap: 0.35rem;
    color: var(--wl-text-secondary);
    font-size: 0.78rem;
}

.legacy-release-ratings .legacy-rating[b-7jfpke9wku] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.legacy-release-detail[b-7jfpke9wku] {
    align-self: flex-start;
    margin-top: auto;
    border: 1px solid rgba(var(--wl-gold-rgb), 0.45);
    border-radius: 6px;
    padding: 0.45rem 0.7rem;
    background: rgba(var(--wl-gold-rgb), 0.12);
    color: var(--wl-gold);
    font-weight: 700;
    cursor: pointer;
}

.legacy-history-list[b-7jfpke9wku] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.legacy-history-item[b-7jfpke9wku] {
    display: grid;
    grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.62);
}

.legacy-history-type[b-7jfpke9wku] {
    color: var(--wl-gold);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.legacy-history-description[b-7jfpke9wku] {
    min-width: 0;
    color: var(--wl-text-primary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legacy-release-modal-backdrop[b-7jfpke9wku],
.legacy-media-lightbox[b-7jfpke9wku] {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.72);
}

.legacy-release-modal[b-7jfpke9wku] {
    width: min(58rem, 100%);
    max-height: min(45rem, 92vh);
    overflow: auto;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    background:
        linear-gradient(180deg,
            rgba(var(--wl-bg-modal-rgb), 0.99) 0%,
            rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}

.legacy-release-modal-header[b-7jfpke9wku] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid var(--wl-border-subtle);
    background: rgba(var(--wl-bg-modal-rgb), 0.99);
}

.legacy-release-modal-header span[b-7jfpke9wku] {
    color: var(--wl-gold);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.legacy-release-modal-header h2[b-7jfpke9wku] {
    margin: 0.2rem 0 0;
    color: var(--wl-text-primary);
    font-size: 1.25rem;
}

.legacy-modal-close[b-7jfpke9wku] {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 999px;
    background: rgba(var(--wl-bg-primary-rgb), 0.6);
    color: var(--wl-text-primary);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.legacy-release-gallery[b-7jfpke9wku] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 0.7rem;
    padding: 1rem;
}

.legacy-release-gallery button[b-7jfpke9wku] {
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 6px;
    padding: 0;
    background: rgba(var(--wl-bg-primary-rgb), 0.52);
    cursor: pointer;
}

.legacy-tracklist[b-7jfpke9wku] {
    padding: 0 1rem 1rem;
}

.legacy-tracklist h3[b-7jfpke9wku] {
    margin: 0.25rem 0 0.75rem;
    color: var(--wl-text-primary);
    font-size: 1rem;
}

.legacy-track-row[b-7jfpke9wku] {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0;
    border-top: 1px solid var(--wl-border-subtle);
}

.legacy-track-number[b-7jfpke9wku] {
    color: var(--wl-text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
}

.legacy-track-main[b-7jfpke9wku] {
    min-width: 0;
}

.legacy-track-main strong[b-7jfpke9wku],
.legacy-track-main span[b-7jfpke9wku] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legacy-track-main strong[b-7jfpke9wku] {
    color: var(--wl-text-primary);
}

.legacy-track-main span[b-7jfpke9wku] {
    color: var(--wl-text-secondary);
    font-size: 0.78rem;
}

.legacy-track-ratings[b-7jfpke9wku] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.legacy-track-peaks[b-7jfpke9wku] {
    grid-column: 2 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.legacy-track-peaks span[b-7jfpke9wku] {
    border-radius: 999px;
    padding: 0.16rem 0.45rem;
    background: rgba(var(--wl-gold-rgb), 0.13);
    color: var(--wl-gold);
    font-size: 0.72rem;
    font-weight: 700;
}

.legacy-media-lightbox[b-7jfpke9wku] {
    cursor: zoom-out;
}

.legacy-media-lightbox .legacy-modal-close[b-7jfpke9wku] {
    position: fixed;
    top: 1rem;
    right: 1rem;
}

.legacy-media-lightbox img[b-7jfpke9wku] {
    width: auto;
    max-width: min(78rem, 94vw);
    height: auto;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

@media (max-width: 600px) {
    .legacy-archive-grid[b-7jfpke9wku] {
        grid-template-columns: 1fr;
    }

    .legacy-release-metrics[b-7jfpke9wku] {
        grid-template-columns: 1fr;
    }

    .legacy-track-row[b-7jfpke9wku] {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .legacy-track-ratings[b-7jfpke9wku],
    .legacy-track-peaks[b-7jfpke9wku] {
        grid-column: 2;
    }

    .legacy-history-item[b-7jfpke9wku] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .legacy-history-description[b-7jfpke9wku] {
        white-space: normal;
    }
}
/* /Components/Shared/Profile/ProfileLegacyRatingStars.razor.rz.scp.css */
.legacy-rating[b-yzy1f4k8mj] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.legacy-rating-label[b-yzy1f4k8mj] {
    color: var(--wl-text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.legacy-stars[b-yzy1f4k8mj] {
    display: inline-flex;
    align-items: center;
    gap: 0.08rem;
    min-width: 4.25rem;
    line-height: 1;
}

.legacy-star[b-yzy1f4k8mj] {
    width: 0.78rem;
    height: 0.78rem;
    color: rgba(var(--wl-text-secondary-rgb), 0.42);
    font-size: 0.78rem;
}

.legacy-star[b-yzy1f4k8mj]::before {
    content: "☆";
}

.legacy-star.filled[b-yzy1f4k8mj] {
    color: var(--wl-gold);
}

.legacy-star.filled[b-yzy1f4k8mj]::before {
    content: "★";
}

.legacy-stars.fire .legacy-star.filled[b-yzy1f4k8mj] {
    color: #ff5a3d;
    text-shadow: 0 0 8px rgba(255, 90, 61, 0.42);
}

.legacy-stars.platinum .legacy-star.filled[b-yzy1f4k8mj] {
    color: #dbeafe;
    text-shadow: 0 0 8px rgba(191, 219, 254, 0.48);
}
/* /Components/Shared/Profile/ProfileLiteratureSection.razor.rz.scp.css */
.artifact-list[b-wmxun7m4pi] {
    display: grid;
    gap: 0.75rem;
}

.artifact-row[b-wmxun7m4pi] {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) minmax(150px, auto);
    gap: 0.9rem;
    align-items: center;
    min-height: 92px;
    padding: 0.75rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.68);
    color: inherit;
    text-decoration: none;
}

.artifact-row:hover[b-wmxun7m4pi] {
    border-color: var(--wl-gold-border);
    background: rgba(var(--wl-bg-secondary-rgb), 0.86);
}

.artifact-thumb[b-wmxun7m4pi] {
    display: grid;
    place-items: center;
    width: 76px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: var(--wl-gold);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
}

.artifact-thumb[b-wmxun7m4pi]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artifact-main[b-wmxun7m4pi] {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
}

.artifact-title-row[b-wmxun7m4pi] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.artifact-title-row strong[b-wmxun7m4pi] {
    min-width: 0;
    overflow: hidden;
    color: var(--wl-text-primary);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artifact-title-row span[b-wmxun7m4pi] {
    flex-shrink: 0;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: var(--wl-gold-bg);
    color: var(--wl-gold);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.artifact-meta[b-wmxun7m4pi],
.artifact-stats[b-wmxun7m4pi] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    color: var(--wl-text-muted);
    font-size: 0.78rem;
}

.artifact-stats[b-wmxun7m4pi] {
    justify-content: flex-end;
}

.artifact-stats span[b-wmxun7m4pi] {
    display: grid;
    gap: 0.1rem;
    min-width: 58px;
    text-align: right;
}

.artifact-stats strong[b-wmxun7m4pi] {
    color: var(--wl-text-primary);
    font-size: 0.95rem;
}

.artifact-stats small[b-wmxun7m4pi] {
    color: var(--wl-text-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .artifact-row[b-wmxun7m4pi] {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .artifact-thumb[b-wmxun7m4pi] {
        width: 60px;
    }

    .artifact-stats[b-wmxun7m4pi] {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .artifact-stats span[b-wmxun7m4pi] {
        text-align: left;
    }
}
/* /Components/Shared/Profile/ProfilePopularitySection.razor.rz.scp.css */
.profile-popularity-section[b-gfhmtzm7s9] {
    display: grid;
    gap: 1rem;
}

.profile-popularity-header[b-gfhmtzm7s9],
.profile-popularity-summary[b-gfhmtzm7s9],
.profile-popularity-branch[b-gfhmtzm7s9] {
    border: 1px solid rgba(32, 245, 220, 0.18);
    background: rgba(7, 12, 28, 0.72);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.24);
}

.profile-popularity-header[b-gfhmtzm7s9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
}

.profile-popularity-header span[b-gfhmtzm7s9],
.profile-popularity-summary span[b-gfhmtzm7s9],
.profile-popularity-branch-main span[b-gfhmtzm7s9],
.profile-popularity-branch dt[b-gfhmtzm7s9] {
    color: var(--wl-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.profile-popularity-header h2[b-gfhmtzm7s9] {
    margin: 0.25rem 0 0;
    color: var(--wl-text);
    font-size: 1.35rem;
    font-weight: 800;
}

.profile-popularity-header strong[b-gfhmtzm7s9] {
    color: var(--wl-accent);
    font-size: 1.5rem;
}

.profile-popularity-summary[b-gfhmtzm7s9] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.profile-popularity-summary div[b-gfhmtzm7s9] {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.profile-popularity-summary div:last-child[b-gfhmtzm7s9] {
    border-right: 0;
}

.profile-popularity-summary strong[b-gfhmtzm7s9],
.profile-popularity-branch-main strong[b-gfhmtzm7s9],
.profile-popularity-branch dd[b-gfhmtzm7s9] {
    color: var(--wl-text);
    font-weight: 800;
}

.profile-popularity-branches[b-gfhmtzm7s9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.profile-popularity-branch[b-gfhmtzm7s9] {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
}

.profile-popularity-branch-main[b-gfhmtzm7s9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.profile-popularity-bar[b-gfhmtzm7s9] {
    height: 0.45rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}

.profile-popularity-bar span[b-gfhmtzm7s9] {
    display: block;
    width: var(--share);
    height: 100%;
    background: linear-gradient(90deg, var(--wl-accent), var(--wl-gold));
}

.profile-popularity-branch dl[b-gfhmtzm7s9] {
    display: grid;
    gap: 0.55rem;
    margin: 0;
}

.profile-popularity-branch dl div[b-gfhmtzm7s9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.profile-popularity-branch dd[b-gfhmtzm7s9] {
    margin: 0;
}

.profile-popularity-empty[b-gfhmtzm7s9] {
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--wl-text-muted);
    background: rgba(7, 12, 28, 0.55);
    text-align: center;
}

@media (max-width: 700px) {
    .profile-popularity-header[b-gfhmtzm7s9],
    .profile-popularity-branch-main[b-gfhmtzm7s9],
    .profile-popularity-branch dl div[b-gfhmtzm7s9] {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-popularity-summary[b-gfhmtzm7s9] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .profile-popularity-summary div:nth-child(2n)[b-gfhmtzm7s9] {
        border-right: 0;
    }
}
/* /Components/Shared/Profile/ProfileRolesSection.razor.rz.scp.css */
.artifact-list[b-a3y7a6jjpm] {
    display: grid;
    gap: 0.75rem;
}

.artifact-row[b-a3y7a6jjpm] {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr) minmax(150px, auto);
    gap: 0.9rem;
    align-items: center;
    min-height: 92px;
    padding: 0.75rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 8px;
    background: rgba(var(--wl-bg-secondary-rgb), 0.68);
    color: inherit;
    text-decoration: none;
}

.artifact-row:hover[b-a3y7a6jjpm] {
    border-color: var(--wl-gold-border);
    background: rgba(var(--wl-bg-secondary-rgb), 0.86);
}

.artifact-thumb[b-a3y7a6jjpm] {
    display: grid;
    place-items: center;
    width: 76px;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    color: var(--wl-gold);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
}

.artifact-thumb[b-a3y7a6jjpm]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artifact-main[b-a3y7a6jjpm] {
    min-width: 0;
    display: grid;
    gap: 0.35rem;
}

.artifact-title-row[b-a3y7a6jjpm] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.artifact-title-row strong[b-a3y7a6jjpm] {
    min-width: 0;
    overflow: hidden;
    color: var(--wl-text-primary);
    font-size: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.artifact-title-row span[b-a3y7a6jjpm] {
    flex-shrink: 0;
    padding: 0.18rem 0.45rem;
    border-radius: 999px;
    background: var(--wl-gold-bg);
    color: var(--wl-gold);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.artifact-meta[b-a3y7a6jjpm],
.artifact-stats[b-a3y7a6jjpm] {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    color: var(--wl-text-muted);
    font-size: 0.78rem;
}

.artifact-stats[b-a3y7a6jjpm] {
    justify-content: flex-end;
}

.artifact-stats span[b-a3y7a6jjpm] {
    display: grid;
    gap: 0.1rem;
    min-width: 58px;
    text-align: right;
}

.artifact-stats strong[b-a3y7a6jjpm] {
    color: var(--wl-text-primary);
    font-size: 0.95rem;
}

.artifact-stats small[b-a3y7a6jjpm] {
    color: var(--wl-text-muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    .artifact-row[b-a3y7a6jjpm] {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .artifact-thumb[b-a3y7a6jjpm] {
        width: 60px;
    }

    .artifact-stats[b-a3y7a6jjpm] {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .artifact-stats span[b-a3y7a6jjpm] {
        text-align: left;
    }
}
/* /Components/Shared/Profile/ProfileScandalsSection.razor.rz.scp.css */
/* ========================================
   PROFILE SCANDALS SECTION
   Stage accents are component-local tokens
   declared on the section root (never :root
   in scoped CSS - it compiles to :root[b-xxx]
   and matches nothing).
   ======================================== */

.profile-scandals[b-2p6eez6qe4] {
    --scandal-simmering-rgb: 245, 158, 11;
    --scandal-blazing-rgb: 249, 115, 22;
    --scandal-inferno-rgb: 239, 68, 68;
}

/* --- Active scandal cards --- */
.scandal-active-list[b-2p6eez6qe4] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.scandal-card[b-2p6eez6qe4] {
    --stage-rgb: var(--scandal-simmering-rgb);
    position: relative;
    overflow: hidden;
    padding: 1rem 1.25rem 1.25rem;
    border: 1px solid var(--wl-border-subtle);
    border-left: 3px solid rgb(var(--stage-rgb));
    border-radius: 0.75rem;
    background:
        linear-gradient(135deg, rgba(var(--stage-rgb), 0.08) 0%, transparent 45%),
        rgba(var(--wl-bg-secondary-rgb), 0.6);
}

.scandal-card--simmering[b-2p6eez6qe4] {
    --stage-rgb: var(--scandal-simmering-rgb);
}

.scandal-card--blazing[b-2p6eez6qe4] {
    --stage-rgb: var(--scandal-blazing-rgb);
}

.scandal-card--inferno[b-2p6eez6qe4] {
    --stage-rgb: var(--scandal-inferno-rgb);
    box-shadow: 0 0 24px rgba(var(--stage-rgb), 0.15);
}

/* --- Pills --- */
.scandal-card-pills[b-2p6eez6qe4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.scandal-pill[b-2p6eez6qe4] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.scandal-pill svg[b-2p6eez6qe4] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.scandal-pill-category[b-2p6eez6qe4] {
    color: var(--wl-text-secondary);
    background: rgba(var(--wl-contrast-rgb), 0.07);
    border: 1px solid var(--wl-border-subtle);
}

.scandal-pill-stage[b-2p6eez6qe4] {
    color: rgb(var(--stage-rgb));
    background: rgba(var(--stage-rgb), 0.12);
    border: 1px solid rgba(var(--stage-rgb), 0.25);
}

.scandal-pill-resolved[b-2p6eez6qe4] {
    color: var(--wl-text-muted);
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border: 1px solid var(--wl-border-subtle);
}

/* Permanent scandals: gilded infamy instead of the muted "extinguished" pill. */
.scandal-pill-permanent[b-2p6eez6qe4] {
    color: var(--wl-gold);
    background: rgba(var(--wl-gold-rgb), 0.12);
    border: 1px solid rgba(var(--wl-gold-rgb), 0.3);
}

.scandal-active-flag[b-2p6eez6qe4] {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(var(--stage-rgb));
}

/* --- Title & summary --- */
.scandal-title[b-2p6eez6qe4] {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--wl-text-primary);
    overflow-wrap: anywhere;
}

.scandal-title a[b-2p6eez6qe4],
.scandal-archive-name a[b-2p6eez6qe4] {
    color: inherit;
    text-decoration: none;
}

.scandal-title a:hover[b-2p6eez6qe4],
.scandal-archive-name a:hover[b-2p6eez6qe4] {
    color: var(--wl-gold);
}

.scandal-summary[b-2p6eez6qe4] {
    margin: 0 0 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--wl-text-secondary);
    overflow-wrap: anywhere;
}

/* --- Heat meter --- */
.scandal-heat-heading[b-2p6eez6qe4] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.75rem;
    color: var(--wl-text-muted);
}

.scandal-heat-heading strong[b-2p6eez6qe4] {
    color: rgb(var(--stage-rgb));
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.scandal-heat-track[b-2p6eez6qe4] {
    height: 7px;
    margin-top: 0.4rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.09);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

.scandal-heat-fill[b-2p6eez6qe4] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(var(--stage-rgb), 0.65), rgb(var(--stage-rgb)));
    box-shadow: 0 0 12px rgba(var(--stage-rgb), 0.35);
    transition: width 0.25s ease;
}

/* --- Participants --- */
.scandal-participants[b-2p6eez6qe4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.scandal-participants-label[b-2p6eez6qe4] {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.scandal-participant[b-2p6eez6qe4] {
    padding: 2px 9px;
    border-radius: 100px;
    font-size: 0.75rem;
    color: var(--wl-text-primary);
    background: rgba(var(--wl-contrast-rgb), 0.06);
    border: 1px solid var(--wl-border-subtle);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.scandal-participant:hover[b-2p6eez6qe4] {
    color: var(--wl-gold);
    border-color: var(--wl-gold-border);
}

/* --- Player PR actions --- */
.scandal-actions[b-2p6eez6qe4] {
    margin-top: 1rem;
}

.scandal-backfire[b-2p6eez6qe4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid rgba(var(--scandal-inferno-rgb), 0.35);
    border-radius: 0.5rem;
    background: rgba(var(--scandal-inferno-rgb), 0.1);
    color: rgb(var(--scandal-inferno-rgb));
    font-size: 0.8rem;
    font-weight: 600;
}

.scandal-backfire svg[b-2p6eez6qe4] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.scandal-actions-row[b-2p6eez6qe4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.scandal-action-btn[b-2p6eez6qe4] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    background: rgba(var(--wl-contrast-rgb), 0.05);
    color: var(--wl-text-primary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.scandal-action-btn:hover:not(:disabled)[b-2p6eez6qe4] {
    color: var(--wl-gold);
    border-color: var(--wl-gold-border);
    background: rgba(var(--wl-contrast-rgb), 0.08);
}

.scandal-action-btn:disabled[b-2p6eez6qe4] {
    opacity: 0.45;
    cursor: not-allowed;
}

.scandal-action-costs[b-2p6eez6qe4] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.scandal-cost[b-2p6eez6qe4] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--wl-text-muted);
    white-space: nowrap;
}

/* Cost icons come from PromotionIcons (another component), hence ::deep. */
.scandal-cost[b-2p6eez6qe4]  svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

/* --- Archive --- */
.scandal-archive[b-2p6eez6qe4] {
    margin-top: 1.5rem;
}

.scandal-archive-title[b-2p6eez6qe4] {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
}

.scandal-archive-list[b-2p6eez6qe4] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scandal-archive-row[b-2p6eez6qe4] {
    display: flex;
    flex-wrap: wrap; /* lets the full-width stigma line drop below name + dates */
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--wl-border-subtle);
    border-radius: 0.5rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.4);
}

.scandal-archive-main[b-2p6eez6qe4] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.scandal-archive-name[b-2p6eez6qe4] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    overflow-wrap: anywhere;
}

.scandal-archive-dates[b-2p6eez6qe4] {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--wl-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* "Known for..." line under a Permanent entry - full row width. */
.scandal-archive-stigma[b-2p6eez6qe4] {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--wl-text-secondary);
    overflow-wrap: anywhere;
}

.scandal-stigma-label[b-2p6eez6qe4] {
    margin-right: 0.25rem;
    font-weight: 600;
    color: var(--wl-gold);
}

/* The embedded timeline (child component root - hence ::deep) takes the full row
   width so it drops below the name + dates line inside the flex-wrap row. */
.scandal-archive-row[b-2p6eez6qe4]  .scandal-timeline {
    flex-basis: 100%;
    margin-top: 0;
}

@media (max-width: 600px) {
    .scandal-archive-row[b-2p6eez6qe4] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scandal-heat-fill[b-2p6eez6qe4] {
        transition: none;
    }
}
/* /Components/Shared/Profile/ProfileWorksSection.razor.rz.scp.css */
/* Shared section chrome (.profile-section, header, .empty-state) lives in
   Styles/app.css. Only works-unique rules remain below. */

.works-group[b-pdaihbgmmi] {
    margin-bottom: 1.5rem;
}

.works-group:last-child[b-pdaihbgmmi] {
    margin-bottom: 0;
}

.works-subtitle[b-pdaihbgmmi] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wl-gold);
    margin: 0 0 0.6rem;
}

.works-list[b-pdaihbgmmi] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.works-item[b-pdaihbgmmi] {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    border: 1px solid var(--wl-border-subtle, rgba(128, 128, 128, 0.16));
    background: rgba(var(--wl-bg-secondary-rgb), 0.6);
    color: var(--wl-text-primary);
}

.works-name[b-pdaihbgmmi] {
    color: inherit;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.works-name:hover[b-pdaihbgmmi] {
    color: var(--wl-gold);
}

.works-meta[b-pdaihbgmmi] {
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--wl-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}
/* /Components/Shared/ScandalTimeline.razor.rz.scp.css */
/* ========================================
   SCANDAL TIMELINE
   Expandable event rail shared by the
   profile scandal cards and the world
   board. Accents are component-local
   aliases of theme tokens declared on the
   component root (never :root in scoped
   CSS - it compiles to :root[b-xxx] and
   matches nothing). Hot = heat gained,
   cool = heat defused; both resolve from
   var(--wl-*) so all three themes work.
   ======================================== */

.scandal-timeline[b-4n58tdpcgh] {
    --timeline-hot-rgb: var(--wl-crimson-rgb);
    --timeline-cool-rgb: var(--wl-cyan-rgb);
    margin-top: 0.85rem;
}

/* --- Toggle --- */
.scandal-timeline-actions[b-4n58tdpcgh] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.scandal-timeline-toggle[b-4n58tdpcgh] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    margin-left: -0.5rem;
    border: none;
    border-radius: 0.4rem;
    background: transparent;
    color: var(--wl-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease;
}

.scandal-timeline-detail-link[b-4n58tdpcgh] {
    color: var(--wl-text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
}

.scandal-timeline-detail-link:hover[b-4n58tdpcgh] {
    color: var(--wl-gold);
}

.scandal-timeline-toggle:hover[b-4n58tdpcgh] {
    color: var(--wl-text-primary);
    background: rgba(var(--wl-contrast-rgb), 0.06);
}

.scandal-timeline-chevron[b-4n58tdpcgh] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.scandal-timeline-chevron--open[b-4n58tdpcgh] {
    transform: rotate(180deg);
}

/* --- Loading skeleton --- */
.scandal-timeline-loading[b-4n58tdpcgh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0 0.2rem 1.4rem;
}

.scandal-timeline-skeleton[b-4n58tdpcgh] {
    display: block;
    height: 0.8rem;
    max-width: 260px;
    border-radius: 0.4rem;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    animation: scandal-timeline-pulse-b-4n58tdpcgh 1.2s ease-in-out infinite;
}

@keyframes scandal-timeline-pulse-b-4n58tdpcgh {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* --- Rail + entries --- */
.scandal-timeline-list[b-4n58tdpcgh] {
    position: relative;
    margin: 0.5rem 0 0;
    padding: 0 0 0 1.4rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* The vertical rail the dots sit on. */
.scandal-timeline-list[b-4n58tdpcgh]::before {
    content: "";
    position: absolute;
    top: 0.35rem;
    bottom: 0.35rem;
    left: 4px;
    width: 2px;
    border-radius: 999px;
    background: rgba(var(--wl-contrast-rgb), 0.12);
}

.scandal-timeline-entry[b-4n58tdpcgh] {
    --entry-rgb: var(--timeline-hot-rgb);
    position: relative;
}

.scandal-timeline-entry--hot[b-4n58tdpcgh] {
    --entry-rgb: var(--timeline-hot-rgb);
}

.scandal-timeline-entry--cool[b-4n58tdpcgh] {
    --entry-rgb: var(--timeline-cool-rgb);
}

.scandal-timeline-dot[b-4n58tdpcgh] {
    position: absolute;
    top: 0.3rem;
    left: -1.4rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgb(var(--entry-rgb));
    box-shadow: 0 0 0 3px rgba(var(--entry-rgb), 0.18);
}

.scandal-timeline-body[b-4n58tdpcgh] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.scandal-timeline-kind[b-4n58tdpcgh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--wl-text-primary);
    overflow-wrap: anywhere;
}

.scandal-timeline-actor[b-4n58tdpcgh] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--wl-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.scandal-timeline-actor:hover[b-4n58tdpcgh] {
    color: var(--wl-gold);
}

.scandal-timeline-meta[b-4n58tdpcgh] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.72rem;
    color: var(--wl-text-muted);
}

.scandal-timeline-delta[b-4n58tdpcgh] {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--entry-rgb));
}

.scandal-timeline-date[b-4n58tdpcgh] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.scandal-timeline-postlink[b-4n58tdpcgh] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--wl-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.scandal-timeline-postlink:hover[b-4n58tdpcgh] {
    color: var(--wl-gold);
}

.scandal-timeline-postlink svg[b-4n58tdpcgh] {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .scandal-timeline-chevron[b-4n58tdpcgh] {
        transition: none;
    }

    .scandal-timeline-skeleton[b-4n58tdpcgh] {
        animation: none;
    }
}
/* /Components/Shared/Social/PlayerSearchCard.razor.rz.scp.css */
/* ============================================
   PLAYER SEARCH ROW - Compact list item
   Theme: cropped avatar face + identity + action
   ============================================ */

.player-row[b-hhq0k0ycvr] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border-medium);
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px var(--wl-shadow-color);
}

.player-row:hover[b-hhq0k0ycvr] {
    transform: translateY(-2px);
    border-color: var(--wl-gold-border);
    box-shadow:
        0 8px 18px var(--wl-shadow-color),
        0 0 0 1px var(--wl-gold-border);
}

.player-row.blocked[b-hhq0k0ycvr] {
    cursor: not-allowed;
}

.player-row.blocked:hover[b-hhq0k0ycvr] {
    transform: none;
    border-color: var(--wl-border-medium);
    box-shadow: 0 1px 3px var(--wl-shadow-color);
}

/* Avatar - face crop */
.avatar-container[b-hhq0k0ycvr] {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--wl-bg-tertiary);
    border: 1px solid var(--wl-border-medium);
}

.avatar-image[b-hhq0k0ycvr] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.player-row.blocked .avatar-image[b-hhq0k0ycvr] {
    filter: grayscale(0.6) brightness(0.8);
}

/* Identity + stats */
.player-info[b-hhq0k0ycvr] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.nickname[b-hhq0k0ycvr] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--wl-text-primary);
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nickname-link[b-hhq0k0ycvr] {
    color: inherit;
    text-decoration: none;
}
.nickname-link:hover[b-hhq0k0ycvr] {
    color: var(--wl-gold);
    text-decoration: underline;
}

/* Stats row */
.stats-row[b-hhq0k0ycvr] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.stat[b-hhq0k0ycvr] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.stat-icon[b-hhq0k0ycvr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
}

.stat-icon svg[b-hhq0k0ycvr] {
    width: 100%;
    height: 100%;
}

.stat-value[b-hhq0k0ycvr] {
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fame-stat[b-hhq0k0ycvr] {
    color: var(--wl-text-secondary);
}

.fame-stat .stat-icon[b-hhq0k0ycvr] {
    color: var(--wl-gold);
}

.cost-stat[b-hhq0k0ycvr] {
    color: var(--wl-gold);
}

.stat-divider[b-hhq0k0ycvr] {
    width: 1px;
    height: 14px;
    background: var(--wl-border-medium);
}

/* Action area */
.player-action[b-hhq0k0ycvr] {
    flex-shrink: 0;
}

.action-button[b-hhq0k0ycvr] {
    padding: 0.6rem 1.1rem;
    background: linear-gradient(
        135deg,
        var(--wl-gold) 0%,
        var(--wl-gold-light) 50%,
        var(--wl-gold) 100%
    );
    background-size: 200% 200%;
    border: none;
    border-radius: 10px;
    color: var(--wl-bg-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 2px 8px rgba(var(--wl-gold-rgb), 0.3),
        inset 0 1px 0 rgba(var(--wl-contrast-rgb), 0.2);
}

.action-button:hover[b-hhq0k0ycvr] {
    background-position: 100% 0;
    box-shadow:
        0 4px 16px rgba(var(--wl-gold-rgb), 0.4),
        inset 0 1px 0 var(--wl-text-muted);
    transform: translateY(-1px);
}

.action-button:active[b-hhq0k0ycvr] {
    transform: translateY(0);
    box-shadow:
        0 2px 4px rgba(var(--wl-gold-rgb), 0.3),
        inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Blocked state */
.blocked-badge[b-hhq0k0ycvr] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(var(--wl-red-rgb), 0.15);
    border: 1px solid rgba(var(--wl-red-rgb), 0.3);
    border-radius: 10px;
}

.blocked-icon[b-hhq0k0ycvr] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: rgba(var(--wl-red-rgb), 0.9);
    flex-shrink: 0;
}

.blocked-icon svg[b-hhq0k0ycvr] {
    width: 100%;
    height: 100%;
}

.blocked-text[b-hhq0k0ycvr] {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(var(--wl-red-rgb), 0.9);
}

/* Responsive - wrap action below identity on narrow screens */
@media (max-width: 560px) {
    .player-row[b-hhq0k0ycvr] {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .player-info[b-hhq0k0ycvr] {
        flex: 1 1 calc(100% - 76px);
    }

    .player-action[b-hhq0k0ycvr] {
        flex: 1 1 100%;
    }

    .action-button[b-hhq0k0ycvr] {
        width: 100%;
    }

    .blocked-badge[b-hhq0k0ycvr] {
        justify-content: center;
    }
}
/* /Components/Shared/Social/SocialStatsSection.razor.rz.scp.css */
.social-stats-section[b-3bkbiw5ln0] {
    margin-top: 2rem;
}

.section-header[b-3bkbiw5ln0] {
    margin-bottom: 1.5rem;
}

.section-title[b-3bkbiw5ln0] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: var(--wl-text-primary);
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.section-title[b-3bkbiw5ln0]::before {
    content: '';
    width: 3px;
    height: 1.5rem;
    background: linear-gradient(180deg, var(--wl-gold) 0%, var(--wl-gold-border) 100%);
}

.stats-grid[b-3bkbiw5ln0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.stat-card[b-3bkbiw5ln0] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(var(--wl-bg-secondary-rgb), 0.8);
    border: 1px solid var(--wl-border-subtle);
    position: relative;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.stat-card[b-3bkbiw5ln0]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, rgba(var(--wl-gold-rgb), 0.5) 0%, var(--wl-gold-bg) 100%);
}

.stat-card:hover[b-3bkbiw5ln0] {
    border-color: var(--wl-gold-border);
    transform: translateY(-2px);
    box-shadow: 0 10px 40px var(--wl-shadow-color);
}

.stat-icon[b-3bkbiw5ln0] {
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--wl-gold-bg) 0%, rgba(var(--wl-gold-rgb), 0.05) 100%);
    border: 1px solid var(--wl-gold-border);
    color: var(--wl-gold);
}

.stat-icon :deep(svg)[b-3bkbiw5ln0] {
    width: 1.5rem;
    height: 1.5rem;
}

.stat-content[b-3bkbiw5ln0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label[b-3bkbiw5ln0] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.stat-value[b-3bkbiw5ln0] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    color: var(--wl-text-primary);
    letter-spacing: 0.02em;
    line-height: 1;
}

.stat-subtext[b-3bkbiw5ln0] {
    font-size: 0.875rem;
    color: var(--wl-text-muted);
}

/* Specific card styling */
.collaboration-rating .stat-icon[b-3bkbiw5ln0] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border-color: rgba(16, 185, 129, 0.3);
    color: #10b981;
}

.collaboration-rating[b-3bkbiw5ln0]::before {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.5) 0%, rgba(16, 185, 129, 0.1) 100%);
}

.beef-record .stat-icon[b-3bkbiw5ln0] {
    background: linear-gradient(135deg, rgba(var(--wl-red-rgb), 0.15) 0%, rgba(var(--wl-red-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-red-rgb), 0.3);
    color: #ef4444;
}

.beef-record[b-3bkbiw5ln0]::before {
    background: linear-gradient(180deg, rgba(var(--wl-red-rgb), 0.5) 0%, rgba(var(--wl-red-rgb), 0.1) 100%);
}

.rival-info .stat-icon[b-3bkbiw5ln0] {
    background: linear-gradient(135deg, rgba(var(--wl-purple-rgb), 0.15) 0%, rgba(var(--wl-purple-rgb), 0.05) 100%);
    border-color: rgba(var(--wl-purple-rgb), 0.3);
    color: var(--wl-purple);
}

.rival-info[b-3bkbiw5ln0]::before {
    background: linear-gradient(180deg, rgba(var(--wl-purple-rgb), 0.5) 0%, rgba(var(--wl-purple-rgb), 0.1) 100%);
}

.rival-name[b-3bkbiw5ln0] {
    color: var(--wl-purple);
}

.mentor-info .stat-icon[b-3bkbiw5ln0] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-color: rgba(59, 130, 246, 0.3);
    color: #3b82f6;
}

.mentor-info[b-3bkbiw5ln0]::before {
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.5) 0%, rgba(59, 130, 246, 0.1) 100%);
}

/* Responsive */
@media (max-width: 768px) {
    .stats-grid[b-3bkbiw5ln0] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-3bkbiw5ln0] {
        padding: 1rem;
    }

    .stat-icon[b-3bkbiw5ln0] {
        width: 2.5rem;
        height: 2.5rem;
    }

    .stat-icon :deep(svg)[b-3bkbiw5ln0] {
        width: 1.25rem;
        height: 1.25rem;
    }

    .stat-value[b-3bkbiw5ln0] {
        font-size: 1.25rem;
    }
}
/* /Components/Shared/SocialHowItWorks.razor.rz.scp.css */
/* Collapsible explainer panel for social subsections. Accent-themed via a local
   token so the same markup works for beef/collab/mentor/friends/inbox and in all
   three app themes (dark / light / retro) - no hardcoded section colors. */
.social-howto[b-t7uk9z3k3c] {
    --howto-accent: var(--wl-purple);
    --howto-accent-rgb: var(--wl-purple-rgb);
    margin-top: 1.5rem;
    border: 1px solid rgba(var(--howto-accent-rgb), 0.25);
    border-radius: 14px;
    background: rgba(var(--howto-accent-rgb), 0.05);
    overflow: hidden;
}

.social-howto--red[b-t7uk9z3k3c] { --howto-accent: var(--wl-red); --howto-accent-rgb: var(--wl-red-rgb); }
.social-howto--purple[b-t7uk9z3k3c] { --howto-accent: var(--wl-purple); --howto-accent-rgb: var(--wl-purple-rgb); }
.social-howto--gold[b-t7uk9z3k3c] { --howto-accent: var(--wl-gold); --howto-accent-rgb: var(--wl-gold-rgb); }
.social-howto--green[b-t7uk9z3k3c] { --howto-accent: var(--wl-green); --howto-accent-rgb: var(--wl-green-rgb); }
.social-howto--blue[b-t7uk9z3k3c] { --howto-accent: #3B82F6; --howto-accent-rgb: 59, 130, 246; }

.social-howto-summary[b-t7uk9z3k3c] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-weight: 600;
    color: var(--wl-text-primary);
}

/* Hide the default disclosure triangle */
.social-howto-summary[b-t7uk9z3k3c]::-webkit-details-marker { display: none; }

.social-howto-summary-icon[b-t7uk9z3k3c] {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--howto-accent);
}

.social-howto-summary-icon svg[b-t7uk9z3k3c] { width: 100%; height: 100%; }

.social-howto-summary-text[b-t7uk9z3k3c] { flex: 1; }

.social-howto-chevron[b-t7uk9z3k3c] {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    transition: transform 0.2s ease;
}

.social-howto-chevron svg[b-t7uk9z3k3c] { width: 100%; height: 100%; }

.social-howto[open] .social-howto-chevron[b-t7uk9z3k3c] { transform: rotate(180deg); }

.social-howto-body[b-t7uk9z3k3c] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1.25rem 1.25rem;
}

.social-howto-block[b-t7uk9z3k3c] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.social-howto-label[b-t7uk9z3k3c] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--howto-accent);
}

.social-howto-steps[b-t7uk9z3k3c],
.social-howto-gains[b-t7uk9z3k3c] {
    margin: 0;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.social-howto-steps li[b-t7uk9z3k3c],
.social-howto-gains li[b-t7uk9z3k3c] {
    font-size: 0.875rem;
    line-height: 1.45;
    color: rgba(var(--wl-contrast-rgb), 0.75);
}

.social-howto-gains[b-t7uk9z3k3c] {
    list-style: none;
    padding-left: 0;
}

.social-howto-gains li[b-t7uk9z3k3c] {
    position: relative;
    padding-left: 1.25rem;
}

.social-howto-gains li[b-t7uk9z3k3c]::before {
    content: "+";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--howto-accent);
}
/* /Components/Shared/TraitBadge.razor.rz.scp.css */
/* ========================================
   TRAIT BADGE - Category-colored trait display
   ======================================== */

/* --- Category color variables (scoped) --- */
.cat-nature[b-17qbvdap5g]    { --cat-color: #10B981; --cat-rgb: 16, 185, 129; }
.cat-talent[b-17qbvdap5g]    { --cat-color: var(--wl-gold); --cat-rgb: var(--wl-gold-rgb); }
.cat-style[b-17qbvdap5g]     { --cat-color: #A855F7; --cat-rgb: 168, 85, 247; }
.cat-experience[b-17qbvdap5g] { --cat-color: #F59E0B; --cat-rgb: 245, 158, 11; }
.cat-state[b-17qbvdap5g]     { --cat-color: #3B82F6; --cat-rgb: 59, 130, 246; }
.cat-evolution[b-17qbvdap5g] { --cat-color: #EF4444; --cat-rgb: 239, 68, 68; }

/* --- Base badge --- */
.trait-badge[b-17qbvdap5g] {
    background: rgba(var(--wl-bg-dark-rgb), 0.9);
    border: 1px solid var(--wl-border-medium);
    border-radius: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.25s ease;
    border-left: 3px solid var(--cat-color);
    position: relative;
    overflow: hidden;
}

.trait-badge[b-17qbvdap5g]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(var(--cat-rgb), 0.04) 0%, transparent 60%);
    pointer-events: none;
    transition: opacity 0.25s ease;
    opacity: 0;
}

.trait-badge:hover[b-17qbvdap5g] {
    background: rgba(var(--wl-bg-secondary-rgb), 0.95);
    border-color: rgba(var(--cat-rgb), 0.25);
    box-shadow: 0 0 24px rgba(var(--cat-rgb), 0.08),
                inset 0 0 16px rgba(var(--cat-rgb), 0.03);
}

.trait-badge:hover[b-17qbvdap5g]::before {
    opacity: 1;
}

/* --- Evolution path glows --- */
.evo-light[b-17qbvdap5g] {
    --cat-color: #D4A843;
    --cat-rgb: 212, 168, 67;
}

.evo-light:hover[b-17qbvdap5g] {
    box-shadow: 0 0 28px rgba(212, 168, 67, 0.15),
                inset 0 0 20px rgba(212, 168, 67, 0.05);
}

.evo-dark[b-17qbvdap5g] {
    --cat-color: #9333EA;
    --cat-rgb: 147, 51, 234;
}

.evo-dark:hover[b-17qbvdap5g] {
    box-shadow: 0 0 28px rgba(147, 51, 234, 0.15),
                inset 0 0 20px rgba(147, 51, 234, 0.05);
}

/* --- Header row --- */
.trait-header[b-17qbvdap5g] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* --- Points badge --- */
.trait-points[b-17qbvdap5g] {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    min-width: 34px;
    text-align: center;
    letter-spacing: -0.02em;
}

.points-positive[b-17qbvdap5g] {
    color: #4ADE80;
    background: rgba(74, 222, 128, 0.12);
}

.points-negative[b-17qbvdap5g] {
    color: #F87171;
    background: rgba(248, 113, 113, 0.12);
}

/* --- Category icon --- */
.category-icon[b-17qbvdap5g] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--cat-color);
    flex-shrink: 0;
    opacity: 0.85;
}

.category-icon svg[b-17qbvdap5g] {
    width: 16px;
    height: 16px;
}

/* --- Trait name --- */
.trait-name[b-17qbvdap5g] {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--wl-text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Category pill --- */
.category-pill[b-17qbvdap5g] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 100px;
    color: var(--cat-color);
    background: rgba(var(--cat-rgb), 0.1);
    border: 1px solid rgba(var(--cat-rgb), 0.15);
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- Expand indicator --- */
.expand-indicator[b-17qbvdap5g] {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    transition: transform 0.25s ease, color 0.25s ease;
    flex-shrink: 0;
}

.expand-indicator svg[b-17qbvdap5g] {
    width: 14px;
    height: 14px;
}

.expand-indicator.expanded[b-17qbvdap5g] {
    transform: rotate(180deg);
    color: var(--cat-color);
}

.trait-badge:hover .expand-indicator[b-17qbvdap5g] {
    color: rgba(var(--wl-contrast-rgb), 0.55);
}

/* --- Meta rows (expiry, evolution subtitle) --- */
.trait-meta[b-17qbvdap5g] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 7px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: rgba(var(--wl-contrast-rgb), 0.6);
    background: rgba(var(--cat-rgb), 0.05);
    animation: metaFadeIn-b-17qbvdap5g 0.2s ease;
}

.trait-meta .meta-icon[b-17qbvdap5g] {
    width: 14px;
    height: 14px;
    color: var(--cat-color);
    opacity: 0.7;
    flex-shrink: 0;
}

.expiry-meta[b-17qbvdap5g] {
    color: #60A5FA;
}

.evolution-meta[b-17qbvdap5g] {
    color: rgba(var(--cat-rgb), 0.8);
    font-style: italic;
}

@keyframes metaFadeIn-b-17qbvdap5g {
    from { opacity: 0; transform: translateY(-2px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Decay bar (Style traits) --- */
.decay-bar-container[b-17qbvdap5g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 7px;
    padding: 0 2px;
}

.decay-bar-track[b-17qbvdap5g] {
    flex: 1;
    height: 4px;
    background: rgba(var(--wl-contrast-rgb), 0.08);
    border-radius: 100px;
    overflow: hidden;
}

.decay-bar-fill[b-17qbvdap5g] {
    height: 100%;
    border-radius: 100px;
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.5), #A855F7);
    transition: width 0.6s ease;
    position: relative;
}

.decay-bar-fill[b-17qbvdap5g]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    background: #A855F7;
    border-radius: 100px;
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.4);
}

.decay-label[b-17qbvdap5g] {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(168, 85, 247, 0.7);
    white-space: nowrap;
    min-width: 40px;
    text-align: right;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* --- Expanded content --- */
.trait-expanded[b-17qbvdap5g] {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(var(--cat-rgb), 0.1);
    animation: expandSlideIn-b-17qbvdap5g 0.25s ease;
}

@keyframes expandSlideIn-b-17qbvdap5g {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- Flavor text --- */
.trait-flavor[b-17qbvdap5g] {
    font-size: 0.8rem;
    color: rgba(var(--wl-contrast-rgb), 0.5);
    font-style: italic;
    padding: 0 2px 8px;
    line-height: 1.45;
}

/* --- Effects list --- */
.trait-effects[b-17qbvdap5g] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* --- Effect row --- */
.effect-row[b-17qbvdap5g] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    padding: 4px 8px;
    border-radius: 5px;
    transition: background 0.15s ease;
}

/* --- Effect icon (SVG arrows) --- */
.effect-icon[b-17qbvdap5g] {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* --- Positive effects --- */
.effect-positive[b-17qbvdap5g] {
    background: rgba(74, 222, 128, 0.06);
}

.effect-positive:hover[b-17qbvdap5g] {
    background: rgba(74, 222, 128, 0.1);
}

.effect-positive .effect-icon[b-17qbvdap5g] {
    color: #4ADE80;
}

.effect-positive .effect-text[b-17qbvdap5g] {
    color: rgba(74, 222, 128, 0.9);
}

/* --- Negative effects --- */
.effect-negative[b-17qbvdap5g] {
    background: rgba(248, 113, 113, 0.06);
}

.effect-negative:hover[b-17qbvdap5g] {
    background: rgba(248, 113, 113, 0.1);
}

.effect-negative .effect-icon[b-17qbvdap5g] {
    color: #F87171;
}

.effect-negative .effect-text[b-17qbvdap5g] {
    color: rgba(248, 113, 113, 0.9);
}

/* --- Effect text --- */
.effect-text[b-17qbvdap5g] {
    flex: 1;
    line-height: 1.3;
}
/* /Components/Shared/TraitEvolutionModal.razor.rz.scp.css */
/* ================================================================
   TRAIT EVOLUTION MODAL - Dramatic light/dark path choice
   Inspired by Hades boon selection, BG3 class choice, Souls bonfires
   ================================================================ */

/* ---- Backdrop ---- */
.evo-backdrop[b-ywqcdvwlkl] {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(8px);
    transition: opacity 0.5s ease;
}

.evo-backdrop.phase-entering[b-ywqcdvwlkl] {
    opacity: 0;
}

.evo-backdrop.phase-visible[b-ywqcdvwlkl] {
    opacity: 1;
    animation: evoBackdropIn-b-ywqcdvwlkl 0.6s ease-out forwards;
}

.evo-backdrop.phase-chosen[b-ywqcdvwlkl] {
    opacity: 1;
}

.evo-backdrop.phase-exiting[b-ywqcdvwlkl] {
    animation: evoBackdropOut-b-ywqcdvwlkl 0.5s ease-in forwards;
}

@keyframes evoBackdropIn-b-ywqcdvwlkl {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes evoBackdropOut-b-ywqcdvwlkl {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* ---- Ambient particles ---- */
.evo-particles[b-ywqcdvwlkl] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.evo-particle[b-ywqcdvwlkl] {
    position: absolute;
    width: var(--particle-size);
    height: var(--particle-size);
    border-radius: 50%;
    background: rgba(var(--wl-gold-rgb), 0.3);
    top: 50%;
    left: 50%;
    animation: evoParticleFloat-b-ywqcdvwlkl 8s ease-in-out infinite;
    animation-delay: var(--particle-delay);
    opacity: 0;
}

.evo-particle-0[b-ywqcdvwlkl], .evo-particle-1[b-ywqcdvwlkl] {
    background: rgba(212, 168, 67, 0.35);
}
.evo-particle-2[b-ywqcdvwlkl], .evo-particle-3[b-ywqcdvwlkl] {
    background: rgba(168, 85, 247, 0.25);
}
.evo-particle-4[b-ywqcdvwlkl], .evo-particle-5[b-ywqcdvwlkl] {
    background: rgba(255, 255, 255, 0.15);
}

@keyframes evoParticleFloat-b-ywqcdvwlkl {
    0%, 100% {
        opacity: 0;
        transform: translate(var(--particle-x), var(--particle-y)) scale(0);
    }
    20% {
        opacity: 1;
        transform: translate(var(--particle-x), calc(var(--particle-y) - 40px)) scale(1);
    }
    80% {
        opacity: 0.6;
        transform: translate(calc(var(--particle-x) + 20px), calc(var(--particle-y) - 100px)) scale(0.8);
    }
}

/* ---- Container ---- */
.evo-container[b-ywqcdvwlkl] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 820px;
    background: linear-gradient(
        180deg,
        rgba(var(--wl-bg-modal-rgb), 0.97) 0%,
        rgba(var(--wl-bg-modal-deep-rgb), 0.99) 100%
    );
    border: 1px solid rgba(var(--wl-gold-rgb), 0.15);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 40px 100px rgba(0, 0, 0, 0.6),
        0 0 160px rgba(var(--wl-gold-rgb), 0.04),
        inset 0 1px 0 rgba(var(--wl-gold-rgb), 0.08);
    padding: 36px 32px 32px;
    animation: evoContainerIn-b-ywqcdvwlkl 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.phase-exiting .evo-container[b-ywqcdvwlkl] {
    animation: evoContainerOut-b-ywqcdvwlkl 0.4s ease-in forwards;
}

@keyframes evoContainerIn-b-ywqcdvwlkl {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes evoContainerOut-b-ywqcdvwlkl {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.96);
    }
}

/* ---- Close button ---- */
.evo-close[b-ywqcdvwlkl] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    padding: 6px;
    background: transparent;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.08);
    color: rgba(var(--wl-contrast-rgb), 0.3);
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.evo-close:hover[b-ywqcdvwlkl] {
    background: rgba(var(--wl-contrast-rgb), 0.05);
    border-color: rgba(var(--wl-contrast-rgb), 0.15);
    color: rgba(var(--wl-contrast-rgb), 0.7);
}

.evo-close svg[b-ywqcdvwlkl] {
    width: 100%;
    height: 100%;
}

/* ---- Title section ---- */
.evo-title-section[b-ywqcdvwlkl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 28px;
}

.evo-title-icon[b-ywqcdvwlkl] {
    width: 28px;
    height: 28px;
    color: var(--wl-gold);
    filter: drop-shadow(0 0 12px rgba(var(--wl-gold-rgb), 0.5));
    animation: evoIconPulse-b-ywqcdvwlkl 3s ease-in-out infinite;
}

.evo-title-icon svg[b-ywqcdvwlkl] {
    width: 100%;
    height: 100%;
}

@keyframes evoIconPulse-b-ywqcdvwlkl {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(var(--wl-gold-rgb), 0.5)); }
    50% { filter: drop-shadow(0 0 20px rgba(var(--wl-gold-rgb), 0.8)); }
}

.evo-title[b-ywqcdvwlkl] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wl-gold);
    margin: 0;
    text-shadow: 0 0 40px rgba(var(--wl-gold-rgb), 0.4);
}

.evo-title-decoration[b-ywqcdvwlkl] {
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--wl-gold-rgb), 0.3));
}

.evo-title-decoration:last-child[b-ywqcdvwlkl] {
    background: linear-gradient(90deg, rgba(var(--wl-gold-rgb), 0.3), transparent);
}

/* ---- Base trait display ---- */
.evo-base-trait[b-ywqcdvwlkl] {
    position: relative;
    text-align: center;
    padding: 20px 24px;
    margin: 0 auto 20px;
    max-width: 480px;
    background: rgba(var(--wl-contrast-rgb), 0.02);
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    animation: evoBaseIn-b-ywqcdvwlkl 0.6s 0.3s ease-out both;
}

.evo-base-glow[b-ywqcdvwlkl] {
    position: absolute;
    inset: -20px;
    background: radial-gradient(ellipse at center, rgba(var(--wl-contrast-rgb), 0.03) 0%, transparent 70%);
    pointer-events: none;
}

.evo-base-label[b-ywqcdvwlkl] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(var(--wl-contrast-rgb), 0.35);
    margin-bottom: 6px;
}

.evo-base-name[b-ywqcdvwlkl] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 22px;
    letter-spacing: 0.06em;
    color: var(--wl-text-primary);
    margin-bottom: 6px;
}

.evo-base-desc[b-ywqcdvwlkl] {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    font-style: italic;
    color: rgba(var(--wl-contrast-rgb), 0.45);
    line-height: 1.5;
    margin-bottom: 12px;
}

.evo-base-effects[b-ywqcdvwlkl] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.evo-base-effect[b-ywqcdvwlkl] {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 3px;
}

.evo-base-effect.positive[b-ywqcdvwlkl] {
    color: rgba(74, 222, 128, 0.8);
    background: rgba(74, 222, 128, 0.08);
}

.evo-base-effect.negative[b-ywqcdvwlkl] {
    color: rgba(248, 113, 113, 0.8);
    background: rgba(248, 113, 113, 0.08);
}

@keyframes evoBaseIn-b-ywqcdvwlkl {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Branch lines ---- */
.evo-branch-lines[b-ywqcdvwlkl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 8px 0 20px;
    padding: 0 40px;
}

.evo-branch-line[b-ywqcdvwlkl] {
    flex: 1;
    height: 2px;
    animation: evoBranchGrow-b-ywqcdvwlkl 0.8s 0.5s ease-out both;
    transform-origin: center;
}

.evo-branch-light[b-ywqcdvwlkl] {
    background: linear-gradient(90deg, rgba(212, 168, 67, 0.5), rgba(212, 168, 67, 0.15));
}

.evo-branch-dark[b-ywqcdvwlkl] {
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.15), rgba(168, 85, 247, 0.5));
}

.evo-branch-center[b-ywqcdvwlkl] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(var(--wl-gold-rgb), 0.6);
    animation: evoBranchCenterIn-b-ywqcdvwlkl 0.5s 0.7s ease-out both;
}

.evo-branch-center svg[b-ywqcdvwlkl] {
    width: 22px;
    height: 22px;
}

@keyframes evoBranchGrow-b-ywqcdvwlkl {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes evoBranchCenterIn-b-ywqcdvwlkl {
    from {
        opacity: 0;
        transform: scale(0) rotate(-90deg);
    }
    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* ---- Two path cards ---- */
.evo-paths[b-ywqcdvwlkl] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.evo-path[b-ywqcdvwlkl] {
    position: relative;
    padding: 24px 20px;
    text-align: center;
    border: 1px solid rgba(var(--wl-contrast-rgb), 0.06);
    background: rgba(var(--wl-contrast-rgb), 0.015);
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    cursor: default;
}

.evo-path-glow[b-ywqcdvwlkl] {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

/* Light path card */
.evo-path-light[b-ywqcdvwlkl] {
    animation: evoPathLightIn-b-ywqcdvwlkl 0.7s 0.6s ease-out both;
}

.evo-path-light .evo-path-glow[b-ywqcdvwlkl] {
    background: radial-gradient(ellipse at center, rgba(212, 168, 67, 0.08) 0%, transparent 70%);
}

.evo-path-light.hovered[b-ywqcdvwlkl] {
    border-color: rgba(212, 168, 67, 0.3);
    box-shadow:
        0 0 40px rgba(212, 168, 67, 0.08),
        0 0 80px rgba(212, 168, 67, 0.04),
        inset 0 0 40px rgba(212, 168, 67, 0.03);
    transform: translateY(-2px);
}

.evo-path-light.hovered .evo-path-glow[b-ywqcdvwlkl] {
    opacity: 1;
}

.evo-path-light.chosen[b-ywqcdvwlkl] {
    border-color: rgba(212, 168, 67, 0.5);
    box-shadow:
        0 0 60px rgba(212, 168, 67, 0.15),
        0 0 120px rgba(212, 168, 67, 0.08),
        inset 0 0 60px rgba(212, 168, 67, 0.05);
    animation: evoPathChosen-b-ywqcdvwlkl 1.5s ease-in-out forwards;
}

.evo-path-light.chosen .evo-path-glow[b-ywqcdvwlkl] {
    opacity: 1;
    animation: evoGlowPulse-b-ywqcdvwlkl 1.5s ease-in-out infinite;
}

/* Dark path card */
.evo-path-dark[b-ywqcdvwlkl] {
    animation: evoPathDarkIn-b-ywqcdvwlkl 0.7s 0.7s ease-out both;
}

.evo-path-dark .evo-path-glow[b-ywqcdvwlkl] {
    background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
}

.evo-path-dark.hovered[b-ywqcdvwlkl] {
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow:
        0 0 40px rgba(168, 85, 247, 0.08),
        0 0 80px rgba(168, 85, 247, 0.04),
        inset 0 0 40px rgba(168, 85, 247, 0.03);
    transform: translateY(-2px);
}

.evo-path-dark.hovered .evo-path-glow[b-ywqcdvwlkl] {
    opacity: 1;
}

.evo-path-dark.chosen[b-ywqcdvwlkl] {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow:
        0 0 60px rgba(168, 85, 247, 0.15),
        0 0 120px rgba(168, 85, 247, 0.08),
        inset 0 0 60px rgba(168, 85, 247, 0.05);
    animation: evoPathChosen-b-ywqcdvwlkl 1.5s ease-in-out forwards;
}

.evo-path-dark.chosen .evo-path-glow[b-ywqcdvwlkl] {
    opacity: 1;
    animation: evoGlowPulseDark-b-ywqcdvwlkl 1.5s ease-in-out infinite;
}

/* Faded state for unchosen path */
.evo-path.faded[b-ywqcdvwlkl] {
    opacity: 0.2;
    transform: scale(0.97);
    filter: grayscale(0.6);
    pointer-events: none;
    transition: all 0.8s ease;
}

@keyframes evoPathLightIn-b-ywqcdvwlkl {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes evoPathDarkIn-b-ywqcdvwlkl {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes evoPathChosen-b-ywqcdvwlkl {
    0% { transform: scale(1); }
    30% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

@keyframes evoGlowPulse-b-ywqcdvwlkl {
    0%, 100% { background: radial-gradient(ellipse at center, rgba(212, 168, 67, 0.08) 0%, transparent 70%); }
    50% { background: radial-gradient(ellipse at center, rgba(212, 168, 67, 0.15) 0%, transparent 70%); }
}

@keyframes evoGlowPulseDark-b-ywqcdvwlkl {
    0%, 100% { background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.08) 0%, transparent 70%); }
    50% { background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.15) 0%, transparent 70%); }
}

/* ---- Path icon ---- */
.evo-path-icon[b-ywqcdvwlkl] {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    transition: all 0.3s ease;
}

.evo-path-icon svg[b-ywqcdvwlkl] {
    width: 100%;
    height: 100%;
}

.evo-path-light .evo-path-icon[b-ywqcdvwlkl] {
    color: rgba(212, 168, 67, 0.7);
    filter: drop-shadow(0 0 8px rgba(212, 168, 67, 0.3));
}

.evo-path-light.hovered .evo-path-icon[b-ywqcdvwlkl] {
    color: #D4A843;
    filter: drop-shadow(0 0 16px rgba(212, 168, 67, 0.6));
    transform: scale(1.1);
}

.evo-path-dark .evo-path-icon[b-ywqcdvwlkl] {
    color: rgba(168, 85, 247, 0.7);
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.3));
}

.evo-path-dark.hovered .evo-path-icon[b-ywqcdvwlkl] {
    color: #A855F7;
    filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.6));
    transform: scale(1.1);
}

/* ---- Path text content ---- */
.evo-path-label[b-ywqcdvwlkl] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.evo-path-light .evo-path-label[b-ywqcdvwlkl] {
    color: rgba(212, 168, 67, 0.6);
}

.evo-path-dark .evo-path-label[b-ywqcdvwlkl] {
    color: rgba(168, 85, 247, 0.6);
}

.evo-path-name[b-ywqcdvwlkl] {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 24px;
    letter-spacing: 0.06em;
    color: var(--wl-text-primary);
    margin-bottom: 8px;
    transition: text-shadow 0.3s ease;
}

.evo-path-light.hovered .evo-path-name[b-ywqcdvwlkl],
.evo-path-light.chosen .evo-path-name[b-ywqcdvwlkl] {
    text-shadow: 0 0 30px rgba(212, 168, 67, 0.3);
}

.evo-path-dark.hovered .evo-path-name[b-ywqcdvwlkl],
.evo-path-dark.chosen .evo-path-name[b-ywqcdvwlkl] {
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
}

.evo-path-desc[b-ywqcdvwlkl] {
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    font-style: italic;
    color: rgba(var(--wl-contrast-rgb), 0.4);
    line-height: 1.5;
    margin-bottom: 16px;
    min-height: 40px;
}

/* ---- Effects list ---- */
.evo-path-effects[b-ywqcdvwlkl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 20px;
}

.evo-effect[b-ywqcdvwlkl] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    padding: 5px 10px;
    border-radius: 3px;
    text-align: left;
}

.evo-effect-positive[b-ywqcdvwlkl] {
    background: rgba(74, 222, 128, 0.06);
}

.evo-effect-positive .evo-effect-arrow[b-ywqcdvwlkl] {
    color: #4ADE80;
}

.evo-effect-positive .evo-effect-text[b-ywqcdvwlkl] {
    color: rgba(74, 222, 128, 0.85);
}

.evo-effect-negative[b-ywqcdvwlkl] {
    background: rgba(248, 113, 113, 0.06);
}

.evo-effect-negative .evo-effect-arrow[b-ywqcdvwlkl] {
    color: #F87171;
}

.evo-effect-negative .evo-effect-text[b-ywqcdvwlkl] {
    color: rgba(248, 113, 113, 0.85);
}

.evo-effect-arrow[b-ywqcdvwlkl] {
    font-size: 14px;
    min-width: 16px;
    text-align: center;
    flex-shrink: 0;
}

.evo-effect-text[b-ywqcdvwlkl] {
    flex: 1;
}

/* ---- Choose button ---- */
.evo-choose-btn[b-ywqcdvwlkl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 28px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}

.evo-choose-btn svg[b-ywqcdvwlkl] {
    width: 16px;
    height: 16px;
}

/* Light choose button */
.evo-choose-light[b-ywqcdvwlkl] {
    background: rgba(212, 168, 67, 0.08);
    border-color: rgba(212, 168, 67, 0.25);
    color: rgba(212, 168, 67, 0.8);
}

.evo-choose-light:hover[b-ywqcdvwlkl] {
    background: rgba(212, 168, 67, 0.15);
    border-color: rgba(212, 168, 67, 0.5);
    color: #D4A843;
    box-shadow: 0 0 30px rgba(212, 168, 67, 0.12);
    transform: translateY(-1px);
}

.evo-choose-light:active[b-ywqcdvwlkl] {
    transform: translateY(0);
    box-shadow: 0 0 20px rgba(212, 168, 67, 0.2);
}

/* Dark choose button */
.evo-choose-dark[b-ywqcdvwlkl] {
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.25);
    color: rgba(168, 85, 247, 0.8);
}

.evo-choose-dark:hover[b-ywqcdvwlkl] {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.5);
    color: #A855F7;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.12);
    transform: translateY(-1px);
}

.evo-choose-dark:active[b-ywqcdvwlkl] {
    transform: translateY(0);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}

/* ---- Chosen badge ---- */
.evo-chosen-badge[b-ywqcdvwlkl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    animation: evoChosenBadgeIn-b-ywqcdvwlkl 0.5s ease-out both;
}

.evo-chosen-badge svg[b-ywqcdvwlkl] {
    width: 20px;
    height: 20px;
}

.evo-path-light .evo-chosen-badge[b-ywqcdvwlkl] {
    color: #D4A843;
    border: 1px solid rgba(212, 168, 67, 0.4);
    background: rgba(212, 168, 67, 0.1);
}

.evo-path-dark .evo-chosen-badge[b-ywqcdvwlkl] {
    color: #A855F7;
    border: 1px solid rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.1);
}

@keyframes evoChosenBadgeIn-b-ywqcdvwlkl {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ---- Prompt text ---- */
.evo-prompt[b-ywqcdvwlkl] {
    text-align: center;
    font-family: 'Source Sans 3', sans-serif;
    font-size: 13px;
    color: rgba(var(--wl-contrast-rgb), 0.3);
    letter-spacing: 0.03em;
    animation: evoPulseText-b-ywqcdvwlkl 3s ease-in-out infinite;
}

@keyframes evoPulseText-b-ywqcdvwlkl {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 640px) {
    .evo-backdrop[b-ywqcdvwlkl] {
        padding: 12px;
        align-items: flex-start;
        padding-top: 40px;
    }

    .evo-container[b-ywqcdvwlkl] {
        padding: 24px 16px 20px;
    }

    .evo-title[b-ywqcdvwlkl] {
        font-size: 24px;
    }

    .evo-title-icon[b-ywqcdvwlkl] {
        width: 22px;
        height: 22px;
    }

    .evo-paths[b-ywqcdvwlkl] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .evo-path[b-ywqcdvwlkl] {
        padding: 20px 16px;
    }

    /* On mobile, both paths slide in from bottom */
    .evo-path-light[b-ywqcdvwlkl] {
        animation: evoPathMobileIn-b-ywqcdvwlkl 0.6s 0.5s ease-out both;
    }

    .evo-path-dark[b-ywqcdvwlkl] {
        animation: evoPathMobileIn-b-ywqcdvwlkl 0.6s 0.65s ease-out both;
    }

    .evo-branch-lines[b-ywqcdvwlkl] {
        display: none;
    }

    .evo-base-trait[b-ywqcdvwlkl] {
        padding: 16px;
    }

    .evo-base-name[b-ywqcdvwlkl] {
        font-size: 18px;
    }

    .evo-path-name[b-ywqcdvwlkl] {
        font-size: 20px;
    }

    .evo-choose-btn[b-ywqcdvwlkl] {
        width: 100%;
    }
}

@keyframes evoPathMobileIn-b-ywqcdvwlkl {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Shared/TravelMap.razor.rz.scp.css */
.travel-map[b-c2bgyhcy1m] {
    width: 100%;
    height: 420px;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--wl-border-medium);
    background: var(--wl-bg-secondary);
    /* Own stacking context so Leaflet's internal z-indexes (panes/controls up to ~700)
       stay contained and never float over the app's fixed nav bars. */
    position: relative;
    z-index: 0;
    isolation: isolate;
}

@media (max-width: 768px) {
    .travel-map[b-c2bgyhcy1m] { height: 320px; }
}

@media (max-width: 480px) {
    .travel-map[b-c2bgyhcy1m] { height: 260px; }
}
/* /Components/Shared/VirtualDurationHint.razor.rz.scp.css */
.duration-hint[b-asev36b3x1] {
    opacity: 0.6;
}
/* /Components/Shared/Works/WorkPicker.razor.rz.scp.css */
/* WorkPicker - theme-neutral (wl-* tokens only) so it sits inside any career's
   design system (org-*, ent-*, film-*) without restyling. */

.wp-root[b-5ijskug26t] {
    position: relative;
    width: 100%;
}

.wp-search[b-5ijskug26t] {
    position: relative;
    display: flex;
    align-items: center;
}

.wp-search-icon[b-5ijskug26t] {
    position: absolute;
    left: 0.75rem;
    display: inline-flex;
    pointer-events: none;
    color: var(--wl-text-muted);
}

.wp-search-icon svg[b-5ijskug26t],
.wp-kind-icon svg[b-5ijskug26t] {
    width: 1.05rem;
    height: 1.05rem;
    display: block;
}

.wp-search input[b-5ijskug26t] {
    width: 100%;
    padding: 0.6rem 0.85rem 0.6rem 2.4rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border);
    border-radius: 0.6rem;
    color: var(--wl-text-primary);
    font-size: 0.9rem;
    transition: border-color 0.15s ease;
}

.wp-search input:focus[b-5ijskug26t] {
    outline: none;
    border-color: var(--wl-gold);
}

.wp-search input[b-5ijskug26t]::placeholder {
    color: var(--wl-text-muted);
}

.wp-dropdown[b-5ijskug26t] {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    z-index: 30;
    max-height: 19rem;
    overflow-y: auto;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-border);
    border-radius: 0.6rem;
    box-shadow: 0 14px 34px rgb(0 0 0 / 0.35);
}

.wp-option[b-5ijskug26t] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: transparent;
    border: 0;
    text-align: left;
    color: var(--wl-text-primary);
    cursor: pointer;
    transition: background 0.12s ease;
}

.wp-option + .wp-option[b-5ijskug26t] {
    border-top: 1px solid var(--wl-border);
}

.wp-option:hover[b-5ijskug26t],
.wp-option--active[b-5ijskug26t] {
    background: var(--wl-bg-tertiary);
}

.wp-option--active[b-5ijskug26t] {
    box-shadow: inset 3px 0 0 var(--wl-gold);
}

.wp-option--empty[b-5ijskug26t] {
    color: var(--wl-text-muted);
    cursor: default;
    font-size: 0.85rem;
}

.wp-option--empty:hover[b-5ijskug26t] {
    background: transparent;
}

.wp-option-body[b-5ijskug26t],
.wp-selected-body[b-5ijskug26t] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    flex: 1;
}

.wp-kind-icon[b-5ijskug26t] {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--wl-gold);
}

.wp-title[b-5ijskug26t] {
    font-size: 0.9rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-meta[b-5ijskug26t] {
    font-size: 0.75rem;
    color: var(--wl-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wp-status[b-5ijskug26t] {
    flex-shrink: 0;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--wl-text-muted);
    border: 1px solid var(--wl-border);
}

.wp-status--upcoming[b-5ijskug26t] {
    color: var(--wl-gold);
    border-color: var(--wl-gold);
}

.wp-selected[b-5ijskug26t] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.8rem;
    background: var(--wl-bg-secondary);
    border: 1px solid var(--wl-gold);
    border-radius: 0.6rem;
}

.wp-clear[b-5ijskug26t] {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--wl-border);
    border-radius: 999px;
    color: var(--wl-text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.wp-clear:hover[b-5ijskug26t] {
    color: var(--wl-text-primary);
    border-color: var(--wl-text-muted);
}