:root {
  
  --bg: #0e0e11;
  --panel: #16171a;
  --line: #2a2b2f;
  --text: #f5f5f7;
  --muted: #a1a1aa;

  
  --green: #3dd68c;
  --red: #ff5c5c;
  --yellow: #f7c843;

  
  --accent-light: #FFE291;  
  --accent-main:  #FFD000;  
  --accent-strong:#FF8B07;  

  --chart-bg: #151519;
  --chart-border: #2f2f34;
  --grid-gap: 14px;

  --radius-lg: 14px;
  --shadow-elev: 0 10px 30px rgba(0,0,0,.45);

  --e-fast: 120ms cubic-bezier(.2,.7,.3,1);
  --e-mid: 220ms cubic-bezier(.2,.7,.3,1);
}


* { box-sizing: border-box; }
html, body { height: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 18px/1.4 'GothamRnd', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}


.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  margin: 0 0 14px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  animation: fadeDown .4s ease-out both;
}
.brand { font-weight: 700; letter-spacing: .5px; font-size: 38px; }
.status { display: flex; gap: 14px; align-items: center; }

.badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: #1a1a1c;
  border: 1px solid var(--line);
  font-weight: 600;
}
.badge.break   { color: var(--yellow); border-color: #3a2e12; }
.badge.running { color: var(--green);  border-color: #133024; background:#0f1f17; }
.badge.crashed { color: var(--red);    border-color: #3d1f1f; background:#2a1616; }

.x-muted, .round, .hint, .chat-empty, .subtop-item { color: var(--muted); }


.container { width: 100%; padding: 0; margin: 0; }

.layout {
  display: grid;
  grid-template-columns: 70% 30%;
  gap: var(--grid-gap);
  width: 100%;
}


.last-rounds-panel {
  height: 10vh;
  min-height: 80px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  animation: fadeIn .45s ease-out both;
}
.last-rounds-title { font-weight: 700; opacity: .95; }


.chart-card,
.chat-card,
.subtop,
.last-rounds-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.chart-card { padding: 10px; overflow: hidden; }

canvas{
  display:block;
  width:100%;
  max-width:100%;
  height:52vh;
  background: var(--chart-bg);
  border: 1px solid var(--chart-border);
  border-radius: 16px;
}


.col-chat { min-width: 280px; margin-right: 20px; }

.chat-card {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  height: 85vh;        
  max-height: 85vh;    
  animation: riseIn .5s ease-out both;
}
.chat-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}
.chat-body {
  flex: 1;
  padding: 12px;
  overflow: auto;
  word-break: break-word;
  min-height: 0;       
  overflow-y: auto;    
}
.chat-empty { opacity: .9; }
.chat-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}
.chat-input input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #101012;
  color: var(--text);
  outline: none;
  transition: border-color var(--e-fast), box-shadow var(--e-fast), transform var(--e-fast);
}
.chat-input input:focus-visible {
  border-color: var(--accent-main);                  
  box-shadow: 0 0 0 4px rgba(255, 208, 0, 0.18);     
  outline: none;
}


.btn {
  padding: 16px 28px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
  cursor: pointer;
  opacity: 1;
  white-space: nowrap;
  transition: transform var(--e-fast), box-shadow var(--e-fast), filter var(--e-fast), opacity var(--e-fast);
}
.btn[disabled] { opacity: .65; cursor: not-allowed; }
.btn:hover:not([disabled]) { transform: translateY(-1px); }
.btn:active:not([disabled]) { transform: translateY(0) scale(.98); }

.btn-green { background: var(--green); color: #0b0d0b; }
.btn-red   { background: var(--red);   color: #1a0b0b; }

.btn-pill {
  background: #1a1b1f;
  border: 1px solid var(--line);
  color: var(--text);
  height: 42px;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
  font-size: 16px;
  transition: transform var(--e-fast), box-shadow var(--e-fast), filter var(--e-fast);
}
.btn-pill:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-pill:active { transform: translateY(0) scale(.98); }
.btn-pill.selected,
.btn.selected { box-shadow: 0 0 0 2px var(--yellow); }

input, textarea, button {
  font-family: 'GothamRnd', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 18px;
}


.trade-controls {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--grid-gap);
  margin-top: 14px;
  height: 10vh;
  min-height: 100px;
  align-items: center;
  animation: riseIn .4s ease-out both;
}


.trade-controls::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--line), var(--line), transparent);
  opacity: .9;
  pointer-events: none;
  animation: linePulse 2.8s ease-in-out infinite;
}

.trade-col {
  display: flex;
  align-items: center;
  height: 100%;
}


.trade-col:first-child .trade-card { margin-left: auto; }
.trade-col:last-child  .trade-card { margin-right: auto; }

.trade-card {
  width: min(520px, 95%);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  transition: transform var(--e-mid), box-shadow var(--e-mid), border-color var(--e-fast);
  animation: cardSlideIn .45s ease-out both;
}
.trade-card:hover { box-shadow: 0 8px 26px rgba(0,0,0,.35); transform: translateY(-2px); }


.trade-title { display: none; }


.buy-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.buy-input {
  height: 52px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #101012;
  color: var(--text);
  outline: none;
  transition: border-color var(--e-fast), box-shadow var(--e-fast), transform var(--e-fast);
}
.buy-input:focus,
.buy-input:focus-visible {
  border-color: var(--accent-main);                  
  box-shadow: 0 0 0 4px rgba(255, 208, 0, 0.18);     
  outline: none;
  transition: border-color var(--e-fast), box-shadow var(--e-fast);
}


.buy-input:hover {
  border-color: rgba(255, 208, 0, 0.45);
}


.buy-input {
  caret-color: var(--accent-strong);                 
}
.buy-input::placeholder {
  color: #a1a1aa;                                    
  opacity: .9;
}
.buy-row .btn { height: 52px; min-width: 140px; }

.quick-amounts, .quick-pcts {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


.trade-col.trade-sell .trade-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "slider slider"
    "pcts   sell";
  row-gap: 10px;
  align-items: center;
}

.sell-slider { grid-area: slider; }
.sell-slider {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.sell-slider input[type="range"] {
  width: 100%;
  height: 8px;
  accent-color: var(--red);
  background: #1c1c20;
  border-radius: 999px;
  outline: none;
  transition: filter var(--e-fast);
}
.sell-slider input[type="range"]:hover { filter: brightness(1.08); }


.sell-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red);
  border: 0;
  box-shadow: 0 0 0 0 rgba(255,92,92,.35);
  transition: transform var(--e-fast), box-shadow var(--e-fast);
}
.sell-slider input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--red);
  border: 0;
  box-shadow: 0 0 0 0 rgba(255,92,92,.35);
  transition: transform var(--e-fast), box-shadow var(--e-fast);
}
.sell-slider input[type="range"]:active::-webkit-slider-thumb,
.sell-slider input[type="range"]:active::-moz-range-thumb {
  transform: scale(1.1);
  box-shadow: 0 0 0 6px rgba(255,92,92,.18);
}

.sell-range-label {
  min-width: 72px;
  text-align: right;
  color: var(--muted);
  font-weight: 700;
  font-size: 16px;
  transition: transform var(--e-fast);
}
.sell-slider:has(input[type="range"]:active) .sell-range-label { transform: translateY(-1px); }

.quick-pcts { grid-area: pcts; }
.sell-row   { grid-area: sell; margin-top: 0; }

.sell-row .btn {
  height: 44px;
  min-width: 100px;
  padding: 10px 18px;
  font-size: 16px;
}


.sell-row, .buy-row { margin-top: 8px; }


.foot { display: none; }


@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
  .col-chat  { margin-right: 0; }

  .trade-controls {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }
  .trade-controls::before { display: none; }

  .trade-col:first-child .trade-card,
  .trade-col:last-child  .trade-card {
    margin: 0 auto;
    width: 100%;
  }
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes riseIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes linePulse {
  0%,100% { box-shadow: 0 0 0 rgba(247,200,67,0); }
  50%     { box-shadow: 0 0 16px rgba(247,200,67,.08); }
}


@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.buy-input::-webkit-outer-spin-button,
.buy-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.modal {
  position: fixed; inset: 0; z-index: 1100;
  opacity: 0; pointer-events: none;
  transition: opacity var(--e-mid);
}
.modal.is-open {
  opacity: 1; pointer-events: auto;
}

.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.52);
  opacity: 0;
  backdrop-filter: blur(0px);
  transition: opacity var(--e-mid), backdrop-filter var(--e-mid);
}
.modal.is-open .modal__backdrop {
  opacity: 1;
  backdrop-filter: blur(2px);
}

.modal__card {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-46%) scale(.98);
  width: 420px; max-width: 92vw; max-height: 90vh;
  background: linear-gradient(180deg, rgba(26,30,36,.96), rgba(22,26,31,.96));
  border: 1px solid rgba(58,67,77,.45);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elev);
  color: var(--text);
  opacity: 0;
  transition: transform var(--e-mid), opacity var(--e-mid);
  overflow: auto;
}

.modal.is-open .modal__card {
  transform: translate(-50%,-50%) scale(1);
  opacity: 1;
}

.modal.is-closing .modal__card {
  transform: translate(-50%,-46%) scale(.98);
  opacity: 0;
}
.modal.is-closing .modal__backdrop {
  opacity: 0;
  backdrop-filter: blur(0px);
}

@media (prefers-reduced-motion: reduce) {
  .modal, .modal__card, .modal__backdrop {
    transition: none !important;
  }
}

.modal__card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 420px; max-width: 92vw; max-height: 90vh; 
  background: linear-gradient(180deg, rgba(26,30,36,.96), rgba(22,26,31,.96));
  border: 1px solid rgba(58,67,77,.45);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elev);
  color: var(--text);
  overflow: auto; 
}

.modal__header {
  position: sticky; top: 0; z-index: 1;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  background: inherit;
  border-bottom:1px solid rgba(58,67,77,.45);
}
.modal__title { margin:0; font-size:16px; color: #fff; }
.modal__close { background:none; border:none; color:#fff; font-size:20px; cursor:pointer; }

.modal__body { padding: 14px 16px; color: #fff; }
.modal__hint { color: #fff; font-size: 13px; }
.modal__error { color: #fff; font-weight: 600; margin-top: 8px; }


.wallet-list { display:grid; gap:10px; }
.wallet-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer;
  background: #1f2227;
  border: 1px solid rgba(58,67,77,.45);
  border-radius: 10px;
  color: #fff;
}
.wallet-item:hover { background: #23272d; }
.wallet-item .wallet-item__text { color: #fff; }


.spinner {
  display:inline-block; width:18px; height:18px;
  border:2px solid rgba(255,255,255,.2);
  border-top-color: rgba(255,255,255,.8);
  border-radius:50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }


.sheet { position: fixed; inset: 0; z-index: 1200; display: none; }
.sheet.is-open { display: block; }
.sheet__backdrop { position:absolute; inset:0; background: rgba(0,0,0,.45); }

.sheet__card {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(100%);
  width: 560px; max-width: 96vw; max-height: 92vh; 
  background: linear-gradient(180deg, rgba(26,30,36,.96), rgba(22,26,31,.96));
  border: 1px solid rgba(58,67,77,.45);
  border-top-left-radius: 14px; border-top-right-radius: 14px;
  box-shadow: 0 -10px 30px rgba(0,0,0,.45);
  color: var(--text);
  transition: transform var(--e-mid);
  overflow: auto; 
}

.sheet.is-open .sheet__card { transform: translateX(-50%) translateY(0); }

.sheet__header {
  position: sticky; top: 0; z-index: 1;
  display:flex; align-items:center; gap:10px; justify-content: space-between;
  padding:14px 16px; border-bottom:1px solid rgba(58,67,77,.45);
  background: inherit;
}
.sheet__title { margin:0; font-size:16px; font-weight:700; color:#fff; }
.sheet__close { background:none; border:none; color:#fff; font-size:20px; cursor:pointer; }

.sheet__body { padding: 14px 16px; color:#fff; display: grid; gap: 12px; }
.sheet__row { display:flex; gap:10px; align-items:center; }
.sheet__addr { font-weight:700; margin-left:auto; color:#fff; }


.sheet__actions {
  display:flex;
  justify-content: flex-end;
  align-items: center;   
  gap:10px;
}


.btn-disconnect {
  display: inline-flex;           
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 12px;
  border:1px solid rgba(255,92,92,.35);
  background: #2a1616;
  color:#fff;
  cursor:pointer;
  font-weight:800;
  font-size: 16px;
  line-height: 1;                 
  height: auto;                   
  transition: filter var(--e-fast), transform var(--e-fast);
}
.btn-disconnect:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-disconnect:active { transform: translateY(0) scale(.98); }

@media (max-width: 520px) {
  .sheet__card { border-radius: 14px 14px 0 0; width: 100%; max-width: 100%; }
}


.wallet-balance{
  display:flex; align-items:center; gap:10px;
  background:#16171a; border:1px solid #2a2b2f; border-radius:10px;
  padding:6px 10px; margin-right:10px;
}
.wallet-balance .bal-btn{
  width:26px; height:26px; line-height:26px;
  border:none; border-radius:8px; cursor:pointer;
  background:#1f2024; color:#f5f5f7; font-size:16px;
}
.wallet-balance .bal-btn:active{ transform:translateY(1px); }
.wallet-balance .bal-amount{
  min-width:90px; text-align:center;
  color:#f5f5f7; font-weight:600; font-family:GothamRnd, sans-serif;
}


.sheet--hover { display: none; position: fixed; inset: 0; z-index: 1200; pointer-events:none; }
.sheet--hover.is-open { display: block; }
.sheet--hover .sheet__backdrop { display: none !important; }


.sheet--hover .sheet__card{
  position:absolute;
  left:0; top:0;
  transform:none;
  width: 360px;                 
  max-width: 92vw;
  background: linear-gradient(180deg, rgba(26,30,36,.98), rgba(22,26,31,.98));
  border: 1px solid rgba(58,67,77,.45);
  border-radius: 12px;
  box-shadow: var(--shadow-elev);
  color: var(--text);
  pointer-events:auto;
  transition: opacity var(--e-fast), transform var(--e-fast);
  opacity: 0; transform: translateY(6px);
  height: auto;       
  max-height: 10vh;   
  overflow: visible;  
}

.sheet--hover .sheet__body{
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}

.sheet--hover.is-open .sheet__card{ opacity:1; transform: translateY(0); }


.wallet-pop {
  position: absolute;
  z-index: 1300;
  min-width: 240px;
  background: #1b1c20;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  padding: 10px;
  display: none;
}
.wallet-pop.is-open { display: block; }
.wallet-pop__row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.wallet-pop__actions { display:flex; align-items:center; justify-content:flex-end; }



.modal { opacity: 0; transition: opacity var(--e-mid); }
.modal.is-open { opacity: 1; }

.modal__backdrop { opacity: 0; transition: opacity var(--e-mid); }
.modal.is-open .modal__backdrop { opacity: 1; }

.modal__card {
  transform: translate(-50%,-46%); 
  opacity: 0;
  transition: transform var(--e-mid), opacity var(--e-mid);
}
.modal.is-open .modal__card {
  transform: translate(-50%,-50%); 
  opacity: 1;
}


.btn-gray {
  background: #2a2b2f;
  color: var(--text);
  border: 1px solid #3a3b40;
}


.modal__body { padding: 14px 10px; }                 
.modal__body .buy-input {
  width: 100%;
  display: block;
}
.modal__body .buy-input + .buy-input {               
  margin-top: 10px;
}

.modal__actions {
  display: flex;
  justify-content: center;   
  gap: 10px;
  margin-top: 12px;
}

#modalWithdraw .modal__hint {
  text-align: center;           
  margin-top: 8px;
}

#wdAllLink {
  display: inline-block;
  text-decoration: none;        
  color: var(--muted);          
  font-weight: 700;
  cursor: pointer;              
  padding: 4px 8px;             
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent; 
  outline-offset: 3px;          
}


#wdAllLink:hover,
#wdAllLink:focus,
#wdAllLink:active,
#wdAllLink:visited {
  text-decoration: none;
  color: var(--muted);
  filter: none;
  box-shadow: none;
  transform: none;
}

.wallet-balance .bal-coin {
  width: 18px;
  height: 18px;
  display: inline-block;
  object-fit: contain;
  margin-left: 0px;   
  margin-right: 4px;  
  vertical-align: middle;
  pointer-events: none;
  opacity: .95;
}

.quick-amounts .qa-input{
  height: 42px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #101012;
  color: var(--text);
  outline: none;
  text-align: center;       
  font-weight: 700;
  font-size: 16px;
  
  min-width: 72px;
  max-width: 180px;
  transition: border-color var(--e-fast), box-shadow var(--e-fast), transform var(--e-fast);
}
.quick-amounts .qa-input:focus-visible{
  border-color: #3dd68c55;
  box-shadow: 0 0 0 4px #3dd68c22;
}


.quick-amounts .qa-input::-webkit-outer-spin-button,
.quick-amounts .qa-input::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

.brand,
.chat-header {
  font-family: 'GothamRndBold', 'GothamRnd', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;              
  font-family: 'GothamRndBold', 'GothamRnd', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.brand__logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: block;
}

.btn-pill.selected,
.btn.selected { box-shadow: 0 0 0 2px var(--accent-main); }

.btn-wallet {
  background: var(--accent-main); 
  color: #0e0e11;
  border: none;
  border-radius: 12px;
  padding: 14px 22px;
  font-weight: 800;
  font-size: 18px;
  transition: background var(--e-fast), transform var(--e-fast), box-shadow var(--e-fast);
}

.btn-wallet:hover {
  background: var(--accent-strong); 
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(255, 200, 0, 0.25);
}

.btn-wallet:active {
  transform: translateY(0);
  background: #ffb700;
}

.btn-wallet.is-connected {
  background: var(--accent-main);
  color: #0e0e11;
}

#btnTopupConfirm {
  background: var(--accent-main);     
  color: #0e0e11;
  border: none;
  border-radius: 12px;
  padding: 14px 22px;
  font-weight: 800;
  font-size: 18px;
  transition: background var(--e-fast), transform var(--e-fast), box-shadow var(--e-fast);
}

#btnTopupConfirm:hover {
  background: var(--accent-strong);   
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(255, 200, 0, 0.25);
}

#btnTopupConfirm:active {
  transform: translateY(0);
  background: #ffb700;
}

.brand__text {
  background: linear-gradient(90deg, var(--accent-main) 0%, var(--accent-light) 48%, var(--accent-strong) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; 
  display: inline-block;       
  letter-spacing: 0.6px;
}

.chat-input .btn {
  background: var(--accent-main);   
  color: #0e0e11;                   
  border: none;
}

.chat-input .btn:hover:not([disabled]) {
  background: var(--accent-strong); 
  transform: translateY(-1px);
  box-shadow: 0 0 12px rgba(255, 200, 0, 0.25);
}

.chat-input .btn:active:not([disabled]) {
  transform: translateY(0);
  background: #ffb700;
}

chat-msg { will-change: transform, opacity; }
.chat-bubble { transition: transform var(--e-mid), opacity var(--e-mid); }


.chat-msg--me.is-enter   .chat-bubble { opacity: 0; transform: translateX(18px) scale(.98); }
.chat-msg--other.is-enter .chat-bubble { opacity: 0; transform: translateX(-18px) scale(.98); }


.chat-msg .chat-bubble { opacity: 1; transform: translateX(0) scale(1); }


@media (prefers-reduced-motion: reduce) {
  .chat-bubble { transition: none !important; }
  .chat-msg--me.is-enter   .chat-bubble,
  .chat-msg--other.is-enter .chat-bubble { opacity: 1; transform: none; }
}

.chat-body{
  overflow-y: auto;
  overflow-x: hidden;          
  overscroll-behavior: contain;
  scrollbar-gutter: stable;    
}


.chat-body{
  scrollbar-width: thin;                                 
  scrollbar-color: #3a3b40 #16171a;                      
}


.chat-body::-webkit-scrollbar{
  width: 10px;
  height: 10px;                 
}
.chat-body::-webkit-scrollbar-track{
  background: #16171a;          
  border-left: 1px solid #2a2b2f;
  border-radius: 10px;
}
.chat-body::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #2a2b2f, #3a3b40);
  border-radius: 10px;
  border: 2px solid #16171a;    
}
.chat-body::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #3a3b40, #4a4b52);
}
.chat-body::-webkit-scrollbar-corner{
  background: #16171a;
}


@media (max-width: 600px) {
  .last-rounds-panel { display: none !important; }
  .wallet-balance    { display: none !important; }

  .topbar { padding: 10px 12px; }
  .brand { gap: 8px; }
  .brand__logo { width: 26px; height: 26px; }
  .brand__text{
    background: none !important;
    -webkit-text-fill-color: initial;
    color: var(--accent-main) !important;
  }

  .layout { grid-template-columns: 1fr; gap: 10px; }
  .chart-card { padding: 8px; }

  canvas {
    width: 100%;
    max-width: 100%;
    height: auto;         
    aspect-ratio: 16 / 10; 
  }

  .trade-controls { grid-template-columns: 1fr; gap: 10px; }
  .buy-row .btn, .sell-row .btn { height: 46px; min-width: 120px; font-size: 16px; }
  .buy-input { height: 46px; }

  .chat-card { height: 60vh; max-height: 60vh; }
}

.trade-controls{ align-items: stretch; }
.trade-col{ align-items: stretch; }
.trade-col .trade-card{ height: 100%; }
.trade-col.trade-sell .trade-card{
  grid-template-rows: auto 1fr auto;
}
.quick-pcts{ align-self: start; }
.sell-row{ align-self: end; }

.trade-col.trade-sell .quick-pcts,
.trade-col.trade-sell .sell-row{
  margin-top: 8px !important;
}

.trade-col.trade-sell .sell-row{
  display: flex;
  justify-content: flex-end;
}
.trade-col.trade-sell .trade-card{
  align-items: start !important;

  grid-template-rows: auto auto; 
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "slider slider"
    "pcts   sell";

  row-gap: 8px; 
}

.trade-col.trade-sell .quick-pcts,
.trade-col.trade-sell .sell-row{
  margin-top: 0 !important;
  align-self: start;
}

.trade-col.trade-sell .sell-row{
  display: flex;
  justify-content: flex-end;
}

#walletBalance #balPlus  { order: 1; }
#walletBalance #balMinus { order: 2; }
#walletBalance #balAmount{ order: 3; }
#walletBalance .bal-coin  { order: 4; }

.wallet-balance .bal-btn{
  width: auto; height: auto;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #3a3b40;
  background: #2a2b2f;
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: transform var(--e-fast), box-shadow var(--e-fast), filter var(--e-fast), opacity var(--e-fast);
}
.wallet-balance .bal-btn:hover{ transform: translateY(-1px); }
.wallet-balance .bal-btn:active{ transform: translateY(0) scale(.98); }

#walletBalance #balPlus{
  background: var(--accent-main);
  color: #0e0e11;
}
#walletBalance #balPlus:hover{
  background: var(--accent-strong);
  box-shadow: 0 0 12px rgba(255, 200, 0, 0.25);
}

#walletBalance #balMinus{
  background: var(--red);
  color: #1a0b0b;
}

.wallet-balance .bal-amount{
  min-width: 0;
  padding: 0 8px;
  text-align: left;
  font-weight: 700;
}

.last-rounds-panel .pnl-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  background:#1a1b1f;
  border:1px solid var(--line);
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: transform var(--e-fast), box-shadow var(--e-fast), filter var(--e-fast);
}
.last-rounds-panel .pnl-btn:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.last-rounds-panel .pnl-btn:active{ transform: translateY(0) scale(.98); }
.last-rounds-panel .pnl-btn img{
  display:block;
  width:18px; height:18px; object-fit:contain; opacity:.95; pointer-events:none;
}

@media (max-width: 600px){
  .last-rounds-panel .pnl-btn{ padding:6px 10px; font-size:13px; }
}

.last-rounds-panel .lr-list{
  scrollbar-width: thin;                            
  scrollbar-color: var(--accent-main) transparent;  
}

.last-rounds-panel .lr-list::-webkit-scrollbar{
  height: 10px;
}
.last-rounds-panel .lr-list::-webkit-scrollbar-track{
  background: transparent;
}
.last-rounds-panel .lr-list::-webkit-scrollbar-thumb{
  background: linear-gradient(90deg, var(--accent-main), var(--accent-light), var(--accent-strong));
  border-radius: 999px;
  border: 2px solid var(--panel);                   
  box-shadow: 0 0 10px rgba(255, 208, 0, 0.15) inset;
}
.last-rounds-panel .lr-list::-webkit-scrollbar-thumb:hover{
  box-shadow: 0 0 12px rgba(255, 208, 0, 0.25) inset;
  filter: brightness(1.05);
}


.pnl-pop.sheet--hover .sheet__card{
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition:
    opacity var(--e-mid),
    transform var(--e-mid),
    box-shadow var(--e-mid),
    border-color var(--e-fast);
  will-change: transform, opacity;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  border-color: rgba(255, 208, 0, 0.20);
}
.pnl-pop.sheet--hover.is-open .sheet__card{
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,208,0,.08) inset;
  border-color: rgba(255, 208, 0, 0.35);
}
.pnl-pop.sheet--hover.is-closing .sheet__card{
  opacity: 0;
  transform: translateY(8px) scale(.98);
}


.pnl-pop .pnl-scroll{
  max-height: 46vh;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-main) transparent;
}
.pnl-pop .pnl-scroll::-webkit-scrollbar{ width: 10px; }
.pnl-pop .pnl-scroll::-webkit-scrollbar-track{ background: transparent; }
.pnl-pop .pnl-scroll::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--accent-main), var(--accent-light));
  border-radius: 999px;
  border: 2px solid transparent;
}
.pnl-pop .pnl-scroll::-webkit-scrollbar-thumb:hover{
  box-shadow: 0 0 10px rgba(255,208,0,.25) inset;
}
.pnl-pop.sheet--hover .sheet__card{
  min-width: 320px;
  max-width: 440px;
  max-height: 60vh;
  overflow: hidden;
  padding: 10px 12px;
  border-radius: 12px;

  
  background: var(--panel);        
  border: 1px solid var(--line);   

  
  box-shadow: var(--shadow-elev);
}

.pnl-pop .pnl-head{
  display: grid;
  grid-template-columns: 1fr 1fr 88px 64px; 
  gap: 8px;
  align-items: center;
  margin: 4px 0 8px;
  font: 800 12px/1 GothamRnd,system-ui;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}


.pnl-pop .pnl-scroll{
  max-height: 46vh;
  overflow: auto;
  padding-right: 2px; 
}


.pnl-pop .pnl-row{
  display: grid;
  grid-template-columns: 1fr 1fr 88px 64px;  
  gap: 8px;
  align-items: center;
  padding: 8px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(58,67,77,.35);
  margin-bottom: 8px;
  transition: transform var(--e-fast), box-shadow var(--e-fast), background var(--e-fast), border-color var(--e-fast);
  will-change: transform, opacity;
}
.pnl-pop .pnl-row:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,208,0,.22);
}


.pnl-pop .cell{
  min-width: 0;                
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 14px/1.2 GothamRnd,system-ui;
  color: var(--text);
}
.pnl-pop .cell--x{ text-align: left; }
.pnl-pop .cell--pnl{ text-align: right; }
.pnl-pop .cell--age{
  text-align: right;
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}


.pnl-pop .cell--act{
  display:flex; justify-content:flex-end;
}
.pnl-pop .get-btn{
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,208,0,.35);
  background: #231f12;
  color: #fff;
  font: 800 12px/1 GothamRnd,system-ui;
  cursor: pointer;
  transition: transform var(--e-fast), box-shadow var(--e-fast), filter var(--e-fast);
}
.pnl-pop .get-btn:hover{ filter: brightness(1.06); transform: translateY(-1px); }
.pnl-pop .get-btn:active{ transform: translateY(0) scale(.98); }

.pnl-pop .pnl-pos{ color: var(--green); }
.pnl-pop .pnl-neg{ color: var(--red); }

@keyframes pnl-row-in{
  from{ opacity:0; transform: translateY(6px) scale(.98); }
  to  { opacity:1; transform: translateY(0)  scale(1); }
}
.pnl-pop .pnl-row.is-enter{
  animation: pnl-row-in 280ms var(--e-mid);
}

.pnl-pop.sheet--hover .sheet__card{
  transform-origin: top left;
}

a.btn-pill { text-decoration: none; }
a.btn-pill:hover { text-decoration: none; }

a.btn-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}