/* ==============================================
   今遂 JIN SUI · AI 穿搭概念产品展示主题
   Lavender Dream / Glassmorphism / Motion UI
   ============================================== */

:root {
  --lavender: #A7B6FF;
  --purple: #8177F4;
  --yellow: #FFD86B;
  --ink: #2B2B3A;
  --cream: #F8F7F3;
  --white: #FFFFFF;
  --muted: #89899A;
  --line: rgba(121, 117, 170, .13);
  --glass: rgba(255, 255, 255, .76);
  --shadow: 0 14px 42px rgba(91, 84, 174, .09);
}

/* 01 · 全局 */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-color: #A7B6FF #F8F7F3;
}

body {
  margin: 0 !important;
  color: var(--ink) !important;
  background:
    radial-gradient(ellipse at 8% 6%,
      rgba(167,182,255,.22), transparent 34%),
    radial-gradient(ellipse at 92% 22%,
      rgba(255,216,107,.16), transparent 28%),
    linear-gradient(180deg, #FBFAF7, #F7F6FC 52%, #FBFAF7) !important;
  font-family: "Inter", "PingFang SC",
    "Microsoft YaHei", sans-serif !important;
  font-size: 15px;
  line-height: 1.9;
}

/* 背景漂浮光斑 */
body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  filter: blur(75px);
  opacity: .23;
  pointer-events: none;
  animation: js-float 13s ease-in-out infinite alternate;
}

body::before {
  top: 15%;
  left: -180px;
  background: #A7B6FF;
}

body::after {
  right: -180px;
  bottom: 5%;
  background: #FFD86B;
  animation-delay: -6s;
}

@keyframes js-float {
  from { transform: translate3d(0, -15px, 0) scale(.95); }
  to   { transform: translate3d(30px, 25px, 0) scale(1.12); }
}

/* 02 · 加宽整个页面 */
#home {
  width: calc(100% - 64px) !important;
  max-width: 1680px !important;
  margin: 24px auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* 03 · 品牌 Hero 区 */
#header {
  position: relative;
  isolation: isolate;
  min-height: 270px;
  padding: 55px 6% !important;
  margin-bottom: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.9) !important;
  border-radius: 28px;
  background:
    radial-gradient(circle at 85% 20%,
      rgba(255,255,255,.9), transparent 22%),
    radial-gradient(circle at 75% 110%,
      rgba(167,182,255,.44), transparent 38%),
    linear-gradient(120deg, #FFFDF8, #F2F0FF 62%, #FFF8E6) !important;
  box-shadow: var(--shadow);
}

#header::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 310px;
  height: 310px;
  right: 8%;
  top: -130px;
  border: 1px solid rgba(129,119,244,.2);
  border-radius: 50%;
  box-shadow:
    0 0 0 28px rgba(167,182,255,.09),
    0 0 0 58px rgba(167,182,255,.06),
    0 0 0 92px rgba(255,216,107,.08);
  animation: js-orbit 22s linear infinite;
  pointer-events: none;
}

@keyframes js-orbit {
  to { transform: rotate(360deg); }
}

#blogTitle {
  position: relative;
  z-index: 1;
  float: none !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  background: transparent !important;
}

#blogTitle h1 {
  margin: 0 0 12px !important;
  font-family: "Georgia", "Songti SC", serif !important;
  font-size: clamp(38px, 5vw, 66px) !important;
  font-weight: 700 !important;
  letter-spacing: 3px;
  line-height: 1.25;
}

#blogTitle h1 a {
  color: #35354B !important;
  text-decoration: none !important;
  background: linear-gradient(100deg, #34354B, #8278F4 65%, #A6B3FF);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#blogTitle h2 {
  max-width: 720px;
  margin: 14px 0 0 !important;
  color: #77758D !important;
  font-size: clamp(13px, 1.4vw, 17px) !important;
  font-weight: 400 !important;
  letter-spacing: 2px;
}

/* 04 · 导航栏玻璃拟态 */
#navigator {
  position: sticky;
  top: 8px;
  z-index: 99;
  height: auto !important;
  min-height: 58px;
  margin-bottom: 28px;
  padding: 0 24px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(75,68,140,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

#navList {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#navList li {
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

#navList a {
  display: block;
  padding: 14px 19px !important;
  color: #6F6E83 !important;
  font-size: 13px;
  text-decoration: none !important;
  border-radius: 12px;
  transition: all .28s ease;
}

#navList a:hover {
  color: #6358DE !important;
  background: linear-gradient(135deg, #F0EEFF, #FFF8DF) !important;
  transform: translateY(-2px);
}

/* 05 · 主体布局 */
#main {
  display: flex !important;
  align-items: flex-start;
  gap: 28px;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
}

#mainContent {
  float: none !important;
  flex: 1 1 0;
  width: 0 !important;
  min-width: 0;
  padding: 0 !important;
  background: transparent !important;
}

#mainContent .forFlow {
  padding: 0 !important;
}

/* 06 · 文章卡片 */
.day {
  margin-bottom: 26px !important;
  padding: 34px 38px !important;
  background: var(--glass) !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  border-radius: 22px;
  box-shadow: var(--shadow);
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease;
}

.day:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 55px rgba(91,84,174,.14);
  border-color: rgba(167,182,255,.65) !important;
}

.dayTitle {
  margin: 0 0 22px !important;
  padding-bottom: 12px !important;
  color: #9B99AF !important;
  font-size: 12px !important;
  letter-spacing: 2px;
  border-bottom: 1px solid var(--line);
}

.dayTitle a {
  color: #85839C !important;
  text-decoration: none !important;
}

.postTitle {
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  font-size: clamp(21px, 2vw, 27px) !important;
  line-height: 1.55;
}

.postTitle a {
  color: #303044 !important;
  text-decoration: none !important;
  transition: color .2s;
}

.postTitle a:hover {
  color: #8075F0 !important;
}

.postCon {
  color: #777487 !important;
  line-height: 2.05;
  overflow-wrap: anywhere;
}

.postDesc {
  margin-top: 18px !important;
  padding-top: 14px !important;
  color: #A19EB0 !important;
  font-size: 12px !important;
  border-top: 1px solid var(--line);
}

.postDesc a {
  color: #8177E9 !important;
}

.postSeparator {
  border: none !important;
}

/* 07 · 渐变阅读按钮 */
.c_b_p_desc_readmore,
a.c_b_p_desc_readmore {
  display: inline-block;
  margin-top: 15px;
  padding: 9px 20px;
  color: #FFFFFF !important;
  background: linear-gradient(110deg, #9186FA, #A7B6FF) !important;
  border: none !important;
  border-radius: 999px;
  text-decoration: none !important;
  box-shadow: 0 5px 15px rgba(129,119,244,.2);
  transition: all .25s ease;
}

.c_b_p_desc_readmore:hover {
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 9px 23px rgba(129,119,244,.32);
}

/* 08 · 侧边栏 */
#sideBar {
  float: none !important;
  flex: 0 0 300px;
  width: 300px !important;
  min-width: 0;
  padding: 0 !important;
  background: transparent !important;
}

#sideBarMain {
  padding: 0 !important;
}

.newsItem,
#blog-calendar,
#sidebar_search,
.catList,
#sideBarMain > div {
  margin-bottom: 22px !important;
  padding: 23px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(255,255,255,.96) !important;
  border-radius: 20px;
  box-shadow: 0 10px 32px rgba(91,84,174,.055);
}

.catListTitle {
  margin: 0 0 15px !important;
  padding-bottom: 12px !important;
  color: #38374F !important;
  font-size: 16px !important;
  border-bottom: 1px solid var(--line) !important;
}

#sideBar a {
  color: #77758C;
  text-decoration: none;
  transition: color .2s;
}

#sideBar a:hover {
  color: #8177F4 !important;
}

#sideBar li {
  margin: 8px 0;
  line-height: 1.85;
}

#q {
  width: 100% !important;
  padding: 11px 14px !important;
  color: var(--ink) !important;
  background: #F8F7FC !important;
  border: 1px solid #E9E6F8 !important;
  border-radius: 12px !important;
  outline: none;
}

#q:focus {
  border-color: #A7B6FF !important;
  box-shadow: 0 0 0 4px rgba(167,182,255,.15);
}

/* 09 · 文章详情页 */
#topics {
  min-width: 0;
  padding: 42px 48px !important;
  background: rgba(255,255,255,.88) !important;
  border: 1px solid rgba(255,255,255,.98) !important;
  border-radius: 22px;
  box-shadow: var(--shadow);
}

#topics .postTitle {
  margin-bottom: 24px !important;
  font-size: clamp(27px, 3vw, 36px) !important;
  line-height: 1.5;
}

#topics .postBody,
#cnblogs_post_body {
  color: #393849 !important;
  font-size: 15px !important;
  line-height: 2.05 !important;
  overflow-wrap: anywhere;
}

#cnblogs_post_body p {
  margin: 1.15em 0;
}

#cnblogs_post_body h1,
#cnblogs_post_body h2,
#cnblogs_post_body h3,
#cnblogs_post_body h4 {
  margin-top: 1.8em;
  margin-bottom: .8em;
  color: #333349;
  line-height: 1.5;
}

#cnblogs_post_body h1 {
  font-size: 29px;
}

#cnblogs_post_body h2 {
  padding-bottom: 10px;
  font-size: 23px;
  border-bottom: 1px solid #EBE8F9;
}

#cnblogs_post_body h3 {
  padding-left: 13px;
  font-size: 19px;
  border-left: 3px solid #A7B6FF;
}

#cnblogs_post_body a {
  color: #776BE6;
  text-decoration: none;
  border-bottom: 1px solid #D9D4FF;
}

#cnblogs_post_body img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(60,55,110,.08);
  transition: transform .3s ease;
}

#cnblogs_post_body img:hover {
  transform: translateY(-3px);
}

/* 10 · 引用块 */
#cnblogs_post_body blockquote {
  margin: 24px 0;
  padding: 18px 23px;
  color: #77718F;
  background: linear-gradient(110deg, #F2F0FF, #FFF9E9);
  border-left: 3px solid #A7B6FF;
  border-radius: 0 14px 14px 0;
}

/* 11 · 代码块 */
pre {
  max-width: 100%;
  overflow-x: auto;
  padding: 21px !important;
  color: #EAE9FF !important;
  background: #2B2B3A !important;
  border: 1px solid #424257 !important;
  border-radius: 15px !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
}

.cnblogs_code {
  max-width: 100%;
  overflow-x: auto;
  padding: 15px !important;
  background: #F3F1FC !important;
  border: 1px solid #E6E2FA !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}

.cnblogs_code pre {
  padding: 0 !important;
  color: #38374A !important;
  background: transparent !important;
  border: none !important;
}

/* 12 · 表格 */
#cnblogs_post_body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}

#cnblogs_post_body th,
#cnblogs_post_body td {
  padding: 12px 16px;
  border: 1px solid #EAE7F5;
  text-align: left;
}

#cnblogs_post_body th {
  color: #3D3B57;
  background: #F0EEFF;
}

#cnblogs_post_body tr:nth-child(even) {
  background: #FBFAFF;
}

/* 13 · 评论 */
#comment_form,
#comments {
  margin-top: 24px;
  padding: 28px !important;
  color: var(--ink);
  background: rgba(255,255,255,.88);
  border: 1px solid white;
  border-radius: 20px;
}

textarea,
input[type="text"] {
  max-width: 100%;
  border: 1px solid #E9E6F5;
  border-radius: 10px;
}

textarea:focus,
input[type="text"]:focus {
  outline: none;
  border-color: #A7B6FF;
}

/* 14 · 分页 */
#homepage_top_pager,
#homepage_bottom_pager,
.pager {
  margin: 28px 0 !important;
  text-align: center;
}

#homepage_top_pager a,
#homepage_bottom_pager a,
.pager a {
  display: inline-block;
  margin: 4px;
  padding: 8px 15px;
  color: #716C8A !important;
  background: white;
  border: 1px solid #ECE9F8;
  border-radius: 999px;
  text-decoration: none !important;
  transition: all .2s;
}

#homepage_top_pager a:hover,
#homepage_bottom_pager a:hover,
.pager a:hover {
  color: white !important;
  background: #8177F4;
  border-color: #8177F4;
}

/* 15 · 页脚 */
#footer {
  margin-top: 30px !important;
  padding: 27px !important;
  color: #85829B !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid white !important;
  border-radius: 20px;
  font-size: 12px;
  text-align: center;
}

/* 16 · 文字选中效果 */
::selection {
  color: #2B2B3A;
  background: #D9D4FF;
}

/* 17 · 平板 */
@media screen and (max-width: 1100px) {
  #home {
    width: calc(100% - 32px) !important;
  }

  #main {
    gap: 20px;
  }

  #sideBar {
    flex-basis: 250px;
    width: 250px !important;
  }

  #topics {
    padding: 32px 28px !important;
  }
}

/* 18 · 手机 */
@media screen and (max-width: 760px) {
  #home {
    width: calc(100% - 20px) !important;
    margin: 10px auto !important;
  }

  #header {
    min-height: 200px;
    padding: 35px 24px !important;
    border-radius: 20px;
  }

  #main {
    display: block !important;
  }

  #mainContent {
    width: 100% !important;
  }

  #sideBar {
    width: 100% !important;
    margin-top: 22px;
  }

  #navigator {
    position: relative;
    top: auto;
    padding: 0 8px !important;
    border-radius: 14px;
  }

  #navList a {
    padding: 11px 12px !important;
  }

  .day {
    padding: 24px 20px !important;
    border-radius: 18px;
  }

  #topics {
    padding: 25px 19px !important;
    border-radius: 18px;
  }

  #topics .postTitle {
    font-size: 27px !important;
  }

  #footer {
    border-radius: 16px;
  }
}

/* 19 · 尊重系统减少动态效果的设置 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}