/* /Components/Custom/AIAgentOverlay.razor.rz.scp.css */
.ai-agent-fab[b-evb8pt23fi] {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1900;
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #0ea5e9, #e879f9, #22c55e);
    box-shadow: 0 16px 38px rgba(14, 165, 233, 0.26);
}

.ai-agent-layer[b-evb8pt23fi] {
    position: fixed;
    inset: 0;
    z-index: 2100;
}

.ai-agent-scrim[b-evb8pt23fi] {
    position: absolute;
    inset: 0;
    background: rgba(9, 20, 35, 0.18);
}

.ai-agent-panel[b-evb8pt23fi] {
    position: absolute;
    top: 16px;
    right: 16px;
    bottom: 16px;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    width: min(460px, calc(100vw - 24px));
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 26px 60px rgba(30, 64, 94, 0.22);
    overflow: hidden;
}

.ai-agent-panel[b-evb8pt23fi]::before {
    content: "";
    position: absolute;
    inset: 0;
    height: 4px;
    background: linear-gradient(90deg, #0ea5e9, #e879f9, #22c55e, #f59e0b, #0ea5e9);
    background-size: 300% 100%;
    animation: aiAgentBorderFlow-b-evb8pt23fi 6s linear infinite;
}

.ai-agent-header[b-evb8pt23fi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 20px 12px;
}

.ai-agent-kicker[b-evb8pt23fi] {
    color: #0ea5e9;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ai-agent-header h2[b-evb8pt23fi] {
    margin: 0;
    color: #142033;
    font-size: 1.1rem;
    font-weight: 800;
}

.ai-agent-icon-btn[b-evb8pt23fi] {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    color: #334155;
    background: #ffffff;
}

.ai-agent-status[b-evb8pt23fi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 20px 12px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
}

.ai-agent-status span[b-evb8pt23fi] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f8fafc;
}

.ai-agent-history[b-evb8pt23fi] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 0 20px 12px;
}

.ai-agent-history .form-select[b-evb8pt23fi] {
    border-color: #dbeafe;
    border-radius: 12px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
}

.ai-agent-messages[b-evb8pt23fi] {
    min-height: 0;
    overflow-y: auto;
    padding: 12px 20px;
    background: linear-gradient(180deg, #f8fbff, #ffffff);
}

.ai-agent-empty[b-evb8pt23fi] {
    display: grid;
    gap: 10px;
    place-items: center;
    min-height: 160px;
    color: #64748b;
    text-align: center;
}

.ai-agent-empty i[b-evb8pt23fi] {
    color: #0ea5e9;
    font-size: 2rem;
}

.ai-agent-message[b-evb8pt23fi] {
    width: fit-content;
    max-width: 92%;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #eef6ff;
    color: #172033;
    font-size: 0.9rem;
}

.ai-agent-message.user[b-evb8pt23fi] {
    margin-left: auto;
    background: #0ea5e9;
    color: #ffffff;
}

.ai-agent-message small[b-evb8pt23fi] {
    display: block;
    margin-top: 4px;
    opacity: 0.72;
    font-size: 0.68rem;
}

.ai-agent-message-kind[b-evb8pt23fi] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.ai-agent-message.thinking[b-evb8pt23fi] {
    border: 1px solid #bfdbfe;
    color: #1e3a8a;
    background: #eff6ff;
}

.ai-agent-message.thinking .ai-agent-message-kind[b-evb8pt23fi] {
    color: #2563eb;
}

.ai-agent-message.result[b-evb8pt23fi] {
    border: 1px solid #bbf7d0;
    color: #14532d;
    background: #f0fdf4;
}

.ai-agent-message.result .ai-agent-message-kind[b-evb8pt23fi] {
    color: #15803d;
}

.ai-agent-message.error[b-evb8pt23fi] {
    border: 1px solid #fecaca;
    color: #7f1d1d;
    background: #fef2f2;
}

.ai-agent-message.error .ai-agent-message-kind[b-evb8pt23fi] {
    color: #dc2626;
}

.ai-agent-message.pending[b-evb8pt23fi] {
    min-width: min(310px, 88%);
}

.ai-thinking-pending[b-evb8pt23fi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.ai-thinking-dots[b-evb8pt23fi] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.ai-thinking-dots i[b-evb8pt23fi] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #2563eb;
    animation: aiThinkingDot-b-evb8pt23fi 900ms ease-in-out infinite alternate;
}

.ai-thinking-dots i:nth-child(2)[b-evb8pt23fi] {
    animation-delay: 150ms;
}

.ai-thinking-dots i:nth-child(3)[b-evb8pt23fi] {
    animation-delay: 300ms;
}

.ai-command-timeline[b-evb8pt23fi],
.ai-query-card[b-evb8pt23fi] {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
}

.ai-query-title[b-evb8pt23fi] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.ai-query-actions[b-evb8pt23fi] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ai-query-title strong[b-evb8pt23fi],
.ai-query-title small[b-evb8pt23fi] {
    display: block;
}

.ai-query-title small[b-evb8pt23fi] {
    margin-top: 2px;
    color: #64748b;
}

.ai-query-metrics[b-evb8pt23fi] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.ai-query-metric[b-evb8pt23fi] {
    padding: 10px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #f8fbff;
}

.ai-query-metric small[b-evb8pt23fi],
.ai-query-metric strong[b-evb8pt23fi] {
    display: block;
}

.ai-query-metric small[b-evb8pt23fi] {
    color: #64748b;
    font-size: 0.72rem;
}

.ai-query-metric strong[b-evb8pt23fi] {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 800;
}

.ai-query-comparison[b-evb8pt23fi] {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.ai-query-comparison-item[b-evb8pt23fi] {
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}

.ai-query-comparison-item strong[b-evb8pt23fi] {
    display: block;
    margin-bottom: 4px;
}

.ai-query-comparison-item div[b-evb8pt23fi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #475569;
    font-size: 0.78rem;
}

.ai-query-comparison-item .positive[b-evb8pt23fi] {
    color: #15803d;
    font-weight: 700;
}

.ai-query-comparison-item .negative[b-evb8pt23fi] {
    color: #b91c1c;
    font-weight: 700;
}

.ai-query-insights[b-evb8pt23fi] {
    display: grid;
    gap: 6px;
    margin: 10px 0;
}

.ai-query-insight[b-evb8pt23fi] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 7px 8px;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e3a8a;
    font-size: 0.78rem;
    font-weight: 700;
}

.ai-query-insight.warning[b-evb8pt23fi] {
    background: #fffbeb;
    color: #92400e;
}

.ai-query-insight.danger[b-evb8pt23fi],
.ai-query-insight.error[b-evb8pt23fi] {
    background: #fef2f2;
    color: #991b1b;
}

.ai-query-chart[b-evb8pt23fi] {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #f8fbff;
}

.ai-query-chart-title strong[b-evb8pt23fi],
.ai-query-chart-title small[b-evb8pt23fi] {
    display: block;
}

.ai-query-chart-canvas[b-evb8pt23fi] {
    margin-top: 10px;
}

.ai-query-drills[b-evb8pt23fi] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.ai-query-table-wrap[b-evb8pt23fi] {
    max-height: 260px;
    overflow: auto;
    margin-top: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.ai-query-table[b-evb8pt23fi] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.ai-query-table th[b-evb8pt23fi],
.ai-query-table td[b-evb8pt23fi] {
    padding: 7px 8px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    text-align: left;
}

.ai-query-table th[b-evb8pt23fi] {
    position: sticky;
    top: 0;
    background: #f8fafc;
    color: #475569;
    font-weight: 800;
}

.ai-query-empty[b-evb8pt23fi] {
    margin-top: 10px;
    color: #64748b;
    font-size: 0.82rem;
}

.ai-command-row[b-evb8pt23fi] {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 6px 0;
}

.ai-command-dot[b-evb8pt23fi] {
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: #22c55e;
}

.ai-command-dot.waiting[b-evb8pt23fi] {
    background: #f59e0b;
}

.ai-command-dot.failed[b-evb8pt23fi] {
    background: #ef4444;
}

.ai-command-row strong[b-evb8pt23fi],
.ai-command-row small[b-evb8pt23fi] {
    display: block;
}

.ai-command-row small[b-evb8pt23fi] {
    color: #64748b;
}

.ai-approval-dialog-layer[b-evb8pt23fi] {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: grid;
    place-items: center;
    padding: 20px;
}

.ai-approval-dialog-backdrop[b-evb8pt23fi] {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.52);
}

.ai-approval-dialog[b-evb8pt23fi] {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(560px, 100%);
    max-height: min(720px, calc(100vh - 40px));
    overflow: hidden;
    border: 1px solid #dbe4ee;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
    animation: aiApprovalDialogIn-b-evb8pt23fi 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ai-approval-dialog-header[b-evb8pt23fi] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.ai-approval-dialog-icon[b-evb8pt23fi] {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #047857;
    background: #ecfdf5;
    font-size: 1.05rem;
}

.ai-approval-dialog-header span[b-evb8pt23fi] {
    display: block;
    margin-bottom: 2px;
    color: #047857;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ai-approval-dialog-header h3[b-evb8pt23fi] {
    margin: 0;
    color: #172033;
    font-size: 1.08rem;
    font-weight: 800;
}

.ai-approval-dialog-body[b-evb8pt23fi] {
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px;
}

.ai-approval-summary[b-evb8pt23fi] {
    margin: 0 0 14px;
    color: #475569;
    line-height: 1.55;
}

.ai-approval-meta[b-evb8pt23fi] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: 0 0 14px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #e2e8f0;
}

.ai-approval-meta div[b-evb8pt23fi] {
    min-width: 0;
    padding: 10px 12px;
    background: #f8fafc;
}

.ai-approval-meta dt[b-evb8pt23fi] {
    margin-bottom: 2px;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ai-approval-meta dd[b-evb8pt23fi] {
    margin: 0;
    overflow-wrap: anywhere;
    color: #1e293b;
    font-size: 0.84rem;
    font-weight: 700;
}

.ai-approval-line-list[b-evb8pt23fi] {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.ai-approval-request-details[b-evb8pt23fi] {
    display: grid;
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #e2e8f0;
}

.ai-approval-request-details div[b-evb8pt23fi] {
    display: grid;
    grid-template-columns: minmax(100px, 0.35fr) minmax(0, 1fr);
    gap: 12px;
    padding: 10px 12px;
    background: #f8fafc;
}

.ai-approval-request-details dt[b-evb8pt23fi] {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
}

.ai-approval-request-details dd[b-evb8pt23fi] {
    margin: 0;
    overflow-wrap: anywhere;
    color: #1e293b;
    font-size: 0.82rem;
    font-weight: 700;
}

.ai-approval-line-heading[b-evb8pt23fi],
.ai-approval-line-item[b-evb8pt23fi],
.ai-approval-total[b-evb8pt23fi] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
}

.ai-approval-line-heading[b-evb8pt23fi] {
    color: #64748b;
    background: #f8fafc;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ai-approval-line-item[b-evb8pt23fi] {
    border-top: 1px solid #eef2f7;
    color: #1e293b;
    font-size: 0.82rem;
}

.ai-approval-line-item small[b-evb8pt23fi] {
    display: block;
    margin-top: 2px;
    color: #64748b;
}

.ai-approval-total[b-evb8pt23fi] {
    border-top: 1px solid #dbe4ee;
    color: #0f172a;
    background: #f8fafc;
    font-weight: 800;
}

.ai-approval-notice[b-evb8pt23fi] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid #fde68a;
    border-radius: 10px;
    color: #854d0e;
    background: #fffbeb;
    font-size: 0.78rem;
    line-height: 1.45;
}

.ai-approval-dialog-actions[b-evb8pt23fi] {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

@keyframes aiApprovalDialogIn-b-evb8pt23fi {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.ai-agent-compose[b-evb8pt23fi] {
    padding: 12px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

.ai-agent-compose textarea[b-evb8pt23fi] {
    resize: none;
    border-color: #dbeafe;
    border-radius: 14px;
    font-size: 0.9rem;
}

.ai-agent-compose-actions[b-evb8pt23fi] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

@keyframes aiAgentBorderFlow-b-evb8pt23fi {
    from {
        background-position: 0 50%;
    }

    to {
        background-position: 300% 50%;
    }
}

@media (max-width: 640px) {
    .ai-agent-fab[b-evb8pt23fi] {
        right: 14px;
        bottom: 84px;
    }

    .ai-agent-panel[b-evb8pt23fi] {
        inset: 8px;
        width: auto;
    }

    .ai-approval-dialog-layer[b-evb8pt23fi] {
        align-items: end;
        padding: 8px;
    }

    .ai-approval-dialog[b-evb8pt23fi] {
        width: 100%;
        max-height: calc(100vh - 16px);
        border-radius: 14px;
    }

    .ai-approval-dialog-header[b-evb8pt23fi],
    .ai-approval-dialog-body[b-evb8pt23fi] {
        padding-right: 14px;
        padding-left: 14px;
    }

    .ai-approval-dialog-actions[b-evb8pt23fi] {
        padding: 12px 14px;
    }

    .ai-approval-dialog-actions .btn[b-evb8pt23fi] {
        min-height: 42px;
        flex: 1 1 0;
    }

    .ai-approval-meta[b-evb8pt23fi] {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-approval-request-details div[b-evb8pt23fi] {
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-approval-dialog[b-evb8pt23fi] {
        animation: none;
    }
}

/* Full-screen working assistant mode */
.ai-agent-layer[b-evb8pt23fi] {
    isolation: isolate;
    padding: 3px;
    background: transparent;
}

.ai-agent-layer[b-evb8pt23fi]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 40;
    padding: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, #22d3ee, #2563eb, #a855f7, #ec4899, #f59e0b, #22c55e, #22d3ee);
    background-size: 300% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: aiAgentScreenBorder-b-evb8pt23fi 7s linear infinite;
}

.ai-agent-scrim[b-evb8pt23fi] {
    z-index: 0;
    background: rgba(226, 232, 240, 0.18);
    -webkit-backdrop-filter: blur(5px) saturate(112%);
    backdrop-filter: blur(5px) saturate(112%);
    transition: background-color 180ms ease, backdrop-filter 180ms ease;
}

.ai-agent-layer.is-working .ai-agent-scrim[b-evb8pt23fi] {
    background: rgba(15, 23, 42, 0.025);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.ai-agent-panel[b-evb8pt23fi] {
    inset: 3px;
    z-index: 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    width: auto;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.ai-agent-panel[b-evb8pt23fi]::before {
    content: none;
}

.ai-worker-hero[b-evb8pt23fi] {
    position: relative;
    display: grid;
    justify-items: center;
    padding: 8px 72px 6px;
    text-align: center;
    pointer-events: none;
}

.ai-worker-controls[b-evb8pt23fi] {
    position: absolute;
    top: 8px;
    right: 12px;
    display: flex;
    gap: 8px;
    pointer-events: auto;
}

.ai-worker-robot[b-evb8pt23fi] {
    position: relative;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 3px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    color: #ffffff;
    background: #14213d;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
    font-size: 1.15rem;
    animation: aiWorkerRobotIn-b-evb8pt23fi 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ai-worker-robot span[b-evb8pt23fi] {
    position: absolute;
    right: 2px;
    bottom: 5px;
    width: 10px;
    height: 10px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: #22c55e;
}

.ai-worker-hero .ai-agent-kicker[b-evb8pt23fi] {
    color: #0369a1;
}

.ai-worker-hero h2[b-evb8pt23fi] {
    max-width: min(760px, 80vw);
    margin: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: clamp(0.98rem, 1.55vw, 1.18rem);
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-worker-hero .ai-agent-status[b-evb8pt23fi] {
    justify-content: center;
    gap: 5px;
    padding: 4px 0 0;
    pointer-events: auto;
}

.ai-agent-status span[b-evb8pt23fi] {
    padding: 2px 7px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(255, 255, 255, 0.9);
    font-size: 0.7rem;
}

.ai-agent-status .ready[b-evb8pt23fi] {
    color: #047857;
}

.ai-agent-status .offline[b-evb8pt23fi] {
    color: #a16207;
}

.ai-worker-workspace[b-evb8pt23fi] {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(620px, 980px);
    grid-template-areas: "chat";
    justify-content: end;
    gap: 10px;
    padding: 10px 14px 12px;
}

.ai-agent-layer.chat-closed .ai-worker-workspace[b-evb8pt23fi] {
    grid-template-columns: minmax(320px, 420px);
}

.ai-worker-chat-toggle[b-evb8pt23fi] {
    width: 34px;
    height: 34px;
    color: #0369a1;
    background: rgba(240, 249, 255, 0.95);
}

.ai-worker-chat-toggle.active[b-evb8pt23fi] {
    color: #ffffff;
    border-color: #0284c7;
    background: #0284c7;
}

.ai-worker-live-dot[b-evb8pt23fi] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.14);
}

.ai-worker-step-list[b-evb8pt23fi] {
    display: grid;
    gap: 3px;
    padding-top: 8px;
}

.ai-worker-step[b-evb8pt23fi] {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
    padding: 6px;
    border-radius: 10px;
}

.ai-worker-step-icon[b-evb8pt23fi] {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: #0369a1;
    background: #e0f2fe;
    font-size: 0.76rem;
}

.ai-worker-step.completed .ai-worker-step-icon[b-evb8pt23fi] {
    color: #047857;
    background: #d1fae5;
}

.ai-worker-step.waiting .ai-worker-step-icon[b-evb8pt23fi] {
    color: #a16207;
    background: #fef3c7;
}

.ai-worker-step.failed .ai-worker-step-icon[b-evb8pt23fi] {
    color: #b91c1c;
    background: #fee2e2;
}

.ai-worker-step strong[b-evb8pt23fi],
.ai-worker-step small[b-evb8pt23fi] {
    display: block;
}

.ai-worker-step strong[b-evb8pt23fi] {
    color: #1e293b;
    font-size: 0.82rem;
}

.ai-worker-step small[b-evb8pt23fi] {
    margin-top: 2px;
    color: #64748b;
    font-size: 0.72rem;
    line-height: 1.4;
}

.ai-agent-chat-shell[b-evb8pt23fi] {
    grid-area: chat;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.16);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    backdrop-filter: blur(16px) saturate(125%);
    transform-origin: right center;
    animation: aiAgentChatIn-b-evb8pt23fi 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ai-agent-layer.chat-closed .ai-agent-chat-shell[b-evb8pt23fi] {
    display: none;
}

.ai-agent-history-panel[b-evb8pt23fi] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    border-right: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(248, 250, 252, 0.74);
}

.ai-history-header[b-evb8pt23fi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.ai-history-header span[b-evb8pt23fi],
.ai-history-header strong[b-evb8pt23fi],
.ai-history-item strong[b-evb8pt23fi],
.ai-history-item span[b-evb8pt23fi],
.ai-history-item small[b-evb8pt23fi] {
    display: block;
}

.ai-history-header span[b-evb8pt23fi] {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ai-history-header strong[b-evb8pt23fi] {
    color: #172033;
    font-size: 0.84rem;
}

.ai-history-list[b-evb8pt23fi] {
    min-height: 0;
    overflow-y: auto;
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 8px;
}

.ai-history-empty[b-evb8pt23fi] {
    padding: 10px;
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.ai-history-item[b-evb8pt23fi] {
    width: 100%;
    min-width: 0;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #334155;
    background: transparent;
    text-align: left;
}

.ai-history-item:hover[b-evb8pt23fi],
.ai-history-item.active[b-evb8pt23fi] {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.ai-history-item strong[b-evb8pt23fi] {
    overflow: hidden;
    color: #172033;
    font-size: 0.78rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-history-item span[b-evb8pt23fi],
.ai-history-item small[b-evb8pt23fi] {
    margin-top: 2px;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
}

.ai-agent-chat-card[b-evb8pt23fi] {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.ai-chat-card-header[b-evb8pt23fi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    background: rgba(255, 255, 255, 0.84);
}

.ai-chat-card-title[b-evb8pt23fi] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}

.ai-chat-card-title strong[b-evb8pt23fi],
.ai-chat-card-title small[b-evb8pt23fi] {
    display: block;
}

.ai-chat-card-title strong[b-evb8pt23fi] {
    overflow: hidden;
    color: #172033;
    font-size: 0.9rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-chat-card-title strong i[b-evb8pt23fi] {
    color: #047857;
    margin-right: 4px;
}

.ai-chat-card-title small[b-evb8pt23fi] {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 750;
}

.ai-chat-robot[b-evb8pt23fi] {
    width: 34px;
    height: 34px;
    margin: 0;
    flex: 0 0 auto;
    font-size: 0.95rem;
}

.ai-chat-robot span[b-evb8pt23fi] {
    right: 0;
    bottom: 3px;
    width: 9px;
    height: 9px;
}

.ai-progress-chat-card[b-evb8pt23fi] {
    margin: 8px 0 12px;
    padding: 10px;
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.ai-progress-chat-heading[b-evb8pt23fi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.ai-progress-chat-heading span[b-evb8pt23fi],
.ai-progress-chat-heading strong[b-evb8pt23fi] {
    display: block;
}

.ai-progress-chat-heading span[b-evb8pt23fi] {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
}

.ai-progress-chat-heading strong[b-evb8pt23fi] {
    color: #172033;
    font-size: 0.86rem;
}

.ai-debug-strip[b-evb8pt23fi] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 10px 6px;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 750;
}

.ai-debug-strip span[b-evb8pt23fi] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    padding: 2px 6px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: rgba(248, 250, 252, 0.86);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-evidence-strip[b-evb8pt23fi] {
    display: grid;
    gap: 6px;
    padding: 0 10px 8px;
}

.ai-evidence-card[b-evb8pt23fi] {
    display: grid;
    gap: 5px;
    padding: 8px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    color: #334155;
    font-size: 0.72rem;
}

.ai-evidence-head[b-evb8pt23fi],
.ai-evidence-meta[b-evb8pt23fi],
.ai-evidence-actions[b-evb8pt23fi] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.ai-evidence-head[b-evb8pt23fi] {
    justify-content: space-between;
}

.ai-evidence-head strong[b-evb8pt23fi] {
    color: #172033;
    font-size: 0.76rem;
}

.ai-evidence-link[b-evb8pt23fi],
.ai-evidence-actions button[b-evb8pt23fi] {
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 0.68rem;
    font-weight: 800;
}

.ai-evidence-meta span[b-evb8pt23fi],
.ai-evidence-metrics span[b-evb8pt23fi] {
    display: inline-flex;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: #f1f5f9;
}

.ai-evidence-metrics[b-evb8pt23fi] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ai-evidence-warning[b-evb8pt23fi] {
    color: #92400e;
    font-weight: 750;
}

.ai-agent-messages[b-evb8pt23fi] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 10px;
    background: rgba(248, 251, 255, 0.86);
}

.ai-agent-message-content[b-evb8pt23fi] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ai-agent-compose[b-evb8pt23fi] {
    padding: 7px 9px 9px;
}

.ai-agent-compose textarea[b-evb8pt23fi] {
    min-height: 58px;
    max-height: 88px;
    font-size: 0.84rem;
    line-height: 1.35;
}

.ai-agent-compose-actions[b-evb8pt23fi] {
    margin-top: 5px;
}

@keyframes aiAgentScreenBorder-b-evb8pt23fi {
    from { background-position: 0 50%; }
    to { background-position: 300% 50%; }
}

@keyframes aiWorkerRobotIn-b-evb8pt23fi {
    from { opacity: 0; transform: translateY(-8px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes aiAgentChatIn-b-evb8pt23fi {
    from { opacity: 0; transform: translateX(12px) scale(0.985); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes aiThinkingDot-b-evb8pt23fi {
    from { opacity: 0.35; transform: translateY(1px); }
    to { opacity: 1; transform: translateY(-2px); }
}

@media (max-width: 820px) {
    .ai-worker-hero[b-evb8pt23fi] {
        padding: 12px 60px 9px;
    }

    .ai-worker-controls[b-evb8pt23fi] {
        top: 10px;
        right: 10px;
    }

    .ai-worker-robot[b-evb8pt23fi] {
        width: 52px;
        height: 52px;
        margin-bottom: 5px;
        font-size: 1.35rem;
    }

    .ai-worker-workspace[b-evb8pt23fi] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "chat";
        grid-template-rows: minmax(0, 1fr);
        gap: 8px;
        padding: 0 8px 8px;
    }

    .ai-agent-layer.chat-closed .ai-worker-workspace[b-evb8pt23fi] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "chat";
        grid-template-rows: minmax(0, 1fr);
    }

    .ai-worker-step-list[b-evb8pt23fi] {
        display: grid;
        gap: 6px;
    }

    .ai-worker-step[b-evb8pt23fi] {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .ai-agent-chat-shell[b-evb8pt23fi] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        border-radius: 14px;
    }

    .ai-agent-history-panel[b-evb8pt23fi] {
        max-height: 136px;
        border-right: 0;
        border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    }

    .ai-history-list[b-evb8pt23fi] {
        grid-auto-flow: column;
        grid-auto-columns: minmax(150px, 1fr);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .ai-chat-robot[b-evb8pt23fi] {
        width: 34px;
        height: 34px;
        margin: 0;
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-agent-layer[b-evb8pt23fi]::before,
    .ai-worker-robot[b-evb8pt23fi],
    .ai-agent-chat-shell[b-evb8pt23fi],
    .ai-thinking-dots i[b-evb8pt23fi] {
        animation: none;
    }
}
.ai-candidate-dialog[b-evb8pt23fi] {
    max-width: 560px;
}

.ai-candidate-list[b-evb8pt23fi] {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.ai-candidate-option[b-evb8pt23fi] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid #d8e1ec;
    border-radius: 8px;
    background: #fff;
    color: #203047;
    text-align: left;
}

.ai-candidate-option:hover[b-evb8pt23fi],
.ai-candidate-option:focus-visible[b-evb8pt23fi] {
    border-color: #159fca;
    background: #f4fbfe;
}

.ai-candidate-option span:last-child[b-evb8pt23fi],
.ai-candidate-option strong[b-evb8pt23fi],
.ai-candidate-option small[b-evb8pt23fi] { display: block; }
.ai-candidate-option small[b-evb8pt23fi] { color: #66758b; margin-top: 2px; }
.ai-candidate-option-icon[b-evb8pt23fi] { color: #159fca; }
.ai-workflow-memory[b-evb8pt23fi],
.ai-secure-slot[b-evb8pt23fi] {
    margin: 0 1rem .75rem;
    padding: .75rem;
    border: 1px solid rgba(14, 165, 233, .22);
    background: rgba(248, 250, 252, .96);
    border-radius: 8px;
}

.ai-workflow-memory > div:first-child[b-evb8pt23fi],
.ai-secure-slot > div:first-child[b-evb8pt23fi] {
    display: flex;
    gap: .55rem;
    align-items: center;
}

.ai-workflow-memory span[b-evb8pt23fi],
.ai-secure-slot small[b-evb8pt23fi] {
    color: #64748b;
    font-size: .72rem;
}

.ai-workflow-memory strong[b-evb8pt23fi],
.ai-secure-slot strong[b-evb8pt23fi] {
    display: block;
    color: #172033;
    font-size: .82rem;
}

.ai-workflow-memory-meta[b-evb8pt23fi] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .8rem;
    margin-top: .55rem;
}

.ai-workflow-memory-meta .state[b-evb8pt23fi] {
    color: #0369a1;
    font-weight: 700;
}

.ai-secure-slot-entry[b-evb8pt23fi] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .5rem;
    margin-top: .65rem;
}

.ai-voice-strip[b-evb8pt23fi] {
    margin: 0 14px 10px;
    padding: 10px;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    background: #f0f9ff;
}

.ai-voice-strip.listening[b-evb8pt23fi] {
    border-color: #67e8f9;
    background: #ecfeff;
}

.ai-voice-strip.waitingconfirmation[b-evb8pt23fi],
.ai-voice-strip.waitingapproval[b-evb8pt23fi] {
    border-color: #fbbf24;
    background: #fffbeb;
}

.ai-voice-strip-header[b-evb8pt23fi],
.ai-voice-strip-header > div[b-evb8pt23fi],
.ai-voice-strip-actions[b-evb8pt23fi],
.ai-voice-alternatives[b-evb8pt23fi] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-voice-strip-header[b-evb8pt23fi] { justify-content: space-between; }
.ai-voice-strip-header i[b-evb8pt23fi] { color: #0284c7; }
.ai-voice-strip-header span[b-evb8pt23fi] { color: #172033; font-size: .8rem; font-weight: 800; }
.ai-voice-strip-header small[b-evb8pt23fi] { color: #64748b; font-size: .68rem; }
.ai-agent-icon-btn.danger[b-evb8pt23fi] { color: #b91c1c; border-color: #fecaca; }
.ai-agent-icon-btn.active[b-evb8pt23fi] { color: #0369a1; background: #e0f2fe; border-color: #7dd3fc; }

.ai-voice-transcript[b-evb8pt23fi] {
    display: grid;
    gap: 3px;
    margin-top: 9px;
    padding: 8px;
    border-radius: 6px;
    background: #fff;
}

.ai-voice-transcript span[b-evb8pt23fi],
.ai-voice-preview span[b-evb8pt23fi],
.ai-voice-uncertain > span[b-evb8pt23fi] { color: #64748b; font-size: .68rem; font-weight: 700; text-transform: uppercase; }
.ai-voice-transcript strong[b-evb8pt23fi] { color: #172033; font-size: .85rem; line-height: 1.45; }
.ai-voice-transcript.interim strong[b-evb8pt23fi] { color: #475569; font-style: italic; font-weight: 600; }

.ai-voice-preview[b-evb8pt23fi] {
    display: grid;
    gap: 5px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #dbeafe;
}

.ai-voice-preview > div[b-evb8pt23fi] { display: grid; gap: 2px; }
.ai-voice-preview strong[b-evb8pt23fi] { color: #0f172a; font-size: .8rem; }
.ai-voice-preview small[b-evb8pt23fi] { color: #475569; font-size: .72rem; }

.ai-voice-unsupported[b-evb8pt23fi] {
    margin: 0 14px 10px;
    padding: 9px 10px;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    color: #9a3412;
    background: #fff7ed;
    font-size: .75rem;
}

.ai-voice-uncertain[b-evb8pt23fi] {
    display: grid;
    gap: 7px;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
}

.ai-voice-uncertain > strong[b-evb8pt23fi] { color: #713f12; }
.ai-voice-alternatives[b-evb8pt23fi] { flex-wrap: wrap; }

@media (max-width: 820px) {
    .ai-agent-fab[b-evb8pt23fi] { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 52px; height: 52px; }
    .ai-voice-strip[b-evb8pt23fi] { position: sticky; bottom: 0; z-index: 4; margin: 0 8px 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 22px rgba(15, 23, 42, .08); }
    .ai-voice-strip .ai-agent-icon-btn[b-evb8pt23fi] { min-width: 44px; min-height: 44px; }
    .ai-voice-alternatives .btn[b-evb8pt23fi] { min-height: 44px; }
}
/* /Components/Custom/Alert.razor.rz.scp.css */
.loading-container[b-fl7y63qr57] {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 12%);
    backdrop-filter: blur(4px);
    z-index: 1000001;
}

/* From Uiverse.io by 00Kubi */
.notifications-container[b-fl7y63qr57] {
    width: 320px;
    height: auto;
    font-size: 0.875rem;
    line-height: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    animation: slideIn-b-fl7y63qr57 0.4s ease-out;
}

.flex[b-fl7y63qr57] {
    display: flex;
}

.flex-shrink-0[b-fl7y63qr57] {
    flex-shrink: 0;
}

.success[b-fl7y63qr57] {
    padding: 1.25rem;
    border-radius: 0.75rem;
    background-color: rgb(240 253 244);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid rgba(74, 222, 128, 0.2);
}

    .success:hover[b-fl7y63qr57] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }

.success-svg[b-fl7y63qr57] {
    color: rgb(74 222 128);
    width: 1.5rem;
    height: 1.5rem;
    filter: drop-shadow(0 0 8px rgba(74, 222, 128, 0.4));
    animation: pulse-b-fl7y63qr57 2s infinite;
}

.success-prompt-wrap[b-fl7y63qr57] {
    margin-left: 1rem;
}

.success-prompt-heading[b-fl7y63qr57] {
    font-weight: 700;
    color: rgb(22 101 52);
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkmark[b-fl7y63qr57] {
    color: rgb(74 222 128);
    animation: scaleCheck-b-fl7y63qr57 0.3s ease-in-out;
}

.success-prompt-prompt[b-fl7y63qr57] {
    margin-top: 0.75rem;
    color: rgb(21 128 61);
    line-height: 1.5;
}

.success-button-container[b-fl7y63qr57] {
    display: flex;
    margin-top: 1rem;
    gap: 0.75rem;
}

.success-button-main[b-fl7y63qr57] {
    padding: 0.5rem 1rem;
    background-color: rgb(22 101 52);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(22, 101, 52, 0.2);
}

    .success-button-main:hover[b-fl7y63qr57] {
        background-color: rgb(21 128 61);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(22, 101, 52, 0.3);
    }

.success-button-secondary[b-fl7y63qr57] {
    padding: 0.5rem 1rem;
    background-color: rgb(240 253 244);
    color: rgb(22 101 52);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: 1px solid rgba(22, 101, 52, 0.2);
    transition: all 0.2s ease;
}

    .success-button-secondary:hover[b-fl7y63qr57] {
        background-color: rgb(220, 243, 234);
        border-color: rgba(22, 101, 52, 0.3);
        transform: translateY(-1px);
    }

@keyframes slideIn-b-fl7y63qr57 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-b-fl7y63qr57 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes scaleCheck-b-fl7y63qr57 {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* Dodajemy efekt ripple dla przycisków */
.success-button-main:active[b-fl7y63qr57],
.success-button-secondary:active[b-fl7y63qr57] {
    transform: scale(0.95);
}
/* /Components/Custom/Loading.razor.rz.scp.css */
.loading-container[b-p8jgcv0kpx] {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 12%);
    backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1000000;
    flex-direction: column;
}
/* From Uiverse.io by Praashoo7 */
.loader[b-p8jgcv0kpx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.heading[b-p8jgcv0kpx] {
    color: black;
    letter-spacing: 0.2em;
    margin-bottom: 1em;
}

.loading[b-p8jgcv0kpx] {
    display: flex;
    width: 5em;
    align-items: center;
    justify-content: center;
}

.load[b-p8jgcv0kpx] {
    width: 23px;
    height: 3px;
    background-color: limegreen;
    animation: 1s move_5011-b-p8jgcv0kpx infinite;
    border-radius: 5px;
    margin: 0.1em;
}

    .load:nth-child(1)[b-p8jgcv0kpx] {
        animation-delay: 0.2s;
    }

    .load:nth-child(2)[b-p8jgcv0kpx] {
        animation-delay: 0.4s;
    }

    .load:nth-child(3)[b-p8jgcv0kpx] {
        animation-delay: 0.6s;
    }

@keyframes move_5011-b-p8jgcv0kpx {
    0% {
        width: 0.2em;
    }

    25% {
        width: 0.7em;
    }

    50% {
        width: 1.5em;
    }

    100% {
        width: 0.2em;
    }
}
/* /Components/Custom/Modal.razor.rz.scp.css */
/* Modal Styles */
.modal[b-r5vuai796p] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}

.modal-backdrop[b-r5vuai796p] {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100vw;
    height: 100vh;
    background: rgb(0 0 0 / 12%);
    backdrop-filter: blur(4px);
    opacity: 0.5;
}

.modal-overlay[b-r5vuai796p] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: start;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn 0.3s ease;
    overflow: scroll;
    padding: 10px 0px;
}

.modal-container[b-r5vuai796p] {
    position: relative;
    width: auto;
    margin: 0.75rem auto;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 0.3rem;
    outline: 0;
    z-index: 1051;
    max-width: 700px;
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-container[b-r5vuai796p] {
    width: 600px;
    max-width: 90vw;
}

.modal-full-width[b-r5vuai796p] {
    width: 95vw !important;
    max-width: 95vw !important;
}

.modal-header[b-r5vuai796p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}

.modal-title[b-r5vuai796p] {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 1.25rem;
}

.modal-close-btn[b-r5vuai796p] {
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
    background-color: transparent;
    border: 0;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    opacity: 0.5;
    cursor: pointer;
}

    .modal-close-btn:hover[b-r5vuai796p] {
        opacity: 0.75;
    }

.modal-body[b-r5vuai796p] {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
}

.modal-footer[b-r5vuai796p] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 1px solid #dee2e6;
    border-bottom-right-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
    gap: 0.5rem;
}

.btn[b-r5vuai796p] {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    cursor: pointer;
}

.btn-primary[b-r5vuai796p] {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.btn-secondary[b-r5vuai796p] {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}

.btn-info[b-r5vuai796p] {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.modal .show[b-r5vuai796p] {
    display: block;
}

@media (min-width: 576px) {
    .modal-container[b-r5vuai796p] {
        max-width: 500px;
        margin: 1.75rem auto;
    }
}
/* /Components/Custom/NoPermissionUI.razor.rz.scp.css */
/* Subtle bounce animation for the icon */
.fa-shield-lock[b-ii6d8zoum3] {
    animation: lock-wobble-b-ii6d8zoum3 3s infinite ease-in-out;
}

@keyframes lock-wobble-b-ii6d8zoum3 {
    0%, 100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }
}

body[b-ii6d8zoum3] {
    background-color: #f8f9fa;
}
/* /Components/Custom/PoweredByAIIntro.razor.rz.scp.css */
.powered-ai-intro[b-drg6bv50ek] {
    position: relative;
    min-height: 100dvh;
    overflow: hidden;
    color: #f8fafc;
    background:
        radial-gradient(circle at 69% 43%, rgba(25, 91, 255, 0.16), transparent 31%),
        radial-gradient(circle at 85% 92%, rgba(94, 45, 255, 0.13), transparent 25%),
        #030817;
    font-family: Inter, "Plus Jakarta Sans", "Segoe UI", sans-serif;
}

.powered-ai-intro[b-drg6bv50ek]::before {
    position: absolute;
    inset: 88px 0 0;
    content: "";
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(75, 125, 255, 0.2) 0 1px, transparent 1.5px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, transparent, #000 26%, transparent 86%);
    opacity: 0.32;
}

.powered-ai-header[b-drg6bv50ek] {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 88px;
    padding: 0 clamp(28px, 4vw, 68px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.powered-ai-brand[b-drg6bv50ek] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 850;
}

.powered-ai-brand-mark[b-drg6bv50ek] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 1px solid rgba(99, 102, 241, 0.6);
    border-radius: 8px;
    background: rgba(67, 56, 202, 0.16);
}

.powered-ai-brand-mark img[b-drg6bv50ek] {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.powered-ai-sign-in[b-drg6bv50ek] {
    min-height: 42px;
    padding: 0 18px;
    border: 1px solid rgba(125, 211, 252, 0.32);
    border-radius: 8px;
    color: #e8edf8;
    background: rgba(15, 23, 42, 0.4);
    font-weight: 750;
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.powered-ai-sign-in:hover[b-drg6bv50ek] {
    border-color: rgba(96, 165, 250, 0.75);
    background: rgba(37, 99, 235, 0.18);
    transform: translateY(-1px);
}

.powered-ai-hero[b-drg6bv50ek] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(410px, 0.72fr) minmax(680px, 1.28fr);
    align-items: center;
    gap: clamp(28px, 4vw, 70px);
    width: min(1540px, calc(100vw - 64px));
    min-height: calc(100dvh - 88px);
    margin: 0 auto;
    padding: 38px 0 46px;
}

.powered-ai-copy[b-drg6bv50ek] {
    position: relative;
    z-index: 8;
    align-self: center;
    max-width: 590px;
    padding-left: clamp(0px, 2vw, 28px);
}

.powered-ai-eyebrow[b-drg6bv50ek] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 34px;
    padding: 10px 16px;
    border: 1px solid rgba(45, 176, 255, 0.72);
    border-radius: 999px;
    color: #bfe8ff;
    background: rgba(25, 82, 174, 0.14);
    box-shadow: 0 0 28px rgba(59, 130, 246, 0.16);
    font-size: 0.88rem;
    font-weight: 800;
    opacity: 0;
    transform: translateY(12px);
    animation: aiFadeUp-b-drg6bv50ek 620ms ease 100ms forwards;
}

.powered-ai-eyebrow i[b-drg6bv50ek] {
    color: #9edfff;
}

.powered-ai-title[b-drg6bv50ek] {
    display: grid;
    gap: 4px;
    margin: 0;
    color: #f8fafc;
    font-size: clamp(3rem, 4.25vw, 4.55rem);
    line-height: 1.04;
    font-weight: 900;
    letter-spacing: 0;
}

.powered-ai-title > span[b-drg6bv50ek],
.powered-ai-title > strong[b-drg6bv50ek] {
    opacity: 0;
    transform: translateY(18px);
    animation: aiFadeUp-b-drg6bv50ek 680ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.powered-ai-title > span:first-child[b-drg6bv50ek] { animation-delay: 220ms; }
.powered-ai-title > span:nth-child(2)[b-drg6bv50ek] { animation-delay: 300ms; }
.powered-ai-title > strong[b-drg6bv50ek] { animation-delay: 380ms; }

.powered-ai-title strong[b-drg6bv50ek] {
    color: transparent;
    background: linear-gradient(100deg, #28baf4, #477cff 52%, #b14cff);
    background-clip: text;
    -webkit-background-clip: text;
}

.powered-ai-subtitle[b-drg6bv50ek] {
    max-width: 550px;
    margin: 30px 0 0;
    color: #adb9cf;
    font-size: 1rem;
    line-height: 1.72;
    opacity: 0;
    transform: translateY(14px);
    animation: aiFadeUp-b-drg6bv50ek 660ms ease 520ms forwards;
}

.powered-ai-primary[b-drg6bv50ek] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 60px;
    margin-top: 36px;
    padding: 0 31px;
    border: 1px solid rgba(125, 211, 252, 0.78);
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(100deg, #5d39dd, #286de8 72%, #159ef4);
    box-shadow: 0 0 0 2px rgba(91, 66, 255, 0.22), 0 0 28px rgba(53, 105, 255, 0.42);
    font-size: 0.98rem;
    font-weight: 850;
    cursor: pointer;
    opacity: 0;
    transform: translateY(14px);
    animation: aiFadeUp-b-drg6bv50ek 660ms ease 650ms forwards;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.powered-ai-primary i[b-drg6bv50ek] { transition: transform 180ms ease; }
.powered-ai-primary:hover[b-drg6bv50ek] { transform: translateY(-2px); box-shadow: 0 0 0 2px rgba(91, 66, 255, 0.3), 0 0 38px rgba(53, 105, 255, 0.58); }
.powered-ai-primary:hover i[b-drg6bv50ek] { transform: translateX(4px); }

.powered-ai-primary:focus-visible[b-drg6bv50ek],
.powered-ai-sign-in:focus-visible[b-drg6bv50ek] {
    outline: 3px solid rgba(125, 211, 252, 0.78);
    outline-offset: 4px;
}

.powered-ai-trust[b-drg6bv50ek] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 47px;
    opacity: 0;
    animation: aiFadeIn-b-drg6bv50ek 680ms ease 820ms forwards;
}

.powered-ai-trust-item[b-drg6bv50ek] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}

.powered-ai-trust-item > span[b-drg6bv50ek] {
    display: grid;
    place-items: center;
    flex: 0 0 34px;
    height: 34px;
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 50%;
    color: #8b7dff;
    background: rgba(45, 69, 150, 0.18);
}

.powered-ai-trust-item div[b-drg6bv50ek] { min-width: 0; }
.powered-ai-trust-item strong[b-drg6bv50ek] { display: block; color: #eef2ff; font-size: 0.72rem; line-height: 1.3; }
.powered-ai-trust-item small[b-drg6bv50ek] { display: block; margin-top: 5px; color: #8491aa; font-size: 0.66rem; line-height: 1.35; }

.powered-ai-stage[b-drg6bv50ek] {
    position: relative;
    min-height: 700px;
    opacity: 0;
    animation: aiFadeIn-b-drg6bv50ek 800ms ease 420ms forwards;
}

.powered-ai-stage-grid[b-drg6bv50ek] {
    position: absolute;
    right: -11%;
    bottom: -6%;
    width: 108%;
    height: 43%;
    background-image:
        linear-gradient(rgba(56, 116, 255, 0.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 116, 255, 0.16) 1px, transparent 1px);
    background-size: 42px 42px;
    transform: perspective(500px) rotateX(62deg);
    transform-origin: center bottom;
    mask-image: radial-gradient(ellipse at center, #000 12%, transparent 72%);
}

.powered-ai-orb-halo[b-drg6bv50ek] {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 49%;
    width: 430px;
    height: 430px;
    border-radius: 50%;
    background: rgba(34, 109, 255, 0.13);
    box-shadow: 0 0 110px 34px rgba(36, 91, 255, 0.22);
    transform: translate(-50%, -50%);
    animation: aiHaloPulse-b-drg6bv50ek 4.2s ease-in-out infinite;
}

.powered-ai-orb[b-drg6bv50ek] {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 49%;
    width: min(520px, 61%);
    height: auto;
    filter: drop-shadow(0 0 28px rgba(56, 112, 255, 0.62));
    transform: translate(-50%, -50%);
    animation: aiOrbFloat-b-drg6bv50ek 5.5s ease-in-out infinite;
}

.powered-ai-orb img[b-drg6bv50ek] {
    display: block;
    width: 100%;
    height: auto;
}

.ai-preview[b-drg6bv50ek] {
    position: absolute;
    z-index: 6;
    padding: 17px 19px;
    border: 1px solid rgba(80, 113, 255, 0.58);
    border-radius: 8px;
    color: #eaf0ff;
    background: linear-gradient(145deg, rgba(15, 32, 78, 0.88), rgba(7, 18, 48, 0.82));
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    opacity: 0;
    transform: translateY(16px);
    animation: aiCardIn-b-drg6bv50ek 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.ai-preview[b-drg6bv50ek]::after {
    position: absolute;
    top: 50%;
    width: 54px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, rgba(80, 125, 255, 0.2), #6ecbff);
    box-shadow: 0 0 8px #4c8cff;
}

.ai-preview-heading[b-drg6bv50ek] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #eef2ff;
    font-size: 0.78rem;
}

.ai-preview-heading > i:first-child[b-drg6bv50ek] { color: #b9c8ff; }
.ai-preview-heading strong[b-drg6bv50ek] { font-weight: 850; }
.ai-preview-heading small[b-drg6bv50ek] { margin-left: auto; color: #7f8aa8; font-size: 0.59rem; }
.ai-success[b-drg6bv50ek] { margin-left: auto; color: #34d399 !important; }

.ai-preview-summary[b-drg6bv50ek] { top: 95px; left: 0; width: 245px; animation-delay: 760ms; }
.ai-preview-summary[b-drg6bv50ek]::after,
.ai-preview-attendance[b-drg6bv50ek]::after { left: 100%; }
.ai-preview-workflow[b-drg6bv50ek] { top: 0; left: 41%; width: 300px; animation-delay: 850ms; }
.ai-preview-workflow[b-drg6bv50ek]::after { top: 100%; left: 42%; width: 1px; height: 45px; background: linear-gradient(rgba(80, 125, 255, 0.2), #6ecbff); }
.ai-preview-invoice[b-drg6bv50ek] { top: 138px; right: 0; width: 215px; animation-delay: 940ms; }
.ai-preview-invoice[b-drg6bv50ek]::after,
.ai-preview-forecast[b-drg6bv50ek]::after { right: 100%; transform: rotate(180deg); }
.ai-preview-attendance[b-drg6bv50ek] { top: 330px; left: -3%; width: 215px; animation-delay: 1030ms; }
.ai-preview-forecast[b-drg6bv50ek] { top: 345px; right: 1%; width: 225px; animation-delay: 1120ms; }
.ai-preview-signals[b-drg6bv50ek] { left: 20%; bottom: 0; width: 470px; animation-delay: 1210ms; }
.ai-preview-signals[b-drg6bv50ek]::after { left: 50%; bottom: 100%; top: auto; width: 1px; height: 45px; background: linear-gradient(rgba(80, 125, 255, 0.2), #6ecbff); }

.ai-summary-list[b-drg6bv50ek] { display: grid; gap: 10px; margin: 16px 0 0; }
.ai-summary-list div[b-drg6bv50ek] { display: flex; justify-content: space-between; gap: 12px; }
.ai-summary-list dt[b-drg6bv50ek] { color: #aeb9d0; font-size: 0.68rem; font-weight: 500; }
.ai-summary-list dd[b-drg6bv50ek] { margin: 0; color: #eef2ff; font-size: 0.7rem; font-weight: 800; }

.ai-workflow-row[b-drg6bv50ek] { margin-top: 14px; }
.ai-workflow-row span[b-drg6bv50ek] { display: flex; justify-content: space-between; gap: 12px; font-size: 0.66rem; }
.ai-workflow-row b[b-drg6bv50ek] { font-weight: 650; }
.ai-workflow-row em[b-drg6bv50ek] { color: #d4dcf0; font-style: normal; }
.ai-workflow-row > i[b-drg6bv50ek] { position: relative; display: block; height: 5px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: rgba(46, 66, 123, 0.52); }
.ai-workflow-row > i[b-drg6bv50ek]::before { position: absolute; inset: 0 auto 0 0; width: var(--progress); border-radius: inherit; content: ""; background: linear-gradient(90deg, #603cff, #36b8ff); }

.ai-preview-invoice p[b-drg6bv50ek] { margin: 16px 0 10px; color: #c6d0e5; font-size: 0.72rem; line-height: 1.55; }
.ai-preview-invoice p b[b-drg6bv50ek] { color: #f4f7ff; }
.ai-ready[b-drg6bv50ek] { color: #43d3a0; font-size: 0.65rem; }

.ai-metric[b-drg6bv50ek] { margin-top: 16px; color: #f0f5ff; font-size: 1.7rem; font-weight: 850; }
.ai-preview-attendance > small[b-drg6bv50ek],
.ai-preview-forecast > small[b-drg6bv50ek] { color: #8995ad; font-size: 0.62rem; }
.ai-mini-bars[b-drg6bv50ek] { display: flex; align-items: end; gap: 11px; height: 52px; margin-top: 12px; }
.ai-mini-bars i[b-drg6bv50ek] { flex: 1; height: 42%; border-radius: 999px 999px 2px 2px; background: linear-gradient(#34c6ff, #6438ed); }
.ai-mini-bars i:nth-child(2)[b-drg6bv50ek] { height: 31%; }
.ai-mini-bars i:nth-child(3)[b-drg6bv50ek] { height: 53%; }
.ai-mini-bars i:nth-child(4)[b-drg6bv50ek] { height: 68%; }
.ai-mini-bars i:nth-child(5)[b-drg6bv50ek] { height: 37%; }
.ai-mini-bars i:nth-child(6)[b-drg6bv50ek] { height: 49%; }
.ai-mini-bars i:nth-child(7)[b-drg6bv50ek] { height: 79%; }

.ai-forecast-value[b-drg6bv50ek] { margin-top: 8px; color: #eef4ff; font-size: 1.32rem; font-weight: 850; }
.ai-growth[b-drg6bv50ek] { margin-top: 7px; color: #34d399; font-size: 0.6rem; }
.ai-sparkline[b-drg6bv50ek] { display: flex; align-items: end; gap: 5px; height: 34px; margin-top: 10px; }
.ai-sparkline i[b-drg6bv50ek] { flex: 1; height: 22%; border-top: 2px solid #428dff; transform: translateY(-4px) rotate(-18deg); }
.ai-sparkline i:nth-child(2)[b-drg6bv50ek] { height: 42%; transform: rotate(14deg); }
.ai-sparkline i:nth-child(3)[b-drg6bv50ek] { height: 32%; transform: rotate(-12deg); }
.ai-sparkline i:nth-child(4)[b-drg6bv50ek] { height: 58%; transform: rotate(10deg); }
.ai-sparkline i:nth-child(5)[b-drg6bv50ek] { height: 49%; transform: rotate(-14deg); }
.ai-sparkline i:nth-child(6)[b-drg6bv50ek] { height: 72%; transform: rotate(-8deg); }
.ai-sparkline i:nth-child(7)[b-drg6bv50ek] { height: 86%; transform: rotate(-18deg); }

.ai-signal-grid[b-drg6bv50ek] { display: grid; grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 12px; margin-top: 16px; }
.ai-signal-grid > div[b-drg6bv50ek] { min-width: 0; padding-right: 10px; border-right: 1px solid rgba(105, 126, 184, 0.2); }
.ai-signal-grid > div:last-child[b-drg6bv50ek] { border: 0; padding: 0; }
.ai-signal-grid small[b-drg6bv50ek] { display: block; color: #8995ad; font-size: 0.58rem; white-space: nowrap; }
.ai-signal-grid b[b-drg6bv50ek] { display: block; margin-top: 6px; color: #8f44ff; font-size: 1.35rem; }
.ai-signal-grid > div:nth-child(2) b[b-drg6bv50ek] { color: #25aaf7; }
.ai-signal-grid > div:nth-child(3) b[b-drg6bv50ek] { color: #3c65ff; }
.ai-signal-line[b-drg6bv50ek] { display: flex; align-items: end; gap: 4px; }
.ai-signal-line i[b-drg6bv50ek] { flex: 1; height: 25%; border-top: 2px solid #24b7ff; transform: rotate(-24deg); }
.ai-signal-line i:nth-child(2)[b-drg6bv50ek] { height: 45%; transform: rotate(12deg); }
.ai-signal-line i:nth-child(3)[b-drg6bv50ek] { height: 38%; transform: rotate(-18deg); }
.ai-signal-line i:nth-child(4)[b-drg6bv50ek] { height: 72%; transform: rotate(-25deg); }

@keyframes aiFadeUp-b-drg6bv50ek { to { opacity: 1; transform: translateY(0); } }
@keyframes aiFadeIn-b-drg6bv50ek { to { opacity: 1; } }
@keyframes aiCardIn-b-drg6bv50ek { to { opacity: 1; transform: translateY(0); } }
@keyframes aiHaloPulse-b-drg6bv50ek { 50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes aiOrbFloat-b-drg6bv50ek { 50% { transform: translate(-50%, calc(-50% - 8px)); } }

@media (max-width: 1280px) {
    .powered-ai-hero[b-drg6bv50ek] { grid-template-columns: minmax(380px, 0.72fr) minmax(600px, 1.18fr); width: min(1200px, calc(100vw - 44px)); gap: 18px; }
    .powered-ai-stage[b-drg6bv50ek] { transform: scale(0.88); transform-origin: center; }
    .powered-ai-title[b-drg6bv50ek] { font-size: clamp(2.75rem, 4.2vw, 4rem); }
    .powered-ai-trust-item small[b-drg6bv50ek] { display: none; }
}

@media (max-width: 980px) {
    .powered-ai-intro[b-drg6bv50ek] { overflow-y: auto; }
    .powered-ai-hero[b-drg6bv50ek] { grid-template-columns: 1fr; width: min(100% - 40px, 760px); padding-top: 58px; }
    .powered-ai-copy[b-drg6bv50ek] { max-width: 650px; padding: 0; }
    .powered-ai-stage[b-drg6bv50ek] { min-height: 650px; margin-top: 12px; transform: none; }
    .powered-ai-trust[b-drg6bv50ek] { max-width: 560px; }
    .ai-preview-summary[b-drg6bv50ek] { left: 2%; }
    .ai-preview-attendance[b-drg6bv50ek] { left: 0; }
}

@media (max-width: 620px) {
    .powered-ai-header[b-drg6bv50ek] { height: 72px; padding: 0 18px; }
    .powered-ai-brand[b-drg6bv50ek] { font-size: 1rem; }
    .powered-ai-brand-mark[b-drg6bv50ek] { width: 34px; height: 34px; }
    .powered-ai-brand-mark img[b-drg6bv50ek] { width: 27px; height: 27px; }
    .powered-ai-sign-in[b-drg6bv50ek] { min-height: 38px; padding: 0 14px; }
    .powered-ai-hero[b-drg6bv50ek] { width: min(100% - 28px, 480px); min-height: calc(100dvh - 72px); padding: 38px 0 28px; }
    .powered-ai-eyebrow[b-drg6bv50ek] { margin-bottom: 23px; padding: 8px 12px; font-size: 0.76rem; }
    .powered-ai-title[b-drg6bv50ek] { font-size: clamp(2.35rem, 12vw, 3.3rem); }
    .powered-ai-subtitle[b-drg6bv50ek] { margin-top: 22px; font-size: 0.92rem; line-height: 1.62; }
    .powered-ai-primary[b-drg6bv50ek] { width: 100%; min-height: 55px; margin-top: 27px; }
    .powered-ai-trust[b-drg6bv50ek] { gap: 8px; margin-top: 34px; }
    .powered-ai-trust-item[b-drg6bv50ek] { justify-content: center; }
    .powered-ai-trust-item > span[b-drg6bv50ek] { flex-basis: 32px; height: 32px; }
    .powered-ai-trust-item div[b-drg6bv50ek] { display: none; }
    .powered-ai-stage[b-drg6bv50ek] { min-height: 510px; margin-top: 0; }
    .powered-ai-stage-grid[b-drg6bv50ek] { bottom: 1%; }
    .powered-ai-orb-halo[b-drg6bv50ek] { top: 51%; width: 300px; height: 300px; }
    .powered-ai-orb[b-drg6bv50ek] { top: 51%; width: 84%; }
    .ai-preview[b-drg6bv50ek] { padding: 13px; }
    .ai-preview-summary[b-drg6bv50ek],
    .ai-preview-forecast[b-drg6bv50ek],
    .ai-preview-signals[b-drg6bv50ek] { display: none; }
    .ai-preview-workflow[b-drg6bv50ek] { top: 0; left: 2%; width: 64%; }
    .ai-preview-invoice[b-drg6bv50ek] { top: 112px; right: 0; width: 48%; }
    .ai-preview-attendance[b-drg6bv50ek] { top: auto; bottom: 0; left: 0; width: 49%; }
    .ai-preview[b-drg6bv50ek]::after { display: none; }
    .ai-workflow-row[b-drg6bv50ek] { margin-top: 10px; }
    .ai-preview-invoice p[b-drg6bv50ek] { margin-top: 11px; }
    .ai-mini-bars[b-drg6bv50ek] { gap: 7px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .powered-ai-eyebrow[b-drg6bv50ek],
    .powered-ai-title > span[b-drg6bv50ek],
    .powered-ai-title > strong[b-drg6bv50ek],
    .powered-ai-subtitle[b-drg6bv50ek],
    .powered-ai-primary[b-drg6bv50ek],
    .powered-ai-trust[b-drg6bv50ek],
    .powered-ai-stage[b-drg6bv50ek],
    .ai-preview[b-drg6bv50ek] {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .powered-ai-orb[b-drg6bv50ek],
    .powered-ai-orb-halo[b-drg6bv50ek] {
        animation: none;
    }

    .powered-ai-primary[b-drg6bv50ek],
    .powered-ai-primary i[b-drg6bv50ek],
    .powered-ai-sign-in[b-drg6bv50ek] {
        transition: none;
    }
}
/* /Components/Custom/RichTextEditor.razor.rz.scp.css */
.rich-text-editor-shell[b-gcyq6zvvrv] {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.45);
    box-shadow: inset 0 0 40px rgba(255,255,255,.18), 0 12px 28px rgba(14,165,233,.08);
}

.rich-text-toolbar[b-gcyq6zvvrv] {
    background: rgba(255, 255, 255, 0.72);
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.62);
}

.rich-attach-bar[b-gcyq6zvvrv] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.62);
    border-bottom: 1px solid rgba(255, 255, 255, 0.58);
}

.rich-attach-button[b-gcyq6zvvrv] {
    font-size: 12px;
    font-weight: 600;
}

.rich-attach-note[b-gcyq6zvvrv] {
    font-size: 12px;
    color: #64748b;
}

.rich-attach-error[b-gcyq6zvvrv] {
    font-size: 12px;
    color: #dc2626;
    font-weight: 600;
}

.rich-text-editor-shell[b-gcyq6zvvrv] (.ql-toolbar.ql-snow) {
    border: 0;
}

.rich-text-editor-shell[b-gcyq6zvvrv] (.ql-container.ql-snow) {
    border: 0;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.48);
}

.rich-text-editor-shell[b-gcyq6zvvrv] (.ql-editor) {
    min-height: 360px;
    color: #1f2937;
    line-height: 1.65;
    padding: 22px;
}

.rich-text-editor-shell[b-gcyq6zvvrv] (.ql-editor img) {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px 0;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.16);
}

.rich-text-editor-shell[b-gcyq6zvvrv] (.ql-editor a.rte-attachment-link) {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgba(14, 165, 233, 0.12);
    color: #0369a1;
    font-weight: 700;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.rich-text-readonly[b-gcyq6zvvrv] {
    box-shadow: none;
}

.rich-text-readonly[b-gcyq6zvvrv] (.ql-container.ql-snow) {
    background: rgba(255,255,255,.72);
}

.rich-text-readonly[b-gcyq6zvvrv] (.ql-editor) {
    min-height: 520px;
}

@media print {
    .rich-text-editor-shell[b-gcyq6zvvrv] {
        border: 0;
        border-radius: 0;
        background: white;
        box-shadow: none;
    }

    .rich-text-editor-shell[b-gcyq6zvvrv] (.ql-container.ql-snow) {
        background: white;
    }

    .rich-text-editor-shell[b-gcyq6zvvrv] (.ql-editor) {
        padding: 0;
        min-height: auto;
    }

    .rich-text-editor-shell[b-gcyq6zvvrv] (.ql-editor img),
    .rich-text-editor-shell[b-gcyq6zvvrv] (.ql-editor a.rte-attachment-link) {
        box-shadow: none;
    }
}
/* /Components/Custom/SnackBar.razor.rz.scp.css */
/* From Uiverse.io by revanth-004 */
/* COMMON STYLES*/
.popup[b-h9g169air6] {
    margin: 10px;
    box-shadow: 4px 4px 10px -10px rgba(0, 0, 0, 1);
    width: 300px;
    justify-content: space-around;
    align-items: center;
    display: flex;
    border-radius: 4px;
    padding: 5px 0;
    font-weight: 300;
}

    .popup svg[b-h9g169air6] {
        width: 1.25rem;
        height: 1.25rem;
    }

.popup-icon svg[b-h9g169air6] {
    margin: 5px;
    display: flex;
    align-items: center;
}

.close-icon[b-h9g169air6] {
    margin-left: auto;
}

.close-svg[b-h9g169air6] {
    cursor: pointer;
}

.close-path[b-h9g169air6] {
    fill: grey;
}

/*SEPERATE STYLES*/

/* SUCCESS */
.success-popup[b-h9g169air6] {
    background-color: #edfbd8;
    border: solid 1px #84d65a;
}

.success-icon path[b-h9g169air6] {
    fill: #84d65a;
}

.success-message[b-h9g169air6] {
    color: #2b641e;
}

/* ALERT */
.alert-popup[b-h9g169air6] {
    background-color: #fefce8;
    border: solid 1px #facc15;
}

.alert-icon path[b-h9g169air6] {
    fill: #facc15;
}

.alert-message[b-h9g169air6] {
    color: #ca8a04;
}

/* ERROR */

.error-popup[b-h9g169air6] {
    background-color: #fef2f2;
    border: solid 1px #f87171;
}

.error-icon path[b-h9g169air6] {
    fill: #f87171;
}

.error-message[b-h9g169air6] {
    color: #991b1b;
}

/* INFO */

.info-popup[b-h9g169air6] {
    background-color: #eff6ff;
    border: solid 1px #1d4ed8;
}

.info-icon path[b-h9g169air6] {
    fill: #1d4ed8;
}

.info-message[b-h9g169air6] {
    color: #1d4ed8;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app[b-oo9id7g35g] {
    min-height: 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 6px;
    padding: 8px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(48, 205, 255, 0.35), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(255, 139, 190, 0.26), transparent 28%),
        linear-gradient(135deg, #eef8ff 0%, #e8f5ff 42%, #f7efff 100%);
    isolation: isolate;
}

    .app[b-oo9id7g35g]::before {
        content: "";
        position: absolute;
        inset: 8px;
        /*border-radius: 34px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.54);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 24px 70px rgba(58, 112, 150, 0.16);
        */

        backdrop-filter: blur(18px) saturate(145%);
        -webkit-backdrop-filter: blur(18px) saturate(145%);
        pointer-events: none;
        z-index: -3;
    }

.app-aurora[b-oo9id7g35g],
.app-noise[b-oo9id7g35g] {
    position: absolute;
    pointer-events: none;
}

.app-aurora[b-oo9id7g35g] {
    width: 34vw;
    aspect-ratio: 1;
    border-radius: 999px;
    filter: blur(34px);
    opacity: 0.42;
    z-index: -2;
    animation: auroraDrift-b-oo9id7g35g 14s ease-in-out infinite alternate;
}

.app-aurora-cyan[b-oo9id7g35g] {
    left: 9%;
    top: 10%;
    background: #35cfff;
}

.app-aurora-rose[b-oo9id7g35g] {
    right: 4%;
    top: 3%;
    background: #ff7ab6;
    animation-delay: -5s;
}

.app-aurora-ice[b-oo9id7g35g] {
    right: 18%;
    bottom: -10%;
    background: #a8eaff;
    animation-delay: -9s;
}

.app-noise[b-oo9id7g35g] {
    inset: 0;
    opacity: 0.28;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.24) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.28), transparent 62%);
}

.app-menu[b-oo9id7g35g] {
    position: relative;
    z-index: 20;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 4px;
    padding: 7px 5px;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(245, 252, 255, 0.72), rgba(215, 246, 255, 0.58));
    border: 1px solid rgba(255, 255, 255, 0.74);
    box-shadow: 0 24px 64px rgba(48, 95, 126, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px) saturate(125%);
    -webkit-backdrop-filter: blur(12px) saturate(125%);
    animation: menuFloatIn-b-oo9id7g35g 0.55s ease-out both;
    overflow: visible;
    scrollbar-width: thin;
    scrollbar-color: rgba(24, 174, 231, 0.32) transparent;
}

.app-menu[b-oo9id7g35g]::-webkit-scrollbar {
    width: 4px;
}

.app-menu[b-oo9id7g35g]::-webkit-scrollbar-track {
    background: transparent;
}

.app-menu[b-oo9id7g35g]::-webkit-scrollbar-thumb {
    background: rgba(24, 174, 231, 0.28);
    border-radius: 999px;
}

.app.menu-expanded[b-oo9id7g35g] {
    grid-template-columns: 172px minmax(0, 1fr);
}

.app-content[b-oo9id7g35g] {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.app-body[b-oo9id7g35g] {
    overflow: hidden;
}

.menu-btn[b-oo9id7g35g],
.logo-btn[b-oo9id7g35g] {
    padding: 0;
    border-radius: 12px;
    width: 38px;
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.34);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease;
    outline: none !important;
    color: #24384a;
    box-shadow: 0 10px 22px rgba(62, 117, 154, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
}

.menu-btn[b-oo9id7g35g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    flex: 0 0 auto;
}

.logo-btn[b-oo9id7g35g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: 40px;
    border-radius: 13px;
    color: #0c7196;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(212, 244, 255, 0.48));
}

.logo-btn p[b-oo9id7g35g] {
    font-size: 7px;
    letter-spacing: 0;
    line-height: 1;
}

.menu-btn i[b-oo9id7g35g] {
    display: block;
    font-size: 12px;
    margin-bottom: 0;
    flex: 0 0 auto;
}

.menu-label[b-oo9id7g35g] {
    display: none;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
}

.brand-label[b-oo9id7g35g] {
    color: #0c7196;
}

.app.menu-expanded .app-menu[b-oo9id7g35g] {
    align-items: stretch;
    padding: 8px;
}

.app.menu-expanded .menu-item-wrapper[b-oo9id7g35g] {
    width: 100%;
}

.app.menu-expanded .menu-btn[b-oo9id7g35g],
.app.menu-expanded .logo-btn[b-oo9id7g35g] {
    width: 100%;
    aspect-ratio: auto;
    min-height: 38px;
    justify-content: flex-start;
    gap: 10px;
    padding: 0 10px;
    border-radius: 13px;
}

.app.menu-expanded .logo-btn[b-oo9id7g35g] {
    min-height: 44px;
}

.app.menu-expanded .menu-btn i[b-oo9id7g35g] {
    width: 18px;
    text-align: center;
}

.app.menu-expanded .menu-label[b-oo9id7g35g] {
    display: inline-block;
}

.app.menu-expanded .profile-image-menu[b-oo9id7g35g] {
    flex: 0 0 auto;
}

.app.menu-expanded .menu-toggle-btn[b-oo9id7g35g] {
    color: #0c7196;
    background: rgba(14, 165, 233, 0.12);
}

.app.menu-mini .menu-btn[b-oo9id7g35g],
.app.menu-mini .logo-btn[b-oo9id7g35g] {
    justify-content: center;
}

.app.menu-mini .logo-btn[b-oo9id7g35g] {
    padding: 0;
}

.menu-btn:hover[b-oo9id7g35g],
.floating-submenu .list-group-item:hover:not(.active)[b-oo9id7g35g] {
    transform: translateY(-2px) scale(1.03);
    background: linear-gradient(135deg, var(--brand-main), var(--brand-rose));
    color: white;
    box-shadow: 0 14px 30px rgba(23, 166, 221, 0.28);
}

.selected-menu[b-oo9id7g35g] {
    background: linear-gradient(135deg, var(--brand-main), var(--brand-rose));
    color: white !important;
    box-shadow: 0 16px 34px rgba(23, 166, 221, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.selected-menu i[b-oo9id7g35g],
.selected-menu div[b-oo9id7g35g],
.selected-menu span[b-oo9id7g35g] {
    color: white !important;
}

#blazor-error-ui[b-oo9id7g35g] {
    color-scheme: light only;
    background: rgba(255, 250, 205, 0.92);
    bottom: 0;
    box-shadow: 0 -1px 20px rgba(58, 112, 150, 0.16);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    backdrop-filter: blur(14px);
}

#blazor-error-ui .dismiss[b-oo9id7g35g] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.cbadge[b-oo9id7g35g] {
    background: var(--brand-rose);
    width: 10px;
    height: 10px;
    float: right;
    position: fixed;
    margin-left: 20px;
    border-radius: 10px;
    box-shadow: 0 0 0 4px rgba(255, 127, 182, 0.18), 0 8px 14px rgba(255, 127, 182, 0.4);
}

.app.menu-expanded .cbadge[b-oo9id7g35g] {
    margin-left: 12px;
}

.profile-image-menu[b-oo9id7g35g] {
    width: 24px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 8px 20px rgba(23, 166, 221, 0.2);
}

.menu-item-wrapper[b-oo9id7g35g] {
    position: relative;
    display: flex;
    justify-content: center;
}

.floating-submenu[b-oo9id7g35g] {
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, rgba(248, 253, 255, 0.96), rgba(229, 248, 255, 0.92));
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 20px;
    min-width: 196px;
    max-height: calc(100dvh - 24px);
    z-index: 1050;
    overflow: hidden;
    box-shadow:
        8px 14px 34px rgba(47, 100, 135, 0.24),
        inset 0 0 130px rgba(24, 174, 231, 0.06),
        inset 0 0 4px 2px rgba(255, 255, 255, 0.22);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    animation: fadeInMenu-b-oo9id7g35g 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.app.menu-expanded .floating-submenu[b-oo9id7g35g] {
    left: 166px;
    min-width: 230px;
}

.floating-submenu-long[b-oo9id7g35g] {
    position: fixed;
    left: 66px;
    top: 12px;
    bottom: 12px;
    width: min(280px, calc(100vw - 84px));
    min-width: 238px;
    max-height: calc(100dvh - 24px);
    transform: none;
    animation-name: fadeInLongMenu-b-oo9id7g35g;
}

.app.menu-expanded .floating-submenu-long[b-oo9id7g35g] {
    left: 188px;
    width: min(300px, calc(100vw - 210px));
    min-width: 260px;
}

.floating-submenu[b-oo9id7g35g]::before,
.floating-submenu[b-oo9id7g35g]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

.floating-submenu[b-oo9id7g35g]::before {
    background: linear-gradient(to left top, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 52%);
}

.floating-submenu[b-oo9id7g35g]::after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 100%);
}

.floating-submenu > *[b-oo9id7g35g] {
    position: relative;
    z-index: 2;
}

.submenu-list[b-oo9id7g35g] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(24, 174, 231, 0.36) transparent;
}

.submenu-list[b-oo9id7g35g]::-webkit-scrollbar {
    width: 8px;
}

.submenu-list[b-oo9id7g35g]::-webkit-scrollbar-track {
    background: transparent;
}

.submenu-list[b-oo9id7g35g]::-webkit-scrollbar-thumb {
    background: rgba(24, 174, 231, 0.28);
    border-radius: 999px;
    border: 2px solid rgba(248, 253, 255, 0.78);
}

.floating-submenu .list-group-item[b-oo9id7g35g] {
    color: #1f3a4b;
    margin: 1px 0;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.56);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.72);
    transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.floating-submenu .list-group-item.selected-menu[b-oo9id7g35g] {
    background: linear-gradient(135deg, var(--brand-main), var(--brand-rose)) !important;
    color: white !important;
    text-shadow: none;
}

.submenu-header[b-oo9id7g35g] {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: 0.08em;
    color: #6e8798 !important;
    background: rgba(255, 255, 255, 0.5);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.submenu-arrow[b-oo9id7g35g] {
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(246, 253, 255, 0.9);
    border-left: 1px solid rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.72);
    z-index: -1;
}

.floating-submenu-long .submenu-arrow[b-oo9id7g35g] {
    display: none;
}

@keyframes fadeInMenu-b-oo9id7g35g {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-10px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0) scale(1);
    }
}

@keyframes fadeInLongMenu-b-oo9id7g35g {
    from {
        opacity: 0;
        transform: translateX(-10px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes auroraDrift-b-oo9id7g35g {
    from {
        transform: translate3d(-2%, -1%, 0) scale(1);
    }

    to {
        transform: translate3d(4%, 3%, 0) scale(1.12);
    }
}

@keyframes menuFloatIn-b-oo9id7g35g {
    from {
        opacity: 0;
        transform: translateX(-14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 767px) {
    .app[b-oo9id7g35g] {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 5px;
        padding: 6px;
    }

    .app.menu-expanded[b-oo9id7g35g] {
        grid-template-columns: 146px minmax(0, 1fr);
    }

    .app-menu[b-oo9id7g35g] {
        border-radius: 24px;
        padding: 7px 5px;
    }

    .menu-btn[b-oo9id7g35g],
    .logo-btn[b-oo9id7g35g] {
        width: 36px;
        border-radius: 12px;
    }

    .app.menu-expanded .menu-btn[b-oo9id7g35g],
    .app.menu-expanded .logo-btn[b-oo9id7g35g] {
        min-height: 36px;
        padding: 0 8px;
        gap: 8px;
    }

    .floating-submenu[b-oo9id7g35g] {
        left: 44px;
        min-width: 180px;
    }

    .app.menu-expanded .floating-submenu[b-oo9id7g35g] {
        left: 140px;
        min-width: 190px;
    }

    .floating-submenu-long[b-oo9id7g35g] {
        left: 58px;
        top: 8px;
        bottom: 8px;
        width: min(270px, calc(100vw - 70px));
        min-width: min(220px, calc(100vw - 70px));
        max-height: calc(100dvh - 16px);
    }

    .app.menu-expanded .floating-submenu-long[b-oo9id7g35g] {
        left: 152px;
        width: min(270px, calc(100vw - 164px));
        min-width: min(220px, calc(100vw - 164px));
    }
}

/* Premium 2026 command-shell refresh. Kept as overrides so menu logic and routes stay untouched. */
.app[b-oo9id7g35g] {
    grid-template-columns: 68px minmax(0, 1fr);
    gap: 18px;
    padding: 16px 18px 16px 16px;
    background:
        radial-gradient(circle at 7% 7%, rgba(14, 165, 233, 0.28), transparent 28%),
        radial-gradient(circle at 86% 9%, rgba(139, 92, 246, 0.2), transparent 30%),
        radial-gradient(circle at 72% 98%, rgba(239, 71, 111, 0.12), transparent 28%),
        linear-gradient(135deg, #eef8ff 0%, #f8fcff 45%, #f5efff 100%);
}

    .app[b-oo9id7g35g]::before {
        inset: 12px;
        /*border-radius: 38px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.12));
    border-color: rgba(255, 255, 255, 0.66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 28px 80px rgba(23, 55, 90, 0.13);*/
    }

.app.menu-expanded[b-oo9id7g35g] {
    grid-template-columns: 208px minmax(0, 1fr);
}

.app-menu[b-oo9id7g35g] {
    gap: 8px;
    padding: 12px 9px;
    border-radius: 30px;
    color: #dbeafe;
    background:
        radial-gradient(circle at 22% 0%, rgba(14, 165, 233, 0.28), transparent 38%),
        linear-gradient(180deg, rgba(16, 32, 51, 0.98), rgba(5, 18, 34, 0.96));
    border: 1px solid rgba(148, 163, 184, 0.18);
    box-shadow: 0 22px 55px rgba(4, 16, 31, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.menu-btn[b-oo9id7g35g],
.logo-btn[b-oo9id7g35g] {
    width: 46px;
    min-height: 46px;
    border-radius: 17px;
    color: #c7d7e6;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.logo-btn[b-oo9id7g35g] {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.24), rgba(139, 92, 246, 0.18));
    border-color: rgba(14, 165, 233, 0.26);
}

.profile-image-menu[b-oo9id7g35g] {
    width: 28px;
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.32);
}

.brand-label[b-oo9id7g35g],
.menu-label[b-oo9id7g35g] {
    color: inherit;
}

.menu-btn i[b-oo9id7g35g] {
    font-size: 14px;
}

.menu-btn:hover[b-oo9id7g35g],
.floating-submenu .list-group-item:hover:not(.active)[b-oo9id7g35g] {
    color: #ffffff;
    background: rgba(14, 165, 233, 0.18);
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(14, 165, 233, 0.2);
}

.selected-menu[b-oo9id7g35g] {
    color: #ffffff !important;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.95), rgba(3, 105, 161, 0.92)) !important;
    border-color: rgba(125, 211, 252, 0.5) !important;
    box-shadow: 0 16px 40px rgba(14, 165, 233, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.logout-menu-btn[b-oo9id7g35g] {
    color: #fecdd3 !important;
}

.app-content[b-oo9id7g35g] {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.floating-submenu[b-oo9id7g35g] {
    left: 62px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: 0 24px 60px rgba(23, 55, 90, 0.18);
}

.app.menu-expanded .floating-submenu[b-oo9id7g35g] {
    left: 202px;
}

.menu-search-backdrop[b-oo9id7g35g] {
    z-index: 2400;
    background:
        radial-gradient(circle at 24% 18%, rgba(14, 165, 233, 0.22), transparent 34%),
        radial-gradient(circle at 76% 12%, rgba(139, 92, 246, 0.18), transparent 32%),
        rgba(8, 20, 38, 0.34);
    opacity: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.menu-search-modal[b-oo9id7g35g] {
    z-index: 2410;
    display: grid !important;
    place-items: center;
    padding: 20px;
    overflow: hidden;
}

.menu-search-panel[b-oo9id7g35g] {
    width: min(760px, calc(100vw - 40px));
    max-width: none;
    margin: 0;
}

.menu-search-dialog[b-oo9id7g35g] {
    max-height: min(720px, calc(100dvh - 40px));
    min-height: min(420px, calc(100dvh - 40px));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 30px !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(245, 251, 255, 0.92)),
        radial-gradient(circle at 0% 0%, rgba(14, 165, 233, 0.12), transparent 34%),
        radial-gradient(circle at 100% 0%, rgba(139, 92, 246, 0.12), transparent 34%);
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

.menu-search-dialog .modal-header[b-oo9id7g35g] {
    flex: 0 0 auto;
    padding: 22px 24px 10px;
}

.menu-search-dialog .modal-title[b-oo9id7g35g] {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1.25;
}

.menu-search-dialog .modal-header small[b-oo9id7g35g] {
    display: block;
    margin-top: 4px;
    line-height: 1.35;
}

.menu-search-dialog .modal-body[b-oo9id7g35g] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 10px 24px 24px;
    overflow: hidden;
}

.menu-search-input-shell[b-oo9id7g35g] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 9px 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(226, 232, 240, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 14px 34px rgba(15, 23, 42, 0.06);
}

.menu-search-input-shell .form-control[b-oo9id7g35g] {
    min-width: 0;
    color: #0f172a;
}

.menu-search-input-shell .form-control:focus[b-oo9id7g35g] {
    box-shadow: none;
}

.menu-search-results[b-oo9id7g35g] {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 5px 2px 1px;
    scrollbar-width: thin;
    scrollbar-color: rgba(14, 165, 233, 0.34) transparent;
}

.menu-search-results[b-oo9id7g35g]::-webkit-scrollbar {
    width: 6px;
}

.menu-search-results[b-oo9id7g35g]::-webkit-scrollbar-track {
    background: transparent;
}

.menu-search-results[b-oo9id7g35g]::-webkit-scrollbar-thumb {
    background: rgba(14, 165, 233, 0.28);
    border-radius: 999px;
}

.menu-search-result[b-oo9id7g35g] {
    border: 1px solid rgba(226, 232, 240, 0.86);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
    color: #0f172a;
    display: block;
    min-height: 68px;
    padding: 12px 14px !important;
    margin: 0 !important;
    line-height: 1.25;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.menu-search-result:hover[b-oo9id7g35g],
.menu-search-result:focus-visible[b-oo9id7g35g] {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(14, 165, 233, 0.4);
    box-shadow: 0 18px 42px rgba(14, 165, 233, 0.14);
    transform: translateY(-1px);
}

.menu-search-result-inner[b-oo9id7g35g] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    min-height: 42px;
}

.menu-search-result-inner .flex-grow-1[b-oo9id7g35g] {
    min-width: 0;
    display: grid;
    gap: 3px;
    align-content: center;
}

.menu-search-result-inner .fw-bold[b-oo9id7g35g] {
    line-height: 1.2;
    font-size: 0.96rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-search-result-inner .small[b-oo9id7g35g] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
    font-size: 0.78rem;
}

.menu-search-icon[b-oo9id7g35g] {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0ea5e9;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(139, 92, 246, 0.12));
    border: 1px solid rgba(14, 165, 233, 0.16);
    flex: 0 0 auto;
}

@media (max-width: 767px) {
    .app[b-oo9id7g35g] {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .app.menu-expanded[b-oo9id7g35g] {
        grid-template-columns: 162px minmax(0, 1fr);
    }

    .app-menu[b-oo9id7g35g] {
        border-radius: 26px;
        padding: 9px 6px;
    }

    .menu-btn[b-oo9id7g35g],
    .logo-btn[b-oo9id7g35g] {
        width: 42px;
        min-height: 42px;
        border-radius: 15px;
    }

    .floating-submenu[b-oo9id7g35g] {
        left: 54px;
    }

    .app.menu-expanded .floating-submenu[b-oo9id7g35g] {
        left: 156px;
    }

    .menu-search-modal[b-oo9id7g35g] {
        padding: 10px;
        align-items: start;
        padding-top: max(10px, env(safe-area-inset-top));
    }

    .menu-search-panel[b-oo9id7g35g] {
        width: min(100%, calc(100vw - 20px));
    }

    .menu-search-dialog[b-oo9id7g35g] {
        min-height: min(520px, calc(100dvh - 20px));
        max-height: calc(100dvh - 20px);
        border-radius: 24px !important;
    }

    .menu-search-dialog .modal-header[b-oo9id7g35g] {
        padding: 18px 18px 8px;
    }

    .menu-search-dialog .modal-body[b-oo9id7g35g] {
        padding: 8px 18px 18px;
    }

    .menu-search-input-shell[b-oo9id7g35g] {
        align-items: stretch;
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
    }

    .menu-search-input-shell .ps-2[b-oo9id7g35g] {
        padding-left: 0 !important;
    }

    .menu-search-result[b-oo9id7g35g] {
        border-radius: 18px;
        min-height: 64px;
        padding: 11px 12px !important;
    }

    .menu-search-icon[b-oo9id7g35g] {
        width: 38px;
        height: 38px;
        border-radius: 14px;
    }
}
/* /Components/Layout/PortalLayout.razor.rz.scp.css */
#blazor-error-ui[b-dyal5tn7sd] {
    color-scheme: light only;
    background: rgba(255, 250, 205, 0.92);
    bottom: 0;
    box-shadow: 0 -1px 20px rgba(58, 112, 150, 0.16);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    backdrop-filter: blur(14px);
}

    #blazor-error-ui .dismiss[b-dyal5tn7sd] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-wlodcrz2h3],
.components-reconnect-repeated-attempt-visible[b-wlodcrz2h3],
.components-reconnect-failed-visible[b-wlodcrz2h3],
.components-pause-visible[b-wlodcrz2h3],
.components-resume-failed-visible[b-wlodcrz2h3],
.components-rejoining-animation[b-wlodcrz2h3] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-wlodcrz2h3],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-wlodcrz2h3],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-wlodcrz2h3],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-wlodcrz2h3],
#components-reconnect-modal.components-reconnect-retrying[b-wlodcrz2h3],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-wlodcrz2h3],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-wlodcrz2h3],
#components-reconnect-modal.components-reconnect-failed[b-wlodcrz2h3],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-wlodcrz2h3] {
    display: block;
}


#components-reconnect-modal[b-wlodcrz2h3] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-wlodcrz2h3 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-wlodcrz2h3 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-wlodcrz2h3 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-wlodcrz2h3]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-wlodcrz2h3 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-wlodcrz2h3 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-wlodcrz2h3 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-wlodcrz2h3 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-wlodcrz2h3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-wlodcrz2h3] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-wlodcrz2h3] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-wlodcrz2h3] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-wlodcrz2h3] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-wlodcrz2h3] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-wlodcrz2h3] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-wlodcrz2h3 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-wlodcrz2h3] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-wlodcrz2h3 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AcademicYearPage.razor.rz.scp.css */
@keyframes academicRise-b-surdc5shen {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes academicPulse-b-surdc5shen {
    0%, 100% {
        opacity: .46;
    }

    50% {
        opacity: 1;
    }
}

.academic-year-page[b-surdc5shen] {
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 36px;
    color: var(--text-body, #4e6274);
    font-family: "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.academic-year-page[b-surdc5shen]::before,
.academic-year-page[b-surdc5shen]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.academic-year-page[b-surdc5shen]::before {
    width: 34vw;
    min-width: 320px;
    aspect-ratio: 1;
    left: 5%;
    top: 2%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.academic-year-page[b-surdc5shen]::after {
    width: 38vw;
    min-width: 320px;
    aspect-ratio: 1;
    right: 0;
    bottom: -2%;
    background:
        radial-gradient(circle at 36% 34%, rgba(139, 92, 246, .14), transparent 58%),
        radial-gradient(circle at 72% 70%, rgba(236, 72, 153, .12), transparent 58%);
}

.academic-year-shell[b-surdc5shen] {
    display: grid;
    gap: 18px;
    width: min(100%, 1360px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft, 0 18px 45px rgba(23, 55, 90, .08));
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: academicRise-b-surdc5shen .32s ease-out both;
}

.academic-hero[b-surdc5shen],
.academic-summary-card[b-surdc5shen],
.academic-timeline-card[b-surdc5shen],
.academic-list-card[b-surdc5shen] {
    border: 1px solid rgba(255, 255, 255, .76);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-card, 0 10px 26px rgba(23, 55, 90, .07));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.academic-hero[b-surdc5shen] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: 30px;
}

.academic-hero[b-surdc5shen]::after {
    content: "";
    position: absolute;
    right: 36px;
    bottom: -118px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(14, 165, 233, .14), transparent 68%);
    pointer-events: none;
}

.academic-hero-title[b-surdc5shen] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.academic-hero-icon[b-surdc5shen],
.summary-icon[b-surdc5shen],
.academic-modal-icon[b-surdc5shen],
.default-icon[b-surdc5shen] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.academic-hero-icon[b-surdc5shen] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--primary-dark, #0369a1));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .24);
}

.academic-hero h1[b-surdc5shen] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.academic-hero p[b-surdc5shen] {
    margin: 8px 0 0;
    max-width: 680px;
    color: var(--text-muted, #8a9aaa);
    font-size: .95rem;
    line-height: 1.45;
}

.academic-hero-meta[b-surdc5shen] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.academic-hero-meta span[b-surdc5shen],
.year-count-pill[b-surdc5shen],
.active-session-badge[b-surdc5shen],
.session-badge[b-surdc5shen] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    font-size: .76rem;
    font-weight: 850;
    border-radius: 999px;
}

.academic-hero-meta span[b-surdc5shen],
.year-count-pill[b-surdc5shen] {
    color: var(--primary-dark, #0369a1);
    border: 1px solid rgba(14, 165, 233, .13);
    background: rgba(224, 245, 255, .78);
}

.academic-primary-button[b-surdc5shen],
.academic-soft-button[b-surdc5shen] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    font-size: .88rem;
    font-weight: 850;
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.academic-primary-button[b-surdc5shen] {
    position: relative;
    z-index: 1;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--primary-dark, #0369a1)) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .24);
}

.academic-soft-button[b-surdc5shen] {
    color: var(--text-main, #102033) !important;
    border: 1px solid rgba(120, 170, 210, .2) !important;
    background: rgba(255, 255, 255, .7) !important;
    box-shadow: none !important;
}

.academic-summary-grid[b-surdc5shen] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.academic-summary-card[b-surdc5shen] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    min-height: 128px;
    padding: 18px;
    border-radius: 24px;
}

.summary-icon[b-surdc5shen] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    color: var(--primary-dark, #0369a1);
    border-radius: 17px;
    background: rgba(14, 165, 233, .1);
}

.academic-summary-card.current .summary-icon[b-surdc5shen],
.academic-summary-card.status .summary-icon[b-surdc5shen] {
    color: #047857;
    background: rgba(16, 185, 129, .12);
}

.academic-summary-card.duration .summary-icon[b-surdc5shen] {
    color: #6d28d9;
    background: rgba(139, 92, 246, .12);
}

.academic-summary-card.total .summary-icon[b-surdc5shen] {
    color: #be185d;
    background: rgba(236, 72, 153, .11);
}

.summary-label[b-surdc5shen] {
    align-self: end;
    color: var(--text-muted, #8a9aaa);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.academic-summary-card strong[b-surdc5shen] {
    color: var(--text-main, #102033);
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    font-weight: 950;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.academic-summary-card small[b-surdc5shen] {
    color: var(--text-muted, #8a9aaa);
    font-size: .8rem;
}

.academic-summary-card.skeleton span[b-surdc5shen],
.academic-summary-card.skeleton strong[b-surdc5shen],
.academic-summary-card.skeleton small[b-surdc5shen] {
    display: block;
    border-radius: 999px;
    background: #dbeafe;
    animation: academicPulse-b-surdc5shen 1.2s ease-in-out infinite;
}

.academic-summary-card.skeleton span[b-surdc5shen] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    border-radius: 17px;
}

.academic-summary-card.skeleton strong[b-surdc5shen] {
    width: 72%;
    height: 18px;
}

.academic-summary-card.skeleton small[b-surdc5shen] {
    width: 58%;
    height: 12px;
}

.academic-timeline-card[b-surdc5shen],
.academic-list-card[b-surdc5shen] {
    border-radius: 26px;
}

.academic-timeline-card[b-surdc5shen] {
    padding: 20px;
}

.timeline-header[b-surdc5shen],
.academic-card-header[b-surdc5shen] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.timeline-header h2[b-surdc5shen],
.academic-card-header h2[b-surdc5shen],
.academic-modal-header h5[b-surdc5shen] {
    margin: 0;
    color: var(--text-main, #102033);
    font-weight: 900;
    letter-spacing: -.035em;
}

.timeline-header h2[b-surdc5shen],
.academic-card-header h2[b-surdc5shen] {
    font-size: 1.22rem;
}

.timeline-header p[b-surdc5shen],
.academic-card-header p[b-surdc5shen],
.academic-modal-header p[b-surdc5shen] {
    margin: 6px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .88rem;
}

.active-session-badge[b-surdc5shen],
.session-badge.active[b-surdc5shen] {
    color: #047857;
    border: 1px solid rgba(16, 185, 129, .14);
    background: rgba(220, 252, 231, .88);
}

.timeline-track[b-surdc5shen] {
    position: relative;
    height: 12px;
    margin: 20px 0 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(226, 232, 240, .78);
}

.timeline-track span[b-surdc5shen] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--success, #10b981));
    box-shadow: 0 8px 18px rgba(14, 165, 233, .18);
}

.timeline-dates[b-surdc5shen] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted, #8a9aaa);
    font-size: .82rem;
    font-weight: 800;
}

.timeline-dates span[b-surdc5shen] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.academic-list-card[b-surdc5shen] {
    overflow: hidden;
}

.academic-card-header[b-surdc5shen] {
    padding: 20px 22px;
    border-bottom: 1px solid rgba(226, 232, 240, .72);
}

.section-kicker[b-surdc5shen] {
    display: block;
    margin-bottom: 6px;
    color: var(--primary-dark, #0369a1);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.academic-loading-state[b-surdc5shen],
.academic-empty-state[b-surdc5shen] {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    min-height: 320px;
    padding: 32px;
    text-align: center;
}

.academic-loading-state[b-surdc5shen] {
    color: var(--text-muted, #8a9aaa);
    font-weight: 800;
}

.academic-empty-state > span[b-surdc5shen] {
    display: inline-grid;
    place-items: center;
    width: 70px;
    height: 70px;
    color: var(--primary, #0ea5e9);
    font-size: 1.65rem;
    border-radius: 24px;
    background: rgba(224, 245, 255, .88);
}

.academic-empty-state h3[b-surdc5shen] {
    margin: 8px 0 0;
    color: var(--text-main, #102033);
    font-size: 1.25rem;
    font-weight: 900;
}

.academic-empty-state p[b-surdc5shen] {
    margin: 0 0 8px;
    color: var(--text-muted, #8a9aaa);
}

.academic-table-wrap[b-surdc5shen] {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 170, 210, .48) rgba(248, 252, 255, .65);
}

.academic-table-wrap[b-surdc5shen]::-webkit-scrollbar,
.academic-year-page[b-surdc5shen]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.academic-table-wrap[b-surdc5shen]::-webkit-scrollbar-track,
.academic-year-page[b-surdc5shen]::-webkit-scrollbar-track {
    background: rgba(248, 252, 255, .62);
    border-radius: 999px;
}

.academic-table-wrap[b-surdc5shen]::-webkit-scrollbar-thumb,
.academic-year-page[b-surdc5shen]::-webkit-scrollbar-thumb {
    background: rgba(120, 170, 210, .42);
    border-radius: 999px;
}

.academic-year-table[b-surdc5shen] {
    min-width: 860px;
    color: var(--text-body, #4e6274);
    border-collapse: separate;
    border-spacing: 0;
}

.academic-year-table thead[b-surdc5shen] {
    background: rgba(240, 249, 255, .96);
    box-shadow: 0 1px 0 rgba(186, 230, 253, .64);
}

.academic-year-table th[b-surdc5shen] {
    padding: 15px 18px;
    color: var(--text-muted, #8a9aaa);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
    border: 0;
    white-space: nowrap;
}

.academic-year-table td[b-surdc5shen] {
    padding: 16px 18px;
    vertical-align: middle;
    border-color: rgba(226, 232, 240, .72);
    font-size: .9rem;
}

.academic-year-table tbody tr[b-surdc5shen] {
    background: rgba(255, 255, 255, .54);
    transition: background .18s ease, transform .18s ease;
}

.academic-year-pill[b-surdc5shen],
.date-cell[b-surdc5shen],
.session-badge[b-surdc5shen] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.academic-year-pill[b-surdc5shen] {
    min-height: 34px;
    padding: 7px 12px;
    color: var(--primary-dark, #0369a1);
    font-weight: 900;
    border: 1px solid rgba(14, 165, 233, .12);
    border-radius: 999px;
    background: rgba(224, 245, 255, .88);
}

.date-cell[b-surdc5shen] {
    color: var(--text-body, #4e6274);
    font-weight: 800;
}

.date-cell i[b-surdc5shen] {
    color: var(--text-soft, #9aaaba);
}

.session-badge[b-surdc5shen] {
    min-height: 32px;
    padding: 7px 11px;
}

.session-badge.muted[b-surdc5shen] {
    color: var(--text-muted, #8a9aaa);
    border: 1px solid rgba(148, 163, 184, .14);
    background: rgba(241, 245, 249, .82);
}

.academic-actions[b-surdc5shen] {
    display: inline-flex;
    justify-content: flex-end;
    gap: 8px;
}

.academic-icon-button[b-surdc5shen] {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 15px;
    border: 1px solid rgba(14, 165, 233, .16);
    background: rgba(240, 249, 255, .88);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.academic-icon-button.edit[b-surdc5shen] {
    color: var(--primary-dark, #0369a1);
}

.academic-icon-button.delete[b-surdc5shen] {
    color: var(--danger, #ef476f);
    border-color: rgba(239, 71, 111, .16);
    background: rgba(255, 228, 236, .58);
}

.academic-modal-backdrop[b-surdc5shen] {
    background: rgba(11, 38, 58, .18) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.academic-modal-shell[b-surdc5shen] {
    display: grid !important;
    place-items: center;
    padding: 18px;
}

.academic-modal-dialog[b-surdc5shen] {
    width: min(100%, 540px);
    margin: 0;
}

.academic-modal-content[b-surdc5shen] {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 28px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 70px rgba(23, 55, 90, .18);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.academic-modal-header[b-surdc5shen] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 22px;
    border-bottom: 1px solid rgba(226, 232, 240, .72);
    background:
        radial-gradient(circle at 92% 0%, rgba(14, 165, 233, .12), transparent 38%),
        rgba(255, 255, 255, .76);
}

.academic-modal-icon[b-surdc5shen] {
    width: 46px;
    height: 46px;
    color: white;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--primary-dark, #0369a1));
    box-shadow: 0 14px 28px rgba(14, 165, 233, .22);
}

.academic-modal-body[b-surdc5shen] {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.academic-modal-grid[b-surdc5shen] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.academic-field[b-surdc5shen] {
    display: grid;
    gap: 8px;
}

.academic-field label[b-surdc5shen] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: .82rem;
    font-weight: 850;
}

.academic-field em[b-surdc5shen] {
    color: var(--danger, #ef476f);
    font-style: normal;
}

.academic-input[b-surdc5shen] {
    min-height: 46px;
    padding: 10px 14px;
    color: var(--text-main, #102033) !important;
    font-size: .93rem;
    font-weight: 750;
    border: 1px solid rgba(120, 170, 210, .22) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(23, 55, 90, .04) !important;
}

.year-name-input[b-surdc5shen] {
    color: var(--primary-dark, #0369a1) !important;
    font-weight: 900;
    text-align: center;
}

.academic-input:focus[b-surdc5shen] {
    border-color: rgba(14, 165, 233, .72) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12), 0 10px 22px rgba(14, 165, 233, .07) !important;
}

.academic-default-card[b-surdc5shen] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    margin: 0;
    padding: 15px;
    border: 1px solid rgba(16, 185, 129, .14);
    border-radius: 20px;
    background: rgba(220, 252, 231, .44);
}

.default-icon[b-surdc5shen] {
    width: 42px;
    height: 42px;
    color: #047857;
    border-radius: 16px;
    background: rgba(220, 252, 231, .88);
}

.default-copy strong[b-surdc5shen],
.default-copy small[b-surdc5shen] {
    display: block;
}

.default-copy strong[b-surdc5shen] {
    color: var(--text-main, #102033);
    font-size: .92rem;
    font-weight: 900;
}

.default-copy small[b-surdc5shen] {
    margin-top: 3px;
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
}

.academic-switch[b-surdc5shen] {
    display: grid;
    place-items: center;
    min-height: 38px;
    padding: 0;
    margin: 0;
}

.academic-switch .form-check-input[b-surdc5shen] {
    width: 48px;
    height: 27px;
    margin: 0;
    border: 0;
    cursor: pointer;
    background-color: #dbe7f0;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12);
}

.academic-switch .form-check-input:checked[b-surdc5shen] {
    background-color: var(--success, #10b981);
}

.academic-modal-footer[b-surdc5shen] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid rgba(226, 232, 240, .72);
    background: rgba(248, 252, 255, .78);
}

@media (hover: hover) and (pointer: fine) {
    .academic-primary-button:hover[b-surdc5shen],
    .academic-soft-button:hover[b-surdc5shen],
    .academic-icon-button:hover[b-surdc5shen] {
        transform: translateY(-1px);
    }

    .academic-primary-button:hover[b-surdc5shen] {
        box-shadow: 0 20px 40px rgba(14, 165, 233, .32);
    }

    .academic-icon-button.edit:hover[b-surdc5shen] {
        color: white;
        background: var(--primary, #0ea5e9);
        box-shadow: 0 12px 24px rgba(14, 165, 233, .22);
    }

    .academic-icon-button.delete:hover[b-surdc5shen] {
        color: white;
        background: var(--danger, #ef476f);
        box-shadow: 0 12px 24px rgba(239, 71, 111, .18);
    }

    .academic-year-table tbody tr:hover[b-surdc5shen] {
        background: rgba(14, 165, 233, .04);
    }
}

.academic-primary-button:focus-visible[b-surdc5shen],
.academic-soft-button:focus-visible[b-surdc5shen],
.academic-icon-button:focus-visible[b-surdc5shen],
.academic-input:focus-visible[b-surdc5shen],
.academic-switch .form-check-input:focus-visible[b-surdc5shen] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 2px;
}

@media (max-width: 1199.98px) {
    .academic-summary-grid[b-surdc5shen] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .academic-year-page[b-surdc5shen] {
        padding: 18px 10px 26px;
    }

    .academic-year-shell[b-surdc5shen] {
        gap: 14px;
        padding: 12px;
        border-radius: 28px;
    }

    .academic-hero[b-surdc5shen] {
        align-items: stretch;
        flex-direction: column;
        padding: 20px;
        border-radius: 24px;
    }

    .academic-hero-title[b-surdc5shen] {
        align-items: flex-start;
    }

    .academic-hero-icon[b-surdc5shen] {
        width: 52px;
        height: 52px;
        border-radius: 19px;
    }

    .academic-hero h1[b-surdc5shen] {
        font-size: 1.7rem;
    }

    .academic-primary-button[b-surdc5shen],
    .academic-soft-button[b-surdc5shen] {
        width: 100%;
    }

    .academic-summary-grid[b-surdc5shen] {
        grid-template-columns: 1fr;
    }

    .timeline-header[b-surdc5shen],
    .academic-card-header[b-surdc5shen] {
        align-items: stretch;
        flex-direction: column;
    }

    .timeline-dates[b-surdc5shen] {
        display: grid;
    }

    .academic-table-wrap[b-surdc5shen] {
        overflow: visible;
    }

    .academic-year-table[b-surdc5shen],
    .academic-year-table thead[b-surdc5shen],
    .academic-year-table tbody[b-surdc5shen],
    .academic-year-table tr[b-surdc5shen],
    .academic-year-table th[b-surdc5shen],
    .academic-year-table td[b-surdc5shen] {
        display: block;
    }

    .academic-year-table[b-surdc5shen] {
        min-width: 0;
    }

    .academic-year-table thead[b-surdc5shen] {
        display: none;
    }

    .academic-year-table tbody[b-surdc5shen] {
        display: grid;
        gap: 12px;
        padding: 12px;
    }

    .academic-year-table tr[b-surdc5shen] {
        display: grid;
        gap: 10px;
        padding: 16px;
        border: 1px solid rgba(226, 232, 240, .8);
        border-radius: 20px;
        background: rgba(255, 255, 255, .82);
        box-shadow: 0 8px 18px rgba(23, 55, 90, .05);
    }

    .academic-year-table td[b-surdc5shen] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
        border: 0;
        text-align: right !important;
    }

    .academic-year-table td[b-surdc5shen]::before {
        content: attr(data-label);
        color: var(--text-soft, #9aaaba);
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .academic-actions[b-surdc5shen] {
        width: 100%;
    }

    .academic-icon-button[b-surdc5shen] {
        flex: 1 1 0;
        width: auto;
    }

    .academic-modal-grid[b-surdc5shen],
    .academic-default-card[b-surdc5shen] {
        grid-template-columns: 1fr;
    }

    .academic-modal-footer[b-surdc5shen] {
        display: grid;
    }
}

@media (max-width: 430px) {
    .academic-year-page[b-surdc5shen] {
        padding-inline: 8px;
    }

    .academic-hero-title[b-surdc5shen],
    .academic-hero-meta[b-surdc5shen] {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .academic-year-shell[b-surdc5shen],
    .academic-summary-card.skeleton span[b-surdc5shen],
    .academic-summary-card.skeleton strong[b-surdc5shen],
    .academic-summary-card.skeleton small[b-surdc5shen] {
        animation: none !important;
    }

    .academic-primary-button[b-surdc5shen],
    .academic-soft-button[b-surdc5shen],
    .academic-icon-button[b-surdc5shen],
    .academic-year-table tbody tr[b-surdc5shen] {
        transition: none !important;
    }
}
/* /Components/Pages/AccountingSettingsPage.razor.rz.scp.css */
.accounting-settings-page[b-rhc5iab70w] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --surface-soft: rgba(248, 252, 255, 0.78);
    --border-soft: rgba(120, 170, 210, 0.22);
    --border-glass: rgba(255, 255, 255, 0.75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --finance: #f59e0b;
    --finance-soft: #fff7ed;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --asset: #0ea5e9;
    --asset-soft: #e0f5ff;
    --income: #10b981;
    --income-soft: #dcfce7;
    --cogs: #14b8a6;
    --cogs-soft: #ccfbf1;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, 0.08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, 0.07);
    color: var(--text-main);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
}

.accounting-settings-shell[b-rhc5iab70w] {
    position: relative;
    display: grid;
    gap: 18px;
    max-width: 1600px;
    margin: 0 auto;
    min-height: 0;
}

.accounting-settings-shell[b-rhc5iab70w]::before,
.accounting-settings-shell[b-rhc5iab70w]::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 999px;
    filter: blur(14px);
    pointer-events: none;
}

.accounting-settings-shell[b-rhc5iab70w]::before {
    top: 44px;
    left: 24px;
    width: 280px;
    height: 280px;
    background: rgba(14, 165, 233, 0.14);
}

.accounting-settings-shell[b-rhc5iab70w]::after {
    right: 28px;
    bottom: 28px;
    width: 340px;
    height: 340px;
    background: rgba(236, 72, 153, 0.1);
}

.settings-hero[b-rhc5iab70w],
.readiness-card[b-rhc5iab70w],
.readiness-banner[b-rhc5iab70w],
.settings-card[b-rhc5iab70w] {
    border: 1px solid var(--border-glass);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72)),
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.1), transparent 34%),
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.08), transparent 36%);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.settings-hero[b-rhc5iab70w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
}

.hero-main[b-rhc5iab70w],
.hero-actions[b-rhc5iab70w],
.section-title-wrap[b-rhc5iab70w],
.section-actions[b-rhc5iab70w],
.default-tile-head[b-rhc5iab70w],
.item-cell[b-rhc5iab70w],
.payment-method-cell[b-rhc5iab70w],
.save-cell[b-rhc5iab70w],
.mobile-map-head[b-rhc5iab70w] {
    display: flex;
    align-items: center;
}

.hero-main[b-rhc5iab70w] {
    gap: 16px;
}

.hero-icon[b-rhc5iab70w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 22px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #2563eb 54%, #f59e0b);
    box-shadow: 0 18px 36px rgba(14, 165, 233, 0.25);
}

.settings-hero h1[b-rhc5iab70w] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.settings-hero p[b-rhc5iab70w],
.section-title-wrap p[b-rhc5iab70w],
.readiness-banner p[b-rhc5iab70w] {
    margin: 3px 0 0;
    color: var(--text-body);
}

.hero-actions[b-rhc5iab70w] {
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.soft-link-btn[b-rhc5iab70w],
.setup-badge[b-rhc5iab70w],
.primary-btn[b-rhc5iab70w],
.soft-add-btn[b-rhc5iab70w],
.save-icon-btn[b-rhc5iab70w],
.row-save-btn[b-rhc5iab70w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    text-decoration: none;
    font-weight: 850;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.soft-link-btn[b-rhc5iab70w],
.setup-badge[b-rhc5iab70w],
.soft-add-btn[b-rhc5iab70w] {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.72);
}

.soft-link-btn[b-rhc5iab70w],
.soft-add-btn[b-rhc5iab70w] {
    color: var(--primary-dark);
}

.setup-badge[b-rhc5iab70w] {
    color: #7c2d12;
    background: rgba(255, 247, 237, 0.84);
}

.primary-btn[b-rhc5iab70w],
.row-save-btn[b-rhc5iab70w] {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #2563eb 55%, #8b5cf6);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.24);
}

.soft-link-btn:hover[b-rhc5iab70w],
.primary-btn:hover[b-rhc5iab70w],
.soft-add-btn:hover[b-rhc5iab70w],
.save-icon-btn:hover[b-rhc5iab70w],
.row-save-btn:hover[b-rhc5iab70w] {
    transform: translateY(-1px);
}

.readiness-grid[b-rhc5iab70w] {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 12px;
}

.readiness-card[b-rhc5iab70w] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 128px;
    padding: 18px;
    border-radius: var(--radius-lg);
}

.card-icon[b-rhc5iab70w],
.section-icon[b-rhc5iab70w],
.banner-icon[b-rhc5iab70w],
.row-icon[b-rhc5iab70w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.card-icon[b-rhc5iab70w] {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.12);
}

.readiness-card.defaults .card-icon[b-rhc5iab70w],
.readiness-card.status .card-icon[b-rhc5iab70w] {
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
}

.readiness-card.items .card-icon[b-rhc5iab70w] {
    background: linear-gradient(135deg, #10b981, #14b8a6);
}

.readiness-card.missing .card-icon[b-rhc5iab70w] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.readiness-card.payments .card-icon[b-rhc5iab70w],
.readiness-card.cash .card-icon[b-rhc5iab70w] {
    background: linear-gradient(135deg, #06b6d4, #2563eb);
}

.readiness-card span[b-rhc5iab70w],
.default-tile-head small[b-rhc5iab70w],
.mobile-field > span[b-rhc5iab70w] {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.readiness-card strong[b-rhc5iab70w] {
    display: block;
    margin-top: 4px;
    font-size: 1.55rem;
    font-weight: 950;
    line-height: 1;
    letter-spacing: -0.04em;
}

.readiness-card small[b-rhc5iab70w] {
    display: block;
    margin-top: 6px;
    color: var(--text-body);
}

.readiness-banner[b-rhc5iab70w] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
}

.banner-icon[b-rhc5iab70w] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: #fff;
}

.readiness-banner.ready .banner-icon[b-rhc5iab70w] {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.readiness-banner.warning .banner-icon[b-rhc5iab70w] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.readiness-banner.danger .banner-icon[b-rhc5iab70w] {
    background: linear-gradient(135deg, #ef476f, #f43f5e);
}

.readiness-banner strong[b-rhc5iab70w] {
    font-weight: 900;
}

.settings-card[b-rhc5iab70w] {
    border-radius: 28px;
    padding: 20px;
    overflow: hidden;
}

.section-head[b-rhc5iab70w] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.section-title-wrap[b-rhc5iab70w] {
    gap: 12px;
}

.section-icon[b-rhc5iab70w] {
    width: 44px;
    height: 44px;
    border-radius: 17px;
    color: #0369a1;
    background: var(--primary-soft);
}

.section-icon.income[b-rhc5iab70w] {
    color: #047857;
    background: var(--income-soft);
}

.section-icon.asset[b-rhc5iab70w] {
    color: #0369a1;
    background: var(--asset-soft);
}

.section-title-wrap h2[b-rhc5iab70w] {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.section-title-wrap p[b-rhc5iab70w] {
    font-size: 0.86rem;
}

.section-actions[b-rhc5iab70w] {
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.section-actions.chips-only[b-rhc5iab70w] {
    padding-top: 4px;
}

.count-chip[b-rhc5iab70w],
.warning-chip[b-rhc5iab70w],
.status-chip[b-rhc5iab70w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 850;
    white-space: nowrap;
}

.count-chip[b-rhc5iab70w] {
    padding: 7px 11px;
    color: #0369a1;
    background: var(--primary-soft);
}

.warning-chip[b-rhc5iab70w] {
    padding: 7px 11px;
    color: #b45309;
    background: var(--warning-soft);
}

.default-grid[b-rhc5iab70w] {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
}

.default-tile[b-rhc5iab70w] {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(120, 170, 210, 0.18);
    box-shadow: var(--shadow-card);
}

.default-tile-head[b-rhc5iab70w] {
    gap: 10px;
}

.default-icon[b-rhc5iab70w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.default-tile.income .default-icon[b-rhc5iab70w] {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.default-tile.expense .default-icon[b-rhc5iab70w],
.default-tile.cogs .default-icon[b-rhc5iab70w] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.default-tile.equity .default-icon[b-rhc5iab70w] {
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
}

.default-tile-head strong[b-rhc5iab70w] {
    display: block;
    font-weight: 900;
}

.account-select[b-rhc5iab70w],
.mapping-input[b-rhc5iab70w] {
    width: 100%;
    min-height: 46px;
    border-radius: 16px;
    border: 1px solid rgba(120, 170, 210, 0.26);
    color: var(--text-main);
    background-color: rgba(255, 255, 255, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-size: 0.92rem;
    font-weight: 750;
    outline: 0;
}

.account-select[b-rhc5iab70w] {
    padding: 0 38px 0 13px;
    font-variant-numeric: tabular-nums;
}

.account-select.inline[b-rhc5iab70w] {
    min-width: 210px;
}

.mapping-input[b-rhc5iab70w] {
    padding: 0 13px;
}

.account-select:focus[b-rhc5iab70w],
.mapping-input:focus[b-rhc5iab70w] {
    border-color: rgba(14, 165, 233, 0.68);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.account-select.missing[b-rhc5iab70w],
.warning-select[b-rhc5iab70w] {
    border-color: rgba(245, 158, 11, 0.42);
    background-color: rgba(255, 247, 237, 0.9);
}

.income-select[b-rhc5iab70w] {
    background-color: rgba(220, 252, 231, 0.48);
}

.cogs-select[b-rhc5iab70w] {
    background-color: rgba(204, 251, 241, 0.52);
}

.asset-select[b-rhc5iab70w] {
    background-color: rgba(224, 245, 255, 0.58);
}

.helper-note[b-rhc5iab70w] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 13px 15px;
    border-radius: 18px;
    color: #0369a1;
    background: rgba(224, 245, 255, 0.72);
    font-size: 0.88rem;
    font-weight: 700;
}

.helper-note.payment[b-rhc5iab70w] {
    margin: 0 0 14px;
}

.mapping-workspace[b-rhc5iab70w] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 18px;
    align-items: start;
}

.mapping-card[b-rhc5iab70w] {
    padding: 0;
}

.mapping-card .section-head[b-rhc5iab70w] {
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(120, 170, 210, 0.16);
}

.mapping-card .helper-note[b-rhc5iab70w] {
    margin: 14px 18px 0;
}

.mapping-table-wrap[b-rhc5iab70w] {
    overflow-x: auto;
}

.mapping-table[b-rhc5iab70w] {
    width: 100%;
    min-width: 670px;
    border-collapse: separate;
    border-spacing: 0;
}

.payment-table .mapping-table[b-rhc5iab70w] {
    min-width: 560px;
}

.mapping-table th[b-rhc5iab70w] {
    padding: 13px 18px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.66), rgba(255, 247, 237, 0.5));
}

.mapping-table td[b-rhc5iab70w] {
    padding: 14px 18px;
    border-top: 1px solid rgba(120, 170, 210, 0.15);
    vertical-align: middle;
}

.mapping-table tbody tr[b-rhc5iab70w] {
    transition: background 0.18s ease;
}

.mapping-table tbody tr:hover[b-rhc5iab70w] {
    background: rgba(14, 165, 233, 0.04);
}

.item-cell[b-rhc5iab70w],
.payment-method-cell[b-rhc5iab70w] {
    gap: 11px;
}

.payment-method-cell[b-rhc5iab70w] {
    min-width: 220px;
}

.row-icon[b-rhc5iab70w] {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    color: #fff;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.row-icon.books[b-rhc5iab70w],
.row-icon.tuition[b-rhc5iab70w] {
    background: linear-gradient(135deg, #10b981, #14b8a6);
}

.row-icon.bus[b-rhc5iab70w],
.row-icon.hostel[b-rhc5iab70w] {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.row-icon.uniform[b-rhc5iab70w],
.row-icon.other[b-rhc5iab70w] {
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
}

.row-icon.payment[b-rhc5iab70w] {
    background: linear-gradient(135deg, #06b6d4, #2563eb);
}

.item-cell strong[b-rhc5iab70w],
.mobile-map-head strong[b-rhc5iab70w] {
    display: block;
    font-weight: 900;
}

.item-cell small[b-rhc5iab70w],
.mobile-map-head small[b-rhc5iab70w] {
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.save-cell[b-rhc5iab70w] {
    justify-content: flex-end;
    gap: 8px;
}

.save-icon-btn[b-rhc5iab70w] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
}

.status-chip[b-rhc5iab70w] {
    padding: 7px 10px;
}

.status-chip.complete[b-rhc5iab70w] {
    color: #047857;
    background: var(--success-soft);
}

.status-chip.warning[b-rhc5iab70w] {
    color: #b45309;
    background: var(--warning-soft);
}

.status-chip.danger[b-rhc5iab70w] {
    color: #be123c;
    background: var(--danger-soft);
}

.mobile-mapping-list[b-rhc5iab70w] {
    display: none;
    gap: 12px;
    padding: 14px;
}

.mobile-map-card[b-rhc5iab70w] {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(120, 170, 210, 0.18);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: var(--shadow-card);
}

.mobile-map-head[b-rhc5iab70w] {
    gap: 11px;
}

.mobile-map-head > div[b-rhc5iab70w] {
    flex: 1;
}

.mobile-field[b-rhc5iab70w] {
    display: grid;
    gap: 7px;
}

.row-save-btn[b-rhc5iab70w] {
    width: 100%;
}

.empty-state[b-rhc5iab70w] {
    display: grid;
    place-items: center;
    gap: 7px;
    min-height: 220px;
    padding: 32px 18px;
    color: var(--text-body);
    text-align: center;
}

.empty-state i[b-rhc5iab70w] {
    font-size: 1.8rem;
    color: var(--primary);
}

.empty-state strong[b-rhc5iab70w] {
    color: var(--text-main);
    font-weight: 900;
}

.accounting-settings-page [b-rhc5iab70w]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.accounting-settings-page [b-rhc5iab70w]::-webkit-scrollbar-track {
    background: rgba(224, 245, 255, 0.52);
    border-radius: 999px;
}

.accounting-settings-page [b-rhc5iab70w]::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.34);
    border-radius: 999px;
}

@media (max-width: 1500px) {
    .readiness-grid[b-rhc5iab70w] {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }

    .default-grid[b-rhc5iab70w] {
        grid-template-columns: repeat(3, minmax(190px, 1fr));
    }
}

@media (max-width: 1180px) {
    .mapping-workspace[b-rhc5iab70w] {
        grid-template-columns: 1fr;
    }

    .default-grid[b-rhc5iab70w] {
        grid-template-columns: repeat(2, minmax(190px, 1fr));
    }
}

@media (max-width: 820px) {
    .accounting-settings-page[b-rhc5iab70w] {
        padding-inline: 14px !important;
    }

    .settings-hero[b-rhc5iab70w],
    .section-head[b-rhc5iab70w] {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions[b-rhc5iab70w],
    .section-actions[b-rhc5iab70w] {
        justify-content: flex-start;
    }

    .readiness-grid[b-rhc5iab70w],
    .default-grid[b-rhc5iab70w] {
        grid-template-columns: 1fr;
    }

    .mapping-table-wrap[b-rhc5iab70w] {
        display: none;
    }

    .mobile-mapping-list[b-rhc5iab70w] {
        display: grid;
    }
}

@media (max-width: 560px) {
    .accounting-settings-page[b-rhc5iab70w] {
        padding: 10px !important;
    }

    .settings-hero[b-rhc5iab70w],
    .settings-card[b-rhc5iab70w],
    .readiness-banner[b-rhc5iab70w] {
        border-radius: 22px;
        padding: 16px;
    }

    .mapping-card[b-rhc5iab70w] {
        padding: 0;
    }

    .mapping-card .section-head[b-rhc5iab70w] {
        padding: 16px;
    }

    .hero-main[b-rhc5iab70w],
    .hero-actions[b-rhc5iab70w],
    .section-title-wrap[b-rhc5iab70w],
    .section-actions[b-rhc5iab70w],
    .readiness-banner[b-rhc5iab70w] {
        align-items: stretch;
        flex-direction: column;
    }

    .soft-link-btn[b-rhc5iab70w],
    .soft-add-btn[b-rhc5iab70w],
    .primary-btn[b-rhc5iab70w] {
        width: 100%;
    }
}
/* /Components/Pages/AttendanceEntryPage.razor.rz.scp.css */
@keyframes attendanceRise-b-uo0ltrfiad {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes attendanceSpin-b-uo0ltrfiad {
    to {
        transform: rotate(360deg);
    }
}

.attendance-entry-page[b-uo0ltrfiad] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --present: #10b981;
    --present-soft: #dcfce7;
    --absent: #ef476f;
    --absent-soft: #ffe4ec;
    --leave: #8b5cf6;
    --leave-soft: #ede9fe;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    display: block;
    min-height: 100%;
    overflow-x: hidden;
    padding: 28px 32px 96px;
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    background:
        radial-gradient(circle at 8% 8%, rgba(14, 165, 233, .18), transparent 34%),
        radial-gradient(circle at 88% 6%, rgba(139, 92, 246, .16), transparent 30%),
        radial-gradient(circle at 92% 92%, rgba(236, 72, 153, .12), transparent 32%),
        linear-gradient(135deg, #eef8ff 0%, #f8fbff 46%, #f7f0ff 100%);
}

.attendance-entry-page.mybody[b-uo0ltrfiad] {
    grid-template-rows: unset;
}

.attendance-entry-page[b-uo0ltrfiad]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .46) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .18;
}

.attendance-shell[b-uo0ltrfiad] {
    position: relative;
    z-index: 1;
    width: min(100%, 1600px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
    animation: attendanceRise-b-uo0ltrfiad .42s ease both;
}

.attendance-hero[b-uo0ltrfiad],
.attendance-toolbar-card[b-uo0ltrfiad],
.attendance-calendar-card[b-uo0ltrfiad],
.attendance-day-card[b-uo0ltrfiad],
.attendance-stat-card[b-uo0ltrfiad],
.attendance-empty-state[b-uo0ltrfiad],
.attendance-loading-state[b-uo0ltrfiad] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.attendance-hero[b-uo0ltrfiad] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
}

.attendance-hero[b-uo0ltrfiad]::after {
    content: "";
    position: absolute;
    inset: auto -8% -90% 52%;
    height: 180px;
    background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(139, 92, 246, .16));
    border-radius: 999px;
    filter: blur(8px);
    pointer-events: none;
}

.attendance-hero-copy[b-uo0ltrfiad],
.attendance-toolbar-copy[b-uo0ltrfiad],
.attendance-card-title[b-uo0ltrfiad],
.student-identity[b-uo0ltrfiad],
.student-card-head[b-uo0ltrfiad],
.attendance-action-bar[b-uo0ltrfiad],
.attendance-legend[b-uo0ltrfiad],
.attendance-month-control[b-uo0ltrfiad] {
    display: flex;
    align-items: center;
}

.attendance-hero-copy[b-uo0ltrfiad],
.attendance-card-title[b-uo0ltrfiad],
.student-identity[b-uo0ltrfiad] {
    gap: 14px;
}

.attendance-hero-icon[b-uo0ltrfiad],
.attendance-toolbar-copy > span[b-uo0ltrfiad],
.attendance-card-title > span[b-uo0ltrfiad],
.attendance-stat-card > span[b-uo0ltrfiad],
.attendance-empty-state > span[b-uo0ltrfiad],
.student-avatar[b-uo0ltrfiad] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.attendance-hero-icon[b-uo0ltrfiad] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: #fff;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #0ea5e9, #10b981);
    box-shadow: 0 18px 34px rgba(14, 165, 233, .24);
}

.attendance-hero h1[b-uo0ltrfiad],
.attendance-card-title h2[b-uo0ltrfiad],
.attendance-toolbar-copy h2[b-uo0ltrfiad] {
    margin: 0;
    color: var(--text-main);
    letter-spacing: -.035em;
    font-weight: 850;
}

.attendance-hero h1[b-uo0ltrfiad] {
    font-size: clamp(1.7rem, 2.4vw, 2.25rem);
}

.attendance-hero p[b-uo0ltrfiad],
.attendance-card-title p[b-uo0ltrfiad],
.attendance-toolbar-copy p[b-uo0ltrfiad],
.attendance-month-title span[b-uo0ltrfiad],
.attendance-empty-state p[b-uo0ltrfiad],
.attendance-loading-state p[b-uo0ltrfiad] {
    margin: 0;
    color: var(--text-body);
}

.attendance-history-button[b-uo0ltrfiad],
.attendance-button[b-uo0ltrfiad],
.attendance-icon-button[b-uo0ltrfiad] {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    border-radius: 16px;
    font-size: .9rem;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.attendance-history-button[b-uo0ltrfiad] {
    position: relative;
    z-index: 1;
    padding: 0 18px;
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .26);
    background: rgba(224, 245, 255, .68);
    box-shadow: 0 12px 26px rgba(14, 165, 233, .12);
}

.attendance-history-button:hover[b-uo0ltrfiad],
.attendance-button:hover:not(:disabled)[b-uo0ltrfiad],
.attendance-icon-button:hover[b-uo0ltrfiad] {
    transform: translateY(-1px);
}

.attendance-toolbar-card[b-uo0ltrfiad] {
    display: grid;
    grid-template-columns: minmax(240px, .75fr) minmax(460px, 1.25fr);
    gap: 18px;
    align-items: end;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
}

.attendance-toolbar-copy[b-uo0ltrfiad] {
    gap: 12px;
}

.attendance-toolbar-copy > span[b-uo0ltrfiad],
.attendance-card-title > span[b-uo0ltrfiad] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, rgba(224, 245, 255, .92), rgba(237, 233, 254, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.attendance-toolbar-copy h2[b-uo0ltrfiad],
.attendance-card-title h2[b-uo0ltrfiad] {
    font-size: 1.1rem;
}

.attendance-toolbar-controls[b-uo0ltrfiad] {
    display: grid;
    grid-template-columns: repeat(2, minmax(190px, 1fr)) minmax(150px, auto);
    gap: 14px;
    align-items: end;
}

.attendance-field[b-uo0ltrfiad] {
    display: grid;
    gap: 7px;
}

.attendance-field > span[b-uo0ltrfiad] {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.attendance-select[b-uo0ltrfiad],
.attendance-remark-input[b-uo0ltrfiad] {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(120, 170, 210, .28);
    border-radius: 16px;
    color: var(--text-main);
    font-weight: 750;
    background: rgba(255, 255, 255, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.attendance-select[b-uo0ltrfiad] {
    padding: 0 42px 0 14px;
}

.attendance-remark-input[b-uo0ltrfiad] {
    padding: 0 14px;
    font-weight: 650;
}

.attendance-select:focus[b-uo0ltrfiad],
.attendance-remark-input:focus[b-uo0ltrfiad] {
    outline: none;
    border-color: rgba(14, 165, 233, .56);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
}

.attendance-selected-chip[b-uo0ltrfiad],
.legend-chip[b-uo0ltrfiad],
.attendance-ready-badge[b-uo0ltrfiad],
.student-leave-chip[b-uo0ltrfiad],
.calendar-stat[b-uo0ltrfiad],
.calendar-no-data[b-uo0ltrfiad] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.attendance-selected-chip[b-uo0ltrfiad] {
    min-height: 46px;
    padding: 0 15px;
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .2);
    background: rgba(224, 245, 255, .68);
}

.attendance-summary-grid[b-uo0ltrfiad] {
    display: grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 14px;
}

.attendance-stat-card[b-uo0ltrfiad] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 94px;
    padding: 16px;
    border-radius: 22px;
}

.attendance-stat-card > span[b-uo0ltrfiad] {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 1rem;
}

.attendance-stat-card strong[b-uo0ltrfiad] {
    display: block;
    color: var(--text-main);
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 900;
}

.attendance-stat-card small[b-uo0ltrfiad] {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.attendance-stat-card.present > span[b-uo0ltrfiad] {
    color: #047857;
    background: var(--present-soft);
}

.attendance-stat-card.absent > span[b-uo0ltrfiad] {
    color: #be123c;
    background: var(--absent-soft);
}

.attendance-stat-card.leave > span[b-uo0ltrfiad] {
    color: #6d28d9;
    background: var(--leave-soft);
}

.attendance-stat-card.recorded > span[b-uo0ltrfiad] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.attendance-calendar-card[b-uo0ltrfiad],
.attendance-day-card[b-uo0ltrfiad] {
    overflow: hidden;
    padding: 20px;
    border-radius: var(--radius-xl);
}

.attendance-calendar-header[b-uo0ltrfiad],
.attendance-day-header[b-uo0ltrfiad] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.attendance-month-control[b-uo0ltrfiad] {
    gap: 10px;
}

.attendance-icon-button[b-uo0ltrfiad] {
    width: 42px;
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .22);
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow-card);
}

.attendance-month-title[b-uo0ltrfiad] {
    min-width: 180px;
    display: grid;
    justify-items: center;
    line-height: 1.2;
}

.attendance-month-title strong[b-uo0ltrfiad] {
    color: var(--text-main);
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.attendance-calendar[b-uo0ltrfiad] {
    display: grid;
    grid-template-columns: repeat(7, minmax(118px, 1fr));
    gap: 8px;
    padding: 8px;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(120, 170, 210, .2);
    background: linear-gradient(180deg, rgba(224, 245, 255, .52), rgba(255, 255, 255, .42));
}

.calendar-week-head[b-uo0ltrfiad] {
    min-height: 42px;
    display: grid;
    place-items: center;
    color: #24566b;
    font-size: .82rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: 15px;
    background: rgba(255, 255, 255, .72);
}

.calendar-day[b-uo0ltrfiad] {
    position: relative;
    min-height: 132px;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 18px;
    padding: 13px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    color: var(--text-main);
    background: rgba(255, 255, 255, .66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.calendar-day:hover[b-uo0ltrfiad],
.calendar-day:focus-visible[b-uo0ltrfiad] {
    z-index: 2;
    transform: translateY(-1px);
    border-color: rgba(14, 165, 233, .32);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 16px 32px rgba(43, 108, 143, .12);
    outline: none;
}

.calendar-day.muted[b-uo0ltrfiad] {
    opacity: .5;
}

.calendar-day.today[b-uo0ltrfiad] {
    border-color: rgba(16, 185, 129, .34);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, .12);
}

.calendar-day.selected[b-uo0ltrfiad] {
    border-color: rgba(14, 165, 233, .42);
    background: linear-gradient(180deg, rgba(224, 245, 255, .92), rgba(255, 255, 255, .9));
}

.calendar-recorded-dot[b-uo0ltrfiad] {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--present);
    box-shadow: 0 0 0 5px rgba(16, 185, 129, .12);
}

.day-number[b-uo0ltrfiad] {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 900;
}

.calendar-stat[b-uo0ltrfiad] {
    min-height: 23px;
    padding: 0 9px;
}

.calendar-stat.present[b-uo0ltrfiad] {
    color: #047857;
    background: var(--present-soft);
}

.calendar-stat.absent[b-uo0ltrfiad] {
    color: #be123c;
    background: var(--absent-soft);
}

.calendar-stat.leave[b-uo0ltrfiad] {
    color: #6d28d9;
    background: var(--leave-soft);
}

.calendar-no-data[b-uo0ltrfiad] {
    margin-top: auto;
    min-height: 23px;
    padding: 0 9px;
    color: var(--text-muted);
    background: rgba(241, 245, 249, .78);
}

.attendance-action-bar[b-uo0ltrfiad] {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.attendance-button[b-uo0ltrfiad] {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid transparent;
}

.attendance-button.secondary[b-uo0ltrfiad] {
    color: var(--text-body);
    border-color: rgba(120, 170, 210, .24);
    background: rgba(255, 255, 255, .76);
}

.attendance-button.success[b-uo0ltrfiad] {
    color: #047857;
    border-color: rgba(16, 185, 129, .24);
    background: rgba(220, 252, 231, .82);
}

.attendance-button.danger[b-uo0ltrfiad] {
    color: #be123c;
    border-color: rgba(239, 71, 111, .24);
    background: rgba(255, 228, 236, .78);
}

.attendance-button.primary[b-uo0ltrfiad] {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 14px 28px rgba(14, 165, 233, .22);
}

.attendance-button:disabled[b-uo0ltrfiad] {
    cursor: not-allowed;
    opacity: .52;
    transform: none;
    box-shadow: none;
}

.attendance-legend[b-uo0ltrfiad] {
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 16px;
}

.legend-chip[b-uo0ltrfiad],
.attendance-ready-badge[b-uo0ltrfiad] {
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid transparent;
}

.legend-chip.present[b-uo0ltrfiad] {
    color: #047857;
    background: var(--present-soft);
}

.legend-chip.absent[b-uo0ltrfiad] {
    color: #be123c;
    background: var(--absent-soft);
}

.legend-chip.leave[b-uo0ltrfiad] {
    color: #6d28d9;
    background: var(--leave-soft);
}

.attendance-ready-badge[b-uo0ltrfiad] {
    color: var(--warning);
    border-color: rgba(245, 158, 11, .22);
    background: var(--warning-soft);
}

.attendance-ready-badge.ready[b-uo0ltrfiad] {
    color: #047857;
    border-color: rgba(16, 185, 129, .22);
    background: var(--present-soft);
}

.attendance-table-wrap[b-uo0ltrfiad] {
    max-width: 100%;
    overflow: auto;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 24px;
    background: rgba(255, 255, 255, .62);
}

.attendance-matrix[b-uo0ltrfiad] {
    width: 100%;
    min-width: 820px;
    border-collapse: separate;
    border-spacing: 0;
}

.attendance-matrix th[b-uo0ltrfiad] {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 14px 16px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
    background: rgba(239, 248, 255, .94);
    border-bottom: 1px solid rgba(120, 170, 210, .18);
}

.attendance-matrix td[b-uo0ltrfiad] {
    min-height: 76px;
    padding: 14px 16px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(120, 170, 210, .14);
    background: rgba(255, 255, 255, .6);
}

.attendance-matrix tbody tr:hover td[b-uo0ltrfiad] {
    background: rgba(240, 249, 255, .72);
}

.attendance-matrix .student-col[b-uo0ltrfiad] {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 260px;
    background: rgba(255, 255, 255, .96);
}

.attendance-matrix th.student-col[b-uo0ltrfiad] {
    z-index: 4;
}

.attendance-matrix .period-col[b-uo0ltrfiad] {
    min-width: 150px;
    text-align: center;
}

.attendance-matrix .remark-col[b-uo0ltrfiad] {
    min-width: 220px;
}

.period-heading[b-uo0ltrfiad] {
    display: grid;
    justify-items: center;
    gap: 3px;
    color: var(--text-body);
    text-transform: none;
    letter-spacing: 0;
}

.period-heading span[b-uo0ltrfiad] {
    color: var(--primary-dark);
    font-size: .82rem;
    font-weight: 900;
}

.period-heading strong[b-uo0ltrfiad] {
    color: var(--text-main);
    font-size: .78rem;
    font-weight: 900;
}

.period-heading small[b-uo0ltrfiad] {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 700;
}

.student-avatar[b-uo0ltrfiad] {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    color: #075985;
    font-size: .86rem;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(224, 245, 255, .96), rgba(220, 252, 231, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.student-identity strong[b-uo0ltrfiad] {
    display: block;
    color: var(--text-main);
    font-size: .95rem;
    font-weight: 900;
}

.student-identity small[b-uo0ltrfiad] {
    display: block;
    color: var(--text-muted);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .78rem;
}

.student-identity em[b-uo0ltrfiad] {
    display: inline-flex;
    margin-top: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #6d28d9;
    font-size: .72rem;
    font-style: normal;
    font-weight: 850;
    background: var(--leave-soft);
}

.attendance-control[b-uo0ltrfiad] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 38px;
    min-width: 114px;
    margin: 0;
    padding: 0 11px;
    border: 1px solid rgba(120, 170, 210, .2);
    border-radius: 999px;
    color: var(--text-body);
    font-size: .82rem;
    font-weight: 900;
    background: rgba(255, 255, 255, .8);
    cursor: pointer;
    user-select: none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.attendance-control:hover[b-uo0ltrfiad] {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(23, 55, 90, .08);
}

.attendance-control input[b-uo0ltrfiad] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.attendance-checkmark[b-uo0ltrfiad] {
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(120, 170, 210, .38);
    border-radius: 7px;
    background: rgba(255, 255, 255, .96);
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.attendance-checkmark[b-uo0ltrfiad]::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: rotate(45deg) scale(.72);
    transition: opacity .18s ease, transform .18s ease;
}

.attendance-control.present[b-uo0ltrfiad] {
    color: #047857;
    border-color: rgba(16, 185, 129, .24);
    background: rgba(220, 252, 231, .72);
}

.attendance-control.present .attendance-checkmark[b-uo0ltrfiad] {
    border-color: var(--present);
    background: linear-gradient(135deg, var(--present), #0ea5e9);
    box-shadow: 0 8px 18px rgba(16, 185, 129, .22);
}

.attendance-control.present .attendance-checkmark[b-uo0ltrfiad]::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.attendance-control.absent[b-uo0ltrfiad] {
    color: #be123c;
    border-color: rgba(239, 71, 111, .2);
    background: rgba(255, 228, 236, .58);
}

.attendance-control.leave[b-uo0ltrfiad] {
    color: #6d28d9;
    border-color: rgba(139, 92, 246, .22);
    background: rgba(237, 233, 254, .72);
}

.attendance-control:has(input:focus-visible)[b-uo0ltrfiad] {
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .14);
}

.attendance-mobile-list[b-uo0ltrfiad] {
    display: none;
}

.attendance-student-card[b-uo0ltrfiad] {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 22px;
    background: rgba(255, 255, 255, .76);
    box-shadow: var(--shadow-card);
}

.student-card-head[b-uo0ltrfiad] {
    justify-content: space-between;
    gap: 12px;
}

.student-leave-chip[b-uo0ltrfiad] {
    min-height: 28px;
    padding: 0 10px;
    color: #6d28d9;
    background: var(--leave-soft);
}

.mobile-period-list[b-uo0ltrfiad] {
    display: grid;
    gap: 9px;
}

.mobile-period-list .attendance-control[b-uo0ltrfiad] {
    justify-content: flex-start;
    width: 100%;
    border-radius: 16px;
    min-height: 52px;
}

.mobile-period-meta[b-uo0ltrfiad] {
    display: grid;
    margin-right: auto;
}

.mobile-period-meta strong[b-uo0ltrfiad] {
    color: var(--text-main);
    font-size: .84rem;
}

.mobile-period-meta small[b-uo0ltrfiad] {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 800;
}

.attendance-empty-state[b-uo0ltrfiad],
.attendance-loading-state[b-uo0ltrfiad] {
    display: grid;
    place-items: center;
    min-height: 300px;
    padding: 36px 20px;
    text-align: center;
    border-radius: 24px;
    background: rgba(255, 255, 255, .62);
}

.attendance-empty-state > span[b-uo0ltrfiad] {
    width: 70px;
    height: 70px;
    margin-bottom: 14px;
    border-radius: 24px;
    color: var(--primary-dark);
    font-size: 1.8rem;
    background: linear-gradient(135deg, rgba(224, 245, 255, .96), rgba(237, 233, 254, .9));
}

.attendance-empty-state h3[b-uo0ltrfiad] {
    margin: 0 0 5px;
    color: var(--text-main);
    font-size: 1.15rem;
    font-weight: 900;
}

.attendance-spinner[b-uo0ltrfiad] {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-radius: 50%;
    border: 4px solid rgba(14, 165, 233, .16);
    border-top-color: var(--primary);
    animation: attendanceSpin-b-uo0ltrfiad .85s linear infinite;
}

.attendance-loading-state strong[b-uo0ltrfiad] {
    color: var(--text-main);
    font-weight: 900;
}

.attendance-table-wrap[b-uo0ltrfiad]::-webkit-scrollbar,
.attendance-entry-page[b-uo0ltrfiad]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.attendance-table-wrap[b-uo0ltrfiad]::-webkit-scrollbar-track,
.attendance-entry-page[b-uo0ltrfiad]::-webkit-scrollbar-track {
    background: rgba(226, 236, 246, .48);
    border-radius: 999px;
}

.attendance-table-wrap[b-uo0ltrfiad]::-webkit-scrollbar-thumb,
.attendance-entry-page[b-uo0ltrfiad]::-webkit-scrollbar-thumb {
    border: 2px solid rgba(226, 236, 246, .48);
    border-radius: 999px;
    background: rgba(99, 139, 170, .42);
}

@media (max-width: 1180px) {
    .attendance-toolbar-card[b-uo0ltrfiad] {
        grid-template-columns: 1fr;
    }

    .attendance-toolbar-controls[b-uo0ltrfiad] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .attendance-selected-chip[b-uo0ltrfiad] {
        justify-content: flex-start;
    }

    .attendance-summary-grid[b-uo0ltrfiad] {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }

    .attendance-calendar[b-uo0ltrfiad] {
        grid-template-columns: repeat(7, minmax(104px, 1fr));
        overflow-x: auto;
    }
}

@media (max-width: 820px) {
    .attendance-entry-page[b-uo0ltrfiad] {
        padding: 16px 14px 92px;
    }

    .attendance-hero[b-uo0ltrfiad],
    .attendance-calendar-header[b-uo0ltrfiad],
    .attendance-day-header[b-uo0ltrfiad] {
        align-items: stretch;
        flex-direction: column;
    }

    .attendance-history-button[b-uo0ltrfiad],
    .attendance-button.primary[b-uo0ltrfiad] {
        width: 100%;
    }

    .attendance-action-bar[b-uo0ltrfiad] {
        position: sticky;
        top: 8px;
        z-index: 6;
        justify-content: stretch;
        padding: 10px;
        border: 1px solid rgba(120, 170, 210, .18);
        border-radius: 20px;
        background: rgba(255, 255, 255, .9);
        backdrop-filter: blur(14px);
    }

    .attendance-action-bar .attendance-button[b-uo0ltrfiad] {
        flex: 1 1 160px;
    }

    .attendance-toolbar-controls[b-uo0ltrfiad] {
        grid-template-columns: 1fr;
    }

    .attendance-month-control[b-uo0ltrfiad] {
        justify-content: space-between;
    }

    .attendance-calendar[b-uo0ltrfiad] {
        grid-template-columns: repeat(7, minmax(82px, 1fr));
        gap: 6px;
        padding: 6px;
    }

    .calendar-day[b-uo0ltrfiad] {
        min-height: 96px;
        padding: 9px;
        border-radius: 15px;
    }

    .calendar-stat[b-uo0ltrfiad] {
        min-height: 21px;
        padding: 0 7px;
        font-size: .72rem;
    }

    .calendar-no-data[b-uo0ltrfiad] {
        display: none;
    }

    .attendance-table-wrap[b-uo0ltrfiad] {
        display: none;
    }

    .attendance-mobile-list[b-uo0ltrfiad] {
        display: grid;
        gap: 14px;
    }
}

@media (max-width: 560px) {
    .attendance-entry-page[b-uo0ltrfiad] {
        padding: 12px 10px 84px;
    }

    .attendance-hero[b-uo0ltrfiad],
    .attendance-toolbar-card[b-uo0ltrfiad],
    .attendance-calendar-card[b-uo0ltrfiad],
    .attendance-day-card[b-uo0ltrfiad] {
        border-radius: 22px;
        padding: 16px;
    }

    .attendance-hero-copy[b-uo0ltrfiad],
    .attendance-card-title[b-uo0ltrfiad] {
        align-items: flex-start;
    }

    .attendance-hero-icon[b-uo0ltrfiad] {
        width: 50px;
        height: 50px;
    }

    .attendance-summary-grid[b-uo0ltrfiad] {
        grid-template-columns: 1fr;
    }

    .attendance-stat-card[b-uo0ltrfiad] {
        min-height: 78px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .attendance-shell[b-uo0ltrfiad],
    .attendance-history-button[b-uo0ltrfiad],
    .attendance-button[b-uo0ltrfiad],
    .attendance-icon-button[b-uo0ltrfiad],
    .calendar-day[b-uo0ltrfiad],
    .attendance-control[b-uo0ltrfiad],
    .attendance-spinner[b-uo0ltrfiad] {
        animation: none !important;
        transition: none !important;
    }

    .attendance-history-button:hover[b-uo0ltrfiad],
    .attendance-button:hover:not(:disabled)[b-uo0ltrfiad],
    .attendance-icon-button:hover[b-uo0ltrfiad],
    .calendar-day:hover[b-uo0ltrfiad],
    .attendance-control:hover[b-uo0ltrfiad] {
        transform: none !important;
    }
}
/* /Components/Pages/AttendanceHistoryPage.razor.rz.scp.css */
@keyframes historyRise-b-a72it17fav {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes historySpin-b-a72it17fav {
    to {
        transform: rotate(360deg);
    }
}

.attendance-history-page[b-a72it17fav] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --present: #10b981;
    --present-soft: #dcfce7;
    --absent: #ef476f;
    --absent-soft: #ffe4ec;
    --late: #f59e0b;
    --late-soft: #fff7ed;
    --excused: #8b5cf6;
    --excused-soft: #ede9fe;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    display: block;
    min-height: 100%;
    overflow-x: hidden;
    padding: 28px 32px 96px;
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    background:
        radial-gradient(circle at 8% 8%, rgba(14, 165, 233, .18), transparent 34%),
        radial-gradient(circle at 88% 6%, rgba(139, 92, 246, .16), transparent 30%),
        radial-gradient(circle at 92% 92%, rgba(236, 72, 153, .12), transparent 32%),
        linear-gradient(135deg, #eef8ff 0%, #f8fbff 46%, #f7f0ff 100%);
}

.attendance-history-page.mybody[b-a72it17fav] {
    grid-template-rows: unset;
}

.attendance-history-page[b-a72it17fav]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .46) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .18;
}

.attendance-history-shell[b-a72it17fav] {
    position: relative;
    z-index: 1;
    width: min(100%, 1600px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
    animation: historyRise-b-a72it17fav .42s ease both;
}

.history-hero[b-a72it17fav],
.history-filter-card[b-a72it17fav],
.history-kpi-card[b-a72it17fav],
.history-results-card[b-a72it17fav],
.history-empty-state[b-a72it17fav],
.history-loading-state[b-a72it17fav] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.history-hero[b-a72it17fav] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
}

.history-hero[b-a72it17fav]::after {
    content: "";
    position: absolute;
    inset: auto -8% -90% 52%;
    height: 180px;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(8px);
    background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(139, 92, 246, .16));
}

.history-hero-copy[b-a72it17fav],
.history-card-title[b-a72it17fav],
.history-filter-header[b-a72it17fav],
.history-filter-actions[b-a72it17fav],
.history-results-header[b-a72it17fav],
.history-date-cell[b-a72it17fav],
.history-student-cell[b-a72it17fav],
.history-subject-cell[b-a72it17fav],
.history-mobile-top[b-a72it17fav],
.history-empty-actions[b-a72it17fav] {
    display: flex;
    align-items: center;
}

.history-hero-copy[b-a72it17fav],
.history-card-title[b-a72it17fav],
.history-date-cell[b-a72it17fav],
.history-student-cell[b-a72it17fav],
.history-subject-cell[b-a72it17fav] {
    gap: 14px;
}

.history-hero-icon[b-a72it17fav],
.history-card-title > span[b-a72it17fav],
.history-kpi-card > span[b-a72it17fav],
.history-empty-state > span[b-a72it17fav],
.history-avatar[b-a72it17fav],
.history-date-cell > span[b-a72it17fav],
.history-subject-cell > span[b-a72it17fav] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.history-hero-icon[b-a72it17fav] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: #fff;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 18px 34px rgba(14, 165, 233, .24);
}

.history-hero h1[b-a72it17fav],
.history-card-title h2[b-a72it17fav] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.035em;
}

.history-hero h1[b-a72it17fav] {
    font-size: clamp(1.7rem, 2.4vw, 2.25rem);
}

.history-hero p[b-a72it17fav],
.history-card-title p[b-a72it17fav],
.history-empty-state p[b-a72it17fav],
.history-loading-state p[b-a72it17fav] {
    margin: 0;
    color: var(--text-body);
}

.history-entry-button[b-a72it17fav],
.history-button[b-a72it17fav] {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    border-radius: 16px;
    font-size: .9rem;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.history-entry-button[b-a72it17fav] {
    position: relative;
    z-index: 1;
    padding: 0 18px;
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .26);
    background: rgba(224, 245, 255, .68);
    box-shadow: 0 12px 26px rgba(14, 165, 233, .12);
}

.history-entry-button:hover[b-a72it17fav],
.history-button:hover:not(:disabled)[b-a72it17fav] {
    transform: translateY(-1px);
}

.history-filter-card[b-a72it17fav] {
    display: grid;
    gap: 18px;
    padding: 20px;
    border-radius: var(--radius-lg);
}

.history-filter-header[b-a72it17fav],
.history-results-header[b-a72it17fav] {
    justify-content: space-between;
    gap: 14px;
}

.history-card-title > span[b-a72it17fav] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, rgba(224, 245, 255, .92), rgba(237, 233, 254, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.history-card-title h2[b-a72it17fav] {
    font-size: 1.1rem;
}

.history-date-range-chip[b-a72it17fav],
.history-result-count[b-a72it17fav],
.history-status-pill[b-a72it17fav],
.history-remark[b-a72it17fav],
.history-class-cell span[b-a72it17fav] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.history-date-range-chip[b-a72it17fav],
.history-result-count[b-a72it17fav] {
    min-height: 34px;
    padding: 0 12px;
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .2);
    background: rgba(224, 245, 255, .68);
}

.history-filter-grid[b-a72it17fav] {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 14px;
}

.history-field[b-a72it17fav] {
    display: grid;
    gap: 7px;
}

.history-field > span[b-a72it17fav] {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.history-input[b-a72it17fav] {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(120, 170, 210, .28);
    border-radius: 16px;
    padding: 0 14px;
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 750;
    background: rgba(255, 255, 255, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

select.history-input[b-a72it17fav] {
    padding-right: 38px;
}

.history-input:focus[b-a72it17fav] {
    outline: none;
    border-color: rgba(14, 165, 233, .56);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
}

.history-filter-actions[b-a72it17fav] {
    align-self: end;
    justify-content: flex-end;
    gap: 10px;
}

.history-button[b-a72it17fav] {
    min-width: 118px;
    padding: 0 16px;
    border: 1px solid transparent;
}

.history-button.secondary[b-a72it17fav] {
    color: var(--text-body);
    border-color: rgba(120, 170, 210, .24);
    background: rgba(255, 255, 255, .76);
}

.history-button.primary[b-a72it17fav] {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 14px 28px rgba(14, 165, 233, .22);
}

.history-button:disabled[b-a72it17fav] {
    cursor: not-allowed;
    opacity: .58;
    transform: none;
    box-shadow: none;
}

.history-button-spinner[b-a72it17fav],
.history-loading-spinner[b-a72it17fav] {
    border-radius: 50%;
    border-style: solid;
    animation: historySpin-b-a72it17fav .85s linear infinite;
}

.history-button-spinner[b-a72it17fav] {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, .42);
    border-top-color: #fff;
}

.history-kpi-grid[b-a72it17fav] {
    display: grid;
    grid-template-columns: repeat(5, minmax(150px, 1fr));
    gap: 14px;
}

.history-kpi-card[b-a72it17fav] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 112px;
    padding: 17px;
    border-radius: 22px;
}

.history-kpi-card > span[b-a72it17fav] {
    width: 46px;
    height: 46px;
    border-radius: 16px;
}

.history-kpi-card strong[b-a72it17fav] {
    display: block;
    color: var(--text-main);
    font-size: 1.65rem;
    line-height: 1;
    font-weight: 900;
}

.history-kpi-card small[b-a72it17fav] {
    display: block;
    margin-top: 5px;
    color: var(--text-main);
    font-size: .82rem;
    font-weight: 900;
}

.history-kpi-card em[b-a72it17fav] {
    color: var(--text-muted);
    font-size: .76rem;
    font-style: normal;
    font-weight: 750;
}

.history-kpi-card.total > span[b-a72it17fav] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.history-kpi-card.present > span[b-a72it17fav] {
    color: #047857;
    background: var(--present-soft);
}

.history-kpi-card.absent > span[b-a72it17fav] {
    color: #be123c;
    background: var(--absent-soft);
}

.history-kpi-card.late > span[b-a72it17fav] {
    color: #b45309;
    background: var(--late-soft);
}

.history-kpi-card.excused > span[b-a72it17fav] {
    color: #6d28d9;
    background: var(--excused-soft);
}

.history-results-card[b-a72it17fav] {
    overflow: hidden;
    padding: 20px;
    border-radius: var(--radius-xl);
}

.history-results-header[b-a72it17fav] {
    margin-bottom: 18px;
}

.history-table-wrap[b-a72it17fav] {
    max-width: 100%;
    overflow: auto;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 24px;
    background: rgba(255, 255, 255, .62);
}

.history-table[b-a72it17fav] {
    width: 100%;
    min-width: 920px;
    border-collapse: separate;
    border-spacing: 0;
}

.history-table th[b-a72it17fav] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 15px 18px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    background: rgba(239, 248, 255, .94);
    border-bottom: 1px solid rgba(120, 170, 210, .18);
}

.history-table td[b-a72it17fav] {
    min-height: 76px;
    padding: 15px 18px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(120, 170, 210, .14);
    background: rgba(255, 255, 255, .62);
}

.history-table tbody tr:hover td[b-a72it17fav] {
    background: rgba(240, 249, 255, .74);
}

.history-table .status-col[b-a72it17fav] {
    text-align: center;
}

.history-date-cell > span[b-a72it17fav],
.history-subject-cell > span[b-a72it17fav] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, .78);
}

.history-date-cell strong[b-a72it17fav],
.history-student-cell strong[b-a72it17fav],
.history-subject-cell strong[b-a72it17fav] {
    display: block;
    color: var(--text-main);
    font-size: .93rem;
    font-weight: 900;
}

.history-date-cell small[b-a72it17fav],
.history-student-cell small[b-a72it17fav],
.history-subject-cell small[b-a72it17fav],
.history-class-cell small[b-a72it17fav] {
    display: block;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 750;
}

.history-avatar[b-a72it17fav] {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    color: #075985;
    font-size: .86rem;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(224, 245, 255, .96), rgba(220, 252, 231, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.history-student-cell small[b-a72it17fav] {
    font-family: "SFMono-Regular", Consolas, monospace;
}

.history-class-cell[b-a72it17fav] {
    display: grid;
    gap: 6px;
    justify-items: start;
}

.history-class-cell span[b-a72it17fav] {
    min-height: 30px;
    padding: 0 11px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.history-status-pill[b-a72it17fav] {
    min-height: 32px;
    padding: 0 12px;
}

.history-status-pill.present[b-a72it17fav] {
    color: #047857;
    background: var(--present-soft);
}

.history-status-pill.absent[b-a72it17fav] {
    color: #be123c;
    background: var(--absent-soft);
}

.history-status-pill.late[b-a72it17fav] {
    color: #b45309;
    background: var(--late-soft);
}

.history-status-pill.excused[b-a72it17fav] {
    color: #6d28d9;
    background: var(--excused-soft);
}

.history-status-pill.neutral[b-a72it17fav] {
    color: var(--text-body);
    background: rgba(241, 245, 249, .84);
}

.history-remark[b-a72it17fav] {
    justify-content: flex-start;
    max-width: 260px;
    min-height: 30px;
    padding: 0 10px;
    color: var(--text-body);
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(248, 250, 252, .9);
}

.history-remark.empty[b-a72it17fav] {
    color: var(--text-muted);
    background: rgba(241, 245, 249, .74);
}

.history-mobile-list[b-a72it17fav] {
    display: none;
}

.history-mobile-card[b-a72it17fav] {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 22px;
    background: rgba(255, 255, 255, .76);
    box-shadow: var(--shadow-card);
}

.history-mobile-top[b-a72it17fav] {
    justify-content: space-between;
    gap: 12px;
}

.history-mobile-details[b-a72it17fav] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.history-mobile-details span[b-a72it17fav],
.history-mobile-remark[b-a72it17fav] {
    display: grid;
    gap: 3px;
    padding: 11px;
    border-radius: 16px;
    background: rgba(248, 252, 255, .78);
}

.history-mobile-details strong[b-a72it17fav],
.history-mobile-remark strong[b-a72it17fav] {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.history-empty-state[b-a72it17fav],
.history-loading-state[b-a72it17fav] {
    display: grid;
    place-items: center;
    min-height: 300px;
    padding: 36px 20px;
    text-align: center;
    border-radius: 24px;
    background: rgba(255, 255, 255, .62);
}

.history-empty-state > span[b-a72it17fav] {
    width: 70px;
    height: 70px;
    margin-bottom: 14px;
    border-radius: 24px;
    color: var(--primary-dark);
    font-size: 1.8rem;
    background: linear-gradient(135deg, rgba(224, 245, 255, .96), rgba(237, 233, 254, .9));
}

.history-empty-state h3[b-a72it17fav] {
    margin: 0 0 5px;
    color: var(--text-main);
    font-size: 1.15rem;
    font-weight: 900;
}

.history-empty-actions[b-a72it17fav] {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.history-loading-spinner[b-a72it17fav] {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-width: 4px;
    border-color: rgba(14, 165, 233, .16);
    border-top-color: var(--primary);
}

.history-loading-state strong[b-a72it17fav] {
    color: var(--text-main);
    font-weight: 900;
}

.history-table-wrap[b-a72it17fav]::-webkit-scrollbar,
.attendance-history-page[b-a72it17fav]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.history-table-wrap[b-a72it17fav]::-webkit-scrollbar-track,
.attendance-history-page[b-a72it17fav]::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(226, 236, 246, .48);
}

.history-table-wrap[b-a72it17fav]::-webkit-scrollbar-thumb,
.attendance-history-page[b-a72it17fav]::-webkit-scrollbar-thumb {
    border: 2px solid rgba(226, 236, 246, .48);
    border-radius: 999px;
    background: rgba(99, 139, 170, .42);
}

@media (max-width: 1280px) {
    .history-filter-grid[b-a72it17fav] {
        grid-template-columns: repeat(3, minmax(170px, 1fr));
    }

    .history-kpi-grid[b-a72it17fav] {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 920px) {
    .attendance-history-page[b-a72it17fav] {
        padding: 18px 14px 92px;
    }

    .history-hero[b-a72it17fav],
    .history-filter-header[b-a72it17fav],
    .history-results-header[b-a72it17fav] {
        align-items: stretch;
        flex-direction: column;
    }

    .history-entry-button[b-a72it17fav] {
        width: 100%;
    }

    .history-filter-grid[b-a72it17fav] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-kpi-grid[b-a72it17fav] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-date-range-chip[b-a72it17fav],
    .history-result-count[b-a72it17fav] {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .history-filter-grid[b-a72it17fav],
    .history-kpi-grid[b-a72it17fav] {
        grid-template-columns: 1fr;
    }

    .history-filter-actions[b-a72it17fav] {
        justify-content: stretch;
    }

    .history-filter-actions .history-button[b-a72it17fav],
    .history-empty-actions .history-button[b-a72it17fav] {
        flex: 1 1 140px;
    }

    .history-table-wrap[b-a72it17fav] {
        display: none;
    }

    .history-mobile-list[b-a72it17fav] {
        display: grid;
        gap: 14px;
    }
}

@media (max-width: 560px) {
    .attendance-history-page[b-a72it17fav] {
        padding: 12px 10px 84px;
    }

    .history-hero[b-a72it17fav],
    .history-filter-card[b-a72it17fav],
    .history-results-card[b-a72it17fav] {
        padding: 16px;
        border-radius: 22px;
    }

    .history-hero-copy[b-a72it17fav],
    .history-card-title[b-a72it17fav] {
        align-items: flex-start;
    }

    .history-hero-icon[b-a72it17fav] {
        width: 50px;
        height: 50px;
    }

    .history-mobile-top[b-a72it17fav] {
        align-items: flex-start;
        flex-direction: column;
    }

    .history-mobile-details[b-a72it17fav] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .attendance-history-shell[b-a72it17fav],
    .history-entry-button[b-a72it17fav],
    .history-button[b-a72it17fav],
    .history-button-spinner[b-a72it17fav],
    .history-loading-spinner[b-a72it17fav] {
        animation: none !important;
        transition: none !important;
    }

    .history-entry-button:hover[b-a72it17fav],
    .history-button:hover:not(:disabled)[b-a72it17fav] {
        transform: none !important;
    }
}
/* /Components/Pages/AttendanceReportPage.razor.rz.scp.css */
@keyframes reportRise-b-hgxgsuok2i {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes reportSpin-b-hgxgsuok2i {
    to {
        transform: rotate(360deg);
    }
}

.attendance-report-page[b-hgxgsuok2i] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --present: #10b981;
    --present-soft: #dcfce7;
    --absent: #ef476f;
    --absent-soft: #ffe4ec;
    --late: #f59e0b;
    --late-soft: #fff7ed;
    --excused: #8b5cf6;
    --excused-soft: #ede9fe;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    display: block;
    min-height: 100%;
    overflow-x: hidden;
    padding: 28px 32px 96px;
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    background:
        radial-gradient(circle at 8% 8%, rgba(14, 165, 233, .18), transparent 34%),
        radial-gradient(circle at 88% 6%, rgba(139, 92, 246, .16), transparent 30%),
        radial-gradient(circle at 92% 92%, rgba(236, 72, 153, .12), transparent 32%),
        linear-gradient(135deg, #eef8ff 0%, #f8fbff 46%, #f7f0ff 100%);
}

.attendance-report-page.mybody[b-hgxgsuok2i] {
    grid-template-rows: unset;
}

.attendance-report-page[b-hgxgsuok2i]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .46) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .18;
}

.attendance-report-shell[b-hgxgsuok2i] {
    position: relative;
    z-index: 1;
    width: min(100%, 1600px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
    animation: reportRise-b-hgxgsuok2i .42s ease both;
}

.report-hero[b-hgxgsuok2i],
.report-control-card[b-hgxgsuok2i],
.report-kpi-card[b-hgxgsuok2i],
.report-insight-card[b-hgxgsuok2i],
.report-data-card[b-hgxgsuok2i],
.report-empty-state[b-hgxgsuok2i],
.report-loading-state[b-hgxgsuok2i],
.report-filter-panel[b-hgxgsuok2i] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.report-hero[b-hgxgsuok2i] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
}

.report-hero[b-hgxgsuok2i]::after {
    content: "";
    position: absolute;
    inset: auto -8% -90% 52%;
    height: 180px;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(8px);
    background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(139, 92, 246, .16));
}

.report-hero-copy[b-hgxgsuok2i],
.report-hero-actions[b-hgxgsuok2i],
.report-card-header[b-hgxgsuok2i],
.report-card-title[b-hgxgsuok2i],
.report-filter-actions[b-hgxgsuok2i],
.report-dialog-header[b-hgxgsuok2i],
.report-dialog-actions[b-hgxgsuok2i],
.report-date-cell[b-hgxgsuok2i],
.report-student-cell[b-hgxgsuok2i],
.report-subject-cell[b-hgxgsuok2i],
.report-mobile-top[b-hgxgsuok2i],
.report-empty-actions[b-hgxgsuok2i],
.report-rate-meter[b-hgxgsuok2i],
.distribution-legend[b-hgxgsuok2i] {
    display: flex;
    align-items: center;
}

.report-hero-copy[b-hgxgsuok2i],
.report-card-title[b-hgxgsuok2i],
.report-date-cell[b-hgxgsuok2i],
.report-student-cell[b-hgxgsuok2i],
.report-subject-cell[b-hgxgsuok2i] {
    gap: 14px;
}

.report-hero-actions[b-hgxgsuok2i],
.report-filter-actions[b-hgxgsuok2i],
.report-dialog-actions[b-hgxgsuok2i],
.distribution-legend[b-hgxgsuok2i],
.report-empty-actions[b-hgxgsuok2i] {
    flex-wrap: wrap;
    gap: 10px;
}

.report-hero-icon[b-hgxgsuok2i],
.report-card-title > span[b-hgxgsuok2i],
.report-kpi-card > span[b-hgxgsuok2i],
.report-empty-state > span[b-hgxgsuok2i],
.report-avatar[b-hgxgsuok2i],
.report-date-cell > span[b-hgxgsuok2i],
.report-subject-cell > span[b-hgxgsuok2i] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.report-hero-icon[b-hgxgsuok2i] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: #fff;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 18px 34px rgba(14, 165, 233, .24);
}

.report-hero h1[b-hgxgsuok2i],
.report-card-title h2[b-hgxgsuok2i],
.report-insight-card h2[b-hgxgsuok2i] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.035em;
}

.report-hero h1[b-hgxgsuok2i] {
    font-size: clamp(1.7rem, 2.4vw, 2.25rem);
}

.report-card-title h2[b-hgxgsuok2i],
.report-insight-card h2[b-hgxgsuok2i] {
    font-size: 1.1rem;
}

.report-hero p[b-hgxgsuok2i],
.report-card-title p[b-hgxgsuok2i],
.report-insight-card p[b-hgxgsuok2i],
.report-empty-state p[b-hgxgsuok2i],
.report-loading-state p[b-hgxgsuok2i] {
    margin: 0;
    color: var(--text-body);
}

.report-button[b-hgxgsuok2i],
.report-icon-button[b-hgxgsuok2i] {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    border-radius: 16px;
    font-size: .9rem;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.report-button[b-hgxgsuok2i] {
    padding: 0 16px;
    border: 1px solid transparent;
}

.report-button.secondary[b-hgxgsuok2i] {
    color: var(--primary-dark);
    border-color: rgba(14, 165, 233, .24);
    background: rgba(224, 245, 255, .64);
    box-shadow: 0 12px 26px rgba(14, 165, 233, .1);
}

.report-button.primary[b-hgxgsuok2i] {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 14px 28px rgba(14, 165, 233, .22);
}

.report-button:hover:not(:disabled)[b-hgxgsuok2i],
.report-icon-button:hover[b-hgxgsuok2i] {
    transform: translateY(-1px);
}

.report-button:disabled[b-hgxgsuok2i] {
    cursor: not-allowed;
    opacity: .58;
    transform: none;
    box-shadow: none;
}

.report-button-spinner[b-hgxgsuok2i],
.report-loading-spinner[b-hgxgsuok2i] {
    border-radius: 50%;
    border-style: solid;
    animation: reportSpin-b-hgxgsuok2i .85s linear infinite;
}

.report-button-spinner[b-hgxgsuok2i] {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, .42);
    border-top-color: #fff;
}

.report-control-card[b-hgxgsuok2i],
.report-data-card[b-hgxgsuok2i] {
    display: grid;
    gap: 18px;
    padding: 20px;
    border-radius: var(--radius-lg);
}

.report-card-header[b-hgxgsuok2i] {
    justify-content: space-between;
    gap: 14px;
}

.report-card-title > span[b-hgxgsuok2i] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, rgba(224, 245, 255, .92), rgba(237, 233, 254, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.report-period-chip[b-hgxgsuok2i],
.report-count-chip[b-hgxgsuok2i],
.report-status-pill[b-hgxgsuok2i],
.report-rate-pill[b-hgxgsuok2i],
.report-remark[b-hgxgsuok2i],
.report-class-cell span[b-hgxgsuok2i],
.distribution-legend span[b-hgxgsuok2i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.report-period-chip[b-hgxgsuok2i],
.report-count-chip[b-hgxgsuok2i] {
    min-height: 34px;
    padding: 0 12px;
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .2);
    background: rgba(224, 245, 255, .68);
}

.report-filter-grid[b-hgxgsuok2i] {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 14px;
}

.report-field[b-hgxgsuok2i] {
    display: grid;
    gap: 7px;
}

.report-field > span[b-hgxgsuok2i] {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.report-input[b-hgxgsuok2i] {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(120, 170, 210, .28);
    border-radius: 16px;
    padding: 0 14px;
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 750;
    background: rgba(255, 255, 255, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

select.report-input[b-hgxgsuok2i] {
    padding-right: 38px;
}

.report-input:focus[b-hgxgsuok2i] {
    outline: none;
    border-color: rgba(14, 165, 233, .56);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
}

.report-input:disabled[b-hgxgsuok2i] {
    color: var(--text-muted);
    background: rgba(241, 245, 249, .7);
}

.report-filter-actions[b-hgxgsuok2i] {
    align-self: end;
    justify-content: flex-end;
}

.report-filter-actions .report-button[b-hgxgsuok2i] {
    min-width: 118px;
}

.report-kpi-grid[b-hgxgsuok2i] {
    display: grid;
    grid-template-columns: repeat(6, minmax(145px, 1fr));
    gap: 14px;
}

.report-kpi-card[b-hgxgsuok2i] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 118px;
    padding: 17px;
    border-radius: 22px;
}

.report-kpi-card > span[b-hgxgsuok2i] {
    width: 46px;
    height: 46px;
    border-radius: 16px;
}

.report-kpi-card small[b-hgxgsuok2i] {
    display: block;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.report-kpi-card strong[b-hgxgsuok2i] {
    display: block;
    margin-top: 4px;
    color: var(--text-main);
    font-size: 1.62rem;
    line-height: 1.08;
    font-weight: 900;
}

.report-kpi-card.period strong[b-hgxgsuok2i] {
    font-size: .94rem;
    line-height: 1.25;
}

.report-kpi-card em[b-hgxgsuok2i] {
    color: var(--text-muted);
    font-size: .76rem;
    font-style: normal;
    font-weight: 750;
}

.report-kpi-card.total > span[b-hgxgsuok2i],
.report-kpi-card.period > span[b-hgxgsuok2i] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.report-kpi-card.present > span[b-hgxgsuok2i] {
    color: #047857;
    background: var(--present-soft);
}

.report-kpi-card.absent > span[b-hgxgsuok2i] {
    color: #be123c;
    background: var(--absent-soft);
}

.report-kpi-card.late > span[b-hgxgsuok2i] {
    color: #b45309;
    background: var(--late-soft);
}

.report-kpi-card.excused > span[b-hgxgsuok2i] {
    color: #6d28d9;
    background: var(--excused-soft);
}

.report-insights-grid[b-hgxgsuok2i] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 14px;
}

.report-insight-card[b-hgxgsuok2i] {
    display: grid;
    gap: 16px;
    min-height: 190px;
    padding: 20px;
    border-radius: var(--radius-lg);
}

.distribution-bar[b-hgxgsuok2i] {
    display: flex;
    overflow: hidden;
    min-height: 18px;
    border-radius: 999px;
    background: rgba(226, 232, 240, .78);
}

.distribution-bar span.present[b-hgxgsuok2i],
.distribution-legend span.present[b-hgxgsuok2i] {
    background: var(--present);
}

.distribution-bar span.absent[b-hgxgsuok2i],
.distribution-legend span.absent[b-hgxgsuok2i] {
    background: var(--absent);
}

.distribution-bar span.late[b-hgxgsuok2i],
.distribution-legend span.late[b-hgxgsuok2i] {
    background: var(--late);
}

.distribution-bar span.excused[b-hgxgsuok2i],
.distribution-legend span.excused[b-hgxgsuok2i] {
    background: var(--excused);
}

.distribution-legend span[b-hgxgsuok2i] {
    min-height: 30px;
    padding: 0 10px;
    color: #fff;
}

.report-rate-meter[b-hgxgsuok2i] {
    justify-content: center;
    gap: 18px;
}

.rate-ring[b-hgxgsuok2i] {
    --rate: 0;
    width: 136px;
    height: 136px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    text-align: center;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, .96) 0 58%, transparent 59%),
        conic-gradient(var(--primary) calc(var(--rate) * 1%), rgba(226, 232, 240, .8) 0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), var(--shadow-card);
}

.rate-ring.high[b-hgxgsuok2i] {
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, .96) 0 58%, transparent 59%),
        conic-gradient(var(--present) calc(var(--rate) * 1%), rgba(226, 232, 240, .8) 0);
}

.rate-ring.watch[b-hgxgsuok2i] {
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, .96) 0 58%, transparent 59%),
        conic-gradient(var(--late) calc(var(--rate) * 1%), rgba(226, 232, 240, .8) 0);
}

.rate-ring.risk[b-hgxgsuok2i] {
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, .96) 0 58%, transparent 59%),
        conic-gradient(var(--absent) calc(var(--rate) * 1%), rgba(226, 232, 240, .8) 0);
}

.rate-ring strong[b-hgxgsuok2i] {
    display: block;
    color: var(--text-main);
    font-size: 1.42rem;
    font-weight: 900;
}

.rate-ring small[b-hgxgsuok2i] {
    display: block;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.report-mini-empty[b-hgxgsuok2i] {
    display: grid;
    place-items: center;
    min-height: 74px;
    border: 1px dashed rgba(120, 170, 210, .34);
    border-radius: 18px;
    color: var(--text-muted);
    font-size: .9rem;
    font-weight: 750;
    background: rgba(248, 252, 255, .62);
}

.report-table-wrap[b-hgxgsuok2i] {
    max-width: 100%;
    overflow: auto;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 24px;
    background: rgba(255, 255, 255, .62);
}

.report-table[b-hgxgsuok2i] {
    width: 100%;
    min-width: 940px;
    border-collapse: separate;
    border-spacing: 0;
}

.student-summary-table[b-hgxgsuok2i] {
    min-width: 980px;
}

.report-table th[b-hgxgsuok2i] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 15px 18px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    background: rgba(239, 248, 255, .94);
    border-bottom: 1px solid rgba(120, 170, 210, .18);
}

.report-table td[b-hgxgsuok2i] {
    min-height: 76px;
    padding: 15px 18px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(120, 170, 210, .14);
    background: rgba(255, 255, 255, .62);
}

.report-table tbody tr:hover td[b-hgxgsuok2i] {
    background: rgba(240, 249, 255, .74);
}

.report-table .number-col[b-hgxgsuok2i],
.report-table .status-col[b-hgxgsuok2i],
.report-table .rate-col[b-hgxgsuok2i] {
    text-align: center;
}

.report-table .number-col[b-hgxgsuok2i] {
    font-size: .98rem;
    font-weight: 900;
}

.number-col.present[b-hgxgsuok2i] {
    color: #047857;
}

.number-col.absent[b-hgxgsuok2i] {
    color: #be123c;
}

.number-col.late[b-hgxgsuok2i] {
    color: #b45309;
}

.number-col.excused[b-hgxgsuok2i] {
    color: #6d28d9;
}

.number-col.total[b-hgxgsuok2i] {
    color: var(--text-main);
}

.report-avatar[b-hgxgsuok2i] {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    color: #075985;
    font-size: .86rem;
    font-weight: 900;
    background: linear-gradient(135deg, rgba(224, 245, 255, .96), rgba(220, 252, 231, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92);
}

.report-student-cell strong[b-hgxgsuok2i],
.report-date-cell strong[b-hgxgsuok2i],
.report-subject-cell strong[b-hgxgsuok2i] {
    display: block;
    color: var(--text-main);
    font-size: .93rem;
    font-weight: 900;
}

.report-student-cell small[b-hgxgsuok2i],
.report-date-cell small[b-hgxgsuok2i],
.report-subject-cell small[b-hgxgsuok2i],
.report-class-cell small[b-hgxgsuok2i] {
    display: block;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 750;
}

.report-student-cell small[b-hgxgsuok2i] {
    font-family: "SFMono-Regular", Consolas, monospace;
}

.report-class-cell[b-hgxgsuok2i] {
    display: grid;
    gap: 6px;
    justify-items: start;
}

.report-class-cell span[b-hgxgsuok2i] {
    min-height: 30px;
    padding: 0 11px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.report-date-cell > span[b-hgxgsuok2i],
.report-subject-cell > span[b-hgxgsuok2i] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, .78);
}

.report-status-pill[b-hgxgsuok2i],
.report-rate-pill[b-hgxgsuok2i] {
    min-height: 32px;
    padding: 0 12px;
}

.report-status-pill.present[b-hgxgsuok2i],
.report-rate-pill.high[b-hgxgsuok2i] {
    color: #047857;
    background: var(--present-soft);
}

.report-status-pill.absent[b-hgxgsuok2i],
.report-rate-pill.risk[b-hgxgsuok2i] {
    color: #be123c;
    background: var(--absent-soft);
}

.report-status-pill.late[b-hgxgsuok2i],
.report-rate-pill.watch[b-hgxgsuok2i] {
    color: #b45309;
    background: var(--late-soft);
}

.report-status-pill.excused[b-hgxgsuok2i],
.report-rate-pill.good[b-hgxgsuok2i] {
    color: #6d28d9;
    background: var(--excused-soft);
}

.report-status-pill.neutral[b-hgxgsuok2i] {
    color: var(--text-body);
    background: rgba(241, 245, 249, .84);
}

.rate-bar[b-hgxgsuok2i] {
    display: block;
    overflow: hidden;
    width: min(120px, 100%);
    height: 8px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: rgba(226, 232, 240, .8);
}

.rate-bar span[b-hgxgsuok2i] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--present));
}

.report-remark[b-hgxgsuok2i] {
    justify-content: flex-start;
    max-width: 260px;
    min-height: 30px;
    padding: 0 10px;
    color: var(--text-body);
    overflow: hidden;
    text-overflow: ellipsis;
    background: rgba(248, 250, 252, .9);
}

.report-remark.empty[b-hgxgsuok2i] {
    color: var(--text-muted);
    background: rgba(241, 245, 249, .74);
}

.report-mobile-list[b-hgxgsuok2i] {
    display: none;
}

.report-mobile-card[b-hgxgsuok2i] {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 22px;
    background: rgba(255, 255, 255, .76);
    box-shadow: var(--shadow-card);
}

.report-mobile-top[b-hgxgsuok2i] {
    justify-content: space-between;
    gap: 12px;
}

.report-mobile-details[b-hgxgsuok2i] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.report-mobile-details span[b-hgxgsuok2i],
.report-mobile-remark[b-hgxgsuok2i] {
    display: grid;
    gap: 3px;
    padding: 11px;
    border-radius: 16px;
    background: rgba(248, 252, 255, .78);
}

.report-mobile-details span.present[b-hgxgsuok2i] {
    color: #047857;
    background: var(--present-soft);
}

.report-mobile-details span.absent[b-hgxgsuok2i] {
    color: #be123c;
    background: var(--absent-soft);
}

.report-mobile-details span.late[b-hgxgsuok2i] {
    color: #b45309;
    background: var(--late-soft);
}

.report-mobile-details span.excused[b-hgxgsuok2i] {
    color: #6d28d9;
    background: var(--excused-soft);
}

.report-mobile-details strong[b-hgxgsuok2i],
.report-mobile-remark strong[b-hgxgsuok2i] {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.report-mobile-rate[b-hgxgsuok2i] {
    display: grid;
    gap: 8px;
}

.report-empty-state[b-hgxgsuok2i],
.report-loading-state[b-hgxgsuok2i] {
    display: grid;
    place-items: center;
    min-height: 300px;
    padding: 36px 20px;
    text-align: center;
    border-radius: 24px;
    background: rgba(255, 255, 255, .62);
}

.report-empty-state > span[b-hgxgsuok2i] {
    width: 70px;
    height: 70px;
    margin-bottom: 14px;
    border-radius: 24px;
    color: var(--primary-dark);
    font-size: 1.8rem;
    background: linear-gradient(135deg, rgba(224, 245, 255, .96), rgba(237, 233, 254, .9));
}

.report-empty-state h3[b-hgxgsuok2i] {
    margin: 0 0 5px;
    color: var(--text-main);
    font-size: 1.15rem;
    font-weight: 900;
}

.report-loading-spinner[b-hgxgsuok2i] {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    border-width: 4px;
    border-color: rgba(14, 165, 233, .16);
    border-top-color: var(--primary);
}

.report-loading-state strong[b-hgxgsuok2i] {
    color: var(--text-main);
    font-weight: 900;
}

.report-filter-dialog[b-hgxgsuok2i] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: grid;
    place-items: end center;
    padding: 18px;
    background: rgba(15, 23, 42, .34);
    backdrop-filter: blur(8px);
}

.report-filter-panel[b-hgxgsuok2i] {
    width: min(100%, 720px);
    max-height: min(86vh, 860px);
    overflow: auto;
    padding: 18px;
    border-radius: 26px;
}

.report-dialog-header[b-hgxgsuok2i] {
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.report-icon-button[b-hgxgsuok2i] {
    width: 42px;
    color: var(--text-body);
    border: 1px solid rgba(120, 170, 210, .24);
    background: rgba(255, 255, 255, .76);
}

.report-dialog-grid[b-hgxgsuok2i] {
    display: grid;
    gap: 12px;
}

.report-dialog-actions[b-hgxgsuok2i] {
    margin-top: 16px;
}

.report-dialog-actions .report-button[b-hgxgsuok2i] {
    flex: 1 1 140px;
}

.report-table-wrap[b-hgxgsuok2i]::-webkit-scrollbar,
.report-filter-panel[b-hgxgsuok2i]::-webkit-scrollbar,
.attendance-report-page[b-hgxgsuok2i]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.report-table-wrap[b-hgxgsuok2i]::-webkit-scrollbar-track,
.report-filter-panel[b-hgxgsuok2i]::-webkit-scrollbar-track,
.attendance-report-page[b-hgxgsuok2i]::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(226, 236, 246, .48);
}

.report-table-wrap[b-hgxgsuok2i]::-webkit-scrollbar-thumb,
.report-filter-panel[b-hgxgsuok2i]::-webkit-scrollbar-thumb,
.attendance-report-page[b-hgxgsuok2i]::-webkit-scrollbar-thumb {
    border: 2px solid rgba(226, 236, 246, .48);
    border-radius: 999px;
    background: rgba(99, 139, 170, .42);
}

@media (max-width: 1380px) {
    .report-kpi-grid[b-hgxgsuok2i] {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }

    .report-filter-grid[b-hgxgsuok2i] {
        grid-template-columns: repeat(3, minmax(170px, 1fr));
    }
}

@media (max-width: 1040px) {
    .report-insights-grid[b-hgxgsuok2i] {
        grid-template-columns: 1fr;
    }

    .report-filter-grid[b-hgxgsuok2i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .attendance-report-page[b-hgxgsuok2i] {
        padding: 18px 14px 92px;
    }

    .report-hero[b-hgxgsuok2i],
    .report-card-header[b-hgxgsuok2i],
    .report-dialog-header[b-hgxgsuok2i] {
        align-items: stretch;
        flex-direction: column;
    }

    .report-hero-actions .report-button[b-hgxgsuok2i] {
        flex: 1 1 150px;
    }

    .report-kpi-grid[b-hgxgsuok2i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-table-wrap[b-hgxgsuok2i] {
        display: none;
    }

    .report-mobile-list[b-hgxgsuok2i] {
        display: grid;
        gap: 14px;
    }
}

@media (max-width: 620px) {
    .attendance-report-page[b-hgxgsuok2i] {
        padding: 12px 10px 84px;
    }

    .report-hero[b-hgxgsuok2i],
    .report-control-card[b-hgxgsuok2i],
    .report-data-card[b-hgxgsuok2i],
    .report-insight-card[b-hgxgsuok2i] {
        padding: 16px;
        border-radius: 22px;
    }

    .report-hero-copy[b-hgxgsuok2i],
    .report-card-title[b-hgxgsuok2i] {
        align-items: flex-start;
    }

    .report-hero-icon[b-hgxgsuok2i] {
        width: 50px;
        height: 50px;
    }

    .report-kpi-grid[b-hgxgsuok2i],
    .report-filter-grid[b-hgxgsuok2i] {
        grid-template-columns: 1fr;
    }

    .report-rate-meter[b-hgxgsuok2i],
    .report-mobile-top[b-hgxgsuok2i] {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-mobile-details[b-hgxgsuok2i] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .attendance-report-shell[b-hgxgsuok2i],
    .report-button[b-hgxgsuok2i],
    .report-icon-button[b-hgxgsuok2i],
    .report-button-spinner[b-hgxgsuok2i],
    .report-loading-spinner[b-hgxgsuok2i] {
        animation: none !important;
        transition: none !important;
    }

    .report-button:hover:not(:disabled)[b-hgxgsuok2i],
    .report-icon-button:hover[b-hgxgsuok2i] {
        transform: none !important;
    }
}
/* /Components/Pages/BalanceSheetPage.razor.rz.scp.css */
.balance-sheet-page[b-rdkv7okuwu] {
    --surface: rgba(255, 255, 255, 0.9);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --surface-soft: rgba(248, 252, 255, 0.78);
    --border-soft: rgba(120, 170, 210, 0.22);
    --border-glass: rgba(255, 255, 255, 0.76);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --finance: #f59e0b;
    --finance-soft: #fff7ed;
    --asset: #0ea5e9;
    --asset-soft: #e0f5ff;
    --liability: #ef476f;
    --liability-soft: #ffe4ec;
    --equity: #8b5cf6;
    --equity-soft: #ede9fe;
    --profit: #10b981;
    --profit-soft: #dcfce7;
    --balanced: #10b981;
    --balanced-soft: #dcfce7;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --neutral: #64748b;
    --neutral-soft: #f1f5f9;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, 0.08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, 0.07);
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
}

.balance-sheet-shell[b-rdkv7okuwu] {
    position: relative;
    display: grid;
    gap: 18px;
    max-width: 1600px;
    margin: 0 auto;
    min-height: 0;
}

.balance-sheet-shell[b-rdkv7okuwu]::before,
.balance-sheet-shell[b-rdkv7okuwu]::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 999px;
    filter: blur(16px);
    pointer-events: none;
}

.balance-sheet-shell[b-rdkv7okuwu]::before {
    top: 42px;
    left: 28px;
    width: 300px;
    height: 300px;
    background: rgba(14, 165, 233, 0.14);
}

.balance-sheet-shell[b-rdkv7okuwu]::after {
    right: 34px;
    bottom: 28px;
    width: 360px;
    height: 360px;
    background: rgba(236, 72, 153, 0.11);
}

.bs-hero[b-rdkv7okuwu],
.controls-card[b-rdkv7okuwu],
.kpi-card[b-rdkv7okuwu],
.status-banner[b-rdkv7okuwu],
.equation-strip[b-rdkv7okuwu],
.breakdown-card[b-rdkv7okuwu],
.insights-card[b-rdkv7okuwu],
.empty-state[b-rdkv7okuwu] {
    border: 1px solid var(--border-glass);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.72)),
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.1), transparent 34%),
        radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.08), transparent 36%);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.bs-hero[b-rdkv7okuwu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
}

.hero-main[b-rdkv7okuwu],
.section-title-wrap[b-rdkv7okuwu],
.section-head[b-rdkv7okuwu],
.period-chips[b-rdkv7okuwu],
.control-note[b-rdkv7okuwu],
.kpi-top[b-rdkv7okuwu],
.status-banner[b-rdkv7okuwu],
.banner-equation[b-rdkv7okuwu],
.comparison-label[b-rdkv7okuwu],
.gap-note[b-rdkv7okuwu],
.health-note[b-rdkv7okuwu] {
    display: flex;
    align-items: center;
}

.hero-main[b-rdkv7okuwu] {
    gap: 16px;
}

.hero-icon[b-rdkv7okuwu],
.section-icon[b-rdkv7okuwu],
.kpi-icon[b-rdkv7okuwu],
.banner-icon[b-rdkv7okuwu],
.empty-state > span[b-rdkv7okuwu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.hero-icon[b-rdkv7okuwu] {
    width: 60px;
    height: 60px;
    border-radius: 23px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #2563eb 48%, #8b5cf6);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.24);
}

.bs-hero h1[b-rdkv7okuwu] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.bs-hero p[b-rdkv7okuwu],
.section-title-wrap p[b-rdkv7okuwu],
.status-banner p[b-rdkv7okuwu],
.empty-state p[b-rdkv7okuwu] {
    margin: 3px 0 0;
    color: var(--text-body);
    line-height: 1.55;
}

.refresh-btn[b-rdkv7okuwu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, 0.78);
    font-weight: 850;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.refresh-btn.compact[b-rdkv7okuwu] {
    min-height: 40px;
}

.refresh-btn:hover[b-rdkv7okuwu] {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(14, 165, 233, 0.14);
}

.controls-card[b-rdkv7okuwu],
.breakdown-card[b-rdkv7okuwu],
.insights-card[b-rdkv7okuwu],
.empty-state[b-rdkv7okuwu] {
    border-radius: 28px;
    padding: 20px;
}

.section-head[b-rdkv7okuwu] {
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.section-head.compact[b-rdkv7okuwu] {
    margin-bottom: 14px;
}

.section-title-wrap[b-rdkv7okuwu] {
    gap: 12px;
}

.section-title-wrap h2[b-rdkv7okuwu] {
    margin: 0;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.section-icon[b-rdkv7okuwu] {
    width: 44px;
    height: 44px;
    border-radius: 17px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.section-icon.statement[b-rdkv7okuwu] {
    color: #7e22ce;
    background: var(--equity-soft);
}

.section-icon.insight[b-rdkv7okuwu] {
    color: #b45309;
    background: var(--finance-soft);
}

.period-chips[b-rdkv7okuwu] {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.period-chip[b-rdkv7okuwu],
.row-badge[b-rdkv7okuwu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    color: var(--text-body);
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}

.period-chip.balanced[b-rdkv7okuwu],
.row-badge.balanced[b-rdkv7okuwu] {
    color: #047857;
    background: var(--balanced-soft);
    border-color: rgba(16, 185, 129, 0.2);
}

.period-chip.danger[b-rdkv7okuwu],
.row-badge.danger[b-rdkv7okuwu] {
    color: #be123c;
    background: var(--danger-soft);
    border-color: rgba(239, 71, 111, 0.2);
}

.period-chip.neutral[b-rdkv7okuwu] {
    color: #475569;
    background: var(--neutral-soft);
}

.controls-grid[b-rdkv7okuwu] {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 14px;
    align-items: end;
}

.date-field[b-rdkv7okuwu] {
    display: grid;
    gap: 8px;
}

.date-field > span[b-rdkv7okuwu] {
    color: var(--text-body);
    font-size: 0.82rem;
    font-weight: 850;
}

.input-shell[b-rdkv7okuwu] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(104, 155, 200, 0.26);
    border-radius: 18px;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.input-shell:focus-within[b-rdkv7okuwu] {
    border-color: rgba(14, 165, 233, 0.46);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}

.date-input[b-rdkv7okuwu] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font-weight: 800;
}

.control-note[b-rdkv7okuwu] {
    min-height: 48px;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    color: var(--text-body);
    background: rgba(255, 255, 255, 0.62);
}

.control-note.balanced[b-rdkv7okuwu] {
    color: #047857;
    background: rgba(220, 252, 231, 0.72);
}

.control-note.danger[b-rdkv7okuwu] {
    color: #be123c;
    background: rgba(255, 228, 236, 0.76);
}

.kpi-grid[b-rdkv7okuwu] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.kpi-card[b-rdkv7okuwu] {
    position: relative;
    overflow: hidden;
    min-height: 154px;
    border-radius: var(--radius-lg);
    padding: 18px;
}

.kpi-card[b-rdkv7okuwu]::after {
    content: "";
    position: absolute;
    right: -44px;
    bottom: -54px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.08);
}

.kpi-card.prominent.danger[b-rdkv7okuwu] {
    border-color: rgba(239, 71, 111, 0.28);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 228, 236, 0.74)),
        radial-gradient(circle at top right, rgba(239, 71, 111, 0.14), transparent 34%);
}

.kpi-top[b-rdkv7okuwu] {
    position: relative;
    z-index: 1;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-body);
    font-size: 0.8rem;
    font-weight: 850;
}

.kpi-icon[b-rdkv7okuwu] {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.kpi-card strong[b-rdkv7okuwu] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 14px;
    color: var(--text-main);
    font-size: clamp(1.22rem, 1.8vw, 1.58rem);
    font-weight: 950;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.kpi-card small[b-rdkv7okuwu] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-weight: 750;
}

.kpi-card em[b-rdkv7okuwu] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    margin-top: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #be123c;
    background: var(--danger-soft);
    font-size: 0.74rem;
    font-style: normal;
    font-weight: 900;
}

.kpi-card.asset .kpi-icon[b-rdkv7okuwu],
.equation-tile.asset[b-rdkv7okuwu],
.row-badge.asset[b-rdkv7okuwu] {
    color: #0369a1;
    background: var(--asset-soft);
}

.kpi-card.liability .kpi-icon[b-rdkv7okuwu],
.equation-tile.liability[b-rdkv7okuwu],
.row-badge.liability[b-rdkv7okuwu] {
    color: #be123c;
    background: var(--liability-soft);
}

.kpi-card.liability.zero .kpi-icon[b-rdkv7okuwu],
.equation-tile.muted[b-rdkv7okuwu],
.row-badge.zero[b-rdkv7okuwu] {
    color: #64748b;
    background: var(--neutral-soft);
}

.kpi-card.equity .kpi-icon[b-rdkv7okuwu],
.equation-tile.equity[b-rdkv7okuwu],
.row-badge.equity[b-rdkv7okuwu] {
    color: #6d28d9;
    background: var(--equity-soft);
}

.kpi-card.balanced .kpi-icon[b-rdkv7okuwu],
.kpi-card.status.balanced .kpi-icon[b-rdkv7okuwu],
.equation-tile.balanced[b-rdkv7okuwu] {
    color: #047857;
    background: var(--balanced-soft);
}

.kpi-card.danger .kpi-icon[b-rdkv7okuwu],
.kpi-card.status.danger .kpi-icon[b-rdkv7okuwu],
.equation-tile.danger[b-rdkv7okuwu] {
    color: #be123c;
    background: var(--danger-soft);
}

.kpi-card.date .kpi-icon[b-rdkv7okuwu] {
    color: #b45309;
    background: var(--finance-soft);
}

.status-banner[b-rdkv7okuwu] {
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
}

.banner-icon[b-rdkv7okuwu] {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    color: #475569;
    background: var(--neutral-soft);
}

.status-banner strong[b-rdkv7okuwu] {
    display: block;
    color: var(--text-main);
    font-size: 1.02rem;
    font-weight: 950;
}

.status-banner.balanced[b-rdkv7okuwu] {
    border-color: rgba(16, 185, 129, 0.28);
}

.status-banner.balanced .banner-icon[b-rdkv7okuwu] {
    color: #047857;
    background: var(--balanced-soft);
}

.status-banner.danger[b-rdkv7okuwu] {
    border-color: rgba(239, 71, 111, 0.28);
}

.status-banner.danger .banner-icon[b-rdkv7okuwu] {
    color: #be123c;
    background: var(--danger-soft);
}

.banner-equation[b-rdkv7okuwu] {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.banner-equation span[b-rdkv7okuwu],
.banner-equation strong[b-rdkv7okuwu],
.banner-equation em[b-rdkv7okuwu] {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--text-main);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.banner-equation strong[b-rdkv7okuwu],
.banner-equation em[b-rdkv7okuwu] {
    color: #be123c;
    background: var(--danger-soft);
}

.banner-equation em[b-rdkv7okuwu] {
    font-style: normal;
}

.equation-strip[b-rdkv7okuwu] {
    display: grid;
    grid-template-columns: 1.15fr auto 1fr auto 1.25fr auto 1fr;
    gap: 10px;
    align-items: stretch;
    padding: 18px;
    border-radius: 28px;
}

.equation-tile[b-rdkv7okuwu] {
    display: grid;
    align-content: center;
    gap: 5px;
    min-height: 86px;
    padding: 14px 16px;
    border-radius: 20px;
    border: 1px solid rgba(104, 155, 200, 0.16);
}

.equation-tile span[b-rdkv7okuwu] {
    color: var(--text-body);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.equation-tile strong[b-rdkv7okuwu] {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.operator[b-rdkv7okuwu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    align-self: center;
    border-radius: 999px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-weight: 950;
    text-transform: uppercase;
}

.operator.danger[b-rdkv7okuwu] {
    color: #be123c;
    background: var(--danger-soft);
}

.operator.balanced[b-rdkv7okuwu] {
    color: #047857;
    background: var(--balanced-soft);
}

.report-grid[b-rdkv7okuwu] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.85fr);
    gap: 18px;
    align-items: start;
}

.statement-rows[b-rdkv7okuwu] {
    display: grid;
    gap: 10px;
}

.breakdown-row[b-rdkv7okuwu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(104, 155, 200, 0.16);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.62);
}

.breakdown-row.strong.danger[b-rdkv7okuwu] {
    border-color: rgba(239, 71, 111, 0.26);
    background: rgba(255, 228, 236, 0.58);
}

.breakdown-row div[b-rdkv7okuwu] {
    display: grid;
    gap: 4px;
}

.breakdown-row strong[b-rdkv7okuwu] {
    color: var(--text-main);
    font-weight: 950;
}

.breakdown-row small[b-rdkv7okuwu] {
    color: var(--text-muted);
    font-weight: 750;
}

.breakdown-row em[b-rdkv7okuwu] {
    color: var(--text-main);
    font-style: normal;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.breakdown-row.danger em[b-rdkv7okuwu] {
    color: #be123c;
}

.breakdown-row.asset em[b-rdkv7okuwu] {
    color: var(--asset);
}

.breakdown-row.equity em[b-rdkv7okuwu] {
    color: var(--equity);
}

.comparison-bars[b-rdkv7okuwu] {
    display: grid;
    gap: 16px;
}

.comparison-row[b-rdkv7okuwu] {
    display: grid;
    gap: 9px;
}

.comparison-label[b-rdkv7okuwu] {
    justify-content: space-between;
    gap: 12px;
    color: var(--text-body);
    font-weight: 850;
}

.comparison-label strong[b-rdkv7okuwu] {
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.bar-track[b-rdkv7okuwu] {
    overflow: hidden;
    height: 13px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.82);
}

.bar-fill[b-rdkv7okuwu] {
    height: 100%;
    min-width: 4%;
    border-radius: inherit;
    transition: width 0.24s ease;
}

.bar-fill.asset[b-rdkv7okuwu] {
    background: linear-gradient(90deg, #0ea5e9, #2563eb);
}

.bar-fill.equity[b-rdkv7okuwu] {
    background: linear-gradient(90deg, #8b5cf6, #ec4899);
}

.gap-note[b-rdkv7okuwu],
.health-note[b-rdkv7okuwu] {
    gap: 10px;
    margin-top: 16px;
    padding: 13px 14px;
    border-radius: 18px;
    color: var(--text-body);
    background: rgba(255, 255, 255, 0.62);
}

.gap-note.danger[b-rdkv7okuwu] {
    color: #be123c;
    background: var(--danger-soft);
}

.gap-note.balanced[b-rdkv7okuwu] {
    color: #047857;
    background: var(--balanced-soft);
}

.health-note[b-rdkv7okuwu] {
    align-items: flex-start;
    color: #8a5b04;
    background: var(--finance-soft);
}

.empty-state[b-rdkv7okuwu] {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 46px 20px;
    text-align: center;
}

.empty-state > span[b-rdkv7okuwu] {
    width: 58px;
    height: 58px;
    border-radius: 22px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.empty-state strong[b-rdkv7okuwu] {
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 950;
}

.balance-sheet-page [b-rdkv7okuwu]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.balance-sheet-page [b-rdkv7okuwu]::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, 0.52);
    border-radius: 999px;
}

.balance-sheet-page [b-rdkv7okuwu]::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.36);
    border-radius: 999px;
}

@media (max-width: 1320px) {
    .kpi-grid[b-rdkv7okuwu] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .equation-strip[b-rdkv7okuwu] {
        grid-template-columns: 1fr auto 1fr;
    }
}

@media (max-width: 1060px) {
    .report-grid[b-rdkv7okuwu] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .balance-sheet-page[b-rdkv7okuwu] {
        padding-inline: 12px !important;
    }

    .bs-hero[b-rdkv7okuwu],
    .section-head[b-rdkv7okuwu],
    .controls-grid[b-rdkv7okuwu],
    .status-banner[b-rdkv7okuwu] {
        align-items: stretch;
        flex-direction: column;
    }

    .bs-hero[b-rdkv7okuwu] {
        padding: 20px;
    }

    .refresh-btn[b-rdkv7okuwu] {
        width: 100%;
    }

    .controls-grid[b-rdkv7okuwu],
    .kpi-grid[b-rdkv7okuwu],
    .equation-strip[b-rdkv7okuwu] {
        grid-template-columns: 1fr;
    }

    .period-chips[b-rdkv7okuwu] {
        justify-content: flex-start;
    }

    .operator[b-rdkv7okuwu] {
        width: 42px;
        margin: 0 auto;
    }

    .breakdown-row[b-rdkv7okuwu] {
        align-items: flex-start;
        flex-direction: column;
    }

    .breakdown-row em[b-rdkv7okuwu] {
        text-align: left;
    }
}

@media (max-width: 520px) {
    .hero-main[b-rdkv7okuwu] {
        align-items: flex-start;
    }

    .hero-icon[b-rdkv7okuwu] {
        width: 52px;
        height: 52px;
        border-radius: 20px;
    }

    .comparison-label[b-rdkv7okuwu],
    .banner-equation[b-rdkv7okuwu] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Components/Pages/ChartOfAccountsPage.razor.rz.scp.css */
.accounts-page[b-l0y1qspplz] {
    --coa-ink: #16202f;
    --coa-muted: #667085;
    --coa-soft: rgba(255, 255, 255, 0.76);
    --coa-line: rgba(148, 163, 184, 0.24);
    --coa-shadow: 0 24px 70px rgba(31, 41, 55, 0.1);
    --coa-blue: #0ea5e9;
    --coa-violet: #8b5cf6;
    --coa-green: #10b981;
    --coa-amber: #f59e0b;
    --coa-rose: #fb7185;
    --coa-cyan: #06b6d4;
    font-family: "Noto Sans Myanmar", "Pyidaungsu", Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    color: var(--coa-ink);
}

.accounts-shell[b-l0y1qspplz] {
    display: grid;
    gap: 16px;
    min-height: 0;
}

.accounts-hero[b-l0y1qspplz],
.summary-card[b-l0y1qspplz],
.group-card[b-l0y1qspplz],
.controls-card[b-l0y1qspplz],
.health-banner[b-l0y1qspplz],
.chart-card[b-l0y1qspplz],
.modal-card[b-l0y1qspplz] {
    border: 1px solid rgba(255, 255, 255, 0.78);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.72)),
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.12), transparent 38%),
        radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.1), transparent 34%);
    box-shadow: var(--coa-shadow);
    backdrop-filter: blur(20px);
}

.accounts-hero[b-l0y1qspplz] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 22px;
    padding: 24px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

.accounts-hero[b-l0y1qspplz]::after {
    content: "";
    position: absolute;
    inset: auto -80px -110px auto;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(217, 70, 239, 0.14));
    filter: blur(6px);
    pointer-events: none;
}

.hero-copy[b-l0y1qspplz],
.hero-actions[b-l0y1qspplz] {
    position: relative;
    z-index: 1;
}

.eyebrow[b-l0y1qspplz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.hero-copy h1[b-l0y1qspplz] {
    margin: 12px 0 6px;
    font-size: clamp(1.7rem, 3vw, 2.45rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.hero-copy p[b-l0y1qspplz] {
    max-width: 760px;
    margin: 0;
    color: var(--coa-muted);
    line-height: 1.65;
}

.hero-actions[b-l0y1qspplz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 270px;
}

.hero-metric[b-l0y1qspplz] {
    display: grid;
    gap: 2px;
    min-width: 118px;
    padding: 14px 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.82);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.hero-metric span[b-l0y1qspplz],
.summary-card span[b-l0y1qspplz],
.field-shell > span[b-l0y1qspplz],
.modal-field > span[b-l0y1qspplz],
.modal-section-title[b-l0y1qspplz] {
    color: var(--coa-muted);
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hero-metric strong[b-l0y1qspplz] {
    font-size: 1.5rem;
    line-height: 1;
}

.primary-btn[b-l0y1qspplz],
.secondary-btn[b-l0y1qspplz],
.ghost-btn[b-l0y1qspplz],
.icon-btn[b-l0y1qspplz],
.modal-close[b-l0y1qspplz] {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-weight: 850;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.primary-btn[b-l0y1qspplz] {
    min-height: 48px;
    padding: 0 18px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #06b6d4, #2563eb 52%, #8b5cf6);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.26);
}

.primary-btn.compact[b-l0y1qspplz] {
    min-height: 44px;
    padding-inline: 20px;
}

.secondary-btn[b-l0y1qspplz],
.ghost-btn[b-l0y1qspplz] {
    min-height: 42px;
    padding: 0 15px;
    border-radius: 15px;
    color: #334155;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.primary-btn:hover[b-l0y1qspplz],
.secondary-btn:hover[b-l0y1qspplz],
.ghost-btn:hover[b-l0y1qspplz],
.icon-btn:hover[b-l0y1qspplz],
.modal-close:hover[b-l0y1qspplz] {
    transform: translateY(-1px);
}

.summary-grid[b-l0y1qspplz] {
    display: grid;
    grid-template-columns: repeat(6, minmax(140px, 1fr));
    gap: 12px;
}

.summary-card[b-l0y1qspplz] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 126px;
    padding: 18px;
    border-radius: 24px;
}

.summary-card strong[b-l0y1qspplz] {
    display: block;
    margin-top: 5px;
    font-size: 1.7rem;
    letter-spacing: -0.04em;
}

.summary-card small[b-l0y1qspplz],
.account-cell small[b-l0y1qspplz],
.group-chip small[b-l0y1qspplz],
.mobile-card-top small[b-l0y1qspplz],
.modal-head p[b-l0y1qspplz],
.active-switch small[b-l0y1qspplz],
.muted-note[b-l0y1qspplz] {
    color: var(--coa-muted);
}

.kpi-icon[b-l0y1qspplz],
.section-icon[b-l0y1qspplz],
.health-icon[b-l0y1qspplz],
.modal-icon[b-l0y1qspplz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.kpi-icon[b-l0y1qspplz] {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.summary-card.total .kpi-icon[b-l0y1qspplz],
.summary-card.system .kpi-icon[b-l0y1qspplz] {
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
}

.summary-card.asset .kpi-icon[b-l0y1qspplz],
.asset .kpi-icon[b-l0y1qspplz],
.account-icon.asset[b-l0y1qspplz],
.group-chip.asset span[b-l0y1qspplz] {
    background: linear-gradient(135deg, #06b6d4, #0ea5e9);
}

.summary-card.liability .kpi-icon[b-l0y1qspplz],
.account-icon.liability[b-l0y1qspplz],
.group-chip.liability span[b-l0y1qspplz] {
    background: linear-gradient(135deg, #f97316, #f59e0b);
}

.summary-card.income .kpi-icon[b-l0y1qspplz],
.account-icon.income[b-l0y1qspplz],
.group-chip.income span[b-l0y1qspplz] {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.summary-card.expense .kpi-icon[b-l0y1qspplz],
.account-icon.expense[b-l0y1qspplz],
.group-chip.expense span[b-l0y1qspplz] {
    background: linear-gradient(135deg, #fb7185, #f43f5e);
}

.account-icon.equity[b-l0y1qspplz],
.group-chip.equity span[b-l0y1qspplz] {
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
}

.account-icon.cogs[b-l0y1qspplz],
.group-chip.cogs span[b-l0y1qspplz] {
    background: linear-gradient(135deg, #64748b, #334155);
}

.group-card[b-l0y1qspplz],
.controls-card[b-l0y1qspplz],
.chart-card[b-l0y1qspplz] {
    border-radius: 26px;
    padding: 18px;
}

.card-head[b-l0y1qspplz],
.chart-head[b-l0y1qspplz],
.modal-head[b-l0y1qspplz],
.modal-foot[b-l0y1qspplz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.section-icon[b-l0y1qspplz] {
    width: 34px;
    height: 34px;
    margin-right: 8px;
    border-radius: 13px;
    color: #0284c7;
    background: rgba(14, 165, 233, 0.12);
}

.section-title[b-l0y1qspplz] {
    font-weight: 900;
}

.group-list[b-l0y1qspplz] {
    display: grid;
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.group-chip[b-l0y1qspplz] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 74px;
    padding: 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.group-chip span[b-l0y1qspplz],
.account-icon[b-l0y1qspplz] {
    width: 38px;
    height: 38px;
    border-radius: 15px;
    color: #fff;
}

.controls-grid[b-l0y1qspplz] {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.field-shell[b-l0y1qspplz],
.modal-field[b-l0y1qspplz] {
    display: grid;
    gap: 8px;
}

.input-shell[b-l0y1qspplz],
.select-shell[b-l0y1qspplz],
.modal-input[b-l0y1qspplz] {
    min-height: 48px;
    border-radius: 17px;
    border: 1px solid rgba(148, 163, 184, 0.26);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.input-shell[b-l0y1qspplz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-inline: 14px;
}

.input-shell i[b-l0y1qspplz] {
    color: #0ea5e9;
}

.entry-control[b-l0y1qspplz],
.modal-input[b-l0y1qspplz] {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--coa-ink);
    background: transparent;
    font-weight: 750;
}

.select-shell .entry-control[b-l0y1qspplz],
.modal-input[b-l0y1qspplz] {
    padding: 0 14px;
}

.entry-control[b-l0y1qspplz]::placeholder {
    color: #94a3b8;
    font-weight: 650;
}

.health-banner[b-l0y1qspplz] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 24px;
}

.health-banner p[b-l0y1qspplz] {
    margin: 3px 0 0;
    color: var(--coa-muted);
}

.health-icon[b-l0y1qspplz] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    color: #fff;
}

.health-banner.healthy .health-icon[b-l0y1qspplz] {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.health-banner.warning .health-icon[b-l0y1qspplz] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.health-banner.danger .health-icon[b-l0y1qspplz] {
    background: linear-gradient(135deg, #fb7185, #ef4444);
}

.chart-card[b-l0y1qspplz] {
    padding: 0;
    overflow: hidden;
}

.chart-head[b-l0y1qspplz] {
    padding: 18px 20px;
    border-bottom: 1px solid var(--coa-line);
}

.count-chip[b-l0y1qspplz],
.type-pill[b-l0y1qspplz],
.balance-pill[b-l0y1qspplz],
.status-pill[b-l0y1qspplz],
.code-pill[b-l0y1qspplz] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.count-chip[b-l0y1qspplz] {
    padding: 7px 12px;
    color: #0369a1;
    background: rgba(14, 165, 233, 0.1);
}

.accounts-table-wrap[b-l0y1qspplz] {
    overflow-x: auto;
}

.accounts-table[b-l0y1qspplz] {
    width: 100%;
    min-width: 840px;
    border-collapse: separate;
    border-spacing: 0;
}

.accounts-table th[b-l0y1qspplz] {
    padding: 13px 18px;
    color: #64748b;
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(248, 250, 252, 0.84);
}

.accounts-table td[b-l0y1qspplz] {
    padding: 15px 18px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    vertical-align: middle;
}

.accounts-table tbody tr[b-l0y1qspplz] {
    transition: background 0.18s ease, transform 0.18s ease;
}

.accounts-table tbody tr:hover[b-l0y1qspplz] {
    background: rgba(14, 165, 233, 0.04);
}

.code-pill[b-l0y1qspplz] {
    padding: 8px 11px;
    color: #334155;
    background: rgba(15, 23, 42, 0.05);
    font-family: "Cascadia Mono", Consolas, monospace;
}

.account-cell[b-l0y1qspplz] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-cell strong[b-l0y1qspplz],
.mobile-card-top strong[b-l0y1qspplz] {
    display: block;
    font-weight: 900;
}

.account-icon[b-l0y1qspplz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
}

.type-pill[b-l0y1qspplz],
.balance-pill[b-l0y1qspplz],
.status-pill[b-l0y1qspplz] {
    padding: 7px 10px;
}

.type-pill.asset[b-l0y1qspplz] {
    color: #0369a1;
    background: rgba(14, 165, 233, 0.1);
}

.type-pill.liability[b-l0y1qspplz] {
    color: #b45309;
    background: rgba(245, 158, 11, 0.12);
}

.type-pill.equity[b-l0y1qspplz] {
    color: #7e22ce;
    background: rgba(139, 92, 246, 0.12);
}

.type-pill.income[b-l0y1qspplz] {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
}

.type-pill.cogs[b-l0y1qspplz],
.type-pill.expense[b-l0y1qspplz] {
    color: #be123c;
    background: rgba(251, 113, 133, 0.12);
}

.balance-pill.debit[b-l0y1qspplz] {
    color: #075985;
    background: rgba(14, 165, 233, 0.1);
}

.balance-pill.credit[b-l0y1qspplz] {
    color: #065f46;
    background: rgba(16, 185, 129, 0.11);
}

.status-pill.system[b-l0y1qspplz] {
    color: #5b21b6;
    background: rgba(139, 92, 246, 0.12);
}

.status-pill.editable[b-l0y1qspplz] {
    color: #047857;
    background: rgba(16, 185, 129, 0.12);
}

.status-pill.inactive[b-l0y1qspplz] {
    color: #64748b;
    background: rgba(100, 116, 139, 0.12);
}

.icon-btn[b-l0y1qspplz] {
    width: 39px;
    height: 39px;
    border-radius: 14px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
}

.empty-state[b-l0y1qspplz] {
    display: grid;
    place-items: center;
    gap: 6px;
    padding: 36px 16px;
    color: var(--coa-muted);
    text-align: center;
}

.empty-state i[b-l0y1qspplz] {
    font-size: 1.7rem;
    color: #94a3b8;
}

.empty-state strong[b-l0y1qspplz] {
    color: var(--coa-ink);
}

.mobile-account-list[b-l0y1qspplz] {
    display: none;
    gap: 12px;
    padding: 14px;
}

.mobile-account-card[b-l0y1qspplz] {
    padding: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.mobile-card-top[b-l0y1qspplz] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
}

.mobile-card-tags[b-l0y1qspplz] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.accounts-modal-backdrop[b-l0y1qspplz] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(12px);
}

.accounts-modal[b-l0y1qspplz] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: grid;
    place-items: center;
    padding: 18px;
    overflow-y: auto;
}

.modal-card[b-l0y1qspplz] {
    width: min(680px, 100%);
    border-radius: 30px;
    overflow: hidden;
}

.modal-head[b-l0y1qspplz] {
    padding: 20px 22px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.92), rgba(37, 99, 235, 0.88)),
        radial-gradient(circle at top right, rgba(217, 70, 239, 0.35), transparent 42%);
}

.modal-head > div[b-l0y1qspplz] {
    display: flex;
    align-items: center;
    gap: 13px;
}

.modal-icon[b-l0y1qspplz] {
    width: 46px;
    height: 46px;
    border-radius: 18px;
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
}

.modal-head h5[b-l0y1qspplz] {
    margin: 0;
    font-weight: 900;
}

.modal-head p[b-l0y1qspplz] {
    margin: 3px 0 0;
    color: rgba(255, 255, 255, 0.78);
}

.modal-close[b-l0y1qspplz] {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
}

.modal-body[b-l0y1qspplz] {
    display: grid;
    gap: 16px;
    padding: 20px 22px;
}

.modal-section[b-l0y1qspplz] {
    display: grid;
    gap: 11px;
}

.modal-grid[b-l0y1qspplz] {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 12px;
}

.modal-field.short[b-l0y1qspplz] {
    min-width: 0;
}

.modal-input[b-l0y1qspplz] {
    min-height: 50px;
}

.active-switch[b-l0y1qspplz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.76);
    border: 1px solid rgba(148, 163, 184, 0.22);
}

.active-switch strong[b-l0y1qspplz] {
    display: block;
}

.switch-input[b-l0y1qspplz] {
    width: 52px;
    height: 28px;
    flex: 0 0 auto;
    accent-color: #2563eb;
}

.system-note[b-l0y1qspplz] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    color: #5b21b6;
    background: rgba(139, 92, 246, 0.1);
}

.modal-foot[b-l0y1qspplz] {
    padding: 16px 22px 20px;
    border-top: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(255, 255, 255, 0.54);
}

@media (max-width: 1400px) {
    .summary-grid[b-l0y1qspplz],
    .group-list[b-l0y1qspplz] {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }

    .controls-grid[b-l0y1qspplz] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .field-shell.search[b-l0y1qspplz] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .accounts-page[b-l0y1qspplz] {
        padding-inline: 14px !important;
    }

    .accounts-hero[b-l0y1qspplz] {
        flex-direction: column;
    }

    .hero-actions[b-l0y1qspplz] {
        min-width: 0;
        justify-content: space-between;
    }

    .summary-grid[b-l0y1qspplz],
    .group-list[b-l0y1qspplz],
    .controls-grid[b-l0y1qspplz],
    .modal-grid[b-l0y1qspplz] {
        grid-template-columns: 1fr;
    }

    .accounts-table-wrap[b-l0y1qspplz] {
        display: none;
    }

    .mobile-account-list[b-l0y1qspplz] {
        display: grid;
    }
}

@media (max-width: 560px) {
    .accounts-page[b-l0y1qspplz] {
        padding: 10px !important;
    }

    .accounts-hero[b-l0y1qspplz],
    .group-card[b-l0y1qspplz],
    .controls-card[b-l0y1qspplz],
    .health-banner[b-l0y1qspplz] {
        border-radius: 22px;
        padding: 16px;
    }

    .hero-actions[b-l0y1qspplz],
    .card-head[b-l0y1qspplz],
    .chart-head[b-l0y1qspplz],
    .modal-foot[b-l0y1qspplz],
    .active-switch[b-l0y1qspplz] {
        align-items: stretch;
        flex-direction: column;
    }

    .primary-btn[b-l0y1qspplz],
    .secondary-btn[b-l0y1qspplz],
    .ghost-btn[b-l0y1qspplz] {
        width: 100%;
    }
}
/* /Components/Pages/ClassesSetUpPage.razor.rz.scp.css */
@keyframes sectionsRise-b-81esjwj4k3 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sectionsPulse-b-81esjwj4k3 {
    0%, 100% {
        opacity: .46;
    }

    50% {
        opacity: 1;
    }
}

.sections-page[b-81esjwj4k3] {
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 36px;
    color: var(--text-body, #4e6274);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.sections-page[b-81esjwj4k3]::before,
.sections-page[b-81esjwj4k3]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.sections-page[b-81esjwj4k3]::before {
    width: 34vw;
    min-width: 320px;
    aspect-ratio: 1;
    left: 5%;
    top: 2%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.sections-page[b-81esjwj4k3]::after {
    width: 38vw;
    min-width: 320px;
    aspect-ratio: 1;
    right: 0;
    bottom: -2%;
    background:
        radial-gradient(circle at 36% 34%, rgba(139, 92, 246, .14), transparent 58%),
        radial-gradient(circle at 72% 70%, rgba(236, 72, 153, .12), transparent 58%);
}

.sections-shell[b-81esjwj4k3] {
    display: grid;
    gap: 18px;
    width: min(100%, 1360px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft, 0 18px 45px rgba(23, 55, 90, .08));
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: sectionsRise-b-81esjwj4k3 .32s ease-out both;
}

.sections-hero[b-81esjwj4k3],
.sections-summary-card[b-81esjwj4k3],
.sections-map-card[b-81esjwj4k3],
.sections-toolbar-card[b-81esjwj4k3],
.sections-list-card[b-81esjwj4k3] {
    border: 1px solid rgba(255, 255, 255, .76);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-card, 0 10px 26px rgba(23, 55, 90, .07));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.sections-hero[b-81esjwj4k3] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: 30px;
}

.sections-hero[b-81esjwj4k3]::after {
    content: "";
    position: absolute;
    right: 36px;
    bottom: -118px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(236, 72, 153, .12), transparent 68%);
    pointer-events: none;
}

.sections-hero-title[b-81esjwj4k3] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.sections-hero-icon[b-81esjwj4k3],
.summary-icon[b-81esjwj4k3],
.sections-modal-icon[b-81esjwj4k3] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.sections-hero-icon[b-81esjwj4k3] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--violet, #8b5cf6));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.sections-hero h1[b-81esjwj4k3] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.18;
}

.sections-hero p[b-81esjwj4k3] {
    margin: 8px 0 0;
    max-width: 760px;
    color: var(--text-muted, #8a9aaa);
    font-size: .95rem;
    line-height: 1.55;
}

.sections-hero-meta[b-81esjwj4k3] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.sections-hero-meta span[b-81esjwj4k3],
.sections-count-pill[b-81esjwj4k3] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    color: var(--primary-dark, #0369a1);
    font-size: .76rem;
    font-weight: 850;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 999px;
    background: rgba(224, 245, 255, .78);
}

.sections-primary-button[b-81esjwj4k3],
.sections-soft-button[b-81esjwj4k3],
.sections-danger-button[b-81esjwj4k3] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    font-size: .88rem;
    font-weight: 850;
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.sections-primary-button[b-81esjwj4k3] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--violet, #8b5cf6)) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .2);
}

.sections-soft-button[b-81esjwj4k3] {
    color: var(--text-main, #102033) !important;
    border: 1px solid rgba(120, 170, 210, .2) !important;
    background: rgba(255, 255, 255, .7) !important;
    box-shadow: none !important;
}

.sections-danger-button[b-81esjwj4k3] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .62) !important;
    background: linear-gradient(135deg, var(--danger, #ef476f), var(--pink, #ec4899)) !important;
    box-shadow: 0 16px 30px rgba(239, 71, 111, .18);
}

.sections-summary-grid[b-81esjwj4k3] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.sections-summary-card[b-81esjwj4k3] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    min-height: 128px;
    padding: 18px;
    border-radius: 24px;
}

.summary-icon[b-81esjwj4k3] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    color: var(--primary-dark, #0369a1);
    border-radius: 17px;
    background: rgba(14, 165, 233, .1);
}

.sections-summary-card.year .summary-icon[b-81esjwj4k3] {
    color: #6d28d9;
    background: rgba(139, 92, 246, .12);
}

.sections-summary-card.coverage .summary-icon[b-81esjwj4k3] {
    color: #047857;
    background: rgba(16, 185, 129, .12);
}

.sections-summary-card.capacity .summary-icon[b-81esjwj4k3] {
    color: #be185d;
    background: rgba(236, 72, 153, .11);
}

.summary-label[b-81esjwj4k3] {
    align-self: end;
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.sections-summary-card strong[b-81esjwj4k3] {
    min-width: 0;
    overflow: hidden;
    color: var(--text-main, #102033);
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sections-summary-card small[b-81esjwj4k3] {
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
    line-height: 1.35;
}

.sections-map-card[b-81esjwj4k3],
.sections-toolbar-card[b-81esjwj4k3],
.sections-list-card[b-81esjwj4k3] {
    border-radius: 28px;
}

.sections-map-card[b-81esjwj4k3],
.sections-list-card[b-81esjwj4k3] {
    padding: 22px;
}

.sections-card-header[b-81esjwj4k3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.sections-card-header.compact[b-81esjwj4k3] {
    margin-bottom: 16px;
}

.section-kicker[b-81esjwj4k3] {
    display: block;
    margin-bottom: 5px;
    color: var(--primary-dark, #0369a1);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sections-card-header h2[b-81esjwj4k3] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.12rem, 1.7vw, 1.34rem);
    font-weight: 900;
    letter-spacing: -.025em;
}

.sections-card-header p[b-81esjwj4k3] {
    margin: 6px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .88rem;
    line-height: 1.5;
}

.sections-map-grid[b-81esjwj4k3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
}

.section-map-item[b-81esjwj4k3] {
    position: relative;
    display: grid;
    gap: 7px;
    overflow: hidden;
    min-height: 126px;
    padding: 15px;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(248, 252, 255, .7)),
        rgba(255, 255, 255, .8);
    box-shadow: 0 10px 22px rgba(23, 55, 90, .055);
}

.section-map-item[b-81esjwj4k3]::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -32px;
    width: 92px;
    height: 92px;
    border-radius: 999px;
    background: rgba(14, 165, 233, .1);
}

.section-map-item.early[b-81esjwj4k3]::after {
    background: rgba(236, 72, 153, .1);
}

.section-map-item.primary[b-81esjwj4k3]::after {
    background: rgba(16, 185, 129, .1);
}

.section-map-item.secondary[b-81esjwj4k3]::after,
.section-map-item.upper[b-81esjwj4k3]::after {
    background: rgba(139, 92, 246, .11);
}

.section-grade-chip[b-81esjwj4k3],
.grade-pill[b-81esjwj4k3],
.capacity-pill[b-81esjwj4k3],
.year-pill[b-81esjwj4k3],
.section-capacity-mini[b-81esjwj4k3] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    border-radius: 999px;
    font-weight: 850;
    white-space: nowrap;
}

.section-grade-chip[b-81esjwj4k3],
.grade-pill[b-81esjwj4k3] {
    padding: 6px 11px;
    color: var(--primary-dark, #0369a1);
    font-size: .74rem;
    border: 1px solid rgba(14, 165, 233, .14);
    background: rgba(224, 245, 255, .78);
}

.section-map-item strong[b-81esjwj4k3] {
    position: relative;
    z-index: 1;
    color: var(--text-main, #102033);
    font-size: 1.05rem;
    font-weight: 900;
}

.section-map-item small[b-81esjwj4k3] {
    position: relative;
    z-index: 1;
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
    font-weight: 750;
}

.section-capacity-mini[b-81esjwj4k3] {
    position: relative;
    z-index: 1;
    padding: 6px 10px;
    color: #047857;
    font-size: .73rem;
    border: 1px solid rgba(16, 185, 129, .14);
    background: rgba(220, 252, 231, .72);
}

.sections-toolbar-card[b-81esjwj4k3] {
    display: grid;
    grid-template-columns: minmax(220px, 1.05fr) minmax(240px, 1.2fr) minmax(190px, .85fr) auto auto;
    align-items: end;
    gap: 13px;
    padding: 18px;
}

.sections-field[b-81esjwj4k3] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.sections-field > span[b-81esjwj4k3],
.sections-field > label[b-81esjwj4k3] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .02em;
}

.sections-field em[b-81esjwj4k3] {
    color: var(--danger, #ef476f);
    font-style: normal;
}

.sections-input[b-81esjwj4k3] {
    min-height: 46px;
    padding: 10px 14px;
    color: var(--text-main, #102033) !important;
    font-size: .9rem;
    font-weight: 750;
    border: 1px solid rgba(120, 170, 210, .22) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 8px 18px rgba(23, 55, 90, .04) !important;
}

.sections-input:focus[b-81esjwj4k3] {
    border-color: rgba(14, 165, 233, .72) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12), 0 10px 22px rgba(14, 165, 233, .07) !important;
}

.sections-search-wrap[b-81esjwj4k3],
.sections-select-wrap[b-81esjwj4k3] {
    position: relative;
}

.sections-search-wrap > i[b-81esjwj4k3] {
    position: absolute;
    z-index: 1;
    left: 15px;
    top: 50%;
    color: var(--primary, #0ea5e9);
    transform: translateY(-50%);
}

.sections-search-wrap .sections-input[b-81esjwj4k3] {
    padding-left: 42px;
}

.sections-select[b-81esjwj4k3] {
    padding-right: 42px;
    appearance: none;
}

.sections-select-wrap > i[b-81esjwj4k3] {
    position: absolute;
    right: 15px;
    top: 50%;
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.sections-toolbar-count[b-81esjwj4k3] {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 46px;
    min-width: 112px;
    padding: 6px 14px;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 16px;
    background: rgba(224, 245, 255, .64);
}

.sections-toolbar-count strong[b-81esjwj4k3] {
    color: var(--text-main, #102033);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.sections-toolbar-count span[b-81esjwj4k3] {
    color: var(--text-muted, #8a9aaa);
    font-size: .69rem;
    font-weight: 800;
}

.sections-table-wrap[b-81esjwj4k3] {
    overflow: auto;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
}

.sections-table-wrap[b-81esjwj4k3]::-webkit-scrollbar,
.sections-page[b-81esjwj4k3]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.sections-table-wrap[b-81esjwj4k3]::-webkit-scrollbar-track,
.sections-page[b-81esjwj4k3]::-webkit-scrollbar-track {
    background: rgba(224, 245, 255, .44);
    border-radius: 999px;
}

.sections-table-wrap[b-81esjwj4k3]::-webkit-scrollbar-thumb,
.sections-page[b-81esjwj4k3]::-webkit-scrollbar-thumb {
    background: rgba(14, 165, 233, .34);
    border-radius: 999px;
}

.sections-table[b-81esjwj4k3] {
    min-width: 940px;
    color: var(--text-body, #4e6274);
    border-collapse: separate;
    border-spacing: 0;
}

.sections-table thead[b-81esjwj4k3] {
    background: rgba(224, 245, 255, .56);
}

.sections-table th[b-81esjwj4k3] {
    padding: 15px 18px;
    color: var(--text-muted, #8a9aaa);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 0;
}

.sections-table td[b-81esjwj4k3] {
    padding: 15px 18px;
    vertical-align: middle;
    border-top: 1px solid rgba(120, 170, 210, .13);
}

.sections-table tbody tr[b-81esjwj4k3] {
    transition: background .18s ease, transform .18s ease;
}

.section-name-cell[b-81esjwj4k3] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.section-avatar[b-81esjwj4k3] {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--primary-dark, #0369a1);
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 16px;
    background: rgba(224, 245, 255, .68);
}

.section-name-cell strong[b-81esjwj4k3] {
    display: block;
    color: var(--text-main, #102033);
    font-size: .98rem;
    font-weight: 900;
}

.section-name-cell small[b-81esjwj4k3],
.section-grade-cell small[b-81esjwj4k3] {
    display: block;
    margin-top: 3px;
    color: var(--text-muted, #8a9aaa);
    font-size: .74rem;
    font-weight: 750;
}

.section-grade-cell[b-81esjwj4k3] {
    display: grid;
    gap: 3px;
    justify-items: start;
}

.grade-pill.early[b-81esjwj4k3],
.section-grade-chip.early[b-81esjwj4k3] {
    color: #be185d;
    border-color: rgba(236, 72, 153, .16);
    background: rgba(252, 231, 243, .72);
}

.grade-pill.primary[b-81esjwj4k3],
.section-grade-chip.primary[b-81esjwj4k3] {
    color: #047857;
    border-color: rgba(16, 185, 129, .16);
    background: rgba(220, 252, 231, .72);
}

.grade-pill.secondary[b-81esjwj4k3],
.grade-pill.upper[b-81esjwj4k3],
.section-grade-chip.secondary[b-81esjwj4k3],
.section-grade-chip.upper[b-81esjwj4k3] {
    color: #6d28d9;
    border-color: rgba(139, 92, 246, .16);
    background: rgba(237, 233, 254, .72);
}

.year-pill[b-81esjwj4k3] {
    padding: 8px 12px;
    color: var(--text-main, #102033);
    font-size: .8rem;
    border: 1px solid rgba(120, 170, 210, .16);
    background: rgba(248, 252, 255, .88);
}

.capacity-pill[b-81esjwj4k3] {
    padding: 8px 12px;
    color: #047857;
    font-size: .8rem;
    border: 1px solid rgba(16, 185, 129, .15);
    background: rgba(220, 252, 231, .72);
}

.capacity-pill.strong[b-81esjwj4k3] {
    color: var(--primary-dark, #0369a1);
    border-color: rgba(14, 165, 233, .15);
    background: rgba(224, 245, 255, .72);
}

.capacity-pill.compact[b-81esjwj4k3] {
    color: #b45309;
    border-color: rgba(245, 158, 11, .15);
    background: rgba(255, 247, 237, .84);
}

.sections-actions[b-81esjwj4k3] {
    display: inline-flex;
    justify-content: flex-end;
    gap: 8px;
}

.sections-icon-button[b-81esjwj4k3] {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.sections-icon-button.edit[b-81esjwj4k3] {
    color: var(--primary-dark, #0369a1);
}

.sections-icon-button.delete[b-81esjwj4k3] {
    color: var(--danger, #ef476f);
    border-color: rgba(239, 71, 111, .16);
    background: rgba(255, 228, 236, .58);
}

.sections-empty-state[b-81esjwj4k3],
.sections-loading-state[b-81esjwj4k3],
.sections-empty-inline[b-81esjwj4k3] {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 260px;
    padding: 36px;
    text-align: center;
    border: 1px dashed rgba(120, 170, 210, .25);
    border-radius: 24px;
    background: rgba(248, 252, 255, .62);
}

.sections-empty-inline[b-81esjwj4k3] {
    min-height: 112px;
    grid-template-columns: auto auto;
    justify-content: center;
}

.sections-empty-state > span[b-81esjwj4k3],
.sections-empty-inline > i[b-81esjwj4k3] {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: var(--primary-dark, #0369a1);
    border-radius: 22px;
    background: rgba(224, 245, 255, .72);
}

.sections-empty-state h3[b-81esjwj4k3] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: 1.12rem;
    font-weight: 900;
}

.sections-empty-state p[b-81esjwj4k3],
.sections-loading-state span[b-81esjwj4k3],
.sections-empty-inline span[b-81esjwj4k3] {
    margin: 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .9rem;
}

.sections-modal-backdrop[b-81esjwj4k3] {
    background: rgba(11, 38, 58, .18) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.sections-modal-backdrop.danger[b-81esjwj4k3] {
    background: rgba(54, 13, 28, .2) !important;
}

.sections-modal-shell[b-81esjwj4k3] {
    display: grid !important;
    place-items: center;
    padding: 18px;
}

.sections-modal-dialog[b-81esjwj4k3] {
    width: min(100%, 560px);
    margin: 0;
}

.sections-modal-dialog.delete-dialog[b-81esjwj4k3] {
    width: min(100%, 500px);
}

.sections-modal-content[b-81esjwj4k3] {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 28px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 28px 70px rgba(11, 38, 58, .18);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.sections-modal-header[b-81esjwj4k3] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(120, 170, 210, .14);
    background: linear-gradient(135deg, rgba(224, 245, 255, .8), rgba(255, 255, 255, .72));
}

.sections-modal-header.danger[b-81esjwj4k3] {
    background: linear-gradient(135deg, rgba(255, 228, 236, .82), rgba(255, 255, 255, .75));
}

.sections-modal-icon[b-81esjwj4k3] {
    width: 46px;
    height: 46px;
    color: white;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--violet, #8b5cf6));
}

.sections-modal-icon.danger[b-81esjwj4k3] {
    background: linear-gradient(135deg, var(--danger, #ef476f), var(--pink, #ec4899));
}

.sections-modal-header h5[b-81esjwj4k3] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: 1.12rem;
    font-weight: 900;
}

.sections-modal-header p[b-81esjwj4k3] {
    margin: 6px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .88rem;
    line-height: 1.45;
}

.sections-modal-body[b-81esjwj4k3] {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.sections-modal-grid[b-81esjwj4k3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(140px, .52fr);
    gap: 14px;
}

.capacity-input[b-81esjwj4k3] {
    text-align: center;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-weight: 900;
}

.sections-helper-card[b-81esjwj4k3],
.delete-summary-card[b-81esjwj4k3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    color: var(--text-body, #4e6274);
    font-size: .84rem;
    border: 1px solid rgba(14, 165, 233, .12);
    border-radius: 18px;
    background: rgba(224, 245, 255, .42);
}

.sections-helper-card i[b-81esjwj4k3] {
    color: var(--primary-dark, #0369a1);
}

.delete-summary-card[b-81esjwj4k3] {
    background: rgba(255, 228, 236, .5);
    border-color: rgba(239, 71, 111, .16);
}

.delete-summary-card > span[b-81esjwj4k3] {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--danger, #ef476f);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
}

.delete-summary-card strong[b-81esjwj4k3] {
    display: block;
    color: var(--text-main, #102033);
    font-weight: 900;
}

.delete-summary-card small[b-81esjwj4k3] {
    color: var(--text-muted, #8a9aaa);
}

.sections-modal-footer[b-81esjwj4k3] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 22px 22px;
    border-top: 1px solid rgba(120, 170, 210, .14);
    background: rgba(248, 252, 255, .7);
}

.skeleton[b-81esjwj4k3] {
    position: relative;
    overflow: hidden;
}

.skeleton[b-81esjwj4k3]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent);
    animation: sectionsPulse-b-81esjwj4k3 1.3s ease-in-out infinite;
}

.sections-summary-card.skeleton span[b-81esjwj4k3],
.sections-summary-card.skeleton strong[b-81esjwj4k3],
.sections-summary-card.skeleton small[b-81esjwj4k3] {
    display: block;
    border-radius: 999px;
    background: rgba(120, 170, 210, .14);
}

.sections-summary-card.skeleton span[b-81esjwj4k3] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    border-radius: 17px;
}

.sections-summary-card.skeleton strong[b-81esjwj4k3] {
    width: 70%;
    height: 24px;
}

.sections-summary-card.skeleton small[b-81esjwj4k3] {
    width: 86%;
    height: 12px;
}

.section-map-item.skeleton[b-81esjwj4k3] {
    min-height: 126px;
    background: rgba(255, 255, 255, .62);
}

@media (hover: hover) and (pointer: fine) {
    .sections-primary-button:hover[b-81esjwj4k3],
    .sections-soft-button:hover[b-81esjwj4k3],
    .sections-danger-button:hover[b-81esjwj4k3],
    .sections-icon-button:hover[b-81esjwj4k3],
    .section-map-item:hover[b-81esjwj4k3] {
        transform: translateY(-1px);
    }

    .sections-primary-button:hover[b-81esjwj4k3] {
        box-shadow: 0 20px 36px rgba(14, 165, 233, .25);
    }

    .sections-table tbody tr:hover[b-81esjwj4k3] {
        background: rgba(14, 165, 233, .04);
    }

    .sections-icon-button.edit:hover[b-81esjwj4k3] {
        color: white;
        background: var(--primary, #0ea5e9);
        box-shadow: 0 12px 24px rgba(14, 165, 233, .22);
    }

    .sections-icon-button.delete:hover[b-81esjwj4k3] {
        color: white;
        background: var(--danger, #ef476f);
        box-shadow: 0 12px 24px rgba(239, 71, 111, .18);
    }
}

.sections-primary-button:focus-visible[b-81esjwj4k3],
.sections-soft-button:focus-visible[b-81esjwj4k3],
.sections-danger-button:focus-visible[b-81esjwj4k3],
.sections-icon-button:focus-visible[b-81esjwj4k3],
.sections-input:focus-visible[b-81esjwj4k3] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 2px;
}

@media (max-width: 1199.98px) {
    .sections-summary-grid[b-81esjwj4k3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sections-toolbar-card[b-81esjwj4k3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sections-toolbar-count[b-81esjwj4k3],
    .sections-soft-button[b-81esjwj4k3] {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .sections-page[b-81esjwj4k3] {
        padding: 14px;
    }

    .sections-shell[b-81esjwj4k3] {
        gap: 14px;
        padding: 14px;
        border-radius: 24px;
    }

    .sections-hero[b-81esjwj4k3] {
        align-items: stretch;
        flex-direction: column;
        padding: 20px;
        border-radius: 24px;
    }

    .sections-hero-title[b-81esjwj4k3] {
        align-items: flex-start;
    }

    .sections-hero-icon[b-81esjwj4k3] {
        width: 52px;
        height: 52px;
        border-radius: 18px;
    }

    .sections-hero h1[b-81esjwj4k3] {
        font-size: 1.72rem;
        line-height: 1.25;
    }

    .sections-primary-button[b-81esjwj4k3] {
        width: 100%;
    }

    .sections-summary-grid[b-81esjwj4k3],
    .sections-toolbar-card[b-81esjwj4k3],
    .sections-modal-grid[b-81esjwj4k3] {
        grid-template-columns: 1fr;
    }

    .sections-card-header[b-81esjwj4k3] {
        align-items: stretch;
        flex-direction: column;
    }

    .sections-map-card[b-81esjwj4k3],
    .sections-list-card[b-81esjwj4k3] {
        padding: 16px;
        border-radius: 24px;
    }

    .sections-table-wrap[b-81esjwj4k3] {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .sections-table[b-81esjwj4k3],
    .sections-table thead[b-81esjwj4k3],
    .sections-table tbody[b-81esjwj4k3],
    .sections-table tr[b-81esjwj4k3],
    .sections-table th[b-81esjwj4k3],
    .sections-table td[b-81esjwj4k3] {
        display: block;
        width: 100%;
    }

    .sections-table[b-81esjwj4k3] {
        min-width: 0;
    }

    .sections-table thead[b-81esjwj4k3] {
        display: none;
    }

    .sections-table tbody[b-81esjwj4k3] {
        display: grid;
        gap: 12px;
    }

    .sections-table tr[b-81esjwj4k3] {
        overflow: hidden;
        border: 1px solid rgba(120, 170, 210, .16);
        border-radius: 22px;
        background: rgba(255, 255, 255, .78);
        box-shadow: 0 10px 22px rgba(23, 55, 90, .055);
    }

    .sections-table td[b-81esjwj4k3] {
        display: grid;
        grid-template-columns: minmax(94px, .45fr) minmax(0, 1fr);
        gap: 12px;
        padding: 13px 14px;
        text-align: left !important;
        border-top: 1px solid rgba(120, 170, 210, .11);
    }

    .sections-table td[b-81esjwj4k3]::before {
        content: attr(data-label);
        color: var(--text-muted, #8a9aaa);
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .sections-table td:first-child[b-81esjwj4k3] {
        grid-template-columns: 1fr;
        border-top: 0;
    }

    .sections-table td:first-child[b-81esjwj4k3]::before {
        display: none;
    }

    .sections-actions[b-81esjwj4k3] {
        width: 100%;
    }

    .sections-icon-button[b-81esjwj4k3] {
        flex: 1 1 0;
        width: auto;
    }

    .sections-modal-footer[b-81esjwj4k3] {
        display: grid;
    }

    .sections-modal-footer .btn[b-81esjwj4k3] {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .sections-page[b-81esjwj4k3] {
        padding: 10px;
    }

    .sections-hero-title[b-81esjwj4k3],
    .sections-hero-meta[b-81esjwj4k3],
    .section-name-cell[b-81esjwj4k3] {
        flex-direction: column;
        align-items: flex-start;
    }

    .sections-table td[b-81esjwj4k3] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-81esjwj4k3],
    *[b-81esjwj4k3]::before,
    *[b-81esjwj4k3]::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* /Components/Pages/ClassSubjectsPage.razor.rz.scp.css */
@keyframes matrixRise-b-laujgxnmdg {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes matrixPulse-b-laujgxnmdg {
    0%, 100% {
        opacity: .46;
    }

    50% {
        opacity: 1;
    }
}

.class-subjects-page[b-laujgxnmdg] {
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 36px;
    color: var(--text-body, #4e6274);
    font-family: "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.class-subjects-page[b-laujgxnmdg]::before,
.class-subjects-page[b-laujgxnmdg]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.class-subjects-page[b-laujgxnmdg]::before {
    width: 34vw;
    min-width: 320px;
    aspect-ratio: 1;
    left: 5%;
    top: 2%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.class-subjects-page[b-laujgxnmdg]::after {
    width: 38vw;
    min-width: 320px;
    aspect-ratio: 1;
    right: 0;
    bottom: -2%;
    background:
        radial-gradient(circle at 36% 34%, rgba(139, 92, 246, .14), transparent 58%),
        radial-gradient(circle at 72% 70%, rgba(236, 72, 153, .12), transparent 58%);
}

.class-subjects-shell[b-laujgxnmdg] {
    display: grid;
    gap: 18px;
    width: min(100%, 1560px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft, 0 18px 45px rgba(23, 55, 90, .08));
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: matrixRise-b-laujgxnmdg .32s ease-out both;
}

.matrix-hero[b-laujgxnmdg],
.matrix-summary-card[b-laujgxnmdg],
.matrix-toolbar-card[b-laujgxnmdg],
.matrix-card[b-laujgxnmdg] {
    border: 1px solid rgba(255, 255, 255, .76);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-card, 0 10px 26px rgba(23, 55, 90, .07));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.matrix-hero[b-laujgxnmdg] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: 30px;
}

.matrix-hero[b-laujgxnmdg]::after {
    content: "";
    position: absolute;
    right: 36px;
    bottom: -118px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(16, 185, 129, .12), transparent 68%);
    pointer-events: none;
}

.matrix-hero-title[b-laujgxnmdg] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.matrix-hero-icon[b-laujgxnmdg],
.summary-icon[b-laujgxnmdg] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.matrix-hero-icon[b-laujgxnmdg] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--success, #10b981));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.matrix-hero h1[b-laujgxnmdg] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.1;
}

.matrix-hero p[b-laujgxnmdg] {
    margin: 8px 0 0;
    max-width: 760px;
    color: var(--text-muted, #8a9aaa);
    font-size: .95rem;
    line-height: 1.55;
}

.matrix-hero-meta[b-laujgxnmdg] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.matrix-hero-meta span[b-laujgxnmdg],
.matrix-status-pill[b-laujgxnmdg],
.matrix-count-pill[b-laujgxnmdg] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    color: var(--primary-dark, #0369a1);
    font-size: .76rem;
    font-weight: 850;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 999px;
    background: rgba(224, 245, 255, .78);
}

.matrix-status-pill.saved[b-laujgxnmdg] {
    color: #047857;
    border-color: rgba(16, 185, 129, .16);
    background: rgba(220, 252, 231, .78);
}

.matrix-status-pill.dirty[b-laujgxnmdg] {
    color: #b45309;
    border-color: rgba(245, 158, 11, .18);
    background: rgba(255, 247, 237, .9);
}

.matrix-summary-grid[b-laujgxnmdg] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.matrix-summary-card[b-laujgxnmdg] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    min-height: 124px;
    padding: 18px;
    border-radius: 24px;
}

.summary-icon[b-laujgxnmdg] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    color: var(--primary-dark, #0369a1);
    border-radius: 17px;
    background: rgba(14, 165, 233, .1);
}

.matrix-summary-card.subjects .summary-icon[b-laujgxnmdg] {
    color: #6d28d9;
    background: rgba(139, 92, 246, .12);
}

.matrix-summary-card.teachers .summary-icon[b-laujgxnmdg] {
    color: #047857;
    background: rgba(16, 185, 129, .12);
}

.matrix-summary-card.assigned .summary-icon[b-laujgxnmdg] {
    color: #be185d;
    background: rgba(236, 72, 153, .11);
}

.summary-label[b-laujgxnmdg] {
    align-self: end;
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.matrix-summary-card strong[b-laujgxnmdg] {
    color: var(--text-main, #102033);
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.12;
}

.matrix-summary-card small[b-laujgxnmdg] {
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
    line-height: 1.35;
}

.matrix-toolbar-card[b-laujgxnmdg] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(190px, .8fr) minmax(260px, 1.2fr) auto auto;
    align-items: end;
    gap: 13px;
    padding: 18px;
    border-radius: 28px;
}

.matrix-field[b-laujgxnmdg],
.matrix-density-toggle[b-laujgxnmdg] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.matrix-field > span[b-laujgxnmdg],
.matrix-density-toggle > span[b-laujgxnmdg] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .02em;
}

.matrix-input[b-laujgxnmdg] {
    min-height: 46px;
    padding: 10px 14px;
    color: var(--text-main, #102033) !important;
    font-size: .9rem;
    font-weight: 750;
    border: 1px solid rgba(120, 170, 210, .22) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 8px 18px rgba(23, 55, 90, .04) !important;
}

.matrix-input:focus[b-laujgxnmdg] {
    border-color: rgba(14, 165, 233, .72) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12), 0 10px 22px rgba(14, 165, 233, .07) !important;
}

.matrix-search-wrap[b-laujgxnmdg],
.matrix-select-wrap[b-laujgxnmdg] {
    position: relative;
}

.matrix-search-wrap > i[b-laujgxnmdg] {
    position: absolute;
    z-index: 1;
    left: 15px;
    top: 50%;
    color: var(--primary, #0ea5e9);
    transform: translateY(-50%);
}

.matrix-search-wrap .matrix-input[b-laujgxnmdg] {
    padding-left: 42px;
}

.matrix-select[b-laujgxnmdg] {
    padding-right: 42px;
    appearance: none;
}

.matrix-select-wrap > i[b-laujgxnmdg] {
    position: absolute;
    right: 15px;
    top: 50%;
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.density-button[b-laujgxnmdg],
.matrix-soft-button[b-laujgxnmdg],
.matrix-primary-button[b-laujgxnmdg] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    font-size: .88rem;
    font-weight: 850;
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.density-button[b-laujgxnmdg],
.matrix-soft-button[b-laujgxnmdg] {
    color: var(--text-main, #102033) !important;
    border: 1px solid rgba(120, 170, 210, .2) !important;
    background: rgba(255, 255, 255, .7) !important;
    box-shadow: none !important;
}

.density-button.active[b-laujgxnmdg] {
    color: var(--primary-dark, #0369a1) !important;
    border-color: rgba(14, 165, 233, .18) !important;
    background: rgba(224, 245, 255, .72) !important;
}

.matrix-primary-button[b-laujgxnmdg] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--violet, #8b5cf6)) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .2);
}

.matrix-primary-button:disabled[b-laujgxnmdg] {
    opacity: .58;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.matrix-card[b-laujgxnmdg] {
    overflow: hidden;
    padding: 22px;
    border-radius: 28px;
}

.matrix-card-header[b-laujgxnmdg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.section-kicker[b-laujgxnmdg] {
    display: block;
    margin-bottom: 5px;
    color: var(--primary-dark, #0369a1);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.matrix-card-header h2[b-laujgxnmdg] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.12rem, 1.7vw, 1.34rem);
    font-weight: 900;
    letter-spacing: -.025em;
}

.matrix-card-header h2 i[b-laujgxnmdg] {
    color: var(--primary, #0ea5e9);
}

.matrix-card-header p[b-laujgxnmdg] {
    margin: 6px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .88rem;
}

.matrix-legend[b-laujgxnmdg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 18px;
    background: rgba(248, 252, 255, .7);
}

.matrix-legend span[b-laujgxnmdg],
.matrix-legend strong[b-laujgxnmdg] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-body, #4e6274);
    font-size: .78rem;
    font-weight: 750;
}

.matrix-legend strong[b-laujgxnmdg] {
    color: var(--primary-dark, #0369a1);
}

.matrix-legend .assigned[b-laujgxnmdg] {
    color: var(--success, #10b981);
}

.matrix-legend .teacher[b-laujgxnmdg] {
    color: var(--primary, #0ea5e9);
}

.matrix-legend .empty[b-laujgxnmdg] {
    color: var(--text-muted, #8a9aaa);
}

.matrix-table-wrap[b-laujgxnmdg] {
    max-height: calc(100vh - 300px);
    min-height: 360px;
    overflow: auto;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 22px;
    background: rgba(255, 255, 255, .7);
}

.matrix-table-wrap[b-laujgxnmdg]::-webkit-scrollbar,
.class-subjects-page[b-laujgxnmdg]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.matrix-table-wrap[b-laujgxnmdg]::-webkit-scrollbar-track,
.class-subjects-page[b-laujgxnmdg]::-webkit-scrollbar-track {
    background: rgba(224, 245, 255, .44);
    border-radius: 999px;
}

.matrix-table-wrap[b-laujgxnmdg]::-webkit-scrollbar-thumb,
.class-subjects-page[b-laujgxnmdg]::-webkit-scrollbar-thumb {
    background: rgba(14, 165, 233, .34);
    border-radius: 999px;
}

.class-subject-matrix[b-laujgxnmdg] {
    min-width: max-content;
    color: var(--text-body, #4e6274);
    border-collapse: separate;
    border-spacing: 0;
}

.class-subject-matrix thead th[b-laujgxnmdg] {
    position: sticky;
    top: 0;
    z-index: 5;
    min-width: 230px;
    padding: 12px;
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid rgba(120, 170, 210, .16);
    background: rgba(248, 252, 255, .96);
    box-shadow: 0 10px 20px rgba(23, 55, 90, .045);
}

.class-subject-matrix th.matrix-class-sticky[b-laujgxnmdg] {
    left: 0;
    z-index: 7;
    min-width: 270px;
    max-width: 290px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 10px 0 22px rgba(23, 55, 90, .06);
}

.class-subject-matrix tbody .matrix-class-sticky[b-laujgxnmdg] {
    position: sticky;
    left: 0;
    z-index: 4;
    padding: 14px;
    vertical-align: middle;
    border-top: 1px solid rgba(120, 170, 210, .13);
}

.class-subject-matrix td[b-laujgxnmdg] {
    min-width: 230px;
    padding: 10px;
    vertical-align: top;
    border-top: 1px solid rgba(120, 170, 210, .13);
    border-left: 1px solid rgba(120, 170, 210, .09);
    background: rgba(255, 255, 255, .54);
}

.matrix-table-wrap.compact .class-subject-matrix td[b-laujgxnmdg] {
    min-width: 210px;
    padding: 8px;
}

.matrix-table-wrap.compact .assignment-cell[b-laujgxnmdg] {
    min-height: 86px;
}

.subject-header-card[b-laujgxnmdg] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    min-height: 84px;
    padding: 12px;
    text-align: left;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .9), rgba(224, 245, 255, .58));
}

.subject-header-icon[b-laujgxnmdg],
.class-avatar[b-laujgxnmdg] {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--primary-dark, #0369a1);
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 16px;
    background: rgba(224, 245, 255, .68);
}

.subject-header-card strong[b-laujgxnmdg] {
    display: block;
    overflow: hidden;
    color: var(--text-main, #102033);
    font-size: .86rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subject-header-card small[b-laujgxnmdg] {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: var(--text-muted, #8a9aaa);
    font-size: .77rem;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subject-header-card em[b-laujgxnmdg] {
    grid-column: 1 / -1;
    color: #047857;
    font-size: .7rem;
    font-style: normal;
    font-weight: 850;
}

.class-row-header[b-laujgxnmdg] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.class-row-header strong[b-laujgxnmdg],
.mobile-class-header strong[b-laujgxnmdg] {
    display: block;
    color: var(--text-main, #102033);
    font-size: .98rem;
    font-weight: 900;
}

.class-row-header small[b-laujgxnmdg],
.mobile-class-header small[b-laujgxnmdg] {
    display: inline-flex;
    width: fit-content;
    margin-top: 4px;
    padding: 4px 9px;
    color: #047857;
    font-size: .72rem;
    font-weight: 850;
    border: 1px solid rgba(16, 185, 129, .15);
    border-radius: 999px;
    background: rgba(220, 252, 231, .72);
}

.assignment-cell[b-laujgxnmdg] {
    display: grid;
    gap: 10px;
    min-height: 108px;
    padding: 12px;
    border: 1px solid rgba(120, 170, 210, .15);
    border-radius: 18px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.assignment-cell.empty[b-laujgxnmdg] {
    place-items: center;
    background: rgba(248, 252, 255, .66);
}

.assignment-cell.assigned[b-laujgxnmdg] {
    background: linear-gradient(180deg, rgba(224, 245, 255, .95), rgba(255, 255, 255, .9));
    border-color: rgba(14, 165, 233, .28);
    box-shadow: 0 8px 20px rgba(14, 165, 233, .08);
}

.assignment-check[b-laujgxnmdg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    color: var(--text-main, #102033);
    font-size: .84rem;
    font-weight: 850;
    cursor: pointer;
}

.assignment-check input[b-laujgxnmdg] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.custom-check[b-laujgxnmdg] {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border: 1px solid rgba(120, 170, 210, .42);
    border-radius: 6px;
    background: rgba(255, 255, 255, .9);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

.assignment-check input:checked + .custom-check[b-laujgxnmdg] {
    border-color: rgba(14, 165, 233, .72);
    background: var(--primary, #0ea5e9);
}

.assignment-check input:checked + .custom-check[b-laujgxnmdg]::after {
    content: "\f00c";
    color: white;
    font-family: "Font Awesome 6 Free";
    font-size: .68rem;
    font-weight: 900;
}

.assignment-check input:focus-visible + .custom-check[b-laujgxnmdg] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 2px;
}

.teacher-wrap .teacher-select[b-laujgxnmdg] {
    min-height: 42px;
    padding-right: 38px;
    font-size: .84rem;
}

.matrix-empty-state[b-laujgxnmdg],
.matrix-loading-state[b-laujgxnmdg] {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 300px;
    padding: 36px;
    text-align: center;
    border: 1px dashed rgba(120, 170, 210, .25);
    border-radius: 24px;
    background: rgba(248, 252, 255, .62);
}

.matrix-empty-state > span[b-laujgxnmdg] {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: var(--primary-dark, #0369a1);
    border-radius: 22px;
    background: rgba(224, 245, 255, .72);
}

.matrix-empty-state h3[b-laujgxnmdg] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: 1.12rem;
    font-weight: 900;
}

.matrix-empty-state p[b-laujgxnmdg],
.matrix-loading-state span[b-laujgxnmdg] {
    margin: 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .9rem;
}

.matrix-mobile-list[b-laujgxnmdg] {
    display: none;
}

.skeleton[b-laujgxnmdg] {
    position: relative;
    overflow: hidden;
}

.skeleton[b-laujgxnmdg]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent);
    animation: matrixPulse-b-laujgxnmdg 1.3s ease-in-out infinite;
}

.matrix-summary-card.skeleton span[b-laujgxnmdg],
.matrix-summary-card.skeleton strong[b-laujgxnmdg],
.matrix-summary-card.skeleton small[b-laujgxnmdg] {
    display: block;
    border-radius: 999px;
    background: rgba(120, 170, 210, .14);
}

.matrix-summary-card.skeleton span[b-laujgxnmdg] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    border-radius: 17px;
}

.matrix-summary-card.skeleton strong[b-laujgxnmdg] {
    width: 70%;
    height: 24px;
}

.matrix-summary-card.skeleton small[b-laujgxnmdg] {
    width: 86%;
    height: 12px;
}

@media (hover: hover) and (pointer: fine) {
    .matrix-primary-button:hover[b-laujgxnmdg],
    .matrix-soft-button:hover[b-laujgxnmdg],
    .density-button:hover[b-laujgxnmdg],
    .assignment-cell:hover[b-laujgxnmdg] {
        transform: translateY(-1px);
    }

    .matrix-primary-button:hover[b-laujgxnmdg] {
        box-shadow: 0 20px 36px rgba(14, 165, 233, .25);
    }

    .assignment-cell.empty:hover[b-laujgxnmdg] {
        border-color: rgba(14, 165, 233, .3);
        background: rgba(14, 165, 233, .04);
    }
}

.matrix-primary-button:focus-visible[b-laujgxnmdg],
.matrix-soft-button:focus-visible[b-laujgxnmdg],
.density-button:focus-visible[b-laujgxnmdg],
.matrix-input:focus-visible[b-laujgxnmdg] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 2px;
}

@media (max-width: 1199.98px) {
    .matrix-summary-grid[b-laujgxnmdg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .matrix-toolbar-card[b-laujgxnmdg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .matrix-soft-button[b-laujgxnmdg],
    .density-button[b-laujgxnmdg] {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .class-subjects-page[b-laujgxnmdg] {
        padding: 14px;
    }

    .class-subjects-shell[b-laujgxnmdg] {
        gap: 14px;
        padding: 14px;
        border-radius: 24px;
    }

    .matrix-hero[b-laujgxnmdg] {
        align-items: stretch;
        flex-direction: column;
        padding: 20px;
        border-radius: 24px;
    }

    .matrix-hero-title[b-laujgxnmdg] {
        align-items: flex-start;
    }

    .matrix-hero-icon[b-laujgxnmdg] {
        width: 52px;
        height: 52px;
        border-radius: 18px;
    }

    .matrix-hero h1[b-laujgxnmdg] {
        font-size: 1.72rem;
        line-height: 1.25;
    }

    .matrix-summary-grid[b-laujgxnmdg],
    .matrix-toolbar-card[b-laujgxnmdg] {
        grid-template-columns: 1fr;
    }

    .matrix-card[b-laujgxnmdg] {
        padding: 16px;
        border-radius: 24px;
    }

    .matrix-card-header[b-laujgxnmdg] {
        align-items: stretch;
        flex-direction: column;
    }

    .matrix-primary-button[b-laujgxnmdg] {
        width: 100%;
    }

    .matrix-table-wrap[b-laujgxnmdg] {
        display: none;
    }

    .matrix-mobile-list[b-laujgxnmdg] {
        display: grid;
        gap: 14px;
    }

    .matrix-mobile-class-card[b-laujgxnmdg] {
        display: grid;
        gap: 14px;
        padding: 14px;
        border: 1px solid rgba(120, 170, 210, .16);
        border-radius: 22px;
        background: rgba(255, 255, 255, .78);
        box-shadow: 0 10px 22px rgba(23, 55, 90, .055);
    }

    .mobile-class-header[b-laujgxnmdg] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-subject-list[b-laujgxnmdg] {
        display: grid;
        gap: 10px;
    }

    .mobile-subject-card[b-laujgxnmdg] {
        display: grid;
        gap: 11px;
        padding: 12px;
        border: 1px solid rgba(120, 170, 210, .16);
        border-radius: 18px;
        background: rgba(248, 252, 255, .66);
    }

    .mobile-subject-card.assigned[b-laujgxnmdg] {
        border-color: rgba(14, 165, 233, .28);
        background: linear-gradient(180deg, rgba(224, 245, 255, .95), rgba(255, 255, 255, .9));
    }

    .mobile-subject-head[b-laujgxnmdg] {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-subject-head > span[b-laujgxnmdg] {
        display: inline-grid;
        place-items: center;
        width: 40px;
        height: 40px;
        color: var(--primary-dark, #0369a1);
        border-radius: 15px;
        background: rgba(224, 245, 255, .72);
    }

    .mobile-subject-head strong[b-laujgxnmdg] {
        display: block;
        color: var(--text-main, #102033);
        font-size: .86rem;
        font-weight: 900;
    }

    .mobile-subject-head small[b-laujgxnmdg] {
        color: var(--text-muted, #8a9aaa);
        font-size: .76rem;
        font-weight: 750;
    }
}

@media (max-width: 430px) {
    .class-subjects-page[b-laujgxnmdg] {
        padding: 10px;
    }

    .matrix-hero-title[b-laujgxnmdg],
    .matrix-hero-meta[b-laujgxnmdg],
    .matrix-legend[b-laujgxnmdg],
    .mobile-class-header[b-laujgxnmdg],
    .mobile-subject-head[b-laujgxnmdg] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-laujgxnmdg],
    *[b-laujgxnmdg]::before,
    *[b-laujgxnmdg]::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* /Components/Pages/CurrencyPage.razor.rz.scp.css */
.currency-page[b-t3vb2q860v] {
    --ink: #172033;
    --muted: #687386;
    --line: rgba(130, 146, 170, 0.2);
    --glass: rgba(255, 255, 255, 0.78);
    --glass-strong: rgba(255, 255, 255, 0.92);
    --blue: #0ea5e9;
    --blue-dark: #2563eb;
    --emerald: #10b981;
    --violet: #8b5cf6;
    --amber: #f59e0b;
    --rose: #f43f5e;
    display: block;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px;
    border-radius: 30px;
    background:
        radial-gradient(circle at 0% 0%, rgba(14, 165, 233, 0.18), transparent 34%),
        radial-gradient(circle at 100% 10%, rgba(139, 92, 246, 0.16), transparent 32%),
        linear-gradient(135deg, #effbff 0%, #f8fbff 44%, #fff1fb 100%);
    color: var(--ink);
    animation: fadeIn-b-t3vb2q860v 0.42s ease both;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.currency-page[b-t3vb2q860v]::-webkit-scrollbar {
    width: 10px;
}

.currency-page[b-t3vb2q860v]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 999px;
}

.currency-page[b-t3vb2q860v]::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.45), rgba(139, 92, 246, 0.45));
    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: 999px;
}

.currency-shell[b-t3vb2q860v] {
    width: min(100%, 1600px);
    margin: 0 auto;
    display: grid;
    gap: 16px;
}

.currency-hero[b-t3vb2q860v],
.workspace-card[b-t3vb2q860v],
.summary-card[b-t3vb2q860v],
.readiness-banner[b-t3vb2q860v],
.route-card[b-t3vb2q860v],
.mobile-card[b-t3vb2q860v],
.currency-tabs[b-t3vb2q860v] {
    border: 1px solid rgba(255, 255, 255, 0.78);
    background: var(--glass);
    box-shadow: 0 22px 70px rgba(35, 48, 78, 0.11);
    backdrop-filter: blur(22px);
}

.currency-hero[b-t3vb2q860v] {
    position: relative;
    overflow: hidden;
    min-height: 184px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(20px, 3vw, 32px);
    border-radius: 28px;
}

.hero-orb[b-t3vb2q860v] {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    filter: blur(5px);
    pointer-events: none;
}

.hero-orb-one[b-t3vb2q860v] {
    top: -120px;
    right: 12%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.24), transparent 70%);
}

.hero-orb-two[b-t3vb2q860v] {
    bottom: -150px;
    right: -80px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.22), transparent 72%);
}

.hero-content[b-t3vb2q860v] {
    position: relative;
    z-index: 1;
    max-width: 780px;
}

.eyebrow[b-t3vb2q860v],
.section-kicker[b-t3vb2q860v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--blue-dark);
}

.currency-hero h3[b-t3vb2q860v] {
    margin: 8px 0 8px;
    font-size: clamp(1.65rem, 3vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--ink);
}

.currency-hero p[b-t3vb2q860v],
.card-heading p[b-t3vb2q860v],
.summary-card p[b-t3vb2q860v],
.readiness-banner p[b-t3vb2q860v] {
    margin: 0;
    color: var(--muted);
}

.hero-pills[b-t3vb2q860v] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.hero-pills span[b-t3vb2q860v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.8);
    color: #334155;
    font-size: 0.86rem;
    font-weight: 800;
}

.hero-actions[b-t3vb2q860v] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}

.lux-btn[b-t3vb2q860v],
.ghost-btn[b-t3vb2q860v],
.icon-action[b-t3vb2q860v] {
    border: 0;
    outline: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.lux-btn[b-t3vb2q860v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 11px 18px;
    border-radius: 16px;
    color: #fff;
    font-weight: 900;
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.25);
}

.lux-btn.primary[b-t3vb2q860v] {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.lux-btn.success[b-t3vb2q860v] {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 16px 32px rgba(5, 150, 105, 0.24);
}

.lux-btn:hover[b-t3vb2q860v],
.ghost-btn:hover[b-t3vb2q860v],
.icon-action:hover[b-t3vb2q860v] {
    transform: translateY(-2px);
}

.currency-tabs[b-t3vb2q860v] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
    border-radius: 24px;
}

.currency-tab[b-t3vb2q860v] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 12px 14px;
    border: 1px solid transparent;
    border-radius: 19px;
    background: transparent;
    color: #64748b;
    text-align: left;
}

.currency-tab.active[b-t3vb2q860v] {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(240, 249, 255, 0.9));
    border-color: rgba(14, 165, 233, 0.24);
    color: var(--ink);
    box-shadow: 0 12px 34px rgba(37, 99, 235, 0.12);
}

.tab-icon[b-t3vb2q860v],
.summary-icon[b-t3vb2q860v],
.readiness-icon[b-t3vb2q860v],
.modal-icon[b-t3vb2q860v] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.tab-icon[b-t3vb2q860v] {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.16), rgba(139, 92, 246, 0.14));
    color: var(--blue-dark);
}

.currency-tab strong[b-t3vb2q860v],
.currency-tab small[b-t3vb2q860v] {
    display: block;
}

.currency-tab strong[b-t3vb2q860v] {
    font-weight: 900;
}

.currency-tab small[b-t3vb2q860v] {
    color: var(--muted);
    font-size: 0.78rem;
}

.summary-grid[b-t3vb2q860v] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.summary-card[b-t3vb2q860v] {
    position: relative;
    overflow: hidden;
    min-height: 142px;
    padding: 18px;
    border-radius: 24px;
}

.summary-card[b-t3vb2q860v]::after {
    content: "";
    position: absolute;
    inset: auto -35px -55px auto;
    width: 135px;
    height: 135px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.1);
}

.summary-icon[b-t3vb2q860v] {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 14px;
    color: #fff;
}

.summary-icon.blue[b-t3vb2q860v] {
    background: linear-gradient(135deg, #38bdf8, #2563eb);
}

.summary-icon.emerald[b-t3vb2q860v] {
    background: linear-gradient(135deg, #34d399, #059669);
}

.summary-icon.amber[b-t3vb2q860v] {
    background: linear-gradient(135deg, #fbbf24, #f97316);
}

.summary-icon.violet[b-t3vb2q860v] {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
}

.summary-card small[b-t3vb2q860v] {
    display: block;
    color: var(--muted);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.summary-card strong[b-t3vb2q860v] {
    display: block;
    margin: 4px 0;
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 950;
    letter-spacing: -0.04em;
}

.readiness-banner[b-t3vb2q860v] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border-radius: 22px;
}

.readiness-banner.success[b-t3vb2q860v] {
    border-color: rgba(16, 185, 129, 0.24);
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.9), rgba(255, 255, 255, 0.74));
}

.readiness-banner.warning[b-t3vb2q860v] {
    border-color: rgba(245, 158, 11, 0.28);
    background: linear-gradient(135deg, rgba(255, 251, 235, 0.94), rgba(255, 255, 255, 0.74));
}

.readiness-banner.danger[b-t3vb2q860v] {
    border-color: rgba(244, 63, 94, 0.28);
    background: linear-gradient(135deg, rgba(255, 241, 242, 0.94), rgba(255, 255, 255, 0.74));
}

.readiness-icon[b-t3vb2q860v] {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #10b981, #059669);
}

.readiness-banner.warning .readiness-icon[b-t3vb2q860v] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.readiness-banner.danger .readiness-icon[b-t3vb2q860v] {
    background: linear-gradient(135deg, #fb7185, #e11d48);
}

.readiness-banner strong[b-t3vb2q860v] {
    display: block;
    font-weight: 950;
}

.workspace-card[b-t3vb2q860v] {
    overflow: hidden;
    border-radius: 28px;
}

.card-heading[b-t3vb2q860v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--line);
}

.card-heading h5[b-t3vb2q860v] {
    margin: 4px 0 2px;
    font-weight: 950;
    letter-spacing: -0.02em;
}

.ghost-btn[b-t3vb2q860v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid rgba(14, 165, 233, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--blue-dark);
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

.ghost-btn.success[b-t3vb2q860v] {
    color: #047857;
    border-color: rgba(16, 185, 129, 0.22);
}

.ghost-btn.danger[b-t3vb2q860v] {
    color: #e11d48;
    border-color: rgba(244, 63, 94, 0.2);
}

.ghost-btn.compact[b-t3vb2q860v] {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 12px;
    font-size: 0.84rem;
}

.desktop-table[b-t3vb2q860v] {
    overflow-x: auto;
}

.lux-table[b-t3vb2q860v] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

.lux-table thead th[b-t3vb2q860v] {
    padding: 14px 18px;
    background: rgba(248, 250, 252, 0.72);
    color: #64748b;
    font-size: 0.73rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
}

.lux-table tbody td[b-t3vb2q860v] {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.72);
    color: #263244;
    vertical-align: middle;
}

.lux-table tbody tr[b-t3vb2q860v] {
    transition: background 0.18s ease, transform 0.18s ease;
}

.lux-table tbody tr:hover[b-t3vb2q860v] {
    background: rgba(255, 255, 255, 0.58);
}

.currency-code-wrap[b-t3vb2q860v] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.code-pill[b-t3vb2q860v],
.symbol-badge[b-t3vb2q860v],
.status-badge[b-t3vb2q860v],
.base-badge[b-t3vb2q860v],
.mini-chip[b-t3vb2q860v],
.direction-pill[b-t3vb2q860v],
.date-pill[b-t3vb2q860v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.code-pill[b-t3vb2q860v] {
    min-width: 66px;
    padding: 8px 12px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(37, 99, 235, 0.1));
    color: #075985;
    font-weight: 950;
    letter-spacing: 0.04em;
}

.code-pill.dark[b-t3vb2q860v] {
    background: rgba(15, 23, 42, 0.08);
    color: #111827;
}

.code-pill.success[b-t3vb2q860v] {
    background: rgba(16, 185, 129, 0.14);
    color: #047857;
}

.symbol-badge[b-t3vb2q860v] {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(226, 232, 240, 0.85);
    color: #334155;
    font-size: 1.05rem;
    font-weight: 950;
}

.name-stack strong[b-t3vb2q860v],
.name-stack small[b-t3vb2q860v] {
    display: block;
}

.name-stack strong[b-t3vb2q860v] {
    font-weight: 900;
}

.name-stack small[b-t3vb2q860v] {
    color: var(--muted);
    font-size: 0.78rem;
}

.status-badge[b-t3vb2q860v] {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 950;
}

.status-badge.active[b-t3vb2q860v] {
    background: rgba(16, 185, 129, 0.12);
    color: #047857;
}

.status-badge.inactive[b-t3vb2q860v] {
    background: rgba(244, 63, 94, 0.1);
    color: #be123c;
}

.base-badge[b-t3vb2q860v] {
    padding: 8px 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 950;
    box-shadow: 0 10px 22px rgba(5, 150, 105, 0.22);
}

.mini-chip[b-t3vb2q860v] {
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mini-chip.danger[b-t3vb2q860v] {
    background: rgba(244, 63, 94, 0.1);
    color: #be123c;
}

.muted-dash[b-t3vb2q860v] {
    color: #94a3b8;
    font-size: 0.84rem;
    font-weight: 800;
}

.row-actions[b-t3vb2q860v] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.icon-action[b-t3vb2q860v] {
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}

.icon-action.edit[b-t3vb2q860v] {
    color: var(--blue-dark);
}

.icon-action.delete[b-t3vb2q860v] {
    color: #e11d48;
}

.direction-pill[b-t3vb2q860v] {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.1);
    color: var(--blue-dark);
}

.rate-value[b-t3vb2q860v] {
    color: var(--blue-dark);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 1.02rem;
    font-weight: 950;
}

.date-pill[b-t3vb2q860v] {
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.08);
    color: #475569;
    font-size: 0.78rem;
    font-weight: 850;
}

.route-strip[b-t3vb2q860v] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.route-card[b-t3vb2q860v] {
    display: grid;
    gap: 7px;
    padding: 15px;
    border-radius: 21px;
}

.route-card div[b-t3vb2q860v] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-weight: 950;
}

.route-card div i[b-t3vb2q860v] {
    color: var(--blue);
}

.route-card strong[b-t3vb2q860v] {
    color: var(--ink);
    font-size: 1.25rem;
    font-weight: 950;
}

.route-card small[b-t3vb2q860v] {
    color: var(--muted);
}

.state-panel[b-t3vb2q860v],
.empty-panel[b-t3vb2q860v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 34px 20px;
    text-align: center;
}

.state-panel strong[b-t3vb2q860v],
.empty-panel h5[b-t3vb2q860v] {
    margin: 10px 0 4px;
    font-weight: 950;
}

.state-panel span[b-t3vb2q860v],
.empty-panel p[b-t3vb2q860v] {
    color: var(--muted);
}

.empty-panel i[b-t3vb2q860v] {
    width: 70px;
    height: 70px;
    display: inline-grid;
    place-items: center;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.13), rgba(139, 92, 246, 0.12));
    color: var(--blue-dark);
    font-size: 1.65rem;
}

.lux-spinner[b-t3vb2q860v] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 4px solid rgba(14, 165, 233, 0.14);
    border-top-color: var(--blue);
    animation: spin-b-t3vb2q860v 0.8s linear infinite;
}

.lux-spinner.success[b-t3vb2q860v] {
    border-color: rgba(16, 185, 129, 0.14);
    border-top-color: var(--emerald);
}

.mobile-list[b-t3vb2q860v] {
    display: none;
    padding: 14px;
    gap: 12px;
}

.mobile-card[b-t3vb2q860v] {
    padding: 16px;
    border-radius: 22px;
}

.mobile-card-top[b-t3vb2q860v],
.mobile-actions[b-t3vb2q860v],
.rate-route[b-t3vb2q860v] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-card-top[b-t3vb2q860v] {
    justify-content: space-between;
}

.mobile-card h6[b-t3vb2q860v] {
    margin: 12px 0 10px;
    font-weight: 950;
}

.mobile-meta[b-t3vb2q860v] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.mobile-actions[b-t3vb2q860v] {
    justify-content: flex-end;
    margin-top: 14px;
}

.mobile-card.rate[b-t3vb2q860v] {
    gap: 10px;
}

.mobile-card.rate > strong[b-t3vb2q860v],
.mobile-card.rate > small[b-t3vb2q860v] {
    display: block;
    margin-top: 10px;
}

.currency-backdrop[b-t3vb2q860v] {
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(8px);
}

.lux-modal-dialog[b-t3vb2q860v] {
    width: 100%;
    max-width: 540px;
}

.lux-modal[b-t3vb2q860v] {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 28px;
    background:
        radial-gradient(circle at 0% 0%, rgba(14, 165, 233, 0.12), transparent 40%),
        rgba(255, 255, 255, 0.94);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
    backdrop-filter: blur(24px);
}

.lux-modal-header[b-t3vb2q860v] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.78);
}

.lux-modal-header.success .modal-icon[b-t3vb2q860v] {
    background: linear-gradient(135deg, #34d399, #059669);
}

.lux-modal-header h5[b-t3vb2q860v] {
    margin: 0;
    color: var(--ink);
}

.lux-modal-header p[b-t3vb2q860v] {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: 0.84rem;
}

.modal-icon[b-t3vb2q860v] {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    color: #fff;
}

.modal-close[b-t3vb2q860v] {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.06);
    color: #475569;
}

.lux-input[b-t3vb2q860v] {
    min-height: 46px;
    border: 1px solid rgba(203, 213, 225, 0.7);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.lux-input:focus[b-t3vb2q860v] {
    border-color: rgba(14, 165, 233, 0.65);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}

.uppercase[b-t3vb2q860v] {
    text-transform: uppercase;
}

.lux-switch[b-t3vb2q860v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 58px;
    padding: 12px 14px;
    border: 1px solid rgba(226, 232, 240, 0.75);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.lux-switch .form-check-input[b-t3vb2q860v] {
    margin-left: 0;
    margin-right: 6px;
    font-size: 1.35rem;
}

.lux-modal-footer[b-t3vb2q860v] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(226, 232, 240, 0.78);
    background: rgba(248, 250, 252, 0.72);
}

.animated[b-t3vb2q860v] {
    animation-duration: 0.4s;
    animation-fill-mode: both;
}

.fadeIn[b-t3vb2q860v] {
    animation-name: fadeIn-b-t3vb2q860v;
}

.slideDown[b-t3vb2q860v] {
    animation-name: slideDown-b-t3vb2q860v;
    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
}

@keyframes fadeIn-b-t3vb2q860v {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown-b-t3vb2q860v {
    from {
        opacity: 0;
        transform: translateY(-28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@media (max-width: 1100px) {
    .currency-hero[b-t3vb2q860v] {
        align-items: flex-start;
        flex-direction: column;
    }

    .summary-grid[b-t3vb2q860v],
    .route-strip[b-t3vb2q860v] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 780px) {
    .currency-page[b-t3vb2q860v] {
        padding: 10px;
        border-radius: 22px;
    }

    .currency-hero[b-t3vb2q860v] {
        border-radius: 24px;
    }

    .currency-tabs[b-t3vb2q860v] {
        grid-template-columns: 1fr;
    }

    .summary-grid[b-t3vb2q860v],
    .route-strip[b-t3vb2q860v] {
        grid-template-columns: 1fr;
    }

    .card-heading[b-t3vb2q860v] {
        align-items: stretch;
        flex-direction: column;
    }

    .desktop-table[b-t3vb2q860v] {
        display: none;
    }

    .mobile-list[b-t3vb2q860v] {
        display: grid;
    }

    .lux-modal-footer[b-t3vb2q860v] {
        flex-direction: column-reverse;
    }

    .lux-modal-footer .ghost-btn[b-t3vb2q860v],
    .lux-modal-footer .lux-btn[b-t3vb2q860v] {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .hero-pills[b-t3vb2q860v] {
        flex-direction: column;
        align-items: stretch;
    }

    .lux-btn[b-t3vb2q860v],
    .hero-actions[b-t3vb2q860v] {
        width: 100%;
    }

    .readiness-banner[b-t3vb2q860v] {
        align-items: flex-start;
    }
}
/* /Components/Pages/DashboardPage.razor.rz.scp.css */
@keyframes dashboardRise-b-1auahmrcza {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dashboardPulse-b-1auahmrcza {
    0%, 100% {
        opacity: .54;
    }

    50% {
        opacity: 1;
    }
}

.dashboard-page[b-1auahmrcza] {
    position: relative;
    min-height: 100%;
    padding: 28px 32px 36px !important;
    color: var(--text-body);
    font-family: "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    isolation: isolate;
}

.dashboard-page[b-1auahmrcza]::before,
.dashboard-page[b-1auahmrcza]::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: -1;
    border-radius: 999px;
    filter: blur(16px);
}

.dashboard-page[b-1auahmrcza]::before {
    width: 34vw;
    min-width: 320px;
    aspect-ratio: 1;
    left: 6%;
    top: 2%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.dashboard-page[b-1auahmrcza]::after {
    width: 28vw;
    min-width: 260px;
    aspect-ratio: 1;
    right: 2%;
    top: 20%;
    background: radial-gradient(circle, rgba(139, 92, 246, .16), transparent 68%);
}

.dashboard-command-header[b-1auahmrcza],
.dashboard-filter-shell[b-1auahmrcza],
.dashboard-section[b-1auahmrcza],
.dashboard-error-panel[b-1auahmrcza],
.dashboard-alert-strip[b-1auahmrcza],
.dashboard-loading-grid[b-1auahmrcza] {
    animation: dashboardRise-b-1auahmrcza .32s ease-out both;
}

.dashboard-command-header[b-1auahmrcza] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, auto);
    align-items: end;
    gap: 28px;
    margin-bottom: 24px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 8% 0%, rgba(14, 165, 233, .16), transparent 34%),
        radial-gradient(circle at 88% 18%, rgba(139, 92, 246, .12), transparent 38%),
        var(--card-bg);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.dashboard-command-header[b-1auahmrcza]::after {
    content: "";
    position: absolute;
    right: 28px;
    bottom: -92px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(14, 165, 233, .13), transparent 68%);
    pointer-events: none;
}

.dashboard-command-copy[b-1auahmrcza],
.dashboard-command-actions[b-1auahmrcza] {
    position: relative;
    z-index: 1;
}

.dashboard-command-copy[b-1auahmrcza] {
    min-width: 0;
}

.dashboard-eyebrow[b-1auahmrcza] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 30px;
    padding: 6px 12px;
    color: var(--primary-dark);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid rgba(14, 165, 233, .18);
    border-radius: 999px;
    background: rgba(240, 249, 255, .78);
}

.dashboard-role-dot[b-1auahmrcza] {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 0 0 6px rgba(14, 165, 233, .12);
}

.dashboard-command-header h1[b-1auahmrcza] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0 8px;
    color: var(--text-main);
    font-size: clamp(2.15rem, 3.1vw, 2.75rem);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: 1.05;
}

.dashboard-command-header h1 i[b-1auahmrcza] {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: #ffffff;
    font-size: 1.25rem;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .22);
}

.dashboard-command-header p[b-1auahmrcza],
.dashboard-section-heading p[b-1auahmrcza],
.dashboard-queue-card-header p[b-1auahmrcza] {
    margin: 0;
    color: var(--text-muted);
    font-size: .94rem;
    line-height: 1.55;
}

.dashboard-context-chips[b-1auahmrcza],
.dashboard-status-strip[b-1auahmrcza],
.dashboard-command-actions[b-1auahmrcza],
.dashboard-command-buttons[b-1auahmrcza] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.dashboard-command-actions[b-1auahmrcza] {
    justify-content: flex-end;
    max-width: 560px;
}

.dashboard-context-chips[b-1auahmrcza] {
    margin-top: 18px;
}

.dashboard-context-chips span[b-1auahmrcza],
.dashboard-status-chip[b-1auahmrcza] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 12px;
    color: #335068;
    font-size: .78rem;
    font-weight: 780;
    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .74);
}

.dashboard-unsaved-chip[b-1auahmrcza] {
    color: #8a5300 !important;
    border-color: rgba(245, 158, 11, .3) !important;
    background: rgba(255, 247, 237, .86) !important;
}

.dashboard-status-chip[b-1auahmrcza] {
    border: 0;
}

button.dashboard-status-chip[b-1auahmrcza] {
    cursor: pointer;
}

.dashboard-status-chip.warning[b-1auahmrcza] {
    color: #8a5300;
    background: rgba(255, 247, 237, .9);
}

.dashboard-status-chip.danger[b-1auahmrcza] {
    color: #b91c45;
    background: rgba(255, 241, 242, .92);
}

.dashboard-command-buttons .btn[b-1auahmrcza],
.dashboard-filter-actions .btn[b-1auahmrcza] {
    min-height: 44px;
    border-radius: var(--radius-sm) !important;
}

.dashboard-command-buttons .btn-primary[b-1auahmrcza],
.dashboard-filter-actions .btn-primary[b-1auahmrcza] {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
    border-color: rgba(255, 255, 255, .72) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .22);
}

.dashboard-command-buttons .btn-outline-primary[b-1auahmrcza],
.dashboard-filter-actions .btn-outline-secondary[b-1auahmrcza] {
    color: var(--text-main) !important;
    background: rgba(255, 255, 255, .68) !important;
    border-color: rgba(148, 163, 184, .24) !important;
    box-shadow: none !important;
}

.dashboard-mobile-filter-button[b-1auahmrcza] {
    display: none;
}

.dashboard-alert-strip[b-1auahmrcza] {
    display: grid;
    gap: 10px;
    margin-bottom: 24px;
}

.dashboard-alert[b-1auahmrcza],
.dashboard-error-panel[b-1auahmrcza] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid rgba(186, 230, 253, .74);
    background: rgba(240, 249, 255, .88);
    box-shadow: 0 10px 24px rgba(23, 55, 90, .05);
}

.dashboard-alert i[b-1auahmrcza],
.dashboard-error-panel > i[b-1auahmrcza] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 13px;
    background: rgba(14, 165, 233, .11);
}

.dashboard-alert.warning[b-1auahmrcza] {
    color: #875108;
    border-color: rgba(245, 158, 11, .32);
    background: rgba(255, 247, 237, .9);
}

.dashboard-alert.info[b-1auahmrcza] {
    color: #075985;
}

.dashboard-error-panel[b-1auahmrcza] {
    justify-content: space-between;
    margin-bottom: 24px;
    color: #b91c45;
    border-color: rgba(239, 71, 111, .28);
    background: rgba(255, 241, 242, .9);
}

.dashboard-error-panel p[b-1auahmrcza] {
    margin: 4px 0 0;
    color: #7f1d1d;
}

.dashboard-filter-shell[b-1auahmrcza] {
    margin-bottom: 32px;
    padding: 18px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.dashboard-filter-fields[b-1auahmrcza] {
    display: grid;
    grid-template-columns: repeat(5, minmax(138px, 1fr)) auto;
    gap: 14px;
    align-items: end;
}

.dashboard-filter-field label[b-1auahmrcza] {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-filter-field .form-control[b-1auahmrcza],
.dashboard-filter-field .form-select[b-1auahmrcza] {
    min-height: 44px;
    border-radius: var(--radius-sm) !important;
    background: rgba(255, 255, 255, .88) !important;
    border-color: rgba(148, 163, 184, .22) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 18px rgba(23, 55, 90, .04) !important;
}

.dashboard-filter-actions[b-1auahmrcza] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.dashboard-section[b-1auahmrcza] {
    margin-bottom: 38px;
}

.dashboard-section-heading[b-1auahmrcza] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.dashboard-section-heading h2[b-1auahmrcza] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.4rem, 2.1vw, 1.8rem);
    font-weight: 900;
    letter-spacing: -.03em;
}

.dashboard-primary-grid[b-1auahmrcza] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-group-grid[b-1auahmrcza] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.dashboard-metric-group[b-1auahmrcza],
.dashboard-kpi-card[b-1auahmrcza],
.dashboard-queue-card[b-1auahmrcza] {
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.dashboard-metric-group[b-1auahmrcza] {
    padding: 20px;
}

.dashboard-metric-group-title[b-1auahmrcza] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--text-main);
    font-size: .98rem;
    font-weight: 900;
}

.dashboard-metric-group-title i[b-1auahmrcza] {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--primary-dark);
    background: rgba(14, 165, 233, .12);
    border-radius: 15px;
}

.dashboard-secondary-grid[b-1auahmrcza] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dashboard-kpi-card[b-1auahmrcza] {
    position: relative;
    width: 100%;
    min-height: 176px;
    padding: 20px;
    color: inherit;
    text-align: left;
}

button.dashboard-kpi-card[b-1auahmrcza] {
    cursor: pointer;
}

.dashboard-kpi-card:disabled[b-1auahmrcza] {
    cursor: default;
    opacity: 1;
}

.dashboard-kpi-card[b-1auahmrcza]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 94% 10%, rgba(14, 165, 233, .08), transparent 42%);
}

.dashboard-kpi-primary[b-1auahmrcza] {
    min-height: 194px;
    padding: 22px;
}

.dashboard-kpi-warning[b-1auahmrcza] {
    border-color: rgba(239, 71, 111, .22);
    background:
        radial-gradient(circle at 92% 10%, rgba(239, 71, 111, .09), transparent 42%),
        rgba(255, 255, 255, .88);
}

.dashboard-kpi-topline[b-1auahmrcza] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.dashboard-kpi-title[b-1auahmrcza] {
    display: block;
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dashboard-kpi-group[b-1auahmrcza] {
    display: block;
    margin-top: 4px;
    color: var(--text-soft);
    font-size: .76rem;
    font-weight: 740;
}

.dashboard-kpi-icon[b-1auahmrcza] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 18px;
    background: rgba(14, 165, 233, .1);
}

.dashboard-kpi-icon i[b-1auahmrcza] {
    font-size: 1.08rem;
}

.dashboard-kpi-value[b-1auahmrcza] {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.75rem, 2.6vw, 2.35rem);
    font-weight: 950;
    letter-spacing: -.045em;
    line-height: 1.02;
    overflow-wrap: anywhere;
}

.dashboard-kpi-card:not(.dashboard-kpi-primary) .dashboard-kpi-value[b-1auahmrcza] {
    font-size: clamp(1.32rem, 1.8vw, 1.65rem);
}

.dashboard-kpi-note[b-1auahmrcza] {
    position: relative;
    z-index: 1;
    display: block;
    margin: 10px 36px 0 0;
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.45;
}

.dashboard-kpi-open[b-1auahmrcza] {
    position: absolute;
    right: 16px;
    bottom: 15px;
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    color: var(--primary-dark);
    font-size: .8rem;
    border-radius: 12px;
    background: rgba(14, 165, 233, .1);
}

.dashboard-featured-chart[b-1auahmrcza] {
    margin-bottom: 20px;
}

.dashboard-chart-grid[b-1auahmrcza] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.dashboard-queue-grid[b-1auahmrcza] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.dashboard-queue-card[b-1auahmrcza] {
    padding: 20px;
}

.dashboard-queue-card-header[b-1auahmrcza] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.dashboard-queue-card-header h3[b-1auahmrcza] {
    margin: 0;
    color: var(--text-main);
    font-size: 1.02rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.dashboard-queue-card-header .btn[b-1auahmrcza] {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 14px !important;
}

.dashboard-queue-list[b-1auahmrcza] {
    display: grid;
    gap: 10px;
}

.dashboard-queue-row[b-1auahmrcza] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(226, 232, 240, .84);
    border-radius: var(--radius-sm);
    background: rgba(248, 252, 255, .72);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.dashboard-queue-row.danger[b-1auahmrcza] {
    border-color: rgba(239, 71, 111, .2);
    background: rgba(255, 241, 242, .72);
}

.dashboard-queue-row.warning[b-1auahmrcza] {
    border-color: rgba(245, 158, 11, .22);
    background: rgba(255, 247, 237, .72);
}

.dashboard-queue-cell[b-1auahmrcza] {
    min-width: 0;
}

.dashboard-queue-cell span[b-1auahmrcza] {
    display: block;
    margin-bottom: 4px;
    color: var(--text-soft);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.dashboard-queue-cell strong[b-1auahmrcza] {
    display: block;
    color: #26384a;
    font-size: .88rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.dashboard-empty-state[b-1auahmrcza] {
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 160px;
    gap: 10px;
    padding: 24px;
    color: var(--text-muted);
    text-align: center;
    border: 1px dashed rgba(148, 163, 184, .34);
    border-radius: var(--radius-md);
    background: rgba(248, 252, 255, .7);
}

.dashboard-empty-state i[b-1auahmrcza] {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: var(--success);
    font-size: 1.28rem;
    border-radius: 18px;
    background: rgba(16, 185, 129, .1);
}

.dashboard-loading-grid[b-1auahmrcza] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.dashboard-skeleton-card[b-1auahmrcza] {
    min-height: 174px;
    padding: 22px;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-card);
}

.dashboard-skeleton-card span[b-1auahmrcza],
.dashboard-skeleton-card strong[b-1auahmrcza],
.dashboard-skeleton-card small[b-1auahmrcza] {
    display: block;
    border-radius: 999px;
    background: #dbeafe;
    animation: dashboardPulse-b-1auahmrcza 1.25s ease-in-out infinite;
}

.dashboard-skeleton-card span[b-1auahmrcza] {
    width: 46%;
    height: 13px;
}

.dashboard-skeleton-card strong[b-1auahmrcza] {
    width: 68%;
    height: 34px;
    margin-top: 26px;
}

.dashboard-skeleton-card small[b-1auahmrcza] {
    width: 78%;
    height: 12px;
    margin-top: 20px;
}

.dashboard-filter-dialog[b-1auahmrcza] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    align-items: end;
    padding: 14px;
    background: rgba(15, 23, 42, .28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dashboard-filter-panel[b-1auahmrcza] {
    width: min(760px, 100%);
    max-height: min(760px, 88vh);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 28px 70px rgba(15, 23, 42, .24);
}

.dashboard-filter-panel-header[b-1auahmrcza] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid rgba(226, 232, 240, .86);
}

.dashboard-filter-panel .dashboard-filter-fields[b-1auahmrcza] {
    grid-template-columns: 1fr 1fr;
    max-height: calc(88vh - 94px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 18px;
}

.dashboard-filter-panel .dashboard-filter-actions[b-1auahmrcza] {
    position: sticky;
    right: -18px;
    bottom: -18px;
    left: -18px;
    grid-column: 1 / -1;
    padding: 14px;
    margin: 4px -18px -18px;
    background: rgba(255, 255, 255, .96);
    border-top: 1px solid rgba(226, 232, 240, .86);
}

.dashboard-page .dashboard-chart-card[b-1auahmrcza] {
    min-height: 398px;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--card-border) !important;
    background: var(--card-bg) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.dashboard-page .dashboard-chart-card .card-body[b-1auahmrcza] {
    padding: 22px !important;
}

.dashboard-page .dashboard-chart-featured[b-1auahmrcza] {
    min-height: 466px;
}

.dashboard-page .dashboard-chart-type[b-1auahmrcza] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    color: var(--primary-dark);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 1px solid rgba(14, 165, 233, .18);
    border-radius: 999px;
    background: rgba(240, 249, 255, .86);
}

.dashboard-page .dashboard-chart-canvas[b-1auahmrcza] {
    position: relative;
}

.dashboard-page .dashboard-chart-canvas canvas[b-1auahmrcza] {
    width: 100% !important;
    height: 100% !important;
}

.dashboard-page .dashboard-chart-empty[b-1auahmrcza] {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    min-height: 250px;
    padding: 24px;
    color: var(--text-muted);
    text-align: center;
    border: 1px dashed rgba(148, 163, 184, .34);
    border-radius: var(--radius-md);
    background:
        radial-gradient(circle at 50% 0%, rgba(14, 165, 233, .08), transparent 56%),
        rgba(248, 252, 255, .72);
}

.dashboard-page .dashboard-chart-empty i[b-1auahmrcza] {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: var(--primary);
    font-size: 1.45rem;
    border-radius: 20px;
    background: rgba(14, 165, 233, .1);
}

.dashboard-page .dashboard-chart-empty strong[b-1auahmrcza] {
    color: var(--text-main);
    font-weight: 900;
}

.dashboard-page .dashboard-chart-empty span[b-1auahmrcza] {
    font-size: .9rem;
}

@media (hover: hover) and (pointer: fine) {
    .dashboard-kpi-card:not(:disabled):hover[b-1auahmrcza],
    .dashboard-queue-card:hover[b-1auahmrcza],
    .dashboard-page .dashboard-chart-card:hover[b-1auahmrcza] {
        border-color: rgba(14, 165, 233, .34) !important;
        box-shadow: var(--shadow-lift) !important;
        transform: translateY(-4px);
    }

    .dashboard-metric-group:hover[b-1auahmrcza] {
        border-color: rgba(14, 165, 233, .22) !important;
        box-shadow: var(--shadow-soft) !important;
    }

    .dashboard-queue-row:hover[b-1auahmrcza] {
        border-color: rgba(14, 165, 233, .22);
        background: rgba(255, 255, 255, .78);
        transform: translateY(-1px);
    }
}

.dashboard-kpi-card:not(:disabled):active[b-1auahmrcza] {
    transform: scale(.988);
}

@media (max-width: 1399.98px) {
    .dashboard-filter-fields[b-1auahmrcza] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-filter-actions[b-1auahmrcza] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1199.98px) {
    .dashboard-command-header[b-1auahmrcza] {
        grid-template-columns: 1fr;
    }

    .dashboard-command-actions[b-1auahmrcza] {
        justify-content: flex-start;
        max-width: none;
    }

    .dashboard-primary-grid[b-1auahmrcza],
    .dashboard-loading-grid[b-1auahmrcza] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-group-grid[b-1auahmrcza],
    .dashboard-chart-grid[b-1auahmrcza],
    .dashboard-queue-grid[b-1auahmrcza] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .dashboard-page[b-1auahmrcza] {
        padding: 18px 14px 26px !important;
    }

    .dashboard-command-header[b-1auahmrcza] {
        padding: 22px;
    }

    .dashboard-command-header[b-1auahmrcza],
    .dashboard-section-heading[b-1auahmrcza],
    .dashboard-queue-card-header[b-1auahmrcza] {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-command-header h1[b-1auahmrcza] {
        font-size: clamp(1.8rem, 8vw, 2.25rem);
    }

    .dashboard-command-header h1 i[b-1auahmrcza] {
        width: 46px;
        height: 46px;
        border-radius: 16px;
    }

    .dashboard-command-actions[b-1auahmrcza],
    .dashboard-command-buttons[b-1auahmrcza] {
        justify-content: stretch;
        width: 100%;
    }

    .dashboard-command-buttons .btn[b-1auahmrcza] {
        flex: 1 1 auto;
    }

    .dashboard-mobile-filter-button[b-1auahmrcza] {
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    .dashboard-filter-desktop[b-1auahmrcza] {
        display: none;
    }

    .dashboard-primary-grid[b-1auahmrcza],
    .dashboard-secondary-grid[b-1auahmrcza],
    .dashboard-loading-grid[b-1auahmrcza] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .dashboard-kpi-card[b-1auahmrcza],
    .dashboard-kpi-primary[b-1auahmrcza] {
        min-height: 154px;
        padding: 16px;
    }

    .dashboard-kpi-icon[b-1auahmrcza] {
        width: 40px;
        height: 40px;
        border-radius: 15px;
    }

    .dashboard-kpi-title[b-1auahmrcza],
    .dashboard-kpi-group[b-1auahmrcza] {
        font-size: .66rem;
    }

    .dashboard-kpi-card:not(.dashboard-kpi-primary) .dashboard-kpi-value[b-1auahmrcza],
    .dashboard-kpi-value[b-1auahmrcza] {
        font-size: 1.38rem;
    }

    .dashboard-kpi-note[b-1auahmrcza] {
        margin-right: 0;
        font-size: .78rem;
    }

    .dashboard-page .dashboard-chart-card[b-1auahmrcza],
    .dashboard-page .dashboard-chart-featured[b-1auahmrcza] {
        min-height: 350px;
    }
}

@media (max-width: 430px) {
    .dashboard-page[b-1auahmrcza] {
        padding-inline: 10px !important;
    }

    .dashboard-primary-grid[b-1auahmrcza],
    .dashboard-secondary-grid[b-1auahmrcza],
    .dashboard-loading-grid[b-1auahmrcza] {
        grid-template-columns: 1fr;
    }

    .dashboard-filter-panel .dashboard-filter-fields[b-1auahmrcza] {
        grid-template-columns: 1fr;
    }

    .dashboard-command-buttons[b-1auahmrcza] {
        flex-direction: column;
    }

    .dashboard-command-buttons .btn[b-1auahmrcza] {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-command-header[b-1auahmrcza],
    .dashboard-filter-shell[b-1auahmrcza],
    .dashboard-section[b-1auahmrcza],
    .dashboard-error-panel[b-1auahmrcza],
    .dashboard-alert-strip[b-1auahmrcza],
    .dashboard-loading-grid[b-1auahmrcza],
    .dashboard-skeleton-card span[b-1auahmrcza],
    .dashboard-skeleton-card strong[b-1auahmrcza],
    .dashboard-skeleton-card small[b-1auahmrcza] {
        animation: none !important;
    }

    .dashboard-kpi-card[b-1auahmrcza],
    .dashboard-metric-group[b-1auahmrcza],
    .dashboard-queue-card[b-1auahmrcza],
    .dashboard-queue-row[b-1auahmrcza],
    .dashboard-page .dashboard-chart-card[b-1auahmrcza] {
        transition: none !important;
    }

    .dashboard-kpi-card:hover[b-1auahmrcza],
    .dashboard-metric-group:hover[b-1auahmrcza],
    .dashboard-queue-card:hover[b-1auahmrcza],
    .dashboard-queue-row:hover[b-1auahmrcza],
    .dashboard-page .dashboard-chart-card:hover[b-1auahmrcza] {
        transform: none !important;
    }
}
/* /Components/Pages/ExaminationsPage.razor.rz.scp.css */
@keyframes examsRise-b-k3tkzchsre {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.exams-setup-page[b-k3tkzchsre] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --exam: #ec4899;
    --exam-soft: #fce7f3;
    --gold: #f59e0b;
    --gold-soft: #fff7ed;
    --success: #10b981;
    --success-soft: #dcfce7;
    --locked: #334155;
    --locked-soft: #f1f5f9;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    display: block;
    min-height: 100%;
    overflow-x: hidden;
    padding: 28px 32px 96px;
    color: var(--text-main);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    background:
        radial-gradient(circle at 8% 8%, rgba(14, 165, 233, .18), transparent 34%),
        radial-gradient(circle at 88% 6%, rgba(139, 92, 246, .16), transparent 30%),
        radial-gradient(circle at 92% 92%, rgba(236, 72, 153, .12), transparent 32%),
        linear-gradient(135deg, #eef8ff 0%, #f8fbff 46%, #f7f0ff 100%);
}

.exams-setup-page.mybody[b-k3tkzchsre] {
    grid-template-rows: unset;
}

.exams-setup-page[b-k3tkzchsre]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .46) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .18;
}

.exams-shell[b-k3tkzchsre] {
    position: relative;
    z-index: 1;
    width: min(100%, 1600px);
    margin: 0 auto;
    display: grid;
    gap: 20px;
    animation: examsRise-b-k3tkzchsre .42s ease both;
}

.exams-hero[b-k3tkzchsre],
.exam-sidebar-card[b-k3tkzchsre],
.exam-summary-card[b-k3tkzchsre],
.exam-kpi-card[b-k3tkzchsre],
.scope-card[b-k3tkzchsre],
.exam-readiness-banner[b-k3tkzchsre],
.subject-rules-card[b-k3tkzchsre],
.exam-empty-state[b-k3tkzchsre],
.exam-modal[b-k3tkzchsre] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.exams-hero[b-k3tkzchsre] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
}

.exams-hero[b-k3tkzchsre]::after {
    content: "";
    position: absolute;
    inset: auto -8% -90% 52%;
    height: 180px;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(8px);
    background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(236, 72, 153, .16));
}

.exams-hero-copy[b-k3tkzchsre],
.exams-hero-actions[b-k3tkzchsre],
.exam-card-header[b-k3tkzchsre],
.exam-card-title[b-k3tkzchsre],
.exam-card-actions[b-k3tkzchsre],
.exam-summary-card[b-k3tkzchsre],
.exam-summary-main[b-k3tkzchsre],
.exam-summary-meta[b-k3tkzchsre],
.exam-status-strip[b-k3tkzchsre],
.scope-chip-wrap[b-k3tkzchsre],
.exam-readiness-banner[b-k3tkzchsre],
.subject-cell[b-k3tkzchsre],
.teacher-cell[b-k3tkzchsre],
.subject-mobile-top[b-k3tkzchsre],
.exam-button[b-k3tkzchsre],
.exam-icon-button[b-k3tkzchsre],
.mark-input-wrap[b-k3tkzchsre] {
    display: flex;
    align-items: center;
}

.exams-hero-copy[b-k3tkzchsre],
.exam-card-title[b-k3tkzchsre],
.exam-summary-main[b-k3tkzchsre],
.subject-cell[b-k3tkzchsre],
.teacher-cell[b-k3tkzchsre] {
    gap: 14px;
}

.exams-hero-actions[b-k3tkzchsre],
.exam-card-actions[b-k3tkzchsre],
.exam-summary-meta[b-k3tkzchsre],
.scope-chip-wrap[b-k3tkzchsre] {
    flex-wrap: wrap;
    gap: 10px;
}

.exams-hero-icon[b-k3tkzchsre],
.exam-card-title > span[b-k3tkzchsre],
.exam-summary-icon[b-k3tkzchsre],
.kpi-icon[b-k3tkzchsre],
.exam-item-icon[b-k3tkzchsre],
.subject-avatar[b-k3tkzchsre],
.teacher-cell > span[b-k3tkzchsre],
.exam-empty-state > span[b-k3tkzchsre] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.exams-hero-icon[b-k3tkzchsre] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: #fff;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6 48%, #ec4899);
    box-shadow: 0 18px 34px rgba(236, 72, 153, .22);
}

.exams-hero h1[b-k3tkzchsre],
.exam-card-title h2[b-k3tkzchsre],
.exam-summary-card h2[b-k3tkzchsre],
.exam-readiness-banner h2[b-k3tkzchsre],
.exam-empty-state h2[b-k3tkzchsre],
.exam-modal-header h2[b-k3tkzchsre] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.035em;
}

.exams-hero h1[b-k3tkzchsre] {
    font-size: clamp(1.7rem, 2.4vw, 2.25rem);
}

.exam-card-title h2[b-k3tkzchsre],
.exam-summary-card h2[b-k3tkzchsre],
.exam-readiness-banner h2[b-k3tkzchsre],
.exam-empty-state h2[b-k3tkzchsre],
.exam-modal-header h2[b-k3tkzchsre] {
    font-size: 1.1rem;
}

.exams-hero p[b-k3tkzchsre],
.exam-card-title p[b-k3tkzchsre],
.exam-summary-card p[b-k3tkzchsre],
.exam-readiness-banner p[b-k3tkzchsre],
.exam-empty-state p[b-k3tkzchsre],
.exam-modal-header p[b-k3tkzchsre],
.subject-header small[b-k3tkzchsre] {
    margin: 0;
    color: var(--text-body);
}

.exam-button[b-k3tkzchsre],
.exam-icon-button[b-k3tkzchsre] {
    border: 0;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    border-radius: 16px;
    font-size: .9rem;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.exam-button[b-k3tkzchsre] {
    padding: 0 18px;
}

.exam-button:not(:disabled):hover[b-k3tkzchsre],
.exam-icon-button:not(:disabled):hover[b-k3tkzchsre] {
    transform: translateY(-1px);
}

.exam-button:focus-visible[b-k3tkzchsre],
.exam-icon-button:focus-visible[b-k3tkzchsre],
.exam-select:focus[b-k3tkzchsre],
.exam-input:focus[b-k3tkzchsre],
.exam-mark-input:focus[b-k3tkzchsre] {
    outline: 3px solid rgba(14, 165, 233, .18);
    outline-offset: 2px;
}

.exam-button-primary[b-k3tkzchsre] {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6 52%, #ec4899);
    box-shadow: 0 16px 28px rgba(14, 165, 233, .22);
}

.exam-button-primary:not(:disabled):hover[b-k3tkzchsre] {
    box-shadow: 0 20px 36px rgba(236, 72, 153, .22);
}

.exam-button-soft[b-k3tkzchsre] {
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .24);
    background: linear-gradient(135deg, rgba(224, 245, 255, .9), rgba(252, 231, 243, .74));
    box-shadow: var(--shadow-card);
}

.exam-button-success[b-k3tkzchsre] {
    color: #047857;
    border: 1px solid rgba(16, 185, 129, .26);
    background: var(--success-soft);
}

.exam-button-lock[b-k3tkzchsre] {
    color: var(--locked);
    border: 1px solid rgba(51, 65, 85, .18);
    background: var(--locked-soft);
}

.exam-button-danger[b-k3tkzchsre] {
    color: #be123c;
    border: 1px solid rgba(239, 71, 111, .22);
    background: rgba(255, 255, 255, .74);
}

.exam-button-danger:not(:disabled):hover[b-k3tkzchsre] {
    background: var(--danger-soft);
}

.exam-button-ghost[b-k3tkzchsre] {
    color: var(--text-body);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .74);
}

.exam-button:disabled[b-k3tkzchsre],
.exam-icon-button:disabled[b-k3tkzchsre] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
}

.exam-workspace-grid[b-k3tkzchsre] {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.exam-sidebar-card[b-k3tkzchsre],
.exam-summary-card[b-k3tkzchsre],
.scope-card[b-k3tkzchsre],
.subject-rules-card[b-k3tkzchsre] {
    border-radius: var(--radius-lg);
}

.exam-sidebar-card[b-k3tkzchsre] {
    position: sticky;
    top: 20px;
    overflow: hidden;
    padding: 18px;
}

.exam-card-header[b-k3tkzchsre] {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.exam-card-title > span[b-k3tkzchsre] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, var(--primary-soft), var(--violet-soft));
}

.exam-icon-button[b-k3tkzchsre] {
    width: 42px;
    min-height: 42px;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--border-soft);
}

.exam-icon-button.refresh:hover[b-k3tkzchsre] {
    background: var(--primary-soft);
}

.exam-status-strip[b-k3tkzchsre] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.exam-status-strip span[b-k3tkzchsre] {
    display: grid;
    gap: 2px;
    min-height: 58px;
    padding: 10px;
    border-radius: 16px;
    font-size: .72rem;
    font-weight: 850;
    color: var(--text-body);
    background: rgba(255, 255, 255, .68);
    border: 1px solid var(--border-soft);
}

.exam-status-strip strong[b-k3tkzchsre] {
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: 900;
}

.exam-status-strip .draft strong[b-k3tkzchsre] {
    color: #b45309;
}

.exam-status-strip .published strong[b-k3tkzchsre] {
    color: #047857;
}

.exam-status-strip .locked strong[b-k3tkzchsre] {
    color: var(--locked);
}

.exam-list[b-k3tkzchsre] {
    display: grid;
    gap: 10px;
    max-height: 68vh;
    overflow-y: auto;
    padding-right: 2px;
}

.exam-list-item[b-k3tkzchsre] {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 14px;
    text-align: left;
    border-radius: 20px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 8px 18px rgba(23, 55, 90, .04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.exam-list-item:hover[b-k3tkzchsre],
.exam-list-item.selected[b-k3tkzchsre] {
    transform: translateY(-1px);
    border-color: rgba(14, 165, 233, .26);
    background: linear-gradient(135deg, rgba(224, 245, 255, .88), rgba(252, 231, 243, .68));
    box-shadow: var(--shadow-card);
}

.exam-list-item.selected[b-k3tkzchsre]::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--primary), var(--exam));
}

.exam-item-icon[b-k3tkzchsre] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
}

.exam-list-item.draft .exam-item-icon[b-k3tkzchsre] {
    color: #b45309;
    background: var(--gold-soft);
}

.exam-list-item.published .exam-item-icon[b-k3tkzchsre] {
    color: #047857;
    background: var(--success-soft);
}

.exam-list-item.locked .exam-item-icon[b-k3tkzchsre] {
    color: var(--locked);
    background: var(--locked-soft);
}

.exam-item-copy[b-k3tkzchsre] {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.exam-item-copy strong[b-k3tkzchsre],
.subject-cell strong[b-k3tkzchsre],
.teacher-cell strong[b-k3tkzchsre] {
    color: var(--text-main);
    font-size: .95rem;
    font-weight: 900;
}

.exam-item-copy small[b-k3tkzchsre],
.subject-cell small[b-k3tkzchsre],
.teacher-cell small[b-k3tkzchsre] {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 760;
}

.exam-item-copy em[b-k3tkzchsre] {
    color: var(--text-body);
    font-size: .75rem;
    font-style: normal;
    font-weight: 800;
}

.exam-status-pill[b-k3tkzchsre],
.scope-chip[b-k3tkzchsre],
.scope-placeholder[b-k3tkzchsre],
.subject-cell em[b-k3tkzchsre],
.exam-readonly-field[b-k3tkzchsre] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 900;
    white-space: nowrap;
}

.exam-status-pill[b-k3tkzchsre] {
    min-height: 32px;
    padding: 0 11px;
}

.exam-status-pill.draft[b-k3tkzchsre],
.exam-readonly-field.draft[b-k3tkzchsre] {
    color: #b45309;
    background: var(--gold-soft);
}

.exam-status-pill.published[b-k3tkzchsre],
.exam-readonly-field.published[b-k3tkzchsre] {
    color: #047857;
    background: var(--success-soft);
}

.exam-status-pill.locked[b-k3tkzchsre],
.exam-readonly-field.locked[b-k3tkzchsre] {
    color: var(--locked);
    background: var(--locked-soft);
}

.exam-main-workspace[b-k3tkzchsre] {
    display: grid;
    gap: 18px;
}

.exam-summary-card[b-k3tkzchsre] {
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
}

.exam-summary-icon[b-k3tkzchsre],
.kpi-icon[b-k3tkzchsre] {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 14px 24px rgba(14, 165, 233, .18);
}

.exam-summary-meta span:not(.exam-status-pill)[b-k3tkzchsre] {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--text-body);
    font-size: .78rem;
    font-weight: 850;
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--border-soft);
}

.exam-summary-grid[b-k3tkzchsre] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.exam-kpi-card[b-k3tkzchsre] {
    display: flex;
    gap: 14px;
    min-height: 130px;
    padding: 18px;
    border-radius: var(--radius-lg);
}

.exam-kpi-card.full .kpi-icon[b-k3tkzchsre],
.exam-kpi-card.pass .kpi-icon[b-k3tkzchsre] {
    background: linear-gradient(135deg, #10b981, #0ea5e9);
}

.exam-kpi-card.status.draft .kpi-icon[b-k3tkzchsre] {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
}

.exam-kpi-card.status.published .kpi-icon[b-k3tkzchsre] {
    background: linear-gradient(135deg, #10b981, #0ea5e9);
}

.exam-kpi-card.status.locked .kpi-icon[b-k3tkzchsre] {
    background: linear-gradient(135deg, #334155, #64748b);
}

.exam-kpi-card.scope .kpi-icon[b-k3tkzchsre] {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

.exam-kpi-card small[b-k3tkzchsre] {
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.exam-kpi-card strong[b-k3tkzchsre] {
    display: block;
    margin: 4px 0 2px;
    color: var(--text-main);
    font-size: clamp(1.08rem, 1.7vw, 1.55rem);
    font-weight: 900;
    line-height: 1.16;
}

.exam-kpi-card p[b-k3tkzchsre] {
    margin: 0;
    color: var(--text-body);
    font-size: .8rem;
}

.scope-card[b-k3tkzchsre],
.subject-rules-card[b-k3tkzchsre] {
    padding: 20px 22px;
}

.scope-form-grid[b-k3tkzchsre] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.exam-field[b-k3tkzchsre] {
    display: grid;
    gap: 8px;
}

.exam-field.full[b-k3tkzchsre] {
    grid-column: 1 / -1;
}

.exam-field > span[b-k3tkzchsre] {
    color: var(--text-body);
    font-size: .78rem;
    font-weight: 850;
}

.exam-field > span i[b-k3tkzchsre] {
    margin-right: 6px;
    color: var(--primary);
}

.exam-select[b-k3tkzchsre],
.exam-input[b-k3tkzchsre],
.exam-mark-input[b-k3tkzchsre],
.exam-readonly-field[b-k3tkzchsre] {
    min-height: 46px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background-color: rgba(255, 255, 255, .9);
    color: var(--text-main);
    font-size: .92rem;
    font-weight: 780;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.exam-select:focus[b-k3tkzchsre],
.exam-input:focus[b-k3tkzchsre],
.exam-mark-input:focus[b-k3tkzchsre] {
    border-color: rgba(14, 165, 233, .5);
    box-shadow: 0 0 0 .22rem rgba(14, 165, 233, .1), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.add-scope-button[b-k3tkzchsre] {
    min-width: 136px;
}

.scope-chip-wrap[b-k3tkzchsre] {
    margin-top: 16px;
}

.scope-chip[b-k3tkzchsre],
.scope-placeholder[b-k3tkzchsre] {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(245, 158, 11, .24);
    color: #b45309;
    background: rgba(255, 247, 237, .8);
}

.scope-chip.active[b-k3tkzchsre] {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6 52%, #ec4899);
    box-shadow: 0 14px 26px rgba(14, 165, 233, .18);
}

.scope-placeholder[b-k3tkzchsre] {
    color: var(--text-body);
    border-color: var(--border-soft);
    background: rgba(255, 255, 255, .68);
}

.exam-readiness-banner[b-k3tkzchsre] {
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
}

.exam-readiness-banner > span[b-k3tkzchsre] {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    font-size: 1.1rem;
}

.exam-readiness-banner.success[b-k3tkzchsre] {
    border-color: rgba(16, 185, 129, .25);
    background: linear-gradient(135deg, rgba(220, 252, 231, .9), rgba(255, 255, 255, .82));
}

.exam-readiness-banner.success > span[b-k3tkzchsre] {
    color: #047857;
    background: var(--success-soft);
}

.exam-readiness-banner.warning[b-k3tkzchsre] {
    border-color: rgba(245, 158, 11, .24);
    background: linear-gradient(135deg, rgba(255, 247, 237, .94), rgba(255, 255, 255, .84));
}

.exam-readiness-banner.warning > span[b-k3tkzchsre] {
    color: #b45309;
    background: var(--gold-soft);
}

.exam-readiness-banner.danger[b-k3tkzchsre] {
    border-color: rgba(239, 71, 111, .24);
    background: linear-gradient(135deg, rgba(255, 228, 236, .94), rgba(255, 255, 255, .84));
}

.exam-readiness-banner.danger > span[b-k3tkzchsre] {
    color: #be123c;
    background: var(--danger-soft);
}

.exam-readiness-banner.locked[b-k3tkzchsre] {
    border-color: rgba(51, 65, 85, .18);
    background: linear-gradient(135deg, rgba(241, 245, 249, .96), rgba(255, 255, 255, .84));
}

.exam-readiness-banner.locked > span[b-k3tkzchsre] {
    color: var(--locked);
    background: var(--locked-soft);
}

.subject-rules-card[b-k3tkzchsre] {
    overflow: hidden;
}

.subject-header[b-k3tkzchsre] {
    margin-bottom: 16px;
}

.subject-table-wrap[b-k3tkzchsre] {
    overflow-x: auto;
    border-radius: 20px;
}

.subject-rules-table[b-k3tkzchsre] {
    width: 100%;
    min-width: 900px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.subject-rules-table thead th[b-k3tkzchsre] {
    padding: 14px 16px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .055em;
    background: linear-gradient(135deg, rgba(224, 245, 255, .94), rgba(252, 231, 243, .86));
}

.subject-rules-table thead th:first-child[b-k3tkzchsre] {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

.subject-rules-table thead th:last-child[b-k3tkzchsre] {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

.subject-rules-table tbody tr[b-k3tkzchsre] {
    transition: background .18s ease;
}

.subject-rules-table tbody tr:hover[b-k3tkzchsre] {
    background: rgba(14, 165, 233, .04);
}

.subject-rules-table tbody tr.invalid[b-k3tkzchsre] {
    background: rgba(255, 228, 236, .34);
}

.subject-rules-table tbody tr.warning[b-k3tkzchsre] {
    background: rgba(255, 247, 237, .34);
}

.subject-rules-table tbody td[b-k3tkzchsre] {
    min-height: 78px;
    padding: 16px;
    border-bottom: 1px solid rgba(120, 170, 210, .16);
    vertical-align: middle;
}

.subject-avatar[b-k3tkzchsre] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    font-size: 1rem;
}

.subject-cell em[b-k3tkzchsre] {
    width: fit-content;
    margin-top: 5px;
    min-height: 28px;
    padding: 0 10px;
    font-style: normal;
}

.subject-cell em.valid[b-k3tkzchsre] {
    color: #047857;
    background: var(--success-soft);
}

.subject-cell em.warning[b-k3tkzchsre] {
    color: #b45309;
    background: var(--gold-soft);
}

.subject-cell em.invalid[b-k3tkzchsre] {
    color: #be123c;
    background: var(--danger-soft);
}

.tone-blue[b-k3tkzchsre] {
    color: #0369a1;
    background: linear-gradient(135deg, #e0f5ff, #bae6fd);
}

.tone-pink[b-k3tkzchsre] {
    color: #be185d;
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
}

.tone-violet[b-k3tkzchsre] {
    color: #6d28d9;
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
}

.tone-cyan[b-k3tkzchsre] {
    color: #0e7490;
    background: linear-gradient(135deg, #cffafe, #a5f3fc);
}

.tone-gold[b-k3tkzchsre] {
    color: #b45309;
    background: linear-gradient(135deg, #fff7ed, #fed7aa);
}

.mark-column[b-k3tkzchsre] {
    width: 190px;
}

.mark-input-wrap[b-k3tkzchsre] {
    justify-content: flex-end;
    gap: 9px;
}

.exam-mark-input[b-k3tkzchsre] {
    width: 130px;
    text-align: right;
    font-weight: 900;
}

.mark-input-wrap > span[b-k3tkzchsre] {
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 850;
}

.exam-mark-input.mark-valid[b-k3tkzchsre] {
    border-color: rgba(16, 185, 129, .28);
}

.exam-mark-input.mark-warning[b-k3tkzchsre] {
    border-color: rgba(245, 158, 11, .42);
    background: rgba(255, 247, 237, .92);
}

.exam-mark-input.mark-invalid[b-k3tkzchsre] {
    border-color: rgba(239, 71, 111, .55);
    background: rgba(255, 228, 236, .94);
}

.pass-mark-meter[b-k3tkzchsre] {
    position: relative;
    overflow: hidden;
    height: 7px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(226, 240, 250, .96);
}

.pass-mark-meter i[b-k3tkzchsre] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, #f59e0b, #ec4899);
}

.teacher-cell > span[b-k3tkzchsre] {
    width: 40px;
    height: 40px;
    border-radius: 15px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.subject-mobile-list[b-k3tkzchsre] {
    display: none;
}

.subject-mobile-card[b-k3tkzchsre] {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-card);
}

.subject-mobile-card.invalid[b-k3tkzchsre] {
    background: linear-gradient(135deg, rgba(255, 228, 236, .86), rgba(255, 255, 255, .78));
}

.subject-mobile-card.warning[b-k3tkzchsre] {
    background: linear-gradient(135deg, rgba(255, 247, 237, .86), rgba(255, 255, 255, .78));
}

.subject-mobile-top[b-k3tkzchsre] {
    justify-content: space-between;
    gap: 12px;
}

.subject-mobile-grid[b-k3tkzchsre] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.exam-empty-state[b-k3tkzchsre] {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 12px;
    min-height: 270px;
    border-radius: var(--radius-lg);
    background: rgba(248, 252, 255, .72);
    border-style: dashed;
    box-shadow: none;
}

.exam-empty-state.compact[b-k3tkzchsre] {
    min-height: 260px;
    padding: 20px;
}

.exam-empty-state > span[b-k3tkzchsre] {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    color: var(--primary-dark);
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--primary-soft), var(--exam-soft));
}

.exam-modal-backdrop[b-k3tkzchsre] {
    background: rgba(15, 32, 51, .32);
    backdrop-filter: blur(8px);
}

.exam-modal-shell[b-k3tkzchsre] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.exam-dialog[b-k3tkzchsre] {
    width: 100%;
    max-width: 760px;
}

.exam-modal[b-k3tkzchsre] {
    overflow: hidden;
    border-radius: 28px;
}

.exam-modal-header[b-k3tkzchsre],
.exam-modal-footer[b-k3tkzchsre] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
}

.exam-modal-header[b-k3tkzchsre] {
    background:
        radial-gradient(circle at 12% 18%, rgba(14, 165, 233, .18), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(252, 231, 243, .72));
}

.exam-modal-header .exam-card-title > span[b-k3tkzchsre] {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #ec4899);
}

.exam-modal-body[b-k3tkzchsre] {
    padding: 22px;
    background: rgba(248, 252, 255, .56);
}

.exam-modal-grid[b-k3tkzchsre] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.exam-readonly-field[b-k3tkzchsre] {
    justify-content: flex-start;
    padding: 0 14px;
}

.exam-modal-footer[b-k3tkzchsre] {
    background: rgba(255, 255, 255, .82);
    border-top: 1px solid var(--border-soft);
}

@media (max-width: 1320px) {
    .exam-summary-grid[b-k3tkzchsre] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1120px) {
    .exam-workspace-grid[b-k3tkzchsre] {
        grid-template-columns: 1fr;
    }

    .exam-sidebar-card[b-k3tkzchsre] {
        position: static;
    }

    .exam-list[b-k3tkzchsre] {
        max-height: none;
    }
}

@media (max-width: 860px) {
    .exams-setup-page[b-k3tkzchsre] {
        padding: 20px 16px 80px;
    }

    .exams-hero[b-k3tkzchsre],
    .exam-summary-card[b-k3tkzchsre],
    .exam-card-header[b-k3tkzchsre],
    .exam-modal-header[b-k3tkzchsre],
    .exam-modal-footer[b-k3tkzchsre] {
        align-items: stretch;
        flex-direction: column;
    }

    .exams-hero-actions[b-k3tkzchsre],
    .exam-card-actions[b-k3tkzchsre] {
        width: 100%;
    }

    .exam-button[b-k3tkzchsre] {
        flex: 1 1 auto;
    }

    .exam-summary-grid[b-k3tkzchsre],
    .scope-form-grid[b-k3tkzchsre],
    .exam-modal-grid[b-k3tkzchsre] {
        grid-template-columns: 1fr;
    }

    .add-scope-button[b-k3tkzchsre] {
        width: 100%;
    }

    .subject-table-wrap[b-k3tkzchsre] {
        display: none;
    }

    .subject-mobile-list[b-k3tkzchsre] {
        display: grid;
        gap: 12px;
    }
}

@media (max-width: 580px) {
    .exams-setup-page[b-k3tkzchsre] {
        padding: 18px 14px 72px;
    }

    .exams-hero[b-k3tkzchsre],
    .exam-sidebar-card[b-k3tkzchsre],
    .exam-summary-card[b-k3tkzchsre],
    .scope-card[b-k3tkzchsre],
    .subject-rules-card[b-k3tkzchsre] {
        padding: 18px;
        border-radius: 24px;
    }

    .exams-hero-copy[b-k3tkzchsre],
    .subject-mobile-top[b-k3tkzchsre] {
        align-items: flex-start;
    }

    .exams-hero h1[b-k3tkzchsre] {
        font-size: 1.55rem;
    }

    .exams-hero-icon[b-k3tkzchsre] {
        width: 52px;
        height: 52px;
    }

    .exam-list-item[b-k3tkzchsre] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .exam-list-item .exam-status-pill[b-k3tkzchsre] {
        grid-column: 2;
        justify-self: start;
    }

    .subject-mobile-grid[b-k3tkzchsre] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/ExamMarksPage.razor.rz.scp.css */
@keyframes examMarksRise-b-fo8m17lyg7 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes examMarksSpin-b-fo8m17lyg7 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes examMarksShimmer-b-fo8m17lyg7 {
    100% {
        transform: translateX(100%);
    }
}

.exam-marks-page[b-fo8m17lyg7] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --exam: #ec4899;
    --exam-soft: #fce7f3;
    --gold: #f59e0b;
    --gold-soft: #fff7ed;
    --success: #10b981;
    --success-soft: #dcfce7;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --locked: #334155;
    --locked-soft: #f1f5f9;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    display: block;
    min-height: 100%;
    overflow-x: hidden;
    padding: 28px 32px 96px;
    color: var(--text-main);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    background:
        radial-gradient(circle at 8% 8%, rgba(14, 165, 233, .18), transparent 34%),
        radial-gradient(circle at 88% 6%, rgba(139, 92, 246, .16), transparent 30%),
        radial-gradient(circle at 92% 92%, rgba(236, 72, 153, .12), transparent 32%),
        linear-gradient(135deg, #eef8ff 0%, #f8fbff 46%, #f7f0ff 100%);
}

.exam-marks-page.mybody[b-fo8m17lyg7] {
    grid-template-rows: unset;
}

.exam-marks-page[b-fo8m17lyg7]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .46) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .18;
}

.exam-marks-shell[b-fo8m17lyg7] {
    position: relative;
    z-index: 1;
    width: min(100%, 1600px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
    animation: examMarksRise-b-fo8m17lyg7 .42s ease both;
}

.exam-marks-hero[b-fo8m17lyg7],
.exam-context-card[b-fo8m17lyg7],
.selected-exam-card[b-fo8m17lyg7],
.exam-summary-card[b-fo8m17lyg7],
.exam-readiness-banner[b-fo8m17lyg7],
.exam-legend-card[b-fo8m17lyg7],
.official-marks-card[b-fo8m17lyg7],
.exam-empty-state[b-fo8m17lyg7],
.exam-loading-state[b-fo8m17lyg7] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.exam-marks-hero[b-fo8m17lyg7] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
}

.exam-marks-hero[b-fo8m17lyg7]::after {
    content: "";
    position: absolute;
    inset: auto -8% -90% 52%;
    height: 180px;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(8px);
    background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(236, 72, 153, .16));
}

.exam-marks-hero-copy[b-fo8m17lyg7],
.exam-card-header[b-fo8m17lyg7],
.exam-card-title[b-fo8m17lyg7],
.selected-exam-card[b-fo8m17lyg7],
.selected-exam-main[b-fo8m17lyg7],
.selected-exam-meta[b-fo8m17lyg7],
.exam-legend-card[b-fo8m17lyg7],
.marks-sheet-actions[b-fo8m17lyg7],
.scope-chip-wrap[b-fo8m17lyg7],
.student-cell[b-fo8m17lyg7],
.subject-head-card[b-fo8m17lyg7],
.score-input-wrap[b-fo8m17lyg7],
.mark-cell-footer[b-fo8m17lyg7],
.absent-toggle[b-fo8m17lyg7],
.mobile-student-top[b-fo8m17lyg7],
.mobile-total-row[b-fo8m17lyg7],
.exam-button[b-fo8m17lyg7] {
    display: flex;
    align-items: center;
}

.exam-marks-hero-copy[b-fo8m17lyg7],
.exam-card-title[b-fo8m17lyg7],
.selected-exam-main[b-fo8m17lyg7],
.student-cell[b-fo8m17lyg7],
.subject-head-card[b-fo8m17lyg7] {
    gap: 14px;
}

.exam-card-header[b-fo8m17lyg7],
.selected-exam-card[b-fo8m17lyg7] {
    justify-content: space-between;
    gap: 16px;
}

.selected-exam-meta[b-fo8m17lyg7],
.exam-legend-card[b-fo8m17lyg7],
.marks-sheet-actions[b-fo8m17lyg7],
.scope-chip-wrap[b-fo8m17lyg7],
.mark-cell-footer[b-fo8m17lyg7] {
    flex-wrap: wrap;
    gap: 10px;
}

.exam-marks-hero-icon[b-fo8m17lyg7],
.exam-card-title > span[b-fo8m17lyg7],
.selected-exam-icon[b-fo8m17lyg7],
.summary-icon[b-fo8m17lyg7],
.student-avatar[b-fo8m17lyg7],
.subject-head-icon[b-fo8m17lyg7],
.exam-empty-state > span[b-fo8m17lyg7] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.exam-marks-hero-icon[b-fo8m17lyg7] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: #fff;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6 48%, #ec4899);
    box-shadow: 0 18px 34px rgba(236, 72, 153, .22);
}

.exam-marks-hero h1[b-fo8m17lyg7],
.exam-card-title h2[b-fo8m17lyg7],
.selected-exam-card h2[b-fo8m17lyg7],
.exam-readiness-banner h2[b-fo8m17lyg7],
.exam-empty-state h2[b-fo8m17lyg7],
.exam-loading-state h2[b-fo8m17lyg7] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.035em;
}

.exam-marks-hero h1[b-fo8m17lyg7] {
    font-size: clamp(1.7rem, 2.4vw, 2.25rem);
}

.exam-card-title h2[b-fo8m17lyg7],
.selected-exam-card h2[b-fo8m17lyg7],
.exam-readiness-banner h2[b-fo8m17lyg7],
.exam-empty-state h2[b-fo8m17lyg7],
.exam-loading-state h2[b-fo8m17lyg7] {
    font-size: 1.1rem;
}

.exam-marks-hero p[b-fo8m17lyg7],
.exam-card-title p[b-fo8m17lyg7],
.selected-exam-card p[b-fo8m17lyg7],
.exam-readiness-banner p[b-fo8m17lyg7],
.exam-empty-state p[b-fo8m17lyg7],
.exam-loading-state p[b-fo8m17lyg7],
.exam-card-title small[b-fo8m17lyg7] {
    margin: 0;
    color: var(--text-body);
}

.exam-status-pill[b-fo8m17lyg7],
.selected-exam-meta span[b-fo8m17lyg7],
.legend-title[b-fo8m17lyg7],
.legend-chip[b-fo8m17lyg7],
.scope-chip[b-fo8m17lyg7],
.mini-result-pill[b-fo8m17lyg7],
.result-badge[b-fo8m17lyg7],
.percentage-pill[b-fo8m17lyg7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 900;
    white-space: nowrap;
}

.exam-status-pill[b-fo8m17lyg7],
.selected-exam-meta span[b-fo8m17lyg7],
.legend-title[b-fo8m17lyg7],
.legend-chip[b-fo8m17lyg7],
.scope-chip[b-fo8m17lyg7] {
    min-height: 34px;
    padding: 0 12px;
}

.exam-status-pill.draft[b-fo8m17lyg7],
.legend-chip.absent[b-fo8m17lyg7] {
    color: #b45309;
    background: var(--gold-soft);
}

.exam-status-pill.published[b-fo8m17lyg7],
.legend-chip.pass[b-fo8m17lyg7] {
    color: #047857;
    background: var(--success-soft);
}

.exam-status-pill.locked[b-fo8m17lyg7] {
    color: var(--locked);
    background: var(--locked-soft);
}

.exam-status-pill.neutral[b-fo8m17lyg7],
.legend-title[b-fo8m17lyg7],
.legend-chip.result[b-fo8m17lyg7] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.legend-chip.fail[b-fo8m17lyg7] {
    color: #be123c;
    background: var(--danger-soft);
}

.exam-context-card[b-fo8m17lyg7],
.official-marks-card[b-fo8m17lyg7] {
    padding: 20px 22px;
    border-radius: var(--radius-lg);
}

.exam-card-header[b-fo8m17lyg7] {
    margin-bottom: 18px;
}

.exam-card-title > span[b-fo8m17lyg7] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, var(--primary-soft), var(--violet-soft));
}

.exam-filter-grid[b-fo8m17lyg7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.exam-field[b-fo8m17lyg7] {
    display: grid;
    gap: 8px;
}

.exam-field > span[b-fo8m17lyg7] {
    color: var(--text-body);
    font-size: .78rem;
    font-weight: 850;
}

.exam-field > span i[b-fo8m17lyg7] {
    margin-right: 6px;
    color: var(--primary);
}

.exam-select[b-fo8m17lyg7],
.official-score-input[b-fo8m17lyg7] {
    min-height: 46px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background-color: rgba(255, 255, 255, .9);
    color: var(--text-main);
    font-size: .92rem;
    font-weight: 780;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.exam-select:focus[b-fo8m17lyg7],
.official-score-input:focus[b-fo8m17lyg7] {
    border-color: rgba(14, 165, 233, .5);
    box-shadow: 0 0 0 .22rem rgba(14, 165, 233, .1), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.selected-exam-card[b-fo8m17lyg7] {
    padding: 20px 22px;
    border-radius: var(--radius-lg);
}

.selected-exam-icon[b-fo8m17lyg7],
.summary-icon[b-fo8m17lyg7] {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 14px 24px rgba(14, 165, 233, .18);
}

.selected-exam-meta span:not(.exam-status-pill)[b-fo8m17lyg7] {
    color: var(--text-body);
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--border-soft);
}

.exam-summary-grid[b-fo8m17lyg7] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.exam-summary-card[b-fo8m17lyg7] {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 14px;
    min-height: 132px;
    padding: 18px;
    border-radius: var(--radius-lg);
}

.exam-summary-card[b-fo8m17lyg7]::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -52px;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: rgba(14, 165, 233, .09);
}

.exam-summary-card.subjects .summary-icon[b-fo8m17lyg7],
.exam-summary-card.entered .summary-icon[b-fo8m17lyg7] {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

.exam-summary-card.passed .summary-icon[b-fo8m17lyg7] {
    background: linear-gradient(135deg, #10b981, #0ea5e9);
}

.exam-summary-card.failed .summary-icon[b-fo8m17lyg7] {
    background: linear-gradient(135deg, #ef476f, #ec4899);
}

.exam-summary-card.status.draft .summary-icon[b-fo8m17lyg7] {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
}

.exam-summary-card.status.published .summary-icon[b-fo8m17lyg7] {
    background: linear-gradient(135deg, #10b981, #0ea5e9);
}

.exam-summary-card.status.locked .summary-icon[b-fo8m17lyg7] {
    background: linear-gradient(135deg, #334155, #64748b);
}

.exam-summary-card small[b-fo8m17lyg7] {
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.exam-summary-card strong[b-fo8m17lyg7] {
    display: block;
    margin: 4px 0 2px;
    color: var(--text-main);
    font-size: clamp(1.12rem, 1.8vw, 1.62rem);
    font-weight: 900;
    line-height: 1.16;
}

.exam-summary-card p[b-fo8m17lyg7] {
    margin: 0;
    color: var(--text-body);
    font-size: .8rem;
}

.exam-summary-card.skeleton span[b-fo8m17lyg7],
.exam-summary-card.skeleton strong[b-fo8m17lyg7],
.exam-summary-card.skeleton small[b-fo8m17lyg7] {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 999px;
    background: rgba(226, 240, 250, .86);
}

.exam-summary-card.skeleton span[b-fo8m17lyg7]::after,
.exam-summary-card.skeleton strong[b-fo8m17lyg7]::after,
.exam-summary-card.skeleton small[b-fo8m17lyg7]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .82), transparent);
    animation: examMarksShimmer-b-fo8m17lyg7 1.2s infinite;
}

.exam-summary-card.skeleton span[b-fo8m17lyg7] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
}

.exam-summary-card.skeleton strong[b-fo8m17lyg7] {
    width: 54%;
    height: 28px;
}

.exam-summary-card.skeleton small[b-fo8m17lyg7] {
    width: 72%;
    height: 12px;
}

.exam-readiness-banner[b-fo8m17lyg7] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
}

.exam-readiness-banner > span[b-fo8m17lyg7] {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    font-size: 1.1rem;
}

.exam-readiness-banner.success[b-fo8m17lyg7] {
    border-color: rgba(16, 185, 129, .25);
    background: linear-gradient(135deg, rgba(220, 252, 231, .9), rgba(255, 255, 255, .82));
}

.exam-readiness-banner.success > span[b-fo8m17lyg7] {
    color: #047857;
    background: var(--success-soft);
}

.exam-readiness-banner.warning[b-fo8m17lyg7],
.exam-readiness-banner.draft[b-fo8m17lyg7] {
    border-color: rgba(245, 158, 11, .24);
    background: linear-gradient(135deg, rgba(255, 247, 237, .94), rgba(255, 255, 255, .84));
}

.exam-readiness-banner.warning > span[b-fo8m17lyg7],
.exam-readiness-banner.draft > span[b-fo8m17lyg7] {
    color: #b45309;
    background: var(--gold-soft);
}

.exam-readiness-banner.danger[b-fo8m17lyg7] {
    border-color: rgba(239, 71, 111, .24);
    background: linear-gradient(135deg, rgba(255, 228, 236, .94), rgba(255, 255, 255, .84));
}

.exam-readiness-banner.danger > span[b-fo8m17lyg7] {
    color: #be123c;
    background: var(--danger-soft);
}

.exam-readiness-banner.locked[b-fo8m17lyg7] {
    border-color: rgba(51, 65, 85, .18);
    background: linear-gradient(135deg, rgba(241, 245, 249, .96), rgba(255, 255, 255, .84));
}

.exam-readiness-banner.locked > span[b-fo8m17lyg7] {
    color: var(--locked);
    background: var(--locked-soft);
}

.exam-legend-card[b-fo8m17lyg7] {
    padding: 14px 16px;
    border-radius: var(--radius-md);
}

.official-marks-card[b-fo8m17lyg7] {
    overflow: hidden;
}

.marks-sheet-header[b-fo8m17lyg7] {
    align-items: flex-start;
}

.marks-sheet-actions[b-fo8m17lyg7] {
    justify-content: flex-end;
}

.exam-button[b-fo8m17lyg7] {
    border: 0;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 16px;
    font-size: .9rem;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease;
}

.exam-button:not(:disabled):hover[b-fo8m17lyg7] {
    transform: translateY(-1px);
}

.exam-button-primary[b-fo8m17lyg7] {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6 52%, #ec4899);
    box-shadow: 0 16px 28px rgba(14, 165, 233, .22);
}

.exam-button:disabled[b-fo8m17lyg7] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
}

.scope-chip[b-fo8m17lyg7] {
    border: 1px solid rgba(245, 158, 11, .24);
    color: #b45309;
    background: rgba(255, 247, 237, .8);
}

.scope-chip.active[b-fo8m17lyg7] {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6 52%, #ec4899);
    box-shadow: 0 14px 26px rgba(14, 165, 233, .18);
}

.official-table-wrap[b-fo8m17lyg7] {
    overflow: auto;
    max-height: min(72vh, 760px);
    border-radius: 20px;
}

.official-marks-table[b-fo8m17lyg7] {
    width: 100%;
    min-width: 1040px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.official-marks-table thead th[b-fo8m17lyg7] {
    position: sticky;
    top: 0;
    z-index: 3;
    padding: 14px 16px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .055em;
    background: linear-gradient(135deg, rgba(224, 245, 255, .96), rgba(252, 231, 243, .9));
}

.official-marks-table thead th:first-child[b-fo8m17lyg7] {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

.official-marks-table thead th:last-child[b-fo8m17lyg7] {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

.official-marks-table tbody tr[b-fo8m17lyg7] {
    transition: background .18s ease;
}

.official-marks-table tbody tr:hover[b-fo8m17lyg7] {
    background: rgba(14, 165, 233, .04);
}

.official-marks-table tbody tr.failed[b-fo8m17lyg7] {
    background: rgba(255, 228, 236, .18);
}

.official-marks-table tbody td[b-fo8m17lyg7] {
    min-height: 96px;
    padding: 16px;
    border-bottom: 1px solid rgba(120, 170, 210, .16);
    vertical-align: middle;
}

.student-sticky[b-fo8m17lyg7] {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 290px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
}

thead .student-sticky[b-fo8m17lyg7] {
    z-index: 4;
}

.student-avatar[b-fo8m17lyg7] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: #fff;
    font-size: .84rem;
    font-weight: 900;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 12px 22px rgba(14, 165, 233, .16);
}

.student-cell strong[b-fo8m17lyg7],
.subject-head-card strong[b-fo8m17lyg7] {
    display: block;
    color: var(--text-main);
    font-size: .96rem;
    font-weight: 900;
}

.student-cell small[b-fo8m17lyg7],
.subject-head-card small[b-fo8m17lyg7] {
    display: block;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 760;
}

.student-cell em[b-fo8m17lyg7],
.subject-head-card em[b-fo8m17lyg7] {
    display: inline-flex;
    margin-top: 3px;
    color: var(--primary-dark);
    font-size: .73rem;
    font-style: normal;
    font-weight: 850;
}

.subject-head[b-fo8m17lyg7] {
    min-width: 220px;
}

.subject-head-card[b-fo8m17lyg7] {
    justify-content: center;
    text-align: left;
}

.subject-head-icon[b-fo8m17lyg7] {
    width: 42px;
    height: 42px;
    border-radius: 16px;
}

.tone-blue[b-fo8m17lyg7] {
    color: #0369a1;
    background: linear-gradient(135deg, #e0f5ff, #bae6fd);
}

.tone-pink[b-fo8m17lyg7] {
    color: #be185d;
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
}

.tone-violet[b-fo8m17lyg7] {
    color: #6d28d9;
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
}

.tone-cyan[b-fo8m17lyg7] {
    color: #0e7490;
    background: linear-gradient(135deg, #cffafe, #a5f3fc);
}

.tone-gold[b-fo8m17lyg7] {
    color: #b45309;
    background: linear-gradient(135deg, #fff7ed, #fed7aa);
}

.subject-mark-cell.absent[b-fo8m17lyg7],
.mobile-subject-card.absent[b-fo8m17lyg7] {
    background: rgba(255, 247, 237, .5);
}

.subject-mark-cell.fail[b-fo8m17lyg7],
.subject-mark-cell.invalid[b-fo8m17lyg7],
.mobile-subject-card.fail[b-fo8m17lyg7],
.mobile-subject-card.invalid[b-fo8m17lyg7] {
    background: rgba(255, 228, 236, .42);
}

.mark-cell-panel[b-fo8m17lyg7],
.mobile-subject-card[b-fo8m17lyg7] {
    display: grid;
    gap: 10px;
}

.score-input-wrap[b-fo8m17lyg7] {
    justify-content: center;
    gap: 8px;
}

.official-score-input[b-fo8m17lyg7] {
    width: 126px;
    text-align: center;
    font-weight: 900;
}

.official-score-input.pass[b-fo8m17lyg7] {
    border-color: rgba(16, 185, 129, .34);
}

.official-score-input.fail[b-fo8m17lyg7],
.official-score-input.invalid[b-fo8m17lyg7] {
    border-color: rgba(239, 71, 111, .52);
    background: rgba(255, 228, 236, .92);
}

.official-score-input.missing[b-fo8m17lyg7] {
    border-color: rgba(245, 158, 11, .42);
    background: rgba(255, 247, 237, .92);
}

.official-score-input.absent[b-fo8m17lyg7] {
    color: var(--text-muted);
    background: var(--locked-soft);
}

.score-input-wrap > span[b-fo8m17lyg7] {
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 850;
}

.mark-cell-footer[b-fo8m17lyg7] {
    justify-content: space-between;
}

.absent-toggle[b-fo8m17lyg7] {
    gap: 7px;
    color: var(--text-body);
    font-size: .78rem;
    font-weight: 850;
}

.absent-toggle .form-check-input[b-fo8m17lyg7] {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border-color: rgba(239, 71, 111, .28);
}

.absent-toggle .form-check-input:checked[b-fo8m17lyg7] {
    background-color: var(--exam);
    border-color: var(--exam);
}

.mini-result-pill[b-fo8m17lyg7] {
    min-height: 28px;
    padding: 0 10px;
}

.mini-result-pill.pass[b-fo8m17lyg7],
.result-badge.passed[b-fo8m17lyg7],
.percentage-pill.passed[b-fo8m17lyg7] {
    color: #047857;
    background: var(--success-soft);
}

.mini-result-pill.fail[b-fo8m17lyg7],
.mini-result-pill.invalid[b-fo8m17lyg7],
.result-badge.failed[b-fo8m17lyg7],
.percentage-pill.failed[b-fo8m17lyg7] {
    color: #be123c;
    background: var(--danger-soft);
}

.mini-result-pill.missing[b-fo8m17lyg7] {
    color: #b45309;
    background: var(--gold-soft);
}

.mini-result-pill.absent[b-fo8m17lyg7] {
    color: var(--locked);
    background: var(--locked-soft);
}

.total-cell strong[b-fo8m17lyg7] {
    display: block;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 900;
}

.total-cell small[b-fo8m17lyg7] {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 780;
}

.percent-cell i[b-fo8m17lyg7] {
    display: block;
    overflow: hidden;
    width: 88px;
    height: 7px;
    margin-left: auto;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(226, 240, 250, .96);
}

.percent-cell b[b-fo8m17lyg7] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
}

.result-badge[b-fo8m17lyg7] {
    min-height: 36px;
    padding: 0 14px;
}

.exam-mobile-list[b-fo8m17lyg7] {
    display: none;
}

.exam-mobile-card[b-fo8m17lyg7] {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-card);
}

.exam-mobile-card.failed[b-fo8m17lyg7] {
    background: linear-gradient(135deg, rgba(255, 228, 236, .72), rgba(255, 255, 255, .78));
}

.mobile-student-top[b-fo8m17lyg7],
.mobile-total-row[b-fo8m17lyg7] {
    justify-content: space-between;
    gap: 12px;
}

.mobile-subject-grid[b-fo8m17lyg7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mobile-subject-card[b-fo8m17lyg7] {
    padding: 14px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .74);
}

.mobile-total-row span[b-fo8m17lyg7] {
    display: grid;
    gap: 2px;
}

.mobile-total-row small[b-fo8m17lyg7] {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.mobile-total-row strong[b-fo8m17lyg7] {
    color: var(--text-main);
    font-weight: 900;
}

.exam-empty-state[b-fo8m17lyg7],
.exam-loading-state[b-fo8m17lyg7] {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 12px;
    min-height: 300px;
    border-radius: var(--radius-lg);
    background: rgba(248, 252, 255, .72);
    border-style: dashed;
    box-shadow: none;
}

.exam-empty-state > span[b-fo8m17lyg7] {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    color: var(--primary-dark);
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--primary-soft), var(--exam-soft));
}

.exam-loading-state > span[b-fo8m17lyg7] {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(14, 165, 233, .16);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: examMarksSpin-b-fo8m17lyg7 .8s linear infinite;
}

@media (max-width: 1320px) {
    .exam-summary-grid[b-fo8m17lyg7] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .exam-filter-grid[b-fo8m17lyg7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .selected-exam-card[b-fo8m17lyg7],
    .exam-card-header[b-fo8m17lyg7] {
        align-items: stretch;
        flex-direction: column;
    }

    .marks-sheet-actions[b-fo8m17lyg7] {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .exam-marks-page[b-fo8m17lyg7] {
        padding: 18px 14px 72px;
    }

    .exam-marks-hero[b-fo8m17lyg7] {
        align-items: stretch;
        flex-direction: column;
    }

    .exam-filter-grid[b-fo8m17lyg7],
    .exam-summary-grid[b-fo8m17lyg7],
    .mobile-subject-grid[b-fo8m17lyg7] {
        grid-template-columns: 1fr;
    }

    .official-table-wrap[b-fo8m17lyg7] {
        display: none;
    }

    .exam-mobile-list[b-fo8m17lyg7] {
        display: grid;
        gap: 12px;
    }

    .exam-button[b-fo8m17lyg7] {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .exam-marks-hero[b-fo8m17lyg7],
    .exam-context-card[b-fo8m17lyg7],
    .selected-exam-card[b-fo8m17lyg7],
    .official-marks-card[b-fo8m17lyg7] {
        padding: 18px;
        border-radius: 24px;
    }

    .exam-marks-hero-copy[b-fo8m17lyg7],
    .mobile-student-top[b-fo8m17lyg7] {
        align-items: flex-start;
    }

    .exam-marks-hero h1[b-fo8m17lyg7] {
        font-size: 1.55rem;
    }

    .exam-marks-hero-icon[b-fo8m17lyg7] {
        width: 52px;
        height: 52px;
    }

    .mobile-student-top[b-fo8m17lyg7],
    .mobile-total-row[b-fo8m17lyg7] {
        flex-direction: column;
    }
}
/* /Components/Pages/ExchangeRatesPage.razor.rz.scp.css */
.exchange-page[b-lpp86l4rh0] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --surface-soft: rgba(248, 252, 255, 0.78);
    --border-soft: rgba(120, 170, 210, 0.22);
    --border-glass: rgba(255, 255, 255, 0.75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --finance: #f59e0b;
    --finance-soft: #fff7ed;
    --success: #10b981;
    --success-soft: #dcfce7;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --pink: #ec4899;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, 0.08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, 0.07);
    display: block;
    min-height: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(14px, 2vw, 28px);
    border-radius: 30px;
    color: var(--text-main);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    background:
        radial-gradient(circle at 4% 0%, rgba(14, 165, 233, 0.2), transparent 32%),
        radial-gradient(circle at 92% 6%, rgba(139, 92, 246, 0.16), transparent 34%),
        radial-gradient(circle at 98% 100%, rgba(236, 72, 153, 0.12), transparent 30%),
        linear-gradient(135deg, #eef8ff 0%, #f8fcff 48%, #fff3fb 100%);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.exchange-page[b-lpp86l4rh0]::-webkit-scrollbar,
.ledger-table-wrap[b-lpp86l4rh0]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.exchange-page[b-lpp86l4rh0]::-webkit-scrollbar-track,
.ledger-table-wrap[b-lpp86l4rh0]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.45);
    border-radius: 999px;
}

.exchange-page[b-lpp86l4rh0]::-webkit-scrollbar-thumb,
.ledger-table-wrap[b-lpp86l4rh0]::-webkit-scrollbar-thumb {
    border: 2px solid rgba(255, 255, 255, 0.68);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.5), rgba(139, 92, 246, 0.45));
}

.exchange-shell[b-lpp86l4rh0] {
    width: min(100%, 1540px);
    margin: 0 auto;
    display: grid;
    gap: 20px;
}

.exchange-hero[b-lpp86l4rh0],
.control-card[b-lpp86l4rh0],
.workspace-card[b-lpp86l4rh0],
.kpi-card[b-lpp86l4rh0],
.pair-card[b-lpp86l4rh0],
.mobile-rate-card[b-lpp86l4rh0] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(20px);
}

.exchange-hero[b-lpp86l4rh0] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(20px, 2.5vw, 28px);
    border-radius: var(--radius-xl);
}

.hero-glow[b-lpp86l4rh0] {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    pointer-events: none;
}

.hero-glow-cyan[b-lpp86l4rh0] {
    top: -145px;
    left: 18%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.2), transparent 72%);
}

.hero-glow-violet[b-lpp86l4rh0] {
    right: -80px;
    bottom: -160px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.22), transparent 72%);
}

.hero-title-wrap[b-lpp86l4rh0],
.section-title[b-lpp86l4rh0],
.hero-actions[b-lpp86l4rh0],
.filter-chips[b-lpp86l4rh0],
.route-pills[b-lpp86l4rh0],
.pair-top[b-lpp86l4rh0],
.action-group[b-lpp86l4rh0] {
    display: flex;
    align-items: center;
}

.hero-title-wrap[b-lpp86l4rh0] {
    position: relative;
    z-index: 1;
    gap: 15px;
}

.hero-icon[b-lpp86l4rh0],
.section-icon[b-lpp86l4rh0],
.kpi-icon[b-lpp86l4rh0],
.modal-icon[b-lpp86l4rh0] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.hero-icon[b-lpp86l4rh0] {
    width: 62px;
    height: 62px;
    border-radius: 22px;
    color: #fff;
    font-size: 1.35rem;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 18px 36px rgba(14, 165, 233, 0.25);
}

.exchange-hero h3[b-lpp86l4rh0] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.exchange-hero p[b-lpp86l4rh0],
.section-head p[b-lpp86l4rh0],
.kpi-card p[b-lpp86l4rh0],
.empty-state p[b-lpp86l4rh0],
.pair-card p[b-lpp86l4rh0] {
    margin: 0;
    color: var(--text-body);
}

.hero-actions[b-lpp86l4rh0] {
    position: relative;
    z-index: 1;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.primary-btn[b-lpp86l4rh0],
.soft-btn[b-lpp86l4rh0],
.ghost-btn[b-lpp86l4rh0],
.refresh-btn[b-lpp86l4rh0],
.danger-btn[b-lpp86l4rh0],
.icon-btn[b-lpp86l4rh0],
.modal-close[b-lpp86l4rh0] {
    border: 0;
    outline: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.primary-btn[b-lpp86l4rh0],
.soft-btn[b-lpp86l4rh0],
.ghost-btn[b-lpp86l4rh0],
.refresh-btn[b-lpp86l4rh0],
.danger-btn[b-lpp86l4rh0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 16px;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.3;
}

.primary-btn[b-lpp86l4rh0],
.refresh-btn[b-lpp86l4rh0] {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 15px 30px rgba(14, 165, 233, 0.22);
}

.primary-btn:disabled[b-lpp86l4rh0],
.refresh-btn:disabled[b-lpp86l4rh0] {
    cursor: not-allowed;
    opacity: 0.58;
}

.soft-btn[b-lpp86l4rh0],
.ghost-btn[b-lpp86l4rh0] {
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, 0.2);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-card);
}

.ghost-btn[b-lpp86l4rh0] {
    color: #58677a;
    border-color: rgba(120, 170, 210, 0.26);
}

.danger-btn[b-lpp86l4rh0] {
    color: #fff;
    background: linear-gradient(135deg, #fb7185, #ef476f);
    box-shadow: 0 16px 32px rgba(239, 71, 111, 0.22);
}

.primary-btn:hover[b-lpp86l4rh0],
.soft-btn:hover[b-lpp86l4rh0],
.ghost-btn:hover[b-lpp86l4rh0],
.refresh-btn:hover[b-lpp86l4rh0],
.danger-btn:hover[b-lpp86l4rh0],
.icon-btn:hover[b-lpp86l4rh0],
.modal-close:hover[b-lpp86l4rh0] {
    transform: translateY(-1px);
}

.control-card[b-lpp86l4rh0],
.workspace-card[b-lpp86l4rh0] {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.control-card[b-lpp86l4rh0] {
    padding: 20px;
}

.section-head[b-lpp86l4rh0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.workspace-card .section-head[b-lpp86l4rh0] {
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-soft);
}

.section-title[b-lpp86l4rh0] {
    gap: 12px;
}

.section-icon[b-lpp86l4rh0] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.92), rgba(237, 233, 254, 0.88));
}

.section-icon.gold[b-lpp86l4rh0] {
    color: #b45309;
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
}

.section-head h5[b-lpp86l4rh0] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.section-head p[b-lpp86l4rh0] {
    font-size: 0.9rem;
}

.filter-chips[b-lpp86l4rh0] {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chips span[b-lpp86l4rh0],
.count-badge[b-lpp86l4rh0] {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, 0.82);
    border: 1px solid rgba(14, 165, 233, 0.18);
    font-size: 0.78rem;
    font-weight: 850;
}

.count-badge[b-lpp86l4rh0] {
    color: #047857;
    background: rgba(220, 252, 231, 0.82);
    border-color: rgba(16, 185, 129, 0.18);
}

.count-badge.muted[b-lpp86l4rh0] {
    color: #64748b;
    background: rgba(241, 245, 249, 0.9);
    border-color: rgba(148, 163, 184, 0.24);
}

.controls-grid[b-lpp86l4rh0] {
    display: grid;
    grid-template-columns: minmax(180px, 0.8fr) minmax(180px, 0.8fr) minmax(260px, 1.3fr) auto;
    gap: 14px;
    align-items: end;
}

.control-field[b-lpp86l4rh0] {
    display: grid;
    gap: 7px;
}

.control-field label[b-lpp86l4rh0] {
    color: #486074;
    font-size: 0.78rem;
    font-weight: 850;
}

.input-shell[b-lpp86l4rh0] {
    position: relative;
}

.input-shell > i[b-lpp86l4rh0] {
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
}

.lux-input[b-lpp86l4rh0] {
    width: 100%;
    min-height: 46px;
    padding-left: 39px;
    border: 1px solid rgba(190, 207, 224, 0.74);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--text-main);
    font-size: 0.92rem;
    font-weight: 760;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.modal-body .lux-input[b-lpp86l4rh0] {
    padding-left: 12px;
}

.lux-input:focus[b-lpp86l4rh0],
.primary-btn:focus-visible[b-lpp86l4rh0],
.soft-btn:focus-visible[b-lpp86l4rh0],
.ghost-btn:focus-visible[b-lpp86l4rh0],
.refresh-btn:focus-visible[b-lpp86l4rh0],
.danger-btn:focus-visible[b-lpp86l4rh0],
.icon-btn:focus-visible[b-lpp86l4rh0],
.modal-close:focus-visible[b-lpp86l4rh0] {
    border-color: rgba(14, 165, 233, 0.72);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14);
}

.control-actions[b-lpp86l4rh0] {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: 9px;
}

.kpi-grid[b-lpp86l4rh0] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.kpi-card[b-lpp86l4rh0] {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    padding: 17px;
    border-radius: var(--radius-lg);
}

.kpi-card[b-lpp86l4rh0]::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -54px;
    width: 125px;
    height: 125px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.09);
}

.kpi-icon[b-lpp86l4rh0] {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 15px;
    color: #fff;
}

.kpi-icon.cyan[b-lpp86l4rh0] {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}

.kpi-icon.emerald[b-lpp86l4rh0] {
    background: linear-gradient(135deg, #34d399, #059669);
}

.kpi-icon.gold[b-lpp86l4rh0] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.kpi-icon.violet[b-lpp86l4rh0] {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
}

.kpi-icon.pink[b-lpp86l4rh0] {
    background: linear-gradient(135deg, #f472b6, #ec4899);
}

.kpi-icon.slate[b-lpp86l4rh0] {
    background: linear-gradient(135deg, #64748b, #334155);
}

.kpi-card small[b-lpp86l4rh0] {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kpi-card strong[b-lpp86l4rh0] {
    display: block;
    margin: 4px 0 3px;
    color: var(--text-main);
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 950;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.pair-grid[b-lpp86l4rh0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
}

.pair-card[b-lpp86l4rh0],
.mobile-rate-card[b-lpp86l4rh0] {
    display: grid;
    gap: 9px;
    padding: 16px;
    border-radius: 22px;
    box-shadow: var(--shadow-card);
}

.pair-card[b-lpp86l4rh0] {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 252, 255, 0.74));
}

.pair-card:hover[b-lpp86l4rh0] {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(23, 55, 90, 0.1);
}

.pair-top[b-lpp86l4rh0] {
    justify-content: space-between;
    gap: 10px;
}

.route-pills[b-lpp86l4rh0] {
    flex-wrap: wrap;
    gap: 7px;
}

.currency-pill[b-lpp86l4rh0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.04em;
}

.currency-pill.source[b-lpp86l4rh0] {
    color: #78350f;
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.currency-pill.target[b-lpp86l4rh0] {
    color: #075985;
    background: linear-gradient(135deg, #e0f5ff, #ede9fe);
    border: 1px solid rgba(14, 165, 233, 0.2);
}

.currency-pill em[b-lpp86l4rh0] {
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: #b45309;
    font-style: normal;
    font-size: 0.66rem;
    letter-spacing: 0;
}

.route-arrow[b-lpp86l4rh0],
.route-chip[b-lpp86l4rh0] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.route-arrow[b-lpp86l4rh0] {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, 0.9);
}

.route-chip[b-lpp86l4rh0] {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, 0.9);
    border: 1px solid rgba(14, 165, 233, 0.18);
}

.pair-card > small[b-lpp86l4rh0] {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 850;
}

.pair-card > strong[b-lpp86l4rh0],
.rate-stack strong[b-lpp86l4rh0],
.modal-route-preview strong[b-lpp86l4rh0],
.delete-summary strong[b-lpp86l4rh0] {
    color: var(--primary-dark);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 950;
}

.pair-card > strong[b-lpp86l4rh0] {
    font-size: 1.38rem;
}

.pair-card p[b-lpp86l4rh0],
.mobile-rate-card p[b-lpp86l4rh0] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
}

.icon-btn[b-lpp86l4rh0] {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(226, 232, 240, 0.74);
    box-shadow: 0 9px 20px rgba(23, 55, 90, 0.07);
}

.icon-btn.edit[b-lpp86l4rh0] {
    color: var(--primary-dark);
}

.icon-btn.delete[b-lpp86l4rh0] {
    color: var(--danger);
}

.ledger-table-wrap[b-lpp86l4rh0] {
    overflow-x: auto;
}

.ledger-table[b-lpp86l4rh0] {
    width: 100%;
    min-width: 840px;
    border-collapse: separate;
    border-spacing: 0;
}

.ledger-table thead th[b-lpp86l4rh0] {
    padding: 14px 18px;
    color: #64748b;
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.7), rgba(255, 247, 237, 0.42));
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ledger-table tbody td[b-lpp86l4rh0] {
    min-height: 70px;
    padding: 16px 18px;
    color: var(--text-main);
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    vertical-align: middle;
}

.ledger-table tbody tr[b-lpp86l4rh0] {
    transition: background 0.18s ease;
}

.ledger-table tbody tr:hover[b-lpp86l4rh0] {
    background: rgba(14, 165, 233, 0.045);
}

.rate-stack[b-lpp86l4rh0] {
    display: grid;
    gap: 1px;
}

.rate-stack strong[b-lpp86l4rh0] {
    font-size: 1rem;
}

.rate-stack small[b-lpp86l4rh0] {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
}

.date-chip[b-lpp86l4rh0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 10px;
    border-radius: 999px;
    color: #475569;
    background: rgba(241, 245, 249, 0.88);
    font-size: 0.8rem;
    font-weight: 800;
}

.action-group[b-lpp86l4rh0] {
    justify-content: flex-end;
    gap: 7px;
}

.mobile-rate-list[b-lpp86l4rh0] {
    display: none;
    padding: 14px;
    gap: 12px;
}

.mobile-rate-card[b-lpp86l4rh0] {
    background: rgba(255, 255, 255, 0.82);
}

.skeleton-grid[b-lpp86l4rh0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 18px;
}

.skeleton-card[b-lpp86l4rh0],
.ledger-skeleton span[b-lpp86l4rh0] {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.66);
}

.skeleton-card[b-lpp86l4rh0] {
    min-height: 156px;
    padding: 16px;
}

.skeleton-card span[b-lpp86l4rh0],
.skeleton-card strong[b-lpp86l4rh0],
.skeleton-card em[b-lpp86l4rh0] {
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(226, 232, 240, 0.78), rgba(255, 255, 255, 0.84), rgba(226, 232, 240, 0.78));
    animation: shimmer-b-lpp86l4rh0 1.2s infinite linear;
}

.skeleton-card span[b-lpp86l4rh0] {
    width: 58%;
    height: 32px;
}

.skeleton-card strong[b-lpp86l4rh0] {
    width: 78%;
    height: 28px;
    margin-top: 24px;
}

.skeleton-card em[b-lpp86l4rh0] {
    width: 45%;
    height: 16px;
    margin-top: 12px;
}

.ledger-skeleton[b-lpp86l4rh0] {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.ledger-skeleton span[b-lpp86l4rh0] {
    height: 58px;
}

.empty-state[b-lpp86l4rh0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 32px 18px;
    text-align: center;
}

.empty-state.compact[b-lpp86l4rh0] {
    min-height: 230px;
}

.empty-state > span[b-lpp86l4rh0] {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 14px;
    border-radius: 24px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.95), rgba(237, 233, 254, 0.88));
    font-size: 1.65rem;
}

.empty-state h5[b-lpp86l4rh0] {
    margin: 0 0 4px;
    font-weight: 950;
}

.empty-state p[b-lpp86l4rh0] {
    max-width: 460px;
    margin-bottom: 16px;
}

.exchange-backdrop[b-lpp86l4rh0] {
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(8px);
}

.lux-modal-dialog[b-lpp86l4rh0] {
    width: 100%;
    max-width: 760px;
}

.delete-dialog[b-lpp86l4rh0] {
    width: 100%;
    max-width: 520px;
}

.lux-modal[b-lpp86l4rh0] {
    overflow: hidden;
    border: 1px solid var(--border-glass);
    border-radius: 28px;
    background:
        radial-gradient(circle at 0% 0%, rgba(14, 165, 233, 0.12), transparent 42%),
        rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
    backdrop-filter: blur(24px);
}

.lux-modal-header[b-lpp86l4rh0] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.78);
}

.lux-modal-header h5[b-lpp86l4rh0] {
    margin: 0;
    color: var(--text-main);
}

.lux-modal-header p[b-lpp86l4rh0] {
    margin: 2px 0 0;
    color: var(--text-body);
    font-size: 0.86rem;
}

.modal-icon[b-lpp86l4rh0] {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
}

.lux-modal-header.danger .modal-icon[b-lpp86l4rh0] {
    background: linear-gradient(135deg, #fb7185, #ef476f);
}

.modal-close[b-lpp86l4rh0] {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: #475569;
    background: rgba(15, 23, 42, 0.06);
}

.modal-route-preview[b-lpp86l4rh0],
.delete-summary[b-lpp86l4rh0] {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(14, 165, 233, 0.14);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.58), rgba(255, 255, 255, 0.78));
}

.modal-route-preview[b-lpp86l4rh0] {
    grid-template-columns: auto auto auto 1fr auto;
    align-items: center;
}

.modal-route-preview strong[b-lpp86l4rh0] {
    justify-self: end;
}

.modal-route-preview small[b-lpp86l4rh0] {
    color: var(--text-muted);
    font-weight: 800;
}

.delete-summary > div:not(.route-pills)[b-lpp86l4rh0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.delete-summary small[b-lpp86l4rh0] {
    color: var(--text-muted);
    font-weight: 850;
}

.lux-modal-footer[b-lpp86l4rh0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(226, 232, 240, 0.78);
    background: rgba(248, 250, 252, 0.78);
}

.animated[b-lpp86l4rh0] {
    animation-duration: 0.4s;
    animation-fill-mode: both;
}

.fadeIn[b-lpp86l4rh0] {
    animation-name: fadeIn-b-lpp86l4rh0;
}

.slideDown[b-lpp86l4rh0] {
    animation-name: slideDown-b-lpp86l4rh0;
    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
}

@keyframes fadeIn-b-lpp86l4rh0 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown-b-lpp86l4rh0 {
    from {
        opacity: 0;
        transform: translateY(-28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer-b-lpp86l4rh0 {
    from {
        background-position: -240px 0;
    }

    to {
        background-position: 240px 0;
    }
}

@media (max-width: 1280px) {
    .kpi-grid[b-lpp86l4rh0] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pair-grid[b-lpp86l4rh0],
    .skeleton-grid[b-lpp86l4rh0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .controls-grid[b-lpp86l4rh0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-field[b-lpp86l4rh0],
    .control-actions[b-lpp86l4rh0] {
        grid-column: span 1;
    }
}

@media (max-width: 860px) {
    .exchange-page[b-lpp86l4rh0] {
        padding: 12px;
        border-radius: 22px;
    }

    .exchange-hero[b-lpp86l4rh0],
    .section-head[b-lpp86l4rh0] {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions[b-lpp86l4rh0],
    .control-actions[b-lpp86l4rh0] {
        justify-content: stretch;
    }

    .hero-actions > *[b-lpp86l4rh0],
    .control-actions > *[b-lpp86l4rh0] {
        flex: 1 1 0;
    }

    .controls-grid[b-lpp86l4rh0],
    .kpi-grid[b-lpp86l4rh0],
    .pair-grid[b-lpp86l4rh0],
    .skeleton-grid[b-lpp86l4rh0] {
        grid-template-columns: 1fr;
    }

    .filter-chips[b-lpp86l4rh0] {
        justify-content: flex-start;
    }

    .ledger-table-wrap[b-lpp86l4rh0] {
        display: none;
    }

    .mobile-rate-list[b-lpp86l4rh0] {
        display: grid;
    }

    .modal-route-preview[b-lpp86l4rh0] {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .modal-route-preview strong[b-lpp86l4rh0] {
        justify-self: start;
    }

    .lux-modal-footer[b-lpp86l4rh0] {
        flex-direction: column-reverse;
    }

    .lux-modal-footer > *[b-lpp86l4rh0] {
        width: 100%;
    }
}

@media (max-width: 540px) {
    .hero-title-wrap[b-lpp86l4rh0],
    .section-title[b-lpp86l4rh0] {
        align-items: flex-start;
    }

    .hero-icon[b-lpp86l4rh0],
    .section-icon[b-lpp86l4rh0] {
        width: 48px;
        height: 48px;
        border-radius: 17px;
    }

    .hero-actions[b-lpp86l4rh0],
    .control-actions[b-lpp86l4rh0] {
        flex-direction: column;
    }

    .hero-actions > *[b-lpp86l4rh0],
    .control-actions > *[b-lpp86l4rh0] {
        width: 100%;
    }

    .mobile-rate-card .pair-top[b-lpp86l4rh0] {
        align-items: flex-start;
        flex-direction: column;
    }

    .mobile-rate-card .action-group[b-lpp86l4rh0] {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-lpp86l4rh0],
    *[b-lpp86l4rh0]::before,
    *[b-lpp86l4rh0]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/ExpenseEntryPage.razor.rz.scp.css */
.expense-entry-page[b-tm01x99i8g] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --surface-soft: rgba(248, 252, 255, 0.78);
    --border-soft: rgba(120, 170, 210, 0.22);
    --border-glass: rgba(255, 255, 255, 0.75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --finance: #f59e0b;
    --finance-soft: #fff7ed;
    --expense: #ef476f;
    --expense-soft: #ffe4ec;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --asset: #0ea5e9;
    --asset-soft: #e0f5ff;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, 0.08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, 0.07);
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
}

.expense-shell[b-tm01x99i8g] {
    position: relative;
    display: grid;
    gap: 18px;
    max-width: 1440px;
    margin: 0 auto;
    min-height: 0;
}

.expense-shell[b-tm01x99i8g]::before,
.expense-shell[b-tm01x99i8g]::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 999px;
    filter: blur(16px);
    pointer-events: none;
}

.expense-shell[b-tm01x99i8g]::before {
    top: 44px;
    left: 28px;
    width: 280px;
    height: 280px;
    background: rgba(14, 165, 233, 0.14);
}

.expense-shell[b-tm01x99i8g]::after {
    right: 32px;
    bottom: 24px;
    width: 340px;
    height: 340px;
    background: rgba(236, 72, 153, 0.12);
}

.expense-hero[b-tm01x99i8g],
.summary-card[b-tm01x99i8g],
.readiness-banner[b-tm01x99i8g],
.voucher-card[b-tm01x99i8g],
.details-card[b-tm01x99i8g],
.journal-card[b-tm01x99i8g],
.action-footer[b-tm01x99i8g] {
    border: 1px solid var(--border-glass);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72)),
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.1), transparent 34%),
        radial-gradient(circle at bottom right, rgba(236, 72, 153, 0.08), transparent 36%);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.expense-hero[b-tm01x99i8g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
}

.hero-main[b-tm01x99i8g],
.hero-actions[b-tm01x99i8g],
.section-title-wrap[b-tm01x99i8g],
.section-actions[b-tm01x99i8g],
.summary-card[b-tm01x99i8g],
.readiness-banner[b-tm01x99i8g],
.ledger-row[b-tm01x99i8g],
.action-footer[b-tm01x99i8g],
.input-wrap[b-tm01x99i8g],
.slip-head[b-tm01x99i8g] {
    display: flex;
    align-items: center;
}

.hero-main[b-tm01x99i8g] {
    gap: 16px;
}

.hero-icon[b-tm01x99i8g],
.summary-icon[b-tm01x99i8g],
.section-icon[b-tm01x99i8g],
.banner-icon[b-tm01x99i8g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.hero-icon[b-tm01x99i8g] {
    width: 60px;
    height: 60px;
    border-radius: 23px;
    color: #fff;
    background: linear-gradient(135deg, #ef476f, #ec4899 48%, #f59e0b);
    box-shadow: 0 18px 36px rgba(239, 71, 111, 0.24);
}

.expense-hero h1[b-tm01x99i8g] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.expense-hero p[b-tm01x99i8g],
.section-title-wrap p[b-tm01x99i8g],
.readiness-banner p[b-tm01x99i8g],
.action-footer p[b-tm01x99i8g] {
    margin: 3px 0 0;
    color: var(--text-body);
    line-height: 1.55;
}

.hero-actions[b-tm01x99i8g] {
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.safety-note[b-tm01x99i8g],
.hero-badge[b-tm01x99i8g],
.state-chip[b-tm01x99i8g],
.save-expense-btn[b-tm01x99i8g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 850;
}

.safety-note[b-tm01x99i8g],
.hero-badge[b-tm01x99i8g],
.state-chip[b-tm01x99i8g] {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.76);
}

.safety-note[b-tm01x99i8g] {
    color: #0369a1;
    background: rgba(224, 245, 255, 0.78);
}

.hero-badge[b-tm01x99i8g],
.state-chip.draft[b-tm01x99i8g] {
    color: #9f1239;
    background: rgba(255, 228, 236, 0.82);
}

.state-chip.currency[b-tm01x99i8g],
.state-chip.auto[b-tm01x99i8g] {
    color: #0369a1;
    background: var(--primary-soft);
}

.summary-grid[b-tm01x99i8g] {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 12px;
}

.summary-card[b-tm01x99i8g] {
    gap: 13px;
    min-height: 128px;
    padding: 18px;
    border-radius: var(--radius-lg);
}

.summary-icon[b-tm01x99i8g] {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.12);
}

.summary-card.amount .summary-icon[b-tm01x99i8g],
.summary-card.expense .summary-icon[b-tm01x99i8g],
.summary-card.status .summary-icon[b-tm01x99i8g] {
    background: linear-gradient(135deg, #ef476f, #ec4899);
}

.summary-card.asset .summary-icon[b-tm01x99i8g],
.summary-card.currency .summary-icon[b-tm01x99i8g] {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.summary-card.rate .summary-icon[b-tm01x99i8g] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.summary-card span[b-tm01x99i8g],
.field-tile > span[b-tm01x99i8g] {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.summary-card strong[b-tm01x99i8g] {
    display: block;
    margin-top: 4px;
    font-size: 1.45rem;
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.summary-card small[b-tm01x99i8g],
.field-tile small[b-tm01x99i8g],
.ledger-row small[b-tm01x99i8g],
.voucher-slip dt[b-tm01x99i8g] {
    color: var(--text-muted);
}

.readiness-banner[b-tm01x99i8g] {
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
}

.banner-icon[b-tm01x99i8g] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: #fff;
}

.readiness-banner.ready .banner-icon[b-tm01x99i8g] {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.readiness-banner.warning .banner-icon[b-tm01x99i8g] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.readiness-banner.danger .banner-icon[b-tm01x99i8g] {
    background: linear-gradient(135deg, #ef476f, #f43f5e);
}

.readiness-banner strong[b-tm01x99i8g] {
    font-weight: 900;
}

.voucher-card[b-tm01x99i8g],
.details-card[b-tm01x99i8g],
.journal-card[b-tm01x99i8g],
.action-footer[b-tm01x99i8g] {
    border-radius: 28px;
    padding: 20px;
}

.section-head[b-tm01x99i8g] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.section-head.compact[b-tm01x99i8g] {
    margin-bottom: 14px;
}

.section-title-wrap[b-tm01x99i8g] {
    gap: 12px;
}

.section-icon[b-tm01x99i8g] {
    width: 44px;
    height: 44px;
    border-radius: 17px;
    color: #9f1239;
    background: var(--expense-soft);
}

.section-icon.payee[b-tm01x99i8g] {
    color: #7e22ce;
    background: var(--violet-soft);
}

.section-icon.journal[b-tm01x99i8g] {
    color: #0369a1;
    background: var(--primary-soft);
}

.section-title-wrap h2[b-tm01x99i8g] {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.section-title-wrap p[b-tm01x99i8g] {
    font-size: 0.86rem;
}

.section-actions[b-tm01x99i8g] {
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.voucher-grid[b-tm01x99i8g] {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
}

.field-tile[b-tm01x99i8g] {
    display: grid;
    gap: 8px;
}

.field-tile.description[b-tm01x99i8g] {
    gap: 9px;
}

.input-wrap[b-tm01x99i8g],
.account-select[b-tm01x99i8g],
.entry-textarea[b-tm01x99i8g] {
    width: 100%;
    border-radius: 17px;
    border: 1px solid rgba(120, 170, 210, 0.26);
    background-color: rgba(255, 255, 255, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.input-wrap[b-tm01x99i8g] {
    gap: 10px;
    min-height: 48px;
    padding: 0 13px;
}

.input-wrap i[b-tm01x99i8g] {
    color: var(--primary);
}

.input-wrap.code i[b-tm01x99i8g],
.input-wrap.amount em[b-tm01x99i8g] {
    color: var(--expense);
}

.input-wrap.amount[b-tm01x99i8g] {
    border-color: rgba(239, 71, 111, 0.22);
    background: rgba(255, 228, 236, 0.42);
}

.input-wrap.amount.ready[b-tm01x99i8g] {
    border-color: rgba(16, 185, 129, 0.28);
    background: rgba(220, 252, 231, 0.42);
}

.input-wrap.needs-value[b-tm01x99i8g],
.account-select.missing[b-tm01x99i8g] {
    border-color: rgba(245, 158, 11, 0.46);
    background-color: rgba(255, 247, 237, 0.9);
}

.entry-input[b-tm01x99i8g],
.account-select[b-tm01x99i8g],
.entry-textarea[b-tm01x99i8g] {
    color: var(--text-main);
    font-size: 0.93rem;
    font-weight: 750;
    outline: 0;
}

.entry-input[b-tm01x99i8g] {
    width: 100%;
    border: 0;
    background: transparent;
}

.entry-input.numeric[b-tm01x99i8g] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.entry-input.strong[b-tm01x99i8g] {
    font-size: 1.08rem;
    font-weight: 950;
}

.input-wrap.amount em[b-tm01x99i8g] {
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 900;
}

.account-select[b-tm01x99i8g] {
    min-height: 48px;
    padding: 0 38px 0 13px;
    font-variant-numeric: tabular-nums;
}

.account-select.expense-select[b-tm01x99i8g] {
    background-color: rgba(255, 228, 236, 0.52);
}

.account-select.asset-select[b-tm01x99i8g] {
    background-color: rgba(224, 245, 255, 0.58);
}

.entry-textarea[b-tm01x99i8g] {
    min-height: 108px;
    padding: 13px 14px;
    resize: vertical;
}

.input-wrap:focus-within[b-tm01x99i8g],
.account-select:focus[b-tm01x99i8g],
.entry-textarea:focus[b-tm01x99i8g] {
    border-color: rgba(14, 165, 233, 0.68);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.workspace-grid[b-tm01x99i8g] {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 18px;
    align-items: start;
}

.payment-fields[b-tm01x99i8g] {
    display: grid;
    gap: 14px;
}

.voucher-slip[b-tm01x99i8g] {
    margin-top: 16px;
    padding: 16px;
    border-radius: 22px;
    border: 1px dashed rgba(120, 170, 210, 0.34);
    background: rgba(248, 252, 255, 0.72);
}

.slip-head[b-tm01x99i8g] {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.slip-head span[b-tm01x99i8g] {
    color: var(--primary-dark);
    font-weight: 900;
}

.slip-head strong[b-tm01x99i8g],
.voucher-slip dd[b-tm01x99i8g] {
    font-variant-numeric: tabular-nums;
}

.voucher-slip dl[b-tm01x99i8g] {
    display: grid;
    gap: 8px;
    margin: 0;
}

.voucher-slip dl div[b-tm01x99i8g] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.voucher-slip dt[b-tm01x99i8g],
.voucher-slip dd[b-tm01x99i8g] {
    margin: 0;
}

.voucher-slip dd[b-tm01x99i8g] {
    color: var(--text-main);
    font-weight: 850;
    text-align: right;
}

.ledger-preview[b-tm01x99i8g] {
    display: grid;
    gap: 12px;
}

.ledger-row[b-tm01x99i8g] {
    justify-content: space-between;
    gap: 16px;
    min-height: 92px;
    padding: 16px 18px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(120, 170, 210, 0.18);
    box-shadow: var(--shadow-card);
}

.ledger-row.debit[b-tm01x99i8g] {
    border-left: 5px solid var(--expense);
}

.ledger-row.credit[b-tm01x99i8g] {
    border-left: 5px solid var(--asset);
}

.ledger-row span[b-tm01x99i8g] {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ledger-row strong[b-tm01x99i8g] {
    display: block;
    margin-top: 3px;
    font-weight: 950;
}

.ledger-amount[b-tm01x99i8g] {
    color: var(--text-main);
    font-size: 1.28rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.ledger-balance-icon[b-tm01x99i8g] {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin: -2px auto;
    border-radius: 15px;
    color: #0369a1;
    background: var(--primary-soft);
}

.journal-note[b-tm01x99i8g] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 15px;
    padding: 13px 15px;
    border-radius: 18px;
}

.journal-note.ready[b-tm01x99i8g] {
    color: #047857;
    background: var(--success-soft);
}

.journal-note.warning[b-tm01x99i8g] {
    color: #b45309;
    background: var(--warning-soft);
}

.journal-note strong[b-tm01x99i8g] {
    display: block;
    font-weight: 900;
}

.journal-note span[b-tm01x99i8g] {
    color: var(--text-body);
    font-size: 0.86rem;
}

.action-footer[b-tm01x99i8g] {
    justify-content: space-between;
    gap: 18px;
}

.action-footer strong[b-tm01x99i8g] {
    font-weight: 900;
}

.save-expense-btn[b-tm01x99i8g] {
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(135deg, #ef476f, #ec4899 48%, #2563eb);
    box-shadow: 0 18px 36px rgba(239, 71, 111, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}

.save-expense-btn:hover[b-tm01x99i8g] {
    transform: translateY(-1px);
    box-shadow: 0 22px 42px rgba(239, 71, 111, 0.3);
}

.empty-state[b-tm01x99i8g] {
    display: grid;
    place-items: center;
    gap: 7px;
    min-height: 180px;
    padding: 30px 18px;
    color: var(--text-body);
    text-align: center;
}

.empty-state i[b-tm01x99i8g] {
    font-size: 1.8rem;
    color: var(--primary);
}

.empty-state strong[b-tm01x99i8g] {
    color: var(--text-main);
    font-weight: 900;
}

.expense-entry-page [b-tm01x99i8g]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.expense-entry-page [b-tm01x99i8g]::-webkit-scrollbar-track {
    background: rgba(224, 245, 255, 0.52);
    border-radius: 999px;
}

.expense-entry-page [b-tm01x99i8g]::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.34);
    border-radius: 999px;
}

@media (max-width: 1400px) {
    .summary-grid[b-tm01x99i8g] {
        grid-template-columns: repeat(3, minmax(170px, 1fr));
    }

    .voucher-grid[b-tm01x99i8g] {
        grid-template-columns: repeat(3, minmax(190px, 1fr));
    }
}

@media (max-width: 1080px) {
    .workspace-grid[b-tm01x99i8g] {
        grid-template-columns: 1fr;
    }

    .voucher-grid[b-tm01x99i8g] {
        grid-template-columns: repeat(2, minmax(190px, 1fr));
    }
}

@media (max-width: 760px) {
    .expense-entry-page[b-tm01x99i8g] {
        padding-inline: 14px !important;
    }

    .expense-hero[b-tm01x99i8g],
    .section-head[b-tm01x99i8g],
    .action-footer[b-tm01x99i8g] {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions[b-tm01x99i8g],
    .section-actions[b-tm01x99i8g] {
        justify-content: flex-start;
    }

    .summary-grid[b-tm01x99i8g],
    .voucher-grid[b-tm01x99i8g] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .expense-entry-page[b-tm01x99i8g] {
        padding: 10px !important;
    }

    .expense-hero[b-tm01x99i8g],
    .voucher-card[b-tm01x99i8g],
    .details-card[b-tm01x99i8g],
    .journal-card[b-tm01x99i8g],
    .action-footer[b-tm01x99i8g],
    .readiness-banner[b-tm01x99i8g] {
        border-radius: 22px;
        padding: 16px;
    }

    .hero-main[b-tm01x99i8g],
    .hero-actions[b-tm01x99i8g],
    .section-title-wrap[b-tm01x99i8g],
    .section-actions[b-tm01x99i8g],
    .readiness-banner[b-tm01x99i8g],
    .ledger-row[b-tm01x99i8g] {
        align-items: stretch;
        flex-direction: column;
    }

    .save-expense-btn[b-tm01x99i8g],
    .safety-note[b-tm01x99i8g],
    .hero-badge[b-tm01x99i8g] {
        width: 100%;
    }

    .ledger-amount[b-tm01x99i8g] {
        text-align: left;
    }
}
/* /Components/Pages/FinanceReconciliationPage.razor.rz.scp.css */
.recon-page[b-m2hpik1xf5] {
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --surface-soft: rgba(248, 252, 255, 0.78);
    --border-soft: rgba(120, 170, 210, 0.22);
    --border-glass: rgba(255, 255, 255, 0.75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --finance: #f59e0b;
    --finance-soft: #fff7ed;
    --success: #10b981;
    --success-soft: #dcfce7;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --pink: #ec4899;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, 0.08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, 0.07);
    display: block;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(14px, 2vw, 28px);
    border-radius: 30px;
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    line-height: 1.5;
    background:
        radial-gradient(circle at 4% 0%, rgba(14, 165, 233, 0.2), transparent 32%),
        radial-gradient(circle at 92% 6%, rgba(139, 92, 246, 0.16), transparent 34%),
        radial-gradient(circle at 98% 100%, rgba(236, 72, 153, 0.12), transparent 30%),
        linear-gradient(135deg, #eef8ff 0%, #f8fcff 48%, #fff3fb 100%);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.recon-page[b-m2hpik1xf5]::-webkit-scrollbar,
.report-table-wrap[b-m2hpik1xf5]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.recon-page[b-m2hpik1xf5]::-webkit-scrollbar-track,
.report-table-wrap[b-m2hpik1xf5]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.45);
    border-radius: 999px;
}

.recon-page[b-m2hpik1xf5]::-webkit-scrollbar-thumb,
.report-table-wrap[b-m2hpik1xf5]::-webkit-scrollbar-thumb {
    border: 2px solid rgba(255, 255, 255, 0.68);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.5), rgba(139, 92, 246, 0.45));
}

.recon-shell[b-m2hpik1xf5] {
    width: min(100%, 1600px);
    margin: 0 auto;
    display: grid;
    gap: 20px;
}

.recon-hero[b-m2hpik1xf5],
.controls-card[b-m2hpik1xf5],
.kpi-card[b-m2hpik1xf5],
.health-banner[b-m2hpik1xf5],
.insight-card[b-m2hpik1xf5],
.report-card[b-m2hpik1xf5],
.mobile-report-card[b-m2hpik1xf5],
.access-card[b-m2hpik1xf5],
.empty-page-state[b-m2hpik1xf5] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(20px);
}

.recon-hero[b-m2hpik1xf5] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(20px, 2.5vw, 28px);
    border-radius: 30px;
}

.hero-glow[b-m2hpik1xf5] {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    pointer-events: none;
}

.hero-glow-cyan[b-m2hpik1xf5] {
    top: -145px;
    left: 18%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.2), transparent 72%);
}

.hero-glow-violet[b-m2hpik1xf5] {
    right: -80px;
    bottom: -160px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.22), transparent 72%);
}

.hero-title-wrap[b-m2hpik1xf5],
.hero-actions[b-m2hpik1xf5],
.section-head[b-m2hpik1xf5],
.section-title[b-m2hpik1xf5],
.scope-chips[b-m2hpik1xf5],
.method-cell[b-m2hpik1xf5],
.student-cell[b-m2hpik1xf5],
.actor-cell[b-m2hpik1xf5],
.insight-head[b-m2hpik1xf5],
.mobile-stat-row[b-m2hpik1xf5] {
    display: flex;
    align-items: center;
}

.hero-title-wrap[b-m2hpik1xf5] {
    position: relative;
    z-index: 1;
    gap: 15px;
}

.hero-icon[b-m2hpik1xf5],
.section-icon[b-m2hpik1xf5],
.kpi-icon[b-m2hpik1xf5],
.empty-state > span[b-m2hpik1xf5],
.access-card > span[b-m2hpik1xf5],
.empty-page-state > span[b-m2hpik1xf5],
.insight-head > span[b-m2hpik1xf5] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.hero-icon[b-m2hpik1xf5] {
    width: 62px;
    height: 62px;
    border-radius: 22px;
    color: #fff;
    font-size: 1.35rem;
    background: linear-gradient(135deg, #0ea5e9, #f59e0b);
    box-shadow: 0 18px 36px rgba(245, 158, 11, 0.2);
}

.recon-hero h3[b-m2hpik1xf5] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.recon-hero p[b-m2hpik1xf5],
.section-head p[b-m2hpik1xf5],
.kpi-card p[b-m2hpik1xf5],
.health-banner p[b-m2hpik1xf5],
.empty-state p[b-m2hpik1xf5],
.empty-page-state p[b-m2hpik1xf5],
.access-card p[b-m2hpik1xf5],
.muted-note[b-m2hpik1xf5],
.export-copy[b-m2hpik1xf5] {
    margin: 0;
    color: var(--text-body);
}

.hero-actions[b-m2hpik1xf5] {
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.primary-btn[b-m2hpik1xf5],
.soft-btn[b-m2hpik1xf5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border: 0;
    border-radius: 16px;
    font-size: 0.9rem;
    font-weight: 850;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.primary-btn[b-m2hpik1xf5] {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 15px 30px rgba(14, 165, 233, 0.22);
}

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

.soft-btn[b-m2hpik1xf5] {
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, 0.2);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-card);
}

.primary-btn:hover[b-m2hpik1xf5],
.soft-btn:hover[b-m2hpik1xf5] {
    transform: translateY(-1px);
}

.controls-card[b-m2hpik1xf5] {
    padding: 20px;
    border-radius: 24px;
}

.section-head[b-m2hpik1xf5] {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.section-title[b-m2hpik1xf5] {
    gap: 12px;
}

.section-icon[b-m2hpik1xf5] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.92), rgba(237, 233, 254, 0.88));
}

.section-icon.gold[b-m2hpik1xf5] {
    color: #b45309;
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
}

.section-icon.danger-soft[b-m2hpik1xf5] {
    color: #be123c;
    background: var(--danger-soft);
}

.section-icon.warning-soft[b-m2hpik1xf5] {
    color: #b45309;
    background: var(--warning-soft);
}

.section-head h5[b-m2hpik1xf5],
.report-head h5[b-m2hpik1xf5] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.scope-chips[b-m2hpik1xf5] {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.scope-chips span[b-m2hpik1xf5],
.count-badge[b-m2hpik1xf5],
.class-pill[b-m2hpik1xf5],
.invoice-pill[b-m2hpik1xf5],
.due-chip[b-m2hpik1xf5],
.time-chip[b-m2hpik1xf5],
.risk-pills span[b-m2hpik1xf5] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}

.scope-chips span[b-m2hpik1xf5],
.class-pill[b-m2hpik1xf5],
.invoice-pill[b-m2hpik1xf5] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.audit-note[b-m2hpik1xf5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 9px 12px;
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 999px;
    color: #475569;
    background: rgba(224, 245, 255, 0.58);
    font-size: 0.84rem;
    font-weight: 750;
}

.controls-grid[b-m2hpik1xf5] {
    display: grid;
    grid-template-columns: minmax(190px, 0.75fr) minmax(220px, 1fr) minmax(220px, 1fr) auto;
    gap: 14px;
    align-items: end;
}

.control-field[b-m2hpik1xf5] {
    display: grid;
    gap: 7px;
}

.control-field > span[b-m2hpik1xf5] {
    color: #486074;
    font-size: 0.78rem;
    font-weight: 850;
}

.input-shell[b-m2hpik1xf5] {
    position: relative;
}

.input-shell > i[b-m2hpik1xf5] {
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
}

.lux-input[b-m2hpik1xf5] {
    width: 100%;
    min-height: 46px;
    padding-left: 39px;
    border: 1px solid rgba(190, 207, 224, 0.74);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--text-main);
    font-size: 0.92rem;
    font-weight: 760;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.lux-input:focus[b-m2hpik1xf5],
.primary-btn:focus-visible[b-m2hpik1xf5],
.soft-btn:focus-visible[b-m2hpik1xf5] {
    border-color: rgba(14, 165, 233, 0.72);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14);
}

.kpi-grid[b-m2hpik1xf5] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.kpi-card[b-m2hpik1xf5] {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    padding: 17px;
    border-radius: 24px;
}

.kpi-card[b-m2hpik1xf5]::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -54px;
    width: 125px;
    height: 125px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.09);
}

.kpi-card.warning[b-m2hpik1xf5] {
    border-color: rgba(245, 158, 11, 0.26);
}

.kpi-card.danger[b-m2hpik1xf5] {
    border-color: rgba(239, 71, 111, 0.26);
}

.kpi-card small[b-m2hpik1xf5] {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kpi-card strong[b-m2hpik1xf5] {
    display: block;
    margin: 4px 0 3px;
    color: var(--text-main);
    font-size: clamp(1.25rem, 1.9vw, 1.75rem);
    font-weight: 950;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.kpi-icon[b-m2hpik1xf5] {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 15px;
    color: #fff;
}

.kpi-icon.emerald[b-m2hpik1xf5] { background: linear-gradient(135deg, #34d399, #059669); }
.kpi-icon.danger[b-m2hpik1xf5] { background: linear-gradient(135deg, #fb7185, #ef476f); }
.kpi-icon.amber[b-m2hpik1xf5] { background: linear-gradient(135deg, #f59e0b, #f97316); }
.kpi-icon.cyan[b-m2hpik1xf5] { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.kpi-icon.slate[b-m2hpik1xf5] { background: linear-gradient(135deg, #64748b, #334155); }
.kpi-icon.violet[b-m2hpik1xf5] { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.kpi-icon.gold[b-m2hpik1xf5] { background: linear-gradient(135deg, #fbbf24, #f59e0b); }

.health-banner[b-m2hpik1xf5] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 20px;
}

.health-banner > span[b-m2hpik1xf5] {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 16px;
    color: #fff;
}

.health-banner.success[b-m2hpik1xf5] {
    border-color: rgba(16, 185, 129, 0.22);
    background: rgba(220, 252, 231, 0.75);
}

.health-banner.success > span[b-m2hpik1xf5] { background: linear-gradient(135deg, #34d399, #059669); }
.health-banner.warning[b-m2hpik1xf5] {
    border-color: rgba(245, 158, 11, 0.22);
    background: rgba(255, 247, 237, 0.78);
}

.health-banner.warning > span[b-m2hpik1xf5] { background: linear-gradient(135deg, #f59e0b, #f97316); }
.health-banner.danger[b-m2hpik1xf5] {
    border-color: rgba(239, 71, 111, 0.22);
    background: rgba(255, 228, 236, 0.78);
}

.health-banner.danger > span[b-m2hpik1xf5] { background: linear-gradient(135deg, #fb7185, #ef476f); }
.health-banner strong[b-m2hpik1xf5] { display: block; font-weight: 950; }

.insight-grid[b-m2hpik1xf5] {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 14px;
}

.insight-card[b-m2hpik1xf5] {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: 22px;
}

.insight-head[b-m2hpik1xf5] {
    gap: 10px;
}

.insight-head > span[b-m2hpik1xf5] {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.insight-head > span.risk[b-m2hpik1xf5] {
    color: #b45309;
    background: var(--warning-soft);
}

.insight-head > span.export[b-m2hpik1xf5] {
    color: #6d28d9;
    background: var(--violet-soft);
}

.insight-head strong[b-m2hpik1xf5],
.insight-head small[b-m2hpik1xf5] {
    display: block;
}

.insight-head strong[b-m2hpik1xf5] {
    font-weight: 950;
}

.insight-head small[b-m2hpik1xf5] {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.method-bars[b-m2hpik1xf5] {
    display: grid;
    gap: 10px;
}

.method-bar-row[b-m2hpik1xf5] {
    display: grid;
    gap: 6px;
}

.method-bar-row > div:first-child[b-m2hpik1xf5] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 800;
}

.method-track[b-m2hpik1xf5] {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.9);
}

.method-track em[b-m2hpik1xf5] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #10b981, #0ea5e9);
}

.risk-pills[b-m2hpik1xf5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.risk-clear[b-m2hpik1xf5] {
    color: #047857;
    background: var(--success-soft);
}

.risk-on[b-m2hpik1xf5] {
    color: #be123c;
    background: var(--danger-soft);
}

.report-grid[b-m2hpik1xf5] {
    display: grid;
    grid-template-columns: minmax(320px, 0.4fr) minmax(0, 0.6fr);
    gap: 20px;
    align-items: start;
}

.report-card[b-m2hpik1xf5] {
    overflow: hidden;
    border-radius: 24px;
}

.report-card:nth-child(n + 3)[b-m2hpik1xf5] {
    grid-column: span 1;
}

.report-head[b-m2hpik1xf5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-soft);
}

.count-badge[b-m2hpik1xf5] {
    color: #047857;
    background: var(--success-soft);
}

.count-badge.danger[b-m2hpik1xf5] {
    color: #be123c;
    background: var(--danger-soft);
}

.count-badge.warning[b-m2hpik1xf5] {
    color: #b45309;
    background: var(--warning-soft);
}

.report-table-wrap[b-m2hpik1xf5] {
    overflow-x: auto;
}

.report-table[b-m2hpik1xf5] {
    width: 100%;
    min-width: 520px;
    border-collapse: separate;
    border-spacing: 0;
}

.outstanding-table[b-m2hpik1xf5] {
    min-width: 760px;
}

.report-table thead th[b-m2hpik1xf5] {
    padding: 14px 18px;
    color: #64748b;
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.72), rgba(255, 247, 237, 0.55));
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.report-table tbody td[b-m2hpik1xf5] {
    padding: 15px 18px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    vertical-align: middle;
}

.report-table tbody tr:hover[b-m2hpik1xf5] {
    background: rgba(14, 165, 233, 0.045);
}

.method-cell[b-m2hpik1xf5],
.student-cell[b-m2hpik1xf5],
.actor-cell[b-m2hpik1xf5] {
    gap: 10px;
}

.method-cell > span[b-m2hpik1xf5],
.student-cell > span[b-m2hpik1xf5],
.actor-cell > span[b-m2hpik1xf5] {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-weight: 950;
}

.student-cell strong[b-m2hpik1xf5],
.student-cell small[b-m2hpik1xf5] {
    display: block;
}

.student-cell small[b-m2hpik1xf5] {
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.76rem;
    font-weight: 800;
}

.count-dot[b-m2hpik1xf5] {
    display: inline-grid;
    place-items: center;
    min-width: 34px;
    height: 34px;
    border-radius: 999px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-weight: 950;
}

.money-value[b-m2hpik1xf5],
.paid-value[b-m2hpik1xf5],
.balance-value[b-m2hpik1xf5] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 950;
}

.money-value[b-m2hpik1xf5] {
    color: #b45309;
}

.paid-value[b-m2hpik1xf5] {
    color: #047857;
}

.balance-value[b-m2hpik1xf5] {
    color: var(--danger);
}

.due-chip[b-m2hpik1xf5] {
    color: #b45309;
    background: var(--warning-soft);
}

.time-chip[b-m2hpik1xf5] {
    color: #475569;
    background: rgba(241, 245, 249, 0.92);
}

.empty-state[b-m2hpik1xf5],
.empty-page-state[b-m2hpik1xf5],
.access-card[b-m2hpik1xf5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 30px 18px;
    text-align: center;
}

.access-card[b-m2hpik1xf5] {
    min-height: 180px;
    color: #be123c;
}

.empty-state > span[b-m2hpik1xf5],
.empty-page-state > span[b-m2hpik1xf5],
.access-card > span[b-m2hpik1xf5] {
    width: 68px;
    height: 68px;
    margin-bottom: 14px;
    border-radius: 24px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.95), rgba(237, 233, 254, 0.88));
    font-size: 1.55rem;
}

.empty-state.success > span[b-m2hpik1xf5] {
    color: #047857;
    background: var(--success-soft);
}

.empty-state h5[b-m2hpik1xf5],
.empty-page-state h5[b-m2hpik1xf5],
.access-card h5[b-m2hpik1xf5] {
    margin: 0 0 4px;
    font-weight: 950;
}

.mobile-card-list[b-m2hpik1xf5] {
    display: none;
    padding: 14px;
    gap: 12px;
}

.mobile-report-card[b-m2hpik1xf5] {
    display: grid;
    gap: 11px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.84);
}

.mobile-stat-row[b-m2hpik1xf5] {
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(248, 250, 252, 0.82);
}

.mobile-stat-row small[b-m2hpik1xf5] {
    color: var(--text-muted);
    font-weight: 850;
}

.animated[b-m2hpik1xf5] {
    animation-duration: 0.4s;
    animation-fill-mode: both;
}

.fadeIn[b-m2hpik1xf5] {
    animation-name: fadeIn-b-m2hpik1xf5;
}

@keyframes fadeIn-b-m2hpik1xf5 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1320px) {
    .kpi-grid[b-m2hpik1xf5] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .insight-grid[b-m2hpik1xf5] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .controls-grid[b-m2hpik1xf5],
    .report-grid[b-m2hpik1xf5] {
        grid-template-columns: 1fr;
    }

    .apply-btn[b-m2hpik1xf5] {
        width: 100%;
    }
}

@media (max-width: 820px) {
    .recon-page[b-m2hpik1xf5] {
        padding: 12px;
        border-radius: 22px;
    }

    .recon-hero[b-m2hpik1xf5],
    .section-head[b-m2hpik1xf5],
    .report-head[b-m2hpik1xf5] {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions[b-m2hpik1xf5] {
        justify-content: stretch;
    }

    .hero-actions > *[b-m2hpik1xf5] {
        flex: 1 1 0;
    }

    .scope-chips[b-m2hpik1xf5] {
        justify-content: flex-start;
    }

    .kpi-grid[b-m2hpik1xf5] {
        grid-template-columns: 1fr;
    }

    .report-table-wrap[b-m2hpik1xf5] {
        display: none;
    }

    .mobile-card-list[b-m2hpik1xf5] {
        display: grid;
    }
}

@media (max-width: 520px) {
    .hero-title-wrap[b-m2hpik1xf5],
    .section-title[b-m2hpik1xf5] {
        align-items: flex-start;
    }

    .hero-icon[b-m2hpik1xf5],
    .section-icon[b-m2hpik1xf5] {
        width: 48px;
        height: 48px;
        border-radius: 17px;
    }

    .hero-actions[b-m2hpik1xf5] {
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-m2hpik1xf5],
    *[b-m2hpik1xf5]::before,
    *[b-m2hpik1xf5]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/FinancialStatementPage.razor.rz.scp.css */
.financial-statement-page[b-jofx5iolqg] {
    --surface: rgba(255, 255, 255, 0.9);
    --surface-soft: rgba(248, 252, 255, 0.78);
    --border-soft: rgba(120, 170, 210, 0.22);
    --border-glass: rgba(255, 255, 255, 0.76);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --finance: #f59e0b;
    --finance-soft: #fff7ed;
    --income: #10b981;
    --income-soft: #dcfce7;
    --profit: #0ea5e9;
    --profit-soft: #e0f5ff;
    --asset: #0ea5e9;
    --asset-soft: #e0f5ff;
    --liability: #ef476f;
    --liability-soft: #ffe4ec;
    --equity: #8b5cf6;
    --equity-soft: #ede9fe;
    --cash: #14b8a6;
    --cash-soft: #ccfbf1;
    --receivable: #06b6d4;
    --receivable-soft: #cffafe;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --neutral: #64748b;
    --neutral-soft: #f1f5f9;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, 0.08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, 0.07);
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
}

.financial-statement-shell[b-jofx5iolqg] {
    position: relative;
    display: grid;
    gap: 18px;
    max-width: 1600px;
    margin: 0 auto;
    min-height: 0;
}

.financial-statement-shell[b-jofx5iolqg]::before,
.financial-statement-shell[b-jofx5iolqg]::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 999px;
    filter: blur(16px);
    pointer-events: none;
}

.financial-statement-shell[b-jofx5iolqg]::before {
    top: 42px;
    left: 28px;
    width: 300px;
    height: 300px;
    background: rgba(14, 165, 233, 0.14);
}

.financial-statement-shell[b-jofx5iolqg]::after {
    right: 34px;
    bottom: 28px;
    width: 360px;
    height: 360px;
    background: rgba(236, 72, 153, 0.11);
}

.fs-hero[b-jofx5iolqg],
.controls-card[b-jofx5iolqg],
.health-card[b-jofx5iolqg],
.health-banner[b-jofx5iolqg],
.kpi-card[b-jofx5iolqg],
.formula-strip[b-jofx5iolqg],
.insight-card[b-jofx5iolqg],
.breakdown-card[b-jofx5iolqg],
.empty-state[b-jofx5iolqg] {
    border: 1px solid var(--border-glass);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.72)),
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.1), transparent 34%),
        radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.08), transparent 36%);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.fs-hero[b-jofx5iolqg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
}

.hero-main[b-jofx5iolqg],
.section-title-wrap[b-jofx5iolqg],
.section-head[b-jofx5iolqg],
.period-chips[b-jofx5iolqg],
.health-top[b-jofx5iolqg],
.kpi-top[b-jofx5iolqg],
.health-banner[b-jofx5iolqg],
.insight-head[b-jofx5iolqg],
.meter-label[b-jofx5iolqg],
.comparison-label[b-jofx5iolqg],
.status-note[b-jofx5iolqg] {
    display: flex;
    align-items: center;
}

.hero-main[b-jofx5iolqg] {
    gap: 16px;
}

.hero-icon[b-jofx5iolqg],
.section-icon[b-jofx5iolqg],
.health-icon[b-jofx5iolqg],
.kpi-icon[b-jofx5iolqg],
.banner-icon[b-jofx5iolqg],
.empty-state > span[b-jofx5iolqg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.hero-icon[b-jofx5iolqg] {
    width: 60px;
    height: 60px;
    border-radius: 23px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #2563eb 48%, #8b5cf6);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.24);
}

.fs-hero h1[b-jofx5iolqg] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.fs-hero p[b-jofx5iolqg],
.section-title-wrap p[b-jofx5iolqg],
.health-banner p[b-jofx5iolqg],
.insight-head p[b-jofx5iolqg],
.empty-state p[b-jofx5iolqg] {
    margin: 3px 0 0;
    color: var(--text-body);
    line-height: 1.55;
}

.refresh-btn[b-jofx5iolqg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, 0.78);
    font-weight: 850;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.refresh-btn.compact[b-jofx5iolqg] {
    min-height: 40px;
}

.refresh-btn:hover[b-jofx5iolqg] {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(14, 165, 233, 0.14);
}

.controls-card[b-jofx5iolqg],
.breakdown-card[b-jofx5iolqg],
.empty-state[b-jofx5iolqg] {
    border-radius: 28px;
    padding: 20px;
}

.section-head[b-jofx5iolqg] {
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.section-title-wrap[b-jofx5iolqg] {
    gap: 12px;
}

.section-title-wrap h2[b-jofx5iolqg],
.insight-head h2[b-jofx5iolqg] {
    margin: 0;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.section-icon[b-jofx5iolqg] {
    width: 44px;
    height: 44px;
    border-radius: 17px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.section-icon.profit[b-jofx5iolqg] {
    color: #047857;
    background: var(--income-soft);
}

.section-icon.balance[b-jofx5iolqg],
.section-icon.breakdown[b-jofx5iolqg] {
    color: #6d28d9;
    background: var(--equity-soft);
}

.section-icon.cash[b-jofx5iolqg] {
    color: #0f766e;
    background: var(--cash-soft);
}

.section-icon.receivable[b-jofx5iolqg] {
    color: #0e7490;
    background: var(--receivable-soft);
}

.period-chips[b-jofx5iolqg] {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.period-chip[b-jofx5iolqg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    color: var(--text-body);
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}

.period-chip.days[b-jofx5iolqg] {
    color: #b45309;
    background: var(--finance-soft);
    border-color: rgba(245, 158, 11, 0.2);
}

.controls-grid[b-jofx5iolqg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 320px));
    gap: 14px;
}

.date-field[b-jofx5iolqg] {
    display: grid;
    gap: 8px;
}

.date-field > span[b-jofx5iolqg] {
    color: var(--text-body);
    font-size: 0.82rem;
    font-weight: 850;
}

.input-shell[b-jofx5iolqg] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(104, 155, 200, 0.26);
    border-radius: 18px;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.input-shell:focus-within[b-jofx5iolqg] {
    border-color: rgba(14, 165, 233, 0.46);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}

.date-field.invalid .input-shell[b-jofx5iolqg] {
    border-color: rgba(239, 71, 111, 0.42);
    box-shadow: 0 0 0 4px rgba(239, 71, 111, 0.1);
}

.date-input[b-jofx5iolqg] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font-weight: 800;
}

.validation-note[b-jofx5iolqg] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 14px;
    padding: 11px 13px;
    border-radius: 16px;
    color: #be123c;
    background: var(--danger-soft);
    font-weight: 800;
}

.health-grid[b-jofx5iolqg] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.health-card[b-jofx5iolqg],
.kpi-card[b-jofx5iolqg],
.insight-card[b-jofx5iolqg] {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.health-card[b-jofx5iolqg] {
    min-height: 136px;
    padding: 17px;
}

.health-card[b-jofx5iolqg]::after,
.kpi-card[b-jofx5iolqg]::after,
.insight-card[b-jofx5iolqg]::after {
    content: "";
    position: absolute;
    right: -46px;
    bottom: -56px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.08);
}

.health-top[b-jofx5iolqg],
.kpi-top[b-jofx5iolqg] {
    position: relative;
    z-index: 1;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-body);
    font-size: 0.8rem;
    font-weight: 850;
}

.health-icon[b-jofx5iolqg],
.kpi-icon[b-jofx5iolqg] {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.health-card strong[b-jofx5iolqg],
.kpi-card strong[b-jofx5iolqg],
.snapshot-value strong[b-jofx5iolqg] {
    position: relative;
    z-index: 1;
    display: block;
    color: var(--text-main);
    font-weight: 950;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.health-card strong[b-jofx5iolqg] {
    margin-top: 12px;
    font-size: 1.18rem;
}

.health-card em[b-jofx5iolqg] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 3px;
    color: var(--text-main);
    font-size: 0.92rem;
    font-style: normal;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.health-card small[b-jofx5iolqg],
.kpi-card small[b-jofx5iolqg] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-weight: 750;
}

.health-banner[b-jofx5iolqg] {
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
}

.banner-icon[b-jofx5iolqg] {
    width: 50px;
    height: 50px;
    border-radius: 18px;
    color: #475569;
    background: var(--neutral-soft);
}

.health-banner strong[b-jofx5iolqg] {
    display: block;
    color: var(--text-main);
    font-size: 1.02rem;
    font-weight: 950;
}

.health-banner.success[b-jofx5iolqg] {
    border-color: rgba(16, 185, 129, 0.28);
}

.health-banner.success .banner-icon[b-jofx5iolqg] {
    color: #047857;
    background: var(--success-soft);
}

.health-banner.danger[b-jofx5iolqg] {
    border-color: rgba(239, 71, 111, 0.28);
}

.health-banner.danger .banner-icon[b-jofx5iolqg] {
    color: #be123c;
    background: var(--danger-soft);
}

.kpi-grid[b-jofx5iolqg] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.kpi-card[b-jofx5iolqg] {
    min-height: 132px;
    padding: 17px;
}

.kpi-card.featured[b-jofx5iolqg] {
    border-color: rgba(16, 185, 129, 0.24);
}

.kpi-card.featured.danger[b-jofx5iolqg] {
    border-color: rgba(239, 71, 111, 0.28);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 228, 236, 0.74)),
        radial-gradient(circle at top right, rgba(239, 71, 111, 0.14), transparent 34%);
}

.kpi-card strong[b-jofx5iolqg] {
    margin-top: 13px;
    font-size: clamp(1.18rem, 1.8vw, 1.62rem);
}

.formula-stack[b-jofx5iolqg] {
    display: grid;
    gap: 14px;
}

.formula-strip[b-jofx5iolqg] {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 10px;
    align-items: stretch;
    padding: 18px;
    border-radius: 28px;
}

.formula-strip.balance[b-jofx5iolqg] {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
}

.formula-tile[b-jofx5iolqg] {
    display: grid;
    align-content: center;
    gap: 5px;
    min-height: 76px;
    padding: 13px 15px;
    border-radius: 20px;
    border: 1px solid rgba(104, 155, 200, 0.16);
    background: rgba(255, 255, 255, 0.62);
}

.formula-tile span[b-jofx5iolqg] {
    color: var(--text-body);
    font-size: 0.76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.formula-tile strong[b-jofx5iolqg] {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.operator[b-jofx5iolqg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    align-self: center;
    border-radius: 999px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: 0.75rem;
    font-weight: 950;
    text-transform: uppercase;
}

.insight-grid[b-jofx5iolqg] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.insight-card[b-jofx5iolqg] {
    padding: 18px;
}

.insight-head[b-jofx5iolqg] {
    position: relative;
    z-index: 1;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.meter-block[b-jofx5iolqg],
.comparison-bars[b-jofx5iolqg],
.mini-rows[b-jofx5iolqg] {
    position: relative;
    z-index: 1;
}

.meter-label[b-jofx5iolqg],
.comparison-label[b-jofx5iolqg] {
    justify-content: space-between;
    gap: 12px;
    color: var(--text-body);
    font-weight: 850;
}

.meter-label strong[b-jofx5iolqg],
.comparison-label strong[b-jofx5iolqg] {
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.meter-track[b-jofx5iolqg],
.bar-track[b-jofx5iolqg] {
    overflow: hidden;
    height: 13px;
    margin-top: 9px;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.82);
}

.meter-fill[b-jofx5iolqg],
.bar-fill[b-jofx5iolqg] {
    height: 100%;
    min-width: 4%;
    border-radius: inherit;
    transition: width 0.24s ease;
}

.meter-fill.success[b-jofx5iolqg],
.bar-fill.income[b-jofx5iolqg] {
    background: linear-gradient(90deg, #10b981, #0ea5e9);
}

.meter-fill.danger[b-jofx5iolqg],
.bar-fill.danger[b-jofx5iolqg] {
    background: linear-gradient(90deg, #ef476f, #ec4899);
}

.meter-fill.neutral[b-jofx5iolqg] {
    background: linear-gradient(90deg, #94a3b8, #64748b);
}

.bar-fill.asset[b-jofx5iolqg] {
    background: linear-gradient(90deg, #0ea5e9, #2563eb);
}

.bar-fill.equity[b-jofx5iolqg] {
    background: linear-gradient(90deg, #8b5cf6, #ec4899);
}

.comparison-bars[b-jofx5iolqg] {
    display: grid;
    gap: 14px;
}

.comparison-row[b-jofx5iolqg] {
    display: grid;
    gap: 8px;
}

.mini-rows[b-jofx5iolqg] {
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.mini-row[b-jofx5iolqg],
.breakdown-row[b-jofx5iolqg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(104, 155, 200, 0.14);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.62);
}

.mini-row span[b-jofx5iolqg],
.breakdown-row span[b-jofx5iolqg] {
    color: var(--text-muted);
    font-weight: 750;
}

.mini-row strong[b-jofx5iolqg],
.breakdown-row em[b-jofx5iolqg] {
    color: var(--text-main);
    font-style: normal;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.snapshot-value[b-jofx5iolqg] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 5px;
    margin-bottom: 15px;
}

.snapshot-value strong[b-jofx5iolqg] {
    font-size: 1.6rem;
}

.snapshot-value span[b-jofx5iolqg] {
    color: var(--text-body);
    font-weight: 900;
}

.status-note[b-jofx5iolqg] {
    position: relative;
    z-index: 1;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 18px;
    color: var(--text-body);
    background: rgba(255, 255, 255, 0.62);
}

.breakdown-groups[b-jofx5iolqg] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.breakdown-groups article[b-jofx5iolqg] {
    display: grid;
    gap: 9px;
    padding: 14px;
    border: 1px solid rgba(104, 155, 200, 0.16);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.56);
}

.breakdown-groups h3[b-jofx5iolqg] {
    margin: 0 0 4px;
    color: var(--text-main);
    font-size: 0.92rem;
    font-weight: 950;
}

.breakdown-row[b-jofx5iolqg] {
    align-items: flex-start;
}

.breakdown-row div[b-jofx5iolqg] {
    display: grid;
    gap: 3px;
}

.breakdown-row strong[b-jofx5iolqg] {
    color: var(--text-main);
    font-weight: 950;
}

.breakdown-row.strong[b-jofx5iolqg] {
    border-color: rgba(239, 71, 111, 0.26);
}

.empty-state[b-jofx5iolqg] {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 46px 20px;
    text-align: center;
}

.empty-state > span[b-jofx5iolqg] {
    width: 58px;
    height: 58px;
    border-radius: 22px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.empty-state strong[b-jofx5iolqg] {
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 950;
}

.success .health-icon[b-jofx5iolqg],
.success .kpi-icon[b-jofx5iolqg],
.success.formula-tile[b-jofx5iolqg],
.success.status-note[b-jofx5iolqg] {
    color: #047857;
    background: var(--success-soft);
}

.danger .health-icon[b-jofx5iolqg],
.danger .kpi-icon[b-jofx5iolqg],
.danger.formula-tile[b-jofx5iolqg],
.danger.status-note[b-jofx5iolqg] {
    color: #be123c;
    background: var(--danger-soft);
}

.neutral .health-icon[b-jofx5iolqg],
.neutral .kpi-icon[b-jofx5iolqg],
.neutral.formula-tile[b-jofx5iolqg],
.neutral.status-note[b-jofx5iolqg] {
    color: #475569;
    background: var(--neutral-soft);
}

.income .health-icon[b-jofx5iolqg],
.income .kpi-icon[b-jofx5iolqg],
.income.formula-tile[b-jofx5iolqg] {
    color: #047857;
    background: var(--income-soft);
}

.profit .health-icon[b-jofx5iolqg],
.profit .kpi-icon[b-jofx5iolqg],
.profit.formula-tile[b-jofx5iolqg] {
    color: var(--primary-dark);
    background: var(--profit-soft);
}

.asset .health-icon[b-jofx5iolqg],
.asset .kpi-icon[b-jofx5iolqg],
.asset.formula-tile[b-jofx5iolqg] {
    color: #0369a1;
    background: var(--asset-soft);
}

.liability .health-icon[b-jofx5iolqg],
.liability .kpi-icon[b-jofx5iolqg],
.liability.formula-tile[b-jofx5iolqg] {
    color: #be123c;
    background: var(--liability-soft);
}

.liability.zero .kpi-icon[b-jofx5iolqg],
.liability.muted.formula-tile[b-jofx5iolqg] {
    color: #64748b;
    background: var(--neutral-soft);
}

.equity .health-icon[b-jofx5iolqg],
.equity .kpi-icon[b-jofx5iolqg],
.equity.formula-tile[b-jofx5iolqg] {
    color: #6d28d9;
    background: var(--equity-soft);
}

.cash .health-icon[b-jofx5iolqg],
.cash .kpi-icon[b-jofx5iolqg],
.cash.status-note[b-jofx5iolqg] {
    color: #0f766e;
    background: var(--cash-soft);
}

.receivable .health-icon[b-jofx5iolqg],
.receivable .kpi-icon[b-jofx5iolqg],
.receivable.status-note[b-jofx5iolqg] {
    color: #0e7490;
    background: var(--receivable-soft);
}

.financial-statement-page [b-jofx5iolqg]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.financial-statement-page [b-jofx5iolqg]::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, 0.52);
    border-radius: 999px;
}

.financial-statement-page [b-jofx5iolqg]::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.36);
    border-radius: 999px;
}

@media (max-width: 1320px) {
    .health-grid[b-jofx5iolqg],
    .breakdown-groups[b-jofx5iolqg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kpi-grid[b-jofx5iolqg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1060px) {
    .insight-grid[b-jofx5iolqg] {
        grid-template-columns: 1fr;
    }

    .formula-strip.balance[b-jofx5iolqg] {
        grid-template-columns: 1fr auto 1fr;
    }
}

@media (max-width: 768px) {
    .financial-statement-page[b-jofx5iolqg] {
        padding-inline: 12px !important;
    }

    .fs-hero[b-jofx5iolqg],
    .section-head[b-jofx5iolqg],
    .health-banner[b-jofx5iolqg] {
        align-items: stretch;
        flex-direction: column;
    }

    .fs-hero[b-jofx5iolqg] {
        padding: 20px;
    }

    .refresh-btn[b-jofx5iolqg] {
        width: 100%;
    }

    .controls-grid[b-jofx5iolqg],
    .health-grid[b-jofx5iolqg],
    .kpi-grid[b-jofx5iolqg],
    .formula-strip[b-jofx5iolqg],
    .formula-strip.balance[b-jofx5iolqg],
    .breakdown-groups[b-jofx5iolqg] {
        grid-template-columns: 1fr;
    }

    .period-chips[b-jofx5iolqg] {
        justify-content: flex-start;
    }

    .operator[b-jofx5iolqg] {
        width: 42px;
        margin: 0 auto;
    }
}

@media (max-width: 520px) {
    .hero-main[b-jofx5iolqg] {
        align-items: flex-start;
    }

    .hero-icon[b-jofx5iolqg] {
        width: 52px;
        height: 52px;
        border-radius: 20px;
    }

    .comparison-label[b-jofx5iolqg],
    .mini-row[b-jofx5iolqg],
    .breakdown-row[b-jofx5iolqg] {
        align-items: flex-start;
        flex-direction: column;
    }

    .mini-row strong[b-jofx5iolqg],
    .breakdown-row em[b-jofx5iolqg] {
        text-align: left;
    }
}
/* /Components/Pages/GradeComponentsPage.razor.rz.scp.css */
@keyframes assessmentRise-b-lxpvgc88n5 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes assessmentSpin-b-lxpvgc88n5 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes assessmentShimmer-b-lxpvgc88n5 {
    100% {
        transform: translateX(100%);
    }
}

.assessment-components-page[b-lxpvgc88n5] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --assessment: #ec4899;
    --assessment-soft: #fce7f3;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    display: block;
    min-height: 100%;
    overflow-x: hidden;
    padding: 28px 32px 96px;
    color: var(--text-main);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    background:
        radial-gradient(circle at 8% 8%, rgba(14, 165, 233, .18), transparent 34%),
        radial-gradient(circle at 88% 6%, rgba(139, 92, 246, .16), transparent 30%),
        radial-gradient(circle at 92% 92%, rgba(236, 72, 153, .12), transparent 32%),
        linear-gradient(135deg, #eef8ff 0%, #f8fbff 46%, #f7f0ff 100%);
}

.assessment-components-page.mybody[b-lxpvgc88n5] {
    grid-template-rows: unset;
}

.assessment-components-page[b-lxpvgc88n5]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .46) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .18;
}

.assessment-shell[b-lxpvgc88n5] {
    position: relative;
    z-index: 1;
    width: min(100%, 1440px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
    animation: assessmentRise-b-lxpvgc88n5 .42s ease both;
}

.assessment-hero[b-lxpvgc88n5],
.assessment-context-card[b-lxpvgc88n5],
.assessment-summary-card[b-lxpvgc88n5],
.weightage-health-banner[b-lxpvgc88n5],
.assessment-distribution-card[b-lxpvgc88n5],
.assessment-table-card[b-lxpvgc88n5],
.assessment-empty-state[b-lxpvgc88n5],
.assessment-loading-state[b-lxpvgc88n5],
.assessment-modal[b-lxpvgc88n5] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.assessment-hero[b-lxpvgc88n5] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
}

.assessment-hero[b-lxpvgc88n5]::after {
    content: "";
    position: absolute;
    inset: auto -8% -90% 52%;
    height: 180px;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(8px);
    background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(236, 72, 153, .16));
}

.assessment-hero-copy[b-lxpvgc88n5],
.assessment-card-header[b-lxpvgc88n5],
.assessment-card-title[b-lxpvgc88n5],
.assessment-card-actions[b-lxpvgc88n5],
.assessment-row-actions[b-lxpvgc88n5],
.mobile-component-top[b-lxpvgc88n5],
.component-cell[b-lxpvgc88n5],
.weightage-cell[b-lxpvgc88n5],
.weightage-legend[b-lxpvgc88n5],
.assessment-button[b-lxpvgc88n5],
.assessment-icon-button[b-lxpvgc88n5],
.editor-weightage-note[b-lxpvgc88n5],
.distribution-empty[b-lxpvgc88n5] {
    display: flex;
    align-items: center;
}

.assessment-hero-copy[b-lxpvgc88n5],
.assessment-card-title[b-lxpvgc88n5],
.component-cell[b-lxpvgc88n5],
.editor-weightage-note[b-lxpvgc88n5] {
    gap: 14px;
}

.assessment-card-header[b-lxpvgc88n5] {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.assessment-card-actions[b-lxpvgc88n5],
.assessment-row-actions[b-lxpvgc88n5],
.weightage-legend[b-lxpvgc88n5] {
    flex-wrap: wrap;
    gap: 10px;
}

.assessment-hero-icon[b-lxpvgc88n5],
.assessment-card-title > span[b-lxpvgc88n5],
.summary-icon[b-lxpvgc88n5],
.component-icon[b-lxpvgc88n5],
.assessment-empty-state > span[b-lxpvgc88n5] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.assessment-hero-icon[b-lxpvgc88n5] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: #fff;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #0ea5e9, #ec4899);
    box-shadow: 0 18px 34px rgba(236, 72, 153, .22);
}

.eyebrow[b-lxpvgc88n5] {
    margin: 0 0 4px;
    color: var(--assessment);
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.assessment-hero h1[b-lxpvgc88n5],
.assessment-card-title h2[b-lxpvgc88n5],
.weightage-health-banner h2[b-lxpvgc88n5],
.assessment-empty-state h2[b-lxpvgc88n5],
.assessment-loading-state h2[b-lxpvgc88n5] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.035em;
}

.assessment-hero h1[b-lxpvgc88n5] {
    font-size: clamp(1.7rem, 2.4vw, 2.25rem);
}

.assessment-card-title h2[b-lxpvgc88n5],
.weightage-health-banner h2[b-lxpvgc88n5],
.assessment-empty-state h2[b-lxpvgc88n5],
.assessment-loading-state h2[b-lxpvgc88n5] {
    font-size: 1.1rem;
}

.assessment-hero p[b-lxpvgc88n5],
.assessment-card-title p[b-lxpvgc88n5],
.weightage-health-banner p[b-lxpvgc88n5],
.assessment-empty-state p[b-lxpvgc88n5],
.assessment-loading-state p[b-lxpvgc88n5],
.editor-weightage-note p[b-lxpvgc88n5] {
    margin: 0;
    color: var(--text-body);
}

.assessment-button[b-lxpvgc88n5],
.assessment-icon-button[b-lxpvgc88n5] {
    border: 0;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    border-radius: 16px;
    font-size: .9rem;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.assessment-button:not(:disabled):hover[b-lxpvgc88n5],
.assessment-icon-button:not(:disabled):hover[b-lxpvgc88n5] {
    transform: translateY(-1px);
}

.assessment-button:focus-visible[b-lxpvgc88n5],
.assessment-icon-button:focus-visible[b-lxpvgc88n5],
.assessment-select:focus[b-lxpvgc88n5],
.assessment-input:focus[b-lxpvgc88n5] {
    outline: 3px solid rgba(14, 165, 233, .18);
    outline-offset: 2px;
}

.assessment-button-primary[b-lxpvgc88n5] {
    color: #fff;
    padding: 0 18px;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6 52%, #ec4899);
    box-shadow: 0 16px 28px rgba(14, 165, 233, .22);
}

.assessment-button-primary:not(:disabled):hover[b-lxpvgc88n5] {
    box-shadow: 0 20px 36px rgba(236, 72, 153, .22);
}

.assessment-button:disabled[b-lxpvgc88n5] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
}

.assessment-button-ghost[b-lxpvgc88n5] {
    color: var(--text-body);
    padding: 0 18px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .74);
}

.assessment-context-card[b-lxpvgc88n5],
.assessment-distribution-card[b-lxpvgc88n5],
.assessment-table-card[b-lxpvgc88n5] {
    padding: 20px 22px;
    border-radius: var(--radius-lg);
}

.assessment-card-title > span[b-lxpvgc88n5] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, var(--primary-soft), var(--violet-soft));
}

.assessment-filter-grid[b-lxpvgc88n5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.assessment-field[b-lxpvgc88n5] {
    display: grid;
    gap: 8px;
}

.assessment-field > span[b-lxpvgc88n5] {
    color: var(--text-body);
    font-size: .78rem;
    font-weight: 850;
}

.assessment-field > span i[b-lxpvgc88n5] {
    margin-right: 6px;
    color: var(--primary);
}

.assessment-select[b-lxpvgc88n5],
.assessment-input[b-lxpvgc88n5] {
    min-height: 46px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background-color: rgba(255, 255, 255, .9);
    color: var(--text-main);
    font-size: .92rem;
    font-weight: 750;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.assessment-select:focus[b-lxpvgc88n5],
.assessment-input:focus[b-lxpvgc88n5] {
    border-color: rgba(14, 165, 233, .5);
    box-shadow: 0 0 0 .22rem rgba(14, 165, 233, .1), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.assessment-summary-grid[b-lxpvgc88n5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.assessment-summary-card[b-lxpvgc88n5] {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 14px;
    min-height: 136px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
}

.assessment-summary-card[b-lxpvgc88n5]::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -52px;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: rgba(14, 165, 233, .09);
}

.summary-icon[b-lxpvgc88n5] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 14px 24px rgba(14, 165, 233, .18);
}

.assessment-summary-card.total .summary-icon[b-lxpvgc88n5] {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

.assessment-summary-card.remaining .summary-icon[b-lxpvgc88n5] {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
}

.assessment-summary-card.scope .summary-icon[b-lxpvgc88n5] {
    background: linear-gradient(135deg, #10b981, #0ea5e9);
}

.assessment-summary-card.success .summary-icon[b-lxpvgc88n5],
.assessment-summary-card.remaining.success .summary-icon[b-lxpvgc88n5] {
    background: linear-gradient(135deg, #10b981, #0ea5e9);
}

.assessment-summary-card.danger .summary-icon[b-lxpvgc88n5],
.assessment-summary-card.remaining.danger .summary-icon[b-lxpvgc88n5] {
    background: linear-gradient(135deg, #ef476f, #ec4899);
}

.assessment-summary-card small[b-lxpvgc88n5] {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.assessment-summary-card strong[b-lxpvgc88n5] {
    display: block;
    max-width: 100%;
    margin: 4px 0 2px;
    color: var(--text-main);
    font-size: clamp(1.35rem, 2.1vw, 1.9rem);
    font-weight: 900;
    line-height: 1.12;
}

.assessment-summary-card.scope strong[b-lxpvgc88n5] {
    font-size: 1.02rem;
    line-height: 1.28;
}

.assessment-summary-card p[b-lxpvgc88n5] {
    margin: 0;
    color: var(--text-body);
    font-size: .84rem;
}

.assessment-summary-card.skeleton span[b-lxpvgc88n5],
.assessment-summary-card.skeleton strong[b-lxpvgc88n5],
.assessment-summary-card.skeleton small[b-lxpvgc88n5] {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 999px;
    background: rgba(226, 240, 250, .86);
}

.assessment-summary-card.skeleton span[b-lxpvgc88n5]::after,
.assessment-summary-card.skeleton strong[b-lxpvgc88n5]::after,
.assessment-summary-card.skeleton small[b-lxpvgc88n5]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .82), transparent);
    animation: assessmentShimmer-b-lxpvgc88n5 1.2s infinite;
}

.assessment-summary-card.skeleton span[b-lxpvgc88n5] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
}

.assessment-summary-card.skeleton strong[b-lxpvgc88n5] {
    width: 54%;
    height: 28px;
}

.assessment-summary-card.skeleton small[b-lxpvgc88n5] {
    width: 72%;
    height: 12px;
}

.weightage-health-banner[b-lxpvgc88n5] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
}

.weightage-health-banner > span[b-lxpvgc88n5] {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    font-size: 1.1rem;
}

.weightage-health-banner.success[b-lxpvgc88n5] {
    border-color: rgba(16, 185, 129, .25);
    background: linear-gradient(135deg, rgba(220, 252, 231, .9), rgba(255, 255, 255, .82));
}

.weightage-health-banner.success > span[b-lxpvgc88n5] {
    color: #047857;
    background: var(--success-soft);
}

.weightage-health-banner.warning[b-lxpvgc88n5] {
    border-color: rgba(245, 158, 11, .24);
    background: linear-gradient(135deg, rgba(255, 247, 237, .94), rgba(255, 255, 255, .84));
}

.weightage-health-banner.warning > span[b-lxpvgc88n5] {
    color: #b45309;
    background: var(--warning-soft);
}

.weightage-health-banner.danger[b-lxpvgc88n5] {
    border-color: rgba(239, 71, 111, .24);
    background: linear-gradient(135deg, rgba(255, 228, 236, .94), rgba(255, 255, 255, .84));
}

.weightage-health-banner.danger > span[b-lxpvgc88n5] {
    color: #be123c;
    background: var(--danger-soft);
}

.assessment-total-pill[b-lxpvgc88n5],
.assessment-count-pill[b-lxpvgc88n5],
.weightage-pill[b-lxpvgc88n5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}

.assessment-total-pill[b-lxpvgc88n5],
.assessment-count-pill[b-lxpvgc88n5] {
    min-height: 34px;
    padding: 0 12px;
}

.assessment-count-pill[b-lxpvgc88n5] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.assessment-total-pill.success[b-lxpvgc88n5] {
    color: #047857;
    background: var(--success-soft);
}

.assessment-total-pill.warning[b-lxpvgc88n5] {
    color: #b45309;
    background: var(--warning-soft);
}

.assessment-total-pill.danger[b-lxpvgc88n5] {
    color: #be123c;
    background: var(--danger-soft);
}

.weightage-stack[b-lxpvgc88n5] {
    overflow: hidden;
    display: flex;
    width: 100%;
    height: 18px;
    border-radius: 999px;
    background: rgba(226, 240, 250, .92);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
}

.weightage-stack span[b-lxpvgc88n5] {
    min-width: 4px;
}

.weightage-legend[b-lxpvgc88n5] {
    margin-top: 14px;
}

.weightage-legend span[b-lxpvgc88n5] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--text-body);
    font-size: .78rem;
    font-weight: 800;
    background: rgba(255, 255, 255, .74);
    border: 1px solid var(--border-soft);
}

.weightage-legend i[b-lxpvgc88n5] {
    width: 9px;
    height: 9px;
    border-radius: 999px;
}

.weightage-legend strong[b-lxpvgc88n5] {
    color: var(--text-main);
}

.distribution-empty[b-lxpvgc88n5] {
    justify-content: center;
    gap: 10px;
    min-height: 76px;
    border-radius: var(--radius-md);
    color: var(--text-body);
    font-weight: 800;
    background: rgba(248, 252, 255, .72);
    border: 1px dashed var(--border-soft);
}

.assessment-table-card[b-lxpvgc88n5] {
    overflow: hidden;
}

.assessment-table-wrap[b-lxpvgc88n5] {
    overflow-x: auto;
}

.assessment-table[b-lxpvgc88n5] {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.assessment-table thead th[b-lxpvgc88n5] {
    padding: 14px 16px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .055em;
    background: linear-gradient(135deg, rgba(224, 245, 255, .72), rgba(252, 231, 243, .52));
}

.assessment-table thead th:first-child[b-lxpvgc88n5] {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

.assessment-table thead th:last-child[b-lxpvgc88n5] {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

.assessment-table tbody tr[b-lxpvgc88n5] {
    transition: background .18s ease, transform .18s ease;
}

.assessment-table tbody tr:hover[b-lxpvgc88n5] {
    background: rgba(14, 165, 233, .04);
}

.assessment-table tbody td[b-lxpvgc88n5] {
    min-height: 68px;
    padding: 16px;
    border-bottom: 1px solid rgba(120, 170, 210, .16);
    vertical-align: middle;
}

.component-icon[b-lxpvgc88n5] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    font-size: 1rem;
}

.component-cell strong[b-lxpvgc88n5] {
    display: block;
    color: var(--text-main);
    font-size: .98rem;
    font-weight: 900;
}

.component-cell small[b-lxpvgc88n5] {
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 750;
}

.weightage-cell[b-lxpvgc88n5] {
    justify-content: flex-end;
    gap: 12px;
}

.weightage-pill[b-lxpvgc88n5] {
    min-width: 64px;
    min-height: 34px;
    padding: 0 12px;
}

.mini-weightage-bar[b-lxpvgc88n5] {
    display: inline-flex;
    overflow: hidden;
    width: min(180px, 26vw);
    height: 8px;
    border-radius: 999px;
    background: rgba(226, 240, 250, .96);
}

.mini-weightage-bar i[b-lxpvgc88n5] {
    display: block;
    border-radius: inherit;
}

.assessment-row-actions[b-lxpvgc88n5] {
    justify-content: flex-end;
}

.assessment-icon-button[b-lxpvgc88n5] {
    width: 40px;
    min-height: 40px;
    color: var(--text-body);
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--border-soft);
}

.assessment-icon-button.edit[b-lxpvgc88n5] {
    color: var(--primary-dark);
}

.assessment-icon-button.edit:hover[b-lxpvgc88n5] {
    background: var(--primary-soft);
}

.assessment-icon-button.delete[b-lxpvgc88n5] {
    color: #be123c;
}

.assessment-icon-button.delete:hover[b-lxpvgc88n5] {
    background: var(--danger-soft);
}

.assessment-icon-button.close[b-lxpvgc88n5] {
    color: var(--text-body);
}

.tone-pink[b-lxpvgc88n5] {
    color: #be185d;
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
}

.tone-blue[b-lxpvgc88n5] {
    color: #0369a1;
    background: linear-gradient(135deg, #e0f5ff, #bae6fd);
}

.tone-violet[b-lxpvgc88n5] {
    color: #6d28d9;
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
}

.tone-cyan[b-lxpvgc88n5] {
    color: #0e7490;
    background: linear-gradient(135deg, #cffafe, #a5f3fc);
}

.tone-amber[b-lxpvgc88n5] {
    color: #b45309;
    background: linear-gradient(135deg, #fff7ed, #fed7aa);
}

.weightage-stack .tone-pink[b-lxpvgc88n5],
.mini-weightage-bar .tone-pink[b-lxpvgc88n5],
.weightage-legend .tone-pink[b-lxpvgc88n5] {
    background: linear-gradient(135deg, #ec4899, #be185d);
}

.weightage-stack .tone-blue[b-lxpvgc88n5],
.mini-weightage-bar .tone-blue[b-lxpvgc88n5],
.weightage-legend .tone-blue[b-lxpvgc88n5] {
    background: linear-gradient(135deg, #0ea5e9, #0369a1);
}

.weightage-stack .tone-violet[b-lxpvgc88n5],
.mini-weightage-bar .tone-violet[b-lxpvgc88n5],
.weightage-legend .tone-violet[b-lxpvgc88n5] {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
}

.weightage-stack .tone-cyan[b-lxpvgc88n5],
.mini-weightage-bar .tone-cyan[b-lxpvgc88n5],
.weightage-legend .tone-cyan[b-lxpvgc88n5] {
    background: linear-gradient(135deg, #06b6d4, #0e7490);
}

.weightage-stack .tone-amber[b-lxpvgc88n5],
.mini-weightage-bar .tone-amber[b-lxpvgc88n5],
.weightage-legend .tone-amber[b-lxpvgc88n5] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.assessment-mobile-list[b-lxpvgc88n5] {
    display: none;
}

.assessment-mobile-card[b-lxpvgc88n5] {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-card);
}

.mobile-component-top[b-lxpvgc88n5] {
    justify-content: space-between;
    gap: 12px;
}

.assessment-empty-state[b-lxpvgc88n5],
.assessment-loading-state[b-lxpvgc88n5] {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 12px;
    min-height: 270px;
    border-radius: var(--radius-lg);
    background: rgba(248, 252, 255, .72);
    border-style: dashed;
    box-shadow: none;
}

.assessment-empty-state > span[b-lxpvgc88n5] {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    color: var(--primary-dark);
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--primary-soft), var(--assessment-soft));
}

.assessment-loading-state > span[b-lxpvgc88n5] {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(14, 165, 233, .16);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: assessmentSpin-b-lxpvgc88n5 .8s linear infinite;
}

.assessment-modal-backdrop[b-lxpvgc88n5] {
    background: rgba(15, 32, 51, .32);
    backdrop-filter: blur(8px);
}

.assessment-modal-shell[b-lxpvgc88n5] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.assessment-dialog[b-lxpvgc88n5] {
    width: 100%;
    max-width: 560px;
}

.assessment-modal[b-lxpvgc88n5] {
    overflow: hidden;
    border-radius: 28px;
}

.assessment-modal-header[b-lxpvgc88n5],
.assessment-modal-footer[b-lxpvgc88n5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
}

.assessment-modal-header[b-lxpvgc88n5] {
    background:
        radial-gradient(circle at 12% 18%, rgba(14, 165, 233, .18), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(252, 231, 243, .72));
}

.assessment-modal-header .assessment-card-title > span[b-lxpvgc88n5] {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #ec4899);
}

.assessment-modal-body[b-lxpvgc88n5] {
    padding: 22px;
    background: rgba(248, 252, 255, .56);
}

.weightage-input-wrap[b-lxpvgc88n5] {
    position: relative;
}

.weightage-input-wrap .assessment-input[b-lxpvgc88n5] {
    padding-right: 46px;
}

.weightage-input-wrap b[b-lxpvgc88n5] {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    color: var(--assessment);
}

.editor-weightage-note[b-lxpvgc88n5] {
    align-items: flex-start;
    padding: 14px;
    border-radius: var(--radius-md);
    color: #92400e;
    background: var(--warning-soft);
    border: 1px solid rgba(245, 158, 11, .18);
}

.editor-weightage-note > span[b-lxpvgc88n5] {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: #fff;
}

.editor-weightage-note strong[b-lxpvgc88n5] {
    color: #78350f;
    font-size: .88rem;
}

.editor-weightage-note p[b-lxpvgc88n5] {
    font-size: .82rem;
}

.assessment-modal-footer[b-lxpvgc88n5] {
    background: rgba(255, 255, 255, .82);
    border-top: 1px solid var(--border-soft);
}

@media (max-width: 1180px) {
    .assessment-summary-grid[b-lxpvgc88n5],
    .assessment-filter-grid[b-lxpvgc88n5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .assessment-components-page[b-lxpvgc88n5] {
        padding: 18px 14px 72px;
    }

    .assessment-hero[b-lxpvgc88n5],
    .assessment-card-header[b-lxpvgc88n5],
    .assessment-modal-header[b-lxpvgc88n5],
    .assessment-modal-footer[b-lxpvgc88n5] {
        align-items: stretch;
        flex-direction: column;
    }

    .assessment-button[b-lxpvgc88n5] {
        width: 100%;
    }

    .assessment-filter-grid[b-lxpvgc88n5],
    .assessment-summary-grid[b-lxpvgc88n5] {
        grid-template-columns: 1fr;
    }

    .assessment-card-actions[b-lxpvgc88n5] {
        width: 100%;
    }

    .assessment-card-actions > span[b-lxpvgc88n5] {
        flex: 1 1 auto;
    }

    .assessment-table-wrap[b-lxpvgc88n5] {
        display: none;
    }

    .assessment-mobile-list[b-lxpvgc88n5] {
        display: grid;
        gap: 12px;
    }

    .mini-weightage-bar[b-lxpvgc88n5] {
        width: 100%;
    }

    .assessment-row-actions[b-lxpvgc88n5] {
        justify-content: stretch;
    }

    .assessment-mobile-card .assessment-icon-button[b-lxpvgc88n5] {
        flex: 1 1 0;
        width: auto;
    }
}

@media (max-width: 560px) {
    .assessment-hero[b-lxpvgc88n5],
    .assessment-context-card[b-lxpvgc88n5],
    .assessment-distribution-card[b-lxpvgc88n5],
    .assessment-table-card[b-lxpvgc88n5] {
        padding: 18px;
        border-radius: 24px;
    }

    .assessment-hero-copy[b-lxpvgc88n5],
    .component-cell[b-lxpvgc88n5],
    .mobile-component-top[b-lxpvgc88n5] {
        align-items: flex-start;
    }

    .assessment-hero h1[b-lxpvgc88n5] {
        font-size: 1.55rem;
    }

    .assessment-hero-icon[b-lxpvgc88n5] {
        width: 52px;
        height: 52px;
    }

    .mobile-component-top[b-lxpvgc88n5] {
        flex-direction: column;
    }
}
/* /Components/Pages/GradeLevelsPage.razor.rz.scp.css */
@keyframes gradesRise-b-o0511rtdcw {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes gradesPulse-b-o0511rtdcw {
    0%, 100% {
        opacity: .46;
    }

    50% {
        opacity: 1;
    }
}

.grade-levels-page[b-o0511rtdcw] {
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 36px;
    color: var(--text-body, #4e6274);
    font-family: "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.grade-levels-page[b-o0511rtdcw]::before,
.grade-levels-page[b-o0511rtdcw]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.grade-levels-page[b-o0511rtdcw]::before {
    width: 34vw;
    min-width: 320px;
    aspect-ratio: 1;
    left: 5%;
    top: 2%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.grade-levels-page[b-o0511rtdcw]::after {
    width: 38vw;
    min-width: 320px;
    aspect-ratio: 1;
    right: 0;
    bottom: -2%;
    background:
        radial-gradient(circle at 36% 34%, rgba(139, 92, 246, .14), transparent 58%),
        radial-gradient(circle at 72% 70%, rgba(236, 72, 153, .12), transparent 58%);
}

.grade-levels-shell[b-o0511rtdcw] {
    display: grid;
    gap: 18px;
    width: min(100%, 1360px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft, 0 18px 45px rgba(23, 55, 90, .08));
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: gradesRise-b-o0511rtdcw .32s ease-out both;
}

.grade-hero[b-o0511rtdcw],
.grade-summary-card[b-o0511rtdcw],
.grade-pathway-card[b-o0511rtdcw],
.grade-toolbar-card[b-o0511rtdcw],
.grade-list-card[b-o0511rtdcw] {
    border: 1px solid rgba(255, 255, 255, .76);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-card, 0 10px 26px rgba(23, 55, 90, .07));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.grade-hero[b-o0511rtdcw] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: 30px;
}

.grade-hero[b-o0511rtdcw]::after {
    content: "";
    position: absolute;
    right: 36px;
    bottom: -118px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(236, 72, 153, .12), transparent 68%);
    pointer-events: none;
}

.grade-hero-title[b-o0511rtdcw] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.grade-hero-icon[b-o0511rtdcw],
.summary-icon[b-o0511rtdcw],
.grade-modal-icon[b-o0511rtdcw] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.grade-hero-icon[b-o0511rtdcw] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--pink, #ec4899));
    box-shadow: 0 18px 34px rgba(236, 72, 153, .18);
}

.grade-hero h1[b-o0511rtdcw] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.grade-hero p[b-o0511rtdcw] {
    margin: 8px 0 0;
    max-width: 740px;
    color: var(--text-muted, #8a9aaa);
    font-size: .95rem;
    line-height: 1.45;
}

.grade-hero-meta[b-o0511rtdcw] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.grade-hero-meta span[b-o0511rtdcw],
.grade-count-pill[b-o0511rtdcw] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    color: var(--primary-dark, #0369a1);
    font-size: .76rem;
    font-weight: 850;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 999px;
    background: rgba(224, 245, 255, .78);
}

.grade-primary-button[b-o0511rtdcw],
.grade-soft-button[b-o0511rtdcw] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    font-size: .88rem;
    font-weight: 850;
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.grade-primary-button[b-o0511rtdcw] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--pink, #ec4899)) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .2);
}

.grade-soft-button[b-o0511rtdcw] {
    color: var(--text-main, #102033) !important;
    border: 1px solid rgba(120, 170, 210, .2) !important;
    background: rgba(255, 255, 255, .7) !important;
    box-shadow: none !important;
}

.grade-summary-grid[b-o0511rtdcw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.grade-summary-card[b-o0511rtdcw] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    min-height: 128px;
    padding: 18px;
    border-radius: 24px;
}

.summary-icon[b-o0511rtdcw] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    color: var(--primary-dark, #0369a1);
    border-radius: 17px;
    background: rgba(14, 165, 233, .1);
}

.grade-summary-card.primary .summary-icon[b-o0511rtdcw] {
    color: #047857;
    background: rgba(16, 185, 129, .12);
}

.grade-summary-card.secondary .summary-icon[b-o0511rtdcw] {
    color: #6d28d9;
    background: rgba(139, 92, 246, .12);
}

.grade-summary-card.upper .summary-icon[b-o0511rtdcw] {
    color: #be185d;
    background: rgba(236, 72, 153, .11);
}

.summary-label[b-o0511rtdcw] {
    align-self: end;
    color: var(--text-muted, #8a9aaa);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.grade-summary-card strong[b-o0511rtdcw] {
    color: var(--text-main, #102033);
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    font-weight: 950;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.grade-summary-card small[b-o0511rtdcw] {
    color: var(--text-muted, #8a9aaa);
    font-size: .8rem;
}

.grade-summary-card.skeleton span[b-o0511rtdcw],
.grade-summary-card.skeleton strong[b-o0511rtdcw],
.grade-summary-card.skeleton small[b-o0511rtdcw] {
    display: block;
    border-radius: 999px;
    background: #dbeafe;
    animation: gradesPulse-b-o0511rtdcw 1.2s ease-in-out infinite;
}

.grade-summary-card.skeleton span[b-o0511rtdcw] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    border-radius: 17px;
}

.grade-summary-card.skeleton strong[b-o0511rtdcw] {
    width: 72%;
    height: 18px;
}

.grade-summary-card.skeleton small[b-o0511rtdcw] {
    width: 58%;
    height: 12px;
}

.grade-pathway-card[b-o0511rtdcw],
.grade-toolbar-card[b-o0511rtdcw],
.grade-list-card[b-o0511rtdcw] {
    border-radius: 26px;
}

.grade-pathway-card[b-o0511rtdcw] {
    padding: 20px;
}

.grade-card-header[b-o0511rtdcw] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(226, 232, 240, .72);
}

.grade-card-header.compact[b-o0511rtdcw] {
    padding: 0;
    border-bottom: 0;
    margin-bottom: 16px;
}

.section-kicker[b-o0511rtdcw] {
    display: block;
    margin-bottom: 6px;
    color: var(--primary-dark, #0369a1);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.grade-card-header h2[b-o0511rtdcw],
.grade-modal-header h5[b-o0511rtdcw] {
    margin: 0;
    color: var(--text-main, #102033);
    font-weight: 900;
    letter-spacing: -.035em;
}

.grade-card-header h2[b-o0511rtdcw] {
    font-size: 1.22rem;
}

.grade-card-header p[b-o0511rtdcw],
.grade-modal-header p[b-o0511rtdcw] {
    margin: 6px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .88rem;
}

.grade-pathway-grid[b-o0511rtdcw] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.pathway-group[b-o0511rtdcw] {
    min-width: 0;
    padding: 15px;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
}

.pathway-header[b-o0511rtdcw] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: start;
}

.pathway-header > span[b-o0511rtdcw] {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: #be185d;
    border-radius: 16px;
    background: rgba(252, 231, 243, .86);
}

.pathway-primary .pathway-header > span[b-o0511rtdcw] {
    color: var(--primary-dark, #0369a1);
    background: rgba(224, 245, 255, .88);
}

.pathway-secondary .pathway-header > span[b-o0511rtdcw] {
    color: #6d28d9;
    background: rgba(237, 233, 254, .86);
}

.pathway-upper .pathway-header > span[b-o0511rtdcw] {
    color: #0e7490;
    background: rgba(207, 250, 254, .78);
}

.pathway-header h3[b-o0511rtdcw] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: .94rem;
    font-weight: 900;
}

.pathway-header p[b-o0511rtdcw] {
    margin: 4px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .76rem;
    line-height: 1.35;
}

.pathway-header strong[b-o0511rtdcw] {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 28px;
    color: var(--primary-dark, #0369a1);
    font-size: .78rem;
    border-radius: 999px;
    background: rgba(224, 245, 255, .78);
}

.pathway-chip-list[b-o0511rtdcw] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 13px;
}

.pathway-chip-list span[b-o0511rtdcw] {
    min-height: 26px;
    padding: 5px 9px;
    color: #335068;
    font-size: .72rem;
    font-weight: 800;
    border-radius: 999px;
    background: rgba(241, 245, 249, .84);
}

.pathway-chip-list .empty-chip[b-o0511rtdcw] {
    color: var(--text-muted, #8a9aaa);
    font-style: italic;
}

.grade-toolbar-card[b-o0511rtdcw] {
    display: grid;
    grid-template-columns: minmax(240px, 1.15fr) minmax(190px, .72fr) minmax(180px, .72fr) auto auto;
    align-items: end;
    gap: 14px;
    padding: 16px;
}

.grade-field[b-o0511rtdcw] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.grade-field > span[b-o0511rtdcw],
.grade-field > label[b-o0511rtdcw] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.grade-select-wrap[b-o0511rtdcw],
.grade-search-wrap[b-o0511rtdcw] {
    position: relative;
}

.grade-input[b-o0511rtdcw] {
    min-height: 46px;
    padding: 10px 14px;
    color: var(--text-main, #102033) !important;
    font-size: .9rem;
    font-weight: 750;
    border: 1px solid rgba(120, 170, 210, .22) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(23, 55, 90, .04) !important;
}

.grade-input:focus[b-o0511rtdcw] {
    border-color: rgba(14, 165, 233, .72) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12), 0 10px 22px rgba(14, 165, 233, .07) !important;
}

.grade-select[b-o0511rtdcw] {
    appearance: none;
    padding-right: 42px;
}

.grade-select-wrap > i[b-o0511rtdcw],
.grade-search-wrap > i[b-o0511rtdcw] {
    position: absolute;
    top: 50%;
    color: var(--text-soft, #9aaaba);
    transform: translateY(-50%);
    pointer-events: none;
}

.grade-select-wrap > i[b-o0511rtdcw] {
    right: 15px;
    font-size: .76rem;
}

.grade-search-wrap > i[b-o0511rtdcw] {
    left: 15px;
}

.grade-search-wrap .grade-input[b-o0511rtdcw] {
    padding-left: 42px;
}

.grade-toolbar-count[b-o0511rtdcw] {
    display: grid;
    gap: 1px;
    min-width: 108px;
    min-height: 46px;
    place-items: center;
    padding: 7px 12px;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 16px;
    background: rgba(224, 245, 255, .68);
}

.grade-toolbar-count strong[b-o0511rtdcw] {
    color: var(--text-main, #102033);
    font-size: 1rem;
    line-height: 1;
}

.grade-toolbar-count span[b-o0511rtdcw] {
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    font-weight: 800;
}

.grade-list-card[b-o0511rtdcw] {
    overflow: hidden;
}

.grade-loading-state[b-o0511rtdcw],
.grade-empty-state[b-o0511rtdcw] {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    min-height: 320px;
    padding: 32px;
    text-align: center;
}

.grade-loading-state[b-o0511rtdcw] {
    color: var(--text-muted, #8a9aaa);
    font-weight: 800;
}

.grade-empty-state > span[b-o0511rtdcw] {
    display: inline-grid;
    place-items: center;
    width: 70px;
    height: 70px;
    color: var(--primary, #0ea5e9);
    font-size: 1.65rem;
    border-radius: 24px;
    background: rgba(224, 245, 255, .88);
}

.grade-empty-state h3[b-o0511rtdcw] {
    margin: 8px 0 0;
    color: var(--text-main, #102033);
    font-size: 1.25rem;
    font-weight: 900;
}

.grade-empty-state p[b-o0511rtdcw] {
    margin: 0 0 8px;
    color: var(--text-muted, #8a9aaa);
}

.grade-table-wrap[b-o0511rtdcw] {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 170, 210, .48) rgba(248, 252, 255, .65);
}

.grade-table-wrap[b-o0511rtdcw]::-webkit-scrollbar,
.grade-levels-page[b-o0511rtdcw]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.grade-table-wrap[b-o0511rtdcw]::-webkit-scrollbar-track,
.grade-levels-page[b-o0511rtdcw]::-webkit-scrollbar-track {
    background: rgba(248, 252, 255, .62);
    border-radius: 999px;
}

.grade-table-wrap[b-o0511rtdcw]::-webkit-scrollbar-thumb,
.grade-levels-page[b-o0511rtdcw]::-webkit-scrollbar-thumb {
    background: rgba(120, 170, 210, .42);
    border-radius: 999px;
}

.grade-table[b-o0511rtdcw] {
    min-width: 820px;
    color: var(--text-body, #4e6274);
    border-collapse: separate;
    border-spacing: 0;
}

.grade-table thead[b-o0511rtdcw] {
    background: rgba(240, 249, 255, .96);
    box-shadow: 0 1px 0 rgba(186, 230, 253, .64);
}

.grade-table th[b-o0511rtdcw] {
    padding: 15px 18px;
    color: var(--text-muted, #8a9aaa);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
    border: 0;
    white-space: nowrap;
}

.grade-table td[b-o0511rtdcw] {
    padding: 16px 18px;
    vertical-align: middle;
    border-color: rgba(226, 232, 240, .72);
    font-size: .9rem;
}

.grade-table tbody tr[b-o0511rtdcw] {
    background: rgba(255, 255, 255, .54);
    transition: background .18s ease, transform .18s ease;
}

.grade-name-cell[b-o0511rtdcw] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.grade-avatar[b-o0511rtdcw] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: var(--primary-dark, #0369a1);
    border-radius: 16px;
    background: rgba(224, 245, 255, .88);
}

.grade-name-cell strong[b-o0511rtdcw],
.grade-name-cell small[b-o0511rtdcw] {
    display: block;
}

.grade-name-cell strong[b-o0511rtdcw] {
    color: var(--text-main, #102033);
    font-size: .96rem;
    font-weight: 900;
}

.grade-name-cell small[b-o0511rtdcw] {
    margin-top: 3px;
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
}

.framework-pill[b-o0511rtdcw] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 12px;
    color: #335068;
    font-size: .8rem;
    font-weight: 850;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 999px;
    background: rgba(241, 245, 249, .84);
}

.grade-actions[b-o0511rtdcw] {
    display: inline-flex;
    justify-content: flex-end;
    gap: 8px;
}

.grade-icon-button[b-o0511rtdcw] {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 15px;
    border: 1px solid rgba(14, 165, 233, .16);
    background: rgba(240, 249, 255, .88);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.grade-icon-button.edit[b-o0511rtdcw] {
    color: var(--primary-dark, #0369a1);
}

.grade-icon-button.delete[b-o0511rtdcw] {
    color: var(--danger, #ef476f);
    border-color: rgba(239, 71, 111, .16);
    background: rgba(255, 228, 236, .58);
}

.grade-modal-backdrop[b-o0511rtdcw] {
    background: rgba(11, 38, 58, .18) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.grade-modal-shell[b-o0511rtdcw] {
    display: grid !important;
    place-items: center;
    padding: 18px;
}

.grade-modal-dialog[b-o0511rtdcw] {
    width: min(100%, 540px);
    margin: 0;
}

.grade-modal-content[b-o0511rtdcw] {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 28px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 70px rgba(23, 55, 90, .18);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.grade-modal-header[b-o0511rtdcw] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 22px;
    border-bottom: 1px solid rgba(226, 232, 240, .72);
    background:
        radial-gradient(circle at 92% 0%, rgba(236, 72, 153, .12), transparent 38%),
        rgba(255, 255, 255, .76);
}

.grade-modal-icon[b-o0511rtdcw] {
    width: 46px;
    height: 46px;
    color: white;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--pink, #ec4899));
    box-shadow: 0 14px 28px rgba(236, 72, 153, .18);
}

.grade-modal-body[b-o0511rtdcw] {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.modal-field label[b-o0511rtdcw] {
    margin: 0;
}

.grade-field em[b-o0511rtdcw] {
    color: var(--danger, #ef476f);
    font-style: normal;
}

.grade-name-input[b-o0511rtdcw] {
    color: var(--primary-dark, #0369a1) !important;
    font-weight: 900;
}

.grade-helper-card[b-o0511rtdcw] {
    display: flex;
    gap: 10px;
    padding: 13px;
    color: #0369a1;
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.35;
    border: 1px solid rgba(14, 165, 233, .16);
    border-radius: 18px;
    background: rgba(224, 245, 255, .56);
}

.grade-modal-footer[b-o0511rtdcw] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid rgba(226, 232, 240, .72);
    background: rgba(248, 252, 255, .78);
}

@media (hover: hover) and (pointer: fine) {
    .grade-primary-button:hover[b-o0511rtdcw],
    .grade-soft-button:hover[b-o0511rtdcw],
    .grade-icon-button:hover[b-o0511rtdcw],
    .pathway-group:hover[b-o0511rtdcw] {
        transform: translateY(-1px);
    }

    .grade-primary-button:hover[b-o0511rtdcw] {
        box-shadow: 0 20px 40px rgba(236, 72, 153, .22);
    }

    .grade-icon-button.edit:hover[b-o0511rtdcw] {
        color: white;
        background: var(--primary, #0ea5e9);
        box-shadow: 0 12px 24px rgba(14, 165, 233, .22);
    }

    .grade-icon-button.delete:hover[b-o0511rtdcw] {
        color: white;
        background: var(--danger, #ef476f);
        box-shadow: 0 12px 24px rgba(239, 71, 111, .18);
    }

    .grade-table tbody tr:hover[b-o0511rtdcw] {
        background: rgba(14, 165, 233, .04);
    }
}

.grade-primary-button:focus-visible[b-o0511rtdcw],
.grade-soft-button:focus-visible[b-o0511rtdcw],
.grade-icon-button:focus-visible[b-o0511rtdcw],
.grade-input:focus-visible[b-o0511rtdcw] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 2px;
}

@media (max-width: 1199.98px) {
    .grade-summary-grid[b-o0511rtdcw],
    .grade-pathway-grid[b-o0511rtdcw] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grade-toolbar-card[b-o0511rtdcw] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .grade-levels-page[b-o0511rtdcw] {
        padding: 18px 10px 26px;
    }

    .grade-levels-shell[b-o0511rtdcw] {
        gap: 14px;
        padding: 12px;
        border-radius: 28px;
    }

    .grade-hero[b-o0511rtdcw] {
        align-items: stretch;
        flex-direction: column;
        padding: 20px;
        border-radius: 24px;
    }

    .grade-hero-title[b-o0511rtdcw] {
        align-items: flex-start;
    }

    .grade-hero-icon[b-o0511rtdcw] {
        width: 52px;
        height: 52px;
        border-radius: 19px;
    }

    .grade-hero h1[b-o0511rtdcw] {
        font-size: 1.7rem;
    }

    .grade-primary-button[b-o0511rtdcw],
    .grade-soft-button[b-o0511rtdcw] {
        width: 100%;
    }

    .grade-summary-grid[b-o0511rtdcw],
    .grade-pathway-grid[b-o0511rtdcw],
    .grade-toolbar-card[b-o0511rtdcw] {
        grid-template-columns: 1fr;
    }

    .grade-card-header[b-o0511rtdcw] {
        align-items: stretch;
        flex-direction: column;
    }

    .grade-table-wrap[b-o0511rtdcw] {
        overflow: visible;
    }

    .grade-table[b-o0511rtdcw],
    .grade-table thead[b-o0511rtdcw],
    .grade-table tbody[b-o0511rtdcw],
    .grade-table tr[b-o0511rtdcw],
    .grade-table th[b-o0511rtdcw],
    .grade-table td[b-o0511rtdcw] {
        display: block;
    }

    .grade-table[b-o0511rtdcw] {
        min-width: 0;
    }

    .grade-table thead[b-o0511rtdcw] {
        display: none;
    }

    .grade-table tbody[b-o0511rtdcw] {
        display: grid;
        gap: 12px;
        padding: 12px;
    }

    .grade-table tr[b-o0511rtdcw] {
        display: grid;
        gap: 10px;
        padding: 16px;
        border: 1px solid rgba(226, 232, 240, .8);
        border-radius: 20px;
        background: rgba(255, 255, 255, .82);
        box-shadow: 0 8px 18px rgba(23, 55, 90, .05);
    }

    .grade-table td[b-o0511rtdcw] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
        border: 0;
        text-align: right !important;
    }

    .grade-table td[b-o0511rtdcw]::before {
        content: attr(data-label);
        color: var(--text-soft, #9aaaba);
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .grade-table td:first-child[b-o0511rtdcw] {
        display: block;
        text-align: left !important;
    }

    .grade-table td:first-child[b-o0511rtdcw]::before {
        display: none;
    }

    .grade-actions[b-o0511rtdcw] {
        width: 100%;
    }

    .grade-icon-button[b-o0511rtdcw] {
        flex: 1 1 0;
        width: auto;
    }

    .grade-modal-footer[b-o0511rtdcw] {
        display: grid;
    }
}

@media (max-width: 430px) {
    .grade-levels-page[b-o0511rtdcw] {
        padding-inline: 8px;
    }

    .grade-hero-title[b-o0511rtdcw],
    .grade-hero-meta[b-o0511rtdcw],
    .pathway-header[b-o0511rtdcw] {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .grade-levels-shell[b-o0511rtdcw],
    .grade-summary-card.skeleton span[b-o0511rtdcw],
    .grade-summary-card.skeleton strong[b-o0511rtdcw],
    .grade-summary-card.skeleton small[b-o0511rtdcw] {
        animation: none !important;
    }

    .grade-primary-button[b-o0511rtdcw],
    .grade-soft-button[b-o0511rtdcw],
    .grade-icon-button[b-o0511rtdcw],
    .pathway-group[b-o0511rtdcw],
    .grade-table tbody tr[b-o0511rtdcw] {
        transition: none !important;
    }
}
/* /Components/Pages/InitialSetupPage.razor.rz.scp.css */
.setup-wrapper[b-xgrtfwqspn] {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 22px;
    background:
        radial-gradient(circle at 12% 18%, rgba(60, 204, 233, 0.34), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(244, 111, 181, 0.28), transparent 32%),
        linear-gradient(135deg, #eefcff 0%, #f7fbff 48%, #fff1fb 100%);
}

.setup-wrapper[b-xgrtfwqspn]::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 70px rgba(255, 255, 255, 0.42);
    pointer-events: none;
}

.setup-orb[b-xgrtfwqspn] {
    position: absolute;
    border-radius: 999px;
    filter: blur(42px);
    opacity: 0.62;
    animation: setupFloat-b-xgrtfwqspn 9s ease-in-out infinite;
    pointer-events: none;
}

.setup-orb-blue[b-xgrtfwqspn] {
    width: 280px;
    height: 280px;
    left: 4%;
    top: 8%;
    background: rgba(46, 195, 232, 0.52);
}

.setup-orb-pink[b-xgrtfwqspn] {
    width: 260px;
    height: 260px;
    right: 7%;
    bottom: 8%;
    background: rgba(235, 92, 174, 0.38);
    animation-delay: -4s;
}

.setup-card[b-xgrtfwqspn] {
    position: relative;
    z-index: 1;
    width: min(920px, 100%);
    max-height: calc(100vh - 44px);
    overflow-x: hidden;
    overflow-y: auto;
    padding: 26px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.34);
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.66);
    box-shadow:
        0 24px 70px rgba(38, 99, 137, 0.18),
        inset 0 0 90px rgba(255, 255, 255, 0.20),
        inset 0 0 4px rgba(255, 255, 255, 0.55);
}

.setup-card[b-xgrtfwqspn]::before,
.setup-card[b-xgrtfwqspn]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.setup-card[b-xgrtfwqspn]::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 45%);
}

.setup-card[b-xgrtfwqspn]::after {
    background: linear-gradient(180deg, rgba(255,255,255,0.25), rgba(255,255,255,0) 48%);
}

.setup-card > *[b-xgrtfwqspn] {
    position: relative;
    z-index: 2;
}

.setup-header[b-xgrtfwqspn] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px;
    margin-bottom: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.34);
    border: 1px solid rgba(255, 255, 255, 0.62);
}

.setup-logo[b-xgrtfwqspn] {
    width: 64px;
    height: 64px;
    border-radius: 19px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.64);
    box-shadow: 0 14px 28px rgba(23, 126, 158, 0.12);
}

.setup-logo img[b-xgrtfwqspn] {
    width: 48px;
    height: auto;
}

.setup-header h2[b-xgrtfwqspn] {
    margin: 0;
    color: #1d2d3c;
    font-size: 1.55rem;
    font-weight: 800;
}

.setup-header p[b-xgrtfwqspn] {
    margin: 4px 0 0;
    color: rgba(29, 45, 60, 0.68);
    font-size: 0.92rem;
}

.setup-section-title[b-xgrtfwqspn] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.42);
    color: #235064;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.setup-grid label[b-xgrtfwqspn] {
    display: block;
    margin: 0 0 7px 4px;
    color: #284456;
    font-size: 0.78rem;
    font-weight: 800;
}

.setup-input[b-xgrtfwqspn] {
    width: 100%;
    height: 42px;
    border-radius: 14px;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.76);
    background: rgba(255, 255, 255, 0.58);
    color: #172b3a;
    font-size: 0.94rem;
    font-weight: 650;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.setup-input:focus[b-xgrtfwqspn] {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(42, 178, 221, 0.78);
    box-shadow: 0 0 0 4px rgba(42, 178, 221, 0.14);
}

.setup-btn[b-xgrtfwqspn] {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #22aee6 0%, #e86ab0 100%);
    font-size: 0.98rem;
    font-weight: 850;
    box-shadow: 0 16px 30px rgba(42, 155, 215, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.setup-btn:hover:not(:disabled)[b-xgrtfwqspn] {
    transform: translateY(-1px);
    filter: saturate(1.08);
    box-shadow: 0 20px 38px rgba(224, 85, 164, 0.28);
}

.setup-btn:disabled[b-xgrtfwqspn] {
    opacity: 0.72;
    cursor: not-allowed;
}

@keyframes setupFloat-b-xgrtfwqspn {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(24px, 32px, 0);
    }
}

@media (max-width: 767px) {
    .setup-wrapper[b-xgrtfwqspn] {
        padding: 12px;
        align-items: flex-start;
    }

    .setup-wrapper[b-xgrtfwqspn]::before {
        inset: 6px;
        border-radius: 22px;
    }

    .setup-card[b-xgrtfwqspn] {
        max-height: none;
        padding: 18px;
        border-radius: 22px;
    }

    .setup-header[b-xgrtfwqspn] {
        align-items: flex-start;
        padding: 12px;
    }

    .setup-logo[b-xgrtfwqspn] {
        width: 54px;
        height: 54px;
        border-radius: 16px;
    }

    .setup-logo img[b-xgrtfwqspn] {
        width: 40px;
    }

    .setup-header h2[b-xgrtfwqspn] {
        font-size: 1.25rem;
    }
}
/* /Components/Pages/InvoiceDetailsPage.razor.rz.scp.css */
.invoice-print-surface[b-kvxc4s5xdp] {
    --invoice-ink: #172033;
    --invoice-muted: #667085;
    --invoice-line: #d9e1e8;
    --invoice-soft: #f6f9fb;
    --invoice-accent: #087f8c;
    --invoice-accent-soft: #e6f7f8;
    --invoice-danger: #b42318;
    --invoice-warning: #b54708;
    --invoice-success: #027a48;
    background: #fff;
    border: 1px solid rgba(23, 32, 51, 0.08);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    color: var(--invoice-ink);
    font-family: "Segoe UI", Arial, sans-serif;
    margin: 0 auto 2rem;
    max-width: 1120px;
    padding: 32px;
}

.invoice-document-header[b-kvxc4s5xdp] {
    align-items: flex-start;
    border-bottom: 3px solid var(--invoice-accent);
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding-bottom: 22px;
}

.invoice-school-mark[b-kvxc4s5xdp] {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    min-width: 0;8
}

.invoice-logo-frame[b-kvxc4s5xdp] {
    align-items: center;
    background: #fff;
    border: 1px solid var(--invoice-line);
    border-radius: 8px;
    display: flex;
    flex: 0 0 74px;
    height: 74px;
    justify-content: center;
    overflow: hidden;
    padding: 8px;
    width: 74px;
}

.invoice-logo-frame img[b-kvxc4s5xdp] {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.invoice-school-mark h2[b-kvxc4s5xdp] {
    color: var(--invoice-ink);
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.15;
    margin: 2px 0 8px;
}

.invoice-title-panel[b-kvxc4s5xdp] {
    background: linear-gradient(135deg, #f8fbfc, #edf8f9);
    border: 1px solid var(--invoice-line);
    border-radius: 8px;
    min-width: 220px;
    padding: 16px 18px;
    text-align: right;
}

.invoice-title[b-kvxc4s5xdp] {
    color: var(--invoice-accent);
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

.invoice-number[b-kvxc4s5xdp] {
    color: var(--invoice-ink);
    font-size: 0.98rem;
    font-weight: 700;
    margin-top: 8px;
    word-break: break-word;
}

.invoice-status[b-kvxc4s5xdp] {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    margin-top: 12px;
    padding: 5px 11px;
}

.invoice-status.is-paid[b-kvxc4s5xdp] {
    background: #ecfdf3;
    color: var(--invoice-success);
}

.invoice-status.is-partial[b-kvxc4s5xdp] {
    background: #fffaeb;
    color: var(--invoice-warning);
}

.invoice-status.is-due[b-kvxc4s5xdp] {
    background: #fef3f2;
    color: var(--invoice-danger);
}

.invoice-muted[b-kvxc4s5xdp] {
    color: var(--invoice-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.invoice-info-grid[b-kvxc4s5xdp] {
    display: grid;
    gap: 14px;
    grid-template-columns: 1.35fr 1fr 1fr;
    margin-top: 22px;
}

.invoice-info-panel[b-kvxc4s5xdp],
.invoice-notes-panel[b-kvxc4s5xdp],
.invoice-total-panel[b-kvxc4s5xdp],
.invoice-ledger-panel[b-kvxc4s5xdp] {
    background: var(--invoice-soft);
    border: 1px solid var(--invoice-line);
    border-radius: 8px;
    padding: 16px;
}

.invoice-panel-label[b-kvxc4s5xdp] {
    color: var(--invoice-accent);
    font-size: 0.73rem;
    font-weight: 900;
    letter-spacing: 0;
    margin-bottom: 9px;
    text-transform: uppercase;
}

.invoice-person-name[b-kvxc4s5xdp] {
    color: var(--invoice-ink);
    font-size: 1.05rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.invoice-meta-line[b-kvxc4s5xdp],
.invoice-total-row[b-kvxc4s5xdp] {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.invoice-meta-line + .invoice-meta-line[b-kvxc4s5xdp],
.invoice-total-row + .invoice-total-row[b-kvxc4s5xdp] {
    border-top: 1px solid rgba(102, 112, 133, 0.16);
    margin-top: 8px;
    padding-top: 8px;
}

.invoice-meta-line span[b-kvxc4s5xdp],
.invoice-total-row span[b-kvxc4s5xdp] {
    color: var(--invoice-muted);
    font-size: 0.86rem;
}

.invoice-amount-due[b-kvxc4s5xdp] {
    background: #102a43;
    border-color: #102a43;
    color: #fff;
}

.invoice-amount-due .invoice-panel-label[b-kvxc4s5xdp],
.invoice-amount-due .invoice-muted[b-kvxc4s5xdp] {
    color: rgba(255, 255, 255, 0.72);
}

.invoice-balance[b-kvxc4s5xdp] {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 8px;
}

.invoice-balance.is-paid[b-kvxc4s5xdp] {
    color: #7ce3b1;
}

.invoice-section[b-kvxc4s5xdp] {
    margin-top: 22px;
}

.invoice-section-heading[b-kvxc4s5xdp] {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.invoice-section-heading h3[b-kvxc4s5xdp],
.invoice-notes-panel h3[b-kvxc4s5xdp] {
    color: var(--invoice-ink);
    font-size: 1rem;
    font-weight: 850;
    margin: 0;
}

.invoice-section-heading span[b-kvxc4s5xdp] {
    color: var(--invoice-muted);
    font-size: 0.8rem;
    font-weight: 700;
}

.invoice-section-heading.compact[b-kvxc4s5xdp] {
    margin-bottom: 12px;
}

.invoice-table-wrap[b-kvxc4s5xdp] {
    border: 1px solid var(--invoice-line);
    border-radius: 8px;
    overflow: hidden;
}

.invoice-line-table[b-kvxc4s5xdp],
.invoice-mini-table[b-kvxc4s5xdp] {
    border-collapse: collapse;
    margin: 0;
    width: 100%;
}

.invoice-line-table th[b-kvxc4s5xdp],
.invoice-mini-table th[b-kvxc4s5xdp] {
    background: #102a43;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 10px 12px;
    text-transform: uppercase;
    vertical-align: middle;
}

.invoice-line-table td[b-kvxc4s5xdp],
.invoice-mini-table td[b-kvxc4s5xdp] {
    border-top: 1px solid var(--invoice-line);
    color: var(--invoice-ink);
    font-size: 0.86rem;
    padding: 11px 12px;
    vertical-align: top;
}

.invoice-line-table tbody tr:nth-child(even)[b-kvxc4s5xdp],
.invoice-mini-table tbody tr:nth-child(even)[b-kvxc4s5xdp] {
    background: #fbfdfe;
}

.invoice-col-no[b-kvxc4s5xdp] {
    width: 48px;
}

.invoice-item-name[b-kvxc4s5xdp] {
    font-weight: 800;
}

.invoice-empty[b-kvxc4s5xdp] {
    align-items: center;
    background: var(--invoice-soft);
    border: 1px dashed var(--invoice-line);
    border-radius: 8px;
    color: var(--invoice-muted);
    display: flex;
    font-weight: 700;
    min-height: 70px;
    padding: 16px;
}

.invoice-totals-layout[b-kvxc4s5xdp] {
    align-items: start;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) 360px;
    margin-top: 20px;
}

.invoice-notes-panel[b-kvxc4s5xdp] {
    background: #fff;
}

.invoice-notes-panel p[b-kvxc4s5xdp] {
    color: var(--invoice-muted);
    margin: 10px 0 14px;
}

.invoice-note-chip[b-kvxc4s5xdp] {
    background: var(--invoice-accent-soft);
    border-radius: 999px;
    color: var(--invoice-accent);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 6px 10px;
}

.invoice-total-panel[b-kvxc4s5xdp] {
    background: #fff;
    padding: 18px;
}

.invoice-grand-total[b-kvxc4s5xdp] {
    color: var(--invoice-ink);
    font-size: 1.02rem;
}

.invoice-grand-total strong[b-kvxc4s5xdp] {
    font-size: 1.08rem;
}

.invoice-balance-row[b-kvxc4s5xdp] {
    background: var(--invoice-accent-soft);
    border: 0;
    border-radius: 8px;
    margin-top: 12px;
    padding: 12px;
}

.invoice-balance-row span[b-kvxc4s5xdp],
.invoice-balance-row strong[b-kvxc4s5xdp] {
    color: var(--invoice-accent);
    font-size: 1.08rem;
    font-weight: 900;
}

.invoice-ledger-grid[b-kvxc4s5xdp] {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 22px;
}

.invoice-ledger-panel[b-kvxc4s5xdp] {
    background: #fff;
    min-width: 0;
}

.invoice-mini-table th[b-kvxc4s5xdp],
.invoice-mini-table td[b-kvxc4s5xdp] {
    font-size: 0.78rem;
    padding: 8px 9px;
}

.invoice-signature-section[b-kvxc4s5xdp] {
    align-items: flex-end;
    border-top: 1px solid var(--invoice-line);
    display: flex;
    justify-content: space-between;
    margin-top: 26px;
    padding-top: 22px;
}

.invoice-signature-block[b-kvxc4s5xdp] {
    min-width: 260px;
    text-align: center;
}

.invoice-signature-block img[b-kvxc4s5xdp] {
    display: block;
    height: 52px;
    margin: 0 auto 8px;
    object-fit: contain;
}

.invoice-signature-line[b-kvxc4s5xdp] {
    border-top: 1px solid var(--invoice-ink);
    margin: 46px auto 8px;
    max-width: 230px;
}

@media (max-width: 991.98px) {
    .invoice-print-surface[b-kvxc4s5xdp] {
        padding: 22px;
    }

    .invoice-document-header[b-kvxc4s5xdp],
    .invoice-signature-section[b-kvxc4s5xdp] {
        flex-direction: column;
    }

    .invoice-title-panel[b-kvxc4s5xdp] {
        text-align: left;
        width: 100%;
    }

    .invoice-info-grid[b-kvxc4s5xdp],
    .invoice-totals-layout[b-kvxc4s5xdp],
    .invoice-ledger-grid[b-kvxc4s5xdp] {
        grid-template-columns: 1fr;
    }

    .invoice-table-wrap[b-kvxc4s5xdp],
    .invoice-ledger-panel[b-kvxc4s5xdp] {
        overflow-x: hidden;
    }
}

@media (max-width: 575.98px) {
    .invoice-print-surface[b-kvxc4s5xdp] {
        border-radius: 0;
        padding: 16px;
    }

    .invoice-school-mark[b-kvxc4s5xdp] {
        flex-direction: column;
    }

    .invoice-title[b-kvxc4s5xdp] {
        font-size: 1.55rem;
    }

    .invoice-balance[b-kvxc4s5xdp] {
        font-size: 1.35rem;
    }

    .invoice-line-table th[b-kvxc4s5xdp],
    .invoice-line-table td[b-kvxc4s5xdp],
    .invoice-mini-table th[b-kvxc4s5xdp],
    .invoice-mini-table td[b-kvxc4s5xdp] {
        font-size: 0.75rem;
        padding: 8px 6px;
    }
}

@media print {
    .invoice-print-surface[b-kvxc4s5xdp] {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        max-width: none;
        padding: 0;
    }

    .invoice-document-header[b-kvxc4s5xdp],
    .invoice-info-panel[b-kvxc4s5xdp],
    .invoice-notes-panel[b-kvxc4s5xdp],
    .invoice-total-panel[b-kvxc4s5xdp],
    .invoice-ledger-panel[b-kvxc4s5xdp],
    .invoice-table-wrap[b-kvxc4s5xdp],
    .invoice-signature-section[b-kvxc4s5xdp] {
        break-inside: avoid;
    }

    .invoice-line-table th[b-kvxc4s5xdp],
    .invoice-mini-table th[b-kvxc4s5xdp] {
        background: #102a43 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .invoice-amount-due[b-kvxc4s5xdp],
    .invoice-balance-row[b-kvxc4s5xdp],
    .invoice-note-chip[b-kvxc4s5xdp],
    .invoice-status[b-kvxc4s5xdp],
    .invoice-title-panel[b-kvxc4s5xdp] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}
/* /Components/Pages/InvoiceListPage.razor.rz.scp.css */
.invoice-page[b-fidqam264g] {
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --surface-soft: rgba(248, 252, 255, 0.78);
    --border-soft: rgba(120, 170, 210, 0.22);
    --border-glass: rgba(255, 255, 255, 0.75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --finance: #f59e0b;
    --finance-soft: #fff7ed;
    --paid: #10b981;
    --paid-soft: #dcfce7;
    --outstanding: #ef476f;
    --outstanding-soft: #ffe4ec;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, 0.08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, 0.07);
    display: block;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 28px);
    border-radius: 30px;
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    background:
        radial-gradient(circle at 4% 0%, rgba(14, 165, 233, 0.2), transparent 32%),
        radial-gradient(circle at 92% 6%, rgba(139, 92, 246, 0.16), transparent 34%),
        radial-gradient(circle at 98% 100%, rgba(236, 72, 153, 0.12), transparent 30%),
        linear-gradient(135deg, #eef8ff 0%, #f8fcff 48%, #fff3fb 100%);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.invoice-page[b-fidqam264g]::-webkit-scrollbar,
.invoice-table-wrap[b-fidqam264g]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.invoice-page[b-fidqam264g]::-webkit-scrollbar-track,
.invoice-table-wrap[b-fidqam264g]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.45);
    border-radius: 999px;
}

.invoice-page[b-fidqam264g]::-webkit-scrollbar-thumb,
.invoice-table-wrap[b-fidqam264g]::-webkit-scrollbar-thumb {
    border: 2px solid rgba(255, 255, 255, 0.68);
    border-radius: 999px;
    background: rgba(107, 139, 164, 0.42);
}

.invoice-shell[b-fidqam264g] {
    display: grid;
    gap: 22px;
    width: min(100%, 1540px);
    margin: 0 auto;
}

.invoice-hero[b-fidqam264g],
.search-card[b-fidqam264g],
.ledger-card[b-fidqam264g],
.skeleton-ledger[b-fidqam264g] {
    border: 1px solid var(--border-glass);
    border-radius: 30px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.invoice-hero[b-fidqam264g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(20px, 2.4vw, 28px);
    position: relative;
    overflow: hidden;
}

.invoice-hero[b-fidqam264g]::after {
    content: "";
    position: absolute;
    inset: auto -8% -70% 55%;
    height: 220px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.2), transparent 68%);
}

.hero-title-wrap[b-fidqam264g],
.section-title[b-fidqam264g] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.hero-icon[b-fidqam264g],
.section-icon[b-fidqam264g],
.kpi-icon[b-fidqam264g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.hero-icon[b-fidqam264g] {
    width: 58px;
    height: 58px;
    border-radius: 22px;
    color: #fff;
    font-size: 1.55rem;
    background: linear-gradient(135deg, var(--primary), var(--finance) 54%, var(--violet));
    box-shadow: 0 16px 34px rgba(14, 165, 233, 0.24);
}

.invoice-hero h3[b-fidqam264g] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.55rem, 2.2vw, 2.05rem);
    font-weight: 850;
    letter-spacing: -0.04em;
}

.invoice-hero p[b-fidqam264g],
.section-title p[b-fidqam264g],
.invoice-health p[b-fidqam264g],
.empty-state p[b-fidqam264g],
.kpi-card p[b-fidqam264g] {
    margin: 0;
    color: var(--text-body);
}

.hero-actions[b-fidqam264g],
.ledger-tools[b-fidqam264g],
.pager[b-fidqam264g],
.action-stack[b-fidqam264g],
.mobile-actions[b-fidqam264g] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.soft-btn[b-fidqam264g],
.primary-btn[b-fidqam264g],
.icon-btn[b-fidqam264g],
.pager button[b-fidqam264g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 16px;
    font-weight: 800;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.soft-btn[b-fidqam264g],
.primary-btn[b-fidqam264g] {
    min-height: 44px;
    padding: 0 18px;
}

.soft-btn[b-fidqam264g] {
    border: 1px solid rgba(14, 165, 233, 0.22);
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.08);
}

.primary-btn[b-fidqam264g] {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 14px 28px rgba(14, 165, 233, 0.24);
}

.soft-btn:hover:not(:disabled)[b-fidqam264g],
.primary-btn:hover:not(:disabled)[b-fidqam264g],
.icon-btn:hover[b-fidqam264g],
.pager button:hover:not(:disabled)[b-fidqam264g] {
    transform: translateY(-1px);
}

.soft-btn:hover:not(:disabled)[b-fidqam264g] {
    background: var(--primary-soft);
    box-shadow: 0 14px 26px rgba(14, 165, 233, 0.14);
}

.primary-btn:hover:not(:disabled)[b-fidqam264g] {
    box-shadow: 0 18px 34px rgba(139, 92, 246, 0.28);
}

.soft-btn:disabled[b-fidqam264g],
.primary-btn:disabled[b-fidqam264g],
.pager button:disabled[b-fidqam264g] {
    cursor: not-allowed;
    opacity: 0.58;
}

.compact[b-fidqam264g] {
    min-height: 38px;
    padding-inline: 14px;
    border-radius: 14px;
}

.search-card[b-fidqam264g] {
    padding: clamp(18px, 2.2vw, 24px);
}

.search-head[b-fidqam264g],
.ledger-head[b-fidqam264g],
.ledger-foot[b-fidqam264g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.section-icon[b-fidqam264g] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: 1.15rem;
}

.section-icon.finance[b-fidqam264g] {
    color: #b45309;
    background: var(--finance-soft);
}

.section-title h5[b-fidqam264g] {
    margin: 0;
    color: var(--text-main);
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.section-title p[b-fidqam264g] {
    font-size: 0.9rem;
}

.result-chip[b-fidqam264g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 999px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}

.filter-grid[b-fidqam264g] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 320px);
    gap: 16px;
    margin-top: 18px;
}

.filter-field[b-fidqam264g] {
    display: grid;
    gap: 8px;
}

.filter-field > span[b-fidqam264g] {
    color: var(--text-body);
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.input-shell[b-fidqam264g],
.select-shell[b-fidqam264g] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.input-shell:focus-within[b-fidqam264g],
.select-shell:focus-within[b-fidqam264g] {
    border-color: rgba(14, 165, 233, 0.55);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}

.input-shell input[b-fidqam264g],
.select-shell select[b-fidqam264g],
.page-size-select[b-fidqam264g] {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--text-main);
    background: transparent;
    font-size: 0.92rem;
    font-weight: 750;
}

.select-shell select[b-fidqam264g],
.page-size-select[b-fidqam264g] {
    cursor: pointer;
}

.kpi-grid[b-fidqam264g],
.skeleton-grid[b-fidqam264g] {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 16px;
}

.kpi-card[b-fidqam264g],
.skeleton-card[b-fidqam264g] {
    position: relative;
    min-height: 154px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px);
}

.kpi-card[b-fidqam264g]::after {
    content: "";
    position: absolute;
    inset: auto -25% -45% 35%;
    height: 110px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.12), transparent 65%);
}

.kpi-card.warning[b-fidqam264g]::after {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.18), transparent 65%);
}

.kpi-card.danger[b-fidqam264g]::after {
    background: radial-gradient(circle, rgba(239, 71, 111, 0.16), transparent 65%);
}

.kpi-icon[b-fidqam264g] {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 16px;
}

.kpi-icon.primary[b-fidqam264g] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.kpi-icon.finance[b-fidqam264g] {
    color: #b45309;
    background: var(--finance-soft);
}

.kpi-icon.paid[b-fidqam264g] {
    color: #047857;
    background: var(--paid-soft);
}

.kpi-icon.warning[b-fidqam264g] {
    color: #b45309;
    background: var(--warning-soft);
}

.kpi-icon.danger[b-fidqam264g] {
    color: #be123c;
    background: var(--outstanding-soft);
}

.kpi-icon.violet[b-fidqam264g] {
    color: #6d28d9;
    background: var(--violet-soft);
}

.kpi-card small[b-fidqam264g] {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kpi-card strong[b-fidqam264g] {
    display: block;
    margin-top: 4px;
    color: var(--text-main);
    font-size: clamp(1.35rem, 1.8vw, 1.78rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.kpi-card p[b-fidqam264g] {
    margin-top: 2px;
    font-size: 0.85rem;
    font-weight: 650;
}

.invoice-health[b-fidqam264g] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border-glass);
    border-radius: 22px;
    box-shadow: var(--shadow-card);
}

.invoice-health > span[b-fidqam264g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 16px;
}

.invoice-health strong[b-fidqam264g] {
    display: block;
    color: var(--text-main);
    font-weight: 850;
}

.invoice-health p[b-fidqam264g] {
    font-size: 0.92rem;
}

.invoice-health.paid[b-fidqam264g] {
    background: linear-gradient(135deg, rgba(220, 252, 231, 0.9), rgba(224, 245, 255, 0.88));
}

.invoice-health.paid > span[b-fidqam264g] {
    color: #047857;
    background: rgba(255, 255, 255, 0.72);
}

.invoice-health.warning[b-fidqam264g] {
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.95), rgba(255, 228, 236, 0.74));
}

.invoice-health.warning > span[b-fidqam264g],
.invoice-health.danger > span[b-fidqam264g] {
    color: #be123c;
    background: rgba(255, 255, 255, 0.72);
}

.invoice-health.danger[b-fidqam264g] {
    background: linear-gradient(135deg, rgba(255, 228, 236, 0.95), rgba(255, 247, 237, 0.72));
}

.invoice-health.empty[b-fidqam264g] {
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.9), rgba(248, 252, 255, 0.9));
}

.invoice-health.empty > span[b-fidqam264g] {
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.72);
}

.ledger-card[b-fidqam264g] {
    overflow: hidden;
}

.ledger-head[b-fidqam264g] {
    padding: 22px 24px;
    border-bottom: 1px solid var(--border-soft);
}

.ledger-tools[b-fidqam264g] {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.page-size-select[b-fidqam264g] {
    width: auto;
    min-height: 36px;
    padding: 0 30px 0 12px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
}

.pager[b-fidqam264g] {
    padding: 4px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.64);
}

.pager button[b-fidqam264g] {
    width: 32px;
    height: 32px;
    color: var(--primary-dark);
    background: #fff;
}

.pager span[b-fidqam264g] {
    padding: 0 8px;
    color: var(--text-body);
    font-size: 0.82rem;
    font-weight: 850;
    white-space: nowrap;
}

.invoice-table-wrap[b-fidqam264g] {
    width: 100%;
    overflow-x: auto;
}

.invoice-table[b-fidqam264g] {
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 0;
}

.invoice-table thead th[b-fidqam264g] {
    padding: 14px 18px;
    color: #63768a;
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.7), rgba(255, 247, 237, 0.52));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.invoice-table tbody td[b-fidqam264g] {
    padding: 18px;
    border-top: 1px solid rgba(120, 170, 210, 0.14);
    color: var(--text-main);
    vertical-align: middle;
}

.invoice-table tbody tr[b-fidqam264g] {
    transition: background 0.18s ease, transform 0.18s ease;
}

.invoice-table tbody tr:hover[b-fidqam264g] {
    background: rgba(14, 165, 233, 0.045);
}

.invoice-id-cell[b-fidqam264g] {
    display: grid;
    gap: 7px;
    min-width: 190px;
}

.invoice-link[b-fidqam264g] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    border: 0;
    padding: 0;
    color: var(--primary-dark);
    background: transparent;
    font-size: 0.9rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.invoice-link:hover[b-fidqam264g] {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.micro-alert[b-fidqam264g] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 4px 8px;
    border-radius: 999px;
    color: #be123c;
    background: var(--outstanding-soft);
    font-size: 0.72rem;
    font-weight: 850;
}

.student-cell[b-fidqam264g] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 210px;
}

.student-avatar[b-fidqam264g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 50%;
    color: var(--primary-dark);
    background: linear-gradient(135deg, #e0f5ff, #fff);
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.12);
}

.student-cell strong[b-fidqam264g] {
    display: block;
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 850;
}

.student-cell small[b-fidqam264g] {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 750;
}

.date-stack[b-fidqam264g] {
    display: grid;
    gap: 6px;
    min-width: 150px;
}

.date-stack span[b-fidqam264g],
.mobile-date-grid span[b-fidqam264g] {
    color: var(--text-body);
    font-size: 0.82rem;
    font-weight: 700;
}

.date-stack b[b-fidqam264g],
.mobile-date-grid b[b-fidqam264g] {
    display: inline-block;
    min-width: 42px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.date-danger[b-fidqam264g] {
    color: #be123c !important;
}

.amount[b-fidqam264g],
.balance-cell strong[b-fidqam264g],
.mobile-amount-grid strong[b-fidqam264g] {
    font-variant-numeric: tabular-nums;
}

.amount[b-fidqam264g] {
    color: var(--text-main);
    font-weight: 850;
    white-space: nowrap;
}

.amount.paid[b-fidqam264g],
.mobile-amount-grid .paid[b-fidqam264g] {
    color: #047857;
}

.balance-cell[b-fidqam264g] {
    display: grid;
    gap: 2px;
    justify-items: end;
}

.balance-cell strong[b-fidqam264g] {
    font-size: 0.95rem;
    font-weight: 900;
    white-space: nowrap;
}

.balance-cell small[b-fidqam264g] {
    font-size: 0.72rem;
    font-weight: 850;
}

.balance-cell.cleared strong[b-fidqam264g],
.balance-mobile.cleared strong[b-fidqam264g] {
    color: #047857;
}

.balance-cell.cleared small[b-fidqam264g] {
    color: #059669;
}

.balance-cell.due strong[b-fidqam264g],
.balance-mobile.due strong[b-fidqam264g] {
    color: #be123c;
}

.balance-cell.due small[b-fidqam264g] {
    color: #be123c;
}

.status-pill[b-fidqam264g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 31px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.status-pill.paid[b-fidqam264g] {
    color: #047857;
    background: var(--paid-soft);
}

.status-pill.partial[b-fidqam264g],
.status-pill.open[b-fidqam264g] {
    color: #b45309;
    background: var(--warning-soft);
}

.status-pill.unpaid[b-fidqam264g],
.status-pill.overdue[b-fidqam264g] {
    color: #be123c;
    background: var(--outstanding-soft);
}

.action-stack[b-fidqam264g] {
    justify-content: flex-end;
}

.icon-btn[b-fidqam264g] {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 20px rgba(23, 55, 90, 0.08);
}

.icon-btn.view[b-fidqam264g] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.icon-btn.collect[b-fidqam264g] {
    color: #047857;
    background: var(--paid-soft);
}

.mobile-invoice-list[b-fidqam264g] {
    display: none;
    gap: 14px;
    padding: 16px;
}

.mobile-invoice-card[b-fidqam264g] {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-card);
}

.mobile-card-top[b-fidqam264g],
.mobile-date-grid[b-fidqam264g],
.mobile-amount-grid[b-fidqam264g] {
    display: grid;
    gap: 10px;
}

.mobile-card-top[b-fidqam264g] {
    grid-template-columns: 1fr auto;
    align-items: start;
}

.mobile-date-grid[b-fidqam264g] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-date-grid span[b-fidqam264g],
.mobile-amount-grid div[b-fidqam264g] {
    display: grid;
    gap: 2px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(248, 252, 255, 0.85);
}

.mobile-date-grid b[b-fidqam264g] {
    min-width: 0;
}

.mobile-amount-grid[b-fidqam264g] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mobile-amount-grid small[b-fidqam264g] {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mobile-amount-grid strong[b-fidqam264g] {
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 900;
}

.progress-track[b-fidqam264g] {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(138, 154, 170, 0.18);
}

.progress-track span[b-fidqam264g] {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
}

.progress-track span.paid[b-fidqam264g] {
    background: linear-gradient(90deg, var(--paid), var(--primary));
}

.progress-track span.partial[b-fidqam264g] {
    background: linear-gradient(90deg, var(--primary), var(--warning));
}

.progress-track span.open[b-fidqam264g] {
    background: linear-gradient(90deg, var(--warning), #fbbf24);
}

.progress-track span.overdue[b-fidqam264g] {
    background: linear-gradient(90deg, var(--outstanding), var(--pink));
}

.mobile-actions[b-fidqam264g] {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.ledger-foot[b-fidqam264g] {
    padding: 16px 24px 22px;
    border-top: 1px solid var(--border-soft);
    color: var(--text-body);
    font-size: 0.86rem;
    font-weight: 800;
}

.empty-state[b-fidqam264g] {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 58px 24px;
    text-align: center;
}

.empty-state > span[b-fidqam264g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 24px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: 1.7rem;
}

.empty-state h5[b-fidqam264g] {
    margin: 8px 0 0;
    color: var(--text-main);
    font-weight: 850;
}

.skeleton-card[b-fidqam264g],
.skeleton-ledger[b-fidqam264g] {
    display: grid;
    gap: 14px;
}

.skeleton-card span[b-fidqam264g],
.skeleton-card strong[b-fidqam264g],
.skeleton-card p[b-fidqam264g],
.skeleton-ledger span[b-fidqam264g],
.skeleton-ledger p[b-fidqam264g] {
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(224, 245, 255, 0.68), rgba(255, 255, 255, 0.88), rgba(224, 245, 255, 0.68));
    background-size: 220% 100%;
    animation: shimmer-b-fidqam264g 1.3s ease-in-out infinite;
}

.skeleton-card span[b-fidqam264g] {
    width: 42px;
    height: 42px;
    border-radius: 16px;
}

.skeleton-card strong[b-fidqam264g] {
    width: 70%;
    height: 26px;
}

.skeleton-card p[b-fidqam264g] {
    width: 54%;
    height: 12px;
}

.skeleton-ledger[b-fidqam264g] {
    grid-column: 1 / -1;
    padding: 26px;
}

.skeleton-ledger span[b-fidqam264g] {
    width: 240px;
    height: 28px;
}

.skeleton-ledger p[b-fidqam264g] {
    width: 100%;
    height: 52px;
}

@keyframes shimmer-b-fidqam264g {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.soft-btn:focus-visible[b-fidqam264g],
.primary-btn:focus-visible[b-fidqam264g],
.icon-btn:focus-visible[b-fidqam264g],
.pager button:focus-visible[b-fidqam264g],
.invoice-link:focus-visible[b-fidqam264g],
.input-shell:focus-within[b-fidqam264g],
.select-shell:focus-within[b-fidqam264g],
.page-size-select:focus-visible[b-fidqam264g] {
    outline: 3px solid rgba(14, 165, 233, 0.22);
    outline-offset: 2px;
}

@media (max-width: 1320px) {
    .kpi-grid[b-fidqam264g],
    .skeleton-grid[b-fidqam264g] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .invoice-hero[b-fidqam264g],
    .search-head[b-fidqam264g],
    .ledger-head[b-fidqam264g],
    .ledger-foot[b-fidqam264g] {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions[b-fidqam264g],
    .ledger-tools[b-fidqam264g] {
        justify-content: stretch;
    }

    .hero-actions > *[b-fidqam264g],
    .ledger-tools > *[b-fidqam264g] {
        flex: 1 1 auto;
    }

    .filter-grid[b-fidqam264g] {
        grid-template-columns: 1fr;
    }

    .kpi-grid[b-fidqam264g],
    .skeleton-grid[b-fidqam264g] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .invoice-page[b-fidqam264g] {
        padding: 12px;
        border-radius: 22px;
    }

    .invoice-hero[b-fidqam264g],
    .search-card[b-fidqam264g],
    .ledger-card[b-fidqam264g] {
        border-radius: 24px;
    }

    .hero-title-wrap[b-fidqam264g],
    .section-title[b-fidqam264g] {
        align-items: flex-start;
    }

    .hero-actions[b-fidqam264g],
    .ledger-tools[b-fidqam264g],
    .mobile-actions[b-fidqam264g] {
        flex-direction: column;
    }

    .soft-btn[b-fidqam264g],
    .primary-btn[b-fidqam264g],
    .page-size-select[b-fidqam264g],
    .pager[b-fidqam264g],
    .mobile-actions > *[b-fidqam264g] {
        width: 100%;
    }

    .kpi-grid[b-fidqam264g],
    .skeleton-grid[b-fidqam264g] {
        grid-template-columns: 1fr;
    }

    .invoice-table-wrap[b-fidqam264g] {
        display: none;
    }

    .mobile-invoice-list[b-fidqam264g] {
        display: grid;
    }

    .ledger-foot[b-fidqam264g] {
        align-items: stretch;
    }
}

@media (max-width: 520px) {
    .hero-icon[b-fidqam264g],
    .section-icon[b-fidqam264g] {
        width: 48px;
        height: 48px;
        border-radius: 18px;
    }

    .mobile-card-top[b-fidqam264g],
    .mobile-date-grid[b-fidqam264g],
    .mobile-amount-grid[b-fidqam264g] {
        grid-template-columns: 1fr;
    }

    .student-cell[b-fidqam264g] {
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-fidqam264g],
    *[b-fidqam264g]::before,
    *[b-fidqam264g]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/InvoicesPage.razor.rz.scp.css */
.invoice-entry-page[b-wdhncuie3i] {
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --surface-soft: rgba(248, 252, 255, 0.78);
    --border-soft: rgba(120, 170, 210, 0.22);
    --border-glass: rgba(255, 255, 255, 0.75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --finance: #f59e0b;
    --finance-soft: #fff7ed;
    --success: #10b981;
    --success-soft: #dcfce7;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, 0.08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, 0.07);
    display: block;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 28px);
    border-radius: 30px;
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    background:
        radial-gradient(circle at 4% 0%, rgba(14, 165, 233, 0.2), transparent 32%),
        radial-gradient(circle at 92% 6%, rgba(139, 92, 246, 0.16), transparent 34%),
        radial-gradient(circle at 98% 100%, rgba(236, 72, 153, 0.12), transparent 30%),
        linear-gradient(135deg, #eef8ff 0%, #f8fcff 48%, #fff3fb 100%);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.invoice-entry-page[b-wdhncuie3i]::-webkit-scrollbar,
.invoice-lines-wrap[b-wdhncuie3i]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.invoice-entry-page[b-wdhncuie3i]::-webkit-scrollbar-track,
.invoice-lines-wrap[b-wdhncuie3i]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.45);
    border-radius: 999px;
}

.invoice-entry-page[b-wdhncuie3i]::-webkit-scrollbar-thumb,
.invoice-lines-wrap[b-wdhncuie3i]::-webkit-scrollbar-thumb {
    border: 2px solid rgba(255, 255, 255, 0.68);
    border-radius: 999px;
    background: rgba(107, 139, 164, 0.42);
}

.invoice-builder-shell[b-wdhncuie3i] {
    display: grid;
    gap: 22px;
    width: min(100%, 1540px);
    margin: 0 auto;
}

.entry-hero[b-wdhncuie3i],
.context-card[b-wdhncuie3i],
.lines-card[b-wdhncuie3i] {
    border: 1px solid var(--border-glass);
    border-radius: 30px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.entry-hero[b-wdhncuie3i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(20px, 2.4vw, 28px);
    position: relative;
    overflow: hidden;
}

.entry-hero[b-wdhncuie3i]::after {
    content: "";
    position: absolute;
    inset: auto -8% -72% 55%;
    height: 220px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.18), transparent 68%);
}

.hero-title-wrap[b-wdhncuie3i],
.section-title[b-wdhncuie3i] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.hero-icon[b-wdhncuie3i],
.section-icon[b-wdhncuie3i],
.summary-icon[b-wdhncuie3i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.hero-icon[b-wdhncuie3i] {
    width: 58px;
    height: 58px;
    border-radius: 22px;
    color: #fff;
    font-size: 1.55rem;
    background: linear-gradient(135deg, var(--primary), var(--finance) 55%, var(--violet));
    box-shadow: 0 16px 34px rgba(14, 165, 233, 0.24);
}

.entry-hero h3[b-wdhncuie3i] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.55rem, 2.2vw, 2.05rem);
    font-weight: 850;
    letter-spacing: -0.04em;
}

.entry-hero p[b-wdhncuie3i],
.section-title p[b-wdhncuie3i],
.summary-card p[b-wdhncuie3i],
.readiness-banner p[b-wdhncuie3i],
.empty-state p[b-wdhncuie3i],
.grand-total-panel p[b-wdhncuie3i] {
    margin: 0;
    color: var(--text-body);
}

.soft-btn[b-wdhncuie3i],
.primary-btn[b-wdhncuie3i],
.delete-btn[b-wdhncuie3i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 0;
    border-radius: 16px;
    padding: 0 18px;
    font-weight: 850;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.soft-btn[b-wdhncuie3i] {
    border: 1px solid rgba(14, 165, 233, 0.22);
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.08);
}

.primary-btn[b-wdhncuie3i] {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 14px 28px rgba(14, 165, 233, 0.24);
}

.soft-btn:hover:not(:disabled)[b-wdhncuie3i],
.primary-btn:hover:not(:disabled)[b-wdhncuie3i],
.delete-btn:hover[b-wdhncuie3i] {
    transform: translateY(-1px);
}

.soft-btn:hover:not(:disabled)[b-wdhncuie3i] {
    background: var(--primary-soft);
    box-shadow: 0 14px 26px rgba(14, 165, 233, 0.14);
}

.primary-btn:hover:not(:disabled)[b-wdhncuie3i] {
    box-shadow: 0 18px 34px rgba(139, 92, 246, 0.28);
}

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

.compact[b-wdhncuie3i] {
    min-height: 38px;
    padding-inline: 14px;
    border-radius: 14px;
}

.context-card[b-wdhncuie3i],
.lines-card[b-wdhncuie3i] {
    padding: clamp(18px, 2.2vw, 24px);
}

.card-head[b-wdhncuie3i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.section-icon[b-wdhncuie3i] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: 1.15rem;
}

.section-icon.finance[b-wdhncuie3i] {
    color: #b45309;
    background: var(--finance-soft);
}

.section-title h5[b-wdhncuie3i] {
    margin: 0;
    color: var(--text-main);
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.section-title p[b-wdhncuie3i] {
    font-size: 0.9rem;
}

.context-chips[b-wdhncuie3i],
.line-tools[b-wdhncuie3i] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.status-chip[b-wdhncuie3i],
.currency-chip[b-wdhncuie3i],
.line-count-chip[b-wdhncuie3i],
.currency-pill[b-wdhncuie3i],
.duplicate-chip[b-wdhncuie3i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.status-chip.draft[b-wdhncuie3i] {
    color: #6d28d9;
    background: var(--violet-soft);
}

.currency-chip[b-wdhncuie3i],
.currency-pill[b-wdhncuie3i] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.line-count-chip[b-wdhncuie3i] {
    color: #b45309;
    background: var(--finance-soft);
}

.duplicate-chip[b-wdhncuie3i] {
    color: #b45309;
    background: var(--warning-soft);
}

.context-grid[b-wdhncuie3i] {
    display: grid;
    grid-template-columns: minmax(260px, 1.3fr) minmax(170px, 0.8fr) minmax(170px, 0.75fr) minmax(160px, 0.65fr) minmax(160px, 0.65fr);
    gap: 16px;
    margin-top: 20px;
}

.field-shell[b-wdhncuie3i] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.field-shell > span[b-wdhncuie3i],
.mobile-field > span[b-wdhncuie3i] {
    color: var(--text-body);
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.field-shell b[b-wdhncuie3i] {
    color: var(--danger);
}

.input-shell[b-wdhncuie3i],
.select-shell[b-wdhncuie3i] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.input-shell.invalid[b-wdhncuie3i] {
    border-color: rgba(239, 71, 111, 0.55);
    box-shadow: 0 0 0 4px rgba(239, 71, 111, 0.1);
}

.input-shell.discounted[b-wdhncuie3i] {
    border-color: rgba(139, 92, 246, 0.32);
}

.input-shell:focus-within[b-wdhncuie3i],
.select-shell:focus-within[b-wdhncuie3i] {
    border-color: rgba(14, 165, 233, 0.55);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}

.entry-control[b-wdhncuie3i],
.entry-select[b-wdhncuie3i],
.entry-number[b-wdhncuie3i] {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--text-main);
    background: transparent;
    font-size: 0.92rem;
    font-weight: 780;
}

.entry-select[b-wdhncuie3i],
.entry-number[b-wdhncuie3i] {
    min-height: 44px;
    border: 1px solid var(--border-soft);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.74);
}

.entry-select[b-wdhncuie3i] {
    padding: 0 12px;
}

.entry-number[b-wdhncuie3i] {
    padding: 0 10px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.entry-number.qty[b-wdhncuie3i] {
    max-width: 94px;
    text-align: center;
}

.entry-number.exchange[b-wdhncuie3i] {
    max-width: 138px;
}

.entry-number.money[b-wdhncuie3i] {
    max-width: 148px;
}

.entry-number.converted[b-wdhncuie3i],
.entry-number.discounted[b-wdhncuie3i] {
    border-color: rgba(245, 158, 11, 0.38);
    background: rgba(255, 247, 237, 0.78);
}

.official-number .entry-control[b-wdhncuie3i] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 900;
}

.date-hint[b-wdhncuie3i] {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.date-hint.danger[b-wdhncuie3i] {
    color: #be123c;
}

.student-preview[b-wdhncuie3i],
.soft-note[b-wdhncuie3i],
.info-note[b-wdhncuie3i] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: rgba(248, 252, 255, 0.75);
}

.student-avatar[b-wdhncuie3i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 50%;
    color: var(--primary-dark);
    background: linear-gradient(135deg, #e0f5ff, #fff);
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.12);
}

.student-preview strong[b-wdhncuie3i] {
    display: block;
    color: var(--text-main);
    font-weight: 850;
}

.student-preview small[b-wdhncuie3i],
.soft-note[b-wdhncuie3i],
.info-note[b-wdhncuie3i] {
    color: var(--text-body);
    font-size: 0.86rem;
    font-weight: 700;
}

.summary-grid[b-wdhncuie3i] {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 16px;
}

.summary-card[b-wdhncuie3i] {
    position: relative;
    min-height: 154px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px);
}

.summary-card[b-wdhncuie3i]::after {
    content: "";
    position: absolute;
    inset: auto -25% -45% 35%;
    height: 110px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.12), transparent 65%);
}

.summary-card.highlight[b-wdhncuie3i]::after {
    background: radial-gradient(circle, rgba(245, 158, 11, 0.2), transparent 65%);
}

.summary-icon[b-wdhncuie3i] {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 16px;
}

.summary-icon.primary[b-wdhncuie3i] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.summary-icon.finance[b-wdhncuie3i] {
    color: #b45309;
    background: var(--finance-soft);
}

.summary-icon.violet[b-wdhncuie3i] {
    color: #6d28d9;
    background: var(--violet-soft);
}

.summary-icon.pink[b-wdhncuie3i] {
    color: #be185d;
    background: var(--pink-soft);
}

.summary-card small[b-wdhncuie3i] {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.summary-card strong[b-wdhncuie3i] {
    display: block;
    margin-top: 4px;
    color: var(--text-main);
    font-size: clamp(1.22rem, 1.55vw, 1.62rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.summary-card p[b-wdhncuie3i] {
    margin-top: 2px;
    font-size: 0.84rem;
    font-weight: 650;
}

.readiness-banner[b-wdhncuie3i] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border-glass);
    border-radius: 22px;
    box-shadow: var(--shadow-card);
}

.readiness-banner > span[b-wdhncuie3i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
}

.readiness-banner.ready[b-wdhncuie3i] {
    background: linear-gradient(135deg, rgba(220, 252, 231, 0.92), rgba(224, 245, 255, 0.82));
}

.readiness-banner.ready > span[b-wdhncuie3i] {
    color: #047857;
}

.readiness-banner.duplicate[b-wdhncuie3i],
.readiness-banner.warning[b-wdhncuie3i] {
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.95), rgba(255, 255, 255, 0.74));
}

.readiness-banner.duplicate > span[b-wdhncuie3i],
.readiness-banner.warning > span[b-wdhncuie3i] {
    color: #b45309;
}

.readiness-banner.danger[b-wdhncuie3i] {
    background: linear-gradient(135deg, rgba(255, 228, 236, 0.95), rgba(255, 247, 237, 0.72));
}

.readiness-banner.danger > span[b-wdhncuie3i] {
    color: #be123c;
}

.readiness-banner strong[b-wdhncuie3i] {
    display: block;
    color: var(--text-main);
    font-weight: 850;
}

.readiness-banner p[b-wdhncuie3i] {
    font-size: 0.92rem;
}

.lines-card[b-wdhncuie3i] {
    overflow: hidden;
    padding-bottom: 0;
}

.invoice-lines-wrap[b-wdhncuie3i] {
    width: calc(100% + clamp(36px, 4.4vw, 48px));
    margin: 20px calc(clamp(18px, 2.2vw, 24px) * -1) 0;
    overflow-x: auto;
}

.invoice-lines-table[b-wdhncuie3i] {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
}

.invoice-lines-table thead th[b-wdhncuie3i] {
    padding: 14px 16px;
    color: #63768a;
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.7), rgba(255, 247, 237, 0.52));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.invoice-lines-table tbody td[b-wdhncuie3i] {
    padding: 16px;
    border-top: 1px solid rgba(120, 170, 210, 0.14);
    color: var(--text-main);
    vertical-align: middle;
}

.invoice-lines-table tbody tr[b-wdhncuie3i] {
    transition: background 0.18s ease;
}

.invoice-lines-table tbody tr:hover[b-wdhncuie3i] {
    background: rgba(14, 165, 233, 0.045);
}

.invoice-lines-table tr.line-duplicate[b-wdhncuie3i],
.mobile-line-card.line-duplicate[b-wdhncuie3i] {
    box-shadow: inset 4px 0 0 rgba(245, 158, 11, 0.65);
}

.invoice-lines-table tr.line-invalid[b-wdhncuie3i],
.mobile-line-card.line-invalid[b-wdhncuie3i] {
    box-shadow: inset 4px 0 0 rgba(239, 71, 111, 0.68);
}

.line-item-cell[b-wdhncuie3i] {
    display: grid;
    grid-template-columns: auto auto minmax(240px, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 330px;
}

.line-status-dot[b-wdhncuie3i] {
    width: 10px;
    height: 10px;
    border-radius: 999px;
}

.line-status-dot.ready[b-wdhncuie3i] {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

.line-status-dot.warning[b-wdhncuie3i] {
    background: var(--warning);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.13);
}

.line-status-dot.danger[b-wdhncuie3i] {
    background: var(--danger);
    box-shadow: 0 0 0 4px rgba(239, 71, 111, 0.12);
}

.item-icon[b-wdhncuie3i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 15px;
    color: #b45309;
    background: var(--finance-soft);
}

.item-select-stack[b-wdhncuie3i] {
    display: grid;
    gap: 7px;
}

.line-meta[b-wdhncuie3i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.line-meta b[b-wdhncuie3i] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #b45309;
    font-size: 0.72rem;
}

.line-total[b-wdhncuie3i] {
    color: var(--text-main);
    font-size: 0.98rem;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.delete-btn[b-wdhncuie3i] {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    color: #be123c;
    background: var(--danger-soft);
    box-shadow: 0 10px 20px rgba(239, 71, 111, 0.08);
}

.delete-btn:hover[b-wdhncuie3i] {
    background: #ffd7e4;
    box-shadow: 0 14px 24px rgba(239, 71, 111, 0.14);
}

.mobile-lines-list[b-wdhncuie3i] {
    display: none;
    gap: 14px;
    margin-top: 18px;
}

.mobile-line-card[b-wdhncuie3i] {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-card);
}

.mobile-line-top[b-wdhncuie3i] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
}

.mobile-field[b-wdhncuie3i] {
    display: grid;
    gap: 7px;
}

.mobile-field small[b-wdhncuie3i] {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.mobile-line-grid[b-wdhncuie3i] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mobile-line-grid .entry-number[b-wdhncuie3i],
.mobile-field.full .entry-select[b-wdhncuie3i] {
    max-width: none;
}

.mobile-line-total[b-wdhncuie3i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: var(--finance-soft);
}

.mobile-line-total span[b-wdhncuie3i] {
    color: #b45309;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mobile-line-total strong[b-wdhncuie3i] {
    color: var(--text-main);
    font-size: 1.02rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.totals-area[b-wdhncuie3i] {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(320px, 420px);
    gap: 18px;
    margin: 22px calc(clamp(18px, 2.2vw, 24px) * -1) 0;
    padding: 22px clamp(18px, 2.2vw, 24px);
    border-top: 1px solid var(--border-soft);
    background: rgba(248, 252, 255, 0.58);
}

.adjustments-panel[b-wdhncuie3i] {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    align-content: start;
    gap: 16px;
}

.info-note[b-wdhncuie3i] {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.grand-total-panel[b-wdhncuie3i] {
    display: grid;
    gap: 8px;
    align-content: center;
    padding: 22px;
    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: 24px;
    background:
        radial-gradient(circle at 90% 10%, rgba(245, 158, 11, 0.18), transparent 40%),
        linear-gradient(135deg, rgba(255, 247, 237, 0.95), rgba(255, 255, 255, 0.86));
    box-shadow: 0 18px 36px rgba(245, 158, 11, 0.12);
}

.grand-total-panel small[b-wdhncuie3i] {
    color: #b45309;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.grand-total-panel strong[b-wdhncuie3i] {
    color: var(--text-main);
    font-size: clamp(1.78rem, 2.6vw, 2.32rem);
    font-weight: 950;
    letter-spacing: -0.055em;
    font-variant-numeric: tabular-nums;
}

.create-btn[b-wdhncuie3i] {
    width: 100%;
    margin-top: 8px;
}

.empty-state[b-wdhncuie3i] {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 50px 24px 34px;
    text-align: center;
}

.empty-state > span[b-wdhncuie3i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 24px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: 1.7rem;
}

.empty-state h5[b-wdhncuie3i] {
    margin: 8px 0 0;
    color: var(--text-main);
    font-weight: 850;
}

[b-wdhncuie3i] .modal-content.glass-card {
    border: 1px solid var(--border-glass) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 28px 70px rgba(23, 55, 90, 0.22) !important;
    backdrop-filter: blur(18px);
}

.soft-btn:focus-visible[b-wdhncuie3i],
.primary-btn:focus-visible[b-wdhncuie3i],
.delete-btn:focus-visible[b-wdhncuie3i],
.entry-control:focus-visible[b-wdhncuie3i],
.entry-select:focus-visible[b-wdhncuie3i],
.entry-number:focus-visible[b-wdhncuie3i] {
    outline: 3px solid rgba(14, 165, 233, 0.22);
    outline-offset: 2px;
}

@media (max-width: 1320px) {
    .context-grid[b-wdhncuie3i] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .student-field[b-wdhncuie3i] {
        grid-column: span 2;
    }

    .summary-grid[b-wdhncuie3i] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .entry-hero[b-wdhncuie3i],
    .card-head[b-wdhncuie3i],
    .totals-area[b-wdhncuie3i] {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .entry-hero[b-wdhncuie3i],
    .card-head[b-wdhncuie3i] {
        flex-direction: column;
    }

    .entry-hero .soft-btn[b-wdhncuie3i],
    .line-tools .soft-btn[b-wdhncuie3i] {
        width: 100%;
    }

    .context-grid[b-wdhncuie3i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-field[b-wdhncuie3i] {
        grid-column: span 2;
    }

    .summary-grid[b-wdhncuie3i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .invoice-entry-page[b-wdhncuie3i] {
        padding: 12px;
        border-radius: 22px;
    }

    .entry-hero[b-wdhncuie3i],
    .context-card[b-wdhncuie3i],
    .lines-card[b-wdhncuie3i] {
        border-radius: 24px;
    }

    .hero-title-wrap[b-wdhncuie3i],
    .section-title[b-wdhncuie3i] {
        align-items: flex-start;
    }

    .hero-icon[b-wdhncuie3i],
    .section-icon[b-wdhncuie3i] {
        width: 48px;
        height: 48px;
        border-radius: 18px;
    }

    .context-grid[b-wdhncuie3i],
    .summary-grid[b-wdhncuie3i],
    .adjustments-panel[b-wdhncuie3i] {
        grid-template-columns: 1fr;
    }

    .student-field[b-wdhncuie3i] {
        grid-column: auto;
    }

    .invoice-lines-wrap[b-wdhncuie3i] {
        display: none;
    }

    .mobile-lines-list[b-wdhncuie3i] {
        display: grid;
    }

    .totals-area[b-wdhncuie3i] {
        margin-top: 18px;
    }

    .grand-total-panel[b-wdhncuie3i] {
        position: sticky;
        bottom: 10px;
        z-index: 5;
    }
}

@media (max-width: 520px) {
    .context-chips[b-wdhncuie3i],
    .line-tools[b-wdhncuie3i] {
        align-items: stretch;
        flex-direction: column;
    }

    .context-chips > *[b-wdhncuie3i],
    .line-tools > *[b-wdhncuie3i] {
        width: 100%;
    }

    .mobile-line-grid[b-wdhncuie3i] {
        grid-template-columns: 1fr;
    }

    .mobile-line-total[b-wdhncuie3i] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-wdhncuie3i],
    *[b-wdhncuie3i]::before,
    *[b-wdhncuie3i]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/ItemsAndServicesPage.razor.rz.scp.css */
.catalog-page[b-6z5j6nhq6d] {
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --surface-soft: rgba(248, 252, 255, 0.78);
    --border-soft: rgba(120, 170, 210, 0.22);
    --border-glass: rgba(255, 255, 255, 0.75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --finance: #f59e0b;
    --finance-soft: #fff7ed;
    --success: #10b981;
    --success-soft: #dcfce7;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --stock: #14b8a6;
    --stock-soft: #ccfbf1;
    --service: #8b5cf6;
    --service-soft: #ede9fe;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, 0.08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, 0.07);
    display: block;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(14px, 2vw, 28px);
    border-radius: 30px;
    color: var(--text-main);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    background:
        radial-gradient(circle at 4% 0%, rgba(14, 165, 233, 0.2), transparent 32%),
        radial-gradient(circle at 92% 6%, rgba(139, 92, 246, 0.16), transparent 34%),
        radial-gradient(circle at 98% 100%, rgba(236, 72, 153, 0.12), transparent 30%),
        linear-gradient(135deg, #eef8ff 0%, #f8fcff 48%, #fff3fb 100%);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.catalog-page[b-6z5j6nhq6d]::-webkit-scrollbar,
.catalog-table-wrap[b-6z5j6nhq6d]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.catalog-page[b-6z5j6nhq6d]::-webkit-scrollbar-track,
.catalog-table-wrap[b-6z5j6nhq6d]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.45);
    border-radius: 999px;
}

.catalog-page[b-6z5j6nhq6d]::-webkit-scrollbar-thumb,
.catalog-table-wrap[b-6z5j6nhq6d]::-webkit-scrollbar-thumb {
    border: 2px solid rgba(255, 255, 255, 0.68);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.5), rgba(139, 92, 246, 0.45));
}

.catalog-shell[b-6z5j6nhq6d] {
    width: min(100%, 1560px);
    margin: 0 auto;
    display: grid;
    gap: 20px;
}

.catalog-hero[b-6z5j6nhq6d],
.kpi-card[b-6z5j6nhq6d],
.control-card[b-6z5j6nhq6d],
.health-banner[b-6z5j6nhq6d],
.group-card[b-6z5j6nhq6d],
.catalog-card[b-6z5j6nhq6d],
.mobile-catalog-card[b-6z5j6nhq6d] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(20px);
}

.catalog-hero[b-6z5j6nhq6d] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(20px, 2.5vw, 28px);
    border-radius: var(--radius-xl);
}

.hero-glow[b-6z5j6nhq6d] {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    pointer-events: none;
}

.hero-glow-cyan[b-6z5j6nhq6d] {
    top: -145px;
    left: 18%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.2), transparent 72%);
}

.hero-glow-violet[b-6z5j6nhq6d] {
    right: -80px;
    bottom: -160px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.22), transparent 72%);
}

.hero-title-wrap[b-6z5j6nhq6d],
.section-title[b-6z5j6nhq6d],
.status-chips[b-6z5j6nhq6d],
.controls-grid[b-6z5j6nhq6d],
.item-identity[b-6z5j6nhq6d],
.code-line[b-6z5j6nhq6d],
.mobile-card-top[b-6z5j6nhq6d],
.mobile-meta[b-6z5j6nhq6d] {
    display: flex;
    align-items: center;
}

.hero-title-wrap[b-6z5j6nhq6d] {
    position: relative;
    z-index: 1;
    gap: 15px;
}

.hero-icon[b-6z5j6nhq6d],
.section-icon[b-6z5j6nhq6d],
.kpi-icon[b-6z5j6nhq6d],
.modal-icon[b-6z5j6nhq6d],
.item-avatar[b-6z5j6nhq6d] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.hero-icon[b-6z5j6nhq6d] {
    width: 62px;
    height: 62px;
    border-radius: 22px;
    color: #fff;
    font-size: 1.35rem;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 18px 36px rgba(14, 165, 233, 0.25);
}

.catalog-hero h3[b-6z5j6nhq6d] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.catalog-hero p[b-6z5j6nhq6d],
.section-head p[b-6z5j6nhq6d],
.kpi-card p[b-6z5j6nhq6d],
.health-banner p[b-6z5j6nhq6d],
.empty-state p[b-6z5j6nhq6d] {
    margin: 0;
    color: var(--text-body);
}

.primary-btn[b-6z5j6nhq6d],
.ghost-btn[b-6z5j6nhq6d],
.icon-btn[b-6z5j6nhq6d],
.modal-close[b-6z5j6nhq6d],
.group-chip[b-6z5j6nhq6d] {
    border: 0;
    outline: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.primary-btn[b-6z5j6nhq6d],
.ghost-btn[b-6z5j6nhq6d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 16px;
    font-size: 0.9rem;
    font-weight: 850;
}

.primary-btn[b-6z5j6nhq6d] {
    position: relative;
    z-index: 1;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 15px 30px rgba(14, 165, 233, 0.22);
}

.ghost-btn[b-6z5j6nhq6d] {
    color: #58677a;
    border: 1px solid rgba(120, 170, 210, 0.26);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-card);
}

.primary-btn:hover[b-6z5j6nhq6d],
.ghost-btn:hover[b-6z5j6nhq6d],
.icon-btn:hover[b-6z5j6nhq6d],
.modal-close:hover[b-6z5j6nhq6d],
.group-chip:hover[b-6z5j6nhq6d] {
    transform: translateY(-1px);
}

.kpi-grid[b-6z5j6nhq6d] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.kpi-card[b-6z5j6nhq6d] {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    padding: 17px;
    border-radius: var(--radius-lg);
}

.kpi-card[b-6z5j6nhq6d]::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -54px;
    width: 125px;
    height: 125px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.09);
}

.kpi-icon[b-6z5j6nhq6d] {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 15px;
    color: #fff;
}

.kpi-icon.cyan[b-6z5j6nhq6d] {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}

.kpi-icon.emerald[b-6z5j6nhq6d] {
    background: linear-gradient(135deg, #34d399, #059669);
}

.kpi-icon.violet[b-6z5j6nhq6d] {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
}

.kpi-icon.stock[b-6z5j6nhq6d] {
    background: linear-gradient(135deg, #2dd4bf, #0f766e);
}

.kpi-icon.danger[b-6z5j6nhq6d] {
    background: linear-gradient(135deg, #fb7185, #ef476f);
}

.kpi-icon.gold[b-6z5j6nhq6d] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.kpi-card small[b-6z5j6nhq6d] {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kpi-card strong[b-6z5j6nhq6d] {
    display: block;
    margin: 4px 0 3px;
    color: var(--text-main);
    font-size: clamp(1.25rem, 1.8vw, 1.72rem);
    font-weight: 950;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.control-card[b-6z5j6nhq6d],
.group-card[b-6z5j6nhq6d],
.catalog-card[b-6z5j6nhq6d] {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.control-card[b-6z5j6nhq6d],
.group-card[b-6z5j6nhq6d] {
    padding: 20px;
}

.section-head[b-6z5j6nhq6d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.section-head.compact[b-6z5j6nhq6d] {
    margin-bottom: 14px;
}

.catalog-card .section-head[b-6z5j6nhq6d] {
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-soft);
}

.section-title[b-6z5j6nhq6d] {
    gap: 12px;
}

.section-icon[b-6z5j6nhq6d] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.92), rgba(237, 233, 254, 0.88));
}

.section-icon.gold[b-6z5j6nhq6d] {
    color: #b45309;
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
}

.section-head h5[b-6z5j6nhq6d] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.status-chips[b-6z5j6nhq6d] {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.status-chip[b-6z5j6nhq6d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 850;
}

.status-chip.active[b-6z5j6nhq6d] {
    color: #047857;
    background: rgba(220, 252, 231, 0.82);
}

.status-chip.low[b-6z5j6nhq6d] {
    color: #be123c;
    background: rgba(255, 228, 236, 0.82);
}

.status-chip.rows[b-6z5j6nhq6d] {
    color: var(--primary-dark);
    background: rgba(224, 245, 255, 0.82);
}

.controls-grid[b-6z5j6nhq6d] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.42fr) auto;
    gap: 14px;
}

.control-field[b-6z5j6nhq6d] {
    display: grid;
    gap: 7px;
}

.control-field > span[b-6z5j6nhq6d] {
    color: #486074;
    font-size: 0.78rem;
    font-weight: 850;
}

.input-shell[b-6z5j6nhq6d] {
    position: relative;
}

.input-shell > i[b-6z5j6nhq6d] {
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
}

.lux-input[b-6z5j6nhq6d] {
    width: 100%;
    min-height: 46px;
    padding-left: 39px;
    border: 1px solid rgba(190, 207, 224, 0.74);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--text-main);
    font-size: 0.92rem;
    font-weight: 760;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.modal-body .lux-input[b-6z5j6nhq6d] {
    padding-left: 12px;
}

.lux-input:focus[b-6z5j6nhq6d],
.primary-btn:focus-visible[b-6z5j6nhq6d],
.ghost-btn:focus-visible[b-6z5j6nhq6d],
.icon-btn:focus-visible[b-6z5j6nhq6d],
.modal-close:focus-visible[b-6z5j6nhq6d],
.group-chip:focus-visible[b-6z5j6nhq6d] {
    border-color: rgba(14, 165, 233, 0.72);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14);
}

.control-actions[b-6z5j6nhq6d] {
    align-self: end;
}

.health-banner[b-6z5j6nhq6d] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 18px;
    border-radius: 22px;
}

.health-banner > span[b-6z5j6nhq6d] {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    color: #fff;
}

.health-banner.success[b-6z5j6nhq6d] {
    border-color: rgba(16, 185, 129, 0.24);
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.9), rgba(255, 255, 255, 0.74));
}

.health-banner.success > span[b-6z5j6nhq6d] {
    background: linear-gradient(135deg, #34d399, #059669);
}

.health-banner.warning[b-6z5j6nhq6d] {
    border-color: rgba(245, 158, 11, 0.28);
    background: linear-gradient(135deg, rgba(255, 251, 235, 0.94), rgba(255, 255, 255, 0.74));
}

.health-banner.warning > span[b-6z5j6nhq6d] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.health-banner.danger[b-6z5j6nhq6d] {
    border-color: rgba(239, 71, 111, 0.28);
    background: linear-gradient(135deg, rgba(255, 228, 236, 0.86), rgba(255, 255, 255, 0.74));
}

.health-banner.danger > span[b-6z5j6nhq6d] {
    background: linear-gradient(135deg, #fb7185, #ef476f);
}

.health-banner strong[b-6z5j6nhq6d] {
    display: block;
    font-weight: 950;
}

.group-chip-grid[b-6z5j6nhq6d] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.group-chip[b-6z5j6nhq6d] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid rgba(120, 170, 210, 0.2);
    border-radius: 16px;
    color: #344256;
    background: rgba(255, 255, 255, 0.76);
    font-weight: 850;
}

.group-chip strong[b-6z5j6nhq6d] {
    display: inline-grid;
    place-items: center;
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    font-variant-numeric: tabular-nums;
}

.catalog-table-wrap[b-6z5j6nhq6d] {
    overflow-x: auto;
}

.catalog-table[b-6z5j6nhq6d] {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
}

.catalog-table thead th[b-6z5j6nhq6d] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 14px 18px;
    color: #64748b;
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.72), rgba(237, 233, 254, 0.55));
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.catalog-table tbody td[b-6z5j6nhq6d] {
    min-height: 78px;
    padding: 17px 18px;
    color: var(--text-main);
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    vertical-align: middle;
}

.catalog-table tbody tr[b-6z5j6nhq6d] {
    transition: background 0.18s ease;
}

.catalog-table tbody tr:hover[b-6z5j6nhq6d] {
    background: rgba(14, 165, 233, 0.045);
}

.catalog-table tbody tr.low-stock-row[b-6z5j6nhq6d] {
    box-shadow: inset 4px 0 0 rgba(239, 71, 111, 0.55);
}

.item-identity[b-6z5j6nhq6d] {
    gap: 12px;
}

.item-avatar[b-6z5j6nhq6d] {
    width: 46px;
    height: 46px;
    border-radius: 16px;
}

.item-avatar.finance[b-6z5j6nhq6d],
.category-chip.finance[b-6z5j6nhq6d],
.group-chip.finance[b-6z5j6nhq6d] {
    color: #b45309;
    background: var(--finance-soft);
}

.item-avatar.transport[b-6z5j6nhq6d],
.category-chip.transport[b-6z5j6nhq6d],
.group-chip.transport[b-6z5j6nhq6d],
.item-avatar.books[b-6z5j6nhq6d],
.category-chip.books[b-6z5j6nhq6d],
.group-chip.books[b-6z5j6nhq6d] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.item-avatar.hostel[b-6z5j6nhq6d],
.category-chip.hostel[b-6z5j6nhq6d],
.group-chip.hostel[b-6z5j6nhq6d],
.item-avatar.service[b-6z5j6nhq6d],
.category-chip.service[b-6z5j6nhq6d],
.group-chip.service[b-6z5j6nhq6d] {
    color: #6d28d9;
    background: var(--service-soft);
}

.item-avatar.uniform[b-6z5j6nhq6d],
.category-chip.uniform[b-6z5j6nhq6d],
.group-chip.uniform[b-6z5j6nhq6d] {
    color: #be185d;
    background: var(--pink-soft);
}

.item-avatar.other[b-6z5j6nhq6d],
.category-chip.other[b-6z5j6nhq6d],
.group-chip.other[b-6z5j6nhq6d] {
    color: #475569;
    background: #f1f5f9;
}

.item-identity strong[b-6z5j6nhq6d] {
    display: block;
    font-size: 0.98rem;
    font-weight: 900;
}

.code-line[b-6z5j6nhq6d] {
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 3px;
}

.code-line span[b-6z5j6nhq6d] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #64748b;
    background: rgba(241, 245, 249, 0.92);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.75rem;
    font-weight: 850;
}

.code-line em[b-6z5j6nhq6d] {
    padding: 3px 8px;
    border-radius: 999px;
    color: #b45309;
    background: #fff7ed;
    font-size: 0.7rem;
    font-style: normal;
    font-weight: 900;
}

.category-chip[b-6z5j6nhq6d] {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
}

.type-helper[b-6z5j6nhq6d] {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 750;
}

.price-stack[b-6z5j6nhq6d],
.stock-stack[b-6z5j6nhq6d],
.service-stock[b-6z5j6nhq6d] {
    display: grid;
    gap: 3px;
}

.price-stack strong[b-6z5j6nhq6d] {
    color: #b45309;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 1rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.price-stack small[b-6z5j6nhq6d],
.stock-stack small[b-6z5j6nhq6d],
.service-stock small[b-6z5j6nhq6d] {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
}

.stock-stack[b-6z5j6nhq6d] {
    justify-items: center;
}

.stock-stack span[b-6z5j6nhq6d],
.service-stock span[b-6z5j6nhq6d] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.stock-stack.healthy span[b-6z5j6nhq6d] {
    color: #0f766e;
    background: var(--stock-soft);
}

.stock-stack.low span[b-6z5j6nhq6d] {
    color: #be123c;
    background: var(--danger-soft);
}

.stock-bar[b-6z5j6nhq6d] {
    width: min(100%, 130px);
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.9);
}

.stock-bar em[b-6z5j6nhq6d] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #14b8a6, #0ea5e9);
}

.stock-stack.low .stock-bar em[b-6z5j6nhq6d] {
    background: linear-gradient(90deg, #fb7185, #ef476f);
}

.service-stock[b-6z5j6nhq6d] {
    justify-items: center;
}

.service-stock span[b-6z5j6nhq6d] {
    color: #6d28d9;
    background: var(--service-soft);
}

.icon-btn[b-6z5j6nhq6d] {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(226, 232, 240, 0.74);
    box-shadow: 0 9px 20px rgba(23, 55, 90, 0.07);
}

.icon-btn.edit[b-6z5j6nhq6d] {
    color: var(--primary-dark);
}

.mobile-catalog-list[b-6z5j6nhq6d] {
    display: none;
    padding: 14px;
    gap: 12px;
}

.mobile-catalog-card[b-6z5j6nhq6d] {
    display: grid;
    gap: 13px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.82);
}

.mobile-catalog-card.low[b-6z5j6nhq6d] {
    border-color: rgba(239, 71, 111, 0.25);
}

.mobile-card-top[b-6z5j6nhq6d],
.mobile-meta[b-6z5j6nhq6d] {
    justify-content: space-between;
    gap: 10px;
}

.mobile-meta[b-6z5j6nhq6d] {
    align-items: flex-start;
}

.mobile-meta strong[b-6z5j6nhq6d] {
    color: #b45309;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.9rem;
    font-weight: 950;
}

.table-skeleton[b-6z5j6nhq6d] {
    display: grid;
    gap: 10px;
    padding: 18px;
}

.table-skeleton span[b-6z5j6nhq6d] {
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(90deg, rgba(226, 232, 240, 0.78), rgba(255, 255, 255, 0.84), rgba(226, 232, 240, 0.78));
    animation: shimmer-b-6z5j6nhq6d 1.2s infinite linear;
}

.empty-state[b-6z5j6nhq6d] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 32px 18px;
    text-align: center;
}

.empty-state > span[b-6z5j6nhq6d] {
    display: inline-grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-bottom: 14px;
    border-radius: 24px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.95), rgba(237, 233, 254, 0.88));
    font-size: 1.65rem;
}

.empty-state h5[b-6z5j6nhq6d] {
    margin: 0 0 4px;
    font-weight: 950;
}

.empty-state p[b-6z5j6nhq6d] {
    max-width: 500px;
    margin-bottom: 16px;
}

.catalog-backdrop[b-6z5j6nhq6d] {
    background: rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(8px);
}

.catalog-modal-dialog[b-6z5j6nhq6d] {
    width: 100%;
    max-width: 780px;
}

.catalog-modal[b-6z5j6nhq6d] {
    overflow: hidden;
    border: 1px solid var(--border-glass);
    border-radius: 28px;
    background:
        radial-gradient(circle at 0% 0%, rgba(14, 165, 233, 0.12), transparent 42%),
        rgba(255, 255, 255, 0.96);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.24);
    backdrop-filter: blur(24px);
}

.catalog-modal-header[b-6z5j6nhq6d] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.78);
}

.catalog-modal-header h5[b-6z5j6nhq6d] {
    margin: 0;
    color: var(--text-main);
}

.catalog-modal-header p[b-6z5j6nhq6d] {
    margin: 2px 0 0;
    color: var(--text-body);
    font-size: 0.86rem;
}

.modal-icon[b-6z5j6nhq6d] {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
}

.modal-close[b-6z5j6nhq6d] {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: #475569;
    background: rgba(15, 23, 42, 0.06);
}

.modal-preview[b-6z5j6nhq6d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid rgba(14, 165, 233, 0.14);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.58), rgba(255, 255, 255, 0.78));
}

.modal-section-title[b-6z5j6nhq6d] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    color: var(--primary-dark);
    font-size: 0.84rem;
    font-weight: 950;
}

.switch-card[b-6z5j6nhq6d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 12px 14px;
    border: 1px solid rgba(226, 232, 240, 0.75);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
}

.switch-card .form-check-input[b-6z5j6nhq6d] {
    margin-left: 0;
    margin-right: 8px;
    font-size: 1.25rem;
}

.catalog-modal-footer[b-6z5j6nhq6d] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(226, 232, 240, 0.78);
    background: rgba(248, 250, 252, 0.78);
}

.animated[b-6z5j6nhq6d] {
    animation-duration: 0.4s;
    animation-fill-mode: both;
}

.fadeIn[b-6z5j6nhq6d] {
    animation-name: fadeIn-b-6z5j6nhq6d;
}

.slideDown[b-6z5j6nhq6d] {
    animation-name: slideDown-b-6z5j6nhq6d;
    animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
}

@keyframes fadeIn-b-6z5j6nhq6d {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown-b-6z5j6nhq6d {
    from {
        opacity: 0;
        transform: translateY(-28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer-b-6z5j6nhq6d {
    from {
        background-position: -240px 0;
    }

    to {
        background-position: 240px 0;
    }
}

@media (max-width: 1280px) {
    .kpi-grid[b-6z5j6nhq6d] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .controls-grid[b-6z5j6nhq6d] {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 0.6fr);
    }

    .control-actions[b-6z5j6nhq6d] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 860px) {
    .catalog-page[b-6z5j6nhq6d] {
        padding: 12px;
        border-radius: 22px;
    }

    .catalog-hero[b-6z5j6nhq6d],
    .section-head[b-6z5j6nhq6d],
    .modal-preview[b-6z5j6nhq6d] {
        align-items: stretch;
        flex-direction: column;
    }

    .catalog-hero .primary-btn[b-6z5j6nhq6d],
    .control-actions .ghost-btn[b-6z5j6nhq6d] {
        width: 100%;
    }

    .controls-grid[b-6z5j6nhq6d],
    .kpi-grid[b-6z5j6nhq6d] {
        grid-template-columns: 1fr;
    }

    .status-chips[b-6z5j6nhq6d] {
        justify-content: flex-start;
    }

    .catalog-table-wrap[b-6z5j6nhq6d] {
        display: none;
    }

    .mobile-catalog-list[b-6z5j6nhq6d] {
        display: grid;
    }

    .catalog-modal-footer[b-6z5j6nhq6d] {
        flex-direction: column-reverse;
    }

    .catalog-modal-footer > *[b-6z5j6nhq6d] {
        width: 100%;
    }
}

@media (max-width: 540px) {
    .hero-title-wrap[b-6z5j6nhq6d],
    .section-title[b-6z5j6nhq6d] {
        align-items: flex-start;
    }

    .hero-icon[b-6z5j6nhq6d],
    .section-icon[b-6z5j6nhq6d] {
        width: 48px;
        height: 48px;
        border-radius: 17px;
    }

    .mobile-card-top[b-6z5j6nhq6d],
    .mobile-meta[b-6z5j6nhq6d] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-6z5j6nhq6d],
    *[b-6z5j6nhq6d]::before,
    *[b-6z5j6nhq6d]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/JournalEntryPage.razor.rz.scp.css */
.journal-entry-page[b-rf8gjwwtxn] {
    --surface: rgba(255, 255, 255, 0.88);
    --surface-soft: rgba(248, 252, 255, 0.78);
    --border-soft: rgba(120, 170, 210, 0.22);
    --border-glass: rgba(255, 255, 255, 0.75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --finance: #f59e0b;
    --finance-soft: #fff7ed;
    --debit: #0ea5e9;
    --debit-soft: #e0f5ff;
    --credit: #8b5cf6;
    --credit-soft: #ede9fe;
    --balanced: #10b981;
    --balanced-soft: #dcfce7;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, 0.08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, 0.07);
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
}

.journal-shell[b-rf8gjwwtxn] {
    position: relative;
    display: grid;
    gap: 18px;
    max-width: 1440px;
    margin: 0 auto;
    min-height: 0;
}

.journal-shell[b-rf8gjwwtxn]::before,
.journal-shell[b-rf8gjwwtxn]::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 999px;
    filter: blur(16px);
    pointer-events: none;
}

.journal-shell[b-rf8gjwwtxn]::before {
    top: 42px;
    left: 30px;
    width: 285px;
    height: 285px;
    background: rgba(14, 165, 233, 0.14);
}

.journal-shell[b-rf8gjwwtxn]::after {
    right: 34px;
    bottom: 28px;
    width: 340px;
    height: 340px;
    background: rgba(236, 72, 153, 0.12);
}

.journal-hero[b-rf8gjwwtxn],
.context-card[b-rf8gjwwtxn],
.balance-card[b-rf8gjwwtxn],
.balance-banner[b-rf8gjwwtxn],
.lines-card[b-rf8gjwwtxn],
.preview-card[b-rf8gjwwtxn],
.action-footer[b-rf8gjwwtxn] {
    border: 1px solid var(--border-glass);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72)),
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.1), transparent 34%),
        radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.08), transparent 36%);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.journal-hero[b-rf8gjwwtxn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
}

.hero-main[b-rf8gjwwtxn],
.hero-actions[b-rf8gjwwtxn],
.section-title-wrap[b-rf8gjwwtxn],
.section-actions[b-rf8gjwwtxn],
.balance-card[b-rf8gjwwtxn],
.balance-banner[b-rf8gjwwtxn],
.action-footer[b-rf8gjwwtxn],
.input-wrap[b-rf8gjwwtxn],
.line-actions[b-rf8gjwwtxn],
.mobile-line-head[b-rf8gjwwtxn],
.preview-row[b-rf8gjwwtxn] {
    display: flex;
    align-items: center;
}

.hero-main[b-rf8gjwwtxn] {
    gap: 16px;
}

.hero-icon[b-rf8gjwwtxn],
.section-icon[b-rf8gjwwtxn],
.balance-icon[b-rf8gjwwtxn],
.banner-icon[b-rf8gjwwtxn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.hero-icon[b-rf8gjwwtxn] {
    width: 60px;
    height: 60px;
    border-radius: 23px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #2563eb 48%, #8b5cf6);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.24);
}

.journal-hero h1[b-rf8gjwwtxn] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.journal-hero p[b-rf8gjwwtxn],
.section-title-wrap p[b-rf8gjwwtxn],
.balance-banner p[b-rf8gjwwtxn],
.action-footer p[b-rf8gjwwtxn] {
    margin: 3px 0 0;
    color: var(--text-body);
    line-height: 1.55;
}

.hero-actions[b-rf8gjwwtxn] {
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.safety-note[b-rf8gjwwtxn],
.hero-badge[b-rf8gjwwtxn],
.state-chip[b-rf8gjwwtxn],
.soft-add-btn[b-rf8gjwwtxn],
.post-btn[b-rf8gjwwtxn],
.delete-line-btn[b-rf8gjwwtxn],
.remove-line-wide[b-rf8gjwwtxn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 850;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.safety-note[b-rf8gjwwtxn],
.hero-badge[b-rf8gjwwtxn],
.state-chip[b-rf8gjwwtxn],
.soft-add-btn[b-rf8gjwwtxn] {
    min-height: 42px;
    padding: 0 14px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, 0.76);
}

.safety-note[b-rf8gjwwtxn] {
    color: #0369a1;
    background: rgba(224, 245, 255, 0.78);
}

.hero-badge[b-rf8gjwwtxn],
.state-chip.draft[b-rf8gjwwtxn] {
    color: #5b21b6;
    background: rgba(237, 233, 254, 0.88);
}

.state-chip.currency[b-rf8gjwwtxn],
.state-chip.line-count[b-rf8gjwwtxn] {
    color: #0369a1;
    background: var(--primary-soft);
}

.state-chip.balanced[b-rf8gjwwtxn] {
    color: #047857;
    background: var(--balanced-soft);
}

.state-chip.unbalanced[b-rf8gjwwtxn] {
    color: #be123c;
    background: var(--danger-soft);
}

.context-card[b-rf8gjwwtxn],
.lines-card[b-rf8gjwwtxn],
.preview-card[b-rf8gjwwtxn],
.action-footer[b-rf8gjwwtxn] {
    border-radius: 28px;
    padding: 20px;
}

.section-head[b-rf8gjwwtxn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.section-head.compact[b-rf8gjwwtxn] {
    margin-bottom: 14px;
}

.section-title-wrap[b-rf8gjwwtxn] {
    gap: 12px;
}

.section-icon[b-rf8gjwwtxn] {
    width: 44px;
    height: 44px;
    border-radius: 17px;
    color: #0369a1;
    background: var(--primary-soft);
}

.section-icon.lines[b-rf8gjwwtxn] {
    color: #5b21b6;
    background: var(--credit-soft);
}

.section-icon.preview[b-rf8gjwwtxn] {
    color: #b45309;
    background: var(--finance-soft);
}

.section-title-wrap h2[b-rf8gjwwtxn] {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.section-title-wrap p[b-rf8gjwwtxn] {
    font-size: 0.86rem;
}

.section-actions[b-rf8gjwwtxn] {
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.context-grid[b-rf8gjwwtxn] {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
}

.field-tile[b-rf8gjwwtxn] {
    display: grid;
    gap: 8px;
}

.field-tile.description[b-rf8gjwwtxn] {
    grid-column: 1 / -1;
}

.field-tile > span[b-rf8gjwwtxn],
.mobile-field > span[b-rf8gjwwtxn] {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.field-tile small[b-rf8gjwwtxn] {
    color: var(--text-muted);
}

.input-wrap[b-rf8gjwwtxn],
.entry-textarea[b-rf8gjwwtxn],
.account-select[b-rf8gjwwtxn],
.line-input[b-rf8gjwwtxn] {
    width: 100%;
    border-radius: 17px;
    border: 1px solid rgba(120, 170, 210, 0.26);
    background-color: rgba(255, 255, 255, 0.84);
    color: var(--text-main);
    font-size: 0.93rem;
    font-weight: 750;
    outline: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.input-wrap[b-rf8gjwwtxn] {
    gap: 10px;
    min-height: 48px;
    padding: 0 13px;
}

.input-wrap i[b-rf8gjwwtxn] {
    color: var(--primary);
}

.input-wrap.code i[b-rf8gjwwtxn] {
    color: var(--credit);
}

.input-wrap.needs-value[b-rf8gjwwtxn],
.account-select.missing[b-rf8gjwwtxn] {
    border-color: rgba(245, 158, 11, 0.46);
    background-color: rgba(255, 247, 237, 0.9);
}

.entry-input[b-rf8gjwwtxn] {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font-size: 0.93rem;
    font-weight: 750;
    outline: 0;
}

.entry-input.numeric[b-rf8gjwwtxn] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.entry-textarea[b-rf8gjwwtxn] {
    min-height: 90px;
    padding: 13px 14px;
    resize: vertical;
}

.account-select[b-rf8gjwwtxn],
.line-input[b-rf8gjwwtxn] {
    min-height: 46px;
    padding: 0 13px;
}

.account-select[b-rf8gjwwtxn] {
    min-width: 260px;
    padding-right: 38px;
    font-variant-numeric: tabular-nums;
}

.line-input.amount[b-rf8gjwwtxn] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.line-input.amount.debit.has-value[b-rf8gjwwtxn] {
    border-color: rgba(14, 165, 233, 0.35);
    background: rgba(224, 245, 255, 0.7);
}

.line-input.amount.credit.has-value[b-rf8gjwwtxn] {
    border-color: rgba(139, 92, 246, 0.35);
    background: rgba(237, 233, 254, 0.78);
}

.line-input.invalid[b-rf8gjwwtxn] {
    border-color: rgba(239, 71, 111, 0.46);
    background: rgba(255, 228, 236, 0.82);
}

.input-wrap:focus-within[b-rf8gjwwtxn],
.entry-textarea:focus[b-rf8gjwwtxn],
.account-select:focus[b-rf8gjwwtxn],
.line-input:focus[b-rf8gjwwtxn] {
    border-color: rgba(14, 165, 233, 0.68);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.balance-grid[b-rf8gjwwtxn] {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 12px;
}

.balance-card[b-rf8gjwwtxn] {
    gap: 13px;
    min-height: 128px;
    padding: 18px;
    border-radius: var(--radius-lg);
}

.balance-icon[b-rf8gjwwtxn] {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.12);
}

.balance-card.debit .balance-icon[b-rf8gjwwtxn] {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.balance-card.credit .balance-icon[b-rf8gjwwtxn] {
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
}

.balance-card.balanced .balance-icon[b-rf8gjwwtxn],
.balance-card.status.balanced .balance-icon[b-rf8gjwwtxn] {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.balance-card.unbalanced .balance-icon[b-rf8gjwwtxn],
.balance-card.status.unbalanced .balance-icon[b-rf8gjwwtxn] {
    background: linear-gradient(135deg, #ef476f, #f43f5e);
}

.balance-card span[b-rf8gjwwtxn],
.preview-column-head span[b-rf8gjwwtxn] {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.balance-card strong[b-rf8gjwwtxn] {
    display: block;
    margin-top: 4px;
    font-size: 1.48rem;
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.balance-card small[b-rf8gjwwtxn] {
    display: block;
    margin-top: 6px;
    color: var(--text-body);
}

.balance-banner[b-rf8gjwwtxn] {
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
}

.banner-icon[b-rf8gjwwtxn] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: #fff;
}

.balance-banner.balanced .banner-icon[b-rf8gjwwtxn] {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.balance-banner.warning .banner-icon[b-rf8gjwwtxn] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.balance-banner.danger .banner-icon[b-rf8gjwwtxn] {
    background: linear-gradient(135deg, #ef476f, #f43f5e);
}

.balance-banner strong[b-rf8gjwwtxn] {
    font-weight: 900;
}

.soft-add-btn[b-rf8gjwwtxn] {
    color: var(--primary-dark);
    background: rgba(224, 245, 255, 0.78);
}

.post-btn[b-rf8gjwwtxn] {
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #2563eb 55%, #8b5cf6);
    box-shadow: 0 16px 32px rgba(37, 99, 235, 0.24);
}

.post-btn.large[b-rf8gjwwtxn] {
    min-height: 48px;
    padding-inline: 22px;
}

.post-btn:disabled[b-rf8gjwwtxn] {
    cursor: not-allowed;
    color: #94a3b8;
    background: rgba(226, 232, 240, 0.9);
    box-shadow: none;
}

.soft-add-btn:hover[b-rf8gjwwtxn],
.post-btn:not(:disabled):hover[b-rf8gjwwtxn],
.delete-line-btn:hover[b-rf8gjwwtxn],
.remove-line-wide:hover[b-rf8gjwwtxn] {
    transform: translateY(-1px);
}

.journal-table-wrap[b-rf8gjwwtxn] {
    overflow-x: auto;
    margin: 0 -20px -20px;
}

.journal-table[b-rf8gjwwtxn] {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

.journal-table th[b-rf8gjwwtxn] {
    padding: 13px 18px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.7), rgba(237, 233, 254, 0.58));
}

.journal-table td[b-rf8gjwwtxn] {
    padding: 14px 18px;
    border-top: 1px solid rgba(120, 170, 210, 0.15);
    vertical-align: middle;
}

.journal-table tbody tr[b-rf8gjwwtxn] {
    transition: background 0.18s ease;
}

.journal-table tbody tr:hover[b-rf8gjwwtxn] {
    background: rgba(14, 165, 233, 0.04);
}

.account-cell[b-rf8gjwwtxn] {
    display: grid;
    gap: 8px;
}

.type-chip[b-rf8gjwwtxn],
.line-status[b-rf8gjwwtxn],
.line-number[b-rf8gjwwtxn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 850;
    white-space: nowrap;
}

.type-chip[b-rf8gjwwtxn] {
    padding: 6px 9px;
}

.type-chip.asset[b-rf8gjwwtxn] {
    color: #0369a1;
    background: var(--debit-soft);
}

.type-chip.liability[b-rf8gjwwtxn],
.type-chip.equity[b-rf8gjwwtxn],
.type-chip.credit[b-rf8gjwwtxn] {
    color: #5b21b6;
    background: var(--credit-soft);
}

.type-chip.income[b-rf8gjwwtxn],
.type-chip.expense[b-rf8gjwwtxn],
.type-chip.cogs[b-rf8gjwwtxn] {
    color: #b45309;
    background: var(--finance-soft);
}

.type-chip.missing[b-rf8gjwwtxn] {
    color: #b45309;
    background: var(--warning-soft);
}

.line-actions[b-rf8gjwwtxn] {
    justify-content: flex-end;
    gap: 8px;
}

.line-status[b-rf8gjwwtxn] {
    padding: 7px 10px;
}

.line-status.debit[b-rf8gjwwtxn] {
    color: #0369a1;
    background: var(--debit-soft);
}

.line-status.credit[b-rf8gjwwtxn] {
    color: #5b21b6;
    background: var(--credit-soft);
}

.line-status.warning[b-rf8gjwwtxn] {
    color: #b45309;
    background: var(--warning-soft);
}

.line-status.danger[b-rf8gjwwtxn] {
    color: #be123c;
    background: var(--danger-soft);
}

.delete-line-btn[b-rf8gjwwtxn] {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 14px;
    color: #be123c;
    background: rgba(255, 228, 236, 0.86);
}

.mobile-line-list[b-rf8gjwwtxn] {
    display: none;
    gap: 12px;
}

.mobile-line-card[b-rf8gjwwtxn] {
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(120, 170, 210, 0.18);
    background: rgba(255, 255, 255, 0.76);
    box-shadow: var(--shadow-card);
}

.mobile-line-head[b-rf8gjwwtxn] {
    justify-content: space-between;
    gap: 10px;
}

.line-number[b-rf8gjwwtxn] {
    padding: 7px 10px;
    color: #0369a1;
    background: var(--primary-soft);
}

.mobile-field[b-rf8gjwwtxn] {
    display: grid;
    gap: 7px;
}

.mobile-amount-grid[b-rf8gjwwtxn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.remove-line-wide[b-rf8gjwwtxn] {
    min-height: 42px;
    border: 0;
    border-radius: 15px;
    color: #be123c;
    background: rgba(255, 228, 236, 0.86);
}

.preview-grid[b-rf8gjwwtxn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.preview-column[b-rf8gjwwtxn] {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(120, 170, 210, 0.18);
}

.preview-column.debit[b-rf8gjwwtxn] {
    border-left: 5px solid var(--debit);
}

.preview-column.credit[b-rf8gjwwtxn] {
    border-left: 5px solid var(--credit);
}

.preview-column-head[b-rf8gjwwtxn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(120, 170, 210, 0.16);
}

.preview-column-head strong[b-rf8gjwwtxn],
.preview-row span[b-rf8gjwwtxn] {
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.preview-row[b-rf8gjwwtxn] {
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
}

.preview-row + .preview-row[b-rf8gjwwtxn] {
    border-top: 1px solid rgba(120, 170, 210, 0.12);
}

.preview-row strong[b-rf8gjwwtxn] {
    display: block;
}

.preview-row small[b-rf8gjwwtxn],
.preview-empty[b-rf8gjwwtxn] {
    color: var(--text-muted);
}

.preview-row span[b-rf8gjwwtxn] {
    white-space: nowrap;
}

.posting-note[b-rf8gjwwtxn] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 13px 15px;
    border-radius: 18px;
    color: #0369a1;
    background: var(--primary-soft);
    font-weight: 750;
}

.action-footer[b-rf8gjwwtxn] {
    justify-content: space-between;
    gap: 18px;
}

.action-footer strong[b-rf8gjwwtxn] {
    font-weight: 900;
}

.empty-state[b-rf8gjwwtxn] {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 180px;
    padding: 30px 18px;
    color: var(--text-body);
    text-align: center;
}

.empty-state i[b-rf8gjwwtxn] {
    font-size: 1.8rem;
    color: var(--primary);
}

.empty-state strong[b-rf8gjwwtxn] {
    color: var(--text-main);
    font-weight: 900;
}

.journal-entry-page [b-rf8gjwwtxn]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.journal-entry-page [b-rf8gjwwtxn]::-webkit-scrollbar-track {
    background: rgba(224, 245, 255, 0.52);
    border-radius: 999px;
}

.journal-entry-page [b-rf8gjwwtxn]::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.34);
    border-radius: 999px;
}

@media (max-width: 1280px) {
    .context-grid[b-rf8gjwwtxn] {
        grid-template-columns: repeat(2, minmax(190px, 1fr));
    }

    .balance-grid[b-rf8gjwwtxn] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 920px) {
    .journal-entry-page[b-rf8gjwwtxn] {
        padding-inline: 14px !important;
    }

    .journal-hero[b-rf8gjwwtxn],
    .section-head[b-rf8gjwwtxn],
    .action-footer[b-rf8gjwwtxn] {
        align-items: stretch;
        flex-direction: column;
    }

    .hero-actions[b-rf8gjwwtxn],
    .section-actions[b-rf8gjwwtxn] {
        justify-content: flex-start;
    }

    .journal-table-wrap[b-rf8gjwwtxn] {
        display: none;
    }

    .mobile-line-list[b-rf8gjwwtxn] {
        display: grid;
    }

    .preview-grid[b-rf8gjwwtxn] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .journal-entry-page[b-rf8gjwwtxn] {
        padding: 10px !important;
    }

    .journal-hero[b-rf8gjwwtxn],
    .context-card[b-rf8gjwwtxn],
    .lines-card[b-rf8gjwwtxn],
    .preview-card[b-rf8gjwwtxn],
    .action-footer[b-rf8gjwwtxn],
    .balance-banner[b-rf8gjwwtxn] {
        border-radius: 22px;
        padding: 16px;
    }

    .hero-main[b-rf8gjwwtxn],
    .hero-actions[b-rf8gjwwtxn],
    .section-title-wrap[b-rf8gjwwtxn],
    .section-actions[b-rf8gjwwtxn],
    .balance-banner[b-rf8gjwwtxn],
    .action-footer[b-rf8gjwwtxn] {
        align-items: stretch;
        flex-direction: column;
    }

    .context-grid[b-rf8gjwwtxn],
    .balance-grid[b-rf8gjwwtxn],
    .mobile-amount-grid[b-rf8gjwwtxn] {
        grid-template-columns: 1fr;
    }

    .safety-note[b-rf8gjwwtxn],
    .hero-badge[b-rf8gjwwtxn],
    .soft-add-btn[b-rf8gjwwtxn],
    .post-btn[b-rf8gjwwtxn] {
        width: 100%;
    }
}
/* /Components/Pages/LeaveRequestsPage.razor.rz.scp.css */
@keyframes leaveRise-b-15m1ql45f1 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes leaveShimmer-b-15m1ql45f1 {
    100% {
        transform: translateX(100%);
    }
}

.leave-requests-page[b-15m1ql45f1] {
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --approved: #10b981;
    --approved-soft: #dcfce7;
    --pending: #f59e0b;
    --pending-soft: #fff7ed;
    --rejected: #ef476f;
    --rejected-soft: #ffe4ec;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 96px;
    color: var(--text-body);
    font-family: Inter, Manrope, "Noto Sans Myanmar", "Pyidaungsu", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.leave-requests-page.mybody[b-15m1ql45f1] {
    display: block;
    grid-template-rows: unset;
}

.leave-requests-page[b-15m1ql45f1]::-webkit-scrollbar,
.leave-table-wrap[b-15m1ql45f1]::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.leave-requests-page[b-15m1ql45f1]::-webkit-scrollbar-track,
.leave-table-wrap[b-15m1ql45f1]::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(226, 232, 240, .45);
}

.leave-requests-page[b-15m1ql45f1]::-webkit-scrollbar-thumb,
.leave-table-wrap[b-15m1ql45f1]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(100, 116, 139, .42);
}

.leave-requests-page[b-15m1ql45f1]::before,
.leave-requests-page[b-15m1ql45f1]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.leave-requests-page[b-15m1ql45f1]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.leave-requests-page[b-15m1ql45f1]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.leave-workspace-shell[b-15m1ql45f1] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: leaveRise-b-15m1ql45f1 .36s ease-out both;
}

.leave-hero[b-15m1ql45f1],
.leave-summary-card[b-15m1ql45f1],
.leave-form-card[b-15m1ql45f1],
.leave-queue-card[b-15m1ql45f1],
.leave-empty-state[b-15m1ql45f1],
.leave-mobile-card[b-15m1ql45f1],
.leave-skeleton-row[b-15m1ql45f1] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.leave-hero[b-15m1ql45f1] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border-radius: var(--radius-xl);
}

.leave-hero[b-15m1ql45f1]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 300px;
    height: 300px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(236, 72, 153, .13), transparent 68%);
    pointer-events: none;
}

.leave-hero-title[b-15m1ql45f1],
.workflow-pill[b-15m1ql45f1],
.leave-card-title[b-15m1ql45f1],
.leave-card-header[b-15m1ql45f1],
.form-helper-pill[b-15m1ql45f1],
.leave-summary-card[b-15m1ql45f1],
.leave-input-shell[b-15m1ql45f1],
.leave-preview-card[b-15m1ql45f1],
.preview-chip-row[b-15m1ql45f1],
.status-pill[b-15m1ql45f1],
.queue-tools[b-15m1ql45f1],
.requestor-cell[b-15m1ql45f1],
.leave-type-cell small[b-15m1ql45f1],
.leave-action-row[b-15m1ql45f1],
.leave-icon-action[b-15m1ql45f1],
.mobile-request-top[b-15m1ql45f1],
.mobile-leave-details small[b-15m1ql45f1] {
    display: flex;
    align-items: center;
}

.leave-hero-title[b-15m1ql45f1],
.leave-card-title[b-15m1ql45f1],
.requestor-cell[b-15m1ql45f1] {
    gap: 16px;
}

.leave-card-header[b-15m1ql45f1],
.mobile-request-top[b-15m1ql45f1] {
    justify-content: space-between;
    gap: 16px;
}

.workflow-pill[b-15m1ql45f1],
.form-helper-pill[b-15m1ql45f1],
.status-pill[b-15m1ql45f1],
.leave-icon-action[b-15m1ql45f1] {
    justify-content: center;
    gap: 8px;
}

.leave-hero-icon[b-15m1ql45f1],
.leave-card-title > span[b-15m1ql45f1],
.leave-summary-card > span[b-15m1ql45f1],
.preview-icon[b-15m1ql45f1],
.requestor-avatar[b-15m1ql45f1],
.leave-empty-state > span[b-15m1ql45f1] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.leave-hero-icon[b-15m1ql45f1],
.leave-card-title > span[b-15m1ql45f1] {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    color: var(--primary);
    background: linear-gradient(145deg, #e0f5ff, #f3e8ff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    font-size: 1.25rem;
}

.leave-hero-title h1[b-15m1ql45f1],
.leave-card-title h2[b-15m1ql45f1],
.leave-empty-state h2[b-15m1ql45f1] {
    margin: 0;
    color: var(--text-main);
    font-weight: 800;
    letter-spacing: -.03em;
}

.leave-hero-title h1[b-15m1ql45f1] {
    font-size: clamp(1.75rem, 1.4vw + 1.25rem, 2.18rem);
}

.leave-hero-title p[b-15m1ql45f1],
.leave-card-title p[b-15m1ql45f1],
.leave-empty-state p[b-15m1ql45f1] {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .92rem;
}

.workflow-pill[b-15m1ql45f1],
.form-helper-pill[b-15m1ql45f1],
.request-count-pill[b-15m1ql45f1] {
    position: relative;
    z-index: 1;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(14, 165, 233, .2);
    border-radius: 999px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: .8rem;
    font-weight: 850;
    white-space: nowrap;
}

.form-helper-pill[b-15m1ql45f1] {
    color: #b45309;
    border-color: rgba(245, 158, 11, .18);
    background: var(--pending-soft);
}

.leave-summary-grid[b-15m1ql45f1] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.leave-summary-card[b-15m1ql45f1] {
    gap: 14px;
    min-height: 116px;
    padding: 18px;
    border-radius: var(--radius-lg);
}

.leave-summary-card > span[b-15m1ql45f1] {
    width: 48px;
    height: 48px;
    border-radius: 17px;
    color: var(--primary);
    background: var(--primary-soft);
}

.leave-summary-card.pending > span[b-15m1ql45f1] {
    color: var(--pending);
    background: var(--pending-soft);
}

.leave-summary-card.approved > span[b-15m1ql45f1] {
    color: var(--approved);
    background: var(--approved-soft);
}

.leave-summary-card.rejected > span[b-15m1ql45f1] {
    color: var(--rejected);
    background: var(--rejected-soft);
}

.leave-summary-card.violet > span[b-15m1ql45f1] {
    color: var(--violet);
    background: var(--violet-soft);
}

.leave-summary-card p[b-15m1ql45f1],
.leave-summary-card small[b-15m1ql45f1],
.leave-field span[b-15m1ql45f1],
.leave-field small[b-15m1ql45f1],
.leave-type-cell small[b-15m1ql45f1],
.mobile-leave-details small[b-15m1ql45f1] {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 750;
}

.leave-summary-card strong[b-15m1ql45f1] {
    display: block;
    color: var(--text-main);
    font-size: clamp(1.15rem, 1vw + .8rem, 1.55rem);
    font-weight: 850;
    letter-spacing: -.03em;
}

.leave-summary-card.skeleton[b-15m1ql45f1],
.leave-skeleton-row[b-15m1ql45f1] {
    position: relative;
    overflow: hidden;
}

.leave-summary-card.skeleton[b-15m1ql45f1]::after,
.leave-skeleton-row[b-15m1ql45f1]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
    animation: leaveShimmer-b-15m1ql45f1 1.4s infinite;
}

.leave-form-card[b-15m1ql45f1],
.leave-queue-card[b-15m1ql45f1] {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: var(--radius-xl);
}

.leave-form-layout[b-15m1ql45f1] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: stretch;
}

.leave-fields-grid[b-15m1ql45f1] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.leave-field[b-15m1ql45f1] {
    display: grid;
    gap: 7px;
}

.leave-field span[b-15m1ql45f1] {
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.leave-field em[b-15m1ql45f1] {
    color: var(--rejected);
    font-style: normal;
}

.reason-field[b-15m1ql45f1] {
    grid-column: span 5;
}

.leave-input-shell[b-15m1ql45f1] {
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: rgba(255, 255, 255, .84);
    transition: border .18s ease, box-shadow .18s ease, background .18s ease;
}

.leave-input-shell:focus-within[b-15m1ql45f1] {
    border-color: rgba(14, 165, 233, .42);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .1);
}

.leave-input-shell.is-invalid[b-15m1ql45f1] {
    border-color: rgba(239, 71, 111, .5);
    box-shadow: 0 0 0 4px rgba(239, 71, 111, .08);
}

.leave-input-shell > i[b-15m1ql45f1] {
    color: var(--primary);
}

.leave-input[b-15m1ql45f1] {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border: 0;
    outline: 0;
    color: var(--text-main);
    background: transparent;
    box-shadow: none;
    font-size: .92rem;
    font-weight: 750;
}

.textarea-shell[b-15m1ql45f1] {
    align-items: flex-start;
    padding-top: 13px;
}

.leave-textarea[b-15m1ql45f1] {
    min-height: 92px;
    resize: vertical;
}

.field-warning[b-15m1ql45f1] {
    color: #be123c !important;
}

.leave-preview-card[b-15m1ql45f1] {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 20px;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(145deg, rgba(224, 245, 255, .78), rgba(255, 255, 255, .72)),
        var(--surface-soft);
    text-align: center;
}

.preview-icon[b-15m1ql45f1] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: var(--primary);
    background: rgba(255, 255, 255, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    font-size: 1.3rem;
}

.leave-preview-card p[b-15m1ql45f1],
.leave-preview-card small[b-15m1ql45f1] {
    margin: 0;
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 750;
}

.leave-preview-card strong[b-15m1ql45f1] {
    color: var(--text-main);
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: -.04em;
}

.preview-chip-row[b-15m1ql45f1] {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.save-leave-button[b-15m1ql45f1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 46px;
    margin-top: 8px;
    border: 0;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 14px 28px rgba(14, 165, 233, .24);
    font-size: .92rem;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease;
}

.save-leave-button:hover[b-15m1ql45f1] {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(139, 92, 246, .26);
}

.save-leave-button:focus-visible[b-15m1ql45f1],
.leave-icon-action:focus-visible[b-15m1ql45f1],
.leave-input:focus-visible[b-15m1ql45f1] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 3px;
}

.queue-header[b-15m1ql45f1] {
    align-items: flex-start;
}

.queue-tools[b-15m1ql45f1] {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.queue-filter[b-15m1ql45f1] {
    display: grid;
    gap: 5px;
    min-width: 210px;
}

.queue-filter span[b-15m1ql45f1] {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.queue-filter .leave-input[b-15m1ql45f1] {
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: rgba(255, 255, 255, .82);
}

.leave-table-wrap[b-15m1ql45f1] {
    overflow-x: auto;
    border: 1px solid rgba(120, 170, 210, .14);
    border-radius: 24px;
    background: rgba(255, 255, 255, .54);
}

.leave-table[b-15m1ql45f1] {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

.leave-table th[b-15m1ql45f1] {
    padding: 15px 18px;
    color: var(--text-muted);
    background: rgba(224, 245, 255, .52);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.leave-table td[b-15m1ql45f1] {
    padding: 16px 18px;
    border-top: 1px solid rgba(120, 170, 210, .13);
    color: var(--text-body);
    vertical-align: middle;
}

.leave-table tbody tr[b-15m1ql45f1] {
    transition: background .18s ease;
}

.leave-table tbody tr:hover[b-15m1ql45f1] {
    background: rgba(14, 165, 233, .045);
}

.requestor-avatar[b-15m1ql45f1] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: #fff;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .45), transparent 32%),
        linear-gradient(135deg, #0ea5e9, #8b5cf6);
    font-size: .85rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.requestor-cell strong[b-15m1ql45f1] {
    display: block;
    color: var(--text-main);
    font-size: .96rem;
    font-weight: 850;
}

.requestor-cell small[b-15m1ql45f1] {
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 750;
}

.leave-type-cell[b-15m1ql45f1] {
    display: grid;
    gap: 5px;
}

.leave-type-cell small[b-15m1ql45f1],
.mobile-leave-details small[b-15m1ql45f1] {
    gap: 7px;
}

.leave-type-cell em[b-15m1ql45f1],
.mobile-leave-details em[b-15m1ql45f1] {
    color: var(--primary-dark);
    font-size: .76rem;
    font-style: normal;
    font-weight: 850;
}

.leave-type-chip[b-15m1ql45f1],
.status-pill[b-15m1ql45f1] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.leave-type-chip.type-sick[b-15m1ql45f1],
.leave-type-chip.type-other[b-15m1ql45f1] {
    color: var(--primary-dark);
    border-color: rgba(14, 165, 233, .18);
    background: var(--primary-soft);
}

.leave-type-chip.type-casual[b-15m1ql45f1],
.leave-type-chip.type-annual[b-15m1ql45f1] {
    color: #6d28d9;
    border-color: rgba(139, 92, 246, .18);
    background: var(--violet-soft);
}

.leave-type-chip.type-emergency[b-15m1ql45f1] {
    color: #be123c;
    border-color: rgba(239, 71, 111, .18);
    background: var(--rejected-soft);
}

.status-pill i:first-child[b-15m1ql45f1] {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.status-pill.approved[b-15m1ql45f1] {
    color: #047857;
    border-color: rgba(16, 185, 129, .18);
    background: var(--approved-soft);
}

.status-pill.pending[b-15m1ql45f1] {
    color: #b45309;
    border-color: rgba(245, 158, 11, .18);
    background: var(--pending-soft);
}

.status-pill.rejected[b-15m1ql45f1] {
    color: #be123c;
    border-color: rgba(239, 71, 111, .18);
    background: var(--rejected-soft);
}

.status-pill.muted[b-15m1ql45f1] {
    color: #64748b;
    border-color: rgba(100, 116, 139, .18);
    background: rgba(241, 245, 249, .86);
}

.reason-text[b-15m1ql45f1] {
    display: -webkit-box;
    max-width: 360px;
    margin: 0;
    overflow: hidden;
    color: var(--text-body);
    font-size: .88rem;
    font-weight: 650;
    line-height: 1.45;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.reason-text.is-empty[b-15m1ql45f1] {
    color: var(--text-muted);
    font-style: italic;
}

.leave-action-row[b-15m1ql45f1] {
    justify-content: flex-end;
    gap: 8px;
}

.leave-icon-action[b-15m1ql45f1] {
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: rgba(255, 255, 255, .86);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.leave-icon-action:hover[b-15m1ql45f1] {
    transform: translateY(-1px);
}

.action-edit[b-15m1ql45f1] {
    color: var(--primary-dark);
    border-color: rgba(14, 165, 233, .18);
    background: var(--primary-soft);
}

.action-approve[b-15m1ql45f1] {
    color: #047857;
    border-color: rgba(16, 185, 129, .18);
    background: var(--approved-soft);
}

.action-reject[b-15m1ql45f1] {
    color: #be123c;
    border-color: rgba(239, 71, 111, .18);
    background: var(--rejected-soft);
}

.no-actions-text[b-15m1ql45f1] {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 800;
}

.leave-empty-state[b-15m1ql45f1] {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    min-height: 260px;
    padding: 34px;
    border-radius: 24px;
    text-align: center;
}

.leave-empty-state > span[b-15m1ql45f1] {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 1.45rem;
}

.leave-skeleton-list[b-15m1ql45f1] {
    display: grid;
    gap: 10px;
}

.leave-skeleton-row[b-15m1ql45f1] {
    min-height: 78px;
    border-radius: 22px;
}

.leave-mobile-list[b-15m1ql45f1] {
    display: none;
    gap: 12px;
}

.leave-mobile-card[b-15m1ql45f1] {
    display: grid;
    gap: 13px;
    padding: 17px;
    border-radius: var(--radius-lg);
}

.mobile-leave-details[b-15m1ql45f1] {
    display: grid;
    gap: 6px;
    padding: 12px;
    border: 1px solid rgba(120, 170, 210, .14);
    border-radius: 18px;
    background: rgba(248, 252, 255, .7);
}

.mobile-actions[b-15m1ql45f1] {
    justify-content: flex-start;
}

@media (max-width: 1420px) {
    .leave-summary-grid[b-15m1ql45f1] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .leave-form-layout[b-15m1ql45f1] {
        grid-template-columns: 1fr;
    }

    .leave-preview-card[b-15m1ql45f1] {
        justify-items: start;
        text-align: left;
    }
}

@media (max-width: 1180px) {
    .leave-fields-grid[b-15m1ql45f1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reason-field[b-15m1ql45f1] {
        grid-column: span 2;
    }
}

@media (max-width: 860px) {
    .leave-requests-page[b-15m1ql45f1] {
        padding: 16px 12px 72px;
    }

    .leave-workspace-shell[b-15m1ql45f1] {
        padding: 14px;
        border-radius: 26px;
    }

    .leave-hero[b-15m1ql45f1],
    .leave-card-header[b-15m1ql45f1],
    .queue-tools[b-15m1ql45f1],
    .mobile-request-top[b-15m1ql45f1] {
        align-items: flex-start;
        flex-direction: column;
    }

    .workflow-pill[b-15m1ql45f1],
    .form-helper-pill[b-15m1ql45f1],
    .queue-filter[b-15m1ql45f1],
    .request-count-pill[b-15m1ql45f1],
    .save-leave-button[b-15m1ql45f1] {
        width: 100%;
    }

    .leave-summary-grid[b-15m1ql45f1],
    .leave-fields-grid[b-15m1ql45f1] {
        grid-template-columns: 1fr;
    }

    .reason-field[b-15m1ql45f1] {
        grid-column: auto;
    }

    .leave-table-wrap[b-15m1ql45f1] {
        display: none;
    }

    .leave-mobile-list[b-15m1ql45f1] {
        display: grid;
    }

    .leave-form-card[b-15m1ql45f1],
    .leave-queue-card[b-15m1ql45f1] {
        padding: 18px;
        border-radius: 24px;
    }
}

@media (max-width: 520px) {
    .leave-hero-title[b-15m1ql45f1],
    .leave-card-title[b-15m1ql45f1],
    .requestor-cell[b-15m1ql45f1] {
        align-items: flex-start;
        flex-direction: column;
    }

    .leave-action-row[b-15m1ql45f1] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/LoginPage.razor.rz.scp.css */
/* Eye-Friendly Red Gradient Background */
.login-wrapper[b-pss0m4ijff] {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 20px;
}

.login-card[b-pss0m4ijff] {
    max-width: 400px;
    width: 100%;
    background: rgba(255, 255, 255, 0.85); /* Glass effect */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 24px;
    padding: 40px 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.logo-container[b-pss0m4ijff] {
    width: 85px;
    height: 85px;
    background: white;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.logo-img[b-pss0m4ijff] {
    width: 65px;
    height: auto;
}

.business-title[b-pss0m4ijff] {
    font-size: 26px;
    font-weight: 800;
    color: #4a3321;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.input-group-custom[b-pss0m4ijff] {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
}

.field-label[b-pss0m4ijff] {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-bottom: 8px;
    margin-left: 5px;
}

.modern-input[b-pss0m4ijff] {
    background: white;
    border: 2px solid #eee;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.2s ease;
    outline: none;
}

    .modern-input:focus[b-pss0m4ijff] {
        border-color: #a17047;
        box-shadow: 0 0 0 4px rgba(161, 112, 71, 0.1);
    }

.login-btn[b-pss0m4ijff] {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    background: var(--brand-main); /* Primary Brand Color */
    color: white;
    border: none;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .login-btn:hover[b-pss0m4ijff] {
        background: var(--brand-dark);
        transform: translateY(-2px);
        box-shadow: 0 8px 15px rgba(161, 112, 71, 0.3);
    }

    .login-btn:active[b-pss0m4ijff] {
        transform: translateY(0);
    }

    .login-btn:disabled[b-pss0m4ijff] {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
    }

/* For small mobile devices */
@media (max-width: 400px) {
    .login-card[b-pss0m4ijff] {
        padding: 30px 20px;
    }
}

/* Floating Balloons */
.balloon[b-pss0m4ijff] {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    z-index: 0;
    opacity: 0.4;
    animation: float-b-pss0m4ijff 8s infinite ease-in-out;
}

.balloon-1[b-pss0m4ijff] {
    width: 300px;
    height: 300px;
    background: var(--brand-main); /* Soft coral red */
    top: -50px;
    left: -50px;
}

.balloon-2[b-pss0m4ijff] {
    width: 250px;
    height: 250px;
    background: var(--brand-dark); /* Vibrant but soft red */
    bottom: -30px;
    right: -30px;
    animation-delay: -4s;
}

@keyframes float-b-pss0m4ijff {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(30px, 50px);
    }
}

/* Card Improvements */
.login-card[b-pss0m4ijff] {
    position: relative;
    z-index: 1; /* Stay above balloons */
    max-width: 380px;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 28px;
    padding: 45px 35px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
}

/* Button & Input refinements for "Eye Comfort" */
.modern-input[b-pss0m4ijff] {
    background: #fdfdfd;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 12px 16px;
    transition: border-color 0.3s;
}

    .modern-input:focus[b-pss0m4ijff] {
        border-color: #d32f2f;
        outline: none;
    }
/* /Components/Pages/MarksEntryPage.razor.rz.scp.css */
@keyframes marksRise-b-jqtwpdppgk {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes marksSpin-b-jqtwpdppgk {
    to {
        transform: rotate(360deg);
    }
}

@keyframes marksShimmer-b-jqtwpdppgk {
    100% {
        transform: translateX(100%);
    }
}

.marks-entry-page[b-jqtwpdppgk] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --grade: #ec4899;
    --grade-soft: #fce7f3;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    display: block;
    min-height: 100%;
    overflow-x: hidden;
    padding: 28px 32px 96px;
    color: var(--text-main);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    background:
        radial-gradient(circle at 8% 8%, rgba(14, 165, 233, .18), transparent 34%),
        radial-gradient(circle at 88% 6%, rgba(139, 92, 246, .16), transparent 30%),
        radial-gradient(circle at 92% 92%, rgba(236, 72, 153, .12), transparent 32%),
        linear-gradient(135deg, #eef8ff 0%, #f8fbff 46%, #f7f0ff 100%);
}

.marks-entry-page.mybody[b-jqtwpdppgk] {
    grid-template-rows: unset;
}

.marks-entry-page[b-jqtwpdppgk]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .46) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .18;
}

.marks-shell[b-jqtwpdppgk] {
    position: relative;
    z-index: 1;
    width: min(100%, 1600px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
    animation: marksRise-b-jqtwpdppgk .42s ease both;
}

.marks-hero[b-jqtwpdppgk],
.marks-context-card[b-jqtwpdppgk],
.component-context-card[b-jqtwpdppgk],
.marks-summary-card[b-jqtwpdppgk],
.marks-health-banner[b-jqtwpdppgk],
.grade-legend-card[b-jqtwpdppgk],
.marks-sheet-card[b-jqtwpdppgk],
.marks-empty-state[b-jqtwpdppgk],
.marks-loading-state[b-jqtwpdppgk] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.marks-hero[b-jqtwpdppgk] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
}

.marks-hero[b-jqtwpdppgk]::after {
    content: "";
    position: absolute;
    inset: auto -8% -90% 52%;
    height: 180px;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(8px);
    background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(236, 72, 153, .16));
}

.marks-hero-copy[b-jqtwpdppgk],
.marks-card-header[b-jqtwpdppgk],
.marks-card-title[b-jqtwpdppgk],
.marks-sheet-actions[b-jqtwpdppgk],
.component-context-main[b-jqtwpdppgk],
.component-context-chips[b-jqtwpdppgk],
.grade-legend-card[b-jqtwpdppgk],
.student-cell[b-jqtwpdppgk],
.score-field[b-jqtwpdppgk],
.comment-field[b-jqtwpdppgk],
.mobile-student-top[b-jqtwpdppgk],
.marks-button[b-jqtwpdppgk] {
    display: flex;
    align-items: center;
}

.marks-hero-copy[b-jqtwpdppgk],
.marks-card-title[b-jqtwpdppgk],
.component-context-main[b-jqtwpdppgk],
.student-cell[b-jqtwpdppgk] {
    gap: 14px;
}

.marks-card-header[b-jqtwpdppgk] {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.marks-sheet-actions[b-jqtwpdppgk],
.component-context-chips[b-jqtwpdppgk],
.grade-legend-card[b-jqtwpdppgk] {
    flex-wrap: wrap;
    gap: 10px;
}

.marks-hero-icon[b-jqtwpdppgk],
.marks-card-title > span[b-jqtwpdppgk],
.component-context-icon[b-jqtwpdppgk],
.summary-icon[b-jqtwpdppgk],
.student-avatar[b-jqtwpdppgk],
.marks-empty-state > span[b-jqtwpdppgk] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.marks-hero-icon[b-jqtwpdppgk] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: #fff;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6 48%, #ec4899);
    box-shadow: 0 18px 34px rgba(236, 72, 153, .22);
}

.marks-hero h1[b-jqtwpdppgk],
.marks-card-title h2[b-jqtwpdppgk],
.component-context-card h2[b-jqtwpdppgk],
.marks-health-banner h2[b-jqtwpdppgk],
.marks-empty-state h2[b-jqtwpdppgk],
.marks-loading-state h2[b-jqtwpdppgk] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.035em;
}

.marks-hero h1[b-jqtwpdppgk] {
    font-size: clamp(1.7rem, 2.4vw, 2.25rem);
}

.marks-card-title h2[b-jqtwpdppgk],
.component-context-card h2[b-jqtwpdppgk],
.marks-health-banner h2[b-jqtwpdppgk],
.marks-empty-state h2[b-jqtwpdppgk],
.marks-loading-state h2[b-jqtwpdppgk] {
    font-size: 1.1rem;
}

.marks-hero p[b-jqtwpdppgk],
.marks-card-title p[b-jqtwpdppgk],
.component-context-card p[b-jqtwpdppgk],
.marks-health-banner p[b-jqtwpdppgk],
.marks-empty-state p[b-jqtwpdppgk],
.marks-loading-state p[b-jqtwpdppgk] {
    margin: 0;
    color: var(--text-body);
}

.marks-button[b-jqtwpdppgk] {
    border: 0;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    border-radius: 16px;
    padding: 0 18px;
    font-size: .9rem;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.marks-button:not(:disabled):hover[b-jqtwpdppgk] {
    transform: translateY(-1px);
}

.marks-button:focus-visible[b-jqtwpdppgk],
.marks-select:focus[b-jqtwpdppgk],
.marks-score-input:focus[b-jqtwpdppgk],
.marks-comment-input:focus[b-jqtwpdppgk] {
    outline: 3px solid rgba(14, 165, 233, .18);
    outline-offset: 2px;
}

.marks-button-primary[b-jqtwpdppgk] {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6 52%, #ec4899);
    box-shadow: 0 16px 28px rgba(14, 165, 233, .22);
}

.marks-button-primary:not(:disabled):hover[b-jqtwpdppgk] {
    box-shadow: 0 20px 36px rgba(236, 72, 153, .22);
}

.marks-button-soft[b-jqtwpdppgk] {
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .24);
    background: linear-gradient(135deg, rgba(224, 245, 255, .9), rgba(252, 231, 243, .74));
    box-shadow: var(--shadow-card);
}

.marks-button:disabled[b-jqtwpdppgk] {
    cursor: not-allowed;
    opacity: .55;
    box-shadow: none;
}

.marks-context-card[b-jqtwpdppgk],
.component-context-card[b-jqtwpdppgk],
.marks-sheet-card[b-jqtwpdppgk] {
    padding: 20px 22px;
    border-radius: var(--radius-lg);
}

.marks-card-title > span[b-jqtwpdppgk],
.component-context-icon[b-jqtwpdppgk] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, var(--primary-soft), var(--violet-soft));
}

.marks-filter-grid[b-jqtwpdppgk] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.25fr 1.25fr;
    gap: 14px;
}

.marks-field[b-jqtwpdppgk] {
    display: grid;
    gap: 8px;
}

.marks-field > span[b-jqtwpdppgk] {
    color: var(--text-body);
    font-size: .78rem;
    font-weight: 850;
}

.marks-field > span i[b-jqtwpdppgk] {
    margin-right: 6px;
    color: var(--primary);
}

.marks-select[b-jqtwpdppgk],
.marks-score-input[b-jqtwpdppgk],
.marks-comment-input[b-jqtwpdppgk] {
    min-height: 46px;
    border-radius: 16px;
    border: 1px solid var(--border-soft);
    background-color: rgba(255, 255, 255, .9);
    color: var(--text-main);
    font-size: .92rem;
    font-weight: 750;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}

.marks-select:focus[b-jqtwpdppgk],
.marks-score-input:focus[b-jqtwpdppgk],
.marks-comment-input:focus[b-jqtwpdppgk] {
    border-color: rgba(14, 165, 233, .5);
    box-shadow: 0 0 0 .22rem rgba(14, 165, 233, .1), inset 0 1px 0 rgba(255, 255, 255, .8);
}

.component-context-card[b-jqtwpdppgk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.component-context-icon[b-jqtwpdppgk] {
    color: #fff;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

.component-context-chips span[b-jqtwpdppgk],
.marks-helper-chip[b-jqtwpdppgk],
.legend-title[b-jqtwpdppgk],
.grade-chip[b-jqtwpdppgk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.component-context-chips span[b-jqtwpdppgk],
.marks-helper-chip[b-jqtwpdppgk] {
    color: var(--text-body);
    background: rgba(255, 255, 255, .74);
    border: 1px solid var(--border-soft);
}

.marks-summary-grid[b-jqtwpdppgk] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.marks-summary-card[b-jqtwpdppgk] {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 14px;
    min-height: 136px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
}

.marks-summary-card[b-jqtwpdppgk]::after {
    content: "";
    position: absolute;
    right: -36px;
    bottom: -52px;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: rgba(14, 165, 233, .09);
}

.summary-icon[b-jqtwpdppgk] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 14px 24px rgba(14, 165, 233, .18);
}

.marks-summary-card.entered .summary-icon[b-jqtwpdppgk],
.marks-summary-card.average .summary-icon[b-jqtwpdppgk] {
    background: linear-gradient(135deg, #10b981, #0ea5e9);
}

.marks-summary-card.review .summary-icon[b-jqtwpdppgk] {
    background: linear-gradient(135deg, #f59e0b, #ec4899);
}

.marks-summary-card.review.danger .summary-icon[b-jqtwpdppgk] {
    background: linear-gradient(135deg, #ef476f, #ec4899);
}

.marks-summary-card.weight .summary-icon[b-jqtwpdppgk] {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
}

.marks-summary-card small[b-jqtwpdppgk] {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .045em;
}

.marks-summary-card strong[b-jqtwpdppgk] {
    display: block;
    margin: 4px 0 2px;
    color: var(--text-main);
    font-size: clamp(1.28rem, 1.9vw, 1.8rem);
    font-weight: 900;
    line-height: 1.12;
}

.marks-summary-card p[b-jqtwpdppgk] {
    margin: 0;
    color: var(--text-body);
    font-size: .82rem;
}

.marks-summary-card.skeleton span[b-jqtwpdppgk],
.marks-summary-card.skeleton strong[b-jqtwpdppgk],
.marks-summary-card.skeleton small[b-jqtwpdppgk] {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 999px;
    background: rgba(226, 240, 250, .86);
}

.marks-summary-card.skeleton span[b-jqtwpdppgk]::after,
.marks-summary-card.skeleton strong[b-jqtwpdppgk]::after,
.marks-summary-card.skeleton small[b-jqtwpdppgk]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .82), transparent);
    animation: marksShimmer-b-jqtwpdppgk 1.2s infinite;
}

.marks-summary-card.skeleton span[b-jqtwpdppgk] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
}

.marks-summary-card.skeleton strong[b-jqtwpdppgk] {
    width: 54%;
    height: 28px;
}

.marks-summary-card.skeleton small[b-jqtwpdppgk] {
    width: 72%;
    height: 12px;
}

.marks-health-banner[b-jqtwpdppgk] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-md);
}

.marks-health-banner > span[b-jqtwpdppgk] {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    font-size: 1.1rem;
}

.marks-health-banner.success[b-jqtwpdppgk] {
    border-color: rgba(16, 185, 129, .25);
    background: linear-gradient(135deg, rgba(220, 252, 231, .9), rgba(255, 255, 255, .82));
}

.marks-health-banner.success > span[b-jqtwpdppgk] {
    color: #047857;
    background: var(--success-soft);
}

.marks-health-banner.warning[b-jqtwpdppgk] {
    border-color: rgba(245, 158, 11, .24);
    background: linear-gradient(135deg, rgba(255, 247, 237, .94), rgba(255, 255, 255, .84));
}

.marks-health-banner.warning > span[b-jqtwpdppgk] {
    color: #b45309;
    background: var(--warning-soft);
}

.marks-health-banner.danger[b-jqtwpdppgk] {
    border-color: rgba(239, 71, 111, .24);
    background: linear-gradient(135deg, rgba(255, 228, 236, .94), rgba(255, 255, 255, .84));
}

.marks-health-banner.danger > span[b-jqtwpdppgk] {
    color: #be123c;
    background: var(--danger-soft);
}

.marks-health-banner.neutral > span[b-jqtwpdppgk] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.grade-legend-card[b-jqtwpdppgk] {
    padding: 14px 16px;
    border-radius: var(--radius-md);
}

.legend-title[b-jqtwpdppgk] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.grade-chip[b-jqtwpdppgk],
.letter-badge[b-jqtwpdppgk] {
    border-radius: 999px;
    font-weight: 900;
}

.grade-chip[b-jqtwpdppgk] {
    min-height: 32px;
}

.grade-a[b-jqtwpdppgk] {
    color: #047857;
    background: var(--success-soft);
}

.grade-b[b-jqtwpdppgk] {
    color: #0369a1;
    background: var(--primary-soft);
}

.grade-c[b-jqtwpdppgk] {
    color: #6d28d9;
    background: var(--violet-soft);
}

.grade-d[b-jqtwpdppgk] {
    color: #b45309;
    background: var(--warning-soft);
}

.grade-f[b-jqtwpdppgk] {
    color: #be123c;
    background: var(--danger-soft);
}

.marks-sheet-card[b-jqtwpdppgk] {
    overflow: hidden;
}

.marks-sheet-header[b-jqtwpdppgk] {
    margin-bottom: 16px;
}

.marks-table-wrap[b-jqtwpdppgk] {
    overflow: auto;
    max-height: min(68vh, 720px);
    border-radius: 20px;
}

.marks-table[b-jqtwpdppgk] {
    width: 100%;
    min-width: 920px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.marks-table thead th[b-jqtwpdppgk] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 14px 16px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .055em;
    background: linear-gradient(135deg, rgba(224, 245, 255, .94), rgba(252, 231, 243, .86));
}

.marks-table thead th:first-child[b-jqtwpdppgk] {
    border-top-left-radius: 18px;
    border-bottom-left-radius: 18px;
}

.marks-table thead th:last-child[b-jqtwpdppgk] {
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
}

.marks-table tbody tr[b-jqtwpdppgk] {
    transition: background .18s ease;
}

.marks-table tbody tr:hover[b-jqtwpdppgk] {
    background: rgba(14, 165, 233, .04);
}

.marks-table tbody tr.row-invalid[b-jqtwpdppgk] {
    background: rgba(255, 228, 236, .34);
}

.marks-table tbody tr.row-review[b-jqtwpdppgk] {
    background: rgba(255, 247, 237, .34);
}

.marks-table tbody td[b-jqtwpdppgk] {
    min-height: 78px;
    padding: 16px;
    border-bottom: 1px solid rgba(120, 170, 210, .16);
    vertical-align: middle;
}

.student-column[b-jqtwpdppgk] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 280px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
}

.student-avatar[b-jqtwpdppgk] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: #fff;
    font-size: .84rem;
    font-weight: 900;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 12px 22px rgba(14, 165, 233, .16);
}

.student-cell strong[b-jqtwpdppgk] {
    display: block;
    color: var(--text-main);
    font-size: .98rem;
    font-weight: 900;
}

.student-cell small[b-jqtwpdppgk] {
    display: block;
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: .78rem;
}

.student-cell em[b-jqtwpdppgk] {
    display: inline-flex;
    margin-top: 3px;
    color: var(--primary-dark);
    font-size: .73rem;
    font-style: normal;
    font-weight: 850;
}

.score-column[b-jqtwpdppgk] {
    width: 180px;
}

.score-field[b-jqtwpdppgk] {
    justify-content: flex-end;
    gap: 9px;
}

.marks-score-input[b-jqtwpdppgk] {
    width: 128px;
    text-align: center;
    font-size: 1rem;
    font-weight: 900;
}

.score-field > span[b-jqtwpdppgk] {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 850;
}

.marks-score-input.score-valid[b-jqtwpdppgk] {
    border-color: rgba(16, 185, 129, .32);
}

.marks-score-input.score-review[b-jqtwpdppgk] {
    border-color: rgba(245, 158, 11, .42);
    background: rgba(255, 247, 237, .92);
}

.marks-score-input.score-invalid[b-jqtwpdppgk] {
    border-color: rgba(239, 71, 111, .55);
    background: rgba(255, 228, 236, .94);
}

.letter-column[b-jqtwpdppgk] {
    width: 140px;
}

.letter-badge[b-jqtwpdppgk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 38px;
    padding: 0 14px;
    font-size: .95rem;
}

.letter-column small[b-jqtwpdppgk] {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 800;
}

.comment-field[b-jqtwpdppgk] {
    position: relative;
}

.comment-field i[b-jqtwpdppgk] {
    position: absolute;
    left: 15px;
    z-index: 1;
    color: var(--text-muted);
}

.marks-comment-input[b-jqtwpdppgk] {
    padding-left: 42px;
}

.marks-mobile-list[b-jqtwpdppgk] {
    display: none;
}

.marks-mobile-card[b-jqtwpdppgk] {
    display: grid;
    gap: 14px;
    padding: 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow-card);
}

.marks-mobile-card.row-review[b-jqtwpdppgk] {
    background: linear-gradient(135deg, rgba(255, 247, 237, .84), rgba(255, 255, 255, .78));
}

.marks-mobile-card.row-invalid[b-jqtwpdppgk] {
    background: linear-gradient(135deg, rgba(255, 228, 236, .86), rgba(255, 255, 255, .78));
}

.mobile-student-top[b-jqtwpdppgk] {
    justify-content: space-between;
    gap: 12px;
}

.mobile-marks-grid[b-jqtwpdppgk] {
    display: grid;
    grid-template-columns: minmax(140px, .4fr) minmax(0, 1fr);
    gap: 12px;
}

.marks-empty-state[b-jqtwpdppgk],
.marks-loading-state[b-jqtwpdppgk] {
    display: grid;
    place-items: center;
    text-align: center;
    gap: 12px;
    min-height: 300px;
    border-radius: var(--radius-lg);
    background: rgba(248, 252, 255, .72);
    border-style: dashed;
    box-shadow: none;
}

.marks-empty-state > span[b-jqtwpdppgk] {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    color: var(--primary-dark);
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--primary-soft), var(--grade-soft));
}

.marks-loading-state > span[b-jqtwpdppgk] {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(14, 165, 233, .16);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: marksSpin-b-jqtwpdppgk .8s linear infinite;
}

@media (max-width: 1280px) {
    .marks-filter-grid[b-jqtwpdppgk] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .subject-field[b-jqtwpdppgk],
    .component-field[b-jqtwpdppgk] {
        grid-column: span 1;
    }

    .marks-summary-grid[b-jqtwpdppgk] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .marks-entry-page[b-jqtwpdppgk] {
        padding: 22px 18px 80px;
    }

    .marks-filter-grid[b-jqtwpdppgk],
    .marks-summary-grid[b-jqtwpdppgk] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .component-context-card[b-jqtwpdppgk],
    .marks-card-header[b-jqtwpdppgk] {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .marks-entry-page[b-jqtwpdppgk] {
        padding: 18px 14px 72px;
    }

    .marks-hero[b-jqtwpdppgk],
    .marks-sheet-actions[b-jqtwpdppgk] {
        align-items: stretch;
        flex-direction: column;
    }

    .marks-button[b-jqtwpdppgk] {
        width: 100%;
    }

    .marks-filter-grid[b-jqtwpdppgk],
    .marks-summary-grid[b-jqtwpdppgk],
    .mobile-marks-grid[b-jqtwpdppgk] {
        grid-template-columns: 1fr;
    }

    .marks-table-wrap[b-jqtwpdppgk] {
        display: none;
    }

    .marks-mobile-list[b-jqtwpdppgk] {
        display: grid;
        gap: 12px;
    }

    .mobile-student-top[b-jqtwpdppgk] {
        align-items: flex-start;
        flex-direction: column;
    }

    .score-field[b-jqtwpdppgk] {
        justify-content: stretch;
    }

    .marks-score-input[b-jqtwpdppgk] {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .marks-hero[b-jqtwpdppgk],
    .marks-context-card[b-jqtwpdppgk],
    .component-context-card[b-jqtwpdppgk],
    .marks-sheet-card[b-jqtwpdppgk] {
        padding: 18px;
        border-radius: 24px;
    }

    .marks-hero-copy[b-jqtwpdppgk],
    .student-cell[b-jqtwpdppgk] {
        align-items: flex-start;
    }

    .marks-hero h1[b-jqtwpdppgk] {
        font-size: 1.55rem;
    }

    .marks-hero-icon[b-jqtwpdppgk] {
        width: 52px;
        height: 52px;
    }
}
/* /Components/Pages/OperationalReportsPage.razor.rz.scp.css */
@keyframes dailyOpsRise-b-a5lha4j7hr {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.daily-ops-page[b-a5lha4j7hr] {
    --surface: rgba(255, 255, 255, .88);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --present: #10b981;
    --present-soft: #dcfce7;
    --absent: #ef476f;
    --absent-soft: #ffe4ec;
    --late: #f59e0b;
    --late-soft: #fff7ed;
    --excused: #8b5cf6;
    --excused-soft: #ede9fe;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    display: block;
    min-height: 100%;
    overflow-x: hidden;
    padding: 28px 32px 96px;
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    background:
        radial-gradient(circle at 8% 8%, rgba(14, 165, 233, .18), transparent 34%),
        radial-gradient(circle at 88% 6%, rgba(139, 92, 246, .16), transparent 30%),
        radial-gradient(circle at 92% 92%, rgba(236, 72, 153, .12), transparent 32%),
        linear-gradient(135deg, #eef8ff 0%, #f8fbff 46%, #f7f0ff 100%);
}

.daily-ops-page.mybody[b-a5lha4j7hr] {
    grid-template-rows: unset;
}

.daily-ops-page[b-a5lha4j7hr]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .46) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .18;
}

.daily-ops-shell[b-a5lha4j7hr] {
    position: relative;
    z-index: 1;
    width: min(100%, 1600px);
    margin: 0 auto;
    display: grid;
    gap: 18px;
    animation: dailyOpsRise-b-a5lha4j7hr .42s ease both;
}

.daily-ops-hero[b-a5lha4j7hr],
.daily-control-card[b-a5lha4j7hr],
.daily-kpi-card[b-a5lha4j7hr],
.daily-insight-card[b-a5lha4j7hr],
.daily-table-card[b-a5lha4j7hr],
.daily-empty-state[b-a5lha4j7hr],
.daily-denied[b-a5lha4j7hr],
.daily-ops-denied[b-a5lha4j7hr] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.daily-ops-hero[b-a5lha4j7hr] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border-radius: 30px;
}

.daily-ops-hero[b-a5lha4j7hr]::after {
    content: "";
    position: absolute;
    inset: auto -8% -90% 52%;
    height: 180px;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(8px);
    background: linear-gradient(135deg, rgba(14, 165, 233, .18), rgba(139, 92, 246, .16));
}

.daily-ops-hero-copy[b-a5lha4j7hr],
.daily-ops-actions[b-a5lha4j7hr],
.daily-card-header[b-a5lha4j7hr],
.daily-card-title[b-a5lha4j7hr],
.daily-control-grid[b-a5lha4j7hr],
.daily-apply-wrap[b-a5lha4j7hr],
.daily-date-cell[b-a5lha4j7hr],
.daily-distribution-legend[b-a5lha4j7hr],
.daily-rate-meter[b-a5lha4j7hr],
.daily-empty-actions[b-a5lha4j7hr],
.daily-mobile-top[b-a5lha4j7hr],
.daily-mobile-badges[b-a5lha4j7hr] {
    display: flex;
    align-items: center;
}

.daily-ops-hero-copy[b-a5lha4j7hr],
.daily-card-title[b-a5lha4j7hr],
.daily-date-cell[b-a5lha4j7hr] {
    gap: 14px;
}

.daily-ops-actions[b-a5lha4j7hr],
.daily-empty-actions[b-a5lha4j7hr],
.daily-distribution-legend[b-a5lha4j7hr],
.daily-mobile-badges[b-a5lha4j7hr] {
    flex-wrap: wrap;
    gap: 10px;
}

.daily-ops-hero-icon[b-a5lha4j7hr],
.daily-card-title > span[b-a5lha4j7hr],
.daily-kpi-card > span[b-a5lha4j7hr],
.daily-empty-state > span[b-a5lha4j7hr],
.daily-date-cell > span[b-a5lha4j7hr] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.daily-ops-hero-icon[b-a5lha4j7hr] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: #fff;
    font-size: 1.45rem;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 18px 34px rgba(14, 165, 233, .24);
}

.daily-ops-hero h1[b-a5lha4j7hr],
.daily-card-title h2[b-a5lha4j7hr],
.daily-insight-card h2[b-a5lha4j7hr] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.035em;
}

.daily-ops-hero h1[b-a5lha4j7hr] {
    font-size: clamp(1.7rem, 2.4vw, 2.25rem);
}

.daily-card-title h2[b-a5lha4j7hr],
.daily-insight-card h2[b-a5lha4j7hr] {
    font-size: 1.1rem;
}

.daily-ops-hero p[b-a5lha4j7hr],
.daily-card-title p[b-a5lha4j7hr],
.daily-insight-card p[b-a5lha4j7hr],
.daily-empty-state p[b-a5lha4j7hr],
.daily-ops-denied p[b-a5lha4j7hr] {
    margin: 0;
    color: var(--text-body);
}

.daily-ops-button[b-a5lha4j7hr] {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 16px;
    font-size: .9rem;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.daily-ops-button:hover:not(:disabled)[b-a5lha4j7hr] {
    transform: translateY(-1px);
}

.daily-ops-button.secondary[b-a5lha4j7hr] {
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .24);
    background: rgba(224, 245, 255, .64);
    box-shadow: 0 12px 26px rgba(14, 165, 233, .1);
}

.daily-ops-button.primary[b-a5lha4j7hr] {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 14px 28px rgba(14, 165, 233, .22);
}

.daily-ops-button.export[b-a5lha4j7hr] {
    color: #fff;
    background: linear-gradient(135deg, #10b981, #0ea5e9);
    box-shadow: 0 14px 28px rgba(16, 185, 129, .2);
}

.daily-ops-button:disabled[b-a5lha4j7hr] {
    cursor: not-allowed;
    opacity: .56;
    transform: none;
    box-shadow: none;
}

.daily-control-card[b-a5lha4j7hr],
.daily-table-card[b-a5lha4j7hr],
.daily-insight-card[b-a5lha4j7hr] {
    display: grid;
    gap: 18px;
    padding: 20px;
    border-radius: 24px;
}

.daily-card-header[b-a5lha4j7hr] {
    justify-content: space-between;
    gap: 14px;
}

.daily-card-title > span[b-a5lha4j7hr] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, rgba(224, 245, 255, .92), rgba(237, 233, 254, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.daily-date-chip[b-a5lha4j7hr],
.daily-count-chip[b-a5lha4j7hr],
.daily-class-pill[b-a5lha4j7hr],
.daily-grade-pill[b-a5lha4j7hr],
.daily-total-pill[b-a5lha4j7hr],
.daily-rate-pill[b-a5lha4j7hr],
.daily-distribution-legend span[b-a5lha4j7hr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.daily-date-chip[b-a5lha4j7hr],
.daily-count-chip[b-a5lha4j7hr] {
    min-height: 34px;
    padding: 0 12px;
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .2);
    background: rgba(224, 245, 255, .68);
}

.daily-control-grid[b-a5lha4j7hr] {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 14px;
}

.daily-field[b-a5lha4j7hr] {
    display: grid;
    gap: 7px;
}

.daily-field.wide[b-a5lha4j7hr] {
    grid-column: span 2;
}

.daily-field > span[b-a5lha4j7hr] {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.daily-input[b-a5lha4j7hr] {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(120, 170, 210, .28);
    border-radius: 16px;
    padding: 0 14px;
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 750;
    background: rgba(255, 255, 255, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.daily-input:focus[b-a5lha4j7hr] {
    outline: none;
    border-color: rgba(14, 165, 233, .56);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
}

.daily-apply-wrap[b-a5lha4j7hr] {
    justify-content: flex-end;
    align-self: end;
}

.daily-kpi-grid[b-a5lha4j7hr] {
    display: grid;
    grid-template-columns: repeat(6, minmax(145px, 1fr));
    gap: 14px;
}

.daily-kpi-card[b-a5lha4j7hr] {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 112px;
    padding: 17px;
    border-radius: 22px;
}

.daily-kpi-card > span[b-a5lha4j7hr] {
    width: 46px;
    height: 46px;
    border-radius: 16px;
}

.daily-kpi-card small[b-a5lha4j7hr] {
    display: block;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.daily-kpi-card strong[b-a5lha4j7hr] {
    display: block;
    margin-top: 4px;
    color: var(--text-main);
    font-size: 1.65rem;
    line-height: 1;
    font-weight: 900;
}

.daily-kpi-card em[b-a5lha4j7hr] {
    color: var(--text-muted);
    font-size: .76rem;
    font-style: normal;
    font-weight: 750;
}

.daily-kpi-card.total > span[b-a5lha4j7hr],
.daily-kpi-card.classes > span[b-a5lha4j7hr] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.daily-kpi-card.present > span[b-a5lha4j7hr] {
    color: #047857;
    background: var(--present-soft);
}

.daily-kpi-card.absent > span[b-a5lha4j7hr] {
    color: #be123c;
    background: var(--absent-soft);
}

.daily-kpi-card.late > span[b-a5lha4j7hr] {
    color: #b45309;
    background: var(--late-soft);
}

.daily-kpi-card.excused > span[b-a5lha4j7hr] {
    color: #6d28d9;
    background: var(--excused-soft);
}

.daily-insight-grid[b-a5lha4j7hr] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    gap: 14px;
}

.daily-distribution-bar[b-a5lha4j7hr] {
    display: flex;
    overflow: hidden;
    min-height: 18px;
    border-radius: 999px;
    background: rgba(226, 232, 240, .78);
}

.daily-distribution-bar span.present[b-a5lha4j7hr],
.daily-distribution-legend span.present[b-a5lha4j7hr] {
    background: var(--present);
}

.daily-distribution-bar span.absent[b-a5lha4j7hr],
.daily-distribution-legend span.absent[b-a5lha4j7hr] {
    background: var(--absent);
}

.daily-distribution-bar span.late[b-a5lha4j7hr],
.daily-distribution-legend span.late[b-a5lha4j7hr] {
    background: var(--late);
}

.daily-distribution-bar span.excused[b-a5lha4j7hr],
.daily-distribution-legend span.excused[b-a5lha4j7hr] {
    background: var(--excused);
}

.daily-distribution-legend span[b-a5lha4j7hr] {
    min-height: 30px;
    padding: 0 10px;
    color: #fff;
}

.daily-rate-meter[b-a5lha4j7hr] {
    justify-content: center;
    gap: 18px;
}

.daily-rate-ring[b-a5lha4j7hr] {
    --rate: 0;
    width: 136px;
    height: 136px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    text-align: center;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, .96) 0 58%, transparent 59%),
        conic-gradient(var(--present) calc(var(--rate) * 1%), rgba(226, 232, 240, .8) 0);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), var(--shadow-card);
}

.daily-rate-ring.watch[b-a5lha4j7hr] {
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, .96) 0 58%, transparent 59%),
        conic-gradient(var(--late) calc(var(--rate) * 1%), rgba(226, 232, 240, .8) 0);
}

.daily-rate-ring.risk[b-a5lha4j7hr] {
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, .96) 0 58%, transparent 59%),
        conic-gradient(var(--absent) calc(var(--rate) * 1%), rgba(226, 232, 240, .8) 0);
}

.daily-rate-ring strong[b-a5lha4j7hr] {
    display: block;
    color: var(--text-main);
    font-size: 1.42rem;
    font-weight: 900;
}

.daily-rate-ring small[b-a5lha4j7hr] {
    display: block;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.daily-rate-pill[b-a5lha4j7hr] {
    min-height: 32px;
    padding: 0 12px;
}

.daily-rate-pill.high[b-a5lha4j7hr] {
    color: #047857;
    background: var(--present-soft);
}

.daily-rate-pill.good[b-a5lha4j7hr] {
    color: #0369a1;
    background: var(--primary-soft);
}

.daily-rate-pill.watch[b-a5lha4j7hr] {
    color: #b45309;
    background: var(--late-soft);
}

.daily-rate-pill.risk[b-a5lha4j7hr] {
    color: #be123c;
    background: var(--absent-soft);
}

.daily-mini-empty[b-a5lha4j7hr] {
    display: grid;
    place-items: center;
    min-height: 74px;
    border: 1px dashed rgba(120, 170, 210, .34);
    border-radius: 18px;
    color: var(--text-muted);
    font-size: .9rem;
    font-weight: 750;
    background: rgba(248, 252, 255, .62);
}

.daily-overflow-note[b-a5lha4j7hr] {
    padding: 10px 14px;
    border-radius: 16px;
    color: #b45309;
    font-size: .82rem;
    font-weight: 850;
    background: var(--late-soft);
}

.daily-table-wrap[b-a5lha4j7hr] {
    max-width: 100%;
    overflow: auto;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 24px;
    background: rgba(255, 255, 255, .62);
}

.daily-summary-table[b-a5lha4j7hr] {
    width: 100%;
    min-width: 900px;
    border-collapse: separate;
    border-spacing: 0;
}

.daily-summary-table th[b-a5lha4j7hr] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 15px 18px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
    background: rgba(239, 248, 255, .94);
    border-bottom: 1px solid rgba(120, 170, 210, .18);
}

.daily-summary-table td[b-a5lha4j7hr] {
    min-height: 72px;
    padding: 15px 18px;
    vertical-align: middle;
    border-bottom: 1px solid rgba(120, 170, 210, .14);
    background: rgba(255, 255, 255, .62);
}

.daily-summary-table tbody tr:hover td[b-a5lha4j7hr] {
    background: rgba(240, 249, 255, .74);
}

.daily-date-cell > span[b-a5lha4j7hr] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, .78);
}

.daily-date-cell strong[b-a5lha4j7hr] {
    display: block;
    color: var(--text-main);
    font-size: .93rem;
    font-weight: 900;
}

.daily-date-cell small[b-a5lha4j7hr] {
    display: block;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 750;
}

.daily-class-pill[b-a5lha4j7hr],
.daily-grade-pill[b-a5lha4j7hr],
.daily-total-pill[b-a5lha4j7hr] {
    min-height: 30px;
    padding: 0 11px;
}

.daily-class-pill[b-a5lha4j7hr] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.daily-grade-pill[b-a5lha4j7hr] {
    color: #075985;
    background: rgba(224, 245, 255, .7);
}

.daily-total-pill[b-a5lha4j7hr] {
    color: var(--text-main);
    background: rgba(241, 245, 249, .9);
}

.daily-summary-table .number-col[b-a5lha4j7hr] {
    text-align: center;
    font-size: .98rem;
    font-weight: 900;
}

.number-col.present[b-a5lha4j7hr] {
    color: #047857;
}

.number-col.absent[b-a5lha4j7hr] {
    color: #be123c;
}

.number-col.late[b-a5lha4j7hr] {
    color: #b45309;
}

.number-col.excused[b-a5lha4j7hr] {
    color: #6d28d9;
}

.number-col.total[b-a5lha4j7hr] {
    color: var(--text-main);
}

.daily-mobile-list[b-a5lha4j7hr] {
    display: none;
}

.daily-mobile-card[b-a5lha4j7hr] {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 22px;
    background: rgba(255, 255, 255, .76);
    box-shadow: var(--shadow-card);
}

.daily-mobile-top[b-a5lha4j7hr] {
    justify-content: space-between;
    gap: 12px;
}

.daily-mobile-counts[b-a5lha4j7hr] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.daily-mobile-counts span[b-a5lha4j7hr] {
    display: grid;
    gap: 3px;
    padding: 11px;
    border-radius: 16px;
}

.daily-mobile-counts strong[b-a5lha4j7hr] {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.daily-mobile-counts .present[b-a5lha4j7hr] {
    color: #047857;
    background: var(--present-soft);
}

.daily-mobile-counts .absent[b-a5lha4j7hr] {
    color: #be123c;
    background: var(--absent-soft);
}

.daily-mobile-counts .late[b-a5lha4j7hr] {
    color: #b45309;
    background: var(--late-soft);
}

.daily-mobile-counts .excused[b-a5lha4j7hr] {
    color: #6d28d9;
    background: var(--excused-soft);
}

.daily-empty-state[b-a5lha4j7hr],
.daily-ops-denied[b-a5lha4j7hr] {
    display: grid;
    place-items: center;
    min-height: 280px;
    padding: 34px 20px;
    text-align: center;
    border-radius: 24px;
    background: rgba(255, 255, 255, .62);
}

.daily-empty-state > span[b-a5lha4j7hr] {
    width: 70px;
    height: 70px;
    margin-bottom: 14px;
    border-radius: 24px;
    color: var(--primary-dark);
    font-size: 1.8rem;
    background: linear-gradient(135deg, rgba(224, 245, 255, .96), rgba(237, 233, 254, .9));
}

.daily-empty-state h3[b-a5lha4j7hr],
.daily-ops-denied h2[b-a5lha4j7hr] {
    margin: 0 0 5px;
    color: var(--text-main);
    font-size: 1.15rem;
    font-weight: 900;
}

.daily-table-wrap[b-a5lha4j7hr]::-webkit-scrollbar,
.daily-ops-page[b-a5lha4j7hr]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.daily-table-wrap[b-a5lha4j7hr]::-webkit-scrollbar-track,
.daily-ops-page[b-a5lha4j7hr]::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(226, 236, 246, .48);
}

.daily-table-wrap[b-a5lha4j7hr]::-webkit-scrollbar-thumb,
.daily-ops-page[b-a5lha4j7hr]::-webkit-scrollbar-thumb {
    border: 2px solid rgba(226, 236, 246, .48);
    border-radius: 999px;
    background: rgba(99, 139, 170, .42);
}

@media (max-width: 1380px) {
    .daily-kpi-grid[b-a5lha4j7hr] {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }

    .daily-control-grid[b-a5lha4j7hr] {
        grid-template-columns: repeat(3, minmax(170px, 1fr));
    }
}

@media (max-width: 1040px) {
    .daily-insight-grid[b-a5lha4j7hr] {
        grid-template-columns: 1fr;
    }

    .daily-control-grid[b-a5lha4j7hr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .daily-ops-page[b-a5lha4j7hr] {
        padding: 18px 14px 92px;
    }

    .daily-ops-hero[b-a5lha4j7hr],
    .daily-card-header[b-a5lha4j7hr] {
        align-items: stretch;
        flex-direction: column;
    }

    .daily-ops-actions .daily-ops-button[b-a5lha4j7hr],
    .daily-apply-wrap .daily-ops-button[b-a5lha4j7hr] {
        flex: 1 1 150px;
    }

    .daily-kpi-grid[b-a5lha4j7hr] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .daily-table-wrap[b-a5lha4j7hr] {
        display: none;
    }

    .daily-mobile-list[b-a5lha4j7hr] {
        display: grid;
        gap: 14px;
    }
}

@media (max-width: 620px) {
    .daily-ops-page[b-a5lha4j7hr] {
        padding: 12px 10px 84px;
    }

    .daily-ops-hero[b-a5lha4j7hr],
    .daily-control-card[b-a5lha4j7hr],
    .daily-table-card[b-a5lha4j7hr],
    .daily-insight-card[b-a5lha4j7hr] {
        padding: 16px;
        border-radius: 22px;
    }

    .daily-ops-hero-copy[b-a5lha4j7hr],
    .daily-card-title[b-a5lha4j7hr],
    .daily-rate-meter[b-a5lha4j7hr],
    .daily-mobile-top[b-a5lha4j7hr] {
        align-items: flex-start;
        flex-direction: column;
    }

    .daily-ops-hero-icon[b-a5lha4j7hr] {
        width: 50px;
        height: 50px;
    }

    .daily-kpi-grid[b-a5lha4j7hr],
    .daily-control-grid[b-a5lha4j7hr],
    .daily-mobile-counts[b-a5lha4j7hr] {
        grid-template-columns: 1fr;
    }

    .daily-field.wide[b-a5lha4j7hr] {
        grid-column: auto;
    }
}

@media print {
    .daily-ops-page[b-a5lha4j7hr] {
        padding: 0;
        background: #fff;
    }

    .daily-ops-page[b-a5lha4j7hr]::before,
    .daily-ops-actions[b-a5lha4j7hr],
    .daily-control-card[b-a5lha4j7hr],
    .daily-insight-grid[b-a5lha4j7hr] {
        display: none;
    }

    .daily-table-card[b-a5lha4j7hr],
    .daily-ops-hero[b-a5lha4j7hr] {
        box-shadow: none;
        border: 1px solid #d7e2ec;
    }
}

@media (prefers-reduced-motion: reduce) {
    .daily-ops-shell[b-a5lha4j7hr],
    .daily-ops-button[b-a5lha4j7hr] {
        animation: none !important;
        transition: none !important;
    }

    .daily-ops-button:hover:not(:disabled)[b-a5lha4j7hr] {
        transform: none !important;
    }
}
/* /Components/Pages/ParentsPage.razor.rz.scp.css */
@keyframes parentsRise-b-xphydjftn1 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes parentsPulse-b-xphydjftn1 {
    0%, 100% {
        opacity: .46;
    }

    50% {
        opacity: 1;
    }
}

.parents-page[b-xphydjftn1] {
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 36px;
    color: var(--text-body, #4e6274);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.parents-page.mybody[b-xphydjftn1] {
    display: block;
    grid-template-rows: unset;
}

.parents-page[b-xphydjftn1]::before,
.parents-page[b-xphydjftn1]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.parents-page[b-xphydjftn1]::before {
    width: 34vw;
    min-width: 320px;
    aspect-ratio: 1;
    left: 5%;
    top: 2%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.parents-page[b-xphydjftn1]::after {
    width: 38vw;
    min-width: 320px;
    aspect-ratio: 1;
    right: 0;
    bottom: -2%;
    background:
        radial-gradient(circle at 36% 34%, rgba(139, 92, 246, .14), transparent 58%),
        radial-gradient(circle at 72% 70%, rgba(236, 72, 153, .12), transparent 58%);
}

.parents-shell[b-xphydjftn1] {
    display: grid;
    gap: 18px;
    width: min(100%, 1460px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft, 0 18px 45px rgba(23, 55, 90, .08));
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: parentsRise-b-xphydjftn1 .32s ease-out both;
}

.parents-hero[b-xphydjftn1],
.parents-summary-card[b-xphydjftn1],
.parents-toolbar-card[b-xphydjftn1],
.parents-list-card[b-xphydjftn1],
.parents-modal-content[b-xphydjftn1] {
    border: 1px solid rgba(255, 255, 255, .76);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-card, 0 10px 26px rgba(23, 55, 90, .07));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.parents-hero[b-xphydjftn1] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: 30px;
}

.parents-hero[b-xphydjftn1]::after {
    content: "";
    position: absolute;
    right: 36px;
    bottom: -118px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(16, 185, 129, .12), transparent 68%);
    pointer-events: none;
}

.parents-hero-title[b-xphydjftn1] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.parents-hero-icon[b-xphydjftn1],
.summary-icon[b-xphydjftn1],
.parents-modal-icon[b-xphydjftn1],
.parents-empty-state > span[b-xphydjftn1],
.form-section-title > span[b-xphydjftn1] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.parents-hero-icon[b-xphydjftn1] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--success, #10b981));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.parents-hero h1[b-xphydjftn1] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.18;
}

.parents-hero p[b-xphydjftn1] {
    margin: 8px 0 0;
    max-width: 760px;
    color: var(--text-muted, #8a9aaa);
    font-size: .95rem;
    line-height: 1.55;
}

.parents-hero-meta[b-xphydjftn1] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.parents-hero-meta span[b-xphydjftn1],
.parents-count-pill[b-xphydjftn1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    color: var(--primary-dark, #0369a1);
    font-size: .76rem;
    font-weight: 850;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 999px;
    background: rgba(224, 245, 255, .78);
}

.parents-hero-actions[b-xphydjftn1] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.parents-primary-button[b-xphydjftn1],
.parents-soft-button[b-xphydjftn1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    font-size: .88rem;
    font-weight: 850;
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.parents-primary-button[b-xphydjftn1] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--success, #10b981)) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .2);
}

.parents-soft-button[b-xphydjftn1] {
    color: var(--text-main, #102033) !important;
    border: 1px solid rgba(120, 170, 210, .2) !important;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: none !important;
}

.parents-primary-button:hover[b-xphydjftn1],
.parents-soft-button:hover[b-xphydjftn1],
.parents-icon-button:hover[b-xphydjftn1] {
    transform: translateY(-1px);
}

.parents-primary-button:disabled[b-xphydjftn1],
.parents-soft-button:disabled[b-xphydjftn1] {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
}

.parents-summary-grid[b-xphydjftn1] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.parents-summary-card[b-xphydjftn1] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    min-height: 124px;
    padding: 18px;
    border-radius: 24px;
}

.summary-icon[b-xphydjftn1] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    color: var(--primary-dark, #0369a1);
    border-radius: 17px;
    background: rgba(14, 165, 233, .1);
}

.parents-summary-card.active .summary-icon[b-xphydjftn1] {
    color: #047857;
    background: rgba(16, 185, 129, .12);
}

.parents-summary-card.contact .summary-icon[b-xphydjftn1] {
    color: #6d28d9;
    background: rgba(139, 92, 246, .12);
}

.parents-summary-card.linking .summary-icon[b-xphydjftn1] {
    color: #b45309;
    background: rgba(245, 158, 11, .12);
}

.summary-label[b-xphydjftn1] {
    color: var(--text-muted, #8a9aaa);
    font-size: .73rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.parents-summary-card strong[b-xphydjftn1] {
    display: block;
    color: var(--text-main, #102033);
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    font-weight: 900;
    line-height: 1.1;
}

.parents-summary-card small[b-xphydjftn1] {
    color: var(--text-muted, #8a9aaa);
    font-size: .82rem;
    font-weight: 700;
}

.parents-summary-card.skeleton[b-xphydjftn1] {
    grid-template-columns: 1fr;
}

.parents-summary-card.skeleton span[b-xphydjftn1],
.parents-summary-card.skeleton strong[b-xphydjftn1],
.parents-summary-card.skeleton small[b-xphydjftn1] {
    display: block;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(226, 232, 240, .9), rgba(248, 250, 252, .95), rgba(226, 232, 240, .9));
    animation: parentsPulse-b-xphydjftn1 1.2s ease-in-out infinite;
}

.parents-summary-card.skeleton span[b-xphydjftn1] {
    width: 44px;
    height: 44px;
    border-radius: 17px;
}

.parents-summary-card.skeleton strong[b-xphydjftn1] {
    width: 56%;
    height: 24px;
}

.parents-summary-card.skeleton small[b-xphydjftn1] {
    width: 78%;
}

.parents-toolbar-card[b-xphydjftn1] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(180px, 240px) auto auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
    border-radius: 24px;
}

.parents-field[b-xphydjftn1] {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
}

.parents-field > span[b-xphydjftn1] {
    color: var(--text-muted, #8a9aaa);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.parents-field em[b-xphydjftn1] {
    color: var(--danger, #ef476f);
    font-style: normal;
}

.parents-search-wrap[b-xphydjftn1],
.parents-select-wrap[b-xphydjftn1] {
    position: relative;
}

.parents-search-wrap > i[b-xphydjftn1],
.parents-select-wrap > i[b-xphydjftn1] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #8a9aaa);
    pointer-events: none;
}

.parents-search-wrap > i[b-xphydjftn1] {
    left: 16px;
}

.parents-select-wrap > i[b-xphydjftn1] {
    right: 16px;
}

.parents-input[b-xphydjftn1] {
    min-height: 46px;
    color: var(--text-main, #102033) !important;
    font-weight: 750;
    border: 1px solid rgba(120, 170, 210, .22) !important;
    border-radius: 16px !important;
    background: rgba(248, 252, 255, .72) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.parents-search-wrap .parents-input[b-xphydjftn1] {
    padding-left: 44px;
}

.parents-select[b-xphydjftn1] {
    appearance: none;
    padding-right: 42px;
}

.parents-input:focus[b-xphydjftn1] {
    border-color: rgba(14, 165, 233, .42) !important;
    background: rgba(255, 255, 255, .94) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .1) !important;
}

.parents-toolbar-count[b-xphydjftn1] {
    display: grid;
    justify-items: start;
    min-width: 122px;
    padding: 9px 14px;
    border: 1px solid rgba(14, 165, 233, .12);
    border-radius: 18px;
    background: rgba(224, 245, 255, .52);
}

.parents-toolbar-count strong[b-xphydjftn1] {
    color: var(--text-main, #102033);
    font-size: 1.25rem;
    font-weight: 900;
    line-height: 1;
}

.parents-toolbar-count span[b-xphydjftn1] {
    color: var(--text-muted, #8a9aaa);
    font-size: .76rem;
    font-weight: 800;
}

.parents-list-card[b-xphydjftn1] {
    overflow: hidden;
    border-radius: 28px;
}

.parents-card-header[b-xphydjftn1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px 16px;
    border-bottom: 1px solid rgba(226, 232, 240, .72);
}

.section-kicker[b-xphydjftn1] {
    display: inline-flex;
    margin-bottom: 5px;
    color: var(--primary-dark, #0369a1);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.parents-card-header h2[b-xphydjftn1] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.parents-card-header p[b-xphydjftn1] {
    margin: 5px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .88rem;
}

.parents-table-wrap[b-xphydjftn1] {
    width: 100%;
    overflow-x: auto;
}

.parents-table[b-xphydjftn1] {
    min-width: 920px;
    color: var(--text-body, #4e6274);
}

.parents-table thead th[b-xphydjftn1] {
    padding: 14px 18px;
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 0;
    background: rgba(248, 252, 255, .72);
}

.parents-table tbody td[b-xphydjftn1] {
    padding: 16px 18px;
    vertical-align: middle;
    border-color: rgba(226, 232, 240, .7);
}

.parents-table tbody tr[b-xphydjftn1] {
    transition: background .18s ease, transform .18s ease;
}

.parents-table tbody tr:hover[b-xphydjftn1] {
    background: rgba(224, 245, 255, .38);
}

.parent-name-cell[b-xphydjftn1],
.parent-login-cell[b-xphydjftn1],
.parent-contact-cell[b-xphydjftn1] {
    display: flex;
    min-width: 0;
}

.parent-name-cell[b-xphydjftn1] {
    align-items: center;
    gap: 12px;
}

.parent-avatar[b-xphydjftn1] {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    color: white;
    font-size: .84rem;
    font-weight: 900;
    letter-spacing: .02em;
    border-radius: 18px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .28), transparent 32%),
        linear-gradient(135deg, var(--primary, #0ea5e9), var(--violet, #8b5cf6));
    box-shadow: 0 14px 24px rgba(14, 165, 233, .18);
}

.parent-name-cell strong[b-xphydjftn1],
.parent-login-cell strong[b-xphydjftn1] {
    display: block;
    color: var(--text-main, #102033);
    font-weight: 900;
    line-height: 1.2;
}

.parent-name-cell small[b-xphydjftn1] {
    display: block;
    margin-top: 4px;
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
    font-weight: 750;
}

.parent-login-cell[b-xphydjftn1],
.parent-contact-cell[b-xphydjftn1] {
    flex-direction: column;
    gap: 7px;
}

.login-warning[b-xphydjftn1] {
    color: #b45309;
    font-size: .86rem;
    font-weight: 850;
}

.role-pill[b-xphydjftn1],
.contact-ready-pill[b-xphydjftn1],
.status-pill[b-xphydjftn1] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    min-height: 28px;
    padding: 5px 10px;
    font-size: .74rem;
    font-weight: 900;
    border-radius: 999px;
}

.role-pill[b-xphydjftn1] {
    color: #6d28d9;
    border: 1px solid rgba(139, 92, 246, .14);
    background: rgba(245, 243, 255, .78);
}

.parent-contact-cell span:not(.contact-ready-pill)[b-xphydjftn1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 360px;
    color: var(--text-body, #4e6274);
    font-size: .84rem;
    font-weight: 760;
    word-break: break-word;
}

.parent-contact-cell i[b-xphydjftn1] {
    color: var(--primary, #0ea5e9);
}

.contact-placeholder[b-xphydjftn1] {
    color: var(--text-muted, #8a9aaa) !important;
}

.contact-ready-pill.ready[b-xphydjftn1] {
    color: #047857;
    border: 1px solid rgba(16, 185, 129, .15);
    background: rgba(220, 252, 231, .78);
}

.contact-ready-pill.missing[b-xphydjftn1] {
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, .18);
    background: rgba(255, 247, 237, .9);
}

.status-pill[b-xphydjftn1] {
    justify-content: center;
    min-width: 96px;
}

.status-pill i[b-xphydjftn1] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.status-pill.active[b-xphydjftn1] {
    color: #047857;
    background: rgba(220, 252, 231, .8);
}

.status-pill.active i[b-xphydjftn1] {
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}

.status-pill.inactive[b-xphydjftn1] {
    color: #64748b;
    background: rgba(241, 245, 249, .95);
}

.status-pill.inactive i[b-xphydjftn1] {
    background: #94a3b8;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, .13);
}

.parents-actions[b-xphydjftn1] {
    display: inline-flex;
    justify-content: flex-end;
    gap: 8px;
}

.parents-icon-button[b-xphydjftn1] {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 15px;
    background: rgba(255, 255, 255, .78);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.parents-icon-button.edit[b-xphydjftn1] {
    color: var(--primary-dark, #0369a1);
}

.parents-icon-button.toggle.success[b-xphydjftn1] {
    color: #047857;
    background: rgba(220, 252, 231, .66);
}

.parents-icon-button.toggle.danger[b-xphydjftn1] {
    color: #be123c;
    background: rgba(255, 241, 242, .72);
}

.parents-loading-state[b-xphydjftn1],
.parents-empty-state[b-xphydjftn1] {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 260px;
    padding: 36px 20px;
    text-align: center;
}

.parents-loading-state[b-xphydjftn1] {
    color: var(--text-muted, #8a9aaa);
    font-weight: 850;
}

.parents-empty-state > span[b-xphydjftn1] {
    width: 64px;
    height: 64px;
    color: var(--primary-dark, #0369a1);
    font-size: 1.45rem;
    border-radius: 24px;
    background: rgba(224, 245, 255, .82);
}

.parents-empty-state h3[b-xphydjftn1] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: 1.08rem;
    font-weight: 900;
}

.parents-empty-state p[b-xphydjftn1] {
    max-width: 440px;
    margin: 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .9rem;
}

.parents-empty-actions[b-xphydjftn1] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.parents-modal-backdrop[b-xphydjftn1] {
    background: rgba(15, 23, 42, .32);
    backdrop-filter: blur(5px);
}

.parents-modal-shell[b-xphydjftn1] {
    overflow-y: auto;
    padding: 20px;
}

.parents-modal-dialog[b-xphydjftn1] {
    max-width: 880px;
}

.parents-modal-content[b-xphydjftn1] {
    overflow: hidden;
    border-radius: 30px;
}

.parents-modal-header[b-xphydjftn1] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 22px 24px;
    border-bottom: 1px solid rgba(226, 232, 240, .72);
    background:
        radial-gradient(circle at top left, rgba(224, 245, 255, .86), transparent 46%),
        rgba(255, 255, 255, .72);
}

.parents-modal-icon[b-xphydjftn1] {
    width: 48px;
    height: 48px;
    color: white;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--success, #10b981));
    box-shadow: 0 14px 24px rgba(14, 165, 233, .18);
}

.parents-modal-header h5[b-xphydjftn1] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: 1.18rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.parents-modal-header p[b-xphydjftn1] {
    margin: 4px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .86rem;
}

.parents-modal-body[b-xphydjftn1] {
    display: grid;
    gap: 16px;
    padding: 22px 24px;
    max-height: min(66vh, 760px);
    overflow-y: auto;
}

.form-section[b-xphydjftn1] {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid rgba(226, 232, 240, .82);
    border-radius: 22px;
    background: rgba(248, 252, 255, .66);
}

.form-section-title[b-xphydjftn1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.form-section-title > span[b-xphydjftn1] {
    width: 38px;
    height: 38px;
    color: var(--primary-dark, #0369a1);
    border-radius: 15px;
    background: rgba(224, 245, 255, .86);
}

.form-section-title h6[b-xphydjftn1] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: .95rem;
    font-weight: 900;
}

.form-section-title small[b-xphydjftn1] {
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
    font-weight: 750;
}

.parents-form-grid[b-xphydjftn1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.parent-switch-card[b-xphydjftn1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 46px;
    padding: 8px 12px 8px 16px;
    border: 1px solid rgba(120, 170, 210, .22);
    border-radius: 16px;
    background: rgba(248, 252, 255, .72);
}

.parent-switch-card label[b-xphydjftn1] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: .86rem;
    font-weight: 850;
}

.parent-switch-card .form-check-input[b-xphydjftn1] {
    width: 46px;
    height: 24px;
    margin: 0;
    border-color: rgba(120, 170, 210, .4);
    cursor: pointer;
}

.parent-switch-card .form-check-input:checked[b-xphydjftn1] {
    border-color: transparent;
    background-color: var(--success, #10b981);
}

.parents-helper-card[b-xphydjftn1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    color: var(--primary-dark, #0369a1);
    font-size: .86rem;
    font-weight: 800;
    border: 1px solid rgba(14, 165, 233, .14);
    border-radius: 18px;
    background: rgba(224, 245, 255, .64);
}

.parents-modal-footer[b-xphydjftn1] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 24px 22px;
    border-top: 1px solid rgba(226, 232, 240, .72);
    background: rgba(248, 252, 255, .72);
}

@media (max-width: 1120px) {
    .parents-summary-grid[b-xphydjftn1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .parents-toolbar-card[b-xphydjftn1] {
        grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
    }

    .parents-toolbar-card > .parents-soft-button[b-xphydjftn1] {
        justify-self: start;
    }
}

@media (max-width: 780px) {
    .parents-page[b-xphydjftn1] {
        padding: 14px;
    }

    .parents-shell[b-xphydjftn1] {
        gap: 14px;
        padding: 14px;
        border-radius: 26px;
    }

    .parents-hero[b-xphydjftn1] {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
        border-radius: 24px;
    }

    .parents-hero-title[b-xphydjftn1] {
        align-items: flex-start;
    }

    .parents-hero-icon[b-xphydjftn1] {
        width: 52px;
        height: 52px;
        border-radius: 19px;
    }

    .parents-hero-actions[b-xphydjftn1],
    .parents-hero-actions .btn[b-xphydjftn1],
    .parents-empty-actions[b-xphydjftn1],
    .parents-empty-actions .btn[b-xphydjftn1] {
        width: 100%;
    }

    .parents-summary-grid[b-xphydjftn1],
    .parents-toolbar-card[b-xphydjftn1],
    .parents-form-grid[b-xphydjftn1] {
        grid-template-columns: 1fr;
    }

    .parents-card-header[b-xphydjftn1] {
        flex-direction: column;
        padding: 20px;
    }

    .parents-table[b-xphydjftn1] {
        min-width: 0;
    }

    .parents-table thead[b-xphydjftn1] {
        display: none;
    }

    .parents-table[b-xphydjftn1],
    .parents-table tbody[b-xphydjftn1],
    .parents-table tr[b-xphydjftn1],
    .parents-table td[b-xphydjftn1] {
        display: block;
        width: 100%;
    }

    .parents-table tbody[b-xphydjftn1] {
        display: grid;
        gap: 12px;
        padding: 14px;
    }

    .parents-table tbody tr[b-xphydjftn1] {
        overflow: hidden;
        border: 1px solid rgba(226, 232, 240, .82);
        border-radius: 22px;
        background: rgba(255, 255, 255, .82);
    }

    .parents-table tbody td[b-xphydjftn1] {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 13px 14px;
        text-align: left !important;
    }

    .parents-table tbody td[b-xphydjftn1]::before {
        content: attr(data-label);
        color: var(--text-muted, #8a9aaa);
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .parents-actions[b-xphydjftn1] {
        justify-content: flex-start;
    }

    .parents-modal-shell[b-xphydjftn1] {
        padding: 10px;
    }

    .parents-modal-dialog[b-xphydjftn1] {
        margin: 0 auto;
    }

    .parents-modal-header[b-xphydjftn1] {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 18px;
    }

    .parents-modal-header .btn-close[b-xphydjftn1] {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .parents-modal-body[b-xphydjftn1] {
        padding: 16px;
        max-height: 70vh;
    }

    .parents-modal-footer[b-xphydjftn1] {
        display: grid;
        grid-template-columns: 1fr;
        padding: 16px;
    }
}

@media (max-width: 520px) {
    .parents-hero-title[b-xphydjftn1] {
        flex-direction: column;
    }

    .parents-summary-card[b-xphydjftn1] {
        grid-template-columns: 1fr;
    }

    .summary-icon[b-xphydjftn1] {
        grid-row: auto;
    }

    .parents-table tbody td[b-xphydjftn1] {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .parent-contact-cell span:not(.contact-ready-pill)[b-xphydjftn1] {
        max-width: 100%;
    }
}
/* /Components/Pages/PaymentsPage.razor.rz.scp.css */
.payments-page[b-nhkp5qfpsp] {
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --surface-soft: rgba(248, 252, 255, 0.78);
    --border-soft: rgba(120, 170, 210, 0.22);
    --border-glass: rgba(255, 255, 255, 0.75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --finance: #f59e0b;
    --finance-soft: #fff7ed;
    --paid: #10b981;
    --paid-soft: #dcfce7;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, 0.08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, 0.07);
    display: block;
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(14px, 2vw, 28px);
    border-radius: 30px;
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    background:
        radial-gradient(circle at 4% 0%, rgba(14, 165, 233, 0.2), transparent 32%),
        radial-gradient(circle at 92% 6%, rgba(139, 92, 246, 0.16), transparent 34%),
        radial-gradient(circle at 98% 100%, rgba(236, 72, 153, 0.12), transparent 30%),
        linear-gradient(135deg, #eef8ff 0%, #f8fcff 48%, #fff3fb 100%);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.payments-page[b-nhkp5qfpsp]::-webkit-scrollbar,
.payments-table-wrap[b-nhkp5qfpsp]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.payments-page[b-nhkp5qfpsp]::-webkit-scrollbar-track,
.payments-table-wrap[b-nhkp5qfpsp]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.45);
    border-radius: 999px;
}

.payments-page[b-nhkp5qfpsp]::-webkit-scrollbar-thumb,
.payments-table-wrap[b-nhkp5qfpsp]::-webkit-scrollbar-thumb {
    border: 2px solid rgba(255, 255, 255, 0.68);
    border-radius: 999px;
    background: rgba(107, 139, 164, 0.42);
}

.payments-shell[b-nhkp5qfpsp] {
    display: grid;
    gap: 22px;
    width: min(100%, 1540px);
    margin: 0 auto;
}

.payments-hero[b-nhkp5qfpsp],
.context-card[b-nhkp5qfpsp],
.payment-card[b-nhkp5qfpsp],
.ledger-card[b-nhkp5qfpsp] {
    border: 1px solid var(--border-glass);
    border-radius: 30px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.payments-hero[b-nhkp5qfpsp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: clamp(20px, 2.4vw, 28px);
    position: relative;
    overflow: hidden;
}

.payments-hero[b-nhkp5qfpsp]::after {
    content: "";
    position: absolute;
    inset: auto -8% -72% 55%;
    height: 220px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.18), transparent 68%);
}

.hero-title-wrap[b-nhkp5qfpsp],
.section-title[b-nhkp5qfpsp] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.hero-icon[b-nhkp5qfpsp],
.section-icon[b-nhkp5qfpsp],
.kpi-icon[b-nhkp5qfpsp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.hero-icon[b-nhkp5qfpsp] {
    width: 58px;
    height: 58px;
    border-radius: 22px;
    color: #fff;
    font-size: 1.55rem;
    background: linear-gradient(135deg, var(--primary), var(--paid) 55%, var(--violet));
    box-shadow: 0 16px 34px rgba(14, 165, 233, 0.24);
}

.payments-hero h3[b-nhkp5qfpsp] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.55rem, 2.2vw, 2.05rem);
    font-weight: 850;
    letter-spacing: -0.04em;
}

.payments-hero p[b-nhkp5qfpsp],
.section-title p[b-nhkp5qfpsp],
.kpi-card p[b-nhkp5qfpsp],
.readiness-banner p[b-nhkp5qfpsp],
.invoice-preview small[b-nhkp5qfpsp],
.entry-empty-state p[b-nhkp5qfpsp],
.empty-state p[b-nhkp5qfpsp],
.payment-preview small[b-nhkp5qfpsp],
.payment-preview span[b-nhkp5qfpsp],
.audit-note[b-nhkp5qfpsp] {
    margin: 0;
    color: var(--text-body);
}

.hero-badge[b-nhkp5qfpsp],
.context-chip[b-nhkp5qfpsp],
.currency-chip[b-nhkp5qfpsp],
.draft-chip[b-nhkp5qfpsp],
.count-chip[b-nhkp5qfpsp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

.hero-badge[b-nhkp5qfpsp] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.context-chip[b-nhkp5qfpsp],
.draft-chip[b-nhkp5qfpsp] {
    color: #6d28d9;
    background: var(--violet-soft);
}

.currency-chip[b-nhkp5qfpsp],
.count-chip[b-nhkp5qfpsp] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.context-card[b-nhkp5qfpsp],
.payment-card[b-nhkp5qfpsp],
.ledger-card[b-nhkp5qfpsp] {
    padding: clamp(18px, 2.2vw, 24px);
}

.card-head[b-nhkp5qfpsp],
.ledger-head[b-nhkp5qfpsp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.section-icon[b-nhkp5qfpsp] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: 1.15rem;
}

.section-icon.finance[b-nhkp5qfpsp] {
    color: #b45309;
    background: var(--finance-soft);
}

.section-title h5[b-nhkp5qfpsp] {
    margin: 0;
    color: var(--text-main);
    font-size: 1.08rem;
    font-weight: 850;
    letter-spacing: -0.02em;
}

.section-title p[b-nhkp5qfpsp] {
    font-size: 0.9rem;
}

.context-chips[b-nhkp5qfpsp] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.context-grid[b-nhkp5qfpsp] {
    display: grid;
    grid-template-columns: minmax(250px, 1.2fr) minmax(260px, 1.2fr) minmax(210px, 0.85fr) minmax(160px, 0.7fr) minmax(160px, 0.7fr);
    gap: 16px;
    margin-top: 20px;
}

.field-shell[b-nhkp5qfpsp] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.field-shell > span[b-nhkp5qfpsp] {
    color: var(--text-body);
    font-size: 0.77rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.field-shell b[b-nhkp5qfpsp] {
    color: var(--danger);
}

.field-shell small[b-nhkp5qfpsp] {
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.input-shell[b-nhkp5qfpsp],
.select-shell[b-nhkp5qfpsp] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.input-shell.converted[b-nhkp5qfpsp] {
    border-color: rgba(245, 158, 11, 0.38);
    background: rgba(255, 247, 237, 0.78);
}

.input-shell:focus-within[b-nhkp5qfpsp],
.select-shell:focus-within[b-nhkp5qfpsp] {
    border-color: rgba(14, 165, 233, 0.55);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.12);
}

.input-shell input[b-nhkp5qfpsp],
.select-shell select[b-nhkp5qfpsp],
.entry-control[b-nhkp5qfpsp] {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--text-main);
    background: transparent;
    font-size: 0.92rem;
    font-weight: 780;
}

.amount-shell[b-nhkp5qfpsp] {
    min-height: 58px;
}

.amount-shell small[b-nhkp5qfpsp] {
    color: var(--primary-dark);
    font-size: 0.86rem;
    font-weight: 900;
}

.amount-shell .entry-control[b-nhkp5qfpsp] {
    font-size: 1.2rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.invoice-preview[b-nhkp5qfpsp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: rgba(248, 252, 255, 0.75);
}

.invoice-preview.empty[b-nhkp5qfpsp] {
    justify-content: flex-start;
}

.invoice-preview-main[b-nhkp5qfpsp],
.student-cell[b-nhkp5qfpsp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.student-avatar[b-nhkp5qfpsp],
.empty-icon[b-nhkp5qfpsp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border: 1px solid rgba(14, 165, 233, 0.16);
    border-radius: 50%;
    color: var(--primary-dark);
    background: linear-gradient(135deg, #e0f5ff, #fff);
    font-size: 0.78rem;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(14, 165, 233, 0.12);
}

.empty-icon[b-nhkp5qfpsp] {
    border-radius: 17px;
    font-size: 1.1rem;
}

.invoice-pill[b-nhkp5qfpsp],
.receipt-link[b-nhkp5qfpsp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    border: 0;
    padding: 0;
    color: var(--primary-dark);
    background: transparent;
    font-size: 0.9rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.invoice-pill:hover[b-nhkp5qfpsp],
.receipt-link:hover[b-nhkp5qfpsp] {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.invoice-preview strong[b-nhkp5qfpsp],
.student-cell strong[b-nhkp5qfpsp] {
    display: block;
    color: var(--text-main);
    font-weight: 850;
}

.invoice-preview-stats[b-nhkp5qfpsp] {
    display: grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap: 10px;
}

.invoice-preview-stats span[b-nhkp5qfpsp],
.preview-grid span[b-nhkp5qfpsp] {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    color: var(--text-main);
    font-size: 0.9rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.invoice-preview-stats b[b-nhkp5qfpsp],
.preview-grid b[b-nhkp5qfpsp] {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.invoice-preview-stats .due[b-nhkp5qfpsp] {
    color: #be123c;
}

.invoice-preview-stats .clear[b-nhkp5qfpsp] {
    color: #047857;
}

.kpi-grid[b-nhkp5qfpsp] {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr));
    gap: 16px;
}

.kpi-card[b-nhkp5qfpsp] {
    position: relative;
    min-height: 154px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid var(--border-glass);
    border-radius: 24px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(18px);
}

.kpi-card[b-nhkp5qfpsp]::after {
    content: "";
    position: absolute;
    inset: auto -25% -45% 35%;
    height: 110px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.12), transparent 65%);
}

.kpi-icon[b-nhkp5qfpsp] {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 16px;
}

.kpi-icon.primary[b-nhkp5qfpsp] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.kpi-icon.finance[b-nhkp5qfpsp] {
    color: #b45309;
    background: var(--finance-soft);
}

.kpi-icon.paid[b-nhkp5qfpsp] {
    color: #047857;
    background: var(--paid-soft);
}

.kpi-icon.violet[b-nhkp5qfpsp] {
    color: #6d28d9;
    background: var(--violet-soft);
}

.kpi-card small[b-nhkp5qfpsp] {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.kpi-card strong[b-nhkp5qfpsp] {
    display: block;
    margin-top: 4px;
    color: var(--text-main);
    font-size: clamp(1.15rem, 1.48vw, 1.56rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.kpi-card p[b-nhkp5qfpsp] {
    margin-top: 2px;
    font-size: 0.84rem;
    font-weight: 650;
}

.readiness-banner[b-nhkp5qfpsp] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border-glass);
    border-radius: 22px;
    box-shadow: var(--shadow-card);
}

.readiness-banner > span[b-nhkp5qfpsp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.72);
}

.readiness-banner.ready[b-nhkp5qfpsp],
.readiness-banner.paid[b-nhkp5qfpsp] {
    background: linear-gradient(135deg, rgba(220, 252, 231, 0.92), rgba(224, 245, 255, 0.82));
}

.readiness-banner.ready > span[b-nhkp5qfpsp],
.readiness-banner.paid > span[b-nhkp5qfpsp] {
    color: #047857;
}

.readiness-banner.warning[b-nhkp5qfpsp] {
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.95), rgba(255, 255, 255, 0.74));
}

.readiness-banner.warning > span[b-nhkp5qfpsp] {
    color: #b45309;
}

.readiness-banner.danger[b-nhkp5qfpsp] {
    background: linear-gradient(135deg, rgba(255, 228, 236, 0.95), rgba(255, 247, 237, 0.72));
}

.readiness-banner.danger > span[b-nhkp5qfpsp] {
    color: #be123c;
}

.readiness-banner strong[b-nhkp5qfpsp] {
    display: block;
    color: var(--text-main);
    font-weight: 850;
}

.readiness-banner p[b-nhkp5qfpsp] {
    font-size: 0.92rem;
}

.workspace-grid[b-nhkp5qfpsp] {
    display: grid;
    grid-template-columns: minmax(320px, 0.85fr) minmax(560px, 1.55fr);
    gap: 20px;
    align-items: start;
}

.payment-card[b-nhkp5qfpsp],
.ledger-card[b-nhkp5qfpsp] {
    border-radius: 28px;
}

.entry-empty-state[b-nhkp5qfpsp] {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 24px;
    border: 1px dashed rgba(14, 165, 233, 0.28);
    border-radius: 22px;
    text-align: center;
    background: rgba(224, 245, 255, 0.45);
}

.entry-empty-state > span[b-nhkp5qfpsp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 20px;
    color: var(--primary-dark);
    background: #fff;
    font-size: 1.35rem;
}

.entry-empty-state strong[b-nhkp5qfpsp] {
    color: var(--text-main);
    font-weight: 850;
}

.entry-form[b-nhkp5qfpsp] {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.payment-preview[b-nhkp5qfpsp] {
    display: grid;
    gap: 12px;
    margin-top: 18px;
    padding: 16px;
    border: 1px solid rgba(245, 158, 11, 0.24);
    border-radius: 22px;
    background: var(--finance-soft);
}

.payment-preview strong[b-nhkp5qfpsp] {
    display: block;
    margin-top: 3px;
    color: var(--text-main);
    font-size: 0.96rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.preview-grid[b-nhkp5qfpsp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.audit-note[b-nhkp5qfpsp] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 16px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: 0.86rem;
    font-weight: 750;
}

.soft-btn[b-nhkp5qfpsp],
.primary-btn[b-nhkp5qfpsp],
.void-soft-btn[b-nhkp5qfpsp],
.icon-btn[b-nhkp5qfpsp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    border: 0;
    border-radius: 16px;
    padding: 0 18px;
    font-weight: 850;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.soft-btn[b-nhkp5qfpsp] {
    border: 1px solid rgba(14, 165, 233, 0.22);
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.78);
}

.primary-btn[b-nhkp5qfpsp] {
    color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 14px 28px rgba(14, 165, 233, 0.24);
}

.void-soft-btn[b-nhkp5qfpsp] {
    color: #be123c;
    background: var(--danger-soft);
}

.compact[b-nhkp5qfpsp] {
    min-height: 38px;
    padding-inline: 14px;
    border-radius: 14px;
}

.save-btn[b-nhkp5qfpsp] {
    width: 100%;
    margin-top: 18px;
}

.soft-btn:hover:not(:disabled)[b-nhkp5qfpsp],
.primary-btn:hover:not(:disabled)[b-nhkp5qfpsp],
.void-soft-btn:hover:not(:disabled)[b-nhkp5qfpsp],
.icon-btn:hover:not(:disabled)[b-nhkp5qfpsp] {
    transform: translateY(-1px);
}

.primary-btn:hover:not(:disabled)[b-nhkp5qfpsp] {
    box-shadow: 0 18px 34px rgba(139, 92, 246, 0.28);
}

.primary-btn:disabled[b-nhkp5qfpsp],
.void-soft-btn:disabled[b-nhkp5qfpsp],
.icon-btn:disabled[b-nhkp5qfpsp] {
    cursor: not-allowed;
    opacity: 0.55;
}

.ledger-card[b-nhkp5qfpsp] {
    padding: 0;
    overflow: hidden;
}

.ledger-head[b-nhkp5qfpsp] {
    padding: 22px 24px;
    border-bottom: 1px solid var(--border-soft);
}

.payments-table-wrap[b-nhkp5qfpsp] {
    width: 100%;
    overflow-x: auto;
}

.payments-table[b-nhkp5qfpsp] {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}

.payments-table thead th[b-nhkp5qfpsp] {
    padding: 14px 18px;
    color: #63768a;
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.7), rgba(255, 247, 237, 0.52));
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
}

.payments-table tbody td[b-nhkp5qfpsp] {
    padding: 18px;
    border-top: 1px solid rgba(120, 170, 210, 0.14);
    color: var(--text-main);
    vertical-align: middle;
}

.payments-table tbody tr[b-nhkp5qfpsp] {
    transition: background 0.18s ease;
}

.payments-table tbody tr:hover[b-nhkp5qfpsp] {
    background: rgba(14, 165, 233, 0.045);
}

.payments-table td:first-child small[b-nhkp5qfpsp] {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.amount-value[b-nhkp5qfpsp] {
    color: var(--text-main);
    font-size: 0.98rem;
    font-weight: 900;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.action-stack[b-nhkp5qfpsp],
.mobile-actions[b-nhkp5qfpsp] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.icon-btn[b-nhkp5qfpsp] {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 20px rgba(23, 55, 90, 0.08);
}

.icon-btn.view[b-nhkp5qfpsp] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.icon-btn.void[b-nhkp5qfpsp] {
    color: #be123c;
    background: var(--danger-soft);
}

.mobile-payment-list[b-nhkp5qfpsp] {
    display: none;
    gap: 14px;
    padding: 16px;
}

.mobile-payment-card[b-nhkp5qfpsp] {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-card);
}

.mobile-card-top[b-nhkp5qfpsp] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 10px;
}

.mobile-card-top strong[b-nhkp5qfpsp] {
    color: var(--text-main);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.student-cell small[b-nhkp5qfpsp] {
    display: block;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 750;
}

.empty-state[b-nhkp5qfpsp] {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 58px 24px;
    text-align: center;
}

.empty-state > span[b-nhkp5qfpsp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 70px;
    border-radius: 24px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: 1.7rem;
}

.empty-state h5[b-nhkp5qfpsp] {
    margin: 8px 0 0;
    color: var(--text-main);
    font-weight: 850;
}

.soft-btn:focus-visible[b-nhkp5qfpsp],
.primary-btn:focus-visible[b-nhkp5qfpsp],
.void-soft-btn:focus-visible[b-nhkp5qfpsp],
.icon-btn:focus-visible[b-nhkp5qfpsp],
.receipt-link:focus-visible[b-nhkp5qfpsp],
.invoice-pill:focus-visible[b-nhkp5qfpsp],
.input-shell:focus-within[b-nhkp5qfpsp],
.select-shell:focus-within[b-nhkp5qfpsp] {
    outline: 3px solid rgba(14, 165, 233, 0.22);
    outline-offset: 2px;
}

@media (max-width: 1320px) {
    .context-grid[b-nhkp5qfpsp] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .invoice-search-field[b-nhkp5qfpsp],
    .invoice-select-field[b-nhkp5qfpsp] {
        grid-column: span 3;
    }

    .kpi-grid[b-nhkp5qfpsp] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1040px) {
    .workspace-grid[b-nhkp5qfpsp] {
        grid-template-columns: 1fr;
    }

    .payments-hero[b-nhkp5qfpsp],
    .card-head[b-nhkp5qfpsp],
    .ledger-head[b-nhkp5qfpsp] {
        align-items: stretch;
        flex-direction: column;
    }

    .context-grid[b-nhkp5qfpsp] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invoice-search-field[b-nhkp5qfpsp],
    .invoice-select-field[b-nhkp5qfpsp] {
        grid-column: span 2;
    }

    .invoice-preview[b-nhkp5qfpsp] {
        align-items: stretch;
        flex-direction: column;
    }

    .invoice-preview-stats[b-nhkp5qfpsp] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .payments-page[b-nhkp5qfpsp] {
        padding: 12px;
        border-radius: 22px;
    }

    .payments-hero[b-nhkp5qfpsp],
    .context-card[b-nhkp5qfpsp],
    .payment-card[b-nhkp5qfpsp],
    .ledger-card[b-nhkp5qfpsp] {
        border-radius: 24px;
    }

    .hero-title-wrap[b-nhkp5qfpsp],
    .section-title[b-nhkp5qfpsp] {
        align-items: flex-start;
    }

    .hero-icon[b-nhkp5qfpsp],
    .section-icon[b-nhkp5qfpsp] {
        width: 48px;
        height: 48px;
        border-radius: 18px;
    }

    .context-grid[b-nhkp5qfpsp],
    .kpi-grid[b-nhkp5qfpsp],
    .preview-grid[b-nhkp5qfpsp],
    .invoice-preview-stats[b-nhkp5qfpsp] {
        grid-template-columns: 1fr;
    }

    .invoice-search-field[b-nhkp5qfpsp],
    .invoice-select-field[b-nhkp5qfpsp] {
        grid-column: auto;
    }

    .payments-table-wrap[b-nhkp5qfpsp] {
        display: none;
    }

    .mobile-payment-list[b-nhkp5qfpsp] {
        display: grid;
    }

    .save-btn[b-nhkp5qfpsp] {
        position: sticky;
        bottom: 10px;
        z-index: 5;
    }
}

@media (max-width: 520px) {
    .context-chips[b-nhkp5qfpsp],
    .mobile-actions[b-nhkp5qfpsp] {
        align-items: stretch;
        flex-direction: column;
    }

    .context-chips > *[b-nhkp5qfpsp],
    .mobile-actions > *[b-nhkp5qfpsp],
    .payments-hero .hero-badge[b-nhkp5qfpsp] {
        width: 100%;
    }

    .mobile-card-top[b-nhkp5qfpsp] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-nhkp5qfpsp],
    *[b-nhkp5qfpsp]::before,
    *[b-nhkp5qfpsp]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/PayrollPage.razor.rz.scp.css */
@keyframes payrollRise-b-wgp6451mq9 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.payroll-page[b-wgp6451mq9] {
    --surface: rgba(255, 255, 255, .88);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --payroll: #f59e0b;
    --payroll-soft: #fff7ed;
    --paid: #10b981;
    --paid-soft: #dcfce7;
    --hold: #f59e0b;
    --hold-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 96px;
    color: var(--text-body);
    font-family: Inter, Manrope, "Noto Sans Myanmar", "Pyidaungsu", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.payroll-page.mybody[b-wgp6451mq9] {
    display: block;
    grid-template-rows: unset;
}

.payroll-page[b-wgp6451mq9]::-webkit-scrollbar,
.payroll-table-wrap[b-wgp6451mq9]::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.payroll-page[b-wgp6451mq9]::-webkit-scrollbar-track,
.payroll-table-wrap[b-wgp6451mq9]::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(226, 232, 240, .45);
}

.payroll-page[b-wgp6451mq9]::-webkit-scrollbar-thumb,
.payroll-table-wrap[b-wgp6451mq9]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(100, 116, 139, .42);
}

.payroll-page[b-wgp6451mq9]::before,
.payroll-page[b-wgp6451mq9]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.payroll-page[b-wgp6451mq9]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.payroll-page[b-wgp6451mq9]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.payroll-workspace-shell[b-wgp6451mq9] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: payrollRise-b-wgp6451mq9 .36s ease-out both;
}

.payroll-hero[b-wgp6451mq9],
.payroll-security-note[b-wgp6451mq9],
.payroll-control-card[b-wgp6451mq9],
.payroll-summary-card[b-wgp6451mq9],
.payroll-readiness-banner[b-wgp6451mq9],
.payroll-register-card[b-wgp6451mq9],
.payroll-empty-state[b-wgp6451mq9],
.payroll-mobile-card[b-wgp6451mq9] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.payroll-hero[b-wgp6451mq9] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border-radius: var(--radius-xl);
}

.payroll-hero[b-wgp6451mq9]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 300px;
    height: 300px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(245, 158, 11, .14), transparent 68%);
    pointer-events: none;
}

.payroll-hero-title[b-wgp6451mq9],
.payroll-hero-pills[b-wgp6451mq9],
.payroll-pill[b-wgp6451mq9],
.payroll-security-note[b-wgp6451mq9],
.payroll-card-title[b-wgp6451mq9],
.payroll-card-header[b-wgp6451mq9],
.period-chip[b-wgp6451mq9],
.payroll-input-shell[b-wgp6451mq9],
.payroll-control-footer[b-wgp6451mq9],
.payroll-control-actions[b-wgp6451mq9],
.payroll-summary-card[b-wgp6451mq9],
.payroll-readiness-banner[b-wgp6451mq9],
.register-tools[b-wgp6451mq9],
.payroll-staff-cell[b-wgp6451mq9],
.payroll-action-row[b-wgp6451mq9],
.payroll-icon-action[b-wgp6451mq9],
.empty-actions[b-wgp6451mq9],
.mobile-payroll-top[b-wgp6451mq9] {
    display: flex;
    align-items: center;
}

.payroll-hero-title[b-wgp6451mq9],
.payroll-card-title[b-wgp6451mq9],
.payroll-staff-cell[b-wgp6451mq9] {
    gap: 16px;
}

.payroll-hero-pills[b-wgp6451mq9],
.payroll-control-actions[b-wgp6451mq9],
.register-tools[b-wgp6451mq9],
.empty-actions[b-wgp6451mq9] {
    flex-wrap: wrap;
    gap: 10px;
}

.payroll-card-header[b-wgp6451mq9],
.payroll-control-footer[b-wgp6451mq9],
.mobile-payroll-top[b-wgp6451mq9] {
    justify-content: space-between;
    gap: 16px;
}

.payroll-pill[b-wgp6451mq9],
.period-chip[b-wgp6451mq9],
.payroll-icon-action[b-wgp6451mq9],
.generate-payroll-button[b-wgp6451mq9],
.load-period-button[b-wgp6451mq9],
.salary-config-button[b-wgp6451mq9] {
    justify-content: center;
    gap: 8px;
}

.payroll-hero-icon[b-wgp6451mq9],
.payroll-card-title > span[b-wgp6451mq9],
.preview-icon[b-wgp6451mq9],
.payroll-summary-card > span[b-wgp6451mq9],
.payroll-readiness-banner > span[b-wgp6451mq9],
.payroll-empty-state > span[b-wgp6451mq9],
.staff-avatar[b-wgp6451mq9] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.payroll-hero-icon[b-wgp6451mq9],
.payroll-card-title > span[b-wgp6451mq9] {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    color: var(--payroll);
    background: linear-gradient(145deg, #fff7ed, #e0f5ff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    font-size: 1.25rem;
}

.payroll-hero-title h1[b-wgp6451mq9],
.payroll-card-title h2[b-wgp6451mq9],
.payroll-empty-state h2[b-wgp6451mq9] {
    margin: 0;
    color: var(--text-main);
    font-weight: 800;
    letter-spacing: -.03em;
}

.payroll-hero-title h1[b-wgp6451mq9] {
    font-size: clamp(1.75rem, 1.4vw + 1.25rem, 2.18rem);
}

.payroll-hero-title p[b-wgp6451mq9],
.payroll-card-title p[b-wgp6451mq9],
.payroll-empty-state p[b-wgp6451mq9] {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .92rem;
}

.payroll-pill[b-wgp6451mq9],
.period-chip[b-wgp6451mq9],
.record-count-pill[b-wgp6451mq9],
.net-total-pill[b-wgp6451mq9] {
    position: relative;
    z-index: 1;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(245, 158, 11, .2);
    border-radius: 999px;
    color: #b45309;
    background: var(--payroll-soft);
    font-size: .8rem;
    font-weight: 850;
    white-space: nowrap;
}

.payroll-pill.secure[b-wgp6451mq9],
.net-total-pill[b-wgp6451mq9] {
    color: var(--primary-dark);
    border-color: rgba(14, 165, 233, .2);
    background: var(--primary-soft);
}

.payroll-security-note[b-wgp6451mq9] {
    gap: 10px;
    padding: 13px 16px;
    border-radius: 18px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, .72);
    font-size: .88rem;
    font-weight: 750;
}

.payroll-control-card[b-wgp6451mq9],
.payroll-register-card[b-wgp6451mq9] {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: var(--radius-xl);
}

.payroll-control-layout[b-wgp6451mq9] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
    align-items: stretch;
}

.payroll-fields-grid[b-wgp6451mq9] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.payroll-field[b-wgp6451mq9] {
    display: grid;
    gap: 7px;
}

.payroll-field span[b-wgp6451mq9],
.payroll-field small[b-wgp6451mq9] {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 750;
}

.payroll-field span[b-wgp6451mq9] {
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.payroll-input-shell[b-wgp6451mq9] {
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: rgba(255, 255, 255, .84);
    transition: border .18s ease, box-shadow .18s ease, background .18s ease;
}

.payroll-input-shell:focus-within[b-wgp6451mq9] {
    border-color: rgba(245, 158, 11, .42);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .1);
}

.payroll-input-shell.is-invalid[b-wgp6451mq9] {
    border-color: rgba(239, 71, 111, .5);
    box-shadow: 0 0 0 4px rgba(239, 71, 111, .08);
}

.payroll-input-shell > i[b-wgp6451mq9] {
    color: var(--primary);
}

.payroll-input[b-wgp6451mq9] {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border: 0;
    outline: 0;
    color: var(--text-main);
    background: transparent;
    box-shadow: none;
    font-size: .92rem;
    font-weight: 750;
}

.exchange-input[b-wgp6451mq9] {
    text-align: right;
}

.payroll-run-preview[b-wgp6451mq9] {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 20px;
    border: 1px solid rgba(245, 158, 11, .18);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(145deg, rgba(255, 247, 237, .9), rgba(255, 255, 255, .72)),
        var(--payroll-soft);
    text-align: center;
}

.preview-icon[b-wgp6451mq9] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: var(--payroll);
    background: rgba(255, 255, 255, .78);
    font-size: 1.3rem;
}

.payroll-run-preview p[b-wgp6451mq9],
.payroll-run-preview small[b-wgp6451mq9] {
    margin: 0;
    color: #b45309;
    font-size: .82rem;
    font-weight: 800;
}

.payroll-run-preview strong[b-wgp6451mq9] {
    color: var(--text-main);
    font-size: clamp(1.35rem, 1.1vw + .95rem, 1.85rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.preview-meta-grid[b-wgp6451mq9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.preview-meta-grid span[b-wgp6451mq9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--text-body);
    background: rgba(255, 255, 255, .62);
    font-size: .76rem;
    font-weight: 800;
}

.payroll-control-footer[b-wgp6451mq9] {
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid rgba(120, 170, 210, .14);
}

.payroll-control-footer > span[b-wgp6451mq9] {
    color: var(--text-muted);
    font-size: .86rem;
    font-weight: 750;
}

.generate-payroll-button[b-wgp6451mq9],
.load-period-button[b-wgp6451mq9],
.salary-config-button[b-wgp6451mq9] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 15px;
    font-size: .9rem;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.generate-payroll-button[b-wgp6451mq9] {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 14px 28px rgba(14, 165, 233, .24);
}

.load-period-button[b-wgp6451mq9],
.salary-config-button[b-wgp6451mq9] {
    border: 1px solid rgba(14, 165, 233, .22);
    color: var(--primary-dark);
    background: rgba(255, 255, 255, .82);
}

.salary-config-button[b-wgp6451mq9] {
    border-color: rgba(245, 158, 11, .22);
    color: #b45309;
}

.generate-payroll-button:hover[b-wgp6451mq9],
.load-period-button:hover[b-wgp6451mq9],
.salary-config-button:hover[b-wgp6451mq9],
.payroll-icon-action:hover[b-wgp6451mq9] {
    transform: translateY(-1px);
}

.generate-payroll-button:hover[b-wgp6451mq9] {
    box-shadow: 0 18px 34px rgba(139, 92, 246, .26);
}

.load-period-button:hover[b-wgp6451mq9] {
    background: var(--primary-soft);
}

.salary-config-button:hover[b-wgp6451mq9] {
    background: var(--payroll-soft);
}

.generate-payroll-button:disabled[b-wgp6451mq9],
.payroll-icon-action:disabled[b-wgp6451mq9] {
    cursor: not-allowed;
    opacity: .55;
    transform: none;
}

.generate-payroll-button:focus-visible[b-wgp6451mq9],
.load-period-button:focus-visible[b-wgp6451mq9],
.salary-config-button:focus-visible[b-wgp6451mq9],
.payroll-icon-action:focus-visible[b-wgp6451mq9],
.payroll-input:focus-visible[b-wgp6451mq9] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 3px;
}

.payroll-summary-grid[b-wgp6451mq9] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.payroll-summary-card[b-wgp6451mq9] {
    gap: 14px;
    min-height: 116px;
    padding: 18px;
    border-radius: var(--radius-lg);
}

.payroll-summary-card > span[b-wgp6451mq9] {
    width: 48px;
    height: 48px;
    border-radius: 17px;
    color: var(--primary);
    background: var(--primary-soft);
}

.payroll-summary-card.payroll > span[b-wgp6451mq9],
.payroll-summary-card.hold > span[b-wgp6451mq9] {
    color: var(--payroll);
    background: var(--payroll-soft);
}

.payroll-summary-card.paid > span[b-wgp6451mq9] {
    color: var(--paid);
    background: var(--paid-soft);
}

.payroll-summary-card.danger > span[b-wgp6451mq9] {
    color: var(--danger);
    background: var(--danger-soft);
}

.payroll-summary-card.muted > span[b-wgp6451mq9] {
    color: #64748b;
    background: rgba(241, 245, 249, .86);
}

.payroll-summary-card p[b-wgp6451mq9],
.payroll-summary-card small[b-wgp6451mq9] {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 750;
}

.payroll-summary-card strong[b-wgp6451mq9] {
    display: block;
    color: var(--text-main);
    font-size: clamp(1.05rem, .9vw + .75rem, 1.45rem);
    font-weight: 850;
    letter-spacing: -.03em;
}

.payroll-readiness-banner[b-wgp6451mq9] {
    gap: 13px;
    padding: 17px;
    border-radius: var(--radius-lg);
}

.payroll-readiness-banner > span[b-wgp6451mq9] {
    width: 48px;
    height: 48px;
    border-radius: 17px;
}

.payroll-readiness-banner.ready > span[b-wgp6451mq9],
.payroll-readiness-banner.generated > span[b-wgp6451mq9] {
    color: var(--paid);
    background: var(--paid-soft);
}

.payroll-readiness-banner.not-loaded > span[b-wgp6451mq9] {
    color: var(--payroll);
    background: var(--payroll-soft);
}

.payroll-readiness-banner strong[b-wgp6451mq9] {
    color: var(--text-main);
    font-weight: 900;
}

.payroll-readiness-banner p[b-wgp6451mq9] {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: .88rem;
    font-weight: 700;
}

.payroll-table-wrap[b-wgp6451mq9] {
    overflow-x: auto;
    border: 1px solid rgba(120, 170, 210, .14);
    border-radius: 24px;
    background: rgba(255, 255, 255, .54);
}

.payroll-table[b-wgp6451mq9] {
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 0;
}

.payroll-table th[b-wgp6451mq9] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 15px 18px;
    color: var(--text-muted);
    background: rgba(255, 247, 237, .88);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.payroll-table td[b-wgp6451mq9] {
    padding: 16px 18px;
    border-top: 1px solid rgba(120, 170, 210, .13);
    color: var(--text-body);
    vertical-align: middle;
}

.payroll-table tbody tr[b-wgp6451mq9] {
    transition: background .18s ease, box-shadow .18s ease;
}

.payroll-table tbody tr:hover[b-wgp6451mq9] {
    background: rgba(14, 165, 233, .045);
}

.payroll-table tbody tr.row-paid[b-wgp6451mq9] {
    box-shadow: inset 4px 0 0 rgba(16, 185, 129, .72);
}

.payroll-table tbody tr.row-hold[b-wgp6451mq9] {
    box-shadow: inset 4px 0 0 rgba(245, 158, 11, .78);
}

.payroll-table tbody tr.row-processed[b-wgp6451mq9] {
    box-shadow: inset 4px 0 0 rgba(14, 165, 233, .42);
}

.staff-avatar[b-wgp6451mq9] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: #fff;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .45), transparent 32%),
        linear-gradient(135deg, #0ea5e9, #8b5cf6);
    font-size: .85rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.payroll-staff-cell strong[b-wgp6451mq9] {
    display: block;
    color: var(--text-main);
    font-size: .96rem;
    font-weight: 850;
}

.payroll-staff-cell code[b-wgp6451mq9] {
    display: inline-flex;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 800;
}

.money-value[b-wgp6451mq9],
.net-value[b-wgp6451mq9] {
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 820;
}

.money-value.positive[b-wgp6451mq9] {
    color: #047857;
}

.money-value.deduction[b-wgp6451mq9] {
    color: #be123c;
}

.money-value.muted[b-wgp6451mq9] {
    color: var(--text-muted);
}

.net-value[b-wgp6451mq9] {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    color: #92400e;
    background: var(--payroll-soft);
    font-weight: 900;
}

.net-value.warning[b-wgp6451mq9] {
    color: #be123c;
    background: var(--danger-soft);
}

.status-pill[b-wgp6451mq9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.status-pill i[b-wgp6451mq9] {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.status-pill.paid[b-wgp6451mq9] {
    color: #047857;
    border-color: rgba(16, 185, 129, .18);
    background: var(--paid-soft);
}

.status-pill.hold[b-wgp6451mq9] {
    color: #b45309;
    border-color: rgba(245, 158, 11, .18);
    background: var(--hold-soft);
}

.status-pill.processed[b-wgp6451mq9] {
    color: var(--primary-dark);
    border-color: rgba(14, 165, 233, .18);
    background: var(--primary-soft);
}

.payroll-action-row[b-wgp6451mq9] {
    justify-content: flex-end;
    gap: 8px;
}

.payroll-icon-action[b-wgp6451mq9] {
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: transform .18s ease, background .18s ease;
}

.action-paid[b-wgp6451mq9] {
    color: #047857;
    border-color: rgba(16, 185, 129, .18);
    background: var(--paid-soft);
}

.action-hold[b-wgp6451mq9] {
    color: #b45309;
    border-color: rgba(245, 158, 11, .18);
    background: var(--hold-soft);
}

.action-slip[b-wgp6451mq9] {
    color: var(--primary-dark);
    border-color: rgba(14, 165, 233, .18);
    background: var(--primary-soft);
}

.payroll-empty-state[b-wgp6451mq9] {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    min-height: 280px;
    padding: 34px;
    border-radius: 24px;
    text-align: center;
}

.payroll-empty-state > span[b-wgp6451mq9] {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    color: var(--payroll);
    background: var(--payroll-soft);
    font-size: 1.45rem;
}

.payroll-mobile-list[b-wgp6451mq9] {
    display: none;
    gap: 12px;
}

.payroll-mobile-card[b-wgp6451mq9] {
    display: grid;
    gap: 13px;
    padding: 17px;
    border-radius: var(--radius-lg);
}

.payroll-mobile-card.row-paid[b-wgp6451mq9] {
    box-shadow: inset 4px 0 0 rgba(16, 185, 129, .72), var(--shadow-card);
}

.payroll-mobile-card.row-hold[b-wgp6451mq9] {
    box-shadow: inset 4px 0 0 rgba(245, 158, 11, .78), var(--shadow-card);
}

.mobile-money-grid[b-wgp6451mq9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mobile-money-item[b-wgp6451mq9] {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(120, 170, 210, .14);
    border-radius: 17px;
    background: rgba(248, 252, 255, .72);
}

.mobile-money-item small[b-wgp6451mq9] {
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.mobile-money-item strong[b-wgp6451mq9] {
    color: var(--text-main);
    font-size: .92rem;
    font-weight: 850;
}

.mobile-money-item.positive strong[b-wgp6451mq9] {
    color: #047857;
}

.mobile-money-item.deduction strong[b-wgp6451mq9] {
    color: #be123c;
}

.mobile-money-item.net[b-wgp6451mq9] {
    background: var(--payroll-soft);
}

.mobile-money-item.net strong[b-wgp6451mq9] {
    color: #92400e;
    font-weight: 900;
}

.mobile-actions[b-wgp6451mq9] {
    justify-content: flex-start;
}

@media (max-width: 1420px) {
    .payroll-summary-grid[b-wgp6451mq9] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .payroll-control-layout[b-wgp6451mq9] {
        grid-template-columns: 1fr;
    }

    .payroll-run-preview[b-wgp6451mq9] {
        justify-items: start;
        text-align: left;
    }
}

@media (max-width: 980px) {
    .payroll-fields-grid[b-wgp6451mq9] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .payroll-page[b-wgp6451mq9] {
        padding: 16px 12px 72px;
    }

    .payroll-workspace-shell[b-wgp6451mq9] {
        padding: 14px;
        border-radius: 26px;
    }

    .payroll-hero[b-wgp6451mq9],
    .payroll-card-header[b-wgp6451mq9],
    .payroll-control-footer[b-wgp6451mq9],
    .register-tools[b-wgp6451mq9],
    .mobile-payroll-top[b-wgp6451mq9] {
        align-items: flex-start;
        flex-direction: column;
    }

    .payroll-pill[b-wgp6451mq9],
    .period-chip[b-wgp6451mq9],
    .generate-payroll-button[b-wgp6451mq9],
    .load-period-button[b-wgp6451mq9],
    .salary-config-button[b-wgp6451mq9],
    .payroll-control-actions[b-wgp6451mq9],
    .record-count-pill[b-wgp6451mq9],
    .net-total-pill[b-wgp6451mq9] {
        width: 100%;
    }

    .preview-meta-grid[b-wgp6451mq9],
    .payroll-summary-grid[b-wgp6451mq9],
    .mobile-money-grid[b-wgp6451mq9] {
        grid-template-columns: 1fr;
    }

    .payroll-table-wrap[b-wgp6451mq9] {
        display: none;
    }

    .payroll-mobile-list[b-wgp6451mq9] {
        display: grid;
    }

    .payroll-control-card[b-wgp6451mq9],
    .payroll-register-card[b-wgp6451mq9] {
        padding: 18px;
        border-radius: 24px;
    }
}

@media (max-width: 520px) {
    .payroll-hero-title[b-wgp6451mq9],
    .payroll-card-title[b-wgp6451mq9],
    .payroll-staff-cell[b-wgp6451mq9] {
        align-items: flex-start;
        flex-direction: column;
    }

    .payroll-action-row[b-wgp6451mq9] {
        justify-content: flex-start;
    }
}
/* /Components/Pages/ProfitLossReportPage.razor.rz.scp.css */
.profit-loss-page[b-38r58h73o3] {
    --surface: rgba(255, 255, 255, 0.88);
    --surface-soft: rgba(248, 252, 255, 0.78);
    --border-soft: rgba(120, 170, 210, 0.22);
    --border-glass: rgba(255, 255, 255, 0.75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --income: #10b981;
    --income-soft: #dcfce7;
    --cogs: #f59e0b;
    --cogs-soft: #fff7ed;
    --expense: #ef476f;
    --expense-soft: #ffe4ec;
    --profit: #0ea5e9;
    --profit-soft: #e0f5ff;
    --success: #10b981;
    --success-soft: #dcfce7;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, 0.08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, 0.07);
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
}

.profit-loss-shell[b-38r58h73o3] {
    position: relative;
    display: grid;
    gap: 18px;
    max-width: 1600px;
    margin: 0 auto;
    min-height: 0;
}

.profit-loss-shell[b-38r58h73o3]::before,
.profit-loss-shell[b-38r58h73o3]::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 999px;
    filter: blur(16px);
    pointer-events: none;
}

.profit-loss-shell[b-38r58h73o3]::before {
    top: 42px;
    left: 28px;
    width: 290px;
    height: 290px;
    background: rgba(14, 165, 233, 0.14);
}

.profit-loss-shell[b-38r58h73o3]::after {
    right: 34px;
    bottom: 28px;
    width: 340px;
    height: 340px;
    background: rgba(236, 72, 153, 0.12);
}

.pl-hero[b-38r58h73o3],
.controls-card[b-38r58h73o3],
.health-banner[b-38r58h73o3],
.kpi-card[b-38r58h73o3],
.formula-strip[b-38r58h73o3],
.net-profit-panel[b-38r58h73o3],
.statement-card[b-38r58h73o3],
.insights-card[b-38r58h73o3],
.empty-state[b-38r58h73o3] {
    border: 1px solid var(--border-glass);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72)),
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.1), transparent 34%),
        radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.08), transparent 36%);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.pl-hero[b-38r58h73o3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
}

.hero-main[b-38r58h73o3],
.section-title-wrap[b-38r58h73o3],
.section-head[b-38r58h73o3],
.period-chips[b-38r58h73o3],
.health-banner[b-38r58h73o3],
.kpi-card[b-38r58h73o3],
.formula-strip[b-38r58h73o3],
.net-profit-panel[b-38r58h73o3],
.panel-side[b-38r58h73o3],
.statement-row[b-38r58h73o3],
.insight-head[b-38r58h73o3] {
    display: flex;
    align-items: center;
}

.hero-main[b-38r58h73o3] {
    gap: 16px;
}

.hero-icon[b-38r58h73o3],
.section-icon[b-38r58h73o3],
.banner-icon[b-38r58h73o3],
.kpi-icon[b-38r58h73o3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.hero-icon[b-38r58h73o3] {
    width: 60px;
    height: 60px;
    border-radius: 23px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #2563eb 48%, #f59e0b);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.24);
}

.pl-hero h1[b-38r58h73o3] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.pl-hero p[b-38r58h73o3],
.section-title-wrap p[b-38r58h73o3],
.health-banner p[b-38r58h73o3],
.net-profit-panel p[b-38r58h73o3] {
    margin: 3px 0 0;
    color: var(--text-body);
    line-height: 1.55;
}

.refresh-btn[b-38r58h73o3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, 0.76);
    font-weight: 850;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.refresh-btn.compact[b-38r58h73o3] {
    min-height: 40px;
}

.refresh-btn:hover[b-38r58h73o3] {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(14, 165, 233, 0.14);
}

.controls-card[b-38r58h73o3],
.statement-card[b-38r58h73o3],
.insights-card[b-38r58h73o3],
.empty-state[b-38r58h73o3] {
    border-radius: 28px;
    padding: 20px;
}

.section-head[b-38r58h73o3] {
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.section-head.compact[b-38r58h73o3] {
    margin-bottom: 14px;
}

.section-title-wrap[b-38r58h73o3] {
    gap: 12px;
}

.section-icon[b-38r58h73o3] {
    width: 44px;
    height: 44px;
    border-radius: 17px;
    color: #0369a1;
    background: var(--primary-soft);
}

.section-icon.statement[b-38r58h73o3] {
    color: #047857;
    background: var(--income-soft);
}

.section-icon.insights[b-38r58h73o3] {
    color: #7e22ce;
    background: var(--violet-soft);
}

.section-title-wrap h2[b-38r58h73o3] {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.section-title-wrap p[b-38r58h73o3] {
    font-size: 0.86rem;
}

.period-chips[b-38r58h73o3] {
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.period-chip[b-38r58h73o3],
.result-badge[b-38r58h73o3],
.statement-badge[b-38r58h73o3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 850;
    white-space: nowrap;
}

.period-chip[b-38r58h73o3] {
    min-height: 36px;
    padding: 0 12px;
    color: #0369a1;
    background: var(--primary-soft);
}

.period-chip.days[b-38r58h73o3] {
    color: #7c2d12;
    background: var(--cogs-soft);
}

.controls-grid[b-38r58h73o3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(190px, 1fr));
    gap: 14px;
    max-width: 560px;
}

.date-field[b-38r58h73o3] {
    display: grid;
    gap: 8px;
}

.date-field > span[b-38r58h73o3] {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.input-shell[b-38r58h73o3] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 13px;
    border-radius: 17px;
    border: 1px solid rgba(120, 170, 210, 0.26);
    background: rgba(255, 255, 255, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.input-shell i[b-38r58h73o3] {
    color: var(--primary);
}

.date-input[b-38r58h73o3] {
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font-size: 0.93rem;
    font-weight: 750;
    outline: 0;
}

.date-field.invalid .input-shell[b-38r58h73o3] {
    border-color: rgba(239, 71, 111, 0.48);
    background: rgba(255, 228, 236, 0.72);
}

.input-shell:focus-within[b-38r58h73o3] {
    border-color: rgba(14, 165, 233, 0.68);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.validation-note[b-38r58h73o3] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 15px;
    color: #be123c;
    background: var(--danger-soft);
    font-weight: 800;
}

.health-banner[b-38r58h73o3] {
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
}

.banner-icon[b-38r58h73o3] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: #fff;
}

.health-banner.success .banner-icon[b-38r58h73o3] {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.health-banner.danger .banner-icon[b-38r58h73o3] {
    background: linear-gradient(135deg, #ef476f, #f43f5e);
}

.health-banner.warning .banner-icon[b-38r58h73o3] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.health-banner.neutral .banner-icon[b-38r58h73o3] {
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
}

.health-banner strong[b-38r58h73o3] {
    font-weight: 900;
}

.kpi-grid[b-38r58h73o3] {
    display: grid;
    grid-template-columns: repeat(5, minmax(170px, 1fr));
    gap: 12px;
}

.kpi-card[b-38r58h73o3] {
    gap: 13px;
    min-height: 138px;
    padding: 18px;
    border-radius: var(--radius-lg);
}

.kpi-card.featured[b-38r58h73o3] {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(224, 245, 255, 0.74)),
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.13), transparent 42%);
}

.kpi-icon[b-38r58h73o3] {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.12);
}

.kpi-card.income .kpi-icon[b-38r58h73o3],
.kpi-card.success .kpi-icon[b-38r58h73o3] {
    background: linear-gradient(135deg, #10b981, #22c55e);
}

.kpi-card.cogs .kpi-icon[b-38r58h73o3],
.kpi-card.muted .kpi-icon[b-38r58h73o3] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.kpi-card.profit .kpi-icon[b-38r58h73o3] {
    background: linear-gradient(135deg, #0ea5e9, #2563eb);
}

.kpi-card.expense .kpi-icon[b-38r58h73o3],
.kpi-card.danger .kpi-icon[b-38r58h73o3] {
    background: linear-gradient(135deg, #ef476f, #f43f5e);
}

.kpi-card.neutral .kpi-icon[b-38r58h73o3] {
    background: linear-gradient(135deg, #64748b, #94a3b8);
}

.kpi-card span[b-38r58h73o3],
.formula-tile span[b-38r58h73o3],
.panel-label[b-38r58h73o3],
.insight-head span[b-38r58h73o3] {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.kpi-card strong[b-38r58h73o3] {
    display: block;
    margin-top: 5px;
    font-size: clamp(1.15rem, 1.8vw, 1.65rem);
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.kpi-card.featured strong[b-38r58h73o3] {
    font-size: clamp(1.35rem, 2vw, 1.95rem);
}

.kpi-card small[b-38r58h73o3] {
    display: block;
    margin-top: 7px;
    color: var(--text-body);
}

.formula-strip[b-38r58h73o3] {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    border-radius: 28px;
}

.formula-tile[b-38r58h73o3] {
    display: grid;
    min-width: 150px;
    gap: 4px;
    padding: 13px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(120, 170, 210, 0.18);
}

.formula-tile strong[b-38r58h73o3] {
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.formula-tile.income strong[b-38r58h73o3],
.formula-tile.success strong[b-38r58h73o3] {
    color: #047857;
}

.formula-tile.cogs strong[b-38r58h73o3] {
    color: #b45309;
}

.formula-tile.profit strong[b-38r58h73o3] {
    color: #0369a1;
}

.formula-tile.expense strong[b-38r58h73o3],
.formula-tile.danger strong[b-38r58h73o3] {
    color: #be123c;
}

.operator[b-38r58h73o3] {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 14px;
    color: #0369a1;
    background: var(--primary-soft);
    font-size: 1.25rem;
    font-weight: 950;
}

.net-profit-panel[b-38r58h73o3] {
    justify-content: space-between;
    gap: 18px;
    padding: 24px 28px;
    border-radius: 30px;
}

.net-profit-panel.success[b-38r58h73o3] {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(220, 252, 231, 0.72)),
        radial-gradient(circle at top right, rgba(16, 185, 129, 0.18), transparent 42%);
}

.net-profit-panel.danger[b-38r58h73o3] {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 228, 236, 0.72)),
        radial-gradient(circle at top right, rgba(239, 71, 111, 0.16), transparent 42%);
}

.net-profit-panel.neutral[b-38r58h73o3] {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(226, 232, 240, 0.68)),
        radial-gradient(circle at top right, rgba(100, 116, 139, 0.13), transparent 42%);
}

.net-profit-panel > div:first-child strong[b-38r58h73o3] {
    display: block;
    margin-top: 5px;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 950;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
}

.net-profit-panel.success > div:first-child strong[b-38r58h73o3] {
    color: #047857;
}

.net-profit-panel.danger > div:first-child strong[b-38r58h73o3] {
    color: #be123c;
}

.panel-side[b-38r58h73o3] {
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.result-badge[b-38r58h73o3] {
    min-height: 38px;
    padding: 0 13px;
    color: #047857;
    background: var(--success-soft);
}

.net-profit-panel.danger .result-badge[b-38r58h73o3] {
    color: #be123c;
    background: var(--danger-soft);
}

.net-profit-panel.neutral .result-badge[b-38r58h73o3] {
    color: #475569;
    background: rgba(226, 232, 240, 0.9);
}

.margin-block[b-38r58h73o3] {
    display: grid;
    gap: 3px;
    min-width: 150px;
    padding: 13px 15px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(120, 170, 210, 0.18);
}

.margin-block span[b-38r58h73o3] {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 850;
}

.margin-block strong[b-38r58h73o3] {
    font-size: 1.35rem;
    font-weight: 950;
}

.report-grid[b-38r58h73o3] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: 18px;
    align-items: start;
}

.statement-rows[b-38r58h73o3] {
    display: grid;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(120, 170, 210, 0.16);
    background: rgba(255, 255, 255, 0.58);
}

.statement-row[b-38r58h73o3] {
    display: grid;
    grid-template-columns: 1fr auto minmax(150px, auto);
    gap: 14px;
    padding: 15px 17px;
    border-top: 1px solid rgba(120, 170, 210, 0.13);
}

.statement-row:first-child[b-38r58h73o3] {
    border-top: 0;
}

.statement-row.subtotal[b-38r58h73o3],
.statement-row.result[b-38r58h73o3] {
    background: rgba(224, 245, 255, 0.45);
}

.statement-row.result[b-38r58h73o3] {
    border-top: 2px solid rgba(14, 165, 233, 0.24);
}

.statement-row strong[b-38r58h73o3] {
    display: block;
    font-weight: 900;
}

.statement-row > div span[b-38r58h73o3] {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.statement-badge[b-38r58h73o3] {
    align-self: center;
    min-height: 30px;
    padding: 0 10px;
    color: #0369a1;
    background: var(--primary-soft);
}

.statement-row.expense .statement-badge[b-38r58h73o3],
.statement-row.danger .statement-badge[b-38r58h73o3] {
    color: #be123c;
    background: var(--danger-soft);
}

.statement-row.cogs .statement-badge[b-38r58h73o3] {
    color: #b45309;
    background: var(--warning-soft);
}

.statement-row.success .statement-badge[b-38r58h73o3],
.statement-row.income .statement-badge[b-38r58h73o3] {
    color: #047857;
    background: var(--success-soft);
}

.statement-row .amount[b-38r58h73o3] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.insights-card[b-38r58h73o3] {
    display: grid;
    gap: 14px;
}

.insight-block[b-38r58h73o3] {
    display: grid;
    gap: 9px;
    padding: 15px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(120, 170, 210, 0.18);
}

.insight-head[b-38r58h73o3] {
    justify-content: space-between;
    gap: 12px;
}

.insight-head strong[b-38r58h73o3] {
    font-size: 1.12rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.meter-track[b-38r58h73o3],
.bar-track[b-38r58h73o3] {
    overflow: hidden;
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.18);
}

.meter-fill[b-38r58h73o3],
.bar-fill[b-38r58h73o3] {
    height: 100%;
    border-radius: inherit;
}

.meter-fill.success[b-38r58h73o3],
.bar-fill.income[b-38r58h73o3] {
    background: linear-gradient(90deg, #10b981, #22c55e);
}

.meter-fill.danger[b-38r58h73o3],
.bar-fill.expense[b-38r58h73o3] {
    background: linear-gradient(90deg, #ef476f, #f43f5e);
}

.meter-fill.neutral[b-38r58h73o3] {
    background: linear-gradient(90deg, #94a3b8, #64748b);
}

.bar-compare[b-38r58h73o3] {
    display: grid;
    gap: 10px;
}

.bar-compare span[b-38r58h73o3],
.insight-block small[b-38r58h73o3] {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.insight-note[b-38r58h73o3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 18px;
    font-weight: 800;
}

.insight-note.ready[b-38r58h73o3] {
    color: #047857;
    background: var(--success-soft);
}

.insight-note.warning[b-38r58h73o3] {
    color: #b45309;
    background: var(--warning-soft);
}

.empty-state[b-38r58h73o3] {
    display: grid;
    place-items: center;
    gap: 8px;
    min-height: 210px;
    color: var(--text-body);
    text-align: center;
}

.empty-state i[b-38r58h73o3] {
    font-size: 2rem;
    color: var(--primary);
}

.empty-state strong[b-38r58h73o3] {
    color: var(--text-main);
    font-weight: 900;
}

.profit-loss-page [b-38r58h73o3]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.profit-loss-page [b-38r58h73o3]::-webkit-scrollbar-track {
    background: rgba(224, 245, 255, 0.52);
    border-radius: 999px;
}

.profit-loss-page [b-38r58h73o3]::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, 0.34);
    border-radius: 999px;
}

@media (max-width: 1400px) {
    .kpi-grid[b-38r58h73o3] {
        grid-template-columns: repeat(3, minmax(180px, 1fr));
    }
}

@media (max-width: 1080px) {
    .report-grid[b-38r58h73o3] {
        grid-template-columns: 1fr;
    }

    .kpi-grid[b-38r58h73o3] {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 760px) {
    .profit-loss-page[b-38r58h73o3] {
        padding-inline: 14px !important;
    }

    .pl-hero[b-38r58h73o3],
    .section-head[b-38r58h73o3],
    .net-profit-panel[b-38r58h73o3],
    .health-banner[b-38r58h73o3] {
        align-items: stretch;
        flex-direction: column;
    }

    .controls-grid[b-38r58h73o3],
    .kpi-grid[b-38r58h73o3] {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .formula-strip[b-38r58h73o3] {
        align-items: stretch;
        flex-direction: column;
    }

    .formula-tile[b-38r58h73o3] {
        width: 100%;
    }

    .operator[b-38r58h73o3] {
        margin: 0 auto;
    }

    .statement-row[b-38r58h73o3] {
        grid-template-columns: 1fr;
    }

    .statement-row .amount[b-38r58h73o3] {
        text-align: left;
    }
}

@media (max-width: 560px) {
    .profit-loss-page[b-38r58h73o3] {
        padding: 10px !important;
    }

    .pl-hero[b-38r58h73o3],
    .controls-card[b-38r58h73o3],
    .statement-card[b-38r58h73o3],
    .insights-card[b-38r58h73o3],
    .net-profit-panel[b-38r58h73o3],
    .formula-strip[b-38r58h73o3],
    .health-banner[b-38r58h73o3],
    .empty-state[b-38r58h73o3] {
        border-radius: 22px;
        padding: 16px;
    }

    .hero-main[b-38r58h73o3],
    .period-chips[b-38r58h73o3],
    .panel-side[b-38r58h73o3],
    .insight-head[b-38r58h73o3] {
        align-items: stretch;
        flex-direction: column;
    }

    .refresh-btn[b-38r58h73o3] {
        width: 100%;
    }
}
/* /Components/Pages/ReportCardDetailsPage.razor.rz.scp.css */
@keyframes reportDetailRise-b-xgkq8umqpm {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes reportDetailSpin-b-xgkq8umqpm {
    to {
        transform: rotate(360deg);
    }
}

.report-card-detail-page[b-xgkq8umqpm] {
    --surface: rgba(255, 255, 255, .88);
    --border-glass: rgba(255, 255, 255, .75);
    --border-soft: rgba(120, 170, 210, .22);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --report: #ec4899;
    --report-soft: #fce7f3;
    --gold: #f59e0b;
    --gold-soft: #fff7ed;
    --success: #10b981;
    --success-soft: #dcfce7;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --locked: #334155;
    --locked-soft: #f1f5f9;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    --shadow-paper: 0 24px 70px rgba(16, 32, 51, .10);
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 96px;
    color: var(--text-body);
    font-family: Inter, Manrope, "Noto Sans Myanmar", "Pyidaungsu", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.report-card-detail-page.mybody[b-xgkq8umqpm] {
    display: block;
    grid-template-rows: unset;
}

.report-card-detail-page[b-xgkq8umqpm]::before,
.report-card-detail-page[b-xgkq8umqpm]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.report-card-detail-page[b-xgkq8umqpm]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.report-card-detail-page[b-xgkq8umqpm]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.report-detail-shell[b-xgkq8umqpm] {
    display: grid;
    gap: 18px;
    width: min(100%, 1480px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: reportDetailRise-b-xgkq8umqpm .36s ease-out both;
}

.report-detail-hero[b-xgkq8umqpm],
.snapshot-status-strip[b-xgkq8umqpm],
.report-preview-frame[b-xgkq8umqpm],
.report-detail-loading[b-xgkq8umqpm],
.report-detail-empty[b-xgkq8umqpm] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.report-detail-hero[b-xgkq8umqpm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 24px 26px;
    border-radius: 30px;
}

.report-detail-title[b-xgkq8umqpm],
.report-detail-actions[b-xgkq8umqpm],
.detail-button[b-xgkq8umqpm],
.snapshot-status-strip[b-xgkq8umqpm],
.paper-student-header[b-xgkq8umqpm],
.overall-result-panel[b-xgkq8umqpm],
.overall-score-stack[b-xgkq8umqpm],
.paper-section-title[b-xgkq8umqpm],
.official-exam-empty[b-xgkq8umqpm],
.component-mobile-top[b-xgkq8umqpm],
.component-mobile-final[b-xgkq8umqpm],
.signature-row[b-xgkq8umqpm],
.report-detail-loading[b-xgkq8umqpm],
.report-detail-empty[b-xgkq8umqpm] {
    display: flex;
    align-items: center;
}

.report-detail-title[b-xgkq8umqpm],
.paper-section-title[b-xgkq8umqpm] {
    gap: 16px;
}

.report-detail-actions[b-xgkq8umqpm] {
    flex-wrap: wrap;
    gap: 10px;
}

.snapshot-status-strip[b-xgkq8umqpm] {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 24px;
}

.snapshot-status-strip span[b-xgkq8umqpm] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    padding: 8px 11px;
    border-radius: 999px;
    color: var(--primary-dark);
    font-size: .78rem;
    font-weight: 850;
    background: rgba(224, 245, 255, .72);
}

.report-detail-icon[b-xgkq8umqpm],
.paper-section-title > span[b-xgkq8umqpm],
.report-detail-empty > span[b-xgkq8umqpm] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.report-detail-icon[b-xgkq8umqpm] {
    width: 58px;
    height: 58px;
    color: white;
    font-size: 1.3rem;
    border-radius: 21px;
    background: linear-gradient(135deg, var(--primary), var(--violet) 54%, var(--report));
    box-shadow: 0 18px 34px rgba(236, 72, 153, .22);
}

.report-detail-hero h1[b-xgkq8umqpm],
.paper-student-header h2[b-xgkq8umqpm],
.paper-section-title h3[b-xgkq8umqpm],
.report-detail-loading h2[b-xgkq8umqpm],
.report-detail-empty h2[b-xgkq8umqpm] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.035em;
}

.report-detail-hero h1[b-xgkq8umqpm] {
    font-size: clamp(1.65rem, 2.4vw, 2.25rem);
}

.report-detail-hero p[b-xgkq8umqpm],
.paper-student-header p[b-xgkq8umqpm],
.report-detail-loading p[b-xgkq8umqpm],
.report-detail-empty p[b-xgkq8umqpm] {
    margin: 0;
    color: var(--text-body);
}

.detail-button[b-xgkq8umqpm] {
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.detail-button:hover:not(:disabled)[b-xgkq8umqpm] {
    transform: translateY(-2px);
}

.detail-button:disabled[b-xgkq8umqpm] {
    cursor: not-allowed;
    opacity: .55;
}

.detail-button-primary[b-xgkq8umqpm] {
    color: white;
    background: linear-gradient(135deg, var(--gold), #fb7185);
    box-shadow: 0 16px 30px rgba(245, 158, 11, .24);
}

.detail-button-ghost[b-xgkq8umqpm] {
    color: #9a5f00;
    background: rgba(255, 247, 237, .82);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .22);
}

.report-preview-frame[b-xgkq8umqpm] {
    padding: clamp(18px, 3vw, 34px);
    border-radius: 30px;
}

.report-paper[b-xgkq8umqpm] {
    width: min(100%, 980px);
    margin: 0 auto;
    padding: clamp(28px, 4vw, 54px);
    color: var(--text-main);
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--shadow-paper);
    font-family: Inter, Georgia, "Times New Roman", serif;
}

.paper-student-header[b-xgkq8umqpm] {
    justify-content: space-between;
    gap: 24px;
    margin: 24px 0;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(15, 23, 42, .1);
}

.paper-eyebrow[b-xgkq8umqpm] {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.paper-student-header h2[b-xgkq8umqpm] {
    font-size: clamp(1.55rem, 2.4vw, 2.15rem);
}

.paper-student-header code[b-xgkq8umqpm] {
    padding: 3px 7px;
    border-radius: 9px;
    color: var(--locked);
    background: var(--locked-soft);
    font-family: "Cascadia Mono", Consolas, monospace;
    font-size: .88em;
    font-weight: 800;
}

.paper-result-box[b-xgkq8umqpm] {
    display: grid;
    justify-items: end;
    gap: 8px;
    text-align: right;
}

.paper-result-box strong[b-xgkq8umqpm] {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.status-pill[b-xgkq8umqpm],
.grade-pill[b-xgkq8umqpm],
.exam-result-pill[b-xgkq8umqpm],
.component-chip[b-xgkq8umqpm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    font-weight: 850;
}

.status-pill[b-xgkq8umqpm] {
    gap: 7px;
    padding: 8px 12px;
    font-size: .78rem;
}

.status-draft[b-xgkq8umqpm] {
    color: #a16207;
    background: var(--gold-soft);
}

.status-locked[b-xgkq8umqpm] {
    color: var(--locked);
    background: var(--locked-soft);
}

.result-pass-text[b-xgkq8umqpm] {
    color: #047857;
}

.result-fail-text[b-xgkq8umqpm] {
    color: #be123c;
}

.overall-result-panel[b-xgkq8umqpm] {
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 22px;
}

.overall-result-panel span[b-xgkq8umqpm],
.overall-score-stack span[b-xgkq8umqpm] {
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.overall-result-panel strong[b-xgkq8umqpm] {
    display: block;
    color: var(--text-main);
    font-size: clamp(1.45rem, 2.6vw, 2.2rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.overall-result-panel p[b-xgkq8umqpm] {
    margin: 4px 0 0;
    color: var(--text-body);
    font-weight: 720;
}

.panel-passed[b-xgkq8umqpm] {
    background: linear-gradient(135deg, rgba(220, 252, 231, .82), rgba(224, 245, 255, .62));
}

.panel-failed[b-xgkq8umqpm] {
    background: linear-gradient(135deg, rgba(255, 228, 236, .86), rgba(252, 231, 243, .62));
}

.overall-score-stack[b-xgkq8umqpm] {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.overall-score-stack span[b-xgkq8umqpm] {
    display: inline-flex;
    padding: 8px 10px;
    border-radius: 999px;
    color: var(--text-main);
    background: rgba(255, 255, 255, .68);
}

.paper-summary-grid[b-xgkq8umqpm] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.paper-summary-grid article[b-xgkq8umqpm] {
    padding: 15px;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 18px;
    background: rgba(248, 252, 255, .74);
}

.paper-summary-grid article[b-xgkq8umqpm] {
    position: relative;
    overflow: hidden;
}

.paper-summary-grid article[b-xgkq8umqpm]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--primary);
}

.metric-component[b-xgkq8umqpm]::before {
    background: linear-gradient(180deg, var(--report), var(--violet)) !important;
}

.metric-exam[b-xgkq8umqpm]::before {
    background: linear-gradient(180deg, var(--primary), var(--violet)) !important;
}

.metric-generated[b-xgkq8umqpm]::before {
    background: linear-gradient(180deg, var(--primary), #64748b) !important;
}

.metric-missing[b-xgkq8umqpm]::before {
    background: linear-gradient(180deg, var(--gold), #94a3b8) !important;
}

.paper-summary-grid span[b-xgkq8umqpm] {
    display: block;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.paper-summary-grid strong[b-xgkq8umqpm] {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.paper-summary-grid small[b-xgkq8umqpm] {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 750;
}

.paper-section[b-xgkq8umqpm] {
    margin-top: 22px;
}

.paper-section-title[b-xgkq8umqpm] {
    margin-bottom: 12px;
}

.paper-section-title > span[b-xgkq8umqpm] {
    width: 40px;
    height: 40px;
    color: var(--primary-dark);
    border-radius: 15px;
    background: var(--primary-soft);
}

.paper-section-title h3[b-xgkq8umqpm] {
    font-size: 1.05rem;
}

.paper-section-title p[b-xgkq8umqpm] {
    margin: 2px 0 0;
    color: var(--text-body);
    font-size: .86rem;
    font-weight: 720;
}

.paper-table-wrap[b-xgkq8umqpm] {
    overflow-x: auto;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 18px;
}

.paper-table[b-xgkq8umqpm] {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
}

.paper-table th[b-xgkq8umqpm] {
    padding: 14px 16px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(248, 250, 252, .92);
    border-bottom: 1px solid rgba(120, 170, 210, .16);
}

.paper-table td[b-xgkq8umqpm] {
    padding: 14px 16px;
    color: var(--text-body);
    border-bottom: 1px solid rgba(120, 170, 210, .12);
    vertical-align: middle;
}

.paper-table tbody tr:last-child td[b-xgkq8umqpm] {
    border-bottom: 0;
}

.paper-table strong[b-xgkq8umqpm] {
    display: block;
    color: var(--text-main);
    font-weight: 900;
}

.paper-table span:not(.component-chip):not(.grade-pill):not(.exam-result-pill)[b-xgkq8umqpm] {
    display: block;
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 720;
}

.component-chip[b-xgkq8umqpm] {
    margin: 0 5px 6px 0;
    padding: 7px 10px;
    color: var(--locked);
    font-size: .78rem;
    background: var(--locked-soft);
}

.component-active[b-xgkq8umqpm] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.component-zero[b-xgkq8umqpm] {
    color: #9f1239;
    background: var(--danger-soft);
}

.grade-pill[b-xgkq8umqpm] {
    padding: 7px 12px;
    color: #a16207;
    background: var(--gold-soft);
}

.grade-strong[b-xgkq8umqpm] {
    color: #047857;
    background: var(--success-soft);
}

.grade-watch[b-xgkq8umqpm] {
    color: #a16207;
    background: var(--gold-soft);
}

.grade-failed[b-xgkq8umqpm] {
    color: #be123c;
    background: var(--danger-soft);
}

.grade-muted[b-xgkq8umqpm] {
    color: #475569;
    background: var(--locked-soft);
}

.exam-result-pill[b-xgkq8umqpm] {
    padding: 7px 12px;
}

.result-passed[b-xgkq8umqpm] {
    color: #047857;
    background: var(--success-soft);
}

.result-failed[b-xgkq8umqpm] {
    color: #be123c;
    background: var(--danger-soft);
}

.score-cell[b-xgkq8umqpm] {
    color: var(--text-main) !important;
    font-weight: 900;
}

.final-meter[b-xgkq8umqpm] {
    overflow: hidden;
    height: 7px;
    width: 86px;
    margin: 7px 0 0 auto;
    border-radius: 999px;
    background: rgba(226, 232, 240, .9);
}

.final-meter span[b-xgkq8umqpm] {
    display: block !important;
    height: 100%;
    min-width: 5px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--report), var(--danger));
}

.paper-empty-line[b-xgkq8umqpm] {
    padding: 22px;
    color: var(--text-muted);
    text-align: center;
    border: 1px dashed rgba(120, 170, 210, .28);
    border-radius: 18px;
    background: rgba(248, 252, 255, .7);
}

.official-exam-empty[b-xgkq8umqpm] {
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(245, 158, 11, .18);
    border-radius: 20px;
    background: rgba(255, 247, 237, .72);
}

.official-exam-empty > span[b-xgkq8umqpm] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    color: #a16207;
    border-radius: 17px;
    background: rgba(254, 243, 199, .8);
}

.official-exam-empty h4[b-xgkq8umqpm] {
    margin: 0;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 850;
}

.official-exam-empty p[b-xgkq8umqpm] {
    margin: 2px 0 0;
    color: var(--text-body);
    font-weight: 720;
}

.component-mobile-list[b-xgkq8umqpm] {
    display: none;
    gap: 12px;
}

.component-mobile-card[b-xgkq8umqpm] {
    padding: 15px;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 18px;
    background: rgba(248, 252, 255, .74);
}

.component-mobile-top[b-xgkq8umqpm] {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.component-mobile-top strong[b-xgkq8umqpm] {
    display: block;
    color: var(--text-main);
    font-weight: 900;
}

.component-mobile-top span:not(.grade-pill)[b-xgkq8umqpm] {
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 720;
}

.component-mobile-chips[b-xgkq8umqpm] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.component-mobile-final[b-xgkq8umqpm] {
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(120, 170, 210, .16);
}

.component-mobile-final span[b-xgkq8umqpm] {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.component-mobile-final strong[b-xgkq8umqpm] {
    color: var(--text-main);
    font-size: 1.1rem;
    font-weight: 900;
}

.signature-row[b-xgkq8umqpm] {
    justify-content: space-between;
    gap: 16px;
    margin-top: 42px;
}

.signature-row span[b-xgkq8umqpm] {
    flex: 1 1 0;
    padding-top: 16px;
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 800;
    text-align: center;
    border-top: 1px solid rgba(15, 23, 42, .18);
}

.snapshot-footer-note[b-xgkq8umqpm] {
    margin: 26px 0 10px;
    padding-top: 16px;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 800;
    text-align: center;
    border-top: 1px solid rgba(15, 23, 42, .12);
}

.report-detail-loading[b-xgkq8umqpm],
.report-detail-empty[b-xgkq8umqpm] {
    flex-direction: column;
    justify-content: center;
    min-height: 320px;
    padding: 42px 22px;
    text-align: center;
    border-radius: 30px;
}

.report-detail-loading > span[b-xgkq8umqpm],
.report-detail-empty > span[b-xgkq8umqpm] {
    width: 70px;
    height: 70px;
    margin-bottom: 14px;
    color: var(--primary-dark);
    font-size: 1.7rem;
    border-radius: 24px;
    background: var(--primary-soft);
}

.report-detail-loading > span[b-xgkq8umqpm] {
    border: 4px solid rgba(14, 165, 233, .15);
    border-top-color: var(--primary);
    border-radius: 999px;
    background: transparent;
    animation: reportDetailSpin-b-xgkq8umqpm .8s linear infinite;
}

@media (max-width: 920px) {
    .report-detail-hero[b-xgkq8umqpm],
    .paper-student-header[b-xgkq8umqpm],
    .overall-result-panel[b-xgkq8umqpm],
    .official-exam-empty[b-xgkq8umqpm] {
        align-items: flex-start;
        flex-direction: column;
    }

    .paper-result-box[b-xgkq8umqpm] {
        justify-items: start;
        text-align: left;
    }

    .overall-score-stack[b-xgkq8umqpm] {
        justify-content: flex-start;
    }

    .paper-summary-grid[b-xgkq8umqpm] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .report-card-detail-page[b-xgkq8umqpm] {
        padding: 16px 12px 72px;
    }

    .report-detail-shell[b-xgkq8umqpm] {
        padding: 14px;
        border-radius: 26px;
    }

    .report-detail-title[b-xgkq8umqpm],
    .report-detail-actions[b-xgkq8umqpm],
    .detail-button[b-xgkq8umqpm] {
        width: 100%;
    }

    .report-detail-title[b-xgkq8umqpm],
    .signature-row[b-xgkq8umqpm] {
        align-items: flex-start;
        flex-direction: column;
    }

    .paper-summary-grid[b-xgkq8umqpm] {
        grid-template-columns: 1fr;
    }

    .snapshot-status-strip span[b-xgkq8umqpm],
    .overall-score-stack span[b-xgkq8umqpm] {
        width: 100%;
        justify-content: center;
    }

    .paper-table-wrap[b-xgkq8umqpm] {
        display: none;
    }

    .component-mobile-list[b-xgkq8umqpm] {
        display: grid;
    }

    .report-paper[b-xgkq8umqpm] {
        padding: 22px;
        border-radius: 14px;
    }
}

@media print {
    .report-card-detail-page[b-xgkq8umqpm] {
        overflow: visible;
        height: auto;
        max-height: none;
        padding: 0;
        background: #fff !important;
    }

    .report-card-detail-page[b-xgkq8umqpm]::before,
    .report-card-detail-page[b-xgkq8umqpm]::after,
    .report-detail-hero[b-xgkq8umqpm],
    .snapshot-status-strip[b-xgkq8umqpm] {
        display: none !important;
    }

    .report-detail-shell[b-xgkq8umqpm],
    .report-preview-frame[b-xgkq8umqpm],
    .report-paper[b-xgkq8umqpm] {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        backdrop-filter: none !important;
    }

    .paper-table-wrap[b-xgkq8umqpm] {
        overflow: visible;
    }

    .paper-table[b-xgkq8umqpm] {
        min-width: 0;
        border-collapse: collapse;
    }

    .paper-table th[b-xgkq8umqpm],
    .paper-table td[b-xgkq8umqpm] {
        border: 1px solid #d7dde5;
    }

    .overall-result-panel[b-xgkq8umqpm],
    .paper-summary-grid article[b-xgkq8umqpm],
    .official-exam-empty[b-xgkq8umqpm],
    .component-mobile-card[b-xgkq8umqpm] {
        break-inside: avoid;
    }
}
/* /Components/Pages/ReportCardsPage.razor.rz.scp.css */
@keyframes reportStudioRise-b-xz63kmfesu {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes reportSkeleton-b-xz63kmfesu {
    100% {
        transform: translateX(100%);
    }
}

.report-cards-page[b-xz63kmfesu] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --report: #ec4899;
    --report-soft: #fce7f3;
    --gold: #f59e0b;
    --gold-soft: #fff7ed;
    --success: #10b981;
    --success-soft: #dcfce7;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --locked: #334155;
    --locked-soft: #f1f5f9;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    --shadow-paper: 0 24px 70px rgba(16, 32, 51, .1);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 96px;
    color: var(--text-body);
    font-family: Inter, Manrope, "Noto Sans Myanmar", "Pyidaungsu", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.report-cards-page.mybody[b-xz63kmfesu] {
    display: block;
    grid-template-rows: unset;
}

.report-cards-page[b-xz63kmfesu]::-webkit-scrollbar,
.report-table-wrap[b-xz63kmfesu]::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.report-cards-page[b-xz63kmfesu]::-webkit-scrollbar-track,
.report-table-wrap[b-xz63kmfesu]::-webkit-scrollbar-track {
    background: rgba(226, 232, 240, .45);
    border-radius: 999px;
}

.report-cards-page[b-xz63kmfesu]::-webkit-scrollbar-thumb,
.report-table-wrap[b-xz63kmfesu]::-webkit-scrollbar-thumb {
    background: rgba(100, 116, 139, .42);
    border-radius: 999px;
}

.report-cards-page[b-xz63kmfesu]::before,
.report-cards-page[b-xz63kmfesu]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.report-cards-page[b-xz63kmfesu]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.report-cards-page[b-xz63kmfesu]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.report-studio-shell[b-xz63kmfesu] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: reportStudioRise-b-xz63kmfesu .36s ease-out both;
}

.report-hero[b-xz63kmfesu],
.report-context-card[b-xz63kmfesu],
.generation-card[b-xz63kmfesu],
.readiness-banner[b-xz63kmfesu],
.report-kpi-card[b-xz63kmfesu],
.report-card-grid-section[b-xz63kmfesu],
.student-report-tile[b-xz63kmfesu],
.report-empty-state[b-xz63kmfesu],
.report-skeleton-card[b-xz63kmfesu] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.report-hero[b-xz63kmfesu] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    overflow: hidden;
    padding: 26px 28px;
    border-radius: var(--radius-xl);
}

.report-hero[b-xz63kmfesu]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 300px;
    height: 300px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(236, 72, 153, .13), transparent 68%);
    pointer-events: none;
}

.report-hero-copy[b-xz63kmfesu],
.official-badge[b-xz63kmfesu],
.report-card-header[b-xz63kmfesu],
.report-card-title[b-xz63kmfesu],
.context-status[b-xz63kmfesu],
.workflow-steps[b-xz63kmfesu],
.workflow-step[b-xz63kmfesu],
.generation-card[b-xz63kmfesu],
.context-chip-row[b-xz63kmfesu],
.report-action-primary[b-xz63kmfesu],
.report-kpi-card[b-xz63kmfesu],
.readiness-banner[b-xz63kmfesu],
.tile-top[b-xz63kmfesu],
.student-identity[b-xz63kmfesu],
.class-chip[b-xz63kmfesu],
.status-pill[b-xz63kmfesu],
.generated-row[b-xz63kmfesu],
.tile-actions[b-xz63kmfesu],
.view-print-button[b-xz63kmfesu],
.lock-button[b-xz63kmfesu],
.lock-status[b-xz63kmfesu],
.sticky-report-action[b-xz63kmfesu],
.report-mini-action[b-xz63kmfesu],
.report-empty-state[b-xz63kmfesu] {
    display: flex;
    align-items: center;
}

.report-hero-copy[b-xz63kmfesu],
.report-card-title[b-xz63kmfesu],
.student-identity[b-xz63kmfesu],
.readiness-banner[b-xz63kmfesu] {
    gap: 16px;
}

.report-card-header[b-xz63kmfesu],
.generation-card[b-xz63kmfesu],
.tile-top[b-xz63kmfesu],
.sticky-report-action[b-xz63kmfesu] {
    justify-content: space-between;
    gap: 16px;
}

.official-badge[b-xz63kmfesu],
.context-status[b-xz63kmfesu],
.workflow-steps[b-xz63kmfesu],
.context-chip-row[b-xz63kmfesu],
.generated-row[b-xz63kmfesu],
.tile-actions[b-xz63kmfesu] {
    flex-wrap: wrap;
    gap: 10px;
}

.report-hero-icon[b-xz63kmfesu],
.report-card-title > span[b-xz63kmfesu],
.kpi-icon[b-xz63kmfesu],
.readiness-banner > span[b-xz63kmfesu],
.student-avatar[b-xz63kmfesu],
.report-empty-state > span[b-xz63kmfesu] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.report-hero-icon[b-xz63kmfesu] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--violet) 54%, var(--report));
    box-shadow: 0 18px 34px rgba(236, 72, 153, .22);
}

.report-hero h1[b-xz63kmfesu],
.report-card-title h2[b-xz63kmfesu],
.readiness-banner h2[b-xz63kmfesu],
.report-empty-state h2[b-xz63kmfesu],
.student-report-tile h3[b-xz63kmfesu] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.035em;
}

.report-hero h1[b-xz63kmfesu] {
    font-size: clamp(1.75rem, 2.5vw, 2.35rem);
}

.report-card-title h2[b-xz63kmfesu],
.readiness-banner h2[b-xz63kmfesu],
.report-empty-state h2[b-xz63kmfesu] {
    font-size: 1.12rem;
}

.report-hero p[b-xz63kmfesu],
.report-card-title p[b-xz63kmfesu],
.readiness-banner p[b-xz63kmfesu],
.generation-helper[b-xz63kmfesu],
.report-empty-state p[b-xz63kmfesu],
.student-report-tile p[b-xz63kmfesu] {
    margin: 0;
    color: var(--text-body);
}

.official-badge[b-xz63kmfesu],
.context-status[b-xz63kmfesu],
.context-chip-row span[b-xz63kmfesu],
.workflow-step[b-xz63kmfesu],
.class-chip[b-xz63kmfesu],
.status-pill[b-xz63kmfesu],
.result-pill[b-xz63kmfesu],
.lock-status[b-xz63kmfesu],
.sticky-report-action > span[b-xz63kmfesu] {
    width: fit-content;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.official-badge[b-xz63kmfesu] {
    position: relative;
    z-index: 1;
    gap: 8px;
    padding: 10px 13px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, .78);
    border: 1px solid rgba(14, 165, 233, .14);
}

.report-context-card[b-xz63kmfesu],
.generation-card[b-xz63kmfesu],
.report-card-grid-section[b-xz63kmfesu] {
    padding: 22px;
    border-radius: var(--radius-xl);
}

.report-card-header[b-xz63kmfesu] {
    margin-bottom: 18px;
}

.report-card-title > span[b-xz63kmfesu] {
    width: 44px;
    height: 44px;
    color: var(--primary-dark);
    border-radius: 16px;
    background: var(--primary-soft);
}

.context-status[b-xz63kmfesu] {
    gap: 8px;
    padding: 10px 12px;
}

.context-status-ready[b-xz63kmfesu] {
    color: #047857;
    background: var(--success-soft);
}

.context-status-muted[b-xz63kmfesu] {
    color: #a16207;
    background: var(--gold-soft);
}

.report-filter-grid[b-xz63kmfesu] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.report-field[b-xz63kmfesu] {
    min-width: 0;
}

.report-field > span[b-xz63kmfesu] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.report-field .form-select[b-xz63kmfesu] {
    min-height: 50px;
    border: 1px solid rgba(120, 170, 210, .26);
    border-radius: 18px;
    color: var(--text-main);
    font-size: .92rem;
    font-weight: 760;
    background-color: rgba(255, 255, 255, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

.report-field .form-select:focus[b-xz63kmfesu] {
    border-color: rgba(14, 165, 233, .45);
    box-shadow: 0 0 0 .2rem rgba(14, 165, 233, .12);
}

.report-field .no-exam-select[b-xz63kmfesu] {
    color: #8a5b08;
    background-color: rgba(255, 247, 237, .84);
}

.report-field em[b-xz63kmfesu] {
    display: block;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: .78rem;
    font-style: normal;
    font-weight: 700;
}

.workflow-steps[b-xz63kmfesu] {
    margin-top: 18px;
}

.workflow-step[b-xz63kmfesu] {
    gap: 8px;
    padding: 9px 12px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(120, 170, 210, .18);
}

.workflow-step.is-active[b-xz63kmfesu],
.workflow-step.is-complete[b-xz63kmfesu] {
    color: white;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), var(--report));
    box-shadow: 0 12px 22px rgba(14, 165, 233, .16);
}

.workflow-step.is-locked[b-xz63kmfesu] {
    color: white;
    border-color: transparent;
    background: linear-gradient(135deg, var(--locked), #0f172a);
}

.generation-card[b-xz63kmfesu] {
    align-items: stretch;
    overflow: hidden;
}

.generation-main[b-xz63kmfesu] {
    min-width: 0;
    display: grid;
    gap: 12px;
}

.context-chip-row span[b-xz63kmfesu] {
    padding: 8px 11px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, .72);
}

.report-action-primary[b-xz63kmfesu],
.report-mini-action[b-xz63kmfesu],
.view-print-button[b-xz63kmfesu],
.lock-button[b-xz63kmfesu] {
    justify-content: center;
    border: 0;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease;
}

.report-action-primary[b-xz63kmfesu] {
    align-self: center;
    gap: 9px;
    min-height: 46px;
    min-width: 170px;
    padding: 0 19px;
    color: white;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--gold), #fb7185);
    box-shadow: 0 16px 30px rgba(245, 158, 11, .24);
}

.report-action-primary:hover:not(:disabled)[b-xz63kmfesu],
.report-mini-action:hover:not(:disabled)[b-xz63kmfesu],
.view-print-button:hover[b-xz63kmfesu],
.lock-button:hover[b-xz63kmfesu] {
    transform: translateY(-2px);
}

.report-action-primary:disabled[b-xz63kmfesu],
.report-mini-action:disabled[b-xz63kmfesu] {
    cursor: not-allowed;
    opacity: .55;
}

.readiness-banner[b-xz63kmfesu] {
    padding: 18px 20px;
    border-radius: var(--radius-lg);
}

.readiness-banner > span[b-xz63kmfesu] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
}

.readiness-ready[b-xz63kmfesu],
.readiness-ready > span[b-xz63kmfesu] {
    color: #047857;
    background: rgba(220, 252, 231, .82);
}

.readiness-report[b-xz63kmfesu],
.readiness-report > span[b-xz63kmfesu] {
    color: #be185d;
    background: rgba(252, 231, 243, .84);
}

.readiness-gold[b-xz63kmfesu],
.readiness-gold > span[b-xz63kmfesu] {
    color: #a16207;
    background: rgba(255, 247, 237, .86);
}

.readiness-locked[b-xz63kmfesu],
.readiness-locked > span[b-xz63kmfesu] {
    color: var(--locked);
    background: rgba(241, 245, 249, .9);
}

.readiness-muted[b-xz63kmfesu],
.readiness-muted > span[b-xz63kmfesu] {
    color: #475569;
    background: rgba(248, 250, 252, .9);
}

.report-kpi-grid[b-xz63kmfesu] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.report-kpi-card[b-xz63kmfesu] {
    gap: 13px;
    min-width: 0;
    padding: 17px;
    border-radius: var(--radius-lg);
}

.kpi-icon[b-xz63kmfesu] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
}

.kpi-icon-primary[b-xz63kmfesu] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.kpi-icon-gold[b-xz63kmfesu] {
    color: #a16207;
    background: var(--gold-soft);
}

.kpi-icon-locked[b-xz63kmfesu] {
    color: var(--locked);
    background: var(--locked-soft);
}

.kpi-icon-success[b-xz63kmfesu] {
    color: #047857;
    background: var(--success-soft);
}

.kpi-icon-danger[b-xz63kmfesu] {
    color: #be123c;
    background: var(--danger-soft);
}

.kpi-icon-violet[b-xz63kmfesu] {
    color: #6d28d9;
    background: var(--violet-soft);
}

.report-kpi-card p[b-xz63kmfesu],
.score-mini span[b-xz63kmfesu] {
    margin: 0 0 4px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.report-kpi-card strong[b-xz63kmfesu] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--text-main);
    font-size: clamp(1.25rem, 1.8vw, 1.72rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.05;
    text-overflow: ellipsis;
}

.report-kpi-card small[b-xz63kmfesu] {
    display: block;
    overflow: hidden;
    color: var(--text-muted);
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-card-grid-section[b-xz63kmfesu] {
    display: grid;
    gap: 18px;
}

.sticky-report-action[b-xz63kmfesu] {
    position: sticky;
    top: 0;
    z-index: 2;
    flex-wrap: wrap;
}

.sticky-report-action > span[b-xz63kmfesu] {
    padding: 9px 12px;
    color: var(--text-main);
    background: rgba(255, 255, 255, .76);
}

.report-mini-action[b-xz63kmfesu] {
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    color: var(--primary-dark);
    border-radius: 999px;
    background: var(--primary-soft);
}

.report-card-grid[b-xz63kmfesu] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.student-report-tile[b-xz63kmfesu] {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 16px;
    padding: 20px;
    border-radius: var(--radius-lg);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.student-report-tile[b-xz63kmfesu]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--primary), var(--report));
}

.student-report-tile.tile-passed[b-xz63kmfesu]::before {
    background: linear-gradient(180deg, var(--success), var(--primary));
}

.student-report-tile.tile-failed[b-xz63kmfesu]::before {
    background: linear-gradient(180deg, var(--danger), var(--report));
}

.student-report-tile.tile-locked[b-xz63kmfesu]::before {
    background: linear-gradient(180deg, var(--locked), #0f172a);
}

.student-report-tile:hover[b-xz63kmfesu] {
    transform: translateY(-2px);
    border-color: rgba(14, 165, 233, .28);
    box-shadow: 0 18px 38px rgba(23, 55, 90, .11);
}

.student-avatar[b-xz63kmfesu] {
    width: 52px;
    height: 52px;
    color: white;
    border-radius: 18px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--violet), var(--report));
    box-shadow: 0 14px 26px rgba(139, 92, 246, .2);
}

.student-report-tile h3[b-xz63kmfesu] {
    font-size: 1.05rem;
}

.student-report-tile p[b-xz63kmfesu] {
    font-size: .82rem;
    font-weight: 780;
}

.class-chip[b-xz63kmfesu] {
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    padding: 7px 10px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, .72);
}

.status-pill[b-xz63kmfesu] {
    gap: 7px;
    padding: 8px 11px;
}

.status-draft[b-xz63kmfesu] {
    color: #a16207;
    background: var(--gold-soft);
}

.status-locked[b-xz63kmfesu] {
    color: var(--locked);
    background: var(--locked-soft);
}

.score-mini-grid[b-xz63kmfesu] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.score-mini[b-xz63kmfesu] {
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 17px;
    background: rgba(255, 255, 255, .64);
}

.score-mini strong[b-xz63kmfesu] {
    display: block;
    overflow: hidden;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-meter[b-xz63kmfesu] {
    overflow: hidden;
    height: 7px;
    margin-top: 8px;
    border-radius: 999px;
    background: rgba(226, 232, 240, .9);
}

.mini-meter i[b-xz63kmfesu] {
    display: block;
    height: 100%;
    min-width: 5px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--report));
}

.mini-meter-violet i[b-xz63kmfesu] {
    background: linear-gradient(90deg, var(--violet), var(--primary));
}

.result-mini[b-xz63kmfesu] {
    display: grid;
    align-content: start;
}

.result-pill[b-xz63kmfesu] {
    display: inline-flex;
    justify-content: center;
    margin-top: 8px;
    padding: 6px 10px;
}

.result-passed[b-xz63kmfesu] {
    color: #047857;
    background: var(--success-soft);
}

.result-failed[b-xz63kmfesu] {
    color: #be123c;
    background: var(--danger-soft);
}

.generated-row[b-xz63kmfesu] {
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 760;
}

.generated-row span[b-xz63kmfesu] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.view-print-button[b-xz63kmfesu] {
    flex: 1 1 auto;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    color: var(--primary-dark);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(224, 245, 255, .88), rgba(252, 231, 243, .78));
}

.lock-button[b-xz63kmfesu],
.lock-status[b-xz63kmfesu] {
    width: 42px;
    height: 42px;
    border-radius: 15px;
}

.lock-button[b-xz63kmfesu] {
    color: var(--locked);
    background: rgba(255, 255, 255, .84);
    box-shadow: inset 0 0 0 1px rgba(51, 65, 85, .12);
}

.lock-status[b-xz63kmfesu] {
    justify-content: center;
    color: #047857;
    background: var(--success-soft);
}

.report-empty-state[b-xz63kmfesu] {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-height: 320px;
    padding: 42px 22px;
    text-align: center;
    border-radius: var(--radius-xl);
}

.report-empty-state > span[b-xz63kmfesu] {
    width: 74px;
    height: 74px;
    color: var(--primary-dark);
    font-size: 1.85rem;
    border-radius: 26px;
    background: var(--primary-soft);
}

.report-skeleton-grid[b-xz63kmfesu] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.report-skeleton-card[b-xz63kmfesu] {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 14px;
    min-height: 260px;
    padding: 20px;
    border-radius: var(--radius-lg);
}

.report-skeleton-card[b-xz63kmfesu]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
    animation: reportSkeleton-b-xz63kmfesu 1.4s infinite;
}

.report-skeleton-card span[b-xz63kmfesu],
.report-skeleton-card div[b-xz63kmfesu] {
    border-radius: 999px;
    background: rgba(226, 232, 240, .78);
}

.report-skeleton-card span[b-xz63kmfesu] {
    width: 54px;
    height: 54px;
    border-radius: 18px;
}

.report-skeleton-card div[b-xz63kmfesu] {
    height: 18px;
}

.report-skeleton-card div:nth-child(3)[b-xz63kmfesu] {
    width: 78%;
}

.report-skeleton-card div:nth-child(4)[b-xz63kmfesu] {
    width: 58%;
}

.report-cards-page .text-success[b-xz63kmfesu] {
    color: #047857 !important;
}

.report-cards-page .text-danger[b-xz63kmfesu] {
    color: #be123c !important;
}

@media (max-width: 1320px) {
    .report-kpi-grid[b-xz63kmfesu] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .report-card-grid[b-xz63kmfesu],
    .report-skeleton-grid[b-xz63kmfesu] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1060px) {
    .report-filter-grid[b-xz63kmfesu] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .generation-card[b-xz63kmfesu] {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-action-primary[b-xz63kmfesu] {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .report-cards-page[b-xz63kmfesu] {
        padding: 16px 12px 72px;
    }

    .report-studio-shell[b-xz63kmfesu] {
        padding: 14px;
        border-radius: 26px;
    }

    .report-hero[b-xz63kmfesu],
    .report-card-header[b-xz63kmfesu],
    .tile-top[b-xz63kmfesu] {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-filter-grid[b-xz63kmfesu],
    .report-kpi-grid[b-xz63kmfesu],
    .report-card-grid[b-xz63kmfesu],
    .report-skeleton-grid[b-xz63kmfesu] {
        grid-template-columns: 1fr;
    }

    .report-context-card[b-xz63kmfesu],
    .generation-card[b-xz63kmfesu],
    .report-card-grid-section[b-xz63kmfesu],
    .student-report-tile[b-xz63kmfesu] {
        padding: 18px;
        border-radius: 24px;
    }

    .score-mini-grid[b-xz63kmfesu] {
        grid-template-columns: 1fr;
    }

    .tile-actions[b-xz63kmfesu],
    .view-print-button[b-xz63kmfesu] {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .report-hero-copy[b-xz63kmfesu],
    .student-identity[b-xz63kmfesu],
    .readiness-banner[b-xz63kmfesu] {
        align-items: flex-start;
        flex-direction: column;
    }

    .official-badge[b-xz63kmfesu],
    .context-status[b-xz63kmfesu],
    .workflow-step[b-xz63kmfesu],
    .context-chip-row span[b-xz63kmfesu],
    .sticky-report-action[b-xz63kmfesu],
    .report-mini-action[b-xz63kmfesu] {
        width: 100%;
        justify-content: center;
    }
}

@media print {
    .report-cards-page[b-xz63kmfesu] {
        overflow: visible;
        height: auto;
        max-height: none;
        padding: 0;
        background: #fff !important;
    }

    .report-cards-page[b-xz63kmfesu]::before,
    .report-cards-page[b-xz63kmfesu]::after,
    .report-hero[b-xz63kmfesu],
    .report-context-card[b-xz63kmfesu],
    .generation-card[b-xz63kmfesu],
    .readiness-banner[b-xz63kmfesu],
    .report-kpi-grid[b-xz63kmfesu],
    .tile-actions[b-xz63kmfesu] {
        display: none !important;
    }

    .report-studio-shell[b-xz63kmfesu],
    .report-card-grid-section[b-xz63kmfesu],
    .student-report-tile[b-xz63kmfesu] {
        border: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        backdrop-filter: none !important;
    }
}
/* /Components/Pages/RolesAccessPage.razor.rz.scp.css */
@keyframes rolesRise-b-5imrbkfcy0 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.roles-access-page[b-5imrbkfcy0] {
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 36px;
    color: var(--text-body, #4e6274);
    font-family: "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.roles-access-page[b-5imrbkfcy0]::before,
.roles-access-page[b-5imrbkfcy0]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.roles-access-page[b-5imrbkfcy0]::before {
    width: 34vw;
    min-width: 320px;
    aspect-ratio: 1;
    left: 5%;
    top: 2%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.roles-access-page[b-5imrbkfcy0]::after {
    width: 38vw;
    min-width: 320px;
    aspect-ratio: 1;
    right: 0;
    bottom: -2%;
    background:
        radial-gradient(circle at 36% 34%, rgba(139, 92, 246, .14), transparent 58%),
        radial-gradient(circle at 72% 70%, rgba(236, 72, 153, .12), transparent 58%);
}

.roles-access-shell[b-5imrbkfcy0] {
    display: grid;
    gap: 18px;
    width: min(100%, 1380px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft, 0 18px 45px rgba(23, 55, 90, .08));
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: rolesRise-b-5imrbkfcy0 .32s ease-out both;
}

.roles-hero[b-5imrbkfcy0],
.roles-tabs-card[b-5imrbkfcy0],
.roles-toolbar-card[b-5imrbkfcy0],
.roles-panel[b-5imrbkfcy0] {
    border: 1px solid rgba(255, 255, 255, .76);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-card, 0 10px 26px rgba(23, 55, 90, .07));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.roles-hero[b-5imrbkfcy0] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: 30px;
}

.roles-hero[b-5imrbkfcy0]::after {
    content: "";
    position: absolute;
    right: 36px;
    bottom: -118px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(14, 165, 233, .14), transparent 68%);
    pointer-events: none;
}

.roles-hero-title[b-5imrbkfcy0] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.roles-hero-icon[b-5imrbkfcy0],
.roles-panel-icon[b-5imrbkfcy0] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: white;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--primary-dark, #0369a1));
}

.roles-hero-icon[b-5imrbkfcy0] {
    width: 60px;
    height: 60px;
    font-size: 1.35rem;
    border-radius: 22px;
    box-shadow: 0 18px 34px rgba(14, 165, 233, .24);
}

.roles-hero h1[b-5imrbkfcy0] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.roles-hero p[b-5imrbkfcy0] {
    margin: 8px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .95rem;
}

.roles-hero-meta[b-5imrbkfcy0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.roles-hero-meta span[b-5imrbkfcy0],
.access-warning-pill[b-5imrbkfcy0] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    color: var(--primary-dark, #0369a1);
    font-size: .76rem;
    font-weight: 850;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 999px;
    background: rgba(224, 245, 255, .78);
}

.roles-hero-actions[b-5imrbkfcy0] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.roles-primary-button[b-5imrbkfcy0],
.roles-soft-button[b-5imrbkfcy0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    font-size: .88rem;
    font-weight: 850;
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.roles-primary-button[b-5imrbkfcy0] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--primary-dark, #0369a1)) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .24);
}

.roles-soft-button[b-5imrbkfcy0] {
    color: var(--text-main, #102033) !important;
    border: 1px solid rgba(120, 170, 210, .2) !important;
    background: rgba(255, 255, 255, .7) !important;
    box-shadow: none !important;
}

.roles-soft-button.success[b-5imrbkfcy0] {
    color: #047857 !important;
    border-color: rgba(16, 185, 129, .2) !important;
    background: rgba(220, 252, 231, .72) !important;
}

.roles-soft-button.warning[b-5imrbkfcy0] {
    color: #92400e !important;
    border-color: rgba(245, 158, 11, .22) !important;
    background: rgba(255, 247, 237, .84) !important;
}

.roles-tabs-card[b-5imrbkfcy0],
.roles-toolbar-card[b-5imrbkfcy0],
.roles-panel[b-5imrbkfcy0] {
    border-radius: 26px;
}

.roles-tabs-card[b-5imrbkfcy0] {
    padding: 10px;
}

.roles-tabs[b-5imrbkfcy0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.roles-tab[b-5imrbkfcy0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    color: var(--text-main, #102033);
    font-weight: 850;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 18px;
    background: rgba(255, 255, 255, .7);
    transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.roles-tab.active[b-5imrbkfcy0] {
    color: white;
    border-color: rgba(255, 255, 255, .68);
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--violet, #8b5cf6));
    box-shadow: 0 16px 34px rgba(14, 165, 233, .22);
}

.roles-toolbar-card[b-5imrbkfcy0] {
    display: grid;
    grid-template-columns: minmax(190px, .7fr) minmax(260px, 1.25fr) auto auto;
    align-items: end;
    gap: 14px;
    padding: 16px;
}

.roles-field[b-5imrbkfcy0] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.roles-field > span[b-5imrbkfcy0] {
    color: var(--text-main, #102033);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.roles-select-wrap[b-5imrbkfcy0],
.roles-search-wrap[b-5imrbkfcy0] {
    position: relative;
}

.roles-input[b-5imrbkfcy0] {
    min-height: 46px;
    padding: 10px 14px;
    color: var(--text-main, #102033) !important;
    font-size: .9rem;
    font-weight: 750;
    border: 1px solid rgba(120, 170, 210, .22) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(23, 55, 90, .04) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.roles-input[b-5imrbkfcy0]::placeholder {
    color: var(--text-soft, #9aaaba);
}

.roles-input:focus[b-5imrbkfcy0] {
    border-color: rgba(14, 165, 233, .72) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12), 0 10px 22px rgba(14, 165, 233, .07) !important;
}

.roles-select[b-5imrbkfcy0] {
    appearance: none;
    padding-right: 42px;
}

.roles-select-wrap > i[b-5imrbkfcy0],
.roles-search-wrap > i[b-5imrbkfcy0] {
    position: absolute;
    top: 50%;
    color: var(--text-soft, #9aaaba);
    transform: translateY(-50%);
    pointer-events: none;
}

.roles-select-wrap > i[b-5imrbkfcy0] {
    right: 15px;
    font-size: .76rem;
}

.roles-search-wrap > i[b-5imrbkfcy0] {
    left: 15px;
}

.roles-search-wrap .roles-input[b-5imrbkfcy0] {
    padding-left: 42px;
}

.roles-toolbar-count[b-5imrbkfcy0] {
    display: grid;
    gap: 1px;
    min-width: 108px;
    min-height: 46px;
    place-items: center;
    padding: 7px 12px;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 16px;
    background: rgba(224, 245, 255, .68);
}

.roles-toolbar-count strong[b-5imrbkfcy0] {
    color: var(--text-main, #102033);
    font-size: 1rem;
    line-height: 1;
}

.roles-toolbar-count span[b-5imrbkfcy0] {
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    font-weight: 800;
}

.roles-users-grid[b-5imrbkfcy0],
.permissions-workspace[b-5imrbkfcy0] {
    display: grid;
    gap: 18px;
    align-items: start;
}

.roles-users-grid[b-5imrbkfcy0] {
    grid-template-columns: minmax(300px, .42fr) minmax(0, .58fr);
}

.permissions-workspace[b-5imrbkfcy0] {
    grid-template-columns: minmax(260px, .28fr) minmax(0, .72fr);
}

.roles-panel[b-5imrbkfcy0] {
    overflow: hidden;
    min-width: 0;
}

.role-guide-panel[b-5imrbkfcy0],
.user-editor-panel[b-5imrbkfcy0],
.permission-role-panel[b-5imrbkfcy0],
.permission-matrix-panel[b-5imrbkfcy0] {
    padding: 20px;
}

.roles-panel-header[b-5imrbkfcy0] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.roles-panel-header.compact[b-5imrbkfcy0] {
    margin-bottom: 0;
}

.sticky-panel-header[b-5imrbkfcy0] {
    position: sticky;
    top: 0;
    z-index: 5;
    padding-bottom: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .84));
}

.roles-panel-icon[b-5imrbkfcy0] {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    box-shadow: 0 12px 24px rgba(14, 165, 233, .16);
}

.roles-panel-icon.users[b-5imrbkfcy0] {
    background: linear-gradient(135deg, var(--primary, #0ea5e9), #0f766e);
}

.roles-panel-icon.violet[b-5imrbkfcy0],
.roles-panel-icon.matrix[b-5imrbkfcy0] {
    background: linear-gradient(135deg, var(--violet, #8b5cf6), var(--primary, #0ea5e9));
}

.roles-panel-header h2[b-5imrbkfcy0] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: 1.14rem;
    font-weight: 900;
    letter-spacing: -.03em;
}

.roles-panel-header p[b-5imrbkfcy0] {
    margin: 5px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .86rem;
}

.access-warning-pill[b-5imrbkfcy0] {
    margin-left: auto;
    color: #92400e;
    border-color: rgba(245, 158, 11, .22);
    background: rgba(255, 247, 237, .84);
}

.role-guide-list[b-5imrbkfcy0],
.user-role-list[b-5imrbkfcy0],
.permission-role-list[b-5imrbkfcy0] {
    display: grid;
    gap: 12px;
}

.role-guide-card[b-5imrbkfcy0],
.user-role-row[b-5imrbkfcy0],
.permission-role-card[b-5imrbkfcy0] {
    border: 1px solid rgba(120, 170, 210, .16);
    background: rgba(255, 255, 255, .7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

.role-guide-card[b-5imrbkfcy0] {
    padding: 15px;
    border-radius: 20px;
    transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.role-guide-card.selected[b-5imrbkfcy0] {
    border-color: rgba(14, 165, 233, .36);
    background: rgba(224, 245, 255, .68);
}

.role-guide-card-header[b-5imrbkfcy0] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.role-guide-card h3[b-5imrbkfcy0] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: .98rem;
    font-weight: 900;
}

.role-guide-card p[b-5imrbkfcy0] {
    margin: 5px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .82rem;
    line-height: 1.4;
}

.role-count-pill[b-5imrbkfcy0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0 10px;
    color: var(--primary-dark, #0369a1);
    font-size: .78rem;
    font-weight: 900;
    border-radius: 999px;
    background: rgba(224, 245, 255, .9);
}

.role-chip-list[b-5imrbkfcy0] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.role-chip-list span[b-5imrbkfcy0] {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 5px 9px;
    color: #335068;
    font-size: .72rem;
    font-weight: 800;
    border-radius: 999px;
    background: rgba(241, 245, 249, .84);
}

.role-superadmin .role-count-pill[b-5imrbkfcy0],
.role-superadmin .role-chip-list span[b-5imrbkfcy0] {
    color: #be185d;
    background: rgba(252, 231, 243, .88);
}

.role-admin .role-count-pill[b-5imrbkfcy0],
.role-admin .role-chip-list span[b-5imrbkfcy0] {
    color: #1e3a5f;
    background: rgba(226, 232, 240, .86);
}

.role-teacher .role-count-pill[b-5imrbkfcy0],
.role-teacher .role-chip-list span[b-5imrbkfcy0],
.role-registrar .role-count-pill[b-5imrbkfcy0],
.role-registrar .role-chip-list span[b-5imrbkfcy0] {
    color: #6d28d9;
    background: rgba(237, 233, 254, .86);
}

.role-student .role-count-pill[b-5imrbkfcy0],
.role-student .role-chip-list span[b-5imrbkfcy0] {
    color: #2563eb;
    background: rgba(219, 234, 254, .86);
}

.role-parent .role-count-pill[b-5imrbkfcy0],
.role-parent .role-chip-list span[b-5imrbkfcy0] {
    color: #0e7490;
    background: rgba(207, 250, 254, .78);
}

.role-finance .role-count-pill[b-5imrbkfcy0],
.role-finance .role-chip-list span[b-5imrbkfcy0] {
    color: #047857;
    background: rgba(220, 252, 231, .86);
}

.user-editor-panel[b-5imrbkfcy0] {
    max-height: min(760px, calc(100dvh - 260px));
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 170, 210, .48) rgba(248, 252, 255, .65);
}

.user-editor-panel[b-5imrbkfcy0]::-webkit-scrollbar,
.permission-matrix-scroll[b-5imrbkfcy0]::-webkit-scrollbar,
.roles-access-page[b-5imrbkfcy0]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.user-editor-panel[b-5imrbkfcy0]::-webkit-scrollbar-track,
.permission-matrix-scroll[b-5imrbkfcy0]::-webkit-scrollbar-track,
.roles-access-page[b-5imrbkfcy0]::-webkit-scrollbar-track {
    background: rgba(248, 252, 255, .62);
    border-radius: 999px;
}

.user-editor-panel[b-5imrbkfcy0]::-webkit-scrollbar-thumb,
.permission-matrix-scroll[b-5imrbkfcy0]::-webkit-scrollbar-thumb,
.roles-access-page[b-5imrbkfcy0]::-webkit-scrollbar-thumb {
    background: rgba(120, 170, 210, .42);
    border-radius: 999px;
}

.user-role-row[b-5imrbkfcy0] {
    display: grid;
    grid-template-columns: minmax(230px, 1.35fr) minmax(180px, .72fr) auto auto;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    padding: 14px;
    border-radius: 20px;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.user-identity-cell[b-5imrbkfcy0] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.user-avatar[b-5imrbkfcy0] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: var(--primary-dark, #0369a1);
    font-size: .82rem;
    font-weight: 900;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .92), transparent 36%),
        linear-gradient(135deg, rgba(224, 245, 255, .96), rgba(219, 234, 254, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(14, 165, 233, .12);
}

.user-identity-cell strong[b-5imrbkfcy0],
.user-identity-cell small[b-5imrbkfcy0] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-identity-cell strong[b-5imrbkfcy0] {
    color: var(--text-main, #102033);
    font-size: .94rem;
    font-weight: 900;
}

.user-identity-cell small[b-5imrbkfcy0] {
    margin-top: 3px;
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
}

.row-role-field[b-5imrbkfcy0] {
    display: grid;
    gap: 6px;
}

.row-role-field > span[b-5imrbkfcy0] {
    color: var(--text-soft, #9aaaba);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.roles-row-select[b-5imrbkfcy0] {
    min-height: 42px;
    appearance: none;
    padding-right: 38px;
}

.access-denied-text[b-5imrbkfcy0] {
    color: var(--danger, #ef476f);
    font-size: .72rem;
}

.user-status-switch[b-5imrbkfcy0] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
}

.user-status-switch .form-check-input[b-5imrbkfcy0] {
    width: 46px;
    height: 26px;
    margin: 0;
    border: 0;
    cursor: pointer;
    background-color: #dbe7f0;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12);
}

.user-status-switch .form-check-input:checked[b-5imrbkfcy0] {
    background-color: var(--success, #10b981);
}

.status-copy[b-5imrbkfcy0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.status-copy i[b-5imrbkfcy0] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
}

.status-copy.active[b-5imrbkfcy0] {
    color: #047857;
}

.status-copy.inactive[b-5imrbkfcy0] {
    color: #b91c45;
}

.user-save-action[b-5imrbkfcy0] {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--primary-dark, #0369a1) !important;
    border: 1px solid rgba(14, 165, 233, .16) !important;
    border-radius: 15px !important;
    background: rgba(240, 249, 255, .88) !important;
    box-shadow: 0 10px 18px rgba(14, 165, 233, .08);
}

.user-save-action:disabled[b-5imrbkfcy0],
.roles-primary-button:disabled[b-5imrbkfcy0],
.roles-soft-button:disabled[b-5imrbkfcy0] {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
}

.roles-empty-state[b-5imrbkfcy0] {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    min-height: 330px;
    padding: 30px;
    text-align: center;
}

.roles-empty-state > span[b-5imrbkfcy0] {
    display: inline-grid;
    place-items: center;
    width: 68px;
    height: 68px;
    color: var(--primary, #0ea5e9);
    font-size: 1.55rem;
    border-radius: 24px;
    background: rgba(224, 245, 255, .88);
}

.roles-empty-state h3[b-5imrbkfcy0] {
    margin: 8px 0 0;
    color: var(--text-main, #102033);
    font-size: 1.25rem;
    font-weight: 900;
}

.roles-empty-state p[b-5imrbkfcy0] {
    margin: 0 0 8px;
    color: var(--text-muted, #8a9aaa);
}

.permission-role-card[b-5imrbkfcy0] {
    display: grid;
    gap: 3px;
    width: 100%;
    padding: 14px;
    color: var(--text-body, #4e6274);
    text-align: left;
    border-radius: 18px;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.permission-role-card span[b-5imrbkfcy0] {
    color: var(--text-main, #102033);
    font-weight: 900;
}

.permission-role-card small[b-5imrbkfcy0] {
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
}

.permission-role-card.selected[b-5imrbkfcy0] {
    color: var(--primary-dark, #0369a1);
    border-color: rgba(14, 165, 233, .34);
    background: rgba(224, 245, 255, .72);
}

.permission-note[b-5imrbkfcy0] {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    padding: 13px;
    color: #92400e;
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.35;
    border: 1px solid rgba(245, 158, 11, .2);
    border-radius: 18px;
    background: rgba(255, 247, 237, .82);
}

.permission-matrix-panel[b-5imrbkfcy0] {
    padding: 0;
}

.permission-matrix-header[b-5imrbkfcy0] {
    position: sticky;
    top: 0;
    z-index: 8;
    display: grid;
    gap: 14px;
    padding: 20px;
    border-bottom: 1px solid rgba(226, 232, 240, .72);
    background: rgba(255, 255, 255, .94);
}

.permission-toolbar[b-5imrbkfcy0] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
}

.preset-actions[b-5imrbkfcy0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.permission-matrix-scroll[b-5imrbkfcy0] {
    max-height: min(680px, calc(100dvh - 320px));
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 170, 210, .48) rgba(248, 252, 255, .65);
}

.permission-matrix-table[b-5imrbkfcy0] {
    min-width: 820px;
    color: var(--text-body, #4e6274);
    border-collapse: separate;
    border-spacing: 0;
}

.permission-matrix-table thead[b-5imrbkfcy0] {
    position: sticky;
    top: 0;
    z-index: 6;
    background: rgba(240, 249, 255, .96);
    box-shadow: 0 1px 0 rgba(186, 230, 253, .64);
}

.permission-matrix-table th[b-5imrbkfcy0] {
    padding: 14px 16px;
    color: var(--text-muted, #8a9aaa);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
    border: 0;
    white-space: nowrap;
}

.permission-matrix-table th.danger[b-5imrbkfcy0] {
    color: #b91c45;
}

.permission-matrix-table th.warning[b-5imrbkfcy0] {
    color: #92400e;
}

.permission-matrix-table td[b-5imrbkfcy0] {
    padding: 13px 16px;
    border-color: rgba(226, 232, 240, .72);
}

.module-cell strong[b-5imrbkfcy0],
.module-cell small[b-5imrbkfcy0] {
    display: block;
}

.module-cell strong[b-5imrbkfcy0] {
    color: var(--text-main, #102033);
    font-size: .92rem;
    font-weight: 900;
}

.module-cell small[b-5imrbkfcy0] {
    margin-top: 3px;
    color: var(--text-muted, #8a9aaa);
    font-size: .76rem;
}

.permission-check[b-5imrbkfcy0] {
    display: inline-grid;
    place-items: center;
    gap: 5px;
    min-width: 64px;
    margin: 0;
    padding: 8px 9px;
    color: var(--primary-dark, #0369a1);
    font-size: .7rem;
    font-weight: 850;
    border: 1px solid rgba(14, 165, 233, .12);
    border-radius: 14px;
    background: rgba(224, 245, 255, .48);
}

.permission-check.danger[b-5imrbkfcy0] {
    color: #b91c45;
    border-color: rgba(239, 71, 111, .16);
    background: rgba(255, 228, 236, .52);
}

.permission-check.warning[b-5imrbkfcy0] {
    color: #92400e;
    border-color: rgba(245, 158, 11, .18);
    background: rgba(255, 247, 237, .72);
}

.permission-check .form-check-input[b-5imrbkfcy0] {
    margin: 0;
}

.permission-footer[b-5imrbkfcy0] {
    position: sticky;
    bottom: 0;
    z-index: 7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid rgba(226, 232, 240, .72);
    background: rgba(255, 255, 255, .94);
}

.permission-footer span[b-5imrbkfcy0] {
    color: var(--text-muted, #8a9aaa);
    font-size: .84rem;
    font-weight: 800;
}

@media (hover: hover) and (pointer: fine) {
    .roles-primary-button:hover:not(:disabled)[b-5imrbkfcy0],
    .roles-soft-button:hover:not(:disabled)[b-5imrbkfcy0],
    .roles-tab:hover[b-5imrbkfcy0],
    .role-guide-card:hover[b-5imrbkfcy0],
    .user-role-row:hover[b-5imrbkfcy0],
    .permission-role-card:hover[b-5imrbkfcy0],
    .user-save-action:hover:not(:disabled)[b-5imrbkfcy0] {
        transform: translateY(-1px);
    }

    .roles-primary-button:hover:not(:disabled)[b-5imrbkfcy0] {
        box-shadow: 0 20px 40px rgba(14, 165, 233, .32);
    }

    .user-role-row:hover[b-5imrbkfcy0],
    .role-guide-card:hover[b-5imrbkfcy0],
    .permission-role-card:hover[b-5imrbkfcy0] {
        border-color: rgba(14, 165, 233, .22);
        background: rgba(255, 255, 255, .88);
    }

    .user-save-action:hover:not(:disabled)[b-5imrbkfcy0] {
        color: white !important;
        background: var(--primary, #0ea5e9) !important;
        box-shadow: 0 12px 24px rgba(14, 165, 233, .22);
    }
}

.roles-primary-button:focus-visible[b-5imrbkfcy0],
.roles-soft-button:focus-visible[b-5imrbkfcy0],
.roles-tab:focus-visible[b-5imrbkfcy0],
.roles-input:focus-visible[b-5imrbkfcy0],
.permission-role-card:focus-visible[b-5imrbkfcy0],
.user-save-action:focus-visible[b-5imrbkfcy0],
.permission-check .form-check-input:focus-visible[b-5imrbkfcy0],
.user-status-switch .form-check-input:focus-visible[b-5imrbkfcy0] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 2px;
}

@media (max-width: 1199.98px) {
    .roles-users-grid[b-5imrbkfcy0],
    .permissions-workspace[b-5imrbkfcy0],
    .roles-toolbar-card[b-5imrbkfcy0] {
        grid-template-columns: 1fr;
    }

    .roles-toolbar-count[b-5imrbkfcy0] {
        justify-self: start;
    }

    .roles-new-user-button[b-5imrbkfcy0] {
        justify-self: start;
    }

    .user-editor-panel[b-5imrbkfcy0],
    .permission-matrix-scroll[b-5imrbkfcy0] {
        max-height: none;
    }

    .permission-toolbar[b-5imrbkfcy0] {
        grid-template-columns: 1fr;
    }

    .preset-actions[b-5imrbkfcy0] {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .roles-access-page[b-5imrbkfcy0] {
        padding: 18px 10px 26px;
    }

    .roles-access-shell[b-5imrbkfcy0] {
        gap: 14px;
        padding: 12px;
        border-radius: 28px;
    }

    .roles-hero[b-5imrbkfcy0],
    .roles-panel[b-5imrbkfcy0] {
        border-radius: 24px;
    }

    .roles-hero[b-5imrbkfcy0] {
        align-items: stretch;
        flex-direction: column;
        padding: 20px;
    }

    .roles-hero-title[b-5imrbkfcy0] {
        align-items: flex-start;
    }

    .roles-hero-icon[b-5imrbkfcy0] {
        width: 52px;
        height: 52px;
        border-radius: 19px;
    }

    .roles-hero h1[b-5imrbkfcy0] {
        font-size: 1.7rem;
    }

    .roles-hero-actions[b-5imrbkfcy0],
    .roles-hero-actions > *[b-5imrbkfcy0],
    .roles-primary-button[b-5imrbkfcy0],
    .roles-soft-button[b-5imrbkfcy0],
    .roles-new-user-button[b-5imrbkfcy0] {
        width: 100%;
    }

    .roles-tabs[b-5imrbkfcy0] {
        grid-template-columns: 1fr;
    }

    .roles-toolbar-card[b-5imrbkfcy0],
    .role-guide-panel[b-5imrbkfcy0],
    .user-editor-panel[b-5imrbkfcy0],
    .permission-role-panel[b-5imrbkfcy0] {
        padding: 16px;
    }

    .user-role-row[b-5imrbkfcy0] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .user-save-action[b-5imrbkfcy0] {
        width: 100%;
    }

    .user-status-switch[b-5imrbkfcy0] {
        justify-content: space-between;
    }

    .permission-matrix-header[b-5imrbkfcy0] {
        padding: 16px;
    }

    .permission-footer[b-5imrbkfcy0] {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 430px) {
    .roles-panel-header[b-5imrbkfcy0],
    .roles-hero-title[b-5imrbkfcy0] {
        display: grid;
    }

    .roles-hero-meta[b-5imrbkfcy0] {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .roles-access-shell[b-5imrbkfcy0] {
        animation: none !important;
    }

    .roles-primary-button[b-5imrbkfcy0],
    .roles-soft-button[b-5imrbkfcy0],
    .roles-tab[b-5imrbkfcy0],
    .role-guide-card[b-5imrbkfcy0],
    .user-role-row[b-5imrbkfcy0],
    .permission-role-card[b-5imrbkfcy0],
    .user-save-action[b-5imrbkfcy0],
    .roles-input[b-5imrbkfcy0] {
        transition: none !important;
    }
}
/* /Components/Pages/SchoolFeesPage.razor.rz.scp.css */
.fees-page[b-0ws1jn6z72] {
    --surface: rgba(255, 255, 255, 0.88);
    --surface-strong: rgba(255, 255, 255, 0.96);
    --surface-soft: rgba(248, 252, 255, 0.78);
    --border-soft: rgba(120, 170, 210, 0.22);
    --border-glass: rgba(255, 255, 255, 0.75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --finance: #f59e0b;
    --finance-soft: #fff7ed;
    --success: #10b981;
    --success-soft: #dcfce7;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, 0.08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, 0.07);
    display: block;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: clamp(14px, 2vw, 28px);
    border-radius: 30px;
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    line-height: 1.5;
    background:
        radial-gradient(circle at 4% 0%, rgba(14, 165, 233, 0.2), transparent 32%),
        radial-gradient(circle at 92% 6%, rgba(139, 92, 246, 0.16), transparent 34%),
        radial-gradient(circle at 98% 100%, rgba(236, 72, 153, 0.12), transparent 30%),
        linear-gradient(135deg, #eef8ff 0%, #f8fcff 48%, #fff3fb 100%);
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.fees-page[b-0ws1jn6z72]::-webkit-scrollbar,
.plan-table-wrap[b-0ws1jn6z72]::-webkit-scrollbar,
.balance-table-wrap[b-0ws1jn6z72]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.fees-page[b-0ws1jn6z72]::-webkit-scrollbar-track,
.plan-table-wrap[b-0ws1jn6z72]::-webkit-scrollbar-track,
.balance-table-wrap[b-0ws1jn6z72]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.45);
    border-radius: 999px;
}

.fees-page[b-0ws1jn6z72]::-webkit-scrollbar-thumb,
.plan-table-wrap[b-0ws1jn6z72]::-webkit-scrollbar-thumb,
.balance-table-wrap[b-0ws1jn6z72]::-webkit-scrollbar-thumb {
    border: 2px solid rgba(255, 255, 255, 0.68);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.5), rgba(139, 92, 246, 0.45));
}

.fees-shell[b-0ws1jn6z72] {
    width: min(100%, 1600px);
    margin: 0 auto;
    display: grid;
    gap: 20px;
}

.fees-hero[b-0ws1jn6z72],
.context-card[b-0ws1jn6z72],
.kpi-card[b-0ws1jn6z72],
.builder-card[b-0ws1jn6z72],
.plans-card[b-0ws1jn6z72],
.balance-card[b-0ws1jn6z72],
.mobile-plan-card[b-0ws1jn6z72],
.mobile-balance-card[b-0ws1jn6z72] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(20px);
}

.fees-hero[b-0ws1jn6z72] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: clamp(20px, 2.5vw, 28px);
    border-radius: var(--radius-xl);
}

.hero-glow[b-0ws1jn6z72] {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    pointer-events: none;
}

.hero-glow-cyan[b-0ws1jn6z72] {
    top: -145px;
    left: 18%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.2), transparent 72%);
}

.hero-glow-violet[b-0ws1jn6z72] {
    right: -80px;
    bottom: -160px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.22), transparent 72%);
}

.hero-title-wrap[b-0ws1jn6z72],
.section-title[b-0ws1jn6z72],
.section-head[b-0ws1jn6z72],
.student-cell[b-0ws1jn6z72],
.plan-name[b-0ws1jn6z72],
.balance-actions[b-0ws1jn6z72],
.service-row[b-0ws1jn6z72],
.mobile-student-head[b-0ws1jn6z72] {
    display: flex;
    align-items: center;
}

.hero-title-wrap[b-0ws1jn6z72] {
    position: relative;
    z-index: 1;
    gap: 15px;
}

.hero-icon[b-0ws1jn6z72],
.section-icon[b-0ws1jn6z72],
.kpi-icon[b-0ws1jn6z72],
.student-avatar[b-0ws1jn6z72] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.hero-icon[b-0ws1jn6z72] {
    width: 62px;
    height: 62px;
    border-radius: 22px;
    color: #fff;
    font-size: 1.35rem;
    background: linear-gradient(135deg, #0ea5e9, #f59e0b);
    box-shadow: 0 18px 36px rgba(245, 158, 11, 0.2);
}

.fees-hero h3[b-0ws1jn6z72] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.fees-hero p[b-0ws1jn6z72],
.section-head p[b-0ws1jn6z72],
.kpi-card p[b-0ws1jn6z72],
.schedule-health p[b-0ws1jn6z72],
.balance-banner p[b-0ws1jn6z72],
.empty-state p[b-0ws1jn6z72],
.context-card small[b-0ws1jn6z72] {
    margin: 0;
    color: var(--text-body);
}

.hero-badge[b-0ws1jn6z72],
.status-pill[b-0ws1jn6z72],
.count-badge[b-0ws1jn6z72],
.scope-pill[b-0ws1jn6z72],
.class-pill[b-0ws1jn6z72],
.service-badge[b-0ws1jn6z72],
.balance-status[b-0ws1jn6z72] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    font-weight: 850;
    white-space: nowrap;
}

.hero-badge[b-0ws1jn6z72] {
    position: relative;
    z-index: 1;
    min-height: 38px;
    padding: 8px 12px;
    color: #b45309;
    background: rgba(255, 247, 237, 0.86);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.context-card[b-0ws1jn6z72],
.builder-card[b-0ws1jn6z72],
.plans-card[b-0ws1jn6z72],
.balance-card[b-0ws1jn6z72] {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.context-card[b-0ws1jn6z72],
.builder-card[b-0ws1jn6z72] {
    padding: 20px;
}

.section-head[b-0ws1jn6z72] {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.section-head.compact[b-0ws1jn6z72] {
    margin-bottom: 14px;
}

.plans-card .section-head[b-0ws1jn6z72],
.balance-card .section-head[b-0ws1jn6z72] {
    margin: 0;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-soft);
}

.section-title[b-0ws1jn6z72] {
    gap: 12px;
}

.section-icon[b-0ws1jn6z72] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.92), rgba(237, 233, 254, 0.88));
}

.section-icon.gold[b-0ws1jn6z72] {
    color: #b45309;
    background: linear-gradient(135deg, #fff7ed, #fef3c7);
}

.section-icon.violet[b-0ws1jn6z72] {
    color: #6d28d9;
    background: var(--violet-soft);
}

.section-head h5[b-0ws1jn6z72] {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.status-pill[b-0ws1jn6z72] {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 0.82rem;
}

.status-pill.active[b-0ws1jn6z72] {
    color: #047857;
    background: rgba(220, 252, 231, 0.82);
}

.status-pill.inactive[b-0ws1jn6z72] {
    color: #64748b;
    background: rgba(241, 245, 249, 0.9);
}

.context-grid[b-0ws1jn6z72] {
    display: grid;
    grid-template-columns: 1.15fr 0.9fr 0.9fr 0.75fr 1fr 1.1fr;
    gap: 14px;
    align-items: end;
}

.control-field[b-0ws1jn6z72] {
    display: grid;
    gap: 7px;
}

.control-field > span[b-0ws1jn6z72],
.installment-grid label > span[b-0ws1jn6z72] {
    color: #486074;
    font-size: 0.78rem;
    font-weight: 850;
}

.input-shell[b-0ws1jn6z72] {
    position: relative;
}

.input-shell > i[b-0ws1jn6z72] {
    position: absolute;
    z-index: 1;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary);
}

.lux-input[b-0ws1jn6z72] {
    width: 100%;
    min-height: 46px;
    padding-left: 39px;
    border: 1px solid rgba(190, 207, 224, 0.74);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--text-main);
    font-size: 0.92rem;
    font-weight: 760;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.compact-input[b-0ws1jn6z72] {
    min-height: 42px;
    padding-left: 12px;
}

.money-input[b-0ws1jn6z72] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.lux-input:focus[b-0ws1jn6z72],
.primary-btn:focus-visible[b-0ws1jn6z72],
.soft-btn:focus-visible[b-0ws1jn6z72],
.icon-btn:focus-visible[b-0ws1jn6z72] {
    border-color: rgba(14, 165, 233, 0.72);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14);
}

.active-setting[b-0ws1jn6z72] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 68px;
    padding: 12px 14px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(236, 253, 245, 0.82), rgba(255, 255, 255, 0.72));
}

.active-setting strong[b-0ws1jn6z72],
.active-setting small[b-0ws1jn6z72] {
    display: block;
}

.active-toggle[b-0ws1jn6z72] {
    flex: 0 0 auto;
    width: 3rem;
    height: 1.45rem;
}

.primary-btn[b-0ws1jn6z72],
.soft-btn[b-0ws1jn6z72],
.icon-btn[b-0ws1jn6z72] {
    border: 0;
    outline: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.primary-btn[b-0ws1jn6z72],
.soft-btn[b-0ws1jn6z72] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 16px;
    font-size: 0.9rem;
    font-weight: 850;
}

.primary-btn[b-0ws1jn6z72] {
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 15px 30px rgba(14, 165, 233, 0.22);
}

.primary-btn:disabled[b-0ws1jn6z72],
.icon-btn:disabled[b-0ws1jn6z72] {
    cursor: not-allowed;
    opacity: 0.55;
}

.soft-btn[b-0ws1jn6z72] {
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, 0.2);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-card);
}

.primary-btn:hover[b-0ws1jn6z72],
.soft-btn:hover[b-0ws1jn6z72],
.icon-btn:hover[b-0ws1jn6z72] {
    transform: translateY(-1px);
}

.kpi-grid[b-0ws1jn6z72] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.kpi-card[b-0ws1jn6z72] {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    padding: 17px;
    border-radius: var(--radius-lg);
}

.kpi-card[b-0ws1jn6z72]::after {
    content: "";
    position: absolute;
    right: -40px;
    bottom: -54px;
    width: 125px;
    height: 125px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.09);
}

.kpi-card.warning[b-0ws1jn6z72] {
    border-color: rgba(245, 158, 11, 0.26);
}

.kpi-card.danger[b-0ws1jn6z72] {
    border-color: rgba(239, 71, 111, 0.26);
}

.kpi-icon[b-0ws1jn6z72] {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;
    border-radius: 15px;
    color: #fff;
}

.kpi-icon.gold[b-0ws1jn6z72] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.kpi-icon.cyan[b-0ws1jn6z72] {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
}

.kpi-icon.emerald[b-0ws1jn6z72] {
    background: linear-gradient(135deg, #34d399, #059669);
}

.kpi-icon.amber[b-0ws1jn6z72] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.kpi-icon.danger[b-0ws1jn6z72] {
    background: linear-gradient(135deg, #fb7185, #ef476f);
}

.kpi-icon.violet[b-0ws1jn6z72] {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
}

.kpi-card small[b-0ws1jn6z72] {
    display: block;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.kpi-card strong[b-0ws1jn6z72] {
    display: block;
    margin: 4px 0 3px;
    color: var(--text-main);
    font-size: clamp(1.08rem, 1.45vw, 1.55rem);
    font-weight: 950;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
}

.workspace-grid[b-0ws1jn6z72] {
    display: grid;
    grid-template-columns: minmax(340px, 0.38fr) minmax(0, 0.62fr);
    gap: 20px;
    align-items: start;
}

.right-stack[b-0ws1jn6z72] {
    display: grid;
    gap: 20px;
}

.schedule-health[b-0ws1jn6z72],
.balance-banner[b-0ws1jn6z72] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 13px 14px;
    border-radius: 18px;
}

.schedule-health > span[b-0ws1jn6z72],
.balance-banner > span[b-0ws1jn6z72] {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    color: #fff;
}

.schedule-health.success[b-0ws1jn6z72],
.balance-banner.success[b-0ws1jn6z72] {
    background: rgba(220, 252, 231, 0.75);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.schedule-health.success > span[b-0ws1jn6z72],
.balance-banner.success > span[b-0ws1jn6z72] {
    background: linear-gradient(135deg, #34d399, #059669);
}

.schedule-health.warning[b-0ws1jn6z72] {
    background: rgba(255, 247, 237, 0.8);
    border: 1px solid rgba(245, 158, 11, 0.22);
}

.schedule-health.warning > span[b-0ws1jn6z72] {
    background: linear-gradient(135deg, #f59e0b, #f97316);
}

.schedule-health.danger[b-0ws1jn6z72],
.balance-banner.danger[b-0ws1jn6z72] {
    background: rgba(255, 228, 236, 0.78);
    border: 1px solid rgba(239, 71, 111, 0.22);
}

.schedule-health.danger > span[b-0ws1jn6z72],
.balance-banner.danger > span[b-0ws1jn6z72] {
    background: linear-gradient(135deg, #fb7185, #ef476f);
}

.schedule-health strong[b-0ws1jn6z72],
.balance-banner strong[b-0ws1jn6z72] {
    display: block;
    font-weight: 950;
}

.installment-list[b-0ws1jn6z72] {
    position: relative;
    display: grid;
    gap: 12px;
}

.installment-list[b-0ws1jn6z72]::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(14, 165, 233, 0.5), rgba(139, 92, 246, 0.22));
}

.installment-card[b-0ws1jn6z72] {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 14px 14px 14px 44px;
    border: 1px solid rgba(120, 170, 210, 0.2);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: var(--shadow-card);
}

.timeline-dot[b-0ws1jn6z72] {
    position: absolute;
    left: 9px;
    top: 20px;
    width: 20px;
    height: 20px;
    border: 5px solid #fff;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 8px 18px rgba(14, 165, 233, 0.24);
}

.installment-title[b-0ws1jn6z72] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.installment-title strong[b-0ws1jn6z72] {
    font-weight: 950;
}

.installment-title span[b-0ws1jn6z72] {
    padding: 5px 9px;
    border-radius: 999px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: 0.72rem;
    font-weight: 850;
}

.installment-grid[b-0ws1jn6z72] {
    display: grid;
    grid-template-columns: 0.55fr 1.1fr 1fr;
    gap: 10px;
}

.installment-grid label[b-0ws1jn6z72] {
    display: grid;
    gap: 6px;
}

.builder-footer[b-0ws1jn6z72] {
    display: grid;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

.footer-totals[b-0ws1jn6z72] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 247, 237, 0.72);
    color: #92400e;
}

.footer-totals span[b-0ws1jn6z72] {
    font-weight: 850;
}

.footer-totals strong[b-0ws1jn6z72] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-weight: 950;
}

.save-btn[b-0ws1jn6z72] {
    width: 100%;
}

.plan-table-wrap[b-0ws1jn6z72],
.balance-table-wrap[b-0ws1jn6z72] {
    overflow-x: auto;
}

.plan-table[b-0ws1jn6z72],
.balance-table[b-0ws1jn6z72] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.balance-table[b-0ws1jn6z72] {
    min-width: 1040px;
}

.plan-table thead th[b-0ws1jn6z72],
.balance-table thead th[b-0ws1jn6z72] {
    padding: 14px 18px;
    color: #64748b;
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.72), rgba(255, 247, 237, 0.55));
    border-bottom: 1px solid var(--border-soft);
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.plan-table tbody td[b-0ws1jn6z72],
.balance-table tbody td[b-0ws1jn6z72] {
    padding: 16px 18px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7);
    vertical-align: middle;
}

.plan-table tbody tr:hover[b-0ws1jn6z72],
.balance-table tbody tr:hover[b-0ws1jn6z72] {
    background: rgba(14, 165, 233, 0.045);
}

.plan-name[b-0ws1jn6z72] {
    gap: 9px;
    color: var(--text-main);
}

.plan-name i[b-0ws1jn6z72] {
    color: var(--finance);
}

.scope-pill[b-0ws1jn6z72],
.class-pill[b-0ws1jn6z72],
.count-badge[b-0ws1jn6z72] {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.78rem;
}

.scope-pill[b-0ws1jn6z72],
.class-pill[b-0ws1jn6z72] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.plan-table small[b-0ws1jn6z72] {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.money-value[b-0ws1jn6z72],
.amount[b-0ws1jn6z72],
.amount-stack strong[b-0ws1jn6z72],
.mobile-money-grid strong[b-0ws1jn6z72] {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-variant-numeric: tabular-nums;
    font-weight: 950;
}

.money-value[b-0ws1jn6z72] {
    color: #b45309;
}

.count-badge[b-0ws1jn6z72] {
    color: #047857;
    background: rgba(220, 252, 231, 0.82);
}

.count-badge.muted[b-0ws1jn6z72] {
    color: #64748b;
    background: rgba(241, 245, 249, 0.9);
}

.icon-btn[b-0ws1jn6z72] {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(226, 232, 240, 0.74);
    box-shadow: 0 9px 20px rgba(23, 55, 90, 0.07);
}

.icon-btn.edit[b-0ws1jn6z72] {
    color: var(--primary-dark);
}

.balance-actions[b-0ws1jn6z72] {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.student-cell[b-0ws1jn6z72] {
    gap: 10px;
}

.student-avatar[b-0ws1jn6z72] {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    font-size: 0.82rem;
    font-weight: 950;
}

.student-cell strong[b-0ws1jn6z72],
.student-cell small[b-0ws1jn6z72] {
    display: block;
}

.student-cell strong[b-0ws1jn6z72] {
    font-weight: 950;
}

.student-cell small[b-0ws1jn6z72] {
    color: var(--text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.76rem;
    font-weight: 800;
}

.service-badge[b-0ws1jn6z72] {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 0.78rem;
}

.service-badge.active[b-0ws1jn6z72] {
    color: #047857;
    background: var(--success-soft);
}

.service-badge.warning[b-0ws1jn6z72] {
    color: #b45309;
    background: var(--warning-soft);
}

.service-badge.inactive[b-0ws1jn6z72] {
    color: #be123c;
    background: var(--danger-soft);
}

.service-badge.muted[b-0ws1jn6z72] {
    color: #64748b;
    background: rgba(241, 245, 249, 0.92);
}

.amount.neutral[b-0ws1jn6z72] {
    color: #334155;
}

.amount.paid[b-0ws1jn6z72] {
    color: #047857;
}

.amount.discount[b-0ws1jn6z72] {
    color: #2563eb;
}

.amount.balance[b-0ws1jn6z72],
.mobile-money-grid .balance[b-0ws1jn6z72] {
    color: var(--danger);
}

.amount.cleared[b-0ws1jn6z72],
.mobile-money-grid .cleared[b-0ws1jn6z72] {
    color: #059669;
}

.amount-stack[b-0ws1jn6z72] {
    display: grid;
    gap: 5px;
}

.align-end[b-0ws1jn6z72] {
    justify-items: end;
}

.pay-progress[b-0ws1jn6z72] {
    width: min(100%, 120px);
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(226, 232, 240, 0.9);
}

.pay-progress em[b-0ws1jn6z72] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #10b981, #0ea5e9);
}

.balance-status[b-0ws1jn6z72] {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 0.68rem;
}

.balance-status.outstanding[b-0ws1jn6z72] {
    color: #be123c;
    background: var(--danger-soft);
}

.balance-status.cleared[b-0ws1jn6z72] {
    color: #047857;
    background: var(--success-soft);
}

.empty-state[b-0ws1jn6z72] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    padding: 32px 18px;
    text-align: center;
}

.empty-state.compact[b-0ws1jn6z72] {
    min-height: 210px;
}

.empty-state > span[b-0ws1jn6z72] {
    display: inline-grid;
    place-items: center;
    width: 70px;
    height: 70px;
    margin-bottom: 14px;
    border-radius: 24px;
    color: var(--primary-dark);
    background: linear-gradient(135deg, rgba(224, 245, 255, 0.95), rgba(237, 233, 254, 0.88));
    font-size: 1.6rem;
}

.empty-state h5[b-0ws1jn6z72] {
    margin: 0 0 4px;
    font-weight: 950;
}

.empty-state p[b-0ws1jn6z72] {
    max-width: 460px;
    margin-bottom: 16px;
}

.mobile-plan-list[b-0ws1jn6z72],
.mobile-balance-list[b-0ws1jn6z72] {
    display: none;
    padding: 14px;
    gap: 12px;
}

.mobile-plan-card[b-0ws1jn6z72],
.mobile-balance-card[b-0ws1jn6z72] {
    border-radius: 22px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.84);
}

.mobile-plan-card[b-0ws1jn6z72] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 12px;
}

.mobile-plan-card strong[b-0ws1jn6z72] {
    display: block;
    margin-bottom: 6px;
}

.mobile-balance-card[b-0ws1jn6z72] {
    display: grid;
    gap: 13px;
}

.mobile-student-head[b-0ws1jn6z72] {
    justify-content: space-between;
    gap: 10px;
}

.service-row[b-0ws1jn6z72] {
    flex-wrap: wrap;
    gap: 8px;
}

.mobile-money-grid[b-0ws1jn6z72] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mobile-money-grid div[b-0ws1jn6z72] {
    padding: 10px;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.78);
}

.mobile-money-grid small[b-0ws1jn6z72] {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.mobile-money-grid .paid[b-0ws1jn6z72] {
    color: #047857;
}

.mobile-money-grid .discount[b-0ws1jn6z72] {
    color: #2563eb;
}

.animated[b-0ws1jn6z72] {
    animation-duration: 0.4s;
    animation-fill-mode: both;
}

.fadeIn[b-0ws1jn6z72] {
    animation-name: fadeIn-b-0ws1jn6z72;
}

@keyframes fadeIn-b-0ws1jn6z72 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1400px) {
    .context-grid[b-0ws1jn6z72],
    .kpi-grid[b-0ws1jn6z72] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .workspace-grid[b-0ws1jn6z72] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .fees-page[b-0ws1jn6z72] {
        padding: 12px;
        border-radius: 22px;
    }

    .fees-hero[b-0ws1jn6z72],
    .section-head[b-0ws1jn6z72],
    .mobile-student-head[b-0ws1jn6z72] {
        align-items: stretch;
        flex-direction: column;
    }

    .context-grid[b-0ws1jn6z72],
    .kpi-grid[b-0ws1jn6z72],
    .installment-grid[b-0ws1jn6z72] {
        grid-template-columns: 1fr;
    }

    .plan-table-wrap[b-0ws1jn6z72],
    .balance-table-wrap[b-0ws1jn6z72] {
        display: none;
    }

    .mobile-plan-list[b-0ws1jn6z72],
    .mobile-balance-list[b-0ws1jn6z72] {
        display: grid;
    }

    .balance-actions[b-0ws1jn6z72] {
        justify-content: flex-start;
    }

    .balance-actions .soft-btn[b-0ws1jn6z72] {
        width: 100%;
    }
}

@media (max-width: 540px) {
    .hero-title-wrap[b-0ws1jn6z72],
    .section-title[b-0ws1jn6z72] {
        align-items: flex-start;
    }

    .hero-icon[b-0ws1jn6z72],
    .section-icon[b-0ws1jn6z72] {
        width: 48px;
        height: 48px;
        border-radius: 17px;
    }

    .mobile-plan-card[b-0ws1jn6z72] {
        grid-template-columns: 1fr;
    }

    .mobile-money-grid[b-0ws1jn6z72] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-0ws1jn6z72],
    *[b-0ws1jn6z72]::before,
    *[b-0ws1jn6z72]::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}
/* /Components/Pages/StaffDetailsPage.razor.rz.scp.css */
@keyframes staffDetailsRise-b-z6klrwhhfu {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes staffDetailsShimmer-b-z6klrwhhfu {
    100% {
        transform: translateX(100%);
    }
}

.staff-details-page[b-z6klrwhhfu] {
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --teacher: #8b5cf6;
    --teacher-soft: #ede9fe;
    --salary: #f59e0b;
    --salary-soft: #fff7ed;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 96px;
    color: var(--text-body);
    font-family: Inter, Manrope, "Noto Sans Myanmar", "Pyidaungsu", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.staff-details-page.mybody[b-z6klrwhhfu] {
    display: block;
    grid-template-rows: unset;
}

.staff-details-page[b-z6klrwhhfu]::-webkit-scrollbar,
.assignment-list[b-z6klrwhhfu]::-webkit-scrollbar,
.timeline-list[b-z6klrwhhfu]::-webkit-scrollbar,
.payroll-list[b-z6klrwhhfu]::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.staff-details-page[b-z6klrwhhfu]::-webkit-scrollbar-track,
.assignment-list[b-z6klrwhhfu]::-webkit-scrollbar-track,
.timeline-list[b-z6klrwhhfu]::-webkit-scrollbar-track,
.payroll-list[b-z6klrwhhfu]::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(226, 232, 240, .45);
}

.staff-details-page[b-z6klrwhhfu]::-webkit-scrollbar-thumb,
.assignment-list[b-z6klrwhhfu]::-webkit-scrollbar-thumb,
.timeline-list[b-z6klrwhhfu]::-webkit-scrollbar-thumb,
.payroll-list[b-z6klrwhhfu]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(100, 116, 139, .42);
}

.staff-details-page[b-z6klrwhhfu]::before,
.staff-details-page[b-z6klrwhhfu]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.staff-details-page[b-z6klrwhhfu]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.staff-details-page[b-z6klrwhhfu]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.staff-details-shell[b-z6klrwhhfu] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: staffDetailsRise-b-z6klrwhhfu .36s ease-out both;
}

.staff-details-hero[b-z6klrwhhfu],
.staff-picker-card[b-z6klrwhhfu],
.staff-empty-panel[b-z6klrwhhfu],
.staff-kpi-card[b-z6klrwhhfu],
.staff-identity-card[b-z6klrwhhfu],
.staff-panel[b-z6klrwhhfu],
.staff-skeleton-card[b-z6klrwhhfu] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.staff-details-hero[b-z6klrwhhfu] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border-radius: var(--radius-xl);
}

.staff-details-hero[b-z6klrwhhfu]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 300px;
    height: 300px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(236, 72, 153, .13), transparent 68%);
    pointer-events: none;
}

.staff-details-title[b-z6klrwhhfu],
.staff-details-actions[b-z6klrwhhfu],
.staff-soft-button[b-z6klrwhhfu],
.staff-primary-button[b-z6klrwhhfu],
.staff-card-title[b-z6klrwhhfu],
.staff-panel-header[b-z6klrwhhfu],
.identity-top[b-z6klrwhhfu],
.identity-badges[b-z6klrwhhfu],
.readiness-chip-row[b-z6klrwhhfu],
.readiness-chip[b-z6klrwhhfu],
.profile-badge[b-z6klrwhhfu],
.profile-info-row[b-z6klrwhhfu],
.salary-metric[b-z6klrwhhfu],
.assignment-item[b-z6klrwhhfu],
.timeline-title[b-z6klrwhhfu],
.payroll-item[b-z6klrwhhfu],
.staff-picker-card[b-z6klrwhhfu],
.staff-empty-panel[b-z6klrwhhfu] {
    display: flex;
    align-items: center;
}

.staff-details-title[b-z6klrwhhfu],
.staff-card-title[b-z6klrwhhfu],
.identity-top[b-z6klrwhhfu] {
    gap: 16px;
}

.staff-details-actions[b-z6klrwhhfu],
.identity-badges[b-z6klrwhhfu],
.readiness-chip-row[b-z6klrwhhfu] {
    flex-wrap: wrap;
    gap: 10px;
}

.staff-soft-button[b-z6klrwhhfu],
.staff-primary-button[b-z6klrwhhfu],
.readiness-chip[b-z6klrwhhfu],
.profile-badge[b-z6klrwhhfu] {
    justify-content: center;
    gap: 8px;
}

.staff-details-hero-icon[b-z6klrwhhfu],
.staff-card-title > span[b-z6klrwhhfu],
.staff-profile-avatar[b-z6klrwhhfu],
.staff-kpi-card > span[b-z6klrwhhfu],
.profile-info-row > span[b-z6klrwhhfu],
.salary-metric > span[b-z6klrwhhfu],
.assignment-item > span[b-z6klrwhhfu],
.staff-mini-empty > span[b-z6klrwhhfu],
.staff-empty-panel > span[b-z6klrwhhfu] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.staff-details-hero-icon[b-z6klrwhhfu],
.staff-card-title > span[b-z6klrwhhfu] {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    color: var(--primary);
    background: linear-gradient(145deg, #e0f5ff, #f3e8ff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    font-size: 1.25rem;
}

.staff-details-title h1[b-z6klrwhhfu],
.identity-top h2[b-z6klrwhhfu],
.staff-card-title h2[b-z6klrwhhfu],
.staff-empty-panel h2[b-z6klrwhhfu] {
    margin: 0;
    color: var(--text-main);
    font-weight: 800;
    letter-spacing: -.03em;
}

.staff-details-title h1[b-z6klrwhhfu] {
    font-size: clamp(1.75rem, 1.4vw + 1.25rem, 2.18rem);
}

.staff-details-title p[b-z6klrwhhfu],
.staff-card-title p[b-z6klrwhhfu],
.staff-empty-panel p[b-z6klrwhhfu] {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .92rem;
}

.staff-soft-button[b-z6klrwhhfu],
.staff-primary-button[b-z6klrwhhfu] {
    position: relative;
    z-index: 1;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 15px;
    font-size: .9rem;
    font-weight: 800;
    line-height: 1;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.staff-soft-button[b-z6klrwhhfu] {
    border: 1px solid rgba(14, 165, 233, .28);
    color: var(--primary-dark);
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 10px 20px rgba(14, 165, 233, .1);
}

.staff-primary-button[b-z6klrwhhfu] {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 14px 28px rgba(14, 165, 233, .24);
}

.staff-soft-button:hover[b-z6klrwhhfu],
.staff-primary-button:hover[b-z6klrwhhfu] {
    transform: translateY(-1px);
}

.staff-soft-button:hover[b-z6klrwhhfu] {
    background: var(--primary-soft);
    box-shadow: 0 14px 28px rgba(14, 165, 233, .16);
}

.staff-primary-button:hover[b-z6klrwhhfu] {
    box-shadow: 0 18px 34px rgba(139, 92, 246, .26);
}

.staff-soft-button:focus-visible[b-z6klrwhhfu],
.staff-primary-button:focus-visible[b-z6klrwhhfu],
.staff-select:focus-visible[b-z6klrwhhfu] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 3px;
}

.staff-picker-card[b-z6klrwhhfu] {
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border-radius: var(--radius-lg);
}

.staff-picker-field[b-z6klrwhhfu] {
    display: grid;
    gap: 7px;
    width: min(100%, 460px);
}

.staff-picker-field span[b-z6klrwhhfu] {
    color: var(--text-main);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.staff-select[b-z6klrwhhfu] {
    min-height: 48px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    color: var(--text-main);
    background-color: rgba(255, 255, 255, .9);
    font-weight: 750;
    box-shadow: none;
}

.staff-loading-grid[b-z6klrwhhfu] {
    display: grid;
    grid-template-columns: minmax(280px, .58fr) minmax(0, 1fr);
    gap: 16px;
}

.staff-skeleton-stack[b-z6klrwhhfu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.staff-skeleton-card[b-z6klrwhhfu] {
    position: relative;
    overflow: hidden;
    min-height: 230px;
    border-radius: var(--radius-lg);
}

.staff-skeleton-card.identity[b-z6klrwhhfu] {
    min-height: 520px;
}

.staff-skeleton-card[b-z6klrwhhfu]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
    animation: staffDetailsShimmer-b-z6klrwhhfu 1.4s infinite;
}

.staff-empty-panel[b-z6klrwhhfu] {
    min-height: 320px;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    border-radius: var(--radius-xl);
    text-align: center;
}

.staff-empty-panel > span[b-z6klrwhhfu],
.staff-mini-empty > span[b-z6klrwhhfu] {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 1.45rem;
}

.staff-kpi-grid[b-z6klrwhhfu] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.staff-kpi-card[b-z6klrwhhfu] {
    gap: 14px;
    min-height: 116px;
    padding: 18px;
    border-radius: var(--radius-lg);
}

.staff-kpi-card > span[b-z6klrwhhfu] {
    width: 48px;
    height: 48px;
    border-radius: 17px;
    color: var(--primary);
    background: var(--primary-soft);
}

.staff-kpi-card.teacher > span[b-z6klrwhhfu],
.staff-kpi-card.primary > span[b-z6klrwhhfu] {
    color: var(--teacher);
    background: var(--teacher-soft);
}

.staff-kpi-card.salary > span[b-z6klrwhhfu],
.staff-kpi-card.warning > span[b-z6klrwhhfu] {
    color: var(--warning);
    background: var(--warning-soft);
}

.staff-kpi-card.success > span[b-z6klrwhhfu] {
    color: var(--success);
    background: var(--success-soft);
}

.staff-kpi-card p[b-z6klrwhhfu],
.staff-kpi-card small[b-z6klrwhhfu],
.profile-info-row small[b-z6klrwhhfu],
.salary-metric small[b-z6klrwhhfu],
.payroll-item small[b-z6klrwhhfu],
.timeline-item small[b-z6klrwhhfu],
.timeline-item em[b-z6klrwhhfu] {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 700;
}

.staff-kpi-card strong[b-z6klrwhhfu] {
    display: block;
    color: var(--text-main);
    font-size: clamp(1.15rem, 1vw + .8rem, 1.55rem);
    font-weight: 850;
    letter-spacing: -.03em;
}

.staff-360-grid[b-z6klrwhhfu] {
    display: grid;
    grid-template-columns: minmax(300px, .55fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.staff-identity-card[b-z6klrwhhfu] {
    position: sticky;
    top: 12px;
    display: grid;
    gap: 20px;
    padding: 24px;
    border-radius: var(--radius-xl);
}

.staff-profile-avatar[b-z6klrwhhfu] {
    width: 82px;
    height: 82px;
    border-radius: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .5), transparent 32%),
        linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 18px 30px rgba(14, 165, 233, .22);
    font-size: 1.45rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.identity-top h2[b-z6klrwhhfu] {
    font-size: clamp(1.55rem, 1vw + 1rem, 2rem);
}

.identity-top code[b-z6klrwhhfu] {
    display: inline-flex;
    margin: 2px 0 10px;
    padding: 5px 9px;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 999px;
    color: var(--text-muted);
    background: rgba(248, 252, 255, .78);
    font-size: .82rem;
    font-weight: 800;
}

.profile-badge[b-z6klrwhhfu],
.readiness-chip[b-z6klrwhhfu] {
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.profile-badge i:first-child[b-z6klrwhhfu],
.readiness-chip i:first-child[b-z6klrwhhfu] {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.profile-badge i.fa-solid[b-z6klrwhhfu],
.readiness-chip i.fa-solid[b-z6klrwhhfu],
.readiness-chip i.fa-regular[b-z6klrwhhfu] {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
}

.chip-success[b-z6klrwhhfu] {
    color: #047857;
    border-color: rgba(16, 185, 129, .18);
    background: var(--success-soft);
}

.chip-warning[b-z6klrwhhfu] {
    color: #b45309;
    border-color: rgba(245, 158, 11, .2);
    background: var(--warning-soft);
}

.chip-danger[b-z6klrwhhfu] {
    color: #be123c;
    border-color: rgba(239, 71, 111, .18);
    background: var(--danger-soft);
}

.chip-teacher[b-z6klrwhhfu] {
    color: #6d28d9;
    border-color: rgba(139, 92, 246, .2);
    background: var(--teacher-soft);
}

.chip-primary[b-z6klrwhhfu] {
    color: var(--primary-dark);
    border-color: rgba(14, 165, 233, .2);
    background: var(--primary-soft);
}

.chip-muted[b-z6klrwhhfu] {
    color: #64748b;
    border-color: rgba(100, 116, 139, .18);
    background: rgba(241, 245, 249, .82);
}

.readiness-chip-row[b-z6klrwhhfu] {
    padding: 14px;
    border: 1px solid rgba(120, 170, 210, .14);
    border-radius: 22px;
    background: rgba(248, 252, 255, .68);
}

.identity-info-list[b-z6klrwhhfu] {
    display: grid;
    gap: 11px;
}

.profile-info-row[b-z6klrwhhfu] {
    gap: 12px;
    padding: 13px;
    border: 1px solid rgba(120, 170, 210, .14);
    border-radius: 18px;
    background: rgba(255, 255, 255, .58);
}

.profile-info-row > span[b-z6klrwhhfu] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: var(--primary);
    background: var(--primary-soft);
}

.profile-info-row.is-missing > span[b-z6klrwhhfu] {
    color: var(--warning);
    background: var(--warning-soft);
}

.profile-info-row strong[b-z6klrwhhfu] {
    display: block;
    color: var(--text-main);
    font-size: .96rem;
    font-weight: 820;
    word-break: break-word;
}

.staff-dashboard-cards[b-z6klrwhhfu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.staff-panel[b-z6klrwhhfu] {
    display: grid;
    align-content: start;
    gap: 16px;
    min-height: 300px;
    padding: 22px;
    border-radius: var(--radius-xl);
}

.staff-panel-header[b-z6klrwhhfu] {
    justify-content: space-between;
    gap: 14px;
}

.staff-card-title > span[b-z6klrwhhfu] {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 1.05rem;
}

.staff-card-title h2[b-z6klrwhhfu] {
    font-size: 1.08rem;
}

.panel-count-badge[b-z6klrwhhfu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.panel-count-badge.success[b-z6klrwhhfu] {
    color: #047857;
    background: var(--success-soft);
}

.panel-count-badge.teacher[b-z6klrwhhfu] {
    color: #6d28d9;
    background: var(--teacher-soft);
}

.panel-count-badge.warning[b-z6klrwhhfu] {
    color: #b45309;
    background: var(--warning-soft);
}

.panel-count-badge.muted[b-z6klrwhhfu] {
    color: #64748b;
    background: rgba(241, 245, 249, .86);
}

.net-salary-panel[b-z6klrwhhfu] {
    display: grid;
    gap: 5px;
    padding: 18px;
    border-radius: 22px;
    color: #7c2d12;
    background:
        linear-gradient(135deg, rgba(255, 247, 237, .95), rgba(255, 255, 255, .82)),
        var(--salary-soft);
    border: 1px solid rgba(245, 158, 11, .18);
}

.net-salary-panel span[b-z6klrwhhfu],
.net-salary-panel small[b-z6klrwhhfu] {
    color: #b45309;
    font-size: .82rem;
    font-weight: 800;
}

.net-salary-panel strong[b-z6klrwhhfu] {
    color: var(--text-main);
    font-size: clamp(1.45rem, 1.4vw + 1rem, 2rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.salary-breakdown-grid[b-z6klrwhhfu] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.salary-metric[b-z6klrwhhfu] {
    gap: 12px;
    min-height: 82px;
    padding: 14px;
    border: 1px solid rgba(120, 170, 210, .14);
    border-radius: 20px;
    background: rgba(255, 255, 255, .64);
}

.salary-metric > span[b-z6klrwhhfu] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    color: var(--primary);
    background: var(--primary-soft);
}

.salary-metric.green > span[b-z6klrwhhfu] {
    color: var(--success);
    background: var(--success-soft);
}

.salary-metric.pink > span[b-z6klrwhhfu] {
    color: var(--danger);
    background: var(--danger-soft);
}

.salary-metric.gold > span[b-z6klrwhhfu] {
    color: var(--salary);
    background: var(--salary-soft);
}

.salary-metric strong[b-z6klrwhhfu] {
    display: block;
    color: var(--text-main);
    font-size: .98rem;
    font-weight: 850;
}

.assignment-list[b-z6klrwhhfu],
.timeline-list[b-z6klrwhhfu],
.payroll-list[b-z6klrwhhfu] {
    display: grid;
    gap: 10px;
    max-height: 340px;
    overflow-y: auto;
    padding-right: 2px;
}

.assignment-item[b-z6klrwhhfu] {
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 20px;
    background: rgba(255, 255, 255, .66);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.assignment-item:hover[b-z6klrwhhfu] {
    transform: translateY(-1px);
    background: var(--primary-soft);
    box-shadow: 0 10px 18px rgba(14, 165, 233, .1);
}

.assignment-item > span[b-z6klrwhhfu] {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    color: var(--teacher);
    background: var(--teacher-soft);
}

.assignment-item strong[b-z6klrwhhfu] {
    display: block;
    color: var(--text-main);
    font-size: .95rem;
    font-weight: 850;
}

.assignment-item small[b-z6klrwhhfu] {
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 700;
}

.timeline-item[b-z6klrwhhfu] {
    position: relative;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(120, 170, 210, .14);
    border-radius: 20px;
    background: rgba(255, 255, 255, .62);
}

.timeline-dot[b-z6klrwhhfu] {
    width: 10px;
    height: 10px;
    margin-top: 7px;
    border-radius: 999px;
    background: var(--warning);
    box-shadow: 0 0 0 5px rgba(245, 158, 11, .14);
}

.timeline-title[b-z6klrwhhfu] {
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 3px;
}

.timeline-title strong[b-z6klrwhhfu] {
    color: var(--text-main);
    font-size: .95rem;
    font-weight: 850;
}

.timeline-item em[b-z6klrwhhfu] {
    display: block;
    font-style: normal;
}

.payroll-item[b-z6klrwhhfu] {
    justify-content: space-between;
    gap: 14px;
    padding: 15px;
    border: 1px solid rgba(120, 170, 210, .14);
    border-radius: 20px;
    background: rgba(255, 255, 255, .62);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.payroll-item:hover[b-z6klrwhhfu] {
    transform: translateY(-1px);
    background: rgba(240, 253, 250, .78);
    box-shadow: 0 10px 18px rgba(16, 185, 129, .09);
}

.payroll-item > div:first-child strong[b-z6klrwhhfu],
.payroll-item > div:last-child strong[b-z6klrwhhfu] {
    display: block;
    color: var(--text-main);
    font-size: .98rem;
    font-weight: 850;
}

.payroll-item > div:last-child[b-z6klrwhhfu] {
    display: grid;
    justify-items: end;
    gap: 5px;
    text-align: right;
}

.staff-mini-empty[b-z6klrwhhfu] {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    min-height: 210px;
    padding: 24px;
    border: 1px dashed rgba(120, 170, 210, .28);
    border-radius: 24px;
    background: rgba(248, 252, 255, .58);
    text-align: center;
}

.staff-mini-empty strong[b-z6klrwhhfu] {
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 850;
}

.staff-mini-empty p[b-z6klrwhhfu] {
    max-width: 320px;
    margin: 0;
    color: var(--text-muted);
    font-size: .88rem;
}

@media (max-width: 1320px) {
    .staff-kpi-grid[b-z6klrwhhfu] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .staff-360-grid[b-z6klrwhhfu] {
        grid-template-columns: 1fr;
    }

    .staff-identity-card[b-z6klrwhhfu] {
        position: static;
    }
}

@media (max-width: 980px) {
    .staff-dashboard-cards[b-z6klrwhhfu] {
        grid-template-columns: 1fr;
    }

    .staff-loading-grid[b-z6klrwhhfu],
    .staff-skeleton-stack[b-z6klrwhhfu] {
        grid-template-columns: 1fr;
    }

    .staff-skeleton-card.identity[b-z6klrwhhfu] {
        min-height: 300px;
    }
}

@media (max-width: 760px) {
    .staff-details-page[b-z6klrwhhfu] {
        padding: 16px 12px 72px;
    }

    .staff-details-shell[b-z6klrwhhfu] {
        padding: 14px;
        border-radius: 26px;
    }

    .staff-details-hero[b-z6klrwhhfu],
    .staff-picker-card[b-z6klrwhhfu],
    .staff-panel-header[b-z6klrwhhfu],
    .identity-top[b-z6klrwhhfu],
    .payroll-item[b-z6klrwhhfu],
    .timeline-title[b-z6klrwhhfu] {
        align-items: flex-start;
        flex-direction: column;
    }

    .staff-details-actions[b-z6klrwhhfu],
    .staff-soft-button[b-z6klrwhhfu],
    .staff-primary-button[b-z6klrwhhfu],
    .staff-picker-field[b-z6klrwhhfu] {
        width: 100%;
    }

    .staff-kpi-grid[b-z6klrwhhfu],
    .salary-breakdown-grid[b-z6klrwhhfu] {
        grid-template-columns: 1fr;
    }

    .staff-panel[b-z6klrwhhfu],
    .staff-identity-card[b-z6klrwhhfu] {
        padding: 18px;
        border-radius: 24px;
    }

    .payroll-item > div:last-child[b-z6klrwhhfu] {
        justify-items: start;
        text-align: left;
    }
}

@media (max-width: 520px) {
    .staff-details-title[b-z6klrwhhfu],
    .staff-card-title[b-z6klrwhhfu] {
        align-items: flex-start;
        flex-direction: column;
    }

    .staff-profile-avatar[b-z6klrwhhfu] {
        width: 72px;
        height: 72px;
        border-radius: 24px;
    }
}
/* /Components/Pages/StaffDirectoryPage.razor.rz.scp.css */
@keyframes staffDirectoryRise-b-b7ekgnqb0v {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes staffDirectoryShimmer-b-b7ekgnqb0v {
    100% {
        transform: translateX(100%);
    }
}

.staff-directory-page[b-b7ekgnqb0v] {
    --surface: rgba(255, 255, 255, .88);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --teacher: #8b5cf6;
    --teacher-soft: #ede9fe;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 96px;
    color: var(--text-body);
    font-family: Inter, Manrope, "Noto Sans Myanmar", "Pyidaungsu", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.staff-directory-page.mybody[b-b7ekgnqb0v] {
    display: block;
    grid-template-rows: unset;
}

.staff-directory-page[b-b7ekgnqb0v]::-webkit-scrollbar,
.staff-table-wrap[b-b7ekgnqb0v]::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.staff-directory-page[b-b7ekgnqb0v]::-webkit-scrollbar-track,
.staff-table-wrap[b-b7ekgnqb0v]::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(226, 232, 240, .45);
}

.staff-directory-page[b-b7ekgnqb0v]::-webkit-scrollbar-thumb,
.staff-table-wrap[b-b7ekgnqb0v]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(100, 116, 139, .42);
}

.staff-directory-page[b-b7ekgnqb0v]::before,
.staff-directory-page[b-b7ekgnqb0v]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.staff-directory-page[b-b7ekgnqb0v]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.staff-directory-page[b-b7ekgnqb0v]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.staff-directory-shell[b-b7ekgnqb0v] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: staffDirectoryRise-b-b7ekgnqb0v .36s ease-out both;
}

.staff-directory-hero[b-b7ekgnqb0v],
.staff-summary-card[b-b7ekgnqb0v],
.staff-toolbar-card[b-b7ekgnqb0v],
.staff-directory-card[b-b7ekgnqb0v],
.staff-empty-state[b-b7ekgnqb0v],
.staff-mobile-card[b-b7ekgnqb0v],
.staff-skeleton-row[b-b7ekgnqb0v] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.staff-directory-hero[b-b7ekgnqb0v] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border-radius: var(--radius-xl);
}

.staff-directory-hero[b-b7ekgnqb0v]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 300px;
    height: 300px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(236, 72, 153, .13), transparent 68%);
    pointer-events: none;
}

.staff-directory-copy[b-b7ekgnqb0v],
.register-staff-button[b-b7ekgnqb0v],
.staff-card-title[b-b7ekgnqb0v],
.staff-toolbar-header[b-b7ekgnqb0v],
.staff-summary-card[b-b7ekgnqb0v],
.staff-search-field[b-b7ekgnqb0v],
.reset-filter-button[b-b7ekgnqb0v],
.staff-directory-card-header[b-b7ekgnqb0v],
.employee-cell[b-b7ekgnqb0v],
.contact-stack strong[b-b7ekgnqb0v],
.contact-stack span[b-b7ekgnqb0v],
.status-pill[b-b7ekgnqb0v],
.staff-action-row[b-b7ekgnqb0v],
.staff-icon-action[b-b7ekgnqb0v],
.empty-actions[b-b7ekgnqb0v],
.mobile-staff-top[b-b7ekgnqb0v],
.mobile-chip-row[b-b7ekgnqb0v] {
    display: flex;
    align-items: center;
}

.staff-directory-copy[b-b7ekgnqb0v],
.staff-card-title[b-b7ekgnqb0v],
.employee-cell[b-b7ekgnqb0v] {
    gap: 16px;
}

.staff-toolbar-header[b-b7ekgnqb0v],
.staff-directory-card-header[b-b7ekgnqb0v],
.mobile-staff-top[b-b7ekgnqb0v] {
    justify-content: space-between;
    gap: 16px;
}

.register-staff-button[b-b7ekgnqb0v],
.reset-filter-button[b-b7ekgnqb0v],
.staff-icon-action[b-b7ekgnqb0v],
.status-pill[b-b7ekgnqb0v] {
    justify-content: center;
}

.staff-directory-icon[b-b7ekgnqb0v],
.staff-card-title > span[b-b7ekgnqb0v],
.summary-icon[b-b7ekgnqb0v],
.staff-avatar[b-b7ekgnqb0v],
.staff-empty-state > span[b-b7ekgnqb0v] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.staff-directory-icon[b-b7ekgnqb0v] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--teacher) 54%, var(--pink));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.staff-directory-hero h1[b-b7ekgnqb0v],
.staff-card-title h2[b-b7ekgnqb0v],
.staff-empty-state h2[b-b7ekgnqb0v] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.035em;
}

.staff-directory-hero h1[b-b7ekgnqb0v] {
    font-size: clamp(1.7rem, 2.5vw, 2.35rem);
}

.staff-card-title h2[b-b7ekgnqb0v],
.staff-empty-state h2[b-b7ekgnqb0v] {
    font-size: 1.12rem;
}

.staff-directory-hero p[b-b7ekgnqb0v],
.staff-card-title p[b-b7ekgnqb0v],
.staff-empty-state p[b-b7ekgnqb0v] {
    margin: 0;
    color: var(--text-body);
}

.register-staff-button[b-b7ekgnqb0v],
.reset-filter-button[b-b7ekgnqb0v],
.staff-icon-action[b-b7ekgnqb0v] {
    gap: 8px;
    border: 0;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}

.register-staff-button[b-b7ekgnqb0v] {
    position: relative;
    z-index: 1;
    min-height: 46px;
    padding: 0 18px;
    color: white;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--primary), var(--teacher) 58%, var(--pink));
    box-shadow: 0 16px 30px rgba(14, 165, 233, .22);
}

.register-staff-button.compact[b-b7ekgnqb0v] {
    min-height: 42px;
}

.register-staff-button:hover[b-b7ekgnqb0v],
.reset-filter-button:hover[b-b7ekgnqb0v],
.staff-icon-action:hover[b-b7ekgnqb0v] {
    transform: translateY(-2px);
}

.staff-summary-grid[b-b7ekgnqb0v] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.staff-summary-card[b-b7ekgnqb0v] {
    gap: 13px;
    min-width: 0;
    padding: 17px;
    border-radius: var(--radius-lg);
}

.summary-icon[b-b7ekgnqb0v] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
}

.summary-primary[b-b7ekgnqb0v] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.summary-success[b-b7ekgnqb0v] {
    color: #047857;
    background: var(--success-soft);
}

.summary-teacher[b-b7ekgnqb0v] {
    color: #6d28d9;
    background: var(--teacher-soft);
}

.summary-warning[b-b7ekgnqb0v] {
    color: #a16207;
    background: var(--warning-soft);
}

.staff-summary-card p[b-b7ekgnqb0v] {
    margin: 0 0 4px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.staff-summary-card strong[b-b7ekgnqb0v] {
    display: block;
    color: var(--text-main);
    font-size: clamp(1.25rem, 1.8vw, 1.72rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.staff-summary-card small[b-b7ekgnqb0v] {
    color: var(--text-muted);
    font-weight: 750;
}

.staff-toolbar-card[b-b7ekgnqb0v],
.staff-directory-card[b-b7ekgnqb0v] {
    overflow: hidden;
    padding: 22px;
    border-radius: var(--radius-xl);
}

.staff-toolbar-header[b-b7ekgnqb0v],
.staff-directory-card-header[b-b7ekgnqb0v] {
    margin-bottom: 18px;
}

.staff-card-title > span[b-b7ekgnqb0v] {
    width: 44px;
    height: 44px;
    color: var(--primary-dark);
    border-radius: 16px;
    background: var(--primary-soft);
}

.staff-found-chip[b-b7ekgnqb0v] {
    width: fit-content;
    padding: 9px 12px;
    color: var(--primary-dark);
    border-radius: 999px;
    background: rgba(224, 245, 255, .72);
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.staff-toolbar-grid[b-b7ekgnqb0v] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px 180px 210px auto;
    gap: 12px;
    align-items: end;
}

.staff-search-field[b-b7ekgnqb0v],
.staff-filter-field[b-b7ekgnqb0v] {
    min-width: 0;
}

.staff-search-field[b-b7ekgnqb0v] {
    gap: 10px;
    min-height: 50px;
    padding: 0 14px;
    color: var(--text-muted);
    border: 1px solid rgba(120, 170, 210, .22);
    border-radius: 18px;
    background: rgba(255, 255, 255, .82);
}

.staff-search-field input[b-b7ekgnqb0v] {
    width: 100%;
    border: 0;
    outline: none;
    color: var(--text-main);
    background: transparent;
    font-weight: 760;
}

.staff-filter-field span[b-b7ekgnqb0v] {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.staff-filter-field select[b-b7ekgnqb0v] {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(120, 170, 210, .22);
    border-radius: 18px;
    color: var(--text-main);
    background: rgba(255, 255, 255, .82);
    font-weight: 760;
    padding: 0 12px;
}

.staff-search-field:focus-within[b-b7ekgnqb0v],
.staff-filter-field select:focus[b-b7ekgnqb0v] {
    border-color: rgba(14, 165, 233, .45);
    box-shadow: 0 0 0 .22rem rgba(14, 165, 233, .12);
}

.reset-filter-button[b-b7ekgnqb0v] {
    min-height: 50px;
    padding: 0 14px;
    color: var(--text-body);
    border-radius: 18px;
    background: rgba(255, 255, 255, .74);
    box-shadow: inset 0 0 0 1px rgba(120, 170, 210, .2);
}

.staff-table-wrap[b-b7ekgnqb0v] {
    overflow-x: auto;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 22px;
    background: rgba(255, 255, 255, .66);
}

.staff-table[b-b7ekgnqb0v] {
    width: 100%;
    min-width: 1040px;
    border-collapse: separate;
    border-spacing: 0;
}

.staff-table th[b-b7ekgnqb0v] {
    padding: 16px 18px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(248, 250, 252, .9);
    border-bottom: 1px solid rgba(120, 170, 210, .16);
}

.staff-table td[b-b7ekgnqb0v] {
    padding: 17px 18px;
    color: var(--text-body);
    border-bottom: 1px solid rgba(120, 170, 210, .12);
    vertical-align: middle;
}

.staff-table tbody tr:last-child td[b-b7ekgnqb0v] {
    border-bottom: 0;
}

.staff-table tbody tr:hover[b-b7ekgnqb0v] {
    background: rgba(224, 245, 255, .32);
}

.staff-avatar[b-b7ekgnqb0v] {
    width: 48px;
    height: 48px;
    color: white;
    border-radius: 17px;
    font-weight: 900;
    background: linear-gradient(135deg, var(--teacher), var(--pink));
    box-shadow: 0 14px 26px rgba(139, 92, 246, .18);
}

.employee-cell strong[b-b7ekgnqb0v] {
    display: block;
    color: var(--text-main);
    font-weight: 900;
}

.employee-cell code[b-b7ekgnqb0v] {
    display: block;
    width: fit-content;
    margin-top: 3px;
    padding: 3px 7px;
    color: #475569;
    border-radius: 9px;
    background: #f1f5f9;
    font-size: .78rem;
    font-weight: 800;
}

.contact-stack[b-b7ekgnqb0v] {
    display: grid;
    gap: 5px;
}

.contact-stack strong[b-b7ekgnqb0v],
.contact-stack span[b-b7ekgnqb0v] {
    gap: 7px;
    color: var(--text-body);
    font-size: .86rem;
    font-weight: 760;
}

.contact-stack strong[b-b7ekgnqb0v] {
    color: var(--text-main);
    font-weight: 850;
}

.missing-value[b-b7ekgnqb0v] {
    color: var(--text-muted) !important;
}

.role-pill[b-b7ekgnqb0v],
.specialization-chip[b-b7ekgnqb0v],
.readiness-chip[b-b7ekgnqb0v],
.status-pill[b-b7ekgnqb0v] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 850;
}

.role-pill[b-b7ekgnqb0v],
.specialization-chip[b-b7ekgnqb0v],
.readiness-chip[b-b7ekgnqb0v] {
    padding: 8px 11px;
}

.role-teacher[b-b7ekgnqb0v] {
    color: #6d28d9;
    background: var(--teacher-soft);
}

.role-admin[b-b7ekgnqb0v] {
    color: #1e293b;
    background: #e2e8f0;
}

.role-superadmin[b-b7ekgnqb0v] {
    color: #be185d;
    background: var(--pink-soft);
}

.role-finance[b-b7ekgnqb0v] {
    color: #0f766e;
    background: #ccfbf1;
}

.role-registrar[b-b7ekgnqb0v] {
    color: #a16207;
    background: var(--warning-soft);
}

.specialization-stack[b-b7ekgnqb0v] {
    display: grid;
    gap: 7px;
}

.specialization-chip[b-b7ekgnqb0v] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.specialization-missing[b-b7ekgnqb0v] {
    color: #a16207;
    background: var(--warning-soft);
}

.readiness-ready[b-b7ekgnqb0v] {
    color: #047857;
    background: var(--success-soft);
}

.readiness-warning[b-b7ekgnqb0v] {
    color: #a16207;
    background: var(--warning-soft);
}

.status-pill[b-b7ekgnqb0v] {
    gap: 7px;
    padding: 8px 11px;
}

.status-pill i[b-b7ekgnqb0v] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
}

.status-active[b-b7ekgnqb0v] {
    color: #047857;
    background: var(--success-soft);
}

.status-inactive[b-b7ekgnqb0v] {
    color: #be123c;
    background: var(--danger-soft);
}

.staff-action-row[b-b7ekgnqb0v] {
    justify-content: flex-end;
    gap: 7px;
}

.staff-icon-action[b-b7ekgnqb0v] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
}

.action-view[b-b7ekgnqb0v] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.action-warning[b-b7ekgnqb0v] {
    color: #a16207;
    background: var(--warning-soft);
}

.action-danger[b-b7ekgnqb0v] {
    color: #be123c;
    background: var(--danger-soft);
}

.action-success[b-b7ekgnqb0v] {
    color: #047857;
    background: var(--success-soft);
}

.staff-empty-state[b-b7ekgnqb0v] {
    flex-direction: column;
    justify-content: center;
    min-height: 320px;
    padding: 42px 22px;
    text-align: center;
    border-radius: var(--radius-xl);
}

.staff-empty-state > span[b-b7ekgnqb0v] {
    width: 74px;
    height: 74px;
    margin-bottom: 14px;
    color: var(--primary-dark);
    font-size: 1.8rem;
    border-radius: 26px;
    background: var(--primary-soft);
}

.empty-actions[b-b7ekgnqb0v] {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 6px;
}

.staff-skeleton-list[b-b7ekgnqb0v] {
    display: grid;
    gap: 10px;
}

.staff-skeleton-row[b-b7ekgnqb0v] {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 48px 1.2fr 1fr .8fr;
    gap: 14px;
    align-items: center;
    min-height: 78px;
    padding: 16px;
    border-radius: 22px;
}

.staff-skeleton-row[b-b7ekgnqb0v]::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
    animation: staffDirectoryShimmer-b-b7ekgnqb0v 1.4s infinite;
}

.staff-skeleton-row span[b-b7ekgnqb0v],
.staff-skeleton-row div[b-b7ekgnqb0v] {
    height: 16px;
    border-radius: 999px;
    background: rgba(226, 232, 240, .78);
}

.staff-skeleton-row span[b-b7ekgnqb0v] {
    width: 48px;
    height: 48px;
    border-radius: 17px;
}

.staff-mobile-list[b-b7ekgnqb0v] {
    display: none;
    gap: 12px;
}

.staff-mobile-card[b-b7ekgnqb0v] {
    display: grid;
    gap: 13px;
    padding: 17px;
    border-radius: var(--radius-lg);
}

.mobile-chip-row[b-b7ekgnqb0v] {
    flex-wrap: wrap;
    gap: 8px;
}

.mobile-contact[b-b7ekgnqb0v] {
    padding: 12px;
    border: 1px solid rgba(120, 170, 210, .14);
    border-radius: 17px;
    background: rgba(248, 252, 255, .74);
}

.mobile-actions[b-b7ekgnqb0v] {
    justify-content: flex-start;
}

@media (max-width: 1320px) {
    .staff-summary-grid[b-b7ekgnqb0v] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .staff-toolbar-grid[b-b7ekgnqb0v] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .staff-directory-page[b-b7ekgnqb0v] {
        padding: 16px 12px 72px;
    }

    .staff-directory-shell[b-b7ekgnqb0v] {
        padding: 14px;
        border-radius: 26px;
    }

    .staff-directory-hero[b-b7ekgnqb0v],
    .staff-toolbar-header[b-b7ekgnqb0v],
    .staff-directory-card-header[b-b7ekgnqb0v],
    .mobile-staff-top[b-b7ekgnqb0v] {
        align-items: flex-start;
        flex-direction: column;
    }

    .register-staff-button[b-b7ekgnqb0v],
    .staff-toolbar-grid[b-b7ekgnqb0v],
    .reset-filter-button[b-b7ekgnqb0v] {
        width: 100%;
    }

    .staff-summary-grid[b-b7ekgnqb0v],
    .staff-toolbar-grid[b-b7ekgnqb0v] {
        grid-template-columns: 1fr;
    }

    .staff-table-wrap[b-b7ekgnqb0v] {
        display: none;
    }

    .staff-mobile-list[b-b7ekgnqb0v] {
        display: grid;
    }
}

@media (max-width: 520px) {
    .staff-directory-copy[b-b7ekgnqb0v],
    .staff-card-title[b-b7ekgnqb0v],
    .employee-cell[b-b7ekgnqb0v] {
        align-items: flex-start;
        flex-direction: column;
    }

    .staff-toolbar-card[b-b7ekgnqb0v],
    .staff-directory-card[b-b7ekgnqb0v],
    .staff-mobile-card[b-b7ekgnqb0v] {
        padding: 18px;
        border-radius: 24px;
    }
}
/* /Components/Pages/StaffRegistrationPage.razor.rz.scp.css */
@keyframes staffRise-b-fbw3qem5an {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.staff-registration-page[b-fbw3qem5an] {
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 96px;
    color: var(--text-body);
    font-family: Inter, Manrope, "Noto Sans Myanmar", "Pyidaungsu", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.staff-registration-page.mybody[b-fbw3qem5an] {
    display: block;
    grid-template-rows: unset;
}

.staff-registration-page[b-fbw3qem5an]::before,
.staff-registration-page[b-fbw3qem5an]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.staff-registration-page[b-fbw3qem5an]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.staff-registration-page[b-fbw3qem5an]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.staff-onboarding-shell[b-fbw3qem5an] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: staffRise-b-fbw3qem5an .36s ease-out both;
}

.staff-hero[b-fbw3qem5an],
.staff-workflow[b-fbw3qem5an],
.staff-section-card[b-fbw3qem5an],
.staff-preview-card[b-fbw3qem5an],
.staff-action-footer[b-fbw3qem5an] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.staff-hero[b-fbw3qem5an] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    overflow: hidden;
    padding: 26px 28px;
    border-radius: var(--radius-xl);
}

.staff-hero[b-fbw3qem5an]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 300px;
    height: 300px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(236, 72, 153, .13), transparent 68%);
    pointer-events: none;
}

.staff-hero-copy[b-fbw3qem5an],
.staff-directory-button[b-fbw3qem5an],
.staff-workflow[b-fbw3qem5an],
.workflow-pill[b-fbw3qem5an],
.staff-section-header[b-fbw3qem5an],
.employee-id-control[b-fbw3qem5an],
.password-note[b-fbw3qem5an],
.staff-action-footer[b-fbw3qem5an],
.staff-footer-actions[b-fbw3qem5an],
.staff-reset-button[b-fbw3qem5an],
.staff-submit-button[b-fbw3qem5an],
.preview-chip-stack[b-fbw3qem5an],
.preview-chip-stack span[b-fbw3qem5an] {
    display: flex;
    align-items: center;
}

.staff-hero-copy[b-fbw3qem5an],
.staff-section-header[b-fbw3qem5an] {
    gap: 16px;
}

.staff-directory-button[b-fbw3qem5an],
.workflow-pill[b-fbw3qem5an],
.password-note[b-fbw3qem5an],
.staff-reset-button[b-fbw3qem5an],
.staff-submit-button[b-fbw3qem5an],
.preview-chip-stack span[b-fbw3qem5an] {
    justify-content: center;
    gap: 8px;
}

.staff-hero-icon[b-fbw3qem5an],
.staff-section-header > span[b-fbw3qem5an],
.preview-avatar[b-fbw3qem5an] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.staff-hero-icon[b-fbw3qem5an] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--violet) 54%, var(--pink));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.staff-hero h1[b-fbw3qem5an],
.staff-section-header h2[b-fbw3qem5an],
.staff-preview-card h2[b-fbw3qem5an],
.staff-action-footer h2[b-fbw3qem5an] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.035em;
}

.staff-hero h1[b-fbw3qem5an] {
    font-size: clamp(1.7rem, 2.5vw, 2.35rem);
}

.staff-section-header h2[b-fbw3qem5an],
.staff-action-footer h2[b-fbw3qem5an] {
    font-size: 1.12rem;
}

.staff-preview-card h2[b-fbw3qem5an] {
    font-size: 1.25rem;
}

.staff-hero p[b-fbw3qem5an],
.staff-section-header p[b-fbw3qem5an],
.staff-action-footer p[b-fbw3qem5an],
.staff-preview-card p[b-fbw3qem5an] {
    margin: 0;
    color: var(--text-body);
}

.staff-directory-button[b-fbw3qem5an],
.staff-reset-button[b-fbw3qem5an],
.staff-submit-button[b-fbw3qem5an],
.generate-id-button[b-fbw3qem5an] {
    border: 0;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease, background .18s ease;
}

.staff-directory-button[b-fbw3qem5an] {
    position: relative;
    z-index: 1;
    min-height: 44px;
    padding: 0 18px;
    color: var(--primary-dark);
    border-radius: 999px;
    background: rgba(224, 245, 255, .78);
    box-shadow: inset 0 0 0 1px rgba(14, 165, 233, .16);
}

.staff-directory-button:hover[b-fbw3qem5an],
.staff-reset-button:hover[b-fbw3qem5an],
.staff-submit-button:hover[b-fbw3qem5an],
.generate-id-button:hover[b-fbw3qem5an] {
    transform: translateY(-2px);
}

.staff-workflow[b-fbw3qem5an] {
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 14px;
    border-radius: var(--radius-lg);
}

.workflow-pill[b-fbw3qem5an] {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 13px;
    color: var(--text-muted);
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.workflow-pill.is-active[b-fbw3qem5an] {
    color: white;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 12px 22px rgba(14, 165, 233, .16);
}

.staff-form-layout[b-fbw3qem5an] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 18px;
    align-items: start;
}

.staff-form-main[b-fbw3qem5an] {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.staff-section-card[b-fbw3qem5an] {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: var(--radius-xl);
}

.staff-section-header > span[b-fbw3qem5an] {
    width: 46px;
    height: 46px;
    color: var(--primary-dark);
    border-radius: 17px;
    background: var(--primary-soft);
}

.staff-field-grid[b-fbw3qem5an] {
    display: grid;
    gap: 16px;
}

.employment-grid[b-fbw3qem5an],
.login-grid[b-fbw3qem5an] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.two-column-grid[b-fbw3qem5an] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-field[b-fbw3qem5an] {
    min-width: 0;
}

.staff-field > span[b-fbw3qem5an] {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 850;
    letter-spacing: .04em;
}

.staff-field b[b-fbw3qem5an] {
    color: var(--danger);
}

.staff-input[b-fbw3qem5an] {
    min-height: 50px;
    border: 1px solid rgba(120, 170, 210, .26);
    border-radius: 17px;
    color: var(--text-main);
    font-size: .92rem;
    font-weight: 740;
    background-color: rgba(255, 255, 255, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

.staff-input:focus[b-fbw3qem5an] {
    border-color: rgba(14, 165, 233, .45);
    box-shadow: 0 0 0 .22rem rgba(14, 165, 233, .12);
}

.staff-field em[b-fbw3qem5an] {
    display: block;
    margin-top: 7px;
    color: var(--text-muted);
    font-size: .78rem;
    font-style: normal;
    font-weight: 720;
}

.employee-id-control[b-fbw3qem5an] {
    align-items: stretch;
}

.employee-id-input[b-fbw3qem5an] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    font-family: "Cascadia Mono", Consolas, monospace;
    font-weight: 850;
    letter-spacing: .02em;
}

.generate-id-button[b-fbw3qem5an] {
    width: 52px;
    color: var(--primary-dark);
    border: 1px solid rgba(120, 170, 210, .26);
    border-left: 0;
    border-radius: 0 17px 17px 0;
    background: rgba(224, 245, 255, .72);
}

.status-preview[b-fbw3qem5an],
.role-preview[b-fbw3qem5an],
.preview-chip-stack span[b-fbw3qem5an] {
    width: fit-content;
    padding: 7px 10px;
    border-radius: 999px;
}

.status-active[b-fbw3qem5an] {
    color: #047857 !important;
    background: var(--success-soft) !important;
}

.status-suspended[b-fbw3qem5an] {
    color: #a16207 !important;
    background: var(--warning-soft) !important;
}

.status-muted[b-fbw3qem5an] {
    color: #475569 !important;
    background: #f1f5f9 !important;
}

.role-teacher[b-fbw3qem5an] {
    color: var(--primary-dark) !important;
    background: var(--primary-soft) !important;
}

.role-admin[b-fbw3qem5an] {
    color: #1e293b !important;
    background: #e2e8f0 !important;
}

.role-finance[b-fbw3qem5an] {
    color: #0f766e !important;
    background: #ccfbf1 !important;
}

.role-registrar[b-fbw3qem5an] {
    color: #a16207 !important;
    background: var(--warning-soft) !important;
}

.password-note[b-fbw3qem5an] {
    align-items: flex-start;
    padding: 13px 14px;
    color: #8a5b08;
    border: 1px solid rgba(245, 158, 11, .18);
    border-radius: 18px;
    background: rgba(255, 247, 237, .74);
    font-size: .84rem;
    font-weight: 740;
}

.staff-preview-card[b-fbw3qem5an] {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 13px;
    padding: 22px;
    border-radius: var(--radius-xl);
}

.preview-avatar[b-fbw3qem5an] {
    width: 66px;
    height: 66px;
    color: white;
    border-radius: 24px;
    font-size: 1.25rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--violet), var(--pink));
    box-shadow: 0 18px 34px rgba(139, 92, 246, .2);
}

.preview-label[b-fbw3qem5an] {
    width: fit-content;
    padding: 8px 11px;
    color: var(--primary-dark);
    border-radius: 999px;
    background: var(--primary-soft);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.preview-chip-stack[b-fbw3qem5an] {
    flex-wrap: wrap;
    gap: 8px;
}

.preview-chip-stack span[b-fbw3qem5an] {
    font-size: .78rem;
    font-weight: 850;
}

.preview-detail-list[b-fbw3qem5an] {
    display: grid;
    gap: 10px;
    padding-top: 4px;
}

.preview-detail-list div[b-fbw3qem5an] {
    padding: 12px;
    border: 1px solid rgba(120, 170, 210, .14);
    border-radius: 17px;
    background: rgba(248, 252, 255, .72);
}

.preview-detail-list span[b-fbw3qem5an] {
    display: block;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.preview-detail-list strong[b-fbw3qem5an] {
    display: block;
    overflow: hidden;
    color: var(--text-main);
    font-weight: 850;
    text-overflow: ellipsis;
}

.staff-action-footer[b-fbw3qem5an] {
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding: 18px 20px;
    border-radius: var(--radius-xl);
}

.staff-footer-actions[b-fbw3qem5an] {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.staff-reset-button[b-fbw3qem5an],
.staff-submit-button[b-fbw3qem5an] {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 16px;
}

.staff-reset-button[b-fbw3qem5an] {
    color: var(--text-body);
    background: rgba(255, 255, 255, .72);
    box-shadow: inset 0 0 0 1px rgba(120, 170, 210, .26);
}

.staff-submit-button[b-fbw3qem5an] {
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--violet) 58%, var(--pink));
    box-shadow: 0 16px 30px rgba(14, 165, 233, .22);
}

@media (max-width: 1180px) {
    .staff-form-layout[b-fbw3qem5an] {
        grid-template-columns: 1fr;
    }

    .staff-preview-card[b-fbw3qem5an] {
        position: static;
    }
}

@media (max-width: 960px) {
    .employment-grid[b-fbw3qem5an],
    .login-grid[b-fbw3qem5an],
    .two-column-grid[b-fbw3qem5an] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .staff-registration-page[b-fbw3qem5an] {
        padding: 16px 12px 72px;
    }

    .staff-onboarding-shell[b-fbw3qem5an] {
        padding: 14px;
        border-radius: 26px;
    }

    .staff-hero[b-fbw3qem5an],
    .staff-action-footer[b-fbw3qem5an] {
        align-items: flex-start;
        flex-direction: column;
    }

    .staff-directory-button[b-fbw3qem5an],
    .staff-footer-actions[b-fbw3qem5an],
    .staff-reset-button[b-fbw3qem5an],
    .staff-submit-button[b-fbw3qem5an] {
        width: 100%;
    }

    .employment-grid[b-fbw3qem5an],
    .login-grid[b-fbw3qem5an],
    .two-column-grid[b-fbw3qem5an] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .staff-hero-copy[b-fbw3qem5an],
    .staff-section-header[b-fbw3qem5an] {
        align-items: flex-start;
        flex-direction: column;
    }

    .staff-section-card[b-fbw3qem5an],
    .staff-preview-card[b-fbw3qem5an] {
        padding: 18px;
        border-radius: 24px;
    }
}
/* /Components/Pages/StaffSalaryPage.razor.rz.scp.css */
@keyframes salaryRise-b-d6xxbfjia6 {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.staff-salary-page[b-d6xxbfjia6] {
    --surface: rgba(255, 255, 255, .88);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --salary: #f59e0b;
    --salary-soft: #fff7ed;
    --success: #10b981;
    --success-soft: #dcfce7;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 96px;
    color: var(--text-body);
    font-family: Inter, Manrope, "Noto Sans Myanmar", "Pyidaungsu", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.staff-salary-page.mybody[b-d6xxbfjia6] {
    display: block;
    grid-template-rows: unset;
}

.staff-salary-page[b-d6xxbfjia6]::-webkit-scrollbar,
.salary-table-wrap[b-d6xxbfjia6]::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

.staff-salary-page[b-d6xxbfjia6]::-webkit-scrollbar-track,
.salary-table-wrap[b-d6xxbfjia6]::-webkit-scrollbar-track {
    border-radius: 999px;
    background: rgba(226, 232, 240, .45);
}

.staff-salary-page[b-d6xxbfjia6]::-webkit-scrollbar-thumb,
.salary-table-wrap[b-d6xxbfjia6]::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(100, 116, 139, .42);
}

.staff-salary-page[b-d6xxbfjia6]::before,
.staff-salary-page[b-d6xxbfjia6]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.staff-salary-page[b-d6xxbfjia6]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.staff-salary-page[b-d6xxbfjia6]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.salary-workspace-shell[b-d6xxbfjia6] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: salaryRise-b-d6xxbfjia6 .36s ease-out both;
}

.salary-hero[b-d6xxbfjia6],
.salary-privacy-note[b-d6xxbfjia6],
.salary-summary-card[b-d6xxbfjia6],
.salary-config-card[b-d6xxbfjia6],
.salary-register-card[b-d6xxbfjia6],
.salary-empty-state[b-d6xxbfjia6],
.salary-mobile-card[b-d6xxbfjia6] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.salary-hero[b-d6xxbfjia6] {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 26px 28px;
    border-radius: var(--radius-xl);
}

.salary-hero[b-d6xxbfjia6]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 300px;
    height: 300px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(245, 158, 11, .14), transparent 68%);
    pointer-events: none;
}

.salary-hero-title[b-d6xxbfjia6],
.payroll-pill[b-d6xxbfjia6],
.salary-privacy-note[b-d6xxbfjia6],
.salary-card-title[b-d6xxbfjia6],
.salary-card-header[b-d6xxbfjia6],
.mode-pill[b-d6xxbfjia6],
.salary-summary-card[b-d6xxbfjia6],
.salary-input-shell[b-d6xxbfjia6],
.salary-form-footer[b-d6xxbfjia6],
.salary-form-actions[b-d6xxbfjia6],
.register-tools[b-d6xxbfjia6],
.salary-staff-cell[b-d6xxbfjia6],
.mobile-salary-top[b-d6xxbfjia6],
.salary-edit-button[b-d6xxbfjia6],
.salary-clear-button[b-d6xxbfjia6],
.salary-save-button[b-d6xxbfjia6],
.currency-chip[b-d6xxbfjia6] {
    display: flex;
    align-items: center;
}

.salary-hero-title[b-d6xxbfjia6],
.salary-card-title[b-d6xxbfjia6],
.salary-staff-cell[b-d6xxbfjia6] {
    gap: 16px;
}

.salary-card-header[b-d6xxbfjia6],
.salary-form-footer[b-d6xxbfjia6],
.mobile-salary-top[b-d6xxbfjia6] {
    justify-content: space-between;
    gap: 16px;
}

.payroll-pill[b-d6xxbfjia6],
.mode-pill[b-d6xxbfjia6],
.salary-clear-button[b-d6xxbfjia6],
.salary-save-button[b-d6xxbfjia6],
.salary-edit-button[b-d6xxbfjia6],
.currency-chip[b-d6xxbfjia6] {
    justify-content: center;
    gap: 8px;
}

.salary-hero-icon[b-d6xxbfjia6],
.salary-card-title > span[b-d6xxbfjia6],
.salary-summary-card > span[b-d6xxbfjia6],
.preview-icon[b-d6xxbfjia6],
.staff-avatar[b-d6xxbfjia6],
.salary-empty-state > span[b-d6xxbfjia6] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.salary-hero-icon[b-d6xxbfjia6],
.salary-card-title > span[b-d6xxbfjia6] {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    color: var(--salary);
    background: linear-gradient(145deg, #fff7ed, #e0f5ff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
    font-size: 1.25rem;
}

.salary-hero-title h1[b-d6xxbfjia6],
.salary-card-title h2[b-d6xxbfjia6],
.salary-empty-state h2[b-d6xxbfjia6] {
    margin: 0;
    color: var(--text-main);
    font-weight: 800;
    letter-spacing: -.03em;
}

.salary-hero-title h1[b-d6xxbfjia6] {
    font-size: clamp(1.75rem, 1.4vw + 1.25rem, 2.18rem);
}

.salary-hero-title p[b-d6xxbfjia6],
.salary-card-title p[b-d6xxbfjia6],
.salary-empty-state p[b-d6xxbfjia6] {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .92rem;
}

.payroll-pill[b-d6xxbfjia6],
.mode-pill[b-d6xxbfjia6],
.record-count-pill[b-d6xxbfjia6] {
    position: relative;
    z-index: 1;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid rgba(245, 158, 11, .2);
    border-radius: 999px;
    color: #b45309;
    background: var(--salary-soft);
    font-size: .8rem;
    font-weight: 850;
    white-space: nowrap;
}

.mode-pill.editing[b-d6xxbfjia6] {
    color: var(--primary-dark);
    border-color: rgba(14, 165, 233, .2);
    background: var(--primary-soft);
}

.salary-privacy-note[b-d6xxbfjia6] {
    gap: 10px;
    padding: 13px 16px;
    border-radius: 18px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, .72);
    font-size: .88rem;
    font-weight: 750;
}

.salary-summary-grid[b-d6xxbfjia6] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.salary-summary-card[b-d6xxbfjia6] {
    gap: 14px;
    min-height: 116px;
    padding: 18px;
    border-radius: var(--radius-lg);
}

.salary-summary-card > span[b-d6xxbfjia6] {
    width: 48px;
    height: 48px;
    border-radius: 17px;
    color: var(--primary);
    background: var(--primary-soft);
}

.salary-summary-card.salary > span[b-d6xxbfjia6] {
    color: var(--salary);
    background: var(--salary-soft);
}

.salary-summary-card.success > span[b-d6xxbfjia6] {
    color: var(--success);
    background: var(--success-soft);
}

.salary-summary-card.danger > span[b-d6xxbfjia6] {
    color: var(--danger);
    background: var(--danger-soft);
}

.salary-summary-card.violet > span[b-d6xxbfjia6] {
    color: var(--violet);
    background: var(--violet-soft);
}

.salary-summary-card p[b-d6xxbfjia6],
.salary-summary-card small[b-d6xxbfjia6],
.salary-field span[b-d6xxbfjia6],
.salary-field small[b-d6xxbfjia6] {
    margin: 0;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 750;
}

.salary-summary-card strong[b-d6xxbfjia6] {
    display: block;
    color: var(--text-main);
    font-size: clamp(1.05rem, .9vw + .75rem, 1.45rem);
    font-weight: 850;
    letter-spacing: -.03em;
}

.salary-config-card[b-d6xxbfjia6],
.salary-register-card[b-d6xxbfjia6] {
    display: grid;
    gap: 18px;
    padding: 22px;
    border-radius: var(--radius-xl);
}

.salary-config-layout[b-d6xxbfjia6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
    align-items: stretch;
}

.salary-form-grid[b-d6xxbfjia6] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.staff-field[b-d6xxbfjia6] {
    grid-column: span 2;
}

.salary-field[b-d6xxbfjia6] {
    display: grid;
    gap: 7px;
}

.salary-field span[b-d6xxbfjia6] {
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.salary-field em[b-d6xxbfjia6] {
    color: var(--danger);
    font-style: normal;
}

.salary-input-shell[b-d6xxbfjia6] {
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: rgba(255, 255, 255, .84);
    transition: border .18s ease, box-shadow .18s ease, background .18s ease;
}

.salary-input-shell:focus-within[b-d6xxbfjia6] {
    border-color: rgba(245, 158, 11, .42);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .1);
}

.salary-input-shell > i[b-d6xxbfjia6] {
    color: var(--primary);
}

.money-shell.allowance > i[b-d6xxbfjia6] {
    color: var(--success);
}

.money-shell.deduction > i[b-d6xxbfjia6] {
    color: var(--danger);
}

.salary-input[b-d6xxbfjia6] {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    border: 0;
    outline: 0;
    color: var(--text-main);
    background: transparent;
    box-shadow: none;
    font-size: .92rem;
    font-weight: 750;
}

.money-input[b-d6xxbfjia6] {
    text-align: right;
}

.money-shell b[b-d6xxbfjia6] {
    color: var(--text-muted);
    font-size: .78rem;
}

.net-preview-card[b-d6xxbfjia6] {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 10px;
    padding: 20px;
    border: 1px solid rgba(245, 158, 11, .18);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(145deg, rgba(255, 247, 237, .9), rgba(255, 255, 255, .72)),
        var(--salary-soft);
    text-align: center;
}

.preview-icon[b-d6xxbfjia6] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: var(--salary);
    background: rgba(255, 255, 255, .78);
    font-size: 1.3rem;
}

.net-preview-card p[b-d6xxbfjia6],
.net-preview-card small[b-d6xxbfjia6] {
    margin: 0;
    color: #b45309;
    font-size: .82rem;
    font-weight: 800;
}

.net-preview-card strong[b-d6xxbfjia6] {
    color: var(--text-main);
    font-size: clamp(1.45rem, 1.4vw + 1rem, 2rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.net-preview-card strong.danger[b-d6xxbfjia6],
.net-warning[b-d6xxbfjia6] {
    color: #be123c !important;
}

.salary-equation[b-d6xxbfjia6] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.salary-equation span[b-d6xxbfjia6] {
    padding: 5px 8px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 850;
}

.salary-equation .basic[b-d6xxbfjia6] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.salary-equation .allowance[b-d6xxbfjia6] {
    color: #047857;
    background: var(--success-soft);
}

.salary-equation .deduction[b-d6xxbfjia6] {
    color: #be123c;
    background: var(--danger-soft);
}

.salary-form-footer[b-d6xxbfjia6] {
    flex-wrap: wrap;
    padding-top: 16px;
    border-top: 1px solid rgba(120, 170, 210, .14);
}

.salary-form-footer > span[b-d6xxbfjia6] {
    color: var(--text-muted);
    font-size: .86rem;
    font-weight: 750;
}

.salary-form-actions[b-d6xxbfjia6],
.register-tools[b-d6xxbfjia6] {
    flex-wrap: wrap;
    gap: 10px;
}

.salary-clear-button[b-d6xxbfjia6],
.salary-save-button[b-d6xxbfjia6] {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 15px;
    font-size: .9rem;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.salary-clear-button[b-d6xxbfjia6] {
    border: 1px solid rgba(100, 116, 139, .18);
    color: #475569;
    background: rgba(255, 255, 255, .82);
}

.salary-clear-button.compact[b-d6xxbfjia6] {
    min-height: 36px;
    padding: 0 13px;
    font-size: .8rem;
}

.salary-save-button[b-d6xxbfjia6] {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
    box-shadow: 0 14px 28px rgba(14, 165, 233, .24);
}

.salary-clear-button:hover[b-d6xxbfjia6],
.salary-save-button:hover[b-d6xxbfjia6],
.salary-edit-button:hover[b-d6xxbfjia6] {
    transform: translateY(-1px);
}

.salary-clear-button:hover[b-d6xxbfjia6] {
    background: var(--surface-soft);
}

.salary-save-button:hover[b-d6xxbfjia6] {
    box-shadow: 0 18px 34px rgba(139, 92, 246, .26);
}

.salary-clear-button:focus-visible[b-d6xxbfjia6],
.salary-save-button:focus-visible[b-d6xxbfjia6],
.salary-edit-button:focus-visible[b-d6xxbfjia6],
.salary-input:focus-visible[b-d6xxbfjia6] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 3px;
}

.salary-table-wrap[b-d6xxbfjia6] {
    overflow-x: auto;
    border: 1px solid rgba(120, 170, 210, .14);
    border-radius: 24px;
    background: rgba(255, 255, 255, .54);
}

.salary-table[b-d6xxbfjia6] {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

.salary-table th[b-d6xxbfjia6] {
    padding: 15px 18px;
    color: var(--text-muted);
    background: rgba(255, 247, 237, .72);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.salary-table td[b-d6xxbfjia6] {
    padding: 16px 18px;
    border-top: 1px solid rgba(120, 170, 210, .13);
    color: var(--text-body);
    vertical-align: middle;
}

.salary-table tbody tr[b-d6xxbfjia6] {
    transition: background .18s ease, box-shadow .18s ease;
}

.salary-table tbody tr:hover[b-d6xxbfjia6] {
    background: rgba(14, 165, 233, .045);
}

.salary-table tbody tr.is-editing[b-d6xxbfjia6] {
    background: rgba(224, 245, 255, .5);
    box-shadow: inset 4px 0 0 var(--primary);
}

.staff-avatar[b-d6xxbfjia6] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    color: #fff;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .45), transparent 32%),
        linear-gradient(135deg, #0ea5e9, #8b5cf6);
    font-size: .85rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.salary-staff-cell strong[b-d6xxbfjia6] {
    display: block;
    color: var(--text-main);
    font-size: .96rem;
    font-weight: 850;
}

.salary-staff-cell code[b-d6xxbfjia6] {
    display: inline-flex;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 800;
}

.editing-chip[b-d6xxbfjia6],
.currency-chip[b-d6xxbfjia6] {
    width: fit-content;
    min-height: 26px;
    padding: 0 9px;
    border-radius: 999px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    font-size: .74rem;
    font-weight: 850;
}

.money-value[b-d6xxbfjia6],
.net-value[b-d6xxbfjia6] {
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 820;
}

.money-value.positive[b-d6xxbfjia6] {
    color: #047857;
}

.money-value.deduction[b-d6xxbfjia6] {
    color: #be123c;
}

.money-value.muted[b-d6xxbfjia6] {
    color: var(--text-muted);
}

.net-value[b-d6xxbfjia6] {
    display: inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    color: #92400e;
    background: var(--salary-soft);
    font-weight: 900;
}

.net-value.warning[b-d6xxbfjia6] {
    color: #be123c;
    background: var(--danger-soft);
}

.salary-edit-button[b-d6xxbfjia6] {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(14, 165, 233, .18);
    border-radius: 14px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.salary-empty-state[b-d6xxbfjia6] {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    min-height: 260px;
    padding: 34px;
    border-radius: 24px;
    text-align: center;
}

.salary-empty-state > span[b-d6xxbfjia6] {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    color: var(--salary);
    background: var(--salary-soft);
    font-size: 1.45rem;
}

.salary-mobile-list[b-d6xxbfjia6] {
    display: none;
    gap: 12px;
}

.salary-mobile-card[b-d6xxbfjia6] {
    display: grid;
    gap: 13px;
    padding: 17px;
    border-radius: var(--radius-lg);
}

.salary-mobile-card.is-editing[b-d6xxbfjia6] {
    box-shadow: inset 4px 0 0 var(--primary), var(--shadow-card);
}

.mobile-money-grid[b-d6xxbfjia6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mobile-money-item[b-d6xxbfjia6] {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(120, 170, 210, .14);
    border-radius: 17px;
    background: rgba(248, 252, 255, .72);
}

.mobile-money-item small[b-d6xxbfjia6] {
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.mobile-money-item strong[b-d6xxbfjia6] {
    color: var(--text-main);
    font-size: .92rem;
    font-weight: 850;
}

.mobile-money-item.positive strong[b-d6xxbfjia6] {
    color: #047857;
}

.mobile-money-item.deduction strong[b-d6xxbfjia6] {
    color: #be123c;
}

.mobile-money-item.net[b-d6xxbfjia6] {
    background: var(--salary-soft);
}

.mobile-money-item.net strong[b-d6xxbfjia6] {
    color: #92400e;
    font-weight: 900;
}

@media (max-width: 1420px) {
    .salary-summary-grid[b-d6xxbfjia6] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .salary-config-layout[b-d6xxbfjia6] {
        grid-template-columns: 1fr;
    }

    .net-preview-card[b-d6xxbfjia6] {
        justify-items: start;
        text-align: left;
    }
}

@media (max-width: 1080px) {
    .salary-form-grid[b-d6xxbfjia6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .staff-salary-page[b-d6xxbfjia6] {
        padding: 16px 12px 72px;
    }

    .salary-workspace-shell[b-d6xxbfjia6] {
        padding: 14px;
        border-radius: 26px;
    }

    .salary-hero[b-d6xxbfjia6],
    .salary-card-header[b-d6xxbfjia6],
    .salary-form-footer[b-d6xxbfjia6],
    .register-tools[b-d6xxbfjia6],
    .mobile-salary-top[b-d6xxbfjia6] {
        align-items: flex-start;
        flex-direction: column;
    }

    .payroll-pill[b-d6xxbfjia6],
    .mode-pill[b-d6xxbfjia6],
    .salary-clear-button[b-d6xxbfjia6],
    .salary-save-button[b-d6xxbfjia6],
    .salary-form-actions[b-d6xxbfjia6],
    .record-count-pill[b-d6xxbfjia6] {
        width: 100%;
    }

    .salary-summary-grid[b-d6xxbfjia6],
    .salary-form-grid[b-d6xxbfjia6],
    .mobile-money-grid[b-d6xxbfjia6] {
        grid-template-columns: 1fr;
    }

    .staff-field[b-d6xxbfjia6] {
        grid-column: auto;
    }

    .salary-table-wrap[b-d6xxbfjia6] {
        display: none;
    }

    .salary-mobile-list[b-d6xxbfjia6] {
        display: grid;
    }

    .salary-config-card[b-d6xxbfjia6],
    .salary-register-card[b-d6xxbfjia6] {
        padding: 18px;
        border-radius: 24px;
    }
}

@media (max-width: 520px) {
    .salary-hero-title[b-d6xxbfjia6],
    .salary-card-title[b-d6xxbfjia6],
    .salary-staff-cell[b-d6xxbfjia6] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Components/Pages/StudentAdmissionPage.razor.rz.scp.css */
@keyframes admissionRise-b-4vlq29zmq8 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admission-page[b-4vlq29zmq8] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 92px;
    color: var(--text-body);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.admission-page.mybody[b-4vlq29zmq8] {
    display: block;
    grid-template-rows: unset;
}

.admission-page[b-4vlq29zmq8]::before,
.admission-page[b-4vlq29zmq8]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.admission-page[b-4vlq29zmq8]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.admission-page[b-4vlq29zmq8]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.admission-shell[b-4vlq29zmq8] {
    display: grid;
    gap: 18px;
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: admissionRise-b-4vlq29zmq8 .32s ease-out both;
}

.admission-hero[b-4vlq29zmq8],
.admission-steps[b-4vlq29zmq8],
.ai-admission-status[b-4vlq29zmq8],
.admission-section-card[b-4vlq29zmq8],
.admission-review-card[b-4vlq29zmq8],
.admission-footer-card[b-4vlq29zmq8],
.compact-filter-panel[b-4vlq29zmq8] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.admission-hero[b-4vlq29zmq8] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: var(--radius-xl);
}

.admission-hero[b-4vlq29zmq8]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 290px;
    height: 290px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(139, 92, 246, .13), transparent 68%);
    pointer-events: none;
}

.admission-hero-title[b-4vlq29zmq8] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.admission-hero-icon[b-4vlq29zmq8],
.admission-section-header > span[b-4vlq29zmq8],
.review-header > span[b-4vlq29zmq8] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.admission-hero-icon[b-4vlq29zmq8] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.admission-hero h1[b-4vlq29zmq8] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.18;
}

.admission-hero p[b-4vlq29zmq8] {
    margin: 8px 0 0;
    max-width: 760px;
    color: var(--text-muted);
    font-size: .95rem;
}

.admission-hero-meta[b-4vlq29zmq8],
.admission-steps[b-4vlq29zmq8],
.admission-footer-actions[b-4vlq29zmq8] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admission-hero-meta[b-4vlq29zmq8] {
    margin-top: 14px;
}

.admission-hero-meta span[b-4vlq29zmq8],
.step-pill[b-4vlq29zmq8],
.review-pill[b-4vlq29zmq8],
.guardian-pill[b-4vlq29zmq8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    font-size: .76rem;
    font-weight: 850;
    border-radius: 999px;
}

.admission-hero-meta span[b-4vlq29zmq8] {
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .13);
    background: rgba(224, 245, 255, .78);
}

.admission-soft-button[b-4vlq29zmq8],
.admission-primary-button[b-4vlq29zmq8] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    font-size: .88rem;
    font-weight: 850;
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.admission-soft-button[b-4vlq29zmq8] {
    color: var(--text-main) !important;
    border: 1px solid var(--border-soft) !important;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: none !important;
}

.admission-primary-button[b-4vlq29zmq8] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    background: linear-gradient(135deg, var(--primary), var(--violet)) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .22);
}

.admission-soft-button:hover[b-4vlq29zmq8],
.admission-primary-button:hover[b-4vlq29zmq8],
.admission-icon-button:hover[b-4vlq29zmq8] {
    transform: translateY(-1px);
}

.admission-steps[b-4vlq29zmq8] {
    align-items: center;
    overflow-x: auto;
    padding: 12px;
    border-radius: var(--radius-lg);
}

.step-pill[b-4vlq29zmq8] {
    flex: 0 0 auto;
    color: var(--text-body);
    border: 1px solid rgba(120, 170, 210, .18);
    background: rgba(255, 255, 255, .68);
}

.step-pill.active[b-4vlq29zmq8] {
    color: white;
    border-color: rgba(255, 255, 255, .7);
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 12px 24px rgba(14, 165, 233, .18);
}

.ai-admission-status[b-4vlq29zmq8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    color: #173f39;
    border-left: 4px solid #0f9f83;
    border-radius: var(--radius-md);
    background: rgba(242, 251, 248, .88);
}

.ai-admission-status > div[b-4vlq29zmq8] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ai-admission-status i[b-4vlq29zmq8] {
    color: #0f9f83;
}

.ai-admission-status strong[b-4vlq29zmq8],
.ai-admission-status small[b-4vlq29zmq8] {
    display: block;
}

.ai-admission-status span[b-4vlq29zmq8] {
    font-size: .875rem;
    font-weight: 850;
}

.admission-workspace[b-4vlq29zmq8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
    gap: 18px;
    align-items: start;
}

.admission-form-stack[b-4vlq29zmq8] {
    display: grid;
    gap: 18px;
    min-width: 0;
}

.admission-section-card[b-4vlq29zmq8],
.admission-review-card[b-4vlq29zmq8] {
    border-radius: var(--radius-lg);
}

.admission-section-card[b-4vlq29zmq8] {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.admission-section-header[b-4vlq29zmq8],
.review-header[b-4vlq29zmq8] {
    display: flex;
    align-items: center;
    gap: 13px;
}

.admission-section-header > span[b-4vlq29zmq8],
.review-header > span[b-4vlq29zmq8] {
    width: 46px;
    height: 46px;
    color: var(--primary-dark);
    border-radius: 17px;
    background: rgba(224, 245, 255, .84);
}

.medical-card .admission-section-header > span[b-4vlq29zmq8] {
    color: #be123c;
    background: var(--pink-soft);
}

.login-card .admission-section-header > span[b-4vlq29zmq8] {
    color: #6d28d9;
    background: rgba(245, 243, 255, .86);
}

.admission-section-header h2[b-4vlq29zmq8],
.review-header h2[b-4vlq29zmq8] {
    margin: 0;
    color: var(--text-main);
    font-size: 1.12rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.admission-section-header p[b-4vlq29zmq8],
.review-header p[b-4vlq29zmq8] {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .84rem;
}

.admission-form-grid[b-4vlq29zmq8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.enrollment-field[b-4vlq29zmq8],
.admission-textarea[b-4vlq29zmq8] {
    grid-column: 1 / -1;
}

.admission-field[b-4vlq29zmq8] {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
}

.admission-field > span[b-4vlq29zmq8] {
    color: var(--text-main);
    font-size: .8rem;
    font-weight: 850;
}

.admission-field em[b-4vlq29zmq8] {
    color: var(--danger);
    font-style: normal;
}

.admission-field small[b-4vlq29zmq8],
.attention-text[b-4vlq29zmq8] {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 760;
}

.attention-text[b-4vlq29zmq8] {
    color: #b45309;
}

.admission-input[b-4vlq29zmq8] {
    min-height: 46px;
    color: var(--text-main) !important;
    font-size: .92rem !important;
    font-weight: 760 !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.admission-input:focus[b-4vlq29zmq8] {
    border-color: rgba(14, 165, 233, .5) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12) !important;
}

.admission-code-input[b-4vlq29zmq8] {
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-weight: 900 !important;
    letter-spacing: .02em;
    background: rgba(224, 245, 255, .46) !important;
}

.admission-textarea[b-4vlq29zmq8] {
    min-height: 128px;
    resize: vertical;
}

.medical-card .admission-input:focus[b-4vlq29zmq8] {
    border-color: rgba(236, 72, 153, .45) !important;
    box-shadow: 0 0 0 4px rgba(236, 72, 153, .1) !important;
}

.admission-combo[b-4vlq29zmq8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

.admission-icon-button[b-4vlq29zmq8] {
    display: inline-grid;
    place-items: center;
    min-width: 46px;
    height: 46px;
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .18);
    border-radius: 16px;
    background: rgba(224, 245, 255, .72);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.admission-icon-button.generate[b-4vlq29zmq8] {
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--success));
    box-shadow: 0 12px 24px rgba(14, 165, 233, .18);
}

.guardian-grid[b-4vlq29zmq8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.guardian-link-box[b-4vlq29zmq8] {
    display: grid;
    gap: 12px;
}

.guardian-preview[b-4vlq29zmq8] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    min-height: 72px;
    padding: 12px;
    border: 1px solid rgba(226, 232, 240, .82);
    border-radius: 18px;
    background: rgba(248, 252, 255, .68);
}

.guardian-avatar[b-4vlq29zmq8],
.review-avatar[b-4vlq29zmq8] {
    display: inline-grid;
    place-items: center;
    color: white;
    font-weight: 900;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 12px 22px rgba(14, 165, 233, .18);
}

.guardian-avatar[b-4vlq29zmq8] {
    width: 42px;
    height: 42px;
    font-size: .78rem;
}

.guardian-avatar.muted[b-4vlq29zmq8] {
    color: #b45309;
    background: var(--warning-soft);
    box-shadow: none;
}

.guardian-preview strong[b-4vlq29zmq8] {
    display: block;
    color: var(--text-main);
    font-size: .88rem;
    font-weight: 900;
}

.guardian-preview small[b-4vlq29zmq8] {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 760;
}

.guardian-pill.ready[b-4vlq29zmq8] {
    color: #047857;
    background: var(--success-soft);
}

.guardian-pill.warning[b-4vlq29zmq8],
.review-pill.warning[b-4vlq29zmq8] {
    color: #b45309;
    background: var(--warning-soft);
}

.admission-inline-note[b-4vlq29zmq8] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    font-size: .84rem;
    font-weight: 800;
    border-radius: 16px;
}

.admission-inline-note.warning[b-4vlq29zmq8] {
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, .18);
    background: var(--warning-soft);
}

.admission-review-card[b-4vlq29zmq8] {
    position: sticky;
    top: 18px;
    display: grid;
    gap: 16px;
    padding: 20px;
}

.review-student[b-4vlq29zmq8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(14, 165, 233, .12);
    border-radius: 20px;
    background: rgba(224, 245, 255, .55);
}

.review-avatar[b-4vlq29zmq8] {
    width: 50px;
    height: 50px;
    font-size: .9rem;
}

.review-student strong[b-4vlq29zmq8] {
    display: block;
    color: var(--text-main);
    font-weight: 900;
}

.review-student small[b-4vlq29zmq8] {
    display: block;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 800;
}

.review-list[b-4vlq29zmq8] {
    display: grid;
    gap: 10px;
    margin: 0;
}

.review-list div[b-4vlq29zmq8] {
    display: grid;
    grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 11px 0;
    border-bottom: 1px solid rgba(226, 232, 240, .72);
}

.review-list dt[b-4vlq29zmq8] {
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.review-list dd[b-4vlq29zmq8] {
    margin: 0;
    color: var(--text-main);
    font-size: .86rem;
    font-weight: 850;
    text-align: right;
}

.review-pill.ready[b-4vlq29zmq8] {
    color: #047857;
    background: var(--success-soft);
}

.review-note[b-4vlq29zmq8] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 14px;
    color: var(--primary-dark);
    font-size: .82rem;
    font-weight: 800;
    border: 1px solid rgba(14, 165, 233, .14);
    border-radius: 18px;
    background: rgba(224, 245, 255, .62);
}

.admission-footer-card[b-4vlq29zmq8] {
    position: sticky;
    bottom: 14px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
}

.admission-footer-card strong[b-4vlq29zmq8] {
    display: block;
    color: var(--text-main);
    font-weight: 900;
}

.admission-footer-card span[b-4vlq29zmq8] {
    color: var(--text-muted);
    font-size: .84rem;
    font-weight: 760;
}

.ai-admission-field.ai-filled.valid[b-4vlq29zmq8] {
    border-color: #159fca !important;
    background-color: #f1fbff !important;
    box-shadow: inset 3px 0 0 #159fca !important;
}

.ai-admission-field.user-filled.valid[b-4vlq29zmq8] {
    border-color: rgba(16, 185, 129, .38) !important;
}

.ai-admission-field.missing[b-4vlq29zmq8],
.ai-admission-field.invalid[b-4vlq29zmq8] {
    border-color: var(--danger) !important;
    background-color: #fff6f7 !important;
    box-shadow: 0 0 0 4px rgba(239, 71, 111, .09) !important;
}

.ai-admission-field.ambiguous[b-4vlq29zmq8] {
    border-color: #d99000 !important;
    background-color: #fffaf0 !important;
}

.compact-filter-dialog[b-4vlq29zmq8] {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(15, 23, 42, .28);
    backdrop-filter: blur(5px);
}

.compact-filter-panel[b-4vlq29zmq8] {
    width: min(100%, 520px);
    overflow: hidden;
    border-radius: 26px;
}

.compact-filter-panel .card-body[b-4vlq29zmq8] {
    padding: 22px !important;
}

.compact-filter-panel h5[b-4vlq29zmq8] {
    color: var(--text-main);
    font-weight: 900;
}

.compact-filter-panel .input-group[b-4vlq29zmq8] {
    gap: 8px;
}

.compact-filter-panel .input-group > .form-control[b-4vlq29zmq8],
.compact-filter-panel .input-group > .btn[b-4vlq29zmq8] {
    border-radius: 16px !important;
}

.compact-filter-panel .btn-success[b-4vlq29zmq8] {
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--primary), var(--success)) !important;
}

@media (max-width: 1180px) {
    .admission-workspace[b-4vlq29zmq8] {
        grid-template-columns: 1fr;
    }

    .admission-review-card[b-4vlq29zmq8] {
        position: static;
    }
}

@media (max-width: 820px) {
    .admission-page[b-4vlq29zmq8] {
        padding: 14px 14px 90px;
    }

    .admission-shell[b-4vlq29zmq8] {
        gap: 14px;
        padding: 14px;
        border-radius: 26px;
    }

    .admission-hero[b-4vlq29zmq8] {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
        border-radius: 24px;
    }

    .admission-hero-title[b-4vlq29zmq8] {
        align-items: flex-start;
    }

    .admission-hero-icon[b-4vlq29zmq8] {
        width: 52px;
        height: 52px;
        border-radius: 19px;
    }

    .admission-hero .btn[b-4vlq29zmq8],
    .admission-footer-actions[b-4vlq29zmq8],
    .admission-footer-actions .btn[b-4vlq29zmq8] {
        width: 100%;
    }

    .admission-form-grid[b-4vlq29zmq8],
    .guardian-grid[b-4vlq29zmq8] {
        grid-template-columns: 1fr;
    }

    .admission-section-card[b-4vlq29zmq8] {
        padding: 18px;
    }

    .admission-footer-card[b-4vlq29zmq8] {
        position: static;
        align-items: stretch;
        flex-direction: column;
    }

    .admission-footer-actions[b-4vlq29zmq8] {
        flex-direction: column-reverse;
    }

    .review-list div[b-4vlq29zmq8] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .review-list dd[b-4vlq29zmq8] {
        text-align: left;
    }

    .ai-admission-status[b-4vlq29zmq8] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 540px) {
    .admission-hero-title[b-4vlq29zmq8],
    .admission-section-header[b-4vlq29zmq8],
    .review-header[b-4vlq29zmq8] {
        align-items: flex-start;
        flex-direction: column;
    }

    .admission-combo[b-4vlq29zmq8] {
        grid-template-columns: 1fr;
    }

    .admission-icon-button[b-4vlq29zmq8] {
        width: 100%;
    }

    .guardian-preview[b-4vlq29zmq8] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .guardian-pill[b-4vlq29zmq8] {
        grid-column: 1 / -1;
        justify-self: start;
    }
}
/* /Components/Pages/StudentDetailsPage.razor.rz.scp.css */
@keyframes detailsRise-b-gwv8ira4ao {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.student-details-page[b-gwv8ira4ao] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 92px;
    color: var(--text-body);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.student-details-page.mybody[b-gwv8ira4ao] {
    display: block;
    grid-template-rows: unset;
}

.student-details-page[b-gwv8ira4ao]::before,
.student-details-page[b-gwv8ira4ao]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.student-details-page[b-gwv8ira4ao]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.student-details-page[b-gwv8ira4ao]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.student-details-shell[b-gwv8ira4ao] {
    display: grid;
    gap: 18px;
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: detailsRise-b-gwv8ira4ao .32s ease-out both;
}

.details-hero[b-gwv8ira4ao],
.details-context-bar[b-gwv8ira4ao],
.student-profile-hero[b-gwv8ira4ao],
.details-tabs[b-gwv8ira4ao],
.details-kpi-card[b-gwv8ira4ao],
.details-table-card[b-gwv8ira4ao],
.details-empty-card[b-gwv8ira4ao],
.details-empty-state[b-gwv8ira4ao],
.service-card[b-gwv8ira4ao],
.student-details-page .glass-card[b-gwv8ira4ao] {
    border: 1px solid var(--border-glass) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.details-hero[b-gwv8ira4ao] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: var(--radius-xl);
}

.details-hero[b-gwv8ira4ao]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 290px;
    height: 290px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(139, 92, 246, .13), transparent 68%);
    pointer-events: none;
}

.details-hero-title[b-gwv8ira4ao] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.details-hero-icon[b-gwv8ira4ao],
.details-table-icon[b-gwv8ira4ao],
.details-kpi-icon[b-gwv8ira4ao],
.details-empty-state > span[b-gwv8ira4ao] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.details-hero-icon[b-gwv8ira4ao] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.details-hero h1[b-gwv8ira4ao] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.18;
}

.details-hero p[b-gwv8ira4ao] {
    margin: 8px 0 0;
    max-width: 880px;
    color: var(--text-muted);
    font-size: .95rem;
}

.details-hero-actions[b-gwv8ira4ao],
.details-tabs[b-gwv8ira4ao],
.student-profile-badges[b-gwv8ira4ao],
.student-profile-meta[b-gwv8ira4ao] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.details-primary-button[b-gwv8ira4ao],
.details-soft-button[b-gwv8ira4ao] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    font-size: .88rem;
    font-weight: 850;
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.details-primary-button[b-gwv8ira4ao] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    background: linear-gradient(135deg, var(--primary), var(--violet)) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .22);
}

.details-soft-button[b-gwv8ira4ao] {
    color: var(--text-main) !important;
    border: 1px solid var(--border-soft) !important;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: none !important;
}

.details-primary-button:hover[b-gwv8ira4ao],
.details-soft-button:hover[b-gwv8ira4ao],
.details-tab:hover[b-gwv8ira4ao] {
    transform: translateY(-1px);
}

.details-context-bar[b-gwv8ira4ao] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border-radius: var(--radius-lg);
}

.details-field[b-gwv8ira4ao] {
    display: grid;
    gap: 8px;
    min-width: min(100%, 320px);
    margin: 0;
}

.student-picker-field[b-gwv8ira4ao] {
    flex: 1 1 520px;
}

.year-picker-field[b-gwv8ira4ao] {
    flex: 0 1 320px;
}

.details-field > span[b-gwv8ira4ao] {
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.details-field small[b-gwv8ira4ao] {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 760;
}

.details-input[b-gwv8ira4ao] {
    min-height: 46px;
    color: var(--text-main) !important;
    font-size: .9rem !important;
    font-weight: 760 !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
}

.details-input:focus[b-gwv8ira4ao] {
    border-color: rgba(14, 165, 233, .5) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12) !important;
}

.details-content[b-gwv8ira4ao] {
    display: grid;
    gap: 18px;
}

.details-loading-state[b-gwv8ira4ao],
.details-empty-state[b-gwv8ira4ao] {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 300px;
    padding: 40px 20px;
    text-align: center;
    border-radius: var(--radius-lg);
}

.details-loading-state[b-gwv8ira4ao] {
    color: var(--text-muted);
    font-weight: 850;
}

.details-empty-state > span[b-gwv8ira4ao] {
    width: 70px;
    height: 70px;
    color: var(--primary-dark);
    font-size: 1.55rem;
    border-radius: 26px;
    background: rgba(224, 245, 255, .82);
}

.details-empty-state h2[b-gwv8ira4ao] {
    margin: 0;
    color: var(--text-main);
    font-size: 1.18rem;
    font-weight: 900;
}

.details-empty-state p[b-gwv8ira4ao] {
    max-width: 520px;
    margin: 0;
    color: var(--text-muted);
}

.student-profile-hero[b-gwv8ira4ao] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 24px;
    border-radius: var(--radius-xl);
}

.student-profile-main[b-gwv8ira4ao] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.student-profile-avatar[b-gwv8ira4ao] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 74px;
    height: 74px;
    color: white;
    font-size: 1.15rem;
    font-weight: 900;
    letter-spacing: .02em;
    border-radius: 26px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .3), transparent 32%),
        linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.student-profile-hero h2[b-gwv8ira4ao] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 900;
    letter-spacing: -.035em;
}

.student-profile-meta[b-gwv8ira4ao] {
    margin-top: 9px;
}

.student-profile-meta span[b-gwv8ira4ao],
.enrollment-pill[b-gwv8ira4ao],
.profile-chip[b-gwv8ira4ao],
.status-pill[b-gwv8ira4ao],
.service-badge[b-gwv8ira4ao] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    font-size: .76rem;
    font-weight: 900;
    border-radius: 999px;
}

.student-profile-meta span[b-gwv8ira4ao] {
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .13);
    background: rgba(224, 245, 255, .78);
}

.enrollment-pill[b-gwv8ira4ao] {
    color: var(--primary-dark);
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    background: rgba(224, 245, 255, .82);
}

.profile-chip.class[b-gwv8ira4ao],
.profile-chip.grade[b-gwv8ira4ao] {
    color: var(--primary-dark);
    background: rgba(224, 245, 255, .78);
}

.profile-chip.grade[b-gwv8ira4ao] {
    color: #6d28d9;
    background: rgba(245, 243, 255, .86);
}

.profile-chip.parent[b-gwv8ira4ao] {
    color: #047857;
    background: rgba(220, 252, 231, .78);
}

.profile-chip.finance[b-gwv8ira4ao] {
    color: #b45309;
    background: var(--warning-soft);
}

.status-pill[b-gwv8ira4ao] {
    justify-content: center;
}

.status-pill i[b-gwv8ira4ao] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.status-pill.active[b-gwv8ira4ao] {
    color: #047857;
    background: rgba(220, 252, 231, .84);
}

.status-pill.active i[b-gwv8ira4ao] {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}

.status-pill.graduated[b-gwv8ira4ao] {
    color: #6d28d9;
    background: rgba(245, 243, 255, .86);
}

.status-pill.graduated i[b-gwv8ira4ao] {
    background: var(--violet);
}

.status-pill.withdrawn[b-gwv8ira4ao] {
    color: #be123c;
    background: var(--danger-soft);
}

.status-pill.withdrawn i[b-gwv8ira4ao] {
    background: var(--danger);
}

.status-pill.inactive[b-gwv8ira4ao] {
    color: #64748b;
    background: rgba(241, 245, 249, .95);
}

.status-pill.inactive i[b-gwv8ira4ao] {
    background: #94a3b8;
}

.details-tabs[b-gwv8ira4ao] {
    position: sticky;
    top: 12px;
    z-index: 5;
    overflow-x: auto;
    padding: 10px;
    border-radius: var(--radius-lg);
}

.details-tab[b-gwv8ira4ao] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    color: var(--text-body);
    font-size: .84rem;
    font-weight: 850;
    white-space: nowrap;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .68);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
}

.details-tab.active[b-gwv8ira4ao] {
    color: white;
    border-color: rgba(255, 255, 255, .7);
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 12px 24px rgba(14, 165, 233, .18);
}

.student-details-page .row[b-gwv8ira4ao] {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

.student-details-page .glass-card[b-gwv8ira4ao] {
    overflow: hidden;
    border-radius: var(--radius-lg) !important;
}

.student-details-page .card-body h6[b-gwv8ira4ao],
.details-table-header h6[b-gwv8ira4ao] {
    margin: 0;
    color: var(--text-main) !important;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.student-details-page .border-bottom[b-gwv8ira4ao] {
    border-color: rgba(226, 232, 240, .72) !important;
}

.details-kpi-card[b-gwv8ira4ao] {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.details-kpi-body[b-gwv8ira4ao] {
    display: grid;
    gap: 8px;
    padding: 18px;
}

.details-kpi-label[b-gwv8ira4ao] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.details-kpi-icon[b-gwv8ira4ao] {
    width: 38px;
    height: 38px;
    border-radius: 15px;
    background: rgba(224, 245, 255, .84);
}

.details-kpi-card.success .details-kpi-icon[b-gwv8ira4ao] {
    background: rgba(220, 252, 231, .84);
}

.details-kpi-card.warning .details-kpi-icon[b-gwv8ira4ao] {
    background: var(--warning-soft);
}

.details-kpi-card.danger .details-kpi-icon[b-gwv8ira4ao] {
    background: var(--danger-soft);
}

.details-kpi-value[b-gwv8ira4ao] {
    color: var(--text-main);
    font-size: clamp(1.28rem, 2vw, 1.85rem);
    font-weight: 900;
    line-height: 1.1;
}

.details-table-card[b-gwv8ira4ao],
.details-empty-card[b-gwv8ira4ao] {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.details-table-body[b-gwv8ira4ao] {
    padding: 0;
}

.details-table-header[b-gwv8ira4ao] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(226, 232, 240, .72);
}

.details-table-icon[b-gwv8ira4ao] {
    width: 42px;
    height: 42px;
    color: var(--primary-dark);
    border-radius: 16px;
    background: rgba(224, 245, 255, .84);
}

.details-table-header small[b-gwv8ira4ao] {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 760;
}

.details-inner-empty[b-gwv8ira4ao] {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 180px;
    padding: 26px;
    color: var(--text-muted);
    font-weight: 820;
    text-align: center;
}

.details-inner-empty.large[b-gwv8ira4ao] {
    min-height: 260px;
}

.details-inner-empty i[b-gwv8ira4ao] {
    color: var(--primary-dark);
    font-size: 1.5rem;
}

.student-details-page .table[b-gwv8ira4ao] {
    color: var(--text-body);
}

.student-details-page .table thead th[b-gwv8ira4ao] {
    padding: 14px 16px !important;
    color: var(--text-muted) !important;
    font-size: .7rem !important;
    font-weight: 900 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 0 !important;
    background: rgba(248, 252, 255, .94) !important;
}

.student-details-page .table tbody td[b-gwv8ira4ao] {
    padding: 15px 16px !important;
    vertical-align: middle;
    border-color: rgba(226, 232, 240, .7) !important;
}

.student-details-page .table tbody tr:hover[b-gwv8ira4ao] {
    background: rgba(14, 165, 233, .04);
}

.student-details-page .badge[b-gwv8ira4ao] {
    border-radius: 999px !important;
    font-weight: 850 !important;
}

.student-details-page .btn-link[b-gwv8ira4ao] {
    color: var(--primary-dark) !important;
    text-decoration: none;
}

.student-details-page .btn-white[b-gwv8ira4ao] {
    color: var(--primary-dark) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .76) !important;
}

.service-card[b-gwv8ira4ao] {
    display: grid;
    gap: 10px;
    padding: 16px;
    border-radius: 20px;
}

.service-card.active[b-gwv8ira4ao] {
    border-color: rgba(16, 185, 129, .15) !important;
    background: linear-gradient(135deg, rgba(224, 245, 255, .72), rgba(220, 252, 231, .72)) !important;
}

.service-card.warning[b-gwv8ira4ao] {
    border-color: rgba(245, 158, 11, .18) !important;
    background: var(--warning-soft) !important;
}

.service-card.expired[b-gwv8ira4ao] {
    border-color: rgba(236, 72, 153, .16) !important;
    background: var(--pink-soft) !important;
}

.service-card.muted[b-gwv8ira4ao] {
    border-color: rgba(148, 163, 184, .16) !important;
    background: rgba(248, 250, 252, .78) !important;
}

.service-badge[b-gwv8ira4ao] {
    white-space: nowrap;
}

.service-badge.active[b-gwv8ira4ao] {
    color: #047857;
    background: var(--success-soft);
}

.service-badge.warning[b-gwv8ira4ao] {
    color: #b45309;
    background: var(--warning-soft);
}

.service-badge.expired[b-gwv8ira4ao] {
    color: #be123c;
    background: var(--danger-soft);
}

.service-badge.muted[b-gwv8ira4ao] {
    color: var(--text-muted);
    background: rgba(241, 245, 249, .9);
}

@media (max-width: 980px) {
    .details-hero[b-gwv8ira4ao],
    .student-profile-hero[b-gwv8ira4ao],
    .details-context-bar[b-gwv8ira4ao] {
        align-items: flex-start;
        flex-direction: column;
    }

    .details-hero-actions[b-gwv8ira4ao],
    .details-hero-actions .btn[b-gwv8ira4ao],
    .details-field[b-gwv8ira4ao] {
        width: 100%;
    }

    .student-profile-badges[b-gwv8ira4ao] {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .student-details-page[b-gwv8ira4ao] {
        padding: 14px 14px 90px;
    }

    .student-details-shell[b-gwv8ira4ao] {
        gap: 14px;
        padding: 14px;
        border-radius: 26px;
    }

    .details-hero[b-gwv8ira4ao],
    .student-profile-hero[b-gwv8ira4ao] {
        padding: 20px;
        border-radius: 24px;
    }

    .details-hero-title[b-gwv8ira4ao],
    .student-profile-main[b-gwv8ira4ao] {
        align-items: flex-start;
    }

    .details-hero-icon[b-gwv8ira4ao] {
        width: 52px;
        height: 52px;
        border-radius: 19px;
    }

    .student-profile-avatar[b-gwv8ira4ao] {
        width: 62px;
        height: 62px;
        border-radius: 22px;
    }

    .details-tabs[b-gwv8ira4ao] {
        position: static;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .student-details-page .table[b-gwv8ira4ao] {
        min-width: 760px;
    }
}

@media (max-width: 520px) {
    .details-hero-title[b-gwv8ira4ao],
    .student-profile-main[b-gwv8ira4ao] {
        flex-direction: column;
    }

    .details-hero-actions[b-gwv8ira4ao] {
        flex-direction: column;
    }

    .details-primary-button[b-gwv8ira4ao],
    .details-soft-button[b-gwv8ira4ao] {
        width: 100%;
    }
}
/* /Components/Pages/StudentDirectoryPage.razor.rz.scp.css */
@keyframes directoryRise-b-jplnnlryhd {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes directoryPulse-b-jplnnlryhd {
    0%, 100% {
        opacity: .46;
    }

    50% {
        opacity: 1;
    }
}

.student-directory-page[b-jplnnlryhd] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 92px;
    color: var(--text-body);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.student-directory-page.mybody[b-jplnnlryhd] {
    display: block;
    grid-template-rows: unset;
}

.student-directory-page[b-jplnnlryhd]::before,
.student-directory-page[b-jplnnlryhd]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.student-directory-page[b-jplnnlryhd]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.student-directory-page[b-jplnnlryhd]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.student-directory-shell[b-jplnnlryhd] {
    display: grid;
    gap: 18px;
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: directoryRise-b-jplnnlryhd .32s ease-out both;
}

.directory-hero[b-jplnnlryhd],
.directory-summary-card[b-jplnnlryhd],
.directory-toolbar-card[b-jplnnlryhd],
.directory-list-card[b-jplnnlryhd] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.directory-hero[b-jplnnlryhd] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: var(--radius-xl);
}

.directory-hero[b-jplnnlryhd]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 290px;
    height: 290px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(139, 92, 246, .13), transparent 68%);
    pointer-events: none;
}

.directory-hero-title[b-jplnnlryhd] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.directory-hero-icon[b-jplnnlryhd],
.summary-icon[b-jplnnlryhd],
.directory-card-icon[b-jplnnlryhd],
.directory-empty-state > span[b-jplnnlryhd] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.directory-hero-icon[b-jplnnlryhd] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.directory-hero h1[b-jplnnlryhd] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.18;
}

.directory-hero p[b-jplnnlryhd] {
    margin: 8px 0 0;
    max-width: 760px;
    color: var(--text-muted);
    font-size: .95rem;
}

.directory-hero-meta[b-jplnnlryhd] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.directory-hero-meta span[b-jplnnlryhd],
.directory-count-pill[b-jplnnlryhd] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    color: var(--primary-dark);
    font-size: .76rem;
    font-weight: 850;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 999px;
    background: rgba(224, 245, 255, .78);
}

.directory-primary-button[b-jplnnlryhd],
.directory-soft-button[b-jplnnlryhd] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    font-size: .88rem;
    font-weight: 850;
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.directory-primary-button[b-jplnnlryhd] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
    background: linear-gradient(135deg, var(--primary), var(--violet)) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .22);
}

.directory-soft-button[b-jplnnlryhd] {
    color: var(--text-main) !important;
    border: 1px solid var(--border-soft) !important;
    background: rgba(255, 255, 255, .72) !important;
    box-shadow: none !important;
}

.directory-primary-button:hover[b-jplnnlryhd],
.directory-soft-button:hover[b-jplnnlryhd],
.directory-action-button:hover[b-jplnnlryhd],
.directory-page-button:hover[b-jplnnlryhd] {
    transform: translateY(-1px);
}

.directory-summary-grid[b-jplnnlryhd] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.directory-summary-card[b-jplnnlryhd] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    min-height: 124px;
    padding: 17px;
    border-radius: var(--radius-lg);
}

.summary-icon[b-jplnnlryhd] {
    grid-row: span 3;
    width: 42px;
    height: 42px;
    color: var(--primary-dark);
    border-radius: 16px;
    background: rgba(14, 165, 233, .1);
}

.directory-summary-card.active .summary-icon[b-jplnnlryhd],
.directory-summary-card.parents .summary-icon[b-jplnnlryhd] {
    color: #047857;
    background: rgba(16, 185, 129, .12);
}

.directory-summary-card.year .summary-icon[b-jplnnlryhd],
.directory-summary-card.classes .summary-icon[b-jplnnlryhd] {
    color: #6d28d9;
    background: rgba(139, 92, 246, .12);
}

.directory-summary-card.services .summary-icon[b-jplnnlryhd] {
    color: #b45309;
    background: rgba(245, 158, 11, .12);
}

.summary-label[b-jplnnlryhd] {
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.directory-summary-card strong[b-jplnnlryhd] {
    display: block;
    overflow: hidden;
    color: var(--text-main);
    font-size: clamp(1.02rem, 1.4vw, 1.5rem);
    font-weight: 900;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.directory-summary-card small[b-jplnnlryhd] {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 760;
}

.directory-summary-card.skeleton[b-jplnnlryhd] {
    grid-template-columns: 1fr;
}

.directory-summary-card.skeleton span[b-jplnnlryhd],
.directory-summary-card.skeleton strong[b-jplnnlryhd],
.directory-summary-card.skeleton small[b-jplnnlryhd] {
    display: block;
    height: 16px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(226, 232, 240, .9), rgba(248, 250, 252, .95), rgba(226, 232, 240, .9));
    animation: directoryPulse-b-jplnnlryhd 1.2s ease-in-out infinite;
}

.directory-summary-card.skeleton span[b-jplnnlryhd] {
    width: 42px;
    height: 42px;
    border-radius: 16px;
}

.directory-summary-card.skeleton strong[b-jplnnlryhd] {
    width: 62%;
    height: 24px;
}

.directory-summary-card.skeleton small[b-jplnnlryhd] {
    width: 78%;
}

.directory-toolbar-card[b-jplnnlryhd] {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) minmax(170px, .75fr) minmax(170px, .75fr) minmax(140px, .58fr) auto auto;
    gap: 14px;
    align-items: end;
    padding: 18px;
    border-radius: var(--radius-lg);
}

.directory-field[b-jplnnlryhd] {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
}

.directory-field > span[b-jplnnlryhd] {
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.directory-search-wrap[b-jplnnlryhd] {
    position: relative;
}

.directory-search-wrap > i[b-jplnnlryhd] {
    position: absolute;
    top: 50%;
    left: 16px;
    color: var(--text-muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.directory-input[b-jplnnlryhd],
.directory-page-size[b-jplnnlryhd] {
    min-height: 46px;
    color: var(--text-main) !important;
    font-size: .9rem !important;
    font-weight: 760 !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.directory-search-wrap .directory-input[b-jplnnlryhd] {
    padding-left: 44px;
}

.directory-input:focus[b-jplnnlryhd],
.directory-page-size:focus[b-jplnnlryhd] {
    border-color: rgba(14, 165, 233, .5) !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12) !important;
}

.directory-toolbar-count[b-jplnnlryhd] {
    display: grid;
    min-width: 150px;
    padding: 9px 14px;
    border: 1px solid rgba(14, 165, 233, .12);
    border-radius: 18px;
    background: rgba(224, 245, 255, .52);
}

.directory-toolbar-count strong[b-jplnnlryhd] {
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 900;
}

.directory-toolbar-count span[b-jplnnlryhd] {
    color: var(--text-muted);
    font-size: .73rem;
    font-weight: 780;
}

.directory-list-card[b-jplnnlryhd] {
    overflow: hidden;
    border-radius: 28px;
}

.directory-card-header[b-jplnnlryhd],
.directory-card-footer[b-jplnnlryhd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(226, 232, 240, .72);
}

.directory-card-footer[b-jplnnlryhd] {
    border-top: 1px solid rgba(226, 232, 240, .72);
    border-bottom: 0;
    background: rgba(248, 252, 255, .62);
}

.directory-card-footer > span[b-jplnnlryhd] {
    color: var(--text-muted);
    font-size: .82rem;
    font-weight: 820;
}

.directory-card-title[b-jplnnlryhd],
.directory-card-tools[b-jplnnlryhd],
.directory-pagination[b-jplnnlryhd] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.directory-card-title[b-jplnnlryhd] {
    gap: 13px;
}

.directory-card-icon[b-jplnnlryhd] {
    width: 46px;
    height: 46px;
    color: var(--primary-dark);
    border-radius: 17px;
    background: rgba(224, 245, 255, .84);
}

.directory-card-header h2[b-jplnnlryhd] {
    margin: 0;
    color: var(--text-main);
    font-size: 1.16rem;
    font-weight: 900;
    letter-spacing: -.02em;
}

.directory-card-header p[b-jplnnlryhd] {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: .84rem;
}

.directory-page-size[b-jplnnlryhd] {
    width: 118px;
    min-height: 38px;
    padding-block: 4px;
}

.directory-pagination[b-jplnnlryhd] {
    min-height: 38px;
    padding: 4px;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
}

.directory-pagination span[b-jplnnlryhd] {
    padding: 0 6px;
    color: var(--text-main);
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
}

.directory-page-button[b-jplnnlryhd] {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .16);
    border-radius: 999px;
    background: rgba(224, 245, 255, .72);
    transition: transform .18s ease, opacity .18s ease, background .18s ease;
}

.directory-page-button:disabled[b-jplnnlryhd] {
    cursor: not-allowed;
    opacity: .45;
    transform: none;
}

.directory-table-wrap[b-jplnnlryhd] {
    width: 100%;
    overflow-x: auto;
}

.directory-table[b-jplnnlryhd] {
    min-width: 1180px;
    color: var(--text-body);
}

.directory-table thead th[b-jplnnlryhd] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 14px 16px;
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    border: 0;
    background: rgba(248, 252, 255, .94);
}

.directory-table tbody td[b-jplnnlryhd] {
    padding: 16px;
    vertical-align: middle;
    border-color: rgba(226, 232, 240, .7);
}

.directory-table tbody tr[b-jplnnlryhd] {
    transition: background .18s ease;
}

.directory-table tbody tr:hover[b-jplnnlryhd] {
    background: rgba(14, 165, 233, .04);
}

.student-sticky-cell[b-jplnnlryhd] {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 290px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 12px 0 18px -20px rgba(15, 23, 42, .4);
}

.student-identity-cell[b-jplnnlryhd] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.student-avatar[b-jplnnlryhd] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    color: white;
    font-size: .84rem;
    font-weight: 900;
    letter-spacing: .02em;
    border-radius: 18px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .28), transparent 32%),
        linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 14px 24px rgba(14, 165, 233, .18);
}

.student-identity-cell strong[b-jplnnlryhd] {
    display: block;
    color: var(--text-main);
    font-size: .96rem;
    font-weight: 900;
    line-height: 1.2;
}

.student-identity-cell small[b-jplnnlryhd] {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 760;
}

.enrollment-pill[b-jplnnlryhd] {
    display: inline-flex;
    width: fit-content;
    margin-top: 6px;
    padding: 4px 9px;
    color: var(--primary-dark);
    font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
    font-size: .73rem;
    font-weight: 900;
    border-radius: 999px;
    background: rgba(224, 245, 255, .82);
}

.class-cell[b-jplnnlryhd],
.parents-cell[b-jplnnlryhd] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-start;
}

.class-cell small[b-jplnnlryhd] {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 780;
}

.class-pill[b-jplnnlryhd],
.guardian-chip[b-jplnnlryhd],
.house-pill[b-jplnnlryhd],
.placeholder-pill[b-jplnnlryhd],
.service-chip[b-jplnnlryhd],
.medical-pill[b-jplnnlryhd],
.status-pill[b-jplnnlryhd] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    min-height: 28px;
    padding: 5px 10px;
    font-size: .75rem;
    font-weight: 900;
    border-radius: 999px;
    white-space: nowrap;
}

.class-pill[b-jplnnlryhd] {
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .13);
    background: rgba(224, 245, 255, .78);
}

.class-pill.missing[b-jplnnlryhd],
.guardian-chip.warning[b-jplnnlryhd] {
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, .18);
    background: var(--warning-soft);
}

.guardian-chip[b-jplnnlryhd] {
    color: #047857;
    border: 1px solid rgba(16, 185, 129, .14);
    background: rgba(220, 252, 231, .78);
}

.house-pill[b-jplnnlryhd] {
    color: #6d28d9;
    border: 1px solid rgba(139, 92, 246, .14);
    background: rgba(245, 243, 255, .82);
}

.placeholder-pill[b-jplnnlryhd],
.service-chip.muted[b-jplnnlryhd] {
    color: var(--text-muted);
    border: 1px solid rgba(148, 163, 184, .16);
    background: rgba(241, 245, 249, .82);
}

.service-chip.active[b-jplnnlryhd] {
    color: #047857;
    border: 1px solid rgba(16, 185, 129, .14);
    background: rgba(220, 252, 231, .78);
}

.service-chip.warning[b-jplnnlryhd] {
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, .18);
    background: var(--warning-soft);
}

.service-chip.expired[b-jplnnlryhd],
.medical-pill[b-jplnnlryhd] {
    color: #be123c;
    border: 1px solid rgba(236, 72, 153, .16);
    background: var(--pink-soft);
}

.status-pill[b-jplnnlryhd] {
    justify-content: center;
    min-width: 96px;
}

.status-pill i[b-jplnnlryhd] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.status-pill.active[b-jplnnlryhd] {
    color: #047857;
    background: rgba(220, 252, 231, .84);
}

.status-pill.active i[b-jplnnlryhd] {
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}

.status-pill.graduated[b-jplnnlryhd] {
    color: #6d28d9;
    background: rgba(245, 243, 255, .86);
}

.status-pill.graduated i[b-jplnnlryhd] {
    background: var(--violet);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .12);
}

.status-pill.withdrawn[b-jplnnlryhd] {
    color: #be123c;
    background: var(--danger-soft);
}

.status-pill.withdrawn i[b-jplnnlryhd] {
    background: var(--danger);
    box-shadow: 0 0 0 4px rgba(239, 71, 111, .12);
}

.status-pill.inactive[b-jplnnlryhd] {
    color: #64748b;
    background: rgba(241, 245, 249, .95);
}

.status-pill.inactive i[b-jplnnlryhd] {
    background: #94a3b8;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, .13);
}

.directory-actions[b-jplnnlryhd] {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

.directory-action-button[b-jplnnlryhd] {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.directory-action-button.view[b-jplnnlryhd],
.directory-action-button.edit[b-jplnnlryhd] {
    color: var(--primary-dark);
    background: rgba(224, 245, 255, .66);
}

.directory-action-button.records[b-jplnnlryhd] {
    color: #6d28d9;
    background: rgba(245, 243, 255, .76);
}

.directory-action-button.finance[b-jplnnlryhd] {
    color: #b45309;
    background: var(--warning-soft);
}

.directory-action-button.transfer[b-jplnnlryhd] {
    color: #0891b2;
    background: rgba(207, 250, 254, .64);
}

.directory-action-button.success[b-jplnnlryhd] {
    color: #047857;
    background: rgba(220, 252, 231, .72);
}

.directory-action-button.danger[b-jplnnlryhd] {
    color: #be123c;
    background: var(--danger-soft);
}

.directory-loading-state[b-jplnnlryhd],
.directory-empty-state[b-jplnnlryhd] {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 280px;
    padding: 40px 20px;
    text-align: center;
}

.directory-loading-state[b-jplnnlryhd] {
    color: var(--text-muted);
    font-weight: 850;
}

.directory-empty-state > span[b-jplnnlryhd] {
    width: 66px;
    height: 66px;
    color: var(--primary-dark);
    font-size: 1.45rem;
    border-radius: 24px;
    background: rgba(224, 245, 255, .82);
}

.directory-empty-state h3[b-jplnnlryhd] {
    margin: 0;
    color: var(--text-main);
    font-size: 1.08rem;
    font-weight: 900;
}

.directory-empty-state p[b-jplnnlryhd] {
    max-width: 480px;
    margin: 0;
    color: var(--text-muted);
    font-size: .9rem;
}

.directory-empty-actions[b-jplnnlryhd] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

@media (max-width: 1360px) {
    .directory-summary-grid[b-jplnnlryhd] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .directory-toolbar-card[b-jplnnlryhd] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .directory-summary-grid[b-jplnnlryhd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .directory-toolbar-card[b-jplnnlryhd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .directory-card-header[b-jplnnlryhd] {
        align-items: flex-start;
        flex-direction: column;
    }

    .directory-card-tools[b-jplnnlryhd] {
        flex-wrap: wrap;
        width: 100%;
    }
}

@media (max-width: 760px) {
    .student-directory-page[b-jplnnlryhd] {
        padding: 14px 14px 90px;
    }

    .student-directory-shell[b-jplnnlryhd] {
        gap: 14px;
        padding: 14px;
        border-radius: 26px;
    }

    .directory-hero[b-jplnnlryhd] {
        align-items: flex-start;
        flex-direction: column;
        padding: 20px;
        border-radius: 24px;
    }

    .directory-hero-title[b-jplnnlryhd] {
        align-items: flex-start;
    }

    .directory-hero-icon[b-jplnnlryhd] {
        width: 52px;
        height: 52px;
        border-radius: 19px;
    }

    .directory-hero .btn[b-jplnnlryhd],
    .directory-empty-actions[b-jplnnlryhd],
    .directory-empty-actions .btn[b-jplnnlryhd] {
        width: 100%;
    }

    .directory-summary-grid[b-jplnnlryhd],
    .directory-toolbar-card[b-jplnnlryhd] {
        grid-template-columns: 1fr;
    }

    .directory-toolbar-count[b-jplnnlryhd],
    .directory-toolbar-card .btn[b-jplnnlryhd],
    .directory-page-size[b-jplnnlryhd] {
        width: 100%;
    }

    .directory-card-title[b-jplnnlryhd] {
        align-items: flex-start;
    }

    .directory-card-tools[b-jplnnlryhd],
    .directory-card-footer[b-jplnnlryhd] {
        align-items: stretch;
        flex-direction: column;
    }

    .directory-pagination[b-jplnnlryhd] {
        justify-content: space-between;
        width: 100%;
    }

    .directory-table[b-jplnnlryhd] {
        min-width: 0;
    }

    .directory-table thead[b-jplnnlryhd] {
        display: none;
    }

    .directory-table[b-jplnnlryhd],
    .directory-table tbody[b-jplnnlryhd],
    .directory-table tr[b-jplnnlryhd],
    .directory-table td[b-jplnnlryhd] {
        display: block;
        width: 100%;
    }

    .directory-table tbody[b-jplnnlryhd] {
        display: grid;
        gap: 12px;
        padding: 14px;
    }

    .directory-table tbody tr[b-jplnnlryhd] {
        overflow: hidden;
        border: 1px solid rgba(226, 232, 240, .82);
        border-radius: 22px;
        background: rgba(255, 255, 255, .86);
    }

    .directory-table tbody td[b-jplnnlryhd] {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        padding: 13px 14px;
        text-align: left !important;
    }

    .directory-table tbody td[b-jplnnlryhd]::before {
        content: attr(data-label);
        color: var(--text-muted);
        font-size: .72rem;
        font-weight: 900;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .student-sticky-cell[b-jplnnlryhd] {
        position: static;
        min-width: 0;
        box-shadow: none;
    }

    .directory-actions[b-jplnnlryhd] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 520px) {
    .directory-hero-title[b-jplnnlryhd],
    .directory-card-title[b-jplnnlryhd] {
        flex-direction: column;
    }

    .directory-summary-card[b-jplnnlryhd] {
        grid-template-columns: 1fr;
    }

    .summary-icon[b-jplnnlryhd] {
        grid-row: auto;
    }

    .directory-table tbody td[b-jplnnlryhd] {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .student-identity-cell[b-jplnnlryhd] {
        align-items: flex-start;
    }
}
/* /Components/Pages/StudentDocumentsPage.razor.rz.scp.css */
@keyframes documentRise-b-2qer5xgmw4 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes documentShimmer-b-2qer5xgmw4 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.document-workspace[b-2qer5xgmw4] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --gold: #f6b73c;
    --gold-soft: #fff6d8;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    --shadow-paper: 0 24px 70px rgba(16, 32, 51, .10);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 92px;
    color: var(--text-body);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.document-workspace.mybody[b-2qer5xgmw4] {
    display: block;
    grid-template-rows: unset;
}

.document-workspace[b-2qer5xgmw4]::before,
.document-workspace[b-2qer5xgmw4]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.document-workspace[b-2qer5xgmw4]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.document-workspace[b-2qer5xgmw4]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.document-workspace-header[b-2qer5xgmw4],
.document-scroll-area[b-2qer5xgmw4] {
    width: min(100%, 1600px);
    margin-inline: auto;
}

.document-workspace-header[b-2qer5xgmw4] {
    display: grid;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px 32px 26px 26px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: documentRise-b-2qer5xgmw4 .32s ease-out both;
}

.document-scroll-area[b-2qer5xgmw4] {
    min-width: 0;
    margin-top: 18px;
}

.document-title-row[b-2qer5xgmw4],
.document-panel[b-2qer5xgmw4],
.document-template-drawer[b-2qer5xgmw4],
.document-cancel-dialog[b-2qer5xgmw4],
.document-workflow-steps[b-2qer5xgmw4] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.document-title-row[b-2qer5xgmw4] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: var(--radius-xl);
}

.document-title-row[b-2qer5xgmw4]::before {
    content: "";
    position: absolute;
    inset: 20px auto 20px 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--success), var(--primary));
}

.document-title-row[b-2qer5xgmw4]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 290px;
    height: 290px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(16, 185, 129, .12), transparent 68%);
    pointer-events: none;
}

.document-title-copy[b-2qer5xgmw4] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.document-hero-icon[b-2qer5xgmw4],
.document-panel-title i[b-2qer5xgmw4],
.document-empty-state i[b-2qer5xgmw4],
.document-kind-icon[b-2qer5xgmw4],
.dialog-icon[b-2qer5xgmw4],
.document-icon-button[b-2qer5xgmw4] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.document-hero-icon[b-2qer5xgmw4] {
    width: 62px;
    height: 62px;
    color: white;
    font-size: 1.38rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--success));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.document-title-row h1[b-2qer5xgmw4] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.75rem, 2.8vw, 2.15rem);
    font-weight: 850;
    letter-spacing: -.03em;
}

.document-title-row p[b-2qer5xgmw4],
.create-draft-header p[b-2qer5xgmw4],
.editor-panel-header p[b-2qer5xgmw4],
.drawer-header p[b-2qer5xgmw4],
.document-panel-helper[b-2qer5xgmw4] {
    margin: 0;
    color: var(--text-body);
    font-size: .92rem;
}

.document-action-bar[b-2qer5xgmw4] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}

.document-workflow-steps[b-2qer5xgmw4] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-lg);
}

.workflow-step[b-2qer5xgmw4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 12px;
    color: var(--text-muted);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    font-size: .82rem;
    font-weight: 850;
}

.workflow-step.active[b-2qer5xgmw4],
.workflow-step.completed[b-2qer5xgmw4] {
    color: white;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), var(--success));
    box-shadow: 0 12px 22px rgba(14, 165, 233, .13);
}

.workflow-step.completed:not(.active)[b-2qer5xgmw4] {
    color: #047857;
    border-color: rgba(16, 185, 129, .2);
    background: var(--success-soft);
    box-shadow: none;
}

.document-workspace-grid[b-2qer5xgmw4] {
    display: grid;
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
    gap: 22px;
    min-width: 0;
    align-items: start;
}

.document-sidebar[b-2qer5xgmw4],
.document-main[b-2qer5xgmw4] {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
}

.document-sidebar[b-2qer5xgmw4] {
    position: sticky;
    top: 18px;
}

.document-panel[b-2qer5xgmw4] {
    min-width: 0;
    border-radius: var(--radius-xl);
}

.selected-student-panel[b-2qer5xgmw4],
.create-draft-panel[b-2qer5xgmw4],
.editor-panel[b-2qer5xgmw4] {
    padding: 22px;
}

.document-panel-title[b-2qer5xgmw4] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 850;
    letter-spacing: -.01em;
}

.document-panel-title i[b-2qer5xgmw4] {
    width: 38px;
    height: 38px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-radius: 14px;
}

.document-list-title[b-2qer5xgmw4] {
    justify-content: space-between;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--border-soft);
}

.document-list-title > span:first-child[b-2qer5xgmw4] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.document-count[b-2qer5xgmw4] {
    display: inline-grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    color: var(--primary-dark);
    font-size: .8rem;
    font-weight: 900;
    background: var(--primary-soft);
    border-radius: 999px;
}

.document-student-select[b-2qer5xgmw4],
.document-list-tools[b-2qer5xgmw4] {
    display: grid;
    gap: 10px;
}

.document-student-select[b-2qer5xgmw4] {
    margin-top: 16px;
}

.document-field-label[b-2qer5xgmw4] {
    display: block;
    margin-bottom: 7px;
    color: var(--text-main);
    font-size: .83rem;
    font-weight: 800;
}

.document-input[b-2qer5xgmw4] {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    outline: none;
    background: rgba(255, 255, 255, .78);
    color: var(--text-main);
    font-size: .92rem;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.document-input[b-2qer5xgmw4]::placeholder {
    color: var(--text-muted);
    font-weight: 650;
}

.document-input:focus[b-2qer5xgmw4],
.document-input:focus-visible[b-2qer5xgmw4],
.document-search-field:focus-within[b-2qer5xgmw4] {
    border-color: rgba(14, 165, 233, .72);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
}

.document-input:disabled[b-2qer5xgmw4] {
    color: var(--text-body);
    cursor: not-allowed;
    background: rgba(248, 252, 255, .78);
}

.document-select[b-2qer5xgmw4] {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 19px) 20px,
        calc(100% - 13px) 20px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.document-textarea[b-2qer5xgmw4] {
    min-height: 110px;
    resize: vertical;
}

.document-textarea.compact[b-2qer5xgmw4] {
    min-height: 72px;
}

.student-summary[b-2qer5xgmw4] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: rgba(248, 252, 255, .7);
}

.student-avatar[b-2qer5xgmw4] {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: white;
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary), var(--success));
    border-radius: 20px;
    box-shadow: 0 14px 28px rgba(14, 165, 233, .16);
}

.student-summary h5[b-2qer5xgmw4] {
    margin: 0;
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 850;
}

.student-summary p[b-2qer5xgmw4] {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: .82rem;
    font-weight: 800;
}

.student-summary-grid[b-2qer5xgmw4],
.document-meta-strip[b-2qer5xgmw4] {
    display: grid;
    gap: 10px;
}

.student-summary-grid[b-2qer5xgmw4] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
}

.student-summary-grid > div[b-2qer5xgmw4],
.document-meta-strip > div[b-2qer5xgmw4] {
    position: relative;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: var(--surface-soft);
}

.student-summary-grid span[b-2qer5xgmw4],
.document-meta-strip span[b-2qer5xgmw4] {
    display: block;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.student-summary-grid strong[b-2qer5xgmw4],
.document-meta-strip strong[b-2qer5xgmw4] {
    display: block;
    margin-top: 3px;
    color: var(--text-main);
    font-size: .88rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.student-status-pill[b-2qer5xgmw4] {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .78rem !important;
}

.student-status-pill[b-2qer5xgmw4]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.student-status-pill.active[b-2qer5xgmw4] {
    color: #047857 !important;
    background: var(--success-soft);
}

.student-status-pill.inactive[b-2qer5xgmw4],
.student-status-pill.withdrawn[b-2qer5xgmw4] {
    color: #be123c !important;
    background: var(--danger-soft);
}

.student-status-pill.graduated[b-2qer5xgmw4] {
    color: #5b21b6 !important;
    background: rgba(237, 233, 254, .82);
}

.student-status-pill.muted[b-2qer5xgmw4] {
    color: var(--text-muted) !important;
    background: rgba(248, 252, 255, .82);
}

.document-panel-helper[b-2qer5xgmw4] {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(224, 245, 255, .52);
    font-size: .82rem;
    font-weight: 700;
}

.document-list-tools[b-2qer5xgmw4] {
    padding: 14px;
}

.document-search-field[b-2qer5xgmw4] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
    color: var(--text-muted);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.document-search-field input[b-2qer5xgmw4] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 700;
}

.document-search-field input[b-2qer5xgmw4]::placeholder {
    color: var(--text-muted);
}

.document-status-tabs[b-2qer5xgmw4] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.document-status-tabs button[b-2qer5xgmw4] {
    min-height: 38px;
    color: var(--text-body);
    font-size: .78rem;
    font-weight: 850;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.document-status-tabs button.active[b-2qer5xgmw4] {
    color: white;
    border-color: transparent;
    background: linear-gradient(135deg, var(--primary), var(--success));
    box-shadow: 0 12px 22px rgba(14, 165, 233, .14);
}

.document-card-list[b-2qer5xgmw4] {
    display: grid;
    gap: 10px;
    padding: 0 14px 16px;
}

.document-list-card[b-2qer5xgmw4] {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 14px;
    color: var(--text-main);
    text-align: left;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
    transition: transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.document-list-card[b-2qer5xgmw4]::before {
    content: "";
    position: absolute;
    inset: 14px auto 14px 0;
    width: 3px;
    border-radius: 999px;
    background: transparent;
}

.document-list-card.active[b-2qer5xgmw4] {
    background: rgba(255, 255, 255, .96);
    border-color: rgba(14, 165, 233, .34);
    box-shadow: 0 14px 30px rgba(14, 165, 233, .1);
}

.document-list-card.active[b-2qer5xgmw4]::before {
    background: linear-gradient(180deg, var(--primary), var(--success));
}

.document-list-card-top[b-2qer5xgmw4] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
}

.document-kind-icon[b-2qer5xgmw4] {
    width: 34px;
    height: 34px;
    color: var(--primary-dark);
    border-radius: 13px;
    background: var(--primary-soft);
}

.document-list-card-top strong[b-2qer5xgmw4] {
    min-width: 0;
    color: var(--text-main);
    font-weight: 850;
    overflow-wrap: anywhere;
}

.document-list-card-meta[b-2qer5xgmw4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    color: var(--text-body);
    font-size: .8rem;
    font-weight: 700;
}

.document-list-card-meta.muted[b-2qer5xgmw4] {
    color: var(--text-muted);
    font-size: .74rem;
}

.document-status-badge[b-2qer5xgmw4] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    font-size: .76rem;
    font-weight: 850;
    line-height: 1.2;
    white-space: nowrap;
}

.document-status-badge[b-2qer5xgmw4]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.document-status-badge.draft[b-2qer5xgmw4] {
    color: #7e22ce;
    border-color: rgba(139, 92, 246, .18);
    background: rgba(237, 233, 254, .82);
}

.document-status-badge.issued[b-2qer5xgmw4] {
    color: #047857;
    border-color: rgba(16, 185, 129, .2);
    background: var(--success-soft);
}

.document-status-badge.cancelled[b-2qer5xgmw4] {
    color: #be123c;
    border-color: rgba(239, 71, 111, .2);
    background: var(--danger-soft);
}

.document-empty-state[b-2qer5xgmw4],
.document-loading-state[b-2qer5xgmw4] {
    display: grid;
    place-items: center;
    gap: 9px;
    min-height: 186px;
    padding: 24px;
    color: var(--text-muted);
    text-align: center;
}

.document-empty-state.compact[b-2qer5xgmw4] {
    min-height: 118px;
}

.document-empty-state i[b-2qer5xgmw4] {
    width: 58px;
    height: 58px;
    color: var(--primary-dark);
    font-size: 1.45rem;
    border-radius: 21px;
    background: var(--primary-soft);
}

.document-empty-state strong[b-2qer5xgmw4] {
    color: var(--text-main);
    font-weight: 850;
}

.document-empty-state span[b-2qer5xgmw4] {
    font-size: .86rem;
}

.document-loading-state[b-2qer5xgmw4] {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    color: var(--primary-dark);
    font-weight: 850;
}

.document-loading-state[b-2qer5xgmw4]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .46), transparent);
    animation: documentShimmer-b-2qer5xgmw4 1.5s infinite;
}

.create-draft-header[b-2qer5xgmw4],
.editor-panel-header[b-2qer5xgmw4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.create-draft-grid[b-2qer5xgmw4] {
    display: grid;
    grid-template-columns: minmax(130px, .72fr) minmax(250px, 1.55fr) minmax(180px, .9fr);
    gap: 14px;
    margin-top: 18px;
}

.create-draft-field[b-2qer5xgmw4] {
    min-width: 0;
}

.draft-options-block[b-2qer5xgmw4] {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 20px;
    background: rgba(248, 252, 255, .64);
}

.draft-options-toggle[b-2qer5xgmw4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0;
    color: var(--text-main);
    font-weight: 850;
    text-align: left;
    background: transparent;
    border: 0;
}

.draft-options-toggle > span[b-2qer5xgmw4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.draft-options-toggle small[b-2qer5xgmw4] {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 700;
}

.draft-options-body[b-2qer5xgmw4] {
    margin-top: 14px;
}

.placeholder-chip-row[b-2qer5xgmw4] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.placeholder-chip-row span[b-2qer5xgmw4] {
    padding: 6px 10px;
    color: var(--primary-dark);
    font-family: Consolas, "Courier New", monospace;
    font-size: .75rem;
    font-weight: 800;
    background: var(--primary-soft);
    border-radius: 999px;
}

.editor-panel[b-2qer5xgmw4] {
    overflow: hidden;
}

.editor-panel-header[b-2qer5xgmw4] {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: -22px -22px 16px;
    padding: 22px;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.editor-header-actions[b-2qer5xgmw4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.document-readonly-banner[b-2qer5xgmw4] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 11px 13px;
    color: #875108;
    background: var(--warning-soft);
    border: 1px solid rgba(245, 158, 11, .24);
    border-radius: 16px;
    font-weight: 750;
}

.editor-empty[b-2qer5xgmw4] {
    min-height: 420px;
    border: 1px dashed rgba(120, 170, 210, .36);
    border-radius: 24px;
    background: rgba(248, 252, 255, .72);
}

.document-meta-strip[b-2qer5xgmw4] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
}

.document-meta-strip > div[b-2qer5xgmw4] {
    padding: 14px 14px 14px 44px;
}

.document-meta-strip i[b-2qer5xgmw4] {
    position: absolute;
    left: 14px;
    top: 16px;
    color: var(--primary-dark);
    opacity: .7;
}

.document-title-input[b-2qer5xgmw4] {
    min-height: 50px;
    margin-bottom: 16px;
    font-size: 1rem;
    font-weight: 850;
}

.document-editor-frame[b-2qer5xgmw4] {
    padding: clamp(16px, 2.4vw, 28px);
    border: 1px solid var(--border-soft);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(248, 252, 255, .9), rgba(232, 243, 255, .56)),
        rgba(248, 252, 255, .82);
}

.document-editor-frame[b-2qer5xgmw4] (.rich-text-editor-shell) {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.document-editor-frame[b-2qer5xgmw4] (.rich-text-toolbar) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 8px 20px rgba(23, 55, 90, .05);
}

.document-editor-frame[b-2qer5xgmw4] (.ql-toolbar.ql-snow) {
    border: 1px solid var(--border-soft);
}

.document-editor-frame[b-2qer5xgmw4] (.ql-toolbar.ql-snow .ql-formats) {
    margin-right: 8px;
}

.document-editor-frame[b-2qer5xgmw4] (.ql-toolbar.ql-snow button),
.document-editor-frame[b-2qer5xgmw4] (.ql-toolbar.ql-snow .ql-picker-label) {
    border-radius: 10px;
}

.document-editor-frame[b-2qer5xgmw4] (.ql-toolbar.ql-snow button:hover),
.document-editor-frame[b-2qer5xgmw4] (.ql-toolbar.ql-snow .ql-picker-label:hover),
.document-editor-frame[b-2qer5xgmw4] (.ql-toolbar.ql-snow button.ql-active) {
    background: var(--primary-soft);
}

.document-editor-frame[b-2qer5xgmw4] (.rich-attach-bar) {
    gap: 8px;
    margin-bottom: 18px;
    padding: 9px 10px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: rgba(255, 255, 255, .76);
}

.document-editor-frame[b-2qer5xgmw4] (.rich-attach-button) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border-soft);
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .86);
    font-size: .78rem;
    font-weight: 850;
}

.document-editor-frame[b-2qer5xgmw4] (.rich-attach-note) {
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 750;
}

.document-editor-frame[b-2qer5xgmw4] (.rich-attach-error) {
    color: var(--danger);
    font-size: .78rem;
    font-weight: 850;
}

.document-editor-frame[b-2qer5xgmw4] (.ql-container.ql-snow) {
    border: 0;
    background: transparent;
    font-size: 15px;
}

.document-editor-frame[b-2qer5xgmw4] (.ql-editor) {
    width: min(100%, 840px);
    min-height: 660px;
    margin: 0 auto;
    padding: clamp(34px, 4.5vw, 58px);
    color: #1f2937;
    border: 1px solid rgba(203, 213, 225, .78);
    border-radius: 14px;
    background: white;
    box-shadow: var(--shadow-paper);
    font-family: "Inter", Georgia, "Times New Roman", serif;
    font-size: 15px;
    line-height: 1.72;
}

.document-editor-frame[b-2qer5xgmw4] (.ql-editor h1),
.document-editor-frame[b-2qer5xgmw4] (.ql-editor h2) {
    color: var(--text-main);
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -.02em;
}

.document-editor-frame[b-2qer5xgmw4] (.ql-editor h1) {
    font-size: clamp(1.8rem, 3vw, 2.35rem);
}

.document-editor-frame[b-2qer5xgmw4] (.ql-editor h2) {
    font-size: clamp(1.55rem, 2.4vw, 2.1rem);
}

.document-editor-frame[b-2qer5xgmw4] (.ql-editor p) {
    margin-bottom: .9rem;
}

.document-editor-frame[b-2qer5xgmw4] (.ql-editor img) {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 12px auto;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(14, 165, 233, .16);
}

.document-editor-frame[b-2qer5xgmw4] (.ql-editor a.rte-attachment-link) {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 7px 10px;
    color: var(--primary-dark);
    border-radius: 10px;
    background: rgba(14, 165, 233, .12);
    font-weight: 800;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.document-editor-frame[b-2qer5xgmw4] (.rich-text-readonly .ql-editor) {
    min-height: 620px;
}

.document-soft-button[b-2qer5xgmw4],
.document-ghost-button[b-2qer5xgmw4],
.document-primary-button[b-2qer5xgmw4],
.document-save-button[b-2qer5xgmw4],
.document-issue-button[b-2qer5xgmw4],
.document-danger-button[b-2qer5xgmw4],
.document-danger-solid-button[b-2qer5xgmw4],
.document-icon-button[b-2qer5xgmw4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 16px;
    font-size: .9rem;
    font-weight: 850;
    line-height: 1;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}

.document-soft-button[b-2qer5xgmw4],
.document-ghost-button[b-2qer5xgmw4] {
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .18);
    background: rgba(224, 245, 255, .58);
}

.document-soft-button.small[b-2qer5xgmw4] {
    min-height: 36px;
    padding-inline: 12px;
    font-size: .8rem;
}

.document-ghost-button[b-2qer5xgmw4] {
    color: var(--text-body);
    border-color: var(--border-soft);
    background: rgba(255, 255, 255, .72);
}

.document-primary-button[b-2qer5xgmw4],
.document-save-button[b-2qer5xgmw4] {
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 16px 28px rgba(14, 165, 233, .2);
}

.document-save-button[b-2qer5xgmw4] {
    min-height: 38px;
    padding-inline: 13px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}

.document-issue-button[b-2qer5xgmw4] {
    min-height: 38px;
    padding-inline: 13px;
    color: #4a2b00;
    background: linear-gradient(135deg, #ffe08a, var(--gold));
    box-shadow: 0 14px 24px rgba(246, 183, 60, .22);
}

.document-danger-button[b-2qer5xgmw4] {
    min-height: 38px;
    padding-inline: 13px;
    color: #be123c;
    border: 1px solid rgba(239, 71, 111, .22);
    background: rgba(255, 255, 255, .72);
}

.document-danger-solid-button[b-2qer5xgmw4] {
    color: white;
    background: linear-gradient(135deg, var(--danger), var(--pink));
    box-shadow: 0 14px 24px rgba(239, 71, 111, .2);
}

.document-icon-button[b-2qer5xgmw4] {
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    color: var(--text-body);
    border: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .72);
}

.document-soft-button:hover[b-2qer5xgmw4],
.document-ghost-button:hover[b-2qer5xgmw4],
.document-primary-button:hover[b-2qer5xgmw4],
.document-save-button:hover[b-2qer5xgmw4],
.document-issue-button:hover[b-2qer5xgmw4],
.document-danger-button:hover[b-2qer5xgmw4],
.document-danger-solid-button:hover[b-2qer5xgmw4],
.document-icon-button:hover[b-2qer5xgmw4] {
    transform: translateY(-1px);
}

.document-soft-button:hover[b-2qer5xgmw4] {
    background: var(--primary-soft);
    box-shadow: 0 12px 22px rgba(14, 165, 233, .12);
}

.document-danger-button:hover[b-2qer5xgmw4] {
    background: var(--danger-soft);
}

.document-primary-button:disabled[b-2qer5xgmw4],
.document-save-button:disabled[b-2qer5xgmw4],
.document-issue-button:disabled[b-2qer5xgmw4],
.document-danger-button:disabled[b-2qer5xgmw4],
.document-danger-solid-button:disabled[b-2qer5xgmw4] {
    cursor: not-allowed;
    opacity: .52;
    transform: none;
    box-shadow: none;
}

.document-drawer-backdrop[b-2qer5xgmw4],
.document-dialog-backdrop[b-2qer5xgmw4] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(15, 23, 42, .28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.document-drawer-backdrop[b-2qer5xgmw4] {
    display: flex;
    justify-content: flex-end;
}

.document-template-drawer[b-2qer5xgmw4] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: min(900px, 100%);
    height: 100%;
    border-radius: 28px 0 0 28px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(248, 252, 255, .9)),
        white;
}

.drawer-header[b-2qer5xgmw4],
.drawer-footer[b-2qer5xgmw4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border-soft);
}

.drawer-footer[b-2qer5xgmw4] {
    align-items: center;
    justify-content: flex-end;
    border-top: 1px solid var(--border-soft);
    border-bottom: 0;
}

.drawer-header h5[b-2qer5xgmw4] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
}

.drawer-body[b-2qer5xgmw4] {
    min-height: 0;
    padding: 22px;
    overflow-x: hidden;
    overflow-y: auto;
}

.drawer-editor-frame[b-2qer5xgmw4] {
    padding: 16px;
}

.document-dialog-backdrop[b-2qer5xgmw4] {
    display: grid;
    place-items: center;
    padding: 16px;
}

.document-cancel-dialog[b-2qer5xgmw4] {
    width: min(480px, 100%);
    padding: 24px;
    border-radius: 26px;
    background: var(--surface-strong);
}

.dialog-icon[b-2qer5xgmw4] {
    width: 52px;
    height: 52px;
    color: #be123c;
    background: var(--danger-soft);
    border-radius: 18px;
}

.document-cancel-dialog h5[b-2qer5xgmw4] {
    margin: 16px 0 6px;
    color: var(--text-main);
    font-weight: 850;
}

.document-cancel-dialog p[b-2qer5xgmw4] {
    color: var(--text-body);
}

.dialog-actions[b-2qer5xgmw4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.document-workspace[b-2qer5xgmw4]::-webkit-scrollbar,
.drawer-body[b-2qer5xgmw4]::-webkit-scrollbar {
    width: 10px;
}

.document-workspace[b-2qer5xgmw4]::-webkit-scrollbar-track,
.drawer-body[b-2qer5xgmw4]::-webkit-scrollbar-track {
    background: rgba(224, 245, 255, .38);
    border-radius: 999px;
}

.document-workspace[b-2qer5xgmw4]::-webkit-scrollbar-thumb,
.drawer-body[b-2qer5xgmw4]::-webkit-scrollbar-thumb {
    background: rgba(120, 170, 210, .42);
    border-radius: 999px;
    border: 2px solid rgba(238, 248, 255, .92);
}

@media (hover: hover) and (pointer: fine) {
    .document-list-card:hover[b-2qer5xgmw4],
    .document-panel:hover[b-2qer5xgmw4] {
        border-color: rgba(14, 165, 233, .24);
        box-shadow: 0 16px 34px rgba(23, 55, 90, .1);
    }

    .document-list-card:hover[b-2qer5xgmw4],
    .document-status-tabs button:hover[b-2qer5xgmw4] {
        transform: translateY(-1px);
    }
}

@media (max-width: 1199.98px) {
    .document-workspace-grid[b-2qer5xgmw4] {
        grid-template-columns: 1fr;
    }

    .document-sidebar[b-2qer5xgmw4] {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .document-meta-strip[b-2qer5xgmw4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .document-workflow-steps[b-2qer5xgmw4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .document-sidebar[b-2qer5xgmw4] {
        grid-template-columns: 1fr;
    }

    .create-draft-grid[b-2qer5xgmw4] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .document-workspace[b-2qer5xgmw4] {
        padding: 18px 16px 88px;
    }

    .document-workspace-header[b-2qer5xgmw4] {
        padding: 16px;
        border-radius: 26px;
    }

    .document-title-row[b-2qer5xgmw4],
    .create-draft-header[b-2qer5xgmw4],
    .editor-panel-header[b-2qer5xgmw4],
    .drawer-header[b-2qer5xgmw4],
    .drawer-footer[b-2qer5xgmw4] {
        align-items: stretch;
        flex-direction: column;
    }

    .document-title-copy[b-2qer5xgmw4] {
        align-items: flex-start;
        flex-direction: column;
    }

    .document-action-bar[b-2qer5xgmw4],
    .editor-header-actions[b-2qer5xgmw4],
    .dialog-actions[b-2qer5xgmw4] {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .document-soft-button[b-2qer5xgmw4],
    .document-primary-button[b-2qer5xgmw4],
    .document-save-button[b-2qer5xgmw4],
    .document-issue-button[b-2qer5xgmw4],
    .document-danger-button[b-2qer5xgmw4],
    .document-danger-solid-button[b-2qer5xgmw4],
    .document-ghost-button[b-2qer5xgmw4] {
        width: 100%;
    }

    .document-status-tabs[b-2qer5xgmw4] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .student-summary-grid[b-2qer5xgmw4],
    .document-meta-strip[b-2qer5xgmw4] {
        grid-template-columns: 1fr;
    }

    .document-template-drawer[b-2qer5xgmw4] {
        height: min(92vh, 100%);
        border-radius: 26px 26px 0 0;
    }

    .document-drawer-backdrop[b-2qer5xgmw4] {
        align-items: end;
    }

    .document-editor-frame[b-2qer5xgmw4] {
        padding: 12px;
    }

    .document-editor-frame[b-2qer5xgmw4] (.ql-editor) {
        min-height: 540px;
        padding: 28px 22px;
    }
}

@media (max-width: 560px) {
    .document-workspace[b-2qer5xgmw4] {
        padding: 12px 10px 82px;
    }

    .document-title-row[b-2qer5xgmw4],
    .document-panel[b-2qer5xgmw4],
    .document-workflow-steps[b-2qer5xgmw4],
    .document-cancel-dialog[b-2qer5xgmw4] {
        border-radius: 22px;
    }

    .document-workflow-steps[b-2qer5xgmw4] {
        grid-template-columns: 1fr;
    }

    .document-list-card-top[b-2qer5xgmw4] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .document-list-card-top .document-status-badge[b-2qer5xgmw4] {
        grid-column: 1 / -1;
        width: fit-content;
    }
}

@media (prefers-reduced-motion: reduce) {
    .document-workspace-header[b-2qer5xgmw4],
    .document-list-card[b-2qer5xgmw4],
    .document-status-tabs button[b-2qer5xgmw4],
    .document-panel[b-2qer5xgmw4],
    .document-soft-button[b-2qer5xgmw4],
    .document-primary-button[b-2qer5xgmw4],
    .document-save-button[b-2qer5xgmw4],
    .document-issue-button[b-2qer5xgmw4],
    .document-danger-button[b-2qer5xgmw4],
    .document-danger-solid-button[b-2qer5xgmw4] {
        animation: none !important;
        transition: none !important;
    }

    .document-list-card:hover[b-2qer5xgmw4],
    .document-status-tabs button:hover[b-2qer5xgmw4],
    .document-soft-button:hover[b-2qer5xgmw4],
    .document-primary-button:hover[b-2qer5xgmw4],
    .document-save-button:hover[b-2qer5xgmw4],
    .document-issue-button:hover[b-2qer5xgmw4],
    .document-danger-button:hover[b-2qer5xgmw4],
    .document-danger-solid-button:hover[b-2qer5xgmw4] {
        transform: none !important;
    }
}

@media print {
    .document-workspace[b-2qer5xgmw4] {
        padding: 0;
        background: white;
    }

    .document-workspace-header[b-2qer5xgmw4],
    .document-sidebar[b-2qer5xgmw4],
    .create-draft-panel[b-2qer5xgmw4],
    .editor-panel-header[b-2qer5xgmw4],
    .document-readonly-banner[b-2qer5xgmw4],
    .document-title-input[b-2qer5xgmw4] {
        display: none !important;
    }

    .document-workspace-grid[b-2qer5xgmw4],
    .document-main[b-2qer5xgmw4] {
        display: block;
    }

    .editor-panel[b-2qer5xgmw4],
    .document-editor-frame[b-2qer5xgmw4],
    .document-editor-frame[b-2qer5xgmw4] (.ql-editor) {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: white;
    }

    .document-editor-frame[b-2qer5xgmw4] (.ql-editor) {
        width: auto;
        min-height: auto;
        padding: 0;
    }
}
/* /Components/Pages/StudentEditPage.razor.rz.scp.css */
@keyframes editRise-b-v9zgopc84x {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes editShimmer-b-v9zgopc84x {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.student-edit-page[b-v9zgopc84x] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 92px;
    color: var(--text-body);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.student-edit-page.mybody[b-v9zgopc84x] {
    display: block;
    grid-template-rows: unset;
}

.student-edit-page[b-v9zgopc84x]::before,
.student-edit-page[b-v9zgopc84x]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.student-edit-page[b-v9zgopc84x]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.student-edit-page[b-v9zgopc84x]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.student-edit-shell[b-v9zgopc84x] {
    display: grid;
    gap: 18px;
    width: min(100%, 1440px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: editRise-b-v9zgopc84x .32s ease-out both;
}

.edit-hero[b-v9zgopc84x],
.edit-picker-card[b-v9zgopc84x],
.edit-context-card[b-v9zgopc84x],
.edit-section-card[b-v9zgopc84x],
.edit-footer-card[b-v9zgopc84x],
.edit-loading-card[b-v9zgopc84x],
.edit-empty-state[b-v9zgopc84x] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.edit-hero[b-v9zgopc84x] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: var(--radius-xl);
}

.edit-hero[b-v9zgopc84x]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 290px;
    height: 290px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(139, 92, 246, .13), transparent 68%);
    pointer-events: none;
}

.edit-hero-title[b-v9zgopc84x] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.edit-hero-icon[b-v9zgopc84x],
.edit-mini-icon[b-v9zgopc84x],
.edit-section-header > span[b-v9zgopc84x],
.edit-empty-state > span[b-v9zgopc84x] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.edit-hero-icon[b-v9zgopc84x] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.edit-eyebrow[b-v9zgopc84x] {
    margin: 0 0 4px;
    color: var(--primary-dark);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.edit-hero h1[b-v9zgopc84x],
.edit-context-card h2[b-v9zgopc84x],
.edit-section-header h3[b-v9zgopc84x],
.edit-empty-state h2[b-v9zgopc84x] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.03em;
}

.edit-hero h1[b-v9zgopc84x] {
    font-size: clamp(1.75rem, 2.8vw, 2.15rem);
}

.edit-hero p:not(.edit-eyebrow)[b-v9zgopc84x],
.edit-section-header p[b-v9zgopc84x],
.edit-picker-card p[b-v9zgopc84x],
.edit-empty-state p[b-v9zgopc84x],
.edit-footer-card span[b-v9zgopc84x] {
    margin: 0;
    color: var(--text-body);
    font-size: .92rem;
}

.edit-hero-actions[b-v9zgopc84x],
.edit-footer-actions[b-v9zgopc84x] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.edit-soft-button[b-v9zgopc84x],
.edit-ghost-button[b-v9zgopc84x],
.edit-primary-button[b-v9zgopc84x] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 16px;
    font-size: .9rem;
    font-weight: 800;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.edit-soft-button[b-v9zgopc84x],
.edit-ghost-button[b-v9zgopc84x] {
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .18);
    background: rgba(224, 245, 255, .58);
}

.edit-ghost-button[b-v9zgopc84x] {
    color: var(--text-body);
    border-color: var(--border-soft);
    background: rgba(255, 255, 255, .64);
}

.edit-primary-button[b-v9zgopc84x] {
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 16px 28px rgba(14, 165, 233, .2);
}

.edit-soft-button:hover[b-v9zgopc84x],
.edit-ghost-button:hover[b-v9zgopc84x],
.edit-primary-button:hover[b-v9zgopc84x] {
    transform: translateY(-1px);
}

.edit-soft-button:hover[b-v9zgopc84x] {
    background: var(--primary-soft);
    box-shadow: 0 12px 22px rgba(14, 165, 233, .12);
}

.edit-primary-button:hover[b-v9zgopc84x] {
    box-shadow: 0 18px 34px rgba(139, 92, 246, .22);
}

.edit-picker-card[b-v9zgopc84x] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 460px);
    align-items: center;
    gap: 18px;
    padding: 20px;
    border-radius: var(--radius-lg);
}

.edit-picker-card > div[b-v9zgopc84x] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.edit-picker-card strong[b-v9zgopc84x] {
    display: block;
    color: var(--text-main);
    font-weight: 850;
}

.edit-mini-icon[b-v9zgopc84x] {
    width: 44px;
    height: 44px;
    color: var(--primary-dark);
    border-radius: 16px;
    background: var(--primary-soft);
}

.edit-loading-card[b-v9zgopc84x] {
    position: relative;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    overflow: hidden;
    padding: 24px;
    border-radius: var(--radius-xl);
}

.edit-loading-card[b-v9zgopc84x]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .46), transparent);
    animation: editShimmer-b-v9zgopc84x 1.5s infinite;
}

.edit-skeleton-avatar[b-v9zgopc84x],
.edit-skeleton-stack span[b-v9zgopc84x] {
    border-radius: 999px;
    background: rgba(120, 170, 210, .16);
}

.edit-skeleton-avatar[b-v9zgopc84x] {
    width: 64px;
    height: 64px;
}

.edit-skeleton-stack[b-v9zgopc84x] {
    display: grid;
    gap: 10px;
}

.edit-skeleton-stack span[b-v9zgopc84x] {
    display: block;
    width: min(100%, 520px);
    height: 14px;
}

.edit-skeleton-stack span:nth-child(2)[b-v9zgopc84x] {
    width: min(76%, 380px);
}

.edit-skeleton-stack span:nth-child(3)[b-v9zgopc84x] {
    width: min(58%, 260px);
}

.edit-loading-copy[b-v9zgopc84x] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-dark);
    font-weight: 800;
}

.edit-loading-copy .spinner-border[b-v9zgopc84x] {
    width: 1.3rem;
    height: 1.3rem;
    border-width: .16rem;
}

.edit-empty-state[b-v9zgopc84x] {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 300px;
    padding: 46px 24px;
    text-align: center;
    border-radius: var(--radius-xl);
}

.edit-empty-state > span[b-v9zgopc84x] {
    width: 66px;
    height: 66px;
    color: var(--primary-dark);
    font-size: 1.45rem;
    border-radius: 24px;
    background: var(--primary-soft);
}

.edit-empty-state.warning > span[b-v9zgopc84x] {
    color: #b45309;
    background: var(--warning-soft);
}

.edit-context-card[b-v9zgopc84x] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-radius: var(--radius-xl);
}

.edit-avatar[b-v9zgopc84x] {
    display: inline-grid;
    place-items: center;
    width: 68px;
    height: 68px;
    color: white;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(14, 165, 233, .96), rgba(139, 92, 246, .94)),
        var(--primary);
    box-shadow: 0 16px 32px rgba(14, 165, 233, .18);
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: .02em;
}

.edit-context-main[b-v9zgopc84x] {
    min-width: 0;
}

.edit-context-card h2[b-v9zgopc84x] {
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
}

.edit-context-meta[b-v9zgopc84x],
.edit-context-badges[b-v9zgopc84x] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.edit-context-meta[b-v9zgopc84x] {
    margin-top: 8px;
}

.edit-context-meta span[b-v9zgopc84x],
.edit-code-pill[b-v9zgopc84x],
.edit-info-badge[b-v9zgopc84x],
.edit-status-badge[b-v9zgopc84x],
.edit-linked-pill[b-v9zgopc84x] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(120, 170, 210, .18);
    background: rgba(248, 252, 255, .76);
    color: var(--text-body);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.2;
}

.edit-code-pill[b-v9zgopc84x],
.code-input[b-v9zgopc84x] {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    letter-spacing: .01em;
}

.edit-status-badge.active[b-v9zgopc84x],
.edit-info-badge.linked[b-v9zgopc84x],
.edit-linked-pill[b-v9zgopc84x] {
    color: #047857;
    border-color: rgba(16, 185, 129, .2);
    background: var(--success-soft);
}

.edit-status-badge.inactive[b-v9zgopc84x],
.edit-status-badge.withdrawn[b-v9zgopc84x] {
    color: #be123c;
    border-color: rgba(239, 71, 111, .2);
    background: var(--danger-soft);
}

.edit-status-badge.graduated[b-v9zgopc84x] {
    color: #5b21b6;
    border-color: rgba(139, 92, 246, .2);
    background: rgba(237, 233, 254, .82);
}

.edit-status-badge.muted[b-v9zgopc84x],
.edit-info-badge.muted[b-v9zgopc84x],
.edit-linked-pill.muted[b-v9zgopc84x] {
    color: var(--text-muted);
    border-color: var(--border-soft);
    background: rgba(248, 252, 255, .82);
}

.edit-info-badge[b-v9zgopc84x] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.edit-form-stack[b-v9zgopc84x] {
    display: grid;
    gap: 18px;
}

.edit-section-card[b-v9zgopc84x],
.edit-footer-card[b-v9zgopc84x] {
    padding: 22px 24px;
    border-radius: var(--radius-xl);
}

.edit-section-card[b-v9zgopc84x] {
    position: relative;
    overflow: hidden;
}

.edit-section-card[b-v9zgopc84x]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary), var(--violet));
    opacity: .88;
}

.medical-card[b-v9zgopc84x]::before {
    background: linear-gradient(180deg, var(--pink), var(--danger));
}

.parent-card[b-v9zgopc84x]::before {
    background: linear-gradient(180deg, var(--success), var(--primary));
}

.academic-card[b-v9zgopc84x]::before {
    background: linear-gradient(180deg, var(--violet), var(--primary));
}

.login-card[b-v9zgopc84x]::before {
    background: linear-gradient(180deg, var(--primary-dark), var(--primary));
}

.edit-section-header[b-v9zgopc84x] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.edit-section-header > span[b-v9zgopc84x] {
    width: 46px;
    height: 46px;
    color: var(--primary-dark);
    border-radius: 17px;
    background: var(--primary-soft);
}

.medical-card .edit-section-header > span[b-v9zgopc84x] {
    color: #be185d;
    background: var(--pink-soft);
}

.parent-card .edit-section-header > span[b-v9zgopc84x] {
    color: #047857;
    background: var(--success-soft);
}

.edit-section-header h3[b-v9zgopc84x] {
    font-size: 1.08rem;
}

.edit-field-grid[b-v9zgopc84x] {
    display: grid;
    gap: 18px;
}

.edit-field-grid.three[b-v9zgopc84x] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.edit-field-grid.two[b-v9zgopc84x] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.edit-field[b-v9zgopc84x] {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
}

.edit-field > span[b-v9zgopc84x] {
    color: var(--text-main);
    font-size: .84rem;
    font-weight: 800;
}

.edit-field em[b-v9zgopc84x] {
    color: var(--danger);
    font-style: normal;
}

.edit-field small[b-v9zgopc84x] {
    color: var(--text-muted);
    font-size: .78rem;
    font-weight: 700;
}

.edit-field .validation-message[b-v9zgopc84x] {
    color: var(--danger);
    font-size: .78rem;
    font-weight: 800;
}

.edit-input[b-v9zgopc84x] {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    outline: none;
    background: rgba(255, 255, 255, .78);
    color: var(--text-main);
    font-size: .92rem;
    font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.edit-input[b-v9zgopc84x]::placeholder {
    color: var(--text-muted);
    font-weight: 650;
}

.edit-input:focus[b-v9zgopc84x],
.edit-input:focus-visible[b-v9zgopc84x] {
    border-color: rgba(14, 165, 233, .72);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
}

.edit-input:disabled[b-v9zgopc84x] {
    color: var(--text-body);
    cursor: not-allowed;
    background: rgba(248, 252, 255, .78);
}

.edit-select[b-v9zgopc84x] {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 19px) 20px,
        calc(100% - 13px) 20px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.edit-textarea[b-v9zgopc84x] {
    min-height: 126px;
    resize: vertical;
}

.medical-card .edit-input:focus[b-v9zgopc84x] {
    border-color: rgba(236, 72, 153, .58);
    box-shadow: 0 0 0 4px rgba(236, 72, 153, .1);
}

.edit-footer-card[b-v9zgopc84x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    background: var(--surface-strong);
}

.edit-footer-card strong[b-v9zgopc84x] {
    display: block;
    margin-bottom: 2px;
    color: var(--text-main);
    font-weight: 850;
}

@media (max-width: 1100px) {
    .edit-field-grid.three[b-v9zgopc84x] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .edit-context-card[b-v9zgopc84x] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .edit-context-badges[b-v9zgopc84x] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .student-edit-page[b-v9zgopc84x] {
        padding: 18px 16px 88px;
    }

    .student-edit-shell[b-v9zgopc84x] {
        padding: 16px;
        border-radius: 26px;
    }

    .edit-hero[b-v9zgopc84x],
    .edit-picker-card[b-v9zgopc84x],
    .edit-context-card[b-v9zgopc84x],
    .edit-footer-card[b-v9zgopc84x],
    .edit-loading-card[b-v9zgopc84x] {
        grid-template-columns: 1fr;
    }

    .edit-hero[b-v9zgopc84x],
    .edit-context-card[b-v9zgopc84x],
    .edit-footer-card[b-v9zgopc84x] {
        align-items: stretch;
    }

    .edit-hero-title[b-v9zgopc84x] {
        align-items: flex-start;
    }

    .edit-hero-actions[b-v9zgopc84x],
    .edit-footer-actions[b-v9zgopc84x] {
        justify-content: stretch;
    }

    .edit-soft-button[b-v9zgopc84x],
    .edit-ghost-button[b-v9zgopc84x],
    .edit-primary-button[b-v9zgopc84x] {
        flex: 1 1 160px;
    }

    .edit-field-grid.three[b-v9zgopc84x],
    .edit-field-grid.two[b-v9zgopc84x] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .student-edit-page[b-v9zgopc84x] {
        padding: 12px 10px 82px;
    }

    .student-edit-shell[b-v9zgopc84x] {
        padding: 12px;
    }

    .edit-hero[b-v9zgopc84x],
    .edit-section-card[b-v9zgopc84x],
    .edit-footer-card[b-v9zgopc84x],
    .edit-picker-card[b-v9zgopc84x],
    .edit-context-card[b-v9zgopc84x],
    .edit-empty-state[b-v9zgopc84x] {
        border-radius: 22px;
        padding: 18px;
    }

    .edit-hero-title[b-v9zgopc84x] {
        flex-direction: column;
    }

    .edit-context-card[b-v9zgopc84x] {
        text-align: left;
    }
}
/* /Components/Pages/StudentElectivesPage.razor.rz.scp.css */
@keyframes subjectsRise-b-u55cz14a47 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes subjectsShimmer-b-u55cz14a47 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.student-subjects-page[b-u55cz14a47] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 92px;
    color: var(--text-body);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.student-subjects-page.mybody[b-u55cz14a47] {
    display: block;
    grid-template-rows: unset;
}

.student-subjects-page[b-u55cz14a47]::before,
.student-subjects-page[b-u55cz14a47]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.student-subjects-page[b-u55cz14a47]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.student-subjects-page[b-u55cz14a47]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.student-subjects-shell[b-u55cz14a47] {
    display: grid;
    gap: 18px;
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: subjectsRise-b-u55cz14a47 .32s ease-out both;
}

.subjects-hero[b-u55cz14a47],
.subjects-toolbar-card[b-u55cz14a47],
.subjects-summary-card[b-u55cz14a47],
.subjects-info-card[b-u55cz14a47],
.subjects-matrix-card[b-u55cz14a47] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.subjects-hero[b-u55cz14a47] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: var(--radius-xl);
}

.subjects-hero[b-u55cz14a47]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 290px;
    height: 290px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(14, 165, 233, .13), transparent 68%);
    pointer-events: none;
}

.subjects-hero-title[b-u55cz14a47],
.subjects-toolbar-copy[b-u55cz14a47],
.student-identity[b-u55cz14a47] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.subjects-hero-title[b-u55cz14a47] {
    position: relative;
    z-index: 1;
    gap: 18px;
}

.subjects-hero-icon[b-u55cz14a47],
.subjects-toolbar-copy > span[b-u55cz14a47],
.subjects-summary-card > span[b-u55cz14a47],
.subjects-empty-state > i[b-u55cz14a47],
.student-avatar[b-u55cz14a47] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.subjects-hero-icon[b-u55cz14a47] {
    width: 62px;
    height: 62px;
    color: white;
    font-size: 1.38rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.subjects-hero h1[b-u55cz14a47],
.subjects-toolbar-copy h2[b-u55cz14a47],
.subjects-empty-state h3[b-u55cz14a47] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.03em;
}

.subjects-hero h1[b-u55cz14a47] {
    font-size: clamp(1.75rem, 2.8vw, 2.15rem);
}

.subjects-hero p[b-u55cz14a47],
.subjects-toolbar-copy p[b-u55cz14a47],
.subjects-empty-state p[b-u55cz14a47] {
    margin: 0;
    color: var(--text-body);
    font-size: .92rem;
}

.subjects-context-badge[b-u55cz14a47],
.subjects-unsaved-badge[b-u55cz14a47] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 12px;
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .18);
    border-radius: 999px;
    background: var(--primary-soft);
    font-size: .82rem;
    font-weight: 850;
    white-space: nowrap;
}

.subjects-toolbar-card[b-u55cz14a47] {
    display: grid;
    grid-template-columns: minmax(250px, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 18px;
    padding: 20px;
    border-radius: var(--radius-xl);
}

.subjects-toolbar-copy[b-u55cz14a47] {
    gap: 14px;
}

.subjects-toolbar-copy.compact[b-u55cz14a47] {
    align-items: center;
}

.subjects-toolbar-copy > span[b-u55cz14a47] {
    width: 46px;
    height: 46px;
    color: var(--primary-dark);
    border-radius: 17px;
    background: var(--primary-soft);
}

.subjects-toolbar-copy h2[b-u55cz14a47] {
    font-size: 1.12rem;
}

.subjects-toolbar-controls[b-u55cz14a47] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.subjects-field[b-u55cz14a47] {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin: 0;
}

.subjects-field > span[b-u55cz14a47] {
    color: var(--text-main);
    font-size: .8rem;
    font-weight: 800;
}

.subjects-input[b-u55cz14a47] {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    outline: none;
    background: rgba(255, 255, 255, .78);
    color: var(--text-main);
    font-size: .92rem;
    font-weight: 750;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.subjects-input:focus[b-u55cz14a47],
.subjects-input:focus-visible[b-u55cz14a47] {
    border-color: rgba(14, 165, 233, .72);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
}

.subjects-select[b-u55cz14a47] {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 19px) 20px,
        calc(100% - 13px) 20px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.subjects-summary-grid[b-u55cz14a47] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.subjects-summary-card[b-u55cz14a47] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border-radius: var(--radius-lg);
}

.subjects-summary-card > span[b-u55cz14a47] {
    width: 48px;
    height: 48px;
    color: var(--primary-dark);
    border-radius: 17px;
    background: var(--primary-soft);
}

.subjects-summary-card.subjects > span[b-u55cz14a47] {
    color: #5b21b6;
    background: rgba(237, 233, 254, .82);
}

.subjects-summary-card.selected > span[b-u55cz14a47] {
    color: #047857;
    background: var(--success-soft);
}

.subjects-summary-card.context > span[b-u55cz14a47] {
    color: #be185d;
    background: var(--pink-soft);
}

.subjects-summary-card small[b-u55cz14a47] {
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.subjects-summary-card strong[b-u55cz14a47] {
    display: block;
    color: var(--text-main);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 900;
    letter-spacing: -.04em;
    overflow-wrap: anywhere;
}

.subjects-summary-card p[b-u55cz14a47] {
    margin: 0;
    color: var(--text-body);
    font-size: .82rem;
    font-weight: 700;
}

.subjects-info-card[b-u55cz14a47] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    color: var(--primary-dark);
    border-radius: 18px;
    background: rgba(224, 245, 255, .68);
    font-weight: 760;
}

.subjects-matrix-card[b-u55cz14a47] {
    overflow: hidden;
    border-radius: var(--radius-xl);
}

.subjects-matrix-header[b-u55cz14a47] {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.subjects-matrix-actions[b-u55cz14a47] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.subjects-unsaved-badge[b-u55cz14a47] {
    color: var(--text-muted);
    border-color: var(--border-soft);
    background: rgba(255, 255, 255, .72);
}

.subjects-unsaved-badge.active[b-u55cz14a47] {
    color: #b45309;
    border-color: rgba(245, 158, 11, .22);
    background: var(--warning-soft);
}

.subjects-primary-button[b-u55cz14a47] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    color: white;
    border: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 16px 28px rgba(14, 165, 233, .2);
    font-size: .9rem;
    font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.subjects-primary-button:hover[b-u55cz14a47] {
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(139, 92, 246, .22);
}

.subjects-primary-button:disabled[b-u55cz14a47] {
    cursor: not-allowed;
    opacity: .52;
    transform: none;
    box-shadow: none;
}

.subjects-legend[b-u55cz14a47] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border-soft);
    background: rgba(248, 252, 255, .6);
}

.subjects-legend span[b-u55cz14a47] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    color: var(--text-body);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    font-size: .78rem;
    font-weight: 750;
}

.subjects-legend i[b-u55cz14a47] {
    color: var(--primary);
}

.subjects-matrix-table-wrap[b-u55cz14a47] {
    max-height: calc(100vh - 320px);
    overflow: auto;
    background: rgba(248, 252, 255, .6);
}

.subjects-matrix-table[b-u55cz14a47] {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
}

.subjects-matrix-table th[b-u55cz14a47],
.subjects-matrix-table td[b-u55cz14a47] {
    border-right: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

.subjects-matrix-table thead th[b-u55cz14a47] {
    position: sticky;
    top: 0;
    z-index: 5;
    min-width: 230px;
    padding: 12px;
    background: rgba(248, 252, 255, .96);
    box-shadow: 0 8px 18px rgba(23, 55, 90, .05);
}

.subjects-matrix-table .student-column[b-u55cz14a47] {
    position: sticky;
    left: 0;
    z-index: 6;
    min-width: 310px;
    max-width: 340px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 12px 0 24px rgba(23, 55, 90, .06);
}

.subjects-matrix-table tbody .student-column[b-u55cz14a47] {
    z-index: 4;
    padding: 14px 16px;
}

.subject-header-card[b-u55cz14a47] {
    position: relative;
    display: grid;
    gap: 3px;
    min-height: 82px;
    padding: 12px;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: rgba(255, 255, 255, .78);
    text-align: left;
}

.subject-header-card[b-u55cz14a47]::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--primary);
}

.subject-header-card.violet[b-u55cz14a47]::before {
    background: var(--violet);
}

.subject-header-card.green[b-u55cz14a47]::before {
    background: var(--success);
}

.subject-header-card.pink[b-u55cz14a47]::before {
    background: var(--pink);
}

.subject-header-card.amber[b-u55cz14a47]::before {
    background: var(--warning);
}

.subject-code[b-u55cz14a47] {
    color: var(--primary-dark);
    font-size: .78rem;
    font-weight: 900;
}

.subject-header-card strong[b-u55cz14a47] {
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 850;
}

.subject-header-card small[b-u55cz14a47] {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 700;
}

.student-identity[b-u55cz14a47] {
    gap: 12px;
}

.student-avatar[b-u55cz14a47] {
    width: 44px;
    height: 44px;
    color: white;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    font-size: .88rem;
    font-weight: 900;
}

.student-identity strong[b-u55cz14a47] {
    display: block;
    color: var(--text-main);
    font-weight: 850;
}

.student-identity small[b-u55cz14a47] {
    display: block;
    color: var(--text-muted);
    font-family: Consolas, "Courier New", monospace;
    font-size: .8rem;
}

.assignment-cell[b-u55cz14a47] {
    min-width: 230px;
    height: 84px;
    padding: 12px;
    background: rgba(255, 255, 255, .56);
    text-align: center;
}

.assignment-cell.selected[b-u55cz14a47] {
    background: rgba(224, 245, 255, .42);
}

.assignment-cell.changed[b-u55cz14a47] {
    background: rgba(255, 247, 237, .72);
}

.assignment-control[b-u55cz14a47] {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
}

.assignment-control input[b-u55cz14a47],
.mobile-subject-assignment input[b-u55cz14a47] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.assignment-box[b-u55cz14a47] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-height: 56px;
    color: var(--text-muted);
    border: 1px dashed rgba(120, 170, 210, .34);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    font-size: .86rem;
    font-weight: 850;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.assignment-box i[b-u55cz14a47] {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.assignment-cell.selected .assignment-box[b-u55cz14a47] {
    color: #047857;
    border-style: solid;
    border-color: rgba(16, 185, 129, .2);
    background: linear-gradient(180deg, rgba(220, 252, 231, .95), rgba(255, 255, 255, .9));
    box-shadow: 0 8px 20px rgba(14, 165, 233, .08);
}

.assignment-cell.selected .assignment-box i[b-u55cz14a47] {
    color: white;
    background: var(--success);
}

.assignment-control:focus-within .assignment-box[b-u55cz14a47],
.assignment-control:hover .assignment-box[b-u55cz14a47] {
    border-color: rgba(14, 165, 233, .28);
    background: rgba(224, 245, 255, .62);
    transform: translateY(-1px);
}

.subjects-mobile-list[b-u55cz14a47] {
    display: none;
    gap: 12px;
    padding: 16px;
}

.student-subject-card[b-u55cz14a47] {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: rgba(255, 255, 255, .78);
}

.mobile-subject-grid[b-u55cz14a47] {
    display: grid;
    gap: 9px;
}

.mobile-subject-assignment[b-u55cz14a47] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px dashed rgba(120, 170, 210, .34);
    border-radius: 17px;
    background: rgba(255, 255, 255, .72);
}

.mobile-subject-assignment.selected[b-u55cz14a47] {
    color: #047857;
    border-style: solid;
    border-color: rgba(16, 185, 129, .2);
    background: var(--success-soft);
}

.mobile-subject-assignment.changed[b-u55cz14a47] {
    border-color: rgba(245, 158, 11, .24);
    background: var(--warning-soft);
}

.mobile-subject-assignment span[b-u55cz14a47] {
    display: grid;
    gap: 2px;
}

.mobile-subject-assignment strong[b-u55cz14a47],
.mobile-subject-assignment em[b-u55cz14a47] {
    color: var(--text-main);
    font-style: normal;
    font-weight: 850;
}

.mobile-subject-assignment small[b-u55cz14a47] {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 700;
}

.mobile-subject-assignment > i[b-u55cz14a47] {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    color: var(--primary-dark);
    border-radius: 10px;
    background: var(--primary-soft);
}

.mobile-subject-assignment.selected > i[b-u55cz14a47] {
    color: white;
    background: var(--success);
}

.subjects-empty-state[b-u55cz14a47],
.subjects-loading-state[b-u55cz14a47] {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 330px;
    padding: 32px;
    color: var(--text-muted);
    text-align: center;
}

.subjects-empty-state > i[b-u55cz14a47] {
    width: 68px;
    height: 68px;
    color: var(--primary-dark);
    font-size: 1.55rem;
    background: var(--primary-soft);
    border-radius: 24px;
}

.subjects-empty-state h3[b-u55cz14a47] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
}

.subjects-empty-state p[b-u55cz14a47] {
    margin: 0;
}

.subjects-loading-state[b-u55cz14a47] {
    position: relative;
    overflow: hidden;
    background: var(--surface-soft);
}

.subjects-loading-state[b-u55cz14a47]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .46), transparent);
    animation: subjectsShimmer-b-u55cz14a47 1.5s infinite;
}

.subjects-loading-state .spinner-border[b-u55cz14a47] {
    color: var(--primary);
}

.student-subjects-page[b-u55cz14a47]::-webkit-scrollbar,
.subjects-matrix-table-wrap[b-u55cz14a47]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.student-subjects-page[b-u55cz14a47]::-webkit-scrollbar-track,
.subjects-matrix-table-wrap[b-u55cz14a47]::-webkit-scrollbar-track {
    background: rgba(224, 245, 255, .38);
    border-radius: 999px;
}

.student-subjects-page[b-u55cz14a47]::-webkit-scrollbar-thumb,
.subjects-matrix-table-wrap[b-u55cz14a47]::-webkit-scrollbar-thumb {
    background: rgba(120, 170, 210, .42);
    border-radius: 999px;
    border: 2px solid rgba(238, 248, 255, .92);
}

@media (hover: hover) and (pointer: fine) {
    .subjects-summary-card:hover[b-u55cz14a47],
    .subjects-toolbar-card:hover[b-u55cz14a47],
    .subjects-matrix-card:hover[b-u55cz14a47] {
        border-color: rgba(14, 165, 233, .24);
        box-shadow: 0 16px 34px rgba(23, 55, 90, .1);
    }
}

@media (max-width: 1200px) {
    .subjects-toolbar-card[b-u55cz14a47] {
        grid-template-columns: 1fr;
    }

    .subjects-summary-grid[b-u55cz14a47] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .student-subjects-page[b-u55cz14a47] {
        padding: 18px 16px 88px;
    }

    .student-subjects-shell[b-u55cz14a47] {
        padding: 16px;
        border-radius: 26px;
    }

    .subjects-hero[b-u55cz14a47],
    .subjects-matrix-header[b-u55cz14a47] {
        align-items: stretch;
        flex-direction: column;
    }

    .subjects-hero-title[b-u55cz14a47] {
        align-items: flex-start;
        flex-direction: column;
    }

    .subjects-toolbar-controls[b-u55cz14a47] {
        grid-template-columns: 1fr;
    }

    .subjects-matrix-actions[b-u55cz14a47],
    .subjects-primary-button[b-u55cz14a47] {
        width: 100%;
    }

    .subjects-primary-button[b-u55cz14a47] {
        min-height: 48px;
    }

    .subjects-matrix-table-wrap[b-u55cz14a47] {
        display: none;
    }

    .subjects-mobile-list[b-u55cz14a47] {
        display: grid;
    }
}

@media (max-width: 560px) {
    .student-subjects-page[b-u55cz14a47] {
        padding: 12px 10px 82px;
    }

    .student-subjects-shell[b-u55cz14a47] {
        padding: 12px;
    }

    .subjects-hero[b-u55cz14a47],
    .subjects-toolbar-card[b-u55cz14a47],
    .subjects-summary-card[b-u55cz14a47],
    .subjects-info-card[b-u55cz14a47],
    .subjects-matrix-card[b-u55cz14a47] {
        border-radius: 22px;
    }

    .subjects-summary-grid[b-u55cz14a47] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .student-subjects-shell[b-u55cz14a47],
    .subjects-primary-button[b-u55cz14a47],
    .assignment-box[b-u55cz14a47] {
        animation: none !important;
        transition: none !important;
    }

    .subjects-primary-button:hover[b-u55cz14a47],
    .assignment-control:hover .assignment-box[b-u55cz14a47] {
        transform: none !important;
    }
}
/* /Components/Pages/StudentGradeHistoryPage.razor.rz.scp.css */
@keyframes historyRise-b-1eseq6yvtl {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes historySpin-b-1eseq6yvtl {
    to {
        transform: rotate(360deg);
    }
}

.student-grade-history-page[b-1eseq6yvtl] {
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --violet: #8b5cf6;
    --violet-soft: #ede9fe;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 96px;
    color: var(--text-body);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", Inter, Manrope, "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.student-grade-history-page.mybody[b-1eseq6yvtl] {
    display: block;
    grid-template-rows: unset;
}

.student-grade-history-page[b-1eseq6yvtl]::before,
.student-grade-history-page[b-1eseq6yvtl]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.student-grade-history-page[b-1eseq6yvtl]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.student-grade-history-page[b-1eseq6yvtl]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.grade-history-shell[b-1eseq6yvtl] {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: historyRise-b-1eseq6yvtl .36s ease-out both;
}

.grade-history-hero[b-1eseq6yvtl],
.history-filter-card[b-1eseq6yvtl],
.student-context-card[b-1eseq6yvtl],
.history-summary-card[b-1eseq6yvtl],
.history-insight-card[b-1eseq6yvtl],
.history-records-card[b-1eseq6yvtl],
.history-empty-state[b-1eseq6yvtl],
.history-loading-state[b-1eseq6yvtl] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.grade-history-hero[b-1eseq6yvtl] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    overflow: hidden;
    padding: 26px 28px;
    border-radius: var(--radius-xl);
}

.grade-history-hero[b-1eseq6yvtl]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 300px;
    height: 300px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(236, 72, 153, .13), transparent 68%);
    pointer-events: none;
}

.grade-history-hero-copy[b-1eseq6yvtl],
.grade-history-actions[b-1eseq6yvtl],
.history-card-header[b-1eseq6yvtl],
.history-card-title[b-1eseq6yvtl],
.student-context-main[b-1eseq6yvtl],
.student-context-card[b-1eseq6yvtl],
.student-context-chips[b-1eseq6yvtl],
.history-status-chip[b-1eseq6yvtl],
.history-button[b-1eseq6yvtl],
.score-meter-footer[b-1eseq6yvtl],
.history-empty-state[b-1eseq6yvtl],
.history-loading-state[b-1eseq6yvtl],
.mobile-card-top[b-1eseq6yvtl] {
    display: flex;
    align-items: center;
}

.grade-history-hero-copy[b-1eseq6yvtl],
.history-card-title[b-1eseq6yvtl],
.student-context-main[b-1eseq6yvtl] {
    gap: 16px;
}

.history-card-header[b-1eseq6yvtl],
.student-context-card[b-1eseq6yvtl] {
    justify-content: space-between;
    gap: 16px;
}

.grade-history-actions[b-1eseq6yvtl],
.student-context-chips[b-1eseq6yvtl] {
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    gap: 10px;
}

.grade-history-hero-icon[b-1eseq6yvtl],
.history-card-title > span[b-1eseq6yvtl],
.student-avatar[b-1eseq6yvtl],
.summary-icon[b-1eseq6yvtl],
.history-empty-state > span[b-1eseq6yvtl] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.grade-history-hero-icon[b-1eseq6yvtl] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--violet) 54%, var(--pink));
    box-shadow: 0 18px 34px rgba(236, 72, 153, .22);
}

.eyebrow[b-1eseq6yvtl],
.history-field > span[b-1eseq6yvtl],
.history-summary-card p[b-1eseq6yvtl],
.mobile-meta-grid em[b-1eseq6yvtl] {
    display: block;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.grade-history-hero h1[b-1eseq6yvtl],
.history-card-title h2[b-1eseq6yvtl],
.student-context-card h2[b-1eseq6yvtl],
.history-empty-state h2[b-1eseq6yvtl],
.history-loading-state h2[b-1eseq6yvtl] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.035em;
}

.grade-history-hero h1[b-1eseq6yvtl] {
    font-size: clamp(1.7rem, 2.5vw, 2.32rem);
}

.history-card-title h2[b-1eseq6yvtl],
.student-context-card h2[b-1eseq6yvtl],
.history-empty-state h2[b-1eseq6yvtl],
.history-loading-state h2[b-1eseq6yvtl] {
    font-size: 1.1rem;
}

.grade-history-hero p[b-1eseq6yvtl],
.history-card-title p[b-1eseq6yvtl],
.student-context-card p[b-1eseq6yvtl],
.history-empty-state p[b-1eseq6yvtl],
.history-loading-state p[b-1eseq6yvtl],
.insight-copy[b-1eseq6yvtl] {
    margin: 0;
    color: var(--text-body);
}

.history-button[b-1eseq6yvtl] {
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    font-weight: 850;
    letter-spacing: -.01em;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.history-button:hover:not(:disabled)[b-1eseq6yvtl] {
    transform: translateY(-2px);
}

.history-button:disabled[b-1eseq6yvtl] {
    cursor: not-allowed;
    opacity: .55;
}

.history-button-primary[b-1eseq6yvtl] {
    color: white;
    background: linear-gradient(135deg, var(--warning), #fb7185);
    box-shadow: 0 16px 30px rgba(245, 158, 11, .24);
}

.history-button-ghost[b-1eseq6yvtl] {
    color: #9a5f00;
    background: rgba(255, 247, 237, .82);
    box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .22);
}

.history-filter-card[b-1eseq6yvtl],
.history-records-card[b-1eseq6yvtl],
.history-insight-card[b-1eseq6yvtl] {
    overflow: hidden;
    padding: 22px;
    border-radius: var(--radius-xl);
}

.history-card-header[b-1eseq6yvtl] {
    margin-bottom: 18px;
}

.history-card-header.compact[b-1eseq6yvtl] {
    margin-bottom: 16px;
}

.history-card-title.slim[b-1eseq6yvtl] {
    margin-bottom: 16px;
}

.history-card-title > span[b-1eseq6yvtl] {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.history-status-chip[b-1eseq6yvtl],
.student-context-chips span[b-1eseq6yvtl] {
    gap: 7px;
    width: fit-content;
    padding: 9px 12px;
    border: 1px solid rgba(14, 165, 233, .14);
    border-radius: 999px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, .72);
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.history-filter-grid[b-1eseq6yvtl] {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(170px, .75fr));
    gap: 14px;
}

.history-field[b-1eseq6yvtl] {
    min-width: 0;
}

.history-field .form-select[b-1eseq6yvtl] {
    min-height: 50px;
    border: 1px solid rgba(120, 170, 210, .26);
    border-radius: 18px;
    color: var(--text-main);
    font-weight: 750;
    background-color: rgba(255, 255, 255, .86);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

.history-field .form-select:focus[b-1eseq6yvtl] {
    border-color: rgba(14, 165, 233, .45);
    box-shadow: 0 0 0 .2rem rgba(14, 165, 233, .12);
}

.student-context-card[b-1eseq6yvtl] {
    padding: 20px 22px;
    border-radius: var(--radius-xl);
}

.student-avatar[b-1eseq6yvtl] {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    color: white;
    font-size: 1.15rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--violet), var(--pink));
    box-shadow: 0 16px 28px rgba(139, 92, 246, .2);
}

.history-summary-grid[b-1eseq6yvtl] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.history-summary-card[b-1eseq6yvtl] {
    display: flex;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border-radius: var(--radius-lg);
}

.summary-icon[b-1eseq6yvtl] {
    width: 46px;
    height: 46px;
    border-radius: 17px;
    font-size: 1.05rem;
}

.summary-icon-warning[b-1eseq6yvtl] {
    color: #a16207;
    background: var(--warning-soft);
}

.summary-icon-primary[b-1eseq6yvtl] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.summary-icon-violet[b-1eseq6yvtl] {
    color: #6d28d9;
    background: var(--violet-soft);
}

.summary-icon-success[b-1eseq6yvtl] {
    color: #047857;
    background: var(--success-soft);
}

.history-summary-card strong[b-1eseq6yvtl] {
    display: block;
    color: var(--text-main);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.history-summary-card small[b-1eseq6yvtl] {
    color: var(--text-muted);
    font-weight: 750;
}

.history-insight-grid[b-1eseq6yvtl] {
    display: grid;
    grid-template-columns: 1.2fr .9fr .9fr;
    gap: 14px;
}

.score-meter[b-1eseq6yvtl] {
    overflow: hidden;
    height: 14px;
    border-radius: 999px;
    background: rgba(226, 232, 240, .9);
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, .08);
}

.score-meter > div[b-1eseq6yvtl] {
    height: 100%;
    min-width: 8px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--primary), var(--violet), var(--pink));
}

.score-meter-footer[b-1eseq6yvtl] {
    justify-content: space-between;
    margin: 8px 0 12px;
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 800;
}

.score-meter-footer strong[b-1eseq6yvtl] {
    color: var(--text-main);
}

.grade-distribution[b-1eseq6yvtl] {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.grade-mix-chip[b-1eseq6yvtl],
.grade-pill[b-1eseq6yvtl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 30px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 900;
}

.grade-mix-chip strong[b-1eseq6yvtl] {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .64);
}

.weight-stack[b-1eseq6yvtl] {
    display: grid;
    gap: 11px;
}

.weight-row[b-1eseq6yvtl] {
    display: grid;
    grid-template-columns: minmax(86px, 1fr) minmax(82px, 1.3fr) auto;
    align-items: center;
    gap: 10px;
    color: var(--text-body);
    font-size: .82rem;
    font-weight: 800;
}

.weight-row > div[b-1eseq6yvtl] {
    overflow: hidden;
    height: 8px;
    border-radius: 999px;
    background: rgba(226, 232, 240, .88);
}

.weight-row > div span[b-1eseq6yvtl] {
    display: block;
    height: 100%;
    min-width: 6px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--warning), var(--pink));
}

.history-table-wrap[b-1eseq6yvtl] {
    overflow-x: auto;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 22px;
    background: rgba(255, 255, 255, .66);
}

.history-table[b-1eseq6yvtl] {
    width: 100%;
    min-width: 940px;
    border-collapse: separate;
    border-spacing: 0;
}

.history-table th[b-1eseq6yvtl] {
    padding: 16px 18px;
    color: var(--text-muted);
    font-size: .74rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: rgba(248, 250, 252, .86);
    border-bottom: 1px solid rgba(120, 170, 210, .16);
}

.history-table td[b-1eseq6yvtl] {
    padding: 16px 18px;
    color: var(--text-body);
    vertical-align: middle;
    border-bottom: 1px solid rgba(120, 170, 210, .14);
}

.history-table tbody tr:last-child td[b-1eseq6yvtl] {
    border-bottom: 0;
}

.history-table tbody tr:hover[b-1eseq6yvtl] {
    background: rgba(224, 245, 255, .38);
}

.history-table strong[b-1eseq6yvtl],
.mobile-card-top strong[b-1eseq6yvtl] {
    display: block;
    color: var(--text-main);
    font-weight: 900;
}

.history-table span[b-1eseq6yvtl],
.history-table em[b-1eseq6yvtl],
.mobile-card-top span[b-1eseq6yvtl] {
    display: block;
    color: var(--text-muted);
    font-size: .82rem;
    font-style: normal;
    font-weight: 700;
}

.score-cell[b-1eseq6yvtl] {
    color: var(--text-main) !important;
    font-weight: 900;
}

.comment-cell[b-1eseq6yvtl] {
    max-width: 320px;
}

.history-mobile-list[b-1eseq6yvtl] {
    display: none;
    gap: 12px;
}

.history-mobile-card[b-1eseq6yvtl] {
    padding: 16px;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 22px;
    background: rgba(255, 255, 255, .76);
}

.mobile-card-top[b-1eseq6yvtl] {
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.mobile-meta-grid[b-1eseq6yvtl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mobile-meta-grid span[b-1eseq6yvtl] {
    min-width: 0;
    padding: 10px;
    border-radius: 15px;
    color: var(--text-main);
    font-weight: 850;
    background: rgba(248, 250, 252, .9);
}

.history-mobile-card p[b-1eseq6yvtl] {
    margin: 12px 0 0;
    color: var(--text-body);
    font-weight: 700;
}

.history-empty-state[b-1eseq6yvtl],
.history-loading-state[b-1eseq6yvtl] {
    flex-direction: column;
    justify-content: center;
    min-height: 300px;
    padding: 42px 22px;
    text-align: center;
    border-radius: var(--radius-xl);
}

.history-empty-state > span[b-1eseq6yvtl] {
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    color: var(--primary-dark);
    font-size: 1.8rem;
    border-radius: 25px;
    background: var(--primary-soft);
}

.history-spinner[b-1eseq6yvtl] {
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border: 4px solid rgba(14, 165, 233, .15);
    border-top-color: var(--primary);
    border-radius: 999px;
    animation: historySpin-b-1eseq6yvtl .8s linear infinite;
}

.student-grade-history-page .bg-success-subtle[b-1eseq6yvtl] {
    color: #047857 !important;
    background: var(--success-soft) !important;
}

.student-grade-history-page .bg-warning-subtle[b-1eseq6yvtl] {
    color: #a16207 !important;
    background: var(--warning-soft) !important;
}

.student-grade-history-page .bg-danger-subtle[b-1eseq6yvtl] {
    color: #be123c !important;
    background: var(--danger-soft) !important;
}

.student-grade-history-page .bg-secondary-subtle[b-1eseq6yvtl] {
    color: #475569 !important;
    background: #f1f5f9 !important;
}

@media (max-width: 1180px) {
    .history-filter-grid[b-1eseq6yvtl],
    .history-summary-grid[b-1eseq6yvtl],
    .history-insight-grid[b-1eseq6yvtl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .history-insight-card-wide[b-1eseq6yvtl] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .student-grade-history-page[b-1eseq6yvtl] {
        padding: 16px 12px 72px;
    }

    .grade-history-shell[b-1eseq6yvtl] {
        padding: 14px;
        border-radius: 26px;
    }

    .grade-history-hero[b-1eseq6yvtl],
    .student-context-card[b-1eseq6yvtl],
    .history-card-header[b-1eseq6yvtl] {
        align-items: flex-start;
        flex-direction: column;
    }

    .grade-history-actions[b-1eseq6yvtl],
    .history-button[b-1eseq6yvtl] {
        width: 100%;
    }

    .history-filter-grid[b-1eseq6yvtl],
    .history-summary-grid[b-1eseq6yvtl],
    .history-insight-grid[b-1eseq6yvtl] {
        grid-template-columns: 1fr;
    }

    .history-table-wrap[b-1eseq6yvtl] {
        display: none;
    }

    .history-mobile-list[b-1eseq6yvtl] {
        display: grid;
    }
}

@media (max-width: 540px) {
    .grade-history-hero[b-1eseq6yvtl],
    .history-filter-card[b-1eseq6yvtl],
    .student-context-card[b-1eseq6yvtl],
    .history-insight-card[b-1eseq6yvtl],
    .history-records-card[b-1eseq6yvtl] {
        padding: 18px;
        border-radius: 24px;
    }

    .grade-history-hero-copy[b-1eseq6yvtl],
    .student-context-main[b-1eseq6yvtl] {
        align-items: flex-start;
        flex-direction: column;
    }

    .mobile-meta-grid[b-1eseq6yvtl] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/StudentPromotionPage.razor.rz.scp.css */
@keyframes promotionRise-b-25958607l5 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes promotionShimmer-b-25958607l5 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.promotion-page[b-25958607l5] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --success: #10b981;
    --success-soft: #dcfce7;
    --review: #f59e0b;
    --review-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 92px;
    color: var(--text-body);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.promotion-page.mybody[b-25958607l5] {
    display: block;
    grid-template-rows: unset;
}

.promotion-page[b-25958607l5]::before,
.promotion-page[b-25958607l5]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.promotion-page[b-25958607l5]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.promotion-page[b-25958607l5]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.promotion-shell[b-25958607l5] {
    display: grid;
    gap: 18px;
    width: min(100%, 1600px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: promotionRise-b-25958607l5 .32s ease-out both;
}

.promotion-hero[b-25958607l5],
.promotion-setup-card[b-25958607l5],
.promotion-kpi-card[b-25958607l5],
.promotion-candidates-card[b-25958607l5] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.promotion-hero[b-25958607l5] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: var(--radius-xl);
}

.promotion-hero[b-25958607l5]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 290px;
    height: 290px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(16, 185, 129, .12), transparent 68%);
    pointer-events: none;
}

.promotion-hero-title[b-25958607l5] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.promotion-hero-icon[b-25958607l5],
.promotion-section-heading > span[b-25958607l5],
.setup-group-title i[b-25958607l5],
.kpi-icon[b-25958607l5],
.promotion-empty-state > i[b-25958607l5],
.candidate-avatar[b-25958607l5] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.promotion-hero-icon[b-25958607l5] {
    width: 62px;
    height: 62px;
    color: white;
    font-size: 1.38rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary), var(--success));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.promotion-hero h1[b-25958607l5],
.promotion-section-heading h2[b-25958607l5],
.promotion-empty-state h3[b-25958607l5] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
    letter-spacing: -.03em;
}

.promotion-hero h1[b-25958607l5] {
    font-size: clamp(1.75rem, 2.8vw, 2.15rem);
}

.promotion-hero p[b-25958607l5],
.promotion-section-heading p[b-25958607l5],
.promotion-empty-state p[b-25958607l5] {
    margin: 0;
    color: var(--text-body);
    font-size: .92rem;
}

.promotion-setup-card[b-25958607l5],
.promotion-candidates-card[b-25958607l5] {
    padding: 22px;
    border-radius: var(--radius-xl);
}

.promotion-section-heading[b-25958607l5] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.promotion-section-heading.compact[b-25958607l5] {
    align-items: center;
}

.promotion-section-heading > span[b-25958607l5] {
    width: 46px;
    height: 46px;
    color: var(--primary-dark);
    border-radius: 17px;
    background: var(--primary-soft);
}

.promotion-section-heading h2[b-25958607l5] {
    font-size: 1.14rem;
}

.promotion-section-heading small[b-25958607l5] {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-weight: 750;
}

.promotion-flow-grid[b-25958607l5] {
    display: grid;
    grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr) minmax(240px, .95fr);
    gap: 14px;
    align-items: stretch;
    margin-top: 20px;
}

.promotion-setup-group[b-25958607l5] {
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: rgba(255, 255, 255, .58);
}

.promotion-setup-group.complete[b-25958607l5] {
    border-color: rgba(16, 185, 129, .2);
    background: rgba(220, 252, 231, .3);
}

.promotion-setup-group.rule[b-25958607l5] {
    border-color: rgba(139, 92, 246, .18);
    background: rgba(237, 233, 254, .28);
}

.setup-group-title[b-25958607l5] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    font-weight: 850;
}

.setup-group-title i[b-25958607l5] {
    width: 36px;
    height: 36px;
    color: var(--primary-dark);
    border-radius: 14px;
    background: var(--primary-soft);
}

.promotion-field[b-25958607l5] {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin: 0;
}

.promotion-field > span[b-25958607l5] {
    color: var(--text-main);
    font-size: .8rem;
    font-weight: 800;
}

.promotion-input[b-25958607l5],
.promotion-input-wrap[b-25958607l5] {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    outline: none;
    background: rgba(255, 255, 255, .78);
    color: var(--text-main);
    font-size: .92rem;
    font-weight: 750;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.promotion-input[b-25958607l5] {
    padding: 10px 14px;
}

.promotion-input:focus[b-25958607l5],
.promotion-input:focus-visible[b-25958607l5],
.promotion-input-wrap:focus-within[b-25958607l5] {
    border-color: rgba(14, 165, 233, .72);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12);
}

.promotion-select[b-25958607l5] {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 19px) 20px,
        calc(100% - 13px) 20px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.promotion-input-wrap[b-25958607l5] {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.promotion-input-wrap .promotion-input[b-25958607l5] {
    min-height: 44px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.promotion-input-wrap em[b-25958607l5] {
    padding-right: 14px;
    color: var(--text-muted);
    font-size: .8rem;
    font-style: normal;
    font-weight: 850;
}

.promotion-flow-arrow[b-25958607l5] {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 7px;
    color: var(--primary-dark);
    font-size: .78rem;
    font-weight: 850;
    text-align: center;
}

.promotion-flow-arrow i[b-25958607l5] {
    display: inline-grid;
    place-items: center;
    width: 54px;
    height: 54px;
    color: white;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--primary), var(--success));
    box-shadow: 0 14px 28px rgba(14, 165, 233, .16);
}

.rule-preview[b-25958607l5] {
    display: grid;
    gap: 2px;
    padding: 11px 12px;
    color: var(--primary-dark);
    border-radius: 16px;
    background: var(--primary-soft);
}

.rule-preview strong[b-25958607l5] {
    color: var(--text-main);
    font-size: .88rem;
}

.rule-preview span[b-25958607l5] {
    color: var(--text-body);
    font-size: .78rem;
    font-weight: 700;
}

.promotion-setup-footer[b-25958607l5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

.promotion-route-summary[b-25958607l5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    color: var(--text-body);
    font-size: .84rem;
    font-weight: 750;
}

.promotion-route-summary i[b-25958607l5] {
    color: var(--primary);
}

.promotion-action-row[b-25958607l5],
.promotion-candidate-actions[b-25958607l5] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
}

.promotion-kpi-grid[b-25958607l5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.promotion-kpi-card[b-25958607l5] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 18px;
    border-radius: var(--radius-lg);
}

.kpi-icon[b-25958607l5] {
    width: 48px;
    height: 48px;
    color: var(--primary-dark);
    border-radius: 17px;
    background: var(--primary-soft);
}

.promotion-kpi-card.recommended .kpi-icon[b-25958607l5] {
    color: #047857;
    background: var(--success-soft);
}

.promotion-kpi-card.review .kpi-icon[b-25958607l5] {
    color: #b45309;
    background: var(--review-soft);
}

.promotion-kpi-card.rule .kpi-icon[b-25958607l5] {
    color: #5b21b6;
    background: rgba(237, 233, 254, .82);
}

.promotion-kpi-card small[b-25958607l5] {
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.promotion-kpi-card strong[b-25958607l5] {
    display: block;
    color: var(--text-main);
    font-size: clamp(1.45rem, 2.3vw, 2rem);
    font-weight: 900;
    letter-spacing: -.04em;
}

.promotion-kpi-card p[b-25958607l5] {
    margin: 0;
    color: var(--text-body);
    font-size: .82rem;
    font-weight: 700;
}

.promotion-candidates-header[b-25958607l5] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: -22px -22px 16px;
    padding: 22px;
    border-bottom: 1px solid var(--border-soft);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: rgba(255, 255, 255, .84);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.selected-chip[b-25958607l5] {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 11px;
    color: var(--text-muted);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.selected-chip.active[b-25958607l5] {
    color: #047857;
    border-color: rgba(16, 185, 129, .2);
    background: var(--success-soft);
}

.promotion-review-summary[b-25958607l5] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.promotion-review-summary div[b-25958607l5] {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 17px;
    background: var(--surface-soft);
}

.promotion-review-summary span[b-25958607l5] {
    display: block;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.promotion-review-summary strong[b-25958607l5] {
    display: block;
    margin-top: 3px;
    color: var(--text-main);
    font-size: .84rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.promotion-table-wrap[b-25958607l5] {
    overflow-x: auto;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: rgba(255, 255, 255, .7);
}

.promotion-table[b-25958607l5] {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

.promotion-table th[b-25958607l5] {
    padding: 14px 16px;
    color: var(--text-muted);
    background: rgba(248, 252, 255, .86);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-align: left;
    text-transform: uppercase;
}

.promotion-table td[b-25958607l5] {
    padding: 14px 16px;
    border-top: 1px solid var(--border-soft);
    color: var(--text-body);
    vertical-align: middle;
}

.candidate-row[b-25958607l5] {
    position: relative;
    transition: background .18s ease;
}

.candidate-row.selected[b-25958607l5] {
    background: rgba(224, 245, 255, .34);
}

.candidate-row.review[b-25958607l5] {
    background: rgba(255, 247, 237, .34);
}

.candidate-row:hover[b-25958607l5] {
    background: rgba(14, 165, 233, .06);
}

.candidate-identity[b-25958607l5] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.candidate-avatar[b-25958607l5] {
    width: 44px;
    height: 44px;
    color: white;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), var(--success));
    font-size: .88rem;
    font-weight: 900;
}

.candidate-identity strong[b-25958607l5] {
    display: block;
    color: var(--text-main);
    font-weight: 850;
}

.candidate-identity small[b-25958607l5] {
    display: block;
    color: var(--text-muted);
    font-family: Consolas, "Courier New", monospace;
    font-size: .8rem;
}

.candidate-check[b-25958607l5] {
    display: inline-grid;
    place-items: center;
    margin: 0;
}

.candidate-check input[b-25958607l5] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary);
}

.recommendation-badge[b-25958607l5],
.score-badge[b-25958607l5],
.target-chip[b-25958607l5] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.recommendation-badge[b-25958607l5]::before,
.score-badge[b-25958607l5]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.recommendation-badge.promote[b-25958607l5],
.score-badge.success[b-25958607l5] {
    color: #047857;
    border-color: rgba(16, 185, 129, .2);
    background: var(--success-soft);
}

.recommendation-badge.review[b-25958607l5],
.score-badge.review[b-25958607l5] {
    color: #b45309;
    border-color: rgba(245, 158, 11, .22);
    background: var(--review-soft);
}

.score-badge.danger[b-25958607l5] {
    color: #be123c;
    border-color: rgba(239, 71, 111, .22);
    background: var(--danger-soft);
}

.target-chip[b-25958607l5] {
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.subject-summary[b-25958607l5] {
    max-width: 420px;
    color: var(--text-body);
    font-size: .84rem;
}

.promotion-mobile-list[b-25958607l5] {
    display: grid;
    gap: 10px;
}

.candidate-card[b-25958607l5] {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: rgba(255, 255, 255, .78);
}

.candidate-card.selected[b-25958607l5] {
    border-color: rgba(14, 165, 233, .32);
    background: rgba(224, 245, 255, .44);
}

.candidate-card.review[b-25958607l5] {
    background: rgba(255, 247, 237, .52);
}

.candidate-chip-row[b-25958607l5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.candidate-card p[b-25958607l5] {
    margin: 0;
    color: var(--text-body);
    font-size: .84rem;
}

.promotion-empty-state[b-25958607l5],
.promotion-loading-state[b-25958607l5] {
    display: grid;
    place-items: center;
    gap: 10px;
    min-height: 330px;
    padding: 32px;
    color: var(--text-muted);
    text-align: center;
}

.promotion-empty-state > i[b-25958607l5] {
    width: 68px;
    height: 68px;
    color: var(--primary-dark);
    font-size: 1.55rem;
    background: var(--primary-soft);
    border-radius: 24px;
}

.promotion-empty-checks[b-25958607l5] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
}

.promotion-empty-checks span[b-25958607l5] {
    padding: 7px 10px;
    color: var(--text-body);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    font-size: .78rem;
    font-weight: 750;
}

.promotion-loading-state[b-25958607l5] {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: var(--surface-soft);
}

.promotion-loading-state[b-25958607l5]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .46), transparent);
    animation: promotionShimmer-b-25958607l5 1.5s infinite;
}

.promotion-loading-state .spinner-border[b-25958607l5] {
    color: var(--primary);
}

.promotion-soft-button[b-25958607l5],
.promotion-ghost-button[b-25958607l5],
.promotion-primary-button[b-25958607l5] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 16px;
    font-size: .9rem;
    font-weight: 850;
    line-height: 1;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}

.promotion-soft-button[b-25958607l5],
.promotion-ghost-button[b-25958607l5] {
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .18);
    background: rgba(224, 245, 255, .58);
}

.promotion-soft-button.small[b-25958607l5] {
    min-height: 38px;
    padding-inline: 13px;
    font-size: .8rem;
}

.promotion-ghost-button[b-25958607l5] {
    color: var(--text-body);
    border-color: var(--border-soft);
    background: rgba(255, 255, 255, .72);
}

.promotion-primary-button[b-25958607l5] {
    color: white;
    background: linear-gradient(135deg, var(--primary), var(--violet));
    box-shadow: 0 16px 28px rgba(14, 165, 233, .2);
}

.promotion-soft-button:hover[b-25958607l5],
.promotion-ghost-button:hover[b-25958607l5],
.promotion-primary-button:hover[b-25958607l5] {
    transform: translateY(-1px);
}

.promotion-soft-button:hover[b-25958607l5] {
    background: var(--primary-soft);
    box-shadow: 0 12px 22px rgba(14, 165, 233, .12);
}

.promotion-primary-button:hover[b-25958607l5] {
    box-shadow: 0 18px 34px rgba(139, 92, 246, .22);
}

.promotion-primary-button:disabled[b-25958607l5] {
    cursor: not-allowed;
    opacity: .52;
    transform: none;
    box-shadow: none;
}

.promotion-page[b-25958607l5]::-webkit-scrollbar,
.promotion-table-wrap[b-25958607l5]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.promotion-page[b-25958607l5]::-webkit-scrollbar-track,
.promotion-table-wrap[b-25958607l5]::-webkit-scrollbar-track {
    background: rgba(224, 245, 255, .38);
    border-radius: 999px;
}

.promotion-page[b-25958607l5]::-webkit-scrollbar-thumb,
.promotion-table-wrap[b-25958607l5]::-webkit-scrollbar-thumb {
    background: rgba(120, 170, 210, .42);
    border-radius: 999px;
    border: 2px solid rgba(238, 248, 255, .92);
}

@media (hover: hover) and (pointer: fine) {
    .promotion-kpi-card:hover[b-25958607l5],
    .candidate-card:hover[b-25958607l5],
    .promotion-setup-card:hover[b-25958607l5],
    .promotion-candidates-card:hover[b-25958607l5] {
        border-color: rgba(14, 165, 233, .24);
        box-shadow: 0 16px 34px rgba(23, 55, 90, .1);
    }
}

@media (max-width: 1200px) {
    .promotion-flow-grid[b-25958607l5] {
        grid-template-columns: 1fr;
    }

    .promotion-flow-arrow[b-25958607l5] {
        transform: rotate(90deg);
    }

    .promotion-kpi-grid[b-25958607l5],
    .promotion-review-summary[b-25958607l5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .promotion-page[b-25958607l5] {
        padding: 18px 16px 88px;
    }

    .promotion-shell[b-25958607l5] {
        padding: 16px;
        border-radius: 26px;
    }

    .promotion-hero[b-25958607l5],
    .promotion-setup-footer[b-25958607l5],
    .promotion-candidates-header[b-25958607l5] {
        align-items: stretch;
        flex-direction: column;
    }

    .promotion-hero-title[b-25958607l5] {
        align-items: flex-start;
        flex-direction: column;
    }

    .promotion-action-row[b-25958607l5],
    .promotion-candidate-actions[b-25958607l5] {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .promotion-soft-button[b-25958607l5],
    .promotion-ghost-button[b-25958607l5],
    .promotion-primary-button[b-25958607l5] {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .promotion-page[b-25958607l5] {
        padding: 12px 10px 82px;
    }

    .promotion-shell[b-25958607l5] {
        padding: 12px;
    }

    .promotion-hero[b-25958607l5],
    .promotion-setup-card[b-25958607l5],
    .promotion-candidates-card[b-25958607l5],
    .promotion-kpi-card[b-25958607l5] {
        border-radius: 22px;
        padding: 18px;
    }

    .promotion-kpi-grid[b-25958607l5],
    .promotion-review-summary[b-25958607l5] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .promotion-shell[b-25958607l5],
    .promotion-soft-button[b-25958607l5],
    .promotion-ghost-button[b-25958607l5],
    .promotion-primary-button[b-25958607l5] {
        animation: none !important;
        transition: none !important;
    }

    .promotion-soft-button:hover[b-25958607l5],
    .promotion-ghost-button:hover[b-25958607l5],
    .promotion-primary-button:hover[b-25958607l5] {
        transform: none !important;
    }
}
/* /Components/Pages/StudentTransferPage.razor.rz.scp.css */
@keyframes transferRise-b-nut712zfo3 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes transferShimmer-b-nut712zfo3 {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.transfer-workspace[b-nut712zfo3] {
    --page-bg: #eef8ff;
    --surface: rgba(255, 255, 255, .88);
    --surface-strong: rgba(255, 255, 255, .96);
    --surface-soft: rgba(248, 252, 255, .78);
    --border-soft: rgba(120, 170, 210, .22);
    --border-glass: rgba(255, 255, 255, .75);
    --text-main: #102033;
    --text-body: #4e6274;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --transfer: #f59e0b;
    --transfer-dark: #b45309;
    --transfer-soft: #fff7ed;
    --success: #10b981;
    --success-soft: #dcfce7;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --violet: #8b5cf6;
    --pink: #ec4899;
    --pink-soft: #fce7f3;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, .08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, .07);
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 92px;
    color: var(--text-body);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.transfer-workspace.mybody[b-nut712zfo3] {
    display: block;
    grid-template-rows: unset;
}

.transfer-workspace[b-nut712zfo3]::before,
.transfer-workspace[b-nut712zfo3]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.transfer-workspace[b-nut712zfo3]::before {
    width: 36vw;
    min-width: 330px;
    aspect-ratio: 1;
    left: 4%;
    top: 1%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.transfer-workspace[b-nut712zfo3]::after {
    width: 42vw;
    min-width: 340px;
    aspect-ratio: 1;
    right: -2%;
    bottom: -4%;
    background:
        radial-gradient(circle at 28% 24%, rgba(139, 92, 246, .15), transparent 58%),
        radial-gradient(circle at 74% 72%, rgba(236, 72, 153, .12), transparent 60%);
}

.transfer-workspace-header[b-nut712zfo3],
.transfer-scroll-area[b-nut712zfo3] {
    width: min(100%, 1600px);
    margin-inline: auto;
}

.transfer-workspace-header[b-nut712zfo3] {
    display: grid;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--border-glass);
    border-radius: 32px 32px 26px 26px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: transferRise-b-nut712zfo3 .32s ease-out both;
}

.transfer-scroll-area[b-nut712zfo3] {
    min-width: 0;
    margin-top: 18px;
}

.transfer-title-row[b-nut712zfo3],
.transfer-route-row[b-nut712zfo3],
.transfer-summary-card[b-nut712zfo3],
.transfer-student-panel[b-nut712zfo3],
.transfer-info-card[b-nut712zfo3],
.transfer-review-dialog[b-nut712zfo3] {
    border: 1px solid var(--border-glass);
    background: var(--surface);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.transfer-title-row[b-nut712zfo3] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: var(--radius-xl);
}

.transfer-title-row[b-nut712zfo3]::before {
    content: "";
    position: absolute;
    inset: 20px auto 20px 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--transfer), var(--primary));
}

.transfer-title-row[b-nut712zfo3]::after {
    content: "";
    position: absolute;
    right: 30px;
    bottom: -118px;
    width: 290px;
    height: 290px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(245, 158, 11, .13), transparent 68%);
    pointer-events: none;
}

.transfer-title-copy[b-nut712zfo3] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.transfer-hero-icon[b-nut712zfo3],
.summary-card-title i[b-nut712zfo3],
.transfer-section-title i[b-nut712zfo3],
.transfer-empty-state i[b-nut712zfo3],
.review-icon[b-nut712zfo3],
.student-avatar[b-nut712zfo3],
.review-avatar[b-nut712zfo3],
.transfer-icon-button[b-nut712zfo3] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.transfer-hero-icon[b-nut712zfo3] {
    width: 62px;
    height: 62px;
    color: white;
    font-size: 1.38rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--transfer), var(--primary));
    box-shadow: 0 18px 34px rgba(245, 158, 11, .18);
}

.transfer-title-row h1[b-nut712zfo3] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.75rem, 2.8vw, 2.15rem);
    font-weight: 850;
    letter-spacing: -.03em;
}

.transfer-title-row p[b-nut712zfo3],
.transfer-panel-header p[b-nut712zfo3],
.transfer-review-dialog p[b-nut712zfo3] {
    margin: 0;
    color: var(--text-body);
    font-size: .92rem;
}

.transfer-action-bar[b-nut712zfo3],
.student-panel-actions[b-nut712zfo3],
.review-actions[b-nut712zfo3] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.transfer-route-row[b-nut712zfo3] {
    display: grid;
    grid-template-columns: minmax(150px, .88fr) minmax(220px, 1.15fr) minmax(130px, .58fr) minmax(150px, .88fr) minmax(220px, 1.15fr) minmax(150px, .8fr);
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-lg);
}

.transfer-step-field[b-nut712zfo3] {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: rgba(255, 255, 255, .56);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.transfer-step-field.complete[b-nut712zfo3] {
    border-color: rgba(16, 185, 129, .2);
    background: rgba(220, 252, 231, .36);
}

.transfer-step-field.current[b-nut712zfo3] {
    border-color: rgba(245, 158, 11, .3);
    background: rgba(255, 247, 237, .56);
}

.transfer-step-field label[b-nut712zfo3] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--text-body);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.transfer-step-field label span[b-nut712zfo3] {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    color: white;
    font-size: .72rem;
    background: var(--transfer);
    border-radius: 999px;
}

.transfer-step-field.complete label span[b-nut712zfo3] {
    background: var(--success);
}

.transfer-input[b-nut712zfo3],
.transfer-review-step[b-nut712zfo3] {
    width: 100%;
    min-height: 46px;
    padding: 10px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    outline: none;
    background: rgba(255, 255, 255, .78);
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 750;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .64);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.transfer-input:focus[b-nut712zfo3],
.transfer-input:focus-visible[b-nut712zfo3],
.transfer-search-field:focus-within[b-nut712zfo3] {
    border-color: rgba(245, 158, 11, .68);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .12);
}

.transfer-select[b-nut712zfo3] {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 42px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 19px) 20px,
        calc(100% - 13px) 20px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.transfer-review-step[b-nut712zfo3] {
    display: grid;
    align-content: center;
    gap: 1px;
}

.transfer-review-step strong[b-nut712zfo3] {
    color: var(--text-main);
    font-size: .92rem;
    font-weight: 850;
}

.transfer-review-step small[b-nut712zfo3] {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 750;
}

.transfer-route-arrow[b-nut712zfo3] {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    color: var(--transfer);
    font-weight: 850;
    text-align: center;
}

.transfer-route-arrow i[b-nut712zfo3],
.summary-arrow[b-nut712zfo3] {
    display: inline-grid;
    place-items: center;
    color: white;
    background: linear-gradient(135deg, var(--transfer), var(--primary));
    box-shadow: 0 14px 28px rgba(245, 158, 11, .16);
}

.transfer-route-arrow i[b-nut712zfo3] {
    width: 48px;
    height: 48px;
    border-radius: 18px;
}

.transfer-route-arrow:not(.active) i[b-nut712zfo3] {
    color: var(--transfer-dark);
    background: var(--transfer-soft);
    box-shadow: none;
}

.transfer-route-arrow span[b-nut712zfo3] {
    color: var(--text-muted);
    font-size: .76rem;
}

.transfer-setup-alert[b-nut712zfo3],
.guard-message[b-nut712zfo3],
.capacity-warning[b-nut712zfo3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    font-weight: 760;
}

.transfer-setup-alert.warning[b-nut712zfo3],
.guard-message.warning[b-nut712zfo3],
.capacity-warning[b-nut712zfo3] {
    color: #875108;
    background: var(--warning-soft);
    border: 1px solid rgba(245, 158, 11, .24);
}

.transfer-setup-alert.danger[b-nut712zfo3],
.guard-message.danger[b-nut712zfo3] {
    color: #be123c;
    background: var(--danger-soft);
    border: 1px solid rgba(239, 71, 111, .22);
}

.transfer-setup-alert.success[b-nut712zfo3],
.guard-message.success[b-nut712zfo3] {
    color: #047857;
    background: var(--success-soft);
    border: 1px solid rgba(16, 185, 129, .2);
}

.transfer-workspace-grid[b-nut712zfo3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(290px, 360px);
    gap: 22px;
    min-width: 0;
    align-items: start;
}

.transfer-route-summary[b-nut712zfo3] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.transfer-summary-card[b-nut712zfo3],
.transfer-student-panel[b-nut712zfo3],
.transfer-info-card[b-nut712zfo3] {
    border-radius: var(--radius-xl);
}

.transfer-summary-card[b-nut712zfo3] {
    min-width: 0;
    padding: 22px;
}

.transfer-summary-card.warning[b-nut712zfo3] {
    border-color: rgba(245, 158, 11, .35);
    background:
        linear-gradient(180deg, rgba(255, 247, 237, .88), rgba(255, 255, 255, .84)),
        var(--surface);
}

.summary-card-title[b-nut712zfo3] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 850;
}

.summary-card-title i[b-nut712zfo3] {
    width: 38px;
    height: 38px;
    color: var(--transfer-dark);
    background: var(--transfer-soft);
    border-radius: 14px;
}

.transfer-summary-card h5[b-nut712zfo3] {
    margin: 16px 0 3px;
    color: var(--text-main);
    font-size: 1.18rem;
    font-weight: 850;
}

.transfer-summary-card p[b-nut712zfo3] {
    margin: 0;
    color: var(--text-body);
}

.summary-metrics[b-nut712zfo3] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.metric-card[b-nut712zfo3] {
    min-width: 0;
    padding: 13px;
    border: 1px solid var(--border-soft);
    border-radius: 18px;
    background: var(--surface-soft);
}

.metric-card span[b-nut712zfo3],
.student-card-context span[b-nut712zfo3],
.transfer-summary-mini dt[b-nut712zfo3] {
    display: block;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.metric-card strong[b-nut712zfo3],
.student-card-context strong[b-nut712zfo3],
.transfer-summary-mini dd[b-nut712zfo3] {
    display: block;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.metric-card strong[b-nut712zfo3] {
    margin-top: 4px;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: -.03em;
}

.metric-card small[b-nut712zfo3] {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-size: .76rem;
    font-weight: 700;
}

.metric-card.blue[b-nut712zfo3] {
    background: rgba(224, 245, 255, .54);
}

.metric-card.amber[b-nut712zfo3] {
    background: var(--transfer-soft);
}

.metric-card.green[b-nut712zfo3] {
    background: var(--success-soft);
}

.metric-card.danger[b-nut712zfo3] {
    background: var(--danger-soft);
}

.summary-arrow[b-nut712zfo3] {
    align-self: center;
    width: 58px;
    height: 58px;
    border-radius: 22px;
    font-size: 1.35rem;
}

.summary-arrow:not(.ready)[b-nut712zfo3] {
    color: var(--transfer-dark);
    background: var(--transfer-soft);
    box-shadow: none;
}

.transfer-student-panel[b-nut712zfo3] {
    min-width: 0;
    padding: 22px;
}

.transfer-panel-header[b-nut712zfo3] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: -22px -22px 16px;
    padding: 22px;
    border-bottom: 1px solid var(--border-soft);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.transfer-section-title[b-nut712zfo3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.transfer-section-title i[b-nut712zfo3] {
    width: 42px;
    height: 42px;
    color: var(--primary-dark);
    background: var(--primary-soft);
    border-radius: 16px;
}

.transfer-section-title strong[b-nut712zfo3] {
    display: block;
    color: var(--text-main);
    font-size: 1.08rem;
    font-weight: 850;
}

.transfer-section-title small[b-nut712zfo3] {
    color: var(--text-body);
    font-size: .86rem;
}

.transfer-selected-chip[b-nut712zfo3],
.transfer-list-count[b-nut712zfo3] {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 11px;
    color: var(--text-muted);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.transfer-selected-chip.active[b-nut712zfo3] {
    color: var(--transfer-dark);
    border-color: rgba(245, 158, 11, .24);
    background: var(--transfer-soft);
}

.transfer-list-tools[b-nut712zfo3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.transfer-search-field[b-nut712zfo3] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: rgba(255, 255, 255, .78);
    color: var(--text-muted);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.transfer-search-field input[b-nut712zfo3] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font-size: .9rem;
    font-weight: 700;
}

.transfer-search-field input[b-nut712zfo3]::placeholder {
    color: var(--text-muted);
}

.transfer-student-list[b-nut712zfo3] {
    display: grid;
    gap: 10px;
}

.transfer-student-card[b-nut712zfo3] {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) minmax(150px, .82fr) auto;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 22px;
    background: rgba(255, 255, 255, .78);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.transfer-student-card[b-nut712zfo3]::before {
    content: "";
    position: absolute;
    inset: 14px auto 14px 0;
    width: 3px;
    border-radius: 999px;
    background: transparent;
}

.transfer-student-card.selected[b-nut712zfo3] {
    border-color: rgba(245, 158, 11, .44);
    background:
        linear-gradient(90deg, rgba(255, 247, 237, .9), rgba(255, 255, 255, .82)),
        white;
    box-shadow: 0 14px 30px rgba(245, 158, 11, .1);
}

.transfer-student-card.selected[b-nut712zfo3]::before {
    background: linear-gradient(180deg, var(--transfer), var(--primary));
}

.student-select-box[b-nut712zfo3] {
    display: inline-grid;
    place-items: center;
    margin: 0;
}

.student-select-box input[b-nut712zfo3] {
    width: 20px;
    height: 20px;
    accent-color: var(--transfer);
}

.student-card-main[b-nut712zfo3] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.student-avatar[b-nut712zfo3],
.review-avatar[b-nut712zfo3] {
    width: 48px;
    height: 48px;
    color: white;
    font-weight: 900;
    background: linear-gradient(135deg, var(--transfer), var(--primary));
    border-radius: 17px;
}

.student-card-main h6[b-nut712zfo3] {
    margin: 0;
    color: var(--text-main);
    font-weight: 850;
}

.student-card-main p[b-nut712zfo3] {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-family: Consolas, "Courier New", monospace;
    font-size: .84rem;
}

.student-card-context[b-nut712zfo3] {
    min-width: 0;
    padding: 9px 11px;
    border: 1px solid var(--border-soft);
    border-radius: 15px;
    background: var(--surface-soft);
}

.student-card-actions[b-nut712zfo3] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.transfer-side-panel[b-nut712zfo3] {
    display: grid;
    align-content: start;
    gap: 18px;
    min-width: 0;
}

.transfer-info-card[b-nut712zfo3] {
    padding: 18px;
}

.guard-message[b-nut712zfo3] {
    margin-top: 14px;
}

.guard-checklist[b-nut712zfo3] {
    display: grid;
    gap: 8px;
    margin-top: 14px;
}

.guard-check-item[b-nut712zfo3] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    color: var(--text-muted);
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: rgba(248, 252, 255, .72);
    font-size: .83rem;
    font-weight: 750;
}

.guard-check-item.ready[b-nut712zfo3] {
    color: #047857;
    border-color: rgba(16, 185, 129, .18);
    background: var(--success-soft);
}

.guard-check-item.warning[b-nut712zfo3] {
    color: #875108;
    border-color: rgba(245, 158, 11, .22);
    background: var(--warning-soft);
}

.transfer-summary-mini dl[b-nut712zfo3] {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
}

.transfer-summary-mini div[b-nut712zfo3] {
    display: grid;
    gap: 2px;
    padding: 10px;
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    background: var(--surface-soft);
}

.transfer-summary-mini dd[b-nut712zfo3] {
    margin: 0;
    font-size: .88rem;
    font-weight: 850;
}

.recent-empty[b-nut712zfo3] {
    margin-top: 14px;
    padding: 16px;
    color: var(--text-muted);
    text-align: center;
    background: var(--surface-soft);
    border: 1px dashed rgba(120, 170, 210, .34);
    border-radius: 16px;
    font-weight: 750;
}

.recent-transfer-list[b-nut712zfo3] {
    position: relative;
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.recent-transfer-row[b-nut712zfo3] {
    position: relative;
    display: grid;
    gap: 2px;
    padding: 12px 12px 12px 32px;
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
}

.timeline-dot[b-nut712zfo3] {
    position: absolute;
    left: 12px;
    top: 17px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--transfer);
    box-shadow: 0 0 0 4px rgba(245, 158, 11, .12);
}

.recent-transfer-row strong[b-nut712zfo3] {
    color: var(--text-main);
    font-weight: 850;
}

.recent-transfer-row span[b-nut712zfo3],
.recent-transfer-row small[b-nut712zfo3] {
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 700;
}

.transfer-empty-state[b-nut712zfo3],
.transfer-loading-state[b-nut712zfo3] {
    display: grid;
    place-items: center;
    gap: 9px;
    min-height: 330px;
    padding: 28px;
    color: var(--text-muted);
    text-align: center;
}

.transfer-empty-state i[b-nut712zfo3] {
    width: 66px;
    height: 66px;
    color: var(--transfer-dark);
    font-size: 1.55rem;
    background: var(--transfer-soft);
    border-radius: 24px;
}

.transfer-empty-state strong[b-nut712zfo3],
.transfer-loading-state span[b-nut712zfo3] {
    color: var(--text-main);
    font-weight: 850;
}

.transfer-empty-state span[b-nut712zfo3] {
    font-size: .86rem;
}

.transfer-loading-state[b-nut712zfo3] {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-xl);
    background: var(--surface);
    box-shadow: var(--shadow-card);
}

.transfer-loading-state[b-nut712zfo3]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .46), transparent);
    animation: transferShimmer-b-nut712zfo3 1.5s infinite;
}

.transfer-review-backdrop[b-nut712zfo3] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(15, 23, 42, .28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.transfer-review-dialog[b-nut712zfo3] {
    width: min(680px, 100%);
    padding: 24px;
    border-radius: 26px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(248, 252, 255, .9)),
        white;
}

.review-icon[b-nut712zfo3] {
    width: 54px;
    height: 54px;
    color: var(--transfer-dark);
    background: var(--transfer-soft);
    border-radius: 18px;
}

.transfer-review-dialog h5[b-nut712zfo3] {
    margin: 16px 0 4px;
    color: var(--text-main);
    font-weight: 850;
}

.review-route[b-nut712zfo3] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin: 16px 0;
}

.review-route div[b-nut712zfo3] {
    min-width: 0;
    padding: 13px;
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
}

.review-route span[b-nut712zfo3] {
    display: block;
    color: var(--text-muted);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.review-route strong[b-nut712zfo3] {
    display: block;
    color: var(--text-main);
    overflow-wrap: anywhere;
}

.review-route > i[b-nut712zfo3] {
    color: var(--transfer);
}

.review-student-list[b-nut712zfo3] {
    display: grid;
    gap: 9px;
    max-height: 270px;
    margin-top: 14px;
    overflow-y: auto;
}

.review-student-list div[b-nut712zfo3] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: var(--surface-soft);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
}

.review-avatar[b-nut712zfo3] {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    font-size: .82rem;
}

.review-student-list strong[b-nut712zfo3] {
    color: var(--text-main);
    font-weight: 850;
}

.review-student-list span:not(.review-avatar)[b-nut712zfo3] {
    color: var(--text-muted);
    font-family: Consolas, "Courier New", monospace;
}

.review-actions[b-nut712zfo3] {
    margin-top: 18px;
}

.transfer-soft-button[b-nut712zfo3],
.transfer-secondary-button[b-nut712zfo3],
.transfer-primary-button[b-nut712zfo3],
.transfer-mini-primary[b-nut712zfo3],
.transfer-icon-button[b-nut712zfo3],
.transfer-ghost-button[b-nut712zfo3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 0;
    border-radius: 16px;
    font-size: .88rem;
    font-weight: 850;
    line-height: 1;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}

.transfer-soft-button[b-nut712zfo3],
.transfer-secondary-button[b-nut712zfo3],
.transfer-ghost-button[b-nut712zfo3] {
    color: var(--transfer-dark);
    border: 1px solid rgba(245, 158, 11, .2);
    background: var(--transfer-soft);
}

.transfer-secondary-button[b-nut712zfo3] {
    min-height: 38px;
    padding-inline: 13px;
}

.transfer-ghost-button[b-nut712zfo3] {
    color: var(--text-body);
    border-color: var(--border-soft);
    background: rgba(255, 255, 255, .72);
}

.transfer-primary-button[b-nut712zfo3],
.transfer-mini-primary[b-nut712zfo3] {
    color: #2f1b00;
    background: linear-gradient(135deg, #ffe08a, var(--transfer));
    box-shadow: 0 16px 28px rgba(245, 158, 11, .18);
}

.transfer-primary-button[b-nut712zfo3] {
    min-height: 42px;
}

.transfer-mini-primary[b-nut712zfo3] {
    min-height: 36px;
    padding-inline: 12px;
    font-size: .8rem;
}

.transfer-icon-button[b-nut712zfo3] {
    width: 38px;
    height: 38px;
    min-height: 38px;
    padding: 0;
    color: var(--primary-dark);
    border: 1px solid rgba(14, 165, 233, .18);
    background: var(--primary-soft);
}

.transfer-soft-button:hover[b-nut712zfo3],
.transfer-secondary-button:hover[b-nut712zfo3],
.transfer-primary-button:hover[b-nut712zfo3],
.transfer-mini-primary:hover[b-nut712zfo3],
.transfer-icon-button:hover[b-nut712zfo3],
.transfer-ghost-button:hover[b-nut712zfo3] {
    transform: translateY(-1px);
}

.transfer-primary-button:hover[b-nut712zfo3],
.transfer-mini-primary:hover[b-nut712zfo3] {
    box-shadow: 0 18px 34px rgba(245, 158, 11, .24);
}

.transfer-primary-button:disabled[b-nut712zfo3],
.transfer-secondary-button:disabled[b-nut712zfo3],
.transfer-mini-primary:disabled[b-nut712zfo3] {
    cursor: not-allowed;
    opacity: .52;
    transform: none;
    box-shadow: none;
}

.transfer-workspace[b-nut712zfo3]::-webkit-scrollbar,
.review-student-list[b-nut712zfo3]::-webkit-scrollbar {
    width: 10px;
}

.transfer-workspace[b-nut712zfo3]::-webkit-scrollbar-track,
.review-student-list[b-nut712zfo3]::-webkit-scrollbar-track {
    background: rgba(255, 247, 237, .38);
    border-radius: 999px;
}

.transfer-workspace[b-nut712zfo3]::-webkit-scrollbar-thumb,
.review-student-list[b-nut712zfo3]::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, .35);
    border-radius: 999px;
    border: 2px solid rgba(238, 248, 255, .92);
}

@media (hover: hover) and (pointer: fine) {
    .transfer-student-card:hover[b-nut712zfo3],
    .transfer-summary-card:hover[b-nut712zfo3],
    .transfer-student-panel:hover[b-nut712zfo3],
    .transfer-info-card:hover[b-nut712zfo3] {
        border-color: rgba(245, 158, 11, .28);
        box-shadow: 0 16px 34px rgba(23, 55, 90, .1);
    }

    .transfer-student-card:hover[b-nut712zfo3] {
        transform: translateY(-1px);
    }
}

@media (max-width: 1399.98px) {
    .transfer-route-row[b-nut712zfo3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .transfer-route-arrow[b-nut712zfo3] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 1199.98px) {
    .transfer-workspace-grid[b-nut712zfo3] {
        grid-template-columns: 1fr;
    }

    .transfer-route-summary[b-nut712zfo3] {
        grid-template-columns: 1fr;
    }

    .summary-arrow[b-nut712zfo3] {
        justify-self: center;
        transform: rotate(90deg);
    }
}

@media (max-width: 820px) {
    .transfer-workspace[b-nut712zfo3] {
        padding: 18px 16px 88px;
    }

    .transfer-workspace-header[b-nut712zfo3] {
        padding: 16px;
        border-radius: 26px;
    }

    .transfer-title-row[b-nut712zfo3],
    .transfer-panel-header[b-nut712zfo3] {
        align-items: stretch;
        flex-direction: column;
    }

    .transfer-title-copy[b-nut712zfo3] {
        align-items: flex-start;
        flex-direction: column;
    }

    .transfer-action-bar[b-nut712zfo3],
    .student-panel-actions[b-nut712zfo3],
    .review-actions[b-nut712zfo3] {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .transfer-soft-button[b-nut712zfo3],
    .transfer-secondary-button[b-nut712zfo3],
    .transfer-primary-button[b-nut712zfo3],
    .transfer-ghost-button[b-nut712zfo3] {
        width: 100%;
    }

    .transfer-route-row[b-nut712zfo3],
    .summary-metrics[b-nut712zfo3],
    .transfer-list-tools[b-nut712zfo3],
    .review-route[b-nut712zfo3] {
        grid-template-columns: 1fr;
    }

    .transfer-student-card[b-nut712zfo3] {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: flex-start;
    }

    .student-card-context[b-nut712zfo3],
    .student-card-actions[b-nut712zfo3] {
        grid-column: 2;
    }

    .student-card-actions[b-nut712zfo3] {
        justify-content: stretch;
    }

    .student-card-actions .transfer-mini-primary[b-nut712zfo3] {
        flex: 1 1 auto;
    }

    .review-route > i[b-nut712zfo3] {
        justify-self: center;
        transform: rotate(90deg);
    }

    .review-student-list div[b-nut712zfo3] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .review-student-list span:not(.review-avatar)[b-nut712zfo3] {
        grid-column: 2;
    }
}

@media (max-width: 560px) {
    .transfer-workspace[b-nut712zfo3] {
        padding: 12px 10px 82px;
    }

    .transfer-title-row[b-nut712zfo3],
    .transfer-route-row[b-nut712zfo3],
    .transfer-summary-card[b-nut712zfo3],
    .transfer-student-panel[b-nut712zfo3],
    .transfer-info-card[b-nut712zfo3],
    .transfer-review-dialog[b-nut712zfo3] {
        border-radius: 22px;
    }

    .transfer-panel-header[b-nut712zfo3] {
        border-radius: 22px 22px 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .transfer-workspace-header[b-nut712zfo3],
    .transfer-student-card[b-nut712zfo3],
    .transfer-soft-button[b-nut712zfo3],
    .transfer-secondary-button[b-nut712zfo3],
    .transfer-primary-button[b-nut712zfo3],
    .transfer-mini-primary[b-nut712zfo3],
    .transfer-icon-button[b-nut712zfo3],
    .transfer-ghost-button[b-nut712zfo3] {
        animation: none !important;
        transition: none !important;
    }

    .transfer-student-card:hover[b-nut712zfo3],
    .transfer-soft-button:hover[b-nut712zfo3],
    .transfer-secondary-button:hover[b-nut712zfo3],
    .transfer-primary-button:hover[b-nut712zfo3],
    .transfer-mini-primary:hover[b-nut712zfo3],
    .transfer-icon-button:hover[b-nut712zfo3],
    .transfer-ghost-button:hover[b-nut712zfo3] {
        transform: none !important;
    }
}
/* /Components/Pages/SubjectsPage.razor.rz.scp.css */
@keyframes subjectsRise-b-0vi3tr2zjn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes subjectsPulse-b-0vi3tr2zjn {
    0%, 100% {
        opacity: .46;
    }

    50% {
        opacity: 1;
    }
}

.subjects-page[b-0vi3tr2zjn] {
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 36px;
    color: var(--text-body, #4e6274);
    font-family: "Noto Sans Myanmar", "Pyidaungsu", "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    line-height: 1.55;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.subjects-page[b-0vi3tr2zjn]::before,
.subjects-page[b-0vi3tr2zjn]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.subjects-page[b-0vi3tr2zjn]::before {
    width: 34vw;
    min-width: 320px;
    aspect-ratio: 1;
    left: 5%;
    top: 2%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.subjects-page[b-0vi3tr2zjn]::after {
    width: 38vw;
    min-width: 320px;
    aspect-ratio: 1;
    right: 0;
    bottom: -2%;
    background:
        radial-gradient(circle at 36% 34%, rgba(139, 92, 246, .14), transparent 58%),
        radial-gradient(circle at 72% 70%, rgba(236, 72, 153, .12), transparent 58%);
}

.subjects-shell[b-0vi3tr2zjn] {
    display: grid;
    gap: 18px;
    width: min(100%, 1360px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft, 0 18px 45px rgba(23, 55, 90, .08));
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: subjectsRise-b-0vi3tr2zjn .32s ease-out both;
}

.subjects-hero[b-0vi3tr2zjn],
.subjects-summary-card[b-0vi3tr2zjn],
.subjects-map-card[b-0vi3tr2zjn],
.subjects-toolbar-card[b-0vi3tr2zjn],
.subjects-list-card[b-0vi3tr2zjn] {
    border: 1px solid rgba(255, 255, 255, .76);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-card, 0 10px 26px rgba(23, 55, 90, .07));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.subjects-hero[b-0vi3tr2zjn] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: 30px;
}

.subjects-hero[b-0vi3tr2zjn]::after {
    content: "";
    position: absolute;
    right: 36px;
    bottom: -118px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(139, 92, 246, .13), transparent 68%);
    pointer-events: none;
}

.subjects-hero-title[b-0vi3tr2zjn] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.subjects-hero-icon[b-0vi3tr2zjn],
.summary-icon[b-0vi3tr2zjn],
.subjects-modal-icon[b-0vi3tr2zjn],
.subject-map-icon[b-0vi3tr2zjn] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.subjects-hero-icon[b-0vi3tr2zjn] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--violet, #8b5cf6));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.subjects-hero h1[b-0vi3tr2zjn] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.18;
}

.subjects-hero p[b-0vi3tr2zjn] {
    margin: 8px 0 0;
    max-width: 760px;
    color: var(--text-muted, #8a9aaa);
    font-size: .95rem;
    line-height: 1.55;
}

.subjects-hero-meta[b-0vi3tr2zjn] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.subjects-hero-meta span[b-0vi3tr2zjn],
.subjects-count-pill[b-0vi3tr2zjn] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    color: var(--primary-dark, #0369a1);
    font-size: .76rem;
    font-weight: 850;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 999px;
    background: rgba(224, 245, 255, .78);
}

.subjects-primary-button[b-0vi3tr2zjn],
.subjects-soft-button[b-0vi3tr2zjn],
.subjects-danger-button[b-0vi3tr2zjn] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    font-size: .88rem;
    font-weight: 850;
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.subjects-primary-button[b-0vi3tr2zjn] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--violet, #8b5cf6)) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .2);
}

.subjects-soft-button[b-0vi3tr2zjn] {
    color: var(--text-main, #102033) !important;
    border: 1px solid rgba(120, 170, 210, .2) !important;
    background: rgba(255, 255, 255, .7) !important;
    box-shadow: none !important;
}

.subjects-danger-button[b-0vi3tr2zjn] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .62) !important;
    background: linear-gradient(135deg, var(--danger, #ef476f), var(--pink, #ec4899)) !important;
    box-shadow: 0 16px 30px rgba(239, 71, 111, .18);
}

.subjects-summary-grid[b-0vi3tr2zjn] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.subjects-summary-card[b-0vi3tr2zjn] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    min-height: 128px;
    padding: 18px;
    border-radius: 24px;
}

.summary-icon[b-0vi3tr2zjn] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    color: var(--primary-dark, #0369a1);
    border-radius: 17px;
    background: rgba(14, 165, 233, .1);
}

.subjects-summary-card.prefix .summary-icon[b-0vi3tr2zjn] {
    color: #6d28d9;
    background: rgba(139, 92, 246, .12);
}

.subjects-summary-card.core .summary-icon[b-0vi3tr2zjn] {
    color: #047857;
    background: rgba(16, 185, 129, .12);
}

.subjects-summary-card.usage .summary-icon[b-0vi3tr2zjn] {
    color: #be185d;
    background: rgba(236, 72, 153, .11);
}

.summary-label[b-0vi3tr2zjn] {
    align-self: end;
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.subjects-summary-card strong[b-0vi3tr2zjn] {
    min-width: 0;
    overflow: hidden;
    color: var(--text-main, #102033);
    font-size: clamp(1.14rem, 1.7vw, 1.72rem);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.14;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subjects-summary-card small[b-0vi3tr2zjn] {
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
    line-height: 1.35;
}

.subjects-map-card[b-0vi3tr2zjn],
.subjects-toolbar-card[b-0vi3tr2zjn],
.subjects-list-card[b-0vi3tr2zjn] {
    border-radius: 28px;
}

.subjects-map-card[b-0vi3tr2zjn],
.subjects-list-card[b-0vi3tr2zjn] {
    padding: 22px;
}

.subjects-card-header[b-0vi3tr2zjn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.subjects-card-header.compact[b-0vi3tr2zjn] {
    margin-bottom: 16px;
}

.section-kicker[b-0vi3tr2zjn] {
    display: block;
    margin-bottom: 5px;
    color: var(--primary-dark, #0369a1);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.subjects-card-header h2[b-0vi3tr2zjn] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.12rem, 1.7vw, 1.34rem);
    font-weight: 900;
    letter-spacing: -.025em;
}

.subjects-card-header p[b-0vi3tr2zjn] {
    margin: 6px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .88rem;
    line-height: 1.5;
}

.subjects-map-grid[b-0vi3tr2zjn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.subject-map-item[b-0vi3tr2zjn] {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
    min-height: 132px;
    padding: 16px;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 22px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(248, 252, 255, .7)),
        rgba(255, 255, 255, .8);
    box-shadow: 0 10px 22px rgba(23, 55, 90, .055);
}

.subject-map-item[b-0vi3tr2zjn]::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -32px;
    width: 92px;
    height: 92px;
    border-radius: 999px;
    background: rgba(14, 165, 233, .1);
}

.subject-map-item.math[b-0vi3tr2zjn]::after {
    background: rgba(139, 92, 246, .12);
}

.subject-map-item.science[b-0vi3tr2zjn]::after {
    background: rgba(16, 185, 129, .12);
}

.subject-map-item.art[b-0vi3tr2zjn]::after {
    background: rgba(236, 72, 153, .12);
}

.subject-map-item.history[b-0vi3tr2zjn]::after {
    background: rgba(245, 158, 11, .14);
}

.subject-map-icon[b-0vi3tr2zjn] {
    position: relative;
    z-index: 1;
    width: 48px;
    height: 48px;
    color: var(--primary-dark, #0369a1);
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 18px;
    background: rgba(224, 245, 255, .72);
}

.subject-map-item.math .subject-map-icon[b-0vi3tr2zjn],
.subject-avatar.math[b-0vi3tr2zjn] {
    color: #6d28d9;
    border-color: rgba(139, 92, 246, .15);
    background: rgba(237, 233, 254, .72);
}

.subject-map-item.science .subject-map-icon[b-0vi3tr2zjn],
.subject-avatar.science[b-0vi3tr2zjn] {
    color: #047857;
    border-color: rgba(16, 185, 129, .15);
    background: rgba(220, 252, 231, .72);
}

.subject-map-item.art .subject-map-icon[b-0vi3tr2zjn],
.subject-avatar.art[b-0vi3tr2zjn] {
    color: #be185d;
    border-color: rgba(236, 72, 153, .15);
    background: rgba(252, 231, 243, .72);
}

.subject-map-item.history .subject-map-icon[b-0vi3tr2zjn],
.subject-avatar.history[b-0vi3tr2zjn] {
    color: #b45309;
    border-color: rgba(245, 158, 11, .15);
    background: rgba(255, 247, 237, .84);
}

.subject-map-item strong[b-0vi3tr2zjn] {
    position: relative;
    z-index: 1;
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--text-main, #102033);
    font-size: 1.02rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subject-map-item small[b-0vi3tr2zjn] {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    overflow: hidden;
    margin-top: 8px;
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.subject-code-chip[b-0vi3tr2zjn],
.subject-code-pill[b-0vi3tr2zjn] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    padding: 7px 11px;
    color: var(--primary-dark, #0369a1);
    font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
    font-size: .74rem;
    font-weight: 900;
    border: 1px solid rgba(14, 165, 233, .14);
    border-radius: 999px;
    background: rgba(224, 245, 255, .78);
    white-space: nowrap;
}

.subject-code-chip[b-0vi3tr2zjn] {
    margin-top: 7px;
}

.subjects-toolbar-card[b-0vi3tr2zjn] {
    display: grid;
    grid-template-columns: minmax(260px, 1.4fr) minmax(190px, .75fr) auto auto;
    align-items: end;
    gap: 13px;
    padding: 18px;
}

.subjects-field[b-0vi3tr2zjn] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.subjects-field > span[b-0vi3tr2zjn],
.subjects-field > label[b-0vi3tr2zjn] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .02em;
}

.subjects-field em[b-0vi3tr2zjn] {
    color: var(--danger, #ef476f);
    font-style: normal;
}

.subjects-input[b-0vi3tr2zjn] {
    min-height: 46px;
    padding: 10px 14px;
    color: var(--text-main, #102033) !important;
    font-size: .9rem;
    font-weight: 750;
    border: 1px solid rgba(120, 170, 210, .22) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 8px 18px rgba(23, 55, 90, .04) !important;
}

.subjects-input:focus[b-0vi3tr2zjn] {
    border-color: rgba(14, 165, 233, .72) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12), 0 10px 22px rgba(14, 165, 233, .07) !important;
}

.subjects-search-wrap[b-0vi3tr2zjn],
.subjects-select-wrap[b-0vi3tr2zjn] {
    position: relative;
}

.subjects-search-wrap > i[b-0vi3tr2zjn] {
    position: absolute;
    z-index: 1;
    left: 15px;
    top: 50%;
    color: var(--primary, #0ea5e9);
    transform: translateY(-50%);
}

.subjects-search-wrap .subjects-input[b-0vi3tr2zjn] {
    padding-left: 42px;
}

.subjects-select[b-0vi3tr2zjn] {
    padding-right: 42px;
    appearance: none;
}

.subjects-select-wrap > i[b-0vi3tr2zjn] {
    position: absolute;
    right: 15px;
    top: 50%;
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.subjects-toolbar-count[b-0vi3tr2zjn] {
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 46px;
    min-width: 112px;
    padding: 6px 14px;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 16px;
    background: rgba(224, 245, 255, .64);
}

.subjects-toolbar-count strong[b-0vi3tr2zjn] {
    color: var(--text-main, #102033);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.subjects-toolbar-count span[b-0vi3tr2zjn] {
    color: var(--text-muted, #8a9aaa);
    font-size: .69rem;
    font-weight: 800;
}

.subjects-table-wrap[b-0vi3tr2zjn] {
    overflow: auto;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
}

.subjects-table-wrap[b-0vi3tr2zjn]::-webkit-scrollbar,
.subjects-page[b-0vi3tr2zjn]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.subjects-table-wrap[b-0vi3tr2zjn]::-webkit-scrollbar-track,
.subjects-page[b-0vi3tr2zjn]::-webkit-scrollbar-track {
    background: rgba(224, 245, 255, .44);
    border-radius: 999px;
}

.subjects-table-wrap[b-0vi3tr2zjn]::-webkit-scrollbar-thumb,
.subjects-page[b-0vi3tr2zjn]::-webkit-scrollbar-thumb {
    background: rgba(14, 165, 233, .34);
    border-radius: 999px;
}

.subjects-table[b-0vi3tr2zjn] {
    min-width: 880px;
    color: var(--text-body, #4e6274);
    border-collapse: separate;
    border-spacing: 0;
}

.subjects-table thead[b-0vi3tr2zjn] {
    background: rgba(224, 245, 255, .56);
}

.subjects-table th[b-0vi3tr2zjn] {
    padding: 15px 18px;
    color: var(--text-muted, #8a9aaa);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    border: 0;
}

.subjects-table td[b-0vi3tr2zjn] {
    padding: 15px 18px;
    vertical-align: middle;
    border-top: 1px solid rgba(120, 170, 210, .13);
}

.subjects-table tbody tr[b-0vi3tr2zjn] {
    transition: background .18s ease, transform .18s ease;
}

.subject-name-cell[b-0vi3tr2zjn] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.subject-avatar[b-0vi3tr2zjn] {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--primary-dark, #0369a1);
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 16px;
    background: rgba(224, 245, 255, .68);
}

.subject-name-cell strong[b-0vi3tr2zjn] {
    display: block;
    color: var(--text-main, #102033);
    font-size: .98rem;
    font-weight: 900;
}

.subject-name-cell small[b-0vi3tr2zjn] {
    display: block;
    margin-top: 3px;
    color: var(--text-muted, #8a9aaa);
    font-size: .74rem;
    font-weight: 750;
}

.description-text[b-0vi3tr2zjn] {
    display: -webkit-box;
    overflow: hidden;
    max-width: 520px;
    color: var(--text-body, #4e6274);
    font-size: .86rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.description-empty[b-0vi3tr2zjn] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 6px 10px;
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
    font-weight: 800;
    border: 1px dashed rgba(120, 170, 210, .24);
    border-radius: 999px;
    background: rgba(248, 252, 255, .72);
}

.subjects-actions[b-0vi3tr2zjn] {
    display: inline-flex;
    justify-content: flex-end;
    gap: 8px;
}

.subjects-icon-button[b-0vi3tr2zjn] {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 14px;
    background: rgba(255, 255, 255, .78);
    transition: transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

.subjects-icon-button.edit[b-0vi3tr2zjn] {
    color: var(--primary-dark, #0369a1);
}

.subjects-icon-button.delete[b-0vi3tr2zjn] {
    color: var(--danger, #ef476f);
    border-color: rgba(239, 71, 111, .16);
    background: rgba(255, 228, 236, .58);
}

.subjects-empty-state[b-0vi3tr2zjn],
.subjects-loading-state[b-0vi3tr2zjn],
.subjects-empty-inline[b-0vi3tr2zjn] {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 260px;
    padding: 36px;
    text-align: center;
    border: 1px dashed rgba(120, 170, 210, .25);
    border-radius: 24px;
    background: rgba(248, 252, 255, .62);
}

.subjects-empty-inline[b-0vi3tr2zjn] {
    min-height: 112px;
    grid-template-columns: auto auto;
    justify-content: center;
}

.subjects-empty-state > span[b-0vi3tr2zjn],
.subjects-empty-inline > i[b-0vi3tr2zjn] {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: var(--primary-dark, #0369a1);
    border-radius: 22px;
    background: rgba(224, 245, 255, .72);
}

.subjects-empty-state h3[b-0vi3tr2zjn] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: 1.12rem;
    font-weight: 900;
}

.subjects-empty-state p[b-0vi3tr2zjn],
.subjects-loading-state span[b-0vi3tr2zjn],
.subjects-empty-inline span[b-0vi3tr2zjn] {
    margin: 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .9rem;
}

.subjects-modal-backdrop[b-0vi3tr2zjn] {
    background: rgba(11, 38, 58, .18) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.subjects-modal-backdrop.danger[b-0vi3tr2zjn] {
    background: rgba(54, 13, 28, .2) !important;
}

.subjects-modal-shell[b-0vi3tr2zjn] {
    display: grid !important;
    place-items: center;
    padding: 18px;
}

.subjects-modal-dialog[b-0vi3tr2zjn] {
    width: min(100%, 580px);
    margin: 0;
}

.subjects-modal-dialog.delete-dialog[b-0vi3tr2zjn] {
    width: min(100%, 500px);
}

.subjects-modal-content[b-0vi3tr2zjn] {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 28px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 28px 70px rgba(11, 38, 58, .18);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.subjects-modal-header[b-0vi3tr2zjn] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(120, 170, 210, .14);
    background: linear-gradient(135deg, rgba(224, 245, 255, .8), rgba(255, 255, 255, .72));
}

.subjects-modal-header.danger[b-0vi3tr2zjn] {
    background: linear-gradient(135deg, rgba(255, 228, 236, .82), rgba(255, 255, 255, .75));
}

.subjects-modal-icon[b-0vi3tr2zjn] {
    width: 46px;
    height: 46px;
    color: white;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--violet, #8b5cf6));
}

.subjects-modal-icon.danger[b-0vi3tr2zjn] {
    background: linear-gradient(135deg, var(--danger, #ef476f), var(--pink, #ec4899));
}

.subjects-modal-header h5[b-0vi3tr2zjn] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: 1.12rem;
    font-weight: 900;
}

.subjects-modal-header p[b-0vi3tr2zjn] {
    margin: 6px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .88rem;
    line-height: 1.45;
}

.subjects-modal-body[b-0vi3tr2zjn] {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.subjects-modal-grid[b-0vi3tr2zjn] {
    display: grid;
    grid-template-columns: minmax(150px, .48fr) minmax(0, 1fr);
    gap: 14px;
}

.subject-code-input[b-0vi3tr2zjn] {
    font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
    font-weight: 900;
    text-transform: uppercase;
}

.subject-name-input[b-0vi3tr2zjn] {
    font-weight: 900;
}

.subjects-textarea[b-0vi3tr2zjn] {
    min-height: 96px;
    resize: vertical;
}

.subjects-helper-card[b-0vi3tr2zjn],
.delete-summary-card[b-0vi3tr2zjn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    color: var(--text-body, #4e6274);
    font-size: .84rem;
    border: 1px solid rgba(14, 165, 233, .12);
    border-radius: 18px;
    background: rgba(224, 245, 255, .42);
}

.subjects-helper-card i[b-0vi3tr2zjn] {
    color: var(--primary-dark, #0369a1);
}

.delete-summary-card[b-0vi3tr2zjn] {
    background: rgba(255, 228, 236, .5);
    border-color: rgba(239, 71, 111, .16);
}

.delete-summary-card > span[b-0vi3tr2zjn] {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--danger, #ef476f);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
}

.delete-summary-card strong[b-0vi3tr2zjn] {
    display: block;
    color: var(--text-main, #102033);
    font-weight: 900;
}

.delete-summary-card small[b-0vi3tr2zjn] {
    color: var(--text-muted, #8a9aaa);
    font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
    font-weight: 850;
}

.subjects-modal-footer[b-0vi3tr2zjn] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 22px 22px;
    border-top: 1px solid rgba(120, 170, 210, .14);
    background: rgba(248, 252, 255, .7);
}

.skeleton[b-0vi3tr2zjn] {
    position: relative;
    overflow: hidden;
}

.skeleton[b-0vi3tr2zjn]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent);
    animation: subjectsPulse-b-0vi3tr2zjn 1.3s ease-in-out infinite;
}

.subjects-summary-card.skeleton span[b-0vi3tr2zjn],
.subjects-summary-card.skeleton strong[b-0vi3tr2zjn],
.subjects-summary-card.skeleton small[b-0vi3tr2zjn] {
    display: block;
    border-radius: 999px;
    background: rgba(120, 170, 210, .14);
}

.subjects-summary-card.skeleton span[b-0vi3tr2zjn] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    border-radius: 17px;
}

.subjects-summary-card.skeleton strong[b-0vi3tr2zjn] {
    width: 70%;
    height: 24px;
}

.subjects-summary-card.skeleton small[b-0vi3tr2zjn] {
    width: 86%;
    height: 12px;
}

.subject-map-item.skeleton[b-0vi3tr2zjn] {
    min-height: 132px;
    background: rgba(255, 255, 255, .62);
}

@media (hover: hover) and (pointer: fine) {
    .subjects-primary-button:hover[b-0vi3tr2zjn],
    .subjects-soft-button:hover[b-0vi3tr2zjn],
    .subjects-danger-button:hover[b-0vi3tr2zjn],
    .subjects-icon-button:hover[b-0vi3tr2zjn],
    .subject-map-item:hover[b-0vi3tr2zjn] {
        transform: translateY(-1px);
    }

    .subjects-primary-button:hover[b-0vi3tr2zjn] {
        box-shadow: 0 20px 36px rgba(14, 165, 233, .25);
    }

    .subjects-table tbody tr:hover[b-0vi3tr2zjn] {
        background: rgba(14, 165, 233, .04);
    }

    .subjects-icon-button.edit:hover[b-0vi3tr2zjn] {
        color: white;
        background: var(--primary, #0ea5e9);
        box-shadow: 0 12px 24px rgba(14, 165, 233, .22);
    }

    .subjects-icon-button.delete:hover[b-0vi3tr2zjn] {
        color: white;
        background: var(--danger, #ef476f);
        box-shadow: 0 12px 24px rgba(239, 71, 111, .18);
    }
}

.subjects-primary-button:focus-visible[b-0vi3tr2zjn],
.subjects-soft-button:focus-visible[b-0vi3tr2zjn],
.subjects-danger-button:focus-visible[b-0vi3tr2zjn],
.subjects-icon-button:focus-visible[b-0vi3tr2zjn],
.subjects-input:focus-visible[b-0vi3tr2zjn] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 2px;
}

@media (max-width: 1199.98px) {
    .subjects-summary-grid[b-0vi3tr2zjn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .subjects-toolbar-card[b-0vi3tr2zjn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .subjects-toolbar-count[b-0vi3tr2zjn],
    .subjects-soft-button[b-0vi3tr2zjn] {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .subjects-page[b-0vi3tr2zjn] {
        padding: 14px;
    }

    .subjects-shell[b-0vi3tr2zjn] {
        gap: 14px;
        padding: 14px;
        border-radius: 24px;
    }

    .subjects-hero[b-0vi3tr2zjn] {
        align-items: stretch;
        flex-direction: column;
        padding: 20px;
        border-radius: 24px;
    }

    .subjects-hero-title[b-0vi3tr2zjn] {
        align-items: flex-start;
    }

    .subjects-hero-icon[b-0vi3tr2zjn] {
        width: 52px;
        height: 52px;
        border-radius: 18px;
    }

    .subjects-hero h1[b-0vi3tr2zjn] {
        font-size: 1.72rem;
        line-height: 1.25;
    }

    .subjects-primary-button[b-0vi3tr2zjn] {
        width: 100%;
    }

    .subjects-summary-grid[b-0vi3tr2zjn],
    .subjects-toolbar-card[b-0vi3tr2zjn],
    .subjects-modal-grid[b-0vi3tr2zjn] {
        grid-template-columns: 1fr;
    }

    .subjects-card-header[b-0vi3tr2zjn] {
        align-items: stretch;
        flex-direction: column;
    }

    .subjects-map-card[b-0vi3tr2zjn],
    .subjects-list-card[b-0vi3tr2zjn] {
        padding: 16px;
        border-radius: 24px;
    }

    .subjects-table-wrap[b-0vi3tr2zjn] {
        overflow: visible;
        border: 0;
        background: transparent;
    }

    .subjects-table[b-0vi3tr2zjn],
    .subjects-table thead[b-0vi3tr2zjn],
    .subjects-table tbody[b-0vi3tr2zjn],
    .subjects-table tr[b-0vi3tr2zjn],
    .subjects-table th[b-0vi3tr2zjn],
    .subjects-table td[b-0vi3tr2zjn] {
        display: block;
        width: 100%;
    }

    .subjects-table[b-0vi3tr2zjn] {
        min-width: 0;
    }

    .subjects-table thead[b-0vi3tr2zjn] {
        display: none;
    }

    .subjects-table tbody[b-0vi3tr2zjn] {
        display: grid;
        gap: 12px;
    }

    .subjects-table tr[b-0vi3tr2zjn] {
        overflow: hidden;
        border: 1px solid rgba(120, 170, 210, .16);
        border-radius: 22px;
        background: rgba(255, 255, 255, .78);
        box-shadow: 0 10px 22px rgba(23, 55, 90, .055);
    }

    .subjects-table td[b-0vi3tr2zjn] {
        display: grid;
        grid-template-columns: minmax(94px, .45fr) minmax(0, 1fr);
        gap: 12px;
        padding: 13px 14px;
        text-align: left !important;
        border-top: 1px solid rgba(120, 170, 210, .11);
    }

    .subjects-table td[b-0vi3tr2zjn]::before {
        content: attr(data-label);
        color: var(--text-muted, #8a9aaa);
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .subjects-table td:nth-child(2)[b-0vi3tr2zjn] {
        grid-template-columns: 1fr;
    }

    .subjects-table td:nth-child(2)[b-0vi3tr2zjn]::before {
        display: none;
    }

    .subjects-actions[b-0vi3tr2zjn] {
        width: 100%;
    }

    .subjects-icon-button[b-0vi3tr2zjn] {
        flex: 1 1 0;
        width: auto;
    }

    .subjects-modal-footer[b-0vi3tr2zjn] {
        display: grid;
    }

    .subjects-modal-footer .btn[b-0vi3tr2zjn] {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .subjects-page[b-0vi3tr2zjn] {
        padding: 10px;
    }

    .subjects-hero-title[b-0vi3tr2zjn],
    .subjects-hero-meta[b-0vi3tr2zjn],
    .subject-name-cell[b-0vi3tr2zjn],
    .subject-map-item[b-0vi3tr2zjn] {
        flex-direction: column;
        align-items: flex-start;
    }

    .subjects-table td[b-0vi3tr2zjn] {
        grid-template-columns: 1fr;
    }

    .subject-map-item[b-0vi3tr2zjn] {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-0vi3tr2zjn],
    *[b-0vi3tr2zjn]::before,
    *[b-0vi3tr2zjn]::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* /Components/Pages/TermPage.razor.rz.scp.css */
@keyframes termsRise-b-f1xvp1s9dp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes termsPulse-b-f1xvp1s9dp {
    0%, 100% {
        opacity: .46;
    }

    50% {
        opacity: 1;
    }
}

.terms-page[b-f1xvp1s9dp] {
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 36px;
    color: var(--text-body, #4e6274);
    font-family: "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.terms-page[b-f1xvp1s9dp]::before,
.terms-page[b-f1xvp1s9dp]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.terms-page[b-f1xvp1s9dp]::before {
    width: 34vw;
    min-width: 320px;
    aspect-ratio: 1;
    left: 5%;
    top: 2%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.terms-page[b-f1xvp1s9dp]::after {
    width: 38vw;
    min-width: 320px;
    aspect-ratio: 1;
    right: 0;
    bottom: -2%;
    background:
        radial-gradient(circle at 36% 34%, rgba(139, 92, 246, .14), transparent 58%),
        radial-gradient(circle at 72% 70%, rgba(236, 72, 153, .12), transparent 58%);
}

.terms-shell[b-f1xvp1s9dp] {
    display: grid;
    gap: 18px;
    width: min(100%, 1360px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft, 0 18px 45px rgba(23, 55, 90, .08));
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: termsRise-b-f1xvp1s9dp .32s ease-out both;
}

.terms-hero[b-f1xvp1s9dp],
.terms-summary-card[b-f1xvp1s9dp],
.terms-timeline-card[b-f1xvp1s9dp],
.terms-toolbar-card[b-f1xvp1s9dp],
.terms-list-card[b-f1xvp1s9dp] {
    border: 1px solid rgba(255, 255, 255, .76);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-card, 0 10px 26px rgba(23, 55, 90, .07));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.terms-hero[b-f1xvp1s9dp] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: 30px;
}

.terms-hero[b-f1xvp1s9dp]::after {
    content: "";
    position: absolute;
    right: 36px;
    bottom: -118px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(14, 165, 233, .14), transparent 68%);
    pointer-events: none;
}

.terms-hero-title[b-f1xvp1s9dp] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.terms-hero-icon[b-f1xvp1s9dp],
.summary-icon[b-f1xvp1s9dp],
.term-modal-icon[b-f1xvp1s9dp] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.terms-hero-icon[b-f1xvp1s9dp] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--primary-dark, #0369a1));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .24);
}

.terms-hero h1[b-f1xvp1s9dp] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.terms-hero p[b-f1xvp1s9dp] {
    margin: 8px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .95rem;
}

.terms-hero-meta[b-f1xvp1s9dp] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.terms-hero-meta span[b-f1xvp1s9dp],
.timeline-count-pill[b-f1xvp1s9dp],
.term-count-pill[b-f1xvp1s9dp] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    color: var(--primary-dark, #0369a1);
    font-size: .76rem;
    font-weight: 850;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 999px;
    background: rgba(224, 245, 255, .78);
}

.terms-primary-button[b-f1xvp1s9dp],
.terms-soft-button[b-f1xvp1s9dp] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    font-size: .88rem;
    font-weight: 850;
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.terms-primary-button[b-f1xvp1s9dp] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--primary-dark, #0369a1)) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .24);
}

.terms-soft-button[b-f1xvp1s9dp] {
    color: var(--text-main, #102033) !important;
    border: 1px solid rgba(120, 170, 210, .2) !important;
    background: rgba(255, 255, 255, .7) !important;
    box-shadow: none !important;
}

.terms-primary-button:disabled[b-f1xvp1s9dp] {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
}

.terms-summary-grid[b-f1xvp1s9dp] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.terms-summary-card[b-f1xvp1s9dp] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    min-height: 128px;
    padding: 18px;
    border-radius: 24px;
}

.summary-icon[b-f1xvp1s9dp] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    color: var(--primary-dark, #0369a1);
    border-radius: 17px;
    background: rgba(14, 165, 233, .1);
}

.terms-summary-card.current .summary-icon[b-f1xvp1s9dp] {
    color: #047857;
    background: rgba(16, 185, 129, .12);
}

.terms-summary-card.coverage .summary-icon[b-f1xvp1s9dp] {
    color: #6d28d9;
    background: rgba(139, 92, 246, .12);
}

.terms-summary-card.total .summary-icon[b-f1xvp1s9dp] {
    color: #be185d;
    background: rgba(236, 72, 153, .11);
}

.summary-label[b-f1xvp1s9dp] {
    align-self: end;
    color: var(--text-muted, #8a9aaa);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.terms-summary-card strong[b-f1xvp1s9dp] {
    color: var(--text-main, #102033);
    font-size: clamp(1rem, 1.4vw, 1.35rem);
    font-weight: 950;
    letter-spacing: -.035em;
    line-height: 1.08;
}

.terms-summary-card small[b-f1xvp1s9dp] {
    color: var(--text-muted, #8a9aaa);
    font-size: .8rem;
}

.terms-summary-card.skeleton span[b-f1xvp1s9dp],
.terms-summary-card.skeleton strong[b-f1xvp1s9dp],
.terms-summary-card.skeleton small[b-f1xvp1s9dp],
.skeleton-timeline div[b-f1xvp1s9dp],
.skeleton-timeline span[b-f1xvp1s9dp] {
    display: block;
    border-radius: 999px;
    background: #dbeafe;
    animation: termsPulse-b-f1xvp1s9dp 1.2s ease-in-out infinite;
}

.terms-summary-card.skeleton span[b-f1xvp1s9dp] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    border-radius: 17px;
}

.terms-summary-card.skeleton strong[b-f1xvp1s9dp] {
    width: 72%;
    height: 18px;
}

.terms-summary-card.skeleton small[b-f1xvp1s9dp] {
    width: 58%;
    height: 12px;
}

.terms-timeline-card[b-f1xvp1s9dp],
.terms-toolbar-card[b-f1xvp1s9dp],
.terms-list-card[b-f1xvp1s9dp] {
    border-radius: 26px;
}

.terms-timeline-card[b-f1xvp1s9dp] {
    padding: 20px;
}

.skeleton-timeline[b-f1xvp1s9dp] {
    display: grid;
    gap: 12px;
}

.skeleton-timeline div[b-f1xvp1s9dp] {
    width: 38%;
    height: 18px;
}

.skeleton-timeline span[b-f1xvp1s9dp] {
    height: 42px;
}

.timeline-header[b-f1xvp1s9dp],
.terms-card-header[b-f1xvp1s9dp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.timeline-header h2[b-f1xvp1s9dp],
.terms-card-header h2[b-f1xvp1s9dp],
.term-modal-header h5[b-f1xvp1s9dp] {
    margin: 0;
    color: var(--text-main, #102033);
    font-weight: 900;
    letter-spacing: -.035em;
}

.timeline-header h2[b-f1xvp1s9dp],
.terms-card-header h2[b-f1xvp1s9dp] {
    font-size: 1.22rem;
}

.timeline-header p[b-f1xvp1s9dp],
.terms-card-header p[b-f1xvp1s9dp],
.term-modal-header p[b-f1xvp1s9dp] {
    margin: 6px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .88rem;
}

.term-timeline-list[b-f1xvp1s9dp] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.term-timeline-item[b-f1xvp1s9dp] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-height: 74px;
    padding: 14px;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 20px;
    background: rgba(255, 255, 255, .72);
}

.term-node[b-f1xvp1s9dp] {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: var(--primary-dark, #0369a1);
    border-radius: 16px;
    background: rgba(224, 245, 255, .88);
}

.term-timeline-item.term-violet .term-node[b-f1xvp1s9dp] {
    color: #6d28d9;
    background: rgba(237, 233, 254, .86);
}

.term-timeline-item.term-rose .term-node[b-f1xvp1s9dp] {
    color: #be185d;
    background: rgba(252, 231, 243, .86);
}

.term-timeline-item strong[b-f1xvp1s9dp],
.term-timeline-item small[b-f1xvp1s9dp] {
    display: block;
}

.term-timeline-item strong[b-f1xvp1s9dp] {
    color: var(--text-main, #102033);
    font-weight: 900;
}

.term-timeline-item small[b-f1xvp1s9dp] {
    margin-top: 3px;
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
}

.current-term-pill[b-f1xvp1s9dp] {
    grid-column: 1 / -1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 5px 10px;
    color: #047857;
    font-size: .74rem;
    font-weight: 850;
    border-radius: 999px;
    background: rgba(220, 252, 231, .88);
}

.timeline-track[b-f1xvp1s9dp] {
    position: relative;
    height: 10px;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(226, 232, 240, .78);
}

.timeline-track span[b-f1xvp1s9dp] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--success, #10b981));
    box-shadow: 0 8px 18px rgba(14, 165, 233, .18);
}

.terms-toolbar-card[b-f1xvp1s9dp] {
    display: grid;
    grid-template-columns: minmax(190px, .78fr) minmax(260px, 1.22fr) auto auto;
    align-items: end;
    gap: 14px;
    padding: 16px;
}

.terms-field[b-f1xvp1s9dp],
.term-field[b-f1xvp1s9dp] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.terms-field > span[b-f1xvp1s9dp],
.term-field > span[b-f1xvp1s9dp] {
    color: var(--text-main, #102033);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.terms-select-wrap[b-f1xvp1s9dp],
.terms-search-wrap[b-f1xvp1s9dp] {
    position: relative;
}

.terms-input[b-f1xvp1s9dp] {
    min-height: 46px;
    padding: 10px 14px;
    color: var(--text-main, #102033) !important;
    font-size: .9rem;
    font-weight: 750;
    border: 1px solid rgba(120, 170, 210, .22) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(23, 55, 90, .04) !important;
}

.terms-input:focus[b-f1xvp1s9dp] {
    border-color: rgba(14, 165, 233, .72) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12), 0 10px 22px rgba(14, 165, 233, .07) !important;
}

.terms-select[b-f1xvp1s9dp] {
    appearance: none;
    padding-right: 42px;
}

.terms-select-wrap > i[b-f1xvp1s9dp],
.terms-search-wrap > i[b-f1xvp1s9dp] {
    position: absolute;
    top: 50%;
    color: var(--text-soft, #9aaaba);
    transform: translateY(-50%);
    pointer-events: none;
}

.terms-select-wrap > i[b-f1xvp1s9dp] {
    right: 15px;
    font-size: .76rem;
}

.terms-search-wrap > i[b-f1xvp1s9dp] {
    left: 15px;
}

.terms-search-wrap .terms-input[b-f1xvp1s9dp] {
    padding-left: 42px;
}

.terms-toolbar-count[b-f1xvp1s9dp] {
    display: grid;
    gap: 1px;
    min-width: 108px;
    min-height: 46px;
    place-items: center;
    padding: 7px 12px;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 16px;
    background: rgba(224, 245, 255, .68);
}

.terms-toolbar-count strong[b-f1xvp1s9dp] {
    color: var(--text-main, #102033);
    font-size: 1rem;
    line-height: 1;
}

.terms-toolbar-count span[b-f1xvp1s9dp] {
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    font-weight: 800;
}

.terms-list-card[b-f1xvp1s9dp] {
    overflow: hidden;
}

.terms-card-header[b-f1xvp1s9dp] {
    padding: 20px 22px;
    border-bottom: 1px solid rgba(226, 232, 240, .72);
}

.section-kicker[b-f1xvp1s9dp] {
    display: block;
    margin-bottom: 6px;
    color: var(--primary-dark, #0369a1);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.terms-loading-state[b-f1xvp1s9dp],
.terms-empty-state[b-f1xvp1s9dp] {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    min-height: 320px;
    padding: 32px;
    text-align: center;
}

.terms-loading-state[b-f1xvp1s9dp] {
    color: var(--text-muted, #8a9aaa);
    font-weight: 800;
}

.terms-empty-state > span[b-f1xvp1s9dp] {
    display: inline-grid;
    place-items: center;
    width: 70px;
    height: 70px;
    color: var(--primary, #0ea5e9);
    font-size: 1.65rem;
    border-radius: 24px;
    background: rgba(224, 245, 255, .88);
}

.terms-empty-state h3[b-f1xvp1s9dp] {
    margin: 8px 0 0;
    color: var(--text-main, #102033);
    font-size: 1.25rem;
    font-weight: 900;
}

.terms-empty-state p[b-f1xvp1s9dp] {
    margin: 0 0 8px;
    color: var(--text-muted, #8a9aaa);
}

.terms-table-wrap[b-f1xvp1s9dp] {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 170, 210, .48) rgba(248, 252, 255, .65);
}

.terms-table-wrap[b-f1xvp1s9dp]::-webkit-scrollbar,
.terms-page[b-f1xvp1s9dp]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.terms-table-wrap[b-f1xvp1s9dp]::-webkit-scrollbar-track,
.terms-page[b-f1xvp1s9dp]::-webkit-scrollbar-track {
    background: rgba(248, 252, 255, .62);
    border-radius: 999px;
}

.terms-table-wrap[b-f1xvp1s9dp]::-webkit-scrollbar-thumb,
.terms-page[b-f1xvp1s9dp]::-webkit-scrollbar-thumb {
    background: rgba(120, 170, 210, .42);
    border-radius: 999px;
}

.terms-table[b-f1xvp1s9dp] {
    min-width: 860px;
    color: var(--text-body, #4e6274);
    border-collapse: separate;
    border-spacing: 0;
}

.terms-table thead[b-f1xvp1s9dp] {
    background: rgba(240, 249, 255, .96);
    box-shadow: 0 1px 0 rgba(186, 230, 253, .64);
}

.terms-table th[b-f1xvp1s9dp] {
    padding: 15px 18px;
    color: var(--text-muted, #8a9aaa);
    font-size: .7rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
    border: 0;
    white-space: nowrap;
}

.terms-table td[b-f1xvp1s9dp] {
    padding: 16px 18px;
    vertical-align: middle;
    border-color: rgba(226, 232, 240, .72);
    font-size: .9rem;
}

.terms-table tbody tr[b-f1xvp1s9dp] {
    background: rgba(255, 255, 255, .54);
    transition: background .18s ease, transform .18s ease;
}

.academic-year-pill[b-f1xvp1s9dp],
.term-name-pill[b-f1xvp1s9dp],
.date-cell[b-f1xvp1s9dp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.academic-year-pill[b-f1xvp1s9dp],
.term-name-pill[b-f1xvp1s9dp] {
    min-height: 34px;
    padding: 7px 12px;
    font-weight: 900;
    border-radius: 999px;
}

.academic-year-pill[b-f1xvp1s9dp] {
    color: var(--primary-dark, #0369a1);
    border: 1px solid rgba(14, 165, 233, .12);
    background: rgba(224, 245, 255, .88);
}

.term-name-pill.term-blue[b-f1xvp1s9dp] {
    color: var(--primary-dark, #0369a1);
    background: rgba(224, 245, 255, .88);
}

.term-name-pill.term-violet[b-f1xvp1s9dp] {
    color: #6d28d9;
    background: rgba(237, 233, 254, .86);
}

.term-name-pill.term-rose[b-f1xvp1s9dp] {
    color: #be185d;
    background: rgba(252, 231, 243, .86);
}

.date-cell[b-f1xvp1s9dp] {
    color: var(--text-body, #4e6274);
    font-weight: 800;
}

.date-cell i[b-f1xvp1s9dp] {
    color: var(--text-soft, #9aaaba);
}

.term-edit-button[b-f1xvp1s9dp] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 13px;
    color: var(--primary-dark, #0369a1) !important;
    font-size: .82rem;
    font-weight: 850;
    border: 1px solid rgba(14, 165, 233, .16) !important;
    border-radius: 999px !important;
    background: rgba(240, 249, 255, .88) !important;
}

.term-modal-backdrop[b-f1xvp1s9dp] {
    background: rgba(11, 38, 58, .18) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.term-modal-shell[b-f1xvp1s9dp] {
    display: grid !important;
    place-items: center;
    padding: 18px;
}

.term-modal-dialog[b-f1xvp1s9dp] {
    width: min(100%, 540px);
    margin: 0;
}

.term-modal-content[b-f1xvp1s9dp] {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 28px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 24px 70px rgba(23, 55, 90, .18);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.term-modal-header[b-f1xvp1s9dp] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 22px;
    border-bottom: 1px solid rgba(226, 232, 240, .72);
    background:
        radial-gradient(circle at 92% 0%, rgba(14, 165, 233, .12), transparent 38%),
        rgba(255, 255, 255, .76);
}

.term-modal-icon[b-f1xvp1s9dp] {
    width: 46px;
    height: 46px;
    color: white;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--primary-dark, #0369a1));
    box-shadow: 0 14px 28px rgba(14, 165, 233, .22);
}

.term-modal-body[b-f1xvp1s9dp] {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.term-modal-grid[b-f1xvp1s9dp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.term-name-input[b-f1xvp1s9dp] {
    color: var(--primary-dark, #0369a1) !important;
    font-weight: 900;
}

.term-helper-card[b-f1xvp1s9dp] {
    display: flex;
    gap: 10px;
    padding: 13px;
    color: #0369a1;
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.35;
    border: 1px solid rgba(14, 165, 233, .16);
    border-radius: 18px;
    background: rgba(224, 245, 255, .56);
}

.term-modal-footer[b-f1xvp1s9dp] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid rgba(226, 232, 240, .72);
    background: rgba(248, 252, 255, .78);
}

@media (hover: hover) and (pointer: fine) {
    .terms-primary-button:hover:not(:disabled)[b-f1xvp1s9dp],
    .terms-soft-button:hover[b-f1xvp1s9dp],
    .term-edit-button:hover[b-f1xvp1s9dp],
    .term-timeline-item:hover[b-f1xvp1s9dp] {
        transform: translateY(-1px);
    }

    .terms-primary-button:hover:not(:disabled)[b-f1xvp1s9dp] {
        box-shadow: 0 20px 40px rgba(14, 165, 233, .32);
    }

    .term-edit-button:hover[b-f1xvp1s9dp] {
        color: white !important;
        background: var(--primary, #0ea5e9) !important;
        box-shadow: 0 12px 24px rgba(14, 165, 233, .22);
    }

    .terms-table tbody tr:hover[b-f1xvp1s9dp] {
        background: rgba(14, 165, 233, .04);
    }
}

.terms-primary-button:focus-visible[b-f1xvp1s9dp],
.terms-soft-button:focus-visible[b-f1xvp1s9dp],
.term-edit-button:focus-visible[b-f1xvp1s9dp],
.terms-input:focus-visible[b-f1xvp1s9dp] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 2px;
}

@media (max-width: 1199.98px) {
    .terms-summary-grid[b-f1xvp1s9dp] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .terms-toolbar-card[b-f1xvp1s9dp] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .terms-page[b-f1xvp1s9dp] {
        padding: 18px 10px 26px;
    }

    .terms-shell[b-f1xvp1s9dp] {
        gap: 14px;
        padding: 12px;
        border-radius: 28px;
    }

    .terms-hero[b-f1xvp1s9dp] {
        align-items: stretch;
        flex-direction: column;
        padding: 20px;
        border-radius: 24px;
    }

    .terms-hero-title[b-f1xvp1s9dp] {
        align-items: flex-start;
    }

    .terms-hero-icon[b-f1xvp1s9dp] {
        width: 52px;
        height: 52px;
        border-radius: 19px;
    }

    .terms-hero h1[b-f1xvp1s9dp] {
        font-size: 1.7rem;
    }

    .terms-primary-button[b-f1xvp1s9dp],
    .terms-soft-button[b-f1xvp1s9dp] {
        width: 100%;
    }

    .terms-summary-grid[b-f1xvp1s9dp],
    .terms-toolbar-card[b-f1xvp1s9dp],
    .term-modal-grid[b-f1xvp1s9dp] {
        grid-template-columns: 1fr;
    }

    .timeline-header[b-f1xvp1s9dp],
    .terms-card-header[b-f1xvp1s9dp] {
        align-items: stretch;
        flex-direction: column;
    }

    .term-timeline-list[b-f1xvp1s9dp] {
        grid-template-columns: 1fr;
    }

    .terms-table-wrap[b-f1xvp1s9dp] {
        overflow: visible;
    }

    .terms-table[b-f1xvp1s9dp],
    .terms-table thead[b-f1xvp1s9dp],
    .terms-table tbody[b-f1xvp1s9dp],
    .terms-table tr[b-f1xvp1s9dp],
    .terms-table th[b-f1xvp1s9dp],
    .terms-table td[b-f1xvp1s9dp] {
        display: block;
    }

    .terms-table[b-f1xvp1s9dp] {
        min-width: 0;
    }

    .terms-table thead[b-f1xvp1s9dp] {
        display: none;
    }

    .terms-table tbody[b-f1xvp1s9dp] {
        display: grid;
        gap: 12px;
        padding: 12px;
    }

    .terms-table tr[b-f1xvp1s9dp] {
        display: grid;
        gap: 10px;
        padding: 16px;
        border: 1px solid rgba(226, 232, 240, .8);
        border-radius: 20px;
        background: rgba(255, 255, 255, .82);
        box-shadow: 0 8px 18px rgba(23, 55, 90, .05);
    }

    .terms-table td[b-f1xvp1s9dp] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
        border: 0;
        text-align: right !important;
    }

    .terms-table td[b-f1xvp1s9dp]::before {
        content: attr(data-label);
        color: var(--text-soft, #9aaaba);
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .term-edit-button[b-f1xvp1s9dp] {
        width: 100%;
    }

    .term-modal-footer[b-f1xvp1s9dp] {
        display: grid;
    }
}

@media (max-width: 430px) {
    .terms-page[b-f1xvp1s9dp] {
        padding-inline: 8px;
    }

    .terms-hero-title[b-f1xvp1s9dp],
    .terms-hero-meta[b-f1xvp1s9dp] {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .terms-shell[b-f1xvp1s9dp],
    .terms-summary-card.skeleton span[b-f1xvp1s9dp],
    .terms-summary-card.skeleton strong[b-f1xvp1s9dp],
    .terms-summary-card.skeleton small[b-f1xvp1s9dp],
    .skeleton-timeline div[b-f1xvp1s9dp],
    .skeleton-timeline span[b-f1xvp1s9dp] {
        animation: none !important;
    }

    .terms-primary-button[b-f1xvp1s9dp],
    .terms-soft-button[b-f1xvp1s9dp],
    .term-edit-button[b-f1xvp1s9dp],
    .term-timeline-item[b-f1xvp1s9dp],
    .terms-table tbody tr[b-f1xvp1s9dp] {
        transition: none !important;
    }
}
/* /Components/Pages/TimetablePage.razor.rz.scp.css */
@keyframes timetableRise-b-jz9c7czw79 {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes timetablePulse-b-jz9c7czw79 {
    0%, 100% {
        opacity: .46;
    }

    50% {
        opacity: 1;
    }
}

.timetable-page[b-jz9c7czw79] {
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 36px;
    color: var(--text-body, #4e6274);
    font-family: "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.timetable-page[b-jz9c7czw79]::before,
.timetable-page[b-jz9c7czw79]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.timetable-page[b-jz9c7czw79]::before {
    width: 34vw;
    min-width: 320px;
    aspect-ratio: 1;
    left: 5%;
    top: 2%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.timetable-page[b-jz9c7czw79]::after {
    width: 38vw;
    min-width: 320px;
    aspect-ratio: 1;
    right: 0;
    bottom: -2%;
    background:
        radial-gradient(circle at 36% 34%, rgba(139, 92, 246, .14), transparent 58%),
        radial-gradient(circle at 72% 70%, rgba(236, 72, 153, .12), transparent 58%);
}

.timetable-page-shell[b-jz9c7czw79] {
    display: grid;
    gap: 18px;
    width: min(100%, 1560px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft, 0 18px 45px rgba(23, 55, 90, .08));
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: timetableRise-b-jz9c7czw79 .32s ease-out both;
}

.timetable-hero[b-jz9c7czw79],
.timetable-summary-card[b-jz9c7czw79],
.timetable-toolbar-card[b-jz9c7czw79],
.weekly-card[b-jz9c7czw79] {
    border: 1px solid rgba(255, 255, 255, .76);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-card, 0 10px 26px rgba(23, 55, 90, .07));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.timetable-hero[b-jz9c7czw79] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: 30px;
}

.timetable-hero[b-jz9c7czw79]::after {
    content: "";
    position: absolute;
    right: 36px;
    bottom: -118px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(139, 92, 246, .13), transparent 68%);
    pointer-events: none;
}

.timetable-hero-title[b-jz9c7czw79] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.timetable-hero-icon[b-jz9c7czw79],
.summary-icon[b-jz9c7czw79],
.dialog-icon[b-jz9c7czw79] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
}

.timetable-hero-icon[b-jz9c7czw79] {
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--violet, #8b5cf6));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .2);
}

.timetable-hero h1[b-jz9c7czw79] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.1;
}

.timetable-hero p[b-jz9c7czw79] {
    margin: 8px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .95rem;
    line-height: 1.55;
}

.timetable-hero-meta[b-jz9c7czw79],
.weekly-chip-row[b-jz9c7czw79],
.day-pill-row[b-jz9c7czw79] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.timetable-hero-meta[b-jz9c7czw79] {
    margin-top: 14px;
}

.timetable-hero-meta span[b-jz9c7czw79],
.weekly-chip-row span[b-jz9c7czw79] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    color: var(--primary-dark, #0369a1);
    font-size: .76rem;
    font-weight: 850;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 999px;
    background: rgba(224, 245, 255, .78);
}

.weekly-chip-row .room-chip.warning[b-jz9c7czw79] {
    color: #be185d;
    border-color: rgba(236, 72, 153, .16);
    background: rgba(252, 231, 243, .72);
}

.timetable-primary-button[b-jz9c7czw79],
.timetable-soft-button[b-jz9c7czw79],
.timetable-danger-button[b-jz9c7czw79] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    font-size: .88rem;
    font-weight: 850;
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.timetable-primary-button[b-jz9c7czw79] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--violet, #8b5cf6)) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .2);
}

.timetable-soft-button[b-jz9c7czw79] {
    color: var(--text-main, #102033) !important;
    border: 1px solid rgba(120, 170, 210, .2) !important;
    background: rgba(255, 255, 255, .7) !important;
    box-shadow: none !important;
}

.timetable-danger-button[b-jz9c7czw79] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .62) !important;
    background: linear-gradient(135deg, var(--danger, #ef476f), var(--pink, #ec4899)) !important;
    box-shadow: 0 16px 30px rgba(239, 71, 111, .18);
}

.timetable-summary-grid[b-jz9c7czw79] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.timetable-summary-card[b-jz9c7czw79] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    min-height: 124px;
    padding: 18px;
    border-radius: 24px;
}

.summary-icon[b-jz9c7czw79] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    color: var(--primary-dark, #0369a1);
    border-radius: 17px;
    background: rgba(14, 165, 233, .1);
}

.timetable-summary-card.periods .summary-icon[b-jz9c7czw79] {
    color: #6d28d9;
    background: rgba(139, 92, 246, .12);
}

.timetable-summary-card.rooms .summary-icon[b-jz9c7czw79] {
    color: #be185d;
    background: rgba(236, 72, 153, .11);
}

.timetable-summary-card.selected .summary-icon[b-jz9c7czw79] {
    color: #047857;
    background: rgba(16, 185, 129, .12);
}

.summary-label[b-jz9c7czw79] {
    align-self: end;
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.timetable-summary-card strong[b-jz9c7czw79] {
    min-width: 0;
    overflow: hidden;
    color: var(--text-main, #102033);
    font-size: clamp(1.14rem, 1.7vw, 1.72rem);
    font-weight: 900;
    letter-spacing: -.035em;
    line-height: 1.14;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timetable-summary-card small[b-jz9c7czw79] {
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
    line-height: 1.35;
}

.timetable-toolbar-card[b-jz9c7czw79] {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.1fr) minmax(240px, 1.2fr) auto;
    align-items: end;
    gap: 13px;
    padding: 18px;
    border-radius: 28px;
}

.timetable-field[b-jz9c7czw79] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.timetable-field > span[b-jz9c7czw79] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .02em;
}

.timetable-field em[b-jz9c7czw79] {
    color: var(--danger, #ef476f);
    font-style: normal;
}

.timetable-input[b-jz9c7czw79] {
    min-height: 46px;
    padding: 10px 14px;
    color: var(--text-main, #102033) !important;
    font-size: .9rem;
    font-weight: 750;
    border: 1px solid rgba(120, 170, 210, .22) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .78) !important;
    box-shadow: 0 8px 18px rgba(23, 55, 90, .04) !important;
}

.timetable-input:focus[b-jz9c7czw79] {
    border-color: rgba(14, 165, 233, .72) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12), 0 10px 22px rgba(14, 165, 233, .07) !important;
}

.timetable-select-wrap[b-jz9c7czw79] {
    position: relative;
}

.timetable-select[b-jz9c7czw79] {
    padding-right: 42px;
    appearance: none;
}

.timetable-select-wrap > i[b-jz9c7czw79] {
    position: absolute;
    right: 15px;
    top: 50%;
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.day-pill-row[b-jz9c7czw79] {
    align-items: center;
}

.day-pill[b-jz9c7czw79] {
    min-height: 38px;
    padding: 0 11px;
    color: var(--text-body, #4e6274);
    font-size: .78rem;
    font-weight: 850;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
}

.day-pill.active[b-jz9c7czw79] {
    color: white;
    border-color: rgba(255, 255, 255, .62);
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--violet, #8b5cf6));
}

.toolbar-helper[b-jz9c7czw79] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 46px;
    padding: 10px 14px;
    color: var(--text-body, #4e6274);
    font-size: .82rem;
    font-weight: 750;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 16px;
    background: rgba(224, 245, 255, .5);
}

.toolbar-helper i[b-jz9c7czw79] {
    color: var(--primary-dark, #0369a1);
}

.weekly-card[b-jz9c7czw79] {
    overflow: hidden;
    padding: 22px;
    border-radius: 28px;
}

.weekly-card-header[b-jz9c7czw79] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.section-kicker[b-jz9c7czw79] {
    display: block;
    margin-bottom: 5px;
    color: var(--primary-dark, #0369a1);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.weekly-card-header h2[b-jz9c7czw79] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.12rem, 1.7vw, 1.34rem);
    font-weight: 900;
    letter-spacing: -.025em;
}

.weekly-card-header h2 i[b-jz9c7czw79] {
    color: var(--primary, #0ea5e9);
}

.weekly-card-header p[b-jz9c7czw79] {
    margin: 6px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .88rem;
}

.timetable-helper-strip[b-jz9c7czw79] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 18px;
    background: rgba(248, 252, 255, .7);
}

.timetable-helper-strip span[b-jz9c7czw79],
.timetable-helper-strip strong[b-jz9c7czw79] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-body, #4e6274);
    font-size: .78rem;
    font-weight: 750;
}

.timetable-helper-strip i[b-jz9c7czw79] {
    color: var(--primary, #0ea5e9);
}

.timetable-helper-strip strong[b-jz9c7czw79] {
    color: var(--primary-dark, #0369a1);
}

.timetable-grid-wrap[b-jz9c7czw79] {
    max-height: calc(100vh - 320px);
    min-height: 420px;
    overflow: auto;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 24px;
    background: rgba(255, 255, 255, .72);
}

.timetable-grid-wrap[b-jz9c7czw79]::-webkit-scrollbar,
.timetable-page[b-jz9c7czw79]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.timetable-grid-wrap[b-jz9c7czw79]::-webkit-scrollbar-track,
.timetable-page[b-jz9c7czw79]::-webkit-scrollbar-track {
    background: rgba(224, 245, 255, .44);
    border-radius: 999px;
}

.timetable-grid-wrap[b-jz9c7czw79]::-webkit-scrollbar-thumb,
.timetable-page[b-jz9c7czw79]::-webkit-scrollbar-thumb {
    background: rgba(14, 165, 233, .34);
    border-radius: 999px;
}

.timetable-grid[b-jz9c7czw79] {
    display: grid;
    grid-template-columns: 108px repeat(7, minmax(200px, 1fr));
    grid-auto-rows: minmax(166px, auto);
    min-width: 1508px;
    gap: 1px;
    background: rgba(120, 170, 210, .16);
}

.period-head[b-jz9c7czw79],
.day-head[b-jz9c7czw79],
.period-number-cell[b-jz9c7czw79] {
    border: 0;
    background: rgba(248, 252, 255, .96);
}

.period-head[b-jz9c7czw79],
.day-head[b-jz9c7czw79] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    min-height: 66px;
    color: var(--text-main, #102033);
    box-shadow: 0 10px 20px rgba(23, 55, 90, .045);
}

.period-head[b-jz9c7czw79] {
    left: 0;
    z-index: 8;
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 10px 0 22px rgba(23, 55, 90, .06), 0 10px 20px rgba(23, 55, 90, .045);
}

.day-head[b-jz9c7czw79] {
    gap: 3px;
    text-align: center;
}

.day-head strong[b-jz9c7czw79] {
    font-size: .98rem;
    font-weight: 900;
}

.day-head small[b-jz9c7czw79] {
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    font-weight: 800;
}

.day-head.weekend[b-jz9c7czw79] {
    background: rgba(252, 231, 243, .78);
}

.period-number-cell[b-jz9c7czw79] {
    position: sticky;
    left: 0;
    z-index: 4;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 5px;
    min-height: 166px;
    text-align: center;
    border-top: 1px solid rgba(120, 170, 210, .1);
    box-shadow: 10px 0 22px rgba(23, 55, 90, .06);
}

.period-number-cell span[b-jz9c7czw79] {
    display: inline-flex;
    padding: 7px 12px;
    color: var(--text-main, #102033);
    font-size: .98rem;
    font-weight: 900;
    border-radius: 999px;
    background: rgba(224, 245, 255, .74);
}

.period-number-cell small[b-jz9c7czw79] {
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    font-weight: 800;
}

.period-cell[b-jz9c7czw79] {
    position: relative;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 7px;
    width: 100%;
    min-height: 166px;
    padding: 13px;
    color: var(--text-body, #4e6274);
    text-align: left;
    border: 0;
    background: rgba(255, 255, 255, .58);
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.period-cell.empty[b-jz9c7czw79] {
    place-items: center;
    align-content: center;
    gap: 9px;
}

.cell-plus[b-jz9c7czw79] {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--primary-dark, #0369a1);
    border: 1px dashed rgba(14, 165, 233, .42);
    border-radius: 14px;
    background: rgba(255, 255, 255, .72);
}

.empty-hint[b-jz9c7czw79] {
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
    font-weight: 850;
}

.period-cell.filled[b-jz9c7czw79],
.mobile-period-card.filled[b-jz9c7czw79] {
    overflow: hidden;
    border: 1px solid rgba(14, 165, 233, .2);
    background: linear-gradient(180deg, rgba(224, 245, 255, .95), rgba(255, 255, 255, .92));
    box-shadow: 0 10px 24px rgba(14, 165, 233, .08);
}

.period-accent[b-jz9c7czw79] {
    position: absolute;
    top: 13px;
    bottom: 13px;
    left: 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: var(--primary, #0ea5e9);
}

.period-cell.math .period-accent[b-jz9c7czw79],
.mobile-period-card.math[b-jz9c7czw79]::before {
    background: var(--violet, #8b5cf6);
}

.period-cell.science .period-accent[b-jz9c7czw79],
.mobile-period-card.science[b-jz9c7czw79]::before {
    background: var(--success, #10b981);
}

.period-cell.art .period-accent[b-jz9c7czw79],
.mobile-period-card.art[b-jz9c7czw79]::before {
    background: var(--pink, #ec4899);
}

.period-cell.history .period-accent[b-jz9c7czw79],
.mobile-period-card.history[b-jz9c7czw79]::before {
    background: var(--warning, #f59e0b);
}

.period-time[b-jz9c7czw79] {
    display: inline-flex;
    width: fit-content;
    padding: 5px 9px;
    color: var(--primary-dark, #0369a1);
    font-size: .74rem;
    font-weight: 900;
    border: 1px solid rgba(14, 165, 233, .14);
    border-radius: 999px;
    background: rgba(224, 245, 255, .82);
}

.period-subject[b-jz9c7czw79] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--primary-dark, #0369a1);
    font-family: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
    font-size: .78rem;
    font-weight: 900;
}

.break-title[b-jz9c7czw79] {
    color: #be185d;
    font-family: inherit;
}

.period-name[b-jz9c7czw79] {
    color: var(--text-main, #102033);
    font-size: .98rem;
    font-weight: 900;
    line-height: 1.18;
}

.period-teacher[b-jz9c7czw79],
.period-room[b-jz9c7czw79],
.edit-hint[b-jz9c7czw79] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-body, #4e6274);
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.3;
}

.period-room.missing[b-jz9c7czw79] {
    color: #be185d;
    padding: 5px 8px;
    border: 1px solid rgba(236, 72, 153, .14);
    border-radius: 999px;
    background: rgba(252, 231, 243, .72);
}

.edit-hint[b-jz9c7czw79] {
    margin-top: auto;
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
}

.timetable-empty-state[b-jz9c7czw79],
.timetable-loading-state[b-jz9c7czw79] {
    display: grid;
    place-items: center;
    gap: 12px;
    min-height: 300px;
    padding: 36px;
    text-align: center;
    border: 1px dashed rgba(120, 170, 210, .25);
    border-radius: 24px;
    background: rgba(248, 252, 255, .62);
}

.timetable-empty-state > span[b-jz9c7czw79] {
    display: inline-grid;
    place-items: center;
    width: 58px;
    height: 58px;
    color: var(--primary-dark, #0369a1);
    border-radius: 22px;
    background: rgba(224, 245, 255, .72);
}

.timetable-empty-state h3[b-jz9c7czw79] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: 1.12rem;
    font-weight: 900;
}

.timetable-empty-state p[b-jz9c7czw79],
.timetable-loading-state span[b-jz9c7czw79] {
    margin: 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .9rem;
}

.timetable-mobile-view[b-jz9c7czw79] {
    display: none;
}

.timetable-dialog-backdrop[b-jz9c7czw79] {
    position: fixed;
    inset: 0;
    z-index: 1250;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(11, 38, 58, .18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.timetable-dialog[b-jz9c7czw79] {
    width: min(680px, 100%);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 28px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 28px 70px rgba(11, 38, 58, .18);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.dialog-head[b-jz9c7czw79] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 20px 22px;
    border-bottom: 1px solid rgba(120, 170, 210, .14);
    background: linear-gradient(135deg, rgba(224, 245, 255, .8), rgba(255, 255, 255, .72));
}

.dialog-icon[b-jz9c7czw79] {
    width: 46px;
    height: 46px;
    color: white;
    border-radius: 17px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--violet, #8b5cf6));
}

.dialog-head h5[b-jz9c7czw79] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: 1.12rem;
    font-weight: 900;
}

.dialog-head p[b-jz9c7czw79] {
    margin: 6px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .88rem;
}

.dialog-body[b-jz9c7czw79] {
    display: grid;
    gap: 18px;
    padding: 22px;
}

.context-strip[b-jz9c7czw79] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.context-strip span[b-jz9c7czw79] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    color: var(--primary-dark, #0369a1);
    font-size: .76rem;
    font-weight: 850;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 999px;
    background: rgba(224, 245, 255, .72);
}

.timetable-form-grid[b-jz9c7czw79] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.timetable-field.wide[b-jz9c7czw79] {
    grid-column: span 2;
}

.timetable-helper-card[b-jz9c7czw79] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    color: var(--text-body, #4e6274);
    font-size: .84rem;
    border: 1px solid rgba(14, 165, 233, .12);
    border-radius: 18px;
    background: rgba(224, 245, 255, .42);
}

.timetable-helper-card i[b-jz9c7czw79] {
    color: var(--primary-dark, #0369a1);
}

.timetable-helper-card.warning[b-jz9c7czw79] {
    color: #be185d;
    border-color: rgba(236, 72, 153, .14);
    background: rgba(252, 231, 243, .56);
}

.timetable-helper-card.warning i[b-jz9c7czw79] {
    color: #be185d;
}

.dialog-actions[b-jz9c7czw79] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 18px 22px 22px;
    border-top: 1px solid rgba(120, 170, 210, .14);
    background: rgba(248, 252, 255, .7);
}

.skeleton[b-jz9c7czw79] {
    position: relative;
    overflow: hidden;
}

.skeleton[b-jz9c7czw79]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .62), transparent);
    animation: timetablePulse-b-jz9c7czw79 1.3s ease-in-out infinite;
}

.timetable-summary-card.skeleton span[b-jz9c7czw79],
.timetable-summary-card.skeleton strong[b-jz9c7czw79],
.timetable-summary-card.skeleton small[b-jz9c7czw79] {
    display: block;
    border-radius: 999px;
    background: rgba(120, 170, 210, .14);
}

.timetable-summary-card.skeleton span[b-jz9c7czw79] {
    grid-row: span 3;
    width: 44px;
    height: 44px;
    border-radius: 17px;
}

.timetable-summary-card.skeleton strong[b-jz9c7czw79] {
    width: 70%;
    height: 24px;
}

.timetable-summary-card.skeleton small[b-jz9c7czw79] {
    width: 86%;
    height: 12px;
}

@media (hover: hover) and (pointer: fine) {
    .timetable-primary-button:hover[b-jz9c7czw79],
    .timetable-soft-button:hover[b-jz9c7czw79],
    .timetable-danger-button:hover[b-jz9c7czw79],
    .day-pill:hover[b-jz9c7czw79],
    .period-cell:hover[b-jz9c7czw79],
    .mobile-period-card:hover[b-jz9c7czw79] {
        transform: translateY(-1px);
    }

    .timetable-primary-button:hover[b-jz9c7czw79] {
        box-shadow: 0 20px 36px rgba(14, 165, 233, .25);
    }

    .period-cell.filled:hover[b-jz9c7czw79],
    .mobile-period-card.filled:hover[b-jz9c7czw79] {
        border-color: rgba(14, 165, 233, .4);
        box-shadow: 0 16px 32px rgba(14, 165, 233, .13);
    }

    .period-cell.empty:hover[b-jz9c7czw79],
    .mobile-period-card.empty:hover[b-jz9c7czw79] {
        background: rgba(14, 165, 233, .04);
    }
}

.timetable-primary-button:focus-visible[b-jz9c7czw79],
.timetable-soft-button:focus-visible[b-jz9c7czw79],
.timetable-danger-button:focus-visible[b-jz9c7czw79],
.day-pill:focus-visible[b-jz9c7czw79],
.period-cell:focus-visible[b-jz9c7czw79],
.mobile-period-card:focus-visible[b-jz9c7czw79],
.timetable-input:focus-visible[b-jz9c7czw79] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 2px;
}

@media (max-width: 1199.98px) {
    .timetable-summary-grid[b-jz9c7czw79] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .timetable-toolbar-card[b-jz9c7czw79] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .timetable-page[b-jz9c7czw79] {
        padding: 14px;
    }

    .timetable-page-shell[b-jz9c7czw79] {
        gap: 14px;
        padding: 14px;
        border-radius: 24px;
    }

    .timetable-hero[b-jz9c7czw79] {
        align-items: stretch;
        flex-direction: column;
        padding: 20px;
        border-radius: 24px;
    }

    .timetable-hero-title[b-jz9c7czw79] {
        align-items: flex-start;
    }

    .timetable-hero-icon[b-jz9c7czw79] {
        width: 52px;
        height: 52px;
        border-radius: 18px;
    }

    .timetable-hero h1[b-jz9c7czw79] {
        font-size: 1.72rem;
        line-height: 1.25;
    }

    .timetable-soft-button[b-jz9c7czw79],
    .timetable-primary-button[b-jz9c7czw79],
    .timetable-danger-button[b-jz9c7czw79] {
        width: 100%;
    }

    .timetable-summary-grid[b-jz9c7czw79],
    .timetable-toolbar-card[b-jz9c7czw79],
    .timetable-form-grid[b-jz9c7czw79] {
        grid-template-columns: 1fr;
    }

    .timetable-field.wide[b-jz9c7czw79] {
        grid-column: auto;
    }

    .weekly-card[b-jz9c7czw79] {
        padding: 16px;
        border-radius: 24px;
    }

    .weekly-card-header[b-jz9c7czw79] {
        align-items: stretch;
        flex-direction: column;
    }

    .timetable-grid-wrap[b-jz9c7czw79] {
        display: none;
    }

    .timetable-mobile-view[b-jz9c7czw79] {
        display: grid;
        gap: 14px;
    }

    .mobile-day-header[b-jz9c7czw79] {
        display: grid;
        gap: 4px;
        padding: 14px;
        border: 1px solid rgba(120, 170, 210, .16);
        border-radius: 20px;
        background: rgba(248, 252, 255, .7);
    }

    .mobile-day-header strong[b-jz9c7czw79] {
        color: var(--text-main, #102033);
        font-size: 1rem;
        font-weight: 900;
    }

    .mobile-day-header small[b-jz9c7czw79] {
        color: var(--text-muted, #8a9aaa);
        font-size: .8rem;
        font-weight: 750;
    }

    .mobile-period-list[b-jz9c7czw79] {
        display: grid;
        gap: 12px;
    }

    .mobile-period-card[b-jz9c7czw79] {
        position: relative;
        display: grid;
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 12px;
        width: 100%;
        padding: 13px;
        text-align: left;
        border: 1px solid rgba(120, 170, 210, .16);
        border-radius: 20px;
        background: rgba(248, 252, 255, .66);
    }

    .mobile-period-card[b-jz9c7czw79]::before {
        content: "";
        position: absolute;
        top: 12px;
        bottom: 12px;
        left: 0;
        width: 4px;
        border-radius: 0 999px 999px 0;
        background: var(--primary, #0ea5e9);
    }

    .mobile-period-number[b-jz9c7czw79] {
        display: grid;
        align-content: center;
        justify-items: center;
        gap: 4px;
        border-radius: 16px;
        background: rgba(224, 245, 255, .58);
    }

    .mobile-period-number strong[b-jz9c7czw79] {
        color: var(--text-main, #102033);
        font-weight: 900;
    }

    .mobile-period-number small[b-jz9c7czw79] {
        color: var(--text-muted, #8a9aaa);
        font-size: .7rem;
        font-weight: 800;
    }

    .mobile-empty-body[b-jz9c7czw79],
    .mobile-period-body[b-jz9c7czw79] {
        display: grid;
        gap: 7px;
        align-content: center;
        justify-items: start;
    }

    .mobile-period-body > strong[b-jz9c7czw79] {
        color: var(--text-main, #102033);
        font-size: .98rem;
        font-weight: 900;
    }

    .mobile-period-body > small[b-jz9c7czw79] {
        color: var(--text-body, #4e6274);
        font-size: .78rem;
        font-weight: 750;
    }

    .dialog-actions[b-jz9c7czw79] {
        display: grid;
    }
}

@media (max-width: 430px) {
    .timetable-page[b-jz9c7czw79] {
        padding: 10px;
    }

    .timetable-hero-title[b-jz9c7czw79],
    .timetable-hero-meta[b-jz9c7czw79],
    .weekly-card-header[b-jz9c7czw79],
    .weekly-chip-row[b-jz9c7czw79],
    .timetable-helper-strip[b-jz9c7czw79],
    .context-strip[b-jz9c7czw79] {
        flex-direction: column;
        align-items: flex-start;
    }

    .mobile-period-card[b-jz9c7czw79] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    *[b-jz9c7czw79],
    *[b-jz9c7czw79]::before,
    *[b-jz9c7czw79]::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* /Components/Pages/TrialBalancePage.razor.rz.scp.css */
.trial-balance-page[b-v0tijqhlkv] {
    --surface: rgba(255, 255, 255, 0.9);
    --surface-soft: rgba(247, 252, 255, 0.78);
    --border-soft: rgba(104, 155, 200, 0.2);
    --border-glass: rgba(255, 255, 255, 0.76);
    --text-main: #102033;
    --text-body: #506577;
    --text-muted: #8a9aaa;
    --primary: #0ea5e9;
    --primary-dark: #0369a1;
    --primary-soft: #e0f5ff;
    --debit: #0ea5e9;
    --debit-soft: #e0f5ff;
    --credit: #8b5cf6;
    --credit-soft: #ede9fe;
    --success: #10b981;
    --success-soft: #dcfce7;
    --danger: #ef476f;
    --danger-soft: #ffe4ec;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --asset: #0ea5e9;
    --asset-soft: #e0f5ff;
    --liability: #f59e0b;
    --liability-soft: #fff7ed;
    --equity: #8b5cf6;
    --equity-soft: #ede9fe;
    --income: #10b981;
    --income-soft: #dcfce7;
    --expense: #ef476f;
    --expense-soft: #ffe4ec;
    --cogs: #f97316;
    --cogs-soft: #ffedd5;
    --neutral: #64748b;
    --neutral-soft: #f1f5f9;
    --radius-xl: 30px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --shadow-soft: 0 18px 45px rgba(23, 55, 90, 0.08);
    --shadow-card: 0 10px 26px rgba(23, 55, 90, 0.07);
    color: var(--text-main);
    font-family: Inter, Manrope, "Segoe UI", system-ui, sans-serif;
}

.trial-balance-shell[b-v0tijqhlkv] {
    position: relative;
    display: grid;
    gap: 18px;
    max-width: 1600px;
    margin: 0 auto;
    min-height: 0;
}

.trial-balance-shell[b-v0tijqhlkv]::before,
.trial-balance-shell[b-v0tijqhlkv]::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 999px;
    filter: blur(16px);
    pointer-events: none;
}

.trial-balance-shell[b-v0tijqhlkv]::before {
    top: 42px;
    left: 28px;
    width: 300px;
    height: 300px;
    background: rgba(14, 165, 233, 0.14);
}

.trial-balance-shell[b-v0tijqhlkv]::after {
    right: 34px;
    bottom: 28px;
    width: 360px;
    height: 360px;
    background: rgba(139, 92, 246, 0.13);
}

.tb-hero[b-v0tijqhlkv],
.controls-card[b-v0tijqhlkv],
.balance-banner[b-v0tijqhlkv],
.kpi-card[b-v0tijqhlkv],
.type-card[b-v0tijqhlkv],
.report-card[b-v0tijqhlkv] {
    border: 1px solid var(--border-glass);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.72)),
        radial-gradient(circle at top left, rgba(14, 165, 233, 0.1), transparent 34%),
        radial-gradient(circle at bottom right, rgba(139, 92, 246, 0.08), transparent 36%);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(18px);
}

.tb-hero[b-v0tijqhlkv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 24px 28px;
    border-radius: var(--radius-xl);
}

.hero-main[b-v0tijqhlkv],
.section-title-wrap[b-v0tijqhlkv],
.section-head[b-v0tijqhlkv],
.period-chips[b-v0tijqhlkv],
.control-note[b-v0tijqhlkv],
.balance-banner[b-v0tijqhlkv],
.kpi-top[b-v0tijqhlkv],
.account-cell[b-v0tijqhlkv],
.type-card-head[b-v0tijqhlkv],
.mobile-card-head[b-v0tijqhlkv] {
    display: flex;
    align-items: center;
}

.hero-main[b-v0tijqhlkv] {
    gap: 16px;
}

.hero-icon[b-v0tijqhlkv],
.section-icon[b-v0tijqhlkv],
.banner-icon[b-v0tijqhlkv],
.kpi-icon[b-v0tijqhlkv],
.account-icon[b-v0tijqhlkv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.hero-icon[b-v0tijqhlkv] {
    width: 60px;
    height: 60px;
    border-radius: 23px;
    color: #fff;
    background: linear-gradient(135deg, #0ea5e9, #2563eb 48%, #8b5cf6);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.24);
}

.tb-hero h1[b-v0tijqhlkv] {
    margin: 0;
    color: var(--text-main);
    font-size: clamp(1.8rem, 3vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -0.04em;
}

.tb-hero p[b-v0tijqhlkv],
.section-title-wrap p[b-v0tijqhlkv],
.balance-banner p[b-v0tijqhlkv],
.empty-state p[b-v0tijqhlkv] {
    margin: 3px 0 0;
    color: var(--text-body);
    line-height: 1.55;
}

.refresh-btn[b-v0tijqhlkv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    color: var(--primary-dark);
    background: rgba(224, 245, 255, 0.78);
    font-weight: 850;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.refresh-btn.compact[b-v0tijqhlkv] {
    min-height: 40px;
}

.refresh-btn:hover[b-v0tijqhlkv] {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(14, 165, 233, 0.14);
}

.controls-card[b-v0tijqhlkv],
.report-card[b-v0tijqhlkv] {
    border-radius: 28px;
    padding: 20px;
}

.section-head[b-v0tijqhlkv] {
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.section-title-wrap[b-v0tijqhlkv] {
    gap: 12px;
}

.section-title-wrap h2[b-v0tijqhlkv] {
    margin: 0;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.02em;
}

.section-icon[b-v0tijqhlkv] {
    width: 44px;
    height: 44px;
    border-radius: 17px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.section-icon.report[b-v0tijqhlkv] {
    color: #6d28d9;
    background: var(--credit-soft);
}

.period-chips[b-v0tijqhlkv] {
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.period-chip[b-v0tijqhlkv],
.report-count[b-v0tijqhlkv],
.type-badge[b-v0tijqhlkv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    color: var(--text-body);
    background: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
}

.period-chip.balanced[b-v0tijqhlkv],
.type-badge.income[b-v0tijqhlkv] {
    color: #047857;
    background: var(--success-soft);
    border-color: rgba(16, 185, 129, 0.2);
}

.period-chip.danger[b-v0tijqhlkv] {
    color: #be123c;
    background: var(--danger-soft);
    border-color: rgba(239, 71, 111, 0.2);
}

.period-chip.neutral[b-v0tijqhlkv] {
    color: #475569;
    background: var(--neutral-soft);
}

.controls-grid[b-v0tijqhlkv] {
    display: grid;
    grid-template-columns: minmax(220px, 320px) 1fr;
    gap: 14px;
    align-items: end;
}

.date-field[b-v0tijqhlkv] {
    display: grid;
    gap: 8px;
}

.date-field > span[b-v0tijqhlkv] {
    color: var(--text-body);
    font-size: 0.82rem;
    font-weight: 850;
}

.input-shell[b-v0tijqhlkv] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(104, 155, 200, 0.26);
    border-radius: 18px;
    color: var(--primary-dark);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.date-input[b-v0tijqhlkv] {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text-main);
    font-weight: 800;
}

.control-note[b-v0tijqhlkv] {
    min-height: 48px;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 18px;
    color: var(--text-body);
    background: rgba(255, 255, 255, 0.62);
}

.control-note.balanced[b-v0tijqhlkv] {
    color: #047857;
    background: rgba(220, 252, 231, 0.72);
}

.control-note.danger[b-v0tijqhlkv] {
    color: #be123c;
    background: rgba(255, 228, 236, 0.76);
}

.kpi-grid[b-v0tijqhlkv],
.breakdown-grid[b-v0tijqhlkv] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.kpi-card[b-v0tijqhlkv],
.type-card[b-v0tijqhlkv] {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: 18px;
}

.kpi-card[b-v0tijqhlkv]::after,
.type-card[b-v0tijqhlkv]::after {
    content: "";
    position: absolute;
    right: -42px;
    bottom: -54px;
    width: 150px;
    height: 150px;
    border-radius: 999px;
    background: rgba(14, 165, 233, 0.08);
}

.kpi-top[b-v0tijqhlkv] {
    position: relative;
    z-index: 1;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-body);
    font-size: 0.82rem;
    font-weight: 850;
}

.kpi-icon[b-v0tijqhlkv] {
    width: 40px;
    height: 40px;
    border-radius: 16px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.kpi-card strong[b-v0tijqhlkv] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 14px;
    color: var(--text-main);
    font-size: clamp(1.25rem, 2vw, 1.7rem);
    font-weight: 950;
    letter-spacing: -0.03em;
}

.kpi-card small[b-v0tijqhlkv] {
    position: relative;
    z-index: 1;
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-weight: 750;
}

.kpi-card.debit .kpi-icon[b-v0tijqhlkv],
.type-badge.asset[b-v0tijqhlkv],
.account-icon.asset[b-v0tijqhlkv] {
    color: #0369a1;
    background: var(--asset-soft);
}

.kpi-card.credit .kpi-icon[b-v0tijqhlkv],
.type-badge.equity[b-v0tijqhlkv],
.account-icon.equity[b-v0tijqhlkv] {
    color: #6d28d9;
    background: var(--equity-soft);
}

.kpi-card.balanced .kpi-icon[b-v0tijqhlkv],
.account-icon.income[b-v0tijqhlkv] {
    color: #047857;
    background: var(--success-soft);
}

.kpi-card.danger .kpi-icon[b-v0tijqhlkv] {
    color: #be123c;
    background: var(--danger-soft);
}

.kpi-card.accounts .kpi-icon[b-v0tijqhlkv],
.type-badge.other[b-v0tijqhlkv],
.account-icon.other[b-v0tijqhlkv] {
    color: #475569;
    background: var(--neutral-soft);
}

.balance-banner[b-v0tijqhlkv] {
    gap: 16px;
    padding: 18px 20px;
    border-radius: var(--radius-lg);
}

.banner-icon[b-v0tijqhlkv] {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    color: #475569;
    background: var(--neutral-soft);
}

.balance-banner strong[b-v0tijqhlkv] {
    display: block;
    color: var(--text-main);
    font-size: 1rem;
    font-weight: 950;
}

.balance-banner.balanced .banner-icon[b-v0tijqhlkv] {
    color: #047857;
    background: var(--success-soft);
}

.balance-banner.balanced[b-v0tijqhlkv] {
    border-color: rgba(16, 185, 129, 0.28);
}

.balance-banner.danger .banner-icon[b-v0tijqhlkv] {
    color: #be123c;
    background: var(--danger-soft);
}

.balance-banner.danger[b-v0tijqhlkv] {
    border-color: rgba(239, 71, 111, 0.28);
}

.type-card-head[b-v0tijqhlkv] {
    position: relative;
    z-index: 1;
    gap: 12px;
}

.type-card-head strong[b-v0tijqhlkv] {
    display: block;
    color: var(--text-main);
    font-weight: 950;
}

.type-card-head small[b-v0tijqhlkv] {
    color: var(--text-muted);
    font-weight: 750;
}

.account-icon[b-v0tijqhlkv] {
    width: 42px;
    height: 42px;
    border-radius: 16px;
}

.account-icon.liability[b-v0tijqhlkv],
.type-badge.liability[b-v0tijqhlkv] {
    color: #b45309;
    background: var(--liability-soft);
}

.account-icon.expense[b-v0tijqhlkv],
.type-badge.expense[b-v0tijqhlkv] {
    color: #be123c;
    background: var(--expense-soft);
}

.account-icon.cogs[b-v0tijqhlkv],
.type-badge.cogs[b-v0tijqhlkv] {
    color: #c2410c;
    background: var(--cogs-soft);
}

.type-badge[b-v0tijqhlkv] {
    min-height: 28px;
    padding: 0 10px;
}

.type-amounts[b-v0tijqhlkv] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 16px;
}

.type-amounts div[b-v0tijqhlkv],
.mobile-amount-grid div[b-v0tijqhlkv] {
    padding: 12px;
    border: 1px solid rgba(104, 155, 200, 0.16);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.62);
}

.type-amounts span[b-v0tijqhlkv],
.mobile-amount-grid span[b-v0tijqhlkv] {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.type-amounts strong[b-v0tijqhlkv],
.mobile-amount-grid strong[b-v0tijqhlkv] {
    display: block;
    margin-top: 3px;
    color: var(--text-main);
    font-weight: 950;
}

.table-shell[b-v0tijqhlkv] {
    overflow: auto;
    border: 1px solid rgba(104, 155, 200, 0.16);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.72);
}

.trial-table[b-v0tijqhlkv] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 760px;
}

.trial-table th[b-v0tijqhlkv] {
    padding: 15px 18px;
    color: var(--text-muted);
    background: rgba(248, 252, 255, 0.82);
    font-size: 0.76rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.trial-table td[b-v0tijqhlkv] {
    padding: 15px 18px;
    border-top: 1px solid rgba(104, 155, 200, 0.14);
    color: var(--text-body);
    vertical-align: middle;
}

.trial-table tbody tr[b-v0tijqhlkv] {
    transition: background 0.18s ease, transform 0.18s ease;
}

.trial-table tbody tr:hover[b-v0tijqhlkv] {
    background: rgba(224, 245, 255, 0.38);
}

.trial-table tfoot td[b-v0tijqhlkv] {
    border-top: 1px solid rgba(14, 165, 233, 0.2);
    color: var(--text-main);
    background: rgba(248, 252, 255, 0.88);
    font-weight: 950;
}

.account-cell[b-v0tijqhlkv] {
    gap: 12px;
    min-width: 0;
}

.account-cell strong[b-v0tijqhlkv] {
    display: block;
    color: var(--text-main);
    font-weight: 950;
}

.account-cell small[b-v0tijqhlkv] {
    display: block;
    margin-top: 2px;
    color: var(--text-muted);
    font-weight: 800;
}

.amount-cell[b-v0tijqhlkv] {
    color: var(--text-muted);
    font-weight: 950;
    text-align: right;
    white-space: nowrap;
}

.amount-cell.debit:not(:empty)[b-v0tijqhlkv],
.mobile-amount-grid strong.debit[b-v0tijqhlkv] {
    color: var(--debit);
}

.amount-cell.credit:not(:empty)[b-v0tijqhlkv],
.mobile-amount-grid strong.credit[b-v0tijqhlkv] {
    color: var(--credit);
}

.debit-row .account-cell[b-v0tijqhlkv]::before,
.credit-row .account-cell[b-v0tijqhlkv]::before {
    content: "";
    align-self: stretch;
    width: 4px;
    min-height: 42px;
    border-radius: 999px;
    background: var(--debit);
}

.credit-row .account-cell[b-v0tijqhlkv]::before {
    background: var(--credit);
}

.mobile-balance-list[b-v0tijqhlkv] {
    display: none;
}

.mobile-balance-card[b-v0tijqhlkv] {
    border: 1px solid rgba(104, 155, 200, 0.16);
    border-radius: 22px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.72);
}

.mobile-card-head[b-v0tijqhlkv] {
    justify-content: space-between;
    gap: 12px;
}

.mobile-amount-grid[b-v0tijqhlkv] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 12px;
}

.empty-state[b-v0tijqhlkv] {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 46px 20px;
    text-align: center;
}

.empty-state > span[b-v0tijqhlkv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 22px;
    color: var(--primary-dark);
    background: var(--primary-soft);
}

.empty-state strong[b-v0tijqhlkv] {
    color: var(--text-main);
    font-size: 1.05rem;
    font-weight: 950;
}

@media (max-width: 1200px) {
    .kpi-grid[b-v0tijqhlkv],
    .breakdown-grid[b-v0tijqhlkv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .trial-balance-page[b-v0tijqhlkv] {
        padding-inline: 12px !important;
    }

    .tb-hero[b-v0tijqhlkv],
    .section-head[b-v0tijqhlkv],
    .controls-grid[b-v0tijqhlkv],
    .balance-banner[b-v0tijqhlkv] {
        align-items: stretch;
        flex-direction: column;
    }

    .tb-hero[b-v0tijqhlkv] {
        padding: 20px;
    }

    .controls-grid[b-v0tijqhlkv],
    .kpi-grid[b-v0tijqhlkv],
    .breakdown-grid[b-v0tijqhlkv] {
        grid-template-columns: 1fr;
    }

    .period-chips[b-v0tijqhlkv] {
        justify-content: flex-start;
    }

    .table-shell[b-v0tijqhlkv] {
        display: none;
    }

    .mobile-balance-list[b-v0tijqhlkv] {
        display: grid;
        gap: 12px;
    }
}

@media (max-width: 520px) {
    .hero-main[b-v0tijqhlkv] {
        align-items: flex-start;
    }

    .hero-icon[b-v0tijqhlkv] {
        width: 52px;
        height: 52px;
        border-radius: 20px;
    }

    .mobile-card-head[b-v0tijqhlkv],
    .mobile-amount-grid[b-v0tijqhlkv] {
        grid-template-columns: 1fr;
    }

    .mobile-card-head[b-v0tijqhlkv] {
        align-items: flex-start;
    }
}
/* /Components/Pages/UserFormPage.razor.rz.scp.css */
@keyframes userFormRise-b-wi4xasonva {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes userFormPulse-b-wi4xasonva {
    0%, 100% {
        opacity: .46;
    }

    50% {
        opacity: 1;
    }
}

.user-form-page[b-wi4xasonva] {
    position: relative;
    box-sizing: border-box;
    display: block;
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 28px 32px 36px;
    color: var(--text-body, #4e6274);
    font-family: "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    isolation: isolate;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
}

.user-form-page[b-wi4xasonva]::before,
.user-form-page[b-wi4xasonva]::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    filter: blur(16px);
}

.user-form-page[b-wi4xasonva]::before {
    width: 34vw;
    min-width: 320px;
    aspect-ratio: 1;
    left: 4%;
    top: 2%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.user-form-page[b-wi4xasonva]::after {
    width: 36vw;
    min-width: 320px;
    aspect-ratio: 1;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 35% 35%, rgba(139, 92, 246, .13), transparent 56%),
        radial-gradient(circle at 72% 72%, rgba(236, 72, 153, .12), transparent 58%);
}

.user-form-shell[b-wi4xasonva] {
    display: grid;
    gap: 18px;
    width: min(100%, 1240px);
    margin: 0 auto;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(248, 252, 255, .54)),
        rgba(255, 255, 255, .36);
    box-shadow: var(--shadow-soft, 0 18px 45px rgba(23, 55, 90, .08));
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: userFormRise-b-wi4xasonva .32s ease-out both;
}

.user-form-hero[b-wi4xasonva],
.user-form-card[b-wi4xasonva] {
    border: 1px solid rgba(255, 255, 255, .76);
    background: rgba(255, 255, 255, .88);
    box-shadow: var(--shadow-card, 0 10px 26px rgba(23, 55, 90, .07));
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.user-form-hero[b-wi4xasonva] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    padding: 26px;
    border-radius: 30px;
}

.user-form-hero[b-wi4xasonva]::after {
    content: "";
    position: absolute;
    right: 36px;
    bottom: -120px;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(14, 165, 233, .14), transparent 68%);
    pointer-events: none;
}

.user-form-title-wrap[b-wi4xasonva] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.user-form-hero-icon[b-wi4xasonva] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    color: white;
    font-size: 1.35rem;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--primary-dark, #0369a1));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .24);
}

.user-form-hero h1[b-wi4xasonva] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.user-form-hero p[b-wi4xasonva] {
    margin: 8px 0 0;
    max-width: 620px;
    color: var(--text-muted, #8a9aaa);
    font-size: .95rem;
    line-height: 1.45;
}

.user-form-meta[b-wi4xasonva] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.user-form-meta span[b-wi4xasonva],
.user-mode-pill[b-wi4xasonva] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 11px;
    color: var(--primary-dark, #0369a1);
    font-size: .76rem;
    font-weight: 850;
    border: 1px solid rgba(14, 165, 233, .13);
    border-radius: 999px;
    background: rgba(224, 245, 255, .78);
}

.user-form-hero-actions[b-wi4xasonva] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.user-mode-pill[b-wi4xasonva] {
    color: #6d28d9;
    border-color: rgba(139, 92, 246, .14);
    background: rgba(237, 233, 254, .8);
}

.user-form-card[b-wi4xasonva] {
    overflow: hidden;
    border-radius: 28px;
}

.user-profile-card[b-wi4xasonva] {
    padding: 28px;
}

.user-card-header[b-wi4xasonva] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 26px;
}

.user-card-header.compact[b-wi4xasonva] {
    margin-bottom: 14px;
}

.user-section-kicker[b-wi4xasonva] {
    display: block;
    margin-bottom: 6px;
    color: var(--primary-dark, #0369a1);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.user-card-header h2[b-wi4xasonva],
.user-section-heading h3[b-wi4xasonva],
.user-loading-card h2[b-wi4xasonva] {
    margin: 0;
    color: var(--text-main, #102033);
    font-weight: 900;
    letter-spacing: -.035em;
}

.user-card-header h2[b-wi4xasonva],
.user-loading-card h2[b-wi4xasonva] {
    font-size: 1.38rem;
}

.user-card-header p[b-wi4xasonva],
.user-section-heading p[b-wi4xasonva],
.user-loading-card p[b-wi4xasonva] {
    margin: 6px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .9rem;
    line-height: 1.45;
}

.user-preview-chip[b-wi4xasonva] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 230px;
    padding: 11px 14px;
    border: 1px solid rgba(120, 170, 210, .18);
    border-radius: 20px;
    background: rgba(248, 252, 255, .76);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

.user-preview-avatar[b-wi4xasonva] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: var(--primary-dark, #0369a1);
    font-size: .82rem;
    font-weight: 900;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .92), transparent 36%),
        linear-gradient(135deg, rgba(224, 245, 255, .96), rgba(219, 234, 254, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(14, 165, 233, .12);
}

.user-preview-chip strong[b-wi4xasonva],
.user-preview-chip small[b-wi4xasonva] {
    display: block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-preview-chip strong[b-wi4xasonva] {
    color: var(--text-main, #102033);
    font-size: .92rem;
    font-weight: 850;
}

.user-preview-chip small[b-wi4xasonva] {
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
}

.user-form-section[b-wi4xasonva] {
    padding: 22px;
    border: 1px solid rgba(120, 170, 210, .14);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(248, 252, 255, .68));
}

.user-form-section + .user-form-section[b-wi4xasonva] {
    margin-top: 18px;
}

.password-section[b-wi4xasonva] {
    background:
        radial-gradient(circle at 95% 0%, rgba(236, 72, 153, .08), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, .82), rgba(248, 252, 255, .7));
}

.user-section-heading[b-wi4xasonva] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 18px;
}

.user-section-heading h3[b-wi4xasonva] {
    font-size: 1.08rem;
}

.user-section-icon[b-wi4xasonva] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    color: var(--primary-dark, #0369a1);
    border-radius: 16px;
    background: rgba(224, 245, 255, .88);
}

.user-section-icon.violet[b-wi4xasonva] {
    color: #6d28d9;
    background: rgba(237, 233, 254, .86);
}

.user-section-icon.rose[b-wi4xasonva] {
    color: #be185d;
    background: rgba(252, 231, 243, .86);
}

.user-input-grid[b-wi4xasonva] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 18px;
}

.access-grid[b-wi4xasonva] {
    grid-template-columns: minmax(0, 1fr) minmax(240px, .72fr);
}

.user-field[b-wi4xasonva] {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.user-field > span:first-child[b-wi4xasonva] {
    color: var(--text-main, #102033);
    font-size: .82rem;
    font-weight: 800;
}

.user-field em[b-wi4xasonva] {
    color: var(--danger, #ef476f);
    font-style: normal;
}

.user-input[b-wi4xasonva] {
    min-height: 46px;
    padding: 10px 14px;
    color: var(--text-main, #102033) !important;
    font-size: .93rem;
    border: 1px solid rgba(120, 170, 210, .22) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(23, 55, 90, .04) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}

.user-input[b-wi4xasonva]::placeholder {
    color: var(--text-soft, #9aaaba);
}

.user-input:hover[b-wi4xasonva] {
    border-color: rgba(14, 165, 233, .34) !important;
    background: rgba(255, 255, 255, .96) !important;
}

.user-input:focus[b-wi4xasonva] {
    border-color: rgba(14, 165, 233, .72) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .12), 0 10px 22px rgba(14, 165, 233, .07) !important;
}

.user-select-wrap[b-wi4xasonva],
.user-password-wrap[b-wi4xasonva] {
    position: relative;
    display: block;
}

.user-select[b-wi4xasonva] {
    appearance: none;
    padding-right: 42px;
}

.user-select-wrap > i[b-wi4xasonva] {
    position: absolute;
    right: 15px;
    top: 50%;
    color: var(--text-soft, #9aaaba);
    font-size: .76rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.user-password-wrap .user-input[b-wi4xasonva] {
    padding-right: 48px;
}

.user-password-toggle[b-wi4xasonva] {
    position: absolute;
    right: 7px;
    top: 50%;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    color: var(--text-muted, #8a9aaa);
    border: 0;
    border-radius: 12px;
    background: transparent;
    transform: translateY(-50%);
    transition: color .18s ease, background .18s ease;
}

.user-settings-grid[b-wi4xasonva] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.user-setting-card[b-wi4xasonva] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 82px;
    padding: 15px;
    border: 1px solid rgba(120, 170, 210, .16);
    border-radius: 20px;
    background: rgba(255, 255, 255, .74);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

.user-setting-icon[b-wi4xasonva] {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    color: #047857;
    border-radius: 16px;
    background: rgba(220, 252, 231, .88);
}

.password-setting .user-setting-icon[b-wi4xasonva] {
    color: #7c3aed;
    background: rgba(237, 233, 254, .88);
}

.user-setting-copy strong[b-wi4xasonva],
.user-setting-copy small[b-wi4xasonva] {
    display: block;
}

.user-setting-copy strong[b-wi4xasonva] {
    color: var(--text-main, #102033);
    font-size: .91rem;
    font-weight: 850;
}

.user-setting-copy small[b-wi4xasonva] {
    margin-top: 3px;
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
    line-height: 1.35;
}

.user-switch[b-wi4xasonva] {
    display: grid;
    place-items: center;
    min-height: 38px;
    padding: 0;
    margin: 0;
}

.user-switch .form-check-input[b-wi4xasonva] {
    width: 48px;
    height: 27px;
    margin: 0;
    cursor: pointer;
    border: 0;
    background-color: #dbe7f0;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12);
}

.user-switch .form-check-input:checked[b-wi4xasonva] {
    background-color: var(--success, #10b981);
}

.user-switch.warning .form-check-input:checked[b-wi4xasonva] {
    background-color: var(--violet, #8b5cf6);
}

.user-form-footer[b-wi4xasonva] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(226, 232, 240, .74);
}

.user-ghost-button[b-wi4xasonva],
.user-save-button[b-wi4xasonva] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    font-size: .88rem;
    font-weight: 850;
    border-radius: 16px !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.user-ghost-button[b-wi4xasonva] {
    color: var(--text-main, #102033) !important;
    border: 1px solid rgba(120, 170, 210, .2) !important;
    background: rgba(255, 255, 255, .7) !important;
    box-shadow: none !important;
}

.user-save-button[b-wi4xasonva] {
    color: white !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--primary-dark, #0369a1)) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .24);
}

.user-loading-card[b-wi4xasonva] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 220px;
    padding: 30px;
}

.user-loading-orb[b-wi4xasonva] {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 24px;
    background: rgba(224, 245, 255, .88);
}

.user-login-card[b-wi4xasonva] {
    padding: 24px;
}

.user-login-table-wrap[b-wi4xasonva] {
    overflow: auto;
    border: 1px solid rgba(226, 232, 240, .74);
    border-radius: 20px;
}

.user-login-table[b-wi4xasonva] {
    color: var(--text-body, #4e6274);
    border-collapse: separate;
    border-spacing: 0;
}

.user-login-table thead[b-wi4xasonva] {
    background: rgba(240, 249, 255, .95);
}

.user-login-table th[b-wi4xasonva] {
    padding: 14px 16px;
    color: var(--text-muted, #8a9aaa);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
    border: 0;
    white-space: nowrap;
}

.user-login-table td[b-wi4xasonva] {
    padding: 14px 16px;
    border-color: rgba(226, 232, 240, .72);
    font-size: .88rem;
}

.user-attempt-badge[b-wi4xasonva] {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    font-size: .76rem;
    font-weight: 850;
    border-radius: 999px;
}

.user-attempt-badge.success[b-wi4xasonva] {
    color: #047857;
    background: rgba(220, 252, 231, .88);
}

.user-attempt-badge.failed[b-wi4xasonva] {
    color: #b91c45;
    background: rgba(255, 241, 242, .92);
}

.user-empty-logins[b-wi4xasonva] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 82px;
    padding: 18px;
    color: var(--text-muted, #8a9aaa);
    font-weight: 750;
    border: 1px dashed rgba(120, 170, 210, .24);
    border-radius: 20px;
    background: rgba(248, 252, 255, .72);
}

.user-empty-logins i[b-wi4xasonva] {
    color: var(--primary, #0ea5e9);
}

@media (hover: hover) and (pointer: fine) {
    .user-ghost-button:hover[b-wi4xasonva],
    .user-save-button:hover[b-wi4xasonva] {
        transform: translateY(-1px);
    }

    .user-save-button:hover[b-wi4xasonva] {
        box-shadow: 0 20px 40px rgba(14, 165, 233, .32);
    }

    .user-password-toggle:hover[b-wi4xasonva] {
        color: var(--primary-dark, #0369a1);
        background: rgba(224, 245, 255, .78);
    }
}

.user-ghost-button:focus-visible[b-wi4xasonva],
.user-save-button:focus-visible[b-wi4xasonva],
.user-password-toggle:focus-visible[b-wi4xasonva],
.user-input:focus-visible[b-wi4xasonva],
.user-switch .form-check-input:focus-visible[b-wi4xasonva] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .user-form-page[b-wi4xasonva] {
        padding: 22px 18px 30px;
    }

    .user-form-shell[b-wi4xasonva] {
        padding: 16px;
        border-radius: 28px;
    }

    .user-form-hero[b-wi4xasonva] {
        align-items: stretch;
        flex-direction: column;
    }

    .user-form-hero-actions[b-wi4xasonva] {
        justify-content: flex-start;
    }

    .user-card-header[b-wi4xasonva] {
        flex-direction: column;
    }

    .user-preview-chip[b-wi4xasonva] {
        width: 100%;
    }

    .access-grid[b-wi4xasonva],
    .user-settings-grid[b-wi4xasonva] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .user-form-page[b-wi4xasonva] {
        padding: 18px 10px 26px;
    }

    .user-form-shell[b-wi4xasonva] {
        gap: 14px;
        padding: 12px;
    }

    .user-form-hero[b-wi4xasonva],
    .user-profile-card[b-wi4xasonva],
    .user-login-card[b-wi4xasonva] {
        padding: 20px;
        border-radius: 24px;
    }

    .user-form-title-wrap[b-wi4xasonva] {
        align-items: flex-start;
    }

    .user-form-hero-icon[b-wi4xasonva] {
        flex-basis: 52px;
        width: 52px;
        height: 52px;
        border-radius: 19px;
    }

    .user-form-hero h1[b-wi4xasonva] {
        font-size: 1.7rem;
    }

    .user-form-hero-actions[b-wi4xasonva],
    .user-form-footer[b-wi4xasonva],
    .user-input-grid[b-wi4xasonva] {
        grid-template-columns: 1fr;
    }

    .user-input-grid[b-wi4xasonva] {
        display: grid;
    }

    .user-form-footer[b-wi4xasonva] {
        display: grid;
    }

    .user-ghost-button[b-wi4xasonva],
    .user-save-button[b-wi4xasonva] {
        width: 100%;
    }

    .user-form-section[b-wi4xasonva] {
        padding: 18px;
        border-radius: 22px;
    }

    .user-setting-card[b-wi4xasonva] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .user-switch[b-wi4xasonva] {
        grid-column: 1 / -1;
        justify-content: start;
        place-items: center start;
    }

    .user-login-table[b-wi4xasonva],
    .user-login-table thead[b-wi4xasonva],
    .user-login-table tbody[b-wi4xasonva],
    .user-login-table tr[b-wi4xasonva],
    .user-login-table th[b-wi4xasonva],
    .user-login-table td[b-wi4xasonva] {
        display: block;
    }

    .user-login-table thead[b-wi4xasonva] {
        display: none;
    }

    .user-login-table tbody[b-wi4xasonva] {
        display: grid;
        gap: 12px;
        padding: 12px;
    }

    .user-login-table tr[b-wi4xasonva] {
        display: grid;
        gap: 9px;
        padding: 14px;
        border: 1px solid rgba(226, 232, 240, .8);
        border-radius: 18px;
        background: rgba(255, 255, 255, .82);
    }

    .user-login-table td[b-wi4xasonva] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
        border: 0;
        text-align: right;
    }

    .user-login-table td[b-wi4xasonva]::before {
        content: attr(data-label);
        color: var(--text-soft, #9aaaba);
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .07em;
        text-transform: uppercase;
    }
}

@media (max-width: 430px) {
    .user-form-page[b-wi4xasonva] {
        padding-inline: 8px;
    }

    .user-section-heading[b-wi4xasonva] {
        display: grid;
    }

    .user-form-meta[b-wi4xasonva] {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .user-form-shell[b-wi4xasonva] {
        animation: none !important;
    }

    .user-input[b-wi4xasonva],
    .user-ghost-button[b-wi4xasonva],
    .user-save-button[b-wi4xasonva],
    .user-password-toggle[b-wi4xasonva] {
        transition: none !important;
    }
}
/* /Components/Pages/UsersPage.razor.rz.scp.css */
@keyframes usersRise-b-jv4yx6ve0c {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes usersPulse-b-jv4yx6ve0c {
    0%, 100% {
        opacity: .48;
    }

    50% {
        opacity: 1;
    }
}

.user-accounts-page[b-jv4yx6ve0c] {
    position: relative;
    min-height: 100%;
    padding: 28px 32px 36px;
    color: var(--text-body, #4e6274);
    font-family: "Inter", "Manrope", "Segoe UI", system-ui, sans-serif;
    isolation: isolate;
}

.user-accounts-page[b-jv4yx6ve0c]::before,
.user-accounts-page[b-jv4yx6ve0c]::after {
    content: "";
    position: fixed;
    pointer-events: none;
    z-index: -1;
    border-radius: 999px;
    filter: blur(16px);
}

.user-accounts-page[b-jv4yx6ve0c]::before {
    width: 34vw;
    min-width: 320px;
    aspect-ratio: 1;
    left: 6%;
    top: 2%;
    background: radial-gradient(circle, rgba(14, 165, 233, .2), transparent 66%);
}

.user-accounts-page[b-jv4yx6ve0c]::after {
    width: 30vw;
    min-width: 280px;
    aspect-ratio: 1;
    right: 3%;
    bottom: 0;
    background:
        radial-gradient(circle at 38% 42%, rgba(139, 92, 246, .13), transparent 58%),
        radial-gradient(circle at 72% 68%, rgba(236, 72, 153, .1), transparent 56%);
}

.user-accounts-shell[b-jv4yx6ve0c] {
    display: grid;
    gap: 22px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .7), rgba(248, 252, 255, .5)),
        rgba(255, 255, 255, .34);
    box-shadow: 0 18px 45px rgba(23, 55, 90, .08);
    backdrop-filter: blur(18px) saturate(145%);
    -webkit-backdrop-filter: blur(18px) saturate(145%);
    animation: usersRise-b-jv4yx6ve0c .3s ease-out both;
}

.user-accounts-hero[b-jv4yx6ve0c],
.user-summary-card[b-jv4yx6ve0c],
.user-toolbar[b-jv4yx6ve0c],
.user-table-card[b-jv4yx6ve0c] {
    border: 1px solid rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 10px 26px rgba(23, 55, 90, .07);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.user-accounts-hero[b-jv4yx6ve0c] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px;
    overflow: hidden;
    border-radius: 30px;
}

.user-accounts-hero[b-jv4yx6ve0c]::after {
    content: "";
    position: absolute;
    right: 42px;
    bottom: -110px;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(14, 165, 233, .14), transparent 68%);
    pointer-events: none;
}

.user-accounts-title-wrap[b-jv4yx6ve0c] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.user-accounts-icon[b-jv4yx6ve0c] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    color: white;
    font-size: 1.35rem;
    border-radius: 21px;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--primary-dark, #0369a1));
    box-shadow: 0 18px 34px rgba(14, 165, 233, .24);
}

.user-accounts-hero h1[b-jv4yx6ve0c] {
    margin: 0;
    color: var(--text-main, #102033);
    font-size: clamp(1.85rem, 2.8vw, 2.35rem);
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.user-accounts-hero p[b-jv4yx6ve0c] {
    margin: 7px 0 0;
    color: var(--text-muted, #8a9aaa);
    font-size: .95rem;
    line-height: 1.45;
}

.user-primary-action[b-jv4yx6ve0c] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 18px;
    color: white !important;
    font-size: .9rem;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--primary, #0ea5e9), var(--primary-dark, #0369a1)) !important;
    box-shadow: 0 16px 30px rgba(14, 165, 233, .24);
    transition: transform .18s ease, box-shadow .18s ease;
}

.user-summary-grid[b-jv4yx6ve0c] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.user-summary-card[b-jv4yx6ve0c] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    min-height: 134px;
    padding: 18px;
    border-radius: 24px;
}

.user-summary-icon[b-jv4yx6ve0c] {
    display: inline-grid;
    grid-row: span 3;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--primary-dark, #0369a1);
    border-radius: 17px;
    background: rgba(14, 165, 233, .1);
}

.user-summary-card.active .user-summary-icon[b-jv4yx6ve0c] {
    color: #047857;
    background: rgba(16, 185, 129, .12);
}

.user-summary-card.roles .user-summary-icon[b-jv4yx6ve0c] {
    color: #6d28d9;
    background: rgba(139, 92, 246, .12);
}

.user-summary-card.contact .user-summary-icon[b-jv4yx6ve0c] {
    color: #be185d;
    background: rgba(236, 72, 153, .11);
}

.user-summary-label[b-jv4yx6ve0c] {
    align-self: end;
    color: var(--text-muted, #8a9aaa);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.user-summary-card strong[b-jv4yx6ve0c] {
    color: var(--text-main, #102033);
    font-size: 1.85rem;
    font-weight: 950;
    letter-spacing: -.04em;
    line-height: 1;
}

.user-summary-card small[b-jv4yx6ve0c] {
    color: var(--text-muted, #8a9aaa);
    font-size: .82rem;
}

.user-toolbar[b-jv4yx6ve0c] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(150px, 190px) minmax(140px, 170px) auto auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border-radius: 24px;
}

.user-search-field[b-jv4yx6ve0c] {
    position: relative;
}

.user-search-field i[b-jv4yx6ve0c] {
    position: absolute;
    left: 15px;
    top: 50%;
    color: var(--text-soft, #9aaaba);
    transform: translateY(-50%);
    pointer-events: none;
}

.user-search-field .form-control[b-jv4yx6ve0c],
.user-filter-select[b-jv4yx6ve0c] {
    min-height: 44px;
    padding-inline: 42px 14px;
    color: var(--text-main, #102033) !important;
    border-radius: 16px !important;
    border-color: rgba(120, 170, 210, .2) !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 8px 18px rgba(23, 55, 90, .04) !important;
}

.user-filter-select[b-jv4yx6ve0c] {
    padding-inline: 14px 36px;
}

.user-reset-button[b-jv4yx6ve0c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 15px;
    color: var(--text-main, #102033) !important;
    font-weight: 800;
    border-radius: 16px !important;
    border: 1px solid rgba(120, 170, 210, .2) !important;
    background: rgba(255, 255, 255, .68) !important;
    box-shadow: none !important;
}

.user-result-count[b-jv4yx6ve0c] {
    justify-self: end;
    color: var(--text-muted, #8a9aaa);
    font-size: .85rem;
    font-weight: 800;
    white-space: nowrap;
}

.user-table-card[b-jv4yx6ve0c] {
    overflow: hidden;
    border-radius: 24px;
}

.user-table-wrap[b-jv4yx6ve0c] {
    min-height: 220px;
    overflow: auto;
}

.user-accounts-table[b-jv4yx6ve0c] {
    margin: 0;
    color: var(--text-body, #4e6274);
    border-collapse: separate;
    border-spacing: 0;
}

.user-accounts-table thead[b-jv4yx6ve0c] {
    position: sticky;
    top: 0;
    z-index: 3;
    background: rgba(240, 249, 255, .96) !important;
    box-shadow: 0 1px 0 rgba(186, 230, 253, .64);
}

.user-accounts-table th[b-jv4yx6ve0c] {
    padding: 15px 18px;
    color: var(--text-muted, #8a9aaa);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
    border: 0;
    white-space: nowrap;
}

.user-accounts-table td[b-jv4yx6ve0c] {
    padding: 15px 18px;
    vertical-align: middle;
    border-color: rgba(226, 232, 240, .72);
    font-size: .9rem;
}

.user-accounts-table tbody tr[b-jv4yx6ve0c] {
    background: rgba(255, 255, 255, .54);
    transition: background .18s ease, transform .18s ease;
}

.user-name-cell[b-jv4yx6ve0c] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 210px;
}

.user-avatar[b-jv4yx6ve0c] {
    display: inline-grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: var(--primary-dark, #0369a1);
    font-size: .85rem;
    font-weight: 900;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 22%, rgba(255, 255, 255, .9), transparent 36%),
        linear-gradient(135deg, rgba(224, 245, 255, .96), rgba(219, 234, 254, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 8px 18px rgba(14, 165, 233, .12);
}

.user-name-cell strong[b-jv4yx6ve0c] {
    display: block;
    color: var(--text-main, #102033);
    font-size: .98rem;
    font-weight: 850;
    line-height: 1.15;
}

.user-name-cell small[b-jv4yx6ve0c] {
    display: none;
    margin-top: 3px;
    color: var(--text-muted, #8a9aaa);
    font-size: .78rem;
}

.user-username-pill[b-jv4yx6ve0c],
.user-role-badge[b-jv4yx6ve0c],
.user-status-badge[b-jv4yx6ve0c] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.user-username-pill[b-jv4yx6ve0c] {
    color: #335068;
    font-family: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", monospace;
    background: rgba(241, 245, 249, .82);
}

.user-missing-value[b-jv4yx6ve0c] {
    color: var(--text-soft, #9aaaba);
    font-style: italic;
}

.user-role-badge[b-jv4yx6ve0c] {
    color: #0369a1;
    background: rgba(224, 245, 255, .88);
}

.role-parent[b-jv4yx6ve0c],
.role-finance[b-jv4yx6ve0c] {
    color: #0e7490;
    background: rgba(207, 250, 254, .78);
}

.role-teacher[b-jv4yx6ve0c],
.role-registrar[b-jv4yx6ve0c] {
    color: #6d28d9;
    background: rgba(237, 233, 254, .86);
}

.role-superadmin[b-jv4yx6ve0c] {
    color: #be185d;
    background: rgba(252, 231, 243, .86);
}

.role-admin[b-jv4yx6ve0c] {
    color: #1e3a5f;
    background: rgba(226, 232, 240, .86);
}

.role-student[b-jv4yx6ve0c] {
    color: #2563eb;
    background: rgba(219, 234, 254, .86);
}

.user-status-badge[b-jv4yx6ve0c] {
    color: #047857;
    background: rgba(220, 252, 231, .88);
}

.user-status-badge span[b-jv4yx6ve0c] {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}

.user-status-badge.inactive[b-jv4yx6ve0c] {
    color: #b91c45;
    background: rgba(255, 241, 242, .9);
}

.user-status-badge.inactive span[b-jv4yx6ve0c] {
    box-shadow: 0 0 0 4px rgba(239, 71, 111, .1);
}

.user-action-button[b-jv4yx6ve0c] {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    color: var(--primary-dark, #0369a1);
    border: 1px solid rgba(14, 165, 233, .16);
    border-radius: 14px;
    background: rgba(240, 249, 255, .86);
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.user-empty-state[b-jv4yx6ve0c],
.user-table-loading[b-jv4yx6ve0c] {
    min-height: 360px;
    padding: 32px;
}

.user-empty-state[b-jv4yx6ve0c] {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    text-align: center;
}

.user-empty-icon[b-jv4yx6ve0c] {
    display: inline-grid;
    place-items: center;
    width: 68px;
    height: 68px;
    color: var(--primary, #0ea5e9);
    font-size: 1.65rem;
    border-radius: 24px;
    background: rgba(224, 245, 255, .88);
}

.user-empty-state h2[b-jv4yx6ve0c] {
    margin: 8px 0 0;
    color: var(--text-main, #102033);
    font-size: 1.35rem;
    font-weight: 900;
}

.user-empty-state p[b-jv4yx6ve0c] {
    margin: 0 0 8px;
    color: var(--text-muted, #8a9aaa);
}

.user-table-loading[b-jv4yx6ve0c] {
    display: grid;
    align-content: start;
    gap: 10px;
}

.user-skeleton-row[b-jv4yx6ve0c] {
    display: grid;
    grid-template-columns: 42px minmax(160px, 1.3fr) minmax(140px, 1fr) 90px;
    gap: 14px;
    align-items: center;
    padding: 14px;
    border-radius: 18px;
    background: rgba(248, 252, 255, .72);
}

.user-skeleton-row span[b-jv4yx6ve0c],
.user-skeleton-row strong[b-jv4yx6ve0c],
.user-skeleton-row small[b-jv4yx6ve0c],
.user-skeleton-row em[b-jv4yx6ve0c] {
    display: block;
    height: 14px;
    border-radius: 999px;
    background: #dbeafe;
    animation: usersPulse-b-jv4yx6ve0c 1.2s ease-in-out infinite;
}

.user-skeleton-row span[b-jv4yx6ve0c] {
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

.user-skeleton-row strong[b-jv4yx6ve0c] {
    width: 80%;
}

.user-skeleton-row small[b-jv4yx6ve0c] {
    width: 62%;
}

.user-skeleton-row em[b-jv4yx6ve0c] {
    width: 90px;
}

@media (hover: hover) and (pointer: fine) {
    .user-primary-action:hover[b-jv4yx6ve0c],
    .user-action-button:hover[b-jv4yx6ve0c],
    .user-reset-button:hover:not(:disabled)[b-jv4yx6ve0c] {
        transform: translateY(-1px);
    }

    .user-primary-action:hover[b-jv4yx6ve0c] {
        box-shadow: 0 20px 40px rgba(14, 165, 233, .32);
    }

    .user-action-button:hover[b-jv4yx6ve0c] {
        color: white;
        background: var(--primary, #0ea5e9);
        box-shadow: 0 12px 24px rgba(14, 165, 233, .22);
    }

    .user-accounts-table tbody tr:hover[b-jv4yx6ve0c] {
        background: rgba(14, 165, 233, .04);
    }
}

.user-primary-action:focus-visible[b-jv4yx6ve0c],
.user-action-button:focus-visible[b-jv4yx6ve0c],
.user-reset-button:focus-visible[b-jv4yx6ve0c],
.user-search-field .form-control:focus-visible[b-jv4yx6ve0c],
.user-filter-select:focus-visible[b-jv4yx6ve0c] {
    outline: 3px solid rgba(14, 165, 233, .24);
    outline-offset: 2px;
}

@media (max-width: 1199.98px) {
    .user-summary-grid[b-jv4yx6ve0c] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .user-toolbar[b-jv4yx6ve0c] {
        grid-template-columns: minmax(220px, 1fr) minmax(150px, 1fr) minmax(140px, 1fr);
    }

    .user-result-count[b-jv4yx6ve0c] {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

@media (max-width: 767.98px) {
    .user-accounts-page[b-jv4yx6ve0c] {
        padding: 18px 12px 26px;
    }

    .user-accounts-shell[b-jv4yx6ve0c] {
        gap: 16px;
        padding: 14px;
        border-radius: 26px;
    }

    .user-accounts-hero[b-jv4yx6ve0c] {
        align-items: stretch;
        flex-direction: column;
        padding: 22px;
    }

    .user-accounts-title-wrap[b-jv4yx6ve0c] {
        align-items: flex-start;
    }

    .user-primary-action[b-jv4yx6ve0c] {
        width: 100%;
    }

    .user-toolbar[b-jv4yx6ve0c],
    .user-summary-grid[b-jv4yx6ve0c] {
        grid-template-columns: 1fr;
    }

    .user-table-wrap[b-jv4yx6ve0c] {
        max-height: none;
        overflow: visible;
    }

    .user-accounts-table[b-jv4yx6ve0c],
    .user-accounts-table thead[b-jv4yx6ve0c],
    .user-accounts-table tbody[b-jv4yx6ve0c],
    .user-accounts-table tr[b-jv4yx6ve0c],
    .user-accounts-table th[b-jv4yx6ve0c],
    .user-accounts-table td[b-jv4yx6ve0c] {
        display: block;
    }

    .user-accounts-table thead[b-jv4yx6ve0c] {
        display: none;
    }

    .user-accounts-table tbody[b-jv4yx6ve0c] {
        display: grid;
        gap: 12px;
        padding: 12px;
    }

    .user-accounts-table tbody tr[b-jv4yx6ve0c] {
        display: grid;
        gap: 10px;
        padding: 16px;
        border: 1px solid rgba(226, 232, 240, .8);
        border-radius: 20px;
        background: rgba(255, 255, 255, .82);
        box-shadow: 0 8px 18px rgba(23, 55, 90, .05);
    }

    .user-accounts-table td[b-jv4yx6ve0c] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
        border: 0;
        text-align: right !important;
    }

    .user-accounts-table td[b-jv4yx6ve0c]::before {
        content: attr(data-label);
        color: var(--text-soft, #9aaaba);
        font-size: .68rem;
        font-weight: 850;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .user-accounts-table td:first-child[b-jv4yx6ve0c] {
        display: block;
        text-align: left !important;
    }

    .user-accounts-table td:first-child[b-jv4yx6ve0c]::before {
        display: none;
    }

    .user-name-cell[b-jv4yx6ve0c] {
        min-width: 0;
    }

    .user-name-cell small[b-jv4yx6ve0c] {
        display: block;
    }

    .user-accounts-table td[data-label="Username"][b-jv4yx6ve0c] {
        display: none;
    }

    .user-action-button[b-jv4yx6ve0c] {
        margin-left: auto;
    }
}

@media (max-width: 430px) {
    .user-accounts-page[b-jv4yx6ve0c] {
        padding-inline: 8px;
    }

    .user-accounts-icon[b-jv4yx6ve0c] {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 18px;
    }

    .user-accounts-hero h1[b-jv4yx6ve0c] {
        font-size: 1.65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .user-accounts-shell[b-jv4yx6ve0c],
    .user-skeleton-row span[b-jv4yx6ve0c],
    .user-skeleton-row strong[b-jv4yx6ve0c],
    .user-skeleton-row small[b-jv4yx6ve0c],
    .user-skeleton-row em[b-jv4yx6ve0c] {
        animation: none !important;
    }

    .user-primary-action[b-jv4yx6ve0c],
    .user-action-button[b-jv4yx6ve0c],
    .user-reset-button[b-jv4yx6ve0c],
    .user-accounts-table tbody tr[b-jv4yx6ve0c] {
        transition: none !important;
    }
}