/* ═══════════════════════════════════════════════════════════════════
   JSI SmartLinks Pro — Premium UI v2
   Design tokens + Auth + Dashboard + Analytics + Billing + Create + Bio Link
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design tokens ────────────────────────────────────────────────── */
:root {
  --jsi-primary:       #25003E;
  --jsi-primary-mid:  #3c0063;
  --jsi-accent:        #FFC600;
  --jsi-accent-dark:   #e6b000;
  --jsi-bg:            #0d0d1a;
  --jsi-bg-card:       #161628;
  --jsi-bg-panel:      #1a1a30;
  --jsi-border:        rgba(255,255,255,.08);
  --jsi-border-focus:  rgba(255,198,0,.45);
  --jsi-text:          #f1f1f5;
  --jsi-text-muted:    #9090b0;
  --jsi-text-faint:    #52527a;
  --jsi-radius:        14px;
  --jsi-radius-sm:     8px;
  --jsi-radius-lg:     20px;
  --jsi-shadow:        0 4px 24px rgba(0,0,0,.4);
  --jsi-shadow-lg:     0 16px 64px rgba(0,0,0,.6);
  --jsi-glow-accent:   0 0 32px rgba(255,198,0,.18);
  --jsi-glow-primary:  0 0 48px rgba(37,0,62,.6);
  --jsi-font:          'Inter', system-ui, -apple-system, sans-serif;
  --jsi-font-display:  'Space Grotesk', var(--jsi-font);
  --jsi-trans:         all .18s cubic-bezier(.4,0,.2,1);
}

/* ── Global reset for plugin scope ────────────────────────────────── */
.jsi-auth-wrap *,
.jsi-dash-wrap *,
.jsi-analytics-wrap *,
.jsi-billing-wrap *,
.jsi-create-wrap *,
.jsi-profile-wrap *,
.jsi-campaigns-wrap *,
.jsi-biolink-wrap * {
  box-sizing: border-box;
  margin: 0; padding: 0;
}

.jsi-auth-wrap,
.jsi-dash-wrap,
.jsi-analytics-wrap,
.jsi-billing-wrap,
.jsi-create-wrap,
.jsi-profile-wrap,
.jsi-campaigns-wrap,
.jsi-biolink-wrap {
  font-family: var(--jsi-font);
  color: var(--jsi-text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ══════════════════════════════════════════════════════════════════
   AUTH LAYOUT (login, register, forgot, reset)
   ══════════════════════════════════════════════════════════════════ */

.jsi-auth-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  background: var(--jsi-bg);
}
.jsi-auth-wrap--register { grid-template-columns: 1fr 1.1fr; }
.jsi-auth-wrap--narrow   { grid-template-columns: 1fr 1fr; }

/* Left panel */
.jsi-auth-left {
  position: relative;
  background: linear-gradient(145deg, var(--jsi-primary) 0%, #0a0014 100%);
  display: flex;
  flex-direction: column;
  padding: 3rem 3.5rem;
  overflow: hidden;
}
.jsi-auth-brand { margin-bottom: auto; }
.jsi-auth-logo  { display:flex; align-items:center; gap:.75rem; font-family:var(--jsi-font-display); font-weight:700; font-size:1.1rem; color:#fff; text-decoration:none; }
.jsi-auth-logo svg { flex-shrink:0; }

.jsi-auth-hero { margin-top: 4rem; margin-bottom: 3rem; position: relative; z-index:1; }
.jsi-auth-hero h1 { font-family:var(--jsi-font-display); font-size:clamp(2.5rem,4vw,3.6rem); font-weight:800; line-height:1.08; color:#fff; letter-spacing:-.04em; }
.jsi-auth-gradient { background: linear-gradient(90deg,var(--jsi-accent),#ff6b6b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.jsi-auth-hero p   { margin-top:1.25rem; color:rgba(255,255,255,.65); font-size:1.05rem; max-width:380px; line-height:1.6; }
.jsi-auth-features { margin-top:2rem; display:flex; flex-direction:column; gap:.75rem; }
.jsi-auth-feat     { display:flex; align-items:center; gap:.75rem; color:rgba(255,255,255,.8); font-size:.95rem; }
.jsi-auth-feat-icon{ font-size:1.1rem; }

/* Decorative orbs */
.jsi-auth-orbs { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(80px); }
.orb-1 { width:350px; height:350px; background:rgba(255,198,0,.08); top:-80px; right:-100px; }
.orb-2 { width:250px; height:250px; background:rgba(139,92,246,.12); bottom:80px; left:-60px; }
.orb-3 { width:180px; height:180px; background:rgba(99,102,241,.1); top:50%; right:40px; }

/* Right panel */
.jsi-auth-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 3rem;
  background: var(--jsi-bg);
  overflow-y: auto;
}

/* Auth card */
.jsi-auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--jsi-bg-card);
  border: 1px solid var(--jsi-border);
  border-radius: var(--jsi-radius-lg);
  padding: 2.5rem;
  box-shadow: var(--jsi-shadow-lg);
}
.jsi-auth-card--wide { max-width: 520px; }

.jsi-auth-card-header { margin-bottom:2rem; }
.jsi-auth-card-header h2 { font-family:var(--jsi-font-display); font-size:1.75rem; font-weight:700; color:var(--jsi-text); margin-bottom:.5rem; }
.jsi-auth-card-header p { color:var(--jsi-text-muted); font-size:.93rem; }
.jsi-auth-card-header p a { color:var(--jsi-accent); text-decoration:none; font-weight:600; }
.jsi-auth-card-header p a:hover { text-decoration:underline; }

/* Auth alert */
.jsi-auth-alert {
  padding:.875rem 1.1rem;
  border-radius:var(--jsi-radius-sm);
  font-size:.9rem;
  font-weight:500;
  margin-bottom:1.25rem;
  line-height:1.4;
}
.jsi-auth-alert--error   { background:rgba(239,68,68,.12); color:#fca5a5; border:1px solid rgba(239,68,68,.25); }
.jsi-auth-alert--success { background:rgba(34,197,94,.12); color:#86efac; border:1px solid rgba(34,197,94,.25); }
.jsi-auth-alert--info    { background:rgba(99,102,241,.12); color:#a5b4fc; border:1px solid rgba(99,102,241,.25); }

/* Auth notice */
.jsi-auth-notice { padding:1.25rem 1.5rem; border-radius:var(--jsi-radius-sm); background:var(--jsi-bg-card); border:1px solid var(--jsi-border); color:var(--jsi-text-muted); }
.jsi-auth-notice--error { background:rgba(239,68,68,.1); color:#fca5a5; border-color:rgba(239,68,68,.2); }

/* ── Form fields ────────────────────────────────────────────────── */
.jsi-field { display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.jsi-field + .jsi-field, .jsi-field + .jsi-field-row, .jsi-field-row + .jsi-field { margin-top:1.25rem; }
.jsi-field-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; margin-top:1.25rem; }

.jsi-label { font-size:.83rem; font-weight:600; color:var(--jsi-text-muted); text-transform:uppercase; letter-spacing:.06em; }
.jsi-label .req { color:var(--jsi-accent); }
.jsi-label-row { display:flex; justify-content:space-between; align-items:center; }
.jsi-label-link { font-size:.83rem; color:var(--jsi-accent); text-decoration:none; font-weight:500; }
.jsi-label-link:hover { text-decoration:underline; }

.jsi-input-wrap { position:relative; display:flex; align-items:center; min-width:0; }
.jsi-input-icon { position:absolute; left:.85rem; color:var(--jsi-text-faint); width:16px; flex-shrink:0; }

.jsi-input {
  width:100%; min-width:0; max-width:100%; background:rgba(255,255,255,.04); border:1.5px solid var(--jsi-border);
  border-radius:var(--jsi-radius-sm); padding:.75rem 1rem; color:var(--jsi-text);
  font-size:.95rem; font-family:var(--jsi-font);
  transition: var(--jsi-trans);
  appearance: none;
}
.jsi-input-wrap .jsi-input { padding-left:2.75rem; min-width:0; }
.jsi-input:focus { outline:none; border-color:var(--jsi-border-focus); background:rgba(255,198,0,.04); box-shadow:0 0 0 3px rgba(255,198,0,.1); }
.jsi-input::placeholder { color:var(--jsi-text-faint); }
.jsi-input--sm { padding:.55rem .85rem; font-size:.88rem; }
.jsi-input--color { width:52px; height:40px; padding:.25rem; cursor:pointer; border-radius:var(--jsi-radius-sm); }
.jsi-textarea { resize:vertical; min-height:80px; }
.jsi-select { width:100%; background:rgba(255,255,255,.04); border:1.5px solid var(--jsi-border); border-radius:var(--jsi-radius-sm); padding:.75rem 1rem; color:var(--jsi-text); font-size:.95rem; font-family:var(--jsi-font); cursor:pointer; transition:var(--jsi-trans); }
.jsi-select:focus { outline:none; border-color:var(--jsi-border-focus); }

.jsi-toggle-pass { position:absolute; right:.75rem; background:none; border:none; cursor:pointer; color:var(--jsi-text-faint); padding:.25rem; display:flex; transition:var(--jsi-trans); }
.jsi-toggle-pass:hover { color:var(--jsi-text); }
.jsi-toggle-pass svg { width:18px; }

.jsi-input-wrap--slug { background:rgba(255,255,255,.04); border:1.5px solid var(--jsi-border); border-radius:var(--jsi-radius-sm); overflow:hidden; transition:var(--jsi-trans); }
.jsi-input-wrap--slug:focus-within { border-color:var(--jsi-border-focus); box-shadow:0 0 0 3px rgba(255,198,0,.1); }
.jsi-slug-prefix { padding:.75rem .65rem .75rem 1rem; color:var(--jsi-text-faint); font-size:.82rem; white-space:nowrap; border-right:1px solid var(--jsi-border); flex-shrink:0; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.jsi-input--slug { flex:1 1 0; min-width:0; }
.jsi-input--slug { border:none; border-radius:0; background:transparent; box-shadow:none; padding:.75rem .75rem; }
.jsi-input--slug:focus { outline:none; box-shadow:none; background:transparent; border:none; }

/* Password strength */
.jsi-pass-strength { display:flex; align-items:center; gap:.65rem; margin-top:.4rem; }
.jsi-pass-bar { flex:1; height:4px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.jsi-pass-bar span { display:block; height:100%; width:0; border-radius:99px; transition:width .3s, background .3s; }
#jsi-pass-label { font-size:.8rem; font-weight:600; min-width:48px; }

/* Checkbox */
.jsi-check-row { margin-top:1rem; }
.jsi-check-label { display:inline-flex; align-items:center; gap:.65rem; cursor:pointer; font-size:.93rem; color:var(--jsi-text-muted); user-select:none; }
.jsi-check-label--sm { font-size:.83rem; }
.jsi-check { position:absolute; opacity:0; width:0; height:0; }
.jsi-check-box { width:18px; height:18px; border:2px solid var(--jsi-border); border-radius:5px; display:grid; place-items:center; flex-shrink:0; transition:var(--jsi-trans); background:transparent; }
.jsi-check-box--sm { width:15px; height:15px; border-radius:4px; }
.jsi-check:checked ~ .jsi-check-box { background:var(--jsi-accent); border-color:var(--jsi-accent); }
.jsi-check:checked ~ .jsi-check-box::after { content:''; width:10px; height:6px; border-left:2px solid #000; border-bottom:2px solid #000; transform:rotate(-45deg) translate(1px,-1px); display:block; }

/* Checkbox pill grid (e.g. Working Days / Category picker) — was referenced in
   create-booking.php markup but never defined here, so it fell back to
   unstyled native rendering + whatever the active theme's own `label`/
   checkbox CSS happened to apply, which is why text/checkboxes went invisible
   on sites with a dark plugin theme + light-theme form defaults. */
.jsi-checkbox-grid { display:flex; flex-wrap:wrap; gap:.6rem; }
.jsi-checkbox-pill {
  display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; user-select:none;
  padding:.55rem 1rem; border-radius:999px; border:1.5px solid var(--jsi-border);
  background:rgba(255,255,255,.03); color:var(--jsi-text-muted) !important;
  font-size:.85rem; font-weight:500; transition:var(--jsi-trans);
}
.jsi-checkbox-pill:hover { border-color:var(--jsi-border-focus); }
.jsi-checkbox-pill input[type="checkbox"] { accent-color:var(--jsi-accent); width:15px; height:15px; flex-shrink:0; cursor:pointer; }
.jsi-checkbox-pill:has(input:checked) { border-color:var(--jsi-accent); background:rgba(255,198,0,.08); color:var(--jsi-text) !important; }
.jsi-checkbox-pill span { color:inherit; }

/* Inline checkbox + label (e.g. "Deposit Required", "Required" question toggle) */
.jsi-checkbox-inline {
  display:flex; align-items:center; gap:.5rem; font-size:.85rem;
  color:var(--jsi-text-muted) !important; cursor:pointer; user-select:none;
}
.jsi-checkbox-inline input[type="checkbox"] { accent-color:var(--jsi-accent); width:15px; height:15px; cursor:pointer; }

/* Safety net: any native checkbox rendered inside a plugin dashboard/wizard
   should always be visible and on-brand, even if a template forgets to add
   one of the classes above. */
.jsi-create-wrap input[type="checkbox"],
.jsi-profile-wrap input[type="checkbox"],
.jsi-campaigns-wrap input[type="checkbox"],
.jsi-biolink-wrap input[type="checkbox"] {
  accent-color: var(--jsi-accent);
}

/* Safety net: explicit color on every bare <label> in plugin-scoped wraps so
   an active theme's own `label { color: ... }` rule (which otherwise wins
   over inherited color, since it sets the property directly on the element)
   can never make field labels unreadable again. Pill/inline labels above
   already set their own color and are unaffected. */
.jsi-create-wrap label,
.jsi-profile-wrap label,
.jsi-campaigns-wrap label,
.jsi-biolink-wrap label {
  color: var(--jsi-text-muted) !important;
}

/* Auth divider */
.jsi-auth-divider { display:flex; align-items:center; gap:1rem; color:var(--jsi-text-faint); font-size:.83rem; margin:1.5rem 0; }
.jsi-auth-divider::before,.jsi-auth-divider::after { content:''; flex:1; height:1px; background:var(--jsi-border); }

/* Terms */
.jsi-auth-terms { font-size:.83rem; color:var(--jsi-text-faint); line-height:1.5; margin-top:1rem; }
.jsi-auth-terms a { color:var(--jsi-accent); text-decoration:none; }

/* ── Buttons ────────────────────────────────────────────────────── */
.jsi-btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--jsi-accent); color:#000; font-weight:700; font-size:.93rem;
  border:none; border-radius:var(--jsi-radius-sm); padding:.8rem 1.5rem;
  cursor:pointer; transition:var(--jsi-trans); text-decoration:none; position:relative; overflow:hidden;
  font-family:var(--jsi-font);
}
.jsi-btn-primary:hover  { background:var(--jsi-accent-dark); transform:translateY(-1px); box-shadow:var(--jsi-glow-accent); }
.jsi-btn-primary:active { transform:translateY(0); }
.jsi-btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.jsi-btn-full { width:100%; }

.jsi-btn-outline {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:transparent; color:var(--jsi-text); font-weight:600; font-size:.93rem;
  border:1.5px solid var(--jsi-border); border-radius:var(--jsi-radius-sm); padding:.78rem 1.5rem;
  cursor:pointer; transition:var(--jsi-trans); text-decoration:none; font-family:var(--jsi-font);
}
.jsi-btn-outline:hover { border-color:var(--jsi-accent); color:var(--jsi-accent); background:rgba(255,198,0,.05); }

.jsi-btn-ghost {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:transparent; color:var(--jsi-text-muted); font-weight:600; font-size:.88rem;
  border:1.5px solid var(--jsi-border); border-radius:var(--jsi-radius-sm); padding:.65rem 1.25rem;
  cursor:pointer; transition:var(--jsi-trans); text-decoration:none; font-family:var(--jsi-font);
}
.jsi-btn-ghost:hover { color:var(--jsi-text); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.04); }

.jsi-btn-accent {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(135deg,var(--jsi-accent),#ffdb57); color:#1a0028; font-weight:700; font-size:.9rem;
  border:none; border-radius:var(--jsi-radius-sm); padding:.7rem 1.35rem;
  cursor:pointer; transition:var(--jsi-trans); text-decoration:none; font-family:var(--jsi-font);
}
.jsi-btn-accent:hover { transform:translateY(-1px); box-shadow:var(--jsi-glow-accent); }

.jsi-btn-danger { background:#ef4444; color:#fff; border:none; border-radius:var(--jsi-radius-sm); padding:.7rem 1.35rem; font-weight:600; cursor:pointer; font-family:var(--jsi-font); transition:var(--jsi-trans); }
.jsi-btn-danger:hover { background:#dc2626; }

.jsi-btn-sm { padding:.5rem .9rem; font-size:.83rem; }
.jsi-btn-row { display:flex; gap:1rem; align-items:center; margin-top:1.5rem; }

/* Spinner */
.jsi-btn-spinner { display:flex; align-items:center; }
.jsi-btn-spinner svg { width:18px; height:18px; }

/* ── Registration steps ─────────────────────────────────────────── */
.jsi-steps { display:flex; align-items:center; gap:0; margin-bottom:2rem; }
.jsi-step { display:flex; align-items:center; gap:.5rem; flex-direction:column; min-width:64px; }
.jsi-step span { width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.06); border:2px solid var(--jsi-border); display:grid; place-items:center; font-size:.83rem; font-weight:700; color:var(--jsi-text-faint); transition:var(--jsi-trans); }
.jsi-step em { font-style:normal; font-size:.73rem; font-weight:600; color:var(--jsi-text-faint); text-transform:uppercase; letter-spacing:.05em; }
.jsi-step.is-active span { background:var(--jsi-accent); border-color:var(--jsi-accent); color:#000; }
.jsi-step.is-active em { color:var(--jsi-accent); }
.jsi-step.is-done span { background:rgba(34,197,94,.15); border-color:#22c55e; color:#22c55e; }
.jsi-step-line { flex:1; height:2px; background:var(--jsi-border); margin:0 .25rem; margin-bottom:1.1rem; }

.jsi-reg-step { display:block; }

/* Step 3 success */
.jsi-reg-success { text-align:center; padding:2rem 0; }
.jsi-reg-success-icon { font-size:4rem; margin-bottom:1rem; }
.jsi-reg-success h3 { font-size:1.5rem; font-weight:700; margin-bottom:.5rem; }
.jsi-reg-success p  { color:var(--jsi-text-muted); margin-bottom:1.5rem; }
.jsi-progress-bar { background:rgba(255,255,255,.08); height:6px; border-radius:99px; overflow:hidden; }
.jsi-progress-fill { height:100%; background:var(--jsi-accent); width:0; transition:width .05s linear; }

/* Field hints */
.jsi-field-hint { font-size:.8rem; color:var(--jsi-text-faint); margin-top:.3rem; }
.jsi-field-hint--ok  { color:#86efac; }
.jsi-field-hint--err { color:#fca5a5; }

/* ══════════════════════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════════════════════ */
.jsi-dash-wrap { padding: 2rem; max-width: 1400px; margin: 0 auto; background: var(--jsi-bg); min-height: 100vh; }
.jsi-page-title { font-family:var(--jsi-font-display); font-size:1.75rem; font-weight:700; color:var(--jsi-text); }
.jsi-page-sub   { color:var(--jsi-text-muted); margin-top:.25rem; font-size:.93rem; }

.jsi-dash-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:2rem; gap:1rem; flex-wrap:wrap; }
.jsi-dash-header-left { display:flex; align-items:center; gap:1.25rem; }
.jsi-dash-avatar { position:relative; }
.jsi-dash-avatar img { width:64px; height:64px; border-radius:50%; border:3px solid var(--jsi-accent); object-fit:cover; }
.jsi-dash-avatar-ring { position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(255,198,0,.25); animation:pulse-ring 2s ease-in-out infinite; }
@keyframes pulse-ring { 0%,100%{transform:scale(1);opacity:.5} 50%{transform:scale(1.05);opacity:.25} }
.jsi-dash-greeting { font-family:var(--jsi-font-display); font-size:1.5rem; font-weight:700; }
.jsi-dash-sub { color:var(--jsi-text-muted); font-size:.88rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.2rem; }

/* Plan badge */
.jsi-plan-badge { display:inline-block; padding:.2rem .65rem; border-radius:99px; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.jsi-plan-badge--free         { background:rgba(107,114,128,.2); color:#9ca3af; }
.jsi-plan-badge--starter      { background:rgba(59,130,246,.2);  color:#93c5fd; }
.jsi-plan-badge--professional,
.jsi-plan-badge--pro          { background:rgba(139,92,246,.2);  color:#c4b5fd; }
.jsi-plan-badge--business     { background:rgba(245,158,11,.2);  color:#fde68a; }
.jsi-plan-badge--enterprise   { background:rgba(255,198,0,.2);   color:var(--jsi-accent); }

/* KPI grid */
.jsi-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:2rem; }
.jsi-kpi-card { background:var(--jsi-bg-card); border:1px solid var(--jsi-border); border-radius:var(--jsi-radius); padding:1.5rem; position:relative; overflow:hidden; transition:var(--jsi-trans); }

/* Shared alert banner — used by the add-ons marketplace and the booking
   composer; previously had no styling at all in either place. */
.jsi-alert { border-radius:var(--jsi-radius-sm); padding:.85rem 1.1rem; font-size:.88rem; font-weight:500; border:1px solid var(--jsi-border); background:var(--jsi-bg-card); color:var(--jsi-text); }
.jsi-alert-success, .jsi-alert-success.jsi-alert { background:rgba(74,222,128,.1); color:#4ade80; border-color:rgba(74,222,128,.25); }
.jsi-alert-error, .jsi-alert-error.jsi-alert     { background:rgba(239,68,68,.12); color:#fca5a5; border-color:rgba(239,68,68,.25); }
.jsi-alert-warning, .jsi-alert-warning.jsi-alert { background:rgba(255,198,0,.1); color:var(--jsi-accent); border-color:rgba(255,198,0,.3); }

/* Add-ons & Email Credits marketplace */
.jsi-addon-credit-banner { background:rgba(255,198,0,.08); border:1px solid rgba(255,198,0,.3); border-radius:var(--jsi-radius); padding:1.1rem 1.4rem; margin-bottom:1.75rem; }
.jsi-addon-credit-label  { display:block; font-size:.78rem; font-weight:600; color:var(--jsi-text-muted); text-transform:uppercase; letter-spacing:.05em; }
.jsi-addon-credit-amount { font-family:var(--jsi-font-display); font-size:1.9rem; font-weight:800; color:var(--jsi-accent); }
.jsi-addon-credit-banner p { margin:.4rem 0 0; font-size:.85rem; color:var(--jsi-text-muted); }

.jsi-addon-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.1rem; }
.jsi-addon-card {
  background:var(--jsi-bg-card); border:1px solid var(--jsi-border); border-radius:var(--jsi-radius);
  padding:1.5rem; display:flex; flex-direction:column; gap:.6rem; transition:var(--jsi-trans);
}
.jsi-addon-card:hover { border-color:rgba(255,255,255,.18); transform:translateY(-2px); box-shadow:var(--jsi-shadow); }
.jsi-addon-card-type   { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--jsi-accent); font-weight:700; }
.jsi-addon-card h3      { margin:0; font-family:var(--jsi-font-display); font-size:1.1rem; color:var(--jsi-text); }
.jsi-addon-card-desc    { font-size:.85rem; color:var(--jsi-text-muted); flex-grow:1; line-height:1.5; }
.jsi-addon-card-price   { font-family:var(--jsi-font-display); font-size:1.5rem; font-weight:800; color:var(--jsi-text); }
.jsi-addon-card-price span { font-family:var(--jsi-font); font-size:.8rem; font-weight:400; color:var(--jsi-text-muted); }
.jsi-addon-card-qty     { display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:var(--jsi-text-muted); }
.jsi-addon-card-qty label { font-weight:600; }
.jsi-addon-card-qty input {
  width:60px; padding:.4rem .6rem; border-radius:var(--jsi-radius-sm); border:1.5px solid var(--jsi-border);
  background:rgba(255,255,255,.04); color:var(--jsi-text); font-family:var(--jsi-font);
}
.jsi-addon-card-qty input:focus { outline:none; border-color:var(--jsi-border-focus); }
.jsi-addon-card-grants  { font-size:.78rem; }
.jsi-addon-active-pill  {
  background:rgba(74,222,128,.12); color:#4ade80; border-radius:var(--jsi-radius-sm);
  padding:.6rem .8rem; font-size:.82rem; font-weight:600; text-align:center;
}
.jsi-addon-buy:disabled { opacity:.6; cursor:not-allowed; }

.jsi-kpi-card:hover { border-color:rgba(255,255,255,.15); transform:translateY(-2px); box-shadow:var(--jsi-shadow); }
.jsi-kpi-icon { width:44px; height:44px; border-radius:var(--jsi-radius-sm); display:grid; place-items:center; margin-bottom:1rem; }
.jsi-kpi-icon svg { width:22px; height:22px; }
.jsi-kpi-icon--purple { background:rgba(139,92,246,.15); color:#a78bfa; }
.jsi-kpi-icon--gold   { background:rgba(255,198,0,.12);  color:var(--jsi-accent); }
.jsi-kpi-icon--blue   { background:rgba(34,211,238,.12); color:#22d3ee; }
.jsi-kpi-icon--green  { background:rgba(34,197,94,.12);  color:#4ade80; }
.jsi-kpi-icon--pink   { background:rgba(236,72,153,.12); color:#f472b6; }
.jsi-kpi-val   { font-family:var(--jsi-font-display); font-size:2rem; font-weight:800; color:var(--jsi-text); line-height:1; }
.jsi-kpi-label { font-size:.8rem; font-weight:600; color:var(--jsi-text-muted); margin-top:.35rem; text-transform:uppercase; letter-spacing:.05em; }
.jsi-kpi-link  { display:inline-block; font-size:.78rem; color:var(--jsi-accent); text-decoration:none; margin-top:.75rem; font-weight:600; }
.jsi-kpi-link:hover { text-decoration:underline; }

/* Dashboard grid */
.jsi-dash-grid { display:grid; grid-template-columns:1fr 360px; gap:1.5rem; margin-bottom:1.5rem; }
@media (max-width:1024px) { .jsi-dash-grid { grid-template-columns:1fr; } }

/* Panel */
.jsi-dash-panel { background:var(--jsi-bg-card); border:1px solid var(--jsi-border); border-radius:var(--jsi-radius); padding:1.5rem; }
.jsi-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.jsi-panel-head h2 { font-family:var(--jsi-font-display); font-size:1.05rem; font-weight:700; }
.jsi-panel-link { font-size:.83rem; color:var(--jsi-accent); text-decoration:none; font-weight:600; }
.jsi-panel-link:hover { text-decoration:underline; }

/* Campaign rows */
.jsi-campaign-list-v2 { display:flex; flex-direction:column; gap:.75rem; }
.jsi-camp-row { display:flex; align-items:center; gap:1rem; padding:.85rem; background:rgba(255,255,255,.03); border-radius:var(--jsi-radius-sm); border:1px solid var(--jsi-border); transition:var(--jsi-trans); }
.jsi-camp-row:hover { border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.05); }
.jsi-camp-artwork { width:44px; height:44px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.jsi-camp-artwork img { width:100%; height:100%; object-fit:cover; }
.jsi-camp-artwork-ph { width:100%; height:100%; background:linear-gradient(135deg,var(--jsi-primary-mid),var(--jsi-primary)); display:grid; place-items:center; color:var(--jsi-accent); font-size:.75rem; font-weight:800; }
.jsi-camp-info { flex:1; min-width:0; }
.jsi-camp-title { font-weight:600; font-size:.93rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jsi-camp-meta { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-top:.3rem; }
.jsi-camp-slug { font-size:.75rem; color:var(--jsi-text-faint); }
.jsi-camp-actions { flex-shrink:0; }

/* Quick actions */
.jsi-quick-actions { display:flex; flex-direction:column; gap:.5rem; }
.jsi-qa { display:flex; align-items:center; gap:1rem; padding:.85rem 1rem; border:1px solid var(--jsi-border); border-radius:var(--jsi-radius-sm); text-decoration:none; color:var(--jsi-text); transition:var(--jsi-trans); }
.jsi-qa:hover { border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.03); }
.jsi-qa-icon { width:40px; height:40px; border-radius:var(--jsi-radius-sm); background:var(--clight,rgba(255,255,255,.06)); color:var(--c,#fff); display:grid; place-items:center; flex-shrink:0; }
.jsi-qa-icon svg { width:20px; height:20px; }
.jsi-qa-text { flex:1; min-width:0; }
.jsi-qa-text strong { display:block; font-size:.93rem; font-weight:600; }
.jsi-qa-text span   { font-size:.78rem; color:var(--jsi-text-muted); margin-top:.1rem; display:block; }
.jsi-qa-arrow { color:var(--jsi-text-faint); flex-shrink:0; }

/* Empty state */
.jsi-empty-state { text-align:center; padding:3rem 1.5rem; }
.jsi-empty-state--full { width:100%; }
.jsi-empty-icon { font-size:3.5rem; margin-bottom:1.25rem; }
.jsi-empty-state h3 { font-size:1.25rem; font-weight:700; margin-bottom:.5rem; }
.jsi-empty-state p  { color:var(--jsi-text-muted); margin-bottom:1.5rem; }

/* Sparkline panel */
.jsi-dash-sparkline-panel { margin-top:0; }

/* Icon buttons */
.jsi-icon-btn { background:none; border:none; cursor:pointer; color:var(--jsi-text-faint); padding:.3rem .45rem; border-radius:6px; transition:var(--jsi-trans); font-size:.9rem; }
.jsi-icon-btn:hover { background:rgba(255,255,255,.06); color:var(--jsi-text); }

/* Loader */
.jsi-loader { width:28px; height:28px; border:3px solid var(--jsi-border); border-top-color:var(--jsi-accent); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════
   ANALYTICS
   ══════════════════════════════════════════════════════════════════ */
.jsi-analytics-wrap { padding:2rem; max-width:1400px; margin:0 auto; background:var(--jsi-bg); min-height:100vh; }

.jsi-analytics-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.75rem; flex-wrap:wrap; }
.jsi-analytics-toolbar-left { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.jsi-analytics-toolbar-right { display:flex; align-items:center; gap:.75rem; }

.jsi-date-range-tabs { display:flex; gap:.25rem; background:rgba(255,255,255,.04); border-radius:var(--jsi-radius-sm); padding:.2rem; border:1px solid var(--jsi-border); }
.jsi-date-tab { background:none; border:none; padding:.4rem .85rem; border-radius:6px; font-size:.83rem; font-weight:600; color:var(--jsi-text-muted); cursor:pointer; transition:var(--jsi-trans); font-family:var(--jsi-font); }
.jsi-date-tab.is-active { background:var(--jsi-accent); color:#000; }
.jsi-date-tab:hover:not(.is-active) { background:rgba(255,255,255,.06); color:var(--jsi-text); }

.jsi-analytics-campaign-select select { padding:.5rem .9rem; }

.jsi-analytics-loading { display:flex; flex-direction:column; align-items:center; gap:1rem; padding:6rem 0; color:var(--jsi-text-muted); }

.jsi-an-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.jsi-an-kpi { background:var(--jsi-bg-card); border:1px solid var(--jsi-border); border-radius:var(--jsi-radius); padding:1.25rem; }
.jsi-an-kpi-label { font-size:.75rem; font-weight:600; color:var(--jsi-text-faint); text-transform:uppercase; letter-spacing:.06em; display:block; }
.jsi-an-kpi-val   { font-family:var(--jsi-font-display); font-size:1.85rem; font-weight:800; color:var(--jsi-text); display:block; margin-top:.3rem; }
.jsi-an-kpi-trend { font-size:.78rem; font-weight:600; margin-top:.25rem; display:block; }
.jsi-trend--up   { color:#4ade80; }
.jsi-trend--down { color:#f87171; }

.jsi-an-panel { background:var(--jsi-bg-card); border:1px solid var(--jsi-border); border-radius:var(--jsi-radius); padding:1.5rem; margin-bottom:1.5rem; }
.jsi-an-panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; }
.jsi-an-panel-head h2 { font-family:var(--jsi-font-display); font-size:1rem; font-weight:700; }
.jsi-an-panel--main {}
.jsi-an-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.jsi-an-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
@media (max-width:900px) { .jsi-an-grid-2,.jsi-an-grid-3 { grid-template-columns:1fr; } }

.jsi-chart-legend { display:flex; gap:1rem; align-items:center; font-size:.8rem; color:var(--jsi-text-muted); }
.jsi-legend-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }

/* Bar list */
.jsi-an-bar-list { display:flex; flex-direction:column; gap:.75rem; }
.jsi-bar-item { display:flex; align-items:center; gap:.75rem; }
.jsi-bar-label { font-size:.83rem; width:110px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--jsi-text-muted); }
.jsi-bar-track { flex:1; height:8px; background:rgba(255,255,255,.06); border-radius:99px; overflow:hidden; }
.jsi-bar-fill  { height:100%; background:linear-gradient(90deg,var(--jsi-accent),#ff9900); border-radius:99px; transition:width .4s ease; }
.jsi-bar-val   { font-size:.83rem; font-weight:700; width:50px; text-align:right; }

/* Heatmap */
.jsi-an-heatmap { overflow-x:auto; }
.jsi-hm-days { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:.35rem; }
.jsi-hm-days span { text-align:center; font-size:.7rem; color:var(--jsi-text-faint); font-weight:600; }
.jsi-hm-grid { display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:repeat(24,1fr); gap:3px; }
.jsi-hm-cell { width:100%; aspect-ratio:1.4; border-radius:3px; background:rgba(255,198,0,calc(0.05 + var(--i,.0) * 0.85)); transition:opacity .2s; cursor:default; }
.jsi-hm-cell:hover { outline:1px solid var(--jsi-accent); }

/* ══════════════════════════════════════════════════════════════════
   BILLING
   ══════════════════════════════════════════════════════════════════ */
.jsi-billing-wrap { padding:2rem; max-width:1200px; margin:0 auto; background:var(--jsi-bg); min-height:100vh; }

.jsi-billing-current { background:var(--jsi-bg-card); border:1px solid var(--jsi-border); border-radius:var(--jsi-radius); padding:1.5rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:2rem; flex-wrap:wrap; }
.jsi-billing-current-left { display:flex; align-items:center; gap:1.25rem; }
.jsi-billing-plan-icon { width:52px; height:52px; border-radius:var(--jsi-radius-sm); display:grid; place-items:center; font-size:1.6rem; flex-shrink:0; }
.jsi-billing-plan-name { font-family:var(--jsi-font-display); font-size:1.25rem; font-weight:700; }
.jsi-billing-plan-meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; color:var(--jsi-text-muted); font-size:.85rem; margin-top:.25rem; }

.jsi-plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; margin-bottom:2rem; }
.jsi-plan-card { background:var(--jsi-bg-card); border:1.5px solid var(--jsi-border); border-radius:var(--jsi-radius); padding:1.75rem 1.5rem; position:relative; display:flex; flex-direction:column; gap:.75rem; transition:var(--jsi-trans); }
.jsi-plan-card:hover { border-color:rgba(255,255,255,.18); transform:translateY(-2px); box-shadow:var(--jsi-shadow); }
.jsi-plan-card--featured { border-color:var(--jsi-accent); box-shadow:0 0 32px rgba(255,198,0,.12); }
.jsi-plan-card--current  { border-color:rgba(34,197,94,.4); }
.jsi-plan-popular { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--jsi-accent); color:#000; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:.2rem .8rem; border-radius:99px; white-space:nowrap; }
.jsi-plan-icon { font-size:1.75rem; }
.jsi-plan-name { font-family:var(--jsi-font-display); font-size:1rem; font-weight:700; text-transform:capitalize; }
.jsi-plan-price { display:flex; align-items:baseline; gap:.2rem; }
.jsi-plan-currency { font-size:1rem; font-weight:700; color:var(--jsi-text-muted); }
.jsi-plan-amount   { font-family:var(--jsi-font-display); font-size:2.25rem; font-weight:800; color:var(--jsi-text); }
.jsi-plan-period   { font-size:.85rem; color:var(--jsi-text-muted); }
.jsi-plan-annual   { font-size:.78rem; color:#4ade80; }
.jsi-plan-features { list-style:none; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.jsi-plan-features li { display:flex; align-items:flex-start; gap:.6rem; font-size:.85rem; color:var(--jsi-text-muted); }
.jsi-plan-features li svg { width:16px; height:16px; flex-shrink:0; color:#4ade80; margin-top:1px; }
.jsi-plan-trial { font-size:.75rem; color:var(--jsi-text-faint); text-align:center; margin-top:.25rem; }
.jsi-plan-current-label { background:rgba(34,197,94,.1); color:#4ade80; border:1px solid rgba(34,197,94,.25); border-radius:var(--jsi-radius-sm); padding:.6rem 1rem; text-align:center; font-weight:600; font-size:.88rem; }

/* Payment history */
.jsi-billing-history { margin-bottom:2rem; }
.jsi-section-title { font-family:var(--jsi-font-display); font-size:1.1rem; font-weight:700; margin-bottom:1rem; }
.jsi-billing-manage { text-align:center; padding:1rem; }

/* Table */
.jsi-billing-table-wrap { overflow-x:auto; }
.jsi-table { width:100%; border-collapse:collapse; font-size:.88rem; }
.jsi-table th { padding:.75rem 1rem; text-align:left; font-size:.75rem; font-weight:700; color:var(--jsi-text-faint); text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--jsi-border); }
.jsi-table td { padding:.9rem 1rem; border-bottom:1px solid rgba(255,255,255,.04); color:var(--jsi-text-muted); }
.jsi-table tr:last-child td { border-bottom:none; }
.jsi-table a { color:var(--jsi-accent); text-decoration:none; }
.jsi-table a:hover { text-decoration:underline; }

/* Badges */
.jsi-badge { display:inline-block; padding:.18rem .55rem; border-radius:99px; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:capitalize; }
.jsi-badge--published { background:rgba(34,197,94,.15); color:#4ade80; }
.jsi-badge--draft     { background:rgba(107,114,128,.15); color:#9ca3af; }
.jsi-badge--archived  { background:rgba(245,158,11,.12); color:#fde68a; }
.jsi-badge--deleted   { background:rgba(239,68,68,.12); color:#fca5a5; }
.jsi-badge--active    { background:rgba(34,197,94,.15); color:#4ade80; }
.jsi-badge--trialing  { background:rgba(59,130,246,.15); color:#93c5fd; }
.jsi-badge--cancelled { background:rgba(107,114,128,.15); color:#9ca3af; }
.jsi-badge--paid      { background:rgba(34,197,94,.15); color:#4ade80; }
.jsi-badge--smart_link{ background:rgba(139,92,246,.15); color:#c4b5fd; }
.jsi-badge--presave   { background:rgba(245,158,11,.15); color:#fde68a; }
.jsi-badge--bio_link  { background:rgba(236,72,153,.15); color:#f9a8d4; }

/* ══════════════════════════════════════════════════════════════════
   CAMPAIGNS LIST
   ══════════════════════════════════════════════════════════════════ */
.jsi-campaigns-wrap { padding:2rem; max-width:1400px; margin:0 auto; background:var(--jsi-bg); min-height:100vh; }
.jsi-campaigns-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.5rem; gap:1rem; flex-wrap:wrap; }
.jsi-campaigns-header-actions { display:flex; gap:.75rem; align-items:center; }
.jsi-plan-banner { display:flex; align-items:center; justify-content:space-between; gap:1rem; background:#fafaf5; border:1px solid #eee6c8; border-radius:10px; padding:.75rem 1rem; margin-bottom:1.25rem; font-size:.875rem; }
.jsi-plan-banner-info strong { color:#1a1a1a; font-weight:600; }
.jsi-plan-banner-info span { color:#6b7280; }

.jsi-camps-filters { display:flex; gap:.75rem; margin-bottom:1.5rem; flex-wrap:wrap; align-items:center; }
.jsi-camps-search-wrap { position:relative; display:flex; align-items:center; flex:1; min-width:200px; }
.jsi-camps-search-wrap svg { position:absolute; left:.85rem; color:var(--jsi-text-faint); }
.jsi-camps-search-wrap .jsi-input { padding-left:2.75rem; }
.jsi-filter-tab { background:none; border:1.5px solid var(--jsi-border); border-radius:var(--jsi-radius-sm); padding:.42rem .9rem; font-size:.82rem; font-weight:600; color:var(--jsi-text-muted); cursor:pointer; transition:var(--jsi-trans); font-family:var(--jsi-font); }
.jsi-filter-tab.is-active { background:var(--jsi-accent); border-color:var(--jsi-accent); color:#000; }
.jsi-filter-tab:hover:not(.is-active) { border-color:rgba(255,255,255,.18); color:var(--jsi-text); }
.jsi-camps-filter-tabs,.jsi-camps-type-tabs { display:flex; gap:.35rem; flex-wrap:wrap; }
.jsi-camps-view-toggle { display:flex; gap:.25rem; }
.jsi-view-btn { background:none; border:1.5px solid var(--jsi-border); border-radius:6px; padding:.4rem .5rem; cursor:pointer; color:var(--jsi-text-faint); transition:var(--jsi-trans); }
.jsi-view-btn.is-active { background:rgba(255,255,255,.06); color:var(--jsi-text); border-color:rgba(255,255,255,.18); }

/* Campaign grid */
.jsi-camp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.25rem; }
.jsi-camp-grid[data-view="list"] { grid-template-columns:1fr; gap:.6rem; }

/* Card view */
.jsi-camp-card { background:var(--jsi-bg-card); border:1px solid var(--jsi-border); border-radius:var(--jsi-radius); overflow:hidden; transition:var(--jsi-trans); position:relative; }
.jsi-camp-card:hover { border-color:rgba(255,255,255,.18); transform:translateY(-3px); box-shadow:var(--jsi-shadow); }
.jsi-card-art { width:100%; aspect-ratio:1; background:linear-gradient(135deg,var(--jsi-primary),#0a0014); overflow:hidden; position:relative; }
.jsi-card-art img { width:100%; height:100%; object-fit:cover; }
.jsi-card-art-ph { width:100%; height:100%; display:grid; place-items:center; font-size:2rem; font-weight:800; color:var(--jsi-accent); background:linear-gradient(135deg,var(--jsi-primary-mid),var(--jsi-primary)); }
.jsi-card-overlay { position:absolute; inset:0; background:rgba(0,0,0,.0); display:flex; align-items:flex-start; justify-content:flex-end; padding:.65rem; opacity:0; transition:var(--jsi-trans); pointer-events:none; }
.jsi-camp-card:hover .jsi-card-overlay { opacity:1; background:rgba(0,0,0,.15); }
.jsi-card-view-btn { background:rgba(0,0,0,.7); border:none; border-radius:6px; color:#fff; padding:.35rem .55rem; font-size:1rem; cursor:pointer; text-decoration:none; display:grid; place-items:center; transition:var(--jsi-trans); pointer-events:auto; }
.jsi-card-view-btn:hover { background:var(--jsi-accent); color:#000; }
.jsi-card-body { padding:1rem 1.1rem; }
.jsi-card-badges { display:flex; gap:.35rem; flex-wrap:wrap; margin-bottom:.6rem; }
.jsi-card-title  { font-weight:700; font-size:.97rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jsi-card-slug   { font-size:.75rem; color:var(--jsi-text-faint); margin-top:.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.jsi-card-stats  { display:flex; gap:1rem; margin-top:.65rem; font-size:.8rem; color:var(--jsi-text-faint); }
.jsi-card-actions { display:flex; gap:.35rem; padding:.65rem 1rem; border-top:1px solid var(--jsi-border); }

/* List view */
.jsi-camp-row-v2 { background:var(--jsi-bg-card); border:1px solid var(--jsi-border); border-radius:var(--jsi-radius-sm); padding:1rem 1.25rem; display:flex; align-items:center; gap:1rem; transition:var(--jsi-trans); }
.jsi-camp-row-v2:hover { border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.03); }
.jsi-camp-row-info { flex:1; min-width:0; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.jsi-camp-row-info strong { font-weight:600; font-size:.93rem; margin-right:.25rem; }
.jsi-camp-row-stats { font-size:.82rem; color:var(--jsi-text-faint); white-space:nowrap; }

/* Pagination */
.jsi-camps-pagination { display:flex; align-items:center; justify-content:center; gap:1rem; padding:1.5rem 0; color:var(--jsi-text-muted); font-size:.88rem; }

/* Camp loading */
.jsi-camp-loading { display:flex; justify-content:center; align-items:center; padding:4rem; grid-column:1/-1; }

/* Modal */
/* CRITICAL: The HTML `hidden` attribute's implicit display:none is overridden by
   the display:flex declaration below. We must put display:none on the hidden state
   FIRST (higher specificity via [hidden]) so the modal is truly invisible until
   the JS removes the attribute. Without this, the modal covers the entire viewport
   and intercepts every pointer event — making ALL buttons on the page unreachable. */
.jsi-modal[hidden] { display:none !important; }
.jsi-modal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; }
.jsi-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.75); }
.jsi-modal-box { position:relative; background:var(--jsi-bg-card); border:1px solid var(--jsi-border); border-radius:var(--jsi-radius); padding:2rem; max-width:420px; width:calc(100% - 2rem); box-shadow:var(--jsi-shadow-lg); }
.jsi-modal-box h3 { font-family:var(--jsi-font-display); font-size:1.2rem; font-weight:700; margin-bottom:.75rem; }
.jsi-modal-box p  { color:var(--jsi-text-muted); font-size:.93rem; line-height:1.5; }
.jsi-modal-actions { display:flex; gap:.75rem; margin-top:1.5rem; justify-content:flex-end; }

/* ══════════════════════════════════════════════════════════════════
   CREATE FORMS (presave + smart link)
   ══════════════════════════════════════════════════════════════════ */
.jsi-create-wrap { padding:2rem; max-width:960px; margin:0 auto; background:var(--jsi-bg); min-height:100vh; }
.jsi-create-header { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.75rem; gap:1rem; flex-wrap:wrap; }

/* Autofetch row */
.jsi-autofetch-row { display:flex; gap:.75rem; margin-bottom:1.25rem; align-items:center; }

/* Wizard tabs */
.jsi-wizard-tabs { display:flex; gap:.25rem; border-bottom:1.5px solid var(--jsi-border); margin-bottom:1.75rem; overflow-x:auto; }
.jsi-wizard-tab { background:none; border:none; border-bottom:2.5px solid transparent; padding:.85rem 1.25rem; font-size:.88rem; font-weight:600; color:var(--jsi-text-muted); cursor:pointer; transition:var(--jsi-trans); font-family:var(--jsi-font); white-space:nowrap; margin-bottom:-1.5px; }
.jsi-wizard-tab.is-active { color:var(--jsi-accent); border-bottom-color:var(--jsi-accent); }
.jsi-wizard-tab:hover:not(.is-active) { color:var(--jsi-text); }

.jsi-wizard-panel { display:none; }
.jsi-wizard-panel.is-active { display:block; }

.jsi-wizard-footer { display:flex; justify-content:flex-end; gap:.75rem; align-items:center; margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--jsi-border); }

/* Create grid */
.jsi-create-grid { display:grid; grid-template-columns:240px 1fr; gap:2rem; }
@media (max-width:700px) { .jsi-create-grid { grid-template-columns:1fr; } }

/* Artwork uploader */
.jsi-artwork-uploader { display:flex; flex-direction:column; gap:.6rem; }
.jsi-artwork-drop {
  width:100%; max-width:240px; aspect-ratio:1; border:2px dashed var(--jsi-border); border-radius:var(--jsi-radius);
  display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer;
  background:rgba(255,255,255,.02); transition:var(--jsi-trans); overflow:hidden; position:relative;
}
.jsi-artwork-drop:hover, .jsi-artwork-drop.is-dragging { border-color:var(--jsi-accent); background:rgba(255,198,0,.05); }
.jsi-artwork-drop--sm { width:80px; height:80px; border-radius:50%; }
.jsi-artwork-placeholder { display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--jsi-text-faint); padding:1.5rem; text-align:center; pointer-events:none; }
.jsi-artwork-placeholder svg { opacity:.4; }
.jsi-artwork-placeholder span { font-size:.85rem; font-weight:600; }
.jsi-artwork-placeholder em   { font-size:.75rem; font-style:normal; }
.jsi-artwork-placeholder--sm { gap:.3rem; }
.jsi-artwork-placeholder--sm svg { width:20px; }

.jsi-upload-progress { display:flex; align-items:center; gap:.6rem; font-size:.8rem; color:var(--jsi-text-faint); }
.jsi-upload-bar  { flex:1; height:4px; background:rgba(255,255,255,.08); border-radius:99px; overflow:hidden; }
.jsi-upload-fill { height:100%; background:var(--jsi-accent); width:0; transition:width .1s linear; }

/* Platform list */
.jsi-platform-list { display:flex; flex-direction:column; gap:.65rem; margin:1rem 0; }
.jsi-platform-row { display:flex; align-items:center; gap:.85rem; padding:.7rem .9rem; background:rgba(255,255,255,.02); border:1px solid var(--jsi-border); border-radius:var(--jsi-radius-sm); transition:var(--jsi-trans); }
.jsi-platform-row:hover { background:rgba(255,255,255,.04); }
.jsi-platform-icon { width:36px; height:36px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; font-weight:800; font-size:.7rem; }
.jsi-platform-name { width:120px; font-size:.88rem; font-weight:600; flex-shrink:0; }
.jsi-platform-field { flex:1; min-width:0; }
.jsi-form-hint { color:var(--jsi-text-muted); font-size:.88rem; margin-bottom:.75rem; }
.jsi-form-section { display:flex; flex-direction:column; gap:1.25rem; }

/* Theme swatches */
.jsi-theme-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:.6rem; }
.jsi-theme-option { cursor:pointer; }
.jsi-theme-option input { position:absolute; opacity:0; }
.jsi-theme-swatch {
  display:block; padding:.85rem .6rem; border-radius:var(--jsi-radius-sm); text-align:center;
  font-size:.78rem; font-weight:700; border:2px solid transparent; transition:var(--jsi-trans);
  letter-spacing:.02em;
}
.jsi-theme-swatch--minimal  { background:#f9fafb; color:#111; }
.jsi-theme-swatch--dark     { background:#0f0f0f; color:#fff; }
.jsi-theme-swatch--neon     { background:#001a00; color:#39ff14; }
.jsi-theme-swatch--glass    { background:rgba(255,255,255,.08); color:#fff; backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.1); }
.jsi-theme-swatch--gradient { background:linear-gradient(135deg,#f43f5e,#f97316); color:#fff; }
.jsi-theme-swatch--retro    { background:#1a0a00; color:#ff9900; font-family:monospace; }
.jsi-theme-option input:checked + .jsi-theme-swatch { border-color:var(--jsi-accent); box-shadow:0 0 16px rgba(255,198,0,.25); }

/* ══════════════════════════════════════════════════════════════════
   PROFILE
   ══════════════════════════════════════════════════════════════════ */
.jsi-profile-wrap { padding:2rem; max-width:900px; margin:0 auto; background:var(--jsi-bg); min-height:100vh; }
.jsi-profile-header { margin-bottom:2rem; }
.jsi-profile-grid   { display:grid; grid-template-columns:240px 1fr; gap:2rem; }
@media (max-width:700px) { .jsi-profile-grid { grid-template-columns:1fr; } }

.jsi-profile-avatar-panel { background:var(--jsi-bg-card); border:1px solid var(--jsi-border); border-radius:var(--jsi-radius); padding:2rem 1.5rem; text-align:center; height:fit-content; }
.jsi-profile-avatar-wrap { position:relative; display:inline-block; margin-bottom:1rem; }
.jsi-profile-avatar { width:96px; height:96px; border-radius:50%; border:3px solid var(--jsi-accent); object-fit:cover; }
.jsi-avatar-change-btn { position:absolute; bottom:0; right:0; background:var(--jsi-accent); border:none; border-radius:50%; width:28px; height:28px; display:grid; place-items:center; cursor:pointer; color:#000; transition:var(--jsi-trans); }
.jsi-avatar-change-btn:hover { background:var(--jsi-accent-dark); }
.jsi-profile-name  { font-weight:700; font-size:1.1rem; margin-bottom:.25rem; }
.jsi-profile-email { font-size:.85rem; color:var(--jsi-text-muted); word-break:break-all; }
.jsi-profile-since { font-size:.78rem; color:var(--jsi-text-faint); margin-top:.5rem; }

.jsi-profile-form-panel { background:var(--jsi-bg-card); border:1px solid var(--jsi-border); border-radius:var(--jsi-radius); padding:2rem; }
.jsi-profile-tabs { display:flex; gap:.25rem; border-bottom:1.5px solid var(--jsi-border); margin-bottom:1.75rem; overflow-x:auto; }
.jsi-profile-tab { background:none; border:none; border-bottom:2.5px solid transparent; padding:.7rem 1.1rem; font-size:.88rem; font-weight:600; color:var(--jsi-text-muted); cursor:pointer; transition:var(--jsi-trans); font-family:var(--jsi-font); white-space:nowrap; margin-bottom:-1.5px; }
.jsi-profile-tab.is-active { color:var(--jsi-accent); border-bottom-color:var(--jsi-accent); }
.jsi-profile-tab-panel { display:none; }
.jsi-profile-tab-panel.is-active { display:block; }

.jsi-social-row { display:flex; align-items:center; gap:.75rem; margin-bottom:.6rem; }
.jsi-social-label { font-size:.83rem; font-weight:600; color:var(--jsi-text-muted); width:100px; flex-shrink:0; }
.jsi-notif-row { display:flex; align-items:center; padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.04); }
.jsi-notif-row:last-child { border-bottom:none; }

/* ══════════════════════════════════════════════════════════════════
   BIO LINK
   ══════════════════════════════════════════════════════════════════ */
.jsi-biolink-wrap { padding:2rem; max-width:1200px; margin:0 auto; background:var(--jsi-bg); min-height:100vh; overflow-x:hidden; }
.jsi-biolink-editor { display:grid; grid-template-columns:1fr 340px; gap:2rem; }
@media (max-width:900px) { .jsi-biolink-editor { grid-template-columns:1fr; } }
.jsi-biolink-left { display:flex; flex-direction:column; gap:1.25rem; }
.jsi-biolink-save-row { margin-top:.5rem; }

.jsi-biolink-profile-row { display:flex; gap:1.25rem; align-items:flex-start; min-width:0; }
.jsi-biolink-profile-fields { flex:1; display:flex; flex-direction:column; gap:.85rem; min-width:0; }

.jsi-bio-links-list { display:flex; flex-direction:column; gap:.5rem; }
.jsi-bio-link-item { display:flex; align-items:center; gap:.65rem; background:rgba(255,255,255,.03); border:1px solid var(--jsi-border); border-radius:var(--jsi-radius-sm); padding:.7rem; min-width:0; }
.jsi-bio-link-clicks { flex-shrink:0; font-size:11px; color:var(--jsi-text-muted, rgba(255,255,255,.5)); white-space:nowrap; }
.jsi-bio-link-drag { color:var(--jsi-text-faint); cursor:grab; font-size:.9rem; letter-spacing:-2px; }
.jsi-bio-link-fields { flex:1; display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.jsi-bio-empty-links { padding:1.5rem; text-align:center; color:var(--jsi-text-faint); font-size:.88rem; }

/* Phone preview */
.jsi-biolink-right { position:sticky; top:2rem; }
.jsi-biolink-preview-wrap { display:flex; justify-content:center; margin-bottom:1rem; }
.jsi-biolink-phone { width:220px; height:440px; background:var(--jsi-bg-card); border:6px solid rgba(255,255,255,.12); border-radius:36px; overflow:hidden; box-shadow:var(--jsi-shadow-lg); position:relative; }
.jsi-biolink-phone-screen { width:100%; height:100%; overflow-y:auto; }
.jsi-bio-preview-inner { min-height:100%; background:linear-gradient(160deg,var(--jsi-primary) 0%,#0a0014 100%); display:flex; flex-direction:column; align-items:center; padding:1.5rem 1rem; gap:.65rem; }
.jsi-bio-preview-avatar img { width:64px; height:64px; border-radius:50%; border:2.5px solid var(--jsi-accent); object-fit:cover; }
.jsi-bio-preview-name { font-family:var(--jsi-font-display); font-size:.95rem; font-weight:800; color:#fff; text-align:center; }
.jsi-bio-preview-desc { font-size:.72rem; color:rgba(255,255,255,.6); text-align:center; line-height:1.4; }
.jsi-bio-preview-links { width:100%; display:flex; flex-direction:column; gap:.4rem; }
.jsi-bio-prev-link { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:.45rem .7rem; text-align:center; font-size:.72rem; font-weight:600; color:#fff; transition:var(--jsi-trans); }
.jsi-biolink-preview-label { text-align:center; font-size:.78rem; color:var(--jsi-text-faint); font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.jsi-biolink-share-url { display:flex; gap:.5rem; margin-top:1rem; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:860px) {
  .jsi-auth-wrap    { grid-template-columns:1fr; min-height:auto; }
  .jsi-auth-left    { display:none; }
  .jsi-auth-right   { padding:2rem 1.25rem; min-height:100vh; }
  .jsi-auth-card    { max-width:100%; }
}
@media (max-width:600px) {
  .jsi-dash-wrap,
  .jsi-analytics-wrap,
  .jsi-billing-wrap,
  .jsi-create-wrap,
  .jsi-profile-wrap,
  .jsi-campaigns-wrap,
  .jsi-biolink-wrap { padding:1rem; }
  .jsi-kpi-grid { grid-template-columns:repeat(2,1fr); }
  .jsi-field-row { grid-template-columns:1fr; }
  .jsi-plan-grid { grid-template-columns:1fr; }
  .jsi-create-grid { grid-template-columns:1fr; }
  .jsi-artwork-drop:not(.jsi-artwork-drop--sm) { width:100%; }
  .jsi-platform-name { display:none; }
  .jsi-biolink-profile-row { flex-direction:column; align-items:center; text-align:center; }
  .jsi-biolink-profile-fields { width:100%; }
}

/* ══════════════════════════════════════════════════════════════════
   Theme sidebar suppression — belt-and-suspenders for ShortcodesModule's
   `jsi-slp-fullwidth` body class (Astra is already handled server-side via
   astra_page_layout/astra_get_content_layout; this covers other themes).
   Without this, dashboard/wizard shortcodes (Bookings, Create Booking,
   Campaigns, etc.) embedded in a normal theme page can render next to the
   theme's own sidebar widget area — visually an empty dark column beside
   the plugin content on desktop, and a full-width blank block stacked
   below it on mobile once the theme's layout collapses to one column.
   Targets the sidebar/complementary selectors used by the large majority
   of WordPress themes (the _s/underscores lineage: Astra, GeneratePress,
   OceanWP, Kadence, Twenty*, Neve, etc.). Themes with a fully custom
   sidebar class aren't covered — pick a "Full Width / No Sidebar" page
   template for these pages if your theme supports one; that removes the
   sidebar server-side rather than relying on this CSS fallback. ────────── */
body.jsi-slp-fullwidth #secondary,
body.jsi-slp-fullwidth .widget-area,
body.jsi-slp-fullwidth .sidebar,
body.jsi-slp-fullwidth .site-sidebar,
body.jsi-slp-fullwidth [role="complementary"] {
  display: none !important;
}
body.jsi-slp-fullwidth #primary,
body.jsi-slp-fullwidth .content-area,
body.jsi-slp-fullwidth #main,
body.jsi-slp-fullwidth main {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}

/* ── Platform-wide upsell banner ─────────────────────────────────────────── */
.jsi-upsell-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(255,153,0,.14), rgba(255,153,0,.05));
  border: 1px solid rgba(255,153,0,.35);
  border-radius: 12px;
  padding: .85rem 1.1rem;
  margin: 0 0 1.25rem;
}
.jsi-upsell-copy {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fde68a;
  font-size: .92rem;
  line-height: 1.4;
}
.jsi-upsell-copy svg { flex-shrink: 0; color: #ff9900; }
.jsi-upsell-plan {
  display: inline-block;
  margin-left: .35rem;
  padding: .1rem .5rem;
  border-radius: 999px;
  background: rgba(255,153,0,.2);
  color: #ffb84d;
  font-size: .78rem;
  font-weight: 600;
}
.jsi-upsell-cta {
  flex-shrink: 0;
  background: #ff9900;
  color: #14120a;
  font-weight: 700;
  font-size: .88rem;
  padding: .5rem 1.1rem;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}
.jsi-upsell-cta:hover { background: #ffad33; color: #14120a; }
@media (max-width: 640px) {
  .jsi-upsell-banner { flex-direction: column; align-items: flex-start; }
  .jsi-upsell-cta { width: 100%; text-align: center; }
}