/* ============================================================
   需求看板 · 样式（淡蓝主题）
   ============================================================ */

:root{
  --bg:#EDF4FC;
  --bg-deep:#E3EEFA;
  --panel:#FFFFFF;

  --line:#DDEAF8;
  --line-soft:#EDF4FB;

  --ink:#17293C;
  --ink2:#4C6275;
  --ink3:#8CA2B6;

  --blue:#3E86E8;
  --blue-d:#2E71CF;
  --blue-l:#E9F2FE;
  --blue-b:#BEDBFB;

  --amber:#C4820F;
  --amber-l:#FDF3E1;

  --green:#16875F;
  --green-l:#E5F6EF;

  --red:#D2453F;
  --red-l:#FCECEB;

  --gray-l:#EFF4F9;

  --radius:14px;
  --shadow-s:0 1px 2px rgba(23,58,102,.05);
  --shadow-m:0 6px 18px -8px rgba(30,72,132,.28);
  --shadow-l:0 24px 60px -24px rgba(23,58,102,.42);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 520px at 50% -10%, #F7FBFF 0%, rgba(247,251,255,0) 70%),
    var(--bg);
  color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
input,textarea,select{outline:none}

/* ---------------- 顶栏 ---------------- */
.top{
  flex:0 0 auto;
  height:62px;
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 18px;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:20;
}
.brand{display:flex;align-items:center;flex:1 1 0;min-width:0}
.brand h1{
  margin:0;
  font-size:15px;font-weight:650;letter-spacing:.3px;
  color:var(--ink);
  white-space:nowrap;
}

.ic{
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  color:var(--ink2);
  transition:background .15s,color .15s;
}
.ic svg{width:16px;height:16px}
.ic:hover{background:var(--bg-deep);color:var(--blue-d)}

.right{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:1 1 0;min-width:0}

/* ---------------- 中间：日期选择 ---------------- */
.dater{
  position:relative;
  flex:0 0 auto;
  display:flex;justify-content:center;
}
.date-chip{
  display:flex;align-items:center;gap:7px;
  height:34px;padding:0 10px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  font-size:13px;font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.date-chip:hover{border-color:var(--blue-b);background:var(--blue-l)}
.date-chip.on{border-color:var(--blue-b);box-shadow:0 0 0 3px rgba(62,134,232,.12)}
.date-chip .cal-ico{width:15px;height:15px;color:var(--blue-d);stroke-width:1.8}
.date-chip .caret{width:12px;height:12px;color:var(--ink3);stroke-width:2.2;transition:transform .18s}
.date-chip.on .caret{transform:rotate(180deg)}
.chip-badge{
  font-size:10.5px;font-weight:650;
  padding:1px 6px;border-radius:5px;
  background:var(--blue);color:#fff;
  letter-spacing:.3px;
}

/* 日历浮层 */
.cal-pop{
  position:absolute;top:calc(100% + 8px);left:50%;
  transform:translateX(-50%);
  width:296px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 24px 56px -22px rgba(23,58,102,.45);
  padding:10px 10px 8px;
  z-index:60;
}
.cal-head{display:flex;align-items:center;gap:4px;padding:2px 2px 6px}
.cal-title{
  flex:1;text-align:center;
  font-size:13px;font-weight:650;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cal-head .ic{width:28px;height:28px}
.cal-grid{
  display:grid;
  grid-template-columns:24px repeat(7,1fr);
  align-items:center;
}
.cal-wd{padding-bottom:2px}
.cal-wd span{
  text-align:center;
  font-size:11px;color:var(--ink3);
  height:22px;line-height:22px;
}
.cal-row-cell{height:34px}
.wk-tag{
  font-size:9.5px;font-weight:650;
  color:var(--blue-d);
  text-align:center;
  letter-spacing:0;
}
.cal-day{
  height:30px;
  border-radius:8px;
  font-size:12.5px;
  color:var(--ink2);
  font-variant-numeric:tabular-nums;
  display:flex;align-items:center;justify-content:center;
  transition:background .13s,color .13s;
  position:relative;
}
.cal-day:hover{background:var(--blue-l);color:var(--blue-d)}
.cal-day.out{color:#C6D6E5}
.cal-day.is-cur{background:#F3F8FF}
.cal-day.is-today{color:var(--blue-d);font-weight:700}
.cal-day.is-today::after{
  content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--blue);
}
.cal-day.is-sel{
  background:linear-gradient(180deg,#4A91EE,#3478DC);
  color:#fff;font-weight:650;
  box-shadow:0 4px 10px -4px rgba(46,113,207,.7);
}
.cal-day.is-sel::after{background:#fff}
.cal-foot{
  display:flex;justify-content:center;
  border-top:1px solid var(--line-soft);
  margin-top:6px;padding-top:7px;
}
.cal-today{
  font-size:12px;color:var(--blue-d);font-weight:600;
  padding:3px 12px;border-radius:7px;
}
.cal-today:hover{background:var(--blue-l)}


/* 按钮 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 14px;
  border-radius:9px;
  border:1px solid transparent;
  font-size:13px;font-weight:550;
  white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .06s;
}
.btn:active{transform:translateY(.5px)}
.btn .i{width:15px;height:15px;stroke-width:2.1}
.btn.primary{
  background:linear-gradient(180deg,#4A91EE,#3478DC);
  color:#fff;
  border-color:#2F70D2;
  box-shadow:0 4px 12px -5px rgba(46,113,207,.75);
}
.btn.primary:hover{background:linear-gradient(180deg,#4389E8,#2C6FD4)}
.btn.primary:disabled{opacity:.55;cursor:default;box-shadow:none}
.btn.ghost{background:#fff;border-color:var(--line);color:var(--ink2)}
.btn.ghost:hover{background:var(--blue-l);border-color:var(--blue-b);color:var(--blue-d)}
.btn.ok{background:linear-gradient(180deg,#22A474,#15855C);color:#fff;border-color:#137A55;box-shadow:0 4px 12px -5px rgba(22,135,95,.6)}
.btn.ok:hover{background:linear-gradient(180deg,#1F9B6C,#127B54)}
.btn.danger{color:var(--red);border-color:#F2D6D4;background:#fff}
.btn.danger:hover{background:var(--red-l);border-color:#E9BDBA}
.btn[hidden]{display:none}

/* 分运营开关 */
.lane-switch{
  display:inline-flex;align-items:center;gap:7px;
  height:34px;padding:0 11px 0 8px;
  border-radius:9px;
  border:1px solid var(--line);
  background:#fff;
  font-size:12.5px;font-weight:550;
  color:var(--ink2);
  white-space:nowrap;
  transition:border-color .15s,background .15s,color .15s;
}
.lane-switch:hover{border-color:var(--blue-b);background:var(--blue-l)}
.ls-track{
  width:28px;height:16px;flex:0 0 28px;
  border-radius:99px;
  background:#D8E4F1;
  position:relative;
  transition:background .18s;
}
.ls-knob{
  position:absolute;top:2px;left:2px;
  width:12px;height:12px;border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(23,58,102,.28);
  transition:transform .18s;
}
.lane-switch.on{border-color:var(--blue-b);background:var(--blue-l);color:var(--blue-d)}
.lane-switch.on .ls-track{background:var(--blue)}
.lane-switch.on .ls-knob{transform:translateX(12px)}

/* 「AI 接口」入口（a 标签，样式同胶囊按钮） */
.ai-entry{text-decoration:none;cursor:pointer;gap:6px;padding:0 11px}
.ai-entry .ai-ico{
  width:15px;height:15px;flex:0 0 15px;
  fill:currentColor;stroke:none;
  color:#6E8FB5;
}
.ai-entry:hover .ai-ico{color:var(--blue)}

/* 用户 */
.userbox{display:flex;align-items:center}
.u-chip{
  display:flex;align-items:center;gap:7px;
  height:34px;padding:0 9px 0 4px;
  border-radius:9px;
  border:1px solid var(--line);
  background:#fff;
  font-size:12.5px;
  color:var(--ink2);
  transition:border-color .15s,background .15s;
}
.u-chip:hover{border-color:var(--blue-b);background:var(--blue-l)}
.avatar{
  width:26px;height:26px;flex:0 0 26px;
  border-radius:7px;
  background:linear-gradient(160deg,#D9E7F8,#C3D9F2);
  color:#2E5F96;
  font-size:12px;font-weight:650;
  display:flex;align-items:center;justify-content:center;
}
.avatar.ops{background:linear-gradient(160deg,#4A91EE,#3478DC);color:#fff}
.avatar.guest{background:#E9EFF6;color:#8CA2B6}
.tag-role{
  font-size:10.5px;font-weight:600;
  padding:1px 6px;border-radius:5px;
  background:var(--blue-l);color:var(--blue-d);
  border:1px solid #D2E4FC;
}
.tag-role.req{background:var(--gray-l);color:var(--ink3);border-color:#E3EBF4}

/* ---------------- 看板 ---------------- */
.board-wrap{
  flex:1 1 auto;
  min-height:0;
  position:relative;
  overflow:hidden;
}
.board{
  height:100%;
  display:flex;
  gap:13px;
  padding:16px 18px 18px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  cursor:grab;
}
.board.dragging{cursor:grabbing}
.board.dragging *{user-select:none}
.board::-webkit-scrollbar{height:10px}
.board::-webkit-scrollbar-track{background:transparent}
.board::-webkit-scrollbar-thumb{
  background:#C6DCF3;border-radius:99px;
  border:3px solid transparent;background-clip:content-box;
}
.board::-webkit-scrollbar-thumb:hover{background:#AACBE9;background-clip:content-box}

/* 两侧翻周箭头：默认很淡，鼠标靠近才浮现 */
.edge-nav{
  position:absolute;top:50%;
  width:38px;height:38px;
  margin-top:-19px;
  z-index:15;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  border:1px solid var(--line);
  color:var(--ink2);
  box-shadow:0 6px 18px -10px rgba(23,58,102,.5);
  opacity:.18;
  transition:opacity .2s,transform .18s,color .15s,border-color .15s,background .15s;
  backdrop-filter:blur(6px);
}
.edge-nav svg{width:17px;height:17px;stroke-width:2.1}
.edge-nav.prev{left:6px}
.edge-nav.next{right:6px}
.board-wrap:hover .edge-nav{opacity:.55}
.edge-nav:hover{
  opacity:1!important;
  color:var(--blue-d);
  border-color:var(--blue-b);
  background:#fff;
  transform:scale(1.06);
}
.edge-nav:active{transform:scale(.97)}

/* 列 */
.col{
  flex:0 0 340px;
  min-width:0;
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-s);
  overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.col.weekend{background:#FCFDFF}
.col.is-today{
  border-color:var(--blue-b);
  box-shadow:0 0 0 3px rgba(62,134,232,.09),var(--shadow-m);
}
.col-head{
  flex:0 0 auto;
  display:flex;align-items:center;gap:7px;
  padding:12px 14px 11px;
  border-bottom:1px solid var(--line-soft);
}
.dow{font-size:13px;font-weight:600;color:var(--ink)}
.dnum{
  font-size:12.5px;color:var(--ink3);
  font-variant-numeric:tabular-nums;
}
.col.weekend .dow{color:var(--ink2)}
.badge-today{
  margin-left:auto;
  font-size:10.5px;font-weight:650;
  padding:2px 7px;border-radius:6px;
  background:var(--blue);color:#fff;
}
.badge-count{
  margin-left:auto;
  font-size:11px;color:var(--ink3);
  background:var(--gray-l);
  min-width:19px;height:19px;
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  padding:0 5px;
}

.slots{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
.slots::-webkit-scrollbar{width:8px}
.slots::-webkit-scrollbar-track{background:transparent}
.slots::-webkit-scrollbar-thumb{background:#DCE8F6;border-radius:99px;border:2.5px solid transparent;background-clip:content-box}

.slot{padding:10px 12px 11px;border-bottom:1px dashed var(--line-soft)}
.slot:last-child{border-bottom:0}
.slot-head{
  display:flex;align-items:center;gap:6px;
  margin-bottom:8px;
  height:20px;
}
.slot-name{
  font-size:11.5px;font-weight:600;
  color:var(--ink3);
  letter-spacing:.4px;
}
.slot-count{
  font-size:10.5px;color:var(--ink3);
  font-variant-numeric:tabular-nums;
}
.slot-add{
  margin-left:auto;
  width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;
  color:var(--ink3);
  opacity:0;
  transition:opacity .15s,background .15s,color .15s;
}
.slot-add svg{width:13px;height:13px;stroke-width:2.2}
.slot:hover .slot-add{opacity:1}
.slot-add:hover{background:var(--blue-l);color:var(--blue-d)}

.cards{display:flex;flex-direction:column;gap:7px;min-height:44px}
.slot-empty{
  border:1px dashed #DDEAF8;
  border-radius:9px;
  height:34px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#B4C8DC;
  transition:border-color .15s,color .15s,background .15s;
}
.slot-empty:hover{border-color:var(--blue-b);color:var(--blue);background:#F7FBFF}
/* 拖动中：空槽变成明显的投放区 */
body.is-dragging .cards{min-height:56px}
body.is-dragging .slot-empty{
  border-color:var(--blue-b);color:#8FB8E4;background:#F6FAFF;
}

/* 卡片 */
.card{
  position:relative;
  padding:9px 11px 8px;
  border-radius:10px;
  background:#fff;
  border:1px solid #E4EEF9;
  box-shadow:var(--shadow-s);
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s,transform .08s;
}
.card:hover{
  border-color:var(--blue-b);
  box-shadow:0 5px 16px -8px rgba(30,72,132,.4);
}
.card:active{transform:translateY(.5px)}
.card.dragging{opacity:.4;cursor:grabbing}
.card.is-done,.card.is-voided{opacity:.62}
.card.is-done .card-title,.card.is-voided .card-title{
  text-decoration:line-through;
  text-decoration-color:#A9BECF;
  color:var(--ink2);
}

.card-top{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.pill{
  font-size:10.5px;font-weight:600;
  padding:1.5px 6px;border-radius:5px;
  letter-spacing:.2px;
}
.pill.pending{background:var(--amber-l);color:var(--amber)}
.pill.confirmed{background:var(--blue-l);color:var(--blue-d)}
.pill.done{background:var(--green-l);color:var(--green)}
.pill.voided{background:var(--gray-l);color:var(--ink3)}
.dl{
  margin-left:auto;
  display:flex;align-items:center;gap:3px;
  font-size:11px;color:var(--ink3);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  flex:0 0 auto;
}
.dl svg{width:11px;height:11px;stroke-width:2}
.dl.soon{color:var(--amber)}
.dl.over{color:var(--red);font-weight:600}
.pill,.over-tag{flex:0 0 auto}

.card-title{
  margin:0;
  font-size:13.5px;font-weight:600;
  line-height:1.45;
  letter-spacing:.1px;
  word-break:break-word;
}
.card-desc{
  margin:4px 0 0;
  font-size:12.5px;line-height:1.55;
  color:var(--ink2);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  word-break:break-word;
}
.card-note{
  margin-top:6px;
  padding:5px 8px;
  border-radius:7px;
  background:#F6FAFE;
  border-left:2px solid var(--blue-b);
  font-size:11.5px;line-height:1.5;
  color:#3D6C9E;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card-foot{
  display:flex;align-items:center;gap:9px;
  margin-top:8px;padding-top:7px;
  border-top:1px dashed var(--line-soft);
  font-size:11.5px;color:var(--ink3);
  min-height:19px;
}
.who{display:flex;align-items:center;gap:4px;min-width:0}
.who em{
  font-style:normal;
  font-size:10px;color:#A6BACD;
  letter-spacing:.2px;
}
.who b{
  font-weight:600;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:76px;
}
.who.wait b{color:#BCCBDA;font-weight:500}
.sep-dot{width:2.5px;height:2.5px;border-radius:50%;background:#D2DFEC;flex:0 0 2.5px}
.card-acts{margin-left:auto;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.card:hover .card-acts{opacity:1}

/* 超时未完成 */
.card.is-overdue{border-color:#F1C9C5;background:#FFFCFC}
.card.is-overdue::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  border-radius:10px 0 0 10px;
  background:var(--red);
}
.card.is-overdue .pill.pending{background:var(--red-l);color:var(--red)}
.over-tag{
  font-size:10px;font-weight:650;
  color:var(--red);background:var(--red-l);
  padding:1px 5px;border-radius:5px;
  letter-spacing:.3px;
}
.mini-btn{
  font-size:11px;font-weight:600;
  padding:2px 7px;border-radius:6px;
  background:var(--blue-l);color:var(--blue-d);
  border:1px solid #D3E4FB;
  transition:background .15s;
}
.mini-btn:hover{background:#DCEBFD}
.mini-btn.ok{background:var(--green-l);color:var(--green);border-color:#CEEDE0}
.mini-btn.ok:hover{background:#D8F2E8}

/* ---------------- 分运营视图（每天内部按运营拆竖列） ---------------- */
.col.split{flex:0 0 var(--split-w, 540px)}
.col.split .lanes{
  flex:1 1 auto;min-height:0;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  gap:6px;
  padding:7px;
  overflow-y:auto;overflow-x:hidden;
  align-items:stretch;
}
.col.split .lanes::-webkit-scrollbar{width:8px}
.col.split .lanes::-webkit-scrollbar-track{background:transparent}
.col.split .lanes::-webkit-scrollbar-thumb{background:#DCE8F6;border-radius:99px;border:2.5px solid transparent;background-clip:content-box}
.col.split .lane{
  flex:1 1 0;min-width:0;
  display:flex;flex-direction:column;
  border-radius:10px;
  background:#FBFDFF;
  border:1px solid var(--line-soft);
  overflow:hidden;
}
.col.split .lane-none{background:#FCFCFE;border-style:dashed;border-color:#E7F0FA}
.col.split .lane-head{
  flex:0 0 auto;
  display:flex;align-items:center;gap:4px;
  padding:5px 7px;
  border-bottom:1px solid var(--line-soft);
  background:rgba(255,255,255,.72);
}
.lane-name{
  font-size:11.5px;font-weight:650;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.col.split .lane-none .lane-name{color:#B4C8DC;font-weight:600}
.lane-count{
  margin-left:auto;
  font-size:10px;color:var(--ink3);
  background:var(--gray-l);
  min-width:16px;height:16px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;
  flex:0 0 auto;
}
/* 分运营时纵向滚动交给 .lanes，各 lane 内部不再各自滚动 */
.col.split .lane .slots{flex:0 0 auto;overflow:visible}
.col.split .slot{padding:7px 7px 8px}
.col.split .slot-head{margin-bottom:6px}
.col.split .slot-name{font-size:11px}
.col.split .cards{min-height:38px;gap:6px}
.col.split .slot-empty{height:30px;font-size:11px}

/* 窄卡片：藏掉「运营」一栏（列头已经写了），保留必要信息 */
.col.split .card{padding:7px 8px 6px;border-radius:8px}
.col.split .card-top{flex-wrap:wrap;row-gap:3px;margin-bottom:4px}
.col.split .card-title{font-size:12.5px;line-height:1.4}
.col.split .card-desc{font-size:11.5px;-webkit-line-clamp:1;margin-top:3px}
.col.split .card-note{font-size:11px;-webkit-line-clamp:1;padding:4px 6px;margin-top:5px}
.col.split .card-foot{flex-wrap:wrap;gap:5px;margin-top:6px;padding-top:5px;font-size:11px;min-height:0}
.col.split .card-foot .ops-who{display:none}
.col.split .who b{max-width:58px}
.col.split .dl{margin-left:0;font-size:10.5px}
.col.split .dl svg{width:10px;height:10px}
.col.split .mini-btn{font-size:10px;padding:1px 6px}

/* 拖放落点 */
.cards.drag-over{
  background:#F4FAFF;
  border-radius:9px;
  box-shadow:inset 0 0 0 1.5px var(--blue-b);
}
.slot.drag-over{
  background:#F7FBFF;
  border-radius:10px;
  box-shadow:inset 0 0 0 1.5px var(--blue-b);
}
.slot.drag-over .cards{background:transparent;box-shadow:none}

/* 需求人 / 运营 */
.who-line{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  padding:8px 11px;margin-bottom:10px;
  border-radius:9px;
  background:#F7FAFD;
  border:1px solid var(--line-soft);
  font-size:12.5px;
}
.who-k{font-size:11px;color:var(--ink3);font-weight:600}
.who-v{font-weight:600;color:var(--ink2);margin-right:8px}
.who-v.wait{color:#BCCBDA;font-weight:500}
.who-in{
  width:118px;height:27px;
  padding:0 8px;margin-right:8px;
  border:1px solid var(--line);border-radius:7px;
  background:#fff;
  font-size:12.5px;font-weight:600;color:var(--ink2);
}
.who-in:focus{border-color:var(--blue-b);box-shadow:0 0 0 3px rgba(62,134,232,.12)}

/* 需求人输入 */
.req-wrap{display:flex;align-items:center;gap:7px}
.req-wrap input[type=text]{flex:1;min-width:0}
.req-self{
  flex:0 0 auto;height:35px;padding:0 11px;
  border:1px solid var(--line);border-radius:9px;
  background:#fff;font-size:12px;font-weight:600;color:var(--ink2);
  transition:border-color .15s,color .15s,background .15s;
}
.req-self:hover{border-color:var(--blue-b);color:var(--blue-d);background:var(--blue-l)}

/* ---------------- 弹窗 ---------------- */
.modal{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(20,44,76,.28);
  backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .18s,visibility .18s;
}
.modal.on{opacity:1;visibility:visible}
.modal-card{
  width:100%;max-width:520px;
  max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;
  background:#fff;
  border-radius:16px;
  box-shadow:var(--shadow-l);
  transform:translateY(10px) scale(.99);
  transition:transform .2s cubic-bezier(.2,.8,.3,1);
  overflow:hidden;
}
.modal.on .modal-card{transform:none}
.modal-card.narrow{max-width:400px}

.modal-head{
  flex:0 0 auto;
  display:flex;align-items:flex-start;gap:12px;
  padding:16px 16px 12px 20px;
  border-bottom:1px solid var(--line-soft);
}
.mh-txt{flex:1;min-width:0}
.kick{
  display:block;
  font-size:11.5px;font-weight:600;
  color:var(--blue-d);
  letter-spacing:.3px;
  margin-bottom:3px;
  font-variant-numeric:tabular-nums;
}
.modal-head h3{
  margin:0;font-size:16px;font-weight:650;
  letter-spacing:.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.modal-body{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;
  padding:16px 20px 6px;
}
.modal-body::-webkit-scrollbar{width:8px}
.modal-body::-webkit-scrollbar-thumb{background:#DCE8F6;border-radius:99px;border:2.5px solid transparent;background-clip:content-box}
.modal-foot{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:flex-end;gap:8px;
  padding:13px 18px;
  border-top:1px solid var(--line-soft);
  background:#FBFDFF;
}
.modal-foot .grow{flex:1}

.field{margin-bottom:13px}
.field label{
  display:block;
  font-size:11.5px;font-weight:600;
  color:var(--ink3);
  margin-bottom:5px;
  letter-spacing:.2px;
}
.field input[type=text],.field input[type=password],.field textarea{
  width:100%;
  padding:9px 11px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#FAFCFF;
  font-size:13.5px;
  line-height:1.55;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.field textarea{resize:vertical;min-height:64px}
.field input:focus,.field textarea:focus,.sl-date:focus,.sl-sel:focus{
  border-color:var(--blue-b);
  background:#fff;
  box-shadow:0 0 0 3px rgba(62,134,232,.12);
}
.field input:disabled,.field textarea:disabled{
  background:#F7FAFD;
  border-color:var(--line-soft);
  color:var(--ink2);
  -webkit-text-fill-color:var(--ink2);
  cursor:default;
}
.hint{
  margin:0 0 14px;
  font-size:12.5px;line-height:1.6;
  color:var(--ink3);
}
.err{margin:4px 0 8px;font-size:12.5px;color:var(--red);min-height:0}
.check{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--ink2);
  cursor:pointer;
}
.check input{accent-color:var(--blue);width:14px;height:14px}

/* 时间行 */
.slot-line{
  display:flex;align-items:center;gap:8px;
  padding:9px 11px;
  border-radius:9px;
  background:#F5F9FE;
  border:1px solid var(--line-soft);
  margin-bottom:10px;
}
.sl-label{font-size:11.5px;color:var(--ink3);font-weight:600}
.sl-date,.sl-sel{
  height:30px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  font-size:12.5px;
  color:var(--ink2);
}
.sl-date{flex:1;min-width:0;font-variant-numeric:tabular-nums}
.sl-sel{flex:0 0 auto}
.sl-date::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer}

/* 截止时间折叠 */
.dead-wrap{margin-bottom:13px}
.dead-toggle{
  font-size:11.5px;font-weight:600;
  color:var(--ink3);
  padding:2px 0;
  transition:color .15s;
}
.dead-toggle:hover{color:var(--blue-d)}
.dead-toggle.has{color:var(--blue-d);background:var(--blue-l);padding:3px 9px;border-radius:7px}
.dead-line{display:flex;align-items:center;gap:8px;margin-top:8px}
.dead-clear{font-size:11.5px;color:var(--ink3);padding:2px 6px;border-radius:6px}
.dead-clear:hover{background:var(--red-l);color:var(--red)}

/* 详情元信息 */
.dmeta{
  margin:2px 0 12px;
  padding:10px 12px;
  border-radius:9px;
  background:#F7FAFD;
  border:1px solid var(--line-soft);
  font-size:11.5px;line-height:1.9;
  color:var(--ink3);
  font-variant-numeric:tabular-nums;
}
.dmeta b{color:var(--ink2);font-weight:600}

/* 用户管理 */
.user-add{
  display:grid;
  grid-template-columns:1fr 1fr 92px auto;
  gap:7px;
  margin-bottom:12px;
}
.user-add input,.user-add select{
  height:34px;padding:0 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#FAFCFF;
  font-size:12.5px;
  min-width:0;
}
.user-add input:focus,.user-add select:focus{border-color:var(--blue-b);background:#fff}
.user-list{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.u-row{
  display:flex;align-items:center;gap:8px;
  padding:7px 9px;
  border:1px solid var(--line-soft);
  border-radius:9px;
  background:#FCFDFF;
}
.u-row.off{opacity:.55}
.u-name{font-size:13px;font-weight:550}
.u-date{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.u-ops{margin-left:auto;display:flex;gap:4px}
.tag-off{
  font-size:10.5px;color:var(--ink3);
  background:var(--gray-l);padding:1px 6px;border-radius:5px;
}

/* 用户菜单 */
.usermenu{display:flex;flex-direction:column;gap:1px}
.um-item{
  display:block;width:100%;
  text-align:left;
  padding:8px 10px;
  border-radius:7px;
  font-size:12.5px;
  color:var(--ink2);
  transition:background .13s,color .13s;
}
.um-item:hover{background:var(--blue-l);color:var(--blue-d)}
.um-item.out{color:var(--red)}
.um-item.out:hover{background:var(--red-l);color:var(--red)}

/* ---------------- Toast ---------------- */
.toast-box{
  position:fixed;left:50%;bottom:28px;z-index:200;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;
}
.toast{
  padding:9px 16px;
  border-radius:10px;
  background:rgba(23,41,60,.94);
  color:#fff;
  font-size:13px;
  box-shadow:0 12px 30px -10px rgba(23,41,60,.6);
  animation:tin .22s cubic-bezier(.2,.8,.3,1);
}
.toast.ok{background:#15855C}
.toast.bad{background:#C6403A}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 演示模式条 */
.demo-bar{
  flex:0 0 auto;
  text-align:center;
  font-size:12px;
  padding:6px 12px;
  background:#E9F2FE;
  color:#2E71CF;
  border-bottom:1px solid #D3E4FB;
}

/* ============================================================
   拖拽（指针事件版）
   ============================================================ */
body.can-ops .card{cursor:grab}
body.can-ops .card:active{cursor:grabbing}
body.is-dragging{cursor:grabbing}
body.is-dragging *{user-select:none!important}

/* 跟着光标的幽灵卡片 */
.card.drag-ghost{
  position:fixed;z-index:9990;
  margin:0;pointer-events:none;
  opacity:.96;
  border-color:var(--blue-b);
  box-shadow:0 18px 38px -14px rgba(23,58,102,.55);
  will-change:transform;
}
/* 占位块：告诉人「松手就落在这里」 */
.drag-ph{
  border:1.5px dashed var(--blue-b);
  background:rgba(62,134,232,.07);
  border-radius:10px;
  min-height:34px;
  flex:0 0 auto;
}

/* ============================================================
   接口处理中的遮罩（转圈 + 挡重复点击）
   ============================================================ */
.busy-mask{
  position:fixed;inset:0;z-index:9995;
  display:none;align-items:center;justify-content:center;
  background:rgba(237,244,252,.55);
  -webkit-backdrop-filter:blur(1.5px);
  backdrop-filter:blur(1.5px);
}
body.is-busy .busy-mask{display:flex}
.busy-box{
  display:flex;align-items:center;gap:9px;
  padding:9px 16px 9px 12px;
  background:#fff;border:1px solid var(--line);
  border-radius:999px;
  box-shadow:0 16px 36px -18px rgba(23,58,102,.5);
  font-size:13px;color:var(--ink);
}
.spin{
  width:15px;height:15px;flex:0 0 auto;
  border:2px solid #CFE1F8;
  border-top-color:var(--blue);
  border-radius:50%;
  animation:sp .7s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}

/* ============================================================
   自动同步按钮的「刚刚更新」脉冲
   ============================================================ */
#btnAutoSync.synced{border-color:var(--blue-b);background:var(--blue-l);color:var(--blue-d)}
#btnAutoSync.synced .ls-track{background:var(--blue)}
#btnAutoSync.synced .ls-track .ls-knob{box-shadow:0 0 0 3px rgba(62,134,232,.25)}

/* ============================================================
   详情弹窗：状态选择
   ============================================================ */
.stat-line{
  display:flex;align-items:center;gap:9px;
  margin:2px 0 10px;
}
.stat-chips{display:flex;gap:6px;flex-wrap:wrap}
.st-chip{
  height:28px;padding:0 11px;
  border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--ink2);
  font-size:12.5px;cursor:pointer;
  transition:all .15s;
}
.st-chip:hover{border-color:var(--blue-b);color:var(--blue-d);background:#F7FBFF}
.st-chip.on{
  border-color:var(--blue);background:var(--blue-l);
  color:var(--blue-d);font-weight:600;
}
.st-chip:disabled{opacity:.55;cursor:not-allowed}
#dSave.dirty{box-shadow:0 0 0 3px rgba(62,134,232,.22)}

/* ---------------- 响应式 ---------------- */
@media (max-width:860px){
  .top{height:auto;flex-wrap:wrap;gap:8px;padding:8px 12px}
  .brand{flex:0 0 auto}
  .brand h1{font-size:14px}
  .right{flex:1 1 auto;justify-content:flex-end;gap:5px}
  .dater{order:3;width:100%;justify-content:center;margin-bottom:2px}
  .date-chip{height:32px;font-size:12.5px}
  .u-chip span:nth-child(2){display:none}
  .u-chip{padding:0 6px 0 4px;gap:5px}
  .btn.primary{padding:0 11px}
  .ai-entry{padding:0 9px}
  .ai-entry .ls-text{display:none}
  #btnAutoSync{padding:0 8px;gap:5px}
  #btnAutoSync .ls-text{display:none}
  #btnNew{font-size:0;gap:0;width:34px;padding:0}
  #btnNew .i{width:17px;height:17px}
  .board{padding:12px;gap:10px}
  .col{flex:0 0 86vw}
  .edge-nav{width:32px;height:32px;margin-top:-16px;opacity:.45}
  .edge-nav.prev{left:2px}
  .edge-nav.next{right:2px}
  .cal-pop{width:min(296px,calc(100vw - 20px))}
  .modal{padding:0;align-items:flex-end}
  .modal-card{max-width:100%;border-radius:16px 16px 0 0;max-height:92vh}
  .user-add{grid-template-columns:1fr 1fr}
}