:root{--text:#3f3d45;--text-h:#08060d;--bg:#f6f5f8;--bg-elevated:#fff;--border:#e2e0e6;--accent:#7c3aed;--accent-hover:#6d28d9;--danger:#dc2626;--success:#16a34a;--muted:#78757f;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;--text:#d6d4db;--text-h:#f3f4f6;--bg:#121218;--bg-elevated:#1b1b23;--border:#2e2d38;--accent:#a78bfa;--accent-hover:#c4b5fd;--danger:#f87171;--success:#4ade80;--muted:#9490a0}}*{box-sizing:border-box;min-width:0}html,body{width:100%;max-width:100%;overflow-x:hidden}body{margin:0}#root{max-width:100%;overflow-x:hidden}img,svg{max-width:100%}h1,h2,h3{color:var(--text-h);margin:0;font-weight:600}a{color:var(--accent)}button,input,select,textarea{font:inherit;color:inherit}.page{max-width:1100px;margin:0 auto;padding:24px}.topbar{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.topbar-right{align-items:center;gap:12px;display:flex}.back-link{color:var(--muted);font-size:14px;text-decoration:none}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;display:flex}.card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:20px}.centered-page{justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-card{flex-direction:column;gap:14px;width:360px;max-width:100%;display:flex}.public-page-stack{flex-direction:column;gap:16px;width:420px;max-width:100%;display:flex}.public-page-stack .card{text-align:center}.public-page-stack .card h2{margin-top:0}.notify-optin{flex-direction:column;gap:10px;display:flex}.notify-optin hr{border:none;border-top:1px solid var(--border);width:100%;margin:2px 0}.notify-phone-label{text-align:left}.subtitle{color:var(--muted);margin-top:-8px;font-size:13px}label{color:var(--muted);flex-direction:column;gap:6px;font-size:13px;display:flex}input,select,textarea{background:var(--bg);border:1px solid var(--border);color:var(--text-h);border-radius:8px;width:100%;max-width:100%;padding:9px 10px;font-size:14px}textarea{font-family:var(--mono);resize:vertical;font-size:12px}input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}.btn{border:1px solid var(--border);background:var(--bg-elevated);cursor:pointer;color:var(--text-h);border-radius:8px;justify-content:center;align-items:center;padding:9px 16px;font-size:14px;font-weight:500;text-decoration:none;display:inline-flex}.btn:hover{border-color:var(--accent)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}.btn-ghost{background:0 0;border-color:#0000}.btn-small{padding:5px 10px;font-size:12px}.btn-danger{color:var(--danger)}.error-text{color:var(--danger);font-size:13px}.warning-text{color:#d97706;font-size:13px}.error-text.small,.muted.small,.warning-text.small{font-size:12px}.muted{color:var(--muted)}.field-label{color:var(--muted);margin-top:4px;font-size:13px}.checkbox-label{color:var(--text-h);flex-direction:row;align-items:center;gap:8px;font-size:14px}.checkbox-label input{width:auto}.segmented{border:1px solid var(--border);border-radius:8px;display:flex;overflow:hidden}.segmented.wrap{border:none;flex-wrap:wrap;gap:6px}.segmented button{background:var(--bg);cursor:pointer;color:var(--text);border:none;flex:1;padding:9px 10px;font-size:13px}.segmented.wrap button{border:1px solid var(--border);border-radius:8px;flex:none}.segmented button.active{background:var(--accent);color:#fff}.form-grid{flex-direction:column;gap:14px;display:flex}.payment-alert-box{background:#d9770614;border:1px solid #d97706;border-radius:12px;margin-bottom:20px;padding:16px}.payment-alert-label{color:#d97706;margin-top:0;font-weight:600}.payment-alert-box .client-grid{margin-bottom:0}.row{flex-wrap:wrap;gap:12px;display:flex}.row .grow{flex:160px;min-width:0}.row .w-100{flex:0 0 100px;width:100px}.clients-add-row{align-items:center}.empty-state{color:var(--muted);text-align:center;padding:40px 0}.server-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;display:grid}.server-card{flex-direction:column;gap:10px;display:flex}.server-card-top{justify-content:space-between;align-items:center;gap:8px;display:flex}.server-card-name{cursor:text;margin:0}.server-card-name:hover{color:var(--accent)}.server-card-name-input{width:100%;font-size:16px;font-weight:600}.server-card-meta{color:var(--muted);flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;display:flex}.server-card-specs{color:var(--muted);flex-wrap:wrap;gap:10px;font-size:12px;display:flex}.dot{opacity:.5}.server-card-actions{justify-content:space-between;align-items:center;display:flex}.badge{border-radius:999px;align-items:center;padding:3px 9px;font-size:11px;font-weight:600;display:inline-flex}.badge-online{color:var(--success);background:#16a34a26}.badge-offline{color:var(--danger);background:#dc262626}.badge-unknown{color:var(--muted);background:#78757f26}.badge-button{cursor:pointer;border:none;border-radius:999px;align-items:center;padding:3px 9px;font-family:inherit;font-size:11px;font-weight:600;display:inline-flex}.badge-button:hover{filter:brightness(1.15)}.badge-button.badge-online{color:var(--success);background:#16a34a26}.badge-button.badge-offline{color:var(--danger);background:#dc262626}.badge-button.badge-unknown{color:var(--muted);background:#78757f26}.status-cell{flex-wrap:wrap;align-items:flex-start;gap:4px;display:flex}.link-button{font:inherit;color:inherit;cursor:pointer;text-underline-offset:3px;background:0 0;border:none;padding:0;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.link-button:hover{color:var(--accent)}.stats-card{flex-direction:column;gap:14px;margin-bottom:20px;display:flex}.stats-header{color:var(--text-h);flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px;font-size:14px;display:flex}.stat-meter{flex-direction:column;gap:4px;display:flex}.stat-meter-label{justify-content:space-between;font-size:13px;display:flex}.stat-meter-track{background:var(--bg);border:1px solid var(--border);border-radius:999px;height:8px;overflow:hidden}.stat-meter-fill{background:var(--accent);border-radius:999px;height:100%;transition:width .3s}.stat-meter-fill.stat-meter-warn{background:#f59e0b}.stat-meter-fill.stat-meter-danger{background:var(--danger)}.sync-info{color:var(--muted);gap:20px;margin-bottom:16px;font-size:13px;display:flex}.table-scroll{-webkit-overflow-scrolling:touch;margin-bottom:12px;overflow-x:auto}.clients-table{border-collapse:collapse;width:100%;font-size:13px}.clients-table th{text-align:left;color:var(--muted);border-bottom:1px solid var(--border);padding:10px 12px;font-weight:500}.sortable-th{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.sortable-th:hover{color:var(--text-h)}.clients-table td{border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap;padding:10px 12px}.row-busy{opacity:.5}.row-actions{flex-wrap:wrap;gap:6px;display:flex}.modal-overlay{z-index:100;box-sizing:border-box;background:#00000080;padding:20px;position:fixed;top:0;bottom:0;left:0;right:0;overflow:hidden}.modal{background:var(--bg-elevated);border:1px solid var(--border);width:100%;max-width:480px;max-height:calc(100vh - 40px);-webkit-overflow-scrolling:touch;box-sizing:border-box;border-radius:12px;max-height:calc(100dvh - 40px);margin:0 auto;overflow-x:hidden;overflow-y:auto}.modal-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.icon-btn{cursor:pointer;color:var(--muted);background:0 0;border:none;font-size:22px;line-height:1}.modal-body{padding:20px}.config-modal{flex-direction:column;align-items:center;gap:14px;display:flex}.qr-image{aspect-ratio:1;border:1px solid var(--border);border-radius:8px;width:220px;max-width:100%;height:auto}.hint{color:var(--muted);text-align:center;font-size:12px}.app-shell .page{padding-bottom:76px}.bottom-nav{background:var(--bg-elevated);border-top:1px solid var(--border);z-index:50;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav-item{color:var(--muted);flex-direction:column;flex:1;align-items:center;gap:2px;padding:8px 4px 10px;font-size:11px;text-decoration:none;display:flex}.bottom-nav-icon{font-size:18px;line-height:1}.bottom-nav-item.active{color:var(--accent)}.filter-bar{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;display:flex}.filter-bar select{flex:140px;width:auto}.filter-search{flex:2 200px;width:auto}.client-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;display:grid}.client-card{flex-direction:column;gap:6px;display:flex}.client-card-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.payment-alert-actions{align-items:center;gap:6px;display:flex}.payment-alert-amount{color:#d97706;white-space:nowrap;font-size:13px;font-weight:600}.client-card-name{font-size:15px;font-weight:600;text-decoration:none}.client-card-actions{gap:6px;margin-top:6px;display:flex}.group-server-picker{max-width:320px;margin-bottom:16px}.group-create-form{margin-bottom:20px}.group-list{flex-direction:column;gap:8px;display:flex}.group-row{justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;display:flex}.group-row-name{cursor:text;font-weight:500}.group-row-name:hover{color:var(--accent)}@media (max-width:640px){.page{padding:14px}.topbar{flex-wrap:wrap;gap:10px;margin-bottom:18px}.topbar h1{font-size:18px}.topbar-right{flex-wrap:wrap;gap:8px;width:100%}.page-header{margin-bottom:16px}.page-header .btn{width:100%}.sync-info{flex-wrap:wrap;gap:6px 20px;margin-bottom:12px}.modal-overlay{padding:10px}.modal{max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}.modal-body{padding:16px}.qr-image{width:180px;height:180px}.server-grid,.client-grid{grid-template-columns:1fr}.group-server-picker{max-width:100%}}