/* ==========================================================================
   Wkitext theme — extracted from the design demo (no Bootstrap, no jQuery)
   ========================================================================== */

:root{
  --accent:#0055ff;
  --accent-dark:color-mix(in srgb,var(--accent) 82%,#000);
  --accent-soft:color-mix(in srgb,var(--accent) 10%,#fff);
  --r:14px;
  --max:1140px;
}
@supports not (color:color-mix(in srgb,#000 50%,#fff)){
  :root{--accent-dark:#0044cc;--accent-soft:#e8efff;}
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  background:#fafafa;color:#18181b;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;}
img{max-width:100%;height:auto;}
a{color:inherit;}
summary::-webkit-details-marker{display:none;}
::selection{background:var(--accent);color:#fff;}

.container{max-width:var(--max);margin:0 auto;padding-left:22px;padding-right:22px;}
.narrow{max-width:820px;}
.mid{max-width:900px;}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);}
.section{padding:56px 0;}
.section-title{font-size:clamp(24px,3.5vw,34px);font-weight:800;letter-spacing:-0.6px;color:#18181b;margin:8px 0 6px;}
.section-desc{color:#71717a;font-size:15px;max-width:620px;line-height:1.6;margin:0 0 26px;}
.section--alt{background:#fff;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;}
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.82);backdrop-filter:blur(12px);border-bottom:1px solid #ededed;}
.site-header .container{display:flex;align-items:center;gap:18px;padding-top:13px;padding-bottom:13px;}
.brand{font-weight:800;font-size:21px;letter-spacing:-0.6px;color:#18181b;text-decoration:none;display:flex;align-items:center;gap:9px;}
.brand .dot{width:11px;height:11px;border-radius:3px;background:var(--accent);display:inline-block;}
.brand b{color:var(--accent);font-weight:800;}
.brand--logo{display:flex;align-items:center;}
.brand--logo .custom-logo-link{display:flex;align-items:center;line-height:0;}
.brand--logo img,.custom-logo{height:36px;width:auto;max-width:180px;display:block;}
.main-nav{margin-left:auto;display:flex;gap:4px;flex-wrap:nowrap;align-items:center;overflow-x:auto;}
.main-nav a{padding:7px 12px;border-radius:9px;font-size:14px;font-weight:500;color:#52525b;text-decoration:none;white-space:nowrap;transition:.15s;}
.main-nav a:hover,.main-nav a.is-active,.main-nav .current-menu-item>a{color:var(--accent);background:var(--accent-soft);}

/* ---------- Generator hero ---------- */
.hero{background:linear-gradient(180deg,#ffffff,#fafafa);border-bottom:1px solid #f0f0f0;}
.hero-inner{max-width:820px;margin:0 auto;padding:52px 22px 48px;text-align:center;}
.hero h1{font-size:clamp(26px,4.4vw,38px);font-weight:800;letter-spacing:-1.1px;line-height:1.12;margin:0 0 26px;color:#18181b;}
.hero .lead{font-size:clamp(15px,2vw,18px);color:#71717a;line-height:1.65;max-width:640px;margin:0 auto 28px;}
.gen-box{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:10px;border:2px solid #18181b;border-radius:999px;padding:7px 7px 7px 24px;background:#fff;transition:.15s;}
.gen-box:focus-within{border-color:var(--accent);}
.gen-input{flex:1;min-width:0;border:none;outline:none;font-size:19px;font-weight:600;color:#18181b;background:transparent;}
.btn-accent{padding:14px 26px;border:none;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;font-size:16px;cursor:pointer;white-space:nowrap;transition:.15s;}
.btn-accent:hover{background:var(--accent-dark);}
.chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px;justify-content:center;}
.chips .label{font-size:13px;color:#a1a1aa;font-weight:500;margin-right:2px;}
.chip{padding:6px 13px;border:1px solid #ececec;border-radius:999px;background:#fafafa;color:#52525b;font-size:13px;font-weight:500;cursor:pointer;transition:.15s;}
.chip:hover{border-color:var(--accent);color:var(--accent-dark);background:var(--accent-soft);}
.chips.recent{margin-top:10px;}
.chips.recent .label{color:var(--accent-dark);}

.results-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:34px 0 14px;flex-wrap:wrap;text-align:left;}
.results-head h2{font-size:18px;font-weight:700;color:#18181b;margin:0;}
.results-head .meta{font-size:13px;color:#a1a1aa;}
.results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px;}
.variant{text-align:left;cursor:pointer;background:#fff;border:1px solid #ededed;border-radius:var(--r);padding:14px 16px;display:flex;flex-direction:column;gap:7px;transition:.15s;}
.variant:hover{border-color:var(--accent);background:var(--accent-soft);}
.variant .txt{font-size:19px;color:#18181b;word-break:break-word;line-height:1.3;}
.variant .name{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:#a1a1aa;font-weight:600;}
.is-hidden{display:none!important;}
.gen-notice{grid-column:1/-1;background:#fff5f5;border:1px solid #fecaca;color:#b91c1c;border-radius:var(--r);padding:14px 16px;font-size:14px;font-weight:600;line-height:1.5;}

/* Suggested community names + vote + contribute */
.suggest-block{margin-top:34px;}
.suggest-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;}
.suggest-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border:1px solid #ededed;border-radius:var(--r);padding:9px 11px 9px 14px;transition:.15s;}
.suggest-item:hover{border-color:var(--accent);}
.suggest-item .nick{flex:1;min-width:0;text-align:left;background:none;border:none;cursor:pointer;font-size:18px;color:#18181b;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:inherit;}
.suggest-item .votes{display:flex;gap:6px;flex-shrink:0;}
.vote-btn{display:inline-flex;align-items:center;gap:4px;border:1px solid #ededed;background:#fafafa;border-radius:999px;padding:5px 10px;font-size:13px;font-weight:700;color:#52525b;cursor:pointer;transition:.15s;line-height:1;}
.vote-btn:hover{border-color:var(--accent);}
.vote-btn.up.voted{color:#16a34a;border-color:#16a34a;background:#16a34a14;}
.vote-btn.down.voted{color:#ef4444;border-color:#ef4444;background:#ef444414;}
.vote-btn:disabled{opacity:.55;cursor:default;}
.suggest-empty{color:#71717a;font-size:14px;margin:6px 0 0;}
.contribute{margin-top:24px;padding-top:20px;border-top:1px dashed #e4e4e7;}
.contribute-head{font-weight:700;font-size:16px;color:#18181b;margin-bottom:12px;}
.contribute-box{max-width:560px;margin:0;border-width:1.5px;}
.contribute-box .gen-input{font-size:16px;}
.contribute-box .btn-accent{padding:12px 22px;font-size:15px;}

/* ---------- Trending ---------- */
.trend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;}
.trend{display:flex;align-items:center;gap:16px;padding:14px 18px;border:1px solid #f0f0f0;border-radius:var(--r);background:#fff;text-decoration:none;color:inherit;transition:.15s;}
.trend:hover{border-color:var(--accent);background:var(--accent-soft);}
.trend .rank{font-size:13px;color:#cbcbcb;width:22px;font-weight:700;flex-shrink:0;text-align:center;}
.trend .body{flex:1;min-width:0;}
.trend .row{display:flex;align-items:center;gap:8px;}
.trend .word{font-weight:600;font-size:15px;color:#18181b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.trend .tag{font-size:11px;color:#a1a1aa;background:#f5f5f5;padding:2px 8px;border-radius:999px;white-space:nowrap;flex-shrink:0;}
.trend .bar{height:4px;background:#f3f3f3;border-radius:9px;margin-top:9px;overflow:hidden;}
.trend .bar>span{display:block;height:100%;border-radius:9px;}
.trend .chg{font-weight:700;font-size:14px;white-space:nowrap;flex-shrink:0;min-width:64px;text-align:right;}

/* ---------- Suggestions ---------- */
.sugg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}
.sugg{text-align:left;cursor:pointer;background:#fff;border:1px solid #ededed;border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;transition:.15s;}
.sugg:hover{border-color:var(--accent);background:var(--accent-soft);}
.sugg .txt{font-size:18px;color:#18181b;word-break:break-word;line-height:1.3;}
.sugg .copy{font-size:11px;color:#c4c4c4;flex-shrink:0;font-weight:600;}

/* Kaomoji palette in the generator results */
.kaomoji-block{margin-top:8px;}
.kao-grid{display:flex;flex-wrap:wrap;gap:8px;}
.kao{min-height:44px;padding:8px 14px;display:inline-flex;align-items:center;justify-content:center;font-size:16px;background:#fff;border:1px solid #ededed;border-radius:11px;cursor:pointer;color:#18181b;transition:.15s;font-family:inherit;white-space:nowrap;}
.kao:hover{border-color:var(--accent);background:var(--accent-soft);}

/* ---------- Top week ---------- */
.topweek-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:8px;}
.rankrow{text-align:left;cursor:pointer;background:#fafafa;border:1px solid #f0f0f0;border-radius:var(--r);padding:11px 14px;display:flex;align-items:center;gap:13px;transition:.15s;}
.rankrow:hover{border-color:var(--accent);background:var(--accent-soft);}
.rankrow .rank{font-size:14px;font-weight:800;width:26px;flex-shrink:0;text-align:center;color:#cbcbcb;}
.rankrow.top .rank{color:var(--accent);}
.rankrow .txt{flex:1;min-width:0;font-size:17px;color:#18181b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rankrow .cnt{font-size:12px;color:#a1a1aa;flex-shrink:0;white-space:nowrap;}

/* ---------- Topics ---------- */
.topics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:14px;}
.topic{display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid #ededed;border-radius:calc(var(--r) + 2px);padding:20px;text-decoration:none;transition:.15s;color:inherit;}
.topic:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(0,0,0,0.06);transform:translateY(-2px);}
.topic .tag{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.6px;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent-dark);}
.topic h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-0.4px;color:#18181b;}
.topic p{margin:0;font-size:14px;color:#71717a;line-height:1.55;flex:1;}
.topic .foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px;}
.topic .foot .meta{font-size:12px;color:#a1a1aa;}
.topic .foot .go{font-size:13px;font-weight:700;color:var(--accent);}

/* ---------- Guide / about ---------- */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;}
.guide h2{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-0.6px;color:#18181b;margin:8px 0 22px;}
.steps{display:flex;flex-direction:column;gap:18px;}
.step{display:flex;gap:14px;}
.step .n{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;}
.step .t{font-weight:700;font-size:16px;color:#18181b;margin-bottom:3px;}
.step .d{font-size:14px;color:#71717a;line-height:1.55;}
.check{display:flex;flex-direction:column;gap:11px;}
.check>div{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:#52525b;line-height:1.5;}
.check b{color:var(--accent);font-weight:800;}
.lead-p{font-size:15px;color:#52525b;line-height:1.7;margin:0 0 16px;}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:10px;}
.faq details{border:1px solid #ededed;border-radius:var(--r);background:#fff;overflow:hidden;}
.faq summary{cursor:pointer;padding:16px 18px;font-weight:600;font-size:16px;color:#18181b;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq summary .pm{color:var(--accent);font-weight:700;font-size:20px;flex-shrink:0;}
.faq details[open] summary .pm{transform:rotate(45deg);}
.faq .a{padding:0 18px 16px;color:#52525b;line-height:1.65;font-size:15px;}

/* ---------- Breadcrumb ---------- */
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:#a1a1aa;flex-wrap:wrap;}
.crumbs a{color:#a1a1aa;text-decoration:none;}
.crumbs a:hover{color:var(--accent);}
.crumbs .cur{color:#52525b;font-weight:600;}

/* ---------- Topic page ---------- */
.topic-hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff,var(--accent-soft));border-bottom:1px solid #f0f0f0;}
.topic-hero__deco{position:absolute;inset:0;pointer-events:none;z-index:0;}
.topic-hero__deco .d{position:absolute;color:var(--accent);opacity:.10;font-weight:800;line-height:1;white-space:nowrap;}
.topic-hero__deco .d1{top:14px;left:4%;font-size:64px;}
.topic-hero__deco .d2{top:30px;right:6%;font-size:46px;opacity:.08;}
.topic-hero__deco .d3{bottom:34px;left:9%;font-size:40px;opacity:.09;}
.topic-hero__deco .d4{top:46%;left:2%;font-size:50px;opacity:.07;}
.topic-hero__deco .d5{bottom:18px;right:11%;font-size:44px;opacity:.09;}
.topic-hero__deco .d6{top:22%;right:3%;font-size:38px;opacity:.07;}
.topic-hero__deco .d7{bottom:42%;right:23%;font-size:32px;opacity:.06;}
.topic-hero__deco .d8{bottom:10px;left:27%;font-size:54px;opacity:.08;}
.topic-hero-inner{position:relative;z-index:1;max-width:900px;margin:0 auto;padding:26px 22px 48px;text-align:center;}
.updated-note{font-size:13px;color:#a1a1aa;font-style:italic;margin:0 0 18px;}
@media(max-width:600px){.topic-hero__deco .d2,.topic-hero__deco .d4,.topic-hero__deco .d6,.topic-hero__deco .d7{display:none;}}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--accent-dark);font-size:12px;font-weight:700;letter-spacing:.6px;padding:5px 12px;border-radius:999px;margin-bottom:16px;}
.topic-hero h1{font-size:clamp(28px,4.6vw,42px);font-weight:800;letter-spacing:-1.2px;line-height:1.1;margin:0 0 14px;color:#18181b;}
.symbols{display:flex;flex-wrap:wrap;gap:8px;}
.sym{min-width:48px;height:48px;padding:0 12px;display:flex;align-items:center;justify-content:center;font-size:20px;background:#fff;border:1px solid #ededed;border-radius:11px;cursor:pointer;color:#18181b;transition:.15s;}
.sym:hover{border-color:var(--accent);background:var(--accent-soft);}
.collection{margin-bottom:44px;}
.collection .head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.collection h2{font-size:clamp(20px,3vw,26px);font-weight:800;letter-spacing:-0.5px;margin:0;}
.collection .note{font-size:13px;color:#a1a1aa;}
.coll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;}

/* ---------- Article (prose) ---------- */
.prose{font-size:17px;line-height:1.8;color:#3f3f46;}
.prose>*:first-child{margin-top:0;}
.prose h2{font-size:26px;font-weight:800;letter-spacing:-0.6px;color:#18181b;margin:34px 0 14px;}
.prose h3{font-size:20px;font-weight:700;color:#18181b;margin:28px 0 12px;}
.prose p{margin:0 0 22px;}
.prose a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px;}
.prose ul,.prose ol{margin:0 0 22px;padding-left:22px;}
.prose li{margin:0 0 8px;}
.prose img{border-radius:14px;margin:8px 0;}
.prose blockquote{background:#fff;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:14px 22px;margin:0 0 24px;font-style:italic;color:#52525b;}
.prose table{border-collapse:collapse;width:100%;margin:0 0 22px;}
.prose th,.prose td{border:1px solid #ededed;padding:8px 12px;text-align:left;}
.homepage-seo{max-width:880px;margin:0 auto;}
.homepage-seo .prose{font-size:16px;}
.homepage-seo .prose h2{font-size:24px;margin-top:30px;}
.homepage-seo .prose h3{font-size:19px;}
.card-article{background:#fff;border:1px solid #ededed;border-radius:18px;padding:30px;margin-bottom:44px;}
.note{background:var(--accent-soft);border-radius:12px;padding:14px 16px;font-size:14px;color:#8a4b00;line-height:1.6;}
.tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.tags .label{font-size:13px;color:#a1a1aa;font-weight:600;}
.tags a{padding:6px 13px;border:1px solid #ececec;border-radius:999px;background:#fafafa;font-size:13px;color:#52525b;text-decoration:none;}
.tags a:hover{border-color:var(--accent);color:var(--accent-dark);}

/* ---------- News archive ---------- */
.page-head{padding:34px 0 8px;}
.page-head h1{font-size:clamp(28px,4.4vw,40px);font-weight:800;letter-spacing:-1.1px;line-height:1.12;margin:10px 0 10px;}
.page-head p{color:#71717a;font-size:16px;line-height:1.6;max-width:600px;margin:0 0 22px;}
.cat-filters{display:flex;gap:8px;flex-wrap:wrap;}
.cat-filters a{padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;text-decoration:none;border:1px solid #e4e4e7;background:#fff;color:#52525b;transition:.15s;}
.cat-filters a:hover,.cat-filters a.is-active{border-color:var(--accent);background:var(--accent);color:#fff;}
.news-featured{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:#fff;border:1px solid #ededed;border-radius:20px;overflow:hidden;text-decoration:none;margin-bottom:36px;transition:.15s;color:inherit;}
.news-featured:hover{border-color:var(--accent);box-shadow:0 14px 40px rgba(0,0,0,0.07);}
.news-featured .cover{min-height:280px;background:linear-gradient(135deg,#0055ff,#00b4d8);position:relative;background-size:cover;background-position:center;}
.news-featured .badge{position:absolute;top:18px;left:18px;background:rgba(255,255,255,0.92);color:var(--accent-dark);font-size:12px;font-weight:700;letter-spacing:.5px;padding:6px 13px;border-radius:999px;}
.news-featured .body{padding:34px;display:flex;flex-direction:column;justify-content:center;}
.news-featured h2{font-size:clamp(22px,2.6vw,28px);font-weight:800;letter-spacing:-0.6px;line-height:1.2;margin:10px 0 12px;color:#18181b;}
.news-featured p{font-size:15px;color:#71717a;line-height:1.65;margin:0 0 18px;}
.kicker{font-size:12px;font-weight:700;letter-spacing:.6px;color:var(--accent);}
.post-meta{display:flex;align-items:center;gap:10px;font-size:13px;color:#a1a1aa;flex-wrap:wrap;}
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;}
.news-card{display:flex;flex-direction:column;background:#fff;border:1px solid #ededed;border-radius:18px;overflow:hidden;text-decoration:none;transition:.15s;color:inherit;}
.news-card:hover{border-color:var(--accent);box-shadow:0 10px 28px rgba(0,0,0,0.06);transform:translateY(-3px);}
.news-card .cover{height:160px;background:linear-gradient(135deg,#0055ff,#00b4d8);position:relative;background-size:cover;background-position:center;}
.news-card .tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,0.92);color:#18181b;font-size:11px;font-weight:700;letter-spacing:.5px;padding:5px 11px;border-radius:999px;}
.news-card .body{padding:18px;display:flex;flex-direction:column;flex:1;}
.news-card h3{margin:0 0 9px;font-size:18px;font-weight:700;letter-spacing:-0.4px;color:#18181b;line-height:1.32;}
.news-card p{margin:0 0 16px;font-size:14px;color:#71717a;line-height:1.6;flex:1;}
.pagination{display:flex;justify-content:center;gap:8px;margin-top:40px;flex-wrap:wrap;}
.pagination a,.pagination span{padding:11px 18px;border:1px solid #e4e4e7;border-radius:999px;background:#fff;font-size:15px;font-weight:700;color:#52525b;text-decoration:none;}
.pagination a:hover,.pagination .current{border-color:var(--accent);color:var(--accent-dark);}

/* ---------- News single ---------- */
.article-single{max-width:740px;margin:0 auto;padding:28px 22px 56px;}
.article-single h1{font-size:clamp(28px,4.6vw,40px);font-weight:800;letter-spacing:-1.1px;line-height:1.14;margin:0 0 18px;color:#18181b;}
.byline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px;padding-bottom:22px;border-bottom:1px solid #ededed;}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#00b4d8);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;}
.byline .who{display:flex;flex-direction:column;}
.byline .who b{font-size:14px;font-weight:700;color:#18181b;}
.byline .who span{font-size:13px;color:#a1a1aa;}
.btn-ghost{padding:8px 16px;border:1px solid #ededed;border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:#52525b;cursor:pointer;transition:.15s;text-decoration:none;}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-dark);}
.cover-figure{width:100%;height:380px;border-radius:18px;overflow:hidden;margin-bottom:14px;background:linear-gradient(135deg,#0055ff,#00b4d8);}
.cover-figure img{width:100%;height:100%;object-fit:cover;display:block;}
.cap{font-size:13px;color:#a1a1aa;text-align:center;margin:0 0 30px;}
.related{background:#fff;border-top:1px solid #f0f0f0;}
.related .wrap{max-width:1000px;margin:0 auto;padding:48px 22px;}
.related h2{font-size:24px;font-weight:800;letter-spacing:-0.5px;margin:0 0 22px;}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.related-card{display:flex;flex-direction:column;background:#fafafa;border:1px solid #f0f0f0;border-radius:16px;overflow:hidden;text-decoration:none;transition:.15s;color:inherit;}
.related-card:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(0,0,0,0.06);transform:translateY(-2px);}
.related-card .cover{height:130px;background:linear-gradient(135deg,#0055ff,#00b4d8);background-size:cover;background-position:center;}
.related-card .body{padding:16px;}
.related-card .tag{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--accent);}
.related-card h3{margin:7px 0 0;font-size:16px;font-weight:700;letter-spacing:-0.3px;color:#18181b;line-height:1.35;}
.related-card span{font-size:13px;color:#a1a1aa;display:block;margin-top:8px;}

/* ---------- 404 ---------- */
.err{max-width:680px;margin:0 auto;padding:80px 22px;text-align:center;}
.err .code{font-size:clamp(64px,16vw,140px);font-weight:800;letter-spacing:-4px;line-height:1;color:var(--accent);}
.err h1{font-size:clamp(22px,3.4vw,30px);font-weight:800;letter-spacing:-0.6px;margin:6px 0 12px;}
.err p{color:#71717a;font-size:16px;line-height:1.6;margin:0 0 24px;}

/* ---------- Footer ---------- */
.site-footer{background:#141414;color:#a1a1aa;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px;padding:48px 22px 32px;max-width:var(--max);margin:0 auto;}
.footer-brand{max-width:280px;}
.footer-brand .brand{color:#fff;margin-bottom:12px;}
.footer-brand p{font-size:14px;line-height:1.6;margin:0;}
.footer-col h4{color:#fff;font-weight:700;font-size:14px;margin:0 0 14px;}
.footer-col .links{display:flex;flex-direction:column;gap:9px;font-size:14px;}
.footer-col a{text-decoration:none;color:#a1a1aa;transition:.15s;}
.footer-col a:hover{color:var(--accent);}
.gfollow{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#3c4043;border:1px solid #dadce0;border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;text-decoration:none;transition:.15s;line-height:1;white-space:nowrap;}
.gfollow:hover{box-shadow:0 1px 6px rgba(60,64,67,.2);color:#3c4043;border-color:#c6c9cd;}
.gfollow svg{flex-shrink:0;display:block;}
.footer-brand .gfollow{margin-top:14px;}
.gfollow-cta{display:inline-flex;flex-direction:column;align-items:center;gap:14px;background:#fff;border:1px solid #ededed;border-radius:calc(var(--r) + 2px);padding:24px 30px;max-width:520px;}
.gfollow-cta .t{font-weight:700;font-size:17px;color:#18181b;line-height:1.45;}
.footer-bottom{border-top:1px solid #262626;}
.footer-bottom .container{padding-top:18px;padding-bottom:18px;font-size:13px;color:#6b6b6b;}

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

/* ---------- Loading skeletons ---------- */
.skel{position:relative;overflow:hidden;background:#f1f1f3;border-radius:var(--r);}
.skel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-100%);animation:skel 1.2s infinite;}
@keyframes skel{100%{transform:translateX(100%);}}

/* ---------- Responsive ---------- */
@media(max-width:760px){
  .news-featured{grid-template-columns:1fr;}
  .news-featured .cover{min-height:180px;}
  .guide-grid{gap:28px;}
  .section{padding:42px 0;}
}