:root{
  --bg:#f7f8fb;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --accent:#2563eb;
  --accent-2:#10b981;
  --danger:#ef4444;
  --ok:#16a34a;
  --border:#e5e7eb;
  --shadow: 0 10px 30px rgba(15,23,42,.06);
  --radius: 14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif}
a{color:var(--accent)}
.wrap{max-width:1024px;margin:0 auto;padding:24px}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.logo{font-weight:800;letter-spacing:.5px;font-size:20px}
.logo span{color:var(--accent)}
.actions button{background:transparent;border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:10px;cursor:pointer}

/* Cards / auth */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}
.auth h1{margin-top:0}
.stack>*{display:block;width:100%;margin:8px 0}
input, select, textarea {background:#f9fafb;border:1px solid var(--border);color:var(--text);padding:12px;border-radius:12px;outline:none}
input:focus, textarea:focus, select:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.15)}
button{background:var(--accent);border:none;padding:12px 16px;border-radius:12px;color:#fff;font-weight:700;cursor:pointer;box-shadow:0 6px 14px rgba(37,99,235,.18)}
button.ghost{background:#fff;border:1px solid var(--border);color:var(--text);box-shadow:none}
.hidden{display:none}
footer{display:flex;justify-content:center;margin:24px 0;color:var(--muted)}

/* Full-width hero bar */
.hero{
  display:grid;grid-template-columns: 1fr auto 1fr; gap:16px; align-items:center;
  padding:18px 20px;border-radius:16px;
  background:linear-gradient(90deg,#e8f0ff,#ffffff);
  border:1px solid var(--border);box-shadow:var(--shadow); margin-bottom:16px
}
.hero-left .hero-greet{font-size:24px;font-weight:800}
.hero-left .hero-sub{color:var(--muted)}
.wx{display:flex;align-items:center;gap:10px;justify-content:center}
.wx-temp{font-size:28px;font-weight:800}
.wx-desc{color:var(--muted)}
.wx-loc{color:var(--muted);font-size:12px}
.hero-right a{display:inline-block;margin-left:8px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:#fff;text-decoration:none;color:var(--text)}

/* Focus + todos */
.panel{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.focus-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
#quickAdd{flex:1}
.list{display:grid;gap:8px;margin-top:12px}

.todo{
  display:grid;grid-template-columns: 28px 1fr auto; gap:10px; align-items:center;
  background:var(--card);border:1px solid var(--border);border-radius:12px;padding:10px; box-shadow:var(--shadow)
}
.todo .title{font-weight:600}
.todo.done{opacity:.55; filter:grayscale(0.3)}
.todo .actions{display:flex;gap:6px}
.todo .actions button{padding:8px 12px}
.checkbox{width:18px;height:18px}

@media (max-width:720px){
  .hero{grid-template-columns: 1fr; text-align:center}
  .hero-right{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
}