/* SolStake UI V2 — responsive/full-width design system */
:root{
  --ss-max:1180px;
  --ss-content:820px;
  --ss-gutter:clamp(14px,2.2vw,28px);
  --ss-radius-sm:12px;
  --ss-radius:18px;
  --ss-radius-lg:24px;
  --ss-border:rgba(255,255,255,.085);
  --ss-border-hi:rgba(255,255,255,.14);
  --ss-shadow:0 18px 50px rgba(0,0,0,.22);
}

html{width:100%;overflow-x:hidden;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{width:100%;min-width:0;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{max-width:100%;font:inherit}
input,select,textarea{font-size:16px}

/* universal shell: full width without edge collisions */
.page,.shell,.app,.container,.main-container,.content-wrapper{
  width:min(calc(100% - (var(--ss-gutter) * 2)),var(--ss-max)) !important;
  max-width:var(--ss-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* visual consistency */
.card,.form-card,.stat-card,.balance-card,.portfolio-card,.market-table,.staking-cta,.claim-banner,
.section-card,.panel,.box,.content-card{
  border-color:var(--ss-border) !important;
}

button,.btn,.action-btn,.util-btn,.header-action,.icon-btn,input,select,textarea{
  border-radius:var(--ss-radius-sm) !important;
}

/* headers occupy the real content width */
.header,.topbar{
  width:100%;
  padding-left:var(--ss-gutter) !important;
  padding-right:var(--ss-gutter) !important;
}

/* tables can scroll instead of crushing mobile layouts */
table{width:100%;border-collapse:collapse}
.table-wrap,.table-responsive,.market-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* desktop upgrade */
@media (min-width:900px){
  body{background-attachment:fixed}
  .app{padding-bottom:108px !important}
  .greeting,.section{padding-left:0 !important;padding-right:0 !important}
  .topbar{padding-left:0 !important;padding-right:0 !important}

  /* dashboard becomes a real dashboard, not a phone mockup */
  .actions-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:14px !important}
  .utils-grid{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:14px !important}
  .stats-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:14px !important}
  .balance-card,.claim-banner,.staking-cta,.market-table{border-radius:var(--ss-radius-lg) !important}
  .market-row{padding-left:20px !important;padding-right:20px !important}
  .bottom-nav{max-width:720px !important;bottom:18px !important;border:1px solid var(--ss-border-hi) !important;border-radius:22px !important;padding:10px 10px 12px !important;box-shadow:var(--ss-shadow)}
  .social-channel{bottom:112px !important}

  /* transaction/detail pages: page is wide, form remains readable */
  .form-card,.form-panel,.deposit-card,.withdraw-card,.bank-card,.transfer-card,
  .auth-card,.login-card,.register-card{max-width:760px;margin-left:auto !important;margin-right:auto !important}

  /* marketing landing page */
  body > .page .hero{padding-top:132px}
  .feat-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:14px !important}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:14px !important}
  .hero-h1{font-size:clamp(44px,5vw,72px) !important;max-width:900px;margin-left:auto;margin-right:auto}
  .hero-sub{font-size:16px !important;max-width:720px;margin-left:auto;margin-right:auto}
}

/* tablet */
@media (min-width:600px) and (max-width:899px){
  .actions-grid,.utils-grid,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .feat-grid{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

/* mobile: compact, genuinely full width, safe-area aware */
@media (max-width:599px){
  :root{--ss-gutter:12px}
  .page,.shell,.app,.container,.main-container,.content-wrapper{
    width:100% !important;
    max-width:none !important;
    padding-left:var(--ss-gutter) !important;
    padding-right:var(--ss-gutter) !important;
  }
  .app{padding-left:0 !important;padding-right:0 !important}
  .app > :not(.topbar):not(.bottom-nav):not(.grid-overlay):not(.aurora):not(.social-channel){margin-left:var(--ss-gutter);margin-right:var(--ss-gutter)}
  .greeting,.section{padding-left:0 !important;padding-right:0 !important}
  .header,.topbar{padding:12px var(--ss-gutter) !important}
  .header-title,.logo-name{font-size:14px !important}
  .logo-mark{width:32px !important;height:32px !important}
  .icon-btn,.header-action{width:34px !important;height:34px !important}
  .portfolio-card,.balance-card,.form-card,.staking-cta,.claim-banner,.market-table,.stat-card{border-radius:16px !important}
  .actions-grid,.utils-grid,.stats-grid{gap:9px !important}
  .action-btn,.util-btn,.stat-card{min-width:0 !important}
  .bottom-nav{width:100% !important;max-width:none !important;padding-bottom:max(12px,env(safe-area-inset-bottom)) !important}
  .social-channel{right:12px !important}
  .hero{padding-top:96px !important;padding-bottom:38px !important}
  .hero-h1{font-size:clamp(32px,10vw,42px) !important}
  .hero-actions>*{flex:1 1 140px;justify-content:center}
  .nav-links{gap:2px !important}
  .nav-links a:not(.nav-cta){display:none}
  .stats{gap:8px !important}
  .stat-card{padding:15px 13px !important}
  .section{margin-bottom:14px !important}
}

@media (max-width:360px){
  :root{--ss-gutter:10px}
  .nav-item span{font-size:9px !important}
  .action-label,.util-label{font-size:10px !important}
  .stat-val{font-size:18px !important}
}