.hrdash{--sidebar:#0f0f16;--line:var(--border,#ffffff14);--line-2:var(--border2,#ffffff24);--accent:var(--purple,#7c3aed);--accent-light:var(--purple-light,#9f5afd);--accent-soft:#7c3aed26;--red:#ef4444;background:var(--bg);color:var(--text);height:100vh;font-size:14px;display:flex;overflow:hidden}.hrdash ::-webkit-scrollbar{width:4px}.hrdash ::-webkit-scrollbar-track{background:0 0}.hrdash ::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:2px}.hrdash .card{background:var(--card);border:1px solid var(--line);border-radius:16px}.hrdash .card2{background:var(--card2);border:1px solid var(--line);border-radius:10px}.hrdash .glow{box-shadow:0 0 20px color-mix(in srgb, var(--accent) 12%, transparent)}.hrdash .sidebar{background:var(--sidebar);border-right:1px solid var(--line);flex-direction:column;flex-shrink:0;width:215px;display:flex;position:relative;overflow:hidden}.hrdash .nav-item{cursor:pointer;color:var(--text2);white-space:nowrap;border-radius:8px;align-items:center;gap:10px;padding:8px 12px;font-size:13.5px;transition:all .15s;display:flex}.hrdash .nav-item:hover{color:var(--text);background:#ffffff0d}.hrdash .nav-item.active{background:color-mix(in srgb, var(--accent) 16%, transparent);color:var(--text);box-shadow:inset 2px 0 0 var(--accent)}.hrdash .nav-divider{background:var(--line);height:1px;margin:8px 4px}.hrdash .server-card{background:var(--card);border:1px solid var(--line);cursor:pointer;border-radius:10px;margin:10px 8px 6px;padding:8px 10px;transition:all .15s}.hrdash .server-card:hover{border-color:var(--line-2)}.hrdash .server-dropdown{background:var(--card);border:1px solid var(--line-2);border-radius:10px;max-height:240px;margin:0 8px 6px;display:none;overflow-y:auto}.hrdash .server-dropdown.open{display:block}.hrdash .server-row{cursor:pointer;align-items:center;gap:8px;padding:8px 12px;transition:background .1s;display:flex}.hrdash .server-row:hover{background:color-mix(in srgb, var(--accent) 8%, transparent)}.hrdash .sidebar-user{border-top:1px solid var(--line);cursor:pointer;align-items:center;gap:9px;padding:10px;transition:background .15s;display:flex}.hrdash .sidebar-user:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}.hrdash .main{flex-direction:column;flex:1;display:flex;overflow:hidden}.hrdash .main-scroll{flex:1;padding:22px 26px;overflow-y:auto}.hrdash .page-header{flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.hrdash .page-title{font-size:20px;font-weight:700}.hrdash .page-sub{color:var(--text2);margin-top:2px;font-size:13px}.hrdash .page{flex-direction:column;gap:18px;display:none}.hrdash .page.active{display:flex}.hrdash .stat-card{align-items:center;gap:14px;padding:18px 20px;display:flex}.hrdash .stat-icon{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:18px;display:flex}.hrdash .badge{border-radius:999px;align-items:center;gap:3px;padding:2px 7px;font-size:11px;font-weight:600;display:inline-flex}.hrdash .badge-green{color:var(--green);background:#10b98126}.hrdash .badge-red{color:var(--red);background:#ef444426}.hrdash .badge-blue{color:var(--blue);background:#3b82f626}.hrdash .badge-amber{color:var(--amber);background:#f59e0b26}.hrdash .badge-muted{background:color-mix(in srgb, var(--accent) 10%, transparent);color:var(--accent-light)}.hrdash .pill{border-radius:999px;padding:3px 10px;font-size:11px;font-weight:600}.hrdash .pill-on{color:var(--green);background:#10b98126}.hrdash .pill-off{color:var(--muted);background:#5a5a7a33}.hrdash .pill-active{color:var(--green);background:#10b98126}.hrdash .pill-ended{color:var(--muted);background:#5a5a7a33}.hrdash .btn{cursor:pointer;border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:600;transition:all .15s}.hrdash .btn:disabled{opacity:.5;cursor:not-allowed}.hrdash .btn-primary{background:var(--accent);color:#fff}.hrdash .btn-primary:hover{background:var(--accent-light)}.hrdash .btn-ghost{color:var(--text2);border:1px solid var(--line);background:#ffffff0d}.hrdash .btn-ghost:hover{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--text)}.hrdash .btn-ghost.active{background:color-mix(in srgb, var(--accent) 20%, transparent);color:#fff;border-color:color-mix(in srgb, var(--accent) 40%, transparent)}.hrdash .btn-danger{color:var(--red);background:#ef44441f;border:1px solid #ef444433}.hrdash .btn-danger:hover{background:#ef444440}.hrdash .btn-sm{border-radius:6px;padding:4px 10px;font-size:11px}.hrdash .btn-xs{border-radius:5px;padding:3px 8px;font-size:11px}.hrdash .input-field{border:1px solid var(--line);color:var(--text);background:#ffffff0d;border-radius:8px;outline:none;width:100%;padding:9px 12px;font-size:13px;transition:border-color .15s}.hrdash .input-field:focus{border-color:color-mix(in srgb, var(--accent) 50%, transparent)}.hrdash .input-field::placeholder{color:var(--muted)}.hrdash select.input-field option{background:var(--card2);color:var(--text)}.hrdash textarea.input-field{resize:vertical;min-height:80px;font-family:inherit}.hrdash .form-label{color:var(--text2);margin-bottom:5px;font-size:12px;font-weight:600;display:block}.hrdash .form-group{flex-direction:column;gap:5px;margin-bottom:14px;display:flex}.hrdash .form-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.hrdash .status-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.hrdash .dot-green{background:var(--green);box-shadow:0 0 6px var(--green)}.hrdash .dot-amber{background:var(--amber);box-shadow:0 0 6px var(--amber)}.hrdash .dot-red{background:var(--red);box-shadow:0 0 6px var(--red)}.hrdash .dot-muted{background:var(--muted)}.hrdash .table-wrap{overflow-x:auto}.hrdash table{border-collapse:collapse;width:100%}.hrdash th{text-align:left;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--line);padding:8px 12px;font-size:11px;font-weight:700}.hrdash td{border-bottom:1px solid var(--line);vertical-align:middle;padding:10px 12px;font-size:13px}.hrdash tr:last-child td{border-bottom:none}.hrdash tr:hover td{background:color-mix(in srgb, var(--accent) 4%, transparent)}.hrdash .modal-overlay{z-index:200;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000bf;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.hrdash .modal-overlay.open{display:flex}.hrdash .modal-box{background:var(--card);border:1px solid var(--line-2);border-radius:16px;width:480px;max-width:95vw;max-height:90vh;padding:24px;animation:.2s hr-fade-in;overflow-y:auto}.hrdash .modal-title{align-items:center;gap:8px;margin-bottom:18px;font-size:17px;font-weight:700;display:flex}.hrdash .modal-footer{border-top:1px solid var(--line);justify-content:flex-end;gap:8px;margin-top:18px;padding-top:14px;display:flex}.hrdash .toast-container{z-index:500;flex-direction:column;gap:8px;display:flex;position:fixed;bottom:24px;right:24px}.hrdash .toast{border-radius:10px;align-items:center;gap:8px;min-width:240px;padding:12px 18px;font-size:13px;font-weight:600;animation:.25s hr-slide-in;display:flex}.hrdash .toast-success{border:1px solid var(--green);color:var(--green);background:#0d2218}.hrdash .toast-error{border:1px solid var(--red);color:var(--red);background:#200d0d}.hrdash .toast-info{border:1px solid var(--blue);color:var(--blue);background:#0d0d22}.hrdash .spinner{border:2px solid color-mix(in srgb, var(--accent) 30%, transparent);border-top-color:var(--accent);border-radius:50%;width:16px;height:16px;animation:.7s linear infinite hr-spin;display:inline-block}.hrdash .fade-in{animation:.25s hr-fade-in}.hrdash .shimmer{background:linear-gradient(90deg, var(--card) 25%, var(--card2) 50%, var(--card) 75%);background-size:200% 100%;animation:1.5s infinite hr-shimmer}.hrdash .no-data{color:var(--muted);text-align:center;padding:30px 0;font-size:13px}.hrdash .section-scroll{max-height:260px;overflow-y:auto}.hrdash code{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--accent-light);border-radius:4px;padding:1px 6px;font-family:monospace;font-size:12px}.hrdash .offline-banner{color:var(--amber);background:#f59e0b14;border:1px solid #f59e0b33;border-radius:10px;align-items:center;gap:8px;padding:10px 14px;font-size:12.5px;display:flex}@keyframes hr-spin{to{transform:rotate(360deg)}}@keyframes hr-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes hr-slide-in{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@keyframes hr-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (max-width:760px){.hrdash{flex-direction:column;height:auto;min-height:100vh;overflow:visible}.hrdash .sidebar{border-right:0;border-bottom:1px solid var(--line);width:100%;overflow:visible}.hrdash .sidebar>div:first-child{padding:14px 16px 10px!important}.hrdash .sidebar nav{scrollbar-width:none;gap:8px;display:flex;overflow-x:auto;flex:none!important;padding:6px 12px 12px!important}.hrdash .sidebar nav::-webkit-scrollbar{display:none}.hrdash .sidebar nav>div{flex-shrink:0;display:flex}.hrdash .nav-divider{display:none}.hrdash .nav-item{border:1px solid var(--line);border-radius:999px;min-height:40px;padding:0 14px}.hrdash .nav-item.active{box-shadow:none;border-color:color-mix(in srgb, var(--accent) 45%, transparent)}.hrdash .server-card{margin:10px 12px 6px;padding:10px 12px}.hrdash .server-dropdown{margin:0 12px 8px}.hrdash .server-row{min-height:44px}.hrdash .sidebar-user{padding:10px 16px}.hrdash .main{overflow:visible}.hrdash .main-scroll{padding:20px 16px;overflow:visible}.hrdash .form-row{grid-template-columns:1fr}.hrdash .btn{min-height:40px}.hrdash .btn-sm,.hrdash .btn-xs{min-height:36px}.hrdash .input-field{min-height:42px;font-size:16px}.hrdash .toast-container{bottom:12px;left:12px;right:12px}.hrdash .toast{min-width:0}}