:root{font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif;color:#20333b;background:#f4f7f7;font-synthesis:none;--accent:#125e70;--muted:#687d84;--line:#dae4e7}
.weather-heading{gap:12px}.weather-heading>div{min-width:0}.weather-heading small{display:block;margin-top:6px;color:var(--muted);font-size:11px}.weather-heading button{flex-shrink:0;font-size:13px}
.metrics #wind-direction{font-size:22px}.day-divider .day-temperature{color:#125e70;font-weight:600}
.weather-table-body{display:flex;flex:1;min-height:0;min-width:0}.weather-table-body .table-scroll{min-width:0}.weather-days{flex:0 0 84px;overflow-y:auto;overflow-x:hidden;padding:8px;border-right:1px solid var(--line);background:#f5f9f9;position:relative;scrollbar-width:thin}.weather-day{display:grid;gap:5px;justify-items:center;width:100%;margin:0 0 8px;padding:11px 3px;border-radius:7px;font-size:12px}.weather-day strong{font-size:13px;font-variant-numeric:tabular-nums}.weather-day small{font-size:11px;color:var(--muted)}.weather-day.weekend{background:#fff3df}.weather-day.active{background:var(--accent);border-color:var(--accent);color:#fff}.weather-day.active small{color:#d6edf0}@media(max-width:650px){.weather-days{flex-basis:66px;padding:6px}.weather-day{padding:10px 2px}.weather-day strong{font-size:12px}.weather-day small{font-size:10px}}
.leaflet-control-zoom a{color:#125e70}.leaflet-control-attribution{max-width:100%;font-size:10px!important}.metrics #weather-condition{font-size:21px}#download-data{font-size:12px;margin-top:12px}
.map-toolbar{position:absolute;top:12px;right:12px;z-index:600;display:flex;gap:8px}.map-toolbar select{min-width:0;background:white;border:1px solid var(--line);border-radius:8px;padding:9px;font-size:13px}.map-toolbar button{font-size:13px;box-shadow:0 2px 8px #20333b15}.map-expanded{overflow:hidden}
.point-panel{padding:20px;background:white;border:1px solid var(--line);border-radius:14px;margin-bottom:20px;min-width:0}.point-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.selected-point{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}.selected-point .section-label{display:block}.selected-point h2{font-size:18px}.point-panel .map-panel{height:380px;min-height:320px;margin-top:16px}.forecast-tabs{width:max-content;margin-bottom:16px}.tools .coordinates{flex:1;min-width:0}.tools .search{flex:1;min-width:0}.coordinates form{flex-wrap:wrap;align-items:end}.coordinates fieldset{margin:0;padding:8px;border:1px solid var(--line);border-radius:8px;min-width:0;flex:1}.coordinates legend{font-size:12px;color:var(--muted)}.dms-fields{display:grid;grid-template-columns:90px repeat(3,minmax(45px,1fr));gap:6px;align-items:end}.coordinates .dms-fields input{width:100%;padding:8px 6px}.dms-fields select{width:100%;padding:8px 3px;border:1px solid var(--line);border-radius:8px;background:white;font-size:12px}.tide-timeline{display:flex;gap:10px;overflow-x:auto;padding:6px 0 18px;scroll-snap-type:x proximity}.tide-day{flex:0 0 156px;display:grid;gap:9px;text-align:left;padding:14px;scroll-snap-align:start;background:#f6f9fa}.tide-day strong{font-size:14px}.tide-day span{font-size:15px}.tide-day small{font-size:11px;color:var(--muted)}.tide-day.weekend{background:#fff7e9}.tide-day.active{background:var(--accent);color:white;border-color:var(--accent)}.tide-day.active small{color:#cbe5eb}
.tide-scroll-hint{display:none}
@media(max-width:650px){.tide-panel form{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}.tide-panel label{min-width:0}.tide-panel input{min-width:0;max-width:100%}.tide-panel #tide-date{width:100%;padding-left:8px;padding-right:8px}.tide-chart{overflow-x:auto}.tide-chart svg{min-width:800px}.tide-scroll-hint{display:block}}
.favorites-panel{margin-top:16px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:10px}.favorites-panel summary{cursor:pointer;color:var(--accent)}.favorites-panel form{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin-top:12px}.favorites-panel label{display:grid;gap:5px;font-size:12px}.favorites-panel small{color:var(--muted);font-size:11px}.favorite-list{display:grid;gap:8px}.favorite-item{display:flex;gap:8px;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:10px 0}.favorite-item small{flex:1;min-width:140px}.tide-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:0 20px 20px;min-width:0}.tide-panel .table-heading{padding-left:0;padding-right:0}.tide-panel form{display:flex;gap:10px;flex-wrap:wrap;align-items:end;margin-top:16px}.tide-panel label{display:grid;gap:5px;font-size:12px}.tide-panel input{width:145px}.tide-chart svg{width:100%;height:auto;display:block}.tide-category{background:#edf5f5;border-radius:8px;padding:12px;font-size:14px}.tide-events{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:12px;line-height:1.7}.tide-events>div{padding:10px;background:#f4f7f7;border-radius:6px}
@media(max-width:650px){header nav button{min-width:0;padding:7px}.tide-panel{width:100%;padding:0 12px 16px}.tide-events{grid-template-columns:1fr}.tide-panel label{flex:1}.tide-panel input{width:100%}.favorites-panel input{width:100%}.favorites-panel label{width:100%}}
.map-crosshair{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:500;pointer-events:none;font-size:44px;line-height:1;color:#125e70;text-shadow:0 1px 3px #fff,1px 0 3px #fff}.map-selection{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:500;width:min(330px,90%);background:#fffffff2;padding:12px;border:1px solid var(--line);border-radius:10px;display:grid;gap:7px;text-align:center;font-size:12px}.map-selection small{color:var(--muted)}.map-selection button{background:var(--accent);color:white}.table-scroll .day-divider{cursor:default}.table-scroll .day-divider th{position:static;background:#eaf1f3;border-top:3px solid #abc5cc;border-bottom:1px solid #c6d9df;color:#234f5c;padding:13px 18px;white-space:normal}.day-divider strong{display:inline-block;margin-right:18px;font-size:14px}.day-divider span{font-size:12px;font-weight:400}.table-scroll .day-divider.weekend th{background:#fff3df;border-top-color:#d5b879;color:#73541d}
.brand{min-width:0}.brand>span:last-child{min-width:0}#project-name{display:block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.forecast-hint{margin:0;padding:10px 22px;font-size:11px;line-height:1.6;color:var(--muted);border-bottom:1px solid var(--line)}.reading-time{font-size:12px;color:var(--muted);margin-top:20px}.reading-time strong{display:block;margin-top:6px;font-size:15px;color:var(--accent)}.more-forecast{padding:18px;text-align:center;border-top:1px solid var(--line);background:#f5f9f9}.more-forecast p{font-size:12px;color:var(--muted);line-height:1.7}.more-forecast button{background:var(--accent);color:white;min-width:140px}@media(max-width:650px){#project-name{max-width:110px}.forecast-hint{padding:8px 16px}}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer;background:white;color:var(--accent);border:1px solid var(--line);border-radius:8px;padding:9px 14px}button:hover{background:#edf5f5;border-color:#8bb5bd}button:disabled{opacity:.5;cursor:default}input{border:1px solid var(--line);border-radius:8px;padding:11px 14px;background:#fff;min-width:0}input:focus,button:focus-visible,select:focus{outline:2px solid #29a0b7;outline-offset:2px}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}[hidden]{display:none!important}
header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:#fff;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;font-size:22px;font-weight:650;color:#183e4a}.brand:hover{text-decoration:none}.brand small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-top:5px;letter-spacing:1px}.brand-icon{width:44px;height:44px;border-radius:12px;background:#125e70;color:white;text-align:center;line-height:38px;font-size:36px}nav{display:flex;gap:4px;background:#eff4f5;padding:4px;border-radius:10px}nav button{border:0;background:none;min-width:90px}nav button.active{color:#fff;background:var(--accent)}
main{max-width:1600px;margin:auto;padding:22px 32px}.tools{display:flex;gap:12px;position:relative;align-items:flex-start}.search{display:flex;gap:8px;flex:1;max-width:650px}.search input{flex:1}.search button{background:var(--accent);color:white}.coordinates{background:white;border:1px solid var(--line);border-radius:8px;padding:11px 14px;min-width:170px}.coordinates summary{cursor:pointer;color:var(--accent)}.coordinates form{display:flex;gap:10px;padding-top:14px}.coordinates label{display:grid;gap:5px;font-size:12px}.coordinates input{width:135px}.coordinates button{align-self:end}.results{position:absolute;top:52px;left:0;z-index:1200;background:white;border:1px solid var(--line);box-shadow:0 10px 24px #153c4820;border-radius:10px;width:min(650px,100%);max-height:320px;overflow:auto;padding:6px}.results button{width:100%;text-align:left;border:0;display:block}.results small{display:block;color:var(--muted);margin-top:4px}.quick-points{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px;font-size:12px}.quick-points>span{color:var(--muted);margin-right:5px}.quick-points button{padding:6px 12px;border-radius:20px;font-size:12px}.status{color:var(--muted);font-size:13px;min-height:20px;margin:15px 0}.status.error{color:#ad4535}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}.map-panel,.table-panel{height:640px;min-height:460px;position:relative;background:#e7eff1;border:1px solid var(--line);border-radius:14px;overflow:hidden}#map{position:absolute;inset:0}.map-message{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px;text-align:center;background:#edf3f4;color:#375e6b;z-index:450}.map-message strong{font-size:21px}.map-message p{font-size:14px;max-width:430px;line-height:1.8}.map-reading{position:absolute;bottom:36px;left:20px;z-index:500;background:#fffffff0;border:1px solid #d1e3e7;border-radius:12px;padding:16px 20px;box-shadow:0 6px 25px #19445515;pointer-events:none;min-width:245px}.eyebrow{font-size:11px;color:var(--muted)}.map-reading>div{display:flex;gap:12px;align-items:center;margin-top:10px}.map-reading strong{font-size:25px;font-weight:650}.wind-arrow{display:inline-block;font-size:32px;color:#168399;line-height:1}.map-reading .wave-reading{font-size:13px;border-top:1px solid var(--line);padding-top:10px}.wave-reading strong{font-size:22px}
.forecast-panel{background:white;border:1px solid var(--line);border-radius:14px;padding:22px}.section-label{color:var(--muted);font-size:11px;letter-spacing:1px;margin-bottom:8px}h2{font-size:21px;margin:0 0 7px}.muted{color:var(--muted);font-size:12px;line-height:1.7}.metrics{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px}.metrics>div{display:flex;flex-direction:column;gap:5px;border-bottom:1px solid var(--line);padding-bottom:13px}.metrics>div:last-child{grid-column:1/-1}.metrics span{font-size:12px;color:var(--muted)}.metrics strong{font-size:29px;font-weight:600;color:#194b5a}.metrics small{font-size:10px;color:var(--muted)}.source-info{font-size:11px;margin-top:17px}.source-info summary{cursor:pointer;color:var(--accent);font-size:12px}.source-item{margin-top:12px;line-height:1.8;color:var(--muted)}.source-item b{color:#365562}.official{border-top:1px solid var(--line);padding-top:18px;margin-top:22px}.official a{display:block;font-size:12px;margin-top:10px}.official p{font-size:10px}.help{font-size:13px;color:var(--muted);line-height:1.9;margin-top:25px}.warnings{font-size:12px;line-height:1.8;color:#936420;background:#fff8e7;border:1px solid #f0deb5;border-radius:8px;padding:10px;margin-top:15px}
.table-panel{background:white;display:flex;flex-direction:column}.table-heading{padding:22px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}h1{font-size:20px;margin:0}.table-heading>span{font-size:11px;color:var(--muted)}.table-scroll{overflow:auto;flex:1}table{width:100%;border-collapse:collapse;text-align:left;font-size:14px;white-space:nowrap}th{position:sticky;top:0;background:#f5f9f9;font-weight:500;color:var(--muted);z-index:1}th,td{padding:15px 22px;border-bottom:1px solid #e9eff0}th small{font-size:10px}tbody tr{cursor:pointer}tbody tr:hover{background:#f6fafb}tbody tr.selected{background:#e8f3f5;color:#125e70}td:first-child{font-variant-numeric:tabular-nums}.empty{padding:70px 20px;text-align:center;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:20px;margin:0 32px 25px;font-size:11px;color:var(--muted);line-height:1.8}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:900px){header{padding:0 18px;height:76px}main{padding:16px 18px}.workspace{grid-template-columns:minmax(0,1fr) 290px;gap:12px}.forecast-panel{padding:17px}.map-panel,.table-panel{height:620px}.coordinates form{flex-wrap:wrap}.coordinates input{width:110px}footer{margin:0 18px 20px;flex-direction:column;gap:4px}th,td{padding:14px}}
@media(max-width:650px){.brand{font-size:18px}.brand small{font-size:10px}.brand-icon{width:36px;height:36px;line-height:31px;font-size:30px}nav button{min-width:60px;font-size:12px;padding:8px}.tools{flex-wrap:wrap}.search{width:100%;flex-basis:100%}.coordinates{width:100%}.coordinates form{display:grid;grid-template-columns:1fr 1fr auto}.coordinates input{width:100%}.workspace{display:flex;flex-direction:column}.map-panel,.table-panel{width:100%;height:430px;min-height:380px}.forecast-panel{width:100%}.metrics{grid-template-columns:1fr 1fr 1fr}.metrics>div:last-child{grid-column:auto}.metrics strong{font-size:25px}.map-reading{bottom:32px;left:12px;padding:12px 15px;min-width:220px}.table-heading{padding:16px}th,td{font-size:12px;padding:12px 10px}.quick-points{gap:6px}.quick-points>span{width:100%}}
@media(max-width:1100px){.tools{flex-wrap:wrap}.tools .search{flex-basis:100%;max-width:none}.tools .coordinates{flex-basis:100%}}
@media(max-width:650px){.point-panel{padding:14px}.coordinates form{display:flex;flex-direction:column;align-items:stretch}.coordinates fieldset{width:100%}.coordinates form>button{align-self:stretch}.selected-point{align-items:flex-start;flex-direction:column;gap:8px}.selected-point .muted{overflow-wrap:anywhere}.tide-day{flex-basis:140px}header>span{max-width:110px;text-align:right}.point-panel .map-panel{min-height:320px}.tide-panel .table-heading{gap:8px}.tide-panel h1{font-size:18px}}
.point-panel .map-panel{height:clamp(560px,75vh,800px);min-height:560px}
.point-panel .map-panel.expanded{position:fixed;inset:16px;z-index:2000;width:auto;height:auto;min-height:0;margin:0;box-shadow:0 0 0 30px #20333b99}
@media(max-width:650px){.point-panel .map-panel{height:clamp(480px,72svh,680px);min-height:480px}.point-panel .map-panel.expanded{inset:8px}.map-toolbar{top:10px;right:10px;gap:6px}.map-toolbar select,.map-toolbar button{font-size:12px;padding:8px}.map-selection{bottom:28px}}