:root{
  --blue:#2f7cf6; --blue-dark:#1f66e0;
  --green:#16c784; --green-dark:#12a86f; --red:#ea3943; --red-dark:#c92f3a;
  --gold:#f5c451;
  --dark-bg:#0c1322; --dark-card:#161f36; --dark-card2:#1b2540; --dark-line:#243050;
  --bg:#f4f5f7; --card:#ffffff; --text:#1a1d29; --muted:#8a90a2; --border:#eceef2;
  --radius:16px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{font-family:'Poppins',sans-serif;background:#0a0f1c;color:var(--text)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}

.mobile-container{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);
  position:relative;box-shadow:0 0 40px rgba(0,0,0,.25);padding-bottom:86px;overflow-x:hidden}

/* ============ LIGHT-BLUE AUTH ============ */
.auth-page{max-width:480px;margin:0 auto;min-height:100vh;
  background:linear-gradient(180deg,#bfe0ff 0%,#dcecff 32%,#eef5ff 100%);
  display:flex;flex-direction:column;align-items:center;padding:0 20px 40px;position:relative}
.auth-lang{position:absolute;top:16px;right:18px;background:var(--blue);color:#fff;font-size:11px;
  font-weight:600;padding:4px 12px;border-radius:20px}
.auth-logo{text-align:center;padding:64px 0 22px}
.auth-logo .brand-ic{width:96px;height:96px;border-radius:26px;margin:0 auto 10px;
  background:linear-gradient(135deg,#2f7cf6,#1f66e0);display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:48px;box-shadow:0 14px 34px rgba(47,124,246,.4)}
.auth-logo h1{font-size:24px;font-weight:700;color:#1c3a66;letter-spacing:.5px}
.auth-logo h1 span{color:var(--blue)}
.auth-card{width:100%;background:#fff;border-radius:22px;padding:26px 22px;
  box-shadow:0 20px 50px rgba(30,80,160,.16)}
.auth-card h2{text-align:center;font-size:20px;font-weight:700;margin-bottom:20px}
.auth-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:20px;color:var(--muted);font-size:13px;font-weight:600}
.auth-foot img{width:20px;height:20px}
.link-line{text-align:center;font-size:14px;color:var(--muted);margin-top:16px}
.link-line a{color:var(--blue);font-weight:600}

/* Inputs */
.input-group{display:flex;align-items:center;gap:10px;background:#f6f8fb;border:1.5px solid #e6ebf2;
  border-radius:12px;padding:13px 14px;margin-bottom:14px}
.input-group i{color:var(--muted);font-size:18px}
.input-group .cc,.input-group .country-code{color:var(--text);font-size:14px;font-weight:600;border-right:1px solid #dbe2ec;padding-right:10px}
.input-group input,.input-group select{border:none;background:transparent;outline:none;flex:1;font-size:15px;font-family:inherit;color:var(--text);min-width:0}
label.fld{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px;display:block}

/* Buttons */
.btn{display:block;width:100%;padding:14px;border:none;border-radius:12px;font-size:15px;font-weight:600;
  cursor:pointer;font-family:inherit;text-align:center;transition:transform .12s ease,opacity .2s}
.btn:active{transform:scale(.98)}
.btn-blue{background:var(--blue);color:#fff}
.btn-green{background:var(--green);color:#fff}
.btn-red{background:var(--red);color:#fff}
.btn-dark{background:var(--text);color:#fff}
.btn-outline{background:#fff;border:1.5px solid var(--border);color:var(--text)}
.alert{padding:11px 14px;border-radius:10px;font-size:13px;margin-bottom:14px}
.alert-error{background:#fdecee;color:#c92f3a}
.alert-ok{background:#e7f9f1;color:#0e9d67}

/* ============ DARK HOME ============ */
.home-dark{background:var(--dark-bg);color:#e9edf6;padding-bottom:92px}
.home-dark .dtop{display:flex;align-items:center;justify-content:space-between;padding:16px 18px}
.home-dark .dtop .logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:19px;color:#fff}
.home-dark .dtop .logo .dot{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,#2f7cf6,#1f66e0);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px}
.live-badge{display:flex;align-items:center;gap:6px;background:rgba(22,199,132,.15);color:var(--green);
  font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px}
.live-badge i{font-size:8px}
.assets-row{display:flex;gap:40px;padding:6px 20px 16px}
.assets-row .lbl{color:#8b94ac;font-size:12px}
.assets-row .val{font-size:22px;font-weight:700;color:#fff;margin-top:2px}
.earn-card{margin:0 16px 14px;border-radius:20px;padding:22px 18px;text-align:center;
  background:linear-gradient(180deg,#18223c 0%,#141d33 100%);
  border:1px solid var(--dark-line)}
.earn-card .pyramid{width:120px;height:120px;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;
  font-size:70px;color:var(--gold);filter:drop-shadow(0 12px 24px rgba(47,124,246,.35))}
.earn-card h3{color:var(--gold);font-size:18px;font-weight:700;margin-bottom:14px}
.earn-card .getall{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;
  border-radius:12px;background:#222c47;color:#9aa4bd;font-weight:600;font-size:14px;border:1px solid var(--dark-line)}
.earn-card .note{color:#7c86a0;font-size:11px;margin-top:10px}
.announce{display:flex;align-items:center;gap:10px;margin:0 16px 14px;background:#141d33;border:1px solid var(--dark-line);
  border-radius:12px;padding:11px 14px;overflow:hidden}
.announce i{color:var(--blue);font-size:18px;flex-shrink:0}
.announce .marq{white-space:nowrap;overflow:hidden;font-size:13px;color:#c3cbdd}
.announce .marq span{display:inline-block;padding-left:100%;animation:marq 14s linear infinite}
@keyframes marq{to{transform:translateX(-100%)}}
.dbanner{margin:0 16px 14px;border-radius:18px;overflow:hidden;position:relative;height:150px;
  background:linear-gradient(120deg,#1f66e0,#7b2ff7);display:flex;flex-direction:column;justify-content:center;padding:20px;color:#fff}
.dbanner h2{font-size:22px;font-weight:800;line-height:1.1;letter-spacing:.5px}
.dbanner p{font-size:12px;opacity:.9;margin-top:8px;font-style:italic}
.dbanner i{position:absolute;right:-6px;bottom:-14px;font-size:110px;opacity:.16}
.dots{display:flex;gap:6px;justify-content:center;margin:-6px 0 14px}
.dots span{width:7px;height:7px;border-radius:50%;background:#33405f}
.dots span.on{width:18px;border-radius:6px;background:var(--blue)}
.reward-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 16px 16px}
.reward-row a{border-radius:16px;padding:16px;display:flex;flex-direction:column;justify-content:center;position:relative;min-height:78px}
.reward-row .task{background:linear-gradient(135deg,#fdf3d0,#fbe6a2);color:#7a5a00}
.reward-row .bonus{background:linear-gradient(135deg,#d3f7e6,#aeeccf);color:#0b6b47}
.reward-row .rt{font-weight:700;font-size:15px}
.reward-row .rs{font-size:11px;opacity:.85;margin-top:3px;max-width:78%}
.reward-row i{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:30px}
.quick-ico{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 16px 18px}
.quick-ico a{background:#141d33;border:1px solid var(--dark-line);border-radius:14px;padding:14px 4px;text-align:center;color:#c3cbdd}
.quick-ico a i{font-size:24px;color:var(--blue);display:block;margin-bottom:6px}
.quick-ico a span{font-size:11px;font-weight:500}
.promo-vid{margin:0 16px 16px;border-radius:16px;overflow:hidden;border:1px solid var(--dark-line)}
.promo-vid img{width:100%;display:block}

/* ============ PAGE HEAD (light inner pages) ============ */
.top-bar{background:var(--card);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border)}
.page-head{background:var(--card);padding:15px 18px;display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border)}
.page-head h1{font-size:17px;font-weight:600;flex:1;text-align:center}
.page-head .back{font-size:22px;color:var(--text)}
.balance-pill{background:var(--green);color:#fff;font-weight:600;padding:8px 12px;border-radius:12px;font-size:14px;display:flex;align-items:center;gap:6px}
.wrap{padding:16px 16px 24px}

/* Cards */
.card{background:var(--card);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:0 4px 14px rgba(20,30,60,.05)}
.section-title{font-size:15px;font-weight:700;margin:6px 2px 12px;display:flex;justify-content:space-between;align-items:center}
.section-title a{font-size:12px;color:var(--blue);font-weight:600}

/* Wallet hero (blue) */
.hero-balance{background:linear-gradient(135deg,#2f7cf6,#1f66e0);color:#fff;border-radius:20px;padding:22px;
  margin-bottom:16px;box-shadow:0 10px 30px rgba(47,124,246,.32)}
.hero-balance .label{opacity:.9;font-size:13px}
.hero-balance .amount{font-size:32px;font-weight:700;margin:6px 0 14px}
.hero-balance .actions{display:flex;gap:10px}
.hero-balance .actions a{flex:1;background:rgba(255,255,255,.2);text-align:center;padding:11px;border-radius:12px;font-weight:600;font-size:14px;color:#fff}

/* Mining product cards */
.prod{background:#fff;border-radius:16px;padding:16px;margin-bottom:14px;box-shadow:0 4px 14px rgba(20,30,60,.06);position:relative;overflow:hidden}
.prod .recommend{position:absolute;top:0;left:0;background:var(--red);color:#fff;font-size:10px;font-weight:700;padding:4px 12px;border-bottom-right-radius:12px}
.prod .hot{position:absolute;top:10px;right:-26px;background:linear-gradient(135deg,#ff7a45,#ea3943);color:#fff;font-size:9px;font-weight:700;padding:3px 30px;transform:rotate(45deg)}
.prod .top{display:flex;gap:14px;align-items:flex-start;margin-top:6px}
.prod .top img{width:74px;height:74px;border-radius:14px;object-fit:cover;flex-shrink:0}
.prod .pname{font-size:15px;font-weight:700;margin-bottom:8px}
.prod .grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.prod .grid2 .k{font-size:11px;color:var(--muted)}
.prod .grid2 .v{font-size:13px;font-weight:700;color:var(--text)}
.prod .pfoot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.prod .price{font-size:18px;font-weight:800;color:var(--red)}
.prod .price small{display:block;font-size:13px;color:var(--blue);text-decoration:line-through;font-weight:600}
.prod .rent{width:auto;padding:10px 26px;font-size:14px}

/* List items */
.list-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.list-item:last-child{border-bottom:none}
.list-item .ic{width:42px;height:42px;border-radius:12px;background:#eaf1ff;color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.list-item .meta{flex:1}
.list-item .meta .t{font-weight:600;font-size:14px}
.list-item .meta .s{font-size:12px;color:var(--muted)}
.list-item .amt{font-weight:700}
.pos{color:var(--green)} .neg{color:var(--red)}

/* Profile */
.profile-head{background:linear-gradient(135deg,#2f7cf6,#1f66e0);color:#fff;padding:26px 18px;text-align:center}
.profile-head .av{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.25);margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:34px}
.menu-list a{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border-bottom:1px solid var(--border)}
.menu-list a i:first-child{color:var(--blue);font-size:20px}
.menu-list a span{flex:1;font-weight:500}
.menu-list a .arw{color:var(--muted)}

/* Trading (light) */
.trade-pairbar{background:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.trade-pairbar .pair{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px}
#tvchart{height:320px;width:100%;background:#fff}
.trade-controls{padding:14px 16px}
.timer-row,.invest-row{margin-bottom:14px}
.sec-label{font-size:11px;letter-spacing:.5px;color:var(--muted);font-weight:600;margin-bottom:8px;text-transform:uppercase}
.timer-opts{display:flex;gap:8px}
.timer-opts button{flex:1;border:1.5px solid var(--border);background:#fff;padding:11px 4px;border-radius:10px;font-weight:600;font-size:13px;font-family:inherit;cursor:pointer;color:var(--text)}
.timer-opts button.active{background:#eafaf3;border-color:var(--green);color:var(--green-dark)}
.invest-box{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--border);border-radius:12px;padding:6px 10px}
.invest-box button{width:38px;height:38px;border:none;background:#f0f2f5;border-radius:10px;font-size:20px;cursor:pointer;color:var(--text)}
.invest-box input{border:none;text-align:center;font-size:20px;font-weight:700;width:100%;outline:none;font-family:inherit}
.updown{display:flex;gap:12px;margin-top:6px}
.updown button{flex:1;padding:16px;border:none;border-radius:14px;color:#fff;font-weight:700;font-size:16px;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px}
.updown .up{background:var(--green)} .updown .down{background:var(--red)}
.payout-note{text-align:right;font-size:12px;color:var(--muted);margin-top:4px}
.bets-tabs{display:flex;border-bottom:1px solid var(--border)}
.bets-tabs button{flex:1;padding:12px;background:none;border:none;font-weight:600;color:var(--muted);font-family:inherit;font-size:14px;cursor:pointer;border-bottom:2px solid transparent}
.bets-tabs button.active{color:var(--text);border-bottom-color:var(--green)}
table.bets{width:100%;border-collapse:collapse;font-size:13px}
table.bets th{text-align:left;color:var(--muted);font-weight:600;font-size:11px;padding:10px 8px;text-transform:uppercase}
table.bets td{padding:11px 8px;border-top:1px solid var(--border)}
.tag{padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700}
.tag.won{background:#e7f9f1;color:#0e9d67}
.tag.lost{background:#fdecee;color:#c92f3a}
.tag.open{background:#fff4e5;color:#d98a00}

.banner{border-radius:18px;overflow:hidden;margin-bottom:16px;position:relative;background:linear-gradient(135deg,#2f7cf6,#1f66e0);padding:22px;color:#fff}
.banner h2{font-size:20px;font-weight:700} .banner p{font-size:13px;opacity:.9;margin-top:6px;max-width:70%}
.banner i{position:absolute;right:-6px;bottom:-10px;font-size:96px;opacity:.18}
.empty{text-align:center;color:var(--muted);padding:40px 10px;font-size:14px}
.empty i{font-size:46px;display:block;margin-bottom:10px;opacity:.5}

/* Bottom nav */
.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;
  background:#fff;display:flex;justify-content:space-around;align-items:center;padding:8px 0 10px;
  border-top:1px solid var(--border);z-index:100;box-shadow:0 -4px 20px rgba(0,0,0,.06)}
.bottom-nav a{flex:1;text-align:center;color:var(--muted);font-size:10px;font-weight:600}
.bottom-nav a i{font-size:22px;display:block;margin-bottom:2px}
.bottom-nav a.active{color:var(--blue)}
.bottom-nav a.center{margin-top:-28px}
.bottom-nav a.center i{width:54px;height:54px;line-height:54px;border-radius:50%;
  background:linear-gradient(135deg,#2f7cf6,#1f66e0);color:#fff;font-size:26px;margin:0 auto 3px;box-shadow:0 8px 20px rgba(47,124,246,.45)}
/* dark home nav */
.home-dark .bottom-nav{background:#0f1728;border-top:1px solid var(--dark-line)}
.home-dark .bottom-nav a{color:#7c86a0}
.home-dark .bottom-nav a.active{color:var(--blue)}

/* Admin */
.admin-body{background:#f0f2f5;font-family:'Poppins',sans-serif}
.admin-nav{background:#0c1322;color:#fff;padding:14px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.admin-nav .brand{font-weight:700;font-size:18px;margin-right:auto}
.admin-nav a{color:#c9cdd6;font-size:14px;font-weight:500}
.admin-nav a.active,.admin-nav a:hover{color:var(--blue)}
.admin-wrap{max-width:1100px;margin:24px auto;padding:0 16px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px}
.stat{background:#fff;border-radius:14px;padding:20px;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.stat .n{font-size:26px;font-weight:700} .stat .l{color:var(--muted);font-size:13px;margin-top:4px}
.admin-table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.05)}
.admin-table th{background:#f8f9fb;text-align:left;padding:13px 14px;font-size:12px;color:var(--muted);text-transform:uppercase}
.admin-table td{padding:13px 14px;border-top:1px solid var(--border);font-size:14px}
.admin-table .btn{display:inline-block;width:auto;padding:7px 14px;font-size:13px}
.admin-card{background:#fff;border-radius:14px;padding:22px;box-shadow:0 4px 14px rgba(0,0,0,.05);max-width:420px;margin:60px auto}