/* FlowWizard — front-end wizard. Self-contained, theme-independent. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
.sf-fe, .sf-fe *{ box-sizing:border-box; }
.sf-fe{
  --accent:#0E7C7B; --accent-dark:#0A5C5B; --accent-50:#E6F4F4;
  --ink:#1A1A18; --ink-2:#5F5E5A; --ink-3:#888780;
  --line:#E0DDD6; --bg-2:#F8F8F6; --white:#fff;
  font-family:'DM Sans',-apple-system,sans-serif; color:var(--ink);
  max-width:860px; margin:24px auto; -webkit-font-smoothing:antialiased;
}
.sf-fe-notice{ font-family:'DM Sans',sans-serif; background:#F8F8F6; border:1px solid #E0DDD6; border-radius:10px; padding:16px 18px; color:#5F5E5A; font-size:14px; max-width:560px; margin:18px auto; text-align:center; }
.sf-fe__shell{ background:var(--white); border-radius:20px; box-shadow:0 18px 60px rgba(14,124,123,.10); border:1px solid #ECEAE3; display:flex; overflow:hidden; min-height:480px; }
.sf-fe__rail{ width:260px; min-width:260px; background:linear-gradient(170deg,var(--accent),var(--accent-dark)); color:#fff; padding:30px 26px; display:flex; flex-direction:column; }
.sf-fe__brand{ font-size:16px; font-weight:700; margin-bottom:6px; }
.sf-fe__welcome{ font-size:12.5px; color:rgba(255,255,255,.78); margin-bottom:32px; line-height:1.5; }
.sf-fe__steps{ display:flex; flex-direction:column; gap:2px; }
.sf-fe__step{ display:flex; align-items:center; gap:12px; padding:9px 0; font-size:13px; color:rgba(255,255,255,.6); }
.sf-fe__step .dot{ width:24px; height:24px; border-radius:50%; border:1.5px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.sf-fe__step.done{ color:rgba(255,255,255,.9); }
.sf-fe__step.done .dot{ background:rgba(255,255,255,.92); border-color:transparent; color:var(--accent-dark); }
.sf-fe__step.now{ color:#fff; font-weight:600; }
.sf-fe__step.now .dot{ background:#fff; border-color:#fff; color:var(--accent-dark); }
.sf-fe__rail-foot{ margin-top:auto; font-size:11px; color:rgba(255,255,255,.5); }
.sf-fe__body{ flex:1; padding:38px 42px; display:flex; flex-direction:column; min-width:0; }
.sf-fe__progress{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.sf-fe__h{ font-size:23px; font-weight:700; letter-spacing:-.02em; margin:0 0 6px; }
.sf-fe__d{ font-size:13.5px; color:var(--ink-2); margin-bottom:26px; }
.sf-fe__field{ margin-bottom:20px; }
.sf-fe__label{ display:block; font-size:13px; font-weight:600; margin-bottom:7px; }
.sf-fe__label .req{ color:#B3261E; margin-left:2px; }
.sf-fe__help{ font-size:11.5px; color:var(--ink-3); margin-top:5px; }
.sf-fe input[type=text], .sf-fe textarea, .sf-fe select{ width:100%; border:1px solid var(--line); border-radius:9px; padding:11px 13px; font-size:14px; font-family:inherit; color:var(--ink); background:var(--white); }
.sf-fe input[type=text]:focus, .sf-fe textarea:focus, .sf-fe select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-50); }
.sf-fe textarea{ resize:vertical; min-height:90px; }
.sf-fe__cards{ display:flex; gap:12px; flex-wrap:wrap; }
.sf-fe__card{ flex:1; min-width:140px; border:1.5px solid var(--line); border-radius:12px; padding:16px; cursor:pointer; transition:all .12s; font-size:13.5px; font-weight:500; }
.sf-fe__card:hover{ border-color:var(--accent); }
.sf-fe__card.sel{ border-color:var(--accent); background:var(--accent-50); color:var(--accent-dark); box-shadow:0 0 0 1px var(--accent); }
.sf-fe__choices{ display:flex; flex-direction:column; gap:9px; }
.sf-fe__choice{ display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer; padding:6px 0; }
.sf-fe__choice input{ width:17px; height:17px; accent-color:var(--accent); }
.sf-fe__toggle-row{ display:flex; align-items:center; gap:12px; }
.sf-fe__switch{ width:44px; height:26px; border-radius:99px; background:#D5D2C9; position:relative; cursor:pointer; transition:background .15s; flex-shrink:0; }
.sf-fe__switch.on{ background:var(--accent); }
.sf-fe__switch::after{ content:''; position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; top:3px; left:3px; transition:left .15s; }
.sf-fe__switch.on::after{ left:21px; }
.sf-fe__upload{ border:1.5px dashed var(--line); border-radius:12px; padding:22px; text-align:center; cursor:pointer; color:var(--ink-3); font-size:13px; }
.sf-fe__upload:hover{ border-color:var(--accent); color:var(--accent); }
.sf-fe__upload.has{ border-style:solid; color:var(--ink); }
.sf-fe__content{ font-size:14px; line-height:1.6; color:var(--ink-2); }
.sf-fe__err{ font-size:12px; color:#B3261E; margin-top:6px; display:none; }
.sf-fe__err.show{ display:block; }
.sf-fe__nav{ margin-top:auto; display:flex; align-items:center; gap:16px; padding-top:24px; }
.sf-fe__bar{ height:4px; background:var(--bg-2); border-radius:99px; flex:1; overflow:hidden; }
.sf-fe__bar i{ display:block; height:100%; background:var(--accent); border-radius:99px; transition:width .2s; }
.sf-fe__btns{ display:flex; gap:10px; }
.sf-fe__btn{ border:none; border-radius:9px; font-family:inherit; font-size:13.5px; font-weight:500; padding:11px 20px; cursor:pointer; }
.sf-fe__btn--p{ background:var(--accent); color:#fff; }
.sf-fe__btn--p:hover{ background:var(--accent-dark); }
.sf-fe__btn--p:disabled{ opacity:.6; cursor:default; }
.sf-fe__btn--g{ background:var(--white); color:var(--ink-2); border:1px solid var(--line); }
.sf-fe__btn--g:hover{ background:var(--bg-2); }
/* finish screen */
.sf-fe__finish{ text-align:center; padding:60px 30px; display:flex; flex-direction:column; align-items:center; }
.sf-fe__finish-mark{ width:64px; height:64px; border-radius:50%; background:var(--accent-50); color:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.sf-fe__finish-mark svg{ width:32px; height:32px; }
.sf-fe__finish h2{ font-size:22px; font-weight:700; margin-bottom:8px; }
.sf-fe__finish p{ font-size:14px; color:var(--ink-2); }
@media (max-width:680px){
  .sf-fe__shell{ flex-direction:column; }
  .sf-fe__rail{ width:100%; min-width:0; padding:22px 24px; }
  .sf-fe__steps{ flex-direction:row; flex-wrap:wrap; gap:10px; }
  .sf-fe__step .nm{ display:none; }
  .sf-fe__body{ padding:26px 22px; }
}