:root{ --bg:#2b2b2b; --card:#3a3a3a; --text:#f1f1f1; --muted:#bdbdbd; --accent:#8bc34a }
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Kufi Arabic", sans-serif;
  background:var(--bg); color:var(--text); display:flex; flex-direction:column;
}
header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:#202020; position:sticky; top:0; z-index:10; }
h1{ margin:0; font-size:1.2rem }
main{ padding:16px; display:grid; gap:16px; grid-template-columns:1fr; max-width:900px; margin-inline:auto; width:100%; }
.card{ background:var(--card); border-radius:16px; padding:16px; box-shadow:0 8px 20px rgba(0,0,0,.25); }
input[type="text"], input[type="search"]{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid #555; background:#2a2a2a; color:var(--text); }
button{ background:var(--accent); color:#1a1a1a; border:none; padding:10px 14px; border-radius:12px; font-weight:600; cursor:pointer }
button:disabled{ opacity:.6; cursor:not-allowed }
.list{ list-style:none; padding:0; margin:10px 0 0 }
.list li{ display:flex; align-items:center; justify-content:space-between; padding:10px; border-bottom:1px solid #555 }
.list li .txt{ flex:1; margin-inline:8px }
.list li button{ background:#ef5350; color:white }
.search{ margin-top:10px }
.timer{ font-size:2.2rem; font-weight:700; text-align:center; padding:10px 0 }
.timer-controls{ display:flex; gap:8px; justify-content:center }
footer{ text-align:center; padding:12px; color:var(--muted) }
@media (min-width: 700px){
  main{ grid-template-columns:1fr 1fr }
}