*{box-sizing:border-box;margin:0;padding:0}
:root{
 --bg:#06101c;
 --bg2:#0d1c31;
 --text:#eef4ff;
 --muted:#9fb1c9;
 --line:rgba(255,255,255,.10);
 --panel:rgba(9,18,32,.86);
 --panel-2:rgba(255,255,255,.04);
 --primary:#2f7bff;
 --primary2:#39d1ff;
 --success:#20d394;
 --danger:#ff5f7a;
 --warning:#ff9a3c;
 --shadow:0 18px 60px rgba(0,0,0,.34);
 --input-bg:rgba(255,255,255,.05);
 --sidebar-width:260px;
}
html[data-theme="light"]{
 --bg:#edf4ff;
 --bg2:#dce9fb;
 --text:#102033;
 --muted:#51627a;
 --line:rgba(16,32,51,.10);
 --panel:rgba(255,255,255,.90);
 --panel-2:rgba(16,32,51,.04);
 --primary:#2563eb;
 --primary2:#06b6d4;
 --success:#10b981;
 --danger:#ef4444;
 --warning:#f59e0b;
 --shadow:0 18px 50px rgba(15,23,42,.12);
 --input-bg:rgba(16,32,51,.04);
}
html,body{min-height:100%;background:linear-gradient(135deg,var(--bg),var(--bg2));color:var(--text);font-family:Inter,Arial,sans-serif}
.video-bg,.video-overlay{position:fixed;inset:0}
.video-bg iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:56.25vw;min-width:177.77vh;min-height:100vh;border:0;pointer-events:none}
.video-overlay{background:linear-gradient(90deg,rgba(2,8,18,.76),rgba(4,12,24,.58))}
html[data-theme="light"] .video-overlay{background:linear-gradient(90deg,rgba(237,244,255,.72),rgba(220,233,251,.48))}
.auth-page{position:relative;min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;z-index:2}
.left-pane,.right-pane{display:flex;align-items:center;padding:60px}
.hero{max-width:680px}
.hero .badge,.chip{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);margin-bottom:18px}
.hero h1{font-size:4rem;line-height:1.05;margin-bottom:18px}
.hero p{font-size:1.08rem;line-height:1.8;color:var(--muted)}
.badge-list{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.badge-list span{display:inline-block;padding:10px 16px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line)}
.card,.box,.sidebar,.modal-card{
 width:100%;background:var(--panel);border:1px solid var(--line);border-radius:24px;
 backdrop-filter:blur(16px);box-shadow:var(--shadow)
}
.card{max-width:470px;padding:28px}
.box,.sidebar,.modal-card{padding:22px}
.card h2{font-size:2rem;margin-bottom:8px}
.muted,.small{color:var(--muted)}
.small{font-size:.92rem}
label{display:block;margin:14px 0 8px;color:var(--text);font-weight:600}
input,select,textarea{
 width:100%;height:50px;padding:0 14px;background:var(--input-bg);color:var(--text);border-radius:16px;
 border:1px solid var(--line);outline:none
}
input::placeholder{color:var(--muted)}
input:focus,select:focus,textarea:focus{
 border-color:rgba(57,209,255,.45);
 box-shadow:0 0 0 4px rgba(57,209,255,.12)
}
button,.btn,.btn-ghost,.btn-danger,.btn-warning,.btn-success,.btn-sm{
 display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:none;border-radius:16px;
 padding:0 18px;cursor:pointer;text-decoration:none;color:#fff;font-weight:800;transition:.2s ease;
}
button,.btn,.btn-sm{background:linear-gradient(90deg,var(--primary),var(--primary2))}
.btn-success{background:linear-gradient(90deg,#11b981,#34d399)}
.btn-warning{background:linear-gradient(90deg,#ff9a3c,#ff6b57)}
.btn-danger{background:linear-gradient(90deg,#ff5f7a,#ff7b5f)}
.btn-ghost{background:var(--panel-2);border:1px solid var(--line);color:var(--text)}
button:hover,.btn:hover,.btn-sm:hover,.btn-ghost:hover,.btn-danger:hover,.btn-warning:hover,.btn-success:hover{transform:translateY(-1px)}
.actions{display:grid;gap:12px;margin-top:18px}
.links{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:16px}
.links a{color:var(--text);text-decoration:none;font-weight:700}
.flash{
 position:fixed;top:18px;right:18px;z-index:9999;padding:14px 18px;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);
 max-width:360px
}
.flash.success{background:rgba(32,211,148,.95);color:#fff}
.flash.error{background:rgba(255,95,122,.96);color:#fff}
.flash.info{background:rgba(47,123,255,.96);color:#fff}
.page-shell{position:relative;z-index:2;padding:24px}
.layout-grid{display:grid;grid-template-columns:var(--sidebar-width) 1fr;gap:20px}
.sidebar{height:fit-content;position:sticky;top:20px}
.nav-menu{display:grid;gap:10px;margin-top:12px}
.nav-menu a{
 display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;border-radius:14px;
 text-decoration:none;color:var(--text);background:var(--panel-2);border:1px solid var(--line);font-weight:700
}
.nav-menu a.active,.nav-menu a:hover{background:linear-gradient(90deg,var(--primary),var(--primary2));border:none;color:#fff}
.content-panel{min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:14px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.qr{max-width:260px;background:#fff;padding:12px;border-radius:20px;margin:16px 0}
.status-ok{color:#37d39b;font-weight:800}.status-no{color:#ff8da0;font-weight:800}
.toolbar{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:18px}
.search-form{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.search-form input{width:320px;max-width:100%}
.table-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.btn-sm{min-height:40px;border-radius:12px;padding:0 14px}
.pagination{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border-radius:12px;background:var(--panel-2);border:1px solid var(--line);color:var(--text);text-decoration:none;font-weight:700}
.pagination .active{background:linear-gradient(90deg,var(--primary),var(--primary2));border:none;color:#fff}
.password-wrap{position:relative}
.password-wrap input{padding-right:46px}
.toggle-pass{
 position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--muted);cursor:pointer;
 width:28px;height:28px;min-height:auto;padding:0;border-radius:8px;font-size:15px
}
.toggle-pass:hover{background:var(--panel-2);color:var(--text)}
.login-inline-options{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px}
.login-inline-options .save-access{display:flex;align-items:center;gap:8px;font-size:.95rem;color:var(--muted);font-weight:600}
.login-inline-options .save-access input{width:16px;height:16px}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9999;padding:20px}
.modal-backdrop.show{display:flex}
.modal-card{max-width:720px}
.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.modal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.modal-grid .full{grid-column:1/-1}
.switch-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.switch-row{
 display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:16px;background:var(--panel-2);border:1px solid var(--line)
}
.switch-row input{width:18px;height:18px}
.theme-toggle{
 display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;border:1px solid var(--line);
 background:var(--panel-2);color:var(--text);cursor:pointer;font-size:18px
}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
@media (max-width:1100px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:980px){
 .auth-page{grid-template-columns:1fr}
 .left-pane{padding:40px 30px 10px}
 .right-pane{padding:20px 30px 40px}
 .hero h1{font-size:2.5rem}
 .layout-grid{grid-template-columns:1fr}
 .sidebar{position:relative;top:0}
 .grid{grid-template-columns:1fr}
 .modal-grid,.switch-list{grid-template-columns:1fr}
 .table-actions{justify-content:flex-start}
}


.login-theme-toggle{
  position:fixed;top:18px;right:18px;z-index:9998;display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:14px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow);
  color:var(--text);cursor:pointer;font-size:18px
}
.user-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.avatar{
  width:48px;height:48px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:var(--shadow)
}
.badge-role,.badge-status{
  display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;font-weight:800;font-size:.84rem
}
.badge-role.admin{background:rgba(239,68,68,.16);color:#ff8e8e;border:1px solid rgba(239,68,68,.28)}
.badge-role.user{background:rgba(59,130,246,.16);color:#7db4ff;border:1px solid rgba(59,130,246,.28)}
.badge-status.active{background:rgba(16,185,129,.16);color:#34d399;border:1px solid rgba(16,185,129,.28)}
.badge-status.inactive{background:rgba(245,158,11,.16);color:#fbbf24;border:1px solid rgba(245,158,11,.28)}
.switch-modern{
  position:relative;display:inline-flex;width:54px;height:30px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid var(--line);
  vertical-align:middle;cursor:pointer
}
.switch-modern input{display:none}
.switch-modern span{
  position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;background:#fff;transition:.22s ease;box-shadow:0 6px 18px rgba(0,0,0,.25)
}
.switch-modern input:checked + span{left:27px;background:#fff}
.switch-modern.active{background:linear-gradient(90deg,var(--success),#34d399)}
.tab-nav{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.tab-btn{
  min-height:42px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-weight:800;cursor:pointer
}
.tab-btn.active{background:linear-gradient(90deg,var(--primary),var(--primary2));color:#fff;border:none}
.tab-pane{display:none}
.tab-pane.active{display:block}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stat-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:16px;background:var(--panel-2);border:1px solid var(--line)}
.user-name-stack{display:flex;flex-direction:column;gap:4px}
@media (max-width:980px){
  .info-grid{grid-template-columns:1fr}
}


.profile-card{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:start}
.profile-avatar-lg{
  width:140px;height:140px;border-radius:24px;object-fit:cover;background:var(--panel-2);border:1px solid var(--line)
}
.avatar-fallback-lg{
  width:140px;height:140px;border-radius:24px;display:flex;align-items:center;justify-content:center;
  font-size:2.6rem;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2))
}
.module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.perm-card{padding:14px 16px;border-radius:16px;background:var(--panel-2);border:1px solid var(--line)}
.perm-title{font-weight:800;margin-bottom:10px}
.perm-checks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.avatar-mini{width:34px;height:34px;border-radius:999px;object-fit:cover;border:1px solid var(--line)}
.log-filter{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.profile-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
@media (max-width:980px){
  .profile-card{grid-template-columns:1fr}
  .module-grid,.perm-checks{grid-template-columns:1fr}
}


.modal-card{
  max-width: 860px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tab-nav{
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--panel);
  padding-bottom: 10px;
}
.tab-pane{
  overflow-y: auto;
  max-height: 58vh;
  padding-right: 6px;
}
.tab-pane::-webkit-scrollbar{width:8px}
.tab-pane::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.18);
  border-radius: 999px;
}
.module-accordion{
  display:grid;
  gap:12px;
}
.accordion-item{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel-2);
  overflow:hidden;
}
.accordion-head{
  width:100%;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 16px;
  background:transparent;
  color:var(--text);
  border:none;
  cursor:pointer;
  font-weight:800;
}
.accordion-head:hover{
  background:rgba(255,255,255,.04);
}
.accordion-left{
  display:flex;
  align-items:center;
  gap:12px;
}
.module-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  color:#fff;
  font-size:16px;
  font-weight:900;
  box-shadow:var(--shadow);
}
.accordion-arrow{
  font-size:18px;
  transition:transform .2s ease;
}
.accordion-item.open .accordion-arrow{
  transform:rotate(180deg);
}
.accordion-body{
  display:none;
  padding:0 16px 16px 16px;
}
.accordion-item.open .accordion-body{
  display:block;
}
.perm-toolbar{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.perm-select-all{
  width:auto !important;
  min-height:40px !important;
  padding:0 14px !important;
  border-radius:12px !important;
}
.perm-checks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px;
}
.perm-chip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
}
@media (max-width: 980px){
  .modal-card{max-width:100%}
  .tab-pane{max-height:55vh}
}


.profile-upload-box{
  display:grid;
  gap:12px;
}
.profile-file-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 16px;
  border-radius:14px;
  background:linear-gradient(90deg,var(--primary),var(--primary2));
  color:#fff;
  font-weight:800;
  cursor:pointer;
  border:none;
  text-decoration:none;
  width:100%;
}
.profile-file-input{
  display:none;
}
.profile-preview-note{
  font-size:.9rem;
  color:var(--muted);
  text-align:center;
}
.profile-preview-actions{
  display:grid;
  gap:10px;
}