:root{
  --red:#e21a1a;
  --soft:#f3f5f8;
  --card:#ffffff;
  --muted:#9aa3ad;
  font-family: 'Montserrat', sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(180deg,#f6f7f9 0%, #eaeef3 100%);color:#222}
.container{max-width:420px;margin:18px auto;padding:12px}

/* header */
.topbar{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;font-size:20px}
.sub{color:var(--muted);font-size:12px}

/* hero */
.hero{background:var(--red);border-radius:18px;padding:14px;margin-top:12px;color:#fff}
.hero img{width:100%;height:220px;object-fit:cover;margin-bottom:-40px;border-radius:12px;border:5px solid rgba(255,255,255,0.12)}
.hero .title{margin-top:10px;font-weight:700}

/* voucher box */
.voucher-card{background:var(--card);border-radius:28px;padding:18px;margin-top:30px;box-shadow:0 6px 20px rgba(15,23,42,0.06)}
.voucher-input{display:flex;gap:10px}
.voucher-input input{flex:1;padding:14px 16px;border-radius:30px;border:1px solid #eee;font-size:15px}
.voucher-input button{background:var(--red);color:#fff;border:none;padding:12px 18px;border-radius:24px;font-weight:600;transition:0.3s}
.voucher-input button:hover{background:#cc0000;transform:scale(1.05)}

/* grid buttons */

.login-box{
      margin-top:15px;
      background:#fff;
      padding:12px;
      border-radius:10px;
      display:none;
    }
    .login-box input{
      width:100%;
      padding:10px;
      border-radius:6px;
      border:1px solid #ccc;
      margin-top:8px;
    }
    .login-btn{
      width:100%;
      padding:11px;
      margin-top:10px;
      background:#d33;
      color:#fff;
      font-weight:700;
      border:none;
      border-radius:6px;
    }
    .panel {
      padding: 12px;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
      display: none;
      background:#fff;
      border-radius:10px;
      margin-top:12px;
    }
    .table {
      width: 100%;
      border-collapse: collapse;
    }
    .table td, .table th {
      padding:5px;
      border:1px solid #111;
      color:#111;
      text-align:center;
    }
    .table a{
      color:white;
      text-decoration:none;
      background:#d33;
      padding:4px 8px;
      border-radius:4px;
    }
.grid { 
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  gap:14px; 
  margin-top:18px; 
}

.tile{
  background:var(--card);
  padding:10px;
  border-radius:16px;
  text-align:center;
  box-shadow:0 6px 18px rgba(16,24,40,0.04);
  transition:0.3s ease;
  cursor:pointer;
}

.tile:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 12px 22px rgba(0,0,0,0.15);
}

.tile .ico{font-size:22px;margin-bottom:8px;display:block}
.tile span{display:block;font-size:13px;color:#444}

/* follow card */
.follow{background:var(--card);border-radius:18px;padding:14px;margin-top:16px;text-align:center}
.socials{display:flex;justify-content:center;gap:14px;margin-top:8px}
.socials a{
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;color:#fff;font-weight:700;
  transition:0.3s;
}
.socials a:hover{transform:scale(1.15)}

.fb{background:#3b5998}.tw{background:#1da1f2}.wa{background:#25d366}.gg{background:#db4437}

/* bottom nav */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.95),#fff);
  box-shadow:0 -6px 20px rgba(15,23,42,0.06);
  padding:8px 0
}
.nav-inner{max-width:420px;margin:0 auto;display:flex;justify-content:space-around}
.nav-item{font-size:12px;color:var(--muted);text-align:center;transition:0.3s;cursor:pointer}
.nav-item:hover{transform:scale(1.1)}
.nav-item.active{color:var(--red);font-weight:700}

/* responsive tweak */
@media (max-width:420px){.container{padding:10px}}