:root{
  --bg:#ffffff;
  --ink:#0a0a0a;
  --ink-soft:#1d1d1d;
  --line:#e7e6e1;
  --line-soft:#f1efe9;
  --muted:#8a877e;
  --accent:#2c5f2d;
  --sans:'Inter','Noto Sans SC','PingFang SC',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --fang:'Ma Shan Zheng','FangSong','STFangsong','仿宋','Songti SC',serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  overflow:hidden;
  cursor: default;
}

/* 极淡纸质颗粒 */
.grain{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.03;
  background-image:
    radial-gradient(rgba(0,0,0,.6) 1px, transparent 1px),
    radial-gradient(rgba(0,0,0,.4) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode:multiply;
}

/* ============ 顶部信息条 ============ */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:44px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  z-index:5;
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink)}
.brand-mark{color:var(--accent);font-size:10px}
.brand-name{font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.25em}

/* ============ 舞台：左右两半 ============ */
.stage{
  position:absolute;
  top:44px;left:0;right:0;bottom:0;
  display:flex;
  z-index:2;
}
.half{
  position:relative;
  flex:1 1 0;
  height:100%;
  min-width:0;
}
/* 左侧由 3/5 缩小 1/3 后约 2/5（约 40%），右侧吃下剩余 */
.half.left{flex:2 1 0}
.half.right{flex:3 1 0}
.half.left{
  border-right:1px solid var(--line-soft);
  overflow-y:auto;
  overflow-x:hidden;
}
.half.right{
  overflow:hidden;
}

/* 左侧请输入文本提示：细仿宋 */
.hint{
  position:fixed;
  top:50%;left:20%;
  transform:translate(-50%, -50%);
  font-family: var(--fang);
  font-weight:300;
  font-size:20px;
  color:var(--muted);
  letter-spacing:.18em;
  font-style:normal;
  transition:opacity .6s ease;
  z-index:3;
  pointer-events:none;
}
.hint.gone{opacity:0}

.canvas{
  position:relative;
  min-height: calc(100vh - 44px);
  padding:0 0 200px 0;
  cursor: default;
}
.canvas-right{
  position:relative;
  width:100%;height:100%;
  overflow:hidden;
  cursor: default;
}

/* 左侧滚动条简约化 */
.half.left::-webkit-scrollbar{width:8px}
.half.left::-webkit-scrollbar-track{background:transparent}
.half.left::-webkit-scrollbar-thumb{
  background:#d6d4cb;
  border-radius:4px;
}
.half.left::-webkit-scrollbar-thumb:hover{background:#a8a59a}
.half.left{scrollbar-width:thin;scrollbar-color:#d6d4cb transparent}

/* ============ 上传照片按钮 + 照片背景 ============ */
.upload-dot{ background:#000 !important; }
.upload-btn.open .upload-dot{ background:#000 !important; box-shadow:0 0 0 4px rgba(0,0,0,.15); }

/* 照片栈：容器，绝对定位，固定在最底层 */
.photo-stack{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
/* 单张照片：随机旋转 / 随机位置 */
.photo-item{
  position:absolute;
  max-width: 70%;
  max-height: 70%;
  filter: contrast(1.05) saturate(.95);
  box-shadow: 0 8px 28px rgba(0,0,0,.18), 0 1px 0 rgba(255,255,255,.5) inset;
  background:#fff;
  padding:6px;
  /* 堆叠入场 */
  transform-origin: center;
  animation: photoIn .6s cubic-bezier(.2,.7,.2,1) both;
  /* 可拖动 */
  cursor: grab;
  user-select: none;
  pointer-events: auto;
  transition: box-shadow .2s ease;
}
.photo-item > img{
  display:block;
  width:100%;
  height:auto;
  max-height: inherit;
  object-fit: contain;
  user-drag: none;
  -webkit-user-drag: none;
  pointer-events: none;  /* 让 click 落到 wrap 本身 */
}
.photo-item.dragging{
  cursor: grabbing;
  box-shadow: 0 16px 38px rgba(0,0,0,.28), 0 1px 0 rgba(255,255,255,.5) inset;
  transition: none;
}
.photo-item.on-top{
  box-shadow: 0 16px 38px rgba(0,0,0,.28), 0 0 0 2px rgba(44,95,45,.6), 0 1px 0 rgba(255,255,255,.5) inset;
}
@keyframes photoIn{
  from{ opacity:0; transform: scale(.85) rotate(var(--rot,0deg)) translateY(20px); }
  to  { opacity:1; transform: scale(1)    rotate(var(--rot,0deg)) translateY(0);     }
}

.photo-clear{
  position:absolute;
  top:14px;right:88px;     /* 避开清空按钮 */
  z-index:3;
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  font-family:var(--sans);
  font-size:14px;line-height:1;
  color:var(--muted);
  width:28px;height:28px;
  cursor:pointer;
  transition: all .2s ease;
  display:none;
}
.photo-clear.show{ display:block; }
.photo-clear:hover{ color:var(--ink); border-color:var(--ink); }

/* 霉菌要飘在照片上 —— 它们 z-index > .photo-stack */
.canvas-right{ z-index: 1; }
/* 照片可超出画布右侧：把 photo-stack 设为 overflow:visible，
   但霉菌层还是 .canvas-right 自身 overflow:hidden */
.photo-stack{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow: visible !important;   /* 关键：允许照片超出 */
}
.photo-item, .photo-stack{ z-index: 0; }

/* 控制点：默认隐藏，选中 / hover 时显示 */
.photo-item .handles-wrap{
  position:absolute;
  inset:0;
  pointer-events:none;   /* wrap 不接收事件，但内部 handle 接收 */
  z-index: 4;
}
.photo-item .handle{
  position:absolute;
  width:12px;height:12px;
  background:#fff;
  border:1px solid #444;
  border-radius:50%;
  z-index:5;
  pointer-events:auto !important;  /* 关键：覆盖 wrap 的 none */
  display:none;
}
.photo-item.selected .handle,
.photo-item:hover .handle{ display:block; }
/* handle 不接受 hover-only：切换到 selected 后强制显示 */
.photo-item.selected .handle{ display:block !important; }
.photo-item .h-rotate{ left:50%; top:-22px; transform:translate(-50%, -50%); cursor: alias; background:#fff; border-color:#444; }
.photo-item .h-nw{ left:-6px;  top:-6px;  cursor:nwse-resize; }
.photo-item .h-ne{ right:-6px; top:-6px;  cursor:nesw-resize; }
.photo-item .h-sw{ left:-6px;  bottom:-6px; cursor:nesw-resize; }
.photo-item .h-se{ right:-6px; bottom:-6px; cursor:nwse-resize; }
.photo-item .h-del{
  left:50%; top:-22px;
  width:14px;height:14px;
  transform: translate(calc(-50% + 16px), -50%);
  cursor:pointer;
  background:#fff;
  border-color:#c33;
  color:#c33;
  font-size:10px;line-height:12px;text-align:center;
}
.photo-item.selected{ outline:1px dashed rgba(44,95,45,.55); outline-offset: 2px; }

/* ============ 霉菌"字模" ============ */
.glyph{
  position:absolute;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  pointer-events:auto;
  cursor:pointer;
  will-change: transform, opacity;
  transform-origin:center;
  transition: opacity .25s ease, transform .25s ease;
}
.glyph img{
  display:block;
  width:100%;height:100%;
  object-fit:contain;
}
.glyph .tag{
  position:absolute;
  bottom:-14px;left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:.18em;
  color:rgba(0,0,0,.35);
  opacity:0;
  transition:opacity .3s ease;
  pointer-events:none;
}
.glyph:hover .tag{opacity:1}

/* 右侧夸张重组区：glyph 默认层级低，不显示 tag */
.glyph.wild{cursor:pointer}
/* 霉菌被选中后的视觉提示：用一个不可见的 max-size 罩标记选中，handle 由 JS 注入 */
.glyph.wild.selected{
  outline: 1px dashed rgba(44,95,45,.55);
  outline-offset: 1px;
}
.glyph-handle{
  position:absolute;
  width:11px;height:11px;
  background:#fff;border:1px solid #444;
  border-radius:50%;
  z-index: 9999;
  pointer-events:auto;
  display:block;
}
.glyph-handle.gh-rotate{ left:50%; top:-18px; transform:translate(-50%,-50%); cursor: alias; }
.glyph-handle.gh-se{ right:-5px; bottom:-5px; cursor:nwse-resize; }

/* 左侧一键清空 */
.left-clear{
  position:absolute;
  top:14px;right:18px;
  z-index:3;
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--muted);
  padding:6px 12px;
  cursor:pointer;
  transition: all .2s ease;
}
.left-clear:hover{
  color:var(--ink);
  border-color:var(--ink);
}

/* 右侧一键清空 */
.right-clear{
  position:absolute;
  top:14px;right:18px;
  z-index:3;
  border:1px solid var(--line);
  background:rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  font-family:var(--sans);
  font-size:10px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--muted);
  padding:6px 12px;
  cursor:pointer;
  transition: all .2s ease;
}
.right-clear:hover{
  color:var(--ink);
  border-color:var(--ink);
}

/* ============ 左下角四黑点 ============ */
.dots{
  position:fixed;
  left:32px;bottom:32px;
  z-index:6;
  display:flex;align-items:center;gap:14px;
}
.dot-btn{
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:0;
  background:transparent;
  border:0;
  cursor:pointer;
  color:var(--muted);
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.05em;
  font-style:normal;
  transition: color .25s ease;
}
.d-dot{
  width:18px;height:18px;border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 0 0 rgba(0,0,0,.35);
  animation: pulse 2.8s ease-in-out infinite;
  transition: transform .25s ease;
}
.dot-btn:nth-child(2) .d-dot{animation-delay:.7s}
.dot-btn:nth-child(3) .d-dot{animation-delay:1.4s}
.dot-btn:nth-child(4) .d-dot{animation-delay:2.1s}
.d-text{
  opacity:0;
  transform:translateX(-4px);
  transition: opacity .25s ease, transform .25s ease;
  white-space:nowrap;
}
.dot-btn:hover{color:var(--ink)}
.dot-btn:hover .d-text{opacity:1;transform:translateX(0)}
.dot-btn:hover .d-dot{transform:scale(1.18)}
.dot-btn.open .d-dot{
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(44,95,45,.12);
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,.28)}
  50%{box-shadow:0 0 0 10px rgba(0,0,0,0)}
}

/* ============ 图谱 ============ */
.atlas{
  position:fixed;
  left:0;right:0;bottom:0;
  max-height:80vh;
  background:#fff;
  border-top:1px solid var(--line);
  transform: translateY(100%);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
  z-index:8;
  display:flex;flex-direction:column;
}
.atlas.open{transform:translateY(0)}
.atlas-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 28px;
  border-bottom:1px solid var(--line-soft);
}
.atlas-title{
  font-family:var(--sans);
  font-size:16px;
  font-weight:500;
  letter-spacing:.05em;
}
.atlas-close{
  border:0;background:transparent;
  font-size:22px;color:var(--muted);
  cursor:pointer;line-height:1;
  padding:4px 8px;
}
.atlas-close:hover{color:var(--ink)}

.atlas-grid{
  display:grid;
  grid-template-columns: repeat(13, 1fr);
  gap:14px;
  padding:24px 28px;
  overflow:auto;
}
.atlas-cell{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 4px;
  border:1px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition: border-color .2s ease, background .2s ease;
}
.atlas-cell:hover{
  border-color:var(--line);
  background:var(--line-soft);
}
.atlas-cell img{
  width:42px;height:42px;object-fit:contain;
}
.atlas-cell .letter{
  font-family:var(--sans);
  font-size:13px;
  color:var(--ink);
}

/* ============ 记录 ============ */
.log{
  position:fixed;
  right:0;top:44px;bottom:0;
  width:min(420px, 92vw);
  background:#fff;
  border-left:1px solid var(--line);
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
  z-index:9;
  display:flex;flex-direction:column;
}
.log.open{transform:translateX(0)}
.log-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--line-soft);
}
.log-title{
  font-family:var(--sans);
  font-size:16px;
  font-weight:500;
  letter-spacing:.05em;
}
.log-actions{display:flex;align-items:center;gap:6px}
.log-btn{
  border:1px solid var(--line);
  background:#fff;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.05em;
  color:var(--muted);
  padding:5px 10px;
  cursor:pointer;
  transition: all .2s ease;
}
.log-btn:hover{color:var(--ink);border-color:var(--ink)}
.log-close{
  border:0;background:transparent;
  font-size:22px;color:var(--muted);
  cursor:pointer;line-height:1;
  padding:4px 8px;
}
.log-close:hover{color:var(--ink)}

.log-body{
  flex:1;
  overflow:auto;
  padding:16px 22px;
}
.log-empty{
  font-family:var(--sans);
  font-size:13px;
  color:var(--muted);
  text-align:center;
  margin-top:80px;
  letter-spacing:.05em;
}

.entry{
  padding:14px 0;
  border-bottom:1px solid var(--line-soft);
}
.entry:last-child{border-bottom:0}
.entry.draft .entry-orig{
  color:var(--muted);
  font-style:italic;
}
.draft-cursor{
  display:inline-block;
  color:var(--accent);
  margin-left:2px;
  animation: blink .8s steps(2, end) infinite;
}
@keyframes blink{ to{ visibility:hidden; } }
.entry-head{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  color:var(--muted);
  margin-bottom:6px;
}
.entry-head .time{color:#bcb9af}
.entry-orig{
  font-family:var(--sans);
  font-size:18px;
  font-weight:400;
  letter-spacing:.12em;
  color:var(--ink);
  word-break:break-all;
  min-height:1.4em;
}

/* ============ AI 面板 ============ */
.ai{
  position:fixed;
  right:0;top:44px;bottom:0;
  width:min(440px, 92vw);
  background:#fff;
  border-left:1px solid var(--line);
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
  z-index:10;
  display:flex;flex-direction:column;
}
.ai.open{transform:translateX(0)}
.ai-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;
  border-bottom:1px solid var(--line-soft);
}
.ai-title{
  font-family:var(--sans);
  font-size:16px;
  font-weight:500;
  letter-spacing:.05em;
}
.ai-close{
  border:0;background:transparent;
  font-size:22px;color:var(--muted);
  cursor:pointer;line-height:1;
  padding:4px 8px;
}
.ai-close:hover{color:var(--ink)}

.ai-tabs{
  display:flex;
  border-bottom:1px solid var(--line-soft);
}
.ai-tab{
  flex:1;
  border:0;
  background:transparent;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.15em;
  color:var(--muted);
  padding:14px 0;
  cursor:pointer;
  position:relative;
  transition: color .2s ease;
}
.ai-tab:hover{color:var(--ink)}
.ai-tab.active{color:var(--ink);font-weight:500}
.ai-tab.active::after{
  content:"";
  position:absolute;
  left:50%;bottom:-1px;
  transform:translateX(-50%);
  width:32px;height:1px;
  background:var(--ink);
}

.ai-body{
  padding:22px;
  display:flex;flex-direction:column;gap:18px;
  flex:1;
  overflow:auto;
}
.ai-panel{display:none;flex-direction:column;gap:14px}
.ai-panel.active{display:flex}

.ai-hint{
  font-family:var(--sans);
  font-size:12px;
  color:var(--muted);
  letter-spacing:.04em;
}
.ai-row{display:flex;gap:8px}
.ai-row input{
  flex:1;
  border:1px solid var(--line);
  background:#fff;
  font-family:var(--sans);
  font-size:13px;
  letter-spacing:.05em;
  color:var(--ink);
  padding:9px 12px;
  outline:none;
  transition: border-color .2s ease;
}
.ai-row input:focus{border-color:var(--ink)}
.ai-row button{
  border:1px solid var(--ink);
  background:var(--ink);
  color:#fff;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.15em;
  padding:9px 16px;
  cursor:pointer;
  transition: all .2s ease;
}
.ai-row button:hover{background:#fff;color:var(--ink)}
.ai-row button:disabled{opacity:.5;cursor:not-allowed}

.ai-result{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.85;
  color:var(--ink);
  background:var(--line-soft);
  padding:18px;
  border-radius:2px;
  min-height:140px;
  white-space:pre-wrap;
  word-break:break-word;
}
.ai-result.zh{
  font-family:'Noto Serif SC','Songti SC',serif;
  font-size:15px;
  letter-spacing:.02em;
}
.ai-result.loading{
  color:var(--muted);
  font-style:italic;
}

/* 段分隔 */
.ai-sep{
  height:1px;
  background:var(--line-soft);
  margin:4px 0;
}

.zh-use-btn{
  align-self:flex-start;
  border:1px solid var(--accent);
  background:#fff;
  color:var(--accent);
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.15em;
  padding:9px 16px;
  cursor:pointer;
  transition: all .2s ease;
}
.zh-use-btn:hover{background:var(--accent);color:#fff}
.zh-use-btn:disabled{opacity:.5;cursor:not-allowed}

.backdrop{
  position:fixed;inset:0;
  background:rgba(255,255,255,.45);
  backdrop-filter: blur(2px);
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
  z-index:7;
}
.backdrop.show{opacity:1;pointer-events:auto}

/* ============ 截图 toast ============ */
.shot-toast{
  position:fixed;
  left:50%;top:60px;
  transform: translate(-50%, -10px);
  background:var(--ink);
  color:#fff;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.15em;
  padding:10px 18px;
  border-radius:2px;
  z-index:20;
  opacity:0;
  pointer-events:none;
  transition: opacity .3s ease, transform .3s ease;
}
.shot-toast.show{
  opacity:1;
  transform: translate(-50%, 0);
}

/* ============ 响应式 ============ */
@media (max-width: 760px){
  .atlas-grid{grid-template-columns: repeat(6, 1fr)}
  .log,.ai{width:100vw}
  .stage{flex-direction:column}
  .half.left{border-right:0;border-bottom:1px solid var(--line-soft)}
  .hint{left:50%}
}