:root{--blue:#06236b;--green:#00c276;--cyan:#00b9e8;--dark:#05113a;--light:#f7fbff;--card:#fff;--text:#14213d;--line:#e7edf5;--soft:#f4f8fc}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:linear-gradient(145deg,#061b57,#052b7b 45%,#06a56c);color:var(--text)}a{text-decoration:none;color:inherit}.wrap{max-width:1120px;margin:auto;padding:20px}.hero{min-height:100vh;display:flex;align-items:center}.card{background:rgba(255,255,255,.96);border-radius:24px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.22);margin:14px 0}.brand{color:#fff}.brand h1{font-size:clamp(34px,6vw,72px);line-height:.95;margin:8px 0}.badge{display:inline-block;background:linear-gradient(90deg,var(--green),var(--cyan));color:#fff;padding:8px 14px;border-radius:999px;font-weight:800}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(90deg,var(--green),var(--cyan));color:#fff;border:none;border-radius:14px;padding:13px 17px;font-weight:900;cursor:pointer;min-height:46px}.btn.dark{background:var(--blue)}.btn.ghost{background:#e9f2ff;color:var(--blue)}.btn.danger{background:#fee2e2;color:#b42318}.btn.small{min-height:34px;padding:8px 12px;border-radius:10px;font-size:12px}input,select,textarea{width:100%;padding:13px 14px;border:1px solid #d7e2ef;border-radius:12px;font-size:15px;background:#fff}textarea{min-height:92px}label{font-weight:800;font-size:13px;display:grid;gap:7px}.grid{display:grid;gap:16px}.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.topbar{background:#fff;color:var(--blue);position:sticky;top:0;z-index:10;box-shadow:0 4px 16px rgba(0,0,0,.08)}.nav{display:flex;align-items:center;justify-content:space-between;gap:12px}.pill{padding:6px 10px;border-radius:999px;background:#eef7ff;font-size:12px;font-weight:900}.step{border:1px solid #e0e8f2;border-radius:18px;padding:16px;background:#fff}.done{border-color:#00c276;background:#edfff7}.pending{opacity:.82}.muted{color:#637083}.table-wrap{width:100%;overflow:auto;border-radius:16px;border:1px solid var(--line)}.table{width:100%;border-collapse:collapse;background:#fff}.table th,.table td{padding:13px;border-bottom:1px solid #edf2f7;text-align:left;vertical-align:top}.table th{background:#eef7ff;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#37506b}.qr{width:150px;height:150px;border-radius:12px;background:#fff;border:1px solid var(--line)}.poster-bg{background-image:linear-gradient(rgba(5,17,58,.72),rgba(5,17,58,.65)),url('poster.jpeg');background-size:cover;background-position:center}.small{font-size:13px}.center{text-align:center}.alert{padding:12px 14px;border-radius:14px;background:#eafaf3;color:#087047;font-weight:800;margin:0 0 14px}.danger,.alert.danger{background:#fff0f0;color:#b42318}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.admin-shell{min-height:100vh;display:grid;grid-template-columns:280px 1fr;background:#f5f8fc;color:#102033}.admin-side{background:#fff;border-right:1px solid var(--line);padding:22px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px}.admin-logo{display:flex;gap:12px;align-items:center}.admin-logo span{width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,var(--green),var(--cyan));display:grid;place-items:center;color:#fff;font-weight:1000}.admin-logo small,.admin-side nav a small{display:block;color:#748195;margin-top:3px}.admin-side nav{display:grid;gap:8px}.admin-side nav a{padding:13px 14px;border-radius:16px;color:#24364b;border:1px solid transparent}.admin-side nav a b{font-size:14px}.admin-side nav a:hover,.admin-side nav a.active{background:#eef7ff;color:var(--blue);border-color:#d7eaff}.side-foot{margin-top:auto;display:grid;gap:8px}.side-foot a{padding:11px 13px;border-radius:13px;background:#f4f8fc;color:#37506b;font-weight:800}.admin-main{padding:28px;overflow:auto}.admin-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.admin-top small{color:#7b8aa0;text-transform:uppercase;font-weight:900;letter-spacing:.08em}.admin-top h1{margin:4px 0 0;font-size:32px;color:#0f1f35}.admin-main .card{box-shadow:0 12px 36px rgba(16,32,51,.08);border:1px solid var(--line);background:#fff}.stat h1{font-size:44px;margin:0;background:linear-gradient(90deg,var(--blue),var(--green));-webkit-background-clip:text;color:transparent}.admin-login{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 10%,rgba(0,194,118,.36),transparent 32%),radial-gradient(circle at 90% 90%,rgba(0,185,232,.28),transparent 34%),linear-gradient(135deg,#061b57,#071f44)}.login-card{max-width:960px;width:100%;display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden;padding:0}.login-hero{padding:34px;background:linear-gradient(rgba(6,35,107,.82),rgba(6,35,107,.74)),url('poster.jpeg');background-size:cover;background-position:center;color:#fff}.login-form{padding:34px}.mini-card{background:#f7fbff;border:1px solid var(--line);border-radius:18px;padding:14px}.cp-card{display:grid;grid-template-columns:1fr 180px;gap:18px}.question-box{background:#f7fbff;border:1px solid var(--line);border-radius:18px;padding:16px;margin-top:16px}
@media(max-width:860px){.grid2,.grid3{grid-template-columns:1fr}.wrap{padding:14px}.card{border-radius:18px;padding:18px}.nav{flex-wrap:wrap}.table{font-size:13px}.hide-mobile{display:none}.admin-shell{grid-template-columns:1fr}.admin-side{position:relative;height:auto}.admin-side nav{grid-template-columns:repeat(2,1fr)}.admin-main{padding:16px}.form-row,.login-card,.cp-card{grid-template-columns:1fr}.admin-top{align-items:flex-start;flex-direction:column}.login-hero,.login-form{padding:24px}}

/* v8 User Panel Responsive Corporate */
.user-body{min-height:100vh;background:#f3f7fb;color:#102033;padding-bottom:76px;font-family:Inter,Arial,sans-serif}
.user-body:before{content:"";position:fixed;inset:0 0 auto 0;height:280px;background:radial-gradient(circle at 12% 12%,rgba(0,194,118,.28),transparent 34%),linear-gradient(135deg,#061b57,#073b7a 55%,#0aa36e);z-index:-1;border-bottom-left-radius:34px;border-bottom-right-radius:34px}
.user-top{position:sticky;top:0;z-index:30;padding:max(10px,env(safe-area-inset-top)) 14px 10px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px);border-bottom:1px solid rgba(218,229,241,.82)}
.user-top-inner{max-width:880px;margin:auto;display:flex;justify-content:space-between;align-items:center;gap:12px}.user-top b{display:block;color:#06236b}.user-top small{display:block;color:#64748b;font-size:11px;margin-top:2px}.user-shell{max-width:880px;margin:auto;padding:18px 14px 24px}.user-card,.user-hero-card{background:rgba(255,255,255,.98);border:1px solid #e3edf7;border-radius:24px;box-shadow:0 16px 42px rgba(16,32,51,.09);padding:20px;margin:14px 0}.user-hero-card{display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(239,249,255,.98))}.user-hero-card h1{margin:6px 0 4px;font-size:clamp(26px,7vw,44px);color:#0b255c;line-height:1}.user-hero-card p{margin:0;color:#64748b}.user-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:#e9f7ff;color:#075985;font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}.score-circle{width:112px;height:112px;flex:0 0 112px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#00c276,#00b9e8);color:#fff;box-shadow:0 18px 34px rgba(0,185,232,.25)}.score-circle b{font-size:34px;line-height:.8}.score-circle span{font-size:11px;font-weight:900;letter-spacing:.08em}.progress-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}.progress-head b{display:block;color:#102033}.progress-head span{display:block;color:#64748b;font-size:13px;margin-top:3px}.progress-head strong{font-size:24px;color:#06236b}.progress-track{height:14px;background:#e8f0f8;border-radius:999px;overflow:hidden;margin:15px 0}.progress-track div{height:100%;border-radius:999px;background:linear-gradient(90deg,#00c276,#00b9e8)}.btn-wide{width:100%;min-height:50px}.scan-btn{margin-top:4px}.qr-reader{max-width:420px;margin:16px auto 0;display:none;overflow:hidden;border-radius:20px}.section-title-mobile{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:20px 2px 8px;color:#fff}.section-title-mobile h2{margin:0}.user-chip{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:8px 12px;border-radius:999px;background:#eef7ff;color:#0b3b74;font-weight:900;font-size:12px}.mission-list{display:grid;gap:12px}.mission-card{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e2eaf3;border-radius:20px;padding:16px;box-shadow:0 10px 25px rgba(16,32,51,.06)}.mission-card.is-done{border-color:#a9eac8;background:#f2fff8}.mission-num{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#eef7ff;color:#06236b;font-weight:1000}.mission-card.is-done .mission-num{background:linear-gradient(135deg,#00c276,#00b9e8);color:#fff}.mission-card b{display:block;color:#102033;font-size:16px}.mission-card p{margin:5px 0;color:#64748b;font-size:13px;line-height:1.4}.mission-card span{display:inline-flex;margin-top:4px;border-radius:999px;padding:6px 10px;background:#f1f5f9;font-size:12px;font-weight:900;color:#334155}.leader-list{display:grid;gap:9px;margin-top:14px}.leader-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:12px;border-radius:16px;background:#f8fbff;border:1px solid #e8f0f8}.leader-row strong{color:#06236b}.leader-row span{display:block;color:#64748b;font-size:12px;margin-top:2px}.leader-row em{font-style:normal;font-weight:1000;color:#00a76b}.claim-card{background:linear-gradient(135deg,#fff,#effff7)}.user-login-screen{min-height:100vh;display:grid;place-items:center;padding:24px 14px;background:radial-gradient(circle at 20% 10%,rgba(0,194,118,.3),transparent 30%),linear-gradient(135deg,#061b57,#073b7a 60%,#059669)}.user-login-card{width:min(520px,100%);background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.55);border-radius:28px;padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.18)}.user-brand-mark{width:58px;height:58px;border-radius:20px;background:linear-gradient(135deg,#00c276,#00b9e8);display:grid;place-items:center;color:#fff;font-size:28px;font-weight:1000;margin-bottom:14px}.user-login-card h1{font-size:32px;color:#0b255c;margin:12px 0 8px}.code-input{text-align:center;font-size:28px;font-weight:1000;letter-spacing:.15em;color:#06236b}.user-link{display:block;text-align:center;margin-top:16px;color:#075985;font-weight:900}.user-alert{padding:12px 14px;border-radius:16px;background:#eafaf3;color:#087047;font-weight:900;margin:14px 0}.user-alert.danger{background:#fff1f2;color:#be123c}.checkpoint-form h1{margin:12px 0 8px;color:#0b255c;font-size:clamp(28px,7vw,42px);line-height:1.05}.task-card{margin:16px 0;padding:16px;border-radius:20px;border:1px solid #e2eaf3;background:#f8fbff}.task-card h3{margin:10px 0 8px;color:#102033}.task-type{display:inline-flex;background:#e8f7ff;color:#075985;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:1000}.option-list{display:grid;gap:10px;margin-top:12px}.option-card{display:flex;grid-template-columns:auto 1fr;align-items:flex-start;gap:10px;padding:13px;border-radius:16px;background:#fff;border:1px solid #e2eaf3;font-weight:700}.option-card input{width:auto;margin-top:2px;transform:scale(1.15)}.option-card span{display:block;line-height:1.35}.mobile-dock{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:40;display:none;grid-template-columns:1fr 1.2fr 1fr;gap:8px;background:rgba(255,255,255,.9);backdrop-filter:blur(18px);border:1px solid rgba(226,234,243,.9);border-radius:22px;padding:8px;box-shadow:0 18px 45px rgba(16,32,51,.18)}.mobile-dock a,.mobile-dock button{border:0;border-radius:16px;background:#eef7ff;color:#0b3b74;font-weight:1000;min-height:44px}.mobile-dock button{background:linear-gradient(90deg,#00c276,#00b9e8);color:#fff}
@media(max-width:620px){.user-shell{padding:14px 12px 22px}.user-card,.user-hero-card{border-radius:20px;padding:16px;margin:12px 0}.user-hero-card{align-items:flex-start}.score-circle{width:86px;height:86px;flex-basis:86px}.score-circle b{font-size:28px}.score-circle span{font-size:10px}.mission-card{grid-template-columns:42px 1fr;padding:14px;border-radius:18px}.mission-num{width:42px;height:42px;border-radius:14px}.leader-row{grid-template-columns:36px 1fr auto;padding:10px}.mobile-dock{display:grid}.user-login-card{padding:22px;border-radius:24px}.user-login-card h1{font-size:28px}.checkpoint-form{padding-bottom:24px}.task-card{padding:14px;border-radius:18px}.option-card{padding:12px}.user-top-inner{padding:0 2px}.section-title-mobile{color:#102033}.user-body:before{height:210px;border-bottom-left-radius:26px;border-bottom-right-radius:26px}}

/* v9 Sarulla Corporate Mobile Theme */
:root{
  --blue:#006daf;
  --blue-light:#93d3f4;
  --gray:#d9d9d9;
  --green:#a2c52b;
  --dark:#003f69;
  --light:#f4fbff;
  --card:#ffffff;
  --text:#102033;
  --line:#d9e8f2;
  --soft:#eef8fe;
}
body{background:linear-gradient(145deg,#006daf,#003f69 58%,#93d3f4);}
.btn,.score-circle,.progress-track div,.admin-logo span,.user-brand-mark,.mission-card.is-done .mission-num,.mobile-dock button{
  background:linear-gradient(135deg,var(--green),var(--blue-light) 52%,var(--blue)) !important;
}
.btn.dark{background:var(--blue)!important}.btn.ghost{background:#eef8fe!important;color:var(--blue)!important}
.user-body{
  background:#006daf url('kv-app-sarulla-2.jpg') center top/cover fixed no-repeat;
  color:var(--text);
}
.user-body:before{
  inset:0;
  height:auto;
  background:linear-gradient(180deg,rgba(0,109,175,.06),rgba(0,63,105,.18) 55%,rgba(0,109,175,.34));
  border-radius:0;
  z-index:-1;
}
.user-top{
  background:rgba(255,255,255,.86);
  border-bottom:1px solid rgba(147,211,244,.45);
  box-shadow:0 10px 28px rgba(0,63,105,.10);
}
.user-top b,.user-login-card h1,.checkpoint-form h1,.user-hero-card h1,.progress-head strong,.mission-num,.leader-row strong{color:var(--blue)}
.user-shell{padding-top:18px;}
.user-card,.user-hero-card{
  background:rgba(255,255,255,.93);
  border:1px solid rgba(217,217,217,.62);
  box-shadow:0 18px 45px rgba(0,63,105,.16);
  backdrop-filter:blur(12px);
}
.user-hero-card{
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,250,255,.91));
}
.user-eyebrow,.user-chip,.task-type{
  background:rgba(147,211,244,.22);
  color:var(--blue);
  border:1px solid rgba(147,211,244,.42);
}
.progress-track{background:rgba(217,217,217,.62)}
.mission-card,.leader-row,.task-card,.option-card{
  background:rgba(255,255,255,.94);
  border-color:rgba(217,232,242,.86);
}
.mission-card.is-done{
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(242,251,225,.94));
  border-color:rgba(162,197,43,.45);
}
.mission-card span{background:rgba(217,217,217,.36);color:#29465c}
.mobile-dock{
  background:rgba(255,255,255,.88);
  border-color:rgba(147,211,244,.45);
}
.mobile-dock a{background:rgba(147,211,244,.20);color:var(--blue)}
.user-login-screen{
  background:#006daf url('kv-app-sarulla-2.jpg') center top/cover fixed no-repeat;
  position:relative;
}
.user-login-screen:before{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,109,175,.12),rgba(0,63,105,.22));
}
.user-login-card{position:relative;z-index:1;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-color:rgba(147,211,244,.45)}
.code-input{color:var(--blue);border-color:rgba(147,211,244,.75)}
.user-alert{background:#f3f9df;color:#526a00}.user-alert.danger{background:#fff1f2;color:#be123c}
@media(max-width:620px){
  .user-body,.user-login-screen{background-attachment:scroll;background-position:center top;}
  .user-top{border-bottom-left-radius:18px;border-bottom-right-radius:18px;}
  .user-shell{padding:14px 12px 96px;}
  .section-title-mobile{color:#fff;text-shadow:0 2px 10px rgba(0,63,105,.35)}
  .section-title-mobile .user-chip{background:rgba(255,255,255,.82)}
  .user-card,.user-hero-card{box-shadow:0 14px 34px rgba(0,63,105,.16)}
}

/* V10 Sarulla corporate landing + puzzle */
.poster-bg{
  min-height:100vh;
  background:#006daf url('bg-app1.png') center top/cover no-repeat fixed !important;
  color:#fff;
}
.poster-bg:before{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,109,175,.10),rgba(0,63,105,.46) 58%,rgba(0,109,175,.70));pointer-events:none;}
.poster-bg .hero,.poster-bg .wrap{position:relative;z-index:1;}
.poster-bg .brand h1{font-size:clamp(44px,8vw,92px);line-height:.92;margin:12px 0;text-transform:uppercase;letter-spacing:-2px;}
.poster-bg .brand p{color:rgba(255,255,255,.92)}
.poster-bg .card{background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border:1px solid rgba(147,211,244,.35);box-shadow:0 22px 60px rgba(0,35,70,.24);color:#102033;}
.poster-bg .badge{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.36);color:#fff;border-radius:999px;padding:8px 14px;display:inline-block;font-weight:800;}
.landing-logo{max-width:340px;width:68%;margin-bottom:8px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.15));}
.puzzle-wrap{display:grid;grid-template-columns:1fr minmax(140px,260px);gap:18px;align-items:start;margin-top:14px;}
.puzzle-board{display:grid;gap:5px;touch-action:manipulation;background:#e9f6fe;padding:7px;border-radius:18px;border:1px solid rgba(147,211,244,.55);}
.puzzle-cell,.puzzle-piece{aspect-ratio:1/1;border-radius:12px;border:2px dashed rgba(0,109,175,.28);background-size:300% 300%;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;min-height:72px;overflow:hidden;}
.puzzle-piece{border-style:solid;cursor:pointer;box-shadow:0 8px 20px rgba(0,63,105,.14);}
.puzzle-piece.selected{outline:4px solid rgba(162,197,43,.65);transform:translateY(-2px)}
.puzzle-bank{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px;}
.puzzle-preview{border-radius:18px;overflow:hidden;border:1px solid rgba(147,211,244,.5);background:white;}
.puzzle-preview img{width:100%;display:block;}
.puzzle-hint{font-size:12px;color:#486579;margin-top:8px;}
@media(max-width:720px){
  .poster-bg{background-attachment:scroll;background-position:center top!important;}
  .poster-bg .hero{padding:24px 14px 80px!important;min-height:100vh;align-items:flex-end;}
  .poster-bg .grid2{grid-template-columns:1fr!important;gap:18px;}
  .poster-bg .card{border-radius:22px;}
  .landing-logo{width:82%;margin:0 auto 10px;display:block;}
  .poster-bg .brand h1{font-size:54px;text-align:left;}
  .poster-bg .brand .btn{width:100%;margin:5px 0;text-align:center;}
  .puzzle-wrap{grid-template-columns:1fr;}
  .puzzle-preview{order:-1;max-width:180px;margin:auto;}
  .puzzle-cell,.puzzle-piece{min-height:82px;border-radius:10px;}
  .puzzle-bank{grid-template-columns:repeat(3,1fr)}
}

/* V11 Landing update: horizontal Sarulla KV, no leaderboard on landing/userpanel */
.landing-hz-bg{
  min-height:100vh;
  margin:0;
  background:#006daf url('kv-app-sarulla-hz-3.png') center center/cover no-repeat fixed;
  color:#fff;
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
}
.landing-hz-bg:before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,43,82,.78) 0%,rgba(0,69,112,.52) 35%,rgba(0,109,175,.12) 68%,rgba(0,109,175,.05) 100%);
}
.landing-screen{position:relative;z-index:1;min-height:100vh;display:flex;align-items:flex-end;padding:48px;}
.landing-panel{width:min(520px,100%);padding:26px;border-radius:28px;background:rgba(0,58,104,.38);border:1px solid rgba(147,211,244,.42);backdrop-filter:blur(10px);box-shadow:0 24px 70px rgba(0,39,75,.32)}
.landing-panel .badge{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.34);color:#fff}
.landing-panel h1{margin:14px 0 10px;font-size:clamp(46px,7vw,86px);line-height:.9;text-transform:uppercase;letter-spacing:-2px;color:#fff}
.landing-panel p{font-size:18px;line-height:1.45;color:rgba(255,255,255,.92);margin:0 0 18px;max-width:480px}
.landing-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.landing-actions .btn{min-height:54px;border-radius:16px}.landing-actions .btn.ghost{background:rgba(255,255,255,.88);color:#006daf}
@media(max-width:780px){
  .landing-hz-bg{background-image:linear-gradient(180deg,rgba(0,109,175,.05),rgba(0,55,101,.15)),url('kv-app-sarulla-hz-3.png');background-position:64% center;background-attachment:scroll;}
  .landing-hz-bg:before{background:linear-gradient(180deg,rgba(0,109,175,.04) 0%,rgba(0,48,90,.10) 42%,rgba(0,43,82,.82) 100%)}
  .landing-screen{padding:18px 16px calc(22px + env(safe-area-inset-bottom));align-items:flex-end;}
  .landing-panel{padding:20px;border-radius:24px;background:rgba(0,58,104,.42);}
  .landing-panel h1{font-size:48px;letter-spacing:-1px}.landing-panel p{font-size:15px}.landing-actions{grid-template-columns:1fr}.landing-actions .btn{width:100%;}
}
@media(min-width:1200px){.landing-screen{padding-left:72px;padding-bottom:72px}.landing-panel{margin-left:0}}

/* V12 responsive landing: mobile portrait + desktop landscape, no public leaderboard */
.landing-hz-bg{
  background-image:url('kv-app-sarulla-hz-3.png') !important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  background-attachment:fixed!important;
}
.landing-hz-bg:before{
  background:linear-gradient(90deg,rgba(0,48,90,.72) 0%,rgba(0,77,125,.42) 35%,rgba(0,109,175,.08) 70%)!important;
}
.landing-screen{align-items:flex-end!important;justify-content:flex-start!important;padding:48px 48px 58px!important;}
.landing-panel{margin:0!important;max-width:560px!important;}
.landing-actions .btn{flex-direction:column;align-items:flex-start;text-align:left;padding:14px 18px;line-height:1.1}
.landing-actions .btn span{font-size:15px;font-weight:1000;letter-spacing:.02em}.landing-actions .btn small{font-size:12px;font-weight:600;opacity:.92;margin-top:4px}
@media (max-width:780px), (orientation:portrait){
  .landing-hz-bg{
    background-image:url('bg.webp')!important;
    background-position:center top!important;
    background-size:cover!important;
    background-attachment:scroll!important;
  }
  .landing-hz-bg:before{
    background:linear-gradient(180deg,rgba(0,109,175,.02) 0%,rgba(0,74,126,.04) 42%,rgba(0,55,101,.62) 66%,rgba(0,38,75,.92) 100%)!important;
  }
  .landing-screen{min-height:100svh!important;padding:calc(18px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom))!important;align-items:flex-end!important;}
  .landing-panel{width:100%!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:0!important;text-align:center;}
  .landing-panel .badge{display:inline-block;background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.3)!important;color:#fff!important;margin-bottom:10px;font-size:11px;}
  .landing-panel h1{font-size:clamp(44px,11vw,62px)!important;line-height:.9!important;letter-spacing:.02em!important;margin:8px 0 10px!important;text-align:center;text-shadow:0 6px 22px rgba(0,39,75,.42);}
  .landing-panel p{font-size:15px!important;line-height:1.35!important;max-width:310px!important;margin:0 auto 18px!important;color:rgba(255,255,255,.94)!important;text-shadow:0 3px 12px rgba(0,39,75,.5);}
  .landing-actions{grid-template-columns:1fr!important;gap:14px!important;width:min(100%,620px);margin:auto;}
  .landing-actions .btn{min-height:78px!important;border-radius:18px!important;padding:16px 18px!important;background:linear-gradient(135deg,rgba(0,109,175,.92),rgba(147,211,244,.85))!important;box-shadow:0 18px 38px rgba(0,39,75,.28);border:1px solid rgba(255,255,255,.18);}
  .landing-actions .btn.ghost{background:linear-gradient(135deg,rgba(147,211,244,.95),rgba(0,109,175,.78))!important;color:#fff!important;}
  .landing-actions .btn span{font-size:18px}.landing-actions .btn small{font-size:13px;color:rgba(255,255,255,.9)}
}
@media (min-width:781px) and (orientation:landscape){
  .landing-panel{background:rgba(0,58,104,.30)!important;}
  .landing-actions{grid-template-columns:1fr 1fr!important;}
}

/* V13 Admin editable backgrounds + pipe game + final QR flow */
.settings-preview{width:100%;border-radius:16px;border:1px solid var(--line);margin-top:10px;background:#eef7ff;object-fit:cover}.settings-preview.landscape{aspect-ratio:16/9}.settings-preview.portrait{aspect-ratio:9/16;max-height:420px;object-position:top center}
.landing-dual-bg{min-height:100vh;margin:0;background:#006daf var(--landing-laptop) center center/cover no-repeat fixed;color:#fff;font-family:Inter,Arial,sans-serif;overflow-x:hidden}.landing-dual-bg:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,48,90,.74) 0%,rgba(0,77,125,.42) 34%,rgba(0,109,175,.06) 72%)}
.landing-dual-bg .landing-screen{position:relative;z-index:1;min-height:100vh;display:flex;align-items:flex-end;justify-content:flex-start;padding:48px 48px 58px}.landing-dual-bg .landing-panel{width:min(560px,100%);padding:26px;border-radius:28px;background:rgba(0,58,104,.30);border:1px solid rgba(147,211,244,.42);backdrop-filter:blur(10px);box-shadow:0 24px 70px rgba(0,39,75,.32);margin:0}.landing-dual-bg .badge{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.34);color:#fff}.landing-dual-bg h1{margin:14px 0 10px;font-size:clamp(46px,7vw,86px);line-height:.9;text-transform:uppercase;letter-spacing:-2px;color:#fff}.landing-dual-bg p{font-size:18px;line-height:1.45;color:rgba(255,255,255,.92);margin:0 0 18px;max-width:480px}.landing-dual-bg .landing-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.landing-dual-bg .landing-actions .btn{min-height:70px;border-radius:18px;flex-direction:column;align-items:flex-start;text-align:left;padding:14px 18px;line-height:1.1}.landing-dual-bg .landing-actions .btn.ghost{background:rgba(255,255,255,.88);color:#006daf}.landing-dual-bg .landing-actions .btn span{font-size:15px;font-weight:1000;letter-spacing:.02em}.landing-dual-bg .landing-actions .btn small{font-size:12px;font-weight:600;opacity:.92;margin-top:4px}
@media(max-width:780px),(orientation:portrait){.landing-dual-bg{background-image:var(--landing-mobile)!important;background-position:center top!important;background-size:cover!important;background-attachment:scroll!important}.landing-dual-bg:before{background:linear-gradient(180deg,rgba(0,109,175,.02) 0%,rgba(0,74,126,.04) 42%,rgba(0,55,101,.62) 66%,rgba(0,38,75,.92) 100%)}.landing-dual-bg .landing-screen{min-height:100svh;padding:calc(18px + env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom));align-items:flex-end}.landing-dual-bg .landing-panel{width:100%;background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:0;text-align:center}.landing-dual-bg .badge{display:inline-block;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff;margin-bottom:10px;font-size:11px}.landing-dual-bg h1{font-size:clamp(44px,11vw,62px);line-height:.9;letter-spacing:.02em;margin:8px 0 10px;text-align:center;text-shadow:0 6px 22px rgba(0,39,75,.42)}.landing-dual-bg p{font-size:15px;line-height:1.35;max-width:310px;margin:0 auto 18px;color:rgba(255,255,255,.94);text-shadow:0 3px 12px rgba(0,39,75,.5)}.landing-dual-bg .landing-actions{grid-template-columns:1fr;gap:14px;width:min(100%,620px);margin:auto}.landing-dual-bg .landing-actions .btn{min-height:78px;border-radius:18px;padding:16px 18px;background:linear-gradient(135deg,rgba(0,109,175,.92),rgba(147,211,244,.85));box-shadow:0 18px 38px rgba(0,39,75,.28);border:1px solid rgba(255,255,255,.18);color:#fff}.landing-dual-bg .landing-actions .btn.ghost{background:linear-gradient(135deg,rgba(147,211,244,.95),rgba(0,109,175,.78));color:#fff}.landing-dual-bg .landing-actions .btn span{font-size:18px}.landing-dual-bg .landing-actions .btn small{font-size:13px;color:rgba(255,255,255,.9)}}
.pipe-game{margin-top:14px}.pipe-status{padding:12px 14px;border-radius:14px;background:#eaf6ff;border:1px solid rgba(147,211,244,.55);color:#29465c;font-weight:800;margin-bottom:12px}.pipe-status.ok{background:#f3f9df;color:#587000;border-color:rgba(162,197,43,.55)}.pipe-board{display:grid;grid-template-columns:repeat(3,minmax(78px,1fr));gap:8px;background:linear-gradient(135deg,rgba(0,109,175,.10),rgba(147,211,244,.22));border:1px solid rgba(147,211,244,.55);padding:10px;border-radius:22px;touch-action:manipulation}.pipe-tile{aspect-ratio:1/1;border:0;border-radius:16px;background:linear-gradient(135deg,#fff,#e7f6ff);box-shadow:0 10px 24px rgba(0,63,105,.12);font-size:clamp(20px,7vw,42px);font-weight:1000;color:#006daf;display:grid;place-items:center}.pipe-tile span{display:block;line-height:1;text-align:center}.pipe-reset{margin-top:12px;width:100%}@media(max-width:480px){.pipe-board{gap:6px;padding:8px;border-radius:18px}.pipe-tile{border-radius:12px;font-size:28px}.puzzle-cell,.puzzle-piece{min-height:68px}}

/* =========================
   V14 SARULLA CORPORATE UI
   Glassmorphism + mobile polish
   ========================= */
:root{
  --blue:#006daf;
  --blue2:#93d3f4;
  --gray:#d9d9d9;
  --green:#a2c52b;
  --dark:#003f6f;
  --ink:#09243b;
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.88);
  --stroke:rgba(255,255,255,.38);
  --shadow:0 20px 60px rgba(0,50,90,.18);
}
body{background:linear-gradient(135deg,#eff9ff,#dff4ff 45%,#f6fbec);color:var(--ink)}
.card,.user-card,.user-hero-card,.mini-card,.question-box,.task-card,.mission-card,.admin-main .card,.login-card{
  background:var(--glass-strong)!important;
  border:1px solid rgba(255,255,255,.48)!important;
  box-shadow:var(--shadow)!important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.btn{
  min-height:52px;
  border-radius:18px;
  background:linear-gradient(135deg,var(--green),var(--blue2) 52%,var(--blue));
  color:#fff;
  box-shadow:0 14px 34px rgba(0,109,175,.24);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 18px 42px rgba(0,109,175,.30)}
.btn:active{transform:translateY(0) scale(.99);filter:saturate(1.08)}
.btn.dark{background:linear-gradient(135deg,var(--dark),var(--blue))}.btn.ghost{background:rgba(255,255,255,.7);color:var(--blue);border:1px solid rgba(0,109,175,.16)}
.badge,.pill,.user-chip,.user-eyebrow{background:rgba(147,211,244,.25);border:1px solid rgba(147,211,244,.45);color:var(--blue);backdrop-filter:blur(14px)}
input,select,textarea{border:1px solid rgba(0,109,175,.18);background:rgba(255,255,255,.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(147,211,244,.28)}

/* Admin: Material/React feel */
.admin-shell{background:radial-gradient(circle at 8% 8%,rgba(147,211,244,.42),transparent 26%),radial-gradient(circle at 95% 18%,rgba(162,197,43,.20),transparent 28%),#eef7fd;grid-template-columns:300px 1fr}.admin-side{background:rgba(255,255,255,.74);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-right:1px solid rgba(0,109,175,.12)}.admin-logo span{background:linear-gradient(135deg,var(--blue),var(--blue2));box-shadow:0 12px 30px rgba(0,109,175,.22)}.admin-side nav a{border-radius:18px;transition:.18s ease}.admin-side nav a:hover,.admin-side nav a.active{background:linear-gradient(135deg,rgba(0,109,175,.12),rgba(147,211,244,.26));border-color:rgba(0,109,175,.14);transform:translateX(2px)}.admin-main{padding:32px}.admin-top{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.48);box-shadow:0 14px 38px rgba(0,50,90,.08);backdrop-filter:blur(18px);border-radius:26px;padding:18px 20px}.admin-top h1{color:var(--dark)}.stat h1{background:linear-gradient(90deg,var(--blue),var(--green));-webkit-background-clip:text;color:transparent}.table th{background:rgba(147,211,244,.22);color:var(--dark)}

/* Landing v14: remove leaderboard visually; mobile/desktop background stays configurable */
.landing-dual-bg .landing-actions{grid-template-columns:1fr!important}.landing-dual-bg .landing-actions a[href*="leaderboard"]{display:none!important}.landing-dual-bg .landing-panel{background:rgba(0,63,111,.22);border:1px solid rgba(255,255,255,.24);box-shadow:0 20px 60px rgba(0,50,90,.20);backdrop-filter:blur(4px)}

/* User panel polish */
.user-body{background:linear-gradient(160deg,#eef9ff,#ffffff 42%,#f5fbdf)}.user-body:before{background:radial-gradient(circle at 16% 8%,rgba(147,211,244,.62),transparent 28%),linear-gradient(135deg,var(--blue),#005085 70%,#003f6f)}.user-top{background:rgba(255,255,255,.66);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-bottom:1px solid rgba(0,109,175,.12)}.score-circle,.mission-card.is-done .mission-num{background:linear-gradient(135deg,var(--green),var(--blue2) 45%,var(--blue))}.progress-track div{background:linear-gradient(90deg,var(--green),var(--blue2),var(--blue))}.mission-card{transition:transform .18s ease, box-shadow .18s ease}.mission-card:hover{transform:translateY(-1px);box-shadow:0 18px 42px rgba(0,50,90,.12)!important}.leader-list,.leader-row{display:none!important}

/* Puzzle v14: pieces fill slot exactly */
.puzzle-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,280px);gap:18px;align-items:start}.puzzle-board{display:grid;gap:4px;width:100%;max-width:min(92vw,560px);margin:auto}.puzzle-cell,.puzzle-piece{aspect-ratio:1/1;border:0;border-radius:0!important;min-height:0!important;overflow:hidden;background-repeat:no-repeat!important;background-size:300% 300%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.75),0 8px 18px rgba(0,50,90,.08);touch-action:manipulation}.puzzle-cell{background:rgba(255,255,255,.44)}.puzzle-cell .puzzle-piece{width:100%!important;height:100%!important;margin:0!important;display:block!important;box-shadow:none!important}.puzzle-piece.selected{outline:4px solid var(--green);outline-offset:-4px;filter:brightness(1.08)}.puzzle-bank{display:grid;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:8px;margin-top:14px}.puzzle-bank .puzzle-piece{min-height:68px}.puzzle-preview{border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.62);box-shadow:0 16px 42px rgba(0,50,90,.14);padding:8px}.puzzle-preview img{display:block;width:100%;height:auto;border-radius:16px}.puzzle-hint{margin-top:12px;color:#4e6578;font-size:13px;font-weight:800}

/* Pipe v14: much bigger, easier touch */
.pipe-game{margin-top:18px}.pipe-status{background:rgba(147,211,244,.22);border:1px solid rgba(147,211,244,.55);color:var(--dark);border-radius:18px;padding:14px 16px}.pipe-status.ok{background:rgba(162,197,43,.24);border-color:rgba(162,197,43,.55);color:#4d6500}.pipe-board{width:min(100%,720px);margin:auto;grid-template-columns:repeat(3,minmax(105px,1fr));gap:12px;padding:14px;border-radius:28px;background:linear-gradient(135deg,rgba(0,109,175,.14),rgba(147,211,244,.30));border:1px solid rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 16px 40px rgba(0,50,90,.12)}.pipe-tile{border-radius:22px;min-height:112px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(222,244,255,.92));font-size:clamp(38px,11vw,82px);box-shadow:0 14px 26px rgba(0,50,90,.16),inset 0 1px 0 rgba(255,255,255,.9);color:var(--blue);transition:transform .14s ease, box-shadow .14s ease}.pipe-tile:hover{transform:translateY(-1px)}.pipe-tile:active{transform:scale(.97)}.pipe-tile span{filter:drop-shadow(0 4px 10px rgba(0,109,175,.24))}.pipe-reset{min-height:54px;margin-top:14px}

@media(max-width:860px){.admin-shell{grid-template-columns:1fr}.admin-main{padding:16px}.admin-top{border-radius:22px}.admin-side nav{grid-template-columns:1fr 1fr}.puzzle-wrap{grid-template-columns:1fr}.puzzle-preview{order:-1;max-width:260px;margin:auto}.pipe-board{grid-template-columns:repeat(3,minmax(88px,1fr));gap:9px;padding:10px}.pipe-tile{min-height:92px;border-radius:18px;font-size:clamp(42px,15vw,68px)}}
@media(max-width:480px){.btn{min-height:58px}.user-shell{padding-left:12px;padding-right:12px}.user-card,.user-hero-card{border-radius:24px;padding:18px}.pipe-board{grid-template-columns:repeat(3,1fr);gap:8px}.pipe-tile{min-height:calc((100vw - 72px)/3);font-size:clamp(36px,17vw,62px)}.puzzle-bank{grid-template-columns:repeat(3,1fr)}.landing-dual-bg .landing-actions .btn{min-height:76px}}

/* =========================
   V15 Landing Media Fix + Poppins Admin
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');
.admin-shell,.admin-shell *,.login-card,.login-card *,body.admin-login{font-family:'Poppins',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif!important;}
.checkline{display:flex!important;align-items:center;gap:8px;margin-top:8px;font-size:13px;font-weight:700;color:#486579}.checkline input{width:auto!important}.compact-switches{margin-top:12px}.switch-card{display:flex!important;align-items:center;gap:10px;padding:14px 16px;border-radius:18px;background:rgba(147,211,244,.16);border:1px solid rgba(147,211,244,.35);font-weight:800}.switch-card input{width:auto!important;transform:scale(1.18)}
.landing-dual-bg{position:relative;min-height:100vh;background-color:#006daf!important;background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important;font-family:'Poppins',Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif!important;}
.landing-dual-bg:before{z-index:1}.landing-dual-bg.no-overlay:before{display:none!important}.landing-video-bg{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;pointer-events:none}.landing-dual-bg.has-video-bg{background-image:var(--landing-laptop)!important}.landing-dual-bg.has-video-bg .landing-video-bg + .landing-screen{position:relative}.landing-screen{position:relative;z-index:2}.landing-panel{position:relative;z-index:3}.landing-actions .btn{animation:landingFloat 3.6s ease-in-out infinite}.landing-actions .btn:nth-child(2){animation-delay:.28s}@keyframes landingFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}.landing-actions .btn:hover{animation-play-state:paused;transform:translateY(-2px) scale(1.01)!important}.landing-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;align-content:center;gap:10px;background:linear-gradient(135deg,#006daf,#003f6f 62%,#93d3f4);color:#fff;transition:opacity .45s ease,visibility .45s ease}.landing-loader.hide{opacity:0;visibility:hidden}.loader-mark{width:76px;height:76px;border-radius:26px;display:grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32);box-shadow:0 24px 70px rgba(0,39,75,.28);font-size:36px;font-weight:900;animation:loaderPulse 1.45s ease-in-out infinite}.landing-loader b{font-size:18px;letter-spacing:.01em}.landing-loader span{opacity:.88;font-weight:700}@keyframes loaderPulse{0%,100%{transform:scale(1);box-shadow:0 24px 70px rgba(0,39,75,.28)}50%{transform:scale(1.06);box-shadow:0 30px 90px rgba(147,211,244,.34)}}
@media(max-width:780px),(orientation:portrait){.landing-dual-bg{background-image:var(--landing-mobile)!important;background-position:center top!important}.landing-video-bg{object-position:center top}.landing-actions .btn{animation:none!important}}
@media(prefers-reduced-motion:reduce){.landing-actions .btn,.loader-mark{animation:none!important;transition:none!important}}

/* V16 Geothermal Pipe Game - Sarulla corporate */
.geo-pipe-game{margin-top:18px;border-radius:28px;padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(147,211,244,.22));border:1px solid rgba(255,255,255,.58);box-shadow:0 18px 50px rgba(0,45,78,.15);backdrop-filter:blur(18px);overflow:hidden}
.geo-game-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.geo-game-head h3{margin:4px 0 5px;color:#003d67}.geo-game-head p{margin:0;color:#42667e;font-size:14px}.geo-energy-badge{flex:0 0 auto;padding:10px 13px;border-radius:18px;background:linear-gradient(135deg,#a2c52b,#93d3f4);font-weight:1000;color:#073b5b;box-shadow:0 10px 24px rgba(0,109,175,.20)}
.geo-stage{position:relative;overflow:hidden;border-radius:26px;min-height:520px;background:linear-gradient(180deg,#bfeaff 0%,#eaf8ff 33%,#8a6b4c 33.3%,#4f3828 100%);border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.geo-sky{height:34%;position:relative;background:linear-gradient(180deg,rgba(147,211,244,.55),rgba(255,255,255,.55));display:flex;align-items:flex-start;justify-content:center;padding-top:18px}.geo-powerplant{z-index:2;text-align:center;background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.65);border-radius:18px;padding:8px 14px;color:#006daf;font-weight:900;box-shadow:0 12px 28px rgba(0,70,120,.12)}.geo-powerplant .geo-icon{display:block;font-size:28px;line-height:1}.geo-powerplant small{font-size:11px;text-transform:uppercase;letter-spacing:.08em}.geo-cloud{position:absolute;border-radius:999px;background:rgba(255,255,255,.72);filter:blur(.2px)}.geo-cloud:before,.geo-cloud:after{content:"";position:absolute;border-radius:999px;background:inherit}.geo-cloud.c1{width:86px;height:28px;left:8%;top:32px}.geo-cloud.c1:before{width:38px;height:38px;left:10px;top:-20px}.geo-cloud.c1:after{width:44px;height:44px;right:9px;top:-24px}.geo-cloud.c2{width:68px;height:22px;right:10%;top:64px;opacity:.82}.geo-cloud.c2:before{width:30px;height:30px;left:8px;top:-14px}.geo-cloud.c2:after{width:34px;height:34px;right:9px;top:-18px}.geo-ground-line{position:absolute;left:0;right:0;top:33%;height:14px;background:linear-gradient(90deg,#a2c52b,#6f9d24,#a2c52b);box-shadow:0 8px 24px rgba(0,0,0,.18);z-index:3}.geo-underground{position:absolute;left:0;right:0;bottom:0;top:33%;padding:28px 16px 16px;background:radial-gradient(circle at 20% 88%,rgba(255,125,54,.22),transparent 34%),linear-gradient(180deg,rgba(98,65,42,.72),rgba(39,28,22,.92));display:flex;flex-direction:column;align-items:center;justify-content:space-between}.geo-reservoir{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 13px;font-weight:900;box-shadow:0 0 24px rgba(255,112,46,.22)}.geo-reservoir small{font-size:11px;text-transform:uppercase;letter-spacing:.08em}.geo-board{width:min(100%,420px);display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:10px;border-radius:24px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 18px 42px rgba(0,0,0,.18)}.geo-cell{aspect-ratio:1/1;border:0;border-radius:18px;background:linear-gradient(145deg,rgba(237,247,252,.95),rgba(167,219,246,.88));box-shadow:0 10px 20px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.92);display:grid;place-items:center;position:relative;overflow:hidden;touch-action:manipulation;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}.geo-cell:not(:disabled):active{transform:scale(.96)}.geo-cell.empty{background:transparent;box-shadow:none;border:1px dashed rgba(255,255,255,.10)}.geo-cell.start,.geo-cell.finish{background:linear-gradient(145deg,#fff,#f4fbff);box-shadow:0 0 0 2px rgba(162,197,43,.35),0 10px 24px rgba(0,0,0,.16)}.geo-terminal{font-size:clamp(24px,7vw,38px);filter:drop-shadow(0 4px 10px rgba(0,0,0,.20))}.pipe-svg{position:relative;display:block;width:78%;height:78%}.pipe-svg:before,.pipe-svg:after{content:"";position:absolute;background:linear-gradient(90deg,#006daf,#93d3f4,#a2c52b);box-shadow:0 0 16px rgba(147,211,244,.55);border-radius:999px}.pipe-svg.h:before{height:26%;left:0;right:0;top:37%}.pipe-svg.v:before{width:26%;top:0;bottom:0;left:37%}.pipe-svg.elbow:before{width:26%;height:63%;left:37%;top:0}.pipe-svg.elbow:after{height:26%;width:63%;left:37%;top:37%}.pipe-svg.elbow.r1{transform:rotate(90deg)}.pipe-svg.elbow.r2{transform:rotate(180deg)}.pipe-svg.elbow.r3{transform:rotate(270deg)}.geo-cell.flow{animation:geoPulse .65s ease both}.geo-cell.flow .pipe-svg:before,.geo-cell.flow .pipe-svg:after{background:linear-gradient(90deg,#a2c52b,#93d3f4,#fff);box-shadow:0 0 20px rgba(162,197,43,.85)}.geo-cell.hint{box-shadow:0 0 0 3px rgba(162,197,43,.65),0 0 26px rgba(162,197,43,.55)}.geo-status{margin-top:12px;border-radius:18px;background:rgba(147,211,244,.22);border:1px solid rgba(147,211,244,.55);padding:13px 15px;color:#073b5b;font-weight:900}.geo-status.ok{background:rgba(162,197,43,.22);border-color:rgba(162,197,43,.55);color:#456300}.geo-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.geo-actions .btn{min-height:54px}@keyframes geoPulse{0%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.18);transform:scale(1.04)}100%{filter:brightness(1);transform:scale(1)}}
@media(max-width:520px){.geo-pipe-game{padding:12px;border-radius:24px}.geo-game-head{display:block}.geo-energy-badge{display:inline-flex;margin-top:10px}.geo-stage{min-height:500px;border-radius:22px}.geo-sky{height:31%;padding-top:14px}.geo-ground-line{top:31%}.geo-underground{top:31%;padding:24px 10px 14px}.geo-board{gap:6px;padding:8px;border-radius:20px}.geo-cell{border-radius:14px}.pipe-svg.h:before{height:30%;top:35%}.pipe-svg.v:before{width:30%;left:35%}.pipe-svg.elbow:before{width:30%;left:35%}.pipe-svg.elbow:after{height:30%;top:35%}.geo-reservoir small,.geo-powerplant small{font-size:10px}.geo-actions{grid-template-columns:1fr}}

/* V17 Geothermal Pipe Engine: SVG-like pipes + steam animation */
.geo-pipe-game.v17,.geo-pipe-game{--pipe-dark:#294d63;--pipe-mid:#8eb4c7;--pipe-light:#c5dcea;--steam:#e9fbff;}
.geo-game-head h3{margin-bottom:6px}.geo-game-head p{font-size:14px;line-height:1.45;color:rgba(7,59,91,.78)}
.geo-stage{position:relative;overflow:hidden}.geo-stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 10%,rgba(147,211,244,.25),transparent 38%)}
.geo-board{position:relative;z-index:5;width:min(100%,480px);gap:10px;padding:12px;border-radius:26px;background:rgba(255,255,255,.13);backdrop-filter:blur(6px)}
.geo-cell{border-radius:17px;background:linear-gradient(145deg,rgba(244,252,255,.98),rgba(201,232,247,.92));}
.geo-cell.start,.geo-cell.finish{background:linear-gradient(145deg,#fff,#eaf7ff)}
.pipe-asset{position:relative;display:block;width:88%;height:88%;filter:drop-shadow(0 6px 8px rgba(0,40,70,.22));}
.pipe-asset:before,.pipe-asset:after,.pipe-asset i:before,.pipe-asset i:after{content:"";position:absolute;box-sizing:border-box;}
.pipe-asset.straight.horizontal:before{height:36%;left:4%;right:4%;top:32%;border-radius:999px;background:linear-gradient(#c8e1ec,#83adbf 45%,#638da2 55%,#b8d4e1);border:4px solid #294d63;}
.pipe-asset.straight.horizontal:after{height:58%;width:9%;top:21%;left:2%;border-radius:6px;background:#294d63;box-shadow:calc(100% * 9.6) 0 0 #294d63;}
.pipe-asset.straight.vertical:before{width:36%;top:4%;bottom:4%;left:32%;border-radius:999px;background:linear-gradient(90deg,#c8e1ec,#83adbf 45%,#638da2 55%,#b8d4e1);border:4px solid #294d63;}
.pipe-asset.straight.vertical:after{width:58%;height:9%;left:21%;top:2%;border-radius:6px;background:#294d63;box-shadow:0 calc(100% * 9.6) 0 #294d63;}
.pipe-asset.elbow:before{width:68%;height:68%;right:2%;bottom:2%;border-right:16px solid #294d63;border-bottom:16px solid #294d63;border-radius:0 0 42px 0;}
.pipe-asset.elbow:after{width:54%;height:54%;right:12%;bottom:12%;border-right:9px solid #9fc1d2;border-bottom:9px solid #9fc1d2;border-radius:0 0 34px 0;box-shadow:inset -4px -4px 0 rgba(255,255,255,.35)}
.pipe-asset.elbow i:before{width:38%;height:10%;right:-1%;bottom:47%;background:#294d63;border-radius:5px}.pipe-asset.elbow i:after{height:38%;width:10%;right:47%;bottom:-1%;background:#294d63;border-radius:5px}
.pipe-asset.elbow.r0{transform:rotate(180deg)}.pipe-asset.elbow.r1{transform:rotate(270deg)}.pipe-asset.elbow.r2{transform:rotate(0deg)}.pipe-asset.elbow.r3{transform:rotate(90deg)}
.geo-terminal{width:86%;height:86%;position:relative;display:grid;place-items:center;border-radius:22px;background:linear-gradient(145deg,#ffd34d,#ff9f1c);border:4px solid #294d63;color:#073b5b;font-weight:1000;font-size:12px;letter-spacing:.05em;filter:drop-shadow(0 8px 12px rgba(0,35,60,.22))}.geo-terminal i{position:absolute;inset:28%;border-radius:50%;background:#ffefe0;border:3px solid #e23c34;box-shadow:0 0 18px rgba(255,120,40,.55)}.geo-terminal b{position:relative;z-index:1}.generator-icon{background:linear-gradient(145deg,#eaffff,#93d3f4);}.generator-icon i{background:#a2c52b;border-color:#006daf;box-shadow:0 0 20px rgba(162,197,43,.65)}
.geo-cell.flow{box-shadow:0 0 0 2px rgba(162,197,43,.65),0 0 28px rgba(147,211,244,.68),inset 0 1px 0 rgba(255,255,255,.9);animation:geoPulse .7s ease both}.geo-cell.flow .pipe-asset{filter:drop-shadow(0 0 14px rgba(147,211,244,.85)) drop-shadow(0 7px 9px rgba(0,40,70,.2))}.geo-cell.flow .pipe-asset.straight.horizontal:before,.geo-cell.flow .pipe-asset.straight.vertical:before{background:linear-gradient(90deg,#a2c52b,#93d3f4,#fff,#93d3f4);background-size:220% 100%;animation:pipeFlow 1s linear infinite}.geo-cell.flow .pipe-asset.elbow:after{border-color:#dff9ff;filter:drop-shadow(0 0 9px rgba(147,211,244,.8))}
@keyframes pipeFlow{to{background-position:220% 0}}
.steam-trail{position:absolute;inset:0;z-index:8;pointer-events:none}.steam-trail span{position:absolute;height:7px;border-radius:999px;transform-origin:0 50%;background:linear-gradient(90deg,transparent,rgba(233,251,255,.95),rgba(147,211,244,.78),transparent);box-shadow:0 0 16px rgba(233,251,255,.85);opacity:0;animation:steamTrail 1.3s ease-out forwards}.steam-dot{position:absolute;z-index:9;left:0;top:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:999px;background:radial-gradient(circle,#fff 0 28%,#93d3f4 52%,rgba(147,211,244,0) 75%);box-shadow:0 0 16px rgba(233,251,255,.9);pointer-events:none;opacity:0}@keyframes steamTrail{0%{opacity:0;filter:blur(6px)}30%{opacity:.95;filter:blur(0)}100%{opacity:.25;filter:blur(2px)}}
.geo-status.ok b{display:inline-block;margin-left:4px;color:#587000}.geo-energy-badge{background:linear-gradient(135deg,#93d3f4,#a2c52b);color:#053c5d;border-radius:999px;padding:8px 13px;font-weight:1000;box-shadow:0 8px 22px rgba(0,70,120,.15)}
@media(max-width:520px){.geo-board{width:min(100%,430px);gap:7px;padding:8px}.pipe-asset.elbow:before{border-right-width:13px;border-bottom-width:13px}.pipe-asset.elbow:after{border-right-width:8px;border-bottom-width:8px}.pipe-asset.straight.horizontal:before,.pipe-asset.straight.vertical:before{border-width:3px}.steam-dot{width:12px;height:12px;margin:-6px 0 0 -6px}.geo-game-head p{font-size:13px}}


/* v18 quick fix: Pipe Mania geothermal engine - connected pipe visuals, bigger tiles, steam flow */
.geo-stage{min-height:620px!important;overflow:visible!important;padding-bottom:18px!important}
.geo-underground{overflow:visible!important;padding:28px 12px 74px!important;justify-content:center!important;gap:12px!important}
.geo-board{width:min(100%,520px)!important;gap:0!important;padding:10px!important;border-radius:24px!important;background:rgba(35,25,18,.38)!important;overflow:visible!important}
.geo-cell{border-radius:10px!important;overflow:visible!important;box-shadow:none!important;background:rgba(255,255,255,.08)!important;border:1px dashed rgba(255,255,255,.12)!important}
.geo-cell:not(.empty){background:linear-gradient(145deg,#edf9ff,#c9e8f7)!important;border:0!important;box-shadow:0 7px 14px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.85)!important}
.geo-cell.start,.geo-cell.finish{z-index:7;box-shadow:0 0 0 3px rgba(162,197,43,.42),0 10px 24px rgba(0,0,0,.16)!important}
.pipe-asset{width:100%!important;height:100%!important;filter:drop-shadow(0 4px 6px rgba(0,40,70,.22))!important}
.pipe-asset.straight.horizontal:before{height:34%!important;left:-3%!important;right:-3%!important;top:33%!important;border-width:4px!important;background:linear-gradient(#d7edf6,#8fb8c9 48%,#5f8699 52%,#c1dbe7)!important}
.pipe-asset.straight.horizontal:after{height:58%!important;width:8%!important;top:21%!important;left:-4%!important;box-shadow:calc(100% * 12.2) 0 0 #294d63!important}
.pipe-asset.straight.vertical:before{width:34%!important;top:-3%!important;bottom:-3%!important;left:33%!important;border-width:4px!important;background:linear-gradient(90deg,#d7edf6,#8fb8c9 48%,#5f8699 52%,#c1dbe7)!important}
.pipe-asset.straight.vertical:after{width:58%!important;height:8%!important;left:21%!important;top:-4%!important;box-shadow:0 calc(100% * 12.2) 0 #294d63!important}
.pipe-asset.elbow:before{width:67%!important;height:67%!important;right:-4%!important;bottom:-4%!important;border-right:18px solid #294d63!important;border-bottom:18px solid #294d63!important;border-radius:0 0 40px 0!important}
.pipe-asset.elbow:after{width:52%!important;height:52%!important;right:6%!important;bottom:6%!important;border-right:10px solid #a8cadd!important;border-bottom:10px solid #a8cadd!important;border-radius:0 0 32px 0!important}
.pipe-asset.elbow i:before{width:42%!important;height:10%!important;right:-6%!important;bottom:45%!important;background:#294d63!important;border-radius:5px!important}.pipe-asset.elbow i:after{height:42%!important;width:10%!important;right:45%!important;bottom:-6%!important;background:#294d63!important;border-radius:5px!important}
.geo-cell.flow{z-index:6!important;box-shadow:0 0 0 3px rgba(162,197,43,.75),0 0 32px rgba(147,211,244,.95),inset 0 1px 0 rgba(255,255,255,.92)!important}
.geo-cell.flow .pipe-asset.straight.horizontal:before,.geo-cell.flow .pipe-asset.straight.vertical:before{background:linear-gradient(90deg,#a2c52b,#93d3f4,#fff,#93d3f4,#a2c52b)!important;background-size:240% 100%!important;animation:pipeFlow .75s linear infinite!important}
.geo-cell.flow .pipe-asset.elbow:before{border-color:#006daf!important;filter:drop-shadow(0 0 14px rgba(147,211,244,.9))!important}
.geo-cell.flow .pipe-asset.elbow:after{border-color:#e9fbff!important;filter:drop-shadow(0 0 14px rgba(147,211,244,.9))!important}
.steam-dot{width:18px!important;height:18px!important;margin:-9px 0 0 -9px!important;background:radial-gradient(circle,#fff 0 25%,#e9fbff 38%,#93d3f4 58%,rgba(147,211,244,0) 76%)!important;box-shadow:0 0 20px rgba(233,251,255,.95),0 0 35px rgba(147,211,244,.7)!important}
.steam-trail span{height:12px!important;background:linear-gradient(90deg,transparent,rgba(255,255,255,.98),rgba(147,211,244,.9),rgba(162,197,43,.65),transparent)!important;box-shadow:0 0 22px rgba(233,251,255,.95)!important}
.geo-reservoir{position:absolute!important;bottom:12px!important;left:50%!important;transform:translateX(-50%)!important;z-index:6!important;white-space:nowrap!important}.geo-powerplant{position:relative;z-index:6!important}
@media(max-width:520px){.geo-stage{min-height:585px!important}.geo-underground{padding:22px 6px 78px!important}.geo-board{width:100%!important;padding:8px!important}.pipe-asset.elbow:before{border-right-width:15px!important;border-bottom-width:15px!important}.pipe-asset.elbow:after{border-right-width:8px!important;border-bottom-width:8px!important}.geo-terminal{font-size:10px!important;border-width:3px!important;border-radius:18px!important}.geo-reservoir small{display:none}}

/* V21 Geothermal Slide Pipe Game */
.geo-slide-game{margin-top:18px;border-radius:30px;padding:16px;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(147,211,244,.24));border:1px solid rgba(255,255,255,.65);box-shadow:0 22px 60px rgba(0,45,78,.18);backdrop-filter:blur(18px);overflow:hidden;color:#06395d}
.gs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}.gs-head h3{margin:4px 0 4px;color:#003e68}.gs-head p{margin:0;color:#315872;font-weight:650}.gs-score{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:10px 16px;background:linear-gradient(135deg,#93d3f4,#a2c52b);font-weight:1000;color:#003e68;box-shadow:0 12px 26px rgba(0,109,175,.18)}
.gs-stage{position:relative;min-height:720px;border-radius:28px;overflow:hidden;border:1px solid rgba(0,109,175,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);background:#93d3f4}.gs-sky{position:absolute;left:0;right:0;top:0;height:24%;background:linear-gradient(180deg,#25d4df 0%,#98ecf3 70%,#70b637 71%,#70b637 100%);overflow:hidden}.gs-volcano{position:absolute;left:50%;bottom:20px;width:130px;height:105px;transform:translateX(-50%);background:linear-gradient(150deg,#6d3b27,#2f1c15);clip-path:polygon(50% 0,90% 100%,10% 100%);filter:drop-shadow(0 8px 12px rgba(0,0,0,.18))}.gs-volcano:before{content:"";position:absolute;left:42%;top:0;width:34px;height:28px;background:#ff3224;border-radius:50% 50% 0 0;box-shadow:0 0 20px #ff8b17}.gs-volcano:after{content:"";position:absolute;left:22%;right:22%;top:22px;height:34px;background:#f44336;clip-path:polygon(0 0,14% 100%,28% 18%,42% 100%,58% 18%,72% 100%,86% 18%,100% 0)}.gs-plant{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:8px 18px;border-radius:18px;background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.8);font-size:24px;color:#006daf;text-align:center;font-weight:1000;z-index:4;box-shadow:0 10px 24px rgba(0,87,142,.16)}.gs-plant b{display:block;font-size:10px;letter-spacing:.1em}.gs-plant.power-on{animation:plantPower .7s ease infinite alternate;box-shadow:0 0 30px rgba(162,197,43,.95),0 12px 28px rgba(0,87,142,.2)}@keyframes plantPower{from{filter:brightness(1)}to{filter:brightness(1.28)}}
.gs-cloud{position:absolute;border-radius:999px;background:rgba(255,255,255,.76);height:18px}.gs-cloud:before,.gs-cloud:after{content:"";position:absolute;border-radius:999px;background:inherit}.gs-cloud.one{width:70px;left:10%;top:38px}.gs-cloud.one:before{width:32px;height:32px;left:8px;top:-17px}.gs-cloud.one:after{width:38px;height:38px;right:7px;top:-20px}.gs-cloud.two{width:56px;right:12%;top:70px;opacity:.82}.gs-cloud.two:before{width:25px;height:25px;left:6px;top:-12px}.gs-cloud.two:after{width:30px;height:30px;right:6px;top:-15px}
.gs-soil{position:absolute;left:0;right:0;bottom:0;top:24%;background:radial-gradient(circle at 16% 20%,rgba(255,203,97,.15),transparent 13%),radial-gradient(circle at 76% 45%,rgba(255,203,97,.12),transparent 15%),linear-gradient(180deg,#744632 0%,#5c392b 72%,#2e1d17 72%,#2e1d17 100%);padding:14px 16px 84px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.gs-soil:before{content:"";position:absolute;left:0;right:0;bottom:0;height:86px;background:radial-gradient(circle at 20px 20px,#ffeb2e 0 5px,#ff6b00 6px 16px,#d70000 17px 32px,transparent 33px) 0 0/54px 44px,linear-gradient(180deg,#ff9d00,#e22700);box-shadow:0 -14px 30px rgba(255,93,0,.22)}.gs-soil:after{content:"✦  ✧        🦴       ✦      ◦   🐚      ✧";position:absolute;left:10%;right:5%;top:105px;color:rgba(255,235,185,.72);font-size:28px;letter-spacing:18px;opacity:.75;pointer-events:none}.gs-hud{width:min(100%,520px);display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;z-index:2}.gs-hud span{display:block;text-align:center;background:rgba(54,31,23,.66);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 6px;color:#ffd53d;font-weight:1000;text-shadow:0 2px 0 #6c2f18}.gs-hud b{display:block;color:#fff;font-size:32px;line-height:1.1;text-shadow:0 3px 0 rgba(0,0,0,.2)}
.gs-board{z-index:3;width:min(100%,420px);display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:0;margin-top:2px;border-radius:20px;overflow:visible;filter:drop-shadow(0 12px 18px rgba(0,0,0,.22));touch-action:manipulation}.gs-tile{position:relative;aspect-ratio:1/1;border:0;border-radius:10px;background:#4b3028;background-image:radial-gradient(circle at 20% 18%,rgba(255,255,255,.05) 0 3px,transparent 4px),radial-gradient(circle at 72% 35%,rgba(0,0,0,.16) 0 5px,transparent 6px),radial-gradient(circle at 38% 74%,rgba(255,255,255,.04) 0 4px,transparent 5px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.02),0 2px 0 rgba(0,0,0,.28);cursor:pointer;overflow:visible;transition:transform .16s ease, filter .16s ease, box-shadow .16s ease}.gs-tile.movable{box-shadow:inset 0 0 0 2px rgba(162,197,43,.45),0 0 18px rgba(162,197,43,.28),0 2px 0 rgba(0,0,0,.28)}.gs-tile:active{transform:scale(.96)}.gs-tile.empty{background:rgba(0,0,0,.06);border:1px dashed rgba(255,255,255,.18);box-shadow:none;cursor:default}.gs-tile.fixed{box-shadow:0 0 0 2px rgba(255,184,24,.7),0 0 24px rgba(255,107,0,.45)}.gs-tile.active{background:#2f241f;box-shadow:0 0 0 2px rgba(255,199,38,.7),0 0 26px rgba(255,117,0,.55),inset 0 0 18px rgba(255,116,0,.18)}.gs-tile.hint{animation:gsHint 1.5s ease}@keyframes gsHint{0%,100%{filter:brightness(1)}45%{filter:brightness(1.45);box-shadow:0 0 0 3px rgba(162,197,43,.8),0 0 32px rgba(162,197,43,.75)}}.pipe-svg2{position:absolute;inset:0;overflow:visible}.pipe-svg2 path{fill:none;stroke-linecap:round;stroke-linejoin:round}.pipe-shadow{stroke:#1c0f0b;stroke-width:30}.pipe-main{stroke:#24100b;stroke-width:20}.gs-tile.active .pipe-main,.pipe-svg2.on .pipe-main{stroke:#ffb000;filter:drop-shadow(0 0 8px #ff7800)}.gs-tile.active .pipe-shadow,.pipe-svg2.on .pipe-shadow{stroke:#ff4b00}.pipe-svg2 .node{fill:#ffcc1d;filter:drop-shadow(0 0 8px #ff7800)}.terminal{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-style:normal;font-size:9px;font-weight:1000;color:#fff;background:rgba(0,0,0,.34);padding:3px 4px;border-radius:999px;z-index:3}.terminal.hot{background:#ff5b00;color:#fff}.terminal.plant{background:#006daf}.gs-flow-line{position:absolute;inset:0;z-index:8;pointer-events:none}.gs-flow-line i{position:absolute;height:12px;margin-top:-6px;transform-origin:0 50%;border-radius:999px;background:linear-gradient(90deg,#ff3300,#ffb000,#fff27a);box-shadow:0 0 18px rgba(255,125,0,.9);animation:flowSeg .75s ease both}@keyframes flowSeg{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}.gs-flow-dot{position:absolute;z-index:9;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:999px;background:radial-gradient(circle,#fff 0 20%,#ffd23a 24% 50%,#ff4b00 56%);box-shadow:0 0 18px rgba(255,94,0,.95);pointer-events:none}.gs-status{margin-top:12px;border-radius:18px;background:rgba(147,211,244,.25);border:1px solid rgba(147,211,244,.58);padding:13px 15px;color:#073b5b;font-weight:900}.gs-status.ok{background:rgba(162,197,43,.25);border-color:rgba(162,197,43,.58);color:#435f00}.gs-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.gs-actions .btn{min-height:54px}.empty-mark{display:block;width:100%;height:100%}
@media(max-width:520px){.geo-slide-game{padding:12px;border-radius:24px}.gs-head{display:block}.gs-score{margin-top:10px}.gs-stage{min-height:640px;border-radius:22px}.gs-sky{height:25%}.gs-soil{top:25%;padding:12px 8px 82px}.gs-board{width:min(100%,360px);gap:1px}.gs-tile{border-radius:8px}.pipe-shadow{stroke-width:32}.pipe-main{stroke-width:21}.gs-hud{gap:7px;margin-bottom:12px}.gs-hud span{font-size:12px;padding:7px 4px}.gs-hud b{font-size:28px}.gs-volcano{width:110px;height:86px}.gs-plant{padding:6px 13px;font-size:20px}.gs-status{font-size:13px}.gs-actions{grid-template-columns:1fr}}


/* V22 rotary pipe + doorprize/souvenir polish */
.admin-main,.admin-main *{font-family:Poppins,Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
body .admin-main .card, body .admin-main .table, body .admin-main input, body .admin-main select, body .admin-main textarea{color:#123047}
body .admin-main .card h1,body .admin-main .card h2,body .admin-main .card h3,body .admin-main .table th,body .admin-main .table td{color:#123047}
body .admin-main .muted, body .admin-main p{color:#5b7084!important}.pill.ok,.user-chip.ok{background:#eafff3!important;color:#047857!important}.pill.warn,.user-chip.warn{background:#fff7d6!important;color:#8a5a00!important}.alert.success{background:#eafff3;color:#047857;border:1px solid #b9f7d1}.claim-code{margin-top:10px;display:grid;place-items:center;min-height:72px;border-radius:20px;background:linear-gradient(135deg,#eaf8ff,#f2f9df);font-size:34px;font-weight:1000;letter-spacing:.12em;color:#006daf;border:1px solid rgba(147,211,244,.55)}.notif-card{padding:13px 14px;border-radius:16px;background:#f8fbff;border:1px solid #e2eaf3;margin-top:10px}.notif-card.win{background:linear-gradient(135deg,#f1ffe1,#eaf8ff);border-color:rgba(162,197,43,.55)}.notif-card b{display:block;color:#0b255c}.notif-card p{margin:6px 0;color:#52677a}.notif-card span{display:block;color:#64748b;font-size:12px;font-weight:800;margin-top:4px}
.geo-slide-game .gs-board{display:grid;grid-template-columns:repeat(5,1fr);gap:0;padding:0;border-radius:18px;overflow:hidden;background:rgba(42,25,18,.92);border:4px solid rgba(255,255,255,.16);box-shadow:inset 0 0 0 2px rgba(0,0,0,.12)}
.geo-slide-game .gs-cell{position:relative;aspect-ratio:1/1;border:1px solid rgba(255,255,255,.08);background:#5a3b2e;border-radius:0;display:grid;place-items:center;cursor:pointer;touch-action:manipulation;overflow:hidden;transition:transform .18s ease,filter .18s ease}
.geo-slide-game .gs-cell:active{transform:scale(.96)}.geo-slide-game .gs-cell.fixed{cursor:default}.geo-slide-game .gs-cell.flow{filter:drop-shadow(0 0 12px rgba(255,124,0,.8)) saturate(1.25)}
.pipe-svg2{width:100%;height:100%;display:block}.pipe-svg2 .pipe-shadow{fill:none;stroke:#2a130d;stroke-width:24;stroke-linecap:round;stroke-linejoin:round}.pipe-svg2 .pipe-main{fill:none;stroke:#1f0d08;stroke-width:16;stroke-linecap:round;stroke-linejoin:round}.pipe-svg2.on .pipe-main{stroke:#ff8a00;filter:drop-shadow(0 0 8px #ffdd55)}.pipe-svg2.on .pipe-core{stroke:#ffe36a;stroke-width:6;stroke-linecap:round;stroke-dasharray:10 12;animation:steamDash .55s linear infinite}.pipe-svg2 .pipe-core{fill:none;stroke:transparent;stroke-width:6;stroke-linecap:round}@keyframes steamDash{to{stroke-dashoffset:-44}}
.gs-flow-dot{position:absolute;width:13px;height:13px;border-radius:999px;background:#fff7a6;box-shadow:0 0 14px #ff7a00,0 0 24px #fff;z-index:5;pointer-events:none;transform:translate(-50%,-50%)}

/* v23 mobile pipe game hotfix */
.geo-slide-game, .geo-slide-game *{-webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;}
.geo-slide-game .gs-board{touch-action:none; -ms-touch-action:none; position:relative;}
.geo-slide-game .gs-cell{touch-action:none; -ms-touch-action:none; min-height:58px; appearance:none; -webkit-appearance:none; padding:0;}
.geo-slide-game .gs-cell svg{width:100%;height:100%;display:block;pointer-events:none;}
.geo-slide-game .gs-cell .terminal{pointer-events:none;}
.geo-slide-game .gs-actions button{touch-action:manipulation;}
.pipe-core{stroke:#ffb637;stroke-width:9;opacity:.0;filter:drop-shadow(0 0 8px rgba(255,145,0,.8));}
.geo-slide-game .gs-cell.flow .pipe-core,.pipe-svg2.on .pipe-core{opacity:1;}
@media(max-width:520px){
  .geo-slide-game .gs-stage{min-height:calc(100vh - 130px);}
  .geo-slide-game .gs-board{width:min(96vw,360px);}
  .geo-slide-game .gs-cell{min-height:auto;}
}


/* V25 mobile UX fix: login fixed center, no white bounce, safe dock */
html, body { overscroll-behavior-y: none; }
body.login-body{
  height:100svh!important;
  min-height:100svh!important;
  overflow:hidden!important;
  padding-bottom:0!important;
  background:#006daf!important;
  position:fixed;
  inset:0;
  width:100%;
}
body.login-body:before{height:100%!important;border-radius:0!important;background:transparent!important;}
body.login-body .user-login-screen{
  height:100svh!important;
  min-height:100svh!important;
  overflow:hidden!important;
  place-items:center!important;
  padding:18px!important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,109,175,.20)),url('kv-app-sarulla-2.jpg')!important;
  background-size:cover!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
}
body.login-body .user-login-card{margin:0 auto!important;transform:none!important;}
@media(max-width:620px){
  .user-shell{padding-bottom:150px!important;}
  .mobile-dock{
    display:grid!important;
    position:fixed!important;
    left:12px!important;
    right:12px!important;
    bottom:calc(env(safe-area-inset-bottom) + 76px)!important;
    z-index:80!important;
  }
}
@media(max-width:420px){
  body.login-body .user-login-card{padding:22px!important;border-radius:24px!important;}
  body.login-body .user-login-card h1{font-size:27px!important;}
}


/* V26 CSS composition fix: admin readability, mobile dock, pipe responsive */
html,body{max-width:100%;overflow-x:hidden;}
.admin-main,.admin-main *{text-shadow:none!important;}
.admin-main label,.admin-main p,.admin-main small{color:#5d7086!important;}
.admin-main input,.admin-main select,.admin-main textarea{color:#102033!important;background:#fff!important;border-color:#b9ddf2!important;}
.admin-main .card,.admin-main table,.admin-main td,.admin-main th{color:#102033!important;}
.admin-main .btn{color:#fff!important;}
.admin-main .btn.outline,.admin-main .btn.ghost{color:#006daf!important;background:#eef9ff!important;}
@media(max-width:620px){
  .user-body{padding-bottom:120px!important;overflow-x:hidden!important;}
  .user-shell{padding-bottom:170px!important;}
  .mobile-dock{bottom:calc(env(safe-area-inset-bottom) + 18px)!important;left:14px!important;right:14px!important;z-index:90!important;}
}


/* V27 final layout fixes: desktop scroll, mobile pipe containment, dock text alignment, login no bounce */
html,body{max-width:100%!important;overflow-x:hidden!important;}
body.pipe-page{height:auto!important;min-height:100vh!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch!important;}
body.pipe-page .user-shell, body.pipe-page .checkpoint-form{overflow:visible!important;}
body.pipe-page .geo-slide-game *{box-sizing:border-box!important;}
@media(min-width:769px){
  body.pipe-page{overflow-y:auto!important;}
  .pipe-page .user-shell{max-width:980px!important;padding:24px 18px 80px!important;}
  .pipe-page .checkpoint-form{max-width:900px!important;padding:24px!important;}
  .pipe-page .geo-slide-game{max-width:860px!important;overflow:visible!important;}
  .pipe-page .geo-slide-game .gs-stage{overflow:visible!important;}
  .pipe-page .geo-slide-game .gs-soil{overflow:visible!important;padding-bottom:145px!important;}
  .pipe-page .geo-slide-game .gs-board{width:min(100%,560px)!important;max-width:560px!important;overflow:hidden!important;}
}
@media(max-width:620px){
  .mobile-dock{display:grid!important;grid-template-columns:1fr 1.15fr 1fr!important;gap:8px!important;align-items:stretch!important;bottom:calc(env(safe-area-inset-bottom) + 16px)!important;left:14px!important;right:14px!important;padding:8px!important;z-index:120!important;}
  .mobile-dock a,.mobile-dock button{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;line-height:1.05!important;padding:0 8px!important;min-height:52px!important;font-size:15px!important;white-space:nowrap!important;margin:0!important;}
}
body.login-body{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;position:fixed!important;inset:0!important;width:100%!important;overscroll-behavior:none!important;background:#006daf url('kv-app-sarulla-2.jpg') center center/cover no-repeat!important;}
body.login-body .user-login-screen{height:100dvh!important;min-height:100dvh!important;overflow:hidden!important;display:grid!important;place-items:center!important;padding:18px!important;background:transparent!important;}
body.login-body .user-login-card{width:min(520px,calc(100vw - 36px))!important;margin:0 auto!important;}
@media(max-width:768px){
  body.pipe-page{background:#006daf!important;}
  .pipe-page .user-top{position:sticky!important;top:0!important;z-index:80!important;}
  .pipe-page .user-shell{width:100%!important;max-width:none!important;padding:0 0 46px!important;}
  .pipe-page .checkpoint-form{width:100%!important;max-width:none!important;margin:0!important;border-radius:0!important;padding:12px 0 44px!important;overflow:hidden!important;background:linear-gradient(180deg,rgba(234,248,255,.88),rgba(255,255,255,.78))!important;}
  .pipe-page .task-card.pipe-task-card{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;overflow:visible!important;}
  .pipe-page .geo-slide-game{width:calc(100% - 24px)!important;max-width:390px!important;margin:0 auto 18px!important;border-radius:24px!important;display:block!important;overflow:hidden!important;}
  .pipe-page .geo-slide-game .gs-head{display:block!important;text-align:center!important;padding:14px 12px 10px!important;}
  .pipe-page .geo-slide-game .gs-head .task-type,.pipe-page .geo-slide-game .gs-head .user-eyebrow{margin-left:auto!important;margin-right:auto!important;}
  .pipe-page .geo-slide-game .gs-head h3{font-size:21px!important;line-height:1.15!important;margin:8px auto 0!important;text-align:center!important;}
  .pipe-page .geo-slide-game .gs-head p{display:none!important;}
  .pipe-page .geo-slide-game .gs-score{display:inline-flex!important;margin-top:10px!important;font-size:13px!important;padding:8px 12px!important;}
  .pipe-page .geo-slide-game .gs-stage{height:auto!important;min-height:0!important;overflow:visible!important;background:#5a3b2e!important;border-radius:0!important;}
  .pipe-page .geo-slide-game .gs-sky{position:relative!important;inset:auto!important;height:118px!important;overflow:hidden!important;}
  .pipe-page .geo-slide-game .gs-soil{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;min-height:0!important;height:auto!important;padding:10px 0 142px!important;overflow:visible!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;}
  .pipe-page .geo-slide-game .gs-soil:before{height:86px!important;z-index:1!important;}
  .pipe-page .geo-slide-game .gs-hud{width:calc(100% - 24px)!important;max-width:340px!important;margin:0 auto 10px!important;gap:7px!important;}
  .pipe-page .geo-slide-game .gs-hud span{font-size:11px!important;padding:7px 4px!important;border-radius:12px!important;}
  .pipe-page .geo-slide-game .gs-hud b{font-size:23px!important;}
  .pipe-page .geo-slide-game .gs-board{width:calc(100% - 32px)!important;max-width:330px!important;margin:0 auto!important;overflow:hidden!important;border-width:3px!important;border-radius:18px!important;}
  .pipe-page .geo-slide-game .gs-cell{overflow:hidden!important;border-radius:0!important;}
  .pipe-page .geo-slide-game .gs-status{width:calc(100% - 24px)!important;margin:12px auto 0!important;font-size:13px!important;line-height:1.32!important;padding:12px!important;}
  .pipe-page .geo-slide-game .gs-actions{width:calc(100% - 24px)!important;margin:0 auto!important;padding:12px 0 18px!important;grid-template-columns:1fr 1fr!important;}
  .pipe-page .geo-slide-game .gs-actions .btn{min-height:52px!important;}
}
@media(max-width:390px){
  .pipe-page .geo-slide-game{width:calc(100% - 18px)!important;max-width:360px!important;}
  .pipe-page .geo-slide-game .gs-board{max-width:315px!important;width:calc(100% - 28px)!important;}
  .pipe-page .geo-slide-game .gs-hud{max-width:315px!important;width:calc(100% - 28px)!important;}
  .pipe-page .geo-slide-game .gs-sky{height:106px!important;}
}


/* V28 scroll + laptop/mobile game containment final fix */
html:not(.no-scroll),
body:not(.login-body){
  height:auto!important;
  min-height:100%!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
body.admin-body,
body:has(.admin-shell){
  height:auto!important;
  min-height:100vh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
.admin-shell{
  min-height:100vh!important;
  height:auto!important;
  overflow:visible!important;
}
.admin-main{
  min-height:100vh!important;
  height:auto!important;
  overflow:visible!important;
  padding-bottom:80px!important;
}
@media(min-width:769px){
  body.pipe-page{
    height:auto!important;
    min-height:100vh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    position:static!important;
  }
  .pipe-page .user-shell{
    max-width:980px!important;
    margin:0 auto!important;
    padding:24px 18px 120px!important;
    overflow:visible!important;
  }
  .pipe-page .checkpoint-form{
    max-width:900px!important;
    margin:0 auto 80px!important;
    padding:24px!important;
    overflow:visible!important;
  }
  .pipe-page .geo-slide-game{
    display:block!important;
    width:100%!important;
    max-width:760px!important;
    margin:0 auto 28px!important;
    overflow:visible!important;
  }
  .pipe-page .geo-slide-game .gs-stage{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .pipe-page .geo-slide-game .gs-sky{
    position:relative!important;
    height:160px!important;
    overflow:hidden!important;
  }
  .pipe-page .geo-slide-game .gs-soil{
    position:relative!important;
    top:auto!important;left:auto!important;right:auto!important;bottom:auto!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    min-height:0!important;
    height:auto!important;
    padding:18px 18px 150px!important;
    overflow:visible!important;
  }
  .pipe-page .geo-slide-game .gs-board{
    width:min(100%,560px)!important;
    max-width:560px!important;
    margin:0 auto!important;
    overflow:hidden!important;
  }
  .pipe-page .geo-slide-game .gs-status,
  .pipe-page .geo-slide-game .gs-actions{
    max-width:560px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
@media(max-width:768px){
  body.pipe-page{
    height:auto!important;
    min-height:100vh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    position:static!important;
  }
  .pipe-page .checkpoint-form{
    overflow:visible!important;
    padding-bottom:150px!important;
  }
  .pipe-page .geo-slide-game{
    width:calc(100vw - 18px)!important;
    max-width:430px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    overflow:hidden!important;
  }
  .pipe-page .geo-slide-game .gs-head{
    padding-left:16px!important;
    padding-right:16px!important;
    text-align:left!important;
  }
  .pipe-page .geo-slide-game .gs-head h3{
    text-align:left!important;
  }
  .pipe-page .geo-slide-game .gs-sky{
    height:120px!important;
  }
  .pipe-page .geo-slide-game .gs-soil{
    padding-left:0!important;
    padding-right:0!important;
    padding-bottom:150px!important;
  }
  .pipe-page .geo-slide-game .gs-board,
  .pipe-page .geo-slide-game .gs-hud,
  .pipe-page .geo-slide-game .gs-status,
  .pipe-page .geo-slide-game .gs-actions{
    width:calc(100% - 28px)!important;
    max-width:390px!important;
  }
  .mobile-dock a,.mobile-dock button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    min-height:52px!important;
    line-height:1.1!important;
    padding:0 8px!important;
    white-space:nowrap!important;
  }
}

/* V29 ALL PAGES SCROLL ENABLED - no body lock on mobile/laptop */
html,
body,
body.login-body,
body.user-body,
body.pipe-page,
body.admin-body {
  height:auto!important;
  min-height:100vh!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:100%!important;
  overscroll-behavior-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
}
body.login-body .user-login-screen{
  min-height:100vh!important;
  height:auto!important;
  overflow:visible!important;
  padding:24px 14px 48px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
body.login-body .user-login-card{
  width:min(520px,calc(100vw - 32px))!important;
  margin:0 auto!important;
}
.admin-shell,.admin-main,.user-shell,.checkpoint-form{
  overflow:visible!important;
  height:auto!important;
}
.mobile-dock a,.mobile-dock button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.1!important;
}
@media(max-width:768px){
  .pipe-page .geo-slide-game{
    width:calc(100vw - 20px)!important;
    max-width:420px!important;
    overflow:hidden!important;
  }
  .pipe-page .geo-slide-game .gs-stage,
  .pipe-page .geo-slide-game .gs-soil{
    height:auto!important;
    min-height:0!important;
    overflow:visible!important;
  }
  .pipe-page .geo-slide-game .gs-soil{padding-bottom:168px!important;}
  .pipe-page .geo-slide-game .gs-board{
    width:calc(100% - 30px)!important;
    max-width:360px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .pipe-page .checkpoint-form{padding-bottom:170px!important;}
}

/* v30 card spacing polish - consistent 20px alignment */
.task-card{
  --card-pad:20px;
  padding:var(--card-pad)!important;
}
.task-card h3{
  margin:0 0 10px!important;
  padding:0!important;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif!important;
  font-weight:700!important;
  line-height:1.35!important;
  color:#0f172a!important;
}
.task-card p,
.task-card .task-desc,
.task-card .task-description{
  margin:0 0 18px!important;
  padding:0!important;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Arial,sans-serif!important;
  line-height:1.6!important;
  color:#64748b!important;
}
.task-card .task-type{
  margin:0 0 12px!important;
}
.task-card .game-area,
.task-card .pipe-game,
.task-card .pipe-game-wrap,
.task-card .geothermal-game,
.task-card .puzzle-game{
  margin:0 0 18px!important;
  max-width:100%!important;
}
.task-card .footer-action,
.task-card .task-actions,
.task-card .game-actions{
  padding:0!important;
  margin:18px 0 0!important;
  display:flex!important;
  gap:12px!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
}
.mobile-dock a,
.mobile-dock button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.2!important;
  padding:8px 10px!important;
  white-space:normal!important;
}
@media(max-width:620px){
  .task-card{--card-pad:18px; padding:var(--card-pad)!important;}
  .task-card h3{font-size:20px!important;}
  .task-card p,
  .task-card .task-desc,
  .task-card .task-description{font-size:14px!important; margin-bottom:16px!important;}
}


/* =========================================================
   V32 ENTERPRISE UI SYSTEM — ADMIN + USER PANEL
   ========================================================= */
:root{
  --sarulla-blue:#006daf;
  --sarulla-sky:#93d3f4;
  --sarulla-green:#a2c52b;
  --sarulla-gray:#d9d9d9;
  --ink:#102033;
  --muted:#65758a;
  --surface:#ffffff;
  --surface-soft:#f4f9fd;
  --line:#d8e9f4;
  --shadow:0 16px 46px rgba(18,74,109,.10);
}
html,body{max-width:100%;overflow-x:hidden}
body,button,input,select,textarea,table{font-family:'Poppins',Inter,system-ui,-apple-system,'Segoe UI',Arial,sans-serif}

/* ADMIN FOUNDATION */
.admin-shell{
  min-height:100vh;
  grid-template-columns:260px minmax(0,1fr);
  background:
    radial-gradient(circle at 88% 5%,rgba(162,197,43,.10),transparent 25%),
    linear-gradient(180deg,#edf8ff 0%,#f7fbfe 100%);
}
.admin-side{
  width:260px;
  padding:22px 18px;
  border-right:1px solid rgba(0,109,175,.12);
  box-shadow:12px 0 40px rgba(0,109,175,.05);
}
.admin-logo{padding:0 4px 12px;border-bottom:1px solid var(--line)}
.admin-logo span{background:linear-gradient(135deg,var(--sarulla-green),var(--sarulla-sky) 55%,var(--sarulla-blue))}
.admin-side nav{gap:6px}
.admin-side nav a{padding:12px 13px;border-radius:14px}
.admin-side nav a:hover,.admin-side nav a.active{
  background:linear-gradient(135deg,rgba(147,211,244,.28),rgba(255,255,255,.92));
  border-color:rgba(0,109,175,.15);
  box-shadow:0 9px 22px rgba(0,109,175,.07)
}
.admin-main{
  min-width:0;
  padding:24px clamp(16px,2.2vw,34px) 40px;
  overflow:visible!important;
  color:var(--ink);
}
.admin-main>.admin-top,.admin-main>.topbar{
  padding:20px 22px;
  border:1px solid rgba(0,109,175,.10)!important;
  border-radius:22px;
  background:rgba(255,255,255,.78)!important;
  backdrop-filter:blur(18px);
  box-shadow:var(--shadow)!important;
  margin-bottom:20px;
}
.admin-top h1,.hgroup h1{font-size:clamp(25px,3vw,36px)!important;letter-spacing:-.03em}
.admin-main .card{
  border-radius:22px!important;
  padding:22px!important;
  border:1px solid rgba(0,109,175,.11)!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:var(--shadow)!important;
  overflow:hidden;
}
.admin-main .grid{gap:18px}
.admin-main h2{font-size:20px;margin:0 0 8px}
.admin-main h3{font-size:17px;margin:0}
.admin-main p{line-height:1.65}
.admin-main label{
  min-width:0;
  font-size:12px!important;
  color:#536a7e!important;
  font-weight:800!important;
}
.admin-main input,.admin-main select,.admin-main textarea{
  min-width:0;
  width:100%;
  min-height:46px;
  padding:11px 13px!important;
  border:1px solid #cfe4f2!important;
  border-radius:13px!important;
  color:var(--ink)!important;
  background:#fff!important;
}
.admin-main textarea{min-height:110px;resize:vertical}
.admin-main input:focus,.admin-main select:focus,.admin-main textarea:focus{
  outline:0;
  border-color:var(--sarulla-blue)!important;
  box-shadow:0 0 0 4px rgba(0,109,175,.10)!important;
}
.admin-main .btn{
  min-height:42px;
  border-radius:12px!important;
  padding:10px 15px!important;
  font-weight:800!important;
  box-shadow:0 8px 18px rgba(0,109,175,.10);
}
.admin-main .btn:not(.ghost):not(.danger):not(.outline){
  background:linear-gradient(135deg,var(--sarulla-green),var(--sarulla-sky) 52%,var(--sarulla-blue))!important;
}
.admin-main .btn.dark{background:var(--sarulla-blue)!important;color:#fff!important}
.admin-main .btn.ghost,.admin-main .btn.outline{
  background:#f0f8fd!important;color:var(--sarulla-blue)!important;border:1px solid #cce7f6!important
}
.admin-main .btn.danger{background:#fff1f1!important;color:#b42318!important;border:1px solid #ffd0d0!important}
.admin-main .mini-card{
  background:linear-gradient(180deg,#fff,#f8fcff)!important;
  border:1px solid #dcecf5!important;
  border-radius:18px!important;
  padding:18px!important;
}
.admin-main .question-box{
  background:#f6fbfe!important;
  border:1px solid #d8ebf6!important;
  border-radius:20px!important;
  padding:18px!important;
}
.admin-main .cp-card{
  grid-template-columns:minmax(0,1fr) 210px;
  gap:20px;
  align-items:start;
}
.admin-main .table-wrap{border-radius:16px;border:1px solid #dcebf4;background:#fff}
.admin-main .table{min-width:760px}
.admin-main .table th{
  position:sticky;top:0;z-index:1;
  padding:12px 14px!important;
  background:#e8f6fd!important;
  color:#0b4d76!important;
  font-size:11px!important;
}
.admin-main .table td{padding:13px 14px!important}
.admin-main .toolbar{align-items:center}
.admin-main .section-title{margin-bottom:14px}

/* TASK EDITOR — answer visibility */
.task-editor{position:relative}
.answer-preview{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px;
  align-items:start;
  padding:13px 14px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(162,197,43,.14),rgba(147,211,244,.16));
  border:1px solid rgba(99,148,39,.22);
  color:#244315;
}
.answer-preview .answer-icon{
  width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--sarulla-green);color:#fff;font-weight:900
}
.answer-preview b{display:block;color:#244315!important;font-size:12px}
.answer-preview span{display:block;margin-top:3px;color:#405c37;font-weight:700;word-break:break-word}
.option-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.option-field{position:relative}
.option-field.correct input{border-color:#9bc33b!important;background:#f8fce9!important}
.option-field.correct:after{
  content:"BENAR";
  position:absolute;right:9px;top:31px;
  padding:3px 7px;border-radius:999px;
  background:#a2c52b;color:#fff;font-size:9px;font-weight:900
}

/* USER PANEL ENTERPRISE */
.user-body{
  background:
    linear-gradient(180deg,rgba(237,248,255,.96),rgba(247,252,255,.98)),
    url('bg-app1.png') center top/cover fixed;
  color:var(--ink);
  padding-bottom:calc(94px + env(safe-area-inset-bottom));
}
.user-body:before{
  height:330px;
  background:
    radial-gradient(circle at 10% 5%,rgba(162,197,43,.24),transparent 30%),
    linear-gradient(135deg,rgba(0,109,175,.96),rgba(0,109,175,.78) 55%,rgba(147,211,244,.62));
}
.user-top{
  background:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(0,109,175,.11);
  box-shadow:0 8px 24px rgba(0,109,175,.07)
}
.user-shell{max-width:960px;padding:22px 16px 34px}
.user-card,.user-hero-card{
  border:1px solid rgba(0,109,175,.11)!important;
  border-radius:24px!important;
  box-shadow:0 18px 46px rgba(0,109,175,.10)!important;
  background:rgba(255,255,255,.94)!important;
  backdrop-filter:blur(18px);
}
.user-hero-card{padding:24px!important}
.user-card{padding:22px!important}
.user-card h2,.user-card h3,.user-hero-card h1{letter-spacing:-.025em}
.user-card p{line-height:1.65}
.score-circle{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 16px 28px rgba(0,109,175,.16)}
.progress-track{height:12px;border-radius:999px;overflow:hidden;background:#e6edf2}
.progress-track>div{height:100%;background:linear-gradient(90deg,var(--sarulla-green),var(--sarulla-sky),var(--sarulla-blue));border-radius:inherit}
.claim-code{
  border:1px dashed rgba(0,109,175,.32);
  background:#f2f9fd;
  color:var(--sarulla-blue);
  border-radius:14px;
  padding:12px 14px;
  font-weight:900;
  letter-spacing:.06em;
}
.notif-card{border-radius:16px!important;background:#f5faff!important;border:1px solid #dcecf6!important}
.notif-card.win{background:#f7fbe9!important;border-color:#d7e9a4!important}
.user-bottom-nav{
  left:50%!important;right:auto!important;transform:translateX(-50%);
  width:min(92vw,720px)!important;
  bottom:max(12px,env(safe-area-inset-bottom))!important;
  padding:8px!important;
  border-radius:22px!important;
  box-shadow:0 20px 45px rgba(0,39,70,.20)!important;
}
.user-bottom-nav a,.user-bottom-nav button{
  min-height:54px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  line-height:1.15!important;
  font-weight:800!important;
}

/* RESPONSIVE */
@media(max-width:1100px){
  .admin-shell{grid-template-columns:220px minmax(0,1fr)}
  .admin-side{width:220px}
}
@media(max-width:860px){
  .admin-shell{display:block}
  .admin-side{
    position:relative!important;width:100%;height:auto!important;
    border-right:0;border-bottom:1px solid var(--line);
    padding:14px;
  }
  .admin-side nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .admin-main{padding:14px 12px 34px}
  .admin-main>.admin-top,.admin-main>.topbar{padding:16px;border-radius:18px}
  .admin-main .card{padding:16px!important;border-radius:18px!important}
  .admin-main .cp-card{grid-template-columns:1fr}
  .admin-main .cp-card .mini-card{max-width:260px}
  .option-editor-grid{grid-template-columns:1fr}
  .admin-main .form-row{grid-template-columns:1fr}
  .actions,.toolbar{width:100%}
  .actions .btn,.toolbar .btn{flex:1}
}
@media(max-width:560px){
  .admin-side nav{grid-template-columns:1fr 1fr}
  .admin-main h2{font-size:18px}
  .admin-main .grid{gap:12px}
  .user-shell{padding:16px 12px 30px}
  .user-card,.user-hero-card{border-radius:20px!important;padding:18px!important}
  .user-hero-card{display:grid!important;grid-template-columns:1fr auto!important;gap:12px}
  .score-circle{width:88px!important;height:88px!important}
  .section-title-mobile{align-items:flex-start!important}
}

/* V33 GLASS ENTERPRISE JOURNEY */
.journey-tabs{display:flex;gap:8px;padding:7px;margin-bottom:18px;border:1px solid rgba(0,109,175,.12);border-radius:18px;background:rgba(255,255,255,.75);box-shadow:0 12px 32px rgba(0,109,175,.07);overflow:auto}
.journey-tabs a{white-space:nowrap;padding:11px 16px;border-radius:13px;color:#587087;font-weight:800;font-size:13px}.journey-tabs a.active{background:#0a526b;color:#fff;box-shadow:0 9px 20px rgba(10,82,107,.22)}
.journey-list{display:grid;gap:12px}.journey-item{border:1px solid #dcebf3;border-radius:18px;background:#fff;overflow:hidden}.journey-item summary{list-style:none;display:grid;grid-template-columns:46px 1fr auto;gap:13px;align-items:center;padding:15px;cursor:pointer}.journey-item summary::-webkit-details-marker{display:none}.journey-item[open] summary{background:#f3fafd;border-bottom:1px solid #dcebf3}.journey-number{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#a2c52b,#93d3f4,#006daf);color:#fff;font-weight:900}.journey-summary b{display:block}.journey-summary span{display:block;color:#718297;font-size:12px;margin-top:3px}.journey-status{padding:6px 9px;border-radius:999px;font-size:10px;font-weight:900}.journey-status.on{background:#eef8d1;color:#587200}.journey-status.off{background:#f2f4f6;color:#7a8490}.journey-form{display:grid;gap:14px;padding:18px}.check-line{display:flex!important;align-items:center;gap:9px}.check-line input{width:auto!important;min-height:auto!important}
.question-section{border:1px solid #dcebf3;border-radius:20px;padding:18px;margin-top:16px;background:#f8fcfe}.question-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.question-section-head h3{margin:8px 0 0}.question-editor{display:grid;gap:13px;padding:18px;border:1px solid #dcebf3;border-radius:18px;background:#fff;margin-top:12px}.question-editor.add{border-style:dashed;background:#fbfdff}
.qr-verifier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.qr-verifier-card{padding:18px;border:1px solid #dcebf3;border-radius:20px;background:linear-gradient(180deg,#fff,#f5fbfe);text-align:center;break-inside:avoid}.qr-verifier-card img{display:block;width:min(100%,230px);aspect-ratio:1;margin:14px auto;border-radius:16px;border:10px solid #fff;box-shadow:0 12px 28px rgba(0,73,112,.12)}.qr-verifier-card h3{margin:12px 0 4px}.qr-verifier-card p{font-size:12px;color:#66798d}.qr-verifier-card small{display:block;color:#8a5c00;background:#fff8de;border:1px solid #f4dc8c;border-radius:10px;padding:8px}
.user-toast{padding:14px 16px;border-radius:16px;margin-bottom:14px;font-weight:800}.user-toast.success{background:#eef8d1;color:#426000;border:1px solid #d5e99b}.journey-user-card{display:grid;grid-template-columns:48px 1fr 58px;gap:14px;align-items:start;padding:17px;border:1px solid #dbeaf3;border-radius:20px;background:rgba(255,255,255,.94);box-shadow:0 12px 32px rgba(0,109,175,.08);margin-bottom:12px}.journey-user-card.done{border-color:#cfe59b;background:linear-gradient(135deg,#fbfff1,#fff)}.journey-user-card.locked{opacity:.58;filter:saturate(.5)}.journey-user-index{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#0a526b;color:#fff;font-weight:900}.journey-user-card.done .journey-user-index{background:#a2c52b}.journey-user-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.journey-user-head h3{margin:0;font-size:17px}.journey-user-status{white-space:nowrap;border-radius:999px;padding:5px 8px;background:#eaf6fc;color:#006daf;font-size:10px;font-weight:900}.journey-user-card.done .journey-user-status{background:#eef8d1;color:#537000}.journey-user-content p{margin:8px 0 12px;color:#68798c;font-size:13px;line-height:1.55}.journey-user-points{text-align:center;color:#006daf;font-size:19px;font-weight:900}.journey-user-points small{display:block;font-size:9px}.operator-note{display:grid;gap:3px;padding:11px 12px;border-radius:13px;background:#eef7fc;border:1px solid #d5e9f4;color:#24475d}.operator-note b{font-size:12px}.operator-note span,.operator-note small{font-size:11px;line-height:1.45}.operator-note small{color:#718497}
@media(max-width:980px){.qr-verifier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.journey-tabs a{padding:10px 12px}.journey-item summary{grid-template-columns:42px 1fr}.journey-status{grid-column:2}.qr-verifier-grid{grid-template-columns:1fr}.journey-user-card{grid-template-columns:42px 1fr}.journey-user-points{grid-column:2;text-align:left}.journey-user-head{display:block}.journey-user-status{display:inline-flex;margin-top:6px}.admin-main .form-row{grid-template-columns:1fr!important}}
@media print{.admin-side,.admin-top,.journey-tabs,.section-title .btn{display:none!important}.admin-shell{display:block}.admin-main{padding:0}.qr-verifier-grid{grid-template-columns:repeat(2,1fr)}.qr-verifier-card{page-break-inside:avoid}}


/* =========================================================
   V34 USER PANEL + VERIFIER SCANNER
   ========================================================= */
.v34-user{background:#f1f7fb!important}.v34-shell{max-width:980px!important}
.v34-profile{display:grid;grid-template-columns:1fr auto;align-items:center;gap:18px;padding:24px;margin-bottom:16px;border-radius:26px;background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(235,248,255,.96));border:1px solid rgba(0,109,175,.13);box-shadow:0 18px 45px rgba(0,109,175,.11)}
.v34-profile h1{margin:8px 0 3px;font-size:clamp(27px,5vw,42px);line-height:1.08;color:#073b5b}.v34-profile p{margin:0;color:#64768a}.v34-profile p span{padding:0 5px}
.v34-score{width:104px;height:104px;border-radius:32px;display:grid;place-items:center;align-content:center;background:linear-gradient(145deg,#a2c52b,#93d3f4 52%,#006daf);color:#fff;box-shadow:0 16px 30px rgba(0,109,175,.20)}.v34-score b{font-size:34px;line-height:1}.v34-score small{font-size:10px;font-weight:800;letter-spacing:.12em;margin-top:7px}
.v34-grid-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:16px;margin-bottom:16px}.v34-progress{margin:0!important;display:flex;flex-direction:column;justify-content:center}.v34-progress .btn{margin-top:18px}.v34-qr-card{margin:0!important;display:grid;grid-template-columns:1fr 150px;gap:18px;align-items:center;background:linear-gradient(145deg,#073b5b,#006daf)!important;color:#fff!important}.v34-qr-card h2{color:#fff!important;margin:8px 0}.v34-qr-card p{color:rgba(255,255,255,.76)!important;font-size:12px}.v34-qr-card img{width:150px;max-width:100%;border-radius:18px;background:#fff;padding:8px}.v34-code{font-size:22px;font-weight:900;letter-spacing:.08em;margin-top:12px}.v34-qr-card .user-eyebrow{color:#cfeeff!important;border-color:rgba(255,255,255,.24)!important}
.v34-rewards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:22px}.v34-reward{display:grid;grid-template-columns:48px 1fr auto;gap:13px;align-items:center;padding:16px 17px;border-radius:20px;background:#fff;border:1px solid #dbeaf3;box-shadow:0 10px 28px rgba(0,83,126,.07)}.v34-reward-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:#edf7fc;font-size:22px}.v34-reward b{display:block;color:#12334a}.v34-reward span{display:block;margin-top:3px;color:#718294;font-size:11px;line-height:1.45}.v34-reward em{font-style:normal;font-size:9px;font-weight:900;padding:6px 8px;border-radius:999px}.v34-reward.locked em{background:#eef2f5;color:#82909d}.v34-reward.ready{border-color:#cfe69a;background:#fbfff2}.v34-reward.ready em{background:#a2c52b;color:#fff}.v34-reward.claimed{border-color:#9fd9f4;background:#f4fbff}.v34-reward.claimed em{background:#006daf;color:#fff}
.v34-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin:28px 2px 13px}.v34-section-head h2{margin:5px 0 0;color:#11334b}.v34-journey{display:grid;gap:11px}.v34-journey-card{display:grid;grid-template-columns:48px minmax(0,1fr) 58px;gap:14px;align-items:start;padding:17px;border-radius:20px;background:#fff;border:1px solid #dbeaf3;box-shadow:0 10px 26px rgba(0,83,126,.06);color:inherit}.v34-journey-card.done{border-color:#d3e8a0;background:linear-gradient(135deg,#fbfff2,#fff)}.v34-journey-card.locked{opacity:.56}.v34-step{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#0a526b,#006daf);color:#fff;font-weight:900}.v34-journey-card.done .v34-step{background:linear-gradient(145deg,#a2c52b,#75a100)}.v34-journey-copy>div{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.v34-journey-copy h3{font-size:15px;margin:0;color:#17354a}.v34-status{white-space:nowrap;font-size:9px;font-weight:900;color:#006daf;background:#eaf6fc;padding:5px 8px;border-radius:999px}.v34-journey-card.done .v34-status{background:#edf7d3;color:#577200}.v34-journey-copy p{margin:7px 0 6px;font-size:11px;line-height:1.55;color:#6c7d8f}.v34-journey-copy small{display:block;color:#48697c;font-size:10px;font-weight:600}.v34-points{text-align:center;color:#006daf}.v34-points b{font-size:19px}.v34-points small{display:block;font-size:8px;font-weight:900}
.v34-dock{width:min(92vw,620px)!important}.v34-dock a,.v34-dock button{display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}
.v34-scanner-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:18px}.v34-scanner-card,.v34-result-card{margin:0!important}.v34-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px;border-radius:16px;background:#eef6fa;margin:15px 0}.v34-mode-switch button{border:0;border-radius:12px;padding:12px;background:transparent;color:#577084;font-weight:800;cursor:pointer}.v34-mode-switch button.active{background:#fff;color:#006daf;box-shadow:0 8px 20px rgba(0,109,175,.10)}.v34-camera{width:100%;min-height:260px;border-radius:18px;overflow:hidden;background:#0b2636;margin-bottom:12px}.v34-manual{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:16px}.v34-manual label{margin:0}.v34-result-card{min-height:390px}.v34-empty{min-height:340px;display:grid;place-items:center;align-content:center;text-align:center;color:#7890a2}.v34-empty>div{font-size:54px}.v34-empty h3{margin:8px 0 3px}.v34-empty p{margin:0}.v34-verify-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}.v34-verify-stats div{padding:15px;border-radius:16px;background:#f2f8fc;border:1px solid #dcebf4}.v34-verify-stats b{display:block;font-size:20px;color:#006daf}.v34-verify-stats span{font-size:10px;color:#728497}
@media(max-width:760px){.v34-grid-top,.v34-scanner-layout{grid-template-columns:1fr}.v34-qr-card{grid-template-columns:1fr 118px}.v34-qr-card img{width:118px}.v34-rewards{grid-template-columns:1fr}.v34-profile{padding:18px}.v34-score{width:84px;height:84px;border-radius:26px}.v34-score b{font-size:28px}.v34-journey-card{grid-template-columns:42px minmax(0,1fr)}.v34-points{grid-column:2;text-align:left}.v34-journey-copy>div{display:block}.v34-status{display:inline-flex;margin-top:6px}.v34-manual{grid-template-columns:1fr}.v34-user .user-shell{padding-left:12px!important;padding-right:12px!important}}
@media(max-width:430px){.v34-qr-card{grid-template-columns:1fr}.v34-qr-card img{width:150px;margin:auto}.v34-profile h1{font-size:26px}.v34-reward{grid-template-columns:44px 1fr}.v34-reward em{grid-column:2;justify-self:start}.v34-profile{grid-template-columns:1fr auto}}


/* ================= V35 LIGHT ENTERPRISE ================= */
body,button,input,select,textarea,table{font-family:'Poppins',Inter,system-ui,sans-serif!important;font-weight:400}
.admin-main{font-size:13px!important}
.admin-main h1{font-size:28px!important;font-weight:600!important}
.admin-main h2{font-size:18px!important;font-weight:600!important}
.admin-main h3{font-size:15px!important;font-weight:600!important}
.admin-main p,.admin-main td,.admin-main label{font-weight:400!important}
.admin-side nav a b,.btn,.pill,.badge{font-weight:500!important}
.admin-main .btn{font-size:12px!important;min-height:40px!important;padding:9px 14px!important;white-space:nowrap}
.admin-main .btn.small{min-height:34px!important;padding:7px 10px!important;font-size:11px!important}
.data-toolbar{display:grid;grid-template-columns:minmax(210px,1.6fr) repeat(5,minmax(110px,auto));gap:10px;align-items:center;margin:14px 0 18px}
.data-toolbar input,.data-toolbar select{min-height:40px!important;margin:0}
.table-wrap{overflow:auto!important}
.row-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.row-actions form{margin:0}
.pagination{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-top:16px;flex-wrap:wrap}
.pagination span{margin-right:auto;color:#708094;font-size:12px}
.pagination a{min-width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#eff7fc;border:1px solid #d8eaf5;color:#006daf;font-weight:500}
.pagination a.active{background:#006daf;color:#fff}
.dashboard-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:18px}
.dashboard-stats article{padding:18px;border-radius:20px;background:rgba(255,255,255,.92);border:1px solid #d9eaf4;box-shadow:0 12px 32px rgba(0,109,175,.08)}
.dashboard-stats span,.dashboard-stats small{display:block;color:#728196;font-size:11px}
.dashboard-stats b{display:block;font-size:30px;color:#0b527e;font-weight:600;margin:5px 0}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.settings-grid>section{padding:18px;border-radius:18px;background:#f8fcff;border:1px solid #deedf6}
.danger-zone{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px;border:1px solid #f3d0d0;background:#fff8f8;border-radius:18px}
.scanner-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:18px}
.mode-switch{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.mode-switch button{border:1px solid #d3e8f5;background:#f2f9fd;color:#006daf;border-radius:12px;padding:11px;font:500 12px Poppins;cursor:pointer}.mode-switch button.active{background:#006daf;color:#fff}
.scanner-camera{min-height:250px;border-radius:16px;background:#eaf4fa;margin-bottom:12px;overflow:hidden}.manual-form{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:12px}
.verify-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}.verify-grid>div{padding:15px;border:1px solid #dcebf4;border-radius:14px;background:#f7fbfe}.verify-grid b,.verify-grid span{display:block}.verify-grid b{font-size:20px;font-weight:600}.verify-grid span{font-size:11px;color:#728196}
.empty-state{text-align:center;padding:50px 20px;color:#748397}
.admin-main .table th{font-weight:500!important}.admin-main .table td{font-size:12px!important}
.v34-rewards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.v34-user .user-card,.v34-user .v34-profile,.v34-user .v34-reward{font-weight:400}
.v34-user h1,.v34-user h2,.v34-user b{font-weight:600!important}
.v34-user p,.v34-user span{font-weight:400}
.doorprize-client-tools{display:grid;grid-template-columns:1fr 180px 120px;gap:10px;margin:14px 0}
.doorprize-client-tools input,.doorprize-client-tools select{min-height:40px}
.admin-main form{margin-bottom:0}
@media(max-width:1100px){
 .data-toolbar{grid-template-columns:repeat(3,minmax(0,1fr))}
 .dashboard-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
 .data-toolbar{grid-template-columns:1fr 1fr}.data-toolbar input{grid-column:1/-1}
 .dashboard-stats{grid-template-columns:1fr 1fr}
 .settings-grid,.scanner-layout{grid-template-columns:1fr}
 .danger-zone{align-items:stretch;flex-direction:column}
 .manual-form{grid-template-columns:1fr}
 .v34-rewards{grid-template-columns:1fr!important}
 .doorprize-client-tools{grid-template-columns:1fr}
}
@media(max-width:480px){
 .data-toolbar{grid-template-columns:1fr}
 .dashboard-stats{grid-template-columns:1fr 1fr}
 .dashboard-stats article{padding:14px}.dashboard-stats b{font-size:24px}
}


/* ================= V36 SORT BUTTON + TABLE SPACING ================= */
.data-toolbar{
  margin:18px 0 22px!important;
  padding:14px!important;
  border:1px solid #dcebf4;
  border-radius:16px;
  background:#f8fcff;
  align-items:center!important;
}
.data-toolbar + .table-wrap{margin-top:0!important}
.table-wrap{margin-top:18px!important;margin-bottom:16px!important}
.sort-button-group{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  min-width:138px;
  padding:4px;
  border:1px solid #d4e8f4;
  border-radius:12px;
  background:#fff;
}
.sort-button-group button{
  min-height:34px;
  padding:7px 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#537087;
  font:500 11px/1.1 'Poppins',sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
.sort-button-group button.active{
  background:#006daf;
  color:#fff;
  box-shadow:0 5px 14px rgba(0,109,175,.18);
}
.sort-button-group button:hover:not(.active){background:#edf7fc;color:#006daf}
.section-title + .data-toolbar{margin-top:16px!important}
.pagination{margin-top:18px!important;margin-bottom:2px!important}
.admin-main .card>.table-wrap:first-child{margin-top:0!important}

@media(max-width:1100px){
  .data-toolbar{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .sort-button-group{width:100%;min-width:0}
}
@media(max-width:760px){
  .data-toolbar{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:9px!important;
    padding:12px!important;
    margin:14px 0 18px!important;
  }
  .data-toolbar>input[type="text"],
  .data-toolbar>input:not([type]),
  .data-toolbar>input[name="q"]{grid-column:1/-1!important}
  .data-toolbar .btn{width:100%!important}
  .sort-button-group{grid-column:auto!important}
  .table-wrap{margin-top:14px!important}
}
@media(max-width:520px){
  .data-toolbar{grid-template-columns:1fr!important}
  .data-toolbar>*{grid-column:1!important;width:100%!important;max-width:none!important}
  .sort-button-group{grid-template-columns:1fr 1fr!important}
}

/* V37 Journey action controls */
.journey-form .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.inline-action-form{display:inline-flex!important;margin:0!important}
.inline-action-form .btn{min-width:108px}
.journey-item>summary{cursor:pointer}
.journey-status.off{background:#f2f4f6!important;color:#75808c!important}
.journey-status.on{background:#edf8cb!important;color:#587300!important}
@media(max-width:640px){
  .journey-form .toolbar{display:grid;grid-template-columns:1fr 1fr}
  .journey-form .toolbar>.btn:first-child{grid-column:1/-1}
  .inline-action-form,.inline-action-form .btn{width:100%}
}

/* V38 Journey button reliability */
.journey-actions{display:grid!important;grid-template-columns:minmax(170px,1fr) minmax(130px,auto) minmax(100px,auto)!important;gap:10px!important;margin-top:18px!important;align-items:center!important}
.journey-actions .btn{width:100%!important;justify-content:center!important}
@media(max-width:680px){.journey-actions{grid-template-columns:1fr 1fr!important}.journey-actions .btn:first-child{grid-column:1/-1}}

/* V39 dedicated Journey action endpoint */
.journey-actions a.btn{text-decoration:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important}

/* V40 Theme Settings */
.theme-settings-panel{padding:18px;border:1px solid #dcebf4;background:#f8fcff;border-radius:18px}
.theme-editor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.theme-editor-grid input[type=color]{height:46px;padding:5px!important}
.theme-preview{margin-top:16px;min-height:50px;display:flex;align-items:center;justify-content:center;padding:12px 20px;background:linear-gradient(90deg,#A2C52B,#0D8BE8);color:#fff;border-radius:16px;font-weight:500}
@media(max-width:900px){.theme-editor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.theme-editor-grid{grid-template-columns:1fr}}

/* V43 WhatsApp template + recovery login */
.message-template-panel{padding:18px;border:1px solid #dcebf4;background:#f8fcff;border-radius:18px}
.message-template-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.message-template-grid textarea{min-height:190px!important;font-family:'Poppins',sans-serif!important;font-size:12px!important;line-height:1.65!important}
.message-template-panel code{background:#e8f5fc;padding:2px 6px;border-radius:6px;color:#006daf}
.recovery-card{max-width:620px!important}
.login-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:5px;background:#eef7fc;border:1px solid #d7eaf5;border-radius:14px;margin:18px 0 22px}
.login-mode-tabs a{display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:10px;color:#517088;text-decoration:none;font-size:12px;font-weight:500}
.login-mode-tabs a.active{background:#fff;color:#006daf;box-shadow:0 8px 20px rgba(0,109,175,.10)}
.recovery-form{display:grid;gap:14px}
.login-shortcuts{display:grid;gap:8px;margin-top:16px}
.user-alert.success{background:#edf9df;border:1px solid #cfe8a2;color:#446614}
@media(max-width:700px){.message-template-grid{grid-template-columns:1fr}.message-template-grid textarea{min-height:160px!important}.recovery-card{max-width:none!important}}

/* V44 Login spacing + camera scanner */
.user-login-card form{display:grid;gap:0}
.user-login-card form>label{display:block;margin-top:22px!important}
.user-login-card .code-input{margin-top:9px!important;margin-bottom:22px!important}
.user-login-card form>.btn-wide{margin-top:0!important;margin-bottom:22px!important}
.login-shortcuts{margin-top:4px!important;gap:12px!important}
.login-shortcuts .user-link{padding:4px 8px;line-height:1.45}
.qr-reader,.scanner-camera{position:relative;overflow:hidden;background:#071c2b;border-radius:18px;min-height:280px}
.qr-reader video,.scanner-camera video,#nativeQrVideo{width:100%!important;height:auto!important;min-height:280px;object-fit:cover;border-radius:18px}
.qr-reader{display:none;margin-top:14px}
.scan-status{margin-top:10px;padding:11px 13px;border-radius:12px;font-size:12px;line-height:1.5;background:#edf7fc;color:#145779;border:1px solid #cfe8f6}
.scan-status.success{background:#eef9df;color:#486a18;border-color:#d0e7a8}
.scan-status.error{background:#fff0f0;color:#a12424;border-color:#f3caca}
.scan-status.loading{background:#fff9e8;color:#785c13;border-color:#efe0a8}
.scan-retry{margin-top:10px!important}
.qr-scan-frame{position:absolute;inset:15%;border:3px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:0 0 0 999px rgba(0,0,0,.26);pointer-events:none}
#html5-qrcode-button-camera-permission,#html5-qrcode-button-camera-start,#html5-qrcode-button-camera-stop{font-family:'Poppins',sans-serif!important;border:0!important;border-radius:12px!important;padding:10px 14px!important;background:#006daf!important;color:#fff!important}
@media(max-width:600px){
 .user-login-card form>label{margin-top:18px!important}
 .user-login-card .code-input{margin-bottom:18px!important}
 .user-login-card form>.btn-wide{margin-bottom:18px!important}
 .qr-reader,.scanner-camera,.qr-reader video,.scanner-camera video,#nativeQrVideo{min-height:240px}
}

/* V45 Theme Builder */
.theme-workspace{display:grid;grid-template-columns:minmax(420px,.82fr) minmax(480px,1.18fr);gap:18px;align-items:start}
.theme-control-panel,.theme-canvas-panel{min-width:0}
.theme-control-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:5px;background:#edf7fc;border:1px solid #d7eaf5;border-radius:14px;margin:16px 0}
.theme-control-tabs button,.canvas-device-switch button{border:0;background:transparent;border-radius:10px;min-height:40px;font:500 11px Poppins;color:#56738a;cursor:pointer}
.theme-control-tabs button.active,.canvas-device-switch button.active{background:#fff;color:#006daf;box-shadow:0 7px 18px rgba(0,109,175,.1)}
.theme-control-content{display:none}.theme-control-content.active{display:block}
.theme-control-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.theme-control-grid label{padding:12px;border-radius:14px;border:1px solid #dcebf4;background:#f8fcff}
.theme-control-grid label output{float:right;color:#006daf;font-size:11px}
.theme-control-grid input[type=range]{width:100%;margin-top:11px;accent-color:#006daf}
.theme-control-grid input[type=color]{height:42px!important;padding:4px!important;margin-top:8px}
.canvas-device-switch{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;background:#edf7fc;border-radius:12px;min-width:180px}
.theme-canvas-wrap{display:grid;place-items:center;min-height:720px;padding:24px;border-radius:22px;background:#e7f2f9;overflow:auto;transition:.25s}
.theme-canvas-wrap.mobile .theme-canvas-bg{width:390px;min-height:720px}
.theme-canvas-wrap.desktop .theme-canvas-bg{width:100%;min-width:720px;min-height:650px}
.theme-canvas-bg{display:grid;place-items:center;padding:28px;background:linear-gradient(180deg,#1267a7,#064d80);border-radius:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.canvas-login-card{box-sizing:border-box;background:rgba(255,255,255,.95);border:1px solid rgba(255,255,255,.65);border-radius:26px;box-shadow:0 24px 60px rgba(0,31,60,.22);color:#102033;transition:.12s}
.canvas-logo{width:var(--preview-logo);height:var(--preview-logo);border-radius:18px;background:var(--preview-gradient);color:#fff;display:grid;place-items:center;font-size:26px;font-weight:600;margin-bottom:15px}
.canvas-eyebrow{display:inline-flex;padding:7px 11px;border:1px solid #bfe6f9;background:#eaf8ff;border-radius:999px;font-size:10px;font-weight:600;color:#006daf}
.canvas-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:18px 0 var(--preview-tabs-gap);padding:5px;border:1px solid #d7eaf5;background:#edf7fc;border-radius:13px}
.canvas-tabs span{display:grid;place-items:center;min-height:38px;font-size:10px;color:#60788b}.canvas-tabs span.active{background:#fff;border-radius:9px;color:#006daf}
.canvas-login-card h3{font-size:var(--preview-heading);line-height:1.15;margin:0 0 12px;color:#006daf}
.canvas-login-card p{font-size:12px;color:#64748b;line-height:1.55;margin:0 0 17px}
.canvas-login-card label{display:block;font-size:10px;font-weight:600;margin-bottom:7px}
.canvas-input{height:var(--preview-input-height);display:grid;place-items:center;border:1px solid #b8def3;border-radius:13px;background:#fff;font-size:24px;letter-spacing:5px;font-weight:600;color:#777}
.canvas-button{height:var(--preview-button-height);margin-top:var(--preview-input-button-gap);border-radius:var(--preview-radius);background:var(--preview-gradient);color:var(--preview-text);display:grid;place-items:center;font-size:11px;font-weight:600}
.canvas-shortcuts{display:grid;gap:var(--preview-shortcut-gap);margin-top:var(--preview-button-shortcut-gap);text-align:center;color:#00618f;font-size:11px;font-weight:600}
@media(max-width:1180px){.theme-workspace{grid-template-columns:1fr}.theme-canvas-wrap{min-height:620px}.theme-canvas-panel{order:-1}}
@media(max-width:700px){.theme-control-grid{grid-template-columns:1fr}.theme-canvas-wrap{padding:12px;min-height:560px}.theme-canvas-wrap.mobile .theme-canvas-bg{width:100%;min-height:560px}.theme-canvas-wrap.desktop .theme-canvas-bg{min-width:650px}.theme-workspace{display:block}.theme-control-panel{margin-top:16px}}

/* V46 User Panel Themes, Games Manager, Reward Limits */
.canvas-device-switch{grid-template-columns:repeat(3,1fr)!important}.theme-control-tabs{grid-template-columns:repeat(4,1fr)!important}
.canvas-user-panel{width:min(var(--up-shell),94%);color:#102033}.canvas-user-header,.canvas-user-profile,.canvas-user-card,.canvas-user-journey>div{background:#fff;border:1px solid #dcebf4;border-radius:var(--up-radius);box-shadow:0 12px 30px rgba(0,109,175,.08)}
.canvas-user-header{display:flex;justify-content:space-between;padding:14px 18px;margin-bottom:var(--up-gap)}.canvas-user-profile{display:flex;justify-content:space-between;align-items:center;padding:var(--up-pad);margin-bottom:var(--up-gap)}.canvas-user-profile h3{margin:4px 0;color:#006daf}.canvas-user-profile p{margin:0}.canvas-user-score{width:var(--up-score);height:var(--up-score);border-radius:50%;display:grid;place-items:center;background:var(--preview-gradient);color:#fff;font-size:24px}.canvas-user-score small{display:block;font-size:9px}.canvas-user-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--up-gap)}.canvas-user-card{padding:18px}.canvas-progress{height:9px;background:#e8eef2;border-radius:99px;margin:14px 0}.canvas-progress i{display:block;width:55%;height:100%;background:var(--preview-gradient);border-radius:inherit}.canvas-user-card button{width:100%;height:42px;border:0;border-radius:14px;background:var(--preview-gradient);color:#fff}.canvas-qr{height:90px;display:grid;place-items:center;background:#eef7fc;border-radius:12px}.canvas-user-journey{display:grid;gap:var(--up-journey-gap);margin-top:var(--up-gap)}.canvas-user-journey>div{display:flex;align-items:center;gap:12px;padding:14px}.canvas-user-journey span{width:34px;height:34px;border-radius:10px;background:var(--preview-gradient);color:#fff;display:grid;place-items:center}
.games-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.game-admin-card{min-width:0}.enterprise-form{display:grid;gap:15px}.game-image-preview{max-width:320px;border-radius:16px;overflow:hidden;border:1px solid #dcebf4}.game-image-preview img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}.reward-limit-panel{padding:18px;border:1px solid #dcebf4;background:#f8fcff;border-radius:18px}.limit-example{padding:13px 15px;margin-top:14px;background:#fff8df;border:1px solid #efe0a5;border-radius:13px;color:#765b16}.enterprise-modal{position:fixed;inset:0;background:rgba(4,28,48,.62);display:grid;place-items:center;padding:18px;z-index:99999}.enterprise-modal-card{width:min(420px,100%);padding:26px;background:#fff;border-radius:22px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.3)}.modal-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;background:#fff0f0;color:#b42318;font-size:28px;font-weight:700}.enterprise-modal-card h3{margin:0 0 8px}.enterprise-modal-card p{color:#64748b;line-height:1.6}
.souvenir-quota-card{margin-top:18px}.souvenir-quota-create{display:grid;grid-template-columns:minmax(180px,1fr) minmax(160px,1fr) auto;gap:12px;align-items:end;margin:16px 0}.souvenir-quota-create label{margin:0}.souvenir-quota-card td input{min-width:145px}.souvenir-quota-card .quota-empty{background:#fff0f0;color:#b42318}@media(max-width:720px){.souvenir-quota-create{grid-template-columns:1fr}.souvenir-quota-create .btn{width:100%}}
@media(max-width:980px){.games-admin-grid{grid-template-columns:1fr}}@media(max-width:700px){.canvas-user-grid{grid-template-columns:1fr}.theme-control-tabs{grid-template-columns:1fr 1fr!important}.canvas-device-switch{grid-template-columns:1fr!important}.canvas-user-panel{width:100%}}

/* V47 Free Explore + Normal Camera */
.v34-journey-card.locked{opacity:1!important;filter:none!important;pointer-events:auto!important}
.v34-journey-card.locked .v34-status{background:#eef7fc!important;color:#006daf!important}
.qr-reader video,.scanner-camera video,#nativeQrVideo{object-fit:contain!important;object-position:center!important;transform:none!important;zoom:1!important}
.qr-reader,.scanner-camera{background:#06131d!important}
.qr-reader #qr-shaded-region,.scanner-camera #qr-shaded-region{border-width:0!important}
@media(max-width:600px){.qr-reader video,.scanner-camera video,#nativeQrVideo{min-height:220px!important;max-height:420px!important}}
.free-explore-note{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px;border:1px solid #cfe7f4;background:linear-gradient(135deg,#f4fbff,#edf8db);border-radius:18px}
.free-explore-note h3{margin:0 0 5px}.free-explore-note p{margin:0}
@media(max-width:620px){.free-explore-note{align-items:flex-start;flex-direction:column}}

/* V48 Camera Device Selector */
.camera-picker{margin:14px 0;padding:14px;border:1px solid #d6e9f4;background:#f6fbfe;border-radius:16px}
.camera-picker>label{display:block;margin-bottom:8px;font-size:12px;font-weight:600;color:#17364a}
.camera-picker-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center}
.camera-picker-row select{width:100%;min-height:46px;margin:0!important;background:#fff}
.camera-picker-row .camera-refresh{min-height:46px;padding:0 14px!important;white-space:nowrap}
.camera-picker small{display:block;margin-top:8px;color:#6c8291;line-height:1.45}
.qr-reader video,.scanner-camera video,#nativeQrVideo{
 width:100%!important;
 height:auto!important;
 object-fit:contain!important;
 object-position:center!important;
 transform:none!important;
 scale:1!important;
}
@media(max-width:520px){
 .camera-picker-row{grid-template-columns:1fr}
 .camera-picker-row .camera-refresh{width:100%}
}

/* V49 Enterprise extensions */
.admin-logo img{width:42px;height:42px;object-fit:contain;border-radius:12px}.announcement-stack{margin-bottom:18px}.announcement-card{padding:14px;border-radius:15px;background:rgba(240,249,255,.78);border:1px solid #d5eaf5;margin-top:10px}.announcement-card p{margin:6px 0}.checkpoint-admin-list{display:grid;gap:10px}.checkpoint-admin-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid #dcebf4;border-radius:14px;background:#f8fcff}.checkpoint-admin-row small{display:block;color:#6b7f8d;margin-top:3px}@media(max-width:700px){.checkpoint-admin-row{align-items:stretch;flex-direction:column}.checkpoint-admin-row .btn{width:100%}.theme-control-tabs{grid-template-columns:repeat(2,1fr)!important}}

/* V50 QR + Message Wall */
.qr-message-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:18px;align-items:stretch}
.compact-qr-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:4px}
.compact-qr-panel img{display:block;max-width:100%;border-radius:16px;background:#fff;padding:8px}
.message-wall-form-panel{padding:18px;border-radius:18px;background:rgba(245,251,255,.78);border:1px solid #d8ebf6}
.message-wall-form-panel h2{margin:8px 0 5px}.message-wall-form-panel p{margin:0 0 13px}
.message-wall-form-panel textarea{width:100%;resize:vertical;min-height:100px}
.emoji-picker{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.emoji-picker button{width:38px;height:38px;border-radius:12px;border:1px solid #d7eaf5;background:#fff;font-size:20px;cursor:pointer}
.emoji-picker button.active{border-color:#006daf;box-shadow:0 0 0 3px rgba(0,109,175,.12)}
.message-form-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}.message-form-foot .btn{min-width:140px}
.wall-admin-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr);gap:18px;margin-bottom:18px}
.wall-mini-preview{min-height:280px;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:linear-gradient(135deg,rgba(162,197,43,.75),rgba(13,139,232,.78));color:#fff;backdrop-filter:blur(14px)}
.wall-mini-preview span{font-size:54px}.wall-mini-preview b{font-size:22px;max-width:260px}.wall-mini-preview small{margin-top:10px;opacity:.8}
@media(max-width:900px){.qr-message-grid,.wall-admin-grid{grid-template-columns:1fr}.compact-qr-panel{grid-template-columns:1fr auto}}
@media(max-width:560px){.compact-qr-panel{grid-template-columns:1fr;text-align:center}.compact-qr-panel img{margin:auto}.message-form-foot{align-items:stretch;flex-direction:column}.message-form-foot .btn{width:100%}.emoji-picker{justify-content:center}}

/* ================= V51 MESSAGE WALL ADMIN REFINEMENT ================= */
.admin-main .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:42px!important;
  padding:10px 16px!important;
  border-radius:12px!important;
  line-height:1.2!important;
}
.admin-main .btn.small{min-height:34px!important;padding:7px 11px!important}
.admin-main .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.section-kicker{display:block;margin-bottom:5px;font-size:10px;font-weight:600;letter-spacing:.12em;color:#0b83c7}
.wall-admin-grid{
  grid-template-columns:minmax(0,1.45fr) minmax(320px,.55fr)!important;
  gap:20px!important;
  align-items:start!important;
}
.wall-settings-card,.wall-preview-card,.wall-moderation-card{padding:22px!important}
.wall-title-row{align-items:flex-start!important;gap:18px!important;margin-bottom:18px!important}
.wall-title-row h2{margin:0 0 6px!important}
.wall-title-row p{margin:0!important;max-width:760px}
.wall-open-screen{flex:0 0 auto}
.wall-setting-section{
  padding:18px;
  border:1px solid #dbeaf3;
  border-radius:18px;
  background:linear-gradient(180deg,#fbfdff,#f5faff);
  margin-bottom:14px;
}
.wall-setting-head{display:flex;justify-content:space-between;gap:14px;margin-bottom:14px}
.wall-setting-head h3{margin:0 0 4px!important;font-size:14px!important}
.wall-setting-head p{margin:0;color:#74869a;font-size:11px;line-height:1.5}
.wall-control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wall-control-grid label,.wall-upload-grid label{display:block;margin:0!important}
.wall-control-grid label>span,.upload-box>span{display:block;margin-bottom:7px;color:#50667b;font-size:11px;font-weight:500}
.wall-control-grid input,.wall-control-grid select{margin:0!important;min-height:44px!important}
.input-with-unit{position:relative}
.input-with-unit input{padding-right:46px!important}
.input-with-unit em{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;font-size:11px;color:#8090a1}
.color-control input[type=color]{
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  padding:5px!important;
  border-radius:12px!important;
  background:#fff!important;
}
.wall-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.upload-box{
  padding:14px!important;
  border:1px dashed #bcd8e8!important;
  border-radius:15px!important;
  background:#fff!important;
}
.upload-box small{display:block;margin:-3px 0 10px;color:#8796a5;font-size:10px}
.upload-box input[type=file]{width:100%;margin:0!important;padding:7px!important;background:#f7fbfe;border-radius:10px}
.wall-option-panel{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:16px 0;
}
.wall-option-panel .check-line{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  min-height:78px;
  padding:13px!important;
  border:1px solid #dcebf4;
  border-radius:14px;
  background:#f8fcff;
}
.wall-option-panel .check-line input{margin-top:3px!important}
.wall-option-panel .check-line span{display:block}
.wall-option-panel .check-line b{display:block;margin-bottom:3px;font-size:11px;color:#17364a}
.wall-option-panel .check-line small{display:block;font-size:10px;line-height:1.45;color:#718497}
.wall-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding-top:2px}
.wall-preview-card{position:sticky;top:18px}
.wall-preview-card .section-title{margin-bottom:14px!important}
.wall-mini-preview{min-height:300px!important;border-radius:20px!important}
.wall-preview-meta{display:flex;gap:7px;flex-wrap:wrap;margin:13px 0}
.wall-preview-meta span{padding:6px 9px;border-radius:999px;background:#eef7fc;color:#1775a7;font-size:10px;font-weight:500}
.wall-filter-toolbar{
  grid-template-columns:minmax(260px,1fr) 170px auto!important;
  gap:10px!important;
  margin:16px 0 18px!important;
  padding:12px!important;
}
.wall-filter-toolbar>*{margin:0!important}
.wall-moderation-card .table-wrap{margin-top:0!important}
.wall-moderation-card .row-actions{justify-content:flex-start}
.wall-moderation-card .row-actions .btn{min-width:76px}
@media(max-width:1200px){
  .wall-admin-grid{grid-template-columns:1fr!important}
  .wall-preview-card{position:static}
  .wall-mini-preview{min-height:260px!important}
}
@media(max-width:820px){
  .wall-control-grid,.wall-upload-grid{grid-template-columns:1fr}
  .wall-option-panel{grid-template-columns:1fr}
  .wall-form-actions{justify-content:stretch}
  .wall-form-actions .btn{flex:1}
  .wall-filter-toolbar{grid-template-columns:1fr 1fr!important}
  .wall-filter-toolbar input{grid-column:1/-1}
}
@media(max-width:560px){
  .wall-settings-card,.wall-preview-card,.wall-moderation-card{padding:15px!important}
  .wall-title-row{flex-direction:column!important;align-items:stretch!important}
  .wall-title-row .btn,.wall-title-row form,.wall-title-row form .btn{width:100%!important}
  .wall-setting-section{padding:14px}
  .wall-form-actions{flex-direction:column}
  .wall-form-actions .btn{width:100%!important}
  .wall-filter-toolbar{grid-template-columns:1fr!important}
  .wall-filter-toolbar>*{grid-column:1!important;width:100%!important}
  .admin-main .table{min-width:760px}
}

/* ================= V52 ADMIN FIRST-REFERENCE THEME ================= */
:root{
 --admin-navy:#0b2f57;
 --admin-navy-2:#0c497d;
 --admin-blue:#1677ea;
 --admin-blue-soft:#eaf3ff;
 --admin-surface:#ffffff;
 --admin-bg:#f5f8fc;
 --admin-line:#e3eaf3;
 --admin-text:#0f172a;
 --admin-muted:#66758a;
}
.admin-shell{grid-template-columns:276px minmax(0,1fr)!important;background:var(--admin-bg)!important}
.admin-side{
 background:linear-gradient(180deg,#173a60 0%,#0d5f9f 100%)!important;
 border-right:0!important;
 padding:0!important;
 gap:0!important;
 box-shadow:12px 0 34px rgba(12,47,87,.12);
 color:#fff;
 z-index:120;
}
.admin-logo{min-height:74px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.12)!important;gap:11px!important}
.admin-logo img,.admin-logo>span{width:40px!important;height:40px!important;border-radius:12px!important;background:linear-gradient(135deg,#f4b52c,#8dd34f)!important}
.admin-logo b{font-size:17px!important;color:#fff!important;line-height:1.1}
.admin-logo small{color:rgba(255,255,255,.72)!important;font-size:10px!important;margin-top:2px!important}
.side-collapse{margin-left:auto;width:34px;height:34px;display:grid;place-content:center;gap:4px;border:0;border-radius:9px;background:rgba(255,255,255,.92);cursor:pointer}
.side-collapse span{display:block;width:15px;height:2px;border-radius:2px;background:#0c5793}
.admin-nav{display:block!important;overflow-y:auto;padding:10px 12px 14px!important;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.nav-group{padding:6px 0 8px;border-bottom:1px solid rgba(255,255,255,.09)}
.nav-group:last-child{border-bottom:0}
.nav-group-title{display:block;padding:6px 9px 5px;font-size:8px;font-weight:600;letter-spacing:.08em;color:rgba(210,231,249,.7)}
.admin-side nav a{
 display:flex!important;align-items:center;gap:11px;
 min-height:48px;padding:9px 10px!important;margin:2px 0!important;
 border-radius:11px!important;border:1px solid transparent!important;color:#fff!important;
}
.admin-side nav a:hover{background:rgba(255,255,255,.10)!important}
.admin-side nav a.active{
 background:linear-gradient(135deg,#2483f5,#4099ff)!important;
 border-color:rgba(255,255,255,.18)!important;
 box-shadow:0 10px 24px rgba(0,48,110,.24)!important;
}
.nav-icon{width:22px;height:22px;display:grid;place-items:center;flex:0 0 22px}
.nav-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-copy{min-width:0;display:block}.nav-copy b{display:block;color:inherit!important;font-size:11px!important;font-weight:600!important;line-height:1.25}
.nav-copy small{display:block!important;color:rgba(223,238,250,.72)!important;font-size:9px!important;line-height:1.3;margin-top:2px!important;white-space:normal}
.side-foot{padding:10px 14px 14px!important;gap:7px!important;background:rgba(5,34,65,.12)}
.side-foot a{display:flex!important;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:8px 10px!important;border-radius:9px!important;background:#fff!important;color:#163b60!important;font-size:10px!important;font-weight:600!important}
.side-foot a.logout-link{background:#fff0f0!important;color:#d34b4b!important}
.admin-main{padding:22px 28px 34px!important;background:var(--admin-bg)!important;overflow:visible!important}
.admin-top{
 align-items:center!important;margin:-22px -28px 20px!important;padding:18px 28px!important;
 background:rgba(255,255,255,.94)!important;border-bottom:1px solid var(--admin-line)!important;
 position:sticky!important;top:0!important;z-index:80!important;backdrop-filter:blur(14px);
}
.admin-top small{font-size:9px!important;letter-spacing:.06em!important;color:#75859a!important}
.admin-top h1{font-size:25px!important;line-height:1.15!important;color:var(--admin-text)!important;margin:3px 0 0!important}
.admin-top .toolbar{gap:9px!important}.admin-top .btn{min-height:40px!important;padding:9px 14px!important;border-radius:9px!important;font-size:10px!important}
.admin-main .card{border-radius:16px!important;border:1px solid var(--admin-line)!important;box-shadow:0 8px 26px rgba(28,55,87,.055)!important;padding:18px!important}
.admin-main h2{font-size:16px!important}.admin-main h3{font-size:13px!important}
.admin-main p,.admin-main .muted{font-size:10px!important;line-height:1.55!important}
.admin-main input,.admin-main select,.admin-main textarea{min-height:42px!important;border-radius:9px!important;border-color:#dce6f0!important;font-size:11px!important}
.admin-main .btn{border-radius:9px!important;font-size:10px!important;font-weight:600!important;min-height:40px!important;padding:9px 14px!important}
.admin-main .btn.ghost{background:#fff!important;color:#194366!important;border:1px solid #dce6ef!important}
.admin-mobile-bar{display:none}
.admin-side-overlay{display:none}

/* Theme page matching first reference */
.theme-workspace{grid-template-columns:minmax(410px,.72fr) minmax(520px,1.28fr)!important;gap:16px!important}
.theme-control-panel,.theme-canvas-panel{border-radius:16px!important}
.theme-control-tabs{grid-template-columns:repeat(4,minmax(110px,1fr))!important;background:#fff!important;border:1px solid var(--admin-line)!important;padding:10px!important;gap:8px!important}
.theme-control-tabs button{border:1px solid var(--admin-line)!important;background:#fff!important;min-height:40px!important;font-size:10px!important}
.theme-control-tabs button.active{background:var(--admin-blue)!important;color:#fff!important;border-color:var(--admin-blue)!important}
.theme-control-grid label{border-radius:11px!important;padding:11px!important;background:#fbfdff!important}
.theme-control-content{animation:adminFade .16s ease}
@keyframes adminFade{from{opacity:.2;transform:translateY(3px)}to{opacity:1;transform:none}}
.theme-font-color-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.theme-color-card{border:1px solid var(--admin-line);border-radius:14px;overflow:hidden;background:#fff}
.theme-color-card-head{padding:14px;border-bottom:1px solid var(--admin-line)}.theme-color-card-head h3{margin:0 0 4px;color:#0876df!important}.theme-color-card-head p{margin:0}
.theme-color-list{padding:6px 14px}
.theme-color-list label{display:grid!important;grid-template-columns:minmax(0,1fr) 112px;align-items:center;gap:10px;min-height:40px;border-bottom:1px solid #edf1f6;font-size:10px!important;font-weight:500!important}
.theme-color-list label:last-child{border-bottom:0}
.theme-color-list input[type=color]{width:100%!important;height:30px!important;padding:4px!important;border-radius:8px!important}
.theme-font-preview{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.theme-font-preview>div{padding:16px;border:1px solid var(--admin-line);border-radius:14px;background:#fff}
.theme-font-preview h2{margin:8px 0 4px!important}.theme-font-preview p{margin:0 0 12px}.theme-font-preview label{font-size:9px!important}
.preview-input{padding:10px;border:1px solid var(--admin-line);border-radius:8px;color:#97a4b4;font-size:10px;margin:6px 0 9px}
.theme-font-preview button{width:100%;height:35px;border:0;border-radius:7px;background:#0878ed;color:#fff;font:600 10px Poppins}
.preview-progress{position:relative;padding:12px;border:1px solid var(--admin-line);border-radius:10px;margin-top:12px}.preview-progress span{float:right;color:#0878ed;font-weight:700}.preview-progress i{display:block;height:5px;width:50%;margin-top:10px;border-radius:5px;background:#278cf3}

@media(max-width:1180px){
 .theme-workspace{grid-template-columns:1fr!important}
}
@media(max-width:900px){
 .admin-shell{display:block!important}
 .admin-side{
  position:fixed!important;left:-290px!important;top:0!important;width:276px!important;height:100dvh!important;
  transition:left .22s ease!important;
 }
 .admin-side-open .admin-side{left:0!important}
 .admin-side-overlay{display:block;position:fixed;inset:0;background:rgba(4,20,38,.48);z-index:110;opacity:0;pointer-events:none;transition:.2s}
 .admin-side-open .admin-side-overlay{opacity:1;pointer-events:auto}
 .admin-main{padding:16px!important}
 .admin-top{margin:-16px -16px 16px!important;padding:14px 16px!important;top:48px!important}
 .admin-mobile-bar{display:flex;position:sticky;top:0;z-index:90;margin:-16px -16px 16px;padding:9px 14px;min-height:48px;align-items:center;gap:10px;background:#123f68;color:#fff}
 .admin-mobile-bar button{width:34px;height:34px;border:0;border-radius:8px;background:#fff;color:#17639d;display:grid;place-items:center}
 .admin-mobile-bar button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
 .theme-font-color-layout,.theme-font-preview{grid-template-columns:1fr}
}
@media(max-width:620px){
 .admin-top{align-items:stretch!important;flex-direction:column!important}
 .admin-top .toolbar{display:grid!important;grid-template-columns:1fr 1fr!important}
 .admin-top .toolbar .btn{width:100%!important}
 .admin-main .card{padding:14px!important}
 .theme-control-tabs{grid-template-columns:1fr 1fr!important}
 .theme-workspace{display:block!important}
 .theme-canvas-panel{margin-top:14px!important}
 .theme-color-list label{grid-template-columns:1fr 84px}
}

/* ================= V53 USER PANEL OPTION 1 + HAMBURGER ================= */
.v34-user{
  --v53-blue:#1677ea;
  --v53-blue-dark:#0b5fc0;
  --v53-line:#dfe9f4;
  --v53-muted:#68788d;
}
.v53-user-header .user-top-inner{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px}
.v53-header-brand{text-align:left}.v53-header-brand b{display:block}.v53-header-brand small{display:block}
.v53-hamburger,.v53-notification{
  width:40px;height:40px;border:1px solid rgba(18,76,126,.13);border-radius:12px;background:rgba(255,255,255,.84);
  color:#0c4778;display:grid;place-content:center;cursor:pointer;position:relative;
}
.v53-hamburger{gap:4px}.v53-hamburger span{display:block;width:18px;height:2px;border-radius:4px;background:currentColor}
.v53-notification{font-size:18px}.v53-notification span{position:absolute;right:-4px;top:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#e54747;color:#fff;font-size:9px;display:grid;place-items:center}
.v53-menu-overlay{position:fixed;inset:0;background:rgba(5,25,44,.46);z-index:198;opacity:0;pointer-events:none;transition:.2s}
.v53-user-menu{
  position:fixed;left:-330px;top:0;bottom:0;width:min(320px,86vw);z-index:199;padding:18px;
  background:linear-gradient(180deg,#123e69,#0867a7);color:#fff;box-shadow:24px 0 60px rgba(2,26,48,.24);transition:left .24s ease;
  display:flex;flex-direction:column;
}
.v53-menu-open{overflow:hidden}.v53-menu-open .v53-menu-overlay{opacity:1;pointer-events:auto}.v53-menu-open .v53-user-menu{left:0}
.v53-menu-head{display:grid;grid-template-columns:46px minmax(0,1fr) 34px;align-items:center;gap:10px;padding:5px 2px 18px;border-bottom:1px solid rgba(255,255,255,.14)}
.v53-menu-avatar,.v53-avatar{display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#dff0ff,#fff);color:#1677ea;font-weight:700}
.v53-menu-avatar{width:46px;height:46px}.v53-menu-head b{display:block;color:#fff!important}.v53-menu-head small{color:rgba(255,255,255,.7)!important}
.v53-menu-head button{width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.14);color:#fff;font-size:24px}
.v53-user-menu nav{display:grid;gap:6px;padding:18px 0}
.v53-user-menu nav a,.v53-user-menu nav button{
  display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;width:100%;padding:11px 12px;border:0;border-radius:12px;
  background:transparent;color:#fff;text-align:left;font:inherit;cursor:pointer;
}
.v53-user-menu nav a.active,.v53-user-menu nav a:hover,.v53-user-menu nav button:hover{background:rgba(255,255,255,.13)}
.v53-user-menu nav>*>span{font-size:19px;text-align:center}.v53-user-menu nav b{display:block;color:#fff!important;font-size:12px}.v53-user-menu nav small{display:block;color:rgba(255,255,255,.68)!important;font-size:10px;margin-top:2px}
.v53-menu-logout{margin-top:auto;display:grid;place-items:center;min-height:44px;border-radius:12px;background:#fff0f0;color:#c84545;font-weight:600}

.v53-profile-card{
  padding:22px;border:1px solid var(--v53-line);border-radius:26px;background:rgba(255,255,255,.94);
  box-shadow:0 18px 48px rgba(26,76,123,.09);backdrop-filter:blur(16px);
}
.v53-profile-main{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:16px}
.v53-avatar{width:72px;height:72px;font-size:30px;border:1px solid #d6e8f8}
.v53-profile-copy h1{margin:6px 0 2px!important}.v53-profile-copy p{margin:0!important}
.v53-profile-progress{margin-top:18px;padding-top:15px;border-top:1px solid #e7eef6}
.v53-primary-grid{display:grid;grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr);gap:18px;margin-top:18px}
.v53-primary-grid>.user-card{margin:0!important;min-width:0}
.v53-card-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.v53-card-title small{color:var(--v53-muted)!important;font-size:10px!important;text-align:right}
.v53-qr-card{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.v53-qr-card .v53-card-title{width:100%;text-align:left}.v53-qr-card img{width:min(210px,72%);aspect-ratio:1;object-fit:contain;padding:8px;border-radius:18px;background:#fff;border:1px solid #e0e9f2}
.v53-qr-card .v34-code{margin-top:10px}.v53-qr-card p{margin:5px auto 0!important;max-width:260px}
.v53-scanner-card{display:flex;flex-direction:column}
.v53-camera-preview{
  display:block!important;min-height:250px!important;margin:0 0 12px!important;border-radius:18px!important;background:linear-gradient(135deg,#313842,#111820)!important;
  overflow:hidden;position:relative;
}
.v53-camera-placeholder{position:absolute;inset:0;display:grid;place-content:center;text-align:center;color:#fff;opacity:.75;pointer-events:none}
.v53-camera-placeholder span{font-size:35px}.v53-camera-placeholder small{display:block;margin-top:5px;color:#fff!important}
.v53-scanner-card #reader video{object-fit:contain!important}
.v53-camera-picker{margin:0 0 12px!important;padding:0!important;border:0!important;background:transparent!important}
.v53-camera-picker>label{margin-bottom:6px}
.v53-reward-message-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:18px;margin-top:18px}
.v53-reward-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v53-reward-grid .v34-reward{margin:0!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;min-height:178px;padding:16px!important}
.v53-reward-grid .v34-reward-icon{margin-bottom:10px}.v53-reward-grid .v34-reward>div:nth-child(2){display:grid;gap:4px}.v53-reward-grid .v34-reward em{margin-top:auto}
.v53-message-panel{margin:0!important;padding:18px!important;display:flex;flex-direction:column}
.v53-message-panel form{display:flex;flex-direction:column;flex:1}.v53-message-panel textarea{flex:1;min-height:88px}
.v53-message-panel .emoji-picker{gap:6px}.v53-message-panel .emoji-picker button{width:34px;height:34px;font-size:17px}
.v34-section-head{margin-top:22px!important}
.v34-journey{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
.v34-journey-card{min-height:96px!important;padding:14px!important;grid-template-columns:38px minmax(0,1fr) auto!important}
.v34-step{width:34px!important;height:34px!important}.v34-journey-copy p{display:none!important}.v34-journey-copy small{display:none!important}
.v34-journey-copy>div{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:10px}.v34-journey-copy h3{font-size:12px!important;margin:0!important}.v34-status{white-space:nowrap!important;font-size:9px!important}
.v34-points b{font-size:15px!important}.v34-points small{font-size:7px!important}
.v34-dock{max-width:720px!important;left:50%!important;transform:translateX(-50%)!important;border-radius:18px 18px 0 0!important}

@media(max-width:760px){
  .v53-header-brand{text-align:center}
  .v53-profile-card{padding:16px;border-radius:22px}
  .v53-profile-main{grid-template-columns:58px minmax(0,1fr) auto;gap:11px}
  .v53-avatar{width:58px;height:58px;font-size:24px}
  .v53-profile-copy h1{font-size:24px!important}
  .v53-profile-copy p{font-size:11px!important}
  .v53-profile-card .v34-score{width:78px!important;height:78px!important}
  .v53-primary-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:10px}
  .v53-primary-grid>.user-card{padding:13px!important;border-radius:20px!important}
  .v53-card-title{display:block;margin-bottom:10px}.v53-card-title small{display:block;text-align:left;margin-top:3px}
  .v53-qr-card img{width:min(150px,88%);border-radius:13px;padding:5px}.v53-qr-card p{font-size:9px!important}.v53-qr-card .v34-code{font-size:16px!important}
  .v53-camera-preview{min-height:190px!important;border-radius:14px!important}
  .v53-camera-picker .camera-picker-row{grid-template-columns:1fr!important}.v53-camera-picker .camera-refresh{width:100%!important}
  .v53-reward-message-grid{grid-template-columns:1fr;margin-top:12px;gap:12px}
  .v53-reward-grid{gap:8px}.v53-reward-grid .v34-reward{min-height:145px;padding:12px!important}.v53-reward-grid .v34-reward span{font-size:8px!important}.v53-reward-grid .v34-reward b{font-size:11px!important}
  .v53-message-panel{padding:14px!important}
  .v34-journey{grid-template-columns:1fr!important}.v34-journey-card{min-height:82px!important}
}
@media(max-width:520px){
  .v53-profile-main{grid-template-columns:54px minmax(0,1fr) 68px}.v53-avatar{width:54px;height:54px}
  .v53-profile-copy .user-eyebrow{display:none}.v53-profile-copy h1{font-size:21px!important}.v53-profile-card .v34-score{width:66px!important;height:66px!important}
  .v53-primary-grid{grid-template-columns:1fr!important}
  .v53-qr-card{display:grid!important;grid-template-columns:minmax(0,1fr) 124px;align-items:center;text-align:left}
  .v53-qr-card .v53-card-title{grid-column:1/-1}.v53-qr-card img{grid-column:2;grid-row:2/5;width:118px}.v53-qr-card .v34-code{grid-column:1;grid-row:2;margin:0}.v53-qr-card p{grid-column:1;grid-row:3;margin-top:6px!important}
  .v53-camera-preview{min-height:210px!important}
  .v53-reward-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .v53-reward-grid .v34-reward{min-height:125px;text-align:center;align-items:center!important}.v53-reward-grid .v34-reward-icon{margin:auto auto 8px}.v53-reward-grid .v34-reward em{font-size:7px!important}
}

/* ================= V54 JOURNEY SPLIT + USER PANEL COMPACT ================= */
.journey-two-column{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(380px,.75fr);gap:18px;align-items:start}
.journey-flow-card,.journey-add-card{margin:0!important;min-width:0}
.journey-add-card{position:sticky;top:96px}
.journey-add-card .journey-form{display:grid;gap:12px}
.journey-add-card .form-row{grid-template-columns:1fr 1fr!important}
.journey-add-card .form-row label:last-child:nth-child(3){grid-column:1/-1}
.journey-add-card textarea{min-height:92px!important}
.journey-add-card .btn[type=submit]{width:100%;margin-top:4px}
.journey-flow-card .journey-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.journey-flow-card .journey-item{margin:0!important;min-width:0}
.journey-flow-card .journey-item[open]{grid-column:1/-1}
.journey-flow-card .journey-item summary{min-height:76px}
.v34-user{padding-bottom:82px!important}
.v34-user .v34-shell{padding-bottom:10px!important}
.v34-user .v34-shell>:last-child{margin-bottom:0!important}
.v34-user .v53-qr-card{min-height:300px}
.wa-media-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.wa-media-card{display:grid;gap:10px;padding:14px;border:1px solid #dbeaf3;border-radius:15px;background:#f8fcff}
.wa-media-card h4{margin:0 0 3px}.wa-media-card p{margin:0}.wa-media-card img{width:100%;max-height:210px;object-fit:contain;border-radius:12px;background:#fff;border:1px solid #e2eaf2}
.wa-media-card input[type=file]{width:100%}
.wa-param-field{display:block;margin-top:14px;padding:14px;border:1px solid #dbeaf3;border-radius:14px;background:#fff}
.wa-param-field small{display:block;margin-top:6px;color:#718397}
@media(max-width:1180px){
 .journey-two-column{grid-template-columns:1fr}
 .journey-add-card{position:static}
}
@media(max-width:760px){
 .journey-flow-card .journey-list{grid-template-columns:1fr}
 .journey-flow-card .journey-item[open]{grid-column:auto}
 .journey-add-card .form-row{grid-template-columns:1fr!important}
 .journey-add-card .form-row label{grid-column:auto!important}
 .wa-media-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
 .v34-user .v53-qr-card{min-height:auto}
}

/* ================= V55 USER PANEL DOCK + PAGE HEIGHT FIX ================= */
.v34-user{
 min-height:100dvh!important;
 padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;
}
.v34-user .v34-shell{
 min-height:0!important;
 height:auto!important;
 padding-bottom:18px!important;
 margin-bottom:0!important;
}
.v34-user .v34-dock{
 display:grid!important;
 position:fixed!important;
 left:50%!important;
 right:auto!important;
 bottom:max(10px,env(safe-area-inset-bottom))!important;
 width:min(720px,calc(100vw - 24px))!important;
 max-width:720px!important;
 transform:translateX(-50%)!important;
 grid-template-columns:1fr 1.15fr 1fr!important;
 gap:8px!important;
 padding:8px!important;
 margin:0!important;
 z-index:180!important;
 border-radius:18px!important;
 background:rgba(255,255,255,.93)!important;
 border:1px solid rgba(188,218,236,.76)!important;
 box-shadow:0 16px 42px rgba(8,49,83,.20)!important;
 backdrop-filter:blur(18px)!important;
}
.v34-user .v34-dock a,
.v34-user .v34-dock button{
 min-width:0!important;
 min-height:52px!important;
 height:52px!important;
 margin:0!important;
 padding:8px 10px!important;
 border-radius:14px!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 text-align:center!important;
 line-height:1.15!important;
 font-weight:700!important;
 white-space:nowrap!important;
}
.v34-user .v34-dock a{text-decoration:none!important}
.v34-user .v34-shell>:last-child{margin-bottom:0!important}
.v34-user .v34-journey{margin-bottom:0!important}
@media(min-width:901px){
 .v34-user .v34-dock{bottom:18px!important}
 .v34-user{padding-bottom:112px!important}
}
@media(max-width:620px){
 .v34-user{padding-bottom:calc(92px + env(safe-area-inset-bottom))!important}
 .v34-user .v34-shell{padding-bottom:8px!important}
 .v34-user .v34-dock{
  width:calc(100vw - 20px)!important;
  bottom:max(8px,env(safe-area-inset-bottom))!important;
  gap:6px!important;
  padding:7px!important;
  border-radius:17px!important;
 }
 .v34-user .v34-dock a,.v34-user .v34-dock button{
  min-height:50px!important;height:50px!important;font-size:14px!important;padding:6px!important;
 }
}

/* ================= V56 MOBILE USER SCROLL BOUNDARY FIX ================= */
/* Jadikan body User Panel sebagai satu-satunya scroll container.
   Ini mencegah halaman terus tertarik ke area putih setelah konten berakhir. */
html:has(body.v34-user){
 height:100%!important;
 min-height:100%!important;
 overflow:hidden!important;
 overscroll-behavior:none!important;
 background:#edf5fa!important;
}
body.v34-user{
 height:100%!important;
 min-height:0!important;
 max-height:100dvh!important;
 overflow-x:hidden!important;
 overflow-y:auto!important;
 overscroll-behavior-y:none!important;
 -webkit-overflow-scrolling:touch!important;
 background:
   linear-gradient(180deg,rgba(226,244,254,.98),rgba(237,246,251,.98))!important;
 background-attachment:local!important;
 padding-bottom:0!important;
}
body.v34-user::before{
 position:fixed!important;
 inset:0!important;
 width:auto!important;
 height:auto!important;
 min-height:0!important;
 pointer-events:none!important;
}
body.v34-user .v34-shell{
 position:relative!important;
 min-height:0!important;
 height:auto!important;
 max-height:none!important;
 padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;
 margin-bottom:0!important;
}
body.v34-user .v34-dock{
 position:fixed!important;
 left:50%!important;
 right:auto!important;
 bottom:max(8px,env(safe-area-inset-bottom))!important;
 transform:translateX(-50%)!important;
}
body.v34-user .v34-shell::after{
 content:none!important;
 display:none!important;
}
@supports not selector(:has(*)){
 html{height:100%!important;overflow:hidden!important;background:#edf5fa!important}
 body.v34-user{height:100%!important;max-height:100dvh!important;overflow-y:auto!important}
}
@media(max-width:620px){
 body.v34-user .v34-shell{
  padding-bottom:calc(84px + env(safe-area-inset-bottom))!important;
 }
 body.v34-user .v34-dock{
  bottom:max(6px,env(safe-area-inset-bottom))!important;
 }
}

/* V57 checkpoint persistence */
.journey-v57-note{background:#eef8ff!important;border:1px solid #cbe7f7!important;color:#174765!important;margin-bottom:14px!important}

/* V58 Puzzle image manager */
.game-image-preview{
  display:grid;
  gap:8px;
  padding:12px;
  margin:12px 0;
  border:1px solid #d8e9f4;
  border-radius:16px;
  background:#f7fbfe;
}
.game-image-preview img{
  display:block;
  width:100%;
  max-height:320px;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
}
.game-image-preview small{
  color:#63788b;
  font-size:11px;
}

/* V59 Theme real preview + question limit */
.real-theme-preview{width:100%;height:760px;border:1px solid #dce7f1;border-radius:18px;background:#eef5fa;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding:16px}
.real-theme-preview iframe{width:390px;height:720px;border:0;border-radius:22px;background:#fff;box-shadow:0 18px 54px rgba(15,56,91,.16);transition:.2s}
.real-theme-preview.desktop iframe{width:100%;height:720px;border-radius:14px}
.theme-landing-grid{display:grid;grid-template-columns:1fr;gap:14px}
.theme-landing-upload{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px}
.theme-landing-upload label{display:grid;gap:9px;font-size:11px;font-weight:600}
.theme-landing-upload img{width:100%;height:180px;object-fit:cover;border-radius:12px;border:1px solid #dfe9f2;background:#eef5fa}
.question-limit-form{display:grid;grid-template-columns:minmax(220px,320px) auto minmax(260px,1fr);gap:10px;align-items:end;padding:12px;margin:12px 0;border:1px solid #dbeaf3;border-radius:14px;background:#f7fbfe}
.question-limit-form label{margin:0}.question-limit-form small{align-self:center;color:#6d8092}
.journey-form label small{display:block;margin-top:5px;color:#75879a;font-size:9px;line-height:1.4}
@media(max-width:760px){.theme-landing-upload{grid-template-columns:1fr}.real-theme-preview{height:690px;padding:8px}.real-theme-preview iframe{width:100%;height:670px}.question-limit-form{grid-template-columns:1fr}.question-limit-form .btn{width:100%}}

/* ================= V60 COMPACT USER PANEL ================= */

/* Profile tanpa badge point besar */
.v34-user .v53-profile-main{
  grid-template-columns:72px minmax(0,1fr)!important;
}
.v34-user .v53-profile-copy{
  min-width:0;
}
.v34-user .v53-profile-progress{
  margin-top:14px!important;
  padding-top:14px!important;
}

/* QR verifikasi lebih padat: teks kiri, QR kanan sejajar atas */
.v34-user .v60-qr-card{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) clamp(118px,34%,170px)!important;
  gap:18px!important;
  align-items:start!important;
  min-height:0!important;
  padding:18px!important;
  text-align:left!important;
}
.v34-user .v60-qr-card .v60-qr-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.v34-user .v60-qr-card .v53-card-title{
  width:100%;
  display:block!important;
  margin:0 0 12px!important;
  text-align:left!important;
}
.v34-user .v60-qr-card .v53-card-title small{
  display:block!important;
  margin-top:5px!important;
  text-align:left!important;
  color:rgba(255,255,255,.78)!important;
}
.v34-user .v60-qr-card .v34-code{
  margin:0 0 8px!important;
  text-align:left!important;
  font-size:22px!important;
  line-height:1.15!important;
}
.v34-user .v60-qr-card p{
  margin:0!important;
  max-width:260px!important;
  text-align:left!important;
  line-height:1.5!important;
}
.v34-user .v60-qr-card img{
  grid-column:2!important;
  grid-row:1!important;
  width:100%!important;
  max-width:170px!important;
  aspect-ratio:1!important;
  align-self:start!important;
  justify-self:end!important;
  margin:0!important;
  padding:7px!important;
  border-radius:15px!important;
}

/* Checkpoint jadi dua kolom dan lebih pendek */
.v34-user .v60-journey-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
.v34-user .v60-journey-grid .v34-journey-card{
  min-height:82px!important;
  padding:13px!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  gap:10px!important;
  align-items:start!important;
  overflow:hidden!important;
}
.v34-user .v60-journey-grid .v34-step{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  font-size:13px!important;
}
.v34-user .v60-journey-grid .v34-journey-copy{
  min-width:0!important;
}
.v34-user .v60-journey-grid .v34-journey-copy>div{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:8px!important;
}
.v34-user .v60-journey-grid .v34-journey-copy h3{
  margin:0!important;
  font-size:12px!important;
  line-height:1.35!important;
}
.v34-user .v60-journey-grid .v34-status{
  flex:0 0 auto!important;
  margin:0!important;
  padding:5px 8px!important;
  font-size:8px!important;
  white-space:nowrap!important;
}
.v34-user .v60-journey-grid .v34-journey-copy p,
.v34-user .v60-journey-grid .v34-journey-copy small,
.v34-user .v60-journey-grid .v34-points{
  display:none!important;
}

/* Hindari ruang kosong tambahan */
.v34-user .v34-section-head{
  margin-top:18px!important;
}
.v34-user .v34-shell{
  padding-bottom:calc(86px + env(safe-area-inset-bottom))!important;
}

@media(max-width:760px){
  .v34-user .v53-profile-main{
    grid-template-columns:58px minmax(0,1fr)!important;
  }
  .v34-user .v60-qr-card{
    grid-template-columns:minmax(0,1fr) 132px!important;
    gap:14px!important;
    padding:15px!important;
  }
  .v34-user .v60-qr-card img{
    width:132px!important;
    max-width:132px!important;
  }
  .v34-user .v60-journey-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
}

@media(max-width:480px){
  .v34-user .v60-qr-card{
    grid-template-columns:minmax(0,1fr) 118px!important;
    gap:11px!important;
    padding:14px!important;
  }
  .v34-user .v60-qr-card img{
    width:118px!important;
    max-width:118px!important;
  }
  .v34-user .v60-qr-card .v34-code{
    font-size:18px!important;
  }
  .v34-user .v60-qr-card p{
    font-size:9px!important;
  }
  .v34-user .v60-journey-grid .v34-journey-card{
    min-height:78px!important;
    padding:11px!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    gap:8px!important;
  }
  .v34-user .v60-journey-grid .v34-step{
    width:32px!important;
    height:32px!important;
    min-width:32px!important;
    font-size:12px!important;
  }
  .v34-user .v60-journey-grid .v34-journey-copy h3{
    font-size:10px!important;
  }
  .v34-user .v60-journey-grid .v34-status{
    padding:4px 6px!important;
    font-size:7px!important;
  }
}

/* ================= V61 USER JOURNEY / WALL / QUESTION FIX ================= */

/* Status berada di bawah content copy */
.v34-user .v60-journey-grid .v34-journey-card{
  grid-template-columns:34px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
}
.v34-user .v60-journey-grid .v34-step{
  grid-column:1!important;
  grid-row:1 / span 2!important;
}
.v34-user .v60-journey-grid .v34-journey-copy{
  grid-column:2!important;
  grid-row:1!important;
}
.v34-user .v60-journey-grid .v34-status{
  grid-column:2!important;
  grid-row:2!important;
  justify-self:start!important;
  display:inline-flex!important;
  margin-top:7px!important;
  width:auto!important;
}

/* Hanya souvenir di User Panel */
.v34-user .v61-reward-grid-single{
  grid-template-columns:1fr!important;
}
.v34-user .v61-reward-grid-single .v34-reward{
  min-height:120px!important;
}
.v34-user .v53-reward-message-grid:has(.v61-reward-grid-single):not(:has(.v53-message-panel)){
  grid-template-columns:1fr!important;
}
.v34-user .v53-reward-message-grid:has(.v61-reward-grid-single):not(:has(.v53-message-panel)) .v61-reward-grid-single{
  max-width:none!important;
}

/* Message Wall master toggle */
.wall-option-panel-v61{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.wall-master-toggle{
  grid-column:1/-1!important;
  border-color:#aed9ef!important;
  background:linear-gradient(135deg,#f5fbff,#edf9ff)!important;
}
.wall-master-toggle b{color:#006daf!important}

/* Question random count */
.question-count-badge{
  display:inline-flex;
  margin:4px 0 14px;
  padding:7px 10px;
  border-radius:999px;
  background:#eaf6fc;
  color:#006daf;
  font-size:11px;
  font-weight:600;
}
.checkpoint-form>.task-card{
  display:block!important;
}
@media(max-width:760px){
  .wall-option-panel-v61{grid-template-columns:1fr!important}
  .wall-master-toggle{grid-column:auto!important}
}