:root{
    --bg:#f6f7fb;
    --card:#fff;
    --muted:#6b7280;
    --accent:#5b46ff;
    --accent2:#8369ff;
    --shadow:rgba(12,18,36,0.06);
    --radius:12px;
    --border-color:#eef2ff;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:#0f172a}

/* Reusable inline spinner */
.spinner{width:40px;height:40px;border-radius:50%;border:4px solid rgba(15,23,42,0.1);border-top-color:var(--accent);animation:loader-spin .9s linear infinite}
@keyframes loader-spin{to{transform:rotate(360deg)}}

.header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.back-link{display:inline-block;font-size:14px;font-weight:600;color:var(--accent);text-decoration:none;background:#f3f4ff;padding:8px 14px;border-radius:8px}
.title-lg{font-weight:800;font-size:22px}
.small{font-size:13px;color:var(--muted)}

.card{background:var(--card);border-radius:var(--radius);box-shadow:0 10px 30px var(--shadow);transition:transform 0.2s ease, box-shadow 0.2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(12,18,36,0.08)}

.continue-btn{margin-top:18px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;padding:12px;border-radius:10px;border:0;cursor:pointer;font-weight:800;width:100%;font-size:16px;transition:all .2s}
.continue-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 5px 15px rgba(91,70,255,0.3)}
.continue-btn:disabled{opacity:.6;cursor:not-allowed}