:root {
    color-scheme: dark;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(13px, 0.42vw + 10px, 17px);
    background: #08101f;
    color: #f7f8fb;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(76, 29, 149, .22), transparent 34%),
        radial-gradient(circle at top right, rgba(14, 165, 233, .12), transparent 30%),
        #08101f;
}
button, input, select, textarea { font: inherit; }

.dashboard {
    width: min(1600px, 100%);
    margin: 0 auto;
    padding: clamp(10px, 1.6vw, 24px);
}
.dashboard-header, .page-header, .topline {
    display: flex;
    justify-content: space-between;
    gap: clamp(10px, 1.4vw, 20px);
    align-items: flex-start;
}
.dashboard-header { margin-bottom: clamp(12px, 1.4vw, 20px); }
.header-actions {
    display: flex;
    gap: clamp(6px, .7vw, 10px);
    align-items: center;
    flex-wrap: wrap;
}
.eyebrow {
    letter-spacing: .18em;
    font-size: .72rem;
    opacity: .68;
    margin: 0;
}
h1 {
    margin: .25rem 0 .35rem;
    font-size: clamp(1.9rem, 3.5vw, 4.1rem);
    line-height: 1;
}
h2 {
    margin: 0 0 .8rem;
    font-size: clamp(1rem, 1.05vw + .7rem, 1.6rem);
}
p { line-height: 1.45; }
.muted { opacity: .62; margin: 0; }

button, .button-link {
    border: 0;
    border-radius: clamp(9px, .7vw, 13px);
    padding: clamp(8px, .55vw, 12px) clamp(10px, .9vw, 16px);
    font-weight: 700;
    cursor: pointer;
    color: white;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}
button.secondary, .secondary-link {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(135px, 12vw, 190px), 1fr));
    gap: clamp(8px, .85vw, 14px);
    margin-bottom: clamp(12px, 1.4vw, 20px);
}
.metric-card {
    --card-bg: rgba(255,255,255,.055);
    --card-border: rgba(255,255,255,.09);
    min-height: clamp(92px, 8.8vw, 132px);
    padding: clamp(12px, 1.1vw, 20px);
    border-radius: clamp(14px, 1.35vw, 22px);
    background: linear-gradient(145deg, var(--card-bg), rgba(255,255,255,.025));
    border: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .4rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.18);
    transition: background .35s ease, border-color .35s ease, transform .25s ease;
}
.metric-card:hover { transform: translateY(-2px); }
.hero-metric { grid-column: span 2; }
.metric-card strong {
    font-size: clamp(1.25rem, 1.25vw + .8rem, 2.25rem);
    line-height: 1;
}
.big-number {
    font-size: clamp(3rem, 4.9vw, 5.6rem) !important;
    letter-spacing: -.045em;
}
.metric-top {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    align-items: center;
}
.metric-label { opacity: .72; }
.trend {
    min-width: 1.7em;
    height: 1.7em;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 800;
    background: rgba(255,255,255,.08);
}
.trend-up { color: #4ade80; background: rgba(34,197,94,.14); }
.trend-down { color: #60a5fa; background: rgba(59,130,246,.14); }
.trend-flat { color: #cbd5e1; }

.tone-temperature { --card-bg: rgba(139,92,246,.18); --card-border: rgba(167,139,250,.28); }
.tone-humidity { --card-bg: rgba(14,165,233,.16); --card-border: rgba(56,189,248,.26); }
.tone-wind { --card-bg: rgba(148,163,184,.13); --card-border: rgba(203,213,225,.18); }
.tone-rain { --card-bg: rgba(37,99,235,.18); --card-border: rgba(96,165,250,.25); }
.tone-sea { --card-bg: rgba(6,182,212,.17); --card-border: rgba(34,211,238,.26); }
.tone-wave { --card-bg: rgba(8,145,178,.18); --card-border: rgba(34,211,238,.22); }
.tone-tide { --card-bg: rgba(79,70,229,.18); --card-border: rgba(129,140,248,.24); }
.tone-current { --card-bg: rgba(16,185,129,.15); --card-border: rgba(52,211,153,.22); }

.card {
    width: 100%;
    padding: clamp(14px, 1.4vw, 24px);
    margin-bottom: clamp(12px, 1.4vw, 20px);
    border-radius: clamp(16px, 1.5vw, 24px);
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.section-title {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: baseline;
}
.forecast-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(clamp(145px, 13vw, 185px), 1fr);
    overflow-x: auto;
    gap: clamp(8px, .8vw, 12px);
    padding-bottom: 6px;
    scrollbar-width: thin;
}
.forecast-day {
    display: grid;
    gap: .32rem;
    padding: clamp(11px, .9vw, 16px);
    border-radius: clamp(12px, 1vw, 18px);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.07);
}
.forecast-temp {
    font-size: clamp(1.25rem, 1.2vw + .7rem, 1.9rem);
    font-weight: 800;
}

.charts-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 20px);
}
.chart-card { min-width: 0; }
.chart-shell {
    position: relative;
    min-height: clamp(220px, 24vw, 360px);
}
canvas {
    width: 100%;
    height: clamp(220px, 24vw, 360px);
    display: block;
}
.chart-tooltip {
    position: absolute;
    z-index: 3;
    pointer-events: none;
    min-width: 150px;
    max-width: 240px;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(7,12,25,.94);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    font-size: .82rem;
    line-height: 1.45;
    opacity: 0;
    transform: translate(10px, -50%);
    transition: opacity .12s ease;
}
.chart-tooltip.visible { opacity: 1; }

.tides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(170px, 16vw, 230px), 1fr));
    gap: clamp(8px, .8vw, 12px);
}
.tide-item {
    display: grid;
    gap: .35rem;
    padding: clamp(11px, .9vw, 16px);
    border-radius: clamp(12px, 1vw, 18px);
    background: rgba(255,255,255,.045);
}
.disclaimer, .data-source {
    font-size: .78rem;
    opacity: .58;
}
.data-source { padding: 2px 4px 18px; }
.error-card { border-color: rgba(239,68,68,.42); }

.page {
    width: min(1180px, 100%);
    margin: 0 auto;
    padding: clamp(10px, 1.6vw, 24px);
}
.narrow-page { width: min(760px, 100%); }
.form { display: grid; gap: 14px; margin-top: 20px; }
.grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.full-width { grid-column: 1 / -1; }
label { display: grid; gap: 7px; font-weight: 600; }
input, select, textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: inherit;
    border-radius: 12px;
    padding: 12px 14px;
}
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;
    white-space: nowrap;
}
td:last-child { white-space: normal; min-width: 200px; }

@media (max-width: 980px) {
    .charts-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .dashboard-header { flex-direction: column; }
    .header-actions { width: 100%; }
    .header-actions > * { flex: 1 1 auto; }
    .metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .hero-metric { grid-column: span 2; }
    .grid-form { grid-template-columns: 1fr; }
    .full-width { grid-column: auto; }
}
@media (max-width: 420px) {
    :root { font-size: 13px; }
    .metrics-grid { gap: 7px; }
    .metric-card { padding: 11px; min-height: 88px; }
}


select {
    color-scheme: dark;
    appearance: auto;
    background-color: #111a2d;
    color: #f8fafc;
}
select option,
select optgroup {
    background-color: #111827;
    color: #f8fafc;
}
select:disabled {
    color: rgba(248,250,252,.45);
    background-color: rgba(255,255,255,.035);
}
input[readonly] {
    color: #cbd5e1;
    background: rgba(255,255,255,.035);
    cursor: default;
}
.location-search {
    margin-top: 1rem;
    margin-bottom: 1.1rem;
}
.search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .65rem;
}
.search-status {
    min-height: 1.5rem;
    margin-top: .55rem;
    font-size: .86rem;
    color: #cbd5e1;
}
.search-status.loading { color: #93c5fd; }
.search-status.success { color: #86efac; }
.search-status.error { color: #fca5a5; }
.selected-location {
    padding: .85rem 1rem;
    border-radius: 12px;
    background: rgba(56,189,248,.08);
    border: 1px solid rgba(56,189,248,.16);
    line-height: 1.5;
}
@media (max-width: 560px) {
    .search-row { grid-template-columns: 1fr; }
}