:root{--canvas: #f4f7fb;--surface: rgba(255, 255, 255, .92);--surface-strong: #ffffff;--border: rgba(16, 24, 40, .12);--text: #172033;--text-muted: #5b6476;--brand: #0f5f8c;--brand-soft: #e0f0f8;--success: #166534;--success-soft: #dcfce7;--danger: #b42318;--danger-soft: #fee4e2;--warning: #92400e;--warning-soft: #fef3c7;--neutral: #475467;--neutral-soft: #f2f4f7;--radius-lg: 18px;--radius-md: 12px;--shadow: 0 22px 50px rgba(16, 24, 40, .12)}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100vh;color:var(--text);background:linear-gradient(180deg,#f8fbfd 0%,var(--canvas) 100%);font-family:IBM Plex Sans,Avenir Next,Segoe UI,system-ui,sans-serif}a{color:var(--brand)}.workspace{max-width:880px;margin:0 auto;padding:2.5rem 1.25rem 4rem}.workspace-header{margin-bottom:1.5rem}.workspace-header h1{margin:.25rem 0 0;font-size:1.875rem}.workspace-header .eyebrow{color:var(--text-muted);font-size:.875rem;letter-spacing:.04em;text-transform:uppercase;margin:0}.workspace-header .subtle{color:var(--text-muted);margin:.5rem 0 0}.workspace-actions{display:flex;gap:.5rem;margin-top:1rem}.workspace-panels{display:grid;gap:1.25rem}.panel{background:var(--surface-strong);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow)}.panel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem}.panel-header h2{margin:0;font-size:1.125rem}.subtle{color:var(--text-muted)}.managed-form{display:flex;flex-direction:column;gap:1rem}.segmented-control{display:inline-grid;grid-template-columns:1fr 1fr;gap:.25rem;padding:.25rem;margin-bottom:1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.segmented-control button{border-color:transparent;background:transparent;color:var(--text-muted);border-radius:calc(var(--radius-md) - 3px)}.segmented-control button.active{background:var(--brand);color:#fff}.field{display:flex;flex-direction:column;gap:.35rem}.field span{font-weight:600;font-size:.9rem}.field input{font:inherit;padding:.65rem .85rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-strong)}.field input:focus{outline:2px solid var(--brand);outline-offset:1px}button{font:inherit;font-weight:600;padding:.65rem 1.1rem;border-radius:var(--radius-md);border:1px solid var(--brand);background:var(--brand);color:#fff;cursor:pointer}button:disabled{opacity:.6;cursor:not-allowed}button.secondary-button{border-color:var(--border);background:var(--surface);color:var(--brand)}button.secondary-button:hover:not(:disabled){background:var(--brand-soft)}.flash{border-radius:var(--radius-md);padding:.75rem 1rem;font-size:.95rem}.flash-success{background:var(--success-soft);color:var(--success)}.flash-error{background:var(--danger-soft);color:var(--danger)}.flash-warning{background:#fef3c7;color:#92400e}.device-list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}.device-row{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 1rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}.device-paired-peers{margin-top:.25rem;border-top:1px solid var(--border);padding-top:.5rem}.device-paired-peers summary{cursor:pointer;font-weight:600;font-size:.875rem;color:var(--text-muted);padding:.25rem 0;list-style:none}.device-paired-peers summary::-webkit-details-marker{display:none}.device-paired-peers summary:before{content:"▸";display:inline-block;margin-right:.5rem;transition:transform .15s ease}.device-paired-peers[open] summary:before{transform:rotate(90deg)}.device-paired-peers-list{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}.device-paired-peer-row{padding:.5rem .75rem;background:var(--surface-muted, var(--brand-soft));border-radius:var(--radius-sm, 6px);display:flex;flex-direction:column;gap:.25rem}.device-paired-peer-row-head{display:flex;align-items:center;gap:.5rem}.device-paired-peer-name{font-weight:600}.status-pill{display:inline-block;margin-left:.5rem;padding:.1rem .55rem;font-size:.75rem;border-radius:999px;background:var(--brand-soft);color:var(--brand)}.status-pill-success{background:var(--success-soft);color:var(--success)}.status-pill-warning{background:var(--warning-soft);color:var(--warning)}.status-online{background:var(--success-soft);color:var(--success)}.status-offline{background:var(--danger-soft);color:var(--danger)}.tunnel-status{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;margin-top:.35rem}.tunnel-status-pill{margin-left:0}.tunnel-status-direct{background:var(--success-soft);color:var(--success)}.tunnel-status-relay{background:var(--warning-soft);color:var(--warning)}.tunnel-status-offline{background:var(--danger-soft);color:var(--danger)}.tunnel-status-connecting{background:var(--neutral-soft);color:var(--neutral)}.tunnel-status-age{font-size:.8rem;color:var(--text-muted)}.tunnel-status-relay-note{flex-basis:100%;margin:.15rem 0 0;font-size:.8rem;color:var(--text-muted)}.top-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem 1.25rem;background:var(--surface-strong);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}.top-bar-brand{display:inline-flex;align-items:center;font-weight:700;font-size:1.05rem;color:var(--brand);text-decoration:none}.top-bar-brand-logo{display:block;height:32px;width:auto}.dark-surface .top-bar-brand-logo{filter:invert(1) hue-rotate(180deg) brightness(.9)}.top-bar-brand:hover{text-decoration:underline}.top-bar-tools{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.top-bar-identity{display:flex;flex-direction:column;text-align:right;line-height:1.1}.top-bar-identity-name{font-weight:600;font-size:.9rem}.top-bar-identity-email{color:var(--text-muted);font-size:.8rem}.top-bar-link,.top-bar-button{font:inherit;font-size:.9rem;font-weight:600;text-decoration:none;color:var(--brand);background:transparent;border:1px solid var(--border);border-radius:var(--radius-md);padding:.4rem .85rem;cursor:pointer}.top-bar-link:hover,.top-bar-button:hover{background:var(--brand-soft)}@media(max-width:600px){.top-bar{padding:.75rem 1rem}.top-bar-identity{text-align:left;width:100%;order:3}}.app-footer{margin:3rem auto 1.5rem;padding:1rem 1.25rem 0;max-width:880px;border-top:1px solid var(--border);color:var(--text-muted);font-size:.85rem;text-align:center}.app-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 1.25rem;margin-bottom:.5rem}.app-footer-link{color:var(--text-muted);text-decoration:none;font-weight:500}.app-footer-link:hover,.app-footer-link:focus{color:var(--brand);text-decoration:underline}.app-footer-meta{margin:0;font-size:.78rem;color:var(--text-muted)}@media(max-width:600px){.app-footer-links{gap:.65rem .9rem}}.zone{display:grid;gap:.85rem;margin-bottom:1.5rem}.zone-heading{margin:0;font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.zone-actionable .zone-heading{color:var(--brand)}.zone-advanced .zone-heading{color:#6b7280;cursor:pointer;padding:.5rem 0}.zone-hint{margin:0 0 .75rem;font-size:.85rem}.advanced-twirl{border:1px dashed var(--border);border-radius:var(--radius-md);padding:.5rem 1rem;background:#10182808}.advanced-twirl[open]{background:var(--surface)}.advanced-twirl summary{list-style:none}.advanced-twirl summary::-webkit-details-marker{display:none}.advanced-twirl summary:before{content:"▸ ";display:inline-block;transition:transform .12s ease;color:var(--text-muted);margin-right:.25rem}.advanced-twirl[open] summary:before{content:"▾ "}.advanced-stack{display:grid;gap:.75rem;margin-top:.75rem}.actionable-grid{display:grid;gap:1rem}@media(min-width:720px){.actionable-grid{grid-template-columns:1fr 1fr}}.actionable-stack,.actionable-pair{display:grid;gap:1rem;grid-template-columns:1fr}@media(min-width:720px){.actionable-pair{grid-template-columns:1fr 1fr}}.routing-mode-list{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.35rem}.routing-mode-list-item{margin:0;padding:0}.routing-mode-row{display:grid;grid-template-columns:1.5rem 1fr;align-items:center;gap:.5rem;width:100%;padding:.55rem .7rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm, 4px);color:var(--text);text-align:left;font:inherit;cursor:pointer}.routing-mode-row:hover:not(:disabled){background:var(--surface-hover, var(--surface))}.routing-mode-row.is-active{border-color:var(--accent, currentColor);background:var(--surface-active, var(--surface))}.routing-mode-row:disabled{opacity:.55;cursor:default}.routing-mode-row-mark{font-weight:700;text-align:center}.routing-mode-spinner{display:inline-block;width:1rem;height:1rem;margin-left:.5rem;border-radius:50%;border:2px solid currentColor;border-top-color:transparent;animation:routing-mode-spinner-spin .7s linear infinite;flex-shrink:0;vertical-align:middle}@keyframes routing-mode-spinner-spin{to{transform:rotate(360deg)}}.routing-mode-applying{display:flex;align-items:center;gap:.25rem}.routing-mode-failed{display:grid;gap:.5rem}.routing-mode-failed button{justify-self:start}.actionable-subheading{margin:.5rem 0 0;font-size:.95rem;font-weight:600;color:var(--ink-subtle, #4a4a4a)}.empty-state{display:grid;gap:.75rem;justify-items:center;padding:1rem .85rem;text-align:center;color:var(--text-muted);background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-md)}.empty-state p{margin:0}.claim-status{margin-top:1rem}.info-grid{display:grid;gap:.5rem}.compact-grid .info-row{padding:.35rem 0}.info-row{display:grid;gap:.15rem;padding:.55rem 0;border-bottom:1px solid var(--border)}.info-row:last-child{border-bottom:none}.info-row dt{color:var(--text-muted);font-size:.8rem;font-weight:600}.info-row dd{margin:0;word-break:break-all}.info-row code{font-family:IBM Plex Mono,SFMono-Regular,monospace;font-size:.85rem}.device-row.compact-row{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:center}.device-row-id{color:var(--text-muted);font-size:.8rem;font-family:IBM Plex Mono,SFMono-Regular,monospace}.primary-link,.secondary-link{display:inline-block;font-weight:600;text-decoration:none;padding:.55rem 1rem;border-radius:var(--radius-md)}.primary-link{background:var(--brand);color:#fff}.primary-link:hover{background:#0c4d72}.secondary-link{border:1px solid var(--border);color:var(--brand);background:var(--surface)}.secondary-link:hover{background:var(--brand-soft)}.inline-rename-display{display:inline-flex;align-items:baseline;gap:.35rem}button.inline-rename-trigger{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:none;background:transparent;color:var(--text-muted);font-weight:400;font-size:1rem;line-height:1;cursor:pointer;border-radius:4px}button.inline-rename-trigger:hover:not(:disabled),button.inline-rename-trigger:focus-visible{color:var(--brand);background:transparent}.inline-rename-form{display:flex;flex-direction:column;gap:.5rem;margin:0}.inline-rename-input{width:100%;font:inherit;padding:.5rem .65rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-strong);color:var(--text)}.inline-rename-input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:var(--brand)}.inline-rename-buttons{display:flex;justify-content:flex-end;gap:.5rem}.inline-rename-error{margin:0;color:var(--danger)}