/* Majiabin Blog redesign: black / gold / orange editorial skin */
:root {
  --mj-bg: #050504;
  --mj-panel: #0c0b08;
  --mj-cream: #fff6d8;
  --mj-muted: rgba(255, 246, 216, 0.62);
  --mj-line: rgba(255, 214, 92, 0.18);
  --mj-gold: #ffd34d;
  --mj-orange: #ff6b1a;
  --mj-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

html {
  background: var(--mj-bg);
}

body {
  color: var(--mj-cream);
  background:
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px) 0 0 / 25vw 100%,
    linear-gradient(0deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 100% 240px,
    radial-gradient(circle at 76% 12%, rgba(255,107,26,.14), transparent 24rem),
    radial-gradient(circle at 18% 70%, rgba(255,211,77,.08), transparent 28rem),
    var(--mj-bg);
  font-family: "Inter", "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(255,107,26,.05) 42.2% 42.5%, transparent 42.8%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,211,77,.024) 47px, transparent 48px);
  opacity: .85;
}

a {
  color: var(--mj-gold);
}

a:hover {
  color: var(--mj-orange) !important;
}

#header {
  background:
    linear-gradient(180deg, rgba(255,211,77,.12), transparent 42%),
    linear-gradient(145deg, #100d07, #030303 62%) !important;
  border-right: 1px solid var(--mj-line);
  box-shadow: 16px 0 70px rgba(0,0,0,.45);
}

#header::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,211,77,.16);
  pointer-events: none;
}

#header .avatar {
  margin-top: 34px;
  position: relative;
  z-index: 1;
}

#header .avatar::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,211,77,.22), rgba(255,107,26,.08) 46%, transparent 68%);
  filter: blur(2px);
  opacity: .72;
  animation: mj-avatar-glow 4.8s ease-in-out infinite;
}

#header .avatar img {
  position: relative;
  width: 96px !important;
  height: 96px;
  object-fit: cover;
  border: 2px solid var(--mj-gold);
  box-shadow: 0 0 0 8px rgba(255,211,77,.06), 0 18px 46px rgba(255,107,26,.18);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

#header .avatar img:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: var(--mj-orange);
  box-shadow: 0 0 0 10px rgba(255,107,26,.08), 0 22px 60px rgba(255,107,26,.28);
}

#header h1 {
  margin: 24px auto 10px;
  color: var(--mj-cream);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .02em;
}

#header .sns {
  position: relative;
  z-index: 1;
  margin-top: 16px;
}

#header .sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 2px;
  color: var(--mj-cream);
  border: 1px solid rgba(255,246,216,.18);
  border-radius: 50%;
  background: rgba(255,246,216,.035);
}

#header .sns a:hover {
  color: #080602 !important;
  background: var(--mj-gold);
  border-color: var(--mj-gold);
}

#header .nav {
  position: relative;
  z-index: 1;
  margin: 28px 0;
}

#header .nav ul {
  margin: 0 18px;
}

#header .nav ul li {
  border-bottom: 1px solid rgba(255,246,216,.12);
  padding: 0;
}

#header .nav a {
  display: block;
  padding: 12px 8px;
  color: var(--mj-muted);
  font-size: 14px;
  font-weight: 700;
}

#header .nav a:hover {
  color: var(--mj-cream) !important;
  background: linear-gradient(90deg, rgba(255,211,77,.12), transparent);
}

#header .nav ul li ul {
  background: #161006;
  border: 1px solid rgba(255,211,77,.22);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

#header .weixin {
  color: var(--mj-muted);
  left: 0;
  right: 0;
  width: 100%;
}

.uptop {
  margin: 0 0 24px;
  padding: 18px 22px;
  color: var(--mj-cream);
  background: linear-gradient(90deg, rgba(255,211,77,.14), rgba(255,107,26,.06));
  border: 1px solid var(--mj-line);
  border-left: 4px solid var(--mj-gold);
  box-shadow: var(--mj-shadow);
  font-size: 18px;
  font-weight: 800;
}

.uptop a {
  color: var(--mj-cream);
}

.article-list-1,
.article-list-2,
.widget,
.read,
.support-author,
#respond {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent),
    rgba(10,9,6,.78);
  border: 1px solid var(--mj-line);
  border-radius: 0;
  box-shadow: 0 18px 56px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}

.article-list-1 {
  position: relative;
  margin-bottom: 28px;
  padding: 28px 30px 30px;
  animation: mj-card-rise .72s cubic-bezier(.2,.8,.2,1) both;
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.article-list-1::before,
.article-list-2::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 22px;
  bottom: 22px;
  width: 3px;
  background: linear-gradient(180deg, var(--mj-gold), var(--mj-orange));
  opacity: .75;
}

.article-list-1:hover {
  transform: translateY(-5px);
  border-color: rgba(255,211,77,.42);
  background: linear-gradient(180deg, rgba(255,211,77,.07), rgba(10,9,6,.82));
  box-shadow: 0 26px 80px rgba(0,0,0,.38), 0 0 0 1px rgba(255,211,77,.08) inset;
}

.article-list-1:hover .post-title a,
.article-list-2:hover .post-title a {
  color: #fff9e8;
  text-shadow: 0 0 18px rgba(255,211,77,.16);
}

.article-list-1 .post-title {
  margin: 0 0 12px;
}

.article-list-1 .post-title a {
  color: var(--mj-cream);
  font-size: 30px;
  line-height: 1.25;
  font-weight: 900;
}

.article-list-1 .post-meta,
.article-list-2 .post-meta,
.view-meta {
  color: var(--mj-muted);
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .02em;
}

.article-list-1 .post-meta a,
.article-list-2 .post-meta a,
.view-meta a {
  color: var(--mj-muted);
}

.article-list-1 .post-meta i,
.article-list-2 .post-meta i,
.view-meta i {
  color: var(--mj-gold);
}

.article-list-1 .post-content p {
  margin: 18px 0 0;
  color: rgba(255,246,216,.78);
  font-size: 16px;
  line-height: 1.92;
}

.article-list-2 {
  position: relative;
  margin-bottom: 18px;
  padding: 22px 24px 20px;
  border-bottom: 1px solid var(--mj-line);
  animation: mj-card-rise .64s cubic-bezier(.2,.8,.2,1) both;
  transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.article-list-2:hover {
  transform: translateY(-3px);
  border-color: rgba(255,211,77,.36);
  background:
    linear-gradient(180deg, rgba(255,211,77,.055), transparent),
    rgba(10,9,6,.82);
  box-shadow: 0 18px 58px rgba(0,0,0,.32);
}

.article-list-2 .post-time {
  color: var(--mj-gold);
  font-family: "SF Mono", Menlo, monospace;
  font-size: 12px;
}

.article-list-2 .post-title {
  line-height: 1.45;
}

.article-list-2 .post-title a {
  color: var(--mj-cream);
  font-size: 22px;
  font-weight: 850;
}

.widget {
  padding: 26px;
  margin-bottom: 22px;
  transition: border-color .28s ease, background .28s ease, box-shadow .28s ease;
}

.widget:hover {
  border-color: rgba(255,211,77,.32);
  background:
    linear-gradient(180deg, rgba(255,211,77,.045), transparent),
    rgba(10,9,6,.82);
  box-shadow: 0 18px 58px rgba(0,0,0,.3);
}

.widget .widget-title {
  color: var(--mj-cream);
  font-size: 16px;
  font-weight: 900;
}

.widget .widget-title::after {
  width: 52px;
  height: 3px;
  background: linear-gradient(90deg, var(--mj-gold), var(--mj-orange));
}

.widget a,
.widget li {
  color: rgba(255,246,216,.72);
}

.widget a:hover {
  color: var(--mj-gold) !important;
}

.widget li {
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255,246,216,.08);
  transition: transform .22s ease, color .22s ease;
}

.widget li:hover {
  transform: translateX(3px);
}

.widget li::before {
  color: var(--mj-gold);
}

.widget-tags a {
  display: inline-block;
  margin: 4px 4px 4px 0;
  padding: 4px 8px;
  color: var(--mj-cream) !important;
  border: 1px solid rgba(255,211,77,.22);
  background: rgba(255,211,77,.055);
}

.form-control {
  color: var(--mj-cream);
  background: rgba(0,0,0,.34);
  border: 1px solid rgba(255,246,216,.16);
  box-shadow: none;
}

.form-control:focus {
  border-color: var(--mj-gold);
  box-shadow: 0 0 0 3px rgba(255,211,77,.12);
}

.btn,
.btn-default {
  color: #080602;
  border-color: var(--mj-gold);
  background: var(--mj-gold);
}

.btn:hover,
.btn-default:hover {
  color: #080602 !important;
  border-color: var(--mj-orange);
  background: var(--mj-orange);
}

.view {
  margin-top: 10px;
}

.view-title {
  color: var(--mj-cream);
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: 0;
}

.view-title.page-title {
  padding-bottom: 24px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--mj-line);
}

.view-meta {
  margin: 24px 0 34px;
  padding: 14px 0;
  border-top: 1px solid var(--mj-line);
  border-bottom: 1px solid var(--mj-line);
}

.view-content {
  color: rgba(255,246,216,.88);
  font-size: 18px;
  line-height: 1.92;
}

.view-content p {
  margin: 0 0 1.35em;
}

.view-content h2,
.view-content h3,
.view-content h4 {
  color: var(--mj-cream);
  line-height: 1.25;
}

.view-content h3 {
  margin-top: 54px;
  font-size: 28px;
}

.view-content blockquote {
  color: var(--mj-cream);
  background: linear-gradient(90deg, rgba(255,211,77,.12), rgba(255,107,26,.05));
  border-left: 4px solid var(--mj-gold);
  font-size: 17px;
  line-height: 1.85;
}

.view-content h5 {
  color: var(--mj-cream);
  border: 1px solid var(--mj-line);
  background: rgba(255,211,77,.08);
}

.view-content pre,
.view-content code {
  color: #ffeaa0;
  background: #11100c;
  border: 1px solid rgba(255,211,77,.15);
}

.view-content pre {
  padding: 18px;
  overflow: auto;
}

.view-tag,
.view-tag a {
  color: var(--mj-muted);
}

.support-author {
  border-left: 4px solid var(--mj-orange);
}

.support-author .btn-primary {
  color: #080602;
  border-color: var(--mj-gold);
  background: linear-gradient(135deg, var(--mj-gold), var(--mj-orange));
}

#comments .comment-head {
  border-color: var(--mj-line);
  color: var(--mj-muted);
}

#comments .comment_li {
  border-bottom: 1px solid var(--mj-line);
  color: rgba(255,246,216,.82);
}

#comments .comment_author {
  color: var(--mj-gold);
}

#comments .comment_time {
  color: var(--mj-muted);
}

#comments .children .comment_li {
  border-color: rgba(255,211,77,.18);
  background: rgba(255,211,77,.045);
}

.read {
  padding: 22px 24px;
  border-top: 1px solid var(--mj-line);
  border-bottom: 1px solid var(--mj-line);
}

.read-head {
  color: var(--mj-gold);
  font-family: "SF Mono", Menlo, monospace;
  font-size: 13px;
}

.read-list ul li a {
  color: rgba(255,246,216,.76);
}

.pagination > li > a,
.pagination > li > span {
  color: var(--mj-cream);
  background: rgba(255,246,216,.045);
  border-color: var(--mj-line);
}

.pagination > .active > a,
.pagination > .active > a:hover {
  color: #080602 !important;
  background: var(--mj-gold);
  border-color: var(--mj-gold);
}

@keyframes mj-card-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mj-avatar-glow {
  0%,
  100% {
    opacity: .58;
    transform: translate(-50%, -50%) scale(.96);
  }
  50% {
    opacity: .9;
    transform: translate(-50%, -50%) scale(1.06);
  }
}

.article-list-1:nth-of-type(1),
.article-list-2:nth-of-type(1) {
  animation-delay: .04s;
}

.article-list-1:nth-of-type(2),
.article-list-2:nth-of-type(2) {
  animation-delay: .1s;
}

.article-list-1:nth-of-type(3),
.article-list-2:nth-of-type(3) {
  animation-delay: .16s;
}

.article-list-1:nth-of-type(n+4),
.article-list-2:nth-of-type(n+4) {
  animation-delay: .22s;
}

@media (prefers-reduced-motion: reduce) {
  #header .avatar::before,
  .article-list-1,
  .article-list-2 {
    animation: none;
  }

  .article-list-1,
  .article-list-2,
  .widget,
  .widget li,
  #header .avatar img {
    transition: none;
  }
}

#footer {
  color: var(--mj-muted);
  padding-bottom: 34px;
}

.copyright {
  padding-top: 18px;
  border-top: 1px solid var(--mj-line);
  background: none;
}

.copyright p,
.copyright a {
  color: var(--mj-muted);
}

.copyright b {
  color: var(--mj-cream);
}

#titleBar {
  background: #050504;
  border-bottom: 1px solid var(--mj-line);
}

#titleBar .title,
#titleBar .title a {
  color: var(--mj-cream);
}

#titleBar .toggle::before {
  color: #080602;
  background: var(--mj-gold);
}

@media screen and (max-width: 1024px) {
  #main,
  #footer {
    margin-left: 0;
    padding-top: 5em;
  }

  #header {
    background: #070604 !important;
  }

  #header::before {
    inset: 14px;
  }
}

@media screen and (max-width: 736px) {
  body {
    background:
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 50vw 100%,
      linear-gradient(0deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 100% 180px,
      var(--mj-bg);
  }

  .article-list-1 {
    padding: 22px 20px;
  }

  .article-list-1 .post-title a {
    font-size: 24px;
    overflow-wrap: anywhere;
  }

  .article-list-1 .post-meta,
  .article-list-2 .post-meta {
    white-space: normal;
    line-height: 1.8;
  }

  .article-list-1 .post-content p,
  .view-content p {
    overflow-wrap: anywhere;
  }

  .uptop {
    font-size: 17px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }

  .view {
    padding-left: 22px;
    padding-right: 22px;
  }

  .view-content {
    font-size: 17px;
    line-height: 1.86;
  }

  #footer {
    padding-top: 1em;
  }
}