.access-page-intro { margin-bottom:20px; }.access-page-intro h2 { margin:0 0 5px; font-size:24px; letter-spacing:-.025em; }.access-page-intro p:not(.eyebrow) { margin:0; color:var(--muted); }.access-create-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:start; margin-bottom:18px; }.access-panel { display:grid; gap:18px; padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 4px 14px #273c6908; }.access-panel-form { align-content:start; }.access-panel h2,.access-panel h3 { margin:0; font-size:19px; letter-spacing:-.015em; }.access-panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }.access-panel-heading .eyebrow { margin-bottom:4px; }.access-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; align-items:start; }.access-field { display:grid; grid-template-rows:18px 44px; gap:6px; min-width:0; color:#53627a; font-size:12px; font-weight:700; }.access-field-wide { grid-column:1 / -1; }.access-field input,.access-field select { width:100%; min-width:0; height:44px; padding:0 11px; border:1px solid #dce3ee; border-radius:8px; outline:0; background:white; color:var(--ink); font:14px Aptos,"Segoe UI Variable","Segoe UI",sans-serif; transition:border-color .18s ease,box-shadow .18s ease; }.access-field input:focus,.access-field select:focus { border-color:#7894ee; box-shadow:0 0 0 3px #4269e11a; }.access-field small { grid-row:3; color:#718098; font-size:11px; font-weight:500; }.field-error { color:var(--red) !important; }.permission-categories { display:grid; gap:12px; }.permission-category { overflow:hidden; border:1px solid #e0e6f0; border-radius:10px; }.category-toggle { display:flex; align-items:center; gap:9px; min-height:42px; padding:10px 12px; border-bottom:1px solid #e8edf4; background:#fafbfe; color:var(--ink); cursor:pointer; font-size:13px; font-weight:750; }.category-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:#e8edf4; }.category-options label { display:flex; align-items:center; gap:8px; min-height:40px; padding:9px 12px; background:white; color:#526078; cursor:pointer; font-size:12px; font-weight:650; transition:background .16s ease,color .16s ease; }.category-options label:hover { background:#f7f8ff; color:#3154c3; }.category-toggle input[type=checkbox],.category-options input[type=checkbox] { appearance:none; width:18px; height:18px; flex:0 0 18px; margin:0; border:1px solid #b9c4d5; border-radius:5px; background:white; cursor:pointer; transition:background .16s ease,border-color .16s ease; }.category-toggle input[type=checkbox]:checked,.category-options input[type=checkbox]:checked { border-color:#4269e1; background-color:#4269e1; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.4 12 13 4.8' fill='none' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-position:center; background-repeat:no-repeat; background-size:13px; }.category-toggle input[type=checkbox]:indeterminate { border-color:#4269e1; background:#4269e1; background-image:linear-gradient(white,white); background-position:center; background-repeat:no-repeat; background-size:9px 2px; }.category-toggle input[type=checkbox]:focus-visible,.category-options input[type=checkbox]:focus-visible { outline:3px solid #4269e133; outline-offset:2px; }.access-panel-form>.button { width:100%; min-height:44px; margin-top:2px; }.access-list { gap:14px; margin-bottom:18px; }.access-table-wrap { overflow-x:auto; }.access-list table { width:100%; min-width:700px; border-collapse:collapse; }.access-list th { padding:0 0 10px; border:0; color:#8995a8; text-align:left; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }.access-list td { padding:13px 0; border-top:1px solid var(--line); color:#526078; vertical-align:middle; }.access-list td strong { display:block; color:var(--ink); }.role-code { display:block; margin-top:2px; color:#8793a8; font:11px "SFMono-Regular",Consolas,monospace; }.permission-tag,.access-badge,.list-count { display:inline-flex; align-items:center; width:max-content; margin:2px 4px 2px 0; padding:4px 7px; border-radius:999px; background:#edf1fb; color:#3154c3; font-size:11px; font-weight:700; }.access-badge { background:#e8f8f0; color:#16845b; }.list-count { margin:0; min-width:28px; justify-content:center; background:#f0f3f8; color:#526078; }.muted { color:#8793a8; }.table-actions { display:flex; justify-content:flex-end; gap:7px; white-space:nowrap; }.table-actions form { display:contents; }.button-danger { background:#fcebed; color:var(--red); }.button-danger:hover { background:#f9dde1; }.access-message { margin:0 0 18px; padding:11px 14px; border-radius:9px; background:#e8f8f0; color:#16845b; }.access-message.error { background:#fcebed; color:#ba4751; }.access-edit-panel { max-width:760px; }.access-actions { display:flex; justify-content:flex-end; gap:10px; }.login-page { min-height:100vh; display:grid; place-items:center; padding:20px; background:#f5f7fb; color:#16243b; font:14px/1.45 Aptos,"Segoe UI Variable","Segoe UI",sans-serif; }.login-card { width:min(100%,400px); padding:34px; border:1px solid #e8edf4; border-radius:18px; background:#fff; box-shadow:0 16px 45px #263b671c; }.login-card h1 { margin:12px 0 4px; }.login-card>p { margin:0 0 22px; color:#718098; }.login-card form { display:grid; gap:15px; }.login-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#5279ed,#2d52c7); color:white; font:24px Georgia,serif; }.access-button { border:0; border-radius:9px; padding:11px 14px; background:#4269e1; color:white; cursor:pointer; font:inherit; font-weight:750; }.form-error { padding:10px; border-radius:8px; background:#fcebed; color:#ba4751; }.form-error ul { margin:0; padding-left:18px; }
@media (max-width:1120px) { .access-create-grid { grid-template-columns:1fr; } }
@media (max-width:520px) { .access-panel { padding:17px; }.access-form-grid,.category-options { grid-template-columns:1fr; }.access-field-wide { grid-column:auto; }.access-actions { flex-direction:column-reverse; }.access-actions .button { width:100%; }.login-card { box-sizing:border-box; } }

.category-heading { display:flex; align-items:stretch; background:#fafbfe; }.category-toggle { flex:1; border-bottom:0; background:transparent; }.category-expand { display:grid; place-items:center; width:42px; border:0; border-left:1px solid #e8edf4; background:transparent; color:#60708a; cursor:pointer; }.category-expand:hover { background:#f0f3fb; color:#3154c3; }.category-expand svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; transition:transform .18s ease; }.permission-category.is-expanded .category-heading { border-bottom:1px solid #e8edf4; }.permission-category.is-expanded .category-expand svg { transform:rotate(180deg); }.category-options[hidden] { display:none; }.category-toggle input[type=checkbox]:focus-visible,.category-options input[type=checkbox]:focus-visible,.category-expand:focus-visible { outline:3px solid #4269e133; outline-offset:2px; }.role-select { position:relative; min-width:0; }.role-select-native { position:absolute; width:1px !important; height:1px !important; margin:-1px !important; padding:0 !important; overflow:hidden; clip:rect(0 0 0 0); border:0 !important; white-space:nowrap; }.role-select-trigger { display:flex; align-items:center; justify-content:space-between; width:100%; height:44px; padding:0 11px; border:1px solid #dce3ee; border-radius:8px; outline:0; background:#fff; color:var(--ink); cursor:pointer; font:14px Aptos,"Segoe UI Variable","Segoe UI",sans-serif; text-align:left; transition:border-color .18s ease,box-shadow .18s ease; }.role-select-trigger:hover { border-color:#aebce1; }.role-select.is-open .role-select-trigger,.role-select-trigger:focus-visible { border-color:#7894ee; box-shadow:0 0 0 3px #4269e11a; }.role-select-trigger svg { width:18px; height:18px; flex:0 0 18px; fill:none; stroke:#526078; stroke-linecap:round; stroke-linejoin:round; stroke-width:2; transition:transform .18s ease; }.role-select.is-open .role-select-trigger svg { transform:rotate(180deg); }.role-select-menu { position:absolute; z-index:30; top:calc(100% + 6px); right:0; left:0; overflow:hidden; padding:5px; border:1px solid #cbd6eb; border-radius:9px; background:#fff; box-shadow:0 12px 26px #263b6724; }.role-select-menu[hidden] { display:none; }.role-select-option { display:block; width:100%; min-height:36px; padding:8px 10px; border:0; border-radius:6px; background:transparent; color:#526078; cursor:pointer; font:13px Aptos,"Segoe UI Variable","Segoe UI",sans-serif; text-align:left; }.role-select-option:hover,.role-select-option[aria-selected="true"] { background:#eef2ff; color:#3154c3; }
@media (max-width:520px) { .category-options { grid-template-columns:1fr; } }
.login-brand { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; }.login-brand h1 { margin:0 0 4px; }.login-brand p { margin:0; color:#718098; }.login-logo { display:block; width:74px; height:auto; flex:0 0 74px; }
@media (max-width:520px) { .access-table-wrap { overflow:visible; }.access-list .responsive-access-table { display:block; min-width:0; }.responsive-access-table thead { display:none; }.responsive-access-table tbody { display:grid; gap:12px; }.responsive-access-table tr { display:grid; gap:9px; padding:13px; border:1px solid var(--line); border-radius:10px; }.responsive-access-table td { display:grid; grid-template-columns:minmax(100px,.7fr) minmax(0,1fr); gap:9px; padding:0; border:0; }.responsive-access-table td::before { content:attr(data-label); color:#8995a8; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }.responsive-access-table .table-actions { justify-content:flex-start; white-space:normal; }.responsive-access-table .table-actions .button { min-height:36px; }.access-panel-heading { align-items:flex-start; }.permission-tag { width:auto; max-width:100%; white-space:normal; } }