:root{
  --bg:#0f172a;
  --glass:rgba(255,255,255,.08);
  --text:#e5e7eb;
  --muted:#a3a3a3;
  --primary:#7c3aed;
  --ring:rgba(124,58,237,.35);
  --shadow:0 20px 50px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Nunito",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,"Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:var(--bg) no-repeat center/cover fixed;
  background-image:var(--bg-image,none);
}

.backdrop{
  position:fixed;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.55));
  pointer-events:none;
}

.app{
  max-width:980px;
  margin:24px auto 56px;
  padding:0 16px;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:18px;
}
.header{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:space-between;
  margin:12px 0 6px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.logo{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--glass);box-shadow:var(--shadow)}
.clock{font-variant-numeric:tabular-nums;font-weight:800;font-size:clamp(20px,3.2vw,28px)}

.card{
  grid-column:span 6;
  background:var(--glass);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:18px;
  box-shadow:var(--shadow);
}
.login-card{grid-column:span 5}
.hello-card{grid-column:span 5;display:flex;align-items:center;justify-content:space-between;gap:12px}
.weather-card{grid-column:span 7}
.todo-card{grid-column:1/-1}
.footer{grid-column:1/-1;text-align:center;color:var(--muted);margin-top:8px}

.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}
input[type="text"]{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  color:var(--text);background:rgba(0,0,0,.25);outline:none
}
input::placeholder{color:#cbd5e1}
input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--ring)}

.btn{
  appearance:none;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);
  color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer
}
.btn.primary{background:var(--primary);border-color:transparent;font-weight:800}
.btn.ghost{background:transparent}
.btn:active{transform:translateY(1px)}

.row{display:flex;align-items:center;gap:12px}
.space-between{justify-content:space-between}
.chip{
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  padding:6px 10px;border-radius:999px;color:var(--text);cursor:pointer
}
.chip.is-active{background:var(--primary);border-color:transparent;font-weight:800}

.weather{display:flex;align-items:center;gap:14px}
.weather .big{font-size:44px;font-weight:800;line-height:1}
.weather .meta{color:#d1d5db}
.hint{color:var(--muted);margin-top:8px}

.todo-form{display:flex;align-items:center;gap:10px;margin-top:6px}
.todo-list{list-style:none;margin:14px 0 8px;padding:0;display:grid;gap:10px}
.todo-item{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);
  padding:10px 12px;border-radius:14px
}
.todo-item input[type="checkbox"]{width:18px;height:18px}
.todo-item .text{word-break:break-word}
.todo-item.done .text{text-decoration:line-through;opacity:.65}
.todo-item .del{background:transparent;border:0;color:#ef4444;cursor:pointer;font-size:18px}

.todo-footer{color:#e2e8f0}
.todo-actions{display:flex;gap:6px}

.hidden{display:none!important}

@media (max-width:960px){
  .login-card,.hello-card,.weather-card,.card{grid-column:1/-1}
}