Skullwanderer/marksmaster-pro

1@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');2 3:root {4  --primary-color: #06b6d4;5  --secondary-color: #000000;6  --dark-bg: #111827;7  --card-bg: #1f2937;8}9 10* {11  margin: 0;12  padding: 0;13  box-sizing: border-box;14  font-family: 'Inter', sans-serif;15}16 17body {18  background-color: var(--dark-bg);19  color: #f9fafb;20  min-height: 100vh;21  display: flex;22  flex-direction: column;23}24 25/* Custom scrollbar */26::-webkit-scrollbar {27  width: 8px;28}29 30::-webkit-scrollbar-track {31  background: #1f2937;32}33 34::-webkit-scrollbar-thumb {35  background: #06b6d4;36  border-radius: 4px;37}38 39::-webkit-scrollbar-thumb:hover {40  background: #0891b2;41}42 43/* Button styles */44.btn-primary {45  background-color: var(--primary-color);46  color: white;47  padding: 0.75rem 1.5rem;48  border-radius: 0.5rem;49  font-weight: 600;50  transition: all 0.3s ease;51  border: none;52  cursor: pointer;53}54 55.btn-primary:hover {56  background-color: #0891b2;57  transform: translateY(-2px);58  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);59}60 61.btn-secondary {62  background-color: transparent;63  color: var(--primary-color);64  border: 2px solid var(--primary-color);65  padding: 0.75rem 1.5rem;66  border-radius: 0.5rem;67  font-weight: 600;68  transition: all 0.3s ease;69  cursor: pointer;70}71 72.btn-secondary:hover {73  background-color: rgba(6, 182, 212, 0.1);74  transform: translateY(-2px);75}76 77/* Form styles */78.form-input {79  background-color: #374151;80  border: 1px solid #4b5563;81  border-radius: 0.5rem;82  padding: 0.75rem;83  color: white;84  width: 100%;85  transition: border-color 0.3s ease;86}87 88.form-input:focus {89  outline: none;90  border-color: var(--primary-color);91  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);92}93 94.form-label {95  display: block;96  margin-bottom: 0.5rem;97  font-weight: 500;98}99 100/* Card styles */101.card {102  background-color: var(--card-bg);103  border-radius: 0.75rem;104  padding: 1.5rem;105  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);106  transition: transform 0.3s ease;107}108 109.card:hover {110  transform: translateY(-5px);111}112 113/* Table styles */114.table-container {115  overflow-x: auto;116}117 118table {119  width: 100%;120  border-collapse: collapse;121}122 123th, td {124  padding: 1rem;125  text-align: left;126  border-bottom: 1px solid #374151;127}128 129th {130  background-color: rgba(6, 182, 212, 0.1);131  font-weight: 600;132}133 134tr:hover {135  background-color: rgba(31, 41, 55, 0.7);136}137 138/* Status badges */139.badge {140  padding: 0.25rem 0.75rem;141  border-radius: 9999px;142  font-size: 0.875rem;143  font-weight: 500;144}145 146.badge-pass {147  background-color: rgba(16, 185, 129, 0.2);148  color: #10b981;149}150 151.badge-resit {152  background-color: rgba(245, 158, 11, 0.2);153  color: #f59e0b;154}155 156.badge-withdrawn {157  background-color: rgba(239, 68, 68, 0.2);158  color: #ef4444;159}160 161/* Responsive adjustments */162@media (max-width: 768px) {163  .card {164    padding: 1rem;165  }166  167  th, td {168    padding: 0.75rem 0.5rem;169  }170}