/* Modern CSS for To‑Do List */
:root{
  --bg:#0b0e14; /* adjusted in light mode */
  --panel:#111625;
  --card:#151a2e;
  --text:#e6e6e6;
  --muted:#9aa4b2;
  --primary:#6c8cff;
  --primary-600:#5a78f0;
  --danger:#ff6b6b;
  --success:#3ddc97;
  --border:rgba(255,255,255,.08);
  --shadow:0 10px 30px rgba(0,0,0,.3);
  --radius:14px;
  --radius-sm:10px;
  --radius-xs:8px;
  --spacing:16px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Light theme */
[data-theme="light"]:root, html[data-theme="light"]{
  --bg:#f8fafc;
  --panel:#ffffff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --primary:#3b82f6;
  --primary-600:#2563eb;
  --danger:#ef4444;
  --success:#10b981;
  --border:rgba(15,23,42,.08);
  --shadow:0 10px 30px rgba(2,6,23,.08);
}

/* Auto theme respects prefers-color-scheme */
@media (prefers-color-scheme: light){
  [data-theme="auto"]:root, html[data-theme="auto"]{
    --bg:#f8fafc;
    --panel:#ffffff;
    --card:#ffffff;
    --text:#0f172a;
    --muted:#475569;
    --primary:#3b82f6;
    --primary-600:#2563eb;
    --danger:#ef4444;
    --success:#10b981;
    --border:rgba(15,23,42,.08);
    --shadow:0 10px 30px rgba(2,6,23,.08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:radial-gradient(1200px 600px at 20% -10%, rgba(108,140,255,.15), transparent 60%),
             radial-gradient(1000px 500px at 110% 0%, rgba(61,220,151,.12), transparent 50%),
             var(--bg);
}

.container{max-width:900px; margin:0 auto; padding:24px;}

.app-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(160%) blur(10px);
  background:linear-gradient(0deg, transparent, rgba(0,0,0,.08));
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between;}
.app-title{font-size:clamp(22px, 4vw, 28px); margin:8px 0; letter-spacing:0.3px;}

.icon-btn{display:inline-grid; place-items:center; width:40px; height:40px; padding:0; border:none; background:transparent; color:var(--text); border-radius:50%; cursor:pointer; transition:transform .18s ease, background .2s ease;}
.icon-btn:hover{transform:translateY(-1px); background:rgba(127,127,127,.08)}
.icon{width:22px; height:22px; fill:currentColor}
[data-theme="light"] .icon-sun{display:block}
[data-theme="light"] .icon-moon{display:none}
.icon-sun{display:none}
[data-theme="light"] .icon-moon{display:none}
[data-theme="light"] .icon-sun{display:block}

.add-task{padding-top:8px}
.add-form{display:flex; gap:12px; background:var(--panel); border:1px solid var(--border); padding:12px; border-radius:var(--radius); box-shadow:var(--shadow)}
.input{flex:1; font-size:16px; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--text); outline:none; transition:border .2s ease, box-shadow .2s ease}
.input::placeholder{color:var(--muted)}
.input:focus{border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in oklab, var(--primary) 20%, transparent)}

.btn{display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer; font-weight:600; border-radius:10px; padding:10px 14px; transition:transform .15s ease, background .2s ease, opacity .2s ease}
.btn:disabled{opacity:.5; cursor:not-allowed}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--primary); color:white}
.btn-primary:hover{background:var(--primary-600)}
.btn-ghost{background:transparent; color:var(--text); border:1px solid var(--border)}
.btn-ghost:hover{background:rgba(127,127,127,.08)}
.btn-danger{background:var(--danger); color:white}
.btn-danger:hover{filter:brightness(.95)}

.list-controls{display:flex; align-items:center; justify-content:space-between; margin:18px 0}
.counters{display:flex; gap:10px; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); background:var(--panel); color:var(--muted); padding:6px 10px; border-radius:999px}

.boards{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width: 780px){
  .boards{grid-template-columns:1fr 1fr}
}
.board{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.board-header{display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--border)}
.board h2{font-size:16px; margin:0; color:var(--muted); letter-spacing:.3px}
.empty{opacity:.6; padding:16px; margin:0}

.task-list{list-style:none; margin:0; padding:10px; display:grid; gap:10px}
.task{display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--border); padding:12px; border-radius:var(--radius-sm); transition:transform .18s ease, background .2s ease, border .2s ease; animation:fadein .18s ease}
.task:hover{transform:translateY(-2px); border-color:color-mix(in oklab, var(--primary) 30%, var(--border))}
.task.completed{opacity:.8}

.checkbox{appearance:none; width:20px; height:20px; border-radius:6px; border:2px solid color-mix(in oklab, var(--muted) 60%, transparent); display:grid; place-items:center; cursor:pointer; transition:background .2s ease, border .2s ease}
.checkbox:checked{background:var(--success); border-color:var(--success)}
.checkbox:checked::after{content:""; width:10px; height:10px; border-radius:3px; background:white}

.task-title{flex:1; font-size:15px; line-height:1.4}
.task-title.completed{text-decoration:line-through; color:var(--muted)}

.task-actions{display:flex; gap:6px}
.icon-action{width:36px; height:36px; display:grid; place-items:center; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; transition:background .2s ease, color .2s ease, border .2s ease}
.icon-action:hover{background:rgba(127,127,127,.08); color:var(--text)}
.icon-sm{width:18px; height:18px; fill:currentColor}

/* Inline edit */
.edit-input{flex:1; font-size:15px; padding:10px 12px; border:1px dashed color-mix(in oklab, var(--primary) 40%, var(--border)); border-radius:8px; background:color-mix(in oklab, var(--card) 80%, transparent); color:var(--text); outline:none}
.edit-input:focus{box-shadow:0 0 0 4px color-mix(in oklab, var(--primary) 20%, transparent)}

/* Modal */
.modal[hidden]{display:none}
.modal{position:fixed; inset:0; display:grid; place-items:center}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5);}
.modal-dialog{position:relative; width:min(480px, 94vw)}
.modal-content{position:relative; background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:var(--shadow); animation:pop .18s ease}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:14px}
@keyframes pop{from{transform:scale(.98); opacity:0} to{transform:scale(1); opacity:1}}
@keyframes fadein{from{opacity:0; transform:translateY(2px)} to{opacity:1; transform:translateY(0)}}

/* Utilities */
.visually-hidden{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}