*{margin:0;padding:0;box-sizing:border-box}

/* ═══ THEME VARIABLES ═══ */
:root{
  --bg:#f5f5fa;
  --bg2:#0a0a10;
  --bg3:#17151f;
  --bg4:#1e1b2e;
  --bg5:#2e2a3d;
  --border:#1e1b2e;
  --border2:#2e2a3d;
  --text:#e8e4f0;
  --text2:#9b95b0;
  --text3:#5a546e;
  --text4:#3a3650;
  --accent:#6c5ce7;
  --accent2:#c9b8ff;
  --accent3:#7d6ff5;
  --card-label:#6c5ce7;
  --hero-radial:rgba(108,92,231,.15);
  --shadow:rgba(0,0,0,.4);
}
body.light{
  --bg:#f5f5fa;
  --bg2:#ffffff;
  --bg3:#ffffff;
  --bg4:#eeeef8;
  --bg5:#dcdcf0;
  --border:#e0dff0;
  --border2:#d0cfe8;
  --text:#1a1830;
  --text2:#4a4668;
  --text3:#8885a0;
  --text4:#b0aec8;
  --accent:#5a4cd4;
  --accent2:#5a4cd4;
  --accent3:#4a3cc4;
  --card-label:#5a4cd4;
  --hero-radial:rgba(108,92,231,.08);
  --shadow:rgba(0,0,0,.1);
}

body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;flex-direction:column;transition:background .25s,color .25s}

/* ═══ TOP NAVBAR ═══ */
.navbar{background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.nav-inner{max-width:1280px;margin:0 auto;padding:0 1.25rem;display:flex;align-items:center;height:56px;gap:1.5rem}
.nav-logo{font-family:'Playfair Display',serif;font-size:1.15rem;color:var(--text);text-decoration:none;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0}
.nav-logo span{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:.25rem;flex:1}
.nav-link{padding:6px 12px;border-radius:8px;color:var(--text2);font-size:.84rem;text-decoration:none;transition:all .15s;border:none;background:transparent;cursor:pointer;white-space:nowrap}
.nav-link:hover{background:var(--bg4);color:var(--text)}
.nav-link.active{color:var(--accent2);background:var(--bg4)}
.nav-search{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;padding:6px 12px;flex:1;max-width:280px;margin-left:auto}
.nav-search input{background:transparent;border:none;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.84rem;outline:none;width:100%}
.nav-search input::placeholder{color:var(--text3)}
.nav-search svg{color:var(--text3);flex-shrink:0;width:14px;height:14px}
.theme-toggle{background:transparent;border:1px solid var(--border2);border-radius:8px;padding:6px 10px;cursor:pointer;color:var(--text2);display:flex;align-items:center;gap:5px;font-size:.8rem;font-family:'DM Sans',sans-serif;transition:all .2s;flex-shrink:0}
.theme-toggle:hover{background:var(--bg4);color:var(--text);border-color:var(--accent)}
.theme-toggle svg{width:14px;height:14px}
.mob-nav-toggle{display:none;background:transparent;border:none;color:var(--text2);cursor:pointer;padding:6px}
.mob-nav-toggle svg{width:20px;height:20px}
.mob-nav-menu{display:none;background:var(--bg2);border-bottom:1px solid var(--border);padding:.75rem 1.25rem}
.mob-nav-menu.open{display:block}
.mob-nav-links{display:flex;flex-direction:column;gap:4px;margin-bottom:.75rem}
.mob-nav-link{padding:8px 12px;border-radius:8px;color:var(--text2);font-size:.88rem;text-decoration:none;display:block;cursor:pointer;background:transparent;border:none;text-align:left;width:100%;font-family:'DM Sans',sans-serif}
.mob-nav-link:hover{background:var(--bg4);color:var(--text)}
.mob-search-wrap{position:relative}
.mob-search-wrap input{width:100%;padding:10px 36px 10px 14px;background:var(--bg3);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.88rem;outline:none}
.mob-search-wrap input:focus{border-color:var(--accent)}
.mob-search-wrap input::placeholder{color:var(--text3)}

/* ═══ BREADCRUMB ═══ */
.breadcrumb{max-width:1280px;margin:0 auto;padding:.7rem 1.25rem;display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text3);flex-wrap:wrap}
.breadcrumb a{color:var(--text3);text-decoration:none;transition:color .15s}
.breadcrumb a:hover{color:var(--text2)}
.breadcrumb .sep{color:var(--text4)}
.breadcrumb .current{color:var(--text2)}

/* ═══ HERO ═══ */
.hero{text-align:center;padding:2rem 1rem 1.6rem;background:radial-gradient(ellipse 70% 60% at 50% 0%,var(--hero-radial) 0%,transparent 70%);border-bottom:1px solid var(--border)}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(1.6rem,4vw,2.5rem);color:var(--text);line-height:1.2}
.hero p{color:var(--text2);margin-top:.4rem;font-size:.88rem}
.hero-search{max-width:520px;margin:1.25rem auto 0;position:relative}
.hero-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--accent);width:16px;height:16px;pointer-events:none}
#searchInput{width:100%;padding:12px 42px 12px 40px;background:var(--bg3);border:1px solid var(--border2);border-radius:100px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s}
#searchInput::placeholder{color:var(--text3)}
#searchInput:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(108,92,231,.12)}
.search-clear{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:var(--bg5);border:none;color:var(--text2);width:20px;height:20px;border-radius:50%;font-size:.68rem;cursor:pointer;display:none;align-items:center;justify-content:center}
.search-clear:hover{background:var(--accent);color:#fff}
.search-clear.visible{display:flex}
.search-label{text-align:center;font-size:.78rem;color:var(--accent);margin-top:.5rem;min-height:16px}

/* ═══ LAYOUT ═══ */
.page-wrap{flex:1}
.main{display:flex;max-width:1280px;margin:0 auto;padding:1.5rem 1.25rem;align-items:flex-start;gap:1.75rem}

/* ═══ SIDEBAR ═══ */
.sidebar{width:235px;flex-shrink:0;position:sticky;top:72px;max-height:none;overflow:visible}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-thumb{background:var(--bg5);border-radius:3px}
.sidebar-section-title{font-size:.68rem;font-weight:600;color:var(--text3);letter-spacing:1.2px;text-transform:uppercase;padding:0 10px;margin-bottom:.4rem}
.all-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:9px;border:none;background:transparent;color:var(--text2);font-family:'DM Sans',sans-serif;font-size:.84rem;cursor:pointer;transition:all .15s;text-align:left;margin-bottom:4px}
.all-btn:hover{background:var(--bg4);color:var(--text)}
.all-btn.active{background:var(--bg4);color:var(--accent2);border-left:2px solid var(--accent)}
.all-count{margin-left:auto;font-size:.68rem;background:var(--bg5);color:var(--accent);padding:1px 6px;border-radius:100px}
.all-btn.active .all-count{background:var(--accent);color:#fff}
.sidebar-divider{height:1px;background:var(--border);margin:.5rem 0}
.cat-group{margin-bottom:1px}
.cat-header{display:flex;align-items:center;gap:7px;width:100%;padding:7px 10px;border-radius:9px;border:none;background:transparent;color:var(--accent2);font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:500;cursor:pointer;transition:all .15s;text-align:left}
.cat-header:hover{background:var(--bg4)}
.cat-header.open,.cat-header.active-cat{background:var(--bg4)}
.cat-header.active-cat{color:var(--text);border-left:2px solid var(--accent)}
.cat-icon{font-size:.88rem;flex-shrink:0}
.cat-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-badge{font-size:.65rem;color:var(--text3);margin-right:2px}
.cat-arrow{font-size:.55rem;color:var(--text3);transition:transform .2s;flex-shrink:0}
.cat-header.open .cat-arrow,.cat-header.active-cat.open .cat-arrow{transform:rotate(90deg)}
.subcats-panel{display:none;padding-left:4px;padding-bottom:2px}
.subcats-panel.open{display:block}
.subcat-btn{display:flex;align-items:center;gap:6px;width:100%;padding:5px 10px 5px 14px;border-radius:7px;border:none;background:transparent;color:var(--text2);font-family:'DM Sans',sans-serif;font-size:.78rem;cursor:pointer;transition:all .15s;text-align:left}
.subcat-btn:hover{background:var(--bg4);color:var(--text)}
.subcat-btn.active{background:var(--bg4);color:var(--accent2);border-left:2px solid var(--accent)}
.subcat-icon{font-size:.82rem;flex-shrink:0}
.subcat-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.subcat-count{font-size:.64rem;color:var(--text3);margin-left:auto}
.subcat-btn.active .subcat-count{color:var(--accent)}
.mob-sidebar-btn{display:none;align-items:center;gap:8px;width:100%;padding:9px 14px;background:var(--bg3);border:1px solid var(--border2);border-radius:10px;color:var(--accent2);font-family:'DM Sans',sans-serif;font-size:.84rem;cursor:pointer;margin-bottom:.75rem}
.mob-sidebar-btn svg{width:14px;height:14px}
.mob-active-tag{margin-left:auto;font-size:.75rem;color:var(--accent);font-weight:500;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-inner{
  display:block;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  padding-right:2px;
}

/* ═══ CARDS AREA ═══ */
.cards-area{flex:1;min-width:0}
.cards-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}
.cards-heading{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--text)}
.cards-meta{font-size:.78rem;color:var(--text3)}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.no-results{text-align:center;padding:4rem 1rem;display:none}
.no-results.visible{display:block}
.no-results-icon{font-size:2rem;margin-bottom:.75rem}

/* Loading */
.loading-state{text-align:center;padding:3rem 1rem}
.spinner{display:inline-block;width:32px;height:32px;border:3px solid var(--bg5);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:.75rem}
@keyframes spin{to{transform:rotate(360deg)}}
.load-msg{color:var(--text2);font-size:.88rem}
.load-count{color:var(--accent);font-size:.78rem;margin-top:.3rem}

/* Error */
.error-state{text-align:center;padding:3rem 1rem;display:none}
.error-state.visible{display:block}
.error-state p{color:#ff8080;font-size:.88rem;margin:.4rem 0}
.error-detail{color:var(--text3);font-size:.76rem}
.btn-retry{padding:8px 18px;background:var(--accent);border:none;border-radius:8px;color:#fff;font-family:'DM Sans',sans-serif;font-size:.84rem;cursor:pointer;margin-top:.75rem}

/* ═══ CARD ═══ */
.card-wrapper{border-radius:12px;overflow:hidden;background:var(--bg3);border:1px solid var(--border2);transition:transform .2s,border-color .2s,box-shadow .2s;cursor:pointer}
.card-wrapper:hover,.card-wrapper:focus-visible{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 4px 20px var(--shadow)}
.greeting-card{width:100%;aspect-ratio:4/3;position:relative;display:flex;align-items:center;justify-content:center;padding:1.25rem;text-align:center;overflow:hidden}
.card-content{position:relative;z-index:2}
.card-icon{font-size:1.8rem;margin-bottom:.5rem;display:block;line-height:1}
.card-title{font-family:'Playfair Display',serif;font-size:clamp(.95rem,2vw,1.2rem);font-weight:700;line-height:1.2;margin-bottom:.45rem}
.card-msg{font-size:.72rem;font-weight:300;line-height:1.6;opacity:.9;max-width:200px;margin:0 auto}
.site-tag{position:absolute;bottom:6px;right:9px;font-size:.56rem;color:rgba(255,255,255,.25);z-index:3}
.card-footer{padding:.6rem .85rem;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border2)}
.card-label{font-size:.67rem;color:var(--card-label);font-weight:500;letter-spacing:.4px;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100px}
.card-actions{display:flex;gap:4px;flex-shrink:0}
.btn-action{padding:3px 9px;border-radius:100px;border:1px solid var(--border2);background:transparent;color:var(--text2);font-size:.68rem;font-family:'DM Sans',sans-serif;cursor:pointer;transition:all .15s}
.btn-action:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-action.copied{background:#2d6a4f;border-color:#2d6a4f;color:#b7e4c7}

/* ═══ PAGINATION ═══ */
.pagination{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:2rem;flex-wrap:wrap}
.page-btn{min-width:36px;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--border2);background:transparent;color:var(--text2);font-family:'DM Sans',sans-serif;font-size:.84rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center}
.page-btn:hover{background:var(--bg4);color:var(--text);border-color:var(--bg5)}
.page-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.page-btn:disabled{opacity:.35;cursor:default;pointer-events:none}
.page-info{font-size:.78rem;color:var(--text3);padding:0 4px}

/* ═══ MODAL ═══ */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:300;align-items:center;justify-content:center;padding:1rem}
.modal-overlay.open{display:flex}
.modal{background:var(--bg3);border:1px solid var(--border2);border-radius:18px;max-width:420px;width:100%;overflow:hidden;max-height:95vh;overflow-y:auto}
.modal-card{width:100%;aspect-ratio:4/3;position:relative;display:flex;align-items:center;justify-content:center;padding:2rem;text-align:center;overflow:hidden}
.modal-body{padding:.9rem}
.modal-body label{display:block;font-size:.72rem;color:var(--text2);margin-bottom:3px}
.modal-body textarea,.modal-body input{width:100%;background:var(--bg);border:1px solid var(--border2);border-radius:8px;color:var(--text);font-family:'DM Sans',sans-serif;font-size:.82rem;padding:7px 10px;margin-bottom:.6rem;resize:none;outline:none}
.modal-body textarea:focus,.modal-body input:focus{border-color:var(--accent)}
.modal-actions{display:flex;gap:6px}
.btn-primary{flex:1;padding:9px;background:var(--accent);border:none;border-radius:8px;color:#fff;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:500;cursor:pointer;transition:background .2s}
.btn-primary:hover{background:var(--accent3)}
.btn-dl{padding:9px 12px;background:var(--bg4);border:1px solid var(--bg5);border-radius:8px;color:var(--accent2);font-family:'DM Sans',sans-serif;font-size:.82rem;cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-dl:hover{background:var(--bg5);border-color:var(--accent);color:var(--text)}
.btn-dl.loading{opacity:.6;cursor:wait}
.btn-dl.done{background:#2d6a4f;border-color:#2d6a4f;color:#b7e4c7}
.btn-close{padding:9px 12px;background:transparent;border:1px solid var(--border2);border-radius:8px;color:var(--text2);font-family:'DM Sans',sans-serif;font-size:.82rem;cursor:pointer;transition:all .2s}
.btn-close:hover{border-color:var(--accent);color:var(--accent2)}
/* Share */
.share-section{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--border)}
.share-label{font-size:.68rem;color:var(--text3);margin-bottom:.45rem;letter-spacing:.5px;text-transform:uppercase}
.share-row{display:flex;gap:5px;flex-wrap:wrap}
.btn-share{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 4px;border-radius:8px;border:1px solid var(--border2);background:transparent;font-family:'DM Sans',sans-serif;font-size:.7rem;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap}
.btn-share svg{width:12px;height:12px;flex-shrink:0}
.btn-share.wa{color:#25d366;border-color:#1a3d25}.btn-share.wa:hover{background:#0d2318;border-color:#25d366}
.btn-share.tw{color:#1d9bf0;border-color:#0d2a40}.btn-share.tw:hover{background:#061829;border-color:#1d9bf0}
.btn-share.fb{color:#1877f2;border-color:#0d2040}.btn-share.fb:hover{background:#061020;border-color:#1877f2}
.btn-share.tg{color:#26a5e4;border-color:#0d2d40}.btn-share.tg:hover{background:#061a28;border-color:#26a5e4}
.btn-share.nt{color:var(--accent2);border-color:var(--border2)}.btn-share.nt:hover{background:var(--bg4);border-color:var(--accent)}
.btn-share.cl{color:#b7e4c7;background:#0d2318;border-color:#2d6a4f}

/* ═══ CARD TEMPLATES ═══ */
.tpl-default{background:linear-gradient(135deg,#0d0d2b,#1a1a4e 50%,#2d0b4e)}
.tpl-default .card-title{color:#e0c8ff}.tpl-default .card-msg{color:#c8b0f0}
.tpl-morning{background:linear-gradient(135deg,#1a0533,#6b1a6b 40%,#ff6b35 75%,#ffd93d)}
.tpl-morning::before{content:'';position:absolute;bottom:0;left:0;right:0;height:40%;background:linear-gradient(to top,rgba(0,0,0,.35),transparent)}
.tpl-morning .card-title{color:#fff8e7;text-shadow:0 2px 12px rgba(0,0,0,.5)}.tpl-morning .card-msg{color:#ffe0b2}
.tpl-afternoon{background:linear-gradient(135deg,#0a1a2a,#1a3a5a 40%,#2a6a8a 70%,#4a9aaa)}
.tpl-afternoon .card-title{color:#b0e8ff}.tpl-afternoon .card-msg{color:#d0f0ff}
.tpl-night{background:radial-gradient(ellipse at 50% 0%,#1a1050,#0a0718 60%,#000005)}
.tpl-night::before{content:'· ·· · ··· · · ·· ···· · ··';position:absolute;top:10%;left:0;right:0;color:#fff;font-size:.4rem;letter-spacing:14px;opacity:.5;line-height:2.5;padding:0 1rem;word-break:break-all;pointer-events:none}
.tpl-night .card-title{color:#c8bbff;text-shadow:0 0 30px rgba(170,140,255,.5)}.tpl-night .card-msg{color:#9b8fd4}
.tpl-birthday{background:linear-gradient(135deg,#0d0d2b,#1a1a4e 50%,#2d0b4e)}
.tpl-birthday::after{content:'🎊 🎉 ✨ 🎈 🎁 🌟 🎊 🎉 ✨';position:absolute;top:0;left:0;right:0;font-size:1rem;letter-spacing:6px;opacity:.28;padding:.5rem;word-break:break-all;line-height:1.8;pointer-events:none}
.tpl-birthday .card-title{color:#ffd700;text-shadow:0 0 20px rgba(255,215,0,.5)}.tpl-birthday .card-msg{color:#e0c8ff}
.tpl-anniversary{background:linear-gradient(135deg,#1a0010,#3d0025 50%,#7a0045 80%,#b0003a)}
.tpl-anniversary::before{content:'♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡';position:absolute;inset:0;color:rgba(255,100,130,.1);font-size:1.8rem;line-height:2.5;letter-spacing:8px;word-break:break-all;pointer-events:none;padding:.5rem}
.tpl-anniversary .card-title{color:#ff80ab;text-shadow:0 0 20px rgba(255,80,120,.5)}.tpl-anniversary .card-msg{color:#f8bbd0}
.tpl-thankyou{background:linear-gradient(135deg,#0d0800,#2a1800 40%,#553000 70%,#8b5a00)}
.tpl-thankyou::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 30%,rgba(255,160,30,.15),transparent 65%)}
.tpl-thankyou .card-title{color:#ffd580;text-shadow:0 0 16px rgba(255,180,60,.5)}.tpl-thankyou .card-msg{color:#f5c97a}
.tpl-congrats{background:linear-gradient(135deg,#001a0a,#003d1a 50%,#006d0f 80%,#00a010)}
.tpl-congrats::after{content:'🏆 ⭐ 🎊 ✨ 🏆 ⭐ 🎊 ✨';position:absolute;top:0;left:0;right:0;font-size:1rem;letter-spacing:6px;opacity:.23;padding:.5rem;word-break:break-all;line-height:1.8;pointer-events:none}
.tpl-congrats .card-title{color:#b8ff8a;text-shadow:0 0 16px rgba(100,255,50,.4)}.tpl-congrats .card-msg{color:#c8f5c8}
.tpl-getwell{background:linear-gradient(135deg,#001520,#003050 50%,#005080 80%,#0070a0)}
.tpl-getwell .card-title{color:#80d4ff}.tpl-getwell .card-msg{color:#b0e8ff}
.tpl-sorry{background:linear-gradient(160deg,#0a0a15,#151528 50%,#1e1e3a)}
.tpl-sorry .card-title{color:#b8b0ff}.tpl-sorry .card-msg{color:#d0caff}
.tpl-welcome{background:linear-gradient(135deg,#001a15,#003328 50%,#005540 80%,#007755)}
.tpl-welcome .card-title{color:#80ffcc}.tpl-welcome .card-msg{color:#a0ffd8}
.tpl-goodluck{background:linear-gradient(135deg,#1a1500,#3d3000 50%,#7a6000 80%,#c09800)}
.tpl-goodluck::after{content:'⭐ 🍀 ✨ ⭐ 🍀 ✨ ⭐ 🍀';position:absolute;top:0;left:0;right:0;font-size:1rem;letter-spacing:8px;opacity:.28;padding:.5rem;word-break:break-all;line-height:1.8;pointer-events:none}
.tpl-goodluck .card-title{color:#ffe066}.tpl-goodluck .card-msg{color:#fff0a0}
.tpl-missyou{background:linear-gradient(135deg,#0d0020,#200040 50%,#350060 80%,#4a0080)}
.tpl-missyou .card-title{color:#d4a0ff}.tpl-missyou .card-msg{color:#e8c8ff}
.tpl-newjob{background:linear-gradient(135deg,#001520,#002840 50%,#004060 80%,#005a80)}
.tpl-newjob::after{content:'💼 📈 🚀 💼 📈 🚀 💼 📈';position:absolute;top:0;left:0;right:0;font-size:1rem;letter-spacing:8px;opacity:.23;padding:.5rem;word-break:break-all;line-height:1.8;pointer-events:none}
.tpl-newjob .card-title{color:#80d4ff}.tpl-newjob .card-msg{color:#b0e8ff}
.tpl-friendship{background:linear-gradient(135deg,#001a10,#003325 50%,#005540 80%,#007760)}
.tpl-friendship .card-title{color:#80ffcc}.tpl-friendship .card-msg{color:#a0ffd8}
.tpl-teacher{background:linear-gradient(135deg,#0a0015,#180030 50%,#2a0050 80%,#400070)}
.tpl-teacher .card-title{color:#cc99ff}.tpl-teacher .card-msg{color:#ddb8ff}
.tpl-valentine{background:linear-gradient(135deg,#1a0010,#4a0028 50%,#8b1a4a 80%,#c2185b)}
.tpl-valentine::before{content:'♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡ ♥ ♡';position:absolute;inset:0;color:rgba(255,100,150,.1);font-size:1.8rem;line-height:2.5;letter-spacing:8px;word-break:break-all;pointer-events:none;padding:.5rem}
.tpl-valentine .card-title{color:#ff80ab}.tpl-valentine .card-msg{color:#f8bbd0}
.tpl-lovenote{background:linear-gradient(135deg,#150005,#30000f 50%,#600020 80%,#900030)}
.tpl-lovenote .card-title{color:#ff6688}.tpl-lovenote .card-msg{color:#ffaab8}
.tpl-proposal{background:linear-gradient(135deg,#0a0005,#200010 40%,#400020 70%,#700030)}
.tpl-proposal .card-title{color:#ffccdd}.tpl-proposal .card-msg{color:#ffe0e8}
.tpl-longdistance{background:radial-gradient(ellipse at 50% 0%,#1a1050,#0a0718 60%,#000005)}
.tpl-longdistance .card-title{color:#c8bbff}.tpl-longdistance .card-msg{color:#9b8fd4}
.tpl-graduation{background:linear-gradient(135deg,#000a1a,#001830 40%,#00306a 70%,#0050a0)}
.tpl-graduation .card-title{color:#80c8ff}.tpl-graduation .card-msg{color:#b0dcff}
.tpl-newbaby{background:linear-gradient(135deg,#000f1a,#001f35 50%,#003050 80%,#004570)}
.tpl-newbaby .card-title{color:#a0e0ff}.tpl-newbaby .card-msg{color:#c8f0ff}
.tpl-newhome{background:linear-gradient(135deg,#001500,#003300 40%,#004d00 70%,#006600)}
.tpl-newhome .card-title{color:#88ff88}.tpl-newhome .card-msg{color:#b8ffb8}
.tpl-engagement{background:linear-gradient(135deg,#1a0010,#3d0025 50%,#700040 80%,#a00055)}
.tpl-engagement .card-title{color:#ffaacc}.tpl-engagement .card-msg{color:#ffc8dd}
.tpl-retirement{background:linear-gradient(135deg,#0a0500,#1a1000 40%,#352500 70%,#553d00)}
.tpl-retirement .card-title{color:#ffd060}.tpl-retirement .card-msg{color:#ffe490}
.tpl-promotion{background:linear-gradient(135deg,#001520,#002840 50%,#004060 80%,#006080)}
.tpl-promotion .card-title{color:#80d4ff}.tpl-promotion .card-msg{color:#b0e8ff}
.tpl-farewell{background:linear-gradient(135deg,#0a0a15,#151528 50%,#202040 80%,#2a2a55)}
.tpl-farewell .card-title{color:#c8bbff}.tpl-farewell .card-msg{color:#d8d0ff}
.tpl-diwali{background:linear-gradient(160deg,#1a0a00,#3d1a00 40%,#7a3900 70%,#c8800a)}
.tpl-diwali::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(255,180,50,.18),transparent 70%)}
.tpl-diwali .deco{position:absolute;top:0;left:50%;transform:translateX(-50%);width:80%;height:2px;background:linear-gradient(to right,transparent,#ffc044,transparent)}
.tpl-diwali .card-title{color:#ffe5a0;text-shadow:0 0 20px rgba(255,196,68,.6)}.tpl-diwali .card-msg{color:#ffd88a}
.tpl-holi{background:linear-gradient(135deg,#1a0030,#4a0060 30%,#800080 60%,#c040a0)}
.tpl-holi .card-title{color:#ffaaff}.tpl-holi .card-msg{color:#ffd4ff}
.tpl-rakhi{background:linear-gradient(135deg,#1a0500,#400d00 40%,#802000 70%,#c04000)}
.tpl-rakhi .card-title{color:#ffcc80}.tpl-rakhi .card-msg{color:#ffe0b2}
.tpl-navratri{background:linear-gradient(135deg,#1a0010,#3d0025 40%,#7a0050 70%,#c00070)}
.tpl-navratri .card-title{color:#ff80cc}.tpl-navratri .card-msg{color:#ffb3e0}
.tpl-festival-gold{background:linear-gradient(160deg,#1a0a00,#3d1a00 40%,#7a3900 70%,#c8800a)}
.tpl-festival-gold .card-title{color:#ffd060}.tpl-festival-gold .card-msg{color:#ffe8a0}
.tpl-pongal{background:linear-gradient(135deg,#001500,#003300 40%,#005500 70%,#008800)}
.tpl-pongal .card-title{color:#a0ff80}.tpl-pongal .card-msg{color:#c8ffb0}
.tpl-eid{background:radial-gradient(ellipse at 50% 0%,#1a1050,#0a0718 60%,#000005)}
.tpl-eid::before{content:'✦ ☽ ✦ ☽ ✦ ☽ ✦ ☽ ✦ ☽ ✦';position:absolute;top:8%;left:0;right:0;color:rgba(200,180,255,.4);font-size:.85rem;letter-spacing:10px;line-height:2.5;padding:0 1rem;word-break:break-all;pointer-events:none}
.tpl-eid .card-title{color:#c8bbff}.tpl-eid .card-msg{color:#9b8fd4}
.tpl-onam{background:linear-gradient(135deg,#001a00,#003300 40%,#005500 60%,#009900)}
.tpl-onam .card-title{color:#80ffaa}.tpl-onam .card-msg{color:#b0ffc8}
.tpl-christmas{background:linear-gradient(150deg,#001a0a,#003310 40%,#00520d 70%,#006d0f)}
.tpl-christmas::before{content:'❄ ✦ ❄ ✦ ❄ ✦ ❄ ✦ ❄ ✦';position:absolute;top:0;left:0;right:0;color:rgba(255,255,255,.1);font-size:1rem;letter-spacing:8px;line-height:2;padding:.5rem;word-break:break-all;pointer-events:none}
.tpl-christmas .card-title{color:#ffcc00}.tpl-christmas .card-msg{color:#c8f5c8}
.tpl-thanksgiving{background:linear-gradient(135deg,#150800,#352000 40%,#6a4000 70%,#a06000)}
.tpl-thanksgiving .card-title{color:#ffcc66}.tpl-thanksgiving .card-msg{color:#ffe0a0}
.tpl-halloween{background:linear-gradient(135deg,#0a0000,#200800 40%,#3d1500 70%,#602500)}
.tpl-halloween::after{content:'🎃 👻 🕷 🦇 🎃 👻 🕷 🦇';position:absolute;top:0;left:0;right:0;font-size:1rem;letter-spacing:5px;opacity:.32;padding:.5rem;word-break:break-all;line-height:1.8;pointer-events:none}
.tpl-halloween .card-title{color:#ff8800;text-shadow:0 0 20px rgba(255,100,0,.6)}.tpl-halloween .card-msg{color:#ffcc88}
.tpl-easter{background:linear-gradient(135deg,#001520,#0a2535 50%,#153a4a 80%,#1a4d5e)}
.tpl-easter .card-title{color:#a0e8ff}.tpl-easter .card-msg{color:#c8f0ff}
.tpl-newyear{background:linear-gradient(170deg,#000510,#001830 40%,#003d1a 70%,#001830)}
.tpl-newyear::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 40% at 30% 60%,rgba(0,255,120,.1),transparent 70%),radial-gradient(ellipse 60% 30% at 70% 40%,rgba(0,150,255,.08),transparent 70%)}
.tpl-newyear .card-title{color:#a0ffcc}.tpl-newyear .card-msg{color:#80d4ff}
.tpl-july4{background:linear-gradient(135deg,#0a0010,#1a0030 40%,#200010 70%,#3d0000)}
.tpl-july4 .card-title{color:#ff8080}.tpl-july4 .card-msg{color:#ffc0c0}
.tpl-mothersday{background:linear-gradient(135deg,#1a000a,#3d001a 40%,#7a003a 70%,#c02060)}
.tpl-mothersday .card-title{color:#ff80b0}.tpl-mothersday .card-msg{color:#ffc0d8}
.tpl-fathersday{background:linear-gradient(135deg,#000a1a,#001a3d 40%,#003a7a 70%,#0058a0)}
.tpl-fathersday .card-title{color:#80c8ff}.tpl-fathersday .card-msg{color:#b0dcff}
.tpl-chineseny{background:linear-gradient(135deg,#1a0000,#3d0000 40%,#7a0000 70%,#c00000)}
.tpl-chineseny::after{content:'🐉 🧧 🎆 🏮 🐉 🧧 🎆 🏮';position:absolute;top:0;left:0;right:0;font-size:1rem;letter-spacing:5px;opacity:.32;padding:.5rem;word-break:break-all;line-height:1.8;pointer-events:none}
.tpl-chineseny .card-title{color:#ffcc00;text-shadow:0 0 20px rgba(255,200,0,.6)}.tpl-chineseny .card-msg{color:#ffe080}
.tpl-midautumn{background:linear-gradient(135deg,#050510,#0f0f25 40%,#1a1a3d 70%,#252550)}
.tpl-midautumn::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 25%,rgba(255,220,100,.15),transparent 40%)}
.tpl-midautumn .card-title{color:#ffeea0}.tpl-midautumn .card-msg{color:#fff3c8}
.tpl-sakura{background:linear-gradient(135deg,#15000a,#300015 50%,#600025 80%,#900030)}
.tpl-sakura .card-title{color:#ffb3cc}.tpl-sakura .card-msg{color:#ffd4e4}
.tpl-korea{background:linear-gradient(135deg,#000a20,#001535 50%,#002a60 80%,#003a80)}
.tpl-korea .card-title{color:#80c8ff}.tpl-korea .card-msg{color:#b0dcff}
.tpl-ramadan{background:radial-gradient(ellipse at 50% 0%,#150d40,#08060f 60%,#020208)}
.tpl-ramadan::before{content:'✦ ☽ ✦ ☽ ✦ ☽ ✦ ☽ ✦ ☽ ✦';position:absolute;top:5%;left:0;right:0;color:rgba(200,180,255,.35);font-size:.85rem;letter-spacing:10px;line-height:2.5;padding:0 1rem;word-break:break-all;pointer-events:none}
.tpl-ramadan .card-title{color:#d4c0ff}.tpl-ramadan .card-msg{color:#b8a8e0}
.tpl-islamicgold{background:linear-gradient(160deg,#1a0a00,#3a1800 40%,#704000 70%,#aa7000)}
.tpl-islamicgold .card-title{color:#ffe5a0}.tpl-islamicgold .card-msg{color:#ffd88a}
.tpl-hanukkah{background:linear-gradient(135deg,#000a20,#001540 50%,#002060 80%,#003080)}
.tpl-hanukkah .card-title{color:#80aaff}.tpl-hanukkah .card-msg{color:#b0c8ff}
.tpl-roshhashanah{background:linear-gradient(135deg,#150a00,#302000 40%,#604000 70%,#905800)}
.tpl-roshhashanah .card-title{color:#ffcc66}.tpl-roshhashanah .card-msg{color:#ffe0a0}
.tpl-diademuertos{background:linear-gradient(135deg,#100010,#250025 40%,#450045 70%,#600060)}
.tpl-diademuertos .card-title{color:#ff80ff}.tpl-diademuertos .card-msg{color:#ffb8ff}
.tpl-latinfiesta{background:linear-gradient(135deg,#1a0500,#3d1000 40%,#7a2500 70%,#c04000)}
.tpl-latinfiesta .card-title{color:#ffaa44}.tpl-latinfiesta .card-msg{color:#ffcc88}
.tpl-carnival{background:linear-gradient(135deg,#1a0020,#3d0040 40%,#700070 70%,#a000a0)}
.tpl-carnival .card-title{color:#ff80ff}.tpl-carnival .card-msg{color:#ffb8ff}
.tpl-kwanzaa{background:linear-gradient(135deg,#100000,#280800 40%,#501500 70%,#802000)}
.tpl-kwanzaa .card-title{color:#ff9944}.tpl-kwanzaa .card-msg{color:#ffcc88}
.tpl-stpatrick{background:linear-gradient(135deg,#001500,#003300 40%,#005500 70%,#007700)}
.tpl-stpatrick .card-title{color:#88ff88}.tpl-stpatrick .card-msg{color:#b8ffb8}
.tpl-oktoberfest{background:linear-gradient(135deg,#150a00,#352000 40%,#6a4000 70%,#a06000)}
.tpl-oktoberfest .card-title{color:#ffcc44}.tpl-oktoberfest .card-msg{color:#ffe09a}
.tpl-condolences{background:linear-gradient(160deg,#080808,#101010 50%,#181818)}
.tpl-condolences .card-title{color:#c8c8d8}.tpl-condolences .card-msg{color:#a8a8b8}
.tpl-encouragement{background:linear-gradient(135deg,#001520,#003050 50%,#004a70 80%,#006090)}
.tpl-encouragement .card-title{color:#80ccff}.tpl-encouragement .card-msg{color:#b0e0ff}
.tpl-mentalhealth{background:linear-gradient(135deg,#0a0015,#18002a 40%,#2a0045 70%,#3c0060)}
.tpl-mentalhealth .card-title{color:#cc99ff}.tpl-mentalhealth .card-msg{color:#ddb8ff}
.tpl-funbirthday{background:linear-gradient(135deg,#1a0020,#350040 40%,#600060 70%,#8b0080)}
.tpl-funbirthday .card-title{color:#ff80ff}.tpl-funbirthday .card-msg{color:#ffb8ff}
.tpl-sarcasticcon{background:linear-gradient(135deg,#0a0a00,#1a1a00 40%,#353500 70%,#505500)}
.tpl-sarcasticcon .card-title{color:#e8e060}.tpl-sarcasticcon .card-msg{color:#f0eca0}
.tpl-meme{background:linear-gradient(135deg,#000a1a,#001530 50%,#002040 80%,#003060)}
.tpl-meme .card-title{color:#80ffff}.tpl-meme .card-msg{color:#b0ffff}
.tpl-sobriety{background:linear-gradient(135deg,#001a10,#003525 50%,#005540 80%,#007760)}
.tpl-sobriety .card-title{color:#80ffcc}.tpl-sobriety .card-msg{color:#a0ffd8}
.tpl-health{background:linear-gradient(135deg,#001520,#003050 50%,#004a70 80%,#006a90)}
.tpl-health .card-title{color:#80d4ff}.tpl-health .card-msg{color:#b0e8ff}
.tpl-school{background:linear-gradient(135deg,#000a1a,#001530 50%,#002850 80%,#003a70)}
.tpl-school .card-title{color:#88ccff}.tpl-school .card-msg{color:#b8e0ff}
.tpl-exam{background:linear-gradient(135deg,#001a0a,#003820 50%,#006040 80%,#008855)}
.tpl-exam .card-title{color:#88ffaa}.tpl-exam .card-msg{color:#b8ffcc}
.tpl-canada{background:linear-gradient(135deg,#1a0000,#3d0000 40%,#700000 70%,#aa0000)}
.tpl-canada .card-title{color:#ff8888}.tpl-canada .card-msg{color:#ffbbbb}
.tpl-australia{background:linear-gradient(135deg,#001520,#002840 50%,#004060 80%,#005880)}
.tpl-australia .card-title{color:#80ccff}.tpl-australia .card-msg{color:#b0e0ff}
.tpl-africa{background:linear-gradient(135deg,#0a0500,#201000 40%,#402000 70%,#703500)}
.tpl-africa .card-title{color:#ffbb66}.tpl-africa .card-msg{color:#ffd4a0}
.tpl-europe-blue{background:linear-gradient(135deg,#000a20,#001535 50%,#002060 80%,#003080)}
.tpl-europe-blue .card-title{color:#80aaff}.tpl-europe-blue .card-msg{color:#b0c8ff}
.tpl-bastille{background:linear-gradient(135deg,#00001a,#00003d 40%,#150040 70%,#2a0060)}
.tpl-bastille .card-title{color:#8080ff}.tpl-bastille .card-msg{color:#c0c0ff}

/* ═══ FOOTER ═══ */
footer{background:var(--bg2);border-top:1px solid var(--border);padding:2.5rem 1.25rem 1.5rem;margin-top:auto}
.footer-inner{max-width:1280px;margin:0 auto}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2rem}
.footer-brand h3{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--text);margin-bottom:.5rem}
.footer-brand h3 span{color:var(--accent)}
.footer-brand p{font-size:.8rem;color:var(--text3);line-height:1.7;max-width:260px}
.footer-col h4{font-size:.75rem;font-weight:600;color:var(--text2);letter-spacing:1px;text-transform:uppercase;margin-bottom:.75rem}
.footer-col a{display:block;font-size:.82rem;color:var(--text3);text-decoration:none;margin-bottom:.4rem;transition:color .15s}
.footer-col a:hover{color:var(--text2)}
.footer-bottom{border-top:1px solid var(--border);padding-top:1.25rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem}
.footer-copy{font-size:.76rem;color:var(--text4)}
.footer-legal{display:flex;gap:1rem;flex-wrap:wrap}
.footer-legal a{font-size:.76rem;color:var(--text4);text-decoration:none;transition:color .15s}
.footer-legal a:hover{color:var(--text2)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .nav-links{display:none}
  .mob-nav-toggle{display:flex}
  .nav-search{max-width:200px}
}
@media(max-width:720px){
  .main{flex-direction:column;padding:1rem;gap:0}
  .sidebar{width:100%;position:static;max-height:none;margin-bottom:.5rem}
  .mob-sidebar-btn{display:flex}
  .sidebar-inner{display:none}
  .sidebar-inner.open{display:block}
  .cards-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
  .card-icon{font-size:1.6rem;margin-bottom:.4rem}
  .card-title{font-size:.92rem}
  .card-msg{font-size:.69rem;max-width:160px}
  .card-footer{padding:.5rem .7rem}
  .card-label{font-size:.62rem;max-width:80px}
  .btn-action{padding:3px 7px;font-size:.65rem}
  .hero{padding:1.25rem .75rem 1rem}
  .hero h1{font-size:1.6rem}
  .modal{border-radius:18px 18px 0 0;position:fixed;bottom:0;left:0;right:0;max-width:100%;max-height:92vh;border-left:none;border-right:none;border-bottom:none}
  .modal-overlay{align-items:flex-end;padding:0}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .nav-search{display:none}
}
@media(max-width:400px){
  .cards-grid{grid-template-columns:1fr}
}


/* ═══ POS-STYLE REFINEMENT + STABILITY ═══ */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nav-link,.mob-nav-link,.subcat-btn,.all-btn{transition:background .15s,color .15s,border-color .15s}
.nav-link{border-radius:6px}
.hero{border-bottom:1px solid var(--border);background:radial-gradient(ellipse 70% 90% at 50% 0%,var(--hero-radial),transparent 72%)}
.hero h1{letter-spacing:-.02em}
.breadcrumb{max-width:1280px}
.breadcrumb a{font-weight:500}
.breadcrumb .current{font-weight:500}
.page-wrap{max-width:1280px;margin:0 auto;width:100%}
.main{align-items:flex-start}
.cards-heading{font-size:1.28rem;letter-spacing:-.01em}
.cards-header{margin-bottom:1.15rem}
.cards-grid{align-items:start}
.card-wrapper{min-width:0}
.card-footer{min-height:40px}
.btn-action{min-height:26px}
.pagination{margin-top:2.25rem;margin-bottom:.25rem}
.related-section{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.related-kicker{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:600;margin-bottom:.35rem}
.related-title{font-family:'Playfair Display',serif;font-size:1.2rem;color:var(--text);margin-bottom:.85rem}
.related-links{display:flex;flex-wrap:wrap;gap:.5rem}
.related-link{display:inline-flex;align-items:center;padding:.5rem .72rem;border:1px solid var(--border2);border-radius:8px;background:var(--bg3);color:var(--text2);font-size:.76rem;text-decoration:none;transition:all .15s}
.related-link:hover{color:var(--accent);border-color:var(--accent);background:var(--bg4);transform:translateY(-1px)}
.cat-header .cat-label{font-weight:500}
.subcat-btn{width:100%;text-decoration:none}
@media(max-width:760px){
  .related-section{margin-top:2rem}
  .related-links{gap:.4rem}
  .related-link{font-size:.74rem;padding:.46rem .62rem}
}

/* Performance/accessibility refinement */
.cards-grid {
  contain: layout paint;
}
.cards-grid.loading-grid {
  display: grid !important;
}
.wish-skeleton {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(90deg, var(--bg4), var(--border), var(--bg4));
  background-size: 200% 100%;
  animation: wishSkeleton 1.4s ease-in-out infinite;
  overflow: hidden;
}
@keyframes wishSkeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.sr-only {
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ═══ WISH DASHBOARD — LIGHT-FIRST DESIGN ═══ */
:root{
  --bg:#f5f6fb;
  --bg2:#ffffff;
  --bg3:#ffffff;
  --bg4:#f1efff;
  --bg5:#e6e4f2;
  --border:#e5e4ee;
  --border2:#dcdbe8;
  --text:#15152d;
  --text2:#4e4d68;
  --text3:#77768f;
  --text4:#aaa9bc;
  --accent:#6246f5;
  --accent2:#6246f5;
  --accent3:#5238e8;
  --card-label:#5b43df;
  --hero-radial:rgba(98,70,245,.07);
  --shadow:rgba(33,28,70,.09);
}
body:not(.light){
  --bg:#0f1017;
  --bg2:#171821;
  --bg3:#1b1c27;
  --bg4:#242536;
  --bg5:#343548;
  --border:#292a38;
  --border2:#38394b;
  --text:#f2f1f7;
  --text2:#b7b5c8;
  --text3:#858399;
  --text4:#5f5e70;
  --accent:#6c5ce7;
  --accent2:#c9b8ff;
  --accent3:#7d6ff5;
  --card-label:#a99aff;
  --hero-radial:rgba(108,92,231,.12);
  --shadow:rgba(0,0,0,.28);
}
body{
  background:var(--bg);
}
.navbar{
  background:rgba(255,255,255,.94);
  border-bottom:1px solid #e7e6ef;
  backdrop-filter:blur(14px);
}
body:not(.light) .navbar{
  background:rgba(23,24,33,.94);
  border-bottom-color:var(--border);
}
.nav-inner{
  max-width:100%;
  height:60px;
  padding:0 24px;
  gap:18px;
}
.nav-logo{
  font-size:1.34rem;
  color:#14142b;
  gap:7px;
}
body:not(.light) .nav-logo{color:var(--text)}
.nav-logo:first-letter{color:var(--accent)}
.nav-logo span{color:#6246f5}
.nav-links{
  gap:2px;
  overflow:hidden;
}
.nav-link{
  color:#18172d;
  font-size:.82rem;
  padding:9px 12px;
  border-radius:999px;
}
body:not(.light) .nav-link{color:var(--text2)}
.nav-link:hover{background:#f0effa;color:var(--text)}
.nav-link.active{
  background:#eeeaff;
  color:#6246f5;
}
body:not(.light) .nav-link.active{background:var(--bg4);color:var(--accent2)}
.nav-search{
  max-width:395px;
  height:40px;
  border-radius:999px;
  background:#f5f5fb;
  border-color:#ddddea;
}
body:not(.light) .nav-search{background:var(--bg3);border-color:var(--border2)}
.theme-toggle{
  width:42px;
  height:42px;
  padding:0;
  justify-content:center;
  border-radius:50%;
  background:#f5f5fb;
  border-color:#deddea;
}
.theme-toggle span{display:none}
body:not(.light) .theme-toggle{background:var(--bg3);border-color:var(--border2)}

.hero{display:none}
.breadcrumb{
  max-width:100%;
  padding:7px 24px 5px;
  font-size:.72rem;
  background:var(--bg);
}
.breadcrumb .sep,.breadcrumb .current,.breadcrumb .parent{color:var(--text3)}

.page-wrap{
  max-width:100%;
  margin:0;
}
.main{
  max-width:100%;
  padding:18px 24px 30px;
  gap:18px;
}
.sidebar{width:265px;top:78px;max-height:none;overflow:visible}
.sidebar-inner{
  padding:2px 8px;
}
.all-btn{
  padding:11px 13px;
  min-height:44px;
  font-size:.9rem;
  background:transparent;
}
.all-btn.active{
  background:#ece9ff;
  border-left:0;
  color:#4e36d8;
}
body:not(.light) .all-btn.active{background:var(--bg4);color:var(--accent2)}
.sidebar-section-title{
  padding:0 13px;
  margin-top:10px;
  color:#77758f;
}
.cat-header{
  min-height:42px;
  padding:9px 13px;
  color:#16162e;
  font-size:.86rem;
}
body:not(.light) .cat-header{color:var(--text2)}
.cat-header:hover,.cat-header.open{background:#f0eff8}
body:not(.light) .cat-header:hover,body:not(.light) .cat-header.open{background:var(--bg4)}
.cat-header.active-cat{
  background:#f0effa;
  border-left:0;
  color:#4e36d8;
}
body:not(.light) .cat-header.active-cat{background:var(--bg4);color:var(--accent2)}
.cat-badge{color:#74728b;font-size:.7rem}
.subcat-btn{
  min-height:34px;
  padding:6px 10px 6px 18px;
}
.subcat-btn.active{
  background:#f1efff;
  border-left:0;
  color:#543bdc;
}
body:not(.light) .subcat-btn.active{background:var(--bg4);color:var(--accent2)}

.cards-area{
  flex:1 1 auto;
  min-width:0;
}
.cards-header{
  margin-bottom:13px;
  min-height:45px;
}
.cards-heading{
  font-family:'Playfair Display',serif;
  font-size:2rem;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.025em;
  color:#111126;
}
body:not(.light) .cards-heading{color:var(--text)}
.cards-meta{
  font-size:.75rem;
}
.cards-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.card-wrapper{
  border-radius:13px;
  border:1px solid #e4e3ec;
  background:#fff;
  box-shadow:0 3px 12px rgba(32,28,70,.045);
}
body:not(.light) .card-wrapper{background:var(--bg3);border-color:var(--border2)}
.card-wrapper:hover,.card-wrapper:focus-visible{
  transform:translateY(-2px);
  border-color:#cfc8ff;
  box-shadow:0 8px 22px rgba(77,60,180,.10);
}
.greeting-card{
  aspect-ratio:1.62/1;
  min-height:160px;
  padding:20px;
}
.card-icon{
  font-size:1.35rem;
  margin-bottom:7px;
}
.card-title{
  font-size:clamp(1rem,1.55vw,1.45rem);
  line-height:1.08;
  margin-bottom:8px;
}
.card-msg{
  font-size:.76rem;
  line-height:1.5;
  max-width:230px;
}
.card-footer{
  min-height:47px;
  padding:7px 10px;
  background:#fff;
  border-top:1px solid #eeeef3;
}
body:not(.light) .card-footer{background:var(--bg3);border-top-color:var(--border)}
.card-label{
  text-transform:none;
  font-size:.75rem;
  color:#6a6781;
  max-width:120px;
}
.card-actions{gap:6px}
.btn-action{
  min-height:34px;
  padding:5px 12px;
  border-radius:9px;
  background:#fafaff;
  color:#17162c;
  border-color:#deddea;
  font-size:.73rem;
}
body:not(.light) .btn-action{background:var(--bg3);color:var(--text2);border-color:var(--border2)}
.btn-action:hover{background:#eeeaff;border-color:#cfc7ff;color:#5039dc}

.dashboard-aside{
  width:295px;
  flex:0 0 295px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tool-card{
  background:#fff;
  border:1px solid #e4e3ec;
  border-radius:15px;
  box-shadow:0 4px 16px rgba(35,29,78,.045);
  padding:16px;
}
body:not(.light) .tool-card{
  background:var(--bg3);
  border-color:var(--border2);
  box-shadow:none;
}
.tool-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:13px;
}
.tool-card h2{
  font-family:'Playfair Display',serif;
  font-size:1.15rem;
  color:#15142b;
}
body:not(.light) .tool-card h2{color:var(--text)}
.clear-filters{
  border:0;
  background:transparent;
  color:#5d40e9;
  font:500 .74rem 'DM Sans',sans-serif;
  cursor:pointer;
}
.filter-group{margin-top:14px}
.filter-label,.tool-label{
  display:block;
  color:#18172e;
  font-size:.76rem;
  font-weight:500;
  margin-bottom:7px;
}
body:not(.light) .filter-label,body:not(.light) .tool-label{color:var(--text)}
.filter-options{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.filter-chip{
  min-height:31px;
  padding:5px 11px;
  border:1px solid #deddea;
  background:#f8f8fc;
  color:#29283f;
  border-radius:999px;
  font:400 .7rem 'DM Sans',sans-serif;
  cursor:pointer;
  transition:all .15s;
}
body:not(.light) .filter-chip{background:var(--bg4);border-color:var(--border2);color:var(--text2)}
.filter-chip:hover{border-color:#bdb4ff;color:#543bdc}
.filter-chip.active{
  background:#6246f5;
  color:#fff;
  border-color:#6246f5;
}
.apply-filter-btn,.create-card-btn{
  width:100%;
  min-height:40px;
  margin-top:15px;
  border:0;
  border-radius:10px;
  background:linear-gradient(135deg,#674cf8,#5a43e9);
  color:#fff;
  font:600 .78rem 'DM Sans',sans-serif;
  cursor:pointer;
  box-shadow:0 5px 13px rgba(98,70,245,.18);
}
.apply-filter-btn:hover,.create-card-btn:hover{background:#5339e9}
.create-card{
  padding:17px;
}
.create-card-icon{
  color:#6246f5;
  font-size:1.35rem;
  margin-bottom:1px;
}
.create-card h2{font-size:1.16rem;margin-bottom:6px}
.create-card p{
  color:#74728a;
  font-size:.75rem;
  line-height:1.5;
  margin-bottom:13px;
}
body:not(.light) .create-card p{color:var(--text3)}
.tool-select,.tool-textarea{
  width:100%;
  border:1px solid #deddea;
  border-radius:10px;
  background:#fbfbfe;
  color:#22213a;
  font:400 .75rem 'DM Sans',sans-serif;
  outline:none;
}
body:not(.light) .tool-select,body:not(.light) .tool-textarea{
  background:var(--bg);
  border-color:var(--border2);
  color:var(--text);
}
.tool-select{
  min-height:41px;
  padding:0 11px;
  margin-bottom:11px;
}
.tool-textarea{
  padding:10px 11px;
  resize:vertical;
  min-height:83px;
}
.tool-select:focus,.tool-textarea:focus{
  border-color:#8e7cff;
  box-shadow:0 0 0 3px rgba(98,70,245,.10);
}
.char-count{
  text-align:right;
  color:#88869b;
  font-size:.65rem;
  margin-top:3px;
}
.design-label{margin-top:13px}
.design-picker{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:6px;
}
.design-thumb{
  height:55px;
  border-radius:8px;
  border:2px solid transparent;
  cursor:pointer;
  overflow:hidden;
  position:relative;
}
.design-thumb.active{
  border-color:#6246f5;
  box-shadow:0 0 0 1px #6246f5;
}
.design-thumb::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 55%);
  pointer-events:none;
}
.create-card-btn{margin-top:13px}

.dashboard-aside + *{}
.mob-sidebar-btn{border-color:#dddbea}
.related-section{margin-top:24px}

@media(max-width:1180px){
  .nav-links .nav-link:nth-child(n+7){display:none}
  .dashboard-aside{width:270px;flex-basis:270px}
  .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:960px){
  .main{padding:14px 18px 26px}
  .sidebar{width:215px}
  .dashboard-aside{display:none}
  .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards-heading{font-size:1.7rem}
}
@media(max-width:720px){
  .nav-inner{padding:0 13px;height:58px}
  .nav-logo{font-size:1.15rem}
  .main{padding:10px 12px 22px}
  .sidebar{width:100%;position:static;margin-bottom:7px}
  .mob-sidebar-btn{display:flex}
  .sidebar-inner{padding:0}
  .dashboard-aside{display:flex;width:100%;flex-basis:auto;order:3}
  .cards-area{order:2}
  .sidebar{order:1}
  .cards-header{margin-top:2px}
  .cards-heading{font-size:1.55rem}
  .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .greeting-card{min-height:145px;padding:13px}
  .card-title{font-size:.95rem}
  .card-msg{font-size:.67rem}
  .card-footer{min-height:43px;padding:6px}
  .btn-action{padding:4px 8px;min-height:31px}
  .card-label{display:none}
  .breadcrumb{padding:5px 13px}
}
@media(max-width:400px){
  .cards-grid{grid-template-columns:1fr}
  .dashboard-aside{display:flex}
}


/* Favorites */
.favorite-btn{
  position:absolute;top:10px;right:10px;z-index:5;
  width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;color:#25233d;border-radius:50%;cursor:pointer;
  font-size:1.05rem;transition:transform .15s,background .15s,color .15s;
}
body:not(.light) .favorite-btn{color:var(--text)}
.favorite-btn:hover{background:#f0effa;transform:scale(1.06)}
.favorite-btn.is-favorite{color:#e5254f}
body:not(.light) .favorite-btn:hover{background:var(--bg4)}
.sidebar-fav{
  display:flex;align-items:center;gap:8px;width:100%;padding:9px 13px;border:0;
  background:transparent;color:var(--text);font:400 .9rem 'DM Sans',sans-serif;cursor:pointer;
  border-radius:9px;text-align:left;margin-bottom:3px;
}
.sidebar-fav:hover{background:var(--bg4)}
.sidebar-fav .fav-count{margin-left:auto;background:#eef0f7;color:#77758b;padding:2px 7px;border-radius:999px;font-size:.68rem}


.cards-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.mobile-filter-toggle{
  display:none;
  align-items:center;
  gap:7px;
  min-height:40px;
  padding:0 14px;
  border:1px solid #deddea;
  border-radius:10px;
  background:#fff;
  color:#19182f;
  font:500 .76rem 'DM Sans',sans-serif;
  cursor:pointer;
}
body:not(.light) .mobile-filter-toggle{
  background:var(--bg3);
  border-color:var(--border2);
  color:var(--text);
}
.mobile-filter-toggle:hover{
  border-color:#bdb4ff;
  color:#563ee0;
}
.dashboard-aside.is-open{display:flex!important}
@media(max-width:1180px){
  .mobile-filter-toggle{display:inline-flex}
}
@media(max-width:720px){
  .cards-header-actions{gap:6px}
  .cards-meta{font-size:.68rem}
  .mobile-filter-toggle{min-height:36px;padding:0 11px}
}


/* Collapsible Filters */
.filter-card-head{margin-bottom:0}
.filter-expand-btn{
  display:flex;align-items:center;gap:8px;flex:1;min-height:32px;padding:0;
  border:0;background:transparent;color:#15142b;cursor:pointer;text-align:left;font:inherit
}
body:not(.light) .filter-expand-btn{color:var(--text)}
.filter-title{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:700}
.filter-chevron{
  margin-left:2px;font:700 1rem 'DM Sans',sans-serif;color:#77758d;
  transition:transform .18s ease
}
.filter-card.is-collapsed .filter-chevron{transform:rotate(180deg)}
.filter-panel{
  max-height:1000px;overflow:hidden;opacity:1;
  transition:max-height .22s ease,opacity .16s ease
}
.filter-card.is-collapsed .filter-panel{max-height:0;opacity:0}


/* ═══ V3 PRODUCT REFINEMENT ═══ */
.hero{
  padding:1.35rem 1.25rem 1.1rem;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,#fff7f2 0%,#f8f2ff 52%,#eef6ff 100%);
}
.hero-shell{
  max-width:1280px;min-height:205px;margin:0 auto;padding:1.6rem 2rem;
  border:1px solid rgba(110,92,210,.14);border-radius:18px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  align-items:center;position:relative;
  background:linear-gradient(115deg,rgba(255,255,255,.82),rgba(255,255,255,.35));
  box-shadow:0 12px 35px rgba(61,47,115,.08);
}
.hero-copy{position:relative;z-index:2;max-width:720px;text-align:left}
.hero-kicker{
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.35rem;
}
.hero h1{font-size:clamp(1.8rem,3.6vw,2.65rem);color:#17142c;text-align:left}
.hero p{color:#595574;margin:.45rem 0 0;font-size:.9rem;max-width:650px}
.hero-search{max-width:650px;margin:.9rem 0 0}
#searchInput{background:rgba(255,255,255,.92);border-color:#d9d4eb;box-shadow:0 5px 18px rgba(66,53,120,.06)}
.intent-chips{display:flex;gap:.42rem;flex-wrap:wrap;margin-top:.72rem}
.intent-chips a{
  display:inline-flex;align-items:center;padding:.38rem .65rem;border:1px solid #ddd8ef;
  border-radius:999px;background:rgba(255,255,255,.8);color:#4e486b;text-decoration:none;
  font-size:.7rem;font-weight:500;transition:all .15s;
}
.intent-chips a:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}
.search-label{text-align:left;margin-top:.42rem}
.hero-art{height:100%;min-height:165px;position:relative;overflow:hidden}
.hero-art:after{
  content:'';position:absolute;inset:38% -10% -30% 0;
  background:linear-gradient(145deg,transparent 20%,rgba(117,104,160,.16) 20%,rgba(117,104,160,.16) 48%,transparent 48%);
  clip-path:polygon(0 100%,20% 38%,38% 62%,55% 18%,72% 55%,86% 30%,100% 62%,100% 100%);
}
.hero-sun{
  position:absolute;width:92px;height:92px;border-radius:50%;right:21%;top:14%;
  background:radial-gradient(circle,#ffd98a 0 48%,#ffb35f 49% 58%,rgba(255,179,95,0) 60%);
  filter:drop-shadow(0 5px 15px rgba(255,169,79,.25));
}
.hero-cloud{position:absolute;background:rgba(255,255,255,.68);border-radius:999px;filter:blur(.2px)}
.hero-cloud:before,.hero-cloud:after{content:'';position:absolute;background:inherit;border-radius:50%}
.hero-cloud-a{width:120px;height:20px;right:3%;top:26%}
.hero-cloud-a:before{width:42px;height:42px;left:20px;top:-19px}
.hero-cloud-a:after{width:52px;height:52px;right:20px;top:-25px}
.hero-cloud-b{width:90px;height:16px;right:39%;top:52%;opacity:.5}
.hero-cloud-b:before{width:34px;height:34px;left:14px;top:-16px}
.hero-cloud-b:after{width:38px;height:38px;right:14px;top:-20px}
.hero-mountain{position:absolute;bottom:-14%;height:105px;width:75%;clip-path:polygon(0 100%,24% 34%,39% 62%,55% 14%,69% 55%,82% 28%,100% 100%)}
.hero-mountain-a{right:-4%;background:linear-gradient(160deg,#9d98b4,#77718f)}
.hero-mountain-b{left:15%;bottom:-23%;width:65%;background:linear-gradient(160deg,#c7bfd2,#a49bb7);opacity:.65}
.hero-script{
  position:absolute;right:4%;top:35%;z-index:3;font-family:'Playfair Display',serif;
  font-style:italic;font-size:1.65rem;line-height:.92;text-align:right;color:#463b68;
}
.cards-subheading{font-size:.74rem;color:var(--text3);margin-top:.28rem}
.sort-wrap{display:flex;align-items:center;gap:.38rem;font-size:.7rem;color:var(--text3);white-space:nowrap}
.sort-wrap select{
  border:1px solid var(--border2);background:var(--bg3);color:var(--text2);
  border-radius:8px;padding:6px 26px 6px 9px;font:inherit;cursor:pointer;outline:none;
}
.sort-wrap select:focus{border-color:var(--accent)}
.cards-header-actions{flex-wrap:wrap}
.footer-grid{grid-template-columns:1.8fr 1fr 1fr 1fr 1fr}
.footer-legal-col a{color:var(--text2)}
.footer-legal-col a:hover{color:var(--accent)}
.footer-note{font-size:.72rem;color:var(--text4)}
@media(max-width:1100px){
  .hero-shell{grid-template-columns:1fr}.hero-art{position:absolute;right:0;top:0;width:42%;opacity:.75}
  .hero-copy{max-width:760px}.hero-art:after{opacity:.8}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
  .footer-legal-col{grid-column:2/-1}
}
@media(max-width:720px){
  .hero{padding:.7rem}
  .hero-shell{padding:1.15rem 1rem;min-height:0;border-radius:14px}
  .hero-art{display:none}
  .hero h1{font-size:1.65rem}
  .hero p{font-size:.8rem}
  .intent-chips{gap:.35rem}.intent-chips a{font-size:.66rem;padding:.34rem .55rem}
  .cards-subheading{display:none}
  .sort-wrap span{display:none}
  .sort-wrap select{padding:5px 22px 5px 7px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-legal-col{grid-column:auto}
  .footer-bottom{align-items:flex-start}
}
@media(max-width:430px){
  .hero-search{margin-top:.7rem}
  .intent-chips a:nth-child(n+6){display:none}
  .cards-header-actions{width:100%;justify-content:flex-start}
}


/* ═══════════════════════════════════════════════════════════════
   WISH GREETING V4 — CLEAN PRODUCT UI
   Visual direction: refined, warm, lightweight, scalable.
   ═══════════════════════════════════════════════════════════════ */

/* Layout */
.nav-inner{height:58px;padding:0 22px;gap:14px}
.nav-logo{font-size:1.27rem;white-space:nowrap}
.nav-links{flex:1;min-width:0}
.nav-link{font-size:.78rem;padding:8px 10px}
.nav-search{max-width:360px;height:38px}
.main{padding:16px 22px 30px;gap:16px}
.sidebar{width:238px;flex:0 0 238px}
.dashboard-aside{width:276px;flex:0 0 276px}
.page-wrap{max-width:1440px;margin:0 auto}

/* Hero — rich enough to feel like a greeting product, light enough for speed */
.hero{
  display:block;
  padding:12px 22px 4px;
  border-bottom:0;
  background:var(--bg);
}
.hero-shell{
  max-width:1440px;
  min-height:176px;
  padding:1.45rem 1.8rem;
  border:1px solid #e6dff2;
  border-radius:18px;
  background:
    radial-gradient(circle at 78% 22%,rgba(255,205,130,.40),transparent 23%),
    radial-gradient(circle at 96% 82%,rgba(147,188,238,.26),transparent 32%),
    linear-gradient(120deg,#fffaf5 0%,#f9f2ff 48%,#f2f7ff 100%);
  box-shadow:0 8px 28px rgba(44,32,85,.055);
}
.hero-copy{max-width:760px}
.hero-kicker{font-size:.63rem;letter-spacing:.15em;margin-bottom:.42rem}
.hero h1{font-size:clamp(1.75rem,3.1vw,2.45rem);line-height:1.04}
.hero p{font-size:.82rem;line-height:1.55;max-width:670px}
.hero-search{max-width:620px;margin:.72rem 0 0}
.hero-search svg{width:16px;height:16px}
#searchInput{height:39px;font-size:.76rem}
.intent-chips{margin-top:.58rem}
.intent-chips a{font-size:.66rem;padding:.33rem .62rem}
.hero-art{min-height:142px}
.hero-script{font-size:1.55rem;right:3%;top:34%}
.hero-sun{width:78px;height:78px;right:23%;top:13%}

/* Category pages can use the full hero; All Wishes gets a quieter treatment. */
body.all-wishes-view .hero-shell{
  min-height:140px;
  background:
    radial-gradient(circle at 82% 28%,rgba(123,98,240,.11),transparent 25%),
    linear-gradient(120deg,#ffffff,#f7f4ff 58%,#f4f8ff);
}
body.all-wishes-view .hero-art{opacity:.72}
body.all-wishes-view .hero-kicker{display:none}
body.all-wishes-view .hero h1{font-size:2rem}
body.all-wishes-view .hero p{max-width:700px}
body.all-wishes-view .hero .search-label{display:none}

/* Breadcrumb */
.breadcrumb{max-width:1440px;margin:0 auto;padding:6px 22px 4px;font-size:.68rem}

/* Results header */
.cards-header{margin-bottom:11px;min-height:42px}
.cards-heading{font-size:1.72rem}
.cards-subheading{font-size:.7rem}
.cards-header-actions{gap:8px}
.cards-meta{font-size:.68rem}
.sort-wrap{font-size:.66rem}
.sort-wrap select{height:32px;font-size:.66rem;padding:5px 25px 5px 8px}

/* Cards — slightly more visual depth without heavy assets */
.cards-grid{gap:12px}
.card-wrapper{
  border-radius:12px;
  box-shadow:0 2px 9px rgba(32,28,70,.04);
  overflow:hidden;
}
.card-wrapper:hover,.card-wrapper:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(77,60,180,.09);
}
.greeting-card{
  aspect-ratio:1.52/1;
  min-height:150px;
  padding:17px 15px;
}
.greeting-card:after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:34%;
  background:linear-gradient(to top,rgba(0,0,0,.12),transparent);
  pointer-events:none;
}
.card-icon{font-size:1.22rem;margin-bottom:6px}
.card-title{font-size:clamp(.96rem,1.35vw,1.25rem);margin-bottom:7px}
.card-msg{font-size:.7rem;line-height:1.42;max-width:215px}
.card-footer{min-height:42px;padding:6px 8px;gap:5px}
.card-label{
  font-size:.66rem;
  max-width:72px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card-actions{gap:4px;flex:1;justify-content:flex-end}
.btn-action{
  min-height:29px;
  padding:4px 7px;
  border-radius:8px;
  font-size:.63rem;
}
.btn-share{color:#5b43df}

/* Make the filter/create rail visually quieter than the cards */
.tool-card{
  border-radius:14px;
  box-shadow:0 3px 14px rgba(35,29,78,.04);
  padding:15px;
}
.filter-card-head{margin-bottom:9px}
.filter-title{font-family:'Playfair Display',serif;font-size:1.06rem}
.filter-group{margin-top:12px}
.filter-label,.tool-label{font-size:.7rem;margin-bottom:6px}
.filter-options{gap:5px}
.filter-chip{min-height:29px;padding:4px 9px;font-size:.65rem}
.apply-filter-btn,.create-card-btn{min-height:38px;margin-top:13px;font-size:.72rem}
.create-card{padding:15px}
.create-card h2{font-size:1.1rem}
.create-card p{font-size:.7rem;margin-bottom:11px}
.tool-select{min-height:38px;font-size:.7rem;margin-bottom:9px}
.tool-textarea{min-height:78px;font-size:.7rem}
.design-thumb{height:50px}

/* Related section */
.related-section{
  margin-top:2.15rem;
  padding:1.25rem 0 0;
}
.related-title{font-size:1.15rem}
.related-links{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.related-link{
  min-height:48px;
  justify-content:space-between;
  padding:.55rem .7rem;
  font-size:.68rem;
  border-radius:9px;
}
.related-link:after{content:'›';font-size:1rem;color:var(--accent);margin-left:5px}

/* Footer */
footer{padding:2.3rem 1.4rem 1.2rem}
.footer-inner{max-width:1280px}
.footer-grid{grid-template-columns:1.8fr 1fr 1fr 1fr 1fr;gap:1.8rem}
.footer-brand p{font-size:.74rem}
.footer-col h4{font-size:.68rem;margin-bottom:.65rem}
.footer-col a{font-size:.74rem;margin-bottom:.34rem}
.footer-bottom{padding-top:1rem}
.footer-copy,.footer-note{font-size:.68rem}

/* Loading and empty states */
.no-results{max-width:620px;margin:2.6rem auto 3rem;text-align:center}
.no-results-icon{font-size:2rem;margin-bottom:.5rem}
.loading-state{padding:3rem 1rem}

/* Accessibility / touch */
button,a,select,input,textarea{touch-action:manipulation}
@media(hover:hover){
  .btn-action:hover{transform:translateY(-1px)}
}

/* Tablet */
@media(max-width:1120px){
  .sidebar{width:220px;flex-basis:220px}
  .dashboard-aside{width:260px;flex-basis:260px}
  .main{padding-left:16px;padding-right:16px}
  .hero{padding-left:16px;padding-right:16px}
  .breadcrumb{padding-left:16px;padding-right:16px}
  .related-links{grid-template-columns:repeat(3,1fr)}
  .nav-links .nav-link{padding-left:7px;padding-right:7px}
}

/* Mobile */
@media(max-width:760px){
  .nav-inner{height:54px;padding:0 12px}
  .nav-logo{font-size:1.12rem}
  .nav-search{display:none}
  .main{padding:10px 12px 22px;gap:0}
  .sidebar{width:100%;flex-basis:auto;margin-bottom:8px}
  .dashboard-aside{width:100%;flex-basis:auto}
  .hero{padding:8px 12px 2px}
  .hero-shell{padding:1rem;min-height:0;border-radius:14px}
  .hero-copy{max-width:none}
  .hero h1{font-size:1.55rem}
  .hero p{font-size:.76rem}
  .hero-art{display:none}
  .hero-search{margin-top:.65rem}
  .intent-chips{gap:4px}
  .intent-chips a{font-size:.62rem;padding:.3rem .5rem}
  .breadcrumb{padding:5px 12px 3px}
  .cards-header{align-items:flex-start;gap:6px}
  .cards-heading{font-size:1.45rem}
  .cards-header-actions{justify-content:flex-start}
  .cards-meta{font-size:.62rem}
  .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .greeting-card{min-height:145px;padding:13px 11px}
  .card-title{font-size:.88rem}
  .card-msg{font-size:.64rem}
  .card-footer{min-height:40px;padding:5px}
  .card-label{display:none}
  .btn-action{font-size:.59rem;padding:4px 6px;min-height:28px}
  .related-links{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-legal-col{grid-column:auto}
}

/* Very small phones */
@media(max-width:420px){
  .cards-grid{grid-template-columns:1fr}
  .greeting-card{min-height:170px}
  .card-title{font-size:1rem}
  .card-msg{font-size:.69rem;max-width:250px}
  .card-label{display:block;max-width:85px}
  .btn-action{font-size:.62rem}
  .related-links{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-brand,.footer-legal-col{grid-column:auto}
}

/* Dark mode refinements */
body:not(.light) .hero-shell{
  background:
    radial-gradient(circle at 80% 20%,rgba(108,92,231,.18),transparent 28%),
    linear-gradient(120deg,#1a1a25,#202033 55%,#1b2330);
  border-color:var(--border2);
}
body:not(.light) .hero h1,
body:not(.light) .hero p{color:var(--text)}
body:not(.light) .intent-chips a{background:var(--bg3);border-color:var(--border2);color:var(--text2)}
body:not(.light) .sort-wrap select{background:var(--bg3);color:var(--text2);border-color:var(--border2)}
body:not(.light) .cards-subheading{color:var(--text3)}



/* Mobile tools drawer controls */
.tools-backdrop{
  display:none;
}
.mobile-tools-head{
  display:none;
}
.mobile-tools-close{
  width:36px;height:36px;border:1px solid var(--border2);border-radius:10px;
  background:var(--bg3);color:var(--text);font-size:1.35rem;line-height:1;
  cursor:pointer;align-items:center;justify-content:center;
}
.mobile-tools-close:hover{border-color:#bdb4ff;color:var(--accent)}
@media(max-width:760px){
  .tools-backdrop{
    position:fixed;inset:56px 0 0 0;z-index:995;
    background:rgba(19,16,39,.38);
    backdrop-filter:blur(2px);
  }
  body.tools-drawer-open .tools-backdrop{
    display:block;
  }
  .mobile-tools-head{
    display:flex;align-items:center;justify-content:space-between;
    position:sticky;top:-10px;z-index:4;
    min-height:44px;padding:0 2px 8px;
    background:var(--bg);
  }
  .mobile-tools-head strong{
    font:700 .9rem 'DM Sans',sans-serif;color:var(--text);
  }
  .mobile-tools-close{display:inline-flex}
  .dashboard-aside{z-index:1000}
  body.tools-drawer-open{overflow:hidden}
}

/* ═══ V5 MOBILE UX — PURPOSE-BUILT MOBILE LAYOUT ═══ */
@media (max-width:760px){
  html,body{overflow-x:hidden}
  .nav-inner{
    height:56px;padding:0 10px;gap:8px;
  }
  .nav-logo{font-size:1.05rem;white-space:nowrap}
  .nav-links{display:none}
  .nav-search{display:none}
  .theme-toggle{width:36px;height:36px}
  .mob-nav-toggle{width:36px;height:36px;display:flex}

  .hero{padding:8px 10px 4px}
  .hero-shell{
    display:block;padding:1rem .9rem .9rem;min-height:0;
    border-radius:14px;
  }
  .hero-kicker{font-size:.6rem;margin-bottom:.25rem}
  .hero h1{font-size:1.45rem;line-height:1.08}
  .hero p{font-size:.74rem;line-height:1.45;margin-top:.35rem}
  .hero-search{margin-top:.65rem}
  .hero-search input{font-size:.74rem}
  .intent-chips{margin-top:.55rem;gap:4px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
  .intent-chips::-webkit-scrollbar{display:none}
  .intent-chips a{flex:0 0 auto;font-size:.61rem;padding:.31rem .52rem}
  .search-label{font-size:.62rem}

  .breadcrumb{
    padding:5px 12px 3px;font-size:.62rem;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .main{
    display:flex;flex-direction:column;
    padding:8px 10px 20px;gap:0;
  }
  .sidebar{
    width:100%;flex:0 0 auto;margin:0 0 8px;position:static;
    max-height:none;
  }
  .mob-sidebar-btn{
    width:100%;min-height:42px;padding:9px 12px;
    border:1px solid var(--border);border-radius:11px;
    background:var(--bg2);box-shadow:0 2px 10px var(--shadow);
    font-size:.76rem;
  }
  .sidebar-inner{
    margin-top:6px;padding:6px;
    border:1px solid var(--border);border-radius:11px;
    background:var(--bg2);box-shadow:0 2px 10px var(--shadow);
  }
  .all-btn,.sidebar-fav{min-height:40px;font-size:.78rem}
  .cat-header{min-height:38px;font-size:.76rem}
  .subcat-btn{min-height:32px;font-size:.7rem}

  .cards-area{width:100%;min-width:0}
  .cards-header{
    min-height:0;margin:4px 0 10px;
    display:flex;flex-direction:column;gap:6px;
  }
  .cards-heading{font-size:1.42rem}
  .cards-subheading{font-size:.67rem}
  .cards-header-actions{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px;
  }
  .cards-meta{font-size:.62rem}
  .sort-wrap{font-size:.64rem;margin-left:auto}
  .sort-wrap select{min-height:31px;font-size:.64rem;border-radius:8px}
  .mobile-filter-toggle{min-height:31px;font-size:.65rem;padding:5px 9px}

  /* One strong card per row — avoids cramped text and tiny controls. */
  .cards-grid{
    grid-template-columns:1fr !important;
    gap:10px;
  }
  .card-wrapper{
    width:100%;border-radius:12px;
  }
  .greeting-card{
    width:100%;aspect-ratio:1.72/1;min-height:0;
    padding:18px 17px;
  }
  .card-icon{font-size:1.45rem;margin-bottom:5px}
  .card-title{font-size:1.02rem;line-height:1.08;margin-bottom:6px}
  .card-msg{
    font-size:.7rem;line-height:1.45;
    max-width:300px;
  }
  .card-footer{
    min-height:44px;padding:6px 8px;
  }
  .card-label{
    display:block;min-width:0;max-width:95px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:.63rem;
  }
  .card-actions{gap:4px;margin-left:auto}
  .btn-action{
    min-height:30px;padding:4px 8px;
    font-size:.61rem;border-radius:8px;white-space:nowrap;
  }

  /* Mobile tools become a slide-in drawer instead of appearing after all cards. */
  .dashboard-aside{
    position:fixed;
    z-index:1000;
    top:56px;right:0;bottom:0;
    width:min(92vw,380px) !important;
    max-width:380px;
    flex:none;
    padding:10px;
    overflow-y:auto;
    background:var(--bg);
    box-shadow:-14px 0 35px rgba(20,16,50,.16);
    border-left:1px solid var(--border);
    transform:translateX(105%);
    transition:transform .22s ease;
    visibility:hidden;
    pointer-events:none;
  }
  .dashboard-aside.is-open{
    transform:translateX(0);
    visibility:visible;
    pointer-events:auto;
  }
  .dashboard-aside .tool-card{box-shadow:0 2px 12px var(--shadow)}
  .filter-card.is-collapsed .filter-panel{display:none}
  .filter-expand-btn{min-height:44px;width:100%}
  .filter-expand-btn:focus-visible,.mobile-tools-close:focus-visible{
    outline:2px solid var(--accent);outline-offset:2px;
  }
  .create-card{padding:14px}

  .pagination{
    margin-top:1.3rem;gap:5px;flex-wrap:wrap;
  }
  .pagination button{min-width:32px;min-height:32px;font-size:.68rem}

  .related-section{
    margin-top:1.7rem;padding-top:1.1rem;
  }
  .related-title{font-size:1.05rem}
  .related-links{
    display:grid;grid-template-columns:1fr !important;gap:7px;
  }
  .related-link{
    min-height:42px;padding:.5rem .65rem;font-size:.7rem;
  }

  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
  .footer-legal-col{grid-column:auto}
  footer{padding:30px 14px 18px}
  .footer-inner{width:100%}
  .footer-col h4{font-size:.66rem}
  .footer-col a{font-size:.67rem;line-height:1.55}
  .footer-brand p{font-size:.7rem;line-height:1.55}
  .footer-bottom{font-size:.62rem;gap:6px}
}
@media (max-width:420px){
  .nav-logo{font-size:1rem}
  .hero-shell{padding:.85rem .8rem}
  .hero h1{font-size:1.34rem}
  .hero p{font-size:.7rem}
  .cards-heading{font-size:1.32rem}
  .greeting-card{aspect-ratio:1.58/1;padding:16px 14px}
  .card-title{font-size:.98rem}
  .card-msg{font-size:.68rem}
  .card-label{max-width:82px}
  .btn-action{font-size:.58rem;padding:4px 7px}
  .footer-grid{grid-template-columns:1fr}
  .footer-brand,.footer-legal-col{grid-column:auto}
}
@media (prefers-reduced-motion:reduce){
  .dashboard-aside{transition:none}
}


/* ═══ V6 CREATE A CARD — PRIMARY FEATURE ═══ */
.header-create-btn{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  border:0;border-radius:9px;padding:8px 12px;
  background:linear-gradient(135deg,#674cf8,#5a43e9);
  color:#fff;font:600 .74rem 'DM Sans',sans-serif;cursor:pointer;
  box-shadow:0 5px 13px rgba(98,70,245,.18);
  white-space:nowrap;transition:transform .15s,filter .15s;
}
.header-create-btn:hover{filter:brightness(1.05);transform:translateY(-1px)}
.header-create-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mobile-create-btn{
  display:flex;align-items:center;gap:10px;width:100%;margin:0 0 9px;
  padding:12px 13px;border:1px solid #ddd8f3;border-radius:11px;
  background:linear-gradient(135deg,#f4f0ff,#fff);color:#25213e;
  cursor:pointer;text-align:left;font-family:'DM Sans',sans-serif;
}
.mobile-create-icon{color:#5a43e9;font-size:1rem}
.mobile-create-copy{display:flex;flex-direction:column;gap:2px;flex:1}
.mobile-create-copy strong{font-size:.82rem}
.mobile-create-copy small{font-size:.65rem;color:#77728d}
.mobile-create-arrow{color:#5a43e9;font-size:1rem}
@media(max-width:760px){
  .header-create-btn{display:none}
}


.create-card{
  scroll-margin-top:72px;
}
.create-card:focus-within{
  border-color:rgba(98,70,245,.38);
}
@media(max-width:760px){
  .dashboard-aside .create-card{
    scroll-margin-top:12px;
  }
}



/* ============================================================
   WishGreeting V6 — Visual Redesign 3
   V6 functionality is preserved. This stylesheet is presentation-first.
   ============================================================ */
:root{
 --wg-primary:#7657e8; --wg-primary-dark:#6242d6; --wg-pink:#e96ba8;
 --wg-ink:#142552; --wg-body:#4c5876; --wg-muted:#7c86a0;
 --wg-line:#e7e8f2; --wg-soft:#f7f5ff; --wg-card:#fff;
 --wg-shadow:0 12px 34px rgba(41,39,93,.08);
 --wg-shadow2:0 20px 48px rgba(74,55,145,.13);
}
html{scroll-behavior:smooth}
body{background:#fbfbfe!important;color:var(--wg-ink);font-family:'DM Sans',sans-serif;}
/* Header: clean, modern, more spacious */
.navbar{height:70px!important;background:rgba(255,255,255,.96)!important;border-bottom:1px solid #eceaf5!important;box-shadow:0 3px 18px rgba(40,35,80,.035);position:sticky!important;top:0;z-index:50;}
.nav-inner{height:70px!important;max-width:1440px!important;padding:0 28px!important;gap:12px!important;}
.nav-logo{font-family:'DM Sans',sans-serif!important;font-size:17px!important;font-weight:700!important;letter-spacing:-.02em;color:#162653!important;white-space:nowrap;}
.nav-logo:first-letter{color:var(--wg-pink)}
.nav-links{gap:2px!important;margin-left:12px!important;}
.nav-link{font-size:12px!important;padding:10px 12px!important;border-radius:999px!important;color:#3e4968!important;}
.nav-link:hover{background:#f4f1ff!important;color:var(--wg-primary)!important}
.nav-link.active{background:#f0ecff!important;color:var(--wg-primary)!important;box-shadow:none!important;font-weight:600}
.header-create-btn{background:linear-gradient(135deg,#9b72f2,#6948dd)!important;border-radius:12px!important;padding:11px 18px!important;box-shadow:0 8px 20px rgba(104,73,220,.22)!important;font-size:12px!important;white-space:nowrap;}
.nav-search{height:40px!important;max-width:245px!important;min-width:190px;background:#f8f8fc!important;border:1px solid #e8e7f1!important;border-radius:999px!important;}
.nav-search input{font-size:12px!important;color:#303b5c}
.theme-toggle{width:40px;height:40px;border:1px solid #e9e8f2!important;background:#fafafd!important;border-radius:999px!important}
/* Hero: large, editorial, visual */
.hero{padding:14px 18px 16px!important;background:linear-gradient(135deg,#f0edff 0%,#fff0f7 53%,#edf7ff 100%)!important;border-bottom:1px solid #eeeaf7!important;}
.hero-shell{max-width:1440px!important;min-height:275px!important;padding:34px 42px!important;border-radius:26px!important;border:1px solid rgba(118,87,232,.10)!important;background:linear-gradient(110deg,rgba(255,255,255,.93),rgba(255,255,255,.53))!important;box-shadow:0 18px 55px rgba(73,59,132,.10)!important;overflow:hidden;position:relative;}
.hero-copy{max-width:700px!important;position:relative;z-index:2}
.hero-kicker{font-size:11px!important;font-weight:600!important;color:#8a55c9!important;background:#fff7fc!important;border:1px solid #f0dff0!important;padding:7px 11px!important}
.hero h1{font-family:'DM Sans',sans-serif!important;font-size:clamp(34px,4.1vw,56px)!important;line-height:1.02!important;letter-spacing:-.055em!important;color:#142653!important;margin:12px 0 10px!important;font-weight:750!important}
.hero h1 span{background:linear-gradient(90deg,#7b59e8,#d548a1)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.hero p{font-size:15px!important;line-height:1.62!important;max-width:610px!important;color:#4a5674!important}
.hero-search{max-width:650px!important;margin-top:17px!important}
.hero-search input{height:48px!important;border-radius:999px!important;background:#fff!important;border:1px solid #dedbeb!important;box-shadow:0 8px 24px rgba(65,55,120,.08)!important;font-size:12px!important}
.intent-chips{gap:6px!important;margin-top:9px!important}
.intent-chips a{background:rgba(255,255,255,.86)!important;border:1px solid #e5e0f0!important;border-radius:999px!important;padding:6px 10px!important;font-size:10px!important}
.hero-benefits{display:flex!important;gap:24px!important;margin-top:17px!important;position:relative;z-index:2}
.hero-benefit{gap:8px!important}
.benefit-icon{width:30px!important;height:30px!important;border-radius:50%!important;background:#fff!important;color:var(--wg-primary)!important;display:grid!important;place-items:center!important;box-shadow:0 4px 12px rgba(70,50,120,.07)}
.hero-benefit b{font-size:11px!important;color:#253254!important}.hero-benefit small{font-size:9px!important;color:#7b849b!important}
/* Hero art: layered greeting cards, not a generic mountain */
.hero-art{position:absolute!important;right:15px!important;top:0!important;width:46%!important;height:100%!important;min-height:275px!important;display:block!important;overflow:hidden!important}
.hero-art:before{content:'';position:absolute;right:8%;bottom:-55px;width:430px;height:160px;background:linear-gradient(180deg,#d9d5ed,#c5c1dd);clip-path:polygon(0 100%,18% 55%,30% 72%,46% 30%,59% 72%,72% 46%,88% 78%,100% 52%,100% 100%);opacity:.55}
.hero-art:after{content:'';position:absolute;right:12%;top:24px;width:82px;height:82px;border-radius:50%;background:linear-gradient(#ffd99d,#ffbd72);box-shadow:0 0 0 8px rgba(255,255,255,.35);}
.hero-sun,.hero-cloud,.hero-mountain-a,.hero-mountain-b,.hero-script{display:none!important}
.hero-art .card-a,.hero-art .card-b,.hero-art .card-c{display:block;position:absolute;border-radius:15px;border:5px solid rgba(255,255,255,.78);box-shadow:0 18px 34px rgba(52,44,104,.16);}
/* Generate three card surfaces using pseudo-elements on hero-art */
.hero-art{background:linear-gradient(155deg,transparent 35%,rgba(230,220,255,.22) 36%,transparent 65%)}
.hero-art{--card1:'Good Morning';--card2:'Happy Birthday';--card3:'You Matter';}
/* Main layout: 220 / flexible 3-col / 300 */
.main{max-width:1440px!important;padding:18px 28px 42px!important;gap:18px!important;align-items:start!important}
.sidebar{width:220px!important;flex:0 0 220px!important;top:86px!important}
.sidebar-inner{border:1px solid #e7e5f0!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--wg-shadow)!important;padding:8px!important}
.sidebar-section-title{font-size:9px!important;letter-spacing:.12em!important;color:#858da3!important}
.all-btn,.sidebar-fav,.cat-header{border-radius:10px!important;min-height:40px!important;font-size:11px!important}
.content{min-width:0!important}
.cards-header{margin:0 0 13px!important}
.cards-heading{font-family:'DM Sans',sans-serif!important;font-size:23px!important;letter-spacing:-.035em!important;color:#142653!important}
.cards-subheading{font-size:11px!important;color:#7a849e!important}
.cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:15px!important}
.card-wrapper{border:1px solid #e5e4ed!important;border-radius:16px!important;background:#fff!important;box-shadow:0 6px 20px rgba(45,40,86,.055)!important;overflow:hidden!important}
.card-wrapper:hover{transform:translateY(-4px)!important;border-color:#d6cdf8!important;box-shadow:var(--wg-shadow2)!important}
.greeting-card{aspect-ratio:1.13/1!important;min-height:210px!important;padding:19px!important}
.card-icon{font-size:26px!important}.card-title{font-size:20px!important;line-height:1.08!important}.card-message{font-size:10px!important;line-height:1.5!important;max-width:90%!important}
.card-footer{min-height:42px!important;padding:5px 7px!important}.card-actions{gap:4px!important}.btn-action{font-size:9px!important;padding:6px 7px!important;border-radius:7px!important}
/* Right rail */
.dashboard-aside{width:300px!important;flex:0 0 300px!important;gap:14px!important}
.tool-card{border:1px solid #e5e3ee!important;border-radius:18px!important;background:#fff!important;box-shadow:var(--wg-shadow)!important;padding:17px!important}
.tool-card h2{font-family:'DM Sans',sans-serif!important;font-size:16px!important;color:#182752!important}
.filter-chip{border-radius:999px!important;background:#fafafd!important;border:1px solid #e6e5ef!important;font-size:9px!important;padding:6px 9px!important}
.filter-chip.active{background:linear-gradient(135deg,#815eea,#6747dd)!important;color:#fff!important;border-color:transparent!important}
.apply-filter-btn,.create-card-btn{height:42px!important;border-radius:11px!important;background:linear-gradient(135deg,#956ef0,#6549df)!important;box-shadow:0 8px 18px rgba(101,73,223,.18)!important}
/* Explore */
.related-section{max-width:900px!important;margin:28px auto 0!important;padding-top:22px!important;border-top:1px solid #e7e5ee!important}
.related-title{font-family:'DM Sans',sans-serif!important;font-size:20px!important;color:#142653!important}
/* Footer */
footer{background:#fff!important;border-top:1px solid #eceaf3!important;margin-top:0!important}
.footer-inner{max-width:1440px!important;padding:34px 28px 18px!important}
.footer-grid{gap:38px!important}.footer-col h4{font-size:11px!important}.footer-col a,.footer-brand p{font-size:10px!important;color:#68728c!important}
/* Tablet */
@media(max-width:1100px){
 .nav-inner{padding:0 18px!important}.nav-links{display:none!important}.mob-nav-toggle{display:block!important}
 .nav-search{max-width:220px!important}.main{padding:16px 18px 34px!important}.sidebar{width:200px!important;flex-basis:200px!important}.dashboard-aside{width:270px!important;flex-basis:270px!important}.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.hero-art{width:42%!important;opacity:.78}
}
/* Mobile */
@media(max-width:760px){
 .navbar,.nav-inner{height:60px!important}.nav-inner{padding:0 12px!important}.nav-logo{font-size:15px!important}.header-create-btn,.nav-search{display:none!important}
 .hero{padding:8px!important}.hero-shell{min-height:0!important;padding:25px 20px!important;border-radius:20px!important}.hero-copy{max-width:none!important}.hero h1{font-size:34px!important}.hero p{font-size:13px!important}.hero-benefits{gap:12px!important;flex-wrap:wrap}.hero-benefit{min-width:115px}.hero-art{display:none!important}
 .main{display:block!important;padding:12px!important}.sidebar{width:100%!important;margin-bottom:10px!important}.sidebar-inner{display:none}.sidebar.open .sidebar-inner{display:block}.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.greeting-card{min-height:185px!important;padding:13px!important}.card-title{font-size:16px!important}.card-message{font-size:9px!important}.dashboard-aside{width:100%!important;margin-top:14px!important}.related-section{margin-top:20px!important}.footer-inner{padding:26px 16px 16px!important}.footer-grid{grid-template-columns:repeat(2,1fr)!important;gap:25px!important}
}
@media(max-width:480px){.cards-grid{grid-template-columns:1fr!important}.hero h1{font-size:30px!important}.hero-benefits{display:grid!important;grid-template-columns:1fr 1fr!important}.footer-grid{grid-template-columns:1fr 1fr!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}


/* ===== WishGreeting V4 visual reconstruction ===== */
:root{
 --wg-purple:#7050e8; --wg-purple2:#a56af0; --wg-pink:#e65b9f;
 --wg-navy:#142450; --wg-muted:#65708d; --wg-line:#e5e7f0;
}
body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;background:#fbfbfe!important;color:var(--wg-navy)!important}
.navbar{height:72px!important;background:rgba(255,255,255,.97)!important;border-bottom:1px solid #e8e7f0!important}
.nav-inner{max-width:1500px!important;height:72px!important;padding:0 28px!important}
.nav-logo{font-size:20px!important;letter-spacing:-.03em!important}
.nav-links{gap:2px!important}.nav-link{font-size:13px!important;padding:10px 14px!important;color:#273454!important}.nav-link.active{background:#f0ebff!important;color:#6848df!important;box-shadow:inset 0 -2px #7655ea!important}
.header-create-btn{padding:11px 18px!important;border-radius:12px!important;font-size:13px!important}
.nav-search{max-width:250px!important;height:40px!important}
.hero{padding:18px 28px 16px!important;background:linear-gradient(115deg,#f0edff 0%,#fff1f8 53%,#edf7ff 100%)!important}
.hero-shell{max-width:1500px!important;min-height:275px!important;padding:36px 42px!important;border-radius:26px!important;background:linear-gradient(110deg,rgba(255,255,255,.94),rgba(255,255,255,.58))!important;box-shadow:0 15px 42px rgba(72,56,135,.10)!important;overflow:hidden!important}
.hero-copy{max-width:760px!important;z-index:3}.hero-kicker{font-size:12px!important;padding:7px 11px!important;color:#8a4fbe!important;background:#fff6fd!important}
.hero h1{font-size:clamp(36px,4vw,58px)!important;line-height:1.04!important;letter-spacing:-.055em!important;margin:10px 0 12px!important;color:#132650!important;font-weight:800!important}
.hero h1 span,.hero h1 strong{background:linear-gradient(90deg,#7251e8,#cb49a5)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important}
.hero p{font-size:16px!important;line-height:1.55!important;max-width:650px!important}
.hero-search{max-width:680px!important;margin-top:20px!important}.hero-search input,#searchInput{height:48px!important;font-size:13px!important}
.intent-chips{gap:7px!important;margin-top:10px!important}.intent-chips a{padding:7px 11px!important;font-size:11px!important}
.hero-benefits{gap:22px!important;margin-top:18px!important}.hero-benefit{font-size:11px!important}.hero-benefit svg{width:22px!important;height:22px!important}
.hero-art{min-width:430px!important;opacity:1!important;transform:scale(1.12)!important}.hero-script{font-size:30px!important}
.hero-sun{width:72px!important;height:72px!important}.hero-mountain-a{transform:scale(1.15)!important}
.breadcrumb{max-width:1500px!important;padding:12px 28px 8px!important}
.main{max-width:1500px!important;padding:14px 28px 42px!important;gap:20px!important;align-items:flex-start!important}
.sidebar{width:235px!important;flex:0 0 235px!important}.sidebar-inner{padding:10px!important;border-radius:18px!important;background:#fff!important;box-shadow:0 8px 26px rgba(46,40,92,.055)!important}
.all-btn,.sidebar-fav,.cat-header{min-height:42px!important}.sidebar-section-title{font-size:10px!important;letter-spacing:.12em!important}
.cards-area{min-width:0!important;flex:1!important}.cards-header{margin-bottom:12px!important}.cards-heading{font-size:24px!important}.cards-subheading{font-size:12px!important}
.cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important}
.card-wrapper{border-radius:15px!important;overflow:hidden!important;background:#fff!important;border:1px solid #e3e4ed!important;box-shadow:0 6px 20px rgba(48,41,92,.055)!important}
.card-wrapper:hover{transform:translateY(-3px)!important;box-shadow:0 14px 30px rgba(48,41,92,.12)!important}
.greeting-card{aspect-ratio:1.12/1!important;padding:18px!important}.card-title{font-size:19px!important;line-height:1.08!important}.card-message{font-size:11px!important;line-height:1.45!important;max-width:92%!important}
.card-footer,.card-actions{min-height:42px!important}.btn-action{font-size:10px!important;padding:5px 8px!important}
.dashboard-aside{width:300px!important;flex:0 0 300px!important;gap:14px!important}.tool-card{border-radius:18px!important;padding:18px!important;background:#fff!important;box-shadow:0 9px 28px rgba(46,40,92,.065)!important}
.filter-chip{font-size:10px!important;padding:6px 10px!important;border-radius:999px!important}.apply-filter-btn,.create-card-btn{height:44px!important;border-radius:11px!important}
.tool-card.create-card{background:linear-gradient(145deg,#fff,#fbf7ff)!important}.create-card-icon{width:38px!important;height:38px!important}
.related-section{max-width:calc(100% - 0px)!important;margin-top:28px!important;padding-top:20px!important}.related-title{font-size:20px!important}.related-links{gap:10px!important}.related-links a{padding:11px 14px!important;border-radius:11px!important}
footer{margin-top:10px!important;padding:34px 28px 18px!important;background:#fff!important}.footer-inner{max-width:1500px!important}.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr!important;gap:40px!important}.footer-brand p{max-width:290px!important;line-height:1.55!important}.footer-col a,.footer-brand p{font-size:12px!important}.footer-bottom{font-size:11px!important;margin-top:26px!important}
@media(max-width:1250px){.cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.dashboard-aside{width:275px!important;flex-basis:275px!important}.sidebar{width:210px!important;flex-basis:210px!important}.hero-art{min-width:360px!important}}
@media(max-width:980px){.sidebar{display:none!important}.main{display:block!important}.dashboard-aside{width:100%!important;display:grid!important;grid-template-columns:1fr 1fr!important;margin-top:18px}.cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.hero-shell{padding:30px!important}.hero-art{min-width:300px!important;opacity:.6!important}}
@media(max-width:700px){.navbar{height:62px!important}.nav-inner{height:62px!important;padding:0 14px!important}.nav-logo{font-size:17px!important}.nav-links,.nav-search{display:none!important}.hero{padding:10px!important}.hero-shell{min-height:0!important;padding:24px 20px!important;border-radius:20px!important}.hero h1{font-size:34px!important}.hero p{font-size:13px!important}.hero-art{display:none!important}.hero-benefits{gap:12px!important;flex-wrap:wrap!important}.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.main{padding:10px 12px 30px!important}.cards-heading{font-size:21px!important}.dashboard-aside{grid-template-columns:1fr!important}.breadcrumb{padding:9px 12px 5px!important}footer{padding:28px 16px 16px!important}.footer-grid{grid-template-columns:1fr 1fr!important;gap:25px!important}}
@media(max-width:440px){.cards-grid{grid-template-columns:1fr!important}.hero h1{font-size:30px!important}.hero-benefits{display:none!important}}
\n\n/* Approved larger Create-a-Card banner */\n.wg-create-banner{max-width:1400px;margin:14px auto 10px;min-height:170px;padding:20px 30px;display:grid;grid-template-columns:250px minmax(0,1fr) 270px;align-items:center;gap:24px;position:relative;overflow:hidden;border:1px solid rgba(116,87,232,.14);border-radius:24px;background:radial-gradient(circle at 8% 50%,rgba(255,178,207,.44),transparent 12rem),radial-gradient(circle at 88% 20%,rgba(154,126,255,.3),transparent 20rem),linear-gradient(105deg,#fff0f7,#f5efff 48%,#eef7ff);box-shadow:0 14px 38px rgba(74,58,135,.09)}\n.wg-create-banner::after{content:"";position:absolute;width:320px;height:320px;right:-130px;bottom:-245px;border-radius:50%;background:rgba(255,255,255,.48)}\n.wg-create-art{height:130px;position:relative}\n.wg-mini-card{position:absolute;width:86px;height:112px;border-radius:11px;display:grid;place-items:center;font-size:32px;background:#fff;border:5px solid rgba(255,255,255,.9);box-shadow:0 11px 23px rgba(66,52,110,.15)}\n.wg-mini-card-one{left:18px;top:12px;transform:rotate(-11deg);background:linear-gradient(145deg,#ffb3ca,#e85da5);color:#fff}\n.wg-mini-card-two{left:86px;top:3px;transform:rotate(3deg);background:linear-gradient(145deg,#fff3df,#ffd18c)}\n.wg-mini-card-three{left:153px;top:12px;transform:rotate(10deg);background:linear-gradient(145deg,#fff,#eadfff);color:#d64f9e}\n.wg-create-copy{position:relative;z-index:1}.wg-create-kicker{color:#7152e2;font-size:.74rem;font-weight:800;letter-spacing:.14em;margin-bottom:5px}.wg-create-copy h2{margin:0;font-family:'DM Sans',sans-serif;font-size:clamp(1.65rem,2.8vw,2.35rem);line-height:1.14;letter-spacing:-.04em;color:#162653}.wg-create-copy h2 span{background:linear-gradient(90deg,#7557e8,#c34aa1);-webkit-background-clip:text;background-clip:text;color:transparent}.wg-create-copy p{margin:7px 0 13px;color:#5f6985;font-size:.9rem}.wg-create-steps{display:flex;gap:22px;flex-wrap:wrap}.wg-create-steps span{display:flex;align-items:center;gap:7px;color:#53607e;font-size:.7rem;line-height:1.2}.wg-create-steps b{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#7658e8;font-size:.95rem;box-shadow:0 4px 13px rgba(72,55,120,.08)}.wg-create-banner-btn{position:relative;z-index:2;justify-self:end;min-width:245px;min-height:60px;border:0;border-radius:16px;padding:0 24px;color:#fff;font-size:.98rem;font-weight:750;background:linear-gradient(135deg,#9569f0,#6146e0);box-shadow:0 12px 26px rgba(98,70,224,.25)}.wg-create-banner-btn span{margin-left:18px;font-size:1.2rem}.wg-create-banner-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(98,70,224,.3)}\n@media(max-width:1050px){.wg-create-banner{grid-template-columns:170px minmax(0,1fr) 215px;gap:15px;padding:17px 20px}.wg-create-art{transform:scale(.82);transform-origin:left center}.wg-create-banner-btn{min-width:195px}}\n@media(max-width:760px){.wg-create-banner{grid-template-columns:1fr;min-height:auto;padding:20px;gap:12px;margin:10px 10px}.wg-create-art{display:none}.wg-create-banner-btn{justify-self:stretch;width:100%}.wg-create-steps{gap:10px 16px}}\n
/* ============================================================
   CREATE-A-CARD BANNER — final layout + interaction fix
   ============================================================ */
.wg-create-banner{
  display:grid !important;
  grid-template-columns:250px minmax(0,1fr) 270px !important;
  align-items:center !important;
  gap:24px !important;
  width:calc(100% - 32px) !important;
  max-width:1400px !important;
  min-height:170px !important;
  margin:14px auto 10px !important;
  padding:20px 30px !important;
  box-sizing:border-box !important;
  position:relative !important;
  overflow:hidden !important;
  border:1px solid rgba(116,87,232,.16) !important;
  border-radius:24px !important;
  background:linear-gradient(105deg,#fff0f7 0%,#f5efff 48%,#eef7ff 100%) !important;
  box-shadow:0 14px 38px rgba(74,58,135,.10) !important;
}
.wg-create-banner .wg-create-art{display:block !important;height:130px !important;position:relative !important}
.wg-create-banner .wg-create-copy{display:block !important;position:relative !important;z-index:2 !important}
.wg-create-banner .wg-create-kicker{display:block !important;color:#7152e2 !important;font-size:.74rem !important;font-weight:800 !important;letter-spacing:.14em !important;margin-bottom:5px !important}
.wg-create-banner .wg-create-copy h2{display:block !important;margin:0 !important;font-family:'DM Sans',sans-serif !important;font-size:clamp(1.65rem,2.8vw,2.35rem) !important;line-height:1.14 !important;letter-spacing:-.04em !important;color:#162653 !important}
.wg-create-banner .wg-create-copy h2 span{background:linear-gradient(90deg,#7557e8,#c34aa1) !important;-webkit-background-clip:text !important;background-clip:text !important;color:transparent !important}
.wg-create-banner .wg-create-copy p{display:block !important;margin:7px 0 13px !important;color:#5f6985 !important;font-size:.9rem !important}
.wg-create-banner .wg-create-steps{display:flex !important;gap:22px !important;flex-wrap:wrap !important}
.wg-create-banner .wg-create-steps span{display:flex !important;align-items:center !important;gap:7px !important;color:#53607e !important;font-size:.7rem !important;line-height:1.2 !important}
.wg-create-banner .wg-create-steps b{width:34px !important;height:34px !important;display:grid !important;place-items:center !important;border-radius:50% !important;background:#fff !important;color:#7658e8 !important;font-size:.95rem !important;box-shadow:0 4px 13px rgba(72,55,120,.08) !important}
.wg-create-banner .wg-create-banner-btn{display:inline-flex !important;align-items:center !important;justify-content:center !important;position:relative !important;z-index:3 !important;justify-self:end !important;min-width:245px !important;min-height:60px !important;border:0 !important;border-radius:16px !important;padding:0 24px !important;color:#fff !important;font-size:.98rem !important;font-weight:750 !important;background:linear-gradient(135deg,#9569f0,#6146e0) !important;box-shadow:0 12px 26px rgba(98,70,224,.25) !important;cursor:pointer !important}
.wg-create-banner .wg-create-banner-btn span{margin-left:18px !important;font-size:1.2rem !important}
.wg-create-banner .wg-mini-card{display:grid !important;position:absolute !important;width:86px !important;height:112px !important;border-radius:11px !important;place-items:center !important;font-size:32px !important;background:#fff !important;border:5px solid rgba(255,255,255,.9) !important;box-shadow:0 11px 23px rgba(66,52,110,.15) !important}
.wg-create-banner .wg-mini-card-one{left:18px !important;top:12px !important;transform:rotate(-11deg) !important;background:linear-gradient(145deg,#ffb3ca,#e85da5) !important;color:#fff !important}
.wg-create-banner .wg-mini-card-two{left:86px !important;top:3px !important;transform:rotate(3deg) !important;background:linear-gradient(145deg,#fff3df,#ffd18c) !important}
.wg-create-banner .wg-mini-card-three{left:153px !important;top:12px !important;transform:rotate(10deg) !important;background:linear-gradient(145deg,#fff,#eadfff) !important;color:#d64f9e !important}
@media(max-width:1050px){
  .wg-create-banner{grid-template-columns:170px minmax(0,1fr) 215px !important;gap:15px !important;padding:17px 20px !important}
  .wg-create-banner .wg-create-art{transform:scale(.82) !important;transform-origin:left center !important}
  .wg-create-banner .wg-create-banner-btn{min-width:195px !important}
}
@media(max-width:760px){
  .wg-create-banner{grid-template-columns:1fr !important;min-height:auto !important;padding:20px !important;margin:10px !important;width:calc(100% - 20px) !important;gap:12px !important}
  .wg-create-banner .wg-create-art{display:none !important}
  .wg-create-banner .wg-create-banner-btn{justify-self:stretch !important;width:100% !important}
  .wg-create-banner .wg-create-steps{gap:10px 16px !important}
}


/* ============================================================
   WishGreeting — Centered Create + Hero Layout
   Final presentation override; V6 application logic preserved.
   ============================================================ */

/* Full-width background bands, centered inner content */
.wg-create-banner,
.hero-shell{
  width:min(1180px, calc(100% - 40px));
  max-width:1180px;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Create Card banner: deliberately centered and balanced */
.wg-create-banner{
  margin-top:18px !important;
  margin-bottom:14px !important;
  min-height:172px !important;
  grid-template-columns:220px minmax(0,1fr) 255px !important;
  padding:20px 26px !important;
  border-radius:22px !important;
}

/* Improve the visual card stack */
.wg-create-art{
  width:210px !important;
  height:132px !important;
}
.wg-mini-card{
  width:82px !important;
  height:108px !important;
}
.wg-mini-card-one{left:10px !important;top:13px !important}
.wg-mini-card-two{left:70px !important;top:4px !important}
.wg-mini-card-three{left:132px !important;top:13px !important}

/* Hero is centered as a complete visual block */
.hero{
  padding:0 0 16px !important;
  background:linear-gradient(120deg,#f1edff 0%,#fff2f8 50%,#eef7ff 100%) !important;
  border-bottom:1px solid #ece8f6 !important;
}
.hero-shell{
  min-height:278px !important;
  padding:30px 38px !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 76% 42%,rgba(255,255,255,.9),transparent 15rem),
    linear-gradient(110deg,rgba(255,255,255,.94),rgba(255,255,255,.5)) !important;
  box-shadow:0 18px 46px rgba(82,64,145,.09) !important;
}

/* Give hero copy more presence */
.hero-copy{
  max-width:640px !important;
}
.hero h1{
  font-size:clamp(2.35rem,4vw,3.35rem) !important;
  line-height:1.03 !important;
  letter-spacing:-.05em !important;
}
.hero p{
  max-width:610px !important;
  font-size:.94rem !important;
}
.hero-search{
  max-width:620px !important;
}

/* Replace the weak abstract hero art with a card-stack visual built in CSS */
.hero-art{
  display:block !important;
  position:absolute !important;
  right:25px !important;
  top:24px !important;
  width:410px !important;
  height:225px !important;
  pointer-events:none !important;
  opacity:1 !important;
}
.hero-art::before{
  content:"";
  position:absolute;
  width:165px;height:205px;
  right:122px;top:4px;
  border-radius:15px;
  transform:rotate(7deg);
  background:
    radial-gradient(circle at 75% 23%,#ffc7d8 0 17px,transparent 18px),
    linear-gradient(145deg,#fff4f7,#ffdfe9);
  border:7px solid rgba(255,255,255,.9);
  box-shadow:0 18px 35px rgba(78,55,108,.16);
}
.hero-art::after{
  content:"Good\A Morning";
  white-space:pre;
  position:absolute;
  right:145px;top:70px;
  width:120px;
  text-align:center;
  font-family:'Playfair Display',serif;
  font-style:italic;
  font-size:25px;
  line-height:1.05;
  color:#b14b79;
  transform:rotate(7deg);
  z-index:3;
  text-shadow:0 1px 0 #fff;
}
.hero-script{
  display:none !important;
}
.hero-sun{
  width:45px !important;height:45px !important;
  right:35px !important;top:28px !important;
  background:#ffd18b !important;
  box-shadow:0 0 0 9px rgba(255,209,139,.18) !important;
}
.hero-mountain{
  opacity:.45 !important;
}
.hero-cloud{
  opacity:.7 !important;
}

/* Keep the actual search/benefits readable above the art */
.hero-copy,
.hero-search,
.intent-chips,
.hero-benefits{
  position:relative;
  z-index:5;
}

/* Center the content rail while keeping sidebar/grid/filters structure */
.main{
  width:min(1320px, calc(100% - 40px)) !important;
  max-width:1320px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
.breadcrumb{
  width:min(1320px, calc(100% - 40px)) !important;
  max-width:1320px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Wish cards: readable but not oversized */
.cards-grid{
  gap:14px !important;
}
.card-wrapper{
  border-radius:15px !important;
}

/* Right filters stay compact and aligned */
.dashboard-aside{
  width:270px !important;
  flex-basis:270px !important;
}

/* Desktop navigation gets a little more breathing room */
.nav-inner{
  max-width:1320px !important;
}

/* Responsive */
@media (max-width:1050px){
  .wg-create-banner{
    grid-template-columns:165px minmax(0,1fr) 205px !important;
    width:min(960px,calc(100% - 28px)) !important;
  }
  .hero-art{
    width:300px !important;
    right:5px !important;
    opacity:.55 !important;
  }
  .main,.breadcrumb{
    width:calc(100% - 28px) !important;
  }
}
@media (max-width:760px){
  .wg-create-banner,
  .hero-shell{
    width:calc(100% - 20px) !important;
  }
  .wg-create-banner{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    text-align:center !important;
    padding:22px 18px !important;
  }
  .wg-create-art{
    display:none !important;
  }
  .wg-create-steps{
    justify-content:center !important;
  }
  .hero{
    padding-bottom:10px !important;
  }
  .hero-shell{
    min-height:0 !important;
    padding:25px 18px !important;
  }
  .hero-copy{
    max-width:none !important;
  }
  .hero-art{
    display:none !important;
  }
}


/* ============================================================
   WishGreeting — Complete Dark Mode Fix
   This block comes last so it overrides light-only visual layers.
   ============================================================ */
body:not(.light){
  background:#0d0e15 !important;
  color:#f3f1f8 !important;
}
body:not(.light) .navbar{
  background:rgba(16,17,25,.96) !important;
  border-bottom-color:#292a38 !important;
}
body:not(.light) .nav-logo,
body:not(.light) .nav-logo span,
body:not(.light) .nav-link,
body:not(.light) .theme-toggle{
  color:#f2f1f7 !important;
}
body:not(.light) .nav-link:hover{
  background:#252538 !important;
  color:#c9b8ff !important;
}
body:not(.light) .nav-link.active{
  background:#28233f !important;
  color:#c9b8ff !important;
}
body:not(.light) .nav-search{
  background:#1b1c27 !important;
  border-color:#343548 !important;
}
body:not(.light) .nav-search input{
  color:#eee !important;
}
body:not(.light) .theme-toggle{
  background:#242536 !important;
}

/* Create banner */
body:not(.light) .wg-create-banner{
  background:
    radial-gradient(circle at 12% 50%,rgba(173,111,158,.20),transparent 12rem),
    radial-gradient(circle at 90% 25%,rgba(112,92,210,.22),transparent 18rem),
    linear-gradient(105deg,#1b1727 0%,#202033 52%,#18212c 100%) !important;
  border-color:#353448 !important;
  box-shadow:0 15px 38px rgba(0,0,0,.30) !important;
}
body:not(.light) .wg-create-banner::after{
  background:rgba(255,255,255,.035) !important;
}
body:not(.light) .wg-create-copy h2,
body:not(.light) .wg-create-copy p{
  color:#f2f0f8 !important;
}
body:not(.light) .wg-create-copy h2 span{
  background:linear-gradient(90deg,#aa8dff,#ef7fba) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  color:transparent !important;
}
body:not(.light) .wg-create-kicker{
  color:#b9a4ff !important;
}
body:not(.light) .wg-create-steps span{
  color:#b8b5c7 !important;
}
body:not(.light) .wg-create-steps b{
  background:#29283a !important;
  color:#c6b4ff !important;
}
body:not(.light) .wg-create-banner-btn{
  background:linear-gradient(135deg,#8f6cf2,#6549df) !important;
}

/* Hero */
body:not(.light) .hero{
  background:linear-gradient(120deg,#171525 0%,#211a2a 52%,#14212b 100%) !important;
  border-bottom-color:#2b2b3a !important;
}
body:not(.light) .hero-shell{
  background:
    radial-gradient(circle at 76% 35%,rgba(117,91,220,.17),transparent 17rem),
    linear-gradient(110deg,rgba(29,27,42,.98),rgba(24,28,38,.92)) !important;
  border-color:#36364a !important;
  box-shadow:0 18px 48px rgba(0,0,0,.32) !important;
}
body:not(.light) .hero h1,
body:not(.light) .hero p{
  color:#f2f1f7 !important;
}
body:not(.light) #searchInput{
  background:#191a25 !important;
  border-color:#38394b !important;
  color:#f2f1f7 !important;
}
body:not(.light) #searchInput::placeholder{
  color:#858399 !important;
}
body:not(.light) .intent-chips a{
  background:#20202e !important;
  border-color:#38394b !important;
  color:#c2bfd0 !important;
}
body:not(.light) .intent-chips a:hover{
  background:#2a2840 !important;
  color:#d1c5ff !important;
}
body:not(.light) .hero-art::before{
  background:
    radial-gradient(circle at 75% 23%,#934f71 0 17px,transparent 18px),
    linear-gradient(145deg,#3a2632,#342338) !important;
  border-color:#555064 !important;
  box-shadow:0 18px 35px rgba(0,0,0,.35) !important;
}
body:not(.light) .hero-art::after{
  color:#e89abd !important;
  text-shadow:none !important;
}

/* Breadcrumb */
body:not(.light) .breadcrumb{
  background:transparent !important;
  color:#8e8ba0 !important;
}
body:not(.light) .breadcrumb *{
  color:inherit !important;
}
body:not(.light) .breadcrumb .current{
  color:#c9c5d5 !important;
}

/* Main */
body:not(.light) .main{
  background:transparent !important;
}
body:not(.light) .cards-heading{
  color:#f2f1f7 !important;
}
body:not(.light) .cards-subheading,
body:not(.light) .cards-meta{
  color:#858399 !important;
}
body:not(.light) .sort-wrap select{
  background:#1b1c27 !important;
  color:#d7d4e1 !important;
  border-color:#38394b !important;
}

/* Sidebar */
body:not(.light) .sidebar-inner{
  background:#151620 !important;
  border-color:#2c2d3b !important;
  box-shadow:0 10px 28px rgba(0,0,0,.24) !important;
}
body:not(.light) .all-btn,
body:not(.light) .sidebar-fav,
body:not(.light) .cat-header{
  color:#ddd9e8 !important;
}
body:not(.light) .all-btn:hover,
body:not(.light) .sidebar-fav:hover,
body:not(.light) .cat-header:hover{
  background:#242536 !important;
}
body:not(.light) .all-btn.active{
  background:#2b2550 !important;
  color:#d4c7ff !important;
}
body:not(.light) .sidebar-section-title{
  color:#77748a !important;
}
body:not(.light) .subcat-btn{
  color:#aaa7b8 !important;
}
body:not(.light) .subcat-btn:hover,
body:not(.light) .subcat-btn.active{
  background:#252438 !important;
  color:#c9b8ff !important;
}

/* Filter / tool cards */
body:not(.light) .tool-card{
  background:#151620 !important;
  border-color:#2c2d3b !important;
  box-shadow:0 10px 28px rgba(0,0,0,.24) !important;
}
body:not(.light) .tool-card h2,
body:not(.light) .filter-title{
  color:#f0eef6 !important;
}
body:not(.light) .clear-filters{
  color:#b9a5ff !important;
}
body:not(.light) .filter-label,
body:not(.light) .tool-label{
  color:#d0ccd9 !important;
}
body:not(.light) .filter-chip{
  background:#20212d !important;
  border-color:#393a4b !important;
  color:#bdb9c9 !important;
}
body:not(.light) .filter-chip.active{
  background:#6246f5 !important;
  border-color:#6246f5 !important;
  color:#fff !important;
}
body:not(.light) .filter-chip:hover{
  background:#29283c !important;
  color:#d2c6ff !important;
}
body:not(.light) .mobile-filter-toggle{
  background:#1b1c27 !important;
  color:#ddd9e8 !important;
  border-color:#38394b !important;
}

/* Cards */
body:not(.light) .card-wrapper{
  background:#171821 !important;
  border-color:#303140 !important;
  box-shadow:0 6px 20px rgba(0,0,0,.26) !important;
}
body:not(.light) .card-wrapper:hover{
  border-color:#4b4273 !important;
  box-shadow:0 15px 34px rgba(0,0,0,.35) !important;
}
body:not(.light) .card-footer{
  background:#171821 !important;
  border-top-color:#303140 !important;
}
body:not(.light) .card-label{
  color:#9692a6 !important;
}
body:not(.light) .btn-action{
  background:#20212d !important;
  border-color:#393a4b !important;
  color:#c9c5d5 !important;
}
body:not(.light) .btn-action:hover{
  background:#2b2940 !important;
  border-color:#554a89 !important;
  color:#ddd2ff !important;
}
body:not(.light) .favorite-btn:hover{
  background:#29283a !important;
}

/* Related */
body:not(.light) .related-section{
  border-top-color:#2b2c39 !important;
}
body:not(.light) .related-title{
  color:#f0eef6 !important;
}
body:not(.light) .related-card,
body:not(.light) .related-section a{
  background:#171821 !important;
  border-color:#303140 !important;
  color:#c8c4d4 !important;
}

/* Footer */
body:not(.light) footer{
  background:#111219 !important;
  border-top-color:#2a2b37 !important;
}
body:not(.light) .footer-brand h3,
body:not(.light) .footer-col h4{
  color:#eeeaf5 !important;
}
body:not(.light) .footer-brand p,
body:not(.light) .footer-col a,
body:not(.light) .footer-bottom{
  color:#858296 !important;
}
body:not(.light) .footer-col a:hover{
  color:#c8b9ff !important;
}

/* Modal and form surfaces */
body:not(.light) .modal,
body:not(.light) .modal-content,
body:not(.light) .create-modal,
body:not(.light) .card-creator,
body:not(.light) .creator-panel{
  background:#151620 !important;
  color:#f0eef6 !important;
  border-color:#343548 !important;
}
body:not(.light) input,
body:not(.light) textarea,
body:not(.light) select{
  background:#1b1c27 !important;
  color:#eeeaf5 !important;
  border-color:#38394b !important;
}
body:not(.light) input::placeholder,
body:not(.light) textarea::placeholder{
  color:#77758a !important;
}

/* Mobile drawer */
body:not(.light) .tools-backdrop{
  background:rgba(0,0,0,.62) !important;
}

/* Prevent accidental light backgrounds from common containers */
body:not(.light) .section,
body:not(.light) .content-section{
  background:transparent !important;
}


/* ============================================================
   WishGreeting Creator V2
   Attractive, original design inspired by the approved concept.
   ============================================================ */
.modal-overlay{
  background:rgba(11,13,28,.72)!important;
  backdrop-filter:blur(9px)!important;
  -webkit-backdrop-filter:blur(9px)!important;
  padding:22px!important;
}
.wg-creator-modal{
  width:min(1180px,96vw);
  max-height:94vh;
  overflow:hidden;
  border-radius:26px;
  background:linear-gradient(135deg,#fff 0%,#fbf9ff 55%,#f5f3ff 100%);
  border:1px solid rgba(117,88,225,.16);
  box-shadow:0 30px 90px rgba(21,17,54,.30);
  color:#172653;
  display:flex;
  flex-direction:column;
}
.wg-creator-head{
  padding:25px 30px 21px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  border-bottom:1px solid #ebe8f5;
  background:linear-gradient(100deg,rgba(255,255,255,.96),rgba(246,241,255,.88));
}
.wg-creator-kicker{
  color:#7657e5;
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.14em;
  margin-bottom:5px;
}
.wg-creator-head h2{
  margin:0;
  font-family:'DM Sans',sans-serif;
  font-size:2rem;
  letter-spacing:-.045em;
}
.wg-creator-head h2 span{
  background:linear-gradient(90deg,#7456e7,#c64ca5);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.wg-creator-head p{margin:6px 0 0;color:#6b7590;font-size:.82rem}
.wg-creator-close{
  width:42px;height:42px;border-radius:50%;border:1px solid #e4e1ed;
  background:#fff;color:#66708b;font-size:1.65rem;line-height:1;
  cursor:pointer;
}
.wg-creator-body{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(410px,.78fr);
  min-height:0;
  overflow:auto;
}
.wg-creator-form{
  padding:22px 28px 28px;
  border-right:1px solid #ebe8f3;
}
.wg-step{margin-bottom:17px}
.wg-step-head{
  display:flex;align-items:center;gap:10px;margin-bottom:8px
}
.wg-step-head strong{display:block;font-size:.88rem;color:#263560}
.wg-step-head small{display:block;margin-top:2px;color:#8991a8;font-size:.64rem}
.wg-step-no{
  width:29px;height:29px;border-radius:10px;display:grid;place-items:center;
  background:#efeaff;color:#7457e6;font-weight:800;font-size:.72rem;
}
.wg-field{
  width:100%;box-sizing:border-box;
  border:1px solid #e0dcf0!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#354064!important;
  padding:12px 14px!important;
  font-size:.79rem!important;
  box-shadow:0 3px 12px rgba(62,49,108,.035);
}
.wg-field:focus{
  border-color:#967df0!important;
  box-shadow:0 0 0 4px rgba(116,87,232,.09)!important;
}
.wg-message{min-height:105px;resize:vertical;line-height:1.45}
.wg-counter{display:flex;justify-content:space-between;color:#9aa1b5;font-size:.62rem;margin-top:5px}
.wg-counter span:first-child{color:#7d67ce}
.wg-design-grid{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;
}
.wg-design{
  border:1px solid #e3dfed;background:#fff;border-radius:12px;padding:5px 5px 7px;
  color:#495271;cursor:pointer;min-width:0;
}
.wg-design:hover{border-color:#aa96f5;transform:translateY(-1px)}
.wg-design.active{
  border:2px solid #805ff0;padding:4px 4px 6px;
  box-shadow:0 6px 16px rgba(112,84,224,.14);
}
.wg-design b{display:block;font-size:.62rem;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wg-design-art{
  display:block;width:100%;aspect-ratio:1.35;border-radius:8px;
  position:relative;overflow:hidden;
}
.wg-design-art::after{content:"";position:absolute;inset:auto 8% 12% 8%;height:18%;border-radius:50%;background:rgba(255,255,255,.2)}
.aurora{background:linear-gradient(145deg,#6c59e8,#e9a7f0)}
.sunrise{background:linear-gradient(145deg,#ffb34e,#f16b85)}
.floral{background:radial-gradient(circle at 25% 35%,#fff 0 7%,transparent 8%),radial-gradient(circle at 60% 55%,#f7a5c4 0 8%,transparent 9%),linear-gradient(145deg,#ffe6ef,#f2a9c8)}
.coffee{background:radial-gradient(circle at 50% 55%,#fff1dc 0 13%,#7b492d 14% 23%,transparent 24%),linear-gradient(145deg,#e8bd8c,#8a5936)}
.romantic{background:radial-gradient(circle at 35% 45%,#ff9dbb 0 12%,transparent 13%),radial-gradient(circle at 65% 55%,#fff 0 12%,transparent 13%),linear-gradient(145deg,#ffcadb,#e84872)}
.festive{background:radial-gradient(circle at 25% 35%,#ffd56a 0 5%,transparent 6%),radial-gradient(circle at 65% 55%,#ff9c4c 0 5%,transparent 6%),linear-gradient(145deg,#3d2b9d,#ff824f)}
.minimal{background:linear-gradient(145deg,#edf3f8,#cbd6e5)}
.birthday{background:radial-gradient(circle at 50% 55%,#ffd66d 0 8%,transparent 9%),linear-gradient(145deg,#ffc7dc,#ffeecf)}
.nature{background:radial-gradient(ellipse at 40% 60%,#74c98c 0 12%,transparent 13%),linear-gradient(145deg,#d9f2c4,#76c98f)}
.elegant{background:linear-gradient(145deg,#e9d4b0,#a36c3e)}
.kids{background:linear-gradient(145deg,#69dff1,#9b80f3)}
.seasonal{background:radial-gradient(circle at 35% 45%,#fff 0 7%,transparent 8%),linear-gradient(145deg,#243f9d,#7b9de9)}

.wg-creator-preview{
  padding:23px 25px 25px;
  background:linear-gradient(145deg,#f7f3ff 0%,#fff7fb 55%,#f1f7ff 100%);
  position:relative;
}
.wg-preview-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:11px}
.wg-preview-kicker{display:block;font-weight:800;font-size:.75rem;color:#48557b}
.wg-preview-head strong{display:block;color:#8b93a9;font-size:.62rem;font-weight:500;margin-top:2px}
.wg-preview-expand{
  border:1px solid #ddd8ec;background:#fff;border-radius:999px;padding:7px 11px;
  color:#59627e;font-size:.64rem;
}
.wg-preview-stage{
  min-height:350px;border-radius:20px;padding:18px;position:relative;display:grid;place-items:center;
  overflow:hidden;background:
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.45),transparent 8rem),
    linear-gradient(145deg,#7664e8,#c7a1f4 48%,#f4c6dd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 15px 35px rgba(77,56,141,.16);
}
.wg-preview-card-wrap{width:min(88%,410px);position:relative;z-index:2}
.wg-preview-card-wrap .modal-card{
  width:100%!important;aspect-ratio:1.5!important;min-height:260px!important;
  border-radius:18px!important;box-shadow:0 20px 38px rgba(35,28,78,.24)!important;
}
.wg-preview-card-wrap .modal-card .card-title{font-size:clamp(1.3rem,2.4vw,2rem)!important}
.wg-preview-card-wrap .modal-card .card-msg{font-size:.75rem!important;max-width:80%}
.wg-preview-card-wrap .site-tag{font-size:.48rem!important}
.wg-preview-spark{position:absolute;color:#fff;font-size:1.7rem;opacity:.8;z-index:1}
.s1{left:7%;top:14%}.s2{right:10%;bottom:18%}
.wg-preview-name{display:flex;justify-content:center;align-items:center;gap:18px;margin:13px 0}
.wg-preview-name button{
  width:38px;height:38px;border:0;border-radius:50%;background:#fff;color:#777e9a;font-size:1.7rem;
  box-shadow:0 5px 14px rgba(65,50,110,.09)
}
.wg-preview-name div{text-align:center}.wg-preview-name strong{display:block;font-size:.92rem;color:#344064}
.wg-preview-name span{display:block;color:#8b92a8;font-size:.61rem;margin-top:2px}
.wg-preview-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}
.wg-preview-actions button{
  border:1px solid #e2deec;background:#fff;border-radius:12px;padding:10px 5px;color:#394568;font-size:.62rem;
}
.wg-preview-actions span{display:block;font-size:1.1rem;color:#7556e6;margin-bottom:3px}
.wg-preview-actions button:hover{border-color:#ae9af6;background:#faf8ff}
.wg-create-final{
  width:100%;min-height:51px;border:0;border-radius:13px;color:#fff;font-size:.9rem;font-weight:800;
  background:linear-gradient(100deg,#9565ef,#6244df);
  box-shadow:0 11px 24px rgba(100,70,222,.23);
}
.wg-create-final b{float:right;margin-right:10px;font-size:1.05rem}
.wg-preview-note{text-align:center;color:#8a91a8;font-size:.61rem;margin:8px 0 0}
.wg-full-preview{transform:scale(1.08);transition:transform .2s ease}

body:not(.light) .wg-creator-modal{
  background:linear-gradient(135deg,#171a29,#1b1d31 55%,#20213a);color:#eef1ff;border-color:#343754;
}
body:not(.light) .wg-creator-head{background:linear-gradient(100deg,#171a29,#22233b);border-color:#343754}
body:not(.light) .wg-creator-head h2{color:#f3f4ff}
body:not(.light) .wg-creator-head p,.body:not(.light) .wg-step-head small{color:#9ba3be}
body:not(.light) .wg-creator-form{border-color:#343754}
body:not(.light) .wg-step-head strong{color:#edf0ff}
body:not(.light) .wg-step-no{background:#292347;color:#bcaeff}
body:not(.light) .wg-field{background:#202337!important;color:#edf0ff!important;border-color:#383c5a!important}
body:not(.light) .wg-field::placeholder{color:#7e87a5}
body:not(.light) .wg-design{background:#202337;color:#dfe3f4;border-color:#383c5a}
body:not(.light) .wg-creator-preview{background:linear-gradient(145deg,#20213a,#292238,#182438)}
body:not(.light) .wg-preview-head strong,.body:not(.light) .wg-counter{color:#9ca4bc}
body:not(.light) .wg-preview-name strong{color:#eef1ff}
body:not(.light) .wg-preview-name span{color:#9ba3bb}
body:not(.light) .wg-preview-name button,.body:not(.light) .wg-preview-actions button,.body:not(.light) .wg-preview-expand{
  background:#25283d;color:#e4e8f8;border-color:#3b3f5b
}
body:not(.light) .wg-creator-close{background:#24273b;color:#e7e9f5;border-color:#3a3e5a}

@media(max-width:900px){
  .wg-creator-body{grid-template-columns:1fr}
  .wg-creator-form{border-right:0;border-bottom:1px solid #ebe8f3}
  .wg-creator-preview{order:-1}
  .wg-preview-stage{min-height:290px}
}
@media(max-width:600px){
  .modal-overlay{padding:8px!important}
  .wg-creator-modal{max-height:97vh;border-radius:18px}
  .wg-creator-head{padding:18px}
  .wg-creator-head h2{font-size:1.45rem}
  .wg-creator-body{overflow:auto}
  .wg-creator-form{padding:17px}
  .wg-creator-preview{padding:17px}
  .wg-design-grid{grid-template-columns:repeat(4,1fr)}
  .wg-preview-stage{min-height:250px;padding:12px}
  .wg-preview-card-wrap .modal-card{min-height:190px!important}
  .wg-preview-actions{gap:6px}
}


/* Creator 12-design preview set: each design gets a distinct full-card treatment. */
.tpl-sunrise{
  background:
    radial-gradient(circle at 72% 20%,rgba(255,248,196,.95) 0 7%,transparent 8%),
    linear-gradient(180deg,#ffb45e 0%,#ff7d73 42%,#c85e9d 68%,#53499d 100%);
}
.tpl-sunrise::before{content:'';position:absolute;left:-8%;right:-8%;bottom:-10%;height:42%;background:linear-gradient(160deg,transparent 30%,rgba(79,63,126,.65) 31% 46%,rgba(43,46,91,.9) 47% 100%);clip-path:polygon(0 65%,18% 38%,32% 58%,50% 18%,67% 55%,82% 30%,100% 62%,100% 100%,0 100%)}
.tpl-sunrise .card-title{color:#fff8e7;text-shadow:0 2px 14px rgba(76,35,66,.55)}.tpl-sunrise .card-msg{color:#ffe9d5}
.tpl-floral{
  background:
    radial-gradient(circle at 17% 22%,#fff 0 4%,#f59bbd 5% 8%,transparent 9%),
    radial-gradient(circle at 83% 27%,#fff 0 4%,#ef86ad 5% 8%,transparent 9%),
    radial-gradient(circle at 24% 78%,#fff 0 4%,#f3a5c7 5% 8%,transparent 9%),
    radial-gradient(circle at 78% 76%,#fff 0 4%,#f08caf 5% 8%,transparent 9%),
    linear-gradient(145deg,#fff4f8,#f8d7e8 48%,#c7e9df 100%);
}
.tpl-floral::before{content:'❀  ❁  ✿  ❀';position:absolute;inset:auto 0 7%;text-align:center;color:rgba(93,145,122,.5);font-size:1.5rem;letter-spacing:9px}
.tpl-floral .card-title{color:#9d3970;text-shadow:0 1px 0 #fff}.tpl-floral .card-msg{color:#70435c}
.tpl-coffee{
  background:
    radial-gradient(ellipse at 50% 65%,#fff8ee 0 11%,#9a6038 12% 18%,transparent 19%),
    radial-gradient(ellipse at 50% 66%,#d7a06e 0 25%,transparent 26%),
    linear-gradient(145deg,#f3d0a5,#c38a55 48%,#70452e 100%);
}
.tpl-coffee::before{content:'☕';position:absolute;right:9%;bottom:9%;font-size:2.2rem;opacity:.18;filter:grayscale(1)}
.tpl-coffee .card-title{color:#fff4df;text-shadow:0 2px 10px rgba(70,38,20,.55)}.tpl-coffee .card-msg{color:#ffe8c8}
.tpl-romantic{
  background:
    radial-gradient(circle at 22% 30%,rgba(255,255,255,.8) 0 5%,transparent 6%),
    radial-gradient(circle at 78% 34%,rgba(255,255,255,.65) 0 4%,transparent 5%),
    linear-gradient(145deg,#8f244f,#e65079 48%,#f7a4bb 100%);
}
.tpl-romantic::before{content:'♥  ♡  ♥  ♡  ♥';position:absolute;inset:8% 0 auto;text-align:center;color:rgba(255,255,255,.18);font-size:1.5rem;letter-spacing:9px}
.tpl-romantic .card-title{color:#fff7fb;text-shadow:0 2px 14px rgba(107,20,55,.4)}.tpl-romantic .card-msg{color:#ffe6ef}
.tpl-festive{
  background:
    radial-gradient(circle at 18% 22%,#ffd86a 0 4%,transparent 5%),
    radial-gradient(circle at 38% 34%,#ff8a72 0 4%,transparent 5%),
    radial-gradient(circle at 62% 24%,#8ce7ff 0 4%,transparent 5%),
    radial-gradient(circle at 82% 38%,#ffd86a 0 4%,transparent 5%),
    linear-gradient(145deg,#31217c,#5c2d9e 45%,#ed6a68 100%);
}
.tpl-festive::before{content:'✦   ✧   ✦   ✧   ✦';position:absolute;top:9%;left:0;right:0;text-align:center;color:rgba(255,255,255,.6);font-size:1rem;letter-spacing:8px}
.tpl-festive .card-title{color:#fff2b8;text-shadow:0 0 16px rgba(255,214,100,.4)}.tpl-festive .card-msg{color:#fce9e0}
.tpl-nature{
  background:
    radial-gradient(ellipse at 24% 74%,#55a96f 0 9%,transparent 10%),
    radial-gradient(ellipse at 75% 70%,#75bd7d 0 10%,transparent 11%),
    linear-gradient(160deg,#dff3d0 0%,#a7dca8 52%,#3f8c67 100%);
}
.tpl-nature::before{content:'⌁  ♧  ❧  ♧  ⌁';position:absolute;bottom:7%;left:0;right:0;text-align:center;color:rgba(24,91,65,.38);font-size:1.6rem;letter-spacing:7px}
.tpl-nature .card-title{color:#205b47;text-shadow:0 1px 0 rgba(255,255,255,.65)}.tpl-nature .card-msg{color:#315f4f}
.tpl-elegant{
  background:
    radial-gradient(circle at 50% 50%,rgba(255,246,215,.42) 0 10%,transparent 11%),
    linear-gradient(145deg,#2b2130,#604653 52%,#b78a55 100%);
}
.tpl-elegant::before{content:'◇';position:absolute;top:8%;left:0;right:0;text-align:center;color:#ead3a5;font-size:1.7rem}
.tpl-elegant .card-title{color:#f7e4bb;font-family:Georgia,serif;text-shadow:0 1px 8px rgba(0,0,0,.35)}.tpl-elegant .card-msg{color:#e8d6c2}
.tpl-kids{
  background:
    radial-gradient(circle at 20% 24%,#ffef67 0 7%,transparent 8%),
    radial-gradient(circle at 78% 26%,#ff9bc6 0 7%,transparent 8%),
    radial-gradient(circle at 24% 74%,#8be7ff 0 8%,transparent 9%),
    radial-gradient(circle at 78% 72%,#a5f18a 0 8%,transparent 9%),
    linear-gradient(145deg,#4ccfe6,#7e72ea 52%,#f08ac5 100%);
}
.tpl-kids::before{content:'★   ●   ♥   ★';position:absolute;top:9%;left:0;right:0;text-align:center;color:rgba(255,255,255,.75);font-size:1.1rem;letter-spacing:8px}
.tpl-kids .card-title{color:#fffde5;text-shadow:0 2px 10px rgba(57,38,130,.35)}.tpl-kids .card-msg{color:#f2fbff}

/* ============================================================
   Creator V3 — polished UX layer
   ============================================================ */
.wg-creator-modal{max-height:95vh}
.wg-creator-head{padding:28px 34px 22px}
.wg-creator-head h2{font-size:2.15rem}
.wg-creator-head::after{content:'✦';color:#b85bd8;font-size:1.2rem;margin-left:auto;position:absolute;right:78px;top:34px;opacity:.55}
.wg-creator-head{position:relative}
.wg-creator-body{grid-template-columns:minmax(0,1fr) minmax(470px,.86fr)}
.wg-creator-form{padding:24px 30px 30px}
.wg-step{margin-bottom:19px}
.wg-step-head{gap:12px}
.wg-step-no{width:31px;height:31px;border-radius:11px;box-shadow:0 3px 10px rgba(112,83,224,.08)}
.wg-step-head strong{font-size:.92rem}
.wg-step-head small{font-size:.67rem}
.wg-field{min-height:46px;padding:13px 15px!important;border-radius:14px!important}
.wg-message{min-height:118px}
.wg-design-grid{gap:10px}
.wg-design{padding:6px 6px 8px;border-radius:14px;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.wg-design-art{aspect-ratio:1.28;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.wg-design b{font-size:.65rem;margin-top:6px}
.wg-design.active{box-shadow:0 7px 18px rgba(112,84,224,.18),0 0 0 2px rgba(128,95,240,.08)}
.wg-design.active .wg-design-art::before{content:'✓';position:absolute;right:5px;top:5px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#7654e7;font-size:.68rem;font-weight:900;z-index:4;box-shadow:0 3px 8px rgba(40,30,80,.16)}
.wg-design-art::after{height:25%;bottom:8%;opacity:.6}
/* richer miniature artwork */
.aurora{background:radial-gradient(circle at 72% 24%,#ffd9ef 0 8%,transparent 9%),linear-gradient(155deg,#4b46d8 0%,#9b64ef 42%,#f4a8d7 72%,#ffd59a 100%)}
.sunrise{background:radial-gradient(circle at 50% 58%,#ffeab0 0 15%,transparent 16%),linear-gradient(165deg,#ffbf69,#ff806b 55%,#6b66d9)}
.floral{background:radial-gradient(circle at 27% 36%,#fff 0 7%,#ef8db8 8% 12%,transparent 13%),radial-gradient(circle at 68% 52%,#fff 0 6%,#f3a6c5 7% 12%,transparent 13%),linear-gradient(145deg,#fff1f6,#eab4d1 58%,#a5d9cf)}
.coffee{background:radial-gradient(ellipse at 50% 60%,#fff8ec 0 12%,#7c4b2d 13% 20%,transparent 21%),radial-gradient(circle at 50% 55%,#d9a16b 0 28%,transparent 29%),linear-gradient(145deg,#f1c999,#9a6039)}
.romantic{background:radial-gradient(circle at 30% 40%,#ff789e 0 12%,transparent 13%),radial-gradient(circle at 67% 56%,#fff 0 10%,transparent 11%),linear-gradient(145deg,#ffd0df,#f56f9a 60%,#b92f62)}
.festive{background:radial-gradient(circle at 24% 28%,#ffd45f 0 5%,transparent 6%),radial-gradient(circle at 67% 43%,#ff8b62 0 6%,transparent 7%),linear-gradient(145deg,#4432a7,#ff735d 65%,#ffbc5b)}
.minimal{background:linear-gradient(145deg,#fff,#e6edf5 52%,#b9c9de)}
.birthday{background:radial-gradient(circle at 50% 56%,#ffd56a 0 8%,transparent 9%),linear-gradient(145deg,#ffb9d1,#fff0d2 58%,#b9d9ff)}
.nature{background:radial-gradient(ellipse at 35% 60%,#64bd7b 0 14%,transparent 15%),radial-gradient(ellipse at 65% 45%,#8edb9d 0 12%,transparent 13%),linear-gradient(145deg,#e5f6d3,#73c98a)}
.elegant{background:radial-gradient(circle at 50% 52%,#fff2d0 0 10%,transparent 11%),linear-gradient(145deg,#f1d7ad,#b77947 62%,#74472d)}
.kids{background:radial-gradient(circle at 25% 35%,#ffef6e 0 7%,transparent 8%),radial-gradient(circle at 72% 55%,#ff9dc8 0 8%,transparent 9%),linear-gradient(145deg,#68d9ee,#8b78ed)}
.seasonal{background:radial-gradient(circle at 28% 35%,#fff 0 5%,transparent 6%),radial-gradient(circle at 72% 30%,#bfe4ff 0 6%,transparent 7%),linear-gradient(145deg,#294a9d,#7899dc 62%,#d8e7ff)}

.wg-creator-preview{padding:25px 28px 28px}
.wg-preview-head{margin-bottom:13px}
.wg-preview-kicker{font-size:.78rem;letter-spacing:.02em}
.wg-preview-stage{min-height:390px;border-radius:22px}
.wg-preview-card-wrap{width:min(90%,430px)}
.wg-preview-card-wrap .modal-card{min-height:285px!important;border-radius:20px!important}
.wg-preview-card-wrap .modal-card .card-title{font-size:clamp(1.45rem,2.5vw,2.15rem)!important}
.wg-preview-card-wrap .modal-card .card-msg{font-size:.8rem!important;line-height:1.5;max-width:78%}
.wg-preview-name{margin:15px 0}
.wg-preview-name button{width:42px;height:42px}
.wg-preview-actions button{min-height:68px;font-size:.66rem;transition:transform .18s ease,background .18s ease,border-color .18s ease}
.wg-preview-actions button:hover{transform:translateY(-2px)}
.wg-preview-actions button.saved{border-color:#d9c8ff;background:#faf7ff;color:#6547c9}
.wg-create-final{min-height:56px;font-size:.96rem;transition:transform .18s ease,box-shadow .18s ease}
.wg-create-final:hover{transform:translateY(-1px);box-shadow:0 15px 30px rgba(100,70,222,.28)}
.wg-create-final.is-ready{background:linear-gradient(100deg,#7b5de6,#9d55d4)}
.wg-required{animation:wgShake .25s linear 0s 2;border-color:#e65b86!important;box-shadow:0 0 0 4px rgba(230,91,134,.10)!important}
@keyframes wgShake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

body:not(.light) .wg-design.active .wg-design-art::before{background:#fff;color:#6348d1}
body:not(.light) .wg-design.active{box-shadow:0 7px 20px rgba(0,0,0,.28),0 0 0 2px rgba(154,125,255,.14)}
body:not(.light) .wg-preview-actions button.saved{background:#2a2540;border-color:#5d4a91;color:#d5c8ff}
body:not(.light) .wg-required{border-color:#e56b8e!important}

@media(max-width:900px){
  .wg-creator-body{grid-template-columns:1fr}
  .wg-creator-preview{order:-1}
  .wg-preview-stage{min-height:320px}
}
@media(max-width:600px){
  .wg-creator-head{padding:20px 18px 17px}
  .wg-creator-head h2{font-size:1.6rem}
  .wg-creator-head::after{display:none}
  .wg-creator-form{padding:18px}
  .wg-creator-preview{padding:18px}
  .wg-preview-stage{min-height:260px}
  .wg-preview-card-wrap .modal-card{min-height:205px!important}
  .wg-preview-actions button{min-height:58px}
}

/* ============================================================
   Hero V4 — Greeting-card visual system
   ============================================================ */
.hero-shell{
  grid-template-columns:minmax(0,1fr) minmax(360px,.78fr) !important;
  min-height:280px !important;
  padding:30px 38px !important;
}
.hero-copy{max-width:680px !important}
.hero-art{
  min-height:245px !important;
  height:245px !important;
  position:relative !important;
  overflow:visible !important;
  display:block !important;
}
.hero-art:after{display:none !important}
.hero-card{
  position:absolute;
  overflow:hidden;
  border:7px solid rgba(255,255,255,.94);
  border-radius:18px;
  box-shadow:0 22px 42px rgba(57,42,104,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:'Playfair Display',serif;
}
.hero-card-back{
  width:142px;height:188px;
  right:232px;top:32px;
  transform:rotate(-12deg);
  background:linear-gradient(145deg,#fff2f8,#ffd0e2 62%,#eeb0d2);
  color:#a03c78;
  z-index:1;
}
.hero-card-main{
  width:174px;height:218px;
  right:100px;top:8px;
  transform:rotate(3deg);
  background:linear-gradient(155deg,#7f61eb 0%,#b47bef 42%,#f2a9d7 100%);
  color:#fff;
  z-index:3;
}
.hero-card-front{
  width:142px;height:188px;
  right:2px;top:34px;
  transform:rotate(12deg);
  background:linear-gradient(145deg,#fff8ed,#ffe3a7 55%,#ffc5dc);
  color:#9b3d7b;
  z-index:4;
}
.hero-card-spark{
  position:absolute;left:20px;top:16px;
  font-family:inherit;font-size:22px;color:#fff;
}
.hero-card-badge{
  position:absolute;top:48px;left:18px;right:18px;
  font-family:'DM Sans',sans-serif;
  font-size:8px;font-weight:800;letter-spacing:.12em;
  opacity:.9;
}
.hero-card-main .hero-card-title{
  margin-top:-12px;
  font-size:23px;line-height:1.02;
  text-shadow:0 2px 12px rgba(53,26,100,.15);
}
.hero-card-sun{
  position:absolute;width:45px;height:45px;border-radius:50%;
  bottom:34px;left:50%;transform:translateX(-50%);
  background:#ffd486;
  box-shadow:0 0 0 8px rgba(255,212,134,.18);
}
.hero-card-hills{
  position:absolute;left:-10%;right:-10%;bottom:-16px;height:74px;
  background:linear-gradient(160deg,rgba(83,56,147,.6),rgba(50,43,107,.92));
  clip-path:polygon(0 100%,0 70%,25% 37%,42% 65%,59% 22%,74% 55%,100% 30%,100% 100%);
}
.hero-card-word{
  font-size:22px;line-height:1.02;
  transform:rotate(-1deg);
}
.hero-card-flower{
  position:absolute;top:18px;right:17px;
  font-family:Arial,sans-serif;font-size:23px;
  color:#df5c9d;
}
.front-title{
  font-size:24px;line-height:.98;
  transform:rotate(-1deg);
}
.flower-a{top:13px;left:15px;right:auto;color:#e66b91}
.flower-b{bottom:13px;right:16px;top:auto;color:#d68cc0;font-size:19px}
.hero-card-heart{
  position:absolute;bottom:16px;left:50%;
  transform:translateX(-50%);
  color:#e45c9b;font-family:Arial,sans-serif;font-size:23px;
}
@media(max-width:1100px){
  .hero-shell{grid-template-columns:1fr !important}
  .hero-art{
    position:absolute !important;right:18px;top:20px;
    width:42%;opacity:.58;
  }
  .hero-copy{position:relative;z-index:5;max-width:72% !important}
}
@media(max-width:720px){
  .hero-shell{display:block !important;min-height:0 !important}
  .hero-copy{max-width:none !important}
  .hero-art{display:none !important}
}
/* Dark theme: keep the cards luminous */
body.dark .hero-card{
  border-color:rgba(255,255,255,.18);
  box-shadow:0 24px 46px rgba(0,0,0,.42);
}


/* ============================================================
   WishGreeting V5 — Wish Card Visual Polish
   Presentation-only pass. Existing card/data/action logic stays.
   ============================================================ */

.cards-grid{
  align-items:stretch;
  gap:16px !important;
}

.card-wrapper{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  border-radius:16px !important;
  overflow:hidden;
  background:var(--bg3);
  border:1px solid color-mix(in srgb, var(--border2) 88%, transparent);
  box-shadow:0 5px 18px rgba(53,43,98,.055);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.card-wrapper:hover,
.card-wrapper:focus-visible{
  transform:translateY(-5px) !important;
  border-color:rgba(111,82,226,.32) !important;
  box-shadow:0 14px 30px rgba(67,52,126,.13) !important;
}

/* Greeting artwork */
.greeting-card{
  aspect-ratio:4/3 !important;
  min-height:0;
  padding:1.35rem 1rem 1.15rem !important;
  border-radius:0 !important;
  isolation:isolate;
}

.greeting-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 18%,rgba(255,255,255,.16),transparent 25%),
    radial-gradient(circle at 84% 78%,rgba(255,255,255,.11),transparent 30%);
  pointer-events:none;
  z-index:0;
}

.greeting-card::after{
  content:"";
  position:absolute;
  left:-15%;
  right:-15%;
  bottom:-44%;
  height:62%;
  border-radius:50%;
  background:rgba(255,255,255,.055);
  pointer-events:none;
  z-index:0;
}

.card-content{
  width:100%;
  max-width:235px;
  position:relative;
  z-index:2;
}

.card-icon{
  font-size:1.65rem !important;
  margin-bottom:.55rem !important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.16));
}

.card-title{
  font-size:clamp(1rem,1.7vw,1.22rem) !important;
  line-height:1.12 !important;
  letter-spacing:-.018em;
  margin-bottom:.48rem !important;
  text-shadow:0 1px 8px rgba(0,0,0,.08);
}

.card-msg{
  max-width:215px !important;
  font-size:.73rem !important;
  line-height:1.48 !important;
  font-weight:400 !important;
  opacity:.94 !important;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  overflow:hidden;
}

.site-tag{
  bottom:7px !important;
  right:10px !important;
  font-size:.48rem !important;
  letter-spacing:.01em;
  opacity:.8;
}

/* Favorite control */
.favorite-btn{
  top:9px !important;
  right:9px !important;
  width:31px !important;
  height:31px !important;
  background:rgba(255,255,255,.14) !important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  border:1px solid rgba(255,255,255,.18) !important;
  color:rgba(255,255,255,.86) !important;
  box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.favorite-btn:hover{
  background:rgba(255,255,255,.26) !important;
  transform:scale(1.08) !important;
}

.favorite-btn.is-favorite{
  color:#ff4777 !important;
  background:rgba(255,255,255,.92) !important;
  border-color:rgba(255,255,255,.9) !important;
}

/* Footer becomes a clean action bar */
.card-footer{
  min-height:49px;
  padding:.48rem .55rem !important;
  gap:7px;
  background:var(--bg3);
  border-top:1px solid var(--border2);
}

.card-label{
  min-width:0;
  max-width:78px !important;
  padding-left:3px;
  font-size:.58rem !important;
  letter-spacing:.06em !important;
  color:var(--card-label);
}

.card-actions{
  gap:5px !important;
  margin-left:auto;
}

.card-actions .btn-action{
  min-height:29px;
  padding:0 8px !important;
  border-radius:8px !important;
  font-size:.61rem !important;
  font-weight:600;
  white-space:nowrap;
}

.card-actions .btn-action:hover{
  transform:translateY(-1px);
}

.card-actions .btn-share{
  color:var(--accent);
  border-color:rgba(108,85,226,.22);
}

/* Different action emphasis without changing behavior */
.card-actions .btn-action:first-child{
  background:rgba(111,82,226,.045);
}

.card-actions .btn-action:last-child{
  background:rgba(111,82,226,.035);
}

/* Individual template depth */
.greeting-card.tpl-default,
.greeting-card.tpl-morning,
.greeting-card.tpl-night,
.greeting-card.tpl-birthday,
.greeting-card.tpl-anniversary,
.greeting-card.tpl-thankyou,
.greeting-card.tpl-congrats,
.greeting-card.tpl-friendship{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

/* Make the card surface feel alive without heavy animation */
.card-wrapper:hover .card-icon{
  transform:translateY(-2px);
  transition:transform .2s ease;
}

.card-wrapper:focus-visible{
  outline:3px solid rgba(111,82,226,.2);
  outline-offset:2px;
}

/* Dark mode */
body:not(.light) .card-wrapper{
  background:var(--bg3);
  border-color:rgba(255,255,255,.075);
  box-shadow:0 8px 22px rgba(0,0,0,.2);
}

body:not(.light) .card-wrapper:hover{
  border-color:rgba(161,137,255,.4) !important;
  box-shadow:0 15px 32px rgba(0,0,0,.34) !important;
}

body:not(.light) .card-footer{
  background:var(--bg3);
  border-top-color:rgba(255,255,255,.08);
}

body:not(.light) .card-actions .btn-action{
  background:rgba(255,255,255,.025);
  border-color:rgba(255,255,255,.10);
}

body:not(.light) .card-actions .btn-share{
  color:#b9a6ff;
}

/* Tablet */
@media(max-width:1050px){
  .cards-grid{gap:13px !important}
  .card-footer{min-height:47px}
  .card-actions .btn-action{
    padding:0 7px !important;
    font-size:.58rem !important;
  }
}

/* Mobile */
@media(max-width:700px){
  .cards-grid{gap:12px !important}
  .greeting-card{
    padding:1.2rem .85rem 1rem !important;
  }
  .card-msg{
    -webkit-line-clamp:5;
  }
  .card-footer{
    min-height:48px;
  }
  .card-label{
    max-width:72px !important;
  }
  .card-actions .btn-action{
    min-height:30px;
    padding:0 7px !important;
  }
}


/* ============================================================
   WishGreeting V5.1 — Compact Card Actions
   Presentation-only refinement: keeps 4-column catalog intact
   while guaranteeing Copy / Customize / Share fit cleanly.
   ============================================================ */

.card-footer{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:6px !important;
  padding:.42rem .45rem !important;
  min-height:47px !important;
}

.card-label{
  min-width:0 !important;
  max-width:none !important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  padding-left:2px !important;
  font-size:.57rem !important;
}

.card-actions{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:3px !important;
  min-width:0 !important;
}

.card-actions .btn-action{
  min-width:0 !important;
  width:auto !important;
  min-height:28px !important;
  padding:0 5px !important;
  border-radius:7px !important;
  font-size:.55rem !important;
  line-height:1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  justify-content:center !important;
}

.card-actions .btn-action:first-child,
.card-actions .btn-action:last-child{
  background:rgba(111,82,226,.045);
}

@media(max-width:1100px){
  .card-footer{
    grid-template-columns:1fr !important;
    gap:4px !important;
    min-height:62px !important;
    padding:.4rem !important;
  }

  .card-label{
    text-align:center;
    max-width:100% !important;
  }

  .card-actions{
    width:100%;
  }

  .card-actions .btn-action{
    min-height:27px !important;
    padding:0 4px !important;
    font-size:.52rem !important;
  }
}

@media(max-width:700px){
  .card-footer{
    grid-template-columns:minmax(0,1fr) auto !important;
    min-height:46px !important;
  }

  .card-label{
    text-align:left;
  }

  .card-actions .btn-action{
    min-height:28px !important;
    padding:0 5px !important;
    font-size:.53rem !important;
  }
}

body:not(.light) .card-actions .btn-action{
  background:rgba(255,255,255,.025);
}


/* ============================================================
   WishGreeting V6 — Horizontal Filters
   Desktop: category sidebar + full-width wish catalog.
   Mobile: existing filter drawer remains the filter interface.
   ============================================================ */

.horizontal-filters{
  display:grid;
  grid-template-columns:auto repeat(3,minmax(145px,1fr)) auto auto;
  align-items:center;
  gap:9px;
  width:100%;
  margin:-2px 0 16px;
  padding:10px;
  border:1px solid var(--border2);
  border-radius:14px;
  background:var(--bg3);
  box-shadow:0 4px 16px rgba(35,29,78,.035);
}

.horizontal-filter-title{
  display:flex;
  align-items:center;
  gap:7px;
  padding:0 7px;
  color:var(--text);
  white-space:nowrap;
  font-size:.73rem;
}

.filter-sliders{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(111,82,226,.09);
  color:var(--accent);
  font-size:.9rem;
}

.hfilter-control{
  position:relative;
  min-width:0;
}

.hfilter-control > span{
  position:absolute;
  left:12px;
  top:4px;
  z-index:1;
  font-size:.51rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--text3);
  pointer-events:none;
}

.hfilter-control select{
  width:100%;
  min-height:43px;
  padding:14px 31px 4px 11px;
  border:1px solid var(--border2);
  border-radius:10px;
  background:var(--bg);
  color:var(--text);
  font:600 .67rem 'DM Sans',sans-serif;
  cursor:pointer;
  outline:none;
  appearance:auto;
}

.hfilter-control select:hover,
.hfilter-control select:focus{
  border-color:#b8aef6;
  box-shadow:0 0 0 3px rgba(111,82,226,.07);
}

.horizontal-apply{
  min-height:43px;
  padding:0 15px;
  border:0;
  border-radius:10px;
  background:linear-gradient(135deg,#8b63ef,#6244df);
  color:#fff;
  font:700 .67rem 'DM Sans',sans-serif;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 6px 14px rgba(104,72,224,.18);
}

.horizontal-apply:hover{
  transform:translateY(-1px);
  box-shadow:0 9px 18px rgba(104,72,224,.24);
}

.horizontal-clear{
  min-height:43px;
  padding:0 9px;
  border:0;
  background:transparent;
  color:var(--accent);
  font:600 .62rem 'DM Sans',sans-serif;
  cursor:pointer;
  white-space:nowrap;
}

.horizontal-clear:hover{
  text-decoration:underline;
}

/* The permanent right rail is no longer needed on desktop. */
@media(min-width:1101px){
  .dashboard-aside{
    display:none !important;
  }

  .main{
    gap:22px !important;
  }

  .cards-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

@media(min-width:761px) and (max-width:1100px){
  .horizontal-filters{
    grid-template-columns:1fr 1fr 1fr auto;
  }

  .horizontal-filter-title{
    grid-column:1/-1;
    padding-bottom:1px;
  }

  .horizontal-clear{
    display:none;
  }

  .dashboard-aside{
    display:none !important;
  }
}

@media(max-width:760px){
  .horizontal-filters{
    display:none !important;
  }
}

/* Dark mode */
body:not(.light) .horizontal-filters{
  background:var(--bg3);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}

body:not(.light) .hfilter-control select{
  background:var(--bg2);
  border-color:rgba(255,255,255,.10);
}

body:not(.light) .filter-sliders{
  background:rgba(163,139,255,.13);
}

/* Keep the catalog header visually close to the filter bar. */
@media(min-width:761px){
  .cards-header{
    margin-bottom:10px !important;
  }
}


/* ============================================================
   WishGreeting V7 — Responsive / Mobile Audit
   Desktop V6 remains the baseline. This pass improves only
   responsive behavior and touch presentation.
   ============================================================ */

/* Prevent accidental viewport overflow from decorative elements. */
html,body{
  max-width:100%;
  overflow-x:hidden;
}

@media(max-width:1100px){
  .nav-inner{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .main{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .sidebar{
    display:none !important;
  }

  .page-wrap{
    width:100%;
  }

  .cards-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .wg-create-banner{
    width:calc(100% - 32px) !important;
    grid-template-columns:180px minmax(0,1fr) !important;
  }

  .wg-create-banner .wg-create-banner-btn{
    grid-column:2;
    justify-self:start !important;
    min-width:190px !important;
  }

  .wg-create-banner .wg-create-art{
    transform:scale(.82) !important;
    transform-origin:left center !important;
  }
}

@media(max-width:760px){
  /* Header */
  .navbar{
    position:sticky;
    top:0;
    z-index:100;
  }

  .nav-inner{
    height:58px !important;
    padding:0 12px !important;
    gap:8px !important;
  }

  .nav-logo{
    font-size:1.05rem !important;
    gap:5px !important;
    white-space:nowrap;
  }

  .header-create-btn{
    min-height:36px !important;
    padding:0 10px !important;
    font-size:.68rem !important;
    border-radius:10px !important;
    margin-left:auto !important;
  }

  .header-create-btn span{
    display:none;
  }

  .theme-toggle{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px;
  }

  .mob-nav-toggle{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px;
    display:inline-flex !important;
  }

  /* Create-card banner: compact but still prominent */
  .wg-create-banner{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:calc(100% - 24px) !important;
    min-height:0 !important;
    margin:10px 12px 12px !important;
    padding:17px 16px !important;
    gap:10px !important;
    border-radius:18px !important;
  }

  .wg-create-banner .wg-create-art{
    display:block !important;
    width:145px !important;
    height:76px !important;
    transform:scale(.62) !important;
    transform-origin:left top !important;
    margin-bottom:-25px !important;
  }

  .wg-create-banner .wg-mini-card{
    width:62px !important;
    height:80px !important;
    border-width:4px !important;
    font-size:24px !important;
  }

  .wg-create-banner .wg-mini-card-one{left:4px !important;top:5px !important}
  .wg-create-banner .wg-mini-card-two{left:48px !important;top:0 !important}
  .wg-create-banner .wg-mini-card-three{left:92px !important;top:5px !important}

  .wg-create-banner .wg-create-kicker{
    font-size:.59rem !important;
    letter-spacing:.13em !important;
  }

  .wg-create-banner .wg-create-copy h2{
    font-size:1.35rem !important;
    line-height:1.16 !important;
    letter-spacing:-.035em !important;
  }

  .wg-create-banner .wg-create-copy p{
    font-size:.73rem !important;
    margin:5px 0 9px !important;
  }

  .wg-create-banner .wg-create-steps{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .wg-create-banner .wg-create-steps span{
    font-size:.59rem !important;
    gap:5px !important;
  }

  .wg-create-banner .wg-create-steps b{
    width:27px !important;
    height:27px !important;
    font-size:.75rem !important;
  }

  .wg-create-banner .wg-create-banner-btn{
    grid-column:auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:45px !important;
    border-radius:12px !important;
    font-size:.78rem !important;
    padding:0 14px !important;
  }

  .wg-create-banner .wg-create-banner-btn span{
    margin-left:9px !important;
  }

  /* Hero */
  .hero{
    padding:0 0 10px !important;
  }

  .hero-shell{
    width:calc(100% - 24px) !important;
    min-height:0 !important;
    padding:22px 17px 19px !important;
    border-radius:18px !important;
  }

  .hero-copy{
    max-width:none !important;
  }

  .hero-kicker{
    font-size:.58rem !important;
    letter-spacing:.1em !important;
  }

  .hero h1{
    font-size:clamp(1.9rem,9vw,2.45rem) !important;
    line-height:1.04 !important;
    letter-spacing:-.045em !important;
  }

  .hero p{
    font-size:.77rem !important;
    line-height:1.5 !important;
    margin-top:.45rem !important;
  }

  .hero-search{
    max-width:none !important;
    margin-top:.75rem !important;
  }

  .hero-search input{
    min-height:42px !important;
    font-size:.73rem !important;
  }

  .intent-chips{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scrollbar-width:none;
    padding-bottom:2px;
    margin-right:-4px;
  }

  .intent-chips::-webkit-scrollbar{
    display:none;
  }

  .intent-chips a{
    flex:0 0 auto;
    font-size:.61rem !important;
    padding:.36rem .57rem !important;
  }

  .hero-benefits{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    margin-top:11px !important;
  }

  .hero-benefit{
    min-width:0 !important;
  }

  .hero-benefit .benefit-icon{
    width:27px !important;
    height:27px !important;
  }

  .hero-benefit b,
  .hero-benefit small{
    font-size:.58rem !important;
  }

  .search-label{
    display:none !important;
  }

  /* Breadcrumb */
  .breadcrumb{
    padding:7px 12px 4px !important;
    font-size:.6rem !important;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Catalog */
  .main{
    display:block !important;
    padding:12px 12px 25px !important;
  }

  .cards-header{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:8px !important;
    margin-bottom:9px !important;
  }

  .cards-heading{
    font-size:1.25rem !important;
  }

  .cards-subheading{
    font-size:.63rem !important;
  }

  .cards-header-actions{
    flex:0 0 auto;
    gap:5px !important;
  }

  .cards-meta{
    display:none !important;
  }

  .sort-wrap span{
    display:none !important;
  }

  .sort-wrap select{
    min-height:36px !important;
    padding:0 7px !important;
    font-size:.59rem !important;
    border-radius:9px !important;
    max-width:112px;
  }

  .mobile-filter-toggle{
    display:inline-flex !important;
    min-height:36px !important;
    padding:0 10px !important;
    border-radius:9px !important;
    font-size:.65rem !important;
  }

  /* Horizontal desktop filters stay hidden; mobile uses drawer. */
  .horizontal-filters{
    display:none !important;
  }

  /* Ensure the filter drawer is genuinely a drawer on mobile. */
  .dashboard-aside{
    display:none !important;
  }

  .dashboard-aside.is-open{
    display:flex !important;
    position:fixed !important;
    z-index:250 !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:min(88vw,360px) !important;
    max-height:none !important;
    margin:0 !important;
    padding:16px !important;
    overflow-y:auto !important;
    flex-direction:column !important;
    border-radius:18px 0 0 18px !important;
    box-shadow:-14px 0 38px rgba(20,18,50,.22) !important;
    background:var(--bg2) !important;
  }

  /* Catalog grid: two cards on phones for discovery density. */
  .cards-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .card-wrapper{
    border-radius:13px !important;
  }

  .greeting-card{
    aspect-ratio:4/3 !important;
    padding:.85rem .6rem .75rem !important;
  }

  .card-icon{
    font-size:1.3rem !important;
    margin-bottom:.35rem !important;
  }

  .card-title{
    font-size:.88rem !important;
    line-height:1.08 !important;
  }

  .card-msg{
    font-size:.61rem !important;
    line-height:1.42 !important;
    -webkit-line-clamp:4 !important;
    max-width:95% !important;
  }

  .favorite-btn{
    width:28px !important;
    height:28px !important;
    top:7px !important;
    right:7px !important;
    font-size:.9rem !important;
  }

  .card-footer{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:4px !important;
    min-height:0 !important;
    padding:5px !important;
  }

  .card-label{
    display:block !important;
    max-width:100% !important;
    text-align:left !important;
    font-size:.52rem !important;
    line-height:1 !important;
  }

  .card-actions{
    width:100% !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:3px !important;
  }

  .card-actions .btn-action{
    min-height:29px !important;
    padding:0 3px !important;
    font-size:.5rem !important;
    border-radius:6px !important;
  }

  .pagination{
    gap:5px !important;
    margin-top:1.35rem !important;
  }

  .pagination button{
    min-width:32px !important;
    min-height:32px !important;
    padding:0 8px !important;
  }

  .related-section{
    margin-top:1.7rem !important;
    padding-top:1.1rem !important;
  }

  .related-title{
    font-size:1.05rem !important;
  }

  .related-links{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    scrollbar-width:none;
    padding-bottom:3px;
  }

  .related-links::-webkit-scrollbar{
    display:none;
  }

  .related-link{
    flex:0 0 auto;
    font-size:.62rem !important;
    padding:.48rem .65rem !important;
  }

  /* Footer */
  footer{
    padding:28px 16px 15px !important;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr !important;
    gap:22px 18px !important;
  }

  .footer-brand{
    grid-column:1/-1;
  }

  .footer-brand p{
    max-width:360px !important;
    font-size:.68rem !important;
  }

  .footer-col h3{
    font-size:.68rem !important;
  }

  .footer-col a{
    font-size:.65rem !important;
  }

  .footer-bottom{
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
    font-size:.58rem !important;
  }

  /* Creator modal — keep the existing functionality, improve touch fit. */
  .modal-overlay{
    padding:7px !important;
    align-items:flex-start !important;
  }

  .wg-creator-modal{
    width:100% !important;
    max-height:calc(100vh - 14px) !important;
    border-radius:17px !important;
    overflow:hidden !important;
  }

  .wg-creator-head{
    padding:18px 17px 14px !important;
  }

  .wg-creator-head h2{
    font-size:1.45rem !important;
    padding-right:35px;
  }

  .wg-creator-body{
    display:flex !important;
    flex-direction:column !important;
    overflow-y:auto !important;
  }

  .wg-creator-form{
    order:2 !important;
    padding:16px !important;
  }

  .wg-creator-preview{
    order:1 !important;
    padding:15px !important;
  }

  .wg-preview-stage{
    min-height:265px !important;
    border-radius:17px !important;
  }

  .wg-preview-card-wrap{
    width:min(92%,350px) !important;
  }

  .wg-preview-card-wrap .modal-card{
    min-height:210px !important;
  }

  .wg-preview-actions{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:6px !important;
  }

  .wg-preview-actions button{
    min-height:56px !important;
    padding:5px !important;
  }

  .wg-design-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  .wg-design{
    padding:4px 4px 6px !important;
  }

  .wg-design b{
    font-size:.55rem !important;
  }

  .wg-field{
    min-height:44px !important;
    font-size:.78rem !important;
  }

  .wg-message{
    min-height:105px !important;
  }
}

@media(max-width:440px){
  .header-create-btn{
    padding:0 8px !important;
    font-size:.62rem !important;
  }

  .nav-logo{
    font-size:.98rem !important;
  }

  .hero-shell{
    padding:19px 14px 16px !important;
  }

  .hero h1{
    font-size:1.82rem !important;
  }

  .hero-benefits{
    display:none !important;
  }

  .cards-grid{
    grid-template-columns:1fr !important;
    gap:11px !important;
  }

  .greeting-card{
    aspect-ratio:16/9 !important;
    padding:1rem !important;
  }

  .card-title{
    font-size:1rem !important;
  }

  .card-msg{
    font-size:.67rem !important;
  }

  .card-footer{
    flex-direction:row !important;
    align-items:center !important;
  }

  .card-label{
    max-width:70px !important;
  }

  .card-actions{
    width:auto !important;
    margin-left:auto !important;
  }

  .card-actions .btn-action{
    min-height:30px !important;
    padding:0 5px !important;
    font-size:.54rem !important;
  }

  .wg-create-banner{
    padding:15px !important;
  }

  .wg-create-banner .wg-create-art{
    display:none !important;
  }

  .wg-create-banner .wg-create-steps{
    grid-template-columns:1fr 1fr !important;
  }

  .wg-design-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }

  .wg-preview-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Dark mobile drawer and creator surfaces */
body:not(.light) .dashboard-aside.is-open{
  background:var(--bg2) !important;
  box-shadow:-14px 0 38px rgba(0,0,0,.42) !important;
}
\n\n/* ── V8 DESIGN SELECTION + MONETIZATION HOOKS ─────────────────────────── */\n.wg-design{\n  position:relative;\n  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;\n}\n.wg-design:focus-visible{outline:3px solid rgba(128,95,240,.35);outline-offset:2px}\n.wg-design.active{\n  border-color:#805ff0;\n  box-shadow:0 8px 20px rgba(112,84,224,.18),0 0 0 2px rgba(128,95,240,.12);\n  transform:translateY(-2px);\n}\n.wg-design.active::after{\n  content:'✓';position:absolute;right:7px;top:7px;width:22px;height:22px;border-radius:50%;\n  display:grid;place-items:center;background:#fff;color:#7654e7;font-size:.72rem;font-weight:900;\n  box-shadow:0 3px 9px rgba(40,30,80,.18);z-index:5;\n}\n.wg-design-art{transition:filter .18s ease,transform .18s ease}\n.wg-design.active .wg-design-art{transform:scale(1.015);filter:saturate(1.06)}\n.wg-design b{color:#3e4866}\n.wg-monetization-slot{display:none!important}\nhtml[data-ads="on"] .wg-monetization-slot{display:block!important;min-height:90px}\nbody:not(.light) .wg-design b{color:#dfe3f4}\nbody:not(.light) .wg-design.active{border-color:#9a7cff;box-shadow:0 8px 22px rgba(91,67,185,.28),0 0 0 2px rgba(154,124,255,.18)}\nbody:not(.light) .wg-design.active::after{background:#292c43;color:#bda9ff}\n\n\n.wg-premium-badge{\n  position:absolute;left:8px;top:8px;z-index:6;\n  padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.94);\n  color:#6c4ddd;font-size:.56rem;font-weight:800;box-shadow:0 4px 10px rgba(30,20,70,.12);\n}\nbody:not(.light) .wg-premium-badge{background:#282b43;color:#c7b6ff;border:1px solid #474b6c}\n

/* ── POS CROSS-PROMOTION ─────────────────────────────────────────────── */
.wg-pos-promo-slot{width:100%;margin:22px 0 18px;}
.wg-pos-promo-slot[hidden]{display:none!important}
.wg-pos-promo{
  display:grid;grid-template-columns:86px 1fr auto;align-items:center;gap:18px;
  width:100%;box-sizing:border-box;padding:14px 18px;border:1px solid #e7e1f7;border-radius:18px;
  background:linear-gradient(100deg,#fff 0%,#faf7ff 58%,#f3efff 100%);
  text-decoration:none;box-shadow:0 7px 22px rgba(83,62,150,.08);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.wg-pos-promo:hover{transform:translateY(-1px);box-shadow:0 11px 28px rgba(83,62,150,.13);border-color:#d8cef5}
.wg-pos-logo-wrap{width:72px;height:72px;border-radius:14px;display:grid;place-items:center;background:#080808;overflow:hidden;flex:0 0 auto}
.wg-pos-logo-wrap img{width:100%;height:100%;object-fit:contain;display:block}
.wg-pos-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.wg-pos-kicker{font-size:.58rem;letter-spacing:.12em;font-weight:800;color:#7657d8}
.wg-pos-copy strong{font-size:1rem;color:#172449;line-height:1.2}
.wg-pos-copy>span:last-child{font-size:.76rem;color:#6e6a7d;line-height:1.35}
.wg-pos-cta{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;padding:10px 15px;border-radius:11px;background:linear-gradient(135deg,#7656e8,#9b64e9);color:#fff;font-size:.72rem;font-weight:800;box-shadow:0 5px 13px rgba(118,86,232,.2)}
.wg-pos-cta b{font-size:1rem;line-height:1}
body:not(.light) .wg-pos-promo{background:linear-gradient(100deg,#1d1e31,#24203d 60%,#2b2346);border-color:#40385d;box-shadow:0 9px 25px rgba(0,0,0,.22)}
body:not(.light) .wg-pos-promo:hover{border-color:#5c4c85}
body:not(.light) .wg-pos-copy strong{color:#f0effa}
body:not(.light) .wg-pos-copy>span:last-child{color:#b7b3c9}
body:not(.light) .wg-pos-logo-wrap{background:#050505}

/* Premium UI: previewable now; purchasing/gating intentionally disabled. */
.wg-design-premium{position:absolute;right:6px;bottom:6px;padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.93);color:#7552d5;font-size:.5rem;font-weight:900;line-height:1;box-shadow:0 3px 8px rgba(30,20,70,.12);pointer-events:none}
body:not(.light) .wg-design-premium{background:#29263d;color:#cdbdff;border:1px solid #494263}
.wg-design-premium::first-letter{font-size:.58rem}

@media (max-width:700px){
  .wg-pos-promo{grid-template-columns:58px 1fr;gap:12px;padding:12px 13px}
  .wg-pos-logo-wrap{width:58px;height:58px;border-radius:12px}
  .wg-pos-copy strong{font-size:.86rem}
  .wg-pos-copy>span:last-child{font-size:.67rem}
  .wg-pos-cta{grid-column:2;justify-self:start;padding:8px 12px;font-size:.66rem}
  .wg-pos-promo-slot{margin:16px 0 14px}
}


/* ===== PREMIUM SHOWCASE: 20 DISTINCT, NON-EDITABLE CARD DESIGNS ===== */
.premium-showcase-card{cursor:pointer}
.premium-showcase-card .greeting-card{position:relative;overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 25px rgba(34,22,65,.14),inset 0 0 0 1px rgba(255,255,255,.1);transition:transform .18s ease,box-shadow .18s ease}
.premium-showcase-card:hover .greeting-card{transform:translateY(-2px);box-shadow:0 15px 30px rgba(34,22,65,.18),inset 0 0 0 1px rgba(255,255,255,.16)}
.premium-showcase-card .card-content{position:relative;z-index:3}
.premium-showcase-card .card-title{text-shadow:0 2px 9px rgba(0,0,0,.16)}
.premium-showcase-card .card-msg{text-shadow:0 1px 5px rgba(0,0,0,.12)}
.premium-card-footer{justify-content:space-between!important;gap:5px}
.premium-showcase-card .card-actions{display:none!important}
.premium-card-footer .wg-premium-badge{display:inline-flex!important;align-items:center;gap:3px;order:2;padding:3px 6px!important;border-radius:999px!important;background:linear-gradient(90deg,#fff2b0,#f1cd62)!important;color:#69490a!important;border:1px solid rgba(117,77,8,.12)!important;font-size:.51rem!important;font-weight:900!important;box-shadow:0 2px 5px rgba(85,60,10,.08)}
.premium-card-footer .premium-coming-label{order:3;font-size:.59rem;font-weight:800;color:#7654df;white-space:nowrap}

/* 01 Golden Dawn */
.tpl-premium-golden-dawn{background:linear-gradient(168deg,#40200f 0 25%,#9e4c20 25% 48%,#d78d36 48% 72%,#f2d48d 72%)!important}
.tpl-premium-golden-dawn:before{content:'✦   ✦   ✦';position:absolute;top:10%;left:0;right:0;text-align:center;color:#ffe8a0;letter-spacing:11px}
.tpl-premium-golden-dawn:after{content:'';position:absolute;width:52px;height:52px;left:50%;top:44%;transform:translate(-50%,-50%);border-radius:50%;background:#ffe6a1;box-shadow:0 0 0 8px rgba(255,216,117,.18),0 0 28px rgba(255,222,132,.45)}

/* 02 Birthday Bloom */
.tpl-premium-birthday-bloom{background:linear-gradient(145deg,#5b1f50,#b83c80 54%,#eda5c1)!important}
.tpl-premium-birthday-bloom:before{content:'✿  ❀  ✿';position:absolute;top:10%;left:0;right:0;text-align:center;color:#ffe8f3;letter-spacing:9px}
.tpl-premium-birthday-bloom:after{content:'✿';position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);font-size:4rem;color:rgba(255,244,249,.2);text-shadow:0 0 25px rgba(255,222,239,.35)}

/* 03 Ruby Anniversary */
.tpl-premium-ruby-anniversary{background:radial-gradient(circle at 50% 45%,#b92f50 0 15%,transparent 15.8%),linear-gradient(145deg,#24040e,#76142c 54%,#bd3e58)!important}
.tpl-premium-ruby-anniversary:before{content:'◇  ◆  ◇';position:absolute;top:9%;left:9%;right:9%;text-align:center;color:#ffd7df;letter-spacing:9px;border-top:1px solid rgba(255,220,225,.45);padding-top:6px}
.tpl-premium-ruby-anniversary:after{content:'';position:absolute;inset:12% 8%;border:1px solid rgba(255,216,225,.38);border-radius:14px;box-shadow:inset 0 0 0 5px rgba(255,216,225,.05)}

/* 04 Velvet Hearts */
.tpl-premium-velvet-hearts{background:radial-gradient(ellipse at 18% 18%,rgba(255,167,195,.3),transparent 28%),radial-gradient(ellipse at 84% 78%,rgba(255,80,132,.28),transparent 32%),linear-gradient(135deg,#1b0310,#5b0d2d 48%,#9f2b53)!important}
.tpl-premium-velvet-hearts:before{content:'♡     ♥     ♡';position:absolute;top:11%;left:0;right:0;text-align:center;color:#ffd0df;letter-spacing:9px}
.tpl-premium-velvet-hearts:after{content:'';position:absolute;inset:-20%;background:repeating-linear-gradient(115deg,transparent 0 24px,rgba(255,255,255,.035) 25px 28px);transform:rotate(8deg)}

/* 05 Thankful Garden */
.tpl-premium-thankful-garden{background:linear-gradient(145deg,#302419,#715039 52%,#cfa77e)!important}
.tpl-premium-thankful-garden:before{content:'❧';position:absolute;left:6%;top:3%;font-size:3.5rem;color:#d9e5aa;transform:rotate(-20deg);opacity:.72}
.tpl-premium-thankful-garden:after{content:'❧';position:absolute;right:6%;bottom:2%;font-size:3.5rem;color:#f2d1a1;transform:rotate(160deg);opacity:.72}

/* 06 Royal Cheers */
.tpl-premium-royal-cheers{background:linear-gradient(145deg,#100a31,#34216f 53%,#8c5fb4)!important}
.tpl-premium-royal-cheers:before{content:'♛';position:absolute;left:50%;top:8%;transform:translateX(-50%);width:40px;height:40px;border:1px solid #f0d68c;border-radius:50%;display:grid;place-items:center;color:#ffe9a5;font-size:1.1rem}
.tpl-premium-royal-cheers:after{content:'◆  ─  ◆  ─  ◆';position:absolute;bottom:8%;left:0;right:0;text-align:center;color:#e9d38f;letter-spacing:5px}

/* 07 Moonlit Dreams */
.tpl-premium-moonlit-dreams{background:radial-gradient(circle at 76% 26%,#fff2ad 0 6%,transparent 6.8%),linear-gradient(150deg,#050d25,#182e63 54%,#5750a0)!important}
.tpl-premium-moonlit-dreams:before{content:'☾';position:absolute;right:17%;top:17%;font-size:2rem;color:#fff0ae;text-shadow:0 0 18px rgba(255,239,170,.55)}
.tpl-premium-moonlit-dreams:after{content:'·  ✦  ·  ✧  ·  ✦  ·';position:absolute;top:12%;left:0;right:0;text-align:center;color:#dbe7ff;letter-spacing:7px}

/* 08 Emerald Journey */
.tpl-premium-emerald-journey{background:linear-gradient(145deg,#042b26,#09634e 54%,#6ba86d)!important}
.tpl-premium-emerald-journey:before{content:'⌁  ❧  ⌁';position:absolute;top:10%;left:0;right:0;text-align:center;color:#d2edbd;letter-spacing:10px}
.tpl-premium-emerald-journey:after{content:'';position:absolute;width:120%;height:45%;left:-10%;bottom:-27%;border-top:1px solid rgba(222,255,212,.3);border-radius:50%;transform:rotate(-7deg)}

/* 09 Golden Friendship */
.tpl-premium-golden-friendship{background:radial-gradient(circle at 50% 47%,#ffe99e 0 9%,#d1a33a 9.8% 13%,transparent 13.8%),repeating-conic-gradient(from -10deg at 50% 47%,rgba(255,238,169,.16) 0 8deg,transparent 8deg 18deg),linear-gradient(145deg,#10423b,#157864)!important}
.tpl-premium-golden-friendship:before{content:'✦   ☼   ✦';position:absolute;top:10%;left:0;right:0;text-align:center;color:#fff0b5;letter-spacing:9px}

/* 10 Diwali Glow */
.tpl-premium-diwali-glow{background:radial-gradient(circle at 50% 59%,#ffd46b 0 5%,#ff8b3c 5.8% 9%,transparent 9.8%),linear-gradient(145deg,#3e050a,#8e171c 50%,#e27a29)!important}
.tpl-premium-diwali-glow:before{content:'✦   🪔   ✦';position:absolute;top:9%;left:0;right:0;text-align:center;color:#ffe8a1;letter-spacing:7px}
.tpl-premium-diwali-glow:after{content:'·  ❖  ·  ❖  ·';position:absolute;bottom:8%;left:0;right:0;text-align:center;color:#ffd987;letter-spacing:6px}

/* 11 Crescent Blessings */
.tpl-premium-crescent-blessings{background:linear-gradient(145deg,#06182c,#075768 55%,#6aa58e)!important}
.tpl-premium-crescent-blessings:before{content:'☾';position:absolute;left:50%;top:8%;transform:translateX(-50%);font-size:1.8rem;color:#e5e7ae}
.tpl-premium-crescent-blessings:after{content:'◇  ◇  ◇';position:absolute;left:8%;right:8%;top:17%;height:57%;border:1px solid rgba(229,232,176,.35);border-radius:45% 45% 12px 12px;color:#d9e4c4;text-align:center;padding-top:7px;letter-spacing:7px}

/* 12 Hanukkah Light */
.tpl-premium-hanukkah-light{background:linear-gradient(145deg,#0b2148,#30669e 54%,#a9cde0)!important}
.tpl-premium-hanukkah-light:before{content:'│  │  │  │  │  │  │  │  │';position:absolute;top:8%;left:0;right:0;text-align:center;color:#f4e2a4;letter-spacing:2px;opacity:.75}
.tpl-premium-hanukkah-light:after{content:'✦  ✧  ✦';position:absolute;bottom:9%;left:0;right:0;text-align:center;color:#fff1c0;letter-spacing:10px}

/* 13 Liberty Sky */
.tpl-premium-liberty-sky{background:linear-gradient(155deg,#10265c 0 42%,#8f2038 42% 69%,#d8b25f 69%)!important}
.tpl-premium-liberty-sky:before{content:'★  ★  ★  ★';position:absolute;top:9%;left:0;right:0;text-align:center;color:#fff1bc;letter-spacing:8px}
.tpl-premium-liberty-sky:after{content:'';position:absolute;left:-8%;right:-8%;bottom:17%;height:14px;background:rgba(255,255,255,.12);transform:rotate(-7deg)}

/* 14 London Elegance */
.tpl-premium-london-elegance{background:linear-gradient(145deg,#141828,#364461 55%,#a88e61)!important}
.tpl-premium-london-elegance:before{content:'✦';position:absolute;left:50%;top:8%;transform:translateX(-50%);color:#e8d19a}
.tpl-premium-london-elegance:after{content:'';position:absolute;inset:10% 8%;border:1px solid rgba(232,209,154,.42);box-shadow:inset 0 0 0 4px rgba(232,209,154,.06),inset 0 0 0 6px rgba(232,209,154,.16);border-radius:5px}

/* 15 European Spring */
.tpl-premium-european-spring{background:linear-gradient(145deg,#4a245f,#9e4f93 50%,#edb69d)!important}
.tpl-premium-european-spring:before{content:'❀   🌿   ❀';position:absolute;top:10%;left:0;right:0;text-align:center;color:#ffe8e1;letter-spacing:7px}
.tpl-premium-european-spring:after{content:'';position:absolute;right:-20%;bottom:-20%;width:75%;height:75%;border:1px solid rgba(255,240,230,.35);transform:rotate(35deg);border-radius:25%}

/* 16 Sakura Wishes */
.tpl-premium-sakura-wishes{background:linear-gradient(145deg,#54234f,#a85d8e 53%,#eeb9bc)!important}
.tpl-premium-sakura-wishes:before{content:'🌸   ✿   🌸';position:absolute;top:8%;left:0;right:0;text-align:center;color:#ffeaf4;letter-spacing:7px}
.tpl-premium-sakura-wishes:after{content:'❀';position:absolute;left:3%;bottom:-7%;font-size:5rem;color:rgba(255,232,242,.16);transform:rotate(-15deg)}

/* 17 Little Star */
.tpl-premium-little-star{background:linear-gradient(145deg,#496da8,#91b7dd 58%,#f2d8b9)!important}
.tpl-premium-little-star:before{content:'★   ·   ★   ·   ★';position:absolute;top:9%;left:0;right:0;text-align:center;color:#fff4bd;letter-spacing:8px}
.tpl-premium-little-star:after{content:'·  ·  ✦  ·  ·';position:absolute;bottom:10%;left:0;right:0;text-align:center;color:rgba(255,255,255,.65);letter-spacing:12px}

/* 18 Scholar's Gold */
.tpl-premium-scholars-gold{background:linear-gradient(145deg,#202b47,#4f6689 54%,#c9a657)!important}
.tpl-premium-scholars-gold:before{content:'❖';position:absolute;left:50%;top:8%;transform:translateX(-50%);width:38px;height:38px;border:1px solid #eed488;border-radius:50%;display:grid;place-items:center;color:#f5df9e}
.tpl-premium-scholars-gold:after{content:'—  ✦  —';position:absolute;bottom:9%;left:0;right:0;text-align:center;color:#f0d88e;letter-spacing:8px}

/* 19 Midnight Fireworks */
.tpl-premium-midnight-fireworks{background:radial-gradient(circle at 24% 29%,#ffe48a 0 2%,transparent 2.8%),radial-gradient(circle at 74% 34%,#ff9fc9 0 2%,transparent 2.8%),radial-gradient(circle at 52% 65%,#9ee4ff 0 2%,transparent 2.8%),linear-gradient(145deg,#080c2a,#26206f 55%,#7148a5)!important}
.tpl-premium-midnight-fireworks:before{content:'✦  ╲│╱  ✦  ╲│╱  ✦';position:absolute;top:9%;left:0;right:0;text-align:center;color:#ffe8a9;letter-spacing:4px;font-size:.62rem}
.tpl-premium-midnight-fireworks:after{content:'·  ✧  ·  ✦  ·  ✧  ·';position:absolute;bottom:9%;left:0;right:0;text-align:center;color:#d9e9ff;letter-spacing:7px}

/* 20 Wildflower Note */
.tpl-premium-wildflower-note{background:linear-gradient(145deg,#31584c,#68936d 55%,#e2c29d)!important}
.tpl-premium-wildflower-note:before{content:'✿  ❀  ✿';position:absolute;top:9%;left:0;right:0;text-align:center;color:#fff0d3;letter-spacing:9px}
.tpl-premium-wildflower-note:after{content:'';position:absolute;inset:9% 7%;border:1px dashed rgba(255,239,211,.38);border-radius:12px}
/* Sidebar Premium box */
.wg-sidebar-premium{
  margin-top:14px;border:1px solid rgba(127,91,231,.18);border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#f8f2ff,#fff8fc 55%,#f1f6ff);
  box-shadow:0 10px 24px rgba(69,51,120,.07);
}
.wg-sidebar-premium-art{min-height:82px;display:grid;place-items:center;background:linear-gradient(145deg,#6544d9,#a05ce8 55%,#ef9fc6)}
.wg-sidebar-premium-art span{font-size:2rem;color:#ffeaa2;text-shadow:0 4px 14px rgba(50,25,90,.25)}
.wg-sidebar-premium-body{padding:12px}
.wg-sidebar-premium-kicker{font-size:.5rem;font-weight:900;letter-spacing:.1em;color:#7652dd}
.wg-sidebar-premium h3{margin:4px 0 5px;font-size:.9rem;color:#26345a}
.wg-sidebar-premium p{margin:0 0 8px;font-size:.62rem;line-height:1.45;color:#6e7690}
.wg-sidebar-premium ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:5px}
.wg-sidebar-premium li{font-size:.57rem;color:#68718b}
.wg-sidebar-premium li:before{content:'✓';display:inline-grid;place-items:center;width:15px;height:15px;margin-right:5px;border-radius:50%;background:#7654e8;color:#fff;font-size:.48rem;font-weight:900}
.wg-sidebar-premium button{width:100%;border:0;border-radius:10px;padding:9px 8px;background:linear-gradient(100deg,#8c5cf0,#6745df);color:#fff;font-size:.61rem;font-weight:800;cursor:pointer}
.wg-sidebar-premium button span{float:right}
.wg-sidebar-premium small{display:block;margin-top:7px;text-align:center;color:#9894a9;font-size:.49rem}

/* Coming-soon overlay: no editor, no copy, no share */
.premium-coming-overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(22,18,45,.58);backdrop-filter:blur(7px)}
.premium-coming-overlay.open{display:flex}
.premium-coming-dialog{width:min(430px,100%);border-radius:24px;overflow:hidden;box-shadow:0 28px 80px rgba(15,10,40,.38)}
.premium-coming-card{min-height:270px;padding:34px 28px 28px;position:relative;isolation:isolate;overflow:hidden;text-align:center;color:#fff;background:#5d45b8}
/* Keep the selected premium artwork visible, but subordinate it to the message. */
.premium-coming-card:before,.premium-coming-card:after{opacity:.42}
.premium-coming-card:after{z-index:0}
.premium-coming-card:before{z-index:0}
.premium-coming-card:where(.tpl-premium-golden-dawn,.tpl-premium-birthday-bloom,.tpl-premium-ruby-anniversary,.tpl-premium-velvet-hearts,.tpl-premium-thankful-garden,.tpl-premium-royal-cheers,.tpl-premium-moonlit-dreams,.tpl-premium-emerald-journey,.tpl-premium-golden-friendship,.tpl-premium-diwali-glow,.tpl-premium-crescent-blessings,.tpl-premium-hanukkah-light,.tpl-premium-liberty-sky,.tpl-premium-london-elegance,.tpl-premium-european-spring,.tpl-premium-sakura-wishes,.tpl-premium-little-star,.tpl-premium-scholars-gold,.tpl-premium-midnight-fireworks,.tpl-premium-wildflower-note)::before{opacity:.42}
.premium-coming-card h2,.premium-coming-card p,.premium-coming-icon,.premium-coming-kicker,.premium-coming-actions{position:relative;z-index:3}
.premium-coming-icon{width:58px;height:58px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.16);font-size:1.7rem;color:#ffe99f;box-shadow:0 8px 24px rgba(20,10,40,.14)}
.premium-coming-kicker{font-size:.58rem;font-weight:900;letter-spacing:.14em;opacity:.9;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.premium-coming-card h2{margin:8px 0 10px;font-size:clamp(1.35rem,4vw,1.55rem);line-height:1.18;text-shadow:0 3px 12px rgba(0,0,0,.28)}
.premium-coming-card p{margin:0 auto;max-width:340px;line-height:1.6;font-size:.82rem;color:rgba(255,255,255,.94);text-shadow:0 2px 8px rgba(0,0,0,.22)}
.premium-coming-actions{margin-top:22px}
.premium-coming-actions button{border:0;border-radius:12px;padding:11px 26px;min-width:104px;background:#fff;color:#6745df;font-weight:850;cursor:pointer;box-shadow:0 8px 22px rgba(20,10,40,.18);transition:transform .16s ease,box-shadow .16s ease}
.premium-coming-actions button:hover{transform:translateY(-1px);box-shadow:0 11px 26px rgba(20,10,40,.22)}
.premium-coming-actions button:focus-visible{outline:3px solid rgba(255,255,255,.75);outline-offset:3px}
@media(max-width:520px){
  .premium-coming-overlay{padding:14px}
  .premium-coming-card{min-height:255px;padding:30px 22px 24px}
  .premium-coming-icon{width:54px;height:54px;margin-bottom:12px}
  .premium-coming-card p{font-size:.79rem;line-height:1.55}
  .premium-coming-actions{margin-top:19px}
}
body:not(.light) .wg-sidebar-premium{background:linear-gradient(160deg,#211f37,#28243e);border-color:#41385f}
body:not(.light) .wg-sidebar-premium h3{color:#f0edff}
body:not(.light) .wg-sidebar-premium p,body:not(.light) .wg-sidebar-premium li{color:#aaa7bf}

/* Premium panel is outside .sidebar-inner, so categories can scroll independently. */
.sidebar > .wg-sidebar-premium{
  flex:0 0 auto;
  width:100%;
  margin-top:14px;
  position:relative;
  z-index:2;
}

@media (max-width:980px){
  .sidebar-inner{
    max-height:none;
    overflow:visible;
  }
}

@media (min-width:981px){
  .sidebar > .wg-sidebar-premium{
    display:block;
    width:100%;
    max-height:none;
    overflow:visible;
    margin-top:14px;
  }
}

/* Sidebar Premium CTA opens the Coming Soon experience; it never enters the creator. */
.wg-sidebar-premium button{
  position:relative;
  z-index:2;
}
.wg-sidebar-premium button:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}