/* =========================================================
   HNB日历 2.0 主样式（布局 / 组件 / 动效 / 响应式）
   所有颜色均取自皮肤变量（见 themes.css）
========================================================= */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  font-family: var(--font), "Microsoft YaHei", sans-serif;
  color: var(--text);
  min-height:100vh;
  overflow-x:hidden;
  background:#fff; /* 兜底，实际由 .scene 渲染 */
}
button { font-family:inherit; cursor:pointer; color:var(--text); }
input, select, textarea {
  font-family:inherit; color:var(--text);
  background:var(--input-bg); border:1.5px solid var(--card-border);
  border-radius:12px; padding:9px 12px; font-size:14px; width:100%;
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus, select:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
textarea { resize:vertical; }
[hidden] { display:none !important; }

/* SVG 图标通用 */
.ico { flex-shrink:0; display:block; }

/* ---------- 装饰背景层 ---------- */
.scene { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.scene-svg { width:100%; height:100%; display:block; }
/* 水彩云视差：远层慢漂、近层快漂 */
.cloud-far { animation:driftFar 76s ease-in-out infinite alternate; }
.cloud-near { animation:driftNear 34s ease-in-out infinite alternate; }
/* 山间雾霭带：仅浅色皮肤显示，衔接远山与前山 */
.scene-mist { opacity:0; transition:opacity 1.2s ease; }
body[data-theme="a"] .scene-mist, body[data-theme="b"] .scene-mist,
body[data-theme="c"] .scene-mist, body[data-theme="e"] .scene-mist,
body[data-theme="f"] .scene-mist, body[data-theme="g"] .scene-mist { opacity:1; }
/* 星光：逐颗错峰呼吸闪烁（四芒星与圆点混排） */
.scene-sparkles > * { animation:twinkle 4.6s ease-in-out infinite alternate; animation-delay:var(--d,0s); }
@keyframes driftFar { from{ transform:translateX(-1.4%); } to{ transform:translateX(1.4%); } }
@keyframes driftNear { from{ transform:translateX(-3%); } to{ transform:translateX(3%); } }
@keyframes twinkle { from{ opacity:.4; } to{ opacity:1; } }

/* =========================================================
   皮肤主题装饰层（樱花树/飞鸟/流星/气泡 + 飘落粒子）
========================================================= */
.theme-deco, .particles {
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}

/* —— 樱花树（皮肤 E 樱花粉彩）—— */
.deco-tree { display:none; position:absolute; left:-46px; bottom:-72px; width:330px; max-width:38vw;
  transform-origin:50% 100%; animation:treeSway 7s ease-in-out infinite alternate; filter:drop-shadow(0 6px 18px rgba(210,120,150,.22)); }
body[data-theme="e"] .deco-tree { display:block; }
@keyframes treeSway { from{ transform:rotate(-1.7deg); } to{ transform:rotate(1.5deg); } }
/* 梢头/侧缘花簇：轻柔呼吸缩放（围绕自身中心，水彩灵动感） */
.tree-fluff { transform-box:fill-box; transform-origin:50% 100%; animation:bloomGlow 5.5s ease-in-out infinite alternate; }
@keyframes bloomGlow { from{ opacity:.74; transform:scale(.975); } to{ opacity:1; transform:scale(1.02); } }

/* —— 飞鸟剪影（皮肤 A / G）—— */
.deco-birds { display:none; position:absolute; left:100vw; top:22%; width:420px; opacity:.75;
  animation:birdsFly 30s linear infinite; }
body[data-theme="a"] .deco-birds, body[data-theme="g"] .deco-birds { display:block; }
body[data-theme="a"] .deco-birds .bird { fill:rgba(47,125,150,.55); }
body[data-theme="g"] .deco-birds .bird { fill:rgba(96,52,64,.5); }
@keyframes birdsFly { from{ transform:translateX(0); } to{ transform:translateX(-170vw); } }

/* —— 气泡（皮肤 F 薄荷清风）—— */
.deco-bubbles { display:none; position:absolute; inset:0; }
body[data-theme="f"] .deco-bubbles { display:block; }
.deco-bubbles i { position:absolute; bottom:-70px; border-radius:50%;
  border:2px solid rgba(255,255,255,.7); background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.6), rgba(255,255,255,.05));
  animation:bubbleUp linear infinite; }
@keyframes bubbleUp { 0%{ transform:translateY(0); opacity:0; } 8%{ opacity:.85; } 100%{ transform:translateY(-118vh); opacity:0; } }

/* —— 流星（皮肤 D 星夜蓝调）—— */
.deco-shooting { display:none; position:absolute; top:9%; left:66%; width:150px; height:2px;
  border-radius:2px; background:linear-gradient(90deg, rgba(255,255,255,0), #fff); transform:rotate(-32deg); opacity:0; }
body[data-theme="d"] .deco-shooting { display:block; animation:shootingStar 9s ease-in infinite; }
@keyframes shootingStar { 0%{ transform:translate(0,0) rotate(-32deg); opacity:0; }
  5%{ opacity:1; } 16%{ transform:translate(-52vw,34vh) rotate(-32deg); opacity:0; }
  100%{ transform:translate(-52vw,34vh) rotate(-32deg); opacity:0; } }

/* 粒子基础定位 */
.particle { position:absolute; top:-40px; display:block; }
/* 粒子通用形状 */
.particle.petal { border-radius:100% 0 100% 0; box-shadow:inset 0 0 6px rgba(255,255,255,.35); }
.particle.leaf { border-radius:3px 14px 3px 14px; }
.particle.confetti { border-radius:2px; }
.particle.snow { border-radius:50%; }
.particle.foil { border-radius:2px; }
.particle.osman { border-radius:100% 0 100% 0; }
.particle {
  animation-name:particleFall, particleSway;
  animation-duration:var(--fall-dur,10s), var(--sway-dur,3s);
  animation-delay:var(--fall-delay,0s), var(--sway-delay,0s);
  animation-timing-function:linear, ease-in-out;
  animation-iteration-count:infinite, infinite;
}
@keyframes particleFall { from{ transform:translateY(-8vh) rotate(0deg); } to{ transform:translateY(112vh) rotate(420deg); } }
@keyframes particleSway { from{ margin-left:-18px; } to{ margin-left:18px; } }

#login-view, #app-view, .modal, .toast, .lightbox, .drawer-mask { position:relative; z-index:1; }

/* ---------- 通用按钮 ---------- */
.icon-btn {
  background:var(--soft); border:1.5px solid var(--btn-border);
  border-radius:12px; min-width:36px; height:36px; padding:0 10px;
  font-size:15px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.icon-btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.icon-btn:active { transform:scale(.94); }
.pill-btn {
  background:var(--accent); color:#fff; border:none; border-radius:20px;
  padding:7px 16px; font-size:13px; font-weight:700; box-shadow:var(--shadow-sm);
  display:inline-flex; align-items:center; gap:6px;
  transition:transform .18s ease;
}
.pill-btn:hover { transform:translateY(-1px); }
.pill-btn.ghost { background:var(--soft); color:var(--brand); border:1.5px solid var(--btn-border); }
.btn-primary {
  background:var(--accent); color:#fff; border:none; border-radius:14px;
  padding:11px 22px; font-size:14px; font-weight:700; box-shadow:var(--shadow-sm);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:transform .18s ease, opacity .18s ease;
}
.btn-primary:hover { transform:translateY(-2px); }
.btn-primary.small { padding:8px 14px; font-size:13px; border-radius:12px; }
.btn-danger {
  background:var(--danger); color:#fff; border:none; border-radius:14px;
  padding:11px 20px; font-size:13px; font-weight:700; box-shadow:var(--shadow-sm);
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:transform .18s ease, opacity .18s ease;
}
.btn-danger:hover { transform:translateY(-2px); }
.btn-danger:disabled { opacity:.42; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-danger.ghost { background:var(--soft); color:var(--danger); border:1.5px solid color-mix(in srgb, var(--danger) 40%, transparent); box-shadow:none; }

/* ---------- 登录页 ---------- */
.login-view {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.login-card {
  background:var(--card); border:var(--card-border); border-radius:28px;
  padding:36px 34px; width:100%; max-width:420px; text-align:center;
  box-shadow:var(--shadow); animation:popIn .5s ease;
}
.login-brand { display:flex; align-items:center; justify-content:center; gap:10px; font-size:30px; font-weight:800; color:var(--brand); letter-spacing:2px; }
.login-brand .brand-logo { color:var(--accent); }
.login-sub { margin-top:6px; font-size:14px; color:var(--muted); }
.login-users { display:flex; gap:14px; margin:26px 0 18px; }
.login-user {
  flex:1; padding:18px 8px; border-radius:20px; cursor:pointer;
  background:var(--soft); border:2px solid var(--btn-border);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.login-user:hover { transform:translateY(-4px); border-color:var(--accent); }
.login-user.sel { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.login-user .u-avatar { width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:28px; color:#fff; }
/* HNB 2.4.2：JS 模板使用的包装类显式定义（此前依赖继承） */
.u-avatar-wrap { display:flex; justify-content:center; }
.n-empty-ico { display:inline-flex; align-items:center; justify-content:center; }
.login-user .u-acc { font-size:14px; font-weight:800; color:var(--brand); }
.login-user .u-name { font-size:12px; color:var(--muted); }
.login-pwd { display:flex; gap:10px; }
.login-pwd input { flex:1; }
.login-tip { margin-top:16px; font-size:12px; color:var(--muted); line-height:1.8; }

/* ---------- 主视图 ---------- */
#app-view { max-width:1240px; margin:0 auto; padding:16px 20px 46px; }
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--card); border:var(--card-border); border-radius:var(--radius-md);
  padding:10px 16px; box-shadow:var(--shadow); margin-bottom:12px;
}
.brand { display:flex; align-items:center; gap:8px; font-size:19px; font-weight:800; color:var(--brand); }
.brand-logo { color:var(--accent); display:flex; }
.brand-tag { font-size:10px; font-weight:800; color:#fff; background:var(--accent); border-radius:8px; padding:2px 6px; }
.nav { display:flex; align-items:center; gap:8px; }
.month-label { font-size:16px; font-weight:800; min-width:118px; text-align:center; }
.top-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.weather-btn { color:var(--brand); }
.weather-text { font-size:12px; font-weight:700; }
.user-chip {
  background:var(--soft); border:1.5px solid var(--btn-border); border-radius:20px;
  padding:5px 14px 5px 8px; font-size:13px; font-weight:700; color:var(--brand);
  display:inline-flex; align-items:center; gap:7px;
}
.user-chip .u-avatar { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; }

/* 置顶横幅 */
.pin-banner {
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 28%, var(--card)), var(--card));
  border:1.5px dashed var(--accent); border-radius:16px; padding:10px 16px;
  margin-bottom:12px; font-size:13px; display:flex; align-items:center; gap:8px;
  animation:slideDown .4s ease;
}
.pin-banner b { color:var(--brand); }
.pin-banner .ico { color:var(--accent); }

/* ---------- 左右布局：左日历 + 右信息卡 ---------- */
.layout { display:grid; grid-template-columns:minmax(0,1fr) 356px; gap:16px; align-items:start; }

/* 日历面板 */
.cal-panel {
  background:var(--card); border:var(--card-border); border-radius:var(--radius-md);
  padding:14px; box-shadow:var(--shadow);
}
.cal-dow { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
.cal-dow span { text-align:center; font-size:12px; font-weight:800; color:var(--muted); padding:4px 0; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cell {
  border-radius:var(--radius-sm); padding:5px 4px 4px; min-height:76px; cursor:pointer;
  background:var(--cell); border:var(--cell-border); position:relative;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:transform .18s ease, box-shadow .18s ease, outline-color .2s ease;
}
.cell:hover { transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.cell.other { opacity:.35; }
.cell .num { font-size:12.5px; font-weight:800; width:24px; height:24px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.cell.today .num { background:var(--today); color:#fff; box-shadow:var(--shadow-sm); }
.cell.sel { outline:2.5px solid var(--accent); outline-offset:-1px; }
.cell .holiday { font-size:9.5px; color:var(--accent); font-weight:700; line-height:1.2; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cell .holiday.legal { color:var(--danger); font-weight:800; }
.cell .lunar { font-size:9px; color:var(--muted); line-height:1.15; max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cell.today .lunar { color:var(--accent); font-weight:700; }
.cell .tags { display:flex; flex-wrap:wrap; gap:3px; justify-content:center; }
.cell .tg {
  width:24px; height:24px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--tag-bg); border:var(--tag-border); box-shadow:var(--tag-shadow);
  position:relative; transition:transform .18s ease;
}
.cell .tg .ico { width:14px; height:14px; }
.cell .tg:hover { transform:scale(1.15) rotate(-5deg); }
.cell .tg.more { font-size:10px; font-weight:800; color:var(--brand); }
.cell .pin-mark { position:absolute; top:26px; right:4px; color:var(--danger); }
.cell .pin-mark .ico { width:11px; height:11px; }
.cell .media-mark { position:absolute; bottom:3px; right:5px; color:var(--muted); }
.cell .media-mark .ico { width:11px; height:11px; }
.cell .dots { display:flex; gap:3px; }
.cell .dots i { width:4px; height:4px; border-radius:50%; background:var(--tag-dot); }

/* ---------- 信息卡面板（右侧） ---------- */
.info-panel {
  background:var(--card); border:var(--card-border); border-radius:var(--radius-md);
  padding:16px; box-shadow:var(--shadow);
  display:flex; flex-direction:column;
  max-height:calc(100vh - 140px);
  position:sticky; top:16px;
  min-height:420px;
}
.info-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding-bottom:12px; border-bottom:1.5px dashed var(--btn-border); }
.info-title { font-size:16px; font-weight:800; color:var(--brand); }
.info-sub { font-size:12px; color:var(--muted); margin-top:3px; }
.info-badge { font-size:11px; font-weight:800; color:#fff; background:var(--accent); border-radius:10px; padding:3px 9px; white-space:nowrap; }
.info-body { margin-top:12px; flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding-right:2px; }
.info-empty { text-align:center; color:var(--muted); font-size:13px; padding:30px 10px; line-height:2; }
.info-empty .empty-icon { color:var(--accent); display:flex; justify-content:center; margin-bottom:6px; }

/* 信息卡（点击 = 查看） */
.info-card {
  border-radius:var(--radius-sm); padding:12px; background:var(--ev-bg); border:var(--ev-border);
  box-shadow:var(--shadow-sm); cursor:pointer; position:relative;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.info-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.info-card.active { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.info-card-top { display:flex; align-items:center; gap:9px; }
.ic-ico { width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ic-ico .ico { width:19px; height:19px; }
.ic-title { font-size:14px; font-weight:800; flex:1; word-break:break-all; }
.ic-kind { font-size:10px; color:#fff; border-radius:10px; padding:2px 8px; flex-shrink:0; }
.ic-kind.record { background:var(--muted); }
.ic-meta { margin-top:7px; font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:3px; }
.ic-meta .row { display:flex; align-items:center; gap:5px; }
.ic-meta .ico { width:13px; height:13px; color:var(--accent); }
.ic-note { margin-top:6px; font-size:13px; line-height:1.7; color:var(--text); white-space:pre-wrap; word-break:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ic-media-mark { margin-top:6px; display:flex; gap:6px; color:var(--muted); font-size:11px; align-items:center; }
.ic-media-mark .ico { width:13px; height:13px; }
/* 信息卡内照片缩略（HNB 2.1：点击卡片查看大图） */
.ic-media { margin-top:8px; }
.ic-imgs { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.ic-imgs.single { grid-template-columns:1fr; }
.ic-imgs img { width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:10px; border:1px solid var(--card-border); display:block; }
.ic-vid-mark, .ic-more { margin-top:6px; display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); background:var(--soft); border:1px solid var(--btn-border); border-radius:10px; padding:3px 9px; }
.ic-vid-mark .ico, .ic-more .ico { width:13px; height:13px; color:var(--accent); }
.ic-by { margin-top:8px; font-size:11px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.ic-by .u-avatar { width:18px; height:18px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; }

/* 信息卡操作按钮（新增/删除） */
.info-actions { margin-top:12px; display:flex; gap:10px; }
.info-actions .btn-primary, .info-actions .btn-danger { flex:1; padding:11px 0; }

/* ---------- 底部统计面板 ---------- */
.stats-panel {
  margin-top:16px;
  background:var(--card); border:var(--card-border); border-radius:var(--radius-md);
  padding:16px; box-shadow:var(--shadow);
}
.stats-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.stats-title { font-size:14px; font-weight:800; color:var(--brand); display:flex; align-items:center; gap:7px; }
.stats-title .ico { color:var(--accent); }
.stats-total { font-size:12px; color:var(--muted); font-weight:700; }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(132px, 1fr)); gap:10px; }
.stat-item {
  display:flex; align-items:center; gap:10px; padding:10px 12px;
  border-radius:14px; background:var(--ev-bg); border:var(--ev-border);
}
.stat-item .st-ico { width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.stat-item .st-ico .ico { width:17px; height:17px; }
.stat-item .st-info { min-width:0; }
.stat-item .st-name { font-size:12px; color:var(--muted); font-weight:600; }
.stat-item .st-count { font-size:15px; font-weight:800; color:var(--text); }
.stat-empty { text-align:center; color:var(--muted); font-size:13px; padding:16px; }

/* ---------- 查看弹窗 ---------- */
.view-card { max-width:560px; }
.view-body { display:flex; flex-direction:column; gap:12px; }
.view-flag { display:flex; align-items:center; gap:10px; }
.view-flag .vf-ico { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.view-flag .vf-ico .ico { width:24px; height:24px; }
.view-flag .vf-title { font-size:18px; font-weight:800; word-break:break-all; }
.view-flag .vf-kind { font-size:11px; color:#fff; border-radius:10px; padding:2px 9px; }
.view-flag .vf-kind.record { background:var(--muted); }
.view-meta { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:13px; color:var(--muted); }
.view-meta .row { display:flex; align-items:center; gap:6px; }
.view-meta .ico { width:14px; height:14px; color:var(--accent); }
.view-note { font-size:14px; line-height:1.9; color:var(--text); white-space:pre-wrap; word-break:break-word; }
.view-media { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.view-media img, .view-media video { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; cursor:pointer; border:1px solid var(--card-border); transition:transform .18s ease; }
.view-media img:hover { transform:scale(1.02); }
.view-media video { aspect-ratio:auto; max-height:260px; cursor:default; }
.view-media .one { grid-column:span 2; aspect-ratio:auto; max-height:62vh; object-fit:contain; background:var(--soft); }
.view-by { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:5px; }
.view-by .u-avatar { width:18px; height:18px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; }

/* ---------- 事件评论（HNB 2.1） ---------- */
.ic-comments { display:inline-flex; align-items:center; gap:4px; margin-left:auto; color:var(--muted); font-size:11px; background:var(--soft); border:1px solid var(--btn-border); border-radius:10px; padding:2px 8px; }
.ic-comments .ico { width:12px; height:12px; color:var(--accent); }
.view-comments { margin-top:14px; border-top:1.5px dashed color-mix(in srgb, var(--muted) 30%, transparent); padding-top:12px; }
.comments-head { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:800; color:var(--text); }
.comments-head .ico { width:14px; height:14px; color:var(--accent); }
.comments-count { background:var(--soft); border:1px solid var(--btn-border); border-radius:10px; font-size:11px; padding:1px 8px; color:var(--muted); }
.comments-list { display:flex; flex-direction:column; gap:10px; margin-top:10px; max-height:220px; overflow-y:auto; }
.comment-item { display:flex; gap:8px; }
.c-avatar { flex-shrink:0; }
.c-avatar .u-avatar { width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; }
.c-body { flex:1; min-width:0; background:var(--soft); border:1px solid var(--btn-border); border-radius:12px; padding:7px 11px; }
.c-head { display:flex; align-items:center; gap:8px; }
.c-name { font-size:11.5px; font-weight:800; color:var(--brand); }
.c-time { font-size:10px; color:var(--muted); }
.c-text { font-size:13px; line-height:1.6; margin-top:3px; word-break:break-word; white-space:pre-wrap; color:var(--text); }
.c-del { flex-shrink:0; width:22px; height:22px; border-radius:50%; border:none; background:transparent; color:var(--muted); cursor:pointer; opacity:0; transition:opacity .15s ease, background .15s ease; display:flex; align-items:center; justify-content:center; }
.comment-item:hover .c-del { opacity:1; }
.c-del:hover { background:color-mix(in srgb, var(--danger) 15%, transparent); color:var(--danger); }
.c-del .ico { width:12px; height:12px; }
.c-empty { text-align:center; color:var(--muted); font-size:12px; padding:12px 0 4px; }
.comments-input { display:flex; gap:8px; margin-top:10px; }
.comments-input input { flex:1; }
.comments-input .btn-primary { white-space:nowrap; }
.comments-input .btn-primary .ico { width:13px; height:13px; }

/* 正文字体类 */
.f-kai { font-family:"KaiTi","STKaiti","楷体",serif; }
.f-hand { font-family:"LXGW WenKai","STXingkai","华文行楷","Kaiti SC","楷体",cursive; }
.f-song { font-family:"SimSun","宋体",serif; }
.f-hei { font-family:"SimHei","黑体","Microsoft YaHei",sans-serif; }

/* ---------- 模态 ---------- */
.modal {
  position:fixed; inset:0; z-index:100;
  background:rgba(20,20,35,.45); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:18px;
  animation:fadeIn .25s ease;
}
.modal-card {
  background:var(--card); border:var(--card-border); border-radius:22px;
  width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  box-shadow:var(--shadow); padding:20px; animation:popIn .3s ease;
}
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modal-head h3 { font-size:17px; color:var(--brand); display:flex; align-items:center; gap:7px; }
.modal-head h3 .ico { color:var(--accent); }
.modal-foot { margin-top:16px; display:flex; align-items:center; gap:10px; }
.hint { font-size:11.5px; color:var(--muted); line-height:1.7; }
.hint-inline { font-size:11px; color:var(--muted); font-weight:400; }

/* 表单 */
.form-row { margin-bottom:14px; }
.form-row label { display:block; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:6px; }
.pin-check { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text); cursor:pointer; }
.pin-check input { width:auto; }
.pin-check .ico { color:var(--danger); }

/* 类型选择 */
.type-pick { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.type-item {
  display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 4px;
  border-radius:12px; border:1.5px solid var(--btn-border); background:var(--soft);
  cursor:pointer; transition:transform .15s ease, border-color .15s ease;
  font-size:11px; font-weight:700; color:var(--text);
}
.type-item:hover { transform:translateY(-2px); }
.type-item.sel { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.type-item .ti-ico { width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; }
.type-item .ti-ico .ico { width:17px; height:17px; }

/* 媒体上传 */
.media-drop { border:2px dashed color-mix(in srgb, var(--muted) 55%, transparent); border-radius:14px; padding:12px; background:var(--soft); }
.drop-hint { text-align:center; font-size:12.5px; color:var(--muted); padding:10px 0 4px; display:flex; align-items:center; justify-content:center; gap:6px; }
.media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.media-item { position:relative; border-radius:12px; overflow:hidden; border:1px solid var(--card-border); background:var(--ev-bg); }
.media-item img, .media-item video { width:100%; height:86px; object-fit:cover; display:block; }
.media-item .m-del {
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%;
  background:rgba(0,0,0,.55); color:#fff; border:none; font-size:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
/* 待上传文件：本地即时预览（HNB 2.1） */
.media-item.preview { display:flex; flex-direction:column; }
.media-item.preview img, .media-item.preview .m-video-thumb { height:96px; width:100%; }
.media-item.preview .m-video-thumb { display:flex; align-items:center; justify-content:center; color:var(--muted); background:var(--soft); }
.media-item.preview .m-pinfo { padding:6px 8px 8px; min-width:0; }
.media-item.preview .m-name { font-size:11px; font-weight:700; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.media-item.preview .m-size { font-size:10px; color:var(--muted); margin-top:2px; }
.media-item .m-uploading { position:absolute; inset:0; background:rgba(0,0,0,.4); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; }

/* 皮肤面板 */
.theme-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.theme-item {
  border-radius:16px; padding:12px; cursor:pointer; border:2px solid transparent;
  background:var(--soft); transition:transform .18s ease, border-color .18s ease; text-align:center;
}
.theme-item:hover { transform:translateY(-3px); }
.theme-item.sel { border-color:var(--accent); }
.theme-item .t-prev { height:64px; border-radius:12px; margin-bottom:8px; border:1px solid rgba(255,255,255,.35); box-shadow:var(--shadow-sm); }
.theme-item .t-name { font-size:12.5px; font-weight:800; color:var(--text); }
.theme-item .t-tag { font-size:10.5px; color:var(--muted); margin-top:2px; }

/* 设置面板 */
.avatar-pick { display:flex; gap:8px; flex-wrap:wrap; }
.avatar-pick span {
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:var(--soft); border:1.5px solid var(--btn-border); cursor:pointer;
  transition:transform .15s ease, border-color .15s ease; color:var(--brand);
}
.avatar-pick span .ico { width:22px; height:22px; }
.avatar-pick span:hover { transform:scale(1.1); }
.avatar-pick span.sel { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.pwd-edit { display:flex; gap:8px; }
.pwd-edit input { flex:1; }
.switch { position:relative; display:inline-block; width:48px; height:26px; cursor:pointer; }
.switch input { opacity:0; width:0; height:0; }
.switch .slider { position:absolute; inset:0; background:var(--soft); border:1.5px solid var(--btn-border); border-radius:26px; transition:.25s; }
.switch .slider::before { content:""; position:absolute; width:18px; height:18px; border-radius:50%; left:3px; top:2.5px; background:#fff; box-shadow:var(--shadow-sm); transition:.25s; }
.switch input:checked + .slider { background:var(--accent); border-color:var(--accent); }
.switch input:checked + .slider::before { transform:translateX(21px); }

/* ---------- 灯箱 ---------- */
.lightbox { position:fixed; inset:0; z-index:200; background:rgba(10,10,20,.88); display:flex; align-items:center; justify-content:center; padding:20px; animation:fadeIn .25s ease; }
.lightbox img, .lightbox video { max-width:94vw; max-height:88vh; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5); animation:popIn .3s ease; }
.lightbox .lb-close { position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.lb-prev { left:16px; } .lb-next { right:16px; }

/* ---------- Toast ---------- */
.toast {
  position:fixed; left:50%; bottom:80px; transform:translateX(-50%);
  background:var(--card); border:var(--card-border); color:var(--text);
  padding:11px 22px; border-radius:40px; font-size:13px; font-weight:700;
  box-shadow:var(--shadow); z-index:300; animation:toastIn .3s ease;
}

/* ---------- 动效 ---------- */
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes fadeUp { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }
@keyframes slideDown { from{opacity:0; transform:translateY(-14px);} to{opacity:1; transform:none;} }
@keyframes slideUp { from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;} }
@keyframes popIn { 0%{opacity:0; transform:scale(.92) translateY(8px);} 100%{opacity:1; transform:none;} }
@keyframes bounceIn { 0%{transform:scale(.6);} 60%{transform:scale(1.1);} 100%{transform:scale(1);} }
@keyframes toastIn { from{opacity:0; transform:translate(-50%,10px);} to{opacity:1; transform:translate(-50%,0);} }

/* =========================================================
   HNB 2.3 · 信息卡（事件查看弹窗）抽卡动效
   仅作用于 #view-modal .view-card：卡片从下方抽出 + 一次光泽扫过
   扫光为一次性动画（默认 opacity:0 / 光带移出卡外），结束后自动隐藏，
   卡片上不留高光；其余弹窗、粒子、背景 SVG 动效均不受影响
========================================================= */
.modal { perspective:1400px; }
.modal .view-card {
  position:relative;
  transform-origin:50% 100%;
  animation:viewDraw .62s cubic-bezier(.2,.85,.25,1);
}
.modal .view-card::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.8) 50%, transparent 68%);
  background-size:250% 250%; background-position:135% 135%; opacity:0;
  mix-blend-mode:screen;
  animation:viewShine 1.05s ease .38s 1;
}
@keyframes viewDraw {
  0%   { opacity:0; transform:translateY(130%) scale(.88) rotateX(16deg); }
  100% { opacity:1; transform:translateY(0) scale(1) rotateX(0deg); }
}
@keyframes viewShine {
  0%   { background-position:135% 135%; opacity:0; }
  12%  { opacity:.9; }
  68%  { opacity:.55; }
  100% { background-position:-35% -35%; opacity:0; }
}

/* 减少动效 */
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation:none !important;
  transition:none !important;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--muted) 45%, transparent); border-radius:8px; }
::-webkit-scrollbar-track { background:transparent; }

/* =========================================================
   响应式：平板 / 手机
========================================================= */
@media (max-width: 980px) {
  .layout { grid-template-columns:minmax(0,1fr) 310px; }
}

@media (max-width: 768px) {
  #app-view { padding:10px 12px 90px; }
  .topbar { flex-wrap:wrap; gap:8px; padding:10px 12px; }
  .brand-name { display:none; }
  .brand { font-size:16px; }
  .top-actions .icon-btn { min-width:34px; height:34px; padding:0 8px; }
  .user-chip { display:none; }

  /* 移动端主题装饰缩小 */
  .deco-tree { width:230px; left:-34px; bottom:-58px; }
  .deco-birds { width:300px; top:26%; }
  .deco-shooting { left:70%; width:110px; }

  /* 左右布局 → 上下：日历在上，信息卡变为底部抽屉 */
  .layout { display:block; }
  .cal-panel { padding:10px; }
  .cal-grid { gap:4px; }
  .cell { min-height:58px; padding:3px 2px 2px; border-radius:10px; }
  .cell .num { width:22px; height:22px; font-size:12px; }
  .cell .tg { width:20px; height:20px; border-radius:7px; }
  .cell .tg .ico { width:12px; height:12px; }
  .cell .holiday { font-size:8px; }
  .cell .dots i { width:3px; height:3px; }

  .info-panel {
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:80;
    width:100%; max-height:72vh; min-height:0; border-radius:22px 22px 0 0;
    transform:translateY(105%); transition:transform .35s cubic-bezier(.2,.8,.25,1);
    box-shadow:0 -12px 40px rgba(0,0,0,.25); margin:0;
  }
  .info-panel.open { transform:translateY(0); }
  .drawer-mask { position:fixed; inset:0; background:rgba(15,15,30,.4); z-index:75; animation:fadeIn .25s ease; }

  .stats-grid { grid-template-columns:repeat(auto-fill, minmax(108px, 1fr)); }
  .login-card { padding:28px 20px; border-radius:24px; }
  .type-pick { grid-template-columns:repeat(4,1fr); }
  .theme-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 420px) {
  .type-pick { grid-template-columns:repeat(3,1fr); }
  .nav .month-label { min-width:96px; font-size:14px; }
}

/* =========================================================
   HNB 2.1：电脑端整体放大约 150%（仅 ≥981px 生效；平板/手机不变）
========================================================= */
@media (min-width: 981px) {
  body { font-size:15px; }

  /* 容器与主布局 */
  #app-view { max-width:1860px; padding:22px 28px 60px; }
  .layout { grid-template-columns:minmax(0,1fr) 520px; gap:24px; }

  /* 顶部栏 */
  .topbar { padding:14px 22px; border-radius:26px; margin-bottom:16px; }
  .brand { font-size:23px; gap:10px; }
  .brand-tag { font-size:11px; padding:3px 8px; }
  .nav { gap:10px; }
  .month-label { font-size:20px; min-width:160px; }
  .icon-btn { min-width:46px; height:46px; font-size:17px; border-radius:14px; padding:0 14px; }
  .pill-btn { padding:10px 24px; font-size:15px; }
  .user-chip { padding:7px 18px 7px 10px; font-size:14px; }
  .user-chip .u-avatar { width:30px; height:30px; }

  /* 日历 */
  .cal-panel { padding:20px; border-radius:26px; }
  .cal-dow { gap:8px; margin-bottom:8px; }
  .cal-dow span { font-size:15px; padding:6px 0; }
  .cal-grid { gap:8px; }
  .cell { min-height:112px; padding:8px 6px 6px; gap:3px; border-radius:16px; }
  .cell .num { width:32px; height:32px; font-size:16px; }
  .cell .holiday { font-size:11px; }
  .cell .lunar { font-size:10.5px; }
  .cell .tg { width:30px; height:30px; border-radius:10px; }
  .cell .tg .ico { width:17px; height:17px; }
  .cell .dots i { width:5px; height:5px; }

  /* 信息卡面板 */
  .info-panel { padding:20px; max-height:calc(100vh - 180px); min-height:540px; border-radius:26px; }
  .info-title { font-size:21px; }
  .info-sub { font-size:13px; margin-top:4px; }
  .info-badge { font-size:13px; padding:4px 12px; }
  .info-card { padding:16px; border-radius:16px; }
  .ic-ico { width:46px; height:46px; border-radius:14px; }
  .ic-ico .ico { width:23px; height:23px; }
  .ic-title { font-size:18px; }
  .ic-kind { font-size:12px; padding:3px 10px; }
  .ic-meta { font-size:14px; gap:4px; }
  .ic-meta .ico { width:15px; height:15px; }
  .ic-note { font-size:15px; }
  .ic-by { font-size:12px; }
  .ic-imgs { gap:8px; }
  .ic-imgs img { border-radius:12px; }
  .info-actions { margin-top:16px; gap:12px; }
  .info-actions .btn-primary, .info-actions .btn-danger { padding:14px 0; font-size:16px; }

  /* 底部统计 */
  .stats-panel { margin-top:20px; padding:20px; border-radius:26px; }
  .stats-title { font-size:16px; }
  .stats-total { font-size:13px; }
  .stats-grid { grid-template-columns:repeat(auto-fill, minmax(178px, 1fr)); gap:12px; }
  .stat-item { padding:14px 16px; border-radius:16px; gap:12px; }
  .stat-item .st-ico { width:42px; height:42px; border-radius:12px; }
  .stat-item .st-ico .ico { width:21px; height:21px; }
  .stat-item .st-name { font-size:14px; }
  .stat-item .st-count { font-size:19px; }

  /* 登录页 */
  .login-card { max-width:540px; padding:46px 44px; border-radius:32px; }
  .login-brand { font-size:36px; gap:12px; }
  .login-sub { font-size:15px; }
  .login-user { padding:22px 12px; border-radius:24px; }
  .login-user .u-acc { font-size:17px; }
  .login-user .u-name { font-size:14px; }
  .login-pwd input { font-size:16px; padding:12px 16px; }
  .login-pwd .btn-primary { padding:13px 26px; font-size:16px; }
  .login-tip { font-size:13px; }

  /* 模态与表单 */
  .modal-card { max-width:680px; padding:28px; border-radius:28px; }
  .modal-head h3 { font-size:20px; }
  .form-row label { font-size:14px; margin-bottom:8px; }
  input, select, textarea { font-size:16px; padding:11px 15px; border-radius:14px; }
  .type-pick { grid-template-columns:repeat(5,1fr); gap:10px; }
  .type-item { padding:14px 6px; font-size:13px; border-radius:14px; }
  .type-item .ti-ico { width:36px; height:36px; border-radius:11px; }
  .type-item .ti-ico .ico { width:20px; height:20px; }
  .media-grid { gap:10px; }
  .avatar-pick span { width:48px; height:48px; border-radius:14px; }
  .avatar-pick span .ico { width:26px; height:26px; }
  .theme-grid { grid-template-columns:repeat(3,1fr); gap:14px; }
  .theme-item .t-prev { height:84px; }
  .theme-item .t-name { font-size:14px; }
  .theme-item .t-tag { font-size:12px; }

  /* 查看弹窗 */
  .view-card { max-width:840px; }
  .view-flag .vf-ico { width:56px; height:56px; border-radius:16px; }
  .view-flag .vf-ico .ico { width:28px; height:28px; }
  .view-flag .vf-title { font-size:22px; }
  .view-flag .vf-kind { font-size:12px; padding:3px 11px; }
  .view-meta { font-size:15px; gap:8px 22px; }
  .view-note { font-size:16px; }
  .view-media { gap:12px; }
  .view-by { font-size:12px; }
  .comments-head { font-size:15px; }
  .comments-list { gap:12px; max-height:260px; }
  .c-avatar .u-avatar { width:30px; height:30px; border-radius:9px; }
  .c-body { padding:9px 13px; }
  .c-name { font-size:13px; }
  .c-time { font-size:11px; }
  .c-text { font-size:15px; }
  .comments-input { margin-top:12px; }

  /* 其它 */
  .pin-banner { padding:13px 18px; font-size:15px; border-radius:18px; }
  .toast { font-size:15px; padding:13px 26px; }
  .hint { font-size:12.5px; }
}

/* =========================================================
   HNB 2.2 · 皮肤 H~M 深色适配
   （按钮/徽标/今天日期 → 金色或浅色渐变 + 深色文字，保证对比度）
========================================================= */
body[data-theme="h"] .btn-primary:not(.ghost),
body[data-theme="h"] .pill-btn:not(.ghost),
body[data-theme="h"] .info-badge,
body[data-theme="h"] .brand-tag,
body[data-theme="h"] .cell.today .num,
body[data-theme="i"] .btn-primary:not(.ghost),
body[data-theme="i"] .pill-btn:not(.ghost),
body[data-theme="i"] .info-badge,
body[data-theme="i"] .brand-tag,
body[data-theme="i"] .cell.today .num,
body[data-theme="j"] .btn-primary:not(.ghost),
body[data-theme="j"] .pill-btn:not(.ghost),
body[data-theme="j"] .info-badge,
body[data-theme="j"] .brand-tag,
body[data-theme="j"] .cell.today .num,
body[data-theme="k"] .btn-primary:not(.ghost),
body[data-theme="k"] .pill-btn:not(.ghost),
body[data-theme="k"] .info-badge,
body[data-theme="k"] .brand-tag,
body[data-theme="k"] .cell.today .num,
body[data-theme="l"] .btn-primary:not(.ghost),
body[data-theme="l"] .pill-btn:not(.ghost),
body[data-theme="l"] .info-badge,
body[data-theme="l"] .brand-tag,
body[data-theme="l"] .cell.today .num,
body[data-theme="m"] .btn-primary:not(.ghost),
body[data-theme="m"] .pill-btn:not(.ghost),
body[data-theme="m"] .info-badge,
body[data-theme="m"] .brand-tag,
body[data-theme="m"] .cell.today .num {
  background:linear-gradient(135deg, var(--btn-grad-a), var(--btn-grad-b));
  color:var(--btn-fg);
}

/* =========================================================
   HNB 2.2 · 皮肤 H~M 限定装饰（纯 CSS，无 emoji/字符）
   结构：index.html #theme-deco 内元素，按 data-theme 显隐
========================================================= */
.deco-bokeh, .deco-bauble, .deco-lant, .deco-moon, .deco-sky, .deco-mist,
.deco-snow, .deco-leaf, .deco-osman, .deco-petal, .deco-foil, .deco-gstar, .deco-ice {
  display:none; position:absolute; pointer-events:none;
}
.deco-bokeh { border-radius:50%; filter:blur(8px); animation:bokehPulse 7s ease-in-out infinite; }
.deco-bauble {
  width:24px; height:24px; border-radius:50%; top:4px; transform-origin:top center;
  animation:baubleSwing 5.5s ease-in-out infinite;
  background:radial-gradient(circle at 32% 30%, #f4e3ae, #c9a24b 58%, #7d5f1d);
  box-shadow:0 6px 14px rgba(0,0,0,.5), inset 0 -4px 6px rgba(0,0,0,.28);
}
.deco-bauble::before { content:""; position:absolute; top:-10px; left:50%; width:1.5px; height:10px; margin-left:-.75px; background:linear-gradient(180deg,rgba(232,200,122,0),rgba(232,200,122,.75)); }
.deco-bauble::after { content:""; position:absolute; top:-11px; left:50%; transform:translateX(-50%); width:9px; height:5px; border-radius:3px 3px 2px 2px; background:linear-gradient(180deg,#e8c87a,#a8842f); }
.deco-bauble.red { background:radial-gradient(circle at 32% 30%, #e59299, #8e2f3c 62%, #521820); }
.deco-lant { top:2px; transform-origin:top center; animation:lanternSwing 6s ease-in-out infinite; }
.deco-lant .rope { position:absolute; top:0; left:0; transform:translateX(-50%); width:1.5px; height:15px; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.7)); }
.deco-lant .cap { position:absolute; top:14px; left:0; transform:translateX(-50%); width:13px; height:5px; border-radius:3px 3px 2px 2px; background:#c9a24b; }
.deco-lant .body { position:absolute; top:18px; left:0; transform:translateX(-50%); width:28px; height:32px; border-radius:50%; background:#c8322e; box-shadow:0 0 22px rgba(0,0,0,.4); }
.deco-lant .body::after { content:""; position:absolute; top:2px; bottom:2px; left:7px; right:7px; border-radius:50%; border-left:1px solid rgba(255,226,190,.32); border-right:1px solid rgba(255,226,190,.32); }
.deco-lant .tassel { position:absolute; top:50px; left:0; transform:translateX(-50%); width:2px; height:13px; background:linear-gradient(180deg,#e9c87c,rgba(233,200,124,.06)); }
.deco-moon {
  border-radius:50%; animation:moonGlow 8s ease-in-out infinite;
  background:radial-gradient(circle at 36% 32%, #fffdf3, #f2e8cd 58%, #cdc2a0);
  box-shadow:0 0 44px 12px rgba(255,240,205,.26), 0 0 92px 42px rgba(242,162,74,.08);
}
.deco-sky {
  bottom:-32px; width:14px; height:18px; border-radius:50% 50% 46% 46%;
  background:linear-gradient(180deg,#ffd79a,#f2a24a 55%,#cf6f2c);
  box-shadow:0 0 20px rgba(242,162,74,.6), inset 0 -4px 6px rgba(105,42,6,.4);
  animation:skyRise linear infinite;
}
.deco-sky::after { content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:2px; background:#ffcf7a; box-shadow:0 0 8px #ffb95e; }
.deco-mist {
  height:16px; border-radius:50%; filter:blur(13px); opacity:.30;
  background:linear-gradient(90deg, rgba(226,240,255,0), rgba(226,240,255,.85), rgba(226,240,255,0));
  animation:mistDrift linear infinite;
}
.deco-snow { top:-12px; border-radius:50%; background:#fff; animation:snowfall linear infinite; }
.deco-snow.lg { width:7px; height:7px; }
.deco-snow.md { width:5px; height:5px; }
.deco-snow.sm { width:3px; height:3px; }
.deco-leaf {
  top:-18px; width:15px; height:15px; border-radius:0 92% 0 92%;
  background:linear-gradient(135deg,#f0b552,#c9601f 62%,#8d3a13);
  box-shadow:0 2px 7px rgba(0,0,0,.28); animation:leafFall linear infinite;
}
.deco-leaf::after { content:""; position:absolute; top:2px; left:2px; width:11px; height:11px; border-top:1px solid rgba(255,232,196,.5); border-radius:0 92% 0 92%; }
.deco-leaf.b2 { background:linear-gradient(135deg,#e8a33c,#a8481a 60%,#6d2f10); }
.deco-leaf.b3 { background:linear-gradient(135deg,#d9d2a0,#b8873a 58%,#7a5320); width:12px; height:12px; }
.deco-osman {
  top:-14px; width:8px; height:8px; border-radius:50% 50% 50% 0;
  background:radial-gradient(circle at 34% 30%, #fff3c4, #e5c76b 55%, #b58a2e);
  box-shadow:0 0 7px rgba(229,199,107,.55); animation:osmanFall linear infinite;
}
.deco-petal {
  top:-14px; width:9px; height:9px; border-radius:50% 50% 50% 0;
  background:radial-gradient(circle at 32% 30%, #ffe6cf, #e0796b 58%, #ab3f3a);
  animation:petalFall linear infinite;
}
.deco-foil {
  top:-12px; width:5px; height:5px; border-radius:1px;
  background:linear-gradient(135deg,#f8e7b4,#c9a24b); animation:foilFall linear infinite;
}
/* 星光/冰晶：clip-path 四角星（替代 ✦/❆ 字符，保持 emoji-free） */
.deco-gstar, .deco-ice {
  background:#e8c87a; clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  animation:twinkle 3.2s ease-in-out infinite;
}
.deco-ice { background:#dcecfa; animation-duration:5s; }

/* —— 各皮肤显隐与配色 —— */
body[data-theme="h"] .deco-bokeh,
body[data-theme="h"] .deco-bauble,
body[data-theme="h"] .deco-gstar,
body[data-theme="h"] .deco-snow { display:block; }
body[data-theme="h"] .deco-bokeh { background:radial-gradient(circle, rgba(232,200,122,.5), rgba(232,200,122,0) 70%); }
body[data-theme="h"] .deco-gstar { filter:drop-shadow(0 0 6px rgba(232,200,122,.9)); }

body[data-theme="i"] .deco-bokeh,
body[data-theme="i"] .deco-lant,
body[data-theme="i"] .deco-gstar,
body[data-theme="i"] .deco-petal,
body[data-theme="i"] .deco-foil { display:block; }
body[data-theme="i"] .deco-bokeh { background:radial-gradient(circle, rgba(233,200,124,.45), rgba(233,200,124,0) 70%); }
body[data-theme="i"] .deco-lant .body { background:radial-gradient(circle at 34% 30%, #ff9a84, #c8322e 55%, #74181a); box-shadow:0 0 26px rgba(200,50,46,.5), inset 0 -6px 8px rgba(0,0,0,.32); }
body[data-theme="i"] .deco-lant .cap { background:linear-gradient(180deg,#f2d79a,#b8913f); }
body[data-theme="i"] .deco-lant .rope { background:linear-gradient(180deg,rgba(233,200,124,.10),rgba(233,200,124,.85)); }
body[data-theme="i"] .deco-lant .tassel { background:linear-gradient(180deg,#e9c87c,rgba(233,200,124,.08)); }
body[data-theme="i"] .deco-gstar { filter:drop-shadow(0 0 6px rgba(233,200,124,.9)); }

body[data-theme="j"] .deco-moon,
body[data-theme="j"] .deco-bokeh,
body[data-theme="j"] .deco-lant,
body[data-theme="j"] .deco-sky,
body[data-theme="j"] .deco-gstar { display:block; }
body[data-theme="j"] .deco-bokeh { background:radial-gradient(circle, rgba(242,162,74,.42), rgba(242,162,74,0) 70%); }
body[data-theme="j"] .deco-lant .body { background:radial-gradient(circle at 34% 30%, #ffe3ae, #f2a24a 52%, #ad5220); box-shadow:0 0 26px rgba(242,162,74,.5), inset 0 -6px 8px rgba(68,27,4,.35); }
body[data-theme="j"] .deco-lant .cap { background:linear-gradient(180deg,#ffe0a8,#c98a34); }
body[data-theme="j"] .deco-lant .rope { background:linear-gradient(180deg,rgba(245,192,115,.10),rgba(245,192,115,.8)); }
body[data-theme="j"] .deco-lant .tassel { background:linear-gradient(180deg,#f5c073,rgba(245,192,115,.08)); }
body[data-theme="j"] .deco-gstar { filter:drop-shadow(0 0 6px rgba(245,192,115,.9)); }

body[data-theme="k"] .deco-moon,
body[data-theme="k"] .deco-bokeh,
body[data-theme="k"] .deco-mist,
body[data-theme="k"] .deco-gstar,
body[data-theme="k"] .deco-osman { display:block; }
body[data-theme="k"] .deco-bokeh { background:radial-gradient(circle, rgba(229,199,107,.34), rgba(229,199,107,0) 70%); filter:blur(9px); animation-duration:8s; }
body[data-theme="k"] .deco-moon { background:radial-gradient(circle at 38% 34%, #ffffff, #f3f8ff 52%, #d9e6f2); box-shadow:0 0 40px 10px rgba(226,240,255,.22), 0 0 96px 44px rgba(229,199,107,.09); animation-duration:9s; }
body[data-theme="k"] .deco-moon::after { content:""; position:absolute; inset:0; border-radius:50%; opacity:.5; background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.85) 6%, transparent 22%), radial-gradient(circle at 62% 58%, rgba(196,214,232,.34) 5%, transparent 18%), radial-gradient(circle at 46% 68%, rgba(196,214,232,.28) 4%, transparent 16%); }
body[data-theme="k"] .deco-gstar { filter:drop-shadow(0 0 6px rgba(240,226,180,.85)); }

body[data-theme="l"] .deco-bokeh,
body[data-theme="l"] .deco-mist,
body[data-theme="l"] .deco-gstar,
body[data-theme="l"] .deco-leaf { display:block; }
body[data-theme="l"] .deco-bokeh { background:radial-gradient(circle, rgba(240,200,148,.42), rgba(232,168,90,0) 70%); filter:blur(10px); animation-duration:8s; }
body[data-theme="l"] .deco-mist { background:linear-gradient(90deg, rgba(246,217,164,0), rgba(246,217,164,.8), rgba(246,217,164,0)); }
body[data-theme="l"] .deco-gstar { filter:drop-shadow(0 0 6px rgba(240,200,148,.85)); animation-duration:4s; }

body[data-theme="m"] .deco-bokeh,
body[data-theme="m"] .deco-mist,
body[data-theme="m"] .deco-ice,
body[data-theme="m"] .deco-snow { display:block; }
body[data-theme="m"] .deco-bokeh { background:radial-gradient(circle, rgba(196,220,240,.34), rgba(196,220,240,0) 70%); filter:blur(10px); animation-duration:9s; }
body[data-theme="m"] .deco-bokeh.warm { background:radial-gradient(circle, rgba(224,160,90,.4), rgba(224,160,90,0) 70%); animation-duration:11s; }
body[data-theme="m"] .deco-mist { background:linear-gradient(90deg, rgba(220,236,250,0), rgba(220,236,250,.85), rgba(220,236,250,0)); }
body[data-theme="m"] .deco-ice { filter:drop-shadow(0 0 6px rgba(196,220,240,.9)); }
body[data-theme="m"] .deco-snow { animation-name:snowfallSlow; }
body[data-theme="m"] .deco-snow.lg { width:8px; height:8px; opacity:.9; box-shadow:0 0 8px rgba(255,255,255,.55); }
body[data-theme="m"] .deco-snow.md { width:5px; height:5px; opacity:.72; }
body[data-theme="m"] .deco-snow.sm { width:3px; height:3px; opacity:.55; }

/* —— 装饰关键帧 —— */
@keyframes bokehPulse { 0%,100%{opacity:.35;} 50%{opacity:.75;} }
@keyframes lanternSwing { 0%,100%{ transform:rotate(3.5deg); } 50%{ transform:rotate(-3.5deg); } }
@keyframes baubleSwing { 0%,100%{ transform:rotate(4deg);} 50%{ transform:rotate(-4deg);} }
@keyframes moonGlow { 0%,100%{ opacity:.88; } 50%{ opacity:1; } }
@keyframes skyRise {
  0%   { transform:translate(0,0) scale(.8); opacity:0; }
  12%  { opacity:.95; } 85% { opacity:.65; }
  100% { transform:translate(40px,-720px) scale(1.2); opacity:0; }
}
@keyframes mistDrift {
  0%   { transform:translateX(-16%); opacity:.10; }
  45%  { opacity:.34; }
  100% { transform:translateX(116%); opacity:.10; }
}
@keyframes snowfall {
  0%   { transform:translate(0,-12px); opacity:0; }
  8%   { opacity:.9; }
  90%  { opacity:.5; }
  100% { transform:translate(34px,680px); opacity:0; }
}
@keyframes snowfallSlow {
  0%   { transform:translate(0,-12px); opacity:0; }
  8%   { opacity:.92; }
  50%  { transform:translate(-22px,338px); }
  90%  { opacity:.55; }
  100% { transform:translate(16px,690px); opacity:0; }
}
@keyframes leafFall {
  0%   { transform:translate(0,-18px) rotate(0deg) scale(.9); opacity:0; }
  9%   { opacity:.95; } 88% { opacity:.55; }
  100% { transform:translate(84px,690px) rotate(620deg) scale(1.05); opacity:0; }
}
@keyframes osmanFall {
  0%   { transform:translate(0,-14px) rotate(0deg); opacity:0; }
  10%  { opacity:.92; } 86% { opacity:.5; }
  100% { transform:translate(38px,690px) rotate(520deg); opacity:0; }
}
@keyframes petalFall {
  0%   { transform:translate(0,-14px) rotate(0deg); opacity:0; }
  10%  { opacity:.9; } 88% { opacity:.45; }
  100% { transform:translate(52px,690px) rotate(430deg); opacity:0; }
}
@keyframes foilFall {
  0%   { transform:translate(0,-12px) rotate(0deg) scale(.8); opacity:0; }
  12%  { opacity:.9; }
  100% { transform:translate(-30px,690px) rotate(320deg) scale(1.1); opacity:0; }
}

/* ---------- 登录页备案信息（HNB 2.4.3：桂ICP备2026020291号-1 + 公安备案预留位） ---------- */
.icp-line {
  position:fixed; left:0; right:0; bottom:14px; text-align:center;
  font-size:11px; color:var(--muted); letter-spacing:1px; z-index:1; pointer-events:none;
  opacity:.85;
}
/* 备案号链接：放开容器 pointer-events 使链接可点，低调继承 muted，hover 转 accent */
.icp-line a {
  pointer-events:auto;
  color:inherit; text-decoration:none; border-bottom:1px dotted transparent;
  transition:color .2s, border-bottom-color .2s;
}
.icp-line a:hover { color:var(--accent); border-bottom-color:var(--accent); }
/* 公安备案占位（取得公安备案号后仅替换文字即可上线） */
.icp-gongan { margin-left:14px; opacity:.75; }

/* =========================================================
   HNB 2.4 · 评论消息通知 + 天气 5 天预报卡
========================================================== */
/* 顶栏消息铃铛红点 */
.notify-wrap { position:relative; display:inline-flex; }
.notify-badge {
  position:absolute; top:-3px; right:-4px; z-index:3;
  min-width:17px; height:17px; padding:0 4px; border-radius:9px;
  background:var(--danger); color:#fff;
  font-size:10px; font-weight:800; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--card); pointer-events:none;
}
.notify-badge[hidden] { display:none; }

/* 日历格子右下角评论总数角标（当日全部事件评论合计，含已读） */
.cell .cm-badge {
  position:absolute; right:4px; bottom:2px; z-index:2;
  font-size:9px; font-weight:800; line-height:1; padding:2px 5px; border-radius:8px;
  background:color-mix(in srgb, var(--accent) 15%, transparent); color:var(--accent);
  pointer-events:none;
}
/* 与右下角媒体标记并存时左移避让（现代浏览器 :has） */
.cell:has(.media-mark) .cm-badge { right:20px; }

/* 消息通知面板 */
.notify-panel { max-width:430px; }
.notify-panel .notify-total { font-size:11.5px; color:var(--danger); font-weight:700; margin-left:4px; }
.notify-body { max-height:56vh; overflow-y:auto; margin:0 -6px; padding:0 6px; }
.notify-item {
  padding:10px 10px; border-radius:14px; cursor:pointer;
  transition:background .15s ease; border:1px solid transparent;
}
.notify-item:hover { background:var(--soft); }
.notify-item + .notify-item { margin-top:4px; }
.ni-line1 { display:flex; align-items:center; gap:8px; min-width:0; }
.ni-date { flex-shrink:0; font-size:11px; font-weight:700; color:var(--muted); background:var(--soft); padding:2px 7px; border-radius:8px; }
.ni-title { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:13.5px; font-weight:700; color:var(--text); }
.ni-count { flex-shrink:0; font-size:11px; font-weight:800; color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, transparent); padding:2px 8px; border-radius:9px; }
.ni-prev { display:flex; align-items:center; gap:5px; margin-top:5px; font-size:12px; color:var(--muted); min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ni-prev .ico { width:12px; height:12px; flex-shrink:0; color:var(--accent); }
.ni-prev b { color:var(--text); font-weight:700; }
.notify-empty { display:flex; flex-direction:column; align-items:center; gap:6px; padding:32px 0; color:var(--muted); font-size:13px; }
.notify-empty .ico { width:30px; height:30px; opacity:.4; }

/* 天气 5 天预报浮层（按钮下方小浮层，5 秒自动消失） */
.weather-pop {
  position:fixed; z-index:90; width:276px;
  background:var(--card); border:var(--card-border); border-radius:18px;
  box-shadow:var(--shadow); padding:12px 14px 8px;
  opacity:0; transform:translateY(-6px) scale(.98);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:auto;
}
.weather-pop.show { opacity:1; transform:none; }
.weather-pop[hidden] { display:none; }
.wp-title { font-size:13px; font-weight:800; color:var(--brand); margin-bottom:6px; }
.wp-row { display:flex; align-items:center; gap:8px; padding:6px 2px; font-size:12.5px; }
.wp-row + .wp-row { border-top:1px dashed var(--btn-border); }
.wp-day { width:36px; flex-shrink:0; font-weight:800; color:var(--text); }
.wp-date { font-size:11px; color:var(--muted); flex-shrink:0; width:36px; }
.wp-ico { width:22px; flex-shrink:0; display:flex; justify-content:center; color:var(--accent); }
.wp-ico .ico { width:16px; height:16px; }
.wp-desc { flex:1; min-width:0; color:var(--text); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wp-tmp { flex-shrink:0; font-weight:800; color:var(--text); }
.wp-err { display:flex; align-items:center; gap:6px; padding:8px 2px; font-size:12.5px; color:var(--muted); }
.wp-foot { text-align:center; font-size:10px; color:var(--muted); margin-top:6px; padding-top:2px; }