/* ═══════════════════════════════════════════════════════════════════
   TamilPSD — "Kolam Noir" premium theme  (loads LAST, after style.css + ui-upgrade.css)
   Warm black · temple gold → saffron · Fraunces / Manrope / Noto Sans Tamil
   Pure presentation layer: no IDs/hooks changed. Remove this file to roll back the look.
   ═══════════════════════════════════════════════════════════════════ */
/* Color tokens live in theme.css (light default / dark = Kolam Noir via [data-theme]).
   Shared font tokens kept here so pages without theme.css still get Manrope/Fraunces names. */
:root{
  --pm-sans:"Manrope","Noto Sans Tamil",system-ui,sans-serif;
  --pm-ta:"Noto Sans Tamil","Manrope",sans-serif;
  --pm-disp:"Fraunces","Noto Serif Tamil",Georgia,serif;
  --pm-ease:cubic-bezier(.22,1,.36,1);
  --pm-grad:linear-gradient(135deg,#f6d58e 0%,#e8b65a 42%,#ff8a1f 100%);
  --pm-card:rgba(255,240,215,.045);
}
/* Fallback if theme.css missing: keep Kolam Noir on dark attribute only */
html[data-theme="dark"]{
  --bg0:#0c0a08 !important; --bg1:#13100c !important; --bg2:#1a1611 !important; --bg3:#221d16 !important; --bg4:#2b241b !important;
  --t0:#fbf5ea !important; --t1:#d9cdb8 !important; --t2:#9a8f7e !important; --t3:#6d6458 !important;
  --b0:rgba(255,226,180,.06) !important; --b1:rgba(255,226,180,.11) !important; --b2:rgba(255,226,180,.2) !important;
  --gold:#e8b65a !important; --gold2:#f6d58e !important; --gold-g:rgba(232,182,90,.22) !important; --gold-d:rgba(232,182,90,.10) !important; --gold-r:rgba(232,182,90,.35) !important;
  --coral:#ff8a1f !important; --gd3:#f6d58e;
  --pm-grad:linear-gradient(135deg,#f6d58e 0%,#e8b65a 42%,#ff8a1f 100%);
  --pm-card:rgba(255,240,215,.045);
  color-scheme:dark;
}
html body{
  font-family:var(--pm-sans)!important; background:var(--bg0)!important; color:var(--t1)!important;
  background-image:radial-gradient(1100px 560px at 78% -8%,rgba(232,182,90,.12),transparent 60%),radial-gradient(800px 480px at -8% 6%,rgba(255,138,31,.07),transparent 60%)!important;
  background-repeat:no-repeat!important; background-attachment:scroll!important;
}
body::before{display:none!important}
::selection{background:rgba(232,182,90,.3);color:#fff}
h1,h2,h3,h4{color:var(--t0)}
:lang(ta),.pm-ta{font-family:var(--pm-ta)}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold)!important;outline-offset:2px}

/* ── HEADER ───────────────────────────────────────────────────────── */
html body header{background:rgba(12,10,8,.72)!important;backdrop-filter:blur(18px) saturate(1.3)!important;-webkit-backdrop-filter:blur(18px) saturate(1.3)!important;border-bottom:1px solid var(--b1)!important;box-shadow:none!important;color:var(--t0)!important}
html body header.scrolled{background:rgba(12,10,8,.9)!important;box-shadow:0 10px 40px -12px rgba(0,0,0,.8)!important}
header::after{display:block!important;opacity:.35!important;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--coral) 60%,transparent)!important}
.header-inner{max-width:1360px!important;height:68px!important}
.logo-icon{background:var(--pm-grad)!important;color:#1b1206!important;font-family:var(--pm-ta)!important;font-weight:800!important;box-shadow:0 6px 22px rgba(232,182,90,.35)!important;border-radius:11px!important}
.logo-name{font-family:var(--pm-sans)!important;font-weight:800!important;letter-spacing:-.02em;color:var(--t0)!important}
.logo-name span{background:var(--pm-grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.logo-sub{color:var(--t3)!important;letter-spacing:.18em!important}
nav a{color:var(--t2)!important;font-weight:600!important;border-radius:999px!important;font-size:13.5px!important}
nav a:hover{color:var(--t0)!important;background:var(--pm-card)!important}
nav a.active{color:var(--gold2)!important}
nav a.active::after{background:var(--pm-grad)!important}
.nav-contact{background:transparent!important;border:1px solid var(--b2)!important;color:var(--t0)!important;box-shadow:none!important}
.nav-pro{background:var(--pm-grad)!important;color:#1b1206!important;font-weight:800!important;margin-left:4px;box-shadow:0 8px 24px -8px rgba(255,138,31,.6)}
.nav-pro::after{display:none!important}
.hdr-search input{background:var(--pm-card)!important;border:1px solid var(--b1)!important;border-radius:999px!important;color:var(--t0)!important}
.hdr-search input:focus{border-color:var(--gold-r)!important;box-shadow:0 0 0 4px rgba(232,182,90,.12)!important}
.hdr-signin-btn{background:#fff!important;color:#1f1f1f!important;border:0!important;border-radius:999px!important;font-weight:700!important;padding:8px 16px!important}
.hdr-signin-btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px -8px rgba(255,255,255,.4)}
.hdr-user-menu{background:var(--pm-card)!important;border:1px solid var(--b1)!important}
.hdr-avatar{background:var(--pm-grad)!important;color:#1b1206!important}
.hdr-user-dropdown{background:#171310!important;border:1px solid var(--b2)!important;box-shadow:0 30px 60px -20px #000!important}
.hdr-dropdown-item{color:var(--t1)!important}.hdr-dropdown-item:hover{background:var(--pm-card)!important;color:var(--t0)!important}
.hamburger{border-color:var(--b1)!important}.hamburger span{background:var(--t1)!important}
html body .mobile-menu,html body .mobile-search-bar{background:#100d0a!important;border-color:var(--b1)!important}
.mobile-menu a{color:var(--t1)!important;border-color:var(--b0)!important}
.msb-inner{background:var(--pm-card)!important;border:1px solid var(--b1)!important;border-radius:999px!important}
.msb-inner input{background:transparent!important;color:var(--t0)!important}

/* ── HERO (homepage) ─────────────────────────────────────────────── */
html body .hero.pm-hero{position:relative;padding:64px 24px 36px!important;overflow:hidden;min-height:0!important;background:transparent!important}
.pm-hero::before{content:"";display:block!important;position:absolute;inset:0;background-image:radial-gradient(rgba(232,182,90,.14) 1.2px,transparent 1.3px);background-size:24px 24px;-webkit-mask-image:radial-gradient(720px 380px at 30% 35%,#000,transparent 75%);mask-image:radial-gradient(720px 380px at 30% 35%,#000,transparent 75%);pointer-events:none;animation:pmDrift 40s linear infinite}
@keyframes pmDrift{to{background-position:240px 120px}}
.pm-hero-inner{position:relative;max-width:1312px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.pm-hero-inner>*{min-width:0}
.pm-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 6px;border-radius:999px;border:1px solid var(--b2);background:rgba(232,182,90,.07);font-size:13px;font-weight:600;color:var(--gold2)}
.pm-eyebrow b{background:var(--pm-grad);color:#1b1206;padding:3px 9px;border-radius:999px;font-size:11px;letter-spacing:.06em}
.pm-h1{font:600 clamp(40px,5.2vw,68px)/1.02 var(--pm-disp)!important;color:var(--t0)!important;letter-spacing:-.025em;margin:22px 0 14px}
.pm-h1 em,.pm-grad-text{font-style:italic;background:var(--pm-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pm-h-ta{font:600 20px/1.5 var(--pm-ta);color:var(--gold2);opacity:.92;margin-bottom:10px}
.pm-lead{font-size:17px;color:var(--t2);max-width:540px;line-height:1.6}
.pm-search{position:relative;margin-top:28px;display:flex;align-items:center;gap:10px;height:66px;padding:0 8px 0 22px;border-radius:999px;background:rgba(26,22,17,.88);border:1px solid var(--b2);box-shadow:0 22px 60px -22px rgba(0,0,0,.9),0 0 0 6px rgba(232,182,90,.05);max-width:620px;transition:box-shadow .3s var(--pm-ease),border-color .3s}
.pm-search:focus-within{border-color:rgba(232,182,90,.6);box-shadow:0 22px 60px -22px rgba(0,0,0,.9),0 0 0 6px rgba(232,182,90,.14)}
.pm-search svg{color:var(--gold);flex:none;width:20px;height:20px}
html body #hero-search-input{flex:1;min-width:0;height:100%!important;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--t0)!important;font:500 16px var(--pm-sans)!important;padding:0!important;outline:none!important;border-radius:0!important}
#hero-search-input::placeholder{color:var(--t3)}
.pm-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:999px;font:700 14.5px var(--pm-sans);border:1px solid var(--b2);color:var(--t0);background:var(--pm-card);white-space:nowrap;cursor:pointer;transition:transform .25s var(--pm-ease),box-shadow .25s,background .25s;text-decoration:none}
.pm-btn:hover{transform:translateY(-2px)}
.pm-btn-gold{background:var(--pm-grad)!important;color:#1b1206!important;border:0!important;box-shadow:0 12px 30px -10px rgba(255,138,31,.6),inset 0 1px 0 rgba(255,255,255,.5)}
.pm-btn-gold:hover{box-shadow:0 18px 40px -10px rgba(255,138,31,.75),inset 0 1px 0 rgba(255,255,255,.5)}
.pm-btn-lg{height:56px;padding:0 30px;font-size:16px}
.pm-search .pm-btn{height:50px}
.pm-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--t3);align-items:center}
.pm-quick a{padding:6px 13px;border-radius:999px;border:1px solid var(--b1);color:var(--t1);transition:.2s}
.pm-quick a:hover{border-color:var(--gold-r);color:var(--gold2);background:rgba(232,182,90,.06)}
.pm-stats{display:flex;gap:34px;margin-top:32px;flex-wrap:wrap}
.pm-stats div{font-size:13px;color:var(--t3)}
.pm-stats b{display:block;font:800 24px var(--pm-sans);color:var(--t0);letter-spacing:-.02em}
.pm-collage{position:relative;height:500px}
.pm-tile{position:absolute;border-radius:18px;overflow:hidden;border:1px solid var(--b2);box-shadow:0 30px 70px -20px rgba(0,0,0,.95);background:var(--bg2);transition:transform .6s var(--pm-ease)}
.pm-tile img{width:100%;height:100%;object-fit:cover}
.pm-t1{left:0;top:40px;width:56%;height:290px;transform:rotate(-3deg)}
.pm-t2{right:0;top:0;width:48%;height:240px;transform:rotate(3deg)}
.pm-t3{right:6%;bottom:0;width:52%;height:240px;transform:rotate(-1.5deg)}
.pm-t4{left:8%;bottom:14px;width:38%;height:165px;transform:rotate(2deg)}
.pm-collage:hover .pm-t1{transform:rotate(-4deg) translateY(-6px)}
.pm-collage:hover .pm-t2{transform:rotate(4deg) translateY(-8px)}
.pm-collage:hover .pm-t3{transform:rotate(-2.5deg) translateY(-4px)}
.pm-glass{background:rgba(20,16,12,.66);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--b2);border-radius:14px}
.pm-float{position:absolute;z-index:3;padding:11px 14px;display:flex;gap:11px;align-items:center;font-size:12.5px;color:var(--t1);animation:pmFloat 6s ease-in-out infinite}
.pm-float b{color:var(--t0);display:block;font-size:13.5px}
.pm-float .ic{width:34px;height:34px;border-radius:10px;background:var(--pm-grad);display:grid;place-items:center;color:#1b1206;font-weight:900}
.pm-float.f2{animation-delay:-3s}
@keyframes pmFloat{50%{transform:translateY(-8px)}}

/* entrance animations */
.pm-in{opacity:0;transform:translateY(16px);animation:pmIn .9s var(--pm-ease) forwards}
.pm-d1{animation-delay:.06s}.pm-d2{animation-delay:.14s}.pm-d3{animation-delay:.22s}.pm-d4{animation-delay:.3s}.pm-d5{animation-delay:.4s}
@keyframes pmIn{to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--pm-ease),transform .8s var(--pm-ease)}
.reveal.visible{opacity:1;transform:none}

/* ── SECTIONS / CATEGORY TILES ──────────────────────────────────── */
.pm-wrap{max-width:1360px;margin:0 auto;padding:0 24px}
.pm-sec{padding:34px 0 8px}
.pm-sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px}
.pm-sec-h h2{font:600 32px/1.1 var(--pm-disp)!important;color:var(--t0)!important;letter-spacing:-.02em}
.pm-sec-h h2 small{display:block;font:600 14px var(--pm-ta);color:var(--gold);letter-spacing:0;margin-bottom:6px}
.pm-sec-h a{font-weight:700;color:var(--gold2);font-size:14px;white-space:nowrap}
.pm-cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.pm-cat{position:relative;height:150px;border-radius:18px;overflow:hidden;border:1px solid var(--b1);display:block;isolation:isolate;transition:transform .45s var(--pm-ease),border-color .3s,box-shadow .45s}
.pm-cat img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--pm-ease)}
.pm-cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,rgba(10,8,6,.94));z-index:1}
.pm-cat span{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:var(--t0);font-weight:800;font-size:16px;line-height:1.2}
.pm-cat span i{display:block;font:500 13px var(--pm-ta);color:var(--gold2);font-style:normal;margin-top:3px}
.pm-cat:hover{transform:translateY(-4px);border-color:var(--gold-r);box-shadow:0 24px 50px -20px rgba(232,182,90,.35)}
.pm-cat:hover img{transform:scale(1.07)}

/* category chips (rendered by app.js into #top-cats-grid-container) */
html body .top-cats-section{background:transparent!important;padding:24px 0 0!important;max-width:1360px;margin:0 auto}
html body .cat-layout-head{max-width:1360px!important;padding:0 24px!important;margin-bottom:14px!important}
html body .cat-layout-head h2{font:600 22px var(--pm-disp)!important;color:var(--t0)!important}
html body .cat-toggle-btn{background:var(--pm-card)!important;border:1px solid var(--b1)!important;color:var(--gold2)!important;border-radius:999px!important;font-weight:700!important}
html body .top-cats-grid{display:flex!important;flex-wrap:wrap!important;gap:10px!important;padding:0 24px 6px!important;grid-template-columns:none!important;transition:max-height .5s var(--pm-ease)}
html body .cat-pill{display:inline-flex!important;align-items:center!important;gap:8px!important;justify-content:flex-start!important;padding:9px 16px!important;border-radius:999px!important;background:var(--pm-card)!important;border:1px solid var(--b1)!important;color:var(--t1)!important;font:600 14px var(--pm-sans)!important;width:auto!important;transition:transform .25s var(--pm-ease),border-color .25s,background .25s,color .25s!important;cursor:pointer}
html body .cat-pill:hover{border-color:var(--gold-r)!important;color:var(--t0)!important;transform:translateY(-2px)}
html body .cat-pill.active{background:var(--pm-grad)!important;color:#1b1206!important;border-color:transparent!important;box-shadow:0 10px 26px -10px rgba(255,138,31,.6)!important}
.cat-pill .cat-count{display:none!important}
.cat-emo{font-size:14px;filter:saturate(.9)}

/* ── MAIN GRID + CARDS ──────────────────────────────────────────── */
html body .main-wrap{max-width:1360px!important;padding:18px 24px 40px!important;background:transparent!important}
.sec-head{display:flex;align-items:center;justify-content:space-between}
.results-count,#results-count{color:var(--t3)!important;font-size:13px!important}
html body .sort-row select,html body #reset-filters-btn,html body #fav-filter-btn{background:var(--pm-card)!important;border:1px solid var(--b1)!important;color:var(--t1)!important;border-radius:999px!important;padding:9px 16px!important;font:600 13px var(--pm-sans)!important}
html body .sort-row select option{background:#16120e;color:var(--t1)}
html body #fav-filter-btn.active{background:rgba(232,182,90,.14)!important;color:var(--gold2)!important;border-color:var(--gold-r)!important}
html body .design-card{background:var(--pm-card)!important;border:1px solid var(--b1)!important;border-radius:18px!important;overflow:hidden!important;box-shadow:none!important;transition:transform .45s var(--pm-ease),border-color .3s,box-shadow .45s var(--pm-ease)!important}
html body .design-card:hover{transform:translateY(-5px)!important;border-color:rgba(232,182,90,.5)!important;box-shadow:0 26px 60px -22px rgba(232,182,90,.38),0 10px 30px -12px rgba(0,0,0,.8)!important}
.design-card .card-thumb{background:var(--bg2)!important}
.design-card .card-thumb img{transition:transform .9s var(--pm-ease),opacity .5s!important}
.design-card:hover .card-thumb img{transform:scale(1.04)}
html body .card-overlay{display:flex!important;opacity:0;background:linear-gradient(180deg,transparent 45%,rgba(10,8,6,.85))!important;transition:opacity .35s var(--pm-ease)!important;align-items:flex-end!important;justify-content:center!important;padding-bottom:16px}
html body .design-card:hover .card-overlay{opacity:1}
.card-dl-icon-wrap{display:none!important}
html body .card-dl-pill{background:var(--pm-grad)!important;color:#1b1206!important;border-radius:999px!important;font-weight:800!important;box-shadow:0 10px 26px -8px rgba(255,138,31,.7)!important;transform:translateY(8px);transition:transform .35s var(--pm-ease)!important}
html body .design-card:hover .card-dl-pill{transform:none}
html body .card-cat{background:rgba(12,10,8,.72)!important;color:var(--t1)!important;border:1px solid var(--b2)!important;backdrop-filter:blur(8px);border-radius:999px!important;font:700 10.5px var(--pm-sans)!important;letter-spacing:.06em;text-transform:uppercase}
html body .card-fav{background:rgba(12,10,8,.6)!important;color:var(--t2)!important;border:1px solid var(--b2)!important;backdrop-filter:blur(8px)}
html body .card-fav.active{color:#ff6b6b!important}
.card-body{background:transparent!important}
.card-name{color:var(--t0)!important}
.card-cta{color:var(--gold2)!important}
.skeleton,.skel-thumb,.skel-line{background:linear-gradient(90deg,#17130f 0%,#211b15 50%,#17130f 100%)!important;background-size:200% 100%!important;animation:pmShimmer 1.4s linear infinite!important;border-radius:18px}
@keyframes pmShimmer{to{background-position:-200% 0}}
.design-card{animation:pmCard .6s var(--pm-ease) both}
@keyframes pmCard{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* pagination */
html body .pagination-wrap button,html body .pagination-wrap a,html body .pg-btn{background:var(--pm-card)!important;border:1px solid var(--b1)!important;color:var(--t1)!important;border-radius:12px!important}
html body .pagination-wrap .active,html body .pg-btn.active{background:var(--pm-grad)!important;color:#1b1206!important;border-color:transparent!important}
#load-more-wrap button,#load-more-btn{background:var(--pm-card)!important;border:1px solid var(--b2)!important;color:var(--t0)!important;border-radius:999px!important;padding:12px 30px!important;font-weight:700!important}

/* ── PRO BANNER ─────────────────────────────────────────────────── */
.pm-pro{position:relative;margin:40px 0 20px;border-radius:28px;overflow:hidden;border:1px solid rgba(232,182,90,.35);background:linear-gradient(120deg,#2a1a08 0%,#1a120a 45%,#120d08 100%);display:grid;grid-template-columns:1.2fr 1fr;align-items:center}
.pm-pro::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(246,213,142,.18) 1.2px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);mask-image:linear-gradient(90deg,#000,transparent 70%);pointer-events:none}
.pm-pro::after{content:"";position:absolute;top:-50%;left:-30%;width:40%;height:200%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);transform:rotate(18deg);animation:pmSheen 7s ease-in-out infinite;pointer-events:none}
@keyframes pmSheen{0%,60%{left:-40%}100%{left:130%}}
.pm-pro-l{position:relative;padding:50px 54px}
.pm-pro h3{font:600 40px/1.08 var(--pm-disp)!important;color:var(--t0)!important;margin:14px 0 12px;letter-spacing:-.02em}
.pm-pro h3 em{font-style:italic;background:var(--pm-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pm-pro p{color:var(--t1);max-width:500px}
.pm-ticks{display:flex;gap:20px;flex-wrap:wrap;margin:20px 0 26px;font-size:14px;color:var(--t1);list-style:none;padding:0}
.pm-ticks li::before{content:"✓";color:var(--gold);font-weight:900;margin-right:7px}
.pm-price{display:inline-flex;align-items:baseline;gap:6px;color:var(--t2);font-size:14px;margin-left:14px}
.pm-price b{font:800 28px var(--pm-sans);color:var(--t0)}
.pm-pro-r{position:relative;height:100%;min-height:330px}
.pm-pro-r img{position:absolute;border-radius:14px;border:1px solid var(--b2);box-shadow:0 30px 60px -20px #000;object-fit:cover}

/* ── FOOTER ─────────────────────────────────────────────────────── */
html body footer{background:transparent!important;border-top:1px solid var(--b1)!important;color:var(--t3)!important}
.footer-brand{font-family:var(--pm-sans)!important;font-weight:800!important;color:var(--t0)!important}
.footer-brand span{color:var(--gold)!important}
.footer-tagline,.footer-col a,.footer-bottom,.footer-bottom a{color:var(--t2)!important}
.footer-col h4{color:var(--t1)!important;letter-spacing:.1em;text-transform:uppercase;font-size:12.5px!important}
.footer-col a:hover,.footer-bottom a:hover{color:var(--gold2)!important}
.footer-bottom{border-top:1px solid var(--b1)!important}
#back-top{background:var(--pm-grad)!important;color:#1b1206!important;border:0!important}

/* mobile bottom nav */
html body .mobile-bottom-nav{background:rgba(20,16,12,.84)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;border:1px solid var(--b2)!important;border-radius:20px!important;left:10px!important;right:10px!important;bottom:10px!important;width:auto!important;box-shadow:0 20px 50px -10px #000!important}
.mbn-item{color:var(--t3)!important}.mbn-item.active,.mbn-item:hover{color:var(--gold2)!important}
.mbn-pro .mbn-icon{background:var(--pm-grad);color:#1b1206;width:44px;height:44px;border-radius:14px;display:grid!important;place-items:center;font:900 11px var(--pm-sans)!important;margin-top:-24px;box-shadow:0 10px 26px -6px rgba(255,138,31,.65)}

/* ── MODALS: auth + payment ─────────────────────────────────────── */
html body .auth-overlay{background:rgba(6,5,4,.72)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
html body .auth-modal{background:linear-gradient(180deg,#1c1712,#120f0b)!important;border:1px solid var(--b2)!important;border-radius:24px!important;color:var(--t1)!important;box-shadow:0 40px 100px -30px #000,0 0 0 1px rgba(232,182,90,.08)!important;animation:pmModal .45s var(--pm-ease)}
@keyframes pmModal{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
html body .auth-title{font-family:var(--pm-disp)!important;color:var(--t0)!important;font-weight:600!important}
html body .auth-sub{color:var(--t2)!important}
html body .auth-btn-google{background:#fff!important;color:#1f1f1f!important;border-radius:999px!important;font-weight:700!important}
html body .auth-modal-close{color:var(--t2)!important}
html body .pay-modal{max-width:520px!important;width:94%!important}
html body .pay-modal-plans{display:grid!important;gap:10px!important;margin:16px 0!important}
html body .pay-plan{position:relative;display:block!important;width:100%;text-align:left;cursor:pointer;background:var(--pm-card)!important;border:1px solid var(--b1)!important;border-radius:16px!important;padding:14px 16px!important;color:var(--t1)!important;transition:border-color .25s,background .25s,transform .25s var(--pm-ease)!important;font-family:var(--pm-sans)}
html body .pay-plan:hover{border-color:var(--gold-r)!important;transform:translateY(-1px)}
html body .pay-plan.selected{border-color:rgba(232,182,90,.8)!important;background:linear-gradient(120deg,rgba(232,182,90,.16),rgba(255,138,31,.05))!important;box-shadow:0 0 0 3px rgba(232,182,90,.12)}
.pay-plan.selected::after{content:"✓";position:absolute;right:14px;top:14px;width:22px;height:22px;border-radius:50%;background:var(--pm-grad);color:#1b1206;display:grid;place-items:center;font-weight:900;font-size:12px}
.pay-plan-ribbon{position:absolute;right:46px;top:13px;background:var(--pm-grad);color:#1b1206;font:800 10px var(--pm-sans);letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
html body .pay-plan-name{color:var(--t0)!important;font-weight:800!important;font-size:15px!important}
html body .pay-plan-price{color:var(--t0)!important;font:800 22px var(--pm-sans)!important;margin:4px 0 2px}
html body .pay-plan-price span{color:var(--t3)!important;font-size:13px!important;font-weight:600!important}
html body .pay-plan-feats{color:var(--t2)!important;font-size:12.5px!important}
html body .pay-btn{background:var(--pm-grad)!important;color:#1b1206!important;border:0!important;border-radius:999px!important;font:800 15.5px var(--pm-sans)!important;height:54px;width:100%;box-shadow:0 14px 34px -12px rgba(255,138,31,.7)!important;cursor:pointer}
html body .pay-btn:disabled{opacity:.7;cursor:wait}
html body .dl-limit-bar,html body .user-bar{background:var(--pm-card)!important;border:1px solid var(--b1)!important;border-radius:14px!important}
html body .user-avatar{background:var(--pm-grad)!important;color:#1b1206!important}
html body .user-name,html body .dl-limit-count{color:var(--t0)!important}
html body .dl-status-badge.premium{background:var(--pm-grad)!important;color:#1b1206!important}
html body .dl-status-badge.free{background:rgba(63,191,143,.16)!important;color:#8fe6c3!important}
html body #dl-status-bar{background:var(--pm-card)!important;border:1px solid var(--b1)!important;border-radius:14px!important;color:var(--t1)!important}
html body .toast{background:#1c1712!important;color:var(--t0)!important;border:1px solid var(--b2)!important;border-radius:999px!important}

/* ── DESIGN PAGE (functions/design/[category]/[id].js) ─────────── */
html body .breadcrumb{background:transparent!important;color:var(--t3)!important;max-width:1360px;margin:0 auto}
html body .breadcrumb a{color:var(--t2)!important}
html body .spg-wrap{max-width:1360px!important}
html body .spg-grid{grid-template-columns:1.55fr 1fr!important;gap:32px!important}
html body .spg-img-card{background:repeating-conic-gradient(#1b1712 0 25%,#16130f 0 50%) 0 0/22px 22px!important;border:1px solid var(--b2)!important;border-radius:24px!important;box-shadow:0 40px 90px -40px #000!important;padding:14px;animation:pmIn .8s var(--pm-ease) both}
html body .spg-img-card img{border-radius:14px}
html body .spg-img-bar{background:transparent!important;border-top:0!important;padding:12px 4px 2px!important}
html body .spg-title{font:600 30px/1.15 var(--pm-disp)!important;color:var(--t0)!important;letter-spacing:-.015em}
html body .spg-meta,html body .spg-fonts,html body .spg-steps,html body .spg-desc-box,html body .spg-tool{background:var(--pm-card)!important;border:1px solid var(--b1)!important;border-radius:18px!important}
html body .spg-mrow{border-color:var(--b0)!important}
html body .spg-mkey{color:var(--t3)!important;text-transform:uppercase;letter-spacing:.06em;font-size:11px!important}
html body .spg-mval{color:var(--t0)!important}
html body .spg-spec{background:rgba(255,255,255,.03)!important;border:1px solid var(--b1)!important;color:var(--t1)!important;border-radius:999px!important}
html body .spg-dl-btn{background:var(--pm-grad)!important;border-radius:18px!important;padding:17px 20px!important;box-shadow:0 18px 40px -14px rgba(255,138,31,.7)!important;animation:none!important;position:relative;overflow:hidden}
html body .spg-dl-btn::after{content:"";position:absolute;top:0;left:-40%;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:pmBtnSheen 4.5s ease-in-out infinite}
@keyframes pmBtnSheen{0%,70%{left:-40%}100%{left:130%}}
html body .spg-dl-main{font-family:var(--pm-sans)!important;font-weight:800!important;color:#1b1206!important;font-size:16px!important}
html body .spg-dl-sub{color:rgba(27,18,6,.72)!important;font-size:11.5px!important}
html body .spg-notice{background:rgba(232,182,90,.07)!important;border-color:rgba(232,182,90,.22)!important;color:var(--t1)!important;border-radius:14px!important}
html body .spg-related,html body .spg-tools{background:transparent!important;border-top:1px solid var(--b1)!important}
html body .spg-sec-head h2,html body .spg-tools-head h2{font:600 28px var(--pm-disp)!important;color:var(--t0)!important}
html body .spg-sec-head h2::before{display:none}
html body .spg-tool:hover{border-color:var(--gold-r)!important}
html body .spg-tool-ico{background:rgba(232,182,90,.08)!important;border-color:var(--b1)!important}
html body .spg-desc-txt,html body .spg-steps li,html body .spg-fonts-val{color:var(--t1)!important}
.pm-pro-badge{display:inline-flex;align-items:center;gap:6px;font:800 11px var(--pm-sans);letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--pm-grad);color:#1b1206;vertical-align:middle}
.pm-upsell{display:flex;gap:14px;align-items:center;border-radius:18px;padding:14px 16px;background:linear-gradient(120deg,rgba(232,182,90,.16),rgba(255,138,31,.05));border:1px solid rgba(232,182,90,.3);text-decoration:none;transition:transform .3s var(--pm-ease)}
.pm-upsell:hover{transform:translateY(-2px)}
.pm-upsell .ic{flex:none;width:40px;height:40px;border-radius:12px;background:var(--pm-grad);display:grid;place-items:center;color:#1b1206;font-weight:900}
.pm-upsell b{color:var(--t0);display:block;font-size:14px}.pm-upsell small{font-size:12.5px;color:var(--t2)}
.pm-upsell .go{margin-left:auto;color:var(--gold2);font-weight:800;font-size:13px;white-space:nowrap}

/* ── ACCOUNT / STATIC PAGES ─────────────────────────────────────── */
html body .acc-card,html body .ci-card,html body .page-content,html body .page-hero{background:var(--pm-card)!important;border:1px solid var(--b1)!important;border-radius:20px!important;color:var(--t1)!important}
html body .page-hero{background:transparent!important;border:0!important}
html body .acc-card h2,html body .ci-card h2,html body .acc-val,html body .acc-user-info .name{color:var(--t0)!important}
html body .upgrade-btn,html body .ci-submit{background:var(--pm-grad)!important;color:#1b1206!important;border-radius:999px!important;font-weight:800!important}
html body .pay-hist-item{background:rgba(255,255,255,.03)!important;border:1px solid var(--b1)!important;border-radius:14px!important}
html body .pay-hist-item div[style*="color:#eee"]{color:var(--t0)!important}
html body .badge-pro{background:var(--pm-grad)!important;color:#1b1206!important}
html body .ci-input,html body .ci-textarea{background:rgba(255,255,255,.03)!important;color:var(--t0)!important;border:1px solid var(--b1)!important}
.page-content h1,.page-content h2,.page-content h3,.page-content strong{color:var(--t0)!important}
.page-content p,.page-content li{color:var(--t1)!important}

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width:1100px){.pm-cats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .pm-hero-inner{grid-template-columns:1fr;gap:28px}
  .pm-collage{height:320px;max-width:560px}
  .pm-t1{height:200px}.pm-t2{height:160px}.pm-t3{height:160px}.pm-t4{display:none}
  .pm-pro{grid-template-columns:1fr}.pm-pro-r{display:none}
}
@media (max-width:640px){
  .header-inner{height:60px!important}
  html body .hero.pm-hero{padding:26px 16px 10px!important}
  .pm-h1{font-size:40px!important;margin:16px 0 10px}
  .pm-h-ta{font-size:16px}
  .pm-lead{font-size:15px}
  .pm-search{height:56px;padding:0 6px 0 16px;margin-top:20px}
  html body #hero-search-input{font-size:15px!important}
  .pm-search .pm-btn{height:44px;padding:0 16px}
  .pm-quick a:nth-child(n+5){display:none}
  .pm-stats{gap:22px;margin-top:22px}.pm-stats b{font-size:20px}
  .pm-collage{height:270px}
  .pm-t1{height:170px;width:60%}.pm-t2{height:135px;width:52%}.pm-t3{height:135px;width:56%}
  .pm-float{display:none}
  .pm-wrap{padding:0 16px}
  .pm-sec-h h2{font-size:25px!important}
  .pm-cats{grid-template-columns:repeat(2,1fr);gap:10px}
  .pm-cat{height:108px;border-radius:14px}
  .pm-cat span{font-size:14px}
  html body .cat-layout-head{padding:0 16px!important}
  html body .top-cats-grid{padding:0 16px 4px!important;gap:8px!important}
  html body .cat-pill{padding:8px 13px!important;font-size:13px!important}
  html body .main-wrap{padding:12px 10px 96px!important}
  html body .design-card{border-radius:14px!important}
  .pm-pro{border-radius:22px;margin:28px 0 10px}
  .pm-pro-l{padding:28px 22px}
  .pm-pro h3{font-size:29px!important}
  .pm-price{display:flex;margin:14px 0 0}
  html body .spg-title{font-size:24px!important}
  html body .spg-img-card{padding:8px;border-radius:18px!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .pm-in,.reveal{opacity:1!important;transform:none!important}
}

/* fixes */
html body nav a.nav-pro,html body nav a.nav-pro:hover{color:#1b1206!important;background:var(--pm-grad)!important}
html body .top-cats-grid.collapsed{padding-bottom:0!important}
.pm-h1 em{padding-right:.12em;margin-right:-.06em}
@media (max-width:640px){.pm-stats div:nth-child(2){display:none}}
html body .pm-pro-badge{align-self:flex-start}
@media (max-width:960px){html body .spg-grid{grid-template-columns:1fr 1fr!important;gap:20px!important}}
@media (max-width:720px){html body .spg-grid{grid-template-columns:1fr!important;gap:16px!important}html body .spg-col-img{position:static!important}}
.pm-h1 em,.pm-pro h3 em,.pr-hero h1 em{-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-right:.14em}
@media (max-width:640px){.pm-quick a:nth-child(n+4){display:none}}
html body .pay-modal-plans{grid-template-columns:1fr!important}html body .pay-plan{padding-right:120px!important}
/* account-page header (site-header / hdr-inner markup) */
.site-header .hdr-inner{max-width:1100px;margin:0 auto;height:66px;display:flex;align-items:center;gap:22px;padding:0 20px}
.site-header .hdr-logo{font:800 19px var(--pm-sans);color:var(--t0);letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.site-header .hdr-logo::before{content:"T";width:36px;height:36px;border-radius:11px;background:var(--pm-grad);color:#1b1206;display:grid;place-items:center;font:800 18px var(--pm-ta);box-shadow:0 6px 22px rgba(232,182,90,.35)}
.site-header .hdr-nav{display:flex;gap:2px;flex-wrap:wrap}
.site-header .hdr-auth{margin-left:auto;display:flex;align-items:center;position:relative}
@media (max-width:640px){.site-header .hdr-inner{height:auto;padding:10px 14px;flex-wrap:wrap;gap:8px}.site-header .hdr-nav a{padding:6px 9px!important;font-size:12.5px!important}}

/* ── Phase 2: content blocks ── */
html body .design-card .card-thumb{min-height:0!important}
.pm-rel-t{padding:9px 11px 11px;font-size:12px;line-height:1.4;color:var(--t1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pm-spec-line{margin:-4px 0 0;font-size:12.5px;color:var(--t2)}
.pm-spec-line a{color:var(--gold)}
.pm-tips{margin:6px 0 0 18px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--t1);line-height:1.6}
.pm-more{margin-top:12px!important;font-size:13px!important;color:var(--t2)!important}
.pm-more a,.spg-desc-txt a,.pm-cat-intro a,.pm-about a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.spg-desc-lbl{font-family:var(--pm-sans)}
.pm-cat-intro{max-width:880px;margin:10px 0 6px;font-size:14px;line-height:1.75;color:var(--t1)}
.pm-cat-intro p{margin:0 0 8px}
.pm-about-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:34px;background:var(--pm-card);border:1px solid var(--b1);border-radius:20px;padding:30px 32px}
.pm-about h2{font-family:var(--pm-serif);font-size:24px;line-height:1.25;color:var(--t0);margin:0 0 12px}
.pm-about h3{font-size:15px;color:var(--t0);margin:0 0 10px}
.pm-about p{font-size:14.5px;line-height:1.8;color:var(--t1);margin:0 0 12px}
.pm-guide-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.pm-guide-list a{display:block;padding:10px 14px;border:1px solid var(--b1);border-radius:12px;background:var(--bg2);text-decoration:none!important;color:var(--t0)!important;font-size:13.5px;transition:border-color .2s}
.pm-guide-list a:hover{border-color:rgba(232,182,90,.5)}
@media(max-width:820px){.pm-about-grid{grid-template-columns:1fr;padding:22px 18px;gap:20px}.pm-about h2{font-size:20px}}
/* article / static page layout */
.pm-article{max-width:780px;margin:0 auto;padding:34px 20px 60px;color:var(--t1);font-size:16px;line-height:1.8}
.pm-article h1{font-family:var(--pm-serif);font-size:clamp(28px,4vw,40px);line-height:1.15;color:var(--t0);margin:6px 0 10px}
.pm-article h2{font-size:21px;color:var(--t0);margin:34px 0 10px;line-height:1.3}
.pm-article h3{font-size:17px;color:var(--t0);margin:24px 0 8px}
.pm-article p,.pm-article li{color:var(--t1)}
.pm-article ul,.pm-article ol{padding-left:22px;margin:0 0 16px}
.pm-article li{margin:4px 0}
.pm-article a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.pm-article table{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:14px}
.pm-article th,.pm-article td{border:1px solid var(--b1);padding:9px 11px;text-align:left}
.pm-article th{background:var(--bg2);color:var(--t0)}
.pm-article .pm-meta{font-size:13px;color:var(--t2)}
.pm-article .pm-note{background:var(--bg2);border:1px solid var(--b1);border-left:3px solid var(--gold);border-radius:10px;padding:14px 16px;margin:18px 0}
.pm-article .pm-crumb{font-size:13px;color:var(--t2)}
.pm-article .pm-crumb a{color:var(--t2)}
.pm-guide-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
.pm-guide-cards a{display:block;padding:18px;border:1px solid var(--b1);border-radius:14px;background:var(--pm-card);text-decoration:none;color:var(--t0)}
.pm-guide-cards a b{display:block;font-size:16px;margin-bottom:6px}
.pm-guide-cards a span{font-size:13.5px;color:var(--t2)}
@media(max-width:640px){.pm-guide-cards{grid-template-columns:1fr}.pm-article{font-size:15.5px}}
/* ── /categories/ page ── */
.pm-allcats{padding:26px 0 70px}
.pm-allcats .pm-crumb{font-size:13px;color:var(--t2);margin:0 0 6px}
.pm-allcats .pm-crumb a{color:var(--t2)}
.pm-allcats h1{font-family:var(--pm-serif);font-size:clamp(28px,4vw,40px);color:var(--t0);margin:0}
.pm-allcats h1 small{display:block;font:700 12px var(--pm-sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.pm-allcats-lead{max-width:760px;color:var(--t1);font-size:15px;line-height:1.75;margin:4px 0 22px}
.pm-cats.pm-cats-all{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.pm-cats-all .pm-cat{height:auto;aspect-ratio:16/10;background:var(--bg2)}
.pm-cats-all .pm-cat img{object-position:center 30%}
.pm-cat-ph{width:100%;height:100%;background:var(--pm-grad);opacity:.35}
@media (max-width:640px){.pm-cats.pm-cats-all{grid-template-columns:repeat(2,1fr);gap:10px}.pm-cats-all .pm-cat span{font-size:14px;left:10px;bottom:9px}}