:root{
    --bg: #0f1217;
    --card: #1a1f29;
    --text: #fdfeff;
    --muted: #f8f9fb;
    --accent: #25f312;
    --success: #52df45;
    --danger: #ef4444;
    --glass: rgba(255,255,255,0.03);
    --radius: 12px;
  }
  
  :root.light{
    --bg: #d4dadf;
    --card: #d1caca;
    --text: #010101;
    --muted: #0b0b0b;
    --accent: #497927;
    --glass: rgba(15, 12, 12, 0.04);
  }
  
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family: 'Roboto', 'Merriweather', serif;
    background: linear-gradient(180deg, var(--bg) 0%, rgba(0,0,0,0.02) 100%);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    padding:50px;
    font-weight: 400;
  }
  
  
  .app{
    max-width:940px;
    margin:0 auto;
  }
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:25px;
  }
  .logo{
    font-family: 'Merriwether', serif;
    font-size:35px;
    margin:2;
    padding:5px;
    font-weight:700;
    letter-spacing:0;
  }
  .container{display:grid;
    grid-template-columns:1fr;
    gap:16px;
  }
  
  
  .card{
    background:var(--card);padding:25px;
    border-radius:var(--radius);
    box-shadow: 0 6px 18px rgba(2,6,23,0.4);
  }
  .small{
    font-size:13px;
    opacity:0.9;
  }
  
  
  .task-form{
    display:flex;
    gap:8px;
    align-items:center;
  }
  .task-form input[type="text"]{
    flex:1;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.03);
    background:transparent;
    color:var(--text);
    outline:none;
    transition:transform .15s ease, box-shadow .15s;
  }
  .task-form input[
    type="text"]:focus{
    box-shadow:0 6px 18px rgba(0,0,0,0.25);
    transform:translateY(-1px);
  }
  .task-form input[type="date"], .task-form select{
    padding:10px;border-radius:10px;
    border:1px solid rgba(255,255,255,0.03);
    background:transparent;
    color:var(--text);
  }
  .btn{
    padding:9px 12px;
    border-radius:10px;border:0;
    background:var(--accent);color:#fff;
    font-weight:600;cursor:pointer;
  }
  .btn.ghost{background:transparent;
    border:1px solid rgba(255,255,255,0.06);
  }
  .icon-btn{background:transparent;
    border:0;
    padding:6px;
    border-radius:8px;
    color:var(--muted);
    cursor:pointer;
  }
  
  
  .toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:12px;
    gap:12px;
    flex-wrap:wrap;
  }
  .filters{display:flex;
    gap:6px;
  }
  .filter{
    padding:6px 10px;
    border-radius:8px;
    background:transparent;
    border:1px solid rgba(255,255,255,0.03);
    cursor:pointer;color:var(--muted);
  }
  .filter.active{
    background:var(--accent);
    color:#fff;
  }
  
  
  #search{
    padding:9px 10px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,0.03);
    background:transparent;color:var(--text);
    min-width:180px;
  }
  
  
  .task-list{
    list-style:none;
    padding:0;margin:12px 0 0 0;
    display:flex;flex-direction:column;
    gap:10px;
  }
  .task-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px;
    border-radius:10px;
    transition:transform .25s ease,opacity .25s ease,background .2s;
    transform-origin:left center;
  }
  .task-item.enter{
    animation:enter .28s ease both;
  }
  @keyframes enter{
    from{opacity:0;
      transform:translateY(6px) scale(.995)}to{opacity:1;
        transform:none;
      }
    }
  .task-left{
    display:flex;
    align-items:center;
    gap:10px;flex:1;
  }
  .checkbox{
    width:20px;
    height:20px;
    border-radius:6px;
    border:1px solid rgba(255,255,255,0.06);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .checkbox.checked{
    background:var(--accent);
    color:#fff;
    border:0;
  }
  .task-text{
    font-size:15px;
  }
  .task-text.completed{
    opacity:0.7;
    text-decoration:line-through;
    transition:opacity .25s, text-decoration-color .25s;
  }
  .meta{display:flex;
    gap:8px;
    align-items:center;
    font-size:12px;
    color:var(--muted);
  }
  .badge{
    padding:4px 8px;
    border-radius:999px;
    font-weight:600;
  }
  .prio-low{
    background:rgba(34,197,94,0.12);
    color:var(--success);
    border:1px solid rgba(34,197,94,0.08);
  }
  .prio-medium{
    background:rgba(249,115,22,0.08);
    color:var(--accent);
    border:1px solid rgba(249,115,22,0.06);
  }
  .prio-high{
    background:rgba(239,68,68,0.08);
    color:var(--danger);border:1px solid rgba(239,68,68,0.06);
  }
  
  
  .actions{
    display:flex;
    gap:6px;
  }
  .action-btn{
    padding:6px;
    border-radius:8px;
    border:0;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
  }
  .action-btn:hover{
    color:var(--text);
  }
  
  
  .empty{
    text-align:center;
    color:var(--muted);
    opacity:0.9;
    margin:12px 0.0;
  }
  
  
  .modal{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(2,6,23,0.5);
    padding:20px;z-index:60;
  }
  .modal[
    aria-hidden="false"]{display:flex}
  .modal-content{
    position:relative;
    max-width:520px;
    width:100;
    padding:18px;
  }
  .modal-content h2{
    margin:0.0 10px;
  }
  .modal-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    margin-top:10px;
  }
  .close{
    position:absolute;
    right:12px;top:8px;
    background:transparent;
    border:0;
    font-size:28px;
    line-height:1;
    color:var(--muted);
    cursor:pointer;
  }
  
  
  .progress{
    display:flex;
    align-items:center;
    gap:12px;margin-top:12px;
  }
  .progress-bar-bg{
    height:8px;
    background:var(--glass);border-radius:999px;flex:1;overflow:hidden;
  }
  .progress-bar-fill{
    height:100%;
    width:0%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--accent),#ffb86b);
    transition:width .45s ease;
  }
  .progress-text{
    font-size:13px;
    color:var(--muted);
  }
  
  
  @media (max-width:640px){
    .task-form{flex-direction:column;align-items:stretch}
    .toolbar{flex-direction:column;align-items:stretch}
    .filters{order:2}
    #search{order:1;width:100%}
  }
  
  
  .task-item.completed{background:linear-gradient(90deg, rgba(34,197,94,0.03), transparent)}