*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;-webkit-font-smoothing:antialiased;background:#1e1e1e;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.app{min-height:100vh;display:flex}.app.loading{color:#888;justify-content:center;align-items:center;display:flex}.main-content{flex:1;padding:2rem;overflow-y:auto}.sidebar{background:#1e1e1e;border-right:1px solid #2a2a2a;flex-direction:column;width:220px;min-height:100vh;padding:1.5rem 1rem;display:flex}.sidebar-logo{color:#fff;letter-spacing:-.02em;margin-bottom:2rem;padding-left:.5rem;font-size:1.1rem;font-weight:700}.sidebar-nav{flex:1}.nav-item{color:#c4c4c4;cursor:pointer;padding:.4rem .5rem;font-size:.85rem;text-decoration:none;display:block}.nav-item:hover{color:#fff}.nav-section{color:#c4c4c4;margin-top:.75rem;font-weight:500}.spot-nav-list{margin:.25rem 0 .75rem;padding-left:1rem;list-style:none}.spot-nav-item{color:#888;cursor:pointer;border-radius:4px;padding:.3rem .5rem;font-size:.8rem;transition:color .15s}.spot-nav-item:hover{color:#fff}.spot-nav-item.active{color:#4c8492}.sidebar-footer{padding-top:1rem}.conditions-table{background:#262b37;border-radius:5px;max-width:700px;overflow:hidden;box-shadow:0 2px 4px #00000047}.conditions-header,.conditions-row{grid-template-columns:60px 100px 100px 80px 110px 1fr;align-items:center;padding:0 1rem;display:grid}.conditions-header{border-bottom:1px solid #363c4a;padding-top:.75rem;padding-bottom:.5rem}.conditions-header .col{color:#ffffffb3;text-transform:capitalize;font-size:.8rem;font-weight:600}.conditions-row{border-bottom:1px solid #2e3340;border-left:3px solid #0000;padding-top:.6rem;padding-bottom:.6rem}.conditions-row:last-child{border-bottom:none}.conditions-row.current{background:#4c84921a;border-left-color:#4c8492;font-size:1.05em}.time-label{color:#888;font-size:.75rem}.conditions-row.current .time-label{color:#fff;font-weight:600}.wave-height{color:#fff;font-size:1.4rem;font-weight:700}.wave-unit{color:#fff9;margin-left:1px;font-size:.7rem;font-weight:400}.wave-detail{color:#888;margin-top:-2px;font-size:.6rem;display:block}.quality-badge{white-space:nowrap;border-radius:3px;padding:.15rem .5rem;font-size:.7rem;font-weight:500;display:inline-block}.quality-badge.good{color:#4cb464;background:#4cb46433}.quality-badge.fair-to-good{color:#4ca082;background:#4ca08233}.quality-badge.fair{color:#4c8492;background:#4c849233}.quality-badge.poor-to-fair{color:#c8a03c;background:#c8a03c33}.quality-badge.poor{color:#c85050;background:#c8505033}.tide-value{color:#c4c4c4;font-size:.8rem}.tide-arrow{font-size:.55rem}.tide-arrow.rising{color:#4ca082}.tide-arrow.falling{color:#c85050}.wind-speed{color:#fff;font-size:.85rem;font-weight:600}.wind-unit,.wind-dir{color:#c4c4c4;font-size:.75rem}.wind-gust{color:#888;margin-top:1px;font-size:.65rem;display:block}.swell-height{color:#fff;font-size:.85rem;font-weight:600}.swell-unit,.swell-period,.swell-dir{color:#c4c4c4;font-size:.75rem}.swell-deg{color:#888;font-size:.7rem}.swell-secondary{color:#666;margin-top:1px;font-size:.65rem;display:block}.date-tiles{gap:.5rem;margin-bottom:1rem;display:flex;overflow-x:auto}.date-tile{cursor:pointer;color:#c4c4c4;background:#262b37;border:1px solid #363c4a;border-radius:6px;flex-direction:column;flex-shrink:0;align-items:center;gap:.2rem;min-width:70px;padding:.6rem .8rem;transition:border-color .15s,background .15s;display:flex}.date-tile:hover{border-color:#4c8492}.date-tile.selected{background:#4c84921a;border-color:#4c8492}.date-tile-label{color:#c4c4c4;font-size:.75rem;font-weight:500}.date-tile.selected .date-tile-label{color:#fff}.date-tile-range{color:#fff;font-size:1.1rem;font-weight:700}.date-tile-unit{color:#fff9;margin-left:1px;font-size:.65rem;font-weight:400}.date-tile-weather{font-size:.9rem;line-height:1}.date-tile-temp{color:#888;font-size:.65rem}.timeline-header{color:#888;align-items:center;gap:.75rem;margin-bottom:.5rem;padding-left:.25rem;font-size:.8rem;display:flex}.interval-toggle{background:#262b37;border:1px solid #363c4a;border-radius:4px;display:flex;overflow:hidden}.interval-toggle button{color:#888;cursor:pointer;background:0 0;border:none;padding:.25rem .6rem;font-size:.7rem;transition:background .15s,color .15s}.interval-toggle button:hover{color:#c4c4c4}.interval-toggle button.active{color:#fff;background:#4c8492}.forecast-content{max-width:700px;transition:opacity .15s;position:relative}.forecast-content.loading{opacity:.4;pointer-events:none}.forecast-spinner{z-index:1;border:3px solid #363c4a;border-top-color:#4c8492;border-radius:50%;width:28px;height:28px;animation:.6s linear infinite spin;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes spin{to{transform:translate(-50%,-50%)rotate(360deg)}}.spot-loading,.spot-error{color:#888;padding:2rem}