*,*:before,*:after{box-sizing:border-box}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;--bg-color: #000f1d;--text-primary: #ffffff;--text-secondary: #a3b3c1;--surface: #011b2e;--surface-hover: #012641;--border-color: #0e2a47;--accent-color: #00d1ff;--accent-hover: #33dbff;color:var(--text-primary);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--accent-color);text-decoration:inherit;transition:color .2s}a:hover{color:var(--accent-hover)}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background-color:var(--bg-color)}h1,h2,h3,h4,h5,h6{color:var(--text-primary);margin-top:0}h1{font-size:3.5rem;line-height:1.1;font-weight:700;letter-spacing:-.02em}button{border-radius:6px;border:1px solid var(--border-color);padding:.6em 1.2em;font-size:.95rem;font-weight:600;font-family:inherit;background-color:var(--text-primary);color:var(--bg-color);cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}button:hover{background-color:#f3f4f6;border-color:var(--accent-color)}button:focus,button:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.card-base{background-color:var(--surface);border:1px solid var(--border-color);border-radius:12px;transition:all .3s ease}.card-base:hover{border-color:var(--accent-color);background-color:var(--surface-hover)}:root.light{color-scheme:light;color:#171717;background-color:#fff}.light body{background-color:#fff}.light a{color:#7c3aed}.light a:hover{color:#6d28d9}.light button{background-color:#000;color:#fff}.light button:hover{background-color:#1a1a1a}.dashboard-container{width:100%;max-width:1200px;margin:0 auto;padding:2rem;text-align:left;box-sizing:border-box}.dashboard-header{margin-bottom:3rem;display:flex;justify-content:space-between;align-items:center}.dashboard-header h1{font-size:2.5rem;font-weight:800;letter-spacing:-.04em;margin:0}@media(max-width:1024px){.dashboard-main{flex-direction:column}.dashboard-sidebar{width:100%;position:static}}@media(max-width:768px){.dashboard-container{padding:1rem}.dashboard-header{margin-bottom:2rem;flex-direction:column;align-items:flex-start;gap:1rem}.dashboard-header h1{font-size:2rem}.systems-grid{grid-template-columns:1fr;gap:1rem}}.add-system-button{background-color:var(--text-primary);color:var(--bg-color);border:1px solid var(--border-color);padding:.7rem 1.2rem;border-radius:6px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.add-system-button:hover{background-color:#f3f4f6;transform:translateY(-1px)}.plus-icon{font-size:1.2rem;line-height:1}.dashboard-header p{color:#888;font-size:1.2rem}.dashboard-main{display:flex;gap:2rem;align-items:flex-start;width:100%}.systems-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem}.dashboard-sidebar{width:300px;position:sticky;top:100px}.dashboard-card{background-color:var(--surface);padding:1.5rem;border-radius:12px;border:1px solid var(--border-color);transition:all .3s cubic-bezier(.4,0,.2,1)}.dashboard-card:hover{border-color:var(--accent-color);background-color:var(--surface-hover);box-shadow:0 10px 30px #0000004d}.stats-card h3{margin-top:0;margin-bottom:1.5rem;color:#fff;font-size:1.1rem;font-weight:700;border-bottom:1px solid var(--border-color);padding-bottom:.75rem}.stats-list{display:flex;flex-direction:column;gap:1rem}.stats-item{display:flex;justify-content:space-between;align-items:center}.stats-label{color:var(--text-secondary);font-size:.85rem}.stats-value{font-weight:600;font-size:.9rem;color:var(--text-primary)}.stats-value.status-active{color:#4ade80;background-color:#4ade801a;padding:.1rem .5rem;border-radius:4px}.dashboard-status{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem;background-color:var(--surface);border-radius:12px;border:1px solid var(--border-color)}.dashboard-status.error{border-color:#ff4646;color:#ff4646}.no-systems-message{padding:6rem 2rem;text-align:center;background-color:var(--surface);border-radius:12px;border:1px solid var(--border-color);color:var(--text-secondary);font-size:1.1rem}.systems-list{list-style:none;padding:0;margin:0}.system-item{padding:1rem 0;border-bottom:1px solid #444}.system-item:last-child{border-bottom:none}.system-item strong{display:block;font-size:1.1rem;color:#fff}.system-desc{margin:.5rem 0 0;font-size:.9rem;color:#aaa}.system-card-button{background-color:var(--surface);border:1px solid var(--border-color);border-radius:16px;padding:1.75rem;text-align:left;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;height:100%;width:100%;color:inherit;text-decoration:none;box-sizing:border-box;position:relative;overflow:hidden}.system-card-button:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background-color:var(--accent-color);opacity:0;transition:opacity .3s}.system-card-button:hover{transform:translateY(-4px);border-color:var(--accent-color);background-color:var(--surface-hover);box-shadow:0 15px 35px #0006}.system-card-button:hover:before{opacity:1}.system-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.system-info{display:flex;flex-direction:column;gap:.25rem}.system-card-button strong{font-size:1.35rem;color:#fff;font-weight:700;margin:0;display:block;letter-spacing:-.02em}.status-indicator{width:8px;height:8px;border-radius:50%;margin-top:.5rem}.status-indicator.online{background-color:#4ade80;box-shadow:0 0 12px #4ade8066}.system-card-button .system-desc{font-size:.95rem;color:var(--text-secondary);margin:0 0 2rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.6}.system-id-badge{font-family:JetBrains Mono,monospace;font-size:.7rem;color:var(--text-secondary);opacity:.7}.system-card-footer{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:1.25rem;border-top:1px solid var(--border-color)}.system-date{font-size:.8rem;color:var(--text-secondary)}.system-card-button .system-id-badge{font-size:.75rem;font-family:monospace;color:#888;background-color:#1a1a1a;padding:.2rem .5rem;border-radius:4px}.light .dashboard-card,.light .dashboard-status,.light .system-card-button{background-color:#f9f9f9;border-color:#ddd}.light .system-card-button:hover{background-color:#fff;border-color:#646cff;box-shadow:0 10px 20px #0000001a}.light .system-card-button .system-desc{color:#666}.light .system-card-button .system-id-badge{background-color:#eee;color:#666}.light .no-systems-message{background-color:#f9f9f9;border-color:#ddd;color:#666}.light .dashboard-header p{color:#666}.system-detail-container{width:100%;max-width:1000px;margin:0 auto;padding:2rem;text-align:left;box-sizing:border-box}.back-button{background:none;border:1px solid var(--accent-color);color:var(--accent-color);padding:.5rem 1rem;border-radius:6px;cursor:pointer;margin-bottom:2rem;font-weight:600;transition:all .2s}.back-button:hover{background-color:var(--accent-color);color:var(--bg-color)}.detail-card{background-color:var(--surface);padding:3rem;border-radius:16px;border:1px solid var(--border-color);box-shadow:0 10px 30px #0000004d}@media(max-width:768px){.system-detail-container{padding:1rem}.detail-card{padding:1.5rem}.detail-card h1{font-size:2rem}}.detail-card h1{margin-top:0;font-size:3rem;margin-bottom:.5rem;background:linear-gradient(135deg,var(--text-primary) 0%,var(--accent-color) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.system-id{color:#888;font-family:monospace;margin-bottom:2rem}.detail-section{margin-top:2.5rem}.detail-section h3{color:var(--accent-color);border-bottom:1px solid var(--border-color);padding-bottom:.5rem;margin-bottom:1rem}.detail-section pre{background-color:var(--bg-color);padding:1.5rem;border-radius:8px;overflow-x:auto;font-size:.9rem;color:var(--text-secondary);border:1px solid var(--border-color)}.detail-status{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem;height:60vh}.detail-status.error{color:#ff4646}.light .detail-card{background-color:#f9f9f9;border-color:#ddd}.light .detail-section pre{background-color:#eee;color:#213547}.light .detail-section h3{border-bottom-color:#ddd}.table-container{overflow-x:auto;margin-top:1rem;border-radius:12px;background-color:var(--bg-color);border:1px solid var(--border-color)}.units-table{width:100%;border-collapse:collapse;text-align:left}.units-table th,.units-table td{padding:1rem;border-bottom:1px solid var(--border-color)}.units-table th{background-color:var(--surface);color:var(--text-secondary);font-weight:600;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em}.units-table tr:last-child td{border-bottom:none}.units-table tr:hover td{background-color:var(--surface-hover);color:var(--text-primary)}.unit-id-badge{font-family:JetBrains Mono,monospace;background-color:#00d1ff1a;padding:.2rem .5rem;border-radius:4px;color:var(--accent-color);font-size:.75rem;border:1px solid rgba(0,209,255,.2)}.status-badge{padding:.25rem .6rem;border-radius:6px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.status-badge.online,.status-badge.active{background-color:#22c55e1a;color:#4ade80;border:1px solid rgba(34,197,94,.2)}.status-badge.offline,.status-badge.inactive{background-color:#ef44441a;color:#f87171;border:1px solid rgba(239,68,68,.2)}.status-badge.unknown{background-color:#9e9e9e1a;color:#9e9e9e;border:1px solid rgba(158,158,158,.2)}.units-loading{display:flex;align-items:center;gap:1rem;padding:2rem;background-color:var(--surface);border-radius:8px;color:var(--text-secondary);border:1px solid var(--border-color)}.no-units{padding:2rem;text-align:center;background-color:var(--surface);border-radius:8px;color:var(--text-secondary);border:1px dashed var(--border-color)}.light .table-container,.light .units-loading,.light .no-units{background-color:#eee;border-color:#ddd}.light .units-table th{background-color:#e0e0e0;color:#535bf2}.light .units-table td{border-bottom-color:#ddd;color:#213547}.light .units-table tr:hover td{background-color:#e8e8e8}.light .unit-id-badge{background-color:#ddd;color:#666}.system-form-container{width:100%;max-width:800px;margin:0 auto;padding:2rem;text-align:left;box-sizing:border-box}.form-card{background-color:var(--surface);padding:3rem;border-radius:16px;border:1px solid var(--border-color);box-shadow:0 10px 30px #0000004d}.form-card h1{margin-top:0;font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,var(--text-primary) 0%,var(--accent-color) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;letter-spacing:-.04em}.form-subtitle{color:var(--text-secondary);margin-bottom:2.5rem;font-size:1.1rem}.system-form{display:flex;flex-direction:column;gap:1.5rem}.form-error{background-color:#ef44441a;color:#f87171;padding:1rem;border-radius:8px;border:1px solid rgba(239,68,68,.2);font-size:.95rem;margin-bottom:.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem}.form-group label{font-weight:600;font-size:.9rem;color:var(--text-primary);opacity:.9}.form-group input,.form-group textarea{background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:8px;padding:.8rem 1rem;color:var(--text-primary);font-family:inherit;font-size:1rem;transition:all .2s}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #00d1ff1a}.form-group input::placeholder,.form-group textarea::placeholder{color:#4b5563}.form-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:1rem}.cancel-button{background:none;border:1px solid var(--border-color);color:var(--text-primary);padding:.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s}.cancel-button:hover{background-color:var(--surface-hover);border-color:#4b5563}.create-button{background-color:var(--text-primary);color:var(--bg-color);border:1px solid var(--text-primary);padding:.75rem 2rem;border-radius:8px;font-weight:700;cursor:pointer;transition:all .2s}.create-button:hover{background-color:#f3f4f6;transform:translateY(-1px)}.create-button:disabled,.cancel-button:disabled{opacity:.5;cursor:not-allowed;transform:none}@media(max-width:768px){.system-form-container{padding:1rem}.form-card{padding:2rem 1.5rem}.form-card h1{font-size:2rem}.form-actions{flex-direction:column-reverse}.cancel-button,.create-button{width:100%}}.light .form-card{background-color:#f9f9f9;border-color:#ddd}.light .form-group input,.light .form-group textarea{background-color:#fff;border-color:#ddd}.light .cancel-button{background-color:#fff;color:#171717;border-color:#ddd}.light .cancel-button:hover{background-color:#f3f4f6}#root{width:100%;margin:0;padding:0;text-align:center}.app-container{display:flex;flex-direction:column;min-height:100vh}.sticky-header{position:sticky;top:0;z-index:1000;background-color:#000f1dcc;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color);padding:.75rem 2rem;width:100%}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;width:100%}.title{font-size:1.5rem;font-weight:800;text-align:left;color:#fff;letter-spacing:-.04em}.menu{display:flex;justify-content:center}.actions{display:flex;justify-content:flex-end;align-items:center;gap:.5rem}.dropdown{position:relative;display:inline-block}.dropdown-button{background:none;border:none;color:inherit;font-size:1rem;padding:.5rem 1rem;cursor:pointer}.theme-toggle{background:none;border:1px solid transparent;color:inherit;font-size:1.1rem;padding:.4rem .6rem;line-height:1;border-radius:6px}.theme-toggle:hover{border-color:var(--accent-color)}.dropdown-content{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:var(--surface);min-width:180px;box-shadow:0 20px 40px #0006;z-index:1;border-radius:8px;overflow:hidden;border:1px solid var(--border-color);margin-top:.5rem}.dropdown-content a{color:var(--text-primary);padding:12px 16px;text-decoration:none;display:block;text-align:left}.dropdown-content a:hover{background-color:var(--surface-hover);color:var(--accent-color)}.login-button{padding:.5rem 1.2rem;background-color:var(--text-primary);color:var(--bg-color);border-radius:6px;font-weight:700;transition:all .2s}.login-button:hover{background-color:#f3f4f6}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;padding:2rem;width:100%}.landing-container{flex:1;display:flex;justify-content:center;align-items:center;width:100%;background-color:var(--bg-color)}.gradient-box{padding:6rem 2rem;background:transparent;color:#fff;max-width:900px;box-sizing:border-box;text-align:center}.gradient-box h1{margin:1.5rem 0;font-size:4.5rem;line-height:1;font-weight:800;letter-spacing:-.05em;background:linear-gradient(to bottom,var(--text-primary) 0%,var(--accent-color) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.gradient-box button{padding:.8rem 2rem;font-size:1.1rem;background-color:var(--text-primary);color:var(--bg-color);border-radius:8px;font-weight:700}.light .sticky-header{background-color:#fffc;border-bottom:1px solid rgba(0,0,0,.1)}.light .title{color:#000}.light .dropdown-content{background-color:#fff;border:1px solid rgba(0,0,0,.1)}.light .dropdown-content a{color:#171717}.light .dropdown-content a:hover{background-color:#eee}.user-menu-container{position:relative}.user-icon-button{background:none;border:2px solid transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;overflow:hidden;transition:border-color .3s;color:inherit}.user-icon-button:hover{border-color:var(--accent-color)}.user-icon-img{width:100%;height:100%;object-fit:cover}.user-icon-placeholder{font-size:1.5rem}.user-card{position:absolute;top:calc(100% + 10px);right:0;background-color:var(--surface);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;min-width:240px;box-shadow:0 20px 40px #0006;display:flex;flex-direction:column;align-items:center;z-index:1001}.user-card-img{width:64px;height:64px;border-radius:50%;margin-bottom:1rem;border:2px solid var(--border-color)}.user-card-info{text-align:center;width:100%}.user-card-name{font-size:1.1rem;font-weight:700;margin-bottom:.25rem;color:#fff}.user-card-email{font-size:.9rem;color:#aaa;margin-bottom:1.5rem;word-break:break-all}.logout-button{width:100%;padding:.6rem;background-color:#ff4646;color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:background-color .2s}.logout-button:hover{background-color:#e33e3e}.light .user-card{background-color:#fff;border-color:#eee;box-shadow:0 10px 25px #0000001a}.light .user-card-name{color:#213547}.light .user-card-email{color:#666}.loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;width:100%;background-color:var(--bg-color);color:var(--text-primary)}.spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--accent-color);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.light .loading-container{background-color:#fff;color:#213547}@media(max-width:768px){.sticky-header{padding:.8rem 1rem}.main-content{padding:1rem}.title{font-size:1.8rem}.menu{display:none}.gradient-box{padding:2rem}.gradient-box h1{font-size:2.5rem}}