/* =========================================================
   UASSET — NEYO SKIN v2
   Same family as NEYO / Bean ID: Sora display, Inter text,
   #171717 ink, #f9f9f9 surfaces, pill controls, soft cards.
   Loaded last.
   ========================================================= */

:root {
  --ny-ink: #171717;
  --ny-ink-2: #5d5d5d;
  --ny-ink-3: #8f8f8f;
  --ny-bg: #ffffff;
  --ny-surface: #f9f9f9;
  --ny-surface-2: #f3f3f3;
  --ny-line: rgba(0, 0, 0, .06);
  --ny-line-2: rgba(0, 0, 0, .1);
  --ny-display: "Sora", Inter, system-ui, sans-serif;
  --ny-ease: cubic-bezier(.22, 1, .36, 1);
  --sg-text: var(--ny-ink);
  --sg-black: var(--ny-ink);
}

body { letter-spacing: -0.006em; }

/* Header: glass */
.header {
  background: rgba(255, 255, 255, .78) !important;
  border-bottom: 1px solid var(--ny-line) !important;
}
.nav-link { border-radius: 999px !important; font-size: 14px !important; font-weight: 500 !important; color: var(--ny-ink-2) !important; }
.nav-link:hover, .nav-link.active { color: var(--ny-ink) !important; background: var(--ny-surface-2) !important; }
.bean-button, .dark-button {
  background: var(--ny-ink) !important; color: #fff !important; border-radius: 999px !important;
  font-weight: 550 !important; min-height: 44px; box-shadow: 0 6px 16px -8px rgba(0,0,0,.45) !important;
  transition: transform .16s var(--ny-ease), filter .16s ease !important;
}
.bean-button:hover, .dark-button:hover { filter: brightness(1.15); transform: none !important; }
.bean-button:active, .dark-button:active { transform: scale(.97) !important; }

/* Display type like NEYO */
.hero h1, .section h2, .modal h2, .pay-modal h2 {
  font-family: var(--ny-display) !important;
  font-weight: 600 !important;
  letter-spacing: -0.04em !important;
  color: var(--ny-ink) !important;
}
.hero { padding-top: clamp(40px, 6vh, 72px) !important; padding-bottom: 24px !important; }
.hero h1 { font-size: clamp(40px, 5.6vw, 64px) !important; line-height: 1.04 !important; }
.hero-mark { opacity: 1; }
.hero-text { color: var(--ny-ink-2) !important; font-size: 16px !important; }
.section h2 { font-size: clamp(30px, 3.4vw, 40px) !important; }
.eyebrow {
  font-size: 12px !important; font-weight: 550 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--ny-ink-3) !important;
}

/* Search: NEYO composer pill */
.hero-search, .mini-search {
  background: var(--ny-surface) !important;
  border: 1px solid var(--ny-line) !important;
  border-radius: 999px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 32px -18px rgba(0,0,0,.18) !important;
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease !important;
}
.hero-search:focus-within, .mini-search:focus-within {
  background: #fff !important; border-color: var(--ny-line-2) !important;
  box-shadow: 0 0 0 4px rgba(0,0,0,.04), 0 16px 40px -18px rgba(0,0,0,.22) !important;
}

/* Filters: soft pills */
.filters { gap: 6px !important; margin-bottom: 14px !important; }
.filter {
  min-height: 36px !important; padding: 0 16px !important; border-radius: 999px !important;
  border: 0 !important; background: var(--ny-surface-2) !important; color: var(--ny-ink-2) !important;
  font-size: 13.5px !important; font-weight: 500 !important;
  transition: background .16s ease, color .16s ease, transform .16s var(--ny-ease) !important;
}
.filter:hover { background: #ececec !important; color: var(--ny-ink) !important; }
.filter.active, .filter[aria-pressed="true"] { background: var(--ny-ink) !important; color: #fff !important; }
.filter:active { transform: scale(.96); }

/* Icon grid: denser, icons bigger, soft surface cards */
.icon-grid {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)) !important;
  gap: 6px !important;
}
.icon-card {
  min-height: 0 !important; aspect-ratio: 1 / 1;
  padding: 10px 12px !important; border: 1px solid transparent !important; border-radius: 18px !important;
  background: var(--ny-surface) !important;
  transition: background .2s ease, border-color .2s ease, transform .2s var(--ny-ease), box-shadow .2s ease !important;
}
.icon-card:hover {
  background: #fff !important; border-color: var(--ny-line) !important; transform: translateY(-2px) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 40px -20px rgba(0,0,0,.22) !important;
}
.icon-card:active { transform: scale(.98) !important; }
.icon-draw { flex: 1; height: auto !important; }
html body .icon-grid .icon-card .icon-draw svg, html body .icon-grid .icon-card .icon-draw img { width: 32px !important; height: 32px !important; color: var(--ny-ink); }
.icon-card:hover .icon-draw svg { transform: scale(1.08); }
.icon-title { font-size: 13px !important; font-weight: 550 !important; }
.icon-category { font-size: 11.5px !important; color: var(--ny-ink-3) !important; }

/* Cards / panels */
.collection-card, .price-box, .pro-feature, .collection-context {
  border-radius: 24px !important; border-color: var(--ny-line) !important;
}
.price-box { background: var(--ny-surface) !important; box-shadow: none !important; }

/* Modals: NEYO sheet */
.overlay { background: rgba(23, 23, 23, .28) !important; backdrop-filter: blur(8px) saturate(1.2) !important; -webkit-backdrop-filter: blur(8px) saturate(1.2) !important; }
.modal {
  border: 1px solid var(--ny-line) !important; border-radius: 28px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 40px 100px -30px rgba(0,0,0,.35) !important;
  animation: nySheet .42s var(--ny-ease) both;
}
.modal .close {
  width: 36px !important; height: 36px !important; border-radius: 999px !important;
  background: var(--ny-surface-2) !important; color: var(--ny-ink) !important; border: 0 !important;
  font-size: 18px !important; line-height: 1 !important;
}
.modal .close:hover { background: #e9e9e9 !important; }

.pay-modal { width: min(440px, calc(100% - 32px)) !important; padding: 32px !important; }
.pay-modal h2 { font-size: 26px !important; line-height: 1.2 !important; margin-bottom: 6px !important; }
.pay-sub { font-size: 14px !important; color: var(--ny-ink-2) !important; margin: 0 0 22px !important; }
.pay-body .pay-state {
  margin: 0 !important; padding: 18px 20px !important; border-radius: 18px !important;
  background: var(--ny-surface) !important; border: 1px solid var(--ny-line) !important;
  color: var(--ny-ink-2) !important; font-size: 14px !important; line-height: 1.55 !important;
}
.pay-body .pay-state:not(.pay-done)::before {
  content: ""; display: block; width: 8px; height: 8px; margin-bottom: 12px; border-radius: 50%;
  background: #f5a524; box-shadow: 0 0 0 4px rgba(245, 165, 36, .16);
}
.pay-input { border-radius: 999px !important; min-height: 48px !important; background: var(--ny-surface) !important; }
.pay-tab { border-radius: 999px !important; }

@keyframes nySheet {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 640px) {
  .icon-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .icon-card { border-radius: 18px !important; padding: 10px !important; }
  .icon-draw svg { width: 28px !important; height: 28px !important; }
  .pay-modal { padding: 24px !important; }
}

@media (prefers-reduced-motion: reduce) { .modal { animation: none; } }

.pay-small { text-align: center; font-size: 12.5px !important; color: var(--ny-ink-3) !important; margin-top: 12px !important; }
.pay-input { font-family: var(--sg-font) !important; border-color: var(--ny-line-2) !important; }

/* Tighter rhythm (user asked for less gap/space) */
.section { padding-top: 28px !important; padding-bottom: 40px !important; }
.section-head { margin-bottom: 14px !important; gap: 12px !important; }
.section h2 { margin-bottom: 0 !important; }
.hero-text { margin-bottom: 20px !important; }
.hero h1 { margin-bottom: 10px !important; }
.filter { min-height: 32px !important; padding: 0 13px !important; font-size: 13px !important; }
.icon-title { margin-top: 2px; }
@media (max-width: 640px) {
  .icon-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; width: 100% !important; }
  .icon-card { min-width: 0 !important; align-items: center !important; text-align: center !important; }
  .icon-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .icon-card { border-radius: 16px !important; padding: 8px !important; aspect-ratio: 1 / 1.1; }
  .icon-title { font-size: 11.5px !important; }
  .icon-category { display: none; }
  .section { padding-top: 20px !important; padding-bottom: 28px !important; padding-left: 12px !important; padding-right: 12px !important; }
}

/* Icon style switcher */
.ua-style-bar{display:flex;align-items:center;gap:4px;margin:0 0 10px;padding:4px;background:#f3f3f3;border-radius:12px;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.ua-style-bar::-webkit-scrollbar{display:none}
.ua-style-label{font-size:11px;font-weight:600;color:#8a8a8a;padding:0 8px 0 6px;text-transform:uppercase;letter-spacing:.04em}
.ua-style-btn{border:0;background:transparent;font:500 12.5px/1 Inter,system-ui,sans-serif;color:#555;padding:7px 11px;border-radius:9px;cursor:pointer;white-space:nowrap}
.ua-style-btn:hover{color:#111}
.ua-style-btn.active{background:#fff;color:#111;box-shadow:0 1px 2px rgba(0,0,0,.08)}
@media (max-width:640px){.ua-style-bar{width:100%}.ua-style-btn{padding:7px 9px;font-size:12px}}

.seo-links{max-width:1180px;margin:28px auto 0;padding:0 20px;font-size:12.5px;line-height:1.9;color:#888}.seo-links a{color:#666;text-decoration:none}.seo-links a:hover{color:#111}.seo-links strong{color:#444;font-weight:600}

/* Icon modal: hide side scrollbar (still scrolls), keep clean rounded edge */
.icon-modal{scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior:contain}
.icon-modal::-webkit-scrollbar{display:none;width:0;height:0}

/* Free mode: hide Pro/pricing UI without deleting it */
html.ua-free-mode #pricing,
html.ua-free-mode .nav-link[href="#pricing"],
html.ua-free-mode a[href="#pricing"] { display: none !important; }
/* Style chips inside the icon window */
.ua-modal-styles{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin:12px 0 4px}
.ua-mstyle{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:64px;padding:9px 8px 7px;border:1px solid rgba(17,17,17,.08);background:#fff;border-radius:14px;cursor:pointer;font:500 11.5px/1 Inter,system-ui,sans-serif;color:#666;transition:border-color .15s,box-shadow .15s,color .15s}
.ua-mstyle svg{width:24px;height:24px;color:#111}
.ua-mstyle:hover{color:#111;border-color:rgba(17,17,17,.2)}
.ua-mstyle.active{color:#111;border-color:#7c5cff;box-shadow:0 0 0 3px rgba(124,92,255,.14)}

.ua-style-sep{width:1px;height:18px;background:rgba(0,0,0,.12);margin:0 6px;flex:none}