:root{
  --bg:#eef9ff; --card:#fff; --primary:#1976d2; --muted:#6b7b8a;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg),#ffffff);font-family:Inter,Arial,sans-serif}
.wrap{max-width:980px;margin:28px auto;padding:12px}
.top{padding:14px}
.brand{font-size:20px;color:var(--primary);font-weight:700}
.desc{color:var(--muted);margin-top:6px}
.card{background:var(--card);padding:16px;border-radius:14px;box-shadow:0 12px 30px rgba(22,66,130,0.06)}
.form{display:flex;gap:10px;margin-bottom:14px}
.form input{flex:1;padding:12px;border-radius:10px;border:1px solid rgba(25,118,210,0.12);outline:none}
.btn{padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700}
.btn.primary{background:linear-gradient(180deg,var(--primary),#0f5fb1);color:#fff}
.tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tab{padding:8px 12px;border-radius:10px;border:1px solid rgba(25,118,210,0.09);background:#f6fbff;cursor:pointer;font-weight:600}
.tab.active{background:linear-gradient(180deg,#dff4ff,#bfe6ff)}
.list{display:flex;flex-direction:column;gap:10px}
.list-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:10px;background:linear-gradient(180deg,#f6fbff,#eef8ff);box-shadow:0 8px 20px rgba(13,70,130,0.03);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.item-link{color:var(--primary);font-weight:700;max-width:50%;overflow:hidden;text-overflow:ellipsis}
.item-meta{margin-left:auto;display:flex;align-items:center;gap:10px}
.time{font-size:13px;color:var(--muted);min-width:150px;text-align:right}
.done-btn{background:linear-gradient(180deg,#90e0ef,#48cae4);border:0;padding:8px 12px;border-radius:8px;font-weight:700;cursor:pointer}
.empty{padding:14px;border-radius:10px;background:#f1f8ff;color:var(--muted);text-align:center}
.popup-backdrop{position:fixed;inset:0;background:rgba(6,18,32,0.45);display:none;align-items:center;justify-content:center;z-index:300}
.popup-backdrop.show{display:flex}
.popup{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 18px 60px rgba(6,18,32,0.28);width:320px;text-align:center}
.toast{position:fixed;top:18px;right:18px;padding:12px 16px;border-radius:10px;box-shadow:0 12px 30px rgba(12,30,80,0.12);display:none;z-index:200}
.toast.show{display:block}
.toast.success{background:#e6ffef;color:#036a34}
.toast.error{background:#fff0f0;color:#9b2c2c}
.fade-out{animation:fadeOut .34s forwards}
@keyframes fadeOut{to{opacity:0;transform:translateY(-10px);height:0;margin:0;padding:0}}