/* ═══════════════════════════════════════════════════════════════
   LinkBoard v2 — 布局与组件样式
   ═══════════════════════════════════════════════════════════════ */

/* ---------- 页头 ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(120deg, #E3F3F0 0%, #EAF2FB 60%, #EDF4FA 100%); }
[data-theme="dark"] .hero { background: linear-gradient(120deg, #12211F 0%, #131C26 60%, #14202A 100%); }
.hero-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-content { position: relative; max-width: var(--maxw); margin: 0 auto; padding: 20px 20px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.hero-titles { display: flex; align-items: center; gap: 12px; }
.hero-logo { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--primary), #37C4AE); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(14,159,138,.35); }
.hero-logo svg, .login-mark svg { width: 100%; height: 100%; }
.hero h1 { font-size: 21px; font-weight: 800; letter-spacing: .3px; color: var(--text); }
.hero-date { font-size: 13px; color: var(--text2); margin-top: 2px; }
.hero-actions { display: flex; align-items: center; gap: 10px; }
.sync-badge { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 99px; background: var(--card); border: 1px solid var(--border); color: var(--text2); }
.sync-badge.ok { color: var(--primary-2); border-color: #BFE3DA; background: var(--primary-bg); }
.sync-badge.err { color: var(--danger); border-color: #F0B9BB; background: var(--danger-bg); }
.sync-badge.sync { color: var(--warn); border-color: #F3D9A8; background: var(--warn-bg); }

/* ---------- 布局 ---------- */
.layout { max-width: var(--maxw); margin: 0 auto; padding: 16px 16px 64px; display: flex; gap: 20px; align-items: flex-start; }
.main { flex: 1; min-width: 0; }

/* 侧边栏 */
.sidebar { width: var(--sidebar-w); flex-shrink: 0; position: sticky; top: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 4px; }
.nav-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; border: none; background: none; color: var(--text2); font-size: 14.5px; font-weight: 600; cursor: pointer; width: 100%; text-align: left; transition: .15s; min-height: 44px; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item:hover { background: var(--primary-bg); color: var(--primary-2); }
.nav-item.is-active { background: var(--primary-bg); color: var(--primary-2); }
.nav-badge { margin-left: auto; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 7px; min-width: 20px; text-align: center; }
.nav-badge.zero { background: var(--border); color: var(--text2); }
.side-divider { height: 1px; background: var(--border); margin: 10px 4px; }
.side-user { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 0; }
.side-user__name { font-size: 13px; color: var(--text2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 视图切换 */
.view { display: none; }
.view.active { display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.view-title { font-size: 20px; font-weight: 800; color: var(--text); }
.view-sub { font-size: 12.5px; color: var(--text2); margin-top: 2px; }
.view-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.todo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }

/* ---------- 按钮 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 10px; padding: 9px 14px; font-size: 14px; font-weight: 600; cursor: pointer; background: var(--primary); color: #fff; min-height: 40px; transition: .15s; }
.btn:hover { background: var(--primary-2); }
.btn svg { width: 16px; height: 16px; }
.btn-ghost { background: var(--primary-bg); color: var(--primary-2); }
.btn-ghost:hover { background: #D7EFEA; }
[data-theme="dark"] .btn-ghost:hover { background: rgba(14,159,138,.26); }
.btn-line { background: var(--card); border: 1px solid var(--border); color: var(--text2); }
.btn-line:hover { color: var(--primary); border-color: var(--primary); }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { background: #FBE0E0; }
.btn-block { width: 100%; }
.btn-sm { min-height: 34px; padding: 5px 11px; font-size: 13px; border-radius: 8px; }
.btn-xs { min-height: 30px; padding: 3px 9px; font-size: 12.5px; border-radius: 8px; }
.icon-btn { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 10px; background: var(--card); border: 1px solid var(--border); color: var(--text2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: .15s; flex-shrink: 0; }
.icon-btn:hover { color: var(--primary); border-color: var(--primary); }
.icon-btn svg { width: 18px; height: 18px; }
/* 标题行小图标按钮（看板/笔记名称编辑） */
.icon-btn--sm { width: 30px; height: 30px; min-height: 30px; border: none; background: none; border-radius: 8px; }
.icon-btn--sm svg { width: 15px; height: 15px; }

/* ---------- 卡片 ---------- */
.card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; }
.card-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
.card-sub { font-size: 12.5px; color: var(--text2); margin-bottom: 14px; }
.card-foot-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* ---------- 徽标 / 标签 ---------- */
.badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.badge-red { background: var(--danger-bg); color: var(--danger); border: 1px solid #F5C8C9; }
.badge-warn { background: var(--warn-bg); color: #B45309; border: 1px solid #F3D9A8; }
[data-theme="dark"] .badge-warn { color: #F0B96A; }
.badge-teal { background: var(--primary-bg); color: var(--primary-2); border: 1px solid #BFE3DA; }
.badge-blue { background: #EDF3FE; color: var(--blue); border: 1px solid #D3E2FB; }
[data-theme="dark"] .badge-blue { background: rgba(37,99,235,.16); }
.badge-gray { background: var(--bg); color: var(--text2); border: 1px solid var(--border); }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--primary-bg); color: var(--primary-2); font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px; cursor: pointer; }
.tag-chip.is-active { background: var(--board-color, var(--primary)); color: #fff; }
.tag-chip button { border: none; background: none; color: inherit; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 0 0 2px; }
/* 卡片上的标签：方形小号、多彩（由 JS 按标签名取色）；标签筛选按钮复用此样式 */
.tag-sq { display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 4px; line-height: 1.6; white-space: nowrap; }
/* 标签类按钮：方形无边框（筛选栏/标签总览/卡片标签共用 tag-sq）
   注意：看板切换按钮（tag-chip 胶囊）保留原边框，勿与此规则合并 */
button.tag-sq { border: none; cursor: pointer; }
.tag-sq.is-active { background: var(--primary) !important; color: #fff !important; }
/* 标签总览页：方形、无边框、放大字体（桌面一行约 10 个四字标签） */
.tag-cloud .tag-sq { font-size: 15px; padding: 7px 12px; border-radius: 6px; }

/* ---------- 输入 ---------- */
.f-label { font-size: 13px; font-weight: 600; color: var(--text2); margin: 10px 0 4px; display: block; }
.f-input, .i-input { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px; font-size: 16px; background: var(--card); color: var(--text); outline: none; transition: .15s; }
.f-input:focus, .i-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,159,138,.12); }
select.f-input { appearance: auto; }
textarea.i-input { resize: vertical; min-height: 90px; }
.search-box { position: relative; display: flex; align-items: center; }
.search-box svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--text3); pointer-events: none; }
.search-box input { width: 220px; border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px 8px 36px; font-size: 14px; background: var(--card); color: var(--text); outline: none; transition: .15s; }
.search-box input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(14,159,138,.12); }

/* ---------- 登录页 ---------- */
.login-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--bg); }
.login-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 28px; }
.login-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.login-mark { width: 52px; height: 52px; flex-shrink: 0; }
.login-name { font-size: 20px; font-weight: 800; color: var(--text); }
.login-sub { font-size: 12.5px; color: var(--text2); margin-top: 2px; }
.login-tabs { display: flex; gap: 4px; background: var(--bg); border-radius: 10px; padding: 4px; margin-bottom: 8px; }
.login-tab { flex: 1; border: none; background: none; padding: 9px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text2); cursor: pointer; }
.login-tab.is-active { background: var(--card); color: var(--primary-2); box-shadow: var(--shadow-sm); }
.login-error { min-height: 20px; font-size: 13px; color: var(--danger); margin: 8px 0 2px; }
.login-divider { display: flex; align-items: center; gap: 10px; color: var(--text3); font-size: 12px; margin: 14px 0 10px; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ---------- 待办视图 ---------- */
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.group-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--text2); margin: 18px 0 8px; }
.group-title .gt-count { background: var(--bg); border: 1px solid var(--border); color: var(--text2); font-size: 11px; border-radius: 99px; padding: 1px 8px; font-weight: 700; }
.task-row { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; background: var(--card); margin-bottom: 8px; box-shadow: var(--shadow-sm); transition: .15s; }
.task-row:hover { border-color: #BFD8D1; }
.task-row.overdue { border-color: #F0B9BB; background: var(--danger-bg); }
.task-row.done { opacity: .62; }
.task-row.done .task-title { text-decoration: line-through; color: var(--text2); }
.task-check { width: 22px; height: 22px; min-width: 22px; accent-color: var(--primary); cursor: pointer; }
.task-body { flex: 1; min-width: 0; }
.task-title { font-size: 14.5px; font-weight: 600; word-break: break-all; }
.task-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text2); margin-top: 3px; }
.task-meta .proj-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--primary-bg); color: var(--primary-2); padding: 1px 8px; border-radius: 99px; font-weight: 600; }
.task-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.task-actions .icon-btn { width: 32px; height: 32px; min-height: 32px; border-radius: 8px; }
.task-actions .icon-btn svg { width: 15px; height: 15px; }
.prio-pill { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; }
.prio-pill.p0 { background: var(--danger-bg); color: var(--danger); }
.prio-pill.p1 { background: var(--warn-bg); color: #B45309; }
[data-theme="dark"] .prio-pill.p1 { color: #F0B96A; }
.prio-pill.p2 { background: #EDF3FE; color: var(--blue); }
[data-theme="dark"] .prio-pill.p2 { background: rgba(37,99,235,.16); }
.prio-pill.p3 { background: var(--bg); color: var(--text2); }
.done-toggle { background: none; border: none; color: var(--primary); font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; min-height: 36px; }
.done-toggle:hover { text-decoration: underline; }
.todo-empty { text-align: center; padding: 40px 16px; color: var(--text2); font-size: 14px; }
.todo-empty svg { width: 44px; height: 44px; color: #C6D4D0; margin-bottom: 8px; }

/* 今日习惯（待办页内） */
.habit-today { display: flex; flex-direction: column; gap: 8px; }
.habit-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--card); }
.habit-item__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--h-color, var(--primary)); flex-shrink: 0; }
.habit-item__emoji { font-size: 17px; flex-shrink: 0; }
.habit-item__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.habit-item__streak { font-size: 12px; color: var(--text2); white-space: nowrap; }
.habit-item__actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.habit-toggle { border: 1px solid color-mix(in srgb, var(--h-color, var(--primary)) 45%, transparent); background: color-mix(in srgb, var(--h-color, var(--primary)) 8%, transparent); color: var(--h-color, var(--primary)); border-radius: 99px; padding: 5px 13px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .15s; min-height: 34px; }
.habit-toggle:hover { background: color-mix(in srgb, var(--h-color, var(--primary)) 16%, transparent); }
.habit-toggle.is-done { background: var(--h-color, var(--primary)); color: #fff; border-color: transparent; }

/* 待办页习惯管理弹窗里的习惯行 */
.habit-manage-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.habit-manage-row__info { flex: 1; min-width: 0; }
.habit-manage-row__name { font-size: 14px; font-weight: 600; color: var(--text); }
.habit-manage-row__freq { font-size: 12px; color: var(--text2); margin-top: 1px; }
.habit-manage-row .icon-btn { width: 32px; height: 32px; min-height: 32px; border-radius: 8px; }
.habit-manage-row .icon-btn svg { width: 15px; height: 15px; }

/* 月历（习惯管理弹窗） */
.hcal { max-width: 300px; }
.hcal__head, .hcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.hcal__wk { text-align: center; font-size: 10px; color: var(--text3); padding: 2px 0; }
.hcal__cell { aspect-ratio: 1; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 1px; }
.hcal__cell.is-edge, .hcal__cell.is-future { background: transparent; }
.hcal__num { font-size: 10px; line-height: 1; color: var(--text2); font-style: normal; }
.hcal__cell.is-edge .hcal__num { color: var(--text3); opacity: .6; }
.hcal__cell.is-future .hcal__num { color: var(--text3); }
.hcal__cell.is-today { box-shadow: inset 0 0 0 1.5px var(--primary); background: var(--primary-bg); }
.hcal__cell.is-today .hcal__num { color: var(--primary-2); font-weight: 700; }
.hcal__dots { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.hcal__dot { width: 5px; height: 5px; border-radius: 50%; }

/* ---------- 看板视图 ---------- */
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.board-title-row { display: flex; align-items: center; gap: 10px; }
.board-title { font-size: 20px; font-weight: 800; color: var(--text); }
.board-crumb { font-size: 13px; color: var(--text3); }
/* 看板色块（emoji + 颜色标识，跟随当前看板主题） */
.board-mark { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 19px; color: #fff; flex-shrink: 0; box-shadow: 0 2px 6px rgba(15,40,60,.1); line-height: 1; transition: background .15s; }
/* tab 内 emoji 微间距 */
.tab-emoji { margin-right: 2px; font-size: 14px; }
.board-scroll { overflow-x: auto; padding-bottom: 8px; }
/* 看板网格：桌面固定 3 列等宽撑满容器，超出自动换行；移动端 1 列（见媒体查询） */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; min-height: 300px; }
.column { background: var(--bg); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; max-height: calc(100vh - 240px); min-width: 0; }
.column__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.column__title { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.column__count { font-size: 12px; color: var(--text3); }
.column__head .icon-btn { width: 28px; height: 28px; min-height: 28px; border-radius: 7px; border: none; background: none; }
.column__head .icon-btn svg { width: 14px; height: 14px; }
.column__body { padding: 4px 10px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.column__body.drag-over { background: var(--primary-bg); border-radius: 8px; }
.card { border-radius: 11px; padding: 12px 13px; margin-bottom: 0; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); cursor: pointer; transition: .15s; }
.card:hover { border-color: #BFD8D1; box-shadow: var(--shadow); }
.card.dragging { opacity: .55; }
/* ---------- 网格视图模式（仿浏览器新标签页） ---------- */
.board.grid-mode { grid-template-columns: 1fr; gap: 6px; }
.board.grid-mode .column {
  max-height: none;
  background: transparent;
  border: none;
  box-shadow: none;
}
.board.grid-mode .column__head {
  padding: 6px 0 4px;
}
.board.grid-mode .column__title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text2);
}
.board.grid-mode .column__count,
.board.grid-mode .column__head .icon-btn {
  display: none;
}
.board.grid-mode .column__body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 4px;
  overflow-y: visible;
  padding: 2px 0 8px;
}
.board.grid-mode .card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 8px 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  cursor: pointer;
  transition: none;
}
.board.grid-mode .card:hover {
  border-color: transparent;
  box-shadow: none;
}
/* favicon 悬停动效 */
.board.grid-mode .card:hover .card-favicon {
  transform: scale(1.08);
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}
.board.grid-mode .card-title-line {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
/* 网站 favicon — 圆角方形 */
.board.grid-mode img.card-favicon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  object-fit: cover;
  margin-top: 0;
  background: #fff;
  transition: transform 0.18s, box-shadow 0.18s;
}
/* emoji 图表 — 圆角方形背景 */
.board.grid-mode span.card-favicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: #fff;
  font-size: 26px !important;
  line-height: 1;
  margin-top: 0;
  transition: transform 0.18s, box-shadow 0.18s;
}
.board.grid-mode span.card-favicon svg {
  width: 26px;
  height: 26px;
}
.board.grid-mode .card-title {
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
  color: var(--text2);
  word-break: normal;
}
/* 隐藏所有非标题/图标元素 */
.board.grid-mode .card-meta,
.board.grid-mode .card-edit-btn,
.board.grid-mode .bulk-check,
.board.grid-mode .card-desc,
.board.grid-mode .card-foot {
  display: none !important;
}
/* 网格模式下隐藏空状态占位和末端的添加分类列 */
.board.grid-mode .todo-empty { display: none; }
.board.grid-mode .column[style*="dashed"] { display: none; }

.card-title-line { display: flex; align-items: flex-start; gap: 8px; }
.card-title-line .card-title { flex: 1; min-width: 0; }
.card-title-line .card-favicon { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; margin-top: 2px; }
/* 卡片编辑按钮（网址卡右上角：淡显，hover 加深） */
.card-edit-btn { width: 26px; height: 26px; min-height: 26px; border: none; border-radius: 7px; background: none; color: var(--text3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: .55; margin: -3px -4px 0 0; transition: .15s; }
.card-edit-btn:hover { background: var(--primary-bg); color: var(--primary-2); opacity: 1; }
.card-edit-btn svg { width: 13px; height: 13px; }
/* 网址卡批量选择勾选框：默认隐藏，点右上角「批量」进入批量模式（body.bulk-mode）后显示 */
.bulk-check { display: none; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; margin: 1px 0 0 -2px; cursor: pointer; }
.bulk-mode .bulk-check { display: inline-flex; }
.bulk-check:hover { opacity: 1; }
.bulk-check input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
/* 选中高亮 */
.card.is-bulk { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(14,159,138,.22); }
.card.is-bulk .bulk-check { opacity: 1; }
.card-title { font-size: 13.5px; font-weight: 600; color: var(--text); word-break: break-all; line-height: 1.4; }
/* 网址卡标题：强制一行，超出省略号截断（笔记/待办卡不受影响） */
.card-bm .card-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; }
.card-desc { font-size: 12.5px; color: var(--text2); margin-top: 4px; word-break: break-all; white-space: pre-wrap; }
.card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.card-meta .tag-chip { font-size: 11px; padding: 2px 8px; cursor: default; }
.card-meta .url-host { font-size: 11.5px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.card-foot .card-date { font-size: 11px; color: var(--text3); }
.card.is-hidden { display: none !important; }
.card.is-flash { animation: card-flash 1.6s ease; }
@keyframes card-flash { 0%,100% { box-shadow: var(--shadow-sm); } 20%,60% { box-shadow: 0 0 0 3px var(--primary); } }
.todo-item-inline { display: flex; flex-direction: column; gap: 5px; }
.todo-item-inline__row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text2); }
.todo-item-inline__row input { accent-color: var(--primary); }
.todo-item-inline__row.done label { text-decoration: line-through; color: var(--text3); }
.col-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; }
.col-tabs .tab-item { flex-shrink: 0; }
.tag-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.fab { position: fixed; right: 22px; bottom: 24px; width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--primary); color: #fff; font-size: 26px; box-shadow: 0 8px 24px rgba(14,159,138,.4); cursor: pointer; z-index: 50; }
.fab:hover { background: var(--primary-2); }

/* ---------- 标签 / 回收站 / 设置 / 管理 滚动区 ---------- */
.tags-scroll, .trash-scroll, .settings-scroll, .admin-scroll { display: flex; flex-direction: column; gap: 8px; }
.tags-head, .trash-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.tags-head__desc, .trash-count { font-size: 13px; color: var(--text2); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tag-result-row, .trash-item { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--border); border-radius: 11px; padding: 11px 14px; }
.tag-result-row__info, .trash-item__info { flex: 1; min-width: 0; }
.tag-result-row__title, .trash-item__title { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag-result-row__meta, .trash-item__meta { font-size: 12px; color: var(--text3); margin-top: 2px; }
.trash-item__actions { display: flex; gap: 8px; flex-shrink: 0; }
.empty-tip { text-align: center; color: var(--text2); padding: 48px 0; font-size: 14px; }

/* 设置卡片 */
.settings-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); padding: 18px; margin-bottom: 14px; }
.settings-card h3 { font-size: 15px; font-weight: 800; color: var(--text); margin-bottom: 10px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.settings-row:first-of-type { border-top: none; }
.settings-row__label { font-size: 14px; color: var(--text); }
.settings-row__desc { font-size: 12px; color: var(--text3); margin-top: 2px; }
.settings-row input[type="text"], .settings-row input[type="password"] { flex: 1; min-width: 200px; max-width: 340px; }
.snapshot-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); font-size: 13px; color: var(--text2); }
.snapshot-row:first-of-type { border-top: none; }
.snapshot-row time { flex: 1; }

/* ---------- 弹窗 ---------- */
.modal-root { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-root[hidden] { display: none; }
.modal-mask { position: absolute; inset: 0; background: rgba(15, 35, 35, .45); }
.dialog { position: relative; width: 100%; max-width: 520px; max-height: 85vh; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 12px 48px rgba(15,40,60,.2); animation: popIn .18s ease; }
@keyframes popIn { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } }
.dialog--wide { max-width: 860px; }
.dialog__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0; }
.dialog__title { font-size: 16px; font-weight: 800; color: var(--text); }
.dialog__close { width: 32px; height: 32px; border: none; border-radius: 8px; background: none; color: var(--text2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dialog__close:hover { background: var(--hover); color: var(--text); }
.dialog__close svg { width: 16px; height: 16px; }
.dialog__body { padding: 14px 20px 4px; overflow-y: auto; }
.dialog__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px 18px; }
.dialog__foot .df-actions { display: flex; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--text2); }
.field__hint { font-size: 12px; color: var(--text3); }
.color-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.color-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: .15s; }
.color-dot:hover { transform: scale(1.1); }
.color-dot.is-selected { border-color: var(--text); box-shadow: 0 0 0 2px var(--card); }
.dialog .freq-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dialog .freq-row select { flex: 1; min-width: 140px; }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { background: var(--text); color: var(--bg); font-size: 13.5px; font-weight: 600; padding: 10px 18px; border-radius: 99px; box-shadow: var(--shadow); animation: toastIn .2s ease; max-width: 80vw; }
.toast.success { background: var(--primary); color: #fff; }
.toast.error { background: var(--danger); color: #fff; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- 批量操作栏（多选网址卡后浮出） ---------- */
.bulk-bar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 150; display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 30px rgba(15,40,60,.18); padding: 10px 14px; }
.bulk-bar__info { font-size: 13px; font-weight: 600; color: var(--text2); white-space: nowrap; }
.bulk-bar__info b { color: var(--primary-2); }
.bulk-bar__actions { display: flex; gap: 8px; }

/* ---------- 移动端 ---------- */
.tabbar { display: none; }
@media (max-width: 860px) {
  .hero-content { padding: 16px 16px 14px; }
  .hero h1 { font-size: 18px; }
  .hero-logo { width: 38px; height: 38px; }
  .layout { padding: 12px 12px 92px; }
  .sidebar { display: none; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--card); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
  .tab-item { flex: 1; border: none; background: none; color: var(--text2); font-size: 11px; font-weight: 600; padding: 8px 0 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; }
  .tab-item svg { width: 20px; height: 20px; }
  .tab-item.is-active { color: var(--primary-2); }
  .board-scroll { padding-bottom: 16px; }
  /* 移动端：单列堆叠；去掉列高限制避免嵌套滚动（列自然展开） */
  .board { grid-template-columns: 1fr; }
  .column { max-height: none; }
  /* 批量栏避让底部 Tab */
  .bulk-bar { bottom: 76px; left: 12px; right: 12px; transform: none; justify-content: space-between; flex-wrap: wrap; }
  .search-box input { width: 160px; }
  .task-row { flex-wrap: wrap; }
  .task-actions { width: 100%; justify-content: flex-end; }
  .todo-head, .board-head { align-items: flex-start; }
}