* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, sans-serif; background: #0b1020; color: #e8edf8; }
.container { max-width: 1240px; margin: 24px auto; padding: 0 16px 48px; }
h1 { margin-bottom: 20px; }
.card { background: #141c33; border: 1px solid #293455; border-radius: 14px; padding: 18px; margin-bottom: 16px; }
label { display: block; margin: 10px 0; }
input, select, textarea, button { width: 100%; padding: 11px; border-radius: 10px; border: 1px solid #334367; background: #0f1730; color: #e8edf8; }
button { cursor: pointer; background: #3f7cff; border: none; font-weight: 600; }
button:hover { background: #2f6ce8; }
.hidden { display: none; }
.row { display: flex; gap: 10px; align-items: center; }
.between { justify-content: space-between; }
#logout-btn { width: auto; }
#msg { min-height: 1.5em; color: #95d5ff; }
.admin-grid { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
table { width: 100%; border-collapse: collapse; }
th, td { border-bottom: 1px solid #2f3f63; padding: 8px; text-align: left; font-size: 14px; }
.small-btn { padding: 6px 10px; width: auto; }
#result { margin-top: 16px; display: grid; gap: 10px; background: #10192f; border: 1px solid #2a3a5f; padding: 12px; border-radius: 12px; }
.result-header { display: flex; justify-content: space-between; align-items: center; }
.pill { font-size: 12px; padding: 4px 8px; border-radius: 999px; background: #24345a; color: #b8cff8; }
#audio, audio { width: 100%; display: block; }
.wave-wrap { width: 100%; }
#seek { width: 100%; padding: 0; accent-color: #6aa2ff; }
.time-row { display: flex; justify-content: space-between; font-size: 12px; color: #9bb3de; margin-top: 4px; }
.result-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
#download-link { display: inline-block; padding: 10px 12px; border-radius: 10px; background: #20365f; color: #d9e7ff; text-decoration: none; }
#download-link:hover { background: #294574; }
button.danger { width: auto; background: #8c2c3f; }
button.danger:hover { background: #a2334a; }
.sync-box { margin-top: 16px; padding-top: 12px; border-top: 1px solid #2f3f63; }
.sync-box p { margin-top: 4px; margin-bottom: 10px; font-size: 13px; color: #b6c4e5; }
@media (max-width: 780px) { .admin-grid { grid-template-columns: 1fr; } .result-actions { flex-direction: column; align-items: stretch; } button.danger { width: 100%; } }