:root{--whoop-black: #000000;--whoop-white: #FFFFFF;--whoop-teal: #00F19F;--whoop-strain: #0093E7;--whoop-recovery-blue: #67AEE6;--whoop-recovery-high: #16EC06;--whoop-recovery-medium: #FFDE00;--whoop-recovery-low: #FF0026;--whoop-sleep: #7BA1BB;--whoop-bg-gradient-start: #283339;--whoop-bg-gradient-end: #101518;--whoop-grey-1: #8A8F98}.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-weight:600;line-height:1}.chip .logo{width:16px;height:16px;background:url(/whoop_logo.png) no-repeat center / contain}.chip.strain{color:var(--whoop-strain);border:1px solid var(--whoop-strain);background:#0093e71a}.chip.recovery-high{color:var(--whoop-recovery-high);border:1px solid var(--whoop-recovery-high);background:#16ec061f}.chip.recovery-medium{color:var(--whoop-recovery-medium);border:1px solid var(--whoop-recovery-medium);background:#ffde0024}.chip.recovery-low{color:var(--whoop-recovery-low);border:1px solid var(--whoop-recovery-low);background:#ff00261f}.chip.sleep{color:var(--whoop-sleep);border:1px solid var(--whoop-sleep);background:#7ba1bb1f}.muted{color:var(--whoop-grey-1)}:root{--radius: 12px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;color:#fff;background:linear-gradient(180deg,var(--whoop-bg-gradient-start, #283339),var(--whoop-bg-gradient-end, #101518))}.container{display:grid;grid-template-columns:320px 1fr;min-height:100vh}@media (max-width: 900px){.container{display:block}}.header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:12px}@media (max-width: 900px){.cards{grid-template-columns:1fr;gap:14px}}.card{border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:12px;background:#00000026}.card h3{margin:0 0 6px;font-size:16px}.side{width:320px;padding:20px 16px;box-sizing:border-box;border-right:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,var(--whoop-bg-gradient-start, #283339),var(--whoop-bg-gradient-end, #101518));color:#fff;min-height:100vh;position:sticky;top:0;display:flex;flex-direction:column;gap:16px}@media (max-width: 900px){.side{width:80%;max-width:320px;padding:16px 14px;position:fixed;top:0;left:0;height:100vh;border-right:none;box-shadow:8px 0 24px #00000059}}.side .brand{display:grid;place-items:center;margin-top:8px;margin-bottom:6px}.side .brand img{width:180px;height:auto;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}.side .menu{display:grid;gap:12px;margin-top:6px}.bigbtn{display:block;width:100%;padding:14px 16px;text-align:center;font-weight:700;color:#fff;text-decoration:none;border-radius:16px;border:1px solid rgba(255,255,255,.18);background:#00000040;box-shadow:inset 0 1px #ffffff12,0 4px 16px #00000040;transition:transform .05s ease,background .2s ease,border-color .2s ease}.bigbtn:hover{transform:translateY(-1px)}.bigbtn:active{transform:translateY(0)}.bigbtn.active{border-color:transparent;background:linear-gradient(180deg,#ff2d2d,#970000);box-shadow:0 6px 18px #ff2d2d59}@media (max-width: 900px){.bigbtn{padding:16px 18px;font-size:16px;border-radius:18px}}.side .spacer{flex:1}.side .email{text-align:center;opacity:.85;font-size:13px}.side .footer{display:grid;place-items:center;gap:6px;margin-top:12px}.side .footer img{width:140px;opacity:.95}.side .copyright{text-align:center;opacity:.8;font-size:13px;line-height:1.2}.side .menu .bigbtn.is-locked,.side .menu .bigbtn[aria-disabled=true]{opacity:.5;cursor:not-allowed;filter:grayscale(20%)}.side .menu .bigbtn.is-locked:hover,.side .menu .bigbtn[aria-disabled=true]:hover{transform:none;background:#0003;border-color:#ffffff1f}#userBadge{border-top:1px solid rgba(255,255,255,.08);padding-top:10px;margin-top:12px}.header .brand-title,.header .console-title{color:#dbc072}.container>div{background:linear-gradient(180deg,var(--whoop-bg-gradient-start, #283339),var(--whoop-bg-gradient-end, #101518))}@media (max-width: 900px){.header{padding-left:64px}}