:root{
  --bg:#0b0c10; --surface:#11131a; --text:#e9edf3; --muted:#9aa3b2;
  --accent:#69b1ff; --accent-2:#7ef0c7; --card:#171a22; --ring:rgba(105,177,255,.4);
  --radius:14px; --shadow:0 2px 8px rgba(0,0,0,.25), 0 12px 24px rgba(0,0,0,.18);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb; --surface:#fff; --text:#121722; --muted:#5a6375;
    --accent:#0b6bcb; --accent-2:#0f9d58; --card:#fff; --ring:rgba(11,107,203,.25);
  }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui, Inter, Segoe UI, Roboto, Arial;
}
.container{
  max-width:960px;
  margin:0 auto;
  padding:24px clamp(16px,3vw,32px);
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}

/* CTA buttons */
.cta{
  display:inline-flex;
  gap:10px;
  align-items:center;
  background:var(--accent);
  color:#fff;
  padding:10px 16px;
  border-radius:10px;
  border:none;
  box-shadow:var(--shadow);
  cursor:pointer;
}
.cta.secondary{
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
}
.cta:disabled{
  opacity:.6;
  cursor:not-allowed;
}

/* Form basics aligned to theme */
.form-label,
.form-text,
label{
  color:var(--text);
}
.form-control,
.form-select,
.form-control-color,
input[type="file"]{
  width:100%;
  background:#0f1218;
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:8px 10px;
}
.form-control:focus,
.form-select:focus,
input[type="file"]:focus{
  outline:3px solid var(--ring);
  outline-offset:2px;
}

/* Stepper */
.form-step{ display:none; }
.form-step.active{ display:block; }

/* Tabs */
.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:4px 0 12px;
}
.tab{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.04));
  cursor:pointer;
  color:var(--text);
}
.tab[aria-selected="true"]{
  outline:3px solid var(--ring);
}

.tabpanel{ display:none; }
.tabpanel.active{ display:block; }

/* Avatar grid */
.avatar-option{
  position:relative;
  cursor:pointer;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  margin:6px;
}
.avatar-option input[type="radio"]{ display:none; }
.avatar-option img{
  border:2px solid #ccc;
  border-radius:50%;
  width:80px;
  height:80px;
  object-fit:cover;
  transition:border-color .2s, box-shadow .2s, transform .05s;
}

/* Live preview */
#avatarPreview{
  width:90px;
  height:90px;
  border:2px solid #ccc;
  border-radius:50%;
  object-fit:cover;
  transition:border-color .2s, box-shadow .2s, transform .05s;
  display:none;
}
#avatarPreview.active{
  border-color: var(--accent, #007bff);
  box-shadow: 0 0 6px var(--accent, #007bff);
}

/* Utility */
.row{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}
.col-md-6{ grid-column:span 12; }
.col-md-3{ grid-column:span 12; }
@media(min-width:768px){
  .col-md-6{ grid-column:span 6; }
  .col-md-3{ grid-column:span 3; }
}
.mb-3{ margin-bottom:12px; }
.mb-4{ margin-bottom:16px; }
.mt-3{ margin-top:12px; }
.mt-4{ margin-top:16px; }
.me-2{ margin-right:8px; }
.text-center{ text-align:center; }
.form-check{
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 0;
}

/* Validation red ring on invalid fields when step is active */
.form-step.validate-active input:invalid,
.form-step.validate-active select:invalid,
.form-step.validate-active textarea:invalid {
  box-shadow: 0 0 0 2px var(--danger, #e55353);
  outline: none;
}
.form-step.validate-active input:invalid:focus,
.form-step.validate-active select:invalid:focus,
.form-step.validate-active textarea:invalid:focus {
  box-shadow: 0 0 0 3px var(--danger, #e55353);
}

/* Strong heading colour */
:root { --text-strong: #ffffff; }
h1, h2, h3, h4, h5, h6 {
  color: var(--text-strong, #ffffff);
}

/* when step shows validation errors, add a ring around the avatar group if no selection */
/* (kept as-is, even though :has support is limited & this is effectively a no-op) */
.form-step.validate-active #avatarGroup:not(:has(input[name="selected_avatar"]:checked))
.form-step.validate-active #avatarGroup:not(:has(#avatarUpload:has(input))) {
  /* Fallback if :has() isn’t supported: keep using the proxy input to trigger */
}

/* Preview heading and buttons */
.chat-preview-header{
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.chat-preview-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* On smaller screens, stack heading and buttons */
@media (max-width: 640px){
  .chat-preview-header{
    flex-direction:column;
    align-items:flex-start;
  }
}