@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root {
  --red: #E8000F;
  --gold: #F5A623;
  --green: #00C875;
  --purple: #7C5CFC;
  --bg: #F7F6F2;
  --text: #0F0E0D;
  --muted: #9B9591;
  --border: #ECEAE4;
  --r: 20px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: 'Ubuntu', sans-serif; background: var(--bg); color: var(--text); overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; color: inherit; }
input, textarea, select { font-size: 16px; font-family: inherit; outline: none; }
img { max-width: 100%; display: block; }
::-webkit-scrollbar { height: 3px; width: 3px; }
::-webkit-scrollbar-thumb { background: #D5D2CC; border-radius: 4px; }


.bar { background: linear-gradient(90deg,#E8000F,#FF1A1A,#E8000F); background-size: 200%; animation: shimmer 3s linear infinite; color: #fff; text-align: center; padding: 10px 20px; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; position: relative; }
@keyframes shimmer { 0%{background-position:0%} 100%{background-position:200%} }
.bar-pill { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.3); color: #fff; font-weight: 800; padding: 2px 10px; border-radius: 20px; font-size: 11px; letter-spacing: 0.4px; }
.bar-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.7); font-size: 18px; line-height: 1; padding: 2px 6px; }


nav { background: rgba(255,255,255,0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 600; }
.nav-i { max-width: 1240px; margin: 0 auto; padding: 0 28px; height: 64px; display: flex; align-items: center; gap: 16px; }
.logo { font-size: 27px; font-weight: 700; letter-spacing: -0.1px; flex-shrink: 0; display: flex; align-items: baseline; line-height: 1; cursor: pointer; }
.logo-nom { font-weight: 900; color: var(--red); }
.logo-sy { font-weight: 300; }
.logo-dot { color: var(--red); }
.nav-srch { flex: 1; max-width: 420px; position: relative; }
.nav-srch input { width: 100%; height: 42px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 12px; padding: 0 46px 0 16px; font-size: 13.5px; color: var(--text); transition: all 0.2s; }
.nav-srch input:focus { border-color: var(--red); background: #fff; box-shadow: 0 0 0 4px rgba(232,0,15,0.07); }
.nav-srch input::placeholder { color: #C4BFB9; }
.nav-sb { background: var(--red); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.15s; flex-shrink: 0; border: none; cursor: pointer; }
.nav-sb:hover { background: #d42e10; }
.nav-act { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sv-btn { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 12px; border: 1.5px solid var(--border); background: #fff; transition: all 0.15s; position: relative; }
.sv-btn:hover { border-color: var(--red); color: var(--red); }
.nb-log { font-size: 13px; font-weight: 700; padding: 8px 18px; border-radius: 12px; border: 1.5px solid var(--border); background: #fff; transition: all 0.15s; }
.nb-log:hover { border-color: #888; }
.nb-lst { font-size: 13px; font-weight: 800; padding: 9px 20px; border-radius: 12px; background: var(--text); color: #fff; transition: all 0.2s; }
.nb-lst:hover { background: #333; }
.nav-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--red); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid rgba(232,0,15,0.2); }


.subnav { background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.05); position: sticky; top: 64px; z-index: 500; }
.subnav-i { max-width: 1240px; margin: 0 auto; padding: 0 28px; display: flex; height: 38px; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.subnav-i::-webkit-scrollbar { display: none; }
.sn { font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 0 14px; height: 100%; display: flex; align-items: center; border-bottom: 2px solid transparent; transition: all 0.15s; cursor: pointer; white-space: nowrap; }
.sn:hover, .sn.on { color: var(--red); border-color: var(--red); }


.hero { position: relative; overflow: hidden; padding: 68px 28px 76px; background: #080502; }
.hero-bg { position: absolute; inset: 0; background: #080502; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.b1 { width: 600px; height: 600px; background: rgba(232,0,15,0.3); top: -150px; left: -120px; animation: bm 9s ease-in-out infinite; }
.b2 { width: 450px; height: 450px; background: rgba(220,0,10,0.18); bottom: -80px; right: 150px; animation: bm 11s ease-in-out infinite 1s; }
.b3 { width: 320px; height: 320px; background: rgba(245,166,35,0.12); top: 40%; right: -60px; animation: bm 13s ease-in-out infinite 2s reverse; }
@keyframes bm { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(35px,-25px) scale(1.08);} }
.hero-i { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 360px; gap: 52px; align-items: center; position: relative; z-index: 1; }
.h-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.13); color: #fff; font-size: 11.5px; font-weight: 700; padding: 6px 14px; border-radius: 30px; margin-bottom: 22px; letter-spacing: 0.3px; }
.ldot { width: 7px; height: 7px; background: var(--green); border-radius: 50%; animation: glow 2s infinite; }
@keyframes glow { 0%,100%{box-shadow:0 0 6px rgba(0,200,117,0.4);} 50%{box-shadow:0 0 16px rgba(0,200,117,0.6),0 0 28px rgba(0,200,117,0.2);} }
.hero h1 { font-size: clamp(32px,5vw,58px); font-weight: 700; line-height: 1.05; letter-spacing: -0.1px; color: #fff; margin-bottom: 18px; }
.h1-acc { background: linear-gradient(135deg,#FF2020,#E8000F); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-sub { font-size: 16px; color: rgba(255,255,255,0.48); line-height: 1.72; margin-bottom: 34px; max-width: 430px; font-weight: 500; }
.h-search { display: flex; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.11); backdrop-filter: blur(14px); border-radius: 16px; overflow: hidden; max-width: 480px; transition: border-color 0.2s; }
.h-search:focus-within { border-color: rgba(232,0,15,0.45); }
.h-search input { flex: 1; padding: 15px 20px; font-size: 14px; color: #fff; background: transparent; }
.h-search input::placeholder { color: rgba(255,255,255,0.3); }
.h-sbtn { background: var(--red); color: #fff; font-size: 13.5px; font-weight: 800; padding: 0 26px; display: flex; align-items: center; gap: 8px; white-space: nowrap; margin: 6px; border-radius: 12px; transition: all 0.15s; }
.h-sbtn:hover { background: #d42e10; }
.h-stats { display: flex; gap: 0; margin-top: 30px; }
.hst { padding-right: 24px; }
.hst:not(:first-child) { padding-left: 24px; border-left: 1px solid rgba(255,255,255,0.1); }
.hst-n { font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.2px; }
.hst-l { font-size: 10.5px; color: rgba(255,255,255,0.36); text-transform: uppercase; letter-spacing: 0.9px; font-weight: 700; margin-top: 2px; }


.page { max-width: 1240px; margin: 0 auto; padding: 40px 28px 100px; }


.sh { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; }
.sh-ey { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 5px; }
.sh-ti { font-size: 26px; font-weight: 700; letter-spacing: -0.2px; }
.sh-su { font-size: 13px; color: var(--muted); margin-top: 4px; font-weight: 500; }
.va-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); padding: 8px 16px; border-radius: 10px; border: 1.5px solid var(--border); background: #fff; transition: all 0.15s; flex-shrink: 0; }
.va-btn:hover { color: var(--red); border-color: rgba(232,0,15,0.3); }


.ftabs { display: grid; grid-template-columns: repeat(7,1fr); gap: 8px; margin-bottom: 24px; }
.ftab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 6px 10px; border-radius: 14px; font-size: 11px; font-weight: 700; background: #fff; border: 1.5px solid var(--border); color: var(--muted); white-space: nowrap; cursor: pointer; transition: background 0.15s,color 0.15s,border-color 0.15s; }
.ftab:hover { border-color: #C0BCB5; color: var(--text); }
.ftab.on { background: var(--red); border-color: var(--red); color: #fff; }
.ftab-n { font-size: 10px; font-weight: 800; background: rgba(0,0,0,0.07); padding: 1px 6px; border-radius: 6px; }
.ftab.on .ftab-n { background: rgba(255,255,255,0.2); }
.ftab-img { width: 36px; height: 36px; object-fit: contain; }


.og { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }


.oc { background: #fff; border-radius: var(--r); overflow: hidden; border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.04),0 4px 14px rgba(0,0,0,0.03); transition: box-shadow 0.2s ease,border-color 0.2s ease; cursor: pointer; display: flex; flex-direction: column; }
@keyframes slideUp { from{opacity:0;} to{opacity:1;} }
.oc:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.1); border-color: transparent; }
.oc-p { height: 215px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 22px 20px; overflow: hidden; }
.oc-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.oc-disc,.oc-hrt,.oc-tmr,.oc-type { z-index: 2; }
.oc-p::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom,transparent 40%,rgba(0,0,0,0.45)); pointer-events: none; }
.oc-em { font-size: 56px; margin-bottom: 10px; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.3)); position: relative; z-index: 1; }
.oc-ti { font-size: 16px; font-weight: 700; text-align: center; line-height: 1.2; position: relative; z-index: 1; }
.oc-ln { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 1; }
.oc-l { font-size: 10px; text-align: center; opacity: 0.52; font-weight: 500; }
.oc-disc { position: absolute; top: 12px; left: 12px; z-index: 3; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 8px; box-shadow: 0 3px 10px rgba(232,0,15,0.35); }
.oc-type { position: absolute; bottom: 12px; left: 12px; z-index: 3; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.oc-hrt { position: absolute; top: 11px; right: 11px; z-index: 3; width: 34px; height: 34px; background: rgba(15,14,13,0.72); backdrop-filter: blur(8px); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.25); transition: background 0.2s; }
.oc-hrt:hover { opacity: 0.85; }
.oc-hrt.sv { background: rgba(232,0,15,0.85); }
.oc-tmr { position: absolute; top: 12px; left: 12px; z-index: 3; font-size: 11px; font-weight: 700; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); color: #fff; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
.oc-tmr.hot { background: var(--red); box-shadow: 0 0 12px rgba(232,0,15,0.4); }
.oc-logo { position: absolute; bottom: 10px; right: 10px; z-index: 4; width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); border: 1.5px solid rgba(255,255,255,0.9); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.oc-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }


.oc-pr { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 12px; background: #fff; border-top: 1px solid rgba(0,0,0,0.06); }
.oc-now { display: flex; align-items: baseline; gap: 2px; }
.oc-cur { font-size: 10px; font-weight: 700; color: var(--red); opacity: 0.7; letter-spacing: 0.3px; text-transform: uppercase; margin-bottom: 1px; align-self: flex-end; padding-bottom: 3px; }
.oc-amt { font-size: 32px; font-weight: 700; color: var(--red); letter-spacing: -0.5px; line-height: 1; }
.oc-rp { text-align: right; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.oc-was { font-size: 11px; color: #C4BFB9; text-decoration: line-through; letter-spacing: 0.1px; }
.oc-sv { font-size: 11px; font-weight: 800; color: var(--green); background: rgba(0,200,117,0.08); padding: 2px 7px; border-radius: 6px; letter-spacing: 0.1px; }


.oc-bd { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.oc-rst { font-size: 10.5px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oc-dl { font-size: 13.5px; font-weight: 700; line-height: 1.4; margin-bottom: 12px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.oc-ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oc-ex { font-size: 11px; color: var(--muted); font-weight: 600; }
.oc-ex.hot { color: var(--red); }
.oc-cta { font-size: 11.5px; font-weight: 800; padding: 8px 14px; border-radius: 10px; background: var(--red); color: #fff; transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; font-family: inherit; }
.oc-cta:hover { background: #d42e10; }


.wb { border-radius: var(--r); padding: 46px 54px; margin-bottom: 48px; display: flex; align-items: center; justify-content: space-between; position: relative; overflow: hidden; cursor: pointer; transition: opacity 0.2s; }
.wb:hover { opacity: 0.97; }
.wb-e { position: absolute; right: 52px; top: 50%; transform: translateY(-50%); font-size: 150px; opacity: 0.09; line-height: 1; filter: blur(1px); pointer-events: none; }
.wb-glow { position: absolute; right: 0; top: 0; bottom: 0; width: 40%; background: radial-gradient(ellipse at right,rgba(255,255,255,0.055) 0%,transparent 70%); pointer-events: none; }
.wb-l { position: relative; z-index: 1; }
.wb-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; opacity: 0.68; }
.wb-ti { font-size: 33px; font-weight: 700; letter-spacing: -1.2px; margin-bottom: 10px; line-height: 1.04; }
.wb-su { font-size: 14px; opacity: 0.58; margin-bottom: 24px; max-width: 420px; line-height: 1.65; font-weight: 500; }
.wb-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; padding: 13px 28px; border-radius: 12px; transition: all 0.2s; font-family: inherit; }
.wb-btn:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.2); }
.wb-r { position: relative; z-index: 1; display: flex; gap: 36px; flex-shrink: 0; }
.wb-sn { text-align: center; }
.wb-sn-n { font-size: 42px; font-weight: 700; letter-spacing: -0.2px; }
.wb-sn-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.9px; opacity: 0.5; margin-top: 3px; font-weight: 700; }


.promo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 48px; }
.promo-card { border-radius: var(--r); padding: 34px 38px; position: relative; overflow: hidden; min-height: 210px; display: flex; flex-direction: column; justify-content: flex-end; cursor: pointer; transition: all 0.22s; }
.promo-card:hover { box-shadow: 0 20px 48px rgba(0,0,0,0.3); }
.pc-emoji { position: absolute; right: -5px; top: 50%; transform: translateY(-55%); font-size: 120px; opacity: 0.17; filter: drop-shadow(0 0 30px rgba(0,0,0,0.4)); pointer-events: none; }
.pc-body { position: relative; z-index: 2; color: #fff; }
.pc-tag { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.9px; margin-bottom: 8px; opacity: 0.8; }
.pc-title { font-size: 25px; font-weight: 700; letter-spacing: -0.1px; line-height: 1.1; margin-bottom: 14px; }
.pc-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; padding: 9px 18px; border-radius: 10px; background: rgba(255,255,255,0.14); border: 1.5px solid rgba(255,255,255,0.28); color: #fff; backdrop-filter: blur(8px); transition: all 0.2s; width: fit-content; font-family: inherit; }
.pc-btn:hover { background: rgba(255,255,255,0.26); }


.rg { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.rc { background: #fff; border-radius: 18px; padding: 22px; border: 1.5px solid var(--border); display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; transition: all 0.22s; gap: 10px; }
.rc:hover { border-color: var(--red); box-shadow: 0 10px 32px rgba(232,0,15,0.1); }
.rc-ico { width: 70px; height: 70px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 38px; }
.rc-n { font-size: 13.5px; font-weight: 800; }
.rc-c { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.rc-r { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: #FFFBEB; color: #B45309; }
.rc-tags { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; }
.rc-t { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }


.lw { text-align: center; padding: 34px 0 8px; }
.lb { display: inline-flex; align-items: center; gap: 8px; padding: 12px 36px; background: #fff; border: 1.5px solid var(--border); border-radius: 50px; font-size: 13.5px; font-weight: 700; transition: all 0.2s; cursor: pointer; font-family: inherit; }
.lb:hover { border-color: var(--red); color: var(--red); box-shadow: 0 4px 18px rgba(0,0,0,0.08); }
.lc { font-size: 12px; color: var(--muted); margin-top: 12px; font-weight: 600; }


footer { background: #0D0C0A; color: #fff; padding: 56px 28px 32px; }
.fi { max-width: 1240px; margin: 0 auto; }
.ft { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.fl { font-size: 28px; font-weight: 700; margin-bottom: 12px; letter-spacing: -0.1px; }
.fl span { color: var(--red); }
.fd { font-size: 13px; color: rgba(255,255,255,0.32); line-height: 1.7; margin-bottom: 20px; font-weight: 500; }
.fso { display: flex; gap: 8px; }
.fs { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; transition: all 0.15s; }
.fs:hover { background: var(--red); }
.fcth { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; color: rgba(255,255,255,0.32); }
.fca { display: block; font-size: 13px; color: rgba(255,255,255,0.42); margin-bottom: 10px; transition: color 0.15s; font-weight: 500; }
.fca:hover { color: #fff; }
.fb { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; font-size: 12px; color: rgba(255,255,255,0.22); font-weight: 500; }


.empty { text-align: center; padding: 64px 20px; border: 2px dashed var(--border); border-radius: 20px; }


.wain-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%) translateY(16px); z-index: 9999; display: flex; align-items: center; gap: 10px; background: #0F0E0D; color: #fff; font-size: 13.5px; font-weight: 600; padding: 13px 20px; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.22); opacity: 0; pointer-events: none; transition: opacity 0.22s,transform 0.22s cubic-bezier(0.34,1.4,0.64,1); max-width: calc(100vw - 40px); white-space: nowrap; }
.wain-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.wain-toast.success { background: #0F7B55; }
.wain-toast.error { background: var(--red); }
.wain-toast.info { background: #1A56DB; }
.wain-toast.warn { background: #B45309; }
@media(min-width:769px){ .wain-toast { bottom: 32px; } }


.modal-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(8,5,2,0.72); backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal { background: #fff; border-radius: 28px; width: 100%; max-width: 460px; box-shadow: 0 32px 80px rgba(0,0,0,0.25); overflow: hidden; transform: translateY(24px) scale(0.97); transition: transform 0.3s cubic-bezier(0.34,1.4,0.64,1); position: relative; max-height: 92vh; overflow-y: auto; }
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.modal-close { position: absolute; top: 20px; right: 20px; z-index: 10; width: 34px; height: 34px; border-radius: 50%; background: #F5F4F0; color: #888; display: flex; align-items: center; justify-content: center; font-size: 16px; border: none; cursor: pointer; transition: all 0.15s; }
.modal-close:hover { background: #ECEAE4; color: var(--text); }
.mf-inp { width: 100%; height: 50px; background: #F8F7F4; border: 1.5px solid #E8E5DF; border-radius: 12px; padding: 0 16px; font-size: 15px; color: var(--text); transition: all 0.18s; font-family: inherit; }
.mf-inp:focus { border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(232,0,15,0.1); }
.mf-inp::placeholder { color: #C8C3BC; }
.modal-submit { width: 100%; padding: 15px; background: var(--red); color: #fff; font-size: 15px; font-weight: 800; border-radius: 12px; border: none; cursor: pointer; font-family: inherit; transition: all 0.18s; letter-spacing: 0.1px; }
.modal-submit:hover { background: #CC000D; box-shadow: 0 6px 20px rgba(232,0,15,0.35); }
.modal-submit:disabled { opacity: 0.45; cursor: not-allowed; }
.otp-box { width: 44px; height: 54px; border: 1.5px solid #E8E5DF; border-radius: 12px; font-size: 22px; font-weight: 800; text-align: center; background: #F8F7F4; color: var(--text); transition: all 0.15s; font-family: inherit; }
.otp-box:focus { border-color: var(--red); background: #fff; box-shadow: 0 0 0 3px rgba(232,0,15,0.1); outline: none; }


.redeem-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: #fff; flex-direction: column; align-items: center; justify-content: center; padding: 32px 24px; }
.redeem-overlay.open { display: flex; }
.redeem-overlay.redeemed { background: linear-gradient(145deg,#0A2010,#0F2818); }
.ro-status { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--red); margin-bottom: 24px; }
.ro-status.ok { color: #00C875; }
.ro-rest { font-size: 13px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; }
.ro-deal { font-size: 24px; font-weight: 800; color: var(--text); text-align: center; letter-spacing: -0.4px; line-height: 1.2; margin-bottom: 20px; }
.ro-price-box { background: var(--bg); border-radius: 18px; padding: 18px 32px; text-align: center; margin-bottom: 28px; border: 1.5px solid var(--border); }
.ro-price-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 6px; }
.ro-price-amt { font-size: 48px; font-weight: 800; color: var(--red); letter-spacing: -2px; line-height: 1; }
.ro-price-cur { font-size: 16px; font-weight: 700; color: var(--red); opacity: 0.6; }
.ro-user { display: flex; align-items: center; gap: 10px; background: #fff; border: 1.5px solid var(--border); border-radius: 14px; padding: 12px 18px; margin-bottom: 28px; width: 100%; }
.ro-user-av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,var(--red),#FF4040); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0; }
.ro-user-name { font-size: 14px; font-weight: 700; color: var(--text); }
.ro-user-label { font-size: 11px; color: var(--muted); }
.ro-mark-btn { width: 100%; padding: 18px; background: linear-gradient(135deg,var(--red),#FF2020); color: #fff; font-size: 17px; font-weight: 800; border-radius: 18px; border: none; cursor: pointer; box-shadow: 0 8px 28px rgba(232,0,15,0.4); transition: all 0.15s; display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; font-family: inherit; }
.ro-cancel { font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; padding: 8px; }


.dp-hero { position: relative; height: 179px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.dp-hero-back { position: absolute; inset: 0; background: linear-gradient(to bottom,rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.7) 100%); z-index: 1; }
.dp-hero-em { font-size: 100px; position: relative; z-index: 2; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4)); }
.dp-hero-disc { position: absolute; top: 20px; left: 68px; z-index: 3; background: var(--red); color: #fff; font-size: 14px; font-weight: 800; padding: 6px 14px; border-radius: 10px; box-shadow: 0 4px 14px rgba(232,0,15,0.4); }
.dp-back-btn { position: absolute; top: 16px; left: 16px; z-index: 10; width: 40px; height: 40px; background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; border: 1px solid rgba(255,255,255,0.3); transition: all 0.15s; cursor: pointer; }
.dp-back-btn:hover { background: rgba(255,255,255,0.3); }
.dp-hrt-btn { position: absolute; top: 16px; right: 16px; z-index: 10; width: 40px; height: 40px; background: rgba(255,255,255,0.18); backdrop-filter: blur(12px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; border: 1px solid rgba(255,255,255,0.3); transition: all 0.15s; cursor: pointer; }
.dp-body { max-width: 720px; margin: 0 auto; padding: 28px 24px 100px; }
.dp-title { font-size: 26px; font-weight: 700; letter-spacing: 0px; line-height: 1.2; margin-bottom: 18px; color: var(--text); }
.dp-rest { font-size: 12px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: 0.7px; }
.dp-type-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px; }
.dp-price-block { background: #fff; border: 1.5px solid rgba(0,0,0,0.07); border-radius: 20px; padding: 16px 18px; display: flex; flex-direction: column; align-items: stretch; margin-bottom: 22px; box-shadow: 0 2px 8px rgba(0,0,0,0.04),0 8px 24px rgba(0,0,0,0.04); position: relative; overflow: hidden; }
.dp-price-block::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,var(--red),#FF6B6B); border-radius: 20px 20px 0 0; }
.dp-price-label { font-size: 9.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 6px; }
.dp-price-now { display: flex; align-items: baseline; gap: 5px; }
.dp-price-cur { font-size: 14px; font-weight: 700; color: var(--red); opacity: 0.65; letter-spacing: 0.5px; padding-bottom: 5px; }
.dp-price-amt { font-size: 36px; font-weight: 700; color: var(--red); letter-spacing: -1px; line-height: 1; }
.dp-price-was { font-size: 11px; font-weight: 600; color: #C4BFB9; letter-spacing: 0.4px; text-transform: uppercase; }
.dp-price-save { font-size: 13px; font-weight: 800; color: var(--green); background: rgba(0,200,117,0.1); border: 1px solid rgba(0,200,117,0.2); padding: 3px 10px; border-radius: 8px; letter-spacing: 0.1px; }
.dp-section-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.4px; color: var(--muted); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.dp-section-title::before { content: ''; display: block; width: 16px; height: 2px; background: linear-gradient(90deg,var(--red),transparent); border-radius: 2px; }
.dp-includes { background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 16px 18px; margin-bottom: 22px; display: flex; flex-direction: column; gap: 10px; }
.dp-inc-item { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.dp-inc-check { width: 22px; height: 22px; background: linear-gradient(135deg,#D4FFE8,#B8FFDA); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.dp-expiry { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 22px; padding: 12px 16px; background: #fff; border: 1.5px solid var(--border); border-radius: 12px; }
.dp-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 24px; }
.dp-act { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 16px 8px 14px; background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 22px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1px; color: #6B6560; cursor: pointer; transition: background 0.15s ease,box-shadow 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.04),0 4px 10px rgba(0,0,0,0.05),0 0 0 1px rgba(255,255,255,0.9) inset,0 1px 0 rgba(255,255,255,1) inset; font-family: inherit; }
.dp-act-ico { width: 48px; height: 48px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.dp-act.chat .dp-act-ico { background: linear-gradient(145deg,#DCFCEE,#A8F0CC); color: #0A7A44; }
.dp-act.drive .dp-act-ico { background: linear-gradient(145deg,#DDEEFF,#B8D4FF); color: #1D4ED8; }
.dp-act.call .dp-act-ico { background: linear-gradient(145deg,#D4FFE8,#9EFACC); color: #059669; }
.dp-act.share .dp-act-ico { background: linear-gradient(145deg,#FFE8E4,#FFCCC4); color: var(--red); }
.dp-grab-wrap { margin-bottom: 24px; }
.dp-grab-btn { width: 100%; padding: 18px 24px; background: linear-gradient(135deg,var(--red),#FF1A1A); color: #fff; font-size: 18px; font-weight: 700; letter-spacing: 0px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.2s; box-shadow: 0 8px 28px rgba(232,0,15,0.35); cursor: pointer; position: relative; overflow: hidden; border: none; font-family: inherit; }
.dp-grab-btn:hover { box-shadow: 0 12px 36px rgba(232,0,15,0.45); }
.dp-grab-btn-sub { font-size: 11.5px; font-weight: 600; opacity: 0.78; margin-top: 2px; }
.dp-grab-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dp-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 700; padding: 12px 16px; background: rgba(247,246,242,0.95); backdrop-filter: blur(16px); border-top: 1px solid rgba(0,0,0,0.07); box-shadow: 0 -4px 24px rgba(0,0,0,0.08); display: none; }
.dp-more-title { font-size: 18px; font-weight: 700; letter-spacing: -0.4px; margin-bottom: 14px; }
.dp-more-scroll { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.dp-more-scroll::-webkit-scrollbar { display: none; }
.dp-mini-card { flex-shrink: 0; width: 180px; background: #fff; border: 1.5px solid var(--border); border-radius: 16px; overflow: hidden; cursor: pointer; transition: all 0.2s; }
.dp-mini-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,0.1); border-color: transparent; }
.dp-mini-poster { height: 110px; display: flex; align-items: center; justify-content: center; font-size: 44px; position: relative; }
.dp-mini-disc { position: absolute; top: 8px; left: 8px; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 6px; }
.dp-mini-body { padding: 10px 12px 12px; }
.dp-mini-rest { font-size: 10px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.dp-mini-deal { font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--text); }
.dp-mini-price { font-size: 18px; font-weight: 700; color: var(--red); margin-top: 5px; letter-spacing: -0.3px; display: flex; align-items: baseline; gap: 2px; }


.ud-header { background: linear-gradient(145deg,#0F0E0D,#1E1714); padding: 32px 20px 80px; position: relative; overflow: hidden; }
.ud-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%,rgba(232,0,15,0.25),transparent 60%); pointer-events: none; }
.ud-back { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.6); font-size: 13px; font-weight: 700; margin-bottom: 24px; cursor: pointer; width: fit-content; transition: color 0.15s; position: relative; z-index: 1; }
.ud-back:hover { color: #fff; }
.ud-profile { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.ud-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg,var(--red),#FF4040); display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: #fff; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255,255,255,0.1),0 8px 24px rgba(232,0,15,0.4); }
.ud-name { font-size: 22px; font-weight: 800; color: #fff; letter-spacing: -0.3px; margin-bottom: 3px; }
.ud-email { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 500; }
.ud-edit-btn { margin-left: auto; flex-shrink: 0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 10px; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.ud-stats { display: grid; grid-template-columns: repeat(3,1fr); background: #fff; margin: 0 16px; border-radius: 20px; margin-top: -44px; position: relative; z-index: 10; box-shadow: 0 4px 20px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.06); overflow: hidden; }
.ud-stat { padding: 16px 12px; text-align: center; border-right: 1px solid var(--border); }
.ud-stat:last-child { border-right: none; }
.ud-stat-n { font-size: 22px; font-weight: 800; color: var(--red); letter-spacing: -0.5px; line-height: 1; margin-bottom: 4px; }
.ud-stat-l { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
.ud-body { padding: 20px 16px 120px; }
.ud-sec { margin-bottom: 28px; }
.ud-sec-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.ud-sec-title::before { content: ''; display: block; width: 16px; height: 2px; background: linear-gradient(90deg,var(--red),transparent); border-radius: 2px; }
.ud-coupon { background: #fff; border-radius: 18px; border: 1.5px solid var(--border); overflow: hidden; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: all 0.2s; cursor: pointer; }
.ud-coupon-top { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.ud-coupon-ico { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.ud-coupon-info { flex: 1; min-width: 0; }
.ud-coupon-rest { font-size: 11px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
.ud-coupon-title { font-size: 14px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ud-coupon-exp { font-size: 11px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.ud-coupon-price { text-align: right; flex-shrink: 0; }
.ud-coupon-amt { font-size: 22px; font-weight: 800; color: var(--red); line-height: 1; }
.ud-coupon-cur { font-size: 10px; font-weight: 700; color: var(--red); opacity: 0.6; }
.ud-coupon-bar { height: 3px; background: linear-gradient(90deg,var(--red),#FF4040); margin: 0 16px 12px; border-radius: 2px; }
.ud-use-btn { margin: 0 16px 14px; background: linear-gradient(135deg,var(--red),#FF2020); color: #fff; font-size: 13px; font-weight: 800; padding: 11px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all 0.15s; box-shadow: 0 4px 14px rgba(232,0,15,0.3); }
.ud-locked-btn { margin: 0 16px 14px; background: var(--bg); border: 1.5px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 700; padding: 11px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
.ud-coupon-sched { font-size: 11px; color: var(--muted); font-weight: 600; margin-top: 3px; }
.ud-coupon-limit-banner { display: flex; align-items: flex-start; gap: 12px; background: linear-gradient(135deg,#FFF8F0,#FFF3E8); border: 1.5px solid rgba(232,0,15,0.2); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; }
.ud-clb-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.ud-clb-body { flex: 1; }
.ud-clb-title { font-size: 13px; font-weight: 800; color: var(--text); margin-bottom: 3px; }
.ud-clb-sub { font-size: 12px; color: var(--muted); line-height: 1.5; }
.ud-clb-count { flex-shrink: 0; font-size: 13px; font-weight: 800; background: var(--green); color: #fff; border-radius: 20px; padding: 3px 12px; align-self: center; white-space: nowrap; }
.ud-clb-count.full { background: var(--red); }
.ud-clb-count.warn { background: #D97706; }
.ud-history-item { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: #fff; border-radius: 14px; margin-bottom: 8px; border: 1px solid var(--border); }
.ud-hi-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; background: var(--bg); }
.ud-hi-info { flex: 1; min-width: 0; }
.ud-hi-rest { font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 1px; }
.ud-hi-deal { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ud-hi-date { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ud-hi-right { text-align: right; flex-shrink: 0; }
.ud-hi-saved { font-size: 13px; font-weight: 800; color: #00C875; }
.ud-hi-badge { font-size: 9px; font-weight: 800; background: #F0FFF8; color: #00A060; border: 1px solid #B8F0D0; padding: 2px 7px; border-radius: 6px; margin-top: 3px; display: inline-block; }
.ud-saved-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ud-saved-card { background: #fff; border-radius: 16px; border: 1.5px solid var(--border); overflow: hidden; cursor: pointer; transition: all 0.2s; }
.ud-saved-img { height: 80px; display: flex; align-items: center; justify-content: center; font-size: 36px; position: relative; }
.ud-saved-disc { position: absolute; top: 6px; left: 6px; background: var(--red); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 6px; }
.ud-saved-body { padding: 10px 12px 12px; }
.ud-saved-rest { font-size: 10px; font-weight: 800; color: var(--red); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; }
.ud-saved-title { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.3; }
.ud-saved-price { font-size: 16px; font-weight: 800; color: var(--red); margin-top: 4px; }
.ud-settings { background: #fff; border-radius: 18px; border: 1px solid var(--border); overflow: hidden; }
.ud-setting-row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; }
.ud-setting-row:last-child { border-bottom: none; }
.ud-setting-row:hover { background: var(--bg); }
.ud-setting-ico { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.ud-setting-label { font-size: 14px; font-weight: 700; color: var(--text); flex: 1; }
.ud-setting-val { font-size: 12px; color: var(--muted); font-weight: 500; }
.ud-setting-arr { color: var(--muted); font-size: 16px; }
.ud-savings-banner { background: linear-gradient(135deg,#0F0E0D,#1E1714); border-radius: 20px; padding: 20px; display: flex; align-items: center; gap: 16px; margin-bottom: 28px; position: relative; overflow: hidden; }
.ud-savings-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 80% 50%,rgba(232,0,15,0.2),transparent 60%); pointer-events: none; }
.ud-savings-ico { font-size: 36px; position: relative; z-index: 1; }
.ud-savings-info { position: relative; z-index: 1; }
.ud-savings-label { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; }
.ud-savings-amt { font-size: 34px; font-weight: 800; color: #fff; letter-spacing: -1px; line-height: 1; }
.ud-savings-sub { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 3px; }


.bsheet-overlay { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.25s; display: flex; align-items: flex-end; justify-content: center; }
.bsheet-overlay.open { opacity: 1; pointer-events: all; }
.bsheet { background: #fff; border-radius: 24px 24px 0 0; width: 100%; max-width: 480px; transform: translateY(110%); transition: transform 0.32s cubic-bezier(0.34,1.1,0.64,1); }
.bsheet-overlay.open .bsheet { transform: translateY(0); }
.bsheet-handle { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 14px auto 0; }
.bsheet-body { padding: 20px 24px 36px; }
.bsheet-icon { font-size: 44px; text-align: center; margin-bottom: 12px; }
.bsheet-title { font-size: 18px; font-weight: 800; color: var(--text); text-align: center; margin-bottom: 8px; }
.bsheet-sub { font-size: 13.5px; color: var(--muted); text-align: center; line-height: 1.6; margin-bottom: 24px; }
.bsheet-sub strong { color: var(--text); }
.bsheet-btn { display: block; width: 100%; padding: 15px; border-radius: 14px; border: none; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all 0.15s; margin-bottom: 10px; }
.bsheet-btn:last-child { margin-bottom: 0; }
.bsheet-btn.danger { background: var(--red); color: #fff; }
.bsheet-btn.primary { background: var(--text); color: #fff; }
.bsheet-btn.secondary { background: var(--bg); color: var(--text); }


@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.skeleton { background: #E8E5DF; border-radius: 8px; animation: pulse 1.5s ease-in-out infinite; }


.pwa-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; padding: 0; transform: translateY(110%); transition: transform 0.35s ease; }
.pwa-banner.show { transform: translateY(0); }
.pwa-inner { background: #fff; border-radius: 28px 28px 0 0; padding: 10px 20px 32px; max-width: 480px; margin: 0 auto; position: relative; box-shadow: 0 -4px 6px rgba(0,0,0,0.04),0 -12px 32px rgba(0,0,0,0.1); }
.pwa-handle { width: 36px; height: 4px; background: #E5E2DC; border-radius: 4px; margin: 0 auto 20px; }
.pwa-title { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: -0.6px; line-height: 1.15; margin-bottom: 7px; }
.pwa-sub { font-size: 13px; font-weight: 500; color: var(--muted); line-height: 1.55; }
.pwa-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; margin-top: 14px; }
.pwa-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; padding: 5px 12px; border-radius: 20px; letter-spacing: 0.1px; }
.pwa-badge.free { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.pwa-badge.fast { background: #FFF7ED; color: #92400E; border: 1px solid #FDE68A; }
.pwa-badge.noapp { background: #F0F9FF; color: #0C4A6E; border: 1px solid #BAE6FD; }
.pwa-install-btn { width: 100%; padding: 17px 24px; background: linear-gradient(135deg,#E8000F 0%,#FF1F1F 50%,#E8000F 100%); background-size: 200%; color: #fff; font-size: 15px; font-weight: 800; border-radius: 18px; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit; }
.pwa-ios-hint { display: none; font-size: 12px; color: var(--muted); text-align: center; margin-top: 12px; }


.mob-tabbar { display: none; }
@media(max-width:768px) {
  .bar { font-size: 11px; padding: 8px 12px; gap: 6px; }
  .bar-pill { display: none; }
  nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; background: rgba(255,255,255,0.95); }
  .nav-i { padding: 0 16px; height: 56px; gap: 10px; }
  .nav-srch { max-width: none; flex: 1; }
  .nav-srch input { height: 38px; font-size: 13px; border-radius: 10px; padding: 0 40px 0 14px; }
  .nb-log, .nb-lst { display: none; }
  .sv-btn { padding: 8px; border-radius: 10px; }
  .sv-btn span:not([id]) { display: none; }
  .subnav { display: none; }
  .hero { display: none; }
  body { padding-top: 56px; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .page { padding: 20px 14px 8px; }
  .ftabs { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 22px; }
  .ftab { flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 10px 4px 8px; border-radius: 18px; font-size: 10.5px; font-weight: 800; min-height: 100px; box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.05); }
  .ftab.on { background: linear-gradient(155deg,#FF2020 0%,#E8000F 100%); border-color: rgba(232,0,15,0.3); color: #fff; box-shadow: 0 2px 8px rgba(232,0,15,0.3), 0 4px 16px rgba(232,0,15,0.15); }
  .ftab:first-child { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 10px; min-height: 50px; border-radius: 16px; font-size: 14px; font-weight: 800; padding: 13px 20px; }
  .ftab-img { width: 60px; height: 60px; object-fit: contain; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1)); }
  .ftab:first-child .ftab-img { width: 28px; height: 28px; }
  .ftab-label { text-align: center; display: block; width: 100%; line-height: 1.2; position: relative; z-index: 1; }
  .og { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .oc { border-radius: 16px; }
  .oc-p { height: 170px; }
  .promo-row { grid-template-columns: 1fr; gap: 12px; margin-bottom: 28px; }
  .promo-card { min-height: 160px; padding: 24px 22px; }
  .pc-title { font-size: 22px; }
  .sh { margin-bottom: 16px; }
  .sh-ti { font-size: 20px; }
  .wb { padding: 24px 20px; flex-direction: row; align-items: center; margin-bottom: 16px; min-height: 140px; position: relative; }
  .wb-l { width: 56%; max-width: 56%; flex-shrink: 0; z-index: 2; }
  .wb-ti { font-size: 17px; letter-spacing: -0.1px; line-height: 1.2; margin-bottom: 6px; }
  .wb-su { font-size: 11px; margin-bottom: 12px; line-height: 1.35; max-width: 100%; }
  .wb-tag { font-size: 9px; margin-bottom: 5px; }
  .wb-btn { font-size: 11px; padding: 8px 14px; }
  .wb-r { position: absolute; bottom: 16px; right: 16px; gap: 12px; z-index: 2; }
  .wb-sn-n { font-size: 24px; }
  .wb-sn-l { font-size: 8px; }
  .wb-e, .wb-glow { display: none; }
  .promo-row { margin-bottom: 16px; }
  .wb-deco { width: 44%; opacity: 0.75; }
  .rg { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .rc { padding: 16px 12px; border-radius: 14px; gap: 7px; }
  .rc-ico { width: 54px; height: 54px; border-radius: 12px; font-size: 28px; }
  footer { padding: 32px 16px 24px; }
  .ft { grid-template-columns: 1fr 1fr; gap: 28px; }
  .ft>div:first-child { grid-column: 1/-1; }
  .fl { font-size: 22px; }
  .dp-hero { height: 146px; }
  .dp-grab-wrap { display: none; }
  .dp-sticky-cta { display: block; bottom: 70px; }
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal { max-width: 100%; border-radius: 28px 28px 0 0; max-height: 92vh; overflow-y: auto; }
  .mob-tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 800; background: rgba(255,255,255,0.96); backdrop-filter: blur(20px); border-top: 1px solid rgba(0,0,0,0.07); padding: 10px 0 0; padding-bottom: max(env(safe-area-inset-bottom, 16px), 16px); box-shadow: 0 -4px 24px rgba(0,0,0,0.08); }
  .mob-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; font-size: 10px; font-weight: 700; color: var(--muted); cursor: pointer; transition: all 0.15s; text-decoration: none; }
  .mob-tab.active { color: var(--red); }
  .mob-tab svg { width: 22px; height: 22px; }
  .mob-tab.deals-tab { background: var(--red); border-radius: 16px; color: #fff; padding: 6px 10px; margin: -8px 6px 0; box-shadow: 0 4px 16px rgba(232,0,15,0.4); }
  .mob-tab.deals-tab svg { width: 20px; height: 20px; }
  .ud-body { padding: 20px 16px 120px; }
}


.h-ticks{display:flex;flex-direction:column;gap:10px;}
.h-tick{background:rgba(255,255,255,0.055);border:1px solid rgba(255,255,255,0.09);backdrop-filter:blur(16px);border-radius:16px;padding:14px 16px;display:flex;align-items:center;gap:13px;cursor:pointer;transition:all 0.22s;text-decoration:none;}
.h-tick:hover{background:rgba(255,255,255,0.1);}
.ht-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;overflow:hidden;}
.ht-rest{font-size:11px;color:rgba(255,255,255,0.42);font-weight:600;margin-bottom:2px;}
.ht-deal{font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ht-tag{flex-shrink:0;font-size:11px;font-weight:800;padding:4px 10px;border-radius:8px;}
.ht-red{background:rgba(232,0,15,0.2);border:1px solid rgba(232,0,15,0.35);color:#FF6666;}
.ht-grn{background:rgba(0,200,117,0.15);border:1px solid rgba(0,200,117,0.3);color:#3DFFA0;}
.ht-gld{background:rgba(245,166,35,0.15);border:1px solid rgba(245,166,35,0.3);color:#FFCC4A;}


.oc-ft{flex-direction:column;align-items:stretch;gap:8px;}
.oc-cta{width:100%;justify-content:center;border-radius:12px;padding:11px 12px;font-size:13px;}


.cdd-wrap{position:relative;display:inline-block;margin-bottom:18px;}
.cdd-btn{display:flex;align-items:center;gap:7px;padding:7px 13px 7px 11px;border-radius:10px;font-size:12.5px;font-weight:700;background:#fff;border:1.5px solid var(--border);color:var(--text);cursor:pointer;transition:all 0.15s;user-select:none;min-width:160px;width:auto;height:auto;box-sizing:border-box;}
.cdd-btn:hover{border-color:#C0BCB5;}
.cdd-btn.active{border-color:var(--red);box-shadow:0 0 0 3px rgba(232,0,15,0.08);}
.cdd-arrow{margin-left:auto;font-size:10px;opacity:0.5;transition:transform 0.2s;}
.cdd-badge{background:var(--red);color:#fff;font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:6px;}
.cdd-panel{position:absolute;top:calc(100% + 6px);left:0;z-index:900;background:#fff;border:1.5px solid var(--border);border-radius:14px;box-shadow:0 8px 32px rgba(0,0,0,0.13),0 2px 8px rgba(0,0,0,0.07);min-width:220px;overflow:hidden;}
.cdd-search-wrap{padding:10px 10px 8px;border-bottom:1px solid rgba(0,0,0,0.06);}
.cdd-search{width:100%;padding:7px 10px;border-radius:8px;border:1.5px solid var(--border);font-size:12px;font-family:inherit;outline:none;background:#F8F7F5;box-sizing:border-box;}
.cdd-search:focus{border-color:var(--red);}
.cdd-list{max-height:240px;overflow-y:auto;padding:5px 0;}
.cdd-list::-webkit-scrollbar{width:4px;}
.cdd-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12);border-radius:4px;}
.cdd-item{display:flex;align-items:center;gap:9px;padding:8px 13px;font-size:12.5px;cursor:pointer;transition:background 0.1s;color:var(--text);}
.cdd-item:hover{background:#F8F7F5;}
.cdd-item.sel{background:rgba(232,0,15,0.06);color:var(--red);font-weight:700;}
.ci-e{font-size:15px;width:20px;text-align:center;}
.ci-n{flex:1;}
.ci-cnt{font-size:10px;font-weight:700;color:var(--muted);background:rgba(0,0,0,0.06);padding:1px 6px;border-radius:5px;}
.cdd-no-results{padding:14px 13px;font-size:12px;color:var(--muted);text-align:center;}


.h-search{display:flex !important;background:rgba(255,255,255,0.06) !important;border:1.5px solid rgba(255,255,255,0.11) !important;border-radius:16px !important;overflow:hidden !important;max-width:480px !important;backdrop-filter:blur(14px) !important;}
.h-search input{flex:1 !important;padding:15px 20px !important;font-size:14px !important;color:#fff !important;background:transparent !important;border:none !important;box-shadow:none !important;height:auto !important;}
.h-search input::placeholder{color:rgba(255,255,255,0.3) !important;}
.h-sbtn{background:var(--red) !important;color:#fff !important;font-size:13.5px !important;font-weight:800 !important;padding:0 26px !important;margin:6px !important;border-radius:12px !important;display:flex !important;align-items:center !important;gap:8px !important;white-space:nowrap !important;border:none !important;}


.ro-redeemed-badge { display:none; flex-direction:column; align-items:center; justify-content:center; width:100%; padding:40px 20px; text-align:center; }
.ro-redeemed-badge.show { display:flex; }
.ro-check { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,#00C875,#00A060); display:flex; align-items:center; justify-content:center; font-size:36px; font-weight:800; color:#fff; margin-bottom:20px; box-shadow:0 8px 32px rgba(0,200,117,0.4); }
.ro-redeemed-title { font-size:32px; font-weight:800; color:#fff; letter-spacing:-0.5px; margin-bottom:8px; }
.ro-redeemed-sub { font-size:15px; color:rgba(255,255,255,0.6); margin-bottom:12px; }
.ro-redeemed-saved { font-size:18px; font-weight:800; color:#00C875; margin-bottom:32px; }
.ro-done-btn { padding:16px 48px; background:#fff; color:#0F0E0D; border:none; border-radius:14px; font-size:16px; font-weight:800; cursor:pointer; font-family:inherit; }
.deals-section { margin-bottom: 52px; }
@media(max-width:768px) { .deals-section { margin-bottom: 20px; } }
@media(max-width:768px) { footer { display: none; } }
@media(max-width:768px) { .deals-section { margin-bottom: 12px; } .wb:last-child { margin-bottom: 8px; } }


:root { --rest-cols: 2; }
@media(min-width:768px) { :root { --rest-cols: 4; } }


@media(max-width:768px){ .rest-offer-pill-desktop { display:none !important; } }


@media(min-width:768px){ .search-results-grid { grid-template-columns: repeat(2,1fr) !important; } }


@media(min-width:768px){ .search-results-grid { grid-template-columns: repeat(4,1fr) !important; } }


@media(min-width:768px){ .rest-deals-grid { grid-template-columns: repeat(2,1fr) !important; } }


@media(min-width:768px){ .rest-deals-grid { grid-template-columns: repeat(4,1fr) !important; } }


.ad-banner-outer.ad-full { padding:0; }
.ad-banner-outer.ad-full .ad-banner-wrap { max-width:100%;padding:0; }
.ad-banner-outer.ad-full .ad-banner-wrap img,
.ad-banner-outer.ad-full .ad-banner-wrap a img { border-radius:0;max-height:160px; }
@media(max-width:768px){ .ad-banner-outer.ad-full .ad-banner-wrap img,
.ad-banner-outer.ad-full .ad-banner-wrap a img { max-height:100px; } }


#nomsy-popup-overlay { display:none; }
#nomsy-popup-overlay.show { display:flex !important; }


a, button, .oc, .wb, .mob-tab, .oc-cta, .oc-hrt { touch-action: manipulation; }