*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#183454;background:#f5f7fa;font-size:15px}.demo{position:relative;padding:10px 18px;text-align:center;font-size:11px;background:#fff0e8;color:#9b3b0a;letter-spacing:.3px;z-index:5}aside{position:fixed;top:33px;bottom:0;width:255px;background:#102e52;color:white;padding:28px 24px;display:flex;flex-direction:column}.brand{padding:12px;background:white;border-radius:8px}.brand img{width:100%;display:block}.club{margin:26px 0 36px;font-size:11px;line-height:1.8;letter-spacing:1.4px}.club strong{font-size:23px;letter-spacing:1px}.club span{color:#ff581d;margin-left:12px}aside small{font-size:9px;letter-spacing:1.5px;color:#92a9c3;margin-bottom:14px}nav{display:grid;gap:7px}button,a,select,input,textarea{font:inherit}button{cursor:pointer;border:0;border-radius:8px;padding:12px 17px;background:#f35520;color:white;font-weight:600}button:disabled{cursor:not-allowed;opacity:.5}nav button{background:transparent;color:#bdcddd;text-align:left;font-size:14px;font-weight:400}nav button.active{background:#254366;color:white;border-left:3px solid #ff5b21}nav button span{display:inline-block;width:27px}.sidefoot{margin-top:auto;color:#e5edf6;line-height:1.5;font-size:17px}.sidefoot div{font-size:10px;color:#92a9c3;margin-top:18px}.shell{margin-left:255px}header{height:83px;background:white;border-bottom:1px solid #e5eaf1;display:flex;align-items:center;justify-content:space-between;padding:0 38px}header>span{font-size:13px}.switch{font-size:10px;color:#657991;display:flex;align-items:center;gap:12px}select{padding:10px;border:1px solid #dae2eb;border-radius:7px;color:#183454;background:white;font-size:12px}main{max-width:1350px;margin:auto;padding:34px 38px 50px}h1{font-size:30px;letter-spacing:-1px;margin:0 0 10px}h2{font-size:19px;margin:0 0 12px}h3{font-size:16px;margin:0 0 9px}p{color:#6a7c90;line-height:1.6;margin:0 0 20px}.eyebrow{font-size:10px;letter-spacing:1.5px;color:#f35520;font-weight:bold;margin-bottom:12px}.top{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:25px}.top p{margin:0}.hero{border-radius:14px;background:#15375f;color:white;padding:32px;display:flex;justify-content:space-between;align-items:center;gap:25px;position:relative;overflow:hidden;margin-bottom:23px}.hero h2{font-size:28px;max-width:420px;line-height:1.2}.hero p{color:#bdcfe2;max-width:420px;font-size:13px;margin-bottom:22px}.hero .eyebrow{color:#ff956e}.hero .gift{font-size:75px;transform:rotate(-12deg);padding:18px 40px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:25px}.stat,.card{background:white;border:1px solid #e4e9ef;border-radius:12px;padding:23px}.stat small{color:#6a7c90;font-size:12px}.stat strong{display:block;font-size:30px;margin:12px 0 5px}.stat em{font-style:normal;color:#8492a3;font-size:11px}.stat:first-child strong{color:#ed581f}.grid{display:grid;grid-template-columns:1.55fr 1fr;gap:22px}.sectiontitle{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.sectiontitle h2{margin:0}.link{background:none;color:#ed581f;font-size:12px;padding:0}.row{padding:15px 0;border-bottom:1px solid #eef1f5;display:flex;justify-content:space-between;align-items:center;gap:15px}.row:last-child{border:0}.row p{font-size:12px;margin:5px 0 0}.badge{font-size:10px;border-radius:20px;padding:6px 10px;white-space:nowrap;background:#fff1dc;color:#94600d}.badge.approved,.badge.delivered{background:#e5f5ec;color:#248159}.badge.rejected{background:#ffeded;color:#b14141}.badge.review{background:#eaf0fc;color:#4569a4}.muted{color:#7a8da2;font-size:12px}.progress{height:7px;border-radius:10px;background:#edf0f4;margin:20px 0 10px;overflow:hidden}.progress i{display:block;background:#f35a24;height:100%;border-radius:10px}.rewardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.rewardart{height:145px;display:grid;place-items:center;background:#f1f5f9;border-radius:9px;font-size:65px;margin-bottom:20px}.rewardcard strong.points{display:block;color:#f35520;margin:15px 0}.rewardcard p{font-size:12px;min-height:38px}.rewardcard button{width:100%}.ghost{background:#edf2f7;color:#234364}.filters{display:flex;gap:12px;margin:20px 0;flex-wrap:wrap}input,textarea{border:1px solid #d6e0ea;background:white;border-radius:7px;padding:12px;color:#173454;width:100%}.filters input{max-width:370px}table{width:100%;border-collapse:collapse;font-size:13px;text-align:left}th{font-size:10px;letter-spacing:.5px;color:#7a8b9d;background:#f7f9fb}td,th{padding:17px 12px;border-bottom:1px solid #edf0f4}td small{display:block;color:#7c8d9f;margin-top:5px}.tablewrap{overflow:auto}.actions{display:flex;gap:7px}.actions button{font-size:11px;padding:8px 11px}.empty{text-align:center;padding:45px;color:#6a7c90}.timeline{border-left:2px solid #e1e8f0;padding-left:22px;margin:20px 0}.timeline div{padding:0 0 22px}.timeline p{font-size:12px;margin:5px 0}footer{padding:20px 38px;color:#8392a3;font-size:10px;border-top:1px solid #e6ebf1}dialog{border:0;border-radius:16px;padding:30px;width:min(540px,94vw);color:#183454;box-shadow:0 20px 90px #001c4766}dialog::backdrop{background:#0a234b80}.close{float:right;background:#eef2f6;color:#294766;font-size:23px;padding:0;width:30px;height:30px}form label{display:block;font-size:12px;font-weight:bold;margin:16px 0}form label input,form label textarea,form label select{display:block;margin-top:7px;width:100%;font-weight:normal}form .check{display:flex;align-items:flex-start;gap:8px;font-weight:normal;line-height:1.5}form .check input{width:auto;margin:3px 0}form button[type=submit]{width:100%;margin-top:10px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#163c5d;color:white;padding:15px 24px;border-radius:10px;display:none;z-index:20;box-shadow:0 5px 30px #102c5444}.note{border-left:3px solid #f35b21;background:#fff5ef;padding:14px;font-size:12px;color:#885033;line-height:1.6;margin:20px 0}.profile{display:flex;gap:13px;align-items:center}.avatar{width:42px;height:42px;background:#e8eff8;color:#24476d;border-radius:50%;display:grid;place-items:center;font-weight:bold}.rule{padding:15px 0;border-bottom:1px solid #eef1f5}.rule b{display:block;margin-bottom:8px}.rule p{font-size:13px;margin:0}.balance{font-size:40px;color:#f35b21;margin:10px 0}.full{width:100%}@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}.rewardgrid{grid-template-columns:repeat(2,1fr)}.hero .gift{padding:0}}@media(max-width:760px){aside{position:static;width:auto;padding:18px;display:block}.brand{width:175px}.club{margin:13px 0;font-size:9px}.club strong{font-size:18px}.sidefoot,aside small{display:none}nav{display:flex;overflow:auto;gap:5px}nav button{white-space:nowrap;font-size:12px;padding:10px}.shell{margin:0}header{height:auto;padding:16px;gap:10px;flex-wrap:wrap}.switch{flex-wrap:wrap}main{padding:24px 17px}.top{align-items:flex-start;flex-direction:column}h1{font-size:26px}.hero{padding:24px}.hero h2{font-size:24px}.hero .gift{display:none}.stat{padding:17px}.stats{gap:10px}.rewardgrid{grid-template-columns:1fr}.card{padding:20px}footer{padding:20px}.demo{font-size:9px}td,th{padding:13px 9px}.top button{width:100%}}

.rewardart img{width:100%;height:100%;object-fit:contain;display:block}.rewardart{overflow:hidden}.photo-preview{height:180px;margin-bottom:12px}.photo-preview img{max-height:180px}input[type=file]{font-size:12px}

/* Brand expression: same layout, more light, color and movement. */
body{background-color:#f4f7fc;background-image:radial-gradient(ellipse at 92% 8%,#ff74331a,transparent 44%),radial-gradient(ellipse at 22% 58%,#17569b12,transparent 50%);background-attachment:fixed}
aside{background:radial-gradient(ellipse at 100% 80%,#244d7922,transparent 70%),linear-gradient(155deg,#193e69,#0a2344);box-shadow:8px 0 35px #0b254415;overflow:hidden}
aside:before{content:"";position:absolute;pointer-events:none;width:180px;height:350px;right:-120px;bottom:40px;border:1px solid #ff763447;border-radius:100px;transform:rotate(35deg)}
.brand{border-radius:15px;box-shadow:0 10px 28px #00193633;border:1px solid #ffffff66}
.club{position:relative}.club strong{color:#fff;font-size:26px}.club span{color:#ff7745}
nav button{transition:background .2s,transform .2s,color .2s;border-radius:10px}nav button:hover{background:#ffffff0d;color:#fff;transform:translateX(3px)}nav button.active{background:linear-gradient(95deg,#fa642928,#ffffff0b);box-shadow:inset 0 0 0 1px #ffffff0c;border-left:3px solid #ff713e}
.sidefoot{font-size:16px;position:relative}.sidefoot strong{color:#ff986d;font-weight:600}.purpose-star{display:block;font-size:30px;color:#ff7b40;margin-bottom:12px;animation:starPulse 5s ease-in-out infinite}
header{background:#ffffffed;backdrop-filter:blur(12px)}header>span{color:#61758d}.switch select{border-radius:10px;background:#f5f8fc}
.hero{background:radial-gradient(ellipse at 94% 25%,#245c98,transparent 58%),linear-gradient(115deg,#102f55,#173e68);border:1px solid #ffffff40;box-shadow:0 16px 40px #183e681c;min-height:255px;isolation:isolate}
.hero:before,.hero:after{content:"";position:absolute;z-index:-1;pointer-events:none;border:1px solid #ffffff13;border-radius:50%;width:320px;height:320px;right:-40px;top:-80px;animation:haloDrift 16s ease-in-out infinite}.hero:after{width:440px;height:440px;right:-100px;top:-140px;border-color:#ff8a3528;animation-delay:-8s}
.hero h2{letter-spacing:-.6px;font-size:30px;max-width:440px}.hero p{color:#c5d5e8}.hero .eyebrow{color:#ffac86;letter-spacing:1.8px;font-size:10px}
button{transition:transform .18s,box-shadow .18s,background .18s}button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 6px 16px #1733541a}button:not(:disabled):active{transform:translateY(0)}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ff9b64;outline-offset:3px}
.hero button,button[data-action=new],#savereward{background:linear-gradient(110deg,#ff753c,#f34e17);box-shadow:0 7px 22px #fa632536}.hero .gift{position:relative;width:190px;height:190px;flex-shrink:0;padding:0;display:grid;place-items:center;transform:none}
.gift-box{font-size:82px;filter:drop-shadow(0 14px 20px #00163155);animation:giftFloat 6s ease-in-out infinite}.reward-star{position:absolute;color:#ffa26a;font-size:34px;animation:starPulse 5s ease-in-out infinite}.star-one{top:10px;right:10px}.star-two{bottom:55px;left:0;font-size:25px;animation-delay:-2s}.reward-label{position:absolute;bottom:0;text-align:center;font-size:8px;letter-spacing:1.8px;line-height:1.8;color:#c4d7ec}
.stat,.card{border-radius:16px;border-color:#e1e8f2;box-shadow:0 5px 20px #183b6013}.stat{position:relative;overflow:hidden;transition:transform .25s,box-shadow .25s}.stat:hover{transform:translateY(-4px);box-shadow:0 12px 30px #193b6020}.stat:before{content:"";position:absolute;left:0;top:22px;width:3px;height:28px;border-radius:0 4px 4px 0;background:#668cb6}.stat:first-child{background:linear-gradient(135deg,#fff,#fff5ef);border-color:#ffddc8}.stat:first-child:before{background:#ff7437}.stat strong{letter-spacing:-1px}.stat:first-child strong{color:#f05b24}
.rewardcard{transition:transform .25s,box-shadow .25s}.rewardcard:hover{transform:translateY(-5px);box-shadow:0 18px 38px #163a601c}.rewardart{background:radial-gradient(ellipse at 65% 20%,#ffe4cd80,transparent 65%),linear-gradient(145deg,#f1f6fc,#eaf0f8);border:1px solid #e5eaf4;border-radius:12px}.rewardart img{background:#fff}.rewardcard strong.points{background:#fff1e8;display:inline-block;padding:7px 12px;border-radius:30px;font-size:13px}
.progress i{background:linear-gradient(90deg,#ff9a50,#f55321);transition:width .5s}.badge{font-weight:600}.avatar{background:linear-gradient(135deg,#e9f1fc,#ffe8da)}.note{border-radius:0 10px 10px 0}dialog{border:1px solid #ffffffaa;box-shadow:0 25px 100px #06234755}dialog[open]{animation:dialogEnter .2s ease-out}.footer-purpose{float:right;color:#e77540;font-weight:600}
@keyframes giftFloat{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-10px) rotate(3deg)}}@keyframes starPulse{0%,100%{opacity:.6;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}@keyframes haloDrift{0%,100%{transform:translate(0,0)}50%{transform:translate(-16px,15px)}}@keyframes dialogEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){.hero h2{font-size:25px}.hero .gift{display:none}.footer-purpose{float:none;display:block;margin-top:10px}.club strong{font-size:22px}aside:before{display:none}header{backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
[hidden]{display:none!important}

aside{top:0}.signed-out aside,.signed-out .shell{display:none}body:not(.signed-out) #authscreen{display:none}.authscreen{min-height:100vh;display:grid;place-items:center;padding:30px 18px;background:radial-gradient(ellipse at 10% 30%,#2b5984,transparent 60%),linear-gradient(135deg,#102e52,#071f3e)}.authcard{background:white;border-radius:22px;width:100%;max-width:470px;padding:30px;box-shadow:0 25px 80px #00162d66}.authcard .authlogo{display:block;width:220px;max-width:100%;margin:0 auto 25px}.authcard h1{font-size:27px;line-height:1.2}.authcard .eyebrow{font-size:10px}.authcard p{font-size:13px}.authcard label{font-size:12px}.authcard .authlinks{display:flex;gap:16px;justify-content:center;margin-top:22px}.authcard .authpurpose{text-align:center;color:#f35b21;font-size:12px;margin-top:26px;margin-bottom:0}.authcard .message{background:#fff1e7;padding:12px;border-radius:8px;color:#93401a;font-size:12px;line-height:1.5;margin:14px 0}.authcard .success{color:#237555;background:#ecf9f0}.account-actions{display:flex;gap:8px}.account-actions button{font-size:12px;padding:9px 12px}@media(max-width:760px){aside{top:auto}.authcard{padding:25px}.authscreen{padding:20px 14px}}

.password-field{position:relative;display:block}
.password-field input{padding-right:54px;width:100%;box-sizing:border-box}
.authcard .password-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;margin:0;border:0;border-radius:8px;background:transparent;color:#244361;box-shadow:none;cursor:pointer}
.authcard .password-toggle:hover{background:#edf3f8;color:#ff591f;transform:translateY(-50%)}
.authcard .password-toggle:focus-visible{outline:2px solid #ff591f;outline-offset:1px}
.password-toggle svg{width:23px;height:23px}
.password-toggle .eye-slash{display:none}
.password-toggle[aria-pressed="true"] .eye-slash{display:block}