:root{--bg: #FFF8F0;--card-bg: #FFFFFF;--border: 2.5px solid #1a1a2e;--shadow: 4px 4px 0px #1a1a2e;--shadow-hover: 7px 7px 0px #1a1a2e;--text-primary: #1a1a2e;--text-secondary: #6b7280;--good-color: #51D88A;--moderate-color: #FFD93D;--poor-color: #FF6B6B;--color-temp: #FF6B6B;--color-wave: #4ECDC4;--color-wind: #FFD93D;--shadow-temp: 4px 4px 0px #FF6B6B;--shadow-wave: 4px 4px 0px #4ECDC4;--shadow-wind: 4px 4px 0px #FFD93D;--shadow-water: 4px 4px 0px #C084FC;--shadow-temp-hover: 7px 7px 0px #FF6B6B;--shadow-wave-hover: 7px 7px 0px #4ECDC4;--shadow-wind-hover: 7px 7px 0px #FFD93D;--shadow-water-hover: 7px 7px 0px #C084FC}*{box-sizing:border-box;margin:0;padding:0}body{font-family:DM Sans,sans-serif;background:var(--bg);color:var(--text-primary);min-height:100vh;padding:24px 16px;position:relative;overflow-x:hidden}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes badgeBounce{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:20px;color:var(--text-secondary);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}.spinner{width:36px;height:36px;border:3px solid #1a1a2e;border-top-color:#ff6b6b;border-radius:50%;animation:spin .9s linear infinite}.error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:12px;text-align:center}.error>div{background:#ff6b6b;color:#1a1a2e;border:var(--border);box-shadow:var(--shadow);padding:16px 24px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.error p{color:var(--text-secondary);font-size:13px}.app{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:24px}.current-card{background:var(--card-bg);border:var(--border);box-shadow:var(--shadow);padding:24px;animation:fadeInUp .4s ease both}.current-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;gap:12px}.current-header-left{flex:1;min-width:0}.current-title{font-family:DM Sans,sans-serif;font-size:44px;font-weight:700;color:#1a1a2e;line-height:1;letter-spacing:-.02em}.current-time{font-size:13px;color:var(--text-secondary);margin-top:8px;font-weight:500;letter-spacing:.03em}.sun-card{background:#fff8e7!important}.stat-item:nth-child(7){box-shadow:4px 4px #ff8c42;animation:fadeInUp .4s .7s ease both}.stat-item:nth-child(8){box-shadow:4px 4px #c084fc;animation:fadeInUp .4s .8s ease both}.stat-item:nth-child(7):hover{box-shadow:7px 7px #ff8c42;transform:translate(-2px,-2px)}.stat-item:nth-child(8):hover{box-shadow:7px 7px #c084fc;transform:translate(-2px,-2px)}.sun-card .stat-value{font-size:28px;letter-spacing:.02em}.badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}.badge{display:inline-flex;align-items:center;gap:7px;padding:6px 16px;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border:2.5px solid #1a1a2e;box-shadow:var(--shadow);border-radius:24px;color:#1a1a2e;transition:all .18s ease;cursor:default;animation:badgeBounce 3s ease-in-out infinite}.badge:nth-child(2){animation-delay:1.5s}.badge:hover{box-shadow:var(--shadow-hover);transform:translate(-2px,-2px)}.badge.good{background:#51d88a}.badge.moderate{background:#ffd93d}.badge.poor{background:#ff6b6b}.badge-dot{width:8px;height:8px;border-radius:50%;background:#1a1a2e;flex-shrink:0}.stats-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.stat-item{border:var(--border);padding:16px;transition:all .18s ease;position:relative;background:var(--card-bg);overflow:hidden}.stat-item:nth-child(1){box-shadow:var(--shadow-temp);animation:fadeInUp .4s .1s ease both}.stat-item:nth-child(2){box-shadow:var(--shadow-wave);animation:fadeInUp .4s .2s ease both}.stat-item:nth-child(3){box-shadow:var(--shadow-wind);animation:fadeInUp .4s .3s ease both}.stat-item:nth-child(4){box-shadow:var(--shadow-water);animation:fadeInUp .4s .4s ease both}.stat-item:nth-child(5){box-shadow:4px 4px #4ecdc4;animation:fadeInUp .4s .5s ease both}.stat-item:nth-child(6){box-shadow:4px 4px #ffd93d;animation:fadeInUp .4s .6s ease both}.stat-item:nth-child(1):hover{box-shadow:var(--shadow-temp-hover);transform:translate(-2px,-2px)}.stat-item:nth-child(2):hover{box-shadow:var(--shadow-wave-hover);transform:translate(-2px,-2px)}.stat-item:nth-child(3):hover{box-shadow:var(--shadow-wind-hover);transform:translate(-2px,-2px)}.stat-item:nth-child(4):hover{box-shadow:var(--shadow-water-hover);transform:translate(-2px,-2px)}.stat-item:nth-child(5):hover{box-shadow:7px 7px #4ecdc4;transform:translate(-2px,-2px)}.stat-item:nth-child(6):hover{box-shadow:7px 7px #ffd93d;transform:translate(-2px,-2px)}.stat-label{font-size:13px;color:var(--text-secondary);letter-spacing:.09em;text-transform:uppercase;margin-bottom:6px;font-weight:600}.stat-value{font-size:36px;font-weight:700;color:#1a1a2e;line-height:1;letter-spacing:-.02em}.stat-value-unit{font-size:16px;font-weight:600;color:#1a1a2e}.stat-sub{font-size:13px;color:var(--text-secondary);margin-top:4px;font-weight:500}.timeline-section{background:var(--card-bg);border:var(--border);box-shadow:var(--shadow);padding:24px;animation:fadeInUp .4s .5s ease both}.timeline-title{font-size:15px;font-weight:700;color:#1a1a2e;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}.graph-container{position:relative;width:100%}.graph-legend{display:flex;gap:16px;margin-bottom:12px;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.06em}.legend-swatch{width:10px;height:10px;border-radius:50%;border:2px solid #1a1a2e;flex-shrink:0}.legend-swatch.temp{background:#ff6b6b}.legend-swatch.wave{background:#4ecdc4}.legend-swatch.wind{background:#ffd93d}.graph-svg-wrapper{position:relative;width:100%;border:var(--border);box-shadow:var(--shadow);background:#fff}.graph-svg-wrapper svg{display:block;width:100%;overflow:visible}.graph-tooltip{position:absolute;pointer-events:none;background:#fff;border:2.5px solid #1a1a2e;box-shadow:4px 4px #1a1a2e;border-radius:8px;padding:10px 12px;min-width:150px;z-index:10;display:none}.graph-tooltip.visible{display:block}.tooltip-time{font-size:13px;color:#1a1a2e;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;padding-bottom:6px;border-bottom:2px solid #1a1a2e;font-weight:700}.tooltip-row{display:flex;justify-content:space-between;gap:16px;font-size:13px;margin-top:4px}.tooltip-label{color:var(--text-secondary);font-weight:500}.tooltip-val{color:#1a1a2e;font-weight:700}.tooltip-condition{margin-top:8px;padding-top:6px;border-top:2px solid #1a1a2e}.tooltip-condition-row{display:flex;justify-content:space-between;gap:16px;font-size:13px;margin-top:3px;letter-spacing:.06em;text-transform:uppercase}.tooltip-condition-label{color:var(--text-secondary);font-weight:500}.tooltip-condition-val{font-weight:700;padding:1px 8px;border:2px solid #1a1a2e;border-radius:4px;font-size:13px}.tooltip-condition-val.good{background:#51d88a;color:#1a1a2e}.tooltip-condition-val.moderate{background:#ffd93d;color:#1a1a2e}.tooltip-condition-val.poor{background:#ff6b6b;color:#1a1a2e}.condition-bar-wrapper{margin-top:12px}.condition-bar-label{font-size:13px;color:var(--text-secondary);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px;font-weight:600}.condition-bar{display:flex;overflow:hidden;border:2px solid #1a1a2e;border-radius:4px}.condition-segment{height:6px;flex:1}.condition-segment.good{background:#51d88a}.condition-segment.moderate{background:#ffd93d}.condition-segment.poor{background:#ff6b6b}.water-temp-card{position:relative;overflow:visible!important}.wetsuit-trigger{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:2px solid #1a1a2e;font-size:11px;font-weight:700;color:#1a1a2e;background:#ffd93d;cursor:pointer;vertical-align:middle;margin-left:4px;line-height:1;transition:all .15s ease}.wetsuit-trigger:hover,.wetsuit-trigger:focus{background:#ff8c42;transform:scale(1.1);outline:none}.wetsuit-popover{display:none;position:absolute;bottom:calc(100% + 8px);left:0;right:0;background:#fff;border:2.5px solid #1a1a2e;box-shadow:4px 4px #1a1a2e;padding:12px;z-index:20}.wetsuit-popover.open{display:block}.wetsuit-popover-title{font-size:13px;font-weight:700;color:#1a1a2e;margin-bottom:8px;padding-bottom:6px;border-bottom:2px solid #1a1a2e;text-transform:uppercase;letter-spacing:.06em}.wetsuit-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:#1a1a2e}.wetsuit-row span:first-child{color:var(--text-secondary);font-weight:500}.wetsuit-row span:last-child{font-weight:600}.sunrise-card{background:#fff8e7;border:var(--border);box-shadow:4px 4px #ff8c42;padding:24px;animation:fadeInUp .4s .6s ease both}.sunrise-card:hover{box-shadow:7px 7px #ff8c42;transform:translate(-2px,-2px);transition:all .18s ease}.sunrise-header{margin-bottom:16px}.sunrise-title{font-size:22px;font-weight:700;color:#1a1a2e;line-height:1}.sunrise-time{font-size:14px;color:#ff8c42;margin-top:6px;font-weight:600;letter-spacing:.03em}.sunrise-badges{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.sunrise-card .stats-grid{gap:10px}.sunrise-card .stat-item{background:#fff}.sunrise-card .stat-item:nth-child(1){box-shadow:3px 3px #ff6b6b}.sunrise-card .stat-item:nth-child(2){box-shadow:3px 3px #4ecdc4}.sunrise-card .stat-item:nth-child(3){box-shadow:3px 3px #ffd93d}.sunrise-card .stat-item:nth-child(4){box-shadow:3px 3px #c084fc}@media(max-width:480px){body{padding:16px 12px}.current-title{font-size:34px}.stat-value{font-size:30px}.app{gap:16px}.current-card,.timeline-section{padding:16px}.stats-grid{grid-template-columns:1fr 1fr}}@media(min-width:481px){body{padding:32px 24px}}