/* AiSash Blog — matches main site dark theme */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0a1a;
  --surface:rgba(255,255,255,.05);
  --surface-hover:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.1);
  --text:#fff;
  --text-muted:rgba(255,255,255,.55);
  --text-dim:rgba(255,255,255,.4);
  --cyan:#00ccff;
  --purple:#9d00ff;
  --green:#00ff9d;
  --gradient:linear-gradient(135deg,#00ccff,#9d00ff);
  --btn-gradient:linear-gradient(135deg,#00ccff,#0099cc);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --max-w:780px;
}

html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}

/* ---- NAV ---- */
.blog-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,26,.85);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:0 24px;
}
.blog-nav-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:60px;
}
.blog-nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:15px}
.blog-nav .logo{
  background:var(--gradient);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  font-size:20px;font-weight:800;
}
.blog-nav .nav-links{display:flex;gap:24px}
.blog-nav .nav-links a{color:var(--text-muted);transition:color .2s}
.blog-nav .nav-links a:hover{color:var(--cyan)}

/* ---- ARTICLE ---- */
.blog-article{
  max-width:var(--max-w);
  margin:0 auto;
  padding:48px 24px 80px;
}
.blog-article .meta{
  color:var(--text-dim);font-size:14px;margin-bottom:8px;
  display:flex;gap:16px;flex-wrap:wrap;
}
.blog-article h1{
  font-size:clamp(28px,5vw,42px);
  font-weight:800;
  line-height:1.2;
  margin-bottom:24px;
  background:var(--gradient);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.blog-article h2{
  font-size:24px;font-weight:700;
  margin:48px 0 16px;
  color:var(--text);
}
.blog-article h3{
  font-size:19px;font-weight:600;
  margin:32px 0 12px;color:var(--text);
}
.blog-article p{margin-bottom:16px;color:rgba(255,255,255,.85)}
.blog-article strong{color:var(--text);font-weight:600}
.blog-article a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.blog-article a:hover{color:var(--green)}

.blog-article ul,.blog-article ol{
  margin:0 0 16px 24px;color:rgba(255,255,255,.85);
}
.blog-article li{margin-bottom:6px}
.blog-article li strong{color:var(--cyan)}

/* ---- TABLES ---- */
.blog-article table{
  width:100%;border-collapse:collapse;
  margin:24px 0;font-size:15px;
}
.blog-article th{
  text-align:left;padding:12px 16px;
  background:rgba(0,204,255,.1);
  border-bottom:2px solid var(--cyan);
  font-weight:600;color:var(--cyan);
  font-size:14px;text-transform:uppercase;letter-spacing:.5px;
}
.blog-article td{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  color:rgba(255,255,255,.8);
}
.blog-article tr:hover td{background:var(--surface)}

/* ---- BLOCKQUOTE (chat examples) ---- */
.blog-article blockquote{
  margin:24px 0;padding:20px 24px;
  background:var(--surface);
  border-left:3px solid var(--cyan);
  border-radius:0 12px 12px 0;
  font-size:15px;color:rgba(255,255,255,.85);
}
.blog-article blockquote strong{color:var(--cyan)}

/* ---- HIGHLIGHT BOX ---- */
.highlight-box{
  background:linear-gradient(135deg,rgba(0,204,255,.08),rgba(157,0,255,.08));
  border:1px solid rgba(0,204,255,.2);
  border-radius:12px;
  padding:24px 28px;margin:32px 0;
}
.highlight-box strong{color:var(--cyan)}

/* ---- CTA ---- */
.blog-cta{
  text-align:center;
  margin:56px 0 0;
  padding:40px 24px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
}
.blog-cta h2{
  background:var(--gradient);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  margin:0 0 12px;font-size:26px;
}
.blog-cta p{color:var(--text-muted);margin-bottom:24px}
.blog-cta a.btn{
  display:inline-block;
  padding:14px 36px;
  background:var(--btn-gradient);
  color:#fff;font-weight:700;font-size:16px;
  border-radius:10px;text-decoration:none;
  box-shadow:0 4px 20px rgba(0,204,255,.35);
  transition:transform .2s,box-shadow .2s;
}
.blog-cta a.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(0,204,255,.5);
}

/* ---- BLOG INDEX ---- */
.blog-index{
  max-width:900px;margin:0 auto;padding:48px 24px 80px;
}
.blog-index h1{
  font-size:clamp(28px,5vw,42px);font-weight:800;
  margin-bottom:12px;
  background:var(--gradient);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.blog-index .subtitle{color:var(--text-muted);margin-bottom:48px;font-size:18px}

.blog-card{
  display:block;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px 32px;
  margin-bottom:20px;
  text-decoration:none;
  transition:border-color .25s,transform .25s,box-shadow .25s;
}
.blog-card:hover{
  border-color:rgba(0,204,255,.4);
  transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(0,204,255,.12);
}
.blog-card h2{
  font-size:21px;font-weight:700;color:var(--text);margin:0 0 8px;
}
.blog-card p{color:var(--text-muted);font-size:15px;margin:0 0 12px;line-height:1.5}
.blog-card .tag{
  display:inline-block;
  padding:4px 12px;
  background:rgba(0,204,255,.1);
  color:var(--cyan);
  border-radius:20px;font-size:12px;font-weight:600;
  margin-right:8px;
}

/* ---- FOOTER ---- */
.blog-footer{
  text-align:center;padding:32px 24px;
  border-top:1px solid var(--border);
  color:var(--text-dim);font-size:14px;
}
.blog-footer a{color:var(--cyan);text-decoration:none}

/* ---- RESPONSIVE ---- */
@media(max-width:640px){
  .blog-article{padding:32px 16px 60px}
  .blog-article table{font-size:13px}
  .blog-article th,.blog-article td{padding:8px 10px}
  .blog-nav .nav-links{gap:14px}
  .blog-nav .nav-links a{font-size:13px}
}

/* ---- NAV BACK BUTTON ---- */
.blog-nav .nav-back{
  color:var(--cyan);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  padding:6px 14px;
  border:1px solid rgba(0,204,255,.3);
  border-radius:8px;
  transition:background .2s,border-color .2s;
  margin-right:16px;
  white-space:nowrap;
}
.blog-nav .nav-back:hover{
  background:rgba(0,204,255,.1);
  border-color:var(--cyan);
}
@media(max-width:640px){
  .blog-nav .nav-back{font-size:12px;padding:4px 10px;margin-right:8px}
}