:root{--color-happy: #a8d8ea;--color-content: #b8ddb0;--color-hungry: #f7c59f;--color-dead: #c9c9c9;--color-accent: #fc4c02;--color-bg: #fdfaf6;--color-text: #3d3d3d;--color-muted: #888;--radius: 1rem}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,system-ui,sans-serif;background:var(--color-bg);color:var(--color-text);min-height:100vh;display:flex;align-items:center;justify-content:center}.screen{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;max-width:420px;width:100%;text-align:center}.spinner{width:48px;height:48px;border:5px solid #eee;border-top-color:var(--color-accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app-title{font-size:2.2rem;font-weight:800;letter-spacing:-.5px;color:var(--color-text)}.app-subtitle{color:var(--color-muted);font-size:1rem;line-height:1.5}.btn-strava{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.6rem;background:var(--color-accent);color:#fff;font-weight:700;font-size:1rem;border-radius:var(--radius);text-decoration:none;transition:opacity .15s}.btn-strava:hover{opacity:.88}.pet-area{display:flex;flex-direction:column;align-items:center;gap:.75rem}.pet-name-row{display:flex;align-items:center;gap:.5rem;font-size:1.4rem;font-weight:700}.rename-btn{background:none;border:none;cursor:pointer;font-size:1rem;color:var(--color-muted);padding:.2rem .4rem;border-radius:.4rem;transition:color .15s,background .15s}.rename-btn:hover{color:var(--color-text);background:#eee}.refresh-btn{background:none;border:none;cursor:pointer;font-size:1.1rem;color:var(--color-muted);padding:.2rem .4rem;border-radius:.4rem;transition:color .15s,background .15s;line-height:1}.refresh-btn:hover:not(:disabled){color:var(--color-text);background:#eee}.refresh-btn:disabled{opacity:.4;cursor:default}.refresh-btn--spinning{animation:spin .7s linear infinite}.pet{border-radius:50% 50% 45% 45%;position:relative;transition:background-color .5s ease,opacity .5s ease,width .4s ease,height .4s ease;flex-shrink:0}.pet:before{content:"";position:absolute;top:36%;left:calc(50% - var(--eye-gap, 22px) / 2 - var(--eye-size, 9px) / 2);width:var(--eye-size, 9px);height:var(--eye-size, 9px);background:var(--color-text);border-radius:50%;box-shadow:var(--eye-gap, 22px) 0 0 var(--color-text)}.pet:after{content:"";position:absolute;bottom:26%;left:50%;transform:translate(-50%);width:20%;height:10%;min-width:16px;min-height:8px;border:3px solid var(--color-text);border-top:none;border-radius:0 0 var(--mouth-radius, 12px) var(--mouth-radius, 12px);transition:border-radius .3s}.pet--happy{background:var(--color-happy);animation:float 2.5s ease-in-out infinite}.pet--content{background:var(--color-content);animation:breathe 3.5s ease-in-out infinite}.pet--hungry{background:var(--color-hungry);animation:wobble .6s ease-in-out infinite}.pet--hungry:after{border-radius:0;height:0;border-bottom:none;border-top:3px solid var(--color-text);width:20%;min-width:16px;bottom:26%}.pet--dead{background:var(--color-dead);transform:rotate(15deg);opacity:.65}.pet--dead:before{background:transparent;box-shadow:none;content:"✕";font-size:calc(var(--eye-size, 9px) * 1.6);font-weight:900;color:#00000073;text-shadow:var(--eye-gap, 22px) 0 0 rgba(0,0,0,.45);width:auto;height:auto;border-radius:0;top:32%;transform:none}.pet--dead:after{border-radius:0;height:0;border-bottom:none;border-top:3px solid #999;width:20%;min-width:16px;bottom:26%}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes wobble{0%,to{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}.badge-row{display:flex;align-items:center;gap:.5rem}.state-badge{display:inline-block;padding:.25rem .8rem;border-radius:999px;font-size:.8rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.state-badge--happy{background:var(--color-happy);color:#1a6e8a}.state-badge--content{background:var(--color-content);color:#2d6e3d}.state-badge--hungry{background:var(--color-hungry);color:#8a4e10}.state-badge--dead{background:var(--color-dead);color:#555}.level-badge{display:inline-block;padding:.25rem .8rem;border-radius:999px;font-size:.8rem;font-weight:700;letter-spacing:.04em;background:var(--color-accent);color:#fff}.stats{background:#fff;border-radius:var(--radius);width:100%;box-shadow:0 1px 4px #0000000f;font-size:.9rem;overflow:hidden}.stats-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.75rem 1.4rem;background:none;border:none;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em}.stats-header:hover{background:#f9f9f9}.stats-chevron{display:inline-block;font-size:1.1rem;transform:rotate(90deg);transition:transform .2s}.stats-chevron--open{transform:rotate(270deg)}.stats-body{padding:0 1.4rem .9rem;line-height:1.9;color:var(--color-muted)}.stats-body strong{color:var(--color-text)}.logout-link{font-size:.8rem;color:var(--color-muted);text-decoration:none}.logout-link:hover{text-decoration:underline}.dead-screen{display:flex;flex-direction:column;align-items:center;gap:1.2rem}.dead-title{font-size:1.6rem;font-weight:800}.dead-message{color:var(--color-muted);font-size:.95rem}.form-group{display:flex;flex-direction:column;gap:.5rem;width:100%;text-align:left}.form-group label{font-size:.85rem;font-weight:600;color:var(--color-muted)}.form-group input{padding:.6rem .9rem;border:2px solid #e5e5e5;border-radius:.6rem;font-size:1rem;outline:none;transition:border-color .15s;width:100%}.form-group input:focus{border-color:var(--color-accent)}.btn-primary{padding:.7rem 1.4rem;background:var(--color-accent);color:#fff;font-weight:700;font-size:.95rem;border:none;border-radius:var(--radius);cursor:pointer;transition:opacity .15s;width:100%}.btn-primary:hover{opacity:.88}.modal-overlay{position:fixed;inset:0;background:#00000059;display:flex;align-items:center;justify-content:center;z-index:100}.modal-box{background:#fff;border-radius:var(--radius);padding:1.5rem;width:320px;display:flex;flex-direction:column;gap:1rem;box-shadow:0 8px 32px #00000026}.modal-title{font-size:1.1rem;font-weight:700}.modal-actions{display:flex;gap:.75rem;justify-content:flex-end}.btn-ghost{padding:.6rem 1rem;background:none;border:2px solid #e5e5e5;border-radius:.6rem;font-size:.9rem;cursor:pointer;transition:background .15s}.btn-ghost:hover{background:#f5f5f5}.btn-save{padding:.6rem 1rem;background:var(--color-accent);color:#fff;border:none;border-radius:.6rem;font-size:.9rem;font-weight:700;cursor:pointer;transition:opacity .15s}.btn-save:hover{opacity:.88}