/* =============================================================================
   PERSIANTOXIC — DASHBOARD  ("ATLAS")  v2
   -----------------------------------------------------------------------------
   A modern, premium control panel on a soft neutral-grey canvas. White cards
   that lift on a whisper of shadow, a deep-blue brand gradient reserved for
   heroes and primary actions, and a signature accent bar on every section
   title. This is deliberately NOT the dark cinematic public site — the panel
   feels bright, calm, fast and expensive.

   Every class name and CSS custom-property name below is the contract the
   existing dashboard markup and its inline render scripts depend on
   (--text-1..4, --bg-0..4, --line-1..3, --brand-*, --success, --danger,
   --radius*, --shadow-*, --ease). Values + component styling are new.

   Mobile navigation is the bottom dock ONLY — there is no hamburger and the
   sidebar is not reachable on small screens (by explicit request).
   ============================================================================= */
@font-face{
  font-family:'Changa';
  src:url('../../../assets/fonts/Changa-Var.woff2') format('woff2-variations'),
      url('../../../assets/fonts/Changa-Var.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{font-family:'Peyda';src:url('../../../assets/fonts/Peyda-Regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Peyda';src:url('../../../assets/fonts/Peyda-SemiBold.woff') format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'Peyda';src:url('../../../assets/fonts/Peyda-Bold.woff') format('woff');font-weight:700;font-display:swap}
@font-face{
  font-family:'Martian Mono';
  src:url('../../../assets/fonts/MartianMono-Var.woff2') format('woff2-variations');
  font-weight:100 800; font-stretch:75% 112.5%; font-display:swap;
}

/* ============================================================================
   THEME — DARK is the default. Light is opt-in via [data-theme="light"]
   (toggled from the topbar or the settings page). The dashboard boot script
   sets data-theme from localStorage "pt_theme" (default "dark") to avoid a
   flash. Component styles only reference the tokens below, so a theme swap is
   just a token swap.
   ========================================================================== */
:root,[data-theme="dark"]{
  /* — canvas: deep charcoal-navy, not pure black — */
  --bg-0:#0b0d13;   /* app canvas */
  --bg-1:#141824;   /* cards */
  --bg-2:#1a1f2d;   /* raised surfaces / menus */
  --bg-3:#1d2230;   /* subtle fill, hovers, inputs */
  --bg-4:#272d3d;   /* stronger fill, tracks */
  --bg-tint:#161f34;/* faint blue wash */

  /* — hairlines — */
  --line-1:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.11);
  --line-3:rgba(255,255,255,.19);

  /* — text — */
  --text-1:#f3f5f9;
  --text-2:#c4cad6;
  --text-3:#8b93a3;
  --text-4:#5e6676;

  /* — accent: one blue, brighter on dark; brand-* remapped to it — */
  --blue:#3b78ff;
  --blue-strong:#6a9bff;
  --blue-deep:#1e4fd0;
  --blue-soft:rgba(59,120,255,.15);
  --blue-line:rgba(59,120,255,.42);
  --brand-red:#3b78ff;
  --brand-amber:#3b78ff;
  --brand-lime:#2ecc71;

  /* — status — */
  --success:#2ecc71;  --success-bg:rgba(46,204,113,.16);
  --danger:#ff5b60;   --danger-bg:rgba(255,91,96,.15);
  --warn:#f5b042;     --warn-bg:rgba(245,176,66,.16); --warn-text:#f5b042;

  /* — theme-aware surfaces — */
  --media-grad:linear-gradient(135deg,#1b2438,#121a2c);
  --veil:rgba(7,9,14,.72);

  /* — depth: deeper on dark — */
  --shadow-1:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.32);
  --shadow-2:0 2px 8px rgba(0,0,0,.42), 0 20px 44px -20px rgba(0,0,0,.72);
  --shadow-pop:0 12px 46px -10px rgba(0,0,0,.78);
  --shadow-blue:0 16px 34px -14px rgba(47,107,255,.5);

  /* — shared: gradients + structure (theme-independent) — */
  --brand-grad:linear-gradient(135deg,#3a72ff,#2f6bff 55%,#1e56e6);
  --hero-grad:linear-gradient(120deg,#152a73 0%,#1e56e6 48%,#3f7bff 100%);
  --radius:16px; --radius-sm:11px; --radius-lg:22px; --radius-pill:999px;
  --ease:cubic-bezier(.2,.85,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sidebar-w:16.5rem;
  --f-body:'Peyda',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-display:'Peyda','Changa',system-ui,sans-serif;
  --f-mono:'Martian Mono',ui-monospace,monospace;
}

/* — LIGHT theme (opt-in): soft cool grey — */
[data-theme="light"]{
  --bg-0:#eaecf2; --bg-1:#ffffff; --bg-2:#ffffff; --bg-3:#f2f4f9; --bg-4:#e6e9f1; --bg-tint:#f5f8ff;
  --line-1:rgba(22,27,40,.07); --line-2:rgba(22,27,40,.11); --line-3:rgba(22,27,40,.17);
  --text-1:#111726; --text-2:#39414f; --text-3:#6a7180; --text-4:#9aa1af;
  --blue:#2f6bff; --blue-strong:#1e56e6; --blue-deep:#183bb0; --blue-soft:#eaf1ff; --blue-line:rgba(47,107,255,.26);
  --brand-red:#2f6bff; --brand-amber:#2f6bff; --brand-lime:#12b76a;
  --success:#12b76a; --success-bg:rgba(18,183,106,.12);
  --danger:#e5484d; --danger-bg:rgba(229,72,77,.10);
  --warn:#f0a020; --warn-bg:rgba(240,160,32,.13); --warn-text:#8a5a00;
  --media-grad:linear-gradient(135deg,#eaf1ff,#d5e3ff);
  --veil:rgba(234,236,242,.72);
  --shadow-1:0 1px 2px rgba(22,27,40,.05), 0 1px 3px rgba(22,27,40,.04);
  --shadow-2:0 2px 6px rgba(22,27,40,.05), 0 18px 40px -18px rgba(22,27,40,.22);
  --shadow-pop:0 10px 44px -10px rgba(22,27,40,.24);
  --shadow-blue:0 16px 34px -14px rgba(47,107,255,.55);
}
html[lang="en"]{--f-display:'Changa','Peyda',system-ui,sans-serif}

/* =============================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;background:var(--bg-0);color:var(--text-2);
  overflow-x:clip;
  font-family:var(--f-body);font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure{margin:0}
img,svg{display:block;max-width:100%}
:focus{outline:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
::selection{background:var(--blue-soft);color:var(--blue-strong)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line-3);border:3px solid transparent;background-clip:content-box;border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--text-4)}

.mono{font-family:var(--f-mono);font-stretch:85%;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}

/* =============================================================================
   LAYOUT — sidebar + main
   ========================================================================== */
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:100vh}

/* — sidebar — */
.sidebar{
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
  background:var(--bg-1);
  border-inline-end:1px solid var(--line-1);
  padding:1.1rem .8rem 1rem;
  z-index:40;
}
.sidebar__brand{
  display:flex;align-items:center;gap:.65rem;
  padding:.35rem .5rem 1rem;
  margin-bottom:.5rem;border-bottom:1px solid var(--line-1);
}
.sidebar__logo{width:2rem;height:2rem;flex:none;object-fit:contain}
.sidebar__name{
  font-family:'Changa',var(--f-display);font-weight:800;
  font-size:1.075rem;letter-spacing:-.02em;color:var(--text-1);
  text-transform:uppercase;direction:ltr;
}
.sidebar__nav{flex:1;display:flex;flex-direction:column;gap:.12rem;overflow-y:auto;padding-top:.4rem}
.sidebar__nav::-webkit-scrollbar{width:6px}
.sidebar__group{margin-bottom:.5rem}
.sidebar__groupLbl{
  padding:.55rem .8rem .4rem;
  font-family:var(--f-mono);font-size:.5625rem;font-stretch:88%;
  letter-spacing:.18em;text-transform:uppercase;color:var(--text-4);
}
html[lang="fa"] .sidebar__groupLbl,body.lang-fa .sidebar__groupLbl{
  font-family:var(--f-body);font-size:.75rem;letter-spacing:0;text-transform:none;
}
.sidebar__item{
  position:relative;
  display:flex;align-items:center;gap:.75rem;
  padding:.62rem .8rem;border-radius:var(--radius-sm);
  color:var(--text-3);font-weight:600;font-size:.9375rem;
  transition:background var(--ease) .18s,color var(--ease) .18s;
}
.sidebar__item:hover{background:var(--bg-3);color:var(--text-1)}
.sidebar__icon{display:grid;place-items:center;width:1.3rem;height:1.3rem;flex:none;color:currentColor}
.sidebar__icon svg{width:1.25rem;height:1.25rem}
.sidebar__lbl{flex:1}
.sidebar__item.is-active{background:var(--blue-soft);color:var(--blue-strong)}
.sidebar__item.is-active .sidebar__icon{color:var(--blue)}
.sidebar__item.is-active::before{
  content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);
  width:3px;height:1.35rem;background:var(--brand-grad);border-radius:99px;
}
.sidebar__badge{
  min-width:1.25rem;height:1.25rem;padding:0 .35rem;
  display:grid;place-items:center;
  background:var(--blue);color:#fff;
  font-family:var(--f-mono);font-size:.625rem;font-weight:700;
  border-radius:999px;direction:ltr;
}
.sidebar__item.is-active .sidebar__badge{background:var(--blue-strong)}
.sidebar__item--danger{color:var(--danger)}
.sidebar__item--danger:hover{background:var(--danger-bg);color:var(--danger)}
.sidebar__item--danger .sidebar__icon{color:currentColor}

/* drawer-only footer (back-to-site + logout), shown on mobile */
.sidebar__foot{display:none;flex-direction:column;gap:.12rem;padding:.5rem 0 .3rem;margin-top:.3rem;border-top:1px solid var(--line-1)}

.sidebar__user{
  display:flex;align-items:center;gap:.65rem;
  padding:.6rem;margin-top:.5rem;border-radius:var(--radius-sm);
  background:var(--bg-3);
}
.sidebar__avatar{
  width:2.25rem;height:2.25rem;flex:none;border-radius:50%;overflow:hidden;
  background:var(--bg-4);display:grid;place-items:center;color:var(--text-4);
}
.sidebar__avatar img{width:100%;height:100%;object-fit:cover}
.sidebar__userInfo{min-width:0;flex:1}
.sidebar__userName{font-weight:700;color:var(--text-1);font-size:.9375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar__userMeta{font-family:var(--f-mono);font-size:.6875rem;font-stretch:85%;color:var(--text-4);direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .sidebar__userMeta{text-align:right}

/* — main column — */
.main{display:flex;flex-direction:column;min-width:0}

/* — topbar — */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:1rem;
  height:4.25rem;padding-inline:clamp(1rem,3vw,2rem);
  background:color-mix(in srgb,var(--bg-0) 80%,transparent);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-1);
}
/* Hamburger — hidden on desktop, shown on mobile; morphs into an X when the
   drawer is open. */
.topbar__hamb{
  display:none;place-items:center;flex:none;
  width:2.5rem;height:2.5rem;border-radius:var(--radius-sm);
  background:var(--bg-1);border:1px solid var(--line-2);color:var(--text-2);
  transition:background var(--ease) .16s,border-color var(--ease) .16s,color var(--ease) .16s;
}
.topbar__hamb:hover{background:var(--bg-3);color:var(--text-1);border-color:var(--line-3)}
.topbar__hambBox{position:relative;display:block;width:1.15rem;height:.8rem}
.topbar__hambBox .bar{position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform .28s var(--ease),opacity .18s var(--ease),top .28s var(--ease)}
.topbar__hambBox .bar:nth-child(1){top:0}
.topbar__hambBox .bar:nth-child(2){top:calc(50% - 1px)}
.topbar__hambBox .bar:nth-child(3){top:calc(100% - 2px)}
.topbar__hamb.is-open .bar:nth-child(1){top:calc(50% - 1px);transform:rotate(45deg)}
.topbar__hamb.is-open .bar:nth-child(2){opacity:0}
.topbar__hamb.is-open .bar:nth-child(3){top:calc(50% - 1px);transform:rotate(-45deg)}
.topbar__pageTitle{
  font-family:var(--f-display);font-weight:700;font-size:1.2rem;
  letter-spacing:-.01em;color:var(--text-1);
}
.topbar__spacer{flex:1}
.topbar__actions{display:flex;align-items:center;gap:.55rem}
/* the light/dark switch lives only in Settings → Appearance now */
[data-theme-toggle]{display:none!important}
/* back-to-site button (icon-only on small screens).
   NOTE: selectors are doubled up (.btn.siteBtn) because the generic
   `.btn svg{width:1.1rem}` rule lives further down in PRIMITIVES — with equal
   specificity it would otherwise win on source order and shrink the icon. */
.btn.siteBtn{gap:.45rem;padding-inline:.8rem}
.btn.siteBtn svg{width:1.15rem;height:1.15rem}
@media (max-width:47.99em){
  .siteBtn__lbl{display:none}
  .btn.siteBtn{padding:0;width:2.6rem;height:2.6rem;min-height:2.6rem}
  .btn.siteBtn svg{width:1.55rem;height:1.55rem}
}

.iconBtn{
  position:relative;display:grid;place-items:center;
  width:2.5rem;height:2.5rem;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  color:var(--text-2);
  transition:background var(--ease) .18s,border-color var(--ease) .18s,color var(--ease) .18s;
}
.iconBtn:hover{background:var(--bg-3);color:var(--text-1);border-color:var(--line-3)}
.iconBtn svg{width:1.2rem;height:1.2rem}
.iconBtn__dot{
  position:absolute;top:.5rem;inset-inline-end:.5rem;
  width:.5rem;height:.5rem;border-radius:50%;background:var(--danger);
  border:2px solid var(--bg-1);
}
.icon--moon,.icon--sun{width:1.2rem;height:1.2rem}
/* dark ⇄ light toggle is active (dark is the default) */

/* language pill */
.langPill{
  display:inline-flex;align-items:center;
  background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--radius-pill);
  overflow:hidden;direction:ltr;
}
.langPill__opt{
  padding:.5rem .72rem;font-family:var(--f-mono);font-size:.6875rem;font-weight:600;font-stretch:85%;
  color:var(--text-4);transition:color var(--ease) .18s,background var(--ease) .18s;
}
.langPill__opt:hover{color:var(--text-2)}
.langPill__opt.is-active,html[lang="fa"] .langPill__opt[data-lang="fa"],html[lang="en"] .langPill__opt[data-lang="en"]{
  background:var(--blue);color:#fff;
}

/* user button */
.userBtn{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.15rem;background:none;border:0;border-radius:var(--radius-pill);
  color:var(--text-1);font-weight:600;font-size:.875rem;
}
.userBtn__name{display:none}
.userBtn:hover{background:var(--bg-3);border-color:var(--line-3)}
.userBtn__avatar{
  width:1.85rem;height:1.85rem;border-radius:50%;overflow:hidden;flex:none;
  background:var(--bg-4);display:grid;place-items:center;color:var(--text-4);order:2;
}
.userBtn__avatar img{width:100%;height:100%;object-fit:cover}
.userBtn__name{max-width:9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* dropdown menus */
.menu__pos{position:relative}
.menu{
  position:absolute;top:calc(100% + .6rem);inset-inline-end:0;z-index:50;
  min-width:15rem;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:var(--shadow-pop);
  padding:.4rem;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--ease) .18s,transform var(--ease) .18s,visibility var(--ease) .18s;
}
.menu.is-open{opacity:1;visibility:visible;transform:none}
.menu__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.55rem .7rem;font-weight:700;color:var(--text-1);font-size:.875rem;
}
.menu__sep{height:1px;background:var(--line-1);margin:.3rem 0}
.menu__item{
  display:flex;align-items:center;gap:.6rem;
  padding:.6rem .7rem;border-radius:var(--radius-sm);
  color:var(--text-2);font-size:.9375rem;font-weight:500;
  transition:background var(--ease) .16s,color var(--ease) .16s;
}
.menu__item:hover{background:var(--bg-3);color:var(--text-1)}
.menu__item svg{width:1.1rem;height:1.1rem;flex:none;color:var(--text-4)}
.menu__item--danger{color:var(--danger)}
.menu__item--danger:hover{background:var(--danger-bg);color:var(--danger)}
.menu__item--danger svg{color:var(--danger)}

.sideBackdrop{
  position:fixed;inset:0;z-index:35;background:rgba(20,24,35,.4);
  opacity:0;visibility:hidden;transition:opacity var(--ease) .22s,visibility var(--ease) .22s;
}
.sideBackdrop.is-visible{opacity:1;visibility:visible}

/* =============================================================================
   PAGE CANVAS
   ========================================================================== */
.page{
  flex:1;width:100%;max-width:80rem;margin-inline:auto;
  padding:clamp(1.15rem,2.6vw,1.75rem);
  display:flex;flex-direction:column;gap:1.15rem;
}

/* page heading (non-home pages): accent bar + title + subtitle */
.pageHead{margin-bottom:.1rem}
.pageHead__title{
  display:flex;align-items:center;gap:.65rem;
  font-family:var(--f-display);font-weight:800;font-size:clamp(1.35rem,3vw,1.75rem);
  letter-spacing:-.01em;color:var(--text-1);line-height:1.2;
}
.pageHead__title::before{
  content:"";width:5px;align-self:stretch;min-height:1.3em;
  border-radius:3px;background:var(--brand-grad);
}
.pageHead__sub{margin-top:.5rem;color:var(--text-3);font-size:.95rem;max-width:46rem}

/* =============================================================================
   PRIMITIVES — buttons, cards, chips, tables
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:2.75rem;padding:0 1.2rem;border-radius:var(--radius-sm);
  font-weight:700;font-size:.9375rem;white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--ease) .18s,border-color var(--ease) .18s,color var(--ease) .18s,box-shadow var(--ease) .18s,transform var(--ease) .12s,filter var(--ease) .18s;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:1.1rem;height:1.1rem}
.btn--sm{min-height:2.3rem;padding:0 .9rem;font-size:.875rem}
.btn--lg{min-height:3.1rem;padding:0 1.5rem;font-size:1rem}
.btn--primary{background:var(--brand-grad);color:#fff;box-shadow:var(--shadow-blue)}
.btn--primary:hover{filter:brightness(1.05);box-shadow:0 20px 40px -14px rgba(47,107,255,.7)}
.btn--ghost{background:var(--bg-3);color:var(--text-1)}
.btn--ghost:hover{background:var(--bg-4)}
.btn--outline{background:var(--bg-1);border-color:var(--line-2);color:var(--text-1)}
.btn--outline:hover{border-color:var(--blue-line);background:var(--blue-soft);color:var(--blue-strong)}
.btn--danger{background:var(--danger-bg);color:var(--danger)}
.btn--danger:hover{background:var(--danger);color:#fff}
.btn--block{width:100%}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}

.card{
  background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--radius);
  box-shadow:var(--shadow-1);
}
.card__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem 1.4rem;border-bottom:1px solid var(--line-1);
}
.card__title{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--f-display);font-weight:700;font-size:1.075rem;color:var(--text-1);
}
/* signature accent bar before every card/section title */
.card__title::before{
  content:"";width:4px;height:1.15em;border-radius:2px;
  background:var(--brand-grad);flex:none;
}
.card__action{
  display:inline-flex;align-items:center;gap:.35rem;
  color:var(--blue);font-weight:600;font-size:.875rem;white-space:nowrap;
  transition:gap var(--ease) .18s;
}
.card__action:hover{gap:.6rem}
.card__action svg{width:1rem;height:1rem}
html[dir="rtl"] .card__action svg{transform:scaleX(-1)}
.card__body{padding:1.4rem}
.card__body--flush{padding:0}
/* a scroll wrapper sitting flush in a card shouldn't draw its own box */
.card__body--flush .table__wrap{border:0;border-radius:0}

.grid{display:grid;gap:1.25rem}
.grid--2{grid-template-columns:1fr}
.grid--stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--wallet{grid-template-columns:1fr;gap:1.25rem}

/* status chips */
.badge{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.28rem .6rem;border-radius:var(--radius-pill);
  font-size:.75rem;font-weight:700;white-space:nowrap;
  background:var(--bg-4);color:var(--text-3);
}
.badge__dot{width:.45rem;height:.45rem;border-radius:50%;background:currentColor}
.badge--success{background:var(--success-bg);color:var(--success)}
.badge--danger{background:var(--danger-bg);color:var(--danger)}
.badge--soon{background:var(--bg-4);color:var(--text-4)}
.badge--warn,.badge--warning{background:var(--warn-bg);color:var(--warn)}
.badge--info{background:var(--blue-soft);color:var(--blue-strong)}

/* rank chips (retinted per rank, but all blue-family here) */
.rankChip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.28rem .65rem;border-radius:var(--radius-pill);
  font-weight:700;font-size:.8125rem;
  background:var(--blue-soft);color:var(--blue-strong);
  /* rank names are latin — keep "VIP+" from flipping to "+VIP" in RTL */
  direction:ltr;unicode-bidi:isolate;
}
.rankChip--none{background:var(--bg-4);color:var(--text-4)}
.rankChip--multi{cursor:pointer}

/* method chip in tables */
.methodChip{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.25rem .55rem;border-radius:var(--radius-sm);
  background:var(--bg-3);color:var(--text-2);font-size:.75rem;font-weight:600;white-space:nowrap;
}
.methodChip svg{width:.9rem;height:.9rem;color:var(--text-4)}

/* tables */
.table__wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--line-1)}
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th{
  text-align:start;padding:.85rem 1.1rem;
  font-family:var(--f-mono);font-size:.625rem;font-stretch:88%;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-4);font-weight:600;background:var(--bg-3);
  border-bottom:1px solid var(--line-1);white-space:nowrap;
}
html[lang="fa"] .table th,body.lang-fa .table th{font-family:var(--f-body);font-size:.75rem;letter-spacing:0;text-transform:none}
.table td{padding:.9rem 1.1rem;border-bottom:1px solid var(--line-1);color:var(--text-2);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--ease) .14s}
.table tbody tr:hover{background:var(--bg-3)}
.table .mono,.table__num,.table .is-num{font-family:var(--f-mono);font-stretch:82%;font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .table .is-num{text-align:start}

/* empty states */
.empty{padding:2.5rem 1.5rem;text-align:center;color:var(--text-4)}
.empty__icon{display:grid;place-items:center;width:3.25rem;height:3.25rem;margin:0 auto .85rem;border-radius:50%;background:var(--bg-3);color:var(--text-4)}
.empty__icon svg{width:1.5rem;height:1.5rem}
.empty__title{font-weight:700;color:var(--text-2);margin-bottom:.35rem}
.empty__sub{color:var(--text-4);font-size:.9rem}

/* toast + language loader (rendered by dashboard.js; must be styled here since
   the old dashboard.css is no longer loaded — otherwise the toast SVG has no
   size and renders as a giant checkmark that adds page scroll). */
.toast{
  position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(1rem);z-index:200;
  display:inline-flex;align-items:center;gap:.6rem;max-width:calc(100vw - 2rem);
  padding:.7rem 1.05rem;border-radius:var(--radius-sm);
  background:var(--bg-2);border:1px solid var(--line-2);color:var(--text-1);
  box-shadow:var(--shadow-pop);font-weight:600;font-size:.9rem;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s var(--ease);
}
.toast.is-visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.toast__icon{display:grid;place-items:center;width:1.4rem;height:1.4rem;flex:none;border-radius:50%;background:var(--success-bg);color:var(--success)}
.toast__icon svg{width:.95rem;height:.95rem}
.langLoading__spin{width:2.4rem;height:2.4rem;border-radius:50%;border:3px solid var(--line-2);border-top-color:var(--blue);animation:ptspin .7s linear infinite}
@keyframes ptspin{to{transform:rotate(360deg)}}

/* =============================================================================
   HOME — hero + stats + connected accounts
   ========================================================================== */
.welcome{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  background:var(--hero-grad);color:#fff;
  border-radius:var(--radius-lg);
  padding:clamp(1.4rem,3.5vw,2.1rem);
  box-shadow:var(--shadow-blue);
}
/* soft light bloom + faint grid to keep the hero from feeling flat */
.welcome::before{
  content:"";position:absolute;inset-inline-end:-6rem;top:-8rem;
  width:22rem;height:22rem;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.22),transparent 68%);
  pointer-events:none;
}
.welcome::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 120% at 85% -10%,#000,transparent 60%);
          mask-image:radial-gradient(120% 120% at 85% -10%,#000,transparent 60%);
}
.welcome>*{position:relative;z-index:1}
.welcome__avatar{
  width:4.25rem;height:4.25rem;flex:none;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.14);display:grid;place-items:center;color:rgba(255,255,255,.8);
  box-shadow:0 0 0 3px rgba(255,255,255,.25),0 8px 20px -6px rgba(0,0,0,.4);
}
.welcome__avatar img{width:100%;height:100%;object-fit:cover}
.welcome__copy{flex:1;min-width:12rem}
.welcome__hi{color:rgba(255,255,255,.82);font-size:.9rem;font-weight:600}
.welcome__name{font-family:var(--f-display);font-weight:800;font-size:clamp(1.5rem,3.5vw,2rem);color:#fff;line-height:1.2}
.welcome__meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.6rem;color:rgba(255,255,255,.85);font-size:.9rem}
.welcome__meta strong{color:#fff}
.welcome .rankChip{background:rgba(255,255,255,.18);color:#fff}
.welcome .rankChip--none{background:rgba(255,255,255,.14);color:rgba(255,255,255,.8)}
.welcome__actions{display:flex;gap:.6rem;flex-wrap:wrap}
.welcome .btn--primary{background:#fff;color:var(--blue-strong);box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.welcome .btn--primary:hover{filter:none;background:#f2f6ff;box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.welcome .btn--ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.24)}
.welcome .btn--ghost:hover{background:rgba(255,255,255,.24)}

/* Grid layout (not absolute icon) so the value can never collide with the
   icon on short cards: row1 = label + icon, row2 = value, row3 = progress. */
.grid--stats .stat{
  overflow:hidden;
  display:grid;grid-template-columns:1fr auto;column-gap:.75rem;row-gap:.7rem;align-content:start;
  background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--radius);
  box-shadow:var(--shadow-1);padding:1.3rem;min-height:6.75rem;
  transition:box-shadow var(--ease) .2s,transform var(--ease) .2s,border-color var(--ease) .2s;
}
.stat__icon{
  grid-column:2;grid-row:1;align-self:start;flex:none;
  display:grid;place-items:center;width:2.5rem;height:2.5rem;
  border-radius:var(--radius-sm);background:var(--blue-soft);color:var(--blue);
}
.stat__icon svg{width:1.3rem;height:1.3rem}
.stat__lbl{grid-column:1;grid-row:1;align-self:center;color:var(--text-3);font-size:.8125rem;font-weight:600}
.stat__val{grid-column:1 / -1;grid-row:2;align-self:end;font-family:var(--f-mono);font-stretch:82%;font-weight:600;font-size:1.6rem;line-height:1.1;color:var(--text-1);direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .stat__val{text-align:right}
.grid--stats .stat .progress{grid-column:1 / -1;grid-row:3;margin-top:0!important}
.stat__valSm{font-size:1.05rem;color:var(--text-3)}
.stat--clickable{cursor:pointer}
.stat--clickable:hover{box-shadow:var(--shadow-2);transform:translateY(-3px);border-color:var(--blue-line)}
/* the active-rank stat holds a phrase, not a number */
#statActiveRank{grid-column:1 / -1;grid-row:2;font-family:var(--f-display);font-size:1.25rem;direction:inherit;text-align:start}

.progress{height:.45rem;border-radius:99px;background:var(--bg-4);overflow:hidden}
.progress__fill{height:100%;border-radius:99px;background:var(--brand-grad);transition:width .8s var(--ease-out)}

/* connected accounts */
.linkedItem{
  display:flex;align-items:center;gap:.9rem;
  padding:1rem 1.4rem;border-bottom:1px solid var(--line-1);
}
.linkedItem:last-child{border-bottom:0}
.linkedItem__icon{
  display:grid;place-items:center;width:2.6rem;height:2.6rem;flex:none;
  border-radius:var(--radius-sm);background:var(--bg-3);color:var(--text-3);
}
.linkedItem__icon svg{width:1.3rem;height:1.3rem}
.linkedItem__info{flex:1;min-width:0}
.linkedItem__name{font-weight:700;color:var(--text-1);font-size:.9375rem}
.linkedItem__val{color:var(--text-3);font-size:.8125rem;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .linkedItem__val{text-align:start}
.linkedItem__val--placeholder{color:var(--text-4)}

/* notifications list */
.notif{
  display:flex;align-items:flex-start;gap:.8rem;
  padding:1rem 1.4rem;border-bottom:1px solid var(--line-1);
}
.notif:last-child{border-bottom:0}
.notif__icon{
  display:grid;place-items:center;width:2.2rem;height:2.2rem;flex:none;
  border-radius:50%;background:var(--bg-3);color:var(--text-4);
}
.notif__icon svg{width:1.05rem;height:1.05rem}
.notif--unread{background:var(--bg-tint)}
.notif--unread .notif__icon{background:var(--blue-soft);color:var(--blue)}
.notif__body{flex:1;min-width:0}
.notif__title{font-weight:700;color:var(--text-1);font-size:.9rem}
.notif--unread .notif__title::after{
  content:"";display:inline-block;width:.45rem;height:.45rem;margin-inline-start:.4rem;
  border-radius:50%;background:var(--blue);vertical-align:middle;
}
.notif__msg{color:var(--text-3);font-size:.85rem;line-height:1.55}
.notif__time{font-family:var(--f-mono);font-size:.6875rem;font-stretch:85%;color:var(--text-4);direction:ltr;margin-top:.2rem}
/* menu-scoped notif spacing (dropdown is tighter than page cards) */
.menu .notif{padding:.7rem .55rem}

/* =============================================================================
   WALLET
   ========================================================================== */
.walletCard{
  position:relative;overflow:hidden;
  border-radius:var(--radius-lg);color:#fff;
  background:var(--hero-grad);
  padding:1.35rem;min-height:10rem;
  display:flex;flex-direction:column;justify-content:space-between;gap:1rem;
  box-shadow:var(--shadow-blue);
}
.walletCard::before{
  content:"";position:absolute;inset-inline-end:-5rem;top:-6rem;
  width:18rem;height:18rem;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2),transparent 68%);pointer-events:none;
}
.walletCard::after{
  content:"";position:absolute;inset-inline-start:-4rem;bottom:-7rem;
  width:16rem;height:16rem;border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.18),transparent 70%);pointer-events:none;
}
.walletCard>*{position:relative;z-index:1}
.walletCard__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.walletCard__label{font-size:.85rem;font-weight:600;color:rgba(255,255,255,.85)}
.walletCard__chipIcon{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:var(--radius-sm);background:rgba(255,255,255,.16);color:#fff}
.walletCard__chipIcon svg{width:1.4rem;height:1.4rem}
.walletCard__balance{font-family:var(--f-mono);font-stretch:82%;font-weight:600;font-size:clamp(1.7rem,5vw,2.2rem);line-height:1;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .walletCard__balance{text-align:start}
.walletCard__unit{font-size:1rem;font-weight:600;color:rgba(255,255,255,.8);margin-inline-start:.35rem}
.walletCard__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:rgba(255,255,255,.85);font-size:.85rem}
.walletCard__brand{font-family:'Changa',var(--f-display);font-weight:800;letter-spacing:.02em;text-transform:uppercase;direction:ltr;opacity:.9}
.walletCard__currency{font-size:1rem;font-weight:600;color:rgba(255,255,255,.8);margin-inline-start:.35rem}
.walletCard__topup{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:var(--radius-pill);background:rgba(255,255,255,.18);color:#fff;font-weight:700;font-size:.85rem;transition:background var(--ease) .16s}
.walletCard__topup:hover{background:rgba(255,255,255,.28)}
.walletCard__topup svg{width:1rem;height:1rem}

/* charge form */
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:.9rem}
.field__label,.field__lbl{font-weight:700;color:var(--text-1);font-size:.9rem}
.field__hint{color:var(--text-4);font-size:.8rem}
.input,.select{
  width:100%;min-height:3rem;padding:0 1rem;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  color:var(--text-1);font-size:.95rem;
  transition:border-color var(--ease) .16s,background var(--ease) .16s,box-shadow var(--ease) .16s;
}
.input::placeholder{color:var(--text-4)}
.input:focus,.select:focus{border-color:var(--blue);background:var(--bg-1);box-shadow:0 0 0 3px var(--blue-soft)}
.input--amount{font-family:var(--f-mono);font-stretch:82%;font-size:1.15rem;direction:ltr;text-align:start}
.inputWrap{position:relative;display:flex;align-items:center}
.inputWrap__suffix{position:absolute;inset-inline-end:1rem;color:var(--text-4);font-size:.85rem;font-weight:600;pointer-events:none}
.inputWrap .input{padding-inline-end:3.5rem}

.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.9rem}
.preset{
  padding:.58rem .5rem;border-radius:var(--radius-sm);
  background:var(--bg-3);border:1px solid var(--line-2);
  color:var(--text-2);font-family:var(--f-mono);font-stretch:82%;font-size:.875rem;font-weight:600;
  text-align:center;direction:ltr;
  transition:all var(--ease) .16s;
}
.preset:hover{border-color:var(--blue-line);color:var(--blue-strong);background:var(--blue-soft)}
.preset.is-active{border-color:var(--blue);background:var(--blue-soft);color:var(--blue-strong);box-shadow:0 0 0 3px var(--blue-soft)}

/* radio / gateway cards */
.optionCard{
  display:flex;align-items:center;gap:.75rem;
  padding:.85rem 1rem;border-radius:var(--radius-sm);
  background:var(--bg-1);border:1px solid var(--line-2);cursor:pointer;
  transition:all var(--ease) .16s;
}
.optionCard:hover{border-color:var(--blue-line);background:var(--bg-tint)}
.optionCard.is-active{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 3px var(--blue-soft)}
.optionCard__radio{width:1.2rem;height:1.2rem;flex:none;border-radius:50%;border:2px solid var(--line-3);display:grid;place-items:center;transition:border-color var(--ease) .16s}
.optionCard.is-active .optionCard__radio{border-color:var(--blue)}
.optionCard.is-active .optionCard__radio::after{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--blue)}
.optionCard__label{font-weight:700;color:var(--text-1);font-size:.9rem}
.optionCard__ico{display:grid;place-items:center;width:1.6rem;height:1.6rem;color:var(--text-3)}
.optionCard.is-active .optionCard__ico{color:var(--blue)}
.optionCard__ico svg{width:1.35rem;height:1.35rem}
.optionRow{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1.2rem}

/* =============================================================================
   RANKS
   ========================================================================== */
.rankGrid{display:grid;grid-template-columns:1fr;gap:1.1rem}
.rankTile{
  position:relative;overflow:hidden;
  background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--radius);
  box-shadow:var(--shadow-1);padding:1.3rem;
  display:flex;flex-direction:column;gap:1rem;
  transition:box-shadow var(--ease) .2s,transform var(--ease) .2s,border-color var(--ease) .2s;
}
.rankTile:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:var(--blue-line)}
.rankTile::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--brand-grad)}
.rankTile__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.rankTile__name{font-family:var(--f-display);font-weight:800;font-size:1.25rem;color:var(--text-1);direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .rankTile__name{text-align:start}
.rankTile__sub{margin-top:.55rem;display:flex;gap:.4rem;flex-wrap:wrap}
.rankTile__time{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.85rem}
.rankTile__timeLbl{color:var(--text-3)}
.rankTile__timeVal{font-family:var(--f-mono);font-stretch:82%;font-weight:600;color:var(--text-1);direction:ltr;unicode-bidi:isolate}
.rankTile__autoRenew{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;margin-top:.15rem;border-top:1px solid var(--line-1)}
.rankTile__autoRenewLbl{color:var(--text-3);font-size:.8rem;line-height:1.5;max-width:18rem}
.rankTile__actions{display:flex;gap:.6rem}
.rankTile__actions .btn{flex:1}

/* toggle switch */
.switch{position:relative;display:inline-block;width:2.7rem;height:1.55rem;flex:none}
.switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch__slider{position:absolute;inset:0;border-radius:99px;background:var(--bg-4);transition:background var(--ease) .18s}
.switch__slider::before{content:"";position:absolute;top:.2rem;inset-inline-start:.2rem;width:1.15rem;height:1.15rem;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--ease) .18s}
.switch input:checked + .switch__slider{background:var(--blue)}
.switch input:checked + .switch__slider::before{transform:translateX(1.15rem)}
html[dir="rtl"] .switch input:checked + .switch__slider::before{transform:translateX(-1.15rem)}

/* =============================================================================
   CART
   ========================================================================== */
.cartItem{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;
  padding:.85rem 1rem;border-radius:var(--radius-sm);
  background:var(--bg-3);border:1px solid var(--line-1);
}
.cartItem__chip{flex:none}
.cartItem__info{flex:1;min-width:7rem}
.cartItem__name{font-weight:700;color:var(--text-1)}
.cartItem__meta{color:var(--text-3);font-size:.8rem}
.cartItem__qty{display:inline-flex;align-items:center;gap:.4rem;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--radius-pill);padding:.18rem}
.cartItem__qtyBtn{display:grid;place-items:center;width:1.85rem;height:1.85rem;border-radius:50%;color:var(--text-2);transition:background var(--ease) .16s}
.cartItem__qtyBtn:hover:not(:disabled){background:var(--bg-3);color:var(--text-1)}
.cartItem__qtyBtn:disabled{opacity:.4;cursor:not-allowed}
.cartItem__qtyBtn svg{width:.9rem;height:.9rem}
.cartItem__qtyVal{min-width:1.2rem;text-align:center;font-family:var(--f-mono);font-weight:600;font-size:.9rem}
.cartItem__price{font-family:var(--f-mono);font-stretch:82%;font-weight:600;color:var(--text-1);direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.cartItem__remove{display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--radius-sm);color:var(--text-4);transition:all var(--ease) .16s;flex:none}
.cartItem__remove:hover{background:var(--danger-bg);color:var(--danger)}
.cartItem__remove svg{width:1.05rem;height:1.05rem}

.summary__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.55rem 0;color:var(--text-2)}
.summary__val{font-family:var(--f-mono);font-stretch:82%;font-weight:600;color:var(--text-1);direction:ltr;unicode-bidi:isolate}
.summary__row--total{padding-top:1rem;margin-top:.5rem;border-top:1px solid var(--line-1);font-weight:700;color:var(--text-1)}
.summary__row--total .summary__val{font-size:1.3rem;color:var(--blue-strong)}
.grid--cart{grid-template-columns:1fr}

/* account: phone edit + OTP */
.phoneEdit{display:flex;gap:.6rem;align-items:center}
.phoneEdit .input{flex:1}
.otpRow{display:flex;gap:.5rem;justify-content:center;direction:ltr}
.otpInput{width:2.75rem;height:3rem;text-align:center;font-family:var(--f-mono);font-size:1.25rem;font-weight:700;background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--radius-sm);color:var(--text-1);transition:border-color var(--ease) .16s,box-shadow var(--ease) .16s,background var(--ease) .16s}
.otpInput:focus{border-color:var(--blue);background:var(--bg-1);box-shadow:0 0 0 3px var(--blue-soft)}

/* =============================================================================
   ACCOUNT / SETTINGS
   ========================================================================== */
.avatarUpload{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.avatarUpload__pic{
  width:5rem;height:5rem;flex:none;border-radius:50%;overflow:hidden;
  background:var(--bg-4);display:grid;place-items:center;color:var(--text-4);
  box-shadow:0 0 0 3px var(--bg-1),0 0 0 4px var(--line-2);
}
.avatarUpload__pic img{width:100%;height:100%;object-fit:cover}

.formRow{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-bottom:1.1rem}
.formRow:last-child{margin-bottom:0}
.formRow--2{grid-template-columns:1fr 1fr}
@media (max-width:32rem){.formRow--2{grid-template-columns:1fr}}
.checkRow{display:flex;align-items:center;gap:.6rem;color:var(--text-2);font-weight:600;font-size:.9rem;cursor:pointer}
.checkRow input{width:1.05rem;height:1.05rem;accent-color:var(--blue)}

/* verify-code display box (game link) */
.codeBox{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1rem 1.2rem;border-radius:var(--radius-sm);
  background:var(--bg-3);border:1px dashed var(--line-3);
}
.codeBox__code{font-family:var(--f-mono);font-stretch:85%;font-size:1.25rem;font-weight:700;letter-spacing:.12em;color:var(--blue-strong);direction:ltr}
.codeBox__cmd{font-family:var(--f-mono);font-stretch:85%;color:var(--text-2);direction:ltr;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:.5rem .8rem;font-size:.85rem}

/* password strength ticks (reused id contract from old markup if present) */
.reqList{display:flex;flex-direction:column;gap:.35rem;margin-top:.6rem}
.reqItem{display:flex;align-items:center;gap:.5rem;color:var(--text-4);font-size:.82rem}
.reqItem.is-ok{color:var(--success)}
.reqItem__dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor}

/* =============================================================================
   SHARED FORM CONTROLS (textarea / select) + ADMIN PANEL
   ========================================================================== */
.textarea{
  width:100%;min-height:8rem;padding:.85rem 1rem;resize:vertical;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  color:var(--text-1);font-family:inherit;font-size:.95rem;line-height:1.7;
  transition:border-color var(--ease) .16s,background var(--ease) .16s,box-shadow var(--ease) .16s;
}
.textarea:focus{outline:none;border-color:var(--blue);background:var(--bg-1);box-shadow:0 0 0 3px var(--blue-soft)}
.select{
  width:100%;min-height:3rem;padding:0 1rem;background:var(--bg-3);
  border:1px solid var(--line-2);border-radius:var(--radius-sm);color:var(--text-1);font-size:.95rem;
}
.select:focus{outline:none;border-color:var(--blue);background:var(--bg-1);box-shadow:0 0 0 3px var(--blue-soft)}

.adminTabs{
  display:flex;gap:.3rem;flex-wrap:wrap;width:fit-content;max-width:100%;
  padding:.3rem;margin-bottom:1.15rem;
  background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--radius-sm);box-shadow:var(--shadow-1);
}
.adminTab{
  display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:9px;
  font-weight:700;font-size:.9rem;color:var(--text-3);white-space:nowrap;
  transition:background var(--ease) .16s,color var(--ease) .16s;
}
.adminTab svg{width:1.1rem;height:1.1rem}
.adminTab[hidden]{display:none!important}
.adminTab:hover{color:var(--text-1);background:var(--bg-3)}
.adminTab.is-active{background:var(--blue-soft);color:var(--blue-strong);box-shadow:inset 0 0 0 1px var(--blue-line)}

.card__sub{color:var(--text-3);font-size:.85rem;margin-top:.2rem}

/* admin ticket row */
.ticket{display:flex;align-items:center;gap:.9rem;padding:1rem 1.4rem;border-bottom:1px solid var(--line-1)}
.ticket:last-child{border-bottom:0}
.ticket__avatar{width:2.5rem;height:2.5rem;flex:none;border-radius:50%;overflow:hidden;background:var(--bg-4);display:grid;place-items:center;color:var(--text-4)}
.ticket__avatar img{width:100%;height:100%;object-fit:cover}
.ticket__info{flex:1;min-width:0}
.ticket__title{font-weight:700;color:var(--text-1);font-size:.9375rem}
.ticket__sub{color:var(--text-3);font-size:.82rem}

/* server status pill (topbar) */
.serverPill{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .75rem;border-radius:999px;background:var(--bg-1);border:1px solid var(--line-2);font-size:.78rem;font-weight:600;color:var(--text-2)}
.serverPill__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--text-4);flex:none}
.serverPill--online .serverPill__dot{background:var(--success)}
.serverPill--offline .serverPill__dot{background:var(--danger)}
.serverPill--loading .serverPill__dot{background:var(--warn)}
.serverPill__val{font-family:var(--f-mono);font-stretch:85%;direction:ltr;color:var(--text-1)}

/* =============================================================================
   TICKET DETAIL — conversation + side panel
   ========================================================================== */
.page__head{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.ticketLayout{display:grid;grid-template-columns:1fr;gap:1.15rem}
@media (min-width:64em){.ticketLayout{grid-template-columns:1.6fr .9fr;align-items:start}}
.ticketMain{display:flex;flex-direction:column;gap:1rem;min-width:0}

.closedBanner{
  padding:.85rem 1.1rem;border-radius:var(--radius-sm);
  background:var(--warn-bg);border:1px solid rgba(240,160,32,.3);color:var(--warn-text);
  font-size:.9rem;line-height:1.7;
}

/* message cards */
.msgCard{background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden}
.msgCard--admin{border-color:var(--blue-line);background:var(--bg-tint)}
.msgCard__head{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.8rem 1.1rem;border-bottom:1px solid var(--line-1)}
.msgCard__author{font-weight:700;color:var(--text-1);font-size:.9rem}
.msgCard__roleTag{padding:.15rem .5rem;border-radius:999px;font-size:.68rem;font-weight:700;background:var(--bg-4);color:var(--text-3)}
.msgCard--admin .msgCard__roleTag{background:var(--blue-soft);color:var(--blue-strong)}
.msgCard__time{margin-inline-start:auto;font-family:var(--f-mono);font-size:.68rem;font-stretch:85%;color:var(--text-4);direction:ltr}
.msgCard__body{padding:1.1rem;color:var(--text-2);line-height:1.85;white-space:pre-wrap;word-break:break-word}
.msgCard__img{max-width:100%;border-radius:var(--radius-sm);margin-top:.75rem;border:1px solid var(--line-2)}
.msgCard__file{display:inline-flex;align-items:center;gap:.5rem;margin-top:.75rem;padding:.5rem .8rem;border-radius:var(--radius-sm);background:var(--bg-3);border:1px solid var(--line-2);color:var(--text-2);font-size:.85rem;font-weight:600;max-width:100%}
.msgCard__file:hover{border-color:var(--blue-line);color:var(--blue-strong);background:var(--blue-soft)}
.msgCard__file svg{width:1.05rem;height:1.05rem;flex:none}
.msgCard__file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* reply panel */
.replyPanel{background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden}
.replyPanel__toggle{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:.95rem 1.1rem;font-weight:700;color:var(--text-1);font-size:.9375rem;cursor:default}
.replyPanel__toggle svg{width:1.1rem;height:1.1rem;transition:transform var(--ease) .2s}
.replyPanel.is-open .replyPanel__toggle svg:last-child{transform:rotate(180deg)}
.replyPanel__body{display:block;padding:1rem 1.1rem 1.1rem;border-top:1px solid var(--line-1)}
.replyPanel.is-open .replyPanel__body{display:block}
.replyPanel__field{margin-top:1rem}
.replyPanel__lbl{display:block;font-weight:700;color:var(--text-1);font-size:.875rem;margin-bottom:.45rem}
.replyPanel__textarea{
  width:100%;min-height:8rem;padding:.85rem 1rem;resize:vertical;
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  color:var(--text-1);font-family:inherit;font-size:.95rem;line-height:1.7;
}
.replyPanel__textarea:focus{outline:none;border-color:var(--blue);background:var(--bg-1);box-shadow:0 0 0 3px var(--blue-soft)}
.replyPanel__file{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.replyPanel__filebtn{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  padding:.5rem .9rem;border-radius:var(--radius-sm);
  background:var(--bg-3);border:1px solid var(--line-2);color:var(--text-2);
  font-size:.85rem;font-weight:600;transition:border-color var(--ease) .16s,color var(--ease) .16s,background var(--ease) .16s;
}
.replyPanel__filebtn:hover{border-color:var(--blue-line);color:var(--blue-strong);background:var(--blue-soft)}
.replyPanel__filename{color:var(--text-4);font-size:.82rem}
.replyPanel__hint{color:var(--text-4);font-size:.78rem;margin-top:.45rem}
.replyPanel__actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.1rem;flex-wrap:wrap}

/* side panel */
.ticketSide{background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--radius);box-shadow:var(--shadow-1);overflow:hidden}
.ticketSide__head{
  display:flex;align-items:center;gap:.6rem;padding:1rem 1.2rem;border-bottom:1px solid var(--line-1);
  font-family:var(--f-display);font-weight:700;color:var(--text-1);font-size:1rem;
}
.ticketSide__head::before{content:"";width:4px;height:1.1em;border-radius:2px;background:var(--brand-grad)}
.ticketSide__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.2rem;border-bottom:1px solid var(--line-1)}
.ticketSide__row:last-child{border-bottom:0}
.ticketSide__rowLbl{color:var(--text-3);font-size:.85rem}
.ticketSide__rowVal{color:var(--text-1);font-weight:600;font-size:.875rem;text-align:end}
.ticketSide__rowVal--num{font-family:var(--f-mono);font-stretch:85%;direction:ltr;unicode-bidi:isolate}

/* ticket status badges */
.statusBadge{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .55rem;border-radius:999px;font-size:.72rem;font-weight:700;background:var(--bg-4);color:var(--text-3)}
.statusBadge--open{background:var(--blue-soft);color:var(--blue-strong)}
.statusBadge--admin{background:var(--success-bg);color:var(--success)}
.statusBadge--user,.statusBadge--review{background:var(--warn-bg);color:var(--warn)}
.statusBadge--resolved{background:var(--success-bg);color:var(--success)}
.statusBadge--closed{background:var(--bg-4);color:var(--text-4)}

.topbar__title{font-family:var(--f-display);font-weight:700;font-size:1.2rem;color:var(--text-1)}
.userBtn__chev{width:.8rem;height:.8rem;color:var(--text-4)}
.defaultAvatar svg{width:100%;height:100%}

/* =============================================================================
   STANDALONE PAGES — checkout + payment result (no sidebar / no dock)
   ========================================================================== */
.checkoutPage{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-0)}
.checkoutPage__top{
  display:flex;align-items:center;gap:.75rem;
  height:4.25rem;padding-inline:clamp(1rem,3vw,2rem);
  background:var(--bg-1);border-bottom:1px solid var(--line-1);
}
.checkoutPage__brand{
  display:inline-flex;align-items:center;gap:.6rem;color:var(--text-1);
  font-family:'Changa',var(--f-display);font-weight:800;font-size:1.05rem;
  letter-spacing:-.02em;text-transform:uppercase;direction:ltr;
}
.checkoutPage__brand img{width:2rem;height:2rem;object-fit:contain}
.checkoutPage__main{flex:1;padding:clamp(1.25rem,3vw,2.25rem)}
.checkoutPage__inner{width:100%;max-width:64rem;margin-inline:auto}
.checkoutPage__grid{display:grid;grid-template-columns:1fr;gap:1.15rem}
@media (min-width:64em){.checkoutPage__grid{grid-template-columns:1.5fr .9fr;align-items:start}}

.page__title{font-family:var(--f-display);font-weight:800;font-size:clamp(1.35rem,3vw,1.75rem);color:var(--text-1);line-height:1.25}
.page__sub{color:var(--text-3);font-size:.95rem;margin-top:.4rem;line-height:1.7}

/* payment-method options */
.payMethod{display:flex;flex-direction:column;gap:.6rem}
.payOpt{
  display:flex;align-items:center;gap:.85rem;
  padding:.9rem 1rem;border-radius:var(--radius-sm);
  background:var(--bg-1);border:1px solid var(--line-2);cursor:pointer;
  transition:border-color var(--ease) .16s,background var(--ease) .16s,box-shadow var(--ease) .16s;
}
.payOpt:hover{border-color:var(--blue-line);background:var(--bg-tint)}
.payOpt.is-selected{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 3px var(--blue-soft)}
.payOpt__logo{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;flex:none;
  border-radius:var(--radius-sm);background:var(--bg-3);color:var(--text-2);overflow:hidden;
}
.payOpt__logo img{width:80%;height:80%;object-fit:contain}
.payOpt__logo svg{width:1.5rem;height:1.5rem}
.payOpt__name{font-weight:700;color:var(--text-1)}
.payOpt__sub{color:var(--text-3);font-size:.82rem}

/* payment result badge */
.payResultIcon{
  display:grid;place-items:center;width:5rem;height:5rem;margin:0 auto 1.25rem;
  border-radius:50%;background:var(--bg-3);color:var(--text-3);
}
.payResultIcon svg{width:2.5rem;height:2.5rem}
.payResultIcon--ok{background:var(--success-bg);color:var(--success)}
.payResultIcon--fail{background:var(--danger-bg);color:var(--danger)}
.payResultIcon--pending{background:var(--warn-bg);color:var(--warn)}

/* =============================================================================
   MOBILE DOCK + admin banner + lang loader
   ========================================================================== */
.bottomnav{
  position:fixed;inset-inline:0;bottom:0;z-index:45;
  display:none;grid-auto-flow:column;grid-auto-columns:1fr;
  background:color-mix(in srgb,var(--bg-1) 94%,transparent);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border-top:1px solid var(--line-1);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -8px 30px -18px rgba(22,27,40,.4);
}
.bottomnav__item{
  position:relative;display:grid;justify-items:center;align-content:center;gap:.22rem;
  padding:.6rem .25rem .55rem;color:var(--text-4);
  transition:color var(--ease) .18s;
}
.bottomnav__item svg{width:1.4rem;height:1.4rem}
.bottomnav__lbl{font-size:.625rem;font-weight:600;white-space:nowrap}
.bottomnav__item.is-active{color:var(--blue)}
.bottomnav__item.is-active::before{
  content:"";position:absolute;top:0;inset-inline:28%;height:3px;background:var(--brand-grad);border-radius:99px;
}
.bottomnav__badge{
  position:absolute;top:.4rem;inset-inline-end:20%;
  min-width:1.05rem;height:1.05rem;padding:0 .25rem;
  display:grid;place-items:center;background:var(--danger);color:#fff;
  font-family:var(--f-mono);font-size:.5625rem;font-weight:700;border-radius:999px;
}

.adminBanner{
  display:flex;align-items:center;gap:.75rem;
  padding:.6rem 1rem;background:var(--warn-bg);color:var(--warn-text);
  border-bottom:1px solid var(--line-1);overflow:hidden;
}

.langLoading{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  background:var(--veil);backdrop-filter:blur(4px);
}

/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (min-width:48em){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .grid--stats-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rankGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .formRow--2{grid-template-columns:1fr 1fr}
}
@media (min-width:64em){
  .grid--wallet{grid-template-columns:1.05fr .95fr}
  .grid--cart{grid-template-columns:1.7fr .9fr}
}
@media (max-width:63.99em){
  .app{grid-template-columns:1fr}
  /* The sidebar becomes an off-canvas DRAWER opened by the hamburger. Physical
     left/right (not inset-inline) so the parked position is unambiguous under
     RTL. The dock stays for quick access; the drawer holds the full nav. */
  /* Show/hide with display (bulletproof — no persistent transform to fight the
     cascade) and slide it in with a one-shot entry animation. */
  .sidebar{
    position:fixed;top:0;bottom:0;left:0;right:auto;
    width:min(20rem,86vw);z-index:60;
    box-shadow:var(--shadow-pop);
    display:none;
  }
  html[dir="rtl"] .sidebar{left:auto;right:0}
  /* display toggle (no transform/animation on the panel itself — that fought
     the cascade and an entry animation from display:none got stuck). The
     backdrop fades and the hamburger morphs, which is the visible motion. */
  .sidebar.is-open{display:flex}
  .sideBackdrop{z-index:55}
  .sidebar__foot{display:flex}
  .topbar__hamb{display:grid}
  .bottomnav{display:grid}
  .page{padding-bottom:5.5rem}
  .userBtn__name{display:none}
}
body.drawer-open{overflow:hidden}
/* 3-stat home grid: below the 3-up breakpoint it's 2 columns, so let the
   lone third card span the full width instead of sitting half-empty. */
@media (max-width:47.99em){
  .grid--stats-3 .stat:nth-child(3){grid-column:1 / -1}
}
@media (max-width:30em){
  .grid--stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .presets{grid-template-columns:repeat(2,1fr)}
  .welcome{gap:1rem}
  .welcome__actions{width:100%}
  .welcome__actions .btn{flex:1}
}


/* =============================================================================
   TICKET COMPOSER  (shared by tickets.html, ticket.html and admin.html)
   Rich reply editor: canned replies, markdown toolbar, preview, attachments.
   ========================================================================== */
.canned{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.7rem}
.cannedBtn{padding:.4rem .75rem;border-radius:999px;background:var(--bg-3);border:1px solid var(--line-2);color:var(--text-2);font-size:.78rem;font-weight:600;transition:.16s var(--ease)}
.cannedBtn:hover{border-color:var(--blue-line);color:var(--blue-strong);background:var(--blue-soft)}

.cmp{border:1px solid var(--line-2);border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-3)}
.cmp:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.cmp.is-note{border-color:var(--warn)}
.cmp.is-note .cmp__bar,.cmp.is-note .cmp__foot{background:var(--warn-bg)}
.cmp__bar{display:flex;align-items:center;gap:.2rem;flex-wrap:wrap;padding:.4rem .5rem;border-bottom:1px solid var(--line-1);background:var(--bg-2)}
.cmp__btn{display:grid;place-items:center;width:2rem;height:2rem;border-radius:7px;color:var(--text-3);font-weight:800;font-size:.9rem}
.cmp__btn:hover{background:var(--bg-3);color:var(--text-1)}
.cmp__btn svg{width:1.05rem;height:1.05rem}
.cmp__sp{flex:1}
.cmp__toggle{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border-radius:7px;color:var(--text-3);font-size:.78rem;font-weight:700}
.cmp__toggle.is-on{background:var(--blue-soft);color:var(--blue-strong)}
.cmp__toggle svg{width:.95rem;height:.95rem}
.cmp textarea{width:100%;min-height:9rem;padding:.85rem 1rem;background:transparent;border:0;color:var(--text-1);font-family:inherit;font-size:.95rem;line-height:1.8;resize:vertical}
.cmp textarea:focus{outline:none}
.cmp__prev{min-height:9rem;padding:.85rem 1rem;color:var(--text-2);line-height:1.85;display:none}
.cmp__prev:empty::before{content:attr(data-empty);color:var(--text-4)}
.cmp__prev strong{color:var(--text-1)}
.cmp__prev code{font-family:var(--f-mono);font-size:.85em;background:var(--bg-4);padding:.1rem .35rem;border-radius:5px;direction:ltr;unicode-bidi:isolate}
.cmp__foot{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;padding:.7rem .8rem;border-top:1px solid var(--line-1);background:var(--bg-2)}
.cmp__hint{font-family:var(--f-mono);font-size:.65rem;font-stretch:85%;color:var(--text-4);direction:ltr}

/* file picker — the native input is hidden, the label is the visible control */
.drop{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:1.1rem;border:1.5px dashed var(--line-3);border-radius:var(--radius-sm);color:var(--text-3);font-weight:600;font-size:.88rem;cursor:pointer;transition:.16s var(--ease)}
.drop:hover{border-color:var(--blue-line);color:var(--blue-strong);background:var(--blue-soft)}
.drop svg{width:1.25rem;height:1.25rem;flex:none}
.drop input[type="file"]{display:none}
.drop--inline{padding:.5rem .8rem;font-size:.8rem;border-width:1px}

.attRow{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.7rem}
.attRow:empty{display:none}
.att{display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;background:var(--bg-3);border:1px solid var(--line-2);border-radius:10px;font-size:.8rem;color:var(--text-2);max-width:16rem}
.att>span:not(.att__ico){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.att img{width:2rem;height:2rem;border-radius:6px;object-fit:cover;flex:none}
.att__ico{display:grid;place-items:center;width:2rem;height:2rem;border-radius:6px;background:var(--bg-4);color:var(--text-3);flex:none}
.att__ico svg{width:1.1rem;height:1.1rem}
.att__x{background:transparent;border:0;color:var(--text-4);width:1.4rem;height:1.4rem;border-radius:6px;flex:none;font-size:1rem;line-height:1}
.att__x:hover{background:var(--danger-bg);color:var(--danger)}

/* send row: status select + button sit on one line, stack on narrow screens */
.cmpSend{display:flex;align-items:flex-end;gap:.8rem;margin-top:1rem;flex-wrap:wrap}
.cmpSend .field{flex:1;min-width:12rem;margin-bottom:0}
.cmpSend .btn{flex:none;min-height:3rem}
@media (max-width:35.99em){
  .cmpSend{flex-direction:column;align-items:stretch}
  .cmpSend .btn{width:100%}
}

/* ticket detail: meta strip + one-click status actions */
.tkMeta{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;padding:.85rem 1.4rem;border-bottom:1px solid var(--line-1);background:var(--bg-2)}
.tkMeta__i{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.tkMeta__k{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-4)}
.tkMeta__v{font-size:.85rem;font-weight:600;color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tkMeta__acts{display:flex;gap:.35rem;flex-wrap:wrap;margin-inline-start:auto}

/* internal note — staff-only, never delivered to the customer */
.msgCard--note{border-color:var(--warn);background:var(--warn-bg)}
.msgCard--note .msgCard__author{color:var(--warn)}

/* ticket list badges (admin) */
.tkPick__t{display:flex;align-items:center;gap:.5rem}
.tkNew{margin-inline-start:auto;flex:none;font-size:.6rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:.1rem .4rem;border-radius:999px;background:var(--blue);color:#fff}
.tkUnread{margin-inline-start:auto;flex:none;min-width:1.15rem;height:1.15rem;padding:0 .3rem;display:inline-grid;place-items:center;border-radius:999px;background:var(--danger,#e5484d);color:#fff;font-size:.65rem;font-weight:800;font-family:var(--f-mono)}
.cmpSend--end{justify-content:flex-end}

/* rank expiry reminder (My Ranks) */
.rankTile--expiring{border-color:var(--warn)}
.rankTile__warn{display:flex;align-items:center;gap:.5rem;margin:.4rem 0 .2rem;padding:.55rem .75rem;border-radius:var(--radius-sm);background:var(--warn-bg);color:var(--warn);font-size:.82rem;font-weight:700}
.rankTile__warn svg{width:1.1rem;height:1.1rem;flex:none}
.rankTile__actions{display:flex;gap:.6rem;flex-wrap:wrap}
.rankTile__actions .btn{flex:1;justify-content:center;min-width:9rem}

/* gift code result */
.giftCodeBox{padding:.85rem 1rem;border-radius:var(--radius-sm);background:var(--blue-soft);border:1px solid var(--blue-line)}
.giftCodeBox__lbl{display:block;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue-strong);margin-bottom:.4rem}
.giftCodeBox__row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.giftCodeBox__val{flex:1;font-family:var(--f-mono);font-weight:800;font-size:1.05rem;letter-spacing:.06em;color:var(--text-1);direction:ltr;min-width:8rem}

/* ===== 360° user detail overlay ===== */
.u360{position:fixed;inset:0;z-index:130;display:flex;justify-content:flex-end;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .2s var(--ease),visibility .2s var(--ease)}
.u360.is-open{opacity:1;visibility:visible}
.u360__panel{width:min(56rem,100%);height:100%;background:var(--bg-1);border-inline-start:1px solid var(--line-2);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;transform:translateX(-6%);transition:transform .22s var(--ease)}
html[dir="rtl"] .u360__panel{transform:translateX(6%)}
.u360.is-open .u360__panel{transform:none}
.u360__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.4rem;border-bottom:1px solid var(--line-1);position:sticky;top:0;background:var(--bg-1);z-index:1}
.u360__title{font-family:var(--f-display);font-weight:800;color:var(--text-1);font-size:1.15rem}
.u360__body{padding:1.3rem 1.4rem 3rem;overflow-y:auto;flex:1}
.u360Prof{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.15rem}
.u360Prof__name{font-weight:800;color:var(--text-1);font-size:1.05rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.u360Prof__meta{color:var(--text-3);font-size:.85rem;margin-top:.3rem}
.u360Prof__ban{margin-top:.4rem;font-size:.8rem;color:var(--danger);background:var(--danger-bg);padding:.3rem .6rem;border-radius:var(--radius-sm);display:inline-block}
.u360Tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.7rem;margin-bottom:1.3rem}
.u360Tile{background:var(--bg-2);border:1px solid var(--line-1);border-radius:var(--radius-sm);padding:.8rem .9rem}
.u360Tile__k{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-4)}
.u360Tile__v{font-size:1.15rem;font-weight:800;color:var(--text-1);margin-top:.25rem;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .u360Tile__v{text-align:right}
.u360Sec{font-family:var(--f-display);font-weight:700;color:var(--text-1);font-size:.95rem;margin:1.5rem 0 .7rem;padding-inline-start:.6rem;border-inline-start:3px solid var(--blue)}
.u360__body .table__wrap{border:1px solid var(--line-1);border-radius:var(--radius-sm)}

/* ===== Revenue analytics (admin overview) ===== */
.revChart{width:100%;min-height:180px}
.revChart svg{display:block;width:100%}
.revChart__err{color:var(--danger);font-size:.85rem;padding:1.5rem 0}
.revTiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem;margin-top:1.1rem}
.revTile{background:var(--bg-2);border:1px solid var(--line-1);border-radius:var(--radius-sm);padding:.85rem 1rem}
.revTile__lbl{font-size:.75rem;font-weight:700;color:var(--text-4);text-transform:uppercase;letter-spacing:.03em}
.revTile__val{font-size:1.3rem;font-weight:800;color:var(--text-1);margin-top:.35rem;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .revTile__val{text-align:right}
.revTile__delta{font-size:.8rem;font-weight:700;margin-top:.3rem}
.revTile__delta.up{color:var(--success)}
.revTile__delta.down{color:var(--danger)}
.revTile__delta.flat{color:var(--text-3)}
.bestRow{display:flex;align-items:center;gap:.7rem;padding:.7rem 1.15rem;border-bottom:1px solid var(--line-1);font-size:.88rem}
.bestRow:last-child{border-bottom:0}
.bestRow__dot{width:.65rem;height:.65rem;border-radius:50%;flex:0 0 auto}
.bestRow__name{flex:1;color:var(--text-1);font-weight:700}
.bestRow__num{color:var(--text-2);font-weight:700;direction:ltr;unicode-bidi:isolate}
.bestRow__rank{width:1.4rem;color:var(--text-4);font-weight:800;font-size:.8rem;text-align:center}

/* ===== Advanced discount modal ===== */
.dcRanks{display:flex;flex-wrap:wrap;gap:.5rem;margin:-.4rem 0 1rem;padding:.7rem;background:var(--bg-2);border:1px solid var(--line-1);border-radius:var(--radius-sm)}
.dcRankChk{display:inline-flex;align-items:center;gap:.35rem;font-size:.83rem;color:var(--text-2);cursor:pointer;padding:.3rem .55rem;border-radius:999px;background:var(--bg-3);border:1px solid var(--line-2)}
.dcRankChk input{accent-color:var(--blue)}

/* ===== Kit CMS (admin store tab) ===== */
.kitCms{display:grid;grid-template-columns:19rem 1fr;gap:1.15rem;align-items:start}
@media(max-width:60rem){.kitCms{grid-template-columns:1fr}}
.kitCms__list .card__body{max-height:34rem;overflow-y:auto}
.rkItem{display:flex;align-items:center;gap:.6rem;width:100%;text-align:start;padding:.75rem 1.15rem;border:0;border-bottom:1px solid var(--line-1);background:transparent;cursor:pointer;transition:.14s var(--ease)}
.rkItem:hover{background:var(--bg-2)}
.rkItem.is-sel{background:var(--blue-soft)}
.rkItem__dot{width:.7rem;height:.7rem;border-radius:50%;flex:0 0 auto}
.rkItem__b{flex:1;min-width:0}
.rkItem__n{display:flex;align-items:center;gap:.4rem;color:var(--text-1);font-weight:700;font-size:.9rem}
.rkItem__m{color:var(--text-4);font-size:.75rem;margin-top:.15rem;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .rkItem__m{text-align:right}
.rkEd__head{display:flex;align-items:center;gap:.7rem;margin-bottom:1.1rem;flex-wrap:wrap}
.rkEd__name{flex:1;min-width:12rem;font-weight:800;font-size:1.05rem}
.rkEd__actions{display:flex;gap:.5rem}
.rkEd__color{padding:.2rem;height:2.6rem;cursor:pointer}
.chipEdit{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.5rem;background:var(--bg-2);border:1px solid var(--line-1);border-radius:var(--radius-sm);min-height:2.6rem}
.chipEdit__i{display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:700;color:var(--text-2);background:var(--bg-3);border:1px solid var(--line-2);border-radius:999px;padding:.25rem .6rem}
.chipEdit__i button{border:0;background:transparent;color:var(--text-4);cursor:pointer;font-size:1rem;line-height:1;padding:0}
.chipEdit__i button:hover{color:var(--danger)}
.chipEdit__in{flex:1;min-width:6rem;border:0;background:transparent;color:var(--text-1);font-size:.83rem;outline:none;padding:.25rem}
/* kit builder */
.kitList{display:flex;flex-direction:column;gap:.8rem}
.kitCard{background:var(--bg-2);border:1px solid var(--line-1);border-radius:var(--radius-md);padding:.85rem}
.kitCard__h{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.kitCard__name{flex:1;font-weight:700}
.kitCard__count{font-size:.72rem;color:var(--text-4);font-weight:700}
.itemGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.2rem,1fr));gap:.55rem}
.itemTile{position:relative;background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--radius-sm);padding:.4rem .35rem;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.itemTile__x{position:absolute;top:.15rem;inset-inline-end:.15rem;width:1.15rem;height:1.15rem;border-radius:50%;border:0;background:var(--danger-bg);color:var(--danger);font-size:.85rem;line-height:1;cursor:pointer;opacity:0;transition:.14s}
.itemTile:hover .itemTile__x{opacity:1}
.itemTile__img{width:2.4rem;height:2.4rem;object-fit:contain;image-rendering:auto}
.itemTile__img.is-broken{background:var(--bg-3) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e6676' stroke-width='1.6'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M8 15l3-3 5 5'/></svg>") center/1.4rem no-repeat;border-radius:var(--radius-xs)}
.itemTile__n{font-size:.68rem;color:var(--text-2);text-align:center;line-height:1.15;max-height:2.3em;overflow:hidden}
.itemTile__ctrl{display:flex;gap:.2rem;width:100%}
.itemTile__amt{width:2.6rem;flex:1;min-width:0;padding:.15rem .3rem;font-size:.72rem;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text-1);border-radius:var(--radius-xs);text-align:center}
.itemTile__cont{flex:1;min-width:0;padding:.15rem;font-size:.68rem;border:1px solid var(--line-2);background:var(--bg-2);color:var(--text-2);border-radius:var(--radius-xs)}
.itemAdd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;min-height:5.5rem;border:1px dashed var(--line-2);border-radius:var(--radius-sm);background:transparent;color:var(--text-3);cursor:pointer;font-size:.72rem;font-weight:700;transition:.14s}
.itemAdd:hover{border-color:var(--blue);color:var(--blue)}
.itemAdd span:first-child{font-size:1.3rem;line-height:1}
/* backups */
.bkRow{display:flex;align-items:center;gap:.7rem;padding:.8rem 1.15rem;border-bottom:1px solid var(--line-1)}
.bkRow:last-child{border-bottom:0}
.bkRow__b{flex:1;min-width:0}
.bkRow__n{display:flex;align-items:center;gap:.5rem;color:var(--text-1);font-weight:700;font-size:.9rem}
.bkRow__m{color:var(--text-4);font-size:.75rem;margin-top:.15rem}
/* item picker overlay */
.ipOv{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:1.5rem;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:.2s var(--ease)}
.ipOv.is-open{opacity:1;visibility:visible}
.ipOv__panel{width:min(52rem,100%);max-height:86vh;display:flex;flex-direction:column;background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);overflow:hidden}
.ipOv__head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.3rem;border-bottom:1px solid var(--line-1)}
.ipOv__title{font-family:var(--f-display);font-weight:800;color:var(--text-1)}
.ipOv__search{padding:.9rem 1.3rem;border-bottom:1px solid var(--line-1)}
.ipOv__body{padding:1rem 1.3rem 2rem;overflow-y:auto}
.ipCat{margin-bottom:1.2rem}
.ipCat__h{font-size:.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-4);margin-bottom:.5rem}
.ipCat__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(5rem,1fr));gap:.5rem}
.ipTile{display:flex;flex-direction:column;align-items:center;gap:.3rem;padding:.5rem .3rem;background:var(--bg-2);border:1px solid var(--line-1);border-radius:var(--radius-sm);cursor:pointer;transition:.14s}
.ipTile:hover{border-color:var(--blue);background:var(--bg-3)}
.ipTile__img{width:2.6rem;height:2.6rem;object-fit:contain}
.ipTile__img.is-broken{background:var(--bg-3) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e6676' stroke-width='1.6'><rect x='4' y='4' width='16' height='16' rx='2'/><path d='M8 15l3-3 5 5'/></svg>") center/1.5rem no-repeat;border-radius:var(--radius-xs)}
.ipTile__n{font-size:.68rem;color:var(--text-2);text-align:center;line-height:1.15}
.ipTile--custom{border-style:dashed;justify-content:center;min-height:4rem;color:var(--blue)}

/* ===== Gift redeem gate (Steam-link required) ===== */
.giftGate{position:relative}
.giftGate__inner{transition:filter .2s var(--ease)}
.giftGate.is-locked .giftGate__inner{filter:blur(5px) saturate(.7);pointer-events:none;user-select:none}
.giftGate__lock{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.85rem;text-align:center;padding:1.5rem;color:var(--text-3)}
.giftGate__lock p{color:var(--text-2);font-size:.9rem;max-width:22rem;line-height:1.75;margin:0}

/* ===== Analytics (admin) ===== */
.anLive{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.9rem}
.anLive__tile{display:flex;align-items:center;gap:.85rem;background:var(--bg-1);border:1px solid var(--line-1);border-radius:var(--radius);box-shadow:var(--shadow-1);padding:1rem 1.2rem}
.anLive__tile--muted{opacity:.92}
.anLive__dot{width:.75rem;height:.75rem;border-radius:50%;background:var(--success);flex:0 0 auto;animation:anPulse 1.6s ease-in-out infinite}
.anLive__dot--blue{background:var(--blue)}
@keyframes anPulse{0%,100%{box-shadow:0 0 0 0 rgba(46,204,113,.45)}50%{box-shadow:0 0 0 .45rem rgba(46,204,113,0)}}
.anLive__lbl{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-4)}
.anLive__val{font-size:1.6rem;font-weight:800;color:var(--text-1);margin-top:.15rem;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .anLive__val{text-align:right}
.anLive__val--sm{font-size:1.15rem}
.anViewer__ua{color:var(--text-4);font-size:.78rem}

/* ===== Admin management ===== */
.admItem{display:flex;align-items:center;gap:.6rem;width:100%;text-align:start;padding:.8rem 1.15rem;border:0;border-bottom:1px solid var(--line-1);background:transparent;cursor:pointer;transition:.14s var(--ease)}
.admItem:hover{background:var(--bg-2)}
.admItem.is-sel{background:var(--blue-soft)}
.admItem__av{width:2.1rem;height:2.1rem;border-radius:50%;background:var(--bg-3);display:grid;place-items:center;color:var(--text-3);flex:0 0 auto;font-weight:800}
.admItem__b{flex:1;min-width:0}
.admItem__n{color:var(--text-1);font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:.4rem}
.admItem__m{color:var(--text-4);font-size:.75rem;margin-top:.1rem;direction:ltr;unicode-bidi:isolate}
html[dir="rtl"] .admItem__m{text-align:right}
.admEd__head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:.4rem;flex-wrap:wrap}
.admEd__title{font-weight:800;color:var(--text-1);font-size:1.05rem}
.admEd__sub{color:var(--text-4);font-size:.82rem;margin-bottom:1rem;direction:ltr}
html[dir="rtl"] .admEd__sub{text-align:start}
.permGroup{border:1px solid var(--line-1);border-radius:var(--radius-sm);margin-bottom:.7rem;overflow:hidden}
.permGroup__head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .85rem;background:var(--bg-2);cursor:pointer}
.permGroup__name{font-weight:700;color:var(--text-1);font-size:.88rem}
.permGroup__all{font-size:.72rem;color:var(--blue-strong);font-weight:700}
.permGroup__body{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.4rem;padding:.7rem .85rem}
.permChk{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:var(--text-2);cursor:pointer;padding:.25rem 0}
.permChk input{accent-color:var(--blue);width:1rem;height:1rem;flex:0 0 auto}
.permChk.is-locked{opacity:.55;cursor:not-allowed}
.admEd__ownerNote{display:flex;align-items:center;gap:.6rem;padding:1rem 1.15rem;background:var(--success-bg);border:1px solid rgba(46,204,113,.3);border-radius:var(--radius-sm);color:var(--text-1);font-size:.9rem}
.admCopy{display:flex;align-items:center;gap:.5rem;margin:.2rem 0 1rem}
.admCopy select{flex:1}

/* ===== Bugfix pass: modal scroll, gift lock overlay, forced password, revenue eye ===== */
.amodal__panel{max-height:92vh;display:flex;flex-direction:column}
.amodal__body{overflow-y:auto;flex:1;min-height:0}

.giftGate{position:relative}
.giftGate__lock{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;text-align:center;padding:1.5rem}
.giftGate__lock[hidden]{display:none!important}
.giftGate__lock svg{color:var(--text-3)}
.giftGate__lock p{color:var(--text-1);font-weight:700;font-size:.95rem;max-width:22rem;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.giftGate.is-locked .giftGate__inner{filter:blur(6px) saturate(.6);pointer-events:none;user-select:none;opacity:.55}

.fpw{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.25rem;background:rgba(4,6,12,.88);backdrop-filter:blur(8px)}
.fpw__panel{width:min(26rem,100%);background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-pop);padding:1.8rem 1.6rem;text-align:center}
.fpw__icon{display:grid;place-items:center;width:3.4rem;height:3.4rem;margin:0 auto 1rem;border-radius:50%;background:var(--blue-soft);color:var(--blue-strong)}
.fpw__title{font-family:var(--f-display);font-weight:800;color:var(--text-1);font-size:1.1rem}
.fpw__sub{color:var(--text-3);font-size:.85rem;margin:.5rem 0 1.2rem;line-height:1.8}
.fpw .field{text-align:start}

.revEye{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:var(--radius-sm);color:var(--text-3);cursor:pointer;transition:.15s}
.revEye:hover{background:var(--bg-3);color:var(--text-1)}
.revEye svg{width:1.05rem;height:1.05rem}
.revReset{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:var(--radius-sm);color:var(--text-4);cursor:pointer;transition:.15s}
.revReset:hover{background:var(--danger-bg);color:var(--danger)}
.revReset svg{width:1rem;height:1rem}
.cardHeadBtns{display:inline-flex;align-items:center;gap:.25rem;margin-inline-start:auto}
.grid--stats .stat{position:relative}

/* ===== message spacing + ticket badge + revenue button placement ===== */
.msgCard{margin-bottom:.85rem}
.msgCard:last-child{margin-bottom:0}

/* ===== floating notification bell (all pages, only when unread) ===== */
.nfab{position:fixed;z-index:96;inset-inline-end:1.15rem;bottom:1.15rem}
.nfab[hidden]{display:none!important}
.nfab__btn{position:relative;width:3.1rem;height:3.1rem;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-pop);border:0;cursor:pointer;transition:transform .15s var(--ease)}
.nfab__btn:hover{transform:translateY(-2px)}
.nfab__count{position:absolute;top:-.25rem;inset-inline-start:-.25rem;min-width:1.2rem;height:1.2rem;border-radius:999px;background:var(--danger);color:#fff;font-size:.7rem;font-weight:800;display:grid;place-items:center;padding:0 .3rem;direction:ltr}
.nfab__panel{position:absolute;bottom:calc(100% + .7rem);inset-inline-end:0;width:min(21rem,calc(100vw - 2rem));background:var(--bg-1);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-pop);overflow:hidden;display:none}
.nfab.is-open .nfab__panel{display:block}
.nfab__list{max-height:19rem;overflow-y:auto}
@media (max-width:63.99em){.nfab{bottom:calc(4.6rem + env(safe-area-inset-bottom,0px))}}

/* ===== popup panels on phones: keep a visible margin all around ===== */
@media (max-width:47.99em){
  .u360__panel{width:calc(100vw - 1.5rem);margin-inline-start:1.5rem}
  .ipOv{padding:.9rem}
  .amodal{padding:.9rem}
  .amodal__panel{max-height:calc(100dvh - 1.8rem)}
}

/* ===== RTL: LTR-isolated numbers/latin blocks must still align right in FA ===== */
html[dir="rtl"] :is(.mono,.table .is-num,.table__num,.stat__val,.linkedItem__val,.notif__time,
.walletCard__balance,.rankTile__name,.rankTile__timeVal,.cartItem__price,.summary__val,
.codeBox__code,.codeBox__cmd,.serverPill__val,.ticketSide__rowVal--num,.cmp__hint){text-align:right}

/* mobile: connected-accounts rows must never widen the page */
.linkedItem > *{min-width:0}
.linkedItem__val{overflow-wrap:anywhere}
@media (max-width:47.99em){
  .linkedItem{flex-wrap:wrap;row-gap:.35rem}
}
.grid > *{min-width:0}