/* Visual reference: the owner-provided dashboard video. Content remains real application data. */
:root{--bg:#e7efea;--card:#fff;--line:#d8e7df;--ink:#17362f;--sub:#6b817b;--accent:#117f68;--blue2:#d7f4e7;--shadow:0 14px 38px rgba(28,70,59,.08)}
body{background:radial-gradient(ellipse at 16% 8%,#c3e9dc 0,transparent 45%),radial-gradient(ellipse at 95% 20%,#f3e5d7 0,transparent 42%),#e8efea;color:var(--ink);min-height:100vh}
.ui-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block;flex:none}
.sidebar{inset:14px auto 14px 14px;width:224px;border:0;border-radius:24px;background:linear-gradient(180deg,#0c392f 0%,#071f1b 100%);box-shadow:0 14px 36px rgba(7,42,34,.2);overflow-x:hidden;transition:width .32s cubic-bezier(.22,1,.36,1)}
.sidebar{scrollbar-width:thin;scrollbar-color:rgba(181,244,216,.32) transparent}.sidebar::-webkit-scrollbar{width:5px}.sidebar::-webkit-scrollbar-thumb{background:rgba(181,244,216,.32);border-radius:8px}.sidebar::-webkit-scrollbar-track{background:transparent}
.side-brand{color:#f4fffa;min-width:224px;padding:23px 18px 16px;white-space:nowrap}.brandmark{background:#a9ead2;color:#0b473a;box-shadow:0 5px 22px rgba(90,220,167,.22);border-radius:13px}.brandmark .ui-icon{width:21px;height:21px}.brand-copy small{color:#b0cdc1}.side-divider{border-color:rgba(220,255,238,.12)}
.navgroup{padding:8px 10px 0;min-width:224px}.navlabel{color:#7fa89c;padding:12px 12px 7px;font-size:9px;white-space:nowrap}.sidebar .navitem{color:#c3dcd2;gap:11px;margin:3px 0;padding:8px 9px;min-height:42px;white-space:nowrap;overflow:hidden;transition:background .2s,color .2s}.sidebar .navitem:hover{background:rgba(181,244,216,.1);color:#fff}.sidebar .navitem.active{background:rgba(134,228,185,.12);color:#f4fff9}.sidebar .ni{width:29px;height:29px;display:grid;place-items:center;flex:none;border-radius:50%;transition:background .25s,box-shadow .25s,transform .25s}.sidebar .navitem.active .ni{background:#a9efd5;color:#104c3b;box-shadow:0 0 19px rgba(125,255,198,.45)}.sidebar .navitem:hover .ni{transform:translateY(-1px)}.sidebar .sidefoot{min-width:224px;border-color:rgba(220,255,238,.12);color:#98b9ad}.sidebar .mini-badge{background:rgba(160,239,201,.12);border-color:rgba(160,239,201,.2);color:#c4f6dd}
.shell-content{margin-left:252px;transition:margin-left .32s cubic-bezier(.22,1,.36,1)}.app-topbar{background:rgba(255,255,255,.38);border-color:rgba(255,255,255,.58);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:0 0 18px 18px}.topbar-leading{display:flex;align-items:center;gap:14px;min-width:0}.sidebar-toggle{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(54,111,92,.16);border-radius:12px;background:rgba(255,255,255,.72);color:#285b4c;cursor:pointer;transition:background .2s,transform .2s}.sidebar-toggle:hover{background:#fff;transform:translateY(-1px)}.topav{background:#c6efde;color:#135f49}.topdate{background:rgba(255,255,255,.65);border-color:rgba(255,255,255,.8)}
.nav-collapsed .sidebar{width:64px}.nav-collapsed .shell-content{margin-left:92px}.nav-collapsed .brand-copy,.nav-collapsed .navlabel,.nav-collapsed .sidefoot,.nav-collapsed .navitem .lab{visibility:hidden;opacity:0}.nav-collapsed .side-brand{padding-left:13px}.nav-collapsed .navgroup{padding-left:9px}.nav-collapsed .navitem{width:46px}.nav-collapsed .sidebar-toggle .ui-icon{transform:scaleX(-1)}.sidebar-close{display:none;position:absolute;right:10px;top:18px;width:32px;height:32px;border:0;border-radius:9px;background:rgba(181,244,216,.12);color:#d7f8e8;cursor:pointer;place-items:center}.sidebar-close:hover{background:rgba(181,244,216,.22)}.sidebar-close .ui-icon{width:18px;height:18px}.sidebar-scrim[hidden]{display:none}.sidebar-scrim{position:fixed;inset:0;z-index:8;border:0;background:rgba(4,26,21,.3);backdrop-filter:blur(2px)}
.button{border-color:#cee1d8;background:rgba(255,255,255,.8);color:#27594b;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s}.button:hover{background:#fff;border-color:#9acfb9;transform:translateY(-1px);box-shadow:0 5px 14px rgba(13,89,64,.08)}.button.primary-link,button.primary{background:#0e8068;border-color:#0e8068;color:#fff}.button.primary-link:hover,button.primary:hover{background:#096b56;border-color:#096b56}.table-card,.detail-card,.edit-form,.filters,.login-card,.notice-message,.confirmation-dialog{border-color:rgba(255,255,255,.78);box-shadow:var(--shadow)}.table-card,.detail-card,.edit-form,.filters,.login-card,.confirmation-dialog{background:rgba(255,255,255,.9)}.filters input,.filters select,.edit-form input,.edit-form select,.edit-form textarea,.login-card input{border-color:#cfe1d8;color:#173e33}.filters input:focus,.filters select:focus,.edit-form input:focus,.edit-form select:focus,.edit-form textarea:focus,.login-card input:focus{border-color:#36a485}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:#168e71}.subnav a:hover,.subnav [aria-current=page]{color:#08765d}.login-header{background:rgba(255,255,255,.7)}.login-header .side-brand{color:#17362f}.login-header .brand-copy small{color:#648174}
.intro-reveal .app-shell{animation:app-reveal .7s cubic-bezier(.22,1,.36,1)}@keyframes app-reveal{from{clip-path:circle(3% at 50vw 50vh);opacity:.65}to{clip-path:circle(150vmax at 50vw 50vh);opacity:1}}
.main .doc-panel,.main .kpi,.main .animal-detail-card,.main .detail-card{animation:surface-enter .45s cubic-bezier(.22,1,.36,1) both}.main .doc-panel:nth-of-type(2),.main .kpi:nth-child(2){animation-delay:.04s}.main .doc-panel:nth-of-type(3),.main .kpi:nth-child(3){animation-delay:.08s}@keyframes surface-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:1150px){.sidebar,.nav-collapsed .sidebar{width:64px}.shell-content,.nav-collapsed .shell-content{margin-left:92px}.side-brand,.nav-collapsed .side-brand{padding-left:13px}.navgroup,.nav-collapsed .navgroup{padding:8px 9px 0}.sidebar .navitem,.nav-collapsed .sidebar .navitem{width:46px;justify-content:flex-start}.brand-copy,.navlabel,.sidefoot,.navitem .lab,.nav-collapsed .brand-copy,.nav-collapsed .navlabel,.nav-collapsed .sidefoot,.nav-collapsed .navitem .lab{display:none;visibility:hidden;opacity:0}.nav-mobile-open .sidebar,.nav-mobile-open.nav-collapsed .sidebar{width:224px}.nav-mobile-open .sidebar-close{display:grid}.nav-mobile-open .brand-copy,.nav-mobile-open .navlabel,.nav-mobile-open .sidefoot,.nav-mobile-open .navitem .lab,.nav-mobile-open.nav-collapsed .brand-copy,.nav-mobile-open.nav-collapsed .navlabel,.nav-mobile-open.nav-collapsed .sidefoot,.nav-mobile-open.nav-collapsed .navitem .lab{display:block;visibility:visible;opacity:1}.nav-mobile-open .sidebar .navitem,.nav-mobile-open.nav-collapsed .sidebar .navitem{width:204px}.nav-mobile-open .sidebar-toggle .ui-icon{transform:none}}
@media(max-width:720px){.sidebar,.nav-collapsed .sidebar{inset:8px auto 8px 8px;width:52px;border-radius:18px}.shell-content,.nav-collapsed .shell-content{margin-left:68px}.side-brand,.nav-collapsed .side-brand{padding:14px 7px}.nav-mobile-open .side-brand{font-size:18px}.navgroup,.nav-collapsed .navgroup{padding:8px 3px 0}.app-topbar{padding:12px}.topbar-leading{gap:8px}.sidebar-toggle{width:34px;height:34px}.sidebar .navitem,.nav-collapsed .sidebar .navitem{width:46px}.nav-mobile-open .sidebar,.nav-mobile-open.nav-collapsed .sidebar{width:224px}.nav-mobile-open .sidebar .navitem,.nav-mobile-open.nav-collapsed .sidebar .navitem{width:204px}.nav-mobile-open body{overflow:hidden}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}