/*
Theme Name: Kaselo
Version: 1.0.0
Requires at least: 6.2
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kaselo
Tags: one-column, custom-menu, featured-images, translation-ready, responsive-layout
*/

/* ---------------------------------------------------------------- fonts -- */
@font-face{font-family:Sansa;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(assets/font/sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Sansa;font-style:normal;font-weight:400 800;font-display:swap;
  src:url(assets/font/sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* --------------------------------------------------------------- tokens -- */
:root{
  --bg:#f7f8fc; --card:#fff; --soft:#f4f5fa; --text:#151824; --muted:#6b7280;
  --line:#e9eaf2; --brand:#7c5cfc; --brand-soft:#f3ecff; --brand-line:#ddd3ff;
  --pink:#ec4899; --ok:#16a34a; --warn:#d97706; --bad:#dc2626;
  --r-sm:8px; --r-md:11px; --r-lg:16px; --r-xl:18px;
  --pad:clamp(15px,2vw,20px);
  --shadow:0 2px 14px rgba(20,20,60,.05);
  --font:Sansa,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
[data-theme=dark]{
  --bg:#0d0f16; --card:#161a24; --soft:#1d2230; --text:#eef0f7; --muted:#98a0b3;
  --line:#262c3b; --brand-soft:#241d3d; --brand-line:#3a2f66; --shadow:0 2px 14px rgba(0,0,0,.4);
}

/* ---------------------------------------------------------------- reset -- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:17px;line-height:1.6;text-wrap:pretty}
img,svg,video,iframe{max-width:100%}
img{height:auto}
p{font-size:17px;margin:0}
h1,h2,h3,h4,h5,h6{margin:0;line-height:1.25;letter-spacing:-.02em}
ul,ol{margin:0;padding:0;list-style:none}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--pink)}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px}
table{border-collapse:collapse;width:100%}
::selection{background:#efe7ff;color:#3b1e8f}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* --------------------------------------------------------------- layout -- */
.container{max-width:1220px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.page{min-height:100vh;display:flex;flex-direction:column}
main{flex:1;padding-bottom:60px}
.stack{display:flex;flex-direction:column;gap:26px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(var(--min,220px),1fr))}
.grid-fill{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(var(--min,190px),1fr))}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spacer{margin-left:auto}
.muted{color:var(--muted)}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;z-index:100;background:var(--card);padding:10px 16px;border-radius:var(--r-sm)}
[hidden]{display:none!important}

/* --------------------------------------------------------------- header -- */
.site-header{position:sticky;top:0;z-index:40;background:var(--card);border-bottom:1px solid var(--line)}
.site-header .container{height:60px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:9px;flex:none;color:var(--text);font-weight:800;font-size:18px;letter-spacing:-.03em;white-space:nowrap}
.brand:hover{color:var(--text)}
.brand img{max-height:30px;width:auto}
.nav{flex:1;display:flex;justify-content:center;gap:4px}
.nav a{font-size:14.5px;font-weight:600;color:var(--muted);padding:19px 12px;border-bottom:2px solid transparent;white-space:nowrap}
.nav .current-menu-item>a,.nav .current_page_item>a,.nav a.active{color:var(--brand);border-bottom-color:var(--brand)}
.hdr-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);background:var(--card);border-radius:9px;color:var(--text)}
.icon-btn .ic-sun{display:none}
[data-theme=dark] .icon-btn .ic-sun{display:block}
[data-theme=dark] .icon-btn .ic-moon{display:none}

/* ------------------------------------------------------ buttons / chips -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 16px;border:1px solid transparent;border-radius:var(--r-md);font-size:14.5px;font-weight:700;white-space:nowrap;background:var(--card);color:var(--text)}
.btn-sm{min-height:32px;padding:5px 12px;font-size:13px;border-radius:var(--r-sm)}
.btn-lg{min-height:46px;padding:10px 22px;font-size:15px}
.btn-primary{background:var(--brand);color:#fff}
.btn-grad{background:linear-gradient(90deg,#a855f7,#ec4899);color:#fff}
.btn-outline{border-color:var(--brand-line);color:var(--brand);background:var(--card)}
.btn-ghost{border-color:var(--line);color:var(--text);background:var(--card)}
.btn-white{background:#fff;color:#7c3aed}
.btn:hover{filter:brightness(.97)}
.btn[disabled]{opacity:.55;cursor:default}
.btn.copied{color:var(--ok);border-color:var(--ok)}
.chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font-size:14px;font-weight:600}
.chip.active{background:var(--brand);border-color:var(--brand);color:#fff}
.chip.soft.active{background:var(--brand-soft);border-color:var(--brand-line);color:var(--brand)}
.chip-sm{min-height:30px;padding:4px 13px;font-size:13px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.tab{height:30px;padding:0 12px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);font-size:13.5px;font-weight:600}
.tab.active{background:var(--brand-soft);color:var(--brand)}
.badge{font-size:12px;font-weight:600;color:var(--muted);background:var(--soft);padding:3px 9px;border-radius:20px}
.badge-brand{color:var(--brand)}
.badge-pink{background:var(--pink);color:#fff;font-weight:700}
.tag{display:inline-block;font-size:13px;font-weight:600;color:var(--muted);background:var(--soft);padding:6px 11px;border-radius:var(--r-sm)}

/* --------------------------------------------------------------- inputs -- */
.field{width:100%;min-height:46px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--text);outline:none}
.field:focus{border-color:var(--brand-line)}
.field-sm{min-height:40px}
textarea.field{padding:12px;min-height:84px;resize:vertical}
.searchbox{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-md);padding:0 14px;min-height:42px;background:var(--card)}
.searchbox input{flex:1;min-width:0;border:0;background:transparent;outline:none;color:var(--text);font-size:15px}
.searchbox button{border:0;background:transparent;color:var(--muted);display:grid;place-items:center;padding:0}
.label{display:block;font-size:13.5px;font-weight:600;color:var(--muted);margin-bottom:8px}

/* ---------------------------------------------------------------- cards -- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(14px,2.4vw,20px)}
.card-lg{padding:clamp(18px,2.6vw,26px) clamp(14px,2.4vw,24px)}
.card-flat{padding:0;overflow:hidden}
.card-head{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.card-title{font-size:16px;font-weight:700}
.card-sub{font-size:13.5px;color:var(--muted);margin-top:2px}
.section-title{font-size:20px;font-weight:800}
.view-all{font-size:13.5px;font-weight:600}

/* ------------------------------------------------------ hero + generator -- */
.hero{position:relative;padding-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(390px,1fr));gap:28px;align-items:start}
.hero h1{font-size:clamp(30px,3.4vw,42px);font-weight:800}
.hero .accent{color:var(--pink)}
.lead{margin-top:14px;color:var(--muted);max-width:460px}
.gen-card{margin-top:22px;box-shadow:var(--shadow)}
.gen-row{display:flex;gap:10px}
.gen-row .field{flex:1;min-width:0}
.deco{position:absolute;animation:floaty 7s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(6deg)}}
.result-list{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.result-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.result-sec{padding:12px 18px 4px;font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.result-row{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--line)}
.result-name{flex:1;min-width:0;font-size:17px;font-weight:400;overflow-wrap:anywhere}
.result-tag{font-size:12px;color:var(--muted);flex:none}
.fav-btn{width:32px;height:32px;display:grid;place-items:center;border:0;background:transparent;color:var(--muted)}
.fav-btn.on{color:var(--pink)}
.load-more{width:100%;min-height:46px;border:0;background:var(--card);color:var(--brand);font-size:14px;font-weight:700}
.gen-empty{padding:26px 18px;text-align:center;color:var(--muted);font-size:15px}
.is-busy{opacity:.55;pointer-events:none}

/* ---------------------------------------------------------------- tiles -- */
.style-tile{flex:1 1 auto;min-width:64px;max-width:160px;padding:6px 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:74px;border:1px solid var(--line);background:var(--card);border-radius:12px;color:var(--text)}
.style-tile span:first-child{font-size:19px;overflow-wrap:anywhere}.style-tile span:last-child{font-size:12.5px;color:var(--muted);}
.cat-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:112px;border-radius:14px;color:var(--text);border:1px solid var(--line)}
.cat-tile .emoji{font-size:30px;line-height:1}
.cat-tile .name{font-size:14px;font-weight:700}
.cat-tile .sub{font-size:12px;color:var(--muted)}
.trend-card{flex:1 1 auto;max-width:420px;min-width:0;border:1px solid var(--line);border-radius:12px;padding:14px}
.trend-card .name{font-size:18px;font-weight:400;overflow-wrap:anywhere}
.hits{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:#f97316}
.sym-btn{flex:1 1 auto;min-width:44px;max-width:132px;padding:0 6px;min-height:42px;display:grid;place-items:center;border:1px solid var(--line);background:var(--card);border-radius:9px;font-size:17px;color:var(--text)}
.sym-btn.on{background:var(--brand-soft);border-color:var(--brand-line)}
.promo{border-radius:var(--r-lg);padding:26px 22px;background:linear-gradient(150deg,#8b5cf6,#c026d3 55%,#ec4899);color:#fff;display:flex;flex-direction:column;align-items:center;text-align:center}
.preview-box{margin-top:14px;border:1px dashed var(--line);border-radius:12px;padding:16px;text-align:center}
.preview-box .val{font-size:22px;font-weight:400;margin-top:6px;overflow-wrap:anywhere}
.random-box{flex:1;margin-top:14px;background:var(--soft);border-radius:12px;min-height:120px;display:grid;place-items:center;padding:20px;font-size:26px;font-weight:400;text-align:center;overflow-wrap:anywhere}
.fav-pill{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:var(--r-md);padding:9px 13px;font-size:15px;font-weight:600;max-width:100%}
.fav-pill span{font-weight:400;min-width:0;overflow-wrap:anywhere}
.emoji-card{flex:1 1 auto;min-width:88px;max-width:240px;text-align:center;border:1px solid var(--line);background:var(--card);border-radius:13px;padding:14px 10px;color:var(--text);display:flex;flex-direction:column;gap:7px;align-items:center}
.emoji-card.copied{background:var(--brand-soft);border-color:var(--brand-line)}
.emoji-card .rank{font-size:12px;font-weight:700;color:var(--muted)}.emoji-card .art{font-size:19px;line-height:1.35;overflow-wrap:anywhere}
.emoji-card .meta{font-size:12.5px;color:var(--muted)}

/* -------------------------------------------------------- community box -- */
.comm-list{display:flex;flex-wrap:wrap;gap:8px}
.comm-chip{flex:1 1 auto;justify-content:space-between;max-width:420px;min-width:0;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:var(--card);padding:7px 12px;font-size:15px;max-width:100%}
.comm-chip .txt{min-width:0;overflow-wrap:anywhere;font-weight:400!important}
.comm-chip .up{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:700}
.comm-chip .up.on{color:var(--brand)}
.comm-meta{font-size:12.5px;color:var(--muted)}
.comm-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.comm-form .field{flex:1;min-width:200px}
.note{font-size:13.5px;color:var(--muted);margin-top:8px}
.note.err{color:var(--bad)}
.note.ok{color:var(--ok)}

/* --------------------------------------------------------------- tables -- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.data{min-width:640px}
.data th{text-align:left;font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:12px 16px;background:var(--soft)}
.data td{padding:11px 16px;font-size:15px;border-top:1px solid var(--line)}
.data tbody tr:nth-child(even){background:var(--soft)}
.data .num{text-align:right;font-variant-numeric:tabular-nums}
.data .rank{font-size:14px;font-weight:700;color:var(--muted)}
.data .name{font-size:16px;font-weight:700}
.up{color:var(--ok);font-weight:700}
.down{color:var(--bad);font-weight:700}
.warn{color:var(--warn);font-weight:700}

/* ------------------------------------------------------ seo / faq / rate -- */
.check{display:flex;gap:9px;align-items:flex-start;font-size:15px}
.step{display:flex;gap:12px}
.step .n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:13px;font-weight:700}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;align-items:center;gap:12px;padding:13px 0;border:0;background:transparent;color:var(--text);text-align:left;font-size:15px;font-weight:600}
.faq-q .sign{margin-left:auto;font-size:19px;color:var(--muted);line-height:1}
.faq-a{font-size:14.5px;color:var(--muted);padding:0 0 14px;display:none}
.faq-item.open .faq-a{display:block}
.rating{text-align:center}
.rate-btns{margin-top:16px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.rate-btn{display:flex;align-items:center;gap:9px;min-height:46px;padding:8px 20px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:12px;font-size:15px;font-weight:700}
.rate-btn .n{color:var(--muted);font-weight:600}
.rate-btn.on-up{background:#e8f8ec;border-color:#bde5c8;color:var(--ok)}
.rate-btn.on-down{background:#fff1f1;border-color:#f5c9c9;color:var(--bad)}
[data-theme=dark] .rate-btn.on-up{background:#132a1b;border-color:#245c34}
[data-theme=dark] .rate-btn.on-down{background:#2c1518;border-color:#5e2b30}
.link-grid{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 20px;text-align:left;max-width:1000px;margin-left:auto;margin-right:auto}
.link-grid a{font-size:14.5px;color:var(--muted)}

/* ------------------------------------------------------------ blog list -- */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--muted);padding:18px 0 0}
.blog-hero{padding:20px 0 26px}
.blog-hero h1{font-size:clamp(28px,3.2vw,40px);font-weight:800}
.blog-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}
.feat{border-radius:var(--r-xl);overflow:hidden;margin-bottom:26px}
.feat-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.thumb{position:relative;display:block;overflow:hidden;background:var(--soft)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;opacity:.5}
.feat .thumb{min-height:250px;background:linear-gradient(150deg,#8b5cf6,#c026d3 55%,#ec4899)}
.feat-body{padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:12px;justify-content:center}
.feat-body h2{font-size:clamp(22px,2.4vw,30px);font-weight:800}
.feat-body h2 a{color:var(--text)}
.feat-body h2 a:hover{color:var(--brand)}
.post-row{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;padding:14px}
.post-row .thumb{border-radius:12px;min-height:140px}
.post-body{display:flex;flex-direction:column;gap:9px;min-width:0}
.post-title{font-size:19px;font-weight:700;color:var(--text);line-height:1.3}
.post-title:hover{color:var(--brand)}
.post-excerpt{font-size:15.5px;color:var(--muted)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13.5px;color:var(--muted)}
.avatar{width:24px;height:24px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--text);overflow:hidden}
.avatar img{border-radius:50%}
.avatar-lg{width:52px;height:52px;font-size:18px;background:linear-gradient(150deg,#a855f7,#ec4899);color:#fff}
.pagination{display:flex;justify-content:center;gap:8px;padding-top:8px;flex-wrap:wrap}
.pagination .page-numbers{min-width:40px;min-height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font-size:14.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.pagination .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff}
.side{display:flex;flex-direction:column;gap:16px;position:sticky;top:76px}
.pop-item{display:flex;gap:12px;align-items:flex-start;color:var(--text)}
.pop-item .n{flex:none;font-size:18px;font-weight:800;color:var(--line);width:24px}
.pop-item .t{font-size:15px;font-weight:600;line-height:1.35;display:block}
.pop-item .m{font-size:12.5px;color:var(--muted);margin-top:3px;display:block}

/* -------------------------------------------------------------- article -- */
.art-head{padding:22px 0 24px;max-width:820px}
.art-head h1{font-size:clamp(28px,3.4vw,42px);font-weight:800;margin-top:14px}
.art-hero{position:relative;border-radius:var(--r-xl);overflow:hidden;max-height:clamp(200px,32vw,380px);background:linear-gradient(150deg,#8b5cf6,#c026d3 55%,#ec4899);display:grid;place-items:center;margin-bottom:30px}
.art-hero img{width:100%;object-fit:cover}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:start}
.art-grid.no-side{grid-template-columns:minmax(0,1fr)}
.quote,blockquote{margin:0;border-left:3px solid var(--brand);padding:6px 0 6px 16px;font-size:18px;font-weight:600}
.cta-box{background:var(--soft);border-radius:14px;padding:18px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.author-box{margin-top:20px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.toc{position:sticky;top:76px;display:flex;flex-direction:column;gap:16px}
.toc h3{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.toc-list{margin-top:12px;display:flex;flex-direction:column;gap:9px}
.toc-list a{font-size:14.5px;font-weight:600;color:var(--muted);line-height:1.4}
.toc-list a:hover,.toc-list a.active{color:var(--brand)}
.related-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;color:var(--text);display:flex;flex-direction:column;background:var(--card)}
.related-card .thumb{height:110px}
.related-card .body{padding:14px;display:flex;flex-direction:column;gap:6px}
.related-card .cat{font-size:12px;font-weight:700;color:var(--brand)}
.related-card .t{font-size:16px;font-weight:700;line-height:1.35}
.related-card .m{font-size:13px;color:var(--muted)}

/* ------------------------------------------------------- editor content -- */
.prose{max-width:820px;padding:clamp(18px,3vw,28px)}
.prose>*+*{margin-top:22px}
.prose h2{font-size:26px;font-weight:800;scroll-margin-top:80px}
.prose h3{font-size:20px;font-weight:700;scroll-margin-top:80px}
.prose h4{font-size:17px;font-weight:700}
.prose p,.prose li{font-size:17px;color:var(--text)}
.prose ul,.prose ol{padding-left:22px}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li+li{margin-top:8px}
.prose img,.prose figure{border-radius:12px}
.prose figure{margin:0}
.prose figcaption,.wp-caption-text{font-size:13.5px;color:var(--muted);margin-top:8px;text-align:center}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose code,.prose kbd{font-family:var(--mono);font-size:.9em;background:var(--soft);padding:2px 6px;border-radius:6px}
.prose pre{font-family:var(--mono);font-size:14px;background:var(--soft);padding:16px;border-radius:12px;overflow-x:auto}
.prose pre code{background:none;padding:0}
.prose table{display:block;overflow-x:auto;white-space:nowrap}
.prose th,.prose td{border:1px solid var(--line);padding:10px 14px;font-size:15px;text-align:left}
.prose th{background:var(--soft);font-weight:700}
.prose hr{border:0;border-top:1px solid var(--line)}
.prose .intro{font-size:19px;line-height:1.55}
.alignleft{float:left;margin:0 22px 18px 0}
.alignright{float:right;margin:0 0 18px 22px}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.alignwide{max-width:min(1100px,92vw);margin-left:50%;transform:translateX(-50%)}
.alignfull{max-width:100vw;margin-left:50%;transform:translateX(-50%)}
.wp-block-image,.wp-block-embed{margin:0}
.sticky .post-title::before{content:'★ ';color:var(--pink)}

/* ------------------------------------------------------------- comments -- */
.comments{margin-top:26px}
.comment-list li{padding:16px 0;border-top:1px solid var(--line)}
.comment-list .children{padding-left:clamp(14px,4vw,38px)}
.comment-meta{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--muted)}
.comment-body p{font-size:16px;margin-top:8px}
.comment-form{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.comment-form label{font-size:13.5px;font-weight:600;color:var(--muted);display:block;margin-bottom:6px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;min-height:46px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--text);outline:none}
.comment-form .submit{min-height:46px;padding:10px 22px;border:0;border-radius:var(--r-md);background:var(--brand);color:#fff;font-size:15px;font-weight:700}
.comment-form-cookies-consent{display:flex;gap:8px;align-items:center}
.comment-form-cookies-consent label{margin:0}

/* --------------------------------------------------- footer + mobile nav -- */
.site-footer{background:#12141d;color:#c7cbd8;padding:44px 0 26px;margin-top:auto}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px}
.site-footer h4{font-size:15px;font-weight:700;color:#fff}
.site-footer p{font-size:14px;color:#8d94a8}
.site-footer a{font-size:14px;color:#8d94a8}
.site-footer a:hover{color:#fff}
.footer-links{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.socials{display:flex;gap:14px;margin-top:16px}
.copyright{margin-top:26px;padding-top:18px;border-top:1px solid #232838;text-align:center;font-size:13.5px;color:#78809a}
.mobnav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;grid-template-columns:repeat(5,1fr);align-items:end;background:var(--card);border-top:1px solid var(--line);padding:8px 4px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(15,18,40,.08)}
.mobnav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:12px;font-weight:600;padding:4px 0}
.mobnav a.active{color:var(--brand)}
.mobnav a.create{color:#f43f5e;font-weight:700;padding:0 0 4px;gap:4px}
.mobnav .create-fab{width:52px;height:52px;margin-top:-24px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,#fb7185,#f43f5e);box-shadow:0 6px 16px rgba(244,63,94,.4);border:4px solid var(--card)}
.fab-top{position:fixed;right:max(15px,calc((100vw - 1300px)/2));bottom:96px;z-index:55;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--text);display:grid;place-items:center;box-shadow:0 6px 18px rgba(15,18,40,.12)}

/* ----------------------------------------------------------- responsive -- */
@media(min-width:901px){.fab-top{display:none}}
@media(max-width:980px){
  .blog-grid,.art-grid{grid-template-columns:minmax(0,1fr)}
  .side,.toc{position:static}
}
@media(max-width:900px){
  .nav{display:none}
  .mobnav{display:grid}
  .page{padding-bottom:96px}
  .alignwide,.alignfull{max-width:100%;margin-left:0;transform:none}
}
@media(max-width:640px){
  .hero{grid-template-columns:minmax(0,1fr);padding-top:28px}
  .deco{display:none}
  .post-row,.feat-grid{grid-template-columns:minmax(0,1fr)}
  .post-row .thumb{min-height:170px}
  .result-row,.result-head{padding-left:14px;padding-right:14px}
  .prose h2{font-size:22px}
  .prose .intro{font-size:17px}
  .alignleft,.alignright{float:none;margin:0}
}
@media(max-width:420px){
  .rate-btn{width:100%;justify-content:center}
  .gen-row{flex-wrap:wrap}
  .gen-row .btn{width:100%}
}

/* Dòng thứ hai của H1 hero xuống dòng bằng CSS thay cho <br>.
   Giữ khoảng trắng thật trong chữ nên máy đọc ra "Nickname in Seconds",
   không dính thành "Nicknamein Seconds" như khi dùng <br>. */
.hero h1 .hero-line{display:block}

/* Copy chips in article body. */
.cp-grid{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.cp-chip{flex:1 1 auto;justify-content:center;max-width:260px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;
  border:1px solid rgba(128,128,150,.28);border-radius:10px;background:rgba(255,255,255,.05);
  color:inherit;font-size:17px;line-height:1.5;cursor:pointer;min-width:0;overflow-wrap:anywhere}
.cp-chip .c{font-size:11px;opacity:.6;padding:1px 6px;border-radius:20px;background:rgba(128,128,150,.18);flex:none}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 22px;border-radius:11px;contain:inline-size;width:100%;max-width:100%}
.tbl-wrap table{margin:0;min-width:520px}
.tbl-wrap tr.hi td{font-weight:600}

/* item-tu-do-20260913: lưới chứa item copy -> flex-wrap, item tự co giãn có trần; chữ item không đậm */
.grid:has(> .emoji-card),.grid-fill:has(> .emoji-card),.grid:has(> .style-tile),.grid:has(> .sym-btn),.grid:has(> .trend-card),.grid:has(> .btn[data-copy]){display:flex;flex-wrap:wrap}
.grid[style*="--min:78px"] > .emoji-card{min-width:56px;justify-content:center}
.grid[style*="--min:180px"] > .emoji-card{max-width:420px}
.grid > .btn[data-copy]{flex:1 1 auto;max-width:420px;min-width:0;white-space:normal}
.grid > .btn[data-copy] > span:first-child{font-weight:400;overflow:visible!important;overflow-wrap:anywhere;text-align:left}
.chip-row > .chip[data-copy]{font-weight:400;flex:1 1 auto;justify-content:center;max-width:160px}