: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; } .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; } .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-bird-profiles { order: 1; } .settings-card-collaborators { order: 2; } .settings-card-separate-flock { order: 3; } .settings-card-automation { order: 4; } .settings-card-transfer { order: 5; } .settings-card-flock-profile { order: 1; } .settings-card-billing { order: 2; } .flock-member-panel, .flock-member-sections { display: grid; gap: 1.5rem; } .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; } .button-row { display: flex; gap: 0.75rem; flex-wrap: wrap; } .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; } .gender-inline { font-size: 1.2rem; font-weight: 700; line-height: 1; } .gender-inline.male { color: var(--accent-blue); } .gender-inline.female { color: var(--accent-red); } .gender-inline.unknown { color: var(--muted); } .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; } .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; } .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; 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); } .profile-copy { display: grid; gap: 0.3rem; } .profile-copy h3 { margin: 0; font-size: 1.6rem; } .profile-title, .detail-gender { display: inline-flex; align-items: center; gap: 0.5rem; } .gender-symbol { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9rem; height: 1.9rem; border-radius: 999px; font-size: 1.2rem; font-weight: 700; line-height: 1; } .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(3, minmax(0, 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; } .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; } .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; } .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; } .toggle-card input[type="checkbox"] { width: 20px; height: 20px; margin-top: 0.15rem; padding: 0; accent-color: var(--accent-green); } .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; } .modal-alert-list { display: grid; gap: 0.9rem; } @media (max-width: 980px) { .app-shell, .auth-panel, .hero-card, .dashboard-grid, .forms-grid, .hero-stats, .chart-footer, .inline-form, .profile-hero, .photo-editor { grid-template-columns: 1fr; } .app-shell { padding: 1rem; } .settings-grid { grid-template-columns: 1fr; } .settings-column, .settings-column > .panel { grid-column: auto; } .side-nav { position: static; } .side-rail { position: static; } }