/* CASH shares the lobby's design language rather than having one of its own.
   It used to be a maroon-and-orange module bolted onto a mint-and-violet app,
   which read as a different product; the only thing that still marks it apart
   is the $$$ pill on its tab. Everything here is built from the same tokens as
   network.css so the two modes stay in step when those change. */
.lobby-modes{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px;margin:22px 0 12px;padding:5px;border:1px solid color-mix(in srgb,var(--accent) 17%,transparent);border-radius:16px;background:color-mix(in srgb,var(--panel) 82%,transparent)}
.mode-tab{min-height:52px;border:0;border-radius:11px;background:transparent;color:var(--muted);font:800 13px Manrope,sans-serif;letter-spacing:.04em;cursor:pointer}
.mode-tab small{margin-left:7px;padding:3px 6px;border-radius:99px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-size:9px;letter-spacing:.06em}
.mode-tab.is-active{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent) 8%,var(--panel)));color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 24%,transparent)}

/* Same card as .table-card in network.css, deliberately. */
.cash-pilot{margin:0 0 14px;padding:16px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(145deg,var(--panel-2),var(--panel))}
.cash-pilot[hidden]{display:none}
.cash-wallet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:0 0 13px}
.cash-wallet-solo{grid-template-columns:1fr}
.cash-wallet-grid>div{display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}
.cash-wallet-grid span,.cash-wallet-grid small{color:var(--muted);font-size:10px}
.cash-wallet-grid strong{color:var(--ink);font:700 18px Unbounded,sans-serif}
.cash-wallet-grid small{font-variant-numeric:tabular-nums}

/* Same as .entry-secondary, so the cashier's buttons and the lobby's entry
   buttons are one control, not two that nearly match. */
.cash-actions{display:flex;gap:8px}
.cash-actions button,.cash-actions .cash-cashier{flex:1;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink);font-weight:800;text-align:center;text-decoration:none;cursor:pointer;transition:border-color .18s,color .18s}
.cash-actions button:hover,.cash-actions .cash-cashier:hover{border-color:var(--accent);color:var(--accent)}
/* Depositing is the one thing this panel exists for; it keeps its outline
   instead of waiting to be hovered. */
.cash-actions #cashDeposit{border-color:var(--accent);color:var(--accent)}
.cash-rate{margin:11px 0 0;color:var(--muted);font-size:10px;text-align:center}
.cash-conversion{margin:5px 0 15px;color:var(--muted);font-size:12px}
.cash-conversion strong{color:var(--accent)}
.payment-details{margin-top:15px;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--muted);font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.payment-details[hidden]{display:none}
.payment-details strong{color:var(--ink)}
.payment-details button{width:100%;margin-top:9px;padding:10px;border:0;border-radius:9px;background:var(--accent);color:#1c0f33;font-weight:900;cursor:pointer}
@media(max-width:620px){.cash-wallet-grid{grid-template-columns:repeat(2,1fr)}.cash-wallet-grid>div:first-child{grid-column:1/-1}.cash-wallet-solo{grid-template-columns:1fr}.cash-actions{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.mode-tab,.cash-actions button,.cash-actions .cash-cashier{transition:none}}

.cash-profile-section{grid-column:1/-1}
.cash-profile-section[hidden]{display:none}
.cash-profile-section .profile-section-heading>div{display:grid;gap:5px}
.cash-profile-section .profile-kicker{margin:0}
.profile-modes{margin-top:0}
.profile-modes[hidden]{display:none}

/* The deposit flow, borrowed from CASE8: pick a rail, then an amount. Their
   paint is bright green and ours is not, so this is the shape of it in the
   profile's palette -- and without the promo-code panel, which we have no
   bonus behind. */
.cash-dialog{position:relative}
.cash-dialog .dialog-close{position:absolute;top:16px;right:18px;float:none;margin:0}
.cash-dialog h2{font-size:19px;text-align:center;padding:0 28px;letter-spacing:-.02em}
.dialog-sub{margin:0 0 18px;color:var(--muted);font-size:12px;text-align:center}
.buyin-dialog h2+.dialog-sub{margin-top:6px}
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay-method{display:grid;justify-items:center;gap:6px;padding:18px 12px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2);color:var(--ink);cursor:pointer;transition:border-color .18s,transform .16s}
.pay-method:hover{border-color:var(--accent);transform:translateY(-1px)}
.pay-method b{font-size:15px}
.pay-method small{color:var(--muted);font-size:10px;text-align:center}
.pay-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--panel);font-size:22px;line-height:1}
.pay-mark-usdt{background:#26a17b;color:#fff;font-weight:800}
.amount-field{position:relative;display:block;margin-top:18px}
.amount-field input{padding-right:62px!important}
.amount-suffix{position:absolute;top:50%;right:16px;transform:translateY(-50%);color:var(--muted);font-size:13px;font-weight:700;pointer-events:none}
.pay-currencies{display:flex;gap:8px;margin:12px 0 4px}
.pay-currency{display:grid;justify-items:center;gap:1px;padding:8px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);font:inherit;cursor:default}
.pay-currency.is-active{border-color:var(--accent)}
button.pay-currency{cursor:pointer}
.pay-currency[hidden]{display:none}
.pay-currency b{font-size:10px;letter-spacing:.08em;color:var(--muted)}
.pay-currency small{font-size:12px;font-weight:800;color:var(--ink)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pay-method{padding:16px 8px}

/* On a phone the cashier's dialogs are bottom sheets: they slide up from the
   bottom edge and stay pinned to it, which is where a thumb is and where the
   keyboard pushes from. showModal() centres a <dialog> through UA styles, so
   pinning it takes top:auto and margin:0 as well as bottom:0.

   Desktop keeps the centred dialog it always had -- there the sheet would be
   a full-width band across a wide screen, and the method step it belongs to
   does not exist there at all. */
@media (max-width:640px){
  .cash-dialog{
    position:fixed;left:0;right:0;bottom:0;top:auto;margin:0;
    width:100%;max-width:none;max-height:88vh;overflow-y:auto;
    border-radius:20px 20px 0 0;border-bottom:0;
    padding:22px 18px calc(20px + env(safe-area-inset-bottom,0px));
    animation:cash-sheet-up .26s cubic-bezier(.22,.68,.24,1) both;
  }
  /* The grab handle every sheet has, so it reads as one before it moves. */
  .cash-dialog form::before{
    content:"";display:block;width:38px;height:4px;margin:-8px auto 14px;
    border-radius:99px;background:var(--line);
  }
  .cash-dialog .dialog-close{top:12px;right:14px}
  @keyframes cash-sheet-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){
  .cash-dialog{animation:none}
}

/* A payment panel is a list of things to copy, not a paragraph to read off. */
.pay-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;margin-top:10px;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2)}
.pay-row span{grid-column:1;color:var(--muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.pay-row b{grid-column:1;color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;white-space:pre-line}
.pay-copy{grid-column:2;grid-row:1/3;align-self:center;padding:8px 12px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--accent);font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer}
.pay-copy:hover{border-color:var(--accent)}
.pay-note{margin:10px 0 0;color:var(--muted);font-size:11px;line-height:1.5}
.payment-details>button{width:100%;margin-top:9px}

/* The code carries its own white ground and quiet zone -- a scanner needs
   both, and the panel around it is nearly black. */
.pay-qr{width:168px;height:168px;margin:12px auto 0;padding:8px;border-radius:12px;background:#fff}
.pay-qr svg{display:block}

/* Selected whole on one tap, so the reference can be copied with the
   phone's own handle instead of a button beside it. */
.pay-id{-webkit-user-select:all;user-select:all;word-break:break-all;font-variant-numeric:tabular-nums;cursor:text}

/* On phones the referral tab is icon-only, so it should not reserve the same
   one-third width as the two primary sections. Keep a 44px tap target and
   let CASH / Profile share the freed space. */
@media(max-width:580px){
  .profile-modes{display:flex}
  .profile-modes .mode-tab{flex:1 1 0;min-width:0}
  .profile-modes #referralModeTab{flex:0 0 44px;width:44px;min-width:44px;padding-inline:0}
  /* CUBE has no middle profile tab. Collapse that disabled empty slot so the
     USDT cashier stretches all the way to the compact referral button. */
  .cube-context .profile-modes #playModeTab{flex:0 0 0;width:0;min-width:0;max-width:0;padding:0;overflow:hidden;border:0}
  .cube-context .profile-modes #cashModeTab{flex:1 1 auto}
}

/* Support sits between the wallet and the history: what is open, one row
   each, and a way to write. The rows are the history's rows on purpose. */
.support-section{grid-column:1/-1}
.support-section[hidden]{display:none}
.support-section .profile-section-heading{align-items:center}
.support-section .referral-secondary{min-height:38px;padding:8px 14px;font-size:12px}
.support-list{display:grid}
.support-list[hidden]{display:none}
.support-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:14px 0;border:0;border-bottom:1px solid #292a31;background:none;color:var(--ink);text-align:left;cursor:pointer}
.support-row:last-child{border-bottom:0}
.support-row strong{display:block;font-size:12px;font-weight:600}
.support-row small{display:block;margin-top:2px;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
.support-badge{flex:none;padding:4px 9px;border-radius:99px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.support-badge.is-waiting{background:#2a2a33;color:var(--muted)}
.support-badge.is-closed{background:#24262d;color:var(--muted)}
.buyin-dialog textarea,.buyin-dialog select{width:100%;margin:8px 0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);color:var(--ink);font:inherit;font-size:14px;resize:vertical}
.buyin-dialog textarea:focus,.buyin-dialog select:focus{outline:none;border-color:var(--accent)}
.buyin-dialog select[hidden],.buyin-dialog label[hidden]{display:none}
.support-attach{margin:16px 0 4px}
/* The dialog's own labels sit 22px under the field above; a sheet on a phone
   has no room for that between five of them. */
.cash-dialog .support-label,#supportDialog label,#ticketDialog label{margin-top:14px;color:var(--muted);font-size:12px}
.cash-dialog .support-label[hidden]{display:none}
.ref-list{display:grid;gap:6px;max-height:186px;margin:8px 0 4px;padding-right:2px;overflow-y:auto;overscroll-behavior:contain}
.ref-list[hidden]{display:none}
.ref-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);color:var(--ink);text-align:left;cursor:pointer;transition:border-color .15s}
.ref-row strong{display:block;font-size:12px;font-weight:700}
.ref-row small{display:block;margin-top:2px;color:var(--muted);font-size:11px}
.ref-row i{flex:none;color:var(--accent);font-style:normal;font-weight:800;opacity:0}
.ref-row.is-active{border-color:var(--accent)}
.ref-row.is-active i{opacity:1}
/* The browser's own file control is a grey chip with «Файл не выбран» beside
   it, in the UA's font. It stays for the click and the keyboard; what shows
   is a button of the dialog's own kind and the chosen name. */
.cash-dialog .support-file{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;cursor:pointer}
.support-file input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.support-file-button{flex:none;white-space:nowrap;line-height:1.2;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--ink);font-size:12px;font-weight:800;transition:border-color .18s,color .18s}
.support-file:hover .support-file-button,.support-file:focus-within .support-file-button{border-color:var(--accent);color:var(--accent)}
.support-file-name{min-width:0;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.support-file-name:empty::before{content:attr(data-empty)}
.support-file.has-file .support-file-name{color:var(--ink)}
.support-list .history-empty{padding:28px 0;text-align:center}
/* The same outlined button as «Пополнить» above it: the one action here. */
.support-new{width:100%;margin-top:14px;padding:12px;border:1px solid var(--accent);border-radius:11px;background:var(--panel);color:var(--accent);font-weight:800;cursor:pointer;transition:background .18s,color .18s}
.support-new:hover{background:var(--accent);color:#201829}
.support-thread{display:grid;gap:8px;max-height:40vh;overflow-y:auto;margin:6px 0 14px;padding-right:4px}
.support-msg{max-width:88%;padding:10px 12px;border-radius:14px;background:var(--panel-2);color:var(--ink);font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.support-msg.is-user{justify-self:end;background:color-mix(in srgb,var(--accent) 16%,var(--panel-2))}
.support-msg small{display:block;margin-top:4px;color:var(--muted);font-size:10px}
.support-close{width:100%;margin-top:10px}
#ticketReply[hidden]{display:none}
.support-section .referral-secondary.is-active{border-color:var(--accent);color:var(--accent)}
/* A phone's sheet is too narrow for the button and the name side by side. */
@media(max-width:640px){.support-file-button{width:100%;text-align:center}.support-file-name{width:100%}}

/* A row that opens is a row that says so under the pointer. */
.history-row[data-operation]{cursor:pointer;border-radius:8px;transition:background .15s}
.history-row[data-operation]:hover,.history-row[data-operation]:focus-visible{background:color-mix(in srgb,var(--accent) 8%,transparent);outline:none}
.op-fields{display:grid;gap:8px;margin:6px 0 14px}
.op-field{display:grid;gap:3px;padding:9px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2)}
.op-field span{color:var(--muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.op-field b{color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#operationSupport[hidden]{display:none}