/* ============================================================
   鹅日历 · 插件页通用组件（在 style.css + rond.css 之后加载）
   供 plugin-*.html 复用
   ============================================================ */

.pl-page { padding-bottom: 34px; }

/* 分段切换用的面板 */
.pl-pane { display: block; }
.is-hidden { display: none !important; }

/* 插件页头：图标 + 名称 + 一句话定位 */
.pl-banner {
  position: relative; margin: 2px 16px 0; padding: 16px;
  border-radius: var(--radius-lg); background: var(--rnd-navy);
  color: #fff; overflow: hidden;
}
.pl-banner::after {
  content: ''; position: absolute; right: -54px; top: -62px; width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 68%, rgba(70,223,240,.9), rgba(233,12,89,.85) 54%, rgba(14,17,51,0) 76%);
}
.pl-banner > * { position: relative; z-index: 1; }
.pl-banner .pb-row { display: flex; align-items: center; gap: 12px; }
.pl-banner .pb-icon {
  width: 50px; height: 50px; border-radius: 15px;
  background: rgba(255,255,255,.17); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; font-size: 23px; flex-shrink: 0;
}
.pl-banner .pb-name { font-size: 18px; font-weight: 750; letter-spacing: -.35px; }
.pl-banner .pb-sub { font-size: 12px; color: rgba(255,255,255,.72); margin-top: 3px; }
.pl-banner .pb-desc { margin-top: 11px; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.8); }

/* 页面级数据条 */
.pl-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 12px 16px 0; }
.pl-stats .pl-stat {
  background: var(--bg-secondary); border-radius: 13px; padding: 11px 8px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.pl-stats .pl-stat .v { font-family: var(--font-en); font-size: 19px; font-weight: 750; letter-spacing: -.5px; color: var(--primary); }
.pl-stats .pl-stat .l { margin-top: 2px; font-size: 11px; color: var(--text-tertiary); }

/* 主操作条 */
.pl-cta { margin: 14px 16px 0; display: flex; gap: 9px; }

/* 空白卡片容器 */
.pl-card {
  background: var(--bg-secondary); border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm); margin: 0 16px; overflow: hidden;
}

/* 可勾选清单行 */
.pl-check {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 15px; min-height: 60px; position: relative;
  cursor: pointer; transition: background .15s; text-align: left; width: 100%;
}
.pl-check:active { background: rgba(0,0,0,.02); }
.pl-check + .pl-check::before {
  content: ''; position: absolute; left: 15px; right: 0; top: 0; height: .5px; background: var(--divider);
}
.pl-check .cb {
  width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0;
  border: 1.8px solid var(--divider-strong, #C9CDD9); display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: transparent; transition: all .18s;
}
.pl-check.on .cb { background: var(--primary); border-color: var(--primary); color: #fff; }
.pl-check .pc-main { flex: 1; min-width: 0; }
.pl-check .pc-t { font-size: 14px; font-weight: 600; letter-spacing: -.1px; }
.pl-check .pc-s { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }
.pl-check.on .pc-t { color: var(--text-primary); }

/* 开关行 */
.pl-switch {
  display: flex; align-items: center; gap: 12px; padding: 12px 15px; position: relative;
}
.pl-switch + .pl-switch::before {
  content: ''; position: absolute; left: 15px; right: 0; top: 0; height: .5px; background: var(--divider);
}
.pl-switch .ps-main { flex: 1; min-width: 0; }
.pl-switch .ps-t { font-size: 14px; font-weight: 600; }
.pl-switch .ps-s { font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

/* 标签组（多选） */
.pl-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 16px 0; }
.pl-tag {
  padding: 7px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--bg-secondary); color: var(--text-secondary);
  box-shadow: var(--shadow-sm); cursor: pointer; transition: all .18s;
  border: 1.4px solid transparent;
}
.pl-tag.on { background: var(--primary-10); color: var(--primary); border-color: var(--primary); }
.pl-tag:active { transform: scale(.96); }

/* 迷你图表 */
.pl-chart { padding: 14px 16px 16px; }
.pl-spark { display: flex; align-items: flex-end; gap: 5px; height: 74px; }
.pl-spark > i {
  flex: 1; border-radius: 4px 4px 2px 2px; background: var(--primary-15);
  position: relative; min-height: 6px;
}
.pl-spark > i.hi { background: var(--primary); }
.pl-spark-labels { display: flex; gap: 5px; margin-top: 7px; }
.pl-spark-labels > span { flex: 1; text-align: center; font-size: 10px; color: var(--text-tertiary); }

/* 横向条形对比 */
.pl-bars { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 16px; }

/* 时间轴（旅行/养娃用） */
.pl-tl { padding: 4px 16px 16px; }
.pl-tl-item { display: flex; gap: 12px; }
.pl-tl-item .rail { width: 14px; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.pl-tl-item .rail i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.pl-tl-item .rail b { flex: 1; width: 1.6px; background: var(--divider); margin: 3px 0; }
.pl-tl-item:last-child .rail b { display: none; }
.pl-tl-item .tl-body { flex: 1; padding-bottom: 14px; min-width: 0; }

/* 手账照片墙 */
.pl-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 2px 16px 16px; }
.pl-gallery i {
  aspect-ratio: 1; border-radius: 9px; display: block;
  background: linear-gradient(140deg, rgba(120,126,148,.16), rgba(120,126,148,.3));
  position: relative; overflow: hidden;
}
.pl-gallery i::after {
  content: attr(data-e); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; font-size: 19px; opacity: .55;
}

/* 步骤 / 引导列表 */
.pl-steps { padding: 6px 16px 16px; display: flex; flex-direction: column; gap: 11px; }
.pl-steps .st { display: flex; gap: 10px; align-items: flex-start; }
.pl-steps .st b {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary-10); color: var(--primary);
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800;
  margin-top: 1px;
}
.pl-steps .st span { font-size: 13px; line-height: 1.5; }
.pl-steps .st span em { display: block; font-style: normal; font-size: 11.5px; color: var(--text-tertiary); margin-top: 2px; }

/* 分段小控件 */
.pl-segrow { padding: 0 16px; }

/* 通用无边框列表行（复用 rond 行但去掉分隔偏移） */
.pl-list { padding: 0; }
.pl-cells { margin: 0 16px; }

/* 底部固定操作 */
.pl-footer {
  position: sticky; bottom: 0; z-index: 20;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(242,242,247,.98) 60%, rgba(242,242,247,0));
}