Coder19/interview_system

1:root {2    --primary-color: #4f46e5;3    --primary-dark: #4338ca;4    --danger-color: #ef4444;5    --success-color: #10b981;6    --warning-color: #f59e0b;7    --bg-color: #0f172a;8    --card-bg: #1e293b;9    --text-primary: #f8fafc;10    --text-secondary: #94a3b8;11    --border-radius: 12px;12    --transition: all 0.2s ease;13}14 15* {16    margin: 0;17    padding: 0;18    box-sizing: border-box;19}20 21body {22    font-family: 'Inter', sans-serif;23    background-color: var(--bg-color);24    color: var(--text-primary);25    line-height: 1.6;26}27 28.app-container {29    max-width: 1400px;30    margin: 0 auto;31    padding: 1.5rem;32    min-height: 100vh;33    display: flex;34    flex-direction: column;35}36 37.app-header {38    display: flex;39    justify-content: space-between;40    align-items: center;41    margin-bottom: 2rem;42    padding-bottom: 1rem;43    border-bottom: 1px solid rgba(255, 255, 255, 0.1);44}45 46.status-indicator {47    display: flex;48    align-items: center;49    gap: 0.5rem;50    font-size: 0.9rem;51    color: var(--text-secondary);52}53 54.status-dot {55    width: 10px;56    height: 10px;57    border-radius: 50%;58    background-color: #6b7280;59    transition: var(--transition);60}61 62.status-dot.active {63    background-color: var(--success-color);64    box-shadow: 0 0 10px var(--success-color);65}66 67.status-dot.error {68    background-color: var(--danger-color);69    box-shadow: 0 0 10px var(--danger-color);70}71 72.main-content {73    display: grid;74    grid-template-columns: 1fr 350px;75    gap: 1.5rem;76    flex: 1;77}78 79.video-container {80    position: relative;81    background: #000;82    border-radius: var(--border-radius);83    overflow: hidden;84    aspect-ratio: 16/9;85}86 87#user-video {88    width: 100%;89    height: 100%;90    object-fit: cover;91    display: block;92}93 94#detection-canvas {95    position: absolute;96    top: 0;97    left: 0;98    width: 100%;99    height: 100%;100    pointer-events: none;101}102 103.controls-panel {104    background: var(--card-bg);105    border-radius: var(--border-radius);106    padding: 1.5rem;107    display: flex;108    flex-direction: column;109    gap: 1.5rem;110}111 112.control-group {113    display: flex;114    gap: 1rem;115}116 117.btn {118    padding: 0.75rem 1.25rem;119    border: none;120    border-radius: 8px;121    font-weight: 500;122    cursor: pointer;123    display: flex;124    align-items: center;125    gap: 0.5rem;126    transition: var(--transition);127    font-size: 0.9rem;128}129 130.btn:disabled {131    opacity: 0.6;132    cursor: not-allowed;133}134 135.btn-primary {136    background: var(--primary-color);137    color: white;138}139 140.btn-primary:not(:disabled):hover {141    background: var(--primary-dark);142    transform: translateY(-2px);143}144 145.btn-danger {146    background: var(--danger-color);147    color: white;148}149 150.btn-danger:not(:disabled):hover {151    background: #dc2626;152    transform: translateY(-2px);153}154 155.stats-container {156    display: grid;157    grid-template-columns: 1fr 1fr;158    gap: 1rem;159    background: rgba(0, 0, 0, 0.2);160    padding: 1rem;161    border-radius: var(--border-radius);162}163 164.stat-item {165    display: flex;166    flex-direction: column;167    gap: 0.25rem;168}169 170.stat-label {171    font-size: 0.8rem;172    color: var(--text-secondary);173}174 175.stat-value {176    font-weight: 600;177    font-size: 1.1rem;178}179 180.detection-log {181    background: rgba(0, 0, 0, 0.2);182    border-radius: var(--border-radius);183    padding: 1rem;184    flex: 1;185    display: flex;186    flex-direction: column;187}188 189.detection-log h3 {190    font-size: 1rem;191    margin-bottom: 0.75rem;192    color: var(--text-secondary);193}194 195.log-entries {196    flex: 1;197    overflow-y: auto;198    display: flex;199    flex-direction: column;200    gap: 0.5rem;201    font-size: 0.85rem;202}203 204.log-entry {205    background: rgba(255, 255, 255, 0.05);206    padding: 0.5rem 0.75rem;207    border-radius: 6px;208    display: flex;209    justify-content: space-between;210    align-items: center;211}212 213.log-time {214    color: var(--text-secondary);215    font-size: 0.8em;216}217 218.alert-notification {219    position: absolute;220    top: 1rem;221    right: 1rem;222    background: rgba(239, 68, 68, 0.9);223    color: white;224    padding: 0.75rem 1.25rem;225    border-radius: 8px;226    display: flex;227    align-items: center;228    gap: 0.5rem;229    z-index: 10;230    opacity: 0;231    transform: translateY(-20px);232    transition: all 0.3s ease;233    pointer-events: none;234}235 236.alert-notification.show {237    opacity: 1;238    transform: translateY(0);239}240.toast {241    visibility: hidden;242    min-width: 250px;243    margin-left: -125px;244    background-color: #333;245    color: #fff;246    text-align: center;247    border-radius: 4px;248    padding: 12px;249    position: fixed;250    z-index: 1000;251    left: 50%;252    bottom: 30px;253    font-size: 17px;254    opacity: 0;255    transition: opacity 0.5s ease, visibility 0.5s;256  }257  258  .toast.show {259    visibility: visible;260    opacity: 1;261  }262