*, *::before, *::after {box-sizing: border-box;}
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;}
body{max-width:920px;margin:28px auto;padding:20px;background:#fafafa;color:#111;line-height:1.6;}
h1{font-size:28px;margin:0 0 8px;color:#222;}
h2{font-size:20px;margin:0 0 12px;color:#222;}
p.small{margin:0 0 12px;color:#555}
.row{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap;}
input[type="file"]{width:100%;padding:10px;border:2px dashed #ccc;border-radius:8px;background:#fff;cursor:pointer;}
input[type="number"],select,input[type="text"]{padding:8px 10px;border-radius:8px;border:1px solid #ccc;background:#fff;width:120px;}
button{padding:10px 16px;border-radius:8px;border:none;background:#4CAF50;color:white;font-weight:bold;cursor:pointer;transition:0.2s;display:inline-flex;align-items:center;gap:8px;}
button:hover{background:#45a049}
button:disabled{background:#ccc;cursor:not-allowed}
.box{border-radius:10px;padding:20px;background:#fff;border:1px solid #eee;margin-bottom:20px;box-shadow:0 2px 4px rgba(0,0,0,0.02);}
#error{display:none;background:#fff6f6;border-color:#f5c6cb;color:#8a1f1f;padding:12px;border-radius:8px;margin-bottom:12px;}
#success{display:none;background:#f4fdf5;border-color:#c3e6cb;color:#155724;padding:12px;border-radius:8px;margin-bottom:12px;}
audio{width:100%;margin-top:8px}
.controls{display:flex;gap:8px}
.hidden{display:none}
.label-group{display:flex;flex-direction:column;gap:4px;}
.label-group label{font-size:13px;font-weight:600;color:#444;}
.header-box{border-bottom:1px solid #eee;padding-bottom:12px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;}
canvas{width:100%;height:140px;background:#f9f9f9;border:1px solid #ddd;border-radius:8px;margin-top:10px;}
.canvas-container{position:relative;}
.progress-container{margin-top:10px;margin-bottom:10px;display:none;}
.progress-bar{height:10px;background-color:#e0e0e0;border-radius:5px;overflow:hidden;}
.progress{height:100%;background-color:#4CAF50;width:0%;transition:width 0.3s;}
.progress-text{margin-top:5px;font-size:12px;color:#666;}
.dl-btn{background:#0b61ff;}
.dl-btn:hover{background:#094fcc;}
.detect-btn{background:#f39c12;}
.detect-btn:hover{background:#d68910;}
.legend{display:flex;gap:12px;font-size:12px;font-weight:600;}
.legend span{display:flex;align-items:center;gap:4px;}
.legend-color{width:12px;height:12px;border-radius:3px;}
.content-section{font-size:15px;color:#444;}
.content-section p{margin-bottom:12px;}
.content-section ul{margin-left:20px;margin-bottom:12px;}
.content-section a{color:#0b61ff;text-decoration:none;}
.content-section a:hover{text-decoration:underline;}
footer{text-align:center;padding:20px;font-size:14px;color:#777;margin-top:20px;border-top:1px solid #ddd;}
@media (max-width: 600px) {
    .row {flex-direction:column;align-items:stretch;}
    input[type="number"],select,input[type="text"]{width:100%;}
}