:root{ --bg:#0f172a; --panel:#111827; --text:#e5e7eb; --muted:#9ca3af; --primary:#10b981; --danger:#ef4444 }
*{ box-sizing:border-box }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; background:var(--bg); color:var(--text) }
.app-header{ padding:16px; border-bottom:1px solid #1f2937 }
.app-header h1{ margin:0; font-size:20px }
.container{ max-width:960px; margin:0 auto; padding:16px; display:grid; grid-template-columns:1fr; gap:16px }
.recorder,.tasks{ background:var(--panel); border:1px solid #1f2937; border-radius:12px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.25); transition:transform .3s ease-in-out, box-shadow .3s ease-in-out }
.recorder:hover,.tasks:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.35) }
.controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.btn{ padding:10px 16px; border-radius:10px; border:none; cursor:pointer; color:#fff; transition:background-color .25s ease-in-out, transform .25s ease-in-out, opacity .25s ease-in-out }
.btn:disabled{ opacity:.5; cursor:not-allowed }
.btn.primary{ background:var(--primary) }
.btn.primary:hover{ background:#0ea371 }
.btn.danger{ background:var(--danger) }
.btn.danger:hover{ background:#d23434 }
.timer{ font-variant-numeric:tabular-nums; font-family:monospace; color:var(--muted) }
.status{ min-height:20px; color:var(--muted); transition:opacity .3s ease-in-out }
.task-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
.task-item{ background:#0b1220; border:1px solid #1f2937; border-radius:10px; padding:12px; display:grid; gap:6px; transform:translateY(8px); opacity:0; transition:transform .35s ease-in-out, opacity .35s ease-in-out }
.task-item.show{ transform:translateY(0); opacity:1 }
.task-title{ font-weight:600 }
.task-meta{ color:var(--muted); font-size:14px; display:flex; gap:12px; flex-wrap:wrap }

@media (min-width: 768px){ .container{ grid-template-columns:1fr 1fr } .tasks h2{ margin-top:0 } }

@media (prefers-reduced-motion: reduce){ *{ transition:none !important; animation:none !important } }