/* PoshteKhatty — Gold trading mobile app
   Brand: deep forest green + gold + ivory */

/* Fonts are self-hosted (fonts/vazirmatn.css) — the previous Google Fonts
   @import was dead weight: blocked by CSP and a privacy leak. Cormorant
   Garamond gracefully falls back to the system serif for numerals. */

:root {
  --green-900: #072014;
  --green-800: #0d2a1c;
  --green-700: #133a28;
  --green-600: #1c4f37;
  --green-500: #266547;
  --gold-600: #b8891f;
  --gold-500: #d4a537;
  --gold-400: #e6bd5a;
  --gold-300: #f1d488;
  --gold-200: #f7e4ad;
  --gold-100: #fbf1d3;
  --ivory: #f7f3ea;
  --paper: #fbf8f1;
  --ink: #0b1410;
  --ink-2: #2a3a32;
  --ink-3: #5a6b62;
  --line: rgba(13, 42, 28, 0.10);
  --line-strong: rgba(13, 42, 28, 0.18);
  --danger: #b8423b;
  --success: #2f7a51;
  --warn: #b97a17;
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

.pk-app {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-feature-settings: "ss01" on, "ss02" on;
  direction: rtl;
  color: var(--ink);
  background: var(--paper);
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.pk-app .num, .pk-app .latin {
  font-family: 'Cormorant Garamond', 'Vazirmatn', serif;
  font-feature-settings: "lnum" on;
}

/* Phone status bar */
.pk-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 22px 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.pk-status.dark { color: var(--ivory); }
.pk-status .icons { display: flex; gap: 5px; align-items: center; }

/* Top header bar */
.pk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 16px;
}
.pk-header .pk-greet { font-size: 13px; color: var(--ink-3); }
.pk-header .pk-name { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.pk-header .pk-avatar {
  width: 42px; height: 42px; border-radius: 14px;
  background: linear-gradient(135deg, var(--green-700), var(--green-900));
  display: grid; place-items: center;
  color: var(--gold-400); font-weight: 700; font-size: 16px;
  border: 1px solid var(--gold-500);
}

/* Generic card */
.pk-card {
  background: #fff;
  border-radius: 22px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(13,42,28,0.04), 0 8px 24px -16px rgba(13,42,28,0.18);
}

.pk-divider { height: 1px; background: var(--line); }

/* Buttons */
.pk-btn {
  height: 52px;
  border-radius: 16px;
  font-family: 'Vazirmatn', sans-serif;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.pk-btn:active { transform: translateY(1px); }
.pk-btn-primary {
  background: var(--green-800);
  color: var(--gold-300);
  border: 1px solid var(--green-700);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 18px -10px rgba(13,42,28,0.5);
}
.pk-btn-primary:hover { background: var(--green-700); }
.pk-btn-gold {
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500));
  color: var(--green-900);
  box-shadow: 0 8px 16px -10px rgba(212,165,55,0.6), inset 0 1px 0 rgba(255,255,255,0.5);
}
.pk-btn-ghost {
  background: transparent; color: var(--green-800);
  border: 1px solid var(--line-strong);
}
.pk-btn-danger { background: rgba(184,66,59,0.08); color: var(--danger); border: 1px solid rgba(184,66,59,0.2); }

/* Inputs */
.pk-input {
  width: 100%;
  height: 52px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line-strong);
  padding: 0 16px;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  text-align: right;
}
.pk-input:focus { border-color: var(--green-700); box-shadow: 0 0 0 4px rgba(13,42,28,0.06); }
.pk-input.code-cell {
  text-align: center; letter-spacing: 0.06em;
  font-family: 'Cormorant Garamond', serif; font-size: 26px; font-weight: 600;
}
.pk-label { font-size: 12px; color: var(--ink-3); margin-bottom: 6px; display: block; }

/* Pills / chips */
.pk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: var(--ivory); color: var(--ink-2);
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--line);
}
.pk-chip.gold { background: rgba(212,165,55,0.12); color: var(--gold-500); border-color: rgba(212,165,55,0.3); }
.pk-chip.green { background: rgba(38,101,71,0.10); color: var(--green-700); border-color: rgba(38,101,71,0.2); }
.pk-chip.red { background: rgba(184,66,59,0.10); color: var(--danger); border-color: rgba(184,66,59,0.2); }
.pk-chip.amber { background: rgba(185,122,23,0.12); color: var(--warn); border-color: rgba(185,122,23,0.25); }

/* Bottom tab bar */
.pk-tabbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0));
}
.pk-tabbar .item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  justify-content: center; min-width: 0;
  padding: 8px 4px; font-size: 10.5px; color: var(--ink-3); font-weight: 500;
  cursor: pointer;
}
.pk-tabbar .item.active { color: var(--green-800); }
.pk-tabbar .item.active .dot { background: var(--gold-500); }
.pk-tabbar .item .dot {
  width: 4px; height: 4px; border-radius: 999px; background: transparent;
  margin-top: 2px;
}

/* Price ticker */
.pk-ticker {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--green-800) 0%, var(--green-900) 100%);
  border-radius: 22px;
  color: var(--ivory);
  position: relative;
  overflow: hidden;
}
.pk-ticker::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 0%, rgba(212,165,55,0.18), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(212,165,55,0.10), transparent 40%);
  pointer-events: none;
}
.pk-ticker .label { font-size: 11px; color: var(--gold-300); opacity: 0.85; }
.pk-ticker .value { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 28px; color: var(--gold-300); margin-top: 2px; letter-spacing: 0.01em;}
.pk-ticker .delta { font-size: 12px; color: #6fce9b; margin-top: 2px; }
.pk-ticker .delta.down { color: #e58a83; }

/* Sparkline */
.pk-spark { width: 96px; height: 44px; }

/* Action tile (Buy/Sell) */
.pk-action-tile {
  position: relative;
  border-radius: 22px;
  padding: 18px;
  height: 132px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform .2s ease;
}
.pk-action-tile:hover { transform: translateY(-2px); }
.pk-action-tile.buy {
  background: linear-gradient(165deg, var(--green-700), var(--green-900));
  color: var(--gold-200);
  border-color: var(--green-700);
}
.pk-action-tile.sell {
  background: linear-gradient(165deg, var(--gold-300), var(--gold-500));
  color: var(--green-900);
  border-color: var(--gold-500);
}
.pk-action-tile .title { font-size: 18px; font-weight: 700; }
.pk-action-tile .sub { font-size: 11px; opacity: 0.8; margin-top: 2px; }
.pk-action-tile .arrow {
  width: 38px; height: 38px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
}
.pk-action-tile.sell .arrow { background: rgba(13,42,28,0.10); border-color: rgba(13,42,28,0.16); }

/* Coin grid item */
.pk-coin {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.pk-coin:hover { border-color: var(--gold-400); transform: translateY(-1px); }
.pk-coin.selected { border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(212,165,55,0.18); }
.pk-coin .face {
  width: 44px; height: 44px; border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, var(--gold-200), var(--gold-500) 70%, #a37a1c 100%);
  border: 2px solid var(--gold-500);
  display: grid; place-items: center;
  font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 12px;
  color: var(--green-900);
  box-shadow: inset 0 0 8px rgba(255,255,255,0.4), 0 2px 6px rgba(212,165,55,0.3);
}
.pk-coin .name { font-size: 13px; font-weight: 600; color: var(--ink); }
.pk-coin .price { font-family: 'Cormorant Garamond', serif; font-size: 16px; font-weight: 600; color: var(--green-800); }
.pk-coin .unit { font-size: 10px; color: var(--ink-3); }

/* Order row */
.pk-order {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
}
.pk-order .icon-box {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--ivory);
  flex-shrink: 0;
}
.pk-order.buy .icon-box { background: rgba(38,101,71,0.10); color: var(--green-700); }
.pk-order.sell .icon-box { background: rgba(212,165,55,0.14); color: var(--gold-500); }
.pk-order .info { flex: 1; min-width: 0; }
.pk-order .info .t { font-size: 14px; font-weight: 600; color: var(--ink); }
.pk-order .info .s { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.pk-order .amount { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 16px; color: var(--green-800); }

/* Bottom sheet */
.pk-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--paper);
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  padding: 12px 18px 24px;
  box-shadow: 0 -20px 60px -30px rgba(13,42,28,0.4);
  border-top: 1px solid var(--line);
}
.pk-sheet .grabber {
  width: 38px; height: 4px; border-radius: 4px; background: var(--line-strong);
  margin: 0 auto 10px;
}

/* Loader (motion mark) */
.pk-loader-stage {
  display: grid; place-items: center; gap: 18px;
  width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 40%, var(--green-800), var(--green-900) 70%);
  color: var(--gold-300);
}
.pk-loader-mark { position: relative; width: 130px; height: 130px; }
.pk-loader-mark .ring {
  position: absolute; inset: 0;
  border-radius: 999px;
  border: 1.5px solid rgba(212,165,55,0.18);
}
.pk-loader-mark .arc {
  position: absolute; inset: 0;
  border-radius: 999px;
  border: 1.5px solid transparent;
  border-top-color: var(--gold-400);
  border-right-color: var(--gold-400);
  animation: pk-spin 1.6s cubic-bezier(.6,.1,.4,.9) infinite;
}
.pk-loader-mark .arc.b {
  inset: 12px;
  border-top-color: transparent;
  border-bottom-color: var(--gold-300);
  border-left-color: var(--gold-300);
  animation: pk-spin 2.2s cubic-bezier(.6,.1,.4,.9) infinite reverse;
}
.pk-loader-mark .core {
  position: absolute; inset: 28px; border-radius: 16px;
  background:
    linear-gradient(135deg, var(--gold-300), var(--gold-500));
  box-shadow: 0 6px 24px rgba(212,165,55,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  display: grid; place-items: center;
  font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 22px; color: var(--green-900);
  letter-spacing: -0.02em;
}
@keyframes pk-spin {
  to { transform: rotate(360deg); }
}
.pk-loader-stage .word {
  font-family: 'Cormorant Garamond', serif; font-size: 22px; letter-spacing: 0.02em;
}
.pk-loader-stage .tag { font-size: 12px; opacity: 0.7; }

/* Wordmark inline */
.pk-wordmark {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: 'Cormorant Garamond', serif;
}
.pk-wordmark .glyph {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--green-900);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
}

/* Stat row */
.pk-stat {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
}
.pk-stat .k { font-size: 12px; color: var(--ink-3); }
.pk-stat .v { font-size: 13px; font-weight: 600; color: var(--ink); }
.pk-stat .v.num { font-family: 'Cormorant Garamond', serif; font-size: 16px; }

/* Admin desktop */
.pk-admin {
  font-family: 'Vazirmatn', sans-serif;
  direction: rtl;
  background: var(--paper);
  color: var(--ink);
  height: 100%;
  display: flex;
  overflow: hidden;
}
.pk-admin .sidebar {
  width: 220px;
  background: var(--green-900);
  color: var(--ivory);
  padding: 22px 16px;
  display: flex; flex-direction: column; gap: 4px;
  flex-shrink: 0;
}
.pk-admin .sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 22px;
  border-bottom: 1px solid rgba(212,165,55,0.18);
  margin-bottom: 14px;
}
.pk-admin .sidebar .brand .name { font-family: 'Cormorant Garamond', serif; font-size: 18px; color: var(--gold-300); }
.pk-admin .sidebar .nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  color: rgba(247,243,234,0.7);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  width: 100%;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: right;
}
.pk-admin .sidebar .nav-item:hover { background: rgba(212,165,55,0.06); color: var(--ivory); }
.pk-admin .sidebar .nav-item.active { background: rgba(212,165,55,0.12); color: var(--gold-300); }
.pk-admin .main { flex: 1; padding: 28px 32px; overflow: auto; }
.pk-admin h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 600; margin: 0 0 4px;
}
.pk-admin .sub { font-size: 13px; color: var(--ink-3); margin-bottom: 22px; }

/* Match column */
.pk-match-col {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  min-height: 0;
  display: flex; flex-direction: column;
}
.pk-match-col .col-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.pk-match-col .col-head .t { font-weight: 700; font-size: 14px; }
.pk-match-col .col-head .c { font-size: 11px; color: var(--ink-3); }

/* Admin order card */
.pk-admin-order {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease;
}
.pk-admin-order:hover { border-color: var(--gold-400); }
.pk-admin-order.matched { border-color: rgba(212,165,55,0.55); background: rgba(212,165,55,0.04); }
.pk-admin-order .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pk-admin-order .client { font-weight: 600; font-size: 13px; }
.pk-admin-order .meta { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.pk-admin-order .qty { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 18px; color: var(--green-800); }
.pk-admin-order .row2 { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11px; color: var(--ink-3);}
.pk-admin-order .price-num { font-family: 'Cormorant Garamond', serif; font-size: 13px; color: var(--ink); }

/* Subtle scroll */
.pk-scroll::-webkit-scrollbar { width: 6px; }
.pk-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }

/* Invoice pdf */
.pk-invoice {
  font-family: 'Vazirmatn', sans-serif;
  direction: rtl;
  background: #fff;
  color: var(--ink);
  width: 100%; height: 100%;
  padding: 36px 40px;
  position: relative;
  overflow: hidden;
}
.pk-invoice::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(212,165,55,0.025) 0 2px, transparent 2px 14px);
  pointer-events: none;
}
.pk-invoice .stamp {
  position: absolute;
  bottom: 80px; left: 60px;
  width: 130px; height: 130px;
  border: 2px solid rgba(212,165,55,0.5);
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--gold-500);
  font-family: 'Cormorant Garamond', serif;
  font-size: 14px;
  text-align: center;
  transform: rotate(-12deg);
  opacity: 0.85;
}

.pk-invoice table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.pk-invoice th, .pk-invoice td {
  padding: 12px 10px; text-align: right; font-size: 12px;
}
.pk-invoice th {
  background: var(--green-900); color: var(--gold-300);
  font-weight: 500;
}
.pk-invoice tr:nth-child(even) td { background: rgba(212,165,55,0.04); }
.pk-invoice td { border-bottom: 1px solid var(--line); }
.pk-invoice .num { font-family: 'Cormorant Garamond', serif; font-size: 13px; }

/* Toast / banner */
.pk-banner {
  background: rgba(212,165,55,0.12);
  border: 1px solid rgba(212,165,55,0.3);
  color: var(--green-800);
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 12px;
  display: flex; align-items: center; gap: 10px;
}

/* Toggle pill (Buy / Sell) */
.pk-toggle {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--ivory);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px;
  position: relative;
}
.pk-toggle button {
  background: transparent; border: none;
  padding: 10px 0; font-family: inherit; font-weight: 600; font-size: 13px;
  color: var(--ink-3); cursor: pointer; border-radius: 10px;
  transition: color .2s ease;
}
.pk-toggle button.active { color: #fff; }
.pk-toggle .glider {
  position: absolute; top: 4px; bottom: 4px; width: calc(50% - 4px);
  background: var(--green-800);
  border-radius: 10px; transition: transform .3s cubic-bezier(.6,.05,.3,.95);
  z-index: 0;
}
.pk-toggle button { position: relative; z-index: 1; }
.pk-toggle.sell .glider { background: linear-gradient(180deg, var(--gold-400), var(--gold-500)); }
.pk-toggle.sell button.active { color: var(--green-900); }
.pk-toggle .glider.right { transform: translateX(-100%); }

/* Number stepper */
.pk-stepper {
  display: flex; align-items: center;
  background: #fff; border: 1px solid var(--line-strong);
  border-radius: 14px; height: 52px;
}
.pk-stepper button {
  width: 52px; height: 52px; border: none; background: transparent;
  font-size: 22px; cursor: pointer; color: var(--green-800);
}
.pk-stepper input {
  flex: 1; text-align: center; border: none; outline: none;
  font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 600;
  background: transparent; color: var(--ink);
}

/* Devices list */
.pk-device-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
}
.pk-device-row:last-child { border-bottom: none; }
.pk-device-row .icb {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--ivory); display: grid; place-items: center; color: var(--green-700);
}
.pk-device-row .info { flex: 1; }
.pk-device-row .t { font-size: 13px; font-weight: 600; }
.pk-device-row .s { font-size: 11px; color: var(--ink-3); }

/* Code badge */
.pk-code-badge {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 0.18em;
  font-size: 28px; font-weight: 600;
  color: var(--gold-300);
  background: rgba(13,42,28,0.92);
  border: 1px solid var(--gold-500);
  padding: 14px 18px;
  border-radius: 14px;
  text-align: center;
}

/* ── Print / PDF export ── */
@media print {
  .pk-no-print { display: none !important; }
  html, body { overflow: visible !important; background: #fff !important; height: auto !important; }
  #root { height: auto !important; overflow: visible !important; }
  .pk-invoice { box-shadow: none !important; border: none !important; min-height: 0 !important; }
}

/* ── Mobile fullscreen layout (real devices ≤ 480px) ── */
@media (max-width: 480px) {
  /* Use dynamic viewport height so Safari address bar doesn't clip content */
  .pk-app {
    height: calc(var(--dvh, 1vh) * 100);
  }

  /* Push content below the notch / dynamic island on real devices */
  .pk-header,
  .pk-app > div:first-child {
    padding-top: max(8px, env(safe-area-inset-top, 8px));
  }

  /* Tab bar: account for iPhone home indicator */
  .pk-tabbar {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
  }

  /* Action tiles: slightly shorter on small phones */
  .pk-action-tile {
    height: 116px;
  }

  /* Coin grid: smaller face icon to fit more info */
  .pk-coin .face {
    width: 36px; height: 36px;
  }

  /* Order rows: tighter on small screens */
  .pk-order {
    padding: 11px 12px;
  }

  /* Buttons: full-height touch targets already fine; loosen font slightly */
  .pk-btn { font-size: 14px; }

  /* Admin sidebar collapses to icon-only on narrow tablets (≤ 768px) */
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive web shell — the app is a real web application on every viewport.
   The old desktop "phone frame" presentation was removed; client screens render
   inside a centered column (.pk-web-frame) with the brand backdrop around it.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;
  /* bid status colors */
  --st-pending: #b97a17;
  --st-accepted: #2f7a51;
  --st-rejected: #b8423b;
  --st-countered: #2b5f8a;
  --st-neutral: #5a6b62;
}

.pk-web-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  display: flex;
  justify-content: center;
}
@media (min-width: 768px) {
  .pk-web-shell {
    background:
      radial-gradient(circle at 15% 0%, rgba(212,165,55,0.07), transparent 45%),
      radial-gradient(circle at 100% 100%, rgba(13,42,28,0.05), transparent 40%),
      var(--ivory);
    padding: 0 var(--sp-6);
  }
}
.pk-web-frame {
  width: 100%;
  height: 100vh;
  height: 100dvh;
  position: relative;
  background: var(--paper);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
  .pk-web-frame {
    /* A normal responsive content column, not a simulated device frame. */
    max-width: 1120px;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

/* Bid status badges */
.pk-status-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.pk-status-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor;
}
.pk-status-badge.pending   { color: var(--st-pending);   background: rgba(185,122,23,0.10); }
.pk-status-badge.accepted,
.pk-status-badge.counter_accepted { color: var(--st-accepted); background: rgba(47,122,81,0.10); }
.pk-status-badge.rejected,
.pk-status-badge.counter_declined { color: var(--st-rejected); background: rgba(184,66,59,0.10); }
.pk-status-badge.countered { color: var(--st-countered); background: rgba(43,95,138,0.10); }
.pk-status-badge.cancelled,
.pk-status-badge.expired   { color: var(--st-neutral);   background: rgba(90,107,98,0.10); }

/* Skeleton loading */
.pk-skeleton {
  background: linear-gradient(90deg, rgba(13,42,28,0.06) 25%, rgba(13,42,28,0.10) 50%, rgba(13,42,28,0.06) 75%);
  background-size: 200% 100%;
  animation: pk-shimmer 1.4s ease infinite;
  border-radius: 10px;
}
@keyframes pk-shimmer { to { background-position: -200% 0; } }

/* Empty state */
.pk-empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-5);
  color: var(--ink-3);
}
.pk-empty .icon {
  width: 56px; height: 56px; border-radius: 18px;
  background: var(--ivory); border: 1px solid var(--line);
  display: grid; place-items: center;
  margin: 0 auto var(--sp-4);
  color: var(--ink-3);
}
.pk-empty .t { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.pk-empty .s { font-size: 12px; line-height: 1.8; }

/* Toasts */
.pk-toast-wrap {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 1000;
  width: min(calc(100% - 32px), 420px);
}
.pk-toast {
  background: var(--green-900); color: var(--ivory);
  border: 1px solid var(--green-700);
  border-radius: 14px; padding: 12px 16px;
  font-size: 13px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 16px 40px -16px rgba(7,32,20,0.55);
  animation: pk-toast-in .25s ease;
}
.pk-toast.error { background: #4a1512; border-color: rgba(184,66,59,0.5); }
.pk-toast.success { border-color: rgba(47,122,81,0.6); }
@keyframes pk-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal */
.pk-modal-backdrop {
  position: fixed; inset: 0; z-index: 900;
  background: rgba(7,32,20,0.45);
  display: grid; place-items: center;
  padding: var(--sp-5);
  animation: pk-fade .18s ease;
}
.pk-modal {
  background: var(--paper);
  border-radius: 20px;
  border: 1px solid var(--line);
  width: min(100%, 480px);
  max-height: 86vh; overflow-y: auto;
  padding: var(--sp-6);
  box-shadow: 0 30px 80px -30px rgba(7,32,20,0.5);
  animation: pk-modal-in .22s cubic-bezier(.3,1.2,.4,1);
}
@keyframes pk-fade { from { opacity: 0; } }
@keyframes pk-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* Product cards (customer catalogue) */
.pk-product {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  text-align: right;
  font-family: inherit;
  cursor: pointer;
}
.pk-product:hover { border-color: var(--gold-400); transform: translateY(-1px); box-shadow: 0 10px 24px -18px rgba(13,42,28,0.3); }
.pk-product:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.pk-product .img {
  width: 100%; aspect-ratio: 2.4; border-radius: 12px;
  background: var(--ivory); object-fit: cover;
  display: grid; place-items: center; overflow: hidden;
}
.pk-product .img img { width: 100%; height: 100%; object-fit: cover; }
.pk-product .name { font-size: 13px; font-weight: 700; color: var(--ink); }
.pk-product .spec { display: flex; gap: 6px; flex-wrap: wrap; }
.pk-product .spec span {
  font-size: 10px; color: var(--ink-3); background: var(--ivory);
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line);
}
.pk-product .price-row { display: flex; align-items: baseline; justify-content: space-between; }
.pk-product .price { font-family: 'Cormorant Garamond', serif; font-size: 17px; font-weight: 600; color: var(--green-800); }
.pk-product .hidden-price { font-size: 11px; color: var(--warn); font-weight: 600; }

/* Accessible focus for all interactive elements */
.pk-btn:focus-visible, .pk-input:focus-visible, .pk-tabbar .item:focus-visible,
.pk-coin:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

/* Tab bar items are now real buttons */
.pk-tabbar .item { background: none; border: none; font-family: inherit; }

/* Direct quantity entry for weight-based products. */
.pk-qty-entry {
  flex: 1; min-width: 0; height: 100%; display: flex; align-items: center;
  justify-content: center; gap: 7px; padding-inline: 8px;
}
.pk-qty-entry input {
  width: min(140px, 70%); min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--ink); text-align: center; font: 600 20px 'Cormorant Garamond', serif;
}
.pk-qty-entry span { color: var(--ink-3); font-size: 12px; }
.pk-qty-entry:focus-within { box-shadow: inset 0 -2px var(--gold-500); }

/* Admin tables */
.pk-table { width: 100%; border-collapse: collapse; }
.pk-table th {
  text-align: right; font-size: 11px; font-weight: 600; color: var(--ink-3);
  padding: 10px 12px; border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.pk-table td { padding: 12px; font-size: 13px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pk-table tr:hover td { background: rgba(212,165,55,0.03); }
.pk-table-scroll { overflow-x: auto; }

/* Reduced motion — all animation becomes instant */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 768px) {
  /* Collapse admin sidebar text, show icons only */
  .pk-admin .sidebar {
    width: 64px;
    padding: 16px 12px;
    overflow: hidden;
  }
  .pk-admin .sidebar .brand .name,
  .pk-admin .sidebar .nav-item .nav-label {
    display: none;
  }
  .pk-admin .sidebar .brand {
    justify-content: center;
    padding-bottom: 16px;
  }
  .pk-admin .sidebar .nav-item {
    justify-content: center;
    padding: 12px;
  }
  .pk-admin .main {
    padding: 18px 16px;
  }
}

/* Small-screen admin: the desktop rail becomes a horizontally scrollable
   bottom navigation and every primary grid collapses to one column. */
@media (max-width: 600px) {
  .pk-admin .sidebar {
    position: fixed;
    z-index: 800;
    right: 0; left: 0; bottom: 0;
    width: 100%; height: 72px;
    padding: 8px 6px max(8px, env(safe-area-inset-bottom, 8px));
    flex-direction: row;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .pk-admin .sidebar .brand,
  .pk-admin .sidebar .sidebar-spacer,
  .pk-admin .sidebar .sidebar-user { display: none; }
  .pk-admin .sidebar .nav-item {
    flex: 1 0 44px;
    min-width: 44px;
    height: 52px;
    padding: 8px;
    justify-content: center !important;
    border: 0;
    background: transparent;
    font-family: inherit;
  }
  .pk-admin .sidebar .nav-item .nav-content { display: flex; }
  .pk-admin .sidebar .nav-item .nav-label { display: none; }
  .pk-admin .main {
    width: 100%;
    padding: 18px 16px 92px;
  }
  .pk-admin .main [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .pk-admin .main > div:first-child {
    flex-wrap: wrap;
    gap: 12px;
  }
  .pk-admin h1 { font-size: 24px; }

  .pk-admin-login-card {
    width: calc(100% - 32px) !important;
    height: auto !important;
    grid-template-columns: 1fr !important;
  }
  .pk-admin-login-brand {
    min-height: 150px;
    border-radius: 18px 18px 0 0 !important;
    padding: 22px !important;
  }
  .pk-admin-login-brand > div:last-child { display: none; }
  .pk-admin-login-form {
    border-radius: 0 0 18px 18px !important;
    padding: 24px !important;
  }
}

/* Customer market workspace: full-width responsive web layout (never a device mockup). */
.market-home { min-height: 100dvh; height: auto; overflow: visible; background: var(--paper); }
.market-nav { min-height: 76px; padding: 16px clamp(20px, 4vw, 64px); display:flex; align-items:center; gap:32px; border-bottom:1px solid var(--line); background:rgba(251,248,241,.96); position:sticky; top:0; z-index:20; }
.market-brand { display:flex; align-items:center; gap:10px; color:var(--green-900); font-size:12px; font-weight:800; letter-spacing:.13em; white-space:nowrap; }
.market-brand-mark { width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--green-900); color:var(--gold-300); border:1px solid var(--gold-500); font-family:Georgia,serif; font-weight:700; }
.market-nav nav { display:flex; gap:4px; flex:1; }
.market-nav nav button { border:0; background:transparent; color:var(--ink-3); padding:10px 14px; border-radius:10px; font:inherit; font-size:13px; cursor:pointer; }
.market-nav nav button:hover, .market-nav nav button.active { color:var(--green-900); background:rgba(212,165,55,.12); font-weight:700; }
.market-nav-actions { display:flex; align-items:center; gap:10px; }
.icon-button,.market-avatar { border:1px solid var(--line-strong); background:#fff; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--green-800); cursor:pointer; position:relative; }
.icon-button b { position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; border-radius:99px; background:var(--danger); color:#fff; font:10px system-ui; display:grid; place-items:center; }
.market-avatar { background:var(--green-900); color:var(--gold-300); border-color:var(--gold-500); font-weight:700; }
.market-content { width:min(1180px, 100%); margin:auto; padding:clamp(24px,4vw,44px) clamp(20px,5vw,64px) 120px; }
.market-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.eyebrow { color:var(--gold-600); font-size:11px; font-weight:800; letter-spacing:.14em; margin:0 0 10px; }
.market-intro h1 { color:var(--green-900); font:700 clamp(27px,3.2vw,38px)/1.25 'Vazirmatn',sans-serif; margin:0 0 7px; letter-spacing:-.02em; }
.market-intro p:not(.eyebrow) { color:var(--ink-3); max-width:600px; line-height:1.8; margin:0; font-size:14px; }
.market-session { color:var(--green-700); border:1px solid var(--line); background:#fff; border-radius:999px; padding:9px 14px; font-size:11px; white-space:nowrap; }
.market-session small { color:var(--ink-3); }.session-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--success); margin-inline-end:6px; }
.market-actions-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:18px; }
.market-cta { min-height:76px; border-radius:16px; display:flex; align-items:center; gap:13px; padding:16px 20px; text-align:start; cursor:pointer; font:inherit; transition:transform .18s ease,box-shadow .18s ease; }
.market-cta:hover { transform:translateY(-2px); box-shadow:0 14px 30px -20px rgba(7,32,20,.45); }.market-cta > span:nth-child(2) { flex:1; }.market-cta strong,.market-cta small { display:block; }.market-cta strong { font-size:17px; }.market-cta small { font-size:12px; margin-top:5px; opacity:.78; }.buy-cta { background:var(--green-900); color:var(--gold-200); border:1px solid var(--green-700); }.sell-cta { background:var(--gold-100); color:var(--green-900); border:1px solid rgba(184,137,31,.35); }.cta-icon { font-size:24px; width:36px; text-align:center; }
.market-summary { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); background:#fff; border-radius:14px; margin-bottom:34px; }.market-summary div { padding:13px 18px; border-inline-start:1px solid var(--line); }.market-summary div:first-child { border:0; }.market-summary span,.market-summary strong { display:block; }.market-summary span { color:var(--ink-3); font-size:10px; }.market-summary strong { color:var(--green-900); font:700 20px Georgia,serif; margin-top:3px; }
.market-section-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:16px; }.market-section-head h2 { color:var(--green-900); font-size:22px; margin:0; }.market-updated { color:var(--ink-3); font-size:11px; }.market-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }.market-asset-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; min-width:0; transition:border-color .18s ease, transform .18s ease; }.market-asset-card:hover { border-color:var(--gold-400); transform:translateY(-2px); }.market-asset-main { display:flex; align-items:center; gap:12px; width:100%; background:none; border:0; padding:0; text-align:start; font:inherit; cursor:pointer; }.market-asset-media { width:58px; height:58px; border-radius:14px; background:var(--ivory); display:grid; place-items:center; overflow:hidden; color:var(--gold-600); font:700 20px Georgia,serif; flex:none; }.market-asset-media img { width:100%; height:100%; object-fit:cover; }.market-asset-copy { min-width:0; }.market-asset-name { color:var(--ink); font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.market-asset-meta { color:var(--ink-3); font-size:11px; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.market-asset-price-row { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:17px 0 14px; border-bottom:1px solid var(--line); }.market-price { color:var(--green-900); font:600 22px Georgia,serif; }.market-price small { font:10px system-ui; color:var(--ink-3); }.private-price { color:var(--warn); font-size:12px; font-weight:700; display:flex; align-items:center; gap:5px; }.market-movement { font-size:11px; font-weight:700; }.market-movement.up { color:var(--success); }.market-movement.down { color:var(--danger); }.market-movement.flat { color:var(--ink-3); }.market-asset-actions { display:flex; align-items:center; gap:8px; padding-top:13px; }.market-action,.market-details { height:34px; border-radius:9px; padding:0 12px; font:inherit; font-size:11px; cursor:pointer; }.market-action.buy { background:var(--green-900); color:var(--gold-200); border:1px solid var(--green-900); }.market-action.sell { background:var(--gold-100); color:var(--green-900); border:1px solid rgba(184,137,31,.35); }.market-details { margin-inline-start:auto; border:0; background:none; color:var(--green-700); display:flex; gap:4px; align-items:center; }.market-error { margin-bottom:16px; border:1px solid rgba(184,66,59,.25); background:rgba(184,66,59,.07); color:var(--danger); border-radius:12px; padding:11px 14px; font-size:12px; }.market-error button { float:inline-end; border:0; background:none; color:inherit; font-weight:700; cursor:pointer; }.market-activity { margin-top:52px; max-width:720px; }.market-section-head.compact { margin-bottom:10px; }.market-section-head.compact button { border:0; background:none; color:var(--green-700); cursor:pointer; font:inherit; font-size:12px; }.market-activity-row { display:flex; width:100%; align-items:center; gap:11px; text-align:start; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-top:8px; font:inherit; cursor:pointer; }.market-activity-row > span:nth-child(2) { flex:1; }.market-activity-row strong,.market-activity-row small { display:block; }.market-activity-row strong { font-size:13px; }.market-activity-row small { color:var(--ink-3); font-size:11px; margin-top:3px; }.activity-dot { width:8px; height:8px; background:var(--gold-500); border-radius:50%; }
@media (max-width: 800px) { .market-nav { gap:14px; padding-inline:18px; }.market-nav nav { gap:0; }.market-nav nav button { padding-inline:8px; font-size:12px; }.market-content { padding-inline:20px; }.market-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) {
  .market-nav { flex-wrap:wrap; }
  .market-nav nav { order:3; width:100%; justify-content:space-between; border-top:1px solid var(--line); padding-top:8px; }
  .market-nav nav button { flex:1; }
  .market-intro { align-items:center; }
  .market-session { margin-top:0; }
  .market-actions-grid { grid-template-columns:1fr 1fr; }
  .market-cta { min-height:68px; padding:13px; }
  .market-summary { grid-template-columns:repeat(3,1fr); margin-bottom:28px; }
  .market-summary div { padding:11px 8px; }
  .market-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .market-asset-card { padding:11px; border-radius:15px; }
  .market-asset-main { display:grid; grid-template-columns:42px minmax(0,1fr); gap:8px; align-items:start; }
  .market-asset-media { width:42px; height:42px; border-radius:11px; font-size:14px; }
  .market-asset-name { font-size:12px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.6; }
  .market-asset-meta { font-size:9px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.55; }
  .market-asset-price-row { min-height:62px; padding:11px 0; flex-direction:column; align-items:flex-start; justify-content:center; gap:4px; }
  .market-price { font-size:18px; white-space:nowrap; }
  .private-price { font-size:10px; }
  .market-asset-actions { gap:5px; padding-top:10px; }
  .market-action { height:32px; padding:0 9px; font-size:10px; }
  .market-details { height:32px; padding:0 3px; }
  .market-details span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .market-content { padding:24px 16px 110px; }
  .market-intro h1 { font-size:27px; }
  .market-intro p:not(.eyebrow) { font-size:12px; }
}
/* ── Simple Persian customer price board ───────────────────────────── */
.simple-client{min-height:100dvh;background:linear-gradient(180deg,#f4f1e9 0,#faf9f6 260px,#f7f8f5 100%);color:#15231c;font-size:16px;overflow-x:hidden}
.simple-client>.pk-tabbar{display:none}
.simple-header{min-height:76px;padding:12px clamp(18px,4vw,56px);display:flex;align-items:center;gap:24px;background:rgba(255,255,255,.96);border-bottom:1px solid #d8ddd8;box-shadow:0 4px 18px rgba(19,52,39,.035);position:sticky;top:0;z-index:20}
.simple-brand{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#153c2d;font:700 19px inherit;cursor:pointer;white-space:nowrap}
.simple-brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#153c2d;color:#e7c56e;font-size:23px;box-shadow:inset 0 0 0 2px rgba(231,197,110,.3)}
.simple-account-type{padding:9px 14px;border:1px solid #d6e1da;border-radius:999px;background:#edf3ef;color:#254b3b;white-space:nowrap;font-size:15px}
.simple-nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.simple-nav button{min-height:48px;padding:0 16px;border:0;border-radius:10px;background:transparent;color:#334b40;font:600 16px inherit;cursor:pointer}
.simple-nav button:hover,.simple-nav button:focus-visible,.simple-nav button.active{background:#e8f0eb;color:#123d2c;outline:none}
.simple-nav button:focus-visible,.board-refresh:focus-visible,.price-board-row:focus-visible,.board-cell button:focus-visible{box-shadow:0 0 0 3px #c59938}
.price-board-page{width:min(1120px,calc(100% - 36px));margin:0 auto;padding:42px 0 100px}
.board-title{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:24px}
.board-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:7px;color:#7c642b;font-size:13px;font-weight:800;letter-spacing:.01em}
.board-kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:#c29a43}
.board-title h1{margin:0 0 8px;font-size:clamp(27px,3vw,38px);line-height:1.4;color:#143b2c;letter-spacing:-.02em}
.board-title p{margin:0;color:#516258;font-size:17px;line-height:1.8}
.board-refresh{min-height:50px;padding:0 20px;border:1px solid #b5c4ba;border-radius:999px;background:#fff;color:#153c2d;font:700 16px inherit;cursor:pointer;white-space:nowrap;box-shadow:0 5px 14px rgba(18,61,44,.06)}
.board-error{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 18px;margin-bottom:18px;border:1px solid #e8b8b1;border-radius:12px;background:#fff4f2;color:#8a2d26;font-weight:600}
.board-error button{min-height:44px;border:0;border-radius:9px;padding:0 16px;background:#8a2d26;color:#fff;font:700 15px inherit}
.price-board{background:#fff;border:1px solid #d7ddd8;border-radius:22px;overflow:hidden;box-shadow:0 18px 50px rgba(22,48,37,.09)}
.price-board-head,.price-board-row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,1.25fr) minmax(220px,1fr);align-items:stretch}
.price-board-head{min-height:78px;background:linear-gradient(110deg,#123b2b,#1a4b38);color:#fff;font-weight:800;font-size:18px;text-align:center}
.price-board-head>span{display:grid;place-items:center;padding:10px 16px;border-inline-start:1px solid rgba(255,255,255,.13)}
.price-board-head small{font-size:13px;font-weight:500;color:#dce9e1}
.price-board-row{min-height:124px;border-top:1px solid #e2e7e3;cursor:pointer;background:#fff;transition:background-color .12s ease,transform .12s ease}
.price-board-row:hover,.price-board-row:focus{background:#fbfcfa;outline:none}
.board-cell{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px;border-inline-start:1px solid #e4e8e5;text-align:center;min-width:0}
.board-cell.board-buy,.board-cell.board-sell{flex-direction:column;position:relative}
.board-cell.board-buy{background:linear-gradient(180deg,#f6fbf8,#eef7f2)}
.board-cell.board-sell{background:linear-gradient(180deg,#fffaf7,#fbf2ed)}
.board-direction{position:absolute;top:10px;inset-inline-end:12px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:800}
.board-buy .board-direction{background:#dbeee4;color:#166044}.board-sell .board-direction{background:#f2dfd4;color:#81462f}
.board-cell button{min-width:108px;min-height:44px;border:0;border-radius:999px;color:#fff;font:800 16px inherit;cursor:pointer;box-shadow:0 5px 12px rgba(22,48,37,.12)}
.board-buy button{background:#176344}.board-sell button{background:#8b4d36}
.board-price{font-size:clamp(20px,2.1vw,27px);font-weight:800;white-space:nowrap;color:#132e23;font-variant-numeric:tabular-nums}
.board-price small{font-size:13px;color:#52645a;font-weight:600}
.board-private{font-size:19px;font-weight:800;color:#72551d}
.board-product{gap:14px}
.board-product img,.board-product-icon{width:58px;height:58px;border-radius:16px;object-fit:cover;flex:none}
.board-product-icon{display:grid;place-items:center;background:#f3eddd;color:#796126;font-size:25px;border:1px solid #e6d9b9}
.board-product strong{display:block;font-size:clamp(18px,2vw,23px);line-height:1.6;overflow-wrap:anywhere}
.board-product small{display:block;color:#607067;font-size:14px;margin-top:2px}
.board-loading,.board-empty{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:30px;text-align:center;color:#52645a;font-size:18px}
.board-spinner{width:34px;height:34px;border-radius:50%;border:4px solid #dbe5df;border-top-color:#176344;animation:board-spin .8s linear infinite}
@keyframes board-spin{to{transform:rotate(360deg)}}
.board-help{text-align:center;color:#53645a;font-size:15px;margin:20px 0 0}
@media (max-width:820px){
  .simple-header{position:static;flex-wrap:wrap;gap:10px 16px;padding:12px 18px}
  .simple-account-type{margin-inline-start:auto}
  .simple-nav{width:100%;display:grid;grid-template-columns:repeat(4,1fr);order:3}
  .simple-nav button{padding:0 6px;font-size:14px}
  .price-board-page{padding-top:24px}
  .board-title{align-items:flex-start}.board-title p{font-size:16px}
  .price-board-head,.price-board-row{grid-template-columns:minmax(175px,1fr) minmax(210px,1.15fr) minmax(175px,1fr)}
  .board-cell{padding:15px 10px}.board-price{font-size:20px}.board-cell button{min-width:88px}
}
@media (max-width:620px){
  .simple-client>.pk-tabbar{display:flex}
  .simple-header{min-height:66px}.simple-brand{font-size:18px}.simple-brand-mark{width:40px;height:40px}
  .simple-nav{display:none}
  .price-board-page{width:min(100% - 24px,560px);padding:20px 0 96px}
  .board-title{display:block}.board-title h1{font-size:25px}.board-title p{font-size:15px}
  .board-refresh{width:100%;margin-top:14px}
  .price-board{border-radius:18px}
  .price-board-head{display:none}
  .price-board-row{display:grid;grid-template-columns:1fr 1fr;min-height:0;padding:0}
  .board-cell{border:0;padding:18px 12px}
  .board-cell.board-product{grid-column:1/-1;grid-row:1;min-height:82px;border-bottom:1px solid #e3e7e4;justify-content:flex-start;text-align:right}
  .board-cell.board-buy{grid-column:1;grid-row:2;border-inline-end:1px solid #e3e7e4}
  .board-cell.board-sell{grid-column:2;grid-row:2}
  .board-direction{display:none}
  .board-cell.board-buy::before,.board-cell.board-sell::before{content:attr(data-label);font-size:14px;font-weight:800;color:#53645a}
  .board-price{font-size:20px}.board-price small{display:block;margin-top:3px}
  .board-cell button{width:100%;min-height:48px}
  .board-private{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .price-board-row{transition:none}.board-spinner{animation-duration:1.8s}
}
.simple-form-page{min-height:100dvh;background:#f5f5f1;color:#183026;font-size:17px}
.simple-form-header{min-height:72px;padding:12px clamp(18px,4vw,48px);display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #dce3de}
.simple-form-header button{min-height:48px;display:flex;align-items:center;gap:7px;padding:0 15px;border:1px solid #bdc9c1;border-radius:10px;background:#fff;color:#173e2f;font:700 16px inherit;cursor:pointer}
.simple-form-header strong{font-size:20px}
.simple-order-form{width:min(660px,calc(100% - 28px));margin:32px auto 80px}
.simple-form-card{padding:clamp(20px,4vw,36px);background:#fff;border:1px solid #dae1dc;border-radius:18px;box-shadow:0 10px 30px rgba(20,52,39,.06)}
.simple-field{display:block;margin-bottom:22px}
.simple-field>span,.simple-side-picker legend{display:block;margin-bottom:9px;font-weight:800;font-size:17px;color:#1d392d}
.simple-field input,.simple-field select{width:100%;min-height:58px;padding:0 16px;border:2px solid #cbd4ce;border-radius:11px;background:#fff;color:#142a21;font:700 19px inherit;box-sizing:border-box}
.simple-field input:focus,.simple-field select:focus{outline:none;border-color:#1e6b4b;box-shadow:0 0 0 3px rgba(30,107,75,.14)}
.simple-field small{display:block;margin-top:8px;color:#596a61;font-size:14px;line-height:1.7}
.simple-side-picker{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 22px;padding:0;border:0}
.simple-side-picker legend{grid-column:1/-1}
.simple-side-picker button{min-height:82px;padding:12px;border:2px solid #cbd4ce;border-radius:12px;background:#fff;color:#2e4339;font:inherit;cursor:pointer}
.simple-side-picker button strong,.simple-side-picker button span{display:block}.simple-side-picker button strong{font-size:20px;margin-bottom:5px}.simple-side-picker button span{font-size:14px}
.simple-side-picker button.selected.buy{border-color:#176344;background:#edf7f2;color:#13563c}
.simple-side-picker button.selected.sell{border-color:#8b4d36;background:#fff3ee;color:#773d29}
.simple-current-price{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:78px;padding:14px 18px;margin-bottom:22px;border-radius:12px;background:#eef4f0}
.simple-current-price span{font-weight:700}.simple-current-price strong{font-size:24px;color:#173f2f;text-align:left}.simple-current-price strong.private{font-size:17px;color:#70531e}.simple-current-price small{font-size:13px}
.simple-validation,.simple-private-help{padding:13px 15px;margin:0 0 16px;border-radius:10px;line-height:1.8;font-weight:600}
.simple-validation{background:#fff0ee;color:#922e27;border:1px solid #e9bbb5}
.simple-private-help{background:#fff8e7;color:#674e1a;border:1px solid #ead7a8}
.simple-total{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px;margin:4px 0 8px;border:1px solid #d6e3da;border-radius:12px;background:#f1f7f3;font-size:16px}
.simple-total>div{text-align:left}.simple-total small{display:block;margin-bottom:3px;color:#607067;font-size:14px}.simple-total strong{display:block;font-size:21px;text-align:left;color:#123d2c}
.simple-submit,.simple-primary-btn,.simple-secondary-btn{min-height:56px;padding:0 24px;border:0;border-radius:11px;font:800 18px inherit;cursor:pointer}
.simple-submit,.simple-primary-btn{background:#155c40;color:#fff}.simple-submit{width:100%;margin-top:8px}.simple-submit:disabled{background:#9ba8a1;cursor:not-allowed}
.simple-secondary-btn{background:#e8eeea;color:#183f30}
.simple-success{width:min(600px,calc(100% - 28px));min-height:70dvh;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 0}
.simple-success-icon{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:#e4f2e9;color:#176344}.simple-success h1{font-size:30px;margin:18px 0 8px}.simple-success p{font-size:17px;line-height:1.9;color:#506258;margin:3px 0}.simple-success>div:last-child{display:flex;gap:10px;margin-top:24px}
@media(max-width:620px){
  .simple-form-header{min-height:64px}.simple-form-header strong{font-size:17px}
  .simple-order-form{margin-top:18px}.simple-form-card{padding:20px 16px;border-radius:14px}
  .simple-side-picker{grid-template-columns:1fr 1fr}.simple-side-picker button{min-height:88px;padding:8px}
  .simple-current-price{display:block}.simple-current-price strong{display:block;text-align:right;margin-top:7px;font-size:22px}
  .simple-total{display:block}.simple-total strong{display:block;text-align:right;margin-top:8px}
  .simple-success>div:last-child{width:100%;flex-direction:column}.simple-success button{width:100%}
}
.admin-tier-pricing{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--ivory)}
.admin-tier-pricing h3{margin:0 0 5px;font-size:15px}.admin-tier-pricing>p{margin:0 0 14px;color:var(--ink-3);font-size:11px;line-height:1.8}
.admin-tier-pricing section{padding:13px 0;border-top:1px solid var(--line)}.admin-tier-pricing section>strong{display:block;margin-bottom:10px;color:var(--green-800)}
.admin-price-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.admin-price-pair label>span:first-child,.admin-price-reason>span{display:block;margin-bottom:5px;font-size:12px;font-weight:700}
.admin-price-pair small{display:block;min-height:20px;margin-top:5px;color:var(--ink-3);font-size:10px}
.admin-price-visibility{display:flex!important;align-items:center;gap:6px;margin-top:5px!important;color:var(--ink-2);font-size:10px!important;font-weight:500!important}
.admin-price-reason{display:block;margin-top:12px}
.admin-tolerance-field{display:grid;grid-template-columns:minmax(190px,1fr) 140px;align-items:center;gap:6px 12px;padding:13px;margin-bottom:12px;border:1px solid #dacb9e;border-radius:11px;background:#fffaf0}
.admin-tolerance-field>span{font-size:12px;font-weight:800;color:var(--green-800)}.admin-tolerance-field input{height:42px}.admin-tolerance-field small{grid-column:1/-1;color:var(--ink-3);font-size:10px;line-height:1.7}
@media(max-width:620px){.admin-price-pair,.admin-tolerance-field{grid-template-columns:1fr}}
.customer-type-badge{display:inline-flex;align-items:center;margin-inline-start:7px;padding:2px 8px;border:1px solid #cab477;border-radius:999px;background:#fff9e9;color:#644d16;font-size:10px;font-weight:800;white-space:nowrap}

/* ── Customer market cards ───────────────────────────────────────────── */
.client-market{height:auto;min-height:100dvh;overflow:visible;background:
  radial-gradient(circle at 88% 0,#f0e6ca 0,transparent 28rem),
  linear-gradient(180deg,#f8f5ed 0,#f6f7f4 38rem,#f4f6f3 100%)}
.market-header{max-width:none}
.market-page{width:min(1160px,calc(100% - 40px));margin:0 auto;padding:38px 0 96px}
.market-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:24px}
.market-eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:7px;color:#806526;font-size:13px;font-weight:800}
.market-eyebrow i{width:28px;height:2px;border-radius:2px;background:#bd9340}
.market-hero h1{margin:0;color:#113b2b;font-size:clamp(30px,4vw,46px);line-height:1.35;letter-spacing:-.03em}
.market-hero p{margin:8px 0 0;color:#53655c;font-size:17px;line-height:1.8}
.market-refresh{min-height:58px;display:grid;grid-template-columns:auto auto;align-items:center;gap:1px 9px;padding:8px 18px;border:1px solid #bfcbc3;border-radius:16px;background:rgba(255,255,255,.88);color:#164432;font:700 14px inherit;cursor:pointer;box-shadow:0 8px 24px rgba(19,59,43,.07)}
.market-refresh svg{grid-row:1/3}.market-refresh small{color:#6a7971;font-size:11px;font-weight:600}
.market-meaning{display:flex;align-items:center;justify-content:center;gap:18px;width:max-content;max-width:100%;margin:0 auto 22px;padding:9px 18px;border:1px solid #d9dfda;border-radius:999px;background:rgba(255,255,255,.7);color:#526158;font-size:13px}
.market-meaning b{color:#173e2f}.market-meaning .sell b{color:#804931}.market-meaning i{width:4px;height:4px;border-radius:50%;background:#bea056}
.market-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.market-product-card{overflow:hidden;border:1px solid #d9dfda;border-radius:18px;background:#fff;box-shadow:0 9px 26px rgba(17,49,37,.065);transition:transform .16s ease,box-shadow .16s ease}
.market-product-card:hover{transform:translateY(-2px);box-shadow:0 18px 46px rgba(17,49,37,.11)}
.market-product-top{min-height:76px;display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid #e3e7e4;background:linear-gradient(135deg,#fff,#fcfbf6)}
.market-product-media{width:48px;height:48px;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;border:1px solid #e4d6af;border-radius:13px;background:linear-gradient(145deg,#faf7ed,#eee4c9);color:#816823;font-size:21px}
.market-product-media img{width:100%;height:100%;object-fit:cover}
.market-product-copy{min-width:0}.market-product-copy h2{margin:0;color:#172b22;font-size:17px;line-height:1.5;overflow-wrap:anywhere}.market-product-copy p{margin:2px 0 0;color:#68776f;font-size:11px}
.market-prices{display:grid;grid-template-columns:1fr 1fr;direction:rtl}
.market-trade{min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:11px 14px 13px}
.market-trade+.market-trade{border-inline-start:1px solid #e0e5e1}
.market-trade.buy{background:linear-gradient(160deg,#f5fbf7,#edf7f1)}
.market-trade.sell{background:linear-gradient(160deg,#fffaf7,#fbf2ed)}
.market-trade-label{display:flex;align-items:center;gap:7px}
.market-trade-label>span:last-child{display:flex;flex-direction:column}.market-trade-label b{color:#233c31;font-size:12px}.market-trade-label small{margin-top:0;color:#718078;font-size:9px}
.market-trade-icon{width:27px;height:27px;display:grid;place-items:center;border-radius:8px}
.market-trade.buy .market-trade-icon{background:#d8eee2;color:#156442}.market-trade.sell .market-trade-icon{background:#f2dfd5;color:#914b31}
.market-price-value,.market-private-price{min-height:32px;display:flex;align-items:center;color:#102d21;font-size:clamp(19px,1.8vw,23px);font-weight:900;white-space:nowrap;font-variant-numeric:tabular-nums}
.market-price-value small{margin-inline-start:5px;color:#68796f;font-size:11px;font-weight:700}.market-private-price{color:#7c5b1f;font-size:19px}
.market-trade button{min-height:42px;border:0;border-radius:11px;color:#fff;font:800 13px inherit;cursor:pointer;box-shadow:0 5px 12px rgba(26,66,49,.11)}
.market-trade.buy button{background:#176a49}.market-trade.sell button{background:#985136}
.market-trade button:focus-visible,.market-refresh:focus-visible{outline:3px solid rgba(190,151,66,.45);outline-offset:2px}
.market-loading,.market-empty{min-height:270px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid #dbe1dc;border-radius:22px;background:rgba(255,255,255,.8);color:#53655b;text-align:center}.market-empty p{margin:0}
.market-footnote{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;color:#64736b;font-size:14px}.market-footnote svg{color:#8c7130}

/* ── Tier-aware admin pricing ────────────────────────────────────────── */
.admin-pricing-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}.admin-pricing-actions{display:flex;align-items:center;gap:8px}.admin-pricing-actions .pk-btn{height:42px;padding:0 16px}
.admin-pricing-note{padding:13px 16px;margin-bottom:16px;border:1px solid #d7c58e;border-radius:12px;background:#fff9e9;color:#65501b;font-size:12px;line-height:1.8}.admin-pricing-note strong{margin-inline-end:5px}
.admin-pricing-error{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;margin-bottom:16px;border:1px solid #e5b8b1;border-radius:12px;background:#fff3f1;color:#8d3029;font-size:12px;font-weight:700}.admin-pricing-error button{height:34px;padding:0 12px;border:0;border-radius:8px;background:#8d3029;color:#fff;font-family:inherit}
.admin-pricing-loading{padding:50px;text-align:center;color:var(--ink-3)}
.admin-pricing-list{display:grid;gap:16px}.admin-pricing-product{padding:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow-sm)}
.admin-pricing-product>header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px;border-bottom:1px solid var(--line);background:#fbfaf6}
.admin-pricing-product-title{display:flex;align-items:center;gap:12px}.admin-pricing-product-title>img,.admin-pricing-product-title>span{width:48px;height:48px;display:grid;place-items:center;object-fit:cover;border:1px solid #e0d4b5;border-radius:13px;background:#f4ecda;color:#755d20;font-size:21px}.admin-pricing-product-title h2{margin:0;color:var(--green-900);font-size:15px}.admin-pricing-product-title small{color:var(--ink-3);font-size:10px}
.admin-pricing-tolerance{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-size:11px;font-weight:700}.admin-pricing-tolerance input{width:90px;height:40px;text-align:center}
.admin-pricing-tiers{display:grid;grid-template-columns:1fr 1fr}.admin-pricing-tiers>section{padding:16px 18px}.admin-pricing-tiers>section+section{border-inline-start:1px solid var(--line)}.admin-pricing-tiers h3{margin:0 0 12px;color:var(--green-800);font-size:13px}
.tier-price-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tier-price-field>span{display:block;margin-bottom:5px;color:var(--ink-2);font-size:11px;font-weight:700}.tier-price-input-wrap{position:relative}.tier-price-input-wrap input{height:43px;padding-inline-end:48px}.tier-price-input-wrap>small{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%);color:var(--ink-3);font-size:9px}.tier-price-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;color:var(--ink-3);font-size:9px}.tier-price-meta label{display:flex;align-items:center;gap:4px;cursor:pointer}
.admin-pricing-reason{display:flex;align-items:center;gap:12px;padding:0 18px 16px}.admin-pricing-reason>span{flex:0 0 auto;color:var(--ink-2);font-size:10px;font-weight:700}.admin-pricing-reason input{height:40px}
.admin-contact-setting{padding:16px 18px;margin-top:16px;border:1px solid var(--line);border-radius:14px;background:#fff}.admin-contact-setting label{display:grid;grid-template-columns:220px 1fr;align-items:center;gap:12px;color:var(--ink-2);font-size:11px;font-weight:700}.admin-contact-setting input{height:42px}

@media(max-width:900px){
  .market-product-grid{grid-template-columns:1fr}
  .admin-pricing-heading{align-items:flex-start}.admin-pricing-actions{flex-wrap:wrap;justify-content:flex-end}
  .admin-pricing-tiers{grid-template-columns:1fr}.admin-pricing-tiers>section+section{border-inline-start:0;border-top:1px solid var(--line)}
}
@media(max-width:620px){
  .simple-client>.pk-tabbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:fixed;z-index:40;left:0;right:0;bottom:0;width:100%;padding:5px 8px calc(5px + env(safe-area-inset-bottom,0))}
  .simple-client>.pk-tabbar .item{min-height:58px;padding:5px 2px;line-height:1.25}
  .simple-client>.pk-tabbar .item>span:not(.dot){display:block;width:100%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}
  .market-header{min-height:62px}.market-page{width:min(100% - 20px,560px);padding:20px 0 90px}
  .market-hero{display:block;margin-bottom:13px}.market-hero h1{font-size:27px}.market-hero p{font-size:13px;line-height:1.7}
  .market-refresh{width:100%;margin-top:16px;grid-template-columns:auto 1fr auto;text-align:right}.market-refresh svg{grid-row:auto}.market-refresh small{font-size:10px}
  .market-meaning{width:100%;box-sizing:border-box;gap:10px;margin-bottom:14px;padding:7px 10px;font-size:10px}
  .market-product-grid{gap:10px}.market-product-card{border-radius:15px}.market-product-card:hover{transform:none}
  .market-product-top{min-height:66px;padding:9px 11px}.market-product-media{width:43px;height:43px;border-radius:11px;font-size:19px}.market-product-copy h2{font-size:15px;line-height:1.45}.market-product-copy p{font-size:9px}
  .market-trade{gap:7px;padding:9px 7px 10px}.market-trade-label{gap:5px}.market-trade-icon{width:25px;height:25px;border-radius:7px}.market-trade-label b{font-size:11px}.market-trade-label small{font-size:8px}
  .market-price-value,.market-private-price{min-height:29px;font-size:16px}.market-price-value small{display:block;font-size:8px}.market-private-price{font-size:13px}
  .market-trade button{min-height:44px;padding:0 4px;border-radius:10px;font-size:11px}
  .admin-pricing-heading{display:block}.admin-pricing-actions{justify-content:flex-start;margin-top:12px}.admin-pricing-actions .pk-btn{flex:1}
  .admin-pricing-product>header{align-items:flex-start;flex-direction:column}.admin-pricing-tolerance{width:100%;justify-content:space-between}
  .tier-price-fields{grid-template-columns:1fr}.admin-pricing-reason{align-items:stretch;flex-direction:column}.admin-contact-setting label{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.market-product-card{transition:none}}