@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap";:root{--primary: #0284c7;--primary-glow: rgba(2, 132, 199, .2);--secondary: #6366f1;--accent: #f59e0b;--bg-gradient: linear-gradient(180deg, #e0f2fe 0%, #f0f9ff 100%);--bg-surface: #ffffff;--card-bg: rgba(255, 255, 255, .7);--card-border: 1px solid rgba(255, 255, 255, .6);--glass-border: 1px solid rgba(255, 255, 255, .5);--text: #0f172a;--text-dim: #64748b;--high-tide: #0ea5e9;--low-tide: #10b981;--live-red: #ef4444;--shadow-sm: 0 4px 6px -1px rgba(148, 163, 184, .2);--shadow-glow: 0 10px 30px -10px rgba(14, 165, 233, .2)}[data-theme=dawn]{--bg-gradient: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);--primary: #f97316;--text: #431407;--text-dim: #9a3412;--high-tide: #f59e0b}[data-theme=dusk]{--bg-gradient: linear-gradient(180deg, #e0e7ff 0%, #cbf3fe 100%);--primary: #6366f1;--text: #1e1b4b}[data-theme=night]{--bg-gradient: linear-gradient(180deg, #0f172a 0%, #1e293b 100%), url(/assets/backgrounds/stars-pattern.svg);--bg-surface: #1e293b;--card-bg: rgba(30, 41, 59, .7);--card-border: 1px solid rgba(255, 255, 255, .1);--glass-border: 1px solid rgba(255, 255, 255, .1);--text: #f8fafc;--text-dim: #94a3b8;--shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, .5)}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{font-family:Outfit,sans-serif;background:var(--bg-gradient);color:var(--text);min-height:100vh;min-height:100dvh;overflow-x:hidden}.app{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:transparent;position:relative;box-shadow:0 0 50px #0000000d}.header{padding:2rem 1.5rem 1rem;background:transparent}.header h1{font-size:1.75rem;font-weight:600;letter-spacing:-.5px;color:var(--text);background:none;-webkit-text-fill-color:initial;display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem}.subtitle{color:var(--text-dim);font-size:.9rem;font-weight:500}.main{flex:1;padding:.5rem 1.5rem 6rem;display:flex;flex-direction:column;gap:1.5rem}.hero-card{background:#fff9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:var(--glass-border);border-radius:2rem;padding:2rem;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-glow)}.hero-card:before{display:none}.current-label{text-transform:uppercase;letter-spacing:2px;font-size:.75rem;color:var(--primary);font-weight:700;margin-bottom:.5rem}.tide-value{font-size:4.5rem;font-weight:700;line-height:1;color:var(--text);text-shadow:none}.tide-unit{font-size:1.5rem;color:var(--text-dim);font-weight:400}.live-badge{display:inline-flex;align-items:center;gap:.4rem;background:#ef44441a;color:var(--live-red);padding:.35rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:700;margin-top:1rem;border:1px solid rgba(239,68,68,.2)}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.info-card{background:var(--card-bg);border:var(--glass-border);border-radius:1.5rem;padding:1.25rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;box-shadow:var(--shadow-sm)}.info-icon{font-size:1.75rem;margin-bottom:.25rem}.info-title{color:var(--text-dim);font-size:.75rem;text-transform:uppercase;letter-spacing:1px}.info-value{color:var(--text);font-weight:600;font-size:1rem}.chart-card{background:var(--card-bg);border:var(--glass-border);border-radius:1.5rem;padding:1.5rem .5rem .5rem;overflow:hidden;box-shadow:var(--shadow-sm)}.chart-header{padding:0 1.25rem;margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center}.chart-header h3{font-size:1rem;font-weight:600;color:var(--text)}.status-banner{background:#ffffff80;border:var(--glass-border);border-radius:1rem;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;margin-top:-.5rem;box-shadow:var(--shadow-sm)}.status-level{font-size:2rem;font-weight:700;color:var(--text);display:flex;flex-direction:column;line-height:1}.status-arrow{font-size:.75rem;font-weight:600;margin-top:.25rem;text-transform:uppercase;letter-spacing:1px}.status-arrow.rising{color:var(--live-red)}.status-arrow.falling{color:var(--low-tide)}.status-next{text-align:right;font-size:.9rem;color:var(--text-dim)}.section-title{margin-top:1.5rem;margin-bottom:1rem;padding-left:.5rem;color:var(--text-dim);font-size:.9rem;text-transform:uppercase;letter-spacing:1px;font-weight:600}.daily-grid{display:flex;flex-direction:column;gap:.75rem}.daily-card{background:var(--card-bg);border:var(--glass-border);border-radius:1.25rem;padding:.75rem 1rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;box-shadow:var(--shadow-sm);gap:1rem}.date-col{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:60px}.day-name{font-weight:700;color:var(--text);font-size:1rem}.day-date{font-size:.7rem;color:var(--text-dim);text-transform:uppercase}.tide-col{display:flex;align-items:flex-end;gap:.75rem;height:60px}.tide-col.low{justify-content:flex-start;flex-direction:row}.tide-col.high{justify-content:flex-end;flex-direction:row}.tide-info{display:flex;flex-direction:column;justify-content:center;font-size:.8rem}.tide-col.low .tide-info{text-align:left}.tide-col.high .tide-info{text-align:right}.tide-val{font-weight:700;font-size:1.1rem;color:var(--text)}.tide-time{color:var(--text-dim);font-family:monospace}.tide-bar-container{display:flex;align-items:flex-end;height:100%}.tide-bar-fill{width:8px;border-radius:4px;transition:height .3s ease}.tide-col.low .tide-bar-fill{background:linear-gradient(to top,var(--low-tide),rgba(16,185,129,.3))}.tide-col.high .tide-bar-fill{background:linear-gradient(to top,var(--high-tide),rgba(14,165,233,.3))}.compact-list{display:flex;flex-direction:column;gap:.5rem}.tide-grid-header{display:grid;grid-template-columns:1fr 1fr 1fr;padding:0 1rem;margin-bottom:.5rem;font-size:.75rem;text-transform:uppercase;color:var(--text-dim);font-weight:600}.tide-grid-header span:nth-child(2){text-align:center}.tide-grid-header span:nth-child(3){text-align:right}.day-group{background:var(--card-bg);border:var(--glass-border);border-radius:1rem;overflow:hidden;margin-bottom:.5rem;box-shadow:var(--shadow-sm)}.tide-row{display:grid;grid-template-columns:1fr 1fr 1fr;padding:.75rem 1rem;border-bottom:1px solid rgba(0,0,0,.05);align-items:center;font-size:.95rem}.tide-row:last-child{border-bottom:none}.tide-row.high{background:linear-gradient(90deg,rgba(14,165,233,.08),transparent)}.tide-row.low{background:transparent}.col-level{font-weight:700;color:var(--text)}.col-date{text-align:center;color:var(--text-dim);font-size:.85rem}.col-val{text-align:right;font-family:monospace;font-size:1rem;color:var(--text)}.timeline{display:flex;flex-direction:column;gap:1rem}.timeline-item{display:flex;align-items:center;background:var(--card-bg);padding:1rem;border-radius:1.25rem;border:1px solid var(--card-border);transition:transform .2s}.timeline-item:active{transform:scale(.98)}.timeline-time{background:#ffffff0d;padding:.5rem .75rem;border-radius:.75rem;font-weight:600;font-size:.9rem;margin-right:1rem;min-width:70px;text-align:center}.timeline-details{flex:1;display:flex;align-items:center;justify-content:space-between}.timeline-type{font-size:1rem;font-weight:600;display:flex;align-items:center;gap:.5rem}.type-high{color:var(--high-tide)}.type-low{color:var(--low-tide)}.timeline-height{font-weight:700;color:var(--text-dim)}.refresh-btn{position:fixed;bottom:2rem;right:1.5rem;width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));border:none;font-size:1.5rem;color:#fff;box-shadow:0 8px 32px #38bdf866;cursor:pointer;z-index:100;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.refresh-btn:hover{transform:scale(1.1) rotate(180deg);box-shadow:0 12px 48px #38bdf899}.refresh-btn:active{transform:scale(.9)}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes blink{0%,to{opacity:1}50%{opacity:.4}}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.animate-enter{animation:slideUp .5s ease-out forwards}.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}.delay-3{animation-delay:.3s}.loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-deep);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:200}.spinner{width:50px;height:50px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--primary);border-radius:50%;animation:rotate 1s linear infinite}.permission-wall{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;text-align:center;background:var(--bg-deep)}.grant-btn{margin-top:2rem;background:var(--primary);color:#fff;border:none;padding:1rem 2rem;border-radius:2rem;font-weight:600;font-size:1.1rem;cursor:pointer}.daily-weather{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:.25rem;opacity:.8}.daily-temp{font-size:.75rem;font-weight:600;color:var(--text-dim);margin-top:-2px}.search-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-surface);z-index:300;display:flex;flex-direction:column}.search-header{padding:1rem;display:flex;align-items:center;gap:1rem;border-bottom:1px solid var(--card-border);background:#ffffff0d}.search-input{flex:1;background:#0000000d;border:none;padding:.8rem 1rem;border-radius:1rem;font-size:1rem;font-family:inherit;color:var(--text);outline:none}.search-input::placeholder{color:var(--text-dim)}.close-btn{background:none;border:none;font-size:1.5rem;color:var(--text);cursor:pointer;padding:.5rem}.search-results{flex:1;overflow-y:auto;padding:1rem}.search-item{display:flex;align-items:center;gap:1rem;padding:1rem;border-bottom:1px solid rgba(0,0,0,.05);cursor:pointer}.search-item:active{background:#0000000d}.search-icon{font-size:1.5rem}.station-name{font-weight:600;color:var(--text);font-size:1rem}.station-meta{font-size:.8rem;color:var(--text-dim)}.search-spinner{width:30px;height:30px;border:3px solid rgba(0,0,0,.1);border-top-color:var(--primary);border-radius:50%;animation:rotate 1s linear infinite;margin:2rem auto}[data-theme=night] .search-overlay{background:#0f172a}[data-theme=night] .search-input{background:#ffffff1a;color:#fff}[data-theme=night] .search-item{border-bottom:1px solid rgba(255,255,255,.1)}
