:root {
  --bg: #eef3f2;
  --panel: rgba(255, 255, 255, .88);
  --ink: #142421;
  --muted: #6d7c78;
  --line: #dce6e3;
  --green: #1c6b5a;
  --green-dark: #145044;
  --orange: #db713e;
  --blue: #407a91;
  --shadow: 0 18px 55px rgba(36, 62, 56, .08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(255,255,255,.95), transparent 28rem),
    linear-gradient(145deg, #f3f7f6, var(--bg));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}

button, input { font: inherit; }

.shell { width: min(1380px, calc(100% - 40px)); margin: 0 auto; padding: 56px 0 30px; }
.hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
.eyebrow, .section-kicker { margin: 0 0 7px; color: var(--green); font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
h1 { max-width: 850px; margin: 0; font-size: clamp(2.25rem, 5vw, 4.7rem); font-weight: 650; letter-spacing: -.055em; line-height: .98; }
.subtitle { max-width: 690px; margin: 20px 0 0; color: var(--muted); font-size: 1.06rem; line-height: 1.65; }
.data-status { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.65); color: var(--muted); font-size: .84rem; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #d69b48; box-shadow: 0 0 0 5px rgba(214,155,72,.12); }
.data-status.ready .status-dot { background: #2e9b76; box-shadow: 0 0 0 5px rgba(46,155,118,.12); }
.data-status.error .status-dot { background: #c94f48; box-shadow: 0 0 0 5px rgba(201,79,72,.12); }

.filter-panel, .metric-card, .chart-card, .count-card {
  border: 1px solid rgba(207, 220, 216, .85);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.live-panel { position: relative; margin-bottom: 22px; padding: 25px 29px 20px; border: 1px solid rgba(207, 220, 216, .9); border-radius: 22px; background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(241,248,246,.9)); box-shadow: var(--shadow); overflow: hidden; }
.live-panel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--green), #64a794); }
.live-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.live-status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 999px; font-size: .76rem; font-weight: 750; white-space: nowrap; }
.live-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px currentColor; opacity: .75; }
.live-status.loading { color: #9a762e; background: #fff7df; }
.live-status.ready { color: #24785f; background: #e4f3ee; }
.live-status.stale { color: #a56a29; background: #fff0dc; }
.live-status.unavailable { color: #9a4f4a; background: #fbe8e6; }
.live-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 21px; }
.live-value { position: relative; min-width: 0; padding: 16px 17px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.78); }
.live-value::after { content: ""; position: absolute; top: 15px; right: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); opacity: .65; }
.temperature-live::after { background: var(--orange); }
.humidity-live::after, .rain-live::after { background: var(--blue); }
.live-value span { display: block; padding-right: 14px; color: var(--muted); font-size: .71rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.live-value strong { display: block; margin-top: 9px; font-size: clamp(1.25rem, 2.3vw, 1.75rem); letter-spacing: -.045em; white-space: nowrap; }
.live-timestamp { display: flex; align-items: center; gap: 7px; margin: 15px 2px 0; color: var(--muted); font-size: .8rem; }
.live-timestamp time { color: var(--ink); font-weight: 700; }
.live-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(28,107,90,.1); }

.filter-panel { padding: 27px 30px; border-radius: 22px; }
.filter-heading, .chart-heading { display: flex; align-items: center; justify-content: space-between; gap: 22px; }
h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.025em; }
.presets { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }
.presets button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #fff; cursor: pointer; transition: .2s ease; }
.presets button:hover, .presets button.active { border-color: var(--green); color: var(--green); background: #edf7f4; }
.filter-form { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto; gap: 14px; margin-top: 22px; }
label span { display: block; margin: 0 0 7px 3px; color: var(--muted); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
input[type="date"] { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fbfdfc; color: var(--ink); outline: none; }
input[type="date"]:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(28,107,90,.1); }
.primary-button { align-self: end; min-height: 48px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--green); color: white; font-weight: 750; cursor: pointer; }
.primary-button:hover { background: var(--green-dark); }
button:disabled, input:disabled { cursor: wait; opacity: .55; }
.filter-error { margin: 13px 0 0; color: #b3413b; font-weight: 650; }
.local-file-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; padding: 17px 18px; border: 1px solid #e4c987; border-radius: 14px; background: #fff9e9; }
.local-file-panel[hidden] { display: none; }
.local-file-panel strong, .local-file-panel span { display: block; }
.local-file-panel span { margin-top: 4px; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.file-button { flex: 0 0 auto; padding: 11px 16px; border-radius: 11px; background: var(--green); color: #fff; font-size: .86rem; font-weight: 750; cursor: pointer; }
.file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }

.summary-row { margin: 22px 0; }
.count-card { display: flex; align-items: center; gap: 18px; padding: 21px 25px; border-radius: 18px; }
.icon-badge { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; background: #e4f1ed; color: var(--green); font-size: 1.3rem; }
.count-card p { margin: 0 0 3px; color: var(--muted); font-size: .8rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.count-card strong { margin-right: 13px; font-size: 1.7rem; letter-spacing: -.04em; }
.count-card span { color: var(--muted); font-size: .88rem; }

.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.metric-card { min-width: 0; padding: 24px; border-radius: 20px; overflow: hidden; }
.metric-title { display: flex; align-items: center; gap: 13px; }
.metric-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; color: white; font-weight: 800; font-size: .76rem; background: var(--green); }
.temperature .metric-icon { background: var(--orange); }
.humidity .metric-icon { background: var(--blue); }
.rainfall .metric-icon { background: #648b9c; }
.metric-title p { margin: 0 0 3px; font-weight: 800; }
.metric-title div > span { color: var(--muted); font-size: .8rem; }
.metric-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 28px; }
.metric-values div { min-width: 0; }
.metric-values span { display: block; margin-bottom: 7px; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.metric-values strong { display: block; font-size: clamp(1.15rem, 2vw, 1.65rem); letter-spacing: -.04em; }
.extreme-time { display: block; min-height: 2.3em; margin-top: 8px; color: var(--muted); font-size: .72rem; line-height: 1.45; }
.valid-count { min-height: 1em; margin: 20px 0 0; color: var(--muted); font-size: .75rem; }
.rain-value { margin-top: 28px; }
.rain-value span { display: block; margin-bottom: 7px; color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.rain-value strong { font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.05em; }

.charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.chart-card { min-width: 0; padding: 25px; border-radius: 21px; }
.legend { position: relative; padding-left: 18px; color: var(--muted); font-size: .78rem; white-space: nowrap; }
.legend::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 3px; border-radius: 3px; transform: translateY(-50%); background: var(--orange); }
.pressure-legend::before { background: var(--green); }
.rain-legend::before { background: var(--blue); }
.canvas-wrap { position: relative; height: 330px; margin-top: 22px; }
canvas { display: block; width: 100%; height: 100%; }
footer { display: flex; justify-content: space-between; gap: 20px; margin-top: 24px; padding: 0 4px; color: var(--muted); font-size: .75rem; }

.loading-overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; padding: 25px; background: rgba(238,243,242,.91); backdrop-filter: blur(10px); text-align: center; transition: opacity .25s ease, visibility .25s ease; }
.loading-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-overlay span { margin-top: 8px; color: var(--muted); }
.loader { width: 40px; height: 40px; margin-bottom: 18px; border: 3px solid #cddcd8; border-top-color: var(--green); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 940px) {
  .live-grid { grid-template-columns: repeat(2, 1fr); }
  .metric-grid { grid-template-columns: 1fr; }
  .charts-grid { grid-template-columns: 1fr; }
  .hero { flex-direction: column; }
}

@media (max-width: 680px) {
  .shell { width: min(100% - 24px, 1380px); padding-top: 30px; }
  .filter-panel, .chart-card, .metric-card { padding: 20px; }
  .live-panel { padding: 21px 20px 18px; }
  .live-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .live-timestamp { align-items: flex-start; flex-wrap: wrap; line-height: 1.45; }
  .filter-heading { align-items: flex-start; flex-direction: column; }
  .presets { justify-content: flex-start; }
  .filter-form { grid-template-columns: 1fr; }
  .local-file-panel { align-items: flex-start; flex-direction: column; }
  .primary-button { width: 100%; }
  .metric-values { gap: 4px; }
  .count-card { align-items: flex-start; }
  .count-card span { display: block; margin-top: 2px; }
  .canvas-wrap { height: 270px; }
  footer { flex-direction: column; }
}

.hero-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 17px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.72); color: var(--green); font-size: .86rem; font-weight: 750; text-decoration: none; transition: .2s ease; white-space: nowrap; }
.secondary-button:hover { border-color: var(--green); background: #edf7f4; transform: translateY(-1px); }
.info-shell { min-height: 100vh; display: flex; flex-direction: column; }
.info-hero { align-items: center; }
.info-card { max-width: 940px; margin: 14px auto 32px; padding: clamp(28px, 5vw, 58px); border: 1px solid rgba(207, 220, 216, .85); border-radius: 24px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.info-card-heading { display: flex; align-items: center; gap: 16px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.info-card-heading h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.info-mark { display: grid; place-items: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 15px; background: #e4f1ed; color: var(--green); font-family: Georgia, serif; font-size: 1.4rem; font-weight: 700; }
.info-copy { margin-top: 31px; color: #344743; font-size: clamp(1rem, 1.6vw, 1.1rem); line-height: 1.85; }
.info-copy p { margin: 0 0 23px; }
.info-copy strong { color: var(--ink); font-weight: 780; }
.closing-copy { margin-top: 34px !important; margin-bottom: 0 !important; color: var(--green); font-size: 1.13em; font-weight: 750; }
.info-shell footer { margin-top: auto; padding-bottom: 4px; }

@media (max-width: 680px) {
  .hero-actions { justify-content: flex-start; }
  .info-hero { align-items: flex-start; }
  .info-card-heading { align-items: flex-start; }
}
.hero-actions .secondary-button { min-height: 48px; padding: 0 22px; font-size: .92rem; }
.chart-tooltip { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 3px; min-width: 154px; padding: 10px 12px; border: 1px solid rgba(207, 220, 216, .95); border-radius: 11px; background: rgba(20, 36, 33, .94); color: #fff; box-shadow: 0 10px 28px rgba(20, 36, 33, .2); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -100%); transition: opacity .12s ease; }
.chart-tooltip.visible { opacity: 1; visibility: visible; }
.chart-tooltip strong { font-size: .9rem; }
.chart-tooltip span { color: rgba(255,255,255,.72); font-size: .72rem; white-space: nowrap; }
.chart-hover-dot { position: absolute; z-index: 2; width: 11px; height: 11px; border: 3px solid var(--green); border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(20,36,33,.2); opacity: 0; visibility: hidden; pointer-events: none; transform: translate(-50%, -50%); }
.chart-hover-dot.visible { opacity: 1; visibility: visible; }
.canvas-wrap canvas { cursor: crosshair; }