*{box-sizing:border-box}body{margin:0;font-family:Consolas,SF Mono,ui-monospace,Menlo,monospace;background:#0b0b0b;color:#d8d8d8;font-size:13px}.app{display:flex;min-height:100vh}.sidebar{width:240px;flex-shrink:0;background:#0d1218;padding:14px;border-right:1px solid #1c2530;overflow-y:auto}.total-online{font-size:.95rem;color:#9ccc65;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid #1c2530}.total-online span{font-weight:700;margin-left:6px}.filter-section{margin-bottom:12px;padding:10px 10px 12px;background:#101620;border:1px solid #1c2530;border-radius:6px}.filter-section h3{margin:0 0 4px;font-size:.7rem;color:#777;text-transform:uppercase;letter-spacing:.05em}.filter-row{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:#ccc;padding:3px 4px;border-radius:3px;cursor:pointer;font-family:inherit;font-size:.85rem;text-align:left}.filter-row:hover{background:#131a22}.filter-row.active{background:#16212e;color:#9ccc65}.filter-row.toggle{cursor:pointer}.filter-row.clickable .remove-btn{opacity:0}.filter-row.clickable:hover .remove-btn{opacity:1}.hint{color:#555;font-size:.78rem;margin:2px 4px}.inline-form{display:flex;gap:4px;margin-top:6px}.inline-form input{flex:1;min-width:0}.filter-label{flex:1}.filter-count{color:#666;font-size:.8rem;min-width:1.2em;text-align:right}.filter-row.active .filter-count{color:#9ccc65}.badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:16px;border-radius:3px;font-size:.6rem;font-weight:700;color:#111;flex-shrink:0}.badge.voc{background:#1a2c3d;color:#9ccc65}.badge.small{width:20px;height:14px;font-size:.55rem}.badge.small.badge-empty{background:transparent;color:#444}.manage-section{margin-bottom:12px;padding:10px 10px 12px;background:#101620;border:1px solid #1c2530;border-radius:6px}.manage-section h3{margin:0 0 6px;font-size:.7rem;color:#777;text-transform:uppercase;letter-spacing:.05em}.manage-section form{display:flex;flex-direction:column;gap:6px}.sidebar input,.sidebar select,.sidebar button[type=submit]{padding:5px 7px;border-radius:3px;border:1px solid #223040;background:#10161c;color:#ddd;font-family:inherit;font-size:.8rem}.sidebar button[type=submit]{cursor:pointer;background:#2e5a2e;border:none;color:#cfe9c8}.guild-list{list-style:none;padding:0;margin:8px 0 0;font-size:.78rem}.guild-list li{display:flex;justify-content:space-between;padding:3px 0;color:#aaa}.guild-list button{background:none;border:none;color:#e57373;cursor:pointer;font-family:inherit}.user-list{max-height:130px;overflow-y:auto;border:1px solid #222;border-radius:4px;padding:4px 8px}.user-form select{background:#1c1c1c;border:1px solid #333;color:#eee;border-radius:4px;font-size:.78rem}.user-form .hint{margin:2px 0 0;font-size:.72rem;color:#7fbf7f}.user-subsection{margin-top:12px;padding-top:10px;border-top:1px dashed #223040}.user-subsection h4{margin:0 0 6px;font-size:.68rem;color:#667;text-transform:uppercase;letter-spacing:.05em}.secondary-btn{background:#1c2530!important;color:#9db4c9!important}main{flex:1;padding:18px 22px;min-width:0;display:flex;flex-direction:column}.main-header{display:flex;align-items:baseline;gap:16px;margin-bottom:10px;justify-content:space-between}.header-right{display:flex;align-items:center;gap:14px}.current-user{font-size:.8rem;color:#999;text-transform:capitalize}.alarm-banner{background:#4a1414;border:1px solid #e57373;color:#ffcdd2;padding:4px 10px;border-radius:4px;cursor:pointer;font-family:inherit;font-size:.78rem;animation:alarm-pulse 1s infinite}@keyframes alarm-pulse{0%,to{opacity:1}50%{opacity:.55}}.logout-btn{background:#1c1c1c;border:1px solid #333;color:#ccc;padding:4px 10px;border-radius:4px;cursor:pointer;font-size:.8rem}.logout-btn:hover{background:#2a2a2a}.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#0a0a0a}.login-form{display:flex;flex-direction:column;gap:10px;width:260px;padding:28px;background:#12161c;border:1px solid #262626;border-radius:8px}.login-form h1{font-size:1rem;margin:0 0 8px;text-align:center}.login-form input{background:#1c1c1c;border:1px solid #333;color:#eee;padding:8px 10px;border-radius:4px}.login-form button{background:#2f6fed;border:none;color:#fff;padding:9px;border-radius:4px;cursor:pointer;font-weight:600}.login-form button:disabled{opacity:.5;cursor:not-allowed}h1{font-size:1.1rem;margin:0;color:#eee;font-weight:600}.grids-container{display:flex;flex-wrap:wrap;align-items:stretch;gap:20px;flex:1}.group-grid{flex:1 1 460px;min-width:380px;max-width:580px;border:1px solid #182230;border-radius:4px;padding:10px 12px;background:#0c1015;display:flex;flex-direction:column}.group-grid.dragging{opacity:.4}.group-grid h2{font-size:.85rem;margin:0 0 6px;color:#9ccc65;font-weight:600;display:flex;align-items:baseline;justify-content:space-between;gap:8px}.group-grid h2.drag-handle{cursor:grab}.group-grid h2.drag-handle:active{cursor:grabbing}.grid-alert{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:.72rem;color:#667}.grid-alert-line{display:flex;align-items:center;gap:5px;flex-wrap:wrap;color:#99a}.grid-alert.armed{color:#9ccc65}.grid-alert-toggle{display:flex;align-items:center;gap:3px;cursor:pointer}.grid-alert-number{width:4ch;padding:2px 5px;border-radius:3px;border:1px solid #223040;background:#10161c;color:#ddd;font-family:inherit;font-size:.75rem;-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.grid-alert-number::-webkit-outer-spin-button,.grid-alert-number::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.grid-alert-number:focus{outline:none;border-color:#2a3d52}.grid-alert-select{padding:2px 5px;border-radius:3px;border:1px solid #223040;background:#10161c;color:#ddd;font-family:inherit;font-size:.75rem}.drag-title{display:flex;align-items:baseline;gap:6px}.drag-grip{color:#445;font-weight:400}.group-grid-count{color:#666;font-size:.75rem;font-weight:400;white-space:nowrap}.voc-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 10px}.voc-tab{display:flex;align-items:center;gap:4px;background:#10161c;border:1px solid #223040;color:#9ab;padding:2px 6px;border-radius:3px;cursor:pointer;font-family:inherit;font-size:.72rem}.voc-tab:hover{background:#16212e}.voc-tab.active{background:#1c3a1c;border-color:#2e5a2e;color:#cfe9c8}.voc-tab-count{color:#667;font-size:.68rem}.voc-tab.active .voc-tab-count{color:#9ccc65}.char-grid{display:flex;flex-direction:column;flex:1;overflow-x:auto}.char-row{min-width:460px}.char-row{display:grid;grid-template-columns:14px 4ch 8px 20ch 4ch 22px 8ch 8px 13ch 11ch 20px;align-items:center;gap:0;padding:2px 0;line-height:1.3;font-size:.82rem;background:var(--row-tint, transparent);border-bottom:1px solid #182230}.char-row>*{border-right:1px solid #182230;min-width:0}.char-row>*:not(.status-dot):not(.badge):not(.col-spacer){padding:0 6px}.char-row>*:last-child{border-right:none}.char-row>.col-spacer,.char-row>.status-dot{border-right:none}.char-header{border-bottom:1px solid #2a3d52;margin-bottom:2px}.sort-btn{background:none;border:none;color:#777;font-family:inherit;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;text-align:left;padding:0;cursor:pointer;white-space:nowrap}.sort-btn:hover{color:#ccc}.sort-btn:focus{outline:none;color:#ccc}.sort-btn:focus-visible{outline:1px solid #2a3d52;outline-offset:2px}.col-label{color:#777;font-size:.72rem;text-transform:uppercase;letter-spacing:.03em}.char-location{background:transparent;border:none;border-bottom:1px solid transparent;font-family:inherit;color:#aaa;font-size:.75rem;width:100%;min-width:0;padding:0}.char-location::placeholder{color:#444}.char-location:hover,.char-location:focus{border-bottom-color:#2a3d52}.char-location:focus{outline:none}.char-row:hover{background:#121a22}.char-row.offline{opacity:.45}.char-level{text-align:right;color:#ccc}.char-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#eee}.char-name.clickable{cursor:pointer}.char-name.clickable:hover{text-decoration:underline}.char-voc{color:#888;font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.char-time{text-align:right;color:#9ccc65;font-variant-numeric:tabular-nums}.char-row.offline .char-time{color:#555}.char-group-select{background:transparent;border:none;font-family:inherit;font-size:.75rem;max-width:11ch;overflow:hidden;text-overflow:ellipsis}.char-group-select:focus{outline:none}.remove-btn{background:none;border:none;color:#555;cursor:pointer;font-family:inherit;padding:0 2px}.remove-btn:hover{color:#e57373}.remove-btn:focus{outline:none}.remove-btn:focus-visible{outline:1px solid #2a3d52;outline-offset:1px}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-dot.online{background:#4caf50;box-shadow:0 0 4px #4caf50}.status-dot.offline{background:#444}.empty{flex:1;text-align:center;color:#666;padding:40px}.error{color:#e57373;font-size:.8rem}.connection-status{font-size:.75rem;margin:0}.connection-status.ok{color:#6c6}.connection-status.warning{color:#e6a23c}@media (max-width: 860px){.app{flex-direction:column}.sidebar{width:100%;max-height:46vh;border-right:none;border-bottom:1px solid #222}.group-grid{flex-basis:100%;min-width:0;max-width:100%}}@media (max-width: 480px){main{padding:14px 12px}.grids-container{gap:12px}}