:root{--bg: #0d0d0d;--surface: #1a1a1a;--surface-el: #242424;--border: #2e2e2e;--accent: #f59e0b;--accent-dim: #92400e;--text-primary: #fafafa;--text-secondary:#a3a3a3;--success: #22c55e;--danger: #ef4444;--font-sans: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow-card: 0 1px 3px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.4);--glow-accent: 0 0 16px rgba(245,158,11,.35)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%}body{background-color:var(--bg);color:var(--text-primary);font-family:var(--font-sans);line-height:1.5;min-height:100dvh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}button{font-family:inherit;cursor:pointer;border:none;background:none}input{font-family:inherit}ul,ol{list-style:none}.app-layout{max-width:480px;margin:0 auto;padding:1.5rem 1rem 2rem;display:flex;flex-direction:column;gap:1.5rem}.app-main{display:flex;flex-direction:column;gap:1.25rem}.app-header{text-align:center;padding-top:.5rem}.logo{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-bottom:.5rem}.logo-bean{font-size:1.75rem;line-height:1}.logo-text{font-family:var(--font-sans);font-size:1.75rem;font-weight:800;letter-spacing:-.03em;color:var(--text-primary)}.logo-accent{color:var(--accent)}.cheesy-quote{font-size:.78rem;color:var(--text-secondary);font-style:italic;opacity:0;transition:opacity .4s ease;min-height:1.2em}.cheesy-quote--visible{opacity:1}.coffee-status{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem 1.5rem;text-align:center;box-shadow:var(--shadow-card)}.coffee-status__inner{display:flex;align-items:center;justify-content:center;gap:.6rem}.status-label{font-family:var(--font-mono);font-size:1.4rem;font-weight:700;letter-spacing:.08em;color:var(--text-primary)}.status-time{font-family:var(--font-mono);font-size:.75rem;color:var(--text-secondary);margin-top:.35rem;letter-spacing:.04em}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.dot--idle{background:var(--text-secondary)}.dot--brewing{background:var(--success);animation:pulse 1.2s ease-in-out infinite}.dot--fresh{background:var(--success)}.dot--old{background:var(--accent)}.dot--stale{background:var(--danger);animation:blink 1s step-start infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.coffee-status--fresh{border-color:#22c55e4d}.coffee-status--brewing{border-color:#22c55e80}.coffee-status--getting-old{border-color:#f59e0b4d}.coffee-status--make-more{border-color:#ef444459}.brew-button-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem 1.25rem 1.5rem;box-shadow:var(--shadow-card)}.brew-form{display:flex;flex-direction:column;gap:.75rem}.brew-input-wrapper{position:relative}.brew-input{width:100%;background:transparent;border:none;border-bottom:2px solid var(--border);color:var(--text-primary);font-size:1rem;font-weight:500;padding:.5rem 0;outline:none;transition:border-color .2s ease}.brew-input::placeholder{color:var(--text-secondary)}.brew-input:focus{border-bottom-color:var(--accent)}.brew-input:disabled{opacity:.5}.brew-error{font-size:.8rem;color:var(--danger);font-family:var(--font-mono)}.brew-btn{width:100%;background:var(--accent);color:#000;font-family:var(--font-mono);font-size:1rem;font-weight:700;letter-spacing:.1em;padding:.85rem 1rem;border-radius:var(--radius-md);transition:box-shadow .2s ease,opacity .2s ease,transform .1s ease;text-transform:uppercase}.brew-btn:hover:not(:disabled){box-shadow:var(--glow-accent);transform:translateY(-1px)}.brew-btn:active:not(:disabled){transform:translateY(0)}.brew-btn:disabled,.brew-btn--loading{opacity:.6;cursor:not-allowed;box-shadow:none}.section-title{font-size:.7rem;font-family:var(--font-mono);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.75rem}.empty-state{font-size:.85rem;color:var(--text-secondary);font-style:italic}.recent-brews{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow-card)}.brew-list{display:flex;flex-direction:column;gap:.5rem}.brew-card{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:var(--surface-el);border:1px solid var(--border);border-radius:var(--radius-md);padding:.75rem .875rem;transition:border-color .2s ease}.brew-card:hover{border-color:#f59e0b40}.brew-card__info{display:flex;flex-direction:column;gap:.2rem;min-width:0}.brew-card__name{font-size:.95rem;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brew-card__time{font-family:var(--font-mono);font-size:.7rem;color:var(--text-secondary);letter-spacing:.02em}.kudos-btn{display:flex;align-items:center;gap:.3rem;color:var(--text-secondary);font-family:var(--font-mono);font-size:.75rem;padding:.35rem .6rem;border-radius:var(--radius-sm);border:1px solid transparent;flex-shrink:0;transition:color .2s ease,border-color .2s ease,background .2s ease}.kudos-btn:hover{color:var(--accent);border-color:#f59e0b4d;background:#f59e0b12}.kudos-count{min-width:1ch;text-align:right}.top-brewers{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow-card)}.leaderboard{display:flex;flex-direction:column;gap:.5rem}.leaderboard-item{display:flex;align-items:center;gap:1rem;background:var(--surface-el);border:1px solid var(--border);border-radius:var(--radius-md);padding:.75rem .875rem}.leaderboard-item--rank-1{border-color:#f59e0b59}.rank-num{font-family:var(--font-mono);font-size:1.1rem;font-weight:700;color:var(--accent);min-width:2ch;letter-spacing:.05em}.leaderboard-item--rank-2 .rank-num,.leaderboard-item--rank-3 .rank-num{color:var(--text-secondary)}.brewer-name{font-size:.95rem;font-weight:600;color:var(--text-primary);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brewer-kudos{font-family:var(--font-mono);font-size:.75rem;color:var(--text-secondary);white-space:nowrap}.kudos-value{color:var(--accent);font-weight:700}.connection-status{position:fixed;top:.875rem;right:.875rem;z-index:100;display:flex;align-items:center;gap:.35rem;background:var(--surface-el);border:1px solid var(--border);border-radius:999px;padding:.3rem .7rem;box-shadow:var(--shadow-card)}.conn-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.conn-dot--live{background:var(--success)}.conn-dot--sync{background:var(--accent);animation:pulse 1.2s ease-in-out infinite}.conn-dot--offline{background:var(--danger)}.conn-label{font-family:var(--font-mono);font-size:.65rem;font-weight:700;letter-spacing:.08em;color:var(--text-secondary)}.app-footer{text-align:center;font-size:.75rem;color:var(--text-secondary);padding-top:.5rem;border-top:1px solid var(--border)}@media(min-width:640px){.app-layout{padding:2rem 1.5rem 3rem}.logo-text{font-size:2.2rem}.status-label{font-size:1.7rem}.brew-btn{font-size:1.1rem}}