*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:       #f4f6f9;
  --white:    #ffffff;
  --surface:  #f9fafb;
  --border:   #e5e7eb;
  --border2:  #d1d5db;
  --tx:       #111827;
  --tx2:      #6b7280;
  --tx3:      #9ca3af;
  --accent:   #1d4ed8;
  --accent-l: #eff6ff;
  --accent-b: #bfdbfe;
  --ok:       #16a34a;
  --ok-l:     #f0fdf4;
  --ok-b:     #bbf7d0;
  --warn:     #d97706;
  --warn-l:   #fffbeb;
  --warn-b:   #fde68a;
  --err:      #dc2626;
  --err-l:    #fef2f2;
  --err-b:    #fecaca;
  --font: 'Plus Jakarta Sans', -apple-system, sans-serif;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
  --r: 10px;
  --r-lg: 14px;
}

body { font-family: var(--font); background: var(--bg); color: var(--tx); min-height: 100vh; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }

/* ── GATE ── */
#gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eff6ff 0%, #f4f6f9 50%, #faf5ff 100%); }
.gate-wrap { width: 100%; max-width: 440px; padding: 24px; }
.gate-header { text-align: center; margin-bottom: 32px; }
.gate-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.gate-icon { width: 44px; height: 44px; background: linear-gradient(135deg, #1d4ed8, #1e40af); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 4px 12px rgba(29,78,216,.3); }
.gate-brand-name { font-size: 18px; font-weight: 800; color: var(--tx); letter-spacing: -.3px; }
.gate-brand-name span { color: var(--accent); }
.gate-title { font-size: 24px; font-weight: 800; color: var(--tx); margin-bottom: 6px; letter-spacing: -.4px; }
.gate-sub { font-size: 13px; color: var(--tx2); }
.gate-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--shadow-lg); }

.fg { margin-bottom: 16px; }
.fg label { display: block; font-size: 12px; font-weight: 600; color: var(--tx2); margin-bottom: 6px; }

input[type=text], input[type=url], input[type=password], input[type=email] {
  width: 100%; padding: 10px 12px; background: var(--white); border: 1.5px solid var(--border);
  border-radius: var(--r); font-size: 13px; font-family: var(--font); color: var(--tx); outline: none; transition: border-color .15s, box-shadow .15s;
}
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(29,78,216,.1); }
input::placeholder { color: var(--tx3); }

.btn-primary { width: 100%; padding: 11px 16px; background: var(--accent); color: #fff; border: none; border-radius: var(--r); font-family: var(--font); font-size: 14px; font-weight: 700; cursor: pointer; transition: background .15s; box-shadow: 0 2px 8px rgba(29,78,216,.25); }
.btn-primary:hover { background: #1e40af; }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

/* ── TOPBAR ── */
#app { display: none; flex-direction: column; min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 100; height: 58px; background: var(--white); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 28px; gap: 14px; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.tb-brand { display: flex; align-items: center; gap: 10px; }
.tb-icon { width: 32px; height: 32px; background: linear-gradient(135deg, #1d4ed8, #1e40af); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.tb-name { font-size: 15px; font-weight: 800; color: var(--tx); letter-spacing: -.3px; }
.tb-name span { color: var(--accent); }
.tb-pill { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; background: var(--accent-l); color: var(--accent); border: 1px solid var(--accent-b); padding: 3px 9px; border-radius: 20px; }
.tb-url { font-size: 11px; color: var(--tx3); margin-left: 8px; font-family: monospace; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.btn-tb { padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 600; font-family: var(--font); cursor: pointer; border: 1.5px solid var(--border); background: var(--white); color: var(--tx2); transition: all .15s; display: flex; align-items: center; gap: 5px; }
.btn-tb:hover { border-color: var(--border2); color: var(--tx); background: var(--surface); }

/* ── MAIN ── */
.main { padding: 28px; max-width: 1360px; margin: 0 auto; width: 100%; }
.page-header { margin-bottom: 24px; }
.page-title { font-size: 22px; font-weight: 800; color: var(--tx); letter-spacing: -.4px; margin-bottom: 4px; }
.page-sub { font-size: 13px; color: var(--tx2); }

/* ── STATS ── */
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); display: flex; align-items: flex-start; gap: 14px; }
.stat-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.stat-value { font-size: 28px; font-weight: 800; color: var(--tx); line-height: 1; letter-spacing: -.5px; margin-bottom: 4px; }
.stat-label { font-size: 12px; color: var(--tx2); font-weight: 500; }

/* ── SECTION ── */
.sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sec-title { font-size: 16px; font-weight: 700; color: var(--tx); letter-spacing: -.2px; }
.sec-count { font-size: 11px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px; color: var(--tx2); }
.sec-right { margin-left: auto; display: flex; gap: 8px; }

/* ── BANNER ── */
.banner { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r-lg); border: 1px solid; margin-bottom: 20px; }
.banner-warn { background: var(--warn-l); border-color: var(--warn-b); }
.banner-icon { font-size: 20px; flex-shrink: 0; }
.banner-body { flex: 1; }
.banner-title { font-size: 13px; font-weight: 700; color: var(--tx); margin-bottom: 2px; }
.banner-sub { font-size: 12px; color: var(--tx2); }

/* ── TABLE ── */
.inst-table-wrap { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 24px; }
table { width: 100%; border-collapse: collapse; }
thead th { padding: 11px 16px; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--tx3); background: var(--surface); border-bottom: 1px solid var(--border); }
tbody td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--tx2); font-size: 13px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #fafafa; }

.inst-name-cell { display: flex; align-items: center; gap: 10px; }
.inst-avatar { width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(135deg, #1d4ed8, #0891b2); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.inst-name { font-size: 13px; font-weight: 700; color: var(--tx); }
.inst-email { font-size: 11px; color: var(--tx3); margin-top: 1px; }

.pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .3px; padding: 3px 9px; border-radius: 20px; border: 1px solid; }
.pill-active    { background: var(--ok-l);   color: var(--ok);   border-color: var(--ok-b); }
.pill-suspended { background: var(--err-l);  color: var(--err);  border-color: var(--err-b); }
.pill-exam-active   { background: var(--ok-l);   color: var(--ok);   border-color: var(--ok-b); }
.pill-exam-ready    { background: var(--warn-l);  color: var(--warn); border-color: var(--warn-b); }
.pill-exam-closed   { background: var(--err-l);   color: var(--err);  border-color: var(--err-b); }
.pill-exam-archived { background: var(--surface); color: var(--tx3);  border-color: var(--border); }

.actions-cell { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-action { padding: 5px 11px; border-radius: 7px; font-size: 11px; font-weight: 600; font-family: var(--font); cursor: pointer; border: 1.5px solid; transition: all .15s; white-space: nowrap; }
.btn-ghost  { background: var(--white);  border-color: var(--border); color: var(--tx2); }
.btn-ghost:hover  { border-color: var(--accent); color: var(--accent); background: var(--accent-l); }
.btn-warn   { background: var(--warn-l); border-color: var(--warn-b); color: var(--warn); }
.btn-warn:hover   { background: #fef3c7; }
.btn-ok     { background: var(--ok-l);   border-color: var(--ok-b);   color: var(--ok); }
.btn-ok:hover     { background: #dcfce7; }
.btn-danger { background: var(--err-l);  border-color: var(--err-b);  color: var(--err); }
.btn-danger:hover { background: #fee2e2; }
.btn-action:disabled { opacity: .4; cursor: not-allowed; }

/* ── EXAM PANEL ── */
.exam-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 24px; }
.ep-head { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; background: var(--surface); }
.ep-title { font-size: 14px; font-weight: 700; color: var(--tx); flex: 1; }
code { font-family: monospace; font-size: 12px; background: var(--surface); border: 1px solid var(--border); padding: 2px 6px; border-radius: 5px; color: var(--accent); }

/* ── REG PANEL ── */
.reg-panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 24px; }
.reg-panel-title { font-size: 15px; font-weight: 700; color: var(--tx); margin-bottom: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.form-row .fg { margin: 0; }

/* ── MODAL ── */
.modal-bg { display: none; position: fixed; inset: 0; background: rgba(17,24,39,.5); z-index: 500; align-items: center; justify-content: center; backdrop-filter: blur(3px); }
.modal-bg.open { display: flex; }
.modal { background: var(--white); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; width: 440px; box-shadow: var(--shadow-lg); animation: popIn .15s ease; }
@keyframes popIn { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-icon { font-size: 28px; margin-bottom: 12px; display: block; }
.modal-title { font-size: 18px; font-weight: 800; color: var(--tx); margin-bottom: 8px; letter-spacing: -.3px; }
.modal-body { font-size: 13px; color: var(--tx2); margin-bottom: 22px; line-height: 1.6; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.btn-cancel { padding: 9px 18px; background: var(--white); border: 1.5px solid var(--border); color: var(--tx2); border-radius: var(--r); font-family: var(--font); font-weight: 600; font-size: 13px; cursor: pointer; }
.btn-cancel:hover { border-color: var(--border2); color: var(--tx); }
.btn-confirm { padding: 9px 18px; background: var(--err); border: none; color: #fff; border-radius: var(--r); font-family: var(--font); font-weight: 700; font-size: 13px; cursor: pointer; }
.btn-confirm:hover { background: #b91c1c; }

/* ── ALERT ── */
.alert { padding: 11px 14px; border-radius: var(--r); font-size: 12px; font-weight: 500; display: flex; align-items: flex-start; gap: 8px; border: 1px solid; margin-bottom: 12px; }
.alert-err  { background: var(--err-l);  border-color: var(--err-b);  color: #b91c1c; }
.alert-ok   { background: var(--ok-l);   border-color: var(--ok-b);   color: var(--ok); }
.alert-warn { background: var(--warn-l); border-color: var(--warn-b); color: var(--warn); }

/* ── TOGGLE ── */
.tog { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.tog-sw { width: 34px; height: 20px; background: var(--border2); border-radius: 10px; position: relative; transition: background .2s; flex-shrink: 0; }
.tog-sw::after { content:''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: left .2s; }
.tog-sw.on { background: var(--ok); }
.tog-sw.on::after { left: 17px; }

/* ── TOAST ── */
#toast { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
.toast-item { padding: 12px 16px; border-radius: var(--r); font-size: 13px; font-weight: 500; animation: toastIn .2s ease; max-width: 360px; box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; background: var(--white); }
.ti-ok   { border: 1px solid var(--ok-b);   color: var(--ok);   border-left: 3px solid var(--ok); }
.ti-err  { border: 1px solid var(--err-b);  color: var(--err);  border-left: 3px solid var(--err); }
.ti-warn { border: 1px solid var(--warn-b); color: var(--warn); border-left: 3px solid var(--warn); }
@keyframes toastIn { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state { text-align: center; padding: 48px; color: var(--tx3); }
.e-icon { font-size: 32px; display: block; margin-bottom: 10px; }
.e-text { font-size: 13px; font-weight: 500; }

@media(max-width:900px){ .stats-row { grid-template-columns: repeat(2,1fr); } .form-row { grid-template-columns: 1fr; } }


/* === Generated from inline style="" attributes === */
.s20f4e7 { flex-direction:column;align-items:center;gap:8px }
.s9d6dd3 { height:80px;width:auto;object-fit:contain }
.s9fc544 { margin-bottom:22px }
.scb4589 { display:none }
.s2b05cc { width:22px;height:22px;object-fit:contain }
.s368c2d { background:#eff6ff }
.s113f3c { background:#f0fdf4 }
.sd446fe { background:#faf5ff }
.s6abcda { background:#fffbeb }
.s0d38a9 { color:var(--tx3);font-weight:400 }
.s214e69 { width:100%;padding:8px 10px;border:1px solid var(--border2);border-radius:var(--r);background:var(--white);font-size:14px;color:var(--tx) }
.s9c6869 { display:flex;gap:8px }
.sd43169 { margin-top:8px }
.sea2635 { font-size:12px;font-weight:400;color:var(--tx3) }
.s834563 { margin-left:auto }
.s062d4a { margin-top:24px }
.sc3cee9 { margin-left:auto;font-size:12px }
.s132fb9 { margin-left:4px }
/* ═══════════════════════════════════════════════════════════
   VAULT UI — convenience PIN gate styles
   Minimal additions, no layout changes to existing app
═══════════════════════════════════════════════════════════ */
#vault-setup,#vault-pin,#vault-reset{
  display:none;position:fixed;inset:0;background:var(--bg,#f0f4ff);
  align-items:flex-start;justify-content:center;z-index:9999;
  overflow-y:auto;
}
#vault-setup .gate-wrap,#vault-pin .gate-wrap,#vault-reset .gate-wrap{
  margin:auto;padding-top:32px;padding-bottom:32px;
}
.vault-err{
  background:#fef2f2;border:1px solid #fca5a5;color:#dc2626;
  border-radius:6px;padding:10px 14px;font-size:0.82rem;margin-bottom:8px;
}
.vault-lockbanner{
  background:#fef3c7;border:1px solid #fbbf24;color:#92400e;
  border-radius:6px;padding:10px 14px;font-size:0.83rem;
  text-align:center;margin-bottom:12px;
}
.vault-sel{
  width:100%;padding:8px 12px;border:1px solid var(--border,#d1d5db);
  border-radius:6px;font-size:0.9rem;background:#fff;color:#1e293b;
}
.vault-ghost-btn{
  display:block;width:100%;margin-top:8px;padding:10px;
  background:none;border:1px solid var(--border,#d1d5db);
  border-radius:8px;font-size:0.9rem;color:var(--text-muted,#64748b);
  cursor:pointer;text-align:center;
}
.vault-ghost-btn:hover{background:#f8fafc;}
.vault-danger-btn{background:#dc2626!important;border-color:#dc2626!important;}
.vault-danger-btn:hover{background:#b91c1c!important;}

/* ── BUTTON INTERACTION — active states + touch ─────────── */
button {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
/* Instant press feedback — override existing transition on :active */
.btn-tb:active,
.btn-action:active,
.btn-primary:active,
.btn-cancel:active,
.btn-confirm:active,
.ek-cm-btn-save:active,
.vault-ghost-btn:active,
.vault-danger-btn:active {
  transition-duration: 0s !important;
}
.btn-tb:active          { transform: scale(.94); opacity: .78; }
.btn-action:active      { transform: scale(.93); opacity: .75; }
.btn-primary:active     { transform: scale(.96); opacity: .82; }
.btn-cancel:active      { transform: scale(.94); opacity: .78; }
.btn-confirm:active     { transform: scale(.94); opacity: .78; }
.ek-cm-btn-save:active  { transform: scale(.94); opacity: .78; }
.vault-ghost-btn:active { transform: scale(.94); opacity: .78; }
.vault-danger-btn:active{ transform: scale(.94); opacity: .78; }
.btn-tb { touch-action: manipulation; }