:root{--bg:#020d1a;--panel:#061c32;--panel2:#0a2b4b;--gold:#ffd66e;--gold2:#b67a18;--text:#fff;--muted:#a9bfd6;--line:#3a6c93;--green:#24d39c;--red:#ff6975;--cyan:#5fc8ff;--shadow:0 16px 50px #000a,0 0 24px #d79b2330}*{box-sizing:border-box}body{margin:0;font-family:"Noto Sans Thai",Tahoma,Inter,system-ui,sans-serif;background:radial-gradient(circle at 75% 0,#123f70 0,#041426 36%,#010812 100%);color:var(--text);min-height:100vh}.shell{display:grid;grid-template-columns:270px 1fr;min-height:100vh}.side{padding:25px 17px;border-right:1px solid #31516e;background:linear-gradient(180deg,#041526f7,#020a13f7);position:sticky;top:0;height:100vh}.brand{font-size:29px;font-weight:1000;color:var(--gold);letter-spacing:1px;text-shadow:0 0 20px #e3a72c55}.tag{font-size:10px;letter-spacing:3px;color:#d5e3f0}.nav{margin-top:28px;display:grid;gap:7px}.nav button{all:unset;padding:12px 14px;border-radius:14px;cursor:pointer;color:#d8e5f2;border:1px solid transparent}.nav button:hover,.nav button.active{background:linear-gradient(90deg,#173b63,#0b2745);color:#fff;border-color:#8e6a2c;box-shadow:inset 4px 0 var(--gold),0 0 20px #dba62b18}.main{padding:25px 30px 95px;max-width:1380px;width:100%;margin:auto}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.title h1{margin:0;font-size:28px}.title p{margin:4px 0;color:var(--muted)}.pill,.btn{border:1px solid #537897;background:linear-gradient(180deg,#103454,#08213b);color:white;border-radius:12px;padding:10px 14px}.btn{cursor:pointer}.btn.gold{background:linear-gradient(135deg,#fff0a7,#efc251 48%,#aa7216);color:#17130a;border:1px solid #fff2ae;font-weight:900;box-shadow:0 0 18px #e9b83b44}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{background:linear-gradient(150deg,#0c2a48,#05192d);border:1px solid #35658b;border-radius:19px;padding:17px;box-shadow:var(--shadow)}.metric{border-top:2px solid #d9aa45}.metric b{font-size:29px;display:block;color:#fff}.metric span{color:var(--muted);font-size:13px}.wide{grid-column:span 2}.full{grid-column:1/-1}.hero{min-height:210px;background:linear-gradient(100deg,#031328e8,#061a3060),url('public/products/pollitin-premium.jpg') center/cover;border:1px solid #b98b37;border-radius:22px;padding:27px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--shadow)}.hero h2{font-size:31px;margin:0;text-shadow:0 2px 8px #000}.hero p{max-width:700px;color:#e8f1fb}.list{display:grid;gap:9px}.row{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#fdfefe,#e8f1f8);color:#132236;padding:12px;border-radius:13px;border:1px solid #dce7f1}.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#173f66,#071b31);color:var(--gold);font-weight:900;border:2px solid #e4b64d}.grow{flex:1}.small{font-size:12px;color:#6b7e91}.badge{padding:5px 9px;border-radius:999px;font-size:11px;background:#dff8ef;color:#0a765b}.badge.red{background:#ffe1e4;color:#b52132}.badge.gold{background:#fff0c7;color:#835c00}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.tabs button{border:1px solid #416a8c;background:#0a2947;color:#d8e8f7;padding:8px 12px;border-radius:10px}.tabs button.active{background:linear-gradient(135deg,#ffe991,#d7a432);color:#17202a;border-color:#ffe9a0;font-weight:800}.profile{display:flex;align-items:center;gap:18px}.profile .avatar{width:86px;height:86px;font-size:28px}.progress{height:11px;background:#203b53;border-radius:99px;overflow:hidden;border:1px solid #38556b}.progress i{display:block;height:100%;background:linear-gradient(90deg,#c28a24,#ffe58c);width:60%}.products{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.product{background:#fff;color:#142438;border-radius:16px;overflow:hidden;border:1px solid #d6a947;box-shadow:0 12px 30px #0007}.product img{width:100%;aspect-ratio:1/1;object-fit:cover}.product div{padding:10px}.input{width:100%;padding:11px;border-radius:10px;border:1px solid #477294;background:#061a2f;color:white}.form{display:grid;grid-template-columns:1fr 1fr;gap:10px}.note{background:#fff;color:#17283b;border-radius:14px;padding:15px}.bottom{display:none}
@media(max-width:900px){body{background:radial-gradient(circle at 50% -5%,#164f82 0,#031529 33%,#010914 100%)}.shell{display:block}.side{display:none}.main{padding:13px 10px 90px;max-width:520px}.top{margin:0 2px 12px;padding:8px 5px;border-bottom:1px solid #315775}.title h1{font-size:22px}.title p{font-size:11px}.pill{font-size:10px;padding:8px}.grid{grid-template-columns:repeat(2,1fr);gap:9px}.wide{grid-column:span 2}.card{padding:12px;border-radius:16px}.metric b{font-size:23px}.hero{min-height:170px;padding:17px;border-radius:17px}.hero h2{font-size:22px}.hero p{font-size:12px}.products{grid-template-columns:repeat(2,1fr);gap:9px}.bottom{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,520px);display:flex;justify-content:space-around;background:linear-gradient(180deg,#061b31fa,#020b16fc);border:1px solid #6d572b;border-bottom:0;padding:8px 4px 7px;z-index:50;box-shadow:0 -8px 30px #0008}.bottom button{all:unset;color:#c8d9e8;font-size:10px;text-align:center;min-width:54px;cursor:pointer}.bottom b{display:block;font-size:18px;margin-bottom:2px}.bottom button:hover{color:var(--gold)}.form{grid-template-columns:1fr}.row{padding:10px}.profile .avatar{width:70px;height:70px}.products .btn{padding:7px 9px}.full{grid-column:1/-1}}
@media(max-width:520px){.main{padding-left:8px;padding-right:8px}.hero{min-height:155px}.hero h2{font-size:20px}.card{padding:11px}.top .pill{display:none}.products{grid-template-columns:1fr 1fr}.tabs{gap:5px}.tabs button{padding:7px 9px;font-size:11px}}
/* V1.8.2 MASTER PREMIUM refinement */
:root{--master-gold:#f7cf63;--master-deep:#00101f;--master-blue:#052a4b;--master-line:#d7aa45}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 85% 10%,#1a5b9528,transparent 28%),linear-gradient(120deg,transparent 0 70%,#d9a93a08);z-index:-1}
.brand{display:flex;align-items:center;gap:10px}.kelite-logo{display:block;width:54px;height:54px;object-fit:cover;object-position:center;border-radius:12px;border:1px solid #f6d67a;box-shadow:0 0 22px #f4c95c66}.brand span{line-height:1}.brand-pill{display:flex;align-items:center;gap:8px}.kelite-logo.mini{width:32px;height:32px;border-radius:8px}.game-brand-mark{position:absolute;left:24px;top:20px;z-index:2}.kelite-logo.game-logo{width:118px;height:82px;object-fit:cover;border-radius:16px;border:2px solid #f6d67a;box-shadow:0 0 28px #3c9cff66,0 0 22px #f4c95c55}.game-hero>div:nth-child(2){padding-left:136px}
.card,.hero{position:relative;overflow:hidden}.card:after,.hero:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 1px #ffffff18,inset 0 0 28px #3f8ed315}.card h3{margin-top:0;color:#f8fbff}.btn{font-weight:800}.row{transition:.15s transform,.15s box-shadow}.row:hover{transform:translateY(-1px);box-shadow:0 8px 20px #0003}.avatar{box-shadow:0 0 0 3px #09233b,0 0 18px #f3c55740}.master-kicker{color:var(--gold);font-size:11px;letter-spacing:1.6px;font-weight:900}.quick6{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.quick6 button{min-height:76px;border:1px solid #b88b37;border-radius:14px;background:linear-gradient(150deg,#0b3153,#03182b);color:#fff;font-weight:800;cursor:pointer;box-shadow:inset 0 0 16px #4f98d11c}.quick6 b{display:block;font-size:24px;color:var(--gold);margin-bottom:5px}.dream-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.dream-tile{min-height:150px;border-radius:17px;padding:15px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid #b88a37;background:linear-gradient(0deg,#02101fea,#0c31508c),radial-gradient(circle at 70% 20%,#d9ad4b44,transparent 35%),#0a2a48}.dream-tile strong{font-size:18px}.health-table{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#356084;border:1px solid #356084;border-radius:14px;overflow:hidden}.health-table>div{background:#061c31;padding:12px}.health-table small{display:block;color:#8caac3}.timeline{position:relative;padding-left:18px}.timeline:before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:linear-gradient(#f5c957,#3984be)}.timeline-item{position:relative;padding:10px 10px 10px 14px;margin-bottom:8px;background:#08243e;border:1px solid #315f83;border-radius:12px}.timeline-item:before{content:"";position:absolute;left:-18px;top:17px;width:9px;height:9px;border-radius:50%;background:#f6cf63;box-shadow:0 0 10px #f6cf63}.settings-row{display:flex;align-items:center;gap:12px;padding:15px 4px;border-bottom:1px solid #214867}.settings-row .setting-icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#0c3153;color:var(--gold);border:1px solid #5d6f74}.learn-thumb{position:relative}.learn-thumb:after{content:'▶';position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:28px;text-shadow:0 2px 8px #000;background:#00102022}
@media(max-width:900px){.main{padding-top:7px}.top{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,#031426fa,#031426e8);backdrop-filter:blur(10px);margin-left:-8px;margin-right:-8px;padding:10px 12px}.top:before{content:'K';width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;margin-right:9px;background:linear-gradient(145deg,#fff0a4,#dca52e);color:#08213b;font-weight:1000;font-size:23px;box-shadow:0 0 14px #e6b23e55}.title{flex:1}.title h1{font-size:19px}.title p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:250px}.hero{border-width:1.5px;box-shadow:0 12px 30px #0008,0 0 20px #d4a54122}.quick6{grid-template-columns:repeat(3,1fr)}.quick6 button{min-height:70px;font-size:11px}.dream-grid{grid-template-columns:repeat(2,1fr)}.dream-tile{min-height:130px}.bottom{border-color:#c1953d;border-radius:18px 18px 0 0}.bottom button{padding:2px 3px}.bottom button b{color:#e6bd58}.bottom button:hover b{filter:drop-shadow(0 0 6px #f7d46c)}}
/* V1.8.3 mobile master polish */
.member-head{display:flex;gap:12px;align-items:center}.member-head .avatar{width:58px;height:58px}.member-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}.member-stats>div{padding:9px;border-radius:12px;background:#082641;border:1px solid #315f83;text-align:center}.member-stats b{display:block;color:var(--gold);font-size:18px}.member-stats small{color:var(--muted)}.catalog-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.sku{display:inline-block;margin-top:6px;font-size:10px;padding:4px 7px;border-radius:99px;background:#0a3152;color:#f7d66d;border:1px solid #745e2c}.product .btn{width:100%}.master-note{border-left:3px solid var(--gold);padding-left:10px}.setting-title{font-size:16px}.section-label{font-size:12px;color:var(--gold);font-weight:900;letter-spacing:.5px;margin:14px 2px 8px}
@media(max-width:900px){.card{box-shadow:0 9px 28px #0007,0 0 12px #d6a84418}.row{border-color:#cfdae4}.member-stats{grid-template-columns:repeat(3,1fr)}.member-stats b{font-size:16px}.products .product{border-radius:14px}.products .product img{aspect-ratio:1.25/1}.product div{padding:9px}.product b{font-size:13px}.health-table>div{padding:10px}.settings-row{padding:13px 3px}}

/* V1.8.4 functional premium refinement */
.bottom button.active{color:var(--gold)}.bottom button.active b{filter:drop-shadow(0 0 7px #f7d46c)}
.product{transition:transform .18s ease,box-shadow .18s ease}.product:hover{transform:translateY(-3px);box-shadow:0 16px 36px #0009,0 0 18px #e1b74a28}
.product .small{min-height:32px}.section-label{display:flex;align-items:center;gap:8px}.section-label:before{content:'';width:22px;height:2px;background:var(--gold)}
@media(max-width:520px){.products{grid-template-columns:1fr 1fr}.product .learn-thumb img{aspect-ratio:1/1;object-fit:cover}.product b{font-size:12px}.product .small{font-size:10px}.product .btn{font-size:10px}.tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:3px}.tabs button{white-space:nowrap}}

/* V1.8.5 LEARNING GAME */
.game-hero{display:grid;grid-template-columns:1fr 190px;gap:16px;align-items:center;padding:22px;border:1px solid #d5aa48;border-radius:22px;background:radial-gradient(circle at 85% 20%,#e2b84835,transparent 28%),linear-gradient(135deg,#082c4d,#031426);box-shadow:0 16px 38px #0008}.game-hero h2{font-size:30px;margin:7px 0}.game-hero p{color:#bdd1e3}.game-score{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#031222aa;border:1px solid #876d34;border-radius:18px;padding:18px;text-align:center}.game-score b{font-size:24px;color:var(--gold)}.game-score span{font-size:10px;color:var(--muted)}.game-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}.game-panel{margin:14px 0;padding:18px;border-radius:20px;border:1px solid #b68c3d;background:linear-gradient(145deg,#092c4c,#031528);box-shadow:0 15px 35px #0008}.game-progress{height:8px;border-radius:99px;background:#142f45;overflow:hidden}.game-progress i{display:block;height:100%;background:linear-gradient(90deg,#d39c2d,#ffe58c)}.game-head{display:flex;justify-content:space-between;margin:12px 0;color:var(--gold)}.game-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.game-choice{cursor:pointer;border:1px solid #4a6f8d;border-radius:16px;padding:8px;background:#fff;color:#132438;text-align:left;transition:.15s}.game-choice:hover{transform:translateY(-4px);border-color:#e4b84f;box-shadow:0 10px 25px #0008}.game-choice img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:11px}.game-choice b,.game-choice small{display:block;margin-top:5px}.game-choice small{color:#607386}.feedback,.game-finish{margin:14px 0;padding:25px;border-radius:20px;text-align:center;border:1px solid #54718b;background:#082842}.feedback b,.feedback span{display:block}.feedback b{font-size:25px;margin-bottom:7px}.feedback.ok b{color:#72e7a8}.feedback.no b{color:#ff9b9b}.game-finish{border-color:#c99b3e}.game-finish .trophy{font-size:55px;color:var(--gold);filter:drop-shadow(0 0 12px #e3b547)}
@media(max-width:900px){.game-hero{grid-template-columns:1fr}.game-score{grid-template-columns:repeat(4,1fr)}.game-stats{grid-template-columns:repeat(2,1fr)}.game-grid{grid-template-columns:repeat(2,1fr)}.game-choice b{font-size:12px}.game-hero h2{font-size:24px}}
/* V1.8.6 PREMIUM GAME - action puzzle upgrade */
.game-actions{display:flex;gap:8px;flex-wrap:wrap}.game-mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.game-mode-cards button{min-height:105px;text-align:left;padding:18px;border-radius:18px;border:1px solid #9b7835;background:linear-gradient(135deg,#0d3558,#041729);color:#fff;cursor:pointer;box-shadow:0 12px 28px #0007;transition:.18s}.game-mode-cards button:hover{transform:translateY(-3px);border-color:#f3cb67}.game-mode-cards b,.game-mode-cards span{display:block}.game-mode-cards b{color:var(--gold);font-size:18px;margin-bottom:8px}.game-mode-cards span{color:#bad0e2}.puzzle-panel{margin:14px 0;padding:18px;border:1px solid #c69a40;border-radius:22px;background:radial-gradient(circle at 50% 0,#174d7938,transparent 35%),linear-gradient(145deg,#082943,#02111f);box-shadow:0 18px 42px #0009}.puzzle-hud{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.puzzle-hud>div{text-align:center;padding:10px;border:1px solid #426984;border-radius:13px;background:#041729}.puzzle-hud small,.puzzle-hud b{display:block}.puzzle-hud small{color:#9bb5ca}.puzzle-hud b{font-size:24px;color:var(--gold)}.puzzle-rule{text-align:center;margin:10px 0 14px;color:#d9e8f4}.puzzle-board{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:13px}.puzzle-tile{position:relative;min-width:0;padding:5px;border-radius:13px;border:1px solid #426b8c;background:#fff;color:#14273a;cursor:pointer;overflow:hidden;transition:.15s transform,.15s box-shadow}.puzzle-tile:hover{transform:scale(1.03)}.puzzle-tile.selected{outline:3px solid #ffd65c;transform:translateY(-4px);box-shadow:0 0 22px #ffd65c66}.puzzle-tile.matched{opacity:.2;filter:grayscale(1);transform:scale(.92)}.puzzle-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px}.puzzle-tile span{display:block;font-size:10px;font-weight:800;padding:4px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.badge-line{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px}.badge-line span{padding:6px 10px;border-radius:99px;background:#132f46;border:1px solid #a27c34;color:#f7d36c}
@media(max-width:900px){.puzzle-board{grid-template-columns:repeat(3,1fr)}.game-mode-cards{grid-template-columns:1fr}.puzzle-tile span{font-size:9px}.game-score{grid-template-columns:repeat(4,1fr)}}

/* V1.8.7 ACTION LEARNING */
.game-mode-cards{grid-template-columns:repeat(3,1fr)}.flash-target{text-align:center;padding:14px;margin:10px 0 14px;border-radius:16px;background:linear-gradient(135deg,#5b2a08,#9b4c0b22);border:1px solid #d99b3c}.flash-target small,.flash-target strong{display:block}.flash-target small{color:#f6c86a}.flash-target strong{font-size:22px;margin-top:4px}.flash-board .puzzle-tile{animation:flashIn .18s ease}.flash-panel{box-shadow:0 18px 44px #0009,0 0 26px #e6a53625}@keyframes flashIn{from{transform:scale(.88);opacity:.4}to{transform:scale(1);opacity:1}}@media(max-width:900px){.game-mode-cards{grid-template-columns:1fr}.flash-target strong{font-size:18px}}

/* V1.8.8 STAGE ADVENTURE */
.stage-map,.daily-card{margin:14px 0;padding:18px;border:1px solid rgba(212,175,55,.28);border-radius:22px;background:linear-gradient(145deg,rgba(16,34,65,.96),rgba(7,17,35,.96));box-shadow:0 16px 40px rgba(0,0,0,.22)}
.stage-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:14px}.stage-title b{color:#f2ce65}.stage-title span{font-size:12px;opacity:.72}.stage-road{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.stage-node{min-height:88px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:inherit;padding:9px;cursor:pointer}.stage-node b{display:grid;place-items:center;margin:auto;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#f6d66f,#a87512);color:#111;font-size:18px}.stage-node span{display:block;margin-top:7px;font-size:11px}.stage-node.lock{opacity:.4;cursor:not-allowed}.daily-card{display:grid;grid-template-columns:1.4fr 1fr auto auto;align-items:center;gap:12px}.daily-card span{display:block;font-size:12px;opacity:.7}.daily-progress{height:9px;border-radius:9px;background:rgba(255,255,255,.08);overflow:hidden}.daily-progress i{display:block;height:100%;background:linear-gradient(90deg,#b88720,#f4d76e)}.power-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0}.power-row button{border:1px solid rgba(242,206,101,.28);border-radius:15px;padding:12px;background:rgba(242,206,101,.07);color:inherit;font-weight:700}.power-row b{color:#f2ce65}.btn:disabled{opacity:.45;cursor:not-allowed}@media(max-width:800px){.stage-road{grid-template-columns:repeat(3,1fr)}.daily-card{grid-template-columns:1fr}.power-row{grid-template-columns:1fr}.stage-title{align-items:flex-start;flex-direction:column}}


/* V1.8.9 PREMIUM MATCH-3 */
.match3-panel{margin:14px 0;padding:18px;border:1px solid #d7ae4d;border-radius:24px;background:radial-gradient(circle at 50% 0,#234f7b66,transparent 35%),linear-gradient(145deg,#082b49,#020e1b);box-shadow:0 20px 48px #000a,0 0 28px #e8bd4c22}.match3-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.match3-title small{color:var(--gold);font-weight:900;letter-spacing:1px}.match3-title h3{margin:4px 0 10px}.match3-title>b{padding:10px 14px;border:1px solid #9b7937;border-radius:14px;color:#f5d36d;background:#071a2b}.match3-progress{height:10px;border-radius:99px;background:#122d43;overflow:hidden;margin-bottom:12px}.match3-progress i{display:block;height:100%;background:linear-gradient(90deg,#b57b12,#ffe27a);box-shadow:0 0 14px #ffd75c88}.match3-board{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;max-width:720px;margin:12px auto}.match3-tile{min-width:0;padding:5px;border-radius:14px;border:1px solid #52738c;background:linear-gradient(#fff,#e9f0f5);color:#10263a;cursor:pointer;overflow:hidden;transition:.16s transform,.16s box-shadow}.match3-tile:hover{transform:scale(1.035)}.match3-tile.selected{outline:3px solid #ffdc62;transform:scale(1.06);box-shadow:0 0 24px #ffdc6288}.match3-tile img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px}.match3-tile span,.match3-tile em{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.match3-tile span{font-size:9px;font-weight:900;padding-top:4px}.match3-tile em{font-size:8px;font-style:normal;color:#617588}@media(max-width:700px){.match3-board{gap:4px}.match3-tile{padding:3px;border-radius:10px}.match3-tile span{font-size:7px}.match3-tile em{display:none}.match3-title{align-items:flex-start}.match3-title>b{font-size:11px;padding:8px}}

/* V2.0 Game Center */
.gc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:16px 18px;border:1px solid #d7ae43;border-radius:18px;background:linear-gradient(135deg,#071b3c,#0b2c5c)}
.gc-head div{display:grid;gap:3px}.gc-head b{color:#f4ca58;font-size:18px}.gc-head span{color:#b8c8df;font-size:13px}
.gc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.gc-card{min-height:145px;text-align:left;padding:16px;border-radius:18px;border:1px solid #315b89;background:linear-gradient(145deg,#0a2246,#07162f);color:#fff;cursor:pointer;box-shadow:inset 0 0 22px #26a8ff14}
.gc-card:hover{border-color:#e1b94d}.gc-card em{display:block;color:#53d7ff;font-style:normal;font-weight:900;font-size:12px}.gc-card b{display:block;color:#f4ca58;font-size:16px;margin:8px 0}.gc-card span,.gc-card small{display:block;color:#c3d1e5}.gc-card small{margin-top:12px;color:#70e4ff;font-weight:800}
@media(max-width:980px){.gc-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.gc-grid{grid-template-columns:1fr}.gc-head{align-items:flex-start;flex-direction:column}}

/* V2.1 Central Progress */
.cp-panel{margin:0 0 14px;padding:16px 18px;border:1px solid #d7ae43;border-radius:18px;background:linear-gradient(135deg,#0b234a,#07162f);box-shadow:inset 0 0 24px #2aaeff18}
.cp-title{display:flex;justify-content:space-between;align-items:center;color:#f4ca58}.cp-title span{color:#70e4ff;font-weight:900}
.cp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:13px 0}.cp-stats div{padding:11px;border:1px solid #315b89;border-radius:13px;background:#0a2141;text-align:center}.cp-stats b{display:block;font-size:22px;color:#fff}.cp-stats small{color:#9eb5d1}
.cp-track{height:10px;background:#06142c;border:1px solid #315b89;border-radius:10px;overflow:hidden}.cp-track i{display:block;height:100%;background:linear-gradient(90deg,#38cfff,#f4ca58)}
.cp-note{font-size:12px;color:#9eb5d1;margin-top:6px}@media(max-width:600px){.cp-stats{grid-template-columns:1fr 1fr}}

/* V2.2 Profile & Achievement */
.profile-progress{margin:0 0 16px;padding:18px;border:1px solid #d7ae43;border-radius:20px;background:linear-gradient(135deg,#071a38,#0b2c55);box-shadow:inset 0 0 30px #2aaeff14}
.pp-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.pp-head>div:first-child{display:grid;gap:4px}.pp-head b{color:#f4ca58;font-size:18px}.pp-head span{color:#72ddff;font-size:13px}.pp-wallet{padding:9px 12px;border:1px solid #315b89;border-radius:12px;color:#72ddff;font-weight:900}.pp-wallet small{display:block;color:#9eb5d1;font-weight:500;margin-top:2px}
.pp-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:16px}.pp-grid h3{margin:0 0 10px;color:#fff}.pg-game{margin:9px 0}.pg-game>div{display:flex;justify-content:space-between;gap:8px}.pg-game b{font-size:12px;color:#dbe9f8}.pg-game span{font-size:11px;color:#8da9c6}.pg-game>i{display:block;height:7px;margin-top:5px;border-radius:9px;background:#06142a;overflow:hidden}.pg-game>i em{display:block;height:100%;background:linear-gradient(90deg,#39cfff,#f4ca58)}
.ach-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ach{display:flex;gap:9px;align-items:center;padding:9px;border-radius:12px;border:1px solid #315b89}.ach.on{background:#173a56}.ach.off{opacity:.38}.ach>b{font-size:21px}.ach strong,.ach small{display:block}.ach strong{font-size:12px;color:#fff}.ach small{font-size:10px;color:#9eb5d1;margin-top:2px}
@media(max-width:700px){.pp-grid{grid-template-columns:1fr}.pp-head{align-items:flex-start;flex-direction:column}.ach-grid{grid-template-columns:1fr}}


/* V2.3 WEB3 WALLET CONNECT */
.w3-panel{margin:0 0 16px;padding:18px;border:1px solid #d7ae43;border-radius:22px;background:linear-gradient(145deg,#071a38,#061226);box-shadow:inset 0 0 32px #2aaeff12}.w3-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.w3-head h2{margin:3px 0 5px;color:#fff}.w3-head p{margin:0;color:#9eb5d1;font-size:13px}.w3-status{padding:8px 11px;border-radius:999px;border:1px solid #315b89;font-weight:900;font-size:11px;white-space:nowrap}.w3-status.ok{color:#69f0b2;border-color:#2b8f68;background:#0d3428}.w3-status.warn{color:#f4ca58;background:#33270c;border-color:#8b6a25}.w3-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}.w3-card{padding:14px;border:1px solid #315b89;border-radius:16px;background:#071b35;display:grid;gap:6px}.w3-card small{color:#6ecff1;font-size:10px;font-weight:900;letter-spacing:.8px}.w3-card b{color:#fff;font-size:16px;overflow-wrap:anywhere}.w3-card span{color:#9eb5d1;font-size:11px;overflow-wrap:anywhere}.w3-card .btn,.w3-card a.btn{justify-self:start;text-decoration:none;margin-top:5px}.w3-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:3px}.w3-history{margin-top:12px;border:1px solid #315b89;border-radius:16px;overflow:hidden}.w3-history-head{display:flex;justify-content:space-between;gap:10px;padding:12px 14px;background:#0a2445}.w3-history-head b{color:#f4ca58}.w3-history-head span{font-size:11px;color:#9eb5d1}.w3-history-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;padding:10px 14px;border-top:1px solid #183858;color:#dbe9f8;font-size:12px}.w3-history-row b{color:#70dfff}.w3-history-row small{color:#7f9ab4;text-align:right}.w3-empty{padding:14px;color:#8199b3;font-size:12px}.w3-safety{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:12px 14px;border-radius:14px;border:1px solid #765f29;background:#241c09;color:#d9c795;font-size:12px}.w3-safety b{color:#f4ca58;white-space:nowrap}.w3-safety span{color:#b9ad8c}@media(max-width:650px){.w3-head{flex-direction:column}.w3-grid{grid-template-columns:1fr}.w3-history-head{align-items:flex-start;flex-direction:column}.w3-history-row{grid-template-columns:1fr}.w3-history-row small{text-align:left}}

/* V2.4 WEB3 DASHBOARD */
.w3-transfer{margin-top:12px;padding:15px;border:1px solid #315b89;border-radius:16px;background:#06162d;display:grid;gap:12px}.w3-transfer h3{margin:2px 0 3px;color:#fff}.w3-transfer p{margin:0;color:#9eb5d1;font-size:11px}.w3-form{display:grid;grid-template-columns:1.6fr .7fr auto;gap:9px;align-items:end}.w3-form label{display:grid;gap:5px;color:#7fdfff;font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}.w3-form input{min-width:0;padding:11px 12px;border-radius:10px;border:1px solid #315b89;background:#071b35;color:#fff;outline:none}.w3-form input:focus{border-color:#f4ca58}.w3-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.w3-links a{color:#70dfff;text-decoration:none;border:1px solid #315b89;border-radius:10px;padding:8px 10px;font-size:11px}.w3-links a:hover{border-color:#f4ca58}.btn:disabled{opacity:.45;cursor:not-allowed}@media(max-width:720px){.w3-form{grid-template-columns:1fr}.w3-form .btn{width:100%}}

/* V2.5 ASSET + QR WALLET */
.asset-total{margin-top:16px;padding:18px;border:1px solid #d7ae43;border-radius:18px;background:linear-gradient(135deg,#102d4e,#07162d);display:flex;justify-content:space-between;gap:14px;align-items:center}.asset-total small,.asset-card small{display:block;color:#6ecff1;font-size:10px;font-weight:900;letter-spacing:.8px}.asset-total b{display:block;color:#f6d46b;font-size:30px;margin:5px 0}.asset-total span{color:#9eb5d1;font-size:11px}.asset-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}.asset-card{padding:15px;border:1px solid #315b89;border-radius:16px;background:#071b35}.asset-card b{display:block;color:#fff;font-size:18px;margin:7px 0}.asset-card span{color:#9eb5d1;font-size:11px}.asset-card.usdt{border-color:#2d8066}.asset-card.kelte{border-color:#8a6a27}.asset-config{margin-top:12px;padding:15px;border:1px solid #315b89;border-radius:16px;background:#06162d}.asset-config h3{margin:3px 0;color:#fff}.asset-config p{margin:0;color:#9eb5d1;font-size:11px}.asset-form{display:grid;grid-template-columns:1fr 1fr .7fr auto;gap:8px;margin-top:12px;align-items:end}.asset-form label{display:grid;gap:5px;color:#70dfff;font-size:10px;font-weight:900}.asset-form input{min-width:0;padding:11px 12px;border-radius:10px;border:1px solid #315b89;background:#071b35;color:#fff;outline:none}.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.qr-card{padding:16px;border:1px solid #315b89;border-radius:18px;background:linear-gradient(145deg,#071b35,#061226);display:grid;gap:8px;align-content:start}.qr-card h3{margin:0;color:#fff}.qr-card p{margin:0;color:#9eb5d1;font-size:11px}.qr-wrap{display:grid;place-items:center;min-height:220px;background:#fff;border-radius:16px;padding:12px;margin-top:4px}.qr-wrap canvas{width:210px;height:210px;image-rendering:pixelated}.qr-placeholder{color:#6c829c;text-align:center;font-weight:800}.qr-address{text-align:center;color:#70dfff;font-size:13px}.scan-btn{border:1px solid #d7ae43;background:linear-gradient(135deg,#f1c952,#9b7017);color:#111;border-radius:11px;padding:12px;font-weight:900;cursor:pointer}.qr-card>small{color:#8199b3;font-size:10px}.qr-scanner{position:fixed;inset:0;z-index:9999;place-items:center;background:rgba(0,0,0,.78);padding:18px}.qr-modal{width:min(520px,100%);padding:16px;border:1px solid #d7ae43;border-radius:20px;background:#07182f;color:#fff}.qr-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.qr-modal video{display:block;width:100%;max-height:60vh;object-fit:cover;border-radius:14px;background:#000}.qr-modal p{color:#9eb5d1;font-size:12px;margin:8px 0 0}.w3-panel{position:relative}
@media(max-width:800px){.asset-grid{grid-template-columns:1fr}.asset-form{grid-template-columns:1fr}.qr-grid{grid-template-columns:1fr}.asset-total{align-items:flex-start;flex-direction:column}.qr-wrap{min-height:200px}.qr-wrap canvas{width:190px;height:190px}}

.token-center{margin-top:14px;border:1px solid #c79a3d;border-radius:20px;padding:18px;background:linear-gradient(145deg,#071d35,#04111f);box-shadow:0 16px 45px #0007,inset 0 1px #fff2}.token-center-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.token-center-head h3{margin:5px 0;font-size:22px}.token-center-head p{margin:4px 0;color:#9db7cf;font-size:12px}.token-center-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.token-info{padding:14px;border:1px solid #315f83;border-radius:15px;background:#06182b}.token-info small{display:block;color:#d9b65b;font-weight:900;letter-spacing:1px}.token-info b{display:block;font-size:20px;margin:4px 0}.token-info span{display:block;color:#91aac1;font-size:12px;margin-bottom:10px}.token-transfer{margin-top:12px;padding:14px;border-radius:15px;border:1px solid #315f83;background:linear-gradient(145deg,#092640,#05182a)}.token-transfer h4{margin:3px 0 10px;font-size:17px}.token-transfer .w3-form{grid-template-columns:1fr 1.5fr 1fr auto}.token-transfer select,.token-transfer input{width:100%;padding:11px;border-radius:10px;border:1px solid #477294;background:#061a2f;color:white}.token-note{margin-top:10px;padding:11px;border-radius:12px;background:#2a2110;border:1px solid #82662b;color:#e5d3a0;font-size:12px}@media(max-width:800px){.token-center-head{flex-direction:column}.token-center-grid{grid-template-columns:1fr}.token-transfer .w3-form{grid-template-columns:1fr}.token-center{padding:13px}}

/* ===== MOBILE UX PASS 1 (iPhone 390/430) - scope: max-width 520/390 ONLY - desktop untouched ===== */
@media (max-width:520px){
  body{overflow-x:hidden}
  .main{max-width:100%;padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  input,select,textarea{font-size:16px}

  /* 1. GAME BOARD tiles - bigger numbers/icons, full width, keep grid, no overflow */
  .puzzle-tile,.match3-tile{min-height:88px;padding:7px}
  .puzzle-tile img,.match3-tile img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px}
  .puzzle-board,.match3-board{max-width:100%;gap:10px}
  .puzzle-tile span,.match3-tile span{font-size:15px;font-weight:900;line-height:1.3;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;padding:5px 2px}
  .match3-tile em{display:block;font-size:12px;font-style:normal;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .puzzle-hud b{font-size:30px}
  .puzzle-hud small{font-size:14px}
  .puzzle-rule{font-size:16px}
  .game-score b{font-size:30px}
  .game-score span{font-size:13px}
  .stage-node b{width:46px;height:46px;font-size:22px}
  .stage-node span{font-size:13px}
  .match3-title>b{font-size:13px;padding:10px 12px}
  .flash-target strong{font-size:19px}
  .badge-line span{font-size:14px}

  /* 2. PRODUCT NAME - cancel ellipsis on mobile, show full name (e.g. WHEATGRASS) */
  .product b{font-size:15px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .product .small{font-size:13px;min-height:0;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}

  /* 3. MEMORY CHALLENGE - 4 big touch targets, readable question/feedback */
  .game-grid{gap:12px}
  .game-choice{min-height:56px;padding:12px;border-radius:18px;border-width:1.5px}
  .game-choice b{font-size:18px;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;margin-top:8px}
  .game-choice small{font-size:15px;line-height:1.4;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
  .game-choice:active{transform:translateY(1px);border-color:#e4b84f;box-shadow:0 8px 18px #0008}
  .game-panel h3{font-size:22px;line-height:1.45}
  .feedback{padding:24px 16px}
  .feedback b{font-size:27px}
  .feedback span{font-size:16px;overflow-wrap:anywhere}
  .game-finish h2{font-size:26px}
  .game-finish p{font-size:16px}

  /* 4. MAIN BUTTONS - 56px, 18px, pressed state, stacked so they never collide */
  .btn,.btn.gold{min-height:56px;font-size:18px;padding:14px 18px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;border-radius:14px}
  .products .btn,.product .btn{min-height:56px;font-size:17px;padding:12px 14px;width:100%}
  .game-actions{gap:10px}
  .game-actions .btn{flex:1 1 100%;width:100%}
  .btn:active{transform:translateY(1px);filter:brightness(.95)}
  .btn.gold:active{filter:brightness(.93)}

  /* 5. BOTTOM NAV - readable 13.5px+, iPhone safe-area, never covers content, same navy/gold */
  .bottom{padding:10px 6px calc(8px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;border-top-width:1.5px}
  .bottom button{font-size:13.5px;min-height:46px;min-width:58px;padding:4px 3px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#d8e5f2}
  .bottom b{font-size:21px;margin-bottom:3px;color:#e6bd58}
  .bottom button.active{color:var(--gold)}
  .bottom button.active b{filter:drop-shadow(0 0 7px #f7d46c)}
  .bottom button:hover{color:var(--gold)}

  /* 6. TYPOGRAPHY hierarchy - interactive body >=16px, headings bigger */
  .title h1{font-size:26px}
  .title p{font-size:14px}
  .hero h2{font-size:23px}
  .hero p{font-size:16px}
  .metric b{font-size:28px}
  .card h3{font-size:19px}
  .game-hero h2{font-size:25px}
  .game-hero p{font-size:16px}
  .quick6 button{font-size:16px}
  .tabs button{font-size:16px;padding:10px 12px}
  .input{font-size:16px}
  .small{font-size:14px}
  .stage-title span{font-size:14px}
}
@media (max-width:390px){
  .btn,.btn.gold{font-size:17px;padding:13px 14px}
  .game-choice b{font-size:17px}
  .game-choice small{font-size:14px}
  .puzzle-tile span,.match3-tile span{font-size:14px}
  .title h1{font-size:24px}
  .hero h2{font-size:22px}
  .metric b{font-size:26px}
  .bottom button{font-size:13px;min-width:54px}
  .bottom b{font-size:20px}
  .product b{font-size:14px}
  .game-actions .btn{width:100%}
}
.home-mission{padding:15px 16px;border:1px solid #d7ae4d;border-radius:20px;background:radial-gradient(circle at 90% 0,#234f7bb3,transparent 45%),linear-gradient(145deg,#0a2446,#061226);box-shadow:inset 0 0 26px #2aaeff14}
.home-mission .stage-title{margin-bottom:11px}
.home-mission .stage-title b{color:#f2ce65;font-size:15px}
.home-mission .daily-progress{height:9px}
.home-mission-row{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:center;margin-top:11px}
.home-mission-row span{font-size:12px;color:#c8d9e8}
.home-mission-row span b{font-size:16px;color:#fff}
.home-mission-row .btn{padding:9px 13px;font-size:12px}
@media(max-width:600px){.home-mission-row{grid-template-columns:1fr 1fr}.home-mission-row .btn{grid-column:1/-1;width:100%;padding:12px}}
@media(max-width:390px){.home-mission .stage-title span{font-size:12px}.home-mission-row span{font-size:13px}}
#ktoast{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:8px;width:min(92vw,420px);pointer-events:none}
.ktoast-item{padding:13px 16px;border-radius:14px;border:1px solid #d7ae4d;background:linear-gradient(145deg,#0b234a,#061226);color:#eaf4ff;font-size:14px;font-weight:700;letter-spacing:.2px;box-shadow:0 14px 34px #000a,0 0 18px #2aaeff22;animation:ktIn .25s ease;align-self:flex-end}
.ktoast-item.good{border-color:#2b8f68;background:linear-gradient(145deg,#0d3428,#071226)}
.ktoast-item.warn{border-color:#8b6a25;background:linear-gradient(145deg,#33270c,#0b1a12)}
.ktoast-item.hide{opacity:0;transform:translateY(-8px);transition:.35s}
@keyframes ktIn{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1}}
.kdialog{position:fixed;inset:0;display:none;place-items:center;z-index:310;background:rgba(1,8,16,.72);backdrop-filter:blur(4px);padding:18px}
.kdialog-card{width:min(92vw,380px);border:1px solid #c79a3d;border-radius:20px;padding:20px;background:linear-gradient(145deg,#0b234a,#050f1f);box-shadow:0 24px 60px #000c,0 0 30px #2aaeff22;animation:ktIn .22s ease}
.kd-text{color:#dbe9f8;font-size:14px;line-height:1.6;margin:0;white-space:pre-line}
.kd-label{display:block;color:#f2ce65;font-size:12px;font-weight:900;letter-spacing:.6px;margin-bottom:6px}
.kdialog .input{width:100%}
.kdialog-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:9px;margin-top:16px}
@media(max-width:390px){.kdialog-actions{grid-template-columns:1fr}.kdialog-actions .btn{width:100%}}

/* === PHASE 4.1 PREMIUM MEMBERS / PROFILE / PAGE NAV === */
.page-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:2px 0 4px}
.page-nav button{display:flex;align-items:center;gap:4px;background:rgba(10,25,47,.72);border:1px solid rgba(244,202,88,.25);color:#cfe3f7;border-radius:999px;padding:10px 14px;font-size:13px;min-height:44px;transition:.2s}
.page-nav button:disabled{opacity:.35}
.pn-dots{display:flex;gap:5px}.pn-dots em{width:7px;height:7px;border-radius:50%;background:#35557d;transition:.2s}
.pn-dots em.on{background:linear-gradient(135deg,#f4ca58,#ffd98a);box-shadow:0 0 8px rgba(244,202,88,.8)}
.m-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(12,31,58,.95),rgba(8,20,40,.95));border:1px solid rgba(91,133,186,.4);border-radius:22px;padding:22px 20px;margin:6px 0 12px;text-align:center;color:#eaf4ff}
.m-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(244,202,88,.18),transparent 55%)}
.m-hero>*{position:relative}
.m-hero h2{margin:8px 0 6px;font-size:26px;color:#fff}
.m-hero p{margin:0 auto 14px;color:#9db8d6;font-size:14px;max-width:520px}
.m-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 0 12px}
.m-stats>div{background:rgba(11,28,53,.85);border:1px solid rgba(91,133,186,.3);border-radius:16px;padding:12px 6px;text-align:center}
.m-stats b{display:block;font-size:22px;color:var(--gold,#f4ca58);font-weight:800}
.m-stats small{font-size:11px;color:#8fa9c8}
.m-tool{display:grid;grid-template-columns:1fr auto;gap:10px;margin:0 0 10px}
.m-tool .input{width:100%}
.m-tool .btn{min-width:48px;min-height:48px}
.m-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.m-card{width:100%;text-align:left;background:linear-gradient(150deg,rgba(13,33,62,.92),rgba(16,42,80,.92))!important;border:1px solid rgba(91,133,186,.38);border-radius:16px;padding:12px;gap:12px;min-height:96px;flex:none}
.m-ava{position:relative;width:52px;height:52px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:16px;font-size:22px;font-weight:800;color:#fff;background:linear-gradient(150deg,#2f7fd6,#134a8e)}
.m-ava em{position:absolute;top:-7px;right:-8px;background:linear-gradient(135deg,#ff7a8a,#e6455f);color:#fff;font-size:9px;font-weight:800;padding:2px 6px;border-radius:999px;font-style:normal}
.m-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.m-name{color:#f2f8ff;font-size:15px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.m-sku{font-size:10px;color:#8fa9c8;background:#0b1c35;padding:2px 6px;border-radius:6px}
.m-chips{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.m-badge{font-style:normal;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.5px}
.b-gold{background:rgba(244,202,88,.16);color:#f4ca58;border:1px solid rgba(244,202,88,.5)}
.b-cyan{background:rgba(95,200,255,.14);color:#5fc8ff;border:1px solid rgba(95,200,255,.5)}
.b-green{background:rgba(88,231,160,.14);color:#58e7a0;border:1px solid rgba(88,231,160,.5)}
.b-purple{background:rgba(176,148,255,.14);color:#b094ff;border:1px solid rgba(176,148,255,.5)}
.b-blue{background:rgba(95,158,255,.14);color:#5f9eff;border:1px solid rgba(95,158,255,.5)}
.m-p{font-style:normal;font-size:10px;font-weight:700;color:#cfdff2;background:#1b3358;padding:2px 8px;border-radius:999px}
.m-st{font-style:normal;font-size:10px;font-weight:800}
.m-st.red{color:#ff7a8a}.m-st.gold{color:#f4ca58}.m-st:not(.red):not(.gold){color:#67e3a0}
.m-line{font-size:12px;color:#9db8d6}
.m-bar{height:7px;border-radius:999px;background:#0b1c35;overflow:hidden;display:block}
.m-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f4ca58,#ffd98a)}
.m-last{font-size:11px;color:#7f9cc0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnone{color:#5b7ca3}
.m-go{flex:none;font-size:24px;color:#f4ca58;align-self:center}
.m-empty{color:#7f9cc0;text-align:center;padding:18px;font-size:13px;background:rgba(11,28,53,.6);border:1px dashed rgba(91,133,186,.35);border-radius:14px}
.mp-hero{display:flex;gap:14px;align-items:center;background:linear-gradient(160deg,rgba(12,31,58,.95),rgba(8,20,40,.95));border:1px solid rgba(91,133,186,.4);border-radius:22px;padding:18px 16px;margin:6px 0 12px}
.mp-ava{position:relative;width:72px;height:72px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:22px;font-size:30px;font-weight:800;color:#fff;background:radial-gradient(circle at 30% 25%,#58b7ff,#1a5bb0 70%)}
.mp-ava em{position:absolute;top:-8px;right:-10px;background:linear-gradient(135deg,#ff7a8a,#e6455f);color:#fff;font-size:10px;font-weight:800;padding:2px 8px;border-radius:999px;font-style:normal}
.mp-id{flex:1;min-width:0}
.mp-id h2{margin:4px 0 6px;font-size:22px;color:#fff}
.mp-xp-label{font-size:12px;color:#9db8d6;display:block;margin:4px 0 6px}
.mp-track{height:8px;border-radius:999px;background:#0b1c35;overflow:hidden;display:block}
.mp-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f4ca58,#ffd98a)}
.mp-pct{font-size:12px;color:#f4ca58;font-weight:800;margin-left:auto;flex:none}
.mp-phone{font-size:11px;color:#7f9cc0;background:#0b1c35;padding:2px 8px;border-radius:6px}
.mp-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 12px}
.mp-actions .btn{display:flex;flex-direction:column;gap:3px;align-items:center;padding:10px 4px;min-height:58px;font-size:11px;white-space:nowrap}
.mp-actions .btn b{font-size:16px}
.mp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.mp-card{background:rgba(11,28,53,.82);border:1px solid rgba(91,133,186,.3);border-radius:18px;padding:14px;min-width:0}
.mp-card-title{color:#cfe3f7;font-size:13px;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.mp-card-title::before{content:'◆';color:#f4ca58;font-size:9px}
.mp-list{display:flex;flex-direction:column;gap:8px}
.mp-row{display:flex;flex-direction:column;gap:2px;background:#0b1c35;border-left:3px solid #f4ca58;border-radius:8px;padding:8px 10px}
.mp-row.over{border-left-color:#ff7a8a}
.mp-row b{color:#eaf4ff;font-size:13px}
.mp-row span{color:#8fa9c8;font-size:11px}
.mp-row em{color:#5fc8ff;font-style:normal;font-size:10px;font-weight:700}
.goal-row{display:flex;gap:8px;align-items:center;background:#0b1c35;border-radius:8px;padding:8px 10px;font-size:13px;color:#eaf4ff}
.goal-row input{accent-color:#f4ca58;width:18px;height:18px;flex:none}
.mp-reward{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.mp-reward>div{background:#0b1c35;border:1px solid rgba(91,133,186,.25);border-radius:12px;padding:8px 4px;text-align:center}
.mp-reward b{display:block;color:#f4ca58;font-size:17px}
.mp-reward small{font-size:10px;color:#8fa9c8}
.mp-mission{margin-bottom:10px}
.mp-mission small{color:#9db8d6;font-size:11px;display:block;margin-bottom:5px}
.badge-line{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.mp-hint{font-size:11px;color:#5b7ca3;background:#0b1c35;border:1px dashed rgba(91,133,186,.3);border-radius:8px;padding:7px 8px}
.mp-journey{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.mp-journey button{display:flex;flex-direction:column;align-items:center;gap:3px;background:#0b1c35;border:1px solid rgba(91,133,186,.25);border-radius:12px;padding:10px 4px;min-height:62px;color:#5b7ca3}
.mp-journey button.open{border-color:rgba(244,202,88,.55);color:#f4ca58;box-shadow:0 0 10px rgba(244,202,88,.15)}
.mp-journey b{font-size:15px}
.mp-journey span{font-size:10px}
@media(max-width:640px){.m-stats{grid-template-columns:repeat(2,1fr)}.mp-actions{grid-template-columns:repeat(3,1fr)}.mp-grid{grid-template-columns:1fr}}
@media(max-width:430px){.m-grid{grid-template-columns:1fr}.mp-hero{flex-wrap:wrap}.mp-id{min-width:60%}.mp-reward{grid-template-columns:repeat(2,1fr)}.page-nav button{font-size:11px;padding:9px 10px}}
@media(max-width:390px){.mp-actions{grid-template-columns:repeat(2,1fr)}.mp-phone{display:none}}

/* V2.5 HOME — FREEDOM MEMBER CARD */
.home-greet{background:linear-gradient(100deg,#06203d,#0b2b4b);border:1px solid #8e6a2c;min-height:170px}
.home-greet .master-kicker{display:block;letter-spacing:2px}
.home-greet h2{margin-bottom:4px}
.greet-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.greet-ava{flex:none}
.fcard{position:relative;width:100%;display:block;text-align:left;margin:12px 0 4px;padding:18px 16px 15px;border-radius:24px;border:1.5px solid #f4d67a;cursor:pointer;font-family:inherit;color:#fff;overflow:hidden;background:
  radial-gradient(circle at 85% -5%,rgba(95,200,255,.20),transparent 40%),
  radial-gradient(circle at 8% 115%,rgba(230,189,88,.26),transparent 45%),
  linear-gradient(180deg,rgba(2,13,28,0) 62%,rgba(1,6,16,.96) 100%),
  url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MDAgMjYwIj48ZGVmcz48cmFkaWFsR3JhZGllbnQgaWQ9ImdzIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmU5YTAiIHN0b3Atb3BhY2l0eT0iLjkiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNlMDk1MjciIHN0b3Atb3BhY2l0eT0iMCIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSI0MDAiIGhlaWdodD0iMjYwIiBmaWxsPSIjMDIwZDFjIi8+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMjA2IiByPSIxMzAiIGZpbGw9InVybCgjZ3MpIi8+PGNpcmNsZSBjeD0iMjAwIiBjeT0iMjA2IiByPSI1MCIgZmlsbD0iI2ZmZDc2ZSIvPjxnIGZpbGw9IiMwODFjMzMiPjxyZWN0IHg9IjIwIiB5PSIxMjgiIHdpZHRoPSIzNCIgaGVpZ2h0PSI3OCIvPjxyZWN0IHg9IjU4IiB5PSIxMDIiIHdpZHRoPSIyOCIgaGVpZ2h0PSIxMDQiLz48cmVjdCB4PSI5MCIgeT0iMTM2IiB3aWR0aD0iNDAiIGhlaWdodD0iNzAiLz48cmVjdCB4PSIxMzQiIHk9Ijk2IiB3aWR0aD0iMjYiIGhlaWdodD0iMTEwIi8+PHJlY3QgeD0iMTY0IiB5PSIxMjYiIHdpZHRoPSIzOCIgaGVpZ2h0PSI4MCIvPjxyZWN0IHg9IjIyNiIgeT0iMTA4IiB3aWR0aD0iMjYiIGhlaWdodD0iOTgiLz48cmVjdCB4PSIyNTYiIHk9IjEzOCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjY4Ii8+PHJlY3QgeD0iMzAwIiB5PSIxMDAiIHdpZHRoPSIzMCIgaGVpZ2h0PSIxMDYiLz48cmVjdCB4PSIzMzQiIHk9IjEzMCIgd2lkdGg9IjQ2IiBoZWlnaHQ9Ijc2Ii8+PC9nPjxwYXRoIGQ9Ik0xNTIgMjA4TDI0OCAyMDhMMzM2IDI2MEg2NFoiIGZpbGw9IiMwMzE0MjYiLz48cGF0aCBkPSJNMTUyIDIwOEw2NCAyNjBNMjQ4IDIwOEwzMzYgMjYwIiBzdHJva2U9IiNkOWE4M2EiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIvPjxwYXRoIGQ9Ik0xODIgMjA4TDE5NiAyMDhMMjE0IDI2MEgxOThaIiBmaWxsPSIjZDlhODNhY2MiLz48Y2lyY2xlIGN4PSIxMjAiIGN5PSI2MCIgcj0iMiIgZmlsbD0iI2ZmZTlhMCIvPjxjaXJjbGUgY3g9IjI4MCIgY3k9IjQ0IiByPSIyIiBmaWxsPSIjZmZlOWEwIi8+PGNpcmNsZSBjeD0iMzMwIiBjeT0iNzYiIHI9IjEuNSIgZmlsbD0iI2ZmZTlhMCIvPjwvc3ZnPg==") center 40%/140% no-repeat;
  box-shadow:0 22px 48px #000a,0 0 30px rgba(230,189,88,.32),0 0 0 1px #8a6a27,inset 0 1px rgba(255,255,255,.12),inset 0 -2px 8px #f4d67a26;color:#fff}
.fcard:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 15%,rgba(255,235,170,.14) 42%,transparent 60%);pointer-events:none}
.fcard-holder{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 2px;font-size:13px;font-weight:900;color:#dcecfc;letter-spacing:.4px}
.fcard-holder i{font-style:normal;font-size:10px;letter-spacing:2px;color:#f4d67a;border:1px solid #d9a83a;border-radius:99px;padding:4px 10px;background:linear-gradient(180deg,#0a2440,#051528)}
.fcard-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.fcard-wing{flex:none}
.fcard-tier{font-size:11px;letter-spacing:3px;color:#e6bd58;font-weight:900}
.fcard-brand{display:block;font-size:12px;letter-spacing:4px;color:#8fa9c8;font-weight:900;margin-bottom:2px}
.fcard-name{display:block;font-size:34px;font-weight:1000;line-height:1.08;letter-spacing:.5px}
.fcard-name em{font-style:normal;background:linear-gradient(120deg,#fff0aa,#f2c75c 55%,#c99a3c);-webkit-background-clip:text;background-clip:text;color:transparent}
.fcard-road{display:block;font-size:11px;letter-spacing:2px;color:#cfe0f2;font-weight:800;margin-top:4px}
.fcard-road i{font-style:normal;color:#e6bd58;margin:0 5px}
.fcard-msg{margin:10px 0 12px;font-size:13px;color:#dcecfc;line-height:1.5}
.fcard-goals{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:13px}
.fcard-goals i{font-style:normal;font-size:9px;font-weight:900;letter-spacing:.6px;padding:6px 9px;border-radius:99px;border:1px solid rgba(230,189,88,.45);background:rgba(9,22,42,.6);color:#f2c75c}
.fcard-prog{display:block;margin-bottom:12px}
.fcard-prow{display:flex;justify-content:space-between;gap:8px;font-size:10px;color:#9db8d6;font-weight:700;margin-bottom:6px}
.fcard-prow b{color:#fff}
.fcard-bar{display:block;height:8px;border-radius:99px;background:#0b2038;border:1px solid #33577a;overflow:hidden}
.fcard-bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#b88720,#f4d76e);box-shadow:0 0 10px #e9b83b66}
.fcard-tag{display:block;text-align:center;font-size:12px;font-weight:900;color:#fff;letter-spacing:.4px;margin-bottom:2px}
.fcard-sig{display:block;text-align:center;font-size:8px;letter-spacing:3px;color:#8fa9c8}
@media(max-width:390px){.fcard-name{font-size:29px}.fcard{padding:15px 13px 12px}.fcard-goals i{padding:5px 7px;font-size:8px}}

/* ===== K-ELITE FREEDOM PASSPORT — 9 ด่านสู่ความสำเร็จ ===== */
.fp-journey{display:flex;gap:12px;align-items:center;width:100%;text-align:left;margin:2px 0 6px;padding:14px 13px;border:1px solid #d0a23f;border-radius:16px;background:radial-gradient(circle at 88% 0,#e9bd5230,transparent 42%),linear-gradient(135deg,#0c2c52,#06162c);color:#fff;cursor:pointer;box-shadow:inset 0 0 22px #e8bd4c14;transition:.18s transform,.18s box-shadow;min-height:78px}
.fp-journey:hover{transform:translateY(-2px);box-shadow:0 10px 26px #0008,0 0 18px #e9b83b33}
.fp-journey-ic{flex:none}
.fp-journey .kelite-logo.mini{width:34px;height:34px;border-radius:9px}
.fp-journey-b{flex:1;min-width:0;display:grid;gap:4px}
.fp-journey-b>b{color:#f4ca58;font-size:13.5px;letter-spacing:.4px}
.fp-journey-b>small{font-size:11px;color:#a9c0d8;line-height:1.45;display:block}
.fp-journey-go{flex:none;font-size:20px;color:#f4ca58}
.fp-barm{display:block;height:9px;border-radius:99px;background:#0a1c30;border:1px solid #2c4a6b;overflow:hidden}
.fp-barm>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#b88720,#f6d76b);box-shadow:0 0 10px #e9b83b55;transition:width .5s ease}
.fp-hero{margin:2px 0 12px;padding:20px 18px 18px;border:1.5px solid #d8ab44;border-radius:24px;color:#fff;background:radial-gradient(circle at 85% 8%,#e7bc4f30,transparent 40%),radial-gradient(circle at 8% 96%,#3f8ed31c,transparent 40%),linear-gradient(150deg,#0d2f58,#04142a 58%,#020c17);box-shadow:0 18px 44px #000a,0 0 28px #e8bd4c22;overflow:hidden;position:relative}
.fp-hero:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 18%,rgba(255,236,160,.13) 44%,transparent 62%);pointer-events:none}
.fp-hero-top{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:900;letter-spacing:1.4px;color:#f4ca58}
.fp-hero-top .kelite-logo.mini{width:30px;height:30px;border-radius:8px}
.fp-owner{display:grid;gap:3px;margin:13px 0 2px}
.fp-owner h2{margin:0;font-size:24px;font-weight:1000;letter-spacing:.3px}
.fp-kel{font-size:11px;letter-spacing:1.6px;color:#e6bd58}
.fp-quote{margin:10px 0 14px;font-size:13.5px;color:#dbe8f7;line-height:1.6}
.fp-hero-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.fp-ring{--fp:0%;flex:none;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;background:conic-gradient(#f6d76b calc(var(--fp)* 1%),rgba(13,40,74,.9) 0);box-shadow:0 0 22px #e9b83b33}
.fp-ring.big{width:98px;height:98px}
.fp-ring>i{display:grid;place-items:center;font-style:normal;width:60px;height:60px;border-radius:50%;background:#061527;border:1px solid #2c4a6b;color:#f7d76c;font-weight:1000;font-size:16px;text-align:center;line-height:1.05}
.fp-ring>i small{display:block;font-size:10px;color:#9db8d6;font-weight:700}
.fp-ring.big>i{width:82px;height:82px;font-size:22px}
.fp-caps{flex:1;min-width:190px;display:grid;gap:8px}
.fp-caps>b{font-size:15px;color:#fff;letter-spacing:.3px}
.fp-caps>small{font-size:11.5px;color:#a9c0d8}
.fp-actions{display:flex;gap:9px;flex-wrap:wrap;margin:2px 0 4px}
.fp-actions .btn{flex:1;min-width:150px;min-height:46px}
.fp-list{display:grid;gap:9px}
.fp-pass{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:13px 13px;border:1px solid #31537a;border-radius:17px;background:linear-gradient(135deg,#0a2440,#061527);color:#fff;cursor:pointer;transition:.16s transform,.16s box-shadow;min-height:68px}
.fp-pass:hover:not([disabled]){transform:translateY(-2px);border-color:#d8ab44;box-shadow:0 10px 24px #0007,0 0 16px #e9b83b26}
.fp-pass .fp-no{flex:none;font-size:10.5px;font-weight:900;letter-spacing:1px;padding:5px 9px;border-radius:99px;background:#08243f;border:1px solid #3a6c93;color:#f4ca58}
.fp-pass .fp-tit{flex:1;min-width:0;display:grid;gap:3px}
.fp-pass .fp-tit>b{font-size:14.5px;color:#fff}
.fp-pass .fp-tit>small{font-size:11px;color:#9fb6ce;display:block}
.fp-pass .fp-stamp{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid #f4d67a;color:#f4d67a;display:grid;place-items:center;font-size:17px;font-weight:1000;box-shadow:0 0 14px #f4d67a44}
.fp-pass.done{border-color:#d8ab44;background:radial-gradient(circle at 90% 10%,#e7bc4f26,transparent 45%),linear-gradient(135deg,#0e2c52,#0a1c32);box-shadow:0 0 0 1px rgba(216,171,68,.25),0 8px 22px #0007}
.fp-pass.done .fp-tit>small{color:#e6bd58}
.fp-pass.cur{border-color:#f6d76b;background:linear-gradient(135deg,#123055,#0a2038);box-shadow:0 0 0 1px rgba(246,215,107,.45),0 0 20px #e9b83b33;animation:fpGlow 2.4s ease-in-out infinite}
.fp-pass.cur .fp-tit>b{color:#f4ca58}
.fp-pass.lock{opacity:.5;cursor:not-allowed}
.fp-pass .fp-lock{flex:none;font-size:19px}
.fp-pass .fp-cur{flex:none;font-style:normal;font-size:10.5px;font-weight:900;color:#0b1626;background:linear-gradient(135deg,#fff0a7,#efc251);padding:6px 10px;border-radius:99px;letter-spacing:.4px}
@keyframes fpGlow{0%,100%{box-shadow:0 0 0 1px rgba(246,215,107,.45),0 0 16px #e9b83b22}50%{box-shadow:0 0 0 1px rgba(246,215,107,.65),0 0 30px #e9b83b55}}
.fp-fine{margin-top:12px;padding:11px 13px;border:1px dashed #3a5f83;border-radius:12px;font-size:11px;color:#8fa9c8;line-height:1.5}
.fp-detail{display:grid;gap:12px}
.fp-dhead{display:flex;align-items:center;justify-content:space-between}
.fp-dhead .btn{min-height:44px}
.fp-dno{width:42px;height:42px;border-radius:50%;border:1.5px solid #31537a;color:#9db8d6;display:grid;place-items:center;font-size:18px;background:#071a2c}
.fp-dno.cur{border-color:#f6d76b;color:#f4ca58;box-shadow:0 0 16px #e9b83b44}
.fp-dno.done{border-color:#f4d67a;color:#f4d67a;box-shadow:0 0 16px #f4d67a44}
.fp-dhero{padding:18px 17px;border:1.5px solid #d8ab44;border-radius:22px;background:radial-gradient(circle at 85% 10%,#e7bc4f2b,transparent 45%),linear-gradient(150deg,#0e2f58,#041527);box-shadow:inset 0 1px #ffffff18}
.fp-dhero.cur{border-color:#f6d76b;box-shadow:inset 0 1px #ffffff18,0 0 22px #e9b83b2e}
.fp-dhero h2{margin:7px 0 2px;font-size:25px;font-weight:1000}
.fp-dhero p{margin:0 0 13px;color:#c4d6e8;font-size:13.5px}
.fp-dprog{display:grid;gap:7px}
.fp-dprog>b{font-size:12px;color:#f4ca58;letter-spacing:.5px}
.fp-intro{padding:14px 15px;border:1px solid #31537a;border-radius:16px;background:#081c30}
.fp-intro>b{color:#f4ca58;font-size:12.5px;letter-spacing:.5px}
.fp-intro>p{margin:7px 0 0;font-size:12.5px;color:#bcd0e2;line-height:1.65}
.fp-sub{font-size:11px;font-weight:900;letter-spacing:1px;color:#f4ca58;margin:2px 0 -3px}
.fp-items{display:grid;gap:9px}
.fp-item{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:12px 13px;min-height:52px;border:1px solid #31537a;border-radius:15px;background:#081b2e;color:#cfe0f2;cursor:pointer;font-size:13.5px;transition:.15s}
.fp-item:active{transform:scale(.985)}
.fp-item>i{flex:none;width:26px;height:26px;border-radius:8px;border:1.5px solid #3a6c93;display:grid;place-items:center;font-style:normal;font-size:15px;color:transparent}
.fp-item>span{line-height:1.45}
.fp-item.on{border-color:#d8ab44;background:#0d2c4a;color:#fff}
.fp-item.on>i{background:linear-gradient(135deg,#fff0a7,#efc251);border-color:#f6d76b;color:#0b1626}
.fp-item[disabled]{opacity:.55;cursor:not-allowed}
.fp-item.done>i{background:linear-gradient(135deg,#fff0a7,#efc251);border-color:#f6d76b;color:#0b1626}
.fp-confirm{width:100%;min-height:52px;font-size:15px}
.fp-confirm.off{opacity:.5}
.fp-complete{display:grid;justify-items:center;gap:7px;text-align:center;padding:20px 16px;border:1.5px solid #f4d67a;border-radius:20px;background:radial-gradient(circle at 50% 0,#e7bc4f2e,transparent 60%),#081c30}
.fp-complete .fp-stamp{width:52px;height:52px}
.fp-complete>b{color:#f4ca58;font-size:18px;letter-spacing:1px}
.fp-complete>span{font-size:12px;color:#bcd0e2;line-height:1.6;max-width:320px}
.fp-stamp{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid #f4d67a;color:#f4d67a;display:inline-grid;place-items:center;font-weight:1000;font-style:normal;box-shadow:0 0 14px #f4d67a44}
.fp-stamp.big{width:50px;height:50px;font-size:24px;border-width:2.5px}
.fp-note{padding:14px 15px;border-radius:16px;font-size:13px;line-height:1.6}
.fp-note.warn{border:1px solid #8a6a3a;background:#2a1c0b33;color:#e8c987}
.fp-quick{display:flex;gap:9px;flex-wrap:wrap}
.fp-quick .btn{flex:1;min-width:140px;min-height:46px}
.fp-rank-wrap,.fp-clv,.fp-badge,.fp-trip{padding:14px 15px;border:1px solid #31537a;border-radius:16px;background:#081c30;display:grid;gap:11px}
.fp-ranks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.fp-ranks>i{display:grid;gap:1px;text-align:center;padding:9px 4px;border-radius:12px;border:1px solid #2c4a6b;background:#06182c;font-style:normal}
.fp-ranks>i.on{border-color:#f6d76b;background:linear-gradient(135deg,#fff0a7,#efc251);box-shadow:0 0 14px #e9b83b33}
.fp-ranks>i b{font-size:14px;color:#f4ca58}
.fp-ranks>i.on b,.fp-ranks>i.on span{color:#0b1626}
.fp-ranks>i span{font-size:9.5px;color:#9fb6ce;line-height:1.3}
.fp-clv-steps{display:flex;align-items:center;gap:8px}
.fp-clv-steps>span{flex:1;text-align:center;padding:10px 4px;border-radius:12px;border:1px solid #2c4a6b;background:#06182c;font-weight:900;color:#9db8d6;font-size:14px}
.fp-clv-steps>span small{display:block;font-size:9px;color:#7b93ad;font-weight:600}
.fp-clv-steps>span.on{border-color:#f6d76b;background:linear-gradient(135deg,#fff0a7,#efc251);color:#0b1626;box-shadow:0 0 14px #e9b83b33}
.fp-clv-steps>span.on small{color:#0b1626}
.fp-clv-steps>i{flex:0 0 auto;width:14px;height:2px;border-radius:2px;background:#3a6c93}
.fp-badge{grid-template-columns:auto 1fr;align-items:center;text-align:left}
.fp-badge .fp-medal{width:56px;height:56px;display:grid;place-items:center;font-size:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e7bc4f55,transparent 60%),#081c30;border:1.5px solid #8a6a3a;filter:grayscale(.5)}
.fp-badge.on{border-color:#d8ab44;background:radial-gradient(circle at 50% 0,#e7bc4f2e,transparent 60%),#081c30;animation:fpGlow 2.4s ease-in-out infinite}
.fp-badge.on .fp-medal{border-color:#f4d67a;filter:none;box-shadow:0 0 20px #f4d67a55}
.fp-badge b{color:#f4ca58;font-size:14.5px}
.fp-badge small{color:#9fb6ce;font-size:11.5px;line-height:1.5;display:block;margin-top:3px}
.fp-trip .fp-trip-empty{padding:13px;border:1px dashed #3a5f83;border-radius:13px;font-size:12.5px;color:#9fb6ce;line-height:1.6;background:#06182c}
.fp-celebrate{display:grid;justify-items:center;gap:8px;text-align:center;padding:8px 4px}
.fp-celebrate .fp-stamp.big{width:64px;height:64px;font-size:30px;animation:fpStampIn .5s cubic-bezier(.2,1.4,.4,1)}
.fp-celebrate>b{color:#f4ca58;font-size:20px;letter-spacing:1.5px}
.fp-celebrate>strong{font-size:17px}
.fp-celebrate .fp-cpxp{display:inline-block;padding:7px 14px;border-radius:99px;background:linear-gradient(135deg,#fff0a7,#efc251);color:#0b1626;font-weight:1000;font-size:13px}
.fp-celebrate>em{font-style:normal;font-size:12px;color:#72e7a8}
@keyframes fpStampIn{0%{transform:scale(0) rotate(-40deg);opacity:0}70%{transform:scale(1.2) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0)}}
.fp-mini{display:grid;gap:10px}
.fp-mini-row>div{display:grid;gap:2px}
.fp-mini-row b{color:#f4ca58;font-size:15px}
.fp-mini-row small{color:#9fb6ce;font-size:11.5px;line-height:1.5}
.m-pp{font-style:normal;color:#f4ca58;font-weight:900;letter-spacing:.4px}
@media(max-width:700px){.fp-hero{padding:17px 15px 15px}.fp-hero-row{gap:13px}.fp-ring.big{width:88px;height:88px}.fp-ring.big>i{width:72px;height:72px;font-size:19px}.fp-owner h2{font-size:21px}.fp-ranks{grid-template-columns:repeat(2,1fr)}.fp-dhero h2{font-size:22px}}
/* PHASE 6 — PASSPORT STAMP + STATUS */
.fp-goldstamp{flex:none;min-width:74px;max-width:150px;padding:6px 8px;border:2px solid rgba(246,215,122,.95);outline:2px solid rgba(246,215,122,.3);outline-offset:2px;border-radius:10px;transform:rotate(-7deg);background:linear-gradient(135deg,#ffe9a8 0%,#f4ca58 55%,#c99f2e 100%);color:#3a2605;text-align:center;display:inline-grid;gap:2px;line-height:1.15;box-shadow:0 0 16px #f4d67a55;font-weight:1000;animation:fpStampIn .45s cubic-bezier(.2,1.4,.4,1)}
.fp-goldstamp>b{font-size:8.5px;letter-spacing:1.8px;color:#5a3c0a}
.fp-goldstamp>em{font-style:normal;font-size:11px;letter-spacing:.4px}
.fp-goldstamp>i{font-style:normal;font-size:8px;font-weight:800;color:#5a3c0a;opacity:.85}
.fp-ok{font-style:normal;color:#72e7a8;font-size:11px}
.fp-stamps-row{display:flex;gap:14px;flex-wrap:wrap;padding:2px 2px 4px}
.fp-complete .fp-goldstamp{min-width:104px;padding:10px 12px;border-radius:13px}
.fp-complete .fp-goldstamp>b{font-size:10.5px}
.fp-complete .fp-goldstamp>em{font-size:14px}
.fp-complete .fp-goldstamp>i{font-size:9.5px}
.fp-celebrate .fp-goldstamp{min-width:120px;padding:12px 14px;border-radius:14px}
.fp-celebrate .fp-goldstamp>b{font-size:11.5px}
.fp-celebrate .fp-goldstamp>em{font-size:16px}
.fp-celebrate .fp-goldstamp>i{font-size:10px}
@media(max-width:700px){.fp-stamps-row{gap:10px}}
/* PHASE 7 — PASS 2 PRODUCT JOURNEY (PV → Level จาก RANK_TIERS config) */
.fp-pv{display:grid;gap:12px;padding:14px 15px;border:1px solid #31537a;border-radius:16px;background:#081c30}
.fp-pv-top{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.fp-pv-cur{flex:0 0 auto;min-width:120px;display:grid;align-content:center;gap:2px;justify-items:center;text-align:center;padding:13px 12px;border-radius:15px;border:1px solid #d8ab44;background:radial-gradient(circle at 50% 0,#e7bc4f30,transparent 62%),#0a2440;box-shadow:0 0 18px #e9b83b33}
.fp-pv-cur small{font-size:9px;letter-spacing:1px;color:#9fb6ce}
.fp-pv-cur b{font-size:26px;font-weight:1000;color:#f6d76b;line-height:1.05}
.fp-pv-cur em{font-style:normal;font-size:11px;color:#cfe0f2}
.fp-pv-mid{flex:1;min-width:150px;display:grid;gap:8px;align-content:center}
.fp-pv-mid>span{display:grid;gap:1px}
.fp-pv-mid small{font-size:9.5px;color:#9fb6ce;letter-spacing:.5px}
.fp-pv-mid b{font-size:17px;color:#f4ca58}
.fp-pv-mid em{font-style:normal;font-size:10.5px;color:#bcd0e2}
.fp-pv-bar{grid-template-columns:1fr auto;align-items:center;gap:9px}
.fp-pv-bar>b{font-size:12px}
.fp-pv-road{display:flex;align-items:center;gap:6px}
.fp-pv-road>i{flex:1;position:relative;display:grid;gap:2px;text-align:center;padding:8px 2px 7px;border-radius:12px;border:1px solid #2c4a6b;background:#06182c;font-style:normal;z-index:1}
.fp-pv-road>i:not(:last-child)::after{content:'';position:absolute;left:100%;top:50%;width:6px;height:2px;background:#31537a;transform:translateY(-50%);z-index:-1}
.fp-pv-road>b{font-size:11.5px;color:#f4ca58}
.fp-pv-road>em{font-size:8px;color:#8fa9c8;font-weight:700}
.fp-pv-road>i.on{border-color:#d8ab44;background:linear-gradient(135deg,#ffe9a8,#d9a83f);box-shadow:0 0 12px #e9b83b44}
.fp-pv-road>i.on b,.fp-pv-road>i.on em{color:#3a2605}
.fp-pv-road>i.cur{border-color:#f6d76b;background:linear-gradient(135deg,#fff0a7,#efc251);box-shadow:0 0 0 1px rgba(246,215,107,.55),0 0 20px #e9b83b55;animation:fpGlow 2.4s ease-in-out infinite}
.fp-pv-road>i.cur b,.fp-pv-road>i.cur em{color:#3a2605}
/* PHASE 8 — PASS 3 LEARNING JOURNEY */
.fp-learn-items{gap:10px}
.fp-learn{display:flex;align-items:center;gap:11px;width:100%;padding:12px;border-radius:15px;border:1px solid #31537a;background:#0a2440;color:inherit;text-align:left;font:inherit;min-height:76px}
.fp-learn:not(:disabled){cursor:pointer}
.fp-learn:not(:disabled):active{transform:scale(.99)}
.fp-learn[disabled]{opacity:.5}
.fp-lico{flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;font-size:22px;border-radius:12px;background:#06182c;border:1px solid #2c4a6b}
.fp-lico.big{width:52px;height:52px;font-size:27px;background:linear-gradient(135deg,#0e2f58,#041527);border-color:#d8ab44}
.fp-learn.done{border-color:#d8ab44;background:linear-gradient(135deg,#0d2a47,#0a2440);box-shadow:0 0 14px #e9b83b22}
.fp-learn.done .fp-lico{background:linear-gradient(135deg,#ffe9a8,#d9a83f)}
.fp-lbody{flex:1;min-width:0;display:grid;gap:4px}
.fp-lbody>b{font-size:14px;color:#eaf2fb}
.fp-learn.done .fp-lbody>b{color:#f6d76b}
.fp-lbody>small{font-size:10px;color:#9fb6ce;line-height:1.4}
.fp-lchip{justify-self:start;font-style:normal;font-size:8.5px;font-weight:900;letter-spacing:.5px;padding:2px 8px;border-radius:999px;white-space:nowrap}
.fp-lchip.done{color:#3a2605;background:linear-gradient(135deg,#ffe9a8,#d9a83f)}
.fp-lchip.prog{color:#ffd97a;background:#17324f;border:1px solid #8a6a2a}
.fp-lchip.free{color:#7fd7ff;background:#102d46;border:1px solid #1f6084}
.fp-lchip.lock{color:#8fa9c8;background:#0d1c30;border:1px solid #263a4e}
.fp-lbar{display:block;height:5px;min-width:40px;border-radius:6px;background:#0d1c30;overflow:hidden}
.fp-lbar>i{display:block;height:100%;background:linear-gradient(90deg,#e9b83b,#f6d76b)}
.fp-lact{flex:0 0 auto;font-size:11.5px;color:#ffd97a;white-space:nowrap}
.fp-learn.lock .fp-lact{color:#8fa9c8}
.fp-lhead{position:relative;display:grid;grid-template-columns:auto 1fr;gap:9px 13px;align-items:start;padding:16px;border:1px solid #31537a;border-radius:18px;background:radial-gradient(circle at 50% 0,#e7bc4f20,transparent 60%),#0a2440;margin-bottom:4px}
.fp-lhead h2{font-size:20px;color:#eaf2fb;line-height:1.2}
.fp-lhead p{font-size:12px;color:#bcd0e2;line-height:1.55;margin-top:4px}
.fp-lhead .fp-lchip{justify-self:end}
.fp-lhead .fp-lprog{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}
.fp-lprog>b{font-size:11px;color:#f4ca58}
.fp-isteps{display:grid;gap:9px}
.fp-lstep{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:13px;border:1px solid #2c4a6b;background:#081c30;color:#d5e4f2;text-align:left;font:inherit;font-size:13px;cursor:pointer}
.fp-lstep:disabled{opacity:.5;cursor:default}
.fp-lstep>i{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border-radius:7px;border:1.5px solid #2c4a6b;color:#d9a83f;font-weight:900;font-style:normal;font-size:13px}
.fp-lstep.on{border-color:#d8ab44;color:#f6d76b;background:linear-gradient(135deg,#0d2a47,#0a2440)}
.fp-lstep.on>i{border-color:#d8ab44;background:linear-gradient(135deg,#ffe9a8,#d9a83f);color:#3a2605}
.fp-lsteps{display:flex;gap:9px;margin-top:14px}
.fp-lsteps .btn{flex:1;min-height:44px}
.fp-note.ok{border-color:#2e7d52;background:#0b2a1d;color:#7fe6ae}
/* PHASE 9 — PASS 4 OWNER JOURNEY */
.fp-detail{padding-bottom:28px}
.fp-cur-note{display:block;color:#f6d76b;font-style:normal;font-size:12px;margin:-6px 0 13px;line-height:1.5}
.fp-owner-ready{display:grid;gap:6px;text-align:center;padding:16px;border:1.5px solid #f6d76b;border-radius:18px;background:radial-gradient(circle at 50% 0,#e7bc4f30,transparent 60%),#081c30;margin-bottom:10px}
.fp-owner-ready>b{color:#f4ca58;font-size:16px;letter-spacing:1px}
.fp-owner-ready>span{font-size:12px;color:#bcd0e2;line-height:1.6}
.fp-ev{display:grid;gap:7px;margin-bottom:8px}
.fp-ev-row{font-size:12px;color:#cfe0f2;background:#081c30;border:1px solid #2c4a6b;border-radius:11px;padding:9px 11px;line-height:1.5}
.fp-ev-row.sub{background:transparent;border-style:dashed;color:#9fb6ce}
.fp-ev-empty{font-size:12px;color:#8fa9c8;padding:10px;border:1px dashed #2c4a6b;border-radius:11px}
.fp-ev-add{width:100%;min-height:46px}
.fp-btns{display:flex;gap:9px;flex-wrap:wrap;margin:2px 0 8px}
.fp-btns .btn{flex:1;min-width:130px;min-height:44px}
/* PHASE 10 — PASS 5 LEADERSHIP JOURNEY */
.ld-know-list{display:grid;gap:9px;margin-top:2px}
.ld-know-body{font-size:12px;color:#bcd0e2;line-height:1.6;margin-top:2px}
.ld-clv-ex{display:grid;gap:6px;border:1px dashed #b8872e;border-radius:12px;padding:10px 12px;background:#10203a;margin-top:6px}
.ld-clv-ex em{font-style:normal;font-size:10px;font-weight:900;letter-spacing:1px;color:#6ecff1;text-transform:uppercase}
.ld-clv-calc{font-size:12px;color:#eaf2fb;line-height:1.6}
.ld-clv-calc.b{color:#f4ca58;font-weight:700}
.ld-calc-row{font-size:11px;color:#b7ccdf}
.ld-disclaimer{font-size:11px;color:#d9c795;background:#241c09;border:1px solid #765f29;border-radius:12px;padding:10px 12px;line-height:1.6;margin:10px 0 2px}
.ld-ack{display:grid;gap:10px;padding:14px;border:1px solid #31537a;border-radius:16px;background:#081c30}
.ld-ack.on{border-color:#2e7d52;background:#0b2a1d}
.ld-ack span{font-size:13px;color:#dce9f7;line-height:1.6}
.ld-ack b{color:#7fe6ae;font-size:14px}
.ld-ack .btn{width:100%;min-height:46px}
.ld-map,.fp-map{display:grid;justify-items:center;gap:10px;padding:18px 10px;border:1px solid #31537a;border-radius:20px;background:radial-gradient(circle at 50% 0,#e7bc4f18,transparent 60%),#071b33}
.ld-you{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#fff0a4,#dca52e);color:#081c31;font-weight:1000;font-size:15px;box-shadow:0 0 22px #e6b23e66;letter-spacing:2px}
.ld-branches{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:100%;margin-top:6px}
.ld-side{display:grid;gap:4px;justify-items:center;text-align:center;padding:12px;border:1px dashed #3c5e82;border-radius:16px;background:#0a2440;min-height:96px;align-content:center}
.ld-side i{font-style:normal;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#122c47;color:#94aecb;border:1.5px solid #3c5e82;font-weight:900;font-size:16px}
.ld-side.on{border-color:#d8ab44;background:rgba(216,171,68,.07)}
.ld-side.on i{background:linear-gradient(145deg,#ffe9a8,#d9a83f);color:#3a2605}
.ld-side b{font-size:12px;color:#eaf2fb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}
.ld-side small{font-size:10px;color:#8fa9c8;line-height:1.5}
.ld-milestone{display:grid;gap:5px;text-align:center;padding:14px;margin-top:12px;border:1px solid #3c5e82;border-radius:16px;background:#0a2440}
.ld-milestone.on{border:1.5px solid #f6d76b;background:radial-gradient(circle at 50% 0,#e7bc4f30,transparent 60%),#081c30}
.ld-milestone b{color:#f4ca58;font-size:14px;letter-spacing:1px}
.ld-milestone span{font-size:11px;color:#bcd0e2;line-height:1.6}
.ld-clv-miles{display:grid;gap:8px;margin-top:2px}
.ld-clv-mile{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid #2c4a6b;border-radius:13px;background:#081c30}
.ld-clv-mile b{color:#d9a83f;font-size:13px;white-space:nowrap}
.ld-clv-mile span{font-size:12px;color:#bcd0e2;line-height:1.5}
.ld-clv-mile em{font-style:normal;font-size:10px;font-weight:900;padding:4px 8px;border-radius:999px;background:#122c47;color:#8fa9c8;white-space:nowrap}
.ld-clv-mile.on{border-color:#2e7d52;background:#0b2a1d}
.ld-clv-mile.on em{background:#1b4a34;color:#7fe6ae}
.ld-assign{display:grid;gap:7px;margin-top:2px}
.ld-assign-h{font-size:11px;color:#8fa9c8;margin-bottom:2px}
.ld-assign-row{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:8px 10px;border:1px solid #2c4a6b;border-radius:11px;background:#081c30;font-size:12px;color:#d5e4f2}
.ld-assign-row span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5}
.ld-assign-row .btn{min-height:36px;padding:6px 10px;font-size:11px}
.ld-assign-row .btn.onpick{border-color:#f4ca58;color:#f4ca58;background:rgba(244,202,88,.1)}
.ld-assign-empty{font-size:12px;color:#8fa9c8;padding:12px;border:1px dashed #2c4a6b;border-radius:11px;line-height:1.6;margin-top:2px}
.fp-lsteps .btn{min-height:46px}/* PHASE 11 - DIGITAL LAB ACCESS CONTROL (Deep Purple/Navy/Gold, Web3 เดิมยังอยู่) */
.btn.sm{min-height:36px;padding:6px 10px;font-size:11px;margin:0}
.btn.danger{background:linear-gradient(135deg,#ff7b7b,#c23a3a);border-color:#ff9b9b;color:#fff;font-weight:900;box-shadow:0 0 14px #e0525222}
.dl-hero{margin:0 0 16px;padding:20px;border:1px solid var(--gold);border-radius:22px;background:radial-gradient(120% 160% at 20% 0,#3a1d6b 0,#0d0830 42%,#020d1a 100%)}
.dl-hero h2{color:#f2ce65;font-size:26px;margin:6px 0 6px}
.dl-hero p{color:#cfd8e8;font-size:13px;line-height:1.7}
.dl-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.dl-st{font-style:normal;display:inline-flex;align-items:center;border-radius:999px;padding:5px 10px;font-size:10px;font-weight:900;letter-spacing:.4px}
.dl-st.on{background:rgba(36,211,156,.14);color:#3ee6a8;border:1px solid #27c69b}
.dl-st.off{background:rgba(255,255,255,.05);color:#8fa9c8;border:1px solid #3c5e82}
.dl-ctrl{margin:0 0 16px;padding:18px;border:1px solid #8a6bd6;border-radius:22px;background:linear-gradient(145deg,#120b2e,#0a0622);box-shadow:inset 0 0 0 1px #ffffff0d}
.dl-ctrl-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.dl-ctrl-head h3{color:#d9b6ff;font-size:17px;margin:4px 0}
.dl-ctrl-head p{color:#9fb0cf;font-size:11px;line-height:1.6}
.dl-mode-chip{font-size:10px;font-weight:900;letter-spacing:.6px;color:#c8b6f2;background:#1c1340;border:1px solid #8a6bd6;padding:6px 10px;border-radius:999px}
.dl-rows{display:grid;gap:10px}
.dl-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid #2e4a75;border-radius:14px;background:#071a33}
.dl-row b{font-size:13px;color:#eaf2fb}
.dl-row small{display:block;font-size:10px;color:#8fa9c8;margin-top:2px;line-height:1.4}
.dl-row .btn{margin-left:auto;min-width:74px}
.dl-mode-row{margin-top:14px;display:grid;gap:8px}
.dl-mode-row>b{font-size:11px;color:#c8b6f2;letter-spacing:1px}
.dl-modes{display:flex;flex-wrap:wrap;gap:8px}
.dl-modes button{flex:1;min-width:64px;min-height:44px;border:1px solid #3c5e82;border-radius:12px;background:#0a2440;color:#bcd0e2;font-size:11px;font-weight:900;cursor:pointer;padding:8px 6px}
.dl-modes button.on{border-color:#c9a6ff;background:#24184d;color:#e6d5ff;box-shadow:0 0 12px #8a6bd655}
.dl-user-row{margin-top:14px;display:grid;gap:8px}
.dl-user-row>b{font-size:11px;color:#c8b6f2;letter-spacing:1px}
.dl-users{display:flex;flex-direction:column;gap:8px}
.dl-user{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid #2e4a75;border-radius:12px;background:#08203a}
.dl-user span{font-size:13px;color:#eaf2fb;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-user .btn{margin-left:auto}
.dl-empty{font-size:12px;color:#8fa9c8;padding:12px;border:1px dashed #2e4a75;border-radius:12px;text-align:center}
.dl-emerg{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:14px;border:1px solid #c23a3a;border-radius:16px;background:linear-gradient(145deg,#3a1111,#160707)}
.dl-emerg.on{border-color:#e9b83b;background:linear-gradient(145deg,#3a2d0a,#160f03)}
.dl-emerg b{color:#ff9b9b;font-size:13px}
.dl-emerg.on b{color:#f2ce65}
.dl-emerg small{display:block;font-size:10px;color:#d39a9a;margin-top:3px;line-height:1.5}
.dl-emerg.on small{color:#d9c08a}
.dl-locked{margin:0 0 12px;padding:16px;border:1px dashed #3c5e82;border-radius:16px;background:#06162d;text-align:center}
.dl-locked b{display:block;font-size:14px;color:#bcd0e2;margin:4px 0}
.dl-locked .master-kicker{display:block}
.dl-locked span{font-size:11px;color:#8fa9c8;line-height:1.6}
.dl-blocked{margin:0 0 16px;padding:26px 20px;border:1px solid #c23a3a;border-radius:22px;background:radial-gradient(120% 160% at 20% 0,#3a1d6b 0,#0d0830 42%,#020d1a 100%);text-align:center}
.dl-blocked h2{color:#ff9b9b;font-size:22px;margin:8px 0 6px}
.dl-blocked p{color:#b9c7dc;font-size:13px;line-height:1.7;margin-bottom:14px}
.dl-compliance{margin:12px 0 4px;padding:12px 14px;border:1px solid #315b89;border-radius:12px;background:#061427;font-size:10.5px;color:#93abc6;line-height:1.8}
.dl-wallet,.dl-token{margin-top:4px}
@media(max-width:520px){.dl-hero h2{font-size:21px}.dl-row{flex-wrap:wrap}.dl-row .btn{margin-left:0;min-width:100%}}


/* ============ PHASE 12 · K-ELITE SYSTEM LANGUAGE & NEXT STEP ============ */
.phase-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:2px 0 12px}
.phase-strip>span{display:grid;gap:1px;padding:9px 7px;border:1px solid #31537a;border-radius:13px;background:#081b2e;color:#7f9abc;text-align:center}
.phase-strip>span b{font-size:11px;font-weight:900;letter-spacing:.5px;color:#cfe0f2}
.phase-strip>span small{font-size:8.5px;font-weight:900;letter-spacing:1px;color:var(--muted)}
.phase-strip>span.on{background:linear-gradient(150deg,#0b3153,#03182b);border-color:#b88b37;color:#fff}
.phase-strip>span.on b{color:#f4ca58}
.ns-card{display:flex;align-items:center;gap:13px;width:100%;padding:15px 14px;border:1px solid #b88b37;border-radius:17px;background:linear-gradient(140deg,#0b3153,#03182b);box-shadow:inset 0 0 22px #e8bd4c14;text-align:left;color:#fff}
.ns-ic{flex:none;font-size:23px}
.ns-body{flex:1;min-width:0;display:grid;gap:3px}
.ns-body b{font-size:14px;color:#f4ca58}
.ns-body small{font-size:11.5px;color:#9eb5d1;line-height:1.45}
.ac-grid{display:grid;gap:8px;margin-top:12px}
.ac-row{display:flex;align-items:center;gap:11px;width:100%;padding:13px 14px;border:1px solid #31537a;border-radius:15px;background:#081b2e;color:#cfe0f2;text-align:left;cursor:pointer}
.ac-row .ac-ic{font-size:16px;flex:none}
.ac-row b{flex:1;font-size:13.5px;color:#fff}
.ac-row .ac-cnt{font-size:11px;font-weight:900;letter-spacing:.6px;color:var(--muted)}
.ac-row .ac-chk{flex:none;font-size:14px;font-weight:900;color:#7f9abc}
.ac-row.on{border-color:#b88b37;background:linear-gradient(150deg,#0b3153,#03182b)}
.ac-row.on .ac-chk{color:#7fe3a0}
.ac-row.on .ac-cnt{color:#f4ca58}
.ac-row .ac-cnt.done{color:#7fe3a0}
.fp-lphase{font-style:normal;font-size:8.5px;font-weight:900;letter-spacing:.6px;color:#7fd7ff;background:#0f2438;border:1px solid #1f6084;border-radius:999px;padding:2px 8px;justify-self:start;white-space:nowrap}
/* ============ PHASE 13.1 · START HERE / GUIDED TOUR ============ */
.sh-wrap{display:flex;flex-direction:column;gap:16px;max-width:660px;margin:2px auto 30px}
.sh-hero{position:relative;overflow:hidden;border:1px solid #e8bd4c;border-radius:24px;padding:30px 24px 26px;background:linear-gradient(160deg,#0a1e35 0%,#050f1c 60%,#000 100%);text-align:center}
.sh-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 180px at 50% -60px,#1c4a75 0%,transparent 70%);opacity:.7;pointer-events:none}
.sh-badge{display:inline-block;font-size:11px;font-weight:900;letter-spacing:3px;color:#0a1e35;background:linear-gradient(120deg,#f4ca58,#e8a93c);border-radius:999px;padding:6px 14px;margin-bottom:14px}
.sh-hero h1{position:relative;font-size:clamp(22px,5vw,32px);color:#fff;font-weight:900;letter-spacing:.5px;margin:0 0 2px}
.sh-hero h1 em{font-style:normal;color:#f4ca58;text-shadow:0 0 22px #e8bd4c55}
.sh-sub{position:relative;color:#a9c1dc;font-size:14px;line-height:1.8;margin:12px 0 20px}
.sh-sub b{color:#f4ca58}
.sh-flow{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sh-flow-i{display:grid;gap:3px;padding:13px 6px;border:1px solid #31537a;border-radius:15px;background:#081b2e}
.sh-flow-i b{font-size:12px;font-weight:900;letter-spacing:.5px;color:#f4ca58}
.sh-flow-i em{font-style:normal;font-size:11px;color:#9eb5d1}
.sh-options{display:grid;gap:10px}
.sh-opt{display:flex;align-items:center;gap:14px;width:100%;min-width:0;padding:15px 16px;border:1px solid #31537a;border-radius:18px;background:linear-gradient(150deg,#0b3153,#03182b);color:#fff;text-align:left;cursor:pointer;transition:border-color .15s}
.sh-opt:hover{border-color:#e8bd4c}
.sh-opt-i{flex:none;font-size:24px}
.sh-opt div{display:grid;gap:3px;min-width:0}
.sh-opt b{font-size:14px;color:#f4ca58}
.sh-opt small{font-size:11.5px;color:#9eb5d1}
.sh-cta{width:100%;min-height:52px;font-size:16px;font-weight:900;letter-spacing:.5px}
.sh-skip{width:100%;min-height:44px;text-align:center;background:none;border:none;color:#9eb5d1;font-size:12.5px;cursor:pointer;padding:10px;text-decoration:underline}
#ztDim{position:fixed;inset:0;z-index:9990;background:rgba(3,8,16,.72)}
#ztHl{position:fixed;z-index:9991;box-shadow:0 0 0 2px #f4ca58,0 0 0 4px #b87f1e,0 0 34px #e8bd4c88;border-radius:14px;transition:all .18s ease;pointer-events:none}
#ztTip{position:fixed;z-index:9992;border:1px solid #e8bd4c;border-radius:18px;background:linear-gradient(160deg,#0d2440,#060f1c);box-shadow:0 18px 50px #000c,0 0 24px #e8bd4c28;padding:16px 16px 12px;color:#fff}
.zt-head{font-size:14px;font-weight:900;letter-spacing:.3px;color:#f4ca58;margin-bottom:7px}
.zt-body{font-size:12.5px;line-height:1.65;color:#c3d6ec;margin-bottom:13px}
.zt-foot{display:flex;gap:8px}
.zt-foot .btn{flex:1;min-height:44px;font-size:13px;font-weight:700;padding:0 6px}
.zt-prog{text-align:right;font-size:10.5px;font-weight:900;letter-spacing:1px;color:#7f9abc;margin-top:8px}
/* ============ PHASE 13.2 · FIRST 7 DAYS JOURNEY ============ */
.f7-card{background:linear-gradient(150deg,#0b3153,#03182b);border:1px solid #b88b37;border-radius:19px;padding:15px 16px;margin-top:10px;box-shadow:var(--shadow)}
.f7-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.f7-title{font-size:13px;font-weight:900;letter-spacing:1.2px;color:var(--gold)}
.f7-chip{font-size:10.5px;font-weight:900;letter-spacing:.5px;color:#ffd66e;background:rgba(232,189,76,.14);border:1px solid #e8bd4c;border-radius:999px;padding:4px 10px;white-space:nowrap}
.f7-chip.done{color:#8ff0b5;background:rgba(80,220,140,.14);border-color:#4ad38a}
.f7-sub{margin:9px 0 10px;font-size:12.5px;line-height:1.5;color:#c3d6ec}
.f7-sub b{color:#fff}
.f7-progress{display:flex;gap:6px;margin:4px 0 12px;flex-wrap:wrap}
.f7-dot{width:100%;flex:1;height:7px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10)}
.f7-dot.on{background:linear-gradient(90deg,#e8bd4c,#ffd66e);border-color:#e8bd4c}
.f7-cta{width:100%;min-height:46px;font-size:14px;font-weight:800}
.f7-card.f7-done{border-color:#4ad38a}
.f7-phase-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:4px 0 14px}
.f7-ps{background:rgba(255,255,255,.05);border:1px solid #35658b;border-radius:13px;padding:9px 4px;text-align:center}
.f7-ps b{display:block;font-size:11px;letter-spacing:.6px;color:#9fb6d0}
.f7-ps small{display:block;font-size:9.5px;color:#7f9abc;margin-top:2px}
.f7-ps.on{background:rgba(232,189,76,.12);border-color:#e8bd4c}
.f7-ps.on b{color:var(--gold)}
.f7-list{display:flex;flex-direction:column;gap:9px}
.f7-row{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:linear-gradient(150deg,#0c2a48,#05192d);border:1px solid #35658b;border-radius:16px;padding:13px;min-height:64px;color:#eaf2ff;cursor:pointer}
.f7-row.done{border-color:#4ad38a}
.f7-row.cur{border-color:#e8bd4c;box-shadow:0 0 0 1px rgba(232,189,76,.35)}
.f7-row.lock{opacity:.45;filter:grayscale(.25)}
.f7-day-num{font-size:11px;font-weight:900;letter-spacing:.5px;color:var(--gold);min-width:48px}
.f7-row.lock .f7-day-num{color:#9fb6d0}
.f7-day-main{flex:1;min-width:0}
.f7-day-main b{display:block;font-size:13.5px;color:#fff}
.f7-day-main small{display:block;font-size:11px;color:#9fb6d0;margin-top:2px;line-height:1.4}
.f7-day-st{font-size:10px;font-weight:900;letter-spacing:.5px;color:#8ff0b5;white-space:nowrap}
.f7-row.cur .f7-day-st{color:var(--gold)}
.f7-day-card{background:linear-gradient(150deg,#0c2a48,#05192d);border:1px solid #b88b37;border-radius:19px;padding:17px;box-shadow:var(--shadow)}
.f7-day-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.f7-phase-line{display:flex;gap:8px;font-size:10px;font-weight:900;letter-spacing:.5px;color:#7f9abc}
.f7-phase-line span.on{color:var(--gold)}
.f7-day-title{margin:13px 0 4px;font-size:20px;color:#fff}
.f7-day-msg{margin:0 0 10px;font-size:13px;font-style:italic;color:var(--gold)}
.f7-day-obj{margin:0 0 12px;font-size:12.5px;line-height:1.6;color:#c3d6ec}
.f7-mission{background:rgba(232,189,76,.08);border:1px dashed #b88b37;border-radius:14px;padding:12px}
.f7-mission b{display:block;font-size:12px;letter-spacing:.5px;color:var(--gold)}
.f7-mission small{display:block;font-size:12px;line-height:1.55;color:#c3d6ec;margin-top:4px}
.f7-actions{display:flex;flex-direction:column;gap:9px}
.f7-action{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:rgba(255,255,255,.05);border:1px solid #35658b;border-radius:15px;padding:12px 14px;min-height:56px;color:#eaf2ff;cursor:pointer}
.f7-action i{font-style:normal;font-size:15px;color:var(--gold)}
.f7-action span b{display:block;font-size:13.5px;color:#fff}
.f7-action span small{display:block;font-size:10.5px;color:#9fb6d0;margin-top:2px}
.f7-donebtn{width:100%;min-height:48px;font-size:14.5px;font-weight:800;margin-top:13px}
.f7-alldone{background:rgba(80,220,140,.10);border:1px solid #4ad38a;border-radius:14px;padding:12px;margin-top:13px;text-align:center}
.f7-alldone b{display:block;font-size:13px;color:#8ff0b5}
.f7-alldone small{display:block;font-size:11px;color:#c3d6ec;margin-top:3px}
.f7-locked{background:rgba(255,255,255,.05);border:1px dashed #35658b;border-radius:14px;padding:12px;margin-top:13px;text-align:center;font-size:12.5px;font-weight:700;color:#9fb6d0}
.f7-nextwrap{margin-top:11px}
.f7-nextok{text-align:center;margin-bottom:9px}
.f7-nextok b{display:block;font-size:12.5px;color:#8ff0b5}
.f7-nextok small{display:block;font-size:11px;color:var(--gold);margin-top:2px}
@media(max-width:430px){.f7-day-title{font-size:18px}.f7-ps small{font-size:9px}.f7-day-num{min-width:42px}}
/* ============ PHASE 13.2.1 · HOME UX CLEANUP (VISUAL ONLY) ============ */
/* 6. Greeting compact (~20-30% shorter) */
.home-greet{min-height:0;padding:12px 16px}
.home-greet h2{font-size:17px}
.home-greet p{font-size:11.5px;line-height:1.42;margin-top:3px}
.home-greet .master-kicker{font-size:9.5px;letter-spacing:1.2px}
.greet-row{margin-top:7px}
.home-greet .btn.gold{min-height:44px}
/* 5. Quick Menu compact, touch >=44px */
.quick6{gap:7px;margin-top:9px}
.quick6 button{min-height:62px;font-size:12px;padding:6px 4px}
.quick6 b{font-size:20px;margin-bottom:3px}
/* 2. Central Progress compact (secondary) */
.cp-compact{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px 13px;border:1px solid #315b89;border-radius:14px;background:linear-gradient(135deg,#0a2140,#07162f)}
.cp-compact .cp-c{display:flex;flex-direction:column;align-items:center;min-width:52px}
.cp-compact .cp-c b{font-size:15px;color:var(--gold)}
.cp-compact .cp-c small{font-size:9.5px;color:#9eb5d1;margin-top:1px}
.cp-compact .cp-lv{margin-left:auto;font-size:10.5px;font-weight:900;letter-spacing:.5px;color:#cfe0f2;border:1px solid #315b89;border-radius:999px;padding:5px 10px}
/* 3. FIRST 7 DAYS prominence + clearer progress */
.f7-card.f7-primary{border:1.5px solid #f4d67a;box-shadow:0 0 0 1px #8a6a27,0 12px 30px #0006,inset 0 0 24px rgba(232,189,76,.10)}
.f7-mission-label{display:inline-block;margin:10px 0 2px;font-size:10.5px;font-weight:900;letter-spacing:1px;color:#0b1a2e;background:linear-gradient(90deg,#e8bd4c,#ffd66e);border-radius:999px;padding:3px 10px}
.f7-sub-lg{font-size:14px;line-height:1.55;color:#eaf2ff}
.f7-progress-lg{gap:5px;margin:10px 0 13px}
.f7-progress-lg .f7-dot{height:10px}
/* 4. Duplicate mission: game challenge becomes secondary until F7 complete */
.home-mission.secondary{padding:12px 14px;border:1px solid #35658b;background:linear-gradient(145deg,#0a2140,#061226);box-shadow:none;opacity:.94}
.home-mission.secondary .stage-title{margin-bottom:10px}
.home-mission.secondary .stage-title b{font-size:12.5px;color:#cfe0f2}
.home-mission.secondary .stage-title span{font-size:11px;color:#9eb5d1}
/* 8. Day detail spacing polish (minor) */
.f7-day-card{padding:16px}
.f7-day-obj{margin-bottom:10px}
.f7-actions{gap:8px}

/* ============ PHASE 13.3A · K-ELITE ACADEMY ============ */
.ac-entry{display:flex;align-items:center;gap:13px;width:100%;text-align:left;cursor:pointer;margin:0 0 14px;padding:16px;border-radius:18px;border:1.5px solid #b88b37;background:linear-gradient(150deg,#0c2a48,#05192d);box-shadow:0 12px 30px #0006,inset 0 0 26px rgba(232,189,76,.08);color:#eaf2ff;font-family:inherit}
.ac-entry-ic{font-size:30px;line-height:1;filter:drop-shadow(0 0 10px rgba(232,189,76,.45))}
.ac-entry-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ac-entry-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ac-entry-top b{font-size:15px;color:#ffd66e;letter-spacing:.3px}
.ac-entry small{font-size:12px;line-height:1.55;color:#c7d8ec}
.ac-entry-prog{font-size:11.5px;color:#9fb8d6;font-weight:700}
.ac-track-go{color:#ffd66e;font-size:22px;flex:none}
.ac-badge{font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.6px;border-radius:999px;padding:3px 8px;white-space:nowrap}
.ac-badge.ready{color:#0b1a2e;background:linear-gradient(90deg,#e8bd4c,#ffd66e)}
.ac-badge.soon{color:#ffd66e;background:transparent;border:1px solid #b88b37}
.ac-hero{margin:0 0 14px;padding:20px 18px;border-radius:20px;border:1px solid #35658b;background:linear-gradient(150deg,#0b3153,#03182b);box-shadow:inset 0 0 30px rgba(46,120,200,.10)}
.ac-hero .master-kicker{font-size:10px;letter-spacing:2px;color:#ffd66e;font-weight:900;margin-bottom:8px}
.ac-hero h2{font-size:19px;line-height:1.4;margin:0 0 8px;color:#fff}
.ac-hero p{font-size:12.5px;line-height:1.6;color:#c7d8ec;margin:0 0 12px}
.ac-hero-prog{font-size:12px;color:#eaf2ff}
.ac-hero-prog b{color:#ffd66e;font-size:15px}
.ac-flow{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin:0 0 16px;padding:12px;border-radius:14px;border:1px solid #244a6e;background:#061a30}
.ac-flow-i{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:60px}
.ac-flow-i b{font-size:11px;color:#ffd66e;letter-spacing:.4px}
.ac-flow-i small{font-size:10.5px;color:#9fb8d6}
.ac-flow-ar{color:#5f86ac;font-size:16px;font-style:normal}
.ac-tracks{display:flex;flex-direction:column;gap:10px}
.ac-track{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;padding:14px;border-radius:16px;border:1px solid #35658b;background:linear-gradient(150deg,#0c2a48,#05192d);color:#eaf2ff;font-family:inherit;min-height:64px}
.ac-track.soon{border-color:#244a6e;background:linear-gradient(150deg,#0a1f38,#04101f);opacity:.92}
.ac-track-ic{font-size:26px;line-height:1;flex:none}
.ac-track-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.ac-track-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ac-track-top b{font-size:13.5px;color:#fff}
.ac-track small{font-size:11.5px;line-height:1.5;color:#c7d8ec}
.ac-bar{display:block;height:6px;border-radius:999px;background:#0a2540;overflow:hidden}
.ac-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#e8bd4c,#ffd66e)}
.ac-soon-note{font-size:10.5px;color:#9fb8d6;letter-spacing:.4px}
.ac-crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.ac-crumb button{cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:900;letter-spacing:.5px;color:#ffd66e;background:#0a2140;border:1px solid #b88b37;border-radius:999px;padding:8px 14px;min-height:44px}
.ac-crumb span{font-size:11px;color:#9fb8d6}
.ac-lesson{display:flex;flex-direction:column;gap:12px}
.ac-lesson-head{display:flex;gap:13px;align-items:flex-start;padding:16px;border-radius:18px;border:1px solid #35658b;background:linear-gradient(150deg,#0b3153,#03182b)}
.ac-lesson-ic{font-size:30px;line-height:1;flex:none}
.ac-lesson-b{flex:1;min-width:0}
.ac-lesson-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ac-chip{font-size:9.5px;font-weight:900;letter-spacing:.8px;border:1px solid #ffd66e;border-radius:999px;padding:3px 9px}
.ac-dur{font-size:10.5px;color:#9fb8d6}
.ac-lesson-head h2{font-size:16.5px;line-height:1.4;margin:0 0 4px;color:#fff}
.ac-lesson-head p{font-size:12px;line-height:1.55;color:#c7d8ec;margin:0}
.ac-video{padding:14px;border-radius:16px;border:1px dashed #35658b;background:#061a30}
.ac-video-frame{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px 14px;border-radius:12px;background:linear-gradient(150deg,#071e36,#03101f);text-align:center}
.ac-video-ic{font-size:26px;opacity:.9}
.ac-video-frame b{font-size:13px;color:#eaf2ff}
.ac-video-frame small{font-size:11px;color:#9fb8d6}
.ac-say{padding:14px 16px;border-radius:16px;border:1px solid #b88b37;background:linear-gradient(150deg,#2a1f08,#0d1524)}
.ac-say-label{font-size:9.5px;font-weight:900;letter-spacing:1.4px;color:#ffd66e;margin-bottom:6px}
.ac-say p{font-size:14px;line-height:1.55;color:#fff;margin:0}
.ac-sec{padding:14px 16px;border-radius:16px;border:1px solid #244a6e;background:#061a30}
.ac-sec-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ac-sec-ic{font-size:15px}
.ac-sec-head b{font-size:13px;color:#ffd66e;letter-spacing:.2px}
.ac-body{font-size:12.5px;line-height:1.65;color:#d6e4f4;margin:0}
.ac-list{margin:0;padding-left:4px;list-style:none;display:flex;flex-direction:column;gap:7px}
.ac-list li{position:relative;padding-left:16px;font-size:12.5px;line-height:1.6;color:#d6e4f4}
.ac-list li:before{content:"";position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:#ffd66e}
.ac-sec-action{border-color:#b88b37;background:linear-gradient(150deg,#0d2036,#061226)}
.ac-sec-practice{border-color:#2f6f52;background:linear-gradient(150deg,#082418,#05101f)}
.ac-sec-visual{border-color:#5a4a86;background:linear-gradient(150deg,#1a1430,#0a0f1f)}
.ac-note{padding:12px 14px;border-radius:14px;border:1px solid #5a4a86;background:#150f2a;font-size:11px;line-height:1.6;color:#cbb9f0}
.ac-input{width:100%;box-sizing:border-box;min-height:80px;resize:vertical;font-family:inherit;font-size:12.5px;line-height:1.6;color:#eaf2ff;background:#061a30;border:1px solid #35658b;border-radius:14px;padding:12px 14px}
.ac-input:focus{outline:none;border-color:#ffd66e}
.ac-next{display:flex;flex-direction:column;gap:9px}
.ac-action{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;padding:13px 15px;border-radius:14px;border:1px solid #35658b;background:linear-gradient(150deg,#0c2a48,#05192d);color:#eaf2ff;font-family:inherit;min-height:56px}
.ac-action i{font-size:20px;font-style:normal;flex:none}
.ac-action span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ac-action b{font-size:13px;color:#fff}
.ac-action small{font-size:11px;color:#9fb8d6}
.ac-completed{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:16px;border:1px solid #2f6f52;background:linear-gradient(150deg,#082418,#05101f);text-align:center}
.ac-completed b{font-size:13.5px;color:#8ff0b5}
.ac-completed small{font-size:11px;color:#9fb8d6}
.ac-cta{width:100%;min-height:48px;font-size:14px}
@media(max-width:460px){
 .ac-hero{padding:16px 14px}
 .ac-hero h2{font-size:16.5px}
 .ac-flow{gap:2px;padding:10px 6px}
 .ac-flow-i{min-width:0;flex:1}
 .ac-flow-i b{font-size:9.5px}
 .ac-flow-i small{font-size:9.5px}
 .ac-flow-ar{font-size:12px}
 .ac-lesson-head{padding:14px}
 .ac-lesson-head h2{font-size:15.5px}
}
/* PHASE 13.3A visual polish — Thai-first hierarchy */
.ac-en-anchor{font-size:10.5px;font-weight:900;letter-spacing:1.8px;color:#9fb8d6;text-transform:uppercase;margin:0 0 10px}
.ac-framework{display:flex;flex-direction:column;gap:3px;margin:0 0 12px;padding:11px 13px;border-radius:12px;border:1px solid #b88b37;background:#0a2140}
.ac-framework b{font-size:12.5px;letter-spacing:.5px;color:#ffd66e}
.ac-framework small{font-size:11px;color:#c7d8ec}
.ac-track-en{font-size:9.5px;font-weight:900;letter-spacing:1.6px;color:#7f9ab4;text-transform:uppercase}
.ac-lesson-no{display:block;font-size:10px;font-weight:900;letter-spacing:1.2px;color:#9fb8d6;text-transform:uppercase;margin-bottom:2px}
.ac-lesson-row .ac-track-b{gap:3px}
.ac-lesson-row{min-height:56px}
/* PHASE 13.3A mobile bottom space — last card/CTA fully reachable above bottom nav + safe area */
@media(max-width:520px){
 .ac-lesson{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
 .ac-cta{margin-bottom:6px}
}
/* shared kconfirm/kdialog hotfix — overlay covers viewport so primary button stays fully visible above bottom nav (390/430) */
#kdialog{position:fixed;inset:0;display:none;place-items:center;z-index:310;background:rgba(1,8,16,.72);backdrop-filter:blur(4px);padding:18px}
#kdialog .input{width:100%}
@media(max-width:520px){
 #kdialog{padding:16px 14px calc(96px + env(safe-area-inset-bottom));align-items:center}
 #kdialog .kdialog-card{max-height:calc(100vh - 150px - env(safe-area-inset-bottom));overflow-y:auto}
}
/* ============ PHASE 13.3B · DREAM & WHY + Y=X INTERACTIVE COACHING ============ */
.ac-coach{display:flex;flex-direction:column;gap:11px;margin:4px 0 14px;padding:15px 14px;border-radius:18px;border:1px solid #35658b;background:linear-gradient(160deg,#08213b,#05101f)}
.ac-coach-label{font-size:10.5px;font-weight:900;letter-spacing:1.4px;color:#ffd66e;text-transform:uppercase}
.ac-q{margin:0;font-size:13px;line-height:1.6;color:#eaf2ff;font-weight:600}
.ac-field{display:flex;flex-direction:column;gap:6px}
.ac-field>label{font-size:11px;font-weight:800;letter-spacing:.4px;color:#9fb8d6}
.ac-ta{min-height:70px}
.ac-out{padding:12px 14px;border-radius:14px;border:1px solid #b88b37;background:#0a2140}
.ac-out-label{font-size:10px;font-weight:900;letter-spacing:1.6px;color:#ffd66e;text-transform:uppercase;margin-bottom:4px}
.ac-out p{margin:0;font-size:13px;line-height:1.55;color:#fff;word-break:break-word}
.ac-chips{display:flex;flex-wrap:wrap;gap:7px}
.ac-chipbtn{min-height:44px;padding:9px 13px;border-radius:12px;border:1px solid #35658b;background:#0b2743;color:#cfe0f2;font-family:inherit;font-size:12px;cursor:pointer}
.ac-chipbtn.on{border-color:#ffd66e;background:#123a5f;color:#fff;font-weight:800}
.ac-inline{display:flex;gap:8px;align-items:stretch}
.ac-inline .ac-input{flex:1;min-height:46px}
.ac-inline .btn{flex:none;min-height:46px}
.ac-goals{display:flex;flex-direction:column;gap:8px}
.ac-goalopt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;min-height:48px;padding:11px 13px;border-radius:12px;border:1px solid #35658b;background:#0b2743;color:#eaf2ff;font-family:inherit;font-size:12.5px;cursor:pointer}
.ac-goalopt.on{border-color:#ffd66e;background:#123a5f;font-weight:800}
.ac-goalopt i{font-style:normal;flex:none}
.ac-ladder{display:flex;flex-direction:column;gap:8px}
.ac-ladder-step{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border-radius:12px;border:1px solid #5a4a86;background:#150f2a}
.ac-ladder-step>span{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#ffd66e;color:#08213b;font-size:11px;font-weight:900}
.ac-ladder-step>p{margin:0;flex:1;font-size:12.5px;line-height:1.55;color:#eaf2ff;word-break:break-word}
.ac-ladder-add{display:flex;gap:8px;align-items:stretch}
.ac-ladder-add .ac-input{flex:1;min-height:46px}
.ac-ladder-add .btn{flex:none;min-height:46px}
.ac-ladder-view{display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:14px;border:1px dashed #35658b;background:#05192d}
.ac-lv-row{display:flex;flex-direction:column;gap:2px}
.ac-lv-row small{font-size:10px;font-weight:900;letter-spacing:1.3px;color:#7fb2ff}
.ac-lv-row b{font-size:12.5px;color:#eaf2ff;word-break:break-word}
.ac-whycard{border-radius:18px;padding:18px 16px;border:1px solid #b88b37;background:linear-gradient(160deg,#123a5f,#08213b);display:flex;flex-direction:column;gap:11px}
.ac-whycard-h{display:flex;flex-direction:column;gap:2px;padding-bottom:11px;border-bottom:1px solid rgba(255,214,110,.35)}
.ac-whycard-h span{font-size:11px;font-weight:900;letter-spacing:2px;color:#ffd66e}
.ac-whycard-h b{font-size:15px;color:#fff}
.ac-whycard-row{display:flex;flex-direction:column;gap:2px}
.ac-whycard-row small{font-size:10.5px;font-weight:800;letter-spacing:.3px;color:#9fb8d6}
.ac-whycard-row b{font-size:13px;color:#fff;word-break:break-word}
.ac-eq{text-align:center;font-size:11.5px;font-weight:900;letter-spacing:1px;color:#8ff0b5;padding:10px;border-radius:12px;border:1px solid #2f6f52;background:#082418}
.ac-db{display:flex;flex-direction:column;gap:9px;padding:13px;border-radius:14px;border:1px solid #35658b;background:#05192d}
.ac-db>b{font-size:12px;color:#fff}
.ac-db-list{display:flex;flex-wrap:wrap;gap:6px}
.ac-db-list span{font-size:11px;padding:5px 10px;border-radius:20px;border:1px solid #35658b;background:#0b2743;color:#cfe0f2}
.ac-soon-note{font-size:11.5px;color:#9fb8d6;padding:10px 12px;border-radius:12px;border:1px dashed #35658b;background:#05192d}
.ac-rev-list{display:flex;flex-direction:column;gap:9px}
.ac-rev{position:relative;padding:12px 40px 12px 13px;border-radius:12px;border:1px solid #35658b;background:#0b2743}
.ac-rev b{font-size:11px;color:#7fb2ff}
.ac-rev p{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:#eaf2ff;word-break:break-word}
.ac-rev small{display:block;margin-top:3px;font-size:11px;color:#9fb8d6}
.ac-del{flex:none;width:30px;height:30px;min-height:30px;border-radius:50%;border:1px solid #35658b;background:#05192d;color:#9fb8d6;font-size:12px;cursor:pointer}
.ac-rev .ac-del{position:absolute;top:8px;right:8px}
.ac-suggest{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:14px;border:1px solid #2f6f52;background:#082418}
.ac-suggest-label{font-size:10px;font-weight:900;letter-spacing:1.4px;color:#8ff0b5;text-transform:uppercase}
.ns-coach{display:flex;align-items:center;gap:8px;width:100%;margin-top:9px;min-height:46px;padding:11px 14px;border-radius:14px;border:1px solid #35658b;background:linear-gradient(150deg,#0c2a48,#05192d);color:#eaf2ff;font-family:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.ns-coach i{font-style:normal}
.f7-whyhint{margin-top:12px;padding:12px 14px;border-radius:14px;border:1px solid #b88b37;background:#0a2140;font-size:12.5px;line-height:1.55;color:#ffd66e}
@media(max-width:460px){
 .ac-coach{padding:13px 12px}
 .ac-whycard{padding:16px 14px}
 .ac-inline{flex-direction:column}
 .ac-ladder-add{flex-direction:column}
}
/* ============ PHASE 13.3C · OBJECTION COACH · 15 REAL-WORLD CONVERSATIONS + ROLE PLAY ============ */
.oc-coach{gap:13px}
.oc-scenario{padding:13px 14px;border-radius:14px;border:1px solid #b88b37;background:linear-gradient(150deg,#0a2140,#05192d)}
.oc-scen-label{font-size:10px;font-weight:900;letter-spacing:1.4px;color:#ffd66e;text-transform:uppercase}
.oc-scen-text{margin:6px 0 0;font-size:13px;line-height:1.6;color:#eaf2ff;font-style:italic}
.oc-listen{display:flex;flex-direction:column;gap:8px}
.oc-li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1px solid #35658b;background:#0b2743}
.oc-li span{flex:none;font-size:14px;line-height:1.4}
.oc-li p{margin:0;font-size:12.5px;line-height:1.55;color:#eaf2ff}
.oc-hint{margin:0 0 2px;font-size:11.5px;color:#9fb8d6}
.oc-choices{display:flex;flex-direction:column;gap:9px}
.oc-choice{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;cursor:pointer;padding:12px 14px;border-radius:14px;border:1px solid #35658b;background:linear-gradient(150deg,#0c2a48,#05192d);color:#eaf2ff;font-family:inherit;font-size:12.5px;line-height:1.55;min-height:52px}
.oc-choice b{flex:none;width:22px;height:22px;border-radius:50%;background:#0a3152;border:1px solid #35658b;color:#ffd66e;font-size:11px;display:flex;align-items:center;justify-content:center}
.oc-choice span{flex:1;min-width:0}
.oc-choice.on{border-color:#ffd66e;box-shadow:0 0 0 1px #ffd66e55}
.oc-choice.on.good{border-color:#2f9f6b;box-shadow:0 0 0 1px #2f9f6b55}
.oc-choice.on.adjust{border-color:#b88b37}
.oc-choice.on.avoid{border-color:#c25a5a;box-shadow:0 0 0 1px #c25a5a55}
.oc-fb{padding:11px 13px;border-radius:12px;border-left:3px solid #35658b;background:#0b2743}
.oc-fb b{display:block;font-size:11px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:3px}
.oc-fb p{margin:0;font-size:12.5px;line-height:1.55;color:#eaf2ff}
.oc-fb.good{border-left-color:#2f9f6b;background:#082418}
.oc-fb.good b{color:#8ff0b5}
.oc-fb.adjust{border-left-color:#b88b37;background:#2a2109}
.oc-fb.adjust b{color:#ffd66e}
.oc-fb.avoid{border-left-color:#c25a5a;background:#2a0d0d}
.oc-fb.avoid b{color:#ff9b9b}
.oc-ans{display:flex;flex-direction:column;gap:9px}
.oc-ans-b{padding:12px 14px;border-radius:13px;border:1px solid #35658b;background:#061a30}
.oc-ans-tag{display:inline-block;margin-bottom:5px;font-size:9.5px;font-weight:900;letter-spacing:1.2px;color:#7fb2ff;text-transform:uppercase}
.oc-ans-b p{margin:0;font-size:12.5px;line-height:1.6;color:#eaf2ff}
.oc-dont{display:flex;flex-direction:column;gap:8px}
.oc-dont-i{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1px solid #5a3030;background:#1c0b0b}
.oc-dont-i span{flex:none}
.oc-dont-i p{margin:0;font-size:12.5px;line-height:1.55;color:#ffc9c9}
.oc-safety{padding:12px 14px;border-radius:13px;border:1px solid #b88b37;background:#2a2109}
.oc-safety b{display:block;font-size:11.5px;color:#ffd66e;margin-bottom:4px}
.oc-safety p{margin:0;font-size:12.5px;line-height:1.6;color:#ffe6a8}
.oc-legal{padding:14px;border-radius:15px;border:1px solid #7fb2ff;background:linear-gradient(160deg,#0a1f3a,#061422)}
.oc-legal-h{font-size:11px;font-weight:900;letter-spacing:1.3px;color:#9cc4ff;text-transform:uppercase}
.oc-legal-p{margin:7px 0 0;font-size:12.5px;line-height:1.6;color:#dbe8fb}
.oc-legal-list{margin:6px 0 0;padding-left:18px}
.oc-legal-list li{font-size:12px;line-height:1.6;color:#dbe8fb;margin-bottom:3px}
.oc-srcs{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.oc-src{display:inline-flex;align-items:center;min-height:44px;padding:9px 13px;border-radius:11px;border:1px solid #7fb2ff;background:#0c2a48;color:#cfe3ff;font-size:12px;font-weight:700;text-decoration:none}
.oc-industry{margin-top:11px;padding:9px 11px;border-radius:10px;border:1px dashed #b88b37;background:#1b1607;color:#ffd66e;font-size:11px;font-weight:900;letter-spacing:.5px}
.oc-industry small{display:block;margin-top:4px;font-size:11px;font-weight:400;letter-spacing:0;line-height:1.5;color:#e6d3a0}
.oc-legal-note{margin:11px 0 0;font-size:11px;line-height:1.55;color:#9fb8d6}
.oc-rp{display:flex;flex-direction:column;gap:10px;padding:13px 14px;border-radius:15px;border:1px solid #7fb2ff;background:linear-gradient(160deg,#0b2743,#05101f)}
.oc-rp-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.oc-rp-head span{font-size:11px;font-weight:900;letter-spacing:1.2px;color:#9cc4ff;text-transform:uppercase}
.oc-rp-head em{font-style:normal;font-size:11px;color:#9fb8d6}
.oc-rp-done{color:#8ff0b5 !important}
.oc-rp-prospect{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:13px;background:#061a30;border:1px solid #35658b}
.oc-rp-prospect span{flex:none}
.oc-rp-prospect p{margin:0;font-size:13px;line-height:1.55;color:#fff;font-style:italic}
.oc-restart{align-self:flex-start;min-height:44px}
.oc-next-i{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:12px;border:1px solid #35658b;background:#0b2743}
.oc-next-i span{flex:none;color:#ffd66e}
.oc-next-i p{margin:0;font-size:12.5px;line-height:1.55;color:#eaf2ff}
@media(max-width:460px){
 .oc-srcs{flex-direction:column}
 .oc-src{justify-content:center}
}

/* ============ PHASE 13.3D · COMMUNICATION LAB + EDIFY LAB ============ */
.ed-coach{gap:13px}
.ed-builder{display:flex;flex-direction:column;gap:12px}
.ed-builder .ac-field label{font-size:12px;font-weight:800;color:#cfe3ff;letter-spacing:.4px}
.ed-builder .ac-ta{min-height:64px}
.ed-preview{display:flex;flex-direction:column;gap:8px;padding:13px 14px;border-radius:14px;border:1px solid #b88b37;background:linear-gradient(160deg,#0a1f3a,#061422)}
.ed-pv-row{display:flex;flex-direction:column;gap:3px;padding:9px 11px;border-radius:11px;border:1px solid #2a4a6d;background:#061a30}
.ed-pv-row small{font-size:9.5px;font-weight:900;letter-spacing:1.2px;color:#ffd66e;text-transform:uppercase}
.ed-pv-row p{margin:0;font-size:13px;line-height:1.6;color:#eaf2ff;word-break:break-word}
.ed-warn{display:flex;flex-direction:column;gap:8px}
.ed-warn-i{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;border:1px solid #35658b;background:#0b2743}
.ed-warn-i span{flex:none;font-size:13px;line-height:1.5}
.ed-warn-i p{margin:0;font-size:12.5px;line-height:1.55;color:#eaf2ff}
.ed-warn-i.good{border-color:#2f9f6b;background:#082418}
.ed-warn-i.good span{color:#8ff0b5}
.ed-warn-i.warn{border-color:#b88b37;background:#2a2109}
.ed-warn-i.warn span{color:#ffd66e}
.ed-warn-i.bad{border-color:#c25a5a;background:#2a0d0d}
.ed-warn-i.bad span{color:#ff9b9b}
.ed-actions{display:flex;flex-wrap:wrap;gap:10px}
.ed-actions .btn{min-height:44px;flex:1;min-width:140px}
@media(max-width:460px){
 .ed-actions{flex-direction:column}
 .ed-actions .btn{width:100%}
}

/* PHASE 13.3E · IMAGE & PRESENCE LAB */
.pr-check{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.pr-check-i{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px;color:inherit;cursor:pointer;min-height:44px}
.pr-check-i.on{border-color:rgba(143,240,181,.5);background:rgba(143,240,181,.08)}
.pr-check-box{width:22px;height:22px;flex:0 0 22px;border-radius:6px;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:13px;color:#8ff0b5}
.pr-check-i.on .pr-check-box{background:rgba(143,240,181,.2);border-color:rgba(143,240,181,.6)}
.pr-check-i p{margin:0;font-size:14px;line-height:1.6}
.pr-prog{font-size:13px;color:#ffd66e;margin:8px 0}
.pr-sec{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.pr-sec-note{font-size:13px;color:#9fb0d0;margin:6px 0}
.pr-mark-i{display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px}
.pr-mark-i p{margin:0;font-size:14px;line-height:1.6}
.pr-mark-btns{display:flex;gap:8px}
.pr-mark-b{flex:1;min-height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:transparent;color:inherit;cursor:pointer;font-size:13px}
.pr-mark-b.on{border-color:#ffd66e;background:rgba(255,214,110,.14);color:#ffd66e}
.pr-timer{display:flex;flex-direction:column;align-items:center;gap:10px;background:rgba(255,214,110,.06);border:1px solid rgba(255,214,110,.3);border-radius:14px;padding:16px;margin:10px 0}
.pr-timer b{font-size:34px;color:#ffd66e;font-variant-numeric:tabular-nums}
.pr-timer.done{border-color:rgba(143,240,181,.5);background:rgba(143,240,181,.08)}
.pr-timer.done b{color:#8ff0b5}
.pr-timer .btn{min-height:44px;width:100%}
.pr-gate{display:flex;flex-direction:column;gap:4px;border-radius:12px;padding:14px;margin:12px 0;background:rgba(255,120,120,.08);border:1px solid rgba(255,120,120,.35)}
.pr-gate b{font-size:15px}
.pr-gate small{color:#e7b7b7}
.pr-gate.ok{background:rgba(143,240,181,.1);border-color:rgba(143,240,181,.45)}
.pr-gate.ok small{color:#b8e7c8}

/* ============ PHASE 5 — GAME CENTER V3 HOME (premium hub skin) ============
   All rules scoped to .gchub / .gc-entry. Reuses the app's own tokens
   (--master-gold, --master-line, --master-blue, --cyan, --muted) so the hub
   belongs to the same K-ELITE design system. No new font, no new asset.
   ======================================================================== */
.gc-entry{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px 16px;margin:0 0 14px;border-radius:16px;border:1px solid var(--master-line);background:linear-gradient(135deg,#071b3c,#0b2c5c);color:#fff;cursor:pointer}
.gc-entry-ic{font-size:24px;line-height:1}
.gc-entry-b{display:grid;gap:3px;flex:1;min-width:0}
.gc-entry-b b{color:var(--master-gold);font-size:16px}
.gc-entry-b small{color:var(--muted);font-size:12px}
.gc-entry-go{color:var(--master-gold);font-size:22px;line-height:1}

.gchub{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
.gch-top{display:flex;gap:8px;margin:0 0 10px}
.gch-back{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--master-line);background:#0a2246;color:var(--master-gold);font-size:13px;font-weight:800;cursor:pointer}

.gch-hero{position:relative;overflow:hidden;margin:0 0 12px;padding:16px 16px 14px;border-radius:20px;border:1px solid var(--master-line);background:linear-gradient(150deg,#071b3c 0%,#0a2c5c 55%,#04162e 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 34px rgba(0,0,0,.45);text-align:center}
.gch-hero::after{content:"";position:absolute;inset:-45% -12% auto;height:75%;background:radial-gradient(58% 58% at 50% 0,rgba(95,200,255,.16),transparent 70%);pointer-events:none}
.gch-kick{position:relative;display:block;font-size:10px;letter-spacing:.16em;color:var(--cyan);font-weight:800}
.gch-h1{position:relative;margin:6px 0 2px;font-size:clamp(19px,5.4vw,27px);line-height:1.14;color:var(--master-gold);text-shadow:0 2px 12px rgba(247,207,99,.28)}
.gch-sub{position:relative;margin:0 0 6px;font-size:11.5px;letter-spacing:.24em;color:#cfe6ff;font-weight:800}
.gch-th{position:relative;margin:0 0 3px;font-size:12.5px;line-height:1.45;color:#dce9fb}
.gch-sm{position:relative;margin:0 0 10px;font-size:10.5px;color:var(--muted)}
.gch-jr{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:12px;background:rgba(3,14,32,.6);border:1px solid rgba(215,170,69,.28)}
.gch-jr-l{font-size:9.5px;letter-spacing:.14em;color:var(--master-gold);font-weight:800}
.gch-dots{display:inline-flex;gap:5px}
.gch-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18);border:1px solid rgba(215,170,69,.45)}
.gch-dots i.on{background:linear-gradient(180deg,#ffe9a8,var(--master-gold));box-shadow:0 0 8px rgba(247,207,99,.6)}
.gch-jr-v{font-size:9.5px;color:var(--muted);font-weight:800}

.gch-cont{margin:0 0 12px}
.gch-sec-t{display:block;margin:0 0 6px;font-size:10.5px;letter-spacing:.12em;color:var(--cyan);font-weight:800}
.gch-cont-b{display:flex;align-items:center;gap:10px;width:100%;text-align:left;min-height:56px;padding:11px 13px;border-radius:15px;border:1px solid rgba(95,200,255,.4);background:linear-gradient(120deg,#0a2246,#0d3560);color:#fff;cursor:pointer}
.gch-cont-ic{font-size:22px;line-height:1}
.gch-cont-t{display:grid;gap:2px;flex:1;min-width:0}
.gch-cont-t b{font-size:13.5px;color:var(--master-gold)}
.gch-cont-t small{font-size:10.5px;color:var(--muted)}
.gch-cont-go{font-size:11.5px;color:var(--cyan);font-weight:800;white-space:nowrap}

.gch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0 0 12px}
.gch-card{display:flex;flex-direction:column;gap:4px;text-align:left;padding:11px;border-radius:16px;border:1px solid #2a5b8c;background:linear-gradient(155deg,#0a2246,#061530);color:#fff;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.gch-card[data-ac=gold]{border-color:rgba(215,170,69,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 22px rgba(247,207,99,.08)}
.gch-card[data-ac=cyan]{border-color:rgba(95,200,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 0 22px rgba(95,200,255,.10)}
.gch-ctop{display:flex;align-items:center;justify-content:space-between;margin-bottom:1px}
.gch-ctop em{font-style:normal;font-size:9.5px;font-weight:900;letter-spacing:.1em;color:var(--cyan)}
.gch-card[data-ac=gold] .gch-ctop em{color:var(--master-gold)}
.gch-ic{font-style:normal;font-size:19px;line-height:1}
.gch-name{display:block;font-size:13px;line-height:1.2;color:var(--master-gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gch-en{display:block;font-size:8px;line-height:1.25;letter-spacing:.03em;color:#8fc9ff;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gch-th2{display:-webkit-box;font-size:10px;line-height:1.35;color:#d5e4f7;height:4.05em;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.gch-st{display:block;margin-top:1px;font-size:9.5px;line-height:1.25;color:var(--muted)}
.gch-cta{display:flex;align-items:center;justify-content:center;min-height:50px;margin-top:5px;border-radius:12px;font-size:12.5px;font-weight:900;color:#04162e;background:linear-gradient(180deg,#ffe6a6,var(--master-gold));box-shadow:0 4px 12px rgba(247,207,99,.22)}
.gch-card[data-ac=cyan] .gch-cta{color:#03203a;background:linear-gradient(180deg,#bfe9ff,#5fc8ff);box-shadow:0 4px 12px rgba(95,200,255,.22)}

.gch-why{margin:0 0 10px;padding:13px 14px;border-radius:16px;border:1px solid var(--master-line);background:linear-gradient(150deg,#071b3c,#0a2c5c)}
.gch-why h2{margin:0 0 8px;font-size:13px;color:var(--master-gold)}
.gch-why ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.gch-why li{display:flex;align-items:baseline;gap:6px;font-size:11.5px;color:#d5e4f7}
.gch-why li b{color:#fff;font-weight:800}
.gch-why li span{color:var(--cyan);font-weight:800;white-space:nowrap}
.gch-foot{margin:0;text-align:center;font-size:9.5px;letter-spacing:.1em;color:rgba(169,191,214,.7)}

/* very narrow phones: 1 premium column instead of squeezing Thai text */
@media(max-width:359px){
 .gch-grid{grid-template-columns:1fr}
 .gch-th2{-webkit-line-clamp:2;max-height:2.7em}
}
@media(min-width:901px){
 .gchub{max-width:780px;margin:0 auto}
 .gch-grid{gap:12px}
 .gch-th2{font-size:11px;max-height:4.05em}
}
/* ===== PHASE 6 · DIGITAL COACH JOURNEY INTEGRATION =====
   Scoped additions only. Every pre-existing selector is untouched. */
.ns-q{margin:1px 0 8px;padding-left:2px;font-size:12.5px;color:#9eb5d1;letter-spacing:.01em}
.ns-card .btn.gold{flex:none;white-space:nowrap;min-width:126px;min-height:44px}
.ac-practice{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:11px 13px;border-radius:15px;border:1px solid rgba(95,200,255,.4);background:linear-gradient(120deg,#0a2246,#0d3560)}
.ac-practice-ic{flex:none;font-size:20px;line-height:1}
.ac-practice-b{flex:1;min-width:0;display:grid;gap:2px}
.ac-practice-b b{font-size:13px;color:#f4ca58}
.ac-practice-b small{font-size:10.5px;color:#9eb5d1;line-height:1.4}
.ac-practice-btn{flex:none;white-space:nowrap;min-height:44px;padding:10px 15px}
.gch-after{margin:0 0 12px;padding:12px 13px;border-radius:16px;border:1px solid rgba(184,139,55,.55);background:linear-gradient(140deg,#0b3153,#03182b);box-shadow:inset 0 0 22px #e8bd4c14}
.gch-after-t{display:block;margin:0 0 8px;font-size:12.5px;font-weight:800;color:var(--master-gold)}
.gch-after-b{display:flex;align-items:center;gap:10px;width:100%;text-align:left;min-height:52px;padding:10px 12px;border-radius:14px;border:1px solid rgba(95,200,255,.35);background:linear-gradient(120deg,#071b3c,#0a2c5c);color:#fff;cursor:pointer;font-family:inherit}
.gch-after-b i{flex:none;font-style:normal;font-size:20px;line-height:1}
.gch-after-x{flex:1;min-width:0;display:grid;gap:2px}
.gch-after-x b{font-size:13px;color:#fff}
.gch-after-x small{font-size:10.5px;color:var(--muted);line-height:1.4}
.gch-after-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:9px}
.gch-after-links button{min-height:44px;padding:7px 3px;border-radius:11px;border:1px solid rgba(95,200,255,.35);background:rgba(10,34,70,.72);color:var(--cyan);font-family:inherit;font-size:10.5px;font-weight:700;line-height:1.25;cursor:pointer;overflow-wrap:anywhere}
.gch-after-links button:active{background:#164a7d}
@media(max-width:360px){.gch-after-links{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== PHASE 7 · 📋 TODAY · วันนี้ทำอะไรต่อ =====================
   2 compact slots + the untouched Phase 6 primary card.
   Namespaced .td-* so nothing existing is overridden.              */
.td-wrap{display:flex;flex-direction:column;gap:9px}
.td-card{padding:12px 13px;border:1px solid #35658b;border-radius:15px;background:linear-gradient(145deg,#0a2140,#061226)}
.td-hd{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.td-ic{font-style:normal;font-size:15px;line-height:1}
.td-hd b{color:#cfe0f2;font-size:12.5px;letter-spacing:.01em}
.td-b,.td-nx{display:flex;gap:9px;align-items:flex-start;padding:2.5px 0;font-size:12px;line-height:1.42}
.td-b em,.td-nx em{font-style:normal;flex:none;width:42px;color:#7f9ab8;font-size:10px;letter-spacing:.06em;padding-top:2px}
.td-b span,.td-nx span{color:#c8d9e8;min-width:0;overflow-wrap:anywhere}
.td-nx{margin-top:6px;padding-top:8px;border-top:1px solid #1d3a5c;flex-wrap:wrap;align-items:center}
.td-nx>span{flex:1 1 160px}
.td-nx .btn{flex:none;min-height:44px;padding:11px 14px;font-size:12px}
@media(max-width:600px){.td-nx .btn{width:100%;flex:1 1 100%}}

/* ==========================================================================
   K-ELITE JOURNEY · PHASE J1 — OFFICIAL 14-STAGE FOUNDATION
   Namespaced .jr-* (screens) and .jrj-* (Home card). Append-only.
   Responsive contract (spec 25): no page horizontal overflow at 390 / 430 /
   1280, CTA touch target >= 44px, the stage strip is the only horizontal
   scroller, active stage auto-scrolled into view, safe-area clearance.
   ========================================================================== */

/* ---- shared atoms ---- */
.jr-bar,.jrj-bar{display:block;position:relative;height:9px;border-radius:99px;background:#ffffff1c;overflow:hidden;border:1px solid #ffffff14}
.jr-bar>i,.jrj-bar>i{position:absolute;inset:0 auto 0 0;display:block;border-radius:99px;background:linear-gradient(90deg,var(--gold2),var(--gold));box-shadow:0 0 12px #ffd66e5c;transition:width .45s cubic-bezier(.22,1,.36,1)}
.jr-wrap{position:relative;display:flex;flex-direction:column;gap:12px;padding-bottom:calc(24px + env(safe-area-inset-bottom));min-width:0}
.jr-wrap *{min-width:0}
.jr-note{margin:0;font-size:12.5px;line-height:1.65;color:var(--muted)}

/* ---- #journey hero ---- */
.jr-hero{display:flex;flex-direction:column;gap:9px;padding:14px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(150deg,var(--panel2),var(--panel))}
.jr-hero-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;color:var(--muted)}
.jr-hero-top b{font-size:19px;color:var(--gold);letter-spacing:.5px}
.jr-hero-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:2px}
.jr-hero-grid>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border:1px solid #ffffff1a;border-radius:12px;background:#ffffff0a}
.jr-hero-grid b{font-size:18px;color:var(--text);line-height:1}
.jr-hero-grid small{font-size:11px;color:var(--muted);text-align:center;line-height:1.3}
.jr-round{align-self:flex-start;padding:5px 11px;border:1px solid var(--line);border-radius:99px;font-size:12px;color:var(--muted);background:#ffffff0d}
.jr-round b{color:var(--gold)}

/* ---- banners ---- */
.jr-banner{display:flex;flex-direction:column;gap:5px;padding:13px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(140deg,var(--panel2),var(--panel))}
.jr-banner b{font-size:16px;color:var(--text)}
.jr-banner span,.jr-banner small{font-size:12.5px;color:var(--muted);line-height:1.6}
.jr-banner-lb{font-size:11px;letter-spacing:1.4px;color:var(--gold);text-transform:uppercase}
.jr-banner-cur{border-color:#3f7fb0}
.jr-banner-done,.jr-banner-mentor{border-color:var(--gold);background:radial-gradient(circle at 82% 12%,#ffd66e26,transparent 62%),linear-gradient(140deg,var(--panel2),var(--panel))}
.jr-banner-done b,.jr-banner-mentor b{color:var(--gold);font-size:17px}
.jr-banner-mentor b{letter-spacing:2px}

/* ---- legend + map head ---- */
.jr-legend{display:flex;flex-wrap:wrap;gap:6px}
.jr-lg{padding:4px 9px;border:1px solid var(--line);border-radius:99px;font-size:11px;color:var(--muted);background:#ffffff0a}
.jr-lg.is-passed{color:var(--green);border-color:#24d39c66}
.jr-lg.is-mastered{color:var(--gold);border-color:#ffd66e66}
.jr-lg.is-locked{opacity:.72}
.jr-maphead{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:1.6px;color:var(--muted);text-transform:uppercase}

/* ---- stage rail: the only horizontal scroller (spec 12) ---- */
.jr-railwrap{position:relative;contain:inline-size;width:100%;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,#06203a,#041525);padding:11px 0}
.jr-rail{display:flex;contain:inline-size;gap:9px;width:100%;padding:2px 14px 6px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#2c5f84 transparent}
.jr-rail::-webkit-scrollbar{height:5px}
.jr-rail::-webkit-scrollbar-thumb{background:#2c5f84;border-radius:99px}
.jr-node{flex:0 0 auto;width:80px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 5px;border:1px solid #ffffff1f;border-radius:14px;background:#ffffff0a;color:var(--text);font:inherit;cursor:pointer;scroll-snap-align:center;transition:transform .16s ease,border-color .16s ease,background .16s ease}
.jr-node:active{transform:scale(.96)}
.jr-node-no{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;border:1px solid #ffffff33;font-size:11.5px;font-weight:700;line-height:1}
.jr-node-ic{font-size:19px;line-height:1.15}
.jr-node-th{display:block;width:100%;font-size:9.5px;line-height:1.28;text-align:center;color:var(--muted);word-break:break-word;hyphens:auto}
.jr-node-st{display:block;font-size:9px;color:var(--muted);text-align:center;line-height:1.2}
.jr-node.is-passed{border-color:#24d39c80;background:#24d39c1c}
.jr-node.is-passed .jr-node-no{border-color:var(--green);color:var(--green)}
.jr-node.is-mastered{border-color:var(--gold);background:linear-gradient(160deg,#ffd66e26,#ffffff08)}
.jr-node.is-mastered .jr-node-no{border-color:var(--gold);color:var(--gold)}
.jr-node.is-mastered .jr-node-st{color:var(--gold)}
.jr-node.is-locked{opacity:.5;filter:saturate(.35)}
.jr-node.is-cur{border-color:var(--gold);box-shadow:0 0 0 2px #ffd66e3d,0 0 20px #ffd66e2e;background:linear-gradient(160deg,#0d3c5e,#062742)}
.jr-node.is-cur .jr-node-no{border-color:var(--gold);background:var(--gold);color:#04203a}
.jr-node.is-cur .jr-node-st{color:var(--gold)}
.jr-fade{position:absolute;top:0;bottom:12px;width:26px;pointer-events:none;z-index:2;transition:opacity .2s ease}
.jr-fade-l{left:0;background:linear-gradient(90deg,#051a2e,transparent)}
.jr-fade-r{right:0;background:linear-gradient(270deg,#051a2e,transparent)}
.jr-railwrap.at-start .jr-fade-l{opacity:0}
.jr-railwrap.at-end .jr-fade-r{opacity:0}
.jr-railwrap.no-scroll .jr-fade{opacity:0}
.jr-hint{margin:0;font-size:11.5px;color:var(--muted);text-align:center}

/* ---- two separate progress systems (spec 10) ---- */
.jr-two{display:grid;grid-template-columns:1.35fr 1fr;gap:9px}
.jr-sys{display:flex;flex-direction:column;gap:6px;padding:11px;border:1px solid var(--line);border-radius:15px;background:#ffffff09}
.jr-sys-lb{font-size:10.5px;letter-spacing:1.1px;color:var(--gold);text-transform:uppercase}
.jr-sys-v{font-size:20px;color:var(--text);line-height:1}
.jr-sys-p{font-size:11.5px;color:var(--muted)}
.jr-sys small{font-size:10.5px;line-height:1.45;color:var(--muted)}
.jr-sys-m{border-style:dashed;border-color:#5fc8ff5c}
.jr-sys-m .jr-sys-lb{color:var(--cyan)}

/* ---- #journeystage detail ---- */
.jr-crumb{display:flex}
.jr-crumb button{padding:8px 12px;min-height:38px;border:1px solid var(--line);border-radius:12px;background:#ffffff0d;color:var(--text);font:inherit;font-size:12.5px;cursor:pointer}
.jr-dhead{display:flex;align-items:flex-start;gap:10px;padding:13px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(150deg,var(--panel2),var(--panel))}
.jr-dhead-ic{font-size:27px;line-height:1.1}
.jr-dhead-b{flex:1 1 auto;display:flex;flex-direction:column;gap:2px}
.jr-dhead-b h2{margin:0;font-size:16.5px;line-height:1.35;color:var(--text)}
.jr-dhead-b small{font-size:10.5px;letter-spacing:.8px;color:var(--muted)}
.jr-chip{flex:0 0 auto;padding:4px 9px;border:1px solid var(--line);border-radius:99px;font-size:10.5px;letter-spacing:.9px;color:var(--muted);background:#ffffff0d}
.jr-chip-passed{color:var(--green);border-color:#24d39c66}
.jr-chip-mastered{color:var(--gold);border-color:#ffd66e80;background:#ffd66e1a}
.jr-obj{padding:12px;border:1px solid #3f7fb0a6;border-radius:15px;background:#0a2740}
.jr-obj-lb{display:block;margin-bottom:4px;font-size:11px;letter-spacing:1.1px;color:var(--gold)}
.jr-obj p,.jr-box p{margin:0;font-size:13.5px;line-height:1.7;color:var(--text)}
.jr-cycle{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.jr-cy{display:flex;flex-direction:column;gap:3px;padding:11px;border:1px solid #ffffff1a;border-radius:15px;background:#ffffff08}
.jr-cy b{font-size:12px;letter-spacing:1.3px;color:var(--gold)}
.jr-cy span{font-size:10.5px;color:var(--muted)}
.jr-cy p{font-size:12.5px;line-height:1.62;color:var(--text)}
.jr-box{display:flex;flex-direction:column;gap:5px;padding:12px;border:1px solid var(--line);border-radius:15px;background:#ffffff09}
.jr-box-lb{display:block;font-size:10.5px;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase}
.jr-box small{font-size:11px;line-height:1.55;color:var(--muted)}
.jr-box-g{border-color:#ff697559;background:#ff69750f}
.jr-box-g .jr-box-lb{color:var(--red)}
.jr-box-msg{align-items:center;text-align:center;border-color:#ffd66e59;background:#ffd66e0f}
.jr-box-msg p{color:var(--gold);font-weight:600}
.jr-box-m{border-style:dashed;border-color:#5fc8ff5c}
.jr-box-m .jr-box-lb{color:var(--cyan)}
.jr-box-fin{align-items:center;text-align:center;border-color:var(--gold);background:radial-gradient(circle at 50% 0,#ffd66e2b,transparent 70%)}
.jr-box-fin b{font-size:16px;color:var(--gold);letter-spacing:1.4px}
.jr-box-fin span{font-size:12.5px;color:var(--muted)}
.jr-hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:2px 0}
.jr-hgrid>div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 3px;border:1px solid #ffffff14;border-radius:11px;background:#ffffff08}
.jr-hgrid b{font-size:13.5px;color:var(--text);line-height:1.1;text-align:center}
.jr-hgrid small{font-size:9.5px;color:var(--muted);text-align:center;line-height:1.25}

/* ---- stamp (spec 14) ---- */
.jr-stamp{position:relative;display:grid;place-items:center;padding:16px 12px;border:2px double var(--gold);border-radius:18px;background:radial-gradient(circle at 50% 42%,#ffd66e2b,transparent 68%);animation:jrStampIn .5s cubic-bezier(.2,1.5,.4,1) both}
.jr-stamp-in{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.jr-stamp-in b{font-size:19px;letter-spacing:2.4px;color:var(--gold);text-shadow:0 2px 10px #ffd66e59}
.jr-stamp-in em{font-size:11.5px;font-style:normal;color:var(--muted)}
.jr-stamp-nm{font-size:13px;font-weight:700;color:var(--text);line-height:1.35;max-width:22em}
.jr-stamp-dt{font-size:10.5px;color:var(--muted)}
.jr-stamp.is-review{border-style:dashed;background:#ffffff08;animation:none}
.jr-stamp.is-review .jr-stamp-in b{color:var(--cyan);font-size:14px;letter-spacing:1.4px;text-shadow:none}
.jr-stamp-rev{border-color:#5fc8ff66;background:#5fc8ff0f;animation:none}
.jr-stamp-rev .jr-stamp-in b{color:var(--cyan);font-size:13px;letter-spacing:1.2px}
.jr-stamp-rev .jr-stamp-in em{color:var(--muted)}
@keyframes jrStampIn{0%{opacity:0;transform:scale(.72) rotate(-7deg)}62%{opacity:1;transform:scale(1.045) rotate(1.5deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){.jr-stamp{animation:none}}

/* ---- actions ---- */
.jr-actions{display:flex;flex-direction:column;gap:6px}
.jr-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line);border-radius:15px;background:#ffffff0f;color:var(--text);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.jr-cta-lock{opacity:.62;cursor:not-allowed}
.jr-cta-rev{border-color:#5fc8ff80;color:var(--cyan)}
.jr-cta-why{font-size:11px;line-height:1.55;color:var(--muted);text-align:center}
.jr-nextbtn,.jr-prevbtn{width:100%;min-height:44px;padding:11px 13px;border:1px solid var(--line);border-radius:14px;background:#ffffff0a;color:var(--text);font:inherit;font-size:12.5px;cursor:pointer}
.jr-prevbtn{background:transparent;color:var(--muted)}

/* ---- Home Journey card (spec 11), replaces the Passport card ---- */
.jrj{display:flex;flex-direction:column;gap:6px;width:100%;padding:13px;border:1px solid var(--gold);border-radius:19px;background:radial-gradient(circle at 88% 6%,#ffd66e24,transparent 56%),linear-gradient(150deg,var(--panel2),var(--panel));color:var(--text);font:inherit;text-align:left;cursor:pointer}
.jrj:active{transform:scale(.99)}
.jrj-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}
.jrj-h>b{font-size:15px;letter-spacing:1.5px;color:var(--gold)}
.jrj-cur,.jrj-done{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right}
.jrj-cur b{font-size:12.5px;color:var(--text)}
.jrj-cur small{font-size:10.5px;color:var(--muted);line-height:1.3}
.jrj-done b{font-size:12.5px;color:var(--gold)}
.jrj-done small{font-size:10.5px;color:var(--muted)}
.jrj-kl{font-size:10.5px;letter-spacing:1.2px;color:var(--muted);text-transform:uppercase}
.jrj-pct{font-size:12px;color:var(--gold);font-weight:700}
.jrj-row{display:flex;flex-wrap:wrap;gap:5px}
.jrj-row i{font-style:normal;font-size:10.5px;padding:3px 8px;border:1px solid #ffffff1f;border-radius:99px;background:#ffffff0a;color:var(--muted)}
.jrj-next{display:flex;flex-direction:column;gap:1px;font-size:12px;line-height:1.5;color:var(--text)}
.jrj-next em{font-style:normal;font-size:10px;letter-spacing:1.1px;color:var(--muted);text-transform:uppercase}
.jrj-cta{display:block;margin-top:2px;padding:10px 12px;min-height:44px;border-radius:13px;background:linear-gradient(90deg,var(--gold2),var(--gold));color:#04203a;font-size:13.5px;font-weight:700;text-align:center}

/* ---- responsive (spec 25) ---- */
@media(max-width:430px){
  .jrj-h{gap:4px}
  .jrj-h>b{width:100%}
  .jrj-cur,.jrj-done{align-items:flex-start;text-align:left}
  .jr-cycle{grid-template-columns:1fr}
  .jr-two{grid-template-columns:1fr}
  .jr-hero-grid b{font-size:16px}
  .jr-hgrid b{font-size:12px}
  .jr-stamp-nm{font-size:12px}
}
@media(max-width:900px){
  .jr-node{width:76px}
}
@media(min-width:900px){
  .jr-rail{justify-content:flex-start}
  .jr-stamp{padding:22px 16px}
  .jr-stamp-in b{font-size:22px}
}

/* ==========================================================================
   K-ELITE JOURNEY · PHASE J2.1 — STAGE 1 GAME (#j2x1)
   Additive and namespaced: only .j2x-* is declared below, so no existing
   selector is redefined and no existing byte changes.
   Layout rules honoured: single column, no fixed widths, no horizontal
   overflow, every control >= 44px tall, safe-area padding at the bottom.
   ========================================================================== */
.j2x-root{--j2x-pad:16px;display:block;width:100%;max-width:760px;margin:0 auto;padding:4px var(--j2x-pad) calc(28px + env(safe-area-inset-bottom))}
.j2x-wrap{display:flex;flex-direction:column;gap:14px;width:100%;min-width:0}
.j2x-wrap *{min-width:0;max-width:100%;box-sizing:border-box}
.j2x-step{font-size:12px;font-weight:800;letter-spacing:.09em;color:var(--gold);background:#0b2c4b;border:1px solid #2c5f88;border-radius:999px;padding:8px 14px;align-self:flex-start;max-width:100%;overflow-wrap:anywhere}
.j2x-lead{margin:0;font-size:14px;color:var(--muted);line-height:1.7}
.j2x-title{margin:2px 0 0;font-size:25px;line-height:1.35;font-weight:1000;overflow-wrap:anywhere}
.j2x-sub{margin:0;font-size:14px;color:var(--muted)}
.j2x-hero{display:flex;flex-direction:column;gap:13px;background:linear-gradient(155deg,#0d3054,#05192d);border:1px solid #37668d;border-radius:20px;padding:var(--j2x-pad);box-shadow:var(--shadow)}
.j2x-hero-q{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.j2x-hero-q span{display:flex;flex-direction:column;align-items:center;gap:3px;background:#0a2743;border:1px solid #2f6288;border-radius:13px;padding:10px 4px;text-align:center}
.j2x-hero-q b{font-size:19px;color:var(--gold);line-height:1}
.j2x-hero-q small{font-size:10px;color:var(--muted);line-height:1.35;overflow-wrap:anywhere}
.j2x-brief{display:flex;flex-direction:column;gap:6px;background:#061c32;border:1px solid #27587d;border-radius:14px;padding:13px}
.j2x-brief p{margin:0;font-size:13.5px;line-height:1.7;color:#dceaf6}
.j2x-brief .j2x-thr{color:var(--gold);font-weight:700}
.j2x-quads{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.j2x-q{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:44px;text-align:left;cursor:pointer;background:linear-gradient(160deg,#0d3054,#061c32);border:1px solid #37668d;border-radius:16px;padding:13px;color:var(--text);font:inherit}
.j2x-q:active{transform:translateY(1px)}
.j2x-q-ic{font-size:19px;line-height:1}
.j2x-q b{font-size:20px;color:var(--gold);line-height:1.1}
.j2x-q em{font-style:normal;font-size:11.5px;color:#cfe3f4;letter-spacing:.04em;overflow-wrap:anywhere}
.j2x-q small{font-size:12.5px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.j2x-q i{font-style:normal;font-size:11px;color:#7f9db8;margin-top:2px}
.j2x-q.is-done{border-color:var(--green)}
.j2x-q.is-done i{color:var(--green)}
.j2x-q.is-open{border-color:var(--gold);box-shadow:0 0 0 2px #ffd66e33,0 0 20px #e9b83b22}
.j2x-panel{display:flex;flex-direction:column;gap:9px;background:#061c32;border:1px solid #37668d;border-left:4px solid var(--gold);border-radius:15px;padding:15px}
.j2x-panel-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.j2x-panel-h b{font-size:22px;color:var(--gold);line-height:1}
.j2x-panel-h span{font-size:12.5px;letter-spacing:.06em;color:#cfe3f4}
.j2x-panel-h small{font-size:13px;color:var(--muted)}
.j2x-pr{display:flex;flex-direction:column;gap:2px}
.j2x-pr em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--cyan)}
.j2x-pr p{margin:0;font-size:14px;line-height:1.75;color:#e7f1fa;overflow-wrap:anywhere}
.j2x-concept{font-size:12.5px;font-weight:700;color:var(--cyan);overflow-wrap:anywhere}
.j2x-prompt{font-size:16.5px;line-height:1.8;font-weight:700;background:#0a2743;border:1px solid #2f6288;border-radius:15px;padding:15px;white-space:normal;overflow-wrap:anywhere}
.j2x-choices{display:flex;flex-direction:column;gap:9px}
.j2x-choice{display:flex;align-items:center;min-height:48px;text-align:left;cursor:pointer;background:linear-gradient(160deg,#103454,#08213b);border:1px solid #4a7ba3;border-radius:14px;padding:13px 15px;color:var(--text);font:inherit;font-size:15px;line-height:1.55}
.j2x-choice:active{transform:translateY(1px)}
.j2x-choice span{overflow-wrap:anywhere}
.j2x-choice.is-right{border-color:var(--green);box-shadow:0 0 0 2px #24d39c2e}
.j2x-fb{display:flex;flex-direction:column;gap:4px;border-radius:14px;padding:14px;border:1px solid}
.j2x-fb b{font-size:14px}
.j2x-fb p{margin:0;font-size:14px;line-height:1.75;overflow-wrap:anywhere}
.j2x-fb.is-ok{background:#072a24;border-color:#1d7a5f}
.j2x-fb.is-ok b{color:var(--green)}
.j2x-fb.is-no{background:#2a1220;border-color:#8d3b4a}
.j2x-fb.is-no b{color:#ff9aa4}
.j2x-actions{display:flex;flex-direction:column;gap:7px}
.j2x-cta{width:100%;min-height:50px;font-size:16px;font-weight:800;letter-spacing:.01em}
.j2x-cta:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.j2x-why{font-size:12.5px;color:var(--muted);text-align:center;line-height:1.6}
.j2x-ghost{width:100%;min-height:46px;font-size:14px;background:transparent;border:1px solid #3a6c93;color:#cfe3f4}
.j2x-score{display:flex;flex-direction:column;align-items:center;gap:2px;background:#0a2743;border:1px solid #37668d;border-radius:17px;padding:17px}
.j2x-score b{font-size:44px;line-height:1;color:var(--gold)}
.j2x-score small{font-size:13px;color:var(--muted)}
.j2x-verdict{display:flex;flex-direction:column;gap:4px;border-radius:15px;padding:15px;border:1px solid}
.j2x-verdict b{font-size:18px;line-height:1.4}
.j2x-verdict span{font-size:13px;line-height:1.7;color:#dceaf6}
.j2x-verdict.is-pass{background:#072a24;border-color:#1d7a5f}
.j2x-verdict.is-pass b{color:var(--green)}
.j2x-verdict.is-nopass{background:#24182a;border-color:#7b5a8f}
.j2x-verdict.is-nopass b{color:#d9b3ff}
.j2x-stamp{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 15px;border-radius:19px;text-align:center;background:radial-gradient(circle at 50% 0,#0f3a63,#061c32);border:2px solid var(--gold);box-shadow:0 0 26px #e9b83b33}
.j2x-stamp span{font-size:12px;letter-spacing:.28em;color:var(--gold)}
.j2x-stamp b{font-size:27px;line-height:1.1;font-weight:1000}
.j2x-stamp em{font-style:normal;font-size:13px;color:var(--muted);letter-spacing:.1em}
.j2x-stamp small{font-size:12px;color:#cfe3f4}
.j2x-mastered{text-align:center;font-size:15px;font-weight:900;letter-spacing:.06em;color:var(--gold);background:#0b2c4b;border:1px solid var(--gold2);border-radius:13px;padding:12px}
.j2x-recap{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.j2x-recap div{display:flex;flex-direction:column;gap:2px;background:#061c32;border:1px solid #2f6288;border-radius:13px;padding:11px}
.j2x-recap b{font-size:17px;color:var(--gold);line-height:1}
.j2x-recap span{font-size:12px;color:var(--muted);line-height:1.45;overflow-wrap:anywhere}
.j2x-mission{display:flex;flex-direction:column;gap:4px;background:#0a2743;border:1px dashed #4a7ba3;border-radius:15px;padding:14px}
.j2x-mission b{font-size:12px;letter-spacing:.09em;color:var(--cyan)}
.j2x-mission p{margin:0;font-size:14px;line-height:1.75;overflow-wrap:anywhere}
.j2x-mission small{font-size:12px;color:var(--muted)}
.j2x-hist{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#061c32;border:1px solid #2f6288;border-radius:15px;padding:13px}
.j2x-hist div{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.j2x-hist b{font-size:16px;color:#fff;text-align:center;overflow-wrap:anywhere;line-height:1.3}
.j2x-hist small{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.4}
.j2x-next{text-align:center;font-size:12.5px;color:var(--muted);padding:9px;border:1px dashed #3a6c93;border-radius:12px;overflow-wrap:anywhere}
.j2x-status{text-align:center;font-size:12px;color:var(--muted)}
@media(max-width:430px){
.j2x-root{--j2x-pad:13px}
.j2x-title{font-size:22px}
.j2x-prompt{font-size:15.5px}
.j2x-choice{font-size:14.5px}
.j2x-quads{gap:8px}
.j2x-q{padding:11px}
.j2x-hist{grid-template-columns:repeat(2,1fr);gap:10px}
.j2x-hero-q{gap:6px}
.j2x-hero-q small{font-size:9.5px}
}
@media(min-width:1000px){
.j2x-root{max-width:880px}
.j2x-quads{grid-template-columns:repeat(4,1fr)}
.j2x-stamp b{font-size:30px}
.j2x-actions{flex-direction:row;flex-wrap:wrap}
.j2x-cta{width:auto;flex:1 1 220px}
.j2x-ghost{width:auto;flex:0 1 auto;padding:13px 20px}
}

/* ==========================================================================
   K-ELITE JOURNEY · PHASE J2.2 — STAGE 2 GAME (#j22)
   CONSUMER → BUSINESS-AWARE CONSUMER

   Additive and namespaced: only .j22-* is declared below, so no existing
   selector is redefined and no pre-existing byte of styles.css changes.
   deep navy · gold borders · soft blue glow · gold PV coin
   Layout rules honoured: no fixed widths, no horizontal overflow, product
   grid = 2 columns on mobile, every control >= 44px tall, product image
   object-fit:contain (never cropped), and safe bottom spacing so the app
   bottom navigation can never hide the primary CTA.
   ========================================================================== */
.j22-root{--j22-pad:16px;--j22-navy:#05192d;--j22-navy2:#0d3054;--j22-line:#37668d;--j22-gold:var(--gold);display:block;width:100%;max-width:820px;margin:0 auto;padding:4px var(--j22-pad) calc(56px + env(safe-area-inset-bottom))}
.j22-wrap{display:flex;flex-direction:column;gap:14px;width:100%;min-width:0}
.j22-wrap *{min-width:0;max-width:100%;box-sizing:border-box}

/* ---- step chip ---------------------------------------------------------- */
.j22-step{align-self:flex-start;max-width:100%;overflow-wrap:anywhere;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--j22-gold);background:#0b2c4b;border:1px solid var(--j22-line);border-radius:999px;padding:8px 14px}

/* ---- hero / intro ------------------------------------------------------- */
.j22-hero{background:linear-gradient(155deg,var(--j22-navy2),var(--j22-navy));border:1px solid var(--j22-line);border-radius:20px;padding:var(--j22-pad);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,214,110,.08)}
.j22-title{margin:0;font-size:21px;font-weight:1000;letter-spacing:.04em;line-height:1.3;color:#fff}
.j22-sub{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--j22-gold);font-weight:800;overflow-wrap:anywhere}
.j22-en{margin:4px 0 0;font-size:12px;letter-spacing:.1em;color:var(--muted);font-weight:700;overflow-wrap:anywhere}
.j22-h2{margin:0;font-size:19px;line-height:1.4;font-weight:900;overflow-wrap:anywhere}
.j22-lead{margin:0;font-size:14px;line-height:1.7;color:var(--muted)}
.j22-lead b{color:var(--j22-gold)}
.j22-prompt{margin:0;font-size:15.5px;line-height:1.75;color:#eaf4ff;font-weight:600;overflow-wrap:anywhere}
.j22-note{font-size:11.5px;line-height:1.6;color:var(--muted)}

/* ---- cards -------------------------------------------------------------- */
.j22-obj,.j22-know,.j22-warn,.j22-demo,.j22-basket,.j22-tot,.j22-mission,.j22-lock,.j22-cartbar{background:#061c32;border:1px solid #27587d;border-radius:14px;padding:13px}
.j22-obj b,.j22-warn b{display:block;font-size:14px;color:var(--j22-gold);margin-bottom:5px;overflow-wrap:anywhere}
.j22-obj p{margin:0;font-size:13.5px;line-height:1.75;color:#dceaf6}
.j22-know{display:flex;flex-direction:column;gap:9px}
.j22-know>div{display:flex;flex-direction:column;gap:3px;background:#0a2743;border:1px solid #2f6288;border-radius:12px;padding:11px}
.j22-know b{font-size:14px;color:#fff}
.j22-know span{font-size:13px;line-height:1.65;color:var(--muted);overflow-wrap:anywhere}
.j22-warn{background:#3a1d08;border-color:#8a5a18}
.j22-warn span{display:block;font-size:12.5px;line-height:1.7;color:#f6dcb4;overflow-wrap:anywhere}
.j22-demo{background:#0a2743;border-color:#2f6288;font-size:12px;line-height:1.65;color:#cfe3f5;overflow-wrap:anywhere}

/* ---- buttons: every control >= 44px ------------------------------------ */
.j22-cta,.j22-ghost,.j22-add,.j22-choice,.j22-pick,.j22-qbtn{min-height:44px}
.j22-cta{align-self:stretch;width:100%;font-size:15.5px;font-weight:800}
.j22-ghost{align-self:stretch;width:100%;font-size:13.5px;background:transparent;border:1px solid var(--j22-line);color:#cfe3f5}
.j22-cta[disabled],.j22-cta:disabled{opacity:.45;cursor:not-allowed}

/* ---- product grid: 2 columns on mobile --------------------------------- */
.j22-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.j22-card{display:flex;flex-direction:column;align-items:stretch;gap:6px;background:linear-gradient(160deg,var(--j22-navy2),#061c32);border:1px solid var(--j22-line);border-radius:16px;padding:11px}
.j22-card.is-in{border-color:var(--j22-gold);box-shadow:0 0 0 1px rgba(255,214,110,.35),0 0 18px rgba(255,214,110,.18)}
.j22-thumb{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;background:#03101f;border:1px solid #1d4568;border-radius:12px;overflow:hidden}
/* the product photo is NEVER cropped */
.j22-thumb img{width:100%;height:100%;object-fit:contain;display:block}
/* J2.2.1: the full product name must always be readable, so it wraps onto as
   many lines as it needs and is never clipped or ellipsised. */
.j22-pname{font-size:13px;font-weight:800;line-height:1.5;color:#fff;overflow-wrap:anywhere;word-break:break-word}
.j22-pcat{font-size:10.5px;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
/* J2.2.1: the product PV is the prominent number on the card. It is
   reference data, so it is stated as "<value> PV" and nothing else. */
.j22-ppv{display:flex;align-items:baseline;gap:4px;font-size:12px;font-weight:800;color:#cfe3f5;overflow-wrap:anywhere}
.j22-ppv b{font-size:20px;font-weight:1000;line-height:1.1;color:var(--j22-gold);text-shadow:0 0 12px rgba(255,214,110,.35)}
.j22-add{width:100%;font-size:12.5px;font-weight:800;padding:9px 6px;border-radius:11px}

/* ---- quantity stepper (card + basket row) ------------------------------ */
.j22-qty{display:flex;align-items:center;gap:6px;width:100%;min-width:0}
.j22-qbtn{flex:0 0 44px;width:44px;min-width:44px;height:44px;padding:0;font-family:inherit;font-size:20px;font-weight:800;line-height:1;background:#0d2f52;border:1px solid var(--j22-line);border-radius:11px;color:var(--j22-gold);cursor:pointer}
.j22-qbtn[disabled]{opacity:.4;cursor:default}
.j22-qtyn{flex:1 1 auto;min-width:0;text-align:center;font-size:15px;font-weight:1000;color:#fff;line-height:44px}

/* ---- PV meter ----------------------------------------------------------- */
.j22-meter{display:flex;flex-direction:column;gap:8px;background:linear-gradient(160deg,#0d2f52,#04182b);border:1px solid #3a6d97;border-radius:16px;padding:13px;box-shadow:inset 0 0 22px rgba(64,158,255,.14)}
.j22-meter-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.j22-meter-top span{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.j22-meter-top b{font-size:22px;font-weight:1000;color:var(--j22-gold);text-shadow:0 0 14px rgba(255,214,110,.45)}
.j22-meter-bar{position:relative;height:12px;border-radius:999px;background:#03101f;border:1px solid #2a5b83;overflow:hidden}
.j22-meter-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#b67a18,#ffd66e);box-shadow:0 0 14px rgba(255,214,110,.6);transition:width .45s ease}
.j22-scale{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.j22-scale span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 2px;border:1px solid #1d4568;border-radius:9px;background:#03101f;opacity:.55}
.j22-scale span.is-on{opacity:1;border-color:#3a6d97}
.j22-scale span.is-hit{opacity:1;border-color:var(--j22-gold);box-shadow:0 0 12px rgba(255,214,110,.35)}
.j22-scale b{font-size:10px;font-weight:800;color:#cfe3f5;line-height:1.2;overflow-wrap:anywhere}
.j22-scale small{font-size:9px;font-weight:800;letter-spacing:.05em;color:var(--j22-gold);line-height:1.2}
.j22-lvup{display:flex;flex-direction:column;gap:3px;background:linear-gradient(160deg,#4a3a0c,#1d1503);border:1px solid var(--j22-gold);border-radius:14px;padding:12px;box-shadow:0 0 20px rgba(255,214,110,.25);animation:j22-pop .5s ease}
.j22-lvup b{font-size:14px;color:var(--j22-gold);line-height:1.5;overflow-wrap:anywhere}
.j22-lvup small{font-size:11px;color:#e8d3a0}
@keyframes j22-pop{0%{transform:scale(.94);opacity:.4}60%{transform:scale(1.02)}100%{transform:scale(1);opacity:1}}

/* ---- cart bar / basket -------------------------------------------------- */
/* NOT sticky: .bottom is position:fixed;bottom:0, so a sticky bar would
   settle under the app navigation. In normal flow instead, where .main's
   padding-bottom:calc(104px + env(safe-area-inset-bottom)) guarantees the
   primary CTA is never covered. */
.j22-cartbar{display:flex;flex-direction:column;gap:9px}
.j22-cartbar-n{font-size:13.5px;color:#dceaf6;overflow-wrap:anywhere}
.j22-cartbar-n b{color:var(--j22-gold);font-size:16px}
.j22-gate{font-size:11.5px;line-height:1.6;color:var(--muted)}
.j22-basket{display:flex;flex-direction:column;gap:8px}
/* A grid, not a flex row: the stepper drops to its own full-width line, so a
   long Thai product name can never squeeze the controls off the screen. */
.j22-brow{display:grid;grid-template-columns:38px minmax(0,1fr) auto;grid-template-areas:"img name pv" "img qty qty";align-items:center;gap:6px 9px;background:#0a2743;border:1px solid #2f6288;border-radius:12px;padding:9px}
.j22-brow img{grid-area:img;width:38px;height:38px;object-fit:contain;background:#03101f;border:1px solid #1d4568;border-radius:9px}
.j22-brow span{grid-area:name;min-width:0;font-size:12.5px;line-height:1.45;color:#fff;overflow-wrap:anywhere}
.j22-brow .j22-qty{grid-area:qty}
.j22-bpv{grid-area:pv;min-width:56px;text-align:right;font-size:13.5px;color:var(--j22-gold);white-space:nowrap}
.j22-tot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;background:linear-gradient(160deg,#0d2f52,#04182b);border-color:var(--j22-gold)}
.j22-tot span{font-size:13px;font-weight:800;color:#cfe3f5}
.j22-tot b{color:var(--j22-gold);font-size:20px;font-weight:1000}

/* ---- round 1 picks ------------------------------------------------------ */
/* J2.2.1: each pick shows the real product photo, so a name can never be
   read against the wrong picture. */
.j22-picks{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.j22-pick{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;font:inherit;padding:9px 7px;background:linear-gradient(160deg,var(--j22-navy2),#061c32);border:1px solid var(--j22-line);border-radius:13px;color:#dceaf6}
.j22-pick img{width:68px;max-width:100%;height:68px;object-fit:contain;background:#03101f;border:1px solid #1d4568;border-radius:10px}
.j22-pick span{font-size:12.5px;font-weight:700;line-height:1.4;text-align:center;overflow-wrap:anywhere}
.j22-pick small{font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--j22-gold)}
.j22-pick.is-on{border-color:var(--j22-gold);color:var(--j22-gold);box-shadow:0 0 14px rgba(255,214,110,.2)}
.j22-pick.is-on small{color:#fff}

/* ---- answer choices ----------------------------------------------------- */
.j22-choices{display:flex;flex-direction:column;gap:9px}
.j22-choice{cursor:pointer;font:inherit;font-size:14px;font-weight:600;line-height:1.55;text-align:left;padding:13px;background:linear-gradient(160deg,var(--j22-navy2),#061c32);border:1px solid var(--j22-line);border-radius:14px;color:var(--text);overflow-wrap:anywhere}
.j22-choice.is-right{border-color:#3ddc84;background:#0a2f1c;box-shadow:0 0 14px rgba(61,220,132,.2)}
.j22-choice.is-wrong{border-color:#c9762b;background:#33190a}
.j22-choice[disabled]{cursor:default;opacity:1}
.j22-fb{display:flex;flex-direction:column;gap:5px;border-radius:14px;padding:13px;border:1px solid var(--j22-line);background:#061c32}
.j22-fb b{font-size:14px;overflow-wrap:anywhere}
.j22-fb span{font-size:13px;line-height:1.7;color:#dceaf6;overflow-wrap:anywhere}
.j22-fb.is-ok{border-color:#3ddc84;background:#08220f}
.j22-fb.is-ok b{color:#3ddc84}
.j22-fb.is-try{border-color:#c9762b;background:#2a1708}
.j22-fb.is-try b{color:#ffb066}

/* ---- result ------------------------------------------------------------- */
.j22-score{display:flex;flex-direction:column;align-items:center;gap:2px;padding:16px;background:linear-gradient(155deg,var(--j22-navy2),var(--j22-navy));border:1px solid var(--j22-line);border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.j22-score b{font-size:42px;line-height:1.1;font-weight:1000;color:var(--j22-gold);text-shadow:0 0 22px rgba(255,214,110,.4)}
.j22-score small{font-size:12.5px;color:var(--muted);text-align:center}
.j22-verdict{display:flex;flex-direction:column;gap:4px;border-radius:14px;padding:13px;border:1px solid var(--j22-line);background:#061c32}
.j22-verdict b{font-size:15px;overflow-wrap:anywhere}
.j22-verdict span{font-size:12.5px;line-height:1.7;color:var(--muted);overflow-wrap:anywhere}
.j22-verdict.is-pass{border-color:#3ddc84;background:#08220f}
.j22-verdict.is-pass b{color:#3ddc84}
.j22-verdict.is-nopass{border-color:#c9762b;background:#2a1708}
.j22-verdict.is-nopass b{color:#ffb066}
.j22-stamp{display:flex;flex-direction:column;align-items:center;gap:3px;padding:16px 12px;text-align:center;background:linear-gradient(155deg,#123a5e,#04182b);border:2px solid var(--j22-gold);border-radius:18px;box-shadow:0 0 26px rgba(255,214,110,.28)}
.j22-stamp span{font-size:11px;font-weight:800;letter-spacing:.24em;color:var(--j22-gold)}
.j22-stamp b{font-size:23px;font-weight:1000;color:#fff;line-height:1.2}
.j22-stamp em{font-size:11px;font-style:normal;letter-spacing:.06em;color:#cfe3f5;overflow-wrap:anywhere}
.j22-stamp small{font-size:11px;color:var(--muted)}
.j22-mastered{text-align:center;font-size:14px;font-weight:900;letter-spacing:.05em;color:var(--j22-gold);background:#0b2c4b;border:1px solid var(--j22-gold);border-radius:14px;padding:12px;overflow-wrap:anywhere}
.j22-hist{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.j22-hist>div{display:flex;flex-direction:column;align-items:center;gap:2px;background:#0a2743;border:1px solid #2f6288;border-radius:12px;padding:10px 5px;text-align:center}
.j22-hist b{font-size:15px;font-weight:900;color:var(--j22-gold);line-height:1.25;overflow-wrap:anywhere}
.j22-hist small{font-size:9.5px;line-height:1.4;color:var(--muted)}
.j22-mission{display:flex;flex-direction:column;gap:5px;background:#0a2743;border-color:#2f6288}
.j22-mission b{font-size:13px;color:var(--j22-gold)}
.j22-mission p{margin:0;font-size:13px;line-height:1.7;color:#dceaf6;overflow-wrap:anywhere}
.j22-mission small{font-size:11px;line-height:1.6;color:var(--muted)}
.j22-lock{font-size:13px;line-height:1.65;color:#cfe3f5;background:#2a1708;border-color:#8a5a18}

/* ---- wider screens: keep it a premium shop, not a stretched list ------ */
@media (min-width:620px){
  .j22-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .j22-picks{grid-template-columns:repeat(3,1fr)}
  .j22-scale{gap:6px}
  .j22-scale b{font-size:11px}
  .j22-scale small{font-size:10px}
}
@media (min-width:900px){
  .j22-grid{grid-template-columns:repeat(4,1fr)}
}
/* very small phones: still 2 columns, never 1 (spec 13) */
@media (max-width:359px){
  .j22-grid,.j22-picks{grid-template-columns:repeat(2,1fr);gap:8px}
  .j22-pname{font-size:12px}
  .j22-ppv b{font-size:18px}
  .j22-pick img{width:54px;height:54px}
  .j22-hist b{font-size:13px}
}

/* ===================== J2.3 · STAGE 3 PRODUCT KNOWLEDGE ================== */
.j23-root{--j23-pad:16px;--j23-navy:#05192d;--j23-navy2:#0d3054;--j23-line:#37668d;--j23-gold:var(--gold);display:block;width:100%;max-width:820px;margin:0 auto;padding:4px var(--j23-pad) calc(8px + env(safe-area-inset-bottom));scroll-padding-top:88px}
.j23-wrap{display:flex;flex-direction:column;gap:14px;width:100%;min-width:0}
.j23-wrap *{min-width:0;max-width:100%;box-sizing:border-box}
.j23-step{align-self:flex-start;max-width:100%;overflow-wrap:anywhere;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--j23-gold);background:#0b2c4b;border:1px solid var(--j23-line);border-radius:999px;padding:8px 14px}
.j23-hero{background:linear-gradient(155deg,var(--j23-navy2),var(--j23-navy));border:1px solid var(--j23-line);border-radius:20px;padding:var(--j23-pad);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,214,110,.08)}
.j23-title{margin:0;font-size:21px;font-weight:1000;letter-spacing:.04em;line-height:1.3;color:#fff;overflow-wrap:anywhere}
.j23-sub{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--j23-gold);font-weight:800;overflow-wrap:anywhere}
.j23-en{margin:4px 0 0;font-size:12px;letter-spacing:.1em;color:var(--muted);font-weight:700;overflow-wrap:anywhere}
.j23-obj,.j23-know,.j23-warn,.j23-detail,.j23-fb{background:#061c32;border:1px solid #27587d;border-radius:14px;padding:13px}
.j23-obj b,.j23-warn b{display:block;font-size:14px;color:var(--j23-gold);margin-bottom:5px;overflow-wrap:anywhere}
.j23-obj p{margin:0;font-size:13.5px;line-height:1.7;color:#cfe3f5;overflow-wrap:anywhere}
.j23-know{display:flex;flex-direction:column;gap:9px}
.j23-know div{display:flex;flex-direction:column;gap:2px}
.j23-know b{font-size:13.5px;color:var(--j23-gold);overflow-wrap:anywhere}
.j23-know span{font-size:12.5px;line-height:1.6;color:#cfe3f5;overflow-wrap:anywhere}
.j23-warn{background:#3a1d08;border-color:#8a5a18}
.j23-warn span{display:block;font-size:12.5px;line-height:1.7;color:#f6dcb4;overflow-wrap:anywhere}
.j23-cta{align-self:stretch;width:100%;min-height:48px;font-size:15.5px;font-weight:800}
.j23-cta[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.35)}
.j23-ghost{align-self:stretch;width:100%;min-height:44px;font-size:13.5px;background:transparent;border:1px solid var(--j23-line);color:#cfe3f5}
.j23-hint{margin:0;text-align:center;font-size:12.5px;color:#9fb8d0;overflow-wrap:anywhere}
.j23-disclaimer{font-size:11.5px;line-height:1.7;color:#8fa9c2;border:1px dashed #2b4d6d;border-radius:12px;padding:9px 12px;overflow-wrap:anywhere}
.j23-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.j23-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px;min-height:44px;background:#061c32;border:1px solid #27587d;border-radius:14px;color:#e8f2fb;cursor:pointer;transition:border-color .15s,transform .15s}
.j23-card:active{transform:scale(.98)}
.j23-card.is-on{border-color:var(--j23-gold);box-shadow:inset 0 0 0 1px rgba(230,189,88,.35)}
.j23-thumb{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;background:#0a2740;border-radius:10px;overflow:hidden}
.j23-thumb img{width:100%;height:100%;object-fit:contain}
.j23-cname{font-size:12.5px;font-weight:800;text-align:center;line-height:1.35;overflow-wrap:anywhere}
.j23-ccat{font-size:11px;color:#9fc4e4;overflow-wrap:anywhere}
.j23-done{font-size:10.5px;font-weight:800;color:var(--j23-gold)}
.j23-done.is-todo{color:#7f9db8;font-weight:600}
.j23-detail{display:flex;flex-direction:column;gap:9px}
.j23-detail p{margin:0;font-size:13.5px;line-height:1.7;color:#cfe3f5;overflow-wrap:anywhere}
.j23-detail p b{color:var(--j23-gold);margin-right:6px}
.j23-dhead{display:flex;align-items:center;gap:12px}
.j23-dhead .j23-thumb{width:64px;flex:0 0 64px}
.j23-dhead b{display:block;font-size:16px;color:#fff;overflow-wrap:anywhere}
.j23-dhead em{display:block;font-size:12px;font-style:normal;color:#9fc4e4;margin-top:3px;overflow-wrap:anywhere}
.j23-qimg{display:flex;align-items:center;justify-content:center;background:linear-gradient(155deg,var(--j23-navy2),var(--j23-navy));border:1px solid var(--j23-line);border-radius:18px;padding:14px;min-height:180px}
.j23-qimg img{width:100%;max-width:260px;height:auto;object-fit:contain}
.j23-opt{display:block;width:100%;min-height:48px;padding:12px 14px;text-align:left;font-size:15px;font-weight:700;color:#e8f2fb;background:#061c32;border:1px solid #27587d;border-radius:12px;cursor:pointer;overflow-wrap:anywhere}
.j23-opt:hover:not([disabled]){border-color:var(--j23-gold)}
.j23-opt[disabled]{cursor:default}
.j23-opt.is-right{background:#0c3a22;border-color:#2fbf72;color:#d6ffe8}
.j23-opt.is-wrong{background:#3d1620;border-color:#d95c6c;color:#ffdbe0}
.j23-fb{font-size:13.5px;line-height:1.7;font-weight:700;overflow-wrap:anywhere}
.j23-fb.ok{background:#0c3a22;border-color:#2fbf72;color:#d6ffe8}
.j23-fb.no{background:#3d1620;border-color:#d95c6c;color:#ffdbe0}
.j23-meter{display:flex;flex-direction:column;gap:8px;background:#061c32;border:1px solid #27587d;border-radius:14px;padding:13px}
.j23-meter-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;color:#cfe3f5;overflow-wrap:anywhere}
.j23-meter-top b{font-size:17px;color:var(--j23-gold)}
.j23-meter-bar{position:relative;height:10px;background:#0a2740;border:1px solid #27587d;border-radius:999px;overflow:hidden}
.j23-meter-bar i{position:absolute;inset:0 auto 0 0;display:block;background:linear-gradient(90deg,#b8860b,var(--j23-gold));border-radius:999px}
.j23-meter-labels{position:relative;height:34px;margin-top:2px}
.j23-meter-labels span{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;white-space:nowrap;opacity:.55}
.j23-meter-labels span.active{opacity:1}
.j23-meter-labels span b{font-size:11px;color:#cfe3f5}
.j23-meter-labels span.active b{color:var(--j23-gold)}
.j23-meter-labels span small{font-size:9.5px;color:#8fa9c2}
.j23-meter-note{margin:0;font-size:11.5px;line-height:1.7;color:#8fa9c2;overflow-wrap:anywhere}
@media (max-width:430px){
  .j23-root{--j23-pad:6px}
  .j23-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .j23-title{font-size:19px}
  .j23-sub{font-size:14.5px}
  .j23-qimg{min-height:150px;padding:10px}
}
@media (max-width:390px){
  .j23-grid{gap:7px}
  .j23-cname{font-size:11.5px}
  .j23-ccat{font-size:10.5px}
  .j23-opt{font-size:14px;padding:11px 12px}
  .j23-cta{font-size:14.5px}
  .j23-ghost{font-size:13px}
}
@media (min-width:1280px){
  .j23-root{max-width:820px}
  .j23-grid{gap:12px}
}

/* ===================== J2.3 · STAGE 3 · BATCH 3B ========================= */
/* 4-module PLAY (match/category/knowledge/quiz) + DECIDE + UNDERSTAND + RESULT.
   Scoped to .j23-root only — no J2.1/J2.2 selectors are touched. */

.j23-modbar{display:flex;flex-wrap:wrap;gap:6px}
.j23-mod{flex:1 1 auto;min-width:0;max-width:100%;padding:7px 9px;border:1px solid #27587d;border-radius:999px;background:#061c32;color:#8fa9c2;font-size:11px;font-weight:800;text-align:center;overflow-wrap:anywhere}
.j23-mod.is-on{border-color:#e6bd58;background:#33270c;color:#ffe9a8}
.j23-mod.is-done{border-color:#2fbf72;background:#0c3a22;color:#7ef0b4}

.j23-pname{margin:0;text-align:center;font-size:16px;font-weight:900;color:#fff;overflow-wrap:anywhere}
.j23-prompt{margin-top:5px;font-size:15.5px;font-weight:800;color:#fff}

.j23-scene{background:#061c32;border:1px solid #27587d;border-radius:14px;padding:13px}
.j23-scene b{display:block;font-size:13px;color:var(--j23-gold);margin-bottom:5px;overflow-wrap:anywhere}
.j23-scene p{margin:0;font-size:14.5px;line-height:1.75;color:#e8f2fb;overflow-wrap:anywhere}

.j23-recap{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:7px}
.j23-recap li{font-size:13.5px;line-height:1.7;color:#cfe3f5;overflow-wrap:anywhere}
.j23-recap li::marker{color:var(--j23-gold)}

.j23-stamp{display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;padding:20px 14px;border-radius:20px;border:1px solid}
.j23-stamp b{font-size:34px;font-weight:1000;letter-spacing:.1em;line-height:1.15}
.j23-stamp span{font-size:13.5px;line-height:1.6;color:#cfe3f5;overflow-wrap:anywhere}
.j23-stamp.is-pass{background:linear-gradient(155deg,#0c3a22,#05192d);border-color:#2fbf72;box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 30px rgba(47,191,114,.22)}
.j23-stamp.is-pass b{color:#7ef0b4}
.j23-stamp.is-fail{background:linear-gradient(155deg,#3d1620,#05192d);border-color:#d95c6c;box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 30px rgba(217,92,108,.2)}
.j23-stamp.is-fail b{color:#ff9aa6}

.j23-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.j23-stats div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 7px;background:#061c32;border:1px solid #27587d;border-radius:14px;text-align:center;min-width:0}
.j23-stats b{font-size:18px;color:var(--j23-gold);overflow-wrap:anywhere}
.j23-stats small{font-size:10.5px;color:#8fa9c2;overflow-wrap:anywhere}

.j23-chips{display:flex;flex-wrap:wrap;gap:7px}
.j23-chip{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid #37668d;background:#0b2c4b;color:#cfe3f5;font-size:11.5px;font-weight:800;overflow-wrap:anywhere}
.j23-chip.is-green{border-color:#2fbf72;background:#0c3a22;color:#7ef0b4}

@media (max-width:430px){
  .j23-modbar{gap:5px}
  .j23-mod{font-size:10px;padding:6px 6px}
  .j23-pname{font-size:14.5px}
  .j23-prompt{font-size:14.5px}
  .j23-scene{padding:11px}
  .j23-scene p{font-size:13.5px}
  .j23-recap li{font-size:12.5px}
  .j23-stamp{padding:16px 11px}
  .j23-stamp b{font-size:27px}
  .j23-stamp span{font-size:12.5px}
  .j23-stats{gap:6px}
  .j23-stats div{padding:9px 5px}
  .j23-stats b{font-size:16px}
  .j23-stats small{font-size:10px}
  .j23-chip{font-size:11px;padding:7px 10px}
}
@media (max-width:390px){
  .j23-mod{font-size:9.5px;padding:5px 5px}
  .j23-stamp b{font-size:24px}
  .j23-stats b{font-size:15px}
}
@media (min-width:1280px){
  .j23-modbar{gap:9px}
}

/* ===================== J2.4 · SHARED JOURNEY GAME ENGINE ================= */
/* Stage 4 (PV & MEMBER LEVEL) is the first consumer of the reusable JGE.
   Scoped to .j24-root — no J2.1 / J2.2 / J2.3 selector is touched. */

.j24-root{--jge-pad:16px;--jge-navy:#05192d;--jge-navy2:#0d3054;--jge-line:#37668d;--jge-gold:var(--gold);display:block;width:100%;max-width:820px;margin:0 auto;padding:4px var(--jge-pad) calc(8px + env(safe-area-inset-bottom));scroll-padding-top:88px}
.jge-wrap{display:flex;flex-direction:column;gap:14px;width:100%;min-width:0}
.jge-wrap *{min-width:0;max-width:100%;box-sizing:border-box}
.jge-step{align-self:flex-start;max-width:100%;overflow-wrap:anywhere;font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--jge-gold);background:#0b2c4b;border:1px solid var(--jge-line);border-radius:999px;padding:8px 14px}
.jge-hero{background:linear-gradient(155deg,var(--jge-navy2),var(--jge-navy));border:1px solid var(--jge-line);border-radius:20px;padding:var(--jge-pad);box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,214,110,.08)}
.jge-title{margin:0;font-size:21px;font-weight:1000;letter-spacing:.04em;line-height:1.3;color:#fff;overflow-wrap:anywhere}
.jge-sub{margin:6px 0 0;font-size:16px;line-height:1.5;color:var(--jge-gold);font-weight:800;overflow-wrap:anywhere}
.jge-en{margin:4px 0 0;font-size:12px;letter-spacing:.1em;color:var(--muted);font-weight:700;overflow-wrap:anywhere}
.jge-obj,.jge-know,.jge-warn,.jge-detail,.jge-fb,.jge-scene{background:#061c32;border:1px solid #27587d;border-radius:14px;padding:13px}
.jge-obj b,.jge-warn b{display:block;font-size:14px;color:var(--jge-gold);margin-bottom:5px;overflow-wrap:anywhere}
.jge-obj p,.jge-obj li{font-size:13.5px;line-height:1.7;color:#cfe3f5;overflow-wrap:anywhere}
.jge-obj p{margin:0}
.jge-know{display:flex;flex-direction:column;gap:9px}
.jge-know div{display:flex;flex-direction:column;gap:2px}
.jge-know b{font-size:13.5px;color:var(--jge-gold);overflow-wrap:anywhere}
.jge-know span{font-size:12.5px;line-height:1.6;color:#cfe3f5;overflow-wrap:anywhere}
.jge-warn{background:#3a1d08;border-color:#8a5a18}
.jge-warn span{display:block;font-size:12.5px;line-height:1.7;color:#f6dcb4;overflow-wrap:anywhere}
.jge-cta{align-self:stretch;width:100%;min-height:48px;font-size:15.5px;font-weight:800}
.jge-cta[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.35)}
.jge-ghost{align-self:stretch;width:100%;min-height:44px;font-size:13.5px;background:transparent;border:1px solid var(--jge-line);color:#cfe3f5}
.jge-hint{margin:0;text-align:center;font-size:12.5px;color:#9fb8d0;overflow-wrap:anywhere}
.jge-disclaimer{font-size:11.5px;line-height:1.7;color:#8fa9c2;border:1px dashed #2b4d6d;border-radius:12px;padding:9px 12px;overflow-wrap:anywhere}
.jge-note{margin:0;font-size:11.5px;line-height:1.7;color:#8fa9c2;overflow-wrap:anywhere}

/* KNOW grid + detail */
.jge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.jge-card{display:flex;flex-direction:column;align-items:flex-start;gap:5px;padding:12px 11px;min-height:44px;background:#061c32;border:1px solid #27587d;border-radius:14px;color:#e8f2fb;cursor:pointer;text-align:left;transition:border-color .15s,transform .15s}
.jge-card:active{transform:scale(.98)}
.jge-card.is-on{border-color:var(--jge-gold);box-shadow:inset 0 0 0 1px rgba(230,189,88,.35)}
.jge-card-ic{font-size:20px;line-height:1}
.jge-card-t{font-size:13.5px;font-weight:800;line-height:1.4;overflow-wrap:anywhere}
.jge-card-done{font-size:10.5px;font-weight:800;color:var(--jge-gold)}
.jge-card-done.is-todo{color:#7f9db8;font-weight:600}
.jge-detail{display:flex;flex-direction:column;gap:9px}
.jge-detail p{margin:0;font-size:13.5px;line-height:1.75;color:#cfe3f5;overflow-wrap:anywhere}
.jge-detail-note{color:#9fc4e4 !important;font-size:12.5px !important}
.jge-dhead{display:flex;align-items:center;gap:11px}
.jge-dhead-ic{font-size:22px;line-height:1}
.jge-dhead b{font-size:16px;color:#fff;overflow-wrap:anywhere}

/* PLAY module bar */
.jge-modbar{display:flex;flex-wrap:wrap;gap:6px}
.jge-mod{flex:1 1 auto;min-width:0;max-width:100%;padding:7px 9px;border:1px solid #27587d;border-radius:999px;background:#061c32;color:#8fa9c2;font-size:11px;font-weight:800;text-align:center;overflow-wrap:anywhere}
.jge-mod.is-on{border-color:#e6bd58;background:#33270c;color:#ffe9a8}
.jge-mod.is-done{border-color:#2fbf72;background:#0c3a22;color:#7ef0b4}

/* SCENES */
.jge-scene b{display:block;font-size:13px;color:var(--jge-gold);margin-bottom:5px;overflow-wrap:anywhere}
.jge-scene p{margin:0;font-size:14.5px;line-height:1.75;color:#e8f2fb;overflow-wrap:anywhere}
.jge-cart{display:flex;flex-direction:column;gap:9px;background:#061c32;border:1px solid #27587d;border-radius:14px;padding:13px}
.jge-cart-row{display:flex;flex-direction:column;gap:7px;padding-bottom:9px;border-bottom:1px dashed #27587d}
.jge-cart-row:last-of-type{border-bottom:0;padding-bottom:0}
.jge-cart-info{display:flex;flex-direction:column;gap:2px}
.jge-cart-info b{font-size:14px;color:#fff;overflow-wrap:anywhere}
.jge-cart-info small{font-size:11.5px;color:#9fc4e4;overflow-wrap:anywhere}
.jge-cart-qty{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.jge-qbtn{min-width:44px;min-height:44px;padding:0 9px;font-size:14px;font-weight:800;color:#e8f2fb;background:#0a2740;border:1px solid #37668d;border-radius:10px;cursor:pointer}
.jge-qbtn:hover:not([disabled]){border-color:var(--jge-gold)}
.jge-qbtn[disabled]{opacity:.45;cursor:not-allowed}
.jge-qn{min-width:34px;text-align:center;font-size:17px;color:var(--jge-gold);overflow-wrap:anywhere}
.jge-cart-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;color:#cfe3f5;overflow-wrap:anywhere}
.jge-cart-total b{font-size:18px;color:var(--jge-gold)}

/* PV meter (learning content — never the RESULT score) */
.jge-meter{display:flex;flex-direction:column;gap:8px;background:#061c32;border:1px solid #27587d;border-radius:14px;padding:13px}
.jge-meter-big{gap:12px;padding:15px}
.jge-meter-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;color:#cfe3f5;overflow-wrap:anywhere}
.jge-meter-top b{font-size:17px;color:var(--jge-gold)}
.jge-meter-bar{position:relative;height:10px;background:#0a2740;border:1px solid #27587d;border-radius:999px;overflow:hidden}
.jge-meter-bar i{position:absolute;inset:0 auto 0 0;display:block;background:linear-gradient(90deg,#b8860b,var(--jge-gold));border-radius:999px}
.jge-meter-labels{position:relative;height:36px;margin-top:2px}
.jge-meter-labels span{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;white-space:nowrap;opacity:.55}
.jge-meter-labels span.active{opacity:1}
.jge-meter-labels span b{font-size:11px;color:#cfe3f5}
.jge-meter-labels span.active b{color:var(--jge-gold)}
.jge-meter-labels span small{font-size:9.5px;color:#8fa9c2}

/* LEVEL ladder scene */
.jge-ladder{display:flex;flex-direction:column;gap:7px;background:#061c32;border:1px solid #27587d;border-radius:14px;padding:13px}
.jge-ladder-row{display:flex;align-items:baseline;gap:10px;padding:9px 11px;border:1px solid #27587d;border-radius:10px;background:#0a2740;overflow-wrap:anywhere}
.jge-ladder-row b{font-size:14px;color:#cfe3f5;min-width:44px}
.jge-ladder-row span{font-size:13px;color:#9fc4e4;flex:1 1 auto}
.jge-ladder-row em{font-style:normal;font-size:11px;font-weight:800;color:var(--jge-gold)}
.jge-ladder-row.is-target{border-color:var(--jge-gold);background:#33270c}
.jge-ladder-row.is-target b{color:#ffe9a8}

/* MCQ options + feedback */
.jge-opt{display:block;width:100%;min-height:48px;padding:12px 14px;text-align:left;font-size:15px;font-weight:700;color:#e8f2fb;background:#061c32;border:1px solid #27587d;border-radius:12px;cursor:pointer;overflow-wrap:anywhere}
.jge-opt:hover:not([disabled]){border-color:var(--jge-gold)}
.jge-opt[disabled]{cursor:default}
.jge-opt.is-right{background:#0c3a22;border-color:#2fbf72;color:#d6ffe8}
.jge-opt.is-wrong{background:#3d1620;border-color:#d95c6c;color:#ffdbe0}
.jge-fb{font-size:13.5px;line-height:1.7;font-weight:700;overflow-wrap:anywhere}
.jge-fb.ok{background:#0c3a22;border-color:#2fbf72;color:#d6ffe8}
.jge-fb.no{background:#3d1620;border-color:#d95c6c;color:#ffdbe0}
.jge-recap{margin:0;padding-left:19px;display:flex;flex-direction:column;gap:7px}
.jge-recap li{font-size:13.5px;line-height:1.7;color:#cfe3f5;overflow-wrap:anywhere}
.jge-recap li::marker{color:var(--jge-gold)}

/* RESULT — plain percentage score bar (deliberately NOT the PV ladder) */
.jge-scorebar{display:flex;flex-direction:column;gap:8px;background:#061c32;border:1px solid #27587d;border-radius:14px;padding:13px}
.jge-scorebar-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;color:#cfe3f5;overflow-wrap:anywhere}
.jge-scorebar-top b{font-size:17px;color:var(--jge-gold)}
.jge-scorebar-track{position:relative;height:12px;background:#0a2740;border:1px solid #27587d;border-radius:999px;overflow:hidden}
.jge-scorebar-track i{position:absolute;inset:0 auto 0 0;display:block;background:linear-gradient(90deg,#b8860b,var(--jge-gold));border-radius:999px;transition:width .3s}
.jge-stamp{display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;padding:20px 14px;border-radius:20px;border:1px solid}
.jge-stamp b{font-size:34px;font-weight:1000;letter-spacing:.1em;line-height:1.15}
.jge-stamp span{font-size:13.5px;line-height:1.6;color:#cfe3f5;overflow-wrap:anywhere}
.jge-stamp.is-pass{background:linear-gradient(155deg,#0c3a22,#05192d);border-color:#2fbf72;box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 30px rgba(47,191,114,.22)}
.jge-stamp.is-pass b{color:#7ef0b4}
.jge-stamp.is-fail{background:linear-gradient(155deg,#3d1620,#05192d);border-color:#d95c6c;box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 30px rgba(217,92,108,.2)}
.jge-stamp.is-fail b{color:#ff9aa6}
.jge-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.jge-stats div{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 7px;background:#061c32;border:1px solid #27587d;border-radius:14px;text-align:center;min-width:0}
.jge-stats b{font-size:18px;color:var(--jge-gold);overflow-wrap:anywhere}
.jge-stats small{font-size:10.5px;color:#8fa9c2;overflow-wrap:anywhere}
.jge-chips{display:flex;flex-wrap:wrap;gap:7px}
.jge-chip{display:inline-block;padding:8px 12px;border-radius:999px;border:1px solid #37668d;background:#0b2c4b;color:#cfe3f5;font-size:11.5px;font-weight:800;overflow-wrap:anywhere}
.jge-chip.is-green{border-color:#2fbf72;background:#0c3a22;color:#7ef0b4}

/* HISTORY (read-only mirror of the J1 journey record) */
.jge-hist{display:flex;flex-direction:column;gap:8px;background:#061c32;border:1px solid #27587d;border-radius:14px;padding:13px}
.jge-hist-lb{font-size:11.5px;font-weight:800;letter-spacing:.06em;color:#8fa9c2;overflow-wrap:anywhere}
.jge-hgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.jge-hgrid div{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 5px;background:#0a2740;border:1px solid #27587d;border-radius:10px;text-align:center;min-width:0}
.jge-hgrid b{font-size:15px;color:var(--jge-gold);overflow-wrap:anywhere}
.jge-hgrid small{font-size:10px;color:#8fa9c2;overflow-wrap:anywhere}
.jge-hist-note{font-size:11px;color:#8fa9c2;overflow-wrap:anywhere}

@media (max-width:430px){
  .j24-root{--jge-pad:6px}
  .jge-title{font-size:19px}
  .jge-sub{font-size:14.5px}
  .jge-grid{gap:8px}
  .jge-modbar{gap:5px}
  .jge-mod{font-size:10px;padding:6px 6px}
  .jge-scene{padding:11px}
  .jge-scene p{font-size:13.5px}
  .jge-recap li{font-size:12.5px}
  .jge-stamp{padding:16px 11px}
  .jge-stamp b{font-size:27px}
  .jge-stamp span{font-size:12.5px}
  .jge-stats{gap:6px}
  .jge-stats div{padding:9px 5px}
  .jge-stats b{font-size:16px}
  .jge-stats small{font-size:10px}
  .jge-chip{font-size:11px;padding:7px 10px}
  .jge-hgrid{grid-template-columns:repeat(2,1fr)}
  .jge-meter-labels span b{font-size:10px}
  .jge-meter-labels span small{font-size:9px}
}
@media (max-width:390px){
  .jge-grid{gap:7px}
  .jge-mod{font-size:9.5px;padding:5px 5px}
  .jge-stamp b{font-size:24px}
  .jge-stats b{font-size:15px}
  .jge-opt{font-size:14px;padding:11px 12px}
  .jge-cta{font-size:14.5px}
  .jge-ghost{font-size:13px}
  .jge-cart-qty{gap:5px}
  .jge-qbtn{min-width:42px;padding:0 7px;font-size:13px}
  .jge-meter-labels span{white-space:normal;width:56px}
}
@media (min-width:1280px){
  .j24-root{max-width:820px}
  .jge-grid{gap:12px}
  .jge-modbar{gap:9px}
}

/* ==========================================================================
   BATCH E2 · SHARED JOURNEY GAME ENGINE · STAGES 5-8
   Stage 5 (BRANCH & SUPPORT SYSTEM), 6 (CUSTOMER LIFETIME VALUE),
   7 (TEAM STRUCTURE), 8 (LEAD THROUGH THE SYSTEM) are the next consumers
   of the shared JGE. Scoped to .j25-root .. .j28-root — no J2.1 / J2.2 /
   J2.3 / J2.4 selector is touched. The four new scene kinds below
   (hub / tiers / tree / seq) only add selectors that start with .jge-.
   ========================================================================== */
.j25-root,.j26-root,.j27-root,.j28-root{--jge-pad:16px;--jge-navy:#05192d;--jge-navy2:#0d3054;--jge-line:#37668d;--jge-gold:var(--gold);display:block;width:100%;max-width:820px;margin:0 auto;padding:4px var(--jge-pad) calc(8px + env(safe-area-inset-bottom));scroll-padding-top:88px}

/* hub — Stage 5 support-system map */
.jge-hub{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.jge-cell{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:44px;padding:12px 11px;background:#061c32;border:1px solid #27587d;border-radius:14px;color:#e8f2fb;text-align:left;cursor:pointer;transition:border-color .15s,transform .15s}
.jge-cell i{font-style:normal;font-size:20px;line-height:1}
.jge-cell b{font-size:14.5px;font-weight:800;overflow-wrap:anywhere}
.jge-cell small{font-size:11.5px;line-height:1.6;color:#8fa9c2;overflow-wrap:anywhere}
.jge-cell:not(:disabled):hover{border-color:var(--jge-gold);transform:translateY(-1px)}
.jge-cell:disabled{cursor:default}
.jge-cell.is-right{background:#0c3a22;border-color:#2fbf72;color:#d6ffe8}
.jge-cell.is-wrong{background:#3d1620;border-color:#d95c6c;color:#ffdbe0}

/* tiers — Stage 6 CLV ladder */
.jge-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.jge-tier{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:76px;padding:10px 6px;background:#061c32;border:1px solid #27587d;border-radius:14px;color:#e8f2fb;text-align:center;cursor:pointer;transition:border-color .15s,transform .15s}
.jge-tier b{font-size:21px;font-weight:800;line-height:1.1;overflow-wrap:anywhere}
.jge-tier small{font-size:11px;line-height:1.5;color:#8fa9c2;overflow-wrap:anywhere}
.jge-tier:not(:disabled):hover{border-color:var(--jge-gold);transform:translateY(-1px)}
.jge-tier:disabled{cursor:default}
.jge-tier.is-mark{border-color:var(--jge-gold);box-shadow:inset 0 0 0 1px rgba(255,214,90,.35)}
.jge-tier.is-right{background:#0c3a22;border-color:#2fbf72;color:#d6ffe8;box-shadow:none}
.jge-tier.is-wrong{background:#3d1620;border-color:#d95c6c;color:#ffdbe0;box-shadow:none}

/* tree — Stage 7 team structure */
.jge-tree{display:flex;flex-direction:column;gap:10px;padding:4px 0}
.jge-tree-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.jge-node{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:104px;min-height:54px;padding:9px 10px;background:#061c32;border:1px solid #27587d;border-radius:14px;color:#e8f2fb;text-align:center;cursor:pointer;transition:border-color .15s,transform .15s}
.jge-node i{font-style:normal;font-size:16px;line-height:1}
.jge-node b{font-size:13.5px;font-weight:800;overflow-wrap:anywhere}
.jge-node small{font-size:11px;line-height:1.5;color:#8fa9c2;overflow-wrap:anywhere}
.jge-node:not(:disabled):hover{border-color:var(--jge-gold);transform:translateY(-1px)}
.jge-node:disabled{cursor:default}
.jge-node.is-target{border-color:var(--jge-gold)}
.jge-node.is-right{background:#0c3a22;border-color:#2fbf72;color:#d6ffe8}
.jge-node.is-wrong{background:#3d1620;border-color:#d95c6c;color:#ffdbe0}

/* seq — Stage 8 ordered learning path */
.jge-seq{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.jge-seq-row{display:flex;align-items:center;gap:10px;background:#061c32;border:1px solid #27587d;border-radius:12px;padding:10px 12px}
.jge-seq-no{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#0d3054;border:1px solid #37668d;font-size:12.5px;font-weight:800;color:#cfe4f6}
.jge-seq-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.jge-seq-body b{font-size:14px;font-weight:800;color:#e8f2fb;overflow-wrap:anywhere}
.jge-seq-body small{font-size:11.5px;line-height:1.6;color:#8fa9c2;overflow-wrap:anywhere}
.jge-seq-row.is-blank{border-style:dashed;border-color:var(--jge-gold);background:#0a1e18}
.jge-seq-row.is-blank .jge-seq-body b{color:var(--jge-gold)}
.jge-seq-opts{display:grid;grid-template-columns:1fr;gap:8px}
.jge-seq-opt{width:100%}

@media (max-width:430px){
  .j25-root,.j26-root,.j27-root,.j28-root{--jge-pad:6px}
  .jge-hub{gap:8px}
  .jge-cell{padding:10px 9px}
  .jge-cell b{font-size:14px}
  .jge-tiers{gap:6px}
  .jge-tier{min-height:66px;padding:8px 4px}
  .jge-tier b{font-size:17px}
  .jge-tier small{font-size:10px}
  .jge-tree-row{gap:6px}
  .jge-node{min-width:88px;padding:8px 8px}
  .jge-node b{font-size:13px}
  .jge-seq-row{padding:9px 10px;gap:8px}
  .jge-seq-opts{gap:7px}
}
@media (min-width:1280px){
  .j25-root,.j26-root,.j27-root,.j28-root{max-width:820px}
  .jge-hub{gap:12px}
  .jge-tiers{gap:12px}
  .jge-seq-opts{gap:12px}
}

/* ==========================================================================
   BATCH E3 · SHARED JOURNEY GAME ENGINE · STAGES 9-14
   Stage 9 (GOAL PLANNER), 10 (LEADER SKILL TREE), 11 (EVENT LEADERSHIP),
   12 (ACHIEVEMENT ROAD), 13 (DUPLICATION), 14 (FINAL MISSION) are the final
   six consumers of the shared JGE. Scoped to .j29-root .. .j34-root — this
   block is APPENDED ONLY; no J2.1 .. J2.4 selector and no stage-root
   selector from the previous batch is touched. Every scene kind used here
   (seq / tiers / hub / tree / text) already has global .jge-* selectors
   defined by Batch E2, so this block only re-declares the stage roots.
   ========================================================================== */
.j29-root,.j30-root,.j31-root,.j32-root,.j33-root,.j34-root{--jge-pad:16px;--jge-navy:#05192d;--jge-navy2:#0d3054;--jge-line:#37668d;--jge-gold:var(--gold);display:block;width:100%;max-width:820px;margin:0 auto;padding:4px var(--jge-pad) calc(8px + env(safe-area-inset-bottom));scroll-padding-top:88px}

@media (max-width:430px){
  .j29-root,.j30-root,.j31-root,.j32-root,.j33-root,.j34-root{--jge-pad:6px}
}
@media (min-width:1280px){
  .j29-root,.j30-root,.j31-root,.j32-root,.j33-root,.j34-root{max-width:820px}
}

/* ================= STEP 0 · VIP HOME (flag-gated: .vip-home, default OFF)
   Approved FREEDOM gold card design + 101 CASES grid — copied verbatim from the
   approved preview and scoped so the legacy HOME is unaffected when the flag is OFF.
   ================= */
:root{--vip-navy-0:#02060f;--vip-navy-1:#061029;--vip-navy-2:#0b1a3d;--vip-navy-3:#12275e;
 --vip-gold-1:#fdf3cf;--vip-gold-2:#f3d98a;--vip-gold-3:#dcb557;--vip-gold-4:#a9781f;--vip-gold-5:#6d4c11;}.vip-home,.vip-home{background:
 radial-gradient(1200px 600px at 80% -10%, #1a3f7a 0%, rgba(6,16,41,0) 60%),
 radial-gradient(900px 500px at 10% 0%, #12275e 0%, rgba(2,6,15,0) 55%),
 linear-gradient(180deg,var(--vip-navy-1) 0%,var(--vip-navy-0) 100%)!important;}.vip-home .vip-hero{position:relative;display:flex;align-items:center;gap:14px;padding:16px 16px 18px;margin:0 0 16px;
 border:1px solid rgba(243,217,138,.45);border-radius:20px;overflow:hidden;
 background:linear-gradient(135deg,var(--vip-navy-3) 0%,var(--vip-navy-2) 45%,var(--vip-navy-1) 100%);
 box-shadow:0 18px 44px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.10),0 0 30px rgba(220,181,87,.16);}.vip-home .vip-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.14) 50%,rgba(255,255,255,0) 62%);}.vip-home .vip-hero-logo{width:70px;height:70px;object-fit:cover;border-radius:16px;flex:0 0 auto;
 border:2px solid transparent;background:
   linear-gradient(var(--vip-navy-2),var(--vip-navy-2)) padding-box,
   linear-gradient(145deg,var(--vip-gold-1),var(--vip-gold-3) 40%,var(--vip-gold-4) 75%,var(--vip-gold-2)) border-box;
 box-shadow:0 8px 22px rgba(0,0,0,.55);}.vip-home .vip-hero-txt{display:flex;flex-direction:column;gap:3px;min-width:0;}.vip-home .vip-hero-k{font-size:10px;letter-spacing:2.6px;color:var(--vip-gold-2);font-weight:800;}.vip-home .vip-hero-h{font-size:23px;line-height:1.15;font-weight:1000;letter-spacing:.4px;
 background:linear-gradient(180deg,var(--vip-gold-1) 0%,var(--vip-gold-2) 45%,var(--vip-gold-3) 75%,var(--vip-gold-4) 100%);
 -webkit-background-clip:text;background-clip:text;color:transparent;}.vip-home .vip-hero-s{font-size:10px;letter-spacing:1.6px;color:#9fb6d6;font-weight:700;}/* ---- gold FREEDOM card (same markup, restyled) ---- */
.vip-home .fcard,.vip-home .fcard{border-radius:22px!important;border:1.5px solid rgba(109,76,17,.85)!important;
 background:linear-gradient(150deg,var(--vip-gold-1) 0%,var(--vip-gold-2) 26%,var(--vip-gold-3) 55%,var(--vip-gold-4) 88%)!important;
 color:#2b1a02!important;box-shadow:0 20px 46px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.6),0 0 26px rgba(220,181,87,.28)!important;}.vip-home .fcard *{color:#2b1a02!important;}.vip-home .fcard-brand,.vip-home .fcard-name,.vip-home .fcard-tier,.vip-home .fcard-holder b{font-weight:1000!important;}.vip-home .fcard-name em{color:#5a3c05!important;}.vip-home .fcard-road,.vip-home .fcard-msg,.vip-home .fcard-tag,.vip-home .fcard-sig{color:#4a3104!important;opacity:.92;}.vip-home .fcard-bar{background:rgba(43,26,2,.25)!important;}.vip-home .fcard-bar i{background:linear-gradient(90deg,#8a5f10,#2b1a02)!important;}.vip-home .fcard-goals i{background:rgba(43,26,2,.14)!important;border:1px solid rgba(43,26,2,.35)!important;color:#2b1a02!important;}.vip-home .fcard-wing img{filter:none!important;}/* ---- 101 CASES ---- */
.vip-home .cases101{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}@media(min-width:430px){.vip-home .cases101{grid-template-columns:repeat(3,minmax(0,1fr));}}@media(min-width:900px){.vip-home .cases101{grid-template-columns:repeat(4,minmax(0,1fr));}}.vip-home .case-card{all:unset;display:flex;flex-direction:column;gap:8px;padding:8px 8px 10px;border-radius:16px;cursor:pointer;
 min-width:0;max-width:100%;overflow:hidden;
 background:linear-gradient(180deg,var(--vip-navy-2),var(--vip-navy-1));
 border:1px solid rgba(220,181,87,.35);box-shadow:0 10px 24px rgba(0,0,0,.42);
 transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;}.vip-home .case-card:hover,.vip-home .case-card:focus-visible{transform:translateY(-2px);border-color:var(--vip-gold-2);
 box-shadow:0 16px 30px rgba(0,0,0,.55),0 0 18px rgba(220,181,87,.30);}.vip-home .case-card img{width:100%;min-width:0;aspect-ratio:1/1;object-fit:contain;border-radius:11px;display:block;background:#01060f;}.vip-home .case-name{font-size:12.5px;font-weight:900;letter-spacing:.3px;text-align:center;overflow-wrap:anywhere;
 background:linear-gradient(180deg,var(--vip-gold-1),var(--vip-gold-3) 60%,var(--vip-gold-4));
 -webkit-background-clip:text;background-clip:text;color:transparent;}.vip-home .case-go{font-size:9.5px;letter-spacing:.6px;text-align:center;color:#8fa8c8;font-weight:800;
 overflow-wrap:anywhere;word-break:break-all;min-width:0;}.vip-home .cases-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 8px;}.vip-home .cases-badge{font-size:10px;font-weight:1000;letter-spacing:1.6px;padding:5px 10px;border-radius:999px;
 color:#2b1a02;background:linear-gradient(180deg,var(--vip-gold-1),var(--vip-gold-3));}/* keep the section label in the gold language */
.vip-home .section-label{color:var(--vip-gold-2);}/* ==========================================================================
   APPROVED FREEDOM MEMBER GOLD CARD — 3 owner refinements (PREVIEW ONLY)
   Layout / colours / typography / business logic unchanged.
   ========================================================================== */
.vip-home .fcard,.vip-home .fcard{isolation:isolate;}/* R1 · metallic-gold light reflection from the TOP-LEFT
   painted BEHIND the content (z-index 0) → text readability untouched */
.vip-home .fcard::before,.vip-home .fcard::before{
  z-index:0;
  background:
   linear-gradient(135deg, rgba(255,255,255,.52) 0%, rgba(255,252,236,.32) 6%,
                          rgba(255,246,206,.15) 14%, rgba(255,255,255,.04) 24%,
                          rgba(255,255,255,0) 36%),
   linear-gradient(135deg, rgba(255,255,255,0) 33%, rgba(255,255,255,.26) 40%,
                          rgba(255,255,255,0) 47%);
}/* R2 · large, very subtle authentic K-ELITE logo watermark on the RIGHT
   (real logo file, screen-blended so the dark plate disappears; behind the text) */
.vip-home .fcard::after,.vip-home .fcard::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  top:50%;right:-7%;transform:translateY(-50%);
  width:58%;max-width:250px;aspect-ratio:737/636;
  background:url("public/k-elite-team-logo.jpg") center/contain no-repeat;
  mix-blend-mode:screen;opacity:.09;
}/* every child paints above both reflections → nothing is obscured */
.vip-home .fcard>*,.vip-home .fcard>*{position:relative;z-index:1;}/* R3 · member ID + progress: clarity and mobile readability.
   Values remain the app's own runtime figures (no rank/ID/XP/badge invented). */
.vip-home .fcard-holder,.vip-home .fcard-holder{
  font-size:14px!important;letter-spacing:.3px!important;font-weight:900!important;
  color:#2b1a02!important;margin:7px 0 3px!important;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}.vip-home .fcard-holder b,.vip-home .fcard-holder b{font-weight:1000!important;letter-spacing:.2px!important;}.vip-home .fcard-holder i,.vip-home .fcard-holder i{
  font-style:normal!important;font-size:12px!important;font-weight:1000!important;
  letter-spacing:1.2px!important;padding:5px 11px!important;border-radius:99px!important;
  font-variant-numeric:tabular-nums;color:#1a1000!important;
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,247,216,.74))!important;
  border:1px solid rgba(74,49,4,.92)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 5px rgba(43,26,2,.30)!important;
}.vip-home .fcard-prog,.vip-home .fcard-prog{margin-bottom:13px!important;}.vip-home .fcard-prow,.vip-home .fcard-prow{
  font-size:12px!important;font-weight:900!important;color:#180e00!important;
  letter-spacing:.3px!important;gap:8px!important;margin-bottom:7px!important;
  font-variant-numeric:tabular-nums;
}.vip-home .fcard-prow span,.vip-home .fcard-prow span{
  font-weight:900!important;color:#180e00!important;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}.vip-home .fcard-prow b,.vip-home .fcard-prow b{
  font-size:12.5px!important;font-weight:1000!important;color:#120a00!important;
  font-variant-numeric:tabular-nums!important;
}.vip-home .fcard-bar,.vip-home .fcard-bar{
  height:9px!important;background:rgba(43,26,2,.30)!important;
  border:1px solid rgba(43,26,2,.55)!important;
}.vip-home .fcard-bar i,.vip-home .fcard-bar i{background:linear-gradient(90deg,#6d4c11,#2b1a02)!important;}@media(max-width:390px){.vip-home .fcard-holder,.vip-home .fcard-holder{font-size:13.5px!important;}.vip-home .fcard-holder i,.vip-home .fcard-holder i{font-size:11.5px!important;padding:4px 9px!important;letter-spacing:1px!important;}.vip-home .fcard-prow,.vip-home .fcard-prow{font-size:11.5px!important;gap:6px!important;}.vip-home .fcard-prow b,.vip-home .fcard-prow b{font-size:12px!important;}
}


body:has(.vip-home){background: radial-gradient(1200px 600px at 80% -10%, #1a3f7a 0%, rgba(6,16,41,0) 60%), radial-gradient(900px 500px at 10% 0%, #12275e 0%, rgba(2,6,15,0) 55%), linear-gradient(180deg,var(--vip-navy-1) 0%,var(--vip-navy-0) 100%)!important;}

/* F1 FIX · 2026-09-29 — bottom-nav tap targets must be >=44px everywhere <=900px,
   and the 521–900px band needs the same iPhone/iPad home-indicator clearance the <=520px band already has.
   Scoped to min-width:521px so the already-compliant <=520px rules (min-height:46px + env()) are untouched. */
@media(min-width:521px) and (max-width:900px){
  .bottom{padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  .main{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  .bottom button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:46px;min-width:58px;padding:4px 3px}
}