:root{
  --bg:#0F1923; --panel:#141F2A; --panel2:#1B2937; --line:#2A3B4D; --line2:#46586A;
  --red:#FF4655; --red-dk:#C8323F; --teal:#00C8C8;
  --txt:#ECE8E1; --txt2:#8FA3B3; --txt3:#5B6B7A;
  --paper:#F5F2EA; --paper-dk:#EAE6DC; --paper-line:#C9C2B2;
  --font-d:"Rajdhani","DIN Alternate","Bahnschrift","Noto Sans SC","PingFang SC",system-ui,sans-serif;
  --font-b:"Noto Sans SC","PingFang SC","Rajdhani",system-ui,sans-serif;
  --cut:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  --cut-sm:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  --cut-tr:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%} /* iOS / 微信内置浏览器不自动放大文字，字号以 CSS 为准 */
body{
  background:var(--bg); color:var(--txt); font-family:var(--font-b); font-size:14px;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 8px),
    radial-gradient(1200px 500px at 80% -10%, rgba(255,70,85,.07), transparent 60%),
    radial-gradient(900px 500px at 0% 110%, rgba(0,200,200,.05), transparent 60%);
  display:flex; flex-direction:column;
}

/* ============ 顶栏 ============ */
body > header{
  height:58px; flex:none; display:flex; align-items:center; gap:16px;
  padding:0 18px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
}
.title-block{min-width:0}
.title-block h1{font-family:var(--font-d); font-size:17px; letter-spacing:.08em; font-weight:700; white-space:nowrap}
.title-block h1 em{color:var(--teal); font-style:normal}
/* [TITLE] 标题行：标题 + 铅笔；改名时标题变输入框 */
.title-row{display:flex; align-items:center; gap:6px; min-width:0}
.title-row h1{min-width:0; overflow:hidden; text-overflow:ellipsis}
#titleEdit{flex:none; width:24px; height:24px; border:1px solid transparent; background:transparent; color:var(--txt3); cursor:pointer; font-size:14px; line-height:1; padding:0}
#titleEdit:hover{color:var(--teal); border-color:var(--line2)}
#taskTitleIn{
  min-width:0; width:min(320px, 50vw); background:var(--panel2); border:1px solid var(--teal); color:var(--txt); outline:none;
  font-family:var(--font-d); font-size:15px; font-weight:700; letter-spacing:.04em; padding:3px 6px;
}
.title-block .sub{font-size:11px; color:var(--txt2); letter-spacing:.1em; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.spacer{flex:1}
.btn{
  appearance:none; border:1px solid var(--line); background:var(--panel2); color:var(--txt);
  font-family:var(--font-d); font-size:13px; letter-spacing:.1em; font-weight:600;
  padding:9px 16px; cursor:pointer; white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.btn:hover{background:var(--red); border-color:var(--red); color:#fff}
.btn.primary{background:var(--red); border-color:var(--red); color:#fff}
.btn.primary:hover{filter:brightness(1.12)}
/* 顶栏导出 / 保存：游戏菜单按钮的光效——上亮下深的竖向渐变、发亮细边、内侧一圈柔光、外侧淡红晕 */
#flowExpBtn, #edSave{
  background:linear-gradient(180deg,#FF7A85 0%,#FF4655 55%,#E8384A 100%); border-color:#FFA3AB;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 14px -8px rgba(160,20,40,.45), 0 0 10px rgba(255,70,85,.45);
  text-shadow:0 1px 1px rgba(120,10,25,.35);
}
#flowExpBtn:hover, #edSave:hover{filter:brightness(1.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.4), inset 0 -8px 14px -8px rgba(160,20,40,.45), 0 0 16px rgba(255,70,85,.65)}