/*
Theme Name: Web Core
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.1
Text Domain: webcore
*/

/* ============================================================
   Design tokens
   ============================================================ */
:root{
  --bg:#FBFAF4;
  --card:#ffffff;
  --ink:#17171F;
  --muted:#55554E;
  --soft:#9A9A90;
  --faint:#C9C9C0;
  --line:#E6E5DC;
  --line-soft:#F1EFE4;
  --accent:#FF6A4D;
  --accent-dark:#E8482B;
  --green:#1F8A5B;
  --mint:#A6E3CB;
  --cream:#F4ECD6;
  --yellow:#F6F0B4;
  --maxw:1180px;
  --font-head:'Space Grotesk',sans-serif;
  --font-body:'Manrope',system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
a{color:var(--accent-dark);text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3{font-family:var(--font-head);color:var(--ink)}
img{max-width:100%;height:auto}
input::placeholder{color:#B4B4AB}
button{font-family:inherit}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:8px;top:8px;background:#fff;padding:8px 14px;border-radius:8px;z-index:200}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:72px 0}
.section--alt{background:var(--card);border-top:1px solid var(--line)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,250,244,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-header .inner{max-width:var(--maxw);margin:0 auto;padding:13px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:700;font-size:19px;color:var(--ink)}
.brand .logo{width:30px;height:30px;background:var(--ink);color:#fff;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-size:14px;overflow:hidden}
.brand .logo img{width:100%;height:100%;object-fit:cover}
.nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.nav ul{display:flex;align-items:center;gap:6px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.nav a{color:var(--muted);font-weight:600;font-size:14px;padding:8px 12px;border-radius:9px;display:inline-block}
.nav a:hover{color:var(--ink)}
.nav .current-menu-item>a,.nav .is-active{color:var(--ink);font-weight:700;background:var(--line-soft)}
.nav .cta{background:var(--accent);color:#fff;padding:9px 16px;border-radius:10px;font-weight:600;margin-left:6px}
.nav .cta:hover{color:#fff;opacity:.92}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:9px;width:42px;height:40px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{display:block;width:18px;height:2px;background:var(--ink);position:relative;transition:.2s}
.nav-toggle span::before,.nav-toggle span::after{content:'';position:absolute;left:0}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

/* ---------- Buttons ---------- */
.btn{cursor:pointer;font-size:15px;font-weight:600;border-radius:12px;padding:0 18px;height:52px;border:1px solid var(--line);background:#fff;color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.btn--dark{border:1.5px solid var(--ink)}
.btn--dark:hover{background:var(--ink);color:#fff}
.btn--ghost{background:var(--bg);color:var(--muted)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink)}
.pill{cursor:pointer;font-size:13px;font-weight:700;padding:7px 13px;border:1px solid var(--line);background:#fff;color:var(--green);border-radius:999px}
.pill:hover{border-color:var(--green)}

/* ---------- Hero / Tool ---------- */
.hero{position:relative;overflow:hidden;background:var(--bg)}
.hero .container{position:relative;z-index:2;max-width:960px;padding-top:26px;padding-bottom:44px}
.tool-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 12px 34px rgba(23,23,31,.07);padding:22px}
.tool-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.tool-head h1{font-weight:700;font-size:clamp(24px,3.4vw,34px);line-height:1.1;margin:0}
.badge{flex-shrink:0;font-size:13px;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--line);padding:5px 12px;border-radius:999px}
.input-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.input-name{flex:1;min-width:220px;font-size:18px;font-family:var(--font-head);padding:14px 16px;border:1.5px solid var(--ink);border-radius:12px;outline:none;color:var(--ink);background:#fff}
.results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}

/* clickable copyable card */
.copy-card{cursor:pointer;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;overflow:hidden;width:100%}
.copy-card:hover{border-color:var(--ink);background:#fff}
.copy-card .label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft)}
.copy-card .value{font-size:20px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Background (memphis, pure CSS) ---------- */
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:1}
.blob{position:absolute;display:block}
.blob--mint-tl{top:-44px;left:-46px;width:250px;height:210px;background:var(--mint);border-radius:60% 40% 55% 45%/55% 60% 40% 45%}
.blob--mint-br{bottom:-70px;right:-50px;width:340px;height:280px;background:var(--mint);border-radius:52% 48% 40% 60%/45% 55% 45% 55%}
.blob--yellow{bottom:-90px;left:26%;width:380px;height:200px;background:var(--yellow);border-radius:50% 50% 44% 56%/60% 60% 40% 40%}
.blob--cream{top:22%;right:6%;width:230px;height:230px;background:var(--cream);border-radius:58% 42% 50% 50%/50% 55% 45% 50%}
.line{position:absolute;display:block;border:2px solid var(--ink);border-radius:50%}
.line--1{top:-520px;left:8%;width:920px;height:920px;opacity:.55}
.line--2{top:-360px;right:-420px;width:1120px;height:1120px;opacity:.45}
.line--3{bottom:-470px;left:34%;width:760px;height:760px;opacity:.4}
.dots{position:absolute;left:4%;bottom:16%;width:150px;height:150px}
.dots .dot{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--ink)}

/* ---------- Stats strip ---------- */
.stats{background:var(--ink);color:#fff}
.stats .inner{max-width:var(--maxw);margin:0 auto;padding:34px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{text-align:center}
.stat .num{font-family:var(--font-head);font-weight:700;font-size:30px;line-height:1}
.stat .lbl{margin-top:8px;font-size:13px;font-weight:600;color:#A7A7A0}

/* ---------- Section headers ---------- */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.section-title{font-weight:700;font-size:32px;margin:0 0 8px}
.section-sub{margin:0;color:var(--soft);font-size:15px}
.section-link{font-weight:600;font-size:14px;color:var(--accent)}
.section-note{font-family:var(--font-head);font-size:13px;color:#A7A7A0}

/* ---------- Trends ---------- */
.grid-trends{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px}
.trend-card{cursor:pointer;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 16px;display:flex;flex-direction:column;gap:14px;width:100%}
.trend-card:hover{border-color:var(--ink)}
.trend-top{display:flex;align-items:center;justify-content:space-between}
.trend-rank{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--soft)}
.trend-new{font-size:12px;font-weight:700;color:var(--green)}
.trend-name{font-size:20px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trend-meta{font-size:13px;color:var(--soft)}

/* ---------- Podium ---------- */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.podium-card{cursor:pointer;background:#fff;border:2px solid var(--line);border-radius:18px;padding:22px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;width:100%}
.podium-card:hover{box-shadow:0 8px 22px rgba(23,23,31,.08)}
.podium-medal{width:40px;height:40px;border-radius:50%;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:17px}
.podium-name{font-size:22px;color:var(--ink);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.podium-copies{color:#fff;font-weight:700;font-size:13px;padding:5px 14px;border-radius:999px}
.podium-hint{text-align:center;color:var(--soft);font-size:13px;margin:0 0 22px}
.podium-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.plist-row{cursor:pointer;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;align-items:center;gap:12px;width:100%}
.plist-row:hover{border-color:var(--ink);background:#fff}
.plist-rank{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--soft);min-width:22px}
.plist-name{flex:1;font-size:17px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plist-copies{font-size:12px;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.04em}

/* ---------- Pretty names ---------- */
.grid-pretty{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.pretty-card{cursor:pointer;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.pretty-card:hover{border-color:var(--ink)}
.pretty-name{font-size:19px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pretty-copy{font-size:12px;font-weight:700;color:var(--accent);flex-shrink:0}

/* ---------- Searched ---------- */
.grid-searched{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.search-row{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:13px 16px;display:flex;align-items:center;gap:14px}
.search-rank{font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--faint);min-width:24px}
.search-name{flex:1;font-size:16px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-count{font-size:13px;font-weight:700;color:var(--green)}

/* ---------- Emoji row (from engine) ---------- */
.emoji-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.emoji-chip{cursor:pointer;font-size:22px;line-height:1;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.emoji-chip:hover{border-color:var(--ink);background:#fff}

/* ---------- Prose / content ---------- */
/* Content column matches the header/footer container exactly (same 1180px + 24px
   gutter) so body text lines up with the logo/menu instead of sitting inset. */
.prose,.entry-content{max-width:var(--maxw);margin:0 auto;font-size:17px;line-height:1.78;color:#3E3E38}
.prose h2,.entry-content h2{font-weight:700;font-size:25px;margin:34px 0 14px;font-family:var(--font-head);color:var(--ink)}
.prose h2:first-child,.entry-content h2:first-child{margin-top:0}
.prose h3,.entry-content h3{font-weight:600;font-size:21px;margin:30px 0 12px;font-family:var(--font-head);color:var(--ink)}
.entry-content h4{font-family:var(--font-head);font-size:18px;margin:24px 0 10px}
.prose p,.entry-content p{margin:0 0 20px}
.prose ul,.prose ol,.entry-content ul,.entry-content ol{margin:0 0 20px;padding-left:22px}
.prose li,.entry-content li{margin-bottom:8px}
.prose blockquote,.entry-content blockquote{margin:24px 0;padding:16px 22px;border-left:4px solid var(--accent);background:#fff;border-radius:0 12px 12px 0;font-size:17px;color:var(--ink)}
.prose strong,.entry-content strong{color:var(--ink)}
.entry-content img{border-radius:12px}
.entry-content figure{margin:24px 0}
.entry-content figure.aligncenter{text-align:center}
.entry-content .wp-element-caption,.entry-content figcaption{font-size:13px;color:var(--soft);text-align:center;margin-top:8px}
.aligncenter{margin-left:auto;margin-right:auto;display:block}
.alignleft{float:left;margin:6px 22px 12px 0}
.alignright{float:right;margin:6px 0 12px 22px}
.entry-content .wp-block-latest-posts{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.entry-content .wp-block-latest-posts li{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px;margin:0}
.entry-content .wp-block-latest-posts a{font-family:var(--font-head);font-weight:600}
.entry-content .wp-block-table td,.entry-content .wp-block-table th{border:1px solid var(--line);padding:8px 12px}
.entry-content>*{overflow-wrap:break-word}

/* symbol lines: tap to copy (progressive enhancement) */
.sym-copy{cursor:pointer;border-radius:4px;padding:0 1px;transition:background .12s}
.sym-copy:hover{background:var(--yellow);color:var(--ink)}
/* combo chips: copy the whole item at once */
.sym-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.sym-chips .sym-copy{border:1px solid var(--line);background:var(--bg);padding:8px 12px;border-radius:10px;font-size:18px;line-height:1.3;white-space:nowrap}
.sym-chips .sym-copy:hover{border-color:var(--ink);background:#fff}
/* blank-character (tên trống) tool */
.blank-tool{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 30px rgba(23,23,31,.06);padding:20px;margin:6px 0 26px}
.blank-games{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.blank-game{cursor:pointer;font-size:14px;font-weight:600;padding:9px 15px;border:1.5px solid var(--line);background:var(--bg);color:var(--muted);border-radius:999px}
.blank-game.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.blank-preview{min-height:40px;border:1.5px dashed var(--line);border-radius:12px;display:flex;align-items:center;gap:5px;padding:8px 12px;margin-bottom:16px;flex-wrap:wrap;background:var(--bg)}
.blank-preview .cell{width:16px;height:22px;border-radius:4px;background:var(--mint);flex:0 0 auto}
.blank-counter{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:16px}
.blank-btn{cursor:pointer;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;font-size:26px;font-weight:700;color:var(--ink);display:flex;align-items:center;justify-content:center;line-height:1}
.blank-btn:hover{background:var(--ink);color:#fff}
.blank-count{font-family:var(--font-head);font-weight:700;font-size:30px;color:var(--ink);min-width:120px;text-align:center}
.blank-count small{display:block;font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--soft)}
.blank-copy{width:100%;height:54px}
.blank-quick{margin-top:14px;font-size:14px;color:var(--soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.blank-quick button{cursor:pointer;font-weight:700;min-width:42px;height:38px;padding:0 12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:10px}
.blank-quick button:hover{border-color:var(--ink)}
/* numbered blank-name picker grid */
.blank-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px;margin:0 0 10px}
.blank-chip{cursor:pointer;height:46px;border:1px solid var(--line);background:var(--bg);border-radius:10px;font-weight:700;color:var(--ink);font-size:15px}
.blank-chip:hover{border-color:var(--ink);background:#fff}

/* big call-to-action banner */
.cta-banner{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--mint),var(--cream));border:1px solid var(--line);border-radius:20px;padding:30px 28px;margin:26px 0;text-align:center}
.cta-banner h3{font-family:var(--font-head);font-weight:700;font-size:clamp(20px,3vw,26px);margin:0 0 8px;color:var(--ink)}
.cta-banner p{margin:0 auto 18px;max-width:520px;color:var(--muted);font-size:15px}
.cta-banner .cta-go{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;font-weight:700;font-size:16px;padding:14px 28px;border-radius:12px;box-shadow:0 8px 20px rgba(255,106,77,.3)}
.cta-banner .cta-go:hover{color:#fff;opacity:.94}

/* table of contents */
.wc-toc{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:6px auto 26px}
.wc-toc>strong{display:block;font-family:var(--font-head);margin-bottom:8px}
.wc-toc ul{margin:0;padding-left:20px;columns:2;column-gap:26px}
.wc-toc li{margin:4px 0}
@media(max-width:600px){.wc-toc ul{columns:1}}

/* ---------- Front page ---------- */
.hero .container{max-width:var(--maxw)}
.hp-title{font-family:var(--font-head);font-weight:700;font-size:clamp(26px,3.6vw,38px);line-height:1.12;margin:8px auto 22px;max-width:100%}
.hp-content{max-width:100%}
.hp-content>p,.hp-content>h2,.hp-content>h3,.hp-content>ol,.hp-content>ul,.hp-content>figure,.hp-content>.wp-block-image,.hp-content>.wp-block-latest-posts{max-width:100%;margin-left:auto;margin-right:auto}
.hp-content>p{margin:0 0 20px;font-size:16px;line-height:1.7;color:#3E3E38;overflow-wrap:break-word;word-break:break-word}
.hp-content>h2{font-family:var(--font-head);font-weight:700;font-size:clamp(22px,3vw,28px);margin:46px auto 16px}
.hp-content>h3{font-family:var(--font-head);font-weight:600;font-size:21px;margin:30px auto 12px}
.hp-content .tool-card{max-width:100%;margin:6px auto 30px}
.hp-content .grid-trends,.hp-content .podium,.hp-content .podium-list,.hp-content .grid-pretty{margin:0 auto 30px}
.hp-content .wp-block-image{margin:26px auto;text-align:center}
.hp-content .upd-date{font-weight:700;color:var(--accent-dark)}

/* ---------- Blog cards ---------- */
.grid-blog{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.blog-card{display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:16px;overflow:hidden;color:var(--ink)}
.blog-card:hover{border-color:var(--ink);color:var(--ink)}
.blog-thumb{height:120px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.blog-thumb img{width:100%;height:100%;object-fit:cover}
.blog-thumb span{font-family:var(--font-head);font-weight:700;font-size:34px;color:rgba(23,23,31,.22)}
.blog-body{padding:18px}
.blog-cat{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.blog-title{font-weight:600;font-size:18px;line-height:1.3;margin:0 0 8px}
.blog-excerpt{font-size:14px;line-height:1.6;color:var(--soft);margin:0 0 12px}
.blog-read{font-size:13px;font-weight:600;color:var(--soft)}

/* ---------- Blog list page ---------- */
.crumb{font-size:13px;color:var(--soft);font-weight:600;margin-bottom:14px}
.crumb a{color:var(--soft)}
.page-head h1{font-weight:700;font-size:clamp(32px,4.6vw,46px);line-height:1.06;margin:0 0 12px}
.page-head p{font-size:17px;line-height:1.6;color:var(--muted);margin:0;max-width:620px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0 4px}
.filter-chip{cursor:pointer;font-size:14px;font-weight:600;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--muted);text-decoration:none}
.filter-chip:hover{border-color:var(--ink)}
.filter-chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.featured{display:grid;grid-template-columns:1.15fr 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;color:var(--ink);margin:8px 0 24px}
.featured:hover{border-color:var(--ink);color:var(--ink)}
.featured-thumb{min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.featured-thumb img{width:100%;height:100%;object-fit:cover}
.featured-thumb span{font-family:var(--font-head);font-weight:700;font-size:64px;color:rgba(23,23,31,.2)}
.featured-body{padding:34px;display:flex;flex-direction:column;justify-content:center}
.featured-body h2{font-weight:700;font-size:28px;line-height:1.15;margin:0 0 12px}
.featured-body p{font-size:16px;line-height:1.65;color:var(--muted);margin:0 0 20px}
.post-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.post-item{display:flex;gap:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;color:var(--ink);align-items:center}
.post-item:hover{border-color:var(--ink);color:var(--ink)}
.post-thumb{flex-shrink:0;width:96px;height:96px;border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.post-thumb img{width:100%;height:100%;object-fit:cover}
.post-thumb span{font-family:var(--font-head);font-weight:700;font-size:32px;color:rgba(23,23,31,.22)}
.post-info{flex:1;min-width:0}
.post-info h3{font-weight:600;font-size:17px;line-height:1.28;margin:0 0 8px}
.post-meta{font-size:12px;color:var(--soft);font-weight:600}
.post-empty{text-align:center;color:var(--soft);padding:40px 0}

/* pagination */
.pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:40px 0 0}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);font-weight:600}
.pagination .page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.pagination .page-numbers:hover{border-color:var(--ink)}

/* ---------- Article detail ---------- */
.progress-bar{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:60;width:0;transition:width .1s linear}
.post-header{max-width:760px;margin:0 auto;padding:40px 24px 0}
.post-header .cat{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.post-header h1{font-weight:700;font-size:clamp(30px,4.4vw,44px);line-height:1.08;margin:0 0 18px}
.author{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid var(--line)}
.author .avatar{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700}
.author .who{font-size:14px;color:var(--muted)}
.author .who strong{color:var(--ink)}
.cover{max-width:760px;margin:24px auto 0;padding:0 24px}
.cover .frame{height:280px;border-radius:18px;background:var(--mint);display:flex;align-items:center;justify-content:center;overflow:hidden}
.cover .frame img{width:100%;height:100%;object-fit:cover}
.cover .frame span{font-family:var(--font-head);font-weight:700;font-size:80px;color:rgba(23,23,31,.2)}
.post-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:36px;padding-top:26px;border-top:1px solid var(--line)}

/* ---------- Page (generic) ---------- */
.page-wrap{padding:44px 0 72px}
.entry-content .page-h1,.page-h1{font-family:var(--font-head);font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.12;margin:0 0 22px}
.page-wrap--tool{padding-top:26px}

/* ---------- Search form ---------- */
.search-form{display:flex;gap:10px;flex-wrap:wrap}
.search-form label{flex:1;min-width:200px}
.search-form .search-field{width:100%;font-size:16px;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;outline:none}
.search-form .search-field:focus{border-color:var(--ink)}
.search-form .search-submit{cursor:pointer;font-weight:600;border:1.5px solid var(--ink);background:var(--ink);color:#fff;border-radius:12px;padding:0 20px;height:50px}

/* ---------- Community / contributions panel ---------- */
.ugc{margin-top:26px;border-top:1px solid var(--line);padding-top:24px}
.ugc[hidden]{display:none}
.ugc-h{font-family:var(--font-head);font-size:18px;font-weight:700;margin:0 0 14px}
.ugc-loading{color:var(--soft);font-size:14px;padding:10px 0}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.ugc-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ugc-chip .nk{cursor:pointer;flex:1;min-width:0;font-size:18px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;border:0;text-align:left;padding:0}
.ugc-chip .lk{cursor:pointer;flex-shrink:0;font-size:12px;font-weight:700;color:var(--green);background:none;border:0;padding:4px 6px;border-radius:8px}
.ugc-chip .lk:hover{background:var(--line-soft)}
.ugc-block{margin-top:22px}
.ugc-more{margin:16px auto 0;display:block}
.ugc-empty{color:var(--soft);font-size:14px;padding:8px 0}
.ugc-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.ugc-form input{flex:1;min-width:200px;font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;outline:none}
.ugc-form input:focus{border-color:var(--ink)}
.ugc-name{color:var(--accent-dark)}
.ugc-latest .meta{font-size:11px;color:var(--soft);display:block;margin-top:2px}
.win-toggle{display:inline-flex;gap:6px;margin-left:auto}
.win-toggle button{cursor:pointer;font-size:12px;font-weight:700;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:999px;padding:5px 12px}
.win-toggle button.is-active{background:var(--ink);border-color:var(--ink);color:#fff}

.group-sugg{margin-top:16px;background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:14px}
.group-sugg a{font-weight:700}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#fff;padding:52px 0 34px}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
.site-footer .brand{color:#fff;margin-bottom:12px}
.site-footer .brand .logo{background:#fff;color:var(--ink)}
.site-footer p{font-size:14px;line-height:1.6;color:#A7A7A0;max-width:300px;margin:0}
.site-footer h4{font-family:var(--font-body);font-weight:700;font-size:14px;margin:0 0 12px}
.site-footer .fcol{display:flex;flex-direction:column;gap:8px;font-size:14px;list-style:none;padding:0;margin:0}
.site-footer .fcol a{color:#A7A7A0}
.site-footer .fcol a:hover{color:#fff}
.site-footer .copy{border-top:1px solid #2C2C34;margin-top:34px;padding-top:20px;font-size:13px;color:#7A7A72}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);z-index:100;background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:12px 20px;border-radius:999px;box-shadow:0 10px 30px rgba(23,23,31,.28);max-width:90vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Responsive ---------- */
@media(max-width:860px){
  .stats .inner{grid-template-columns:repeat(2,1fr);gap:24px}
  .podium{grid-template-columns:1fr}
  .podium-list{grid-template-columns:1fr}
  .grid-blog{grid-template-columns:1fr}
  .grid-searched{grid-template-columns:1fr}
  .featured{grid-template-columns:1fr}
  .featured-thumb{min-height:180px}
  .site-footer .cols{grid-template-columns:1fr 1fr;gap:24px}
}
@media(max-width:680px){
  .nav-toggle{display:inline-flex}
  .nav{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:8px 16px 16px;display:none}
  .site-header .inner{position:relative;flex-wrap:wrap}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;align-items:stretch;gap:2px;width:100%}
  .nav a{padding:11px 12px}
  .nav .cta{margin-left:0;text-align:center;margin-top:6px}
}
@media(max-width:560px){
  .section{padding:52px 0}
  .site-footer .cols{grid-template-columns:1fr}
}