:root{--bg-color:#0d1117;--panel-bg:#161b22;--panel-border:#30363d;--text-primary:#c9d1d9;--text-secondary:#8b949e;--accent-color:#2f81f7;--accent-hover:#388bfd;--success-color:#2ea043;--border-radius:12px;--transition:all .2s ease-in-out}body{background-color:var(--bg-color);min-width:320px;min-height:100vh;color:var(--text-primary);place-items:center;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;display:flex}#app{flex-direction:column;gap:24px;width:100%;max-width:1200px;margin:0 auto;padding:2rem;display:flex}.header-status{text-align:center}#status{color:var(--text-secondary);background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:20px;margin:0;padding:8px 16px;font-size:.95rem;display:inline-block}#vision-container{border-radius:var(--border-radius);border:1px solid var(--panel-border);background-color:#000;max-width:100%;margin:0 auto;display:inline-block;position:relative;overflow:hidden;box-shadow:0 8px 24px #000c}#webcam{max-width:100%;height:auto;display:block;transform:scaleX(-1)}#output_canvas{z-index:10;width:100%;height:100%;position:absolute;top:0;left:0;transform:scaleX(-1)}.dashboard-controls-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;width:100%;display:grid}.control-card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--border-radius);flex-direction:column;padding:20px;display:flex;box-shadow:0 4px 12px #0003}.control-card h3{color:var(--text-primary);border-bottom:1px solid var(--panel-border);text-align:left;margin-top:0;margin-bottom:16px;padding-bottom:8px;font-size:1rem}.card-content{flex-direction:column;flex-grow:1;gap:12px;display:flex}.vertical-group{align-items:stretch}.input-row{justify-content:space-between;align-items:center;display:flex}.slider-row{flex-direction:column;gap:8px;margin-bottom:8px;display:flex}.slider-row>div{justify-content:space-between;align-items:center;display:flex}.slider-row input[type=range]{width:100%}.radio-group label{cursor:pointer;color:var(--text-secondary);transition:var(--transition);align-items:center;gap:8px;padding:4px 0;font-size:.95rem;display:flex}.radio-group label:hover{color:var(--text-primary)}.radio-group input[type=radio]{accent-color:var(--accent-color);cursor:pointer;width:18px;height:18px}.select-group label{color:var(--text-secondary);font-size:.9rem}.select-group select{background:var(--bg-color);color:var(--text-primary);border:1px solid var(--panel-border);cursor:pointer;border-radius:6px;outline:none;max-width:150px;padding:6px 10px;font-size:.9rem}.select-group select:focus{border-color:var(--accent-color)}.slider-group label{text-align:left;font-size:.9rem;font-weight:500}#sensitivityValue,#emotionThresholdValue,#emotionSpeedValue{color:var(--accent-color);text-align:right;min-width:40px;font-size:.9rem;font-weight:600}.limit-handle{cursor:ns-resize;z-index:20;background:#f44;border-radius:4px;width:54px;height:8px;position:absolute;left:50%;transform:translate(-50%,50%)}#maxLimitHandle,#minLimitHandle{transform:translate(-50%,50%)}.limit-handle span{color:#f44;pointer-events:none;font-size:11px;font-weight:700;position:absolute;top:-4px;left:60px}.action-group{justify-content:center;gap:16px;display:flex}.btn{cursor:pointer;transition:var(--transition);border:1px solid #0000;border-radius:6px;justify-content:center;align-items:center;gap:8px;padding:8px 16px;font-size:.95rem;font-weight:600;display:flex}.btn-primary{color:var(--text-primary);border-color:var(--panel-border);background-color:#21262d}.btn-primary:hover{border-color:var(--text-secondary);background-color:#30363d}.btn-accent{background-color:var(--success-color);color:#fff}.btn-accent:hover{background-color:#3ab152}.btn-outline{border:1px solid var(--panel-border);color:var(--text-primary);background-color:#0000}.btn-outline:hover{background-color:var(--panel-border)}.input-with-button{gap:8px;display:flex}.input-with-button input{background:var(--bg-color);border:1px solid var(--panel-border);color:var(--text-primary);border-radius:6px;outline:none;width:250px;padding:8px 12px}.input-with-button input:focus{border-color:var(--accent-color)}#btStatus{color:var(--text-secondary);text-align:center;margin:0;font-size:.9rem;font-weight:600}.app-footer{text-align:center;margin-top:auto;padding-top:24px}.small-title{letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary);opacity:.6;font-size:.75rem}