/* =====================================================================
   DEAR LOTTERY SAMBAD — V2 DESIGN (mockup match)
   Mobile-first · fluid on every phone width · desktop layout ≥1024px
   Loaded AFTER style.css — only affects pages with <body class="v2">
   ===================================================================== */

body.v2 {
  --v2-bg: linear-gradient(180deg, #fbeefa 0%, #f6efff 38%, #f7f5fc 100%);
  --v2-text: #1d1a3d;
  --v2-navy: #24305e;
  --v2-muted: #6e6c8a;
  --v2-card: #ffffff;
  --v2-line: #f1e8f4;
  --v2-pill: #e9e7fb;
  --v2-pink: #f0287a;
  --v2-pink-grad: linear-gradient(90deg, #f0287a 0%, #ff4f8b 100%);
  --v2-purple: #6a1fe0;
  --v2-shadow: 0 6px 18px rgba(92, 40, 140, .08);
  --v2-shadow-sm: 0 3px 10px rgba(92, 40, 140, .07);
  --v2-radius: 18px;
  --v2-gutter: clamp(10px, 3.6vw, 16px);

  background: #f7f3fc var(--v2-bg) no-repeat;
  background-attachment: scroll;
  color: var(--v2-text);
  padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
  overflow-x: hidden;
}
[data-theme="dark"] body.v2 {
  --v2-bg: linear-gradient(180deg, #1c1233 0%, #130f24 40%, #0f0d1c 100%);
  --v2-text: #ece9ff;
  --v2-navy: #d6dcff;
  --v2-muted: #a19dbd;
  --v2-card: #1d1934;
  --v2-line: #2c2647;
  --v2-pill: #2a2452;
  --v2-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  --v2-shadow-sm: 0 3px 10px rgba(0, 0, 0, .3);
  background: #0f0d1c var(--v2-bg) no-repeat;
}
body.v2.v2-lock { overflow: hidden; }
body.v2 svg { display: block; }
body.v2 a:hover { opacity: 1; }
.v2-main { padding: 0; min-height: 40vh; }
.v2-ic-img { width: 100%; height: 100%; object-fit: contain; }

/* ============================ HEADER ============================ */
.v2-top { position: relative; z-index: 50; }
.v2-top-in {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: start;
  padding: calc(10px + env(safe-area-inset-top, 0px)) var(--v2-gutter) 4px;
}
.v2-iconbtn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 12px;
  color: var(--v2-navy);
  -webkit-tap-highlight-color: transparent;
}
.v2-iconbtn svg { width: 28px; height: 28px; }
.v2-iconbtn:active { background: rgba(106, 31, 224, .08); }
.v2-menu-btn { margin-top: 14px; }
.v2-top-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.v2-theme-btn { display: none; }
.v2-bell { position: relative; color: #2f43e0; }
.v2-bell svg { width: 30px; height: 30px; }
.v2-bell-dot {
  position: absolute; top: 6px; right: 7px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #ff2d55; border: 2px solid #fff;
  box-shadow: 0 0 0 0 rgba(255, 45, 85, .6);
  animation: v2pulse 1.8s infinite;
}
@keyframes v2pulse { 70% { box-shadow: 0 0 0 7px rgba(255, 45, 85, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 45, 85, 0); } }

.v2-logo {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; line-height: 1; min-width: 0;
  text-decoration: none;
}
.v2-logo-dear {
  font-weight: 900;
  font-size: clamp(40px, 13.5vw, 66px);
  letter-spacing: -1px;
  line-height: .95;
  background: linear-gradient(180deg, #7a22ee 0%, #5a10c9 55%, #4a0aa8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #5a10c9;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .7));
}
.v2-logo-ls {
  font-size: clamp(21px, 7vw, 35px);
  font-weight: 800;
  letter-spacing: -.3px;
  margin-top: 2px;
  white-space: nowrap;
}
.v2-logo-ls .lt { color: #ec1655; font-weight: 800; }
.v2-logo-ls .sb { color: #2b45e6; font-weight: 800; }
.v2-logo-tag {
  margin-top: 6px;
  font-size: clamp(10.5px, 3.3vw, 14px);
  font-weight: 500;
  color: var(--v2-text);
  white-space: nowrap;
}
.v2-logo-tag i { font-style: normal; margin: 0 2px; }
[data-theme="dark"] .v2-logo-dear { background: linear-gradient(180deg, #c4a6ff 0%, #9b6bff 100%); -webkit-background-clip: text; background-clip: text; filter: none; }
[data-theme="dark"] .v2-logo-ls .lt { color: #ff5c8d; }
[data-theme="dark"] .v2-logo-ls .sb { color: #7b93ff; }
.v2-desknav { display: none; }

/* bell dropdown */
.v2-bell-panel {
  position: absolute; right: var(--v2-gutter); top: calc(62px + env(safe-area-inset-top, 0px));
  width: min(320px, calc(100vw - 2 * var(--v2-gutter)));
  background: var(--v2-card); border-radius: 16px;
  box-shadow: 0 14px 40px rgba(40, 10, 80, .22);
  overflow: hidden; z-index: 60;
  border: 1px solid var(--v2-line);
}
.v2-bell-panel[hidden] { display: none; }
.bp-head { padding: 12px 16px; font-weight: 700; font-size: 14px; color: #fff; background: var(--v2-pink-grad); }
.bp-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--v2-line); color: var(--v2-text); }
.bp-row:last-child { border-bottom: 0; }
.bp-dot { width: 10px; height: 10px; border-radius: 50%; background: #c7c3d8; flex: 0 0 auto; }
.bp-dot.ok { background: #16c46b; box-shadow: 0 0 0 3px rgba(22, 196, 107, .18); }
.bp-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.bp-txt strong { font-size: 14px; font-weight: 600; }
.bp-txt small { font-size: 12px; color: var(--v2-muted); }
.bp-chev { width: 18px; height: 18px; color: var(--v2-muted); }

/* ============================ DRAWER ============================ */
.v2-drawer-bg { position: fixed; inset: 0; background: rgba(20, 8, 45, .45); z-index: 1000; backdrop-filter: blur(2px); }
.v2-drawer-bg[hidden] { display: none; }
.v2-drawer {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: min(84vw, 320px);
  background: var(--v2-card); color: var(--v2-text);
  z-index: 1001;
  transform: translateX(-105%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column;
  overflow-y: auto;
  box-shadow: 10px 0 40px rgba(30, 10, 70, .25);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.v2-drawer.open { transform: none; }
.v2-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 14px 16px 18px;
  background: linear-gradient(120deg, #2d3fe0 0%, #6a2bea 50%, #d22fb9 100%);
  color: #fff;
}
.dh-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dh-logo { width: 44px; height: 44px; border-radius: 12px; object-fit: contain; background: #fff; padding: 3px; }
.dh-brand strong { display: block; font-size: 14px; font-weight: 800; letter-spacing: .2px; }
.dh-brand small { display: block; font-size: 11px; opacity: .85; }
.dh-close { color: #fff; }
.dh-close svg { width: 22px; height: 22px; }
.v2-drawer-clock { padding: 10px 18px; font-weight: 700; font-size: 15px; color: var(--v2-purple); background: var(--v2-pill); font-variant-numeric: tabular-nums; }
[data-theme="dark"] .v2-drawer-clock { color: #c4a6ff; }
.v2-drawer-nav { display: flex; flex-direction: column; padding: 8px 0; }
.v2-drawer-nav a {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; font-size: 15px; font-weight: 500; color: var(--v2-text);
}
.v2-drawer-nav a svg { width: 20px; height: 20px; color: var(--v2-purple); flex: 0 0 auto; }
[data-theme="dark"] .v2-drawer-nav a svg { color: #a78bfa; }
.v2-drawer-nav a:active { background: var(--v2-pill); }
.v2-drawer-theme {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 14px; padding: 12px; border-radius: 12px;
  background: var(--v2-pill); color: var(--v2-text);
  font-size: 15px; font-weight: 600; text-align: left;
}
.v2-drawer-theme svg { width: 20px; height: 20px; color: var(--v2-purple); }
.dt-label { flex: 1; }
.dt-switch { width: 42px; height: 24px; border-radius: 999px; background: #cfcbe0; position: relative; transition: background .2s; }
.dt-switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
[data-theme="dark"] .dt-switch { background: #7c3aed; }
[data-theme="dark"] .dt-switch span { transform: translateX(18px); }
.v2-drawer-legal { padding: 16px 20px 24px; font-size: 12px; color: var(--v2-muted); }
.v2-drawer-legal a { color: var(--v2-muted); text-decoration: underline; }

/* ============================ LAYOUT ============================ */
.v2-wrap { padding: 0 var(--v2-gutter); max-width: 760px; margin: 0 auto; }
.v2-col-main, .v2-col-side { min-width: 0; }

/* ============================ HERO BANNER ============================ */
.v2-hero {
  position: relative;
  margin: 10px 0 12px;
  border-radius: var(--v2-radius);
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(70, 30, 180, .22);
  transition: height .35s ease;
}
.v2-hero .banner-track { align-items: flex-start; }
.v2-hero .banner-dots { bottom: 7px; left: auto; right: 10px; transform: none; padding: 4px 7px; gap: 4px; background: rgba(20, 10, 50, .35); }
.v2-hero .banner-dots .dot { width: 6px; height: 6px; }
.v2-hero .banner-dots .dot.active { width: 16px; }
.v2-img-slide img { width: 100%; height: auto; display: block; }

.v2-scan-banner {
  position: relative;
  display: flex !important; align-items: center;
  min-height: clamp(112px, 31vw, 200px);
  padding: 12px 0 12px clamp(14px, 4.5vw, 26px);
  background:
    radial-gradient(circle at 85% 20%, rgba(255, 255, 255, .22) 0, rgba(255, 255, 255, 0) 40%),
    linear-gradient(105deg, #2337d8 0%, #4a2ee6 32%, #8a2ee8 62%, #d43bc4 84%, #ff6aa8 100%);
  color: #fff;
  overflow: hidden;
}
.sb-text { position: relative; z-index: 2; flex: 0 0 64%; min-width: 0; }
.sb-text h2 {
  font-size: clamp(14.5px, 4.75vw, 30px);
  font-weight: 700; line-height: 1.22; white-space: nowrap; letter-spacing: -.2px;
  color: #fff; text-shadow: 0 2px 8px rgba(20, 0, 80, .25);
}
.sb-text p { margin-top: clamp(4px, 1.6vw, 10px); font-size: clamp(11.5px, 3.6vw, 18px); font-weight: 500; color: #fff; opacity: .95; }
.sb-text p i { font-style: normal; margin: 0 3px; }
.sb-art { position: absolute; right: -3%; top: 4%; bottom: 4%; width: 42%; display: flex; align-items: center; justify-content: flex-end; z-index: 1; }
.sb-art svg, .sb-art img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; }
.sb-laser { animation: v2laser 2.2s ease-in-out infinite; }
@keyframes v2laser { 0%, 100% { transform: translateY(-14px); } 50% { transform: translateY(18px); } }
.sb-spark { position: absolute; color: #fff; z-index: 2; font-size: 14px; opacity: .9; animation: v2twinkle 2.4s ease-in-out infinite; }
.sb-spark.s1 { left: 58%; top: 14%; }
.sb-spark.s2 { left: 52%; bottom: 14%; color: #ffd34d; animation-delay: 1.2s; }
@keyframes v2twinkle { 50% { opacity: .2; transform: scale(.7); } }

/* ============================ DATE PILL ============================ */
.v2-date-pill {
  display: flex; align-items: center; gap: 10px;
  width: min(100%, 540px);
  margin: 0 auto 12px;
  padding: 9px 14px 9px 18px;
  border-radius: 999px;
  background: var(--v2-pill);
  color: var(--v2-navy);
  box-shadow: inset 0 0 0 1px rgba(106, 31, 224, .06);
}
.dp-cal svg { width: 24px; height: 24px; color: #3a4ab8; }
[data-theme="dark"] .dp-cal svg { color: #a5b4fc; }
.dp-date { flex: 1; min-width: 0; text-align: center; font-weight: 600; font-size: clamp(13.5px, 4.2vw, 18px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-time { font-size: clamp(10.5px, 3vw, 12.5px); font-weight: 700; color: var(--v2-purple); font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-theme="dark"] .dp-time { color: #c4a6ff; }
.dp-time:empty { display: none; }
.dp-chev svg { width: 18px; height: 18px; }

/* ============================ DRAW CARDS ============================ */
.v2-draws {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(6px, 2.2vw, 12px);
  margin-bottom: 14px;
  scroll-margin-top: 12px;
}
.v2-draw {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(10px, 3vw, 16px) clamp(5px, 1.6vw, 10px) clamp(9px, 2.6vw, 14px);
  border-radius: var(--v2-radius);
  color: #fff; text-align: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28), 0 8px 18px var(--dc-shadow, rgba(0,0,0,.15));
}
.v2-draw::before { /* soft top gloss */
  content: ""; position: absolute; inset: 0 0 55% 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.v2-draw-m { background: linear-gradient(165deg, #ff6b93 0%, #f2275f 55%, #d9124a 100%); --dc-shadow: rgba(230, 30, 85, .35); --dc-ink: #e11d55; }
.v2-draw-e { background: linear-gradient(165deg, #ffd23f 0%, #ff9a0d 50%, #ff6a12 100%); --dc-shadow: rgba(255, 120, 10, .35); --dc-ink: #ff6a12; }
.v2-draw-n { background: linear-gradient(165deg, #a45dff 0%, #7a2cf0 50%, #5a14d4 100%); --dc-shadow: rgba(100, 30, 220, .35); --dc-ink: #6a1fe0; }
.vd-art { width: clamp(40px, 13vw, 66px); height: clamp(35px, 11.4vw, 58px); position: relative; z-index: 1; }
.vd-art svg, .vd-art img { width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .18)); }
.vd-time { margin-top: clamp(4px, 1.4vw, 8px); font-size: clamp(16px, 5.5vw, 29px); font-weight: 700; line-height: 1.1; white-space: nowrap; text-shadow: 0 2px 6px rgba(0, 0, 0, .15); position: relative; }
.vd-period { margin-top: 2px; font-size: clamp(10px, 3.2vw, 16px); font-weight: 600; letter-spacing: .4px; opacity: .95; position: relative; }
.vd-btn {
  position: relative; z-index: 1;
  margin-top: clamp(7px, 2.2vw, 12px);
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: clamp(4px, 1.1vw, 6px) clamp(4px, 1.1vw, 6px) clamp(4px, 1.1vw, 6px) clamp(8px, 2.6vw, 14px);
  border: 1.6px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: #fff !important;
  font-size: clamp(10px, 3.2vw, 15.5px); font-weight: 600;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, background .15s;
}
.vd-btn:active { transform: scale(.96); background: rgba(255, 255, 255, .22); }
.vd-chev { width: clamp(17px, 5.4vw, 26px); height: clamp(17px, 5.4vw, 26px); color: var(--dc-ink); flex: 0 0 auto; }
.vd-pending { justify-content: center; gap: 5px; padding-left: clamp(4px, 1.1vw, 6px); border-style: dashed; border-color: rgba(255, 255, 255, .7); background: rgba(0, 0, 0, .08); opacity: .92; }
.vd-pico { width: clamp(13px, 4vw, 18px); height: clamp(13px, 4vw, 18px); }
.vd-pending span { padding: clamp(1px, .5vw, 3px) 0; }

/* ============================ SEARCH ============================ */
.v2-search {
  display: flex; align-items: center; gap: 8px;
  padding: 6px;
  background: var(--v2-card);
  border-radius: 16px;
  box-shadow: var(--v2-shadow), inset 0 0 0 1px var(--v2-line);
  margin-bottom: 14px;
}
.vs-ico { padding-left: 10px; color: var(--v2-navy); }
.vs-ico svg { width: 26px; height: 26px; }
.v2-search input {
  flex: 1; min-width: 0;
  border: 0; outline: 0; background: transparent;
  font: 500 16px/1.2 'Poppins', sans-serif; /* 16px = no iOS zoom */
  color: var(--v2-text);
  padding: 10px 4px;
}
.v2-search input::placeholder { color: #5b6596; opacity: 1; }
[data-theme="dark"] .v2-search input::placeholder { color: #9aa3cf; }
.v2-search button {
  flex: 0 0 auto;
  padding: 11px clamp(18px, 6vw, 32px);
  border-radius: 12px;
  background: linear-gradient(90deg, #f0287a 0%, #ff3d7f 100%);
  color: #fff; font: 600 clamp(15px, 4.4vw, 18px) 'Poppins', sans-serif;
  box-shadow: 0 6px 14px rgba(240, 40, 122, .35);
}
.v2-search button:active { transform: scale(.97); }

/* ============================ TILES ============================ */
.v2-tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 12px);
  margin-bottom: 14px;
}
.v2-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(5px, 1.6vw, 9px);
  padding: clamp(10px, 3vw, 14px) 3px clamp(9px, 2.6vw, 12px);
  background: var(--v2-card);
  border-radius: 14px;
  box-shadow: var(--v2-shadow-sm), inset 0 0 0 1px var(--v2-line);
  color: var(--v2-text);
  text-align: center;
  font-size: clamp(9.5px, 2.85vw, 13.5px); font-weight: 600; line-height: 1.2; letter-spacing: -.1px;
  transition: transform .15s;
}
.v2-tile:active { transform: scale(.95); }
.vt-ic { width: clamp(34px, 11vw, 48px); height: clamp(34px, 11vw, 48px); flex: 0 0 auto; }
.vt-ic svg { width: 100%; height: 100%; }

/* ============================ LATEST RESULTS ============================ */
.v2-latest {
  background: var(--v2-card);
  border-radius: var(--v2-radius);
  overflow: hidden;
  box-shadow: var(--v2-shadow), inset 0 0 0 1px var(--v2-line);
  margin-bottom: 16px;
}
.vl-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  background: linear-gradient(90deg, #ef2a7b 0%, #ff4f8b 100%);
  color: #fff;
}
.vl-title { display: flex; align-items: center; gap: 10px; font-size: clamp(16px, 4.8vw, 20px); font-weight: 600; }
.vl-hic { width: 24px; height: 24px; color: #fff; }
.vl-all { display: inline-flex; align-items: center; gap: 4px; color: #fff !important; font-size: clamp(13px, 3.8vw, 16px); font-weight: 500; }
.vl-all svg { width: 16px; height: 16px; }
.vl-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--v2-line);
  color: var(--v2-text) !important;
}
.vl-row:last-child { border-bottom: 0; }
.vl-row:active { background: var(--v2-pill); }
.vl-ic {
  width: clamp(40px, 12vw, 50px); height: clamp(40px, 12vw, 50px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .14);
}
.vl-ic svg { width: 55%; height: 55%; }
.vl-ic-m { background: linear-gradient(160deg, #ff6b93, #e3175a); }
.vl-ic-e { background: linear-gradient(160deg, #ffc23a, #ff7a12); }
.vl-ic-n { background: linear-gradient(160deg, #a45dff, #5a14d4); }
.vl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vl-txt strong { font-size: clamp(14px, 4.2vw, 17px); font-weight: 700; color: var(--v2-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-txt small { font-size: clamp(11.5px, 3.45vw, 14.5px); color: var(--v2-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vl-chev svg { width: 20px; height: 20px; color: var(--v2-navy); }
.vl-empty { padding: 18px 16px; color: var(--v2-muted); font-size: 14px; text-align: center; }

/* ============================ SECTIONS ============================ */
.v2-sec { margin: 6px 0 16px; }
.v2-sec-head { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 10px; }
.v2-sec-head h2 { display: flex; align-items: center; gap: 8px; font-size: clamp(16px, 4.6vw, 19px); font-weight: 700; color: var(--v2-navy); }
.sh-ic { width: 24px; height: 24px; }
.v2-sec-head a { display: inline-flex; align-items: center; gap: 2px; font-size: 13.5px; font-weight: 600; color: var(--v2-pink); }
.v2-sec-head a svg { width: 15px; height: 15px; }
.v2-card { background: var(--v2-card); border-radius: var(--v2-radius); box-shadow: var(--v2-shadow), inset 0 0 0 1px var(--v2-line); padding: 14px; }

.vlk-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.vlk-num {
  display: flex; align-items: center; justify-content: center;
  padding: 9px 0; border-radius: 12px;
  font-weight: 700; font-size: clamp(14px, 4.2vw, 17px); letter-spacing: .5px;
  color: #5a14d4; background: #f1eaff;
  box-shadow: inset 0 0 0 1.5px #e0d2ff;
  font-variant-numeric: tabular-nums;
}
.vlk-num:nth-child(3n+2) { color: #e11d55; background: #ffecf2; box-shadow: inset 0 0 0 1.5px #ffd0de; }
.vlk-num:nth-child(3n+3) { color: #2b45e6; background: #eaefff; box-shadow: inset 0 0 0 1.5px #d3dcff; }
[data-theme="dark"] .vlk-num { background: #2a2050; box-shadow: inset 0 0 0 1.5px #3d2f72; color: #c4a6ff; }
[data-theme="dark"] .vlk-num:nth-child(3n+2) { background: #3a1830; box-shadow: inset 0 0 0 1.5px #5a2346; color: #ff8fb1; }
[data-theme="dark"] .vlk-num:nth-child(3n+3) { background: #1d2550; box-shadow: inset 0 0 0 1.5px #2e3a78; color: #9db0ff; }
.vlk-note { margin-top: 10px; font-size: 12px; color: var(--v2-muted); text-align: center; }

.v2-learn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v2-learn-card {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  background: var(--v2-card); border-radius: 14px;
  box-shadow: var(--v2-shadow-sm), inset 0 0 0 1px var(--v2-line);
  color: var(--v2-text) !important;
}
.v2-learn-card .vt-ic { width: 38px; height: 38px; }
.v2-learn-card strong { display: block; font-size: 14px; font-weight: 700; color: var(--v2-navy); }
.v2-learn-card small { display: block; font-size: 11.5px; color: var(--v2-muted); line-height: 1.3; }

.v2-official p { font-size: 13.5px; color: var(--v2-muted); margin-bottom: 10px; }
.vo-links { display: grid; gap: 8px; }
.vo-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px; border-radius: 12px;
  background: var(--v2-pill); color: var(--v2-text) !important;
}
.vo-links strong { display: block; font-size: 14px; color: var(--v2-navy); }
.vo-links small { display: block; font-size: 12px; color: var(--v2-muted); }
.vo-links svg { width: 18px; height: 18px; color: var(--v2-purple); flex: 0 0 auto; }

body.v2 .mini-disc { margin: 0 0 10px; }
body.v2 .ad-wrap { margin: 6px 0 16px; border-radius: 14px; }

/* ============================ FOOTER ============================ */
.v2-footer {
  margin-top: 10px;
  padding: 22px var(--v2-gutter) 8px;
  background: var(--v2-card);
  border-top: 1px solid var(--v2-line);
}
.v2-footer-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.vf-about { grid-column: 1 / -1; }
.vf-brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.v2-logo-dear.sm { font-size: 26px; letter-spacing: -.5px; }
.v2-logo-ls.sm { font-size: 15px; margin: 0; }
.vf-about p { font-size: 12.5px; color: var(--v2-muted); line-height: 1.55; }
.vf-col h4 { font-size: 13px; font-weight: 700; color: var(--v2-navy); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .6px; }
.vf-col h4.mt { margin-top: 12px; }
.vf-col a { display: block; padding: 3px 0; font-size: 13px; color: var(--v2-muted); }
.vf-col a:hover { color: var(--v2-pink); }
.v2-footer-disc { max-width: 1200px; margin: 16px auto 0; }
.v2-copy { max-width: 1200px; margin: 6px auto 0; padding: 10px 0 6px; text-align: center; font-size: 12px; color: var(--v2-muted); border-top: 1px solid var(--v2-line); }

.v2-disc-strip {
  padding: 8px var(--v2-gutter);
  background: #fff1f2; color: #9f1239;
  font-size: 11.5px; line-height: 1.45; text-align: center;
  border-top: 1px solid #fecdd3;
}
.v2-disc-strip a { color: #be123c; font-weight: 600; text-decoration: underline; }
[data-theme="dark"] .v2-disc-strip { background: #2a1020; color: #fda4af; border-color: #4c1d2e; }
[data-theme="dark"] .v2-disc-strip a { color: #fb7185; }

/* ============================ BOTTOM NAV ============================ */
.v2-bnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  height: calc(66px + env(safe-area-inset-bottom, 0px));
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  background: var(--v2-card);
  box-shadow: 0 -6px 22px rgba(70, 30, 120, .1);
  border-top: 1px solid var(--v2-line);
}
.v2-bnav > a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; height: 66px;
  color: #3d4a7e; font-size: clamp(11px, 3.4vw, 14px); font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
[data-theme="dark"] .v2-bnav > a { color: #a9b2dc; }
.v2-bnav > a svg { width: 26px; height: 26px; }
.v2-bnav > a.on { color: var(--v2-pink); font-weight: 600; }
.v2-bnav-scan { position: relative; }
.bs-circle {
  position: absolute; left: 50%; bottom: 12px;
  transform: translateX(-50%);
  width: clamp(64px, 19vw, 76px); height: clamp(64px, 19vw, 76px);
  border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: radial-gradient(circle at 35% 30%, #b45cff 0%, #8a2be2 45%, #6a14d0 100%);
  color: #fff; font-size: clamp(12px, 3.6vw, 15px); font-weight: 600;
  border: 4px solid #fff;
  box-shadow: 0 8px 20px rgba(110, 30, 220, .45);
}
[data-theme="dark"] .bs-circle { border-color: #1d1934; }
.bs-circle svg { width: 46%; height: auto; }
.v2-bnav-scan:active .bs-circle { transform: translateX(-50%) scale(.94); }

/* ============================ SMALL PHONES ============================ */
@media (max-width: 359px) {
  .vd-chev { display: none; }
  .vd-btn { justify-content: center; padding-left: 4px; }
  .dp-time { display: none; }
  .v2-tile { font-size: 9.5px; }
  .vlk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v2-learn { grid-template-columns: 1fr; }
  .v2-search input { font-size: 15px; }
  .v2-search button { padding: 11px 14px; }
  .vs-ico { padding-left: 6px; }
}

/* ============================ TABLET ============================ */
@media (min-width: 640px) {
  .v2-logo-dear { font-size: 66px; }
  .v2-logo-ls { font-size: 35px; }
  .v2-logo-tag { font-size: 14px; }
  .v2-scan-banner { min-height: 200px; }
  .sb-text h2 { font-size: 30px; }
  .sb-text p { font-size: 18px; }
  .vd-art { width: 66px; height: 58px; }
  .vd-time { font-size: 29px; }
  .vd-period { font-size: 16px; }
  .vd-btn { font-size: 15.5px; padding: 6px 6px 6px 14px; }
  .vd-chev { width: 26px; height: 26px; }
  .v2-tile { font-size: 13.5px; }
  .vt-ic { width: 48px; height: 48px; }
  .v2-learn { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .v2-learn-card { flex-direction: column; text-align: center; }
  .vo-links { grid-template-columns: 1fr 1fr; }
  .v2-footer-in { grid-template-columns: 2fr 1fr 1fr 1.3fr; }
  .vf-about { grid-column: auto; }
  .vlk-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ============================ DESKTOP ============================ */
@media (min-width: 1024px) {
  body.v2 { padding-bottom: 0; }
  .v2-bnav { display: none; }

  /* sticky glass header, horizontal logo + nav */
  .v2-top {
    position: sticky; top: 0;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(80, 30, 140, .08);
    border-bottom: 1px solid var(--v2-line);
  }
  [data-theme="dark"] .v2-top { background: rgba(22, 18, 42, .85); }
  .v2-top-in {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; gap: 24px;
    padding: 10px 24px;
  }
  .v2-menu-btn { display: none; }
  .v2-logo { flex-direction: row; flex-wrap: wrap; align-items: baseline; width: 250px; flex: 0 0 auto; text-align: left; column-gap: 8px; }
  .v2-logo-dear { font-size: 40px; filter: none; }
  .v2-logo-ls { font-size: 20px; margin: 0; }
  .v2-logo-tag { flex-basis: 100%; font-size: 11px; margin-top: 3px; color: var(--v2-muted); }
  .v2-desknav { display: flex; flex: 1; justify-content: center; gap: 4px; }
  .v2-desknav a {
    padding: 8px 14px; border-radius: 999px;
    font-size: 14px; font-weight: 600; color: var(--v2-navy);
    transition: background .15s, color .15s;
  }
  .v2-desknav a:hover { background: var(--v2-pill); }
  .v2-desknav a.on { background: var(--v2-pink-grad); color: #fff; box-shadow: 0 4px 12px rgba(240, 40, 122, .3); }
  .v2-top-actions { margin: 0; gap: 4px; }
  .v2-theme-btn { display: inline-flex; color: var(--v2-purple); }
  .v2-theme-btn svg { width: 24px; height: 24px; }
  .v2-iconbtn:hover { background: var(--v2-pill); }
  .v2-bell-panel { top: 68px; right: max(24px, calc((100vw - 1200px) / 2 + 24px)); }

  .v2-wrap { max-width: 1200px; padding: 0 24px; }
  .v2-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    margin-top: 22px;
  }
  .v2-hero { margin-top: 0; }
  .v2-scan-banner { min-height: 240px; }
  .sb-text h2 { font-size: 34px; }
  .v2-date-pill { width: 100%; }
  .v2-draws { gap: 16px; }
  .v2-draw { padding: 20px 12px 16px; transition: transform .2s, box-shadow .2s; }
  .v2-draw:hover { transform: translateY(-3px); }
  .vd-art { width: 74px; height: 64px; }
  .vd-time { font-size: 32px; }
  .vd-btn:hover { background: rgba(255, 255, 255, .25); }
  .v2-tile:hover, .v2-learn-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(92, 40, 140, .14), inset 0 0 0 1px var(--v2-line); }
  .v2-tile { transition: transform .15s, box-shadow .15s; }
  .vl-row:hover { background: var(--v2-pill); }
  .v2-search button:hover { filter: brightness(1.05); }
  .v2-sec { margin: 10px 0 24px; }
  .vlk-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .v2-disc-strip { font-size: 12.5px; }
  .v2-footer { padding-top: 32px; }
}
@media (min-width: 1280px) {
  .vlk-grid { grid-template-columns: repeat(15, minmax(0, 1fr)); }
}

/* ============================ LEGACY PAGES IN V2 SHELL ============================ */
.v2-main.v2-legacy { max-width: 760px; margin: 0 auto; padding: 8px 0 14px; }
@media (min-width: 1024px) {
  .v2-main.v2-legacy { max-width: 900px; padding-top: 20px; }
}
/* checker form: let grid cells shrink on narrow phones */
body.v2 .cf-field { min-width: 0; }
body.v2 .cf-field select, body.v2 .cf-field input { width: 100%; min-width: 0; max-width: 100%; }

/* ===== Draw cards v2.1 — deep green / deep orange / deep maroon + high-contrast white buttons ===== */
.v2-draw-m { background: linear-gradient(165deg, #22c55e 0%, #059669 48%, #065f46 100%); --dc-shadow: rgba(5, 120, 80, .38); --dc-ink: #047857; }
.v2-draw-e { background: linear-gradient(165deg, #ffc107 0%, #ff8f00 45%, #e65100 100%); --dc-shadow: rgba(230, 81, 0, .38); --dc-ink: #d84a00; }
.v2-draw-n { background: linear-gradient(165deg, #be123c 0%, #881337 50%, #5b0a22 100%); --dc-shadow: rgba(120, 15, 45, .42); --dc-ink: #881337; }
.v2-draw .vd-btn {
  background: #fff;
  border: 0;
  color: var(--dc-ink) !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
}
.v2-draw .vd-btn:active { background: #f3f4f6; }
.v2-draw .vd-chev circle { fill: var(--dc-ink); }
.v2-draw .vd-chev path { stroke: #fff; }
.v2-draw .vd-pending {
  background: rgba(255, 255, 255, .94);
  border: 0;
  color: var(--dc-ink) !important;
  opacity: 1;
}
@media (min-width: 1024px) {
  .v2-draw .vd-btn:hover { background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .28); }
}
/* matching colors in Latest Results + bell */
.vl-ic-m { background: linear-gradient(160deg, #22c55e, #047857); }
.vl-ic-e { background: linear-gradient(160deg, #ffc107, #e65100); }
.vl-ic-n { background: linear-gradient(160deg, #be123c, #5b0a22); }
.v2-draw a.vd-btn {
  gap: 3px;
  padding: clamp(4px, 1.1vw, 6px) clamp(3px, 1vw, 6px) clamp(4px, 1.1vw, 6px) clamp(7px, 2.2vw, 14px);
  font-size: clamp(9.5px, 3.05vw, 15.5px);
  letter-spacing: -.2px;
}
.v2-draw a.vd-btn .vd-chev { width: clamp(15px, 4.8vw, 26px); height: clamp(15px, 4.8vw, 26px); }

/* ===== Mobile header v2.2 — professional app-style header panel ===== */
@media (max-width: 1023px) {
  .v2-top {
    background:
      radial-gradient(120% 90% at 0% 0%, rgba(240, 40, 122, .14) 0, rgba(240, 40, 122, 0) 55%),
      radial-gradient(120% 90% at 100% 0%, rgba(43, 69, 230, .14) 0, rgba(43, 69, 230, 0) 55%),
      linear-gradient(180deg, #ffffff 0%, #fbf3ff 100%);
    border-radius: 0 0 26px 26px;
    box-shadow: 0 8px 24px rgba(106, 31, 224, .10), inset 0 -1px 0 rgba(106, 31, 224, .06);
    margin-bottom: 4px;
  }
  .v2-top-in {
    grid-template-columns: 42px 1fr 42px;
    align-items: start;
    padding: calc(10px + env(safe-area-inset-top, 0px)) var(--v2-gutter) 14px;
  }
  /* app-style square buttons, aligned to the top */
  .v2-menu-btn, .v2-top-actions { margin-top: 2px; }
  .v2-menu-btn, .v2-bell {
    width: 42px; height: 42px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(106, 31, 224, .14), inset 0 0 0 1px rgba(106, 31, 224, .08);
  }
  .v2-menu-btn svg { width: 24px; height: 24px; }
  .v2-bell svg { width: 23px; height: 23px; }
  .v2-bell-dot { top: 7px; right: 8px; width: 10px; height: 10px; }
  .v2-menu-btn:active, .v2-bell:active { transform: scale(.94); background: #f6f0ff; }
  /* logo polish */
  .v2-logo { padding-top: 2px; }
  .v2-logo-dear { filter: drop-shadow(0 3px 6px rgba(106, 31, 224, .18)); }
  .v2-logo-tag {
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(106, 31, 224, .07);
    box-shadow: inset 0 0 0 1px rgba(106, 31, 224, .10);
    color: #3b2a77;
    font-size: clamp(9.5px, 2.95vw, 13px);
  }
  .v2-logo-tag i { color: #f0287a; font-weight: 700; }
  .v2-bell-panel { top: calc(58px + env(safe-area-inset-top, 0px)); }

  [data-theme="dark"] .v2-top {
    background:
      radial-gradient(120% 90% at 0% 0%, rgba(240, 40, 122, .18) 0, rgba(240, 40, 122, 0) 55%),
      radial-gradient(120% 90% at 100% 0%, rgba(80, 100, 255, .18) 0, rgba(80, 100, 255, 0) 55%),
      linear-gradient(180deg, #221a3d 0%, #1a1430 100%);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  }
  [data-theme="dark"] .v2-menu-btn, [data-theme="dark"] .v2-bell { background: #2a2350; box-shadow: 0 4px 12px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .06); }
  [data-theme="dark"] .v2-bell { color: #8fa2ff; }
  [data-theme="dark"] .v2-logo-tag { background: rgba(255, 255, 255, .06); color: #d9d2ff; }
}

/* ===== Draw cards v2.3 — deep top gradient + white icon badge (icons never blend with card) ===== */
.v2-draw-m { background: linear-gradient(180deg, #053d2e 0%, #047857 46%, #10b981 100%); }
.v2-draw-e { background: linear-gradient(180deg, #9a3412 0%, #ea580c 46%, #f59e0b 100%); }
.v2-draw-n { background: linear-gradient(180deg, #3f0414 0%, #881337 48%, #be123c 100%); }
.v2-draw::before { display: none; }
.v2-draw { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .22), 0 10px 20px var(--dc-shadow, rgba(0,0,0,.18)); }
.v2-draw .vd-art {
  width: clamp(50px, 15.5vw, 78px);
  height: clamp(50px, 15.5vw, 78px);
  padding: clamp(6px, 1.9vw, 10px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #fbf7ff 60%, #efe8f7 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .28), 0 0 0 3px rgba(255, 255, 255, .28);
  display: flex; align-items: center; justify-content: center;
}
.v2-draw .vd-art svg, .v2-draw .vd-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .15)); }
.v2-draw .vd-time { margin-top: clamp(6px, 1.8vw, 10px); }
@media (min-width: 1024px) {
  .v2-draw .vd-art { width: 84px; height: 84px; padding: 11px; }
}
/* tile + learn icons from PNG/WebP art */
.vt-ic img, .v2-learn-card .vt-ic img { width: 100%; height: 100%; object-fit: contain; }

/* ===== Draw cards v2.4 — back to designer SVG art directly on the card (no white badge) ===== */
.v2-draw .vd-art {
  width: clamp(42px, 13.5vw, 68px);
  height: clamp(37px, 11.8vw, 60px);
  padding: 0; border-radius: 0; background: none; box-shadow: none;
}
.v2-draw .vd-art svg { filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .3)); }
.v2-draw .vd-time { margin-top: clamp(4px, 1.4vw, 8px); }
@media (min-width: 1024px) { .v2-draw .vd-art { width: 76px; height: 66px; padding: 0; } }

/* ===== Draw cards v2.5 — whole card is tappable when the result is out (stretched link) ===== */
.v2-draw a.vd-btn { position: static; }
.v2-draw a.vd-btn::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; -webkit-tap-highlight-color: transparent;
}
.v2-draw:has(a.vd-btn) { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.v2-draw:has(a.vd-btn):active { transform: scale(.97); }
.v2-draw:has(a.vd-btn):active a.vd-btn { background: #f3f4f6; }
@media (min-width: 1024px) {
  .v2-draw:has(a.vd-btn):hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3), 0 16px 28px var(--dc-shadow); }
}
/* keep the stretched link stable while pressed: no transform on the link itself */
.v2-draw a.vd-btn, .v2-draw a.vd-btn:active { transform: none !important; }

/* ===== V2 built-in animated promo banners (5 colors) ===== */
.v2-scan-banner.vb-green  { background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.2) 0, rgba(255,255,255,0) 40%), linear-gradient(105deg, #064e3b 0%, #047857 40%, #10b981 75%, #6ee7b7 100%); }
.v2-scan-banner.vb-crimson{ background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.2) 0, rgba(255,255,255,0) 40%), linear-gradient(105deg, #4c0519 0%, #881337 38%, #e11d48 75%, #fb7185 100%); }
.v2-scan-banner.vb-blue   { background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.2) 0, rgba(255,255,255,0) 40%), linear-gradient(105deg, #172554 0%, #1e3a8a 38%, #2563eb 75%, #60a5fa 100%); }
.v2-scan-banner.vb-orange { background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 40%), linear-gradient(105deg, #7c2d12 0%, #c2410c 38%, #f97316 72%, #fbbf24 100%); }
.v2-scan-banner.vb-pink   { background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 40%), linear-gradient(105deg, #831843 0%, #be185d 38%, #f0287a 72%, #f9a8d4 100%); }
.v2-scan-banner p { white-space: nowrap; }

.sb-art svg .vb-float, .sb-art svg .vb-bounce, .sb-art svg .vb-search, .sb-art svg .vb-sway,
.sb-art svg .vb-pulse, .sb-art svg .vb-tw, .sb-art svg .vb-pop, .sb-art svg .vb-type {
  transform-box: fill-box; transform-origin: center;
}
.vb-float { animation: vbFloat 3s ease-in-out infinite; }
.vb-float.f2 { animation-delay: -1s; }
.vb-float.f3 { animation-delay: -2s; }
@keyframes vbFloat { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-6px); } }
.vb-bounce { animation: vbBounce 1.6s ease-in-out infinite; }
@keyframes vbBounce { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }
.vb-search { animation: vbSearch 4s ease-in-out infinite; }
@keyframes vbSearch { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-30px, -18px); } 50% { transform: translate(-52px, 4px); } 75% { transform: translate(-18px, 10px); } }
.vb-sway { animation: vbSway 3.4s ease-in-out infinite; }
@keyframes vbSway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.vb-pulse { animation: vbPulse 1.4s ease-in-out infinite; }
@keyframes vbPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .75; } }
.vb-tw { animation: v2twinkle 2.4s ease-in-out infinite; }
.vb-tw.d2 { animation-delay: -.8s; } .vb-tw.d3 { animation-delay: -1.6s; }
/* typing effect: white cover shrinks to reveal the number, caret travels, then ✓ pops */
.vb-type { transform-origin: right center; animation: vbType 4s steps(9, end) infinite; }
@keyframes vbType { 0%, 8% { transform: scaleX(1); } 50%, 92% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.vb-caret { animation: vbCaret 4s steps(9, end) infinite; }
@keyframes vbCaret { 0%, 8% { transform: translateX(0); } 50%, 92% { transform: translateX(100px); } 100% { transform: translateX(0); } }
.vb-pop { animation: vbPop 4s ease-out infinite; }
@keyframes vbPop { 0%, 52% { transform: scale(0); } 60% { transform: scale(1.2); } 66%, 92% { transform: scale(1); } 100% { transform: scale(0); } }

@media (prefers-reduced-motion: reduce) {
  .vb-float, .vb-bounce, .vb-search, .vb-sway, .vb-pulse, .vb-tw, .vb-type, .vb-caret, .vb-pop, .sb-laser, .sb-spark { animation: none !important; }
  .vb-type { transform: scaleX(0); } .vb-pop { transform: none; }
}
/* banner 5: keep the search-bar art fully inside the card */
.v2-scan-banner.vb-pink .sb-art { right: 2%; width: 43%; }

/* =====================================================================
   V2 INNER PAGES — hero, cards, typography, forms (all pages except home)
   ===================================================================== */
.v2-main.v2-legacy { padding: 4px var(--v2-gutter) 14px; }
body.v2 .v2-legacy .container { padding: 0; }
body.v2 .v2-legacy .section { margin-bottom: 18px; }
body.v2 .v2-legacy .section-head { padding: 0 2px; margin-bottom: 10px; }
body.v2 .v2-legacy .section-head h2 { color: var(--v2-navy); font-size: clamp(16px, 4.6vw, 19px); font-weight: 700; }
body.v2 .v2-legacy .mt-20 { margin-top: 18px; }
.v2-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: var(--v2-pill); color: var(--v2-purple); font-size: 12px; font-weight: 600; white-space: nowrap; }
[data-theme="dark"] .v2-chip { color: #c4a6ff; }

/* ---------- page hero ---------- */
.v2-phero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: clamp(10px, 3.4vw, 16px);
  margin: 10px 0 16px;
  padding: clamp(14px, 4vw, 22px) clamp(14px, 4vw, 24px);
  border-radius: 22px;
  color: #fff;
  box-shadow: 0 10px 26px var(--ph-shadow, rgba(70, 30, 180, .25));
}
.v2-phero.ph-blue    { background: linear-gradient(115deg, #172554 0%, #1e3a8a 35%, #2563eb 75%, #60a5fa 100%); --ph-shadow: rgba(30, 58, 138, .3); }
.v2-phero.ph-pink    { background: linear-gradient(115deg, #831843 0%, #be185d 38%, #f0287a 75%, #f9a8d4 100%); --ph-shadow: rgba(190, 24, 93, .3); }
.v2-phero.ph-purple  { background: linear-gradient(115deg, #2e1065 0%, #5b21b6 38%, #8b5cf6 75%, #d8b4fe 100%); --ph-shadow: rgba(91, 33, 182, .3); }
.v2-phero.ph-orange  { background: linear-gradient(115deg, #7c2d12 0%, #c2410c 38%, #f97316 72%, #fbbf24 100%); --ph-shadow: rgba(194, 65, 12, .3); }
.v2-phero.ph-green   { background: linear-gradient(115deg, #064e3b 0%, #047857 40%, #10b981 75%, #6ee7b7 100%); --ph-shadow: rgba(4, 120, 87, .3); }
.v2-phero.ph-crimson { background: linear-gradient(115deg, #4c0519 0%, #881337 38%, #e11d48 75%, #fb7185 100%); --ph-shadow: rgba(136, 19, 55, .3); }
.v2-phero.ph-navy    { background: linear-gradient(115deg, #0f172a 0%, #1e1b4b 38%, #3730a3 75%, #818cf8 100%); --ph-shadow: rgba(30, 27, 75, .3); }
.ph-deco { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); pointer-events: none; }
.ph-deco.d1 { width: 160px; height: 160px; right: -50px; top: -70px; }
.ph-deco.d2 { width: 90px; height: 90px; right: 70px; bottom: -55px; background: rgba(255, 255, 255, .08); }
.ph-ic {
  position: relative; z-index: 1; flex: 0 0 auto;
  width: clamp(52px, 15vw, 66px); height: clamp(52px, 15vw, 66px);
  padding: clamp(7px, 2vw, 10px);
  border-radius: 18px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.ph-ic svg, .ph-ic img { width: 100%; height: 100%; object-fit: contain; }
.ph-txt { position: relative; z-index: 1; flex: 1; min-width: 0; }
.ph-txt h1 { font-size: clamp(18px, 5.4vw, 27px); font-weight: 700; line-height: 1.2; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.ph-txt p { margin-top: 3px; font-size: clamp(12px, 3.5vw, 15px); color: rgba(255, 255, 255, .92); line-height: 1.4; }
.ph-right { position: relative; z-index: 1; flex: 0 0 auto; }
.ph-count {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 62px; padding: 8px 10px; border-radius: 16px;
  background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
  line-height: 1.1;
}
.ph-count b { font-size: clamp(20px, 6vw, 26px); font-weight: 800; }
.ph-count small { font-size: 11px; opacity: .9; }
.ph-action {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .95); color: #be185d !important;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}
.ph-action svg { width: 24px; height: 24px; }
.ph-action:active { transform: scale(.95); }

/* ---------- content pages (About, FAQ, Guides, News, Legal) ---------- */
body.v2 .content-card {
  background: var(--v2-card);
  border: 0; border-radius: 22px;
  box-shadow: var(--v2-shadow), inset 0 0 0 1px var(--v2-line);
  padding: clamp(18px, 5vw, 30px) clamp(16px, 4.6vw, 32px);
  margin: 0 0 16px;
  color: var(--v2-text);
}
body.v2 .content-card.mt-16 { margin-top: 0; }
body.v2 .content-card .updated {
  display: inline-block; margin-bottom: 16px; padding: 4px 12px; border-radius: 999px;
  background: var(--v2-pill); color: var(--v2-purple); font-size: 12px; font-weight: 600;
}
body.v2 .content-card h1 { color: var(--v2-navy); font-size: clamp(20px, 5.5vw, 26px); }
body.v2 .content-card h2 {
  margin: 26px 0 10px; padding-left: 12px;
  border-left: 4px solid var(--v2-pink);
  color: var(--v2-navy); font-size: clamp(17px, 4.8vw, 21px); font-weight: 700; line-height: 1.35;
}
body.v2 .content-card h3 { margin: 18px 0 6px; color: var(--v2-purple); font-size: clamp(15px, 4.3vw, 17px); font-weight: 700; }
[data-theme="dark"] body.v2 .content-card h3 { color: #c4a6ff; }
body.v2 .content-card p, body.v2 .content-card li { color: var(--v2-text); font-size: clamp(14px, 3.9vw, 15.5px); line-height: 1.75; }
body.v2 .content-card ul, body.v2 .content-card ol { margin: 0 0 14px 20px; }
body.v2 .content-card li { margin-bottom: 6px; }
body.v2 .content-card li::marker { color: var(--v2-pink); }
body.v2 .content-card a { color: var(--v2-pink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
body.v2 .content-card strong { color: var(--v2-navy); }

/* alerts */
body.v2 .alert { border-radius: 16px; padding: 13px 15px; font-size: 14px; line-height: 1.6; border-left-width: 5px; margin-bottom: 14px; }
body.v2 .alert strong { color: inherit; }

/* buttons */
body.v2 .btn { border-radius: 14px; padding: 13px 18px; font-weight: 600; font-size: 15px; justify-content: center; align-items: center; gap: 6px; }
body.v2 .btn-primary { background: linear-gradient(90deg, #f0287a 0%, #ff3d7f 100%); color: #fff; box-shadow: 0 6px 14px rgba(240, 40, 122, .3); }
body.v2 .btn-primary:hover { box-shadow: 0 8px 18px rgba(240, 40, 122, .38); }
body.v2 .btn-outline { background: var(--v2-card); color: var(--v2-purple); border: 2px solid rgba(106, 31, 224, .35); }
body.v2 .btn-outline:hover { background: var(--v2-pill); color: var(--v2-purple); }

/* ---------- Old Results ---------- */
.v2-datefilter { margin-bottom: 16px; }
.vdf-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--v2-navy); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .4px; }
.vdf-label svg { width: 18px; height: 18px; color: #2563eb; }
.vdf-row { display: flex; gap: 8px; }
.vdf-input {
  flex: 1; min-width: 0;
  padding: 12px 12px; border-radius: 14px;
  border: 1.5px solid #dcd3f0; background: var(--v2-pill);
  font: 600 16px 'Poppins', sans-serif; color: var(--v2-text);
}
.vdf-input:focus { outline: 0; border-color: var(--v2-pink); box-shadow: 0 0 0 3px rgba(240, 40, 122, .15); }
.vdf-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 0 18px; border-radius: 14px;
  background: linear-gradient(90deg, #1e3a8a 0%, #2563eb 100%); color: #fff;
  font: 600 15px 'Poppins', sans-serif;
  box-shadow: 0 6px 14px rgba(37, 99, 235, .3);
}
.vdf-btn svg { width: 16px; height: 16px; }
.vdf-clear { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--v2-pink); }

.v2-dates { display: grid; grid-template-columns: 1fr; gap: 10px; }
.v2-date {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 10px;
  background: var(--v2-card); border-radius: 18px;
  box-shadow: var(--v2-shadow-sm), inset 0 0 0 1px var(--v2-line);
  color: var(--v2-text) !important;
  transition: transform .15s, box-shadow .15s;
}
.v2-date:active { transform: scale(.98); }
.v2-date.on { box-shadow: 0 0 0 2px var(--v2-pink), var(--v2-shadow-sm); }
.vdt-badge {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  color: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}
.vdt-badge b { font-size: 21px; font-weight: 800; }
.vdt-badge small { font-size: 10.5px; font-weight: 700; letter-spacing: .8px; margin-top: 2px; opacity: .95; }
.vdt-m { background: linear-gradient(160deg, #10b981, #065f46); }
.vdt-e { background: linear-gradient(160deg, #fbbf24, #c2410c); }
.vdt-n { background: linear-gradient(160deg, #e11d48, #5b0a22); }
.vdt-b { background: linear-gradient(160deg, #60a5fa, #1e3a8a); }
.vdt-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vdt-info strong { font-size: 15.5px; font-weight: 700; color: var(--v2-navy); }
.vdt-info small { font-size: 12.5px; color: var(--v2-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vdt-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #16c46b; margin-left: 2px; }
.vdt-chev svg { width: 20px; height: 20px; color: var(--v2-muted); }

/* ---------- Check Prize (overrides page-level styles) ---------- */
body.v2 .check-form-card { border-radius: 22px; border: 0; box-shadow: var(--v2-shadow), inset 0 0 0 1px var(--v2-line); background: var(--v2-card); }
body.v2 .check-form-card::before { background: linear-gradient(90deg, #f0287a, #8b5cf6); }
body.v2 .cf-head-ico { background: linear-gradient(135deg, #f0287a, #be185d); box-shadow: 0 6px 14px rgba(240, 40, 122, .3); }
body.v2 .cf-head h3 { color: var(--v2-navy); }
body.v2 .cf-field label { color: var(--v2-navy); }
body.v2 .cf-field input, body.v2 .cf-field select { border-radius: 14px; border: 1.5px solid #dcd3f0; background: var(--v2-pill); color: var(--v2-text); font-size: 15px; }
body.v2 .cf-field input:focus, body.v2 .cf-field select:focus { border-color: var(--v2-pink); box-shadow: 0 0 0 3px rgba(240, 40, 122, .15); }
body.v2 .cf-ticket-input { border-style: dashed; border-color: #f0a7c8; background: #fff7fb; }
[data-theme="dark"] body.v2 .cf-ticket-input { background: #2a1f3d; }
body.v2 .cf-preview { border-radius: 16px; }
body.v2 .cf-submit { border-radius: 16px; background: linear-gradient(90deg, #f0287a 0%, #ff3d7f 100%); box-shadow: 0 8px 18px rgba(240, 40, 122, .35); }
body.v2 .check-result-pro { border-radius: 22px; }

/* ---------- Scanner ---------- */
body.v2 .checker-card { background: var(--v2-card); border-radius: 22px; padding: clamp(14px, 4vw, 20px); margin: 0 0 16px; box-shadow: var(--v2-shadow), inset 0 0 0 1px var(--v2-line); border: 0; }
body.v2 #qr-reader { border-radius: 18px !important; }

/* ---------- Lucky ---------- */
body.v2 .countdown-strip {
  border: 0; border-radius: 18px; padding: 12px 14px;
  background: var(--v2-card); box-shadow: var(--v2-shadow-sm), inset 0 0 0 1px var(--v2-line);
}
body.v2 .cs-label { color: var(--v2-navy); font-size: 14px; }
body.v2 .cs-time { background: linear-gradient(90deg, #c2410c, #f97316); color: #fff; border: 0; border-radius: 12px; padding: 6px 12px; font-weight: 700; box-shadow: 0 4px 10px rgba(194, 65, 12, .3); }
body.v2 .lucky-card {
  margin: 0; border: 0; border-radius: 22px;
  background: var(--v2-card); color: var(--v2-text);
  box-shadow: var(--v2-shadow), inset 0 0 0 1px var(--v2-line);
  padding: clamp(14px, 4vw, 20px);
}
body.v2 .lucky-card h3 { font-size: 16px; font-weight: 700; color: var(--v2-navy); }
body.v2 .lucky-card .small { color: var(--v2-muted); }
body.v2 .lucky-card.lk-blue h3 { color: #1e3a8a; }
body.v2 .lucky-card.lk-purple h3 { color: #5b21b6; }
[data-theme="dark"] body.v2 .lucky-card.lk-blue h3 { color: #93c5fd; }
[data-theme="dark"] body.v2 .lucky-card.lk-purple h3 { color: #c4b5fd; }
body.v2 .lucky-num {
  border: 0; border-radius: 14px; padding: 11px 4px;
  background: #eef4ff; color: #1e3a8a;
  box-shadow: inset 0 0 0 1.5px #c7d7fe;
  font-size: clamp(16px, 4.8vw, 19px);
}
body.v2 .lucky-num.v-purple { background: #f3edff; color: #5b21b6; box-shadow: inset 0 0 0 1.5px #ddd0ff; font-size: clamp(15px, 4.4vw, 18px); }
body.v2 .lucky-num:hover { background: #e0eaff; }
body.v2 .lucky-num.v-purple:hover { background: #ebe2ff; }
[data-theme="dark"] body.v2 .lucky-num { background: #1d2550; color: #9db0ff; box-shadow: inset 0 0 0 1.5px #2e3a78; }
[data-theme="dark"] body.v2 .lucky-num.v-purple { background: #2a2050; color: #c4a6ff; box-shadow: inset 0 0 0 1.5px #3d2f72; }
body.v2 .lucky-row { border-radius: 12px; background: var(--v2-pill); color: var(--v2-text); }
body.v2 .lucky-row .slot-tag { background: linear-gradient(90deg, #c2410c, #f97316); border-radius: 8px; }

/* ---------- Contact ---------- */
body.v2 .contact-card { border: 0; border-radius: 22px; background: var(--v2-card); box-shadow: var(--v2-shadow), inset 0 0 0 1px var(--v2-line); }
body.v2 .contact-icon { background: #ecfdf5; box-shadow: inset 0 0 0 1.5px #a7f3d0, 0 4px 10px rgba(4, 120, 87, .15); padding: 9px; }
body.v2 .contact-icon svg { width: 100%; height: 100%; }
body.v2 .contact-label { color: var(--v2-muted); }
body.v2 .contact-value { background: var(--v2-pill) !important; border: 1.5px dashed #c9b8ef !important; border-radius: 12px !important; color: var(--v2-navy); font-family: 'Poppins', sans-serif; font-size: 15px; }
body.v2 .official-card { background: var(--v2-card); border: 0; border-radius: 22px; padding: 16px; box-shadow: var(--v2-shadow), inset 0 0 0 1px var(--v2-line); }
body.v2 .of-intro { color: var(--v2-navy); font-weight: 600; }
body.v2 .of-link { background: var(--v2-pill); border: 0; border-radius: 14px; color: var(--v2-text) !important; }
body.v2 .of-link strong { color: var(--v2-navy); }

/* ---------- responsive grid for inner pages ---------- */
@media (min-width: 640px) {
  .v2-dates { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .v2-main.v2-legacy { max-width: 1000px; padding: 20px 24px 20px; }
  .v2-dates { grid-template-columns: repeat(3, 1fr); }
  .v2-date:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(92, 40, 140, .14), inset 0 0 0 1px var(--v2-line); }
  .v2-phero { margin-top: 0; }
  .ph-ic { width: 72px; height: 72px; }
}

/* inner pages: polish */
body.v2 .v2-legacy .section-head { gap: 8px; align-items: center; }
body.v2 .v2-legacy .section-head h2 { flex: 1; min-width: 0; font-size: clamp(15px, 4.4vw, 19px); display: flex; align-items: center; gap: 6px; }
body.v2 .v2-legacy .section-head .small { flex: 0 0 auto; white-space: nowrap; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: var(--v2-pill); color: var(--v2-purple); font-weight: 600; }
body.v2 .content-card > h2:first-child, body.v2 .content-card > h3:first-child { margin-top: 0; }

/* ===== Home: instant ticket check result card ===== */
.v2-qc { margin: -4px 0 16px; }
.v2-qc[hidden] { display: none; }
.qc-card {
  position: relative; overflow: hidden;
  border-radius: 20px; padding: 14px;
  background: var(--v2-card);
  box-shadow: var(--v2-shadow), inset 0 0 0 1.5px var(--qc-line, var(--v2-line));
  animation: qcIn .35s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes qcIn { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.qc-win  { --qc-line: #86efac; background: linear-gradient(180deg, #f0fdf4 0%, var(--v2-card) 60%); }
.qc-lose { --qc-line: #fecdd3; background: linear-gradient(180deg, #fff1f2 0%, var(--v2-card) 60%); }
.qc-info { --qc-line: #c7d2fe; background: linear-gradient(180deg, #eef2ff 0%, var(--v2-card) 60%); }
.qc-err  { --qc-line: #fde68a; background: linear-gradient(180deg, #fffbeb 0%, var(--v2-card) 60%); }
[data-theme="dark"] .qc-win  { background: linear-gradient(180deg, #0f2a1d 0%, var(--v2-card) 70%); --qc-line: #166534; }
[data-theme="dark"] .qc-lose { background: linear-gradient(180deg, #2c1220 0%, var(--v2-card) 70%); --qc-line: #7f1d1d; }
[data-theme="dark"] .qc-info, [data-theme="dark"] .qc-err { background: var(--v2-card); --qc-line: #3d2f72; }
.qc-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; }
.qc-emoji { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.qc-win .qc-emoji { animation: qcBounce 1s ease-in-out infinite alternate; }
.qc-lose .qc-emoji { animation: qcShake .6s ease-in-out 1; }
@keyframes qcBounce { from { transform: translateY(2px) scale(1); } to { transform: translateY(-3px) scale(1.08); } }
@keyframes qcShake { 20%, 60% { transform: rotate(-10deg); } 40%, 80% { transform: rotate(10deg); } }
.qc-ht { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qc-ht strong { font-size: 16px; font-weight: 700; color: var(--v2-navy); line-height: 1.3; }
.qc-win .qc-ht strong { color: #15803d; }
.qc-lose .qc-ht strong { color: #be123c; }
[data-theme="dark"] .qc-win .qc-ht strong { color: #4ade80; }
[data-theme="dark"] .qc-lose .qc-ht strong { color: #fb7185; }
.qc-ht small { font-size: 12.5px; color: var(--v2-muted); }
.qc-x { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; background: rgba(0, 0, 0, .05); color: var(--v2-muted); font-size: 20px; line-height: 1; }
[data-theme="dark"] .qc-x { background: rgba(255, 255, 255, .08); }
.qc-note { position: relative; z-index: 1; margin-top: 10px; font-size: 13px; color: var(--v2-muted); }
.qc-rows { position: relative; z-index: 1; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.qc-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px 9px 12px; border-radius: 14px;
  background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line);
}
.qc-r-win { box-shadow: inset 0 0 0 1.5px #86efac; background: #f0fdf4; }
[data-theme="dark"] .qc-r-win { background: #0f2a1d; box-shadow: inset 0 0 0 1.5px #166534; }
.qc-rl { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.qc-rl strong { font-size: 14.5px; color: var(--v2-navy); }
.qc-rl small { font-size: 11.5px; color: var(--v2-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qc-badge { flex: 0 0 auto; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.qc-badge.win { background: linear-gradient(90deg, #16a34a, #22c55e); color: #fff; box-shadow: 0 3px 8px rgba(22, 163, 74, .3); }
.qc-badge.lose { background: #ffe4e6; color: #be123c; }
.qc-badge.na { background: var(--v2-pill); color: var(--v2-muted); }
[data-theme="dark"] .qc-badge.lose { background: #3f1424; color: #fda4af; }
.qc-pdf { flex: 0 0 auto; padding: 5px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--v2-purple) !important; background: var(--v2-pill); }
.qc-foot { position: relative; z-index: 1; margin-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.qc-more { font-size: 13.5px; font-weight: 700; color: var(--v2-pink) !important; }
.qc-verify { font-size: 11.5px; color: var(--v2-muted); }
.qc-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.qc-confetti i {
  position: absolute; top: -10px; left: calc(var(--i) * 5.6%);
  width: 7px; height: 11px; border-radius: 2px;
  background: hsl(calc(var(--i) * 47), 85%, 58%);
  animation: qcFall 2.4s ease-in calc(var(--i) * .08s) 2 both;
}
@keyframes qcFall { to { transform: translateY(220px) rotate(540deg); opacity: 0; } }
.v2-search button.is-loading { opacity: .85; }

/* ===== Check Prize page: professional form ===== */
body.v2 .cf-field label { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--v2-muted); margin-bottom: 6px; }
body.v2 .cf-hint { text-transform: none; letter-spacing: 0; font-weight: 500; color: #a8a3bd; }
body.v2 .cf-field input, body.v2 .cf-field select {
  height: 52px; padding: 0 14px;
  font: 600 15px 'Poppins', sans-serif; color: var(--v2-navy);
  background: #fbf9ff; border: 1.5px solid #e6def5; border-radius: 14px;
  box-shadow: 0 1px 2px rgba(60, 20, 120, .04);
}
[data-theme="dark"] body.v2 .cf-field input, [data-theme="dark"] body.v2 .cf-field select { background: #241d40; border-color: #3a3060; color: #ece9ff; }
body.v2 .cf-field select { padding-right: 34px; text-overflow: ellipsis; }
body.v2 .cf-ticket-input {
  font-family: 'Poppins', sans-serif !important;
  font-size: 18px !important; font-weight: 700 !important;
  letter-spacing: 1.5px !important; text-transform: uppercase;
  border-style: solid !important; border-color: #f3c2d7 !important; background: #fff9fc !important;
}
[data-theme="dark"] body.v2 .cf-ticket-input { background: #2a1f3d !important; border-color: #5a2a48 !important; }
body.v2 .check-form-card input::placeholder { color: #c9c4d9 !important; opacity: 1; font-weight: 500; letter-spacing: .5px; text-transform: none; }
[data-theme="dark"] body.v2 .check-form-card input::placeholder { color: #6f6890 !important; }
body.v2 .v2-search input::placeholder { color: #b9b4cc; }
[data-theme="dark"] body.v2 .v2-search input::placeholder { color: #6f6890; }

body.v2 .cf-preview {
  background: #fbf9ff; border: 1.5px dashed #ddd2f3; border-radius: 16px;
  padding: 12px 14px; box-shadow: none;
}
[data-theme="dark"] body.v2 .cf-preview { background: #1f1938; border-color: #3a3060; }
body.v2 .cf-pv-head { color: var(--v2-purple); font-size: 11px; letter-spacing: 1px; }
body.v2 .cf-pv-dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .2); }
body.v2 .cf-pv-body { color: var(--v2-text); font-size: 14px; }
.cf-pv-rows { display: grid; gap: 6px; margin-top: 8px; }
.cf-pv-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.cf-pv-row span { color: var(--v2-muted); flex: 0 0 auto; }
.cf-pv-row b { color: var(--v2-navy); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.cf-pv-row b.empty { color: #b9b4cc; font-weight: 500; }
.cf-pv-row b.tk { color: var(--v2-pink); letter-spacing: 1px; }
body.v2 .cf-pv-head { background: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; display: flex; align-items: center; gap: 8px; font-weight: 700; }
body.v2 .cf-pv-body { padding: 0 !important; background: none !important; }

/* header refresh button (replaces bell) */
.v2-refresh { color: var(--v2-purple); }
[data-theme="dark"] .v2-refresh { color: #c4a6ff; }
.v2-refresh svg { width: 24px !important; height: 24px !important; transition: transform .2s; }
.v2-refresh:active svg { transform: rotate(-30deg); }
.v2-refresh.spinning svg { animation: v2spin .6s linear infinite; }
@keyframes v2spin { to { transform: rotate(360deg); } }

/* centered refresh loader */
.v2-loader { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(250, 245, 255, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .2s; }
.v2-loader.show { opacity: 1; }
[data-theme="dark"] .v2-loader { background: rgba(15, 13, 28, .55); }
.v2-loader-box { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 28px; border-radius: 22px; background: var(--v2-card); box-shadow: 0 16px 40px rgba(80, 30, 160, .25), inset 0 0 0 1px var(--v2-line); transform: scale(.9); transition: transform .25s cubic-bezier(.2,.9,.3,1.3); }
.v2-loader.show .v2-loader-box { transform: scale(1); }
.v2-loader-ring { width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(from 0deg, #f0287a, #8b5cf6, #2563eb, rgba(37,99,235,0) 85%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); animation: v2spin .8s linear infinite; }
.v2-loader-txt { font-size: 14px; font-weight: 600; color: var(--v2-navy); }
/* loader: visible without relying on rAF (CSS animations) */
.v2-loader { opacity: 1 !important; transition: none; animation: v2fadeIn .18s ease-out both; }
.v2-loader-box { transform: none; transition: none; animation: v2popIn .28s cubic-bezier(.2,.9,.3,1.3) both; padding: 24px 32px; }
.v2-loader-ring { width: 54px; height: 54px; }
.v2-loader-txt { font-size: 15px; }
@keyframes v2fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes v2popIn { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ===== Highlighted refresh button ===== */
body.v2 .v2-refresh {
  position: relative; overflow: visible;
  background: linear-gradient(135deg, #7c3aed 0%, #c026d3 55%, #f0287a 100%) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(192, 38, 211, .45), inset 0 1px 0 rgba(255, 255, 255, .35) !important;
}
body.v2 .v2-refresh svg { color: #fff; animation: v2hint 4.5s ease-in-out infinite; }
body.v2 .v2-refresh::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(192, 38, 211, .55);
  animation: v2ring 2.2s ease-out infinite; pointer-events: none;
}
body.v2 .v2-refresh:active { transform: scale(.92); }
body.v2 .v2-refresh.spinning svg { animation: v2spin .6s linear infinite; }
body.v2 .v2-refresh.spinning::after { animation: none; }
@keyframes v2ring { 0% { box-shadow: 0 0 0 0 rgba(192, 38, 211, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(192, 38, 211, 0); } }
@keyframes v2hint { 0%, 78% { transform: rotate(0); } 92%, 100% { transform: rotate(360deg); } }
[data-theme="dark"] body.v2 .v2-refresh { box-shadow: 0 6px 16px rgba(192, 38, 211, .55) !important; }
@media (min-width: 1024px) { body.v2 .v2-refresh { width: 42px; height: 42px; border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { body.v2 .v2-refresh svg, body.v2 .v2-refresh::after { animation: none; } }

/* footer: Official Sources + Legal side by side (2x2 on mobile, 5 cols on desktop) */
.v2-footer-in { gap: 16px 14px; }
.vf-col a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { .vf-col a { font-size: 12.5px; } }
@media (min-width: 640px) { .v2-footer-in { grid-template-columns: 1.8fr 1fr 1fr 1.25fr 1fr; } }

/* draw cards: single-line labels, auto-shrunk by JS (fitDrawText) */
.v2-draw .vd-period, .v2-draw .vd-time { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-draw .vd-period { letter-spacing: .2px; }

/* ============================ LIVE DRAW CHIP (provisional) ============================ */
.vd-live-badge {
  position: absolute; top: clamp(5px, 1.6vw, 9px); left: clamp(5px, 1.6vw, 9px); z-index: 2;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px clamp(5px, 1.5vw, 8px); border-radius: 999px;
  background: #dc2626; color: #fff;
  font-size: clamp(8.5px, 2.5vw, 11px); font-weight: 800; letter-spacing: .6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.vd-live-badge i { width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: vdLiveBlink 1s infinite; }
@keyframes vdLiveBlink { 50% { opacity: .25; } }
.vd-live {
  position: relative; z-index: 1;
  margin-top: clamp(5px, 1.6vw, 8px); width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: clamp(3px, 1vw, 5px) 2px;
  border-radius: 10px; background: rgba(0, 0, 0, .18);
}
.vd-live-tag { font-size: clamp(7.5px, 2.2vw, 10.5px); font-weight: 700; letter-spacing: .3px; opacity: .95; white-space: nowrap; }
.vd-live-num { font-size: clamp(9.5px, 2.9vw, 14px); font-weight: 800; letter-spacing: .3px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.v2-draws:has(.has-live) .vd-btn { margin-top: auto; }
.v2-draws:has(.has-live) .has-live .vd-btn { margin-top: clamp(6px, 1.8vw, 10px); }