*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Plus Jakarta Sans",sans-serif}

/* scrollbar */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(148,163,184,.3);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.55)}
.no-sc{-ms-overflow-style:none;scrollbar-width:none}
.no-sc::-webkit-scrollbar{display:none}

/* safe area */
.pt-safe{padding-top:max(.5rem,env(safe-area-inset-top))}
.pb-safe{padding-bottom:max(1rem,env(safe-area-inset-bottom))}

/* glass */
.glass{background:rgba(255,255,255,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(0,0,0,.07)}
.dark .glass{background:rgba(8,12,28,.85);border:1px solid rgba(255,255,255,.07)}

/* bg */
.bg-app{position:fixed;inset:0;z-index:-1;background:#eff1fb;
  background-image:
    radial-gradient(at 0% 0%,rgba(139,92,246,.14) 0,transparent 52%),
    radial-gradient(at 100% 3%,rgba(6,182,212,.11) 0,transparent 52%),
    radial-gradient(at 55% 100%,rgba(236,72,153,.09) 0,transparent 50%)}
.dark .bg-app{background:#060a18;
  background-image:
    radial-gradient(at 0% 0%,rgba(139,92,246,.22) 0,transparent 52%),
    radial-gradient(at 100% 3%,rgba(6,182,212,.16) 0,transparent 52%),
    radial-gradient(at 55% 100%,rgba(236,72,153,.12) 0,transparent 50%)}

/* ── CARD ── */
.card{
  transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .22s;
  position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(139,92,246,.04) 0%,transparent 60%);
  opacity:0;transition:opacity .22s;pointer-events:none;border-radius:inherit;
}
.card:hover::before{opacity:1}
.card:hover{transform:translateY(-3px) scale(1.012);box-shadow:0 16px 40px -10px rgba(139,92,246,.18)}
.dark .card:hover{box-shadow:0 16px 40px -10px rgba(139,92,246,.32)}

/* card logo wrapper */
.card-logo-wrap{
  width:44px;height:44px;border-radius:14px;overflow:hidden;
  background:rgba(248,250,252,1);
  border:1px solid rgba(0,0,0,.06);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:transform .18s;
}
.dark .card-logo-wrap{background:rgba(30,41,59,.7);border-color:rgba(255,255,255,.07)}
.card:hover .card-logo-wrap{transform:scale(1.08)}

/* ── BADGES ── */
.badge-bepul{display:inline-flex;align-items:center;gap:2px;font-size:9px;font-weight:800;padding:2px 6px;border-radius:6px;letter-spacing:.1px;background:rgba(209,250,229,.9);color:#059669}
.dark .badge-bepul{background:rgba(16,185,129,.15);color:#34d399}
.badge-pullik{display:inline-flex;align-items:center;gap:2px;font-size:9px;font-weight:800;padding:2px 6px;border-radius:6px;background:rgba(254,243,199,.9);color:#d97706}
.dark .badge-pullik{background:rgba(245,158,11,.15);color:#fbbf24}
.badge-custom{display:inline-flex;align-items:center;gap:2px;font-size:9px;font-weight:800;padding:2px 6px;border-radius:6px;background:rgba(237,233,254,.9);color:#7c3aed}
.dark .badge-custom{background:rgba(139,92,246,.18);color:#a78bfa}
.badge-web{display:inline-flex;align-items:center;justify-content:center;width:20px;height:18px;border-radius:5px;background:rgba(219,234,254,.9);color:#2563eb}
.dark .badge-web{background:rgba(59,130,246,.15);color:#60a5fa}
.badge-mob{display:inline-flex;align-items:center;justify-content:center;width:20px;height:18px;border-radius:5px;background:rgba(224,242,254,.9);color:#0369a1;border:1px solid rgba(14,165,233,.2)}
.dark .badge-mob{background:rgba(14,165,233,.12);color:#38bdf8;border-color:rgba(14,165,233,.25)}
.badge-hot{display:inline-flex;align-items:center;gap:2px;font-size:8px;font-weight:900;padding:2px 6px;border-radius:6px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;letter-spacing:.2px;box-shadow:0 2px 6px rgba(239,68,68,.3)}

/* trending-tag — replaced by badge-hot */

/* nav active */
.nav-active{background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(217,70,239,.09));color:#8b5cf6;font-weight:700}
.dark .nav-active{background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(217,70,239,.15))}
.pill-active{background:linear-gradient(135deg,#8b5cf6,#d946ef)!important;color:#fff!important;border-color:transparent!important}

/* chips */
.chip{transition:all .16s;border:1.5px solid;cursor:pointer;user-select:none}
.chip.on{background:linear-gradient(135deg,#8b5cf6,#d946ef);color:#fff;border-color:transparent}
.chip.off{background:rgba(255,255,255,.7);border-color:rgba(148,163,184,.3);color:#64748b}
.dark .chip.off{background:rgba(30,41,59,.6);border-color:rgba(100,116,139,.3);color:#94a3b8}

/* search */
.s-drop{box-shadow:0 20px 44px -8px rgba(0,0,0,.13);max-height:350px;overflow-y:auto}
.dark .s-drop{box-shadow:0 20px 44px -8px rgba(0,0,0,.55)}
.s-row{transition:background .13s;border-radius:8px}
.s-row:hover{background:rgba(139,92,246,.08)}
.dark .s-row:hover{background:rgba(139,92,246,.15)}

/* highlight */
mark{background:rgba(139,92,246,.22);color:inherit;border-radius:3px;padding:0 0}
.dark mark{background:rgba(139,92,246,.38)}

/* sort select arrow */
.sort-sel{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .4rem center;background-size:1.1em}

/* fav btn */
.fav-btn{transition:transform .15s,background .15s}
.fav-btn:hover{transform:scale(1.15)}

/* animate pop on click */
.do-pop{animation:pop .18s ease-out}

/* Search input wrapper to perfectly center the X icon vertically */
.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

/* ── AUTH MODAL ── */
.auth-tab{transition:all .18s;border-bottom:2px solid transparent;padding-bottom:8px;font-weight:700;font-size:13px;color:#94a3b8;cursor:pointer}
.auth-tab.active{border-color:#8b5cf6;color:#8b5cf6}
.dark .auth-tab.active{color:#a78bfa;border-color:#a78bfa}
.auth-panel{display:none}
.auth-panel.active{display:block}
.auth-btn-google{background:#fff;border:1.5px solid #e2e8f0;color:#334155;font-weight:700;transition:all .15s;box-shadow:0 2px 8px rgba(0,0,0,.07)}
.auth-btn-google:hover{box-shadow:0 4px 16px rgba(0,0,0,.13);transform:translateY(-1px)}
.dark .auth-btn-google{background:#1e293b;border-color:rgba(255,255,255,.1);color:#e2e8f0}
.auth-btn-tg{background:linear-gradient(135deg,#2aabee,#229ed9);color:#fff;font-weight:700;transition:all .15s;box-shadow:0 4px 12px rgba(42,171,238,.35)}
.auth-btn-tg:hover{opacity:.92;transform:translateY(-1px)}
.user-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid rgba(139,92,246,.4)}
.view-global{background:linear-gradient(135deg,rgba(139,92,246,.15),rgba(217,70,239,.1));border:1px solid rgba(139,92,246,.2);color:#7c3aed}
.dark .view-global{color:#a78bfa;background:linear-gradient(135deg,rgba(139,92,246,.22),rgba(217,70,239,.12));border-color:rgba(139,92,246,.3)}
.qr-wrap{display:flex;align-items:center;justify-content:center;padding:16px;background:#fff;border-radius:16px;margin:0 auto;width:fit-content;box-shadow:0 4px 24px rgba(0,0,0,.1)}
.dark .qr-wrap{background:#1e293b}

/* share btn on card */
.share-card-btn{transition:transform .15s,background .15s}
.share-card-btn:hover{transform:scale(1.15)}
/* ── CARD FOOTER VIEW COUNT ── */
.card-views-bar{
  border-top:1px solid rgba(148,163,184,.12);
  margin-top:10px;padding-top:9px;
}
.dark .card-views-bar{border-color:rgba(148,163,184,.08)}

/* ── SMOOTH BUTTON REVEAL ── */
.card .btn-group{
  opacity:0;transform:translateY(-2px);
  transition:opacity .18s,transform .18s;
}
.card:hover .btn-group{opacity:1;transform:translateY(0)}

/* ── TRENDING SCROLL FADE ── */
/* trending fade — removed */

/* ── PLATFORM MODAL LINK HOVER ── */
.plat-link{
  transition:all .16s;
  background:rgba(255,255,255,.7);
  border:1.5px solid rgba(148,163,184,.15);
}
.dark .plat-link{background:rgba(15,23,42,.5);border-color:rgba(148,163,184,.1)}
.plat-link:hover{transform:translateX(3px)}

/* ── SCROLL PROGRESS BAR ── */
#scrollProgress{
  position:absolute;top:0;left:0;height:2px;
  background:linear-gradient(90deg,#8b5cf6,#d946ef,#8b5cf6);
  background-size:200% 100%;
  animation:progress-shimmer 2s linear infinite;
  z-index:60;pointer-events:none;
  border-radius:0 2px 2px 0;
  box-shadow:0 0 8px rgba(139,92,246,.5);
}
@keyframes progress-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── SCROLL-TO-TOP FAB ── */
#scrollTop{
  box-shadow:0 8px 24px rgba(0,0,0,.18),0 2px 8px rgba(139,92,246,.25);
  border-radius:14px;
}
.dark #scrollTop{box-shadow:0 8px 24px rgba(0,0,0,.4),0 2px 8px rgba(139,92,246,.4)}

/* ── VERIFIED ICON (inline next to name) ── */
.fa-circle-check[title]{cursor:default}


/* ── REASON BUTTON SELECTED ── */
.reason-btn{transition:all .15s;cursor:pointer}
.reason-btn.active{border-color:#f59e0b;color:#d97706;background:rgba(254,243,199,.8)}
.dark .reason-btn.active{background:rgba(245,158,11,.1)}
/* ── ADD CARD (Shaxsiy ro'yxatdagi + karta) ── */
.add-card{
  background:rgba(139,92,246,.04);
  transition:background .2s,border-color .2s,transform .2s;
}
.dark .add-card{background:rgba(139,92,246,.06)}
.add-card:hover{
  background:rgba(139,92,246,.08);
  transform:translateY(-2px);
}
.dark .add-card:hover{background:rgba(139,92,246,.12)}
/* ── FILTER CHIPS (yangi dizayn) ── */
.filter-chip{
  transition:all .16s cubic-bezier(.4,0,.2,1);
  cursor:pointer;user-select:none;
}
.filter-chip:hover{transform:translateY(-1px)}
.filter-chip:active{transform:scale(.96)}

/* ── VERIFIED SHIELD ICON ── */
.verified-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:4px;
  background:linear-gradient(135deg,#059669,#0d9488);
  color:#fff;font-size:8px;
  box-shadow:0 1px 4px rgba(5,150,105,.35);
  shrink:0;flex-shrink:0;
  cursor:default;
}
.dark .verified-icon{
  background:linear-gradient(135deg,#10b981,#14b8a6);
  box-shadow:0 1px 4px rgba(16,185,129,.3);
}
/* ── TOP RIBBON (karta chap yuqori burchagi) ── */
.ribbon-top{
  position:absolute;
  top:10px;left:-22px;
  width:80px;
  transform:rotate(-45deg);
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff;
  font-size:8px;font-weight:900;
  text-align:center;
  padding:3px 0;
  letter-spacing:.3px;
  z-index:16;
  pointer-events:none;
  box-shadow:0 2px 6px rgba(239,68,68,.35);
}

/* ── TRENDING CARD (sticky bar ichida) ── */
.trend-card{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.88);
  border:1.5px solid rgba(148,163,184,.2);
  border-radius:16px;
  padding:7px 14px 7px 10px;
  cursor:pointer;
  transition:all .18s cubic-bezier(.4,0,.2,1);
  white-space:nowrap;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.dark .trend-card{background:rgba(30,41,59,.75);border-color:rgba(148,163,184,.14);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.trend-card:hover{border-color:rgba(139,92,246,.45);transform:scale(1.02);box-shadow:0 6px 18px rgba(139,92,246,.18);background:rgba(255,255,255,.98)}
.dark .trend-card:hover{background:rgba(30,41,59,.95)}
.trend-card .t-logo{width:30px;height:30px;border-radius:9px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.1);flex-shrink:0}
.trend-card .t-rank{font-size:9px;font-weight:900;min-width:18px;text-align:center}
.trend-card .t-name{font-size:12px;font-weight:700;color:#1e293b;transition:color .15s}
.dark .trend-card .t-name{color:#f1f5f9}
.trend-card:hover .t-name{color:#7c3aed}
.trend-card .t-count{display:flex;align-items:center;gap:2px;font-size:10px;font-weight:800;color:#f97316;margin-left:2px}

/* ── LIST BUILDER MODAL ── */
#builderList::-webkit-scrollbar{width:3px}
#builderList::-webkit-scrollbar-track{background:transparent}
#builderList::-webkit-scrollbar-thumb{background:rgba(139,92,246,.25);border-radius:99px}

/* ── SHARE LIST MODAL ── */
#shareListModal .select-text{-webkit-user-select:text!important;user-select:text!important}

/* ── IMPORT LIST MODAL ── */
#importItemsList::-webkit-scrollbar{width:3px}
#importItemsList::-webkit-scrollbar-track{background:transparent}
#importItemsList::-webkit-scrollbar-thumb{background:rgba(139,92,246,.25);border-radius:99px}
#importItemsList label input[type=checkbox]{cursor:pointer}
#importItemsList label.opacity-50{cursor:default}

/* ── CARD ACTION BUTTONS ── */
.card-action-btn{
  width:32px;height:32px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
  flex-shrink:0;
}
.card-action-btn:hover{transform:scale(1.1)}
@media(max-width:768px){
  .card-action-btn{width:36px;height:36px;border-radius:12px;}
}

/* ── MOBILE MODAL BUTTONS — bigger touch targets ── */
@media(max-width:768px){
  #reportSubmitBtn{
    padding-top:1rem!important;padding-bottom:1rem!important;
    font-size:.9375rem!important;border-radius:1rem!important;
    min-height:54px;
  }
  #suggestSubmitBtn{
    padding-top:1rem!important;padding-bottom:1rem!important;
    font-size:.9375rem!important;border-radius:1rem!important;
    min-height:54px;
  }
  .reason-btn{
    padding-top:.625rem!important;padding-bottom:.625rem!important;
    font-size:.75rem!important;
  }
}
/* ── XAVFSIZLIK: Tanlash va nusxalashni cheklash ── */
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
input,textarea,select{-webkit-user-select:text!important;-moz-user-select:text!important;user-select:text!important}
img{-webkit-user-drag:none;user-drag:none;pointer-events:none}
.card img{pointer-events:auto} /* kartalar bosilsin */
/* ── PERFORMANCE OPTIMIZATIONS ── */
/* GPU acceleration for animated elements */
.card,.trend-card,.chip,.filter-chip,.fav-btn,.share-card-btn{will-change:transform}
/* Reduce layout thrashing on scroll */
.card-logo-wrap img,.trend-card .t-logo img{contain:strict}
/* Smooth font rendering */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeSpeed}
/* Faster modal animations */
[id$="Modal"],[id$="Box"]{contain:layout style}
/* Prevent repaints on hover for safe elements */
.nav-active,.pill-active,.chip.on{will-change:auto}
/* Hardware-accelerated spinner */
.fa-spin{animation:fa-spin .75s linear infinite;will-change:transform}

/* ── BUILDER ADD FORM ── */
#builderAddForm{transition:none}
#builderAddChevron{display:inline-block;transition:transform .2s cubic-bezier(.4,0,.2,1)}
.builder-custom-group .builder-item{background:rgba(139,92,246,.05)}
.dark .builder-custom-group .builder-item{background:rgba(139,92,246,.1)}

/* ── BUILDER GRID CARDS ── */
/* has-[:checked] CSS selector for native checkbox state */
.builder-item{contain:layout style}
/* Grid custom items spacing */
#builderCustomItems{min-height:0}
/* Mobile toggle chevron */
#bcMobileChevron{display:inline-block;will-change:transform}
/* Smooth expand */
#bcMobileFields{animation:fadeUp .18s ease-out}
/* Android/iOS input focus rings */
#bcAndroid:focus{border-color:rgba(16,185,129,.5)}
#bcIos:focus{border-color:rgba(100,116,139,.5)}
/* ════ ONBOARDING ════ */
.ob-box{background:#fff;border:1px solid rgba(0,0,0,.08)}
.dark .ob-box{background:#0f1629;border:1px solid rgba(255,255,255,.08)}
.ob-backdrop{animation:obFadeIn .35s ease-out forwards}
@keyframes obFadeIn{from{opacity:0}to{opacity:1}}
.ob-header{background:linear-gradient(135deg,#7c3aed 0%,#a855f7 50%,#ec4899 100%)}
.ob-header-bg{position:absolute;inset:0;background-image:radial-gradient(circle at 80% 20%,rgba(255,255,255,.15) 0,transparent 45%),radial-gradient(circle at 10% 80%,rgba(255,255,255,.10) 0,transparent 40%);pointer-events:none}
.ob-step-1 .ob-header{background:linear-gradient(135deg,#0369a1 0%,#0ea5e9 50%,#06b6d4 100%)}
.ob-step-2 .ob-header{background:linear-gradient(135deg,#059669 0%,#10b981 50%,#34d399 100%)}
.ob-icon{backdrop-filter:blur(10px);background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.3)}
.ob-dot{width:24px;height:5px;border-radius:9px;background:rgba(255,255,255,.3);transition:all .3s cubic-bezier(.4,0,.2,1)}
.ob-dot.active{width:32px;background:#fff}
.ob-feat{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-radius:16px;background:rgba(139,92,246,.05);border:1px solid rgba(139,92,246,.1);transition:transform .2s}
.dark .ob-feat{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.18)}
.ob-feat:hover{transform:translateX(3px)}
.ob-step-1 .ob-feat{background:rgba(14,165,233,.05);border-color:rgba(14,165,233,.12)}
.dark .ob-step-1 .ob-feat{background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.2)}
.ob-step-2 .ob-feat{background:rgba(16,185,129,.05);border-color:rgba(16,185,129,.12)}
.dark .ob-step-2 .ob-feat{background:rgba(16,185,129,.08);border-color:rgba(16,185,129,.2)}
.ob-feat-ico{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.ob-btn-next{background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;box-shadow:0 6px 20px rgba(139,92,246,.35)}
.ob-btn-next:hover{opacity:.92}
.ob-step-1 .ob-btn-next{background:linear-gradient(135deg,#0369a1,#0ea5e9);box-shadow:0 6px 20px rgba(14,165,233,.35)}
.ob-step-2 .ob-btn-next{background:linear-gradient(135deg,#059669,#10b981);box-shadow:0 6px 20px rgba(16,185,129,.35)}
.ob-progress{position:absolute;bottom:0;left:0;height:2px;background:rgba(255,255,255,.5);transition:width .4s cubic-bezier(.4,0,.2,1)}
@keyframes obSlideIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes obSlideInLeft{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.ob-slide-in{animation:obSlideIn .28s cubic-bezier(.4,0,.2,1) forwards}
.ob-slide-in-left{animation:obSlideInLeft .28s cubic-bezier(.4,0,.2,1) forwards}

/* ════ CATEGORY SEARCH in top bar ════ */
#catSWrap input:focus{width:260px}
#catSWrap input{transition:width .25s cubic-bezier(.4,0,.2,1),border-color .15s,box-shadow .15s}

/* ════ SEARCH DROP — full text items ════ */
.s-drop-item-desc{color:rgb(148 163 184);font-size:11px;line-height:1.4;margin-top:1px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.dark .s-drop-item-desc{color:rgb(100 116 139)}