/* Snap Earn design system helpers (Tailwind handles layout; these cover components, skeletons and the wheel) */
:root{--blue:#3478F6;--purple:#7952E8;--navy:#0F1B3D;--lav:#E6E0FA;--snow:#F8FAFF;--grad:linear-gradient(135deg,#3478F6,#7952E8)}
html{-webkit-text-size-adjust:100%;touch-action:manipulation}
body{background:var(--snow);color:var(--navy);-webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable]{-webkit-user-select:text;-moz-user-select:text;user-select:text}
img{-webkit-user-drag:none}

/* Cards & surfaces */
.card{background:#fff;border:1px solid var(--lav);border-radius:20px;box-shadow:0 4px 18px rgba(52,120,246,.06)}
.card-hover{transition:transform .2s ease,box-shadow .2s ease}
.card-hover:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(121,82,232,.14)}
.grad-card{background:var(--grad);color:#fff;border-radius:22px;box-shadow:0 14px 34px rgba(121,82,232,.28);position:relative;overflow:hidden}
.grad-card::before,.grad-card::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.12)}
.grad-card::before{width:180px;height:180px;right:-50px;top:-60px}
.grad-card::after{width:120px;height:120px;left:-30px;bottom:-50px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:.875rem;line-height:1.2;padding:.7rem 1.2rem;border-radius:14px;border:1px solid transparent;cursor:pointer;transition:all .18s ease;text-align:center}
.btn:active{transform:scale(.97)}
.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 16px rgba(121,82,232,.28)}
.btn-primary:hover{box-shadow:0 8px 22px rgba(121,82,232,.4);filter:brightness(1.05)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{filter:brightness(1.07)}
.btn-soft{background:#fff;color:var(--purple);border-color:var(--lav)}
.btn-soft:hover{background:var(--lav)}
.btn-danger{background:#fff;color:#e11d48;border-color:#fecdd3}
.btn-danger:hover{background:#fff1f2}
.btn-success{background:#10b981;color:#fff}
.btn-block{width:100%}
.btn-sm{padding:.45rem .8rem;font-size:.78rem;border-radius:11px}

/* Forms */
.input{width:100%;background:#fff;border:1.5px solid var(--lav);border-radius:14px;padding:.7rem .95rem;font-size:.9rem;color:var(--navy);outline:none;transition:border-color .15s,box-shadow .15s}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(52,120,246,.12)}
.input::placeholder{color:#a3acc2}
.label{display:block;font-size:.78rem;font-weight:700;color:#4b5675;margin-bottom:.35rem}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%237952E8' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;padding-right:2.3rem}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:.25rem;font-size:.68rem;font-weight:700;padding:.2rem .6rem;border-radius:999px;white-space:nowrap}
.badge-emerald{background:#d1fae5;color:#047857}.badge-amber{background:#fef3c7;color:#b45309}
.badge-rose{background:#ffe4e6;color:#be123c}.badge-blue{background:#dbeafe;color:#1d4ed8}
.badge-purple{background:#ede9fe;color:#6d28d9}.badge-slate{background:#f1f5f9;color:#475569}

/* Sidebar */
.side-link{display:flex;align-items:center;gap:.8rem;padding:.65rem .9rem;border-radius:14px;font-weight:600;font-size:.875rem;color:#4b5675;transition:all .15s}
.side-link:hover{background:var(--snow);color:var(--purple)}
.side-link-active{background:var(--grad);color:#fff!important;box-shadow:0 6px 16px rgba(121,82,232,.25)}
.side-link-active:hover{background:var(--grad)}

/* Tabs */
.tabs{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;padding:.5rem 1rem;border-radius:999px;font-size:.82rem;font-weight:700;color:#4b5675;background:#fff;border:1px solid var(--lav);white-space:nowrap}
.tab:hover{background:var(--lav)}
.tab-active{background:var(--grad);color:#fff;border-color:transparent}

/* Tables */
.table-wrap{overflow-x:auto;border-radius:16px;border:1px solid var(--lav);background:#fff}
.tbl{width:100%;font-size:.85rem;border-collapse:collapse}
.tbl th{background:var(--snow);text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#6b7694;padding:.75rem 1rem;white-space:nowrap}
.tbl td{padding:.8rem 1rem;border-top:1px solid #f0edfb;vertical-align:middle}
.tbl tr:hover td{background:#fbfaff}

/* Progress */
.progress{height:10px;background:#eef0fb;border-radius:999px;overflow:hidden}
.progress>span{display:block;height:100%;background:var(--grad);border-radius:999px;transition:width .6s ease}

/* Skeleton + page reveal */
.skel{background:linear-gradient(90deg,#eceffa 25%,#f6f4ff 37%,#eceffa 63%);background-size:400% 100%;animation:skel 1.3s ease infinite}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
.pc-hidden{opacity:0;position:absolute;left:-9999px;top:0;width:100%}
.pc-show{opacity:1;position:static;animation:fadeUp .35s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Modal */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:1rem;background:rgba(15,27,61,.55);backdrop-filter:blur(3px)}
.modal.open{display:flex;animation:fadeUp .2s ease both}
.modal-card{background:#fff;border-radius:22px;max-width:30rem;width:100%;max-height:90vh;overflow-y:auto;padding:1.4rem}

/* Spin wheel */
.wheel-wrap{position:relative;width:min(82vw,320px);aspect-ratio:1;margin:0 auto}
.wheel{width:100%;height:100%;border-radius:50%;border:8px solid #fff;box-shadow:0 0 0 3px var(--lav),0 18px 40px rgba(121,82,232,.3);position:relative;transition:transform 5s cubic-bezier(.12,.72,.08,1)}
.wheel-label{position:absolute;left:50%;top:50%;width:50%;height:0;transform-origin:0 0;display:flex;align-items:center;justify-content:flex-end;padding-right:12%;font-weight:800;font-size:.78rem;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35);pointer-events:none}
.wheel-pin{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:5;width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:26px solid #0F1B3D;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.wheel-hub{position:absolute;left:50%;top:50%;width:64px;height:64px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;border:4px solid var(--lav);display:flex;align-items:center;justify-content:center;color:var(--purple);font-weight:800;z-index:4;box-shadow:0 4px 14px rgba(0,0,0,.15)}

/* Win animation */
.pop{animation:pop .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.confetti{position:fixed;top:-12px;width:9px;height:14px;z-index:80;opacity:.9;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.9}}

/* Streak / calendar day */
.day-tile{border:1.5px solid var(--lav);border-radius:16px;background:#fff;text-align:center;padding:.7rem .3rem}
.day-done{background:linear-gradient(135deg,#d1fae5,#ecfdf5);border-color:#6ee7b7}
.day-now{border-color:var(--purple);box-shadow:0 0 0 4px rgba(121,82,232,.15);background:#faf8ff}

/* Accordion */
details.faq>summary{list-style:none;cursor:pointer}
details.faq>summary::-webkit-details-marker{display:none}
details.faq[open] .faq-chevron{transform:rotate(180deg)}

/* Pulse used for unread dot / live items */
.pulse-dot{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(244,63,94,.5)}70%{box-shadow:0 0 0 8px rgba(244,63,94,0)}100%{box-shadow:0 0 0 0 rgba(244,63,94,0)}}

/* Admin extras */
.stat-icon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1rem}
@media print{body{background:#fff}.no-print{display:none!important}}