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

:root {
  /* RSG brand palette */
  --navy-deep:   #07101e;   /* page header */
  --navy-dark:   #0d1832;   /* body background */
  --navy:        #112248;   /* card / surface */
  --navy-mid:    #1a2f5c;   /* hover, subtle bg */
  --navy-border: #1e3268;   /* borders */
  --navy-rim:    #2a4288;   /* lighter borders */
  --orange:      #e8711a;   /* primary accent */
  --orange-dark: #c05510;   /* hover */
  --orange-glow: rgba(232,113,26,0.16);
  --text:        #dce8f8;   /* primary text */
  --text-muted:  #7890b8;   /* secondary */
  --text-dim:    #4a6090;   /* very muted */

  /* Functional colours */
  --green:       #27c47a;
  --green-light: rgba(39,196,122,0.15);
  --amber:       #f09a10;
  --amber-light: rgba(240,154,16,0.15);
  --red:         #e04040;
  --red-light:   rgba(224,64,64,0.15);

  /* Legacy aliases used throughout existing code */
  --blue:       var(--orange);
  --blue-dark:  var(--orange-dark);
  --blue-light: var(--orange-glow);
  --gray-50:    var(--navy-mid);
  --gray-100:   var(--navy-mid);
  --gray-200:   var(--navy-border);
  --gray-300:   var(--navy-rim);
  --gray-400:   var(--text-dim);
  --gray-500:   var(--text-muted);
  --gray-700:   #a0b8d8;
  --gray-800:   var(--text);
  --gray-900:   var(--navy-deep);
  --white:      var(--navy);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow:    0 2px 8px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.65);
  --radius:    10px;
  --radius-sm: 6px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

body {
  font-family: var(--font);
  background: var(--navy-dark);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout */
.page-header {
  background: var(--navy-deep);
  color: var(--text);
  padding: 0 1.5rem;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(232,113,26,0.3), var(--shadow);
}
.page-header .logo { font-weight: 700; font-size: 1.1rem; letter-spacing: -0.02em; color: var(--text); }
.page-header .logo span { color: var(--orange); }
.page-header nav { display: flex; gap: 0.25rem; margin-left: auto; align-items: center; }
.page-header nav a, .page-header nav button {
  color: var(--text-muted);
  font-size: 0.875rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.page-header nav a:hover, .page-header nav button:hover {
  color: var(--text);
  background: rgba(255,255,255,0.08);
  text-decoration: none;
}

.page-content { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }

/* Cards */
.card {
  background: var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  border: 1px solid var(--navy-border);
}
.card + .card { margin-top: 1rem; }
.card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.card-header h2 { margin: 0; }
.card-header .actions { margin-left: auto; display: flex; gap: 0.5rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1;
  font-family: var(--font);
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--orange-dark); }
.btn-secondary { background: var(--navy-mid); color: var(--text); border: 1px solid var(--navy-border); }
.btn-secondary:hover:not(:disabled) { background: var(--navy-rim); border-color: var(--navy-rim); }
.btn-danger { background: var(--red-light); color: var(--red); border: 1px solid transparent; }
.btn-danger:hover:not(:disabled) { background: var(--red); color: #fff; }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover:not(:disabled) { background: #1ea060; }
.btn-sm { padding: 0.3rem 0.625rem; font-size: 0.8rem; }
.btn-icon {
  padding: 0.375rem;
  border-radius: var(--radius-sm);
  background: none;
  border: 1px solid var(--navy-border);
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
}
.btn-icon:hover { background: var(--navy-mid); color: var(--text); border-color: var(--navy-rim); }

/* Forms */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 500; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.375rem; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: var(--font);
  background: var(--navy-dark);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-dim); }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-glow);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-draft           { background: rgba(74,96,144,0.3);  color: var(--text-muted); }
.badge-active          { background: var(--orange-glow);    color: var(--orange); }
.badge-completed       { background: var(--green-light);    color: var(--green); }
.badge-satisfactory    { background: var(--green-light);    color: var(--green); }
.badge-correct         { background: var(--green-light);    color: var(--green); }
.badge-needs-improvement { background: var(--amber-light);  color: var(--amber); }
.badge-incorrect       { background: var(--red-light);      color: var(--red); }

/* Progress */
.progress-bar { height: 6px; background: var(--navy-border); border-radius: 3px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--orange); border-radius: 3px; transition: width 0.3s; }

/* Session list cards */
.session-card {
  background: var(--navy);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.session-card:hover { box-shadow: var(--shadow-md); border-color: var(--navy-rim); }
.session-card .info { flex: 1; min-width: 0; }
.session-card .session-name { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; color: var(--text); }
.session-card .meta { font-size: 0.8rem; color: var(--text-muted); display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.25rem; }
.session-card .actions { display: flex; gap: 0.5rem; flex-shrink: 0; align-items: center; }
.sessions-list { display: flex; flex-direction: column; gap: 0.75rem; }

/* Access code */
.access-code {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--navy-dark);
  border: 1px solid var(--navy-rim);
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.625rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--orange);
}
.access-code .copy-btn {
  cursor: pointer;
  padding: 0.15rem;
  border-radius: 3px;
  transition: background 0.15s;
  color: var(--text-dim);
  background: none;
  border: none;
  font-size: 0.85rem;
}
.access-code .copy-btn:hover { background: var(--navy-mid); color: var(--text); }

/* UAT Form (client view) */
.uat-area { margin-bottom: 2.5rem; }
.uat-area-header {
  background: var(--navy-deep);
  color: var(--text);
  padding: 0.625rem 1rem;
  border-radius: var(--radius) var(--radius) 0 0;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  border-left: 3px solid var(--orange);
}
.uat-items {
  border: 1px solid var(--navy-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}
.uat-item {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--navy-border);
  background: var(--navy);
}
.uat-item:last-child { border-bottom: none; }
.uat-item-label { font-weight: 500; margin-bottom: 0.75rem; font-size: 0.9rem; }
.uat-item-label .item-number { color: var(--text-dim); font-size: 0.8rem; margin-right: 0.4rem; }
.radio-group { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.radio-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.875rem;
  border: 2px solid var(--navy-rim);
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.15s;
  user-select: none;
  color: var(--text-muted);
}
.radio-option input[type="radio"] { display: none; }
.radio-option:hover { border-color: var(--orange); background: var(--orange-glow); color: var(--text); }
.radio-option.selected-satisfactory, .radio-option.selected-correct { border-color: var(--green); background: var(--green-light); color: var(--green); }
.radio-option.selected-needs-improvement { border-color: var(--amber); background: var(--amber-light); color: var(--amber); }
.radio-option.selected-incorrect { border-color: var(--red); background: var(--red-light); color: var(--red); }
.feedback-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-family: var(--font);
  resize: vertical;
  min-height: 60px;
  background: var(--navy-dark);
  color: var(--text);
  transition: border-color 0.15s;
}
.feedback-input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow); }
.feedback-input::placeholder { color: var(--text-dim); }
.dev-response-box {
  margin-top: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: var(--orange-glow);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.85rem;
  color: var(--text);
}
.dev-response-box strong { color: var(--orange); display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.2rem; }

/* Admin session editor */
.editor-area { margin-bottom: 1.5rem; border: 1px solid var(--navy-border); border-radius: var(--radius); overflow: hidden; transition: opacity 0.15s; }
.editor-area-header {
  background: var(--navy-deep);
  color: var(--text);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-left: 3px solid var(--orange);
}
.editor-area-header input {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.625rem;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font);
  flex: 1;
}
.editor-area-header input:focus { outline: none; background: rgba(255,255,255,0.12); border-color: var(--orange); }
.editor-area-header input::placeholder { color: rgba(255,255,255,0.3); }
.drag-handle {
  cursor: grab;
  color: rgba(255,255,255,0.3);
  font-size: 1rem;
  line-height: 1;
  padding: 0 4px;
  user-select: none;
  flex-shrink: 0;
}
.drag-handle:active { cursor: grabbing; }
.editor-items { background: var(--navy); }
.editor-item { padding: 0.875rem 1rem; border-bottom: 1px solid var(--navy-border); display: flex; gap: 0.75rem; align-items: flex-start; }
.editor-item:last-child { border-bottom: none; }
.editor-item .item-body { flex: 1; min-width: 0; }
.editor-item .item-label-input {
  width: 100%;
  padding: 0.375rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-family: var(--font);
  color: var(--text);
  background: transparent;
}
.editor-item .item-label-input:hover { border-color: var(--navy-border); background: var(--navy-dark); }
.editor-item .item-label-input:focus { outline: none; border-color: var(--orange); background: var(--navy-dark); box-shadow: 0 0 0 3px var(--orange-glow); }
.options-row { display: flex; gap: 0.5rem; margin-top: 0.375rem; flex-wrap: wrap; align-items: center; }
.option-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.5rem;
  background: var(--navy-mid);
  border: 1px solid var(--navy-rim);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}
.option-chip input {
  background: none;
  border: none;
  font-size: 0.75rem;
  font-family: var(--font);
  font-weight: 500;
  color: var(--text-muted);
  padding: 0;
  width: 100px;
}
.option-chip input:focus { outline: none; color: var(--text); }

/* Response view (admin) */
.response-item { padding: 1rem 1.25rem; border-bottom: 1px solid var(--navy-border); background: var(--navy); }
.response-item:last-child { border-bottom: none; }
.response-item-header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.5rem; }
.response-item-label { font-weight: 500; flex: 1; font-size: 0.9rem; }
.response-meta { display: flex; gap: 0.75rem; align-items: center; flex-shrink: 0; }
.feedback-display { font-size: 0.875rem; color: var(--text-muted); padding: 0.5rem 0.75rem; background: var(--navy-dark); border-radius: var(--radius-sm); margin-bottom: 0.625rem; border-left: 2px solid var(--navy-rim); }
.feedback-display p { margin: 0; }
.dev-response-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--navy-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-family: var(--font);
  resize: vertical;
  min-height: 56px;
  background: var(--navy-dark);
  color: var(--text);
  transition: border-color 0.15s;
}
.dev-response-input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-glow); }
.dev-response-input::placeholder { color: var(--text-dim); }

/* Login page */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--navy-dark);
}
.login-card {
  background: var(--navy);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  padding: 2.5rem;
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--navy-border);
}
.login-logo { text-align: center; margin-bottom: 2rem; }
.login-logo h1 { font-size: 2rem; font-weight: 800; color: var(--text); letter-spacing: -0.03em; }
.login-logo h1 span { color: var(--orange); }
.login-logo p { color: var(--text-muted); margin-top: 0.25rem; font-size: 0.9rem; }
.login-tabs { display: flex; gap: 0; margin-bottom: 1.5rem; border-bottom: 2px solid var(--navy-border); }
.login-tab {
  flex: 1;
  text-align: center;
  padding: 0.625rem;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  font-family: var(--font);
  transition: all 0.15s;
}
.login-tab.active { color: var(--orange); border-bottom-color: var(--orange); }
.login-panel { display: none; }
.login-panel.active { display: block; }
.login-submit { width: 100%; margin-top: 1.25rem; padding: 0.75rem; font-size: 1rem; }
.login-error { color: var(--red); font-size: 0.875rem; margin-top: 0.5rem; text-align: center; }

/* Tabs */
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--navy-border); margin-bottom: 1.5rem; }
.tab-btn {
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
}
.tab-btn.active { color: var(--orange); border-bottom-color: var(--orange); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Stats */
.stats-row { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.stat-card {
  flex: 1;
  background: var(--navy);
  border: 1px solid var(--navy-border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
}
.stat-card .stat-value { font-size: 2rem; font-weight: 700; color: var(--orange); line-height: 1; }
.stat-card .stat-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 600px) { .stats-row { flex-wrap: wrap; } .stat-card { min-width: calc(50% - 0.5rem); } }

/* Save indicator */
.save-indicator { font-size: 0.8rem; color: var(--text-dim); display: inline-flex; align-items: center; gap: 0.3rem; }
.save-indicator.saving { color: var(--orange); }
.save-indicator.saved { color: var(--green); }

/* Empty state */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-dim); }
.empty-state .empty-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.empty-state p { margin-top: 0.5rem; }

/* Modals */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal {
  background: var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.75rem;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid var(--navy-border);
}
.modal h2 { margin-bottom: 1.25rem; }
.modal-footer { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1.5rem; }

/* Import sheet selector */
.import-sheet-item { padding: 0.875rem; border: 2px solid var(--navy-border); border-radius: var(--radius-sm); margin-bottom: 0.625rem; cursor: pointer; transition: all 0.15s; }
.import-sheet-item.selected { border-color: var(--orange); background: var(--orange-glow); }
.import-sheet-item label { cursor: pointer; display: flex; gap: 0.75rem; align-items: flex-start; }
.import-sheet-item label input { margin-top: 2px; flex-shrink: 0; accent-color: var(--orange); }
.import-sheet-item .sheet-info { flex: 1; }
.import-sheet-item .sheet-name { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.import-sheet-item .sheet-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; }

/* Toast */
.toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 300; display: flex; flex-direction: column; gap: 0.5rem; }
.toast { background: var(--navy-deep); color: var(--text); padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.875rem; box-shadow: var(--shadow-md); border: 1px solid var(--navy-rim); animation: slideIn 0.2s; }
.toast.success { background: #0e3a20; border-color: var(--green); color: var(--green); }
.toast.error   { background: #3a0e0e; border-color: var(--red); color: var(--red); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Result pair selector (add item modal) */
.result-pair-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 2px solid var(--navy-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.15s;
  user-select: none;
}
.result-pair-option input { accent-color: var(--orange); }
.result-pair-option:hover { border-color: var(--orange); color: var(--text); }
.result-pair-option.selected { border-color: var(--orange); background: var(--orange-glow); color: var(--text); }

/* Sign-off block */
.signoff-block {
  border: 2px solid var(--orange);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 2rem;
}
.signoff-header {
  background: var(--orange);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: 0.75rem 1.25rem;
}
.signoff-body {
  background: var(--navy);
  padding: 1.25rem;
}
.signoff-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
  line-height: 1.6;
}
.signoff-fields {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.signoff-fields .form-group { margin-bottom: 0; }
.signoff-confirmed {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: var(--green);
  font-weight: 500;
}
@media (max-width: 600px) { .signoff-fields { flex-direction: column; } .signoff-fields > div { width: 100% !important; } }

/* Completion */
.completion-page { text-align: center; padding: 3rem 1.5rem; }
.completion-icon { font-size: 4rem; margin-bottom: 1rem; }
.completion-page h1 { color: var(--green); margin-bottom: 0.75rem; }
.completion-page p { color: var(--text-muted); max-width: 400px; margin: 0 auto; }

/* Utilities */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.flex { display: flex; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.items-center { align-items: center; }
.ml-auto { margin-left: auto; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.font-mono { font-family: 'SF Mono', 'Fira Code', monospace; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.divider { height: 1px; background: var(--navy-border); margin: 1.25rem 0; }
hr { border: none; border-top: 1px solid var(--navy-border); margin: 1.5rem 0; }

@media (max-width: 768px) {
  .page-content { padding: 1rem; }
  .session-card { flex-direction: column; }
  .session-card .actions { width: 100%; }
}