* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; padding: 1rem; background: #1a1a2e; color: #eee; }
.login-box { max-width: 320px; margin: 3rem auto; padding: 2rem; background: #16213e; border-radius: 8px; }
.login-box h1 { margin-top: 0; }
.login-box input { width: 100%; padding: 0.5rem; margin-bottom: 0.75rem; border: 1px solid #0f3460; border-radius: 4px; background: #0f3460; color: #eee; }
.login-box button { width: 100%; padding: 0.6rem; background: #e94560; border: none; border-radius: 4px; color: #fff; cursor: pointer; }
.error { color: #e94560; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.btn-logout { padding: 0.4rem 0.8rem; background: #0f3460; border: none; border-radius: 4px; color: #eee; cursor: pointer; }
.filters { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.filters input[type="date"] { padding: 0.4rem; background: #16213e; border: 1px solid #0f3460; border-radius: 4px; color: #eee; }
.filters button { padding: 0.5rem 1rem; background: #e94560; border: none; border-radius: 4px; color: #fff; cursor: pointer; }
.filters button:disabled { opacity: 0.6; cursor: not-allowed; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid #0f3460; }
th { background: #16213e; }
.text-preview { cursor: pointer; text-decoration: underline; }
.status-noanswer { color: #e94560; font-weight: 500; }
.status-answered { color: #4ade80; }
.btn-play { padding: 0.3rem 0.6rem; background: #0f3460; border: none; border-radius: 4px; color: #eee; cursor: pointer; }
.skip-intro { margin-bottom: 0.5rem; }
.skip-intro button { padding: 0.4rem 0.8rem; background: #e94560; border: none; border-radius: 4px; color: #fff; cursor: pointer; font-size: 0.9rem; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal-content { background: #16213e; padding: 1.5rem; border-radius: 8px; max-width: 90vw; max-height: 80vh; overflow: auto; position: relative; }
.modal-close { position: absolute; top: 0.5rem; right: 0.5rem; background: none; border: none; color: #eee; font-size: 1.5rem; cursor: pointer; }
.modal-content pre { white-space: pre-wrap; margin: 0; }