@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
  --bg-0: #060a14;
  --bg-1: #0a1221;
  --panel: rgba(8, 18, 32, 0.88);
  --panel-2: rgba(7, 15, 28, 0.95);
  --line: #1b2a40;
  --ink: #d6e9ff;
  --ink-soft: #95abc5;
  --title: #eaf5ff;
  --brand: #29f0c7;
  --brand-2: #26a6ff;
  --warn: #ffc857;
  --ok: #3dff9a;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-lg: 0 26px 50px -34px rgba(0, 0, 0, 0.95);
  --shadow-md: 0 18px 30px -25px rgba(0, 0, 0, 0.85);
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: 'Exo 2', 'Segoe UI', sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 4%, rgba(38, 166, 255, 0.22) 0, rgba(38, 166, 255, 0) 34%),
    radial-gradient(circle at 86% 10%, rgba(41, 240, 199, 0.2) 0, rgba(41, 240, 199, 0) 35%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 60%, #08101d 100%) !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(48, 82, 120, 0.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(48, 82, 120, 0.17) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.24;
  z-index: -1;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0, rgba(41, 240, 199, 0.06), transparent 52%);
  z-index: -1;
}

#home,
#main,
#mainContent,
.forFlow,
.day,
.post,
#topics,
.entrylist,
.entrylistPost {
  background: transparent !important;
}

/* Main reading panel */
#topics,
.forFlow,
.day .postTitle,
.entrylistPosttitle,
.postTitle {
  background: linear-gradient(160deg, var(--panel), var(--panel-2)) !important;
  border: 1px solid #1e334d;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}

#topics {
  border-radius: 22px;
  padding: clamp(20px, 4vw, 40px) !important;
}

#post_detail,
#cnblogs_post_body {
  background: transparent !important;
  color: var(--ink);
  line-height: 1.9;
}

#cnblogs_post_body p,
#cnblogs_post_body li {
  color: var(--ink-soft);
}

#cb_post_title_url,
.postTitle a,
.entrylistPosttitle a {
  color: var(--title) !important;
  font-weight: 700;
  text-decoration: none !important;
}

#cb_post_title_url:hover,
.postTitle a:hover,
.entrylistPosttitle a:hover {
  color: #ffffff !important;
}

#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4,
#cnblogs_post_body h5 {
  color: var(--title);
  border-bottom: 1px solid #1b2d45;
  padding-bottom: 0.35em;
  margin-top: 2em;
}

#cnblogs_post_body h1 {
  border-bottom: none;
  position: relative;
  padding-bottom: 0.85em;
}

#cnblogs_post_body h1::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 132px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 18px rgba(41, 240, 199, 0.8);
}

#cnblogs_post_body strong {
  color: #edfbff;
}

#cnblogs_post_body a,
.postCon a,
.entrylistPostSummary a {
  color: #78dbff !important;
  border-bottom: 1px dashed #3aa9da;
  text-decoration: none !important;
  transition: color 180ms ease, border-color 180ms ease;
}

#cnblogs_post_body a:hover,
.postCon a:hover,
.entrylistPostSummary a:hover {
  color: #a0f8ff !important;
  border-color: #6ce8f0;
}

/* Inline code */
#cnblogs_post_body code,
.cnblogs-markdown code,
.postBody code {
  font-family: 'JetBrains Mono', Consolas, monospace !important;
  background: #0f1b2f !important;
  color: var(--brand) !important;
  border: 1px solid #1d3550;
  border-radius: 6px;
  padding: 0.16em 0.42em;
}

/* Code blocks */
#cnblogs_post_body pre,
.cnblogs-markdown pre,
.cnblogs_code,
.cnblogs_code pre,
.postBody pre {
  background: linear-gradient(180deg, #0a121f 0%, #070e19 100%) !important;
  color: #d8efff !important;
  border: 1px solid #214164 !important;
  border-top: 3px solid var(--brand) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-md);
  font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace !important;
}

#cnblogs_post_body pre code,
.cnblogs-markdown pre code,
.cnblogs_code pre code,
.postBody pre code {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  padding: 0 !important;
}

/* SQL coloring in custom spans */
.sql-keyword { color: #49b7ff !important; font-weight: 700; }
.sql-string { color: #ffd479 !important; }
.sql-comment { color: #74d29e !important; font-style: italic; }
.sql-number { color: #7cecf4 !important; }

#cnblogs_post_body img {
  max-width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid #254361;
  box-shadow: 0 25px 40px -32px rgba(0, 0, 0, 1);
}

#cnblogs_post_body hr {
  border: 0;
  border-top: 1px solid #1d2f46;
}

#cnblogs_post_body blockquote {
  background: linear-gradient(120deg, rgba(38, 166, 255, 0.12), rgba(38, 166, 255, 0.05));
  border-left: 6px solid #3aa9ff;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--ink);
}

/* Custom callout blocks used in article fragments */
#cnblogs_post_body .note {
  background: linear-gradient(120deg, rgba(38, 166, 255, 0.12), rgba(38, 166, 255, 0.05));
  border-left: 6px solid #3aa9ff;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--ink);
  padding: 15px 22px;
  margin: 28px 0;
}

#cnblogs_post_body .warning {
  background: linear-gradient(120deg, rgba(255, 200, 87, 0.16), rgba(255, 200, 87, 0.07));
  border-left: 6px solid var(--warn);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--ink);
  padding: 14px 22px;
  margin: 28px 0;
}

#cnblogs_post_body .answer-box {
  background: linear-gradient(145deg, rgba(10, 30, 22, 0.85), rgba(7, 26, 20, 0.92));
  border: 2px solid #1fbf7a;
  border-radius: 22px;
  padding: 24px 28px;
  margin: 30px 0;
  box-shadow: 0 18px 34px -28px rgba(22, 168, 99, 0.6);
}

#cnblogs_post_body .answer-box h3 {
  margin-top: 0;
  border-bottom: none;
  color: var(--ok);
}

#cnblogs_post_body .answer-code {
  background: linear-gradient(180deg, #0d1827 0%, #0a1320 100%);
  color: #dbfff3;
  padding: 16px 26px;
  border-radius: 999px;
  text-align: center;
  font-family: 'JetBrains Mono', Consolas, monospace;
  letter-spacing: 0.03em;
  border: 1px solid #1f835e;
  box-shadow: inset 0 0 0 1px rgba(61, 255, 154, 0.2);
}

/* Homepage readability fixes (for main list page) */
#mainContent .forFlow .dayTitle a {
  color: var(--ink-soft) !important;
}

#mainContent .forFlow .postCon,
#mainContent .forFlow .c_b_p_desc,
#mainContent .forFlow .c_b_p_desc a,
#mainContent .forFlow .postDesc,
#mainContent .forFlow .postDesc span,
#mainContent .forFlow .postDesc a {
  color: var(--ink-soft) !important;
}

#mainContent .forFlow .c_b_p_desc_readmore {
  color: #9fe8ff !important;
  border-bottom: 1px dashed #59c4f0;
}

#mainContent .forFlow .c_b_p_desc_readmore:hover {
  color: #c7f6ff !important;
  border-color: #8edff7;
}

/* Sidebar */
#sideBar,
#leftcontentcontainer,
#rightcontentcontainer,
.newsItem,
.catListTitle,
.catListView,
.catListPostArchive,
.catListTag,
.catListComment,
.catListFeedback,
#blog-news,
#calendar {
  background: linear-gradient(160deg, rgba(8, 18, 32, 0.75), rgba(7, 15, 28, 0.85)) !important;
  color: var(--ink) !important;
  border: 1px solid #1b2e46;
  border-radius: 12px;
}

#sideBar a,
.newsItem a,
.catListView a,
.catListPostArchive a,
.catListTag a,
#calendar a {
  color: #9edcff !important;
}

#sideBar a:hover,
.newsItem a:hover,
.catListView a:hover,
.catListPostArchive a:hover,
.catListTag a:hover,
#calendar a:hover {
  color: #d0f5ff !important;
}

/* Footer/meta */
#post_next_prev,
#postDesc,
.postDesc,
#green_channel,
#author_profile,
#comment_form,
#blog-comments-placeholder,
.feedback_area_title {
  color: var(--ink-soft) !important;
}

::selection {
  background: rgba(41, 240, 199, 0.28);
  color: #ffffff;
}

@media (max-width: 768px) {
  #topics {
    border-radius: 16px;
    padding: 18px 14px 24px !important;
  }

  #cnblogs_post_body pre,
  .cnblogs-markdown pre,
  .cnblogs_code,
  .cnblogs_code pre,
  .postBody pre {
    font-size: 13px !important;
  }
}

@media print {
  body,
  html {
    background: #ffffff !important;
    color: #111111 !important;
  }

  body::before,
  body::after {
    display: none !important;
  }

  #topics,
  .forFlow,
  #cnblogs_post_body,
  .post,
  .day {
    box-shadow: none !important;
    border: none !important;
    background: #ffffff !important;
  }
}