:root {
  --bg: #edf2fa;
  --card: #ffffff;
  --accent: #ae3c2d;
  --accent-hover: #8b2c20;
  /* Textfärg på accentfärgade ytor. Mallen skriver över den med den av vit
     och svart som ger högst kontrast mot enhetens egen accentfärg. */
  --accent-text: #ffffff;
  --text: #172945;
  --muted: #566171;
  --border: #dfe4eb;
  --radius: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 36px 28px;
  background: var(--card);
  border-radius: 16px;
  margin-top: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(32,60,50,0.05);
}

body.has-bg-image .container {
  background: var(--card);
}

.header {
  text-align: center;
  margin-bottom: 32px;
}
.header h1 {
  font-size: 1.8em;
  font-weight: 700;
  margin-bottom: 8px;
}
.header p {
  color: var(--muted);
  font-size: 0.95em;
}
/* Företagsprofil: syns bara när enheten har laddat upp en logga eller satt
   ett företagsnamn — mallen renderar inga element annars. */
.header .org-logo {
  display: block;
  max-width: 100%;
  max-height: 64px;
  margin: 0 auto 12px;
}
.header .org-name {
  color: var(--muted);
  font-size: 0.85em;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 8px;
}

.form-group {
  margin-bottom: 20px;
}
.form-group label {
  display: block;
  font-size: 0.85em;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: 0;
}
.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="email"],
.form-group input[type="tel"] {
  width: 100%;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1em;
  outline: none;
  transition: border-color 0.2s;
}
.form-group input:focus {
  border-color: var(--accent);
}

.photo-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.photo-preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--card);
  border: 2px dashed var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s;
}
.photo-preview:hover {
  border-color: var(--accent);
}
.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-preview .placeholder {
  color: var(--muted);
  font-size: 0.8em;
  text-align: center;
  padding: 8px;
}
.photo-input {
  display: none;
}

.btn {
  width: 100%;
  padding: 16px;
  background: var(--accent);
  color: var(--accent-text);
  border: none;
  border-radius: var(--radius);
  font-size: 1.05em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 8px;
}
/* Sekundära knappar har vit bakgrund även med egen profilfärg. */
.btn[style*="background:var(--card)"] { color: var(--text); }
.btn:hover { background: var(--accent-hover); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.success-msg {
  text-align: center;
  padding: 32px 16px;
  display: none;
}
.success-msg h2 {
  font-size: 1.4em;
  margin-bottom: 8px;
}
.success-msg p { color: var(--muted); }

/* Info page */
.info-list {
  list-style: none;
}
.info-item {
  padding: 16px;
  background: var(--card);
  border-radius: var(--radius);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.info-item .name { font-weight: 600; }
.info-item .role { color: var(--muted); font-size: 0.9em; }
.info-item .role a { color: var(--accent); text-decoration: none; }
.info-item .role a:hover { text-decoration: underline; }

/* Settings page */
.setting-group {
  margin-bottom: 24px;
}
.setting-group label {
  display: block;
  font-size: 0.85em;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: none;
  letter-spacing: 0;
}
.setting-group input[type="color"] {
  width: 60px;
  height: 40px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: transparent;
}
.setting-group input[type="text"] {
  width: 100%;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 1em;
  outline: none;
}
.btn-danger {
  background: #b42318;
}
.btn-danger:hover { background: #912018; }
.btn-sm {
  width: auto;
  padding: 10px 20px;
  font-size: 0.9em;
}

/* Gemensam produktidentitet och tangentbordsnavigering. */
body { line-height: 1.55; -webkit-font-smoothing: antialiased; }
.product-brand { display: block; text-align: center; margin: 0 0 26px; font-size: 24px; font-weight: 800; letter-spacing: -1px; color: var(--text); }
.product-brand span { color: #ae3c2d; margin-right: 5px; }
.header h1 { letter-spacing: -.8px; font-weight: 600; }
.form-group input::placeholder, .setting-group input::placeholder { color: var(--muted); opacity: 1; }
:focus-visible { outline: 3px solid #ae3c2d; outline-offset: 4px; }
.form-group input:focus-visible, .setting-group input:focus-visible { outline: 2px solid #ae3c2d; outline-offset: 2px; }
.btn-danger { color: #ffffff; }
.info-item { border: 1px solid var(--border); gap: 16px; }
.info-item > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .container { margin: 16px 12px; padding: 28px 20px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* ÄrHär: samma namnskylt, typografi och luft som på produktsidan. */
h1, h2, h3, .product-brand { font-family: 'Manrope', sans-serif; }
button, input, select { font-family: inherit; }
input, select { min-width: 0; }
a { color: var(--accent); }
.container { max-width: 560px; margin: 40px auto; padding: 38px 40px; border-radius: 8px; box-shadow: 0 16px 50px rgba(23,41,69,.05); }
.product-brand { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:36px; font-size:27px; letter-spacing:-1.5px; }
.product-brand .brand-symbol { position:relative; display:inline-block; width:29px; height:34px; margin:0; }
.brand-symbol::before { content:''; position:absolute; left:2px; top:8px; width:24px; height:26px; border:3px solid #172945; border-radius:5px 5px 11px 5px; transform:rotate(-9deg); }
.brand-symbol i { position:absolute; top:1px; left:5px; width:5px; height:5px; border-radius:50%; background:#ae3c2d; }
.brand-symbol i + i { left:17px; }
.header { margin-bottom:28px; }
.header h1 { font-size:clamp(1.8rem,4vw,2.25rem); line-height:1.2; letter-spacing:-1.2px; font-weight:700; overflow-wrap:anywhere; }
.header p { margin-top:12px; }
.eyebrow { color:#244a89; text-transform:uppercase; font-size:.7rem; letter-spacing:1.6px; font-weight:700; margin-bottom:12px; }
.form-group label, .setting-group label { color:var(--text); font-weight:500; }
.btn { border-radius:7px; font-size:1rem; }
.photo-area { background:#edf2fa; padding:22px 16px; border-radius:7px; }
.photo-preview { border-radius:12px 12px 28px 12px; width:96px; height:100px; border:1px solid #c2cee0; }
.photo-preview .placeholder { color:#566171; }
.success-msg { background:#edf2fa; border-radius:8px; }
.success-msg h2 { color:#172945; }
.product-footnote { text-align:center; font-size:.78rem; color:var(--muted); margin-top:24px; }
.participants-container { max-width:820px; }
.participants-container .header { padding:20px 0 26px; border-bottom:1px solid var(--border); }
.participants-container .info-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.participants-container .info-item { margin:0; align-items:flex-start; border-radius:5px 5px 22px 5px; border-top:4px solid #244a89; padding:22px 18px; }
.info-item .name { font-family:'Manrope',sans-serif; font-weight:700; }
.admin-container { max-width:880px; }
.admin-container > .header { text-align:left; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-bottom:26px; border-bottom:1px solid var(--border); }
.admin-container .logout-form { margin:0; }
.admin-panel { padding:24px; border:1px solid var(--border); border-radius:8px; margin-bottom:24px; }
.admin-panel h2 { font-size:1.25rem; margin-bottom:8px; letter-spacing:-.5px; }
.section-intro { color:var(--muted); font-size:.88rem; margin-bottom:24px; }
.quick-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:28px; }
.quick-links a { padding:17px; border:1px solid #dfe4eb; background:#edf2fa; color:#172945; text-decoration:none; border-radius:7px; font-weight:600; }
.quick-links a span { display:block; font-size:.77rem; color:#566171; font-weight:400; margin-top:3px; }
.quick-links a:hover { border-color:#244a89; }
.admin-container .mode-btn { font:inherit; color:var(--text); }
.admin-container .mode-btn.active { background:#edf2fa; box-shadow:none; border-color:#244a89; }
.admin-container .mode-btn:hover { border-color:#244a89; }
.admin-container .upload-area { width:100%; font-family:inherit; background:var(--card); }
.save-bar { padding:16px 0 24px; }
.save-bar .btn { margin:0; }
.admin-container #status { min-height:1.5em; }
@media (max-width:600px) {
 .container { margin:12px; padding:28px 20px; }
 .product-brand { margin-bottom:28px; }
 .admin-container { padding:26px 16px; }
 .admin-panel { padding:18px 14px; }
 .participants-container .info-list { grid-template-columns:1fr; }
 .quick-links { gap:8px; }
 .quick-links a { padding:13px; font-size:.85rem; }
 .admin-container > .header { gap:12px; }
 .admin-container > .header h1 { font-size:1.7rem; }
 .mail-row { flex-wrap:wrap; }
 .mail-row input { width:100%; flex-basis:100% !important; }
}
.password-alternative { margin-top:28px; border-top:1px solid var(--border); padding-top:20px; }
.password-alternative summary { cursor:pointer; color:var(--muted); font-size:.9rem; margin-bottom:20px; }
.sms-instructions { text-align:center; background:#edf2fa; border-radius:8px; padding:24px; }
.sms-instructions img { display:block; margin:0 auto 18px; max-width:100%; height:auto; border-radius:6px; }
.sms-open { display:block; text-decoration:none; margin-bottom:20px; }
.sms-code { display:block; font-family:monospace; font-size:1.3rem; letter-spacing:1px; margin:12px 0; overflow-wrap:anywhere; }
.sms-state { text-align:center; margin-top:24px; font-weight:600; }
.sms-login .product-footnote { margin:18px 0; }
.btn-secondary { background:var(--card); color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { background:#edf2fa; }

.field-editor { border:1px solid var(--border); border-radius:10px; padding:14px; margin:12px 0; }
.field-options { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:10px; }
.field-options label { display:flex; align-items:center; gap:6px; margin:0; text-transform:none; letter-spacing:0; }
.field-options input[type="checkbox"] { width:auto; }
.form-group textarea { width:100%; box-sizing:border-box; font:inherit; padding:12px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text); }

.participants-container .name { white-space:normal; overflow-wrap:anywhere; overflow:visible; text-overflow:clip; }
.profile-answer { margin-top:14px; padding-top:12px; border-top:1px solid var(--border); white-space:pre-wrap; overflow-wrap:anywhere; }
.profile-answer strong { display:block; margin-bottom:5px; }
.field-help { font-size:.85em; color:var(--muted); margin:4px 0 8px; }