/* QUAD dashboard · login gateway + in-app users management */
.gate{position:fixed;inset:0;z-index:9000;display:none;background:#0b1b33;font:14px/1.5 Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif}
.gate.open{display:grid}
.gate-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);width:100%;height:100%;background:#fff}
.gate-visual{position:relative;overflow:hidden;padding:46px 46px 40px;display:flex;flex-direction:column;color:#fff;background:linear-gradient(150deg,#0b2a52 0%,#123f7b 42%,#0d6f6a 100%)}
.gate-visual.has-image{background:#08182e}
.gate-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 12%,rgba(53,198,132,.35),transparent 42%),radial-gradient(circle at 12% 88%,rgba(20,88,199,.45),transparent 45%)}
.gate-visual.has-image:before{background:linear-gradient(150deg,rgba(6,22,44,.88),rgba(8,44,74,.74)),var(--gate-bg,none) center/cover no-repeat}
.gate-visual>*{position:relative}
.gate-brand{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:750;letter-spacing:-.02em}
.gate-brand img{width:44px;height:44px;object-fit:contain;border-radius:12px;background:rgba(255,255,255,.14);padding:5px}
.gate-brand .logo-mark i{background:#fff!important;opacity:.92}
.gate-copy{margin-top:auto}
.gate-kicker{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9fe8c8}
.gate-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:#37c988;box-shadow:0 0 0 4px rgba(55,201,136,.25)}
.gate-copy h1{margin:16px 0 10px;font-size:clamp(28px,3.6vw,44px);line-height:1.12;letter-spacing:-.03em}
.gate-copy p{margin:0;max-width:46ch;color:#cfe0f5;font-size:14px}
.gate-points{margin:34px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.gate-points li{display:flex;align-items:center;gap:10px;color:#dcebfb;font-size:13px}
.gate-points b{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:rgba(255,255,255,.14);font-size:13px;font-weight:600}
.gate-form-wrap{display:flex;align-items:center;justify-content:center;padding:38px 30px;background:#fff}
.gate-form{width:min(398px,100%)}
.gate-form h2{margin:0 0 6px;font-size:25px;letter-spacing:-.02em}
.gate-form .gate-sub{margin:0 0 26px;color:#6f7d92;font-size:13px}
.gate-field{display:grid;gap:7px;margin-bottom:16px}
.gate-field label{font-size:12px;font-weight:600;color:#4c5a71}
.gate-input{position:relative;display:flex;align-items:center}
.gate-input i{position:absolute;inset-inline-start:13px;font-style:normal;color:#9aa6b8;font-size:14px}
.gate-input input{width:100%;height:46px;padding:0 42px 0 40px;border:1px solid #dde4ee;border-radius:12px;background:#fbfcfe;font-size:14px;color:#16202f;transition:border-color .18s,box-shadow .18s}
.gate-input input:focus{outline:none;border-color:#1b67c9;box-shadow:0 0 0 4px rgba(27,103,201,.12);background:#fff}
.gate-eye{position:absolute;inset-inline-end:8px;width:32px;height:32px;border-radius:8px;background:transparent;color:#8b98ab;font-size:14px}
.gate-eye:hover{background:#eef3fa;color:#31435c}
.gate-submit{width:100%;height:47px;border-radius:12px;background:linear-gradient(135deg,#1657c8,#0f8f7e);color:#fff;font-size:15px;font-weight:700;box-shadow:0 12px 26px rgba(20,88,199,.24)}
.gate-submit:hover{filter:brightness(1.05)}
.gate-submit[disabled]{opacity:.6;cursor:progress;box-shadow:none}
.gate-error{display:none;margin:0 0 14px;padding:11px 13px;border-radius:10px;background:#fdeff0;border:1px solid #f6cdd1;color:#a8323c;font-size:12.5px;line-height:1.6}
.gate-error.show{display:block}
.gate-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 18px;font-size:12px;color:#7b8798}
.gate-check{display:flex;align-items:center;gap:7px}
.gate-lang{padding:6px 11px;border-radius:999px;background:#f1f5fb;color:#42536b;font-size:11.5px;font-weight:600}
.gate-lang:hover{background:#e6edf8}
.gate-footer{margin:24px 0 0;color:#93a0b2;font-size:11.5px;text-align:center}
.gate-badge{margin-top:20px;display:none;padding:10px 12px;border-radius:10px;background:#fff7e8;border:1px solid #f6e0b8;color:#8a6316;font-size:11.5px;line-height:1.65}
.gate-badge.show{display:block}
.gate-loading{display:flex;align-items:center;justify-content:center;gap:10px;height:100%;width:100%;color:#cfe0f5;background:linear-gradient(150deg,#0b2a52,#123f7b)}
.gate-loading span{width:9px;height:9px;border-radius:50%;background:#37c988;animation:gate-pulse 1s infinite alternate}
.gate-loading span:nth-child(2){animation-delay:.2s}
.gate-loading span:nth-child(3){animation-delay:.4s}
@keyframes gate-pulse{from{opacity:.25;transform:translateY(-2px)}to{opacity:1;transform:translateY(2px)}}
@media(max-width:920px){.gate-shell{grid-template-columns:1fr}.gate-visual{padding:26px 24px;min-height:170px}.gate-copy h1{font-size:26px}.gate-points{display:none}.gate-form-wrap{padding:26px 20px 34px;align-items:flex-start}}
@media(max-width:520px){.gate-visual{padding:20px 18px}.gate-copy p{font-size:12.5px}}

/* Login experience: compact, readable, and consistent in RTL and LTR. */
.gate{font-family:Inter,"Segoe UI",Tahoma,ui-sans-serif,system-ui,sans-serif;background:#071b32}
.gate-shell{grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr);min-height:100dvh;background:#f8fbfc}
.gate-visual{isolation:isolate;padding:clamp(30px,4vw,68px);background:linear-gradient(154deg,#081a32 0%,#103655 55%,#0b665f 100%)}
.gate-visual:before{z-index:-2;background:radial-gradient(circle at 82% 16%,rgba(54,207,172,.22),transparent 34%),radial-gradient(circle at 10% 78%,rgba(63,122,210,.22),transparent 38%)}
.gate-visual:after{content:"";position:absolute;z-index:-1;width:min(55vw,660px);aspect-ratio:1;inset-inline-end:-18%;top:13%;border:1px solid rgba(255,255,255,.08);border-radius:50%;box-shadow:0 0 0 74px rgba(255,255,255,.025),0 0 0 150px rgba(255,255,255,.018);pointer-events:none}
.gate-visual.has-image:after{display:none}
.gate-brand{gap:13px;font-size:19px;font-weight:800;letter-spacing:-.035em}
.gate-brand .logo-mark{height:38px;width:38px;align-items:center;justify-content:center;gap:3px;border:1px solid rgba(255,255,255,.25);border-radius:12px;background:rgba(255,255,255,.1);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.gate-brand .logo-mark i:nth-child(1){height:15px}.gate-brand .logo-mark i:nth-child(2){height:22px}.gate-brand .logo-mark i:nth-child(3){height:17px}
.gate-copy{max-width:610px;margin:auto 0;transform:translateY(22px)}
.gate-kicker{padding:8px 12px;border:1px solid rgba(106,219,193,.28);border-radius:100px;background:rgba(15,156,139,.11);font-size:11px;font-weight:700;letter-spacing:.08em;color:#b8f0de}
.gate-copy h1{margin:24px 0 15px;font-size:clamp(38px,4.2vw,66px);font-weight:800;line-height:1.15;letter-spacing:-.045em;text-wrap:balance}
.gate-copy p{max-width:42ch;font-size:16px;line-height:1.9;color:#c6d7e3}
.gate-points{display:grid;gap:13px;margin-top:42px}
.gate-points li{gap:12px;color:#d7e7ec;font-size:13px}
.gate-points b{width:30px;height:30px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.09);color:#a9e6d3}
.gate-form-wrap{padding:44px clamp(28px,5vw,86px);background:#f8fbfc}
.gate-form{width:min(430px,100%)}
.gate-mobile-brand{display:none;align-items:center;gap:10px;margin-bottom:48px;color:#102844;font-size:17px;font-weight:800;letter-spacing:-.03em}
.gate-mobile-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#0b3855;color:#fff;font-size:22px;box-shadow:0 9px 18px rgba(7,35,58,.16)}
.gate-form h2{font-size:clamp(28px,2.3vw,34px);font-weight:800;color:#102844;letter-spacing:-.045em}
.gate-form .gate-sub{margin:7px 0 32px;color:#6d7c8d;font-size:13.5px;line-height:1.7}
.gate-field{gap:9px;margin-bottom:19px}
.gate-field label{font-size:12px;font-weight:700;color:#354a60}
.gate-input i{display:none}
.gate-input input{height:52px;padding-inline:16px 72px;padding-block:0;border:1px solid #dce6ed;border-radius:12px;background:#fff;color:#152d45;font-size:14px;box-shadow:0 1px 2px rgba(16,40,64,.03)}
.gate-input input:hover{border-color:#becfdc}
.gate-input input:focus{border-color:#168e85;box-shadow:0 0 0 4px rgba(22,142,133,.12)}
.gate-eye{inset-inline-end:9px;width:auto;min-width:50px;padding:0 8px;color:#577086;font-size:11px;font-weight:700}
.gate-eye:hover{background:#eaf4f2;color:#13766e}
.gate-meta{margin:3px 0 25px;color:#728397}
.gate-check{gap:9px;cursor:pointer}.gate-check input{accent-color:#13937f}
.gate-lang{background:#ecf3f6;color:#34546a;font-weight:800}
.gate-submit{height:52px;border-radius:12px;background:#0d7f72;box-shadow:0 12px 25px rgba(13,127,114,.2);transition:background .2s,transform .2s,box-shadow .2s}
.gate-submit:hover:not([disabled]){background:#0a6b62;filter:none;transform:translateY(-2px);box-shadow:0 16px 28px rgba(13,127,114,.25)}
.gate-submit:focus-visible,.gate-lang:focus-visible,.gate-eye:focus-visible,.gate-load button:focus-visible{outline:3px solid #70cdb8;outline-offset:3px}
.gate-submit[disabled]{opacity:.52;cursor:not-allowed}
.gate-badge{margin-top:22px;padding:13px 15px;border:1px solid #dce9ec;border-radius:12px;background:#eef6f6;color:#496875;font-size:12px}
.gate-load{justify-content:center;margin-top:12px}.gate-load .usr-btn{height:38px;color:#1f6c70;border-color:#cbdedf;background:transparent}
.gate-load .usr-btn:hover{background:#eaf4f3}
.gate-footer{margin-top:38px;color:#91a1b0;font-size:11px}
@media(max-width:920px){.gate{overflow:auto;background:radial-gradient(circle at 10% 0%,#154b5a,#0b2940 56%,#071b32)}.gate-shell{display:block;min-height:100dvh;background:transparent}.gate-visual{display:none}.gate-form-wrap{min-height:100dvh;padding:34px 20px;align-items:center;background:transparent}.gate-form{width:min(470px,100%);padding:clamp(26px,6vw,46px);border:1px solid rgba(255,255,255,.65);border-radius:24px;background:#fff;box-shadow:0 26px 70px rgba(0,17,34,.22)}.gate-mobile-brand{display:flex}.gate-form .gate-sub{margin-bottom:28px}}
@media(max-width:520px){.gate-form-wrap{padding:14px;align-items:center}.gate-form{padding:27px 22px;border-radius:19px}.gate-mobile-brand{margin-bottom:32px}.gate-form h2{font-size:27px}.gate-meta{align-items:flex-start}.gate-check{max-width:230px}.gate-footer{margin-top:29px}}
@media(prefers-reduced-motion:reduce){.gate-submit{transition:none}.gate-submit:hover:not([disabled]){transform:none}}

/* ---- in-app users console ---- */
.users-page{padding:2px}
.usr-head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.usr-head h1{margin:0 0 4px;font-size:23px;letter-spacing:-.02em}
.usr-head p{margin:0;color:#71809a;font-size:13px}
.usr-head-actions{display:flex;flex-wrap:wrap;gap:9px}
.usr-btn{height:39px;padding:0 16px;border-radius:10px;font-size:13px;font-weight:650;background:#eef3fa;color:#31435c}
.usr-btn:hover{background:#e3ebf7}
.usr-btn.primary{background:linear-gradient(135deg,#1657c8,#0f8f7e);color:#fff;box-shadow:0 9px 20px rgba(20,88,199,.2)}
.usr-btn.danger{background:#fdeff0;color:#a8323c}
.usr-btn.ghost{background:#fff;border:1px solid #dfe6f0;color:#41536c}
.usr-btn[disabled]{opacity:.55;cursor:not-allowed;box-shadow:none}
.usr-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.usr-kpi{position:relative;overflow:hidden;padding:16px 17px;border:1px solid #e4ebf4;border-radius:14px;background:#fff;box-shadow:0 6px 20px rgba(28,62,104,.045)}
.usr-kpi:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--accent,#1b67c9)}
.usr-kpi span{display:block;color:#6d7c93;font-size:12.5px}
.usr-kpi strong{display:block;margin-top:6px;font-size:24px;letter-spacing:-.03em}
.usr-kpi small{display:block;margin-top:4px;color:#93a0b2;font-size:11.5px}
.usr-panel{border:1px solid #e4ebf4;border-radius:15px;background:#fff;box-shadow:0 6px 20px rgba(28,62,104,.045);margin-bottom:14px}
.usr-panel-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid #eef2f8}
.usr-panel-head h2{margin:0;font-size:16px}
.usr-panel-head p{margin:3px 0 0;color:#7c8a9e;font-size:12.5px}
.usr-panel-body{padding:16px 18px}
.usr-tools{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.usr-search{height:38px;min-width:220px;padding:0 13px;border:1px solid #dfe6f0;border-radius:10px;background:#fbfcfe;font-size:13px}
.usr-search:focus{outline:none;border-color:#1b67c9;box-shadow:0 0 0 4px rgba(27,103,201,.1);background:#fff}
.usr-table-wrap{overflow:auto;border:1px solid #e8eef6;border-radius:12px}
table.usr-table{width:100%;border-collapse:collapse;font-size:13px;min-width:760px}
table.usr-table th{position:sticky;top:0;background:#f5f8fd;color:#5b6b83;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;text-align:start;padding:11px 13px;border-bottom:1px solid #e8eef6;white-space:nowrap}
table.usr-table td{padding:11px 13px;border-bottom:1px solid #f1f5fa;vertical-align:middle}
table.usr-table tr:last-child td{border-bottom:0}
table.usr-table tr.is-inactive td:not(.usr-td-actions){opacity:.55}
.usr-cell-strong{display:block;font-weight:650;color:#1d2738}
.usr-cell-sub{display:block;color:#8b98ab;font-size:11.5px}
.usr-select,.usr-input{height:35px;border:1px solid #dfe6f0;border-radius:9px;background:#fbfcfe;padding:0 9px;font-size:12.5px;color:#243044;width:100%;min-width:96px}
.usr-select:focus,.usr-input:focus{outline:none;border-color:#1b67c9;box-shadow:0 0 0 3px rgba(27,103,201,.1);background:#fff}
.usr-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11.5px;font-weight:650;white-space:nowrap}
.usr-pill.on{background:#e7f8f0;color:#177a56}
.usr-pill.off{background:#f2f4f7;color:#6f7b8c}
.usr-pill.admin{background:#eaf1fe;color:#1a52b8}
.usr-pill.manager{background:#f0ecfe;color:#5a41c4}
.usr-pill.seller{background:#eafaf3;color:#177a56}
.usr-pill.viewer{background:#f2f4f7;color:#5c6a7d}
.usr-pill.setup{background:#fff6e6;color:#8a6316}
.usr-pill.source{background:#eef3fa;color:#41536c}
.usr-actions{display:flex;gap:6px;justify-content:flex-end}
.usr-icon{width:32px;height:32px;border-radius:9px;background:#f1f5fb;color:#42536b;font-size:13px}
.usr-icon:hover{background:#e4ecf8;color:#1b67c9}
.usr-icon.danger:hover{background:#fdeff0;color:#a8323c}
.usr-empty{padding:28px;text-align:center;color:#8b98ab;font-size:13px}
.usr-note{margin:12px 0 0;padding:11px 13px;border-radius:10px;background:#f5f8fd;border:1px solid #e8eef6;color:#5c6a7d;font-size:12px;line-height:1.7}
.usr-note.warn{background:#fff7e8;border-color:#f6e0b8;color:#8a6316}
.usr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.usr-field{display:grid;gap:6px}
.usr-field label{font-size:12px;font-weight:600;color:#4c5a71}
.usr-field small{color:#93a0b2;font-size:11px}
.usr-upload{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.usr-upload-preview{display:grid;place-items:center;width:96px;height:64px;border:1px dashed #cfdaea;border-radius:11px;background:#f9fbfe;overflow:hidden;color:#9aa6b8;font-size:11px;text-align:center}
.usr-upload-preview.wide{width:150px}
.usr-upload-preview img{width:100%;height:100%;object-fit:contain}
.usr-upload-preview.cover img{object-fit:cover}
.usr-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.usr-modal{position:fixed;inset:0;z-index:9500;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(11,27,51,.55)}
.usr-modal.open{display:flex}
.usr-modal-card{width:min(470px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:16px;padding:22px;box-shadow:0 30px 70px rgba(8,24,48,.3)}
.usr-modal-card h3{margin:0 0 4px;font-size:18px}
.usr-modal-card>p{margin:0 0 18px;color:#71809a;font-size:12.5px}
.usr-modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}
@media(max-width:1100px){.usr-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.usr-grid{grid-template-columns:1fr}.usr-kpis{grid-template-columns:1fr}.usr-actions{justify-content:flex-start}}

.usr-avatar-preview{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1px dashed #cfdaea;background:#f9fbfe;overflow:hidden;color:#9aa6b8;font-size:20px}
.usr-avatar-preview img{width:100%;height:100%;object-fit:cover}
.profile .avatar.has-photo:after{display:none}
.profile .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}