*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#0b0e17;--bg2:#111827;--bg3:#151c2c;--bg4:#1a2236;
  --green:#00c853;--green2:#00e676;--red:#ff1744;--red2:#ff5252;
  --blue:#0095ff;--border:#1e293b;--border2:#2a3546;
  --text:#ffffff;--text2:#94a3b8;--text3:#64748b;
  --nav-w:60px;--right-w:240px;--top-h:44px;--asset-h:42px;
}
html,body{height:100%;overflow:hidden;}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);font-size:13px;}
button{cursor:pointer;border:none;outline:none;font-family:inherit;}
input,select{font-family:inherit;outline:none;}

/* ===== DESKTOP LAYOUT ===== */
.app{display:grid;grid-template-columns:var(--nav-w) 1fr var(--right-w);grid-template-rows:var(--top-h) var(--asset-h) 1fr;height:100vh;}

/* Top Bar */
.top-bar{grid-column:1/3;grid-row:1;background:var(--bg3);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:12px;z-index:100;}
.logo{display:flex;align-items:center;gap:8px;min-width:140px;}
.logo-icon{width:32px;height:32px;background:linear-gradient(135deg,#00c853,#00e676);border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;}
.logo-text{font-weight:800;font-size:16px;background:linear-gradient(135deg,#fff,#00c853);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.top-right{display:flex;align-items:center;gap:10px;margin-left:auto;}
.bell-btn{position:relative;background:none;color:var(--text2);font-size:16px;padding:4px;}
.badge{position:absolute;top:-2px;right:-2px;background:var(--red);color:#fff;border-radius:50%;width:16px;height:16px;font-size:9px;display:flex;align-items:center;justify-content:center;font-weight:700;}
.live-badge{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;}
.live-dot{width:8px;height:8px;background:var(--green);border-radius:50%;animation:pulse 1.5s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.4);opacity:0.7;}}
.balance-display{font-weight:700;font-size:15px;color:var(--text);}
.demo-tag{background:rgba(0,149,255,0.15);color:var(--blue);border:1px solid rgba(0,149,255,0.3);border-radius:4px;padding:2px 8px;font-size:11px;font-weight:600;}
.deposit-btn{background:linear-gradient(135deg,#00c853,#00e676);color:#fff;border-radius:6px;padding:8px 18px;font-weight:700;font-size:13px;cursor:pointer;transition:all .2s;}
.deposit-btn:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(0,200,83,0.4);}
.withdraw-btn{background:transparent;border:1px solid var(--border2);color:var(--text2);border-radius:6px;padding:8px 14px;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s;}
.withdraw-btn:hover{border-color:var(--blue);color:var(--blue);}

/* Asset Pair Bar */
.asset-bar{grid-column:2/3;grid-row:2;background:var(--bg3);border-bottom:1px solid var(--border);display:flex;align-items:center;overflow-x:auto;gap:2px;padding:0 8px;}
.asset-bar::-webkit-scrollbar{height:3px;}
.asset-bar::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
.asset-chip{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;cursor:pointer;white-space:nowrap;transition:all .2s;color:var(--text2);min-width:90px;}
.asset-chip:hover,.asset-chip.active{background:rgba(0,200,83,0.1);color:var(--text);}
.asset-chip.active{border:1px solid rgba(0,200,83,0.3);}
.flag-pair{font-size:16px;display:flex;}
.chip-name{font-size:12px;font-weight:600;}
.chip-pct{font-size:11px;color:var(--green);font-weight:600;}

/* Left Nav Sidebar */
.left-nav{grid-column:1;grid-row:2/4;background:var(--bg3);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:2px;z-index:50;}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border-radius:8px;cursor:pointer;width:52px;color:var(--text3);transition:all .2s;text-align:center;}
.nav-item:hover,.nav-item.active{background:rgba(0,149,255,0.1);color:var(--blue);}
.nav-item.active{color:var(--blue);}
.nav-icon{font-size:18px;}
.nav-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;}
.nav-spacer{flex:1;}
.nav-percent{background:rgba(0,200,83,0.15);border:1px solid rgba(0,200,83,0.3);border-radius:6px;padding:4px 8px;font-size:11px;font-weight:700;color:var(--green);margin-top:4px;}
.join-us-btn{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;border-radius:8px;padding:8px;width:44px;height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;font-weight:700;gap:2px;cursor:pointer;border:none;}

/* Chart Area */
.chart-area{grid-column:2;grid-row:3;background:#0d1117;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.chart-toolbar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:rgba(0,0,0,0.3);border-bottom:1px solid var(--border);}
.pair-info{display:flex;align-items:center;gap:8px;}
.pair-flags-lg{font-size:22px;}
.pair-name-lg{font-weight:700;font-size:14px;}
.pair-otc{background:rgba(0,149,255,0.2);color:var(--blue);border-radius:4px;padding:1px 6px;font-size:10px;font-weight:600;}
.pair-pct-lg{color:var(--green);font-weight:700;font-size:14px;}
.pair-chevron{color:var(--text3);cursor:pointer;}
.toolbar-spacer{flex:1;}

/* Right Panel */
.right-panel{grid-column:3;grid-row:1/4;background:#1b2230;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;z-index:200;}
.rp-inner-scroll { flex:1; overflow-y:auto; display:flex; flex-direction:column; padding:0 8px 8px 8px; }
.rp-inner-scroll::-webkit-scrollbar{width:4px;}
.rp-inner-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}

.rp-top-btns { display: flex; gap: 8px; padding: 12px 10px; }
.rp-dt-btn { flex: 1; padding: 12px 0; border-radius: 6px; border: none; cursor: pointer; font-weight: 700; font-size: 14px; color: #fff; display:flex; align-items:center; justify-content:center; gap: 4px; transition: all 0.2s; }
.rp-dt-btn:hover { transform: translateY(-1px); }
.rp-deposit { background: #00c853; }
.rp-withdraw { background: #363a45; }

.rp-trade-box { background: #212735; border-radius: 8px; padding: 16px 14px; margin: 0 4px 12px 4px; display:flex; flex-direction:column; }
.rp-pair-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.rp-pair-flags { font-size: 18px; display: flex; }
.rp-pair-name { color: #fff; font-size: 15px; font-weight: 800; }
.rp-pair-pct { color: #8c93a0; font-weight: 800; font-size: 15px; margin-left: auto; }

.rp-pending-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rp-pending-left { display: flex; align-items: center; gap: 6px; color: #3fb1f7; font-size: 11px; font-weight: 800; letter-spacing:0.5px; }

.toggle-wrap{position:relative;width:34px;height:18px;}
.toggle-wrap input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;inset:0;background:var(--border2);border-radius:20px;cursor:pointer;transition:.3s;}
.toggle-slider::before{content:'';position:absolute;width:12px;height:12px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s;}
.toggle-wrap input:checked+.toggle-slider{background:var(--blue);}
.toggle-wrap input:checked+.toggle-slider::before{transform:translateX(16px);}

.rp-input-field { position: relative; border: 1px solid #3e4a5d; border-radius: 8px; margin: 16px 0 12px; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; background: transparent; }
.rp-input-label { position: absolute; top: -7px; left: 16px; background: #212735; padding: 0 6px; font-size: 11px; color: #7b8599; }
.rp-switch-text { position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%); background: #212735; padding: 0 8px; font-size: 9px; color: #3fb1f7; font-weight: 800; white-space:nowrap; }
.rp-btn-minus, .rp-btn-plus { background: #2f3647; color: #b0b5be; border: none; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: all .2s; }
.rp-btn-minus:hover, .rp-btn-plus:hover { background: #3e485e; color: #fff; }
.rp-val { font-size: 15px; font-weight: 700; color: #fff; flex: 1; text-align: center; }
.rp-val-input { background: none; border: none; color: #fff; font-size: 15px; font-weight: 700; width: 100%; text-align: center; outline: none; }
.time-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; width: 100%; background: #212735; border: 1px solid #3e4a5d; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.6); z-index: 1000; max-height: 220px; overflow-y: auto; }
.time-dropdown.show { display: block; }
.time-opt { padding: 10px 12px; text-align: center; font-size: 13px; font-weight: 600; color: #8c93a0; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.03); transition: all 0.2s; }
.time-opt:last-child { border-bottom: none; }
.time-opt:hover, .time-opt.active { background: rgba(0,149,255,0.1); color: #3fb1f7; }
.time-dropdown::-webkit-scrollbar { width: 4px; }
.time-dropdown::-webkit-scrollbar-thumb { background: #3e4a5d; border-radius: 2px; }
#mobileTimeDropdown { top: auto; bottom: calc(100% + 8px); box-shadow: 0 -8px 24px rgba(0,0,0,0.6); }

.rp-payout-row { display: flex; align-items: baseline; margin: 8px 0 16px; font-size: 12px; }
.rp-payout-lbl { color: #8c93a0; font-weight: 600; }
.rp-payout-dots { flex: 1; border-bottom: 2px dotted #3e4a5d; margin: 0 8px; transform: translateY(-4px); }
.rp-payout-val { color: #fff; font-weight: 700; font-size: 14px; }

.rp-trade-btns { display: flex; flex-direction: column; gap: 10px; }
.btn-up-lg, .btn-down-lg { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: 6px; border: none; cursor: pointer; font-weight: 800; font-size: 16px; color: #fff; transition:all .2s; }
.btn-up-lg { background: #00c853; }
.btn-up-lg:hover { background: #00e676; transform:translateY(-1px); }
.btn-down-lg { background: #ff5252; }
.btn-down-lg:hover { background: #ff1744; transform:translateY(-1px); }
.btn-arrow-circle { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color:#fff; }
.btn-up-lg .btn-arrow-circle { background: rgba(255,255,255,0.25); }
.btn-down-lg .btn-arrow-circle { background: rgba(255,255,255,0.25); }

.rp-trades-section { flex: 1; display:flex; flex-direction:column; padding: 0 4px; }
.rp-trades-tabs { display: flex; border-bottom: 1px solid var(--border); }
.rp-tab { flex: 1; text-align: center; padding: 12px 0; color: #8c93a0; font-size: 13px; font-weight: 700; border-top: 2px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; background: #1e2433; }
.rp-tab.active { border-top-color: #3fb1f7; background: #212735; color: #fff; }
.rp-tab-badge { background: #2a3345; padding: 2px 6px; border-radius: 8px; font-size: 10px; color:#fff; }
.rp-trades-body { background: #212735; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 20px; border-radius:0 0 8px 8px; }
.empty-box-icon { width: 56px; height: 56px; background: #2e3646; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.empty-box-icon svg { stroke: #fff; fill: none; }
.rp-trades-body p { color: #8c93a0; font-size: 13px; line-height: 1.5; }

/* Chart Bottom Tools */
.chart-bottom-tools{display:flex;align-items:center;gap:8px;padding:6px 12px;background:rgba(0,0,0,0.2);border-top:1px solid var(--border);}
.bottom-tool{background:none;border:none;color:var(--text3);font-size:14px;cursor:pointer;padding:4px 6px;border-radius:4px;transition:all .2s;}
.bottom-tool:hover{background:rgba(255,255,255,0.05);color:var(--text);}

/* ===== MOBILE UI ===== */
.mobile-app{display:none;flex-direction:column;height:100dvh;height:stretch;background:var(--bg);}
.m-top-bar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--bg3);border-bottom:1px solid var(--border);}
.m-top-left{display:flex;align-items:center;gap:8px;}
.m-menu-btn{background:none;border:none;color:var(--text);font-size:20px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;}
.m-menu-dots{display:flex;flex-direction:column;gap:4px;padding:4px;}
.m-menu-dots span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;}
.m-live-wrap{display:flex;align-items:center;gap:6px;}
.m-live-dot{width:7px;height:7px;background:var(--green);border-radius:50%;animation:pulse 1.5s ease-in-out infinite;}
.m-balance{font-weight:700;font-size:15px;}
.m-bell{position:relative;background:none;border:none;font-size:18px;color:var(--text2);padding:4px;}
.m-bell-badge{position:absolute;top:0;right:0;background:var(--red);color:#fff;border-radius:50%;width:14px;height:14px;font-size:8px;display:flex;align-items:center;justify-content:center;font-weight:700;}
.m-deposit-btn{background:linear-gradient(135deg,#00c853,#00e676);color:#fff;border-radius:6px;padding:6px 14px;font-weight:700;font-size:12px;border:none;cursor:pointer;}
.m-chart{flex:1;position:relative;background:#0d1117;overflow:hidden;}
.m-chart-label{position:absolute;background:rgba(0,0,0,0.8);border:1px solid var(--border2);border-radius:4px;padding:2px 6px;font-size:10px;color:var(--text2);}
.m-chart-label.begin{top:10px;left:30%;}
.m-chart-label.end{top:10px;right:10%;}
.m-price-tag{position:absolute;right:0;background:rgba(0,149,255,0.9);border-radius:4px 0 0 4px;padding:2px 8px;font-size:11px;font-weight:700;color:#fff;}
.m-chart-time-info{position:absolute;top:8px;left:8px;background:rgba(13,17,23,0.85);border-radius:6px;padding:4px 8px;font-size:10px;color:var(--text2);}
.m-chart-time-info .m-time-val{font-weight:700;font-size:12px;color:var(--text);}
canvas#mobileChart{width:100%;height:100%;}
.m-trading-panel{background:var(--bg3);border-top:1px solid var(--border);padding:10px 12px;display:flex;flex-direction:column;gap:8px;}
.m-pair-row{display:flex;align-items:center;justify-content:space-between;}
.m-pair-info{display:flex;align-items:center;gap:6px;}
.m-pair-flags{font-size:18px;}
.m-pair-name{font-weight:700;font-size:13px;}
.m-pair-pct{color:var(--green);font-weight:700;font-size:13px;}
.m-pending-toggle{display:flex;align-items:center;gap:6px;}
.m-pending-lbl{font-size:10px;color:var(--blue);font-weight:600;}
.m-inputs-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.m-input-group{display:flex;flex-direction:column;gap:3px;}
.m-input-lbl{font-size:10px;color:var(--text3);}
.m-input-row{display:flex;align-items:center;background:var(--bg);border:1px solid var(--border2);border-radius:6px;overflow:hidden;}
.m-input-row input{flex:1;background:none;border:none;color:var(--text);padding:6px 8px;font-size:13px;font-weight:600;text-align:center;}
.m-input-btn{background:none;border:none;color:var(--text3);padding:0 8px;font-size:16px;cursor:pointer;height:32px;display:flex;align-items:center;}
.m-switch-center{text-align:center;font-size:9px;color:var(--blue);font-weight:700;letter-spacing:1px;}
.m-payout-row{display:flex;justify-content:flex-end;font-size:12px;color:var(--text2);}
.m-payout-row span{font-weight:700;color:var(--text);margin-left:6px;}
.m-trade-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.m-btn-up{background:linear-gradient(135deg,#00c853,#00e676);border:none;border-radius:8px;padding:13px;color:#fff;font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;}
.m-btn-down{background:linear-gradient(135deg,#ff1744,#ff5252);border:none;border-radius:8px;padding:13px;color:#fff;font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;}
.m-bottom-nav{display:flex;background:var(--bg3);border-top:1px solid var(--border);}
.m-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;cursor:pointer;color:var(--text3);position:relative;transition:all .2s;}
.m-nav-item.active{color:var(--blue);}
.m-nav-icon{font-size:19px;}
.m-nav-badge{position:absolute;top:4px;right:calc(50% - 16px);background:var(--red);color:#fff;border-radius:50%;width:14px;height:14px;font-size:8px;display:flex;align-items:center;justify-content:center;font-weight:700;}
.m-nav-lbl{font-size:9px;font-weight:600;}

/* Notification */
.notification{position:fixed;top:60px;right:16px;background:linear-gradient(135deg,#00c853,#00e676);color:#fff;border-radius:10px;padding:12px 20px;font-size:13px;font-weight:600;z-index:9999;transform:translateX(120%);transition:transform .4s ease;box-shadow:0 8px 30px rgba(0,200,83,0.4);}
.notification.show{transform:translateX(0);}

@media(max-width:767px){
  .app{display:none;}
  .mobile-app{display:flex;}
  .market-overlay { align-items: flex-end; }
  .market-modal { width: 100%; max-width: 100%; border-radius: 20px 20px 0 0; max-height: 90vh; transform: translateY(100%); padding-bottom: 20px; }
  .market-overlay.show .market-modal { transform: translateY(0); }
  .account-dropdown { position: fixed; top: 56px; left: 12px; right: 12px; width: auto; z-index: 9999; }
  .support-overlay { align-items: flex-end; }
  .support-modal {
    width: 100%; max-width: 100%; max-height: 92vh;
    border-radius: 20px 20px 0 0; transform: translateY(100%);
  }
  .support-overlay.show .support-modal { transform: translateY(0); }
  .support-form { padding: 16px 18px 20px; }
  .sf-textarea { min-height: 80px; }
}
/* --- Premium Mobile Menu --- */
.m-premium-menu {
    position: absolute;
    bottom: calc(100% + 15px);
    right: 12px;
    width: 200px;
    background: rgba(21, 28, 44, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) scale(0.95);
    transform-origin: bottom right;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
}

.m-premium-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.m-premium-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.m-premium-menu-item:active {
    background: rgba(255, 255, 255, 0.1);
}

.m-premium-menu-separator {
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    margin: 6px 0;
}

.m-premium-menu-item .menu-ico {
    font-size: 16px;
    opacity: 0.8;
}

.m-premium-menu-item.logout {
    color: var(--red2);
}
.m-premium-menu-item.logout .menu-ico {
    opacity: 1;
}

/* Responsive: small desktop tablet adjustments */
@media(max-width:1100px) and (min-width:768px){
  :root{--right-w:220px;--nav-w:50px;}
  .withdraw-btn{display:none;}
}