:root {
  --blue:        #378ADD;
  --blue-light:  #E6F1FB;
  --blue-dark:   #0C447C;
  --teal:        #1D9E75;
  --teal-light:  #E1F5EE;
  --teal-dark:   #085041;
  --amber:       #BA7517;
  --amber-light: #FAEEDA;
  --amber-dark:  #633806;
  --red:         #A32D2D;
  --red-light:   #FCEBEB;
  --grey-1:      #F4F5F7;
  --grey-2:      #EAECEF;
  --grey-3:      #C8CDD5;
  --grey-4:      #6B7280;
  --grey-5:      #1F2937;
  --white:       #FFFFFF;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--grey-5);
  background: var(--grey-1);
  min-height: 100vh;
}

h1 { font-size: 22px; font-weight: 500; }
h2 { font-size: 18px; font-weight: 500; }
h3 { font-size: 15px; font-weight: 500; }
p  { font-size: 14px; color: var(--grey-4); }

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 16px;
}

/* Cards */
.card {
  background: var(--white);
  border: 0.5px solid var(--grey-3);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 10px;
}

/* Buttons */
.btn-primary {
  display: block;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  text-align: center;
  text-decoration: none;
}
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary:not(:disabled):hover { background: var(--blue-dark); }

.btn-secondary {
  display: block;
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  text-align: center;
  text-decoration: none;
}
.btn-secondary:hover { background: var(--blue-light); }

/* Badges */
.badge {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
}
.badge-done    { background: var(--teal-light); color: var(--teal-dark); }
.badge-next    { background: var(--blue-light); color: var(--blue-dark); }
.badge-pending { background: var(--grey-2);     color: var(--grey-4);    }

/* Progress bars */
.bar-track { height: 6px; background: var(--grey-2); border-radius: 3px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.bar-strong     { background: var(--teal); }
.bar-solid      { background: var(--blue); }
.bar-developing { background: var(--amber); }
.bar-effort     { background: var(--amber); opacity: 0.7; }

/* Form elements */
.form-group { margin-bottom: 20px; }
.form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--grey-5);
  margin-bottom: 8px;
}
.form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--grey-3);
  border-radius: 8px;
  background: var(--white);
  font-size: 14px;
  color: var(--grey-5);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.form-select:focus { outline: none; border-color: var(--blue); }

.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1; }

/* Checkbox */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--grey-4);
  cursor: pointer;
  line-height: 1.5;
}
.checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
}

/* Emoji picker */
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.emoji-option {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  border: 2px solid transparent;
  background: var(--grey-2);
  cursor: pointer;
  transition: transform 0.1s, border-color 0.1s;
  user-select: none;
}
.emoji-option:hover { border-color: var(--grey-3); }
.emoji-option.selected {
  border-color: var(--blue);
  background: var(--blue-light);
  transform: scale(1.12);
}

/* Header */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--white);
  border-bottom: 0.5px solid var(--grey-3);
  position: sticky;
  top: 0;
  z-index: 10;
}
.app-logo {
  font-size: 16px;
  font-weight: 600;
  color: var(--grey-5);
  letter-spacing: -0.3px;
}
.app-logo span { color: var(--blue); }
.avatar-btn {
  font-size: 22px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  padding: 4px;
  border-radius: 50%;
}
.avatar-btn:hover { background: var(--grey-2); }

/* Avatar dropdown */
.avatar-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--white);
  border: 0.5px solid var(--grey-3);
  border-radius: 10px;
  min-width: 160px;
  padding: 6px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 100;
  display: none;
}
.avatar-menu.open { display: block; }
.avatar-menu button {
  display: block;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
  background: none;
  border: none;
  font-size: 14px;
  color: var(--red);
  cursor: pointer;
}
.avatar-menu button:hover { background: var(--grey-1); }

/* Section card */
.section-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 0.5px solid var(--grey-3);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.section-card:hover { border-color: var(--grey-4); }
.section-card.done { opacity: 0.75; }
.section-card-body { flex: 1; min-width: 0; }
.section-card-name { font-size: 14px; font-weight: 500; color: var(--grey-5); margin-bottom: 2px; }
.section-card-desc { font-size: 13px; color: var(--grey-4); }
.section-card-time { font-size: 12px; color: var(--grey-4); margin-top: 2px; }
.section-card-arrow { color: var(--grey-3); font-size: 16px; }

/* Profile bars */
.profile-bar-row { margin-bottom: 16px; }
.profile-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.profile-bar-label { font-size: 14px; font-weight: 500; color: var(--grey-5); }
.profile-bar-desc { font-size: 12px; color: var(--grey-4); }
.profile-bar-locked {
  height: 6px;
  background: var(--grey-2);
  border-radius: 3px;
  border: 1px dashed var(--grey-3);
}

/* Insight blocks */
.insight-block {
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 10px;
}
.insight-block.positive { background: var(--teal-light); }
.insight-block.note     { background: var(--amber-light); }
.insight-block h3 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.insight-block.positive h3 { color: var(--teal-dark); }
.insight-block.note     h3 { color: var(--amber-dark); }
.insight-block p { font-size: 14px; color: var(--grey-5); }

/* Disclaimer */
.disclaimer {
  font-size: 12px;
  color: var(--grey-4);
  line-height: 1.5;
  border-top: 0.5px solid var(--grey-3);
  padding-top: 16px;
  margin-top: 16px;
}

/* Wellbeing */
.wellbeing-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.wellbeing-btn {
  flex: 1;
  min-width: 60px;
  padding: 8px 4px;
  border: 1px solid var(--grey-3);
  border-radius: 8px;
  background: var(--white);
  font-size: 12px;
  color: var(--grey-5);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.1s, background 0.1s;
}
.wellbeing-btn:hover { border-color: var(--blue); }
.wellbeing-btn.selected { border: 1.5px solid var(--blue); background: var(--blue-light); color: var(--blue-dark); }

/* Alert / safeguarding */
.alert {
  border-radius: 12px;
  padding: 18px 18px;
  margin-bottom: 16px;
}
.alert-amber { background: var(--amber-light); border: 1px solid var(--amber); }
.alert-red   { background: var(--red-light);   border: 1px solid var(--red); }
.alert h2 { font-size: 16px; margin-bottom: 8px; }
.alert-amber h2 { color: var(--amber-dark); }
.alert-red   h2 { color: var(--red); }
.alert p { font-size: 14px; color: var(--grey-5); margin-bottom: 10px; }
.alert ul { padding-left: 18px; font-size: 14px; color: var(--grey-5); }
.alert ul li { margin-bottom: 4px; }

/* Email send */
.email-row { display: flex; gap: 8px; }
.email-row input[type="email"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--grey-3);
  border-radius: 8px;
  font-size: 14px;
  color: var(--grey-5);
}
.email-row input[type="email"]:focus { outline: none; border-color: var(--blue); }
.email-row .btn-primary { width: auto; white-space: nowrap; }

/* Intro section screen */
.section-intro { text-align: center; padding: 32px 0 24px; }
.section-intro h1 { margin-bottom: 10px; }
.section-intro p  { margin-bottom: 6px; }
.section-intro .meta { font-size: 13px; color: var(--grey-4); margin-bottom: 24px; }

/* Utility */
.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-4  { margin-bottom: 4px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.text-center { text-align: center; }
.text-link {
  color: var(--blue);
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
}
.text-link:hover { text-decoration: underline; }

/* jsPsych overrides */
#jspsych-content { max-width: 480px; margin: 0 auto; }
.jspsych-btn {
  background: var(--white) !important;
  border: 0.5px solid var(--grey-3) !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  color: var(--grey-5) !important;
  cursor: pointer !important;
  transition: border-color 0.15s !important;
  margin: 4px !important;
}
.jspsych-btn:hover { border-color: var(--blue) !important; }
.jspsych-display-element { background: var(--grey-1); }