:root{--ink:#17201c;--muted:#52605a;--paper:#f4f1e9;--card:#fffdf8;--green:#176b4d;--green-dark:#0c4a34;--green-soft:#dceee4;--red-soft:#f8e1dc;--blue-soft:#e3edf7;--border:#b8c0bb;--shadow:0 10px 28px #17201c17}*{box-sizing:border-box}html{background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px}body{background:radial-gradient(circle at 90% 0%, #176b4d1a, transparent 32rem), var(--paper);min-height:100vh;margin:0}button{font:inherit}button:focus-visible{outline-offset:4px;outline:5px solid #f0a51b}button:disabled{cursor:not-allowed;filter:grayscale(.4);opacity:.48}.center-card{place-items:center;min-height:100vh;padding:24px;display:grid}.full-screen-loader{min-height:100dvh;color:var(--green-dark);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex}.full-screen-loader strong{font-size:1.15rem}.full-screen-loader>span:last-child{color:var(--muted);font-size:.9rem;font-weight:700}.loader-spinner{border:5px solid #c7d3cd;border-top-color:var(--green);border-radius:50%;width:48px;height:48px;margin-bottom:4px;animation:.8s linear infinite status-spin}.full-screen-error{min-height:100dvh;color:var(--ink);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:24px;display:flex}.full-screen-error h1{letter-spacing:-.03em;max-width:460px;margin:18px 0 10px;font-size:clamp(1.6rem,6vw,2.2rem)}.full-screen-error p{max-width:400px;color:var(--muted);margin-bottom:24px;font-size:1rem;font-weight:700;line-height:1.45}.error-symbol{background:var(--red-soft);color:#792218;border-radius:50%;place-items:center;width:54px;height:54px;font-size:1.8rem;font-weight:900;display:grid}.retry-button{cursor:pointer;background:var(--green);color:#fff;min-width:220px;min-height:58px;box-shadow:var(--shadow);border:0;border-radius:16px;font-size:1.1rem;font-weight:900}.retry-button:hover{background:var(--green-dark)}.retry-button:active{transform:translateY(2px)}.pin-card{border:2px solid var(--border);background:var(--card);width:min(100%,440px);box-shadow:var(--shadow);border-radius:26px;padding:28px}.pin-card p{color:var(--muted);font-weight:600;line-height:1.5}.pin-card label{margin:28px 0 10px;font-size:1.08rem;font-weight:900;display:block}.pin-card input{border:3px solid var(--border);width:100%;min-height:58px;color:var(--ink);letter-spacing:.15em;background:#fff;border-radius:16px;margin-bottom:18px;padding:12px 18px;font-size:1.5rem}.app-shell{width:min(100% - 32px,780px);margin:0 auto;padding:24px 0 36px}.topbar{justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px;display:flex}.eyebrow,.section-label{color:var(--green-dark);letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;font-size:.92rem;font-weight:800}h1,h2,p{margin-top:0}h1{letter-spacing:-.045em;margin-bottom:0;font-size:clamp(1.8rem,5vw,2.7rem);line-height:1.05}h2{margin:24px 0 12px;font-size:clamp(1.25rem,3vw,1.55rem)}.connection{background:var(--green-soft);min-height:42px;color:var(--green-dark);border:2px solid #7a9588;border-radius:999px;flex:none;align-items:center;gap:10px;padding:8px 14px;font-weight:800;display:inline-flex}.connection-dot{background:#17824f;border-radius:50%;width:11px;height:11px;box-shadow:0 0 0 5px #17824f29}.connection.offline{color:#5f5a53;background:#ece8df;border-color:#a7a29a}.connection.offline .connection-dot{background:#817b73;box-shadow:0 0 0 5px #5b565024}@keyframes status-spin{to{transform:rotate(360deg)}}.now-card{border:2px solid var(--border);background:var(--card);box-shadow:var(--shadow);border-radius:22px;justify-content:space-between;align-items:center;gap:18px;padding:18px 20px;display:flex}.now-card .section-label{margin:0}.current-state{font-size:1.18rem;display:block}.now-details{text-align:right;gap:4px;display:grid}.now-details strong{font-size:1.2rem}.now-details span{color:var(--muted);font-weight:600}.now-facts{grid-template-columns:minmax(125px,1.4fr) repeat(3,minmax(80px,1fr));gap:8px;display:grid}.now-facts div{background:#eeeae1;border-radius:12px;gap:4px;min-width:0;padding:10px 12px;display:grid}.now-facts span{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:.85rem;font-weight:800}.now-facts strong{text-overflow:ellipsis;white-space:nowrap;font-size:1rem;overflow:hidden}.shortcut-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.shortcut-card{cursor:pointer;border:3px solid var(--border);background:var(--card);min-height:178px;color:var(--ink);text-align:left;box-shadow:var(--shadow);border-radius:24px;flex-direction:column;align-items:flex-start;padding:20px;display:flex;position:relative}.shortcut-card.selected{border-color:var(--green);box-shadow:0 0 0 4px #176b4d21, var(--shadow);background:#f5fff9}.selection-mark{border:3px solid var(--border);color:#fff;background:#fff;border-radius:50%;place-items:center;width:30px;height:30px;font-size:1.2rem;font-weight:900;display:grid;position:absolute;top:16px;right:16px}.selected .selection-mark{border-color:var(--green);background:var(--green)}.shortcut-name{max-width:calc(100% - 42px);margin-bottom:10px;font-size:1.3rem;font-weight:900;line-height:1.1}.shortcut-rooms{color:var(--muted);margin-bottom:14px;font-size:.9rem;font-weight:700;line-height:1.35}.shortcut-summary{color:var(--green-dark);margin-top:auto;font-size:.82rem;font-weight:800}.controls{margin-top:16px}.control{cursor:pointer;min-height:64px;box-shadow:var(--shadow);border:3px solid #0000;border-radius:22px;justify-content:center;align-items:center;gap:14px;font-size:1.08rem;font-weight:900;display:flex}.control:active,.shortcut-card:active{transform:translateY(2px)}.control.primary{background:var(--green);color:#fff;width:100%;min-height:72px;font-size:clamp(1.25rem,3vw,1.55rem)}.control.primary:hover{background:var(--green-dark)}.control-symbol{font-size:1.1em}.secondary-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px;display:grid}.control.stop{background:var(--red-soft);color:#792218;border-color:#c87469}.control.resume{background:var(--green-soft);color:var(--green-dark);border-color:#6d9a84}.control.dock{background:var(--blue-soft);color:#234969;border-color:#7892ab}.safety-note{color:var(--muted);text-align:center;margin:12px 0 0;font-size:.82rem;font-weight:700}.feedback{text-align:center;min-height:24px;margin-top:10px}.notice{color:var(--green-dark);margin:0;font-weight:800}.setup-note{color:#792218;margin:8px 0 0;font-weight:800}@media (max-width:680px){.center-card{padding:14px}.pin-card{border-radius:20px;padding:22px 18px}.pin-card label{margin-top:20px}.app-shell{width:min(100% - 20px,780px);padding:14px 0 24px}.topbar{align-items:center;gap:8px;margin-bottom:10px}.eyebrow,.section-label{margin-bottom:4px;font-size:.72rem}h1{font-size:clamp(1.35rem,6vw,1.7rem)}h2{margin:12px 0 6px;font-size:1rem}.connection{gap:6px;min-height:32px;padding:5px 8px;font-size:.72rem}.connection-dot{width:9px;height:9px;box-shadow:0 0 0 3px #17824f29}.connection.offline .connection-dot{box-shadow:0 0 0 3px #5b565024}.now-card{border-radius:14px;grid-template-columns:minmax(105px,.8fr) minmax(0,1.5fr);align-items:center;gap:8px;padding:9px 10px;display:grid}.current-state{font-size:.9rem}.now-details{text-align:left}.now-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;width:100%}.now-facts div{gap:2px;min-width:0;padding:6px 8px}.now-facts span{font-size:.68rem}.now-facts strong{text-overflow:ellipsis;white-space:nowrap;font-size:.84rem;overflow:hidden}.shortcut-grid{grid-template-columns:1fr;gap:6px}.shortcut-card{border-width:2px;border-radius:14px;justify-content:center;min-height:66px;padding:9px 44px 9px 12px}.selection-mark{border-width:2px;width:26px;height:26px;top:50%;right:10px;transform:translateY(-50%)}.shortcut-card:active{transform:translateY(1px)}.shortcut-name{margin-bottom:3px;font-size:1rem}.shortcut-rooms{margin-bottom:0;font-size:.74rem;line-height:1.2}.shortcut-summary{display:none}.controls{margin-top:10px}.control{border-width:2px;border-radius:14px;min-height:52px;font-size:.92rem}.control.primary{min-height:56px;font-size:1.1rem}.secondary-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:7px}.secondary-controls .control{flex-direction:column;gap:2px;padding:6px 3px;font-size:.82rem;line-height:1.05}.feedback{font-size:.82rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}