/* ============================================================
   MURDOS LOG — 主样式
   ============================================================ */

/* ---------- 变量 ---------- */
:root{
  --bg:#eef1f5;
  --card:#ffffff;
  --ink:#12161d;
  --ink-2:#3f4653;
  --ink-3:#5d6470;
  --muted:#98a0ab;
  --line:#eef0f4;
  --blue:#5cb3e0;
  --blue-deep:#2f8fc4;
  --blue-soft:#e4f2fb;

  --r-lg:16px;
  --r-md:12px;
  --r-sm:9px;

  --shadow:0 1px 2px rgba(17,24,39,.04), 0 12px 28px -20px rgba(17,24,39,.30);
  --shadow-hi:0 2px 6px rgba(17,24,39,.05), 0 22px 44px -26px rgba(17,24,39,.38);

  --sans:"PingFang SC","HarmonyOS Sans SC","Noto Sans SC","Microsoft YaHei",
         -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;

  --nav-h:56px;
}

/* ---------- 基础 ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 14px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
img{ display:block; max-width:100%; }
[hidden]{ display:none !important; }
input{ font:inherit; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.i{
  width:1em; height:1em; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  vertical-align:-.12em;
}
.i--solid{ fill:currentColor; stroke:none; }

/* ============================================================
   顶部 Banner + 导航
   ============================================================ */
.hero{
  position:relative;
  height:212px;
  overflow:hidden;
  background:#d9dee6;
}
.hero__media{ position:absolute; inset:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 32%;
  transform:scale(1.02);
}
.hero__veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(16,20,28,.46) 0%, rgba(16,20,28,.22) 24%, rgba(16,20,28,.06) 42%, rgba(16,20,28,0) 60%),
    linear-gradient(180deg, rgba(238,241,245,0) 74%, rgba(238,241,245,.5) 89%, var(--bg) 100%);
}

/* --- 导航 --- */
.nav{
  position:absolute; left:0; right:0; top:0; z-index:40;
  transition:background .26s ease, box-shadow .26s ease, backdrop-filter .26s ease;
}
.nav.is-stuck{
  position:fixed;
  background:rgba(255,255,255,.84);
  -webkit-backdrop-filter:blur(18px) saturate(1.7);
  backdrop-filter:blur(18px) saturate(1.7);
  box-shadow:0 1px 0 rgba(17,24,39,.06), 0 14px 32px -26px rgba(17,24,39,.55);
}
.nav__inner{
  max-width:1600px; margin:0 auto; height:var(--nav-h);
  padding:0 34px;
  display:flex; align-items:center; gap:22px;
}

.brand{ display:flex; align-items:center; gap:10px; flex:none; }
.brand__mark{ display:flex; flex-direction:column; gap:3px; width:16px; }
.brand__mark i{
  display:block; height:1.8px; border-radius:2px; background:currentColor;
  color:#fff; opacity:.92;
}
.brand__mark i:nth-child(2){ width:78%; }
.brand__mark i:nth-child(3){ width:56%; }
.brand__name{
  font-size:14.5px; font-weight:700; letter-spacing:.13em;
  color:#fff; text-shadow:0 1px 10px rgba(12,16,24,.4);
  white-space:nowrap;
}

.nav__links{ display:flex; align-items:center; gap:2px; flex:1 1 auto; min-width:0; }
.nav__link{
  display:inline-flex; align-items:center; gap:5px;
  padding:7px 9px; border-radius:8px;
  font-size:12.5px; letter-spacing:.01em;
  color:rgba(255,255,255,.93); text-shadow:0 1px 8px rgba(12,16,24,.35);
  white-space:nowrap;
  transition:background .18s, color .18s;
}
.nav__link .i{ font-size:13.5px; opacity:.88; }
.nav__link:hover{ background:rgba(255,255,255,.16); }
.nav__link.is-active{ background:rgba(255,255,255,.2); color:#fff; }

.nav.is-stuck .brand__name{ color:#12161d; text-shadow:none; }
.nav.is-stuck .brand__mark i{ color:#12161d; }
.nav.is-stuck .nav__link{ color:#616a78; text-shadow:none; }
.nav.is-stuck .nav__link:hover{ background:#f1f4f8; color:#12161d; }
.nav.is-stuck .nav__link.is-active{ background:#eef1f5; color:#12161d; }
.nav.is-stuck .nav__ico{ color:#616a78; }
.nav.is-stuck .nav__ico:hover{ background:#f1f4f8; color:#12161d; }

.nav__tools{ display:flex; align-items:center; gap:2px; flex:none; }
.nav__ico{
  display:grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  color:#fff;
  transition:background .18s, color .18s;
}
.nav__ico .i{ font-size:15.5px; }
.nav__ico:hover{ background:rgba(255,255,255,.16); }
.nav__burger{ display:none; }

/* ============================================================
   布局
   ============================================================ */
.container{
  position:relative; z-index:2;
  max-width:1600px; margin:0 auto;
  padding:0 34px 70px;
}
.layout{
  display:grid;
  grid-template-columns:284px minmax(0,1fr) 270px;
  gap:16px;
  align-items:start;
  margin-top:-18px;
}
.side{ display:flex; flex-direction:column; gap:14px; min-width:0; }

/* ---------- 卡片 ---------- */
.card{
  background:var(--card);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:16px;
}
.card__hd{
  display:flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:600; letter-spacing:.02em; color:#2a303a;
  margin-bottom:12px;
}
.card__hd .bar{
  width:3px; height:13px; border-radius:2px;
  background:linear-gradient(180deg,#8dccec,#4aa8d8);
}

/* ============================================================
   左栏
   ============================================================ */
.profile{ text-align:center; padding:14px 14px 18px; }
.profile__pic{
  border-radius:var(--r-md); overflow:hidden;
  background:#e8ebef;
  aspect-ratio:1/1;
}
.profile__pic img{
  width:100%; height:100%; object-fit:cover; object-position:50% 26%;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.profile:hover .profile__pic img{ transform:scale(1.035); }
.profile__name{
  margin-top:15px; font-size:18px; font-weight:700; letter-spacing:.01em;
}
.profile__bio{ margin-top:5px; font-size:12px; color:#98a0ab; }
.profile__social{
  display:flex; justify-content:center; gap:8px; margin-top:15px;
}
.profile__social a{
  display:grid; place-items:center;
  width:31px; height:31px; border-radius:50%;
  border:1px solid #eef0f4;
  color:#8a929e;
  transition:.2s;
}
.profile__social a .i{ font-size:14px; }
.profile__social a:hover{
  color:var(--blue-deep); border-color:#cfe8f7; background:#f5fbfe;
  transform:translateY(-2px);
}

/* ---------- 播放器 ---------- */
.track{ display:flex; align-items:center; gap:11px; }
.track__art{
  width:44px; height:44px; border-radius:9px; object-fit:cover; flex:none;
  background:#eef0f4;
  box-shadow:0 6px 14px -10px rgba(17,24,39,.6);
}
.track__meta{ min-width:0; }
.track__title{
  font-size:12.5px; font-weight:600; color:#1b2028;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.track__artist{ font-size:11px; color:#98a0ab; margin-top:1px; }
.track__time{ font-size:10.5px; color:#b0b7c1; font-variant-numeric:tabular-nums; margin-top:1px; }

.player__bar{ display:flex; align-items:center; gap:10px; margin-top:13px; }
.ghost-btn{
  display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  color:#a3abb6; transition:.18s;
}
.ghost-btn:hover{ color:var(--blue-deep); background:#f3f7fa; }
.ghost-btn .i{ font-size:14px; }

.wave{
  flex:1; height:24px; display:flex; align-items:center; gap:2px;
  min-width:0;
}
.wave i{
  flex:1; border-radius:2px; background:#e2e7ed;
  height:var(--h);
  transition:background .16s;
}
.wave i.on{ background:linear-gradient(180deg,#8fd0ef,#57aede); }

.playbtn{
  flex:none; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#63b9e5,#3f9fd0);
  color:#fff;
  box-shadow:0 8px 18px -10px rgba(63,159,208,.95), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .18s, box-shadow .18s;
}
.playbtn .i{ font-size:14px; margin-left:1px; }
.playbtn:hover{ transform:scale(1.06); }
.playbtn:active{ transform:scale(.95); }
.playbtn.is-playing .i{ margin-left:0; }

.queue{ margin-top:13px; border-top:1px solid #f2f4f7; padding-top:4px; }
.queue li{
  display:flex; align-items:center; gap:9px;
  padding:7px 2px; border-radius:8px; cursor:pointer;
  transition:background .16s;
}
.queue li:hover{ background:#f7f9fb; }
.queue li.is-on{ background:#f5fafd; }
.queue__n{ font-size:10.5px; color:#bcc3cc; width:12px; font-variant-numeric:tabular-nums; }
.queue__t{
  flex:1; min-width:0; font-size:11.5px; color:#6a7280;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.queue li.is-on .queue__t{ color:#2f8fc4; font-weight:600; }
.queue__d{ font-size:10.5px; color:#bcc3cc; font-variant-numeric:tabular-nums; }

/* ---------- 标签云 ---------- */
.cloud{ display:flex; flex-wrap:wrap; gap:6px; }
.cloud a{
  font-size:11.5px; color:#77808c;
  background:#f5f7f9; border-radius:7px; padding:3.5px 8px;
  transition:.18s;
}
.cloud a:hover{ background:#eaf6fd; color:var(--blue-deep); }
.cloud a span{ color:#b3bac3; margin-left:3px; font-size:10.5px; }

/* ============================================================
   中栏 · 标签栏
   ============================================================ */
.tabbar{
  display:flex; align-items:center; gap:6px;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:8px; margin-bottom:12px;
  overflow-x:auto; scrollbar-width:none;
}
.tabbar::-webkit-scrollbar{ display:none; }
.tab{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 13px; border-radius:10px;
  font-size:12.5px; color:#69707c; white-space:nowrap;
  transition:.18s;
}
.tab:hover{ background:#f4f6f9; color:#1b2028; }
.tab.is-on{
  background:#131924; color:#fff;
  box-shadow:0 10px 20px -14px rgba(19,25,36,.95);
}
.tab .i{ font-size:13px; opacity:.8; }
.tab__n{ font-size:11px; color:#a8b0ba; font-variant-numeric:tabular-nums; }
.tab.is-on .tab__n{ color:rgba(255,255,255,.5); }

/* ============================================================
   文章卡片
   ============================================================ */
.feed{ display:flex; flex-direction:column; gap:12px; }

.post{
  display:grid; grid-template-columns:minmax(0,1fr); gap:18px;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:18px 20px;
  transition:box-shadow .26s, transform .26s;
}
.post.has-cover{ grid-template-columns:minmax(0,1fr) clamp(168px,26%,262px); }
.post:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hi); }

.post__title{
  font-size:19.5px; font-weight:700; line-height:1.5; letter-spacing:.1px;
  color:#12161d;
  text-wrap:balance;
}
.post__title::before{
  content:""; display:inline-block;
  width:3px; height:14px; border-radius:2px;
  background:#d7dce3;
  margin-right:9px; vertical-align:-1px;
  transition:background .2s;
}
.post:hover .post__title::before{ background:var(--blue); }
.post__title a{ transition:color .2s; }
.post:hover .post__title a{ color:#1b6f9e; }

.post__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
  margin-top:9px; font-size:12px; color:#98a0ab;
}
.post__meta span{ display:inline-flex; align-items:center; gap:5px; }
.post__meta .i{ font-size:13px; opacity:.85; }

.post__excerpt{
  margin-top:12px; font-size:13px; line-height:1.9; color:#5c646f;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

.post__tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:13px; }
.post__tags a{
  font-size:11.5px; color:#77808c; background:#f5f7f9;
  border-radius:6px; padding:3px 8px; transition:.18s;
}
.post__tags a:hover{ background:#eaf6fd; color:var(--blue-deep); }

.post__cover{
  border-radius:var(--r-md); overflow:hidden; background:#eceff3;
  aspect-ratio:1/1; align-self:center;
}
.post__cover img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.post:hover .post__cover img{ transform:scale(1.05); }

.feed__empty{
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:48px 20px; text-align:center; color:#98a0ab; font-size:13px;
}
.feed__empty b{ display:block; color:#4a515d; font-size:14px; margin-bottom:6px; }

/* 列表页头 */
.page-head{
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:20px 22px; margin-bottom:12px;
}
.page-head h2{ font-size:20px; font-weight:700; letter-spacing:.01em; }
.page-head p{ margin-top:5px; font-size:12.5px; color:#98a0ab; }
.page-head .back{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:#8a929e; margin-bottom:10px;
  transition:color .18s;
}
.page-head .back:hover{ color:var(--blue-deep); }

/* ============================================================
   文章详情
   ============================================================ */
.article{
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:26px 30px 34px;
}
.article__back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:#8a929e; margin-bottom:16px; transition:color .18s;
}
.article__back:hover{ color:var(--blue-deep); }
.article__title{
  font-size:26px; font-weight:700; line-height:1.45; letter-spacing:.01em;
  text-wrap:balance;
}
.article__meta{
  display:flex; flex-wrap:wrap; gap:16px;
  margin-top:12px; font-size:12px; color:#98a0ab;
}
.article__meta span{ display:inline-flex; align-items:center; gap:5px; }
.article__cover{
  margin-top:22px; border-radius:var(--r-md); overflow:hidden;
  aspect-ratio:2/1; background:#eceff3;
}
.article__cover img{ width:100%; height:100%; object-fit:cover; object-position:50% 26%; }
.article__body{ margin-top:24px; font-size:14.5px; line-height:2.05; color:#333a45; }
.article__body p{ margin:0 0 18px; }
.article__body p:last-child{ margin-bottom:0; }
.article__tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:26px; }
.article__tags a{
  font-size:12px; color:#77808c; background:#f5f7f9;
  border-radius:7px; padding:4px 10px; transition:.18s;
}
.article__tags a:hover{ background:#eaf6fd; color:var(--blue-deep); }

/* ============================================================
   右栏 · 统计
   ============================================================ */
.stats li{
  display:flex; align-items:baseline; gap:9px;
  padding:6.5px 0; font-size:12.5px;
}
.stats .i{ font-size:13px; color:#a8b0ba; align-self:center; }
.stats__k{ color:#5d6470; white-space:nowrap; }
.stats__dots{
  flex:1; height:0;
  border-bottom:1px dotted #dde2e9;
  transform:translateY(-3px);
}
.stats__v{
  color:#1a1f28; font-weight:600; font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* ============================================================
   右栏 · 日历
   ============================================================ */
.cal__head{
  display:flex; align-items:center; justify-content:space-between;
  margin:-4px 0 10px;
}
.cal__title{
  font-size:12.5px; font-weight:600; color:#2a303a; letter-spacing:.02em;
}
.cal__grid{
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px;
}
.cal__week{
  margin-bottom:4px;
  font-size:10.5px; color:#b3bac3; text-align:center;
}
.cal__week span{ padding:3px 0; }

.cal__day{
  position:relative;
  aspect-ratio:1/1;
  display:grid; place-items:center;
  font-size:11.5px; color:#5d6470;
  border-radius:50%;
  font-variant-numeric:tabular-nums;
  transition:background .16s, color .16s;
}
.cal__day.is-mute{ color:#d3d8df; }
.cal__day.is-weekend{ color:#a8b0ba; }
.cal__day:not(.is-mute):hover{ background:#f1f4f8; color:#12161d; cursor:pointer; }
.cal__day.has-post::after{
  content:""; position:absolute; bottom:3px; left:50%; transform:translateX(-50%);
  width:3px; height:3px; border-radius:50%; background:#9ed3ee;
}
.cal__day.is-today{
  background:linear-gradient(180deg,#63b9e5,#3f9fd0); color:#fff;
  box-shadow:0 8px 16px -10px rgba(63,159,208,.95);
}
.cal__day.is-today.has-post::after{ background:#fff; }
.cal__day.is-sel{ background:#e0f1fa; color:#1f6f99; font-weight:600; }

/* ============================================================
   悬浮按钮
   ============================================================ */
.fab{
  position:fixed; right:26px; bottom:26px; z-index:30;
  display:flex; flex-direction:column; gap:10px;
}
.fab__btn{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; color:#fff;
  transition:transform .2s, box-shadow .2s, opacity .25s;
}
.fab__btn .i{ font-size:17px; }
.fab__btn--blue{
  background:linear-gradient(180deg,#63b9e5,#3f9fd0);
  box-shadow:0 12px 22px -12px rgba(63,159,208,.9);
}
.fab__btn--sky{
  background:#dceffa; color:#4f9dc6;
  box-shadow:0 12px 22px -14px rgba(63,159,208,.7);
}
.fab__btn:hover{ transform:translateY(-3px); }
.fab__btn:active{ transform:scale(.94); }
.fab__btn[hidden]{ display:none; }

/* ============================================================
   搜索
   ============================================================ */
.search{
  position:fixed; inset:0; z-index:90;
  display:flex; justify-content:center; align-items:flex-start;
  padding:11vh 20px 20px;
  background:rgba(18,22,29,.42);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0; pointer-events:none;
  transition:opacity .24s ease;
}
.search.is-open{ opacity:1; pointer-events:auto; }
.search__panel{
  width:min(660px,100%);
  background:#fff; border-radius:18px;
  box-shadow:0 40px 90px -40px rgba(9,13,20,.7);
  padding:14px;
  transform:translateY(-10px) scale(.99);
  transition:transform .26s cubic-bezier(.2,1.2,.4,1);
}
.search.is-open .search__panel{ transform:none; }
.search__field{
  display:flex; align-items:center; gap:10px;
  padding:6px 8px 6px 12px;
  border:1px solid #e8ebf0; border-radius:12px;
  background:#fafbfc;
}
.search__field .i{ font-size:16px; color:#98a0ab; }
.search__field input{
  flex:1; min-width:0;
  border:0; background:transparent; outline:none;
  font-size:14.5px; color:#12161d; padding:8px 0;
  -webkit-appearance:none; appearance:none;
}
.search__field input::-webkit-search-cancel-button,
.search__field input::-webkit-search-decoration{ -webkit-appearance:none; display:none; }
.search__field input::placeholder{ color:#b0b7c1; }
.search__close{
  width:28px; height:28px; border-radius:8px; display:grid; place-items:center;
  color:#a8b0ba;
}
.search__close:hover{ background:#eef1f5; color:#4a515d; }
.search__hint{ font-size:11px; color:#b0b7c1; padding:9px 6px 4px; }
.search__hint kbd{
  font-family:inherit; font-size:10.5px; padding:1px 5px;
  background:#f1f4f8; border-radius:4px; color:#8a929e;
}
.search__results{ max-height:52vh; overflow-y:auto; margin-top:4px; }
.search__item{
  display:block; padding:11px 12px; border-radius:11px;
  transition:background .16s;
}
.search__item:hover{ background:#f5f8fb; }
.search__item h4{ font-size:13.5px; font-weight:600; color:#1b2028; line-height:1.5; }
.search__item p{ font-size:11.5px; color:#98a0ab; margin-top:3px; }
.search__item mark{ background:#dff0fa; color:#1b6f9e; border-radius:3px; padding:0 1px; }
.search__empty{ padding:26px 12px; text-align:center; font-size:12.5px; color:#b0b7c1; }

/* ============================================================
   入场动画
   ============================================================ */
.reveal{ opacity:0; transform:translateY(10px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}

/* ============================================================
   相册 / 友链 / 关于
   ============================================================ */
.gallery{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.gallery__item{
  margin:0; background:#fff; border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden;
  transition:transform .3s, box-shadow .3s;
}
.gallery__item:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hi); }
.gallery__item img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.gallery__item figcaption{
  padding:11px 14px 13px; font-size:12px; color:#7b828d;
  display:flex; align-items:center; gap:6px;
}

.friends{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.friend{
  display:flex; align-items:center; gap:12px;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:14px 16px;
  transition:transform .24s, box-shadow .24s;
}
.friend:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hi); }
.friend__ava{
  width:40px; height:40px; border-radius:13px; flex:none;
  display:grid; place-items:center;
  background:linear-gradient(180deg,#eaf6fd,#d5eaf8);
  color:#4a9bc6; font-weight:700; font-size:15px;
}
.friend__meta{ min-width:0; flex:1; }
.friend__meta b{ display:block; font-size:13px; font-weight:600; color:#1b2028; }
.friend__meta span{ display:block; font-size:11px; color:#98a0ab; margin-top:1px; }
.friend__meta em{ display:block; font-size:11.5px; color:#7b828d; font-style:normal; margin-top:3px; }
.friend > .i{ color:#c9cfd7; font-size:15px; }

.about{
  display:grid; grid-template-columns:148px minmax(0,1fr); gap:24px;
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow);
  padding:26px;
}
.about__ava{
  width:148px; aspect-ratio:1/1; object-fit:cover; object-position:50% 26%;
  border-radius:14px;
}
.about__txt h3{ font-size:18px; font-weight:700; }
.about__txt p{ margin-top:11px; font-size:13px; line-height:1.95; color:#5c646f; }
.about__sig{ color:#98a0ab !important; font-style:italic; }

.ph-clear{
  color:var(--blue-deep); margin-left:6px;
  border-bottom:1px solid rgba(47,143,196,.35);
}

/* ============================================================
   站长后台：登录 / 编辑器 / 卡片操作
   ============================================================ */
body.no-scroll{ overflow:hidden; }

.modal{
  position:fixed; inset:0; z-index:80;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(18,22,29,.5);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.modal.is-open{ display:flex; }

.modal__card{
  position:relative; width:100%;
  background:#fff; border-radius:18px;
  box-shadow:0 40px 90px -40px rgba(9,13,20,.7);
  padding:22px;
  max-height:calc(100vh - 48px);
  overflow:auto;
  animation:pop .26s cubic-bezier(.2,1.2,.4,1);
}
@keyframes pop{ from{ transform:translateY(10px) scale(.985); opacity:0; } to{ transform:none; opacity:1; } }
.modal__card--sm{ max-width:380px; }
.modal__card--lg{ max-width:820px; }

.modal__hd{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:600; color:#1b2028;
  margin-bottom:14px;
}
.modal__hd .bar{ width:3px; height:13px; border-radius:2px; background:linear-gradient(180deg,#8dccec,#4aa8d8); }
.modal__x{
  margin-left:auto; width:30px; height:30px; border-radius:8px;
  display:grid; place-items:center; color:#a8b0ba;
}
.modal__x:hover{ background:#f1f4f8; color:#4a515d; }
.modal__tip{ font-size:12.5px; color:#8a929e; margin-bottom:14px; line-height:1.7; }
.modal__err{ color:#d64545; font-size:12px; margin-top:10px; min-height:16px; }

/* ---------- 登录卡 ---------- */
.login{
  max-width:404px; padding:32px 28px 24px; text-align:center;
}
.login .modal__x{ position:absolute; right:12px; top:12px; }
.login__brand{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-bottom:22px;
}
.login__mark{ display:flex; flex-direction:column; gap:3px; width:16px; }
.login__mark i{ display:block; height:2px; border-radius:2px; background:#cdd6df; }
.login__mark i:nth-child(2){ width:78%; }
.login__mark i:nth-child(3){ width:56%; }
.login__name{ font-size:12.5px; font-weight:700; letter-spacing:.16em; color:#4a515d; }
.login__title{ font-size:21px; font-weight:700; letter-spacing:.02em; color:#12161d; }
.login__tip{ font-size:12.5px; color:#98a0ab; margin:8px 0 20px; }
.login__field{
  display:flex; align-items:center; gap:9px;
  border:1px solid #e6eaf0; border-radius:11px; background:#fafbfc;
  padding:0 12px; transition:.16s; text-align:left;
}
.login__field:focus-within{
  border-color:#a8d8f2; background:#fff;
  box-shadow:0 0 0 3px rgba(99,185,229,.12);
}
.login__field .i{ color:#a8b0ba; font-size:15px; }
.login__field input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  padding:11px 0; font-size:14px; color:#12161d; font-family:inherit;
}
.login__eye{
  width:26px; height:26px; display:grid; place-items:center;
  color:#b0b7c1; border-radius:6px; transition:.15s;
}
.login__eye:hover{ color:#5d6470; background:#f1f4f8; }
.login .modal__err{ text-align:center; }
.login__foot{ margin-top:16px; font-size:11px; color:#b6bdc6; line-height:1.7; }

/* ---------- 轻提示 ---------- */
.toast{
  position:fixed; left:50%; bottom:34px; z-index:95;
  transform:translate(-50%,14px);
  background:#141820; color:#fff; font-size:13px;
  padding:10px 18px; border-radius:11px;
  box-shadow:0 18px 40px -18px rgba(9,13,20,.9);
  opacity:0; pointer-events:none; max-width:80vw;
  transition:opacity .26s, transform .26s cubic-bezier(.2,1.2,.4,1);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* 文章页的编辑入口 */
.article__edit{ display:none; margin-left:auto; align-self:center; }
body.is-admin .article__edit{ display:inline-flex; }

.field{
  width:100%; display:block;
  border:1px solid #e8ebf0; border-radius:10px;
  background:#fafbfc; padding:10px 12px;
  font-size:13.5px; color:#12161d; outline:none;
  transition:border-color .16s, background .16s;
  font-family:inherit;
}
.field:focus{ border-color:#a8d8f2; background:#fff; }
.field--title{ font-size:17px; font-weight:600; padding:12px 14px; }
textarea.field{ resize:vertical; line-height:1.8; min-height:180px; }
textarea.field--multi{ min-height:62px; }
select.field{ cursor:pointer; }

.btn-primary{
  background:linear-gradient(180deg,#63b9e5,#3f9fd0); color:#fff;
  border-radius:10px; padding:9px 16px; font-size:13px; font-weight:600;
  box-shadow:0 8px 18px -12px rgba(63,159,208,.95);
  transition:transform .16s, filter .16s;
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-primary:active{ transform:scale(.98); }
.btn-block{ width:100%; margin-top:12px; }
.btn-danger{
  background:#fdecec; color:#c93b3b; border-radius:10px;
  padding:9px 14px; font-size:13px;
}
.btn-danger:hover{ background:#fbdcdc; }

/* ---------- 编辑器（双栏工作台） ---------- */
.modal--wide{ padding:28px 24px; }

.modal__card--xl{
  max-width:1060px; padding:0; overflow:hidden;
  display:flex; flex-direction:column;
  height:min(92vh,880px);
}

.ed__head{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:14px 20px; border-bottom:1px solid #f0f2f5;
}
.ed__badge{
  font-size:12px; font-weight:600; color:#2f8fc4;
  background:#eaf6fd; border-radius:7px; padding:3px 9px;
}
.ed__sub{ font-size:11.5px; color:#a8b0ba; }

.ed__body{
  display:grid; grid-template-columns:minmax(0,1fr) 274px;
  flex:1; min-height:0;
}
.ed__main{
  display:flex; flex-direction:column; min-height:0;
  padding:14px 22px 10px;
}

.ed__title-input{
  width:100%; border:0; outline:none; background:transparent;
  font-size:22px; font-weight:700; color:#12161d;
  letter-spacing:.01em; padding:6px 0 12px;
  font-family:inherit;
}
.ed__title-input::placeholder{ color:#c6ccd4; font-weight:600; }

.ed__tabs{
  display:flex; align-items:center; gap:4px;
  border-bottom:1px solid #f0f2f5; padding-bottom:8px; margin-bottom:12px;
  flex:none;
}
.ed__tab{
  font-size:12.5px; color:#8a929e; padding:5px 11px; border-radius:7px;
  transition:.16s;
}
.ed__tab:hover{ background:#f4f6f9; }
.ed__tab.is-on{ background:#eef4f8; color:#1b2028; font-weight:600; }

.ed__tools{ margin-left:auto; display:flex; gap:1px; }
.ed__tools button{
  width:29px; height:29px; border-radius:7px;
  display:grid; place-items:center;
  color:#93a0ac; font-size:12px;
  transition:.15s;
}
.ed__tools button .i{ font-size:15px; }
.ed__tools button:hover{ background:#eef4f8; color:#2f8fc4; }

.ed__area{
  flex:1; min-height:0; width:100%;
  border:0; outline:none; resize:none;
  background:transparent; padding:0;
  font-size:14px; line-height:2; color:#333a45;
  font-family:inherit;
}
.ed__area::placeholder{ color:#b9c0c9; line-height:2; }

.ed__preview{
  flex:1; min-height:0; overflow:auto;
  font-size:14px; margin-top:0;
}

.ed__side{
  border-left:1px solid #f0f2f5; background:#fbfcfe;
  padding:16px 16px 20px; overflow:auto;
}
.ed__label{
  font-size:11.5px; color:#98a0ab; letter-spacing:.04em;
  margin:14px 0 6px;
}
.ed__label:first-child{ margin-top:0; }

.ed__cover{
  width:100%; aspect-ratio:16/10; border-radius:10px;
  background:#f2f5f8; border:1px dashed #e1e7ee;
  display:grid; place-items:center; overflow:hidden;
  margin-bottom:8px;
}
.ed__cover img{ width:100%; height:100%; object-fit:cover; }
.ed__cover-ph{ font-size:11.5px; color:#b6bdc6; }

.field--sm{ padding:8px 10px; font-size:12.5px; border-radius:9px; }
textarea.field--sm{ line-height:1.7; }

.ed__foot{
  flex:none; display:flex; align-items:center; gap:10px;
  padding:12px 20px; border-top:1px solid #f0f2f5; background:#fff;
}
.ed__hint{ flex:1; font-size:12px; color:#d64545; }
.ed__count{ font-size:11.5px; color:#b0b7c1; font-variant-numeric:tabular-nums; }

/* 卡片上的编辑按钮：只有登录后才出现 */
.post__admin{
  display:none; gap:6px; margin-top:10px; justify-content:flex-end;
}
body.is-admin .post__admin{ display:flex; }
.mini{
  font-size:11.5px; color:#6a7280; background:#f3f6f9;
  border-radius:6px; padding:3px 8px; transition:.16s;
}
.mini:hover{ background:#e8eff5; color:#2f8fc4; }
.mini--danger:hover{ background:#fdecec; color:#c93b3b; }

.draft-badge{
  display:inline-block; font-size:11px; font-weight:600;
  color:#b4741c; background:#fdf1dc; border-radius:5px;
  padding:1px 7px; margin-right:8px; vertical-align:2px;
}

.fab__btn--pen{
  background:linear-gradient(180deg,#2f3546,#161a22);
  color:#fff;
  box-shadow:0 12px 22px -12px rgba(9,13,20,.9);
}

.nav__ico.is-on{ background:rgba(255,255,255,.24); }
.nav.is-stuck .nav__ico.is-on{ background:#e8f4fb; color:#2f8fc4; }

/* Markdown 正文 */
.article__body h2{ font-size:19px; margin:26px 0 12px; }
.article__body h3{ font-size:16.5px; margin:22px 0 10px; }
.article__body h4{ font-size:15px; margin:20px 0 8px; }
.article__body ul, .article__body ol{ margin:0 0 18px; padding-left:22px; }
.article__body ul{ list-style:disc; }
.article__body ol{ list-style:decimal; }
.article__body li{ margin:5px 0; }
.article__body blockquote{
  margin:0 0 18px; padding:10px 16px; border-left:3px solid #d3e5f1;
  background:#f8fbfd; color:#5c646f; border-radius:0 8px 8px 0;
}
.article__body code{
  background:#f2f5f8; border-radius:5px; padding:1.5px 5px; font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.article__body pre{
  background:#f7f9fb; border:1px solid #eef1f4; border-radius:10px;
  padding:14px; overflow:auto; margin:0 0 18px;
}
.article__body pre code{ background:none; padding:0; }
.article__body a{ color:#2f8fc4; border-bottom:1px solid rgba(47,143,196,.3); }

/* ============================================================
   响应式
   ============================================================ */
@media (min-width:1021px){
  .side--left, .side--right{ position:sticky; top:74px; }
}

@media (max-width:1330px){
  .nav__link{ padding:7px 7px; font-size:12px; }
  .nav__inner{ gap:14px; }
}

@media (max-width:1180px){
  .layout{ grid-template-columns:262px minmax(0,1fr) 240px; }
  .nav__links{
    position:absolute; left:0; right:0; top:calc(var(--nav-h) + 4px);
    flex-direction:column; align-items:stretch; gap:2px;
    margin:0 16px; padding:10px;
    background:#fff; border-radius:14px;
    box-shadow:0 26px 50px -30px rgba(9,13,20,.6);
    display:none;
  }
  .nav__links.is-open{ display:flex; }
  .nav__link{ color:#4a515d !important; text-shadow:none !important; }
  .nav__link:hover{ background:#f1f4f8 !important; }
  .nav__link.is-active{ background:#eef1f5 !important; color:#12161d !important; }
  .nav__burger{ display:grid; }
}

@media (max-width:1020px){
  .container{ padding:0 22px 60px; }
  .nav__inner{ padding:0 22px; }
  .layout{ grid-template-columns:252px minmax(0,1fr); }
  .side--right{
    grid-column:1 / -1;
    display:grid; grid-template-columns:1fr 1fr; gap:14px;
    align-items:start;
  }
  .side--right .cal{ align-self:start; }
}

@media (max-width:860px){
  .modal--wide{ padding:10px; }
  .modal__card--xl{ height:min(94vh,900px); }
  .ed__body{ grid-template-columns:minmax(0,1fr); overflow:auto; }
  .ed__side{ border-left:0; border-top:1px solid #f0f2f5; }
  .ed__main{ padding:12px 16px 8px; }
  .ed__title-input{ font-size:19px; }
  .ed__area, .ed__preview{ min-height:200px; }
  .ed__foot{ padding:10px 16px; flex-wrap:wrap; }
}

@media (max-width:780px){
  .hero{ height:168px; }
  .container{ padding:0 16px 88px; }
  .nav__inner{ padding:0 16px; }
  .layout{ grid-template-columns:minmax(0,1fr); gap:14px; margin-top:-14px; }
  .side--left{ order:1; }
  .side--main{ order:2; }
  .side--right{ order:3; grid-template-columns:1fr; }

  /* 移动端把名片压成一行 */
  .profile{
    display:flex; align-items:center; gap:14px;
    text-align:left; padding:12px 14px;
  }
  .profile__pic{ width:64px; height:64px; flex:none; border-radius:12px; }
  .profile__name{ margin-top:0; font-size:16px; }
  .profile__bio{ margin-top:2px; }
  .profile__social{ margin-top:0; margin-left:auto; gap:6px; }
  .profile__social a{ width:29px; height:29px; }
  .side--left > .card:last-child{ display:none; }

  .post{ padding:15px 16px; }
  .post.has-cover{ grid-template-columns:minmax(0,1fr) 108px; gap:13px; }
  .post__title{ font-size:16.5px; }
  .post__excerpt{ -webkit-line-clamp:2; font-size:12.5px; }
  .post__meta{ gap:11px; font-size:11.5px; }
  .article{ padding:20px 18px 26px; }
  .article__title{ font-size:21px; }
  .fab{ right:14px; bottom:14px; }
}

@media (max-width:520px){
  .post.has-cover{ grid-template-columns:minmax(0,1fr) 92px; }
  .article__cover{ aspect-ratio:16/10; }
  .gallery, .friends{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; }
  .about__ava{ width:110px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}