/* Software Point Affiliate Pro — Frontend (Glass UI, dark/light, responsive) */
.spaff-app{
	--sp-bg:#f3f4f6;
	--sp-card:rgba(255,255,255,.72);
	--sp-border:rgba(255,255,255,.55);
	--sp-text:#111827;
	--sp-muted:#6b7280;
	--sp-accent:#6366f1;
	--sp-accent2:#8b5cf6;
	--sp-good:#10b981;
	--sp-bad:#ef4444;
	--sp-warn:#f59e0b;
	--sp-shadow:0 10px 30px rgba(17,24,39,.10);
	--sp-radius:18px;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	color:var(--sp-text);
	background:
		radial-gradient(1200px 600px at 10% -10%,rgba(99,102,241,.16),transparent 60%),
		radial-gradient(1000px 600px at 110% 10%,rgba(139,92,246,.16),transparent 55%),
		var(--sp-bg);
	padding:22px;border-radius:22px;max-width:1200px;margin:0 auto;
}
.spaff-app[data-theme="dark"]{
	--sp-bg:#0b1020;
	--sp-card:rgba(30,41,59,.55);
	--sp-border:rgba(148,163,184,.18);
	--sp-text:#e5e7eb;
	--sp-muted:#94a3b8;
	--sp-shadow:0 10px 30px rgba(0,0,0,.35);
}
.spaff-app *{box-sizing:border-box}

.spaff-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.spaff-brand{display:flex;align-items:center;gap:12px}
.spaff-logo{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--sp-accent),var(--sp-accent2));box-shadow:var(--sp-shadow)}
.spaff-brand-title{font-size:1.15rem;font-weight:700;line-height:1.1}
.spaff-brand-sub{font-size:.82rem;color:var(--sp-muted)}
.spaff-theme-toggle{background:var(--sp-card);border:1px solid var(--sp-border);backdrop-filter:blur(12px);border-radius:12px;padding:8px 12px;cursor:pointer;font-size:1rem;color:var(--sp-text)}

.spaff-announce{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.spaff-announce-item{background:linear-gradient(90deg,rgba(99,102,241,.14),rgba(139,92,246,.10));border:1px solid var(--sp-border);border-radius:12px;padding:10px 14px;font-size:.9rem}

.spaff-glass{background:var(--sp-card);border:1px solid var(--sp-border);border-radius:var(--sp-radius);box-shadow:var(--sp-shadow);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.spaff-grid{display:grid;gap:16px;margin-bottom:16px}
.spaff-grid-2{grid-template-columns:repeat(2,1fr)}
.spaff-grid-4{grid-template-columns:repeat(4,1fr)}

.spaff-metric{padding:18px}
.spaff-metric-label{font-size:.8rem;color:var(--sp-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.spaff-metric-value{font-size:1.5rem;font-weight:800}
.spaff-metric.spaff-mini .spaff-metric-value{font-size:1.25rem}
.spaff-id{letter-spacing:.06em}
.spaff-accent{color:var(--sp-accent)}
.spaff-neg{color:var(--sp-bad)}
.spaff-chip{display:inline-block;margin-top:8px;font-size:.72rem;padding:3px 10px;border-radius:999px;background:rgba(99,102,241,.14);color:var(--sp-accent);font-weight:600}
.spaff-chip-rank{background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(139,92,246,.16));color:var(--sp-accent2)}

.spaff-panel{padding:18px}
.spaff-panel h3{margin:0 0 14px;font-size:1rem;font-weight:700}

.spaff-copy-row{display:flex;gap:8px;margin-bottom:12px}
.spaff-link-input{flex:1;min-width:0;padding:10px 12px;border-radius:10px;border:1px solid var(--sp-border);background:rgba(255,255,255,.5);color:var(--sp-text);font-size:.85rem}
.spaff-app[data-theme="dark"] .spaff-link-input{background:rgba(15,23,42,.5)}
.spaff-copy-btn{padding:10px 14px;border-radius:10px;border:0;background:var(--sp-accent);color:#fff;font-weight:600;cursor:pointer;transition:transform .08s ease}
.spaff-copy-btn:active{transform:scale(.96)}

.spaff-share-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.spaff-share-btn{--sp:#6366f1;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:10px;border:0;background:var(--sp);color:#fff;font-size:.8rem;font-weight:600;cursor:pointer;text-decoration:none;opacity:.95;transition:transform .08s ease,opacity .1s}
.spaff-share-btn:hover{opacity:1;transform:translateY(-1px);color:#fff}

.spaff-qr-panel{text-align:center}
.spaff-qr{display:inline-block;padding:12px;background:#fff;border-radius:14px;margin-bottom:12px}
.spaff-qr canvas,.spaff-qr img{display:block}
.spaff-qr-mini{padding:8px;margin:10px auto}

.spaff-btn{display:inline-block;padding:11px 18px;border-radius:12px;border:0;background:linear-gradient(135deg,var(--sp-accent),var(--sp-accent2));color:#fff;font-weight:700;cursor:pointer;text-decoration:none;transition:transform .08s ease,box-shadow .1s}
.spaff-btn:hover{transform:translateY(-1px);box-shadow:var(--sp-shadow);color:#fff}
.spaff-btn-sm{padding:7px 12px;font-size:.82rem;border-radius:10px}

.spaff-table-sm{width:100%;border-collapse:collapse;font-size:.85rem}
.spaff-table-sm th{text-align:left;color:var(--sp-muted);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--sp-border);font-size:.76rem;text-transform:uppercase;letter-spacing:.03em}
.spaff-table-sm td{padding:9px 10px;border-bottom:1px solid var(--sp-border)}
.spaff-table-sm tr:last-child td{border-bottom:0}
.ta-r{text-align:right}

.spaff-status{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:capitalize}
.spaff-status-pending{background:rgba(245,158,11,.16);color:#b45309}
.spaff-status-approved{background:rgba(16,185,129,.16);color:#047857}
.spaff-status-paid{background:rgba(99,102,241,.16);color:#4338ca}
.spaff-status-rejected{background:rgba(239,68,68,.16);color:#b91c1c}
.spaff-status-active{background:rgba(16,185,129,.16);color:#047857}
.spaff-status-suspended{background:rgba(239,68,68,.16);color:#b91c1c}

.spaff-badges{display:flex;flex-wrap:wrap;gap:8px}
.spaff-achievement{background:linear-gradient(135deg,rgba(245,158,11,.16),rgba(139,92,246,.14));border:1px solid var(--sp-border);padding:6px 12px;border-radius:999px;font-size:.82rem;font-weight:600}

.spaff-field{margin-bottom:12px;display:flex;flex-direction:column;gap:5px}
.spaff-field label{font-size:.8rem;color:var(--sp-muted);font-weight:600}
.spaff-field input,.spaff-field select{padding:10px 12px;border-radius:10px;border:1px solid var(--sp-border);background:rgba(255,255,255,.5);color:var(--sp-text)}
.spaff-app[data-theme="dark"] .spaff-field input,.spaff-app[data-theme="dark"] .spaff-field select{background:rgba(15,23,42,.5)}
.spaff-hint{font-size:.78rem;color:var(--sp-muted);margin:4px 0 10px}
.spaff-form-msg{margin-top:10px;font-size:.85rem;font-weight:600}
.spaff-form-msg.ok{color:var(--sp-good)}
.spaff-form-msg.err{color:var(--sp-bad)}

.spaff-products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.spaff-product-card{padding:14px;text-align:center}
.spaff-product-thumb{height:150px;display:grid;place-items:center;overflow:hidden;border-radius:12px;margin-bottom:10px;background:rgba(148,163,184,.12)}
.spaff-product-thumb img{max-width:100%;max-height:100%;object-fit:contain}
.spaff-product-name{font-weight:700;font-size:.92rem;margin-bottom:4px;min-height:2.4em}
.spaff-product-price{color:var(--sp-accent);font-weight:700;margin-bottom:10px}

.spaff-leaderboard .spaff-rank{font-size:1.1rem;font-weight:800}
.spaff-top3{background:linear-gradient(90deg,rgba(245,158,11,.10),transparent)}

.spaff-notice{background:var(--sp-card);border:1px solid var(--sp-border);border-radius:14px;padding:16px 18px;text-align:center;color:var(--sp-muted)}

.spaff-product-box{margin-top:16px;padding:16px;border-radius:14px;background:var(--sp-card,rgba(255,255,255,.72));border:1px solid rgba(0,0,0,.06);box-shadow:0 8px 20px rgba(17,24,39,.08)}
.spaff-pb-title{font-weight:700;margin-bottom:10px}

@media(max-width:900px){
	.spaff-grid-4{grid-template-columns:repeat(2,1fr)}
	.spaff-grid-2{grid-template-columns:1fr}
}
@media(max-width:560px){
	.spaff-app{padding:14px}
	.spaff-grid-4{grid-template-columns:1fr}
	.spaff-metric-value{font-size:1.3rem}
	.spaff-copy-row{flex-direction:column}
}