/* MVC additions (keeps original look & feel) */
.inputDark,
.form-control.inputDark,
.form-select.inputDark{
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.92) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
}
.form-control.inputDark::placeholder,
.form-select.inputDark::placeholder{ color: rgba(255,255,255,.45) !important; }

.depositMethods{ display:flex; flex-wrap:wrap; gap:12px; }
.depBtn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.85);
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 700;
  display:flex;
  align-items:center;
  gap:10px;
}
.depBtn.active{
  border-color: rgba(49,130,246,.55);
  box-shadow: 0 0 0 4px rgba(49,130,246,.10);
}

.withdrawTop{ border:1px solid rgba(49,130,246,.35); border-radius:14px; padding:10px; }
.withdrawMethod{
  width:100%;
  background: transparent;
  border: none;
  color: rgba(49,130,246,.95);
  padding: 14px;
  border-radius: 12px;
  font-weight: 800;
}

.smallHelp{ color: rgba(255,255,255,.55); font-size: 12px; }

.supportHero{display:none;}

/* Auth layout */
.authWrap{ min-height:100vh; display:grid; grid-template-columns: 1.1fr .9fr; background: var(--bg); }
.authLeft{ padding:32px; }
.authRight{ position:relative; border-left:1px solid rgba(255,255,255,.07); display:flex; align-items:center; justify-content:center; }
.authBrand{ margin-bottom:24px; }
.authCard{ max-width:520px; padding:28px; border-radius:18px; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); }
.authTopIcons{ position:absolute; top:18px; right:18px; display:flex; gap:10px; }
.authLogo{ text-align:center; }
.logoMark{ width:180px; height:180px; margin:0 auto 18px; border-radius:22px; border:2px solid rgba(255,255,255,.15); position:relative; }
.logoMark:before{ content:''; position:absolute; inset:18px; background: rgba(148,255,107,.85); clip-path: polygon(50% 10%, 90% 90%, 10% 90%); border-radius:10px; }
.logoMark:after{ content:''; position:absolute; inset:18px; border:2px solid rgba(255,255,255,.85); clip-path: polygon(50% 0%, 100% 82%, 0% 82%); border-radius:10px; }
.logoText{ font-size:54px; letter-spacing:4px; font-weight:300; color: rgba(255,255,255,.92); }
.logoSub{ margin-top:14px; font-size:14px; color: rgba(255,255,255,.65); display:flex; gap:8px; align-items:center; justify-content:center; }
.tri.sm{ width:10px; height:10px; display:inline-block; background: rgba(148,255,107,.85); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.link{ color: rgba(49,130,246,.95); text-decoration:none; font-weight:700; }

@media (max-width: 992px){
  .authWrap{ grid-template-columns: 1fr; }
  .authRight{ display:none; }
  .authLeft{ padding:18px; }
}


/* ===== Main app layout fixes ===== */
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
a{ text-decoration:none; }
.pageWrap{ padding:24px; }
.topIcon{
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.9);
  overflow:hidden;
}
.topIcon img{ width:24px; height:auto; display:block; }

.gridMain{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap:18px;
  align-items:start;
}
.mainCol{ min-width:0; }
.sideCol{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:18px;
  position:sticky;
  top:84px;
}

.cardBig,
.cardSide{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}
.cardBig{ padding:22px; }
.cardSide{ padding:18px; }
.cardTitle{
  font-size:30px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.2px;
  color: rgba(255,255,255,.97);
}
.cardSubtitle{
  font-size:15px;
  font-weight:700;
  color: rgba(255,255,255,.76);
}

.statsRow{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin-top:18px;
}
.statBox{
  min-height:92px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,15,25,.34);
  padding:16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.statBox .sk{
  font-size:12px;
  color: rgba(255,255,255,.58);
  font-weight:700;
  margin-bottom:8px;
}
.statBox .sv{
  font-size:24px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:.2px;
  color: rgba(255,255,255,.97);
}

.badgeDot{
  min-width:24px;
  height:24px;
  padding:0 8px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(45,140,255,.16);
  border:1px solid rgba(45,140,255,.32);
  color:#cfe3ff;
  font-size:12px;
  font-weight:900;
}
.emptyBlock{
  margin-top:16px;
  min-height:104px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.emptyMsg{
  color: rgba(255,255,255,.55);
  font-weight:800;
}
.bigEmpty{
  height:360px;
  margin-top:18px;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06));
}

.meter{
  position:relative;
  width:100%;
  aspect-ratio: 1 / 1;
  max-width:250px;
  margin:6px auto 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.meterArc{
  position:absolute;
  inset:0;
  border-radius:50%;
  background: conic-gradient(from 210deg, rgba(45,140,255,.95), rgba(91,198,255,.9) 32%, rgba(41,211,147,.9) 62%, rgba(255,255,255,.06) 62% 100%);
  -webkit-mask: radial-gradient(circle at center, transparent 57%, #000 58%);
          mask: radial-gradient(circle at center, transparent 57%, #000 58%);
}
.meterArc:after{
  content:'';
  position:absolute;
  inset:16%;
  border-radius:50%;
  background: rgba(13,23,36,.92);
  border:1px solid rgba(255,255,255,.07);
}
.meterCenter{
  position:relative;
  z-index:2;
  text-align:center;
}
.mK{ color: rgba(255,255,255,.55); font-size:12px; font-weight:700; }
.mV{ color: rgba(255,255,255,.98); font-size:28px; font-weight:900; line-height:1.1; }
.sideTitle{ text-align:center; font-weight:800; margin:10px 0 14px; }

.segTabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.seg{
  flex:1 1 0;
  min-width:140px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.72);
  padding:12px 14px;
  font-weight:800;
}
.seg.active{
  color:#d7e8ff;
  border-color: rgba(45,140,255,.34);
  background: rgba(45,140,255,.14);
}
.searchBox{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:46px;
  padding:0 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.58);
}
.searchBox input{
  flex:1;
  background:transparent;
  border:0;
  outline:none;
  color: rgba(255,255,255,.92);
}
.searchBox input::placeholder{ color: rgba(255,255,255,.40); }
.btnJoin{
  white-space:nowrap;
  min-height:46px;
  border-radius:14px !important;
}
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip.icon{ width:34px; display:inline-flex; align-items:center; justify-content:center; padding:0; }

.tableMini{
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  overflow:hidden;
  background: rgba(255,255,255,.02);
}
.tableMini .tHead,
.tableMini .tRow{
  display:grid;
  gap:12px;
  align-items:center;
  padding:12px 14px;
}
.tableMini .tHead{
  font-size:12px;
  color: rgba(255,255,255,.55);
  font-weight:800;
  background: rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.tableMini .tRow{
  font-size:13px;
  font-weight:800;
  color: rgba(255,255,255,.92);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.tableMini .tRow:last-child{ border-bottom:0; }
.tableMini .nameCell{ display:flex; align-items:center; }
.good{ color:#63d4a4 !important; }
.bad{ color:#ff8c8c !important; }

#opsTable .tHead, #opsTable .tRow{ grid-template-columns: 1.2fr .7fr .55fr .8fr .8fr .75fr 1fr; }
#retTable .tHead, #retTable .tRow{ grid-template-columns: .5fr .8fr .8fr 1fr; }

@media (max-width: 1399px){
  .statsRow{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 1199px){
  .gridMain{ grid-template-columns: 1fr; }
  .sideCol{ position:static; }
  .statsRow{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px){
  .pageWrap{ padding:14px; }
  .cardBig{ padding:16px; }
  .cardTitle{ font-size:24px; }
  .statsRow{ grid-template-columns: 1fr; }
  .topbar{ padding:10px 12px; gap:8px; flex-wrap:wrap; height:auto; }
  .topwidgets{ width:100%; order:3; justify-content:flex-start; }
  .tw{ min-width:unset; width:100%; }
  .tableMini{ overflow-x:auto; }
  #opsTable .tHead, #opsTable .tRow{ min-width:860px; }
  #retTable .tHead, #retTable .tRow{ min-width:520px; }
}


.dashOpsHead, .dashOpsRow{ grid-template-columns: 1.4fr .8fr .9fr .9fr .8fr; }
.mobileDock{ display:none; }

@media (max-width: 767px){
  body{ padding-bottom: 86px; }
  .sidebar{ display:none; }
  .sidebarOverlay{ display:none !important; }
  .content{ min-width:0; }
  .topbar{ position:sticky; top:0; z-index:15; }
  .mobileDock{
    position:fixed;
    left:10px;
    right:10px;
    bottom:10px;
    z-index:60;
    display:grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap:4px;
    padding:8px 6px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(17,31,47,.98), rgba(13,23,36,.98));
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
    backdrop-filter: blur(12px);
  }
  .dockItem{
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-height:58px;
    border-radius:14px;
    color:rgba(234,240,255,.75);
    font-size:11px;
    font-weight:800;
    text-align:center;
    padding:6px 4px;
  }
  .dockItem i{ font-size:22px; line-height:1; }
  .dockItem.active{
    color:#fff;
    background: rgba(45,140,255,.16);
    border:1px solid rgba(45,140,255,.32);
  }
  .dockItem span{
    display:block;
    max-width:100%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .dashOpsHead, .dashOpsRow{ min-width:680px; }
}


/* ===== Responsive hardening + reliable mobile sidebar ===== */
html, body{max-width:100%;}
.app, .content, .pageWrap, .mainCol, .cardBig, .cardSide{min-width:0;}
img, svg, canvas, table{max-width:100%;}

@media (max-width: 992px){
  .sidebar{
    display:flex !important;
    width:min(86vw, 320px) !important;
    max-width:320px !important;
    transform:translateX(-105%);
    visibility:hidden;
    pointer-events:none;
  }
  body.sidebar-open .sidebar{
    transform:translateX(0) !important;
    visibility:visible;
    pointer-events:auto;
  }
  body.sidebar-open .sidebarOverlay{ display:block !important; }
  .content{ width:100%; min-width:0; }
  .pageWrap{ padding:16px; }
  .topbar{
    height:auto;
    min-height:72px;
    padding:12px 14px;
    align-items:flex-start;
    gap:10px;
    flex-wrap:wrap;
  }
  .leftTop, .rightTop{ flex:0 0 auto; }
  .topwidgets{
    order:3;
    width:100%;
    min-width:0;
    justify-content:flex-start;
    flex-wrap:wrap;
  }
  .tw{
    min-width:0;
    flex:1 1 220px;
  }
  .brandText{display:block;}
}

@media (max-width: 767px){
  body{ padding-bottom: 92px; }
  .sidebar{
    display:flex !important;
    width:min(88vw, 320px) !important;
    max-width:320px !important;
  }
  .content{ min-width:0; width:100%; }
  .pageWrap{ padding:12px; }
  .gridMain{ grid-template-columns:1fr; gap:14px; }
  .sideCol{ gap:14px; }
  .cardBig, .cardSide{ padding:16px; }
  .segTabs{ gap:8px; }
  .seg{ min-width:0; flex:1 1 100%; }
  .depositMethods{ display:grid; grid-template-columns:1fr 1fr; }
  .depBtn{ width:100%; justify-content:center; }
  .searchBox{ min-width:0; }
  .tableMini{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tableMini .tHead, .tableMini .tRow{ min-width:max-content; }
  .mobileDock{ z-index:55; }
}

@media (max-width: 480px){
  .pageWrap{ padding:10px; }
  .cardTitle{ font-size:22px; }
  .depositMethods{ grid-template-columns:1fr; }
  .topbar{ padding:10px; }
  .tw{ flex-basis:100%; }
  .dockItem i{ font-size:20px; }
  .dockItem span{ font-size:10px; }
}

/* ===== Final responsive/sidebar fixes ===== */
body:not(.sidebar-collapsed) .sidebar{
  width: var(--sidebarExpanded, 290px) !important;
}
body:not(.sidebar-collapsed) .sidebar .brandText,
body:not(.sidebar-collapsed) .sidebar .navItem .lbl,
body:not(.sidebar-collapsed) .sidebar .shareTitle{
  display:block !important;
}
body:not(.sidebar-collapsed) .sidebar .shareRow{
  justify-content:flex-start !important;
  padding-left:12px !important;
  padding-right:12px !important;
}
body.sidebar-collapsed .sidebar{
  width: var(--sidebarCollapsed, 74px) !important;
}

@media (max-width: 991.98px){
  .app{display:block !important;}
  .sidebar{
    position:fixed !important;
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    height:100vh !important;
    width:min(82vw, 320px) !important;
    max-width:320px !important;
    transform:translateX(-108%) !important;
    transition:transform .22s ease !important;
    z-index:1200 !important;
    overflow-y:auto !important;
    border-right:1px solid rgba(255,255,255,.10) !important;
  }
  body.sidebar-open .sidebar{
    transform:translateX(0) !important;
  }
  body.sidebar-open .sidebarOverlay{
    display:block !important;
    z-index:1190 !important;
  }
  body .content{
    width:100% !important;
    margin-left:0 !important;
    min-width:0 !important;
  }
  body .pageWrap{
    padding:12px !important;
  }
  .topbar{
    display:grid !important;
    grid-template-columns: 44px 1fr auto !important;
    align-items:center !important;
    gap:10px !important;
    min-height:64px !important;
    padding:10px 12px !important;
  }
  .leftTop{grid-column:1 !important;}
  .topwidgets{
    grid-column:2 !important;
    width:100% !important;
    justify-content:flex-start !important;
    gap:8px !important;
    min-width:0 !important;
  }
  .tw{
    min-width:0 !important;
    flex:1 1 0 !important;
    max-width:none !important;
    padding:8px 10px !important;
  }
  .tw .k{max-width:none !important; font-size:11px !important;}
  .tw .v{font-size:13px !important;}
  .rightTop{grid-column:3 !important; gap:8px !important;}
  .topIcon{width:40px !important; height:40px !important;}
  .gridMain{grid-template-columns:1fr !important; gap:14px !important;}
  .mainCol,.sideCol,.cardBig,.cardSide{min-width:0 !important;}
  .sideCol{position:static !important; top:auto !important;}
  .statsRow{grid-template-columns:repeat(2, minmax(0,1fr)) !important;}
  .segTabs{display:grid !important; grid-template-columns:1fr 1fr !important;}
  .segTabs > *{min-width:0 !important;}
  .d-flex.gap-2.mt-3{flex-wrap:wrap !important;}
  .btnJoin{width:100% !important;}
}

@media (max-width: 767.98px){
  body{padding-bottom:88px !important;}
  .topwidgets{display:none !important;}
  .topbar{grid-template-columns:44px 1fr auto !important;}
  .statsRow{grid-template-columns:1fr !important;}
  .cardBig,.cardSide{padding:14px !important;}
  .cardTitle{font-size:22px !important;}
  .cardSubtitle{font-size:18px !important;}
  .tableMini{overflow-x:auto !important;}
  .tableMini .tHead,.tableMini .tRow{min-width:max-content !important;}
  #opsTable .tHead, #opsTable .tRow{min-width:780px !important;}
  #retTable .tHead, #retTable .tRow{min-width:520px !important;}
  .dashOpsHead, .dashOpsRow{min-width:620px !important;}
  .meter{max-width:210px !important;}
  .mobileDock{
    display:grid !important;
    position:fixed !important;
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    z-index:1100 !important;
  }
}

@media (max-width: 480px){
  .topbar{padding:8px 10px !important;}
  .pageWrap{padding:10px !important;}
  .rightTop{gap:6px !important;}
  .topIcon{width:36px !important; height:36px !important; border-radius:12px !important;}
  .sidebar{width:min(86vw, 300px) !important;}
}