/* Read & Earn Rewards - Public Styles
   Design language: soft neutrals, rounded corners, subtle depth - inspired by
   modern SaaS dashboards (Stripe/Linear/Notion/Vercel), without copying any of them. */

:root{
	--rer-bg: #ffffff;
	--rer-surface: #f8fafc;
	--rer-border: #e5e9f0;
	--rer-text: #111827;
	--rer-text-muted: #6b7280;
	--rer-primary: #4f46e5;
	--rer-primary-hover: #4338ca;
	--rer-primary-contrast: #ffffff;
	--rer-success: #16a34a;
	--rer-success-bg: #ecfdf3;
	--rer-warning: #d97706;
	--rer-warning-bg: #fffbeb;
	--rer-danger: #dc2626;
	--rer-danger-bg: #fef2f2;
	--rer-radius-lg: 16px;
	--rer-radius-md: 10px;
	--rer-radius-sm: 8px;
	--rer-shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
	--rer-shadow-lg: 0 8px 24px rgba(16,24,40,.10);
	--rer-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark){
	:root:not([data-rer-theme="light"]){
		--rer-bg: #0f1115;
		--rer-surface: #171a21;
		--rer-border: #2a2e37;
		--rer-text: #f3f4f6;
		--rer-text-muted: #9ca3af;
		--rer-primary: #6366f1;
		--rer-primary-hover: #818cf8;
		--rer-success-bg: rgba(22,163,74,.12);
		--rer-warning-bg: rgba(217,119,6,.12);
		--rer-danger-bg: rgba(220,38,38,.12);
		--rer-shadow: 0 1px 2px rgba(0,0,0,.3);
		--rer-shadow-lg: 0 12px 32px rgba(0,0,0,.45);
	}
}
[data-rer-theme="dark"]{
	--rer-bg: #0f1115;
	--rer-surface: #171a21;
	--rer-border: #2a2e37;
	--rer-text: #f3f4f6;
	--rer-text-muted: #9ca3af;
	--rer-primary: #6366f1;
	--rer-primary-hover: #818cf8;
	--rer-success-bg: rgba(22,163,74,.12);
	--rer-warning-bg: rgba(217,119,6,.12);
	--rer-danger-bg: rgba(220,38,38,.12);
}

.rer-panel, .rer-dashboard, .rer-articles-grid{ font-family: var(--rer-font); color: var(--rer-text); -webkit-font-smoothing: antialiased; }
.rer-panel *, .rer-dashboard *, .rer-articles-grid *{ box-sizing: border-box; }

/* ---------- Start Reading widget (shown above the article content) ---------- */
.rer-start-reading{
	font-family: var(--rer-font);
	color: var(--rer-text);
	background: var(--rer-bg);
	border: 1px solid var(--rer-border);
	border-radius: var(--rer-radius-lg);
	box-shadow: var(--rer-shadow);
	padding: 20px 24px;
	margin: 0 0 28px;
	text-align: center;
}
.rer-start-reading *{ box-sizing: border-box; }
.rer-start-reading__text{ margin: 0 0 14px; font-size: 15px; }
.rer-start-reading .rer-btn{ width: auto; padding: 10px 28px; display: inline-block; }

/* ---------- Card ---------- */
.rer-card{
	background: var(--rer-bg);
	border: 1px solid var(--rer-border);
	border-radius: var(--rer-radius-lg);
	box-shadow: var(--rer-shadow);
	padding: 24px;
	margin: 32px 0;
	transition: box-shadow .25s ease, transform .25s ease;
}
.rer-card:hover{ box-shadow: var(--rer-shadow-lg); transform: translateY(-1px); }

.rer-card__head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.rer-amount{ font-size:28px; font-weight:700; letter-spacing:-0.02em; }

.rer-badge{ display:inline-flex; align-items:center; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:600; letter-spacing:.02em; }
.rer-badge--eligible{ background: var(--rer-success-bg); color: var(--rer-success); }
.rer-badge--expired{ background: var(--rer-danger-bg); color: var(--rer-danger); }
.rer-badge--locked{ background: var(--rer-danger-bg); color: var(--rer-danger); }
.rer-badge--warning{ background: var(--rer-warning-bg); color: var(--rer-warning); }

/* ---------- Timer ---------- */
.rer-timer-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.rer-timer{
	font-variant-numeric: tabular-nums;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 8px 16px;
	border-radius: var(--rer-radius-sm);
	background: var(--rer-surface);
	border: 1px solid var(--rer-border);
	transition: color .3s ease, background-color .3s ease;
}
.rer-timer.is-warning{ color: var(--rer-warning); }
.rer-timer.is-danger{ color: var(--rer-danger); animation: rer-pulse 1s ease-in-out infinite; }

@keyframes rer-pulse{
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.035); }
}

.rer-meta{ display:flex; flex-direction:column; gap:2px; font-size:13px; color: var(--rer-text-muted); text-align:right; }

/* ---------- Progress bar ---------- */
.rer-progress{ height:8px; border-radius:999px; background: var(--rer-surface); border:1px solid var(--rer-border); overflow:hidden; margin-bottom:18px; }
.rer-progress__bar{
	height:100%; border-radius:999px;
	background: var(--rer-success);
	transition: width 1s linear, background-color .5s ease;
}
.rer-progress__bar.is-yellow{ background:#eab308; }
.rer-progress__bar.is-orange{ background:#f97316; }
.rer-progress__bar.is-red{ background: var(--rer-danger); }

/* ---------- AI Quiz CAPTCHA ---------- */
.rer-reading-gate{
	background: var(--rer-surface);
	border: 1px solid var(--rer-border);
	border-radius: var(--rer-radius-md);
	padding: 14px 16px;
	margin-bottom: 16px;
}
.rer-reading-gate__row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.rer-reading-gate__status{ font-weight:600; font-size:13px; display:flex; align-items:center; gap:6px; }
.rer-reading-gate__status::before{
	content:"";
	width:8px; height:8px; border-radius:50%;
	background: var(--rer-text-muted);
	flex-shrink:0;
}
.rer-reading-gate__status.is-active{ color: var(--rer-success); }
.rer-reading-gate__status.is-active::before{ background: var(--rer-success); animation: rer-pulse 1.4s ease-in-out infinite; }
.rer-reading-gate__status.is-paused{ color: var(--rer-warning); }
.rer-reading-gate__status.is-paused::before{ background: var(--rer-warning); }
.rer-reading-gate__status.is-locked{ color: var(--rer-danger); }
.rer-reading-gate__status.is-locked::before{ background: var(--rer-danger); }
.rer-reading-gate__status.is-offline{ color: var(--rer-danger); }
.rer-reading-gate__status.is-offline::before{ background: var(--rer-danger); animation: rer-pulse 1.4s ease-in-out infinite; }
.rer-reading-gate__status.is-complete{ color: var(--rer-success); }
.rer-reading-gate__status.is-complete::before{ background: var(--rer-success); animation:none; }
.rer-reading-gate__count{ font-variant-numeric: tabular-nums; font-size:13px; color: var(--rer-text-muted); }
.rer-reading-gate__hint{ margin:10px 0 0; font-size:12px; color: var(--rer-text-muted); }
.rer-reading-gate.is-complete{ border-color: var(--rer-success); }
.rer-progress--reading{ margin-bottom:0; }
.rer-progress--reading .rer-progress__bar{ background: var(--rer-success); }
.rer-unlock-wrap[hidden]{ display:none; }
.rer-state-noscript{ text-align:center; color: var(--rer-text-muted); font-size:13px; }

.rer-quiz-notice{
	display:flex; align-items:flex-start; gap:8px;
	background: var(--rer-warning-bg); border:1px solid rgba(217,119,6,.25);
	color: var(--rer-warning); border-radius: var(--rer-radius-md);
	font-size:13px; line-height:1.5; padding:12px 14px; margin-bottom:14px;
}
.rer-quiz-notice__icon{ flex-shrink:0; font-size:15px; line-height:1.5; }
.rer-quiz-attempts-left{ font-size:12.5px; font-weight:600; color: var(--rer-danger); margin:-6px 0 14px; }
.rer-quiz{ margin-bottom:16px; }
.rer-quiz__loading, .rer-quiz__error{ font-size:13px; color: var(--rer-text-muted); margin:0; padding:10px 0; }
.rer-quiz__error{ color: var(--rer-danger); }
.rer-quiz__list{ display:flex; flex-direction:column; gap:14px; }
.rer-quiz__question{
	border:1px solid var(--rer-border); border-radius: var(--rer-radius-md);
	background: var(--rer-surface); padding:12px 14px; margin:0;
}
.rer-quiz__question legend{ font-size:13.5px; font-weight:600; padding:0 0 8px; float:none; width:100%; }
.rer-quiz__option{
	display:flex; align-items:flex-start; gap:8px; font-size:13.5px;
	padding:6px 4px; border-radius: var(--rer-radius-sm); cursor:pointer;
	transition: background-color .15s ease;
}
.rer-quiz__option:hover{ background: var(--rer-border); }
.rer-quiz__option input[type="radio"]{ margin-top:3px; flex-shrink:0; }

/* ---------- Buttons ---------- */
.rer-btn{
	position:relative;
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	border:none; border-radius: var(--rer-radius-sm);
	font-size:14px; font-weight:600; padding:11px 22px;
	cursor:pointer; text-decoration:none;
	transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
	overflow:hidden;
}
.rer-btn:active{ transform: scale(.98); }
.rer-btn:disabled,
.rer-btn[disabled]{ opacity:.5; cursor:not-allowed; pointer-events:none; }
.rer-btn--primary{ background: var(--rer-primary); color: var(--rer-primary-contrast); width:100%; }
.rer-btn--primary:hover{ background: var(--rer-primary-hover); }
.rer-btn--secondary{ background: var(--rer-surface); color: var(--rer-text); border:1px solid var(--rer-border); }
.rer-btn--secondary:hover{ background: var(--rer-border); }
.rer-btn-row{ display:flex; gap:10px; margin-top:14px; }

.rer-btn.is-loading .rer-btn__label{ visibility:hidden; }
.rer-btn__spinner{ display:none; position:absolute; width:18px; height:18px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; }
.rer-btn.is-loading .rer-btn__spinner{ display:block; animation: rer-spin .7s linear infinite; }
@keyframes rer-spin{ to{ transform: rotate(360deg); } }

.rer-btn--primary::after{
	content:""; position:absolute; top:50%; left:50%; width:0; height:0;
	background: rgba(255,255,255,.35); border-radius:100%;
	transform: translate(-50%,-50%); opacity:0;
}
.rer-btn--primary.rer-ripple::after{ animation: rer-ripple .5s ease-out; }
@keyframes rer-ripple{
	0%{ width:0; height:0; opacity:.6; }
	100%{ width:260px; height:260px; opacity:0; }
}

/* ---------- States ---------- */
.rer-error{ color: var(--rer-danger); font-size:13px; margin-top:10px; }
.rer-success-note{ color: var(--rer-success); font-size:13px; }

.rer-checkmark{ width:52px; height:52px; margin:0 auto 12px; }
.rer-checkmark svg{ width:100%; height:100%; }
.rer-checkmark circle{ stroke:var(--rer-success); stroke-width:2; stroke-dasharray:151; stroke-dashoffset:151; animation: rer-draw .5s ease forwards; }
.rer-checkmark path{ stroke:var(--rer-success); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:36; stroke-dashoffset:36; animation: rer-draw .4s .4s ease forwards; }
@keyframes rer-draw{ to{ stroke-dashoffset:0; } }

.rer-state-claimed, .rer-state-expired, .rer-state-cooldown, .rer-state-login, .rer-state-locked{ text-align:center; }
.rer-cooldown-notice{ margin:18px 0; padding:16px; border-radius:12px; background: var(--rer-surface); border:1px solid var(--rer-border); }
.rer-cooldown-notice .rer-timer{ margin:8px 0; }
.rer-cooldown-until{ font-size:13px; color: var(--rer-text-muted, inherit); }
.rer-state-locked p{ color: var(--rer-text-muted); font-size:13.5px; margin:8px 0 16px; }
.rer-claim-details{ display:flex; justify-content:center; gap:32px; margin:14px 0; }
.rer-claim-details div{ display:flex; flex-direction:column; gap:4px; }
.rer-claim-details span{ font-size:12px; color: var(--rer-text-muted); }
.rer-claim-details strong{ font-size:18px; }

.rer-anim-fadein{ animation: rer-fadein .45s ease both; }
@keyframes rer-fadein{ from{ opacity:0; transform: translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- Dashboard ---------- */
.rer-stats-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:16px; margin-bottom:28px; }
.rer-stat-card{ background: var(--rer-bg); border:1px solid var(--rer-border); border-radius: var(--rer-radius-md); box-shadow: var(--rer-shadow); padding:18px; display:flex; flex-direction:column; gap:6px; }
.rer-stat-label{ font-size:12px; color: var(--rer-text-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.rer-stat-value{ font-size:22px; font-weight:700; }

.rer-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--rer-border); margin-bottom:20px; overflow-x:auto; }
.rer-tab{ background:none; border:none; padding:10px 16px; font-size:14px; font-weight:600; color: var(--rer-text-muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; transition: color .2s ease, border-color .2s ease; }
.rer-tab:hover{ color: var(--rer-text); }
.rer-tab.is-active{ color: var(--rer-primary); border-bottom-color: var(--rer-primary); }

.rer-tab-panel{ display:none; }
.rer-tab-panel.is-active{ display:block; animation: rer-fadein .3s ease both; }

.rer-table{ width:100%; border-collapse:collapse; background: var(--rer-bg); border:1px solid var(--rer-border); border-radius: var(--rer-radius-md); overflow:hidden; }
.rer-table th, .rer-table td{ padding:12px 14px; text-align:left; font-size:13px; border-bottom:1px solid var(--rer-border); }
.rer-table th{ background: var(--rer-surface); color: var(--rer-text-muted); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.04em; }
.rer-table tr:last-child td{ border-bottom:none; }
.rer-empty{ text-align:center; color: var(--rer-text-muted); padding:24px; }

.rer-status-badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; text-transform:capitalize; }
.rer-status-completed, .rer-status-approved{ background: var(--rer-success-bg); color: var(--rer-success); }
.rer-status-pending{ background: var(--rer-warning-bg); color: var(--rer-warning); }
.rer-status-rejected{ background: var(--rer-danger-bg); color: var(--rer-danger); }
.rer-type-reward{ background: var(--rer-success-bg); color: var(--rer-success); }
.rer-type-withdrawal{ background: var(--rer-danger-bg); color: var(--rer-danger); }

.rer-positive{ color: var(--rer-success); font-weight:600; }
.rer-negative{ color: var(--rer-danger); font-weight:600; }

/* ---------- Form ---------- */
.rer-form{ max-width:420px; }
.rer-form-hint{ font-size:13px; color: var(--rer-text-muted); margin-bottom:16px; }
.rer-form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.rer-form-row label{ font-size:13px; font-weight:600; }
.rer-form-row input{
	padding:10px 12px; border-radius: var(--rer-radius-sm); border:1px solid var(--rer-border);
	background: var(--rer-bg); color: var(--rer-text); font-size:14px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.rer-form-row input:focus{ outline:none; border-color: var(--rer-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
.rer-form-message{ margin-top:12px; font-size:13px; padding:10px 12px; border-radius: var(--rer-radius-sm); }
.rer-form-message.is-success{ background: var(--rer-success-bg); color: var(--rer-success); }
.rer-form-message.is-error{ background: var(--rer-danger-bg); color: var(--rer-danger); }

/* ---------- Articles grid ---------- */
.rer-articles-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:18px; margin:24px 0; }
.rer-article-card{ display:block; text-decoration:none; color:inherit; background: var(--rer-bg); border:1px solid var(--rer-border); border-radius: var(--rer-radius-md); overflow:hidden; box-shadow: var(--rer-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.rer-article-card:hover{ transform: translateY(-3px); box-shadow: var(--rer-shadow-lg); }
.rer-article-thumb img{ width:100%; height:130px; object-fit:cover; display:block; }
.rer-article-body{ padding:14px; display:flex; flex-direction:column; gap:8px; }
.rer-article-body h5{ margin:0; font-size:14px; line-height:1.4; }
.rer-article-date{ font-size:12px; color: var(--rer-text-muted); }

/* ---------- Toasts ---------- */
.rer-toast-stack{ position:fixed; top:20px; right:20px; z-index:99999; display:flex; flex-direction:column; gap:10px; }
.rer-toast{
	background: var(--rer-bg); color: var(--rer-text); border:1px solid var(--rer-border);
	border-radius: var(--rer-radius-sm); box-shadow: var(--rer-shadow-lg);
	padding:12px 16px; min-width:240px; font-size:13px; font-weight:500;
	transform: translateX(120%); transition: transform .3s ease;
}
.rer-toast.is-visible{ transform: translateX(0); }
.rer-toast.is-success{ border-left:3px solid var(--rer-success); }
.rer-toast.is-error{ border-left:3px solid var(--rer-danger); }

/* ---------- Accessibility / motion ---------- */
@media (prefers-reduced-motion: reduce){
	.rer-card, .rer-btn, .rer-progress__bar, .rer-timer, .rer-anim-fadein, .rer-toast{ animation:none !important; transition:none !important; }
}

@media (max-width: 480px){
	.rer-amount{ font-size:22px; }
	.rer-timer{ font-size:20px; }
	.rer-claim-details{ gap:18px; }
	.rer-reading-gate__row{ flex-direction:column; align-items:flex-start; gap:4px; }
	.rer-btn-row{ flex-direction:column; }
	.rer-toast-stack{ left:12px; right:12px; top:12px; }
	.rer-toast{ min-width:0; width:100%; }
	.rer-card{ padding:18px; margin:20px 0; }
}