* { margin:0; padding:0; box-sizing:border-box; font-family:Arial, sans-serif; }
html, body { height:100%; }
body {
  background: #000 url('bg.jpg') center/cover fixed;
  color: #fff;
  display: flex; justify-content: center; align-items: center;
}
.overlay {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(10px);
  display: flex; justify-content: center; align-items: center;
  padding: 10px;
}
.container {
  width: 100%; max-width: 600px;
  background: rgba(30,30,50,0.9); padding: 25px; border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
h1 { text-align:center; color:#00d4ff; margin-bottom:20px; font-size:2rem; }

.tabs { display:flex; justify-content:center; gap:10px; margin:20px 0; flex-wrap:wrap; }
.tab {
  background: rgba(255,255,255,0.1); color:#fff; padding:10px 18px; border:none;
  border-radius:12px; cursor:pointer; font-weight:bold; font-size:14px;
}
.tab.active { background:#00d4ff; color:#000; }

.page { display:none; }
.page.active { display:block; }

.form {
  background: rgba(40,40,60,0.7); padding:20px; border-radius:15px; margin-bottom:20px;
}
input, textarea {
  width:100%; padding:12px; margin:10px 0; border-radius:10px; border:none;
  background: rgba(60,60,80,0.8); color:#fff; font-size:16px;
}
input::placeholder, textarea::placeholder { color:#ccc; }

.method-group {
  display:flex; justify-content:center; gap:20px; margin:12px 0;
}
.method-group label {
  background: rgba(0,212,255,0.2); padding:8px 16px; border-radius:10px;
  cursor:pointer; font-size:14px; display:flex; align-items:center; gap:6px;
}

.btn-group { margin-top:15px; text-align:center; }
.add {
  padding:14px 30px; background:#00d4ff; color:#000; border:none; border-radius:12px;
  font-weight:bold; cursor:pointer; font-size:16px;
}

.clear-trash-btn {
  background:#e74c3c; color:#fff; padding:10px 20px; border:none; border-radius:8px;
  font-weight:bold; cursor:pointer; font-size:14px;
}
.clear-trash-btn:hover { background:#c0392b; }

ul { list-style:none; }
li {
  background: rgba(60,60,80,0.9); padding:15px; margin:10px 0; border-radius:12px;
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  border-left:4px solid #00d4ff;
}
.task-info strong { font-size:18px; color:#0ff; }
.task-info small { display:block; color:#ddd; margin:3px 0; }

.actions button {
  padding:6px 12px; border:none; border-radius:8px; font-size:13px; cursor:pointer;
}
.print-btn { background:#8e44ad; color:#fff; }
.del { background:#e74c3c; color:#fff; }
.restore { background:#27ae60; color:#fff; }

.popup {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.9); display:flex; justify-content:center; align-items:center; z-index:1000;
}
.popup-content {
  background: rgba(40,40,60,0.95); padding:20px; border-radius:15px; text-align:center; max-width:90%;
}
.popup-content button {
  margin-top:10px; padding:10px 20px; background:#00d4ff; color:#000; border:none; border-radius:10px;
  font-weight:bold; cursor:pointer;
}

.alert {
  background:#00d4ff; color:#000; padding:12px 24px; border-radius:12px; font-weight:bold;
  text-align:center; margin:15px 0; box-shadow:0 4px 12px rgba(0,212,255,0.3);
}
.hidden { display:none; }
.info { text-align:center; color:#bbb; margin:10px 0; }

@media (max-width:480px) {
  .container { padding:15px; }
  .method-group { flex-direction:column; gap:10px; }
}