:root{--ink:#142a44;--muted:#63788b;--line:#dbe5ed;--teal:#177e88;--bg:#f6f8fa;--card:#fff;--danger:#a83636}*{box-sizing:border-box}html{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}body{margin:0}header{background:#fff;border-bottom:1px solid var(--line);padding:16px max(16px,calc((100% - 1120px)/2));display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:11px}.brand strong{font-size:17px}.brand small{display:block;color:var(--muted);font-size:12px}.mark{width:43px;height:43px;border:2px solid var(--teal);border-radius:13px;display:grid;place-items:center;font-size:22px;font-weight:850;letter-spacing:-2px}.mark span{color:var(--teal)}.session{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px}main{max-width:1120px;margin:0 auto;padding:26px 18px 60px;min-height:70vh}footer{border-top:1px solid var(--line);padding:18px max(18px,calc((100% - 1120px)/2));display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:12px}h1{font-size:32px;line-height:1.2;letter-spacing:-.7px;margin:5px 0 14px}h2{font-size:22px;margin:0 0 14px}h3{font-size:16px;margin:0 0 12px}.eyebrow{color:var(--teal);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px}.muted,.hint{color:var(--muted)}.hint{font-size:12px}.login-card{display:grid;grid-template-columns:1.1fr .9fr;gap:45px;align-items:center;padding:45px 0}.login-card>div>p{line-height:1.6}.features{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}.features span{background:#e7f3f1;color:#18727a;border-radius:25px;padding:8px 12px;font-size:12px}.formcard,.panel{background:var(--card);border:1px solid var(--line);border-radius:15px;padding:22px;margin-bottom:20px}.formcard{max-width:420px}.twocol{display:grid;grid-template-columns:1fr 1fr;gap:17px}.pagehead{display:flex;justify-content:space-between;align-items:center;gap:16px}.statusline{font-weight:650;color:var(--teal);font-size:13px}.tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);padding:12px 0 18px;margin:4px 0 22px}.tabs button{background:none;border:0;color:var(--muted);font-weight:650;padding:11px 13px}.tabs button.active{color:var(--teal);background:#e8f3f2}.pane{display:none}.pane.active{display:block}.statgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:16px 0}.stat{border:1px solid var(--line);background:#fff;padding:18px;border-radius:14px}.stat b{font-size:29px;display:block}.stat small{color:var(--muted)}.twofields,.threefields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.threefields{grid-template-columns:repeat(3,minmax(0,1fr))}label{display:block;font-size:13px;color:#30465d;font-weight:650;margin-bottom:12px}input,select,textarea{display:block;width:100%;margin-top:6px;border:1px solid #bfceda;border-radius:9px;padding:10px 11px;font:inherit;font-size:15px;background:#fff;color:var(--ink);min-width:0}textarea{resize:vertical}button{cursor:pointer;border:1px solid #0c707b;border-radius:9px;background:var(--teal);color:white;font:inherit;font-size:13px;font-weight:700;padding:12px 15px;min-height:42px}button:hover{filter:brightness(.94)}button:disabled{opacity:.5;cursor:default}.ghost{background:white;color:var(--teal);border-color:#bdd3da}.check{display:flex;gap:9px;align-items:center}.check input{width:18px;height:18px;margin:0}#message{margin-bottom:10px;font-size:13px}#message:not(:empty){padding:12px;border-radius:9px;background:#e5f3ed;color:#215d45}#message.error{background:#ffedeb;color:var(--danger)}.tablebox{width:100%;overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:11px 9px;text-align:left;border-bottom:1px solid var(--line)}th{font-size:12px;color:var(--muted);background:#f8fafb}td button{padding:6px 10px;font-size:12px;min-height:32px}.examheader{display:flex;justify-content:space-between;align-items:center}.timer{font-size:30px;font-weight:800;color:var(--teal);font-variant-numeric:tabular-nums}.question{border:1px solid var(--line);background:white;border-radius:14px;padding:19px;margin:14px 0}.question p{line-height:1.5}.answerrow{display:flex;align-items:center;gap:8px;padding:7px 0}.answerrow input{width:18px;height:18px;margin:0}.answerrow label{margin:0;font-weight:400}.examactions{display:flex;gap:10px;flex-wrap:wrap}.qhead{color:var(--teal);font-size:12px;font-weight:700}.paper{padding:12px;background:#f7fafb;border-radius:8px;margin:10px 0}hr{border:0;border-top:1px solid var(--line);margin:18px 0}.reviewentry{padding:12px;border-top:1px solid var(--line)}.pill{display:inline-block;border-radius:7px;background:#e7f3f1;padding:3px 8px;font-size:11px}.warning{color:var(--danger);font-weight:700}@media(max-width:760px){.login-card,.twocol,.statgrid{grid-template-columns:1fr}.login-card{gap:20px;padding:12px 0}.formcard{max-width:100%}.pagehead{align-items:flex-start;flex-direction:column}.twofields,.threefields{grid-template-columns:1fr}h1{font-size:27px}footer{flex-direction:column}.tabs{overflow:auto;flex-wrap:nowrap}.tabs button{flex:none}}

.scenario-details{padding:13px;border:1px solid var(--line);border-radius:12px;margin:12px 0;background:#f8fafb}.scenario-details summary{cursor:pointer;font-size:13px;font-weight:700}.trace-label{font-family:monospace;color:#536879;font-size:12px;background:#eaf0f3;padding:7px;border-radius:5px}.evidence-note{border:1px dashed #bbced8;padding:12px;border-radius:8px;margin-top:12px;background:#f8fafb}.review-actions{display:flex;flex-wrap:wrap;gap:10px}.review-actions button{min-width:135px}.case-panel{background:#fafcff;padding:15px;border:1px solid var(--line);border-radius:10px;margin:13px 0}.subtle-tag{font-size:11px;color:#667a8f;display:block;margin-top:4px}.case-panel textarea{min-height:90px}

.bank-rule{display:grid;grid-template-columns:minmax(180px,2.2fr) minmax(115px,.8fr) minmax(115px,1fr) minmax(135px,1fr) auto;align-items:end;gap:12px;padding:12px 0;border-bottom:1px solid var(--line,#ddd)}
.bank-rule label{min-width:0}.bank-rule select,.bank-rule input{width:100%;max-width:100%}
@media(max-width:720px){.bank-rule{grid-template-columns:1fr 1fr}.bank-rule label:first-child{grid-column:1/-1}}

.bank-editor[hidden],.bank-owner[hidden],.bank-access[hidden],#bankReviewDetail[hidden]{display:none!important}#bankReviewDetail pre{white-space:pre-wrap;overflow-wrap:anywhere}.bank-rule{margin-bottom:10px}


/* User Account Chip & Header */
.user-chip { display: flex; align-items: center; gap: 10px; background: #f0f6fa; border: 1px solid var(--line); padding: 5px 12px; border-radius: 30px; }
.avatar, .avatar-lg { border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--teal); }
.avatar { width: 32px; height: 32px; font-size: 13px; }
.avatar-lg { width: 56px; height: 56px; font-size: 22px; }
.user-chip-info { display: flex; flex-direction: column; gap: 2px; }
.user-chip-name { font-weight: 700; font-size: 13px; color: var(--ink); line-height: 1.2; }
.user-chip-badges { display: flex; align-items: center; gap: 5px; }
.chip-btn { background: #fff; border: 1px solid var(--line); color: var(--teal); font-size: 12px; font-weight: 650; padding: 5px 10px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; min-height: 28px; cursor: pointer; transition: all .15s ease; }
.chip-btn:hover { background: #e7f3f1; border-color: var(--teal); }

/* Badges */
.badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; letter-spacing: .2px; text-transform: uppercase; }
.badge-platform { background: #f2e9fc; color: #6f2dbd; border: 1px solid #dfc7f7; }
.badge-company { background: #e5f3fd; color: #0077b6; border: 1px solid #bce1f9; }
.badge-examiner { background: #e3f7ec; color: #15803d; border: 1px solid #b7ecd0; }
.badge-candidate { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.badge-active { background: #dcfce7; color: #166534; }
.badge-disabled { background: #fee2e2; color: #991b1b; }
.badge-subtle { background: #f1f5f9; color: #475569; }

/* Demo Selector Card on Login */
.demo-selector-card { background: #f8fafc; border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 16px; }
.demo-selector-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.demo-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.demo-pill { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: all .15s ease; min-height: auto; }
.demo-pill:hover { border-color: var(--teal); background: #f0fdf4; transform: translateY(-1px); }
.demo-pill .role-title { font-size: 12px; font-weight: 700; color: var(--ink); }
.demo-pill small { font-size: 11px; color: var(--muted); }

/* Modals */
.modal-backdrop { position: fixed; inset: 0; background: rgba(15, 23, 42, .6); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 9999; padding: 18px; }
.modal-backdrop[hidden] { display: none !important; }
.modal-card { background: #fff; border-radius: 18px; box-shadow: 0 20px 45px rgba(0, 0, 0, .18); width: 100%; max-width: 580px; max-height: 90vh; overflow-y: auto; padding: 26px; border: 1px solid var(--line); }
.modal-card.modal-sm { max-width: 440px; }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.modal-title-group h3 { margin: 0 0 4px; font-size: 18px; }
.close-btn { background: none; border: 0; font-size: 24px; color: var(--muted); cursor: pointer; padding: 0 6px; min-height: auto; }
.close-btn:hover { color: var(--danger); }
.account-overview-card { display: flex; align-items: center; gap: 16px; background: #f8fafc; border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.account-meta h4 { margin: 0 0 2px; font-size: 16px; }
.account-meta p { margin: 0 0 8px; font-size: 13px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.security-card { background: #f0f7f8; border: 1px solid #c7e5e8; border-radius: 12px; padding: 14px; margin-bottom: 18px; }
.security-card h4 { margin: 0 0 10px; font-size: 13px; color: var(--teal); text-transform: uppercase; letter-spacing: .5px; }
.security-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; font-size: 12px; }
.security-grid div b { display: block; color: var(--ink); margin-top: 2px; }

/* Filter & Search Toolbar */
.panel-header-with-actions { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.filter-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search-input { width: 220px; padding: 8px 12px; font-size: 13px; margin: 0; border-radius: 8px; }
.filter-select { width: auto; min-width: 150px; padding: 8px 10px; font-size: 13px; margin: 0; border-radius: 8px; }
.ghost-btn { background: #fff; color: var(--teal); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 650; min-height: 36px; cursor: pointer; }
.ghost-btn:hover { background: #f0f7f8; border-color: var(--teal); }
.ghost-btn.danger { color: var(--danger); border-color: #fca5a5; }
.ghost-btn.danger:hover { background: #fee2e2; }
.primary-btn { background: var(--teal); color: #fff; border: 1px solid #0f6c75; border-radius: 8px; padding: 9px 16px; font-weight: 750; font-size: 13px; cursor: pointer; }

/* Password Input with Generate Button */
.password-input-wrap { display: flex; gap: 8px; margin-top: 6px; }
.password-input-wrap input { margin-top: 0; }
.password-input-wrap button { white-space: nowrap; flex-shrink: 0; margin: 0; }

.quick-pass-actions { display: flex; gap: 8px; margin: 10px 0 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }



/* Executive Brand Identity */
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo-container {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #0b1528 0%, #172a45 100%);
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 12px rgba(11, 21, 40, 0.18);
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.brand-logo-container:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(11, 21, 40, 0.25);
}
.brand-logo-img { width: 30px; height: 30px; display: block; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-title-row { display: flex; align-items: center; gap: 7px; }
.brand-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #0b1528;
  line-height: 1;
}
.brand-title-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  background: #e0f2fe;
  color: #0369a1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.brand small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2px;
}


.import-actions-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.import-actions-row button {
  min-height: 40px;
}
#downloadCsvTemplateBtn {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #0369a1;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .15s ease;
}
#downloadCsvTemplateBtn:hover {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0284c7;
}

/* Verified Enterprise v1.0.5 Role Workspace Banner & Tier Badges */
.badge-tier { background: #e2e8f0; color: #1e293b; border: 1px solid #cbd5e1; font-size: 10px; }
.badge-hr { background: #fdf2f8; color: #be185d; border: 1px solid #fbcfe8; }
.badge-quality { background: #f0fdfa; color: #0f766e; border: 1px solid #99f6e4; }
.badge-auditor { background: #fefce8; color: #854d0e; border: 1px solid #fef08a; }

.role-workspace-banner {
  background: linear-gradient(135deg, rgba(23, 126, 136, 0.08) 0%, rgba(37, 99, 235, 0.05) 100%);
  border: 1px solid rgba(23, 126, 136, 0.25);
  border-radius: 12px;
  padding: 16px 22px;
  margin-bottom: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}
.role-workspace-banner .banner-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.role-workspace-banner h2 {
  font-size: 1.35rem;
  margin: 0;
  color: var(--text-heading, #0f172a);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.role-workspace-banner .banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.role-workspace-banner .action-chip {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #1e293b;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Question Bank Intelligence & Capacity Styles */
.badge-danger { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; font-weight: 700; }
.badge-warning { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; font-weight: 700; }
.badge-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; font-weight: 700; }
.threefields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
@media(max-width: 800px) { .threefields { grid-template-columns: 1fr; } }