*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0e1a15;--bg-card: #152019;--bg-raised: #1c2d24;--border: rgba(255,255,255,.1);--border-md: rgba(255,255,255,.18);--gold: #52c489;--gold-dim: rgba(82,196,137,.2);--gold-dim2: rgba(82,196,137,.1);--text-1: #eaf2ec;--text-2: #a8c4b4;--text-3: #6b9680;--red: #e06c6c;--red-dim: rgba(224,108,108,.15);--green: #52c489;--green-dim: rgba(82,196,137,.15);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--font: "DM Sans", sans-serif;--mono: "DM Mono", monospace;--nav-h: 64px}html,body,#root{height:100%;background:var(--bg);color:var(--text-1);font-family:var(--font);font-size:15px;-webkit-font-smoothing:antialiased}.app-layout{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto}.page-content{flex:1;overflow-y:auto;padding:20px 16px calc(var(--nav-h) + 20px)}.card{background:var(--bg-card);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:10px}.card-raised{background:var(--bg-raised);border:.5px solid var(--border-md);border-radius:var(--radius-lg);padding:16px;margin-bottom:10px}.section-label{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:18px 0 8px}.page-title{font-size:22px;font-weight:600;color:var(--text-1);letter-spacing:-.02em}.mono{font-family:var(--mono)}.row{display:flex;align-items:center;justify-content:space-between;gap:8px}.label{font-size:13px;color:var(--text-2)}.value{font-size:13px;font-weight:500;color:var(--text-1)}.badge{font-size:11px;font-weight:500;padding:3px 9px;border-radius:20px;display:inline-flex;align-items:center;gap:5px}.badge-green{background:var(--green-dim);color:var(--green)}.badge-red{background:var(--red-dim);color:var(--red)}.badge-gold{background:var(--gold-dim);color:var(--gold)}.badge-muted{background:var(--border);color:var(--text-2)}.dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}.btn-group{display:flex;gap:6px;flex-wrap:wrap}.btn-opt{padding:7px 14px;font-size:12px;font-weight:500;font-family:var(--font);background:var(--bg-raised);color:var(--text-2);border:.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s}.btn-opt:hover{border-color:var(--border-md);color:var(--text-1)}.btn-opt.active{background:var(--gold-dim);color:var(--gold);border-color:#c9a84c4d}.btn-action{width:100%;padding:13px;font-size:14px;font-weight:500;font-family:var(--font);border-radius:var(--radius-md);border:.5px solid var(--border-md);cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:.01em}.btn-cw{background:var(--gold-dim2);color:var(--gold);border-color:#c9a84c33}.btn-ccw{background:var(--bg-raised);color:var(--text-1)}.btn-stop{background:var(--red-dim);color:var(--red);border-color:#e05c5c33}.btn-primary{background:var(--gold);color:#080f0c;border-color:var(--gold);font-weight:600}.btn-action:hover{opacity:.85}.btn-action:active{transform:scale(.98)}input[type=range]{-webkit-appearance:none;width:100%;height:3px;background:var(--border-md);border-radius:2px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold);border:2px solid var(--bg);box-shadow:0 0 0 1px var(--gold)}.tab-bar{display:flex;background:var(--bg-raised);border:.5px solid var(--border);border-radius:var(--radius-md);padding:3px;gap:3px;margin-bottom:10px}.tab{flex:1;padding:8px 0;font-size:12px;font-weight:500;text-align:center;color:var(--text-2);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s;background:transparent;border:none;font-family:var(--font)}.tab.active{background:var(--gold-dim);color:var(--gold)}.tab:hover:not(.active){color:var(--text-1)}.divider{height:.5px;background:var(--border);margin:12px 0}.navbar{position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;height:var(--nav-h);background:#0a0a0aeb;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:.5px solid var(--border);display:flex}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10px;font-weight:500;color:var(--text-3);text-decoration:none;letter-spacing:.06em;text-transform:uppercase;transition:color .15s}.nav-item svg{width:22px;height:22px;stroke-width:1.5}.nav-item.active{color:var(--gold)}.nav-item:hover:not(.active){color:var(--text-2)}.big-num{font-family:var(--mono);font-size:36px;font-weight:400;color:var(--gold);letter-spacing:-.02em}.time-input{background:var(--bg-raised);border:.5px solid var(--border-md);border-radius:var(--radius-md);color:var(--text-1);font-family:var(--mono);font-size:28px;text-align:center;padding:10px;width:100%;outline:none}.time-input:focus{border-color:var(--gold)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.dot-pulse{animation:pulse 2s ease-in-out infinite}.device-card{background:var(--bg-card);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;transition:border-color .15s}.device-card-active{border-color:#4dab7a59;background:#4dab7a0a}.pin-row{display:flex;gap:8px;justify-content:center}.pin-digit{width:42px;height:52px;background:var(--bg-raised);border:1px solid var(--border-md);border-radius:var(--radius-md);color:var(--text-1);font-family:var(--mono);font-size:22px;text-align:center;outline:none;transition:border-color .15s;caret-color:var(--gold)}.pin-digit:focus{border-color:var(--gold)}@media (min-width: 640px){:root{--nav-w: 192px}html,body,#root{height:100%;overflow:hidden}.app-layout{flex-direction:row;max-width:1080px;height:100vh;overflow:hidden}.navbar{position:relative;bottom:auto;left:auto;right:auto;top:auto;width:var(--nav-w);max-width:var(--nav-w);flex-shrink:0;height:100%;flex-direction:column;justify-content:flex-start;align-items:stretch;border-top:none;border-right:.5px solid var(--border);padding:32px 0 24px;gap:2px;overflow-y:auto}.navbar:before{content:"WatchWinder";display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);padding:0 20px 28px}.nav-item{flex:none;flex-direction:row;justify-content:flex-start;padding:11px 16px;gap:11px;font-size:12px;letter-spacing:.04em;border-radius:var(--radius-sm);margin:0 8px;text-transform:none}.nav-item svg{width:18px;height:18px;flex-shrink:0}.page-content{flex:1;height:100%;padding:36px 48px;max-width:none;overflow-y:auto}.desktop-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.desktop-grid>*{margin-bottom:0}.page-title{font-size:28px}.big-num{font-size:48px}}