.page-dashboard main,.page-admin main{padding-bottom:48px;background:linear-gradient(180deg,#f4f8fc 0,#f8fafc 360px,#f5f8fc 100%)}
.page-dashboard .dashboard-head,.page-admin .dashboard-head{padding-top:48px;padding-bottom:26px}
.dashboard-head .eyebrow{margin-bottom:8px;letter-spacing:1.6px}.dashboard-head h1{margin:0;font-family:"Segoe UI",Tahoma,sans-serif;font-size:clamp(30px,4vw,42px);font-weight:750;line-height:1.2;color:#172c49}.dashboard-subtitle{margin:10px 0 0;color:#68778a;font-size:14px;line-height:1.7}
.page-dashboard .tabs,.page-admin .tabs{position:sticky;top:78px;z-index:12;gap:8px;padding:0 22px;background:rgba(248,250,252,.92);border:1px solid #dce5ef;border-radius:6px;box-shadow:0 8px 24px rgba(31,68,104,.06);backdrop-filter:blur(14px)}.page-dashboard .tabs a,.page-admin .tabs a{padding:15px 14px;white-space:nowrap;border-bottom-width:3px}
.page-dashboard .section.compact,.page-admin .section.compact{padding-top:42px;padding-bottom:8px;scroll-margin-top:148px}.page-dashboard .section>h2,.page-admin .section>h2,.page-admin .section-head h2{margin-bottom:18px;font-family:"Segoe UI",Tahoma,sans-serif;font-size:24px;font-weight:750;color:#1c304b}.page-dashboard .table-wrap,.page-admin .table-wrap,.page-dashboard .row-form,.page-admin .admin-editor{box-shadow:0 12px 34px rgba(31,68,104,.07)}
.reward-total{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:18px;padding:24px 26px;background:#fff;border:1px solid var(--line);border-radius:7px;box-shadow:0 12px 34px rgba(31,68,104,.07)}.reward-total h2{margin:0 0 6px!important}.reward-total span{color:#69798c;font-size:13px;line-height:1.6}.reward-total>strong{color:#1878be;font-size:34px;line-height:1;white-space:nowrap}
.reward-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.reward-card{min-height:220px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:7px;box-shadow:0 10px 28px rgba(31,68,104,.06);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.reward-image{display:block;width:calc(100% + 44px);height:auto;aspect-ratio:16/9;margin:-22px -22px 0;object-fit:cover;object-position:center;border-bottom:1px solid var(--line)}.reward-card:hover{transform:translateY(-3px);border-color:#a9d8f7;box-shadow:0 16px 34px rgba(31,68,104,.1)}.reward-card.claimed{background:#f7fbf9;border-color:#bce5d4}.reward-card h3{margin:12px 0 8px;font-size:19px;color:#23354e}.reward-card p,.reward-card small{color:#69778a;line-height:1.6}.reward-card form{display:grid;gap:9px}.reward-card select{width:100%;padding:11px;border:1px solid #ccd8e4;border-radius:5px;background:#f9fbfd}.reward-threshold{display:inline-flex;padding:5px 9px;color:#176ead;background:#e8f5ff;border-radius:4px;font-size:11px;font-weight:800}.reward-locked{color:#9a6810;font-size:12px;font-weight:700}
.page-admin .admin-item{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.page-admin .admin-item:hover{transform:translateY(-2px);border-color:#b6d9ef;box-shadow:0 10px 28px rgba(31,68,104,.08)}
@media(max-width:900px){.reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.page-dashboard .tabs,.page-admin .tabs{top:68px;margin:0 12px;padding:0 8px}.page-dashboard .tabs a,.page-admin .tabs a{padding:13px 10px}.page-dashboard .section.compact,.page-admin .section.compact{scroll-margin-top:132px}.reward-total{align-items:flex-start;flex-direction:column}.reward-grid{grid-template-columns:1fr}.reward-total>strong{font-size:30px}}

/* Shared visual language for public, member, and admin headings. */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:"Leelawadee UI","Noto Sans Thai","Segoe UI",Tahoma,sans-serif}
.topbar nav b{display:none}
.topbar nav a,.topbar .link{position:relative;line-height:1.4}
.topbar nav a:not(.nav-cta):after{content:"";position:absolute;left:50%;right:50%;bottom:-10px;height:2px;background:#39a8ee;border-radius:2px;transition:left .22s ease,right .22s ease}
.topbar nav a:hover:after,.topbar nav a.active:after{left:0;right:0}
.dashboard-head h1,.auth-art h1,.form-panel h2,.page-banner h1,.section-head h2,.section>h2{font-family:"Leelawadee UI","Noto Sans Thai","Segoe UI",Tahoma,sans-serif;letter-spacing:0}
.dashboard-head h1{font-weight:700;line-height:1.28}
.page-banner h1,.section-head h2,.section>h2{font-weight:700;line-height:1.3}
.eyebrow{letter-spacing:1.5px}
.auth-shell{border-color:rgba(169,196,220,.72);box-shadow:0 22px 60px rgba(20,55,91,.13);transition:box-shadow .3s ease}
.auth-shell:hover{box-shadow:0 26px 72px rgba(20,55,91,.17)}
.auth-art{position:relative}
.auth-art:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(65,170,244,.12) 52%,transparent 68%);transform:translateX(-110%);animation:auth-shine 8s ease-in-out infinite;pointer-events:none}
.auth-art>*{position:relative;z-index:1}
.auth-art h1{font-size:clamp(34px,4vw,48px);font-weight:700;line-height:1.3}
.form-panel h2{font-size:30px;font-weight:700;line-height:1.35;color:#192e4a}
.form-panel label{font-weight:600}
.form-panel input{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.form-panel input:hover{border-color:#a9c7df;background:#fff}
.form-panel .button:disabled{cursor:wait;filter:saturate(.72);opacity:.82;transform:none;box-shadow:0 7px 18px rgba(30,119,198,.2)}
.form-panel .button.is-loading{gap:10px;pointer-events:none}
.form-panel .button.is-loading:before{content:"";width:16px;height:16px;flex:0 0 16px;border:2px solid rgba(255,255,255,.42);border-top-color:#fff;border-radius:50%;animation:auth-submit-spin .72s linear infinite}
@keyframes auth-submit-spin{to{transform:rotate(360deg)}}
@keyframes auth-shine{0%,65%{transform:translateX(-110%)}85%,100%{transform:translateX(110%)}}
@media(prefers-reduced-motion:reduce){.auth-art:after{animation:none}.auth-shell,.reward-card,.page-admin .admin-item{transition:none}}

/* OHBE dimensional display treatment. */
.dashboard-head h1,.form-panel h2,.page-banner h1,.section-head h2,.section>h2{
  font-family:"Leelawadee UI","Segoe UI",Tahoma,sans-serif;
  font-weight:800;
  color:#132d50;
  background:linear-gradient(180deg,#294d78 0%,#102844 58%,#071a31 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 3px 5px rgba(25,74,117,.16));
}
.dashboard-head>div,.page-banner,.section-head>div{position:relative}
.dashboard-head h1:after,.page-banner h1:after,.section-head h2:after,.section>h2:after{
  content:"";
  display:block;
  width:54px;
  height:3px;
  margin-top:12px;
  border-radius:3px;
  background:linear-gradient(90deg,#159be8,#79d4ff 66%,transparent);
  box-shadow:0 2px 9px rgba(29,159,229,.35);
}
.form-panel h2{font-size:32px;filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 3px 7px rgba(25,74,117,.18))}
.form-panel h2:after{content:"";display:block;width:42px;height:3px;margin-top:11px;border-radius:3px;background:linear-gradient(90deg,#159be8,#72d1ff);box-shadow:0 2px 9px rgba(29,159,229,.32)}
.auth-art h1{color:#fff;text-shadow:0 2px 0 rgba(2,16,37,.8),0 8px 24px rgba(0,0,0,.55),0 0 22px rgba(76,176,255,.18)}
.package h3,.reward-card h3{font-weight:800;color:#183455;text-shadow:0 1px 0 #fff,0 3px 8px rgba(28,76,118,.12)}

/* Keep the OHBE crystal and dark-banner titles clean on every page. */
.topbar .brand .gem{display:block;width:38px;height:48px;object-fit:contain;margin:0 10px 0 0;background:none;border-radius:0;box-shadow:none;clip-path:none;filter:drop-shadow(0 0 5px rgba(128,224,255,.9)) drop-shadow(0 0 12px rgba(22,126,255,.52));transition:transform .25s ease,filter .25s ease}
.topbar .brand{display:inline-flex;align-items:center;flex:0 0 auto;white-space:nowrap;line-height:1}
.topbar .brand span{display:block;white-space:nowrap}
.topbar .brand:hover .gem{transform:translateY(-1px) scale(1.035);filter:drop-shadow(0 0 7px rgba(210,248,255,1)) drop-shadow(0 0 16px rgba(22,126,255,.7))}
.page-banner h1{color:#fff;background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:#fff;filter:none;text-shadow:0 2px 0 rgba(0,15,37,.72),0 7px 20px rgba(0,0,0,.42);font-size:clamp(38px,5vw,58px);font-weight:700}
.page-banner h1:after{width:58px;margin:14px auto 0;background:linear-gradient(90deg,transparent,#69cfff,transparent);box-shadow:0 2px 10px rgba(62,183,255,.45)}
@media(max-width:760px){.topbar .brand .gem{width:30px;height:38px;margin-right:7px}.page-banner h1{font-size:38px}}

/* Self-hosted Thai type system. */
@font-face{font-family:"Kanit OHBE";src:url("fonts/kanit/Kanit-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Kanit OHBE";src:url("fonts/kanit/Kanit-Medium.ttf") format("truetype");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"Kanit OHBE";src:url("fonts/kanit/Kanit-SemiBold.ttf") format("truetype");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Kanit OHBE";src:url("fonts/kanit/Kanit-Bold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
body,input,select,textarea,button{font-family:"Kanit OHBE","Leelawadee UI","Segoe UI",sans-serif}
.topbar nav,.topbar .link{font-family:"Kanit OHBE",sans-serif;font-weight:500}
.dashboard-head h1,.auth-art h1,.form-panel h2,.page-banner h1,.section-head h2,.section>h2,.package h3,.reward-card h3{font-family:"Kanit OHBE",sans-serif;letter-spacing:0}
.dashboard-head h1,.form-panel h2,.section-head h2,.section>h2{font-weight:600;color:#173556;background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:currentColor;filter:none;text-shadow:0 1px 0 #fff,0 3px 10px rgba(27,68,105,.1)}
.page-banner h1{font-weight:600;color:#fff;background:none;-webkit-text-fill-color:#fff;filter:none;text-shadow:0 3px 14px rgba(0,0,0,.45)}
.auth-art h1{font-weight:600}.package h3,.reward-card h3{font-weight:600;text-shadow:none}
.eyebrow{font-family:"Kanit OHBE",sans-serif;font-weight:600;letter-spacing:1.2px}
.form-panel label,.admin-editor label{font-weight:500}

/* Dimensional OHBE wordmark for light and dark navigation. */
.topbar .brand span{position:relative;font-family:Georgia,"Times New Roman",serif;font-weight:700;letter-spacing:.4px;color:#0d2a53;background:linear-gradient(180deg,#315985 0%,#0d2f5d 48%,#061c3b 52%,#244e7a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 1px 0 rgba(255,255,255,.95);filter:drop-shadow(0 3px 4px rgba(18,55,91,.18));transition:filter .25s ease,transform .25s ease}
.topbar .brand:hover span{transform:translateY(-1px);filter:drop-shadow(0 4px 6px rgba(18,72,120,.24))}
.page-home .topbar .brand span{color:#fff;background:linear-gradient(180deg,#fff 0%,#e9f5ff 42%,#9fc7e8 51%,#fff 78%,#b9d9f2 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 2px 0 rgba(0,14,38,.9);filter:drop-shadow(0 4px 5px rgba(0,0,0,.48)) drop-shadow(0 0 10px rgba(74,170,255,.16))}
.page-home .topbar .brand:hover span{filter:drop-shadow(0 5px 7px rgba(0,0,0,.55)) drop-shadow(0 0 13px rgba(74,170,255,.28))}

/* Solid wordmark: crisp first, depth second. */
.topbar .brand span{font-family:"Kanit OHBE","Leelawadee UI",sans-serif;font-size:22px;font-weight:600;letter-spacing:.2px;color:#14345d;background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:#14345d;text-shadow:0 1px 0 #fff,0 3px 8px rgba(20,52,93,.18);filter:none}
.topbar .brand:hover span{transform:translateY(-1px);filter:none;text-shadow:0 1px 0 #fff,0 4px 10px rgba(20,75,125,.24)}
.page-home .topbar .brand span{color:#f5f9ff;background:none;-webkit-background-clip:initial;background-clip:initial;-webkit-text-fill-color:#f5f9ff;text-shadow:0 2px 0 #06152b,0 4px 10px rgba(0,0,0,.62),0 0 10px rgba(74,170,255,.16);filter:none}
.page-home .topbar .brand:hover span{filter:none;text-shadow:0 2px 0 #06152b,0 5px 12px rgba(0,0,0,.7),0 0 12px rgba(74,170,255,.24)}

/* Active navigation stays quiet on the dark header. */
.page-home .topbar nav>a,.page-home .topbar nav>a:link,.page-home .topbar nav>a:visited,.page-home .topbar nav>a:hover,.page-home .topbar nav>a:focus,.page-home .topbar nav>a:focus-visible,.page-home .topbar nav>a:active,.page-home .topbar nav>a.active{background:transparent!important;background-color:transparent!important;box-shadow:none!important;outline:0}
.page-home .topbar nav>a.active{color:#62c9ff!important}
.page-home .topbar nav>a.active:after{height:2px;background:#25b6ff;box-shadow:0 0 9px rgba(37,182,255,.62)}

/* Account and cumulative rewards are independent pages. */
.page-dashboard #rewards{display:none}
.page-rewards #characters,.page-rewards #topup,.page-rewards #redeem,.page-rewards #history,.page-rewards .tabs{display:none}
.page-rewards main{min-height:calc(100vh - 78px);padding-bottom:60px;background:linear-gradient(180deg,#f4f8fc,#f8fafc 380px,#f5f8fc)}
.page-rewards .dashboard-head{padding-bottom:12px}
.page-rewards #rewards{padding-top:28px}

/* Item rewards accept exactly one numeric Item ID. */
.admin-editor label:has(textarea[name="items"]) small{display:none}
.admin-editor textarea[name="items"]{min-height:46px;height:46px;resize:none;overflow:hidden;font-variant-numeric:tabular-nums}

/* Internal RODEX item IDs are visible only in admin management. */
.page-promotions .package small,.page-checkout .checkout-summary small,.page-rewards .reward-card small{display:none}

/* Checkout typography follows the shared Kanit system. */
.checkout-summary h1,.checkout-payment h2{font-family:"Kanit OHBE",sans-serif;letter-spacing:0}
.checkout-summary h1{font-size:36px;font-weight:600;line-height:1.25;color:#173556}
.checkout-payment h2{font-size:28px;font-weight:600;line-height:1.35;color:#1b2e49}
.checkout-summary>strong{font-family:"Kanit OHBE",sans-serif;font-weight:600}
.checkout-payment input[type="file"]{font-family:"Kanit OHBE",sans-serif;color:#536379}
.checkout-payment input[type="file"]::file-selector-button{margin-right:12px;padding:7px 12px;font-family:"Kanit OHBE",sans-serif;font-weight:500;color:#24425f;background:#eef5fb;border:1px solid #bfd0df;border-radius:4px;cursor:pointer}
.checkout-payment input[type="file"]::file-selector-button:hover{background:#dfedf8;border-color:#95bad7}

/* Signed-in username, without exposing the internal numeric account ID. */
.signed-user{display:flex;min-width:120px;padding:7px 12px;flex-direction:column;justify-content:center;border-left:1px solid #d8e3ed;color:#617187;line-height:1.15;transition:color .2s ease,border-color .2s ease}
.signed-user small{font-size:9px;font-weight:500;color:inherit}
.signed-user strong{max-width:160px;margin-top:3px;overflow:hidden;color:#173b63;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.signed-user:hover{color:#288ed0;border-color:#7ec8f4}
.page-home .signed-user{border-color:rgba(99,169,222,.25);color:#8ea8c3}
.page-home .signed-user strong{color:#d9efff;text-shadow:0 2px 7px rgba(0,0,0,.45)}
.page-home .signed-user:hover{color:#72caff;border-color:#3eb5ff}
.page-home .topbar:has(.signed-user) nav{gap:18px}
.page-home .topbar:has(.signed-user) nav>a{min-width:100px}
@media(max-width:1100px){.signed-user{display:none}}

/* Redeem codes must be easy to find, read, and copy. */
.page-dashboard #redeem .code-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;margin-top:14px;padding:38px 18px 16px;border:1px solid #bfd8eb;border-radius:6px;background:linear-gradient(180deg,#fff,#f5faff);box-shadow:0 10px 26px rgba(30,86,132,.08)}
.page-dashboard #redeem .code-row:before{content:"โค้ดที่ได้รับ";position:absolute;left:18px;top:12px;color:#687b90;font-family:"Kanit OHBE",sans-serif;font-size:11px;font-weight:500}
.page-dashboard #redeem .code-row code{display:block;overflow:hidden;color:#123f6d;font-family:Consolas,"Courier New",monospace;font-size:18px;font-weight:700;letter-spacing:.5px;text-overflow:ellipsis;white-space:nowrap}
.copy-code{min-height:36px;padding:0 14px;color:#176da8;background:#e8f5ff;border:1px solid #a9d4ef;border-radius:5px;font-family:"Kanit OHBE",sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.copy-code:hover{background:#d8efff;border-color:#70bde9;transform:translateY(-1px)}
.copy-code.copied{color:#087c52;background:#ddf7ec;border-color:#9bd8c1}
@media(max-width:650px){.page-dashboard #redeem .code-row{grid-template-columns:1fr auto}.page-dashboard #redeem .code-row code{grid-column:1/-1;font-size:15px;white-space:normal;overflow-wrap:anywhere}}
.redeem-ready,.redeem-history{margin-top:28px}.redeem-ready h3,.redeem-history h3{margin:0 0 12px;color:#1d3654;font-size:17px;font-weight:600}.redeem-empty{padding:20px;text-align:center;color:#718196;background:#fff;border:1px dashed #c9d8e5;border-radius:6px}.used-code-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 18px;margin-top:10px;background:#f8fafc;border:1px solid #dce5ef;border-radius:6px}.used-code-row code{display:block;color:#718196;font-family:Consolas,"Courier New",monospace;font-size:14px}.used-code-row small{display:block;margin-top:5px;color:#8a96a5;font-size:11px}.used-code-row .status{flex:0 0 auto}@media(max-width:650px){.used-code-row{align-items:flex-start;flex-direction:column}.used-code-row code{overflow-wrap:anywhere}}

.delete-action{color:#b52f3f!important;background:#fff1f3!important;border-color:#efb7bf!important}
.delete-action:hover{color:#fff!important;background:#cf4050!important;border-color:#cf4050!important}

/* Stable image frames and upload guidance. */
.package{overflow:hidden}
.package-image{display:block;width:calc(100% + 56px);height:auto;aspect-ratio:2/1;margin:-28px -28px 20px;object-fit:cover;object-position:center;border-radius:6px 6px 0 0}
.upload-hint{display:block;margin-top:7px;color:#718196!important;font-size:10px!important;font-weight:400!important;line-height:1.45}
.admin-editor input[type="file"]{min-height:46px}

/* Monthly revenue reporting. */
.revenue-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.revenue-summary article{padding:20px;background:#fff;border:1px solid var(--line);border-radius:7px;box-shadow:0 10px 28px rgba(31,68,104,.06)}
.revenue-summary span{display:block;margin-bottom:8px;color:#718095;font-size:11px;font-weight:500}
.revenue-summary strong{display:block;color:#173b63;font-size:24px;font-weight:600;line-height:1.2}
.revenue-summary article:first-child{border-color:#a9d7f3;background:linear-gradient(145deg,#fff,#eef8ff)}
.revenue-summary article:first-child strong{color:#1679bd;font-size:28px}
.revenue-value{color:#147abf;font-weight:600}
.revenue-bar{width:150px;height:7px;overflow:hidden;background:#e6edf4;border-radius:7px}
.revenue-bar i{display:block;height:100%;background:linear-gradient(90deg,#268bd2,#60c7f5);border-radius:7px;box-shadow:0 0 8px rgba(38,139,210,.28)}
.revenue-note{margin:12px 2px 0;color:#768599;font-size:11px}
@media(max-width:850px){.revenue-summary{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.revenue-summary{grid-template-columns:1fr}.revenue-bar{width:100px}}
.revenue-section .section-head{align-items:center}
.revenue-reset{margin:0;color:#a82f3d;background:#fff3f4;border-color:#edb8bf}
.revenue-reset:hover{color:#fff;background:#c83e4e;border-color:#c83e4e}

/* Keep the logo baked into the 4:3 hero image clear of the widescreen header. */
@media(min-width:901px){
  .page-home .hero{background-position:center 16%}
  .page-home .hero:before{background:linear-gradient(180deg,rgba(0,8,24,.24) 0,rgba(0,8,24,.04) 16%,rgba(0,7,20,.02) 62%,rgba(0,7,18,.32) 100%)}
}