:root{--bg:#0f172a;--panel:#111827;--card:#1f2937;--accent:#22d3ee;--text:#e5e7eb;--muted:#9ca3af;--border:#374151;}

/* 轴上时间段 hover/active 效果与标签显隐 */
.tl-svg .seg-group text{
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease-in-out;
}
.tl-svg .seg-group .seg-label{
  fill: var(--text);
  paint-order: stroke;
  stroke: transparent;
  stroke-width: 0;
}
.tl-svg .seg-group line{
  transition:stroke-width .18s ease, stroke-opacity .18s ease;
  stroke-opacity:.9;
}
.tl-svg .seg-group circle{
  transition:opacity .18s ease;
  opacity:.95;
}
.tl-svg .seg-group.active text{ opacity:1; }
.tl-svg .seg-group.active line{ stroke-width:6.5; stroke-opacity:1; }
.tl-svg .seg-group.active circle{ opacity:1; }

/* 轴刻度与标签（与区间标签区分开） */
.tl-svg .tick-line{
  stroke: var(--border);
  opacity: .5;
}
.tl-svg .tick-label{
  fill: var(--muted);
  opacity: .85;
}
.tl-svg text.tick-year{
  font-weight: 600;
  opacity: .95;
  font-size: 12px; /* 从 10px 略微增大 */
}
/* 年度刻度线：更粗、更亮 */
.tl-svg line.tick-year{
  stroke: var(--text);
  opacity: .95;
  stroke-width: 2;
}
.tl-svg .tick-month{
  font-weight: 500;
  opacity: .8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:linear-gradient(180deg,#0b1020,#0f172a);color:var(--text)}

/* 确保任何带有 hidden 属性的元素都被隐藏（避免作者样式覆盖） */
[hidden]{
  display:none !important;
}

.app-header{padding:28px 20px;text-align:center}
.app-header h1{margin:0;font-size:28px;letter-spacing:0.5px}
.subtitle{margin:6px 0 0;color:var(--muted);font-size:14px}

.container{max-width:980px;margin:0 auto;padding:0 5px 40px; position: relative; z-index: 1;}
.ui-shell{position: relative; z-index: 1;}
.visual-shell{position: relative; z-index: 1;}

/* 独占一行的页面标题 */
.page-title{
  margin: 12px 0 10px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--text);
  text-align: center;
}
@media (max-width: 560px){
  .page-title{ font-size: 20px; }
}

/* 全局斜向水印（仅一个） */
.watermark{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 旋转并保证足够宽度，避免在小屏被裁切 */
  transform: rotate(-30deg);
  transform-origin: center center;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  user-select: none;
  z-index: 0; /* 内容自然位于其上（后渲染） */
}
.watermark{
  /* 用元素自身文本（index.html 内已写入），确保兼容 data-i18n 覆盖 */
  font-size: clamp(48px, 16vmin, 180px);
  font-weight: 900;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.06);
  text-transform: none;
  white-space: nowrap;
}
[data-theme='light'] .watermark{
  color: rgba(0,0,0,0.06);
}
.ui-shell{max-width:980px;margin:0 auto}
.visual-shell{
  width:calc(100vw - 40px);
  max-width:none;
  margin-left:calc(50% - 50vw + 20px);
  margin-right:calc(50% - 50vw + 20px);
}
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:10px 0 18px}
.controls input[type=search]{flex:1 1 360px;min-width:220px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#0b1222;color:var(--text)}
.controls select{padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#0b1222;color:var(--text)}
.btn{padding:10px 14px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);cursor:pointer}
.btn:hover{border-color:var(--accent);color:#fff}

/* Button with icon + label */
.btn.with-icon{display:inline-flex;align-items:center;gap:8px}
.btn .btn-icon{display:inline-block}
.btn .icon-logout{display:none}
.auth-logout .icon-login{display:none}
.auth-logout .icon-logout{display:inline-block}

/* Semantic variants for auth button */
.btn.auth-login{background:linear-gradient(180deg,#0aaac2,#0891b2);border-color:#0aaac2;color:#fff}
.btn.auth-login:hover{filter:brightness(1.06)}
.btn.auth-logout{
  background: rgba(239, 68, 68, 0.12); /* soft red tint */
  border-color: rgba(239, 68, 68, 0.35);
  color: var(--text);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12) inset;
}
.btn.auth-logout:hover{
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.5);
  color: var(--text);
  filter:none;
}

.stats{color:var(--muted);margin:12px 2px}

.card-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:16px;padding-left:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px}
.card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.name{margin:0;font-size:18px;line-height:1.2}
.name .badge.days{ display:inline-block; margin-left:8px; padding:2px 6px; font-size:12px; line-height:1; border-radius:999px; border:1px solid var(--border); background:rgba(255,255,255,0.06); color:var(--muted); vertical-align:middle; white-space:nowrap }
[data-theme='light'] .name .badge.days{ background:rgba(0,0,0,0.04); color:#475569 }
.dates{color:var(--muted);font-size:12px;white-space:nowrap}
.person{display:flex;align-items:center;gap:10px}
.avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid var(--border);background:#0b1222}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}
.tag{display:inline-block;padding:4px 8px;border:1px solid var(--border);border-radius:999px;font-size:12px;color:#e6fbff;background:#0b1222}
/* Tag stable color variants (c0..c9) */
.tag.c0{ background:rgba(34,197,94,.12); border-color:rgba(34,197,94,.35); color:#bbf7d0 }
.tag.c1{ background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.35); color:#bfdbfe }
.tag.c2{ background:rgba(234,179,8,.12); border-color:rgba(234,179,8,.35); color:#fde68a }
.tag.c3{ background:rgba(244,63,94,.12); border-color:rgba(244,63,94,.35); color:#fecaca }
.tag.c4{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.35); color:#a7f3d0 }
.tag.c5{ background:rgba(168,85,247,.12); border-color:rgba(168,85,247,.35); color:#e9d5ff }
.tag.c6{ background:rgba(249,115,22,.12); border-color:rgba(249,115,22,.35); color:#fed7aa }
.tag.c7{ background:rgba(132,204,22,.12); border-color:rgba(132,204,22,.35); color:#d9f99d }
.tag.c8{ background:rgba(6,182,212,.12); border-color:rgba(6,182,212,.35); color:#a5f3fc }
.tag.c9{ background:rgba(99,102,241,.12); border-color:rgba(99,102,241,.35); color:#c7d2fe }
[data-theme='light'] .tag.c0{ background:rgba(34,197,94,.1); color:#065f46 }
[data-theme='light'] .tag.c1{ background:rgba(59,130,246,.1); color:#1e40af }
[data-theme='light'] .tag.c2{ background:rgba(234,179,8,.1); color:#78350f }
[data-theme='light'] .tag.c3{ background:rgba(244,63,94,.1); color:#7f1d1d }
[data-theme='light'] .tag.c4{ background:rgba(16,185,129,.1); color:#065f46 }
[data-theme='light'] .tag.c5{ background:rgba(168,85,247,.1); color:#6b21a8 }
[data-theme='light'] .tag.c6{ background:rgba(249,115,22,.1); color:#9a3412 }
[data-theme='light'] .tag.c7{ background:rgba(132,204,22,.1); color:#3f6212 }
[data-theme='light'] .tag.c8{ background:rgba(6,182,212,.1); color:#155e75 }
[data-theme='light'] .tag.c9{ background:rgba(99,102,241,.1); color:#312e81 }
.notes{
  margin:10px 0 0;
  line-height:1.7;
  color: var(--text);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  position: relative;
  /* 长文本更友好：自动换行并保留手动换行 */
  white-space: pre-wrap;
  word-break: break-word;
}
.notes::before{ content:none; }
/* 段落与链接可读性优化 */
.notes a{ color: var(--accent); text-decoration: none; border-bottom: 1px dashed rgba(34,211,238,.35); }
.notes a:hover{ text-decoration: underline; border-bottom-color: transparent; }
.notes strong{ font-weight: 700; }
.notes em{ font-style: italic; }
.links{margin-top:10px;font-size:13px}
.links a{color:var(--accent);text-decoration:none}
.links a:hover{text-decoration:underline}

/* Ratings (颜值) 条形仪表，不用椭圆标签，避免与 .tag 冲突 */
.rate{ margin:10px 0 0; }
.rate .label{
  display:inline-block;
  font-size:12px;
  color:var(--muted);
  padding:2px 6px;
  border:1px solid var(--border);
  border-radius:6px;
  background:rgba(255,255,255,0.03);
  margin-right:8px;
}
.rate-rows{ display:flex; flex-direction:column; gap:6px; }
.rate-row{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; }
.rate-row .k{ font-size:12px; color:var(--muted); }
.rate-row .v{ font-size:12px; color:var(--text); opacity:.9 }
.rate-row .bar{ position:relative; height:8px; background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:6px; overflow:hidden }
.rate-row .bar .bar-fill{ position:absolute; left:0; top:0; height:100%; border-radius:6px; transition: width .25s ease; }
.bar-fill.level-low{ background:linear-gradient(90deg, #ef4444, #f59e0b) }
.bar-fill.level-mid{ background:linear-gradient(90deg, #f59e0b, #eab308) }
.bar-fill.level-high{ background:linear-gradient(90deg, #10b981, #22d3ee) }
/* Five-tier rating colors */
.bar-fill.level-1{ background: linear-gradient(90deg, #ef4444, #f97316) }
.bar-fill.level-2{ background: linear-gradient(90deg, #f59e0b, #eab308) }
.bar-fill.level-3{ background: linear-gradient(90deg, #eab308, #84cc16) }
.bar-fill.level-4{ background: linear-gradient(90deg, #84cc16, #22d3ee) }
.bar-fill.level-5{ background: linear-gradient(90deg, #10b981, #22d3ee) }
[data-theme='light'] .rate-row .bar{ background:rgba(0,0,0,0.06) }

/* Ages block */
.ages{ display:flex; align-items:center; gap:8px; margin:6px 0 0; color:var(--text); flex-wrap: wrap }
.ages .label{ font-size:12px; color:var(--muted); padding:2px 6px; border:1px solid var(--border); border-radius:6px; background:rgba(255,255,255,0.03) }

/* Spacing refinements: keep age and notes comfortably separated */
/* In list cards */
.card .meta-line + .age-extra{ margin-top:8px; }
.card .age-extra + .age-progress{ margin-top:8px; }
.card .meta-line + .notes{ margin-top:20px; }
.card .age-progress + .notes{ margin-top:20px; }
.card .rate + .meta-line{ margin-top:12px; }
/* when no age extras present, but rate is followed by notes directly */
.card .rate + .notes{ margin-top:14px; }

/* In timeline popover (node-popover is the actual class) */
.node-popover .ages{ margin-top:10px; }
.node-popover .ages + .node-notes{ margin-top:20px; }

/* 年龄增强信息（距下次生日 + 今年进度） */
.age-extra{ margin:6px 0 0; font-size:12px; color:var(--muted); }
.age-progress{ margin-top:6px; }
.age-progress .bar{ position:relative; height:6px; background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:6px; overflow:hidden }
.age-progress .bar .bar-fill{ position:absolute; left:0; top:0; height:100%; border-radius:6px; background: linear-gradient(90deg, #60a5fa, #22d3ee); transition: width .25s ease; }
[data-theme='light'] .age-progress .bar{ background:rgba(0,0,0,0.06) }

/* 精简版 Meta 行：一行轻量信息（颜值/年龄） */
.meta-line{ margin:8px 0 0; font-size:13.5px; color:var(--muted); line-height:1.55 }
.meta-line .label{ color:var(--muted); margin-right:6px }
.meta-line .val{ color:var(--text); font-weight:600; font-variant-numeric: tabular-nums }
.meta-line .dot{ opacity:.5; margin:0 8px }

/* 时间轴弹窗卡片放宽，便于显示完整信息 */
.tl-popover .tl-card{ max-width: min(760px, 92vw); }

.app-footer{max-width:980px;margin:24px auto 40px;padding:0 16px;color:var(--muted);text-align:center}

.error{padding:12px;border:1px solid #ef4444;background:#2f0b0b;border-radius:10px}

/* Toolbar */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0;flex-wrap:wrap}
.toolbar .left,.toolbar .right{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* 左侧占据剩余空间，右侧自然贴右 */
.toolbar .left{flex:1 1 auto;min-width:280px}
.toolbar .right{flex:0 0 auto}

/* 左侧品牌标题（小号，不抢视觉） */
.brand-title{
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
  margin-right: 12px;
  line-height: 36px; /* 对齐按钮高度 */
  white-space: nowrap; /* 避免标题被拆行 */
}

/* 窄屏优化：将右侧一组换到下一行并靠右 */
@media (max-width: 560px){
  .toolbar{gap:8px}
  .toolbar .right{width:100%;justify-content:flex-end;margin-top:4px}
}

/* Buttons */
.btn.primary{background:linear-gradient(180deg,#0aaac2,#0891b2);border-color:#0aaac2;color:#fff}
.btn.primary:hover{filter:brightness(1.06)}
.btn.small{padding:6px 10px;font-size:12px;border-radius:6px}
.btn.danger{border-color:#b91c1c;color:#fecaca}
.btn.danger:hover{background:#7f1d1d;border-color:#ef4444}

/* Language switch (select as button) */
#langSelect{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  padding:10px 36px 10px 12px;
  border:1px solid var(--border);
  border-radius:999px; /* pill */
  background:var(--card);
  color:var(--text);
  cursor:pointer;
  line-height:1;
  position:relative;
  /* custom chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:14px 14px;
}
#langSelect:hover{
  border-color: var(--accent);
  color:#fff;
}
#langSelect:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34,211,238,0.25);
}

/* light theme tweak for chevron color */
[data-theme='light'] #langSelect{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Theme icon button */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--card);
  color:var(--text);
  cursor:pointer;
  transition: all .18s ease;
}
.icon-btn:hover{
  border-color: var(--accent);
  color:#fff;
}
.icon-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(34,211,238,0.25)}
.icon-btn svg{display:block}

/* icon visibility: default (dark) show moon */
.icon-sun{display:none}
.icon-moon{display:inline}
[data-theme='light'] .icon-sun{display:inline}
[data-theme='light'] .icon-moon{display:none}

/* Editor panel */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:16px;margin-top:18px}
.panel-title{margin:0 0 10px 0;font-size:18px}
.form{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form input,.form textarea,.form select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:#0b1222;color:var(--text)}
.actions{display:flex;gap:8px;justify-content:flex-end}

/* Card actions */
.card-actions{display:flex;gap:10px;margin-top:12px}

/* Charts */
.charts{margin-top:22px}
.chart-title{margin:0 0 10px 0;color:var(--muted);font-size:14px}
.chart-group{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width: 720px){.chart-group{grid-template-columns:1fr 1fr}}
.chart{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px}
.bar{position:relative;display:flex;align-items:center;gap:8px;margin:6px 0}
.bar-fill{display:inline-block;height:10px;border-radius:6px;background:linear-gradient(90deg,var(--accent),#60a5fa)}
.bar-label{font-size:12px;color:var(--muted)}

/* Charts head: title + desc + sort (refined, subtle) */
.chart .chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.chart .chart-name{font-size:16px;line-height:1.2;font-weight:600;color:var(--text)}
.chart .chart-desc{margin-top:2px;font-size:12.5px;line-height:1.5;color:var(--muted);max-width:68ch}
.chart .chart-head .right{display:flex;align-items:center;gap:8px}
.chart .chart-sort{appearance:none;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,0.04);color:var(--text);font-size:12.5px}
[data-theme='light'] .chart .chart-sort{background:rgba(0,0,0,0.04)}
.chart .chart-body{margin-top:4px}
.muted{color:var(--muted);font-size:12px}

/* Light theme */
[data-theme='light']{--bg:#f8fafc;--panel:#ffffff;--card:#ffffff;--accent:#0891b2;--text:#111827;--muted:#6b7280;--border:#e5e7eb}
[data-theme='light'] body{background:linear-gradient(180deg,#f3f4f6,#f8fafc)}
[data-theme='light'] .controls input[type=search],
[data-theme='light'] .controls select,
[data-theme='light'] .form input,
[data-theme='light'] .form textarea,
[data-theme='light'] .form select{background:#ffffff}

/* 亮色主题下的备注背景微调 */
[data-theme='light'] .notes,
[data-theme='light'] .node-notes{
  background: rgba(0,0,0,0.02);
}

/* 视图切换器样式 */
.view-tabs{
  display:flex;
  gap:2px;
  margin:16px 0 8px 0;
  background:var(--border);
  border-radius:8px;
  padding:4px;
}

.tab-btn{
  flex:1;
  padding:8px 16px;
  border:none;
  background:transparent;
  color:var(--muted);
  border-radius:6px;
  cursor:pointer;
  transition:all 0.2s ease;
  font-weight:500;
}

.tab-btn:hover{
  background:var(--card);
  color:var(--text);
}

.tab-btn.active{
  background:var(--accent);
  color:white;
  box-shadow:0 2px 4px rgba(0,0,0,0.1);
}

/* 新的分支时间轴样式 */
.timeline{position:relative;display:block;min-height:360px;background:transparent;border-radius:8px;padding:20px;overflow-x:auto;overflow-y:visible;-ms-overflow-style:none;scrollbar-width:none}
/* 时间轴位于 .visual-shell 中，由外层容器控制出血宽度 */
.timeline::-webkit-scrollbar{display:none}

/* 边缘渐变蒙版：已按用户要求移除 */

/* SVG容器用于绘制连接线 */
.tl-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}

/* 顶层覆盖的 SVG，用于悬浮时将连接线置顶（仍低于悬浮卡片本身） */
.tl-svg.overlay{
  z-index: 900;
  pointer-events: none;
}

/* 分支节点样式 */
.branch-node{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  /* 不对 transform 做过渡，避免滚动时动画卡顿 */
  transition: box-shadow .2s ease;
  cursor:pointer;
  position:relative;
  /* 由 JS 设置 --stick-x 与 --stack-offset 来驱动水平/纵向偏移，避免频繁 left/top 触发布局 */
  transform: translate(var(--stick-x, 0px), var(--stack-offset, 0px));
  will-change: transform;
}

.branch-node:hover{
  /* 叠加纵向轻微浮起，同时保持水平粘滞与堆叠偏移 */
  transform: translate(
    var(--stick-x, 0px),
    calc(var(--stack-offset, 0px) - 2px)
  );
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
  z-index: 1000;
}

.node-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}

.node-header .avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--border);
}

.node-info{
  flex:1;
}

.node-name{
  margin:0;
  font-size:16px;
  font-weight:600;
  color:var(--text);
}

.node-date{
  font-size:12px;
  color:var(--muted);
  margin-top:2px;
}

.node-content{display:none;margin-bottom:12px}
.branch-node:hover .node-content{display:block}

/* 统一悬浮容器：内容与操作一起出现 */
.node-popover{
  position:absolute;
  left:12px;
  right:12px;
  top:calc(100% - 8px);
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px;
  box-shadow:0 12px 28px rgba(0,0,0,0.35);
  z-index:10;
  display:none;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease;
}
.branch-node:hover .node-popover{display:block;opacity:1;transform:translateY(0)}

.node-tags{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:8px;
}

.node-notes{
  font-size:13.5px;
  color:var(--text);
  margin:0;
  line-height:1.7;
  /* 展示完整内容：不截断 */
  max-height:none;
  overflow:visible;
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
.node-notes::before{ content:none; }
.node-notes a{ color: var(--accent); text-decoration: none; border-bottom: 1px dashed rgba(34,211,238,.35); }
.node-notes a:hover{ text-decoration: underline; border-bottom-color: transparent; }
/* 渐隐遮罩（底部淡出），提示可滚动查看更多 */
/* 去掉底部渐隐，完整展示 */

.node-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
}

.btn-edit, .btn-delete{
  padding:4px 8px;
  font-size:12px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--card);
  color:var(--text);
  cursor:pointer;
  transition:all 0.2s ease;
}

.btn-edit:hover{
  background:var(--accent);
  color:white;
}

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

/* 移除横向连接线 */
.tl-conn{display:none}

/* Branch: axis -> lane (not used) */
.tl-branch{display:none}

/* Compact item (avatar + name) */
.tl-compact{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.tl-compact .avatar.sm{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.tl-compact .name{font-weight:600;color:var(--text)}

/* 左右交替对齐 */
.tl-item.side-left .tl-compact{justify-self:end}
.tl-item.side-right .tl-compact{justify-self:start}
.tl-item.side-left .tl-time{left:50%;transform:translateX(-100%);margin-right:8px}
.tl-item.side-right .tl-time{left:50%;transform:translateX(8px)}

/* Popover panel */
.tl-popover{position:relative}
.tl-popover > .tl-card{
  position:absolute;
  z-index:20;
  min-width:260px;
  max-width:min(520px, 90vw);
  /* 允许内容较多时滚动，而不是被裁切 */
  max-height: min(60vh, 520px);
  overflow: auto;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  transform:translateY(6px);
  display:none;
}
/* 展开状态：不限制高度 */
.tl-popover > .tl-card.expanded{
  max-height: none;
}
.tl-item.side-right .tl-popover > .tl-card{left:calc(50% + 16px + var(--side-offset, 0px))}
.tl-item.side-left  .tl-popover > .tl-card{right:calc(50% + 16px + var(--side-offset, 0px))}

/* Hover to preview */
.tl-item:hover .tl-popover > .tl-card{display:block}
/* Click to pin open */
.tl-item.open .tl-popover > .tl-card{display:block}

/* Prefer click over hover: when未open则仅在同一item悬浮显示 */
.tl-item:not(.open):not(:hover) .tl-popover > .tl-card{display:none}

@media (max-width: 480px){
  .tl-popover > .tl-card{min-width:220px}
  .tl-compact .name{font-size:.95rem}
}

/* Toast notifications */
.toast-container{
  position:fixed;
  right:16px;
  bottom:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:2000;
  pointer-events:none; /* 允许点击穿透空白区域 */
}

.toast{
  pointer-events:auto; /* 自身可点击关闭 */
  min-width:240px;
  max-width:380px;
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--text);
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,0.35);
  padding:10px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  opacity:.98;
  transform:translateX(16px);
}

.toast .toast-content{flex:1; font-size:14px; line-height:1.3}
.toast .toast-close{
  border:none; background:transparent; color:inherit; cursor:pointer; font-size:18px; line-height:1; opacity:.8
}
.toast .toast-close:hover{opacity:1}

/* Variants */
.toast-info{ border-left:4px solid #38bdf8; }
.toast-success{ border-left:4px solid #22c55e; }
.toast-warning{ border-left:4px solid #f59e0b; }
.toast-error{ border-left:4px solid #ef4444; }

/* Animations */
@keyframes toast-in {
  from { opacity:0; transform: translateX(24px) translateY(8px); }
  to   { opacity:1; transform: translateX(0) translateY(0); }
}
@keyframes toast-out {
  from { opacity:1; transform: translateX(0) translateY(0); }
  to   { opacity:0; transform: translateX(24px) translateY(8px); }
}
.toast.enter{ animation: toast-in .22s ease-out both; }
.toast.leaving{ animation: toast-out .22s ease-in both; }

/* Modal (login) */
.modal{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,0.5);
  z-index: 1500;
}
.modal .modal-content{
  max-width: 360px;
  width: calc(100vw - 40px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.modal .error{ margin-top: 4px; }

/* Editor modal: wider than login */
#editorModal .modal-content{
  max-width: 720px;
}

/* Password eye toggle */
.pwd-wrapper{ position: relative; }
.pwd-wrapper input{ padding-right: 40px; }
.pwd-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
}
.icon-btn.sm{ width:30px; height:30px; border-radius:8px; }
.pwd-toggle .icon-eye-off{ display:none; }
/* when input is text, prefer eye-off; this will be toggled by JS via data-visible attribute */
.pwd-wrapper[data-visible="true"] .icon-eye{ display:none; }
.pwd-wrapper[data-visible="true"] .icon-eye-off{ display:inline; }

 

/* Tag input (chips + suggestions) */
.tag-input{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#0b1222;
  position: relative;
}
[data-theme='light'] .tag-input{ background:#ffffff; }

.tag-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.tag.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#0b1222;
  color:var(--text);
  font-size:12px;
}
[data-theme='light'] .tag.chip{ background:#f3f4f6; }

.tag-remove{
  border:none;
  background:transparent;
  color:inherit;
  cursor:pointer;
  font-size:14px;
  line-height:1;
  opacity:.9;
}
.tag-remove:hover{ opacity:1; }

#fTagsInput{
  min-width:120px;
  flex:1 1 160px;
  border:none;
  background:transparent;
  color:var(--text);
  outline:none;
  padding:6px 4px;
}

.tag-suggest{
  position:absolute;
  left:8px;
  right:8px;
  top:calc(100% + 6px);
  margin:0;
  padding:6px;
  list-style:none;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,0.35);
  z-index:1200;
}

.tag-suggest-item{
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  color:var(--text);
}
.tag-suggest-item:hover,
.tag-suggest-item.active{
  background:var(--card);
}