@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{--bg:#f5f7fb;--surface:#fff;--ink:#111827;--muted:#6b7280;--line:#e7eaf0;--primary:#635bff;--primary2:#7c3aed;--success:#0f9f6e;--shadow:0 12px 40px rgba(31,41,55,.07)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--ink)}a{text-decoration:none;color:inherit}button,input,select{font:inherit}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:12px;padding:12px 17px;font-weight:700;cursor:pointer}.btn-primary{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 8px 20px rgba(99,91,255,.2)}.btn-light{background:#fff;color:var(--ink)}.btn-block{width:100%}.brand{font-weight:800;font-size:23px;letter-spacing:-.8px}.brand span{color:var(--primary)}.auth-page{min-height:100vh;background:#eef1f8}.auth-shell{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr;max-width:1180px;margin:auto}.brand-panel{padding:70px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(145deg,#111827,#27224a);color:#fff}.brand-copy{max-width:560px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#8b91a1;margin:0 0 12px}.brand-copy .eyebrow{color:#aaa5ff}.brand-copy h1{font-size:52px;line-height:1.05;letter-spacing:-2px;margin:0 0 22px}.brand-copy h1 span{color:#9d96ff}.brand-copy p:not(.eyebrow){color:#b9bdca;line-height:1.7;max-width:480px}.mini-stats{display:flex;gap:35px}.mini-stats div{display:flex;flex-direction:column;gap:4px}.mini-stats strong{font-size:17px}.mini-stats small{color:#9298a7}.auth-card{background:#fff;display:flex;flex-direction:column;justify-content:center;padding:55px 70px}.mobile-brand{display:none}.auth-heading h2{font-size:31px;letter-spacing:-1px;margin:0 0 7px}.auth-heading p{color:var(--muted);margin:0 0 28px}.auth-card form{display:flex;flex-direction:column;gap:16px}.auth-card label,.panel label,.profile-form label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:700}.auth-card input,.panel input,.panel select,.profile-form input,.filters input{width:100%;border:1px solid var(--line);background:#fafbfc;border-radius:11px;padding:13px 14px;outline:0}.password-wrap{position:relative}.password-wrap input{padding-right:45px}.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:34px;height:32px;border:0;background:transparent;color:#7b8190;cursor:pointer;border-radius:8px}.password-toggle:hover{background:#eef0f5;color:#4f46e5}.auth-card input:focus,.panel input:focus,.profile-form input:focus,.filters input:focus{border-color:#9b95ff;box-shadow:0 0 0 3px rgba(99,91,255,.1)}.form-row{display:flex;justify-content:space-between;align-items:center;font-size:12px}.form-row a,.auth-footer a{color:var(--primary);font-weight:700}.check{flex-direction:row!important;align-items:center;gap:7px!important;font-weight:500!important}.check input{width:auto}.divider{display:flex;align-items:center;gap:10px;color:#9aa0ad;font-size:12px;margin:20px 0}.divider:before,.divider:after{content:"";height:1px;background:var(--line);flex:1}.btn-social{background:#f4f5f8}.auth-footer{text-align:center;font-size:13px;color:var(--muted);margin-top:22px}.form-note{font-size:11px!important;line-height:1.5;color:#9ca3af}.app-layout{display:flex;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:245px;background:#111827;color:#fff;padding:26px 18px;display:flex;flex-direction:column;z-index:5}.sidebar .brand{padding:0 10px 35px}.sidebar nav{display:flex;flex-direction:column;gap:5px}.sidebar nav a{padding:13px 12px;border-radius:11px;color:#aeb4c0;font-size:13px;font-weight:600}.sidebar nav a.active,.sidebar nav a:hover{background:#24213f;color:#fff}.side-help{margin-top:auto;background:#1b2231;border:1px solid #2a3242;border-radius:13px;padding:14px;display:flex;flex-direction:column;gap:6px}.side-help strong{font-size:12px}.side-help small{font-size:10px;color:#8e96a5;line-height:1.5}.side-help a{font-size:10px;color:#aaa5ff;margin-top:4px}.logout{border:0;background:transparent;color:#9098a7;text-align:left;padding:17px 10px 3px;cursor:pointer}.main{margin-left:245px;flex:1;padding:0 42px 50px;max-width:1500px}.topbar{height:76px;display:flex;align-items:center;justify-content:flex-end}.top-actions{display:flex;gap:9px;align-items:center}.icon-btn{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer}.avatar,.profile-avatar{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7c3aed,#635bff);color:#fff;font-weight:800}.avatar{width:36px;height:36px;border-radius:50%;font-size:12px}.page-head{display:flex;justify-content:space-between;align-items:flex-end;padding:25px 0}.page-head h1{font-size:32px;letter-spacing:-1.3px;margin:0 0 7px}.page-head p:not(.eyebrow){color:var(--muted);margin:0}.balance-card{border-radius:20px;padding:28px 30px;color:#fff;background:linear-gradient(135deg,#302b67,#635bff);display:flex;justify-content:space-between;align-items:center;box-shadow:0 16px 35px rgba(71,62,173,.2)}.balance-label{font-size:12px;opacity:.75}.balance-value{font-size:35px;font-weight:800;margin:7px 0}.balance-meta{font-size:11px;opacity:.65}.balance-actions{display:flex;gap:9px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin:18px 0 32px}.stat-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:18px;display:flex;align-items:center;gap:13px}.stat-card>span{width:38px;height:38px;border-radius:10px;background:#f0efff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800}.stat-card small{display:block;color:var(--muted);font-size:11px;margin-bottom:4px}.stat-card strong{font-size:18px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:15px}.section-head h2{font-size:18px;margin:0 0 5px}.section-head p{font-size:12px;color:var(--muted);margin:0}.section-head>a{font-size:12px;color:var(--primary);font-weight:700}.mission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.mission-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px;box-shadow:0 5px 20px rgba(31,41,55,.025)}.mission-icon{width:43px;height:43px;border-radius:12px;background:#f1efff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px}.mission-body{padding-top:14px}.tag-row{display:flex;gap:6px}.tag,.difficulty{font-size:9px;font-weight:800;padding:5px 7px;border-radius:6px;background:#f1efff;color:var(--primary)}.difficulty{background:#f2f4f7;color:#687080}.mission-card h3{font-size:14px;margin:11px 0 7px}.mission-card p{font-size:11px;line-height:1.55;color:var(--muted);min-height:50px}.mission-foot{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);padding:10px 0 13px}.mission-foot strong{font-size:12px;color:var(--success)}.mission-grid-large{grid-template-columns:repeat(3,1fr)}.filters{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}.filters input{max-width:280px;margin-right:auto}.filter{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 13px;font-size:11px;font-weight:700;cursor:pointer}.filter.active{background:#eeecff;color:var(--primary);border-color:#ddd9ff}.wallet-overview{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px;display:flex;justify-content:space-between;align-items:center}.wallet-overview small{color:var(--muted)}.wallet-overview h2{font-size:30px;margin:5px 0 0}.wallet-id{text-align:right;color:var(--muted);font-size:10px;line-height:1.6}.wallet-id strong{color:var(--ink)}.wallet-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:15px 0}.panel,.profile-panel{background:#fff;border:1px solid var(--line);border-radius:17px;padding:22px}.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.panel-head h2{font-size:16px;margin:0}.panel-head span{font-size:10px;color:var(--muted)}.panel{display:flex;flex-direction:column;gap:15px}.amount-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.amount-options button{background:#f7f7fa;border:1px solid var(--line);border-radius:9px;padding:9px;font-size:10px;cursor:pointer}.transactions{margin-top:15px}.transaction{display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid #f0f1f4}.tx-icon{width:32px;height:32px;border-radius:9px;background:#f0efff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:800}.transaction div:nth-child(2){flex:1}.transaction strong{display:block;font-size:12px}.transaction small{font-size:9px;color:var(--muted)}.positive{color:var(--success);font-size:11px}.negative{color:#dc4b62;font-size:11px}.profile-panel{max-width:800px}.profile-hero{display:flex;align-items:center;gap:15px;padding-bottom:24px;border-bottom:1px solid var(--line)}.profile-avatar{width:64px;height:64px;border-radius:18px;font-size:20px}.profile-hero h2{margin:0 0 4px;font-size:19px}.profile-hero p{margin:0 0 7px;color:var(--muted);font-size:11px}.status-pill{font-size:9px;color:var(--success);background:#eaf9f3;padding:5px 8px;border-radius:7px;font-weight:800}.profile-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}.profile-form label:last-of-type{grid-column:1/-1}.profile-form button{width:max-content}.empty-state{background:#fff;border:1px dashed var(--line);padding:30px;text-align:center;color:var(--muted);border-radius:14px;font-size:12px;grid-column:1/-1}
@media(max-width:900px){.auth-shell{grid-template-columns:1fr}.brand-panel{display:none}.auth-card{padding:35px 25px}.mobile-brand{display:block;margin-bottom:55px}.sidebar{width:72px;padding:20px 10px}.sidebar .brand{font-size:0;text-align:center}.sidebar .brand:first-letter{font-size:22px}.sidebar nav a{font-size:18px;text-align:center}.sidebar nav a span,.side-help,.logout{display:none}.main{margin-left:72px;padding:0 18px 35px}.mission-grid,.mission-grid-large{grid-template-columns:1fr 1fr}.topbar{height:65px}.page-head h1{font-size:27px}.profile-form{grid-template-columns:1fr}}
@media(max-width:600px){.admin-wallet-grid{grid-template-columns:1fr}.balance-card{flex-direction:column;align-items:flex-start;gap:20px}.stat-grid{grid-template-columns:1fr}.mission-grid,.mission-grid-large,.wallet-grid{grid-template-columns:1fr}.filters input{max-width:none;width:100%;order:-1}.page-head{align-items:flex-start;gap:15px;flex-direction:column}.profile-form{grid-template-columns:1fr}.profile-form button{width:100%}.balance-value{font-size:29px}}

.auth-error{background:#fff0f2;color:#b4233d;border:1px solid #ffd2da;border-radius:10px;padding:10px;font-size:12px;margin-bottom:14px}
.mission-modal{position:fixed;inset:0;background:rgba(10,14,25,.62);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:50}
.modal-card{width:min(540px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:20px;padding:26px;position:relative;box-shadow:0 25px 80px rgba(0,0,0,.25)}
.modal-card h2{font-size:22px;margin:12px 0 8px}.modal-card p{font-size:12px;color:var(--muted);line-height:1.6}.modal-card label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;margin-top:14px}.modal-card input,.modal-card textarea{border:1px solid var(--line);border-radius:10px;padding:11px;resize:vertical}.modal-card textarea{min-height:80px}.modal-card small{display:block;color:#9ca3af;font-size:10px;line-height:1.5;margin-top:12px}.modal-close{position:absolute;right:14px;top:14px;border:0;background:#f2f3f6;border-radius:50%;width:32px;height:32px;font-size:20px;cursor:pointer}.external-task{display:inline-block;color:var(--primary);font-weight:700;font-size:12px;margin:8px 0}.modal-reward{display:flex;justify-content:space-between;background:#f7f7fb;padding:13px;border-radius:10px;font-size:11px;color:var(--muted);margin-top:10px}.modal-reward strong{color:var(--success);font-size:14px}

.level-card{background:linear-gradient(135deg,#15172b,#34245e);color:#fff;border-radius:18px;padding:20px 22px;display:grid;grid-template-columns:1.1fr 1.8fr auto;gap:22px;align-items:center;margin:0 0 18px}.level-main{display:flex;align-items:center;gap:12px}.level-badge,.level-number{display:flex;align-items:center;justify-content:center}.level-badge{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.1);font-weight:800}.level-main small,.level-progress small{font-size:10px;opacity:.65}.level-main h2{font-size:19px;margin:3px 0}.level-main p{font-size:10px;margin:0;opacity:.75}.progress-label{display:flex;justify-content:space-between;font-size:10px;margin-bottom:7px}.progress{height:7px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}.progress i{display:block;height:100%;width:0;background:#a99cff;border-radius:99px}.level-summary{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.level-summary h2{margin:4px 0;font-size:24px}.level-summary p{margin:0;color:var(--muted);font-size:11px}.level-list{display:flex;flex-direction:column;gap:12px}.level-row{display:grid;grid-template-columns:55px 1fr 180px;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:16px;padding:17px}.level-row.current{border-color:#bcb6ff;box-shadow:0 7px 24px rgba(99,91,255,.08)}.level-row.locked{opacity:.58}.level-number{width:44px;height:44px;border-radius:12px;background:#f0efff;color:var(--primary);font-weight:800}.level-info h3{font-size:14px;margin:10px 0 5px}.level-info p{font-size:11px;color:var(--muted);line-height:1.5;margin:0;max-width:700px}.btn-muted{background:#eef0f4;color:#9aa0ab}.btn-success{background:#e9f8f2;color:#087a56}.btn-danger{background:#fff0f0;color:#c52f3d}.admin-tabs{display:flex;gap:8px;margin-bottom:15px;overflow:auto}.admin-tab{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 14px;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}.admin-tab.active{background:#efedff;color:var(--primary);border-color:#d8d4ff}.admin-list{display:flex;flex-direction:column}.admin-item{display:flex;justify-content:space-between;gap:15px;padding:15px 0;border-bottom:1px solid #eff0f3}.admin-item:last-child{border-bottom:0}.admin-item strong{display:block;font-size:12px}.admin-item small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.admin-item p{font-size:10px;color:var(--muted);max-width:650px;line-height:1.5}.admin-actions{display:flex;gap:7px;align-items:center;flex-shrink:0}.admin-actions .btn{padding:9px 11px;font-size:10px}.level-admin-list{display:grid;grid-template-columns:1fr 1fr;gap:13px}.level-admin-card{border:1px solid var(--line);border-radius:14px;padding:15px;display:flex;flex-direction:column;gap:10px}.level-admin-head{display:flex;justify-content:space-between;font-size:12px}.level-admin-head span{color:var(--success);font-size:10px}.level-admin-card label{display:flex;flex-direction:column;gap:6px;font-size:10px;font-weight:800}.level-admin-card input,.level-admin-card textarea,.admin-denied{border:1px solid var(--line);background:#fafbfc;border-radius:10px;padding:10px;outline:0}.level-admin-card textarea{min-height:65px;resize:vertical;font-family:inherit}.admin-denied{margin-top:30px;padding:30px;background:#fff}.admin-denied h1{margin-top:0}.admin-denied p{font-size:12px;color:var(--muted)}.admin-door{display:flex;justify-content:space-between;align-items:center;gap:15px;background:#15172b;color:#fff;border-radius:16px;padding:17px 19px;margin-bottom:15px}.admin-door strong{display:block;font-size:13px}.admin-door small{display:block;color:#aeb4c0;font-size:10px;margin-top:4px}.admin-door .btn{flex-shrink:0}.mission-modal{position:fixed;inset:0;background:rgba(7,9,15,.65);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}.modal-card{width:min(560px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:18px;padding:24px;position:relative;box-shadow:0 25px 70px rgba(0,0,0,.25)}.modal-close{position:absolute;right:15px;top:12px;border:0;background:#f1f2f5;width:32px;height:32px;border-radius:50%;cursor:pointer}.modal-card h2{font-size:21px;margin:14px 0 8px}.modal-card p{font-size:12px;color:var(--muted);line-height:1.6}.external-task{display:flex;padding:12px;background:#f0efff;color:var(--primary);border-radius:10px;font-size:11px;font-weight:800;margin:14px 0}.modal-reward{margin:12px 0;font-size:11px;color:var(--muted)}.modal-reward strong{color:var(--success);font-size:16px;margin-left:5px}.modal-card label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:800;margin:13px 0}.modal-card input,.modal-card textarea{border:1px solid var(--line);background:#fafbfc;border-radius:10px;padding:11px;resize:vertical;min-height:42px}.modal-card small{display:block;color:#8c93a1;font-size:9px;line-height:1.5;margin-top:9px}
@media(max-width:900px){.level-card{grid-template-columns:1fr}.level-row{grid-template-columns:45px 1fr}.level-action{grid-column:2}.level-admin-list{grid-template-columns:1fr}.admin-item{flex-direction:column}.admin-actions{flex-wrap:wrap}.admin-door{align-items:flex-start;flex-direction:column}}

.level-dashboard-card{background:linear-gradient(135deg,#211638,#3b1f5f);border-radius:17px;padding:20px;display:flex;align-items:center;gap:14px;color:#fff;margin:0 0 15px}.level-badge{width:44px;height:44px;border-radius:12px;background:#ffffff18;display:flex;align-items:center;justify-content:center;font-weight:800}.level-main{flex:1}.level-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.level-top small{font-size:9px;color:#b8afc9}.level-top h2{font-size:17px;margin:3px 0}.level-top span{font-size:9px;color:#b8afc9}.level-progress-label{font-size:9px;color:#c4b9d2}.level-progress-label strong{margin-left:6px;color:#fff}.progress-track{height:6px;background:#ffffff18;border-radius:99px;margin-top:9px;overflow:hidden}.progress-fill{height:100%;width:0;background:#9a6cff;border-radius:99px;transition:width .3s}.current-task{margin-bottom:18px}.sync-badge{font-size:9px;color:#0f9f6e}.live-task{display:flex;align-items:center;gap:15px}.live-task-icon{width:46px;height:46px;border-radius:12px;background:#efedff;color:#654cff;display:flex;align-items:center;justify-content:center;font-weight:800}.live-task-info{flex:1}.live-task-info h3{font-size:14px;margin:8px 0 5px}.live-task-info p{font-size:11px;color:var(--muted);line-height:1.5;margin:0 0 9px}.external-task{display:inline-flex;align-items:center;width:max-content;background:#f0efff;color:var(--primary);padding:9px 11px;border-radius:9px;font-size:10px;font-weight:800}.live-task .mission-foot{max-width:400px;padding-bottom:0}@media(max-width:600px){.level-dashboard-card,.live-task{align-items:flex-start;flex-direction:column}.level-main,.live-task-info{width:100%}.live-task .btn{width:100%}}

/* Level content gallery upgrade */
.level-content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.level-content-card{display:block;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.level-content-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(30,24,70,.10);border-color:#d5d0ff}.level-content-thumb{position:relative;aspect-ratio:16/9;background:#eeeef4;overflow:hidden}.level-content-thumb img{width:100%;height:100%;object-fit:cover;display:block}.generic-thumb{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#efedff,#f7f5ff);color:var(--primary);font-size:11px;font-weight:900;letter-spacing:.08em}.play-badge{position:absolute;left:10px;bottom:10px;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(20,16,35,.78);color:#fff;font-size:12px}.level-content-meta{padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.level-content-meta strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.level-content-meta span{font-size:9px;color:var(--primary);font-weight:800;white-space:nowrap}.level-no-content{margin:15px 0;padding:15px;border:1px dashed var(--line);border-radius:12px;background:#fafbfc;display:flex;flex-direction:column;gap:4px}.level-no-content strong{font-size:11px}.level-no-content span{font-size:9px;color:var(--muted)}.level-modal-card{width:min(680px,100%)}.level-complete-btn{margin-top:15px}.level-link-list{display:flex;flex-direction:column;gap:9px}.level-link-row{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:11px;background:#fafbfc}.link-row-index{width:25px;height:25px;border-radius:7px;background:#efedff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900;flex-shrink:0}.link-row-fields{display:grid;grid-template-columns:180px 1fr;gap:7px;flex:1}.link-row-fields input{min-width:0}.remove-link-btn{width:30px;height:30px;border:0;border-radius:8px;background:#fff0f0;color:#c52f3d;font-size:18px;cursor:pointer;flex-shrink:0}.add-link-btn{width:max-content}.level-links-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;font-weight:800}.level-links-head span{font-size:9px;color:var(--muted);font-weight:500}.live-task-preview{width:145px;height:82px;border-radius:12px;overflow:hidden;flex-shrink:0;background:#efedff}.live-task-preview img{width:100%;height:100%;object-fit:cover;display:block}.live-task-preview .live-task-icon{width:100%;height:100%;border-radius:0}@media(max-width:600px){.level-content-grid{grid-template-columns:1fr}.link-row-fields{grid-template-columns:1fr}.level-link-row{align-items:flex-start}.live-task-preview{width:100%;height:auto;aspect-ratio:16/9}.live-task-preview img{object-fit:cover}}

/* =========================
   ADMIN PANEL UX UPGRADE
   ========================= */
.admin-tabs{position:sticky;top:0;z-index:12;padding:8px 0;background:rgba(245,246,250,.94);backdrop-filter:blur(10px)}
.admin-tab-content{min-width:0}
.admin-level-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 20px;margin:0 0 14px;border:1px solid #ddd9ff;border-radius:16px;background:linear-gradient(135deg,#f8f6ff,#fff)}
.admin-level-intro>div:first-child{display:flex;align-items:center;gap:12px;min-width:0}.admin-level-intro strong{display:block;font-size:13px}.admin-level-intro p{margin:4px 0 0;font-size:10px;color:var(--muted);line-height:1.5}.intro-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#ece9ff;color:var(--primary);font-weight:900;font-size:10px;flex-shrink:0}.intro-steps{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.intro-steps span{font-size:9px;color:#5d6470;background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 9px;white-space:nowrap}.intro-steps b{display:inline-flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;background:#efedff;color:var(--primary);margin-right:4px}
.level-config-panel{overflow:visible}.level-config-panel>.panel-head{position:sticky;top:49px;z-index:10;background:#fff;padding:16px 0;margin-bottom:14px}.sync-dot{font-size:9px!important;color:#0c9a6a!important;font-weight:900!important}
.level-admin-list{display:grid;grid-template-columns:1fr;gap:16px}
.level-admin-card{border:1px solid #e3e4ea;border-radius:18px;padding:18px;background:#fff;box-shadow:0 5px 18px rgba(25,25,50,.035);gap:15px}.level-admin-card:hover{border-color:#d7d2ff;box-shadow:0 10px 30px rgba(75,55,180,.06)}
.level-admin-head{align-items:center;border-bottom:1px solid #eff0f4;padding-bottom:13px}.level-title-wrap{display:flex;align-items:center;gap:10px}.level-admin-number{width:38px;height:38px;border-radius:11px;background:#efedff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px}.level-title-wrap strong{display:block;font-size:13px}.level-title-wrap small{display:block;color:var(--muted);font-size:9px;margin-top:3px}.level-admin-head>span{font-size:9px;color:var(--muted);background:#f5f6f8;padding:6px 8px;border-radius:8px}
.level-admin-grid{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:12px}.level-admin-card label{font-size:10px}.level-admin-card label>span,.field-hint{font-weight:500;color:#8d94a0;font-size:9px;margin-left:4px}.level-admin-card input,.level-admin-card textarea{font-size:11px}.level-admin-card input:focus,.level-admin-card textarea:focus{border-color:#bdb5ff;background:#fff;box-shadow:0 0 0 3px rgba(101,76,255,.08)}
.level-content-section{border:1px solid #e7e7ee;border-radius:15px;background:#fafbfc;padding:13px}.level-content-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px}.level-content-section-head h3{font-size:11px;margin:0}.level-content-section-head p{font-size:9px;color:var(--muted);margin:4px 0 0}.content-count{display:flex;align-items:center;gap:5px;padding:7px 9px;background:#fff;border:1px solid var(--line);border-radius:9px}.content-count strong{font-size:12px;color:var(--primary)}.content-count span{font-size:9px;color:var(--muted)}
.level-link-manager{display:flex;flex-direction:column;gap:10px}.level-link-editor{border:1px solid #e0e2e8;background:#fff;border-radius:13px;padding:11px;transition:border-color .18s,box-shadow .18s}.level-link-editor:focus-within{border-color:#c9c3ff;box-shadow:0 5px 18px rgba(80,65,180,.06)}.link-editor-top{display:flex;align-items:center;gap:9px;margin-bottom:10px}.link-editor-number{width:27px;height:27px;border-radius:8px;background:#efedff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900}.link-editor-heading{flex:1;min-width:0}.link-editor-heading strong{font-size:10px;display:block}.link-status{display:inline-block;font-size:8px;color:#a0a5ae;margin-top:2px}.link-status.is-ready{color:#0c9a6a}.remove-link-btn{width:30px;height:30px;border-radius:8px;background:#fff3f3;color:#d33c49;border:1px solid #ffdfe1}.remove-link-btn:hover{background:#ffe8ea}
.link-editor-body{display:grid;grid-template-columns:155px minmax(0,1fr);gap:12px}.link-thumb-preview{position:relative;aspect-ratio:16/9;min-width:0;border-radius:10px;overflow:hidden;background:#f0f1f5;border:1px solid #e7e8ed}.link-thumb-preview img{width:100%;height:100%;object-fit:cover;display:block}.thumb-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#969ca8;background:linear-gradient(135deg,#f4f4f8,#ebeaf3)}.thumb-placeholder span{font-size:20px;font-weight:900;color:#7666df}.thumb-placeholder small{font-size:8px;margin-top:4px}.thumb-overlay{position:absolute;left:7px;bottom:7px;background:rgba(18,20,30,.76);color:#fff;border-radius:6px;padding:4px 6px;font-size:7px;font-weight:900;letter-spacing:.06em}.link-editor-fields{min-width:0;display:flex;flex-direction:column;gap:8px}.link-editor-fields label{gap:5px}.link-editor-fields input{padding:9px 10px}.link-editor-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}.link-preview-label{font-size:8px;color:#8e95a0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.open-link-btn{font-size:8px;font-weight:800;color:var(--primary);background:#efedff;border-radius:7px;padding:6px 8px;text-decoration:none;white-space:nowrap}.link-manager-actions{display:flex;align-items:center;gap:9px;margin-top:9px}.link-manager-actions .add-link-btn{font-weight:800;padding:9px 12px}.link-manager-actions>span{font-size:8px;color:#969ca8}
.level-save-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #eff0f4;padding-top:12px}.level-save-row>span{font-size:8px;color:#9aa0aa}.save-level-btn{min-width:145px}
@media(max-width:900px){.admin-level-intro{align-items:flex-start;flex-direction:column}.intro-steps{justify-content:flex-start}.level-config-panel>.panel-head{position:static}.level-admin-grid{grid-template-columns:1fr}.link-editor-body{grid-template-columns:125px minmax(0,1fr)}}
@media(max-width:600px){.admin-tabs{top:0}.admin-level-intro{padding:14px}.intro-steps{display:grid;grid-template-columns:1fr;width:100%}.intro-steps span{white-space:normal}.level-admin-card{padding:13px}.level-content-section{padding:10px}.link-editor-body{grid-template-columns:1fr}.link-thumb-preview{max-width:260px}.level-save-row{align-items:flex-start;flex-direction:column}.save-level-btn{width:100%}.link-manager-actions{align-items:flex-start;flex-direction:column}.level-admin-head>span{display:none}}

.admin-level-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;width:100%;margin-top:12px;padding-top:12px;border-top:1px solid #ebeaf1}.admin-level-toolbar .btn{font-size:10px;padding:9px 12px}.admin-level-toolbar .btn:disabled{opacity:.6;cursor:wait}
@media(min-width:901px){.admin-level-intro{flex-wrap:wrap}.admin-level-intro>.admin-level-toolbar{margin-left:auto}}
@media(max-width:600px){.admin-level-toolbar{justify-content:stretch;flex-direction:column}.admin-level-toolbar .btn{width:100%}}


/* Misi selesai setelah kembali dari konten */
.mission-return-notice{
 position:fixed;right:22px;bottom:22px;z-index:9999;
 display:flex;flex-direction:column;gap:4px;
 min-width:280px;max-width:calc(100vw - 44px);
 padding:15px 18px;border:1px solid rgba(124,58,237,.18);
 border-radius:16px;background:#fff;box-shadow:0 16px 40px rgba(20,15,45,.16);
 color:#171326;animation:missionNoticeIn .25s ease;
}
.mission-return-notice strong{font-size:14px}
.mission-return-notice span{font-size:12px;color:#6b7280}
.mission-return-notice.mission-error{border-color:rgba(220,38,38,.18)}
@keyframes missionNoticeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){
 .mission-return-notice{left:14px;right:14px;bottom:14px;min-width:0}
}

/* Mission action click reliability */
.js-start-mission,.js-level-start,.level-action{position:relative;z-index:20;pointer-events:auto}
.js-start-mission,.js-level-start{cursor:pointer;text-decoration:none}
.live-task .js-start-mission{flex-shrink:0}

/* =========================
   MISISUBSCRIBE PROFESSIONAL USER UI
   ========================= */
.main{min-width:0}
.topbar{position:sticky;top:0;z-index:30;background:rgba(247,248,252,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(224,226,234,.8)}
.page-head{gap:18px}
.page-head h1{letter-spacing:-.03em}
.balance-card{box-shadow:0 16px 38px rgba(68,42,150,.13)}
.level-dashboard-card{box-shadow:0 12px 30px rgba(35,20,70,.08)}
.current-task{box-shadow:0 10px 28px rgba(30,25,60,.05)}
.live-task{min-height:160px}
.live-task-info h3{font-size:17px!important;margin:6px 0}
.live-task-info p{font-size:12px!important;line-height:1.65!important}
.live-task-preview{width:190px!important;height:108px!important;border-radius:14px!important;box-shadow:0 8px 20px rgba(20,20,40,.08)}
.live-task .js-start-mission{min-width:130px;text-align:center}
.task-more{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:12px;margin-top:12px;font-size:11px;color:var(--muted)}
.task-more a{color:var(--primary);font-weight:800;text-decoration:none}
.section-head{margin-top:26px}
.site-footer{margin-top:42px;padding:30px 0 14px;border-top:1px solid #e5e7ee}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:24px}
.footer-grid>div{min-width:0}
.footer-brand{font-size:18px;letter-spacing:-.04em}
.footer-grid h3{font-size:12px;margin:0 0 8px}
.footer-grid p{font-size:10px;line-height:1.7;color:var(--muted);margin:0;max-width:360px}
.footer-bottom{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #eceef3;margin-top:22px;padding-top:12px;color:#9aa0aa;font-size:9px}

.chat-window[hidden]{display:none!important}
/* Realtime support chat */
.support-chat{position:fixed;right:22px;bottom:22px;z-index:1000;font-family:inherit}
.chat-fab{position:relative;width:54px;height:54px;border:0;border-radius:18px;background:linear-gradient(135deg,#743bff,#a020e8);color:#fff;box-shadow:0 14px 32px rgba(100,50,220,.3);font-size:25px;cursor:pointer}
.chat-fab b{position:absolute;right:-3px;top:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center}
.chat-window{position:absolute;right:0;bottom:68px;width:min(370px,calc(100vw - 28px));height:500px;background:#fff;border:1px solid #e4e5eb;border-radius:20px;box-shadow:0 24px 70px rgba(20,20,45,.2);overflow:hidden;display:flex;flex-direction:column}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;background:linear-gradient(135deg,#3b1956,#6e27d9);color:#fff}
.chat-head strong{display:block;font-size:13px}
.chat-head small{display:block;margin-top:3px;font-size:9px;opacity:.75}
.chat-head button{width:30px;height:30px;border:0;border-radius:9px;background:rgba(255,255,255,.12);color:#fff;font-size:20px;cursor:pointer}
.chat-messages,.admin-chat-messages{flex:1;overflow:auto;padding:15px;background:#f7f8fc;display:flex;flex-direction:column;gap:9px}
.chat-bubble{max-width:82%;padding:9px 11px;border-radius:13px;font-size:11px;line-height:1.5;box-shadow:0 3px 10px rgba(20,20,40,.04)}
.chat-bubble.user{align-self:flex-end;background:#743bff;color:#fff;border-bottom-right-radius:4px}
.chat-bubble.admin{align-self:flex-start;background:#fff;color:#222;border:1px solid #e8e9ee;border-bottom-left-radius:4px}
.chat-bubble small{display:block;margin-top:4px;font-size:8px;opacity:.65}
.chat-compose{display:flex;gap:8px;padding:11px;border-top:1px solid #e8e9ee;background:#fff}
.chat-compose input{flex:1;min-width:0;border:1px solid #dfe1e8;border-radius:11px;padding:10px 11px;font-size:11px;outline:none}
.chat-compose input:focus{border-color:#9d8bff;box-shadow:0 0 0 3px rgba(116,59,255,.08)}
.chat-compose button{width:40px;border:0;border-radius:11px;background:#743bff;color:#fff;font-size:16px;cursor:pointer}
.chat-compose button:disabled{opacity:.5}
.chat-empty{margin:auto;text-align:center;color:#9aa0aa;font-size:10px;line-height:1.6;max-width:220px}

/* Admin chat */
.admin-chat-layout{display:grid;grid-template-columns:310px minmax(0,1fr);gap:14px}
.chat-thread-panel,.admin-chat-panel{min-height:620px;overflow:hidden}
.chat-thread-list{display:flex;flex-direction:column;max-height:540px;overflow:auto}
.chat-thread{display:flex;align-items:center;gap:10px;width:100%;padding:12px;border:0;border-bottom:1px solid #eff0f4;background:#fff;text-align:left;cursor:pointer}
.chat-thread:hover,.chat-thread.active{background:#f7f5ff}
.thread-avatar{width:36px;height:36px;border-radius:12px;background:#efedff;color:#7144e8;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;flex-shrink:0}
.thread-body{min-width:0;flex:1}.thread-body strong{display:block;font-size:11px}.thread-body small{display:block;margin-top:3px;color:#9298a3;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread-unread{font-size:8px;background:#ede9fe;color:#6d3eea;padding:4px 6px;border-radius:6px}
.admin-chat-panel{display:flex;flex-direction:column}.admin-chat-panel .panel-head{flex-shrink:0}.admin-chat-messages{min-height:0}

@media(max-width:900px){
 .footer-grid{grid-template-columns:1fr 1fr}
 .admin-chat-layout{grid-template-columns:1fr}
 .chat-thread-panel{min-height:auto}
 .chat-thread-list{max-height:260px}
 .admin-chat-panel{min-height:520px}
}
@media(max-width:600px){
 .main{padding-bottom:20px}
 .footer-grid{grid-template-columns:1fr;gap:18px}
 .footer-bottom{flex-direction:column}
 .live-task-preview{width:100%!important;height:auto!important;aspect-ratio:16/9}
 .support-chat{right:14px;bottom:14px}
 .chat-window{bottom:65px;height:min(600px,calc(100vh - 100px))}
}

/* Chat attachments / Cloudinary */
.chat-photo-btn{
  width:40px;height:40px;flex:0 0 40px;border:1px solid #e3e5ec;border-radius:11px;
  background:#fff;color:#743bff;font-size:21px;cursor:pointer;font-weight:700;
}
.chat-photo-btn:hover{background:#f7f4ff;border-color:#cfc5ff}
.chat-photo-btn:disabled{opacity:.5;cursor:not-allowed}
.chat-attachment-preview{padding:7px 11px;border-top:1px solid #eee;background:#fff}
.attachment-chip{display:flex;align-items:center;gap:8px;max-width:100%;padding:5px 7px;background:#f7f7fb;border:1px solid #e5e6ed;border-radius:10px;font-size:9px}
.attachment-chip img{width:38px;height:38px;border-radius:7px;object-fit:cover}
.attachment-chip span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attachment-chip button{border:0;background:#eee;color:#555;width:24px;height:24px;border-radius:7px;cursor:pointer}
.chat-image-link{display:block;margin:-2px -2px 6px;text-decoration:none}
.chat-image-link img{display:block;width:min(220px,100%);max-height:260px;object-fit:cover;border-radius:10px}
.chat-bubble:has(.chat-image-link){padding:8px}

/* =========================
   WALLET PRO / DEPOSIT UI
   ========================= */
.wallet-pro-grid{align-items:start}
.wallet-action-card{position:relative;overflow:hidden}
.wallet-kicker{display:block;font-size:9px;letter-spacing:.14em;font-weight:900;color:#7b4df0;margin-bottom:4px}
.wallet-step{width:32px;height:32px;border-radius:10px;background:#f1edff;color:#7041e9;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:10px}
.wallet-intro{font-size:11px;line-height:1.65;color:var(--muted);margin:-2px 0 14px}
.amount-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px}
.amount-options button{border:1px solid #e1e3ea;background:#fff;border-radius:10px;padding:10px 6px;font-size:10px;font-weight:800;cursor:pointer;color:#20202a}
.amount-options button:hover,.amount-options button.selected{border-color:#a88cff;background:#f6f2ff;color:#6d35e8}
.deposit-box{margin:14px 0;border:1px solid #e7e4f1;border-radius:15px;background:#faf9fd;padding:12px}
.deposit-box-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:11px}
.deposit-box-head span{font-size:9px;color:#059669;font-weight:800;background:#ecfdf5;padding:4px 7px;border-radius:999px}
.deposit-accounts-user{display:grid;gap:7px}
.deposit-account-option{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #e5e6ec;background:#fff;border-radius:12px;cursor:pointer;transition:.15s}
.deposit-account-option:hover,.deposit-account-option.selected{border-color:#a68af6;box-shadow:0 0 0 2px rgba(116,59,255,.07)}
.deposit-account-option input{accent-color:#7c3aed}
.bank-logo{width:39px;height:39px;flex:0 0 39px;border-radius:11px;background:#f0ebff;color:#6f3ce8;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:900}
.deposit-account-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.deposit-account-copy strong{font-size:10px}.deposit-account-copy b{font-size:12px;letter-spacing:.03em}.deposit-account-copy small{font-size:9px;color:var(--muted)}
.check-row{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:8px;font-size:10px!important;line-height:1.5;margin:10px 0!important;color:#4b5563}
.check-row input{margin-top:2px;accent-color:#7c3aed}
.bank-fields,.ewallet-fields{display:grid;grid-template-columns:1fr;gap:0}
.wallet-admin-overview{display:grid;gap:14px}
.deposit-manager{overflow:hidden}
.deposit-admin-list{display:grid;gap:8px}
.deposit-admin-item{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid #e7e8ee;border-radius:13px;background:#fff}
.deposit-admin-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.deposit-admin-copy strong{font-size:11px}.deposit-admin-copy b{font-size:13px}.deposit-admin-copy small{font-size:9px;color:var(--muted)}
.deposit-status{font-size:8px;font-weight:900;padding:5px 7px;border-radius:999px}.deposit-status.on{background:#ecfdf5;color:#059669}.deposit-status.off{background:#f3f4f6;color:#6b7280}
.payout-detail{display:block;color:#6b7280;font-size:9px;margin-top:4px}
.modal-backdrop{position:fixed;inset:0;z-index:3000;background:rgba(15,12,28,.45);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:20px}
.modal-backdrop[hidden]{display:none!important}.modal-card{width:min(520px,100%);background:#fff;border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.25);overflow:hidden}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 20px;border-bottom:1px solid #ececf1}.modal-head h2{margin:0;font-size:18px}.modal-close{width:32px;height:32px;border:0;border-radius:10px;background:#f3f4f7;font-size:20px;cursor:pointer}.modal-body{padding:18px 20px}.modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid #ececf1;background:#fafafd}
@media(max-width:700px){.amount-options{grid-template-columns:repeat(2,1fr)}.deposit-admin-item{flex-wrap:wrap}.deposit-admin-item .admin-actions{margin-left:auto}.modal-backdrop{padding:12px}.modal-body{max-height:70vh;overflow:auto}}

/* =========================
   MOBILE PRO UI
   ========================= */
.chat-status{
  margin:0 11px;
  padding:8px 10px;
  border-radius:9px;
  font-size:9px;
  line-height:1.45;
  background:#fff7ed;
  color:#9a3412;
  border:1px solid #fed7aa;
}
.chat-status[data-type="error"]{background:#fff1f2;color:#be123c;border-color:#fecdd3}

@media(max-width:700px){
  body{overflow-x:hidden;padding-bottom:76px}
  .app-layout{min-height:100dvh}
  .sidebar{
    position:fixed;
    left:0;right:0;bottom:0;top:auto;
    width:100%;
    height:68px;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    background:rgba(17,24,39,.96);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-top:1px solid rgba(255,255,255,.08);
    flex-direction:row;
    align-items:center;
    z-index:1200;
  }
  .sidebar .brand,.sidebar .side-help,.sidebar .logout{display:none}
  .sidebar nav{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:3px;
    align-items:center;
  }
  .sidebar nav a,
  .sidebar nav a.active,
  .sidebar nav a:hover{
    height:54px;
    padding:7px 2px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:3px;
    color:#aeb4c0;
    font-size:20px;
    line-height:1;
  }
  .sidebar nav a.active{
    background:linear-gradient(135deg,#342251,#47236b);
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  }
  .sidebar nav a span{
    display:block;
    font-size:7px;
    line-height:1;
    font-weight:800;
    letter-spacing:.02em;
    color:inherit;
  }
  .main{
    margin-left:0;
    width:100%;
    max-width:none;
    padding:0 12px 24px;
  }
  .topbar{
    height:62px;
    padding:0 3px;
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(245,247,251,.9);
    backdrop-filter:blur(14px);
  }
  .mobile-brand{
    display:block;
    margin-right:auto;
    font-size:18px;
  }
  .top-actions{gap:6px}
  .icon-btn{width:38px;height:38px}
  .avatar{width:38px;height:38px}
  .page-head{
    padding:20px 2px 17px;
    gap:14px;
  }
  .page-head h1{font-size:26px;letter-spacing:-1px}
  .page-head p:not(.eyebrow){font-size:12px}
  .page-head .btn{width:100%;height:46px}
  .balance-card{
    padding:21px;
    border-radius:20px;
    gap:18px;
  }
  .balance-value{font-size:31px}
  .balance-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .balance-actions .btn{width:100%;padding:12px 8px}
  .level-dashboard-card{
    grid-template-columns:1fr;
    gap:14px;
    padding:17px;
    border-radius:18px;
  }
  .level-dashboard-card .btn{width:100%}
  .current-task.panel,.panel{border-radius:18px;padding:17px}
  .stat-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 24px}
  .stat-card{padding:12px 9px;gap:7px;min-width:0}
  .stat-card>span{width:32px;height:32px;flex:0 0 32px}
  .stat-card small{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stat-card strong{font-size:14px}
  .mission-grid,.mission-grid-large{grid-template-columns:1fr;gap:11px}
  .mission-card{padding:15px;border-radius:17px}
  .section-head{margin-top:6px}
  .section-head h2{font-size:18px}
  .site-footer{margin:26px -12px -24px;padding:25px 18px}
  .footer-grid{grid-template-columns:1fr;gap:18px}
  .footer-bottom{gap:8px}
  .support-chat{
    right:14px;
    bottom:82px;
    z-index:1300;
  }
  .chat-fab{
    width:52px;height:52px;border-radius:17px;
  }
  .chat-window{
    position:fixed;
    right:10px;
    bottom:74px;
    width:calc(100vw - 20px);
    height:min(620px,calc(100dvh - 94px));
    max-height:calc(100dvh - 94px);
    border-radius:20px;
  }
  .chat-head{padding:14px 15px}
  .chat-messages{padding:12px}
  .chat-bubble{max-width:88%;font-size:11px}
  .chat-compose{padding:9px}
  .chat-photo-btn,.chat-compose button{height:42px}
  .chat-compose input{height:42px;font-size:12px}
}

@media(max-width:380px){
  .stat-grid{grid-template-columns:1fr}
  .stat-card{padding:11px 12px}
  .stat-card small{white-space:normal}
  .top-actions .icon-btn:first-child{display:none}
  .page-head h1{font-size:23px}
}

/* Premium branding + chat unread */
.brand-lockup,.footer-lockup,.partner-logo{display:inline-flex;align-items:center;gap:10px}
.brand-mark,.footer-mark{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-weight:900;font-size:17px;box-shadow:0 8px 20px rgba(124,58,237,.18)}
.footer-mark{width:30px;height:30px;font-size:14px}
.footer-brand{font-size:18px!important;letter-spacing:-.4px}
.partner-strip{margin:0 0 22px;background:linear-gradient(135deg,#fff,#faf8ff);border:1px solid #e8e5f2;border-radius:18px;padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;box-shadow:0 8px 28px rgba(31,41,55,.035)}
.partner-copy small{display:block;color:#8a8498;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:5px}
.partner-copy strong{font-size:15px}
.partner-copy p{margin:4px 0 0;color:var(--muted);font-size:11px}
.partner-logos{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.partner-logo{background:#fff;border:1px solid #e8e8ef;border-radius:12px;padding:8px 11px;font-size:11px;font-weight:800;color:#222}
.partner-logo svg{width:22px;height:16px;display:block}
.youtube-logo path{fill:#ff0000}
.chat-tab-badge{display:inline-flex;min-width:18px;height:18px;padding:0 5px;align-items:center;justify-content:center;border-radius:999px;background:#ef3f66;color:#fff;font-size:9px;font-weight:900;margin-left:5px}
.chat-thread.has-unread{background:#fbf8ff;border-color:#ddd3ff}
.thread-unread{background:#ef3f66;color:#fff;border-radius:999px;padding:4px 7px;font-size:8px;white-space:nowrap}
.site-footer{margin-top:55px;padding:34px 0 12px;border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,#faf9ff)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px}
.footer-grid h3{font-size:12px;margin:0 0 9px}
.footer-grid p{font-size:10px;line-height:1.7;color:var(--muted);margin:0}
.footer-bottom{display:flex;justify-content:space-between;gap:15px;margin-top:25px;padding-top:13px;border-top:1px solid var(--line);font-size:9px;color:#9298a5}
@media(max-width:700px){
  .partner-strip{align-items:flex-start;flex-direction:column}
  .partner-logos{width:100%}
  .partner-logo{flex:1;justify-content:center}
  .footer-grid{grid-template-columns:1fr;gap:18px}
  .footer-bottom{flex-direction:column}
}

/* === Brand & media polish === */
.brand-lockup,.footer-lockup{display:inline-flex;align-items:center;gap:9px}
.brand-mark,.footer-mark{display:inline-flex!important;align-items:center;justify-content:center;width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,#b21cff,#6d35ff);color:#fff!important;font-weight:900;font-size:16px;letter-spacing:-.5px;box-shadow:0 7px 18px rgba(109,53,255,.24)}
.footer-mark{width:32px;height:32px;border-radius:10px}
.chat-fab{display:flex!important;align-items:center;justify-content:center}
.chat-fab-icon{position:relative;width:28px;height:28px;display:flex;align-items:center;justify-content:center}
.chat-fab-icon svg{width:27px;height:27px;fill:#fff;opacity:.98}
.chat-fab-icon i{position:absolute;font-style:normal;font-size:11px;font-weight:900;line-height:1;color:#7b2cff;top:7px;left:10px}
.chat-fab:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(100,50,220,.34)}
.chat-image-preview{display:block;margin:-2px -2px 6px;padding:0;border:0;background:transparent;cursor:zoom-in;border-radius:10px;overflow:hidden;max-width:100%}
.chat-image-preview img{display:block;width:min(220px,100%);max-height:260px;object-fit:cover;border-radius:10px}
.chat-image-preview:focus-visible{outline:3px solid rgba(116,59,255,.35);outline-offset:2px}
.chat-lightbox{position:fixed;inset:0;z-index:3000;background:rgba(10,10,18,.88);display:flex;align-items:center;justify-content:center;padding:28px;backdrop-filter:blur(5px)}
.chat-lightbox img{max-width:min(92vw,900px);max-height:88vh;object-fit:contain;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.35)}
.chat-lightbox-close{position:absolute;top:18px;right:18px;width:42px;height:42px;border:0;border-radius:12px;background:rgba(255,255,255,.14);color:#fff;font-size:27px;cursor:pointer}
.mission-platform-row{display:flex;align-items:center;min-height:25px;margin:7px 0 2px}
.mission-platform{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:10px;border:1px solid #ececf2;background:#fff;font-size:9px;font-weight:800}
.youtube-platform svg{width:20px;height:15px}
.youtube-platform svg path{fill:#ff0000}
.generic-platform{color:#28202f}
.brand-mini{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:6px;background:linear-gradient(135deg,#b21cff,#6d35ff);color:#fff;font-size:9px;font-weight:900}
@media(max-width:600px){
 .support-chat{right:12px;bottom:12px}
 .chat-fab{width:56px;height:56px;border-radius:17px}
 .chat-window{right:0;bottom:68px;width:min(390px,calc(100vw - 20px));height:min(680px,calc(100dvh - 90px));border-radius:22px}
 .chat-messages{padding:13px}
 .chat-bubble{max-width:88%;font-size:12px}
 .chat-compose{padding:9px}
 .chat-photo-btn,.chat-compose button{height:42px}
 .chat-image-preview img{width:min(250px,78vw);max-height:320px}
 .chat-lightbox{padding:14px}
}

.youtube-card-badge{position:absolute;left:9px;bottom:9px;width:30px;height:22px;border-radius:7px;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 15px rgba(0,0,0,.18)}
.youtube-card-badge svg{width:18px;height:13px}
.youtube-card-badge svg path{fill:#ff0000}


/* ==========================================================
   MISISUBSCRIBE — MOBILE UI/UX REFINEMENT v2
   Mobile-first polish for user + admin screens
   ========================================================== */
@media (max-width:700px){
  :root{
    --mobile-gutter:16px;
    --mobile-radius:18px;
  }

  html{
    width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
  }
  body{
    width:100%;
    min-width:0;
    overflow-x:hidden;
    padding-bottom:78px;
    background:#f5f7fb;
  }
  .app-layout{
    display:block;
    min-height:100dvh;
    width:100%;
  }

  /* Bottom navigation */
  .sidebar{
    left:0;
    right:0;
    bottom:0;
    top:auto;
    width:100%;
    height:72px;
    min-height:72px;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom));
    border:0;
    border-top:1px solid rgba(255,255,255,.09);
    border-radius:0;
    box-shadow:0 -10px 35px rgba(15,23,42,.13);
    z-index:2000;
  }
  .sidebar nav{
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:4px;
    align-items:center;
  }
  .sidebar nav a,
  .sidebar nav a.active,
  .sidebar nav a:hover{
    width:100%;
    min-width:0;
    height:56px;
    padding:6px 2px;
    border-radius:15px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-size:19px;
    line-height:1;
    text-align:center;
    transition:background .18s ease,transform .18s ease,color .18s ease;
  }
  .sidebar nav a:active{transform:scale(.94)}
  .sidebar nav a span{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8px;
    line-height:1;
    font-weight:800;
  }
  .sidebar nav a.active{
    background:linear-gradient(145deg,#302044,#4b2370);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  }

  /* Admin has only two navigation actions */
  .admin-sidebar nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
    max-width:330px;
    margin:0 auto;
  }
  .admin-sidebar nav a{
    font-size:17px;
  }
  .admin-sidebar nav a span{font-size:8px}

  .sidebar .brand,
  .sidebar .side-help,
  .sidebar .logout{
    display:none!important;
  }

  /* Main content */
  .main{
    margin:0!important;
    width:100%;
    max-width:none;
    min-width:0;
    padding:0 var(--mobile-gutter) 28px!important;
    box-sizing:border-box;
  }
  .topbar{
    width:100%;
    height:62px;
    min-height:62px;
    padding:0;
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(245,247,251,.92);
    border-bottom:1px solid rgba(226,228,235,.75);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .mobile-brand{
    display:flex!important;
    align-items:center;
    min-width:0;
    font-size:16px!important;
    font-weight:900;
  }
  .mobile-brand .brand-mark{
    width:30px;
    height:30px;
    flex:0 0 30px;
    border-radius:9px;
  }
  .top-actions{
    gap:6px;
    flex:0 0 auto;
  }
  .top-actions .icon-btn{
    width:38px;
    height:38px;
    border-radius:12px;
  }
  .avatar{
    width:38px;
    height:38px;
    flex:0 0 38px;
  }

  /* Headings and actions */
  .page-head{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:15px;
    padding:22px 0 16px;
  }
  .page-head h1{
    font-size:27px!important;
    line-height:1.12;
    letter-spacing:-.9px;
    margin-bottom:7px;
  }
  .page-head p:not(.eyebrow){
    font-size:12px;
    line-height:1.55;
  }
  .eyebrow{
    font-size:9px!important;
    letter-spacing:.12em;
  }
  .page-head .btn{
    width:100%;
    min-height:46px;
    justify-content:center;
    border-radius:13px;
  }

  /* Cards */
  .panel,
  .profile-panel,
  .wallet-overview,
  .level-summary{
    border-radius:var(--mobile-radius);
  }
  .panel{
    padding:17px;
  }
  .panel-head{
    margin-bottom:14px;
  }
  .panel-head h2{
    font-size:16px;
  }

  /* Dashboard */
  .balance-card{
    width:100%;
    box-sizing:border-box;
    padding:20px;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:18px;
  }
  .balance-value{font-size:31px}
  .balance-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .balance-actions .btn{
    width:100%;
    min-height:44px;
    padding:10px 7px;
  }
  .level-dashboard-card{
    width:100%;
    box-sizing:border-box;
    grid-template-columns:1fr;
    gap:14px;
    padding:17px;
    border-radius:19px;
  }
  .level-dashboard-card .btn{
    width:100%;
    min-height:44px;
  }
  .current-task.panel{
    padding:17px;
  }

  /* Current mission: no squeezed desktop columns */
  .current-task .mission-feature,
  .current-task .current-mission,
  .current-task .mission-preview{
    grid-template-columns:1fr!important;
  }
  .current-task img{
    max-width:100%;
  }

  .stat-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:12px 0 25px;
  }
  .stat-card{
    min-width:0;
    padding:12px 9px;
    border-radius:15px;
    gap:7px;
    flex-direction:column;
    align-items:flex-start;
  }
  .stat-card>span{
    width:32px;
    height:32px;
    flex:0 0 32px;
    border-radius:10px;
  }
  .stat-card small{
    width:100%;
    font-size:8px;
    line-height:1.25;
    white-space:normal;
  }
  .stat-card strong{
    font-size:15px;
    line-height:1.1;
  }

  /* Level list */
  .level-summary{
    padding:17px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    align-items:start;
  }
  .level-summary h2{font-size:20px}
  .level-list{gap:11px}
  .level-row{
    display:grid;
    grid-template-columns:44px 1fr;
    gap:12px;
    padding:15px;
    border-radius:17px;
  }
  .level-row>.btn,
  .level-row>.level-action{
    grid-column:1/-1;
    width:100%;
  }
  .level-info h3{font-size:14px;margin:4px 0 5px}
  .level-info p{font-size:11px;line-height:1.55}

  /* Mission marketplace */
  .partner-strip{
    margin-bottom:14px;
    padding:15px;
    border-radius:17px;
    flex-direction:column;
    align-items:stretch;
    gap:13px;
  }
  .partner-copy strong{font-size:14px}
  .partner-copy p{font-size:10px;line-height:1.55}
  .partner-logos{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
    gap:8px;
  }
  .partner-logo{
    min-height:40px;
    justify-content:center;
    padding:7px 8px;
  }
  .filters{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-bottom:15px;
  }
  .filters input{
    grid-column:1/-1;
    width:100%;
    max-width:none;
    min-height:44px;
    box-sizing:border-box;
  }
  .filter{
    min-height:40px;
    padding:9px 8px;
    border-radius:11px;
  }
  .mission-grid,
  .mission-grid-large{
    grid-template-columns:1fr!important;
    gap:11px;
  }
  .mission-card{
    padding:15px;
    border-radius:17px;
  }
  .mission-card h3{font-size:15px}
  .mission-card p{
    min-height:auto;
    font-size:11px;
    line-height:1.55;
  }
  .mission-foot{
    gap:10px;
  }

  /* Wallet */
  .wallet-overview{
    padding:19px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .wallet-overview h2{font-size:29px}
  .wallet-id{
    width:100%;
    text-align:left;
    padding-top:9px;
    border-top:1px solid var(--line);
  }
  .wallet-grid{
    grid-template-columns:1fr!important;
    gap:12px;
    margin:12px 0;
  }
  .wallet-action-card{
    padding:17px;
  }
  .amount-options{
    grid-template-columns:repeat(2,1fr);
    gap:7px;
  }
  .amount-options button{
    min-height:42px;
  }
  .bank-fields,
  .ewallet-fields{
    grid-template-columns:1fr!important;
  }
  .deposit-admin-item{
    flex-wrap:wrap;
    align-items:flex-start;
  }
  .deposit-admin-item .admin-actions{
    width:100%;
    margin-left:0;
  }
  .deposit-admin-item .admin-actions .btn{
    flex:1;
  }

  /* Forms */
  label{
    font-size:11px;
  }
  input,select,textarea{
    max-width:100%;
    box-sizing:border-box;
    font-size:13px!important;
  }
  input,select{
    min-height:44px;
  }
  textarea{
    min-height:90px;
  }
  .btn{
    min-height:42px;
    border-radius:12px;
  }

  /* Admin mobile */
  .admin-sidebar .mobile-brand{font-size:14px!important}
  #adminContent{
    width:100%;
    min-width:0;
  }
  #adminContent .page-head{
    padding-top:17px;
  }
  #adminContent .page-head h1{
    font-size:24px!important;
  }
  .admin-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px;
  }
  .admin-stats .stat-card{
    padding:10px 7px;
  }
  .admin-stats .stat-card>div{
    min-width:0;
    width:100%;
  }
  .admin-stats .stat-card small{
    font-size:7px;
  }
  .admin-stats .stat-card strong{
    font-size:14px;
  }
  .admin-tabs{
    display:flex!important;
    gap:7px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 1px 7px;
    margin-bottom:10px;
    scroll-snap-type:x proximity;
  }
  .admin-tabs::-webkit-scrollbar{display:none}
  .admin-tab{
    flex:0 0 auto;
    min-height:40px;
    padding:9px 12px;
    border-radius:11px;
    scroll-snap-align:start;
    font-size:10px;
  }
  .admin-tab-content>.panel{
    padding:15px;
  }
  .admin-item{
    flex-direction:column;
    gap:10px;
    padding:13px 0;
  }
  .admin-item p{
    max-width:none;
    font-size:10px;
  }
  .admin-actions{
    width:100%;
  }
  .admin-actions .btn{
    flex:1;
    min-height:40px;
  }
  .level-admin-list{
    grid-template-columns:1fr!important;
    gap:10px;
  }
  .level-admin-card{
    padding:14px;
    border-radius:15px;
  }

  /* Admin chat: stacked, readable and touch friendly */
  .admin-chat-layout,
  .chat-admin-layout{
    grid-template-columns:1fr!important;
  }
  .admin-chat-messages{
    min-height:48vh;
    max-height:58vh;
    padding:12px;
  }

  /* Support chat */
  .support-chat{
    right:13px;
    bottom:84px;
    z-index:2100;
  }
  .chat-fab{
    width:54px!important;
    height:54px!important;
    border-radius:17px!important;
  }
  .chat-window{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:82px!important;
    width:auto!important;
    height:min(650px,calc(100dvh - 102px))!important;
    max-height:calc(100dvh - 102px)!important;
    border-radius:21px!important;
    z-index:2200!important;
  }
  .chat-head{
    padding:14px 15px;
    min-height:54px;
    box-sizing:border-box;
  }
  .chat-head strong{font-size:13px}
  .chat-messages,
  .admin-chat-messages{
    padding:12px;
    gap:8px;
  }
  .chat-bubble{
    max-width:86%;
    padding:9px 11px;
    font-size:11px;
    border-radius:14px;
  }
  .chat-compose{
    padding:9px;
    gap:7px;
    padding-bottom:calc(9px + env(safe-area-inset-bottom));
  }
  .chat-photo-btn,
  .chat-compose button{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:12px;
  }
  .chat-compose input{
    height:42px;
    min-height:42px;
    font-size:12px!important;
  }

  /* Footer */
  .site-footer{
    margin:34px calc(var(--mobile-gutter) * -1) -28px;
    padding:28px var(--mobile-gutter) 18px;
  }
  .footer-grid{
    grid-template-columns:1fr!important;
    gap:20px;
  }
  .footer-grid p{
    font-size:10px;
    line-height:1.7;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    gap:6px;
    margin-top:20px;
  }

  /* Modals */
  .modal-backdrop{
    padding:10px;
    align-items:flex-end;
  }
  .modal-card{
    width:100%;
    max-width:none;
    max-height:calc(100dvh - 20px);
    border-radius:22px 22px 14px 14px;
  }
  .modal-body{
    max-height:62dvh;
    overflow:auto;
  }

  /* Avoid accidental horizontal overflow from long IDs/URLs */
  .panel,
  .card,
  .mission-card,
  .level-row,
  .admin-item,
  .deposit-box,
  .deposit-admin-item{
    min-width:0;
    overflow-wrap:anywhere;
  }
}

@media(max-width:380px){
  .main{padding-left:12px!important;padding-right:12px!important}
  .topbar{height:58px}
  .mobile-brand{font-size:14px!important}
  .mobile-brand .brand-mark{width:28px;height:28px;flex-basis:28px}
  .top-actions .icon-btn{width:35px;height:35px}
  .avatar{width:35px;height:35px;flex-basis:35px}
  .page-head h1{font-size:23px!important}
  .stat-grid{gap:6px}
  .stat-card{padding:10px 7px}
  .stat-card strong{font-size:13px}
  .stat-card small{font-size:7px}
  .partner-logos{grid-template-columns:1fr}
  .chat-window{
    left:6px!important;
    right:6px!important;
    bottom:80px!important;
    height:calc(100dvh - 96px)!important;
  }
}


/* ===== Level Account PRO UI ===== */
.level-page-head{margin-bottom:18px}
.level-hero{
  display:grid;
  grid-template-columns:82px minmax(180px,1fr) minmax(330px,1.4fr);
  gap:22px;align-items:center;
  padding:24px;border-radius:24px;
  background:linear-gradient(135deg,#24123e 0%,#3b1761 48%,#6f24d8 100%);
  color:#fff;border:0;box-shadow:0 18px 50px rgba(73,29,128,.18);
  margin-bottom:30px;
}
.hero-level-badge{display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-diamond{width:62px;height:62px;display:grid;place-items:center;color:#fff;font-size:34px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:18px;transform:rotate(0deg);box-shadow:inset 0 0 0 7px rgba(255,255,255,.04)}
.hero-level-badge span{font-size:8px;font-weight:900;letter-spacing:.12em;opacity:.7}
.level-hero-copy .hero-eyebrow{font-size:9px;font-weight:800;letter-spacing:.13em;opacity:.65}
.level-hero-copy h2{font-size:30px;margin:3px 0 1px;letter-spacing:-.04em}
.level-hero-copy p{font-size:11px;margin:0;opacity:.75}
.hero-progress{height:6px;border-radius:99px;background:rgba(255,255,255,.15);margin-top:15px;overflow:hidden}
.hero-progress span{display:block;width:var(--progress,0%);height:100%;background:#fff;border-radius:inherit;transition:width .3s}
.hero-reward-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.hero-reward-grid>div{padding:13px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1)}
.hero-reward-grid span{display:block;font-size:8px;opacity:.68;margin-bottom:6px}
.hero-reward-grid strong{font-size:13px}
.hero-potential{background:rgba(255,255,255,.16)!important}
.levels-section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:8px 0 14px}
.levels-section-head h2{font-size:21px;margin:2px 0 4px}
.levels-section-head>div>p:last-child{font-size:10px;color:var(--muted);margin:0}
.level-legend{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.level-legend span{font-size:9px;color:var(--muted);font-weight:700}
.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;background:#c7cbd4}
.legend-dot.current{background:#7b2ff2}.legend-dot.open{background:#2ab27b}.legend-dot.lock{background:#aeb4bf}
.pro-level-list{gap:14px}
.pro-level-card{
  display:grid;grid-template-columns:86px minmax(0,1fr) 150px;gap:20px;align-items:start;
  background:#fff;border:1px solid #e5e7ef;border-radius:22px;padding:20px;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.pro-level-card:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(31,25,61,.08)}
.pro-level-card.is-current{border-color:#a97af7;box-shadow:0 12px 36px rgba(111,36,216,.1)}
.pro-level-card.is-locked{background:linear-gradient(180deg,#fafbfc,#f4f5f8)}
.pro-level-card.is-complete{border-color:#d9eee6}
.pro-level-visual{display:flex;flex-direction:column;align-items:center;gap:10px}
.diamond-shell{width:66px;height:66px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,#f1eaff,#e8dcff);box-shadow:inset 0 0 0 1px #ded2ff}
.diamond-gem{width:43px;height:43px;transform:rotate(45deg);border-radius:11px;background:linear-gradient(135deg,#7a35f4,#a31bea);display:grid;place-items:center;box-shadow:0 9px 18px rgba(114,48,230,.25)}
.diamond-gem span{transform:rotate(-45deg);color:#fff;font-size:15px;font-weight:900}
.is-locked .diamond-gem{background:linear-gradient(135deg,#aeb5c1,#858d99);box-shadow:none}
.current-ribbon{font-size:7px;font-weight:900;letter-spacing:.08em;color:#7330e8;background:#f1eaff;border-radius:7px;padding:5px 7px}
.pro-level-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.level-state{font-size:8px;font-weight:900;padding:5px 8px;border-radius:7px}
.current-state{color:#7330e8;background:#f1eaff}.complete-state{color:#087a56;background:#e7f7ef}.lock-state{color:#7d8591;background:#eceef2}.open-state{color:#16795a;background:#e8f7f0}
.state-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#7a35f4;margin-right:4px}
.youtube-mini{display:inline-flex;align-items:center;gap:5px;color:#c81e2b;font-size:8px;font-weight:900;background:#fff1f2;padding:5px 7px;border-radius:7px}
.youtube-icon{width:14px;height:11px;fill:currentColor;display:inline-block}
.pro-level-main h3{font-size:17px;margin:10px 0 5px;letter-spacing:-.025em}
.level-description{font-size:10px;line-height:1.55;color:var(--muted);margin:0;max-width:720px}
.level-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.level-metrics>div{padding:10px 11px;border:1px solid #edf0f4;border-radius:12px;background:#fafbfc}
.level-metrics span{display:block;color:#8a919d;font-size:7px;font-weight:700;margin-bottom:4px}
.level-metrics strong{font-size:11px}
.potential-metric{background:#f7f1ff!important;border-color:#e9ddff!important}.potential-metric strong{color:#7a2fe7}
.pro-level-action{display:flex;align-items:center;justify-content:flex-end;height:100%;padding-top:5px}
.level-action-btn{display:flex;justify-content:center;align-items:center;gap:6px;width:100%;min-height:44px;border:0;border-radius:13px;text-decoration:none;font-weight:900;font-size:10px;cursor:pointer}
.start-btn{color:#fff;background:linear-gradient(135deg,#7838f4,#a51ce7);box-shadow:0 10px 24px rgba(120,56,244,.22)}
.done-btn{color:#087a56;background:#e8f7f0}.pending-btn{color:#7552d5;background:#f0ecff}.locked-btn{color:#8c939e;background:#eceff3}
.level-content-preview{margin-top:12px}
.level-content-preview .level-content-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.level-content-preview .level-content-card{border-radius:11px}
.level-content-preview .level-content-thumb{height:90px}
.level-content-preview .level-content-meta{padding:7px 8px}
.level-content-preview .level-content-meta strong{font-size:8px}.level-content-preview .level-content-meta span{font-size:7px}
.level-empty-inline{margin-top:12px;padding:10px 12px;border:1px dashed #dfe2e8;border-radius:10px;font-size:8px;color:#949aa4;background:#fafbfc}
@media(max-width:900px){
  .level-hero{grid-template-columns:70px 1fr;gap:16px}
  .hero-reward-grid{grid-column:1/-1}
  .pro-level-card{grid-template-columns:72px minmax(0,1fr);gap:15px}
  .pro-level-action{grid-column:2;justify-content:stretch}
}
@media(max-width:600px){
  .level-page-head h1{font-size:28px}
  .level-hero{grid-template-columns:58px 1fr;padding:17px;border-radius:18px;gap:12px}
  .hero-diamond{width:50px;height:50px;font-size:27px;border-radius:15px}
  .level-hero-copy h2{font-size:23px}
  .hero-reward-grid{grid-template-columns:1fr 1fr}
  .hero-potential{grid-column:1/-1}
  .levels-section-head{align-items:flex-start;flex-direction:column}
  .level-legend{width:100%;justify-content:space-between}
  .pro-level-card{grid-template-columns:1fr;padding:15px;border-radius:18px;gap:12px}
  .pro-level-visual{flex-direction:row;justify-content:space-between}
  .diamond-shell{width:52px;height:52px;border-radius:15px}.diamond-gem{width:34px;height:34px;border-radius:8px}.diamond-gem span{font-size:12px}
  .pro-level-top{align-items:flex-start}.pro-level-main h3{font-size:16px}
  .level-metrics{grid-template-columns:1fr 1fr}.potential-metric{grid-column:1/-1}
  .pro-level-action{grid-column:auto;padding-top:0}
  .level-action-btn{min-height:48px;font-size:11px}
  .level-content-preview .level-content-grid{grid-template-columns:1fr 1fr}
  .level-content-preview .level-content-thumb{height:82px}
}
@media(max-width:380px){
  .hero-reward-grid{grid-template-columns:1fr}
  .hero-potential{grid-column:auto}
  .level-metrics{grid-template-columns:1fr}
  .potential-metric{grid-column:auto}
  .level-content-preview .level-content-grid{grid-template-columns:1fr}
}

/* ===== Auto Reply Admin Control ===== */
.auto-reply-panel{margin-bottom:14px;border:1px solid #e7e2f4;background:linear-gradient(180deg,#fff,#fcfbff)}
.auto-reply-panel .panel-head{align-items:flex-start}
.switch-row{display:flex!important;flex-direction:row!important;align-items:center;gap:8px!important;font-size:11px!important;color:#6b6477}
.switch-row input{width:18px!important;height:18px;accent-color:#7c3aed}
.auto-reply-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(220px,.8fr);gap:16px;margin-top:8px}
.auto-reply-field textarea{width:100%;resize:vertical;min-height:118px;border:1px solid #e2e4eb;background:#fafbfc;border-radius:12px;padding:12px 13px;font:inherit;font-size:12px;line-height:1.55;outline:0;box-sizing:border-box}
.auto-reply-field textarea:focus{border-color:#9b7bea;box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.auto-reply-field small{display:block;color:#9298a5;font-size:9px;line-height:1.5;margin-top:6px}
.auto-reply-side{display:flex;flex-direction:column;gap:10px}
.auto-reply-side label{font-size:11px!important}
.auto-reply-preview{border:1px solid #e8e2f5;background:#f8f5ff;border-radius:13px;padding:11px}
.auto-reply-preview span{display:block;font-size:8px;font-weight:900;letter-spacing:.08em;color:#8550df;margin-bottom:6px}
.auto-reply-preview p{margin:0;font-size:10px;line-height:1.5;color:#5e5868;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.save-status{font-size:10px;padding:8px 10px;border-radius:9px;background:#edf9f3;color:#18764f}
@media(max-width:700px){
  .topbar{position:sticky}
  .mobile-brand{position:absolute!important;left:16px;top:50%;transform:translateY(-50%);margin:0!important;max-width:calc(100% - 150px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:2}
  .mobile-brand .brand-mark{display:inline-flex;vertical-align:middle}
  .auto-reply-grid{grid-template-columns:1fr;gap:12px}
  .auto-reply-panel{padding:14px!important}
  .auto-reply-panel .panel-head{gap:10px}
  .auto-reply-side .btn{width:100%;min-height:44px}
}


/* =========================================================
   USER ACCOUNT MENU / LOGOUT
   Scoped to the user avatar so existing layouts remain intact.
   ========================================================= */
.top-actions > .avatar {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.top-actions > .avatar:focus-visible {
  outline: 2px solid rgba(145, 62, 255, .65);
  outline-offset: 3px;
}

.user-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 3000;
  width: min(290px, calc(100vw - 28px));
  padding: 10px;
  border: 1px solid rgba(31, 20, 51, .10);
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 50px rgba(22, 12, 39, .18);
  backdrop-filter: blur(14px);
}

.user-account-menu[hidden] {
  display: none !important;
}

.user-account-menu.is-open {
  animation: accountMenuIn .16s ease-out;
}

.user-account-menu-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 8px 11px;
}

.user-account-menu-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  background: linear-gradient(135deg,#8b35ff,#a100ff);
}

.user-account-menu-user {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.user-account-menu-user strong {
  color: #15121d;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-account-menu-user span {
  color: #7d7788;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-account-menu-divider {
  height: 1px;
  margin: 2px 6px 6px;
  background: #eeeaf4;
}

.user-account-menu-item {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border: 0;
  border-radius: 11px;
  color: #25212d;
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.user-account-menu-item:hover,
.user-account-menu-item:focus-visible {
  background: #f5efff;
  outline: none;
}

.user-account-logout {
  color: #c52d54;
}

.user-account-logout:hover,
.user-account-logout:focus-visible {
  background: #fff1f4;
}

@keyframes accountMenuIn {
  from { opacity: 0; transform: translateY(-5px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 700px) {
  .user-account-menu {
    position: fixed;
    top: 68px;
    right: 12px;
    width: min(280px, calc(100vw - 24px));
    border-radius: 16px;
  }

  .top-actions > .avatar {
    min-width: 38px;
    min-height: 38px;
  }
}

/* FINAL USER ACCOUNT MENU FIX */
#userAccountMenu.user-account-menu{
  position:fixed !important;
  z-index:2147483000 !important;
  display:block;
  box-sizing:border-box;
  pointer-events:auto !important;
  max-height:calc(100vh - 24px);
  overflow:auto;
}
#userAccountMenu.user-account-menu[hidden]{display:none !important;}
#avatar{cursor:pointer !important;pointer-events:auto !important;}
@media (max-width:700px){
  #userAccountMenu.user-account-menu{
    width:min(290px,calc(100vw - 24px)) !important;
    border-radius:16px;
  }
}


/* LOGOUT MOBILE FINAL FIX — keep the account menu visible after avatar tap */
@media (max-width:700px){
  #avatar{
    position:relative !important;
    z-index:2147483001 !important;
    cursor:pointer !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

  #userAccountMenu.user-account-menu{
    position:fixed !important;
    z-index:2147483000 !important;
    max-width:calc(100vw - 20px) !important;
    max-height:calc(100vh - 20px) !important;
    overflow:auto !important;
    pointer-events:auto !important;
    background:#fff !important;
  }

  #userAccountMenu.user-account-menu.is-open{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }

  #userAccountMenu .user-account-menu-item{
    min-height:46px !important;
    display:flex !important;
    align-items:center !important;
  }
}


/* =========================================================
   AUTH MOBILE + FORGOT PASSWORD
   ========================================================= */
.auth-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(12,15,27,.62);
  backdrop-filter:blur(8px);
}
.auth-modal[hidden]{display:none!important}
.auth-modal-card{
  width:min(430px,100%);
  background:#fff;
  border:1px solid rgba(17,24,39,.08);
  border-radius:22px;
  padding:26px;
  position:relative;
  box-shadow:0 25px 80px rgba(17,24,39,.24);
}
.auth-modal-card h3{margin:14px 0 7px;font-size:22px;letter-spacing:-.6px}
.auth-modal-card>p{margin:0 0 18px;color:var(--muted);font-size:12px;line-height:1.6}
.auth-modal-card label{display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:700}
.auth-modal-card input{width:100%;border:1px solid var(--line);background:#fafbfc;border-radius:11px;padding:13px 14px;outline:0}
.auth-modal-card input:focus{border-color:#9b95ff;box-shadow:0 0 0 3px rgba(99,91,255,.1)}
.auth-modal-close{
  position:absolute;right:14px;top:14px;width:36px;height:36px;border:0;
  border-radius:10px;background:#f3f4f7;color:#4b5563;font-size:22px;cursor:pointer;
}
.auth-modal-icon{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  color:#fff;font-weight:800;background:linear-gradient(135deg,#7c3aed,#a100ff);
}
.reset-message{margin:0 0 14px;padding:11px 12px;border-radius:11px;font-size:11px;line-height:1.5}
.reset-message-success{background:#ecfbf4;color:#087443;border:1px solid #c9f1dd}
.reset-message-error{background:#fff0f2;color:#b4233d;border:1px solid #ffd2da}
.auth-modal-back{margin-top:10px;width:100%;border:0;background:transparent;color:var(--primary);font-weight:700;font-size:12px;cursor:pointer}

@media(max-width:900px){
  .auth-page{
    min-height:100dvh;
    width:100%;
    overflow-x:hidden;
    background:linear-gradient(180deg,#f3f1fb 0%,#f7f8fb 100%);
  }
  .auth-shell{
    width:100%;
    max-width:none;
    min-height:100dvh;
    display:block;
    margin:0;
  }
  .brand-panel{display:none!important}
  .auth-card{
    width:100%;
    min-height:100dvh;
    padding:28px 20px 34px;
    justify-content:center;
    border-radius:0;
  }
  .mobile-brand{
    display:block!important;
    width:max-content;
    margin:0 auto 42px!important;
    font-size:20px;
    letter-spacing:-.7px;
  }
  .auth-heading{max-width:520px;margin:0 auto}
  .auth-heading h2{font-size:28px}
  .auth-heading p{margin-bottom:24px}
  .auth-card form,.auth-card>.auth-footer,.auth-card>.auth-error{
    width:100%;max-width:520px;margin-left:auto;margin-right:auto;
  }
  .auth-card form{gap:14px}
  .auth-card input{min-height:46px;padding:12px 13px}
  .btn-block{min-height:46px}
  .form-row{gap:12px}
}
@media(max-width:600px){
  .auth-card{padding:24px 16px 30px;justify-content:flex-start}
  .mobile-brand{margin-top:8px!important;margin-bottom:54px!important;font-size:19px}
  .auth-heading h2{font-size:27px;margin-bottom:6px}
  .auth-heading p{font-size:12px;margin-bottom:22px}
  .form-row{font-size:11px}
  .auth-footer{font-size:11px}
  .auth-modal{padding:12px}
  .auth-modal-card{border-radius:18px;padding:22px 18px}
}
@media(max-width:380px){
  .auth-card{padding-left:13px;padding-right:13px}
  .mobile-brand{margin-bottom:42px!important}
  .auth-heading h2{font-size:25px}
}


/* =========================================================
   AUTH FINAL MOBILE POLISH
   Login & Daftar: clean, compact, premium, no duplicate brand
   ========================================================= */
.auth-page .brand-panel{overflow:hidden}

.auth-page .auth-card input::placeholder{
  color:#8f94a3;
  opacity:.38;
  font-weight:500;
}

.auth-page .auth-card input{
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.auth-page .auth-card input:focus{
  background:#fff;
  border-color:#8b5cf6;
  box-shadow:0 0 0 4px rgba(139,92,246,.10);
}

@media(max-width:900px){
  .auth-page{
    min-height:100dvh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px 14px;
    overflow-x:hidden;
    background:
      radial-gradient(circle at 50% 0%, rgba(139,92,246,.10), transparent 38%),
      #f5f6fa;
  }

  .auth-page .auth-shell{
    width:100%;
    max-width:430px;
    min-height:0;
    margin:0 auto;
    display:block;
  }

  /* Never show the desktop branding panel on mobile. */
  .auth-page .brand-panel{
    display:none!important;
  }

  .auth-page .auth-card{
    width:100%;
    min-height:0;
    margin:0;
    padding:24px 20px 22px;
    border:1px solid rgba(20,24,38,.07);
    border-radius:24px;
    background:rgba(255,255,255,.98);
    box-shadow:0 18px 55px rgba(24,20,48,.10);
    display:flex;
    justify-content:flex-start;
  }

  .auth-page .mobile-brand{
    display:flex!important;
    align-items:center;
    justify-content:center;
    width:100%;
    margin:0 0 24px!important;
    font-size:18px!important;
    line-height:1;
    color:#171827;
  }

  .auth-page .auth-heading{
    width:100%;
    max-width:none;
    text-align:left;
  }

  .auth-page .auth-heading h2{
    margin:0 0 6px;
    font-size:26px;
    line-height:1.15;
    letter-spacing:-.7px;
  }

  .auth-page .auth-heading p{
    margin:0 0 20px;
    font-size:12px;
    line-height:1.55;
    color:#7a7f8d;
  }

  .auth-page .auth-card form,
  .auth-page .auth-card>.auth-footer,
  .auth-page .auth-card>.auth-error{
    width:100%;
    max-width:none;
  }

  .auth-page .auth-card form{gap:13px}

  .auth-page .auth-card label{
    gap:7px;
    font-size:11px;
    color:#252735;
  }

  .auth-page .auth-card input{
    width:100%;
    min-height:46px;
    height:46px;
    padding:11px 13px;
    border-radius:12px;
    background:#f8f9fb;
    font-size:13px;
  }

  .auth-page .password-wrap{
    width:100%;
  }

  .auth-page .password-wrap input{
    padding-right:44px;
  }

  .auth-page .password-toggle{
    width:38px;
    height:38px;
    right:4px;
    top:4px;
  }

  .auth-page .form-row{
    margin-top:1px;
    font-size:10px;
  }

  .auth-page .form-row .check{
    gap:6px;
  }

  .auth-page .form-row .check input{
    width:13px;
    height:13px;
    min-height:13px;
  }

  .auth-page .btn-block{
    min-height:46px;
    height:46px;
    border-radius:12px;
    font-size:12px;
  }

  .auth-page .auth-footer{
    margin:16px 0 0;
    text-align:center;
    font-size:10px;
    line-height:1.5;
    color:#818695;
  }

  .auth-page .auth-error{
    margin-bottom:12px;
    font-size:11px;
  }

  .auth-page .auth-modal{
    padding:12px;
  }

  .auth-page .auth-modal-card{
    width:100%;
    max-width:390px;
    border-radius:20px;
    padding:22px 18px;
  }
}

@media(max-width:380px){
  .auth-page{
    padding:12px 10px;
  }

  .auth-page .auth-card{
    padding:21px 16px 18px;
    border-radius:21px;
  }

  .auth-page .mobile-brand{
    margin-bottom:20px!important;
    font-size:17px!important;
  }

  .auth-page .auth-heading h2{
    font-size:24px;
  }
}


/* AUTH UI FINAL POLISH — only login/register */
@media (max-width: 700px) {
  body.auth-page .auth-brand,
  body.auth-page .brand-footer,
  body.auth-page .auth-footer-brand,
  body.auth-page .login-brand,
  body.auth-page .register-brand {
    display: none !important;
  }

  body.auth-page input[type="checkbox"],
  body.auth-page .terms-checkbox input[type="checkbox"],
  body.auth-page #terms,
  body.auth-page #agree {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 14px !important;
    accent-color: #7c3aed;
    appearance: auto;
  }

  body.auth-page .terms-row,
  body.auth-page .agreement-row,
  body.auth-page .terms,
  body.auth-page label:has(input[type="checkbox"]) {
    align-items: flex-start !important;
    gap: 8px !important;
  }

  body.auth-page label:has(input[type="checkbox"]) {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
}

/* Fallback for auth pages that don't have auth-page on body */
@media (max-width: 700px) {
  .auth-container input[type="checkbox"],
  .auth-card input[type="checkbox"],
  .auth-form input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 14px !important;
    accent-color: #7c3aed;
  }

  .auth-container label:has(input[type="checkbox"]),
  .auth-card label:has(input[type="checkbox"]),
  .auth-form label:has(input[type="checkbox"]) {
    align-items: flex-start !important;
    gap: 8px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }
}


/* ===== misisubscribe Notifications UI ===== */
[data-notification-root]{
  position:fixed;top:18px;right:72px;z-index:10000;font-family:inherit;
}
.notification-trigger{
  position:relative;width:44px;height:44px;border:1px solid #e8e7f0;border-radius:14px;
  background:#fff;color:#6d28d9;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 8px 24px rgba(36,20,64,.08);transition:.2s;
}
.notification-trigger:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(36,20,64,.13)}
.notification-bell{width:21px;height:21px;display:grid;place-items:center;line-height:1}\n.notification-bell svg{width:21px;height:21px;display:block}
.notification-badge{
  position:absolute;right:-4px;top:-4px;min-width:18px;height:18px;padding:0 5px;
  border-radius:99px;background:#ef3b72;color:#fff;font-size:10px;font-weight:800;
  display:grid;place-items:center;border:2px solid #fff;
}
.notification-panel{
  position:absolute;right:0;top:52px;width:min(390px,calc(100vw - 28px));background:#fff;
  border:1px solid #e8e6f1;border-radius:20px;overflow:hidden;
  box-shadow:0 24px 70px rgba(25,15,45,.18);
}
.notification-head{padding:17px 18px 14px;display:flex;justify-content:space-between;gap:12px;
  border-bottom:1px solid #f0eef5}
.notification-head strong{display:block;font-size:16px;color:#151221}
.notification-head span{display:block;margin-top:3px;font-size:11px;color:#8a8796}
.notification-close{width:32px;height:32px;border:0;border-radius:10px;background:#f6f4fa;
  font-size:20px;cursor:pointer;color:#575264}
.notification-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  background:#fbfaff;border-bottom:1px solid #f1eef7}
.notification-count{font-size:11px;font-weight:700;color:#6d28d9}
.notification-readall{border:0;background:transparent;color:#6d28d9;font-size:10px;font-weight:700;cursor:pointer}
.notification-list{max-height:430px;overflow:auto}
.notification-item{width:100%;display:flex;align-items:flex-start;gap:11px;text-align:left;
  border:0;border-bottom:1px solid #f3f1f7;background:#fff;padding:13px 15px;cursor:pointer;position:relative}
.notification-item.is-unread{background:#f8f4ff}
.notification-item:hover{background:#f3edff}
.notification-icon{width:36px;height:36px;flex:0 0 36px;border-radius:12px;display:grid;place-items:center;
  background:#efe7ff;color:#7c3aed;font-size:13px;font-weight:800}
.notification-copy{min-width:0;display:block;padding-right:8px}
.notification-copy strong{display:block;font-size:12px;color:#17131f;margin-bottom:3px}
.notification-copy span{display:block;font-size:11px;line-height:1.45;color:#777381}
.notification-copy small{display:block;margin-top:5px;font-size:9px;color:#aaa5b1}
.notification-dot{position:absolute;right:14px;top:17px;width:7px;height:7px;border-radius:50%;background:#ef3b72}
.notification-empty{padding:42px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;color:#8c8895}
.notification-empty strong{font-size:12px;color:#3d3945}
.notification-empty span{font-size:10px}
.notification-empty-icon{width:42px;height:42px;border-radius:14px;background:#f0eaff;color:#7c3aed;
  display:grid;place-items:center;font-weight:900;margin-bottom:4px}
@media(max-width:700px){
  [data-notification-root]{top:12px;right:60px}
  .notification-trigger{width:40px;height:40px;border-radius:12px}
  .notification-panel{top:48px;width:min(360px,calc(100vw - 24px));border-radius:18px}
  .notification-list{max-height:62vh}
}


/* Wallet deposit confirmation checkbox — compact, touch-friendly */
@media (max-width:700px){
  body:has(#depositConfirm) #depositConfirm,
  body:has(input[name="depositConfirm"]) input[name="depositConfirm"],
  body:has(input[type="checkbox"]) .deposit-confirm input[type="checkbox"]{
    width:14px!important;height:14px!important;min-width:14px!important;min-height:14px!important;
    max-width:14px!important;max-height:14px!important;margin:1px 0 0!important;padding:0!important;
    flex:0 0 14px!important;accent-color:#7c3aed;
  }
  body:has(#depositConfirm) label,
  body:has(input[name="depositConfirm"]) label{
    font-size:10px!important;line-height:1.4!important;gap:8px!important;align-items:flex-start!important;
  }
}

/* ===== Wallet: compact deposit confirmation ===== */
.check-row{
  display:flex!important;align-items:flex-start!important;gap:9px!important;
}
.check-row input#topupTransferConfirmed{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:15px!important;height:15px!important;
  min-width:15px!important;max-width:15px!important;
  min-height:15px!important;max-height:15px!important;
  margin:2px 0 0!important;padding:0!important;
  border:1.5px solid #c9c5d4!important;border-radius:4px!important;
  background:#fff!important;box-shadow:none!important;flex:0 0 15px!important;
  cursor:pointer!important;
}
.check-row input#topupTransferConfirmed:checked{
  background:#7c3aed!important;border-color:#7c3aed!important;
  box-shadow:inset 0 0 0 3px #fff!important;
}
.check-row span{
  font-size:11px!important;line-height:1.45!important;
}
@media(max-width:700px){
  .check-row input#topupTransferConfirmed{
    width:14px!important;height:14px!important;min-width:14px!important;
    max-width:14px!important;min-height:14px!important;max-height:14px!important;
    flex-basis:14px!important;
  }
}


/* ===== GLOBAL SHOWTOAST UI ===== */
#mk-toast-root{
  position:fixed;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:min(430px,calc(100vw - 28px));
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:2147483000;
  pointer-events:none;
}
.mk-toast{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:11px;
  min-height:58px;
  padding:12px 38px 12px 12px;
  border:1px solid #e8e5ef;
  border-radius:16px;
  background:rgba(255,255,255,.98);
  box-shadow:0 18px 50px rgba(24,16,40,.16);
  color:#17131f;
  opacity:0;
  transform:translateY(-12px) scale(.98);
  transition:opacity .22s ease,transform .22s ease;
  overflow:hidden;
  pointer-events:auto;
  backdrop-filter:blur(12px);
}
.mk-toast.is-visible{opacity:1;transform:translateY(0) scale(1)}
.mk-toast-icon{
  width:34px;height:34px;min-width:34px;border-radius:11px;
  display:grid;place-items:center;font-size:15px;font-weight:900;
}
.mk-toast-content{display:flex;flex-direction:column;gap:2px;min-width:0}
.mk-toast-content strong{font-size:12px;line-height:1.2}
.mk-toast-message{font-size:11px;line-height:1.45;color:#77727f;word-break:break-word}
.mk-toast-close{
  position:absolute;right:9px;top:9px;width:26px;height:26px;border:0;
  border-radius:8px;background:#f5f3f8;color:#77727f;font-size:17px;
  cursor:pointer;display:grid;place-items:center;
}
.mk-toast-progress{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  animation:mkToastProgress 3.2s linear forwards;
}
.mk-toast-success .mk-toast-icon{background:#e8fbf2;color:#0a9b61}
.mk-toast-success .mk-toast-progress{background:#10b981}
.mk-toast-error .mk-toast-icon{background:#fff0f2;color:#e11d48}
.mk-toast-error .mk-toast-progress{background:#f43f5e}
.mk-toast-warning .mk-toast-icon{background:#fff8e6;color:#c47a00}
.mk-toast-warning .mk-toast-progress{background:#f59e0b}
.mk-toast-info .mk-toast-icon{background:#f0eaff;color:#7c3aed}
.mk-toast-info .mk-toast-progress{background:#8b5cf6}
@keyframes mkToastProgress{from{width:100%}to{width:0}}
@media(max-width:700px){
  #mk-toast-root{top:10px;width:calc(100vw - 20px)}
  .mk-toast{border-radius:14px;min-height:54px;padding:11px 36px 11px 11px}
  .mk-toast-icon{width:31px;height:31px;min-width:31px;border-radius:10px}
  .mk-toast-message{font-size:10px}
}


/* ===== PROFESSIONAL CONFIRM / INPUT DIALOG ===== */
.mk-dialog-backdrop{
  position:fixed;inset:0;z-index:2147482999;display:grid;place-items:center;
  padding:20px;background:rgba(15,12,24,.48);backdrop-filter:blur(7px);
  animation:mkDialogFade .18s ease;
}
.mk-dialog{
  width:min(390px,calc(100vw - 30px));background:#fff;border:1px solid #ece9f2;
  border-radius:20px;padding:22px;box-shadow:0 28px 90px rgba(18,10,35,.25);
  animation:mkDialogIn .2s ease;
}
.mk-dialog-icon{width:42px;height:42px;border-radius:13px;background:#f0eaff;color:#7c3aed;
  display:grid;place-items:center;font-weight:900;margin-bottom:13px}
.mk-dialog h3{margin:0;color:#181421;font-size:17px;line-height:1.3}
.mk-dialog p{margin:7px 0 17px;color:#77727f;font-size:12px;line-height:1.55;white-space:pre-line}
.mk-dialog-input{width:100%;height:44px;border:1px solid #ddd9e6;border-radius:12px;padding:0 13px;
  outline:none;font:inherit;font-size:13px;color:#1b1723;background:#faf9fc;margin-bottom:16px}
.mk-dialog-input:focus{border-color:#8b5cf6;box-shadow:0 0 0 3px rgba(139,92,246,.12);background:#fff}
.mk-dialog-actions{display:flex;justify-content:flex-end;gap:9px}
.mk-dialog-actions button{height:40px;padding:0 16px;border-radius:11px;border:0;font-weight:750;cursor:pointer;font:inherit;font-size:12px}
.mk-dialog-cancel{background:#f4f2f7;color:#5f5968}
.mk-dialog-ok{background:linear-gradient(135deg,#7c3aed,#a21caf);color:#fff;box-shadow:0 9px 22px rgba(124,58,237,.22)}
.mk-dialog-actions button:active{transform:translateY(1px)}
@keyframes mkDialogFade{from{opacity:0}to{opacity:1}}
@keyframes mkDialogIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:700px){
  .mk-dialog{width:calc(100vw - 24px);border-radius:18px;padding:18px}
  .mk-dialog-actions button{flex:1}
}


/* =========================================================
   FINAL MOBILE NAV + STICKY HEADER HARDENING
   Responsive across narrow Android/iPhone widths.
   ========================================================= */
html{
  min-width:0;
  overflow-x:hidden;
}
body{
  min-width:0;
  overflow-x:hidden;
}
.app-layout{
  min-width:0;
}
.main{
  min-width:0;
  overflow:visible;
}
.topbar{
  position:sticky;
  top:0;
  z-index:1800;
  isolation:isolate;
  width:100%;
  min-width:0;
  flex:0 0 auto;
}
.top-actions{
  min-width:0;
  position:relative;
}
.mobile-brand{
  min-width:0;
}

@media(max-width:700px){
  body{
    padding-bottom:calc(74px + env(safe-area-inset-bottom)) !important;
  }
  .main{
    width:100%;
    max-width:none;
    margin-left:0 !important;
    padding-left:max(12px, env(safe-area-inset-left)) !important;
    padding-right:max(12px, env(safe-area-inset-right)) !important;
    padding-bottom:30px !important;
  }

  /* The complete header is sticky. */
  .topbar{
    height:64px !important;
    min-height:64px !important;
    margin:0 calc(max(12px, env(safe-area-inset-left)) * -1);
    width:calc(100% + max(12px, env(safe-area-inset-left)) + max(12px, env(safe-area-inset-right)));
    padding:
      0 max(12px, env(safe-area-inset-right))
      0 max(12px, env(safe-area-inset-left));
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(247,248,252,.94);
    border-bottom:1px solid rgba(226,228,235,.78);
    box-shadow:0 5px 18px rgba(20,20,45,.04);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }
  .mobile-brand{
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    display:flex !important;
    align-items:center;
    flex:1 1 auto;
    width:auto;
    max-width:none !important;
    margin:0 12px 0 0 !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-brand strong{
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .top-actions{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:7px;
  }
  .top-actions > .icon-btn{
    width:38px;
    height:38px;
    flex:0 0 38px;
  }
  .top-actions > .avatar{
    width:38px;
    height:38px;
    flex:0 0 38px;
  }

  /* Bottom navigation: 4-item pages use four equal columns;
     pages that contain the Level item use five equal columns. */
  .sidebar{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:auto !important;
    bottom:0 !important;
    width:100vw !important;
    height:calc(70px + env(safe-area-inset-bottom)) !important;
    min-height:calc(70px + env(safe-area-inset-bottom)) !important;
    padding:
      5px max(8px, env(safe-area-inset-right))
      max(5px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left)) !important;
    box-sizing:border-box;
    display:flex !important;
    align-items:stretch;
    z-index:2500 !important;
    background:rgba(17,24,39,.97);
    border-top:1px solid rgba(255,255,255,.09);
    box-shadow:0 -12px 38px rgba(15,23,42,.16);
  }
  .sidebar nav{
    width:100%;
    height:100%;
    min-width:0;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:4px;
    align-items:stretch;
  }
  .sidebar nav:has(a:nth-child(5)){
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
  .sidebar nav a,
  .sidebar nav a.active,
  .sidebar nav a:hover{
    width:100%;
    min-width:0;
    height:100%;
    min-height:56px;
    padding:5px 2px !important;
    margin:0;
    border-radius:14px;
    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:#aeb4c0;
    font-size:20px !important;
    line-height:1;
    text-align:center;
    overflow:hidden;
    -webkit-tap-highlight-color:transparent;
  }
  .sidebar nav a.active{
    background:linear-gradient(145deg,#302044,#4b2370);
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  }
  .sidebar nav a span{
    display:block !important;
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8px !important;
    line-height:1.15;
    font-weight:800;
    letter-spacing:.01em;
  }
  .sidebar nav a:active{
    transform:scale(.96);
  }

  .sidebar .brand,
  .sidebar .side-help,
  .sidebar .logout{
    display:none !important;
  }

  /* Notification is now a normal child of the sticky header,
     not a viewport-fixed element. */
  [data-notification-root]{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    left:auto !important;
    bottom:auto !important;
    z-index:2000 !important;
    flex:0 0 auto;
    width:auto;
    height:40px;
  }
  .notification-trigger{
    width:40px !important;
    height:40px !important;
    border-radius:13px !important;
  }
  .notification-panel{
    top:48px !important;
    right:0 !important;
    width:min(360px,calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px);
  }
}

@media(max-width:380px){
  .topbar{
    height:58px !important;
    min-height:58px !important;
  }
  .mobile-brand{
    font-size:14px !important;
    margin-right:8px !important;
  }
  .mobile-brand .brand-mark{
    width:29px !important;
    height:29px !important;
    flex-basis:29px !important;
  }
  .top-actions{
    gap:5px;
  }
  .top-actions > .icon-btn,
  .top-actions > .avatar,
  [data-notification-root] .notification-trigger{
    width:35px !important;
    height:35px !important;
    flex-basis:35px;
  }
  .notification-panel{
    right:-2px !important;
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
  }
  .sidebar nav a{
    border-radius:12px;
    gap:3px;
    font-size:18px !important;
  }
  .sidebar nav a span{
    font-size:7.5px !important;
  }
}


/* ===== Mission completion + top-up proof + support headset ===== */
.mission-card.mission-completed{
  border-color:#d9f1e7;
  background:linear-gradient(180deg,#fff,#fbfffd);
}
.mission-card.mission-completed .mission-icon{
  background:#e9f8f1;
  color:#0f9f6e;
}
.mission-done-btn{
  cursor:not-allowed!important;
  opacity:.95;
}
.proof-upload-card{
  border:1px solid #e7e1f5;
  background:linear-gradient(180deg,#fbfaff,#fff);
  border-radius:14px;
  padding:12px;
}
.proof-upload-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}
.proof-upload-head strong{font-size:11px}
.proof-upload-head span{
  font-size:8px;font-weight:800;color:#7c3aed;
  background:#f0eaff;border-radius:7px;padding:5px 7px;
}
.proof-upload-label{
  display:flex!important;
  flex-direction:row!important;
  align-items:center;
  gap:10px!important;
  margin:0!important;
  padding:10px;
  border:1px dashed #cfc7e8;
  border-radius:11px;
  background:#fff;
  cursor:pointer;
}
.proof-upload-icon{
  width:34px;height:34px;flex:0 0 34px;
  display:grid;place-items:center;
  border-radius:10px;background:#eee9ff;color:#6d28d9;font-size:18px;
}
.proof-upload-label b{display:block;font-size:10px}
.proof-upload-label small{display:block;color:#8d94a0;font-size:8px;margin-top:3px}
.proof-preview{
  margin-top:9px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px;
  border:1px solid #e7e8ee;
  border-radius:10px;
  background:#fff;
}
.proof-preview img{
  width:52px;height:52px;object-fit:cover;border-radius:8px;
}
.proof-preview>div{min-width:0;flex:1}
.proof-preview strong{display:block;font-size:9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proof-preview small{display:block;color:#0f9f6e;font-size:8px;margin-top:3px}
.proof-preview button{
  width:28px;height:28px;border:0;border-radius:8px;
  background:#fff0f2;color:#c52f3d;cursor:pointer;font-size:17px;
}
.proof-link{color:#6d28d9;font-weight:800;text-decoration:none}
.headset-icon svg{width:25px;height:25px;display:block}
@media(max-width:700px){
  .proof-upload-card{padding:11px}
  .proof-upload-label{min-height:54px}
}


/* ===== Final mission/level state UI ===== */
.pro-level-card.is-complete{border-color:#d6efe4;background:linear-gradient(180deg,#fff,#fbfffd)}
.pro-level-card.is-locked .level-content-card{pointer-events:none}
.level-content-card.is-disabled-content{cursor:default!important;pointer-events:none;opacity:.72}
.level-content-card.is-done-content{filter:saturate(.65)}
.content-done-badge,.content-lock-badge{
  position:absolute;left:8px;bottom:8px;padding:5px 8px;border-radius:8px;
  font-size:8px;font-weight:900;letter-spacing:.1px;backdrop-filter:blur(5px)
}
.content-done-badge{background:#e9f8f1;color:#087a56}
.content-lock-badge{background:rgba(25,28,40,.78);color:#fff}
.level-visual-status{
  position:absolute;right:6px;top:6px;width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;background:#fff;box-shadow:0 5px 14px rgba(0,0,0,.12);
  font-size:11px;font-weight:900;color:#0f9f6e
}
.is-locked .level-visual-status{color:#777f8e}
.live-task.is-task-complete{border-color:#d6efe4;background:linear-gradient(180deg,#fff,#fbfffd)}
.is-complete-task{
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;background:linear-gradient(145deg,#eefaf5,#e4f7ef)!important;color:#087a56
}
.completed-task-mark{
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:1px solid #ccecdf;font-size:27px;font-weight:900
}
.is-complete-task span{font-size:10px;font-weight:900}
.js-start-mission:disabled{opacity:.6;cursor:not-allowed}
.headset-icon{
  width:46px!important;height:46px!important;border-radius:15px!important;
  display:grid!important;place-items:center!important;
  background:linear-gradient(145deg,#7c3aed,#5b21b6)!important;
  box-shadow:0 10px 24px rgba(91,33,182,.28)
}
.headset-icon svg{width:27px!important;height:27px!important;color:#fff}
.chat-fab:hover .headset-icon{transform:translateY(-1px) scale(1.03)}
.chat-fab-icon{transition:transform .18s ease,filter .18s ease}