/* SaleOs first-run setup wizard — self-contained theme (RTL, dark) */
:root {
  --stp-bg: #0b1220;
  --stp-bg2: #111c33;
  --stp-card: rgba(255,255,255,.04);
  --stp-border: rgba(255,255,255,.10);
  --stp-accent: #f5b301;      /* amber */
  --stp-accent-2: #38bdf8;    /* sky */
  --stp-text: #e6edf6;
  --stp-muted: #93a4bd;
  --stp-ok: #34d399;
  --stp-warn: #fbbf24;
  --stp-err: #f87171;
  --stp-radius: 16px;
}

.stp-wrap {
  position: fixed; inset: 0;
  display: flex; min-height: 100%;
  font-family: inherit;
  color: var(--stp-text);
  background:
    radial-gradient(1200px 600px at 90% -10%, rgba(56,189,248,.12), transparent 60%),
    radial-gradient(1000px 600px at -10% 110%, rgba(245,179,1,.10), transparent 55%),
    linear-gradient(160deg, var(--stp-bg), var(--stp-bg2));
  overflow: auto;
}

/* Left rail with steps */
.stp-rail {
  width: 300px; flex: 0 0 300px;
  padding: 32px 24px;
  border-inline-start: 1px solid var(--stp-border);
  background: rgba(0,0,0,.18);
  display: flex; flex-direction: column; gap: 8px;
}
.stp-brand { display:flex; align-items:center; gap:12px; margin-bottom: 28px; }
.stp-brand .stp-logo { width:44px;height:44px;border-radius:12px;object-fit:contain;background:rgba(255,255,255,.06);padding:6px; }
.stp-brand h1 { font-size: 1.15rem; font-weight: 800; margin:0; color: var(--stp-accent); }
.stp-brand p { font-size:.72rem; color: var(--stp-muted); margin:2px 0 0; }

.stp-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.stp-step { display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; color:var(--stp-muted); transition:.15s; }
.stp-step .stp-num { width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:rgba(255,255,255,.06);border:1px solid var(--stp-border);flex:0 0 28px; }
.stp-step .stp-ic { width:18px;height:18px;opacity:.8; }
.stp-step .stp-lbl { font-size:.86rem; font-weight:600; }
.stp-step.is-active { color:var(--stp-text); background:var(--stp-card); }
.stp-step.is-active .stp-num { background:var(--stp-accent); color:#1a1300; border-color:transparent; }
.stp-step.is-done { color:var(--stp-text); }
.stp-step.is-done .stp-num { background:rgba(52,211,153,.18); color:var(--stp-ok); border-color:rgba(52,211,153,.4); }
.stp-step.is-optional .stp-lbl::after { content:"اختیاری"; font-size:.62rem; color:var(--stp-muted); margin-inline-start:6px; padding:1px 6px; border:1px solid var(--stp-border); border-radius:8px; }

/* Main panel */
.stp-main { flex:1; display:flex; flex-direction:column; align-items:center; padding:48px 24px; }
.stp-card { width:100%; max-width:680px; background:var(--stp-card); border:1px solid var(--stp-border); border-radius:var(--stp-radius); padding:36px; backdrop-filter: blur(8px); box-shadow:0 20px 60px rgba(0,0,0,.35); }
.stp-progress { width:100%;max-width:680px;height:6px;border-radius:99px;background:rgba(255,255,255,.08);margin-bottom:24px;overflow:hidden; }
.stp-progress > span { display:block;height:100%;background:linear-gradient(90deg,var(--stp-accent),var(--stp-accent-2));transition:width .35s ease; }

.stp-hero { display:flex; align-items:center; gap:16px; margin-bottom:8px; }
.stp-hero .stp-hero-ic { width:52px;height:52px;flex:0 0 52px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(245,179,1,.18),rgba(56,189,248,.18));color:var(--stp-accent); }
.stp-hero .stp-hero-ic svg{width:28px;height:28px;}
.stp-title { font-size:1.5rem; font-weight:800; margin:0; }
.stp-sub { color:var(--stp-muted); font-size:.92rem; margin:6px 0 26px; line-height:1.7; }

/* Fields */
.stp-field { margin-bottom:18px; }
.stp-field label { display:block; font-size:.85rem; font-weight:600; margin-bottom:7px; color:var(--stp-text); }
.stp-input { width:100%; padding:12px 14px; border-radius:12px; background:rgba(0,0,0,.25); border:1px solid var(--stp-border); color:var(--stp-text); font-size:.95rem; transition:.15s; }
.stp-input:focus { outline:none; border-color:var(--stp-accent); box-shadow:0 0 0 3px rgba(245,179,1,.15); }
.stp-input.dir-ltr { direction:ltr; text-align:left; }
.stp-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.stp-hint { font-size:.76rem; color:var(--stp-muted); margin-top:6px; }
.stp-err-text { color:var(--stp-err); font-size:.8rem; margin-top:6px; }

/* Choice cards (db type, templates, roles) */
.stp-choices { display:grid; gap:14px; }
.stp-choices.cols-2 { grid-template-columns:repeat(2,1fr); }
.stp-choices.cols-3 { grid-template-columns:repeat(3,1fr); }
.stp-choice { position:relative; text-align:start; cursor:pointer; border:1.5px solid var(--stp-border); background:rgba(0,0,0,.2); border-radius:14px; padding:18px; transition:.15s; display:flex; flex-direction:column; gap:10px; }
.stp-choice:hover { border-color:var(--stp-accent-2); transform:translateY(-1px); }
.stp-choice.is-selected { border-color:var(--stp-accent); background:linear-gradient(135deg,rgba(245,179,1,.10),rgba(56,189,248,.06)); }
.stp-choice .stp-choice-ic { width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--stp-accent-2); }
.stp-choice .stp-choice-ic svg{width:22px;height:22px;}
.stp-choice h3 { margin:0; font-size:1rem; font-weight:700; }
.stp-choice p { margin:0; font-size:.8rem; color:var(--stp-muted); line-height:1.6; }
.stp-choice .stp-badge { position:absolute; inset-inline-end:14px; top:14px; font-size:.62rem; padding:2px 8px; border-radius:8px; background:rgba(52,211,153,.18); color:var(--stp-ok); }
.stp-choice .stp-pick { position:absolute; inset-inline-end:14px; bottom:14px; width:22px;height:22px;border-radius:50%;border:2px solid var(--stp-border); display:grid;place-items:center; opacity:0; }
.stp-choice.is-selected .stp-pick { opacity:1; background:var(--stp-accent); border-color:transparent; color:#1a1300; }
.stp-choice .stp-pick svg{width:14px;height:14px;}

/* Env check rows */
.stp-checks { display:flex; flex-direction:column; gap:8px; margin:6px 0 8px; }
.stp-check-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; background:rgba(0,0,0,.2); border:1px solid var(--stp-border); }
.stp-check-row .stp-ci { width:20px;height:20px;flex:0 0 20px; }
.stp-check-row .stp-cl { flex:1; font-size:.85rem; }
.stp-check-row .stp-cv { font-size:.78rem; color:var(--stp-muted); }
.stp-check-row.ok .stp-ci { color:var(--stp-ok); }
.stp-check-row.warn .stp-ci { color:var(--stp-warn); }
.stp-check-row.error .stp-ci { color:var(--stp-err); }

/* Buttons / actions */
.stp-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:28px; }
.stp-actions .stp-left { display:flex; gap:10px; }
.stp-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:12px; font-weight:700; font-size:.92rem; cursor:pointer; border:1px solid transparent; transition:.15s; }
.stp-btn svg{width:18px;height:18px;}
.stp-btn-primary { background:linear-gradient(135deg,var(--stp-accent),#f59e0b); color:#1a1300; }
.stp-btn-primary:hover { filter:brightness(1.06); }
.stp-btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.stp-btn-ghost { background:transparent; border-color:var(--stp-border); color:var(--stp-text); }
.stp-btn-ghost:hover { background:rgba(255,255,255,.05); }
.stp-btn-skip { background:transparent; color:var(--stp-muted); }
.stp-btn-skip:hover { color:var(--stp-text); }
.stp-btn-test { background:rgba(56,189,248,.14); color:var(--stp-accent-2); border-color:rgba(56,189,248,.3); }

/* Spinner */
.stp-spin svg { animation: stp-rotate 0.8s linear infinite; }
@keyframes stp-rotate { to { transform: rotate(360deg); } }

/* Alerts */
.stp-alert { display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:12px; font-size:.84rem; margin:6px 0 14px; line-height:1.6; }
.stp-alert svg{width:18px;height:18px;flex:0 0 18px;margin-top:2px;}
.stp-alert.ok { background:rgba(52,211,153,.1); color:var(--stp-ok); border:1px solid rgba(52,211,153,.3); }
.stp-alert.warn { background:rgba(251,191,36,.1); color:var(--stp-warn); border:1px solid rgba(251,191,36,.3); }
.stp-alert.err { background:rgba(248,113,113,.1); color:var(--stp-err); border:1px solid rgba(248,113,113,.3); }
.stp-alert.info { background:rgba(56,189,248,.1); color:var(--stp-accent-2); border:1px solid rgba(56,189,248,.3); }

/* Password strength */
.stp-strength { height:5px; border-radius:99px; background:rgba(255,255,255,.08); margin-top:8px; overflow:hidden; }
.stp-strength > span { display:block; height:100%; width:0; transition:.25s; }
.stp-strength.s1 > span { width:25%; background:var(--stp-err); }
.stp-strength.s2 > span { width:50%; background:var(--stp-warn); }
.stp-strength.s3 > span { width:75%; background:var(--stp-accent-2); }
.stp-strength.s4 > span { width:100%; background:var(--stp-ok); }

/* chip editor (lookups) */
.stp-chips { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.stp-chip { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:10px; background:rgba(0,0,0,.25); border:1px solid var(--stp-border); font-size:.85rem; }
.stp-chip button { background:none; border:none; color:var(--stp-muted); cursor:pointer; font-size:1rem; line-height:1; }
.stp-chip button:hover { color:var(--stp-err); }
.stp-lookup-block { margin-bottom:18px; }
.stp-lookup-block h4 { font-size:.9rem; font-weight:700; margin:0 0 4px; display:flex; align-items:center; gap:8px; }
.stp-lookup-block h4 svg{width:16px;height:16px;color:var(--stp-accent-2);}
.stp-addrow { display:flex; gap:8px; }
.stp-addrow .stp-input { flex:1; }

.stp-step-pane { display:none; }
.stp-step-pane.is-active { display:block; animation: stp-fade .25s ease; }
@keyframes stp-fade { from { opacity:0; transform:translateY(6px);} to {opacity:1; transform:none;} }

/* Responsive */
@media (max-width: 860px) {
  .stp-rail { display:none; }
  .stp-main { padding:28px 14px; }
  .stp-card { padding:24px; }
  .stp-row, .stp-choices.cols-2, .stp-choices.cols-3 { grid-template-columns:1fr; }
}