:root{--navy:#123B63;--blue:#2563EB;--cyan:#06B6D4;--green:#10B981;--yellow:#F59E0B;--red:#EF4444;--purple:#7C3AED;--bg:#F8FAFC;--card:#fff;--text:#0F172A;--muted:#64748B;--border:#E2E8F0;--radius:12px;--shadow:0 4px 18px rgba(15,23,42,.06);--sidebar:258px}
*{box-sizing:border-box}body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);margin:0;font-size:.93rem}.app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:linear-gradient(180deg,#0f3559 0%,#123B63 70%,#0d2c4a 100%);color:#fff;padding:22px 16px;display:flex;flex-direction:column;z-index:1040;overflow-y:auto}.brand{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none;padding:0 8px 22px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--blue),var(--cyan));font-size:1.45rem}.brand strong{font-size:1.22rem;display:block;letter-spacing:-.03em}.brand strong span{color:#65e3ef}.brand small{display:block;color:#b7d0e5;font-size:.68rem;margin-top:1px}.sidebar nav{flex:1}.nav-section{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:#8fadc7;font-weight:700;padding:20px 12px 7px}.sidebar .nav-link{color:#d7e5f1;border-radius:9px;padding:9px 11px;margin:2px 0;display:flex;gap:11px;align-items:center;font-size:.86rem}.sidebar .nav-link i{width:19px;text-align:center;font-size:1.02rem}.sidebar .nav-link:hover,.sidebar .nav-link.active{background:rgba(255,255,255,.11);color:#fff}.sidebar .nav-link.active{box-shadow:inset 3px 0 0 var(--cyan)}.sidebar-footer{display:flex;gap:10px;align-items:center;border-top:1px solid rgba(255,255,255,.12);padding:17px 10px 0;color:#d7e5f1;font-size:.76rem}.sidebar-footer small{color:#8fadc7}.content-shell{margin-left:var(--sidebar);min-height:100vh}.topbar{height:76px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:1020}.topbar-title span,.topbar-title strong{display:block}.topbar-title span{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.topbar-title strong{font-size:1.04rem}.user-menu{display:flex;align-items:center;gap:10px}.user-menu strong,.user-menu small{display:block;font-size:.78rem}.user-menu small{color:var(--muted);font-size:.68rem}.avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#e0edff;color:var(--blue);font-weight:700}.btn-icon{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border);background:#fff;border-radius:9px;color:var(--muted)}.main-content{padding:28px;max-width:1600px;margin:auto}.card{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}.card-header{background:#fff;border-bottom:1px solid var(--border);padding:17px 20px;border-radius:var(--radius) var(--radius) 0 0!important}.card-header h2,.card-header h3{font-size:1rem;margin:0}.card-body{padding:20px}.stat-card{height:100%;padding:18px;position:relative;overflow:hidden}.stat-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#e9f1ff;color:var(--blue);font-size:1.15rem}.stat-label{font-size:.75rem;color:var(--muted);margin-top:15px}.stat-value{font-size:1.55rem;font-weight:700;letter-spacing:-.04em}.stat-sub{font-size:.7rem;color:var(--muted)}.page-actions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:22px}.page-actions h1{font-size:1.35rem;margin:0}.page-actions p{margin:4px 0 0;color:var(--muted);font-size:.82rem}.btn{border-radius:9px;font-weight:600;font-size:.84rem}.btn-primary{background:var(--blue);border-color:var(--blue)}.btn-cyan{background:var(--cyan);border-color:var(--cyan);color:#fff}.form-label{font-size:.77rem;font-weight:600;color:#334155}.form-control,.form-select{border-color:var(--border);border-radius:9px;min-height:42px;font-size:.86rem}.form-control:focus,.form-select:focus{border-color:var(--blue);box-shadow:0 0 0 .2rem rgba(37,99,235,.12)}.table{font-size:.82rem;margin:0}.table th{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;background:#f8fafc;border-bottom-color:var(--border);white-space:nowrap}.table td{vertical-align:middle;border-color:#edf2f7}.badge{font-weight:600;padding:.42em .65em}.badge-soft-success{background:#dff8ef;color:#087c59}.badge-soft-warning{background:#fff4d6;color:#9a6200}.badge-soft-danger{background:#fee5e5;color:#b42318}.badge-soft-primary{background:#e5edff;color:#1d4ed8}.badge-soft-muted{background:#eef2f6;color:#526071}.empty-state{text-align:center;padding:45px;color:var(--muted)}.empty-state i{display:block;font-size:2rem;color:#b8c4d1;margin-bottom:10px}.search-bar{display:flex;gap:8px;max-width:420px}.filter-panel{padding:14px 16px;margin-bottom:18px}.required:after{content:' *';color:var(--red)}.metric{padding:14px;background:#f8fafc;border:1px solid var(--border);border-radius:10px}.metric span{display:block;color:var(--muted);font-size:.7rem}.metric strong{font-size:1.22rem}.reading-word{display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:7px 8px;margin:3px;border-radius:8px;border:1px solid transparent;background:#f8fafc;cursor:pointer}.reading-word small{font-size:.56rem;text-transform:uppercase;font-weight:700}.word-correct{background:#e7f8f1;color:#087c59}.word-omission,.word-substitution,.word-insertion{background:#fee9e9;color:#b42318}.word-hesitation{background:#fff3cf;color:#976100}.word-repetition{background:#fff0df;color:#b45309}.word-self_correction{background:#e6f0ff;color:#1d4ed8}.word-unidentified{background:#eef2f6;color:#526071}.recording-layout{max-width:1000px;margin:auto}.reading-text{font-family:Georgia,serif;font-size:1.55rem;line-height:1.9;color:#172033;background:#fff;padding:32px;border:1px solid var(--border);border-radius:14px}.record-indicator{width:12px;height:12px;border-radius:50%;background:#94a3b8;display:inline-block}.record-indicator.active{background:var(--red);animation:pulse 1.2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}}.timer{font-variant-numeric:tabular-nums;font-size:2.3rem;font-weight:700;letter-spacing:-.05em}.audio-bars{height:50px;display:flex;align-items:center;justify-content:center;gap:3px}.audio-bars span{width:3px;height:8px;background:#bfd0df;border-radius:2px}.recording .audio-bars span{animation:wave .7s ease-in-out infinite alternate}.audio-bars span:nth-child(2n){animation-delay:.15s}.audio-bars span:nth-child(3n){animation-delay:.3s}@keyframes wave{to{height:42px;background:var(--cyan)}}.process-step{display:flex;gap:12px;align-items:center;padding:10px 0;color:var(--muted)}.process-step.done{color:#087c59}.process-step.current{color:var(--blue);font-weight:600}.alert{border-radius:10px;border-width:1px}.pagination{--bs-pagination-border-color:var(--border);--bs-pagination-border-radius:8px}
@media(max-width:991.98px){.sidebar{transform:translateX(-100%);transition:transform .2s ease}.sidebar.open{transform:translateX(0);box-shadow:20px 0 50px rgba(15,23,42,.25)}.content-shell{margin-left:0}.main-content{padding:20px}.topbar{padding:0 18px}}
@media(max-width:575.98px){.main-content{padding:15px}.page-actions{align-items:flex-start;flex-direction:column}.page-actions>.d-flex{width:100%}.page-actions .btn{flex:1}.reading-text{font-size:1.25rem;line-height:1.75;padding:20px}.topbar{height:66px}.stat-value{font-size:1.35rem}.card-body{padding:15px}.table-responsive{border-radius:0 0 var(--radius) var(--radius)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}