*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px;color:#333}.app{max-width:1400px;margin:0 auto}header{text-align:center;color:#fff;margin-bottom:30px}header h1{font-size:2.5rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}header p{font-size:1.1rem;opacity:.9}.main-container{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-bottom:30px}@media(max-width:1024px){.main-container{grid-template-columns:1fr}}.camera-section{background:#fff;border-radius:12px;padding:20px;box-shadow:0 10px 30px #0003}.camera-wrapper{position:relative;width:100%;background:#000;border-radius:8px;overflow:hidden;margin-bottom:15px;aspect-ratio:4 / 3;transition:all .3s ease}.camera-container{position:relative;width:100%;height:100%}.status-bar{margin-bottom:15px}.status{padding:12px 20px;border-radius:6px;font-weight:500;text-align:center}.status-info{background:#e3f2fd;color:#1565c0}.status-success{background:#e8f5e9;color:#2e7d32}.status-warning{background:#fff3e0;color:#e65100}.status-error{background:#ffebee;color:#c62828}.controls{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.auto-capture-controls,.camera-controls{padding:15px;background:#f5f5f5;border-radius:8px;margin-bottom:20px}.auto-capture-controls h3,.camera-controls h3{margin-bottom:10px;font-size:1rem}.permission-status{background:#fff;padding:12px;border-radius:6px;margin-bottom:12px;border:1px solid #e0e0e0}.permission-status p{margin-bottom:8px;font-size:.95rem}.permission-status p:last-child{margin-bottom:0}.permission-status strong{display:inline-block;min-width:140px;color:#555}.button-group{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.input-group{display:flex;align-items:center;gap:10px;margin-bottom:10px}.input-group label{font-weight:500}.input-group input{padding:8px 12px;border:1px solid #ddd;border-radius:4px;width:100px;font-size:1rem}.settings-section{background:#fff;border-radius:12px;padding:20px;box-shadow:0 10px 30px #0003}.settings-section h2{margin-bottom:20px;color:#667eea}.setting-group{margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #eee}.setting-group:last-child{border-bottom:none}.setting-group h3{font-size:.95rem;margin-bottom:10px;color:#666;text-transform:uppercase;letter-spacing:.5px}.validation-setting{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.validation-setting label{font-weight:500}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:500}.btn{padding:12px 24px;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;flex:1;min-width:120px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#667eea;color:#fff}.btn-primary:hover:not(:disabled){background:#5568d3;transform:translateY(-1px);box-shadow:0 4px 8px #667eea4d}.btn-success{background:#4caf50;color:#fff}.btn-success:hover:not(:disabled){background:#45a049;transform:translateY(-1px);box-shadow:0 4px 8px #4caf504d}.btn-danger{background:#f44336;color:#fff}.btn-danger:hover:not(:disabled){background:#da190b;transform:translateY(-1px);box-shadow:0 4px 8px #f443364d}.btn-secondary{background:#757575;color:#fff}.btn-secondary:hover:not(:disabled){background:#616161;transform:translateY(-1px);box-shadow:0 4px 8px #7575754d}.select{padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:.95rem;background:#fff;cursor:pointer;width:100%;max-width:150px}.input-group .select{flex:1;max-width:100%}.validations-container{background:#f9f9f9;border-radius:6px;padding:15px;max-height:400px;overflow-y:auto}.validation-summary{display:flex;gap:10px;margin-bottom:15px;flex-wrap:wrap}.validation-badge{padding:8px 16px;border-radius:20px;font-size:.85rem;font-weight:600;flex:1;text-align:center}.validation-badge.pass{background:#4caf50;color:#fff}.validation-badge.warn{background:#ff9800;color:#fff}.validation-badge.fail{background:#f44336;color:#fff}.validation-list{display:flex;flex-direction:column;gap:8px}.validation-item{display:flex;align-items:center;gap:10px;padding:10px;border-radius:4px;font-size:.9rem}.validation-item.no-face{background:#fff3cd;color:#856404;justify-content:center}.validation-item.pass{background:#d4edda;color:#155724}.validation-item.warn{background:#fff3cd;color:#856404}.validation-item.fail{background:#f8d7da;color:#721c24}.validation-icon{font-size:1.2rem;font-weight:700}.validation-name{font-weight:600;flex:1}.validation-level{font-size:.75rem;opacity:.7;text-transform:uppercase}.validation-value{font-family:Courier New,monospace;font-size:.85rem}.gallery-section{background:#fff;border-radius:12px;padding:20px;box-shadow:0 10px 30px #0003}.gallery-section h2{margin-bottom:20px;color:#667eea}.photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}.captured-photo{border:2px solid #eee;border-radius:8px;padding:10px;background:#f9f9f9;transition:transform .2s}.captured-photo:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a}.captured-photo img{width:100%;height:auto;border-radius:4px;margin-bottom:10px}.photo-info{font-size:.85rem;margin-bottom:10px}.photo-info div{margin-bottom:4px}.photo-info strong{color:#666}footer{text-align:center;color:#fff;padding:20px;margin-top:30px;opacity:.9}input[type=range]{width:100%;height:6px;border-radius:3px;background:#ddd;outline:none;-webkit-appearance:none;margin-top:5px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;transition:background .2s}input[type=range]::-webkit-slider-thumb:hover{background:#764ba2}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#667eea;cursor:pointer;border:none;transition:background .2s}input[type=range]::-moz-range-thumb:hover{background:#764ba2}input[type=color]{width:50px;height:35px;border:2px solid #ddd;border-radius:4px;cursor:pointer;transition:border-color .2s}input[type=color]:hover{border-color:#667eea}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#888;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#555}