:root{--ground: #080E1A;--panel: #0D1B30;--panel-2: #132340;--ink: #F2F8FF;--body: #B8CCE4;--muted: #8EA4C4;--line: #1B2F4F;--line-soft: #152540;--accent: #00D4C0;--accent-ink: #33E8DA;--accent-soft: #002E2A;--on-accent: #001A17;--danger: #EC8A7F;--danger-soft: #33201A;--ready: #63C69C;--warn: #DBAC52;--radius: 10px;--tap: 44px;--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--mono: ui-monospace, "SF Mono", Consolas, "Cascadia Mono", monospace;--safe-top: env(safe-area-inset-top, 0px);--safe-right: env(safe-area-inset-right, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--safe-left: env(safe-area-inset-left, 0px);color-scheme:dark}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0}html{-webkit-text-size-adjust:100%;background:var(--ground)}body{background:var(--ground);color:var(--body);font:16px/1.5 var(--font);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}h1,h2{color:var(--ink);margin:0;line-height:1.2;letter-spacing:-.01em}p{margin:0}a{color:var(--accent-ink)}strong{color:var(--ink);font-weight:600}button{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}.mono{font-family:var(--mono)}.app{min-height:100%;min-height:100dvh}.screen{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:12px;height:calc(56px + var(--safe-top));padding:var(--safe-top) calc(8px + var(--safe-right)) 0 calc(16px + var(--safe-left));flex:none}.topbar-title{font-size:1.15rem;font-weight:600;flex:1}.brand{display:inline-flex;align-items:center;gap:10px;flex:1;color:var(--ink);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.98rem}.brand em{font-style:normal;color:var(--accent)}.mark{display:inline-block;line-height:0}.mark svg{width:100%;height:100%;display:block}.icon-btn{width:var(--tap);height:var(--tap);display:inline-flex;align-items:center;justify-content:center;background:transparent;border:0;border-radius:50%;color:var(--body);cursor:pointer}.icon-btn:active{background:var(--panel-2)}.btn{min-height:48px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--radius);border:1px solid var(--line);background:var(--panel);color:var(--ink);font-weight:600;cursor:pointer;user-select:none;-webkit-user-select:none}.btn:active{filter:brightness(1.15)}.btn:disabled{opacity:.45;cursor:default}.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}.btn-ghost{background:transparent}.btn-danger-text{color:var(--danger)}.field{display:flex}.field-input{width:100%;min-height:48px;padding:10px 14px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);font:inherit}.field-input::placeholder{color:var(--muted)}.field-input:focus{outline:none;border-color:var(--accent)}textarea.field-input{min-height:120px;resize:vertical;font-family:var(--mono);font-size:1rem}.field-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}.hint{color:var(--muted);font-size:.9rem;line-height:1.45}.hint.warn{color:var(--warn)}.check{display:flex;align-items:center;gap:12px;min-height:var(--tap);cursor:pointer}.check input{width:22px;height:22px;accent-color:var(--accent);margin:0}.section-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}.home-main{flex:1;display:grid;grid-template-columns:1fr;gap:22px;padding:4px calc(16px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(16px + var(--safe-left));max-width:520px;width:100%;margin:0 auto}.home-auth{display:flex;flex-direction:column;gap:10px}.btn-connect{margin-top:6px}.address-entry{display:flex;flex-direction:column;gap:8px}.address-input{font-family:var(--mono)}.link-btn{background:none;border:0;padding:0;margin-top:4px;min-height:var(--tap);color:var(--accent);font:inherit;font-size:.95rem;text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:3px}.number-display{display:flex;align-items:baseline;min-height:64px;padding:8px 14px;font-family:var(--mono);font-size:2.1rem;letter-spacing:.06em;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);white-space:pre;overflow:hidden}.number-display.number-complete{border-color:var(--accent)}.number-placeholder{color:var(--line)}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.key{height:54px;display:inline-flex;align-items:center;justify-content:center;background:var(--panel-2);border:0;border-radius:var(--radius);color:var(--ink);font-size:1.45rem;font-weight:500;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}.key:active{background:var(--line)}.key-blank{background:transparent}.key-backspace{color:var(--body)}.recent-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.recent-row{display:flex;align-items:center;gap:4px}.recent-main{flex:1;min-height:56px;display:flex;align-items:center;gap:12px;padding:6px 10px 6px 12px;background:var(--panel);border:1px solid var(--line-soft);border-radius:var(--radius);color:var(--ink);text-align:left;cursor:pointer}.recent-main:active{background:var(--panel-2)}.recent-icon{color:var(--accent);display:inline-flex}.recent-text{flex:1;display:flex;flex-direction:column;line-height:1.25}.recent-name{font-weight:600}.recent-number{font-family:var(--mono);color:var(--muted);font-size:.9rem;letter-spacing:.05em}.recent-go{color:var(--muted);display:inline-flex}.recent-remove{color:var(--muted)}.home-install{display:flex;flex-direction:column;align-items:stretch}.install-hint{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.9rem;line-height:1.45}.install-hint svg{flex:none;margin-top:2px;color:var(--accent)}@media(orientation:landscape)and (max-height:520px){.home-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"dial auth" "dial recent" "dial install";grid-template-rows:auto 1fr auto;align-items:start;gap:10px 22px;max-width:none}.home-dial{grid-area:dial}.home-auth{grid-area:auth}.home-recent{grid-area:recent}.home-install{grid-area:install}.number-display{min-height:52px;font-size:1.6rem}.key{height:44px;font-size:1.2rem}.keypad{gap:6px;margin-top:6px}.topbar{height:calc(44px + var(--safe-top))}.recent-main{min-height:48px}}.screen-card{align-items:center;justify-content:center;padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left))}.card{width:100%;max-width:420px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 22px 22px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}.card-danger{border-color:#ec8a7f66}.card-mark{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:10px;margin-bottom:6px}.card-title{font-size:1.35rem}.card-number{font-family:var(--mono);font-size:1.3rem;letter-spacing:.08em;color:var(--accent)}.card-line{color:var(--body);max-width:34ch}.card-countdown{color:var(--muted);font-variant-numeric:tabular-nums}.card-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px;width:100%}.card-actions .btn{flex:1 1 140px}.card .btn-ghost{margin-top:8px;min-width:140px}.spinner{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite;display:inline-block;flex:none}.card-mark .spinner{position:absolute;inset:-4px;width:auto;height:auto;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}@media(orientation:landscape)and (max-height:520px){.card{padding:16px 20px;gap:6px}.card-mark{margin-bottom:0}.card-mark .mark{height:28px!important;width:23px!important}}.settings-main{flex:1;display:flex;flex-direction:column;gap:14px;padding:4px calc(16px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(16px + var(--safe-left));max-width:560px;width:100%;margin:0 auto}.settings-card{align-items:stretch;text-align:left;padding:18px;gap:12px;max-width:none}.settings-body{display:flex;flex-direction:column;gap:12px}.settings-line{display:flex;justify-content:space-between;gap:16px;min-height:28px;align-items:baseline}.settings-key{color:var(--muted)}.settings-val{color:var(--ink);text-align:right}.settings-val.ok{color:var(--ready)}.screen-session{position:fixed;inset:0;background:#000;overflow:hidden;min-height:0;display:block}html[data-screen=session],html[data-screen=session] body{overflow:hidden}.session-surface{position:absolute;inset:0;touch-action:none}.session-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.session-waiting{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:#0d1b30d9;color:var(--body);font-size:.9rem;pointer-events:none}.cursor-dot{position:absolute;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #080e1ad9,0 0 10px #00d4c099;pointer-events:none;will-change:transform}.kb-input{position:fixed;top:0;left:0;width:1px;height:1px;opacity:.01;border:0;padding:0;margin:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px}.session-top{position:absolute;top:0;left:0;right:0;padding-top:var(--safe-top);padding-left:var(--safe-left);padding-right:var(--safe-right);z-index:3;display:flex;flex-direction:column;align-items:stretch;pointer-events:none}.session-status{display:flex;justify-content:flex-end;padding:6px 10px 0}.toolbar{pointer-events:auto;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding:4px 6px;background:#080e1adb;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line-soft);transition:transform .18s ease,opacity .18s ease;transform:translateY(0);opacity:1}.toolbar::-webkit-scrollbar{display:none}@media(max-width:480px){.toolbar{flex-wrap:wrap;justify-content:center}}.toolbar-hidden{transform:translateY(calc(-100% - var(--safe-top)));opacity:0;pointer-events:none}.tb-btn{flex:none;min-width:58px;height:50px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:transparent;border:0;border-radius:8px;color:var(--body);cursor:pointer;padding:2px 4px}.tb-btn:active{background:var(--panel-2)}.tb-icon{display:inline-flex;line-height:0}.tb-label{font-size:10px;line-height:1;letter-spacing:.01em;white-space:nowrap}.tb-on{color:var(--accent)}.tb-on .tb-icon{filter:drop-shadow(0 0 4px rgba(0,212,192,.5))}.tb-danger{color:var(--danger)}.keysbar{pointer-events:auto;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:6px 8px 8px;background:#080e1adb;border-bottom:1px solid var(--line-soft)}.keysbar::-webkit-scrollbar{display:none}.keysbar-gap{width:8px;flex:none}.keybtn{flex:none;min-width:48px;height:var(--tap);padding:0 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;color:var(--ink);font-size:.95rem;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation}.keybtn-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}.toolbar-handle{position:absolute;top:var(--safe-top);left:50%;transform:translate(-50%);width:120px;height:var(--tap);display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;cursor:pointer;z-index:2}.toolbar-handle:after{content:"";display:block;width:40px;height:4px;border-radius:2px;background:#b8cce48c}.latency{pointer-events:auto;position:relative;min-height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:#080e1acc;font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--muted);cursor:pointer}.latency:before{content:"";position:absolute;inset:-8px}.latency-good{color:var(--ready);border-color:#63c69c80}.latency-ok{color:var(--warn);border-color:#dbac5280}.latency-slow{color:var(--danger);border-color:#ec8a7f80}.stats{pointer-events:auto;align-self:flex-end;margin:6px 10px 0;width:min(340px,calc(100vw - 20px));padding:12px 14px;background:#0d1b30f5;border:1px solid var(--line);border-radius:12px;font-size:.85rem;display:flex;flex-direction:column;gap:4px}.stats .settings-line{min-height:22px}.sheet-backdrop{position:absolute;inset:0;z-index:5;background:#080e1a8c;display:flex;align-items:flex-end;justify-content:center}.sheet{width:100%;max-width:520px;max-height:80%;background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;padding:8px 16px calc(16px + var(--safe-bottom));display:flex;flex-direction:column;gap:8px;overflow:auto}.sheet-head{display:flex;align-items:center;justify-content:space-between}.sheet-title{font-size:1.05rem}.sheet-body{display:flex;flex-direction:column;gap:8px}.choice{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 12px;background:var(--panel-2);border:1px solid transparent;border-radius:var(--radius);color:var(--ink);text-align:left;cursor:pointer}.choice-on{border-color:var(--accent)}.choice-text{display:flex;flex-direction:column;line-height:1.3}.choice-hint{color:var(--muted);font-size:.85rem}.choice-check{color:var(--accent);display:inline-flex}.clip-text{min-height:100px}@media(orientation:landscape)and (max-height:520px){.sheet-backdrop{align-items:center}.sheet{border-radius:16px;border-bottom:1px solid var(--line);max-height:92%;padding-bottom:12px}.tb-btn{height:46px;min-width:54px}}.toasts{position:fixed;left:0;right:0;bottom:calc(12px + var(--safe-bottom));z-index:50;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 16px;pointer-events:none}.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;max-width:520px;width:100%;padding:10px 14px;background:var(--panel-2);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px -14px #000000e6;font-size:.93rem;animation:toast-in .18s ease}.toast-danger{border-color:#ec8a7f80}.toast-ready{border-color:#63c69c80}.toast-text{flex:1}.toast-action{min-height:36px;padding:0 12px;background:transparent;border:1px solid var(--accent);border-radius:8px;color:var(--accent);font-weight:600;cursor:pointer;white-space:nowrap}.toast-out{opacity:0;transition:opacity .18s ease}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}