/* YOKKIT Lottery UI — visual layer only */
:root{
  --yb-bg:#f7f7f5;--yb-surface:rgba(255,255,255,.92);--yb-surface-2:#fbfbfa;
  --yb-text:#171717;--yb-muted:#737373;--yb-line:#e8e7e3;--yb-line-strong:#d8d6d0;
  --yb-accent:#6d5dfc;--yb-accent-2:#8b7cff;--yb-soft:#f0edff;--yb-good:#168a60;--yb-danger:#c94747;
  --yb-radius:20px;--yb-radius-sm:13px;--yb-shadow:0 1px 2px rgba(0,0,0,.03),0 12px 35px rgba(31,25,18,.06);
  --yb-font:Inter,"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
}
html{scroll-behavior:smooth}
body[data-ui="luma"]{font-family:var(--yb-font)!important;background:var(--yb-bg)!important;color:var(--yb-text)!important;letter-spacing:-.01em}
body[data-ui="luma"] *{box-sizing:border-box}
body[data-ui="luma"] ::selection{background:#ddd8ff;color:#251d6b}
body[data-ui="luma"] a{transition:.18s ease}
body[data-ui="luma"] button,body[data-ui="luma"] input,body[data-ui="luma"] select,body[data-ui="luma"] textarea{font:inherit}
body[data-ui="luma"] button,body[data-ui="luma"] .btn{border-radius:12px!important;box-shadow:none!important;font-weight:700!important;transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease!important}
body[data-ui="luma"] button:hover,body[data-ui="luma"] .btn:hover{transform:translateY(-1px)}
body[data-ui="luma"] input,body[data-ui="luma"] select,body[data-ui="luma"] textarea{border-radius:12px!important;border-color:var(--yb-line)!important;background:#fff!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.01)!important}
body[data-ui="luma"] input:focus,body[data-ui="luma"] select:focus,body[data-ui="luma"] textarea:focus{border-color:#b8afff!important;box-shadow:0 0 0 4px rgba(109,93,252,.10)!important;outline:none!important}
body[data-ui="luma"] .bg-white,body[data-ui="luma"] .card,body[data-ui="luma"] section.bg-white{background:var(--yb-surface)!important}
body[data-ui="luma"] .shadow,body[data-ui="luma"] .shadow-sm,body[data-ui="luma"] .shadow-md,body[data-ui="luma"] .shadow-lg,body[data-ui="luma"] .shadow-xl,body[data-ui="luma"] .shadow-2xl{box-shadow:var(--yb-shadow)!important}
body[data-ui="luma"] .rounded-lg{border-radius:12px!important}body[data-ui="luma"] .rounded-xl{border-radius:16px!important}body[data-ui="luma"] .rounded-2xl{border-radius:20px!important}body[data-ui="luma"] .rounded-3xl{border-radius:24px!important}
body[data-ui="luma"] .text-brand{color:var(--yb-accent)!important}
body[data-ui="luma"] .border-gray-100,body[data-ui="luma"] .border-gray-200,body[data-ui="luma"] .border-slate-200{border-color:var(--yb-line)!important}
body[data-ui="luma"] header{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}

/* setup / main lottery */
body[data-page="index"]{background:radial-gradient(circle at 15% -10%,rgba(109,93,252,.10),transparent 28%),radial-gradient(circle at 90% 5%,rgba(230,170,220,.10),transparent 24%),var(--yb-bg)!important}
body[data-page="index"] #lotteryContainer{max-width:1240px!important;margin:auto!important}
body[data-page="index"] #setup-section>div,body[data-page="index"] #drawing-section>div{border-color:var(--yb-line)!important}
body[data-page="index"] #setup-section .bg-white,body[data-page="index"] #drawing-section .bg-white{border:1px solid var(--yb-line)!important;box-shadow:var(--yb-shadow)!important}
body[data-page="index"] .bg-gradient-to-r,body[data-page="index"] .bg-gradient-to-br{background-image:none!important}
body[data-page="index"] #btn-start,body[data-page="index"] #drawBtn,body[data-page="index"] #drawButton{background:var(--yb-text)!important;color:#fff!important;border:1px solid var(--yb-text)!important}
body[data-page="index"] #prizeListContainer>*{border:1px solid var(--yb-line)!important;background:#fff!important}
body[data-page="index"] nav,body[data-page="index"] .sticky{border-color:var(--yb-line)!important}

/* dashboard */
body[data-page="dashboard"]{background:radial-gradient(circle at 8% 0,rgba(109,93,252,.08),transparent 26%),var(--yb-bg)!important}
body[data-page="dashboard"] .card{border:1px solid var(--yb-line)!important;border-left:1px solid var(--yb-line)!important;border-radius:20px!important;box-shadow:var(--yb-shadow)!important}
body[data-page="dashboard"] .card:hover{transform:translateY(-2px);box-shadow:0 16px 42px rgba(31,25,18,.08)!important}
body[data-page="dashboard"] table{border-collapse:separate!important;border-spacing:0!important}
body[data-page="dashboard"] thead{background:var(--yb-surface-2)!important}
body[data-page="dashboard"] th{font-size:11px!important;letter-spacing:.08em!important;color:var(--yb-muted)!important}
body[data-page="dashboard"] td{border-color:var(--yb-line)!important}

/* checkin/list management */
body[data-page="checkin"]{background:var(--yb-bg)!important}
body[data-page="checkin"] header{background:rgba(247,247,245,.88)!important;border-bottom:1px solid var(--yb-line)!important}
body[data-page="checkin"] table{background:#fff!important;border:1px solid var(--yb-line)!important;border-radius:18px!important;overflow:hidden!important;box-shadow:var(--yb-shadow)!important}
body[data-page="checkin"] thead{background:#fafaf8!important}body[data-page="checkin"] tr{border-color:var(--yb-line)!important}
body[data-page="checkin"] #tabContainer{background:#ecebe7!important;padding:4px!important;border-radius:14px!important}
body[data-page="checkin"] #tabContainer button{border-radius:10px!important}

/* remote control */
body[data-page="control"]{background:radial-gradient(circle at 50% -15%,rgba(109,93,252,.22),transparent 35%),#111112!important;color:#f6f6f5!important}
body[data-page="control"] .scanline{opacity:.12!important}
body[data-page="control"] #drawTrigger{background:linear-gradient(145deg,#7565ff,#5e50e5)!important;border:none!important;box-shadow:0 20px 70px rgba(109,93,252,.30)!important}
body[data-page="control"] #drawAllTrigger{background:#202023!important;border:1px solid #323238!important;color:#fff!important}
body[data-page="control"] select{background:#1a1a1d!important;color:#fff!important;border-color:#34343a!important}

/* Winner Wall */
body[data-page="wall"]{background:radial-gradient(circle at 20% -10%,rgba(116,98,255,.28),transparent 32%),radial-gradient(circle at 90% 20%,rgba(235,113,187,.18),transparent 28%),#101014!important}
body[data-page="wall"] .glass{background:rgba(255,255,255,.075)!important;border:1px solid rgba(255,255,255,.10)!important;box-shadow:0 22px 70px rgba(0,0,0,.22)!important;backdrop-filter:blur(22px)!important}
body[data-page="wall"] #latestWinnerBox{border-radius:26px!important}
body[data-page="wall"] #latestWinnerName{letter-spacing:-.045em!important}
body[data-page="wall"] #recentList>*{border-color:rgba(255,255,255,.08)!important}

/* stage/drawing */
body[data-page="drawing"]{background:radial-gradient(circle at 50% 0,rgba(109,93,252,.18),transparent 34%),#0e0e12!important}
body[data-page="drawing"] .topbar{background:rgba(15,15,19,.72)!important;border-bottom:1px solid rgba(255,255,255,.08)!important;backdrop-filter:blur(20px)!important}
body[data-page="drawing"] #stageCard{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:28px!important;box-shadow:0 30px 90px rgba(0,0,0,.30)!important}
body[data-page="drawing"] .brand-gradient{background:linear-gradient(135deg,#8a7cff,#6454ed)!important}

/* help */
body[data-page="help"]{background:var(--yb-bg)!important}
body[data-page="help"] .bg-white{border:1px solid var(--yb-line)!important;box-shadow:var(--yb-shadow)!important}
body[data-page="help"] .img-container{border-radius:18px!important;overflow:hidden!important;border:1px solid var(--yb-line)!important}
body[data-page="help"] nav{background:rgba(247,247,245,.9)!important;border-color:var(--yb-line)!important;backdrop-filter:blur(18px)!important}

/* admin lottery */
body[data-page="admin-lottery"]{background:radial-gradient(circle at 10% 0,rgba(109,93,252,.10),transparent 28%),var(--yb-bg)!important}
body[data-page="admin-lottery"] #setup-view>div,body[data-page="admin-lottery"] #play-view>div{border-color:var(--yb-line)!important}
body[data-page="admin-lottery"] #lottery-ball{box-shadow:0 25px 70px rgba(109,93,252,.20)!important}
body[data-page="admin-lottery"] #btn-start{background:var(--yb-text)!important;color:white!important}

/* mobile */
@media(max-width:768px){
  body[data-ui="luma"]{font-size:15px!important}
  body[data-ui="luma"] .p-8{padding:1.1rem!important}body[data-ui="luma"] .px-8{padding-left:1rem!important;padding-right:1rem!important}
  body[data-ui="luma"] .gap-8{gap:1rem!important}
  body[data-page="dashboard"] .card{border-radius:16px!important}
  body[data-page="wall"] #latestWinnerName{font-size:clamp(2.8rem,14vw,5rem)!important}
}