@import '_content/RUBI.Core.BlazorComponents/RUBI.Core.BlazorComponents.r0q5whcudt.bundle.scp.css';

/* /Components/ChildTopicCard.razor.rz.scp.css */
/* ==========================================
   ChildTopicCard - Voting Type Specific Styles
   ========================================== */

.child-topic-card[b-3n05s5ok9b] {
    transition: all 0.2s ease-out;
}

.child-topic-card:hover[b-3n05s5ok9b] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Voting Type Specific Styles - Solid colored borders */

/* Yes/No - Emerald */
.child-card-yesno[b-3n05s5ok9b] {
    border: 1px solid rgb(16, 185, 129);
}

/* Single Choice - Sky Blue */
.child-card-single[b-3n05s5ok9b] {
    border: 1px solid rgb(14, 165, 233);
}

/* Multi Choice - Cyan */
.child-card-multi[b-3n05s5ok9b] {
    border: 1px solid rgb(6, 182, 212);
}

/* Ranked Choice - Amber */
.child-card-ranked[b-3n05s5ok9b] {
    border: 1px solid rgb(245, 158, 11);
}

/* Town Square - Purple */
.child-card-townsquare[b-3n05s5ok9b] {
    border: 1px solid rgb(168, 85, 247);
}

/* Petition - Rose */
.child-card-petition[b-3n05s5ok9b] {
    border: 1px solid rgb(244, 63, 94);
}
/* /Pages/ProposeTopic.razor.rz.scp.css */
/* ==========================================
   ProposeTopic Page - Theme-aware Styles
   ========================================== */

/* Topic Details Separator - Bright accent to draw attention */
.topic-details-separator[b-sa0urrisxj] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 0.5rem 0;
}

.separator-line[b-sa0urrisxj] {
    flex: 1;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--theme-500-rgb, 99, 102, 241), 0.6),
        rgba(var(--theme-400-rgb, 129, 140, 248), 0.8),
        rgba(var(--theme-500-rgb, 99, 102, 241), 0.6),
        transparent
    );
    border-radius: 1px;
}

.separator-label[b-sa0urrisxj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(var(--theme-500-rgb, 99, 102, 241), 0.15);
    border: 1px solid rgba(var(--theme-500-rgb, 99, 102, 241), 0.4);
    border-radius: 9999px;
    color: var(--theme-300, #a5b4fc);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.separator-label i[b-sa0urrisxj] {
    color: var(--theme-400, #818cf8);
    font-size: 0.875rem;
}

/* Topic detail fields get subtle left accent */
.topic-detail-field[b-sa0urrisxj] {
    position: relative;
    padding-left: 1rem;
    border-left: 3px solid rgba(var(--theme-500-rgb, 99, 102, 241), 0.3);
    transition: border-color 0.2s ease;
}

.topic-detail-field:focus-within[b-sa0urrisxj] {
    border-left-color: var(--theme-500, #6366f1);
}

/* Smooth page entry */
.propose-topic-page[b-sa0urrisxj] {
    animation: proposePageEnter-b-sa0urrisxj 0.35s ease-out;
}

@keyframes proposePageEnter-b-sa0urrisxj {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   Voting Type Dropdown - Clear & Prominent
   ========================================== */
.voting-type-dropdown-container[b-sa0urrisxj] {
    position: relative;
    width: 100%;
}

.voting-type-dropdown[b-sa0urrisxj] {
    width: 100%;
    padding: 1rem 3rem 1rem 1rem;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
    border: 2px solid var(--theme-500, #6366f1);
    border-radius: 0.75rem;
    color: white;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.2s ease;
    box-shadow: 0 0 0 0 rgba(var(--theme-500-rgb, 99, 102, 241), 0),
                0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.voting-type-dropdown:hover[b-sa0urrisxj] {
    border-color: var(--theme-400, #818cf8);
    box-shadow: 0 0 0 3px rgba(var(--theme-500-rgb, 99, 102, 241), 0.15),
                0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.voting-type-dropdown:focus[b-sa0urrisxj] {
    outline: none;
    border-color: var(--theme-400, #818cf8);
    box-shadow: 0 0 0 4px rgba(var(--theme-500-rgb, 99, 102, 241), 0.25),
                0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.voting-type-dropdown option[b-sa0urrisxj] {
    background: #1e293b;
    color: white;
    padding: 0.75rem;
    font-size: 0.95rem;
}

.voting-type-dropdown-arrow[b-sa0urrisxj] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-400, #818cf8);
    pointer-events: none;
    font-size: 1.25rem;
}

.voting-type-description[b-sa0urrisxj] {
    padding: 0.75rem;
    background: rgba(var(--theme-500-rgb, 99, 102, 241), 0.08);
    border-radius: 0.5rem;
    border-left: 3px solid var(--theme-500, #6366f1);
}
/* /Pages/Register.razor.rz.scp.css */
/* Register Page - Mobile First */

.register-page[b-rb7jjdlu31] {
    min-height: 100vh;
    /* Transparent to show body's theme background (dotart, gradients) */
    background: transparent;
}

.register-header[b-rb7jjdlu31] {
    padding: 1rem;
    padding-top: max(1rem, env(safe-area-inset-top));
}

.register-back[b-rb7jjdlu31] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #d4a574;
    color: var(--theme-300, #a5b4fc);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.register-back:hover[b-rb7jjdlu31] {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

/* Success Overlay - Semi-transparent to show theme */
.register-success-overlay[b-rb7jjdlu31] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: fadeIn-b-rb7jjdlu31 0.5s ease;
}

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

.register-success-content[b-rb7jjdlu31] {
    text-align: center;
    max-width: 320px;
}

/* Animated Checkmark */
.register-success-checkmark[b-rb7jjdlu31] {
    width: 100px;
    height: 100px;
    margin: 0 auto 2rem;
}

.register-success-checkmark svg[b-rb7jjdlu31] {
    width: 100%;
    height: 100%;
}

.checkmark-circle[b-rb7jjdlu31] {
    stroke: #22c55e;
    stroke-width: 2;
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    animation: circleAnim-b-rb7jjdlu31 0.6s ease-out forwards;
}

.checkmark-check[b-rb7jjdlu31] {
    stroke: #22c55e;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: checkAnim-b-rb7jjdlu31 0.4s ease-out 0.4s forwards;
}

@keyframes circleAnim-b-rb7jjdlu31 {
    to { stroke-dashoffset: 0; }
}

@keyframes checkAnim-b-rb7jjdlu31 {
    to { stroke-dashoffset: 0; }
}

.register-success-title[b-rb7jjdlu31] {
    font-size: 1.75rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.75rem;
    animation: slideUp-b-rb7jjdlu31 0.5s ease-out 0.3s both;
}

.register-success-message[b-rb7jjdlu31] {
    font-size: 1rem;
    color: #d4a574;
    color: var(--theme-300, #a5b4fc);
    margin-bottom: 2rem;
    animation: slideUp-b-rb7jjdlu31 0.5s ease-out 0.4s both;
}

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

.register-success-btn[b-rb7jjdlu31] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #c97c3c, #9333ea);
    background: linear-gradient(135deg, var(--theme-500, #6366f1), #9333ea);
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(201, 124, 60, 0.4);
    box-shadow: 0 4px 20px rgba(var(--theme-500-rgb, 99, 102, 241), 0.4);
    transition: all 0.2s ease;
    animation: slideUp-b-rb7jjdlu31 0.5s ease-out 0.5s both;
}

.register-success-btn:hover[b-rb7jjdlu31] {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(201, 124, 60, 0.5);
    box-shadow: 0 6px 25px rgba(var(--theme-500-rgb, 99, 102, 241), 0.5);
}
/* /Pages/TopicDetail.razor.rz.scp.css */
/* ==========================================
   Page Transition - Smooth Entry Animation
   ========================================== */

.topic-detail-page[b-atvdlybxcs] {
    animation: topicPageEnter-b-atvdlybxcs 0.4s ease-out;
}

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

/* Loading state with smooth transition */
.topic-loading[b-atvdlybxcs] {
    animation: topicLoadingFade-b-atvdlybxcs 0.3s ease-out;
}

@keyframes topicLoadingFade-b-atvdlybxcs {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Content sections stagger in */
.topic-section[b-atvdlybxcs] {
    animation: topicSectionEnter-b-atvdlybxcs 0.35s ease-out backwards;
}

.topic-section:nth-child(1)[b-atvdlybxcs] { animation-delay: 0.05s; }
.topic-section:nth-child(2)[b-atvdlybxcs] { animation-delay: 0.1s; }
.topic-section:nth-child(3)[b-atvdlybxcs] { animation-delay: 0.15s; }
.topic-section:nth-child(4)[b-atvdlybxcs] { animation-delay: 0.2s; }
.topic-section:nth-child(5)[b-atvdlybxcs] { animation-delay: 0.25s; }

@keyframes topicSectionEnter-b-atvdlybxcs {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================
   Vote Animation Overlay - TopicDetail
   ========================================== */

.vote-animation-overlay[b-atvdlybxcs] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Semi-transparent to show aus-dotart-hero background */
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: voteFadeIn-b-atvdlybxcs 0.4s ease-out;
}

@keyframes voteFadeIn-b-atvdlybxcs {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Central Orb Container */
.vote-orb-container[b-atvdlybxcs] {
    position: relative;
    width: 140px;
    height: 140px;
    margin-bottom: 1.5rem;
}

/* The glowing orb - uses theme colors */
.vote-orb[b-atvdlybxcs] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    background: linear-gradient(135deg, var(--theme-500, #6366f1) 0%, var(--theme-600, #8b5cf6) 50%, var(--theme-700, #a855f7) 100%);
    border-radius: 50%;
    box-shadow:
        0 0 40px rgba(99, 102, 241, 0.6),
        0 0 80px rgba(139, 92, 246, 0.4),
        0 0 120px rgba(168, 85, 247, 0.2);
    box-shadow:
        0 0 40px rgba(var(--theme-500-rgb, 99, 102, 241), 0.6),
        0 0 80px rgba(var(--theme-600-rgb, 139, 92, 246), 0.4),
        0 0 120px rgba(var(--theme-700-rgb, 168, 85, 247), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: voteOrbPulse-b-atvdlybxcs 2s ease-in-out infinite;
}

.vote-orb.vote-yes[b-atvdlybxcs] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
    box-shadow:
        0 0 40px rgba(34, 197, 94, 0.6),
        0 0 80px rgba(22, 163, 74, 0.4);
}

.vote-orb.vote-no[b-atvdlybxcs] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    box-shadow:
        0 0 40px rgba(239, 68, 68, 0.6),
        0 0 80px rgba(220, 38, 38, 0.4);
}

.vote-orb i[b-atvdlybxcs] {
    font-size: 2rem;
    color: white;
}

@keyframes voteOrbPulse-b-atvdlybxcs {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.08); }
}

/* Orbiting rings - theme colored */
.vote-orbit-ring[b-atvdlybxcs] {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid rgba(99, 102, 241, 0.3);
    border: 2px solid rgba(var(--theme-500-rgb, 99, 102, 241), 0.3);
    border-radius: 50%;
    animation: voteOrbitSpin-b-atvdlybxcs 8s linear infinite;
}

.vote-orbit-ring:nth-child(1)[b-atvdlybxcs] {
    width: 110px;
    height: 110px;
    margin: -55px 0 0 -55px;
    animation-duration: 12s;
}

.vote-orbit-ring:nth-child(2)[b-atvdlybxcs] {
    width: 130px;
    height: 130px;
    margin: -65px 0 0 -65px;
    animation-duration: 16s;
    animation-direction: reverse;
    border-color: rgba(139, 92, 246, 0.25);
    border-color: rgba(var(--theme-600-rgb, 139, 92, 246), 0.25);
}

.vote-orbit-ring:nth-child(3)[b-atvdlybxcs] {
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    animation-duration: 20s;
    border-style: dashed;
    border-color: rgba(168, 85, 247, 0.2);
    border-color: rgba(var(--theme-700-rgb, 168, 85, 247), 0.2);
}

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

/* Floating particles - theme colored */
.vote-particle[b-atvdlybxcs] {
    position: absolute;
    width: 6px;
    height: 6px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    background: linear-gradient(135deg, var(--theme-500, #6366f1), var(--theme-700, #a855f7));
    border-radius: 50%;
    animation: voteParticleFloat-b-atvdlybxcs 3s ease-in-out infinite;
}

.vote-particle:nth-child(4)[b-atvdlybxcs] { top: 10%; left: 20%; animation-delay: 0s; }
.vote-particle:nth-child(5)[b-atvdlybxcs] { top: 80%; left: 75%; animation-delay: 0.75s; }
.vote-particle:nth-child(6)[b-atvdlybxcs] { top: 25%; left: 85%; animation-delay: 1.5s; }
.vote-particle:nth-child(7)[b-atvdlybxcs] { top: 70%; left: 15%; animation-delay: 2.25s; }

@keyframes voteParticleFloat-b-atvdlybxcs {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; }
    50% { transform: translateY(-20px) scale(1.4); opacity: 1; }
}

/* Stage indicators */
.vote-anim-stages[b-atvdlybxcs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.vote-anim-stage[b-atvdlybxcs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.vote-anim-stage.active[b-atvdlybxcs] { opacity: 1; }
.vote-anim-stage.completed[b-atvdlybxcs] { opacity: 0.8; }

.vote-anim-stage-icon[b-atvdlybxcs] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(var(--theme-500-rgb, 99, 102, 241), 0.2);
    border: 2px solid rgba(var(--theme-500-rgb, 99, 102, 241), 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme-300, #a5b4fc);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.vote-anim-stage.active .vote-anim-stage-icon[b-atvdlybxcs] {
    background: linear-gradient(135deg, var(--theme-500, #6366f1), var(--theme-600, #8b5cf6));
    border-color: transparent;
    color: white;
    box-shadow: 0 0 25px rgba(var(--theme-500-rgb, 99, 102, 241), 0.6);
    animation: voteStageIconPulse-b-atvdlybxcs 1.2s ease-in-out infinite;
}

.vote-anim-stage.completed .vote-anim-stage-icon[b-atvdlybxcs] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: transparent;
    color: white;
}

@keyframes voteStageIconPulse-b-atvdlybxcs {
    0%, 100% { box-shadow: 0 0 25px rgba(var(--theme-500-rgb, 99, 102, 241), 0.5); }
    50% { box-shadow: 0 0 35px rgba(var(--theme-500-rgb, 99, 102, 241), 0.8); }
}

.vote-anim-stage-label[b-atvdlybxcs] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--theme-300, #a5b4fc);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vote-anim-stage.active .vote-anim-stage-label[b-atvdlybxcs] { color: white; }

.vote-anim-stage-connector[b-atvdlybxcs] {
    width: 28px;
    height: 2px;
    background: rgba(var(--theme-500-rgb, 99, 102, 241), 0.3);
    margin-bottom: 1.25rem;
    transition: background 0.3s ease;
}

.vote-anim-stage-connector.completed[b-atvdlybxcs] {
    background: linear-gradient(90deg, #22c55e, var(--theme-500, #6366f1));
}

/* Message area */
.vote-anim-message[b-atvdlybxcs] {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
}

.vote-anim-message-primary[b-atvdlybxcs] {
    font-size: 1.375rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.375rem;
}

.vote-anim-message-secondary[b-atvdlybxcs] {
    font-size: 0.85rem;
    color: var(--theme-300, #a5b4fc);
}

/* Progress bar - Theme-aware */
.vote-anim-progress-container[b-atvdlybxcs] {
    width: 260px;
}

.vote-anim-progress-bar[b-atvdlybxcs] {
    width: 100%;
    height: 6px;
    background: rgba(var(--theme-500-rgb, 99, 102, 241), 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.vote-anim-progress-fill[b-atvdlybxcs] {
    height: 100%;
    background: linear-gradient(90deg, var(--theme-500, #6366f1), var(--theme-600, #a855f7), var(--theme-700, #ec4899));
    border-radius: 3px;
    transition: width 0.15s ease-out;
    animation: voteProgressShimmer-b-atvdlybxcs 2s linear infinite;
    background-size: 200% 100%;
}

@keyframes voteProgressShimmer-b-atvdlybxcs {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.vote-anim-progress-text[b-atvdlybxcs] {
    text-align: center;
    font-size: 0.75rem;
    color: var(--theme-300, #a5b4fc);
    margin-top: 0.5rem;
}

/* Security badge */
.vote-anim-security-badge[b-atvdlybxcs] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 9999px;
    margin-top: 2rem;
}

.vote-anim-security-badge i[b-atvdlybxcs] {
    color: #4ade80;
    font-size: 1rem;
}

.vote-anim-security-badge span[b-atvdlybxcs] {
    font-size: 0.75rem;
    color: #86efac;
    font-weight: 500;
}

/* Mobile adjustments */
@media (max-width: 400px) {
    .vote-anim-stages[b-atvdlybxcs] {
        gap: 0.25rem;
    }

    .vote-anim-stage-icon[b-atvdlybxcs] {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    .vote-anim-stage-label[b-atvdlybxcs] {
        font-size: 0.55rem;
    }

    .vote-anim-stage-connector[b-atvdlybxcs] {
        width: 16px;
    }

    .vote-anim-message-primary[b-atvdlybxcs] {
        font-size: 1.125rem;
    }

    .vote-anim-progress-container[b-atvdlybxcs] {
        width: 220px;
    }
}

/* ==========================================
   Share Dropdown - Theme-aware
   ========================================== */

.share-dropdown[b-atvdlybxcs] {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    min-width: 180px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(var(--theme-500-rgb, 99, 102, 241), 0.2);
    border-radius: 0.75rem;
    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(var(--theme-500-rgb, 99, 102, 241), 0.1);
    overflow: hidden;
    z-index: 50;
    animation: shareDropdownFadeIn-b-atvdlybxcs 0.2s ease-out;
}

@keyframes shareDropdownFadeIn-b-atvdlybxcs {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.share-option[b-atvdlybxcs] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.share-option:hover[b-atvdlybxcs] {
    background: rgba(99, 102, 241, 0.15);
    background: rgba(var(--theme-500-rgb, 99, 102, 241), 0.15);
    color: white;
}

.share-option:not(:last-child)[b-atvdlybxcs] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.share-option i[b-atvdlybxcs] {
    font-size: 1.125rem;
    width: 1.25rem;
    text-align: center;
    color: #a5b4fc;
    color: var(--theme-400, #a5b4fc);
}

.share-option:hover i[b-atvdlybxcs] {
    color: var(--theme-200, #c7d2fe);
}

/* Twitter/X icon color on hover */
.share-option:hover .bi-twitter-x[b-atvdlybxcs] {
    color: white;
}

/* Facebook icon color on hover */
.share-option:hover .bi-facebook[b-atvdlybxcs] {
    color: #1877f2;
}

/* Copy link success state */
.share-option .bi-link-45deg[b-atvdlybxcs] {
    color: #4ade80;
}

/* Semi-transparent backdrop to capture click-outside */
.share-backdrop[b-atvdlybxcs] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ==========================================
   Vote Status Checking Loader - Theme-aware
   ========================================== */

.vote-status-loader[b-atvdlybxcs] {
    background: rgba(var(--theme-500-rgb, 99, 102, 241), 0.05);
    border: 1px solid rgba(var(--theme-500-rgb, 99, 102, 241), 0.2);
    border-radius: 1rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.vote-loader-orb[b-atvdlybxcs] {
    position: relative;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vote-loader-ring[b-atvdlybxcs] {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: var(--theme-500, #6366f1);
    border-right-color: rgba(var(--theme-500-rgb, 99, 102, 241), 0.3);
    animation: voteLoaderSpin-b-atvdlybxcs 1.2s linear infinite;
}

.vote-loader-ring.ring-2[b-atvdlybxcs] {
    inset: 6px;
    border-top-color: var(--theme-400, #818cf8);
    border-right-color: rgba(var(--theme-400-rgb, 129, 140, 248), 0.3);
    animation-direction: reverse;
    animation-duration: 1.8s;
}

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

.vote-loader-icon[b-atvdlybxcs] {
    font-size: 1.25rem;
    color: var(--theme-400, #818cf8);
    animation: voteLoaderIconPulse-b-atvdlybxcs 1.5s ease-in-out infinite;
}

@keyframes voteLoaderIconPulse-b-atvdlybxcs {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.vote-loader-text[b-atvdlybxcs] {
    font-size: 0.875rem;
    color: var(--theme-300, #a5b4fc);
    display: flex;
    align-items: baseline;
}

.vote-loader-dots span[b-atvdlybxcs] {
    display: inline-block;
    color: var(--theme-500, #6366f1);
    font-weight: bold;
    animation: voteLoaderDotBounce-b-atvdlybxcs 1.4s ease-in-out infinite;
}

.vote-loader-dots span:nth-child(1)[b-atvdlybxcs] { animation-delay: 0s; }
.vote-loader-dots span:nth-child(2)[b-atvdlybxcs] { animation-delay: 0.2s; }
.vote-loader-dots span:nth-child(3)[b-atvdlybxcs] { animation-delay: 0.4s; }

@keyframes voteLoaderDotBounce-b-atvdlybxcs {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}
/* /Pages/Topics.razor.rz.scp.css */
/* ==========================================
   Topics Page - Smooth Transitions
   ========================================== */

/* Topic cards have smooth hover and active states */
.topic-card[b-6pcxs0z7y7] {
    transition: all 0.2s ease-out;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
}

.topic-card:hover[b-6pcxs0z7y7] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Voting Type Specific Styles - Solid colored borders */
/* Use combined selectors for higher specificity to override base .topic-card border */

/* Yes/No - Emerald */
.topic-card.topic-card-yesno[b-6pcxs0z7y7] {
    border: 2px solid rgb(16, 185, 129) !important;
}

/* Single Choice - Sky Blue */
.topic-card.topic-card-single[b-6pcxs0z7y7] {
    border: 2px solid rgb(14, 165, 233) !important;
}

/* Multi Choice - Cyan */
.topic-card.topic-card-multi[b-6pcxs0z7y7] {
    border: 2px solid rgb(6, 182, 212) !important;
}

/* Ranked Choice - Amber */
.topic-card.topic-card-ranked[b-6pcxs0z7y7] {
    border: 2px solid rgb(245, 158, 11) !important;
}

/* Town Square - Purple */
.topic-card.topic-card-townsquare[b-6pcxs0z7y7] {
    border: 2px solid rgb(168, 85, 247) !important;
}

/* Petition/AskAQuestion - Rose */
.topic-card.topic-card-petition[b-6pcxs0z7y7] {
    border: 2px solid rgb(244, 63, 94) !important;
}

/* Multi-Sig Topic Cards - Amber border to distinguish from other types */
/* Used for topics awaiting committee approval before going live */
.topic-card.topic-card-multisig[b-6pcxs0z7y7] {
    border: 2px solid rgb(245, 158, 11) !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(234, 88, 12, 0.05));
}

.topic-card.topic-card-multisig:hover[b-6pcxs0z7y7] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(234, 88, 12, 0.08));
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2);
}

/* Multi-sig progress indicator */
.multisig-progress[b-6pcxs0z7y7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.multisig-progress-ring[b-6pcxs0z7y7] {
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
}

.multisig-progress-ring svg[b-6pcxs0z7y7] {
    transform: rotate(-90deg);
}

.multisig-progress-ring circle[b-6pcxs0z7y7] {
    fill: none;
    stroke-width: 3;
}

.multisig-progress-ring .bg[b-6pcxs0z7y7] {
    stroke: rgba(255, 255, 255, 0.1);
}

.multisig-progress-ring .progress[b-6pcxs0z7y7] {
    stroke: rgb(245, 158, 11);
    stroke-linecap: round;
    transition: stroke-dasharray 0.3s ease-out;
}

.topic-card:active[b-6pcxs0z7y7] {
    transform: scale(0.98);
    transition: transform 0.1s ease-out;
}

/* Staggered entry animation for topic list */
.topics-list[b-6pcxs0z7y7] {
    animation: topicsListEnter-b-6pcxs0z7y7 0.3s ease-out;
}

@keyframes topicsListEnter-b-6pcxs0z7y7 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Individual topic cards animate in with stagger */
.topic-card-animated[b-6pcxs0z7y7] {
    animation: topicCardEnter-b-6pcxs0z7y7 0.35s ease-out backwards;
}

.topic-card-animated:nth-child(1)[b-6pcxs0z7y7] { animation-delay: 0.02s; }
.topic-card-animated:nth-child(2)[b-6pcxs0z7y7] { animation-delay: 0.04s; }
.topic-card-animated:nth-child(3)[b-6pcxs0z7y7] { animation-delay: 0.06s; }
.topic-card-animated:nth-child(4)[b-6pcxs0z7y7] { animation-delay: 0.08s; }
.topic-card-animated:nth-child(5)[b-6pcxs0z7y7] { animation-delay: 0.1s; }
.topic-card-animated:nth-child(6)[b-6pcxs0z7y7] { animation-delay: 0.12s; }
.topic-card-animated:nth-child(7)[b-6pcxs0z7y7] { animation-delay: 0.14s; }
.topic-card-animated:nth-child(8)[b-6pcxs0z7y7] { animation-delay: 0.16s; }
.topic-card-animated:nth-child(9)[b-6pcxs0z7y7] { animation-delay: 0.18s; }
.topic-card-animated:nth-child(10)[b-6pcxs0z7y7] { animation-delay: 0.2s; }

@keyframes topicCardEnter-b-6pcxs0z7y7 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Loading state smooth fade */
.topics-loading[b-6pcxs0z7y7] {
    animation: topicsLoadingFade-b-6pcxs0z7y7 0.3s ease-out;
}

@keyframes topicsLoadingFade-b-6pcxs0z7y7 {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* /Shared/StartupLoader.razor.rz.scp.css */
/* Startup Loader - Premium loading experience */
/* Theme-aware: uses CSS custom properties from theme files */

.startup-loader[b-soxt0pynu5] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Theme-aware background - uses CSS variable from theme files */
    background: var(--startup-bg, linear-gradient(135deg, #0f0d0a 0%, #1a1512 50%, #0d0b08 100%));
    overflow: hidden;
}

/* Background art pattern - Australian flag for democracy theme */
/* This loads before theme CSS, so we hardcode the default democracy flag */
.startup-loader[b-soxt0pynu5]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url('/_content/RUBI.Core.Styles/images/ausflag.svg');
    background-size: 300px auto;
    background-position: bottom 20px right -50px;
    background-repeat: no-repeat;
    opacity: 0.12;
    pointer-events: none;
    mask-image: linear-gradient(to left, rgba(0,0,0,0.7), transparent 60%);
    -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.7), transparent 60%);
    z-index: 0;
}

@media (min-width: 768px) {
    .startup-loader[b-soxt0pynu5]::before {
        background-size: 450px auto;
        background-position: bottom 30px right -80px;
        opacity: 0.1;
    }
}

@media (min-width: 1024px) {
    .startup-loader[b-soxt0pynu5]::before {
        background-size: 550px auto;
        background-position: bottom 40px right -100px;
    }
}

/* Animated background glow - theme colored */
.startup-bg[b-soxt0pynu5] {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.startup-glow[b-soxt0pynu5] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(var(--theme-500-rgb, 99, 102, 241), 0.15) 0%, rgba(var(--theme-600-rgb, 139, 92, 246), 0.08) 40%, transparent 70%);
    animation: glow-pulse-b-soxt0pynu5 3s ease-in-out infinite;
}

@keyframes glow-pulse-b-soxt0pynu5 {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
}

/* Main content container */
.startup-content[b-soxt0pynu5] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    /* Subtle frosted glass effect for readability over busy backgrounds */
    background: rgba(15, 15, 26, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 3rem 4rem;
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Animated orb */
.startup-orb-container[b-soxt0pynu5] {
    position: relative;
    width: 120px;
    height: 120px;
}

.startup-orb[b-soxt0pynu5] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.startup-orb-inner[b-soxt0pynu5] {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--theme-500, #6366f1) 0%, var(--theme-600, #8b5cf6) 50%, var(--theme-700, #a855f7) 100%);
    box-shadow:
        0 0 30px rgba(var(--theme-500-rgb, 99, 102, 241), 0.5),
        0 0 60px rgba(var(--theme-600-rgb, 139, 92, 246), 0.3),
        inset 0 0 20px rgba(255, 255, 255, 0.2);
    animation: orb-pulse-b-soxt0pynu5 2s ease-in-out infinite;
}

@keyframes orb-pulse-b-soxt0pynu5 {
    0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(var(--theme-500-rgb, 99, 102, 241), 0.5), 0 0 60px rgba(var(--theme-600-rgb, 139, 92, 246), 0.3); }
    50% { transform: scale(1.1); box-shadow: 0 0 40px rgba(var(--theme-500-rgb, 99, 102, 241), 0.7), 0 0 80px rgba(var(--theme-600-rgb, 139, 92, 246), 0.5); }
}

.startup-orb-ring[b-soxt0pynu5] {
    position: absolute;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(var(--theme-500-rgb, 99, 102, 241), 0.6);
    border-right-color: rgba(var(--theme-600-rgb, 139, 92, 246), 0.3);
}

.startup-orb-ring.ring-1[b-soxt0pynu5] {
    inset: 10px;
    animation: ring-spin-b-soxt0pynu5 2s linear infinite;
}

.startup-orb-ring.ring-2[b-soxt0pynu5] {
    inset: 0;
    animation: ring-spin-b-soxt0pynu5 3s linear infinite reverse;
    border-top-color: rgba(var(--theme-600-rgb, 168, 85, 247), 0.5);
}

.startup-orb-ring.ring-3[b-soxt0pynu5] {
    inset: -10px;
    animation: ring-spin-b-soxt0pynu5 4s linear infinite;
    border-top-color: rgba(var(--theme-500-rgb, 99, 102, 241), 0.3);
}

@keyframes ring-spin-b-soxt0pynu5 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Brand text */
.startup-brand[b-soxt0pynu5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.startup-brand-text[b-soxt0pynu5] {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    background: linear-gradient(135deg, #fff 0%, #c7d2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.startup-brand-sub[b-soxt0pynu5] {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--theme-400, #818cf8);
}

/* Progress steps */
.startup-steps[b-soxt0pynu5] {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 1rem;
}

.startup-step[b-soxt0pynu5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.4;
    transition: all 0.3s ease;
}

.startup-step.active[b-soxt0pynu5] {
    opacity: 1;
}

.startup-step.completed .step-icon[b-soxt0pynu5] {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    border-color: #22c55e;
}

.step-icon[b-soxt0pynu5] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid #4b5563;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.startup-step.active .step-icon[b-soxt0pynu5] {
    border-color: var(--theme-500, #6366f1);
    color: var(--theme-300, #a5b4fc);
    background: rgba(var(--theme-500-rgb, 99, 102, 241), 0.1);
}

.startup-step.completed .step-icon[b-soxt0pynu5] {
    color: white;
}

.step-spinner[b-soxt0pynu5] {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(var(--theme-500-rgb, 99, 102, 241), 0.3);
    border-top-color: var(--theme-400, #818cf8);
    border-radius: 50%;
    animation: spin-b-soxt0pynu5 0.8s linear infinite;
}

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

.step-label[b-soxt0pynu5] {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 500;
    transition: color 0.3s ease;
}

.startup-step.active .step-label[b-soxt0pynu5] {
    color: var(--theme-300, #a5b4fc);
}

.startup-step.completed .step-label[b-soxt0pynu5] {
    color: #86efac;
}

/* Step connector */
.startup-step-connector[b-soxt0pynu5] {
    width: 40px;
    height: 2px;
    background: #374151;
    margin: 0 0.5rem;
    margin-bottom: 1.5rem;
    transition: background 0.3s ease;
}

.startup-step-connector.active[b-soxt0pynu5] {
    background: linear-gradient(90deg, #22c55e 0%, var(--theme-500, #6366f1) 100%);
}

/* Status message */
.startup-status[b-soxt0pynu5] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

.startup-status-text[b-soxt0pynu5] {
    font-size: 0.875rem;
    color: #9ca3af;
}

.startup-dots span[b-soxt0pynu5] {
    animation: dot-bounce-b-soxt0pynu5 1.4s ease-in-out infinite;
    color: var(--theme-500, #6366f1);
    font-weight: bold;
}

.startup-dots span:nth-child(1)[b-soxt0pynu5] { animation-delay: 0s; }
.startup-dots span:nth-child(2)[b-soxt0pynu5] { animation-delay: 0.2s; }
.startup-dots span:nth-child(3)[b-soxt0pynu5] { animation-delay: 0.4s; }

@keyframes dot-bounce-b-soxt0pynu5 {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-3px); }
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .startup-content[b-soxt0pynu5] {
        padding: 2rem 1.5rem;
        margin: 1rem;
        border-radius: 1rem;
    }

    .startup-orb-container[b-soxt0pynu5] {
        width: 100px;
        height: 100px;
    }

    .startup-orb-inner[b-soxt0pynu5] {
        width: 40px;
        height: 40px;
    }

    .startup-brand-text[b-soxt0pynu5] {
        font-size: 2rem;
    }

    .step-icon[b-soxt0pynu5] {
        width: 36px;
        height: 36px;
    }

    .startup-step-connector[b-soxt0pynu5] {
        width: 24px;
    }
}

/* =================================================================
   ERROR STATE STYLES
   ================================================================= */

.startup-loader.has-error .startup-glow[b-soxt0pynu5],
.error-glow[b-soxt0pynu5] {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.2) 0%, rgba(185, 28, 28, 0.1) 40%, transparent 70%);
}

.startup-error-container[b-soxt0pynu5] {
    text-align: center;
    max-width: 400px;
}

.startup-error-icon[b-soxt0pynu5] {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(185, 28, 28, 0.1));
    border: 2px solid rgba(239, 68, 68, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: error-pulse-b-soxt0pynu5 2s ease-in-out infinite;
}

.startup-error-icon i[b-soxt0pynu5] {
    font-size: 2rem;
    color: #f87171;
}

@keyframes error-pulse-b-soxt0pynu5 {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(239, 68, 68, 0.1);
    }
}

.startup-error-title[b-soxt0pynu5] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fca5a5;
    margin-bottom: 0.75rem;
}

.startup-error-message[b-soxt0pynu5] {
    font-size: 0.95rem;
    color: #9ca3af;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.startup-error-actions[b-soxt0pynu5] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.startup-btn[b-soxt0pynu5] {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 0.75rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.startup-btn-primary[b-soxt0pynu5] {
    background: linear-gradient(135deg, var(--theme-500, #6366f1), var(--theme-600, #4f46e5));
    color: white;
    box-shadow: 0 4px 12px rgba(var(--theme-500-rgb, 99, 102, 241), 0.3);
}

.startup-btn-primary:hover[b-soxt0pynu5] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--theme-500-rgb, 99, 102, 241), 0.4);
}

.startup-btn-secondary[b-soxt0pynu5] {
    background: rgba(255, 255, 255, 0.05);
    color: #d1d5db;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.startup-btn-secondary:hover[b-soxt0pynu5] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.startup-error-hint[b-soxt0pynu5] {
    font-size: 0.8rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

/* Mobile adjustments for error state */
@media (max-width: 640px) {
    .startup-error-container[b-soxt0pynu5] {
        padding: 0 1rem;
    }

    .startup-error-icon[b-soxt0pynu5] {
        width: 64px;
        height: 64px;
    }

    .startup-error-icon i[b-soxt0pynu5] {
        font-size: 1.5rem;
    }

    .startup-error-title[b-soxt0pynu5] {
        font-size: 1.25rem;
    }

    .startup-error-actions[b-soxt0pynu5] {
        flex-direction: column;
    }

    .startup-btn[b-soxt0pynu5] {
        width: 100%;
        justify-content: center;
    }
}