/* Sun Kala v20.1 — glass header, role avatars, original enhanced scanner, offline cache and price editor */
:root { --v20-orange:#ff6a00; --v20-orange-2:#ff8d3b; --v20-ink:#201b18; }

.v20-toast { position:fixed; z-index:5000; left:50%; bottom:116px; transform:translate(-50%,18px); max-width:min(90vw,420px); padding:12px 17px; border-radius:15px; color:#fff; background:#25211f; box-shadow:0 16px 42px rgba(30,20,14,.25); font-size:12px; font-weight:800; opacity:0; transition:.22s ease; pointer-events:none; }
.v20-toast.is-visible { opacity:1; transform:translate(-50%,0); }
.v20-toast.is-danger { background:#b72c2c; }

#v20-connectivity { position:fixed; z-index:57; right:max(12px,env(safe-area-inset-right)); bottom:calc(104px + env(safe-area-inset-bottom)); min-height:28px; display:flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid rgba(0,0,0,.06); border-radius:999px; background:rgba(255,255,255,.88); box-shadow:0 8px 24px rgba(40,24,14,.10); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:#637069; font-size:9px; font-weight:900; }
#v20-connectivity i { width:7px; height:7px; border-radius:50%; background:#1bae73; box-shadow:0 0 0 4px rgba(27,174,115,.10); }
#v20-connectivity.is-offline { color:#a04c27; }
#v20-connectivity.is-offline i { background:#ef6a32; box-shadow:0 0 0 4px rgba(239,106,50,.12); }

.v20-edit-price-button { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #ffd4b6; border-radius:14px; padding:0 15px; color:#d75200; background:#fff8f2; font:900 11px inherit; transition:.18s ease; }
.v20-edit-price-button:hover { border-color:#ff9d5b; background:#fff1e5; transform:translateY(-1px); }
.v20-edit-price-button:disabled { cursor:not-allowed; opacity:.48; transform:none; }
.v20-edit-price-button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.result-actions { flex-wrap:wrap; gap:9px; }

.v20-price-modal-backdrop { position:fixed; z-index:6000; inset:0; display:grid; place-items:center; padding:18px; background:rgba(30,22,17,.42); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.v20-price-modal { width:min(100%,440px); overflow:hidden; border:1px solid rgba(255,255,255,.8); border-radius:27px; background:rgba(255,255,255,.96); box-shadow:0 28px 80px rgba(38,24,14,.28); direction:rtl; }
.v20-price-modal > header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:21px 22px 17px; border-bottom:1px solid #eee6df; background:linear-gradient(145deg,#fff,#fff6ef); }
.v20-price-modal header span { color:#f06a16; font-size:10px; font-weight:900; }
.v20-price-modal header h2 { margin:4px 0 3px; color:#201b18; font-size:18px; line-height:1.6; }
.v20-price-modal header small { color:#9a8d84; font:10px Tahoma,sans-serif; }
.v20-price-modal header button { width:38px; height:38px; border:1px solid #eadfd8; border-radius:13px; color:#776b65; background:#fff; font-size:25px; line-height:1; }
.v20-price-modal form { display:grid; gap:13px; padding:20px 22px 23px; }
.v20-price-modal label { display:grid; gap:7px; color:#413832; font-size:11px; font-weight:900; }
.v20-price-modal label > div { min-height:55px; display:flex; align-items:center; gap:8px; padding:0 14px; border:1px solid #e9ded7; border-radius:16px; background:#fff; }
.v20-price-modal input { width:100%; border:0; outline:0; color:#181513; background:transparent; direction:ltr; text-align:left; font:800 20px Tahoma,sans-serif; }
.v20-price-modal label small { color:#a19389; font-size:9px; }
.v20-price-modal label em { color:#9b8d85; font-size:9px; font-style:normal; font-weight:500; }
.v20-price-note { margin:2px 0; padding:10px 12px; border-radius:13px; color:#765b48; background:#fff6ed; font-size:9px; line-height:1.9; }
.v20-price-submit { min-height:50px; border:0; border-radius:16px; color:#fff; background:linear-gradient(135deg,#ff8a35,#f15a00); box-shadow:0 13px 28px rgba(239,92,0,.21); font:900 12px inherit; }
.v20-price-submit:disabled { opacity:.65; }

.v20-scanner-overlay { position:absolute; inset:0; overflow:hidden; background:#080808; color:#fff; }
.v20-scanner-overlay video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.v20-camera-shade { position:absolute; inset:0; background:radial-gradient(ellipse 46% 21% at 50% 49%,transparent 0 72%,rgba(0,0,0,.56) 74% 100%); pointer-events:none; }
.v20-scanner-overlay > header { position:absolute; z-index:2; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(14px + env(safe-area-inset-top)) 16px 14px; background:linear-gradient(to bottom,rgba(0,0,0,.68),transparent); }
.v20-scanner-overlay > header > div { display:flex; align-items:center; gap:9px; font-size:11px; font-weight:900; }
.v20-scanner-overlay > header img { width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 4px 7px rgba(0,0,0,.25)); }
.v20-scanner-overlay > header button { width:40px; height:40px; border:1px solid rgba(255,255,255,.32); border-radius:14px; color:#fff; background:rgba(0,0,0,.28); font-size:27px; backdrop-filter:blur(12px); }
.v20-scanner-overlay main { position:absolute; z-index:2; inset:0; display:grid; place-content:center; justify-items:center; gap:22px; pointer-events:none; }
.v20-scan-frame { position:relative; width:min(82vw,430px); aspect-ratio:2.45/1; border-radius:22px; box-shadow:0 0 0 999px rgba(0,0,0,.10); }
.v20-scan-frame i { position:absolute; width:35px; height:35px; border-color:#ff7b22; border-style:solid; filter:drop-shadow(0 0 5px rgba(255,110,20,.45)); }
.v20-scan-frame i:nth-child(1){top:0;right:0;border-width:3px 3px 0 0;border-radius:0 17px 0 0}.v20-scan-frame i:nth-child(2){top:0;left:0;border-width:3px 0 0 3px;border-radius:17px 0 0 0}.v20-scan-frame i:nth-child(3){bottom:0;right:0;border-width:0 3px 3px 0;border-radius:0 0 17px 0}.v20-scan-frame i:nth-child(4){bottom:0;left:0;border-width:0 0 3px 3px;border-radius:0 0 0 17px}
.v20-scan-frame span { position:absolute; left:5%; right:5%; top:50%; height:2px; border-radius:99px; background:linear-gradient(90deg,transparent,#ff7b22 18% 82%,transparent); box-shadow:0 0 12px #ff7b22; animation:v20ScanLine 1.35s ease-in-out infinite alternate; }
@keyframes v20ScanLine { from{transform:translateY(-45px)} to{transform:translateY(45px)} }
#v20-scanner-status { max-width:78vw; margin:0; padding:9px 14px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(0,0,0,.38); backdrop-filter:blur(12px); text-align:center; font-size:10px; font-weight:800; }
.v20-scanner-overlay footer { position:absolute; z-index:3; left:0; right:0; bottom:calc(18px + env(safe-area-inset-bottom)); display:flex; justify-content:center; gap:10px; }
.v20-scanner-overlay footer button { min-height:43px; border:1px solid rgba(255,255,255,.28); border-radius:14px; padding:0 15px; color:#fff; background:rgba(0,0,0,.38); backdrop-filter:blur(14px); font:800 10px inherit; }
.v20-scanner-overlay footer button.is-active { color:#22150c; background:#ff9a4e; border-color:#ff9a4e; }

@media (max-width:640px) {
  .app-header { height:98px !important; padding-top:max(7px,env(safe-area-inset-top)); background:linear-gradient(180deg,#fff7f0 0%,rgba(255,255,255,0) 100%) !important; }
  .header-inner[data-v20-header="1"] { width:calc(100% - 20px) !important; min-height:78px; display:grid !important; grid-template-columns:55px minmax(0,1fr) 45px; grid-template-areas:"avatar clock logo"; align-items:center; gap:9px !important; padding:8px 10px !important; border:1px solid rgba(255,255,255,.88); border-radius:23px; color:#2a211c; background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,247,239,.72)); box-shadow:0 12px 34px rgba(91,54,28,.12),inset 0 1px 0 rgba(255,255,255,.9); backdrop-filter:blur(22px) saturate(135%); -webkit-backdrop-filter:blur(22px) saturate(135%); }
  .header-inner[data-v20-header="1"] .header-user { grid-area:avatar; min-width:0; display:block; }
  .header-inner[data-v20-header="1"] .user-avatar { width:52px; height:52px; display:block; overflow:hidden; padding:0; border:2px solid rgba(255,255,255,.95); border-radius:18px; background:#fff3e9; box-shadow:0 7px 18px rgba(89,47,18,.13); }
  .header-inner[data-v20-header="1"] .user-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
  .header-inner[data-v20-header="1"] .user-copy { display:none !important; }
  .header-inner[data-v20-header="1"] .mobile-live-clock { grid-area:clock; min-width:0; display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#211b17; text-align:center; }
  .header-inner[data-v20-header="1"] .mobile-time { direction:ltr; color:#211b17; font:900 24px/1 Tahoma,sans-serif; letter-spacing:.6px; }
  .mobile-clock-sub { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; white-space:nowrap; }
  .mobile-clock-sub .mobile-day { color:#f26713 !important; font-size:9px !important; font-weight:900; }
  .mobile-clock-sub i { width:3px; height:3px; border-radius:50%; background:#d7bca8; }
  .mobile-clock-sub .mobile-date { color:#81736a !important; font-size:8px !important; }
  .header-inner[data-v20-header="1"] .brand-lockup { grid-area:logo; min-width:0; display:grid; place-items:center; }
  .header-inner[data-v20-header="1"] .brand-lockup img { width:42px !important; height:42px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; object-fit:contain; filter:drop-shadow(0 5px 8px rgba(97,34,15,.15)); }
  .header-inner[data-v20-header="1"] .brand-copy { display:none !important; }
  .header-inner > .quote-header-button { position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }
  .page-main { padding-top:8px; }
  .result-actions { padding:0 15px 17px; }
  .result-actions > button { flex:1 1 145px; }
  #v20-connectivity { right:12px; bottom:calc(105px + env(safe-area-inset-bottom)); }
  .mobile-current-quote { right:12px !important; bottom:calc(143px + env(safe-area-inset-bottom)) !important; }
  .seller-notification-button { left:12px !important; bottom:calc(143px + env(safe-area-inset-bottom)) !important; }
}

@media (max-width:370px) {
  .header-inner[data-v20-header="1"] { grid-template-columns:49px minmax(0,1fr) 39px; padding-inline:8px !important; }
  .header-inner[data-v20-header="1"] .user-avatar { width:47px; height:47px; border-radius:16px; }
  .header-inner[data-v20-header="1"] .mobile-time { font-size:21px; }
  .header-inner[data-v20-header="1"] .brand-lockup img { width:37px !important; height:37px !important; }
  .mobile-clock-sub { gap:4px; }
  .mobile-clock-sub .mobile-date { font-size:7px !important; }
}

/* Sun Kala v20.1 — stable header, original scanner, logo-only connection state */
#v20-connectivity,
.status-pill { display:none !important; }

.app-header {
  color:#2a211c !important;
  border-bottom:1px solid rgba(225,210,198,.75) !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 8px 28px rgba(64,39,23,.09) !important;
  backdrop-filter:blur(22px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(22px) saturate(135%) !important;
}
.header-inner[data-v20-header="1"] { position:relative; }
.header-inner[data-v20-header="1"] .mobile-live-clock { display:none; }
.header-inner[data-v20-header="1"] .user-avatar {
  overflow:hidden;
  padding:0 !important;
  border:1px solid rgba(255,138,54,.20);
  background:linear-gradient(145deg,#fff,#fff4eb) !important;
  box-shadow:0 7px 19px rgba(75,39,17,.10);
}
.header-inner[data-v20-header="1"] .user-avatar img {
  width:100%; height:100%; display:block; object-fit:cover; object-position:center;
}
.header-inner[data-v20-header="1"] .user-copy strong,
.header-inner[data-v20-header="1"] .brand-copy strong { color:#241d19; }
.header-inner[data-v20-header="1"] .user-copy span,
.header-inner[data-v20-header="1"] .brand-copy span { color:#85776d; }
.header-inner[data-v20-header="1"] .quote-header-button {
  color:#df5b08; border-color:#f1d8c7; background:rgba(255,249,244,.86);
}
.header-inner[data-v20-header="1"] .quote-header-button.is-active {
  color:#fff; border-color:#f0650c; background:linear-gradient(135deg,#ff7d27,#ed5700);
}
.header-inner[data-v20-header="1"] .brand-lockup img {
  padding:0 !important; border:0 !important; border-radius:0 !important;
  background:transparent !important; object-fit:contain;
  transition:filter .18s ease, transform .18s ease;
}
.header-inner[data-v20-header="1"] .brand-lockup img.is-online {
  filter:drop-shadow(0 5px 9px rgba(22,172,80,.24));
}
.header-inner[data-v20-header="1"] .brand-lockup img.is-offline {
  filter:drop-shadow(0 5px 9px rgba(222,44,44,.22));
}

@media (max-width:640px) {
  .app-header {
    height:90px !important;
    padding-top:max(6px,env(safe-area-inset-top));
    background:linear-gradient(180deg,rgba(255,249,244,.96),rgba(255,255,255,.72)) !important;
  }
  .header-inner[data-v20-header="1"] {
    min-height:70px;
    grid-template-columns:50px minmax(0,1fr) 41px;
    gap:8px !important;
    padding:7px 9px !important;
    border-radius:21px;
  }
  .header-inner[data-v20-header="1"] .mobile-live-clock { display:flex !important; }
  .header-inner[data-v20-header="1"] .user-avatar {
    width:48px; height:48px; border-radius:16px;
  }
  .header-inner[data-v20-header="1"] .mobile-time {
    font-size:23px; letter-spacing:.35px;
  }
  .header-inner[data-v20-header="1"] .brand-lockup img {
    width:39px !important; height:39px !important;
  }
  .mobile-current-quote {
    right:12px !important;
    bottom:calc(103px + env(safe-area-inset-bottom)) !important;
  }
  .seller-notification-button {
    left:12px !important;
    bottom:calc(103px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width:370px) {
  .header-inner[data-v20-header="1"] { grid-template-columns:46px minmax(0,1fr) 37px; }
  .header-inner[data-v20-header="1"] .user-avatar { width:44px; height:44px; border-radius:15px; }
  .header-inner[data-v20-header="1"] .mobile-time { font-size:20px; }
  .header-inner[data-v20-header="1"] .brand-lockup img { width:35px !important; height:35px !important; }
}

/* v21.0.1 — جستجوی هوشمند بارکد EAN-8 / EAN-13 و پیشوند */
.v21-barcode-choice-overlay { z-index: 10080; padding: 18px; align-items: center; justify-content: center; }
.v21-barcode-choice-modal { width: min(560px, 100%); max-height: min(78vh, 720px); overflow: hidden; display: flex; flex-direction: column; background: rgba(255,255,255,.98); border: 1px solid rgba(255,122,24,.22); border-radius: 26px; box-shadow: 0 28px 90px rgba(56,28,7,.22); }
.v21-barcode-choice-modal > header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 20px; border-bottom:1px solid #f0e6de; }
.v21-barcode-choice-modal > header span { color:#ff6b0b; font-size:12px; font-weight:800; }
.v21-barcode-choice-modal > header h2 { margin:3px 0 0; font-size:18px; color:#22170f; }
.v21-barcode-choice-modal > header button { width:38px; height:38px; border:0; border-radius:14px; background:#fff3ea; color:#d94f00; font-size:25px; cursor:pointer; }
.v21-barcode-choice-list { padding:12px; overflow:auto; display:grid; gap:9px; }
.v21-barcode-choice { width:100%; border:1px solid #eee2d9; background:#fff; border-radius:18px; padding:14px 15px; display:flex; align-items:center; justify-content:space-between; gap:14px; text-align:right; cursor:pointer; transition:.18s ease; }
.v21-barcode-choice:hover, .v21-barcode-choice:focus-visible { border-color:#ff8b43; background:#fff9f4; transform:translateY(-1px); outline:none; }
.v21-barcode-choice-main { min-width:0; display:grid; gap:5px; }
.v21-barcode-choice-main strong { color:#24170f; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v21-barcode-choice-main small { color:#7a6b61; font-size:12px; letter-spacing:.35px; }
.v21-barcode-choice-side { flex:none; display:grid; gap:4px; text-align:left; }
.v21-barcode-choice-side em { color:#9b897d; font-size:10px; font-style:normal; }
.v21-barcode-choice-side b { color:#e95600; font-size:12px; white-space:nowrap; }
.v21-barcode-choice-modal > p { margin:0; padding:12px 18px 16px; border-top:1px solid #f0e6de; color:#89776b; font-size:11px; text-align:center; }
@media (max-width:520px) {
  .v21-barcode-choice-overlay { padding:10px; align-items:flex-end; }
  .v21-barcode-choice-modal { width:100%; max-height:72vh; border-radius:24px 24px 14px 14px; }
  .v21-barcode-choice { padding:13px 12px; }
  .v21-barcode-choice-side { max-width:42%; }
}