/* ═══════════════════════════════════════════════════════════════
   TamilPSD UI UPGRADE v20 — Premium Dark Editorial
   ─────────────────────────────────────────────────────────────
   Loads AFTER style.css — enhances without breaking
   Direction: Luxury dark • Refined gold • Smooth micro-interactions
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. REFINED COLOR SYSTEM ─────────────────────────────────── */
:root {
  --glow-gold: 0 0 40px rgba(245,166,35,.12), 0 0 80px rgba(245,166,35,.06);
  --glow-coral: 0 0 40px rgba(255,99,64,.1);
  --shadow-card: 0 4px 24px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.2);
  --shadow-card-hover: 0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(245,166,35,.25);
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
  --radius-xl: 20px;
}

/* Subtle noise texture overlay on body */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: var(--noise);
  background-repeat: repeat;
  background-size: 256px;
  opacity: .4;
  mix-blend-mode: overlay;
}

/* ── 2. HEADER — Premium Glass ────────────────────────────────── */
header {
  background: rgba(13,13,20,.85) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 30px rgba(0,0,0,.3) !important;
}
header::after {
  height: 1px !important;
  background: linear-gradient(90deg, transparent 5%, var(--gold) 30%, var(--coral) 60%, transparent 95%) !important;
  opacity: .5 !important;
}
header.scrolled {
  background: rgba(10,10,16,.95) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 40px rgba(0,0,0,.5) !important;
}

/* Logo icon — subtle pulse glow */
.logo-icon {
  box-shadow: 0 3px 14px var(--gold-g), inset 0 1px 0 rgba(255,255,255,.2) !important;
  transition: all .3s var(--sp) !important;
}
.logo:hover .logo-icon {
  transform: scale(1.1) rotate(-6deg) !important;
  box-shadow: 0 6px 28px rgba(245,166,35,.35), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* Search — refined focus state */
.hdr-search input {
  border-radius: 12px !important;
  transition: all .3s var(--e) !important;
}
.hdr-search input:focus {
  border-color: rgba(245,166,35,.4) !important;
  box-shadow: 0 0 0 4px rgba(245,166,35,.08), 0 4px 20px rgba(0,0,0,.2) !important;
}

/* Nav links — subtle underline animation */
nav a {
  position: relative !important;
  padding: 6px 14px !important;
}
nav a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: var(--gold) !important;
  border-radius: 2px !important;
  transition: all .25s var(--e) !important;
  transform: translateX(-50%) !important;
}
nav a:hover::after,
nav a.active::after {
  width: calc(100% - 28px) !important;
}

/* Sign-in button — premium border */
.hdr-signin-btn {
  border-radius: 10px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  backdrop-filter: blur(8px) !important;
  transition: all .25s var(--e) !important;
}
.hdr-signin-btn:hover {
  background: rgba(245,166,35,.1) !important;
  border-color: rgba(245,166,35,.3) !important;
  color: var(--gold) !important;
  transform: translateY(-1px) !important;
}

/* ── 3. HERO — Cinematic ──────────────────────────────────────── */
.hero {
  min-height: 480px !important;
  position: relative !important;
}

/* Animated gradient orbs behind hero */
.hero::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: -120px; right: -80px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(245,166,35,.1) 0%, transparent 65%);
  border-radius: 50%;
  animation: heroOrb1 8s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}
.hero::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: -80px; left: -60px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(255,99,64,.08) 0%, transparent 65%);
  border-radius: 50%;
  animation: heroOrb2 10s ease-in-out infinite alternate;
  z-index: 1;
  pointer-events: none;
}
@keyframes heroOrb1 {
  0% { transform: translate(0,0) scale(1); opacity: .6; }
  100% { transform: translate(-40px, 30px) scale(1.15); opacity: .9; }
}
@keyframes heroOrb2 {
  0% { transform: translate(0,0) scale(1); opacity: .5; }
  100% { transform: translate(30px, -20px) scale(1.1); opacity: .8; }
}

/* Hero headline — animated gradient text */
.hero-headline em {
  background: linear-gradient(135deg, var(--gold) 0%, var(--coral) 40%, var(--gold) 80%, var(--coral) 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: gradientShift 4s ease-in-out infinite !important;
}
@keyframes gradientShift {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* Hero pill — glass effect */
.hero-pill {
  background: rgba(245,166,35,.08) !important;
  border: 1px solid rgba(245,166,35,.2) !important;
  backdrop-filter: blur(12px) !important;
  padding: 6px 16px !important;
  box-shadow: 0 2px 12px rgba(245,166,35,.08) !important;
}

/* Hero CTA button — larger, bolder */
.btn-hero-primary {
  padding: 15px 32px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(245,166,35,.3), inset 0 1px 0 rgba(255,255,255,.2) !important;
  letter-spacing: .3px !important;
}
.btn-hero-primary:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 16px 48px rgba(245,166,35,.4), inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* Hero stats — refined */
.hero-stat-num {
  font-size: 28px !important;
  background: linear-gradient(135deg, var(--gold), var(--gold2)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-shadow: none !important;
}
.hero-stat-lbl {
  font-size: 11px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

/* ── 4. QUICK ACTION BAR — Premium pills ──────────────────────── */
.hero-quickbar {
  background: linear-gradient(180deg, var(--bg1), var(--bg0)) !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  padding: 16px 24px !important;
  gap: 10px !important;
}

/* ── 5. CATEGORY PILLS — Refined ──────────────────────────────── */
.cat-pill {
  padding: 10px 18px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  background: var(--bg2) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: all .25s var(--e) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}
.cat-pill:hover {
  background: var(--bg3) !important;
  border-color: rgba(255,255,255,.12) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.25) !important;
}
.cat-pill.active {
  background: rgba(245,166,35,.12) !important;
  border-color: rgba(245,166,35,.3) !important;
  color: var(--gold) !important;
  box-shadow: 0 4px 16px rgba(245,166,35,.15), inset 0 0 0 1px rgba(245,166,35,.1) !important;
}

/* ── 6. DESIGN CARDS — Premium 3D Hover ───────────────────────── */
.design-card {
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform .35s var(--sp), box-shadow .35s var(--e), border-color .3s var(--e) !important;
  will-change: transform !important;
  overflow: hidden !important;
}
.design-card:hover {
  transform: translateY(-10px) scale(1.015) !important;
  border-color: rgba(245,166,35,.35) !important;
  box-shadow: var(--shadow-card-hover), var(--glow-gold) !important;
  z-index: 30 !important;
}

/* Card image — enhanced zoom */
.card-thumb {
  border-radius: 0 !important;
  min-height: 130px !important;
}
.card-thumb img {
  transition: transform .6s var(--e), filter .4s var(--e) !important;
}
.design-card:hover .card-thumb img {
  transform: scale(1.08) !important;
}

/* Card category badge — glass pill */
.card-cat {
  border-radius: 8px !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  background: rgba(0,0,0,.5) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  padding: 4px 10px !important;
  letter-spacing: .3px !important;
}
.design-card:hover .card-cat {
  background: var(--gold) !important;
  color: #0D0D14 !important;
  border-color: var(--gold) !important;
  box-shadow: 0 4px 16px rgba(245,166,35,.4) !important;
}

/* Card favourite button — refined */
.card-fav {
  border-radius: 8px !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background: rgba(0,0,0,.4) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  transition: all .2s var(--e) !important;
}

/* Card overlay — premium gradient */
.card-overlay {
  background: transparent !important;
}
.design-card:hover .card-overlay {
  background: linear-gradient(180deg, transparent 20%, rgba(8,8,18,.75) 100%) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

/* Download icon — larger glow */
.card-dl-icon-wrap {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(245,166,35,.5) !important;
}
.design-card:hover .card-dl-icon-wrap {
  box-shadow: 0 12px 48px rgba(245,166,35,.6), 0 0 0 8px rgba(245,166,35,.1) !important;
}

/* Download pill — bolder */
.card-dl-pill {
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 24px !important;
  letter-spacing: .5px !important;
  box-shadow: 0 4px 20px rgba(245,166,35,.4) !important;
}

/* ── 7. PAGINATION — Modern ───────────────────────────────────── */
.pagination-wrap {
  margin-top: 32px !important;
}
.page-btn {
  border-radius: 10px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  background: var(--bg2) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color: var(--t1) !important;
  transition: all .2s var(--e) !important;
}
.page-btn:hover:not(:disabled) {
  background: var(--bg3) !important;
  border-color: rgba(245,166,35,.25) !important;
  color: var(--gold) !important;
  transform: translateY(-2px) !important;
}
.page-btn.active {
  background: linear-gradient(135deg, var(--gold), var(--coral)) !important;
  color: #0D0D14 !important;
  border-color: transparent !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(245,166,35,.3) !important;
}
.page-btn:disabled {
  opacity: .35 !important;
}

/* ── 8. FEATURES SECTION — Cards with gradient border ─────────── */
.features-strip {
  background: linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 100%) !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
}
.features-intro h2 {
  font-size: 28px !important;
  letter-spacing: -.5px !important;
}
.feat-card {
  border-radius: var(--radius-xl) !important;
  padding: 24px !important;
  background: var(--bg2) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: var(--shadow-card) !important;
}
.feat-card:hover {
  border-color: rgba(245,166,35,.2) !important;
  box-shadow: var(--shadow-card-hover), var(--glow-gold) !important;
  background: var(--bg3) !important;
}
.feat-icon {
  font-size: 32px !important;
  margin-bottom: 14px !important;
}
.feat-link {
  margin-top: 12px !important;
  font-size: 12.5px !important;
}

/* ── 9. FOOTER — Modern & Clean ───────────────────────────────── */
footer {
  background: var(--bg1) !important;
  border-top: none !important;
  position: relative !important;
  padding: 0 24px !important;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245,166,35,.3) 30%, rgba(255,99,64,.3) 70%, transparent);
}
.footer-grid {
  padding: 52px 0 44px !important;
  gap: 40px !important;
}
.footer-brand {
  font-size: 24px !important;
  margin-bottom: 14px !important;
}
.footer-tagline {
  font-size: 13.5px !important;
  line-height: 1.8 !important;
  opacity: .7;
}
.footer-col h4 {
  font-size: 11.5px !important;
  letter-spacing: 2px !important;
  color: var(--gold) !important;
  margin-bottom: 16px !important;
  opacity: .7;
}
.footer-col ul a {
  font-size: 13.5px !important;
  padding: 2px 0 !important;
  transition: all .2s var(--e) !important;
}
.footer-col ul a:hover {
  color: var(--t0) !important;
  transform: translateX(4px);
  display: inline-block;
}
.footer-bottom {
  padding: 20px 0 !important;
  font-size: 12.5px !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
}

/* ── 10. BACK TO TOP — Glass pill ─────────────────────────────── */
#back-top {
  border-radius: 14px !important;
  width: 44px !important;
  height: 44px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  background: rgba(26,26,37,.8) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.3) !important;
  font-size: 18px !important;
}
#back-top:hover {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #0D0D14 !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 28px rgba(245,166,35,.3) !important;
}

/* ── 11. TOAST — Premium notification ─────────────────────────── */
.toast {
  border-radius: 14px !important;
  background: rgba(26,26,37,.92) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(245,166,35,.08) !important;
  padding: 12px 22px !important;
  font-weight: 600 !important;
}

/* ── 12. BREADCRUMB — Subtle ──────────────────────────────────── */
.breadcrumb {
  font-size: 12px !important;
  padding: 12px 24px !important;
  background: rgba(0,0,0,.15);
  border-bottom: 1px solid rgba(255,255,255,.03);
}

/* ── 13. SORT ROW — Refined controls ──────────────────────────── */
.sort-row select {
  border-radius: 10px !important;
  padding: 9px 16px !important;
  background: var(--bg2) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: all .2s var(--e) !important;
}
.sort-row select:hover {
  border-color: rgba(255,255,255,.12) !important;
}
#fav-filter-btn {
  border-radius: 10px !important;
  padding: 9px 16px !important;
  background: var(--bg2) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: all .25s var(--e) !important;
}
#fav-filter-btn:hover {
  border-color: rgba(255,99,64,.3) !important;
  background: rgba(255,99,64,.06) !important;
}
#fav-filter-btn.active {
  background: rgba(255,99,64,.12) !important;
  border-color: rgba(255,99,64,.3) !important;
  color: var(--coral) !important;
  box-shadow: 0 4px 16px rgba(255,99,64,.15) !important;
}

/* ── 14. SKELETON LOADING — Smoother shimmer ──────────────────── */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton .skel-thumb,
.skeleton .skel-line,
.dp-skel,
.dp-ttl-skel {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg4) 50%, var(--bg3) 75%) !important;
  background-size: 800px 100% !important;
  animation: shimmer 1.8s ease-in-out infinite !important;
  border-radius: 8px !important;
}

/* ── 15. MOBILE BOTTOM NAV — Premium ──────────────────────────── */
.mobile-bottom-nav {
  background: rgba(13,13,20,.95) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
  box-shadow: 0 -4px 30px rgba(0,0,0,.3) !important;
  padding: 8px 0 max(12px, env(safe-area-inset-bottom)) !important;
}
.mbn-item {
  border-radius: 12px !important;
  padding: 6px 12px !important;
  transition: all .2s var(--e) !important;
}
.mbn-item.active {
  background: rgba(245,166,35,.1) !important;
}
.mbn-item.active .mbn-label {
  color: var(--gold) !important;
  font-weight: 700 !important;
}

/* ── 16. DESIGN PAGE — Premium download button glow ───────────── */
.spg-dl-btn,
.dp-dl-btn,
.dp-download {
  border-radius: 16px !important;
  padding: 16px 22px !important;
  box-shadow: 0 8px 32px rgba(245,166,35,.35), inset 0 1px 0 rgba(255,255,255,.2) !important;
}
.spg-dl-btn:hover,
.dp-dl-btn:hover,
.dp-download:hover {
  box-shadow: 0 16px 48px rgba(245,166,35,.45), inset 0 1px 0 rgba(255,255,255,.3), 0 0 60px rgba(245,166,35,.12) !important;
}

/* ── 17. AUTH MODAL — Refined glass ───────────────────────────── */
.auth-modal {
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.7), var(--glow-gold) !important;
  padding: 36px 32px 32px !important;
}

/* ── 18. SCROLLBAR — Thinner, premium ─────────────────────────── */
::-webkit-scrollbar {
  width: 5px !important;
}
::-webkit-scrollbar-thumb {
  border-radius: 5px !important;
  background: linear-gradient(180deg, var(--gold), var(--coral)) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold) !important;
}

/* ── 19. SELECTION — Gold accent ──────────────────────────────── */
::selection {
  background: rgba(245,166,35,.2) !important;
  color: var(--gold2) !important;
}

/* ── 20. MOBILE RESPONSIVE REFINEMENTS ────────────────────────── */
@media (max-width: 560px) {
  .design-card {
    border-radius: 14px !important;
  }
  .hero-headline {
    font-size: clamp(26px, 7.5vw, 34px) !important;
    letter-spacing: -.8px !important;
  }
  .btn-hero-primary {
    padding: 13px 24px !important;
    font-size: 14px !important;
    width: 100% !important;
    justify-content: center !important;
  }
  .hero::before, .hero::after {
    display: none !important;
  }
  .footer-grid {
    gap: 24px !important;
    padding: 36px 0 32px !important;
  }
}

/* Light theme final overrides */
:root{
  --bg0:#f6f8fb !important; --bg1:#ffffff !important; --bg2:#ffffff !important;
  --bg3:#f3f5f9 !important; --bg4:#e9eef5 !important;
  --t0:#111827 !important; --t1:#334155 !important; --t2:#64748b !important;
  --b0:rgba(15,23,42,.06) !important; --b1:rgba(15,23,42,.12) !important; --b2:rgba(15,23,42,.2) !important;
  --gold:#2563eb !important; --gold2:#1d4ed8 !important; --gold-g:rgba(37,99,235,.18) !important;
  --gold-d:rgba(37,99,235,.1) !important; --gold-r:rgba(37,99,235,.35) !important; --coral:#0ea5e9 !important;
}
body,header,footer,.features-strip,.page-hero,.mobile-menu,.mobile-search-bar,.card,.tool-card,.result-card{background:var(--bg1)!important;color:var(--t0)!important}
header{border-bottom:1px solid var(--b1)!important;box-shadow:0 4px 20px rgba(15,23,42,.06)!important}
.hero{background:transparent!important;min-height:unset!important}