:root { --ink: #1f2a2a; --muted: #5d5f59; --panel-border: rgba(53, 129, 98, 0.28); --panel-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.36), transparent 42%), linear-gradient(180deg, rgba(255, 249, 238, 0.94), rgba(228, 244, 230, 0.88)); --card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 42%), linear-gradient(180deg, rgba(255, 248, 235, 0.94), rgba(227, 243, 229, 0.9)); --button-surface: linear-gradient(180deg, rgba(252, 244, 228, 0.96), rgba(232, 243, 233, 0.9)); --button-surface-hover: linear-gradient(180deg, rgba(255, 248, 238, 0.98), rgba(236, 246, 237, 0.94)); --button-border: rgba(64, 120, 87, 0.18); --button-shadow: 0 12px 24px rgba(72, 97, 62, 0.12); --card-shadow: 0 20px 38px rgba(86, 63, 34, 0.18); --accent-red: #cb3a35; --accent-green: #238a5a; --accent-blue: #2769b3; --accent-gold: #f0b63f; --accent-teal: #2f8f98; color: var(--ink); background: radial-gradient(circle at 14% 10%, rgba(222, 124, 58, 0.28), transparent 22%), radial-gradient(circle at 82% 12%, rgba(53, 136, 110, 0.26), transparent 20%), radial-gradient(circle at 24% 84%, rgba(221, 179, 78, 0.2), transparent 22%), radial-gradient(circle at 86% 78%, rgba(43, 118, 92, 0.24), transparent 24%), radial-gradient(circle at 62% 54%, rgba(48, 114, 160, 0.14), transparent 16%), linear-gradient(180deg, #fef5e7 0%, #e9ddba 46%, #d9eadf 100%); font-family: "Avenir Next", "Segoe UI", sans-serif; line-height: 1.5; font-weight: 400; } * { box-sizing: border-box; } html, body, #root { margin: 0; min-height: 100%; } body { min-height: 100vh; color: var(--ink); position: relative; isolation: isolate; } body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: 0.42; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 2200'%3E%3Cdefs%3E%3Csymbol id='track' viewBox='0 0 160 160'%3E%3Crect x='66' y='12' width='28' height='136' rx='14' transform='rotate(30 80 80)'/%3E%3Crect x='66' y='12' width='28' height='136' rx='14' transform='rotate(-30 80 80)'/%3E%3C/symbol%3E%3C/defs%3E%3Cg fill='%235bb3b7'%3E%3Cuse href='%23track' x='82' y='74' width='132' height='132' transform='rotate(-12 148 140)'/%3E%3Cuse href='%23track' x='428' y='118' width='96' height='96' transform='rotate(18 476 166)'/%3E%3Cuse href='%23track' x='782' y='62' width='154' height='154' transform='rotate(-36 859 139)'/%3E%3Cuse href='%23track' x='1188' y='132' width='108' height='108' transform='rotate(42 1242 186)'/%3E%3Cuse href='%23track' x='1318' y='438' width='88' height='88' transform='rotate(-18 1362 482)'/%3E%3Cuse href='%23track' x='942' y='552' width='120' height='120' transform='rotate(28 1002 612)'/%3E%3Cuse href='%23track' x='246' y='210' width='70' height='70' transform='rotate(52 281 245)'/%3E%3Cuse href='%23track' x='640' y='180' width='78' height='78' transform='rotate(-22 679 219)'/%3E%3Cuse href='%23track' x='1038' y='248' width='66' height='66' transform='rotate(14 1071 281)'/%3E%3Cuse href='%23track' x='1460' y='260' width='72' height='72' transform='rotate(-40 1496 296)'/%3E%3Cuse href='%23track' x='318' y='598' width='74' height='74' transform='rotate(30 355 635)'/%3E%3Cuse href='%23track' x='742' y='434' width='68' height='68' transform='rotate(-54 776 468)'/%3E%3Cuse href='%23track' x='1144' y='664' width='72' height='72' transform='rotate(10 1180 700)'/%3E%3Cuse href='%23track' x='186' y='24' width='58' height='58' transform='rotate(38 215 53)'/%3E%3Cuse href='%23track' x='560' y='12' width='56' height='56' transform='rotate(-18 588 40)'/%3E%3Cuse href='%23track' x='956' y='18' width='54' height='54' transform='rotate(24 983 45)'/%3E%3Cuse href='%23track' x='1266' y='22' width='52' height='52' transform='rotate(-34 1292 48)'/%3E%3Cuse href='%23track' x='68' y='302' width='62' height='62' transform='rotate(16 99 333)'/%3E%3Cuse href='%23track' x='490' y='352' width='58' height='58' transform='rotate(-42 519 381)'/%3E%3Cuse href='%23track' x='878' y='352' width='60' height='60' transform='rotate(32 908 382)'/%3E%3Cuse href='%23track' x='1228' y='322' width='56' height='56' transform='rotate(-10 1256 350)'/%3E%3Cuse href='%23track' x='30' y='584' width='54' height='54' transform='rotate(48 57 611)'/%3E%3Cuse href='%23track' x='414' y='706' width='60' height='60' transform='rotate(-16 444 736)'/%3E%3Cuse href='%23track' x='1082' y='776' width='58' height='58' transform='rotate(36 1111 805)'/%3E%3Cuse href='%23track' x='1462' y='768' width='54' height='54' transform='rotate(-28 1489 795)'/%3E%3Cuse href='%23track' x='34' y='112' width='42' height='42' transform='rotate(22 55 133)'/%3E%3Cuse href='%23track' x='348' y='38' width='44' height='44' transform='rotate(-28 370 60)'/%3E%3Cuse href='%23track' x='670' y='22' width='40' height='40' transform='rotate(34 690 42)'/%3E%3Cuse href='%23track' x='1112' y='44' width='42' height='42' transform='rotate(-14 1133 65)'/%3E%3Cuse href='%23track' x='1418' y='96' width='40' height='40' transform='rotate(26 1438 116)'/%3E%3Cuse href='%23track' x='170' y='454' width='42' height='42' transform='rotate(-36 191 475)'/%3E%3Cuse href='%23track' x='582' y='514' width='44' height='44' transform='rotate(12 604 536)'/%3E%3Cuse href='%23track' x='792' y='604' width='40' height='40' transform='rotate(-24 812 624)'/%3E%3Cuse href='%23track' x='1288' y='566' width='42' height='42' transform='rotate(30 1309 587)'/%3E%3Cuse href='%23track' x='40' y='834' width='44' height='44' transform='rotate(-18 62 856)'/%3E%3Cuse href='%23track' x='478' y='890' width='40' height='40' transform='rotate(42 498 910)'/%3E%3Cuse href='%23track' x='1188' y='906' width='42' height='42' transform='rotate(-32 1209 927)'/%3E%3Cuse href='%23track' x='1496' y='934' width='40' height='40' transform='rotate(16 1516 954)'/%3E%3C/g%3E%3Cg fill='%237eb773'%3E%3Cuse href='%23track' x='238' y='338' width='146' height='146' transform='rotate(-44 311 411)'/%3E%3Cuse href='%23track' x='606' y='304' width='104' height='104' transform='rotate(8 658 356)'/%3E%3Cuse href='%23track' x='1082' y='314' width='136' height='136' transform='rotate(-26 1150 382)'/%3E%3Cuse href='%23track' x='92' y='760' width='118' height='118' transform='rotate(36 151 819)'/%3E%3Cuse href='%23track' x='522' y='760' width='160' height='160' transform='rotate(-18 602 840)'/%3E%3Cuse href='%23track' x='1236' y='802' width='110' height='110' transform='rotate(24 1291 857)'/%3E%3Cuse href='%23track' x='60' y='514' width='76' height='76' transform='rotate(-12 98 552)'/%3E%3Cuse href='%23track' x='422' y='520' width='72' height='72' transform='rotate(50 458 556)'/%3E%3Cuse href='%23track' x='744' y='676' width='80' height='80' transform='rotate(-28 784 716)'/%3E%3Cuse href='%23track' x='1406' y='654' width='70' height='70' transform='rotate(44 1441 689)'/%3E%3Cuse href='%23track' x='276' y='936' width='68' height='68' transform='rotate(-46 310 970)'/%3E%3Cuse href='%23track' x='678' y='964' width='74' height='74' transform='rotate(22 715 1001)'/%3E%3Cuse href='%23track' x='1382' y='1002' width='72' height='72' transform='rotate(-8 1418 1038)'/%3E%3Cuse href='%23track' x='184' y='614' width='54' height='54' transform='rotate(26 211 641)'/%3E%3Cuse href='%23track' x='330' y='834' width='56' height='56' transform='rotate(-30 358 862)'/%3E%3Cuse href='%23track' x='864' y='928' width='58' height='58' transform='rotate(40 893 957)'/%3E%3Cuse href='%23track' x='1030' y='1102' width='54' height='54' transform='rotate(-20 1057 1129)'/%3E%3Cuse href='%23track' x='1496' y='1128' width='52' height='52' transform='rotate(18 1522 1154)'/%3E%3Cuse href='%23track' x='86' y='1392' width='60' height='60' transform='rotate(-38 116 1422)'/%3E%3Cuse href='%23track' x='534' y='1328' width='58' height='58' transform='rotate(12 563 1357)'/%3E%3Cuse href='%23track' x='918' y='1534' width='56' height='56' transform='rotate(-48 946 1562)'/%3E%3Cuse href='%23track' x='1388' y='1678' width='54' height='54' transform='rotate(34 1415 1705)'/%3E%3Cuse href='%23track' x='246' y='248' width='42' height='42' transform='rotate(30 267 269)'/%3E%3Cuse href='%23track' x='906' y='486' width='40' height='40' transform='rotate(-18 926 506)'/%3E%3Cuse href='%23track' x='1212' y='742' width='44' height='44' transform='rotate(38 1234 764)'/%3E%3Cuse href='%23track' x='410' y='1118' width='42' height='42' transform='rotate(-26 431 1139)'/%3E%3Cuse href='%23track' x='678' y='1266' width='40' height='40' transform='rotate(18 698 1286)'/%3E%3Cuse href='%23track' x='1202' y='1396' width='42' height='42' transform='rotate(-34 1223 1417)'/%3E%3Cuse href='%23track' x='356' y='1810' width='44' height='44' transform='rotate(22 378 1832)'/%3E%3Cuse href='%23track' x='970' y='1914' width='40' height='40' transform='rotate(-12 990 1934)'/%3E%3C/g%3E%3Cg fill='%23f3a24a'%3E%3Cuse href='%23track' x='320' y='1002' width='92' height='92' transform='rotate(-52 366 1048)'/%3E%3Cuse href='%23track' x='780' y='1008' width='148' height='148' transform='rotate(14 854 1082)'/%3E%3Cuse href='%23track' x='1128' y='1128' width='102' height='102' transform='rotate(-30 1179 1179)'/%3E%3Cuse href='%23track' x='188' y='1450' width='124' height='124' transform='rotate(48 250 1512)'/%3E%3Cuse href='%23track' x='684' y='1412' width='96' height='96' transform='rotate(-10 732 1460)'/%3E%3Cuse href='%23track' x='1268' y='1546' width='144' height='144' transform='rotate(34 1340 1618)'/%3E%3Cuse href='%23track' x='66' y='1084' width='72' height='72' transform='rotate(24 102 1120)'/%3E%3Cuse href='%23track' x='534' y='1210' width='76' height='76' transform='rotate(-38 572 1248)'/%3E%3Cuse href='%23track' x='952' y='1268' width='68' height='68' transform='rotate(52 986 1302)'/%3E%3Cuse href='%23track' x='1462' y='1350' width='70' height='70' transform='rotate(-18 1497 1385)'/%3E%3Cuse href='%23track' x='378' y='1590' width='78' height='78' transform='rotate(16 417 1629)'/%3E%3Cuse href='%23track' x='806' y='1518' width='72' height='72' transform='rotate(-56 842 1554)'/%3E%3Cuse href='%23track' x='242' y='1122' width='56' height='56' transform='rotate(36 270 1150)'/%3E%3Cuse href='%23track' x='660' y='1098' width='54' height='54' transform='rotate(-24 687 1125)'/%3E%3Cuse href='%23track' x='1320' y='1220' width='58' height='58' transform='rotate(28 1349 1249)'/%3E%3Cuse href='%23track' x='58' y='1556' width='54' height='54' transform='rotate(-14 85 1583)'/%3E%3Cuse href='%23track' x='568' y='1684' width='56' height='56' transform='rotate(42 596 1712)'/%3E%3Cuse href='%23track' x='978' y='1608' width='54' height='54' transform='rotate(-32 1005 1635)'/%3E%3Cuse href='%23track' x='1220' y='1810' width='58' height='58' transform='rotate(20 1249 1839)'/%3E%3Cuse href='%23track' x='1464' y='1732' width='52' height='52' transform='rotate(-46 1490 1758)'/%3E%3Cuse href='%23track' x='148' y='1330' width='42' height='42' transform='rotate(18 169 1351)'/%3E%3Cuse href='%23track' x='820' y='1344' width='40' height='40' transform='rotate(-26 840 1364)'/%3E%3Cuse href='%23track' x='1096' y='1504' width='42' height='42' transform='rotate(32 1117 1525)'/%3E%3Cuse href='%23track' x='474' y='1760' width='40' height='40' transform='rotate(-18 494 1780)'/%3E%3Cuse href='%23track' x='1318' y='1608' width='44' height='44' transform='rotate(24 1340 1630)'/%3E%3Cuse href='%23track' x='690' y='1868' width='42' height='42' transform='rotate(-34 711 1889)'/%3E%3Cuse href='%23track' x='116' y='1986' width='40' height='40' transform='rotate(12 136 2006)'/%3E%3C/g%3E%3Cg fill='%23898b93'%3E%3Cuse href='%23track' x='460' y='520' width='86' height='86' transform='rotate(56 503 563)'/%3E%3Cuse href='%23track' x='52' y='1238' width='106' height='106' transform='rotate(-20 105 1291)'/%3E%3Cuse href='%23track' x='1004' y='1386' width='90' height='90' transform='rotate(12 1049 1431)'/%3E%3Cuse href='%23track' x='486' y='1768' width='134' height='134' transform='rotate(-40 553 1835)'/%3E%3Cuse href='%23track' x='1040' y='1842' width='100' height='100' transform='rotate(22 1090 1892)'/%3E%3Cuse href='%23track' x='214' y='680' width='64' height='64' transform='rotate(-34 246 712)'/%3E%3Cuse href='%23track' x='888' y='870' width='66' height='66' transform='rotate(18 921 903)'/%3E%3Cuse href='%23track' x='1180' y='1478' width='74' height='74' transform='rotate(-26 1217 1515)'/%3E%3Cuse href='%23track' x='126' y='1778' width='70' height='70' transform='rotate(40 161 1813)'/%3E%3Cuse href='%23track' x='730' y='1948' width='68' height='68' transform='rotate(-12 764 1982)'/%3E%3Cuse href='%23track' x='314' y='246' width='50' height='50' transform='rotate(30 339 271)'/%3E%3Cuse href='%23track' x='1168' y='514' width='54' height='54' transform='rotate(-22 1195 541)'/%3E%3Cuse href='%23track' x='146' y='898' width='52' height='52' transform='rotate(12 172 924)'/%3E%3Cuse href='%23track' x='642' y='1188' width='50' height='50' transform='rotate(-36 667 1213)'/%3E%3Cuse href='%23track' x='870' y='1740' width='54' height='54' transform='rotate(26 897 1767)'/%3E%3Cuse href='%23track' x='1324' y='1824' width='50' height='50' transform='rotate(-18 1349 1849)'/%3E%3Cuse href='%23track' x='520' y='144' width='38' height='38' transform='rotate(20 539 163)'/%3E%3Cuse href='%23track' x='1026' y='706' width='40' height='40' transform='rotate(-30 1046 726)'/%3E%3Cuse href='%23track' x='272' y='1470' width='38' height='38' transform='rotate(16 291 1489)'/%3E%3Cuse href='%23track' x='1486' y='1500' width='40' height='40' transform='rotate(-24 1506 1520)'/%3E%3Cuse href='%23track' x='562' y='2006' width='38' height='38' transform='rotate(28 581 2025)'/%3E%3C/g%3E%3Cg fill='%23b9c945'%3E%3Cuse href='%23track' x='134' y='188' width='84' height='84' transform='rotate(30 176 230)'/%3E%3Cuse href='%23track' x='850' y='804' width='86' height='86' transform='rotate(-46 893 847)'/%3E%3Cuse href='%23track' x='342' y='1228' width='150' height='150' transform='rotate(26 417 1303)'/%3E%3Cuse href='%23track' x='834' y='1642' width='122' height='122' transform='rotate(-34 895 1703)'/%3E%3Cuse href='%23track' x='1328' y='1934' width='110' height='110' transform='rotate(16 1383 1989)'/%3E%3Cuse href='%23track' x='560' y='54' width='70' height='70' transform='rotate(-24 595 89)'/%3E%3Cuse href='%23track' x='1290' y='598' width='68' height='68' transform='rotate(34 1324 632)'/%3E%3Cuse href='%23track' x='170' y='954' width='72' height='72' transform='rotate(-14 206 990)'/%3E%3Cuse href='%23track' x='1116' y='1722' width='78' height='78' transform='rotate(28 1155 1761)'/%3E%3Cuse href='%23track' x='518' y='2048' width='72' height='72' transform='rotate(-44 554 2084)'/%3E%3Cuse href='%23track' x='408' y='42' width='52' height='52' transform='rotate(18 434 68)'/%3E%3Cuse href='%23track' x='718' y='286' width='50' height='50' transform='rotate(-28 743 311)'/%3E%3Cuse href='%23track' x='1234' y='906' width='54' height='54' transform='rotate(40 1261 933)'/%3E%3Cuse href='%23track' x='294' y='1708' width='50' height='50' transform='rotate(-20 319 1733)'/%3E%3Cuse href='%23track' x='988' y='2028' width='52' height='52' transform='rotate(32 1014 2054)'/%3E%3Cuse href='%23track' x='86' y='436' width='38' height='38' transform='rotate(-18 105 455)'/%3E%3Cuse href='%23track' x='706' y='548' width='40' height='40' transform='rotate(24 726 568)'/%3E%3Cuse href='%23track' x='1414' y='1254' width='38' height='38' transform='rotate(-32 1433 1273)'/%3E%3Cuse href='%23track' x='402' y='1898' width='40' height='40' transform='rotate(14 422 1918)'/%3E%3Cuse href='%23track' x='1202' y='2052' width='38' height='38' transform='rotate(-26 1221 2071)'/%3E%3C/g%3E%3C/svg%3E"); background-position: center center; background-repeat: no-repeat; background-size: cover; } button, input, textarea, select { font: inherit; } button { cursor: pointer; } button:disabled { cursor: not-allowed; } input, textarea, select { width: 100%; margin-top: 0.5rem; border: 1px solid rgba(39, 105, 179, 0.16); border-radius: 16px; padding: 0.9rem 1rem; background: rgba(255, 254, 250, 0.92); color: var(--ink); } input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(39, 105, 179, 0.62); box-shadow: 0 0 0 4px rgba(39, 105, 179, 0.14); } textarea { resize: vertical; } .app-shell { max-width: 1400px; margin: 0 auto; padding: 2rem; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; } .auth-shell { max-width: 1180px; margin: 0 auto; padding: 2rem; } .content-shell { display: grid; gap: 1.5rem; } .top-alert-notification { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; padding: 0.85rem 1rem; border: 1px solid rgba(203, 58, 53, 0.26); border-radius: 20px; background: linear-gradient(180deg, rgba(255, 247, 244, 0.98), rgba(255, 238, 231, 0.96)); box-shadow: 0 16px 30px rgba(203, 58, 53, 0.14); } .top-alert-notification div { display: grid; gap: 0.1rem; } .top-alert-notification strong { color: var(--accent-red); } .top-alert-notification span { color: var(--muted); } .notification-bell { width: 34px; height: 34px; border-radius: 50%; background: rgba(203, 58, 53, 0.12); border: 1px solid rgba(203, 58, 53, 0.22); position: relative; } .notification-bell::before { content: ""; position: absolute; left: 10px; top: 7px; width: 12px; height: 15px; border: 2px solid var(--accent-red); border-bottom: 0; border-radius: 8px 8px 4px 4px; } .notification-bell::after { content: ""; position: absolute; left: 12px; top: 22px; width: 10px; height: 5px; border-top: 2px solid var(--accent-red); border-radius: 50%; } .top-alert-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 0.6rem; } .side-rail { position: sticky; top: 2rem; display: grid; gap: 1rem; align-self: start; } .side-nav { display: grid; gap: 1.25rem; } .brand-lockup { display: grid; justify-items: start; padding-left: 0.4rem; } .side-nav-logo { display: block; width: min(210px, 100%); height: auto; filter: drop-shadow(0 10px 18px rgba(86, 63, 34, 0.14)); } .auth-panel { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1.5rem; align-items: stretch; } .public-profile-shell { max-width: 620px; } .public-profile-card { display: grid; gap: 1.1rem; justify-items: center; text-align: center; } .public-profile-logo { width: min(220px, 70%); height: auto; filter: drop-shadow(0 10px 18px rgba(86, 63, 34, 0.12)); } .public-profile-logo-link { display: inline-flex; justify-content: center; width: 100%; } .public-profile-photo { width: min(260px, 100%); aspect-ratio: 1; object-fit: cover; border-radius: 28px; border: 1px solid rgba(39, 105, 179, 0.16); background: rgba(255, 255, 255, 0.86); } .public-profile-copy { display: grid; gap: 1rem; justify-items: center; } .public-profile-copy h1 { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; margin: 0; font-size: 2rem; } .auth-hero-card { min-height: 280px; align-items: end; } .auth-copy, .auth-card { display: grid; gap: 1rem; } .auth-copy { position: relative; align-content: stretch; grid-template-rows: auto auto auto 1fr auto; padding-bottom: 3.75rem; } .auth-card { padding: 1.25rem; border-radius: 24px; background: var(--card-bg); border: 1px solid var(--panel-border); } .lost-bird-login-card { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; gap: 0.65rem; padding: 0.75rem 0.85rem; } .lost-bird-login-card[open] { box-shadow: 0 24px 48px rgba(86, 63, 34, 0.24); } .lost-bird-login-card summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; } .lost-bird-login-card summary::-webkit-details-marker { display: none; } .lost-bird-login-card summary::after { content: "Open"; border: 1px solid rgba(39, 105, 179, 0.18); border-radius: 999px; padding: 0.45rem 0.75rem; background: rgba(255, 254, 250, 0.72); color: var(--accent-green); font-size: 0.82rem; font-weight: 800; } .lost-bird-login-card[open] summary::after { content: "Close"; } .lost-bird-login-card .eyebrow { display: block; margin-bottom: 0; } .auth-illustration-card { margin: 0; padding: 1rem; border-radius: 28px; background: linear-gradient(135deg, rgba(255, 253, 248, 0.56), transparent 44%), linear-gradient(180deg, rgba(255, 247, 232, 0.94), rgba(229, 241, 231, 0.86)); border: 1px solid var(--panel-border); box-shadow: 0 18px 34px rgba(89, 48, 42, 0.1); } .auth-illustration-card img { display: block; width: 100%; height: auto; border-radius: 22px; } .auth-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .auth-provider-stack { display: grid; gap: 0.75rem; } .provider-button { text-decoration: none; display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 0.9rem; border: 1px solid var(--button-border); border-radius: 18px; padding: 0.85rem 0.95rem; background: var(--button-surface); box-shadow: var(--button-shadow); color: var(--ink); } .provider-button-mark { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: #ffffff; border: 1px solid rgba(31, 42, 42, 0.08); color: #1f2328; } .provider-button-copy { display: grid; gap: 0.15rem; } .provider-button-copy small { color: var(--muted); } .provider-icon-svg { width: 22px; height: 22px; display: block; } .provider-icon-apple { width: 20px; height: 20px; } .provider-google { background: linear-gradient(135deg, rgba(255, 255, 255, 0.56), transparent 54%), var(--button-surface); border-color: rgba(66, 133, 244, 0.14); } .provider-microsoft { background: linear-gradient(135deg, rgba(255, 255, 255, 0.48), transparent 54%), linear-gradient(180deg, rgba(251, 245, 232, 0.96), rgba(230, 242, 235, 0.9)); border-color: rgba(0, 164, 239, 0.14); } .provider-apple { background: linear-gradient(180deg, #1f2328, #111418); border-color: rgba(17, 20, 24, 0.92); color: #f7f7f5; } .provider-apple .provider-button-mark { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); color: #f7f7f5; } .provider-apple .provider-button-copy small { color: rgba(247, 247, 245, 0.76); } .provider-button.disabled { opacity: 0.5; } .provider-button:not(.disabled):hover { transform: translateY(-1px); box-shadow: 0 16px 28px rgba(72, 97, 62, 0.16); } .stack-grid { display: grid; gap: 1.5rem; } .hero-card, .panel { background: var(--panel-bg); border: 1px solid var(--panel-border); box-shadow: 0 22px 44px rgba(89, 48, 42, 0.14); backdrop-filter: blur(14px); } .hero-card { border-radius: 32px; padding: 2rem; display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 1.5rem; background: linear-gradient(135deg, rgba(203, 58, 53, 0.1), transparent 34%), linear-gradient(225deg, rgba(39, 105, 179, 0.08), transparent 36%), linear-gradient(180deg, rgba(255, 247, 235, 0.94), rgba(232, 243, 233, 0.86)); position: relative; overflow: hidden; } .hero-card h1, .panel h2 { margin: 0; } .hero-card h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; max-width: 12ch; } .page-tabs { display: grid; gap: 0.75rem; } .page-tab { border: 1px solid var(--button-border); border-radius: 18px; padding: 0.95rem 1rem; background: linear-gradient(180deg, rgba(251, 244, 229, 0.82), rgba(231, 242, 232, 0.74)); color: var(--ink); transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; text-align: left; } .page-tab.active { background: linear-gradient(135deg, #d89a2f, #3c8f65 58%, #2f8f98); color: #fffdf9; border-color: transparent; box-shadow: 0 14px 26px rgba(88, 110, 62, 0.2); } .page-tab:hover { transform: translateY(-1px); border-color: rgba(35, 138, 90, 0.34); } .eyebrow { margin: 0 0 0.5rem; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; color: var(--accent-red); } .lede, .muted, .chart-footer span, .recent-list small, .bird-card small { color: var(--muted); } .hero-stats, .dashboard-grid, .forms-grid { display: grid; gap: 1.5rem; } .hero-stats { grid-template-columns: minmax(220px, 280px); align-self: end; justify-content: end; } .hero-stats article, .chart-card, .recent-list article, .bird-card { border-radius: 24px; background: var(--card-bg); border: 1px solid var(--panel-border); box-shadow: var(--card-shadow); backdrop-filter: blur(10px); } .hero-stats article { padding: 1rem; position: relative; overflow: hidden; } .hero-stats strong { display: block; font-size: 1.7rem; color: var(--accent-green); } .hero-stats article::before { content: ""; display: block; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--accent-red), var(--accent-gold), var(--accent-green), var(--accent-blue)); } .hero-stats article::before { margin-bottom: 0.9rem; } .hero-stats article:nth-child(2) strong { color: var(--accent-blue); } .hero-stats article:nth-child(3) strong { color: var(--accent-red); } .dashboard-grid { grid-template-columns: 320px 1fr; align-items: start; } .forms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; } .settings-column { display: grid; gap: 1.5rem; align-content: start; } .settings-column > .panel { display: grid; width: 100%; margin: 0; break-inside: avoid; } .settings-card-collaborators { order: 2; } .settings-card-automation { order: 4; } .settings-card-bird-import { order: 5; } .settings-card-transfer { order: 6; } .settings-card-flock-profile { order: 1; } .settings-card-billing { order: 2; } .settings-subsection { display: grid; gap: 1rem; } .settings-nested-stack { gap: 1rem; } .settings-nested-card { display: grid; gap: 1rem; padding: 1rem; border: 1px solid rgba(53, 129, 98, 0.16); border-radius: 22px; background: rgba(255, 252, 246, 0.62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); } .settings-nested-header { display: grid; gap: 0.15rem; } .settings-nested-header h3 { margin: 0; } .settings-nested-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .import-column-guide { display: grid; gap: 0.35rem; padding: 0.8rem 0.9rem; border-radius: 16px; background: rgba(255, 254, 250, 0.72); color: var(--muted); font-size: 0.92rem; } .import-preview-list { max-height: 320px; overflow: auto; } .settings-danger-card { border-color: rgba(203, 58, 53, 0.22); background: linear-gradient(180deg, rgba(255, 250, 246, 0.86), rgba(255, 241, 238, 0.72)); } .settings-save-row { display: flex; justify-content: flex-start; } .flock-member-panel, .flock-member-sections { display: grid; gap: 1.5rem; } .bird-detail-panel { margin-right: 3rem; position: relative; } .flock-detail-column { display: grid; gap: 1.5rem; align-content: start; } .panel { border-radius: 28px; padding: 1.5rem; align-self: start; } .panel-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .pulse-panel .panel-header { margin-bottom: 0.25rem; } .pulse-panel { align-content: start; } .pulse-panel .summary-card { align-content: start; } .daily-education-panel, .daily-quiz, .quiz-options, .education-question-editor { display: grid; gap: 1rem; } .daily-education-panel.condensed { gap: 0.35rem; padding-block: 1rem; } .daily-education-panel.condensed .panel-header { margin-bottom: 0; } .daily-education-teaser { margin: 0; } .daily-fact { margin: 0; padding: 1rem; border-left: 4px solid var(--accent-gold); border-radius: 0 8px 8px 0; background: rgba(255, 254, 250, 0.7); font-size: 1.08rem; } .daily-quiz { grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); } .quiz-question, .quiz-editor-question { min-width: 0; margin: 0; border: 1px solid var(--button-border); } .quiz-question { display: grid; gap: 0.85rem; padding: 1rem; border-radius: 8px; background: rgba(255, 254, 250, 0.64); } .quiz-question legend, .quiz-editor-question legend { padding: 0 0.35rem; font-weight: 700; } .quiz-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.65rem; min-width: 0; padding: 0.7rem; border: 1px solid rgba(39, 105, 179, 0.12); border-radius: 8px; background: rgba(255, 255, 255, 0.58); } .quiz-option.correct { border-color: rgba(35, 138, 90, 0.42); background: rgba(223, 247, 229, 0.82); } .quiz-option.incorrect { border-color: rgba(203, 58, 53, 0.36); background: rgba(255, 236, 232, 0.82); } .quiz-option input { width: auto; margin: 0.25rem 0 0; } .quiz-feedback { margin: 0; color: var(--accent-red); } .quiz-feedback.correct { color: var(--accent-green); } .admin-education-panel, .education-admin-basics, .quiz-editor-question, .education-admin-list { display: grid; gap: 1rem; } .education-admin-basics { grid-template-columns: minmax(180px, 0.35fr) minmax(0, 1fr); } .quiz-editor-question { padding: 1rem; } .quiz-editor-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; } .education-admin-list span { overflow-wrap: anywhere; } .button-row { display: flex; gap: 0.75rem; flex-wrap: wrap; } .member-header-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: end; align-items: center; } .member-header-actions .bird-alert-stack { justify-content: end; } .billing-inline-action { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-top: 0.25rem; } .billing-inline-action div { display: grid; gap: 0.25rem; } .billing-inline-action span { color: var(--muted); font-size: 0.95rem; } .overview-alert-actions { align-items: center; justify-content: end; } .overview-alert-actions .muted { margin: 0; } .range-alert-button { border: 1px solid rgba(203, 58, 53, 0.24); border-radius: 999px; padding: 0.6rem 0.95rem; background: linear-gradient(180deg, rgba(255, 246, 242, 0.96), rgba(255, 236, 228, 0.94)); color: var(--accent-red); font-weight: 700; box-shadow: 0 10px 22px rgba(203, 58, 53, 0.14); } .range-alert-button:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(203, 58, 53, 0.18); } .workspace-switcher { display: grid; gap: 0.9rem; } .workspace-switcher-item small { color: var(--muted); } .workspace-switcher-list { display: grid; gap: 0.75rem; } .workspace-switcher-item { width: 100%; text-align: left; border: 1px solid rgba(39, 105, 179, 0.12); border-radius: 18px; padding: 0.85rem 0.95rem; background: rgba(255, 255, 255, 0.58); display: grid; gap: 0.2rem; } .workspace-switcher-item.active { background: linear-gradient(135deg, rgba(203, 58, 53, 0.16), rgba(39, 105, 179, 0.18)); border-color: rgba(39, 105, 179, 0.24); } .integration-token-secret { gap: 0.75rem; } .integration-token-secret input { width: 100%; font-family: "IBM Plex Mono", monospace; font-size: 0.88rem; } .bird-list { display: grid; gap: 0.9rem; } .bird-card-header { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; align-items: center; } .bird-card-copy { display: grid; gap: 0.25rem; } .bird-card-copy span { display: block; font-weight: 600; } .bird-card-title { display: inline-flex; align-items: center; gap: 0.45rem; } .bird-card-title span { display: inline; } .bird-card-title .bird-card-gender-cluster { display: inline-flex; align-items: center; gap: 0.28rem; line-height: 1; } .gender-inline { font-size: 1.45rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; } .gender-inline.male { color: var(--accent-blue); } .gender-inline.female { color: var(--accent-red); } .gender-inline.unknown { color: var(--muted); } .gender-source-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; flex: 0 0 1.45rem; border-radius: 999px; font-size: 0.8rem; font-weight: 800; line-height: 1; vertical-align: middle; } .gender-source-icon svg { width: 1.28rem; height: 1.28rem; fill: none; stroke-linecap: round; stroke-linejoin: round; } .gender-source-icon.dna { width: 1.9rem; height: 1.9rem; flex-basis: 1.9rem; background: rgba(91, 74, 161, 0.1); color: #5b4aa1; } .gender-source-icon.dna svg { width: 1.72rem; height: 1.72rem; } .gender-source-icon .dna-ring { fill: none; stroke: currentColor; stroke-width: 1.15; } .gender-source-icon .dna-strand { stroke: currentColor; stroke-width: 1.35; } .gender-source-icon .dna-rung { stroke: currentColor; stroke-width: 1.05; opacity: 0.82; } .gender-source-icon .dna-dot { fill: currentColor; } .gender-source-icon.assumed { width: 1.9rem; height: 1.9rem; flex-basis: 1.9rem; background: rgba(93, 95, 89, 0.12); color: var(--muted); } .gender-source-icon.assumed svg { width: 1.72rem; height: 1.72rem; } .gender-source-icon .assumed-eye { stroke: currentColor; stroke-width: 1.7; } .gender-source-icon .assumed-pupil { fill: currentColor; } .bird-card-title .gender-source-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; flex-basis: 1.05rem; } .bird-card-title .gender-source-icon svg { display: block; width: 0.92rem; height: 0.92rem; } .bird-avatar, .profile-photo { width: 56px; height: 56px; object-fit: cover; border-radius: 18px; border: 1px solid rgba(39, 105, 179, 0.16); background: rgba(255, 255, 255, 0.86); } .profile-photo { width: 112px; height: 112px; border-radius: 28px; } .placeholder-avatar { display: grid; place-items: center; background: linear-gradient(180deg, rgba(255, 245, 227, 0.95), rgba(226, 241, 229, 0.9)); color: var(--accent-green); font-size: 1.6rem; font-weight: 700; } .bird-card { width: 100%; padding: 1rem; border: 1px solid rgba(95, 121, 77, 0.16); display: grid; gap: 0.35rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; background: var(--card-bg); } .bird-card-select { display: grid; gap: 0.35rem; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; box-shadow: none; } .bird-card-select:hover { transform: none; box-shadow: none; } .bird-alert-stack { display: flex; flex-wrap: wrap; gap: 0.35rem; } .bird-alert-badge { display: inline-flex; align-items: center; gap: 0.45rem; justify-self: start; padding: 0.28rem 0.7rem; border-radius: 999px; background: rgba(203, 58, 53, 0.12); border: 1px solid rgba(203, 58, 53, 0.18); color: var(--accent-red); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .alert-dismiss-button { width: auto; margin: 0; border: 0; border-left: 1px solid rgba(203, 58, 53, 0.22); border-radius: 0; padding: 0 0 0 0.45rem; background: transparent; color: inherit; box-shadow: none; font-size: 0.72rem; font-weight: 800; letter-spacing: 0; text-transform: none; } .alert-dismiss-button:hover { transform: none; box-shadow: none; text-decoration: underline; } .bird-card:hover, .bird-card.active { transform: translateY(-2px); box-shadow: 0 16px 24px rgba(39, 105, 179, 0.15); border-color: rgba(35, 138, 90, 0.28); } .chart-card { padding: 1rem; background: linear-gradient(180deg, rgba(255, 248, 236, 0.92), rgba(240, 249, 245, 0.88)), var(--card-bg); position: relative; overflow: hidden; } .overview-chart-card::before { display: none; } .overview-chart-card { min-height: 260px; } .weight-chart { width: 100%; height: auto; min-height: 180px; } .chart-grid-line { stroke: rgba(39, 105, 179, 0.16); stroke-width: 1; stroke-dasharray: 4 6; } .chart-axis-line { stroke: rgba(31, 42, 42, 0.24); stroke-width: 1.2; } .chart-axis-label { fill: var(--muted); font-size: 11px; } .latest-weight-callout rect { fill: rgba(255, 253, 249, 0.94); stroke: rgba(31, 42, 42, 0.16); } .latest-weight-callout text { fill: var(--text); font-size: 11px; font-weight: 700; } .historical-weight-line, .historical-weight-dot { opacity: 0.48; } .historical-weight-line { stroke-dasharray: 7 6; } .chart-footer, .recent-list, .detail-grid, .summary-grid, .legend-grid, .inline-form { display: grid; gap: 0.85rem; } .chart-footer { grid-template-columns: 1fr auto; align-items: center; } .recent-list article { padding: 0.9rem 1rem; display: grid; gap: 0.25rem; } .note-card, .audit-log-card { align-items: start; } .note-card div, .audit-log-card div { display: flex; gap: 0.75rem; justify-content: space-between; align-items: start; } .note-card span, .audit-log-card span, .audit-log-card small { color: var(--muted); } .note-card p { margin: 0.35rem 0 0; white-space: pre-wrap; } .note-card .button-row { justify-content: space-between; align-items: center; } .bird-timeline-card { grid-template-columns: 18px minmax(0, 1fr); gap: 0.75rem; border: 1px solid rgba(39, 105, 179, 0.12); border-radius: 8px; background: rgba(255, 255, 255, 0.76); } .bird-timeline-graph-card { padding: 0.85rem; border: 1px solid rgba(39, 105, 179, 0.12); border-radius: 8px; background: rgba(255, 255, 255, 0.72); } .bird-timeline-graph { position: relative; min-height: 340px; isolation: isolate; } .bird-timeline-graph-line { position: absolute; left: calc(8.125% + 18px); right: 8.125%; top: 50%; height: 4px; border-radius: 999px; background: linear-gradient(90deg, rgba(39, 105, 179, 0.42), rgba(35, 138, 90, 0.88)); transform: translateY(-50%); } .bird-timeline-graph-scale { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .bird-timeline-graph-tick { position: absolute; top: calc(50% + 78px); transform: translateX(-50%); color: var(--muted); font-size: 0.68rem; font-weight: 600; line-height: 1; white-space: nowrap; } .bird-timeline-graph-tick::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 0.35rem); width: 1px; height: 68px; background: linear-gradient(to bottom, rgba(39, 105, 179, 0.22), rgba(39, 105, 179, 0)); transform: translateX(-50%); } .bird-timeline-graph-tick.today { color: var(--accent-green); font-weight: 800; } .bird-timeline-graph-tick.today::before { background: linear-gradient(to bottom, rgba(35, 138, 90, 0.42), rgba(35, 138, 90, 0)); } .bird-timeline-graph-point { position: absolute; top: 50%; width: 136px; height: 0; transform: translateX(-50%); z-index: 1; } .bird-timeline-graph-dot { position: absolute; left: 50%; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; border: 4px solid var(--accent-green); border-radius: 50%; background: #fffdf9; } .bird-timeline-graph-point.above .bird-timeline-graph-dot { left: calc(50% + var(--branch-offset, 0px)); bottom: var(--branch-distance, 34px); transform: translate(-50%, 50%); } .bird-timeline-graph-point.below .bird-timeline-graph-dot { left: calc(50% + var(--branch-offset, 0px)); top: var(--branch-distance, 34px); transform: translate(-50%, -50%); } .bird-timeline-graph-point.on-line .bird-timeline-graph-dot { top: 0; transform: translate(-50%, -50%); } .bird-timeline-graph-point.owner_changed .bird-timeline-graph-dot { border-color: var(--accent-blue); } .bird-timeline-graph-point.transferred .bird-timeline-graph-dot { border-color: var(--accent-red); } .bird-timeline-graph-point.hatch_date .bird-timeline-graph-dot { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #fffdf9; } .bird-timeline-graph-connector { position: absolute; left: 50%; width: 2px; height: var(--branch-connector-length, var(--branch-distance, 34px)); background: repeating-linear-gradient( to bottom, rgba(39, 105, 179, 0.18) 0 4px, transparent 4px 9px ); transform: translateX(-50%) rotate(var(--branch-angle, 0deg)); } .bird-timeline-graph-point.above .bird-timeline-graph-connector { bottom: 0; transform-origin: bottom center; } .bird-timeline-graph-point.below .bird-timeline-graph-connector { top: 0; transform-origin: top center; } .bird-timeline-graph-point.on-line .bird-timeline-graph-connector { display: none; } .bird-timeline-graph-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--accent-green); font-family: "Material Symbols Outlined"; font-size: 18px; font-style: normal; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; direction: ltr; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; } .bird-timeline-graph-point.hatch_date .bird-timeline-graph-icon { color: var(--accent-gold); font-size: 34px; } .bird-timeline-graph-point.owner_changed .bird-timeline-graph-icon { color: var(--accent-blue); } .bird-timeline-graph-point.transferred .bird-timeline-graph-icon { color: var(--accent-red); } .bird-timeline-graph-copy { position: absolute; left: 50%; width: 124px; transform: translateX(-50%); display: grid; gap: 0.08rem; justify-items: center; text-align: center; color: var(--ink); font-size: 0.68rem; } .bird-timeline-graph-copy strong { font-weight: 700; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .bird-timeline-graph-copy span { color: var(--muted); line-height: 1.1; } .bird-timeline-graph-point.above .bird-timeline-graph-copy { left: calc(50% + var(--branch-offset, 0px)); bottom: calc(var(--branch-distance, 34px) + 24px); } .bird-timeline-graph-point.below .bird-timeline-graph-copy { left: calc(50% + var(--branch-offset, 0px)); top: calc(var(--branch-distance, 34px) + 24px); } .bird-timeline-graph-point.on-line .bird-timeline-graph-copy { bottom: 28px; } .bird-timeline-form { padding: 0.85rem; border: 1px solid rgba(35, 138, 90, 0.14); border-radius: 8px; background: rgba(240, 248, 244, 0.54); } .bird-timeline-marker { width: 12px; height: 12px; margin-top: 0.25rem; border-radius: 999px; background: var(--accent-green); box-shadow: 0 0 0 4px rgba(35, 138, 90, 0.12); } .bird-timeline-content { display: grid; gap: 0.3rem; min-width: 0; } .bird-timeline-content > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; } .bird-timeline-content strong, .bird-timeline-content span, .bird-timeline-content small, .bird-timeline-content p { overflow-wrap: anywhere; } .bird-timeline-content span, .bird-timeline-content small { color: var(--muted); } .bird-timeline-content p { margin: 0; color: var(--ink); } .legend-grid, .detail-grid, .summary-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .profile-hero { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1rem 6.4rem 1rem 1rem; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 252, 247, 0.92), rgba(240, 248, 244, 0.84)); border: 1px solid rgba(39, 105, 179, 0.1); position: relative; } .profile-actions { position: absolute; top: 0.85rem; right: 0.85rem; display: flex; gap: 0.45rem; } .profile-icon-button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(39, 105, 179, 0.18); border-radius: 14px; background: rgba(255, 254, 250, 0.9); box-shadow: 0 10px 20px rgba(86, 63, 34, 0.12); } .profile-icon-button:hover { transform: translateY(-1px); border-color: rgba(35, 138, 90, 0.34); } .profile-icon-button svg { width: 24px; height: 24px; fill: none; stroke: var(--accent-blue); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .qr-profile-button svg { fill: var(--accent-blue); stroke: none; } .bird-detail-tabs { position: absolute; top: 5rem; right: -3rem; display: flex; flex-direction: column; gap: 0.45rem; } .bird-detail-tab { display: grid; place-items: center; width: 48px; height: 44px; border: 1px solid rgba(39, 105, 179, 0.14); border-left: 0; border-radius: 0 14px 14px 0; background: rgba(255, 254, 250, 0.92); color: var(--muted); transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease; } .bird-detail-tab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; } .bird-detail-tab .weight-tab-icon { width: 24px; height: 24px; fill: currentColor; stroke: none; } .bird-detail-tab .info-tab-icon, .bird-detail-tab .note-tab-icon, .bird-detail-tab .report-tab-icon, .bird-detail-tab .timeline-tab-icon, .bird-detail-tab .audit-tab-icon, .bird-detail-tab .vet-tab-icon { width: 24px; height: 24px; fill: currentColor; stroke: none; } .bird-detail-tab .timeline-tab-icon { display: inline-flex; align-items: center; justify-content: center; color: currentColor; font-family: "Material Symbols Outlined"; font-size: 24px; font-style: normal; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; direction: ltr; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; } .bird-detail-tab:hover { border-color: rgba(35, 138, 90, 0.28); color: var(--ink); transform: translateY(-1px); } .bird-detail-tab.active { border-color: rgba(35, 138, 90, 0.42); background: rgba(240, 248, 244, 0.95); color: var(--accent-green); box-shadow: 10px 10px 20px rgba(39, 105, 179, 0.1); } .bird-detail-tab-panel { display: grid; gap: 1rem; } .profile-copy { display: grid; gap: 0.18rem; } .profile-copy h3 { margin: 0; font-size: 1.6rem; } .profile-copy p { margin: 0; } .profile-title { display: inline-flex; align-items: center; gap: 0.5rem; } .gender-symbol { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; flex: 0 0 1.9rem; border-radius: 999px; font-size: 1.45rem; font-weight: 700; line-height: 1; } .gender-symbol-mark { display: block; line-height: 0.82; transform: scale(1.16); transform-origin: center; } .profile-title .gender-symbol-mark { transform: scale(1.28); } .gender-symbol.male { background: rgba(39, 105, 179, 0.12); color: var(--accent-blue); } .gender-symbol.female { background: rgba(203, 58, 53, 0.12); color: var(--accent-red); } .gender-symbol.unknown { background: rgba(93, 95, 89, 0.12); color: var(--muted); } .segmented-field { display: grid; gap: 0.65rem; } .segmented-control { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.55rem; } .segmented-option { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; border: 1px solid rgba(39, 105, 179, 0.14); border-radius: 16px; padding: 0.85rem 1rem; background: rgba(255, 254, 250, 0.92); color: var(--ink); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .segmented-option.active { border-color: rgba(35, 138, 90, 0.4); box-shadow: 0 10px 20px rgba(39, 105, 179, 0.1); transform: translateY(-1px); } .form-divider { height: 1px; width: 100%; background: linear-gradient(90deg, transparent, rgba(53, 129, 98, 0.32), transparent); } .inline-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } .legend-card, .detail-card, .summary-card, .weight-reference-card, .vet-visit-card { padding: 1rem; border-radius: 20px; background: var(--card-bg); border: 1px solid rgba(53, 129, 98, 0.24); display: grid; gap: 0.35rem; box-shadow: 0 16px 30px rgba(86, 63, 34, 0.14); } .inset-panel { padding: 1.25rem; background: var(--card-bg); border: 1px solid rgba(53, 129, 98, 0.2); box-shadow: 0 14px 28px rgba(86, 63, 34, 0.12); } .wide-field { grid-column: 1 / -1; } .settings-inline-header { display: grid; gap: 0.15rem; padding-top: 0.35rem; } .settings-inline-header h3 { margin: 0; } .profile-list-fields { display: grid; gap: 0.65rem; } .profile-list-fields input { margin-top: 0; } .care-form-actions { align-self: start; margin-top: 0; } .care-entry-form { margin-bottom: 1rem; } .legend-card { grid-template-columns: auto 1fr; align-items: center; } .legend-card div { display: grid; gap: 0.15rem; } .legend-card div span { color: var(--muted); font-size: 0.85rem; } .legend-line-key { display: flex; flex-wrap: wrap; gap: 0.45rem 0.75rem; align-items: center; } .legend-line-key span { display: inline-flex; align-items: center; gap: 0.35rem; } .legend-line-key svg { width: 44px; height: 8px; flex: 0 0 auto; } .legend-swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.65); } .large-swatch { width: 24px; height: 24px; } .detail-card span, .summary-card span { color: var(--muted); font-size: 0.95rem; } .detail-card strong, .summary-card strong, .legend-card strong { font-size: 1.05rem; } .billing-contact-email { min-width: 0; overflow-wrap: anywhere; } .detail-item-list { margin: 0; padding-left: 1.15rem; font-weight: 600; } .detail-item-list li + li { margin-top: 0.2rem; } .summary-list { display: grid; gap: 0.2rem; } .summary-alert-card { border-color: rgba(203, 58, 53, 0.22); background: linear-gradient(180deg, rgba(255, 247, 244, 0.97), rgba(255, 240, 234, 0.94)); } .summary-alert-card strong { color: var(--accent-red); } .weight-reference-card { gap: 0.55rem; } .weight-reference-card h3, .weight-reference-card p, .weight-reference-card small { margin: 0; } .weight-reference-card.neutral { border-color: rgba(39, 105, 179, 0.24); background: linear-gradient(180deg, rgba(248, 252, 255, 0.96), rgba(241, 249, 245, 0.92)); } .weight-reference-card.success { border-color: rgba(35, 138, 90, 0.28); background: linear-gradient(180deg, rgba(244, 252, 246, 0.97), rgba(234, 248, 239, 0.94)); } .weight-reference-card.warning { border-color: rgba(203, 58, 53, 0.22); background: linear-gradient(180deg, rgba(255, 247, 244, 0.97), rgba(255, 240, 234, 0.94)); } .weight-reference-card.success h3 { color: var(--accent-green); } .weight-reference-card.warning h3 { color: var(--accent-red); } .summary-trend-row { display: flex; flex-wrap: wrap; gap: 0.15rem; align-items: baseline; } .summary-trend-name { color: var(--ink); } .summary-trend-change.positive { color: var(--accent-green); } .summary-trend-change.negative { color: var(--accent-red); } .vet-visit-card span, .vet-visit-card small { color: var(--muted); } .empty-card { opacity: 0.82; } .medication-admin-actions { display: grid; gap: 0.65rem; padding-top: 0.35rem; } .medication-dose-row { display: grid; grid-template-columns: minmax(120px, 1fr) auto; gap: 0.75rem; align-items: center; padding: 0.7rem; border: 1px solid rgba(53, 129, 98, 0.18); border-radius: 16px; background: rgba(255, 255, 255, 0.46); } .medication-dose-row > span { display: grid; gap: 0.15rem; } .dose-schedule-editor { display: grid; gap: 0.65rem; margin-top: 0.5rem; } .dose-schedule-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 0.75rem; align-items: center; } .dose-schedule-row input { margin-top: 0; } .form-panel { display: grid; gap: 1rem; } label { display: block; font-weight: 600; } .bulk-date-field { min-width: 180px; } .bulk-date-field input { margin-top: 0.35rem; } .bulk-weight-form { display: grid; gap: 1rem; } .bulk-weight-table-shell { overflow-x: auto; border-radius: 22px; border: 1px solid rgba(53, 129, 98, 0.18); background: rgba(255, 252, 246, 0.72); } .bulk-weight-table { width: 100%; border-collapse: collapse; min-width: 620px; } .bulk-weight-table th, .bulk-weight-table td { padding: 0.95rem 1rem; text-align: left; border-bottom: 1px solid rgba(53, 129, 98, 0.12); } .bulk-weight-table th { font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); background: rgba(255, 247, 233, 0.9); } .bulk-weight-table tbody tr:last-child td { border-bottom: 0; } .bulk-weight-table td input { margin-top: 0; min-width: 120px; } .toggle-card { display: grid; gap: 0.45rem; padding: 1rem; border-radius: 20px; background: var(--card-bg); border: 1px solid rgba(53, 129, 98, 0.24); box-shadow: 0 16px 30px rgba(86, 63, 34, 0.14); } .species-picker-field { position: relative; } .species-picker { position: relative; } .species-picker-menu { position: absolute; top: calc(100% + 0.45rem); left: 0; right: 0; z-index: 12; display: grid; gap: 0.3rem; padding: 0.45rem; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.48), transparent 42%), linear-gradient(180deg, rgba(255, 249, 238, 0.98), rgba(228, 244, 230, 0.95)); border: 1px solid rgba(53, 129, 98, 0.22); box-shadow: 0 22px 42px rgba(86, 63, 34, 0.18); backdrop-filter: blur(12px); max-height: 280px; overflow-y: auto; } .species-picker-option { width: 100%; text-align: left; border: 1px solid transparent; border-radius: 14px; padding: 0.75rem 0.85rem; background: rgba(255, 255, 255, 0.56); color: var(--ink); transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .species-picker-option:hover, .species-picker-option.active { background: linear-gradient(180deg, rgba(255, 248, 235, 0.98), rgba(229, 241, 231, 0.94)); border-color: rgba(39, 105, 179, 0.18); transform: translateY(-1px); } .species-picker-empty { padding: 0.8rem 0.85rem; color: var(--muted); font-size: 0.95rem; } .verified-location-field { display: grid; gap: 0.75rem; } .verified-location-label { display: grid; gap: 0.35rem; font-weight: 600; } .verified-location-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.65rem; align-items: end; } .verified-location-search-row.has-selected-location { grid-template-columns: minmax(0, 1fr) auto auto; } .verified-location-search-row.has-selected-location input { border-color: rgba(35, 138, 90, 0.45); background: rgba(35, 138, 90, 0.08); box-shadow: 0 0 0 3px rgba(35, 138, 90, 0.08); } .verified-location-result small { color: var(--muted); } .verified-location-results { display: grid; gap: 0.45rem; } .verified-location-result { display: grid; gap: 0.15rem; width: 100%; padding: 0.8rem 0.9rem; text-align: left; color: var(--ink); border: 1px solid rgba(53, 129, 98, 0.2); border-radius: 8px; background: rgba(255, 255, 255, 0.55); } .verified-location-result:hover { border-color: rgba(39, 105, 179, 0.28); background: rgba(255, 255, 255, 0.78); } .toggle-card input[type="checkbox"] { width: 20px; height: 20px; margin-top: 0.15rem; padding: 0; accent-color: var(--accent-green); } .toggle-field { display: flex; align-items: center; gap: 0.65rem; padding-top: 1.75rem; } .toggle-field input[type="checkbox"] { width: 20px; height: 20px; margin: 0; padding: 0; accent-color: var(--accent-green); } .checkbox-row { display: flex; align-items: flex-start; gap: 0.75rem; width: min(100%, 420px); margin: 0.35rem 0 0; padding: 0.85rem 1rem; border: 1px solid rgba(53, 129, 98, 0.24); border-radius: 16px; background: rgba(255, 255, 255, 0.62); box-shadow: 0 12px 24px rgba(86, 63, 34, 0.1); } .checkbox-row input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; margin: 0.1rem 0 0; padding: 0; accent-color: var(--accent-green); } .checkbox-row span { display: grid; gap: 0.15rem; line-height: 1.3; } .checkbox-row strong { color: var(--ink); font-size: 0.98rem; } .checkbox-row small { color: var(--muted); font-size: 0.86rem; } .primary-button { border: 0; border-radius: 18px; padding: 0.95rem 1.2rem; color: #fffdf9; background: linear-gradient(135deg, #d89a2f, #3c8f65 58%, #2f8f98); box-shadow: 0 14px 28px rgba(88, 110, 62, 0.22); } .primary-button:hover { background: linear-gradient(135deg, #c98b22, #327e59 58%, #277c84); } .secondary-button { border: 1px solid rgba(39, 105, 179, 0.18); border-radius: 18px; padding: 0.95rem 1.2rem; color: var(--ink); background: rgba(255, 255, 255, 0.72); box-shadow: 0 10px 22px rgba(39, 105, 179, 0.1); } .secondary-button:hover { background: rgba(255, 255, 255, 0.92); } .danger-button { border: 1px solid rgba(171, 44, 44, 0.18); border-radius: 18px; padding: 0.95rem 1.2rem; color: #fffaf8; background: linear-gradient(135deg, #bc3733, #8e2523); box-shadow: 0 12px 24px rgba(142, 37, 35, 0.18); } .danger-button:hover { background: linear-gradient(135deg, #aa2f2c, #7d201e); } .primary-button:disabled { opacity: 0.55; cursor: not-allowed; } .error-banner { margin: 0; padding: 1rem 1.2rem; border-radius: 18px; background: rgba(203, 58, 53, 0.1); border: 1px solid rgba(203, 58, 53, 0.2); color: #922728; } .success-banner { margin: 0; padding: 1rem 1.2rem; border-radius: 18px; background: rgba(35, 138, 90, 0.1); border: 1px solid rgba(35, 138, 90, 0.2); color: var(--accent-green); } .picker-list { display: flex; gap: 0.75rem; flex-wrap: wrap; } .color-preview-card { display: flex; gap: 0.9rem; align-items: center; padding: 0.95rem 1rem; border-radius: 20px; background: var(--card-bg); border: 1px solid rgba(53, 129, 98, 0.24); box-shadow: 0 16px 30px rgba(86, 63, 34, 0.14); } .picker-chip { border: 1px solid rgba(39, 105, 179, 0.16); border-radius: 999px; padding: 0.65rem 0.95rem; background: rgba(255, 255, 255, 0.68); color: var(--ink); } .picker-chip.active { border-color: transparent; background: linear-gradient(135deg, rgba(203, 58, 53, 0.94), rgba(39, 105, 179, 0.94)); color: #fffdf9; } .photo-editor { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1rem; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 252, 247, 0.9), rgba(240, 248, 244, 0.82)); border: 1px solid rgba(39, 105, 179, 0.1); } .photo-preview-shell { display: flex; align-items: center; justify-content: center; } .crop-preview-frame { width: 112px; height: 112px; position: relative; overflow: hidden; border-radius: 28px; border: 1px solid rgba(39, 105, 179, 0.16); background: rgba(255, 255, 255, 0.86); cursor: grab; touch-action: none; user-select: none; } .crop-preview-image { position: absolute; object-fit: cover; pointer-events: none; } .crop-preview-overlay { position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, 0.78); border-radius: 28px; box-shadow: inset 0 0 0 999px rgba(31, 42, 42, 0.08); pointer-events: none; } .crop-preview-frame.dragging { cursor: grabbing; } .photo-copy { display: grid; gap: 0.75rem; } .crop-control-stack { display: grid; gap: 0.85rem; } .file-picker input[type="file"] { margin-top: 0.75rem; padding: 0.75rem; } .app-modal-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 1.5rem; background: rgba(31, 42, 42, 0.34); backdrop-filter: blur(8px); } .app-modal { width: min(720px, 100%); max-height: min(82vh, 760px); overflow: auto; border-radius: 28px; padding: 1.5rem; background: linear-gradient(180deg, rgba(255, 251, 245, 0.98), rgba(241, 249, 245, 0.96)); border: 1px solid rgba(53, 129, 98, 0.2); box-shadow: 0 28px 60px rgba(31, 42, 42, 0.24); } .weight-alert-modal { display: grid; gap: 1rem; } .qr-modal { width: min(520px, 100%); } .qr-print-card { display: grid; gap: 0.8rem; justify-items: center; text-align: center; padding: 1rem; border-radius: 22px; background: #fffdf9; } .qr-code { width: min(280px, 100%); height: auto; image-rendering: pixelated; } .qr-bird-mark rect { fill: rgba(255, 255, 255, 0.96); } .qr-print-card h3, .qr-print-card p { margin: 0; } .qr-print-card p { max-width: 100%; overflow-wrap: anywhere; color: var(--muted); font-size: 0.9rem; } .modal-alert-list { display: grid; gap: 0.9rem; } @media print { body { background: #fff; } body::before, .no-print { display: none; } .app-modal-backdrop { position: static; display: block; padding: 0; background: #fff; backdrop-filter: none; } .app-modal { box-shadow: none; border: 0; width: 100%; max-height: none; overflow: visible; } .qr-print-card { min-height: 100vh; align-content: center; } } @media (max-width: 980px) { .education-admin-basics, .quiz-editor-options { grid-template-columns: 1fr; } .app-shell, .auth-panel, .hero-card, .dashboard-grid, .forms-grid, .hero-stats, .chart-footer, .inline-form, .profile-hero, .photo-editor, .settings-nested-grid, .verified-location-search-row { grid-template-columns: 1fr; } .app-shell { padding: 1rem; gap: 0.85rem; } .settings-grid { grid-template-columns: 1fr; } .settings-column, .settings-column > .panel { grid-column: auto; } .top-alert-notification { grid-template-columns: auto minmax(0, 1fr); } .top-alert-actions { grid-column: 1 / -1; justify-content: start; } .bird-detail-panel { margin-right: 0; } .profile-hero { padding: 1rem; } .bird-detail-tabs { position: static; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); transform: none; } .bird-detail-tab { width: auto; min-width: 0; border-left: 1px solid rgba(39, 105, 179, 0.14); border-radius: 14px; } .side-rail { position: static; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.55rem; } .brand-lockup { justify-items: start; padding-left: 0; } .side-nav-logo { width: min(120px, 27vw); } .side-nav.panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; align-items: center; gap: 0.65rem; padding: 0.65rem; border-radius: 20px; } .page-tabs { grid-auto-flow: column; grid-auto-columns: minmax(5.5rem, max-content); grid-template-columns: none; gap: 0.4rem; min-width: 0; overflow-x: auto; padding-bottom: 0.1rem; scrollbar-width: thin; } .page-tab { min-height: 42px; min-width: 5.5rem; padding: 0.55rem 0.65rem; border-radius: 14px; text-align: center; font-size: 0.92rem; font-weight: 700; white-space: nowrap; } .side-nav .secondary-button { min-height: 42px; padding: 0.55rem 0.75rem; border-radius: 14px; white-space: nowrap; } .workspace-switcher { grid-column: 1 / -1; gap: 0.5rem; } .workspace-switcher-list { display: flex; gap: 0.45rem; overflow-x: auto; padding-bottom: 0.1rem; } .workspace-switcher-item { min-width: 160px; padding: 0.55rem 0.7rem; border-radius: 14px; } .workspace-switcher-item small { display: none; } }