*{box-sizing:border-box}body{margin:0;background:#f4f6f8;color:#1d2733;font:15px/1.45 Arial,sans-serif}.installer{max-width:1120px;margin:0 auto;padding:36px 20px 64px}header{margin-bottom:24px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;color:#52677d}h1{margin:.2rem 0;font-size:34px}h2{margin-top:0}.panel{background:#fff;border:1px solid #d9e0e7;border-radius:12px;padding:22px;margin:18px 0;box-shadow:0 4px 14px rgba(22,34,48,.05)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}label{display:grid;gap:6px;font-weight:700}input,select,textarea{width:100%;padding:10px 12px;border:1px solid #b9c4cf;border-radius:7px;background:#fff;font:inherit}.check{display:flex;align-items:center;gap:9px;margin:12px 0}.check input{width:auto}.checks>div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #edf0f3}.ok{color:#137333}.bad,.alert{color:#a61b1b}.alert{background:#fff0f0;border:1px solid #f0b8b8;padding:14px;border-radius:8px}.note{color:#5f6f7f}.button{display:inline-block;border:0;border-radius:8px;background:#17385d;color:#fff;padding:12px 18px;text-decoration:none;font-weight:700;cursor:pointer}.success{border-color:#99d2aa}@media(max-width:720px){.grid{grid-template-columns:1fr}}

.theme-preview{
  grid-column:1 / -1;
  border:1px solid #d4dbe4;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.theme-preview-heading{
  padding:.75rem 1rem;
  font-weight:800;
  background:#f4f7fa;
  border-bottom:1px solid #d4dbe4;
}
.theme-preview-nav{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  padding:1rem;
  color:#fff;
  background:#1E3A5F;
}
.theme-preview-nav strong{
  margin-right:auto;
}
.theme-preview-body{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  padding:1rem;
}
.theme-preview-card{
  border:1px solid #dbe2ea;
  border-radius:12px;
  padding:1rem;
}
.theme-preview-label{
  display:block;
  margin-bottom:.65rem;
  font-size:.85rem;
  font-weight:700;
  color:#5b6775;
}
#themePreviewButton{
  border:1px solid #2D7FF9;
  border-radius:8px;
  padding:.65rem 1rem;
  background:#2D7FF9;
  color:#fff;
  font-weight:700;
}
.theme-preview-badges{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.preview-badge{
  display:inline-flex;
  padding:.35rem .6rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
}
.preview-badge.success{background:#dcfce7;color:#166534}
.preview-badge.warning{background:#fef3c7;color:#92400e}
.preview-badge.danger{background:#fee2e2;color:#991b1b}

@media(max-width:720px){
  .theme-preview-body{grid-template-columns:1fr;}
}


.theme-color-control{
  display:grid;
  grid-template-columns:minmax(92px,140px) auto;
  align-items:center;
  gap:.8rem;
}
.theme-color-control input[type="color"]{
  width:100%;
  min-height:52px;
  padding:.25rem;
  cursor:pointer;
}
.theme-color-control output{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-weight:800;
}
.theme-color-locked{
  pointer-events:none;
  opacity:1;
  cursor:not-allowed !important;
}
.theme-preview{
  --preview-primary:#1E3A5F;
  --preview-accent:#2D7FF9;
  border-top:5px solid var(--preview-primary);
}
.theme-preview-heading{
  color:var(--preview-primary);
}
.theme-preview-nav{
  background:var(--preview-primary);
  color:#fff;
}
.theme-preview-nav span,
.theme-preview-nav strong{
  color:#fff;
}
#themePreviewButton{
  background:var(--preview-accent);
  border-color:var(--preview-accent);
  color:#fff;
}
.theme-preview-card{
  border-top:3px solid var(--preview-accent);
}

/* Dedicated installation completion page */
.completion-shell{max-width:980px}
.completion-hero{
  display:flex;
  gap:1.25rem;
  align-items:flex-start;
  padding:2rem;
  margin-bottom:1.25rem;
  border:1px solid #b7e2c8;
  border-radius:18px;
  background:#f0fff5;
}
.completion-check{
  display:grid;
  place-items:center;
  flex:0 0 58px;
  width:58px;
  height:58px;
  border-radius:50%;
  background:#15803d;
  color:#fff;
  font-size:2rem;
  font-weight:900;
}
.completion-eyebrow{
  margin:0 0 .3rem;
  color:#166534;
  font-weight:900;
  letter-spacing:.08em;
}
.completion-hero h1{margin:.1rem 0 .5rem}
.completion-hero p:last-child{margin-bottom:0}
.completion-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.8rem;
}
.completion-summary>div{
  padding:.85rem;
  border:1px solid #d8dee7;
  border-radius:10px;
}
.completion-summary dt{
  color:#5e6b7a;
  font-size:.8rem;
  font-weight:800;
  text-transform:uppercase;
}
.completion-summary dd{
  margin:.25rem 0 0;
  font-weight:700;
  overflow-wrap:anywhere;
}
.cleanup-paths{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin:1rem 0;
}
.cleanup-paths code{
  display:inline-block;
  padding:.7rem 1rem;
  border-radius:8px;
  background:#111827;
  color:#fff;
  font-size:1rem;
}
.completion-warning{
  padding:1rem;
  border-left:5px solid #b91c1c;
  background:#fff1f2;
  color:#881337;
  font-weight:800;
}
.completion-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.completion-primary,
.completion-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.7rem 1rem;
  border-radius:9px;
  font-weight:800;
  text-decoration:none;
}
.completion-primary{
  border:1px solid #1d4ed8;
  background:#1d4ed8;
  color:#fff;
}
.completion-secondary{
  border:1px solid #94a3b8;
  background:#fff;
  color:#1f2937;
  cursor:pointer;
}
.completion-note{margin-bottom:0;color:#5e6b7a}
@media(max-width:700px){
  .completion-summary{grid-template-columns:1fr}
  .completion-hero{display:grid}
}


.smtp-test-panel{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem;
  padding:1rem;
  border:1px solid #cbd5e1;
  border-radius:12px;
  background:#f8fafc;
}
.secondary-button{
  min-height:44px;
  padding:.7rem 1rem;
  border:1px solid #64748b;
  border-radius:9px;
  background:#fff;
  color:#0f172a;
  font-weight:800;
  cursor:pointer;
}
.secondary-button:disabled{cursor:wait;opacity:.7}
.smtp-test-result{
  flex:1 1 320px;
  min-height:44px;
  display:flex;
  align-items:center;
  padding:.7rem .85rem;
  border-radius:9px;
  background:#e2e8f0;
  color:#334155;
  font-weight:700;
}
.smtp-test-result.testing{background:#eff6ff;color:#1d4ed8}
.smtp-test-result.success{background:#dcfce7;color:#166534}
.smtp-test-result.error{background:#fee2e2;color:#991b1b}