/* ui-tokens-v19.css - one visual language for the dashboard and the admin shell.
   Loaded last so it settles the conflicts that dashboard-v18.css, anarchy-x-v9.css
   and admin.css each introduced separately.
   P1-1 loading/invalid states, P1-3 single toast, P1-4 focus ring, P1-6 hints,
   P1-8 presets, P1-9 one modal shape, P2-1 close target, P2-7 long amounts,
   P2-8 withdraw check, P3-1..P3-3 4pt spacing and radius tokens. */

/* ── Russian Typography: Onest ─────────────────────── */
@font-face {
  font-family: 'Onest';
  src: url('/static/fonts/Onest-Variable.woff2') format('woff2-variations'),
       url('/static/fonts/Onest-Variable.woff2') format('woff2'),
       url('/static/fonts/Onest-Variable.woff') format('woff'),
       url('/static/fonts/Onest-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Onest Cyrillic';
  src: url('/static/fonts/Onest-Variable.woff2') format('woff2-variations'),
       url('/static/fonts/Onest-Variable.woff2') format('woff2'),
       url('/static/fonts/Onest-Variable.woff') format('woff'),
       url('/static/fonts/Onest-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0400-04FF, U+0500-052F, U+2DE0-2DFF, U+A640-A69F, U+1C80-1C88;
}

:lang(ru),
html[lang="ru"],
html[lang="ru"] body,
html[lang="ru"] *,
html[lang="ru"] *::before,
html[lang="ru"] *::after {
  font-family: 'Onest', 'Outfit', 'Inter', system-ui, sans-serif !important;
}

html[lang="ru"] code,
html[lang="ru"] pre,
html[lang="ru"] kbd,
html[lang="ru"] samp,
html[lang="ru"] .mono,
html[lang="ru"] .tk-mono,
html[lang="ru"] .a-mono,
html[lang="ru"] .kx-keys,
html[lang="ru"] .kx-keycell,
html[lang="ru"] .kx-keycell code,
html[lang="ru"] code *,
html[lang="ru"] pre *,
html[lang="ru"] .mono * {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

:root{
  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --ui-focus:#25d9a4;
  --ui-danger:#ef4444;
  --ui-warn:#f59e0b;
  --ui-ok:#10b981;
  --ui-info:#3b82f6;
}

/* ---------- P1-4  visible focus ring everywhere ---------- */
:focus:not(:focus-visible){outline:none}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role=button]:focus-visible,
[role=tab]:focus-visible{
  outline:2px solid var(--ui-focus);
  outline-offset:2px;
  border-radius:var(--r-sm);
}
.form-input:focus-visible{
  outline:2px solid var(--ui-focus);
  outline-offset:1px;
  box-shadow:0 0 0 4px rgba(37,217,164,.20);
}
.pm-tile:focus-visible,
.rg-btn:focus-visible,
.rg-item:focus-visible,
.withdraw-method:focus-visible,
.amt-preset:focus-visible,
.bal-tab:focus-visible,
.sidebar-link:focus-visible{
  outline:2px solid var(--ui-focus);
  outline-offset:2px;
}
html.theme-light :focus-visible{--ui-focus:#0f9d76}

/* ---------- P1-1  button loading state ---------- */
.is-loading{
  cursor:progress!important;
  pointer-events:none;
  opacity:.72;
  filter:saturate(.85);
}
.is-loading::before{
  content:'';
  display:inline-block;
  flex:none;
  width:16px;
  height:16px;
  margin-right:var(--sp-2);
  vertical-align:-3px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:ui-spin .7s linear infinite;
}
@keyframes ui-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .is-loading::before{animation-duration:2.4s}
}

/* ---------- P1-1  invalid field state ---------- */
.is-invalid,
input.is-invalid,
select.is-invalid,
.form-input.is-invalid{
  border-color:var(--ui-danger)!important;
  background:rgba(239,68,68,.08)!important;
  box-shadow:0 0 0 3px rgba(239,68,68,.15)!important;
}
.is-invalid:focus,
.form-input.is-invalid:focus{
  border-color:var(--ui-danger)!important;
  box-shadow:0 0 0 4px rgba(239,68,68,.22)!important;
}
.hint-invalid{color:#f87171!important}
html.theme-light .hint-invalid{color:#b91c1c!important}

/* ---------- P1-3 + P3-1  one toast system ---------- */
#toast-container.toast-stack{
  position:fixed;
  top:var(--sp-6);
  right:var(--sp-6);
  bottom:auto;
  left:auto;
  z-index:99999;
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
  pointer-events:none;
  max-width:min(420px,calc(100vw - 32px));
}
#toast-container.toast-stack > .toast{
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:var(--sp-2)!important;
  min-width:240px;
  max-width:420px;
  padding:var(--sp-3) var(--sp-4)!important;
  border-radius:var(--r-md)!important;
  border-left-width:3px!important;
  border-left-style:solid!important;
  font-size:13.5px;
  font-weight:500;
}
#toast-container.toast-stack > .toast.success{border-left-color:var(--accent,#10b981)!important}
#toast-container.toast-stack > .toast.error{border-left-color:var(--ui-danger)!important}
#toast-container.toast-stack > .toast.warning{border-left-color:var(--ui-warn)!important}
#toast-container.toast-stack > .toast.info{border-left-color:var(--accent,#10b981)!important}
#toast-container.toast-stack > .toast.success .toast-ico,
#toast-container.toast-stack > .toast.info .toast-ico,
#toast-container.toast-stack > .toast.success .ti,
#toast-container.toast-stack > .toast.info .ti{color:var(--accent,#10b981)!important}
#toast-container.toast-stack > .toast .toast-ico,
#toast-container.toast-stack > .toast .ti{
  flex:0 0 16px;
  width:16px;
  height:16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
}
#toast-container.toast-stack > .toast .toast-ico svg,
#toast-container.toast-stack > .toast .ti svg{width:16px;height:16px}
#toast-container.toast-stack > .toast:after{border-radius:0 0 var(--r-md) var(--r-md)}
@media (max-width:480px){
  #toast-container.toast-stack{top:var(--sp-3);right:var(--sp-3);left:var(--sp-3);max-width:none}
}

/* ---------- P1-9 + P3-2 + P3-3  one modal shape ---------- */
body.ui-modal-open{overflow:hidden}

.app-modal{
  position:fixed;
  inset:0;
  z-index:9000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:var(--sp-4);
  overflow-y:auto;
  background:rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.app-modal.is-open{display:flex}

/* legacy .modal markup keeps working, it just inherits the same scheme */
.modal{z-index:9000;padding:var(--sp-4)}
.modal-backdrop{
  background:rgba(0,0,0,.6)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  backdrop-filter:blur(16px)!important;
}
.modal .modal-content{border-radius:var(--r-lg)}

.app-modal .app-modal-card,
.app-modal-card{border-radius:var(--r-lg);width:100%}
.app-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  padding:var(--sp-5) var(--sp-6);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.app-modal-head .app-modal-title{font-size:17px;font-weight:600;margin:0}
.app-modal-head button{border-radius:var(--r-sm)}
.app-modal-body{padding:var(--sp-6)}
.app-modal-foot{
  padding:var(--sp-4) var(--sp-6);
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;
  justify-content:flex-end;
  gap:var(--sp-2);
}
html.theme-light .app-modal-head,
html.theme-light .app-modal-foot{border-color:rgba(20,22,28,.12)}

/* admin modal follows the same rhythm */
#modal-overlay{padding:var(--sp-4)}
#modal-box{border-radius:var(--r-lg)}
.modal-header{padding:var(--sp-5) var(--sp-6)!important}
.modal-body{padding:var(--sp-6)!important}
.modal-footer{padding:var(--sp-4) var(--sp-6)!important}

/* ---------- P1-4  payment tiles are real buttons now ---------- */
button.pm-tile,
button.amt-preset,
button.withdraw-method,
button.bal-tab{
  font:inherit;
  color:inherit;
  text-align:left;
  width:100%;
  appearance:none;
  -webkit-appearance:none;
}
button.pm-tile[data-disabled]{cursor:not-allowed}

/* ---------- P3-1  4pt grid on the payment tile ---------- */
.pm-tile{
  gap:var(--sp-2)!important;
  padding:var(--sp-3)!important;
  border-radius:var(--r-md)!important;
}

/* ---------- P3-1 + P3-3  one field shape ---------- */
.form-input{
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
}

/* ---------- P1-8  amount presets ---------- */
.amt-preset{
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm);
  text-align:center;
  cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.amt-preset.is-on{
  border-color:rgba(16,185,129,.55)!important;
  background:rgba(16,185,129,.15)!important;
  color:#fff!important;
  font-weight:600;
}
html.theme-light .amt-preset.is-on{
  border-color:rgba(5,150,105,.5)!important;
  background:rgba(5,150,105,.12)!important;
  color:#065f46!important;
}

/* ---------- P2-6  balance tabs ---------- */
.bal-tab{
  flex:1;
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  font-size:13.5px;
  font-weight:500;
  cursor:pointer;
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.5);
  border:1px solid rgba(255,255,255,.1);
  text-align:center;
  transition:background .15s,border-color .15s,color .15s;
}
.bal-tab.is-on{
  background:rgba(255,255,255,.1);
  color:#fff;
  border-color:rgba(255,255,255,.2);
}
html.theme-light .bal-tab{background:#f6f7f9;color:rgba(20,22,28,.5);border-color:rgba(20,22,28,.1)}
html.theme-light .bal-tab.is-on{background:#eceef3;color:#14161c;border-color:rgba(20,22,28,.28)}

/* ---------- P2-8  withdraw method selection via classes ---------- */
.withdraw-method{border-radius:var(--r-md);transition:background .15s,border-color .15s}
.withdraw-check{
  background:transparent;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.withdraw-method.is-on{
  border-color:rgba(16,185,129,.45)!important;
  background:rgba(16,185,129,.09)!important;
}
.withdraw-method.is-on .withdraw-check{
  background:var(--ui-ok)!important;
  border-color:var(--ui-ok)!important;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.92);
}
html.theme-light .withdraw-method.is-on{
  border-color:rgba(5,150,105,.45)!important;
  background:rgba(5,150,105,.08)!important;
}
html.theme-light .withdraw-method.is-on .withdraw-check{
  background:#059669!important;
  border-color:#059669!important;
  box-shadow:inset 0 0 0 3px #fff;
}

/* ---------- P2-7  long amounts stay inside the card ---------- */
.balance-amt{
  overflow-wrap:anywhere;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}

/* ---------- P1-5  visible badge instead of a native title tooltip ---------- */
.pm-badge{
  display:inline-block;
  margin-top:2px;
  padding:2px 6px;
  border-radius:999px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  background:rgba(245,158,11,.18);
  color:var(--ui-warn);
  border:1px solid rgba(245,158,11,.35);
}
html.theme-light .pm-badge{background:rgba(180,83,9,.12);color:#b45309;border-color:rgba(180,83,9,.32)}

/* ---------- P1-6  field hints ---------- */
.field-hint{
  margin-top:var(--sp-2);
  font-size:11.5px;
  line-height:1.5;
  color:rgba(255,255,255,.42);
}
.field-hint strong{color:rgba(255,255,255,.72);font-weight:600}
html.theme-light .field-hint{color:rgba(20,22,28,.55)}
html.theme-light .field-hint strong{color:rgba(20,22,28,.8)}

/* ---------- P2-1  comfortable close target ---------- */
.app-modal-close{
  position:relative;
  width:40px;
  height:40px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-sm);
}

/* P2-1: 48px touch target without inflating the header visually. */
.app-modal-close::after{content:'';position:absolute;inset:-4px;border-radius:inherit}



/* Uniform, perfectly aligned payment tiles (Cards, SBP, FunPay, Alipay, WeChat, Crypto) */
.pm-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}
@media (max-width: 480px) {
  .pm-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
.pm-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  height: 82px !important;
  min-height: 82px !important;
  max-height: 82px !important;
  padding: 10px 6px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: hidden !important;
  gap: 6px !important;
}
.pm-tile.is-hidden {
  display: none !important;
}
.pm-tile .pm-ico {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto !important;
  flex: none !important;
  font-size: 0 !important;
  color: transparent !important;
  line-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.pm-tile .pm-ico::before {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  margin: 0 auto !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
}
.pm-tile .pm-ico.pm-ico-sbp::before,
.pm-tile .pm-ico.pm-ico-funpay::before {
  display: none !important;
}
.pm-tile .pm-ico.pm-ico-sbp {
  background-image: url("/static/img/pay/sbp.svg") !important;
  background-size: 18px auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.pm-tile .pm-ico.pm-ico-funpay {
  background-image: url("/static/img/pay/funpay.png") !important;
  background-size: 20px 20px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
.pm-tile .pm-name {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
  line-height: 1.2 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.pm-tile.pm-off {
  opacity: 0.45 !important;
  filter: grayscale(1) !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}



/* Light Theme for Gift Dropdown */
html.theme-light .gift-dropdown,
.theme-light .gift-dropdown {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14) !important;
}
html.theme-light .gift-opt,
.theme-light .gift-opt {
  color: #0f172a !important;
}
html.theme-light .gift-opt:hover,
.theme-light .gift-opt:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}
html.theme-light .gift-opt-av,
.theme-light .gift-opt-av {
  background: #e2e8f0 !important;
}


/* Light Theme for Toast Notifications */
html.theme-light #toast-container .toast,
.theme-light #toast-container .toast,
body.theme-light #toast-container .toast {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}
html.theme-light #toast-container .toast.success,
.theme-light #toast-container .toast.success {
  border-left: 4px solid var(--accent, #10b981) !important;
}
html.theme-light #toast-container .toast.error,
.theme-light #toast-container .toast.error {
  border-left: 4px solid #ef4444 !important;
}
html.theme-light #toast-container .toast.warning,
.theme-light #toast-container .toast.warning {
  border-left: 4px solid #f59e0b !important;
}
html.theme-light #toast-container .toast.info,
.theme-light #toast-container .toast.info {
  border-left: 4px solid var(--color-accent, #10b981) !important;
}


@keyframes toast-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.toast.toast-pulse {
  animation: toast-pulse 0.25s ease-in-out !important;
}

.pm-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  height: auto !important;
  min-height: 88px !important;
  padding: 8px 6px 9px !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  gap: 4px !important;
}
.pm-tile .pm-name {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-align: center !important;
  line-height: 1.15 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
}
.pm-tile .pm-name .balance-amt,
.pm-tile .pm-name #buyBalanceValue {
  font-size: 11px !important;
  font-weight: 600 !important;
  opacity: 0.82 !important;
  display: block !important;
  line-height: 1.1 !important;
  margin-top: 1px !important;
}

.pm-tile .pm-name.pm-name-balance {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  white-space: nowrap !important;
}
.pm-tile .pm-name.pm-name-balance .balance-amt,
.pm-tile .pm-name.pm-name-balance #buyBalanceValue {
  display: inline !important;
  margin-top: 0 !important;
  line-height: inherit !important;
  font-size: 11.5px !important;
}


/* ===== Unified Notifications tied to accent color ===== */
#toast-container.toast-stack > .toast,
.toast {
  background: rgba(18, 22, 31, 0.95) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35) !important;
  border-radius: 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

#toast-container.toast-stack > .toast.info,
.toast.info {
  border-left: 3.5px solid var(--accent, #10b981) !important;
  border-color: rgba(var(--accent-rgb, 16, 185, 129), 0.28) !important;
}
#toast-container.toast-stack > .toast.info .toast-ico,
#toast-container.toast-stack > .toast.info .ti,
.toast.info .toast-ico,
.toast.info .ti {
  color: var(--accent, #10b981) !important;
}

#toast-container.toast-stack > .toast.success,
.toast.success {
  border-left: 3.5px solid var(--accent, #10b981) !important;
  border-color: rgba(var(--accent-rgb, 16, 185, 129), 0.28) !important;
}
#toast-container.toast-stack > .toast.success .toast-ico,
#toast-container.toast-stack > .toast.success .ti,
.toast.success .toast-ico,
.toast.success .ti {
  color: var(--accent, #10b981) !important;
}

#toast-container.toast-stack > .toast.warning,
.toast.warning {
  border-left: 3.5px solid #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.28) !important;
}
#toast-container.toast-stack > .toast.warning .toast-ico,
.toast.warning .toast-ico {
  color: #f59e0b !important;
}

#toast-container.toast-stack > .toast.error,
.toast.error {
  border-left: 3.5px solid #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.28) !important;
}
#toast-container.toast-stack > .toast.error .toast-ico,
.toast.error .toast-ico {
  color: #ef4444 !important;
}

.toast-x {
  color: rgba(255, 255, 255, 0.5) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.toast-x:hover {
  color: #ffffff !important;
}

html.theme-light #toast-container.toast-stack > .toast,
html.theme-light .toast {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0f172a !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14) !important;
}
html.theme-light .toast .toast-msg,
html.theme-light .toast span {
  color: #0f172a !important;
}
html.theme-light .toast-x {
  color: rgba(0, 0, 0, 0.45) !important;
}
html.theme-light .toast-x:hover {
  color: #000000 !important;
}

/* Also add dedicated button override for settings revoke in CSS */
#sessions-list button,
#sessions-list button[data-i18n="revoke"],
.btn-revoke-session {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 2px 4px !important;
  color: #f87171 !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}
#sessions-list button:hover,
#sessions-list button[data-i18n="revoke"]:hover,
.btn-revoke-session:hover {
  background: transparent !important;
  color: #ef4444 !important;
  text-decoration: underline !important;
}

/* Lolzteam payment tile */
.pm-tile .pm-ico.pm-ico-lolzteam::before{display:none !important}
.pm-tile .pm-ico.pm-ico-lolzteam{background-color:rgba(255,255,255,.06) !important;background-image:url("/static/img/pay/lolzteam.png") !important;background-size:22px 22px !important;background-position:center !important;background-repeat:no-repeat !important}


/* Theme-aware high contrast hint styles */
@keyframes buyHintPop {
  0% { transform: scale(0.95); opacity: 0.6; }
  50% { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.buy-hint-anim {
  animation: buyHintPop 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
  will-change: transform, opacity;
}
.buy-hint-wrap {
  display: flex !important;
  align-items: center !important;
  margin-top: 4px !important;
}
.buy-hint-text {
  font-size: 13px !important;
  color: #10b981 !important;
  font-weight: 700 !important;
}

.norpo-badge {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #f1f5f9;
  font-size: 12px;
  line-height: 1.5;
}
.norpo-badge strong {
  color: #10b981;
  font-weight: 700;
}
.norpo-badge-sub {
  color: rgba(255, 255, 255, 0.85);
}
.theme-light .norpo-badge,
html[data-theme="light"] .norpo-badge,
body.theme-light .norpo-badge,
html.theme-light .norpo-badge {
  background: rgba(16, 185, 129, 0.14) !important;
  border: 1px solid rgba(16, 185, 129, 0.45) !important;
  color: #0f172a !important;
}
.theme-light .norpo-badge strong,
html[data-theme="light"] .norpo-badge strong,
body.theme-light .norpo-badge strong,
html.theme-light .norpo-badge strong {
  color: #047857 !important;
}
.theme-light .norpo-badge-sub,
html[data-theme="light"] .norpo-badge-sub,
body.theme-light .norpo-badge-sub,
html.theme-light .norpo-badge-sub {
  color: #1e293b !important;
}