:root { color-scheme: light; font-family: Inter, "Microsoft YaHei", sans-serif; color: #17212b; background: #f4f6f5; --ink: #17212b; --muted: #65737e; --line: #d9e0df; --accent: #087f8c; --panel: #fff; }
* { box-sizing: border-box; } body { margin: 0; } .topbar { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 28px max(24px, calc((100vw - 1180px) / 2)); background: #123b43; color: white; } h1, h2, h3, p { margin: 0; } h1 { font-size: 28px; letter-spacing: 0; } .eyebrow { color: #91d4d1; font-size: 11px; font-weight: 700; letter-spacing: 1.6px; margin-bottom: 8px; } form { display: flex; align-items: end; gap: 8px; } label { display: block; font-size: 12px; color: #b8d6d5; } input, button { height: 40px; border: 0; font: inherit; } input { width: 120px; padding: 0 12px; color: var(--ink); text-transform: uppercase; font-weight: 700; } button { padding: 0 18px; background: #e8c46a; color: #17212b; cursor: pointer; font-weight: 700; } button:hover { background: #f4d889; } main { max-width: 1180px; margin: 0 auto; padding: 28px 24px 56px; } .state, .error { padding: 32px; background: var(--panel); border: 1px solid var(--line); } .error { color: #a53e32; } .airport { display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid var(--line); padding-bottom: 20px; } .airport h2 { font-size: 25px; } .airport p, .meta, .muted { color: var(--muted); } .airport .code { color: var(--accent); font-size: 14px; font-weight: 800; margin-bottom: 5px; } .grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; margin-top: 18px; } .panel { background: var(--panel); border: 1px solid var(--line); padding: 20px; min-width: 0; } .panel h3 { font-size: 14px; margin-bottom: 16px; } .current { grid-row: span 2; } .current-reading { display: flex; align-items: center; gap: 20px; } .current-icon { width: 74px; color: #c3830b; font-family: "Segoe UI Symbol", sans-serif; font-size: 64px; line-height: 1; text-align: center; } .temperature { font-size: 52px; font-weight: 700; color: var(--accent); line-height: 1; margin: 12px 0 8px; } .weather-text { font-size: 18px; font-weight: 700; } .weather-label { display: inline-flex !important; align-items: center; gap: 6px; } .weather-icon { color: #b47708; font-family: "Segoe UI Symbol", sans-serif; font-size: 19px; line-height: 1; } .metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; } .metric small { display: block; color: var(--muted); font-size: 12px; margin-bottom: 4px; } .metric strong { font-size: 16px; } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; } .tabs button { background: transparent; color: var(--muted); border-bottom: 2px solid transparent; padding: 0 12px; } .tabs button.active { color: var(--accent); border-color: var(--accent); } .forecast { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(115px, 1fr); overflow-x: auto; gap: 8px; } .forecast-item { padding: 10px; border-left: 1px solid var(--line); } .forecast-item strong, .forecast-item span { display: block; margin-bottom: 7px; } .forecast-item small { color: var(--muted); display: block; } .history { grid-column: 1 / -1; overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; } th { color: var(--muted); font-weight: 600; } pre { white-space: pre-wrap; word-break: break-word; color: var(--muted); font-size: 12px; line-height: 1.6; max-height: 170px; overflow: auto; } .actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .ai-result { margin-top: 14px; white-space: pre-wrap; line-height: 1.6; color: var(--muted); } @media (max-width: 760px) { .topbar, .airport { align-items: flex-start; flex-direction: column; } form { width: 100%; } input { flex: 1; } main { padding: 18px 14px 40px; } .grid { grid-template-columns: 1fr; } .current { grid-row: auto; } }