/* ============ Kindness Chain Design System (Figma/Canva-level spec) ============
   Palette: Coral #FF6B6B · Deep coral #E8504F · Teal #2EC4B6 · Sunny #FFD166
            Ink #263238 · Soft peach bg #FFF7F0 · Card #FFFFFF · Muted #6B7A80
   Type: Poppins (headings) + Inter (body) · Radius 18px cards, 999px pills
   Motion: 250ms ease lifts, scroll-reveal, floating hearts, confetti, chain pulse */
:root{--coral:#FF6B6B;--coral-d:#E8504F;--teal:#2EC4B6;--sun:#FFD166;--ink:#263238;--muted:#6B7A80;--bg:#FFF7F0;--card:#fff;--grad:linear-gradient(120deg,#FF6B6B,#FF9F45);--shadow:0 10px 30px rgba(232,80,79,.12);--r:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
h1,h2,h3,h4{font-family:Poppins,sans-serif;line-height:1.25;margin:.4em 0}
a{color:var(--coral-d);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}.center{text-align:center}.lead{font-size:1.12rem;color:var(--muted);max-width:680px}
.page-title{font-size:2.1rem;margin-top:34px}.sec-title{font-size:1.45rem;margin:38px 0 16px}
.grow{flex:1}.inline{display:inline}.block{display:block}
/* Nav */
.nav{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50;box-shadow:0 2px 14px rgba(0,0,0,.05)}
.nav-in{display:flex;align-items:center;justify-content:space-between;padding:12px 20px}
.brand{display:flex;align-items:center;gap:9px;font-family:Poppins;font-size:1.25rem;color:var(--ink)}
.brand img{width:38px;height:38px}.brand b{color:var(--coral)}.brand:hover{text-decoration:none}
.nav-links{display:flex;gap:18px;align-items:center}.nav-links a{color:var(--ink);font-weight:500}
.nav-links a.active{color:var(--coral-d);border-bottom:3px solid var(--sun)}
.nav-toggle{display:none;background:none;border:0;font-size:1.4rem;cursor:pointer}
/* Buttons */
.btn{display:inline-block;background:var(--grad);color:#fff;font-weight:600;padding:12px 24px;border-radius:999px;border:0;cursor:pointer;font-size:1rem;transition:transform .25s,box-shadow .25s;box-shadow:var(--shadow)}
.btn:hover{transform:translateY(-2px);text-decoration:none;box-shadow:0 14px 34px rgba(232,80,79,.22)}
.btn-small{padding:8px 16px;font-size:.9rem}.btn.w100{width:100%;text-align:center}
.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);box-shadow:none}
.btn.ghost-dark{background:#fff;color:var(--ink);border:2px solid #E5DCD2;box-shadow:none}
.btn.danger{background:#D64545;box-shadow:none}
/* Hero */
.hero{background:linear-gradient(135deg,#FFEDE8,#FFF7F0 55%,#E8FAF7);position:relative;overflow:hidden;padding:64px 0 54px}
.hearts{position:absolute;inset:0;pointer-events:none}
.heart{position:absolute;bottom:-40px;opacity:.55;animation:floatUp linear infinite}
@keyframes floatUp{to{transform:translateY(-110vh) rotate(24deg)}}
.hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center;position:relative}
.hero-text h1{font-size:3rem;margin:.25em 0}.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pill{background:#fff;border:2px solid var(--sun);padding:5px 14px;border-radius:999px;font-weight:600;font-size:.88rem}
.hero-cta{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.hero-card{background:#fff;border-radius:24px;padding:28px;box-shadow:0 24px 50px rgba(232,80,79,.16)}
.float{animation:floaty 5s ease-in-out infinite}@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.hc-head{font-weight:600;color:var(--teal)}.hc-meta{display:flex;gap:10px;margin:12px 0 18px}
/* Tags, cards */
.tag{background:#E8FAF7;color:#0E7C71;padding:3px 11px;border-radius:999px;font-size:.8rem;font-weight:600}
.points{color:var(--coral-d);font-weight:700}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.card{background:var(--card);border-radius:var(--r);padding:22px;box-shadow:0 4px 18px rgba(38,50,56,.06);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(38,50,56,.12)}
.card.slim{padding:13px 18px;margin-bottom:10px}
.challenge-card{background:linear-gradient(135deg,#fff,#FFF1E6);border:2px solid var(--sun);border-radius:24px;padding:32px;box-shadow:var(--shadow)}
.challenge-card.small{padding:22px}
/* Stats */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin:22px 0}
.stat{background:#fff;border-radius:var(--r);padding:26px;text-align:center;box-shadow:0 4px 18px rgba(38,50,56,.06)}
.stat .num{font-family:Poppins;font-size:2.3rem;font-weight:800;color:var(--coral-d)}
.stat.accent{background:var(--grad)}.stat.accent .num,.stat.accent .lbl{color:#fff}
.stat .lbl{color:var(--muted);font-weight:600}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.step{background:#fff;border-radius:var(--r);padding:26px;text-align:center;box-shadow:0 4px 18px rgba(38,50,56,.06);transition:transform .25s}.step:hover{transform:translateY(-5px)}
.step-ic{font-size:2.2rem}
/* Posts */
.post-card p{margin:.5em 0}.post-head{display:flex;gap:11px;align-items:center}
.post-head small{display:block;color:var(--muted)}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-family:Poppins;font-weight:700;flex:none}
.avatar.big{width:58px;height:58px;font-size:1.3rem}.avatar.huge{width:88px;height:88px;font-size:2rem}
.post-photo{width:100%;border-radius:12px;margin:10px 0;max-height:300px;object-fit:cover}
.post-actions{display:flex;gap:14px;align-items:flex-start;margin-top:10px}
.like-btn{background:#FFF1E6;border:2px solid var(--sun);border-radius:999px;padding:6px 15px;cursor:pointer;font-weight:600;transition:transform .2s}
.like-btn:hover{transform:scale(1.06)}.like-btn.liked{background:var(--sun)}
.report-box summary{cursor:pointer;color:var(--muted);font-size:.85rem}
.report-box form{display:flex;gap:6px;margin-top:6px}.report-box input{padding:6px;border:1px solid #ddd;border-radius:8px}
.searchbar{display:flex;gap:10px;margin:18px 0 24px;flex-wrap:wrap}
.searchbar input{flex:1;min-width:220px;padding:11px 16px;border:2px solid #EFE3D8;border-radius:999px;font-size:1rem}
/* Leaderboard */
.tabs{display:flex;gap:8px;margin:18px 0}.tabs a{padding:8px 20px;border-radius:999px;background:#fff;border:2px solid #EFE3D8;color:var(--ink);font-weight:600}
.tabs a.active{background:var(--grad);color:#fff;border-color:transparent}.tabs a:hover{text-decoration:none}
.leader-list{display:flex;flex-direction:column;gap:10px;max-width:760px}
.leader-row{display:flex;gap:14px;align-items:center;background:#fff;border-radius:14px;padding:13px 18px;box-shadow:0 3px 12px rgba(0,0,0,.05)}
.leader-row .rank{font-size:1.25rem;width:34px;text-align:center}.leader-row .pts{color:var(--coral-d);font-size:1.1rem}
.leader-row.podium{border:2px solid var(--sun)}.leader-row.p1{background:linear-gradient(120deg,#FFF8E1,#fff)}
.mini-leaders{background:#fff;border-radius:var(--r);padding:22px;margin:28px 0;max-width:520px;box-shadow:0 4px 18px rgba(0,0,0,.05)}
.ml-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed #eee}.ml-row:last-child{border:0}
/* Badges */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.badge{background:#fff;border-radius:var(--r);padding:18px;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.badge-ic{font-size:2rem}.badge small{display:block;color:var(--muted)}
.badge.locked{opacity:.45;filter:grayscale(1)}
.badge-pop{animation:badgePop .7s cubic-bezier(.2,2.2,.4,1)}@keyframes badgePop{0%{transform:scale(.4)}100%{transform:scale(1)}}
/* Progress */
.progress-card{background:#fff;border-radius:var(--r);padding:20px 24px;box-shadow:0 4px 18px rgba(0,0,0,.05);margin-bottom:8px}
.progress{background:#F3E9DF;border-radius:999px;height:14px;margin-top:10px;overflow:hidden}
.progress .bar{background:var(--grad);height:100%;border-radius:999px;animation:barGrow 1.4s ease}@keyframes barGrow{from{width:0}}
/* Relay */
.relay-demo{display:flex;align-items:center;justify-content:center;gap:0;margin:30px 0;flex-wrap:wrap}
.rnode{background:#fff;border:3px solid var(--sun);border-radius:50%;width:96px;height:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.7rem;box-shadow:var(--shadow);z-index:1}
.rnode small{font-size:.68rem;font-weight:600}
.rlink{width:64px;height:5px;background:repeating-linear-gradient(90deg,var(--teal) 0 10px,transparent 10px 18px);animation:chainDash 1.2s linear infinite}
@keyframes chainDash{to{background-position:18px 0}}
.rnode.pulse{animation:nodePulse 1.8s ease infinite}@keyframes nodePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,107,.45)}50%{box-shadow:0 0 0 16px rgba(255,107,107,0)}}
.chain-count{font-weight:700;color:var(--teal);margin:8px 0}
.chain-view{max-width:720px;margin:26px auto}
.chain-node{display:flex;gap:16px;background:#fff;border-radius:var(--r);padding:20px;box-shadow:0 4px 16px rgba(0,0,0,.06);animation:nodeIn .7s both}
@keyframes nodeIn{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.chain-link-anim{width:5px;height:38px;margin:0 auto;background:var(--teal);border-radius:3px;animation:linkGrow .6s both;transform-origin:top}
@keyframes linkGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
/* Forms */
.narrow{max-width:560px}.form-card{background:#fff;border-radius:24px;padding:32px;box-shadow:0 14px 40px rgba(38,50,56,.09);margin:28px 0}
.form-card label,.challenge-card label{display:block;font-weight:600;margin:14px 0 4px}
input,textarea,select{width:100%;padding:12px 15px;border:2px solid #EFE3D8;border-radius:12px;font:inherit;background:#FFFDFB;transition:border-color .2s}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--teal)}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.demo-box{background:#E8FAF7;border-radius:12px;padding:13px 16px;margin:18px 0;font-size:.92rem}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}.chip{background:#FFF1E6;border:2px solid var(--sun);padding:4px 13px;border-radius:999px;font-weight:600;font-size:.88rem}
/* Alerts, tables, admin */
.alert{border-radius:14px;padding:15px 20px;margin:20px 0;font-weight:500}
.alert.ok{background:#E8FAF7;border:2px solid var(--teal)}.alert.err{background:#FDECEC;border:2px solid var(--coral)}
.admin-nav{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 24px}
.table-wrap{overflow-x:auto;background:#fff;border-radius:var(--r);box-shadow:0 4px 18px rgba(0,0,0,.05);margin-bottom:36px}
table{width:100%;border-collapse:collapse}th,td{padding:12px 14px;text-align:left;border-bottom:1px solid #F3E9DF;vertical-align:top}
th{font-family:Poppins;background:#FFF7F0}.actions{display:flex;gap:7px;flex-wrap:wrap}
.status.s-approved{color:#0E7C71;font-weight:700}.status.s-pending{color:#B8860B;font-weight:700}.status.s-hidden{color:#B33;font-weight:700}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:start}
.profile-head{display:flex;gap:22px;align-items:center;margin-top:30px;flex-wrap:wrap}
.pos{color:var(--teal)}
/* Footer */
.footer{background:#263238;color:#D7DEE2;margin-top:70px;padding:46px 0 0}
.foot-in{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;padding-bottom:30px}
.footer a{display:block;color:#D7DEE2;margin:5px 0}.footer h4{color:#fff}
.brand.light{color:#fff}.foot-base{border-top:1px solid #3A474D;text-align:center;padding:16px;font-size:.87rem;color:#93A1A8}
/* Reveal + confetti */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:999}
@media(max-width:860px){.hero-in,.two-col,.foot-in{grid-template-columns:1fr}.hero-text h1{font-size:2.2rem}
.nav-links{display:none;position:absolute;top:62px;right:12px;background:#fff;flex-direction:column;padding:18px;border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.15);align-items:flex-start}
.nav-links.open{display:flex}.nav-toggle{display:block}.rlink{width:30px}}