.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%)}.login-container{width:100%;max-width:420px;padding:20px}.login-card{width:100%}.login-title{text-align:center;margin-bottom:32px;font-size:24px;font-weight:600;color:#e0e0e0}.login-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column}.login-button{margin-top:8px;width:100%}.login-footer{margin-top:24px;padding-top:24px;border-top:1px solid #475569;text-align:center}.default-creds{font-size:14px;color:#94a3b8}.dashboard-page{min-height:100vh}.dashboard-header{background-color:#2d2d2d;padding:20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 4px #0003}.dashboard-header h1{font-size:24px;font-weight:600}.header-actions{display:flex;align-items:center;gap:20px}.user-info{color:#cbd5e1;font-size:14px}.ws-status{font-size:14px;font-weight:500}.ws-status.connected{color:#34d399}.ws-status.disconnected{color:#f87171}.dashboard-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px;margin-top:24px;margin-bottom:24px}.status-content h3{margin-top:20px;margin-bottom:12px;font-size:18px;color:#cbd5e1}.board-status,.matrix-info{padding:12px;background-color:#1a1a1a;border-radius:6px;margin-bottom:8px}.board-address{font-size:14px;color:#94a3b8;margin-top:4px}.status-connected{color:#34d399;font-weight:500}.status-disconnected{color:#f87171;font-weight:500}.connections-list{display:flex;flex-direction:column;gap:12px}.connection-item{padding:12px;background-color:#1a1a1a;border-radius:6px}.connection-meta{font-size:14px;color:#94a3b8;margin-top:4px}.dashboard-notice{margin-top:24px;background-color:#475569;text-align:center}.dashboard-notice p{color:#cbd5e1}.matrix-grid-container{padding:32px;background-color:#2d2d2d}.matrix-grid{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:start;min-height:600px}.inputs-column,.outputs-column{display:flex;flex-direction:column;gap:12px}.column-label{font-size:14px;font-weight:600;color:#94a3b8;text-align:center;padding:8px;margin-bottom:4px;text-transform:uppercase;letter-spacing:1px}.io-button{min-width:80px;min-height:80px;font-size:24px;font-weight:600;border:2px solid #475569;border-radius:8px;background-color:#1a1a1a;color:#e0e0e0;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;position:relative}.io-button:hover{background-color:#2d2d2d;border-color:#64748b;transform:scale(1.05)}.io-button:active{transform:scale(.98)}.input-button.selected{background-color:#2563eb;border-color:#2563eb;color:#fff;box-shadow:0 0 20px #2563eb80}.input-button.connected{border-color:#34d399;background-color:#065f46;color:#34d399}.input-button.selected.connected{background-color:#2563eb;border-color:#2563eb;color:#fff}.output-button{flex-direction:column;gap:4px;min-width:120px}.output-button.connected{background-color:#065f46;border-color:#34d399;color:#34d399}.output-button:hover.connected{background-color:#dc2626;border-color:#dc2626;color:#fff}.output-number{font-size:24px;font-weight:600}.connected-input{font-size:14px;font-weight:400;opacity:.9}.connections-svg{width:100%;height:100%;min-height:600px;min-width:200px}.connection-line{stroke-width:3;fill:none}.connection-line.active{stroke:#34d399;stroke-dasharray:none;filter:drop-shadow(0 0 4px rgba(52,211,153,.6))}.connection-line.preview{stroke:#2563eb;stroke-dasharray:8 4;opacity:.7}.selection-indicator{margin-top:24px;padding:16px;background-color:#2563eb;border-radius:8px;display:flex;justify-content:space-between;align-items:center;color:#fff;font-weight:500}.selection-hint{font-size:14px;opacity:.9}@media (hover: none) and (pointer: coarse){.io-button{min-width:90px;min-height:90px}.io-button:hover{transform:none}.io-button:active{transform:scale(.95)}}@media (max-width: 768px){.matrix-grid{grid-template-columns:auto 1fr auto;gap:12px}.io-button{min-width:60px;min-height:60px;font-size:18px}.output-button{min-width:80px}.output-number{font-size:18px}.connected-input{font-size:12px}.connections-svg{min-width:100px;min-height:500px}.selection-indicator{flex-direction:column;gap:8px;text-align:center}}.matrix-control-page{min-height:100vh}.matrix-header{background-color:#2d2d2d;padding:20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 4px #0003}.matrix-header h1{font-size:24px;font-weight:600}.matrix-selector{display:flex;gap:16px;margin:24px 0;justify-content:center}.matrix-button{padding:16px 32px;font-size:18px;font-weight:600;border:2px solid #475569;border-radius:8px;background-color:#2d2d2d;color:#e0e0e0;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:140px}.matrix-button:hover{background-color:#3d3d3d;border-color:#64748b}.matrix-button.active{background-color:#2563eb;border-color:#2563eb;color:#fff}.matrix-size{font-size:14px;font-weight:400;opacity:.8}.connection-info{margin-top:24px}.connection-info h3{margin-bottom:16px;font-size:18px;color:#cbd5e1}.connections-grid{display:flex;flex-wrap:wrap;gap:12px}.connection-badge{padding:8px 16px;background-color:#1a1a1a;border-radius:6px;font-size:14px;font-weight:500;color:#34d399;border:1px solid #10b981}.no-connections{color:#94a3b8;text-align:center;padding:20px}.instructions{margin-top:24px;background-color:#475569}.instructions h3{margin-bottom:12px;font-size:18px;color:#e0e0e0}.instructions ol{padding-left:24px;color:#cbd5e1;line-height:1.8}.instructions li{margin-bottom:8px}@media (max-width: 1024px){.matrix-selector{flex-direction:column}.matrix-button{width:100%}}.users-page{min-height:100vh}.page-header{background-color:#2d2d2d;padding:20px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 4px #0003}.page-header h1{font-size:24px;font-weight:600}.page-actions{margin:24px 0}.alert{padding:16px;border-radius:6px;margin-bottom:24px;font-weight:500}.alert.error{background-color:#7f1d1d;border:1px solid #dc2626;color:#fca5a5}.alert.success{background-color:#064e3b;border:1px solid #10b981;color:#6ee7b7}.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:24px}.user-card{padding:24px}.user-info-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.user-info-section h3{font-size:20px;font-weight:600;color:#e0e0e0}.role-badge{padding:6px 16px;border-radius:20px;font-size:14px;font-weight:600;text-transform:uppercase}.role-badge.admin{background-color:#7c2d12;color:#fbbf24;border:1px solid #f59e0b}.role-badge.user{background-color:#1e3a8a;color:#93c5fd;border:1px solid #3b82f6}.user-actions{display:flex;gap:12px;flex-wrap:wrap}.user-actions button{flex:1;min-width:120px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000}.modal{max-width:500px;width:90%;max-height:90vh;overflow-y:auto;padding:32px}.modal h2{margin-bottom:24px;font-size:24px;color:#e0e0e0}.user-form{display:flex;flex-direction:column;gap:20px}.modal-actions{display:flex;gap:12px;margin-top:8px}.modal-actions button{flex:1}@media (max-width: 768px){.users-grid{grid-template-columns:1fr}.user-actions{flex-direction:column}.user-actions button{width:100%}.page-header{flex-direction:column;gap:16px}.header-actions{width:100%;flex-direction:column}.header-actions button{width:100%}}.config-page{min-height:100vh}.config-section{margin-bottom:32px}.config-section h2{font-size:28px;font-weight:600;margin-bottom:12px;color:#e0e0e0}.config-description{color:#94a3b8;font-size:16px}.config-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:24px;margin-bottom:32px}.config-card{padding:24px}.config-card h3{font-size:20px;font-weight:600;margin-bottom:20px;color:#cbd5e1}.config-details{display:flex;flex-direction:column;gap:16px}.config-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background-color:#1a1a1a;border-radius:6px}.config-label{font-weight:600;color:#94a3b8;font-size:14px}.config-value{color:#e0e0e0;font-weight:500;font-size:16px}.matrices-section{margin-bottom:32px}.matrices-section h2{font-size:24px;font-weight:600;margin-bottom:24px;color:#e0e0e0}.matrices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}.matrix-config{padding:24px;border:2px solid #475569}.matrix-config h3{font-size:20px;font-weight:600;margin-bottom:20px;color:#34d399}.config-note{background-color:#475569;padding:24px}.config-note h3{font-size:18px;margin-bottom:12px;color:#e0e0e0}.config-note p{color:#cbd5e1;line-height:1.6;margin-bottom:8px}.config-note ul{margin-top:8px;margin-left:24px;color:#cbd5e1;line-height:1.8}@media (max-width: 768px){.config-grid,.matrices-grid{grid-template-columns:1fr}}.logs-page{min-height:100vh}.filters-card{margin-bottom:24px;padding:24px}.filters-card h2{font-size:20px;font-weight:600;margin-bottom:20px;color:#cbd5e1}.filters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:20px}.filter-group{display:flex;flex-direction:column;gap:8px}.filter-actions{display:flex;gap:12px;margin-top:16px}.logs-info{margin-bottom:16px;color:#94a3b8;font-size:14px}.logs-table-container{padding:0;overflow-x:auto;margin-bottom:24px}.logs-table{width:100%}.log-row{padding:16px 24px;border-bottom:1px solid #334155;transition:background-color .2s}.log-row:hover{background-color:#1e293b}.log-row:last-child{border-bottom:none}.log-main{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.log-timestamp{font-size:14px;color:#94a3b8;min-width:160px;font-family:Courier New,monospace}.log-level{padding:4px 12px;border-radius:4px;font-size:12px;font-weight:700;text-transform:uppercase;min-width:60px;text-align:center}.log-level.level-debug{background-color:#475569;color:#cbd5e1}.log-level.level-info{background-color:#1e3a8a;color:#93c5fd;border:1px solid #3b82f6}.log-level.level-warn{background-color:#7c2d12;color:#fbbf24;border:1px solid #f59e0b}.log-level.level-error{background-color:#7f1d1d;color:#fca5a5;border:1px solid #dc2626}.log-category{padding:4px 10px;background-color:#334155;border-radius:4px;font-size:12px;color:#94a3b8;font-weight:600}.log-action{font-size:14px;color:#e0e0e0;font-weight:500;flex:1;min-width:150px}.log-username{font-size:14px;color:#34d399;font-weight:500}.log-ip{font-size:12px;color:#64748b;font-family:Courier New,monospace}.button-small{padding:4px 12px;font-size:12px;min-width:70px}.log-details{margin-top:16px;padding:16px;background-color:#0f172a;border-radius:6px;border-left:3px solid #3b82f6}.log-details h4{font-size:14px;font-weight:600;color:#cbd5e1;margin-bottom:8px}.log-details pre{background-color:#1e293b;padding:12px;border-radius:4px;overflow-x:auto;font-size:12px;color:#94a3b8;line-height:1.6;white-space:pre-wrap;word-wrap:break-word}.log-details p{margin-top:8px;font-size:14px;color:#cbd5e1}.no-logs{padding:40px;text-align:center;color:#64748b;font-size:16px}.pagination{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:24px}.pagination-info{color:#94a3b8;font-size:14px;min-width:120px;text-align:center}@media (max-width: 768px){.filters-grid{grid-template-columns:1fr}.filter-actions{flex-direction:column}.filter-actions button{width:100%}.log-main{flex-direction:column;align-items:flex-start;gap:8px}.log-timestamp,.log-action,.log-username{min-width:auto;width:100%}.pagination{flex-direction:column;gap:12px}.pagination button{width:100%}.page-header{flex-direction:column;gap:16px}.header-actions{width:100%;flex-direction:column}.header-actions button,.header-actions span{width:100%;text-align:center}}.app-loading{display:flex;justify-content:center;align-items:center;min-height:100vh;font-size:20px;color:#94a3b8}*{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:#1a1a1a;color:#e0e0e0}#root{min-height:100vh}.container{max-width:1200px;margin:0 auto;padding:20px}.button{padding:12px 24px;font-size:16px;font-weight:500;border:none;border-radius:6px;cursor:pointer;transition:all .2s;min-width:120px}.button-primary{background-color:#2563eb;color:#fff}.button-primary:hover{background-color:#1d4ed8}.button-primary:disabled{background-color:#94a3b8;cursor:not-allowed}.button-secondary{background-color:#475569;color:#fff}.button-secondary:hover{background-color:#334155}.button-danger{background-color:#dc2626;color:#fff}.button-danger:hover{background-color:#b91c1c}.input{padding:12px;font-size:16px;border:1px solid #475569;border-radius:6px;background-color:#2d2d2d;color:#e0e0e0;width:100%}.input:focus{outline:none;border-color:#2563eb}.label{display:block;margin-bottom:8px;font-weight:500;color:#cbd5e1}.error{color:#f87171;font-size:14px;margin-top:8px}.success{color:#34d399;font-size:14px;margin-top:8px}.card{background-color:#2d2d2d;border-radius:8px;padding:24px;box-shadow:0 4px 6px #0000004d}.loading{display:flex;justify-content:center;align-items:center;min-height:200px;font-size:18px;color:#94a3b8}