/* =============================================================================
 * cards.css —— 统一卡片外壳 / 拖拽缩放交互 / 各业务模块预览视图
 * 卡片统一 UI：简约圆角 + 柔和浅阴影 + 模块标题栏 + 内部预览视图
 * ========================================================================== */

/* ---------- 1. 卡片外壳 ---------- */
.card {
  position: absolute;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease),
              opacity .2s var(--ease);
}
.card:hover { border-color: var(--line-strong); }
.card.is-dragging,
.card.is-resizing {
  box-shadow: var(--shadow-2);
  border-color: var(--brand-line);
  z-index: 50 !important;
  user-select: none;
  transition: none;
}
.card.is-hidden { display: none; }

/* 标题栏（也是拖拽把手） */
.card__bar {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 8px 0 13px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  cursor: grab;
  flex: none;
}
.card.is-dragging .card__bar { cursor: grabbing; }
.card__icon { color: var(--brand); display: flex; }
.card__title { font-size: 13px; font-weight: 600; letter-spacing: .2px; }

/* 右上角小红点计数 */
.card__badge {
  min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--danger); color: #fff;
  font-size: 10.5px; font-weight: 600; line-height: 17px; text-align: center;
}
.card__badge[hidden] { display: none; }

.card__tools { margin-left: auto; display: flex; align-items: center; gap: 2px; opacity: 0;
               transition: opacity var(--dur) var(--ease); }
.card:hover .card__tools, .card:focus-within .card__tools { opacity: 1; }
.card__tool {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; border-radius: var(--radius-xs); background: transparent;
  color: var(--text-3); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.card__tool:hover { background: var(--surface-3); color: var(--text); }
.card__tool.is-spin svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 内容区（预览视图） */
.card__body { flex: 1; overflow: auto; padding: 10px 12px; }
.card__body--flush { padding: 0; }

/* 底部操作区：跳转完整业务页的入口 */
.card__foot {
  flex: none;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
}
.card__foot .spacer { margin-left: auto; }

/* ---------- 2. 8 方向缩放手柄 ---------- */
.rz { position: absolute; z-index: 5; }
.rz--n  { top: -3px;    left: 10px;  right: 10px; height: 7px;  cursor: ns-resize; }
.rz--s  { bottom: -3px; left: 10px;  right: 10px; height: 7px;  cursor: ns-resize; }
.rz--w  { left: -3px;   top: 10px;   bottom: 10px; width: 7px;  cursor: ew-resize; }
.rz--e  { right: -3px;  top: 10px;   bottom: 10px; width: 7px;  cursor: ew-resize; }
.rz--nw { top: -3px;    left: -3px;  width: 13px; height: 13px; cursor: nwse-resize; }
.rz--ne { top: -3px;    right: -3px; width: 13px; height: 13px; cursor: nesw-resize; }
.rz--sw { bottom: -3px; left: -3px;  width: 13px; height: 13px; cursor: nesw-resize; }
.rz--se { bottom: -3px; right: -3px; width: 13px; height: 13px; cursor: nwse-resize; }
/* 右下角显式的小三角提示 */
.rz--se::after {
  content: ""; position: absolute; right: 3px; bottom: 3px;
  width: 6px; height: 6px;
  border-right: 2px solid var(--line-strong);
  border-bottom: 2px solid var(--line-strong);
  border-radius: 1px;
  opacity: 0; transition: opacity var(--dur) var(--ease);
}
.card:hover .rz--se::after { opacity: 1; }

/* ---------- 3. 列表通用行 ---------- */
.row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 7px;
  border-radius: var(--radius-sm);
  transition: background var(--dur) var(--ease);
}
.row + .row { margin-top: 1px; }
.row:hover { background: var(--surface-2); }
.row__main { flex: 1; min-width: 0; }
.row__title { font-size: 13px; }
.row__sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.row__ops { display: flex; gap: 4px; opacity: 0; transition: opacity var(--dur) var(--ease); flex: none; }
.row:hover .row__ops, .row:focus-within .row__ops { opacity: 1; }
.row--done .row__title { color: var(--text-3); text-decoration: line-through; }

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-3); }
.dot--due { background: var(--danger); }
.dot--soon { background: var(--warn); }
.dot--ok { background: var(--ok); }

/* ---------- 逾期闪烁提醒（颜色变换 + 脉冲） ---------- */
.row.is-overdue { animation: blink-due 1.1s ease-in-out infinite; }
.row.is-overdue .row__title { color: var(--danger); font-weight: 600; }
.row.is-overdue .row__sub { color: var(--danger); }
.dot--due { animation: pulse-due 1.1s ease-in-out infinite; }

@keyframes blink-due {
  0%, 100% { background: transparent; box-shadow: inset 0 0 0 0 rgba(217, 83, 79, 0); }
  50%      { background: var(--danger-soft); box-shadow: inset 3px 0 0 0 var(--danger); }
}
@keyframes pulse-due {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(217, 83, 79, .55); }
  50%      { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(217, 83, 79, 0); }
}

/* 尊重「减弱动效」系统偏好：保留颜色提示，关闭闪烁 */
@media (prefers-reduced-motion: reduce) {
  .row.is-overdue, .dot--due { animation: none; }
  .row.is-overdue { background: var(--danger-soft); box-shadow: inset 3px 0 0 0 var(--danger); }
  .row.is-overdue .row__title { color: var(--danger); }
}

/* ---------- 4. 模块 1：提醒器 ---------- */
.rem-filter { display: flex; gap: 6px; margin-bottom: 6px; }
.chip {
  height: 23px; padding: 0 9px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: transparent;
  font-size: 11.5px; color: var(--text-2); cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.chip.is-active { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }

/* 提醒添加行：输入框 + 按钮水平排列 */
.rem-add-row { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.rem-add-row .input { flex: 1; }

/* ---------- 5. 模块 2：收藏夹 / 网站聚合 ---------- */
.fav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 6px;
}
.fav-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 11px 6px;
  border-radius: var(--radius-sm);
  text-align: center;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fav-item:hover { background: var(--surface-2); transform: translateY(-1px); }
.fav-item__icon {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2);
  font-size: 13px; font-weight: 600; overflow: hidden;
}
.fav-item__icon img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; display: block; }
.fav-item__initial {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  color: #fff; font-weight: 800; font-size: 15px;
}
.fav-item__name { font-size: 11.5px; color: var(--text-2); width: 100%; }

/* 收藏项外层容器：承载「取消收藏」悬浮按钮 */
.fav-item-wrap { position: relative; }
.fav-item-wrap .fav-item { display: flex; }
.fav-remove {
  position: absolute; top: 2px; right: 2px;
  width: 18px; height: 18px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--surface-3); color: var(--text-3);
  cursor: pointer; opacity: 0;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.fav-item-wrap:hover .fav-remove,
.fav-item-wrap:focus-within .fav-remove { opacity: 1; }
.fav-remove:hover { background: var(--danger); color: #fff; }
.fav-remove svg { width: 11px; height: 11px; }

/* ---------- 6. 模块 3：日历 ---------- */
/* 左右分栏布局：左栏时钟+天气 | 右栏日历网格 */
.cal-layout {
  display: flex; gap: 10px; height: 100%; min-height: 0;
}
.cal-sidebar {
  width: 132px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 6px;
  padding-right: 10px; border-right: 1px solid var(--line);
}
.cal-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.cal-title { font-size: 12px; font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-wd {
  text-align: center; font-size: 10px; color: var(--text-3); padding: 2px 0;
}
.cal-day {
  aspect-ratio: 1 / 1;
  min-height: 22px;
  display: grid; place-items: center;
  border-radius: var(--radius-xs);
  font-size: 11px; color: var(--text-2);
}
.cal-day--out { color: var(--text-3); opacity: .45; }
.cal-day--today {
  background: var(--brand); color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 35%, transparent);
}
.cal-day--weekend { color: var(--text-3); }

/* ---------- 6.1 日历左栏：大号时钟 + 近3天天气 ---------- */
.cal-clock {
  font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: 1px;
  font-variant-numeric: tabular-nums; color: var(--text-1);
  text-align: center;
}
.cal-weather-city {
  display: inline-block; text-align: center; font-size: 11px; color: var(--text-3);
  margin: 0 auto 2px; padding: 2px 8px; border: 1px dashed transparent; border-radius: 8px;
  background: none; cursor: pointer;
}
.cal-weather-city:hover { border-color: var(--line-2, #d9dee8); color: var(--text-1, #222); background: var(--bg-2, #f4f6fa); }
.cal-forecast { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.cal-forecast__row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 2px; border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--surface-2) 50%, transparent);
}
.cal-forecast__icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.cal-forecast__info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cal-forecast__label { font-size: 11px; font-weight: 600; color: var(--text-1); }
.cal-forecast__text { font-size: 10px; color: var(--text-3); }
.cal-forecast__temp { font-size: 11px; font-weight: 600; color: var(--text-1); flex-shrink: 0; white-space: nowrap; }
.cal-forecast__empty { text-align: center; font-size: 12px; padding: 12px 0; }

/* ---------- 6.2 自定义模块占位（空白扩展模板） ---------- */
.custom-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; text-align: center; gap: 6px; padding: 12px; color: var(--text-3);
}
.custom-empty__icon { color: var(--brand); opacity: .85; }
.custom-empty__icon .icon { width: 34px; height: 34px; }
.custom-empty__title { font-size: 14px; font-weight: 600; color: var(--text-1); }
.custom-empty__desc { font-size: 12px; }
.custom-empty__hint { font-size: 11px; color: var(--text-3); max-width: 92%; }
.custom-empty code {
  font-family: var(--mono); background: var(--surface-2);
  padding: 1px 5px; border-radius: 4px; font-size: 11px; word-break: break-all;
}

/* ---------- 6.3 侧边栏「添加模块」入口 ---------- */
.side__add {
  color: var(--brand); border: 1px dashed var(--brand-line);
  margin-bottom: 8px;
}
.side__add:hover { background: var(--surface-2); }
.side__add .icon { color: var(--brand); }

/* ---------- 7. 模块 4：便签（微软便签风格） ---------- */
.note-new {
  display: flex; flex-direction: column; gap: 6px;
  padding: 9px; margin-bottom: 9px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.note-new textarea {
  border: 0; background: transparent; outline: none; resize: none;
  min-height: 34px; font-size: 12.5px; line-height: 1.6;
}
.note-new__foot { display: flex; align-items: center; gap: 8px; }
.note-count { font-size: 11px; color: var(--text-3); margin-right: auto; font-family: var(--mono); }
.note-count.is-over { color: var(--danger); }

.note-item {
  padding: 9px 10px; margin-bottom: 7px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border-left: 3px solid var(--brand-line);
  transition: background var(--dur) var(--ease);
}
.note-item:hover { background: var(--surface-3); }
.note-item__head { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.note-item__title { font-size: 12.5px; font-weight: 600; flex: 1; min-width: 0; }
.note-item__text { font-size: 12px; color: var(--text-2); line-height: 1.6; }
.note-item__meta {
  display: flex; align-items: center; gap: 8px; margin-top: 4px;
  font-size: 11px; color: var(--text-3);
}
.note-item__edit {
  width: 100%; min-height: 60px; margin-top: 4px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-xs);
  background: var(--surface); padding: 4px 6px; outline: none; resize: vertical;
  font-size: 12px; line-height: 1.6;
}
/* 单条便签模式：内容区撑满卡片剩余高度（便签页不留空位） */
.note-item--full {
  display: flex; flex-direction: column;
  flex: 1;                     /* 占满 body 剩余高度 */
  min-height: 120px;
  margin-bottom: 0;
  overflow: hidden;
}
.note-item--full .note-item__edit--full {
  flex: 1; min-height: 120px; resize: none; margin-top: 0;
  overflow-y: auto;
  border: 1px solid var(--line);     /* 更细更淡的边框，扩大书写区域 */
  padding: 8px 10px;
  font-size: 12.5px;
}
.attach-flag { color: var(--warn); display: inline-flex; align-items: center; gap: 3px; }

/* ---------- 8. 模块 5：读书笔记 ---------- */
.bn-item { padding: 8px 7px; border-radius: var(--radius-sm); transition: background var(--dur) var(--ease); }
.bn-item:hover { background: var(--surface-2); }
.bn-item + .bn-item { border-top: 1px solid var(--line); }
.bn-item__title { font-size: 13px; font-weight: 600; }
.bn-item__book { font-size: 11.5px; color: var(--brand); margin-top: 2px; }
.bn-item__sum { font-size: 12px; color: var(--text-2); margin-top: 4px; line-height: 1.6; }
.bn-item__foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11px; color: var(--text-3); }

/* ---------- 阅读模块（图书 + 书签） ---------- */
.book-reader { display: flex; flex-direction: column; height: 100%; }
.book-reader__title {
  font-size: 14px; font-weight: 700; color: var(--text-1);
  padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 8px;
}
.book-reader__content {
  flex: 1; overflow-y: auto; min-height: 120px;
  font-size: 13px; line-height: 1.8; color: var(--text-2);
  padding: 4px 2px;
}
.book-reader__content p { margin-bottom: 10px; }

/* ---------- 9. 模块 6：信息流订阅 ---------- */
.feed-item { display: flex; gap: 10px; padding: 9px 7px; border-radius: var(--radius-sm); }
.feed-item:hover { background: var(--surface-2); }
.feed-item + .feed-item { border-top: 1px solid var(--line); }
.feed-ava {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--text-2); font-size: 11px; font-weight: 600;
}
.feed-src { font-size: 11.5px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.feed-title { font-size: 12.5px; font-weight: 600; margin: 2px 0 3px; }
.feed-sum { font-size: 12px; color: var(--text-2); line-height: 1.6; }
.src-badge {
  font-size: 10.5px; padding: 0 5px; height: 16px; line-height: 16px;
  border-radius: var(--radius-xs); background: var(--surface-3); color: var(--text-2);
}

/* ---------- 10. 模块 7：统计看板 ---------- */
.stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
  align-content: start;
}
.stat-cell {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 62px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.stat-cell:hover { border-color: var(--brand-line); background: var(--surface-3); }
.stat-num { font-size: 22px; font-weight: 600; letter-spacing: -.5px; line-height: 1.2; }
.stat-label { font-size: 11.5px; color: var(--text-3); }
.stat-cell--warn .stat-num { color: var(--warn); }
.stat-cell--brand .stat-num { color: var(--brand); }

/* 近 14 天操作量迷你柱状图 */
.stat-chart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 46px; margin-top: 10px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.stat-bar {
  flex: 1; min-width: 3px; min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--brand);
  opacity: .55;
  transition: opacity var(--dur) var(--ease);
}
.stat-chart:hover .stat-bar { opacity: .35; }
.stat-chart .stat-bar:hover { opacity: 1; }

/* ---------- 11. 移动端：卡片自动重排为流式布局 ---------- */
.canvas.is-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.canvas.is-flow .card {
  position: static !important;
  width: auto !important;
  height: auto !important;
  min-height: 220px;
  max-height: 460px;
}
.canvas.is-flow .card__bar { cursor: default; }
.canvas.is-flow .rz { display: none; }

@media (min-width: 620px) and (max-width: 900px) {
  .canvas.is-flow { grid-template-columns: repeat(2, 1fr); }
}