:root { color: #e8f4f7; background: #06141d; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; } body { min-width: 320px; margin: 0; background: radial-gradient(900px 540px at 82% -18%, rgba(0, 155, 188, .16), transparent 65%), #07141d; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } .svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 5; display: flex; flex-direction: column; width: 258px; padding: 27px 14px 16px; border-right: 1px solid rgba(131, 184, 205, .11); background: rgba(5, 18, 27, .97); transition: transform .25s ease; } .brand { display: flex; align-items: center; gap: 10px; padding: 0 11px 31px; font-size: 20px; font-weight: 750; letter-spacing: -.8px; } .brand > span:last-child span { color: #4ed4ed; }.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #26738d; border-radius: 11px; color: #69e7f8; background: linear-gradient(145deg, #114d69, #092838); font: 700 25px/1 Georgia, serif; }
.side-nav { flex: 1; }.nav-caption { margin: 0 12px 10px; color: #6f8c99; font-size: 10px; font-weight: 700; letter-spacing: 1.35px; text-transform: uppercase; }.nav-item { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; height: 45px; padding: 0 12px; border: 0; border-radius: 10px; color: #9cb3bd; background: transparent; font-size: 14px; text-align: left; transition: .18s ease; }.nav-item:hover { color: #e4f5fa; background: rgba(51, 141, 169, .11); }.nav-item.active { color: #dffaff; background: linear-gradient(90deg, rgba(37, 149, 183, .23), rgba(37, 149, 183, .08)); }.nav-item.active::before { position: absolute; left: -14px; width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: #46d8ef; content: ''; }.sidebar-bottom { border-top: 1px solid rgba(131, 184, 205, .11); padding-top: 11px; }.phase-note { margin: 5px 12px 11px; color: #65818d; font-size: 10px; }.profile { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 0 8px; color: #77929e; }.profile div { display: grid; gap: 2px; }.profile strong { color: #dcecf1; font-size: 12px; }.profile small { font-size: 10px; }.avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #d7f8fe; background: linear-gradient(135deg,#1f7187,#154554); font-size: 10px; font-weight: 700; }
.content { min-height: 100vh; margin-left: 258px; padding: 0 42px 50px; }.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 77px; border-bottom: 1px solid rgba(137, 190, 210, .10); }.topbar h1 { margin: 1px 0 0; color: #edf9fb; font-size: 18px; letter-spacing: -.4px; }.eyebrow { margin: 0 0 6px; color: #59cce0; font-size: 10px; font-weight: 750; letter-spacing: .75px; text-transform: uppercase; }.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; color: #06212a; background: linear-gradient(135deg, #66deed, #35b8d3); box-shadow: 0 8px 20px rgba(27, 156, 185, .16); font-size: 13px; font-weight: 750; }.primary-button:hover { filter: brightness(1.08); transform: translateY(-1px); }.primary-button .icon { width: 18px; }.mobile-menu { display: none; }
.view { display: none; }.view.active { display: block; }.page-intro { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 32px 0 20px; }.page-intro h2, .section-heading h2 { margin: 0; color: #eef9fb; font-size: 19px; letter-spacing: -.55px; }.page-intro p, .section-heading p { margin: 6px 0 0; color: #86a1ab; font-size: 12px; }.page-intro select { min-width: 185px; }.reef-card { position: relative; min-height: 247px; overflow: hidden; border: 1px solid rgba(117, 206, 224, .22); border-radius: 16px; background: #0b2736; }.reef-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 57%; }.reef-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 18, 27, .88), rgba(3, 18, 27, .12) 70%), linear-gradient(0deg, rgba(3, 16, 24, .82), transparent 54%); }.reef-card-top, .reef-card-body { position: absolute; right: 20px; left: 20px; display: flex; align-items: center; justify-content: space-between; }.reef-card-top { top: 18px; }.reef-card-body { bottom: 20px; align-items: end; }.reef-card-body p { margin: 0 0 5px; color: #b7d8e1; font-size: 11px; }.reef-card-body h2 { margin: 0; color: #fff; font-size: 28px; letter-spacing: -1.05px; }.reef-card-body span { display: block; margin-top: 7px; color: #c1d8df; font-size: 11px; }.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid rgba(153, 243, 196, .23); border-radius: 20px; color: #bdf8d5; background: rgba(9, 50, 43, .66); font-size: 11px; font-weight: 700; backdrop-filter: blur(5px); }.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: #69e6a4; box-shadow: 0 0 9px #69e6a4; }.card-link, .text-button { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; color: #76e1f0; background: transparent; font-size: 12px; font-weight: 700; }.card-link:hover, .text-button:hover { color: #d1fbff; }.card-link .icon, .text-button .icon { width: 16px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 31px 0 13px; }.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.quick-card { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 67px; padding: 12px; border: 1px solid rgba(127, 189, 208, .11); border-radius: 13px; color: #d7eaef; background: rgba(11, 40, 53, .62); text-align: left; transition: .2s ease; }.quick-card:hover { transform: translateY(-2px); border-color: rgba(89, 214, 232, .34); background: rgba(15, 56, 72, .9); }.quick-card > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }.quick-card strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.quick-card small { overflow: hidden; color: #7e9aa5; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.action-icon { display: grid; flex: 0 0 auto; place-items: center; width: 37px; height: 37px; border-radius: 10px; }.action-icon .icon { width: 21px; }.action-icon.cyan { color: #62dced; background: #103e4d; }.action-icon.orange { color: #ffbc82; background: #493023; }.action-icon.blue { color: #9bd6ff; background: #173a5d; }.quick-arrow { width: 17px; margin-left: auto; color: #5b7783; }
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }.heading-actions { display: flex; align-items: center; gap: 12px; }.picker { position: relative; }.picker-button { min-height: 38px; padding: 0 12px; border: 1px solid rgba(131, 196, 214, .28); border-radius: 10px; color: #d7eef3; background: #0e3646; font-size: 12px; font-weight: 700; white-space: nowrap; }.picker-button[aria-expanded="true"] { border-color: #5ed8e8; color: #fff; box-shadow: 0 0 0 3px rgba(94, 216, 232, .12); }.picker-panel { position: absolute; z-index: 8; top: calc(100% + 8px); right: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: min(440px, calc(100vw - 32px)); max-height: min(380px, 62vh); overflow: auto; padding: 10px; border: 1px solid rgba(110, 216, 232, .28); border-radius: 14px; background: #0c3140; box-shadow: 0 18px 48px rgba(0, 0, 0, .42); }.picker-panel[hidden] { display: none; }.picker-panel .chart-toggle { justify-content: start; width: auto; border-color: transparent; border-radius: 8px; background: transparent; }.picker-panel .chart-toggle:hover { background: rgba(94, 216, 232, .1); }.metrics-grid .chart-empty { grid-column: 1 / -1; margin: 0; }.metric-card, .feed-card, .table-card { border: 1px solid rgba(124, 187, 208, .13); border-radius: 15px; background: linear-gradient(145deg, rgba(15, 47, 61, .86), rgba(9, 29, 40, .9)); }.metric-card { padding: 14px 15px; }.metric-icon { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 13px; border-radius: 9px; color: #74dfef; background: #113a49; }.metric-icon .icon { width: 19px; }.metric-label { color: #94b1ba; font-size: 11px; }.metric-value { display: flex; align-items: baseline; gap: 5px; margin-top: 6px; }.metric-value strong { color: #e9f7fa; font-size: 23px; letter-spacing: -.8px; }.metric-value span { color: #93abb4; font-size: 11px; }.metric-card p { margin: 10px 0 0; color: #7997a2; font-size: 10px; line-height: 1.35; }.feed-card { padding: 6px 18px; }.chart-card { margin-top: 0; border: 1px solid rgba(124, 187, 208, .13); border-radius: 15px; background: linear-gradient(145deg, rgba(15, 47, 61, .86), rgba(9, 29, 40, .9)); }#chart-period { width: auto; min-width: 148px; }.chart-parameters { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 4px; }.chart-toggle { display: inline-flex; align-items: center; gap: 7px; width: auto; margin: 0; padding: 6px 10px; border: 1px solid rgba(131, 196, 214, .2); border-radius: 999px; color: #c5dde4; background: rgba(8, 36, 48, .55); font-size: 12px; font-weight: 650; }.chart-toggle input { width: 14px; height: 14px; margin: 0; padding: 0; accent-color: #5ed8e8; }.chart-plot { padding: 4px 16px 14px; }.chart-plot + .chart-plot { border-top: 1px solid rgba(137, 191, 207, .1); }.chart-plot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }.chart-plot-head h3 { margin: 10px 0 0; color: #e7f6f8; font-size: 13px; }.chart-plot-head span { color: #9fd7e3; font-size: 12px; }.chart-svg { display: block; width: 100%; height: 148px; }.chart-empty { margin: 8px 0 4px; color: #7e9aa5; font-size: 12px; }.livestock-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }.livestock-actions select { width: auto; min-width: 190px; }.livestock-name { display: block; margin: 0; color: #edf9fb; font-size: 16px; }.livestock-scientific { margin: 4px 0 8px; color: #8eacb6; font-size: 12px; font-style: italic; }label.mini-button { position: relative; display: inline-flex; align-items: center; width: auto; }.livestock-file { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }.bottom-nav button span { max-width: 58px; overflow: hidden; text-overflow: ellipsis; }.feed-list { display: grid; }.feed-item { display: flex; align-items: center; gap: 11px; padding: 12px 0; border-top: 1px solid rgba(137, 191, 207, .1); }.feed-item:first-child { border-top: 0; }.feed-icon { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; color: #ffbc82; background: #4b3021; }.feed-icon .icon { width: 18px; }.feed-item div { flex: 1; min-width: 0; }.feed-item strong { display: block; overflow: hidden; color: #d8e8ed; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.feed-item p { overflow: hidden; margin: 3px 0 0; color: #7896a1; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.feed-item time { align-self: start; max-width: 125px; color: #78949f; font-size: 10px; text-align: right; }.empty-state, .empty-table { margin: 16px 0; color: #7e9aa5; font-size: 12px; }
.record-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px, 1fr)); gap: 14px; }.record-card { display: grid; grid-template-columns: 82px 1fr; gap: 14px; min-height: 137px; overflow: hidden; padding: 12px; border: 1px solid rgba(124, 187, 208, .13); border-radius: 15px; background: linear-gradient(145deg, rgba(15, 47, 61, .86), rgba(9, 29, 40, .9)); }.record-card-image { display: grid; place-items: center; overflow: hidden; border-radius: 10px; color: #70dceb; background: #133c4b; font: 700 34px Georgia, serif; }.record-card-image img { width: 100%; height: 100%; object-fit: cover; }.record-card h3 { margin: 0; color: #edf9fb; font-size: 17px; letter-spacing: -.35px; }.record-actions, .reef-actions { display: flex; flex-wrap: wrap; gap: 8px; }.reef-actions[hidden] { display: none; }.record-actions { margin-top: 10px; }.mini-button { min-height: 30px; padding: 0 10px; border: 1px solid rgba(131, 196, 214, .22); border-radius: 8px; color: #d7eef3; background: #0e3646; font-size: 11px; font-weight: 700; }.mini-button:hover { border-color: rgba(94, 216, 232, .45); color: #fff; }.mini-button.danger { color: #ffc7c7; border-color: rgba(255, 150, 150, .3); background: #3a1d24; }.mini-button.danger:hover { border-color: rgba(255, 170, 170, .55); color: #ffe4e4; }.record-card p:not(.eyebrow) { margin: 7px 0; color: #88a3ad; font-size: 11px; }.status-text { color: #83e5b1; font-size: 10px; font-weight: 700; }.empty-panel { grid-column: 1 / -1; padding: 28px; border: 1px dashed rgba(105, 215, 232, .28); border-radius: 15px; background: rgba(12, 45, 59, .5); }.empty-panel h3 { margin: 0; }.empty-panel p { max-width: 510px; color: #89a7b1; font-size: 13px; line-height: 1.5; }.table-card { overflow-x: auto; padding: 0 17px; } table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; } th { padding: 15px 8px; color: #73929d; font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; } td { padding: 14px 8px; border-top: 1px solid rgba(137, 191, 207, .1); color: #adc5cc; font-size: 12px; } td strong { color: #e4f4f7; }.large .feed-item { padding: 15px 0; }
dialog { width: min(520px, calc(100% - 26px)); max-height: min(740px, calc(100vh - 30px)); overflow-y: auto; padding: 0; border: 1px solid rgba(110, 216, 232, .27); border-radius: 16px; color: #e5f5f7; background: #0a2632; box-shadow: 0 25px 80px rgba(0,0,0,.52); } dialog::backdrop { background: rgba(0, 10, 17, .72); backdrop-filter: blur(3px); }.modal-form { display: grid; gap: 14px; padding: 22px; }.modal-header { display: flex; align-items: start; justify-content: space-between; margin-bottom: 3px; }.modal-header h2 { margin: 0; font-size: 20px; letter-spacing: -.5px; }.close-dialog { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(138, 203, 219, .18); border-radius: 9px; color: #a5c5cf; background: #103442; }.close-dialog .icon { width: 18px; } label { display: grid; gap: 6px; color: #a9c5ce; font-size: 11px; font-weight: 650; } input, select, textarea { width: 100%; padding: 10px 11px; border: 1px solid rgba(131, 196, 214, .18); border-radius: 9px; outline: 0; color: #e8f6f8; background: #0b303e; font-size: 13px; } input:focus, select:focus, textarea:focus { border-color: #5ed8e8; box-shadow: 0 0 0 3px rgba(94,216,232,.1); } select option { color: #dceef2; background: #0b303e; } textarea { resize: vertical; }.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.form-error { min-height: 1em; margin: 0; color: #ff9d9d; font-size: 12px; }.toast { position: fixed; z-index: 11; right: 24px; bottom: 24px; max-width: min(360px, calc(100vw - 32px)); padding: 12px 15px; border: 1px solid rgba(114, 225, 238, .35); border-radius: 11px; color: #dffaff; background: #0c3341; box-shadow: 0 14px 35px rgba(0,0,0,.28); font-size: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: .22s ease; }.toast.show { opacity: 1; transform: translateY(0); }.toast.bad { border-color: rgba(255, 147, 147, .45); color: #ffd2d2; }.bottom-nav { display: none; }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 18px; background: radial-gradient(700px 480px at 70% 0, rgba(0, 143, 183, .24), transparent 70%), #06141d; }.login-card { width: min(420px, 100%); padding: 34px; border: 1px solid rgba(115, 202, 221, .2); border-radius: 18px; background: rgba(8, 35, 47, .91); box-shadow: 0 24px 70px rgba(0,0,0,.32); }.login-brand { padding: 0 0 34px; }.login-card h1 { margin: 0; font-size: 27px; letter-spacing: -1px; }.login-copy { margin: 9px 0 23px; color: #91aab3; font-size: 13px; line-height: 1.55; }.login-form { display: grid; gap: 15px; }.login-form .primary-button { width: 100%; margin-top: 5px; }
@media (max-width: 950px) { .content { padding: 0 25px 48px; }.metrics-grid { grid-template-columns: repeat(2, 1fr); }.quick-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .sidebar { transform: translateX(-100%); box-shadow: 16px 0 30px rgba(0,0,0,.3); }.sidebar.open { transform: translateX(0); }.content { margin-left: 0; padding: 0 18px 77px; }.mobile-menu { display: grid; place-items: center; width: 36px; height: 36px; margin-right: 11px; border: 1px solid rgba(93, 205, 223, .24); border-radius: 10px; color: #72e2f0; background: #0b2d3a; font-size: 18px; }.topbar { justify-content: start; min-height: 65px; }.compact-add { margin-left: auto; }.bottom-nav { position: fixed; z-index: 4; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-around; height: 62px; padding: 4px 10px; border-top: 1px solid rgba(128, 201, 219, .16); background: rgba(5, 19, 28, .96); backdrop-filter: blur(12px); }.bottom-nav button { display: grid; place-items: center; gap: 2px; min-width: 52px; padding: 3px; border: 0; color: #73909b; background: transparent; font-size: 9px; }.bottom-nav .icon { width: 20px; }.bottom-nav button.active { color: #63deee; }.page-intro { padding-top: 27px; } }
@media (max-width: 570px) { .content { padding: 0 13px 76px; }.topbar h1 { font-size: 16px; }.topbar .eyebrow { font-size: 9px; }.compact-add { min-width: 40px; padding: 0 10px; }.compact-add span { display: none; }.page-intro, .section-heading { align-items: start; flex-direction: column; gap: 14px; padding: 24px 2px 18px; }.heading-actions { width: 100%; }#chart-period { width: auto; flex: 1; min-width: 0; }.picker-panel { grid-template-columns: 1fr; }.page-intro select, .page-intro > .primary-button { width: 100%; }.reef-card { min-height: 216px; }.reef-card-body h2 { font-size: 24px; }.quick-grid { grid-template-columns: 1fr; gap: 9px; }.quick-card { min-height: 63px; }.metrics-grid { gap: 9px; }.metric-card { padding: 13px; }.feed-card { padding-right: 13px; padding-left: 13px; }.feed-item time { max-width: 85px; }.form-row { grid-template-columns: 1fr; }.toast { right: 15px; bottom: 74px; }.login-card { padding: 26px 22px; } }
.bottom-nav button span { display: none; }
.sidebar, .content { transition: width .2s ease, margin-left .2s ease, transform .25s ease; }
.brand { width: 100%; }.brand-name span { color: #4ed4ed; }
.nav-toggle { display: none; place-items: center; width: 34px; height: 34px; margin-left: auto; border: 1px solid rgba(93, 205, 223, .24); border-radius: 10px; color: #72e2f0; background: #0b2d3a; flex: 0 0 auto; }
.nav-toggle .icon { width: 16px; height: 16px; transform: rotate(180deg); }
@media (min-width: 761px) {
  .nav-toggle { display: grid; }
  html.nav-collapsed .sidebar { width: 76px; padding: 16px 8px 12px; }
  html.nav-collapsed .brand { flex-direction: column; align-items: center; gap: 8px; padding: 0 0 16px; }
  html.nav-collapsed .brand-name, html.nav-collapsed .nav-caption, html.nav-collapsed .nav-item span, html.nav-collapsed .phase-note, html.nav-collapsed .profile div { display: none; }
  html.nav-collapsed .nav-toggle { margin-left: 0; }
  html.nav-collapsed .nav-toggle .icon { transform: none; }
  html.nav-collapsed .nav-item { justify-content: center; width: 48px; height: 48px; margin: 4px auto; padding: 0; }
  html.nav-collapsed .nav-item.active::before { left: -8px; }
  html.nav-collapsed .profile { justify-content: center; margin-top: 8px; padding: 0; }
  html.nav-collapsed .content { margin-left: 76px; }
}
.page-tools, .livestock-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; }
.view-switch { display: inline-flex; padding: 3px; border: 1px solid rgba(131, 196, 214, .22); border-radius: 11px; background: #0b2c3a; }
.view-switch-button { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; color: #8eacb6; background: transparent; }
.view-switch-button .icon { width: 18px; height: 18px; }
.view-switch-button.active { color: #06212a; background: linear-gradient(135deg, #66deed, #35b8d3); }
.record-grid.as-list { grid-template-columns: 1fr; }
.record-grid.as-list .record-card { display: flex; align-items: center; gap: 14px; min-height: 0; padding: 10px 12px; }
.record-grid.as-list .record-card-image { width: 56px; height: 56px; flex: 0 0 56px; }
.record-grid.as-list .record-card-body { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.record-grid.as-list .record-card-copy { flex: 1; min-width: 0; }
.record-grid.as-list .record-card-copy p, .record-grid.as-list .livestock-scientific { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-grid.as-list .record-actions { margin-top: 0; flex-wrap: nowrap; }
.record-grid.as-list .livestock-assign { width: 210px; flex: 0 0 210px; margin: 0; }
#gallery-dialog { width: min(880px, calc(100% - 26px)); }.gallery-add { position: relative; overflow: hidden; }.gallery-toolbar { display: flex; justify-content: flex-end; }.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }.gallery-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }.gallery-item { position: relative; overflow: hidden; border: 1px solid rgba(124, 187, 208, .16); border-radius: 12px; background: #0e3140; }.gallery-item img { display: block; width: 100%; height: 148px; object-fit: cover; }.gallery-item .mini-button { position: absolute; right: 8px; bottom: 8px; }.gallery-badge { position: absolute; top: 8px; left: 8px; padding: 3px 7px; border-radius: 999px; color: #06212a; background: #66deed; font-size: 10px; font-weight: 750; }.gallery-stage { display: grid; gap: 10px; margin: 0; }.gallery-stage[hidden] { display: none; }.gallery-stage img { width: 100%; max-height: 62vh; object-fit: contain; border-radius: 12px; background: #07141d; }.gallery-stage-actions { display: flex; flex-wrap: wrap; gap: 8px; }.gallery-stage-actions .mini-button[hidden] { display: none; }.gallery-grid .empty-panel { grid-column: 1 / -1; }
.aquarium-checks { margin: 0; padding: 10px 12px; border: 1px solid rgba(131, 196, 214, .18); border-radius: 12px; }.aquarium-checks legend { padding: 0 6px; color: #a9c5ce; font-size: 11px; font-weight: 650; }.aquarium-checks label { display: flex; align-items: center; gap: 8px; color: #d7eef3; font-size: 13px; }.aquarium-checks input { width: auto; }.aquarium-checks p { margin: 0; color: #86a1ab; font-size: 12px; }
.chart-card, .chart-plot, .chart-frame { overflow: visible; }.chart-frame { position: relative; }.chart-svg { display: block; width: 100%; height: auto; }.chart-hit { cursor: crosshair; }.chart-point:hover .chart-dot { stroke: #fff; }.chart-tip { position: absolute; z-index: 3; padding: 6px 9px; border: 1px solid rgba(110, 216, 232, .35); border-radius: 8px; color: #e7f7fb; background: #103848; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-size: 12px; line-height: 1.35; white-space: nowrap; pointer-events: none; }.chart-tip[hidden] { display: none; }
@media (max-width: 760px) { .content { margin-left: 0; } .bottom-nav { height: 56px; } }
@media (max-width: 860px) { .record-grid.as-list .record-card-body { flex-wrap: wrap; } .record-grid.as-list .record-card-copy { flex: 1 1 160px; } .record-grid.as-list .livestock-assign { width: auto; flex: 1 1 180px; } .record-grid.as-list .record-actions { flex: 1 1 100%; } }
@media (max-width: 570px) { .page-tools, .livestock-actions { width: 100%; } .page-intro select { width: auto; flex: 1; min-width: 0; } .page-tools .primary-button, .livestock-actions .primary-button { flex: 1; } }