:root {
  --bg: #0f172a;
  --card: #111827;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --accent: #38bdf8;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, 'PingFang SC', 'Microsoft Yahei', sans-serif;
  background: radial-gradient(1200px 800px at 10% 10%, #111827, var(--bg));
  color: var(--text);
}

.header {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 16px 24px; border-bottom: 1px solid #1f2937;
}
.header h1 { margin: 0; font-size: 20px; justify-self: start; }
.header nav { justify-self: end; }
.header nav a { color: var(--muted); text-decoration: none; }
.header nav a:hover { color: var(--accent); }

.time { text-align: center; }
#timeMain { font-size: 18px; color: var(--text); }
#timeSub { font-size: 12px; color: var(--muted); }

.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; padding: 24px; max-width: 1200px; margin: 0 auto;
}
.card {
  background: var(--card); border: 1px solid #1f2937; border-radius: 12px;
  padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.card h2 { margin: 0 0 12px; font-size: 18px; }

.weather-controls { display: flex; gap: 8px; margin-bottom: 12px; }
.weather-controls input { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid #334155; background: #0b1220; color: var(--text); }
.weather-controls button { padding: 8px 12px; border-radius: 8px; border: 1px solid #334155; background: #0b1220; color: var(--text); cursor: pointer; }
.weather-controls button:hover { border-color: var(--accent); }

.weather { font-size: 14px; color: var(--muted); }
.weather .temp { font-size: 32px; color: var(--text); }

.search-form { display: flex; gap: 8px; margin-bottom: 8px; }
.search-form input { flex: 1; padding: 8px; border-radius: 8px; border: 1px solid #334155; background: #0b1220; color: var(--text); }
.search-form button { padding: 8px 12px; border-radius: 8px; border: 1px solid #334155; background: #0b1220; color: var(--text); cursor: pointer; }
.search-form button:hover { border-color: var(--accent); }

.links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.links li a { display: block; background: #0b1220; border: 1px solid #334155; border-radius: 8px; padding: 10px; color: var(--text); text-decoration: none; }
.links li a:hover { border-color: var(--accent); }

.footer { text-align: center; padding: 24px; color: var(--muted); }

.login { max-width: 420px; margin: 10vh auto; background: var(--card); border: 1px solid #1f2937; border-radius: 12px; padding: 24px; }
.login-form { display: grid; gap: 12px; }
.login-form input { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid #334155; background: #0b1220; color: var(--text); }
.login-form button { padding: 10px 14px; border-radius: 8px; border: 1px solid #334155; background: #0b1220; color: var(--text); cursor: pointer; }
.login-form button:hover { border-color: var(--accent); }
.msg { color: #fca5a5; }

.lan-note { margin: 4px 0 10px; color: var(--muted); font-size: 12px; }