/* 修仙打卡 · 像素夜空风 */
:root {
  --bg: #13111d;
  --panel: #1e1a2d;
  --panel2: #262139;
  --line: #3d3558;
  --shadow: #07060c;
  --text: #efe6d0;
  --dim: #9a90b0;
  --gold: #f2c14e;
  --jade: #4fd1a5;
  --red: #e05a5a;
  --blue: #6b8cf0;
  --font: "Fusion Pixel 12px Proportional zh_hans", "Zpix", "Ark Pixel 12px Proportional zh_cn", "SimSun", "NSimSun", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 8%, #fff6 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 42%, #f2c14e55 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 62%, #fff5 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 88%, #fff6 50%, transparent 51%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 16px 60px;
  -webkit-font-smoothing: none;
}
body.flash { animation: flash 1.2s ease-out; }
body.shake { animation: shake .7s steps(7); }
@keyframes shake { 0%, 100% { transform: none; } 15%, 55% { transform: translate(-6px, 2px); } 35%, 75% { transform: translate(6px, -2px); background-color: #3a1218; } }
.big-name.red, .gain.red { color: var(--red); }
.log-breakfail .x { color: var(--red); }
@keyframes flash { 0%, 30% { background-color: #fff6d8; } 100% { background-color: var(--bg); } }

h2 { font-size: 20px; margin: 0 0 12px; color: var(--gold); letter-spacing: 1px; }
h2 small { color: var(--dim); font-size: 14px; margin-left: 8px; letter-spacing: 0; }
h4 { margin: 14px 0 8px; color: var(--dim); font-weight: normal; }
p { margin: 6px 0; }
b { color: #fff; }
.gold { color: var(--gold); }
.jade { color: var(--jade); }
.red { color: var(--red); }
.dim { color: var(--dim); }

/* 像素描边盒子 */
.px {
  border: 3px solid var(--line);
  box-shadow: 4px 4px 0 var(--shadow), inset 0 0 0 1px #0004;
  border-radius: 0;
}

/* ---------- 顶部角色栏 ---------- */
.top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 20px;
  background: linear-gradient(180deg, #221d35, var(--panel));
  padding: 14px 18px;
  margin-bottom: 14px;
}
#avatar {
  grid-row: span 2;
  width: 144px; height: 144px;
  image-rendering: pixelated;
  align-self: center;
  border: 2px solid var(--line);
  background: #0d0b15;
}
@keyframes float { 50% { transform: translateY(-5px); } }
.hero-name { color: var(--dim); font-size: 14px; }
.hero-realm { font-size: 30px; line-height: 1.2; margin: 2px 0 8px; text-shadow: 3px 3px 0 var(--shadow); }
#hero .btn { margin-top: 8px; }
#stats { display: flex; flex-wrap: wrap; gap: 10px; }
.stat { background: var(--panel2); border: 2px solid var(--line); padding: 4px 12px; min-width: 96px; }
.stat .k { color: var(--dim); font-size: 13px; }
.stat .v { font-size: 20px; }
.stat .sub { color: var(--dim); font-size: 12px; }
.stat.heart { min-width: 200px; flex: 1; }

.tag { display: inline-block; font-size: 12px; padding: 0 6px; margin-left: 8px; border: 2px solid var(--line); color: var(--dim); vertical-align: middle; line-height: 1.5; }
.tag.red { border-color: var(--red); color: var(--red); }

/* ---------- 进度条 ---------- */
.bar {
  position: relative;
  height: 22px;
  background: #0d0b15;
  border: 2px solid var(--line);
  margin: 4px 0;
  overflow: hidden;
}
.bar i {
  display: block; height: 100%;
  background: repeating-linear-gradient(90deg, var(--c, var(--gold)) 0 8px, var(--c2, #d9a632) 8px 10px);
  transition: width .4s steps(8);
}
.bar span { position: absolute; inset: 0; text-align: center; font-size: 13px; line-height: 18px; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.bar.demon i { --c: var(--red); --c2: #b04444; }
.bar.goal i, .bar.skillbar i { --c: var(--jade); --c2: #36a884; }
.bar.art i { --c: var(--blue); --c2: #5270c8; }
.bar.time { height: 14px; }
.bar.time i { --c: var(--gold); transition: width 1s linear; }
.bar .mark { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; opacity: .7; }

/* ---------- 标签页 ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tabs button {
  font: inherit; color: var(--dim); background: var(--panel);
  border: 3px solid var(--line); padding: 6px 14px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow);
}
.tabs button:hover { color: var(--text); }
.tabs button.on { color: var(--bg); background: var(--gold); border-color: var(--gold); }
.tabs .hist { margin-left: auto; display: flex; gap: 6px; }
.tabs .hist button { color: var(--jade); }
.tabs .hist button:disabled { opacity: .35; cursor: default; }

/* ---------- 面板 ---------- */
.panel { background: var(--panel); padding: 16px 18px; margin-bottom: 14px; }
.banner { background: #2a2340; padding: 10px 16px; margin-bottom: 14px; color: var(--gold); border-color: var(--gold); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.two .panel { margin-bottom: 14px; }
.hint { color: var(--dim); font-size: 14px; }
.empty { color: var(--dim); padding: 10px 0; }

/* ---------- 表单 ---------- */
.form { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 10px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--dim); min-width: 150px; flex: 1; }
.form label.wide { flex-basis: 100%; }
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--text);
  background: #0d0b15; border: 2px solid var(--line);
  padding: 6px 8px; border-radius: 0; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
textarea { resize: vertical; }

/* ---------- 按钮 ---------- */
.btn {
  font: inherit; color: var(--text); background: var(--panel2);
  border: 3px solid var(--line); padding: 6px 16px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow);
  display: inline-block; text-align: center;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn.gold { background: var(--gold); border-color: #ffe08a; color: #2a1d00; }
.btn.jade { background: var(--jade); border-color: #9af0d3; color: #062a1e; }
.btn.red { background: #5a2530; border-color: var(--red); color: #ffd6d6; }
.btn.off { opacity: .5; }
.btn.big { font-size: 18px; padding: 10px 22px; }
.btn.pulse { animation: pulse 1s steps(2) infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px var(--gold); } }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mini {
  font: inherit; font-size: 12px; color: var(--dim); background: none;
  border: 2px solid var(--line); cursor: pointer; padding: 0 6px;
}
.mini:hover { color: var(--red); border-color: var(--red); }

/* ---------- 时光流 ---------- */
.since { font-size: 18px; margin-bottom: 10px; }
.since b { font-size: 22px; }
.done-btn { width: 100%; margin: 4px 0 10px; }
.cat-grp { margin-bottom: 8px; }
.cat-title { color: var(--dim); font-size: 13px; margin-bottom: 4px; }
.cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cat {
  font: inherit; font-size: 15px; color: var(--text); background: var(--panel2);
  border: 3px solid var(--line); padding: 6px 12px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow);
}
.cat:hover { filter: brightness(1.2); }
.cat:active { transform: translate(3px, 3px); box-shadow: none; }
.cat.skill { border-color: #5b4a1e; }
.cat.life { color: #c3cbe0; }
.cat.demon { border-color: var(--red); color: #ffb3b3; }
.cat.next { background: var(--gold); color: #2a1d00; border-color: #ffe08a; }
.flow-extra { margin-top: 12px; }
.adjust summary { cursor: pointer; color: var(--dim); font-size: 14px; margin: 4px 0 8px; }
.banner a { color: var(--jade); }
.gaps { margin: 8px 0; color: var(--dim); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mini.gap { color: var(--gold); border-color: var(--gold); padding: 2px 8px; }
.log-life .x { color: #aab3cc; }

.split-btn { margin: 4px 0 6px; }
.daylegend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--dim); font-size: 13px; margin-bottom: 10px; }
.daylegend i { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; border: 1px solid var(--line); }
.daylegend i.open { background: repeating-linear-gradient(45deg, #f2c14e88 0 3px, transparent 3px 6px) !important; }
.duty { background: #171425; border: 2px dashed var(--line); padding: 8px 12px; margin-bottom: 8px; }
.duty.met { border: 2px solid var(--jade); background: #10261f; }
.duty-title { color: var(--gold); margin-bottom: 4px; }
.duty.met .duty-title { color: var(--jade); }
.duty ul { list-style: none; margin: 0; padding: 0; }
.duty li { padding: 2px 0; color: var(--dim); }
.duty li.ok { color: var(--text); }
.today-skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.ts { background: var(--panel2); border: 2px solid var(--line); padding: 2px 8px; font-size: 14px; }
.ts.main { border-color: #5b4a1e; }
.ts.aux { border-color: #235a4a; }
.ts small { color: var(--jade); }
.req-box { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.req-box .dim { flex-basis: 100%; font-size: 14px; }
.form label.chk { flex-direction: row; align-items: center; min-width: 0; flex: 0 0 auto; color: var(--text); }
.chk input { width: auto; }
.modal-box.wide-modal { max-width: 640px; }
.split-row { display: grid; grid-template-columns: 1.3fr .5fr .8fr 1.5fr; gap: 6px; margin-bottom: 6px; }
#split-left { font-size: 14px; margin-top: 8px; }

/* ---------- 藏经阁 ---------- */
.cal-head, .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-head span { text-align: center; color: var(--dim); font-size: 13px; }
.cal-day { min-height: 54px; background: #0d0b15; border: 2px solid #2c2640; padding: 2px 6px; font-size: 13px; display: flex; flex-direction: column; }
.cal-day .d { color: var(--dim); }
.cal-day.has { background: #3a2f12; border-color: var(--gold); }
.cal-day.has b { color: var(--gold); font-size: 16px; }
.cal-day.today { outline: 2px solid var(--jade); }
.cal-day.future { opacity: .35; }
.log-publish .x { color: var(--gold); }

@media (max-width: 720px) {
  .split-row { grid-template-columns: 1fr 1fr; }
  .split-row { grid-template-columns: 1.4fr .6fr 1fr; }
  .split-row .sp-note { grid-column: span 3; }
}

/* ---------- 计时器 ---------- */
.timer-run { text-align: center; padding: 8px 0; }
.timer-run .mode { color: var(--gold); font-size: 18px; }
.timer-run.break .mode { color: var(--jade); }
.timer-run .clock { font-size: 72px; line-height: 1.1; letter-spacing: 4px; text-shadow: 4px 4px 0 var(--shadow); margin: 6px 0 10px; }
.timer-run .bar { max-width: 460px; margin: 0 auto 12px; }
.timer-run .what { color: var(--dim); margin-bottom: 14px; }

/* ---------- 日志 ---------- */
.logs { list-style: none; margin: 8px 0 0; padding: 0; }
.log { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 2px dashed #2c2640; font-size: 14px; }
.log .t { color: var(--dim); white-space: nowrap; }
.log .x { flex: 1; }
.log .g { color: var(--gold); white-space: nowrap; font-size: 13px; }
.log-demon .x { color: #f0a0a0; }
.log-abort .x { color: var(--dim); }
.log-luck .x, .log-artifact .x, .log-break .x { color: var(--gold); }

/* ---------- 法宝 ---------- */
.art-card { background: var(--panel2); padding: 12px 14px; margin-bottom: 12px; }
.art-top { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.art-top b { font-size: 18px; }
.art-top .mini { margin-left: auto; }
.stages { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.stage {
  font: inherit; font-size: 14px; color: var(--dim); background: #0d0b15;
  border: 2px solid var(--line); padding: 3px 10px; cursor: pointer;
}
.stage.next { color: var(--text); border-color: var(--gold); }
.stage.done { color: #062a1e; background: var(--jade); border-color: var(--jade); }
.vault { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.treasure { background: var(--panel2); padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.treasure small { color: var(--dim); }
.gem { width: 16px; height: 16px; box-shadow: 4px 0 0 #fff3, 0 4px 0 #0005; margin-bottom: 4px; }
.artifact-born { text-align: center; }
.big-name { font-size: 26px; color: var(--gold); margin: 6px 0 10px; text-shadow: 3px 3px 0 var(--shadow); }
.gain { color: var(--gold); font-size: 18px; }
.trial { color: var(--gold); font-size: 18px; }

/* ---------- 功法 ---------- */
.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.skill { background: var(--panel2); padding: 10px 12px; }
.skill.main { border-color: #5b4a1e; }
.skill-top b { font-size: 18px; color: var(--gold); }
.skill.aux .skill-top b { color: var(--jade); }
.skill-sub { color: var(--dim); font-size: 14px; }
.skill small { color: var(--dim); }
.lv { color: var(--dim); }
.lv1 { color: var(--text); } .lv2 { color: var(--jade); } .lv3 { color: var(--blue); }
.lv4 { color: #b36bf0; } .lv5 { color: var(--gold); } .lv6 { color: #fff3c4; text-shadow: 0 0 6px var(--gold); }
.lv-table { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin: 6px 0; font-size: 14px; }
.lv-table small { display: block; color: var(--dim); }

/* ---------- 坊市 ---------- */
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 10px; }
.item { background: var(--panel2); padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.item-name { flex: 1; }
.item-cost { color: var(--gold); font-size: 18px; }

/* ---------- 修炼录 ---------- */
.kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.heat { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.hcol { display: flex; flex-direction: column; gap: 4px; }
.heat i, .legend i { display: block; width: 18px; height: 18px; background: #0d0b15; border: 2px solid #2c2640; }
.legend { display: flex; align-items: center; gap: 4px; color: var(--dim); font-size: 13px; margin-top: 8px; }
.h-1 { opacity: 0; }
.h1 { background: #1f4a3d !important; }
.h2 { background: #2b7a60 !important; }
.h3 { background: #3cb08a !important; }
.h4 { background: var(--jade) !important; border-color: #9af0d3 !important; }
.journal { border-bottom: 2px dashed #2c2640; padding: 6px 0; font-size: 14px; }

/* ---------- 弹窗 / 提示 ---------- */
#modal { position: fixed; inset: 0; background: #000a; display: none; animation: fade .15s ease-out; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
#modal.show { display: flex; }
.modal-box { background: var(--panel); border-color: var(--gold); padding: 18px 22px; max-width: 460px; width: 100%; animation: pop .16s cubic-bezier(.2, .8, .3, 1); will-change: transform, opacity; }
@keyframes pop { from { transform: translateY(10px) scale(.97); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.modal-box h3 { margin: 0 0 10px; color: var(--gold); font-size: 22px; }
.modal-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; justify-content: flex-end; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: calc(100vw - 32px); }
.toast { background: var(--panel2); padding: 8px 14px; font-size: 14px; animation: pop .18s ease-out; transition: opacity .5s; }
.toast.gold { border-color: var(--gold); color: var(--gold); }
.toast.out { opacity: 0; }



/* ---------- 藏经阁（按类别 / 按作品） ---------- */
.lib-chips, .lib-modes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip { font: inherit; font-size: 14px; color: var(--dim); background: #0d0b15; border: 2px solid var(--line); padding: 3px 10px; cursor: pointer; }
.chip small { color: var(--dim); }
.chip.on { color: #2a1d00; background: var(--gold); border-color: #ffe08a; }
.chip.on small { color: #2a1d00; }
.lib-day { border-bottom: 2px dashed #2c2640; padding: 6px 0; }
.lib-date { color: var(--gold); margin-bottom: 2px; }
.lib-row { display: flex; gap: 8px; align-items: baseline; font-size: 14px; padding: 2px 0; flex-wrap: wrap; }
.lib-row .t { color: var(--dim); min-width: 92px; }
.lib-row .x { flex: 1; }
.lib-row .g { color: var(--jade); }
.lib-row .tag { margin-left: 0; }
.cal-day.has b { font-size: 13px; }
.work-card { background: var(--panel2); padding: 8px 12px; margin-bottom: 10px; }
.work-card summary { cursor: pointer; }
.work-skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.gold-tag { border-color: var(--gold); color: var(--gold); }
.cat.split { border-style: dashed; color: var(--jade); }
.form.range { margin-bottom: 4px; }
#p-len { font-size: 14px; margin: 0 0 6px; }

/* ---------- 形象 ---------- */
.hero-vision { color: var(--dim); font-size: 13px; margin: -6px 0 6px; }
.skins { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
.skin-pick { font: inherit; font-size: 13px; color: var(--text); background: #0d0b15; border: 3px solid var(--line); padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.skin-pick.on { border-color: var(--gold); color: var(--gold); }
.skin-pick canvas, .g-item canvas { width: 96px; height: 96px; image-rendering: pixelated; background: #0d0b15; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.g-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 6px; border: 2px solid #2c2640; background: var(--panel2); }
.g-item small { font-size: 12px; }
.g-item.now { border-color: var(--jade); }
.g-item.locked canvas { filter: brightness(.8) saturate(.85); }

.paths { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.path-pick { font: inherit; color: var(--text); background: #0d0b15; border: 3px solid var(--line); padding: 8px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.path-pick canvas { width: 96px; height: 96px; image-rendering: pixelated; }
.path-pick small { font-size: 12px; line-height: 1.4; }
.path-pick.on { border-color: var(--gold); }
.path-pick.on b { color: var(--gold); }

/* ---------- 时长快捷按钮 ---------- */
.dur-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.split-row .row-durs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin: -2px 0 6px; }
.split-row .row-durs .chip { font-size: 12px; padding: 1px 7px; }
.split-row { padding-bottom: 4px; border-bottom: 2px dashed #2c2640; }

/* ---------- 可拖拽时间轴 ---------- */
.tl-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; }
.tl-nav { display: flex; gap: 6px; }
.tl {
  position: relative; height: 58px; margin: 28px 0 2px;
  background-color: #0d0b15;
  background-image: linear-gradient(90deg, #2c2640 1px, transparent 1px);
  background-size: calc(100% / 24) 100%;
  border: 2px solid var(--line);
  cursor: crosshair; touch-action: none; user-select: none;
}
.tl-blk { position: absolute; top: 5px; bottom: 5px; cursor: pointer; overflow: hidden; box-shadow: inset 0 0 0 1px #0007; }
.tl-blk:hover { filter: brightness(1.25); }
.tl-blk span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #14121f; padding: 0 6px; white-space: nowrap; overflow: hidden; font-style: normal; pointer-events: none; }
.tl-open { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, #f2c14e33 0 4px, transparent 4px 8px); pointer-events: none; }
.tl-future { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(-45deg, #ffffff10 0 3px, transparent 3px 7px); pointer-events: none; }
.tl .now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; pointer-events: none; }
.tl-sel { position: absolute; top: 0; bottom: 0; display: none; background: #f2c14e55; border: 2px solid var(--gold); pointer-events: none; }
.tl-sel span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 4px; white-space: nowrap; background: var(--gold); color: #2a1d00; font-size: 13px; padding: 1px 8px; }
.tl-ticks { position: relative; height: 18px; font-size: 11px; color: var(--dim); margin-bottom: 6px; }
.tl-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.tl-ticks span.minor { width: 1px; height: 4px; background: var(--line); }
.cat.picked { background: var(--gold); color: #2a1d00; border-color: #ffe08a; }

/* ---------- 醒目的时长显示 ---------- */
.len-big { font-size: 18px; color: var(--jade); background: #10261f; border: 2px solid var(--jade); padding: 6px 12px; margin: 6px 0 8px; }
.len-big b { color: #fff; font-size: 20px; }
.len-big small { color: var(--dim); font-size: 13px; }
.len-big.bad { color: var(--red); background: #2a1216; border-color: var(--red); }
.split-left { font-size: 17px; }

.tl-panel { padding-top: 10px; }
.tl-blk .h { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; z-index: 2; }
.tl-blk .hl { left: -2px; }
.tl-blk .hr { right: -2px; z-index: 3; }   /* 交界处优先抓前一块的右边 */
.tl-blk:hover .h { background: #ffffff55; }
.tl-hover { position: absolute; top: -20px; display: none; transform: translateX(-50%); font-size: 12px; color: var(--text); background: #000a; padding: 0 5px; pointer-events: none; white-space: nowrap; }

/* ---------- 云同步状态 ---------- */
.sync-dot { align-self: center; font-size: 12px; color: var(--jade); white-space: nowrap; }
.sync-dot.bad { color: var(--red); }

/* ---------- 触屏通用 ---------- */
button, .chip, .cat, .tl { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tl { touch-action: none; }
body.locked { position: fixed; left: 0; right: 0; overflow: hidden; }
#modal { overscroll-behavior: contain; }
.modal-box { max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.modal-btns { position: sticky; bottom: -18px; background: var(--panel); padding: 10px 0 4px; margin-bottom: -4px; }
@media (pointer: coarse) {
  .tl-blk .h { width: 18px; }
  .tl-blk .hl { left: -8px; }
  .tl-blk .hr { right: -8px; }
  .tl-blk .h { background: #ffffff22; }
}

/* ---------- 手机 ---------- */
@media (max-width: 720px) {
  body { padding: 10px 10px 90px; font-size: 15px; }
  .panel { padding: 12px 12px; }
  h2 { font-size: 18px; }
  .two { grid-template-columns: 1fr; }
  /* 顶部：头像在左，信息在右，数据一行 */
  .top { grid-template-columns: 84px 1fr; gap: 6px 12px; padding: 10px; text-align: left; }
  #avatar { width: 84px; height: 84px; grid-row: auto; margin: 0; }
  .hero-name { font-size: 12px; }
  .hero-realm { font-size: 21px; margin: 0 0 4px; }
  .hero-vision { margin: -2px 0 4px; }
  #hero .bar { height: 18px; }
  #hero .bar span { line-height: 14px; font-size: 12px; }
  #stats { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 6px; }
  .stat { min-width: 0; padding: 3px 8px; }
  .stat .k { font-size: 12px; }
  .stat .v { font-size: 17px; }
  .stat.heart { min-width: 0; }
  .stat.heart .tag { display: none; }
  /* 标签一行横滑；撤回/重做变成右下角悬浮按钮 */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -10px 10px; padding: 0 10px 4px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button[data-tab] { flex: 0 0 auto; padding: 6px 10px; }
  .tabs .hist { position: fixed; right: 10px; bottom: 12px; z-index: 40; margin: 0; flex-direction: column; align-items: flex-end; gap: 6px; }
  .tabs .hist button { background: var(--panel2); padding: 8px 12px; box-shadow: 3px 3px 0 var(--shadow), 0 0 0 1px #0008; }
  .tabs .hist button:disabled { display: none; }
  .sync-dot { background: #000c; padding: 1px 6px; }
  /* 分类按钮：两列大按钮 */
  .cats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .cat { padding: 10px 8px; font-size: 14px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cat .art { display: none; }
  .since { font-size: 16px; }
  .since b { font-size: 19px; }
  /* 时间轴 */
  .tl { height: 66px; }
  .tl-head h4 { margin: 4px 0; }
  .tl-nav { flex-wrap: wrap; }
  .tl-nav .chip { padding: 5px 9px; }
  /* 弹窗：从底部弹出 */
  #modal { align-items: flex-end; padding: 0; }
  .modal-box { max-width: none; max-height: 90vh; padding: 14px 14px 18px; border-left: 0; border-right: 0; border-bottom: 0; animation: sheet .2s cubic-bezier(.2, .8, .3, 1); }
  @keyframes sheet { from { transform: translateY(40px); opacity: 0; } }
  .modal-box.wide-modal { max-width: none; }
  .modal-btns { bottom: -18px; }
  .modal-btns .btn { flex: 1; padding: 11px 8px; }
  .modal-box h3 { font-size: 19px; }
  .form label { min-width: 0; }
  .form.range label { flex-basis: 100%; }
  .form.range { gap: 6px; }
  .dur-chips .chip, .row-durs .chip { padding: 6px 10px; }
  .split-row { grid-template-columns: 1.4fr .6fr 1fr; }
  .split-row .sp-note { grid-column: span 3; }
  /* 其他 */
  .timer-run .clock { font-size: 56px; }
  .log { flex-wrap: wrap; }
  .skills, .gallery, .skins, .paths { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  #toasts { left: 10px; right: 10px; bottom: 100px; align-items: center; }
  .btn.big { width: 100%; }
}

.cat .art { font-size: inherit; }

/* ---------- 防横向滑动（真机） ---------- */
html, body { overflow-x: hidden; overscroll-behavior-x: none; }
.modal-box { overflow-x: hidden; touch-action: pan-y; }
.modal-box * { max-width: 100%; }
.modal-box input, .modal-box select { min-width: 0; }
input[type="datetime-local"] { -webkit-appearance: none; appearance: none; min-width: 0; }

/* ---------- 按钮更紧凑（电脑） ---------- */
.cat { padding: 5px 10px; box-shadow: 2px 2px 0 var(--shadow); }
.cats { gap: 5px; }

/* ---------- 手机：弹窗铺满全屏 + 按钮紧凑 ---------- */
@media (max-width: 720px) {
  #modal { align-items: stretch; padding: 0; background: var(--panel); }
  .modal-box { width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; padding: 0; border: 0; box-shadow: none; display: flex; flex-direction: column; }
  .modal-box h3 { position: sticky; top: 0; z-index: 3; margin: 0; padding: 12px 14px; background: var(--panel); border-bottom: 2px solid var(--line); font-size: 18px; }
  .modal-body { flex: 1; padding: 10px 14px; }
  .modal-btns { position: sticky; bottom: 0; margin: 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--panel); border-top: 2px solid var(--line); }

  /* 按钮：宽度跟着字走，不截字，一行放更多 */
  .cats { display: flex; flex-wrap: wrap; gap: 4px; }
  .cat { padding: 5px 8px; font-size: 13px; white-space: nowrap; overflow: visible; text-overflow: clip; box-shadow: 2px 2px 0 var(--shadow); border-width: 2px; }
  .cat-grp { margin-bottom: 6px; }
  .cat-title { margin-bottom: 3px; font-size: 12px; }
  .chip, .dur-chips .chip, .row-durs .chip, .tl-nav .chip { padding: 3px 7px; font-size: 13px; }
  .dur-chips, .lib-chips, .tl-nav { gap: 4px; }
  .tabs { gap: 4px; }
  .tabs button[data-tab] { padding: 4px 8px; font-size: 14px; border-width: 2px; box-shadow: 2px 2px 0 var(--shadow); }
  .btn { padding: 5px 12px; border-width: 2px; box-shadow: 2px 2px 0 var(--shadow); }
  .mini { padding: 1px 6px; }
  .panel { padding: 10px; margin-bottom: 10px; }
  .form { gap: 6px 8px; }
  .skill, .item, .g-item, .skin-pick, .path-pick { padding: 6px; }
}

/* ---------- 起止时间：日期在上，时间一行 ---------- */
.range-date { color: var(--dim); font-size: 13px; margin: 2px 0 4px; }
.range-times { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 8px; }
.range-times input[type="time"] { width: 7.2em; flex: 0 0 auto; padding: 5px 6px; }
.range-times .dash { color: var(--dim); }
.range-len { color: var(--jade); font-size: 16px; margin-left: 4px; }
.range-len b { color: #fff; font-size: 19px; }
.range-len.bad { color: var(--red); }
.warn { color: var(--red); font-size: 13px; margin: -4px 0 4px; }
.warn:empty { display: none; }
.range-times { flex-wrap: nowrap; }
.range-times input[type="time"] { width: 6.3em; padding: 4px 4px; }
.range-len { white-space: nowrap; font-size: 14px; }
.range-len b { font-size: 17px; }
@media (max-width: 380px) { .range-times input[type="time"] { width: 5.9em; font-size: 15px; } .range-len b { font-size: 16px; } }

/* ---------- 时间轴高度 ---------- */
.tl { height: 50px; }
@media (max-width: 720px) {
  .tl { height: 38px; margin-top: 24px; }
  .tl + .tl-ticks { margin-bottom: 2px; }
  .tl-blk { top: 3px; bottom: 3px; }
  .tl-blk span { font-size: 11px; padding: 0 3px; }
}

/* ---------- 设置页 / 手机精简 ---------- */
.form label.chk.wide { flex-basis: 100%; }
@media (max-width: 720px) {
  .desk-only { display: none !important; }
  /* 表单：两个一行对齐，勾选项独占一行 */
  .form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
  .form > label, .form > div { min-width: 0; }
  .form > label.wide, .form > div.wide, .form > .req-box, .form > label.chk { grid-column: 1 / -1; }
  .form label { font-size: 13px; }
  .form input, .form select { padding: 5px 7px; font-size: 15px; }
  .req-box { gap: 4px 10px; }
  .req-box .dim { font-size: 13px; }
  .req-box label.chk { font-size: 14px; }
  /* 形象：小图、少字 */
  .paths { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .path-pick { padding: 4px 2px; border-width: 2px; }
  .path-pick canvas { width: 54px; height: 54px; }
  .path-pick b { font-size: 13px; }
  .skins { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .skin-pick { padding: 4px 2px; border-width: 2px; font-size: 12px; }
  .skin-pick canvas { width: 54px; height: 54px; }
  .gallery { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .g-item { padding: 4px 2px; }
  .g-item canvas { width: 54px; height: 54px; }
  .g-item b { font-size: 12px; }
  .g-item small { font-size: 11px; }
  h4 { margin: 10px 0 6px; }
}

.bar span em { font-style: normal; }
@media (max-width: 720px) {
  .skills { grid-template-columns: 1fr 1fr; gap: 6px; }
  .skill { padding: 6px 8px; }
  .skill-top b { font-size: 15px; }
  .skill-sub { font-size: 12px; }
  .skillbar { height: 18px; }
  .skillbar span { font-size: 11px; line-height: 14px; }
}
@media (max-width: 720px) {
  .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .kpis .stat { min-width: 0; }
  .kpis .stat .v { font-size: 15px; }
  .heat i, .legend i { width: 14px; height: 14px; }
  .heat, .hcol { gap: 3px; }
  .cal-day { min-height: 36px; padding: 1px 4px; font-size: 12px; }
  .cal-day.has b { font-size: 11px; }
  .lib-row .t { min-width: 0; }
}

/* ---------- 手机顶部：紧凑但有呼吸感 ---------- */
@media (max-width: 720px) {
  .top { grid-template-columns: 76px 1fr; gap: 8px 12px; padding: 10px 12px; margin-bottom: 10px; align-items: center; }
  #avatar { width: 76px; height: 76px; }
  .hero-name { font-size: 12px; line-height: 1.3; }
  .hero-realm { font-size: 20px; line-height: 1.25; margin: 0; text-shadow: 2px 2px 0 var(--shadow); }
  .hero-vision { font-size: 12px; margin: 0 0 6px; }
  #hero .bar { height: 14px; margin: 0; border-width: 2px; }
  #hero .bar span { font-size: 11px; line-height: 10px; }
  #hero .btn { margin-top: 6px; padding: 4px 10px; font-size: 13px; }
  /* 三个数据一行，标签和数字并排 */
  #stats { grid-template-columns: auto auto 1fr; gap: 6px; }
  .stat { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border-width: 2px; min-height: 30px; }
  .stat .k { font-size: 12px; white-space: nowrap; }
  .stat .v { font-size: 16px; line-height: 1; white-space: nowrap; }
  .stat .sub { display: none; }
  .stat.heart { display: flex; align-items: center; gap: 6px; }
  .stat.heart .k { display: flex; align-items: center; gap: 4px; }
  .stat.heart .tag { display: inline-block; margin: 0; font-size: 10px; padding: 0 3px; line-height: 1.4; }
  .stat.heart .bar { flex: 1; height: 12px; margin: 0; border-width: 2px; }
  .stat.heart .bar span { font-size: 10px; line-height: 8px; }
}

.mob-only { display: none; }
@media (max-width: 720px) {
  .mob-only { display: inline; }
  .stat.heart .hv { font-size: 16px; color: var(--red); margin-left: 2px; }
  .stat.heart .bar span { display: none; }
  .stat.heart .bar { height: 10px; min-width: 30px; }
}

@media (max-width: 720px) {
  .tabs .hist { bottom: 14px; right: 10px; gap: 6px; }
  .tabs .hist button { min-width: 44px; height: 38px; padding: 0 10px; font-size: 15px; opacity: .92; }
  .sync-dot { font-size: 11px; }
}

/* ---------- 右上角设置 / 标签去图标 / 记录表格式 ---------- */
.gear { display: none; }
.top { position: relative; }
@media (max-width: 720px) {
  .gear { display: block; position: absolute; top: 8px; right: 8px; font: inherit; font-size: 18px; line-height: 1; color: var(--dim); background: var(--panel2); border: 2px solid var(--line); padding: 5px 7px; cursor: pointer; }
  .gear.on { color: #2a1d00; background: var(--gold); border-color: #ffe08a; }
  .tab-settings { display: none !important; }
  .tabs .ico { display: none; }
  .tabs { overflow: visible; margin: 0 0 10px; padding: 0; }
  .tabs button[data-tab] { flex: 1 1 0; padding: 6px 2px; text-align: center; font-size: 14px; }
  #hero { padding-right: 34px; }
  /* 顶部数据的「不换行」只管顶部，别影响修炼录等处 */
  .kpis .stat { display: block; min-height: 0; padding: 4px 6px; }
  .kpis .stat .k { white-space: normal; font-size: 11px; line-height: 1.3; }
  .kpis .stat .v { white-space: normal; font-size: 15px; line-height: 1.3; }
  /* 记录：时间 | 内容 | 改；收益小字在内容下方 */
  .log { display: grid; grid-template-columns: auto 1fr auto; column-gap: 8px; row-gap: 0; align-items: start; padding: 6px 0; font-size: 13px; }
  .log .t { grid-column: 1; grid-row: 1 / span 2; font-size: 12px; line-height: 1.5; }
  .log .x { grid-column: 2; grid-row: 1; min-width: 0; word-break: break-all; line-height: 1.5; }
  .log .g { grid-column: 2; grid-row: 2; font-size: 11px; white-space: normal; }
  .log .g:empty { display: none; }
  .log .mini { grid-column: 3; grid-row: 1; }
  .lib-row { display: grid; grid-template-columns: auto auto 1fr auto; column-gap: 6px; align-items: start; }
  .lib-row .x { min-width: 0; word-break: break-all; }
  .lib-row .g { white-space: nowrap; }
}
.log .t .d { font-style: normal; }
@media (max-width: 720px) {
  .log .t .d { display: block; }
  .log .t { white-space: nowrap; }
}