/* 小栈 2026-10-03：温馨双栏首页与日夜场景；保留角色彩色及原有功能。 */
/* ==========================================================================
   SalaFM的小窝 · 样式表
   风格：二次元 + 玻璃拟态 + 粉蓝渐变
   ========================================================================== */

/* ---------- 设计变量 ---------- */
:root {
  --bg-0: #0d0e1c;
  --bg-1: #171232;
  --bg-2: #241a45;

  --glass: rgba(255, 255, 255, .058);
  --glass-hi: rgba(255, 255, 255, .10);
  --brd: rgba(255, 255, 255, .13);
  --brd-hi: rgba(183, 156, 255, .55);

  --txt: #eaf0ff;
  --txt-dim: #b9c4e0;
  --muted: #8b97b8;

  --pink: #ff9ec7;
  --blue: #8fd3ff;
  --violet: #b79cff;
  --mint: #8ef0d0;

  --grad: linear-gradient(92deg, #8fd3ff, #b79cff, #ff9ec7);
  --grad-soft: linear-gradient(135deg, rgba(143, 211, 255, .18), rgba(255, 158, 199, .18));

  --r-lg: 24px;
  --r-md: 18px;
  --r-sm: 12px;
  --shadow: 0 18px 48px -22px rgba(0, 0, 0, .75);
  --font: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
}

/* 樱花浅色主题 */
[data-theme="sakura"] {
  --bg-0: #fdf7fb;
  --bg-1: #fbeef7;
  --bg-2: #eef4ff;
  --glass: rgba(255, 255, 255, .62);
  --glass-hi: rgba(255, 255, 255, .85);
  --brd: rgba(180, 150, 210, .28);
  --brd-hi: rgba(255, 158, 199, .8);
  --txt: #3a3050;
  --txt-dim: #5c5178;
  --muted: #8b81a8;
  --shadow: 0 18px 42px -24px rgba(120, 90, 160, .45);
}

* { box-sizing: border-box; }
/* 自己写的 display（flex/grid）会盖掉 HTML 的 hidden 属性，所以这里全局兜底一次 */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--txt);
  background: var(--bg-0);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 背景：极光光斑 + 粒子画布 ---------- */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(1100px 700px at 12% -8%, var(--bg-2) 0%, transparent 60%),
    radial-gradient(900px 620px at 92% 8%, rgba(255, 158, 199, .18) 0%, transparent 62%),
    radial-gradient(1000px 700px at 50% 108%, rgba(143, 211, 255, .16) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 55%, var(--bg-0));
}
#bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; }

/* ---------- 右侧立绘（鲸鱼娘 mascot） ----------
   放在 z-index:-1，透过玻璃卡片能看见她，像隔着一层磨砂玻璃，很二次元。
   窄屏自动隐藏，避免糊一屏。 */
.mascot-wrap {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: min(84vh, 900px);
  width: auto;
  pointer-events: none;
  user-select: none;
  display: flex;
  align-items: flex-end;
  animation: mascotIn 1.2s cubic-bezier(.2, .8, .2, 1) both;
  will-change: transform;
}
.mascot-wrap::before {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -12%;
  width: 130%;
  height: 112%;
  background: radial-gradient(ellipse at 62% 72%, rgba(143, 211, 255, .30), transparent 62%);
  filter: blur(22px);
  pointer-events: none;
}
.mascot-wrap img {
  height: 100%;
  width: auto;
  display: block;
  opacity: .93;
  filter: drop-shadow(0 22px 55px rgba(8, 6, 24, .60)) saturate(1.06);
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 7%);
  mask-image: linear-gradient(to top, transparent 0, #000 7%);
}
/* 樱花浅色主题下降低对比，避免和浅背景糊在一起 */
[data-theme="sakura"] .mascot-wrap img { opacity: .97; filter: drop-shadow(0 20px 44px rgba(120, 90, 160, .35)); }
[data-theme="sakura"] .mascot-wrap::before { background: radial-gradient(ellipse at 62% 72%, rgba(255, 158, 199, .34), transparent 62%); }

/* 窄屏不再整个藏掉，改成底部露半身、降低不透明度，既有氛围又不挡内容 */
@media (max-width: 1320px) {
  .mascot-wrap { display: flex; height: min(52vh, 460px); right: -3%; opacity: .62; }
  .mascot-wrap img { opacity: .9; }
}
/* 手机端（≤780px）的规则已全部搬到 mobile.css —— 改手机端请只动那个文件 */

@keyframes mascotIn {
  from { opacity: 0; transform: translateY(40px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 通用玻璃卡片 ---------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--brd);
  border-radius: var(--r-lg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow);
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ---------- 顶部导航 ---------- */
header.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  background: color-mix(in srgb, var(--bg-0) 72%, transparent);
  border-bottom: 1px solid var(--brd);
}
.topbar-in {
  max-width: 1180px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand img { width: 38px; height: 38px; border-radius: 12px; display: block; }
.brand-txt b {
  display: block; font-size: 16px; letter-spacing: .5px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-txt span { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: 2px; }

nav.menu { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
nav.menu a {
  padding: 7px 13px; border-radius: 999px; font-size: 13.5px;
  color: var(--txt-dim); text-decoration: none; transition: .18s;
}
nav.menu a:hover { background: var(--glass-hi); color: var(--txt); }
.iconbtn {
  width: 34px; height: 34px; border-radius: 11px; border: 1px solid var(--brd);
  background: var(--glass); color: var(--txt); cursor: pointer; font-size: 15px;
  display: grid; place-items: center; transition: .18s;
}
.iconbtn:hover { background: var(--glass-hi); border-color: var(--brd-hi); }

/* ---------- Hero ---------- */
.hero { padding: 54px 0 34px; }
.hero-in {
  display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
  padding: 30px 34px; border-radius: 30px;
  background: var(--grad-soft);
  border: 1px solid var(--brd);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  position: relative; overflow: hidden;
}
.hero-in::after {
  content: ""; position: absolute; inset: -40% -10% auto auto; width: 340px; height: 340px;
  background: radial-gradient(circle, rgba(255, 158, 199, .35), transparent 65%);
  filter: blur(6px); pointer-events: none;
}
.avatar-ring {
  width: 132px; height: 132px; border-radius: 50%; padding: 4px;
  background: var(--grad); flex: 0 0 auto;
  animation: floaty 6s ease-in-out infinite;
}
.avatar-ring > div {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--bg-1); display: grid; place-items: center;
  font-size: 54px; overflow: hidden;
}
.avatar-ring img { width: 100%; height: 100%; object-fit: cover; }

.hero-txt { flex: 1 1 340px; min-width: 280px; position: relative; z-index: 1; }
.hero-txt h1 { margin: 0 0 6px; font-size: 30px; letter-spacing: 1px; }
.hero-txt h1 em {
  font-style: normal;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-txt .sign { color: var(--txt-dim); font-size: 14.5px; line-height: 2; margin: 0 0 14px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-size: 12px; padding: 5px 12px; border-radius: 999px;
  background: var(--glass-hi); border: 1px solid var(--brd); color: var(--txt-dim);
  display: inline-flex; align-items: center; gap: 6px;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); }

/* ---------- 板块标题 ---------- */
.sec { padding: 26px 0 8px; }
.sec-h { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.sec-h h2 { margin: 0; font-size: 19px; letter-spacing: .5px; }
.sec-h .line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--brd), transparent); }
.sec-h .en { font-size: 11px; letter-spacing: 3px; color: var(--muted); text-transform: uppercase; }

/* ---------- Bento 网格 ---------- */
.bento {
  display: grid; gap: 16px;
  grid-template-columns: repeat(12, 1fr);
  align-items: start;
}
.card { padding: 22px; position: relative; overflow: hidden; transition: transform .22s, border-color .22s; }
.card:hover { transform: translateY(-3px); border-color: var(--brd-hi); }
.card > h3 { margin: 0 0 12px; font-size: 15.5px; display: flex; align-items: center; gap: 8px; }
.card .hint { font-size: 12px; color: var(--muted); }

.c-about { grid-column: span 5; }
.c-fav   { grid-column: span 7; }
.c-guest { grid-column: span 7; }
.c-stats { grid-column: span 5; }
.c-gallery { grid-column: span 7; }
.c-note  { grid-column: span 5; }

@media (max-width: 900px) {
  .c-about, .c-fav, .c-guest, .c-stats, .c-gallery, .c-note { grid-column: span 12; }
}

/* ---------- 关于我 ---------- */
.about-list { display: grid; gap: 12px; }
.about-row { display: flex; gap: 10px; font-size: 13.5px; line-height: 1.8; }
.about-row .k { color: var(--muted); flex: 0 0 54px; }
.about-row .v { color: var(--txt-dim); }

.skills { margin-top: 16px; display: grid; gap: 10px; }
.skill { font-size: 12.5px; }
.skill .t { display: flex; justify-content: space-between; color: var(--txt-dim); margin-bottom: 5px; }
.bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width .8s cubic-bezier(.2, .8, .2, 1); }

/* ---------- 收藏 ---------- */
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tab {
  padding: 6px 14px; border-radius: 999px; font-size: 13px; cursor: pointer;
  border: 1px solid var(--brd); background: transparent; color: var(--txt-dim); transition: .18s;
}
.tab:hover { background: var(--glass-hi); }
.tab.on { background: var(--grad); color: #191428; border-color: transparent; font-weight: 700; }

.fav-list { display: grid; gap: 10px; }
.fav-item {
  display: flex; gap: 12px; align-items: center; padding: 11px 13px;
  border-radius: var(--r-md); background: var(--glass-hi); border: 1px solid var(--brd);
  transition: .18s;
}
.fav-item:hover { transform: translateX(3px); border-color: var(--brd-hi); }
.fav-cover {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  background: var(--grad-soft); display: grid; place-items: center; font-size: 22px;
}
.fav-item .t { font-size: 14px; font-weight: 600; }
.fav-item .s { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.6; }
.stars { margin-left: auto; font-size: 12px; color: #ffd479; white-space: nowrap; }

/* ---------- 相册 ---------- */
.gal { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.gal figure {
  margin: 0; aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; cursor: zoom-in;
  background: var(--grad-soft); border: 1px solid var(--brd); position: relative;
  display: grid; place-items: center; font-size: 30px; transition: .2s;
}
.gal figure:hover { transform: scale(1.03); border-color: var(--brd-hi); }
.gal figure img { width: 100%; height: 100%; object-fit: cover; }
.gal figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; font-size: 11px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff;
  opacity: 0; transition: .2s;
}
.gal figure:hover figcaption { opacity: 1; }

/* ---------- 留言板 ---------- */
.guest-form { display: grid; gap: 9px; margin-bottom: 16px; }
.field { display: flex; gap: 9px; flex-wrap: wrap; }
input, textarea, select {
  font-family: inherit; font-size: 13.5px; color: var(--txt);
  background: var(--glass-hi); border: 1px solid var(--brd); border-radius: var(--r-sm);
  padding: 10px 13px; outline: none; transition: .18s; width: 100%;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus { border-color: var(--brd-hi); box-shadow: 0 0 0 3px rgba(183, 156, 255, .16); }
textarea { resize: vertical; min-height: 74px; line-height: 1.7; }
.field input { flex: 1 1 150px; width: auto; }
.field select { flex: 0 0 118px; width: auto; }

.btn {
  border: 0; border-radius: var(--r-sm); padding: 10px 20px; font-size: 13.5px; font-weight: 700;
  background: var(--grad); color: #191428; cursor: pointer; transition: .18s;
  font-family: inherit;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: var(--glass-hi); color: var(--txt-dim); border: 1px solid var(--brd); font-weight: 500; }
.btn.sm { padding: 6px 12px; font-size: 12px; }
/* 「散场」= 真的把房间关掉，所以要跟普通按钮区分开，别手滑点到 */
.btn.ghost.danger { color: #ff9db0; border-color: rgba(255, 120, 160, .45); background: rgba(255, 90, 130, .1); }
.btn.ghost.danger:hover { background: rgba(255, 90, 130, .24); border-color: rgba(255, 120, 160, .85); color: #ffc4d2; }
[data-theme="sakura"] .btn.ghost.danger { color: #c94b6f; border-color: rgba(201, 75, 111, .35); background: rgba(201, 75, 111, .08); }
[data-theme="sakura"] .btn.ghost.danger:hover { background: rgba(201, 75, 111, .18); color: #a83355; }
.btnrow { display: flex; align-items: center; gap: 10px; }

.msg-list { display: grid; gap: 11px; max-height: 430px; overflow-y: auto; padding-right: 4px; }
.msg-list::-webkit-scrollbar { width: 6px; }
.msg-list::-webkit-scrollbar-thumb { background: var(--brd); border-radius: 99px; }

.msg {
  display: flex; gap: 11px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--glass-hi); border: 1px solid var(--brd); animation: fadeUp .4s both;
}
.msg .ava {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  font-size: 17px; background: var(--grad-soft); border: 1px solid var(--brd);
}
.msg .body { flex: 1; min-width: 0; }
.msg .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.msg .who { font-size: 13.5px; font-weight: 600; }
.msg .time { font-size: 11px; color: var(--muted); }
.msg .mood { font-size: 11px; padding: 2px 8px; border-radius: 99px; background: rgba(183, 156, 255, .18); color: var(--violet); }
.msg .txt { font-size: 13.5px; line-height: 1.85; color: var(--txt-dim); white-space: pre-wrap; word-break: break-word; }
.msg .del { margin-left: auto; }
.empty { text-align: center; color: var(--muted); font-size: 13px; padding: 28px 0; }

/* ---------- 统计 ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.stat {
  text-align: center; padding: 15px 10px; border-radius: var(--r-md);
  background: var(--glass-hi); border: 1px solid var(--brd);
}
.stat b {
  display: block; font-size: 25px; line-height: 1.25;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { font-size: 11.5px; color: var(--muted); }
.recent { margin-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.recent .v {
  font-size: 11px; padding: 4px 9px; border-radius: 99px;
  background: var(--glass-hi); border: 1px solid var(--brd); color: var(--muted);
}

/* ---------- 自定义模块 ---------- */
.note-body { font-size: 13.5px; line-height: 2; color: var(--txt-dim); white-space: pre-wrap; min-height: 96px; }
.note-edit { display: none; gap: 9px; }
.card.editing .note-body { display: none; }
.card.editing .note-edit { display: grid; }

/* ---------- 灯箱 ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: none; place-items: center;
  background: rgba(6, 6, 14, .86); backdrop-filter: blur(8px); cursor: zoom-out;
}
.lightbox.on { display: grid; }
.lightbox img { max-width: 88vw; max-height: 84vh; border-radius: var(--r-md); box-shadow: 0 30px 80px -20px #000; }
.lightbox .cap { margin-top: 12px; color: #dfe6ff; font-size: 13px; }

/* ---------- 页脚 ---------- */
footer { text-align: center; padding: 44px 20px 60px; color: var(--muted); font-size: 12.5px; line-height: 2; }
footer b { color: var(--violet); }
footer .credit {
  margin-top: 12px; font-size: 11px; line-height: 1.95; color: var(--muted);
  opacity: .82; max-width: 720px; margin-left: auto; margin-right: auto;
}
footer .credit a { color: var(--blue); text-decoration: none; border-bottom: 1px dotted currentColor; }
footer .credit a:hover { color: var(--pink); }

/* ---------- 提示条 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 20px);
  padding: 11px 22px; border-radius: 999px; font-size: 13.5px; z-index: 300;
  background: var(--glass-hi); border: 1px solid var(--brd-hi); backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none; transition: .25s;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 顶部导航按钮 ---------- */
.navbtn {
  padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-family: inherit;
  color: var(--txt-dim); background: transparent; border: 1px solid transparent;
  cursor: pointer; transition: .18s;
}
.navbtn:hover { background: var(--glass-hi); color: var(--txt); }
.navbtn.on { background: var(--grad); color: #191428; font-weight: 700; }

/* ---------- 本地开发副本的牌子（只在 127.0.0.1 出现） ---------- */
.dev-badge {
  position: fixed; left: 14px; top: 64px; z-index: 88;
  padding: 5px 13px; border-radius: 999px; pointer-events: none;
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px; color: #2a1030;
  background: linear-gradient(135deg, #ffd479, #ff9ec7);
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .95), 0 0 22px -10px rgba(255, 158, 199, .9);
  animation: dotPulse 2.4s ease-in-out infinite;
}
@media (max-width: 780px) {
  .dev-badge { left: 8px; top: auto; bottom: 74px; font-size: 10.5px; padding: 4px 10px; }
}

/* ---------- 视图切换：方向感知的横向滑动 ----------
   前进（主菜单 → 板块）：新页从右滑入，旧页往左退
   返回（板块 → 主菜单）：新页从左滑入，旧页往右退
   旧页 0.3s 退，新页 0.44s 进，重叠产生推送感 */
.view { display: none; }
.view.is-on { display: block; }

.view.in-right  { animation: inRight  .44s cubic-bezier(.22, .9, .28, 1) both; }
.view.out-left  { animation: outLeft  .3s  cubic-bezier(.4, 0, .6, 1) both; pointer-events: none; }
.view.in-left   { animation: inLeft   .44s cubic-bezier(.22, .9, .28, 1) both; }
.view.out-right { animation: outRight .3s  cubic-bezier(.4, 0, .6, 1) both; pointer-events: none; }

@keyframes inRight  { from { opacity: 0; transform: translateX(66px); }  to { opacity: 1; transform: none; } }
@keyframes outLeft  { from { opacity: 1; transform: none; }              to { opacity: 0; transform: translateX(-54px); } }
@keyframes inLeft   { from { opacity: 0; transform: translateX(-66px); } to { opacity: 1; transform: none; } }
@keyframes outRight { from { opacity: 1; transform: none; }              to { opacity: 0; transform: translateX(54px); } }

/* 先滑框，内容再落位：卡片/页头延后一点点淡上，层次感来源 */
.view.in-right .card, .view.in-left .card,
.view.in-right .page-bar, .view.in-left .page-bar {
  animation: settle .5s cubic-bezier(.22, .9, .28, 1) both;
}
/* 方块只用透明度（不能碰 transform，会盖掉鼠标 3D 摆动的 inline transform） */
.view.in-right .tile, .view.in-left .tile { animation: fadeOnly .46s ease both; }

@keyframes settle   { from { opacity: 0; transform: translateY(17px); } to { opacity: 1; transform: none; } }
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 主菜单方块 ---------- */
.tile-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); }

.tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; gap: 4px; text-align: left; cursor: pointer;
  padding: 20px 20px 18px; border-radius: 22px; color: var(--txt); font-family: inherit;
  background: var(--glass); border: 1px solid var(--brd);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow);
  transform-style: preserve-3d; backface-visibility: hidden;
  /* 0.25s 的缓出，让 3D 摆动带一点"跟手的迟滞感"而不是瞬移 */
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .26s, box-shadow .26s;
}
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, var(--t1), var(--t2));
  opacity: .15; transition: opacity .26s;
}
/* 跟随鼠标的光斑（JS 会持续更新 --mx / --my） */
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--t2), transparent 68%);
  opacity: 0; transition: opacity .3s; filter: blur(2px);
}
.tile:hover {
  border-color: var(--brd-hi);
  box-shadow: 0 30px 66px -28px rgba(0, 0, 0, .85);
}
.tile:hover::before { opacity: .26; }
.tile:hover::after { opacity: .5; }
.tile:active { transform: scale(.99) !important; }

/* 方块内的缩略预览 */
.tprev {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
  min-height: 24px; font-size: 11.5px; color: var(--txt-dim); overflow: hidden;
}
.tprev img {
  width: 26px; height: 26px; border-radius: 8px; object-fit: cover; flex: 0 0 auto;
  border: 1px solid var(--brd); background: var(--glass-hi);
}
.tprev .em { font-size: 15px; line-height: 1; }
.tprev .one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .92; }
.tile .ti {
  display: block; width: 30px; height: 30px; margin-bottom: 2px;
  color: var(--t2);                                  /* 描边图标跟着方块配色走 */
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.tile .ti svg { width: 100%; height: 100%; display: block; }
.tile:hover .ti { transform: translateY(-2px) scale(1.08); }
[data-theme="sakura"] .tile .ti { filter: saturate(1.5) brightness(.82); }
.tile b { font-size: 17px; letter-spacing: .5px; }
.tile i { font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.7; }
.tile em {
  font-style: normal; font-size: 12px; color: var(--violet);
  margin-top: 9px; transition: transform .26s; display: inline-block;
}
.tile:hover em { transform: translateX(5px); }

/* ---------- 板块页头 ---------- */
.page-bar { display: flex; align-items: center; gap: 14px; padding: 28px 0 16px; flex-wrap: wrap; }
.page-bar h2 { margin: 0; font-size: 20px; letter-spacing: .5px; }
.page-bar .hint { margin-left: auto; font-size: 12px; color: var(--muted); }

.backbtn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px;
  border-radius: 999px; font-size: 13px; font-family: inherit; cursor: pointer;
  background: var(--glass); border: 1px solid var(--brd); color: var(--txt-dim);
  transition: .2s;
}
.backbtn:hover { background: var(--glass-hi); border-color: var(--brd-hi); color: var(--txt); transform: translateX(-3px); }
.backbtn span { font-size: 15px; line-height: 1; }

/* ---------- 切换时飞过的那团光 ---------- */
.flyer {
  position: fixed; z-index: 120; border-radius: 26px; pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, #8fd3ff, #b79cff, #ff9ec7);
  mix-blend-mode: screen;
}

/* ---------- 日常日志 ---------- */
.log-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.post-list { display: grid; gap: 14px; }
.post {
  padding: 20px 22px; border-radius: var(--r-lg); position: relative; overflow: hidden;
  background: var(--glass); border: 1px solid var(--brd);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow); transition: border-color .24s, transform .24s;
}
.post:hover { border-color: var(--brd-hi); transform: translateY(-2px); }
.post::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--grad); opacity: .75;
}
.post-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.post-date {
  font-size: 11.5px; padding: 3px 10px; border-radius: 99px;
  background: var(--glass-hi); border: 1px solid var(--brd); color: var(--muted);
}
.post-mood { font-size: 11.5px; padding: 3px 10px; border-radius: 99px; background: rgba(183, 156, 255, .18); color: var(--violet); }
.post h3 { margin: 8px 0 10px; font-size: 18px; letter-spacing: .4px; }
.post-body { font-size: 14px; line-height: 2.05; color: var(--txt-dim); white-space: pre-wrap; word-break: break-word; }
.post-img { margin-top: 14px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--brd); max-width: 100%; display: block; }
/* 一篇日记放好几张图：单张还是通栏大图，多张自动排成小网格（手机也看得清） */
.post-imgs { display: grid; gap: 8px; margin-top: 14px; grid-template-columns: repeat(2, 1fr); }
.post-imgs[data-n="3"] img:first-child,
.post-imgs[data-n="5"] img:first-child { grid-column: span 2; }
.post-imgs .post-img { margin-top: 0; width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.post-imgs img:hover { border-color: var(--brd-hi); filter: brightness(1.06); }
.post-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.post-tags .tg {
  font-size: 11.5px; padding: 3px 10px; border-radius: 99px; color: var(--blue);
  background: rgba(143, 211, 255, .14); border: 1px solid rgba(143, 211, 255, .25);
  cursor: pointer; transition: .18s;
}
.post-tags .tg:hover { background: rgba(143, 211, 255, .26); }
.post-tags .tg.on { background: var(--grad); color: #191428; border-color: transparent; font-weight: 700; }
.post-del { margin-left: auto; }

/* ---------- 分享卡（二维码 / 备份） ---------- */
.share-card { margin-top: 16px; }
.share-in { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.qr-box { flex: 0 0 auto; text-align: center; }
.qr-box img {
  width: 186px; height: auto; display: block; border-radius: 18px;
  box-shadow: 0 16px 40px -20px rgba(0, 0, 0, .85);
}
.qr-cap { margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.share-txt { flex: 1 1 260px; min-width: 240px; font-size: 13.5px; color: var(--txt-dim); line-height: 1.95; }
.share-txt p { margin: 0; }
.link-row { display: flex; gap: 8px; margin-top: 8px; }
.link-row input { flex: 1; min-width: 0; font-size: 12.5px; }

/* ---------- 点击冒出的爱心 / 星星 ---------- */
.spark {
  position: fixed; z-index: 400; pointer-events: none; font-size: 18px;
  animation: sparkUp .9s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes sparkUp {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(0deg); }
  22%  { opacity: 1; transform: translate(-50%, -80%) scale(1.15) rotate(8deg); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(.7) rotate(-14deg); }
}

/* ---------- 自定义面板 ---------- */
.cust-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.cust-preview {
  width: 118px; height: 118px; flex: 0 0 auto; border-radius: 24px; overflow: hidden;
  background: var(--glass-hi); border: 1px solid var(--brd); display: grid; place-items: center;
  font-size: 40px;
}
.cust-preview.av { border-radius: 50%; box-shadow: 0 0 0 3px rgba(183, 156, 255, .25); }
.cust-preview.img { width: 190px; height: 108px; border-radius: 16px; }
.cust-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cust-ctrl { flex: 1 1 280px; min-width: 240px; display: grid; gap: 10px; }
.cust-label { font-size: 12.5px; color: var(--muted); }

.preset-row { display: flex; gap: 10px; flex-wrap: wrap; }
.preset {
  width: 54px; height: 54px; padding: 0; border-radius: 15px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: var(--glass-hi); transition: .2s;
}
.preset img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preset:hover { transform: translateY(-3px); }
.preset.on { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 158, 199, .28); }

.color-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--txt-dim); }
.color-row label { display: inline-flex; align-items: center; gap: 8px; }
input[type="color"] {
  width: 48px; height: 34px; padding: 2px; border-radius: 10px; cursor: pointer;
  background: var(--glass-hi); border: 1px solid var(--brd);
}
input[type="range"] { width: 170px; accent-color: var(--violet); vertical-align: middle; }

/* ---------- 自定义背景生效 ---------- */
html[data-bg="color"] .aurora { background: var(--custom-bg); }
html[data-bg="gradient"] .aurora { background: linear-gradient(165deg, var(--custom-bg), var(--custom-bg2)); }
html[data-bg="image"] .aurora {
  background: var(--custom-img) center / cover no-repeat;
  filter: blur(var(--custom-blur, 0px));
  transform: scale(1.04);                       /* 模糊时避免边缘露白 */
}
html[data-bg="image"] .aurora::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(6, 6, 18, var(--custom-dim, .45));
}
html[data-bg="image"] #bg,
html[data-bg="color"] #bg,
html[data-bg="gradient"] #bg { opacity: .5; }

/* ---------- 签名打字机 ---------- */
/* 注意：自己写的 display 会盖掉 HTML 的 hidden 属性，所以这两个必须显式兜底 */
.player[hidden],
.reply-bar[hidden] { display: none !important; }

.sign { white-space: pre-line; }
.sign.typing::after {
  content: "▌"; margin-left: 2px; color: var(--violet);
  animation: caret .85s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ---------- 留言板：头像选择 ---------- */
.av-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.av-row { display: flex; gap: 7px; flex-wrap: wrap; }
.av-opt {
  width: 36px; height: 36px; padding: 0; border-radius: 12px; cursor: pointer; overflow: hidden;
  background: var(--glass-hi); border: 2px solid transparent;
  display: grid; place-items: center; font-size: 18px; transition: .18s;
}
.av-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-opt:hover { transform: translateY(-2px); }
.av-opt.on { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 158, 199, .25); }
.msg .ava img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 留言板：回复 ---------- */
.reply-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: var(--r-sm); font-size: 12.5px; color: var(--txt-dim);
  background: rgba(183, 156, 255, .14); border: 1px solid rgba(183, 156, 255, .32);
}
.reply-bar .rb-txt { flex: 1; min-width: 0; }
.reply-bar b { color: var(--violet); }
.reply-bar i { font-style: normal; opacity: .8; }
.msg .quote {
  margin: 6px 0 8px; padding: 7px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.65;
  background: var(--glass-hi); border-left: 3px solid var(--violet);
  color: var(--muted); word-break: break-word;
}
.msg .quote b { color: var(--txt-dim); }
.msg .reply-btn { font-size: 11.5px; padding: 3px 9px; }

/* ---------- 音乐播放器 ---------- */
.player {
  position: fixed; left: 18px; bottom: 18px; z-index: 90;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 14px 9px 9px; border-radius: 999px;
  max-width: min(580px, calc(100vw - 36px));
  background: var(--glass); border: 1px solid var(--brd);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: var(--shadow);
}
.pl-main {
  width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; cursor: pointer; border: 0;
  background: var(--grad); color: #191428; font-size: 15px;
  display: grid; place-items: center; transition: .18s;
}
.pl-main:hover { transform: scale(1.07); }
.pl-mid { flex: 1 1 150px; min-width: 100px; display: grid; gap: 5px; }
.pl-title { font-size: 12.5px; color: var(--txt-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-bar { height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .13); overflow: hidden; cursor: pointer; }
.pl-bar i { display: block; height: 100%; width: 0; background: var(--grad); }
.pl-side { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.pl-icon {
  width: 30px; height: 30px; border-radius: 10px; cursor: pointer; font-size: 13px;
  background: transparent; border: 0; color: var(--txt-dim); transition: .18s;
}
.pl-icon:hover { background: var(--glass-hi); color: var(--txt); }
.pl-icon.on { color: var(--pink); }
/* ⚠️ 必须写成 input.pl-vol（不能只写 .pl-vol）：
   上面 input[type="range"]{width:170px} 的优先级是 (0,1,1)，而 .pl-vol 是 (0,1,0)，
   会被 170px 压住 → 手机上音量条撑出屏幕。加个 input 让优先级持平，靠"后写的赢"生效。 */
input.pl-vol { width: 74px; accent-color: var(--violet); }
[data-theme="sakura"] .pl-bar { background: rgba(120, 90, 160, .18); }

/* 音乐播放器的手机端样式在 mobile.css */

/* ==========================================================================
   好友账号（邀请制登录）
   —— 顶部 👥 按钮 / 登录弹窗 / 私密日志标记 / 站长后台的账号列表
   ========================================================================== */

/* 顶栏：登录后按钮变成对方头像 */
.iconbtn.on { border-color: var(--brd-hi); background: var(--glass-hi); }
.iconbtn.owner {
  border-color: rgba(255, 212, 121, .55);
  box-shadow: 0 0 0 1px rgba(255, 212, 121, .25), 0 0 14px -4px rgba(255, 212, 121, .6);
}
.iconbtn .member-ava { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: block; }

/* 留言板里站长那一条的 👑 */
.crown { margin-left: 4px; font-size: 11px; filter: drop-shadow(0 0 6px rgba(255, 212, 121, .65)); }

/* 登录弹窗 */
.member-modal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 8, 20, .58); backdrop-filter: blur(6px);
  padding: 20px;
}
.member-box {
  width: min(340px, 100%); padding: 22px 20px 18px;
  border-radius: var(--r-lg); border: 1px solid var(--brd);
  box-shadow: var(--shadow); animation: fadeUp .32s cubic-bezier(.2, .8, .2, 1) both;
}
.member-box h3 { margin: 0 0 6px; font-size: 16px; }
.member-box .hint { margin: 0 0 14px; font-size: 11.5px; color: var(--muted); line-height: 1.7; }
.member-box input { width: 100%; margin-bottom: 10px; }
.member-box .btnrow { margin-top: 4px; }
.member-box #mTip { margin: 10px 0 0; color: var(--pink); min-height: 16px; }

/* 日志：私密开关 + 未登录时的提示 */
.vis-row {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 10px;
  font-size: 12.5px; color: var(--txt-dim); cursor: pointer; user-select: none;
}
.vis-row input { width: auto; margin: 0; accent-color: var(--violet); }
.lock-hint {
  margin: 0 0 14px; padding: 10px 14px; border-radius: var(--r-md);
  font-size: 12.5px; color: var(--txt-dim);
  background: linear-gradient(135deg, rgba(183, 156, 255, .14), rgba(143, 211, 255, .10));
  border: 1px solid var(--brd);
}
.lock-hint b { color: var(--violet); }
.post-lock { font-size: 11px; opacity: .85; }

/* 站长后台：好友账号管理 */
.user-add {
  display: grid; grid-template-columns: 1.1fr 1fr 1.1fr auto; gap: 8px; margin-bottom: 14px;
}
.user-add input { margin: 0; }
.user-list { display: flex; flex-direction: column; gap: 8px; }
.user-row {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--glass); border: 1px solid var(--brd); transition: .2s;
}
.user-row:hover { border-color: var(--brd-hi); }
.user-row.off { opacity: .5; }
/* 站长本人那行：金色高亮，一眼区分 */
.user-row.is-owner {
  background: linear-gradient(135deg, rgba(255, 212, 121, .14), rgba(255, 158, 199, .10));
  border-color: rgba(255, 212, 121, .38);
}
.user-row.is-owner .u-me {
  background: rgba(255, 212, 121, .20); color: #ffd479; border-color: rgba(255, 212, 121, .45);
}
.u-ava {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-size: 17px; background: var(--glass-hi); border: 1px solid var(--brd); overflow: hidden;
}
.u-ava img { width: 100%; height: 100%; object-fit: cover; }
.u-main { min-width: 0; }
.u-main b { display: block; font-size: 13.5px; }
.u-main i { display: block; margin-top: 3px; font-size: 11px; font-style: normal; color: var(--muted); }
.u-me {
  font-size: 10px; font-style: normal; padding: 1px 7px; border-radius: 999px;
  background: rgba(142, 240, 208, .18); color: var(--mint); border: 1px solid rgba(142, 240, 208, .35);
}
.u-me.off { background: rgba(255, 158, 199, .16); color: var(--pink); border-color: rgba(255, 158, 199, .35); }
.u-act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

/* 好友账号面板的手机端样式在 mobile.css */

/* ---------- 动画 ---------- */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; transform: translateY(16px); }
.reveal.in { animation: fadeUp .55s cubic-bezier(.2, .8, .2, 1) both; }

/* 手机端（≤780px）的规则已全部搬到 mobile.css —— 改手机端请只动那个文件 */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   日志的评论 / 点赞 / 回复（B 站风格）
   —— 手机端的补丁在 mobile.css，别在这儿写 ≤780px 的东西
   ========================================================================== */

/* ---------- 日志底部：👍 点赞 / 💬 评论 ---------- */
.post-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, .10);
}
.pf-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 999px; font-family: inherit; font-size: 13px;
  color: var(--txt-dim); background: transparent; border: 1px solid var(--brd);
  cursor: pointer; transition: .18s;
}
.pf-btn:hover { background: var(--glass-hi); color: var(--txt); border-color: var(--brd-hi); }
.pf-btn .pf-ico { font-size: 14px; filter: grayscale(1) opacity(.7); transition: .18s; }
.pf-btn .pf-n { font-variant-numeric: tabular-nums; }
/* 点过赞：图标恢复彩色 + 边框发光 */
.pf-btn.like.on { color: var(--pink); border-color: rgba(255, 158, 199, .55); background: rgba(255, 158, 199, .12); }
.pf-btn.like.on .pf-ico { filter: none; transform: scale(1.15); }

/* ---------- 评论区外壳 ---------- */
.cmt-box { margin-top: 14px; animation: fadeUp .3s cubic-bezier(.2, .8, .2, 1) both; }
.cmt-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cmt-head b { font-size: 14px; }
.cmt-head em { font-style: normal; color: var(--muted); font-size: 12px; margin-left: 2px; }
.cmt-sort { margin-left: auto; display: flex; gap: 4px; }
.cmt-tab {
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-family: inherit; cursor: pointer;
  color: var(--muted); background: transparent; border: 1px solid transparent; transition: .18s;
}
.cmt-tab:hover { color: var(--txt-dim); }
.cmt-tab.on { color: var(--txt); background: var(--glass-hi); border-color: var(--brd); }

/* ---------- 发评论 ---------- */
.cmt-form { display: flex; gap: 10px; margin-bottom: 16px; }
.cmt-ava {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-size: 16px;
  background: var(--glass-hi); border: 1px solid var(--brd);
}
.cmt-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmt-input { flex: 1; min-width: 0; }
.cmt-input textarea {
  width: 100%; min-height: 68px; margin: 0; padding: 10px 12px; font-size: 13px;
  border-radius: var(--r-md); resize: vertical;
}
.cmt-form-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.cmt-who { font-size: 11.5px; color: var(--muted); }
.cmt-who b { color: var(--txt-dim); }
.cmt-name { width: 150px; margin: 0; padding: 5px 10px; font-size: 12px; }
.cmt-num { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cmt-reply-bar {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  padding: 6px 10px; border-radius: 10px; font-size: 11.5px; color: var(--txt-dim);
  background: rgba(183, 156, 255, .12); border: 1px solid rgba(183, 156, 255, .28);
}
.cmt-reply-bar b { color: var(--violet); }
.cmt-cancel {
  margin-left: auto; border: 0; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 12px; font-family: inherit;
}
.cmt-cancel:hover { color: var(--pink); }

/* ---------- 评论列表 ---------- */
.cmt-list { display: grid; gap: 14px; }
.cmt { display: flex; gap: 10px; }
.cmt-main { flex: 1; min-width: 0; }
.cmt-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmt-top b { font-size: 12.5px; color: var(--txt); font-weight: 700; }
.cmt-time { font-size: 11px; color: var(--muted); margin-left: auto; }
.cmt-me {
  font-size: 10px; padding: 1px 6px; border-radius: 999px;
  background: rgba(143, 211, 255, .18); color: var(--blue); border: 1px solid rgba(143, 211, 255, .35);
}
.cmt-text {
  margin-top: 5px; font-size: 13px; line-height: 1.85; color: var(--txt-dim);
  white-space: pre-wrap; word-break: break-word;
}
.cmt-at { color: var(--violet); }
.cmt-act { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.cmt-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-family: inherit;
  color: var(--muted); background: transparent; border: 1px solid transparent; cursor: pointer; transition: .18s;
}
.cmt-btn:hover { color: var(--txt-dim); background: var(--glass-hi); }
.cmt-btn.like.on { color: var(--pink); }
.cmt-btn.like.on span { font-weight: 700; }
.cmt-btn.del:hover { color: var(--pink); }

/* 楼中楼：左侧一条竖线缩进 */
.cmt-subs {
  margin-top: 10px; padding-left: 10px;
  border-left: 2px solid rgba(255, 255, 255, .09);
  display: grid; gap: 12px;
}
.cmt.sub .cmt-ava { width: 28px; height: 28px; font-size: 13px; }

[data-theme="sakura"] .post-foot { border-top-color: rgba(140, 120, 180, .22); }
[data-theme="sakura"] .cmt-subs { border-left-color: rgba(140, 120, 180, .22); }
[data-theme="sakura"] .cmt-reply-bar { background: rgba(183, 156, 255, .18); }

/* ---------- 留言板专用：游客的「名字 / 心情 / 头像」三件套 ---------- */
.cmt-row { display: flex; gap: 8px; margin-bottom: 8px; }
.cmt-row .cmt-name { width: auto; flex: 1 1 auto; min-width: 0; }
.cmt-mood {
  flex: 0 0 auto; width: auto; min-width: 106px;
  padding: 5px 10px; font-size: 12px; border-radius: var(--r-sm);
}
.cmt-avs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cmt-av {
  width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font-size: 15px; line-height: 1;
  background: var(--glass); border: 1px solid var(--brd); overflow: hidden; transition: .18s;
}
.cmt-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmt-av:hover { border-color: var(--brd-hi); transform: translateY(-1px); }
.cmt-av.on {
  border-color: var(--brd-hi); background: var(--glass-hi);
  box-shadow: 0 0 0 2px rgba(183, 156, 255, .32), 0 4px 10px -4px rgba(90, 70, 170, .7);
}
/* 留言板标题比日志评论大一号，因为它是整页的主角 */
.cmt-box.board .cmt-head b { font-size: 15px; }
.cmt-box.board .cmt-list { margin-top: 2px; }

/* ---------- 「我的资料」弹窗（登录后改名字 / 换头像） ---------- */
#profileModal .member-box { width: min(400px, 100%); }
#profileModal input { margin-bottom: 0; }
.pf-ava-row { display: flex; align-items: flex-start; gap: 14px; margin: 6px 0 16px; }
.pf-ava-now {
  width: 62px; height: 62px; flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; font-size: 28px; line-height: 1;
  background: var(--glass-hi); border: 2px solid var(--brd-hi);
  box-shadow: 0 10px 20px -12px rgba(90, 70, 170, .85);
}
.pf-ava-now img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-ava-pick { flex: 1; min-width: 0; }
.pf-ava-pick .cmt-avs { margin-bottom: 0; }
.pf-up { margin-top: 10px; }
.pf-up .btn { font-size: 11.5px; padding: 5px 12px; }
.pf-guest {
  margin-top: 14px; padding: 10px 12px; border-radius: var(--r-md);
  font-size: 11.5px; line-height: 1.85; color: var(--muted);
  background: rgba(183, 156, 255, .10);
  border: 1px solid rgba(183, 156, 255, .24);
}
.pf-guest b { color: var(--txt-dim); }

/* ==========================================================================
   公告：导航红点 / 方块 NEW / 分类角标
   ========================================================================== */
.navbtn { position: relative; }
.nav-dot {
  position: absolute; top: 1px; right: 3px; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, #ff9ec7, #ff4d6d);
  box-shadow: 0 0 0 2px rgba(13, 14, 28, .8), 0 0 10px rgba(255, 77, 109, .9);
  animation: dotPulse 1.7s ease-in-out infinite;
}
@keyframes dotPulse { 50% { transform: scale(1.4); opacity: .7; } }

.tnew {
  position: absolute; top: 13px; right: 13px; padding: 2px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #2a1030;
  background: linear-gradient(135deg, #ffd479, #ff9ec7);
  box-shadow: 0 6px 14px -6px rgba(255, 158, 199, .95);
  animation: dotPulse 1.9s ease-in-out infinite;
}
/* 有没看过的公告时，「公告」方块自己也会亮一下 */
.tile.has-new {
  border-color: rgba(255, 158, 199, .55);
  box-shadow: 0 30px 66px -28px rgba(0, 0, 0, .85), 0 0 32px -12px rgba(255, 158, 199, .95);
}

/* 文章头上的分类角标（日常 / 公告） */
.pk-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px;
  border-radius: 999px; font-size: 11px; letter-spacing: .3px;
}
.pk-tag.daily { color: var(--txt-dim); background: var(--glass-hi); border: 1px solid var(--brd); }
.pk-tag.notice {
  color: #2a1030; font-weight: 700; border: 1px solid transparent;
  background: linear-gradient(135deg, #ffd479, #ff9ec7);
  box-shadow: 0 6px 14px -8px rgba(255, 158, 199, .95);
}
.pk-tag.notice[data-lv="important"] { background: linear-gradient(135deg, #ffb066, #ff7a9c); }
.pk-tag.notice[data-lv="urgent"] {
  background: linear-gradient(135deg, #ff7a7a, #ff4d6d); color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 122, 122, .5), 0 6px 16px -8px rgba(255, 77, 109, 1);
}
/* 站长专用的"换分类"小按钮，跟 🔒 那两个排一起 */
.post-kind { font-size: 11px; padding: 3px 9px; }

/* 公告页顶部的小提示 */
.notice-tip {
  margin: 0 0 16px; padding: 11px 15px; border-radius: var(--r-md);
  font-size: 12.5px; color: var(--txt-dim); line-height: 1.85;
  background: linear-gradient(135deg, rgba(255, 212, 121, .14), rgba(255, 158, 199, .12));
  border: 1px solid rgba(255, 212, 121, .3);
}
.notice-tip b { color: var(--pink); }
[data-theme="sakura"] .notice-tip { background: rgba(255, 158, 199, .16); border-color: rgba(214, 130, 175, .4); }
[data-theme="sakura"] .notice-tip b { color: #d1508d; }

/* ==========================================================================
   公告弹窗 —— 一进小窝就"啪"地弹出来那一只
   二次元三件套：渐变描边 + 斜挂小飘带 + 角落探头的吉祥物
   ========================================================================== */
.notice-modal {
  --nc-c1: rgba(38, 32, 72, .97);
  --nc-c2: rgba(18, 16, 42, .985);
  --nc-txt: #eaf0ff;
  --nc-dim: #b9c4e0;
  --nc-dash: rgba(255, 255, 255, .16);
  --nc-lv1: #ffd479;
  --nc-lv2: #ff9ec7;
  --nc-lv3: #b79cff;
  position: fixed; inset: 0; z-index: 130;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: radial-gradient(130% 90% at 50% -10%, rgba(122, 92, 200, .38), rgba(6, 8, 20, .74) 64%);
  backdrop-filter: blur(7px) saturate(130%);
  -webkit-backdrop-filter: blur(7px) saturate(130%);
  animation: ncFade .26s ease both;
}
[data-theme="sakura"] .notice-modal {
  --nc-c1: rgba(255, 252, 255, .98);
  --nc-c2: rgba(253, 243, 250, .99);
  --nc-txt: #2b2440;
  --nc-dim: #6c6386;
  --nc-dash: rgba(150, 120, 180, .3);
  background: radial-gradient(130% 90% at 50% -10%, rgba(255, 190, 220, .5), rgba(120, 110, 160, .34) 66%);
}
@keyframes ncFade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 改日志的弹窗（日常 / 公告 两边的 ✏️ 都用它） ---------- */
.edit-modal {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(130% 90% at 50% -10%, rgba(122, 92, 200, .34), rgba(6, 8, 20, .78) 64%);
  backdrop-filter: blur(7px) saturate(130%);
  -webkit-backdrop-filter: blur(7px) saturate(130%);
  animation: ncFade .2s ease both;
}
.edit-card {
  position: relative; width: min(580px, 100%); max-height: calc(100vh - 40px);
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 18px;
  overflow-y: auto;
  border: 1.6px solid transparent; border-radius: 20px;
  background:
    linear-gradient(158deg, rgba(34, 29, 64, .985), rgba(16, 14, 36, .99)) padding-box,
    linear-gradient(135deg, #ffd479, #ff9ec7 46%, #b79cff) border-box;
  box-shadow: 0 26px 70px -26px rgba(0, 0, 0, .9), 0 0 40px -16px rgba(183, 156, 255, .5);
  animation: ncIn .34s cubic-bezier(.2, 1.5, .4, 1) both;
}
[data-theme="sakura"] .edit-card {
  background:
    linear-gradient(158deg, rgba(255, 252, 255, .99), rgba(250, 242, 250, .99)) padding-box,
    linear-gradient(135deg, #ffd479, #ff9ec7 46%, #b79cff) border-box;
}
.edit-hd { display: flex; align-items: center; gap: 10px; }
.edit-hd b { flex: 1; font-size: 15px; letter-spacing: .4px; }
.edit-card #editWhich { margin: 0; font-size: 11.5px; color: var(--muted); }
.edit-card #editWhich b { color: var(--txt); }
.edit-card textarea { min-height: 74px; }
.edit-card #eText { min-height: 170px; }
.edit-card .btnrow { flex-wrap: wrap; }

.notice-card {
  position: relative; width: min(468px, 100%); max-height: calc(100vh - 40px);
  padding: 42px 22px 15px;
  border: 2.5px solid transparent; border-radius: 26px;
  /* 渐变描边：两层背景，内层管填充、外层管边框（border-box） */
  background:
    linear-gradient(158deg, var(--nc-c1), var(--nc-c2)) padding-box,
    linear-gradient(135deg, var(--nc-lv1), var(--nc-lv2) 46%, var(--nc-lv3)) border-box;
  box-shadow: 0 26px 70px -26px rgba(0, 0, 0, .9), 0 0 44px -14px rgba(183, 156, 255, .55);
  color: var(--nc-txt);
  animation: ncIn .5s cubic-bezier(.2, 1.5, .4, 1) both;
}
/* 弹入：先缩一下再"啪"地撑开，像贴纸拍上去 */
@keyframes ncIn {
  0%   { opacity: 0; transform: translateY(26px) scale(.86) rotate(-1.6deg); }
  62%  { opacity: 1; transform: translateY(-4px) scale(1.015) rotate(.5deg); }
  100% { opacity: 1; transform: none; }
}

/* 斜挂的小飘带 */
.nc-ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%) rotate(-2.2deg);
  padding: 6px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: 1px; color: #2a1030;
  background: linear-gradient(135deg, var(--nc-lv1), var(--nc-lv2));
  box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .55);
  white-space: nowrap;
}
.nc-ribbon::before, .nc-ribbon::after {
  content: ""; position: absolute; top: 50%; width: 8px; height: 8px;
  background: inherit; border-radius: 2px; transform: translateY(-50%) rotate(45deg);
}
.nc-ribbon::before { left: -3px; }
.nc-ribbon::after { right: -3px; }

/* 角落探头的吉祥物
   —— 位置刻意压在卡片右下角：只跟"页脚那一行"抢地方（页脚右边留了 96px），
      正文又给了 22px 的右边距，长公告的最后几行也不会被挡住 */
.nc-mascot {
  position: absolute; right: -10px; bottom: -18px; width: 96px; height: auto;
  pointer-events: none; user-select: none;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .6));
  transform: rotate(7deg);
  animation: ncBob 4.2s ease-in-out infinite;
}
@keyframes ncBob { 50% { transform: rotate(4deg) translateY(-6px); } }

/* 四颗飘着的小星星 */
.nc-deco {
  position: absolute; font-style: normal; font-size: 15px; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .55));
  animation: ncTwinkle 2.6s ease-in-out infinite;
}
.nc-deco.d1 { top: 14px; left: 16px; }
.nc-deco.d2 { top: 26px; right: 54px; animation-delay: .5s; font-size: 13px; }
.nc-deco.d3 { bottom: 66px; left: 10px; animation-delay: 1s; font-size: 12px; }
.nc-deco.d4 { top: -18px; right: 34px; animation-delay: 1.4s; font-size: 11px; }
@keyframes ncTwinkle {
  0%, 100% { opacity: .35; transform: translateY(0) scale(.9) rotate(0); }
  50%      { opacity: 1;   transform: translateY(-7px) scale(1.15) rotate(14deg); }
}

.nc-close {
  position: absolute; top: 11px; right: 12px; width: 28px; height: 28px; padding: 0;
  border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1;
  color: var(--nc-dim); background: rgba(255, 255, 255, .09); border: 1px solid var(--nc-dash);
  transition: .18s;
}
.nc-close:hover { color: #fff; background: rgba(255, 120, 160, .85); transform: rotate(90deg); }

/* 公告纸：只有正文在里面滚，标题和时间钉在外面 */
.nc-body {
  overflow: auto; max-height: min(42vh, 300px); padding: 14px 22px 16px 15px;
  border-radius: 18px; border: 1.5px dashed var(--nc-dash);
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
}
[data-theme="sakura"] .nc-body { background: linear-gradient(160deg, rgba(183, 156, 255, .12), rgba(255, 158, 199, .08)); }
.nc-title { margin: 0 0 6px; font-size: 19px; line-height: 1.45; letter-spacing: .4px; }
.nc-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.nc-time { font-size: 11.5px; color: var(--nc-dim); }
.nc-lv {
  font-size: 11px; padding: 1px 9px; border-radius: 999px; color: #2a1030;
  background: linear-gradient(135deg, var(--nc-lv1), var(--nc-lv2)); font-weight: 700;
}
.nc-text {
  font-size: 13.5px; line-height: 2; color: var(--nc-txt);
  white-space: pre-wrap; word-break: break-word;
}
.nc-img {
  width: 100%; margin-top: 12px; border-radius: 14px; display: block;
  border: 1px solid var(--nc-dash);
}

.nc-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 13px; padding-right: 96px;      /* 给右下角探头的吉祥物让位 */
}
.nc-today {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none;
  font-size: 12.5px; color: var(--nc-dim);
}
.nc-today input { width: auto; margin: 0; accent-color: var(--nc-lv2); }
.nc-btns { display: flex; align-items: center; gap: 8px; margin-left: auto; }

/* 要紧程度：飘带和光晕跟着换色 */
.notice-card[data-level="important"] { --nc-lv1: #ffb066; --nc-lv2: #ff7a9c; --nc-lv3: #ffd479; }
.notice-card[data-level="urgent"] {
  --nc-lv1: #ff8a8a; --nc-lv2: #ff4d6d; --nc-lv3: #ff7a7a;
  animation: ncIn .5s cubic-bezier(.2, 1.5, .4, 1) both, ncUrgent 1.6s ease-in-out .6s infinite;
}
@keyframes ncUrgent {
  0%, 100% { box-shadow: 0 26px 70px -26px rgba(0, 0, 0, .9), 0 0 34px -14px rgba(255, 77, 109, .7); }
  50%      { box-shadow: 0 26px 70px -26px rgba(0, 0, 0, .9), 0 0 54px -8px rgba(255, 77, 109, 1); }
}

@media (prefers-reduced-motion: reduce) {
  .notice-modal, .notice-card, .nc-mascot, .nc-deco, .nav-dot, .tnew { animation: none !important; }
}

/* ==========================================================================
   放映厅：片单 / 播放器 / 一起看房间
   ========================================================================== */
.cine-tabs { display: flex; gap: 6px; margin: 0 0 14px; }

/* --- 放映厅主视觉（二次元一下） --- */
.cine-hero {
  position: relative; overflow: hidden; margin: 0 0 14px; padding: 18px 20px;
  border-radius: var(--r-lg); min-height: 116px;
  display: flex; align-items: center; gap: 16px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(150deg, rgba(24, 20, 48, .95), rgba(14, 12, 32, .96)) padding-box,
    linear-gradient(135deg, #ffd479, #ff9ec7 45%, #b79cff 75%, #8fd3ff) border-box;
  box-shadow: var(--shadow), 0 0 40px -20px rgba(183, 156, 255, .8);
}
[data-theme="sakura"] .cine-hero {
  background:
    linear-gradient(150deg, rgba(255, 253, 255, .98), rgba(252, 244, 252, .98)) padding-box,
    linear-gradient(135deg, #ffd479, #ff9ec7 45%, #b79cff 75%, #8fd3ff) border-box;
}
.cine-hero::before {           /* 网点底纹，二次元味 */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.2px);
  background-size: 13px 13px;
}
.cine-hero .ch-txt { position: relative; display: grid; gap: 5px; min-width: 0; }
.cine-hero .ch-txt b {
  font-size: 21px; letter-spacing: 2px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cine-hero .ch-txt span { font-size: 12.5px; color: var(--txt-dim); line-height: 1.75; }
.cine-hero .ch-sub { font-size: 11.5px; color: var(--muted); }
.cine-hero .ch-girl {
  position: relative; width: 96px; height: 96px; flex: 0 0 auto; align-self: center;
  object-fit: cover; object-position: center 22%; border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, .24);
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .85), 0 0 26px -12px rgba(255, 158, 199, .8);
  /* 底部渐隐，跟卡片融在一起（图是带背景的，不能当透明立绘用） */
  -webkit-mask-image: linear-gradient(#000 74%, transparent 100%);
  mask-image: linear-gradient(#000 74%, transparent 100%);
  animation: csBob 4.6s ease-in-out infinite;
}
[data-theme="sakura"] .cine-hero .ch-girl { border-color: rgba(140, 120, 180, .35); }
@keyframes csBob { 50% { transform: translateY(-6px) rotate(-1.5deg); } }
.ch-spark {
  position: absolute; font-style: normal; font-size: 14px; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .5));
  animation: csTwinkle 2.8s ease-in-out infinite;
}
.ch-spark.s1 { top: 12px; right: 128px; }
.ch-spark.s2 { bottom: 14px; right: 74px; animation-delay: .7s; font-size: 11px; }
.ch-spark.s3 { top: 22px; left: 10px; animation-delay: 1.3s; font-size: 12px; }
@keyframes csTwinkle {
  0%, 100% { opacity: .35; transform: translateY(0) scale(.9) rotate(0); }
  50%      { opacity: 1;   transform: translateY(-6px) scale(1.15) rotate(12deg); }
}
.cine-tabs .tab { padding: 6px 16px; }
.cine-live-dot {
  display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%;
  background: #ff4d6d; box-shadow: 0 0 8px rgba(255, 77, 109, .9);
  animation: dotPulse 1.6s ease-in-out infinite; vertical-align: middle;
}
.cine-hint { margin: 0 0 14px; font-size: 12px; color: var(--muted); }

/* --- 片单 --- */
.video-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); }
.vcard {
  position: relative; text-align: left; padding: 0; overflow: hidden; cursor: pointer;
  border-radius: var(--r-md); border: 1px solid var(--brd); background: var(--glass);
  box-shadow: var(--shadow); transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .22s;
  font-family: inherit; color: var(--txt); display: flex; flex-direction: column;
}
.vcard:hover { transform: translateY(-3px); border-color: var(--brd-hi); }
.vcard-cover {
  position: relative; aspect-ratio: 16 / 9; width: 100%; overflow: hidden;
  background: linear-gradient(135deg, rgba(143, 211, 255, .2), rgba(183, 156, 255, .28) 45%, rgba(255, 158, 199, .2));
  display: grid; place-items: center;
}
.vcard-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vcard-cover .vph { font-size: 34px; opacity: .75; }
/* 没有封面的片子：用二次元默认封面（压暗一点，别抢标题） */
.vcard-cover .vcover-default { filter: saturate(.92) brightness(.82); }
.vcard-cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 8, 24, .1), rgba(10, 8, 24, .5));
}
.vcard-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(8, 8, 20, .38); opacity: 0; transition: opacity .2s;
}
.vcard:hover .vcard-play { opacity: 1; }
.vcard-play i {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); color: #241a45; font-size: 18px; font-style: normal;
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, .9);
}
.vcard-body { padding: 11px 13px 12px; display: grid; gap: 4px; }
.vcard-body b { font-size: 14.5px; line-height: 1.45; }
.vcard-body .vep { font-size: 11.5px; color: var(--violet); }
.vcard-body .vmeta { font-size: 11px; color: var(--muted); display: flex; gap: 10px; flex-wrap: wrap; }
.vcard-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.vcard-tags .tg { font-size: 10.5px; }
.vcard-admin { position: absolute; top: 8px; right: 8px; display: flex; gap: 5px; opacity: 0; transition: opacity .2s; }
.vcard:hover .vcard-admin { opacity: 1; }
.vcard-admin .btn { padding: 2px 8px; font-size: 11px; }

/* 转码中的片子：封面压暗 + 转圈标，鼠标放上去也提示"还看不到"，
   免得主人点下去遇到黑屏，以为是站坏了（2026-09-30 黑屏事故的收尾） */
.vcard.is-tc .vcard-cover::after { background: linear-gradient(180deg, rgba(10, 8, 24, .5), rgba(10, 8, 24, .72)); }
.vcard.is-tc .vcard-play { opacity: 1; cursor: progress; background: rgba(8, 8, 20, .2); }
.vcard.is-tc .vcard-play i {
  background: rgba(78, 169, 240, .95); color: #fff; font-size: 20px;
  animation: vtc-spin 2.2s linear infinite;
}
@keyframes vtc-spin { to { transform: rotate(360deg); } }
.vcard-body .vmeta .vtc { color: #4EA9F0; font-weight: 600; }
.vcard-body .vtc-tip { font-size: 10.5px; color: var(--muted); line-height: 1.5; }
[data-theme="sakura"] .vcard-cover { background: linear-gradient(135deg, rgba(143, 211, 255, .3), rgba(255, 158, 199, .3)); }

/* --- 传片进度条 --- */
.cine-up-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cine-up-row > * { flex: 1 1 180px; min-width: 0; }
.cine-up-bar {
  height: 8px; margin: 12px 0 4px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .1); border: 1px solid var(--brd);
}
.cine-up-bar i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .18s; }
[data-theme="sakura"] .cine-up-bar { background: rgba(140, 120, 180, .16); }

/* --- 一起看：房间列表 --- */
.room-top { margin-bottom: 14px; }
.room-top .hint { line-height: 1.9; }
.room-list { display: grid; gap: 12px; }
.room-item {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--r-md); border: 1px solid var(--brd); background: var(--glass);
  cursor: pointer; transition: .2s; text-align: left; font-family: inherit; color: var(--txt); width: 100%;
}
.room-item:hover { border-color: var(--brd-hi); transform: translateX(3px); }
.room-item .ri-cover {
  width: 62px; height: 38px; flex: 0 0 auto; border-radius: 9px; overflow: hidden;
  background: linear-gradient(135deg, rgba(143, 211, 255, .25), rgba(255, 158, 199, .25));
  display: grid; place-items: center; font-size: 17px;
}
.room-item .ri-cover img { width: 100%; height: 100%; object-fit: cover; }
.room-item .ri-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.room-item .ri-txt b { font-size: 14px; }
.room-item .ri-txt span { font-size: 11.5px; color: var(--muted); }
.room-item .ri-live { color: var(--pink); font-size: 11px; flex: 0 0 auto; }

/* --- 一起看：好友专属的房间（游客根本看不到，只有登录好友有这一条） --- */
.room-item.friend {
  border-color: rgba(183, 156, 255, .48);
  background: linear-gradient(135deg, rgba(183, 156, 255, .14), rgba(255, 158, 199, .12));
}
.room-item.friend:hover { border-color: rgba(199, 160, 255, .85); }
.room-item .ri-cover.friend {
  position: relative;
  background: linear-gradient(135deg, rgba(183, 156, 255, .34), rgba(255, 158, 199, .3));
}
.room-item .ri-cover.friend img { object-position: center 16%; }
.room-item .ri-cover .ri-lock {
  position: absolute; right: 2px; bottom: 0; font-size: 10px; font-style: normal; line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .9));
}
.room-item .ri-txt .ri-flag {
  display: inline-block; margin-left: 5px; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  font-size: 10.5px; font-weight: 700; color: #241035;
  background: linear-gradient(135deg, #b79cff, #ff9ec7);
}
.room-friendhint {
  margin-top: 12px; padding: 10px 14px; font-size: 11.5px; color: var(--muted); line-height: 1.8;
  border-radius: var(--r-md); border: 1px dashed rgba(183, 156, 255, .45); background: rgba(183, 156, 255, .07);
}
.room-friendhint b { color: var(--pink); }

/* --- 开房间那张卡片里的「好友专属」开关 --- */
.cine-switch {
  display: flex; align-items: flex-start; gap: 11px; margin: 12px 0 4px; padding: 12px 14px;
  border-radius: var(--r-md); border: 1px solid var(--brd); background: rgba(255, 255, 255, .045);
  cursor: pointer; transition: .2s;
}
.cine-switch:hover { border-color: var(--brd-hi); }
.cine-switch.forced { opacity: .68; cursor: default; }
.cine-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cine-switch .sw-track {
  position: relative; flex: 0 0 auto; width: 40px; height: 22px; margin-top: 2px;
  border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid var(--brd); transition: .22s;
}
.cine-switch .sw-track i {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: .22s; box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.cine-switch input:checked + .sw-track { background: linear-gradient(135deg, #b79cff, #ff9ec7); border-color: transparent; }
.cine-switch input:checked + .sw-track i { left: 21px; }
.cine-switch input:focus-visible + .sw-track { outline: 2px solid var(--brd-hi); outline-offset: 2px; }
.cine-switch .sw-txt { display: grid; gap: 3px; min-width: 0; }
.cine-switch .sw-txt b { font-size: 13px; }
.cine-switch .sw-txt em { font-size: 11.5px; font-style: normal; color: var(--muted); line-height: 1.75; }

/* --- 播放器（影院 / 一起看 共用） --- */
.cine-player {
  position: fixed; inset: 0; z-index: 160; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(5, 6, 16, .84); backdrop-filter: blur(8px);
  animation: ncFade .22s ease both;
}
.cp-box {
  position: relative;
  width: min(1100px, 100%); max-height: calc(100vh - 36px);
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border-radius: 22px; border: 1.6px solid transparent;
  background:
    linear-gradient(160deg, rgba(30, 26, 58, .975), rgba(16, 14, 34, .985)) padding-box,
    linear-gradient(135deg, #ffd479, #ff9ec7 45%, #b79cff 75%, #8fd3ff) border-box;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .95), 0 0 46px -18px rgba(183, 156, 255, .7);
}
/* 播放器里的看板娘 + 星星：只放在聊天区那一块，绝不挡视频 */
.cp-side { position: relative; }
.cp-side::after {
  content: ""; position: absolute; right: 6px; bottom: 6px; width: 66px; height: 66px;
  background: url("assets/chibi.webp") center 20% / cover no-repeat;
  border-radius: 15px; border: 1.5px solid rgba(255, 255, 255, .18);
  opacity: .62; pointer-events: none;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .9);
  -webkit-mask-image: linear-gradient(#000 68%, transparent 100%);
  mask-image: linear-gradient(#000 68%, transparent 100%);
  animation: csBob 5s ease-in-out infinite;
}
[data-theme="sakura"] .cp-side::after { opacity: .5; border-color: rgba(140, 120, 180, .3); }
.cp-chat::before {              /* 聊天区淡网点，玻璃里透出二次元味 */
  content: ""; position: absolute; inset: 0; border-radius: 13px; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1.2px);
  background-size: 12px 12px;
}
.cp-chat { position: relative; }
[data-theme="sakura"] .cp-box {
  background:
    linear-gradient(160deg, rgba(255, 252, 255, .99), rgba(250, 242, 250, .99)) padding-box,
    linear-gradient(135deg, #ffd479, #ff9ec7 45%, #b79cff 75%, #8fd3ff) border-box;
}
.cp-head { display: flex; align-items: center; gap: 10px; }
.cp-title { font-size: 15px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-mode { font-size: 11px; padding: 2px 10px; border-radius: 999px; background: var(--glass-hi); border: 1px solid var(--brd); color: var(--txt-dim); }
.cp-mode.live { background: linear-gradient(135deg, #ffd479, #ff9ec7); color: #2a1030; font-weight: 700; border-color: transparent; }
.cp-mode.cp-friend { background: linear-gradient(135deg, #b79cff, #ff9ec7); color: #241035; font-weight: 700; border-color: transparent; }

/* --- 好友专属房间的氛围背景 ---
   那张插画糊一点、淡一点铺满整个播放器，当"房间的样子"用，不抢视频也不挡字。
   图是登录后现取的 blob（见 app.js loadFriendArt），没取到就整层不显示。 */
.cp-friendart { display: none; }
#cinePlayer.friend-room .cp-friendart:not(.no-art) {
  display: block; position: absolute; inset: 1.6px; border-radius: 21px; z-index: 0;
  pointer-events: none; opacity: .3;
  background: center 14% / cover no-repeat;
  filter: blur(3.5px) saturate(1.1);
  -webkit-mask-image: radial-gradient(130% 110% at 50% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(130% 110% at 50% 0%, #000 30%, transparent 100%);
}
#cinePlayer.friend-room .cp-head,
#cinePlayer.friend-room .cp-main,
#cinePlayer.friend-room .cp-foot { position: relative; z-index: 1; }
#cinePlayer.friend-room .cp-box {
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .95), 0 0 60px -16px rgba(199, 160, 255, .85);
}
[data-theme="sakura"] #cinePlayer.friend-room .cp-friendart:not(.no-art) { opacity: .2; filter: blur(3px) saturate(.95); }
/* 纯同步房那块面板本来是不透明的，好友专属时透一点，好让背后的插画露出来 */
#cinePlayer.friend-room .cp-sync {
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(143, 211, 255, .18), transparent 55%),
    radial-gradient(120% 90% at 85% 10%, rgba(255, 158, 199, .18), transparent 55%),
    rgba(10, 10, 24, .7);
}
.cp-close {
  width: 28px; height: 28px; padding: 0; border-radius: 50%; cursor: pointer; font-size: 13px; flex: 0 0 auto;
  color: var(--txt-dim); background: rgba(255, 255, 255, .09); border: 1px solid var(--brd); transition: .18s;
}
.cp-close:hover { background: rgba(255, 120, 160, .85); color: #fff; transform: rotate(90deg); }
.cp-main { display: flex; gap: 12px; min-height: 0; flex: 1; }
.cp-vwrap { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
#cpVideo {
  flex: 1; min-width: 0; min-height: min(46vh, 380px);
  max-height: calc(100vh - 250px); border-radius: 14px;
  background: #000; display: block; width: 100%; object-fit: contain;
}

/* --- 自定义播放控制条（观众也能看时长、能全屏） --- */
.cp-vbar {
  display: flex; align-items: center; gap: 10px; padding: 6px 11px;
  border-radius: 13px; border: 1px solid var(--brd); background: rgba(255, 255, 255, .05);
}
.cpb {
  padding: 2px 7px; border: none; border-radius: 8px; cursor: pointer;
  background: none; color: var(--txt); font-size: 15px; line-height: 1.4; font-family: inherit;
  transition: .15s;
}
.cpb:hover { background: var(--glass-hi); }
.cpb.off { opacity: .4; cursor: not-allowed; }
.cpb-time {
  font-size: 11.5px; color: var(--txt-dim); white-space: nowrap;
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
}
.cpb-seek {
  position: relative; flex: 1; min-width: 60px; height: 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .15); cursor: pointer; touch-action: none;
}
.cpb-seek i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 999px; background: var(--grad); pointer-events: none;
}
.cpb-seek b {
  position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: #fff; transform: translateY(-50%) scale(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .6); pointer-events: none; transition: transform .15s;
}
.cpb-seek:hover b, .cpb-seek.drag b { transform: translateY(-50%) scale(1); }
.cpb-seek.readonly { cursor: default; }
.cpb-seek.readonly b { display: none; }
[data-theme="sakura"] .cp-vbar { background: rgba(140, 120, 180, .08); }
[data-theme="sakura"] .cpb-seek { background: rgba(140, 120, 180, .22); }

/* 自动播放被拦时的"点一下"提示层 */
.cp-tap {
  position: absolute; left: 0; right: 0; top: 0; bottom: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  border-radius: 14px; cursor: pointer; z-index: 2;
  background: radial-gradient(120% 90% at 50% 40%, rgba(20, 16, 44, .55), rgba(6, 6, 18, .82));
  backdrop-filter: blur(2px);
}
.cp-tap .hint { font-size: 11.5px; color: var(--txt-dim); max-width: 320px; text-align: center; line-height: 1.8; }

/* 全屏：把「视频 + 聊天」一起放进去，聊天不会消失 */
.cp-main:fullscreen { background: rgba(6, 6, 16, .98); padding: 14px; gap: 12px; }
.cp-main:fullscreen #cpVideo { max-height: calc(100vh - 110px); min-height: 0; border-radius: 10px; }
.cp-main:fullscreen .cp-chat { max-height: none; }

/* 纯同步模式（没有视频文件，房间只是个"共享遥控器"） */
.cp-sync {
  position: relative; overflow: hidden;
  flex: 1; min-width: 0; min-height: min(46vh, 380px); max-height: calc(100vh - 250px);
  border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 20px; text-align: center;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(143, 211, 255, .18), transparent 55%),
    radial-gradient(120% 90% at 85% 10%, rgba(255, 158, 199, .18), transparent 55%),
    rgba(10, 10, 24, .92);
  border: 1.5px dashed var(--brd-hi);
}
.cp-sync::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: radial-gradient(rgba(255, 255, 255, .1) 1px, transparent 1.2px);
  background-size: 14px 14px;
}
.cs-girl {
  position: absolute; right: 14px; bottom: 14px; width: 94px; height: 94px;
  object-fit: cover; object-position: center 22%; border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, .2); opacity: .92; pointer-events: none;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .85);
  -webkit-mask-image: linear-gradient(#000 72%, transparent 100%);
  mask-image: linear-gradient(#000 72%, transparent 100%);
  animation: csBob 4.8s ease-in-out infinite;
}
.cs-spark {
  position: absolute; font-style: normal; font-size: 15px; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .5));
  animation: csTwinkle 2.7s ease-in-out infinite;
}
.cs-spark.q1 { top: 14px; left: 18px; }
.cs-spark.q2 { top: 26px; right: 130px; animation-delay: .6s; font-size: 12px; }
.cs-spark.q3 { bottom: 20px; left: 22px; animation-delay: 1.2s; font-size: 13px; }
[data-theme="sakura"] .cp-sync {
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(143, 211, 255, .3), transparent 55%),
    radial-gradient(120% 90% at 85% 10%, rgba(255, 158, 199, .3), transparent 55%),
    rgba(255, 252, 255, .96);
}
.cs-clock {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 68px; font-weight: 800; letter-spacing: 4px; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 20px rgba(183, 156, 255, .35));
}
.cs-hint { font-size: 12.5px; color: var(--txt-dim); max-width: 420px; line-height: 1.9; }
.cs-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.cs-acts .btn { text-decoration: none; }
.cp-sync.readonly .cs-acts .btn.ghost { display: none; }   /* 观众看到的只有"去观看" */
.cp-side { width: 268px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.cp-members { display: flex; gap: 5px; flex-wrap: wrap; font-size: 16px; min-height: 22px; align-items: center; }
.cp-members .cm-ava { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--glass-hi); overflow: hidden; border: 1px solid var(--brd); }
.cp-members .cm-ava img { width: 100%; height: 100%; object-fit: cover; }
.cp-chat {
  flex: 1; min-height: 120px; max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 13px; border: 1px solid var(--brd); background: rgba(255, 255, 255, .04);
}
.cp-msg { display: flex; gap: 7px; font-size: 12.5px; line-height: 1.65; }
.cp-msg .cm-ava { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 12px; background: var(--glass-hi); overflow: hidden; }
.cp-msg .cm-ava img { width: 100%; height: 100%; object-fit: cover; }
.cp-msg .cm-txt { min-width: 0; word-break: break-word; }
.cp-msg b { color: var(--txt-dim); font-weight: 600; }
.cp-msg.sys { color: var(--muted); font-size: 11.5px; justify-content: center; }
.cp-input { display: flex; gap: 6px; }
.cp-input input { flex: 1; min-width: 0; margin: 0; padding: 7px 11px; font-size: 12.5px; }
.cp-foot { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--muted); }
.cp-code { margin-left: auto; font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: 1px; }



/* 2026-10-03 · 蓝白海洋 / 动画手账视觉提案 */
:root { --bg-0:#101d31; --bg-1:#122940; --bg-2:#193a58; --blue:#80d4f1; --violet:#aebef5; --pink:#ffd0d9; --mint:#99e3cf; --grad:linear-gradient(105deg,#86cfe9,#a9bced); --brd:rgba(149,198,228,.2); --muted:#a1b9cc; --txt-dim:#c5d8e7; --shadow:0 12px 36px -23px rgba(0,0,0,.75); --paper:#1a3049; --ink-blue:#9ddff4; --line-blue:rgba(147,204,227,.15); }
[data-theme="sakura"] { --bg-0:#f3f8fc; --bg-1:#eaf4fa; --bg-2:#dbeef8; --txt:#28485d; --txt-dim:#527388; --muted:#60788a; --glass:rgba(255,255,255,.83); --glass-hi:rgba(255,255,255,.94); --brd:#d8e7ef; --brd-hi:#86bad4; --blue:#508ba8; --pink:#eb9da8; --violet:#8199c3; --mint:#549d90; --grad:linear-gradient(105deg,#387e9e,#779ec0); --shadow:0 12px 32px -20px rgba(57,102,126,.25); --paper:#fff; --ink-blue:#387c9c; --line-blue:rgba(126,169,193,.16); }
.aurora { background:radial-gradient(ellipse at 100% 4%,var(--bg-2),transparent 60%),linear-gradient(165deg,var(--bg-0),var(--bg-1)); }
.wrap,.topbar-in { max-width:1240px; }
.wrap { padding:0 32px; }
header.topbar { background:color-mix(in srgb,var(--paper) 88%,transparent); border-bottom:1px solid var(--brd); }
.topbar-in { min-height:80px; gap:12px; padding:12px 32px; }
.brand { margin-right:24px; }
.brand img { width:42px; height:42px; border-radius:14px; box-shadow:0 3px 10px var(--line-blue); }
.brand-txt b { font-size:17px; letter-spacing:.4px; }
.brand-txt span { font-size:9px; letter-spacing:2.5px; margin-top:4px; }
.navbtn { font-size:12px; padding:9px 12px; }
.navbtn.on { color:var(--paper); background:var(--ink-blue); box-shadow:0 3px 8px var(--line-blue); }
.iconbtn { background:transparent; border-color:transparent; border-radius:50%; }
.iconbtn:hover { background:var(--glass-hi); }
.hero { padding:38px 0 35px; }
.hero-in { display:block; min-height:440px; padding:36px 44px 32px; border-radius:28px; background:var(--paper); border:1px solid var(--brd); backdrop-filter:none; box-shadow:var(--shadow); isolation:isolate; overflow:clip; }
.hero-in::before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 75% 36%,var(--bg-2) 0,transparent 39%),repeating-linear-gradient(0deg,transparent,transparent 31px,var(--line-blue) 32px,transparent 33px); opacity:.6; }
.hero-in::after { width:510px;height:510px;inset:auto -80px -270px auto;border:1px solid var(--line-blue);background:none;filter:none;border-radius:50%; }
.hero-eyebrow { padding-left:68px; height:50px; display:flex; flex-direction:column; justify-content:center; position:relative; z-index:2; color:var(--ink-blue); }
.hero-eyebrow span { font-size:11px; font-weight:700; letter-spacing:3px; }
.hero-eyebrow small { font-size:11px;letter-spacing:1px;margin-top:5px; color:var(--muted); }
.hero .avatar-ring { position:absolute; top:36px;left:44px;width:49px;height:49px; padding:2px; background:var(--bg-2); animation:none; box-shadow:0 0 0 5px var(--paper),0 0 0 6px var(--brd); }
.hero .avatar-ring>div { font-size:25px; }
.hero-txt { width:60%; min-width:0; padding-top:25px; }
.hero-txt h1 { margin-bottom:14px;letter-spacing:0;line-height:1.2; }
.hero-hello { display:block;font-size:14px;font-weight:500;letter-spacing:2px;color:var(--txt-dim);margin-bottom:9px; }
.hero-txt h1 em { display:block;font-size:44px;font-weight:800;background:none;color:var(--ink-blue); letter-spacing:1px; }
.hero-subtitle { display:block;font-size:22px;letter-spacing:1px;font-weight:500;margin-top:13px;color:var(--txt); }
.hero-txt .sign { font-size:13px;line-height:1.9;max-width:470px;margin-bottom:19px; }
.hero-actions { display:flex;align-items:center;gap:22px;margin-bottom:21px; }
.hero-actions .btn { background:var(--ink-blue);color:var(--paper);border-radius:12px;padding:12px 18px;font-size:13px; box-shadow:none; }
.hero-actions .btn span { margin-left:16px; }
.hero-secondary { border:0;background:none;font-family:inherit;color:var(--ink-blue);font-size:12px;cursor:pointer;padding:9px 0; }
.hero-secondary:hover { text-decoration:underline;text-underline-offset:5px; }
.chips { gap:6px; }
.chip { border:0;background:var(--bg-0);padding:5px 8px;font-size:10px; }
.dot { box-shadow:none;width:5px;height:5px; }
.hero-art { position:absolute;right:0;bottom:0;width:40%;height:100%;pointer-events:none; }
.hero-art img { position:absolute;height:650px;max-width:none;right:-8px;bottom:-152px; filter:drop-shadow(0 13px 18px rgba(67,114,155,.2)); }
.hero-orbit { position:absolute;width:320px;height:320px;right:24px;top:42px;border:1px solid var(--brd);border-radius:50%;background:radial-gradient(circle,var(--bg-2) 25%,transparent 70%); }
.hero-orbit::after { content:"";position:absolute;inset:15px;border:1px dashed var(--brd);border-radius:50%; }
.hero-sticker { position:absolute;right:20px;bottom:27px;padding:13px 19px; background:var(--paper);border:1px solid var(--brd);box-shadow:var(--shadow);transform:rotate(-7deg);border-radius:8px;color:var(--ink-blue);font-size:16px;letter-spacing:1px; }
.hero-sticker small { display:block;font-size:10px;letter-spacing:.5px; margin-top:4px;color:var(--muted); }
.hero-star { position:absolute;right:65px;top:34px;font-size:32px;color:#cdae72;transform:rotate(18deg); }
body:has(#menuView.is-on)>.mascot-wrap { display:none; }
.sec-h { margin-bottom:20px;align-items:center;gap:17px; }
.sec-h h2 { font-size:20px;letter-spacing:1px;font-weight:600; }
.sec-h .en { font-size:9px;letter-spacing:2px;color:var(--muted); }
.sec-h .line { background:var(--brd); }
.section-star { color:var(--ink-blue);margin-left:10px;font-size:22px; }
.tile-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;counter-reset:corner; }
.tile { min-width:0;min-height:186px; padding:23px;border-radius:20px; background:var(--paper);border:1px solid var(--brd);backdrop-filter:none;box-shadow:var(--shadow);counter-increment:corner; }
.tile::before { background:radial-gradient(ellipse at 100% 0,var(--t1),transparent 65%);opacity:.11; }
.tile::after { content:counter(corner,decimal-leading-zero);inset:17px 19px auto auto;width:auto;height:auto;z-index:1;background:none;opacity:.5;filter:none;color:var(--muted);font-size:10px;letter-spacing:2px;font-weight:600; }
.tile:hover { border-color:var(--brd-hi);box-shadow:0 15px 35px -23px rgba(32,89,119,.45); }
.tile:hover::after { opacity:.8; }
.tile .ti { width:35px;height:35px;margin-bottom:10px; color:var(--ink-blue); }
[data-theme="sakura"] .tile .ti { filter:none; }
.tile b { font-size:17px; font-weight:600;letter-spacing:1px; }
.tile i { font-size:11px; }
.tile .tprev { font-size:10px;min-height:19px;margin-top:11px;max-width:100%; }
.tile>em { font-size:10px;margin-top:7px;color:var(--ink-blue); }
.tile[data-go="view-cinema"] { grid-column:span 2; grid-row:span 2; color:#ecf6ff; background:linear-gradient(145deg,#2c6481,#1b3f62); min-height:389px; padding:30px; }
.tile[data-go="view-cinema"]::before { inset:auto -90px -180px auto;width:400px;height:400px;background:none;border:1px solid rgba(222,241,255,.2);border-radius:50%;opacity:1; }
.tile[data-go="view-cinema"]::after { color:#c4e0ed; }
.tile[data-go="view-cinema"] .ti { color:#bde3f3;width:42px;height:42px; }
.tile[data-go="view-cinema"] .cinema-label { font-size:10px;letter-spacing:3px;color:#c4e0ed;margin-top:34px; }
.tile[data-go="view-cinema"] b { font-size:26px;line-height:1.6;max-width:290px; }
.tile[data-go="view-cinema"] i,.tile[data-go="view-cinema"] .tprev { color:#c4dbe8; }
.tile[data-go="view-cinema"] em { color:#eff7fb;align-self:end; }
.cinema-doodle { position:absolute;right:42px;bottom:35px;border:1px solid #7aa1b9;border-radius:50%;width:108px;height:108px;display:grid;place-items:center;font-size:28px;color:#cae4ef;transform:rotate(-10deg);pointer-events:none; }
.tile[data-go="view-gallery"]::before { opacity:.22; }
button:focus-visible,a:focus-visible { outline:3px solid var(--ink-blue);outline-offset:4px; }
.player { background:color-mix(in srgb,var(--paper) 95%,transparent);border-color:var(--brd);box-shadow:var(--shadow); }
.pl-main { background:var(--ink-blue);color:var(--paper); }
footer { padding-bottom:110px; }
.dev-badge { top:auto;bottom:86px;left:20px;right:auto;background:var(--paper);color:var(--txt-dim);border:1px solid var(--brd);border-radius:8px;box-shadow:var(--shadow);font-size:10px;padding:7px 10px; }
@media (min-width:781px) and (max-width:1100px) { .hero-txt { width:65%; }.hero-txt h1 em { font-size:35px; }.hero-art { width:35%; }.hero-art img { height:560px;right:-80px;bottom:-90px; }.hero-sticker { right:10px;bottom:25px; }.topbar-in { flex-wrap:wrap; }.brand { margin-right:0; }nav.menu { flex:1; }.tile { padding:20px; } }
@media (prefers-reduced-motion:reduce) { .hero-art,.hero-art * { animation:none!important; }.tile { transition:none!important; } }

/* 窗边的小窝 · 原创暖光房间与便签 */
:root { --bg-0:#29242c;--bg-1:#302b33;--bg-2:#4b3d41;--paper:#38303a;--txt:#f7e9d7;--txt-dim:#d4c0b4;--muted:#c4ada5;--brd:#5b4850;--brd-hi:#be9287;--ink-blue:#f0b09c;--blue:#f0b09c;--pink:#e3a3ae;--violet:#c7b4d2;--mint:#b8c9b0;--line-blue:rgba(225,189,151,.12);--grad:linear-gradient(110deg,#ebb29c,#d7b4c2);--shadow:0 7px 20px -12px #160e17; }
[data-theme="sakura"] { --bg-0:#faf4e7;--bg-1:#f7eddf;--bg-2:#f0dbc3;--paper:#fffcf5;--txt:#624c42;--txt-dim:#836b5b;--muted:#927a68;--brd:#e8d7c3;--brd-hi:#c99881;--ink-blue:#aa6658;--blue:#aa6658;--pink:#c98f9c;--violet:#ad95b4;--mint:#87977d;--line-blue:rgba(167,130,98,.12);--grad:linear-gradient(110deg,#aa6658,#ba8c74);--glass:rgba(255,252,245,.91);--glass-hi:#fffcf5;--shadow:0 8px 22px -15px rgba(107,75,49,.32); }
body { background:var(--bg-0); }
.aurora { background:radial-gradient(circle at 1px 1px,var(--line-blue) 1px,transparent 1.3px) 0 0/19px 19px,linear-gradient(150deg,var(--bg-0),var(--bg-1)); }
#bg { opacity:.22; }
.topbar-in,.wrap { max-width:1280px; }
header.topbar { backdrop-filter:blur(16px);background:color-mix(in srgb,var(--paper) 94%,transparent); }
.topbar-in { min-height:76px; }
.brand img { border-radius:50%;border:2px solid #f3daca; }
.brand-txt b { color:var(--ink-blue); }
.brand-txt span { letter-spacing:1.2px; }
.navbtn.on { background:color-mix(in srgb,var(--ink-blue) 12%,var(--paper));color:var(--ink-blue);box-shadow:none;border:1px solid var(--brd); }
.navbtn { border:1px solid transparent;border-radius:18px;padding:8px 10px; }
.hero { padding:28px 0 34px; }
.hero-in { min-height:522px;border-radius:22px;padding:32px 39px 32px;border:6px solid var(--paper);box-shadow:0 0 0 1px var(--brd),0 16px 35px -23px #886e50; }
.hero-in::before { z-index:-1;opacity:1;background:linear-gradient(90deg,rgba(255,250,239,.95) 0%,rgba(255,250,239,.9) 35%,rgba(255,250,239,.22) 61%,transparent 77%); }
.hero-in::after { display:none; }
.cozy-room { position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 61%; }
.hero .avatar-ring { top:32px;left:39px;box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--brd); }
.hero-eyebrow { color:#906348; }
.hero-eyebrow span { font-size:10px;letter-spacing:2px; }
.hero-eyebrow small { color:#967d64; }
.hero-txt { width:55%;padding-top:35px;position:relative;z-index:2; }
.hero-hello { color:#977f66;font-size:13px;letter-spacing:2px; }
.hero-txt h1 em { color:#9b594d;font-family:'KaiTi','STKaiti','Microsoft YaHei',serif;font-size:49px;font-weight:600;letter-spacing:1px;-webkit-text-fill-color:currentColor; }
.hero-subtitle { font-family:'KaiTi','STKaiti','Microsoft YaHei',serif;font-size:25px;color:#735b48;margin-top:14px; }
.hero-txt .sign { color:#846b58;max-width:440px;font-size:13px;line-height:2;margin-top:19px;margin-bottom:25px; }
.hero-actions { gap:20px;margin-bottom:26px; }
.hero-actions .btn { background:#aa6658;color:#fff9ef;border:1px solid #aa6658;border-radius:24px;padding:12px 20px;box-shadow:0 4px 0 #e8ccbb; }
.hero-secondary { color:#8e6755; }
.chip { background:rgba(255,251,240,.8);border:1px dashed #ddc5ab;border-radius:8px;color:#8b7059; }
.hero-art { width:35%;z-index:1; }
.hero-art img { height:480px;bottom:-90px;right:3px;filter:drop-shadow(0 8px 8px #65452a30); }
.hero-orbit,.hero-star { display:none; }
.hero-sticker { right:17px;bottom:28px;background:#fffaf0;border-color:#d8b99d;color:#a46552;box-shadow:0 5px 13px #80614920;font-family:'KaiTi','Microsoft YaHei',serif;font-size:19px;padding:12px 17px;transform:rotate(-5deg);border-radius:2px; }
.hero-sticker::before { content:'';position:absolute;top:-9px;left:33%;width:52px;height:17px;background:#d6b98780;transform:rotate(4deg); }
.hero-sticker small { font-family:'Microsoft YaHei',sans-serif;color:#97755b;font-size:9px; }
.room-note { position:absolute;right:245px;bottom:19px;color:#705444;background:#fffaebcf;padding:8px 16px;border:1px solid #e5ceb1;transform:rotate(2deg);font-family:'KaiTi','Microsoft YaHei',serif;font-size:14px; }
[data-theme="night"] .hero-in::before { background:linear-gradient(90deg,rgba(41,34,40,.96) 0%,rgba(41,34,40,.86) 36%,rgba(41,34,40,.18) 65%,transparent); }
[data-theme="night"] .cozy-room { filter:brightness(.62) saturate(.75); }
[data-theme="night"] .hero-txt h1 em { color:#f1b69f; }
[data-theme="night"] .hero-subtitle,[data-theme="night"] .hero-txt .sign,[data-theme="night"] .hero-hello,[data-theme="night"] .hero-eyebrow,[data-theme="night"] .hero-eyebrow small { color:#e7ccaf; }
[data-theme="night"] .hero-secondary { color:#e3baa2; }
[data-theme="night"] .chip { color:#e8ccaf;background:#44343b;border-color:#866957; }
.sec-h h2 { font-size:22px;font-family:'KaiTi','STKaiti','Microsoft YaHei',serif;color:var(--ink-blue); }
.sec-h .en { letter-spacing:1.3px; }
.sec-h .line { background:none;border-top:1px dashed var(--brd-hi);opacity:.4; }
.tile-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:21px 24px;padding:5px 3px 8px; }
.tile { min-height:181px;border-radius:8px 8px 22px 8px;padding:23px 26px;background:var(--paper);border:1px solid var(--brd);box-shadow:3px 5px 0 color-mix(in srgb,var(--brd) 55%,transparent);overflow:visible; }
.tile::before { inset:-8px 38% auto auto;width:68px;height:18px;transform:rotate(-4deg);background:color-mix(in srgb,var(--ink-blue) 23%,var(--paper));border:1px dashed var(--brd);opacity:.8;border-radius:1px;z-index:2; }
.tile::after { content:counter(corner,decimal-leading-zero) ' /';color:var(--muted);font-size:9px; }
.tile .ti { width:31px;height:31px;color:var(--ink-blue);margin-bottom:9px; }
.tile b { font-family:'KaiTi','STKaiti','Microsoft YaHei',serif;font-size:22px;font-weight:600; }
.tile i { color:var(--txt-dim);font-size:11px; }
.tile .tprev { color:var(--muted); }
.tile:hover { transform:translateY(-4px) rotate(-.4deg);border-color:var(--brd-hi);box-shadow:4px 8px 0 color-mix(in srgb,var(--brd) 70%,transparent); }
[data-theme="sakura"] .tile[data-go="view-log"] { background:#fff9e9; }
[data-theme="sakura"] .tile[data-go="view-notice"] { background:#faf0e8; }
[data-theme="sakura"] .tile[data-go="view-fav"] { background:#f7f0f6; }
[data-theme="sakura"] .tile[data-go="view-gallery"] { background:#eef4f4; }
[data-theme="sakura"] .tile[data-go="view-guest"] { background:#fff7ed; }
.tile[data-go="view-cinema"] { grid-column:auto;grid-row:auto;min-height:181px;padding:23px 26px;color:#fff2d9;background:linear-gradient(130deg,#a57559,#795946); }
.tile[data-go="view-cinema"]::before { inset:-8px 38% auto auto;width:68px;height:18px;border:1px dashed #d5bca3;border-radius:1px;background:#eeddb980;opacity:1; }
.tile[data-go="view-cinema"] .ti { width:31px;height:31px;color:#ffefd6; }
.tile[data-go="view-cinema"] .cinema-label { margin-top:0;font-size:9px;letter-spacing:1px;color:#f2d9bd; }
.tile[data-go="view-cinema"] b { font-size:21px;line-height:1.5;max-width:none; }
.tile[data-go="view-cinema"] i,.tile[data-go="view-cinema"] .tprev,.tile[data-go="view-cinema"] em { color:#f6dfc8; }
.cinema-doodle { width:43px;height:43px;font-size:14px;right:23px;bottom:20px;border-color:#cda883;color:#f9e5c6; }
.tile[data-go="view-gallery"]::before { opacity:.8; }
.cozy-photo { position:absolute;right:24px;top:38px;width:118px;padding:6px 6px 15px;background:#fffaf1;box-shadow:0 3px 10px #78583c25;transform:rotate(7deg);pointer-events:none; }
.cozy-photo img { display:block;width:100%;height:81px;object-fit:cover;object-position:right; }
.cozy-photo small { display:block;font-size:9px;color:#846951;text-align:center;margin-top:5px;font-family:'KaiTi',serif; }
.tile[data-go="view-gallery"] b,.tile[data-go="view-gallery"] i,.tile[data-go="view-gallery"] .tprev { max-width:58%; }
.dev-badge { font-size:9px;background:var(--paper);color:var(--muted);opacity:.9; }
@media(min-width:781px) and (max-width:1100px) { .hero-txt { width:63%; }.hero-txt h1 em { font-size:40px; }.hero-art img { height:450px;right:-40px;bottom:-80px; }.room-note { display:none; }.tile { padding:22px; }.tile b { font-size:20px; } }

/* 参考场景式封面、个人侧栏与图文栏目，重新建立主次和阅读顺序 */
.hero-in { height:357px;min-height:0;padding:29px 36px;border:0;border-radius:17px;background:#e7cfab; }
.cozy-room { object-position:60% 60%;z-index:0;pointer-events:none; }
.hero-in::before { z-index:1;background:linear-gradient(90deg,#3b261820,transparent 60%),linear-gradient(0deg,#37261852,transparent 70%);pointer-events:none; }
.hero-eyebrow { z-index:3;padding-left:0;height:auto;display:inline-block;color:#785435;border:1px solid #fff5e890;padding:7px 11px;background:#fff8e4b3;border-radius:4px; }
.hero-eyebrow small { display:none; }
.hero-txt { position:absolute;bottom:38px;left:36px;padding:0;width:auto;z-index:3; }
.hero-txt h1 { margin:0;text-shadow:0 2px 20px #3d241870; }
.hero-hello { color:#fff7e4;margin-bottom:9px;font-size:12px; }
.hero-txt h1 em { font-size:43px;color:#fff9e6; }
.hero-subtitle { font-size:20px;color:#fff9e6;margin-top:9px; }
.hero-art { width:28%;z-index:2; }
.hero-art img { height:430px;bottom:-86px;right:9px; }
.hero-sticker { bottom:21px;right:15px;font-size:16px;padding:9px 15px; }
.room-note { display:none; }
[data-theme="night"] .hero-in::before { background:linear-gradient(0deg,#21191c88,transparent 80%); }
[data-theme="night"] .hero-txt h1 em,[data-theme="night"] .hero-hello,[data-theme="night"] .hero-subtitle { color:#fff2df; }
[data-theme="night"] .hero-eyebrow { background:#30242cbf;border-color:#e1c9a54d;color:#f4dbc0; }
.home-layout { display:grid;grid-template-columns:258px minmax(0,1fr);gap:34px;align-items:start; }
.home-sidebar { min-width:0; }
.profile-paper { position:relative;background:var(--paper);border:1px solid var(--brd);border-radius:12px;padding:25px 23px 22px;text-align:center;box-shadow:var(--shadow); }
.profile-paper::before { content:'';width:82px;height:19px;background:#d3ad8570;position:absolute;left:calc(50% - 41px);top:-10px;transform:rotate(-5deg); }
.profile-kicker { color:var(--muted);font-size:9px;letter-spacing:1px; }
.profile-paper .avatar-ring { position:relative;width:77px;height:77px;top:auto;left:auto;margin:22px auto 16px;background:#edd9be;padding:3px;animation:none;box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--brd); }
.profile-paper .avatar-ring>div { font-size:37px; }
.profile-paper h2 { font-family:'KaiTi','STKaiti',serif;font-size:26px;color:var(--ink-blue);font-weight:500;margin:0 0 7px; }
.profile-sub { color:var(--muted);font-size:10px; }
.profile-paper .sign { color:var(--txt-dim);font-size:11px;line-height:2;text-align:left;margin:20px 0;min-height:70px; }
.profile-hello { width:100%;border:1px solid var(--brd);border-radius:20px;background:var(--bg-1);color:var(--ink-blue);font:inherit;font-size:11px;cursor:pointer;padding:9px; }
.profile-divider { border-top:1px dashed var(--brd);margin:22px 0 16px; }
.profile-paper .chips { display:flex;flex-direction:column;align-items:center;gap:8px; }
.profile-paper .chip { border:0;background:none;font-size:9px;padding:0; }
.sidebar-note { background:#f5e3bc;color:#8a6449;padding:20px 21px;margin:28px 7px 0;transform:rotate(-3deg);box-shadow:2px 4px 0 #b8956425; }
.sidebar-note span { font-size:12px; }
.sidebar-note p { font-family:'KaiTi','STKaiti',serif;line-height:1.8;font-size:17px;margin:13px 0 9px; }
.sidebar-note small { font-size:9px; }
[data-theme="night"] .sidebar-note { background:#5e493f;color:#f2d9b8; }
.home-content .sec-h { margin:0 0 19px; }
.home-content .sec-h h2 { font-size:23px; }
.home-content .sec-h .en { font-size:8px; }
.tile-grid { grid-template-columns:repeat(6,minmax(0,1fr));gap:17px;padding:0; }
.tile { grid-column:span 2;min-height:139px;padding:20px;border-radius:9px;box-shadow:none; }
.tile::before { display:none; }
.tile::after { display:none; }
.tile .ti { width:24px;height:24px;margin-bottom:8px; }
.tile b { font-size:19px; }
.tile i { font-size:10px; }
.tile .tprev { margin-top:7px;font-size:9px;min-height:13px; }
.tile>em { margin-top:9px;font-size:9px; }
.tile[data-go="view-log"],.tile[data-go="view-cinema"] { grid-column:span 3;grid-row:1;min-height:237px;border-radius:12px;padding:25px;overflow:clip; }
.tile[data-go="view-log"] { background:linear-gradient(90deg,#fff6e8 0%,#fff6e8d9 48%,#fff6e85c),url('assets/cozy-room-v2.webp') right center/cover!important; }
[data-theme="night"] .tile[data-go="view-log"] { background:linear-gradient(90deg,#44323bef 0%,#44323bdb 48%,#44323b5c),url('assets/cozy-room-v2.webp') right center/cover!important; }
.tile[data-go="view-log"] .feature-label { font-size:9px;letter-spacing:1px;color:var(--ink-blue);margin:10px 0 5px; }
.tile[data-go="view-log"] b { font-size:23px;line-height:1.5;max-width:75%; }
.tile[data-go="view-log"] .ti { width:28px;height:28px; }
.tile[data-go="view-cinema"] { background:linear-gradient(90deg,#2d252ad9,transparent),url('assets/cozy-cinema-v2.webp') right center/cover; }
.tile[data-go="view-cinema"] .ti { width:28px;height:28px; }
.tile[data-go="view-cinema"] .cinema-label { font-size:9px;margin:11px 0 4px; }
.tile[data-go="view-cinema"] b { font-size:23px;max-width:85%;line-height:1.5; }
.tile[data-go="view-cinema"] .tprev { color:#f1d9b7; }
.cinema-doodle { width:36px;height:36px;font-size:12px;right:21px;bottom:19px;background:#ffedca15; }
.tile[data-go="view-stats"] { grid-column:span 6;min-height:53px;display:flex;flex-direction:row;align-items:center;gap:12px;padding:14px 20px;border:1px dashed var(--brd);background:transparent; }
.tile[data-go="view-stats"] .ti { width:20px;height:20px;margin:0; }
.tile[data-go="view-stats"] b { font-family:inherit;font-size:11px; }
.tile[data-go="view-stats"] i { display:none; }
.tile[data-go="view-stats"] .tprev { margin:0;min-height:0;flex:1; }
.tile[data-go="view-stats"] em { margin:0; }
.cozy-photo { width:65px;top:32px;right:14px;padding:4px 4px 8px; }
.cozy-photo img { height:48px; }.cozy-photo small { font-size:7px; }
.tile[data-go="view-gallery"] b,.tile[data-go="view-gallery"] i,.tile[data-go="view-gallery"] .tprev { max-width:65%; }
.tile:hover { box-shadow:var(--shadow);transform:translateY(-3px); }
@media(min-width:781px) and (max-width:1100px) { .home-layout { grid-template-columns:220px minmax(0,1fr);gap:22px; }.hero-txt { width:auto; }.hero-art img { right:-20px; }.tile { padding:17px; }.tile[data-go="view-log"],.tile[data-go="view-cinema"] { padding:21px; }.tile[data-go="view-log"] b,.tile[data-go="view-cinema"] b { font-size:21px; }.cozy-photo { width:45px;right:10px; }.cozy-photo img { height:35px; } }

/* 同一房间的阳光与暖灯场景，跟随原有主题按钮。两图预加载避免首次切换空白。 */
.cozy-room { transition:opacity .45s ease;filter:none!important; }
.hero-art img,.brand img,.profile-paper .avatar-ring img,#mascot { filter:saturate(.9) sepia(.04) brightness(1.02) drop-shadow(0 4px 8px #79564220);transition:filter .4s ease; }
[data-theme="night"] .hero-art img,[data-theme="night"] .brand img,[data-theme="night"] .profile-paper .avatar-ring img,[data-theme="night"] #mascot { filter:saturate(.88) sepia(.07) brightness(.98) drop-shadow(0 3px 9px #f3bc6530); }
.cozy-room-night { opacity:0;visibility:hidden; }
[data-theme="night"] .cozy-room:not(.cozy-room-night) { opacity:0;visibility:hidden; }
[data-theme="night"] .cozy-room-night { opacity:1;visibility:visible; }
[data-theme="night"] .hero-in::before { background:linear-gradient(0deg,#21191c35,transparent 70%); }
[data-theme="night"] .tile[data-go="view-log"] { background:linear-gradient(90deg,#44323bf0 0%,#44323bbd 43%,#44323b15),url('assets/cozy-room-night-v3.webp') right center/cover!important; }
.cozy-photo .photo-night { display:none; }
[data-theme="night"] .cozy-photo .photo-day { display:none; }
[data-theme="night"] .cozy-photo .photo-night { display:block; }
@media(prefers-reduced-motion:reduce) { .cozy-room { transition:none; } }

/* 小栈 2026-10-03 · 各版块独立构图，温馨小窝的完整内页 */
body:has(.section-view.is-on)>.mascot-wrap { display:none; }
.section-view { padding-bottom:30px; }
.section-view .page-bar { padding:24px 0 15px;border-bottom:1px solid var(--brd);gap:13px; }
.section-view .page-bar h2 { font-size:14px;letter-spacing:1px;color:var(--muted);font-weight:500; }
.section-view .page-bar .hint { font-size:11px; }
.section-view .backbtn { border:0;background:none;color:var(--ink-blue);padding:7px 0;margin-right:12px;font-size:11px; }
.section-intro { padding:36px 0 30px;position:relative; }
.section-kicker { display:block;font-size:9px;letter-spacing:2px;color:var(--ink-blue);font-weight:600; }
.section-intro h3 { font:500 32px/1.5 'KaiTi','STKaiti','Microsoft YaHei',serif;color:var(--txt);margin:11px 0 8px; }
.section-intro p { font-size:12px;color:var(--muted);line-height:1.9;margin:0; }
.section-intro::after { content:'✧';position:absolute;right:18px;top:33px;font-size:58px;color:var(--ink-blue);opacity:.18;transform:rotate(12deg); }
.section-layout { display:grid;gap:34px;align-items:start; }
.section-layout.editorial,.section-layout.bulletin { grid-template-columns:minmax(0,1fr) 245px; }
.section-main { min-width:0; }
.section-aside { min-width:0; }
.aside-paper { border:1px solid var(--brd);border-radius:4px;background:var(--paper);padding:28px 24px;position:relative;box-shadow:3px 5px 0 var(--line-blue); }
.aside-paper::before { content:'';position:absolute;top:-9px;left:36%;width:68px;height:18px;transform:rotate(-5deg);background:#ccb09066; }
.aside-doodle { display:block;font-size:45px;font-family:serif;color:var(--ink-blue);margin:23px 0 10px; }
.aside-paper h3 { font:500 24px/1.5 'KaiTi','STKaiti',serif;margin:10px 0;color:var(--txt); }
.aside-paper p { font-size:11px;line-height:2.1;color:var(--muted);margin:12px 0 23px; }
.section-link { border:0;border-bottom:1px dashed var(--brd-hi);background:none;padding:8px 0;font:11px 'Microsoft YaHei',sans-serif;color:var(--ink-blue);cursor:pointer; }
.aside-foot { margin:20px 10px;color:var(--muted);font-size:10px;text-align:center; }
.section-view .card.glass { background:var(--paper);border:1px solid var(--brd);backdrop-filter:none;border-radius:13px;padding:26px;box-shadow:var(--shadow); }
.section-view input,.section-view textarea,.section-view select { background:var(--bg-0);border-radius:9px;border-color:var(--brd);font-size:12px; }
.section-view input:focus,.section-view textarea:focus,.section-view select:focus { box-shadow:0 0 0 3px var(--line-blue);border-color:var(--brd-hi); }
.section-view .btn { background:var(--ink-blue);color:var(--paper);border-radius:20px;font-size:11px; }
.section-view .btn.ghost { background:var(--bg-0);color:var(--ink-blue); }
.section-view .empty { grid-column:1/-1;border:1px dashed var(--brd);border-radius:12px;padding:42px 24px;background:var(--paper);font-size:12px;line-height:2; }
.section-view .empty::before { content:'✧';display:block;font-size:31px;color:var(--ink-blue);opacity:.5;margin-bottom:11px; }
.section-view .tab,.section-view .cmt-tab { border-radius:22px;padding:8px 16px;color:var(--txt-dim); }
.section-view .tab.on,.section-view .cmt-tab.on { background:var(--ink-blue);color:var(--paper);border-color:var(--ink-blue); }

/* 日常：留出日期与段落呼吸的手账时间线 */
#view-log .post-list { gap:24px;margin-left:15px;border-left:1px solid var(--brd);padding-left:26px; }
#view-log .post { background:var(--paper);border:1px solid var(--brd);border-radius:5px 15px 15px 5px;padding:28px 31px;position:relative;box-shadow:var(--shadow); }
#view-log .post::before { content:'';position:absolute;left:-33px;top:35px;width:11px;height:11px;border:3px solid var(--bg-0);background:var(--ink-blue);border-radius:50%; }
.section-view .post-hd { gap:10px;margin-bottom:13px;border-bottom:1px dashed var(--brd);padding-bottom:13px; }
.section-view .post-date { font-size:10px;letter-spacing:1px;color:var(--muted); }
.section-view .post-mood { font-size:9px;background:var(--bg-1);border:1px solid var(--brd);color:var(--ink-blue); }
.section-view .post h3 { font:500 24px/1.6 'KaiTi','STKaiti',serif;color:var(--txt);margin-bottom:15px; }
.section-view .post-body { font-size:13px;line-height:2.05;color:var(--txt-dim); }
.section-view .post-img { border-radius:9px;margin-top:19px; }
.section-view .post-tags { margin-top:18px;gap:7px; }
.section-view .tg { background:var(--bg-1);color:var(--ink-blue);border-radius:4px;padding:3px 8px;font-size:9px; }
.section-view .post-foot { padding-top:17px;margin-top:20px;border-top:1px solid var(--brd); }
.section-view .post-foot button { display:inline-flex;align-items:center;gap:6px;margin:0;padding:7px 14px;background:var(--bg-0);color:var(--txt-dim);border:1px solid var(--brd);border-radius:18px; }
.section-view .post-foot .pf-ico { filter:none; }
.section-view .log-tools:empty { display:none; }
#view-log .log-tools { background:var(--paper);border-radius:10px;border:1px solid var(--brd);padding:14px;margin-bottom:24px; }

/* 公告：有层次的纸张告示板，重要等级继续使用原标记 */
#view-notice .section-main { border:1px solid var(--brd);border-radius:16px;padding:26px;background:repeating-linear-gradient(45deg,var(--bg-1),var(--bg-1) 3px,var(--bg-0) 3px,var(--bg-0) 7px); }
#view-notice .post-list { gap:26px; }
#view-notice .post { background:var(--paper);border:1px solid var(--brd);padding:27px 29px;border-radius:3px;position:relative;box-shadow:4px 6px 0 var(--line-blue); }
#view-notice .post::before { content:'';width:75px;height:18px;background:#caa98666;position:absolute;left:calc(50% - 37px);top:-10px;transform:rotate(-4deg); }
#view-notice .post:nth-child(even)::before { transform:rotate(4deg); }
#view-notice .post-body { font-size:13px; }

/* 放映厅：场景封面与电影海报陈列 */
#view-cinema .cine-tabs { margin:23px 0 20px;border-bottom:1px solid var(--brd);padding-bottom:13px;gap:10px; }
#view-cinema .cine-hero { height:292px;padding:34px 38px;position:relative;background:none!important;border:1px solid var(--brd);border-radius:16px;overflow:clip;margin-bottom:25px;display:flex;align-items:end; }
.room-cover>img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center; }
.section-cover-day { display:block; }.section-cover-night { display:none; }
[data-theme="night"] .section-cover-day { display:none; }[data-theme="night"] .section-cover-night { display:block; }
#view-cinema .cine-hero::before { inset:0;opacity:1;background:linear-gradient(90deg,#3828209c,transparent 85%),linear-gradient(0deg,#30201850,transparent);z-index:1;pointer-events:none; }
#view-cinema .ch-txt { z-index:2;max-width:75%;gap:10px; }
#view-cinema .ch-txt b { font:500 32px/1.5 'KaiTi','STKaiti',serif;background:none;color:#fff4df;-webkit-text-fill-color:currentColor; }
#view-cinema .ch-txt span { color:#fbe7cb;font-size:12px; }
#view-cinema .ch-txt .section-kicker { font-size:9px;letter-spacing:2px; }
#view-cinema .ch-txt .ch-sub { font-size:10px;color:#ead5b9; }
.cinema-ticket { position:absolute;z-index:2;right:31px;top:27px;transform:rotate(8deg);padding:15px 22px;border:1px dashed #e5ceb0;color:#765543;background:#fff5df;text-align:center;letter-spacing:2px;font-size:12px;box-shadow:0 5px 12px #1d101025; }
.cinema-ticket small { display:block;font-size:9px;letter-spacing:0;margin-top:5px; }
#view-cinema .video-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:22px; }
#view-cinema .vcard { background:var(--paper);border:1px solid var(--brd);border-radius:11px;box-shadow:var(--shadow); }
#view-cinema .vcard-cover { aspect-ratio:3/4;background:var(--bg-1); }
#view-cinema .vcard-body { padding:16px 16px 18px;gap:9px; }
#view-cinema .vcard-body b { font-size:15px;font-weight:500;color:var(--txt); }
#view-cinema .vcard-body .vmeta { font-size:10px; }
#view-cinema .vcard-admin { opacity:1; }
#view-cinema .vcard-admin .btn { background:color-mix(in srgb,var(--paper) 94%,transparent);border-color:var(--brd);color:var(--txt-dim);font-size:9px; }
#view-cinema .room-top { background:var(--paper);border:1px solid var(--brd);border-radius:13px;padding:20px;margin-bottom:19px; }
#view-cinema .room-item { background:var(--paper);border-color:var(--brd);border-radius:12px;box-shadow:var(--shadow); }

/* 关于我：打开的一本个人档案 */
.about-spread { display:grid;grid-template-columns:300px minmax(0,1fr);border:1px solid var(--brd);border-radius:15px;overflow:clip;background:var(--paper);box-shadow:var(--shadow); }
.about-portrait { padding:30px;text-align:center;border-right:1px dashed var(--brd);background:linear-gradient(var(--bg-1),var(--paper)); }
.about-portrait img { width:170px;height:200px;object-fit:contain;margin:0 auto 17px;display:block;filter:saturate(.92); }
.about-portrait>span { font-size:9px;letter-spacing:2px;color:var(--muted); }
.about-portrait h3 { font:600 34px 'Trebuchet MS','Segoe UI',sans-serif;letter-spacing:-1px;color:var(--ink-blue);margin:13px 0; }
.latin-name { font-family:'Trebuchet MS','Segoe UI',sans-serif;font-weight:600;letter-spacing:-.6px; }
.section-kicker,.about-portrait>span,.cinema-ticket { font-family:'Trebuchet MS','Segoe UI','Microsoft YaHei',sans-serif;letter-spacing:1.3px; }
.about-portrait p { font-size:12px;color:var(--muted);line-height:2; }
.about-details { padding:30px 35px; }
#view-about .about-details .card { padding:0;border:0;box-shadow:none;background:none; }
#view-about .about-list { gap:0; }
#view-about .about-row { display:grid;grid-template-columns:90px minmax(0,1fr);gap:19px;padding:17px 0;border-bottom:1px solid var(--brd);font-size:13px;line-height:1.9; }
#view-about .about-row .k { color:var(--ink-blue);font-size:11px; }
#view-about .skills { margin-top:29px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px; }
#view-about .skill .t { font-size:11px;margin-bottom:8px;color:var(--muted); }
#view-about .bar { background:var(--bg-1);height:6px; }
#view-about .bar i { background:var(--ink-blue); }

/* 收藏：分类标签与陈列书架 */
#view-fav>.card { display:grid;grid-template-columns:155px minmax(0,1fr);gap:30px;padding:30px; }
#view-fav .tabs { flex-direction:column;border-right:1px solid var(--brd);padding-right:20px;gap:10px;align-self:start;margin:0; }
#view-fav .tabs .tab { text-align:left;padding:12px 15px;border-radius:7px;font-size:12px; }
#view-fav .fav-list { grid-template-columns:repeat(3,minmax(0,1fr));gap:25px 20px;align-items:start; }
#view-fav .fav-item { position:relative;display:flex;flex-direction:column;align-items:start;gap:13px;min-height:207px;padding:20px 19px;background:var(--bg-0);border:1px solid var(--brd);border-bottom:6px solid var(--brd);border-radius:9px 9px 2px 2px; }
#view-fav .fav-cover { width:60px;height:74px;border-radius:3px 9px 9px 3px;box-shadow:3px 3px 0 var(--brd);background:var(--bg-2);font-size:32px; }
#view-fav .fav-item .t { font:500 20px/1.5 'KaiTi',serif;color:var(--txt); }
#view-fav .fav-item .s { font-size:11px;line-height:1.8; }
#view-fav .stars { margin:0;font-size:10px;color:var(--ink-blue); }
#view-fav .fav-item:hover { transform:translateY(-4px); }

/* 相册：有留白和照片边框的错落相纸墙 */
#view-gallery>.card { background:transparent;border:0;padding:0;box-shadow:none; }
#view-gallery .gal { grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;align-items:start; }
#view-gallery .gal figure { aspect-ratio:4/5;padding:10px 10px 43px;background:var(--paper);border:1px solid var(--brd);border-radius:3px;box-shadow:4px 6px 0 var(--line-blue);font-size:50px;overflow:hidden; }
#view-gallery .gal figure:nth-child(3n+1) { transform:rotate(-1.5deg); }
#view-gallery .gal figure:nth-child(3n+2) { transform:rotate(1.5deg); }
#view-gallery .gal figure img { border-radius:1px;min-height:0; }
#view-gallery .gal figcaption { opacity:1;background:none;color:var(--txt-dim);bottom:0;left:10px;right:10px;padding:12px 4px;font:14px 'KaiTi',serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#view-gallery .gal figure:hover { transform:translateY(-5px) rotate(0); }

/* 留言：访客簿侧页和写信区 */
.section-layout.guestbook { grid-template-columns:245px minmax(0,1fr); }
#view-guest .section-main>.card { padding:27px 30px;border-radius:4px 15px 15px 4px; }
#view-guest .cmt-box { border:0;margin:0;padding:0;background:none; }
.section-view .cmt-head { border-bottom:1px solid var(--brd);padding-bottom:15px;margin-bottom:23px; }
.section-view .cmt-head>b { font-size:15px; }.section-view .cmt-head em { color:var(--ink-blue); }
.section-view .cmt-form { background:var(--bg-0);border:1px solid var(--brd);border-radius:12px;padding:20px;gap:15px; }
.section-view .cmt-input { min-width:0; }
.section-view .cmt-input textarea { background:var(--paper);border:1px solid var(--brd);min-height:115px;padding:14px;line-height:2; }
.section-view .cmt-ava { border-color:var(--brd);background:var(--paper); }
.section-view .cmt-av.on { border-color:var(--ink-blue);background:var(--bg-2); }
.section-view .cmt-form-foot { flex-wrap:wrap;gap:10px; }
.section-view .cmt { padding:23px 0;border-color:var(--brd); }
.section-view .cmt-top b { color:var(--ink-blue);font-size:12px; }
.section-view .cmt-text { color:var(--txt-dim);font-size:12px;line-height:1.9;margin-top:9px; }
.section-view .cmt-time { font-size:9px;color:var(--muted); }
.section-view .cmt-btn { color:var(--muted); }.section-view .cmt-btn.on { color:var(--ink-blue); }
.section-view .cmt-subs { background:var(--bg-0);border-radius:8px;padding:12px 17px; }

/* 小纸条：独立信纸，编辑仍在原位置 */
#view-note .section-intro { text-align:center;padding-top:41px; }
#view-note .section-intro::after { display:none; }
#view-note #note { position:relative;max-width:740px;margin:12px auto 50px;padding:58px 65px 46px;border-radius:3px;background:repeating-linear-gradient(var(--paper),var(--paper) 33px,var(--line-blue) 34px,var(--paper) 35px);box-shadow:8px 11px 0 var(--line-blue);border:1px solid var(--brd); }
#view-note #note::before { content:'';position:absolute;top:-13px;left:calc(50% - 53px);width:106px;height:28px;background:#c9a98466;transform:rotate(-4deg); }
#view-note .note-body { min-height:260px;font:19px/35px 'KaiTi','STKaiti',serif;color:var(--txt); }
#view-note #note::after { content:'♡';display:block;text-align:right;color:var(--ink-blue);font-size:32px;margin-top:24px;pointer-events:none; }

/* 访问：足迹计数与一张可分享的明信片 */
#view-stats .stat-grid { grid-template-columns:repeat(4,minmax(0,1fr));gap:20px; }
#view-stats .stat { border:0;border-right:1px dashed var(--brd);border-radius:0;background:none;padding:23px 15px; }
#view-stats .stat:last-child { border:0; }
#view-stats .stat b { background:none;color:var(--ink-blue);font:500 43px/1.2 Georgia,serif;-webkit-text-fill-color:currentColor;margin-bottom:12px; }
#view-stats .stat span { font-size:11px;letter-spacing:2px; }
#view-stats .recent { border-top:1px solid var(--brd);padding-top:18px;gap:10px; }
#view-stats .recent .v { border-radius:5px;background:var(--bg-0);padding:7px 12px;font-size:10px; }
#view-stats .share-card { margin-top:25px;position:relative; }
#view-stats .share-card::after { content:'POSTCARD';position:absolute;right:26px;top:24px;font-size:9px;letter-spacing:3px;color:var(--muted); }
#view-stats .share-card h3 { font:500 24px 'KaiTi',serif;color:var(--ink-blue);margin-bottom:25px; }
#view-stats .share-in { display:grid;grid-template-columns:190px minmax(0,1fr);gap:34px;align-items:center; }
#view-stats .qr-box { border-right:1px dashed var(--brd);padding-right:28px; }
#view-stats .qr-box img { border-radius:3px;border:8px solid #fff;box-shadow:0 0 0 1px var(--brd);width:140px;height:140px; }
#view-stats .share-txt p { font-size:12px;line-height:2;color:var(--txt-dim); }
#view-stats .link-row { max-width:520px; }

/* 管理面板与弹窗沿用统一纸张、输入和按钮系统 */
#view-custom>.card { margin-top:24px; }
.section-view .user-list { gap:12px; }
.cine-modal .btn,.member-modal .btn,.login-modal .btn { border-radius:20px;background:var(--ink-blue);color:var(--paper); }
.cine-modal .btn.ghost,.member-modal .btn.ghost,.login-modal .btn.ghost { color:var(--txt-dim);background:var(--bg-0); }
@media(min-width:781px) and (max-width:1100px) { .section-layout.editorial,.section-layout.bulletin { grid-template-columns:minmax(0,1fr) 205px;gap:24px; }.section-layout.guestbook { grid-template-columns:205px minmax(0,1fr);gap:24px; }.aside-paper { padding:24px 18px; }#view-fav .fav-list { grid-template-columns:repeat(2,minmax(0,1fr)); }#view-cinema .video-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.about-spread { grid-template-columns:240px minmax(0,1fr); }.about-details { padding:24px; } }