/* ═══════════════════════════════════════
   StoreArc v2 — Public Styles
   ═══════════════════════════════════════ */
:root { --sa: #6C5CE7; --sa-light: #a78bfa; --sa-dark: #08081A; --sa-bg: #f8fafc; --sa-text: #1e293b; --sa-sub: #64748b; --sa-border: #e2e8f0; --sa-success: #059669; --sa-danger: #dc2626; --sa-warning: #d97706; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body.sa-app { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--sa-bg); color: var(--sa-text); margin: 0; }

/* ── Layout ── */
.sa-layout { display: flex; min-height: 100vh; }
.sa-sidebar { width: 240px; background: var(--sa-dark); color: #e2e8f0; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; }
.sa-sidebar__brand { padding: 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.sa-sidebar__logo { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--sa), #a855f7); display: flex; align-items: center; justify-content: center; font-size: 16px; }
.sa-sidebar__name { font-size: 18px; font-weight: 800; }
.sa-sidebar__nav { flex: 1; padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.sa-sidebar__nav a { display: block; padding: 10px 14px; border-radius: 8px; color: #94a3b8; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.2s; }
.sa-sidebar__nav a:hover { background: rgba(255,255,255,0.04); color: #e2e8f0; }
.sa-sidebar__nav a.active { background: rgba(108,92,231,0.12); color: var(--sa-light); font-weight: 600; }
.sa-sidebar__footer { padding: 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.sa-sidebar__logout { color: #64748b; font-size: 13px; text-decoration: none; }
.sa-sidebar__logout:hover { color: #e2e8f0; }
.sa-plan-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.sa-plan-badge--free { background: rgba(148,163,184,0.15); color: #94a3b8; }
.sa-plan-badge--starter { background: rgba(14,165,233,0.15); color: #0ea5e9; }
.sa-plan-badge--pro { background: rgba(108,92,231,0.15); color: var(--sa-light); }
.sa-plan-badge--proplus { background: rgba(224,64,251,0.15); color: #e040fb; }
.sa-plan-badge--enterprise { background: rgba(201,168,76,0.15); color: #c9a84c; }
.sa-main { flex: 1; margin-left: 240px; }
.sa-topbar { height: 60px; border-bottom: 1px solid var(--sa-border); display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: #fff; }
.sa-topbar__title { font-size: 18px; font-weight: 700; }
.sa-topbar__user { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--sa-sub); }
.sa-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--sa), #a855f7); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; }
.sa-content { padding: 28px; }

/* ── Auth Pages ── */
.sa-auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--sa-dark); padding: 40px 20px; }
.sa-auth-card { background: #fff; border-radius: 20px; padding: 40px; max-width: 440px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.sa-auth-card__header { text-align: center; margin-bottom: 28px; }
.sa-auth-logo { display: inline-flex; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, var(--sa), #a855f7); align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.sa-auth-card__header h1 { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.sa-auth-card__header p { color: var(--sa-sub); font-size: 14px; }
.sa-auth-card__footer { text-align: center; margin-top: 20px; font-size: 14px; color: var(--sa-sub); }
.sa-auth-card__footer a { color: var(--sa); font-weight: 600; text-decoration: none; }
.sa-auth-card__trust { display: flex; justify-content: center; gap: 16px; margin-top: 16px; font-size: 12px; color: var(--sa-sub); }

/* ── Forms ── */
.sa-form__field { margin-bottom: 16px; }
.sa-form__field label { display: block; font-size: 13px; font-weight: 600; color: var(--sa-sub); margin-bottom: 6px; }
.sa-form__field input, .sa-form__field select, .sa-form__field textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--sa-border); border-radius: 10px; font-size: 14px; transition: border-color 0.2s; outline: none; font-family: inherit; }
.sa-form__field input:focus, .sa-form__field select:focus { border-color: var(--sa); box-shadow: 0 0 0 3px rgba(108,92,231,0.1); }
.sa-form__row { display: flex; gap: 16px; }
.sa-form__row--2col > * { flex: 1; }
.sa-form__row--3col > * { flex: 1; }
.sa-form__error { color: var(--sa-danger); font-size: 13px; margin-bottom: 12px; min-height: 18px; }
.sa-form__success { color: var(--sa-success); font-size: 13px; margin-bottom: 12px; }
.sa-form__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }

/* ── Buttons ── */
.sa-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid var(--sa-border); background: #fff; color: var(--sa-text); text-decoration: none; transition: all 0.2s; font-family: inherit; }
.sa-btn:hover { border-color: var(--sa); color: var(--sa); }
.sa-btn--primary { background: linear-gradient(135deg, var(--sa), #a855f7); color: #fff; border: none; box-shadow: 0 4px 14px rgba(108,92,231,0.25); }
.sa-btn--primary:hover { box-shadow: 0 6px 20px rgba(108,92,231,0.35); transform: translateY(-1px); color: #fff; }
.sa-btn--success { background: var(--sa-success); color: #fff; border: none; }
.sa-btn--danger { color: var(--sa-danger); border-color: rgba(220,38,38,0.2); }
.sa-btn--danger:hover { background: rgba(220,38,38,0.04); }
.sa-btn--full { width: 100%; justify-content: center; }
.sa-btn--lg { padding: 14px 28px; font-size: 16px; }
.sa-btn--sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; }
.sa-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Stats ── */
.sa-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 24px; }
.sa-stat-card { background: #fff; border: 1px solid var(--sa-border); border-radius: 14px; padding: 18px; display: flex; align-items: center; gap: 14px; }
.sa-stat-card__icon { font-size: 24px; width: 44px; height: 44px; border-radius: 12px; background: rgba(108,92,231,0.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sa-stat-card__label { display: block; font-size: 12px; color: var(--sa-sub); font-weight: 500; }
.sa-stat-card__value { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }

/* ── Sections ── */
.sa-section { background: #fff; border: 1px solid var(--sa-border); border-radius: 14px; padding: 24px; margin-bottom: 20px; }
.sa-section h2 { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
.sa-section__header { display: flex; justify-content: space-between; align-items: center; }

/* ── Tables ── */
.sa-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sa-table th { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--sa-border); font-size: 12px; font-weight: 600; color: var(--sa-sub); text-transform: uppercase; letter-spacing: 0.5px; }
.sa-table td { padding: 12px; border-bottom: 1px solid var(--sa-border); vertical-align: middle; }
.sa-table tbody tr:hover { background: rgba(108,92,231,0.02); }

/* ── Status Pills ── */
.sa-status-pill { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 12px; font-weight: 600; }
.sa-status-pill--live, .sa-status-pill--active, .sa-status-pill--complete { background: rgba(5,150,105,0.08); color: var(--sa-success); }
.sa-status-pill--draft, .sa-status-pill--paused { background: rgba(148,163,184,0.1); color: var(--sa-sub); }
.sa-status-pill--error { background: rgba(220,38,38,0.08); color: var(--sa-danger); }

/* ── Actions Grid ── */
.sa-actions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.sa-action-card { display: block; padding: 20px; border: 1px solid var(--sa-border); border-radius: 14px; text-decoration: none; color: var(--sa-text); transition: all 0.2s; }
.sa-action-card:hover { border-color: var(--sa); box-shadow: 0 4px 16px rgba(108,92,231,0.08); transform: translateY(-2px); }
.sa-action-card span { font-size: 28px; display: block; margin-bottom: 8px; }
.sa-action-card strong { font-size: 15px; display: block; margin-bottom: 4px; }
.sa-action-card p { font-size: 12px; color: var(--sa-sub); margin: 0; }

/* ── Empty State ── */
.sa-empty-state { text-align: center; padding: 60px 20px; background: #fff; border: 2px dashed var(--sa-border); border-radius: 16px; }
.sa-empty-state h3 { margin: 12px 0 6px; font-size: 18px; }
.sa-empty-state p { color: var(--sa-sub); margin-bottom: 20px; }

/* ── Alerts ── */
.sa-alert { padding: 16px 20px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; }
.sa-alert--success { background: rgba(5,150,105,0.06); border: 1px solid rgba(5,150,105,0.15); color: var(--sa-success); }
.sa-alert--warning { background: rgba(217,119,6,0.06); border: 1px solid rgba(217,119,6,0.15); color: var(--sa-warning); }
.sa-alert--error { background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.15); color: var(--sa-danger); }
.sa-alert h3 { margin-bottom: 6px; }

/* ── Cards Grid ── */
.sa-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sa-app-card { border: 1px solid var(--sa-border); border-radius: 16px; overflow: hidden; background: #fff; }
.sa-app-card__header { height: 80px; display: flex; align-items: center; justify-content: center; }
.sa-app-card__icon { font-size: 36px; }
.sa-app-card__body { padding: 16px; }
.sa-app-card__body h3 { font-size: 16px; margin-bottom: 4px; }
.sa-app-card__body p { font-size: 13px; color: var(--sa-sub); margin-bottom: 10px; }
.sa-app-card__stats { display: flex; gap: 16px; font-size: 13px; color: var(--sa-sub); margin-bottom: 12px; }
.sa-app-card__actions { display: flex; gap: 8px; }

/* ── Checkbox Grid ── */
.sa-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.sa-checkbox-card { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--sa-border); border-radius: 10px; cursor: pointer; transition: all 0.2s; font-size: 13px; }
.sa-checkbox-card:has(input:checked) { border-color: var(--sa); background: rgba(108,92,231,0.04); }
.sa-checkbox-card input { accent-color: var(--sa); }

/* ── Plans Grid ── */
.sa-plans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.sa-plan-card { padding: 22px; border: 1px solid var(--sa-border); border-radius: 16px; text-align: center; position: relative; background: #fff; }
.sa-plan-card--current { border-color: var(--sa); background: rgba(108,92,231,0.02); }
.sa-plan-card--popular { border-color: var(--sa); box-shadow: 0 4px 20px rgba(108,92,231,0.1); transform: scale(1.02); }
.sa-plan-card .sa-plan-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--sa); color: #fff; padding: 2px 12px; border-radius: 100px; font-size: 11px; font-weight: 700; }
.sa-plan-card h3 { font-size: 18px; margin-bottom: 4px; }
.sa-plan-card__price { font-size: 32px; font-weight: 900; letter-spacing: -1px; margin-bottom: 4px; }
.sa-plan-card__price span { font-size: 14px; font-weight: 400; color: var(--sa-sub); }
.sa-plan-card__split { margin-bottom: 12px; font-size: 13px; }
.sa-plan-card__features { list-style: none; padding: 0; margin: 0 0 16px; text-align: left; }
.sa-plan-card__features li { padding: 4px 0; font-size: 13px; color: var(--sa-sub); border-bottom: 1px solid var(--sa-border); }

/* ── Responsive ── */
@media (max-width: 768px) {
    .sa-sidebar { display: none; }
    .sa-main { margin-left: 0; }
    .sa-form__row { flex-direction: column; }
    .sa-plans-grid { grid-template-columns: 1fr; }
    .sa-auth-card { padding: 24px; }
}
.sa-vendor-nav{display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding:12px 0;margin-bottom:20px;border-bottom:1px solid #e2e8f0}
.sa-vendor-nav a{padding:8px 14px;border-radius:8px;color:#64748b;font-size:13px;font-weight:500;text-decoration:none;transition:all .2s}
.sa-vendor-nav a:hover{background:#f1f5f9;color:#1e293b}
.sa-vendor-nav a.active{background:rgba(108,92,231,0.1);color:#6C5CE7;font-weight:600}
.sa-plan-pill{padding:4px 12px;border-radius:100px;background:rgba(108,92,231,0.1);color:#6C5CE7;font-size:11px;font-weight:700}
.sa-v-stats{display:flex;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.sa-v-stat{flex:1;min-width:140px;padding:16px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;text-align:center}
.sa-v-stat span{font-size:24px;display:block;margin-bottom:4px}.sa-v-stat strong{font-size:22px;font-weight:800;display:block}.sa-v-stat small{font-size:11px;color:#64748b}
.sa-v-actions{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.sa-v-action{flex:1;min-width:180px;padding:20px;border:1px solid #e2e8f0;border-radius:14px;text-decoration:none;color:#1e293b;transition:all .2s;text-align:center}
.sa-v-action:hover{border-color:#6C5CE7;box-shadow:0 4px 16px rgba(108,92,231,0.08);transform:translateY(-2px)}
.sa-v-action strong{display:block;font-size:15px;margin:4px 0}.sa-v-action small{color:#64748b;font-size:12px}
.sa-plans-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.sa-plan-card{padding:22px;border:1px solid #e2e8f0;border-radius:16px;text-align:center;position:relative;background:#fff}
.sa-plan-card--cur{border-color:#6C5CE7;background:rgba(108,92,231,0.02)}
.sa-plan-card--pop{border-color:#6C5CE7;box-shadow:0 4px 20px rgba(108,92,231,0.1);transform:scale(1.02)}
.sa-plan-card .sa-plan-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);padding:2px 12px;border-radius:100px;background:#6C5CE7;color:#fff;font-size:11px;font-weight:700}
.sa-plan-card h3{font-size:18px;margin-bottom:4px}
.sa-plan-price{font-size:32px;font-weight:900;letter-spacing:-1px}.sa-plan-price small{font-size:14px;font-weight:400;color:#64748b}
.sa-plan-card ul{list-style:none;padding:0;text-align:left;margin:10px 0}.sa-plan-card li{padding:4px 0;font-size:13px;color:#64748b;border-bottom:1px solid #f1f5f9}
.sa-pricing-page{max-width:1100px;margin:0 auto;padding:40px 20px}
.sa-empty{text-align:center;padding:40px;border:2px dashed #e2e8f0;border-radius:16px;margin:20px 0}
.sa-empty h3{margin-bottom:8px}.sa-empty p{color:#64748b;margin-bottom:16px}
.sa-vendor-page{max-width:1100px;margin:0 auto;padding:20px}.sa-vendor-page h2{margin-bottom:16px}.sa-vendor-page h3{margin:20px 0 10px}
.sa-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;margin-bottom:16px}
.sa-check{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid #e2e8f0;border-radius:8px;cursor:pointer;font-size:13px;transition:all .2s}
.sa-check:has(input:checked){border-color:#6C5CE7;background:rgba(108,92,231,0.04)}.sa-check input{accent-color:#6C5CE7}