:root {
  --ink: #183347;
  --muted: #6d7f8b;
  --paper: #fffdf8;
  --accent: #e6548b;
  --accent-2: #ffcc62;
  --water-top: #8de3ea;
  --water-mid: #40b9cf;
  --water-bottom: #126d91;
  --card: rgba(255,255,255,.92);
  --shadow: 0 18px 55px rgba(20,61,82,.18);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, "Segoe UI", Arial, sans-serif; color: var(--ink); }
body { background: #f5f4ef; }
button, input { font: inherit; }
button, .button { border: 0; border-radius: 14px; padding: 13px 18px; font-weight: 750; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.primary { background: var(--accent); color: white; }
.secondary { background: white; color: var(--ink); box-shadow: inset 0 0 0 1px #d9e0e3; }
.ghost { background: rgba(255,255,255,.14); color: white; border: 1px solid rgba(255,255,255,.45); }
button:disabled { opacity: .5; cursor: not-allowed; }
.home-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px; background: radial-gradient(circle at 20% 10%, #fff 0, #fff9e8 28%, #eef8f7 70%, #e6f2f6 100%); }
.home-card { width: min(920px, 100%); background: var(--paper); border-radius: 34px; padding: clamp(28px, 6vw, 64px); box-shadow: var(--shadow); display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.brand-kicker { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 850; }
h1 { font-size: clamp(38px, 7vw, 72px); line-height: .98; margin: 12px 0 18px; letter-spacing: -.04em; }
.lead { font-size: 19px; line-height: 1.55; color: #4c6574; max-width: 590px; }
.scene-card { background: linear-gradient(145deg, #e7fbff, #c9eef5); padding: 22px; border-radius: 28px; min-height: 340px; position: relative; overflow: hidden; }
.scene-card::after { content: ""; position: absolute; inset: auto -8% -28% -8%; height: 48%; background: #f5d49a; border-radius: 50% 50% 0 0; opacity: .9; }
.demo-fish { position: absolute; width: 180px; aspect-ratio: 1.65; background: linear-gradient(135deg, #ffcf68, #ef6f8f 70%); clip-path: polygon(0 50%, 15% 24%, 15% 39%, 30% 23%, 55% 16%, 77% 29%, 93% 50%, 77% 71%, 55% 84%, 30% 77%, 15% 61%, 15% 76%); top: 98px; left: 66px; filter: drop-shadow(0 15px 18px rgba(30,77,99,.22)); }
.demo-label { position: absolute; top: 72px; left: 105px; background: white; padding: 7px 12px; border-radius: 999px; font-weight: 800; box-shadow: var(--shadow); }
.form-row { display: grid; gap: 8px; margin: 18px 0; }
label { font-weight: 800; }
input[type="text"] { width: 100%; padding: 14px 15px; border: 1px solid #cad5da; border-radius: 13px; background: white; outline: none; }
input[type="text"]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230,84,139,.12); }
.help { color: var(--muted); font-size: 13px; line-height: 1.45; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.status { min-height: 22px; font-size: 14px; margin-top: 12px; color: #a33c62; font-weight: 650; }
@media (max-width: 760px) { .home-card { grid-template-columns: 1fr; gap: 24px; } .scene-card { min-height: 260px; } }

.aquarium-page { min-height: 100vh; overflow: hidden; background: #0d6786; }
.aquarium { position: fixed; inset: 0; overflow: hidden; background:
  radial-gradient(circle at 10% 20%, rgba(255,255,255,.28) 0 4px, transparent 5px),
  radial-gradient(circle at 80% 35%, rgba(255,255,255,.22) 0 6px, transparent 7px),
  linear-gradient(var(--water-top), var(--water-mid) 45%, var(--water-bottom)); }
.aquarium::before { content: ""; position: absolute; left: -5%; right: -5%; bottom: -12%; height: 30%; background: radial-gradient(ellipse at 20% 30%, #f5d28c 0 4%, transparent 5%), radial-gradient(ellipse at 50% 45%, #d3b26f 0 3%, transparent 4%), #d9bf86; border-radius: 50% 50% 0 0; }
.aquarium::after { content: ""; position: absolute; width: 140px; height: 260px; bottom: 5%; left: 8%; border-radius: 60% 10% 60% 10%; background: repeating-linear-gradient(85deg,#196c55 0 12px,#2c9471 12px 22px); transform: rotate(-8deg); opacity: .75; filter: blur(.3px); }
.scene-topbar { position: fixed; inset: 16px 16px auto 16px; z-index: 50; display: flex; justify-content: space-between; gap: 10px; align-items: center; pointer-events: none; }
.scene-topbar > * { pointer-events: auto; }
.scene-title { background: rgba(10,66,88,.58); color: white; backdrop-filter: blur(12px); padding: 11px 16px; border-radius: 16px; max-width: 55vw; }
.scene-title strong { display: block; }
.scene-title span { opacity: .8; font-size: 12px; }
.scene-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fish { --scale: 1; position: absolute; width: clamp(120px, 15vw, 230px); aspect-ratio: 1.65; z-index: 5; cursor: pointer; animation: swim var(--duration, 22s) linear infinite; animation-delay: var(--delay, 0s); transform-origin: center; }
.fish img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(0,42,65,.28)); }
.fish-author-label { position: absolute; left: 50%; top: -12px; transform: translate(-50%,-100%); background: rgba(255,255,255,.94); color: #173346; font-size: 13px; font-weight: 850; padding: 6px 10px; border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 18px rgba(0,44,70,.18); pointer-events: none; }
.labels-hidden .fish-author-label { display: none; }
@keyframes swim {
  0% { left: -24vw; transform: translateY(0) scaleX(1) scale(var(--scale)); }
  46% { left: 104vw; transform: translateY(-4vh) scaleX(1) scale(var(--scale)); }
  50% { left: 104vw; transform: translateY(-4vh) scaleX(-1) scale(var(--scale)); }
  96% { left: -24vw; transform: translateY(2vh) scaleX(-1) scale(var(--scale)); }
  100% { left: -24vw; transform: translateY(0) scaleX(1) scale(var(--scale)); }
}
.empty-scene { position: fixed; z-index: 20; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(440px, calc(100% - 36px)); text-align: center; background: rgba(255,255,255,.9); padding: 26px; border-radius: 24px; box-shadow: var(--shadow); }
.work-card { position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translateX(-50%); background: white; border-radius: 20px; padding: 16px 20px; min-width: min(360px, calc(100% - 30px)); box-shadow: 0 18px 50px rgba(0,32,50,.28); display: none; }
.work-card.open { display: block; }
.work-card .close { float: right; background: transparent; padding: 2px 6px; font-size: 20px; }
.work-card h3 { margin: 0 30px 5px 0; }
.work-card p { margin: 0; color: var(--muted); }

.add-shell { min-height: 100vh; padding: 24px; background: linear-gradient(155deg,#edfafa,#fff8e8); }
.add-card { width: min(980px,100%); margin: 0 auto; background: white; border-radius: 30px; box-shadow: var(--shadow); padding: clamp(22px,5vw,48px); display: grid; grid-template-columns: .85fr 1.15fr; gap: 42px; }
.add-card h1 { font-size: clamp(34px,5vw,58px); }
.file-drop { border: 2px dashed #b5cbd2; border-radius: 20px; padding: 22px; text-align: center; background: #f9fcfd; }
.file-drop input { width: 100%; margin-top: 12px; }
.preview-wrap { display: grid; place-items: center; min-height: 420px; background: linear-gradient(#bfeef1,#4eb5cd); border-radius: 24px; overflow: hidden; position: relative; }
#fish-preview { width: min(92%, 560px); height: auto; filter: drop-shadow(0 18px 22px rgba(0,52,76,.28)); }
.preview-hint { position: absolute; bottom: 16px; left: 16px; right: 16px; background: rgba(255,255,255,.9); padding: 10px 12px; border-radius: 12px; font-size: 13px; }
@media (max-width: 760px) { .add-card { grid-template-columns: 1fr; } .preview-wrap { min-height: 300px; } }

@media print {
  .print-toolbar { display: none !important; }
  body { background: white !important; }
  .sheet { box-shadow: none !important; margin: 0 !important; }
}

/* 3D aquarium layer — phase 2 */
.aquarium-3d-scene { isolation: isolate; }
.aquarium-3d { position:absolute; inset:0; width:100%; height:100%; z-index:4; display:block; cursor:pointer; }
.fish-label-layer { position:absolute; inset:0; z-index:8; pointer-events:none; overflow:hidden; }
.fish-author-label-3d { position:absolute; left:0; top:0; will-change:transform; font-size:clamp(13px,1.1vw,17px); padding:7px 11px; }
.fish-label-layer.labels-hidden .fish-author-label { display:none; }
.water-rays { position:absolute; inset:-25% -10% 0; z-index:1; pointer-events:none; opacity:.30; background:repeating-linear-gradient(103deg,transparent 0 7%,rgba(255,255,255,.28) 8% 10%,transparent 11% 18%); transform-origin:50% 0; animation:water-rays 9s ease-in-out infinite alternate; mix-blend-mode:screen; }
@keyframes water-rays { from{transform:translateX(-2%) skewX(-3deg);opacity:.20} to{transform:translateX(3%) skewX(4deg);opacity:.38} }
.bubble-field { position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.bubble-field i { position:absolute; bottom:-40px; width:12px; height:12px; border:2px solid rgba(255,255,255,.46); border-radius:50%; box-shadow:inset 2px 2px 4px rgba(255,255,255,.22); animation:bubble-rise 8s linear infinite; }
.bubble-field i:nth-child(1){left:8%;animation-duration:8.5s;animation-delay:-1s}.bubble-field i:nth-child(2){left:17%;width:7px;height:7px;animation-duration:11s;animation-delay:-7s}.bubble-field i:nth-child(3){left:27%;width:16px;height:16px;animation-duration:13s;animation-delay:-5s}.bubble-field i:nth-child(4){left:36%;width:8px;height:8px;animation-duration:9s;animation-delay:-2s}.bubble-field i:nth-child(5){left:47%;width:13px;height:13px;animation-duration:12s;animation-delay:-10s}.bubble-field i:nth-child(6){left:58%;width:6px;height:6px;animation-duration:8s;animation-delay:-4s}.bubble-field i:nth-child(7){left:67%;width:18px;height:18px;animation-duration:14s;animation-delay:-9s}.bubble-field i:nth-child(8){left:76%;width:9px;height:9px;animation-duration:10s;animation-delay:-6s}.bubble-field i:nth-child(9){left:88%;width:15px;height:15px;animation-duration:12s;animation-delay:-3s}.bubble-field i:nth-child(10){left:93%;width:7px;height:7px;animation-duration:9s;animation-delay:-8s}.bubble-field i:nth-child(11){left:52%;width:10px;height:10px;animation-duration:15s;animation-delay:-12s}.bubble-field i:nth-child(12){left:22%;width:5px;height:5px;animation-duration:7s;animation-delay:-3s}
@keyframes bubble-rise { 0%{transform:translate(0,0) scale(.65);opacity:0} 10%{opacity:.75} 55%{transform:translate(18px,-48vh) scale(1)} 100%{transform:translate(-12px,-108vh) scale(1.18);opacity:0} }
@media (prefers-reduced-motion: reduce) { .water-rays,.bubble-field i { animation:none; } }

/* Aquarium visual pass v0.6 — calmer, deeper water and layered natural scenery */
.aquarium {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(229,255,250,.94) 0 5%, rgba(178,238,232,.45) 18%, transparent 38%),
    radial-gradient(ellipse at 18% 18%, rgba(255,255,255,.16) 0 1%, transparent 24%),
    linear-gradient(180deg,#86dcd8 0%,#49bdc4 20%,#1386a3 58%,#07536f 100%);
}
.aquarium::before,.aquarium::after { content:none; }
.aquarium-background { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.surface-shimmer { position:absolute; left:-5%; right:-5%; top:-6%; height:23%; opacity:.55; background:
  radial-gradient(ellipse at 12% 100%,rgba(255,255,255,.48) 0 1.2%,transparent 6%),
  radial-gradient(ellipse at 36% 100%,rgba(255,255,255,.38) 0 1.1%,transparent 5.5%),
  radial-gradient(ellipse at 68% 100%,rgba(255,255,255,.34) 0 1%,transparent 5%),
  radial-gradient(ellipse at 88% 100%,rgba(255,255,255,.38) 0 1.2%,transparent 6%),
  linear-gradient(180deg,rgba(230,255,252,.7),rgba(230,255,252,0));
  filter:blur(1px); animation:surface-shimmer 7s ease-in-out infinite alternate; }
@keyframes surface-shimmer { from{transform:translateX(-1.5%) scaleX(1.02);opacity:.46} to{transform:translateX(1.8%) scaleX(.99);opacity:.65} }
.caustic-layer { position:absolute; inset:0; z-index:1; opacity:.16; mix-blend-mode:screen; background:
  repeating-radial-gradient(ellipse at 50% -12%, transparent 0 22px, rgba(255,255,255,.55) 24px 26px, transparent 28px 44px);
  background-size:210px 150px; transform:scale(1.25,1.05) rotate(-2deg); animation:caustic-drift 13s linear infinite; }
@keyframes caustic-drift { from{background-position:0 0;transform:scale(1.25,1.05) rotate(-2deg) translateX(-1%)} to{background-position:210px 50px;transform:scale(1.25,1.05) rotate(2deg) translateX(1%)} }
.water-rays { z-index:1; inset:-15% -12% 10%; opacity:.22; background:repeating-linear-gradient(102deg,transparent 0 9%,rgba(224,255,250,.28) 10% 12%,transparent 13% 22%); filter:blur(2px); }

.distant-reef { position:absolute; bottom:14%; width:28vw; min-width:260px; height:13vh; opacity:.23; filter:blur(1.2px); z-index:1; }
.distant-reef-left { left:-3vw; transform:scale(.95); }
.distant-reef-right { right:-4vw; transform:scaleX(-1) scale(.9); }
.distant-reef i { position:absolute; bottom:0; border-radius:52% 48% 18% 22% / 62% 58% 30% 28%; background:linear-gradient(160deg,#477d78,#2d5f65); box-shadow:inset 0 9px 12px rgba(255,255,255,.08),0 10px 20px rgba(3,48,63,.16); }
.distant-reef i:nth-child(1){left:4%;width:42%;height:72%;transform:rotate(-5deg)}
.distant-reef i:nth-child(2){left:32%;width:48%;height:100%;transform:rotate(4deg)}
.distant-reef i:nth-child(3){left:67%;width:36%;height:58%;transform:rotate(8deg)}

.seabed-natural { position:absolute; z-index:2; left:-6%; right:-6%; bottom:-10%; height:30%; border-radius:48% 52% 0 0 / 22% 25% 0 0; background:
  radial-gradient(ellipse at 16% 24%,rgba(240,222,172,.62) 0 2%,transparent 2.7%),
  radial-gradient(ellipse at 38% 38%,rgba(139,112,72,.15) 0 1.3%,transparent 2%),
  radial-gradient(ellipse at 71% 18%,rgba(255,239,194,.35) 0 1.4%,transparent 2.2%),
  radial-gradient(ellipse at 88% 37%,rgba(125,102,69,.16) 0 1.2%,transparent 1.8%),
  linear-gradient(180deg,#d9c08a 0%,#bfa26e 66%,#a9875b 100%);
  box-shadow:inset 0 16px 35px rgba(255,243,204,.16),0 -10px 30px rgba(2,67,82,.09); }
.seabed-natural::before { content:""; position:absolute; inset:8% 5% 34%; opacity:.26; background:
  repeating-radial-gradient(ellipse at 20% 40%,transparent 0 34px,rgba(114,88,55,.36) 36px 38px,transparent 40px 74px); transform:scaleY(.36); }
.seabed-natural i { position:absolute; border-radius:50%; background:rgba(109,86,56,.26); filter:blur(.25px); }
.seabed-natural i:nth-child(1){left:24%;top:30%;width:78px;height:10px;transform:rotate(-4deg)}
.seabed-natural i:nth-child(2){left:49%;top:46%;width:46px;height:8px;transform:rotate(5deg)}
.seabed-natural i:nth-child(3){right:19%;top:26%;width:64px;height:9px;transform:rotate(-2deg)}

.rock-cluster { position:absolute; z-index:3; bottom:9%; width:180px; height:105px; pointer-events:none; }
.rock-left { left:5%; }
.rock-right { right:4%; transform:scale(.82) scaleX(-1); opacity:.88; }
.rock-cluster i { position:absolute; bottom:0; border-radius:52% 48% 35% 28% / 65% 60% 38% 34%; background:linear-gradient(145deg,#777e70,#4e655f 64%,#3a5351); box-shadow:inset 10px 12px 18px rgba(255,255,255,.09),0 11px 20px rgba(0,45,55,.23); }
.rock-cluster i:nth-child(1){left:0;width:86px;height:62px;transform:rotate(-7deg)}
.rock-cluster i:nth-child(2){left:58px;width:100px;height:84px;transform:rotate(7deg)}
.rock-cluster i:nth-child(3){left:116px;width:64px;height:48px;transform:rotate(12deg)}

.seaweed-cluster { position:absolute; z-index:2; bottom:13%; width:150px; height:250px; pointer-events:none; opacity:.72; }
.seaweed-back-left { left:10%; transform:scale(.72); transform-origin:bottom; }
.seaweed-back-right { right:10%; transform:scale(.62); transform-origin:bottom; opacity:.55; }
.seaweed-cluster span,.foreground-grass span { position:absolute; bottom:0; left:50%; display:block; transform-origin:50% 100%; border-radius:90% 10% 90% 10% / 82% 18% 82% 18%; background:linear-gradient(90deg,#174f50 0%,#2f846c 48%,#76a875 100%); box-shadow:inset -8px 0 12px rgba(3,49,44,.16); animation:seaweed-sway 5.8s ease-in-out infinite alternate; }
.seaweed-cluster span:nth-child(1){width:26px;height:205px;transform:translateX(-62px) rotate(-18deg);animation-delay:-1.8s}
.seaweed-cluster span:nth-child(2){width:24px;height:238px;transform:translateX(-34px) rotate(-8deg);animation-delay:-3.1s}
.seaweed-cluster span:nth-child(3){width:29px;height:220px;transform:translateX(-6px) rotate(5deg);animation-delay:-.9s}
.seaweed-cluster span:nth-child(4){width:24px;height:184px;transform:translateX(24px) rotate(15deg);animation-delay:-4.2s}
.seaweed-cluster span:nth-child(5){width:20px;height:155px;transform:translateX(47px) rotate(24deg);animation-delay:-2.4s}
@keyframes seaweed-sway { from{translate:-4px 0;rotate:-3deg} to{translate:5px 1px;rotate:4deg} }

.foreground-grass { position:absolute; z-index:5; bottom:-3%; width:250px; height:260px; pointer-events:none; opacity:.88; filter:drop-shadow(0 10px 10px rgba(0,42,45,.12)); }
.foreground-grass-left { left:-24px; }
.foreground-grass-right { right:-38px; transform:scaleX(-1) scale(.86); transform-origin:bottom right; opacity:.72; }
.foreground-grass span { width:24px; background:linear-gradient(90deg,#0e5c54,#26866e 48%,#66a779); }
.foreground-grass span:nth-child(1){height:210px;transform:translateX(-76px) rotate(-24deg);animation-delay:-2s}
.foreground-grass span:nth-child(2){height:248px;transform:translateX(-48px) rotate(-12deg);animation-delay:-4.3s}
.foreground-grass span:nth-child(3){height:224px;transform:translateX(-18px) rotate(-2deg);animation-delay:-.6s}
.foreground-grass span:nth-child(4){height:190px;transform:translateX(12px) rotate(11deg);animation-delay:-3.2s}
.foreground-grass span:nth-child(5){height:165px;transform:translateX(41px) rotate(20deg);animation-delay:-1.4s}
.foreground-grass span:nth-child(6){height:132px;transform:translateX(65px) rotate(30deg);animation-delay:-5s}

.bubble-field { z-index:6; opacity:.72; }
.bubble-field i { border-color:rgba(225,255,252,.5); box-shadow:inset 2px 2px 4px rgba(255,255,255,.30),0 0 8px rgba(190,249,245,.13); }
.aquarium-3d { z-index:4; }
.fish-label-layer { z-index:8; }
.scene-topbar { z-index:50; }

@media (max-width:760px){
  .distant-reef{width:42vw;min-width:180px}.seaweed-cluster{opacity:.48}.foreground-grass{width:180px;height:210px}.rock-cluster{transform:scale(.72);transform-origin:bottom left}.rock-right{transform:scale(.62) scaleX(-1);transform-origin:bottom right}
}
@media (prefers-reduced-motion: reduce){.surface-shimmer,.caustic-layer,.seaweed-cluster span,.foreground-grass span{animation:none!important}}

/* Aquarium visual pass v0.7 — photorealistic/stylized reef backdrop with subtle live overlays */
.aquarium-page { background:#073f5d; }
.aquarium {
  background:#073f5d;
}
.aquarium-background { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.realistic-reef-background {
  position:absolute;
  inset:-1.5%;
  background-image:url('/assets/backgrounds/aquarium-reef-v1.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.025);
  filter:saturate(.96) contrast(1.02) brightness(.94);
}
.realistic-reef-background::after {
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(179,244,255,.04) 0%,rgba(0,72,116,.03) 45%,rgba(0,36,62,.14) 100%),
    radial-gradient(ellipse at 50% 42%,transparent 0 43%,rgba(0,37,61,.10) 100%);
}
/* Keep the scene alive without covering the artwork with drawn decoration. */
.aquarium .surface-shimmer {
  left:-8%; right:-8%; top:-5%; height:26%;
  opacity:.25;
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0));
  filter:blur(4px);
  animation:surface-shimmer 8s ease-in-out infinite alternate;
}
.aquarium .caustic-layer {
  inset:-8%;
  z-index:1;
  opacity:.08;
  background:repeating-radial-gradient(ellipse at 50% -12%,transparent 0 36px,rgba(255,255,255,.48) 39px 41px,transparent 44px 79px);
  background-size:300px 190px;
  mix-blend-mode:screen;
  animation:caustic-drift 17s linear infinite;
}
.aquarium .water-rays {
  z-index:1;
  inset:-12% -10% 18%;
  opacity:.09;
  background:repeating-linear-gradient(103deg,transparent 0 11%,rgba(231,255,255,.42) 12% 13.5%,transparent 15% 25%);
  filter:blur(4px);
  mix-blend-mode:screen;
}
.bubble-field { z-index:6; opacity:.48; }
.aquarium-3d { z-index:4; }
.fish-label-layer { z-index:8; }

/* Interactive exhibition controls v0.8 */
textarea { width:100%; padding:14px 15px; border:1px solid #cad5da; border-radius:13px; background:white; outline:none; resize:vertical; min-height:96px; font:inherit; color:var(--ink); }
textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(230,84,139,.12); }
.scene-actions .ghost.is-active { background:rgba(255,255,255,.92); color:#173346; border-color:rgba(255,255,255,.92); }
.work-card { width:min(520px,calc(100% - 30px)); padding:20px 22px 18px; }
.work-card-kicker { color:var(--accent); font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; margin-bottom:6px; }
.work-card-title { font-weight:800; color:#355467 !important; margin-bottom:9px !important; }
.work-card-description { color:#355467 !important; line-height:1.48; font-size:15px; margin-top:8px !important; }
.work-card-help { margin-top:12px; padding-top:10px; border-top:1px solid #e5ecef; color:#82929c; font-size:12px; }
.aquarium-3d { touch-action:manipulation; }

/* Exhibition management v1.0 */
.scene-menu{position:fixed;right:18px;top:76px;z-index:80;width:min(280px,calc(100vw - 36px));padding:8px;background:rgba(255,255,255,.97);border-radius:18px;box-shadow:0 18px 55px rgba(0,35,55,.3);backdrop-filter:blur(14px)}
.scene-menu[hidden],.manager-modal[hidden]{display:none!important}.scene-menu-item{width:100%;display:flex;align-items:center;text-align:left;padding:13px 14px;border:0;border-radius:12px;background:transparent;color:#183347;font-weight:800;text-decoration:none;cursor:pointer}.scene-menu-item:hover{background:#eff7f8}.scene-menu-item.danger{color:#b63355}.danger-button{background:#fff0f3;color:#b63355;border:1px solid #f0b8c6;padding:10px 14px;border-radius:12px;font-weight:800}.work-card-actions{margin-top:14px}.manager-modal{position:fixed;inset:0;z-index:100;background:rgba(5,36,52,.55);display:grid;place-items:center;padding:18px;backdrop-filter:blur(5px)}.manager-card{width:min(620px,100%);max-height:min(78vh,720px);overflow:auto;background:#fff;border-radius:26px;padding:26px;box-shadow:0 24px 80px rgba(0,25,40,.35);position:relative}.manager-card h2{font-size:32px;margin:8px 38px 8px 0}.manager-close{position:absolute;right:14px;top:14px;background:#eef4f5;color:#183347;width:38px;height:38px;padding:0;border-radius:50%;font-size:22px}.manager-help{color:#6d7f8b;line-height:1.45}.saved-list{display:grid;gap:9px;margin:14px 0 20px}.saved-exhibition{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid #dce6e9;border-radius:14px;text-decoration:none;color:#183347;background:#fff}.saved-exhibition:hover{border-color:#e6548b;box-shadow:0 7px 20px rgba(24,51,71,.08)}.saved-exhibition.current{border-color:#e6548b;background:#fff7fa}.saved-exhibition strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-exhibition span{font-size:12px;color:#738692;white-space:nowrap}.home-saved{margin-top:28px;padding-top:22px;border-top:1px solid #e7ecee}.home-saved h2{margin:0 0 10px;font-size:24px}.home-saved .saved-list{margin-bottom:0}
@media(max-width:900px){.scene-topbar{align-items:flex-start}.scene-actions{max-width:70vw}.scene-actions .button,.scene-actions button{padding:10px 12px}.scene-menu{top:132px}}

/* v1.1 — product dashboard */
.home-v11 {
  min-height:100vh;
  margin:0;
  background:
    linear-gradient(180deg,rgba(3,42,67,.18),rgba(3,42,67,.54)),
    url('/assets/backgrounds/aquarium-reef-v1.png') center/cover fixed no-repeat;
}
.home-dashboard { width:min(1180px,calc(100% - 32px)); margin:0 auto; padding:34px 0 54px; }
.home-product-card {
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(340px,.94fr); gap:28px;
  background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.7); border-radius:34px;
  box-shadow:0 28px 90px rgba(0,32,50,.34); padding:clamp(26px,4vw,50px); backdrop-filter:blur(18px);
}
.home-product-copy h1 { margin:14px 0 18px; font-size:clamp(46px,6vw,76px); }
.home-product-copy .lead { margin:0; max-width:720px; }
.home-badge-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.version-badge { display:inline-flex; align-items:center; padding:6px 9px; border-radius:999px; background:#183347; color:#fff; font-size:11px; font-weight:850; letter-spacing:.04em; }
.feature-chips { display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 26px; }
.feature-chips span { padding:8px 11px; border-radius:999px; background:#eef7f8; color:#355467; font-size:12px; font-weight:800; }
.create-panel { padding:20px; border-radius:22px; background:#f8fbfb; border:1px solid #ddebed; }
.create-panel label { display:block; margin-bottom:9px; }
.create-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; }
.create-row input { min-width:0; }
.home-quick-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }
.home-reef-preview {
  position:relative; min-height:500px; border-radius:28px; overflow:hidden;
  background:url('/assets/backgrounds/aquarium-reef-v1.png') center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35),0 18px 45px rgba(7,62,83,.22);
}
.home-reef-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,42,69,.18) 48%,rgba(0,28,48,.52)); }
.home-preview-shine { position:absolute; inset:-10% -20% 38%; z-index:1; background:repeating-linear-gradient(104deg,transparent 0 13%,rgba(255,255,255,.18) 14% 16%,transparent 18% 29%); filter:blur(5px); opacity:.45; }
.home-preview-copy { position:absolute; z-index:2; left:22px; right:22px; bottom:22px; padding:18px; border-radius:20px; background:rgba(4,45,68,.56); color:#fff; backdrop-filter:blur(10px); }
.home-preview-copy strong { display:block; font-size:24px; line-height:1.1; margin:4px 0 8px; }
.home-preview-copy small { display:block; color:rgba(255,255,255,.82); line-height:1.45; }
.preview-kicker { font-size:11px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; color:#bff7ff; }
.saved-dashboard { margin-top:22px; padding:26px; background:rgba(255,255,255,.94); border-radius:28px; box-shadow:0 20px 70px rgba(0,32,50,.24); backdrop-filter:blur(16px); }
.saved-heading { display:flex; justify-content:space-between; align-items:end; gap:18px; margin-bottom:16px; }
.saved-heading h2 { margin:6px 0 0; font-size:32px; }
.saved-hint { color:#6d7f8b; font-size:13px; max-width:340px; text-align:right; }
.saved-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; }
.saved-card { display:flex; min-height:104px; justify-content:space-between; gap:12px; align-items:end; padding:17px 18px; border-radius:18px; border:1px solid #dce8eb; text-decoration:none; color:#183347; background:#fff; transition:.18s ease; }
.saved-card:hover { transform:translateY(-2px); border-color:#e6548b; box-shadow:0 12px 28px rgba(24,51,71,.10); }
.saved-card.current { background:#fff7fa; border-color:#e6548b; }
.saved-card strong { display:block; margin-top:5px; font-size:17px; }
.saved-card-label { font-size:10px; color:#e6548b; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.saved-open { font-size:12px; color:#6d7f8b; white-space:nowrap; }
.saved-empty { grid-column:1/-1; padding:24px; border:1px dashed #c9dade; border-radius:18px; color:#6d7f8b; }
.saved-empty strong { display:block; color:#183347; margin-bottom:5px; }
@media(max-width:900px){
  .home-product-card{grid-template-columns:1fr}.home-reef-preview{min-height:330px}.create-row{grid-template-columns:1fr}.saved-heading{align-items:flex-start;flex-direction:column}.saved-hint{text-align:left}
}

/* v1.1 — exhibition management stays visible beside the title */
.scene-title { display:flex; align-items:center; gap:12px; padding:10px 12px 10px 15px; max-width:min(620px,58vw); }
.scene-title-main { min-width:0; }
.scene-title-main strong { max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scene-title-controls { margin-left:4px; }
.scene-manage-button { background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.38); border-radius:11px; padding:8px 10px; font-size:12px; font-weight:850; white-space:nowrap; }
.scene-manage-button:hover { background:rgba(255,255,255,.26); }
.scene-menu { left:18px; right:auto; top:78px; }
@media(max-width:900px){
  .scene-title{max-width:62vw;align-items:flex-start;flex-direction:column;gap:7px}.scene-title-controls{margin-left:0}.scene-menu{top:118px}.scene-actions{max-width:58vw}
}
.card-action-status{display:inline-block;margin-left:10px;color:#9a405c;font-size:12px;font-weight:700;vertical-align:middle}.danger-button[data-confirming="1"]{background:#b63355;color:#fff;border-color:#b63355}.danger-button:disabled{opacity:.65;cursor:wait}

/* v1.8 — dense cheshuychataya fish is a true single 2D sprite, not a two-sided WebGL sheet */
.fish-sprite-2d{position:absolute;left:0;top:0;height:auto;max-width:none;will-change:transform,width;transform-origin:center center;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 6px 5px rgba(0,35,55,.18));}
.fish-sprite-2d.is-selected{filter:drop-shadow(0 9px 10px rgba(0,35,55,.28));}

/* v2.9.0 — world selection + meadow presentation */
.world-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 18px}
.world-option{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:20px;border:1px solid #d7e6ea;background:#fff;cursor:pointer;box-shadow:0 8px 22px rgba(24,51,71,.06);transition:.18s ease}
.world-option:hover{transform:translateY(-1px);border-color:#e6548b;box-shadow:0 14px 30px rgba(24,51,71,.11)}
.world-option.is-active{border-color:#e6548b;background:#fff7fa;box-shadow:0 12px 32px rgba(230,84,139,.12)}
.world-option-title{font-weight:900;font-size:19px;color:#183347}
.world-option small{color:#6d7f8b;line-height:1.42}
.world-option input{position:absolute;opacity:0;pointer-events:none}
.world-option-kicker{font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:#e6548b}
.home-product-copy .create-panel .world-inline-note{margin-top:8px;color:#6d7f8b;font-size:12px}
.home-reef-preview.home-preview-meadow{background:url('/assets/backgrounds/meadow-v1.png') center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 18px 45px rgba(68,99,24,.18)}
.home-reef-preview.home-preview-meadow::after{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(38,84,26,.08) 38%,rgba(29,62,20,.44))}
.home-preview-meadow .preview-kicker{color:#efffd0}
.home-preview-meadow .home-preview-copy{background:rgba(43,79,26,.46)}
.saved-card-world{display:block;margin-top:4px;font-size:12px;color:#6d7f8b}
.meadow-page{background:#8acb5a}
.meadow-page .aquarium,.meadow-page .aquarium-page{background:#8acb5a}
.meadow-page .realistic-reef-background{background-image:url('/assets/backgrounds/meadow-v1.png');filter:saturate(1.02) contrast(1.01) brightness(1.01)}
.meadow-page .realistic-reef-background::after{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0) 48%,rgba(34,83,17,.08) 100%)}
.meadow-page .surface-shimmer,.meadow-page .caustic-layer,.meadow-page .water-rays,.meadow-page .bubble-field{display:none!important}
.meadow-page .scene-title,.meadow-page .scene-actions .ghost,.meadow-page .scene-actions .button.ghost,.meadow-page .scene-manage-button{background:rgba(58,94,31,.58);border-color:rgba(245,255,234,.36)}
.meadow-page .scene-title,.meadow-page .scene-actions .ghost,.meadow-page .scene-actions .button.ghost,.meadow-page .scene-actions .button.primary,.meadow-page .scene-manage-button{color:#fff}
.meadow-page .scene-actions .button.primary{background:#f06597;border-color:#f06597}
.meadow-page .fish-author-label{background:rgba(255,255,255,.92);color:#33521f}
.meadow-page .empty-scene h2,.meadow-page .empty-scene p{color:#1f3312}
.template-links .is-hidden{display:none!important}
.add-card .world-badge{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;background:#eef7f8;color:#355467;font-size:11px;font-weight:850;margin-left:8px}
.print-world-note{font-size:12px;color:#667780}
@media(max-width:760px){.world-picker{grid-template-columns:1fr}}

/* Hide any world art until the exhibition metadata tells us which world to show. */
body.world-pending{background:#eef2eb!important}
body.world-pending #aquarium{visibility:hidden}


.home-reef-preview.home-preview-birch{background:url('/assets/backgrounds/birch-tree-v2.png') center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 18px 45px rgba(82,104,38,.18)}
.home-reef-preview.home-preview-birch::after{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(72,86,28,.06) 35%,rgba(40,52,20,.46))}
.home-preview-birch .preview-kicker{color:#f7f7d6}
.home-preview-birch .home-preview-copy{background:rgba(52,69,27,.42)}
.birch-page{background:#dff0ff}
.birch-page .aquarium-background{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:url('/assets/backgrounds/birch-tree-v2.png') center/cover no-repeat}
.birch-page .realistic-reef-background{display:none}
.birch-page .surface-shimmer{display:none}
.birch-page .caustic-layer{display:none}
.birch-page .water-rays{display:none}
.birch-page .bubble-field{display:none}
.birch-page .scene-title{background:rgba(52,84,37,.58)}
.birch-page .work-card-help{color:#708067}
.birch-page .ghost.is-active{background:rgba(255,255,255,.9);color:#2f4a22;border-color:rgba(255,255,255,.95)}

.birch-page .aquarium::before,.birch-page .aquarium::after{display:none!important}
.birch-page .aquarium{background:#9bcf78}
.birch-page .scene-actions .ghost,.birch-page .scene-actions .button.ghost,.birch-page .scene-manage-button{background:rgba(48,79,31,.58);border-color:rgba(255,255,255,.38);color:#fff}
.birch-page .scene-actions .button.primary{background:#f06597;color:#fff}
.birch-page .fish-author-label{background:rgba(255,255,255,.94);color:#365327}

/* Tree world: species picker + oak scene */
.tree-type-picker{margin:-4px 0 18px;padding:14px;border:1px solid #dfe9df;border-radius:18px;background:#f8fbf5}
.tree-type-picker>label{display:block;margin-bottom:10px;font-weight:800;color:#365327}
.tree-type-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tree-type-option{appearance:none;border:1px solid #d5e0d0;background:#fff;border-radius:16px;padding:13px 15px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;color:#304b25;transition:.18s ease}
.tree-type-option strong{font-size:17px}.tree-type-option span{font-size:12px;color:#72806b}.tree-type-option:hover{transform:translateY(-1px);border-color:#799b61}.tree-type-option.is-active{border-color:#658c4e;background:#f1f8ea;box-shadow:0 8px 20px rgba(73,111,47,.12)}
@media(max-width:760px){.tree-type-options{grid-template-columns:1fr}}
.home-reef-preview.home-preview-oak{background:url('/assets/backgrounds/oak-tree-v1.png') center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 18px 45px rgba(91,72,37,.18)}
.home-reef-preview.home-preview-oak::after{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(87,67,26,.05) 38%,rgba(52,41,18,.48))}
.home-preview-oak .preview-kicker{color:#fff0bd}
.home-preview-oak .home-preview-copy{background:rgba(61,47,21,.44)}
.home-reef-preview.home-preview-maple{background:url('/assets/backgrounds/maple-tree-v1.png') center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 18px 45px rgba(132,81,29,.18)}
.home-reef-preview.home-preview-maple::after{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(120,69,19,.06) 38%,rgba(79,44,12,.48))}
.home-preview-maple .preview-kicker{color:#fff0c2}
.home-preview-maple .home-preview-copy{background:rgba(92,53,16,.42)}
.maple-page{background:#f4d6a3}
.maple-page .aquarium-background{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:url('/assets/backgrounds/maple-tree-v1.png') center/cover no-repeat}
.maple-page .aquarium{background:#d4a367}
.maple-page .scene-title{background:rgba(108,63,18,.62)}
.maple-page .work-card-help{color:#8c6234}
.tree-page .realistic-reef-background,.tree-page .surface-shimmer,.tree-page .caustic-layer,.tree-page .water-rays,.tree-page .bubble-field{display:none}
.tree-page .aquarium::before,.tree-page .aquarium::after{display:none!important}
.tree-page .scene-actions .ghost,.tree-page .scene-actions .button.ghost,.tree-page .scene-manage-button{background:rgba(48,79,31,.58);border-color:rgba(255,255,255,.38);color:#fff}
.tree-page .scene-actions .button.primary{background:#f06597;color:#fff}
.tree-page .fish-author-label{background:rgba(255,255,255,.94);color:#365327}
.oak-page{background:#cde3a9}
.oak-page .aquarium-background{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:url('/assets/backgrounds/oak-tree-v1.png') center/cover no-repeat}
.oak-page .aquarium{background:#9fc66f}
.oak-page .scene-title{background:rgba(74,58,29,.62)}
.oak-page .work-card-help{color:#76633f}

.home-reef-preview.home-preview-rowan{background:url('/assets/backgrounds/rowan-tree-v1.png') center/cover no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 18px 45px rgba(112,61,27,.18)}
.home-reef-preview.home-preview-rowan::after{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(90,48,20,.05) 38%,rgba(61,39,17,.46))}
.home-preview-rowan .preview-kicker{color:#fff4cf}
.home-preview-rowan .home-preview-copy{background:rgba(67,53,24,.44)}
.rowan-page{background:#d7e9b1}
.rowan-page .aquarium-background{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:url('/assets/backgrounds/rowan-tree-v1.png') center/cover no-repeat}
.rowan-page .aquarium{background:#a9c976}
.rowan-page .scene-title{background:rgba(78,68,32,.62)}
.rowan-page .work-card-help{color:#6f6b3d}