/* ============================================================
   OfferHub — Mobile App Design System
   Clean light · soft colors · list cards · bottom nav
   ============================================================ */
:root{
  --bg:#f6f7fb; --card:#ffffff; --ink:#0e1424; --text:#1d2536; --soft:#69728a;
  --faint:#a4adc0; --line:#eef1f6; --brand:#5b53f0; --brand2:#8b7bff;
  --mint:#00c48c; --mint-bg:#e6faf3; --amber:#ff7a45; --amber-bg:#fff1ea;
  --blue:#3b82f6; --blue-bg:#eaf2ff; --pink:#ec4899; --pink-bg:#fdeef7;
  --shadow:0 6px 18px rgba(20,28,54,.06); --shadow-lg:0 12px 30px rgba(20,28,54,.10);
  --r:20px; --r-sm:14px; --pill:999px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
body{margin:0;padding:0 0 24px;font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);max-width:440px;margin-inline:auto;position:relative;
  min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5;}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}

/* ===== Top bar ===== */
.topbar{position:sticky;top:0;z-index:40;background:rgba(246,247,251,.9);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:16px 18px 12px;}
.tb-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.25rem;color:var(--ink);letter-spacing:-.02em;}
.brand .mk{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--brand),var(--mint));
  display:grid;place-items:center;color:#fff;font-weight:800;box-shadow:0 4px 12px rgba(91,83,240,.35);}
.brand em{color:var(--brand);font-style:normal;}
.bell{width:42px;height:42px;border-radius:13px;background:var(--card);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--soft);box-shadow:var(--shadow);position:relative;}
.bell::after{content:"";position:absolute;top:11px;right:12px;width:7px;height:7px;border-radius:50%;
  background:var(--amber);border:2px solid var(--card);}
.search{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--pill);padding:0 16px;height:48px;box-shadow:var(--shadow);transition:box-shadow .2s,border-color .2s;}
.search:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(91,83,240,.12);}
.search svg{color:var(--faint);flex:0 0 auto;}
.search input{border:0;outline:0;background:transparent;flex:1;font-family:inherit;font-size:.95rem;color:var(--text);}
.search input::placeholder{color:var(--faint);}

/* ===== Hero ===== */
.hero{margin:6px 18px 0;border-radius:24px;padding:22px 20px;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(130deg,#5b53f0 0%,#7c6bff 55%,#00c48c 130%);box-shadow:0 14px 30px rgba(91,83,240,.32);}
.hero::before{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.14);}
.hero::after{content:"";position:absolute;right:30px;bottom:-50px;width:110px;height:110px;border-radius:50%;background:rgba(255,255,255,.10);}
.hero .tag{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.22);
  padding:5px 12px;border-radius:var(--pill);font-size:.72rem;font-weight:700;margin-bottom:12px;position:relative;}
.hero .tag i{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.4s infinite;}
@keyframes blink{50%{opacity:.35;}}
.hero h1{margin:0 0 6px;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1.15;position:relative;}
.hero p{margin:0;font-size:.86rem;opacity:.92;position:relative;max-width:26ch;}
.hero .stats{display:flex;gap:20px;margin-top:16px;position:relative;}
.hero .stats b{display:block;font-size:1.15rem;font-weight:800;}
.hero .stats span{font-size:.7rem;opacity:.85;}

/* ===== Section head ===== */
.sec{padding:20px 18px 0;}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.sec-head h2{margin:0;font-size:1.12rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);}
.sec-head a,.sec-head .link{font-size:.8rem;font-weight:700;color:var(--brand);background:none;border:0;}

/* ===== Chips ===== */
.chips{display:flex;gap:9px;overflow-x:auto;padding:2px 18px 4px;scrollbar-width:none;-ms-overflow-style:none;}
.chips::-webkit-scrollbar{display:none;}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);
  padding:9px 15px;border-radius:var(--pill);font-size:.83rem;font-weight:700;color:var(--soft);
  box-shadow:var(--shadow);white-space:nowrap;transition:transform .15s;}
.chip:active{transform:scale(.95);}
.chip .dot{width:8px;height:8px;border-radius:50%;}
.chip .n{font-size:.72rem;background:var(--bg);padding:1px 7px;border-radius:var(--pill);color:var(--faint);}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink);}
.chip.on .n{background:rgba(255,255,255,.2);color:#fff;}

/* ===== Featured ===== */
.feat-scroll{display:flex;gap:14px;overflow-x:auto;padding:2px 18px 8px;scrollbar-width:none;-ms-overflow-style:none;}
.feat-scroll::-webkit-scrollbar{display:none;}
.feat{flex:0 0 82%;background:var(--card);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-lg);border:1px solid var(--line);}
.feat-img{height:120px;position:relative;background:linear-gradient(135deg,#eef1f7,#e3e8f2);overflow:hidden;}
.feat-img img{width:100%;height:100%;object-fit:cover;}
.feat-img .badge{position:absolute;top:11px;left:11px;background:rgba(14,20,36,.7);color:#fff;
  backdrop-filter:blur(6px);padding:4px 10px;border-radius:var(--pill);font-size:.66rem;font-weight:800;
  display:inline-flex;align-items:center;gap:5px;letter-spacing:.04em;}
.feat-img .badge i{width:6px;height:6px;border-radius:50%;background:var(--mint);animation:blink 1.4s infinite;}
.feat-img .cat{position:absolute;top:11px;right:11px;padding:4px 10px;border-radius:var(--pill);
  font-size:.66rem;font-weight:800;color:#fff;}
.feat-body{padding:14px;}
.feat-cb{display:inline-block;background:var(--mint-bg);color:var(--mint);font-weight:800;font-size:.95rem;
  padding:4px 11px;border-radius:var(--pill);margin-bottom:9px;}
.feat-body h3{margin:0 0 5px;font-size:1.02rem;font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.feat-body p{margin:0 0 12px;font-size:.82rem;color:var(--soft);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.feat-btn{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--ink);color:#fff;
  height:42px;border-radius:var(--pill);font-weight:700;font-size:.85rem;transition:transform .15s;}
.feat-btn:active{transform:scale(.97);}

/* ===== List cards ===== */
.list{padding:2px 18px 8px;display:flex;flex-direction:column;gap:12px;}
.item{display:flex;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px;box-shadow:var(--shadow);position:relative;transition:transform .15s;}
.item:active{transform:scale(.98);}
.item-thumb{flex:0 0 68px;height:68px;border-radius:13px;overflow:hidden;position:relative;
  background:linear-gradient(135deg,#eef1f7,#e3e8f2);display:grid;place-items:center;}
.item-thumb img{width:100%;height:100%;object-fit:cover;}
.item-thumb .live{position:absolute;top:5px;left:5px;width:9px;height:9px;border-radius:50%;
  background:var(--mint);border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,196,140,.3);z-index:2;}
.item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.item-top{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.item-cb{background:var(--mint-bg);color:var(--mint);font-weight:800;font-size:.82rem;padding:2px 9px;border-radius:var(--pill);}
.item-cat{font-size:.66rem;font-weight:800;padding:2px 8px;border-radius:var(--pill);}
.item-main h3{margin:0;font-size:.95rem;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item-main p{margin:0;font-size:.78rem;color:var(--soft);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}
.item-foot{display:flex;align-items:center;justify-content:space-between;margin-top:1px;gap:8px;}
.item-type{font-size:.68rem;font-weight:700;color:var(--amber);background:var(--amber-bg);padding:2px 8px;border-radius:var(--pill);}
.item-exp{font-size:.68rem;color:var(--faint);white-space:nowrap;}
.item-go{display:flex;align-items:center;justify-content:center;flex:0 0 40px;height:40px;align-self:center;
  border-radius:12px;background:var(--brand);color:#fff;box-shadow:0 4px 10px rgba(91,83,240,.3);}

/* category color helpers */
.c-brand{background:var(--brand);} .cb-brand{background:#eeecfe;color:var(--brand);}
.c-mint{background:var(--mint);}   .cb-mint{background:var(--mint-bg);color:var(--mint);}
.c-blue{background:var(--blue);}   .cb-blue{background:var(--blue-bg);color:var(--blue);}
.c-amber{background:var(--amber);} .cb-amber{background:var(--amber-bg);color:var(--amber);}
.c-pink{background:var(--pink);}   .cb-pink{background:var(--pink-bg);color:var(--pink);}

/* ===== Skeleton ===== */
.sk-item{display:flex;gap:13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;}
.sk-thumb{flex:0 0 68px;height:68px;border-radius:13px;}
.sk-main{flex:1;display:flex;flex-direction:column;gap:9px;justify-content:center;}
.sk-line{height:11px;border-radius:6px;}
.sk-line.w40{width:40%;} .sk-line.w80{width:80%;} .sk-line.w60{width:60%;}
.shimmer{background:linear-gradient(90deg,#eef1f7 25%,#f7f9fc 37%,#eef1f7 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}

/* ===== Load more / states ===== */
.load-wrap{display:flex;justify-content:center;padding:8px 18px 20px;}
.btn-load{background:var(--card);border:1px solid var(--line);color:var(--ink);padding:12px 26px;
  border-radius:var(--pill);font-weight:700;box-shadow:var(--shadow);transition:transform .15s;}
.btn-load:active{transform:scale(.97);}
.btn-load:disabled{opacity:.5;}
.empty{text-align:center;padding:50px 24px;color:var(--faint);}
.empty h3{color:var(--ink);margin:0 0 6px;font-size:1.05rem;}

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s;}
.reveal.in{opacity:1;transform:none;}

/* ===== Bottom nav ===== */
.botnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:440px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);display:flex;justify-content:space-around;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));z-index:50;}
.nav-i{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--faint);
  font-size:.66rem;font-weight:700;flex:1;background:none;border:0;}
.nav-i svg{width:23px;height:23px;}
.nav-i.on{color:var(--brand);}
.nav-fab{margin-top:-24px;width:52px;height:52px;border-radius:18px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));display:grid;place-items:center;color:#fff;
  box-shadow:0 8px 20px rgba(91,83,240,.45);}

/* ===== Offer detail page ===== */
.det-hero{position:relative;height:210px;background:linear-gradient(135deg,#eef1f7,#e3e8f2);overflow:hidden;}
.det-hero img{width:100%;height:100%;object-fit:cover;}
.det-back{position:absolute;top:16px;left:16px;width:42px;height:42px;border-radius:13px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);display:grid;place-items:center;color:var(--ink);box-shadow:var(--shadow);}
.det-share{position:absolute;top:16px;right:16px;width:42px;height:42px;border-radius:13px;
  background:rgba(255,255,255,.9);backdrop-filter:blur(8px);display:grid;place-items:center;color:var(--ink);box-shadow:var(--shadow);}
.det-sheet{background:var(--card);border-radius:26px 26px 0 0;margin-top:-26px;position:relative;
  padding:22px 18px 24px;box-shadow:0 -8px 24px rgba(20,28,54,.06);}
.det-badges{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap;}
.det-cb{background:var(--mint-bg);color:var(--mint);font-weight:800;font-size:1.05rem;padding:5px 14px;border-radius:var(--pill);}
.det-cat{font-size:.7rem;font-weight:800;padding:5px 12px;border-radius:var(--pill);color:#fff;}
.det-live{background:var(--ink);color:#fff;font-size:.66rem;font-weight:800;padding:5px 11px;border-radius:var(--pill);
  display:inline-flex;align-items:center;gap:5px;letter-spacing:.04em;}
.det-live i{width:6px;height:6px;border-radius:50%;background:var(--mint);animation:blink 1.4s infinite;}
.det-sheet h1{margin:0 0 8px;font-size:1.4rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.2;}
.det-desc{color:var(--soft);font-size:.9rem;margin:0 0 18px;line-height:1.55;}
.det-block{margin-top:22px;}
.det-block h2{font-size:1.05rem;font-weight:800;color:var(--ink);margin:0 0 14px;letter-spacing:-.01em;}
.step{display:flex;gap:13px;align-items:flex-start;margin-bottom:13px;}
.step .num{flex:0 0 28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--mint));
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:.8rem;}
.step p{margin:0;padding-top:3px;font-size:.88rem;color:var(--text);}
.det-info{background:var(--bg);border-radius:var(--r-sm);padding:14px 16px;font-size:.86rem;color:var(--soft);line-height:1.6;}
.det-note{background:var(--amber-bg);color:var(--amber);border-radius:var(--r-sm);padding:14px 16px;font-size:.85rem;line-height:1.55;margin-top:12px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%;text-align:left;background:none;border:0;padding:15px 0;font-weight:700;color:var(--ink);
  font-size:.92rem;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.faq-q .ic{transition:transform .2s;color:var(--faint);flex:0 0 auto;}
.faq-q.open .ic{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;color:var(--soft);font-size:.86rem;line-height:1.55;}
.faq-a.open{max-height:400px;padding-bottom:15px;}

/* sticky claim bar */
.claim-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:440px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-top:1px solid var(--line);
  padding:14px 18px calc(14px + env(safe-area-inset-bottom));z-index:60;display:flex;gap:12px;align-items:center;}
.claim-bar .amt{flex:0 0 auto;}
.claim-bar .amt b{display:block;font-size:1.2rem;font-weight:800;color:var(--mint);line-height:1;}
.claim-bar .amt span{font-size:.66rem;color:var(--faint);}
.claim-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;height:52px;border-radius:16px;
  font-weight:800;font-size:1rem;box-shadow:0 8px 20px rgba(91,83,240,.4);border:0;transition:transform .15s;}
.claim-btn:active{transform:scale(.98);}

/* related mini */
.rel-scroll{display:flex;gap:12px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;}
.rel-scroll::-webkit-scrollbar{display:none;}
.rel{flex:0 0 150px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;box-shadow:var(--shadow);}
.rel .rcb{display:inline-block;background:var(--mint-bg);color:var(--mint);font-weight:800;font-size:.78rem;padding:2px 9px;border-radius:var(--pill);margin-bottom:7px;}
.rel h4{margin:0;font-size:.85rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* breadcrumb / detail scroll padding */
.det-wrap{padding-bottom:90px;}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}