@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root{
  --fw-primary:#FED835;
  --fw-primary-hover:#e5c230;
  --fw-ink:#171717;
  --fw-muted:#667085;
  --fw-surface:#ffffff;
  --fw-soft:#F3F3F5;
  --fw-line:#E5E7EB;
  --fw-shadow:0 18px 50px rgba(16,24,40,.08);
  --fw-radius:26px;
}

html{scroll-behavior:smooth}
body{
  background:
    linear-gradient(to right,rgba(128,128,128,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(128,128,128,.045) 1px,transparent 1px),
    var(--fw-soft)!important;
  background-size:40px 40px!important;
  color:var(--fw-ink)!important;
  font-family:"Source Sans 3",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
}
h1,h2,h3,h4,h5,h6,.brand,.opname,.topline h1{
  font-family:"Manrope",system-ui,sans-serif!important;
  letter-spacing:-.02em;
}
button,a,input,select{font-family:inherit}
button{transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease}
button:active{transform:scale(.98)}

/* ---- Scanner app shell ---- */
body:has(#scanView) main{max-width:620px!important;padding:26px 18px 116px!important}
.topline{
  position:sticky;top:0;z-index:18;
  align-items:center!important;
  margin:-26px -18px 20px!important;
  padding:14px 18px!important;
  background:rgba(255,255,255,.9)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(229,231,235,.85);
}
.topline>div{min-width:0}
.topline h1{
  margin:0!important;
  font-size:21px!important;
  font-weight:800!important;
  display:flex;align-items:center;gap:10px;
}
.topline h1:before{
  content:"4D";
  display:inline-grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--fw-primary);
  color:#111;font-size:13px;font-weight:900;letter-spacing:-.04em;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.topline .muted{display:none}
.menubtn,.menuBtn{
  background:var(--fw-primary)!important;
  color:#111!important;
  border:0!important;
  border-radius:999px!important;
  box-shadow:none!important;
}
.menubtn{width:44px!important;height:44px!important}
.card{
  border:1px solid rgba(229,231,235,.95)!important;
  border-radius:var(--fw-radius)!important;
  box-shadow:var(--fw-shadow)!important;
  background:rgba(255,255,255,.96)!important;
}
.hero{
  position:relative;
  overflow:hidden;
  padding:30px 22px!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(254,216,53,.22),transparent 42%),
    rgba(255,255,255,.98)!important;
}
.hero:before{
  content:"";
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    linear-gradient(to right,rgba(128,128,128,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(128,128,128,.055) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 55%,transparent 100%);
}
.hero>*{position:relative;z-index:1}
.hero .camera{
  width:62px;height:62px;margin:0 auto 10px;
  display:grid;place-items:center;
  border-radius:22px;
  background:var(--fw-primary);
  font-size:28px!important;
  box-shadow:0 12px 28px rgba(229,194,48,.25);
}
.hero h2{font-size:30px!important;margin:8px 0 8px!important;font-weight:800!important}
.hero p{max-width:430px;margin:0 auto 20px!important;line-height:1.45}
.primary{
  background:var(--fw-primary)!important;
  color:#111!important;
  border-radius:999px!important;
  min-height:54px;
  font-family:"Manrope",sans-serif!important;
  font-weight:800!important;
  box-shadow:0 8px 20px rgba(229,194,48,.18)!important;
}
.primary:hover{background:var(--fw-primary-hover)!important}
.linkbtn,.actions button,.actions a{
  border:1px solid var(--fw-line)!important;
  background:#fff!important;
  color:#171717!important;
  border-radius:999px!important;
  font-weight:700!important;
}
.linkbtn:hover,.actions button:hover,.actions a:hover{background:#f7f7f8!important}
.review .item{padding:16px 0!important}
.item span,.meta,.muted{color:var(--fw-muted)!important}
.stats{gap:10px!important}
.stat{
  border:1px solid var(--fw-line);
  border-radius:20px!important;
  padding:16px 10px!important;
  box-shadow:0 8px 24px rgba(16,24,40,.04);
}
.stat b{font-family:"Manrope";font-size:24px!important}
.section h2{font-family:"Manrope";font-weight:800!important}
.badge{font-weight:800}
.drawer{
  border-radius:28px 0 0 28px;
  box-shadow:-22px 0 55px rgba(16,24,40,.14)!important;
}
.drawerHead b{font-family:"Manrope";font-weight:800}
.drawerClose{border-radius:999px!important}
.drawer a{border-radius:14px!important}
.drawer a.current,.drawer a:hover{background:#fff7cf!important}
body:has(#scanView) nav{
  background:#171717!important;
  border-radius:999px!important;
  padding:6px!important;
  box-shadow:0 16px 35px rgba(16,24,40,.2)!important;
}
body:has(#scanView) nav button{border-radius:999px!important}
body:has(#scanView) nav .active{background:var(--fw-primary)!important;color:#111!important}

/* Smart scanner layer */
.smartCamera{
  border-radius:24px!important;
  background:#0b0b0c!important;
  box-shadow:0 18px 45px rgba(16,24,40,.2)!important;
}
.cameraGuide{border-radius:22px!important}
.cameraHint{
  top:18px!important;
  background:rgba(0,0,0,.56);
  border-radius:999px;
  padding:8px 12px;
  width:max-content;max-width:78%;left:50%!important;right:auto!important;
  transform:translateX(-50%);
}
.cameraControls button{border-radius:999px!important}
.captureNow{background:var(--fw-primary)!important;color:#111!important}
.closeCam{background:#fff!important;color:#111!important}
.autoRow{padding:0 4px}
.scanProgressTrack{background:#eceef2!important;height:10px!important}
.scanProgressFill{background:var(--fw-primary)!important}
.previewWrap{border-radius:22px;overflow:hidden;background:#f7f7f8}
.previewWrap .preview{border-radius:22px!important}
.scanSummary{border-bottom:1px solid var(--fw-line)!important}
.ticketEditor,.batchPanel,.labCard{
  border-radius:22px!important;
  border-color:var(--fw-line)!important;
  box-shadow:none!important;
}
.ticketEditor th{background:#f7f7f8!important}
.ticketEditor input,.ticketEditor select,.fieldConf input,.fieldConf select{
  border-radius:12px!important;
  border-color:#d9dde5!important;
}
.editorActions button{
  border-radius:999px!important;
  background:#f6f6f7!important;
}
.privacyRow{
  border-radius:18px!important;
  background:#f7f7f8!important;
}
.duplicateWarn{border-radius:18px!important}

/* ---- Results app shell ---- */
body:has(#boards) main{
  max-width:780px!important;
  padding:0 14px 52px!important;
}
.sitebar{
  position:sticky;top:0;z-index:20;
  height:72px!important;
  margin:0 -14px!important;
  padding:0 18px!important;
  background:rgba(255,255,255,.92)!important;
  color:#171717!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(229,231,235,.9);
}
.brand{
  font-size:21px!important;
  font-style:normal!important;
  font-weight:800!important;
  letter-spacing:-.03em!important;
  display:flex;align-items:center;gap:9px;
}.brandAvatar{
  width:42px;height:42px;border-radius:50%;object-fit:cover;
  border:2px solid #fff;
  box-shadow:0 4px 14px rgba(16,24,40,.12);
  flex:0 0 auto;
}
.brand span{
  display:inline-grid;place-items:center;
  width:40px;height:40px;border-radius:50%;
  background:var(--fw-primary);
  color:#111!important;
  font-size:13px;
}
.menuBtn{width:44px!important;height:44px!important;font-size:22px!important}
.regionTabs{
  margin:16px 0 10px!important;
  background:#fff!important;
  border:1px solid var(--fw-line)!important;
  border-radius:999px!important;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(16,24,40,.04);
}
.regionTabs button{
  min-height:46px!important;
  border:0!important;
  border-right:1px solid var(--fw-line)!important;
  font-weight:700;
  color:#475467!important;
}
.regionTabs button:last-child{border-right:0!important}
.regionTabs .active{
  background:#171717!important;
  color:#fff!important;
}
.scanCta{
  margin:12px 0!important;
  border-radius:22px!important;
  padding:16px!important;
  background:#171717!important;
  box-shadow:0 14px 34px rgba(16,24,40,.13)!important;
}
.scanCta a{
  background:var(--fw-primary)!important;
  border-radius:999px!important;
  padding:10px 16px!important;
}
.datebar{
  margin:10px 0!important;
  overflow:hidden;
  border:1px solid var(--fw-line)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(16,24,40,.04);
}
.datebar button{background:#fff!important}
.dateLabelHidden{display:none!important}
.resultDatePicker{
  display:block;
  width:100%;
  max-width:220px;
  margin:0 auto 3px;
  border:0;
  background:transparent;
  color:#171717;
  text-align:center;
  font-family:"Manrope",sans-serif;
  font-weight:800;
  font-size:15px;
  outline:none;
}
.resultDatePicker::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7}
.todayBtn{color:#7b6400!important}
.nextDrawBanner{
  margin:10px 0 12px;
  display:flex;align-items:center;gap:12px;
  padding:13px 15px;
  background:#171717;color:#fff;
  border-radius:20px;
  box-shadow:0 12px 28px rgba(16,24,40,.12);
}
.nextDrawBanner.hide{display:none!important}
.nextDrawIcon{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--fw-primary);color:#111;
  font-size:21px;flex:0 0 auto;
}
.nextDrawBanner small{
  display:block;color:#c7cbd1;font-size:11px;
  text-transform:uppercase;letter-spacing:.07em;font-weight:700;
}
.nextDrawBanner b{
  display:block;margin-top:2px;
  font-family:"Manrope",sans-serif;
  font-size:15px;font-weight:800;color:#fff;
}
.dashboard{
  padding:4px 0 8px!important;
  gap:8px!important;
}
.statusCard{
  border:1px solid var(--fw-line)!important;
  border-radius:18px!important;
  padding:13px 10px!important;
  min-height:76px!important;
  box-shadow:0 8px 24px rgba(16,24,40,.04)!important;
}
.statusCard b{font-family:"Manrope";font-size:17px!important}\n.statusCard span{font-size:18px!important;line-height:1.15!important;font-weight:900!important}
.quickOps{
  padding:4px 0 10px!important;
  gap:8px!important;
}
.quickOps button{
  border-color:var(--fw-line)!important;
  border-radius:999px!important;
  padding:8px 13px!important;
  box-shadow:0 5px 14px rgba(16,24,40,.03);
}
.tools{
  margin:8px 0 18px!important;
  border:1px solid var(--fw-line)!important;
  border-radius:24px!important;
  box-shadow:var(--fw-shadow)!important;
  overflow:hidden;
}
.toolTabs{border-bottom-color:var(--fw-line)!important}
.toolTabs button{
  min-height:48px;
  background:#f7f7f8!important;
  border-right-color:var(--fw-line)!important;
}
.toolTabs .active{
  background:var(--fw-primary)!important;
  color:#111!important;
}
.toolPane{padding:18px!important}
.toolPane h3{font-size:24px!important;font-family:"Manrope";font-weight:800}
.hint{color:var(--fw-muted)!important;font-size:17px!important}
.inputRow{gap:9px!important}
.inputRow input{
  border:1px solid #d6dae2!important;
  border-radius:999px!important;
  padding:12px 16px!important;
}
.inputRow button{
  background:#171717!important;
  border-radius:999px!important;
  padding:0 18px!important;
}
.chip{
  border-color:var(--fw-line)!important;
  border-radius:999px!important;
  padding:8px 11px!important;
}
.toolOutput{border-radius:16px!important;background:#f7f7f8!important}

/* Keep the familiar result board inside a modern card shell */
.board{
  border:1px solid var(--fw-line)!important;
  border-radius:22px!important;
  overflow:hidden;
  margin:0 0 24px!important;
  box-shadow:var(--fw-shadow)!important;
}
.opbar{min-height:104px!important}
.operatorLogo{
  border-radius:14px!important;
  border:0!important;
  margin-left:10px!important;
  box-shadow:0 4px 15px rgba(0,0,0,.12);
}
.opname{font-size:30px!important}
.status{
  border-radius:999px!important;
  padding:6px 9px!important;
}
.result{font-family:"Source Sans 3",sans-serif!important}
.prizeHead th,.sectionRow th,.zodiacRow th{
  background:#5f4b24!important;
}
.prizeHead th{font-size:21px!important}
.prizeNums td{font-family:"Manrope";font-weight:600!important;font-size:34px!important}
.gridNum{font-family:"Manrope";font-weight:500!important;font-size:26px!important}
.boardActions{padding:10px!important;border-top-color:var(--fw-line)!important}
.boardActions button,.boardActions a{
  border-color:var(--fw-line)!important;
  border-radius:999px!important;
  min-height:38px;
}
.source{padding:6px 12px 10px!important;font-size:14px!important}
.emptyHelp{background:#fafafa!important;font-size:17px!important}
.notice{
  margin:14px 0!important;
  border-radius:18px!important;
  border-color:#ead985!important;
  background:#fff9db!important;
  padding:12px!important;
}
.foot{padding:8px 4px!important;color:#667085!important;line-height:1.55!important}

/* Preserve operator identity */
.op-damacai .opbar{background:#10159a!important;color:#fff!important}
.op-magnum .opbar{background:#fff200!important;color:#171717!important}
.op-toto .opbar{background:#c90000!important;color:#fff!important}
.op-magnum .draw,.op-magnum .verified{color:#4d4300!important}

@media(max-width:560px){
  body:has(#scanView) main{padding-left:14px!important;padding-right:14px!important}
  .topline{margin-left:-14px!important;margin-right:-14px!important;padding-left:14px!important;padding-right:14px!important}
  .hero{padding:26px 18px!important}
  .hero h2{font-size:27px!important}
  body:has(#boards) main{padding-left:8px!important;padding-right:8px!important}
  .sitebar{margin-left:-8px!important;margin-right:-8px!important}
  .regionTabs{border-radius:20px!important}
  .dashboard{gap:5px!important}
  .statusCard{padding:13px 9px!important}
  .tools{border-radius:20px!important}
  .opbar{grid-template-columns:86px 1fr auto!important}
  .operatorText{padding-left:8px!important}
  .opname{font-size:27px!important}
  .draw{font-size:17px!important}
}


/* 4Dmoon-inspired flat result table proportions: larger numbers, compact spacing, clear grid */
body:has(#boards) .boards{padding-top:8px!important}
body:has(#boards) .board{
  margin:0 0 26px!important;
  border:8px solid #fff!important;
  border-radius:0!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:0 5px 14px rgba(49,38,12,.24)!important;
}
body:has(#boards) .opbar{
  min-height:104px!important;
  grid-template-columns:96px 1fr auto!important;
  border-radius:0!important;
  margin:0!important;
}
body:has(#boards) .operatorLogo{
  width:86px!important;
  height:86px!important;
  margin-left:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
body:has(#boards) .operatorText{padding:8px 12px!important}
body:has(#boards) .opname{
  font-size:30px!important;
  line-height:1.02!important;
  font-weight:900!important;
}
body:has(#boards) .draw{
  margin-top:6px!important;
  font-size:18px!important;
  line-height:1.1!important;
}
body:has(#boards) table.result{
  width:100%!important;
  border-collapse:collapse!important;
  table-layout:fixed!important;
  margin:4px 0 0!important;
  background:#fff!important;
}
body:has(#boards) table.result th,
body:has(#boards) table.result td{
  border:1px solid #d5ccb7!important;
  text-align:center!important;
  vertical-align:middle!important;
  padding-left:2px!important;
  padding-right:2px!important;
}
body:has(#boards) .prizeHead th{
  height:52px!important;
  padding:4px 2px!important;
  font-size:21px!important;
  line-height:1!important;
  font-weight:900!important;
}
body:has(#boards) .prizeNums td{
  height:74px!important;
  padding:3px 2px!important;
  font-size:46px!important;
  line-height:1!important;
  font-weight:600!important;
  letter-spacing:.4px!important;
}
body:has(#boards) .sectionRow th{
  height:58px!important;
  padding:7px 2px!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:900!important;
}
body:has(#boards) .gridNum{
  height:68px!important;
  padding:7px 1px!important;
  font-size:30px!important;
  line-height:1!important;
  font-weight:500!important;
  letter-spacing:0!important;
}
body:has(#boards) .specialThird td{
  height:68px!important;
}
body:has(#boards) .zodiacRow th,
body:has(#boards) .zodiacRow td{
  height:52px!important;
  font-size:20px!important;
}
body:has(#boards) .boardActions{
  padding:12px 4px 4px!important;
  gap:8px!important;
  border-top:0!important;
}
body:has(#boards) .source{padding:8px 2px 2px!important}

@media(max-width:480px){
  body:has(#boards) main{padding-left:4px!important;padding-right:4px!important}
  body:has(#boards) .board{border-width:5px!important;margin-bottom:22px!important}
  body:has(#boards) .opbar{min-height:96px!important;grid-template-columns:84px 1fr auto!important}
  body:has(#boards) .operatorLogo{width:78px!important;height:78px!important}
  body:has(#boards) .opname{font-size:27px!important}
  body:has(#boards) .draw{font-size:17px!important}
  body:has(#boards) .prizeHead th{height:50px!important;font-size:20px!important;padding:4px 1px!important}
  body:has(#boards) .prizeNums td{height:72px!important;font-size:44px!important;padding:3px 1px!important}
  body:has(#boards) .sectionRow th{height:54px!important;font-size:22px!important}
  body:has(#boards) .gridNum{height:64px!important;font-size:27px!important}
}

/* Dedicated 3-column top prize table prevents blank right-side space */
body:has(#boards) table.topPrizes{
  width:100%!important;
  border-collapse:collapse!important;
  table-layout:fixed!important;
  background:#fff!important;
  margin:4px 0 0!important;
}
body:has(#boards) table.topPrizes th,
body:has(#boards) table.topPrizes td{
  width:33.3333%!important;
  border:1px solid #d5ccb7!important;
  text-align:center!important;
  vertical-align:middle!important;
}
body:has(#boards) table.topPrizes .prizeHead th{
  height:52px!important;
  padding:4px 2px!important;
  font-size:21px!important;
  line-height:1!important;
  font-weight:900!important;
  background:#5f4b24!important;
  color:#fff!important;
}
body:has(#boards) table.topPrizes .prizeNums td{
  height:74px!important;
  padding:3px 2px!important;
  font-size:46px!important;
  line-height:1!important;
  font-weight:600!important;
}
@media(max-width:480px){
  body:has(#boards) table.topPrizes .prizeHead th{height:50px!important;font-size:20px!important}
  body:has(#boards) table.topPrizes .prizeNums td{height:72px!important;font-size:44px!important}
}

/* Prize-match highlight */
body:has(#boards) .mine{
  background:#fff3a8!important;
  box-shadow:inset 0 0 0 3px #e2b000,0 0 12px rgba(226,176,0,.32)!important;
  font-weight:900!important;
  position:relative!important;
}
body:has(#boards) .mine:after{
  content:"🏆"!important;
  position:absolute!important;
  right:3px!important;
  top:3px!important;
  background:#111827!important;
  color:#fff!important;
  font-size:11px!important;
  line-height:1!important;
  padding:4px!important;
  border-radius:999px!important;
}

/* Unified elder-friendly site branding */
body:has(#boards) .sitebar{
  min-height:82px!important;
  height:auto!important;
  padding:10px 14px!important;
}
body:has(#boards) .brandUnified{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
  font-style:normal!important;
  letter-spacing:0!important;
}
body:has(#boards) .brandSiteIcon{
  width:56px!important;
  height:56px!important;
  flex:0 0 56px!important;
  border-radius:15px!important;
  display:block!important;
  box-shadow:0 3px 10px rgba(0,0,0,.18)!important;
}
body:has(#boards) .brandWords{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  line-height:1.05!important;
}
body:has(#boards) .brandWords strong{
  color:#fff!important;
  font-family:"Manrope",Arial,sans-serif!important;
  font-size:29px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}
body:has(#boards) .brandWords small{
  display:block!important;
  margin-top:6px!important;
  color:#d8d8d8!important;
  font-size:14px!important;
  line-height:1.2!important;
  font-weight:700!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:440px!important;
}
@media(max-width:560px){
  body:has(#boards) .sitebar{padding:9px 10px!important}
  body:has(#boards) .brandSiteIcon{width:50px!important;height:50px!important;flex-basis:50px!important;border-radius:13px!important}
  body:has(#boards) .brandWords strong{font-size:24px!important}
  body:has(#boards) .brandWords small{font-size:12px!important;max-width:210px!important}
}
@media(max-width:390px){
  body:has(#boards) .brandWords small{display:none!important}
  body:has(#boards) .brandWords strong{font-size:23px!important}
}


/* Black-gold result section headers */
body:has(#boards) .prizeHead th,
body:has(#boards) .sectionRow th,
body:has(#boards) .zodiacRow th{
  background:#1b1b1b!important;
  color:#fff!important;
  border-color:#d4af37!important;
  box-shadow:inset 0 2px 0 #d4af37,inset 0 -2px 0 #d4af37!important;
}
body:has(#boards) table.result td,
body:has(#boards) table.result th,
body:has(#boards) table.topPrizes td,
body:has(#boards) table.topPrizes th{
  border-color:#cfc4a3!important;
}

/* Large top brand icon */
body:has(#boards) .heroBrand{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  padding:18px 12px 10px!important;
  background:#fff!important;
}
body:has(#boards) .heroBrandIcon{
  width:min(260px,58vw)!important;
  height:auto!important;
  display:block!important;
  border-radius:28px!important;
  box-shadow:0 10px 28px rgba(0,0,0,.16)!important;
}
@media(max-width:480px){
  body:has(#boards) .heroBrand{padding:16px 8px 8px!important}
  body:has(#boards) .heroBrandIcon{width:min(230px,64vw)!important;border-radius:24px!important}
}

/* Regional operator branding */
body:has(#boards) .op-grand .opbar{background:#e60012!important;color:#fff!important}
body:has(#boards) .op-sabah .opbar{background:#6a1b9a!important;color:#fff!important}
body:has(#boards) .op-sandakan .opbar{background:#e97800!important;color:#fff!important}
body:has(#boards) .op-cashsweep .opbar{background:#087443!important;color:#fff!important}
body:has(#boards) .op-singapore .opbar{background:#d71920!important;color:#fff!important}
body:has(#boards) .textLogo{
  width:100%;height:100%;display:grid;place-items:center;
  font-family:"Manrope",Arial,sans-serif;font-weight:1000;font-size:26px;
  color:#111;background:#fff;
}
body:has(#boards) .gdLogo{color:#b40000}
body:has(#boards) .sabahLogo{color:#6a1b9a}
body:has(#boards) .sandakanLogo{color:#d46500;font-size:20px}
body:has(#boards) .cashLogo{color:#087443}
body:has(#boards) .sgLogo{color:#d71920}