:root{--ink:#102b35;--muted:#799097;--line:#e5eeec;--paper:#f7faf8;--teal:#2e8f83;--deep:#071b24;--orange:#e79a60}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f8f6;color:var(--ink);font-family:Manrope,"Noto Sans SC",sans-serif}.app-shell{max-width:1600px;margin:auto;display:flex;min-height:100vh;background:#fbfcfa}.sidebar{width:248px;flex-shrink:0;background:#f7faf8;border-right:1px solid #eaf0ed;padding:30px 18px 22px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{display:flex;align-items:center;gap:11px;padding:0 10px 38px;color:inherit;text-decoration:none}.brand-mark{width:38px;height:38px;background:#dfefea;border-radius:12px;display:grid;place-items:center}.brand-mark svg{width:27px;fill:#378f82}.brand-copy{display:grid;gap:2px}.brand-copy strong{font-size:15px;letter-spacing:.08em}.brand-copy small,.side-label,.eyebrow,.art-label,.hero-index,.dialog-eyebrow{font-family:"DM Mono",monospace;letter-spacing:.12em}.brand-copy small{font-size:8px;color:#8ba1a3}.side-label{font-size:9px;color:#9aaead;padding:0 12px 12px}.side-nav{display:grid;gap:5px}.nav-item{height:43px;padding:0 12px;border-radius:8px;display:flex;align-items:center;gap:11px;text-decoration:none;color:#6e8488;font-size:12px;font-weight:600}.nav-item.active{background:#e7f2ed;color:#286f67}.nav-icon{font-size:16px;width:18px;text-align:center}.nav-count{margin-left:auto;font-size:10px;color:#6e9089}.sidebar-bottom{margin-top:auto}.journey-card{margin:0 4px 20px;background:#edf5f1;border-radius:10px;padding:15px 13px;display:flex;gap:12px;align-items:center}.journey-icon{font-size:20px;color:#4c9b8d}.journey-card div{display:grid;gap:4px}.journey-card small,.profile small{font-size:10px;color:#8da19e}.journey-card strong{font-size:18px}.journey-card em{font-style:normal;font-size:10px;color:#829895;font-weight:500}.side-note{font-size:11px;line-height:1.9;color:#839a99;padding:0 13px 22px}.profile{border-top:1px solid #e7eeeb;padding:18px 4px 0;display:flex;align-items:center;gap:10px}.avatar,.top-avatar{background:#d8eae3;color:#3e8075;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700}.avatar{height:32px;width:32px}.profile div:nth-child(2){display:grid;gap:3px}.profile strong{font-size:10px}.more{margin-left:auto;color:#91a5a1;letter-spacing:2px}.main-content{flex:1;min-width:0;padding:0 56px}.topbar{height:72px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #edf1ef}.breadcrumb{font-size:11px;color:#829598}.breadcrumb span{padding:0 8px;color:#bfd0ca}.top-actions{display:flex;align-items:center;gap:17px}.sync-status{font-size:10px;color:#849a97}.sync-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#62ad83;margin-right:6px}.icon-button{border:1px solid #e7eeeb;background:white;color:#819592;border-radius:7px;width:30px;height:30px;font-size:18px;cursor:pointer}.top-avatar{width:29px;height:29px}.hero{height:318px;margin-top:25px;position:relative;overflow:hidden;border-radius:12px;background:linear-gradient(105deg,#e3f0e9 0%,#d5eae2 57%,#c6e0d9 100%);padding:44px 48px;display:flex;align-items:center}.hero-copy{position:relative;z-index:2}.eyebrow{font-size:9px;color:#639189;display:flex;align-items:center;gap:9px}.eyebrow-line{width:19px;height:1px;background:#76aa9e;display:inline-block}.hero h1{font-size:34px;letter-spacing:.01em;line-height:1.36;margin:17px 0 11px;font-weight:700;color:#173d45}.hero h1 span{color:#397d73}.hero-copy p{font-size:11px;line-height:1.9;color:#698884;margin:0 0 17px}.primary-button{border:0;border-radius:6px;background:#287f76;color:white;padding:11px 15px;font:600 11px Manrope,"Noto Sans SC",sans-serif;box-shadow:0 5px 12px #2b837328;cursor:pointer;transition:.2s}.primary-button:hover{background:#216e68;transform:translateY(-1px)}.primary-button span{padding-left:12px;font-size:15px}.hero-art{position:absolute;right:8%;top:0;width:45%;height:100%;overflow:hidden}.sun-glow{position:absolute;top:51px;right:130px;width:184px;height:184px;border-radius:50%;background:radial-gradient(circle,#fff6d2a6 0%,#d5eae000 70%)}.orbit{position:absolute;border:1px solid #8cbab04a;border-radius:50%;transform:rotate(-22deg)}.orbit-one{width:520px;height:195px;right:-27px;top:83px}.orbit-two{width:420px;height:140px;right:32px;top:109px}.hero-fish{position:absolute;font-size:95px;right:155px;top:98px;transform:rotate(-8deg);filter:drop-shadow(0 14px 10px #438f7830);opacity:.91}.hero-fish-small{position:absolute;font-size:38px;right:61px;top:173px;transform:rotate(14deg);opacity:.75}.art-label{position:absolute;font-size:8px;color:#729e95}.art-label b{display:block;font-size:9px;color:#447e74;margin-top:5px;font-weight:500}.label-a{right:38px;top:73px}.label-b{right:31px;bottom:55px}.art-coordinate{position:absolute;left:6px;bottom:48px;font:8px/1.7 "DM Mono",monospace;color:#81a59d}.bubble{position:absolute;border:1px solid #fff9;border-radius:50%}.bubble-a{width:9px;height:9px;top:72px;left:42%}.bubble-b{width:5px;height:5px;top:100px;left:35%}.hero-index{position:absolute;right:25px;bottom:22px;display:grid;text-align:right;gap:5px;color:#87a69f;font-size:8px}.hero-index strong{font-weight:400;color:#528a7e;font-size:10px}.stats-row{display:flex;align-items:center;margin:20px 0 39px;padding:18px 22px;border:1px solid #eaf0ed;border-radius:9px;background:white;min-height:88px}.stat-item{display:flex;align-items:center;gap:11px;width:19%;border-right:1px solid #edf1ef}.stat-icon{font-size:18px;color:#69a497}.stat-item div{display:grid;gap:4px}.stat-item small{font-size:9px;color:#8ba09e}.stat-item strong{font-size:17px}.stat-item em{font-style:normal;font-size:9px;color:#93a5a0;font-weight:500}.progress-wrap{padding-left:23px;flex:1}.progress-head{display:flex;justify-content:space-between;font-size:9px;color:#79908d;margin-bottom:9px}.progress-head b{color:#3d746b;font-weight:600}.progress-track{height:5px;border-radius:6px;background:#eaf1ed;overflow:hidden}.progress-track i{display:block;width:0;height:100%;border-radius:6px;background:#5baf97;transition:width .4s}.progress-wrap>small{display:block;font-size:8px;color:#a1b0ac;margin-top:7px}.collection-section{padding-bottom:41px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}.section-heading h2,.achievement-copy h2{margin:9px 0 0;font-size:21px;letter-spacing:.02em}.section-heading h2 span{margin-left:7px;font:9px "DM Mono",monospace;letter-spacing:.13em;color:#9aadaa;vertical-align:middle}.text-button{border:0;background:none;color:#4b8c80;font:600 10px Manrope,"Noto Sans SC",sans-serif;cursor:pointer;padding:8px 0}.text-button span{padding-left:7px;font-size:14px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px}.filter-tabs{display:flex;gap:3px;border-bottom:1px solid #e7eeeb}.filter-tab{border:0;background:none;color:#94a6a2;padding:9px 13px 10px;font:500 10px Manrope,"Noto Sans SC",sans-serif;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}.filter-tab span{font:9px "DM Mono",monospace;padding-left:4px;color:#afbfbb}.filter-tab.selected{color:#387c72;border-color:#4e9c8d}.filter-tab.selected span{color:#4e9c8d}.search-box{height:34px;width:235px;border:1px solid #e6eeea;border-radius:6px;background:white;display:flex;align-items:center;padding:0 8px;gap:7px;color:#89a29c}.search-box>span{font-size:19px;transform:rotate(-20deg)}.search-box input{border:0;outline:none;min-width:0;flex:1;background:transparent;font:10px "Noto Sans SC",sans-serif;color:var(--ink)}.search-box kbd{font:8px "DM Mono",monospace;color:#a2b2ae;background:#f5f8f6;padding:3px 4px;border-radius:3px}.category-row{display:flex;gap:7px;margin:15px 0 16px}.category-chip{border:1px solid #e5eeea;border-radius:20px;background:white;color:#819794;padding:6px 12px;font:10px "Noto Sans SC",sans-serif;cursor:pointer}.category-chip.selected{background:#e9f3ee;color:#42877a;border-color:#e9f3ee}.fish-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.fish-card{position:relative;background:white;border:1px solid #eaf0ed;border-radius:8px;overflow:hidden;min-width:0;transition:transform .2s,border-color .2s,box-shadow .2s}.fish-card:hover{transform:translateY(-3px);border-color:#d1e5dc;box-shadow:0 9px 22px #153b3410}.fish-visual{height:112px;position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,#eaf4ee,#d7ebe5)}.fish-visual:before,.fish-visual:after{content:"";position:absolute;border:1px solid #ffffff8c;border-radius:50%;width:130px;height:58px;transform:rotate(-20deg)}.fish-visual:after{width:165px;height:72px;transform:rotate(22deg)}.fish-visual .fish-emoji{font-size:50px;filter:drop-shadow(0 6px 5px #1a4d3922);z-index:1;transition:transform .2s}.fish-card:hover .fish-emoji{transform:scale(1.1) rotate(-4deg)}.fish-visual .water-label{position:absolute;left:10px;top:9px;font:7px "DM Mono",monospace;letter-spacing:.12em;color:#6c9a90;z-index:2}.fish-visual .index-label{position:absolute;right:10px;top:9px;font:8px "DM Mono",monospace;color:#86a39d;z-index:2}.fish-visual.locked .fish-emoji{filter:grayscale(1);opacity:.42}.fish-visual.locked:before,.fish-visual.locked:after{border-color:#fff7}.fish-visual.locked .water-label{color:#9aadaa}.fish-body{padding:11px 12px 12px}.fish-title-row{display:flex;align-items:center;gap:5px}.fish-title{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fish-latin{font:italic 8px Manrope,sans-serif;color:#9aadaa;margin:4px 0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fish-meta{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f0f3f1;padding-top:8px;font-size:8px;color:#8da19d}.fish-meta span:first-child{display:flex;align-items:center;gap:4px}.type-dot{width:5px;height:5px;border-radius:50%;display:inline-block;background:#68a691}.state-chip{border-radius:3px;padding:3px 5px;background:#f1f5f2;color:#9badaa;font-size:7px}.state-chip.owned{color:#438775;background:#e8f3ec}.unlock-card{position:absolute;right:8px;bottom:8px;width:25px;height:25px;border:0;border-radius:50%;background:#fff;color:#4d9385;box-shadow:0 2px 9px #1b4c3a20;font-size:14px;cursor:pointer;opacity:0;transform:translateY(3px);transition:.2s}.fish-card:hover .unlock-card,.unlock-card:focus{opacity:1;transform:none}.empty-state{text-align:center;padding:48px 0;color:#91a5a0}.empty-state span{font-size:28px}.empty-state strong{display:block;font-size:13px;color:#547c73;margin-top:7px}.empty-state p{font-size:10px}.hidden{display:none!important}.achievements{border-top:1px solid #e9efec;padding:26px 0 29px;display:flex;align-items:center;justify-content:space-between;gap:25px}.achievement-copy{min-width:270px}.achievement-copy h2{font-size:16px}.achievement-copy p{font-size:9px;color:#91a5a0;margin:7px 0}.badge-list{display:flex;gap:10px;flex:1;justify-content:flex-end}.badge-item{width:110px;display:flex;align-items:center;gap:7px;opacity:.45;filter:grayscale(1)}.badge-item.earned{opacity:1;filter:none}.badge-medal{width:35px;height:35px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#f7df9b,#d49e45);color:white;box-shadow:inset 0 0 0 3px #fff7,0 2px 6px #87601a2c;font-size:15px}.badge-item:nth-child(2) .badge-medal{background:linear-gradient(145deg,#b7d8cf,#4f9b8a)}.badge-item:nth-child(3) .badge-medal{background:linear-gradient(145deg,#d9c4eb,#9270ad)}.badge-item div:last-child{display:grid;gap:3px}.badge-item strong{font-size:8px}.badge-item small{font-size:7px;color:#98aaa5}.badge-item .badge-medal{position:relative}.badge-item .badge-medal:after{content:"";position:absolute;width:12px;height:11px;border-left:4px solid #e3bd68;border-right:4px solid #d9a64a;border-bottom:4px solid transparent;bottom:-8px;z-index:-1}footer{height:43px;border-top:1px solid #edf1ef;display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#a0afab}footer i{font-style:normal;color:#6da293;padding:0 4px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);padding:11px 16px;background:#12363b;color:white;border-radius:7px;font-size:11px;box-shadow:0 8px 25px #071b2430;opacity:0;pointer-events:none;transition:.24s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}.unlock-dialog{border:0;border-radius:16px;padding:33px 40px 29px;text-align:center;width:min(380px,calc(100vw - 32px));background:#fbfdfa;color:var(--ink);box-shadow:0 24px 90px #071b2470;overflow:visible}.unlock-dialog::backdrop{background:#062128a8;backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:23px;color:#8ba19d;cursor:pointer}.dialog-spark{font-size:18px;color:#d7a341}.dialog-eyebrow{font-size:8px;color:#8a9e98;margin-top:7px}.dialog-fish{font-size:62px;margin:10px 0 0;filter:drop-shadow(0 6px 7px #347f6a30)}.unlock-dialog h2{font-size:20px;margin:6px 0}.unlock-dialog>p{font-size:10px;color:#829894;margin:0}.medal{width:94px;height:115px;margin:22px auto 16px;position:relative}.medal-ribbon{position:absolute;top:63px;left:15px;width:64px;height:52px;background:linear-gradient(95deg,#cb8f35 0 36%,#f2cb6c 36% 64%,#c58a30 64%);clip-path:polygon(0 0,50% 13%,100% 0,88% 100%,50% 78%,12% 100%)}.medal-face{position:absolute;left:11px;top:0;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#fff0b4,#e4b955 65%,#b57b2b);border:4px solid #fff4d6;box-shadow:0 3px 12px #88632740,inset 0 0 0 1px #b88232;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#936522}.medal-face span{font-size:12px}.medal-face small{font-size:7px}.medal-face b{font-size:11px}.dialog-button{min-width:190px}
@media(max-width:1080px){.sidebar{width:210px}.main-content{padding:0 32px}.fish-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-art{right:0;width:47%}.badge-item{width:93px}}
@media(max-width:760px){.sidebar{display:none}.main-content{padding:0 18px}.topbar{height:58px}.hero{height:300px;padding:30px 25px;align-items:flex-start}.hero h1{font-size:28px}.hero-art{width:55%;right:-8%;opacity:.68}.hero-index{right:15px;bottom:12px}.stats-row{padding:14px;flex-wrap:wrap;gap:13px}.stat-item{width:29%;border:0}.progress-wrap{flex-basis:100%;padding:5px 0 0}.fish-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.fish-visual{height:105px}.toolbar{align-items:flex-start;flex-direction:column}.search-box{width:100%}.section-heading{align-items:flex-start}.section-heading h2{font-size:18px}.text-button{font-size:9px}.achievements{align-items:flex-start;flex-direction:column}.badge-list{justify-content:flex-start;flex-wrap:wrap}.badge-item{width:30%}footer{gap:10px;font-size:7px}.sync-status{display:none}}
.fish-card{cursor:pointer}.fish-card:focus-visible{outline:2px solid #65a996;outline-offset:2px}.unlock-card{opacity:.75;transform:none}.fish-card:hover .unlock-card{opacity:1}
.profile-open-hint{margin-left:auto;font-size:7px;color:#9aacA6;white-space:nowrap}.fish-title-row{justify-content:space-between}
.profile-dialog{border:0;border-radius:15px;padding:28px 30px;width:min(760px,calc(100vw - 28px));max-height:min(90vh,900px);overflow:auto;background:#fbfdfa;color:var(--ink);box-shadow:0 24px 90px #071b2470}.profile-dialog::backdrop{background:#062128a8;backdrop-filter:blur(5px)}.profile-dialog .dialog-close{position:sticky;float:right;top:0;z-index:2;margin:-15px -17px 0 0}.profile-kicker{font:8px "DM Mono",monospace;letter-spacing:.16em;color:#7fa39a}.profile-title-row{display:flex;align-items:center;gap:13px;margin-top:10px}.profile-emoji{width:57px;height:57px;border-radius:13px;background:#e6f1eb;display:grid;place-items:center;font-size:32px}.profile-title-row h2{font-size:23px;margin:0 0 3px}.profile-title-row em{font:italic 11px Manrope;color:#8da29d}.profile-water{margin-left:auto;padding:6px 10px;border-radius:20px;background:#edf5f0;color:#4d8d7f;font-size:10px}.profile-region{font-size:10px;color:#859a96;margin:13px 0}.profile-summary{font-size:12px;line-height:1.9;background:#f0f6f2;border-left:3px solid #70a995;padding:12px 14px;border-radius:0 7px 7px 0;color:#456d67}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.profile-grid section{padding:13px 14px;background:#fff;border:1px solid #edf1ee;border-radius:8px}.profile-grid h3,.catch-log h3{font-size:11px;margin:0 0 8px;color:#3d7068}.profile-grid p{font-size:10px;line-height:1.8;color:#728985;margin:0}.profile-grid .lure-section{grid-column:1/-1}.lure-list{display:grid;gap:7px}.lure-row{display:flex;gap:12px;align-items:baseline;font-size:9px}.lure-row b{min-width:95px;color:#347e71}.lure-row span{line-height:1.7;color:#768d88}.source-note{font-size:8px;line-height:1.8;color:#9aaaa5;margin:12px 0}.source-note a,.profile-pending a{color:#47887c;text-decoration:none;margin-left:6px}.profile-pending{padding:20px;background:#f5f7f5;border-radius:8px;font-size:10px;color:#899c97;line-height:1.8}.profile-pending b{color:#557b72;font-size:12px}.profile-pending p{margin:8px 0}.catch-log{border-top:1px solid #e9efec;margin-top:19px;padding-top:17px}.catch-log form{display:grid;grid-template-columns:1fr 1fr;gap:10px}.catch-log label{display:grid;gap:5px;color:#849a95;font-size:9px}.catch-log input,.catch-log textarea{width:100%;border:1px solid #e4ece7;border-radius:6px;padding:8px;font:10px "Noto Sans SC",sans-serif;color:var(--ink);background:#fff;outline-color:#8dbdae}.catch-log .notes-field{grid-column:1/-1}.catch-log form button{justify-self:start}.catch-history{margin-top:15px;display:grid;gap:8px}.catch-history>strong{font-size:10px;color:#577a72}.catch-history article{padding:9px 10px;border:1px solid #edf1ee;border-radius:6px;display:flex;flex-wrap:wrap;gap:10px;font-size:9px;color:#81938f}.catch-history time{color:#559083}.catch-history b{font-weight:600;color:#617b76}.catch-history p{flex-basis:100%;margin:0;color:#849893;line-height:1.7}.profile-dialog .primary-button{font-family:"Noto Sans SC",sans-serif}
@media(max-width:600px){.profile-dialog{padding:23px 18px}.profile-grid{grid-template-columns:1fr}.profile-grid .lure-section{grid-column:auto}.catch-log form{grid-template-columns:1fr}.catch-log .notes-field,.photo-field{grid-column:auto}.profile-dialog .dialog-close{margin-right:-8px}}
.photo-field{grid-column:1/-1}.photo-field small{font-size:8px;color:#a0afaa}.photo-preview{display:block;max-width:100%;max-height:180px;object-fit:contain;border-radius:7px;margin-top:5px;background:#edf2ef}.catch-photo{max-width:100%;max-height:180px;object-fit:contain;border-radius:6px;margin:3px 0}.catch-history article .catch-photo{flex-basis:100%;width:auto}

/* Species imagery uses credited photographs rather than emoji illustrations. */
.fish-visual{display:block;background:#dce9e4}
.fish-visual:before,.fish-visual:after{display:none}
.fish-photo{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s,filter .25s,opacity .25s}
.fish-card:hover .fish-photo{transform:scale(1.04)}
.fish-visual.locked .fish-photo{filter:grayscale(.85) brightness(.82);opacity:.78}
.fish-visual.image-unavailable{display:grid;place-items:center;background:linear-gradient(135deg,#eaf1ed,#dbe6e1)}
.fish-visual.image-unavailable:after{display:block;position:static;content:"照片暂不可用";width:auto;height:auto;border:0;border-radius:0;transform:none;color:#718a82;font-size:10px}
.fish-visual .fish-photo:not([src]){display:none}
.photo-credit{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:14px 8px 6px;background:linear-gradient(transparent,#071b24b8);color:#fff;font:7px "Noto Sans SC",sans-serif;opacity:.9}
.photo-credit a{color:inherit;text-decoration:none}
.photo-credit a:hover{text-decoration:underline}
.profile-emoji{display:block;flex:none;object-fit:cover;overflow:hidden;color:transparent}
.profile-emoji:not([src]){background:#e6f1eb}
.profile-photo-credit{display:block;margin-top:5px;color:#668b81;font-size:8px;text-decoration:none}
.profile-photo-credit:hover{text-decoration:underline}
.dialog-fish{display:block;width:210px;height:120px;max-width:100%;object-fit:cover;border-radius:10px;margin:12px auto 0;background:#e6efea}
.dialog-fish:not([src]){visibility:hidden}
.hero-fish,.hero-fish-small{display:none}
@media(max-width:760px){.photo-credit{font-size:6px;padding:12px 6px 5px}.profile-emoji{width:50px;height:50px}.profile-water{font-size:8px;padding:5px 7px}}

/* Soft, photo-led field-guide cards inspired by the supplied reference. */
.collection-section{padding-bottom:54px}
.fish-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.fish-card{display:flex;flex-direction:column;padding:10px;border:1px solid #edf2ed;border-radius:28px;background:#fff;box-shadow:0 12px 32px #304b3b0c;transition:transform .24s,border-color .24s,box-shadow .24s}
.fish-card:nth-child(3n+1){background:#fbfdf9}
.fish-card:nth-child(3n+2){background:#fffdf6}
.fish-card:nth-child(3n){background:#faf9ff}
.fish-card:hover{transform:translateY(-5px);border-color:#dce9df;box-shadow:0 18px 38px #304b3b16}
.fish-visual{height:auto;aspect-ratio:1/1.03;flex:none;border-radius:21px;background:#e9f3e9}
.fish-photo{object-fit:cover}
.fish-visual.locked .fish-photo{filter:grayscale(.35) brightness(.91);opacity:.88}
.fish-visual .water-label{left:13px;top:13px;padding:8px 11px;border:1px solid #ffffffa8;border-radius:18px;background:#ffffffe0;color:#346b54;font:500 9px "Noto Sans SC",sans-serif;letter-spacing:0;box-shadow:0 3px 12px #122d1b12;backdrop-filter:blur(10px)}
.fish-visual .water-label:first-letter{color:#48aa66}
.fish-visual .index-label{right:12px;top:12px;width:36px;height:36px;display:grid;place-items:center;border-radius:13px;background:#ffffffd9;color:#294638;font:600 12px Manrope,sans-serif;letter-spacing:1px;box-shadow:0 3px 12px #122d1b12;backdrop-filter:blur(10px)}
.fish-visual .photo-credit{left:0;right:0;bottom:0;padding:23px 12px 8px;background:linear-gradient(transparent,#071b2485);font-size:7px}
.habitat-float{position:absolute;left:13px;bottom:37px;padding:7px 10px;border-radius:12px;background:#ffffffdf;color:#315e50;font-size:9px;box-shadow:0 3px 12px #122d1b12;backdrop-filter:blur(8px)}
.fish-body{display:flex;flex:1;flex-direction:column;padding:16px 11px 8px}
.fish-title-row{align-items:baseline;gap:8px}
.fish-title{font-size:19px;letter-spacing:.01em}
.profile-open-hint{font-size:8px;color:#709181}
.fish-latin{font-size:10px;margin:5px 0 14px;color:#91a39a}
.fish-meta{padding-top:11px;font-size:9px}
.state-chip{padding:5px 8px;border-radius:12px;font-size:8px}
.unlock-card{position:static;display:block;width:100%;height:41px;margin-top:14px;padding:0 14px;border-radius:22px;background:#153d2f;color:#fff;box-shadow:0 6px 16px #133c2c20;font:600 10px "Noto Sans SC",sans-serif;opacity:1;transform:none}
.unlock-card:hover{background:#24674c;box-shadow:0 8px 18px #133c2c2a}
.fish-card:hover .unlock-card,.unlock-card:focus{opacity:1;transform:none}
.fish-card:focus-visible{outline-offset:4px;border-radius:29px}
.fish-visual.image-unavailable{display:grid;place-items:center;aspect-ratio:1/1.03}
.fish-visual.image-unavailable:after{font-size:12px}
.profile-emoji.image-unavailable,.dialog-fish.image-unavailable{font-size:8px;color:#718a82;background:#e6efea}
@media(max-width:1080px){.fish-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.fish-visual{height:auto}}
@media(max-width:760px){.fish-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.fish-card{padding:7px;border-radius:22px}.fish-visual{border-radius:16px}.fish-visual .water-label{left:8px;top:8px;padding:6px 8px;font-size:7px}.fish-visual .index-label{right:8px;top:8px;width:30px;height:30px;border-radius:10px;font-size:10px}.habitat-float{left:8px;bottom:33px;padding:5px 8px;font-size:8px}.fish-body{padding:12px 7px 6px}.fish-title{font-size:15px}.profile-open-hint{font-size:7px}.fish-latin{font-size:8px;margin:4px 0 10px}.fish-meta{font-size:7px;gap:4px}.state-chip{font-size:7px;padding:4px 6px}.unlock-card{height:36px;margin-top:11px;font-size:9px}.fish-visual .photo-credit{font-size:6px;padding:18px 8px 6px}}
@media(max-width:390px){.fish-grid{grid-template-columns:1fr}.fish-visual{aspect-ratio:1/0.88}.fish-title{font-size:18px}}

/* Visual refresh: airy lavender canvas, crisp typography, and vivid task-card accents. */
:root{--ink:#171522;--muted:#77758a;--line:#e9e6f2;--paper:#fff;--teal:#7868df;--deep:#201d32;--orange:#efc847}
body{background:#f1effa;color:#171522;font-family:Manrope,"Noto Sans SC",sans-serif;letter-spacing:-.01em}
.app-shell{max-width:1680px;background:#f7f6fc}
.sidebar{background:#fbfaff;border-color:#eeecf5;box-shadow:5px 0 28px #3d326308}
.brand-mark{background:#eeeaff}.brand-mark svg{fill:#7968df}
.brand-copy small,.side-label,.eyebrow,.art-label,.hero-index,.dialog-eyebrow{letter-spacing:.08em}
.nav-item{color:#77758a}.nav-item.active{background:#eeeaff;color:#5e4fd0}
.nav-count,.stat-icon,.journey-icon{color:#8171e9}
.journey-card{background:#f0edff}.journey-card strong{color:#241f36}
.hero{background:linear-gradient(115deg,#eeebff 0%,#e6e1ff 53%,#e5eaff 100%);box-shadow:0 12px 34px #604eb00d}
.eyebrow{color:#8679d5}.eyebrow-line{background:#a397ef}
.hero h1{color:#1b1929;letter-spacing:-.035em}.hero h1 span{color:#7666dc}
.hero-copy p{color:#75728a}.hero-index,.art-label{color:#8a83b5}.art-label b,.hero-index strong{color:#6657c7}
.sun-glow{background:radial-gradient(circle,#fff9d7b8 0%,#eeeaff00 70%)}
.orbit{border-color:#9b8de544}.bubble{border-color:#ffffffba}
.stats-row{border-color:#efedf5;box-shadow:0 10px 28px #372c6d0a}
.stat-item{border-color:#efedf5}.stat-item small,.progress-head,.stat-item em{color:#858297}
.stat-item strong{color:#201e2b}.progress-track{background:#ece9f5}.progress-track i{background:linear-gradient(90deg,#8c7af0,#d56ce1)}
.progress-wrap>small{color:#9b98aa}
.section-heading h2,.achievement-copy h2{color:#1d1a29;letter-spacing:-.035em}
.section-heading h2 span{color:#a09caf}.text-button{color:#6758cd}
.filter-tabs{border-color:#e8e5f0}.filter-tab{color:#8b889b}.filter-tab.selected{color:#6555cf;border-color:#8271e7}.filter-tab span{color:#b0adbc}.filter-tab.selected span{color:#7263d8}
.search-box{border-color:#e9e6f1;box-shadow:0 3px 10px #372c6d08}.search-box>span{color:#8373df}.search-box input{color:#242130}.search-box input::placeholder{color:#aaa7b6}.search-box kbd{background:#f2f0f8;color:#8e8a9e}
.category-chip{border-color:#e9e6f1;color:#77748a;background:#fff}.category-chip.selected{background:#eeeaff;color:#6555cf;border-color:#e5e0ff}
.fish-card{border-color:#efedf5;box-shadow:0 12px 30px #382d700d}
.fish-card:nth-child(3n+1){background:#fff}
.fish-card:nth-child(3n+2){background:#fffaff}
.fish-card:nth-child(3n){background:#fffdf6}
.fish-card:hover{border-color:#d9d2ff;box-shadow:0 18px 38px #382d701a}
.fish-visual{background:#eeeaff}
.fish-visual .water-label{color:#584bb3;background:#fffffff0;border-color:#ffffff}
.fish-visual .index-label{color:#343044;background:#fffffff0}
.habitat-float{color:#4c4397;background:#fffffff0}
.fish-title{color:#211e2e;letter-spacing:-.035em}
.profile-open-hint{color:#8073cf}
.fish-latin{color:#9996a7}
.fish-meta{border-color:#f0eef5;color:#858294}
.type-dot{background:#8977e8}
.state-chip{background:#f0edff;color:#7465d5}
.state-chip.owned{background:#e9f8ee;color:#41865d}
.unlock-card{background:#211d32;box-shadow:0 6px 16px #221c3a20}
.unlock-card:hover{background:#7968df;box-shadow:0 8px 18px #7462db35}
.fish-visual.locked .fish-photo{filter:grayscale(.24) brightness(.94)}
.achievements{border-color:#e9e6f1}
.achievement-copy p,.badge-item small{color:#9290a1}
.badge-medal{background:linear-gradient(145deg,#f7d967,#efad44)}
.badge-item:nth-child(2) .badge-medal{background:linear-gradient(145deg,#e8a3e8,#bd67d8)}
.badge-item:nth-child(3) .badge-medal{background:linear-gradient(145deg,#b5dfff,#6a9ee8)}
.badge-item .badge-medal:after{border-left-color:#e5b73d;border-right-color:#d79b30}
footer{border-color:#e9e6f1;color:#9996a6}footer i{color:#8775e9}
.toast{background:#211d32}
.primary-button{background:#7868df;box-shadow:0 6px 16px #7868df30}
.primary-button:hover{background:#6555ca}
.profile-dialog,.unlock-dialog{background:#fff;color:#201d2d;box-shadow:0 24px 90px #2119343d}
.profile-dialog::backdrop,.unlock-dialog::backdrop{background:#241d3d91}
.profile-kicker{color:#8172d9}.profile-title-row h2{color:#211e2d}.profile-water{background:#efedff;color:#695bd1}
.profile-summary{background:#f4f2ff;border-left-color:#8978e7;color:#524b78}
.profile-grid section{border-color:#efedf4}.profile-grid h3,.catch-log h3{color:#5c50a9}
.profile-grid p,.lure-row span{color:#777487}.lure-row b{color:#6759cc}
.source-note{color:#918e9f}.source-note a,.profile-pending a,.profile-photo-credit{color:#6f60d6}
.catch-log{border-color:#ebe8f2}.catch-log input,.catch-log textarea{border-color:#e8e5ef;outline-color:#a99cec}
.catch-history article{border-color:#efedf4;color:#777487}.catch-history time{color:#7b6adc}
.dialog-spark{color:#eead34}.medal-face{background:radial-gradient(circle at 40% 30%,#fff2bb,#e8bc4d 65%,#bd832b)}
.category-chip:focus-visible,.filter-tab:focus-visible,.text-button:focus-visible,.primary-button:focus-visible{outline:2px solid #9b8bea;outline-offset:3px}