:root {
          --color-text-secondary: #ffffff;
          --surface: #13131a;
          --color-background-secondary: #2a2a3a;
          --accent: #e8ff47;
          --accent2: #ff4778;
          --color-border-secondary: #e8e8f0;
          --color-border-tertiary: #7d7d81;
          --color-text-primary: #ffffff;
          --text-dim: #6a6a8a;
          --correct: #47ffaa;
          --tile-border: #2a2a3a;
          --tile-correct: #47ffaa44;
          --border-radius-lg: 4px;
          --gap: 0px;
          --greenborder: #2d5227;
          --border-radius-md: 5px;
          --font-sans: sans-serif;
      }

*{box-sizing:border-box;margin:0;padding:0}
#app{padding:1.5rem 0}
body{font-family:var(--font-sans);font-size: 1.2rem;}
.drop-zone{border:1.5px dashed var(--color-border-secondary);border-radius:var(--border-radius-lg);padding:2.5rem 1.5rem;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;background:var(--color-background-secondary)}
.drop-zone:hover,.drop-zone.over{border-color:#378ADD;background:var(--color-background-primary)}
.drop-zone input{display:none}
.drop-label{font-size:15px;font-weight:500;color:var(--color-text-primary)}
.drop-sub{font-size:13px;color:var(--color-text-secondary);margin-top:4px}
.badge{display:inline-block;font-size:11px;font-weight:500;padding:2px 8px;border-radius:20px;margin:0 3px}
.badge-wav{background:#4a4a4a;color:#3B6D11}
.badge-aiff{background:#4a4a4a;color:#185FA5}
.badge-mp3{background:#4a4a4a;color:#854F0B}
#error{color:var(--color-text-danger);font-size:13px;margin-top:12px;display:none;padding:8px 12px;background:var(--color-background-danger);border-radius:var(--border-radius-md)}
#results{margin-top:1.5rem;display:none}
table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:1.5rem}
th{text-align:left;font-size:12px;font-weight:500;color:var(--color-text-secondary);padding:6px 10px;border-bottom:1.5px solid var(--color-border-secondary);white-space:nowrap}
td{padding:7px 10px;border-bottom:0.5px solid var(--color-border-tertiary);color:var(--color-text-primary);word-break:break-all}
tr:hover td{background:var(--color-background-secondary)}
td.mono{font-family:var(--font-mono);color:var(--color-text-secondary);white-space:nowrap;word-break:normal}
td.num{text-align:right;font-family:var(--font-mono);white-space:nowrap}
.export-btn{font-size:13px;padding:6px 14px;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-primary);cursor:pointer}
.export-btn:hover{background:var(--color-background-secondary)}
.mp3-note{font-size:12px;color:var(--color-text-secondary);margin-bottom:10px;padding:8px 12px;background:var(--color-background-warning);border-radius:var(--border-radius-md);border-left:3px solid #EF9F27}
#reset{font-size:13px;padding:6px 14px;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);background:transparent;color:var(--color-text-secondary);cursor:pointer;margin-bottom:1rem;float:right}
#reset:hover{background:var(--color-background-secondary)}
.summary-bar{display:flex;gap:12px;margin-bottom:1.5rem;flex-wrap:wrap}
.metric{background:var(--color-background-secondary);border-radius:var(--border-radius-md);padding:10px 14px;min-width:80px}
.metric-label{font-size:11px;color:var(--color-text-secondary)}
.metric-val{font-size:20px;font-weight:500;color:var(--color-text-primary)}
.section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;margin-top:1rem}
.section-title{font-size:15px;font-weight:500;color:var(--color-text-primary);display:flex;align-items:center;gap:6px}
.cnt{font-size:12px;font-weight:400;color:var(--color-text-secondary)}