/* =========================================================
   v53 — Japandi · 功能层视觉补充
   覆盖：登入按钮 / 我的小花 / 写帖条 / 浮层 / 评论 / Toast
   保持原侘寂调色：米白 + 茶色 + 朱砂（仅落款 / 提示）
   ========================================================= */

/* ---------- 顶部右侧 auth 区 ---------- */
.brand{ position:relative; }
.auth-area{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:14px;
  font-family:var(--f-serif-en);
}
.btn-enter{
  font-family:var(--f-serif-en);
  font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--ink-1); background:transparent;
  border:1px solid var(--ink-3); padding:7px 18px;
  cursor:pointer; transition:.3s ease;
  border-radius:1px;
}
.btn-enter:hover{ background:var(--ink-1); color:var(--paper-1); }
.btn-enter.vermilion{ border-color:var(--vermilion); color:var(--vermilion); }
.btn-enter.vermilion:hover{ background:var(--vermilion); color:var(--paper-1); }

.me-chip{
  display:flex; align-items:center; gap:8px;
  font-family:var(--f-serif-cn); font-size:13px; color:var(--ink-1);
  cursor:pointer;
}
.me-chip svg{ width:24px; height:24px; }
.me-chip .me-coin{
  font-family:var(--f-serif-en); font-size:11px;
  color:var(--ink-3); letter-spacing:.1em;
  padding-left:8px; border-left:1px solid var(--line-1);
}
.me-chip .arrow{ font-size:10px; color:var(--ink-4); margin-left:2px; }

/* ---------- 中栏顶部：写一段话入口 ---------- */
.composer-bar{
  display:flex; align-items:center; gap:14px;
  background:var(--paper-2);
  border:1px solid var(--line-1);
  padding:14px 18px; margin-bottom:24px;
  position:relative;
  cursor:text;
  transition:.3s ease;
}
.composer-bar:hover{ border-color:var(--ink-3); }
.composer-bar svg{ width:30px; height:30px; flex-shrink:0; }
.composer-bar .ph{
  flex:1; color:var(--ink-3);
  font-family:var(--f-serif-cn); font-size:14px;
  letter-spacing:.05em;
}
.composer-bar .ph em{
  font-family:var(--f-script); font-style:normal;
  color:var(--ink-4); margin-left:8px;
}
.composer-bar .pin{
  font-family:var(--f-serif-en); font-size:10px;
  letter-spacing:.3em; color:var(--ink-4);
  text-transform:uppercase;
}

/* ---------- 通用 modal ---------- */
.modal-mask{
  position:fixed; inset:0; z-index:999;
  background:rgba(42,37,32,.34);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s ease;
  backdrop-filter:blur(2px);
}
.modal-mask.show{ opacity:1; pointer-events:auto; }
.modal{
  width:440px; max-width:92vw;
  background:var(--paper-1);
  border:1px solid var(--line-1);
  padding:36px 36px 28px;
  position:relative;
  box-shadow:0 24px 48px -16px rgba(42,37,32,.18),
             0 4px 12px -2px rgba(42,37,32,.08);
  transform:translateY(8px) scale(.985);
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.modal-mask.show .modal{ transform:translateY(0) scale(1); }
.modal::before{                 /* 折角 */
  content:""; position:absolute; right:0; top:0;
  width:34px; height:34px;
  background:linear-gradient(225deg, var(--paper-2) 50%, transparent 50%);
}
.modal-close{
  position:absolute; right:14px; top:10px;
  font-family:var(--f-serif-en); font-size:18px;
  color:var(--ink-3); background:transparent; border:0;
  cursor:pointer; line-height:1;
}
.modal-close:hover{ color:var(--vermilion); }

.modal-eyebrow{
  font-family:var(--f-serif-en); font-size:10px;
  letter-spacing:.36em; color:var(--ink-3);
  text-transform:uppercase;
  margin-bottom:6px;
}
.modal-title{
  font-family:var(--f-serif-cn); font-weight:500;
  font-size:24px; letter-spacing:.18em;
  color:var(--ink-1); margin-bottom:6px;
}
.modal-sub{
  font-family:var(--f-script); font-size:16px;
  color:var(--ink-3); margin-bottom:24px;
}

.modal-field{ margin-bottom:16px; }
.modal-field label{
  display:block; font-family:var(--f-serif-en);
  font-size:10px; letter-spacing:.3em;
  color:var(--ink-3); text-transform:uppercase;
  margin-bottom:6px;
}
.modal-field input, .modal-field textarea{
  width:100%; box-sizing:border-box;
  background:var(--paper-2);
  border:0; border-bottom:1px solid var(--line-2);
  font-family:var(--f-serif-cn); font-size:15px;
  color:var(--ink-1);
  padding:10px 4px; outline:none;
  transition:.3s ease;
}
.modal-field input:focus,
.modal-field textarea:focus{
  border-bottom-color:var(--ink-1);
  background:var(--paper-1);
}
.modal-field textarea{
  resize:vertical; min-height:120px;
  border:1px solid var(--line-1);
  padding:14px 16px;
  line-height:1.85;
}
.modal-row{ display:flex; gap:12px; align-items:flex-end; }
.modal-row .modal-field{ flex:1; margin-bottom:0; }

.btn-primary, .btn-ghost{
  font-family:var(--f-serif-en);
  font-size:12px; letter-spacing:.32em; text-transform:uppercase;
  padding:10px 22px; cursor:pointer;
  border-radius:1px; transition:.3s ease;
  border:1px solid var(--ink-1);
}
.btn-primary{ background:var(--ink-1); color:var(--paper-1); }
.btn-primary:hover{ background:var(--vermilion); border-color:var(--vermilion); }
.btn-primary:disabled{
  opacity:.4; cursor:not-allowed;
  background:var(--ink-1); border-color:var(--ink-1);
}
.btn-ghost{ background:transparent; color:var(--ink-1); }
.btn-ghost:hover{ background:var(--paper-2); }
.btn-row{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:24px;
}
.btn-row .meta{
  font-family:var(--f-serif-en); font-size:11px;
  letter-spacing:.16em; color:var(--ink-4);
}

.code-row{ display:flex; gap:10px; align-items:center; }
.code-row input{ flex:1; }
.code-send{
  font-family:var(--f-serif-en); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
  padding:10px 16px; cursor:pointer;
  border:1px solid var(--ink-3); background:transparent;
  color:var(--ink-1); white-space:nowrap;
  transition:.3s ease;
}
.code-row input{
  border:1px solid var(--line-1) !important;
  background:var(--paper-1) !important;
  padding:10px 12px !important;
}
.code-send:hover:not(:disabled){ background:var(--ink-1); color:var(--paper-1); }
.code-send:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- post 已绑事件态 ---------- */
.post-foot span{ cursor:pointer; }
.post-foot span:hover{ color:var(--ink-1); }
.post-foot span.is-liked{ color:var(--vermilion); }
.post-foot span.is-liked strong{ color:var(--vermilion); }

/* ---------- 评论区（展开式） ---------- */
.comments{
  margin-top:18px; padding-top:18px;
  border-top:1px dashed var(--line-2);
  display:none;
}
.comments.show{ display:block; }
.comment-item{
  display:flex; gap:12px; margin-bottom:14px;
}
.comment-item svg{ width:28px; height:28px; flex-shrink:0; }
.comment-body{
  flex:1;
  font-family:var(--f-serif-cn); font-size:13.5px;
  color:var(--ink-2); line-height:1.8;
}
.comment-body .who{
  font-weight:500; color:var(--ink-1);
  margin-right:8px;
}
.comment-body .when{
  font-family:var(--f-serif-en); font-size:10px;
  letter-spacing:.16em; color:var(--ink-4);
  margin-left:6px;
}
.comment-empty{
  text-align:center; padding:14px 0;
  font-family:var(--f-script); font-size:14px;
  color:var(--ink-4);
}
.comment-form{
  display:flex; gap:10px; margin-top:14px;
  padding-top:14px; border-top:1px solid var(--line-1);
}
.comment-form input{
  flex:1; background:var(--paper-2);
  border:0; border-bottom:1px solid var(--line-2);
  font-family:var(--f-serif-cn); font-size:13.5px;
  color:var(--ink-1); padding:8px 4px; outline:none;
}
.comment-form input:focus{ border-bottom-color:var(--ink-1); }
.comment-form button{
  font-family:var(--f-serif-en); font-size:11px;
  letter-spacing:.24em; text-transform:uppercase;
  padding:6px 16px; cursor:pointer;
  border:1px solid var(--ink-3); background:transparent;
  color:var(--ink-1); white-space:nowrap;
  transition:.3s ease;
}
.comment-form button:hover{ background:var(--ink-1); color:var(--paper-1); }

/* ---------- Feed 状态 ---------- */
.feed-state{
  text-align:center; padding:60px 20px;
  font-family:var(--f-serif-cn); color:var(--ink-3);
  font-size:14px; letter-spacing:.1em;
}
.feed-state em{
  display:block; font-family:var(--f-script);
  font-style:normal; font-size:18px;
  color:var(--ink-4); margin-top:8px;
}

/* ---------- Toast ---------- */
.toast-wrap{
  position:fixed; left:50%; top:32px;
  transform:translateX(-50%);
  z-index:1100; pointer-events:none;
  display:flex; flex-direction:column; gap:8px;
  align-items:center;
}
.toast{
  background:var(--paper-1);
  border:1px solid var(--ink-2);
  padding:10px 22px;
  font-family:var(--f-serif-cn); font-size:13px;
  color:var(--ink-1); letter-spacing:.05em;
  box-shadow:0 8px 24px -8px rgba(42,37,32,.2);
  opacity:0; transform:translateY(-8px);
  transition:.3s ease;
  border-radius:1px;
}
.toast.show{ opacity:1; transform:translateY(0); }
.toast.error{ border-color:var(--vermilion); color:var(--vermilion); }
.toast.ok{ border-color:var(--moss); color:var(--moss-deep,#3F4A3A); }

/* ---------- 写帖浮层（更大） ---------- */
.modal.modal-write{ width:560px; }
.compose-meta{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:14px;
  font-family:var(--f-serif-en); font-size:11px;
  letter-spacing:.18em; color:var(--ink-4);
}
.compose-loc{
  font-family:var(--f-serif-cn); font-size:12px;
  color:var(--ink-3); cursor:pointer;
}
.compose-loc.on{ color:var(--moss); }

/* ---------- 私信占位 ---------- */
.dm-empty{
  padding:40px 0; text-align:center;
  font-family:var(--f-serif-cn); color:var(--ink-3);
  line-height:2;
}
.dm-empty em{
  display:block; font-family:var(--f-script);
  font-style:normal; font-size:18px;
  color:var(--ink-2); margin-top:14px;
}

/* ---------- 加载占位骨架 ---------- */
.skeleton-post{
  background:var(--paper-2);
  border:1px solid var(--line-1);
  padding:30px; margin-bottom:18px;
  height:120px; position:relative; overflow:hidden;
}
.skeleton-post::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    transparent 0%, rgba(232,225,210,.6) 50%, transparent 100%);
  animation:shimmer 1.6s infinite;
}
@keyframes shimmer{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(100%); }
}

/* ---------- 在线列表点击态 ---------- */
.online-row{ cursor:pointer; transition:.3s ease; }
.online-row:hover{
  background:var(--paper-2);
  margin:0 -12px; padding:8px 12px;
}

/* ---------- 写帖按钮 (sticky 浮起) ---------- */
.fab-write{
  position:fixed; right:36px; bottom:36px;
  z-index:50;
  width:56px; height:56px; border-radius:50%;
  background:var(--ink-1); color:var(--paper-1);
  border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-serif-cn); font-size:14px;
  letter-spacing:.2em;
  box-shadow:0 12px 28px -8px rgba(42,37,32,.4);
  transition:.3s ease;
  opacity:0; transform:translateY(8px);
}
.fab-write.show{ opacity:1; transform:translateY(0); }
.fab-write:hover{
  background:var(--vermilion);
  transform:translateY(-2px);
  box-shadow:0 16px 32px -8px rgba(168,32,26,.4);
}

/* 让 main 顶部到 hero 之间能挂 composer */
.main .composer-bar{ animation:layerIn 1s .8s both; }