:root { color: #111111; background: #f7f9fc; font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 320px; min-height: 100vh; margin: 0; background-color: #f7f9fc; background-image: linear-gradient(#e2e8f0 1px, transparent 1px), linear-gradient(90deg, #e2e8f0 1px, transparent 1px); background-size: 28px 28px; }
button { font: inherit; }
.stage { display: grid; min-height: 100vh; place-items: center; padding: 24px; }
.remote { position: relative; width: min(100%, 380px); min-height: 570px; padding: 17px; border: 8px solid #061d42; border-radius: 42px; background: linear-gradient(145deg, #123b73, #061d42 62%, #03122b); box-shadow: 0 24px 55px #061d4240, inset 0 1px #7cb8f5; }
.remote-head { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 2px 10px 17px; }
.brand-mark { display: block; width: 29px; height: 29px; border: 1px solid #dbeeff; border-radius: 50%; object-fit: cover; object-position: center; }
.remote-dot { width: 10px; height: 10px; border-radius: 50%; background: #a81f32; box-shadow: 0 0 12px #e1304c; transition: background 180ms ease, box-shadow 180ms ease; }
.remote-dot[data-state="ready"] { background: #23b67a; box-shadow: 0 0 12px #42e6a4; }
.screen { display: grid; align-content: center; min-height: 104px; padding: 14px; border: 5px solid #020c1d; border-radius: 12px; background: #eaf4ff; box-shadow: inset 0 0 0 2px #7ca5cf, inset 0 0 22px #bcdfff; }
.message { margin: 0; color: #071f46; font: 700 0.96rem/1.35 "Trebuchet MS", sans-serif; text-align: center; }
.message.success { color: #075e46; }
.message.error { color: #8b1427; }
.identity { margin: 9px 0 0; color: #314b71; font: 0.7rem/1.3 ui-monospace, monospace; text-align: center; overflow-wrap: anywhere; }
.login, .logout, .command { border: 0; cursor: pointer; }
.login { width: 100%; min-height: 58px; margin-top: 22px; border-radius: 10px; background: #a81f32; box-shadow: 0 5px #67101d; color: #ffffff; font-weight: 800; }
.login:active { transform: translateY(3px); box-shadow: 0 2px #67101d; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 25px; }
.command { display: grid; min-height: 142px; place-content: center; gap: 8px; border: 4px solid #020d21; border-radius: 24px; background: linear-gradient(145deg, #fdfdfd, #d8e0e9); box-shadow: 0 6px #020d21, inset 0 1px #ffffff; color: #071f46; font-weight: 900; letter-spacing: 0.08em; }
.command strong { font: 900 3.8rem/0.8 "Trebuchet MS", sans-serif; letter-spacing: 0; }
.command span { font-size: 0.73rem; }
.command.down { color: #a81f32; }
.command.unlock { background: linear-gradient(145deg, #d6edff, #84bde5); }
.command.lock { background: linear-gradient(145deg, #d3233c, #8b1427); color: #ffffff; }
.command:hover:not(:disabled) { filter: brightness(1.06); }
.command:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px #020d21; }
.command:disabled { cursor: default; opacity: 0.58; }
.logout { grid-column: 1 / -1; min-height: 38px; border-radius: 8px; background: transparent; color: #b8d9fc; font-size: 0.78rem; text-decoration: underline; }
.loading { position: absolute; z-index: 2; inset: 100px 17px 17px; display: grid; place-content: center; gap: 12px; padding: 30px; border: 2px solid #5da6e8; border-radius: 22px; background: #061d42ed; color: #ffffff; text-align: center; }
.loading span:last-child { color: #c7e4ff; font-size: 0.8rem; line-height: 1.4; }
.loading-mark { width: 42px; height: 42px; margin: 0 auto; border: 5px solid #76b9ef; border-top-color: #a81f32; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 440px) { .stage { padding: 10px; } .remote { min-height: calc(100vh - 20px); border-radius: 34px; } .command { min-height: min(27vh, 150px); } }