.article-page{margin:0 auto;background:var(--card);border:1px solid var(--border);border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.article-hero{position:relative;display:flex;align-items:flex-end;min-height:360px;overflow:hidden;background:linear-gradient(135deg,#f49ac1,#d6336c)}
.article-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-body{padding:28px 36px 32px}
.article-meta{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.article-author{display:block;font-weight:800;font-size:14px}
.article-date{display:block;font-size:12px;color:var(--text-soft);font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin-top:2px}
.article-body h1{font-family:var(--font-display);font-size:clamp(20px,2.4vw,28px);font-weight:500;line-height:1.25;letter-spacing:0;margin-bottom:10px}
.article-lead{font-size:17px;color:var(--text);font-weight:600;line-height:1.6;margin-bottom:16px}
.article-body p{font-size:15px;line-height:1.75;margin-bottom:14px;color:var(--text)}
.article-body h3{font-family:var(--font-display);font-size:19px;font-weight:700;margin:22px 0 10px}
.article-body blockquote{margin:18px 0;padding:14px 18px;border-left:4px solid var(--accent-2);background:var(--bg-alt);border-radius:0 14px 14px 0;font-style:italic;color:var(--text-soft);font-size:14.5px;line-height:1.6}
.article-kao-strip{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 18px}
.article-kao{font-family:var(--font-mono);font-size:15px;padding:9px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg-alt);color:var(--text);transition:border-color .15s,box-shadow .15s}
.article-kao:hover{border-color:#b9b4b9;box-shadow:var(--shadow)}
.article-kao:active{transform:scale(.95)}
.article-tags{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 4px}
@media (max-width:640px){
.article-hero{min-height:270px}
.article-body{padding:20px 18px 24px}
}
.article-rating{display:flex;align-items:center;gap:12px;width:100%;margin:6px 0 22px;padding:7px 8px;background:var(--bg-alt);border:1px solid var(--border);border-radius:18px}
.vote-btn{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:13px;border:none;background:transparent;font-weight:800;font-size:13.5px;color:var(--text-soft);flex-shrink:0;transition:transform .15s cubic-bezier(.34,1.56,.64,1),background .18s,color .18s}
.vote-btn svg{width:17px;height:17px;fill:none;stroke:currentcolor;stroke-width:2;transition:fill .18s,transform .18s}
.vote-btn .vote-num{font-family:var(--font-display);font-size:14.5px;color:var(--text)}
.vote-btn:hover{transform:translateY(-1px)}
.vote-btn:active{transform:scale(.94)}
.vote-like{color:#22945a;background:rgba(34,148,90,.1)}
.vote-like .vote-num{color:#22945a}
.vote-like svg{stroke:#22945a}
.vote-like:hover{background:rgba(34,148,90,.18)}
.vote-like.voted{background:#22945a;color:#fff}
.vote-like.voted svg{fill:#fff;stroke:#fff;transform:translateY(-1px)}
.vote-like.voted .vote-num{color:#fff}
.vote-dislike{color:#d33338;background:rgba(211,51,56,.1)}
.vote-dislike .vote-num{color:#d33338}
.vote-dislike svg{stroke:#d33338}
.vote-dislike:hover{background:rgba(211,51,56,.18)}
.vote-dislike.voted{background:#d33338;color:#fff}
.vote-dislike.voted svg{fill:#fff;stroke:#fff;transform:translateY(1px)}
.vote-dislike.voted .vote-num{color:#fff}
.vote-scale{flex:1 1 0%;min-width:50px;height:7px;border-radius:999px;background:rgba(211,51,56,.22);overflow:hidden}
.vote-scale-pos{height:100%;border-radius:999px;background:linear-gradient(90deg,#3bc47f,#22945a);transition:width .35s}
.vote-percent{flex-shrink:0;font-family:var(--font-display);font-weight:800;font-size:13px;color:#22945a;min-width:40px;text-align:center}
@media (max-width:600px){
.vote-btn .vote-label{display:none}
.vote-btn{padding:9px 12px;gap:6px}
.article-rating{gap:8px}
}
@media (max-width:380px){
.vote-percent{display:none}
}
.article-page-fixed{border:1.5px solid var(--gold)}
.article-tools{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-bottom:10px}
.article-fav-btn{display:flex;align-items:center;gap:6px;color:var(--accent-2);cursor:pointer}
.article-fav-btn svg{width:20px;height:20px}
.article-edit-btn{font-size:12.5px;font-weight:800;color:var(--text-soft);cursor:pointer}
.article-edit-btn:hover{color:var(--accent-2)}
.article-date-sep{margin:0 4px;opacity:.6}
.article-pinned{margin-left:6px;color:var(--gold)}
.article-editnote{margin:14px 0;padding:10px 14px;background:var(--bg-alt);border-radius:12px;font-size:12.5px;color:var(--text-soft)}
.vote-raw{display:none}
.article-rating a{text-decoration:none;color:inherit;display:inline-flex;outline:none}
.article-rating a:focus-visible .vote-btn{box-shadow:0 0 0 2px var(--accent-2)}
.vote-percent-low{color:#d33338}
.article-nextprev{display:flex;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}
.article-banner{margin-top:20px;text-align:center}
.article-tags a{display:inline-block;font-size:12px;font-weight:800;color:var(--accent-2);background:color-mix(in srgb,var(--accent) 16%,transparent);padding:5px 12px;border-radius:999px;text-decoration:none;transition:background .15s,color .15s,transform .15s}
.article-tags a:hover{background:var(--accent-2);color:#fff;transform:translateY(-1px)}
.article-tags a:active{transform:scale(.96)}
.vote-scale-block{display:flex;align-items:center;justify-content:center;gap:16px}
.vote-scale-block .vote-num{font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--text);min-width:24px;text-align:center}
.vote-scale-block a{text-decoration:none;color:inherit;display:inline-flex;outline:none}
#dropmenudiv{min-width:190px;padding:6px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);font-family:var(--font-body)}
#dropmenudiv a{display:block;padding:9px 12px;border-radius:9px;font-size:13px;font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
#dropmenudiv a:hover{background:var(--bg-alt);color:var(--accent-2)}
@media (max-width:640px){
.article-tools{justify-content:space-between}
.article-nextprev{flex-direction:column}
.article-nextprev .btn-border{text-align:center}
}
/* ===== full news: title over the cover ===== */
.article-hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(22,8,16,.92) 0%,rgba(22,8,16,.74) 24%,rgba(22,8,16,.36) 52%,rgba(22,8,16,.06) 78%,transparent 100%)}
.article-hero-cap{position:relative;z-index:2;width:100%;padding:34px clamp(20px,4vw,40px) clamp(20px,2.6vw,26px)}
.article-hero-cat{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);transition:background .18s}
.article-hero-cat:empty + .article-hero-dot{display:none}
.article-hero-cat a{color:inherit;text-decoration:none}
.article-hero-cat:hover{background:rgba(255,255,255,.28)}
.article-hero-cat:empty{display:none}
.article-hero-pin{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:11px;line-height:1;color:#3A0A1E;background:var(--gold);box-shadow:0 2px 8px rgba(0,0,0,.28)}
.article-hero-title{max-width:840px;margin-bottom:10px;font-family:var(--font-display);font-size:clamp(20px,2.4vw,28px);font-weight:500;line-height:1.25;letter-spacing:0;color:#fff;text-shadow:0 2px 10px rgba(18,6,12,.6),0 12px 40px rgba(18,6,12,.4)}
.article-hero-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:rgba(255,255,255,.86);text-shadow:0 1px 6px rgba(18,6,12,.55)}
.article-hero-sub time{white-space:nowrap}
.article-hero-author{font-weight:800;color:#fff}
.article-hero-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.6)}
/* ===== floating tools over the cover ===== */
.article-hero-tools{position:absolute;top:14px;right:14px;z-index:3;display:flex;align-items:center;gap:8px}
.article-hero-tools:empty{display:none}
.article-hero-tools a{display:block;line-height:0;color:inherit;text-decoration:none}
.hero-tool{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;color:#fff;background:rgba(18,6,12,.4);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,.26);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background .18s,color .18s,border-color .18s,transform .18s cubic-bezier(.34,1.56,.64,1)}
.hero-tool svg{width:19px;height:19px;transition:transform .4s}
.hero-tool:hover{background:var(--accent-2);border-color:transparent;transform:scale(1.07)}
.hero-tool:active{transform:scale(.94)}
.hero-tool:focus-visible{outline:2px solid #fff;outline-offset:2px}
.hero-tool-edit:hover svg{transform:rotate(60deg)}
.hero-tool-fav.is-on{color:var(--gold)}
.hero-tool-fav.is-on:hover{background:var(--gold);color:#3A0A1E}
/* ===== fallback head when the news has no cover ===== */
.article-plain-head{position:relative;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.article-hero-tools-plain{position:absolute;top:0;right:0}
.article-hero-tools-plain .hero-tool{width:36px;height:36px;color:var(--text-soft);background:var(--bg-alt);border:1px solid var(--border);backdrop-filter:none;box-shadow:none}
.article-hero-tools-plain .hero-tool:hover{background:var(--accent-2);color:#fff;border-color:transparent}
.article-hero-tools-plain .hero-tool-fav.is-on{color:var(--gold)}
.article-hero-tools-plain .hero-tool-fav.is-on:hover{background:var(--gold);color:#fff}
.article-plain-sub .article-hero-cat{color:var(--accent-2);background:color-mix(in srgb,var(--accent) 16%,transparent);border-color:transparent;backdrop-filter:none}
.article-plain-sub .article-hero-cat:hover{background:color-mix(in srgb,var(--accent) 28%,transparent)}
.article-plain-title{max-width:840px;margin-bottom:10px;padding-right:96px;font-family:var(--font-display);font-size:clamp(20px,2.4vw,28px);font-weight:500;line-height:1.25;letter-spacing:0;color:var(--text)}
.article-plain-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;font-weight:700;color:var(--text-soft)}
.article-plain-sub .article-hero-author{color:var(--text)}
.article-plain-sub .article-hero-dot{background:var(--text-soft)}
/* ===== share row (adblock-safe markup) ===== */
.article-connect{display:flex;flex-direction:column;align-items:center;gap:13px;margin:20px 0 2px;padding-top:16px;border-top:1px dashed var(--border)}
.article-connect .connect-heading{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;max-width:330px}
.article-connect .connect-line{flex:1 1 0;height:1px;background:linear-gradient(90deg,transparent,var(--border))}
.article-connect .connect-line + .connect-label + .connect-line{background:linear-gradient(90deg,var(--border),transparent)}
.article-connect .connect-label{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft);white-space:nowrap}
.article-connect .connect-list{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:clamp(5px,1.4vw,10px);width:100%}
.article-connect .connect-btn{flex:1 1 0;min-width:0;max-width:40px;aspect-ratio:1/1;padding:0;border:none;border-radius:50%;color:#fff;background:var(--sc,#999);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.15);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,filter .2s}
.article-connect .connect-btn svg{width:58%;height:58%;fill:currentcolor}
.article-connect .connect-btn[data-net="ln"] svg{width:80%;height:80%}
.article-connect .connect-btn:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.26);filter:brightness(1.08)}
.article-connect .connect-btn:active{transform:translateY(0) scale(.92)}
.article-connect .connect-btn:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px}
html[data-theme="dark"] .article-connect .connect-btn[data-net="x"]{background:#000;box-shadow:0 0 0 1px rgba(245,222,233,.25)}
@media (max-width:640px){
.article-hero-cap{padding:26px 18px 20px}
.article-hero-title{font-size:clamp(18px,4.8vw,22px)}
.article-hero-tools{top:10px;right:10px;gap:6px}
.hero-tool{width:34px;height:34px}
.hero-tool svg{width:17px;height:17px}
.article-connect{gap:11px}
.article-connect .connect-list{gap:5px}
.article-connect .connect-btn{max-width:36px}
}
@media (max-width:400px){
.article-connect .connect-list{gap:4px}
.article-hero-sub{font-size:11.5px;gap:8px}
}
@media (prefers-reduced-motion:reduce){
.hero-tool,.hero-tool svg,.article-connect .connect-btn{transition:none}
}