HelloWorld97/layeredlearner-assignment-mastermind

1/* Main Styles for LayeredLearner */2 3/* Custom scrollbar */4::-webkit-scrollbar {5    width: 8px;6    height: 8px;7}8 9::-webkit-scrollbar-track {10    background: #f1f1f1;11    border-radius: 4px;12}13 14::-webkit-scrollbar-thumb {15    background: #c1c1c1;16    border-radius: 4px;17}18 19::-webkit-scrollbar-thumb:hover {20    background: #a1a1a1;21}22 23/* Animations */24@keyframes fadeIn {25    from { opacity: 0; transform: translateY(10px); }26    to { opacity: 1; transform: translateY(0); }27}28 29@keyframes slideIn {30    from { transform: translateX(-10px); opacity: 0; }31    to { transform: translateX(0); opacity: 1; }32}33 34@keyframes pulse {35    0%, 100% { opacity: 1; }36    50% { opacity: 0.5; }37}38 39/* Utility classes */40.animate-fade-in {41    animation: fadeIn 0.3s ease-out;42}43 44.animate-slide-in {45    animation: slideIn 0.3s ease-out;46}47 48.pulse-animation {49    animation: pulse 2s infinite;50}51 52/* Status badges */53.status-badge {54    @apply px-3 py-1 rounded-full text-xs font-medium;55}56 57.status-not-started {58    @apply bg-gray-100 text-gray-800;59}60 61.status-in-progress {62    @apply bg-blue-100 text-blue-800;63}64 65.status-draft-done {66    @apply bg-yellow-100 text-yellow-800;67}68 69.status-submitted {70    @apply bg-purple-100 text-purple-800;71}72 73.status-graded {74    @apply bg-green-100 text-green-800;75}76 77/* Type indicators */78.type-indicator {79    @apply px-3 py-1 rounded-full text-xs font-medium;80}81 82.type-written {83    @apply bg-indigo-100 text-indigo-800;84}85 86.type-quiz {87    @apply bg-pink-100 text-pink-800;88}89 90.type-test {91    @apply bg-red-100 text-red-800;92}93 94.type-project {95    @apply bg-orange-100 text-orange-800;96}97 98.type-learning-guide {99    @apply bg-teal-100 text-teal-800;100}101 102/* Table row hover effects */103.table-row-hover:hover {104    @apply bg-gray-50 cursor-pointer;105    transform: translateY(-1px);106    transition: all 0.2s ease;107    box-shadow: 0 2px 4px rgba(0,0,0,0.05);108}109 110/* Modal backdrop */111.modal-backdrop {112    @apply fixed inset-0 bg-black bg-opacity-50 z-50;113    backdrop-filter: blur(4px);114}115 116/* Card hover effects */117.hover-card {118    @apply transition-all duration-200;119}120 121.hover-card:hover {122    transform: translateY(-2px);123    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1);124}125 126/* Gradient text */127.gradient-text {128    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);129    -webkit-background-clip: text;130    -webkit-text-fill-color: transparent;131    background-clip: text;132}133 134/* Loading spinner */135.spinner {136    width: 24px;137    height: 24px;138    border: 3px solid #f3f3f3;139    border-top: 3px solid #3b82f6;140    border-radius: 50%;141    animation: spin 1s linear infinite;142}143 144@keyframes spin {145    0% { transform: rotate(0deg); }146    100% { transform: rotate(360deg); }147}148 149/* AI response styling */150.ai-response {151    @apply border-l-4 border-accent bg-accent/5 p-4 rounded-r-lg;152}153 154.ai-response h4 {155    @apply text-accent font-bold mb-2 flex items-center gap-2;156}157 158/* Responsive adjustments */159@media (max-width: 768px) {160    .mobile-stack {161        @apply flex-col space-y-2;162    }163    164    .mobile-full {165        @apply w-full;166    }167    168    .mobile-hidden {169        @apply hidden;170    }171    172    .mobile-show {173        @apply block;174    }175}176 177/* Print styles */178@media print {179    .no-print {180        display: none !important;181    }182    183    body {184        background: white !important;185    }186    187    .print-break {188        page-break-inside: avoid;189    }190}191 192/* Focus styles for accessibility */193.focus-visible {194    @apply outline-none ring-2 ring-primary ring-offset-2;195}196 197/* Transition utilities */198.transition-all-200 {199    transition: all 0.2s ease;200}201 202.transition-all-300 {203    transition: all 0.3s ease;204}205 206/* Custom shadows */207.shadow-soft {208    box-shadow: 0 2px 15px -3px rgba(0,0,0,0.07);209}210 211.shadow-medium {212    box-shadow: 0 4px 20px -5px rgba(0,0,0,0.1);213}214 215.shadow-hard {216    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15);217}