/* =========================================================
   dd.css — فهرست کشویی هماهنگ با لیکویید گلس (مرتب‌سازی شماره مجازی) و کلید روشن/خاموش
   (همان ظاهر فیلترهای صفحه‌ی گیفت NFT؛ ظاهر از شخصی‌سازی پنل می‌آید)
   ========================================================= */
.fg-dd { position: relative; }
.fg-dd-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: .45rem; min-height: 46px; min-width: 150px; padding: 0 14px; border-radius: var(--r-md, 14px); cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); background: rgba(10, 8, 16, .55); border: 1px solid var(--line-strong, rgba(255, 255, 255, .18)); transition: border-color .2s, background .2s; }
@media (hover: hover) { .fg-dd-btn:hover { border-color: rgba(var(--accent2-rgb, 67, 73, 255), .7); } }
.fg-dd-btn svg { width: 15px; height: 15px; color: var(--muted); transition: transform .2s; }
.fg-dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.fg-dd-btn:focus-visible, .fg-opt:focus-visible { outline: 2px solid rgba(var(--accent2-rgb, 67, 73, 255), .9); outline-offset: 2px; }
.fg-dd-panel { position: absolute; inset-inline-start: 0; top: calc(100% + 6px); z-index: 40; width: min(210px, calc(100vw - 2rem)); padding: .35rem; border-radius: var(--r-md, 14px); background: #15121f; border: 1px solid var(--line-strong, rgba(255, 255, 255, .18)); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7); }
.fg-dd-panel[hidden] { display: none; }
.fg-opt { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .6rem; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; cursor: pointer; text-align: start; font: inherit; font-size: 14px; color: var(--text); background: none; }
@media (hover: hover) { .fg-opt:hover { background: rgba(255, 255, 255, .08); } }
.fg-opt svg { width: 16px; height: 16px; opacity: 0; color: #ff9ad9; }
.fg-opt[aria-selected="true"] { color: #fff; font-weight: 600; background: rgba(var(--accent-rgb, 243, 60, 192), .14); }
.fg-opt[aria-selected="true"] svg { opacity: 1; }
body[data-page="numbers"] .vn-bar { position: relative; z-index: 32; }

/* کلید روشن/خاموش (فقط موجودها) */
.vn-toggle { display: inline-flex; align-items: center; gap: .45rem; min-height: 46px; height: 46px; box-sizing: border-box; padding: 0 10px; white-space: nowrap; font-size: 13px; border-radius: var(--r-md, 14px); cursor: pointer; font-weight: 600; color: var(--text); background: rgba(10, 8, 16, .55); border: 1px solid var(--line-strong, rgba(255, 255, 255, .18)); transition: border-color .2s, background .2s; user-select: none; }
@media (hover: hover) { .vn-toggle:hover { border-color: rgba(var(--accent2-rgb, 67, 73, 255), .7); } }
.vn-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.vn-switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); transition: background .25s; }
.vn-switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); transition: transform .28s var(--spring, ease); }
.vn-toggle input:checked + .vn-switch { background: linear-gradient(135deg, rgb(var(--accent-rgb, 243, 60, 192)), rgb(var(--accent2-rgb, 67, 73, 255))); }
.vn-toggle input:checked + .vn-switch::after { transform: translateX(-16px); }
.vn-toggle:has(input:checked) { border-color: rgba(var(--accent-rgb, 243, 60, 192), .6); }
.vn-toggle:has(input:focus-visible) { outline: 2px solid rgba(var(--accent2-rgb, 67, 73, 255), .9); outline-offset: 2px; }

/* نوار ابزار شماره مجازی: موبایل = جست‌وجوی تمام‌عرض، منو و کلید کنار هم، شمارنده‌ی وسط‌چین؛ از ۷۶۸ همه در یک ردیف */
body[data-page="numbers"] .vn-bar .fg-dd, body[data-page="numbers"] .vn-bar .vn-toggle { flex: 1 1 calc(50% - .3rem); }
body[data-page="numbers"] .vn-bar .fg-dd-btn { width: 100%; min-width: 0; }
body[data-page="numbers"] .vn-bar .vn-toggle { justify-content: space-between; }
@media (min-width: 768px) {
  body[data-page="numbers"] .vn-bar .fg-dd, body[data-page="numbers"] .vn-bar .vn-toggle { flex: 0 0 auto; }
  body[data-page="numbers"] .vn-bar .fg-dd-btn { width: auto; min-width: 150px; }
  body[data-page="numbers"] .vn-bar .vn-toggle { justify-content: flex-start; white-space: normal; font-size: 14px; padding-inline: 14px; gap: .6rem; }
}