:root {
  --bg:#eaf4f8;
  --card:#ffffff;
  --text:#15384f;
  --muted:#6a8192;
  --line:#dbe6ed;
  --primary:#0a8ddc;
  --primary-dark:#0b5f8f;
  --primary-soft:#dff3ff;
  --accent:#1fc6b5;
  --warning:#ffd663;
  --danger:#e35e7e;
  --shadow:0 16px 44px rgba(16, 61, 90, .10);
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:18px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic",sans-serif;background:linear-gradient(180deg,#edf5f8 0%,#f7fafc 100%);color:var(--text)}
button,input{font:inherit} button{background:none;border:none;cursor:pointer;color:inherit} img{display:block;max-width:100%}
.ocean-scene{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:radial-gradient(circle at 15% 10%, rgba(10,141,220,.08), transparent 18%),radial-gradient(circle at 84% 15%, rgba(31,198,181,.08), transparent 22%),linear-gradient(180deg,#eef5f8 0%,#f8fbfd 100%)}
.wave-layer{position:absolute;left:-10%;width:120%;height:220px;background-repeat:repeat-x;background-size:1200px 220px;opacity:.9}
.wave-back{bottom:0;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220'%3E%3Cpath fill='%23dceef4' d='M0,150 C120,126 220,176 350,160 C487,143 570,102 700,110 C847,119 935,176 1200,130 L1200,220 L0,220 Z'/%3E%3C/svg%3E");animation:wave 18s linear infinite}
.wave-mid{bottom:-10px;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220'%3E%3Cpath fill='%23eff8fb' d='M0,134 C141,100 225,179 364,171 C472,165 565,107 686,101 C826,95 923,167 1200,118 L1200,220 L0,220 Z'/%3E%3C/svg%3E");animation:wave 14s linear infinite reverse}
.wave-front{bottom:-22px;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220'%3E%3Cpath fill='%23ffffff' d='M0,128 C116,97 222,151 339,151 C456,152 565,102 685,94 C850,83 969,168 1200,124 L1200,220 L0,220 Z'/%3E%3C/svg%3E");animation:wave 9s linear infinite}
@keyframes wave{from{transform:translateX(0)}to{transform:translateX(-180px)}}
.bg-fish{position:absolute;color:rgba(10,141,220,.10)}
.fish-one{top:18%;right:10%;width:170px;animation:swimA 26s ease-in-out infinite}
.fish-two{top:38%;left:8%;width:120px;animation:swimB 24s ease-in-out infinite}
@keyframes swimA{0%,100%{transform:translateX(0)}50%{transform:translateX(-30px)}}
@keyframes swimB{0%,100%{transform:translateX(0)}50%{transform:translateX(22px)}}
.loading-screen{position:fixed;inset:0;background:linear-gradient(180deg,#0e5c83 0%,#0d84bc 55%,#5fc8e8 100%);z-index:100;display:grid;place-items:center;overflow:hidden;transition:opacity .45s ease, visibility .45s ease}
.loading-screen.is-hidden{opacity:0;visibility:hidden}
.loading-screen__inner{position:relative;z-index:2;text-align:center;color:#fff;padding:24px}
.loading-logo{width:min(380px, 82vw);margin:0 auto 18px}
.loader-mark{width:140px;height:140px;margin:0 auto 18px;border-radius:999px;background:rgba(255,255,255,.10);display:grid;place-items:center;position:relative;backdrop-filter:blur(8px);box-shadow:0 30px 60px rgba(0,0,0,.18)}
.loader-mark svg{width:86px;color:#fff}
.loader-bubbles span{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);animation:bubble 2.8s linear infinite}
.loader-bubbles span:nth-child(1){width:12px;height:12px;left:36px;bottom:28px;animation-delay:0s}
.loader-bubbles span:nth-child(2){width:9px;height:9px;left:58px;bottom:18px;animation-delay:.5s}
.loader-bubbles span:nth-child(3){width:14px;height:14px;left:80px;bottom:34px;animation-delay:1s}
@keyframes bubble{0%{transform:translateY(0) scale(.7);opacity:0}20%{opacity:1}100%{transform:translateY(-70px) scale(1.2);opacity:0}}
.loading-screen p{margin:0;font-size:14px;letter-spacing:.08em;font-weight:600;color:rgba(255,255,255,.88)}
.loading-wave{position:absolute;left:-5%;width:110%;height:220px;background-repeat:repeat-x;background-size:1200px 220px;opacity:.6}
.loading-wave.wave-a{bottom:-20px;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220'%3E%3Cpath fill='rgba(255,255,255,0.28)' d='M0,120 C105,88 223,154 352,147 C487,139 596,71 718,78 C894,88 1042,177 1200,122 L1200,220 L0,220 Z'/%3E%3C/svg%3E");animation:wave 12s linear infinite}
.loading-wave.wave-b{bottom:-42px;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 220'%3E%3Cpath fill='rgba(255,255,255,0.18)' d='M0,130 C124,104 233,176 383,159 C488,148 593,100 707,104 C850,109 960,181 1200,133 L1200,220 L0,220 Z'/%3E%3C/svg%3E");animation:wave 8s linear infinite reverse}
.app-shell{position:relative;z-index:1;max-width:960px;margin:0 auto;padding-bottom:96px}
.app-header{padding:18px 16px 8px}.header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.brand-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:var(--shadow);font-weight:700;color:var(--primary-dark)}.brand-mark{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent))}.version-badge{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.65);color:var(--muted);font-size:12px;font-weight:700;box-shadow:var(--shadow)}
.hero-logo{width:min(100%, 560px);border-radius:28px;box-shadow:var(--shadow)}
.hero-title{padding:16px 4px 6px}.hero-title h1{margin:8px 0 10px;font-size:clamp(28px,6vw,40px);line-height:1.15;font-weight:800;letter-spacing:-.02em}.hero-title p{margin:0;color:var(--muted);line-height:1.75;font-weight:500;max-width:720px}.eyebrow{margin:0;color:#5b92b1;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.app-main{padding:0 14px 22px}.page{display:none;animation:fade .25s ease}.page.is-active{display:block}@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.card,.hero-card,.action-card,.stamp-card,.dialog-content,.aqua-card{background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.88);box-shadow:var(--shadow)}
.card,.hero-card{border-radius:var(--radius-xl);padding:20px;margin-bottom:14px}.hero-card{display:flex;justify-content:space-between;gap:18px;align-items:center;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(247,251,252,.94))}.hero-card h2{margin:8px 0 10px;font-size:36px;line-height:1.1}.hero-card p{margin:0;color:var(--muted);line-height:1.7}
.progress-ring{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--primary) var(--progress, 0deg), #e7f0f5 0deg);position:relative;font-weight:800;color:var(--primary-dark)}.progress-ring::before{content:"";position:absolute;inset:10px;background:#fff;border-radius:50%}.progress-ring span{position:relative;z-index:1;font-size:22px}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.action-card{padding:18px;border-radius:28px;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;text-align:left}.primary-action{background:linear-gradient(135deg,#0b79b4,#11a5db);color:#fff}.action-icon{width:48px;height:48px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.14)}.primary-action .action-icon{background:rgba(255,255,255,.20)}.action-icon svg,.nav-icon svg{width:24px;height:24px}.action-card strong{display:block;font-size:16px;margin-bottom:6px}.action-card small{display:block;font-size:13px;color:inherit;opacity:.74}
.location-pill{padding:13px 16px;border-radius:999px;background:rgba(255,255,255,.86);box-shadow:var(--shadow);font-weight:600;color:var(--text);margin:0 0 14px}
.section-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:14px}.section-head h2{margin:6px 0 0;font-size:28px;line-height:1.2}.text-button{padding:8px 0;color:var(--primary);font-weight:700}.empty-box{padding:18px;border-radius:20px;border:1px dashed #cbdbe5;background:#f8fbfc;color:var(--muted)}
.home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat-card{padding:18px;border-radius:28px;text-align:left}.stat-card p{margin:0 0 8px;color:var(--muted);font-size:14px}.stat-card strong{font-size:32px;letter-spacing:-.03em}
.filter-row{display:flex;gap:8px;overflow:auto;margin-bottom:10px;padding-bottom:4px}.filter-button{white-space:nowrap;padding:11px 16px;border-radius:999px;background:#f3f7fa;color:var(--muted);font-weight:700;border:1px solid #e2ebf0}.filter-button.is-active{background:#0f6f99;color:#fff;border-color:#0f6f99;box-shadow:0 10px 24px rgba(10,141,220,.22)}
#aquariumList{display:grid;gap:14px}.aqua-card{border-radius:28px;overflow:hidden}.aqua-card__image{width:100%;aspect-ratio:16/9;object-fit:cover;background:#c9dfe8}.aqua-card__body{padding:18px}.aqua-card__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}.aqua-card__head h3{margin:0;font-size:24px}.muted{color:var(--muted);line-height:1.7;font-size:14px}.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700;background:#eff6fa;color:var(--primary-dark);border:1px solid #dde8ef}.accent-badge{background:#e8f8fb;color:#0b6e99}.aqua-metrics{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.metric-chip{padding:8px 12px;border-radius:999px;background:#f5f9fb;color:var(--muted);font-size:13px;border:1px solid #e0e9ef}.aqua-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.primary-button,.secondary-button,.danger-button,.ghost-button,.fav-toggle{padding:14px 16px;border-radius:999px;font-weight:700;text-align:center}.primary-button{background:#0f6f99;color:#fff}.primary-button[disabled]{background:#d6e4eb;color:#8aa1af}.secondary-button{background:#eef4f7;color:var(--text);border:1px solid #dfebf1}.danger-button{background:#fdf1f5;color:var(--danger);border:1px solid #f7d3df}.ghost-button{background:transparent;color:var(--primary);border:1px solid #d8e7ef}.fav-toggle{background:#fff;border:1px solid #dbe8ef;color:var(--muted)}.fav-toggle.is-active{background:#fff6f9;color:#d54c71;border-color:#f3c3d2}
.stamp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stamp-card{position:relative;border-radius:24px;padding:16px;text-align:center}.stamp-card.is-empty{opacity:.58}.stamp-mark{width:110px;height:110px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;border:6px solid #0f6f99;color:#0f6f99;font-size:13px;font-weight:800;letter-spacing:.08em;transform:rotate(-8deg)}.stamp-card.is-empty .stamp-mark{border-style:dashed;border-color:#bfcfd9;color:#9aafbd}.stamp-name{font-size:16px;font-weight:700;margin-bottom:6px}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));width:min(460px,calc(100% - 24px));padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;border-radius:30px;background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.92);box-shadow:0 16px 50px rgba(13,61,90,.20);backdrop-filter:blur(18px);z-index:10}.nav-button{padding:10px 6px;border-radius:22px;display:grid;justify-items:center;gap:4px;color:#7c91a0;font-size:12px;font-weight:700}.nav-button.is-active{background:#eef5f8;color:var(--primary-dark)}
.profile-summary{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.summary-item{padding:16px;border-radius:22px;background:#f7fafc;border:1px solid #e3edf2}.summary-item p{margin:0 0 6px;color:var(--muted);font-size:13px}.summary-item strong{font-size:26px}
.title-list,.favorite-list,.ranking-list,.reward-panel{display:grid;gap:10px}.title-chip,.favorite-item,.ranking-item,.reward-item{padding:16px;border-radius:20px;background:#f8fbfd;border:1px solid #e3edf2}.title-chip strong,.favorite-item strong,.ranking-item strong,.reward-item strong{display:block;font-size:16px;margin-bottom:6px}
.discovery-summary{display:grid;grid-template-columns:1.2fr 1fr;gap:10px}.discovery-panel{padding:18px;border-radius:24px;background:#f8fbfd;border:1px solid #e3edf2}.discovery-percent{font-size:42px;font-weight:800;letter-spacing:-.04em}
.dialog{width:min(860px,calc(100% - 24px));border:none;border-radius:30px;padding:0;box-shadow:0 40px 90px rgba(0,0,0,.28)}.dialog::backdrop{background:rgba(13,61,90,.38);backdrop-filter:blur(6px)}.dialog-content{position:relative;padding:18px;border-radius:30px;background:#fff}.dialog-close{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;background:#eff5f8;font-size:24px;color:var(--text)}.detail-hero{border-radius:22px;overflow:hidden;margin-bottom:18px}.detail-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#d3e5ed}.detail-title{margin:0 54px 8px 0;font-size:32px;line-height:1.2}.detail-copy{margin:0 0 14px;color:var(--muted);line-height:1.8}.detail-top-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-bottom:16px}.detail-panel{padding:16px;border-radius:22px;background:#f8fbfd;border:1px solid #e3edf2}.detail-panel h3{margin:0 0 10px;font-size:16px}.detail-list{display:grid;gap:8px}.detail-list li{list-style:none;color:var(--muted);line-height:1.6}.species-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.species-item{padding:14px;border-radius:20px;background:#f8fbfd;border:1px solid #e3edf2}.species-item h4{margin:0 0 8px;font-size:16px}.species-item p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}.species-item__foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px}.mini-button{padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700;background:#fff;border:1px solid #dbe8ef}.mini-button.is-active{background:#fff6f9;color:#d54c71;border-color:#f3c3d2}.map-card{margin-top:12px;border-radius:22px;overflow:hidden;background:#f8fbfd;border:1px solid #e3edf2}.map-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#d3e5ed}.map-card__body{padding:14px}.dialog-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:18px}.link-button{display:inline-flex;justify-content:center;align-items:center;padding:14px 16px;border-radius:999px;background:#eef4f7;color:var(--text);border:1px solid #e0e9ef;text-decoration:none;font-weight:700}
.stamp-animation{position:fixed;inset:0;background:rgba(10,30,45,.42);backdrop-filter:blur(6px);display:none;place-items:center;z-index:50}.stamp-animation.is-active{display:grid}.stamp-stage{width:min(360px,calc(100% - 28px));padding:24px;border-radius:32px;background:#fff;text-align:center;position:relative;overflow:hidden;box-shadow:0 34px 72px rgba(0,0,0,.24)}.stamp-message{font-weight:700;color:var(--muted);margin-bottom:16px}.stamp-tool{width:122px;height:150px;margin:0 auto;animation:stampDrop 1.4s cubic-bezier(.2,.9,.2,1) both}.stamp-handle{width:56px;height:72px;margin:0 auto;border-radius:18px 18px 12px 12px;background:linear-gradient(180deg,#1fb6e9,#0b6d99)}.stamp-base{width:122px;height:52px;margin-top:-6px;border-radius:20px;background:#0c4765}.stamp-paper{margin:16px auto 0;width:220px;height:170px;border-radius:26px;background:#f7fafc;border:1px solid #e3edf2;display:grid;place-items:center}.stamp-result{width:126px;height:126px;border-radius:50%;border:8px solid #0f6f99;color:#0f6f99;font-size:14px;font-weight:800;display:grid;place-items:center;transform:rotate(-8deg) scale(.2);opacity:0}.stamp-animation.is-active .stamp-result{animation:stampReveal 1.4s ease both}.stamp-result small{display:block;font-size:11px;color:var(--muted)}.confetti-wrap{position:absolute;inset:0;pointer-events:none}.confetti{position:absolute;left:50%;top:50%;width:10px;height:18px;border-radius:4px;opacity:0;animation:confettiFly .95s ease-out forwards}
@keyframes stampDrop{0%{transform:translateY(-140px) rotate(-8deg)}42%{transform:translateY(82px) rotate(2deg)}54%{transform:translateY(62px) scaleY(.94)}75%{transform:translateY(76px)}100%{transform:translateY(-18px) rotate(5deg)}}
@keyframes stampReveal{0%,38%{transform:rotate(-8deg) scale(.2);opacity:0}52%{transform:rotate(-8deg) scale(1.16);opacity:1}100%{transform:rotate(-8deg) scale(1);opacity:1}}
@keyframes confettiFly{0%{transform:translate(-50%,-50%) rotate(0) scale(.3);opacity:1}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r));opacity:0}}
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(18px);bottom:100px;width:min(360px,calc(100% - 34px));padding:14px 16px;border-radius:999px;background:rgba(14,70,102,.95);color:#fff;font-weight:700;text-align:center;opacity:0;pointer-events:none;transition:.22s;box-shadow:0 18px 44px rgba(0,0,0,.24);z-index:70}.toast.is-active{opacity:1;transform:translateX(-50%) translateY(0)}
@media (max-width: 720px){.detail-top-grid,.discovery-summary{grid-template-columns:1fr}.profile-summary,.home-grid,.quick-actions,.species-grid,.dialog-actions,.aqua-actions{grid-template-columns:1fr}.stamp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-card{align-items:flex-start;flex-direction:column}.progress-ring{width:96px;height:96px}}
@media (min-width: 721px){.stamp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* v0.8 refinement */
.detail-section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.detail-section-title h3 {
  margin: 0 0 4px;
}
.mini-link {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 999px;
  background: #eef4f7;
  color: var(--primary-dark);
  border: 1px solid #dbe8ef;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
}
.species-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.species-item {
  transition: transform .18s ease, box-shadow .18s ease;
}
.species-item:active {
  transform: scale(.985);
}
.reward-item {
  position: relative;
  overflow: hidden;
}
.reward-item::after {
  content: "";
  position: absolute;
  inset: auto -20% -30% auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31,198,181,.18), transparent 68%);
}
.loading-screen__inner {
  transform: translateY(-8px);
}
.loading-logo {
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.18));
}
@media (max-width: 720px) {
  .detail-section-title {
    display: block;
  }
  .mini-link {
    margin-top: 10px;
  }
  .species-grid {
    grid-template-columns: 1fr;
  }
}

/* v0.9 official image replacement structure */
.species-item.has-image {
  overflow: hidden;
  padding: 0;
}
.species-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #d7e6ee;
}
.species-thumb--placeholder {
  display: grid;
  place-items: center;
  color: #9caeba;
  font-size: 12px;
  letter-spacing: .18em;
  font-weight: 800;
  background:
    linear-gradient(135deg, rgba(15,111,153,.08), rgba(31,198,181,.08)),
    #f3f8fb;
}
.species-item__body {
  padding: 14px;
}
.official-replace-note {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #f7fafc;
  border: 1px dashed #cadbe5;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.official-replace-note strong,
.official-replace-note span {
  display: block;
}
.official-replace-note strong {
  color: var(--text);
  margin-bottom: 4px;
}

/* v1.1 UI / typography refinement */
:root {
  --text: #18384d;
  --muted: #6d8190;
  --primary-dark: #0c5e86;
  --shadow: 0 14px 34px rgba(16, 61, 90, .095);
}

body {
  font-size: 14px;
  letter-spacing: .01em;
}

.app-header {
  padding-top: 16px;
}

.hero-wordmark {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 26px 24px 24px;
  background:
    radial-gradient(circle at 78% 20%, rgba(31,198,181,.18), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(235,246,250,.94));
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: var(--shadow);
}

.hero-wordmark::after {
  content: "";
  position: absolute;
  right: -26px;
  bottom: -44px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 1px solid rgba(10,141,220,.18);
  box-shadow: inset 0 0 0 18px rgba(10,141,220,.04);
}

.hero-wordmark span {
  display: block;
  color: #0f7da7;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.hero-wordmark strong {
  position: relative;
  z-index: 1;
  display: block;
  font-size: clamp(31px, 7.8vw, 52px);
  line-height: 1.03;
  font-weight: 900;
  letter-spacing: -.055em;
  color: #12384f;
}

.hero-wordmark em {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 12px;
  color: #6d8190;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
}

.hero-title {
  padding-top: 14px;
}

.hero-title h1 {
  font-size: clamp(24px, 5.4vw, 34px);
  letter-spacing: -.04em;
  margin-bottom: 8px;
}

.hero-title p {
  font-size: 14px;
  line-height: 1.65;
}

.hero-card h2 {
  font-size: clamp(28px, 8vw, 34px);
}

.section-head h2 {
  font-size: 23px;
  letter-spacing: -.03em;
}

.aqua-card__head h3 {
  font-size: 20px;
  letter-spacing: -.03em;
}

.detail-title {
  font-size: 26px;
}

.card,
.hero-card {
  padding: 17px;
}

.stat-card {
  padding: 15px;
}

.stat-card p {
  font-size: 12px;
}

.stat-card strong {
  font-size: 24px;
  line-height: 1.2;
}

.active-title-card {
  grid-column: 1 / -1;
}

.active-title-card strong {
  font-size: 20px;
}

.action-card {
  padding: 15px;
}

.action-card strong {
  font-size: 15px;
}

.action-card small,
.muted,
.detail-copy,
.species-item p {
  font-size: 13px;
}

.badge,
.metric-chip,
.filter-button {
  font-size: 12px;
}

.stamp-mark {
  width: 96px;
  height: 96px;
  font-size: 12px;
}

.stamp-name {
  font-size: 14px;
}

/* v1.1 loading screen refinement */
.loader-brand {
  text-align: center;
  margin-bottom: 24px;
}

.loader-brand span {
  display: block;
  color: rgba(255,255,255,.66);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.loader-brand strong {
  display: block;
  color: #fff;
  font-size: clamp(34px, 10vw, 54px);
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: 900;
}

.loader-orbit {
  width: 132px;
  height: 132px;
  margin: 0 auto 22px;
  border-radius: 50%;
  position: relative;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), rgba(255,255,255,.04) 54%, transparent 55%),
    rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
  box-shadow: 0 28px 60px rgba(0,0,0,.18);
}

.loader-orbit::before,
.loader-orbit::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.20);
}

.loader-orbit::after {
  inset: 36px;
  border-color: rgba(255,255,255,.14);
}

.orbit-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(135deg, #ffffff, #bcefff);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

.orbit-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px;
  border-radius: 50%;
  background: #fff;
  animation: orbit 2.6s linear infinite;
}

.dot-a { animation-duration: 2.4s; background: #ffffff; }
.dot-b { animation-duration: 3.2s; animation-delay: -.8s; background: #8be8ff; }
.dot-c { animation-duration: 4.1s; animation-delay: -1.4s; background: #ffd663; }

@keyframes orbit {
  from { transform: rotate(0deg) translateX(54px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(54px) rotate(-360deg); }
}

.loading-screen p {
  font-size: 13px;
  letter-spacing: .14em;
}

/* title system */
.active-title-panel {
  margin-bottom: 12px;
  padding: 15px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 90% 10%, rgba(31,198,181,.18), transparent 28%),
    linear-gradient(135deg, #f7fbfd, #ffffff);
  border: 1px solid #e3edf2;
}

.active-title-panel span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
}

.active-title-panel strong {
  display: block;
  font-size: 22px;
  color: var(--text);
  letter-spacing: -.03em;
}

.title-chip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.title-chip.is-active {
  border-color: rgba(10,141,220,.35);
  background: linear-gradient(135deg, #eef9ff, #ffffff);
}

.title-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.title-button {
  padding: 8px 11px;
  border-radius: 999px;
  background: #eef4f7;
  color: var(--primary-dark);
  border: 1px solid #dbe8ef;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.title-button.remove {
  color: #bf4f6b;
  background: #fff3f6;
  border-color: #f4d3dc;
}

.journey-note {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .home-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-wordmark {
    padding: 22px 20px 21px;
  }

  .title-chip {
    grid-template-columns: 1fr;
  }

  .title-actions {
    justify-content: flex-start;
  }
}


/* v1.2 UI refresh */
body{font-size:13px}
.hero-wordmark{padding:24px 22px 22px;background:radial-gradient(circle at 86% 16%, rgba(31,198,181,.16), transparent 26%),linear-gradient(135deg, rgba(255,255,255,.98), rgba(240,248,252,.96));border-radius:32px;box-shadow:0 20px 40px rgba(17,70,102,.10)}
.hero-wordmark::before{content:"";position:absolute;left:20px;top:20px;width:44px;height:2px;background:linear-gradient(90deg,var(--primary),transparent)}
.hero-wordmark::after{right:-24px;bottom:-56px;width:160px;height:160px;opacity:.9}
.hero-wordmark span{font-size:11px;letter-spacing:.22em;margin-bottom:10px;color:#1982aa}
.hero-wordmark strong{font-size:clamp(24px,6.6vw,38px);line-height:1.18;letter-spacing:.02em;font-weight:800}
.hero-wordmark em{font-size:11px;letter-spacing:.14em;margin-top:10px}
.hero-title{padding:16px 6px 4px}
.hero-title h1{font-size:clamp(22px,5vw,30px);line-height:1.28;margin:6px 0 8px;letter-spacing:-.03em}
.hero-title p{font-size:13px;line-height:1.8;max-width:34em}
.top-highlights{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.top-highlights span{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid #e3edf2;color:#436072;font-size:12px;font-weight:700;box-shadow:0 10px 24px rgba(16,61,90,.05)}
.hero-card{padding:18px 18px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(244,250,252,.94))}
.hero-card h2{font-size:30px;margin:6px 0 8px}
.progress-ring{width:96px;height:96px}
.progress-ring span{font-size:18px}
.section-head h2{font-size:20px}
.page-subcopy{margin:8px 0 0;color:var(--muted);font-size:13px;line-height:1.7}
.loading-screen{background:linear-gradient(180deg,#0e5578 0%,#0d77a9 54%,#71d4ea 100%)}
.loader-brand strong{font-size:clamp(30px,8vw,46px);letter-spacing:-.04em}
.loader-brand span{font-size:11px;letter-spacing:.22em}
.loader-orbit{width:116px;height:116px}
.orbit-core{width:40px;height:40px}
@keyframes orbit {from { transform: rotate(0deg) translateX(46px) rotate(0deg); } to { transform: rotate(360deg) translateX(46px) rotate(-360deg); }}
.aquarium-page-hero{background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(247,251,252,.98));position:relative;overflow:hidden}
.aquarium-page-hero::after{content:"";position:absolute;right:-32px;top:-32px;width:128px;height:128px;border-radius:50%;background:radial-gradient(circle, rgba(10,141,220,.12), transparent 66%)}
#aquariumList{display:grid;gap:16px}
.aqua-card{overflow:hidden;border-radius:28px;background:#fff;border:1px solid rgba(255,255,255,.95);box-shadow:0 18px 38px rgba(16,61,90,.10)}
.aqua-card__visual{position:relative}
.aqua-card__image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#cae0e9}
.aqua-card__overlay{position:absolute;left:14px;right:14px;top:14px;display:flex;justify-content:space-between;gap:8px;align-items:flex-start;flex-wrap:wrap}
.badge--glass{background:rgba(19,56,79,.42);border-color:rgba(255,255,255,.2);backdrop-filter:blur(8px);color:#fff}
.aqua-card__body{padding:16px 16px 18px}
.aqua-card__headline{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:10px}
.aqua-card__headline h3{margin:0;font-size:20px;line-height:1.3;letter-spacing:-.02em}
.aqua-card__tagline{margin:6px 0 0;color:#4b738b;font-size:12px;font-weight:700;line-height:1.6}
.aqua-card__desc{margin:0 0 14px;color:var(--muted);font-size:13px;line-height:1.72}
.status-pill{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:9px 12px;border-radius:999px;font-size:11px;font-weight:800;border:1px solid #dbe8ef;background:#f5fafc;color:#557485}
.status-pill.ready{background:#eff8ff;color:#116d9c;border-color:#cfe7f4}
.status-pill.done{background:#eefaf6;color:#14855b;border-color:#d1f0e1}
.aqua-metrics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.aqua-metrics--compact{margin-top:2px}
.metric-chip{padding:7px 11px;border-radius:999px;background:#f6fafc;border:1px solid #e0eaef;color:#5b7483;font-size:12px;font-weight:700}
.metric-chip--accent{background:#eff8ff;color:#0f6f99;border-color:#d7eaf4}
.aqua-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.primary-button,.secondary-button{padding:13px 14px;font-size:13px}
.primary-button{background:#143f59}
.secondary-button{background:#f6fafc}
.filter-row{gap:10px;margin-bottom:14px}
.filter-button{padding:10px 14px;background:#f8fbfd;font-size:12px}
.filter-button.is-active{background:#143f59;border-color:#143f59}
.location-pill{font-size:12px;padding:12px 15px}
.stat-card strong{font-size:22px}
.active-title-card strong{font-size:18px}
.dialog-content{padding:16px}
.detail-title{font-size:24px;line-height:1.35}
@media (max-width:720px){
  .hero-wordmark strong{font-size:28px;line-height:1.22}
  .top-highlights{gap:7px}
  .top-highlights span{padding:7px 11px;font-size:11px}
  .aqua-card__headline{flex-direction:column}
  .status-pill{align-self:flex-start}
}


/* v1.3 animation refresh */
.stamp-animation{background:rgba(8,27,40,.34);backdrop-filter:blur(14px)}
.stamp-stage{width:min(360px,calc(100% - 30px));padding:26px 24px 24px;border-radius:34px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,250,252,.96));text-align:center;position:relative;overflow:hidden;box-shadow:0 34px 72px rgba(0,0,0,.20)}
.stamp-stage::before{content:"";position:absolute;inset:auto -15% -42% -15%;height:160px;background:radial-gradient(circle at 50% 0%, rgba(31,198,181,.18), transparent 60%)}
.stamp-glow{position:absolute;left:50%;top:54%;width:220px;height:220px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle, rgba(10,141,220,.16), rgba(31,198,181,.08) 40%, transparent 68%);filter:blur(8px);opacity:.9}
.stamp-message{position:relative;z-index:2;font-weight:800;letter-spacing:.04em;color:#5f7989;margin-bottom:16px;font-size:13px}
.stamp-tool{position:relative;z-index:2;width:122px;height:154px;margin:0 auto;transform-origin:50% 92%;animation:stampDropSmooth 1.65s cubic-bezier(.18,.82,.24,1) both}
.stamp-handle{width:52px;height:72px;margin:0 auto;border-radius:18px 18px 12px 12px;background:linear-gradient(180deg,#2bc8eb,#0c7cae);box-shadow:inset 0 -8px 14px rgba(0,0,0,.12),0 14px 28px rgba(15,111,153,.18)}
.stamp-base{width:122px;height:52px;margin-top:-6px;border-radius:22px;background:linear-gradient(180deg,#174e6c,#0c3951);box-shadow:0 18px 22px rgba(12,57,81,.22)}
.stamp-paper{position:relative;z-index:1;margin:18px auto 0;width:224px;height:174px;border-radius:28px;background:linear-gradient(180deg,#ffffff,#f7fbfd);border:1px solid #e3edf2;display:grid;place-items:center;box-shadow:inset 0 -12px 20px rgba(10,141,220,.04)}
.stamp-paper::before{content:"";position:absolute;inset:18px;border-radius:22px;border:1px dashed rgba(15,111,153,.14)}
.stamp-paper.is-hit{animation:paperPulse .74s ease-out}
.stamp-ink-ring{position:absolute;left:50%;top:50%;width:132px;height:132px;border-radius:50%;border:2px solid rgba(15,111,153,.14);transform:translate(-50%,-50%) scale(.46);opacity:0}
.stamp-paper.is-hit .stamp-ink-ring{animation:inkBloom .8s ease-out forwards}
.stamp-result{position:relative;z-index:2;width:126px;height:126px;border-radius:50%;border:8px solid #0f6f99;color:#0f6f99;background:radial-gradient(circle at 30% 30%, rgba(15,111,153,.08), transparent 50%);font-size:14px;font-weight:800;display:grid;place-items:center;transform:rotate(-7deg) scale(.38);opacity:0;box-shadow:0 18px 28px rgba(15,111,153,.08)}
.stamp-animation.is-active .stamp-result{animation:stampRevealSoft 1.65s cubic-bezier(.2,.82,.24,1) both}
.stamp-result small{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.stamp-stage.is-complete .stamp-result{border-color:#1fc6b5;color:#148775;background:radial-gradient(circle at 30% 30%, rgba(31,198,181,.10), transparent 56%)}
.confetti-wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confetti{position:absolute;left:50%;top:48%;width:10px;height:18px;border-radius:999px;opacity:0;animation:confettiFloat 1.08s cubic-bezier(.18,.82,.24,1) forwards}
@keyframes stampDropSmooth{0%{transform:translateY(-170px) rotate(-14deg) scale(.95)}42%{transform:translateY(34px) rotate(4deg) scale(1)}55%{transform:translateY(58px) rotate(1deg) scaleY(.98)}72%{transform:translateY(48px) rotate(-2deg)}100%{transform:translateY(-10px) rotate(5deg)}}
@keyframes paperPulse{0%{transform:scale(1)}35%{transform:scale(.985)}68%{transform:scale(1.018)}100%{transform:scale(1)}}
@keyframes inkBloom{0%{transform:translate(-50%,-50%) scale(.42);opacity:0}22%{opacity:.55}100%{transform:translate(-50%,-50%) scale(1.12);opacity:0}}
@keyframes stampRevealSoft{0%,34%{transform:rotate(-7deg) scale(.32);opacity:0}50%{transform:rotate(-7deg) scale(1.08);opacity:1}68%{transform:rotate(-7deg) scale(.96);opacity:1}100%{transform:rotate(-7deg) scale(1);opacity:1}}
@keyframes confettiFloat{0%{transform:translate(-50%,-50%) rotate(0) scale(.4);opacity:0}12%{opacity:1}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r));opacity:0}}
.title-animation{position:fixed;inset:0;display:none;place-items:center;background:rgba(8,27,40,.24);backdrop-filter:blur(10px);z-index:60}
.title-animation.is-active{display:grid}
.title-stage{position:relative;width:min(360px,calc(100% - 32px));padding:26px 24px;border-radius:32px;text-align:center;background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(243,249,252,.97));box-shadow:0 28px 60px rgba(10,31,45,.18);overflow:hidden;animation:titleCardIn .52s cubic-bezier(.18,.82,.24,1) both}
.title-stage::before{content:"";position:absolute;left:50%;top:-76px;transform:translateX(-50%);width:220px;height:220px;border-radius:50%;background:radial-gradient(circle, rgba(31,198,181,.18), transparent 62%)}
.title-stage__halo{position:absolute;left:50%;top:54px;transform:translateX(-50%);width:110px;height:110px;border-radius:50%;background:radial-gradient(circle, rgba(10,141,220,.16), transparent 68%);filter:blur(4px)}
.title-stage__eyebrow{position:relative;z-index:1;color:#1982aa;font-size:11px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.title-stage__label{position:relative;z-index:1;margin-top:16px;color:#6a8192;font-size:13px;font-weight:700}
.title-stage__name{position:relative;z-index:1;margin-top:10px;font-size:28px;line-height:1.25;letter-spacing:-.04em;font-weight:800;color:#15384f}
.title-stage__sub{position:relative;z-index:1;margin-top:12px;color:#7a90a0;font-size:12px;line-height:1.7}
.title-sparkle{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.14);opacity:0;animation:sparkleDrift 1.5s ease-out forwards}
.title-sparkle-a{left:42px;top:66px;background:#8be8ff;animation-delay:.15s}
.title-sparkle-b{right:54px;top:94px;background:#ffd663;animation-delay:.32s}
.title-sparkle-c{left:50%;bottom:56px;background:#1fc6b5;animation-delay:.48s}
@keyframes titleCardIn{0%{opacity:0;transform:translateY(26px) scale(.92)}55%{opacity:1;transform:translateY(-4px) scale(1.02)}100%{opacity:1;transform:none}}
@keyframes sparkleDrift{0%{opacity:0;transform:translateY(10px) scale(.4)}35%{opacity:1}100%{opacity:0;transform:translateY(-32px) scale(1.18)}}

/* v1.4 experience fixes */
body[data-page="home"] .app-header {
  background: linear-gradient(180deg, rgba(232,247,252,.75), transparent);
}
body[data-page="aquariums"] .app-header {
  background: linear-gradient(180deg, rgba(238,249,246,.8), transparent);
}
body[data-page="stamps"] .app-header {
  background: linear-gradient(180deg, rgba(247,244,255,.78), transparent);
}
body[data-page="profile"] .app-header {
  background: linear-gradient(180deg, rgba(255,248,238,.82), transparent);
}
body[data-page="aquariums"] .bottom-nav .nav-button.is-active {
  background: #eaf8f2;
  color: #137a62;
}
body[data-page="stamps"] .bottom-nav .nav-button.is-active {
  background: #f3efff;
  color: #6150a8;
}
body[data-page="profile"] .bottom-nav .nav-button.is-active {
  background: #fff5e8;
  color: #9a6830;
}

.current-title-banner {
  margin-bottom: 14px;
  padding: 16px 17px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,214,99,.26), transparent 28%),
    linear-gradient(135deg, #143f59, #0f6f99);
  color: #fff;
  box-shadow: 0 18px 38px rgba(15,111,153,.18);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.current-title-banner span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .72;
  margin-bottom: 5px;
}
.current-title-banner strong {
  display: block;
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -.03em;
}
.current-title-banner p {
  margin: 6px 0 0;
  font-size: 12px;
  opacity: .76;
}
.title-shortcut {
  flex: 0 0 auto;
  padding: 10px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  font-size: 12px;
  font-weight: 800;
}

.badge,
.count-pill,
#aquariumCount {
  white-space: nowrap;
  flex-shrink: 0;
  min-width: fit-content;
}

.aqua-card__overlay {
  display: none !important;
}
.aqua-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}
.aqua-meta-row span {
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: #f4f9fb;
  border: 1px solid #e1ebf0;
  color: #5c7381;
  font-size: 11px;
  font-weight: 800;
}
.metric-chip--locked {
  background: #fff4f2;
  color: #ad6558;
  border-color: #f2d9d3;
}

.stamp-tool {
  height: 118px;
  animation: stampPressReal 1.55s cubic-bezier(.18,.82,.24,1) both;
}
.stamp-handle {
  height: 58px;
}
.stamp-base {
  height: 45px;
}
.stamp-paper {
  margin-top: -2px;
}
@keyframes stampPressReal {
  0% { transform: translateY(-92px) rotate(-8deg) scale(.98); }
  38% { transform: translateY(26px) rotate(1deg) scale(1); }
  48% { transform: translateY(44px) rotate(0deg) scaleY(.965); }
  58% { transform: translateY(44px) rotate(0deg) scaleY(.94); }
  74% { transform: translateY(20px) rotate(-1deg) scale(1); }
  100% { transform: translateY(-8px) rotate(4deg); }
}
.stamp-paper.is-hit {
  animation: paperPressReal .8s ease-out;
}
@keyframes paperPressReal {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(3px) scale(.985); }
  60% { transform: translateY(0) scale(1.012); }
  100% { transform: translateY(0) scale(1); }
}

.species-title-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}
.species-title-row h4 {
  margin: 0 0 8px;
}
.species-status {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: #f1f6f8;
  color: #7b909d;
  font-size: 10px;
  font-weight: 800;
}
.species-status.done {
  background: #eefaf6;
  color: #198564;
}
.species-item.is-discovered {
  border-color: rgba(31,198,181,.35);
  background: linear-gradient(180deg, #ffffff, #f7fffc);
}
.photo-button {
  color: #0f6f99;
  background: #eef8fc;
  border-color: #cde6f0;
}

.aquarium-page-hero {
  border-top: 4px solid rgba(31,198,181,.45);
}
#page-stamps .page-card {
  border-top: 4px solid rgba(124,106,220,.35);
}
#page-profile .page-card {
  border-top: 4px solid rgba(255,190,112,.45);
}

@media (max-width: 720px) {
  .current-title-banner {
    align-items: flex-start;
  }
  .current-title-banner strong {
    font-size: 19px;
  }
  .aqua-meta-row span {
    font-size: 10px;
  }
}

/* v1.5 photo gallery */
.bottom-nav {
  grid-template-columns: repeat(5, 1fr);
}
.nav-button {
  font-size: 11px;
  padding: 9px 3px;
}
body[data-page="photos"] .app-header {
  background: linear-gradient(180deg, rgba(232,245,255,.86), transparent);
}
body[data-page="photos"] .bottom-nav .nav-button.is-active {
  background: #edf7ff;
  color: #0f6f99;
}
.photos-page-card {
  border-top: 4px solid rgba(10,141,220,.38);
}
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.photo-card {
  overflow: hidden;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #e3edf2;
  box-shadow: 0 12px 28px rgba(16,61,90,.08);
}
.photo-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #dfeef4;
}
.photo-card__body {
  padding: 12px;
}
.photo-card__body strong,
.photo-card__body span,
.photo-card__body small {
  display: block;
}
.photo-card__body strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}
.photo-card__body span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.photo-card__body small {
  margin-top: 6px;
  color: #8a9baa;
  font-size: 11px;
}
.photo-empty {
  grid-column: 1 / -1;
}
.photo-meta-inline {
  margin-top: 9px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f6fafc;
  color: #6d8190;
  font-size: 11px;
  line-height: 1.5;
}
.species-item.is-discovered .species-thumb {
  border-bottom: 3px solid rgba(31,198,181,.42);
}
@media (min-width: 760px) {
  .photo-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .bottom-nav strong {
    font-size: 10px;
  }
  .nav-icon svg {
    width: 21px;
    height: 21px;
  }
}

/* v1.6 partner and single-photo update */
.partner-home-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 10%, rgba(31,198,181,.14), transparent 32%),
    rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 14px 32px rgba(16,61,90,.08);
}
.partner-home-card__empty {
  grid-column: 1 / -1;
}
.partner-home-card span,
.partner-home-card__empty span {
  display: block;
  color: #1982aa;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.partner-home-card strong,
.partner-home-card__empty strong {
  display: block;
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
}
.partner-home-card p,
.partner-home-card__empty p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.partner-home-card__media {
  width: 64px;
  height: 64px;
  border-radius: 19px;
  overflow: hidden;
  background: #edf6fa;
  border: 1px solid #dfeaf0;
}
.partner-home-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.partner-home-card__placeholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #8da3b0;
  font-size: 10px;
  font-weight: 800;
}
.partner-home-card__button {
  padding: 9px 11px;
  border-radius: 999px;
  background: #eef8fc;
  color: #0f6f99;
  border: 1px solid #d4eaf2;
  font-size: 11px;
  font-weight: 900;
}
.species-item.is-partner {
  border-color: rgba(255,214,99,.72);
  background: linear-gradient(180deg, #fff, #fffaf0);
}
.partner-button {
  color: #9a6830;
  background: #fff8ea;
  border-color: #f2ddba;
}
.partner-button.is-active {
  background: #143f59;
  color: #fff;
  border-color: #143f59;
}
.dialog-floating-close {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(92px, calc(env(safe-area-inset-bottom) + 86px));
  z-index: 90;
  padding: 13px 17px;
  border-radius: 999px;
  background: rgba(20,63,89,.96);
  color: #fff;
  box-shadow: 0 18px 42px rgba(8,27,40,.26);
  font-size: 13px;
  font-weight: 900;
}
.dialog:not([open]) .dialog-floating-close {
  display: none;
}
.photo-meta-inline {
  font-size: 11px;
}
@media (max-width: 420px) {
  .partner-home-card {
    grid-template-columns: 56px 1fr;
  }
  .partner-home-card__button {
    grid-column: 1 / -1;
    width: fit-content;
  }
  .partner-home-card__media {
    width: 56px;
    height: 56px;
  }
}

/* v1.7 brand / loader / top frame */
.hero-wordmark strong {
  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", sans-serif;
  letter-spacing: -.055em;
  font-weight: 900;
}
.hero-wordmark span {
  color: #0f6f99;
}
.hero-title p {
  max-width: 40em;
}

.loader-brand--aqua strong {
  font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", sans-serif;
  font-size: clamp(35px, 10vw, 56px);
  letter-spacing: -.06em;
}
.loader-brand--aqua span {
  letter-spacing: .2em;
}
.loading-dolphin-wrap {
  width: min(280px, 78vw);
  height: 150px;
  margin: 0 auto 18px;
  position: relative;
  display: grid;
  place-items: center;
}
.loading-dolphin {
  position: relative;
  z-index: 2;
  width: 146px;
  color: #ffffff;
  filter: drop-shadow(0 18px 22px rgba(8,27,40,.22));
  animation: dolphinJump 2.6s cubic-bezier(.2,.8,.2,1) infinite;
  transform-origin: 50% 70%;
}
.loading-splash {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 130px;
  height: 28px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.55), rgba(255,255,255,0) 68%);
  animation: splashPulse 2.6s ease-in-out infinite;
}
@keyframes dolphinJump {
  0% { transform: translateY(36px) rotate(-14deg) scale(.94); opacity: .92; }
  24% { transform: translateY(-34px) rotate(12deg) scale(1.02); opacity: 1; }
  48% { transform: translateY(36px) rotate(26deg) scale(.96); opacity: .96; }
  68% { transform: translateY(26px) rotate(-8deg) scale(.92); opacity: .78; }
  100% { transform: translateY(36px) rotate(-14deg) scale(.94); opacity: .92; }
}
@keyframes splashPulse {
  0%, 55%, 100% { transform: translateX(-50%) scale(.72); opacity: .12; }
  46% { transform: translateX(-50%) scale(1.12); opacity: .62; }
}

.top-profile-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  gap: 14px;
  align-items: center;
  padding: 16px;
  background:
    radial-gradient(circle at 88% 20%, rgba(255,214,99,.22), transparent 31%),
    linear-gradient(135deg, #12384f, #0f6f99);
}
.top-profile-frame__title {
  min-width: 0;
}
.top-profile-frame__title strong {
  font-size: clamp(20px, 5.2vw, 28px);
  line-height: 1.25;
  word-break: keep-all;
}
.partner-frame {
  justify-self: end;
  width: 112px;
  padding: 7px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.12));
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), 0 16px 28px rgba(8,27,40,.18);
}
.partner-frame__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 18px;
  background: #ecf7fb;
  border: 3px solid rgba(255,255,255,.82);
  box-shadow: 0 10px 20px rgba(8,27,40,.12);
  display: grid;
  place-items: center;
}
.partner-frame__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.partner-frame__photo--empty {
  color: #6e9bad;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}
.partner-frame__caption {
  padding: 7px 3px 2px;
  text-align: center;
  color: #fff;
}
.partner-frame__caption span {
  color: rgba(255,255,255,.66);
  font-size: 9px;
  letter-spacing: .16em;
  margin: 0 0 2px;
}
.partner-frame__caption strong {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 900;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.partner-frame__caption small {
  display: block;
  margin-top: 2px;
  color: rgba(255,255,255,.68);
  font-size: 9px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-grid.compact-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* dialog fixed-in-modal close button */
.dialog {
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}
.dialog-content {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  padding-bottom: 18px;
}
.dialog-floating-close {
  position: sticky;
  right: auto;
  bottom: 14px;
  z-index: 20;
  display: flex;
  width: fit-content;
  margin: 18px 0 0 auto;
  padding: 13px 17px;
  border-radius: 999px;
  background: rgba(20,63,89,.96);
  color: #fff;
  box-shadow: 0 18px 42px rgba(8,27,40,.24);
  font-size: 13px;
  font-weight: 900;
}
.dialog:not([open]) .dialog-floating-close {
  display: none;
}

@media (max-width: 460px) {
  .top-profile-frame {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 11px;
  }
  .partner-frame {
    width: 94px;
    border-radius: 21px;
  }
  .partner-frame__photo {
    border-radius: 15px;
  }
  .partner-frame__caption strong {
    font-size: 11px;
  }
  .current-title-banner p {
    font-size: 11px;
  }
}

/* v1.8 encyclopedia page */
.photos-page-card {
  border-top-color: rgba(31,198,181,.45);
}
.photo-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.encyclopedia-group {
  padding: 14px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 0%, rgba(31,198,181,.10), transparent 32%),
    #ffffff;
  border: 1px solid #e1ebf0;
  box-shadow: 0 12px 28px rgba(16,61,90,.07);
}
.encyclopedia-group.is-empty {
  background: #f8fbfd;
  box-shadow: none;
}
.encyclopedia-group__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.encyclopedia-group__head span {
  display: block;
  color: #1982aa;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.encyclopedia-group__head h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -.03em;
}
.encyclopedia-group__head strong {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 999px;
  background: #eef8fc;
  color: #0f6f99;
  font-size: 12px;
  font-weight: 900;
}
.encyclopedia-progress {
  height: 7px;
  border-radius: 999px;
  background: #edf4f7;
  overflow: hidden;
  margin-bottom: 12px;
}
.encyclopedia-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0f6f99, #1fc6b5);
}
.encyclopedia-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.encyclopedia-card {
  box-shadow: 0 8px 20px rgba(16,61,90,.06);
}
.encyclopedia-empty-text {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
@media (min-width: 760px) {
  .encyclopedia-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* v1.9 Aquarium Stamp brand + loader exit */
.hero-wordmark strong,
.loader-brand--aqua strong {
  font-family: "Avenir Next", "Avenir Next Rounded", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.065em;
  font-weight: 900;
  color: transparent;
  background: linear-gradient(135deg, #005c8f 0%, #0a8ddc 42%, #1fc6b5 78%, #86e7ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: none;
}
.hero-wordmark {
  background:
    radial-gradient(circle at 84% 18%, rgba(134,231,255,.20), transparent 28%),
    radial-gradient(circle at 18% 86%, rgba(31,198,181,.12), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.99), rgba(238,249,252,.97));
}
.hero-wordmark::before {
  background: linear-gradient(90deg, #0a8ddc, #1fc6b5, transparent);
}
.hero-wordmark span,
.loader-brand--aqua span {
  color: #0877a8;
}
.hero-wordmark em {
  color: #4f8198;
}

/* Keep the calm previous-style loader, use dolphin only as the exit animation */
.loading-screen {
  background:
    radial-gradient(circle at 50% 18%, rgba(134,231,255,.22), transparent 28%),
    linear-gradient(180deg, #0f5f88 0%, #0a86bd 55%, #72d7ec 100%);
}
.loader-brand--aqua {
  text-align: center;
  margin-bottom: 20px;
}
.loader-brand--aqua strong {
  display: block;
  font-size: clamp(38px, 10.5vw, 58px);
  line-height: .95;
}
.loader-brand--aqua span {
  display: block;
  color: rgba(255,255,255,.76);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.loading-screen .loader-brand--aqua strong {
  background: linear-gradient(135deg, #ffffff 0%, #bff4ff 48%, #62e6d4 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.loader-orbit--clean {
  width: 122px;
  height: 122px;
  margin-bottom: 18px;
}
.loader-orbit--clean .orbit-core {
  background: linear-gradient(135deg, #ffffff, #bcefff 55%, #8df3df);
}

.loading-exit-scene {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 4vh;
  height: 220px;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
}
.loading-dolphin--real {
  position: absolute;
  left: -32vw;
  bottom: 12px;
  width: min(220px, 54vw);
  color: #ffffff;
  filter: drop-shadow(0 22px 24px rgba(5,38,58,.28));
  transform: translateY(80px) rotate(-10deg);
}
.loading-screen.is-exiting .loading-exit-scene {
  opacity: 1;
}
.loading-screen.is-exiting .loading-dolphin--real {
  animation: dolphinExitJump .92s cubic-bezier(.16,.76,.24,1) forwards;
}

.loading-splash-screen {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  opacity: 0;
}
.loading-splash-screen .splash {
  position: absolute;
  left: 50%;
  bottom: -20vh;
  width: 42vw;
  height: 42vw;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.92), rgba(186,240,255,.76) 42%, rgba(79,194,229,.36) 66%, transparent 70%);
  transform: translate(-50%, 0) scale(.2);
  filter: blur(1px);
}
.loading-splash-screen .splash-b {
  left: 24%;
  width: 34vw;
  height: 34vw;
}
.loading-splash-screen .splash-c {
  left: 78%;
  width: 38vw;
  height: 38vw;
}
.loading-splash-screen .splash-d {
  left: 50%;
  bottom: -42vh;
  width: 110vw;
  height: 110vw;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.96), rgba(166,235,255,.88) 44%, rgba(92,207,234,.58) 66%, transparent 72%);
}
.loading-screen.is-exiting .loading-splash-screen {
  opacity: 1;
}
.loading-screen.is-exiting .splash-a {
  animation: splashCover .74s .28s ease-out forwards;
}
.loading-screen.is-exiting .splash-b {
  animation: splashCover .72s .34s ease-out forwards;
}
.loading-screen.is-exiting .splash-c {
  animation: splashCover .72s .38s ease-out forwards;
}
.loading-screen.is-exiting .splash-d {
  animation: splashFullCover .78s .44s ease-out forwards;
}

@keyframes dolphinExitJump {
  0% {
    left: -34vw;
    bottom: 6px;
    transform: translateY(72px) rotate(-14deg) scale(.96);
    opacity: .96;
  }
  36% {
    left: 34vw;
    bottom: 104px;
    transform: translateY(-44px) rotate(10deg) scale(1.02);
    opacity: 1;
  }
  66% {
    left: 58vw;
    bottom: 28px;
    transform: translateY(24px) rotate(28deg) scale(.98);
    opacity: 1;
  }
  100% {
    left: 112vw;
    bottom: -10px;
    transform: translateY(86px) rotate(36deg) scale(.94);
    opacity: .88;
  }
}
@keyframes splashCover {
  0% {
    transform: translate(-50%, 0) scale(.18);
    opacity: 0;
  }
  24% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -42vh) scale(3.2);
    opacity: .92;
  }
}
@keyframes splashFullCover {
  0% {
    transform: translate(-50%, 0) scale(.18);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -38vh) scale(1.72);
    opacity: 1;
  }
}

/* override old continuous dolphin loader, if present */
.loading-dolphin-wrap,
.loading-splash {
  display: none !important;
}

/* v2.0 loader polish + production text tone */
:root {
  --text:#1f4962;
  --muted:#6d8a9c;
}
html,body{
  font-family:-apple-system,BlinkMacSystemFont,"Avenir Next","Hiragino Sans","Yu Gothic","Segoe UI",sans-serif;
}
body{
  color:var(--text);
}
.hero-title p,
.section-head .page-subcopy,
.detail-copy,
.species-item p,
.photo-card__body span,
.photo-card__body small,
.partner-home-card p,
.current-title-banner p,
.location-pill,
.stamp-count,
.muted{
  color:var(--muted);
}
.hero-wordmark strong,
.loader-brand--aqua strong {
  font-family:"Avenir Next","SF Pro Display","Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.07em;
}
.current-title-banner strong,
.top-profile-frame__title strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.top-profile-frame__title{
  min-width:0;
}
.top-profile-frame{
  grid-template-columns:minmax(0,1fr) 118px;
}
.current-title-banner span,
.partner-frame__caption span,
.loader-brand--aqua span {
  color: rgba(255,255,255,.78);
}

/* refined loader */
.loading-screen {
  transition: opacity .58s ease, visibility .58s ease;
  background:
    radial-gradient(circle at 50% 12%, rgba(168,243,255,.26), transparent 24%),
    linear-gradient(180deg, #0d628f 0%, #1495c7 56%, #7ad9ec 100%);
}
.loading-screen__inner{
  position: relative;
  z-index: 3;
}
.loading-screen.is-exiting .loader-brand,
.loading-screen.is-exiting .loader-orbit,
.loading-screen.is-exiting .loading-screen__inner > p {
  animation: loaderFadeAway 1.05s ease forwards;
}
@keyframes loaderFadeAway{
  0%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-18px)}
}

.loading-exit-scene {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
}
.loading-screen.is-exiting .loading-exit-scene {
  opacity: 1;
}
.loading-dolphin--real {
  position: absolute;
  left: -28vw;
  bottom: 9vh;
  width: min(250px, 56vw);
  filter: drop-shadow(0 22px 28px rgba(4,41,60,.25));
  transform: translateY(82px) rotate(-10deg);
}
.loading-screen.is-exiting .loading-dolphin--real {
  animation: dolphinExitJumpLong 2.05s cubic-bezier(.16,.76,.24,1) forwards;
}

.loading-splash-screen {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
}
.loading-splash-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.loading-screen.is-exiting .loading-splash-screen {
  opacity: 1;
}
.splash-burst {
  transform-origin: 50% 100%;
  transform: translateY(34%) scale(.62);
  opacity: 0;
}
.loading-screen.is-exiting .splash-burst {
  animation: waterBurstCover 1.95s .78s cubic-bezier(.15,.78,.16,1) forwards;
}
.drop {
  transform-origin: center;
}
.loading-screen.is-exiting .drop-1 { animation: dropletArc1 1.8s .9s ease-out forwards; }
.loading-screen.is-exiting .drop-2 { animation: dropletArc2 1.7s .95s ease-out forwards; }
.loading-screen.is-exiting .drop-3 { animation: dropletArc3 1.9s .88s ease-out forwards; }
.loading-screen.is-exiting .drop-4 { animation: dropletArc4 1.8s 1s ease-out forwards; }
.loading-screen.is-exiting .drop-5 { animation: dropletArc5 1.9s .94s ease-out forwards; }
.loading-screen.is-exiting .drop-6 { animation: dropletArc6 1.76s 1.02s ease-out forwards; }
.loading-screen.is-exiting .drop-7 { animation: dropletArc7 1.7s .96s ease-out forwards; }
.loading-screen.is-exiting .drop-8 { animation: dropletArc8 1.72s .99s ease-out forwards; }

@keyframes dolphinExitJumpLong {
  0% {
    left: -28vw;
    bottom: 8vh;
    transform: translateY(82px) rotate(-14deg) scale(.98);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  28% {
    left: 16vw;
    bottom: 28vh;
    transform: translateY(6px) rotate(-2deg) scale(1.02);
  }
  50% {
    left: 40vw;
    bottom: 46vh;
    transform: translateY(-52px) rotate(10deg) scale(1.04);
  }
  72% {
    left: 64vw;
    bottom: 26vh;
    transform: translateY(18px) rotate(20deg) scale(1);
  }
  100% {
    left: 106vw;
    bottom: 12vh;
    transform: translateY(86px) rotate(28deg) scale(.94);
    opacity: 1;
  }
}
@keyframes waterBurstCover {
  0% {
    transform: translateY(36%) scale(.56);
    opacity: 0;
  }
  18% {
    opacity: .95;
  }
  52% {
    transform: translateY(8%) scale(1.04);
    opacity: 1;
  }
  100% {
    transform: translateY(-12%) scale(1.42);
    opacity: 1;
  }
}
@keyframes dropletArc1 { 0%{transform:translate(0,0) scale(.4);opacity:0}18%{opacity:1}100%{transform:translate(-140px,-300px) scale(1.15);opacity:0} }
@keyframes dropletArc2 { 0%{transform:translate(0,0) scale(.36);opacity:0}18%{opacity:1}100%{transform:translate(-190px,-240px) scale(1.02);opacity:0} }
@keyframes dropletArc3 { 0%{transform:translate(0,0) scale(.42);opacity:0}18%{opacity:1}100%{transform:translate(-10px,-360px) scale(1.22);opacity:0} }
@keyframes dropletArc4 { 0%{transform:translate(0,0) scale(.4);opacity:0}18%{opacity:1}100%{transform:translate(160px,-250px) scale(1.06);opacity:0} }
@keyframes dropletArc5 { 0%{transform:translate(0,0) scale(.4);opacity:0}18%{opacity:1}100%{transform:translate(210px,-330px) scale(1.16);opacity:0} }
@keyframes dropletArc6 { 0%{transform:translate(0,0) scale(.34);opacity:0}18%{opacity:1}100%{transform:translate(96px,-220px) scale(.98);opacity:0} }
@keyframes dropletArc7 { 0%{transform:translate(0,0) scale(.34);opacity:0}18%{opacity:1}100%{transform:translate(40px,-200px) scale(.94);opacity:0} }
@keyframes dropletArc8 { 0%{transform:translate(0,0) scale(.34);opacity:0}18%{opacity:1}100%{transform:translate(-80px,-210px) scale(.96);opacity:0} }

/* neutralize older splash artifacts */
.loading-splash-screen .splash { display:none !important; }

/* section eyebrow tone */
.eyebrow,
.section-head .eyebrow,
.page-subcopy strong {
  color:#1683b0;
}

/* v2.1 gallery + loader simplification */
.loading-exit-scene,
.loading-splash-screen,
.loading-dolphin-wrap,
.loading-splash,
.loading-dolphin {
  display: none !important;
}
.loading-screen.is-exiting .loader-brand,
.loading-screen.is-exiting .loader-orbit,
.loading-screen.is-exiting .loading-screen__inner > p {
  animation: none !important;
}
.loading-screen {
  transition: opacity .45s ease, visibility .45s ease;
}

/* top title two-line balance */
.top-profile-frame {
  grid-template-columns: minmax(0, 1fr) 136px;
  gap: 16px;
}
.partner-frame {
  width: 132px;
}
.top-profile-frame__title p {
  line-height: 1.55;
}
.top-profile-frame__title strong {
  white-space: nowrap;
  font-size: clamp(18px, 4.8vw, 26px);
}

/* compact encyclopedia grid */
.encyclopedia-grid--compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.encyclopedia-mini-card {
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e3edf2;
  text-align: left;
  box-shadow: 0 7px 16px rgba(16,61,90,.06);
}
.encyclopedia-mini-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #e8f3f7;
}
.encyclopedia-mini-card span {
  display: block;
  padding: 7px 6px 8px;
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* large photo viewer */
.photo-viewer-dialog {
  width: min(720px, calc(100% - 24px));
  border: 0;
  padding: 0;
  border-radius: 28px;
  background: transparent;
}
.photo-viewer-dialog::backdrop {
  background: rgba(7, 32, 48, .62);
  backdrop-filter: blur(8px);
}
.photo-viewer {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 34px 86px rgba(0,0,0,.28);
}
.photo-viewer img {
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  background: #0b2e42;
}
.photo-viewer__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  color: #12384f;
  font-size: 26px;
  font-weight: 700;
  z-index: 2;
}
.photo-viewer__caption {
  padding: 14px 16px 16px;
}
.photo-viewer__caption strong,
.photo-viewer__caption span {
  display: block;
}
.photo-viewer__caption strong {
  font-size: 17px;
  color: var(--text);
}
.photo-viewer__caption span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

/* photo registration notice inside detail dialog */
.photo-record-notice {
  position: sticky;
  bottom: 72px;
  z-index: 25;
  display: none;
  align-items: center;
  gap: 10px;
  width: min(320px, calc(100% - 16px));
  margin: 12px auto 0;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(20,63,89,.96);
  color: #fff;
  box-shadow: 0 18px 42px rgba(8,27,40,.22);
}
.photo-record-notice.is-active {
  display: flex;
  animation: photoNoticeIn .24s ease both;
}
.photo-record-notice img {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.35);
}
.photo-record-notice strong {
  display: block;
  font-size: 13px;
  line-height: 1.35;
}
.photo-record-notice span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  opacity: .82;
}
@keyframes photoNoticeIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 760px) {
  .encyclopedia-grid--compact {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .top-profile-frame {
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 12px;
  }
  .partner-frame {
    width: 110px;
  }
  .encyclopedia-grid--compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .top-profile-frame__title p {
    font-size: 11px;
  }
}

/* v2.1.1 safe fixes */
.replace-photo-dialog {
  width: min(360px, calc(100% - 32px));
  border: 0;
  padding: 0;
  border-radius: 26px;
  background: transparent;
}
.replace-photo-dialog::backdrop {
  background: rgba(7,32,48,.42);
  backdrop-filter: blur(8px);
}
.replace-photo-card {
  padding: 22px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(0,0,0,.24);
}
.replace-photo-card h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 19px;
}
.replace-photo-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.replace-photo-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}
.photo-record-notice {
  z-index: 40;
}

/* v2.1.5 encyclopedia layout fix - isolated classes */
#photoGallery.photo-gallery {
  display: block;
}
.encyclopedia-tabs-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 12px;
  margin-bottom: 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, #f7fbfd, #ffffff);
  border: 1px solid #e1edf2;
}
.encyclopedia-tabs-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.encyclopedia-tabs-head span {
  color: #1683b0;
  font-size: 12px;
  font-weight: 900;
}
.encyclopedia-tabs-head strong {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}
.encyclopedia-tabs {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 3px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.encyclopedia-tabs::-webkit-scrollbar {
  display: none;
}
.encyclopedia-tab {
  flex: 0 0 132px;
  min-width: 132px;
  max-width: 132px;
  padding: 9px 10px;
  border-radius: 16px;
  background: #f8fbfd;
  border: 1px solid #e2edf2;
  color: var(--text);
  text-align: left;
}
.encyclopedia-tab.is-active {
  background: linear-gradient(135deg, #143f59, #0f6f99);
  border-color: #143f59;
  color: #fff;
}
.encyclopedia-tab__name,
.encyclopedia-tab__count {
  display: block;
}
.encyclopedia-tab__name {
  font-size: 11px;
  font-weight: 900;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.encyclopedia-tab__count {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 900;
  opacity: .72;
}
.encyclopedia-current {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 14px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid #e1edf2;
  box-shadow: 0 10px 24px rgba(16,61,90,.06);
}
.encyclopedia-current__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.encyclopedia-current__head span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}
.encyclopedia-current__head h3 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}
.encyclopedia-current__head strong {
  flex: 0 0 auto;
  color: #1683b0;
  font-size: 15px;
  font-weight: 900;
}
.encyclopedia-progress {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8f3f7;
  margin-bottom: 12px;
}
.encyclopedia-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0a8ddc, #1fc6b5);
}
.encyclopedia-photo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.encyclopedia-photo-card {
  display: block;
  min-width: 0;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border-radius: 13px;
  background: #fff;
  border: 1px solid #e3edf2;
  text-align: left;
  box-shadow: 0 6px 14px rgba(16,61,90,.06);
}
.encyclopedia-photo-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #e8f3f7;
}
.encyclopedia-photo-card span {
  display: block;
  padding: 6px 5px 7px;
  color: var(--text);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.encyclopedia-empty-box {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
}
.photo-viewer__close {
  display: grid;
  place-items: center;
}
@media (min-width: 760px) {
  .encyclopedia-photo-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .encyclopedia-tab {
    flex-basis: 160px;
    min-width: 160px;
    max-width: 160px;
  }
}
@media (max-width: 380px) {
  .encyclopedia-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .encyclopedia-tab {
    flex-basis: 122px;
    min-width: 122px;
    max-width: 122px;
  }
}