/* StartJoe — dark mode, widget-based. Fără dependențe externe. */
.sj-wrap {
	--sj-bg: #ffffff;
	--sj-card: #ffffff;
	--sj-card-2: #f4f6fa;
	--sj-line: #e3e8f0;
	--sj-text: #1a2230;
	--sj-muted: #66708a;
	--sj-accent: #3b6fff;
	--sj-accent-2: #0bb07b;
	--sj-danger: #e23b3b;
	--sj-gold: #f2a900;
	--sj-radius: 16px;
	--sj-shadow: 0 1px 3px rgba(18,30,55,.06), 0 8px 24px rgba(18,30,55,.05);
	max-width: 920px;
	margin: 0 auto;
	padding: 24px;
	color: var(--sj-text);
	background: var(--sj-bg);
	border-radius: var(--sj-radius);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.55;
}
.sj-wrap * { box-sizing: border-box; }

/* Tipografie */
.sj-hero { font-size: clamp(28px, 5vw, 48px); font-weight: 800; margin: 8px 0 16px; letter-spacing: -0.02em; }
.sj-hero span { color: var(--sj-accent); }
.sj-sub { color: var(--sj-muted); font-size: 18px; max-width: 560px; margin: 0 auto 28px; }
.sj-step--promise { text-align: center; padding: 48px 16px; }

/* Butoane */
.sj-btn {
	background: var(--sj-accent);
	color: #fff; border: 0; cursor: pointer;
	padding: 12px 20px; border-radius: 12px;
	font-size: 15px; font-weight: 600;
	transition: transform .12s ease, filter .12s ease;
}
.sj-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.sj-btn:disabled { opacity: .5; cursor: not-allowed; }
.sj-btn--xl { padding: 16px 32px; font-size: 18px; border-radius: 14px; }
.sj-btn--ghost { background: transparent; border: 1px solid var(--sj-line); color: var(--sj-muted); }

/* Quiz */
.sj-ticker { font-size: 13px; color: var(--sj-accent-2); min-height: 18px; margin-bottom: 12px; opacity: .85; }
.sj-progress { height: 8px; background: var(--sj-card-2); border-radius: 8px; overflow: hidden; }
.sj-progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--sj-accent), var(--sj-accent-2)); transition: width .4s ease; }
.sj-progress__label { color: var(--sj-muted); font-size: 14px; margin: 8px 0 24px; }
.sj-q__label { display: block; font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.sj-q__input {
	width: 100%; background: var(--sj-card); border: 1px solid var(--sj-line);
	color: var(--sj-text); border-radius: 12px; padding: 14px; font-size: 16px; resize: vertical;
}
.sj-q__next { margin-top: 16px; }

/* Raport */
.sj-report { background: var(--sj-card); border-left: 3px solid var(--sj-danger); padding: 18px; border-radius: 12px; margin: 16px 0; }
.sj-report--short { font-size: 18px; }
.sj-report__more summary { cursor: pointer; color: var(--sj-accent); margin: 8px 0; }
.sj-commit { font-size: 20px; text-align: center; margin-top: 24px; }
.sj-commit__actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }

/* Contract */
.sj-contract { background: var(--sj-card); padding: 28px; border-radius: var(--sj-radius); border: 1px solid var(--sj-line); }
.sj-contract__body { background: var(--sj-card-2); padding: 16px; border-radius: 12px; color: var(--sj-muted); font-size: 14px; margin-bottom: 20px; }
.sj-field { margin-bottom: 16px; }
.sj-field label { display: block; font-size: 13px; color: var(--sj-muted); margin-bottom: 6px; }
.sj-field input { width: 100%; background: var(--sj-bg); border: 1px solid var(--sj-line); color: var(--sj-text); border-radius: 10px; padding: 12px; font-size: 16px; }
.sj-signature { font-family: "Brush Script MT", cursive; font-size: 22px !important; }
.sj-error { color: var(--sj-danger); font-size: 14px; }

/* Dashboard */
.sj-greet { font-size: 26px; font-weight: 700; margin-bottom: 20px; }
.sj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 16px; }
.sj-card { background: var(--sj-card); border: 1px solid var(--sj-line); border-radius: var(--sj-radius); padding: 20px; }
.sj-card__title { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--sj-muted); margin-bottom: 8px; }
.sj-card__big { display: block; font-size: 34px; font-weight: 800; }
.sj-card--vault .sj-card__big { color: var(--sj-accent-2); }
.sj-card--points .sj-card__big { color: var(--sj-gold); }
.sj-card__sub { font-size: 13px; color: var(--sj-muted); }
.sj-btn--task { width: 100%; background: var(--sj-accent-2); }

.sj-ai-msg { background: var(--sj-card-2); border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.sj-chat { display: flex; gap: 8px; }
.sj-chat input { flex: 1; background: var(--sj-bg); border: 1px solid var(--sj-line); color: var(--sj-text); border-radius: 10px; padding: 12px; }

.sj-feed { list-style: none; margin: 0; padding: 0; }
.sj-feed li { padding: 10px 0; border-bottom: 1px solid var(--sj-line); font-size: 14px; display: flex; justify-content: space-between; }
.sj-feed .gain { color: var(--sj-accent-2); }
.sj-feed .loss { color: var(--sj-danger); }

.sj-card--witness input, .sj-card--witness .sj-btn { margin-top: 8px; }
.sj-card--witness input[type=email] { width: 100%; background: var(--sj-bg); border: 1px solid var(--sj-line); color: var(--sj-text); border-radius: 10px; padding: 12px; }
.sj-check { display: block; font-size: 13px; color: var(--sj-muted); margin: 8px 0; }
.sj-incognito { margin-top: 16px; }

/* Leaderboard */
.sj-tabs { display: flex; gap: 8px; margin: 16px 0; }
.sj-tab { background: var(--sj-card); border: 1px solid var(--sj-line); color: var(--sj-muted); padding: 8px 14px; border-radius: 10px; cursor: pointer; }
.sj-tab.active { background: var(--sj-accent); color: #fff; border-color: var(--sj-accent); }
.sj-board { list-style: none; margin: 0; padding: 0; }
.sj-board__row { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--sj-card); border: 1px solid var(--sj-line); border-radius: 12px; margin-bottom: 8px; }
.sj-board__rank { font-weight: 800; color: var(--sj-muted); width: 28px; }
.sj-board__name { color: var(--sj-text); text-decoration: none; font-weight: 600; flex: 1; }
.sj-board__points { color: var(--sj-gold); font-weight: 700; }
.sj-board__vault { color: var(--sj-accent-2); font-size: 13px; }
.sj-crown { font-size: 18px; }
.sj-alert { color: var(--sj-danger); }

/* Confetti + dopamină pop */
.sj-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
.sj-pop {
	position: fixed; left: 50%; top: 30%; transform: translateX(-50%);
	background: var(--sj-card-2); color: var(--sj-text); padding: 16px 24px;
	border-radius: 14px; border: 1px solid var(--sj-accent-2);
	z-index: 10000; font-weight: 600; box-shadow: 0 10px 40px rgba(0,0,0,.5);
	animation: sj-pop-in .3s ease, sj-pop-out .3s ease 2.4s forwards;
}
@keyframes sj-pop-in { from { opacity: 0; transform: translateX(-50%) translateY(-10px); } }
@keyframes sj-pop-out { to { opacity: 0; transform: translateX(-50%) translateY(-10px); } }

/* ============================================================ *
 *  Leaderboard v2 — 3 coloane + card de tier
 * ============================================================ */
.sj-leaderboard .sj-lb-head { display:flex; align-items:baseline; gap:12px; margin-bottom:4px; }
.sj-lb-updated { color: var(--sj-muted); font-size: 12px; }

/* Card de tier */
.sj-tiercard {
	display: grid; grid-template-columns: 220px 1fr; gap: 24px;
	background: var(--sj-card); border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius); padding: 20px; margin: 16px 0 24px;
}
.sj-tiercard__me { text-align: center; }
.sj-tiercard__avatar { position: relative; display: inline-block; }
.sj-tiercard__img { border-radius: 50%; border: 2px solid var(--sj-accent); }
.sj-tiercard__rank {
	position: absolute; bottom: -4px; right: -4px; background: var(--sj-accent-2);
	color: #04221a; font-weight: 800; font-size: 12px; min-width: 22px; height: 22px;
	border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--sj-card);
}
.sj-tiercard__name { font-weight: 700; margin-top: 8px; }
.sj-tiercard__badge {
	display: inline-block; margin: 6px 0; padding: 3px 12px; border-radius: 999px;
	background: var(--sj-card-2); color: var(--sj-accent-2); font-size: 13px; font-weight: 600;
}
.sj-tiercard__bar { height: 6px; background: var(--sj-card-2); border-radius: 6px; overflow: hidden; margin: 8px 0 6px; }
.sj-tiercard__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--sj-accent), var(--sj-accent-2)); }
.sj-tiercard__hint { color: var(--sj-muted); font-size: 12px; }
.sj-tiercard__dist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; align-content: center; }
.sj-tiercard__row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--sj-card-2); border-radius: 10px; }
.sj-tiercard__row.is-current { outline: 1px solid var(--sj-accent); }
.sj-tiercard__tnum { width: 22px; height: 22px; border-radius: 50%; background: var(--sj-line); color: var(--sj-text); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.sj-tiercard__tname { flex: 1; font-size: 14px; }
.sj-tiercard__tpct { color: var(--sj-muted); font-size: 13px; }

/* Grila celor 3 coloane */
.sj-lb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sj-lb-col { background: var(--sj-card); border: 1px solid var(--sj-line); border-radius: var(--sj-radius); padding: 14px; }
.sj-lb-col__title { text-align: center; font-weight: 700; padding: 8px 0 14px; border-bottom: 1px solid var(--sj-line); margin-bottom: 8px; }
.sj-board { list-style: none; margin: 0; padding: 0; }
.sj-board__row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; }
.sj-board__row.is-me { background: var(--sj-card-2); }
.sj-board__empty { color: var(--sj-muted); justify-content: center; font-size: 13px; }
.sj-board__rank { width: 24px; height: 24px; border-radius: 50%; background: var(--sj-line); color: var(--sj-text); font-size: 12px; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto; }
.sj-board__rank.rank-1 { background: var(--sj-gold); color: #3a2e00; }
.sj-board__rank.rank-2 { background: #c7ced9; color: #1b2330; }
.sj-board__rank.rank-3 { background: #e08a4b; color: #2a1500; }
.sj-board__avatar { border-radius: 50%; width: 32px; height: 32px; flex: 0 0 auto; }
.sj-board__name { flex: 1; color: var(--sj-text); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.sj-board__name:hover { color: var(--sj-accent); }
.sj-board__points { color: var(--sj-accent-2); font-weight: 700; font-size: 14px; }

.sj-lb-me { margin-top: 12px; border-top: 1px solid var(--sj-line); padding-top: 10px; }
.sj-lb-me__label { display: block; font-size: 11px; letter-spacing: .1em; color: var(--sj-muted); margin-bottom: 4px; }
.sj-lb-cta { text-align: center; margin-top: 20px; }

@media (max-width: 800px) {
	.sj-lb-grid { grid-template-columns: 1fr; }
	.sj-tiercard { grid-template-columns: 1fr; }
	.sj-tiercard__dist { grid-template-columns: 1fr; }
}

/* ============================================================ *
 *  v1.0.3 — temă albă: umbre, chip-uri, ticker global
 * ============================================================ */
.sj-card, .sj-lb-col, .sj-tiercard, .sj-contract { box-shadow: var(--sj-shadow); }
.sj-wrap { box-shadow: none; }

/* Ticker dovadă socială — mereu vizibil, sus */
.sj-ticker {
	display: flex; align-items: center; gap: 8px;
	background: var(--sj-card-2); border: 1px solid var(--sj-line);
	border-radius: 999px; padding: 8px 16px; margin: 0 auto 20px;
	font-size: 13px; color: var(--sj-muted); width: fit-content; max-width: 100%;
}
.sj-ticker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sj-accent-2); animation: sj-pulse 1.6s infinite; flex: 0 0 auto; }
@keyframes sj-pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

/* Variante predefinite (chips) — răspuns rapid + dovadă socială */
.sj-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.sj-chip {
	background: var(--sj-card-2); border: 1px solid var(--sj-line); color: var(--sj-text);
	border-radius: 999px; padding: 8px 14px; font-size: 14px; cursor: pointer;
	transition: all .12s ease; display: inline-flex; align-items: center; gap: 6px;
}
.sj-chip:hover { border-color: var(--sj-accent); color: var(--sj-accent); }
.sj-chip.is-selected { background: var(--sj-accent); border-color: var(--sj-accent); color: #fff; }
.sj-chip__count { font-size: 11px; opacity: .7; }
.sj-q__hint { font-size: 12px; color: var(--sj-muted); margin: 0 0 6px; }
.sj-q--ai .sj-q__label::before { content: "🤖 "; }

/* ============================================================ *
 *  v1.0.4 — kicker, mirror, loader, contract legal
 * ============================================================ */
.sj-kicker { display:inline-block; letter-spacing:.18em; font-size:12px; font-weight:700; color:var(--sj-accent); margin-bottom:12px; }

/* Mirroring durere */
.sj-mirror {
	background:#eef3ff; border:1px solid #d4e0ff; border-left:4px solid var(--sj-accent);
	color:#1a2230; border-radius:12px; padding:14px 16px; margin-bottom:18px;
	font-size:15px; font-style:italic;
}

/* Loader cu suspans */
.sj-loading { text-align:center; padding:48px 16px; }
.sj-spinner {
	width:48px; height:48px; margin:0 auto 18px; border-radius:50%;
	border:4px solid var(--sj-line); border-top-color:var(--sj-accent);
	animation:sj-spin 0.9s linear infinite;
}
@keyframes sj-spin { to { transform:rotate(360deg); } }
.sj-loading__txt { color:var(--sj-muted); font-size:16px; min-height:24px; }

/* Contract — format legal */
.sj-contract {
	position:relative; background:#fffdf7; border:1px solid #e8e2d2;
	border-radius:8px; padding:36px 40px;
	font-family:Georgia,"Times New Roman",serif; color:#2a2a28;
	box-shadow:var(--sj-shadow);
}
.sj-contract__seal {
	position:absolute; top:20px; right:24px; width:64px; height:64px;
	border:2px solid var(--sj-accent); color:var(--sj-accent); border-radius:50%;
	display:grid; place-items:center; font-weight:800; font-size:13px;
	transform:rotate(-12deg); opacity:.7; font-family:Georgia,serif;
}
.sj-contract__title { font-family:Georgia,serif; text-align:center; letter-spacing:.08em; font-size:24px; margin:0 0 20px; }
.sj-contract__body { font-size:15.5px; line-height:1.8; text-align:justify; }
.sj-contract__body p { margin:0 0 12px; }
.sj-c-name { font-weight:700; border-bottom:1px solid #aaa; padding:0 4px; }

.sj-contract .sj-field { margin-top:14px; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.sj-sign-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:24px; }
.sj-sign-block { display:flex; flex-direction:column; }
.sj-sign-block input { font-family:-apple-system,sans-serif; }
.sj-sign-line { border-top:1px solid #8a8a82; margin-top:8px; padding-top:6px; font-size:12px; color:#6a6a62; }
.sj-signature { font-family:"Brush Script MT","Segoe Script",cursive; font-size:22px !important; }
.sj-signature--fixed { font-size:28px; color:#1a2230; padding:6px 0; min-height:40px; }
.sj-witness-intro { font-size:13px; color:#6a6a62; margin-top:22px; font-family:-apple-system,sans-serif; }
.sj-contract .sj-btn { margin-top:24px; font-family:-apple-system,sans-serif; }

@media (max-width:640px){ .sj-sign-grid { grid-template-columns:1fr; } .sj-contract { padding:24px 20px; } }