.theme-toggle-btn{background:transparent;border:none;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center;color:inherit;border-radius:50%;transition:background-color .2s ease,color .2s ease}.theme-toggle-btn:hover{background-color:#80808033}.language-selector{display:flex;align-items:center}.language-select{background-color:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3);padding:.4rem .8rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.language-select:hover{background-color:#fff3}.language-select option{background-color:#2c3e50;color:#fff}:root{--bg-main: #f5f5f5;--bg-card: #ffffff;--bg-alt: #f8f9fa;--bg-hover: #e9ecef;--text-main: #2c3e50;--text-muted: #7f8c8d;--text-normal: #34495e;--border-main: #e0e0e0;--border-input: #ddd;--input-bg: #ffffff;--navbar-bg: #2c3e50;--navbar-tabs-bg: #34495e;--log-bg: #1e1e1e;--shadow: 0 2px 4px rgba(0, 0, 0, .1);--modal-overlay: rgba(0, 0, 0, .5)}html.dark{--bg-main: #121212;--bg-card: #1e1e1e;--bg-alt: #2a2a2a;--bg-hover: #333333;--text-main: #e0e0e0;--text-muted: #a0a0a0;--text-normal: #cccccc;--border-main: #333333;--border-input: #444444;--input-bg: #2a2a2a;--navbar-bg: #111111;--navbar-tabs-bg: #1a1a1a;--log-bg: #0a0a0a;--shadow: 0 4px 6px rgba(0, 0, 0, .5);--modal-overlay: rgba(0, 0, 0, .7)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-main);color:var(--text-normal);transition:background-color .3s ease,color .3s ease}.layout{min-height:100vh;display:flex;flex-direction:column}.navbar{background-color:var(--navbar-bg);color:#fff;box-shadow:var(--shadow);transition:background-color .3s ease}.nav-header{display:flex;justify-content:center;align-items:center;padding:1.5rem 2rem;min-height:120px;position:relative}.nav-brand-center{display:flex;align-items:center;gap:1rem;position:absolute;left:50%;transform:translate(-50%)}.nav-brand-center h1{font-size:2rem;font-weight:600;margin:0;white-space:nowrap}.nav-logo{height:96px;width:96px;object-fit:contain}.nav-top-actions{display:flex;align-items:center;gap:1rem;position:absolute;top:.5rem;right:2rem}.nav-tabs{display:flex;gap:0;background-color:var(--navbar-tabs-bg);border-top:1px solid rgba(255,255,255,.1);padding:0;justify-content:center;transition:background-color .3s ease}.nav-tabs a{color:#fffc;text-decoration:none;padding:.75rem 1.5rem;border-bottom:3px solid transparent;transition:all .2s;position:relative}.nav-tabs a:hover{color:#fff;background-color:#ffffff0d}.nav-tabs a.tab-active{color:#fff;background-color:#ffffff1a;border-bottom-color:#3498db}@media (max-width: 768px){.nav-header{flex-direction:column;padding:1rem;gap:1rem}.nav-brand-center{position:static;transform:none;justify-content:center}.nav-brand-center h1{font-size:1.5rem}.nav-top-actions{margin-left:0;justify-content:center}.nav-tabs{flex-wrap:wrap;justify-content:center}.nav-tabs a{padding:.5rem 1rem;font-size:.9rem}}.btn-logout{background-color:#e74c3c;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s}.btn-logout:hover{background-color:#c0392b}.server-toggle{position:relative;display:inline-block;width:50px;height:24px;cursor:pointer}.server-toggle input{opacity:0;width:0;height:0}.server-toggle .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--border-input);transition:.3s;border-radius:24px}.server-toggle .slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}.server-toggle input:checked+.slider{background-color:#27ae60}.server-toggle input:checked+.slider:before{transform:translate(26px)}.server-toggle input:focus+.slider{box-shadow:0 0 1px #27ae60}.main-content{flex:1;padding:2rem;max-width:1400px;width:100%;margin:0 auto;box-sizing:border-box}@media (max-width: 768px){.main-content{padding:1rem}}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);position:relative}.login-language-selector{position:absolute;top:1rem;right:1rem}.login-card{background:var(--bg-card);padding:2rem;border-radius:8px;box-shadow:var(--shadow);width:100%;max-width:400px;transition:background-color .3s ease}.login-brand{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:.5rem}.login-logo{height:96px;width:96px;object-fit:contain}.login-card h1{text-align:center;color:var(--text-main);margin:0}.login-card h2{text-align:center;color:var(--text-muted);font-size:1.2rem;margin-bottom:2rem;font-weight:400}.form-group input{width:100%;padding:.75rem;border:1px solid var(--border-input);border-radius:4px;font-size:1rem;background-color:var(--input-bg);color:var(--text-normal);transition:border-color .2s,background-color .3s ease,color .3s ease}.form-group input:focus{outline:none;border-color:#3498db}.error-message{background-color:#e74c3c1a;color:#e74c3c;padding:.75rem;border-radius:4px;margin-bottom:1rem;border:1px solid rgba(231,76,60,.3)}.btn-primary{width:100%;padding:.75rem;background-color:#3498db;color:#fff;border:none;border-radius:4px;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s}.dashboard h1{margin-bottom:2rem;color:var(--text-main)}.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}@media (max-width: 768px){.status-grid{grid-template-columns:1fr}}.status-card{background:var(--bg-card);padding:1.5rem;border-radius:8px;box-shadow:var(--shadow);transition:background-color .3s ease}.status-card h2{font-size:1.2rem;margin-bottom:1rem;color:var(--text-main);border-bottom:2px solid #3498db;padding-bottom:.5rem}.status-item{display:flex;justify-content:space-between;padding:.75rem 0;border-bottom:1px solid var(--border-main)}.status-item:last-child{border-bottom:none}.status-item .label{font-weight:500;color:var(--text-muted)}.status-item .value{color:var(--text-main);font-family:Courier New,monospace;word-break:break-all}.status-item .value.running{color:#27ae60;font-weight:600}.status-item .value.stopped{color:#e74c3c;font-weight:600}.status-item .value.code{font-size:.85rem}.logs-section{background:var(--bg-card);padding:1.5rem;border-radius:8px;box-shadow:var(--shadow);transition:background-color .3s ease}.logs-section h2{font-size:1.2rem;margin-bottom:1rem;color:var(--text-main);border-bottom:2px solid #3498db;padding-bottom:.5rem}.logs-container{background:var(--log-bg);color:#d4d4d4;padding:1rem;border-radius:4px;max-height:400px;overflow-y:auto;font-family:Courier New,monospace;font-size:.9rem}.log-line{padding:.25rem 0;border-bottom:1px solid #333}.log-line:last-child{border-bottom:none}.no-logs{text-align:center;color:var(--text-muted);padding:2rem}.clients-page{width:100%}.page-header{margin-bottom:2rem}.page-header h1{color:var(--text-main);font-size:2rem;transition:color .3s ease}.clients-table-container{background:var(--bg-card);border-radius:8px;box-shadow:var(--shadow);overflow-x:auto;transition:background-color .3s ease,box-shadow .3s ease}.clients-table{width:100%;border-collapse:collapse}.clients-table th,.clients-table td{padding:1rem;text-align:left;border-bottom:1px solid var(--border-main);color:var(--text-normal);transition:border-color .3s ease,color .3s ease}.clients-table th{background-color:var(--bg-alt);font-weight:600;color:var(--text-main);transition:background-color .3s ease,color .3s ease}.clients-table th:last-child,.clients-table td:last-child{text-align:right}.clients-table th:nth-child(5),.clients-table td:nth-child(5),.clients-table th:nth-child(6),.clients-table td:nth-child(6){text-align:right}.clients-table tr:hover{background-color:var(--bg-hover)}.clients-table tr:last-child td{border-bottom:none}.mono{font-family:Courier New,monospace}.small{font-size:.85rem}.btn-small{padding:.25rem .5rem;font-size:.85rem;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;min-width:auto;width:auto}.btn-small-add{padding:.5rem 1rem;font-size:.9rem}.btn-danger.btn-small{min-width:auto;width:auto}.btn-secondary.btn-qr{padding:.5rem 1rem;font-size:.9rem}.btn-secondary:hover{background-color:#7f8c8d}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--modal-overlay);display:flex;align-items:center;justify-content:center;z-index:1000;transition:background-color .3s ease}.modal-content{background:var(--bg-card);color:var(--text-normal);padding:2rem;border-radius:8px;box-shadow:0 4px 6px #0000004d;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;transition:background-color .3s ease,color .3s ease}.modal-content h2{color:var(--text-main)}.no-clients{text-align:center;padding:3rem;color:var(--text-muted);font-size:1.1rem}.add-client-footer{margin-top:1.5rem;text-align:right}.add-client-footer .btn-small-add{width:auto!important;min-width:auto}.alert-message{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}.alert-message .message-text{flex:1 1 auto;white-space:pre-wrap;word-break:break-word}.message-close{background:transparent;border:none;color:inherit;cursor:pointer;font-size:1.2rem;line-height:1;padding:.1rem .25rem}.message-close:hover,.message-close:focus{opacity:.7}.loading{text-align:center;padding:2rem;color:var(--text-muted)}.client-disabled{opacity:.6}.enabled-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer}.enabled-toggle input[type=checkbox]{margin:0;cursor:pointer}.enabled-toggle .enabled{color:#27ae60;font-weight:500}.enabled-toggle .disabled{color:#e74c3c;font-weight:500}.client-details-modal{max-width:800px;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid var(--border-main)}.modal-header h2{margin:0;color:var(--text-main)}.client-details{margin-bottom:2rem}.details-table{width:100%;border-collapse:collapse}.details-table tr{border-bottom:1px solid var(--border-main)}.details-table tr:last-child{border-bottom:none}.details-table td{padding:.75rem 0;vertical-align:top}.details-table td.detail-value{display:flex;align-items:center;gap:.5rem}.detail-label{font-weight:600;color:var(--text-main);width:220px;padding-right:1rem;white-space:nowrap}.detail-value{color:var(--text-normal);word-break:break-all}.config-group{margin-bottom:2rem;padding:1rem 1rem .25rem;border:1px solid var(--border-main);border-radius:8px}.config-group h2{margin:0 0 1rem;color:var(--text-main);font-size:1.25rem}.config-section{margin-bottom:2rem}.config-section h3{margin-bottom:.5rem;color:var(--text-main);font-size:1.1rem}.config-field-container{display:flex;flex-direction:column;gap:.5rem}.config-actions{display:flex;gap:.5rem;justify-content:flex-end;align-items:center}.config-actions .success-message,.config-actions .error-message{padding:.4rem 1rem;margin-bottom:0;font-size:.9rem;line-height:1.4;display:flex;align-items:center;height:auto;min-height:auto}.config-textarea{width:100%;padding:.75rem;border:1px solid var(--border-input);border-radius:4px;font-family:monospace;font-size:.85rem;resize:vertical;background-color:var(--input-bg);color:var(--text-normal);box-sizing:border-box;transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease,color .3s ease}.config-textarea:disabled{background-color:var(--bg-hover);color:var(--text-muted);cursor:not-allowed}.config-textarea:focus{outline:none;border-color:#3498db;background-color:var(--bg-card)}.btn-copy,.btn-qr{padding:.5rem 1rem;font-size:.9rem;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;white-space:nowrap;width:auto;min-width:auto;height:auto;box-sizing:border-box}.btn-copy{background-color:#3498db;color:#fff}.btn-copy:hover:not(:disabled){background-color:#2980b9}.btn-copy:disabled{background-color:var(--bg-hover);color:var(--text-muted);cursor:not-allowed;opacity:.6}.btn-qr{background-color:#95a5a6;color:#fff}.btn-qr:hover:not(:disabled){background-color:#7f8c8d}.btn-qr:disabled{background-color:var(--bg-hover);color:var(--text-muted);cursor:not-allowed;opacity:.6}.qr-modal{max-width:90vw;max-height:90vh;text-align:center;overflow:hidden;padding:1rem .5rem;width:auto;background-color:var(--bg-card)}.qr-modal h2{margin-top:0;margin-bottom:1rem;color:var(--text-main)}.qr-container{display:flex;justify-content:center;align-items:center;padding:1rem;background-color:#fff;border-radius:8px;margin:0;width:auto;min-width:0;box-sizing:border-box}.qr-container svg{max-width:100%;height:auto;display:block}.connection-status{display:flex;flex-direction:column;gap:.25rem}.connection-status .connected{color:#27ae60;font-weight:500}.connection-status .disconnected{color:#e74c3c;font-weight:500}.handshake-time{font-size:.85rem;color:var(--text-muted)}.detail-value.connected{color:#27ae60;font-weight:500}.detail-value.disconnected{color:#e74c3c;font-weight:500}.modal-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:1.5rem}.btn-warning{background-color:#f39c12;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:500;transition:background-color .2s}.btn-primary{background-color:#3498db;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:500;transition:background-color .2s}.btn-primary.btn-copy{padding:.5rem 1rem;font-size:.9rem;font-weight:400}.btn-primary:hover{background-color:#2980b9}.client-settings-section{margin-bottom:2rem;background-color:var(--bg-alt);border-radius:8px;border:1px solid var(--border-main);overflow:hidden;transition:background-color .3s ease,border-color .3s ease}.settings-header-toggle{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;background-color:var(--bg-hover);transition:background-color .2s}.settings-header-toggle:hover{background-color:var(--border-main)}.settings-header-toggle h3{margin:0;font-size:1.1rem;color:var(--text-main);font-weight:600}.toggle-icon{font-size:.9rem;color:var(--text-muted);transition:transform .2s}.settings-content{padding:1.5rem}.settings-warning{background-color:#ffc1071a;color:#d39e00;padding:.75rem 1rem;border-radius:4px;margin-bottom:1.5rem;border:1px solid rgba(255,193,7,.3);font-size:.9rem;line-height:1.4}.client-settings-section .form-group{margin-bottom:1.5rem}.client-settings-section .form-group label{display:block;margin-bottom:.5rem;color:var(--text-main);font-weight:500}.client-settings-section .form-group label.checkbox-label{display:flex;align-items:center;cursor:pointer}.client-settings-section .form-group input[type=checkbox]{margin-right:.5rem;width:auto;cursor:pointer;flex-shrink:0}.client-settings-section .form-group input[type=text],.client-settings-section .form-group input[type=number],.client-settings-section .form-group select{width:100%;padding:.75rem;border:1px solid var(--border-input);background-color:var(--input-bg);color:var(--text-normal);border-radius:4px;font-size:1rem;transition:border-color .2s,background-color .3s ease,color .3s ease;box-sizing:border-box}.client-settings-section .input-with-button{display:flex;gap:.5rem;align-items:stretch}.client-settings-section .input-with-button input{flex:1;width:auto}.client-settings-section .form-group input.mono{font-family:Courier New,monospace}.client-settings-section .btn-generate-key{white-space:nowrap;flex-shrink:0}.client-settings-section .form-group input[type=text]:focus,.client-settings-section .form-group input[type=number]:focus,.client-settings-section .form-group select:focus{outline:none;border-color:#3498db}.client-settings-section .form-group input[type=text].invalid,.client-settings-section .form-group input[type=number].invalid{border-color:#e74c3c}.client-settings-section .form-group select:disabled{background-color:var(--bg-hover);cursor:not-allowed;opacity:.7}.allowed-ip-row{display:flex;gap:.5rem;margin-bottom:.5rem;align-items:center}.allowed-ip-row input{flex:1}.btn-remove{background-color:#e74c3c;color:#fff;border:none;width:32px;height:38px;border-radius:4px;cursor:pointer;font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;transition:background-color .2s;flex-shrink:0}.btn-remove:hover{background-color:#c0392b}.btn-add-ip{background-color:#27ae60;color:#fff;border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;font-size:.9rem;transition:background-color .2s;margin-top:.5rem}.btn-add-ip:hover{background-color:#229954}.client-settings-section .field-description{display:block;margin-top:.5rem;color:var(--text-muted);font-size:.85rem;line-height:1.4;font-style:italic}.client-settings-section .form-actions{display:flex;gap:1rem;margin-top:1.5rem;justify-content:flex-end}.actions-cell{display:flex;align-items:center;gap:.5rem;justify-content:flex-end}.toggle-switch{position:relative;display:inline-block;width:50px;height:24px;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.toggle-switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--border-input);transition:.3s;border-radius:24px}.toggle-switch .slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}.toggle-switch input:checked+.slider{background-color:#27ae60}.toggle-switch input:checked+.slider:before{transform:translate(26px)}.toggle-switch input:focus+.slider{box-shadow:0 0 1px #27ae60}.config-page h1{margin-bottom:2rem;color:var(--text-main)}.config-section{background:var(--bg-card);padding:2rem;border-radius:8px;box-shadow:var(--shadow);margin-bottom:2rem;transition:background-color .3s ease}.config-section h2{font-size:1.3rem;margin-bottom:1.5rem;color:var(--text-main);border-bottom:2px solid #3498db;padding-bottom:.5rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-main);font-weight:500}.form-group input[type=text],.form-group input[type=number],.form-group input[type=password],.form-group select{width:100%;padding:.75rem;border:1px solid var(--border-input);background-color:var(--input-bg);color:var(--text-normal);border-radius:4px;font-size:1rem;transition:border-color .2s,background-color .3s ease,box-shadow .3s ease,color .3s ease;box-sizing:border-box}.form-group input[type=text]:focus,.form-group input[type=password]:focus,.form-group select:focus{outline:none;border-color:#3498db}.form-group label{display:flex;align-items:center;cursor:pointer}.form-group input[type=checkbox]{margin-right:.5rem;width:auto;cursor:pointer;flex-shrink:0}.form-group small{display:block;margin-top:.25rem;color:var(--text-muted);font-size:.85rem}.field-description{display:block;margin-top:.5rem;color:var(--text-muted);font-size:.9rem;line-height:1.4;font-style:italic}.input-with-button{display:flex;gap:.5rem;align-items:stretch}.input-with-button input{flex:1}.form-group input.mono,.input-with-button input.mono{font-family:Courier New,monospace}.btn-generate-key{white-space:nowrap;flex-shrink:0}.info-group{margin-bottom:1.5rem}.info-group label{display:block;margin-bottom:.5rem;color:var(--text-main);font-weight:500}.info-group .value{background-color:var(--bg-alt);padding:.75rem;border-radius:4px;border:1px solid var(--border-input);color:var(--text-normal);font-family:Courier New,monospace;word-break:break-all;word-wrap:break-word;font-size:.9rem;max-width:100%;overflow-wrap:break-word;transition:background-color .3s ease,border-color .3s ease}.info-group .value.code{font-family:Courier New,monospace}.form-actions{display:flex;gap:1rem;margin-top:2rem}.form-actions-space-between{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}.btn-primary,.btn-warning,.btn-secondary,.btn-danger{padding:.75rem 1.5rem;border:none;border-radius:4px;cursor:pointer;font-size:1rem;font-weight:500;transition:background-color .2s;min-width:120px}.btn-secondary{background-color:#95a5a6;color:#fff}.btn-secondary:hover:not(:disabled){background-color:#7f8c8d}.btn-primary{background-color:#3498db;color:#fff}.btn-primary:hover:not(:disabled){background-color:#2980b9}.btn-primary:disabled{background-color:#95a5a6;cursor:not-allowed}.btn-warning{background-color:#f39c12;color:#fff}.btn-warning:hover{background-color:#e67e22}.btn-danger{background-color:#e74c3c;color:#fff}.btn-danger:hover{background-color:#c0392b}.error-message{background-color:#e74c3c1a;color:#e74c3c;padding:1rem;border-radius:4px;margin-bottom:1rem;border:1px solid rgba(231,76,60,.3)}.success-message{background-color:#2ecc711a;color:#27ae60;padding:1rem;border-radius:4px;margin-bottom:1rem;border:1px solid rgba(46,204,113,.3)}.loading,.error{text-align:center;padding:2rem;font-size:1.1rem}.error{color:#e74c3c}.metrics-instructions{margin-top:1.5rem;padding:1.5rem;background-color:var(--bg-alt);border-radius:6px;border-left:4px solid #3498db}.metrics-instructions h3{margin-top:0;margin-bottom:1rem;color:var(--text-main);font-size:1.1rem}.instructions-content{background:var(--bg-card);padding:1rem;border-radius:4px;border:1px solid var(--border-main)}.copy-highlight-target{transition:background-color .3s ease,box-shadow .3s ease}.copy-flash{background-color:#2ecc7133!important;box-shadow:0 0 0 2px #27ae6066}.instructions-content pre{margin:0;color:var(--text-muted);white-space:pre-wrap;word-wrap:break-word}.url-copy-container{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.25rem}.url-label{font-weight:500;color:var(--text-main);min-width:fit-content}.url-code{flex:1;background-color:var(--input-bg);padding:.4rem .6rem;border-radius:4px;font-family:Courier New,monospace;font-size:.85rem;color:var(--text-normal);border:1px solid var(--border-input);word-break:break-all;min-width:0}.btn-copy-url{padding:.4rem .8rem;font-size:.85rem;background-color:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s;white-space:nowrap;flex-shrink:0}.btn-copy-url:hover{background-color:#2980b9}.instructions-content ol,.instructions-content ul{color:var(--text-normal)}.instructions-content li{margin-bottom:.5rem}