:root{
  --card-bg: rgba(20,20,22,0.6);
  --card-border: rgba(255,255,255,0.12);
  --text: #f5f7fb;
  --muted: #c7cbd6;
  --accent: #ffb86b;
  --ok: #7CFC9E;
  --danger:#ff6b6b;
  --shadow: 0 10px 40px rgba(255,140,160,0.35);
}

* { box-sizing: border-box; }

body{
  margin:0; min-height:100dvh;
  color:var(--text);
  font-family: ui-sans-serif,system-ui,AppleSDGothicNeo,Segoe UI,Roboto,Pretendard,Inter,Arial,sans-serif;
  background:#0b0d12 center/cover no-repeat fixed;
}

.overlay{
  position:fixed; inset:0; backdrop-filter: blur(8px) saturate(120%);
  background: radial-gradient(1200px 800px at 80% 10%, rgba(255,120,150,.18), transparent 60%),
              radial-gradient(1000px 700px at 20% 90%, rgba(130,170,255,.18), transparent 60%);
  pointer-events:none;
}

.app{
  position:relative; z-index:1; padding:32px;
  display:grid; gap:20px; grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
  max-width:1100px; margin:0 auto;
}

header{
  grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--card-bg); border:1px solid var(--card-border); border-radius:18px; padding:18px 20px; box-shadow:var(--shadow);
}

.clock{ font-weight:700; font-size:clamp(28px,5vw,44px); letter-spacing:1px; }
.greeting{ color:var(--muted); font-size:14px; }

.cards{ display:contents; }

.card{
  background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:18px; padding:18px; box-shadow:var(--shadow);
}

.card h2{ margin:0 0 12px; font-size:18px; letter-spacing:.3px; }

/* Login */
.login-wrap{ display:flex; gap:10px; }

input[type="text"], input[type="search"]{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid var(--card-border); background:rgba(255,255,255,0.06); color:var(--text);
  outline: none;
}

button{
  padding:10px 14px; border-radius:12px;
  border:1px solid var(--card-border); background:#1f2430; color:var(--text); cursor:pointer;
}
button.primary{ background:linear-gradient(180deg,#ffbb88,#ff9d68); color:#201a16; border:none; font-weight:600; }
button.ghost{ background:transparent; }

/* Todos */
.todo-input{ display:flex; gap:10px; margin-bottom:12px; }
.todo-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.todo{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px; border:1px solid var(--card-border); border-radius:12px;
  background:rgba(255,255,255,0.04);
}
.todo-left{ display:flex; align-items:center; gap:10px; }
.todo label{ user-select:none; }
.todo.done label{ text-decoration: line-through; color:var(--muted); }
.todo .remove{ color:var(--danger); }

/* Weather */
.weather-main{ display:flex; align-items:center; gap:12px; }
.temp{ font-size:32px; font-weight:700; }
.meta{ color:var(--muted); font-size:14px; }

/* Footer note */
.note{ grid-column:1/-1; text-align:center; color:var(--muted); font-size:12px; }

@media (max-width:480px){ .app{ padding:18px } }