*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--black:#000;--white:#fff;--g50:#fafafa;--g100:#f5f5f5;--g200:#e5e5e5;--g300:#d4d4d4;--g400:#a3a3a3;--g500:#737373;--g600:#525252;--font:'Segoe UI',-apple-system,BlinkMacSystemFont,sans-serif;--radius:8px}
body{font-family:var(--font);background:var(--white);color:var(--black);font-size:14px;line-height:1.5}

.login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--g50)}
.login-box{background:var(--white);border:1px solid var(--g200);border-radius:12px;padding:48px 40px;width:100%;max-width:380px;text-align:center}
.login-logo{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:8px;font-size:24px;font-weight:700;letter-spacing:-0.5px}
.login-subtitle{color:var(--g500);margin-bottom:32px;font-size:14px}
.login-form{display:flex;flex-direction:column;gap:12px}
.login-form input{padding:10px 14px;border:1px solid var(--g300);border-radius:var(--radius);font-size:14px;font-family:var(--font);outline:none;transition:border-color .2s}
.login-form input:focus{border-color:var(--black)}
.login-form button{padding:10px 14px;background:var(--black);color:var(--white);border:none;border-radius:var(--radius);font-size:14px;font-weight:600;font-family:var(--font);cursor:pointer;transition:opacity .2s}
.login-form button:hover{opacity:.85}
.login-error{color:#dc2626;font-size:13px;margin-top:12px}

.header{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;border-bottom:1px solid var(--g200)}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;letter-spacing:-0.5px}
.btn-text{background:none;border:none;color:var(--g500);font-size:13px;font-family:var(--font);cursor:pointer}
.btn-text:hover{color:var(--black)}

.toolbar{display:flex;align-items:center;gap:12px;padding:20px 32px}
.search-box{position:relative;flex:1;max-width:600px}
.search-box input{width:100%;padding:10px 14px 10px 40px;border:1px solid var(--g300);border-radius:var(--radius);font-size:14px;font-family:var(--font);outline:none;transition:border-color .2s}
.search-box input:focus{border-color:var(--black)}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--g400);pointer-events:none}
.toolbar-actions{display:flex;gap:8px;margin-left:auto}
.btn{padding:9px 18px;border:none;border-radius:var(--radius);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;white-space:nowrap;transition:opacity .2s}
.btn:hover{opacity:.85}
.btn-dark{background:var(--black);color:var(--white)}

.table-wrapper{overflow:auto;margin:0 32px;border:1px solid var(--g200);border-radius:var(--radius);max-height:calc(100vh - 200px)}
table{width:100%;border-collapse:collapse;min-width:1800px}
thead th{position:sticky;top:0;background:var(--g50);padding:12px 16px;text-align:left;font-weight:600;font-size:13px;color:var(--g600);border-bottom:1px solid var(--g200);white-space:nowrap;cursor:pointer;user-select:none}
thead th:hover{color:var(--black)}
thead th .sort-arrow{margin-left:4px;font-size:11px}
tbody td{padding:10px 16px;border-bottom:1px solid var(--g100);font-size:13px;white-space:nowrap}
tbody tr:hover{background:var(--g50)}

.sticky-col{position:sticky;left:0;z-index:2;background:var(--white);min-width:160px}
thead .sticky-col{background:var(--g50);z-index:4}
tbody tr:hover .sticky-col{background:var(--g50)}
.sticky-col-2{position:sticky;left:160px;z-index:2;background:var(--white);min-width:200px}
thead .sticky-col-2{background:var(--g50);z-index:4}
tbody tr:hover .sticky-col-2{background:var(--g50)}

.pagination{display:flex;align-items:center;justify-content:space-between;padding:16px 32px}
.pagination-left,.pagination-right{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--g600)}
.pagination select{padding:6px 10px;border:1px solid var(--g300);border-radius:6px;font-size:13px;font-family:var(--font);background:var(--white);cursor:pointer}
.btn-page{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--g300);border-radius:6px;background:var(--white);font-size:18px;cursor:pointer;color:var(--g600);transition:all .15s}
.btn-page:hover:not(:disabled){border-color:var(--black);color:var(--black)}
.btn-page:disabled{opacity:.3;cursor:default}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:100}
.modal-content{background:var(--white);border-radius:12px;width:90%;max-width:600px;max-height:80vh;display:flex;flex-direction:column}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--g200)}
.modal-header h2{font-size:16px;font-weight:600}
.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:var(--g400);line-height:1}
.modal-close:hover{color:var(--black)}
.modal-body{padding:24px;overflow-y:auto;font-size:13px}
.text-muted{color:var(--g500)}
[hidden]{display:none!important}

@media(max-width:768px){
.toolbar{flex-direction:column;padding:16px}
.search-box{max-width:100%}
.toolbar-actions{width:100%;justify-content:flex-end}
.header{padding:12px 16px}
.table-wrapper{margin:0 16px}
.pagination{padding:12px 16px;flex-wrap:wrap;gap:8px}
.sticky-col{position:static}
.sticky-col-2{position:static}
}