/* Simple functional styling for ClikLife MVP - responsive */
:root{
  --bg:#FFFFFF;
  --accent:#FF4C4C;
  --muted:#F5F5F5;
  --text:#222;
}
*{box-sizing:border-box;}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; background:var(--bg); color:var(--text); margin:0; padding:0;}
.header{background:#4C4CFF;color:#fff;padding:12px 16px;text-align:center; display:flex; justify-content:space-between; align-items:center;}
.header h1{margin:0; font-size:18px;}
.topnav a{color:#fff; text-decoration:none; margin-left:8px; font-size:13px;}
.container{padding:18px; max-width:720px; margin:18px auto;}
.counter{margin-bottom:12px;font-weight:600;}
.button-wrap{text-align:center;margin:18px 0;}
.clik-btn{background:var(--accent); color:#fff; border:none; padding:28px 44px; border-radius:999px; font-size:22px; cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,0.12); width:70%; max-width:320px;}
.challenge-area{background:var(--muted); padding:12px; border-radius:8px; margin-top:12px;}
.challenge-text{font-size:16px; margin-bottom:8px;}
.challenge-actions{display:flex; gap:8px; flex-wrap:wrap;}
.action-btn{flex:1; padding:10px; border-radius:6px; border:none; cursor:pointer; background:#fff;}
.upload-form{margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.upload-form input[type=file]{flex:1;}
.badges{margin-top:16px;}
.badges-list{display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding-top:8px;}
.footer{position:fixed; bottom:0; left:0; right:0; text-align:center; padding:10px; background:#4C4CFF; color:#fff;}

/* mobile tweaks */
@media (max-width:480px){
  .clik-btn{padding:22px 28px; font-size:18px; width:84%; max-width:none;}
  .header{padding:10px;}
  .container{padding:12px;}
  .topnav{font-size:12px;}
  .action-btn{padding:8px; font-size:14px;}
}
.auth-box{max-width:420px; margin:32px auto; padding:12px; background:#fff; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.06);}
.err{color:#a00; margin-bottom:8px;}
.upload-item{margin-bottom:6px;}