/* ===========================================================
   WINR v13 — JOIN NOTIFICATIONS + FOR YOU STYLES
   =========================================================== */

/* ── 1. JOIN TOASTS — bottom-left, NO bg card, just text ── */
.v13-join-container {
  position: fixed;
  bottom: 100px; /* Right above the bottom nav */
  left: 32px;
  z-index: 4000;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  pointer-events: none;
}

.v13-join-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent; /* No background card */
}
.v13-join-toast.in {
  opacity: 1;
  transform: translateY(0);
}
.v13-join-toast.out {
  opacity: 0;
  transform: translateY(-10px);
  transition-duration: 0.4s;
}

.v13-jt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}

.v13-jt-text {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.v13-jt-text strong {
  font-weight: 700;
  color: #fff;
}

.v13-jt-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
  margin-left: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}


/* ── 2. FOR YOU — LOG IN CARD (Super Transparent) ── */
.v13-foryou-empty {
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.12); /* Super transparent border */
  background: transparent; /* No solid background, completely transparent to show main bg */
  padding: 12px 20px !important;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px !important;
}

.v13-fy-empty-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2px !important;
}
.v13-fy-empty-icon svg {
  width: 12px !important;
  height: 12px !important;
}

.v13-fy-empty-title {
  font-size: 14px !important;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: #fff;
  margin: 0;
}

.v13-fy-empty-text {
  font-size: 12px !important;
  color: rgba(255, 255, 255, 0.40);
  line-height: 1.35;
  max-width: 400px;
  margin: 0 0 2px 0;
}

.v13-fy-btn-login {
  height: 26px !important;
  padding: 0 12px !important;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px !important;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
}
.v13-fy-btn-login:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

/* ── EXPLORE SEARCH BAR (lives in app.js renderDirectory) ── */
:is(.directory-page, .homepage) .explore-search-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
:is(.directory-page, .homepage) .explore-search {
  position: relative;
  width: 100%;
  max-width: 920px;
}
:is(.directory-page, .homepage) .explore-search input {
  width: 100%;
  height: 64px;
  padding: 0 140px 0 60px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: #fff;
  font-family: inherit;
  outline: none;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  transition: border-color .18s, background .18s, box-shadow .18s;
}
:is(.directory-page, .homepage) .explore-search input::placeholder {
  color: rgba(255,255,255,0.35);
  font-weight: 500;
}
:is(.directory-page, .homepage) .explore-search input:focus {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.22);
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.06),
    0 14px 36px rgba(0,0,0,0.32);
}
:is(.directory-page, .homepage) .explore-search-icon {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.5);
  pointer-events: none;
  display: flex;
}
:is(.directory-page, .homepage) .explore-search input:focus ~ .explore-search-icon,
:is(.directory-page, .homepage) .explore-search:focus-within .explore-search-icon {
  color: #fff;
}
:is(.directory-page, .homepage) .explore-search-clear {
  position: absolute;
  right: 84px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: none;
  color: rgba(255,255,255,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s;
}
:is(.directory-page, .homepage) .explore-search-clear:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
}
:is(.directory-page, .homepage) .explore-search-clear.visible { display: flex; }
:is(.directory-page, .homepage) .explore-search-kbd {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
}

/* Empty state for explore filter */
.explore-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px 40px;
  color: rgba(255,255,255,0.55);
}
.explore-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
}
.explore-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.explore-empty-text {
  font-size: 13px;
  line-height: 1.5;
  max-width: 380px;
  margin: 0 auto;
}
.explore-btn-ghost {
  padding: 9px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.explore-btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
}
.explore-btn-primary {
  padding: 9px 16px;
  background: #fff;
  border: none;
  color: #0a0a0d;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.explore-btn-primary:hover { transform: translateY(-1px); }

@media (max-width: 720px) {
  :is(.directory-page, .homepage) .explore-search input {
    height: 54px;
    font-size: 15px;
    padding: 0 56px 0 50px;
    border-radius: 14px;
  }
  :is(.directory-page, .homepage) .explore-search-icon { left: 18px; }
  :is(.directory-page, .homepage) .explore-search-icon svg { width: 18px; height: 18px; }
  :is(.directory-page, .homepage) .explore-search-kbd { display: none; }
  :is(.directory-page, .homepage) .explore-search-clear { right: 14px; width: 26px; height: 26px; }
}

/* ── 3. FOR YOU — AUTHED MINIMAL CARDS (Skool / Discord style) ── */
.v13-foryou-authed {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.v13-fy-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}
.v13-fy-titlewrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.v13-fy-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #fff;
  margin: 0;
}
.v13-fy-chip {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.v13-fy-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}

.v13-fy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.v13-fy-card {
  position: relative;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  cursor: pointer;
  transition: transform .28s cubic-bezier(0.16,1,0.3,1),
              border-color .28s ease,
              background .28s ease,
              box-shadow .28s ease;
}
.v13-fy-card:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

.v13-fy-banner {
  position: relative;
  height: 96px;
  background-size: cover;
  background-position: center;
}
.v13-fy-banner-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
}

.v13-fy-pricepill {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
}
.v13-fy-pricepill.is-free {
  color: #39FF14;
}

.v13-fy-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 16px;
  margin-top: -22px;
  position: relative;
  z-index: 2;
}
.v13-fy-monogram {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.v13-fy-meta {
  flex: 1;
  min-width: 0;
  padding-top: 22px;
}
.v13-fy-cat {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}
.v13-fy-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
  margin: 0 0 6px 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v13-fy-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}
.v13-fy-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.v13-fy-stat-sep {
  color: rgba(255,255,255,0.25);
}
.v13-fy-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #39FF14;
  box-shadow: 0 0 8px rgba(57,255,20,0.6);
  border-color: rgba(255,255,255,0.22);
}
.explore-btn-primary {
  padding: 9px 16px;
  background: #fff;
  border: none;
  color: #0a0a0d;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s;
}
.explore-btn-primary:hover { transform: translateY(-1px); }

@media (max-width: 720px) {
  :is(.directory-page, .homepage) .explore-search input {
    height: 54px;
    font-size: 15px;
    padding: 0 56px 0 50px;
    border-radius: 14px;
  }
  :is(.directory-page, .homepage) .explore-search-icon { left: 18px; }
  :is(.directory-page, .homepage) .explore-search-icon svg { width: 18px; height: 18px; }
  :is(.directory-page, .homepage) .explore-search-kbd { display: none; }
  :is(.directory-page, .homepage) .explore-search-clear { right: 14px; width: 26px; height: 26px; }
}

/* ── 3. FOR YOU — AUTHED MINIMAL CARDS (Skool / Discord style) ── */
.v13-foryou-authed {
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.v13-fy-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 20px;
}
.v13-fy-titlewrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.v13-fy-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #fff;
  margin: 0;
}
.v13-fy-chip {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.v13-fy-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  font-weight: 500;
}

.v13-fy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.v13-fy-card {
  position: relative;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  cursor: pointer;
  transition: transform .28s cubic-bezier(0.16,1,0.3,1),
              border-color .28s ease,
              background .28s ease,
              box-shadow .28s ease;
}
.v13-fy-card:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}

.v13-fy-banner {
  position: relative;
  height: 96px;
  background-size: cover;
  background-position: center;
}
.v13-fy-banner-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%);
}

.v13-fy-pricepill {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
}
.v13-fy-pricepill.is-free {
  color: #39FF14;
}

.v13-fy-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 16px;
  margin-top: -22px;
  position: relative;
  z-index: 2;
}
.v13-fy-monogram {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.v13-fy-meta {
  flex: 1;
  min-width: 0;
  padding-top: 22px;
}
.v13-fy-cat {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}
.v13-fy-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
  margin: 0 0 6px 0;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v13-fy-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  font-weight: 500;
}
.v13-fy-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.v13-fy-stat-sep {
  color: rgba(255,255,255,0.25);
}
.v13-fy-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #39FF14;
  box-shadow: 0 0 8px rgba(57,255,20,0.6);
}

/* ── Responsive ── */
@media (max-width: 720px) {
  .v13-join-container { left: 12px; bottom: 80px; }
  .v13-fy-grid { grid-template-columns: 1fr; }
}

/* ── 4. TOP-RIGHT SKOOL PLUS DROPDOWN (PREMIUM GLASSMORPHISM) ── */
.skool-plus-dropdown-wrap {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skool-plus-btn {
  width: 48px;
  height: 48px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding: 0;
}

.skool-plus-btn:hover {
  color: #ffffff !important;
  transform: scale(1.15) translateY(-0.5px);
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}

.skool-plus-btn:active {
  transform: scale(0.93);
}

.skool-plus-btn svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.5;
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Chevron Down rotates 180 degrees to point Up when dropdown is open */
.skool-plus-btn.open svg {
  transform: rotate(180deg);
}

.skool-plus-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 295px; /* Even Larger Dropdown Pop Up */
  background: rgba(20, 22, 28, 0.60) !important; /* Lighter highly translucent glass! */
  backdrop-filter: blur(36px) saturate(160%) !important; /* Beautiful glass translucent blur! */
  -webkit-backdrop-filter: blur(36px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important; /* Hairline edge highlight */
  border-radius: 16px;
  padding: 10px; /* Roomier padding */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 60px rgba(0, 0, 0, 0.6) !important;
  z-index: 1000;
  animation: skoolDropdownIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: top right;
}

@keyframes skoolDropdownIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.skool-plus-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px !important;
  padding: 13px 16px !important; /* Roomier item padding */
  background: transparent;
  border: none;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16.5px !important; /* Larger Font Size! */
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.skool-plus-item:hover {
  background: rgba(255, 255, 255, 0.08) !important; /* Premium translucent hover highlight */
  color: #fff;
  transform: translateX(4px);
}

.skool-plus-icon-box {
  width: 32px !important; /* Larger Icon Box */
  height: 32px !important;
  border-radius: 9px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.15s ease;
  flex-shrink: 0;
  color: #fff !important;
}

.skool-plus-icon-box svg {
  width: 15px !important;
  height: 15px !important;
}

.skool-plus-item:hover .skool-plus-icon-box {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: scale(1.08);
}

/* ── 5. WINR TOOLKIT MODAL RESTYLING (PREMIUM TRANS-BLUR DECK) ── */
.dl-modal.toolkit-modal {
  max-width: 880px !important;
  background: rgba(20, 22, 28, 0.60) !important; /* Low opacity Translucent instead of Black! */
  backdrop-filter: blur(48px) saturate(160%) !important; /* Beautiful glass translucent blur! */
  -webkit-backdrop-filter: blur(48px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 32px 80px rgba(0, 0, 0, 0.65) !important;
  padding: 38px !important; /* Generous layout padding */
}

.dl-content h2 {
  font-size: 32px !important; /* Large Title Font! */
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.dl-content p {
  font-size: 16.5px !important; /* Large Subtitle Font! */
  color: rgba(255, 255, 255, 0.5) !important;
  line-height: 1.6 !important;
  margin-bottom: 36px;
}

.toolkit-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  margin-top: 16px;
  text-align: left;
}

.toolkit-column {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.toolkit-section-title {
  font-size: 14.5px !important; /* Large Section Title! */
  font-weight: 800;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 8px;
}

.toolkit-section-title svg {
  color: rgba(255, 255, 255, 0.45);
}

.toolkit-tools-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Premium styled dark download buttons to match theme - Translucent Blur */
.dl-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px !important; /* Spacious gap */
  padding: 16px 22px !important; /* Larger app button padding */
  border-radius: 12px !important;
  cursor: pointer;
  text-align: left;
  background: rgba(255, 255, 255, 0.03) !important; /* Clean Translucent! */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #ffffff !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.dl-btn svg {
  width: 24px !important; /* Larger SVGs! */
  height: 24px !important;
  color: #ffffff !important;
  opacity: 0.85;
  transition: opacity 0.22s, transform 0.22s;
}

.dl-btn:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.08) !important;
}

.dl-btn:hover svg {
  opacity: 1;
  transform: scale(1.08);
}

.dl-btn-title {
  font-size: 16px !important; /* Larger title font */
  font-weight: 700;
  color: #fff;
  display: block;
}

.dl-btn-sub {
  font-size: 12.5px !important; /* Larger subtitle font */
  color: rgba(255, 255, 255, 0.4);
  display: block;
  margin-top: 4px;
}

/* Toolkit tools rows styles - Translucent Blur + Pure White Icons */
.toolkit-tool-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px !important; /* Roomier gap */
  padding: 16px !important; /* Large tool row padding */
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.toolkit-tool-row:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  transform: translateX(3px) translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.toolkit-tool-icon {
  width: 36px !important; /* Larger Tool Icon Container */
  height: 36px !important;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  transition: all 0.2s ease;
}

.toolkit-tool-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.toolkit-tool-row:hover .toolkit-tool-icon {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  transform: scale(1.08);
}

.toolkit-tool-info {
  flex: 1;
  min-width: 0;
}

.toolkit-tool-name {
  font-size: 16px !important; /* Larger Name Font! */
  font-weight: 700;
  color: #fff;
}

.toolkit-tool-desc {
  font-size: 12.5px !important; /* Larger description font! */
  color: rgba(255, 255, 255, 0.45);
  margin-top: 4px; /* More spacing */
}

@media (max-width: 768px) {
  .dl-modal.toolkit-modal {
    max-width: calc(100vw - 24px) !important;
  }
  .toolkit-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}