/* ===================================================
   THEME TOKENS
================================================== */
:root{
  --font-base: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --bg-page: #f5f6fa;
  --bg-card: #ffffff;
  --bg-surface: #ffffff;
  --bg-muted: #e5e7eb;

  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;

  --border-color: #e5e7eb;
  --border-subtle: rgba(0,0,0,.06);

  --card-radius: 16px;
  --card-shadow: 0 12px 34px rgba(0,0,0,.06);

  --brand: #4eafff;
  --brand-2: #6b7cff;
  --brand-hover: #2f9bff;
  --brand-disabled: rgba(78,175,255,.35);

  --grad-primary: linear-gradient(135deg, rgba(78,175,255,1) 0%, rgba(107,124,255,1) 55%, rgba(78,175,255,1) 100%);
  --grad-primary-hover: linear-gradient(135deg, rgba(47,155,255,1) 0%, rgba(107,124,255,1) 55%, rgba(47,155,255,1) 100%);

  --grad-sheen:
    radial-gradient(800px 280px at 20% 20%, rgba(78,175,255,.25), rgba(78,175,255,0) 70%),
    radial-gradient(700px 260px at 85% 30%, rgba(255,98,42,.18), rgba(255,98,42,0) 70%);

  --focus: 0 0 0 4px rgba(78,175,255,.22);

  --btn-radius: 4px;

  --overlay-backdrop: rgba(0,0,0,.35);

  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --warning-accent: #ff622a;

  --space-xxs: 6px;
  --space-xs: 10px;
  --space-sm: 14px;
  --space-md: 18px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 44px;

  --page-max: 920px;

  --transition-fast: 180ms ease;

  --chip-bg: rgba(78,175,255,.12);
  --chip-border: rgba(78,175,255,.28);
  --chip-text: var(--text-primary);

  --tab-radius: 12px;
  --tab-font: 0.95rem;
  --tab-weight: 650;
  --tab-active-weight: 740;
  --tab-bg: rgba(255,255,255,0);
  --tab-bg-darkhint: rgba(255,255,255,.02);
  --tab-hover-border: rgba(229,231,235,.55);

  --header-glass: rgba(255,255,255,.78);
  --header-glass-border: rgba(15,23,42,.10);
}

/* ===================================================
   DARK THEME
================================================== */
html[data-theme="dark"]{
  --bg-page: #0b0f16;
  --bg-card: #121828;
  --bg-surface: #0f1524;
  --bg-muted: rgba(255,255,255,.06);

  --text-primary: rgba(229,231,235,1);
  --text-secondary: rgba(229,231,235,.72);
  --text-muted: rgba(229,231,235,.55);

  --border-color: rgba(229,231,235,.14);
  --border-subtle: rgba(255,255,255,.08);
  --card-shadow: 0 18px 55px rgba(0,0,0,.45);

  --overlay-backdrop: rgba(0,0,0,.82);

  --header-glass: rgba(18,24,40,.84);
  --header-glass-border: rgba(255,255,255,.10);
}

/* ===================================================
   GLOBAL BASE
================================================== */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ height:100%; }

body.wis-app{
  margin:0;
  min-height:100vh;
  font-family:var(--font-base);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;

  background:
    var(--grad-sheen),
    radial-gradient(1200px 520px at 18% 15%, rgba(78,175,255,.16), rgba(78,175,255,0) 60%),
    radial-gradient(1100px 520px at 82% 25%, rgba(107,124,255,.12), rgba(107,124,255,0) 60%),
    radial-gradient(900px 520px at 70% 85%, rgba(255,98,42,.10), rgba(255,98,42,0) 60%),
    linear-gradient(180deg, var(--bg-page) 0%, var(--bg-page) 55%, rgba(9,12,18,1) 100%);
}

.hidden,
[hidden]{ display:none !important; }

h1,h2,h3,h4,h5,h6,p,label{ margin:0; }

a{ color:inherit; text-decoration:none; }

.muted{ color:var(--text-muted); line-height:1.55; }

.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ===================================================
   ICONS
================================================== */
.icon{
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
  stroke: currentColor;
}

/* ===================================================
   FOCUS
================================================== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:none;
  box-shadow: var(--focus);
}

/* ===================================================
   HEADER
================================================== */
.app-header{
  width:100%;
  border-bottom: 1px solid var(--header-glass-border);
  background: var(--header-glass);
  backdrop-filter: blur(14px);
}

.app-header-inner{
  width:100%;
  max-width:var(--page-max);
  margin:0 auto;
  padding: 20px 24px 0;
  display:flex;
  flex-direction:column;
  gap: var(--space-sm);
}

.app-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-sm);
}

.app-brand{
  display:inline-flex;
  align-items:center;
  min-width:0;
}

.app-brand-title{
  font-weight: 820;
  letter-spacing:-0.02em;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app-brand-accent{ color: rgba(78,175,255,1); }

/* ===================================================
   LOGOUT BUTTON
================================================== */
.btn-ghost{
  background: transparent;
  border: 1px solid rgba(229,231,235,.18);
  color: var(--text-primary);
  border-radius: 999px;
  padding: 10px 12px;
  font-family: var(--font-base);
  cursor: pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-ghost:hover{
  transform: translateY(-1px);
  border-color: rgba(78,175,255,.40);
  background: rgba(255,255,255,.04);
}

.app-logout{
  border-color: rgba(239,68,68,.30);
  background: rgba(239,68,68,.08);
  color: var(--danger);
  display:inline-flex;
  align-items:center;
  gap: 8px;
}

.app-logout:hover{
  border-color: rgba(239,68,68,.55);
  background: rgba(239,68,68,.12);
}

.logout-text{
  font-weight: 760;
  font-size: .92rem;
  white-space:nowrap;
}

/* ===================================================
   NAV TABS
================================================== */
.app-nav{
  display:flex;
  align-items:flex-end;
  gap: 8px;
  flex-wrap: wrap;
  width:100%;
}

.app-tab{
  border: 1px solid var(--border-color);
  border-bottom: 0;
  background: var(--tab-bg);
  color: var(--text-secondary);
  border-radius: var(--tab-radius) var(--tab-radius) 0 0;
  padding: 10px 14px;
  font-family: var(--font-base);
  font-size: var(--tab-font);
  font-weight: var(--tab-weight);
  cursor:pointer;
  position:relative;
  top:1px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: transform var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

html[data-theme="dark"] .app-tab{ background: var(--tab-bg-darkhint); }

.app-tab .icon{ opacity: .88; }

.app-tab:hover{
  color: var(--text-primary);
  border-color: var(--tab-hover-border);
  transform: translateY(-1px);
}

.app-tab[aria-selected="true"],
.app-tab.is-active{
  color: var(--text-primary);
  font-weight: var(--tab-active-weight);
  border-color: rgba(78,175,255,.45);
  box-shadow: 0 -10px 24px rgba(78,175,255,.10);
  transform:none;
  background:
    radial-gradient(520px 120px at 20% 20%, rgba(78,175,255,.18), rgba(78,175,255,0) 70%),
    rgba(255,255,255,.06);
}

html:not([data-theme="dark"]) .app-tab[aria-selected="true"],
html:not([data-theme="dark"]) .app-tab.is-active{
  background:
    radial-gradient(520px 120px at 20% 20%, rgba(78,175,255,.16), rgba(78,175,255,0) 70%),
    rgba(255,255,255,.92);
}

/* ===================================================
   MAIN LAYOUT + SECTION HEAD
================================================== */
.app-main{
  width:100%;
  max-width:var(--page-max);
  margin:0 auto;
  padding: var(--space-xl) 24px var(--space-2xl);
}

.app-section{ margin-bottom: var(--space-2xl); }

.app-section > .card,
.app-section > section.card{ margin-top: var(--space-lg); }

.section-head{ margin-bottom: var(--space-lg); }

.section-title{
  font-size: 1.55rem;
  font-weight: 820;
  letter-spacing:-0.02em;
}

.section-subtitle{
  margin-top: var(--space-xs);
  color: var(--text-secondary);
  line-height:1.65;
  max-width: 72ch;
}

/* ===================================================
   CARD SYSTEM
================================================== */
.card{
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(78,175,255,.12), rgba(78,175,255,0) 60%),
    radial-gradient(900px 240px at 85% 0%, rgba(255,98,42,.10), rgba(255,98,42,0) 60%),
    var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  overflow:hidden;
}

html:not([data-theme="dark"]) .card{
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(78,175,255,.10), rgba(78,175,255,0) 60%),
    radial-gradient(900px 240px at 85% 0%, rgba(255,98,42,.06), rgba(255,98,42,0) 60%),
    var(--bg-card);
}

.card-glow{
  border-color: rgba(78,175,255,.22);
  box-shadow: 0 18px 55px rgba(78,175,255,.10);
}

.card-head{
  padding: var(--space-xl);
  border-bottom: 1px solid var(--border-color);
}

.card-title{
  font-size:1.1rem;
  font-weight:820;
  letter-spacing:-0.01em;
}

.card-subtitle{
  margin-top: var(--space-xs);
  color: var(--text-secondary);
  line-height:1.6;
}

.card-body{ padding: var(--space-xl); }

.card-text{ color: var(--text-secondary); line-height:1.7; }

.card-actions{
  padding: var(--space-xl);
  border-top: 1px solid var(--border-color);
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-end;
}

/* ===================================================
   BUTTONS
================================================== */
.btn-primary,
.btn-secondary,
.btn-danger{
  padding:12px 16px;
  border-radius: 4px;
  font-family: var(--font-base);
  cursor:pointer;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary{
  background: var(--grad-primary);
  color:#fff;
  font-weight: 820;
  border:none;
  box-shadow: 0 14px 30px rgba(78,175,255,.20);
}

.btn-primary:hover:not(:disabled){
  background: var(--grad-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(78,175,255,.26);
}

.btn-primary:disabled{
  background: var(--brand-disabled);
  cursor:not-allowed;
  opacity:.85;
  transform:none;
  box-shadow:none;
}

.btn-secondary{
  background: transparent;
  color: var(--text-primary);
  font-weight: 800;
  border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled){
  border-color: rgba(78,175,255,.45);
  transform: translateY(-1px);
}

.btn-secondary:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

.btn-danger{
  background: var(--danger);
  color:#fff;
  font-weight: 860;
  border:none;
}

.btn-danger:hover:not(:disabled){
  background: var(--danger-hover);
  transform: translateY(-1px);
}

a.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn-compact{
  padding: 10px 12px;
  border-radius: 12px;
  font-size: .92rem;
}

/* ===================================================
   KEY/VALUE ROWS
================================================== */
.kv-stack{
  margin-top: var(--space-lg);
  display:grid;
  gap: var(--space-xs);
}

.kv{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: var(--space-md);
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
}

.kv-key{ color: var(--text-secondary); font-size:.92rem; }
.kv-value{ font-weight: 820; }

/* ===================================================
   FORMS (AND REVENUE ROW FIX)
================================================== */
.form-row{
  display:flex;
  gap: 10px;
  align-items:center;
  min-width:0;
}

.form-row > *{
  min-width:0;
}

.form-row input,
.form-row select{
  width:auto;
  flex: 1 1 0;
}

.form-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg);
}

.field label{
  display:inline-block;
  font-weight: 780;
  letter-spacing:-0.01em;
}

.field .field-control{ margin-top: 8px; }

.span-2{ grid-column: 1 / -1; }

input, select, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: var(--font-base);
  font-size: .95rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

input::placeholder,
textarea::placeholder{ color: var(--text-muted); }

input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color: rgba(78,175,255,.55);
  box-shadow: var(--focus);
}

textarea{ min-height:110px; resize:vertical; }

/* ===================================================
   ORG GROUPING PANELS
================================================== */
.form-group{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(229,231,235,.10);
}

.form-group:first-of-type{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.form-group-title{
  margin: 0 0 12px 0;
  font-size: 0.95rem;
  font-weight: 820;
  letter-spacing: .2px;
  color: rgba(255,255,255,.92);
}

.form-group-title::after{
  content:"";
  display:block;
  margin-top: 10px;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(78,175,255,.45), rgba(229,231,235,.10), rgba(229,231,235,0));
}

.form-group .form-grid{
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(229,231,235,.10);
}

/* ===================================================
   MULTI-SELECT FIELD + MODAL
================================================== */
.ms-field{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  justify-content:space-between;
  padding: 14px;
  border:1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-surface);
}

.ms-summary{ flex:1; min-width:0; }
.ms-empty{ display:inline-block; padding:4px 0; }

.ms-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.ms-more{
  color: var(--text-secondary);
  font-weight: 820;
  font-size:.86rem;
}

.ms-actions{ flex:0 0 auto; }
.ms-btn{ padding:10px 12px; border-radius: 4px; }

.ms-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:100%;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--chip-border);
  background: var(--chip-bg);
  color: var(--chip-text);
}

.ms-chip-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:520px;
  font-weight: 820;
  font-size:.86rem;
}

.ms-chip-x{
  border:none;
  background:transparent;
  color: var(--text-primary);
  cursor:pointer;
  font-size:18px;
  line-height:1;
  opacity:.75;
  transition: opacity var(--transition-fast);
  padding:0;
}

.ms-chip-x:hover{ opacity:1; }

.modal-panel.ms-panel{ max-width:720px; }

.ms-toolbar{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-bottom: var(--space-lg);
}

.ms-toolbar input{ flex:1; }

.ms-list{
  display:grid;
  gap: 10px;
  max-height:52vh;
  overflow:auto;
  padding-right:2px;
}

#multiSelectModal .check{ background: var(--bg-card); }

/* ===================================================
   USER DETAILS ACTION BAR (MOVE BUTTON TO BOTTOM RIGHT)
================================================== */
#tab-account section[aria-labelledby="userDetailsTitle"] .card-body{
  display:flex;
  flex-direction:column;
  gap: var(--space-lg);
}

#tab-account section[aria-labelledby="userDetailsTitle"] #user-details-form{ order: 1; }
#tab-account section[aria-labelledby="userDetailsTitle"] .user-details-actions{
  order: 2;
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  margin-top: 0;
}

/* Make Edit look like a real action button */
#btnEditUserDetails{
  border-radius: 12px;
  padding: 12px 14px;
}

/* ===================================================
   ACCOUNT OVERVIEW GRID + MEMBERSHIP UPGRADE (FINAL POLISH)
================================================== */
.account-overview{
  margin-top: var(--space-xl);
  margin-bottom: var(--space-lg);
}

.account-overview-head{
  margin-bottom: var(--space-lg);
  padding: 0 2px;
}

.account-overview-title{
  font-size: 1rem;
  font-weight: 860;
  letter-spacing:-0.01em;
}

.account-overview-subtitle{
  margin-top: var(--space-xxs);
  color: var(--text-secondary);
  line-height:1.55;
  font-size:.92rem;
}

.account-top-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--space-lg);
}

.account-top-grid .card{
  height:100%;
  display:flex;
  flex-direction:column;
}

.account-top-grid .card-body{ flex:1; }

/* Membership card standout (no HTML changes needed) */
section[aria-labelledby="membershipTitle"]{
  position: relative;
  border-color: rgba(78,175,255,.28);
  box-shadow: 0 22px 70px rgba(78,175,255,.10);
}

section[aria-labelledby="membershipTitle"]::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: var(--card-radius);
  background:
    radial-gradient(900px 220px at 15% 0%, rgba(78,175,255,.20), rgba(78,175,255,0) 60%),
    radial-gradient(900px 220px at 85% 0%, rgba(107,124,255,.14), rgba(107,124,255,0) 62%);
  opacity: .95;
}

section[aria-labelledby="membershipTitle"] .card-body,
section[aria-labelledby="membershipTitle"] .card-head,
section[aria-labelledby="membershipTitle"] .card-actions{
  position: relative;
  z-index: 1;
}

/* Membership layout */
.membership-row{
  display:flex;
  flex-direction:column;
  gap: var(--space-lg);
}

.membership-actions{
  display:flex;
}

#btnMembershipAction{
  width:100%;
  padding: 14px 16px;
  border-radius: 14px;
}

/* Make membership “Status Free/Premium” feel more premium */
section[aria-labelledby="membershipTitle"] .kv{
  border-color: rgba(78,175,255,.22);
  background:
    radial-gradient(600px 140px at 20% 0%, rgba(78,175,255,.12), rgba(78,175,255,0) 60%),
    var(--bg-surface);
}

/* ===================================================
   ACCOUNT STATUS ROW
================================================== */
.account-status-controls{ display:grid; gap: var(--space-lg); }

.account-status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-lg);
  padding: 14px 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--bg-surface);
}

.account-status-meta{ display:grid; gap:2px; }

.account-status-label{ font-weight: 860; letter-spacing:-0.01em; }

.account-status-hint{
  color: var(--text-secondary);
  font-size:.92rem;
  line-height:1.45;
}

.account-status-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.status-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 11px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-muted);
  font-weight: 820;
  font-size:.9rem;
}

.status-dot{
  width:8px; height:8px;
  border-radius:999px;
  background: var(--text-primary);
  opacity:.85;
}

.status-pill.is-off{ opacity:.75; }
.status-pill.is-off .status-dot{ opacity:.5; }

/* ===================================================
   CHECKLISTS
================================================== */
.checklist{ display:grid; gap: 10px; }

.check{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-surface);
}

.check input{ width:auto; margin-top:3px; }
.check label{ line-height:1.5; color: var(--text-primary); }

/* ===================================================
   START NEW TEST CARD LAYOUT
================================================== */
.start-test-card .card-head,
.start-test-card .card-actions{ border: 0; }

.start-test-layout{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  align-items: stretch;
}

.start-test-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--space-md);
  border-right: 1px solid var(--border-color);
  background:
    radial-gradient(700px 240px at 30% 20%, rgba(78,175,255,.16), rgba(78,175,255,0) 65%),
    rgba(255,255,255,.03);
}

.start-test-illustration{
  width: 100%;
  max-width: 220px;
  height: auto;
  opacity: .95;
}

.start-test-content{
  display:flex;
  flex-direction:column;
}

.start-test-content .card-actions{ margin-top:auto; }

/* ===================================================
   OVERLAY (ASSESSMENT)
================================================== */
.overlay{
  position:fixed;
  inset:0;
  background: var(--overlay-backdrop);
  display:flex;
  align-items:stretch;
  justify-content:center;
  padding: var(--space-xl);
  z-index:50;
}

.overlay-panel{
  width:100%;
  max-width:860px;
  background: var(--bg-card);
  border-radius: 18px;
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height: min(88vh, 860px);
}

.overlay-head{
  padding: var(--space-xl);
  border-bottom: 1px solid var(--border-color);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: var(--space-lg);
}

.overlay-title{ font-size:1.15rem; font-weight: 860; }

.overlay-subtitle{
  margin-top: var(--space-xxs);
  color: var(--text-secondary);
  line-height:1.5;
}

.overlay-close{
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-primary);
  border-radius: 12px;
  width:40px; height:40px;
  cursor:pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
  font-size:22px;
  line-height:1;
}

.overlay-close:hover{
  border-color: rgba(78,175,255,.45);
  transform: translateY(-1px);
}

.overlay-warning{
  margin: var(--space-xl);
  margin-bottom:0;
  background: var(--bg-muted);
  border-left: 4px solid var(--warning-accent);
  padding: var(--space-md);
  border-radius: 12px;
  color: var(--text-primary);
}

.overlay-body{
  display:flex;
  flex-direction:column;
  flex:1;
  overflow:auto;
  padding: var(--space-xl);
  padding-bottom: 14px;
}

.overlay-section-head{ margin-bottom: var(--space-lg); }

.overlay-section-title{ font-size:1rem; font-weight: 860; }

.overlay-section-subtitle{
  margin-top: var(--space-xxs);
  color: var(--text-secondary);
  line-height:1.6;
}

fieldset{ border:none; padding:0; margin:0; }

#questions-container{
  display:grid;
  gap: var(--space-lg);
}

#questions-container > div[data-question-wrap]{
  padding: 22px;
  border:1px solid var(--border-color);
  border-radius: 16px;
  background: var(--bg-surface);
}

#questions-container [data-error="true"]{ border-color: var(--danger); }

#questions-container .q-options{
  margin-top: var(--space-sm);
  display:grid;
  gap: 10px;
}

#questions-container .q-option{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 12px;
  border:1px solid var(--border-color);
  background: var(--bg-card);
  cursor:pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

#questions-container .q-option:hover{
  border-color: rgba(78,175,255,.40);
  transform: translateY(-1px);
}

#questions-container .q-option:focus-within{
  border-color: rgba(78,175,255,.55);
  box-shadow: var(--focus);
}

#questions-container .q-option input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:999px;
  border:2px solid var(--text-muted);
  background:transparent;
  position:relative;
  flex:0 0 auto;
  transition: border-color var(--transition-fast);
}

#questions-container .q-option input[type="radio"]:checked{
  border-color: rgba(78,175,255,.75);
}

#questions-container .q-option input[type="radio"]:checked::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:999px;
  background: rgba(78,175,255,1);
}

#questions-container .q-option-label{
  color: var(--text-primary);
  line-height:1.4;
  font-weight: 700;
}

#questions-container .q-option:has(input[type="radio"]:checked){
  border-color: rgba(78,175,255,.50);
  background: rgba(78,175,255,.08);
}

.overlay-footer{
  margin-top:auto;
  padding: var(--space-lg) var(--space-xl);
  border-top:1px solid var(--border-color);
  display:flex;
  gap: 10px;
}

.overlay-footer button{ flex:1; }

.q-enter{ animation:qEnter 220ms ease both; }

@keyframes qEnter{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}

/* ===================================================
   HISTORY LIST
================================================== */
#test-history article{
  padding: var(--space-lg);
  border:1px solid var(--border-color);
  border-radius: var(--card-radius);
  margin-top: var(--space-md);
  background: var(--bg-surface);
}

#test-history p + p{ margin-top: var(--space-sm); }
#test-history button{ width:100%; }

/* ===================================================
   MODAL
================================================== */
.modal{
  position:fixed;
  inset:0;
  background: var(--overlay-backdrop);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: var(--space-xl);
  z-index:60;
}

.modal-panel{
  width:100%;
  max-width:560px;
  background: var(--bg-card);
  border-radius: var(--card-radius);
  box-shadow: 0 22px 70px rgba(0,0,0,.28);
  overflow:hidden;
}

.modal-head{
  padding: var(--space-xl);
  border-bottom:1px solid var(--border-color);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--space-lg);
}

.modal-title{ font-size:1.1rem; font-weight: 860; }

.modal-close{
  border:1px solid var(--border-color);
  background:transparent;
  color: var(--text-primary);
  border-radius:12px;
  width:40px; height:40px;
  cursor:pointer;
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
  font-size:22px;
  line-height:1;
}

.modal-close:hover{
  border-color: rgba(78,175,255,.45);
  transform: translateY(-1px);
}

.modal-body{
  padding: var(--space-xl);
  color: var(--text-secondary);
  line-height:1.7;
}

.modal-footer{
  padding: var(--space-xl);
  border-top:1px solid var(--border-color);
  display:flex;
  gap: 10px;
}

.modal-footer button{ flex:1; }

/* ===================================================
   RESPONSIVE
================================================== */
@media (max-width: 768px){
  /* Header spacing */
  .app-header-inner{
    padding: 16px 16px 0;
    gap: var(--space-xs);
  }

  .app-brand-title{ font-size: 1rem; }

  .btn-ghost{ padding: 9px 10px; }

  /* Tabs: 3 on one line + icon on top */
  .app-nav{
    flex-wrap: nowrap;
    gap: 6px;
  }

  .app-tab{
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;
    padding: 10px 8px;

    text-align: center;
    line-height: 1.1;
    font-size: .86rem;
  }

  .app-tab .icon{
    width: 18px;
    height: 18px;
  }

  .app-tab span{
    display: block;
    white-space: normal;
  }

  /* Main layout */
  .app-main{
    padding: 18px 16px var(--space-2xl);
  }

  /* Cards */
  .card-head,
  .card-body,
  .card-actions{
    padding: var(--space-lg);
  }

  /* Grids */
  .form-grid{ grid-template-columns: 1fr; }
  .span-2{ grid-column: auto; }
  .account-top-grid{ grid-template-columns: 1fr; }

  /* Start assessment card layout */
  .start-test-layout{ grid-template-columns: 1fr; }

  .start-test-visual{
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-sm);
  }

  /* Overlay */
  .overlay{ padding: var(--space-lg); }
  .overlay-panel{
    height: min(90vh, 900px);
    border-radius: 16px;
  }
  .overlay-body{
    padding: var(--space-lg);
    padding-bottom: 12px;
  }

  #questions-container > div[data-question-wrap]{
    padding: 18px;
    border-radius: 14px;
  }

  #questions-container .q-option{
    padding: 12px 12px;
  }

  .overlay-footer{
    flex-direction: column;
    padding: var(--space-lg);
  }

  /* Modals */
  .modal{ padding: var(--space-lg); }
  .modal-footer{ flex-direction: column; }

  /* Multi-select field */
  .ms-field{
    flex-direction: column;
    align-items: stretch;
  }
  .ms-btn{ width: 100%; }
  .ms-chip-text{ max-width: 100%; }

  /* Org grouped sections */
  .form-group{
    margin-top: 14px;
    padding-top: 14px;
  }
  .form-group .form-grid{
    padding: 12px;
    border-radius: 12px;
  }
}

@media (max-width: 420px){
  /* Topbar */
  .app-topbar{
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }
  .app-logout{ align-self: flex-end; }

  /* Tab label sizing */
  .app-tab span{
    font-size: .82rem;
  }
}