/* ══════════════════════════════════════════════════════════════
   TimeBlocks · 时间积木
   纸感底 + 高饱和自定义色彩方块
   ══════════════════════════════════════════════════════════════ */

/* 必须显式声明：本文件里 .editor{display:grid} 等作者样式会盖掉浏览器默认的
   [hidden]{display:none}，导致弹层永远可见、吞掉画布的指针事件。 */
[hidden]{ display:none !important; }

:root{
  /* 纸面 */
  --paper:      #F6F4EF;
  --paper-2:    #EFEBE3;
  --surface:    #FFFFFF;
  --surface-2:  #F2EFE9;

  /* 墨色 */
  --ink:        #1B1A17;
  --ink-2:      #4A4740;
  --muted:      #8C867B;
  --faint:      #ADA79C;

  /* 线 */
  --line:       #E4DFD6;
  --line-2:     #D5CFC4;
  --line-3:     #C6BFB2;

  /* 强调 */
  --accent:     #E8543F;
  --accent-ink: #B93A28;
  --focus:      #2F7D6E;

  /* 尺寸 */
  --rail-w:     296px;
  --gutter-w:   62px;
  --hour-h:     64px;
  --head-h:     52px;
  --nav-h:      60px;
  --r:          10px;
  --r-sm:       7px;

  --shadow-1:   0 1px 2px rgba(28,25,20,.06), 0 1px 3px rgba(28,25,20,.04);
  --shadow-2:   0 4px 14px rgba(28,25,20,.10), 0 1px 3px rgba(28,25,20,.06);
  --shadow-3:   0 16px 48px rgba(28,25,20,.20), 0 2px 8px rgba(28,25,20,.10);

  --ease:       cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

body.is-dragging{ cursor:grabbing; user-select:none; }
body.is-dragging *{ cursor:grabbing !important; }

button,input,select,textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; border:0; background:none; }
h2,h3{ margin:0; font-weight:600; }

::selection{ background:rgba(232,84,63,.18); }

/* 滚动条 */
.scroller::-webkit-scrollbar,
.rail-scroll::-webkit-scrollbar,
.review-scroll::-webkit-scrollbar,
.editor-body::-webkit-scrollbar{ width:10px; height:10px; }
.scroller::-webkit-scrollbar-thumb,
.rail-scroll::-webkit-scrollbar-thumb,
.review-scroll::-webkit-scrollbar-thumb,
.editor-body::-webkit-scrollbar-thumb{
  background:var(--line-2); border-radius:99px; border:3px solid transparent; background-clip:content-box;
}
.scroller::-webkit-scrollbar-thumb:hover,
.rail-scroll::-webkit-scrollbar-thumb:hover{ background:var(--line-3); background-clip:content-box; }
.scroller::-webkit-scrollbar-track{ background:transparent; }

/* ══════════ 骨架 ══════════ */
.app{ height:100%; display:flex; flex-direction:column; }

.body{ flex:1; min-height:0; display:flex; position:relative; }

/* ══════════ 顶栏 ══════════ */
.topbar{
  height:var(--nav-h); flex:none;
  display:flex; align-items:center; gap:18px;
  padding:0 16px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:relative; z-index:40;
}

.brand{ display:flex; align-items:baseline; gap:8px; flex:none; }
.brand-mark{ display:flex; gap:2px; align-self:center; }
.brand-mark i{ width:7px; height:7px; border-radius:2px; background:var(--c); display:block; }
.brand-mark i:nth-child(1){ transform:translateY(2px); }
.brand-mark i:nth-child(2){ transform:translateY(-2px); }
.brand-name{ font-size:15px; font-weight:650; letter-spacing:-.01em; }
.brand-sub{ font-size:11px; color:var(--faint); letter-spacing:.06em; }

.weeknav{ display:flex; align-items:center; gap:6px; }
.today-btn{
  height:30px; padding:0 13px; border-radius:99px;
  font-size:12.5px; font-weight:550; color:var(--ink-2);
  border:1px solid var(--line-2); background:var(--surface);
  transition:background .16s var(--ease), border-color .16s, color .16s;
}
.today-btn:hover{ background:var(--surface-2); border-color:var(--line-3); color:var(--ink); }
.today-btn:active{ transform:translateY(.5px); }
.weeklabel{
  font-size:12.5px; color:var(--muted); margin-left:8px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

.icon-btn{
  width:30px; height:30px; border-radius:var(--r-sm); flex:none;
  display:grid; place-items:center; color:var(--ink-2);
  transition:background .16s var(--ease), color .16s;
}
.icon-btn svg{ width:19px; height:19px; }
.icon-btn:hover{ background:var(--surface-2); color:var(--ink); }
.icon-btn:active{ background:var(--paper-2); }
.icon-btn.is-off{ opacity:.32; pointer-events:none; }

.views{
  display:flex; gap:2px; padding:2.5px; margin-left:auto;
  background:var(--surface-2); border-radius:99px;
}
.seg{
  height:26px; padding:0 15px; border-radius:99px;
  font-size:12.5px; font-weight:500; color:var(--muted);
  white-space:nowrap; flex:none;
  transition:background .18s var(--ease), color .18s, box-shadow .18s;
}
.seg:hover{ color:var(--ink-2); }
.seg.is-active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); }

.actions{ display:flex; align-items:center; gap:2px; }
.rail-toggle{ display:none; }

/* ══════════ 左栏 ══════════ */
.rail{
  width:var(--rail-w); flex:none;
  background:var(--surface);
  border-right:1px solid var(--line);
  display:flex; flex-direction:column;
  transition:width .22s var(--ease), opacity .18s;
}
.rail-scroll{ flex:1; min-height:0; overflow-y:auto; padding:6px 0 28px; }

.panel{ padding:14px 14px 4px; }
.panel + .panel{ border-top:1px solid var(--line); margin-top:10px; padding-top:16px; }

.panel-head{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.panel-head h2{ font-size:12px; font-weight:650; letter-spacing:.09em; color:var(--muted); text-transform:uppercase; }
.panel-count{ font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
.panel-head .mini-btn{ margin-left:auto; }

.mini-btn{
  height:24px; padding:0 10px; border-radius:99px;
  font-size:11.5px; font-weight:550; color:var(--ink-2);
  background:var(--surface-2);
  transition:background .16s var(--ease), color .16s;
}
.mini-btn:hover{ background:var(--line); color:var(--ink); }
.mini-btn:active{ transform:translateY(.5px); }

.panel-hint{ margin:8px 0 0; font-size:11.5px; color:var(--faint); line-height:1.45; }

/* 快速新建 */
.quick-add{ margin-bottom:9px; }
.quick-add input{
  width:100%; height:34px; padding:0 11px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); outline:none;
  transition:border-color .16s, box-shadow .16s;
}
.quick-add input:focus{ border-color:var(--focus); box-shadow:0 0 0 3px rgba(47,125,110,.13); }
.quick-add input::placeholder{ color:var(--faint); }
.quick-add .swatches{ margin-top:8px; }

/* 色板 */
.swatches{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.swatch{
  width:19px; height:19px; border-radius:5px; flex:none;
  background:var(--c);
  outline:2px solid transparent; outline-offset:2px;
  transition:transform .14s var(--ease), outline-color .14s;
  position:relative;
}
.swatch:hover{ transform:scale(1.13); }
.swatch.is-on{ outline-color:var(--ink); }
.swatch.is-on::after{
  content:""; position:absolute; inset:0; border-radius:5px;
  border:1.5px solid rgba(255,255,255,.85);
}
.swatches-sm .swatch{ width:16px; height:16px; border-radius:4px; }
.swatches-lg .swatch{ width:26px; height:26px; border-radius:7px; }
.swatch-del{
  position:absolute; top:-6px; right:-6px; width:14px; height:14px;
  border-radius:99px; background:var(--ink); color:#fff;
  font-size:10px; line-height:14px; text-align:center;
  opacity:0; transition:opacity .14s;
}
.swatches-lg .swatch:hover .swatch-del{ opacity:1; }

/* 任务列表 */
.task-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.task-item{
  display:flex; align-items:flex-start; gap:9px;
  padding:8px 9px; border-radius:var(--r-sm);
  border:1px solid transparent;
  background:var(--surface-2);
  cursor:grab;
  transition:background .15s var(--ease), border-color .15s, box-shadow .15s;
  position:relative;
}
.task-item:hover{ background:var(--surface); border-color:var(--line-2); box-shadow:var(--shadow-1); }
.task-item.is-drag{ opacity:.4; }
.task-dot{
  width:9px; height:9px; border-radius:3px; flex:none; margin-top:5px;
  background:var(--c);
}
.task-main{ flex:1; min-width:0; }
.task-title{ font-size:13px; line-height:1.35; word-break:break-word; }
.task-meta{ font-size:11px; color:var(--faint); margin-top:2px; font-variant-numeric:tabular-nums; }
.task-x{
  width:20px; height:20px; border-radius:5px; flex:none; display:grid; place-items:center;
  color:var(--faint); font-size:15px; line-height:1;
  opacity:0; transition:opacity .14s, background .14s, color .14s;
}
.task-item:hover .task-x{ opacity:1; }
.task-x:hover{ background:var(--line); color:var(--ink); }
.task-item.is-done .task-title{ color:var(--faint); text-decoration:line-through; }

.empty{
  padding:16px 10px; text-align:center;
  font-size:12px; color:var(--faint); line-height:1.6;
  border:1px dashed var(--line-2); border-radius:var(--r-sm);
}

/* 习惯 */
.habit-list{ display:flex; flex-direction:column; gap:3px; }
.habit-item{
  display:grid; grid-template-columns:1fr auto; gap:2px 8px;
  padding:8px 9px; border-radius:var(--r-sm);
  transition:background .15s var(--ease);
  position:relative;
}
.habit-item:hover{ background:var(--surface-2); }
.habit-head{ display:flex; align-items:center; gap:8px; min-width:0; grid-column:1; }
.habit-name{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.habit-streak{ font-size:11px; color:var(--faint); font-variant-numeric:tabular-nums; }
.habit-x{
  grid-column:2; grid-row:1; width:20px; height:20px; border-radius:5px;
  display:grid; place-items:center; color:var(--faint); font-size:15px;
  opacity:0; transition:opacity .14s, background .14s, color .14s;
}
.habit-item:hover .habit-x{ opacity:1; }
.habit-x:hover{ background:var(--line); color:var(--ink); }
.habit-week{ grid-column:1/-1; display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-top:7px; }
.habit-day{
  height:20px; border-radius:5px;
  background:var(--surface-2);
  border:1px solid var(--line);
  transition:background .16s var(--ease), border-color .16s, transform .12s;
  position:relative;
}
.habit-day:hover{ transform:translateY(-1px); border-color:var(--line-3); }
.habit-day.is-on{ background:var(--c); border-color:transparent; }
.habit-day.is-today{ box-shadow:inset 0 0 0 1.5px var(--ink); }
.habit-day span{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:9.5px; color:var(--faint); font-weight:600;
}
.habit-day.is-on span{ color:rgba(255,255,255,.92); }

/* 备忘录 */
.memo-compose{ display:flex; gap:6px; align-items:flex-end; margin-bottom:9px; }
.memo-compose textarea{
  flex:1; min-height:40px; max-height:140px; resize:vertical;
  padding:8px 10px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); outline:none; line-height:1.45;
  transition:border-color .16s, box-shadow .16s;
}
.memo-compose textarea:focus{ border-color:var(--focus); box-shadow:0 0 0 3px rgba(47,125,110,.13); }
.memo-compose textarea::placeholder{ color:var(--faint); }

.memo-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.memo-item{
  display:flex; gap:8px; align-items:flex-start;
  padding:7px 9px; border-radius:var(--r-sm);
  background:var(--surface-2); position:relative;
  transition:background .15s var(--ease);
}
.memo-item:hover{ background:var(--surface); box-shadow:var(--shadow-1); }
.memo-text{ flex:1; min-width:0; font-size:12.5px; line-height:1.45; word-break:break-word; white-space:pre-wrap; }
.memo-act{ display:flex; gap:1px; flex:none; }
.memo-act button{
  width:22px; height:22px; border-radius:5px; display:grid; place-items:center;
  color:var(--faint); font-size:13px;
  opacity:0; transition:opacity .14s, background .14s, color .14s;
}
.memo-item:hover .memo-act button{ opacity:1; }
.memo-act button:hover{ background:var(--line); color:var(--ink); }
.memo-act button svg{ width:14px; height:14px; }

/* ══════════ 舞台 ══════════ */
.stage{ flex:1; min-width:0; position:relative; background:var(--paper); }
.view{ position:absolute; inset:0; display:none; }
.view.is-active{ display:block; }

/* 周网格 */
.scroller{ position:absolute; inset:0; overflow:auto; }

.heads-row{
  position:sticky; top:0; z-index:30;
  display:grid; grid-template-columns:var(--gutter-w) 1fr;
  background:var(--paper);
  border-bottom:1px solid var(--line-2);
}
.corner{
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:6px; border-right:1px solid var(--line);
}
.corner-label{ font-size:10px; color:var(--faint); letter-spacing:.04em; font-variant-numeric:tabular-nums; }

.day-heads{ display:grid; grid-template-columns:repeat(7,1fr); height:var(--head-h); position:relative; }
.day-head{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-right:1px solid var(--line);
  position:relative; transition:background .16s var(--ease);
}
.day-head:last-child{ border-right:0; }
.day-head .dw{ font-size:10.5px; color:var(--muted); letter-spacing:.05em; }
.day-head .dd{
  font-size:17px; font-weight:600; line-height:1.05;
  font-variant-numeric:tabular-nums; color:var(--ink);
}
.day-head.is-weekend .dw{ color:var(--faint); }
.day-head.is-today .dd{
  color:#fff; background:var(--accent);
  width:27px; height:27px; border-radius:99px;
  display:grid; place-items:center; font-size:14.5px;
}
.day-head.is-today .dw{ color:var(--accent-ink); font-weight:600; }
.day-head.is-past .dd{ color:var(--faint); }
.day-head .load{
  position:absolute; bottom:0; left:14%; right:14%; height:2.5px;
  border-radius:99px 99px 0 0; background:var(--line-2);
  overflow:hidden; display:flex;
}
.day-head .load i{ height:100%; background:var(--c); }

.body-row{ display:grid; grid-template-columns:var(--gutter-w) 1fr; }

.gutter{ border-right:1px solid var(--line); position:relative; }
.hour-label{
  position:absolute; right:8px; transform:translateY(-50%);
  font-size:10.5px; color:var(--faint);
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
  white-space:nowrap;
}
.hour-label.is-major{ color:var(--muted); font-weight:600; }

.canvas{ position:relative; min-height:200px; }
.canvas-bg{ position:absolute; inset:0; pointer-events:none; }
.hline{ position:absolute; left:0; right:0; height:1px; background:var(--line); }
.hline.is-half{ background:var(--line); opacity:.45; }
.hline.is-major{ background:var(--line-2); }
.vline{ position:absolute; top:0; bottom:0; width:1px; background:var(--line); }

/* 当前时刻线 */
.nowline{ position:absolute; left:0; right:0; height:0; z-index:12; pointer-events:none; }
.nowline::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:2px;
  background:var(--accent); border-radius:99px;
}
.nowline::after{
  content:""; position:absolute; left:-4px; top:-4.5px; width:9px; height:9px;
  border-radius:99px; background:var(--accent);
  box-shadow:0 0 0 2.5px var(--paper);
}

/* 周末底色 */
.day-bg{ position:absolute; top:0; bottom:0; background:rgba(0,0,0,.018); pointer-events:none; }

/* ══════════ 时间块 ══════════ */
.block{
  position:absolute;
  border-radius:var(--r-sm);
  padding:5px 8px 5px 9px;
  overflow:hidden;
  cursor:grab;
  color:#fff;
  background:var(--c);
  box-shadow:var(--shadow-1);
  transition:box-shadow .16s var(--ease), filter .16s var(--ease), opacity .16s;
  will-change:top,height,left,width;
  z-index:5;
  contain:layout style;
}
.block::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:rgba(0,0,0,.22); border-radius:var(--r-sm) 0 0 var(--r-sm);
}
.block:hover{ box-shadow:var(--shadow-2); filter:brightness(1.04); z-index:8; }
.block.is-selected{ box-shadow:0 0 0 2px var(--paper), 0 0 0 4px var(--ink), var(--shadow-2); z-index:9; }
.block.is-moving{ z-index:20; box-shadow:var(--shadow-3); cursor:grabbing; }
.block.is-resizing{ z-index:20; box-shadow:var(--shadow-3); cursor:ns-resize; }
.block.is-ghost{ opacity:.42; }
.block.is-done{ opacity:.62; }
.block.is-done .block-title{ text-decoration:line-through; }
.block.is-past{ filter:saturate(.72); }
.block.is-tiny{ padding-top:2px; padding-bottom:2px; }
.block.is-micro{ padding:1px 6px 1px 8px; }

.block-title{
  font-size:12.5px; font-weight:550; line-height:1.28;
  word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.block-time{
  font-size:10.5px; opacity:.82; margin-top:2px;
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.block.is-tiny .block-title{ -webkit-line-clamp:1; font-size:11.5px; }
.block.is-tiny .block-time{ display:none; }
.block.is-micro .block-title{ -webkit-line-clamp:1; font-size:11px; }
.block.is-micro .block-time{ display:none; }

.block-actual{
  position:absolute; right:6px; bottom:4px;
  font-size:10px; font-variant-numeric:tabular-nums;
  padding:0 5px; height:15px; line-height:15px; border-radius:99px;
  background:rgba(255,255,255,.24); backdrop-filter:blur(2px);
  letter-spacing:.02em; white-space:nowrap;
}
.block-actual.is-off{ background:rgba(0,0,0,.24); }

.block-resize{
  position:absolute; left:8px; right:8px; bottom:0; height:11px;
  cursor:ns-resize; opacity:0; transition:opacity .14s;
}
.block-resize::after{
  content:""; position:absolute; left:50%; bottom:3.5px; transform:translateX(-50%);
  width:22px; height:2.5px; border-radius:99px; background:rgba(255,255,255,.72);
}
.block:hover .block-resize{ opacity:1; }
.block.is-micro .block-resize{ height:9px; }

/* 拖拽落点预览 */
.drop-preview{
  position:absolute; border-radius:var(--r-sm);
  border:1.5px dashed var(--ink-2);
  background:rgba(27,26,23,.07);
  pointer-events:none; z-index:15;
  display:flex; align-items:flex-start; padding:5px 8px;
  font-size:11.5px; color:var(--ink-2); font-weight:550;
  font-variant-numeric:tabular-nums;
}

/* 悬浮幽灵 */
.ghost{
  position:fixed; z-index:999; pointer-events:none;
  padding:6px 11px; border-radius:var(--r-sm);
  font-size:12.5px; font-weight:550; color:#fff;
  background:var(--c); box-shadow:var(--shadow-3);
  transform:translate(-50%,-140%);
  max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.drop-hint{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  padding:7px 15px; border-radius:99px;
  background:var(--ink); color:#fff; font-size:12px;
  box-shadow:var(--shadow-2); z-index:50; pointer-events:none;
}

/* ══════════ 复盘 ══════════ */
.review-scroll{ position:absolute; inset:0; overflow-y:auto; padding:24px 26px 60px; }
.review-inner{ max-width:1020px; margin:0 auto; }

.rv-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
.rv-head h2{ font-size:19px; letter-spacing:-.01em; }
.rv-head p{ margin:0; font-size:12.5px; color:var(--muted); }

.rv-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:11px; margin-bottom:22px; }
.kpi{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:14px 15px;
  box-shadow:var(--shadow-1);
}
.kpi-label{ font-size:11px; color:var(--muted); letter-spacing:.05em; margin-bottom:5px; }
.kpi-value{ font-size:24px; font-weight:640; letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.1; }
.kpi-value small{ font-size:12.5px; font-weight:500; color:var(--muted); margin-left:3px; letter-spacing:0; }
.kpi-sub{ font-size:11.5px; color:var(--faint); margin-top:5px; font-variant-numeric:tabular-nums; }
.kpi.is-good .kpi-value{ color:var(--focus); }
.kpi.is-bad  .kpi-value{ color:var(--accent-ink); }

.rv-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:18px 20px; margin-bottom:16px;
  box-shadow:var(--shadow-1);
}
.rv-card > h3{
  font-size:13px; letter-spacing:.05em; color:var(--muted);
  text-transform:uppercase; margin-bottom:16px; font-weight:650;
}
.rv-card > h3 span{ text-transform:none; letter-spacing:0; margin-left:6px; color:var(--faint); font-weight:400; font-size:11.5px; }

/* 日柱 */
.bars{ display:grid; grid-template-columns:repeat(7,1fr); gap:14px; align-items:end; height:186px; }
.bar-col{ display:flex; flex-direction:column; height:100%; }
.bar-stack{
  flex:1; display:flex; align-items:flex-end; justify-content:center; gap:5px;
  position:relative; border-bottom:1px solid var(--line-2); padding-bottom:0;
}
.bar{
  width:26px; border-radius:5px 5px 0 0; min-height:2px;
  transition:height .5s var(--ease);
  position:relative;
}
.bar-plan{ background:var(--c); opacity:.28; }
.bar-real{ background:var(--c); }
.bar-val{
  position:absolute; top:-18px; left:50%; transform:translateX(-50%);
  font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap;
}
.bar-cap{ text-align:center; font-size:11px; color:var(--muted); padding-top:7px; font-variant-numeric:tabular-nums; }
.bar-cap.is-today{ color:var(--accent-ink); font-weight:650; }
.bars-legend{
  display:flex; gap:16px; margin-top:16px; padding-top:14px;
  border-top:1px solid var(--line); font-size:11.5px; color:var(--muted);
}
.bars-legend i{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:middle; }

/* 颜色维度 */
.dim-row{ display:grid; grid-template-columns:130px 1fr; gap:14px; align-items:center; padding:9px 0; }
.dim-row + .dim-row{ border-top:1px solid var(--line); }
.dim-name{ display:flex; align-items:center; gap:8px; font-size:12.5px; min-width:0; }
.dim-name i{ width:10px; height:10px; border-radius:3px; flex:none; background:var(--c); }
.dim-name span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dim-name em{ font-style:normal; margin-left:5px; color:var(--faint); font-size:11px; }
.dim-track{ position:relative; height:22px; }
.dim-plan{
  position:absolute; top:0; left:0; height:100%;
  background:var(--surface-2); border-radius:5px;
  transition:width .5s var(--ease);
}
.dim-real{
  position:absolute; top:4px; left:0; height:14px;
  background:var(--c); border-radius:4px; opacity:.9;
  transition:width .5s var(--ease);
}
.dim-val{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:11px; color:var(--ink-2); font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.82); padding:0 5px; border-radius:4px;
}

/* 列表 */
.rv-list{ list-style:none; margin:0; padding:0; }
.rv-list li{
  display:flex; align-items:center; gap:10px; padding:9px 0;
  border-top:1px solid var(--line); font-size:12.5px;
}
.rv-list li:first-child{ border-top:0; }
.rv-list i{ width:9px; height:9px; border-radius:3px; flex:none; background:var(--c); }
.rv-list .t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-list .m{ color:var(--faint); font-variant-numeric:tabular-nums; font-size:11.5px; white-space:nowrap; }

.rv-empty{ padding:34px 0; text-align:center; color:var(--faint); font-size:12.5px; }

/* 习惯复盘 */
.hb-row{ display:grid; grid-template-columns:130px 1fr auto; gap:14px; align-items:center; padding:9px 0; }
.hb-row + .hb-row{ border-top:1px solid var(--line); }
.hb-dots{ display:flex; gap:4px; }
.hb-dot{ width:17px; height:17px; border-radius:5px; background:var(--surface-2); border:1px solid var(--line); }
.hb-dot.is-on{ background:var(--c); border-color:transparent; }
.hb-rate{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:44px; text-align:right; }

/* ══════════ 编辑器 / 设置 ══════════ */
.editor{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; }
.editor-backdrop{ position:absolute; inset:0; background:rgba(27,26,23,.34); backdrop-filter:blur(3px); animation:fade .18s var(--ease); }
.editor-card{
  position:relative; width:min(460px, calc(100vw - 32px));
  max-height:calc(100vh - 48px);
  background:var(--surface); border-radius:14px;
  box-shadow:var(--shadow-3);
  display:flex; flex-direction:column; overflow:hidden;
  animation:pop .2s var(--ease);
}
.editor-card--narrow{ width:min(400px, calc(100vw - 32px)); }

@keyframes fade{ from{ opacity:0; } }
@keyframes pop{ from{ opacity:0; transform:translateY(10px) scale(.98); } }

.editor-head{
  display:flex; align-items:center; gap:8px;
  padding:14px 14px 14px 18px; border-bottom:1px solid var(--line);
}
.editor-head h3{ font-size:15px; }
.editor-head input{
  flex:1; min-width:0; border:0; outline:none; background:none;
  font-size:16px; font-weight:600; letter-spacing:-.01em; padding:2px 0;
}
.editor-head input::placeholder{ color:var(--faint); font-weight:500; }

.editor-body{ padding:16px 18px; overflow-y:auto; flex:1; }

.field{ margin-bottom:16px; }
.field:last-child{ margin-bottom:0; }
.field > label{
  display:block; font-size:11px; font-weight:650; letter-spacing:.07em;
  color:var(--muted); text-transform:uppercase; margin-bottom:7px;
}
.field-2{
  display:grid; grid-template-columns:auto 1fr auto 1fr; gap:8px 9px; align-items:center;
}
.field-2 > label{ margin-bottom:0; }
.field input[type=time], .field input[type=date], .field select{
  height:34px; padding:0 10px; width:100%;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); outline:none;
  font-variant-numeric:tabular-nums;
  transition:border-color .16s, box-shadow .16s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--focus); box-shadow:0 0 0 3px rgba(47,125,110,.13);
}
.field textarea{
  width:100%; padding:9px 11px; resize:vertical; min-height:56px;
  border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--surface); outline:none; line-height:1.5;
  transition:border-color .16s, box-shadow .16s;
}
.field-hint{ margin:8px 0 0; font-size:11.5px; color:var(--faint); line-height:1.5; }
.dur{
  grid-column:1/-1; font-size:11.5px; color:var(--muted);
  font-variant-numeric:tabular-nums; text-align:right;
}

.color-custom{
  display:inline-flex; align-items:center; gap:7px; margin-top:11px;
  font-size:12px; color:var(--ink-2); cursor:pointer;
}
.color-custom input[type=color]{
  width:30px; height:26px; padding:0; border:1px solid var(--line-2);
  border-radius:6px; background:none; cursor:pointer;
}

.actual-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.stepper{ display:flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden; }
.stepper button{
  width:32px; height:34px; font-size:16px; color:var(--ink-2);
  background:var(--surface-2); transition:background .14s, color .14s;
}
.stepper button:hover{ background:var(--line); color:var(--ink); }
.stepper input{
  width:60px; height:34px; border:0; outline:none; text-align:center;
  background:var(--surface); font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.unit{ font-size:12px; color:var(--faint); }
.check{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; cursor:pointer; margin-left:auto; }
.check input{ width:15px; height:15px; accent-color:var(--focus); cursor:pointer; }

.palette-add{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.palette-add input[type=color]{
  width:34px; height:28px; padding:0; border:1px solid var(--line-2);
  border-radius:6px; background:none; cursor:pointer;
}

.danger-row{ margin-top:11px; }

.editor-foot{
  display:flex; align-items:center; gap:8px;
  padding:12px 18px; border-top:1px solid var(--line); background:var(--surface-2);
}
.spacer{ flex:1; }

.btn{
  height:34px; padding:0 16px; border-radius:var(--r-sm);
  font-size:13px; font-weight:550;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  transition:background .16s var(--ease), border-color .16s, color .16s, transform .1s;
}
.btn:hover{ background:var(--paper-2); color:var(--ink); border-color:var(--line-3); }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn-primary:hover{ background:#000; border-color:#000; color:#fff; }
.btn-danger{ color:var(--accent-ink); border-color:rgba(232,84,63,.32); background:rgba(232,84,63,.05); }
.btn-danger:hover{ background:rgba(232,84,63,.12); border-color:rgba(232,84,63,.5); color:var(--accent-ink); }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(8px);
  z-index:300;
  padding:10px 20px; border-radius:99px;
  background:var(--ink); color:#fff; font-size:12.5px;
  box-shadow:var(--shadow-3); opacity:0;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  pointer-events:none; max-width:min(440px,calc(100vw - 40px));
  text-align:center;
}
.toast.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ══════════ 响应式 ══════════ */
@media (max-width: 1080px){
  .brand-sub{ display:none; }
  .rail-toggle{ display:grid; }
  .rail{
    position:absolute; left:0; top:0; bottom:0; z-index:100;
    transform:translateX(-100%); box-shadow:var(--shadow-3);
    transition:transform .24s var(--ease);
  }
  .rail.is-open{ transform:none; }
  .rail-scroll{ padding-bottom:40px; }
}

@media (max-width: 900px){
  :root{ --hour-h:56px; --gutter-w:48px; }
  .brand-name{ font-size:14px; }
  .weeklabel{ display:none; }
  .views{ margin-left:0; }
  .topbar{ gap:10px; padding:0 10px; }
}

@media (max-width: 720px){
  :root{ --nav-h:54px; --head-h:46px; --hour-h:50px; }
  /* 顶栏在手机上放不下这么多按钮：撤掉前先把导出/导入挪进「设置 → 数据」，
     否则缩窄后它们会把「周视图 / 复盘」挤成竖排单字。 */
  .topbar #btnExport, .topbar #btnImport{ display:none; }
  .seg{ padding:0 11px; }
  .scroller{ overflow-x:auto; }
  .heads-row, .body-row{ min-width:660px; }
  /* 横向滚动时把时刻刻度钉在左边。
     否则往右滑看后半周，左侧的时间标签会一起滑走，那一屏就失去了时间参照。
     必须补背景色，不然画布里的色块会从刻度底下露出来。 */
  .corner{ position:sticky; left:0; z-index:31; background:var(--paper); }
  .gutter{ position:sticky; left:0; z-index:20; background:var(--paper); }
  .review-scroll{ padding:18px 14px 60px; }
  .bars{ height:150px; gap:8px; }
  .bar{ width:18px; }
  .dim-row{ grid-template-columns:96px 1fr; }
  .hb-row{ grid-template-columns:96px 1fr auto; }
  .rv-kpis{ grid-template-columns:repeat(2,1fr); }
  .brand-name{ display:none; }
}

@media print{
  .topbar,.rail,.editor,.toast{ display:none !important; }
  body{ overflow:visible; }
}