/* PicSeas theme + hero art. Layout lives in ../app-page.css. */
:root { --bg: #0c2533; --ink: #eef7fc; --muted: #a9c3d1; --accent: #7fd3f0; --button-bg: #bfe8f7; --button-ink: #0c2533; --line: rgba(238,247,252,.16); --section-bg: #eff7fc; --section-ink: #17374a; --section-muted: #557080; --section-accent: #17668d; --card-bg: #fff; --card-line: #c9dce7; --closing-glow: #16455c; }
.hero { background: radial-gradient(circle at 72% 40%, rgba(40,130,170,.35), transparent 40%); }
.dive-card { width: min(85%, 380px); padding: 16px 16px 22px; border-radius: 26px; background: #f5fbfe; color: #17374a; box-shadow: 0 26px 65px rgba(2,14,22,.4); transform: rotate(-4deg); }
.dive-photo { position: relative; height: 210px; border-radius: 16px; overflow: hidden; background: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.9) 50%, rgba(255,255,255,.9) calc(50% + 2px), transparent calc(50% + 2px)), linear-gradient(90deg, #1d5f79 0 50%, #e98a61 50%); }
.dive-photo::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 75%, rgba(10,50,70,.55), transparent 45%), radial-gradient(ellipse at 72% 70%, rgba(250,190,120,.8), transparent 40%), radial-gradient(circle at 60% 20%, rgba(255,255,255,.35), transparent 30%); }
.dive-photo span { position: absolute; bottom: 12px; padding: 5px 9px; border-radius: 999px; background: rgba(12,37,51,.65); color: #fff; font: 700 9px var(--display); letter-spacing: .12em; }
.dive-photo .before { left: 12px; }
.dive-photo .after { right: 12px; }
.dive-stats { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.dive-stats strong { display: block; font: 700 19px var(--display); letter-spacing: -.03em; }
.dive-stats small { color: #557080; font: 700 9px var(--display); letter-spacing: .12em; }
.share-chip { display: flex; align-items: center; gap: 10px; padding: 12px 18px 12px 12px; border-radius: 22px; background: #17668d; box-shadow: 0 14px 30px rgba(2,14,22,.3); font-size: 14px; font-weight: 600; transform: rotate(3deg); align-self: flex-end; margin-right: 6%; }
.share-chip i { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #7fd3f0; color: #0c2533; font: 700 12px var(--display); font-style: normal; }
@media (max-width: 600px) { .dive-photo { height: 160px; } .dive-stats strong { font-size: 16px; } .share-chip { font-size: 12px; } }