/* ============================================================
   cloud.css — 雲端功能的介面（熱度徽標 / 留言表單 / 提示條）
   沿用 tokens 變數；實色 rgba，不用 backdrop-filter。
   ============================================================ */

/* ---------- 作品熱度徽標 ---------- */
.hot {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; color: var(--muted);
}
.hot_views, .hot_like {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .12rem .42rem; border-radius: 99px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, .55);
  transition: color .3s var(--ease-settle), border-color .3s var(--ease-settle);
}
.hot_views i { color: var(--brand-500); font-style: normal; font-size: .62em; }
.hot_like {
  cursor: pointer; color: inherit; font: inherit; line-height: 1;
  padding: .22rem .5rem;
}
.hot_like i { font-style: normal; font-size: .8em; opacity: .8; }
.hot_like:hover, .hot_like:focus-visible { color: var(--brand-500); border-color: var(--brand-500); }
.hot_like:disabled { opacity: .55; cursor: default; }

/* 影像庫卡：meta 行右側 */
.vcard_meta .hot { margin-left: auto; }
/* 近作大卡：獨立一行 */
.proj_body .hot { margin-top: .8rem; }

/* ---------- 留言區 ---------- */
.msgform {
  display: grid; gap: 1.1rem; margin-top: 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 62rem;
}
.msgfield { display: flex; flex-direction: column; gap: .45rem; }
.msgfield > span {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.msgfield.is--wide { grid-column: 1 / -1; }
.msgfield input, .msgfield textarea {
  width: 100%; padding: .8rem .9rem;
  background: rgba(255, 255, 255, .04); color: #fff;
  border: 1px solid var(--line); border-radius: 2px;
  font-family: inherit; font-size: .95rem; line-height: 1.6;
  transition: border-color .3s var(--ease-settle), background .3s var(--ease-settle);
}
.msgfield textarea { resize: vertical; min-height: 7.5rem; }
.msgfield input:focus, .msgfield textarea:focus {
  outline: none; border-color: var(--brand-500); background: rgba(255, 255, 255, .06);
}
.msgrow { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.msgrow .btn.is--busy { opacity: .6; pointer-events: none; }
.msgstatus {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; color: var(--muted);
}
.msgstatus.is--bad { color: #ff6a5e; }

/* ---------- 雲端提示條 ---------- */
.cloud_toast {
  position: fixed; z-index: 900; left: 50%; bottom: 2rem;
  transform: translate(-50%, 140%);
  max-width: min(90vw, 34rem);
  padding: .7rem 1.1rem;
  background: rgba(16, 16, 18, .96); border: 1px solid var(--brand-500);
  color: #fff; font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .08em; line-height: 1.5; text-align: center;
  opacity: 0; pointer-events: none;
  transition: transform .45s var(--ease-settle), opacity .35s ease-out;
}
.cloud_toast.is--on { transform: translate(-50%, 0); opacity: 1; }
.cloud_toast.is--bad { border-color: #ff6a5e; }

@media (max-width: 760px) {
  .msgform { grid-template-columns: 1fr; }
  .vcard_meta .hot { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud_toast { transition: opacity .2s linear; }
  .hot_like:hover { transform: none; }
}