:root{
  --primary:#007bff;
  --danger:#ff4d4d;
  --success:#28a745;
  --gray:#f7f7f7;
  --shadow:0 3px 12px rgba(0,0,0,.06);
}

*{box-sizing:border-box}
body{background:var(--gray);font-family:'Segoe UI',Arial,sans-serif;margin:0;transition:background .3s,color .3s}
body.dark{background:#181c22;color:#f1f1f1}

/* ===== Overlay & Edit Lock ===== */
#edit-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s;z-index:1000}
#edit-overlay.show{opacity:1;pointer-events:auto}
body.editing-active *{pointer-events:none !important}
body.editing-active .task-card.editing,
body.editing-active .task-card.editing *{pointer-events:auto !important}
body.editing-active .modal,
body.editing-active .modal *{pointer-events:auto !important}

/* ===== Navbar ===== */
.navbar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:#222;color:#fff}
.user-name{margin-right:10px;display:none;font-size:16px}
.auth-btn{background:none;border:none;color:#64b5ff;font-size:18px;cursor:pointer;display:flex;align-items:center;gap:6px}
.theme-toggle{background:var(--primary);color:#fff;border:none;border-radius:50%;padding:8px 10px;font-size:18px;cursor:pointer}
#profile-btn{background:var(--primary);color:#fff;border:none;border-radius:50%;padding:8px 10px;font-size:18px}

/* ===== Container & Form ===== */
.container{max-width:720px;margin:28px auto;background:#fff;padding:22px;border-radius:14px;box-shadow:var(--shadow)}
body.dark .container{background:#23272f;color:#f1f1f1;box-shadow:0 3px 12px rgba(0,0,0,.38)}

#todo-form{display:grid;grid-template-columns:1fr 220px auto;gap:8px;margin-bottom:12px}
.input-with-icon{position:relative}
.input-with-icon input{width:100%;padding:9px 40px 9px 12px;font-size:15px;border-radius:10px;border:1px solid #d0d0d0;background:#fff}
body.dark .input-with-icon input{background:#23272f;color:#f1f1f1;border-color:#444}
.input-with-icon .input-icon{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--primary);cursor:pointer}
#task-due{padding:9px 10px;font-size:15px;border-radius:10px;border:1px solid #d0d0d0;background:#fff}
body.dark #task-due{background:#23272f;color:#f1f1f1;border-color:#444}
#add-btn{padding:9px 14px;border:none;border-radius:10px;background:var(--primary);color:#fff;font-size:15px;cursor:pointer}

/* ===== Description Composer ===== */
.desc-composer{grid-column:1/-1;background:#f8faff;border:1px solid #e6ecfb;border-radius:10px;padding:8px}
body.dark .desc-composer{background:#222838;border-color:#2f3650}
.desc-toolbar{display:flex;gap:8px;margin-bottom:6px}
.tb-btn{background:#eef3ff;color:#224;border:none;border-radius:8px;padding:6px 8px;font-size:14px;cursor:pointer}
.tb-btn:hover{background:#dfe9ff}
body.dark .tb-btn{background:#2b3140;color:#eaeaea}
body.dark .tb-btn:hover{background:#3a4256}
.desc-input{width:100%;min-height:92px;max-height:220px;resize:vertical;padding:8px 10px;border-radius:8px;border:1px solid #d0d0d0;font-size:14px}
body.dark .desc-input{background:#23272f;color:#f1f1f1;border-color:#444}

/* ===== Filters ===== */
.filters{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:10px 0 16px}
.filter-btn{background:#eef3ff;color:#224;border:none;border-radius:16px;padding:6px 12px;cursor:pointer;font-size:13px}
.filter-btn.active,.filter-btn:hover{background:var(--primary);color:#fff}
body.dark .filter-btn{background:#2b3140;color:#eaeaea}
body.dark .filter-btn.active,body.dark .filter-btn:hover{background:var(--primary);color:#fff}

/* ===== Task list / card ===== */
#task-list{display:flex;flex-direction:column;gap:10px}
.task-card{background:#fff;border:1px solid #eaeef5;border-radius:12px;padding:12px 12px 8px;box-shadow:0 1px 8px rgba(0,0,0,.04);transition:box-shadow .15s,border-color .15s}
.task-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
body.dark .task-card{background:#1f2430;border-color:#32394a}
.task-card.overdue{border-left:5px solid var(--danger)}
.task-card.due-soon{border-left:5px solid #ffc107}
.task-card.completed{border-left:5px solid var(--success);opacity:.86}
.task-card.pending{opacity:.78}

.task-main{display:flex;align-items:flex-start;gap:10px;width:100%;flex-wrap:wrap}
.task-complete{margin-top:2px}
.task-title{flex:1;min-width:160px;margin:0 6px;font-size:16px;line-height:1.35}
.task-title.completed{text-decoration:line-through;color:#888}
body.dark .task-title.completed{color:#aaa}

/* Edit block */
.edit-wrap{display:grid;grid-template-columns:1fr minmax(180px,220px);gap:8px;align-items:center;flex:1 1 100%}
.edit-title{padding:8px 10px;border-radius:10px;border:1px solid #d0d0d0}
body.dark .edit-title{background:#23272f;color:#f1f1f1;border-color:#444}
.task-due-edit{padding:8px 10px;border-radius:10px;border:1px solid #d0d0d0}
body.dark .task-due-edit{background:#23272f;color:#f1f1f1;border-color:#444}
.desc-composer.edit{grid-column:1/-1}

.edit-actions{grid-column:1/-1;display:flex;gap:8px}
.inline-save-btn,.inline-cancel-btn{background:#eef3ff;border:none;border-radius:10px;padding:8px 12px;cursor:pointer;color:#224;font-size:14px}
.inline-save-btn:hover,.inline-cancel-btn:hover{background:#dfe9ff}
body.dark .inline-save-btn,body.dark .inline-cancel-btn{background:#2b3140;color:#eaeaea}
body.dark .inline-save-btn:hover,body.dark .inline-cancel-btn:hover{background:#3a4256}

/* Meta row */
.task-meta-row{display:flex;align-items:center;gap:8px;width:100%;margin-top:4px}
.task-meta-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.task-due{font-size:12px;color:#222}
body.dark .task-due{color:#c9c9c9}
.task-timer{font-size:12px;color:var(--danger);font-weight:600}
.task-created{font-size:12px;color:#616161}
body.dark .task-created{color:#909090}

.task-actions{display:flex;gap:6px;margin-left:auto}
.task-actions button{background:none;color:var(--primary);border:none;font-size:16px;cursor:pointer;border-radius:8px;padding:6px}
.task-actions button:hover{background:#f2f6ff}
.task-actions button:disabled{opacity:.5;cursor:not-allowed}
.delete-btn i{color:#e74c3c !important}

/* Description render (real bullet/number) */
.task-desc-render{flex:1 1 100%; margin:4px 6px 2px 34px; font-size:13.5px; color:#5a6a85}
body.dark .task-desc-render{color:#9fb0cc}
.task-desc-render ul.compact,
.task-desc-render ol.compact{margin:4px 0 2px 18px; padding:0}
.task-desc-render ul.compact li,
.task-desc-render ol.compact li{margin:2px 0; line-height:1.3}
.task-desc-render p.compact{margin:2px 0}
.task-desc-render .more-ellipsis{list-style:none; color:#8898b0}
body.dark .task-desc-render .more-ellipsis{color:#7f93b3}

/* Urgency badge */
.urgency-badge{
  font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600;
  background:#eef3ff;color:#223a6b;border:1px solid #dbe6ff
}
body.dark .urgency-badge{background:#2b3140;color:#dbe6ff;border-color:#3a4256}
.urgency-overdue{ background:#ffecec; color:#a60000; border-color:#ffd3d3; }
.urgency-1h{ background:#fff7e6; color:#8a4b00; border-color:#ffe7ba; }
.urgency-today{ background:#e6f7ff; color:#004a72; border-color:#bae7ff; }
.urgency-tomorrow{ background:#f0f5ff; color:#2f3e9e; border-color:#d6e4ff; }
.urgency-thisweek{ background:#f6ffed; color:#285e00; border-color:#d9f7be; }
.urgency-later{ background:#f5f5f5; color:#555; border-color:#e8e8e8; }
.urgency-nodue{ background:#f5f5f5; color:#666; border-color:#e8e8e8; }
body.dark .urgency-overdue{ background:#3a2323; color:#ffb3b3; border-color:#5a3434; }
body.dark .urgency-1h{ background:#3a3123; color:#ffd9a8; border-color:#5a4b34; }
body.dark .urgency-today{ background:#223a49; color:#bfe9ff; border-color:#2b4d63; }
body.dark .urgency-tomorrow{ background:#272c4a; color:#cfd8ff; border-color:#323c66; }
body.dark .urgency-thisweek{ background:#233524; color:#c7f2a2; border-color:#2d4630; }
body.dark .urgency-later{ background:#2c2c2c; color:#cfcfcf; border-color:#3a3a3a; }
body.dark .urgency-nodue{ background:#2c2c2c; color:#cfcfcf; border-color:#3a3a3a; }

/* Modal (centered, above overlay) */
.modal{position:fixed; inset:0; z-index:1200; display:grid; place-items:center; background:rgba(0,0,0,.25)}
.modal.hidden{display:none}
.modal-content{
  background:#fff; padding:20px; border-radius:12px;
  box-shadow:0 8px 40px rgba(0,0,0,.25);
  min-width:260px; max-width:90vw; text-align:center
}
body.dark .modal-content{background:#23272f;color:#f1f1f1}
.modal-checkbox{display:flex;align-items:center;gap:8px;justify-content:center;margin:10px 0 14px}
.modal-buttons{display:flex;gap:8px;justify-content:center}
.modal-buttons button{padding:8px 14px;border-radius:10px;border:none;font-size:15px;cursor:pointer;background:var(--primary);color:#fff}

/* Toasts (top-right) */
#toast-container{
  position:fixed; top:16px; right:16px; z-index:1300;
  display:flex; flex-direction:column; gap:10px; pointer-events:none;
}
.toast{
  pointer-events:auto;
  min-width: 260px; max-width: 360px;
  background:#fff; color:#222; border:1px solid #e6e6e6;
  border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.15);
  padding:12px 12px 10px; animation:toast-in .2s ease-out;
}
body.dark .toast{ background:#23272f; border-color:#3a3a3a; color:#f1f1f1; }
.toast-msg{ font-size:14px; line-height:1.4; margin-bottom:8px; }
.toast-actions{ display:flex; gap:8px; justify-content:flex-end; }
.toast-btn{
  border:none; border-radius:10px; padding:7px 10px; font-size:13px; cursor:pointer;
  background:#eef3ff; color:#223a6b;
}
.toast-btn:hover{ background:#dfe9ff; }
.toast-btn.primary{ background:var(--primary); color:#fff; }
.toast-btn.primary:hover{ filter:brightness(.95); }
@keyframes toast-in{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)} }

/* Responsive */
@media (max-width:760px){
  .container{max-width:94vw;padding:18px}
  #todo-form{grid-template-columns:1fr;gap:8px}
  .task-desc-render{margin-left:28px}
  #toast-container{top:10px; right:10px}
}