*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{min-height:100%;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;background:#0C1628;color:#1A2433;overflow-x:hidden}

:root{
  --bg:#0C1628;--surface:#0B1627;--card:#0F1E33;--elevated:#162540;
  --border:rgba(148,163,184,.14);--border2:rgba(148,163,184,.22);--border3:rgba(148,163,184,.28);
  --t1:#F0F4FA;--t2:#A8BAD0;--t3:#607A96;
  --cyan:#00C8BE;--magenta:#C80082;--violet:#7C3AED;--green:#22C55E;
  --r:10px;--r2:14px;--r3:20px;
}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,.2);border-radius:99px}

/* ── Animated orbs ── */
body::before,body::after{
  content:'';position:fixed;border-radius:50%;pointer-events:none;z-index:0;
  filter:blur(80px);will-change:transform;
}
body::before{
  width:70vmax;height:70vmax;
  top:-25%;left:-20%;
  background:radial-gradient(circle,rgba(200,0,130,.15) 0%,transparent 65%);
  animation:orb1 20s ease-in-out infinite;
}
body::after{
  width:65vmax;height:65vmax;
  bottom:-25%;right:-15%;
  background:radial-gradient(circle,rgba(0,200,190,.12) 0%,transparent 65%);
  animation:orb2 24s ease-in-out infinite;
}
@keyframes orb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(5%,8%) scale(1.08)}}
@keyframes orb2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,-5%) scale(1.1)}}
@media(prefers-reduced-motion:reduce){body::before,body::after{animation:none}}

/* ── Shell ── */
.shell{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:1fr 460px;
  min-height:100vh;
}

/* ═══════════════════════════════
   LEFT PANEL
═══════════════════════════════ */
.left{
  display:flex;flex-direction:column;
  padding:1.5rem 1.75rem;
  position:relative;overflow-y:auto;overflow-x:hidden;
  border-right:1px solid var(--border);
  background:
    radial-gradient(ellipse at 30% 20%,rgba(200,0,130,.12) 0%,transparent 50%),
    radial-gradient(ellipse at 70% 80%,rgba(0,200,190,.09) 0%,transparent 50%),
    linear-gradient(180deg,rgba(10,20,38,.98),rgba(14,26,46,.98));
}

/* Dot grid texture */
.left::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(rgba(20,40,70,.05) 1px,transparent 1px);
  background-size:24px 24px;pointer-events:none;
}
.left>*{position:relative;z-index:1}

.left-nav{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.25rem;
}
.wordmark{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.15rem;font-weight:800;letter-spacing:-.04em;
  background:linear-gradient(90deg,var(--magenta),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.back-link{
  font-size:.73rem;color:var(--t3);text-decoration:none;
  display:flex;align-items:center;gap:.3rem;
  transition:color .15s;
}
.back-link:hover{color:var(--t2)}

/* Hero text */
.left-hero{margin-bottom:.9rem}
.left-hero-eyebrow{
  font-size:.59rem;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
  color:var(--cyan);margin-bottom:.4rem;display:flex;align-items:center;gap:.4rem;
}
.left-hero-eyebrow::before{
  content:'';width:14px;height:1px;background:var(--cyan);opacity:.5;
}
.left-hero-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.15rem;
  font-weight:800;letter-spacing:-.04em;
  line-height:1.1;color:var(--t1);
  margin-bottom:.3rem;
}
.left-hero-title em{
  font-style:normal;
  background:linear-gradient(90deg,var(--magenta),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.left-hero-sub{font-size:.72rem;color:var(--t3);line-height:1.45;max-width:34ch}

/* Steps */
.progress{display:flex;flex-direction:column;gap:0;flex:1}
.prog-item{
  display:flex;align-items:flex-start;gap:.7rem;
  padding:.3rem 0;position:relative;
}
.prog-item:not(:last-child)::after{
  content:'';position:absolute;
  left:11px;top:26px;bottom:-4px;
  width:1px;background:var(--border2);
}
.prog-dot{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;font-weight:700;flex-shrink:0;
  transition:all .25s ease;position:relative;
}
.prog-dot.done{
  background:rgba(34,197,94,.15);
  border:1.5px solid rgba(34,197,94,.4);
  color:#15803D;
  
}
.prog-dot.done::after{content:'✓';font-size:.58rem}
.prog-dot.active{
  background:rgba(0,200,190,.15);
  border:1.5px solid rgba(0,200,190,.6);
  color:var(--cyan);
  box-shadow:0 0 8px rgba(0,200,190,.18);
}
.prog-dot.upcoming{
  background:rgba(20,40,70,.045);
  border:1.5px solid var(--border2);
  color:var(--t3);
}
.prog-label{padding-top:1px}
.prog-title{font-size:.74rem;font-weight:600;color:var(--t3);transition:color .2s}
.prog-title.active{color:var(--t1)}
.prog-sub{font-size:.7rem;color:var(--t3);margin-top:.05rem}

/* Tip badges */
.tips{
  display:flex;flex-direction:column;gap:.35rem;
  margin-top:1rem;padding-top:1rem;
  border-top:1px solid var(--border);
}
.tip{
  display:flex;align-items:center;gap:.5rem;
  font-size:.67rem;color:var(--t3);
}
.tip-icon{
  width:16px;height:16px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:.62rem;
}


/* ═══════════════════════════════
   RIGHT PANEL
═══════════════════════════════ */
.panel{
  position:relative;
  display:flex;flex-direction:column;
  background:rgba(14,26,45,.95);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  padding:1.5rem 1.75rem;
  border-left:1px solid var(--border);
  overflow-y:auto;
  overflow-x:hidden;
}

/* Subtle inner glow at top */
.panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,200,190,.3),rgba(200,0,130,.3),transparent);
  pointer-events:none;
}

.panel-header{margin-bottom:.85rem}
.step-count{
  font-size:.65rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--t3);margin-bottom:.3rem;
}
.step-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1.3rem;font-weight:800;letter-spacing:-.03em;color:var(--t1);
}

/* Progress bar */
.prog-bar-wrap{
  height:2px;
  background:var(--border);
  border-radius:99px;
  margin-bottom:1.25rem;
  overflow:hidden;
  position:relative;
}
.prog-bar-fill{
  height:100%;
  background:linear-gradient(90deg,var(--magenta),var(--cyan));
  border-radius:99px;
  transition:width .45s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.prog-bar-fill::after{
  content:'';position:absolute;right:0;top:-2px;bottom:-2px;
  width:6px;border-radius:99px;
  background:rgba(255,255,255,.6);
  box-shadow:0 0 8px rgba(0,200,190,.8);
}

/* Wizard content */
.wizard-content{
  flex:1;
  animation:stepIn .28s cubic-bezier(.16,1,.3,1);
}
@keyframes stepIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Form fields ── */
.field{margin-bottom:1rem}
.field label,.field-row label{
  display:block;font-size:.73rem;font-weight:500;
  color:var(--t2);margin-bottom:.35rem;
}
.field-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem}
.input{
  background:#FFFFFF;
  border:1px solid var(--border2);
  color:var(--t1);border-radius:var(--r);
  padding:.65rem .85rem;font-size:.84rem;
  font-family:inherit;width:100%;outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
  -webkit-appearance:none;appearance:none;
}
.input::placeholder{color:rgba(148,163,184,.35)}
.input:focus{
  border-color:rgba(0,200,190,.5);
  box-shadow:0 0 0 3px rgba(0,200,190,.1);
  background:rgba(7,16,31,.95);
}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

/* ── Mode cards ── */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.75rem}
.mode-btn{
  display:flex;flex-direction:column;gap:.75rem;
  padding:1.25rem;border-radius:var(--r2);
  border:1.5px solid var(--border2);
  background:rgba(20,40,70,.045);
  cursor:pointer;transition:all .18s ease;text-align:left;
  position:relative;overflow:hidden;
}
.mode-btn::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%,rgba(0,200,190,.08),transparent 70%);
  opacity:0;transition:opacity .18s;
}
.mode-btn:hover::before{opacity:1}
.mode-btn:hover{border-color:rgba(0,200,190,.4);transform:translateY(-2px);box-shadow:0 8px 24px -12px rgba(0,200,190,.2)}
.mode-icon{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .18s;
}
.mode-btn:hover .mode-icon{transform:scale(1.1)}
.mode-icon svg{width:17px;height:17px}
.mode-label{font-size:.88rem;font-weight:700;color:var(--t1);position:relative}
.mode-desc{font-size:.72rem;color:var(--t3);line-height:1.4;position:relative}

/* ── Plan cards ── */
.plans-grid{display:flex;flex-direction:column;gap:.55rem}
.plan-card{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1rem;border-radius:var(--r);
  border:1.5px solid var(--border2);
  background:rgba(20,40,70,.04);
  cursor:pointer;transition:all .15s ease;gap:.75rem;
  position:relative;overflow:hidden;
}
.plan-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,200,190,.06),transparent);
  opacity:0;transition:opacity .15s;
}
.plan-card:hover{border-color:var(--border3);transform:translateX(2px)}
.plan-card:has(input:checked),.plan-card.selected{
  border-color:rgba(0,200,190,.5);
  background:rgba(0,200,190,.06);
  box-shadow:0 0 0 1px rgba(0,200,190,.15) inset;
}
.plan-card:has(input:checked)::before,.plan-card.selected::before{opacity:1}
.plan-card input[type=radio]{accent-color:var(--cyan);flex-shrink:0}
.plan-left{display:flex;align-items:center;gap:.75rem;flex:1}
.plan-name{font-size:.85rem;font-weight:700;color:var(--t1)}
.plan-tagline{font-size:.7rem;color:var(--t3);margin-top:.05rem}
.plan-price{font-size:.9rem;font-weight:800;color:var(--t1);white-space:nowrap;text-align:right;font-family:'Plus Jakarta Sans',sans-serif}
.plan-price span{display:block;font-size:.67rem;font-weight:400;color:var(--t3);font-family:'Inter',sans-serif}

/* ── Billing toggle ── */
.billing-toggle{
  display:flex;gap:.25rem;
  background:#FFFFFF;
  border:1px solid var(--border2);
  border-radius:var(--r);padding:.2rem;margin-bottom:1rem;
}
.billing-toggle button,.billing-toggle [data-billing-cycle]{
  flex:1;padding:.42rem .6rem;border-radius:8px;border:none;
  background:transparent;color:var(--t3);font-size:.77rem;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .15s;
}
.billing-toggle button.is-active,.billing-toggle [data-billing-cycle].is-active{
  background:var(--elevated);color:var(--t1);
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}

/* ── Toggle row ── */
.toggle-row{
  display:flex;gap:.25rem;
  background:#FFFFFF;border:1px solid var(--border2);
  border-radius:var(--r);padding:.2rem;margin-bottom:1rem;
}
.toggle-btn{
  flex:1;padding:.4rem;border-radius:8px;border:none;
  background:transparent;color:var(--t3);font-size:.77rem;font-weight:600;
  cursor:pointer;font-family:inherit;transition:all .15s;
}
.toggle-btn.active{background:var(--elevated);color:var(--t1);box-shadow:0 1px 4px rgba(0,0,0,.3)}

/* ── Seat slider ── */
.slider-row{display:flex;align-items:center;gap:.75rem;margin-top:.35rem}
.slider-row input[type=range]{flex:1;accent-color:var(--cyan);height:4px;cursor:pointer}
.slider-val{font-size:.85rem;font-weight:700;color:var(--t1);min-width:2rem;text-align:right;font-family:'Plus Jakarta Sans',sans-serif}

/* ── Add-on rows ── */
.addon-row{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.7rem .9rem;border-radius:var(--r);
  background:rgba(20,40,70,.04);border:1px solid var(--border2);
  transition:border-color .15s;
}
.addon-row:hover{border-color:var(--border3)}
.addon-tag{
  font-size:.65rem;font-weight:700;padding:.12rem .45rem;border-radius:99px;
  background:rgba(0,200,190,.12);color:var(--cyan);border:1px solid rgba(0,200,190,.2);
}

/* ── Invite rows ── */
.invite-list{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}
.invite-row{display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem;align-items:center}
.invite-row select,.invite-row input{padding:.42rem .65rem;font-size:.78rem}
.add-btn{
  font-size:.72rem;font-weight:600;color:var(--cyan);
  background:none;border:none;cursor:pointer;padding:0;
  font-family:inherit;display:flex;align-items:center;gap:.25rem;
  margin-top:.5rem;opacity:.8;transition:opacity .15s;
}
.add-btn:hover{opacity:1}
.remove-btn{
  width:26px;height:26px;border-radius:6px;
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.18);
  color:#DC2626;font-size:.85rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:background .12s;
}
.remove-btn:hover{background:rgba(239,68,68,.18)}

/* ── Pipeline stage chips ── */
.stages-wrap{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.stage-chip{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.22rem .55rem;border-radius:99px;
  background:rgba(0,200,190,.06);border:1px solid rgba(0,200,190,.2);
  font-size:.7rem;color:var(--cyan);
}
.stage-chip button{background:none;border:none;cursor:pointer;color:rgba(0,200,190,.5);font-size:.78rem;line-height:1;padding:0;transition:color .12s}
.stage-chip button:hover{color:var(--cyan)}

/* ── Summary rows ── */
.summary-list{display:flex;flex-direction:column;gap:.4rem}
.summary-row{
  display:flex;justify-content:space-between;gap:.75rem;
  padding:.5rem .75rem;border-radius:var(--r);
  background:rgba(20,40,70,.04);font-size:.8rem;
  transition:background .1s;
}
.summary-row:hover{background:rgba(20,40,70,.05)}
.summary-row .key{color:var(--t3)}
.summary-row .val{font-weight:600;color:var(--t1);text-align:right}

/* ── Product catalog rows ── */
.catalog-row{
  background:#FFFFFF;border:1px solid var(--border2);
  border-radius:var(--r2);padding:1rem;margin-bottom:.6rem;
  transition:border-color .15s;
}
.catalog-row:hover{border-color:var(--border3)}
.catalog-row-header{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}
.catalog-row-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

/* ── Chat card (injected by JS) ── */
.chat-card{display:flex;flex-direction:column;gap:.9rem}
.chat-form{display:flex;flex-direction:column;gap:.9rem}
.wizard-form-body{display:flex;flex-direction:column;gap:.65rem}
.chat-form h4{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.92rem;font-weight:800;color:var(--t1);letter-spacing:-.02em;
}
.chat-actions{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  padding-top:.9rem;margin-top:.25rem;
  border-top:1px solid var(--border);
}

/* ── Buttons ── */
.btn-primary{
  padding:.6rem 1.35rem;border-radius:var(--r);
  background:linear-gradient(135deg,var(--magenta),var(--cyan));
  color:#fff;font-size:.83rem;font-weight:700;
  border:none;cursor:pointer;font-family:inherit;
  transition:opacity .15s,transform .1s,box-shadow .15s;
  margin-left:auto;position:relative;overflow:hidden;
}
.btn-primary::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent);
  opacity:0;transition:opacity .15s;
}
.btn-primary:hover:not(:disabled)::before{opacity:1}
.btn-primary:hover:not(:disabled){box-shadow:0 8px 20px -8px rgba(200,0,130,.5)}
.btn-primary:active:not(:disabled){transform:translateY(1px)}
.btn-primary:disabled{opacity:.4;cursor:not-allowed}

.btn-secondary{
  padding:.55rem 1rem;border-radius:var(--r);
  background:transparent;color:var(--t2);
  border:1px solid var(--border2);
  font-size:.83rem;font-weight:600;cursor:pointer;font-family:inherit;
  transition:background .12s,color .12s,border-color .12s;
}
.btn-secondary:hover:not(:disabled){background:var(--elevated);color:var(--t1);border-color:var(--border3)}
.btn-secondary:disabled{opacity:.4;cursor:not-allowed}
.chat-actions .btn-primary{margin-left:auto}
.chat-actions .btn-secondary+.btn-primary{margin-left:0}

/* ── Error / info bars ── */
.error-bar{
  display:none;
  background:rgba(239,68,68,.07);border:1px solid rgba(239,68,68,.16);
  border-radius:var(--r);padding:.55rem .75rem;font-size:.77rem;color:#DC2626;margin-top:.75rem;
}
.error-bar.visible{display:block}
.info-bar{
  background:rgba(0,200,190,.07);border:1px solid rgba(0,200,190,.18);
  border-radius:var(--r);padding:.55rem .75rem;font-size:.77rem;color:var(--cyan);
}

/* ── Loading overlay ── */
.loading-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(7,16,31,.85);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
}
.loading-overlay.hidden{display:none!important}
.loading-card{
  background:var(--elevated);border:1px solid var(--border2);
  border-radius:20px;padding:2rem 2.5rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.85rem;
  box-shadow:0 32px 64px -24px rgba(0,0,0,.8);
}
.spinner{
  width:34px;height:34px;
  border:2.5px solid rgba(148,163,184,.15);
  border-top-color:var(--cyan);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Draft modal ── */
.draft-overlay{
  position:fixed;inset:0;z-index:180;
  background:#FFFFFF;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
}
.draft-overlay.hidden{display:none!important}
.draft-modal{
  background:var(--elevated);border:1px solid var(--border2);
  border-radius:20px;padding:1.75rem;max-width:400px;width:90%;
  box-shadow:0 32px 64px -24px rgba(0,0,0,.8);
}
.draft-modal h3{font-size:1rem;font-weight:700;color:var(--t1);margin-bottom:.35rem}
.draft-modal p{font-size:.82rem;color:var(--t2)}
.draft-modal-actions{display:flex;gap:.6rem;margin-top:1.25rem}

/* ── Password strength ── */
.pw-strength-wrap{height:3px;background:var(--border);border-radius:99px;margin-top:.35rem;overflow:hidden}
.pw-strength-fill{height:100%;border-radius:99px;transition:width .3s,background .3s}
.pw-hint{font-size:.68rem;margin-top:.2rem}
.is-weak{background:#EF4444!important}
.is-warning{background:#F59E0B!important}
.is-ready{background:#22C55E!important}

/* ── Chat chips ── */
.chat-chip{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.2rem .6rem;border-radius:99px;
  border:1px solid var(--border2);background:rgba(20,40,70,.045);
  font-size:.7rem;font-weight:600;color:var(--t2);
  cursor:pointer;transition:all .12s;font-family:inherit;
}
.chat-chip:hover{border-color:rgba(0,200,190,.35);color:var(--t1);background:rgba(0,200,190,.06)}

/* ── Health items ── */
.health-item{
  display:flex;align-items:flex-start;gap:.6rem;
  padding:.5rem .75rem;border-radius:var(--r);
  background:rgba(20,40,70,.04);border:1px solid var(--border2);font-size:.79rem;
}
.health-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:.3rem}
.health-title{font-weight:600;color:var(--t1)}
.health-meta{font-size:.7rem;color:var(--t3);margin-top:.08rem}

/* ── Join context ── */
.join-context-card{
  background:rgba(0,200,190,.06);border:1px solid rgba(0,200,190,.2);
  border-radius:var(--r2);padding:1.1rem;
}
.join-context-title{font-weight:700;color:var(--t1);font-size:.88rem;margin-bottom:.3rem}
.join-context-copy{font-size:.77rem;color:var(--t3)}

/* ── Misc ── */
.logo-status{font-size:.7rem;color:var(--t3);margin-top:.25rem}
.live-preview-badge{
  font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:.12rem .45rem;border-radius:99px;
  background:rgba(0,200,190,.1);color:var(--cyan);border:1px solid rgba(0,200,190,.18);
}
.feature-help{font-size:.67rem;color:var(--t3);margin-top:.12rem;line-height:1.4}

/* ── Global field hints ── */
.text-xs.text-slate-400,
p.text-xs.text-slate-400,
p.text-xs.text-slate-500,
.text-xs.text-slate-500,
p[class*="text-xs"] {
    font-size:.63rem !important;
    color:#2A3A50 !important;
    margin-top:.18rem;
    line-height:1.4;
}
/* Inline-Validierung: setupInlineValidation() hängt <p class="field-error"> mit der
   Browser-Meldung an und setzt .input-invalid auf das Feld. Ohne diese Regeln rendern
   beide als ungestylter Default (großer schwarzer Text) — passend zur Rest-UI klein/rot. */
.field-error{
  font-size:.7rem;
  color:#DC2626;
  margin-top:.3rem;
  line-height:1.4;
  font-weight:600;
}
.field-error:empty{display:none;margin-top:0;}
.input-invalid{
  border-color:#DC2626 !important;
  box-shadow:0 0 0 3px rgba(220,38,38,.1) !important;
}
/* Summary row font size */
.space-y-2 .text-xs,
.wizard-form-body .text-xs { font-size:.63rem !important; }
.summary-card{background:rgba(20,40,70,.04);border:1px solid var(--border);border-radius:var(--r2);padding:1.1rem;display:flex;flex-direction:column;gap:.55rem}
.summary-section-title{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--t3);margin-bottom:.3rem}
.form-card{display:flex;flex-direction:column;gap:1rem}
.form-card--lock{opacity:.98}
.is-invite input,.is-invite select{
  background:#FFFFFF;border:1px solid var(--border2);color:var(--t1);
  border-radius:var(--r);padding:.42rem .65rem;font-size:.77rem;font-family:inherit;outline:none;
}
.is-invite input:focus,.is-invite select:focus{border-color:rgba(0,200,190,.4)}
#catalog-product-template{display:none}

/* ── Responsive ── */
@media(max-width:820px){
  .shell{grid-template-columns:1fr}
  .left{display:none}
  .panel{padding:1.75rem}
}
@media(max-width:480px){
  .grid-2,.catalog-row-grid,.invite-row{grid-template-columns:1fr}
  .mode-grid{grid-template-columns:1fr}
}

/* ── Suppress ALL browser validation UI ── */
::-webkit-validation-bubble,
::-webkit-validation-bubble-message,
::-webkit-validation-bubble-arrow,
::-webkit-validation-bubble-icon { display:none !important; opacity:0 !important; }
input:invalid, select:invalid, textarea:invalid { box-shadow:none !important; outline:none !important; }
input:-webkit-autofill { -webkit-box-shadow:0 0 0 100px rgba(6,13,26,.9) inset !important; -webkit-text-fill-color:#1A2433 !important; }

/* ── Input wrapper: stable height so icon never shifts ── */
div[style*="position:relative"][style*="display:flex"] { min-height:2.25rem; }

/* ── All hint texts small ── */
[data-password-strength-hint],
[data-pw-match-error],
p[style*="font-size:.6"] { display:block !important; margin-top:.2rem; }

/* ── Addon toggle switch ── */
.addon-switch { position:relative; width:44px; height:24px; flex-shrink:0; }
.addon-switch input { opacity:0; width:0; height:0; position:absolute; }
.addon-switch-track {
    position:absolute; inset:0; border-radius:99px;
    background:rgba(148,163,184,.15); border:1px solid rgba(148,163,184,.2);
    cursor:pointer; transition:background .25s, border-color .25s, box-shadow .25s;
}
.addon-switch-track::after {
    content:''; position:absolute;
    width:18px; height:18px; border-radius:50%;
    background:#607A96; top:2px; left:2px;
    box-shadow:0 1px 4px rgba(0,0,0,.35);
    transition:transform .28s cubic-bezier(.34,1.56,.64,1), background .25s, box-shadow .25s;
}
.addon-switch input:checked ~ .addon-switch-track {
    background:rgba(0,200,190,.28);
    border-color:rgba(0,200,190,.6);
    box-shadow:0 0 0 3px rgba(0,200,190,.12);
}
.addon-switch input:checked ~ .addon-switch-track::after {
    background:#00C8BE;
    transform:translateX(20px);
    box-shadow:0 0 8px rgba(0,200,190,.5), 0 1px 4px rgba(0,0,0,.2);
}
/* Active addon row highlight */
.addon-card[data-active="true"] {
    background:rgba(0,200,190,.07) !important;
    border-color:rgba(0,200,190,.3) !important;
}

/* ── Subscription plan card ── */
.plan-stack { position:relative; }
.plan-stack-label { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:#00C8BE; padding:.2rem .65rem .1rem; }
.subscription-card {
    display:block; width:100%; cursor:pointer;
    background:linear-gradient(135deg,rgba(0,200,190,.07),rgba(0,200,190,.03));
    border:1.5px solid rgba(0,200,190,.28);
    border-radius:14px; padding:1.1rem;
    position:relative; overflow:hidden;
    transition:border-color .15s;
}
.subscription-card::before {
    content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg,var(--magenta),var(--cyan));
}
.subscription-card:hover { border-color:rgba(0,200,190,.5); }
.subscription-card input[type=radio] { display:none; }
/* Empfohlener Plan hervorheben. */
.subscription-card.featured { border-color:rgba(0,200,190,.45); }
/* Ausgewählter Plan: klar sichtbare Selektion (vorher fehlte diese Regel komplett →
   Klick hatte KEIN visuelles Feedback, wirkte wie „nicht wählbar"). */
.subscription-card.selected {
    border-color:#00C8BE;
    background:linear-gradient(135deg,rgba(0,200,190,.16),rgba(0,200,190,.05));
    box-shadow:0 0 0 3px rgba(0,200,190,.2), 0 12px 34px -14px rgba(0,200,190,.5);
}
.subscription-card.selected::after {
    content:'✓ Gewählt';
    position:absolute; bottom:.7rem; right:.8rem;
    font-size:.58rem; font-weight:800; letter-spacing:.03em; color:#fff;
    background:linear-gradient(135deg,var(--magenta,#C80082),var(--cyan,#00C8BE));
    padding:.16rem .5rem; border-radius:99px; z-index:2;
}
.subscription-badge {
    display:inline-flex; font-size:.6rem; font-weight:700; padding:.1rem .45rem;
    border-radius:99px; background:rgba(0,200,190,.1); color:#00C8BE;
    border:1px solid rgba(0,200,190,.2); margin-left:.35rem;
}
.plan-audience { font-size:.68rem; color:#7A8AA0; margin-top:.2rem; }
.plan-included { font-size:.68rem; color:#00C8BE; margin-top:.3rem; display:inline-flex; align-items:center; gap:.3rem; }
.plan-tagline { font-size:.68rem; color:#7A8AA0; margin-top:.15rem; }
.plan-stack ul { margin-top:.5rem; display:flex; flex-direction:column; gap:.25rem; padding:0; list-style:none; }
.plan-stack li { font-size:.72rem; color:#56657A; display:flex; align-items:center; gap:.4rem; }
.plan-stack li::before { content:'✓'; color:#00C8BE; font-size:.65rem; font-weight:700; flex-shrink:0; }
[data-plan-price] { font-size:1.4rem; font-weight:800; color:#1A2433; font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.03em; }
[data-plan-price-label] { font-size:.62rem; color:#7A8AA0; }

/* ════════════════════════════════════════════════════════════
   HELLES THEME (Pipedrive-Stil · Brand Cyan/Magenta) + ZENTRIERUNG
   Additive Overrides — JS, IDs & Markup unverändert
   ════════════════════════════════════════════════════════════ */
:root{
  --bg:#EEF2F6; --surface:#FFFFFF; --card:#FFFFFF; --elevated:#FFFFFF;
  --border:rgba(20,40,70,.09); --border2:rgba(20,40,70,.14); --border3:rgba(20,40,70,.22);
  --t1:#1A2433; --t2:#56657A; --t3:#7A8AA0;
}
html,body{ background:#EEF2F6; color:#1A2433; }

/* — Zentrierte, schwebende Karte — */
body{ display:flex; justify-content:center; align-items:flex-start; padding:2.25rem 1.5rem; }
body::before{ background:radial-gradient(circle,rgba(200,0,130,.10) 0%,transparent 65%); }
body::after{ background:radial-gradient(circle,rgba(0,200,190,.10) 0%,transparent 65%); }
.shell{
  max-width:1060px; width:100%; margin:0 auto;
  min-height:calc(100vh - 4.5rem);
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,40,.06), 0 28px 64px -16px rgba(16,24,40,.18);
}

/* — Linkes Panel: helles Hero statt dunkel — */
.left{
  border-right:1px solid var(--border);
  background:
    radial-gradient(ellipse at 25% 12%,rgba(200,0,130,.08) 0%,transparent 52%),
    radial-gradient(ellipse at 78% 88%,rgba(0,200,190,.10) 0%,transparent 52%),
    linear-gradient(180deg,#F7FAFD,#EEF3F8);
}
.left::before{ background-image:radial-gradient(rgba(20,40,70,.05) 1px,transparent 1px); }
.back-link:hover{ color:var(--t1); }
.prog-dot.done{ background:rgba(23,178,106,.12); border-color:rgba(23,178,106,.42); color:#15803D; }
.prog-dot.upcoming{ background:rgba(20,40,70,.04); }
.left-hero-sub{ color:var(--t2); }

/* — Rechtes Panel: weiss — */
.panel{ background:#FFFFFF; border-left:none; }

/* — Inputs — */
.input{ background:#FFFFFF; }
.input::placeholder{ color:#9FACBE; }
.input:focus{ background:#FFFFFF; border-color:rgba(0,200,190,.6); box-shadow:0 0 0 3px rgba(0,200,190,.13); }
.is-invite input,.is-invite select{ background:#FFFFFF; }
input:-webkit-autofill{ -webkit-box-shadow:0 0 0 100px #FFFFFF inset !important; -webkit-text-fill-color:#1A2433 !important; }

/* — Toggle-Tracks: heller Grau-Hintergrund, weisser aktiver Knopf — */
.billing-toggle,.toggle-row{ background:#EAEEF3; border-color:var(--border2); }
.billing-toggle button.is-active,.billing-toggle [data-billing-cycle].is-active,
.toggle-btn.active{ background:#FFFFFF; color:var(--t1); box-shadow:0 1px 3px rgba(16,24,40,.14); }

/* — Karten/Reihen mit dezentem Schatten statt Glow — */
.mode-btn{ background:#FFFFFF; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.mode-btn:hover{ box-shadow:0 10px 28px -14px rgba(0,200,190,.35); }
.plan-card,.addon-row,.summary-card,.health-item,.chat-chip{ background:#FFFFFF; }
.summary-row{ background:#F5F8FB; }
.summary-row:hover{ background:#EEF3F8; }
.catalog-row{ background:#F8FAFC; }
.btn-secondary:hover:not(:disabled){ background:#EEF3F8; color:var(--t1); }

/* — Overlays & Modals — */
.loading-overlay{ background:rgba(16,24,40,.42); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.loading-card,.draft-modal{ background:#FFFFFF; border:1px solid var(--border2); box-shadow:0 28px 64px -20px rgba(16,24,40,.3); }
.draft-overlay{ background:rgba(16,24,40,.42); }

/* — Statusfarben auf hell lesbar — */
.error-bar{ background:rgba(240,68,56,.07); border-color:rgba(240,68,56,.22); color:#B42318; }
.remove-btn{ background:rgba(240,68,56,.08); border-color:rgba(240,68,56,.2); color:#DC2626; }
.remove-btn:hover{ background:rgba(240,68,56,.16); }

/* — Toggle-Switch Knopf weiss — */
.addon-switch-track{ background:#D8DFE8; border-color:rgba(20,40,70,.12); }
.addon-switch-track::after{ background:#FFFFFF; box-shadow:0 1px 3px rgba(16,24,40,.25); }

/* — Plan-Stack / Subscription Texte — */
.plan-stack li{ color:var(--t2); }
[data-plan-price]{ color:var(--t1); }

/* — Hint-Texte lesbar — */
.text-xs.text-slate-400,p.text-xs.text-slate-400,
p.text-xs.text-slate-500,.text-xs.text-slate-500,
p[class*="text-xs"]{ color:#7A8AA0 !important; }

/* — Mobil: Karte randlos & vollflächig — */
@media(max-width:820px){
  body{ padding:0; display:block; }
  .shell{ max-width:none; min-height:100vh; border:none; border-radius:0; box-shadow:none; }
}