:root {
  --bg: #0b0d10;
  --panel: #12151a;
  --panel-2: #171b21;
  --text: #e6edf3;
  --muted: #aab8c2;
  --primary: #7c3aed;
  --primary-600: #6d28d9;
  --danger: #ef4444;
  --success: #22c55e;
  --warn: #f59e0b;
  --border: #242a32;
  --card: #0f1216;
  --shadow: 0 8px 24px rgba(0,0,0,.35);
}

[data-theme="light"] {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --panel-2: #f3f4f6;
  --text: #0b0d10;
  --muted: #4b5563;
  --primary: #7c3aed;
  --primary-600: #6d28d9;
  --danger: #dc2626;
  --success: #16a34a;
  --warn: #d97706;
  --border: #e5e7eb;
  --card: #ffffff;
  --shadow: 0 8px 24px rgba(2,6,23,.08);
}

* { box-sizing: border-box; }

/* 全局禁用文本选择和鼠标事件，避免文字光标显示 */
* {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 为输入框、文本框等需要文本选择的元素恢复正常功能 */
input, textarea, [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

html, body { height: 100%; }
body {
  margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg); color: var(--text);
}

.app-header {
  height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10;
}
.app-header .title { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.app-header h1 { font-size: 18px; margin: 0; }
.header-actions { display: flex; align-items: center; gap: 8px; }
/* 统一导入/导出等顶部动作按钮文字样式 */
.header-actions .label { font-size: 16px; font-weight: 500; line-height: 1.2; }
.header-actions .icon { font-size: 18px; }

.toolbar { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding: 12px 16px; margin-left: 16px; margin-top: 15px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; position: sticky; top: 64px; z-index: 9; }
/* Moonly page: hide legacy header */
.moonly-header{display:none!important;}
/* Bookmark page: buttons without panel-2 background */
.bookmark-header-actions button.secondary{background:none!important;}
.toolbar .filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.toolbar .filters select, .toolbar .filters input[type="search"] { height: 34px; line-height: 1.2; padding-top: 6px !important; padding-bottom: 6px !important; font-size: 14px; box-sizing: border-box; vertical-align: middle; }
/* 使选择框箭头不被遮挡，右侧保留空间 */
.toolbar .filters select { padding-right: 28px; line-height: 1.2; }
.toolbar .actions { display: flex; gap: 8px; }
/* 统一右上角操作按钮与文件选择标签的文字大小 */
.toolbar .actions button, .toolbar .actions .btn-file { font-size: 14px; line-height: 1.2; }

input[type="search"], input[type="text"], input[type="number"], input[type="date"], select, textarea { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; outline: none; }
/* 确保所有输入框和文本框保留正常的文本选择功能 */
input[type="search"], input[type="text"], input[type="number"], input[type="date"], textarea { user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; }
input::placeholder, textarea::placeholder { color: var(--muted); }

button, .btn-file { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; cursor: pointer; transition: .2s; box-shadow: none; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
button.primary { background: var(--primary); border-color: transparent; color: white; }
#addBookmarkBtn.primary{
  display:inline-flex;align-items:center;gap:6px;
  background:#1e80ff;color:#fff;border-radius:10px;border:1px solid #1e80ff;
}
[data-theme="dark"] #addBookmarkBtn.primary{
  background:#1e80ff;border-color:#1e80ff;
}
#addBookmarkBtn.primary::before{
  content:'📑';
}
#clearAllDiff.btn::before{
  content:'🗑️';
}
#compareDiff.btn::before{
  content:'🔍';
}
#clearAllDiff.btn,#compareDiff.btn{
  display:inline-flex;align-items:center;gap:6px;
}

button:hover, .btn-file:hover { filter: brightness(1.08); transform: translateY(-1px); }
button:active, .btn-file:active { transform: translateY(0); }

.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.icon-btn.danger { color: var(--danger); }

/* grid narrower columns can cause crowding; widen min card width */
.grid { padding: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; position: relative; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
/* Hover effect for subscription cards (management page) */
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--accent, var(--primary));
}
.card .bar { height: 6px; background: var(--primary); }
/* header rows: row1 avatar+name, row2 tags+actions */
.card-header { display: flex; flex-wrap: wrap; align-items: center; }
/* tighten header spacing and avatar size */
.avatar { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(120deg, rgba(124,58,237,.25), rgba(124,58,237,.05)); border: 1px dashed var(--border); }
.card-header { padding: 12px 12px 4px; gap: 10px; }
.name { line-height: 1.2; }
.card-actions { gap: 4px; }
.card-body { padding: 0 12px 12px; gap: 8px; }
.price { font-size: 17px; }
.meta { font-size: 12.5px; gap: 6px 8px; }
.notes { -webkit-line-clamp: 2; }
/* allow 4 columns on typical 1440px viewport while keeping readability */
.grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* header rows: row1 avatar+name, row2 tags+actions */
.title-area { display: contents; }
.name { order: 1; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.tags { order: 2; margin-left: auto; align-self: center; margin-top: 0; }
.tags .tag { margin-left: 0; }
.tags .tag { font-size: 12px; color: var(--primary); background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.25); padding: 2px 6px; border-radius: 999px; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
/* reflow: place actions on same row as tags and align right */
/* 让操作按钮左对齐 */
.card-actions { display: flex; gap: 6px; order: 3; width: auto; margin-left: 0; justify-content: flex-start; }

/* 悬停提示基础样式：读取 data-tip 显示 */
.icon-btn[data-tip] { position: relative; }
.icon-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: 100%;
  transform: translateY(6px);
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: var(--shadow);
  z-index: 5;
}

/* 头像支持 emoji：用伪元素承载图标 */
.avatar { position: relative; display: grid; place-items: center; overflow: hidden; }
.avatar::after { content: var(--emoji, ""); font-size: 18px; }

/* 备注半透明背景，主色调来自卡片条色 */
.card .notes { position: relative; padding: 8px 10px; border-radius: 10px; }
.card { --accent: var(--primary); }
.card .bar { background: var(--accent); }
.card[data-color] { --accent: attr(data-color color, var(--primary)); }
.card .notes { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.card-body { padding: 0 14px 14px; display: grid; gap: 10px; }
.price { font-weight: 700; font-size: 18px; }
/* Let meta be two rows: first row is renew (full width); second row shows status and reminders */
.meta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--muted); font-size: 13px; align-items: center; }
.meta .renew { flex: 1 1 100%; display: block; }
.status-pill { padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); }
/* clamp notes to two lines for cleaner look */
.notes { 
  color: var(--muted); 
  margin: 0; 
  overflow: hidden; 
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  height: 2.4em; /* 固定高度，确保所有卡片一致 */
  line-height: 1;
  position: relative;
  font-size: 13px; /* 稍微减小字体以确保2行显示 */
}

/* 为空备注添加占位符，确保背景一致 */
.notes:empty::before {
  content: "\00a0"; /* 不间断空格，确保有内容撑起高度 */
  opacity: 0;
}

/* 悬停时显示完整备注的工具提示 */
.notes[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  z-index: 10;
  white-space: pre-wrap;
  word-wrap: break-word;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-height: 120px;
  overflow-y: auto;
}

.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.4); padding: 24px; z-index: 9000000000000; }
#confirmModal { z-index: 9000000000001; }
.modal.hidden { display: none; }
.modal-content { width: min(880px, 100%); background: white; border: none; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.15); overflow: hidden; }
#confirmModal .modal-content { width: min(400px, 100%); }

/* Fancy confirm modal styles */
#confirmModal.fancy .modal-content {
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

#confirmModal.fancy .modal-header {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  color: white;
  border-radius: 16px 16px 0 0;
}

#confirmModal.fancy .modal-header h2 {
  color: white;
}

#confirmModal.fancy .modal-header .icon-btn {
  color: white;
  opacity: 0.8;
}

#confirmModal.fancy .modal-header .icon-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.1);
}

#confirmModal.fancy .primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  border: none;
  color: white;
}
#inputModal .modal-content { width: min(400px, 100%); }
#inputModal .modal-body { padding: 20px; }
#inputModal .input-label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--text); }
#inputModal .input-field { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 14px; }
#inputModal .input-field:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1); }
#inputModal .modal-footer { display: flex; gap: 12px; justify-content: flex-end; padding: 16px 20px; border-top: 1px solid var(--border); }

/* Emoji 选择器需要更高的 z-index 以显示在其他模态框之上 */
#emojiPicker {
  z-index: 1100;
}

/* 分类管理弹窗也需要更高的 z-index */
#categoryModal {
  z-index: 1050;
}
.modal-header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 24px 32px; 
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  border-bottom: none;
  color: white;
}

.modal-header h2 {
  color: white;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.modal-header .icon-btn {
  color: white;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.modal-header .icon-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}
/* 设置模态框中的图标行样式 */
.modal-header .header-actions { margin-left: 16px; gap: 12px; }
.form { padding: 32px; display: grid; gap: 20px; background: white; }
.form-row { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.form-row .full { grid-column: 1 / -1; }
/* 让每个单元内的标签与输入横向排列，更整齐 */
.form-row label { 
  display: grid; 
  grid-template-columns: 84px 1fr; 
  align-items: start; 
  gap: 12px; 
  font-weight: 500;
  color: #374151;
}
.form-row label > input,
.form-row label > select,
.form-row label > textarea { 
  width: 100%; 
  padding: 8px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 14px;
  background: #f9fafb;
  color: #374151;
  transition: all 0.2s ease;
}

.form-row label > input:focus,
.form-row label > select:focus,
.form-row label > textarea:focus {
  outline: none;
  border-color: #8b5cf6;
  background: white;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.form-row label.full { grid-template-columns: 84px 1fr; }

/* 优化文本框样式 */
.form-row textarea {
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
  padding: 8px 16px;
}

/* 优化表单底部按钮区域 */
.form-footer { 
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  gap: 16px; 
  padding: 24px 32px;
  border-top: none;
  background: white;
}

/* 按钮样式优化 */
.form-footer button {
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.form-footer button.secondary,
.form-footer button:not(.primary) {
  background: #f3f4f6;
  color: #6b7280;
}

.form-footer button.secondary:hover,
.form-footer button:not(.primary):hover {
  background: #e5e7eb;
  color: #374151;
}

.form-footer button.primary {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.form-footer button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
}

.form-footer button.danger {
  background: #dc2626;
  border: 1px solid #dc2626;
  color: white;
}

.form-footer button.danger:hover {
  background: #b91c1c;
}

/* 已删除书签样式 */
.deleted-bookmark-card {
  opacity: 0.8;
  border: 2px dashed var(--border);
  transition: all 0.2s ease;
  cursor: pointer;
}
.deleted-bookmark-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--bookmark-color, var(--primary));
}

.deleted-info {
  margin: 8px 0;
  padding: 8px;
  background: var(--panel-2);
  border-radius: 6px;
  font-size: 12px;
  color: var(--muted);
}

.deleted-date {
  display: block;
  margin-bottom: 4px;
}

.days-left {
  display: block;
  color: var(--warn);
  font-weight: 500;
}

/* 最后访问时间样式 */
.bookmark-last-visited {
  margin: 8px 0 4px 0;
  padding: 6px 8px;
  background: var(--panel-2);
  border-radius: 4px;
  font-size: 11px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.last-visited-icon {
  font-size: 10px;
  opacity: 0.7;
}

.last-visited-text {
  font-family: monospace;
  font-size: 10px;
}

/* 空状态样式 */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state h3 {
  margin: 0 0 8px 0;
  color: var(--text);
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}

.switch { display: inline-flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }

@media (max-width: 720px) {
  .form-row { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; align-items: stretch; position: static; }
  /* 小屏下标签与输入改为纵向堆叠，避免拥挤 */
  .form-row label, .form-row label.full { grid-template-columns: 1fr; }
}

.detail-grid { display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px; }
.detail-grid dt { color: var(--muted); }
.detail-grid dd { margin: 0; }
/* 详情页中的链接样式 */
.detail-grid a { color: var(--primary); text-decoration: underline; }

.reminder-flag { padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: 12px; }

/* adjust meta layout to avoid squeezing */
.card .meta { justify-content: flex-start; }
.tabs { display: flex; gap: 10px; align-items: center; padding: 12px 16px; margin: 8px 16px 4px; /* top 8 bottom 4 left/right 16 */ position: sticky; top: 112px; background: var(--panel); z-index: 8; border: 1px solid var(--border); border-radius: 12px; }
.tabs button { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.tabs button.active { background: var(--primary); border-color: transparent; color: #fff; }
.tabs button.drop-target { outline: 2px dashed color-mix(in srgb, var(--primary) 50%, var(--border)); background: color-mix(in srgb, var(--primary) 15%, transparent); }
.tabs .count { opacity: .8; margin-left: 4px; font-variant-numeric: tabular-nums; }

/* 删除态样式 */
.status-pill.deleted { color: var(--muted); border-color: color-mix(in srgb, var(--muted) 40%, var(--border)); background: color-mix(in srgb, var(--muted) 12%, transparent); text-decoration: line-through; }
.icon-btn[data-tip] { position: relative; }
.icon-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: 100%;
  transform: translateY(6px);
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: var(--shadow);
  z-index: 5;
}

/* 头像支持 emoji：用伪元素承载图标 */
.avatar { position: relative; display: grid; place-items: center; overflow: hidden; }
.avatar::after { content: var(--emoji, ""); font-size: 18px; }

/* 备注半透明背景，主色调来自卡片条色 */
.card .notes { position: relative; padding: 8px 10px; border-radius: 10px; }
.card { --accent: var(--primary); }
.card .bar { background: var(--accent); }
.card[data-color] { --accent: attr(data-color color, var(--primary)); }
.card .notes { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.card-body { padding: 0 14px 14px; display: grid; gap: 10px; }
.price { font-weight: 700; font-size: 18px; }
/* Let meta be two rows: first row is renew (full width); second row shows status and reminders */
.meta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--muted); font-size: 13px; align-items: center; }
.meta .renew { flex: 1 1 100%; display: block; }
.status-pill { padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); }
/* clamp notes to two lines for cleaner look */
.notes { 
  color: var(--muted); 
  margin: 0; 
  overflow: hidden; 
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 32px;
  line-height: 32px;
  position: relative;
  font-size: 15px;
  padding: 0 8px;
  width: 100%;
  box-sizing: border-box;
}

.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.4); padding: 24px; }
.modal.hidden { display: none; }
#detailModal .modal-content { width: min(700px, 100%); border-radius: 16px; border: 1px solid var(--border); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.form { padding: 12px 16px 16px; display: grid; gap: 12px; }
.form-row { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.form-row .full { grid-column: 1 / -1; }
/* 让每个单元内的标签与输入横向排列，更整齐 */
.form-row label { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; }
.form-row label > input,
.form-row label > select,
.form-row label > textarea { width: 100%; }
.form-row label.full { grid-template-columns: 84px 1fr; }
.form-footer { display: flex; align-items: center; gap: 8px; }
.switch { display: inline-flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }

@media (max-width: 720px) {
  .form-row { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; align-items: stretch; position: static; }
  /* 小屏下标签与输入改为纵向堆叠，避免拥挤 */
  .form-row label, .form-row label.full { grid-template-columns: 1fr; }
}

.detail-grid { display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px; }
.detail-grid dt { color: var(--muted); }
.detail-grid dd { margin: 0; }
/* 详情页中的链接样式 */
.detail-grid a { color: var(--primary); text-decoration: underline; }

.reminder-flag { padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: 12px; }

/* adjust meta layout to avoid squeezing */
.card .meta { justify-content: flex-start; }
#detailModal .form { border-top: 1px solid var(--border); }
#detailModal .form-footer { border-top: 1px solid var(--border); padding-top: 12px; }

@media (max-width: 560px){
  #detailModal .detail-grid { grid-template-columns: 84px 1fr; }
}

/* 让详情面板支持订阅主色作为强调色 */
#detailModal .modal-content { --accent: var(--primary); }
#detailModal .modal-content[data-color] { --accent: attr(data-color color, var(--primary)); }
#detailModal .tag-chip { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
#detailModal .status-pill.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: color-mix(in srgb, var(--success) 12%, transparent); }
#detailModal .status-pill.upcoming { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 12%, transparent); }
#detailModal .status-pill.overdue { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: color-mix(in srgb, var(--danger) 12%, transparent); }
#detailModal .status-pill.inactive { color: var(--muted); }
.reminder-flag { padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: 12px; }

/* === Sidebar & Overview === */
.app-shell { display: grid; grid-template-columns: 240px 1fr; gap: 0; align-items: start; }
.sidebar { padding: 16px 12px; }
.side-nav { position: sticky; top: 112px; display: grid; gap: 12px; }
.side-item { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-weight: 600; text-align: left; cursor: pointer; transition: all 0.2s ease; }
.side-item .icon { opacity: .85; }
.side-item.active { background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 28%, transparent), color-mix(in srgb, var(--primary) 60%, transparent)); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); box-shadow: var(--shadow); }
.side-item.active .icon { opacity: 1; }

/* 拖拽相关样式 */
.side-item.dragging {
  opacity: 0.5;
  transform: scale(0.95);
  z-index: 1000;
  pointer-events: none;
}

/* 长按激活状态 */
.side-item.long-press-active {
  background: color-mix(in srgb, var(--primary) 20%, var(--panel));
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.3);
  transform: scale(1.02);
  transition: all 0.3s ease;
}

/* 拖拽准备状态 */
.side-item.drag-ready {
  cursor: grabbing !important;
  background: color-mix(in srgb, var(--primary) 25%, var(--panel));
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.4);
  transform: scale(1.03);
  transition: all 0.2s ease;
}

/* 拖拽源元素 */
.side-item.drag-source {
  background: color-mix(in srgb, var(--warn) 30%, var(--panel));
  border-color: var(--warn);
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.5);
  transform: scale(0.95);
  transition: all 0.2s ease;
}

/* 拖拽悬停效果 */
.side-item.drag-hover {
  background: color-mix(in srgb, var(--success) 20%, var(--panel));
  border-color: var(--success);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
  transform: translateY(-3px) scale(1.02);
  transition: all 0.2s ease;
}

/* 目标位置指示 */
.side-item.drag-target-before {
  border-top: 3px solid var(--success);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.side-item.drag-target-after {
  border-bottom: 3px solid var(--success);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* 拖拽激活状态 */
.side-nav.drag-active {
  user-select: none;
  background: color-mix(in srgb, var(--primary) 5%, var(--panel));
  border-radius: 12px;
  transition: background 0.3s ease;
}

/* 拖拽指示线 */
.drag-indicator {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 4px;
  background: linear-gradient(90deg, #007AFF, #00D4FF);
  border-radius: 3px;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 999;
  box-shadow: 0 0 12px rgba(0, 122, 255, 0.6);
  animation: pulse-glow 1.5s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 12px rgba(0, 122, 255, 0.6);
    transform: scaleY(1);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 122, 255, 0.8);
    transform: scaleY(1.2);
  }
}

.drag-indicator.visible {
  opacity: 1;
}

/* 拖拽时的幽灵元素样式 */
.drag-ghost {
  position: fixed;
  pointer-events: none;
  z-index: 1001;
  opacity: 0.85;
  transform: rotate(3deg) scale(1.05);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  border: 2px solid var(--primary);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  transition: all 0.2s ease;
}

/* 落下动画效果 */
.side-item.drop-animation {
  animation: drop-bounce 0.4s ease-out;
}

@keyframes drop-bounce {
  0% {
    transform: scale(1.1);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.4);
  }
  50% {
    transform: scale(0.95);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
  }
}
.main-content { min-width: 0; }
[hidden] { display: none !important; }
.page[hidden] { display: none !important; }

/* QR Generator styles */
#qrView { padding: 16px; }
.qr-gen { display: grid; grid-template-columns: 600px 14px 1fr; gap: 24px; align-items: start; }
/* 中间装饰性分隔线 */
.qr-divider { grid-column: 2 / 3; width: 14px; position: relative; align-self: stretch; }
.qr-divider::before { content: ""; position: absolute; inset: 0 6px; border-radius: 999px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--primary) 25%, var(--border)), transparent); }

.qr-preview { background: #f6f7f9; border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); display:flex; align-items:center; justify-content:center; min-height: 320px; color: #111; align-self: stretch; height: 100%; }
/* ensure QR image has 60px blank margin each side within preview */
.qr-preview img{ max-width: calc(100% - 120px); margin: 0 60px; height: auto; }
.qr-preview img { max-width: 100%; display: block; height: 444px; }
.qr-panel { padding: 8px 12px; }
.qr-controls { display: grid; gap: 12px; }
.qr-row { display: flex; gap: 16px; align-items: center; }
.qr-actions { margin-top: 8px; display:flex; gap: 8px; }
.qr-actions #qrReset { background: var(--card); border: 1px solid var(--border); color: #111; }
.qr-actions #qrReset:hover { background: color-mix(in srgb, var(--border) 20%, var(--card)); }

/* 深色模式下QR重置按钮文字颜色修复 */
[data-theme="dark"] .qr-actions #qrReset { color: #fff; }
.qr-actions #qrDownload { background: #2563eb; border-color: #2563eb; color: #fff; box-shadow: 0 8px 20px rgba(37,99,235,.18); }
.qr-actions #qrDownload:hover { background: #1e40af; border-color: #1e40af; }
.qr-actions button[disabled] { opacity: .6; cursor: not-allowed; filter: none; box-shadow: none; }

/* URL 行独占一行并尽量拉长输入框（两行：标签在上，输入在下） */
.qr-controls .qr-url { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; }
.qr-controls .qr-url label { margin-bottom: 6px; color: var(--muted); font-weight: 600; letter-spacing: .2px; }
.qr-controls .qr-url input#qrInput { flex: 1 1 auto; min-width: 0; width: 100%; padding: 12px 14px; font-size: 16px; line-height: 1.5; border: 1px solid var(--border); border-radius: 10px; }
.qr-controls .qr-url input#qrInput:focus { outline: none; border-color: color-mix(in srgb, var(--primary) 60%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }

@media (max-width: 900px){ .qr-gen { grid-template-columns: 1fr; } .qr-divider{ display:none; } }

/* 暗黑模式下 QR 预览文字也保持深色，确保可读性 */
[data-theme="dark"] .qr-preview { color: #111; }

/* Time Zone converter 基础排版（占位，后续可扩展） */
/* Timezone Planner */
#tzView { padding: 16px; }
.tz-planner { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); }
.tzp-toolbar { display:flex; align-items:center; justify-content:flex-start; gap:16px; padding: 14px 16px; border-bottom:1px solid var(--border); min-height: 60px; }
.tzp-toolbar h2 { margin:0; font-size:20px; font-weight:800; letter-spacing:.2px; }
.tzp-controls { display:flex; align-items:center; gap:12px; }
.tzp-controls .icon-btn { width:36px; height:36px; border:1px solid var(--border); border-radius:10px; background: var(--panel); color: var(--text); font-size: 16px; }
.tzp-controls input[type="date"] { font-size: 16px; padding: 8px 12px; min-width: 140px; height: 36px; border-radius: 10px; }
.tzp-controls .icon-btn:hover { background: color-mix(in srgb, var(--panel) 30%, transparent); }
.tzp-controls .today-btn { 
  height: 36px; 
  padding: 8px 16px; 
  border: 1px solid var(--border); 
  border-radius: 10px; 
  background: var(--panel); 
  color: var(--text); 
  font-size: 14px; 
  font-weight: 500; 
  cursor: pointer; 
  transition: background 0.2s ease;
}
.tzp-controls .today-btn:hover { 
  background: color-mix(in srgb, var(--panel) 30%, transparent); 
}
/* DST status bar */
.tzp-dst { display:flex; align-items:center; gap:16px; margin-left: 8px; min-height: 88px; }
.tzp-dst .dst-pill { display:inline-flex; align-items:center; gap:12px; padding:12px 18px; border-radius: 999px; background: color-mix(in srgb, #5bb5ff 14%, transparent); color: #3b7bb7; border: 1px solid color-mix(in srgb, #5bb5ff 40%, var(--border)); font-size: 16px; line-height: 1.2; box-shadow: var(--shadow); min-height: 44px; }
.tzp-dst .dst-pill .icon { font-size: 22px; }
.tzp-dst .dst-pill .label { opacity:.9; font-weight: 600; }
.tzp-dst .dst-pill .next { font-weight: 800; padding:4px 12px; border-radius: 999px; background: color-mix(in srgb, #3b7bb7 12%, transparent); color: #0d447a; font-size: 15px; }
[data-theme="dark"] .tzp-dst .dst-pill { background: color-mix(in srgb, #5bb5ff 10%, transparent); color: #7ec3ff; border-color: color-mix(in srgb, #5bb5ff 30%, var(--border)); }
[data-theme="dark"] .tzp-dst .dst-pill .next { background: color-mix(in srgb, #5bb5ff 18%, transparent); color: #bfe3ff; }
@media (max-width: 720px){ .tzp-dst { display:none; } }
.tzp-combobox { 
  height: 36px; 
  padding: 8px 12px; 
  border: 1px solid var(--border); 
  border-radius: 10px; 
  font-size: 16px; 
  line-height: 1.5; 
  background: var(--panel); 
  color: var(--text); 
  min-width: 280px; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  position: relative;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
}
.tzp-combobox::placeholder { 
  color: var(--muted); 
  font-weight: 400;
}
.tzp-combobox:hover {
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.tzp-combobox:focus { 
  outline: none; 
  border-color: var(--primary); 
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent), 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Custom datalist styling for modern dropdown appearance */
#tzpCityList {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 200px;
  overflow-y: auto;
}

/* Enhanced option styling */
#tzpCityList option {
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  background: var(--panel);
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

#tzpCityList option:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--panel));
  color: var(--primary);
}

#tzpCityList option:checked,
#tzpCityList option:focus {
  background: color-mix(in srgb, var(--primary) 12%, var(--panel));
  color: var(--primary);
  font-weight: 500;
}

/* Dark mode adjustments for dropdown */
[data-theme="dark"] .tzp-combobox {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
}

/* === Bookmark Page Styles === */
.bookmark-container {
  padding: 20px;
  max-width: none;
  margin: 0;
}

.bookmark-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.bookmark-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.bookmark-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}

button.secondary, .btn-file.btn-secondary {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
}

/* 确保导出导入按钮样式完全一致 */
.btn.btn-secondary, .btn-file.btn-secondary {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: .2s;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.btn.btn-secondary:hover, .btn-file.btn-secondary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn.btn-secondary:active, .btn-file.btn-secondary:active {
  transform: translateY(0);
}

/* 文本对比工具按钮样式 */
.btn.btn-primary {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
  border: 1px solid #0056b3;
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.btn.btn-primary:hover {
  background: linear-gradient(135deg, #0056b3, #004085);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4);
}

.btn.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 123, 255, 0.3);
}

/* 增强次要按钮的辨识度 */
.btn.btn-secondary {
  background: linear-gradient(135deg, #6c757d, #5a6268);
  color: white;
  border: 1px solid #5a6268;
  box-shadow: 0 2px 6px rgba(108, 117, 125, 0.2);
}

.btn.btn-secondary:hover {
  background: linear-gradient(135deg, #5a6268, #495057);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(108, 117, 125, 0.3);
}

.btn.btn-secondary:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(108, 117, 125, 0.2);
}

/* 设置界面导入导出按钮专用样式 - 白色背景黑色文字 */
#exportBtn, .btn-file[title="导入 JSON"] {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #d0d0d0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

#exportBtn:hover, .btn-file[title="导入 JSON"]:hover {
  background: #f8f9fa !important;
  color: #000000 !important;
  border: 1px solid #c0c0c0 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

#exportBtn:active, .btn-file[title="导入 JSON"]:active {
  background: #e9ecef !important;
  color: #000000 !important;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.icon-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.icon-input-group input {
  flex: 1;
}

.emoji-picker-btn {
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}

/* Emoji 选择器样式 */
.emoji-picker-modal .modal-content {
  width: min(500px, 90vw);
}

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  padding: 16px;
  max-height: 300px;
  overflow-y: auto;
}

.emoji-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.emoji-btn:hover {
  background: var(--panel-2);
  transform: scale(1.1);
}

/* 分类管理样式 */
.category-list {
  margin-bottom: 24px;
}

.existing-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.category-item .delete-category {
  background: none;
  border: none;
  color: var(--danger);
  cursor: pointer;
  padding: 2px;
  font-size: 12px;
}

.add-category {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.bookmark-toolbar {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.bookmark-search {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 400px;
  flex: 1;
}

/* 右侧工具区域 */
.bookmark-toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 视图切换按钮 */
.bookmark-view-toggle {
  display: flex;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
}

.view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-btn:hover {
  background: var(--panel-2);
  color: var(--text);
}

.view-btn.active {
  background: var(--primary);
  color: white;
}

.view-btn svg {
  width: 20px;
  height: 20px;
}

.bookmark-sort select {
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
}

.bookmark-search input {
  flex: 1;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
}

.bookmark-search input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent);
}

.bookmark-categories {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.category-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
}

.category-btn:hover {
  background: var(--panel-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.category-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: var(--shadow);
}

.category-icon {
  font-size: 20px;
  line-height: 1;
}

.category-label {
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.bookmark-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

/* 列表视图布局 */
.bookmark-grid.list-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 8px;
  margin-bottom: 20px;
}

/* 列表视图中的书签卡片 */
.bookmark-grid.list-view .bookmark-card {
  display: flex;
  align-items: flex-start;
  padding: 8px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: border-color 0.2s ease;
  gap: 12px;
  cursor: pointer;
  min-height: 50px;
  position: relative;
}

/* 悬停或选中时高亮边框 */
.bookmark-grid.list-view .bookmark-card:hover,
.bookmark-grid.list-view .bookmark-card.active {
  border-color: var(--primary);
  box-shadow: none;
}

.bookmark-grid.list-view .bookmark-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  margin: 0;
  position: absolute;
  left: 16px;
  top: 40%;
  transform: translateY(-50%);
}

.bookmark-grid.list-view .bookmark-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  margin-left: 44px;
  margin-top: -23px;
}

.bookmark-grid.list-view .bookmark-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.bookmark-grid.list-view .bookmark-url {
  font-size: 12px;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.3;
}

.bookmark-grid.list-view .bookmark-url:hover {
  text-decoration: underline;
  color: var(--primary);
}

/* 隐藏列表视图中不需要的元素 */
.bookmark-grid.list-view .bookmark-description,
.bookmark-grid.list-view .bookmark-note-container,
.bookmark-grid.list-view .bookmark-last-visited,
.bookmark-grid.list-view .bookmark-actions,
.bookmark-grid.list-view .bookmark-category {
  display: none;
}

.bookmark-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bookmark-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--bookmark-color, var(--primary));
}

.bookmark-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--bookmark-color, var(--primary));
}

/* 书签卡片头部 - 图标和操作按钮 */
.bookmark-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* 书签卡片内容区域 */
.bookmark-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 书签卡片底部 - 分类和网址 */
.bookmark-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* 标题行容器 */
.bookmark-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 备注容器 */
.bookmark-note-container {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

/* 备注图标 */
.bookmark-note-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: var(--panel-2);
  border-radius: 4px;
  cursor: help;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  border: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.bookmark-note-icon:hover {
  opacity: 1;
  background: var(--panel);
}

/* 自定义工具提示 */
.bookmark-note-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  white-space: pre-wrap;
  max-width: 250px;
  min-width: 120px;
  word-wrap: break-word;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 20;
}

/* 工具提示箭头 */
.bookmark-note-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid var(--border);
}

.bookmark-note-tooltip::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid var(--panel);
  margin-bottom: -1px;
}

/* 悬停时显示工具提示 */
.bookmark-note-container:hover .bookmark-note-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.bookmark-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-600));
  color: white;
  flex-shrink: 0;
}

.bookmark-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}

.bookmark-description {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bookmark-url {
  font-size: 14px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}

.bookmark-url:hover {
  text-decoration: underline;
}

.bookmark-url-icon {
  font-size: 12px;
  opacity: 0.7;
  flex-shrink: 0;
}

.bookmark-actions {
  display: flex;
  gap: 6px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.bookmark-card:hover .bookmark-actions {
  opacity: 1;
}

.bookmark-actions .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 14px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
  transition: all 0.2s ease;
}

.bookmark-actions .icon-btn:hover {
  background: var(--panel);
  color: var(--text);
  transform: scale(1.05);
}

.bookmark-actions .edit-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.bookmark-actions .delete-btn:hover {
  background: #dc2626;
  color: white;
  border-color: #dc2626;
}

/* 分类标签样式 */
.bookmark-category {
  display: flex;
  align-items: center;
}

.category-tag {
  font-size: 12px;
  color: var(--primary);
  background: rgba(124,58,237,.12);
  border: 1px solid rgba(124,58,237,.25);
  padding: 2px 6px;
  border-radius: 999px;
  font-weight: 600;
  text-transform: capitalize;
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.bookmark-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.6;
}

.bookmark-empty h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  color: var(--text);
}

.bookmark-empty p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
}

/* 深色模式下设置界面的文字颜色修复 */
[data-theme="dark"] #settingsModal .section-title,
[data-theme="dark"] #settingsModal .settings-section-title,
[data-theme="dark"] #settingsModal .form-row label,
[data-theme="dark"] #settingsModal .currency-input-group label,
.dark #settingsModal .section-title,
.dark #settingsModal .settings-section-title,
.dark #settingsModal .form-row label,
.dark #settingsModal .currency-input-group label {
  color: #000000 !important;
}

/* 深色模式下功能选项黑色标签内的文字为白色 */
[data-theme="dark"] #settingsModal .feature-option .feature-label,
.dark #settingsModal .feature-option .feature-label {
  color: #ffffff !important;
}

/* 深色模式下功能选项的背景保持黑色 */
[data-theme="dark"] #settingsModal .feature-option,
.dark #settingsModal .feature-option {
  background: #1f2937 !important;
  border-color: #374151 !important;
}

[data-theme="dark"] #settingsModal .feature-option:hover,
.dark #settingsModal .feature-option:hover {
  background: #374151 !important;
  border-color: #8b5cf6 !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .bookmark-container {
    padding: 16px;
  }
  
  .bookmark-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .bookmark-categories {
    justify-content: center;
  }
  
  .category-btn {
    min-width: 70px;
    padding: 10px 12px;
  }
  
  .bookmark-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .bookmark-grid {
    grid-template-columns: 1fr;
  }
  
  .bookmark-categories {
    gap: 8px;
  }
  
  .category-btn {
    min-width: 60px;
    padding: 8px 10px;
  }
  
  .category-icon {
    font-size: 18px;
  }
  
  .category-label {
    font-size: 11px;
  }
}
.tzp-body { display:grid; grid-template-columns: 280px 1fr; --tzp-gap: 0px; --tzp-cell: 64px; --tzp-offset-cells: 5; column-gap: var(--tzp-gap); --tzp-row-h: 88px; }
.tzp-info { display:grid; align-content:start; gap:0; padding: 0 4px; padding-left: 6px; }
.tzp-info-row { display:flex; align-items:center; justify-content:space-between; min-height: var(--tzp-row-h); height:auto; box-sizing: border-box; padding:6px 200px; border-bottom:1px solid var(--border); white-space: nowrap; position: relative; }
.tzp-info-row .tzp-del { position:absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--panel); color: var(--text); font-size: 18px; font-weight: 800; display:flex; align-items:center; justify-content:center; cursor: pointer; z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.tzp-info-row .tzp-del:hover { background: color-mix(in srgb, var(--panel) 30%, transparent); }
[data-theme="dark"] .tzp-info-row .tzp-del { color: #e6edf3; border-color: color-mix(in srgb, var(--muted) 30%, var(--border)); }
.tzp-info-row .tzp-del { position:absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); color: var(--text); font-size: 16px; line-height: 22px; text-align:center; cursor: pointer; }
.tzp-info-row .tzp-del:hover { background: color-mix(in srgb, var(--panel) 30%, transparent); }
[data-theme="dark"] .tzp-info-row .tzp-del { color: #e6edf3; border-color: color-mix(in srgb, var(--muted) 30%, var(--border)); }
.tzp-leftdecor{ position:absolute; left: 44px; top: 50%; transform: translateY(-50%); width: 180px; display:flex; align-items:center; justify-content:flex-start; pointer-events:none; }
.tzp-leftdecor .ld-pill{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); color: var(--muted); box-shadow: var(--shadow); }
.tzp-leftdecor .ld-icon{ font-size: 16px; }
.tzp-leftdecor .ld-text{ font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.tzp-nameline { display:flex; align-items:baseline; gap:8px; min-width:0; }
.tzp-nameblock { display:inline-flex; flex-direction:column; min-width:0; }
.tzp-name { font-weight:800; white-space: nowrap; font-size: 20px; line-height: 1.1; color: var(--text); display:inline-flex; align-items:baseline; gap:8px; }
 .tzp-city { overflow:hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 160px; }
.tzp-subname { color: var(--muted); font-size: 13px; line-height: 1.2; max-width: 180px; overflow:hidden; text-overflow: ellipsis; white-space: nowrap; }
.tzp-badge { font-size:11px; line-height: 20px; border:1px solid var(--border); border-radius:6px; padding:0 6px; color: var(--muted); background: var(--panel); display:inline-flex; align-items:center; height: 20px; top:-3px; position: relative; }
.tzp-offset { font-weight:700; color:#16a34a; border-color: color-mix(in srgb, #16a34a 40%, var(--border)); top:-3px; position: relative; }
.tzp-code { font-weight:700; color:#334155; }
.tzp-meta { color: var(--muted); text-align: center; left: 50px; position: relative; }
/* 大号时间样式 */
.tzp-clock { font-variant-numeric: tabular-nums; color: var(--text); line-height: 1; }
.tzp-clock .ck-hh { font-size: 28px; font-weight: 800; }
.tzp-clock .ck-colon { font-size: 28px; font-weight: 700; color: #d1d5db; margin: 0 2px; }
.tzp-clock .ck-mm { font-size: 28px; font-weight: 800; }
.tzp-clock .ck-ap { font-size: 18px; font-weight: 800; margin-left: 2px; }
/* 日期在下方，灰色较淡 */
.tzp-date { margin-top: 12px; font-size: 20px; color:#8f8f8f; font-weight:600; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-left: 0; }
.tzp-timeline { position:relative; padding-left: 2px; }
.tzp-info { position: relative; }
/* moved divider to timeline container — adopt QR divider style */
.tzp-divider { position:absolute; top:0; left:0; height:100%; width:14px; pointer-events:none; z-index: 1; transform: translateX(-50%); }
.tzp-divider::before { content: ""; position:absolute; inset: 0 6px; border-radius: 999px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--primary) 25%, var(--border)), transparent); }
.tzp-scroll { position:relative; overflow-x:auto; overflow-y:hidden; padding-left: 4px; -ms-overflow-style: none; scrollbar-width: none; }
.tzp-scroll::-webkit-scrollbar { display: none; }

/* Dark theme overrides for timeline readability */
[data-theme="dark"] .tzp-rows-time {
  --tzp-day-bg: #2c2a18; /* darker warm yellow for dark mode */
  --tzp-night-bg: #1b2a3a; /* deeper night blue for dark mode */
  --tzp-day-text: #f8f4d8; /* light warm text on dark day cells */
  --tzp-night-text: #e6edf3; /* light text on night cells */
  --tzp-sep-day: rgba(255,255,255,.06); /* subtle light separator */
  --tzp-sep-night: rgba(255,255,255,.12); /* slightly stronger for night */
}
[data-theme="dark"] .tzp-datechip .chip-mo{ background: color-mix(in srgb, var(--tzp-night-bg) 30%, #000); }
[data-theme="dark"] .tzp-datechip .chip-da{ background: color-mix(in srgb, var(--tzp-night-bg) 50%, #000); }
[data-theme="dark"] .tzp-weekday{ color: #9aa4ad; }
.tzp-rows-time { --tzp-cell: 64px; --tzp-offset-cells: 5; 
  /* 新增：时段轴配色变量（参考示例图的蓝/米黄风格） */
  --tzp-day-bg: #f7f3cf; /* 日间浅米黄 */
  --tzp-night-bg: #b7cbea; /* 夜间浅蓝 */
  --tzp-day-text: #5b6472; /* 日间文字偏灰 */
  --tzp-night-text: #ffffff; /* 夜间文字为白色 */
  --tzp-sep-day: rgba(0,0,0,.14); /* 日间单元分隔线（增强） */
--tzp-sep-night: rgba(255,255,255,.65); /* 夜间单元分隔线（增强） */
  display:grid; grid-auto-rows: var(--tzp-row-h); gap: 0px 0; padding-bottom: 0; margin-left: calc(var(--tzp-offset-cells) * var(--tzp-cell)); }
.tzp-row-hours {
  display: grid;
  /* 让 24 个小时格在可用宽度内平均分配，自动响应浏览器宽度 */
  grid-template-columns: repeat(24, 1fr);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  width: 100%;
}
/* 小屏下减小行高，避免垂直方向过度占用 */
@media (max-width: 1400px) {
  :root {
    --tzp-row-h: 44px; /* 原值若较大则缩小 */
  }
}

/* 调整小时格内容对齐到左上角 */
.tzp-hour {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px;
  padding: 4px;
  font-variant-numeric: tabular-nums;
}
/* DST flag cell */
.tzp-dst-flag{display:flex;align-items:center;justify-content:center;font-size:20px;}
/* 参考图风格：夜间为浅蓝，日间为浅米黄，分隔线弱化，文字对比按昼夜变化 */
.tzp-hour { display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 4px; font-variant-numeric: tabular-nums; }
.tzp-hour .h-num { font-size: 18px; line-height: 1; font-weight: 800; }
.tzp-hour .h-ap { font-size: 13px; line-height: 1; font-weight: 700; opacity: .9; text-transform: lowercase; }
.tzp-hour.day { background: var(--tzp-day-bg); color: var(--tzp-day-text); border-right: 1.5px solid var(--tzp-sep-day); }
.tzp-hour.night { background: var(--tzp-night-bg); color: var(--tzp-night-text); border-right: 1.5px solid var(--tzp-sep-night); }
/* removed: .tzp-hour:hover outline effect */

/* 12AM 日期徽章（单元格内显示，竖向上下两段） */
.tzp-weekday{ font-size: 12px; font-weight:800; color:#8f8f8f; letter-spacing:.4px; margin-bottom:6px; }
.tzp-datechip{
  display:flex; flex-direction: column; align-items:center; justify-content:center;
  gap: 2px; pointer-events:none; z-index: 1;
}
/* 12AM 的小时格：隐藏默认的数字与 am/pm，仅显示日期胶囊 */
.tzp-hour.midnight { position: relative; }
.tzp-hour.midnight .h-num, .tzp-hour.midnight .h-ap { display:none; }
.tzp-datechip .chip-mo{
  display:inline-flex; align-items:center; justify-content:center;
  height: 18px; padding: 0 6px; border-radius: 6px 6px 0 6px;
  background: color-mix(in srgb, var(--tzp-night-bg) 40%, #fff);
  color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .4px;
}
.tzp-datechip .chip-da{
  display:inline-flex; align-items:center; justify-content:center;
  height: 18px; padding: 0 6px; border-radius: 0 6px 6px 6px;
  background: color-mix(in srgb, var(--tzp-night-bg) 65%, #fff);
  color: #fff; font-size: 12px; font-weight: 800;
}

/* 黑色框框：一个小时宽度，圆角，内阴影以增强对比度 */
.tzp-cursor { position:absolute; top:0; left:0; width: var(--tzp-cell); height: 100%; border: 2px solid var(--cursor-border, #111); border-radius: 8px; box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset, 0 2px 8px rgba(0,0,0,.08); pointer-events:none; background: transparent; z-index: 2; box-sizing: border-box; }
 [data-theme="dark"] .tzp-cursor { border-color: #e5e7eb; box-shadow: 0 0 0 2px rgba(255,255,255,.2) inset, 0 2px 8px rgba(0,0,0,.18); }
 [data-theme="dark"] .tzp-cursor { border-color: #e5e7eb; box-shadow: 0 0 0 2px rgba(229,231,235,.08) inset, 0 2px 8px rgba(229,231,235,.08); }
 [data-theme="dark"] .tzp-hover-box, [data-theme="dark"] .tzp-hover-rect { border-color: #a78bfa; background: rgba(124,58,237,.12); }
/* 紫色 hover 列容器：透明，仅负责定位；具体分段框由子元素绘制 */
.tzp-hover { position:absolute; top:0; left:0; width: var(--tzp-cell); height: 100%; pointer-events:none; opacity: 0; transition: opacity .12s ease-in-out; z-index: 3; }
.tzp-hover.show { opacity: 1; }
/* 紫色分段框（旧）：每行一个子框，可保留以备切换 */
.tzp-hover-box { position:absolute; left:0; width:100%; border: 2px solid #7c3aed; border-radius: 8px; background: rgba(124,58,237,.06); box-sizing: border-box; }
/* 紫色统一四边形：一次性包住竖列的三行格子 */
.tzp-hover-rect { position:absolute; left:0; width:100%; border: 2px solid #7c3aed; border-radius: 8px; background: rgba(124,58,237,.06); box-sizing: border-box; }
/* 顶部日期条（近似示例图）可作为后续增强，这里先保留简单样式 */
@media (max-width: 720px){ .tzp-body { grid-template-columns: 180px 1fr; column-gap: 8px; --tzp-row-h: 32px; } .tzp-scroll{ padding-left: 8px; } .tzp-rows-time { --tzp-cell: 52px; } }


/* Overview page */
.overview { padding: 16px; display: grid; gap: 16px; }
.ov-title { margin: 0 0 4px; font-size: 18px; }

/* Overview dashboard */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kpi-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px; box-shadow: var(--shadow); display: grid; gap: 6px; }
.kpi-top { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
.kpi-icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.kpi-name { font-weight: 600; }
.kpi-value { font-weight: 800; font-size: 24px; }
.kpi-note { font-size: 12px; color: var(--muted); }
.kpi-note.red { color: #f97316; font-weight: 600; }

.ov-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); }
.panel-header { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.panel h3 { margin: 0; font-size: 16px; }

.ov-recent { list-style: none; margin: 0; padding: 10px 12px; display: grid; gap: 10px; }
.ov-recent li { display: grid; grid-template-columns: 1fr var(--ov-tag-col, 80px) var(--ov-price-col, 120px); gap: 2px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); }
.ov-recent li > .meta { justify-self: end; text-align: right; }
.ov-recent li > .meta.ov-right { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: end; gap: 12px; }
/* 新三列布局样式 */
.ov-recent li > .ov-tag { justify-self: start; text-align: left; }
.ov-recent li > .ov-price { justify-self: end; text-align: right; white-space: nowrap; font-weight: 600; color: var(--text); }
/* 右侧容器旧样式兼容可保留 */
.ov-recent .ov-right .tag-chip { margin-left: 0; }
.ov-recent .ov-right .ov-price { white-space: nowrap; font-weight: 600; color: var(--text); }
.ov-recent .meta { color: var(--muted); font-size: 12px; }

.ov-chart-row { display: grid; grid-template-columns: auto auto; gap: 8px; padding: 10px 12px; align-items: center; justify-content: center; }
.donut { width: clamp(200px, 30vw, 320px); height: clamp(200px, 30vw, 320px); }
.ov-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ov-legend li { display: flex; align-items: center; gap: 8px; }
.ov-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

@media (max-width: 900px){
  .ov-panels { grid-template-columns: 1fr; }
  .ov-chart-row { grid-template-columns: 1fr; justify-items: center; row-gap: 8px; }
}

.ov-hint { margin: 6px 2px 0; color: var(--muted); font-size: 13px; }

/* Primary Add button style to match mock in header and toolbar */
.header-actions { gap: 10px; }
#addBtn { background: #2563eb; border-color: #2563eb; color: #fff; box-shadow: 0 8px 20px rgba(37,99,235,.25); }
#addBtn:hover { background: #1e40af; }
.toolbar .filters #addBtn { height: 34px; padding: 6px 14px; border-radius: 10px; align-self: center; }

/* Generic colorful tag chip used in Overview Recent Activity */
.tag-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid color-mix(in srgb, var(--chip, var(--primary)) 40%, var(--border)); background: color-mix(in srgb, var(--chip, var(--primary)) 14%, transparent); color: var(--chip, var(--primary)); }
.ov-recent .tag-chip { margin-left: 6px; }

/* Management cards: category tags use the card accent color */
.card .tags .tag { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); }

/* Responsive: collapse sidebar on small screens */
@media (max-width: 900px){
  .app-shell { grid-template-columns: 1fr; }
  .side-nav { position: static; display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; }
  .sidebar { padding: 8px 8px 0; }
  .side-item { white-space: nowrap; }
}

/* adjust meta layout to avoid squeezing */
.card .meta { justify-content: flex-start; }

/* Price inline element shows alongside action buttons; wraps on small screens */
.price-inline { order: 4; margin-left: 8px; color: var(--muted); font-weight: 600; white-space: nowrap; }
#todayInfo { margin-left: 12px; font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--primary) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); white-space: nowrap; flex-wrap: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
#todayInfo .date { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
#todayInfo .holiday { color: var(--primary); background: transparent; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
#todayInfo .sep { opacity: .35; }
/* 移除小屏强制换行，保持单行。可按需再加自适应规则 */
@media (max-width: 640px){
  #todayInfo { width: 100%; margin-left: 0; order: 2; }
}
@media (max-width: 640px){
  .price-inline { flex: 1 1 100%; margin-left: 0; margin-top: 4px; }
}

/* Hide legacy block price to avoid layout interference */
.price { display: none; }

/* header operations area: actions + price inline group */
.head-ops { order: 3; display: inline-flex; align-items: center; gap: 8px; margin-left: 0; }
.head-ops .card-actions { order: 1; display: inline-flex; gap: 6px; }
.head-ops .price-inline { order: 2; color: var(--muted); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px){
  .head-ops { width: 100%; flex-wrap: wrap; }
  .head-ops .price-inline { flex: 1 1 100%; }
}

/* Detail modal polish */
#detailModal .modal-content { border-radius: 16px; border: 1px solid var(--border); }
#detailModal .modal-header { border-bottom: 1px solid var(--border); }
#detailModal .detail-grid { align-items: center; }
#detailModal .detail-grid dd { display: flex; align-items: center; gap: 8px; }
#detailModal .tag-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border)); color: var(--text); font-size: 12px; }
#detailModal .detail-grid a { color: var(--primary); text-decoration: underline; }
/* Detail extra info: progress & cost */
#detailModal .detail-grid dt {
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
  padding-bottom: 6px;
}
#detailModal .detail-grid dd {
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
  padding-bottom: 6px;
}
#detailModal .detail-grid dt:nth-last-child(-n+2),
#detailModal .detail-grid dd:nth-last-child(-n+2) {
  border-bottom: none;
}
#detailModal .progress-wrap { display: grid; gap: 8px; width: 100%; }
/* Baseline linear progress bar */
#detailModal .progress { position: relative; height: 12px; background: color-mix(in srgb, var(--text) 10%, var(--panel)); border: 0; border-radius: 999px; overflow: hidden; padding-right: 0; }
#detailModal .progress .bar { height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--success) 92%, #16a34a), color-mix(in srgb, var(--success) 78%, #22c55e)); border-radius: inherit; transition: width .25s ease; }
/* Remove in-bar label and right remaining pill */
#detailModal .progress-label, #detailModal .progress-remaining { display: none; }
#detailModal .progress-text { display: none; }
/* Meta row below: left text + right percentage */
#detailModal .progress-meta { display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-top: 4px; }
#detailModal .progress-meta .meta-left { color: var(--muted); }
#detailModal .progress-meta .meta-right { color: var(--text); font-weight: 600; }
/* centered label inside the progress bar */
#detailModal .progress-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text); mix-blend-mode: difference; pointer-events: none; }
/* Hide the legacy below-bar progress text */
#detailModal .progress-text { display: none; }
/* 右侧剩余天数标签样式与空间预留 */
#detailModal .progress-remaining { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); background: color-mix(in srgb, var(--panel) 70%, transparent); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); pointer-events: none; }

/* Detail tags use the same style as card tags */
#detailModal .detail-grid dd .tag { font-size: 12px; color: var(--primary); background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.25); padding: 2px 6px; border-radius: 999px; }
#detailModal .detail-grid dd .tag + .tag { margin-left: 6px; }

/* subtle card-like panel separation inside modal */
#detailModal .form-footer { border-top: 1px solid var(--border); }
#detailModal .form { border-top: 1px solid var(--border); }
#detailModal .form-footer { border-top: 1px solid var(--border); padding-top: 12px; }

@media (max-width: 560px){
  #detailModal .detail-grid { grid-template-columns: 84px 1fr; }
}

/* 让详情面板支持订阅主色作为强调色 */
#detailModal .modal-content { --accent: var(--primary); }
#detailModal .modal-content[data-color] { --accent: attr(data-color color, var(--primary)); }
#detailModal .tag-chip { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
#detailModal .status-pill.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: color-mix(in srgb, var(--success) 12%, transparent); }
#detailModal .status-pill.upcoming { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 12%, transparent); }
#detailModal .status-pill.overdue { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: color-mix(in srgb, var(--danger) 12%, transparent); }
#detailModal .status-pill.inactive { color: var(--muted); }
.reminder-flag { padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: 12px; }

/* Final override: ensure notes are exactly ONE line only across all contexts */
.notes {
  color: var(--muted);
  margin: 0;
  overflow: hidden; /* 必须：隐藏超出内容 */
  display: block; /* 改回 block，flex 可能影响 text-overflow */
  font-size: 15px;
  line-height: 32px; /* 使用 line-height 实现垂直居中 */
  height: 32px; /* 增加背景高度 */
  max-height: 32px;
  white-space: nowrap; /* 必须：不换行 */
  text-overflow: ellipsis; /* 必须：超出显示省略号 */
  position: relative;
  padding: 0 8px; /* 左右内边距 */
}

/* adjust meta layout to avoid squeezing */
.card .meta { justify-content: flex-start; }

/* Price inline element shows alongside action buttons; wraps on small screens */
.price-inline { order: 4; margin-left: 8px; color: var(--muted); font-weight: 600; white-space: nowrap; }
#todayInfo { margin-left: 12px; font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--primary) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); white-space: nowrap; flex-wrap: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
#todayInfo .date { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
#todayInfo .holiday { color: var(--primary); background: transparent; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
#todayInfo .sep { opacity: .35; }
/* 移除小屏强制换行，保持单行。可按需再加自适应规则 */
@media (max-width: 640px){
  #todayInfo { width: 100%; margin-left: 0; order: 2; }
}
@media (max-width: 640px){
  .price-inline { flex: 1 1 100%; margin-left: 0; margin-top: 4px; }
}

/* Hide legacy block price to avoid layout interference */
.price { display: none; }

/* header operations area: actions + price inline group */
.head-ops { order: 3; display: inline-flex; align-items: center; gap: 8px; margin-left: 0; }
.head-ops .card-actions { order: 1; display: inline-flex; gap: 6px; }
.head-ops .price-inline { order: 2; color: var(--muted); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px){
  .head-ops { width: 100%; flex-wrap: wrap; }
  .head-ops .price-inline { flex: 1 1 100%; }
}

/* 拖拽排序指示：卡片空白处为抓手 */
.card { cursor: grab; }
.card:active { cursor: grabbing; }
/* 按钮区域保持默认光标，避免误导 */
.card .icon-btn { cursor: pointer; }
/* 拖拽中的临时样式 */
.card.dragging { opacity: .8; outline: 2px dashed color-mix(in srgb, var(--primary) 40%, var(--border)); }
/* 拖拽中的卡片：不要半透明，仅保留虚线轮廓做区分 */
.card.dragging { opacity: 1; outline: 2px dashed color-mix(in srgb, var(--primary) 40%, var(--border)); pointer-events: none; }
/* 插入位置提示：在目标卡片的右侧显示更粗竖线（始终“后方”） */
.card.drop-before::before, .card.drop-after::after { content: ""; position: absolute; top: 6px; bottom: 6px; width: 6px; background: var(--primary); border-radius: 6px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); z-index: 3; pointer-events: none; }
.card.drop-before::before { left: -2px; }
.card.drop-after::after { right: -2px; }
.card .bar { height: 6px; background: var(--primary); }
/* header rows: row1 avatar+name, row2 tags+actions */
.card-header { display: flex; flex-wrap: wrap; align-items: center; }
/* tighten header spacing and avatar size */
.avatar { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(120deg, rgba(124,58,237,.25), rgba(124,58,237,.05)); border: 1px dashed var(--border); }
.card-header { padding: 12px 12px 4px; gap: 10px; }
.name { line-height: 1.2; }
.card-actions { gap: 4px; }
.card-body { padding: 0 12px 12px; gap: 8px; }
.price { font-size: 17px; }
.meta { font-size: 12.5px; gap: 6px 8px; }
.notes { -webkit-line-clamp: 2; }
/* allow 4 columns on typical 1440px viewport while keeping readability */
.grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* header rows: row1 avatar+name, row2 tags+actions */
.title-area { display: contents; }
.name { order: 1; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.tags { order: 2; margin-left: auto; align-self: center; margin-top: 0; }
.tags .tag { margin-left: 0; }
.tags .tag { font-size: 12px; color: var(--primary); background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.25); padding: 2px 6px; border-radius: 999px; }
/* reflow: place actions on same row as tags and align right */
/* 让操作按钮左对齐 */
.card-actions { display: flex; gap: 6px; order: 3; width: auto; margin-left: 0; justify-content: flex-start; }

/* 悬停提示基础样式：读取 data-tip 显示 */
.icon-btn[data-tip] { position: relative; }
.icon-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: 100%;
  transform: translateY(6px);
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: var(--shadow);
  z-index: 5;
}

/* 头像支持 emoji：用伪元素承载图标 */
.avatar { position: relative; display: grid; place-items: center; overflow: hidden; }
.avatar::after { content: var(--emoji, ""); font-size: 18px; }

/* 备注半透明背景，主色调来自卡片条色 */
.card .notes { position: relative; padding: 8px 10px; border-radius: 10px; }
.card { --accent: var(--primary); }
.card .bar { background: var(--accent); }
.card[data-color] { --accent: attr(data-color color, var(--primary)); }
.card .notes { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.card-body { padding: 0 14px 14px; display: grid; gap: 10px; }
.price { font-weight: 700; font-size: 18px; }
/* Let meta be two rows: first row is renew (full width); second row shows status and reminders */
.meta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--muted); font-size: 13px; align-items: center; }
.meta .renew { flex: 1 1 100%; display: block; }
.status-pill { padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); }
/* clamp notes to two lines for cleaner look */
.notes { 
  color: var(--muted); 
  margin: 0; 
  overflow: hidden; 
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  height: 2.4em;
  line-height: 1.2;
  position: relative;
  font-size: 13px;
}

.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.4); padding: 24px; }
.modal.hidden { display: none; }
#detailModal .modal-content { width: min(700px, 100%); border-radius: 16px; border: 1px solid var(--border); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.form { padding: 12px 16px 16px; display: grid; gap: 12px; }
.form-row { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.form-row .full { grid-column: 1 / -1; }
/* 让每个单元内的标签与输入横向排列，更整齐 */
.form-row label { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; }
.form-row label > input,
.form-row label > select,
.form-row label > textarea { width: 100%; }
.form-row label.full { grid-template-columns: 84px 1fr; }
.form-footer { display: flex; align-items: center; gap: 8px; }
.switch { display: inline-flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }

@media (max-width: 720px) {
  .form-row { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; align-items: stretch; position: static; }
  /* 小屏下标签与输入改为纵向堆叠，避免拥挤 */
  .form-row label, .form-row label.full { grid-template-columns: 1fr; }
}

.detail-grid { display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px; }
.detail-grid dt { color: var(--muted); }
.detail-grid dd { margin: 0; }
/* 详情页中的链接样式 */
.detail-grid a { color: var(--primary); text-decoration: underline; }

.reminder-flag { padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: 12px; }

/* adjust meta layout to avoid squeezing */
.card .meta { justify-content: flex-start; }
#detailModal .form { border-top: 1px solid var(--border); }
#detailModal .form-footer { border-top: 1px solid var(--border); padding-top: 12px; }

@media (max-width: 560px){
  #detailModal .detail-grid { grid-template-columns: 84px 1fr; }
}

/* 让详情面板支持订阅主色作为强调色 */
#detailModal .modal-content { --accent: var(--primary); }
#detailModal .modal-content[data-color] { --accent: attr(data-color color, var(--primary)); }
#detailModal .tag-chip { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
#detailModal .status-pill.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: color-mix(in srgb, var(--success) 12%, transparent); }
#detailModal .status-pill.upcoming { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 12%, transparent); }
#detailModal .status-pill.overdue { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: color-mix(in srgb, var(--danger) 12%, transparent); }
#detailModal .status-pill.inactive { color: var(--muted); }
.reminder-flag { padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: 12px; }

/* adjust meta layout to avoid squeezing */
.card .meta { justify-content: flex-start; }

/* Price inline element shows alongside action buttons; wraps on small screens */
.price-inline { order: 4; margin-left: 8px; color: var(--muted); font-weight: 600; white-space: nowrap; }
#todayInfo { margin-left: 12px; font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--primary) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); white-space: nowrap; flex-wrap: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
#todayInfo .date { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
#todayInfo .holiday { color: var(--primary); background: transparent; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
#todayInfo .sep { opacity: .35; }
/* 移除小屏强制换行，保持单行。可按需再加自适应规则 */
@media (max-width: 640px){
  #todayInfo { width: 100%; margin-left: 0; order: 2; }
}
@media (max-width: 640px){
  .price-inline { flex: 1 1 100%; margin-left: 0; margin-top: 4px; }
}

/* Hide legacy block price to avoid layout interference */
.price { display: none; }

/* header operations area: actions + price inline group */
.head-ops { order: 3; display: inline-flex; align-items: center; gap: 8px; margin-left: 0; }
.head-ops .card-actions { order: 1; display: inline-flex; gap: 6px; }
.head-ops .price-inline { order: 2; color: var(--muted); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px){
  .head-ops { width: 100%; flex-wrap: wrap; }
  .head-ops .price-inline { flex: 1 1 100%; }
}

/* Detail modal polish */
#detailModal .modal-content { border-radius: 16px; border: 1px solid var(--border); }
#detailModal .modal-header { border-bottom: 1px solid var(--border); }
#detailModal .detail-grid { align-items: center; }
#detailModal .detail-grid dd { display: flex; align-items: center; gap: 8px; }
#detailModal .tag-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border)); color: var(--text); font-size: 12px; }
#detailModal .detail-grid a { color: var(--primary); text-decoration: underline; }
/* Detail extra info: progress & cost */
#detailModal .detail-grid dt {
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
  padding-bottom: 6px;
}
#detailModal .detail-grid dd {
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
  padding-bottom: 6px;
}
#detailModal .detail-grid dt:nth-last-child(-n+2),
#detailModal .detail-grid dd:nth-last-child(-n+2) {
  border-bottom: none;
}
#detailModal .progress-wrap { display: grid; gap: 8px; width: 100%; }
/* Baseline linear progress bar */
#detailModal .progress { position: relative; height: 12px; background: color-mix(in srgb, var(--text) 10%, var(--panel)); border: 0; border-radius: 999px; overflow: hidden; padding-right: 0; }
#detailModal .progress .bar { height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--success) 92%, #16a34a), color-mix(in srgb, var(--success) 78%, #22c55e)); border-radius: inherit; transition: width .25s ease; }
/* Remove in-bar label and right remaining pill */
#detailModal .progress-label, #detailModal .progress-remaining { display: none; }
#detailModal .progress-text { display: none; }
/* Meta row below: left text + right percentage */
#detailModal .progress-meta { display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-top: 4px; }
#detailModal .progress-meta .meta-left { color: var(--muted); }
#detailModal .progress-meta .meta-right { color: var(--text); font-weight: 600; }
/* centered label inside the progress bar */
#detailModal .progress-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text); mix-blend-mode: difference; pointer-events: none; }
/* Hide the legacy below-bar progress text */
#detailModal .progress-text { display: none; }
/* 右侧剩余天数标签样式与空间预留 */
#detailModal .progress-remaining { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); background: color-mix(in srgb, var(--panel) 70%, transparent); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); pointer-events: none; }

/* Detail tags use the same style as card tags */
#detailModal .detail-grid dd .tag { font-size: 12px; color: var(--primary); background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.25); padding: 2px 6px; border-radius: 999px; }
#detailModal .detail-grid dd .tag + .tag { margin-left: 6px; }

/* subtle card-like panel separation inside modal */
#detailModal .form-footer { border-top: 1px solid var(--border); }
#detailModal .form { border-top: 1px solid var(--border); }
#detailModal .form-footer { border-top: 1px solid var(--border); padding-top: 12px; }

@media (max-width: 560px){
  #detailModal .detail-grid { grid-template-columns: 84px 1fr; }
}

/* 让详情面板支持订阅主色作为强调色 */
#detailModal .modal-content { --accent: var(--primary); }
#detailModal .modal-content[data-color] { --accent: attr(data-color color, var(--primary)); }
#detailModal .tag-chip { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
#detailModal .status-pill.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: color-mix(in srgb, var(--success) 12%, transparent); }
#detailModal .status-pill.upcoming { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 12%, transparent); }
#detailModal .status-pill.overdue { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: color-mix(in srgb, var(--danger) 12%, transparent); }
#detailModal .status-pill.inactive { color: var(--muted); }
.reminder-flag { padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: 12px; }

/* adjust meta layout to avoid squeezing */
.card .meta { justify-content: flex-start; }

/* Price inline element shows alongside action buttons; wraps on small screens */
.price-inline { order: 4; margin-left: 8px; color: var(--muted); font-weight: 600; white-space: nowrap; }
#todayInfo { margin-left: 12px; font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--primary) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); white-space: nowrap; flex-wrap: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
#todayInfo .date { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
#todayInfo .holiday { color: var(--primary); background: transparent; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
#todayInfo .sep { opacity: .35; }
/* 移除小屏强制换行，保持单行。可按需再加自适应规则 */
@media (max-width: 640px){
  #todayInfo { width: 100%; margin-left: 0; order: 2; }
}
@media (max-width: 640px){
  .price-inline { flex: 1 1 100%; margin-left: 0; margin-top: 4px; }
}

/* Hide legacy block price to avoid layout interference */
.price { display: none; }

/* header operations area: actions + price inline group */
.head-ops { order: 3; display: inline-flex; align-items: center; gap: 8px; margin-left: 0; }
.head-ops .card-actions { order: 1; display: inline-flex; gap: 6px; }
.head-ops .price-inline { order: 2; color: var(--muted); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px){
  .head-ops { width: 100%; flex-wrap: wrap; }
  .head-ops .price-inline { flex: 1 1 100%; }
}

/* 拖拽排序指示：卡片空白处为抓手 */
.card { cursor: grab; }
.card:active { cursor: grabbing; }
/* 按钮区域保持默认光标，避免误导 */
.card .icon-btn { cursor: pointer; }
/* 拖拽中的临时样式 */
.card.dragging { opacity: .8; outline: 2px dashed color-mix(in srgb, var(--primary) 40%, var(--border)); }
/* 拖拽中的卡片：不要半透明，仅保留虚线轮廓做区分 */
.card.dragging { opacity: 1; outline: 2px dashed color-mix(in srgb, var(--primary) 40%, var(--border)); }
/* 拖拽交互：进行中禁用文本选择并显示抓手光标 */
body.dnd-active { user-select: none; cursor: grabbing; }
/* 插入位置提示线样式微调：更清晰的竖线，避免溢出 */
.card.drop-before::before, .card.drop-after::after {
  content: "";
  position: absolute;
  top: 4px; bottom: 4px;
  width: 6px;
  background: color-mix(in srgb, var(--primary) 85%, #7c3aed);
  border-radius: 6px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
  z-index: 3;
  pointer-events: none;
}
.card.drop-before::before { left: -2px; }
.card.drop-after::after { right: -2px; }
.card .bar { height: 6px; background: var(--primary); }
/* header rows: row1 avatar+name, row2 tags+actions */
.card-header { display: flex; flex-wrap: wrap; align-items: center; }
/* tighten header spacing and avatar size */
.avatar { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(120deg, rgba(124,58,237,.25), rgba(124,58,237,.05)); border: 1px dashed var(--border); }
.card-header { padding: 12px 12px 4px; gap: 10px; }
.name { line-height: 1.2; }
.card-actions { gap: 4px; }
.card-body { padding: 0 12px 12px; gap: 8px; }
.price { font-size: 17px; }
.meta { font-size: 12.5px; gap: 6px 8px; }
.notes { -webkit-line-clamp: 2; }
/* allow 4 columns on typical 1440px viewport while keeping readability */
.grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* header rows: row1 avatar+name, row2 tags+actions */
.title-area { display: contents; }
.name { order: 1; flex: 1 1 auto; min-width: 0; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; white-space: normal; }
.tags { order: 2; margin-left: auto; align-self: center; margin-top: 0; }
.tags .tag { margin-left: 0; }
.tags .tag { font-size: 12px; color: var(--primary); background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.25); padding: 2px 6px; border-radius: 999px; }
/* reflow: place actions on same row as tags and align right */
/* 让操作按钮左对齐 */
.card-actions { display: flex; gap: 6px; order: 3; width: auto; margin-left: 0; justify-content: flex-start; }

/* 悬停提示基础样式：读取 data-tip 显示 */
.icon-btn[data-tip] { position: relative; }
.icon-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: 100%;
  transform: translateY(6px);
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: var(--shadow);
  z-index: 5;
}

/* 头像支持 emoji：用伪元素承载图标 */
.avatar { position: relative; display: grid; place-items: center; overflow: hidden; }
.avatar::after { content: var(--emoji, ""); font-size: 18px; }

/* 备注半透明背景，主色调来自卡片条色 */
.card .notes { position: relative; padding: 8px 10px; border-radius: 10px; }
.card { --accent: var(--primary); }
.card .bar { background: var(--accent); }
.card[data-color] { --accent: attr(data-color color, var(--primary)); }
.card .notes { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.card-body { padding: 0 14px 14px; display: grid; gap: 10px; }
.price { font-weight: 700; font-size: 18px; }
/* Let meta be two rows: first row is renew (full width); second row shows status and reminders */
.meta { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--muted); font-size: 13px; align-items: center; }
.meta .renew { flex: 1 1 100%; display: block; }
.status-pill { padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); }
/* clamp notes to two lines for cleaner look */
.notes { 
  color: var(--muted); 
  margin: 0; 
  overflow: hidden; 
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  height: 2.4em;
  line-height: 1.2;
  position: relative;
  font-size: 13px;
}

.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.4); padding: 24px; }
.modal.hidden { display: none; }
#detailModal .modal-content { width: min(700px, 100%); border-radius: 16px; border: 1px solid var(--border); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.form { padding: 12px 16px 16px; display: grid; gap: 12px; }
.form-row { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.form-row .full { grid-column: 1 / -1; }
/* 让每个单元内的标签与输入横向排列，更整齐 */
.form-row label { display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 8px; }
.form-row label > input,
.form-row label > select,
.form-row label > textarea { width: 100%; }
.form-row label.full { grid-template-columns: 84px 1fr; }
.form-footer { display: flex; align-items: center; gap: 8px; }
.switch { display: inline-flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }

@media (max-width: 720px) {
  .form-row { grid-template-columns: 1fr; }
  .toolbar { flex-direction: column; align-items: stretch; position: static; }
  /* 小屏下标签与输入改为纵向堆叠，避免拥挤 */
  .form-row label, .form-row label.full { grid-template-columns: 1fr; }
}

.detail-grid { display: grid; grid-template-columns: 100px 1fr; gap: 8px 12px; }
.detail-grid dt { color: var(--muted); }
.detail-grid dd { margin: 0; }
/* 详情页中的链接样式 */
.detail-grid a { color: var(--primary); text-decoration: underline; }

.reminder-flag { padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: 12px; }

/* adjust meta layout to avoid squeezing */
.card .meta { justify-content: flex-start; }
#detailModal .form { border-top: 1px solid var(--border); }
#detailModal .form-footer { border-top: 1px solid var(--border); padding-top: 12px; }

@media (max-width: 560px){
  #detailModal .detail-grid { grid-template-columns: 84px 1fr; }
}

/* 让详情面板支持订阅主色作为强调色 */
#detailModal .modal-content { --accent: var(--primary); }
#detailModal .modal-content[data-color] { --accent: attr(data-color color, var(--primary)); }
#detailModal .tag-chip { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
#detailModal .status-pill.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: color-mix(in srgb, var(--success) 12%, transparent); }
#detailModal .status-pill.upcoming { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 12%, transparent); }
#detailModal .status-pill.overdue { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: color-mix(in srgb, var(--danger) 12%, transparent); }
#detailModal .status-pill.inactive { color: var(--muted); }
.reminder-flag { padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: 12px; }

/* adjust meta layout to avoid squeezing */
.card .meta { justify-content: flex-start; }

/* Price inline element shows alongside action buttons; wraps on small screens */
.price-inline { order: 4; margin-left: 8px; color: var(--muted); font-weight: 600; white-space: nowrap; }
#todayInfo { margin-left: 12px; font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--primary) 6%, transparent)); border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border)); white-space: nowrap; flex-wrap: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
#todayInfo .date { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
#todayInfo .holiday { color: var(--primary); background: transparent; border: 0; padding: 0; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
#todayInfo .sep { opacity: .35; }
/* 移除小屏强制换行，保持单行。可按需再加自适应规则 */
@media (max-width: 640px){
  #todayInfo { width: 100%; margin-left: 0; order: 2; }
}
@media (max-width: 640px){
  .price-inline { flex: 1 1 100%; margin-left: 0; margin-top: 4px; }
}

/* Hide legacy block price to avoid layout interference */
.price { display: none; }

/* header operations area: actions + price inline group */
.head-ops { order: 3; display: inline-flex; align-items: center; gap: 8px; margin-left: 0; }
.head-ops .card-actions { order: 1; display: inline-flex; gap: 6px; }
.head-ops .price-inline { order: 2; color: var(--muted); font-weight: 600; white-space: nowrap; }
@media (max-width: 640px){
  .head-ops { width: 100%; flex-wrap: wrap; }
  .head-ops .price-inline { flex: 1 1 100%; }
}

/* Detail modal polish */
#detailModal .modal-content { border-radius: 16px; border: 1px solid var(--border); }
#detailModal .modal-header { border-bottom: 1px solid var(--border); }
#detailModal .detail-grid { align-items: center; }
#detailModal .detail-grid dd { display: flex; align-items: center; gap: 8px; }
#detailModal .tag-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 12%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 40%, var(--border)); color: var(--text); font-size: 12px; }
#detailModal .detail-grid a { color: var(--primary); text-decoration: underline; }
/* Detail extra info: progress & cost */
#detailModal .detail-grid dt {
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
  padding-bottom: 6px;
}
#detailModal .detail-grid dd {
  border-bottom: 1px dashed color-mix(in srgb, var(--border) 70%, transparent);
  padding-bottom: 6px;
}
#detailModal .detail-grid dt:nth-last-child(-n+2),
#detailModal .detail-grid dd:nth-last-child(-n+2) {
  border-bottom: none;
}
#detailModal .progress-wrap { display: grid; gap: 8px; width: 100%; }
/* Baseline linear progress bar */
#detailModal .progress { position: relative; height: 12px; background: color-mix(in srgb, var(--text) 10%, var(--panel)); border: 0; border-radius: 999px; overflow: hidden; padding-right: 0; }
#detailModal .progress .bar { height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--success) 92%, #16a34a), color-mix(in srgb, var(--success) 78%, #22c55e)); border-radius: inherit; transition: width .25s ease; }
/* Remove in-bar label and right remaining pill */
#detailModal .progress-label, #detailModal .progress-remaining { display: none; }
#detailModal .progress-text { display: none; }
/* Meta row below: left text + right percentage */
#detailModal .progress-meta { display: flex; align-items: center; justify-content: space-between; font-size: 14px; margin-top: 4px; }
#detailModal .progress-meta .meta-left { color: var(--muted); }
#detailModal .progress-meta .meta-right { color: var(--text); font-weight: 600; }
/* centered label inside the progress bar */
#detailModal .progress-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text); mix-blend-mode: difference; pointer-events: none; }
/* Hide the legacy below-bar progress text */
#detailModal .progress-text { display: none; }
/* 右侧剩余天数标签样式与空间预留 */
#detailModal .progress-remaining { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); background: color-mix(in srgb, var(--panel) 70%, transparent); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); pointer-events: none; }

/* Detail tags use the same style as card tags */
#detailModal .detail-grid dd .tag { font-size: 12px; color: var(--primary); background: rgba(124,58,237,.12); border: 1px solid rgba(124,58,237,.25); padding: 2px 6px; border-radius: 999px; }
#detailModal .detail-grid dd .tag + .tag { margin-left: 6px; }

/* subtle card-like panel separation inside modal */
#detailModal .form-footer { border-top: 1px solid var(--border); }
#detailModal .form { border-top: 1px solid var(--border); }
#detailModal .form-footer { border-top: 1px solid var(--border); padding-top: 12px; }

@media (max-width: 560px){
  #detailModal .detail-grid { grid-template-columns: 84px 1fr; }
}

/* 让详情面板支持订阅主色作为强调色 */
#detailModal .modal-content { --accent: var(--primary); }
#detailModal .modal-content[data-color] { --accent: attr(data-color color, var(--primary)); }
#detailModal .tag-chip { background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
#detailModal .status-pill.ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, var(--border)); background: color-mix(in srgb, var(--success) 12%, transparent); }
#detailModal .status-pill.upcoming { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 12%, transparent); }
#detailModal .status-pill.overdue { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); background: color-mix(in srgb, var(--danger) 12%, transparent); }
#detailModal .status-pill.inactive { color: var(--muted); }
.reminder-flag { padding: 2px 8px; border-radius: 999px; border: 1px dashed var(--warn); color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); font-size: 12px; }

/* Ultimate final override for .notes */
.notes {
  color: var(--muted);
  margin: 0;
  overflow: hidden;
  display: block;
  font-size: 15px;
  line-height: 32px;
  height: 32px;
  max-height: 32px;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
  padding: 0 8px;
  width: 100%;
  box-sizing: border-box;
}

/* 背景切换功能样式 */
.background-panel {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 200px;
}

.background-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.background-option {
  width: 32px;
  height: 32px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: all 0.2s ease;
}

.background-option:hover {
  transform: scale(1.1);
  border-color: var(--primary);
}

.background-option.active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-light);
}

.bg-preview {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

/* 5种不同的SVG背景样式 */
/* 1. 默认背景 */
body[data-background="default"] {
  background: var(--bg);
}

.bg-default {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 2. 渐变背景 */
body[data-background="gradient"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bg-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* 3. 圆点背景 */
body[data-background="dots"] {
  background-color: #1a1a2e;
  background-image: radial-gradient(circle, #16213e 1px, transparent 1px);
  background-size: 20px 20px;
}

.bg-dots {
  background-color: #1a1a2e;
  background-image: radial-gradient(circle, #16213e 1px, transparent 1px);
  background-size: 8px 8px;
}

/* 4. 波浪背景 */
body[data-background="waves"] {
  background-color: #0f4c75;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%233282b8' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-10 0v9h-9v-9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bg-waves {
  background-color: #0f4c75;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='%233282b8' fill-opacity='0.4'%3E%3Cpath d='M20 20c0 11.046-8.954 20-20 20v20h40V20c0-11.046-8.954-20-20-20z'/%3E%3C/g%3E%3C/svg%3E");
}

/* 5. 几何背景 */
body[data-background="geometric"] {
  background-color: #2c1810;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23a0522d' fill-opacity='0.4'%3E%3Cpolygon points='36 34 6 34 6 4 36 4'/%3E%3Cpolygon points='18 24 12 24 12 18 18 18'/%3E%3Cpolygon points='30 24 24 24 24 18 30 18'/%3E%3Cpolygon points='18 12 12 12 12 6 18 6'/%3E%3Cpolygon points='30 12 24 12 24 6 30 6'/%3E%3Cpolygon points='60 34 30 34 30 4 60 4'/%3E%3Cpolygon points='42 24 36 24 36 18 42 18'/%3E%3Cpolygon points='54 24 48 24 48 18 54 18'/%3E%3Cpolygon points='42 12 36 12 36 6 42 6'/%3E%3Cpolygon points='54 12 48 12 48 6 54 6'/%3E%3Cpolygon points='36 64 6 64 6 34 36 34'/%3E%3Cpolygon points='18 54 12 54 12 48 18 48'/%3E%3Cpolygon points='30 54 24 54 24 48 30 48'/%3E%3Cpolygon points='18 42 12 42 12 36 18 36'/%3E%3Cpolygon points='30 42 24 42 24 36 30 36'/%3E%3Cpolygon points='60 64 30 64 30 34 60 34'/%3E%3Cpolygon points='42 54 36 54 36 48 42 48'/%3E%3Cpolygon points='54 54 48 54 48 48 54 48'/%3E%3Cpolygon points='42 42 36 42 36 36 42 36'/%3E%3Cpolygon points='54 42 48 42 48 36 54 36'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.bg-geometric {
  background-color: #2c1810;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='%23a0522d' fill-opacity='0.4'%3E%3Cpolygon points='12 11 2 11 2 1 12 1'/%3E%3Cpolygon points='6 8 4 8 4 6 6 6'/%3E%3Cpolygon points='10 8 8 8 8 6 10 6'/%3E%3C/g%3E%3C/svg%3E");
}

/* 确保 header 有相对定位，以便背景面板正确定位 */
.app-header {
  position: relative;
}

/* 背景面板的响应式调整 */
@media (max-width: 768px) {
  .background-panel {
    right: -12px;
    min-width: 180px;
  }
  
  .background-options {
    gap: 6px;
  }
  
  .background-option {
    width: 28px;
    height: 28px;
  }
}

/* === Diff Checker Styles === */
.diff-checker {
  padding: 16px;
  /* 取消最大宽度限制，使其与其他页面保持一致 */
  max-width: none;
  /* 去除左右自动外边距，左对齐内容 */
  margin: 0;
}

.diff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.diff-title {
  margin: 0;
  font-size: 20px;
  color: var(--text);
}

.diff-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.diff-count-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.diff-count-control label {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.diff-count-control select {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
}

.diff-container {
  display: grid;
  gap: 16px;
  margin-bottom: 24px;
}

.diff-text-group {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow);
  position: relative;
}

.diff-text-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 12px 12px 0 0;
  background: var(--text-color, var(--primary));
}

.diff-text-group[data-color="0"]::before { background: #3b82f6; }
.diff-text-group[data-color="1"]::before { background: #10b981; }
.diff-text-group[data-color="2"]::before { background: #f59e0b; }
.diff-text-group[data-color="3"]::before { background: #ef4444; }
.diff-text-group[data-color="4"]::before { background: #8b5cf6; }

.diff-text-group[data-color="0"] .diff-text-title::before { content: '🔵 '; }
.diff-text-group[data-color="1"] .diff-text-title::before { content: '🟢 '; }
.diff-text-group[data-color="2"] .diff-text-title::before { content: '🟡 '; }
.diff-text-group[data-color="3"] .diff-text-title::before { content: '🔴 '; }
.diff-text-group[data-color="4"] .diff-text-title::before { content: '🟣 '; }

.diff-text-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.diff-text-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.diff-text-actions {
  display: flex;
  gap: 8px;
}

.diff-text-actions button {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}

.diff-text-actions button:hover {
  background: var(--panel-2);
  border-color: var(--primary);
}

.diff-textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px 68px 12px 52px; /* 左为行号，右为提示列预留空间 */
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s ease;
  position: relative;
  background-image: 
    linear-gradient(to right, transparent 40px, var(--border) 40px, var(--border) 41px, transparent 41px),
    repeating-linear-gradient(
      transparent,
      transparent calc(1.5em - 1px),
      var(--border) calc(1.5em - 1px),
      var(--border) 1.5em
    );
  background-size: 100% 100%, 100% 1.5em;
  background-position: 0 0, 0 0; /* 第二层从内容盒子起点开始 */
  background-repeat: no-repeat, repeat;
  /* 关键：让第二个背景随内容滚动，并以内容盒子为参考，从而与文本行对齐 */
  background-attachment: scroll, local;
  background-origin: padding-box, content-box;
  background-clip: padding-box, content-box;
}

/* 新增：右侧提示列样式，参照行号风格 */
.diff-text-group .line-hints {
  position: absolute;
  width: 56px; /* 比行号稍宽，放置提示文案/图标 */
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-align: left; /* 文案靠左 */
  padding-left: 8px;
  pointer-events: none;
  z-index: 2;
  user-select: none;
}

/* 提示字号与颜色 */
.diff-text-group .line-hints .hint {
  display: inline-block;
  min-width: 32px;
  color: var(--muted);
}
.diff-text-group .line-hints .hint-changed {
  color: var(--danger);
  font-weight: 600;
}

/* === Moonly Records Refinements 2024-06-xx === */
.moonly-records-layout .date-item:hover{background:var(--bg-secondary);}

/* Colored statistic chips */
.moonly-records-toolbar .stat-item{height:36px;display:flex;align-items:center;padding:0 16px;font-size:14px;border-radius:12px;color:#fff;font-weight:600}
.moonly-records-toolbar .stat-item.total{background:linear-gradient(135deg,#ec4899 0%,#db2777 100%);}
.moonly-records-toolbar .stat-item.period{background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);}
.moonly-records-toolbar .stat-item.symptoms{background:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%);}

/* Notes area */
.notes-content{width:100%;white-space:pre-wrap;word-break:break-word;}

/* Detail action buttons */
.detail-actions{display:flex;gap:12px;margin-top:20px;}
.detail-actions .btn{flex:1;padding:10px 0;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s;color:#fff;}
.detail-actions .edit-record{background:linear-gradient(135deg,#3b82f6 0%,#6366f1 100%);}
.detail-actions .delete-record{background:linear-gradient(135deg,#f43f5e 0%,#be123c 100%);}
.detail-actions .btn:hover{opacity:.9;}

/* === Moonly Records Toolbar Position Tweaks === */
.moonly-records-toolbar .stats-bar{display:flex;gap:12px;position:relative;top:5px;left:12px;padding-top:6px;padding-bottom:3px;}

.moonly-records-toolbar .stat-item{color:#fff;padding:4px 12px;border-radius:12px;font-size:14px;font-weight:600;}

#moonlySearchInput{border:1px solid var(--border);border-radius:8px;font-size:14px;width:220px;position:relative;top:5px;right:12px;}

#moonlyFilterSelect{border:1px solid var(--border);border-radius:8px;font-size:14px;position:relative;top:5px;right:12px;}

#moonlyDateDetail{flex:1;padding:25px;overflow-y:auto;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);position:relative;right:12px;}


.diff-text-group::after {
  content: '';
  position: absolute;
  left: 16px;
  top: var(--text-start, 102px); /* 由 JS 动态设置为 textarea 的实际起点 */
  bottom: 16px;
  width: 40px;
  background: var(--panel);
  pointer-events: none;
  z-index: 1;
}

.diff-text-group .line-numbers {
  position: absolute;
  /* left 由 JS 动态设置为紧贴 textarea 左边框，保证始终在文本框内 */
  width: 40px;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-align: right;
  padding-right: 8px;
  pointer-events: none;
  z-index: 2;
  user-select: none;
}

.diff-textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.diff-textarea::placeholder {
  color: var(--muted);
}

.diff-result {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.diff-result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.diff-result-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text);
}

.diff-result-content {
  padding: 16px 16px 16px 74px; /* 为更宽的行号区域留出足够空间 */
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden; /* 禁止水平方向溢出，强制在容器内换行 */
}

.diff-line {
  display: block;
  padding: 2px 8px;
  margin: 1px 0;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-size: 13px;
  line-height: 1.4;
  white-space: pre-wrap; /* 保留空白并允许换行 */
  overflow-wrap: anywhere; /* 长URL/连续字符串在任意位置断行，避免超出红框 */
  word-break: break-word; /* Safari/旧浏览器兼容：在单词边界断行 */
  border-radius: 4px;
  position: relative;
}

.diff-line::before {
  content: attr(data-line);
  position: absolute;
  left: -58px;
  width: 50px;
  text-align: right;
  color: var(--muted);
  font-size: 11px;
  opacity: 0.7;
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  font-weight: normal;
  letter-spacing: 0;
}

.diff-line.added {
  background: color-mix(in srgb, #22c55e 15%, transparent);
  border-left: 3px solid #22c55e;
}

.diff-line.removed {
  background: color-mix(in srgb, #ef4444 15%, transparent);
  border-left: 3px solid #ef4444;
}

.diff-line.modified {
  background: color-mix(in srgb, #f59e0b 15%, transparent);
  border-left: 3px solid #f59e0b;
}

.diff-line.unchanged {
  color: var(--muted);
}

/* 为不同文本框的差异添加颜色标记 */
.diff-line[data-source="0"].added { border-left-color: #3b82f6; background: color-mix(in srgb, #3b82f6 15%, transparent); }
.diff-line[data-source="0"].removed { border-left-color: #3b82f6; background: color-mix(in srgb, #3b82f6 15%, transparent); }
.diff-line[data-source="0"].modified { border-left-color: #3b82f6; background: color-mix(in srgb, #3b82f6 15%, transparent); }

.diff-line[data-source="1"].added { border-left-color: #10b981; background: color-mix(in srgb, #10b981 15%, transparent); }
.diff-line[data-source="1"].removed { border-left-color: #10b981; background: color-mix(in srgb, #10b981 15%, transparent); }
.diff-line[data-source="1"].modified { border-left-color: #10b981; background: color-mix(in srgb, #10b981 15%, transparent); }

.diff-line[data-source="2"].added { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 15%, transparent); }
.diff-line[data-source="2"].removed { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 15%, transparent); }
.diff-line[data-source="2"].modified { border-left-color: #f59e0b; background: color-mix(in srgb, #f59e0b 15%, transparent); }

.diff-line[data-source="3"].added { border-left-color: #ef4444; background: color-mix(in srgb, #ef4444 15%, transparent); }
.diff-line[data-source="3"].removed { border-left-color: #ef4444; background: color-mix(in srgb, #ef4444 15%, transparent); }
.diff-line[data-source="3"].modified { border-left-color: #ef4444; background: color-mix(in srgb, #ef4444 15%, transparent); }

.diff-line[data-source="4"].added { border-left-color: #8b5cf6; background: color-mix(in srgb, #8b5cf6 15%, transparent); }
.diff-line[data-source="4"].removed { border-left-color: #8b5cf6; background: color-mix(in srgb, #8b5cf6 15%, transparent); }
.diff-line[data-source="4"].modified { border-left-color: #8b5cf6; background: color-mix(in srgb, #8b5cf6 15%, transparent); }

.diff-file-drop {
  border: 2px dashed var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
  color: var(--muted);
  transition: all 0.2s ease;
  cursor: pointer;
}

.diff-file-drop:hover,
.diff-file-drop.drag-over {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 5%, transparent);
  color: var(--primary);
}

.diff-file-drop-text {
  font-size: 14px;
  margin-bottom: 8px;
}

.diff-file-drop-hint {
  font-size: 12px;
  color: var(--muted);
}

/* 响应式布局 */
@media (min-width: 768px) {
  .diff-container.two-column {
    grid-template-columns: 1fr 1fr;
  }
  
  .diff-container.three-column {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .diff-container.four-column {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .diff-container.five-column {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .diff-header {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  
  .diff-controls {
    justify-content: space-between;
  }
  
  .diff-container {
    grid-template-columns: 1fr !important;
  }
}

/* Divider for toolbars */
.divider {
  display: inline-block;
  width:1px;
  height:20px;
  margin:0 8px;
  background:var(--border-color, #d1d5db);
  vertical-align:middle;
}

/* Emphasis dangerous buttons */
.btn.danger {
  color:#fff;
  background:#ef4444;
  border-color:#ef4444;
}
.btn.danger:hover {
  background:#dc2626;
  border-color:#dc2626;
}

/* Sticky Note 样式 */
.sn-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; }
.sn-tabs { display:flex; gap:8px; flex-wrap:wrap; }

/* 便签标签按钮样式 */
.sn-tab {
  padding: 6px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s ease;
}
.sn-tab:hover {
  background: var(--card);
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.sn-tab.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.sn-ops { display:flex; gap:8px; }

.sn-board { position: relative; min-height: 240px; border: 1px dashed var(--border); border-radius: 12px; padding: 12px; background: color-mix(in srgb, var(--panel) 92%, transparent); }
.sn-note { position: absolute; left: 40px; top: 40px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: visible; }
.sn-note .sn-body{ border-radius:8px; }
.sn-note.locked{ border: 3px solid var(--accent, var(--primary)); }
.sn-header { display:flex; align-items:center; gap:8px; padding:8px 10px; position:relative; cursor: grab; }
.sn-title { flex:1; margin:0 8px; background:transparent; border:1px solid var(--border); border-radius:8px; outline:none; color: var(--text); font-size:14px; font-weight:600; padding:6px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; box-sizing:border-box; }
.sn-actions { display:flex; gap:6px; margin-left:auto; flex-shrink:0; }
.sn-color { position:relative; z-index:2; flex-shrink:0; width:18px; height:18px; border-radius:50%; background: var(--accent, var(--primary)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent, var(--primary)) 60%, var(--panel)); cursor:pointer; }
.sn-note.active .sn-color { z-index: 16; }
.sn-color:hover { filter: brightness(1.08); }
.sn-color-panel { position:absolute; bottom:100%; left:0; transform: translateY(-8px); display:flex; gap:8px; padding:8px; background: var(--panel); border:1px solid var(--border); border-radius:10px; box-shadow: var(--shadow); z-index:30; }
.sn-color-option { width:20px; height:20px; border-radius:50%; box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); cursor: pointer; }
.sn-body { width:calc(100% - 24px); height:calc(100% - 66px); border:none; outline:none; background: var(--accent, #fde68a) !important; margin:8px 12px; border-radius:8px; padding:8px; font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; font-size:13px; line-height:1.5; resize: none; }
.sn-drag-left, .sn-drag-right, .sn-drag-bottom { position:absolute; background: transparent; }
.sn-drag-left { left:0; top:30px; bottom:12px; width:10px; cursor: move; }
.sn-drag-right { right:0; top:30px; bottom:12px; width:10px; cursor: move; }
.sn-drag-bottom { left:10px; right:10px; bottom:0; height:10px; cursor: grab; display: none; /* 隐藏底部拖拽，只保留右下角调整大小 */ }
.sn-note.dragging, .sn-header:active { cursor: grabbing; }
.sn-resize { position:absolute; right:4px; bottom:4px; width:12px; height:12px; border-right:2px solid var(--border); border-bottom:2px solid var(--border); border-radius:2px; cursor:nwse-resize; pointer-events:auto; }
.sn-note.active { box-shadow: 0 12px 28px rgba(0,0,0,.35); }

/* Sticky Note 视图对齐与间距 */
#stickyNoteView { padding: 16px; }
#stickyNoteView .panel-body { padding-bottom: 16px; }

/* 非编辑区域避免文本选择与插入光标 */
.sn-note, .sn-header, .sn-drag-left, .sn-drag-right, .sn-drag-bottom, .sn-resize { user-select: none; caret-color: transparent; }
.sn-title, .sn-body { user-select: text; caret-color: auto; }

/* 便签回收站样式 */
.recycle-bin-search {
  position: relative;
  margin-bottom: 16px;
}

.recycle-bin-search .search-input {
  width: 100%;
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.recycle-bin-search .search-input:focus {
  border-color: var(--primary);
}

.recycle-bin-search .clear-search-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: color 0.2s, background-color 0.2s;
}

.recycle-bin-search .clear-search-btn:hover {
  color: var(--text);
  background: var(--border);
}

.recycle-bin-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 16px 0;
}

.recycle-bin-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  border-left: 4px solid var(--accent, var(--border));
  transition: background-color 0.2s;
}

.recycle-bin-item-color {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.recycle-bin-item:hover {
  background: var(--card);
}

.recycle-bin-item-info {
  flex: 1;
  min-width: 0;
}

.recycle-bin-item-title {
  font-weight: 500;
  margin-bottom: 4px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recycle-bin-item-content {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recycle-bin-item-date {
  font-size: 12px;
  color: var(--muted);
}

.recycle-bin-item-actions {
  display: flex;
  gap: 8px;
  margin-left: 12px;
}

.recycle-bin-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 14px;
}

/* 便签类型选择弹窗样式 */
.type-selection-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}

.type-option {
  display: flex;
  align-items: center;
  padding: 20px;
  background: var(--panel-2);
  border: 2px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.type-option:hover {
  background: var(--card);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.type-option.selected {
  background: var(--accent-bg);
  border-color: var(--accent);
}

.type-icon {
  font-size: 32px;
  margin-right: 16px;
  flex-shrink: 0;
}

.type-info {
  flex: 1;
  min-width: 0;
}

.type-info h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}

.type-info p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

.type-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.type-badge.default {
  background: var(--accent-bg);
  color: var(--accent);
}

.type-badge.special {
  background: #e8f5e8;
  color: #2d5a2d;
}

/* 模板类型便签特殊样式 */
.sn-note.template-type {
  border: 2px solid #4ade80;
  box-shadow: 0 2px 8px rgba(74, 222, 128, 0.2);
}

.sn-note.template-type .sn-note-head {
  display: none;
}

.sn-note.template-type .sn-note-body {
  padding: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sn-note.template-type .sn-note-text {
  flex: 1;
  border: none;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  outline: none;
  padding: 0;
  margin-bottom: 12px;
}

.sn-note.template-type .template-save-btn {
  align-self: flex-end;
  background: #22c55e;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sn-note.template-type .template-save-btn:hover {
  background: #16a34a;
}

.sn-note.template-type .template-save-btn:active {
  transform: scale(0.98);
}

.sn-note.template-type.saved .sn-note-text {
  cursor: pointer;
  user-select: text;
}

.sn-note.template-type.saved .sn-note-text:hover {
  background: rgba(74, 222, 128, 0.1);
  border-radius: 4px;
}

.sn-note.template-type .copy-feedback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(34, 197, 94, 0.9);
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1000;
}

.sn-note.template-type .copy-feedback.show, .sn-note .copy-feedback.show {
  opacity: 1;
}

/* 复制动画与提示通用 */
@keyframes snCopyAnim {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
  100% { transform: scale(1); }
}
.sn-note.copy-anim {
  animation: snCopyAnim 0.4s ease;
}
.sn-lock { border-radius:6px; padding:4px; transition:background .2s; }
.sn-lock.locked{ background: color-mix(in srgb, var(--accent, var(--primary)) 60%, transparent); }
.sn-lock:not(.locked):hover{ background: var(--panel-2); }

.sn-note .copy-feedback {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(0,0,0,.75);
  color:#fff;
  padding:6px 12px;
  border-radius:6px;
  font-size:13px;
  pointer-events:none;
  opacity:0;
  transition: opacity .3s;
  z-index:1000;
}

/* === 2024-06 UI 间距优化 === */
/* 卡片备注行高与间距 */
.card .notes {
  line-height: 1;
  height: calc(1em * 2);
}
/* 计划标签与标题分隔 */
.tags {
  margin-top: 4px;
}
/* 通用确认弹窗文案排版 */
#confirmModal #confirmMessage {
  font-size: 16px;
  line-height: 1.6;
  padding: 6px 0 10px;
}
#confirmModal .form-footer {
  padding-top: 6px;
}

/* ===== Moonly 经期记录系统样式 ====== */

/* Moonly Records new list-detail layout */
.moonly-records-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:16px}
.moonly-records-toolbar .stats-bar{display:flex;gap:12px}
.moonly-records-toolbar .stat-item{background:var(--pink-100,#fce7f3);color:#fff;padding:4px 12px;border-radius:12px;font-size:14px;font-weight:600}
.moonly-records-toolbar .stat-item span{margin-left:4px;font-weight:700}
.moonly-records-toolbar .tools-bar{display:flex;gap:8px;align-items:center}
#moonlySearchInput{padding:6px 10px;border:1px solid var(--border);border-radius:8px;font-size:14px;width:220px}
#moonlyFilterSelect{padding:6px 10px;border:1px solid var(--border);border-radius:8px;font-size:14px}

/* Reset search alignment & toolbar item height */
.moonly-records-toolbar #moonlySearchInput{position:static;top:auto;right:auto;height:36px;box-sizing:border-box}
.btn-reset-search{padding:0 10px;border:1px solid var(--border);border-radius:8px;font-size:16px;background:var(--bg-secondary);cursor:pointer;height:36px;display:flex;align-items:center;justify-content:center}
#moonlyFilterSelect{height:36px;box-sizing:border-box}

/* Date list max height scroll */
 .moonly-records-layout .date-list{max-height:calc(100vh - 150px);overflow-y:auto}

/* Pagination */
.moonly-records-layout .pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:8px}
.page-btn{padding:4px 8px;border:1px solid var(--border);border-radius:6px;background:var(--bg-secondary);cursor:pointer;font-size:14px}
.page-info{font-size:14px;color:var(--text)}

.moonly-records-layout{display:flex;gap:20px}
.moonly-records-layout .date-list{flex:0 0 280px;overflow-y:auto;background:rgba(255,255,255,0.75);border:1px solid var(--border);border-radius:12px;padding:8px}
.moonly-records-layout .date-item{cursor:pointer;padding:10px;border-radius:10px;margin-bottom:6px;transition:background .2s,border .2s}
.moonly-records-layout .date-item:hover{background:var(--pink-50,#fdf2f8)}
.moonly-records-layout .date-item.active{border:2px solid var(--primary);background:var(--primary-50,#f5f3ff)}
.moonly-records-layout .date-item .date{font-weight:700}
.moonly-records-layout .date-item .summary{font-size:13px;color:var(--text-muted)}

.moonly-records-layout .date-detail{flex:1;overflow-y:auto;background:rgba(255,255,255,0.85);border:1px solid var(--border);border-radius:12px;padding:16px}
.date-detail .detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.date-detail .detail-section{margin-bottom:12px}
.date-detail .detail-section h4{margin:4px 0 6px;font-size:15px;color:var(--text-secondary)}
.date-detail .tags{display:flex;flex-wrap:wrap;gap:6px}
.date-detail .tags .tag{background:var(--primary-50,#f5f3ff);color:var(--primary);padding:2px 8px;border-radius:999px;font-size:13px}
.date-detail .mood{font-size:24px}
.date-detail .notes{white-space:pre-wrap;font-size:14px;line-height:1.5} */

/* Moonly 容器 */
.moonly-container {
  padding: 16px;
}

/* Moonly 页面标题和工具栏 */
.moonly-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}

.moonly-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 28px;
  font-weight: 600;
}

.moonly-toolbar {
  display: flex;
  gap: 12px;
}

/* Moonly 标签页导航 */
.moonly-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.moonly-tabs .tab-btn {
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.moonly-tabs .tab-btn:hover {
  color: var(--text);
  background: var(--bg-secondary);
}

.moonly-tabs .tab-btn.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  background: var(--bg-secondary);
}

/* 标签页内容 */
.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* 周期概览 */
.cycle-overview {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}

.cycle-info {
  display: flex;
  flex-direction: row;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.cycle-info-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 14px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  white-space: nowrap;
}

.info-label {
  font-size: 14px;
  color: var(--muted);
  font-weight: 500;
  min-width: 80px;
}

.info-separator {
  color: var(--border);
  font-weight: bold;
  font-size: 12px;
}

.info-divider {
  color: var(--muted);
  font-weight: normal;
  font-size: 14px;
  margin: 0 4px;
}

.info-value {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-badge.status-period {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  border: 1px solid rgba(220, 53, 69, 0.2);
}

.status-badge.status-fertile {
  background: rgba(255, 193, 7, 0.1);
  color: #ffc107;
  border: 1px solid rgba(255, 193, 7, 0.2);
}

.status-badge.status-danger {
  background: rgba(255, 87, 34, 0.1);
  color: #ff5722;
  border: 1px solid rgba(255, 87, 34, 0.2);
}

.status-badge.status-safe {
  background: rgba(76, 175, 80, 0.1);
  color: #4caf50;
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.status-badge.status-normal {
  background: rgba(33, 150, 243, 0.1);
  color: #2196f3;
  border: 1px solid rgba(33, 150, 243, 0.2);
}

.status-badge.status-unset {
  background: rgba(158, 158, 158, 0.1);
  color: #9e9e9e;
  border: 1px solid rgba(158, 158, 158, 0.2);
}

.info-value.next-period {
  color: var(--primary);
  font-weight: 600;
}

.info-value.cycle-length {
  color: var(--success);
  font-weight: 600;
}

.cycle-card {
  background: var(--bg);
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  border: 1px solid var(--border);
  transition: transform 0.2s ease;
}

.cycle-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.cycle-label {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}

.cycle-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

/* 日历控制器 */
.calendar-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.calendar-controls-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-controls h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  min-width: 120px;
  text-align: center;
}

.calendar-controls .icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.calendar-controls .icon-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* 周期操作按钮容器 */
.cycle-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.cycle-actions .reset-btn {
  padding: 8px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.cycle-actions .reset-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
}

.reset-btn-inline {
  padding: 6px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  margin-left: 4px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.reset-btn-inline:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
}

/* 双月日历容器 */
.dual-calendar-container {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

/* 日历容器 */
.calendar-container {
  background: var(--bg);
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  flex: 1;
  max-width: 420px;
  min-width: 336px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: all 0.3s ease;
  position: relative;
}

/* 日历容器鼠标悬停效果 */
.calendar-container:hover {
  border: 2px solid #007bff;
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
  transform: translateY(-2px);
}

/* 为了在悬停时保持布局稳定，添加一个伪元素作为高亮边框 */
.calendar-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid transparent;
  border-radius: 14px;
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: -1;
}

.calendar-container:hover::before {
  border-color: #007bff;
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dual-calendar-container {
    flex-direction: column;
    gap: 15px;
  }
  
  .calendar-container {
    max-width: none;
    min-width: auto;
  }
  
  .month-display {
    flex-direction: column;
    gap: 10px;
  }
  
  .month-display h3 {
    font-size: 16px;
  }
}

/* 月份显示 */
.month-display {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.month-display h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text);
  font-weight: 600;
  min-width: 120px;
}

/* 日历月份标题 */
.calendar-month-title {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.calendar-month-title h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 月份导航按钮 */
.month-nav-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.month-nav-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: scale(1.1);
}

/* 隐藏中间的翻页按钮，只保留最左和最右的 */
#moonlyNextMonth {
  display: none !important;
}

.dual-calendar-container .calendar-container:last-child .month-nav-btn.prev {
  display: none !important;
}

/* 日历表头 */
.calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
}

.calendar-weekday {
  padding: 12px;
  text-align: center;
  font-weight: 600;
  color: var(--muted);
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* 日历日期网格 */
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
}

.calendar-day {
  aspect-ratio: 1;
  border: none;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.calendar-day:hover {
  background: var(--bg-secondary);
  transform: scale(0.95);
}

.calendar-day.other-month {
  color: var(--muted);
  background: var(--bg-tertiary);
}

.calendar-day.today {
  background: #30a8f8;
  color: #fff;
  font-weight: 700;
}

/* 周期阶段颜色 */
.calendar-day.period {
  position: relative;
}

.calendar-day.fertile {
  position: relative;
  background: #fff9c4; /* 浅色黄色背景 */
  color: #8b5a00; /* 深色文字确保可读性 */
}

.calendar-day.danger {
  background: #8e24aa;
  color: white;
}

.calendar-day.safe {
  position: relative;
}

/* 月经期血滴图标 */
.calendar-day.period::before {
  content: '🌸';
  position: absolute;
  top: 2px;
  right: 8px;
  font-size: 12px;
  line-height: 1;
}

/* 易孕期/排卵日鸡蛋图标 */
.calendar-day.fertile::before {
  content: '🥚';
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 12px;
  line-height: 1;
}

/* 有记录的日期标记 */
.calendar-day.has-record::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 3px;
  height: calc(100% - 4px);
  background: #2196f3;
  border-radius: 1.5px;
}

/* 日历图例 */
.calendar-legend {
  display: flex;
  justify-content: flex-start;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.legend-color.danger {
  background: #8e24aa;
}

.legend-color.today {
  background: #30a8f8;
  border: 1px solid #30a8f8;
}

.legend-icon {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.legend-record-indicator {
  width: 16px;
  height: 16px;
  position: relative;
  display: inline-block;
}

.legend-record-indicator::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  width: 3px;
  height: 14px;
  background: #2196f3;
  border-radius: 1.5px;
}

/* 现代化记录历史页面样式 */



/* 记录容器 */
.records-container {
  position: relative;
}

/* 优化的记录列表 */
.records-list-view {
  display: grid;
  gap: 16px;
}

.record-item {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.record-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border-color: rgba(102, 126, 234, 0.2);
}

.record-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 16px 16px 0 0;
}

/* 记录项内容样式 */
.record-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.record-date {
  font-weight: 700;
  color: #1e293b;
  font-size: 18px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.record-cycle-info {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
  background: #f1f5f9;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid #e2e8f0;
}

.record-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.record-section {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.record-field {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 1.6;
}

.record-field-label {
  color: #475569;
  font-weight: 600;
  font-size: 14px;
  min-width: 80px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.record-field-value {
  color: #1e293b;
  font-weight: 500;
  flex: 1;
}

.record-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.record-tag {
  padding: 8px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

.record-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 备注区域样式 */
.record-notes {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-top: 8px;
}

.record-notes-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.record-actions-inline {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-edit-inline,
.btn-delete-inline {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-edit-inline {
  background: #3b82f6;
  color: white;
}

.btn-edit-inline:hover {
  background: #2563eb;
}

.btn-delete-inline {
  background: #ef4444;
  color: white;
}

.btn-delete-inline:hover {
  background: #dc2626;
}





/* 月经状态标签 */
.record-tag.period-light {
  background: linear-gradient(135deg, #74b9ff, #0984e3);
}

.record-tag.period-medium {
  background: linear-gradient(135deg, #a29bfe, #6c5ce7);
}

.record-tag.period-heavy {
  background: linear-gradient(135deg, #fd79a8, #e84393);
}

/* 心情标签 */
.record-tag.mood-happy {
  background: linear-gradient(135deg, #00b894, #00a085);
}

.record-tag.mood-neutral {
  background: linear-gradient(135deg, #74b9ff, #0984e3);
}

.record-tag.mood-sad {
  background: linear-gradient(135deg, #fd79a8, #e84393);
}

.record-tag.mood-angry {
  background: linear-gradient(135deg, #e17055, #d63031);
}

.record-tag.mood-anxious {
  background: linear-gradient(135deg, #fdcb6e, #e17055);
}

.record-tag.mood-excited {
  background: linear-gradient(135deg, #a29bfe, #6c5ce7);
}

.record-tag.mood-tired {
  background: linear-gradient(135deg, #636e72, #2d3436);
}

/* 症状标签 */
.record-tag.symptom {
  background: linear-gradient(135deg, #fd79a8, #e84393);
}

.record-time {
  font-size: 10px;
  color: #95a5a6;
  font-weight: 500;
  flex-shrink: 0;
}

.record-notes {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
  margin-top: 8px;
  border-left: 3px solid #74b9ff;
}

.record-notes .record-field-label {
  color: #74b9ff;
  margin-bottom: 4px;
  display: block;
  font-size: 11px;
  font-weight: 600;
}

.record-notes .record-field-value {
  color: #2c3e50;
  line-height: 1.4;
  font-style: italic;
  font-size: 12px;
}

.record-notes-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.record-actions-inline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.btn-edit-inline,
.btn-delete-inline {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: capitalize;
  min-width: 50px;
}

.btn-edit-inline {
  background: linear-gradient(135deg, #74b9ff, #0984e3);
  color: white;
}

.btn-edit-inline:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(116, 185, 255, 0.4);
}

.btn-delete-inline {
  background: linear-gradient(135deg, #fd79a8, #e84393);
  color: white;
}

.btn-delete-inline:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(253, 121, 168, 0.4);
}

.records-date-header {
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
  margin: 32px 0 16px 0;
  padding: 0 8px;
  position: relative;
}

.records-date-header::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 8px;
  width: 40px;
  height: 3px;
  background: linear-gradient(90deg, #ff6b9d, #c44569);
  border-radius: 2px;
}

.no-records {
  text-align: center;
  color: #95a5a6;
  font-style: italic;
  padding: 60px 20px;
  font-size: 16px;
  background: #f8f9fa;
  border-radius: 16px;
  margin: 20px 0;
}

.record-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ecf0f1;
}

.record-actions button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: capitalize;
}

.btn-edit {
  background: linear-gradient(135deg, #74b9ff, #0984e3);
  color: white;
}

.btn-edit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(116, 185, 255, 0.4);
}

.btn-delete {
  background: linear-gradient(135deg, #fd79a8, #e84393);
  color: white;
}

.btn-delete:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(253, 121, 168, 0.4);
}

/* ===== Moonly Dark Theme Overrides ===== */
[data-theme="dark"] #dailyRecordModal .modal-body,
[data-theme="dark"] #cycleSettingsModal .modal-body {
  --text: #111;
  --bg: #ffffff;
  --border: #d0d0d0;
  color: #111;
}

[data-theme="dark"] #dailyRecordModal .form-label,
[data-theme="dark"] #cycleSettingsModal .form-label {
  color: #111;
}

[data-theme="dark"] #dailyRecordModal .radio-item,
[data-theme="dark"] #dailyRecordModal .checkbox-item,
[data-theme="dark"] #cycleSettingsModal .radio-item,
[data-theme="dark"] #cycleSettingsModal .checkbox-item {
  background: #ffffff;
  color: #111;
  border-color: #d0d0d0;
}

[data-theme="dark"] #dailyRecordModal .mood-btn {
  background: #ffffff;
  border-color: #d0d0d0;
}

[data-theme="dark"] .record-notes {
  background: #2b2b2b;
  border-left-color: #74b9ff;
}
[data-theme="dark"] .record-notes .record-field-label {
  color: #74b9ff;
}
[data-theme="dark"] .record-notes .record-field-value {
  color: #e6edf3;
}
[data-theme="dark"] .records-date-header {
  color: #e6edf3;
}
[data-theme="dark"] .record-tag {
  color: #ffffff;
}

/* Moonly 模态框样式 */
#dailyRecordModal .modal-content {
  width: min(500px, 90vw);
  max-height: 90vh;
  overflow-y: auto;
}

#dailyRecordModal .modal-header {
  background: linear-gradient(135deg, var(--primary), #ff6b9d);
  color: white;
  border-radius: 16px 16px 0 0;
  padding: 20px 24px;
}

#dailyRecordModal .modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.modal-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 0;
}

#dailyRecordModal .modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
}

#dailyRecordModal .modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

#dailyRecordModal .modal-body {
  padding: 24px;
}

.form-section {
  margin-bottom: 24px;
}

.form-label {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  font-size: 15px;
}

.radio-group,
.checkbox-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.radio-item,
.checkbox-item {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  transition: all 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.radio-item:hover,
.checkbox-item:hover {
  border-color: var(--primary);
  background: rgba(255, 107, 157, 0.1);
}

.radio-item input:checked + span,
.checkbox-item input:checked + span {
  color: var(--primary);
  font-weight: 600;
}

.radio-item input,
.checkbox-item input {
  margin: 0;
  accent-color: var(--primary);
}

.mood-selector {
  display: flex;
  gap: 16px;
  justify-content: center;
  padding: 12px 0;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.mood-btn {
  width: 46px;
  height: 46px;
  border: 3px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  font-size: 28px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.mood-btn:hover {
  border-color: var(--primary);
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
}

.mood-btn.selected {
  border-color: var(--primary);
  background: linear-gradient(135deg, var(--primary), #ff6b9d);
  transform: scale(1.15);
  box-shadow: 0 6px 20px rgba(255, 107, 157, 0.4);
}

.form-section textarea {
  width: 100%;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  min-height: 80px;
  transition: border-color 0.2s ease;
}

.form-section textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);
}

/* 自动扩展高度的textarea */
.auto-resize {
  overflow: hidden;
  resize: vertical;
  min-height: 80px;
  max-height: 300px;
}

#dailyRecordModal .modal-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  background: var(--panel);
  border-radius: 0 0 16px 16px;
}

#dailyRecordModal .btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
}

#dailyRecordModal .btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

#dailyRecordModal .btn-secondary:hover {
  background: var(--border);
}

#dailyRecordModal .btn-primary {
  background: linear-gradient(135deg, var(--primary), #ff6b9d);
  color: white;
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
}

#dailyRecordModal .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}

.form-section input[type="number"],
.form-section input[type="date"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .moonly-container {
    padding: 16px;
  }
  
  .moonly-header {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  
  .moonly-toolbar {
    justify-content: center;
  }
  
  .cycle-info {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .calendar-legend {
    gap: 16px;
  }
  
  .records-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .radio-group,
  .checkbox-group {
    gap: 12px;
  }
  
  .mood-selector {
    gap: 8px;
  }
  
  .mood-btn {
    width: 38px;
    height: 38px;
    font-size: 18px;
  }
}

/* Dark mode overrides for Sticky Note modals */
.dark #confirmModal .form,
.dark #confirmModal .form-footer,
.dark #inputModal .modal-body,
.dark #inputModal .modal-footer {
  background: #ffffff;
  color: #111;
  border-color: #d0d0d0;
}

.dark #confirmModal p,
.dark #inputModal .input-label {
  color: #111;
}

.dark #inputModal .input-field {
  background: #ffffff;
  color: #111;
  border: 1px solid #d0d0d0;
}

/* Dark mode overrides for fancy confirm modal */
.dark #confirmModal.fancy .modal-header {
  background: #ffffff;
  color: #111;
}

.dark #confirmModal.fancy .modal-header h2 {
  color: #111;
}

.dark #confirmModal.fancy .modal-header .icon-btn {
  color: #111;
  opacity: 0.8;
}

.dark #confirmModal.fancy .modal-header .icon-btn:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

/* ===== 全局深色模式弹窗覆盖样式 ===== */
/* 确保所有弹窗在深色模式下都显示为浅色样式 */

/* 弹窗主体内容区域 */
[data-theme="dark"] .modal-content,
.dark .modal-content {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #d0d0d0 !important;
}

/* 弹窗表单区域 */
[data-theme="dark"] .modal .form,
[data-theme="dark"] .modal .modal-body,
[data-theme="dark"] .modal .modal-footer,
[data-theme="dark"] .modal .form-footer,
.dark .modal .form,
.dark .modal .modal-body,
.dark .modal .modal-footer,
.dark .modal .form-footer {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #d0d0d0 !important;
}

/* 弹窗内的文本元素 */
[data-theme="dark"] .modal p,
[data-theme="dark"] .modal span,
[data-theme="dark"] .modal div,
[data-theme="dark"] .modal label,
[data-theme="dark"] .modal .form-label,
[data-theme="dark"] .modal .input-label,
[data-theme="dark"] .modal dt,
[data-theme="dark"] .modal dd,
.dark .modal p,
.dark .modal span,
.dark .modal div,
.dark .modal label,
.dark .modal .form-label,
.dark .modal .input-label,
.dark .modal dt,
.dark .modal dd {
  color: #111111 !important;
}

/* 弹窗内的输入框 */
[data-theme="dark"] .modal input,
[data-theme="dark"] .modal select,
[data-theme="dark"] .modal textarea,
[data-theme="dark"] .modal .input-field,
.dark .modal input,
.dark .modal select,
.dark .modal textarea,
.dark .modal .input-field {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #d0d0d0 !important;
}

/* 弹窗内的按钮（除了主要按钮和特殊按钮） */
[data-theme="dark"] .modal button:not(.primary):not(.danger):not(.icon-btn):not(.modal-close),
.dark .modal button:not(.primary):not(.danger):not(.icon-btn):not(.modal-close) {
  background: #f8f9fa !important;
  color: #111111 !important;
  border: 1px solid #d0d0d0 !important;
}

/* 弹窗内的选项卡和选择项 */
[data-theme="dark"] .modal .radio-item,
[data-theme="dark"] .modal .checkbox-item,
[data-theme="dark"] .modal .type-option,
.dark .modal .radio-item,
.dark .modal .checkbox-item,
.dark .modal .type-option {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #d0d0d0 !important;
}

/* 弹窗内的列表项 */
[data-theme="dark"] .modal .recycle-bin-list,
[data-theme="dark"] .modal .bookmark-item,
[data-theme="dark"] .modal .category-item,
.dark .modal .recycle-bin-list,
.dark .modal .bookmark-item,
.dark .modal .category-item {
  background: #ffffff !important;
  color: #111111 !important;
}

/* 弹窗内的详情网格 */
[data-theme="dark"] .modal .detail-grid,
.dark .modal .detail-grid {
  background: #ffffff !important;
}

/* 弹窗内的搜索框 */
[data-theme="dark"] .modal .search-input,
.dark .modal .search-input {
  background: #ffffff !important;
  color: #111111 !important;
  border: 1px solid #d0d0d0 !important;
}

/* 弹窗内的标签和徽章 */
[data-theme="dark"] .modal .tag-chip,
[data-theme="dark"] .modal .type-badge,
.dark .modal .tag-chip,
.dark .modal .type-badge {
  background: #f8f9fa !important;
  color: #111111 !important;
  border-color: #d0d0d0 !important;
}

/* 周期设置弹窗样式 */
#cycleSettingsModal .modal-content {
  width: min(500px, 90vw);
  max-height: 90vh;
  overflow-y: auto;
}

#cycleSettingsModal .modal-header {
  background: linear-gradient(135deg, var(--primary), #ff6b9d);
  color: white;
  border-radius: 16px 16px 0 0;
  padding: 20px 24px;
}

#cycleSettingsModal .modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

#cycleSettingsModal .modal-close {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
}

#cycleSettingsModal .modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

#cycleSettingsModal .modal-body {
  padding: 24px;
}

#cycleSettingsModal .form-section {
  margin-bottom: 24px;
}

#cycleSettingsModal .form-label {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  font-size: 15px;
}

#cycleSettingsModal .form-section input[type="number"],
#cycleSettingsModal .form-section input[type="date"] {
  width: 100%;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

#cycleSettingsModal .form-section input[type="number"]:focus,
#cycleSettingsModal .form-section input[type="date"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 157, 0.1);
}

#cycleSettingsModal .modal-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  background: var(--panel);
  border-radius: 0 0 16px 16px;
}

#cycleSettingsModal .btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 80px;
}

#cycleSettingsModal .btn-secondary {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
}

#cycleSettingsModal .btn-secondary:hover {
  background: var(--border);
}

#cycleSettingsModal .btn-primary {
  background: linear-gradient(135deg, var(--primary), #ff6b9d);
  color: white;
  box-shadow: 0 2px 8px rgba(255, 107, 157, 0.3);
}

#cycleSettingsModal .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 107, 157, 0.4);
}

@media (max-width: 480px) {
  .cycle-info {
    grid-template-columns: 1fr;
  }
  
  .calendar-legend {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  
  .radio-group,
  .checkbox-group {
    flex-direction: column;
    gap: 8px;
  }
  
  #cycleSettingsModal .modal-content {
    width: 95vw;
  }
  
  #cycleSettingsModal .modal-footer {
    flex-direction: column;
  }
  
  #cycleSettingsModal .btn {
    width: 100%;
  }
}

/* ===== 深色模式下便签回收站样式覆盖 ===== */
/* 让深色模式下的便签回收站项目显示为浅色背景，与浅色模式保持一致 */
[data-theme="dark"] .recycle-bin-item {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #d0d0d0 !important;
}

[data-theme="dark"] .recycle-bin-item:hover {
  background: #f8f9fa !important;
}

[data-theme="dark"] .recycle-bin-item-title {
  color: #111111 !important;
}

[data-theme="dark"] .recycle-bin-item-content,
[data-theme="dark"] .recycle-bin-item-date {
  color: #666666 !important;
}

/* ===== 深色模式下已删除书签样式覆盖 ===== */
/* 让深色模式下的已删除书签卡片显示为浅色背景，与浅色模式保持一致 */
[data-theme="dark"] .deleted-bookmark-card {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #d0d0d0 !important;
}

[data-theme="dark"] .deleted-bookmark-card:hover {
  background: #f8f9fa !important;
}

[data-theme="dark"] .deleted-bookmark-card .bookmark-title {
  color: #111111 !important;
}

[data-theme="dark"] .deleted-bookmark-card .bookmark-description,
[data-theme="dark"] .deleted-bookmark-card .bookmark-url {
  color: #666666 !important;
}

[data-theme="dark"] .deleted-bookmark-card .deleted-info {
  background: #f8f9fa !important;
  color: #666666 !important;
}

[data-theme="dark"] .deleted-bookmark-card .deleted-date {
  color: #666666 !important;
}

[data-theme="dark"] .deleted-bookmark-card .days-left {
  color: #dc2626 !important;
}



/* 货币转换器网格样式 */
.currency-converter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
  padding: 0 16px;
}

.currency-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.currency-item:hover {
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 设置模态框中的meta说明 */
#settingsModal .meta {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 16px 0 0 0;
  padding: 0;
  line-height: 1.5;
  opacity: 0.8;
}

/* 左右两栏布局样式 */
.settings-left-column,
.settings-right-column {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.settings-section {
  margin-bottom: 24px;
}

.settings-section:last-child {
  margin-bottom: 0;
}

.currency-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 4px;
}

.currency-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.currency-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.currency-input:hover:not(:focus) {
  border-color: var(--text-secondary);
}

.currency-input::placeholder {
  color: var(--text-secondary);
  font-weight: normal;
}

/* === 设置界面设计系统 === */

/* 设置模态框整体样式 */
#settingsModal .modal-content {
  max-width: 1200px;
  width: 95vw;
  max-height: 700px;
  height: 88vh;
}

#settingsModal .modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
}

#settingsModal .modal-header h2 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  color: white;
}

/* 设置表单样式 */
#settingsModal .form {
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  background: var(--bg);
  height: calc(100% - 140px);
  overflow-y: auto;
}

/* 设置区域标题 */
.settings-section-title,
.section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.section-title:first-child {
  margin-top: 0;
}

.section-title:not(:first-child) {
  margin-top: 32px;
}

/* 功能选项网格布局 */
.feature-options-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

.feature-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  min-height: 48px;
}

.feature-option:hover {
  background: var(--panel-2);
  border-color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.feature-option input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.feature-icon {
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.feature-label {
  font-size: 15px;
  flex: 1;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
}

/* 表单行样式优化 */
#settingsModal .form-row {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 0;
}

#settingsModal .form-row label {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

#settingsModal .form-row label > input,
#settingsModal .form-row label > select {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  transition: all 0.2s ease;
}

#settingsModal .form-row label > input:focus,
#settingsModal .form-row label > select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

/* 汇率输入网格 */
.currency-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 16px 0 0 0;
}

.currency-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.currency-input-group label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin: 0;
}

.currency-input {
  padding: 12px 16px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  transition: all 0.2s ease;
}

.currency-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

/* 说明文字 */
.settings-note {
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0 0 0;
  padding: 12px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  line-height: 1.5;
}

/* 设置页脚 */
#settingsModal .form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 6px 16px 16px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  margin: 0;
}

#settingsModal .form-footer button {
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease;
  min-width: 80px;
}



/* 响应式设计 */
@media (max-width: 1024px) {
  #settingsModal .modal-content {
    max-width: 90vw;
    max-height: 90vh;
  }
  
  #settingsModal .form {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .settings-left-column,
  .settings-right-column {
    overflow-y: visible;
  }
}

@media (max-width: 640px) {
  #settingsModal .modal-content {
    width: 95vw;
    margin: 20px auto;
    max-height: 85vh;
  }
  
  #settingsModal .modal-header,
  #settingsModal .form,
  #settingsModal .form-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .settings-section {
    margin-bottom: 20px;
  }
  
  .feature-options-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .feature-option {
    padding: 12px 14px;
    min-height: 44px;
  }
  
  .feature-icon {
    font-size: 16px;
    width: 20px;
    height: 20px;
  }
  
  .feature-label {
    font-size: 14px;
  }
  
  #settingsModal .form-row label {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: left;
  }
  
  .currency-converter-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0;
    margin: 12px 0;
  }
  
  .currency-item {
    padding: 12px;
  }
  
  .currency-label {
    font-size: 13px;
  }
  
  .currency-input {
    padding: 10px 12px;
    font-size: 14px;
  }
  
  .section-title {
    font-size: 15px;
    margin: 20px 0 12px 0;
  }
  
  #settingsModal .meta {
    font-size: 12px;
    margin: 12px 0 0 0;
  }
}

/* === TZ Planner Dragging === */
.tzp-info-row{cursor:grab;}
.tzp-info-row.tzp-dragging{opacity:0.6;background: color-mix(in srgb, var(--panel) 50%, var(--border));cursor:grabbing;}
.tzp-info-row.tzp-dragover{outline:2px dashed var(--primary);} 

/* 隐藏页面标题 */
#stickyNoteTitle,
#moonlyTitle {
  display: none !important;
}

/* === Moonly Page Styles === */
.moonly-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
  border-bottom: 2px solid var(--border);
  background: var(--panel);
  border-radius: 12px 12px 0 0;
}

.moonly-tabs,
#moonlyCycleOverview {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 0 0 12px 12px;
}

/* Light theme overrides */
[data-theme="light"] .moonly-header,
[data-theme="light"] .moonly-tabs,
[data-theme="light"] #moonlyCycleOverview {
  background: #ffffff;
}

/* === Moonly Records System Styles === */
#moonlyRecordsView {
  /* 保持默认隐藏逻辑，去除 display:flex 以免覆盖 .tab-content */
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.moonly-records-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

#moonlyDateList {
  width: 320px;
  background: rgba(255, 255, 255, 0.9);
  border-right: 1px solid rgba(233, 30, 99, 0.1);
  overflow-y: auto;
  padding: 15px 10px;
  backdrop-filter: blur(10px);
}

.date-item {
  padding: 15px 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(233, 30, 99, 0.1);
  position: relative;
}

.date-item:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(233, 30, 99, 0.15);
}

.date-item.selected {
  background: linear-gradient(135deg, #fff 0%, #fce4ec 100%);
  border: 2px solid #e91e63;
  box-shadow: 0 4px 15px rgba(233, 30, 99, 0.2);
}

/* 周期状态样式 */
.date-item.period-day { border-left: 4px solid #e91e63; }
.date-item.ovulation-day { border-left: 4px solid #ff9800; }
.date-item.danger-day { border-left: 4px solid #f44336; }
.date-item.safe-day { border-left: 4px solid #4caf50; }
.date-item.predicted-day { border-left: 4px solid #9c27b0; }

.date-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.date-item .date {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}

.status-tag {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  color: white;
}

.status-tag.period { background: #e91e63; }
.status-tag.ovulation { background: #ff9800; }
.status-tag.danger { background: #f44336; }
.status-tag.safe { background: #4caf50; }
.status-tag.predicted { background: #9c27b0; }

.date-content {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.mood-emoji {
  font-size: 16px;
}

.summary-text {
  font-size: 12px;
  color: #666;
  flex: 1;
}

.date-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.symptom-tag {
  background: linear-gradient(135deg, #f8bbd9 0%, #e1bee7 100%);
  color: #7b1fa2;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
}

#moonlyDateDetail {
  flex: 1;
  padding: 25px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid rgba(233, 30, 99, 0.1);
}

.detail-header h3 {
  margin: 0;
  color: #333;
  font-size: 20px;
  font-weight: 600;
}

.status-badge {
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 12px;
  font-weight: 600;
  color: white;
}

.status-badge.period { background: linear-gradient(135deg, #e91e63 0%, #ad1457 100%); }
.status-badge.ovulation { background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%); }
.status-badge.danger { background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%); }
.status-badge.safe { background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%); }
.status-badge.predicted { background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%); }

.detail-section {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 15px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  border: 1px solid rgba(233, 30, 99, 0.1);
}

.section-icon {
  font-size: 20px;
  margin-right: 12px;
  margin-top: 2px;
}

.section-content {
  flex: 1;
}

.section-content h4 {
  margin: 0 0 8px 0;
  color: #555;
  font-size: 14px;
  font-weight: 600;
}

.mood-display {
  font-size: 24px;
}

.symptom-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.symptom-list .tag {
  background: linear-gradient(135deg, #f8bbd9 0%, #e1bee7 100%);
  color: #7b1fa2;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.no-data {
  color: #999;
  font-style: italic;
  font-size: 12px;
}

.notes-content {
  background: linear-gradient(135deg, #fce4ec 0%, #f8bbd9 100%);
  padding: 12px;
  border-radius: 8px;
  border-left: 3px solid #e91e63;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
}

.detail-stats {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.stat-card {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  text-align: center;
  color: white;
  font-weight: 500;
}

.period-stat {
  background: linear-gradient(135deg, #e91e63 0%, #ad1457 100%);
}

.symptom-stat {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
}

.mood-stat {
  background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
}

.stat-label {
  font-size: 11px;
  opacity: 0.9;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
}

/* ===== 使用说明弹窗样式 ===== */
#userGuideModal .modal-content {
  width: min(1000px, 95vw);
  max-width: none;
}

#userGuideModal .modal-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom: none;
  padding: 16px 20px;
}

#userGuideModal .modal-header h2 {
  color: white;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

#userGuideModal .modal-header .icon-btn {
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

#userGuideModal .modal-header .icon-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.user-guide-body {
  display: flex;
  height: calc(100% - 64px);
  overflow: hidden;
}

.guide-sidebar {
  width: 280px;
  background: #f8fafc;
  border-right: 1px solid #e2e8f0;
  overflow-y: auto;
}

.guide-nav {
  padding: 16px 0;
}

.guide-nav-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 12px 20px;
  border: none;
  background: none;
  text-align: left;
  font-size: 14px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.guide-nav-item .nav-main {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 2px;
}

.guide-nav-item .nav-sub {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.3;
}

.guide-nav-item:hover {
  background: #e2e8f0;
  color: #475569;
}

.guide-nav-item:hover .nav-main {
  color: #475569;
}

.guide-nav-item:hover .nav-sub {
  color: #64748b;
}

.guide-nav-item.active {
  background: #e0e7ff;
  color: #3730a3;
  border-left-color: #667eea;
}

.guide-nav-item.active .nav-main {
  color: #3730a3;
  font-weight: 600;
}

.guide-nav-item.active .nav-sub {
  color: #6366f1;
}

.guide-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  background: white;
}

.guide-section {
  display: none;
}

.guide-section.active {
  display: block;
}

.guide-section h3 {
  margin: 0 0 20px 0;
  color: #1e293b;
  font-size: 20px;
  font-weight: 600;
  padding-bottom: 12px;
  border-bottom: 2px solid #e2e8f0;
}

.guide-text {
  line-height: 1.6;
  color: #475569;
}

.guide-text p {
  margin: 0 0 16px 0;
}

.guide-text ul {
  margin: 0 0 16px 0;
  padding-left: 20px;
}

.guide-text li {
  margin-bottom: 8px;
}

.guide-text strong {
  color: #1e293b;
  font-weight: 600;
}

/* 深色模式适配 */
[data-theme="dark"] #userGuideModal .modal-content,
.dark #userGuideModal .modal-content {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .guide-sidebar,
.dark .guide-sidebar {
  background: #0f172a;
  border-right-color: #334155;
}

[data-theme="dark"] .guide-nav-item,
.dark .guide-nav-item {
  color: #94a3b8;
}

[data-theme="dark"] .guide-nav-item:hover,
.dark .guide-nav-item:hover {
  background: #1e293b;
  color: #cbd5e1;
}

[data-theme="dark"] .guide-nav-item .nav-sub,
.dark .guide-nav-item .nav-sub {
  color: #64748b;
}

[data-theme="dark"] .guide-nav-item:hover .nav-main,
.dark .guide-nav-item:hover .nav-main {
  color: #cbd5e1;
}

[data-theme="dark"] .guide-nav-item:hover .nav-sub,
.dark .guide-nav-item:hover .nav-sub {
  color: #94a3b8;
}

[data-theme="dark"] .guide-nav-item.active,
.dark .guide-nav-item.active {
  background: #1e293b;
  color: #a5b4fc;
  border-left-color: #667eea;
}

[data-theme="dark"] .guide-nav-item.active .nav-main,
.dark .guide-nav-item.active .nav-main {
  color: #a5b4fc;
}

[data-theme="dark"] .guide-nav-item.active .nav-sub,
.dark .guide-nav-item.active .nav-sub {
  color: #818cf8;
}

[data-theme="dark"] .guide-content,
.dark .guide-content {
  background: #1e293b;
}

[data-theme="dark"] .guide-section h3,
.dark .guide-section h3 {
  color: #f1f5f9;
  border-bottom-color: #334155;
}

[data-theme="dark"] .guide-text,
.dark .guide-text {
  color: #cbd5e1;
}

[data-theme="dark"] .guide-text strong,
.dark .guide-text strong {
  color: #f1f5f9;
}

/* 响应式设计 */
@media (max-width: 768px) {
  #userGuideModal .modal-content {
    width: 95vw;
    height: 90vh;
  }
  
  .user-guide-body {
    flex-direction: column;
  }
  
  .guide-sidebar {
    width: 100%;
    height: 200px;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
  
  .guide-nav {
    display: flex;
    overflow-x: auto;
    padding: 8px 0;
  }
  
  .guide-nav-item {
    white-space: nowrap;
    min-width: auto;
    padding: 8px 16px;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  
  .guide-nav-item.active {
    border-left: none;
    border-bottom-color: #667eea;
  }
  
  .guide-content {
    padding: 16px;
  }
  
  [data-theme="dark"] .guide-sidebar,
  .dark .guide-sidebar {
    border-bottom-color: #334155;
  }
}