:root{--green:var(--teal);--border:var(--line)}*{box-sizing:border-box}body{margin:0}a{color:var(--green)}button,input,select,textarea{font:inherit}button,.button{border:1px solid var(--border);border-radius:9px;background:white;color:var(--ink);padding:10px 16px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}button:disabled{opacity:.55;cursor:wait}.primary{background:var(--green);border-color:var(--green);color:white}.staff-header{background:white;border-bottom:1px solid var(--border);padding:20px max(20px,calc((100vw - 1140px)/2));display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);max-width:550px}.brand img{width:52px;height:52px;object-fit:contain;flex-shrink:0}.brand strong{font-size:17px;line-height:1.5}.staff-header nav{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:14px}.staff-main{max-width:1140px;margin:32px auto;padding:0 20px;min-height:75vh}.panel{background:white;border:1px solid var(--border);border-radius:16px;padding:28px;margin-bottom:24px;box-shadow:0 4px 18px #193c2410}.auth-card{max-width:510px;margin:40px auto}.eyebrow{text-transform:uppercase;color:var(--green);font-size:13px;letter-spacing:1px;margin:0}h1{font-size:30px;margin:8px 0 16px;line-height:1.4}h2{font-size:20px;line-height:1.5;margin-top:0}.form-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}label{display:grid;gap:6px;font-size:15px}input{border:1px solid #bfd4e1;border-radius:8px;padding:11px;width:100%;min-width:0;color:var(--ink);background:white}input:focus,button:focus-visible,a:focus-visible{outline:3px solid #8bd4d7;outline-offset:2px}.check{display:flex;gap:10px;align-items:flex-start}.check input{width:18px;height:18px;margin:4px 0;flex-shrink:0}fieldset{border:1px solid var(--border);border-radius:10px;padding:16px;display:grid;gap:10px}.muted{color:var(--muted);font-size:14px}.notice{background:#e8f3ed;border:1px solid #b6d8c4;border-radius:10px;padding:16px;margin-bottom:22px;overflow-wrap:anywhere}.notice.error{color:#932924;background:#fff0ec;border-color:#e6b5ac}.success{color:#166747;background:#e8f3ed;padding:12px;border-radius:8px}.email,.secret{overflow-wrap:anywhere}.secret{display:block;background:var(--surface-soft,#f5f9fc);padding:12px;border-radius:8px;font-family:monospace;font-size:16px}.qr{margin:12px auto;max-width:280px;background:white}.qr svg{display:block;width:100%;height:auto}.recovery-grid{display:grid;grid-template-columns:1fr;gap:8px;margin:20px 0}.recovery-grid code{font-size:14px;overflow-wrap:anywhere;background:var(--surface-soft,#f5f9fc);padding:9px;border-radius:7px}.destination-grid,.security-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.account-list{display:grid;gap:16px}.account-row{padding:20px;border:1px solid var(--border);border-radius:12px;overflow-wrap:anywhere}.account-row h3{margin:0}.account-row .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.account-row fieldset{margin-top:16px}.staff-footer{text-align:center;color:var(--muted);font-size:13px;padding:20px}.skip{position:absolute;top:-60px;left:10px;background:white;padding:10px;z-index:2}.skip:focus{top:10px}[hidden]{display:none!important}@media(max-width:900px){.staff-header{flex-direction:column;align-items:flex-start}.security-grid,.destination-grid{grid-template-columns:1fr}}@media(max-width:480px){.staff-header{padding:16px}.brand strong{font-size:15px}.staff-main{margin:22px auto;padding:0 14px}.panel{padding:20px}.auth-card{margin:20px auto}h1{font-size:25px}.staff-header nav{gap:12px}.staff-header nav button{padding:6px 10px}.account-row{padding:14px}}

.auth-card .form-grid{margin-top:24px}.staff-header .brand strong{font-size:20px}.staff-main .panel{box-shadow:var(--shadow)}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.account-list{display:block}.accounts-table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;text-align:left}.accounts-table th{padding:14px 16px;background:var(--surface-soft,#f5f9fc);color:var(--muted);font-weight:600;border-bottom:1px solid var(--border)}.accounts-table th:first-child{border-radius:10px 0 0 0}.accounts-table th:last-child{border-radius:0 10px 0 0}.accounts-table td{padding:18px 16px;vertical-align:top;border-bottom:1px solid var(--border)}.accounts-table .account-row{border:0;border-radius:0;padding:0}.accounts-table tbody tr:hover{background:#f8fbfc}.account-person{width:26%;overflow-wrap:anywhere}.account-person strong,.account-person span{display:block}.account-person strong{font-size:15px;margin-bottom:5px}.account-person span{color:var(--muted)}.account-status{display:flex;flex-wrap:wrap;gap:6px;max-width:190px}.account-badge{display:inline-flex;padding:4px 9px;border-radius:20px;font-size:12px;line-height:1.5;white-space:nowrap}.account-badge.is-ready{background:#e7f5ee;color:#176344}.account-badge.is-pending{background:#fff3df;color:#86560b}.accounts-table .account-permissions{border:0;padding:0;margin:0;gap:7px;min-width:180px}.account-permissions .check{font-size:13px;gap:8px}.account-permissions input{width:16px;height:16px;margin-top:2px;accent-color:var(--green)}.account-actions{display:flex;gap:7px;flex-wrap:nowrap}.account-action{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;border-radius:10px;background:#f3f8fa;color:#176978;border-color:#d8e6eb;transition:background .15s,box-shadow .15s}.account-action svg{width:19px;height:19px;flex-shrink:0}.account-action:hover,.account-action:focus-visible{background:#e2f0f3;box-shadow:0 2px 7px #17697818}.account-action--disable{color:#b34140;background:#fff5f3;border-color:#f0d8d4}.account-action--disable:hover{background:#fde9e5}.account-action:disabled{cursor:not-allowed}.account-tooltip{position:absolute;bottom:calc(100% + 9px);right:0;background:#203943;color:white;padding:6px 10px;border-radius:7px;font-size:12px;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;z-index:5;box-shadow:0 3px 10px #0002}.account-action:hover .account-tooltip,.account-action:focus-visible .account-tooltip{opacity:1;visibility:visible}
@media(max-width:1100px){.accounts-table th,.accounts-table td{padding:14px 10px}.account-actions{gap:5px}.account-action{width:34px;height:34px}}
@media(max-width:760px){.accounts-table,.accounts-table tbody{display:block}.accounts-table thead{display:none}.accounts-table .account-row{display:block;border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:14px;background:white}.accounts-table td{display:block;border:0;padding:9px 0;width:auto}.accounts-table td::before{content:attr(data-label);display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:7px}.accounts-table .account-person{padding-top:0}.account-status{max-width:none}.accounts-table .account-permissions{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}.account-actions{gap:10px}.account-action{width:40px;height:40px}.accounts-table tbody tr:hover{background:white}}

.staff-accounts-page .system-shell{min-height:calc(100vh - 164px)}
.staff-accounts-page .system-main{background:#eff8fc}
.staff-accounts-page .staff-main .panel{border-color:#e3eef5;box-shadow:0 6px 22px #123e5710}
.staff-accounts-page .admin-accounts-footer{margin:0}
.staff-accounts-page .accounts-breadcrumb{display:flex;align-items:center;gap:7px;margin:0 0 18px;color:#5b7892;font-size:13px}
.staff-accounts-page .accounts-breadcrumb a{color:#345d80;text-decoration:none}
.staff-accounts-page .accounts-breadcrumb i{font-size:17px;color:#1585ae}
.staff-accounts-page .accounts-heading{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.staff-accounts-page .accounts-heading-icon{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:50%;background:#dceeff;color:#0873ce;font-size:31px}
.staff-accounts-page .accounts-heading h1{margin:0 0 4px;color:#0d3d79}
.staff-accounts-page .accounts-heading p,.staff-accounts-page .accounts-panel-heading p{margin:0;color:#607e9d;font-size:14px}
.staff-accounts-page .accounts-panel-heading{margin-bottom:20px}
.staff-accounts-page .accounts-panel-heading h2{margin-bottom:4px}
.staff-accounts-page .accounts-invite-panel .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.staff-accounts-page .accounts-invite-panel fieldset{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
.staff-accounts-page .accounts-invite-panel fieldset legend{font-weight:700;color:#0d3d79}
.staff-accounts-page .accounts-invite-panel .primary{justify-self:start;background:#0876dc;border-color:#0876dc}
.staff-accounts-page .accounts-list-panel h2{margin-bottom:18px;color:#0d3d79}
.staff-accounts-page .accounts-related{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
@media(max-width:600px){.staff-accounts-page .accounts-heading{align-items:flex-start}.staff-accounts-page .accounts-heading-icon{width:46px;height:46px;font-size:25px}.staff-accounts-page .accounts-invite-panel .form-grid,.staff-accounts-page .accounts-invite-panel fieldset{grid-template-columns:1fr}}

.staff-accounts-page .system-main{padding:0 24px 28px;background:#f3f9fb}
.staff-accounts-page .accounts-hero{margin:0 -24px 0;padding:20px 24px 22px;background:linear-gradient(90deg,#f5fafff8 0%,#f8fbf8dc 53%,#fff7e2a8 100%),url('/admin/assets/nong-khai-river-header.png') center 44%/cover no-repeat}
.staff-accounts-page .accounts-breadcrumb{margin:0 0 19px;color:#17436d;font-weight:700}
.staff-accounts-page .accounts-breadcrumb a{display:inline-flex;align-items:center;color:#17436d}
.staff-accounts-page .accounts-heading{margin:0;gap:20px}
.staff-accounts-page .accounts-heading-icon,.staff-accounts-page .accounts-section-icon{display:grid;place-items:center;flex:none;border-radius:50%;background:#008e94;color:#fff}
.staff-accounts-page .accounts-heading-icon{width:66px;height:66px;font-size:36px}
.staff-accounts-page .accounts-heading h1{font-size:30px;color:#063d67}
.staff-accounts-page .accounts-heading p{font-size:15px;color:#4c6c87}
.staff-accounts-page .accounts-help{display:inline-flex;align-items:center;gap:7px;margin-left:auto;padding:10px 13px;border:1px solid #ccdfec;border-radius:7px;background:#fff;color:#16446d;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}
.staff-accounts-page .accounts-help i{font-size:19px}
.staff-accounts-page .staff-main .panel{margin-bottom:18px;padding:17px;border:1px solid #e1ebf1;border-radius:13px;box-shadow:0 5px 18px #123e5710}
.staff-accounts-page .accounts-invite-panel{margin-top:0}
.staff-accounts-page .accounts-panel-heading,.staff-accounts-page .accounts-list-heading{display:flex;align-items:center;gap:16px;margin:0 0 17px}
.staff-accounts-page .accounts-section-icon{width:59px;height:59px;font-size:30px}
.staff-accounts-page .accounts-panel-heading h2,.staff-accounts-page .accounts-list-heading h2{margin:0;color:#073d68;font-size:21px}
.staff-accounts-page .accounts-panel-heading p,.staff-accounts-page .accounts-list-heading p{margin:1px 0 0;font-size:13px;color:#5d7b96}
.staff-accounts-page .accounts-mfa-note{display:flex;align-items:center;gap:9px;max-width:300px;margin-left:auto;padding:10px 12px;border-radius:9px;background:#eaf7fb;color:#17496d}
.staff-accounts-page .accounts-mfa-note i{font-size:31px;color:#008d94}
.staff-accounts-page .accounts-mfa-note strong,.staff-accounts-page .accounts-mfa-note small{display:block;line-height:1.35}
.staff-accounts-page .accounts-mfa-note strong{font-size:12px}.staff-accounts-page .accounts-mfa-note small{font-size:11px}
.staff-accounts-page .accounts-invite-panel .form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 15px;align-items:end}
.staff-accounts-page .accounts-invite-panel label{font-size:14px;font-weight:700;color:#164265}
.staff-accounts-page .accounts-invite-panel label>span{color:#cf2525}
.staff-accounts-page .accounts-invite-panel input,.staff-accounts-page .accounts-invite-panel select{height:43px;border:1px solid #c9dce9;border-radius:6px;background:#fff;font-size:14px;font-weight:400}
.staff-accounts-page .accounts-extra-permissions{grid-column:1/3;align-self:center;color:#008e96;font-size:14px;font-weight:700}
.staff-accounts-page .accounts-extra-permissions summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;list-style:none}
.staff-accounts-page .accounts-extra-permissions summary::-webkit-details-marker{display:none}
.staff-accounts-page .accounts-extra-permissions[open] summary i{transform:rotate(180deg)}
.staff-accounts-page .accounts-extra-permissions fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px;padding:10px;border:1px solid #dbe8ef}
.staff-accounts-page .accounts-extra-permissions .check{display:flex;gap:7px;font-size:12px;font-weight:400}
.staff-accounts-page .accounts-extra-permissions .check input{width:16px;height:16px;margin:0;accent-color:#008e94}
.staff-accounts-page .accounts-invite-actions{grid-column:3;display:flex;justify-content:flex-end;gap:9px}
.staff-accounts-page .accounts-invite-actions button{min-height:40px;padding:7px 13px;font-size:14px;font-weight:700;white-space:nowrap}
.staff-accounts-page .accounts-invite-actions .primary,.staff-accounts-page .system-shell .staff-main .primary{background:#008e94;border-color:#008e94}
.staff-accounts-page .accounts-invite-actions i{font-size:18px;vertical-align:middle}
.staff-accounts-page .account-summary{display:flex;gap:10px;margin-left:auto}
.staff-accounts-page .account-summary-item{display:grid;min-width:116px;padding:8px 13px;border-radius:9px;background:#edf8f8;color:#087b85}
.staff-accounts-page .account-summary-item small{font-size:12px}.staff-accounts-page .account-summary-item strong{font-size:15px}
.staff-accounts-page .account-summary-item.active{background:#eaf8f2;color:#078651}.staff-accounts-page .account-summary-item.pending{background:#fff7ea;color:#b06c00}.staff-accounts-page .account-summary-item.disabled{background:#fff1f2;color:#bb2930}
.staff-accounts-page .accounts-export{white-space:nowrap;padding:9px 13px;font-size:13px;font-weight:700;color:#17466e}
.staff-accounts-page .accounts-export i{font-size:17px;vertical-align:middle}
.staff-accounts-page .accounts-filters{display:grid;grid-template-columns:1.6fr 1fr 1.1fr .9fr;gap:9px;margin-bottom:13px}
.staff-accounts-page .accounts-filters label{display:flex;align-items:center;gap:7px;min-width:0;height:40px;padding:0 10px;border:1px solid #d3e1eb;border-radius:7px;color:#16436c;font-size:12px;font-weight:700;white-space:nowrap}
.staff-accounts-page .accounts-filters .accounts-search i{font-size:21px}
.staff-accounts-page .accounts-filters input,.staff-accounts-page .accounts-filters select{width:100%;min-width:0;height:36px;padding:4px 2px;border:0;outline:none;background:transparent;color:#16436c;font-size:13px;font-weight:400}
.staff-accounts-page .accounts-table{font-size:12px;border:1px solid #dde9ef;border-radius:7px;overflow:hidden}
.staff-accounts-page .accounts-table th{padding:9px 10px;background:#eaf3f8;color:#16436c;font-size:12px;font-weight:700}
.staff-accounts-page .accounts-table td{padding:9px 10px;vertical-align:middle;border-bottom:1px solid #e4edf2}
.staff-accounts-page .accounts-table th+th,.staff-accounts-page .accounts-table td+td{border-left:1px solid #e4edf2}
.staff-accounts-page .account-person{display:flex;align-items:center;gap:8px;width:auto;min-width:140px}
.staff-accounts-page .account-person strong{margin:0;font-size:12px}
.staff-accounts-page .account-person-avatar{display:grid!important;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:#dceef5;color:#174f71;font-weight:700}
.staff-accounts-page .account-email{overflow-wrap:anywhere;color:#446c89}
.staff-accounts-page .account-badge{padding:4px 8px;border-radius:20px;font-size:11px;font-weight:700}
.staff-accounts-page .account-badge.is-active{background:#dff6e9;color:#06804c}.staff-accounts-page .account-badge.is-pending{background:#fff2dc;color:#a96600}.staff-accounts-page .account-badge.is-disabled{background:#fce7e8;color:#bd2228}
.staff-accounts-page .accounts-table .account-permissions{position:relative;display:flex;flex-wrap:wrap;gap:4px;min-width:250px;max-width:350px}
.staff-accounts-page .account-permissions .check{align-items:center;gap:3px;padding:3px 5px;border:1px solid #ddeaf0;border-radius:5px;color:#1c5475;font-size:10px;line-height:1.2;white-space:nowrap}
.staff-accounts-page .account-permissions input{width:12px;height:12px;margin:0;accent-color:#008e94}
.staff-accounts-page .account-verification{display:block;font-size:11px;font-weight:700;white-space:nowrap}.staff-accounts-page .account-verification.is-verified{color:#008e64}.staff-accounts-page .account-verification.is-unverified{color:#cd8000}
.staff-accounts-page .accounts-table td small{display:block;color:#6b8ba2;font-size:10px}.staff-accounts-page .account-last-login{white-space:nowrap;color:#6b8ba2}
.staff-accounts-page .account-actions{gap:5px}.staff-accounts-page .account-action{width:29px;height:29px;padding:5px;border-radius:6px}.staff-accounts-page .account-action svg{width:17px;height:17px}
.staff-accounts-page .accounts-pagination{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:11px;color:#507392;font-size:12px}.staff-accounts-page .accounts-page-controls{display:flex;gap:5px}.staff-accounts-page .accounts-page-controls button{min-width:30px;padding:4px 8px;border:1px solid #d6e6ef;border-radius:5px;color:#15537d}.staff-accounts-page .accounts-page-controls button.active{background:#008e94;color:#fff}
.staff-accounts-page .accounts-empty{padding:26px;text-align:center;color:#607e9d}
.staff-accounts-page .system-shell .staff-main{padding:0 24px 28px}
.staff-accounts-page .accounts-invite-panel .form-grid>label{display:block}
.staff-accounts-page .accounts-invite-panel .form-grid>label input,.staff-accounts-page .accounts-invite-panel .form-grid>label select{display:block;margin-top:5px}
.staff-accounts-page .account-summary-item{position:relative;padding-left:42px}
.staff-accounts-page .account-summary-item i{position:absolute;left:10px;top:50%;display:grid;place-items:center;width:24px;height:24px;transform:translateY(-50%);border-radius:50%;background:#ffffffa8;font-size:17px}
@media(max-width:1300px){.staff-accounts-page .account-summary-item{min-width:82px;padding:7px}.staff-accounts-page .account-summary-item strong{font-size:12px}.staff-accounts-page .accounts-list-heading{flex-wrap:wrap}.staff-accounts-page .account-summary{margin-left:0}.staff-accounts-page .accounts-export{margin-left:auto}.staff-accounts-page .account-list{overflow-x:auto}.staff-accounts-page .accounts-table{min-width:1000px}}
@media(max-width:800px){.staff-accounts-page .system-main{padding:0 14px 22px}.staff-accounts-page .accounts-hero{margin:0 -14px;padding:15px 14px}.staff-accounts-page .accounts-heading{align-items:flex-start}.staff-accounts-page .accounts-heading h1{font-size:24px}.staff-accounts-page .accounts-help{display:none}.staff-accounts-page .accounts-mfa-note{display:none}.staff-accounts-page .accounts-invite-panel .form-grid{grid-template-columns:1fr 1fr}.staff-accounts-page .accounts-extra-permissions{grid-column:1/-1}.staff-accounts-page .accounts-invite-actions{grid-column:1/-1}.staff-accounts-page .accounts-filters{grid-template-columns:1fr 1fr}.staff-accounts-page .accounts-table,.staff-accounts-page .accounts-table tbody{display:table;min-width:1000px}.staff-accounts-page .accounts-table thead{display:table-header-group}.staff-accounts-page .accounts-table tr{display:table-row}.staff-accounts-page .accounts-table td{display:table-cell}.staff-accounts-page .accounts-table td::before{display:none}}
@media(max-width:800px){.staff-accounts-page .system-shell .staff-main{padding:0 14px 22px}}
@media(max-width:600px){.staff-accounts-page .accounts-invite-panel .form-grid{grid-template-columns:1fr}.staff-accounts-page .accounts-invite-actions{justify-content:stretch}.staff-accounts-page .accounts-invite-actions button{flex:1}.staff-accounts-page .account-summary{width:100%;display:grid;grid-template-columns:repeat(2,1fr)}.staff-accounts-page .account-summary-item{min-width:0;padding:8px 8px 8px 38px}.staff-accounts-page .account-summary-item i{left:7px}.staff-accounts-page .account-summary-item small{font-size:11px}.staff-accounts-page .accounts-export{margin-left:0}.staff-accounts-page .accounts-filters{grid-template-columns:1fr}.staff-accounts-page .accounts-pagination{justify-content:space-between}}