HuggerInChief/crowd-anomaly-detection

1:root {2  --bg: #0f1117;3  --panel: #171a23;4  --panel-border: #2a2e3a;5  --text: #e8e9ed;6  --muted: #9aa0b0;7  --accent: #ef4459;8  --accent-soft: rgba(239, 68, 89, 0.15);9  --ok: #2fbf71;10  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;11}12 13* { box-sizing: border-box; }14 15body {16  margin: 0;17  background: radial-gradient(1200px 600px at 50% -10%, #1c2030 0%, var(--bg) 60%);18  color: var(--text);19  min-height: 100vh;20}21 22.wrap {23  max-width: 1080px;24  margin: 0 auto;25  padding: 32px 20px 60px;26}27 28header.hero {29  text-align: center;30  margin-bottom: 28px;31}32 33header.hero h1 {34  font-size: 2rem;35  margin: 0 0 8px;36}37 38header.hero p {39  color: var(--muted);40  max-width: 640px;41  margin: 0 auto;42  line-height: 1.5;43}44 45.badge {46  display: inline-block;47  background: var(--accent-soft);48  color: var(--accent);49  border: 1px solid var(--accent);50  border-radius: 999px;51  padding: 3px 12px;52  font-size: 0.75rem;53  margin-bottom: 14px;54  letter-spacing: 0.02em;55}56 57.tabs {58  display: flex;59  gap: 8px;60  justify-content: center;61  margin-bottom: 20px;62  flex-wrap: wrap;63}64 65.tab-btn {66  background: var(--panel);67  border: 1px solid var(--panel-border);68  color: var(--text);69  padding: 10px 18px;70  border-radius: 10px;71  cursor: pointer;72  font-size: 0.95rem;73  transition: 0.15s ease;74}75 76.tab-btn:hover { border-color: var(--accent); }77 78.tab-btn.active {79  background: var(--accent);80  border-color: var(--accent);81  color: #fff;82}83 84.panel {85  background: var(--panel);86  border: 1px solid var(--panel-border);87  border-radius: 16px;88  padding: 24px;89  margin-bottom: 20px;90}91 92.tab-view { display: none; }93.tab-view.active { display: block; }94 95.controls-row {96  display: flex;97  gap: 24px;98  flex-wrap: wrap;99  align-items: center;100  margin-bottom: 18px;101}102 103.control {104  display: flex;105  flex-direction: column;106  gap: 6px;107  min-width: 220px;108}109 110.control label {111  font-size: 0.85rem;112  color: var(--muted);113}114 115.control output {116  color: var(--accent);117  font-weight: 600;118}119 120input[type="range"] { accent-color: var(--accent); }121 122.stage {123  display: flex;124  gap: 20px;125  flex-wrap: wrap;126}127 128.stage-col {129  flex: 1 1 380px;130  min-width: 300px;131}132 133.canvas-frame {134  position: relative;135  width: 100%;136  border-radius: 12px;137  overflow: hidden;138  background: #000;139  border: 1px solid var(--panel-border);140  aspect-ratio: 4 / 3;141}142 143canvas, video {144  position: absolute;145  inset: 0;146  width: 100%;147  height: 100%;148  object-fit: contain;149}150 151.dropzone {152  border: 2px dashed var(--panel-border);153  border-radius: 12px;154  padding: 28px;155  text-align: center;156  color: var(--muted);157  cursor: pointer;158  transition: 0.15s ease;159}160 161.dropzone:hover, .dropzone.active { border-color: var(--accent); color: var(--text); }162 163button.primary {164  background: var(--accent);165  color: #fff;166  border: none;167  padding: 10px 20px;168  border-radius: 10px;169  cursor: pointer;170  font-size: 0.95rem;171  font-weight: 600;172}173 174button.primary:disabled {175  opacity: 0.5;176  cursor: not-allowed;177}178 179button.secondary {180  background: transparent;181  color: var(--text);182  border: 1px solid var(--panel-border);183  padding: 10px 20px;184  border-radius: 10px;185  cursor: pointer;186}187 188.examples {189  display: flex;190  gap: 10px;191  margin-top: 14px;192  flex-wrap: wrap;193}194 195.examples img {196  width: 90px;197  height: 60px;198  object-fit: cover;199  border-radius: 8px;200  border: 2px solid var(--panel-border);201  cursor: pointer;202}203 204.examples img:hover { border-color: var(--accent); }205 206.status-line {207  margin-top: 14px;208  font-size: 0.9rem;209  color: var(--muted);210}211 212.status-line.warn { color: #f0a742; }213.status-line.ok { color: var(--ok); }214 215table.metrics {216  width: 100%;217  border-collapse: collapse;218  font-size: 0.92rem;219}220 221table.metrics th, table.metrics td {222  text-align: left;223  padding: 8px 10px;224  border-bottom: 1px solid var(--panel-border);225}226 227table.metrics th { color: var(--muted); font-weight: 500; }228 229footer {230  text-align: center;231  color: var(--muted);232  font-size: 0.85rem;233  margin-top: 30px;234}235 236.loading-overlay {237  position: absolute;238  inset: 0;239  display: flex;240  align-items: center;241  justify-content: center;242  background: rgba(0,0,0,0.5);243  color: #fff;244  font-size: 0.95rem;245}246