* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:#f8f8f6; color:#1a1a1a; min-height:100vh; }
header { background:#fff; border-bottom:1px solid #e8e8e4; padding:0 20px; display:flex; align-items:center; min-height:56px; gap:16px; flex-wrap:wrap; }
.logo { font-weight:700; font-size:20px; letter-spacing:-0.5px; flex-shrink:0; padding:8px 0; }
.logo .dot { color:#d4502a; }
.logo small { font-size:11px; color:#888; font-weight:500; margin-left:2px; }
nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; align-items:center; }
nav a { text-decoration:none; color:#555; font-size:12px; font-weight:500; padding:5px 10px; border-radius:6px; white-space:nowrap; transition:background 0.15s; }
nav a:hover { background:#f0f0ec; color:#1a1a1a; }
nav a.nav-active { background:#fff5f2; color:#d4502a; font-weight:600; }
.lang-toggle { display:flex; background:#f0f0ec; border-radius:8px; padding:2px; gap:2px; flex-shrink:0; }
.lang-toggle button { padding:4px 12px; border-radius:6px; border:none; cursor:pointer; font-weight:600; font-size:12px; background:transparent; color:#888; }
.lang-toggle button.active { background:#fff; color:#1a1a1a; }
main { max-width:800px; margin:0 auto; padding:24px 16px; }
.upload-zone { border:2px dashed #d0d0cc; border-radius:16px; padding:32px 20px; text-align:center; background:#fff; transition:all 0.2s; margin-bottom:16px; cursor:pointer; }
.upload-zone.drag-over { border-color:#d4502a; background:#fff5f2; }
.upload-icon { font-size:36px; margin-bottom:10px; }
.upload-title { font-weight:600; font-size:15px; margin-bottom:6px; }
.upload-sub { color:#888; font-size:13px; margin-bottom:14px; }
.btn-primary   { padding:8px 20px; border-radius:8px; border:none; background:#1a1a1a; color:#fff; cursor:pointer; font-weight:600; font-size:13px; }
.btn-secondary { padding:8px 20px; border-radius:8px; border:1px solid #e0e0dc; background:#f8f8f6; cursor:pointer; font-size:13px; font-weight:500; }
.btn-save      { padding:5px 12px; border-radius:8px; border:none; background:#2d8a4e; color:#fff; cursor:pointer; font-weight:600; font-size:12px; flex-shrink:0; }
.document-box { background:#fff; border-radius:12px; border:1px solid #e8e8e4; margin-bottom:16px; overflow:hidden; }
.doc-header { padding:10px 14px; border-bottom:1px solid #e8e8e4; display:flex; align-items:center; gap:8px; background:#f8f8f6; flex-wrap:wrap; }
.lang-badge { font-size:11px; color:#888; background:#e8e8e4; padding:2px 8px; border-radius:4px; font-weight:600; }
.doc-content { padding:16px; max-height:240px; overflow-y:auto; font-size:15px; line-height:1.8; color:#333; white-space:pre-wrap; -webkit-overflow-scrolling:touch; }
.player { background:#fff; border-radius:16px; border:1px solid #e8e8e4; padding:20px; }
.no-doc { text-align:center; color:#aaa; margin-bottom:16px; font-size:14px; }
.progress-wrap { margin-bottom:16px; }
.progress-bar { height:12px; background:#f0f0ec; border-radius:6px; overflow:hidden; cursor:pointer; margin-bottom:10px; touch-action:none; }
.progress-fill { height:100%; width:0%; background:#d4502a; border-radius:6px; pointer-events:none; }
.seek-row { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.seek-btns { display:flex; gap:6px; }
.seek-btn { padding:5px 10px; border-radius:6px; border:1px solid #e0e0dc; background:#f8f8f6; cursor:pointer; font-size:12px; font-weight:600; color:#555; }
.seek-btn:active { background:#e8e8e8; }
.time-display { font-size:12px; color:#aaa; white-space:nowrap; }
.voice-row { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
.voice-row label { font-size:12px; font-weight:600; color:#888; white-space:nowrap; }
.voice-row select { padding:7px 10px; border-radius:8px; border:1px solid #e0e0dc; font-size:13px; background:#fff; outline:none; cursor:pointer; flex:1; min-width:180px; }
.voice-status { font-size:11px; color:#aaa; font-style:italic; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.controls { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:16px; }
.ctrl-btn { width:44px; height:44px; border-radius:50%; border:1px solid #e0e0dc; background:#f8f8f6; cursor:pointer; font-size:18px; display:flex; align-items:center; justify-content:center; }
.play-btn { width:64px; height:64px; border-radius:50%; border:none; background:#d4502a; color:#fff; cursor:pointer; font-size:28px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(212,80,42,0.3); }
.play-btn:active { transform:scale(0.95); }
.speed-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.speed-label { font-size:12px; color:#888; white-space:nowrap; }
.speed-row input[type=range] { flex:1; min-width:80px; accent-color:#d4502a; }
.speed-presets { display:flex; gap:4px; flex-wrap:wrap; }
.speed-presets button { padding:4px 10px; border-radius:6px; border:1px solid #e0e0dc; background:#f8f8f6; color:#888; cursor:pointer; font-size:11px; font-weight:600; }
.speed-presets button.active { border-color:#d4502a; background:#fff5f2; color:#d4502a; }
.auth-wrap { max-width:400px; margin:40px auto; background:#fff; border-radius:20px; padding:32px; border:1px solid #e8e8e4; }
.beta-badge { display:inline-block; background:#fff3d4; color:#b37400; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; border:1px solid #f0d080; }
.form-group { margin-bottom:14px; }
.form-group input { width:100%; padding:11px 14px; border-radius:10px; border:1px solid #e0e0dc; font-size:14px; outline:none; box-sizing:border-box; }
.form-group input:focus { border-color:#d4502a; }
.field-label { font-size:12px; font-weight:600; color:#888; display:block; margin-bottom:6px; }
.btn-full { width:100%; padding:13px; border-radius:10px; border:none; background:#1a1a1a; color:#fff; font-size:15px; font-weight:600; cursor:pointer; }
.error-box   { background:#fff5f2; border:1px solid #d4502a; color:#d4502a; padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; }
.success-box { background:#f0faf4; border:1px solid #2d8a4e; color:#2d8a4e; padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:16px; }
.tabs { display:flex; margin-bottom:24px; border-bottom:1px solid #e8e8e4; }
.tabs button { flex:1; padding:10px; border:none; background:transparent; font-size:14px; font-weight:600; cursor:pointer; color:#888; border-bottom:2px solid transparent; }
.tabs button.active { color:#1a1a1a; border-bottom-color:#d4502a; }
.doc-item { background:#fff; border-radius:12px; border:1px solid #e8e8e4; padding:14px 16px; display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.admin-table { width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; border:1px solid #e8e8e4; }
.admin-table th { background:#f8f8f6; padding:12px 16px; text-align:left; font-size:12px; font-weight:600; color:#888; border-bottom:1px solid #e8e8e4; white-space:nowrap; }
.admin-table td { padding:12px 16px; font-size:13px; border-bottom:1px solid #f0f0ec; }
.badge-active  { background:#f0faf4; color:#2d8a4e; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
.badge-pending { background:#fff8f0; color:#d4502a; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
.badge-admin   { background:#f0f0ff; color:#5555cc; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; }
@media (max-width:580px) {
  header { padding:0 12px; gap:8px; }
  nav a { font-size:11px; padding:4px 7px; }
  main { padding:16px 10px; }
  .seek-btn { padding:4px 7px; font-size:11px; }
  .play-btn { width:56px; height:56px; font-size:24px; }
  .ctrl-btn { width:40px; height:40px; font-size:16px; }
  .auth-wrap { margin:16px 10px; padding:24px 16px; }
  .voice-row select { min-width:0; }
}