/* KKPoker Bot — dark slate / electric-blue theme over Skeleton CSS */
:root{
  --bg:#0e1620;
  --bg-2:#141f2d;
  --surface:#16222f;
  --border:#243446;
  --text:#dbe4ee;
  --muted:#94a6b8;
  --accent:#2f81f7;
  --accent-2:#5aa2ff;
  --accent-dim:#1c3a5e;
  color-scheme: only light;
}

*{box-sizing:border-box;}
html,body{overflow-x:hidden;}
html{font-size:62.5%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:"Barlow","Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1.65rem;
  line-height:1.7;
  margin:0;
}
:lang(zh) body, html[lang="zh"] body{font-family:"Noto Sans SC","Barlow",sans-serif;}

img,svg,table,pre,video{max-width:100%;}
a{color:var(--accent-2);text-decoration:none;}
a:hover{color:#7fb6ff;text-decoration:underline;}

h1,h2,h3,h4{font-family:"Barlow","Noto Sans SC",sans-serif;color:#fff;letter-spacing:-.01em;overflow-wrap:anywhere;}
html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3,html[lang="zh"] h4{font-family:"Noto Sans SC","Barlow",sans-serif;}
h1{font-size:3.6rem;line-height:1.15;margin:0 0 1.4rem;}
h2{font-size:2.6rem;line-height:1.25;margin:3.4rem 0 1.2rem;}
h3{font-size:1.95rem;margin:2.4rem 0 .8rem;}
p{margin:0 0 1.4rem;}

.wrap{max-width:880px;margin:0 auto;padding:0 2rem;}

/* header */
.site-header{
  border-bottom:1px solid var(--border);
  background:rgba(14,22,32,.92);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(6px);
}
.nav{
  display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;
  padding:1.1rem 2rem;max-width:1080px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:700;font-size:1.9rem;color:#fff;}
.brand:hover{text-decoration:none;}
.brand svg{width:30px;height:30px;}
.nav-links{display:flex;gap:1.3rem;flex-wrap:wrap;align-items:center;font-size:1.45rem;}
.nav-links a{color:var(--muted);font-weight:600;}
.nav-links a:hover,.nav-links a.active{color:var(--accent-2);text-decoration:none;}
.nav-spacer{flex:1 1 auto;}
.cta{
  display:inline-block;background:var(--accent);color:#fff !important;
  padding:.7rem 1.4rem;border-radius:7px;font-weight:700;font-size:1.4rem;
  white-space:nowrap;
}
.cta:hover{background:#1f6fe0;text-decoration:none;}
.lang-sep{color:var(--border);}

/* hero */
.hero{position:relative;border-bottom:1px solid var(--border);}
.hero-img{width:100%;height:340px;object-fit:cover;display:block;filter:saturate(.95);}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,22,32,.96) 0%,rgba(14,22,32,.7) 55%,rgba(14,22,32,.35) 100%);
  display:flex;align-items:center;
}
.hero-overlay .wrap{width:100%;}
.hero h1{margin-bottom:.6rem;}
.hero .kicker{color:var(--accent-2);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:1.3rem;margin-bottom:1rem;}
.hero .sub{color:var(--muted);font-size:1.8rem;max-width:560px;margin:0;}

main{padding:3.4rem 0 4rem;}

/* answer-first lede box */
.lede{
  background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);
  border-radius:10px;padding:1.8rem 2rem;margin:0 0 2.6rem;
}
.lede p:last-child{margin-bottom:0;}
.lede strong{color:#fff;}

/* generic cards / callouts */
.note{
  background:var(--bg-2);border:1px solid var(--border);border-radius:10px;
  padding:1.6rem 1.8rem;margin:2rem 0;
}
.note h3{margin-top:0;}

.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem;margin:2rem 0;}
.split .col{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:1.6rem 1.8rem;}
.split .col h3{margin-top:0;color:var(--accent-2);}
.split ul{margin:0;padding-left:1.8rem;}
.split li{margin:.5rem 0;}

/* tables */
.tbl-wrap{overflow-x:auto;margin:2rem 0;}
table{width:100%;border-collapse:collapse;background:var(--surface);font-size:1.5rem;}
th,td{border:1px solid var(--border);padding:.9rem 1.1rem;text-align:left;color:var(--text);background:var(--surface);vertical-align:top;}
th{background:var(--bg-2);color:#fff;font-weight:700;}

/* figures */
figure{margin:2.6rem 0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.8rem;}
figure svg{width:100%;height:auto;display:block;}
figcaption{color:var(--muted);font-size:1.35rem;margin-top:1rem;text-align:center;}

/* code */
code{background:var(--bg-2);color:var(--accent-2);padding:.15em .4em;border-radius:4px;font-size:.92em;}
pre{background:var(--bg-2);border:1px solid var(--border);border-radius:8px;padding:1.4rem;overflow-x:auto;}
pre code{background:transparent;color:inherit;padding:0;}

/* author */
.author{
  display:flex;gap:1.4rem;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:1.6rem 1.8rem;margin:3.4rem 0 0;
}
.author img{width:64px;height:64px;border-radius:50%;flex:0 0 auto;object-fit:cover;}
.author .nm{font-weight:700;color:#fff;}
.author .rl{color:var(--muted);font-size:1.4rem;}

/* breadcrumb */
.crumb{font-size:1.35rem;color:var(--muted);margin:0 0 1.6rem;}
.crumb a{color:var(--muted);}
.crumb a:hover{color:var(--accent-2);}

/* cta block */
.cta-block{
  background:linear-gradient(135deg,var(--accent-dim),var(--surface));
  border:1px solid var(--border);border-radius:14px;padding:2.4rem;margin:3.4rem 0 0;text-align:center;
}
.cta-block h3{margin-top:0;}
.cta-block .cta{font-size:1.6rem;padding:1rem 2rem;margin-top:.6rem;}

/* footer */
.site-footer{border-top:1px solid var(--border);color:var(--muted);font-size:1.35rem;padding:2.4rem 0;margin-top:2rem;}
.site-footer .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;}

ul,ol{padding-left:2.2rem;}
li{margin:.4rem 0;}

@media (max-width:600px){
  body{font-size:1.6rem;}
  h1{font-size:2.7rem;}
  h2{font-size:2.2rem;}
  .hero-img{height:260px;}
  .hero-overlay{background:linear-gradient(180deg,rgba(14,22,32,.6),rgba(14,22,32,.95));}
  .split{grid-template-columns:minmax(0,1fr);}
  .nav{padding:1rem 1.4rem;gap:1rem;}
  .wrap{padding:0 1.6rem;}
}

/* defend against any dark-mode media flips */
@media (prefers-color-scheme:dark){
  body{background:var(--bg);color:var(--text);}
  th,td{background:var(--surface);color:var(--text);}
  th{background:var(--bg-2);color:#fff;}
  pre code{background:transparent;color:inherit;}
}