/* ============================================
   LawTrack — Apple iOS 18 Design System
   Inspired by Apple Health, Reminders & Settings
   ============================================ */

@font-face { font-family: 'Reddit Sans'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../fonts/reddit-sans.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/nunito-sans.woff2') format('woff2'); }

/* ---------- UniMate landing design system (matches pw.live-style homepage) ---------- */
:root { --brand: #5a4bda; --brand-dark: #4437b8; --brand-50: #f1efff; }
h1, h2, h3, h4, h5, h6 { font-family: 'Reddit Sans', 'Nunito Sans', sans-serif; }
body.font-sans { font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }

/* ---------- Apple Font Stack & Base ---------- */
:root {
    --ios-bg: #F8FAFC;
    --ios-card: #FFFFFF;
    --ios-card-secondary: #F9F9FB;
    --ios-blue: #5a4bda; /* brand: matches landing */
    --ios-green: #34C759;
    --ios-orange: #FF9500;
    --ios-purple: #AF52DE;
    --ios-indigo: #5856D6;
    --ios-red: #FF3B30;
    --ios-gray: #8E8E93;
    --ios-gray-2: #AEAEB2;
    --ios-gray-3: #C7C7CC;
    --ios-gray-4: #D1D1D6;
    --ios-gray-5: #E5E5EA;
    --ios-gray-6: #F2F2F7;
    --ios-label: #1C1C1E;
    --ios-secondary-label: #8E8E93;
    --ios-separator: rgba(60, 60, 67, 0.12);
    --ios-squircle: 20px;
    --ios-squircle-sm: 14px;
    --ios-squircle-lg: 26px;
}

/* ---------- Apple Dark Mode Variables (OLED Pitch Black) ---------- */
:root.dark, body.dark {
    --ios-bg: #000000;
    --ios-card: #1C1C1E;
    --ios-card-secondary: #2C2C2E;
    --ios-label: #FFFFFF;
    --ios-secondary-label: #8E8E93;
    --ios-separator: rgba(255, 255, 255, 0.12);
    --ios-gray-6: #1C1C1E;
    --ios-gray-5: #2C2C2E;
    --ios-gray-4: #3A3A3C;
}

body {
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    background-color: var(--ios-bg);
    color: var(--ios-label);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.015em;
    padding-bottom: env(safe-area-inset-bottom, 20px);
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
}

/* Prevent double-tap zoom & auto-zoom on input focus */
html {
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
}

button, input, select, textarea, .ios-card, .ios-pressable {
    touch-action: manipulation;
}

@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ---------- Circular Avatar Standard for Profile Photos ---------- */
.profile-avatar-circle,
#profile-avatar-preview,
#profile-avatar-preview img,
#btn-header-avatar .avatar-circle-wrap,
#btn-header-avatar img,
#nav-user-avatar-wrap,
#nav-user-avatar-wrap img {
    border-radius: 9999px !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
}

/* ---------- Apple Frosted Glass / Translucency ---------- */
.ios-glass {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.ios-glass-nav {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.15);
}

.ios-glass-card {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 0.5px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--ios-squircle);
    box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02);
}

.ios-card {
    background: #FFFFFF;
    border-radius: var(--ios-squircle);
    border: 0.5px solid rgba(60, 60, 67, 0.08);
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.03);
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.ios-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    transform: translateY(-1.5px);
}

/* ---------- Micro-Interactions (Haptic Feel) ---------- */
.ios-pressable {
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.ios-pressable:active {
    transform: scale(0.97);
    opacity: 0.88;
}

/* ---------- Typography Hierarchy ---------- */
.ios-large-title {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.15;
    color: var(--ios-label);
}

.ios-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ios-label);
}

.ios-headline {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.ios-subhead {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--ios-secondary-label);
}

.ios-caption {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ios-secondary-label);
    letter-spacing: 0.01em;
}

/* ---------- Apple Reminders Circular Checkbox ---------- */
.topic-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid var(--ios-gray-3);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    flex-shrink: 0;
    background-color: transparent;
}

.topic-checkbox:hover {
    border-color: var(--ios-blue);
    transform: scale(1.08);
}

.topic-checkbox:checked {
    background-color: var(--ios-blue);
    border-color: var(--ios-blue);
    transform: scale(1.05);
}

.topic-checkbox:checked::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 8px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

@keyframes spring-pop {
    0% { transform: scale(0.85); }
    50% { transform: scale(1.22); }
    100% { transform: scale(1.05); }
}

.animate-pulse-check {
    animation: spring-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- iOS Progress Capsules (Apple Health Style) ---------- */
.progress-bar-track {
    height: 8px;
    background-color: var(--ios-gray-5);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}

.progress-bar-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.progress-bar-fill.green {
    background: linear-gradient(90deg, #30D158, #34C759);
    box-shadow: 0 0 10px rgba(52, 199, 89, 0.35);
}

.progress-bar-fill.yellow {
    background: linear-gradient(90deg, #FF9F0A, #FF9500);
    box-shadow: 0 0 10px rgba(255, 149, 0, 0.35);
}

.progress-bar-fill.red {
    background: linear-gradient(90deg, #FF453A, #FF3B30);
    box-shadow: 0 0 10px rgba(255, 59, 48, 0.35);
}

.progress-bar-fill.indigo,
.progress-bar-fill.blue {
    background: linear-gradient(90deg, #0A84FF, #5a4bda);
    box-shadow: 0 0 10px rgba(0, 122, 255, 0.35);
}

/* ---------- Inset Grouped List (iOS Settings / Reminders Style) ---------- */
.ios-inset-group {
    background: #FFFFFF;
    border-radius: var(--ios-squircle);
    border: 0.5px solid rgba(60, 60, 67, 0.08);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.ios-list-row {
    padding: 13px 16px;
    display: flex;
    align-items: center;
    transition: background-color 0.15s ease;
    border-bottom: 0.5px solid rgba(60, 60, 67, 0.08);
}

.ios-list-row:last-child {
    border-bottom: none;
}

.ios-list-row:hover {
    background-color: var(--ios-card-secondary);
}

/* ---------- Unit Accordion (iOS Inset Disclosure) ---------- */
.unit-header {
    cursor: pointer;
    transition: background-color 0.15s ease;
    user-select: none;
}

.unit-header:hover {
    background-color: rgba(0, 0, 0, 0.015);
}

.unit-header:active {
    background-color: rgba(0, 0, 0, 0.04);
}

.unit-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.unit-content.open {
    max-height: 2500px;
    transition: max-height 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.unit-chevron {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.unit-chevron.rotated {
    transform: rotate(90deg);
}

/* ---------- Subject Card (iOS App Store Style) ---------- */
.subject-card {
    background: #FFFFFF;
    border-radius: var(--ios-squircle-lg);
    border: 0.5px solid rgba(60, 60, 67, 0.08);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.subject-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.07);
    border-color: rgba(0, 122, 255, 0.2);
}

.subject-card:active {
    transform: scale(0.98);
}

/* Squircle Icon Wrapper */
.ios-squircle-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.65rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ---------- Floating Bottom Navigation (Native iPhone Tab Bar) ---------- */
.ios-floating-tabbar {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    width: calc(100% - 24px);
    max-width: 390px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(28px) saturate(200%);
    -webkit-backdrop-filter: blur(28px) saturate(200%);
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 9999px;
    padding: 5px 6px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.3s ease;
    will-change: transform, opacity;
}

.ios-floating-tabbar.tabbar-hidden,
body.modal-open .ios-floating-tabbar {
    transform: translate(-50%, calc(100% + 50px)) scale(0.92) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* ---------- Floating Right Sidebar Quick Notes Button ---------- */
#floating-quick-note-btn {
    box-shadow: -4px 10px 28px rgba(0, 113, 227, 0.32), 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.28s ease, padding-left 0.2s ease;
    will-change: transform, opacity;
}

#floating-quick-note-btn:hover {
    transform: translate(-3px, -50%);
}

#floating-quick-note-btn.tabbar-hidden,
body.modal-open #floating-quick-note-btn {
    transform: translate(120%, -50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

@media (max-width: 480px) {
    #floating-quick-note-btn {
        padding: 7px 6px 7px 9px !important;
        border-radius: 14px 0 0 14px !important;
    }
    #floating-quick-note-btn span:first-child {
        font-size: 15px !important;
    }
    #floating-quick-note-btn .text-xs {
        font-size: 11px !important;
        line-height: 1.1 !important;
    }
}

/* ---------- iOS 18 Segmented Control (Smooth Swipeable Tabs) ---------- */
.ios-segmented-control {
    display: flex;
    align-items: center;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 4px;
    background: rgba(120, 120, 128, 0.14);
    border-radius: 18px;
    gap: 4px;
    width: auto;
    max-width: 100%;
}
.ios-segmented-control::-webkit-scrollbar {
    display: none;
}
.ios-segmented-control button,
.ios-segmented-control a {
    white-space: nowrap;
    flex-shrink: 0;
    touch-action: manipulation;
}

/* ---------- Responsive Table Container ---------- */
.ios-responsive-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px;
    position: relative;
    scrollbar-width: thin;
}
.ios-responsive-table-wrap::-webkit-scrollbar {
    height: 5px;
}
.ios-responsive-table-wrap::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 9999px;
}
.ios-responsive-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 9999px;
}

/* ---------- Universal Modal Responsiveness ---------- */
@media (max-width: 640px) {
    .ios-modal-dialog {
        width: calc(100vw - 20px) !important;
        max-width: calc(100vw - 20px) !important;
        padding: 16px 14px !important;
        border-radius: 24px !important;
        max-height: 92dvh !important;
    }
}

.ios-tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    padding: 4px 4px;
    border-radius: 9999px;
    color: var(--ios-gray);
    font-size: 0.62rem;
    font-weight: 700;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    white-space: nowrap;
}

.ios-tab-item svg,
.ios-tab-item .tab-icon {
    font-size: 1.25rem;
    margin-bottom: 1px;
    transition: transform 0.2s ease;
}

.ios-tab-item.active {
    color: var(--ios-blue);
    background: rgba(0, 122, 255, 0.09);
}

.ios-tab-item.active svg,
.ios-tab-item.active .tab-icon {
    transform: scale(1.12);
}

/* ---------- Dynamic Island / Capsule Toast Notification ---------- */
#toast-container {
    position: fixed;
    top: calc(16px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 90%;
    max-width: 420px;
}

.ios-toast {
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    color: #1C1C1E;
    border-radius: 9999px;
    padding: 10px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 0.5px solid rgba(0, 0, 0, 0.08);
    animation: dynamic-island-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: all 0.3s ease;
}

.dark .ios-toast {
    background: rgba(28, 28, 30, 0.94);
    color: #FFFFFF;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 0.5px solid rgba(255, 255, 255, 0.15);
}

@keyframes dynamic-island-in {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0.85);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---------- Apple Inputs ---------- */
.ios-input {
    width: 100%;
    background-color: var(--ios-gray-6);
    border: 1px solid rgba(60, 60, 67, 0.1);
    border-radius: var(--ios-squircle-sm);
    padding: 12px 14px;
    font-size: 0.95rem;
    color: var(--ios-label);
    outline: none;
    transition: all 0.2s ease;
}

.ios-input:focus {
    background-color: #FFFFFF;
    border-color: var(--ios-blue);
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);
}

.ios-select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 38px;
}

/* ---------- Apple Segmented Control ---------- */
.ios-segmented {
    background: var(--ios-gray-5);
    border-radius: 12px;
    padding: 3px;
    display: flex;
    position: relative;
}

.ios-segmented-item {
    flex: 1;
    text-align: center;
    padding: 6px 12px;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ios-secondary-label);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    user-select: none;
}

.ios-segmented-item.active {
    background: #FFFFFF;
    color: var(--ios-label);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0.5px 2px rgba(0, 0, 0, 0.06);
}

/* ---------- Apple Pills & Badges ---------- */
.ios-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ios-badge-blue { background: rgba(90, 75, 218, 0.1); color: var(--ios-blue); }
.ios-badge-green { background: rgba(52, 199, 89, 0.1); color: #248A3D; }
.ios-badge-orange { background: rgba(255, 149, 0, 0.12); color: #C97200; }
.ios-badge-gray { background: rgba(142, 142, 147, 0.12); color: var(--ios-label); }

/* ---------- Leaderboard Row ---------- */
.leaderboard-row {
    transition: all 0.18s ease;
    border-radius: 14px;
    margin: 2px 6px;
}

.leaderboard-row:hover {
    background-color: var(--ios-card-secondary);
}

.leaderboard-row.current-user {
    background: rgba(0, 122, 255, 0.08);
    border: 1px solid rgba(0, 122, 255, 0.2);
}

/* ---------- OTP Input (Responsive Cupertino Box) ---------- */
.otp-input {
    width: 40px;
    height: 50px;
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    background: var(--ios-gray-6);
    border: 1.5px solid var(--ios-gray-4);
    border-radius: 12px;
    outline: none;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    color: var(--ios-label);
}

@media (min-width: 380px) {
    .otp-input {
        width: 44px;
        height: 54px;
        font-size: 1.5rem;
        border-radius: 14px;
    }
}

.otp-input:focus {
    background: #FFFFFF;
    border-color: var(--ios-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
    transform: scale(1.04);
}

/* ---------- Apple Smooth Animations ---------- */
@keyframes ios-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes ios-slide-up {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-fade-in {
    animation: ios-fade-in 0.35s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.animate-slide-up {
    animation: ios-slide-up 0.45s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.stagger-1 { animation-delay: 0.04s; }
.stagger-2 { animation-delay: 0.08s; }
.stagger-3 { animation-delay: 0.12s; }
.stagger-4 { animation-delay: 0.16s; }
.stagger-5 { animation-delay: 0.20s; }
.stagger-6 { animation-delay: 0.24s; }

/* ---------- Scrollbar (iOS Ultra-thin) ---------- */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* ---------- Mobile Specific Overrides & iOS Optimization ---------- */
@media (max-width: 640px) {
    /* Prevent iOS Safari auto-zoom on input focus */
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }

    .ios-large-title {
        font-size: 1.6rem;
    }

    .ios-card {
        border-radius: 18px;
    }
}

/* Safe area padding for mobile bottom bar */
@media (max-width: 768px) {
    main {
        padding-bottom: calc(105px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* ---------- Semester Pills (Apple Cupertino Style) ---------- */
.sem-pill {
    padding: 6px 14px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid transparent;
}

.sem-pill-active {
    background: #5a4bda;
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.35);
    border-color: #5a4bda;
}

.sem-pill-inactive {
    background: rgba(0, 0, 0, 0.05);
    color: #6B7280;
    border-color: rgba(0, 0, 0, 0.06);
}

.sem-pill-inactive:hover {
    background: rgba(0, 0, 0, 0.09);
    color: #111827;
}

.sem-pill-locked {
    background: rgba(0, 0, 0, 0.03);
    color: #9CA3AF;
    border: 1px dashed rgba(0, 0, 0, 0.16);
    cursor: pointer;
    opacity: 0.85;
}

.sem-pill-locked:hover {
    background: rgba(245, 158, 11, 0.08);
    color: #B45309;
    border-color: rgba(245, 158, 11, 0.35);
}

.sem-pill-locked-active {
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #F59E0B;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.scrollbar-none::-webkit-scrollbar {
    display: none;
}
.scrollbar-none {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ---------- Apple Swipe Mode Utilities ---------- */
.ios-swipe-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ios-swipe-track::-webkit-scrollbar {
    display: none;
}
.ios-swipe-card {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* ---------- Apple Cupertino Button Styles ---------- */
.apple-primary-btn {
    background: linear-gradient(180deg, #0077ED 0%, #0062C4 100%) !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.38), 0 10px 24px -4px rgba(0, 113, 227, 0.38);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.apple-primary-btn:hover {
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 14px 28px -4px rgba(0, 113, 227, 0.48);
    transform: translateY(-1px);
}
.apple-primary-btn:active {
    transform: scale(0.97);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 4px 12px rgba(0, 113, 227, 0.3);
}

/* ---------- Apple Cupertino App Footer ---------- */
.ios-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* ---------- Apple Sticky Notes & Assignments ---------- */
.sticky-note-card {
    border-radius: 20px;
    padding: 16px 18px;
    position: relative;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
}

.sticky-note-card:hover {
    transform: translateY(-2.5px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.sticky-tape {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 16px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(4px);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sticky-yellow {
    background: #FEF9C3;
    border: 1px solid #FDE047;
    color: #713F12;
}

.sticky-green {
    background: #DCFCE7;
    border: 1px solid #86EFAC;
    color: #14532D;
}

.sticky-blue {
    background: #E0F2FE;
    border: 1px solid #7DD3FC;
    color: #075985;
}

.sticky-purple {
    background: #F3E8FF;
    border: 1px solid #D8B4FE;
    color: #581C87;
}

.sticky-pink {
    background: #FFE4E6;
    border: 1px solid #FDA4AF;
    color: #881337;
}

.assignment-completed {
    opacity: 0.68;
    text-decoration: line-through;
}

/* ---------- Daily Streak Flame Glow Animation ---------- */
@keyframes flame-pulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.6));
    }
    50% {
        transform: scale(1.12) rotate(-3deg);
        filter: drop-shadow(0 0 14px rgba(239, 68, 68, 0.9));
    }
}
.streak-flame-animated {
    display: inline-block;
    animation: flame-pulse 1.8s infinite ease-in-out;
}

/* ---------- Unit Print Booklet Styling ---------- */
#lawmate-print-booklet {
    display: none;
}

@media print {
    /* Hide all standard webpage elements */
    #loading-screen, #main-nav, #subject-content, .ios-glass-nav, nav, button, .no-print {
        display: none !important;
    }
    body * {
        visibility: hidden;
    }
    #lawmate-print-booklet, #lawmate-print-booklet * {
        visibility: visible;
    }
    #lawmate-print-booklet {
        display: block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: white !important;
        color: #111827 !important;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    }
    .print-topic-page {
        page-break-inside: avoid;
        break-inside: avoid;
        border-bottom: 1.5px dashed #CBD5E1;
        margin-bottom: 24px;
        padding-bottom: 20px;
    }
    @page {
        size: A4 portrait;
        margin: 12mm 15mm;
    }
}

/* ============================================================
   Apple iOS 18 Design System Extensions:
   Dark Theme Overrides, Activity Rings, Dynamic Island, Shimmer
   ============================================================ */

/* ---------- Dark Mode Global Overrides ---------- */
.dark body {
    background-color: #000000 !important;
    color: #FFFFFF !important;
}

.dark .bg-gray-50,
.dark .bg-white {
    background-color: #1C1C1E !important;
    color: #FFFFFF !important;
}

.dark .bg-gray-50\/50,
.dark .bg-gray-50\/60,
.dark .bg-gray-50\/80,
.dark .bg-gray-50\/90,
.dark .bg-gray-100,
.dark .bg-gray-100\/90 {
    background-color: #2C2C2E !important;
}

.dark .text-gray-900,
.dark .text-gray-800 {
    color: #FFFFFF !important;
}

.dark .text-gray-700,
.dark .text-gray-600 {
    color: #D1D1D6 !important;
}

.dark .text-gray-500,
.dark .text-gray-400 {
    color: #8E8E93 !important;
}

.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-200\/60,
.dark .border-gray-200\/70,
.dark .border-gray-200\/80,
.dark .border-black\/5 {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark .ios-glass-nav {
    background: rgba(22, 22, 24, 0.82) !important;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.14) !important;
}

.dark .ios-card,
.dark .ios-glass-card {
    background-color: #1C1C1E !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 24px -2px rgba(0, 0, 0, 0.6) !important;
}

.dark .ios-modal-dialog,
.dark .ios-bottom-sheet {
    background-color: #1C1C1E !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    color: #FFFFFF !important;
}

.dark input, 
.dark select, 
.dark textarea {
    background-color: #2C2C2E !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Native controls (select popups, scrollbars, date pickers) follow dark mode */
.dark {
    color-scheme: dark;
}

/* Focused fields must NOT flash white in dark mode (focus:bg-white override) */
.dark .focus\:bg-white:focus {
    background-color: #2C2C2E !important;
    color: #FFFFFF !important;
}

/* Dropdown option list stays readable in dark mode */
.dark option,
.dark optgroup {
    background-color: #1C1C1E;
    color: #FFFFFF;
}

/* ---------- Apple Activity Rings ---------- */
.activity-rings-container {
    position: relative;
    width: 116px;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-ring-bg {
    fill: none;
    opacity: 0.18;
}

.activity-ring-progress {
    fill: none;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* ---------- Cupertino Shimmer Skeleton ---------- */
@keyframes iosShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.ios-skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.06) 75%);
    background-size: 200% 100%;
    animation: iosShimmer 1.5s infinite;
    border-radius: 12px;
}

.dark .ios-skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.13) 50%, rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
}

/* ---------- Apple Spring Physics for Interactive Touchables ---------- */
.ios-pressable {
    transition: transform 0.14s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.14s ease !important;
}

.ios-pressable:active {
    transform: scale(0.96) !important;
}

/* ---------- 3D Flip Card for Flashcards ---------- */
.flashcard-perspective {
    perspective: 1000px;
}
.flashcard-inner {
    position: relative;
    width: 100%;
    min-height: 280px;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}
.flashcard-inner.flipped {
    transform: rotateY(180deg);
}
.flashcard-front, .flashcard-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 1.5rem;
    overflow-y: auto;
}
.flashcard-back {
    transform: rotateY(180deg);
}

/* ---------- Interactive Apple Splash Screen ---------- */
@keyframes splashFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-8px) scale(1.03);
    }
}

@keyframes splashGlowPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.95);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.18);
    }
}

@keyframes splashRadarRing {
    0% {
        transform: scale(0.85);
        opacity: 0.8;
    }
    100% {
        transform: scale(2.3);
        opacity: 0;
    }
}

@keyframes splashGradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.splash-float-icon {
    animation: splashFloat 3.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.splash-glow-aura {
    animation: splashGlowPulse 4s ease-in-out infinite;
}

.splash-radar-wave {
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    border: 2px solid rgba(0, 113, 227, 0.35);
    animation: splashRadarRing 2.4s cubic-bezier(0.1, 0.7, 0.3, 1) infinite;
    pointer-events: none;
}

.splash-radar-wave-delayed {
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    border: 2px solid rgba(139, 92, 246, 0.3);
    animation: splashRadarRing 2.4s cubic-bezier(0.1, 0.7, 0.3, 1) infinite;
    animation-delay: 1.2s;
    pointer-events: none;
}

.splash-gradient-text {
    background: linear-gradient(135deg, #5a4bda 0%, #3B82F6 25%, #6366F1 50%, #8B5CF6 75%, #5a4bda 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: splashGradientShift 4s ease infinite;
}

.splash-shimmer-progress {
    background: linear-gradient(90deg, #5a4bda 0%, #60A5FA 30%, #A855F7 60%, #5a4bda 100%);
    background-size: 200% 100%;
    animation: splashGradientShift 2s linear infinite;
}

/* ---------- Linear & Apple Modern Card & Icon System ---------- */
.linear-card {
    background: #FFFFFF;
    border-radius: 22px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 4px 16px -2px rgba(15, 23, 42, 0.04);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

.linear-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
    border-radius: 22px 22px 0 0;
    pointer-events: none;
}

.linear-card:hover {
    border-color: rgba(191, 219, 254, 0.9);
    box-shadow: 0 8px 30px -4px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
    transform: translateY(-1.5px);
}

.dark .linear-card {
    background: #1C1C1E;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.dark .linear-card:hover {
    border-color: rgba(255, 255, 255, 0.16);
}

.linear-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.linear-icon-box:hover {
    transform: scale(1.06);
}

.linear-tag {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}


/* ============================================================
   NATIVE APP SHELL — web app ko ekdm mobile app jaisa feel
   ============================================================ */

/* 1. Grey tap-flash har jagah band (iOS/Android) */
* { -webkit-tap-highlight-color: transparent; }

/* 2. Page ka rubber-band bounce band — app screens bounce nahi karti */
html, body { overscroll-behavior: none; }

/* 3. App chrome (nav, tab bar, buttons) me text select nahi hoga */
nav, nav *, .app-tabbar, .app-tabbar *, button {
    -webkit-user-select: none;
    user-select: none;
}
input, textarea, select, [contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}

/* 4. Safe-area: notch + home indicator ke liye */
.ios-glass-nav { padding-top: env(safe-area-inset-top, 0px); }

/* 5. Bottom tab bar — native apps ka signature pattern */
.app-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 0.5px solid rgba(60, 60, 67, 0.15);
    padding-top: 6px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
}
.app-tabbar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    min-height: 52px;
    color: #8E8E93;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    background: none;
    border: none;
    transition: transform 0.15s ease, color 0.15s ease;
}
.app-tabbar-item:active { transform: scale(0.9); }
.app-tabbar-item .tab-ico { font-size: 22px; line-height: 1; transition: transform 0.15s ease; }
.app-tabbar-item.active { color: #5a4bda; }
.app-tabbar-item.active .tab-ico { transform: translateY(-1px); }
.app-tabbar-item.active::after {
    content: '';
    width: 4px; height: 4px;
    border-radius: 9999px;
    background: #5a4bda;
    margin-top: 1px;
}
/* Beech wala raised Nyaya AI action button */
.app-tabbar-fab {
    width: 56px; height: 56px;
    margin-top: -26px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #5a4bda, #5856D6);
    color: #fff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 113, 227, 0.45);
    border: 3px solid #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}
.app-tabbar-fab:active { transform: scale(0.92); }

/* 6. Content tab bar ke neeche na chhupe (mobile only) */
@media (max-width: 767px) {
    .tabbar-clear {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 104px) !important;
    }
    /* Mobile pe Nyaya floating button redundant — tab bar me hai */
    #nyaya-ai-floating-btn-wrap { display: none !important; }
}

/* 7. Dark mode */
.dark .app-tabbar {
    background: rgba(28, 28, 30, 0.86);
    border-top-color: rgba(255, 255, 255, 0.12);
}
.dark .app-tabbar-item { color: #98989D; }
.dark .app-tabbar-item.active { color: #0A84FF; }
.dark .app-tabbar-item.active::after { background: #0A84FF; }
.dark .app-tabbar-fab { border-color: #1c1c1e; }

/* main content clearance hook (data-tabbar-clear) — mobile only */
@media (max-width: 767px) {
    [data-tabbar-clear] {
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 104px) !important;
    }
}

/* ── Landing page: big-company polish ─────────────────────────────── */
#main-header.lp-scrolled { box-shadow: 0 10px 32px -14px rgba(0, 0, 0, 0.22); }
.lp-js .lp-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.lp-js .lp-reveal.lp-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .lp-js .lp-reveal { opacity: 1; transform: none; transition: none; }
}
/* FAQ <details> marker reset (we render our own +) */
#lp-faq-list summary::-webkit-details-marker { display: none; }
#lp-faq-list summary::marker { content: ""; }

/* ═══════════════════════════════════════════════════════════════════
   LANDING PAGE — premium light polish (marquee, spotlight, shine)
   ═══════════════════════════════════════════════════════════════════ */
html { scroll-behavior: smooth; }
::selection { background: #5a4bda; color: #fff; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #F1F2F6; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #5a4bda, #8B5CF6); border-radius: 8px; border: 2px solid #F1F2F6; }

#main-header.lp-scrolled { box-shadow: 0 10px 32px -14px rgba(0, 0, 0, 0.18); }

/* Trusted-by marquee */
.lp-marquee { overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
.lp-marquee-track { display: flex; width: max-content; animation: lp-marquee 32s linear infinite; }
.lp-marquee-group { display: flex; align-items: center; gap: 3.5rem; padding-right: 3.5rem; }
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
@keyframes lp-marquee { to { transform: translateX(-50%); } }

/* Bento spotlight (cursor-tracked glow) */
.bento-card { position: relative; }
.bento-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
    transition: opacity 0.35s ease; pointer-events: none;
    background: radial-gradient(440px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 113, 227, 0.12), transparent 65%); }
.bento-card:hover::before { opacity: 1; }

/* Button shine sweep */
.lp-shine { position: relative; overflow: hidden; }
.lp-shine::after { content: ""; position: absolute; top: 0; left: -80%; width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg); transition: left 0.65s ease; pointer-events: none; }
.lp-shine:hover::after { left: 135%; }

@media (prefers-reduced-motion: reduce) {
    .lp-marquee-track { animation: none !important; }
    html { scroll-behavior: auto; }
    .lp-shine::after { display: none; }
}

/* ── Minimal dashboard home (2026-09-28): slim header + quick actions + collapsible tools ── */
#dashboard-content #timetable-widget { margin-bottom: 1rem; }
@media (min-width: 640px) { #dashboard-content #timetable-widget { margin-bottom: 1.25rem; } }
#more-tools summary::-webkit-details-marker { display: none; }
#more-tools summary::marker { display: none; }
#more-tools .tools-chevron { transition: transform .25s ease; }
#more-tools[open] .tools-chevron { transform: rotate(180deg); }
#more-tools .more-tools-body > * { margin-bottom: 0 !important; }
#more-tools [id] { scroll-margin-top: 84px; }
#timetable-widget, #streak-widget, #subjects-section { scroll-margin-top: 76px; }

/* ── Continue Learning deep-link topic highlight (2026-09-28) ── */
@keyframes topicFlash { 0%,100% { background-color: transparent; } 25%,75% { background-color: rgba(0,113,227,.13); } }
.topic-flash { animation: topicFlash 2s ease-in-out; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .topic-flash { animation: none; background-color: rgba(0,113,227,.08); } }

/* ── Missing gradient stops from prebuilt tailwind.css (Tailwind v3 format) ──
   Without these, `from-[#5a4bda]` / `from-emerald-500` gradients render from
   transparent, leaving white text on a near-white card (e.g. dashboard
   Start/Continue Learning card). */
.from-\[\#5a4bda\]{--tw-gradient-from:#5a4bda var(--tw-gradient-from-position);--tw-gradient-to:rgb(90 75 218 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.from-emerald-500{--tw-gradient-from:#10b981 var(--tw-gradient-from-position);--tw-gradient-to:rgb(16 185 129 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.via-emerald-600{--tw-gradient-to:rgba(5,150,105,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#059669 var(--tw-gradient-via-position),var(--tw-gradient-to)}
.to-teal-700{--tw-gradient-to:#0f766e var(--tw-gradient-to-position)}

/* ── Missing arbitrary-value brand utilities from prebuilt tailwind.css ──
   The prebuilt CSS was generated before the #5a4bda brand rebrand, so
   bg-[#5a4bda] / text-[#5a4bda] / hover:… etc. match NOTHING — primary
   buttons render with no background (white text on white). These
   fallbacks restore them across the whole app. */
.bg-\[\#5a4bda\]{background-color:#5a4bda}
.text-\[\#5a4bda\]{color:#5a4bda}
.border-\[\#5a4bda\]{border-color:#5a4bda}
.border-t-\[\#5a4bda\]{border-top-color:#5a4bda}
.hover\:bg-\[\#5a4bda\]:hover{background-color:#5a4bda}
.hover\:bg-\[\#4a3ec4\]:hover{background-color:#4a3ec4}
.hover\:bg-\[\#4a3fc8\]:hover{background-color:#4a3fc8}
.hover\:text-\[\#5a4bda\]:hover{color:#5a4bda}
.focus\:border-\[\#5a4bda\]:focus{border-color:#5a4bda}
.group:hover .group-hover\:text-\[\#5a4bda\]{color:#5a4bda}
.via-\[\#5a4bda\]{--tw-gradient-to:rgb(90 75 218 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#5a4bda var(--tw-gradient-via-position),var(--tw-gradient-to)}
.max-w-\[240px\]{max-width:240px}
.min-w-\[140px\]{min-width:140px}

/* ---------- Dark Mode: Extended Utility Overrides (auto-generated 2026-09-29) ---------- */
/* Guards (:not) preserve author-intended dark: variants in dashboard.js templates. */

/* bg-amber-100 (11 uses) */
.dark [class~="bg-amber-100"]:not([class*="dark:bg-"]),
.dark [class~="bg-amber-100/50"]:not([class*="dark:bg-"]),
.dark [class~="bg-amber-100/90"]:not([class*="dark:bg-"]) {
    background-color: rgba(245,158,11,.20) !important;
}

/* bg-amber-200 (3 uses) */
.dark [class~="bg-amber-200/60"]:not([class*="dark:bg-"]),
.dark [class~="bg-amber-200/80"]:not([class*="dark:bg-"]),
.dark [class~="bg-amber-200/90"]:not([class*="dark:bg-"]) {
    background-color: rgba(245,158,11,.28) !important;
}

/* bg-amber-50 (34 uses) */
.dark [class~="bg-amber-50"]:not([class*="dark:bg-"]),
.dark [class~="bg-amber-50/40"]:not([class*="dark:bg-"]),
.dark [class~="bg-amber-50/50"]:not([class*="dark:bg-"]),
.dark [class~="bg-amber-50/60"]:not([class*="dark:bg-"]),
.dark [class~="bg-amber-50/70"]:not([class*="dark:bg-"]),
.dark [class~="bg-amber-50/80"]:not([class*="dark:bg-"]),
.dark [class~="bg-amber-50/90"]:not([class*="dark:bg-"]) {
    background-color: rgba(245,158,11,.14) !important;
}

/* bg-blue-100 (34 uses) */
.dark [class~="bg-blue-100"]:not([class*="dark:bg-"]),
.dark [class~="bg-blue-100/70"]:not([class*="dark:bg-"]),
.dark [class~="bg-blue-100/80"]:not([class*="dark:bg-"]) {
    background-color: rgba(59,130,246,.20) !important;
}

/* bg-blue-200 (1 uses) */
.dark [class~="bg-blue-200/70"]:not([class*="dark:bg-"]) {
    background-color: rgba(59,130,246,.28) !important;
}

/* bg-blue-50 (91 uses) */
.dark [class~="bg-blue-50"]:not([class*="dark:bg-"]),
.dark [class~="bg-blue-50/20"]:not([class*="dark:bg-"]),
.dark [class~="bg-blue-50/40"]:not([class*="dark:bg-"]),
.dark [class~="bg-blue-50/50"]:not([class*="dark:bg-"]),
.dark [class~="bg-blue-50/60"]:not([class*="dark:bg-"]),
.dark [class~="bg-blue-50/70"]:not([class*="dark:bg-"]),
.dark [class~="bg-blue-50/80"]:not([class*="dark:bg-"]),
.dark [class~="bg-blue-50/90"]:not([class*="dark:bg-"]) {
    background-color: rgba(59,130,246,.14) !important;
}

/* bg-emerald-100 (17 uses) */
.dark [class~="bg-emerald-100"]:not([class*="dark:bg-"]),
.dark [class~="bg-emerald-100/40"]:not([class*="dark:bg-"]) {
    background-color: rgba(16,185,129,.20) !important;
}

/* bg-emerald-50 (35 uses) */
.dark [class~="bg-emerald-50"]:not([class*="dark:bg-"]),
.dark [class~="bg-emerald-50/40"]:not([class*="dark:bg-"]),
.dark [class~="bg-emerald-50/50"]:not([class*="dark:bg-"]),
.dark [class~="bg-emerald-50/60"]:not([class*="dark:bg-"]),
.dark [class~="bg-emerald-50/70"]:not([class*="dark:bg-"]),
.dark [class~="bg-emerald-50/80"]:not([class*="dark:bg-"]),
.dark [class~="bg-emerald-50/90"]:not([class*="dark:bg-"]) {
    background-color: rgba(16,185,129,.14) !important;
}

/* bg-indigo-100 (5 uses) */
.dark [class~="bg-indigo-100"]:not([class*="dark:bg-"]) {
    background-color: rgba(99,102,241,.20) !important;
}

/* bg-indigo-50 (18 uses) */
.dark [class~="bg-indigo-50"]:not([class*="dark:bg-"]),
.dark [class~="bg-indigo-50/50"]:not([class*="dark:bg-"]),
.dark [class~="bg-indigo-50/70"]:not([class*="dark:bg-"]),
.dark [class~="bg-indigo-50/80"]:not([class*="dark:bg-"]) {
    background-color: rgba(99,102,241,.14) !important;
}

/* bg-orange-100 (2 uses) */
.dark [class~="bg-orange-100"]:not([class*="dark:bg-"]) {
    background-color: rgba(249,115,22,.20) !important;
}

/* bg-orange-50 (2 uses) */
.dark [class~="bg-orange-50"]:not([class*="dark:bg-"]),
.dark [class~="bg-orange-50/70"]:not([class*="dark:bg-"]) {
    background-color: rgba(249,115,22,.14) !important;
}

/* bg-purple-100 (14 uses) */
.dark [class~="bg-purple-100"]:not([class*="dark:bg-"]) {
    background-color: rgba(168,85,247,.20) !important;
}

/* bg-purple-50 (45 uses) */
.dark [class~="bg-purple-50"]:not([class*="dark:bg-"]),
.dark [class~="bg-purple-50/30"]:not([class*="dark:bg-"]),
.dark [class~="bg-purple-50/40"]:not([class*="dark:bg-"]),
.dark [class~="bg-purple-50/50"]:not([class*="dark:bg-"]),
.dark [class~="bg-purple-50/60"]:not([class*="dark:bg-"]),
.dark [class~="bg-purple-50/70"]:not([class*="dark:bg-"]),
.dark [class~="bg-purple-50/80"]:not([class*="dark:bg-"]) {
    background-color: rgba(168,85,247,.14) !important;
}

/* bg-red-100 (2 uses) */
.dark [class~="bg-red-100"]:not([class*="dark:bg-"]) {
    background-color: rgba(239,68,68,.20) !important;
}

/* bg-red-50 (8 uses) */
.dark [class~="bg-red-50"]:not([class*="dark:bg-"]) {
    background-color: rgba(239,68,68,.14) !important;
}

/* bg-rose-200 (1 uses) */
.dark [class~="bg-rose-200"]:not([class*="dark:bg-"]) {
    background-color: rgba(244,63,94,.28) !important;
}

/* bg-rose-50 (7 uses) */
.dark [class~="bg-rose-50"]:not([class*="dark:bg-"]),
.dark [class~="bg-rose-50/30"]:not([class*="dark:bg-"]),
.dark [class~="bg-rose-50/60"]:not([class*="dark:bg-"]) {
    background-color: rgba(244,63,94,.14) !important;
}

/* bg-slate-100 (5 uses) */
.dark [class~="bg-slate-100"]:not([class*="dark:bg-"]) {
    background-color: rgba(148,163,184,.20) !important;
}

/* bg-slate-50 (14 uses) */
.dark [class~="bg-slate-50"]:not([class*="dark:bg-"]),
.dark [class~="bg-slate-50/60"]:not([class*="dark:bg-"]),
.dark [class~="bg-slate-50/80"]:not([class*="dark:bg-"]),
.dark [class~="bg-slate-50/90"]:not([class*="dark:bg-"]) {
    background-color: rgba(148,163,184,.14) !important;
}

/* bg-teal-50 (2 uses) */
.dark [class~="bg-teal-50"]:not([class*="dark:bg-"]),
.dark [class~="bg-teal-50/80"]:not([class*="dark:bg-"]) {
    background-color: rgba(20,184,166,.14) !important;
}

/* bg-gray-200 */
.dark [class~="bg-gray-200"]:not([class*="dark:bg-"]),
.dark [class~="bg-gray-200/70"]:not([class*="dark:bg-"]),
.dark [class~="bg-gray-200/80"]:not([class*="dark:bg-"]),
.dark [class~="bg-gray-200/90"]:not([class*="dark:bg-"]) {
    background-color: #2C2C2E !important;
}

.dark [class~="text-slate-900"]:not([class*="dark:text-"]) {
    color: #FFFFFF !important;
}

.dark [class~="text-slate-800"]:not([class*="dark:text-"]) {
    color: #FFFFFF !important;
}

.dark [class~="text-slate-700"]:not([class*="dark:text-"]) {
    color: #D1D1D6 !important;
}

.dark [class~="text-slate-600"]:not([class*="dark:text-"]) {
    color: #D1D1D6 !important;
}

.dark [class~="text-slate-500"]:not([class*="dark:text-"]) {
    color: #8E8E93 !important;
}

.dark [class~="text-slate-400"]:not([class*="dark:text-"]) {
    color: #8E8E93 !important;
}

/* text-blue (165 uses) */
.dark [class~="text-blue-500"]:not([class*="dark:text-"]),
.dark [class~="text-blue-600"]:not([class*="dark:text-"]),
.dark [class~="text-blue-600/70"]:not([class*="dark:text-"]),
.dark [class~="text-blue-700"]:not([class*="dark:text-"]),
.dark [class~="text-blue-700/80"]:not([class*="dark:text-"]),
.dark [class~="text-blue-800"]:not([class*="dark:text-"]),
.dark [class~="text-blue-900"]:not([class*="dark:text-"]),
.dark [class~="text-blue-900/80"]:not([class*="dark:text-"]),
.dark [class~="text-blue-950"]:not([class*="dark:text-"]) {
    color: #93C5FD !important;
}

/* text-purple (101 uses) */
.dark [class~="text-purple-600"]:not([class*="dark:text-"]),
.dark [class~="text-purple-700"]:not([class*="dark:text-"]),
.dark [class~="text-purple-800"]:not([class*="dark:text-"]),
.dark [class~="text-purple-900"]:not([class*="dark:text-"]),
.dark [class~="text-purple-900/80"]:not([class*="dark:text-"]),
.dark [class~="text-purple-950"]:not([class*="dark:text-"]) {
    color: #C4B5FD !important;
}

/* text-emerald (88 uses) */
.dark [class~="text-emerald-500"]:not([class*="dark:text-"]),
.dark [class~="text-emerald-600"]:not([class*="dark:text-"]),
.dark [class~="text-emerald-700"]:not([class*="dark:text-"]),
.dark [class~="text-emerald-800"]:not([class*="dark:text-"]),
.dark [class~="text-emerald-800/90"]:not([class*="dark:text-"]),
.dark [class~="text-emerald-900"]:not([class*="dark:text-"]),
.dark [class~="text-emerald-900/80"]:not([class*="dark:text-"]),
.dark [class~="text-emerald-950"]:not([class*="dark:text-"]) {
    color: #6EE7B7 !important;
}

/* text-amber (73 uses) */
.dark [class~="text-amber-500"]:not([class*="dark:text-"]),
.dark [class~="text-amber-600"]:not([class*="dark:text-"]),
.dark [class~="text-amber-700"]:not([class*="dark:text-"]),
.dark [class~="text-amber-800"]:not([class*="dark:text-"]),
.dark [class~="text-amber-800/80"]:not([class*="dark:text-"]),
.dark [class~="text-amber-900"]:not([class*="dark:text-"]),
.dark [class~="text-amber-900/80"]:not([class*="dark:text-"]),
.dark [class~="text-amber-950"]:not([class*="dark:text-"]),
.dark [class~="text-amber-950/90"]:not([class*="dark:text-"]) {
    color: #FCD34D !important;
}

/* text-indigo (34 uses) */
.dark [class~="text-indigo-600"]:not([class*="dark:text-"]),
.dark [class~="text-indigo-700"]:not([class*="dark:text-"]),
.dark [class~="text-indigo-800"]:not([class*="dark:text-"]),
.dark [class~="text-indigo-900"]:not([class*="dark:text-"]),
.dark [class~="text-indigo-950"]:not([class*="dark:text-"]) {
    color: #A5B4FC !important;
}

/* text-red (39 uses) */
.dark [class~="text-red-500"]:not([class*="dark:text-"]),
.dark [class~="text-red-600"]:not([class*="dark:text-"]),
.dark [class~="text-red-700"]:not([class*="dark:text-"]),
.dark [class~="text-red-800"]:not([class*="dark:text-"]) {
    color: #FCA5A5 !important;
}

/* text-rose (10 uses) */
.dark [class~="text-rose-600"]:not([class*="dark:text-"]),
.dark [class~="text-rose-700"]:not([class*="dark:text-"]),
.dark [class~="text-rose-800"]:not([class*="dark:text-"]),
.dark [class~="text-rose-950"]:not([class*="dark:text-"]) {
    color: #FDA4AF !important;
}

/* text-orange (6 uses) */
.dark [class~="text-orange-600"]:not([class*="dark:text-"]),
.dark [class~="text-orange-700"]:not([class*="dark:text-"]),
.dark [class~="text-orange-800"]:not([class*="dark:text-"]) {
    color: #FDBA74 !important;
}

/* text-teal (3 uses) */
.dark [class~="text-teal-700"]:not([class*="dark:text-"]),
.dark [class~="text-teal-950"]:not([class*="dark:text-"]) {
    color: #5EEAD4 !important;
}

/* light tinted borders (833 uses) */
.dark [class~="border-amber-100"]:not([class*="dark:border-"]),
.dark [class~="border-amber-200"]:not([class*="dark:border-"]),
.dark [class~="border-amber-200/60"]:not([class*="dark:border-"]),
.dark [class~="border-amber-200/70"]:not([class*="dark:border-"]),
.dark [class~="border-amber-200/80"]:not([class*="dark:border-"]),
.dark [class~="border-amber-200/90"]:not([class*="dark:border-"]),
.dark [class~="border-amber-300"]:not([class*="dark:border-"]),
.dark [class~="border-amber-300/80"]:not([class*="dark:border-"]),
.dark [class~="border-blue-100"]:not([class*="dark:border-"]),
.dark [class~="border-blue-100/60"]:not([class*="dark:border-"]),
.dark [class~="border-blue-100/70"]:not([class*="dark:border-"]),
.dark [class~="border-blue-100/80"]:not([class*="dark:border-"]),
.dark [class~="border-blue-100/90"]:not([class*="dark:border-"]),
.dark [class~="border-blue-200"]:not([class*="dark:border-"]),
.dark [class~="border-blue-200/50"]:not([class*="dark:border-"]),
.dark [class~="border-blue-200/60"]:not([class*="dark:border-"]),
.dark [class~="border-blue-200/70"]:not([class*="dark:border-"]),
.dark [class~="border-blue-200/80"]:not([class*="dark:border-"]),
.dark [class~="border-blue-300"]:not([class*="dark:border-"]),
.dark [class~="border-emerald-100"]:not([class*="dark:border-"]),
.dark [class~="border-emerald-200"]:not([class*="dark:border-"]),
.dark [class~="border-emerald-200/60"]:not([class*="dark:border-"]),
.dark [class~="border-emerald-200/70"]:not([class*="dark:border-"]),
.dark [class~="border-emerald-200/80"]:not([class*="dark:border-"]),
.dark [class~="border-emerald-200/90"]:not([class*="dark:border-"]),
.dark [class~="border-emerald-300"]:not([class*="dark:border-"]),
.dark [class~="border-gray-100"]:not([class*="dark:border-"]),
.dark [class~="border-gray-100/60"]:not([class*="dark:border-"]),
.dark [class~="border-gray-100/80"]:not([class*="dark:border-"]),
.dark [class~="border-gray-100/90"]:not([class*="dark:border-"]),
.dark [class~="border-gray-200"]:not([class*="dark:border-"]),
.dark [class~="border-gray-200/50"]:not([class*="dark:border-"]),
.dark [class~="border-gray-200/60"]:not([class*="dark:border-"]),
.dark [class~="border-gray-200/70"]:not([class*="dark:border-"]),
.dark [class~="border-gray-200/80"]:not([class*="dark:border-"]),
.dark [class~="border-gray-200/90"]:not([class*="dark:border-"]),
.dark [class~="border-gray-300"]:not([class*="dark:border-"]),
.dark [class~="border-indigo-100"]:not([class*="dark:border-"]),
.dark [class~="border-indigo-200"]:not([class*="dark:border-"]),
.dark [class~="border-indigo-200/60"]:not([class*="dark:border-"]),
.dark [class~="border-indigo-200/70"]:not([class*="dark:border-"]),
.dark [class~="border-indigo-200/80"]:not([class*="dark:border-"]),
.dark [class~="border-orange-200"]:not([class*="dark:border-"]),
.dark [class~="border-orange-200/60"]:not([class*="dark:border-"]),
.dark [class~="border-orange-200/80"]:not([class*="dark:border-"]),
.dark [class~="border-purple-100"]:not([class*="dark:border-"]),
.dark [class~="border-purple-100/90"]:not([class*="dark:border-"]),
.dark [class~="border-purple-200"]:not([class*="dark:border-"]),
.dark [class~="border-purple-200/60"]:not([class*="dark:border-"]),
.dark [class~="border-purple-200/70"]:not([class*="dark:border-"]),
.dark [class~="border-purple-200/80"]:not([class*="dark:border-"]),
.dark [class~="border-red-100"]:not([class*="dark:border-"]),
.dark [class~="border-red-200"]:not([class*="dark:border-"]),
.dark [class~="border-red-200/70"]:not([class*="dark:border-"]),
.dark [class~="border-red-200/80"]:not([class*="dark:border-"]),
.dark [class~="border-rose-100"]:not([class*="dark:border-"]),
.dark [class~="border-rose-200"]:not([class*="dark:border-"]),
.dark [class~="border-rose-200/80"]:not([class*="dark:border-"]),
.dark [class~="border-slate-100"]:not([class*="dark:border-"]),
.dark [class~="border-slate-200"]:not([class*="dark:border-"]),
.dark [class~="border-slate-200/70"]:not([class*="dark:border-"]),
.dark [class~="border-slate-200/80"]:not([class*="dark:border-"]),
.dark [class~="border-teal-200"]:not([class*="dark:border-"]),
.dark [class~="border-teal-200/80"]:not([class*="dark:border-"]) {
    border-color: rgba(255,255,255,.12) !important;
}

.dark [class~="ring-blue-100"]:not([class*="dark:ring-"]),
.dark [class~="ring-slate-200/80"]:not([class*="dark:ring-"]) {
    --tw-ring-color: transparent !important;
}

.,
d,
a,
r,
k,
 ,
[,
c,
l,
a,
s,
s,
~,
=,
",
d,
i,
v,
i,
d,
e,
-,
g,
r,
a,
y,
-,
2,
0,
0,
",
],
:,
n,
o,
t,
(,
[,
c,
l,
a,
s,
s,
*,
=,
",
d,
a,
r,
k,
:,
d,
i,
v,
i,
d,
e,
-,
",
],
) > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(255,255,255,.08) !important;
}
.dark [class~="placeholder-gray-400"]:not([class*="dark:placeholder-"])::placeholder {
    color: #71717A !important;
}
.dark [class~="from-blue-50"]:not([class*="dark:from-"]),
.dark [class~="from-blue-50/40"]:not([class*="dark:from-"]),
.dark [class~="from-blue-50/50"]:not([class*="dark:from-"]),
.dark [class~="from-blue-50/60"]:not([class*="dark:from-"]),
.dark [class~="from-blue-50/80"]:not([class*="dark:from-"]),
.dark [class~="from-blue-50/90"]:not([class*="dark:from-"]) {
    --tw-gradient-from: rgba(59,130,246,.16) var(--tw-gradient-from-position) !important;
}

.dark [class~="from-purple-50"]:not([class*="dark:from-"]),
.dark [class~="from-purple-50/60"]:not([class*="dark:from-"]) {
    --tw-gradient-from: rgba(168,85,247,.16) var(--tw-gradient-from-position) !important;
}

.dark [class~="from-emerald-50"]:not([class*="dark:from-"]),
.dark [class~="from-emerald-50/60"]:not([class*="dark:from-"]),
.dark [class~="from-emerald-50/70"]:not([class*="dark:from-"]),
.dark [class~="from-emerald-50/90"]:not([class*="dark:from-"]) {
    --tw-gradient-from: rgba(16,185,129,.16) var(--tw-gradient-from-position) !important;
}

.dark [class~="from-amber-50/40"]:not([class*="dark:from-"]),
.dark [class~="from-amber-50/60"]:not([class*="dark:from-"]) {
    --tw-gradient-from: rgba(245,158,11,.16) var(--tw-gradient-from-position) !important;
}

.dark [class~="from-orange-50/70"]:not([class*="dark:from-"]) {
    --tw-gradient-from: rgba(249,115,22,.16) var(--tw-gradient-from-position) !important;
}

.dark [class~="to-blue-50"]:not([class*="dark:to-"]),
.dark [class~="to-blue-50/30"]:not([class*="dark:to-"]),
.dark [class~="to-blue-50/40"]:not([class*="dark:to-"]) {
    --tw-gradient-to: rgba(59,130,246,.14) var(--tw-gradient-to-position) !important;
}

.dark [class~="to-indigo-50"]:not([class*="dark:to-"]),
.dark [class~="to-indigo-50/30"]:not([class*="dark:to-"]),
.dark [class~="to-indigo-50/40"]:not([class*="dark:to-"]),
.dark [class~="to-indigo-50/50"]:not([class*="dark:to-"]),
.dark [class~="to-indigo-50/60"]:not([class*="dark:to-"]) {
    --tw-gradient-to: rgba(99,102,241,.14) var(--tw-gradient-to-position) !important;
}

.dark [class~="to-teal-50"]:not([class*="dark:to-"]),
.dark [class~="to-teal-50/40"]:not([class*="dark:to-"]),
.dark [class~="to-teal-50/60"]:not([class*="dark:to-"]) {
    --tw-gradient-to: rgba(20,184,166,.14) var(--tw-gradient-to-position) !important;
}

.dark [class~="to-amber-50/40"]:not([class*="dark:to-"]) {
    --tw-gradient-to: rgba(245,158,11,.14) var(--tw-gradient-to-position) !important;
}

.dark [class~="to-purple-50/20"]:not([class*="dark:to-"]),
.dark [class~="to-purple-50/40"]:not([class*="dark:to-"]) {
    --tw-gradient-to: rgba(168,85,247,.14) var(--tw-gradient-to-position) !important;
}

.dark [class~="to-gray-50/50"]:not([class*="dark:to-"]) {
    --tw-gradient-to: rgba(28,28,30,.5) var(--tw-gradient-to-position) !important;
}

.dark [class~="via-blue-50/30"]:not([class*="dark:via-"]) {
    --tw-gradient-stops: var(--tw-gradient-from), rgba(59,130,246,.10) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
.dark [class~="via-indigo-50"]:not([class*="dark:via-"]) {
    --tw-gradient-stops: var(--tw-gradient-from), rgba(99,102,241,.14) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}


/* white gradient stops -> card surface */
.dark [class~="from-white"]:not([class*="dark:from-"]) {
    --tw-gradient-from: #1C1C1E var(--tw-gradient-from-position) !important;
}
.dark [class~="to-white"]:not([class*="dark:to-"]) {
    --tw-gradient-to: #1C1C1E var(--tw-gradient-to-position) !important;
}
.dark [class~="via-white"]:not([class*="dark:via-"]) {
    --tw-gradient-stops: var(--tw-gradient-from), #1C1C1E var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

/* high-opacity white surfaces -> dark glass (low-opacity white overlays intentionally untouched) */
.dark [class~="bg-white/70"]:not([class*="dark:bg-"]) { background-color: rgba(28,28,30,.70) !important; }
.dark [class~="bg-white/80"]:not([class*="dark:bg-"]) { background-color: rgba(28,28,30,.80) !important; }
.dark [class~="bg-white/90"]:not([class*="dark:bg-"]) { background-color: rgba(28,28,30,.90) !important; }
.dark [class~="bg-white/95"]:not([class*="dark:bg-"]) { background-color: rgba(28,28,30,.95) !important; }

/* hover / focus / active states in dark */
.dark [class~="hover:bg-gray-100"]:not([class*="dark:hover:bg-"]):hover,
.dark [class~="hover:bg-gray-200"]:not([class*="dark:hover:bg-"]):hover,
.dark [class~="active:bg-gray-100"]:not([class*="dark:active:bg-"]):active {
    background-color: #2C2C2E !important;
}
.dark [class~="hover:bg-blue-50"]:not([class*="dark:hover:bg-"]):hover,
.dark [class~="hover:bg-blue-100"]:not([class*="dark:hover:bg-"]):hover {
    background-color: rgba(59,130,246,.14) !important;
}
.dark [class~="hover:bg-red-50"]:not([class*="dark:hover:bg-"]):hover {
    background-color: rgba(239,68,68,.14) !important;
}
.dark [class~="hover:bg-purple-100"]:not([class*="dark:hover:bg-"]):hover {
    background-color: rgba(168,85,247,.20) !important;
}
.dark [class~="focus:bg-white"]:not([class*="dark:focus:bg-"]):focus {
    background-color: #1C1C1E !important;
}
.dark [class~="hover:text-gray-900"]:not([class*="dark:hover:text-"]):hover { color: #FFFFFF !important; }
.dark [class~="hover:text-gray-600"]:not([class*="dark:hover:text-"]):hover { color: #D1D1D6 !important; }
.dark [class~="hover:text-blue-700"]:not([class*="dark:hover:text-"]):hover { color: #93C5FD !important; }

/* ---------- Dark Mode: Inline-style hex overrides (SCREEN ONLY — print stays paper-light) ---------- */
@media screen {
    /* white / near-white surfaces (generic first, specific tints after) */
    .dark [style*="#fff" i] { background-color: #1C1C1E !important; }
    .dark [style*="#fafafa" i] { background-color: #1C1C1E !important; }
    .dark [style*="#f4f4f6" i] { background-color: #1C1C1E !important; }
    .dark [style*="#f8fafc" i] { background-color: #1C1C1E !important; }
    /* tinted washes keep their hue in dark */
    .dark [style*="#e8f1fe" i],
    .dark [style*="#eff6ff" i] { background-color: rgba(59,130,246,.14) !important; }
    .dark [style*="#f1eafe" i],
    .dark [style*="#faf5ff" i] { background-color: rgba(168,85,247,.14) !important; }
    .dark [style*="#f3e8ff" i] { background-color: rgba(168,85,247,.20) !important; }
    .dark [style*="#e9d5ff" i] { background-color: rgba(168,85,247,.22) !important; }
    .dark [style*="#e9f9ef" i],
    .dark [style*="#ecfdf5" i] { background-color: rgba(16,185,129,.14) !important; }
    .dark [style*="#dcfce7" i] { background-color: rgba(16,185,129,.20) !important; }
    .dark [style*="#fff4e0" i] { background-color: rgba(245,158,11,.14) !important; }
    .dark [style*="#ffe9e4" i],
    .dark [style*="#ffeddf" i],
    .dark [style*="#fff7ed" i] { background-color: rgba(249,115,22,.14) !important; }
    .dark [style*="#ffe9f0" i] { background-color: rgba(244,63,94,.14) !important; }
    .dark [style*="#fdecec" i] { background-color: rgba(239,68,68,.14) !important; }
    .dark [style*="#e6f7fa" i] { background-color: rgba(6,182,212,.14) !important; }
    .dark [style*="#dff7f4" i] { background-color: rgba(20,184,166,.14) !important; }

    /* dark text inks -> light */
    .dark [style*="#0f172a" i] { color: #FFFFFF !important; border-color: rgba(255,255,255,.22) !important; }
    .dark [style*="#1e293b" i] { color: #FFFFFF !important; }
    .dark [style*="#334155" i] { color: #D1D1D6 !important; }
    .dark [style*="#475569" i] { color: #D1D1D6 !important; }
    .dark [style*="#64748b" i] { color: #8E8E93 !important; }
    .dark [style*="#94a3b8" i] { color: #8E8E93 !important; border-color: rgba(255,255,255,.16) !important; }
    /* colored text inks -> bright */
    .dark [style*="#1e3a8a" i] { color: #93C5FD !important; border-color: rgba(147,197,253,.45) !important; }
    .dark [style*="#1e40af" i] { color: #93C5FD !important; }
    .dark [style*="#581c87" i],
    .dark [style*="#6b21a8" i] { color: #C4B5FD !important; }
    .dark [style*="#15803d" i],
    .dark [style*="#065f46" i] { color: #6EE7B7 !important; }
    .dark [style*="#9a3412" i] { color: #FDBA74 !important; }
    .dark [style*="#c2410c" i] { color: #FDBA74 !important; }
    .dark [style*="#b45309" i] { color: #FCD34D !important; }
    .dark [style*="color:#0284c7" i],
    .dark [style*="color: #0284c7" i] { color: #7DD3FC !important; }
    .dark [style*="color:#5a4bda" i],
    .dark [style*="color: #5a4bda" i] { color: #A5B4FC !important; }
    .dark [style*="color:#7c3aed" i],
    .dark [style*="color: #7c3aed" i] { color: #C4B5FD !important; }
    /* light borders -> subtle */
    .dark [style*="#cbd5e1" i],
    .dark [style*="#e2e8f0" i] { border-color: rgba(255,255,255,.12) !important; }
    .dark [style*="#a7f3d0" i] { border-color: rgba(110,231,183,.30) !important; }
}

/* ---------- Dark Mode: component styles ---------- */

/* quick-unlock injected styles (.qu-*) */
.dark .qu-overlay { background: rgba(0,0,0,.92) !important; }
.dark .qu-setup-sheet { background: #1C1C1E !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 -8px 40px rgba(0,0,0,.6) !important; }
.dark .qu-setup-handle { background: rgba(255,255,255,.25) !important; }
.dark .qu-setup-title { color: #FFFFFF !important; }
.dark .qu-setup-desc { color: #8E8E93 !important; }
.dark .qu-btn-secondary { background: #2C2C2E !important; color: #FFFFFF !important; }
.dark .qu-btn-ghost { color: #8E8E93 !important; }
.dark .qu-student-name { color: #FFFFFF !important; }
.dark .qu-course-badge { background: rgba(90,75,218,.22) !important; color: #C4B5FD !important; }
.dark .qu-num { background: rgba(44,44,46,.85) !important; border-color: rgba(255,255,255,.12) !important; color: #FFFFFF !important; }
.dark .qu-num:active, .dark .qu-num.qu-active { background: rgba(90,75,218,.25) !important; color: #A5B4FC !important; }
.dark .qu-num small { color: #8E8E93 !important; }
.dark .qu-lock-badge { background: #2C2C2E !important; }
.dark .qu-switch, .dark .qu-action-btn { color: #A5B4FC !important; }
.dark .qu-error { color: #FF453A !important; }

/* pwa-install injected styles (.pwa-*) */
.dark .pwa-banner { background: rgba(28,28,30,.94) !important; border-color: rgba(255,255,255,.12) !important; }
.dark .pwa-title { color: #FFFFFF !important; }
.dark .pwa-desc { color: #8E8E93 !important; }
.dark .pwa-badge { background: rgba(90,75,218,.20) !important; color: #A5B4FC !important; }
.dark .pwa-close { background: rgba(255,255,255,.10) !important; color: #8E8E93 !important; }
.dark .pwa-close:hover { background: rgba(255,255,255,.18) !important; color: #FFFFFF !important; }
.dark .pwa-ios-modal { background: rgba(28,28,30,.98) !important; }
.dark .pwa-ios-step { background: #2C2C2E !important; color: #FFFFFF !important; }
/* actual floating install/update banner (class .pwa-banner-overlay, injected by pwa-install.js) */
.dark .pwa-banner-overlay { background: rgba(28,28,30,.96) !important; border-color: rgba(255,255,255,.12) !important; box-shadow: 0 16px 40px -8px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.07) inset !important; }
.dark .pwa-banner-title { color: #FFFFFF !important; }
.dark .pwa-banner-desc { color: #8E8E93 !important; }
.dark .pwa-banner-badge { background: rgba(90,75,218,.22) !important; color: #A5B4FC !important; }
.dark .pwa-btn-close { background: rgba(255,255,255,.10) !important; color: #8E8E93 !important; }
.dark .pwa-btn-close:hover { background: rgba(255,255,255,.18) !important; color: #FFFFFF !important; }
/* centered quick-unlock setup modal (class .qu-setup-modal, injected by quick-unlock.js) */
.dark .qu-setup-modal { background: #1C1C1E !important; box-shadow: 0 -12px 40px rgba(0,0,0,.65) !important; }
.dark .pwa-handle { background: rgba(255,255,255,.25) !important; }

/* iOS badges: brighten text on dark */
.dark .ios-badge-green { color: #30D158 !important; }
.dark .ios-badge-orange { color: #FF9F0A !important; }
.dark .ios-badge-blue { color: #A5B4FC !important; }

/* subject cards + locked semester pills */
.dark .subject-card { background: #1C1C1E !important; border-color: rgba(255,255,255,.08) !important; }
.dark .subject-card:hover { box-shadow: 0 12px 36px rgba(0,0,0,.5) !important; border-color: rgba(122,162,255,.25) !important; }
.dark .sem-pill-locked { background: rgba(255,255,255,.04) !important; color: #8E8E93 !important; border-color: rgba(255,255,255,.16) !important; }
.dark .sem-pill-locked:hover { background: rgba(245,158,11,.12) !important; color: #FCD34D !important; border-color: rgba(245,158,11,.40) !important; }
.dark .sem-pill-locked-active { background: rgba(245,158,11,.16) !important; color: #FCD34D !important; border-color: rgba(245,158,11,.50) !important; }

/* dashboard-injected resume styles */
.dark .skill-item::before { color: #7DD3FC !important; }

/* ---------- ATS Resume Checker page (.ats-*) ---------- */
.dark .ats-body { background: #000000 !important; color: #FFFFFF !important; }
.dark .ats-header { border-color: rgba(255,255,255,.12) !important; }
.dark .ats-nav-link { color: #D1D1D6 !important; }
.dark .ats-nav-link:hover { background: #2C2C2E !important; color: #FFFFFF !important; }
.dark .ats-btn-ghost { background: #2C2C2E !important; color: #D1D1D6 !important; }
.dark .ats-btn-ghost:hover { background: rgba(255,255,255,.12) !important; }
.dark .ats-pill, .dark .ats-card, .dark .ats-step, .dark .ats-faq details,
.dark .ats-kw, .dark .ats-fixes-card, .dark .ats-checks { background: #1C1C1E !important; border-color: rgba(255,255,255,.12) !important; }
.dark .ats-logo-sub, .dark .ats-pill, .dark .ats-faq summary::after { color: #A5B4FC !important; }
.dark .ats-sub, .dark .ats-drop-sub, .dark .ats-kw-sub, .dark .ats-h2-sub,
.dark .ats-step p, .dark .ats-loading p, .dark .ats-faq .a { color: #8E8E93 !important; }
.dark .ats-trust span { color: #D1D1D6 !important; background: #1C1C1E !important; border-color: rgba(255,255,255,.12) !important; }
.dark .ats-tabs { background: #2C2C2E !important; }
.dark .ats-tab { color: #8E8E93 !important; }
.dark .ats-tab.active { background: #1C1C1E !important; color: #FFFFFF !important; }
.dark .ats-drop { border-color: rgba(255,255,255,.15) !important; background: #1C1C1E !important; }
.dark .ats-drop:hover, .dark .ats-drop.over { border-color: #5a4bda !important; background: rgba(90,75,218,.12) !important; }
.dark .ats-file-chip { background: rgba(59,130,246,.14) !important; border-color: rgba(147,197,253,.40) !important; color: #93C5FD !important; }
.dark .ats-file-chip button { color: #8E8E93 !important; }
.dark .ats-textarea { border-color: rgba(255,255,255,.15) !important; background: #1C1C1E !important; color: #FFFFFF !important; }
.dark .ats-textarea:focus { border-color: #5a4bda !important; background: #1C1C1E !important; }
.dark .ats-label { color: #D1D1D6 !important; }
.dark .ats-label .opt { color: #8E8E93 !important; }
.dark .ats-error { background: rgba(239,68,68,.12) !important; border-color: rgba(239,68,68,.40) !important; color: #FCA5A5 !important; }
.dark .ats-warn { background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.40) !important; color: #FCD34D !important; }
.dark .ats-fix { border-color: rgba(255,255,255,.08) !important; }
.dark .ats-fix-n { background: rgba(245,158,11,.18) !important; color: #FCD34D !important; }
.dark .ats-check { border-color: rgba(255,255,255,.08) !important; }
.dark .ats-check-ico.pass { background: rgba(16,185,129,.18) !important; color: #6EE7B7 !important; }
.dark .ats-check-ico.warn { background: rgba(245,158,11,.18) !important; color: #FCD34D !important; }
.dark .ats-check-ico.fail { background: rgba(239,68,68,.18) !important; color: #FCA5A5 !important; }
.dark .ats-check-pts { color: #8E8E93 !important; }
.dark .ats-check-detail { color: #8E8E93 !important; }
.dark .ats-check-tip { color: #93C5FD !important; background: rgba(59,130,246,.14) !important; }
.dark .ats-chip.hit { background: rgba(16,185,129,.18) !important; color: #6EE7B7 !important; }
.dark .ats-chip.miss { background: rgba(239,68,68,.18) !important; color: #FCA5A5 !important; }
.dark .ats-kw-label { color: #8E8E93 !important; }
.dark .ats-mistakes { background: rgba(239,68,68,.10) !important; border-color: rgba(239,68,68,.35) !important; }
.dark .ats-fixeslist { background: rgba(16,185,129,.10) !important; border-color: rgba(16,185,129,.35) !important; }
.dark .ats-mistakes h3 { color: #FCA5A5 !important; }
.dark .ats-fixeslist h3 { color: #6EE7B7 !important; }
.dark .ats-mistakes li, .dark .ats-fixeslist li { color: #D1D1D6 !important; }
.dark .ats-mistakes b, .dark .ats-fixeslist b { color: #FFFFFF !important; }
.dark .ats-footer { border-color: rgba(255,255,255,.12) !important; background: #0A0A0C !important; }
.dark .ats-footer p { color: #8E8E93 !important; }
.dark .ats-footer nav a { color: #8E8E93 !important; }
.dark .ats-footer nav a:hover { color: #A5B4FC !important; }
.dark .ats-spinner { border-color: rgba(90,75,218,.25) !important; border-top-color: #5a4bda !important; }

/* ---------- Placement Hub page (.plc-*) ---------- */
.dark .plc-body { background: #000000 !important; color: #FFFFFF !important; }
.dark .plc-header { border-color: rgba(255,255,255,.12) !important; }
.dark .plc-nav-link { color: #D1D1D6 !important; }
.dark .plc-nav-link:hover { background: #2C2C2E !important; color: #FFFFFF !important; }
.dark .plc-btn-ghost { background: #2C2C2E !important; color: #D1D1D6 !important; }
.dark .plc-btn-ghost:hover { background: rgba(255,255,255,.12) !important; }
.dark .plc-pill, .dark .plc-stat, .dark .plc-tabs, .dark .plc-job, .dark .plc-co,
.dark .plc-form, .dark .plc-app, .dark .plc-qa { background: #1C1C1E !important; border-color: rgba(255,255,255,.12) !important; }
.dark .plc-logo-sub, .dark .plc-pill, .dark .plc-qa summary::after { color: #A5B4FC !important; }
.dark .plc-sub, .dark .plc-stat span, .dark .plc-tab, .dark .plc-job-desc, .dark .plc-posted,
.dark .plc-co-role, .dark .plc-co-chev, .dark .plc-round p, .dark .plc-app-role,
.dark .plc-app-date, .dark .plc-group-h, .dark .plc-qa .a, .dark .plc-h2-sub, .dark .plc-note { color: #8E8E93 !important; }
.dark .plc-empty { color: #8E8E93 !important; background: #1C1C1E !important; border-color: rgba(255,255,255,.15) !important; }
.dark .plc-stat b, .dark .plc-job-co { color: #A5B4FC !important; }
.dark .plc-search, .dark .plc-select { border-color: rgba(255,255,255,.15) !important; background: #1C1C1E !important; color: #FFFFFF !important; }
.dark .plc-chipbtn { border-color: rgba(255,255,255,.15) !important; background: #1C1C1E !important; color: #8E8E93 !important; }
.dark .plc-chipbtn.active { background: #2C2C2E !important; border-color: rgba(255,255,255,.30) !important; color: #FFFFFF !important; }
.dark .plc-job.feat { border-color: rgba(165,180,252,.50) !important; background: linear-gradient(180deg, rgba(90,75,218,.12), #1C1C1E 60%) !important; }
.dark .plc-meta { background: #2C2C2E !important; color: #D1D1D6 !important; }
.dark .plc-meta.pay { background: rgba(16,185,129,.16) !important; color: #6EE7B7 !important; }
.dark .plc-meta.type-internship { background: rgba(99,102,241,.16) !important; color: #A5B4FC !important; }
.dark .plc-meta.type-fulltime { background: rgba(168,85,247,.16) !important; color: #C4B5FD !important; }
.dark .plc-tag { color: #A5B4FC !important; background: rgba(99,102,241,.14) !important; }
.dark .plc-round { background: #1C1C1E !important; border-color: rgba(255,255,255,.08) !important; }
.dark .plc-tip { background: rgba(59,130,246,.12) !important; border-color: rgba(147,197,253,.40) !important; color: #93C5FD !important; }
.dark .plc-input { border-color: rgba(255,255,255,.15) !important; background: #1C1C1E !important; color: #FFFFFF !important; }
.dark .plc-input:focus { border-color: #5a4bda !important; background: #1C1C1E !important; }
.dark .plc-status { border-color: rgba(255,255,255,.15) !important; background: #1C1C1E !important; color: #D1D1D6 !important; }
.dark .plc-del { color: rgba(255,255,255,.25) !important; }
.dark .plc-del:hover { color: #F87171 !important; }
.dark .plc-qa .a b { color: #FFFFFF !important; }
.dark .plc-footer { border-color: rgba(255,255,255,.12) !important; background: #0A0A0C !important; }
.dark .plc-footer p { color: #8E8E93 !important; }
.dark .plc-footer nav a { color: #8E8E93 !important; }
.dark .plc-footer nav a:hover { color: #A5B4FC !important; }

/* ---------- index.html landing page (um-* design system) ---------- */
/* theme vars flip for dark (html.dark beats :root on specificity) */
html.dark {
    --ink: #FFFFFF;
    --muted: #8E8E93;
    --line: rgba(255,255,255,.12);
    --bg: #000000;
    --card: #1C1C1E;
    --brand-50: rgba(90,75,218,.16);
}
.dark .um-h2 { color: #FFFFFF !important; }
.dark .um-header { background: rgba(0,0,0,.85) !important; }
.dark .um-mobilemenu { background: #1C1C1E !important; }
.dark .um-hero { background: linear-gradient(180deg, #0B0B18 0%, #141126 55%, #000000 100%) !important; }
.dark .um-hero h1 { color: #FFFFFF !important; }
.dark .um-hero .um-lead { color: #A1A1A6 !important; }
.dark .um-heroimg { background: #1C1C1E !important; }
.dark .um-pwring img { background: rgba(90,75,218,.15) !important; }
.dark .um-pwring::before { background: rgba(90,75,218,.40) !important; }
.dark .um-cb-q { background: #1C1C1E !important; color: #FFFFFF !important; }
.dark .um-cb-q::after { background: #1C1C1E !important; }
.dark .um-herostats, .dark .um-hstat { background: #1C1C1E !important; }
.dark .um-hstat { border-color: rgba(255,255,255,.10) !important; }
.dark .um-hstat b { color: #FFFFFF !important; }
.dark .um-hstat span { color: #8E8E93 !important; }
.dark .um-stats { background: #000000 !important; }
.dark .um-stats b { color: #FFFFFF !important; }
.dark .um-stats .lbl { color: #8E8E93 !important; }
.dark .um-rtab { background: #1C1C1E !important; color: #FFFFFF !important; }
.dark .um-rbanner { background: linear-gradient(135deg, rgba(245,158,11,.22), rgba(249,115,22,.10) 60%, #1C1C1E) !important; }
.dark .um-rbanner h3 { color: #FFFFFF !important; }
.dark .um-rpills span { background: #1C1C1E !important; border: 1px solid rgba(255,255,255,.12) !important; color: #FFFFFF !important; }
.dark .um-rchecks li { color: #D1D1D6 !important; }
.dark .um-rnav { background: #1C1C1E !important; color: #FFFFFF !important; }
.dark .um-appcta { background: linear-gradient(135deg, #2B1B4E 0%, #3B1D5E 45%, #4A1D3F 100%) !important; }
.dark .um-appchecks li { color: #FFFFFF !important; }
.dark .um-storebtn { background: #2C2C2E !important; }
.dark .um-tfeature, .dark .um-t { background: #1C1C1E !important; }
.dark .um-t blockquote, .dark .um-t .who b { color: #FFFFFF !important; }
.dark .um-t .qmark { background: rgba(255,255,255,.14) !important; }
.dark .um-famcard { background: rgba(249,115,22,.12) !important; }
.dark .um-famcard b { color: #FFFFFF !important; }
.dark .um-famcard span { color: #8E8E93 !important; }
.dark .um-catcard { background: #1C1C1E !important; border-color: rgba(255,255,255,.10) !important; }
.dark .um-catcard h3 { color: #FFFFFF !important; }
.dark .um-pill { background: #1C1C1E !important; color: #D1D1D6 !important; border: 1px solid rgba(255,255,255,.12) !important; }
.dark .um-explore { color: #FFFFFF !important; }
.dark .um-explore .um-arrow { background: #2C2C2E !important; }
.dark .um-check { background: rgba(16,185,129,.16) !important; color: #6EE7B7 !important; }
.dark .um-tphoto { background: #1C1C1E !important; }
.dark .um-faq details { background: #1C1C1E !important; }
.dark .um-footer { background: #0A0A0C !important; }
.dark .um-fdesc { color: #8E8E93 !important; }
.dark .um-footer b, .dark .um-footer h4 { color: #FFFFFF !important; }
.dark .um-footer a { color: #8E8E93 !important; }
.dark .um-fsocial a { background: #2C2C2E !important; color: #FFFFFF !important; }
.dark .um-rescard h3 { color: #FFFFFF !important; }
.dark .um-rescard p { color: #8E8E93 !important; }
.dark .um-rescard .illu { background: #1C1C1E !important; }
.dark .um-bnav { background: rgba(28,28,30,.90) !important; }
.dark .um-btn-ghost { background: #1C1C1E !important; }
.dark .um-feat h3 { color: #FFFFFF !important; }
.dark .um-feat p { color: #8E8E93 !important; }

/* ---------- Dark Mode Fallbacks — Mock Tests + Attendance pages (2026-09-29) ---------- */
/* These dark: utilities are absent from prebuilt tailwind.css; .dark ancestor overrides keep dark mode correct. */
.dark .bg-indigo-950\/40 { background-color: rgb(30 27 75 / 0.40) !important; }
.dark .bg-indigo-950\/60 { background-color: rgb(30 27 75 / 0.60) !important; }
.dark .bg-violet-950\/50 { background-color: rgb(46 16 101 / 0.50) !important; }
.dark .border-indigo-900 { border-color: #312e81 !important; }
.dark .border-emerald-900\/50 { border-color: rgb(6 78 59 / 0.50) !important; }
.dark .border-red-900\/50 { border-color: rgb(127 29 29 / 0.50) !important; }
.dark .divide-white\/5 > * + * { border-color: rgb(255 255 255 / 0.05) !important; }
.dark .stroke-white\/10 { stroke: rgb(255 255 255 / 0.10) !important; }
.dark .text-indigo-200 { color: #c7d2fe !important; }
.dark .text-indigo-300 { color: #a5b4fc !important; }
.dark .text-violet-400 { color: #a78bfa !important; }
.dark .from-\[\#1C1C1E\] { --tw-gradient-from: #1C1C1E var(--tw-gradient-from-position) !important; --tw-gradient-to: rgb(28 28 30 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.dark .via-indigo-950\/20 { --tw-gradient-to: rgb(30 27 75 / 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), rgb(30 27 75 / 0.20) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.dark .to-purple-950\/10 { --tw-gradient-to: rgb(59 7 100 / 0.10) var(--tw-gradient-to-position) !important; }
.dark .hover\:bg-emerald-950\/50:hover { background-color: rgb(6 78 59 / 0.50) !important; }
.dark .hover\:bg-red-950\/50:hover { background-color: rgb(127 29 29 / 0.50) !important; }
.dark .hover\:bg-red-950\/40:hover { background-color: rgb(127 29 29 / 0.40) !important; }
.dark .hover\:bg-white\/10:hover { background-color: rgb(255 255 255 / 0.10) !important; }
.dark .hover\:bg-white\/15:hover { background-color: rgb(255 255 255 / 0.15) !important; }
.dark .hover\:border-indigo-800:hover { border-color: #3730a3 !important; }
.dark .hover\:text-gray-300:hover { color: #d1d5db !important; }
.dark .hover\:text-white:hover { color: #ffffff !important; }

/* ---------- General fallbacks — Mock Tests + Attendance (2026-09-29) ---------- */
.disabled\:opacity-40:disabled { opacity: 0.40 !important; }
.hover\:border-indigo-300:hover { border-color: #a5b4fc !important; }
.hover\:border-violet-300:hover { border-color: #c4b5fd !important; }
.hover\:border-teal-300:hover { border-color: #5eead4 !important; }