/* =====================================================================
   Greetons UI v2
   1) Expandable transaction cards  (+ "Verified" badge)
   2) Full-width desktop layout     (sidebar nav, multi-column grids)
   ===================================================================== */

/* ---------- 1. Transaction cards ---------- */
.tx-list{display:flex;flex-direction:column;gap:10px}
.tx-card{background:linear-gradient(160deg,var(--card),var(--card-grad2));border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:border-color .2s,box-shadow .2s}
.tx-card.open{border-color:var(--gold2);box-shadow:0 8px 24px var(--shadow)}
.tx-head{display:flex;align-items:center;gap:12px;padding:13px 14px;cursor:pointer;user-select:none}
.tx-head:active{background:rgba(139,123,255,.06)}
.tx-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
.tx-ic.ok{background:rgba(46,204,113,.14);color:var(--green);border:1px solid rgba(46,204,113,.3)}
.tx-ic.wait{background:rgba(245,158,11,.14);color:#f59e0b;border:1px solid rgba(245,158,11,.3)}
.tx-ic.bad{background:rgba(231,76,60,.14);color:var(--red);border:1px solid rgba(231,76,60,.3)}
.tx-mid{flex:1;min-width:0}
.tx-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:700;font-size:14px}
.tx-title>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.tx-mid small{display:block;color:var(--sub);font-size:11.5px;margin-top:3px}
.tx-right{text-align:right;flex:0 0 auto}
.tx-amt{font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.tx-amt.pos,.tx-body b.pos{color:var(--green)}
.tx-amt.neg,.tx-body b.neg{color:var(--red)}
.tx-chev{color:var(--sub);font-size:12px;transition:transform .25s;flex:0 0 auto}
.tx-card.open .tx-chev{transform:rotate(180deg)}

/* Verified badge */
.vbadge{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:#fff;background:linear-gradient(135deg,#22c55e,#0e9f6e);padding:2px 8px 2px 6px;border-radius:20px;box-shadow:0 2px 8px -2px rgba(34,197,94,.6);white-space:nowrap}
.vbadge i{font-size:11px}

/* status pill */
.tx-st{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px}
.tx-st.sm{font-size:10.5px;padding:2px 8px;margin-top:4px}
.tx-st.ok{background:rgba(46,204,113,.15);color:var(--green)}
.tx-st.wait{background:rgba(245,158,11,.16);color:#f59e0b}
.tx-st.bad{background:rgba(231,76,60,.15);color:var(--red)}

/* expandable body */
.tx-body{max-height:0;overflow:hidden;transition:max-height .3s ease;background:rgba(0,0,0,.14)}
[data-theme="light"] .tx-body{background:rgba(15,23,42,.035)}
.tx-card.open .tx-body{max-height:900px}
.tx-grid{padding:4px 14px 6px;border-top:1px dashed var(--line)}
.tx-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.tx-row:last-child{border-bottom:none}
.tx-row>span{color:var(--sub);flex:0 0 auto}
.tx-row>b{text-align:right;font-weight:600;word-break:break-all;min-width:0}
.tx-row>b.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.tx-copy{color:var(--gold);cursor:pointer;margin-left:6px}
.tx-verified{margin:2px 14px 14px;padding:10px 12px;border-radius:12px;font-size:12px;display:flex;align-items:center;gap:9px;
  color:var(--green);background:rgba(46,204,113,.1);border:1px solid rgba(46,204,113,.28)}
.tx-verified i{font-size:15px}

/* desktop sidebar extras are hidden on mobile */
.nav-brand,.nav-desk-only,.nav-foot{display:none}

/* ---------- 2. Desktop: use the whole screen ---------- */
@media (min-width:900px){
  :root{--side-w:236px}
  body{max-width:none;margin:0}

  /* bottom nav -> left sidebar */
  body.has-nav #app{margin-left:var(--side-w);padding-bottom:40px;min-height:100vh}
  body.has-nav .bottom-nav{
    left:0;top:0;bottom:0;transform:none;width:var(--side-w);max-width:none;flex-direction:column;justify-content:flex-start;gap:4px;
    padding:20px 14px 18px;border-top:none;border-right:1px solid var(--line);box-shadow:6px 0 28px var(--shadow);overflow-y:auto}
  body.has-nav .bottom-nav.nav-hidden{transform:none;opacity:1;pointer-events:auto}
  .nav-brand{display:flex;align-items:center;gap:11px;padding:4px 10px 18px;margin-bottom:6px;border-bottom:1px solid var(--line);font-weight:800;font-size:19px;letter-spacing:.3px}
  .nav-brand img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(139,123,255,.5))}
  .nav-desk-only{display:flex}
  .nav-sep{display:block;height:1px;background:var(--line);margin:10px 8px;flex:0 0 auto}
  .nav-item{flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:14px;padding:12px 14px;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer}
  .nav-item i{width:22px;text-align:center;font-size:17px}
  .nav-item:hover{background:rgba(139,123,255,.09);color:var(--txt)}
  .nav-item.active{background:var(--gold-grad-soft);color:var(--gold);box-shadow:inset 3px 0 0 var(--gold)}
  .nav-item.active i{transform:none}
  .bottom-nav[data-extra] .nav-item:not(.nav-desk-only).active{background:none;box-shadow:none;color:var(--sub)}
  .nav-foot{display:block;margin-top:auto;padding:12px 10px 0;font-size:11px;color:var(--muted,var(--sub));border-top:1px solid var(--line)}

  /* pages: wide, comfortable gutters */
  .top-head,.sub-head{padding-left:32px;padding-right:32px;padding-top:18px}
  .sub-head{padding-top:18px}
  .pad{padding:24px 32px}
  .tabs{padding:4px 32px 16px}
  .banner,.bal-strip,.vip-banner,.bt-promo,.spin-hero,.spin-min{margin-left:32px;margin-right:32px}
  .banner p{max-width:50%}
  .banner{padding:30px 32px}
  .banner h2{font-size:26px}
  .bal-strip{padding:24px 28px}.bal-strip .bl-val{font-size:40px}
  .rw-row{padding:0 32px;gap:20px}
  .sec-head,.news-list,.market{margin-left:0;margin-right:0}
  .sec-head{padding:0 32px}
  .news-list{padding:0 32px}
  .market{margin:0 32px 28px;padding:6px 24px 10px}

  .qgrid{grid-template-columns:repeat(8,1fr);padding:0 32px;gap:12px}
  .stat-grid{grid-template-columns:repeat(4,1fr);padding:20px 32px;gap:16px}
  .team-sum{grid-template-columns:repeat(2,1fr)}
  .ma-grid{grid-template-columns:repeat(9,1fr);padding:0 32px;gap:10px}
  .menu-list{padding:8px 32px;display:grid;grid-template-columns:1fr 1fr;column-gap:40px}
  .vipgrid{grid-template-columns:repeat(4,1fr);padding:0 32px 28px;gap:18px}
  .lvl-card{margin:0 0 12px}
  .rule-grid{padding:0 32px}
  .cal-grid{padding:0 32px}
  .dev-card{max-width:none}
  #devMine.pad{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  #devMine.pad.hidden{display:none}
  .tx-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
  .tx-grid{padding:4px 18px 8px}

  /* Two-column desktop form pages: keep inputs readable but fill the screen */
  .pad>.field,.pad>label,.pad>.stepper{max-width:none}
  .auth-wrap{max-width:460px;margin:0 auto;padding-top:40px}

  /* floating bits live inside the content area */
  .toast{left:calc(50% + var(--side-w)/2)}
  body:not(.has-nav) .toast{left:50%}
  .support-fab{right:28px!important;bottom:28px!important}
  .support-popup{right:28px!important;bottom:100px!important}
  .sup-wrap{left:var(--side-w);transform:none;width:calc(100% - var(--side-w));max-width:none}
  .sup-body{padding:20px 6vw 10px}
  .sup-quick,.sup-input{padding-left:6vw;padding-right:6vw}

  /* Up/Down terminal keeps its own full-screen mode (no sidebar) */
  body.bt-wide #app{margin-left:0}
  body.bt-wide .bottom-nav{display:none}
}
@media (min-width:1280px){
  .qgrid{grid-template-columns:repeat(8,1fr)}
  .vipgrid{grid-template-columns:repeat(4,1fr)}
  .tx-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rc-offers{display:grid!important;grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1600px){
  .vipgrid{grid-template-columns:repeat(4,1fr)}
  .tx-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Tablet / small laptop: sidebar collapses to icons */
@media (min-width:900px) and (max-width:1100px){
  :root{--side-w:84px}
  .nav-brand span,.nav-item span,.nav-foot{display:none}
  .nav-brand{justify-content:center;padding:4px 0 16px}
  .nav-item{justify-content:center;padding:14px 0}
  .qgrid{grid-template-columns:repeat(4,1fr)}
  .ma-grid{grid-template-columns:repeat(5,1fr)}
  .vipgrid,.stat-grid{grid-template-columns:repeat(2,1fr)}
  .tx-list{grid-template-columns:1fr}
  .menu-list{grid-template-columns:1fr}
}

/* ---------- Up/Down terminal: full-width desktop (chart left, trade panel right) ---------- */
@media (min-width:900px){
  .bt-wrap{max-width:none!important;margin:0!important;box-shadow:none!important;padding-bottom:66px!important}
  .bt-main{flex-direction:row;gap:16px;padding:0 18px 14px;align-items:stretch}
  .bt-chart-card{margin:0;flex:1 1 auto;min-width:0}
  .bt-canvas-wrap{min-height:480px}
  .bt-panel{flex:0 0 400px;width:400px;margin-top:0;border-radius:16px;align-self:flex-start;position:sticky;top:64px;padding:16px}
  .bt-panel .grip{display:none}
  .bt-cattabs{padding:4px 18px 10px}
  .bt-top{padding-left:18px;padding-right:18px}
  .bt-top .bt-dep{right:18px}
  .rc-offers{align-items:start}
}
@media (min-width:900px) and (max-width:1100px){ .bt-panel{flex-basis:340px;width:340px} }