@import url("https://fonts.googleapis.com/css2?family=Carlito:ital,wght@0,400;0,700;1,400;1,700&display=swap");

  :root {
    --color-bg: #eef3f4;
    --color-stage: #d7e6e8;
    --color-surface: #ffffff;
    --color-sunken: #f4f8f8;
    --color-fg: #1c2b2e;
    --color-muted: #5d6f73;
    --color-subtle: #8a9a9d;
    --color-primary: #0e7d93;
    --color-primary-hover: #0b6979;
    --color-primary-soft: #eaf7fa;
    --color-danger: #7f0037;
    --color-danger-soft: #fbe7ef;
    --color-warn: #c4841d;
    --color-ok: #2a9a6a;
    --color-border: #dce6e8;
    --color-border-strong: #c5d4d7;
    --color-overlay: rgb(28 43 46 / 46%);
    --font-sans: "Carlito", "Calibri", "Candara", "Segoe UI", system-ui, sans-serif;
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgb(28 43 46 / 4%), 0 8px 24px rgb(28 43 46 / 6%);
    --shadow-phone: 0 24px 64px rgb(28 43 46 / 18%);
    --color-danger-line: #f2c3d4;
    --color-chip: #e8efef;
    --color-link: var(--color-primary);
    --color-off-bg: #d5dde1;
    --color-off-fg: #8a9a9d;
    --color-doc-red: #740000;
    color-scheme: light;
  }
  html[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #0f1719;
    --color-stage: #080d0e;
    --color-surface: #172326;
    --color-sunken: #1c2c30;
    --color-fg: #e6eef0;
    --color-muted: #a0b3b7;
    --color-subtle: #7b9094;
    --color-primary: #0e7d93;
    --color-link: #4cc3d9;
    --color-primary-hover: #4cc3d9;
    --color-primary-soft: #12353c;
    --color-danger: #e0457b;
    --color-danger-soft: #3a1a28;
    --color-danger-line: #6b2a43;
    --color-warn: #e0a040;
    --color-ok: #3fbf8a;
    --color-border: #27383c;
    --color-border-strong: #384e53;
    --color-overlay: rgb(0 0 0 / 62%);
    --color-chip: #243538;
    --color-off-bg: #2a3b3f;
    --color-off-fg: #7b9094;
    --color-doc-red: #ff7a8a;
    --shadow-card: 0 1px 2px rgb(0 0 0 / 30%), 0 8px 24px rgb(0 0 0 / 28%);
    --shadow-phone: 0 24px 64px rgb(0 0 0 / 50%);
  }

  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--color-stage);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
  }
  button { font-family: inherit; cursor: pointer; }
  h1, h2, h3, p { margin: 0; }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  input, textarea, select { font-family: inherit; }

  .proto-banner {
    background: var(--color-fg);
    color: #fff;
    font-size: 12.5px;
    text-align: center;
    padding: 6px 12px;
    letter-spacing: 0.02em;
  }
  .proto-banner b { color: #7fd8e6; }
  html[data-theme="dark"] .proto-banner { background: #1f3236; }
  html[data-theme="dark"] img.logo, html[data-theme="dark"] .logo-link img, html[data-theme="dark"] .mobile-logo img { filter: invert(1) hue-rotate(180deg) brightness(1.15); }

  /* ---------- LOGIN ---------- */
  #loginScreen, #signupScreen {
    min-height: calc(100dvh - 28px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .login-card {
    width: 100%;
    max-width: 380px;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-phone);
    padding: 40px 28px 32px;
    display: flex;
    flex-direction: column;
  }
  .login-card img.logo { height: 44px; width: auto; margin: 0 auto; }
  .login-card h1 { text-align: center; font-size: 22px; font-weight: 700; margin-top: 26px; }
  .login-card .sub { text-align: center; font-size: 13.5px; color: var(--color-muted); margin-top: 6px; }
  .login-field { margin-top: 14px; }
  .login-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--color-muted); margin-bottom: 5px; }
  .login-field input {
    width: 100%; border: 1px solid var(--color-border); background: var(--color-surface);
    border-radius: var(--radius-sm); padding: 11px 14px; font-size: 14.5px; color: var(--color-fg);
  }
  .login-field input:focus { outline: none; border-color: var(--color-primary); }
  .login-pass-wrap { position: relative; }
  .login-pass-wrap button { position: absolute; right: 8px; top: 29px; border: none; background: none; color: var(--color-link); padding: 6px; }
  .login-error { color: var(--color-danger); font-size: 13px; font-weight: 700; margin-top: 10px; }
  .btn-primary {
    width: 100%; border: none; background: var(--color-primary); color: #fff; font-weight: 700;
    font-size: 15px; padding: 13px; border-radius: var(--radius-sm); margin-top: 16px;
  }
  .btn-primary:disabled { opacity: 0.5; }
  .btn-outline {
    width: 100%; border: 1px solid var(--color-border-strong); background: none; color: var(--color-link);
    font-weight: 700; font-size: 14px; padding: 11px; border-radius: var(--radius-sm); margin-top: 10px;
  }
  .login-links { text-align: center; font-size: 13.5px; color: var(--color-muted); margin-top: 18px; }
  .login-links a { color: var(--color-link); font-weight: 700; text-decoration: none; }
  .login-links p + p { margin-top: 8px; }
  .signup-demo { text-align: center; font-size: 11.5px; color: var(--color-muted); margin-top: 16px; word-break: break-all; }
  #signupScreen .login-field input { padding-right: 44px; }
  #signupScreen .login-pass-wrap button { top: 6px; }
  #signupScreen .login-pass-wrap { margin-top: 14px; }
  .verify-banner { background: var(--color-primary-soft); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 16px; }
  .verify-banner[hidden] { display: none; }
  .verify-banner h3 { font-size: 15px; font-weight: 700; }
  .verify-banner p { font-size: 13px; color: var(--color-muted); margin-top: 6px; line-height: 1.45; }
  .verify-banner p b { color: var(--color-fg); word-break: break-all; }
  .verify-banner .vb-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; align-items: center; }
  .verify-banner .vb-actions .link { font-size: 13px; }
  body.unverified [data-tab], body.unverified .icon-btn, body.unverified .avatar { opacity: .4; cursor: not-allowed; }
  body.unverified #overlay-personal .back-header .back { visibility: hidden; }
  .welcome-modal { text-align: center; padding: 28px 24px 24px; max-width: 360px; }
  .welcome-modal .wm-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link); display: grid; place-items: center; margin: 0 auto 14px; }
  .welcome-modal h2 { font-size: 20px; font-weight: 700; }
  .welcome-modal p { font-size: 14px; color: var(--color-muted); margin-top: 6px; }
  .login-support { text-align: center; font-size: 13px; color: var(--color-muted); margin-top: 26px; text-decoration: none; }

  /* ---------- stage / layout ---------- */
  .stage {
    min-height: calc(100dvh - 28px);
    display: flex;
    flex-direction: column;
  }
  .stage-inner {
    margin: 0 auto;
    width: 100%;
    max-width: 1360px;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  @media (min-width: 768px) {
    .stage-inner { flex-direction: row; gap: 24px; padding: 24px; }
  }

  .side-nav { display: none; }
  @media (min-width: 768px) {
    .side-nav {
      display: flex; flex-direction: column; gap: 4px; width: 220px; flex-shrink: 0;
      background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 16px;
    }
    .side-nav .logo-link { padding: 4px 8px 20px; display: inline-block; }
    .side-nav .logo-link img { height: 32px; width: auto; }
  }
  .side-nav button, .side-nav a {
    display: flex; align-items: center; gap: 12px; border: none; background: transparent;
    color: var(--color-muted); font-weight: 700; font-size: 14px; padding: 10px 12px; border-radius: var(--radius-sm); text-align: left;
    text-decoration: none; cursor: pointer;
  }
  .side-nav button:hover, .side-nav a:hover { background: var(--color-sunken); color: var(--color-fg); }
  .side-nav button.active { background: var(--color-primary-soft); color: var(--color-primary-hover); font-weight: 700; font-size: 15px; }
  .side-nav button.active:hover { background: var(--color-primary-soft); color: var(--color-primary-hover); }
  .side-nav button.active svg { stroke-width: 2.1; }
  .side-nav .hint { margin-top: auto; background: var(--color-sunken); color: var(--color-muted); font-size: 12px; line-height: 1.5; padding: 12px; border-radius: var(--radius-sm); }

  .panel { display: flex; flex-direction: column; width: 100%; height: 100dvh; background: var(--color-bg); box-shadow: var(--shadow-phone); }
  /* мобільна версія: банер прототипу + застосунок вміщуються рівно в екран, сторінка не прокручується, нижнє меню закріплене */
  @media (max-width: 639px) {
    html, body { height: 100dvh; overflow: hidden; }
    body { display: flex; flex-direction: column; }
    .proto-banner { flex: none; }
    #loginScreen, #signupScreen { flex: 1; min-height: 0; overflow-y: auto; }
    .stage { flex: 1; min-height: 0; }
    .stage-inner { min-height: 0; }
    .panel { height: 100%; min-height: 0; }
  }
  /* нижнє меню видно завжди: накладні екрани (профіль, ID-картка, історія…) і шторка партнера закінчуються над ним */
  @media (max-width: 767px) {
    #mainPanel .overlay-panel, #mainPanel .vendor-drawer, #mainPanel .vendor-backdrop { bottom: var(--nav-h, 0px); }
  }
  @media (min-width: 640px) { .panel { max-width: 390px; margin: 0 auto; height: min(100dvh, 844px); border-radius: 20px; overflow: hidden; } }
  @media (min-width: 768px) { .panel { max-width: none; margin: 0; height: auto; max-height: calc(100dvh - 48px); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); flex: 1; } }

  .top-header { display: flex; align-items: center; gap: 4px; height: 56px; flex-shrink: 0; border-bottom: 1px solid var(--color-border); background: var(--color-surface); padding: 0 10px; }
  @media (min-width: 768px) { .top-header { height: 64px; padding: 0 24px; } }
  .top-header .mobile-logo img { height: 26px; }
  @media (min-width: 768px) { .top-header .mobile-logo { display: none; } }
  .top-header h1 { display: none; font-size: 18px; font-weight: 700; }
  @media (min-width: 768px) { .top-header h1 { display: block; } }
  .top-header .icons { margin-left: auto; display: flex; align-items: center; gap: 2px; }
  .icon-btn { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-pill); border: none; background: transparent; color: var(--color-link); }
  .icon-btn:hover { background: var(--color-sunken); }
  .icon-btn .dot { position: absolute; right: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-danger); }
  .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; margin-left: 3px; border: none; }

  .admin-tile { display: flex; flex-direction: row; align-items: center; gap: 14px; width: 100%; min-height: 0; padding: 14px 18px; cursor: pointer; text-align: left; font: inherit; color: inherit; border: none; }
  .admin-tile { margin: 12px 0 16px; }
  .admin-tile .at-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--color-primary-soft); color: var(--color-link); display: grid; place-items: center; flex-shrink: 0; }
  .admin-tile .at-tx { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; }
  .admin-tile .gl-ar { color: var(--color-link); font-size: 18px; }
  .back-header { display: flex; align-items: center; gap: 2px; height: 48px; flex-shrink: 0; border-bottom: 1px solid var(--color-border); background: var(--color-surface); padding: 0 4px; }
  .back-header button.back { border: none; background: none; color: var(--color-link); width: 40px; height: 40px; border-radius: var(--radius-pill); display: grid; place-items: center; font-size: 18px; }
  .back-header h2 { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Шапка підекранів (Team / Buy) — упритул до країв, як в оверлеях: кнопка «назад» скрізь у тій самій точці */
  .screen .subview > .back-header, .screen #screen-news > .back-header { margin: calc(-1 * var(--sp)) calc(-1 * var(--sp)) 0; padding: 0 4px; }
  [data-role][hidden] { display: none !important; }
  .login-field select { width: 100%; padding: 11px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font: inherit; font-size: 14px; color: var(--color-text); }
  .login-field select:focus { outline: none; border-color: var(--color-primary); }
  .back-header .right-slot { font-size: 13px; font-weight: 700; color: var(--color-link); padding: 0 10px; background: none; border: none; }

  .screen { --sp: 16px; flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp); }
  @media (min-width: 768px) { .screen { --sp: 24px; } }
  @media (min-width: 1024px) { .screen { --sp: 32px; } }
  .screen::-webkit-scrollbar { display: none; }
  .screen.buy-active { --sp: 12px; }
  .screen.buy-active .buy-filters { padding: 4px 12px 12px; margin: 0 -12px 12px; }
  .screen-narrow { padding: 16px; }
  @media (min-width: 768px) { .screen-narrow { padding: 24px; } }

  .bottom-nav { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1px solid var(--color-border); background: var(--color-surface); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); flex-shrink: 0; }
  @media (min-width: 768px) { .bottom-nav { display: none; } }
  .bottom-nav button, .bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: none; background: none; color: var(--color-subtle); font-size: 10px; font-weight: 700; padding: 4px 1px; border-radius: var(--radius-xs); width: 100%; min-width: 0; white-space: nowrap; text-decoration: none; cursor: pointer; }
  .bottom-nav button { position: relative; transition: background .15s, color .15s; }
  .bottom-nav button.active { color: var(--color-primary-hover); font-weight: 700; font-size: 10.5px; }
  .bottom-nav button.active svg { stroke-width: 2.1; }
  .bottom-nav svg { width: 22px; height: 22px; }

  .card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 16px; }
  .section-title { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--color-muted); margin: 20px 0 8px; }
  .section-title:first-child { margin-top: 0; }
  .section-title a, .section-title button.link { color: var(--color-link); font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; border: none; background: none; padding: 0; }
  button.link { color: var(--color-link); font-weight: 700; font-size: 13px; text-decoration: none; cursor: pointer; border: none; background: none; padding: 0; }
  .tabular { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .field { margin-bottom: 10px; }
  .field label { display: block; font-size: 12px; font-weight: 700; color: var(--color-muted); margin-bottom: 4px; }
  .field input, .field select, .field textarea {
    width: 100%; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-sm);
    padding: 10px 12px; font-size: 14px; color: var(--color-fg);
  }
  .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-primary); }
  .btn-block { width: 100%; border: none; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 14.5px; padding: 12px; border-radius: var(--radius-sm); }
  .btn-block:disabled { opacity: 0.5; }
  .btn-ghost-sm { border: none; background: var(--color-sunken); color: var(--color-fg); font-weight: 700; font-size: 13px; padding: 9px 12px; border-radius: var(--radius-sm); }

  .screen-panel { display: none; }
  .screen-panel.active { display: block; }
  .subview { display: none; flex-direction: column; flex: 1; min-height: 0; }
  .subview.active { display: flex; }

  /* ---------- HOME ---------- */
  @media (min-width: 768px) { .home-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 20px; align-items: start; } }
  .greet { margin-bottom: 12px; }
  .greet p { font-size: 13px; color: var(--color-muted); }
  .greet h2 { font-size: 20px; font-weight: 700; margin-top: 2px; }
  @media (min-width: 768px) { .greet h2 { font-size: 24px; } }
  .barcode-card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 18px 16px 14px; text-align: center; margin-bottom: 12px; }
  .barcode-bars { height: 64px; margin: 0 auto 8px; max-width: 100%; overflow: hidden; text-align: center; }
  .barcode-num { font-size: 13px; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
  .balance-card { background: #006578; color: #fff; border-radius: var(--radius-md); padding: 18px; margin-bottom: 12px; }
  .balance-card .label { font-size: 13px; color: rgb(255 255 255 / 80%); }
  .balance-card .amount { font-size: 30px; font-weight: 700; margin-top: 4px; }
  .balance-currencies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
  .balance-currencies button { background: rgb(255 255 255 / 15%); border: none; border-radius: var(--radius-sm); color: #fff; padding: 8px 6px; text-align: center; }
  .balance-currencies .cur-label { font-size: 11px; color: rgb(255 255 255 / 80%); }
  .balance-currencies .cur-value { font-size: 14px; font-weight: 700; margin-top: 2px; }
  .two-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .tile { min-height: 176px; display: flex; flex-direction: column; }
  .tile .tile-title { font-size: 14px; font-weight: 700; }
  .donut-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .donut { position: relative; width: 84px; height: 84px; }
  .donut svg { transform: rotate(-90deg); }
  .donut .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .donut .center b { font-size: 11px; color: var(--color-muted); }
  .donut .center span { font-size: 15px; font-weight: 700; }
  .tile-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-top: 1px solid var(--color-border); padding-top: 8px; margin-top: 8px; text-align: center; font-size: 10px; color: var(--color-muted); }
  .qr-fake { width: 84px; height: 84px; background: radial-gradient(circle at 12% 12%, #1c2b2e 0 10%, transparent 11%), radial-gradient(circle at 88% 12%, #1c2b2e 0 10%, transparent 11%), radial-gradient(circle at 12% 88%, #1c2b2e 0 10%, transparent 11%), repeating-linear-gradient(45deg, #1c2b2e 0 3px, transparent 3px 7px); border-radius: 4px; }
  .get-links { display: grid; gap: 12px; margin-top: 12px; }
  .get-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); text-decoration: none; color: var(--color-fg); }
  .get-link:hover { box-shadow: var(--shadow-card), 0 0 0 1.5px var(--color-primary); }
  .gl-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; }
  .gl-ic.tg { background: #229ed9; }
  .gl-ic.tg svg { transform: translate(-.5px,.3px); }
  .gl-ic.app { background: var(--color-primary); }
  .gl-ic.help { background: #7f0037; }
  .gl-ic.pro { background: var(--color-primary); }
  button.get-link { width: 100%; border: none; font: inherit; text-align: start; cursor: pointer; }
  .gl-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .gl-tx b { font-size: 14px; }
  .gl-tx small { font-size: 12px; color: var(--color-muted); }
  .gl-tx small.gl-hint { margin-top: 4px; font-size: 11.5px; line-height: 1.35; }
  .gl-qr { display: none; flex: none; flex-direction: column; align-items: center; gap: 4px; }
  .gl-qr svg { display: block; border-radius: 6px; border: 1px solid var(--color-border); }
  .gl-qr-cap { font-size: 10.5px; color: var(--color-muted); }
  @media (min-width: 768px) and (hover: hover) { .gl-qr { display: flex; } .get-link:has(.gl-qr) .gl-ar { display: none; } }
  .gl-ar { color: var(--color-link); font-weight: 700; }
  .tx-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 13px 16px; text-align: left; background: none; border: none; border-bottom: 1px solid var(--color-border); }
  @media (min-width: 768px) { .tx-row { padding: 14px 20px; } }
  .tx-row:last-child { border-bottom: none; }
  .tx-title { font-size: 14px; font-weight: 700; }
  .tx-sub { font-size: 12px; color: var(--color-muted); margin-top: 2px; }
  .tx-amount { font-size: 14px; font-weight: 700; }
  .tx-amount.pos { color: var(--color-ok); }
  .history-card { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; cursor: pointer; border: none; width: 100%; text-align: left; }
  .history-card .t { font-weight: 700; }
  .history-card .s { font-size: 13px; color: var(--color-muted); margin-top: 2px; }

  /* ---------- WALLET ---------- */
  .wallet-grid { position: relative; }
  #walletInfoBtn { position: absolute; top: -12px; inset-inline-end: -6px; margin: 0; z-index: 2; }
  @media (min-width: 860px) { .wallet-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: start; } }
  .wallet-sp { container-type: inline-size; }
  .points-accordion { display: flex; flex-direction: column; gap: 10px; }
  .points-item { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow .15s; }
  .points-item.open { box-shadow: 0 2px 4px rgb(28 43 46 / 6%), 0 12px 28px rgb(28 43 46 / 10%); }
  .points-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; }
  @media (min-width: 768px) { .points-row { padding: 15px 20px; } }
  .p-badge { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary-soft); color: var(--color-link); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }
  .points-row .name { font-size: 14px; font-weight: 700; flex: 1; }
  .points-row .val { font-weight: 700; }
  .points-row .chev { color: var(--color-subtle); margin-left: 6px; transition: transform .15s; display: inline-block; }
  .points-item.open .points-row .chev { transform: rotate(90deg); color: var(--color-link); }
  .points-detail { display: none; padding: 4px 16px 16px; border-top: 1px solid var(--color-border); font-size: 13px; }
  @media (min-width: 768px) { .points-detail { padding: 4px 20px 18px; } }
  .points-detail.open { display: block; padding-top: 14px; }
  .points-detail .d-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--color-border); }
  .points-detail .d-row:last-child { border-bottom: none; }
  .points-detail .d-title { font-weight: 700; }
  .points-detail .d-sub { color: var(--color-muted); font-size: 12px; }
  .points-detail .d-val.pos { color: var(--color-ok); font-weight: 700; }
  .spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  @container (max-width: 299px) { .spec-grid { grid-template-columns: 1fr; } }
  .spec-tile { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 14px; border: none; text-align: left; }
  .spec-tile .code { font-size: 11px; font-weight: 700; color: var(--color-link); }
  .spec-tile .name { font-size: 11px; color: var(--color-muted); }
  .spec-tile .val { font-size: 17px; font-weight: 700; margin-top: 6px; }

  /* ---------- BUY ---------- */
  .buy-filters { display: flex; gap: 22px; overflow-x: auto; padding: 4px 16px 12px; border-bottom: 1px solid var(--color-border); margin: 0 -16px 12px; }
  @media (min-width: 768px) { .buy-filters { padding-left: 24px; padding-right: 24px; margin-left: -24px; margin-right: -24px; } }
  .buy-filters::-webkit-scrollbar { display: none; }
  .filter-chip { flex-shrink: 0; border: none; background: none; box-shadow: none; color: var(--color-muted); font-size: 14px; font-weight: 700; padding: 4px 0 8px; border-radius: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .filter-chip.active { color: var(--color-link); border-bottom-color: var(--color-primary); }
  #buy-vendors { container-type: inline-size; }
  .vendor-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  @container (min-width: 480px) { .vendor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @container (min-width: 600px) { .vendor-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .vendor-tile { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: start; width: 100%; height: 96px; padding: 12px; border: 2px solid transparent; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); text-align: left; color: inherit; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; overflow: hidden; }
  .vendor-tile:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgb(28 43 46 / 6%), 0 12px 28px rgb(28 43 46 / 12%); }
  .vendor-tile:focus-visible { outline: none; border-color: var(--color-primary); }
  .vendor-tile.selected { border-color: var(--color-primary); }
  .vt-logo { grid-column: 1; grid-row: 1 / 3; align-self: start; width: 64px; height: 64px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); display: grid; overflow: hidden; place-items: center; padding: 2px; overflow: hidden; }
  .vt-logo img { width: 100%; height: 100%; object-fit: contain; }
  .vt-ph { display: none; font-size: 22px; font-weight: 700; color: var(--color-subtle); }
  .vt-main { display: contents; }
  .vt-name { grid-column: 2; grid-row: 1; min-width: 0; font-weight: 700; font-size: 14.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vt-desc { grid-column: 2 / 4; grid-row: 2; min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vt-chips { grid-column: 3; grid-row: 1; margin-top: -1px; display: grid; grid-template-columns: auto auto; justify-items: start; column-gap: 4px; row-gap: 0; font-size: 12px; font-weight: 700; line-height: 1.25; white-space: nowrap; }
  .vt-chips > div { display: contents; }
  .vt-chips .reb { color: var(--color-ok); }
  .vt-chips .vol { color: var(--color-link); }
  @container (min-width: 480px) and (max-width: 899px) {
    .vendor-tile { height: 128px; padding: 10px; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 10px; }
    .vt-logo { grid-row: 1 / 3; width: 48px; height: 48px; padding: 2px; }
    .vt-chips { grid-column: 2; grid-row: 1; justify-self: end; }
    .vt-name { grid-column: 2; grid-row: 2; align-self: end; }
    .vt-desc { grid-column: 1 / 3; grid-row: 3; margin-top: 4px; -webkit-line-clamp: 3; }
  }

  .pager { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 16px; padding-bottom: 4px; }
  .pager[hidden] { display: none; }
  .pager-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
  .pager button { min-width: 38px; height: 38px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-fg); font-weight: 700; font-size: 14px; cursor: pointer; display: inline-grid; place-items: center; transition: background .15s, color .15s, border-color .15s; }
  .pager button:hover:not(:disabled):not(.active) { background: var(--color-sunken); border-color: var(--color-border-strong); }
  .pager button.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; cursor: default; }
  .pager button:disabled { opacity: .4; cursor: default; }
  .pager button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
  .pager .dots { min-width: 20px; text-align: center; color: var(--color-muted); font-weight: 700; user-select: none; }
  .pager svg { display: block; }
  .pager .prev svg { transform: rotate(90deg); }
  .pager .next svg { transform: rotate(-90deg); }
  .pager-info { font-size: 12px; color: var(--color-muted); }
  /* ---------- Sell (sales) ---------- */
  .sell-wrap { container-type: inline-size; }
  .sell-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .sell-title { font-size: 20px; font-weight: 700; line-height: 1.2; }
  .sell-title span { font-size: 13px; font-weight: 700; color: var(--color-muted); }
  .sell-new { flex-shrink: 0; border: none; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
  .sell-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .sell-bell { position: relative; flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-link); border-radius: var(--radius-sm); cursor: pointer; }
  .sell-bell:hover { background: var(--color-primary-soft); }
  .sell-bell .bell-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--color-danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--color-bg); }
  .sell-bell .bell-badge[hidden] { display: none; }
  html[dir="rtl"] .sell-bell .bell-badge { right: auto; left: -6px; }
  .notice-card { position: relative; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 14px 14px 12px; margin-bottom: 10px; }
  .notice-card.unread::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-primary); }
  .notice-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .notice-who { font-weight: 700; font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
  .notice-who small { font-weight: 500; font-size: 12px; color: var(--color-muted); margin-inline-start: 6px; }
  .notice-id { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 8px; padding: 3px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-sunken); color: var(--color-muted); font: inherit; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; vertical-align: 1px; }
  .notice-id i { display: inline-grid; place-items: center; font-style: normal; color: var(--color-link); }
  .notice-id:hover { border-color: var(--color-primary); color: var(--color-text); }
  .notice-id.copied { background: var(--color-primary-soft); border-color: var(--color-primary); color: var(--color-link); }
  .notice-sum { font-weight: 700; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .notice-new { display: inline-block; margin-inline-start: 8px; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--color-primary-soft); color: var(--color-link); font-size: 11px; font-weight: 700; vertical-align: 1px; }
  .notice-meta { font-size: 13px; color: var(--color-muted); margin-top: 4px; }
  .notice-comment { font-size: 13.5px; margin-top: 6px; overflow-wrap: anywhere; }
  .notice-at { font-size: 11.5px; color: var(--color-subtle); }
  .notice-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
  .notice-confirm { padding: 9px 18px; }
  .notice-done { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border: 1.5px solid var(--color-ok); border-radius: var(--radius-sm); background: none; color: var(--color-ok); font: inherit; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer; }
  .notice-done:hover { background: rgb(42 154 106 / 8%); }
  .sale-input.locked input { background: var(--color-sunken); color: var(--color-muted); }
  .sell-new:hover { background: var(--color-primary-hover); }
  .sell-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
  @container (min-width: 330px) { .sell-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sell-stat { padding: 12px 14px; } .sell-stat .v { font-size: 19px; } }
  @container (min-width: 520px) { .sell-stat .v { font-size: 22px; } }
  @container (min-width: 900px) { .sell-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .sell-stat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; min-width: 0; }
  .sell-stat .l { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
  .sell-stat .v { font-size: 22px; font-weight: 700; margin-top: 4px; white-space: nowrap; }
  .sell-stat .s { font-size: 12.5px; color: var(--color-muted); margin-top: 2px; }
  .sell-stat .s a { color: var(--color-link); text-decoration: underline; }
  .sell-stat.due { background: var(--color-danger-soft); border-color: var(--color-danger-line); }
  .sell-stat.due .l, .sell-stat.due .v, .sell-stat.due .s { color: var(--color-danger); }
  .sell-table { padding: 8px; overflow: hidden; }
  .sell-table table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
  .sell-table th { text-align: left; font-weight: 700; font-size: 13.5px; color: var(--color-fg); padding: 12px 14px; white-space: nowrap; }
  .sell-table td { padding: 10px 14px; vertical-align: middle; }
  .sell-table tbody tr:nth-child(odd) td { background: var(--color-sunken); }
  .sell-table tbody td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
  .sell-table tbody td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
  .sell-table td.num, .sell-table td.date { white-space: nowrap; }
  .sell-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
  .sell-table th.num { padding-right: 14px; }
  .sell-table td.cm { word-break: break-word; }
  .sell-id { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; font-weight: 600; color: var(--color-primary-hover); background: var(--color-chip); padding: 5px 10px; border-radius: var(--radius-xs); white-space: nowrap; }
  .sell-table td .muted { color: var(--color-muted); }
  @container (max-width: 719px) {
    .sell-table:not(.pay-table) { padding: 0; background: none; box-shadow: none; }
    .sell-table:not(.pay-table) table, .sell-table:not(.pay-table) tbody, .sell-table:not(.pay-table) tr, .sell-table:not(.pay-table) td { display: block; }
    .sell-table:not(.pay-table) thead { display: none; }
    .sell-table:not(.pay-table) tbody tr { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 12px 14px; margin-bottom: 10px; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
    .sell-table:not(.pay-table) tbody tr:nth-child(odd) td { background: none; }
    .sell-table:not(.pay-table) td, .sell-table:not(.pay-table) tbody td:first-child, .sell-table:not(.pay-table) tbody td:last-child { padding: 0; border-radius: 0; }
    .sell-table:not(.pay-table) td.date { color: var(--color-muted); font-size: 13px; }
    .sell-table:not(.pay-table) td.sum { grid-column: 2; grid-row: 1; font-weight: 700; font-size: 16px; text-align: right; }
    .sell-table:not(.pay-table) td.card-id { grid-column: 1; grid-row: 2; }
    .sell-table:not(.pay-table) td.nick { grid-column: 2; grid-row: 2; text-align: right; color: var(--color-muted); font-size: 13px; }
    .sell-table:not(.pay-table) td.reb { text-align: left; grid-column: 1 / 3; font-size: 13px; color: var(--color-ok); }
    html:not([lang="uk"]) .sell-table:not(.pay-table) td.reb::before { content: "Rebate: "; }
  .sell-table:not(.pay-table) td.reb::before { content: "Рібейт: "; color: var(--color-muted); }
    .sell-table:not(.pay-table) td.cm { grid-column: 1 / 3; border-top: 1px solid var(--color-border); padding-top: 6px; }
    .sell-table:not(.pay-table) td.cm:empty { display: none; }
  }
  /* ---------- Sell: payment history ---------- */
  .pay-wrap { container-type: inline-size; }
  .pay-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pay-table table { min-width: 640px; }
  .pay-table table.is-empty { min-width: 0; }
  .pay-table td.ext { color: var(--color-muted); white-space: nowrap; }
  .pay-table td.method { white-space: nowrap; }
  .sell-table tr.empty td { text-align: center; color: var(--color-muted); font-size: 13.5px; padding: 12px 14px; }
  @container (max-width: 719px) {
    .pay-table table.is-empty th { white-space: normal; font-size: 12.5px; padding: 12px 6px; }
    .pay-table table.is-empty td { padding: 12px 6px; }
  }
  /* ---------- Sell: new sale modal ---------- */
  .sale-backdrop { position: absolute; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 16px; overflow-y: auto; background: var(--color-overlay); }
  .sale-backdrop.open { display: flex; animation: saleFade .18s ease-out; }
  .sale-modal { width: 100%; max-width: 480px; margin: auto; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgb(28 43 46 / 28%); padding: 20px 22px 24px; animation: saleIn .22s cubic-bezier(.2, .8, .2, 1); }
  @keyframes saleFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes saleIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
  .sale-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
  .sale-head h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; }
  .sale-head .vd-close { margin-right: -8px; }
  .sale-field { margin-bottom: 18px; }
  .sale-field label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
  .sale-input { position: relative; }
  .sale-input input, .sale-field textarea { width: 100%; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-fg); font: inherit; font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
  .sale-input input { height: 50px; padding: 0 52px 0 16px; }
  .sale-input input.card-num { letter-spacing: .14em; font-variant-numeric: tabular-nums; }
  .sale-input input.card-num::placeholder { letter-spacing: .14em; }
  .sale-field textarea { display: block; padding: 12px 16px; resize: vertical; min-height: 84px; line-height: 1.4; }
  .sale-input input::placeholder, .sale-field textarea::placeholder { color: var(--color-subtle); }
  .sale-input input:focus, .sale-field textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgb(14 125 147 / 14%); }
  .sale-input.invalid input { border-color: var(--color-danger); }
  .scan-btn { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 42px; height: 42px; border: none; border-radius: var(--radius-sm); background: none; color: var(--color-link); cursor: pointer; }
  .scan-btn[hidden] { display: none; }
  .scan-btn:hover { background: var(--color-sunken); }
  .scan-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 0; }
  .sale-input.ok .scan-btn { color: var(--color-ok); }
  .scan-layer { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: #0d1517; color: #fff; }
  .scan-layer[hidden] { display: none; }
  .scan-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; }
  .scan-top h3 { margin: 0; font-size: 18px; }
  .scan-close { display: grid; place-items: center; width: 40px; height: 40px; border: none; border-radius: 999px; background: rgb(255 255 255 / 14%); color: #fff; font-size: 18px; cursor: pointer; }
  .scan-view { position: relative; flex: 1; min-height: 0; margin: 0 16px; border-radius: 16px; overflow: hidden; background: #000; }
  .scan-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .scan-frame { position: absolute; left: 50%; top: 50%; width: min(70%, 260px); aspect-ratio: 1; transform: translate(-50%, -50%); }
  .scan-frame i { position: absolute; width: 28px; height: 28px; border: 4px solid #fff; }
  .scan-frame i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
  .scan-frame i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
  .scan-frame i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
  .scan-frame i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
  .scan-msg { padding: 14px 20px 6px; text-align: center; font-size: 15px; color: rgb(255 255 255 / 85%); min-height: 44px; }
  .scan-msg[data-state="err"] { color: #ffb4a8; }
  .scan-actions { display: flex; gap: 10px; padding: 8px 16px 20px; }
  .scan-actions > * { flex: 1; display: grid; place-items: center; height: 48px; border-radius: var(--radius-sm); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
  .scan-photo { background: #fff; color: #0d1517; }
  .scan-manual { border: 1px solid rgb(255 255 255 / 40%); background: none; color: #fff; }
  .sale-input .ico, .sale-input .cur { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--color-subtle); pointer-events: none; }
  .sale-input .cur { font-size: 18px; font-weight: 700; }
  .sale-input.ok .ico { color: var(--color-ok); }
  .sale-hint { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; font-size: 13.5px; line-height: 1.35; color: var(--color-muted); }
  .sale-hint::before { content: "i"; flex: 0 0 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--color-subtle); color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; }
  .sale-hint[data-state="ok"] { color: var(--color-ok); font-weight: 700; }
  .sale-hint[data-state="ok"]::before { content: "✓"; background: var(--color-ok); }
  .sale-hint[data-state="err"] { color: var(--color-danger); }
  .sale-hint[data-state="err"]::before { content: "!"; background: var(--color-danger); }
  .sale-hint[data-state="checking"]::before { content: "…"; background: var(--color-primary); }
  .sale-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; margin-top: 24px; }
  .sale-submit { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border: none; border-radius: var(--radius-sm); background: var(--color-primary); color: #fff; font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; transition: background .15s; }
  .sale-submit:hover:not(.is-off) { background: var(--color-primary-hover); }
  .sale-submit.is-off { background: var(--color-off-bg); color: var(--color-off-fg); }
  .sale-submit.shake, .sale-input.shake { animation: saleShake .3s; }
  @keyframes saleShake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
  .sale-submit:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
  .sale-status { font-size: 13.5px; color: var(--color-muted); }
  .vendor-backdrop { position: absolute; inset: 0; z-index: 39; background: var(--color-overlay); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .vendor-backdrop.open { opacity: 1; pointer-events: auto; }
  .vendor-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 40; width: min(420px, 100%); display: flex; flex-direction: column; background: var(--color-bg); box-shadow: -12px 0 40px rgb(28 43 46 / 18%); transform: translateX(100%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s; }
  .vendor-drawer.open { transform: translateX(0); visibility: visible; transition: transform .28s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
  .vd-head { display: flex; align-items: center; justify-content: space-between; height: 56px; flex-shrink: 0; padding: 0 8px 0 18px; background: var(--color-surface); border-bottom: 1px solid var(--color-border); font-weight: 700; font-size: 15px; }
  @media (min-width: 768px) { .vd-head { height: 64px; } }
  .vd-close { display: grid; place-items: center; width: 38px; height: 38px; border: none; border-radius: var(--radius-pill); background: none; color: var(--color-muted); font-size: 18px; }
  .vd-close:hover { background: var(--color-sunken); color: var(--color-fg); }
  .vd-body { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 18px 28px; }
  .vd-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .vd-logo { width: 112px; height: 112px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); display: grid; overflow: hidden; place-items: center; padding: 3px; box-shadow: var(--shadow-card); }
  .vd-logo img { width: 100%; height: 100%; object-fit: contain; }
  .vd-title { font-size: 22px; font-weight: 700; margin-top: 14px; word-break: break-word; }
  .vd-tags { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
  .vd-tag { border-radius: var(--radius-pill); background: var(--color-sunken); border: 1px solid var(--color-border); padding: 3px 10px; font-size: 12px; font-weight: 700; color: var(--color-muted); }
  .vd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .vd-stat { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 12px 14px; }
  .vd-stat .l { font-size: 12px; font-weight: 700; color: var(--color-muted); }
  .vd-stat .v { font-size: 24px; font-weight: 700; margin-top: 2px; }
  .vd-stat.reb .v { color: var(--color-ok); }
  .vd-stat.vol .v { color: var(--color-link); }
  .vd-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--color-muted); margin: 22px 0 8px; }
  .vd-text { font-size: 14.5px; line-height: 1.55; color: var(--color-fg); white-space: pre-line; }
  .vd-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
  .vd-btn { display: block; width: 100%; text-align: center; text-decoration: none; border: none; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 14.5px; padding: 12px; border-radius: var(--radius-sm); }
  .vd-btn.secondary { background: var(--color-surface); color: var(--color-link); border: 1px solid var(--color-border-strong); }
  .vd-modal { position: absolute; inset: 0; z-index: 5; display: none; align-items: center; justify-content: center; padding: 16px; background: var(--color-overlay); }
  .vd-modal.open { display: flex; }
  .vendor-card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 14px; display: flex; gap: 12px; }
  .vendor-logo { width: 44px; height: 44px; border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--color-border); flex-shrink: 0; display: grid; place-items: center; font-weight: 700; color: var(--color-subtle); font-size: 15px; overflow: hidden; padding: 4px; }
  .vendor-name { font-weight: 700; font-size: 14.5px; }
  .vendor-desc { font-size: 12.5px; color: var(--color-muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .vendor-meta { display: flex; gap: 10px; align-items: center; margin-top: 8px; font-size: 12.5px; }
  .vendor-meta .vol { color: var(--color-link); font-weight: 700; }
  .vendor-meta .reb { color: var(--color-ok); font-weight: 700; }
  .vendor-meta a { color: var(--color-fg); text-decoration: underline; margin-left: auto; font-size: 12px; }
  .denom-row { display: flex; align-items: center; justify-content: space-between; }
  .denom-row .amt { font-size: 17px; font-weight: 700; }

  /* ---------- TEAM ---------- */
  .team-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
  .team-head .lvl { position: relative; display: inline-block; }
  .team-head .lvl > button { border: none; background: none; padding: 0; font: inherit; color: var(--color-link); font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
  .level-menu { display: none; position: absolute; top: 100%; left: 0; margin-top: 6px; background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); width: 100%; min-width: 0; max-height: 260px; overflow-y: auto; scrollbar-width: none; z-index: 15; padding: 4px 0; list-style: none; margin-left: 0; }
  .level-menu::-webkit-scrollbar { display: none; }
  .level-menu.open { display: block; }
  .team-head .lvl > button .chev, .country-btn .chev { transition: transform .15s; }
  #levelBtn.open .chev, #countryChev.up .chev { transform: rotate(180deg); }
  #countryChev { display: inline-flex; }
  .level-menu li { list-style: none; }
  .level-menu button { width: 100%; border: none; background: none; padding: 10px 2px; text-align: center; font-size: 14px; font-weight: 700; color: var(--color-fg); cursor: pointer; white-space: nowrap; }
  .level-menu button:hover { background: var(--color-sunken); }
  .level-menu button.active { background: var(--color-primary-soft); color: var(--color-link); }
  .team-head .totals { text-align: right; }
  .team-head .totals .l { font-size: 11px; color: var(--color-subtle); text-transform: uppercase; }
  .team-head .totals .v { font-weight: 700; font-size: 17px; }
  .search-wrap { position: relative; margin-bottom: 10px; }
  .search-wrap .search-input { margin-bottom: 0; padding-inline-end: 84px; -webkit-appearance: none; appearance: none; }
  .search-wrap .search-input::-webkit-search-cancel-button { display: none; }
  .search-go, .search-clear { position: absolute; top: 3px; bottom: 3px; border: none; background: none; color: var(--color-primary); display: grid; place-items: center; width: 40px; border-radius: var(--radius-sm); cursor: pointer; }
  .search-go { inset-inline-end: 3px; }
  .search-clear { inset-inline-end: 43px; color: var(--color-muted); font-size: 14px; }
  .search-go:hover, .search-clear:hover { background: var(--color-border); }
  .search-input { width: 100%; border: 1px solid var(--color-border); background: var(--color-sunken); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; font-family: inherit; margin-bottom: 10px; color: var(--color-fg); }
  .country-bar { position: relative; display: flex; align-items: center; gap: 8px; background: var(--color-surface); box-shadow: var(--shadow-card); border-radius: var(--radius-sm); padding: 6px 6px 6px 0; margin-bottom: 10px; }
  .country-bar .cb-main { flex: 1; min-width: 0; border: none; background: none; text-align: start; padding: 6px 0 6px 16px; font-size: 13px; font-weight: 700; color: var(--color-fg); }
  .country-bar .cb-city { flex: none; max-width: 42%; display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--color-border-strong); background: var(--color-sunken); color: var(--color-fg); border-radius: var(--radius-pill); padding: 6px 10px; font-size: 12.5px; font-weight: 700; }
  .country-bar .cb-city span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .country-bar .cb-city.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
  .country-bar .cb-chev { flex: none; width: 32px; height: 32px; border: none; background: none; color: inherit; display: grid; place-items: center; }
  .city-menu { display: none; position: absolute; top: 100%; inset-inline-end: 0; margin-top: 6px; width: min(100%, 300px); max-height: 300px; overflow-y: auto; background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-card), 0 0 0 1px var(--color-border); z-index: 25; }
  .city-menu.open { display: block; }
  .city-menu button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; border: none; border-top: 1px solid var(--color-border); background: none; color: var(--color-fg); padding: 11px 14px; font-size: 14px; font-weight: 600; text-align: start; }
  .city-menu button:first-child { border-top: none; }
  .city-menu button.on { color: var(--color-link); background: var(--color-primary-soft); }
  .city-menu .cnt { color: var(--color-muted); font-weight: 600; font-size: 13px; }
  .country-btn { display: flex; width: 100%; align-items: center; justify-content: space-between; border: none; background: var(--color-surface); box-shadow: var(--shadow-card); border-radius: var(--radius-sm); padding: 12px 16px; font-size: 13px; font-weight: 700; text-align: left; margin-bottom: 10px; }
  .country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(90px, calc((100% - 40px) / 6)), 1fr)); gap: 8px; margin-bottom: 10px; }
  .country-chip { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; row-gap: 4px; align-content: start; align-items: center; justify-items: start; text-align: start; border: none; background: var(--color-surface); box-shadow: var(--shadow-card); border-radius: var(--radius-sm); padding: 7px 8px 8px; font-size: 13px; font-weight: 700; min-width: 0; }
  .country-chip.active { background: var(--color-primary); color: #fff; }
  .country-chip .flag { grid-column: 1; grid-row: 1; display: block; width: 32px; height: 24px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / 14%); flex-shrink: 0; }
  .country-chip .flag .flag-img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .country-chip .flag:has(.fb) { box-shadow: none; border-radius: 0; overflow: visible; }
  .country-chip .flag .flag-img.fb { object-fit: contain; }
  .country-chip .cnt { grid-column: 2; grid-row: 1; align-self: center; font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; }
  .country-chip .cname { grid-column: 1 / -1; grid-row: 2; max-width: 100%; font-size: 11px; font-weight: 500; line-height: 1.15; color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .country-chip.active .cname { color: rgb(255 255 255 / 88%); }
  .team-actions { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .info-btn { margin-inline-start: auto; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: none; border-radius: var(--radius-pill); background: none; color: var(--color-link); cursor: pointer; }
  .info-btn:hover { background: var(--color-sunken); }
  .team-actions button { border: none; border-radius: var(--radius-sm); padding: 8px 8px; font-weight: 700; font-size: 13px; text-align: center; line-height: 1.3; }
  .act-primary { background: #7f0037; color: #fff; }
  .act-secondary { background: var(--color-surface); box-shadow: var(--shadow-card); color: var(--color-fg); }
  .member-card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); margin-bottom: 8px; overflow: hidden; }
  .member-row-top { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
  .member-badge { width: 38px; height: 38px; border-radius: 10px; background: var(--color-primary); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; flex-shrink: 0; border: none; }
  .member-badge.zero { background: var(--color-sunken); color: var(--color-subtle); }
  .member-name-btn { flex: 1; min-width: 0; text-align: left; border: none; background: none; }
  .member-name { font-weight: 700; font-size: 14.5px; }
  .member-nick { color: var(--color-link); font-size: 12.5px; margin-left: 6px; }
  .member-meta { font-size: 12px; color: var(--color-muted); margin-top: 2px; }
  .member-vol { margin-left: auto; font-weight: 700; white-space: nowrap; border: none; background: none; }
  .member-detail { display: none; border-top: 1px solid var(--color-border); padding: 12px 16px 16px; font-size: 13.5px; }
  .member-detail.open { display: block; }
  .member-detail .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted); margin-top: 10px; }
  .member-detail .k:first-child { margin-top: 0; }
  .contact-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--color-sunken); border-radius: var(--radius-pill); padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--color-link); margin: 4px 6px 0 0; text-decoration: none; }
  .msg-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; text-decoration: none; }
  .mini-table { border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; font-size: 12.5px; margin-top: 8px; }
  .mini-table .row { display: grid; grid-template-columns: 48px minmax(0,1fr) minmax(0,1.4fr); column-gap: 8px; padding: 8px 12px; }
  .mini-table .row .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .member-report li { display: flex; justify-content: space-between; gap: 12px; }
  .member-report li .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mini-table .head { background: var(--color-primary-soft); color: var(--color-link); font-weight: 700; }
  .mini-table .row + .row { border-top: 1px solid var(--color-border); }
  .note-box { width: 100%; border: 1px solid var(--color-border); background: var(--color-sunken); border-radius: var(--radius-sm); padding: 8px; font-size: 13px; margin-top: 4px; resize: vertical; }
  .contact-form-box { margin-top: 8px; background: var(--color-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px; }
  .invite-tile { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); margin-bottom: 8px; overflow: hidden; }
  .invite-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
  .invite-status { border-radius: var(--radius-pill); padding: 3px 10px; font-size: 11.5px; font-weight: 700; }
  .invite-status.pending { background: var(--color-primary-soft); color: var(--color-link); }
  .invite-status.registered { background: var(--color-sunken); color: var(--color-ok); }
  .invite-detail { display: none; border-top: 1px solid var(--color-border); padding: 12px 16px; }
  .invite-detail.open { display: block; }
  .bonus-table { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: var(--color-surface); }
  .bonus-head { display: grid; grid-template-columns: 56px minmax(96px, 1fr) 32px minmax(88px, 1fr); gap: 8px; padding: 10px 12px; font-size: 13px; color: var(--color-muted); }
  .bonus-row { display: grid; grid-template-columns: 56px minmax(96px, 1fr) 32px minmax(88px, 1fr); align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--color-border); }
  .bonus-row.active { background: rgba(14,125,147,0.08); }
  .bonus-head .num, .bonus-row .num { text-align: right; font-variant-numeric: tabular-nums; }
  .bonus-head .vol, .bonus-row .vol { padding-right: 14px; }
  @media (max-width: 360px) {
    .bonus-head, .bonus-row { grid-template-columns: 40px minmax(84px, 1fr) 28px minmax(80px, 1fr); gap: 6px; padding-left: 8px; padding-right: 8px; }
    .bonus-head .vol, .bonus-row .vol { padding-right: 8px; }
    #bonusTotal { font-size: 18px !important; }
  }
  @media (max-width: 340px) {
    .bonus-head, .bonus-row { grid-template-columns: 36px minmax(80px, 1fr) 24px minmax(70px, 1fr); gap: 4px; }
    .bonus-badge { width: 26px; height: 26px; }
    #bonusTotal { font-size: 16px !important; }
  }
  .bonus-badge { width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-sunken); color: var(--color-subtle); display: grid; place-items: center; font-weight: 700; font-size: 12.5px; }
  .bonus-row.active .bonus-badge { background: var(--color-primary); color: #fff; }
  .group-mentee { font-size: 13px; color: var(--color-fg); margin-top: 4px; }

  /* ---------- overlay (fullscreen inside phone) ---------- */
  .overlay-panel { position: absolute; top: 56px; left: 0; right: 0; bottom: 0; z-index: 30; display: none; flex-direction: column; background: var(--color-bg); }
  @media (min-width: 768px) { .overlay-panel { top: 64px; } }
  .overlay-panel.active { display: flex; }
  .panel { position: relative; overflow: hidden; }

  /* profile */
  .profile-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary); color: #fff; display: grid; place-items: center; font-size: 20px; font-weight: 700; margin: 4px auto 0; }
  .profile-name { text-align: center; font-size: 17px; font-weight: 700; margin-top: 10px; }
  .profile-id { text-align: center; font-size: 13px; color: var(--color-muted); }
  .profile-menu { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); overflow: hidden; }
  .profile-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; border: none; background: none; padding: 12px 14px; border-top: 1px solid var(--color-border); font-size: 14px; font-weight: 700; text-align: left; }
  .profile-menu button:first-child { border-top: none; }
  .profile-menu .pm-item + .pm-item { border-top: 1px solid var(--color-border); }
  .profile-menu .pm-item > button { border-top: none; }
  .profile-menu .pm-chev { display: inline-block; transition: transform .2s; }
  .profile-menu .pm-item.open .pm-chev { transform: rotate(90deg); }
  .profile-menu .pm-cur { margin-left: auto; margin-right: 10px; color: var(--color-muted); font-weight: 400; font-size: 13px; }
  .lang-panel { background: var(--color-sunken); border-top: 1px solid var(--color-border); }
  .lang-panel button { display: flex !important; justify-content: space-between; border-top: 1px solid var(--color-border) !important; font-weight: 600 !important; }
  .lang-panel button:first-child { border-top: none !important; }
  .lang-panel button.on { color: var(--color-primary-hover); }
  .legal-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
  .legal-btns button { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-link); border-radius: var(--radius-pill); padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
  .legal-btns button:hover { border-color: var(--color-primary); }
  .legal-btns-start { justify-content: flex-start; margin-top: 0; }
  .consent-block { display: none; margin-top: 16px; }
  body.unverified .consent-block { display: block; }
  .consent-row { display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 8px; font-size: 13px; line-height: 1.45; cursor: pointer; }
  .consent-row input { width: 20px; height: 20px; margin: 1px 0 0; flex-shrink: 0; accent-color: var(--color-primary); }
  .legal-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(28 43 46 / 52%); }
  .legal-modal[hidden] { display: none; }
  .legal-sheet { width: 100%; max-width: 640px; max-height: min(88dvh, 780px); display: flex; flex-direction: column; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: 0 24px 64px rgb(28 43 46 / 30%); overflow: hidden; }
  .legal-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 18px; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
  .legal-head h2 { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; }
  .legal-head button { border: none; background: none; width: 40px; height: 40px; border-radius: var(--radius-pill); color: var(--color-muted); font-size: 16px; cursor: pointer; }
  .legal-sheet.wide { max-width: 740px; }
  .legal-sheet .legal-panel { display: block; flex: 1; min-height: 0; max-height: none; background: var(--color-surface); border-top: none; padding: 4px 18px 20px; }
  .legal-panel { display: none; padding: 4px 16px 16px; background: var(--color-sunken); border-top: 1px solid var(--color-border); max-height: 60vh; overflow-y: auto; font-size: 13.5px; line-height: 1.55; }
  .pm-item.open .legal-panel { display: block; }
  .legal-panel h4 { font-size: 14px; margin: 16px 0 6px; color: var(--color-primary-hover); }
  .legal-panel h5 { font-size: 13.5px; margin: 12px 0 4px; }
  .legal-panel p { margin: 8px 0; }
  .legal-panel p.lg-sub { color: var(--color-muted); margin: 6px 0; }
  .legal-panel ul, .legal-panel ol { margin: 6px 0; padding-left: 22px; }
  .legal-panel li { margin: 3px 0; }
  .ref-m { display: grid; grid-template-columns: 56px repeat(10, minmax(52px, 1fr)); gap: 3px; margin: 0; text-align: center; font-variant-numeric: tabular-nums; direction: ltr; }
  .ref-m .rm-corner { align-self: stretch; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: var(--color-fg); position: sticky; left: 0; background: var(--color-surface); z-index: 1; }
  .ref-m .rm-h { white-space: nowrap; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 6px 2px; background: #25839d; color: #fff; font-weight: 700; font-size: 11px; line-height: 1.25; }
  .ref-m .rm-h small { font-size: .78em; font-weight: 600; }
  .ref-m .rm-l { align-self: center; font-weight: 700; font-size: 15px; color: var(--color-fg); position: sticky; left: 0; background: var(--color-surface); z-index: 1; }
  .ref-m .rm-v { display: grid; place-items: center; height: 28px; font-weight: 700; font-size: 14px; color: var(--color-doc-red); white-space: nowrap; }
  .ref-t { display: grid; grid-template-columns: .6fr 1.3fr 1.3fr; gap: 2px; margin: 12px auto; max-width: 340px; text-align: center; font-variant-numeric: tabular-nums; direction: ltr; }
  .ref-t .rt-h { display: grid; place-items: center; padding: 6px 4px; background: #25839d; color: #fff; font-weight: 700; font-size: 12.5px; line-height: 1.2; }
  .ref-t .rt-h:first-child { background: none; color: var(--color-fg); font-size: 13px; }
  .ref-t .rt-l, .ref-t .rt-n { font-weight: 700; color: var(--color-fg); padding: 5px 4px; font-size: 13.5px; }
  .ref-t .rt-b { font-weight: 700; color: var(--color-doc-red); padding: 5px 4px; font-size: 13.5px; }
  .lg-scroll { overflow-x: auto; margin: 8px 0; -webkit-overflow-scrolling: touch; }
  .lg-scroll table { margin: 0; }
  .legal-panel table.lg-wide { width: max-content; min-width: 100%; }
  .legal-panel table.lg-wide th, .legal-panel table.lg-wide td { white-space: nowrap; text-align: center; padding: 6px 10px; }
  .legal-panel table.lg-wide th:first-child, .legal-panel table.lg-wide td:first-child { position: sticky; left: 0; background: var(--color-surface); font-weight: 700; z-index: 1; }
  .legal-panel table.lg-wide th:first-child { background: var(--color-primary-soft); }
  .legal-panel table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin: 8px 0; background: var(--color-surface); }
  .legal-panel th, .legal-panel td { border: 1px solid var(--color-border); padding: 6px 8px; text-align: left; vertical-align: top; }
  .legal-panel th { background: var(--color-primary-soft); color: var(--color-primary-hover); }
  .legal-panel .lg-box { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 10px; }
  .profile-menu button.danger { color: var(--color-danger); }

  /* id card */
  .idcard-modal { background: var(--color-surface); border-radius: var(--radius-lg); padding: 28px 24px; text-align: center; }
  .idcard-modal .name { font-size: 13px; color: var(--color-muted); }
  .idcard-modal .id2 { font-size: 20px; font-weight: 700; letter-spacing: 0.05em; margin: 6px 0 16px; }
  .idcard-modal .btn { margin: 18px auto 0; display: flex; align-items: center; gap: 8px; background: var(--color-primary); color: #fff; border: none; padding: 11px 20px; border-radius: var(--radius-pill); font-weight: 700; font-size: 13px; }
  .idcard-modal .btn .ci { display: inline-grid; place-items: center; }
  .idcard-modal .btn { justify-content: center; transition: background .15s, color .15s, border-color .15s; border: 1px solid transparent; }
  .idcard-modal .btn.copied { background: var(--color-surface); color: var(--color-fg); border-color: var(--color-border-strong); }
  .idcard-modal .hint { font-size: 12px; color: var(--color-muted); margin-top: 10px; }
  .idcard-intro { font-size: 13px; color: var(--color-muted); text-align: center; margin-bottom: 16px; line-height: 1.5; }
  .idcard-compact { width: 100%; border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-md); padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; }
  .idcard-compact-bars { flex: none; min-width: 0; height: 40px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .idcard-compact-bars svg { max-width: none; }
  .idcard-compact-id { flex: 1; min-width: 0; text-align: center; font-weight: 700; font-size: 14px; color: var(--color-fg); line-height: 1.2; }
  .idcard-compact-chev { color: var(--color-muted); transition: transform .18s; flex-shrink: 0; display: grid; place-items: center; width: 20px; height: 20px; }
  .idcard-compact-chev svg { display: block; }
  /* ID-картка на Home — лише для смартфона; на ПК (від 768px) її немає, вона лишається в меню профілю */
  @media (min-width: 768px) { #homeIdAccordion { display: none; } }
  .idcard-accordion.open .idcard-compact-chev { transform: rotate(180deg); }
  .idcard-accordion.open .idcard-compact-bars { visibility: hidden; }
  .idcard-expanded { display: none; margin-top: 12px; }
  .idcard-accordion.open .idcard-expanded { display: block; }

  /* history table */
  .history-table-wrap { overflow-x: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-card); background: var(--color-surface); margin-top: 10px; }
  table.history-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 13.5px; text-align: left; }
  table.history-table th { font-size: 11.5px; color: var(--color-muted); padding: 10px 12px; }
  table.history-table .num, .sell-table th.num, .pay-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
  table.history-table td { padding: 10px 12px; border-top: 1px solid var(--color-border); }

  /* personal data */
  .phone-block { background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); padding: 10px; margin-bottom: 10px; }
  .phone-row { display: flex; gap: 8px; align-items: flex-end; }
  .phone-row .field { flex: 1; margin-bottom: 0; }
  .phone-remove { border: none; background: none; color: var(--color-danger); width: 40px; height: 40px; }
  .msg-toggles { display: flex; gap: 8px; margin-top: 8px; }
  .msg-toggle { width: 36px; height: 36px; border-radius: 50%; border: none; display: grid; place-items: center; background: none; transition: opacity .15s; }
  .msg-toggle.on { color: #fff; }

  /* messages */
  .message-card { background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 14px; margin-bottom: 10px; }
  .message-title { font-weight: 700; font-size: 14px; }
  .message-body { font-size: 13.5px; color: var(--color-muted); margin-top: 4px; }
  .message-date { font-size: 11.5px; color: var(--color-subtle); margin-top: 4px; }
  .message-expand { border-top: 1px solid var(--color-border); margin-top: 10px; padding-top: 10px; }

  /* toast */
  .toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: var(--color-fg); color: #fff; font-size: 13px; padding: 10px 16px; border-radius: var(--radius-pill); z-index: 100; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: 90vw; text-align: center; }
  @media (min-width: 768px) { .toast { bottom: 24px; } }
  .toast.show { opacity: 1; }

  /* ---------- RTL (іврит) ---------- */
  html[dir="rtl"] body { text-align: start; }
  html[dir="rtl"] .login-pass-wrap button { right: auto; left: 8px; }
  html[dir="rtl"] .top-header .icons { margin-left: 0; margin-right: auto; }
  html[dir="rtl"] .icon-btn .dot { right: auto; left: 6px; }
  html[dir="rtl"] .side-nav button, html[dir="rtl"] .tx-row, html[dir="rtl"] .history-card, html[dir="rtl"] .points-row,
  html[dir="rtl"] .spec-tile, html[dir="rtl"] .member-name-btn,
  html[dir="rtl"] .sell-table th, html[dir="rtl"] table.history-table, html[dir="rtl"] .legal-panel th, html[dir="rtl"] .legal-panel td,
  html[dir="rtl"] .profile-menu button, html[dir="rtl"] .level-menu button { text-align: right; }
  html[dir="rtl"] .level-menu button { text-align: center; }
  html[dir="rtl"] .points-row .chev { margin-left: 0; margin-right: 6px; }
  html[dir="rtl"] .sell-table:not(.pay-table) td.reb { text-align: right; }
  html[dir="rtl"] .team-head .totals { text-align: left; }
  html[dir="rtl"] .sale-head .vd-close { margin-right: 0; margin-left: -8px; }
  html[dir="rtl"] .sale-input .ico, html[dir="rtl"] .sale-input .cur { right: auto; left: 16px; }
  html[dir="rtl"] .scan-btn { right: auto; left: 4px; }
  html[dir="rtl"] .sale-input input.card-num { padding: 0 16px 0 52px; }
  html[dir="rtl"] .vendor-drawer { right: auto; left: 0; transform: translateX(-100%); }
  html[dir="rtl"] .vendor-drawer.open { transform: translateX(0); }
  html[dir="rtl"] .vendor-meta a { margin-left: 0; margin-right: auto; }
  html[dir="rtl"] .level-menu { left: auto; right: 0; }
  html[dir="rtl"] .member-nick { margin-left: 0; margin-right: 6px; }
  html[dir="rtl"] .member-vol { margin-left: 0; margin-right: auto; }
  html[dir="rtl"] .profile-menu .pm-cur { margin-left: 10px; margin-right: auto; }
  html[dir="rtl"] .legal-panel ul, html[dir="rtl"] .legal-panel ol { padding-left: 0; padding-right: 22px; }
  html[dir="rtl"] .back, html[dir="rtl"] .gl-ar, html[dir="rtl"] .history-card > span, html[dir="rtl"] .pager button svg, html[dir="rtl"] .pm-chev { transform: scaleX(-1); }
  html[dir="rtl"] .profile-menu .pm-item.open .pm-chev { transform: scaleX(-1) rotate(90deg); }
  html[dir="rtl"] .tabular, html[dir="rtl"] .sell-id, html[dir="rtl"] .num, html[dir="rtl"] .n, html[dir="rtl"] .tx-amount, html[dir="rtl"] .idcard-modal .id2 { direction: ltr; unicode-bidi: isolate; }
  html[dir="rtl"] .donut .center b, html[dir="rtl"] .donut .center span { direction: ltr; unicode-bidi: isolate; }
  html[dir="rtl"] .barcode-bars, html[dir="rtl"] #homeIdQr { direction: ltr; }