:root{font-family:Inter,-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,system-ui,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color-scheme:light;--bg: #f4f5f8;--surface: #ffffff;--panel: #fafbfc;--ink: #191c24;--soft-ink: #687083;--faint-ink: #9aa1b1;--line: #e5e7ee;--line-strong: #d4d8e3;--line-faint: rgba(20, 24, 40, .05);--hover: rgba(20, 24, 40, .035);--accent: #4c63e6;--accent-hover: #3b51cf;--accent-2: #8b5cf6;--accent-soft: rgba(76, 99, 230, .08);--focus-ring: rgba(76, 99, 230, .22);--ok: #16a34a;--ok-glow: rgba(22, 163, 74, .4);--error: #d92d20;--error-hover: #b42318;--error-soft: rgba(217, 45, 32, .08);--error-line: rgba(217, 45, 32, .25);--badge-blue-ink: #2e4fd0;--badge-blue-bg: #e9edfd;--badge-blue-line: #d4dcfa;--badge-green-ink: #137a3d;--badge-green-bg: #e4f6eb;--badge-green-line: #c8ebd6;--badge-gray-ink: #555d6e;--badge-gray-bg: #eef0f4;--badge-gray-line: #e0e3ea;--topbar-bg: rgba(250, 251, 252, .82);--backdrop: rgba(15, 18, 28, .4);--shadow-sm: 0 1px 2px rgba(16, 20, 35, .05);--shadow-md: 0 1px 2px rgba(16, 20, 35, .05), 0 10px 30px -12px rgba(16, 20, 35, .18);--shadow-lg: 0 2px 6px rgba(16, 20, 35, .08), 0 24px 60px -20px rgba(16, 20, 35, .3);--ambient-opacity: .1;--mono: "JetBrains Mono", "SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace;--radius-lg: 14px;--radius-md: 10px;--radius-sm: 7px}:root[data-theme=dark]{color-scheme:dark;--bg: #0b0d13;--surface: #141722;--panel: #10131b;--ink: #e6e9f2;--soft-ink: #98a1b5;--faint-ink: #6c7488;--line: rgba(255, 255, 255, .08);--line-strong: rgba(255, 255, 255, .16);--line-faint: rgba(255, 255, 255, .05);--hover: rgba(255, 255, 255, .045);--accent: #6e85ff;--accent-hover: #8298ff;--accent-2: #a78bfa;--accent-soft: rgba(110, 133, 255, .13);--focus-ring: rgba(110, 133, 255, .3);--ok: #34d399;--ok-glow: rgba(52, 211, 153, .4);--error: #ef5350;--error-hover: #f77470;--error-soft: rgba(239, 83, 80, .12);--error-line: rgba(239, 83, 80, .32);--badge-blue-ink: #9db1ff;--badge-blue-bg: rgba(110, 133, 255, .13);--badge-blue-line: rgba(110, 133, 255, .28);--badge-green-ink: #71d9a4;--badge-green-bg: rgba(52, 211, 153, .12);--badge-green-line: rgba(52, 211, 153, .26);--badge-gray-ink: #aab2c4;--badge-gray-bg: rgba(255, 255, 255, .06);--badge-gray-line: rgba(255, 255, 255, .12);--topbar-bg: rgba(13, 16, 24, .8);--backdrop: rgba(4, 6, 12, .6);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .5);--shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 24px 60px -20px rgba(0, 0, 0, .65);--ambient-opacity: .16}*{box-sizing:border-box}html,body,#app{margin:0;min-height:100%}body{color:var(--ink);background:var(--bg);font-size:13px;line-height:1.45;transition:background .2s ease,color .2s ease}h1,h2,h3,p{margin:0}::selection{background:var(--accent);color:#fff}*{scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px;border:3px solid transparent;background-clip:padding-box}::-webkit-scrollbar-track{background:transparent}.ambient{position:fixed;z-index:0;width:540px;height:540px;border-radius:50%;filter:blur(120px);opacity:var(--ambient-opacity);pointer-events:none}.ambient-left{top:-200px;left:-180px;background:var(--accent)}.ambient-right{bottom:-220px;right:-180px;background:var(--accent-2)}.app-shell{min-height:100vh}.boot-screen,.login-shell,.dashboard-shell{position:relative;z-index:1}.logo-mark{width:26px;height:26px;flex-shrink:0;display:inline-grid;place-items:center;border-radius:8px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 2px 8px -2px var(--focus-ring)}.logo-mark svg{width:14px;height:14px}.logo-lg{width:42px;height:42px;border-radius:12px}.logo-lg svg{width:21px;height:21px}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--radius-sm);border:1px solid transparent;font-size:12px;font-weight:600;white-space:nowrap;transition:background .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease}.btn svg{width:13px;height:13px;flex-shrink:0}.btn:disabled{opacity:.5;cursor:not-allowed}.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover)}.btn-ghost{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}.btn-ghost:hover:not(:disabled){background:var(--hover)}.btn-danger-ghost{background:transparent;border-color:var(--error-line);color:var(--error)}.btn-danger-ghost:hover:not(:disabled){background:var(--error-soft)}.btn-sm{height:23px;padding:0 8px;font-size:11px;border-radius:6px}.btn-sm svg{width:11px;height:11px}.btn-block{width:100%;height:32px;font-size:13px}.icon-btn{width:26px;height:26px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface);color:var(--soft-ink);transition:background .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease}.icon-btn svg{width:13px;height:13px}.icon-btn:hover:not(:disabled){background:var(--hover);color:var(--ink)}.icon-btn:disabled{opacity:.45;cursor:not-allowed}.icon-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}.icon-danger{color:var(--error);border-color:var(--error-line)}.icon-danger:hover:not(:disabled){background:var(--error-soft);color:var(--error)}input,select{width:100%;font:inherit;font-size:12.5px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);padding:6px 9px;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}input:disabled,select:disabled{opacity:.55;cursor:not-allowed}input::placeholder{color:var(--faint-ink)}select{-moz-appearance:none;appearance:none;-webkit-appearance:none;padding-right:26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23818898' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center}.field{display:block;min-width:0;font-size:11px;font-weight:600}.field>span{display:block;margin-bottom:4px;color:var(--soft-ink);letter-spacing:.01em}.error-msg{color:var(--error);font-size:11.5px;font-weight:600}.switch-row{position:relative;margin-top:12px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;font-weight:600;color:var(--ink)}.switch-input{position:absolute;opacity:0;width:1px;height:1px;padding:0;border:0}.switch-track{position:relative;width:32px;height:18px;flex-shrink:0;border-radius:999px;background:var(--line-strong);transition:background .15s ease}.switch-track:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:transform .15s ease}.switch-input:checked+.switch-track{background:var(--accent)}.switch-input:checked+.switch-track:after{transform:translate(14px)}.switch-input:focus-visible+.switch-track{box-shadow:0 0 0 3px var(--focus-ring)}.pill{flex-shrink:0;font-size:9px;font-weight:700;padding:1.5px 7px;border-radius:999px;border:1px solid transparent;text-transform:uppercase;letter-spacing:.05em;line-height:1.5}.pill.tcp{color:var(--badge-blue-ink);background:var(--badge-blue-bg);border-color:var(--badge-blue-line)}.pill.udp{color:var(--badge-green-ink);background:var(--badge-green-bg);border-color:var(--badge-green-line)}.count-badge{display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:999px;background:var(--badge-gray-bg);border:1px solid var(--badge-gray-line);color:var(--badge-gray-ink);font-size:10px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}.status-orb{width:7px;height:7px;flex-shrink:0;border-radius:50%;background:var(--faint-ink)}.status-orb.up{background:var(--ok);animation:pulse-dot 2.4s ease-out infinite}.status-orb.err{background:var(--error)}.boot-screen{min-height:100vh;display:grid;place-items:center;padding:16px}.boot-card{display:grid;justify-items:center;gap:12px;text-align:center}.boot-card h1{font-size:15px;font-weight:700;letter-spacing:-.01em}.boot-status{display:inline-flex;align-items:center;gap:8px;color:var(--soft-ink);font-size:12px}.spinner{width:13px;height:13px;flex-shrink:0;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--accent);animation:spin .8s linear infinite}.login-shell{min-height:100vh;display:grid;place-items:center;padding:16px}.login-card{width:min(360px,100%);padding:24px 22px 18px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-md)}.login-card>*+*{margin-top:12px}.login-head{display:grid;justify-items:center;gap:8px;text-align:center;margin-bottom:18px}.login-head h1{font-size:17px;font-weight:700;letter-spacing:-.02em}.subtext{color:var(--soft-ink);font-size:12px;line-height:1.45}.login-foot{text-align:center;color:var(--faint-ink);font-size:10.5px;font-weight:500;padding-top:4px}.dashboard-shell{display:flex;flex-direction:column;height:100dvh}.workspace-grid{flex:1;min-height:0;display:grid;grid-template-columns:272px minmax(0,1fr)}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;background:var(--topbar-bg);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;margin-right:auto;min-width:0}.brand-text h2{font-size:13px;font-weight:700;letter-spacing:-.01em;line-height:1.2}.brand-text p{color:var(--soft-ink);font-size:10.5px;line-height:1.3}.topbar-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.v-divider{width:1px;height:18px;background:var(--line-strong);margin:0 3px;flex-shrink:0}.stat-group{display:flex;align-items:center;gap:6px}.stat-chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:11px;white-space:nowrap;box-shadow:var(--shadow-sm)}.stat-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.stat-dot.live{background:var(--ok);animation:pulse-dot 2.4s ease-out infinite}.stat-dot.ok{background:var(--ok)}.stat-dot.idle{background:var(--faint-ink)}.stat-label{color:var(--soft-ink);font-weight:600}.stat-num{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}.purge-toast{flex-basis:100%;padding:5px 10px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface);color:var(--soft-ink);font-size:11px;animation:fade-in .18s ease}.panel{min-height:0;display:flex;flex-direction:column}.devices-panel{background:var(--panel);border-right:1px solid var(--line)}.logs-panel{background:var(--surface)}.panel-header{flex-shrink:0;padding:7px 12px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:38px}.panel-title{display:flex;align-items:center;gap:7px;min-width:0}.panel-title h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--soft-ink);white-space:nowrap}.panel-title-block{min-width:0}.stream-subtext{margin-top:2px;color:var(--soft-ink);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-actions{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex-shrink:0}.panel-empty{color:var(--faint-ink);font-size:12px;text-align:center;min-height:90px;display:grid;place-items:center;padding:16px 12px}.port-filter{width:108px;flex-shrink:0;padding:4px 26px 4px 8px;font-size:11px;border-radius:6px}.device-list{flex:1;min-height:0;overflow-y:auto}.device-item{width:100%;display:block;text-align:left;border-bottom:1px solid var(--line);padding:8px 12px;color:var(--ink);transition:background .1s ease}.device-item:hover{background:var(--hover)}.device-item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--focus-ring)}.device-item.active{background:var(--accent-soft);box-shadow:inset 2px 0 0 0 var(--accent)}.device-title-row{display:flex;align-items:center;gap:6px}.device-title-row strong{flex:1;min-width:0;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-address-row{margin-top:3px;display:flex;align-items:center;justify-content:space-between;gap:8px}.device-address{min-width:0;color:var(--soft-ink);font-size:11px;font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-last{flex-shrink:0;color:var(--faint-ink);font-size:10px;font-family:var(--mono);white-space:nowrap}.device-meta{margin-top:3px;display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--faint-ink);font-size:10.5px}.conn-state{flex-shrink:0;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}.conn-state.up{color:var(--ok)}.conn-state.down{color:var(--faint-ink)}.logs-stream{flex:1;min-height:0;overflow:auto}.log-row{border-bottom:1px solid var(--line-faint);padding:5px 12px;transition:background .1s ease;overflow-x:auto;overflow-y:hidden}.log-row:hover{background:var(--hover)}.log-line{display:flex;align-items:center;white-space:nowrap;min-width:100%;width:max-content}.log-line>*+*{margin-left:7px}.time{flex-shrink:0;display:inline-block;width:72px;color:var(--faint-ink);font-size:11px;font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}.direction{flex-shrink:0;display:inline-flex;justify-content:center;min-width:112px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;border:1px solid transparent;border-radius:5px;padding:1px 6px}.direction.to-target{color:var(--badge-blue-ink);background:var(--badge-blue-bg);border-color:var(--badge-blue-line)}.direction.to-client{color:var(--badge-green-ink);background:var(--badge-green-bg);border-color:var(--badge-green-line)}.direction.system{color:var(--badge-gray-ink);background:var(--badge-gray-bg);border-color:var(--badge-gray-line)}.note{color:var(--ink);font-size:11px;white-space:nowrap}.mono{color:var(--ink);font-family:var(--mono);font-size:11px;font-weight:500;padding-left:7px;border-left:2px solid var(--badge-blue-line);white-space:nowrap;-webkit-user-select:text;user-select:text}.mono.toggleable{cursor:pointer}.mono.toggleable:hover{text-decoration:underline;text-underline-offset:2px}.mono-ascii{border-left-color:var(--badge-green-line)}.mono-hex{border-left-color:var(--badge-blue-line)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:16px;background:var(--backdrop);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:fade-in .15s ease}.modal-backdrop-front{z-index:60}.modal-card{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel);box-shadow:var(--shadow-lg);overflow:hidden;animation:modal-in .18s ease}.proxy-modal{width:min(820px,100%);max-height:min(760px,calc(100vh - 32px));display:grid;grid-template-rows:auto minmax(0,1fr)}.proxy-form-modal{width:min(620px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column}.modal-header{flex-shrink:0;padding:9px 12px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--surface)}.modal-header h3{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--soft-ink);white-space:nowrap}.modal-actions{display:inline-flex;align-items:center;gap:6px}.proxy-manager-body{min-height:0;display:flex;flex-direction:column}.proxy-message{margin-top:8px;color:var(--soft-ink);font-size:11px;font-weight:600}.proxy-manager-message{flex-shrink:0;margin:0;padding:7px 12px;border-bottom:1px solid var(--line);background:var(--surface)}.proxy-list{flex:1;min-height:0;overflow:auto}.proxy-rule-item{min-width:720px;min-height:38px;padding:7px 12px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(130px,1.05fr) minmax(250px,1.8fr) minmax(80px,auto) max-content;gap:10px;align-items:center;transition:background .1s ease}.proxy-rule-item:hover{background:var(--hover)}.proxy-rule-title{min-width:0;display:flex;align-items:center;gap:7px}.proxy-rule-title strong{min-width:0;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.proxy-route{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:7px;align-items:center;color:var(--soft-ink);font-family:var(--mono);font-size:11px}.proxy-route span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.route-arrow{width:12px;height:12px;flex-shrink:0;color:var(--faint-ink)}.proxy-rule-meta{min-width:0;display:flex;align-items:center;gap:6px}.runtime-status{flex-shrink:0;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:1.5px 7px;border-radius:999px;border:1px solid var(--badge-gray-line);color:var(--badge-gray-ink);background:var(--badge-gray-bg)}.runtime-status.running{color:var(--badge-green-ink);background:var(--badge-green-bg);border-color:var(--badge-green-line)}.runtime-status.error{color:var(--error);background:var(--error-soft);border-color:var(--error-line)}.runtime-error{min-width:0;max-width:160px;color:var(--error);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.proxy-rule-actions{display:flex;gap:5px;justify-content:flex-end}.proxy-form{padding:12px 14px;overflow:auto}.proxy-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.proxy-form-actions{margin-top:14px;display:flex;gap:7px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse-dot{0%{box-shadow:0 0 0 0 var(--ok-glow)}70%{box-shadow:0 0 0 5px transparent}to{box-shadow:0 0 0 0 transparent}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (max-width: 980px){.dashboard-shell{height:auto;min-height:100dvh}.workspace-grid{grid-template-columns:1fr}.devices-panel{border-right:0;border-bottom:1px solid var(--line)}.device-list{max-height:240px}.logs-stream{min-height:50vh}}@media (max-width: 760px){.modal-backdrop{padding:10px}.proxy-modal,.proxy-form-modal{max-height:calc(100vh - 20px)}}@media (max-width: 640px){.brand-text p{display:none}.topbar-actions{width:100%}.proxy-form-grid{grid-template-columns:1fr}}