* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: #0c191a; color: #e8eee7; font-family: "Segoe UI", Arial, sans-serif; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button:focus, a:focus, input:focus { outline: 2px solid #b9e6c6; outline-offset: 3px; }
button:disabled { opacity: .38; cursor: default; }
main { max-width: 520px; margin: auto; padding: 0 22px; }
.back-to-apps { display: inline-block; padding: 14px 0; min-height: 44px; color: #b1cec0; font-size: 13px; text-decoration: none; }
.back-to-apps:hover { color: #e8eee7; text-decoration: underline; }
header { height: 83px; display: flex; align-items: center; justify-content: space-between; }
.brand { color: #e8eee7; text-decoration: none; display: flex; align-items: center; font: 32px Georgia, serif; letter-spacing: -1.6px; }
.brand img { width: 35px; height: 35px; margin-right: 10px; }
.dot { color: #abdabb; }
.tank-type { margin: 0 0 18px; }
#tankTypeLabel { display: block; margin-bottom: 8px; color: #c4d3c4; font-size: 12px; }
#tankTypes { display: flex; flex-wrap: wrap; margin: -4px; }
.type-card { position: relative; flex: 0 0 calc(50% - 8px); min-width: 0; padding: 0; margin: 4px; border: 2px solid #375451; border-radius: 9px; background: #142726; color: #e8eee7; text-align: center; overflow: hidden; }
.type-card:first-child { margin-left: 4px; }
.type-card:last-child:nth-child(odd) { flex-basis: calc(100% - 8px); }
.type-card.selected { border-color: #b6ddb5; }
.type-card .type-preview { display: block; height: 74px; background-size: cover; background-position: center; }
.type-card strong { display: block; padding: 10px 2px; font-size: 11px; line-height: 15px; font-weight: 500; }
.tank-type small { display: block; margin-top: 8px; color: #8fa49a; font-size: 10px; }
.bio { background: #03070d; }
.bio .type-card { background: #0a1521; }
.bio .fish-art { background: #000; border-radius: 8px; }
.bio .hero > div { background: linear-gradient(90deg, rgba(1,5,12,.86), rgba(1,5,12,.1)); }
#connection { font-size: 10px; color: #b1cec0; max-width: 130px; text-align: right; }
.hero { position: relative; min-height: 110px; border: 1px solid #375451; border-radius: 14px; overflow: hidden; background: #174547 url('/fishtank/previews/river-garden.jpg') center 45% / cover; }
.hero > div { min-height: 110px; padding: 28px 22px; background: linear-gradient(90deg, rgba(4,26,28,.82), rgba(4,26,28,.1)); }
.eyebrow { font-size: 8px; letter-spacing: 1.8px; font-weight: 600; color: #cae0d0; }
h1 { font: normal 30px Georgia, serif; margin: 12px 0 8px; letter-spacing: -.6px; }
.hero p { font-size: 11px; color: #d0ded2; margin: 0; }
.room { position: absolute; bottom: 12px; right: 13px; font: 9px monospace; background: #183a34; padding: 4px 7px; border-radius: 4px; }
.feed { width: 100%; margin: 16px 0 23px; padding: 15px 17px; border: 1px solid #8dbca0; background: #b6ddbf; color: #12352a; border-radius: 11px; display: flex; align-items: center; text-align: left; }
.feed-icon { font-size: 36px; margin-right: 14px; line-height: 1; }
.feed strong { font-size: 15px; display: block; font-weight: 600; }
.feed small { display: block; font-size: 10px; margin-top: 4px; opacity: .75; }
.arrow { margin-left: auto; font-size: 23px; }
nav { display: flex; border-bottom: 1px solid #2b3d38; }
nav button { flex: 1; border: 0; border-bottom: 2px solid transparent; background: none; color: #91a79d; font-size: 13px; padding: 13px 5px; }
nav button.selected { border-bottom-color: #b9dfc3; color: #d9e9db; }
.section-heading { display: flex; justify-content: space-between; align-items: center; margin: 25px 0 17px; }
h2 { font: normal 22px Georgia, serif; margin: 0 0 7px; letter-spacing: -.25px; }
.section-heading p { color: #8fa49a; font-size: 11px; margin: 0; }
#fishCount { font: 10px monospace; padding: 6px 8px; border: 1px solid #314b41; border-radius: 5px; color: #bdd2bf; }
.fish-row { display: flex; align-items: center; min-height: 96px; border-bottom: 1px solid #233830; }
.fish-art { width: 80px; height: 79px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-right: 12px; }
.fish-art canvas { max-width: 80px; max-height: 76px; width: auto; height: auto; }
.fish-info { flex: 1; }
.fish-info strong { font-size: 12px; font-weight: 500; }
.fish-info small { display: block; max-width: 150px; font-size: 9px; color: #8da397; margin-top: 5px; line-height: 1.5; }
.stepper { display: flex; align-items: center; margin-left: 7px; }
.stepper button { width: 44px; height: 44px; padding: 0; border: 1px solid #3d5949; background: #1d352a; color: #c1e2c6; border-radius: 7px; font-size: 22px; }
.stepper span { width: 27px; text-align: center; font-size: 12px; }
.ecosystem-note { display: flex; margin: 22px 0; padding: 15px; border-radius: 10px; background: #132823; color: #96afa0; }
.ecosystem-note > span { font-size: 25px; color: #b9d8ae; margin-right: 12px; }
.ecosystem-note p { margin: 0; font-size: 10px; line-height: 1.7; }
.ecosystem-note strong { display: block; color: #c0d2bf; font-weight: 500; }
.style-card { display: block; position: relative; width: 100%; height: 130px; text-align: left; color: #fff; background-color: #1e3a30; background-size: cover; background-position: center; border: 2px solid transparent; border-radius: 11px; overflow: hidden; padding: 0; margin-bottom: 12px; }
.style-card.selected { border-color: #b6ddb5; }
.style-card > span { display: block; height: 100%; padding: 63px 17px 10px; background: linear-gradient(0deg,rgba(4,20,16,.88),rgba(4,20,16,0)); }
.style-card strong { font: 20px Georgia, serif; display: block; }
.style-card small { display: block; font-size: 10px; color: #d0dccb; margin-top: 5px; }
.style-card.selected:after, .type-card.selected:after { content: '✓'; position: absolute; right: 12px; top: 10px; width: 24px; height: 24px; text-align: center; padding-top: 3px; border-radius: 50%; background: #b6ddb5; color: #173424; }
.type-card.selected:after { right: 6px; top: 6px; }
h3 { margin: 23px 0 12px; font-size: 12px; font-weight: 500; color: #c4d3c4; }
.segments { display: flex; border: 1px solid #344e41; border-radius: 8px; padding: 4px; }
.segments button { flex: 1; min-height: 40px; padding: 7px 3px; border: 0; border-radius: 5px; background: none; color: #92aa9a; font-size: 11px; }
.segments button.selected { color: #d2e7d2; background: #2a4434; }
.bubble-option { display: flex; align-items: center; justify-content: space-between; min-height: 70px; margin-top: 15px; font-size: 12px; }
.bubble-option small { display: block; font-size: 10px; margin-top: 5px; color: #91a899; }
.bubble-option input { width: 26px; height: 26px; }
#feedback { min-height: 30px; margin: 18px 0 0; color: #bbd3bc; font-size: 11px; line-height: 1.5; }
#feedback.error { color: #f0b99c; }
footer { padding: 15px 0 25px; text-align: center; font: italic 13px Georgia, serif; color: #738e7e; }
@media (max-width: 370px) { main { padding: 0 14px; } .fish-art { width: 59px; margin-right: 8px; } .fish-art canvas { max-width: 59px; } .fish-info strong { font-size: 11px; } .stepper button { width: 44px; } .stepper span { width: 22px; } }