:root{--color-bg: #1a1a1a;--color-surface: #2a2a2a;--color-border: #3a3a3a;--color-text: #ffffff;--color-text-muted: #b3b3b3;--color-text-tertiary: #808080;--color-accent: #e31e24;--color-connected: #34c759;--color-connecting: #ff9500;--color-disconnected: #ff3b30;--color-idle: #8e8e93;--color-error: #ff3b30;--space-1: .25rem;--space-2: .5rem;--space-3: 1rem;--space-4: 1.5rem;--radius: .75rem;--radius-lg: 1rem;--radius-pill: 999px}*{box-sizing:border-box}body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:system-ui,-apple-system,sans-serif}.screen{max-width:480px;margin:0 auto;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}h1{font-size:1.25rem;margin:0}h2{font-size:1rem;margin:0 0 var(--space-2) 0;color:var(--color-text-muted)}form{display:flex;flex-direction:column;gap:var(--space-3)}label{display:flex;flex-direction:column;gap:var(--space-1);font-size:.875rem;color:var(--color-text-muted)}input{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);color:var(--color-text);padding:var(--space-2) var(--space-3);font-size:1rem}button{background:var(--color-accent);border:none;border-radius:var(--radius);color:#fff;padding:var(--space-2) var(--space-3);font-size:.9rem;font-weight:600;cursor:pointer}button:disabled{opacity:.6;cursor:not-allowed}.error-text{color:var(--color-error);font-size:.875rem;margin:0}.hint-text{color:var(--color-text-muted);font-size:.8rem;margin:var(--space-1) 0 0 0}.home-screen__header{display:flex;align-items:center;justify-content:space-between}.status-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3)}.status-panel__header{display:flex;align-items:center;justify-content:space-between}.status-panel__title{margin:0;font-size:.8rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.status-panel__badges{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);margin-top:var(--space-2)}.status-badge{background:#ffffff08;border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-2);display:flex;flex-direction:column;gap:var(--space-1);border-left:3px solid var(--color-idle)}.status-badge--connected{border-left-color:var(--color-connected)}.status-badge--connecting{border-left-color:var(--color-connecting)}.status-badge--disconnected{border-left-color:var(--color-disconnected)}.status-badge--idle{border-left-color:var(--color-idle)}.status-badge__label{font-size:.7rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.status-badge__value{font-size:.9rem;font-weight:600}.heartbeat-pill{display:inline-flex;align-items:center;gap:var(--space-1);padding:.3rem .6rem;border-radius:var(--radius-pill);background:#ffffff0a;color:var(--color-text-muted);font-size:.75rem;font-weight:500}.heartbeat-pill__icon{display:inline-flex;color:var(--color-text-tertiary);opacity:.35}.heartbeat-pill--active .heartbeat-pill__icon{color:var(--color-accent);opacity:1;animation:heartbeat-pulse .6s ease-out}@keyframes heartbeat-pulse{0%{transform:scale(1)}30%{transform:scale(1.35)}to{transform:scale(1)}}.authorize-port,.client-instructions{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-3)}.activity-log ul{list-style:none;margin:0;padding:0;height:280px;overflow-y:auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.activity-log__entry{display:flex;gap:var(--space-2);padding:var(--space-1) var(--space-2);font-size:.8rem;border-bottom:1px solid var(--color-border)}.activity-log__entry:last-child{border-bottom:none}.activity-log__time{color:var(--color-text-muted);white-space:nowrap;flex-shrink:0}.activity-log__message{min-width:0;overflow-wrap:break-word;word-break:break-word}.activity-log__entry--warn .activity-log__message{color:var(--color-connecting)}.activity-log__entry--error .activity-log__message{color:var(--color-error)}.login-screen{align-items:center;text-align:center;padding-top:var(--space-4)}.login-screen__logo{height:90px;width:auto;align-self:center}.login-screen__heading h1{font-size:1.75rem;font-weight:700}.login-screen__subtitle{margin:var(--space-1) 0 0 0;color:var(--color-text-muted);font-size:1rem}.login-screen form{width:100%;text-align:left}.login-screen button[type=submit]{height:56px;font-size:1.1rem}.login-screen__copyright{color:var(--color-text-tertiary);font-size:.75rem;margin:0}
