@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}.lp-bg{background:radial-gradient(80% 60% at 20% 10%,#3878ff2e 0%,#0000 60%),radial-gradient(60% 50% at 80% 90%,#1e3cb438 0%,#0000 60%),linear-gradient(160deg,#0a1f5c 0%,#0e2d8a 35%,#1044b8 65%,#0c3090 100%);flex-direction:column;justify-content:center;align-items:center;gap:1.5rem;min-height:100vh;padding:2rem 1rem;font-family:Inter,sans-serif;display:flex;position:relative;overflow:hidden}.lp-bg:before{content:"";pointer-events:none;background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);background-size:48px 48px;position:absolute;inset:0}.lp-bg:after{content:"";pointer-events:none;background:radial-gradient(circle,#508cff2e 0%,#0000 70%);border-radius:50%;width:520px;height:520px;position:absolute;top:-160px;right:-160px}.lp-card{z-index:1;background:#fff;border-radius:16px;width:100%;max-width:420px;padding:3rem 2.5rem 2.5rem;position:relative;box-shadow:0 0 0 1px #ffffff14,0 20px 60px #050f3c73,0 4px 16px #050f3c33}.lp-card:before{content:"";background:linear-gradient(90deg,#0000,#2563eb,#60a5fa,#2563eb,#0000);border-radius:0 0 4px 4px;height:3px;position:absolute;top:0;left:10%;right:10%}.lp-logo-row{flex-direction:column;align-items:center;gap:.75rem;margin-bottom:2rem;display:flex}.lp-logo{object-fit:contain;border-radius:12px;width:60px;height:60px}.lp-system-name{color:#0f172a;text-align:center;letter-spacing:-.01em;font-size:16px;font-weight:700;line-height:1.4}.lp-system-sub{color:#94a3b8;text-align:center;letter-spacing:.03em;font-size:12px;font-weight:400}.lp-divider{background:linear-gradient(90deg,#0000,#e2e8f0,#0000);height:1px;margin:0 0 1.75rem}.lp-form{flex-direction:column;gap:1.25rem;display:flex}.lp-field{flex-direction:column;gap:6px;display:flex}.lp-label{color:#475569;letter-spacing:.08em;text-transform:uppercase;font-size:11px;font-weight:600}.lp-input{color:#0f172a;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:8px;outline:none;width:100%;padding:11px 14px;font-family:Inter,sans-serif;font-size:14px;font-weight:400;transition:border-color .2s,background .2s,box-shadow .2s}.lp-input:focus{background:#fff;border-color:#2563eb;box-shadow:0 0 0 4px #2563eb14}.lp-input::placeholder{color:#cbd5e1;font-weight:300}.lp-btn{letter-spacing:.06em;text-transform:uppercase;color:#fff;cursor:pointer;background:linear-gradient(135deg,#1d4ed8 0%,#2563eb 50%,#3b82f6 100%);border:none;border-radius:8px;width:100%;margin-top:.25rem;padding:13px;font-family:Inter,sans-serif;font-size:13.5px;font-weight:600;transition:all .2s;position:relative;overflow:hidden;box-shadow:0 4px 14px #2563eb66}.lp-btn:after{content:"";pointer-events:none;background:linear-gradient(135deg,#ffffff1f,#0000);position:absolute;inset:0}.lp-btn:hover{background:linear-gradient(135deg,#1e40af 0%,#1d4ed8 50%,#2563eb 100%);transform:translateY(-1px);box-shadow:0 6px 20px #2563eb80}.lp-btn:active{transform:translateY(0);box-shadow:0 2px 8px #2563eb59}.lp-footer{z-index:1;flex-direction:column;align-items:center;gap:3px;display:flex;position:relative}.lp-footer-line{color:#ffffff59;text-align:center;letter-spacing:.04em;font-size:11px;font-weight:400}.lp-error{color:#dc2626;text-align:center;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:9px 12px;font-family:Inter,sans-serif;font-size:12.5px;font-weight:500}.lp-btn:disabled{opacity:.65;cursor:not-allowed;box-shadow:none;transform:none}.lp-input:disabled{opacity:.6;cursor:not-allowed}.dp-bg{background:#f0f6ff;width:100%;min-height:100vh;font-family:Inter,sans-serif;display:flex}.dp-main{flex:1;padding:2rem;overflow-y:auto}@media (width<=767px){.dp-bg{flex-direction:column}.dp-main{padding:1.25rem}}.snb-logo{object-fit:contain;filter:drop-shadow(0 2px 6px #00000040);border-radius:8px;flex-shrink:0;width:34px;height:34px}.snb-header-text{flex-direction:column;gap:1px;display:flex}.snb-system-name{color:#fff;letter-spacing:.04em;font-size:15px;font-weight:700;line-height:1.2}.snb-system-sub{color:#ffffff73;letter-spacing:.03em;font-size:10.5px;font-weight:400}.snb-divider{background:linear-gradient(90deg,#0000,#ffffff1a,#0000);height:1px;margin:0 1.25rem}.snb-nav{z-index:1;flex-direction:column;flex:1;gap:.25rem;padding:1rem .75rem;display:flex;position:relative;overflow-y:auto}.snb-nav::-webkit-scrollbar{width:0}.snb-group{flex-direction:column;gap:2px;margin-bottom:.75rem;display:flex}.snb-group-label{color:#ffffff4d;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;padding:0 .6rem;font-size:9.5px;font-weight:700}.snb-item{color:#fff9;letter-spacing:.01em;border-radius:7px;align-items:center;gap:.7rem;padding:9px 12px;font-size:13px;font-weight:500;text-decoration:none;transition:background .15s,color .15s;display:flex;position:relative}.snb-item:hover{color:#ffffffe6;background:#ffffff14}.snb-item--active{color:#fff;background:#ffffff21;font-weight:600}.snb-item--active:before{content:"";background:#60a5fa;border-radius:0 3px 3px 0;width:3px;position:absolute;top:20%;bottom:20%;left:0}.snb-item-icon{opacity:.85;flex-shrink:0;justify-content:center;align-items:center;display:flex}.snb-item--active .snb-item-icon{opacity:1}.snb-item-label{flex:1}.snb-bottom{z-index:1;flex-direction:column;gap:.5rem;padding:0 .75rem 1.25rem;display:flex;position:relative}.snb-bottom .snb-divider{margin:0 .5rem .5rem}.snb-logout{cursor:pointer;color:#ffffff80;letter-spacing:.01em;background:0 0;border:none;border-radius:7px;align-items:center;gap:.7rem;width:100%;padding:9px 12px;font-family:Inter,sans-serif;font-size:13px;font-weight:500;transition:background .15s,color .15s;display:flex}.snb-logout:hover{color:#fca5a5;background:#ef444426}.snb-sidebar{background:linear-gradient(175deg,#0a1f5c 0%,#0e2d8a 50%,#0f2e8f 100%);flex-direction:column;width:240px;min-width:240px;height:100vh;font-family:Inter,sans-serif;display:flex;position:sticky;top:0;overflow:hidden}.snb-sidebar:before{content:"";pointer-events:none;background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:32px 32px;position:absolute;inset:0}.snb-sidebar:after{content:"";pointer-events:none;background:radial-gradient(circle,#3b82f626 0%,#0000 70%);border-radius:50%;width:200px;height:200px;position:absolute;bottom:-60px;right:-60px}.snb-header{z-index:1;align-items:center;gap:.75rem;padding:1.5rem 1.25rem 1.25rem;display:flex;position:relative}.snb-topbar{display:none}@media (width<=767px){.snb-sidebar{display:none}.snb-topbar{z-index:100;box-sizing:border-box;background:linear-gradient(90deg,#0a1f5c 0%,#0e2d8a 100%);justify-content:space-between;align-items:center;width:100%;height:56px;padding:0 1rem;display:flex;position:sticky;top:0;box-shadow:0 2px 12px #00000040}.snb-topbar-brand{align-items:center;gap:.6rem;display:flex}.snb-topbar-nav{align-items:center;gap:4px;display:flex}.snb-top-item{color:#ffffff8c;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;text-decoration:none;transition:background .15s,color .15s;display:flex;position:relative}.snb-top-item:hover{color:#ffffffe6;background:#ffffff14}.snb-top-item--active{color:#fff;background:#ffffff21}.snb-top-item--active:after{content:"";background:#60a5fa;border-radius:3px 3px 0 0;height:3px;position:absolute;bottom:0;left:20%;right:20%}.snb-top-logout{cursor:pointer;color:#ffffff80;background:0 0;border:none;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;transition:background .15s,color .15s;display:flex}.snb-top-logout:hover{color:#fca5a5;background:#ef444426}}.up-root{box-sizing:border-box;min-height:100%;padding:2rem;font-family:DM Sans,sans-serif;animation:.3s both up-page-in}@keyframes up-page-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.up-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.up-header-left{align-items:center;gap:.875rem;display:flex}.up-header-icon{color:#fff;background:linear-gradient(135deg,#1a56db 0%,#2563eb 100%);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex;box-shadow:0 4px 14px #1a56db4d}.up-title{color:#0f2a5e;letter-spacing:-.02em;margin:0;font-size:1.375rem;font-weight:700;line-height:1.2}.up-subtitle{color:#6b7fa3;margin:.2rem 0 0;font-size:.8125rem}.up-add-btn{color:#fff;cursor:pointer;white-space:nowrap;letter-spacing:.01em;background:linear-gradient(135deg,#1a56db 0%,#2563eb 100%);border:none;border-radius:10px;align-items:center;gap:.45rem;padding:.6rem 1.15rem;font-family:DM Sans,sans-serif;font-size:.8125rem;font-weight:600;transition:transform .15s,box-shadow .15s;display:inline-flex;box-shadow:0 3px 10px #1a56db47}.up-add-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px #1a56db5c}.up-add-btn:active{transform:translateY(0)}.up-stats{background:#fff;border:1px solid #dce8f9;border-radius:12px;align-items:center;gap:0;margin-bottom:1.25rem;padding:.875rem 1.5rem;display:flex;box-shadow:0 1px 6px #0f2a5e0d}.up-stat{flex-direction:column;gap:.15rem;padding:0 1.5rem;display:flex}.up-stat:first-child{padding-left:0}.up-stat-value{color:#0f2a5e;letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:1.375rem;font-weight:700;line-height:1}.up-stat-label{color:#8da6cc;text-transform:uppercase;letter-spacing:.04em;font-size:.73rem;font-weight:500}.up-stat-divider{background:#dce8f9;flex-shrink:0;width:1px;height:32px}.up-card{background:#fff;border:1px solid #dce8f9;border-radius:14px;overflow:hidden;box-shadow:0 2px 16px #0f2a5e0f}.up-toolbar{background:#fafcff;border-bottom:1px solid #eaf1fb;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:1rem 1.25rem;display:flex}.up-search-wrap{flex:1;min-width:200px;max-width:320px;position:relative}.up-search-icon{color:#8da6cc;pointer-events:none;width:15px;height:15px;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}.up-search{color:#1e3a6e;box-sizing:border-box;background:#fff;border:1.5px solid #d0dff5;border-radius:9px;outline:none;width:100%;padding:.52rem .75rem .52rem 2.2rem;font-family:DM Sans,sans-serif;font-size:.8125rem;transition:border-color .18s,box-shadow .18s}.up-search:focus{border-color:#1a56db;box-shadow:0 0 0 3px #1a56db1a}.up-toolbar-right{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.up-filter-select,.up-rows-select{color:#1e3a6e;cursor:pointer;background:#fff;border:1.5px solid #d0dff5;border-radius:9px;outline:none;padding:.5rem .75rem;font-family:DM Sans,sans-serif;font-size:.8125rem;transition:border-color .18s,box-shadow .18s}.up-filter-select:focus,.up-rows-select:focus{border-color:#1a56db;box-shadow:0 0 0 3px #1a56db1a}.up-rows-label{color:#6b7fa3;white-space:nowrap;font-size:.8rem}.up-table-wrap{overflow-x:auto}.up-table{border-collapse:collapse;table-layout:fixed;width:100%;font-size:.8125rem}.up-table th{text-align:left;color:#7b95c2;text-transform:uppercase;letter-spacing:.06em;-webkit-user-select:none;user-select:none;white-space:nowrap;background:#f5f8ff;border-bottom:1px solid #dce8f9;padding:.7rem 1rem;font-size:.72rem;font-weight:600;position:relative}.up-table th.sortable{cursor:pointer}.up-table th.sortable:hover{color:#1a56db;background:#eef4ff}.up-th-inner{align-items:center;gap:.35rem;display:flex}.up-sort-icon{opacity:.4;flex-shrink:0;width:13px;height:13px}.up-table th.sort-active .up-sort-icon{opacity:1;color:#1a56db}.up-resize-handle{cursor:col-resize;background:0 0;border-radius:2px;width:4px;height:60%;transition:background .15s;position:absolute;top:20%;right:0}.up-resize-handle:hover,.up-resize-handle.resizing{background:#1a56db}.up-table td{color:#263d68;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid #eef4fc;padding:.75rem 1rem;font-size:.8125rem;overflow:hidden}.up-table tr:last-child td{border-bottom:none}.up-table tbody tr{transition:background .12s}.up-table tbody tr:hover{background:#f5f9ff}.up-name-cell{align-items:center;gap:.65rem;display:flex}.up-avatar{color:#1d4ed8;letter-spacing:0;background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;font-size:.75rem;font-weight:700;display:inline-flex}.up-role-badge{letter-spacing:.02em;border-radius:20px;align-items:center;padding:.22rem .65rem;font-size:.71rem;font-weight:600;display:inline-flex}.up-role-badge.admin{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe}.up-role-badge.user{color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0}.up-actions{align-items:center;gap:.4rem;display:flex}.up-action-btn{cursor:pointer;border:1.5px solid #0000;border-radius:7px;align-items:center;gap:.3rem;padding:.35rem .7rem;font-family:DM Sans,sans-serif;font-size:.74rem;font-weight:600;transition:all .15s;display:inline-flex}.up-action-btn.edit{color:#1d4ed8;background:#eff6ff;border-color:#bfdbfe}.up-action-btn.edit:hover{color:#fff;background:#1a56db;border-color:#1a56db;transform:translateY(-1px);box-shadow:0 3px 8px #1a56db40}.up-action-btn.delete{color:#dc2626;background:#fff5f5;border-color:#fecaca}.up-action-btn.delete:hover{color:#fff;background:#dc2626;border-color:#dc2626;transform:translateY(-1px);box-shadow:0 3px 8px #dc262640}.up-loading{color:#8da6cc;justify-content:center;align-items:center;gap:.65rem;padding:2.5rem 1rem;font-size:.875rem;display:flex}.up-spinner{border:2.5px solid #dce8f9;border-top-color:#1a56db;border-radius:50%;width:18px;height:18px;animation:.7s linear infinite up-spin;display:inline-block}@keyframes up-spin{to{transform:rotate(360deg)}}.up-empty{text-align:center;color:#8da6cc;padding:3rem 1rem;font-size:.875rem}.up-pagination{background:#fafcff;border-top:1px solid #eaf1fb;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.9rem 1.25rem;display:flex}.up-page-info{color:#6b7fa3;font-size:.79rem}.up-page-btns{align-items:center;gap:.3rem;display:flex}.up-page-btn{color:#1e3a6e;cursor:pointer;background:#fff;border:1.5px solid #d0dff5;border-radius:8px;justify-content:center;align-items:center;min-width:32px;height:32px;padding:0 .5rem;font-family:DM Sans,sans-serif;font-size:.8125rem;transition:all .15s;display:inline-flex}.up-page-btn:hover:not(:disabled){color:#1a56db;background:#eff6ff;border-color:#1a56db}.up-page-btn.active{color:#fff;background:#1a56db;border-color:#1a56db;font-weight:600}.up-page-btn:disabled{opacity:.35;cursor:not-allowed}.up-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#08143773;justify-content:center;align-items:center;padding:1rem;animation:.18s up-fade-in;display:flex;position:fixed;inset:0}@keyframes up-fade-in{0%{opacity:0}to{opacity:1}}.up-modal{background:#fff;border-radius:18px;width:100%;max-width:440px;padding:2rem;animation:.22s cubic-bezier(.34,1.56,.64,1) up-slide-up;box-shadow:0 24px 64px #08143738,0 0 0 1px #dce8f9cc}@keyframes up-slide-up{0%{opacity:0;transform:translateY(24px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.up-modal-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.up-modal-title{color:#0f2a5e;letter-spacing:-.02em;margin:0;font-size:1.0625rem;font-weight:700}.up-modal-close{cursor:pointer;color:#8da6cc;background:0 0;border:none;border-radius:7px;align-items:center;padding:.25rem;transition:color .15s,background .15s;display:flex}.up-modal-close:hover{color:#dc2626;background:#fff5f5}.up-field{flex-direction:column;gap:.35rem;margin-bottom:1rem;display:flex}.up-label{color:#3d5a8a;letter-spacing:.01em;font-size:.78rem;font-weight:600}.up-input,.up-select{color:#1e3a6e;background:#f7faff;border:1.5px solid #d0dff5;border-radius:10px;outline:none;padding:.6rem .875rem;font-family:DM Sans,sans-serif;font-size:.875rem;transition:border-color .18s,box-shadow .18s,background .18s}.up-input:focus,.up-select:focus{background:#fff;border-color:#1a56db;box-shadow:0 0 0 3px #1a56db1a}.up-input:disabled{color:#8da6cc;cursor:not-allowed;background:#eef4fc}.up-field-hint{color:#8da6cc;margin-top:.1rem;font-size:.73rem;line-height:1.4}.up-modal-error{color:#dc2626;background:#fef2f2;border:1.5px solid #fecaca;border-radius:9px;margin-bottom:1rem;padding:.55rem .875rem;font-size:.8125rem}.up-modal-footer{justify-content:flex-end;gap:.6rem;margin-top:1.5rem;display:flex}.up-btn-cancel{color:#3d5a8a;cursor:pointer;background:#f7faff;border:1.5px solid #d0dff5;border-radius:9px;padding:.58rem 1.1rem;font-family:DM Sans,sans-serif;font-size:.8125rem;font-weight:500;transition:all .15s}.up-btn-cancel:hover{background:#eaf1fb;border-color:#aac3e8}.up-btn-submit{color:#fff;cursor:pointer;background:linear-gradient(135deg,#1a56db 0%,#2563eb 100%);border:none;border-radius:9px;padding:.58rem 1.25rem;font-family:DM Sans,sans-serif;font-size:.8125rem;font-weight:600;transition:transform .15s,box-shadow .15s;box-shadow:0 3px 10px #1a56db47}.up-btn-submit:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 16px #1a56db5c}.up-btn-submit:disabled{opacity:.6;cursor:not-allowed}.up-delete-body{color:#3d5a8a;margin-bottom:.5rem;font-size:.875rem;line-height:1.65}.up-delete-name{color:#0f2a5e;font-weight:700}.up-btn-delete{color:#fff;cursor:pointer;background:linear-gradient(135deg,#dc2626 0%,#ef4444 100%);border:none;border-radius:9px;padding:.58rem 1.25rem;font-family:DM Sans,sans-serif;font-size:.8125rem;font-weight:600;transition:transform .15s,box-shadow .15s;box-shadow:0 3px 10px #dc262647}.up-btn-delete:hover{transform:translateY(-1px);box-shadow:0 5px 16px #dc26265c}@media (width<=767px){.up-root{padding:1.25rem}.up-stats{gap:0;padding:.75rem 1rem}.up-stat{padding:0 1rem}.up-toolbar{flex-direction:column;align-items:stretch}.up-search-wrap{max-width:100%}.up-toolbar-right{justify-content:space-between}.up-pagination{text-align:center;flex-direction:column;align-items:center}.up-header-icon{display:none}}