body { font-family: 'Segoe UI', Tahoma, sans-serif; background-color: #2b2b2b; color: #ecf0f1; margin: 0; padding: 20px; text-align: center; }
.container { max-width: 500px; margin: 0 auto; background: #3c3f41; padding: 20px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); border: 1px solid #555; }
.header h1 { margin: 0 0 10px 0; color: #fff; font-size: 1.5rem; }
.version { font-size: 0.8em; color: #aaa; margin-bottom: 20px; }
#video-container { position: relative; width: 100%; background: #000; overflow: hidden; border-radius: 4px; min-height: 250px; }
#qr-video { width: 100%; display: block; }
.scan-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 200px; border: 3px solid rgba(231, 76, 60, 0.9); box-shadow: 0 0 0 100vmax rgba(0,0,0,0.6); pointer-events: none; }
.controls { margin-top: 15px; }
#status-msg { color: #ccc; font-weight: bold; margin-bottom: 10px; }
.manual-link { display: inline-block; padding: 8px 15px; background: #555; color: #ddd; text-decoration: none; border-radius: 4px; font-size: 0.9rem; border: 1px solid #666; margin-top: 10px; }
.manual-link:hover { background: #666; color: #fff; }
.footer { margin-top: 30px; border-top: 1px solid #555; padding-top: 10px; }
.footer a { color: #aaa; text-decoration: none; margin: 0 10px; }
.footer a:hover { color: #fff; }
.hidden { display: none; }
.res-box { background: #fff; color: #333; padding: 15px; border-radius: 4px; margin-top: 15px; text-align: left; }
.res-box.safe { border-left: 5px solid #27ae60; }
.res-box.warn { border-left: 5px solid #f39c12; }
.res-box.danger { border-left: 5px solid #c0392b; }
.btn-open { display: inline-block; padding: 10px; background: #27ae60; color: white; border-radius: 4px; text-decoration: none; margin-top: 10px; }
button { background: #3498db; color: white; border: none; padding: 10px; border-radius: 4px; cursor: pointer; margin-top: 10px; }