/* ==========================================================================
   页面层 —— 今日看板 + 跨模块共用版式
   ========================================================================== */

/* ---------------- 顶部横幅 ---------------- */
.banner{
  position:relative;overflow:hidden;border-radius:var(--r-l);
  background:linear-gradient(120deg,#221C17 0%,#2E251C 46%,#3A2C1E 100%);
  color:#F3E9D8;padding:18px 22px;margin-bottom:16px;
  box-shadow:var(--sh-2);display:flex;align-items:center;gap:24px;flex-wrap:wrap;
}
.banner::before{ /* 祥云暗纹 */
  content:"";position:absolute;inset:0;opacity:.13;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='46' viewBox='0 0 120 46'><path d='M8 34c0-9 7-16 16-16 4-8 15-9 20-2 6-5 16-2 17 6 8-2 15 4 15 12 0 6-5 10-11 10H19c-6 0-11-4-11-10z' fill='none' stroke='%23D9B970' stroke-width='1.2'/></svg>");
  background-repeat:repeat-x;background-position:bottom left;background-size:120px 46px;
}
.banner::after{
  content:"";position:absolute;right:-60px;top:-70px;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(199,154,69,.20),transparent 68%);
}
.banner > *{position:relative;z-index:2}
.bn-l{min-width:220px}
.bn-date{font-size:11.5px;color:#B5A793;letter-spacing:.14em;text-transform:uppercase}
.bn-title{font-family:var(--f-serif);font-size:25px;font-weight:700;letter-spacing:.1em;margin-top:3px;
  background:linear-gradient(180deg,#FFF6E6,#D9B970);-webkit-background-clip:text;background-clip:text;color:transparent}
.bn-sub{font-size:12px;color:#A89A87;margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bn-seal{
  position:absolute;right:20px;bottom:-6px;width:64px;height:64px;border-radius:8px;
  display:grid;place-items:center;font-family:var(--f-serif);font-size:30px;font-weight:700;
  color:#F6D9CF;background:linear-gradient(150deg,rgba(212,70,58,.95),rgba(158,42,32,.95));
  transform:rotate(-7deg);box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 0 0 2px rgba(255,225,190,.3);
  opacity:.94;letter-spacing:0;
}
.bn-stats{display:flex;gap:26px;flex-wrap:wrap;margin-left:auto;margin-right:112px;position:relative;z-index:3}
.bn-stat .bs-v{font-family:var(--f-num);font-size:26px;font-weight:700;color:#F7EDD9;line-height:1.1}
.bn-stat .bs-l{font-size:11.5px;color:#A3957F;margin-top:2px;letter-spacing:.06em}
.bn-stat .bs-l b{color:#D9B970;font-weight:600}

/* ---------------- 今日课程时间轴 ---------------- */
.tl{display:flex;flex-direction:column;gap:0;position:relative}
.tl-item{
  display:flex;gap:12px;padding:10px 12px;border-radius:var(--r-s);position:relative;
  transition:background .14s;border-left:2px solid transparent;
}
.tl-item:hover{background:var(--card-2)}
.tl-item.now{background:linear-gradient(90deg,var(--gold-l),transparent 70%);border-left-color:var(--gold)}
.tl-item.done{opacity:.62}
.tl-time{
  flex:0 0 52px;text-align:right;padding-top:1px;
}
.tl-time .t-h{font-family:var(--f-num);font-size:13.5px;font-weight:700;line-height:1.2}
.tl-time .t-d{font-size:10.5px;color:var(--ink-4)}
.tl-dot{position:relative;flex:0 0 14px;display:flex;justify-content:center}
.tl-dot i{width:9px;height:9px;border-radius:50%;background:#fff;border:2.5px solid var(--cls-c,var(--ink-4));margin-top:5px;z-index:2}
.tl-dot::before{content:"";position:absolute;top:-10px;bottom:-10px;width:1px;background:var(--line);left:50%}
.tl-item:first-child .tl-dot::before{top:6px}
.tl-item:last-child .tl-dot::before{bottom:calc(100% - 12px)}
.tl-main{flex:1;min-width:0}
.tl-name{font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tl-meta{font-size:11.5px;color:var(--ink-4);margin-top:3px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tl-meta .m-i{display:inline-flex;align-items:center;gap:4px}
.tl-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tl-count{font-size:11.5px;color:var(--ink-3);text-align:right;white-space:nowrap}
.tl-count b{font-family:var(--f-num);font-size:13px}

/* ---------------- 待办列表 ---------------- */
.todo{display:flex;flex-direction:column}
.todo-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--paper-2);transition:background .14s}
.todo-item:last-child{border-bottom:0}
.todo-item:hover{background:var(--card-2)}
.todo-ico{width:26px;height:26px;border-radius:var(--r-s);display:grid;place-items:center;flex:0 0 26px}
.todo-ico.cinnabar{background:var(--cinnabar-l);color:var(--cinnabar)}
.todo-ico.gold{background:var(--gold-l);color:var(--gold-d)}
.todo-ico.jade{background:var(--jade-l);color:var(--jade)}
.todo-ico.indigo{background:var(--indigo-l);color:var(--indigo)}
.todo-main{flex:1;min-width:0}
.todo-t{font-size:12.5px;font-weight:600}
.todo-s{font-size:11px;color:var(--ink-4);margin-top:1px}
.todo-n{font-family:var(--f-num);font-size:16px;font-weight:700;color:var(--ink-2)}

/* ---------------- 快捷入口 ---------------- */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.quick-item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:13px 6px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--card-2);
  transition:all .15s;text-align:center;
}
.quick-item:hover{border-color:var(--gold);background:#fff;transform:translateY(-1px);box-shadow:var(--sh-2)}
.quick-item .q-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#fff;border:1px solid var(--line-2);color:var(--ink-2)}
.quick-item:hover .q-ico{color:var(--cinnabar);border-color:var(--cinnabar-b)}
.quick-item .q-t{font-size:11.5px;font-weight:600}
@media (max-width:560px){.quick{grid-template-columns:repeat(2,1fr)}}

/* ==========================================================================
   行内等高卡片（核心版式规则）
   —— 同一行的卡片高度必须完全一致，差额在卡内由内容均分消化，
      这样每条水平缝隙（行间距）在左右两列完全相等，不会出现"半截空白"
   ========================================================================== */
.card-eq{display:flex;flex-direction:column;height:100%}
.card-eq > .card-h,.card-eq > .card-f{flex:0 0 auto}
.card-eq > .card-b{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
/* 列表型内容：条目在卡内均分 */
.card-eq .tl,.card-eq .todo,.card-eq .hbars{flex:1;justify-content:space-evenly}
/* 网格型内容：行在卡内均分 */
.card-eq .eq-grid{flex:1;align-content:space-evenly}
/* 图表型内容：整体垂直居中，空白对称 */
.card-eq .eq-chart{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.card-eq .eq-chart > svg{flex:0 0 auto}

/* ---------------- 通用时间轴（成长记录） ---------------- */.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--line-2),var(--paper-3));border-radius:2px}
.tl-node{position:relative;padding:0 0 16px}
.tl-node:last-child{padding-bottom:2px}
.tl-node::before{
  content:"";position:absolute;left:-22px;top:4px;width:11px;height:11px;border-radius:50%;
  background:#fff;border:2.5px solid var(--node-c,var(--ink-4));z-index:2;
}
.tl-node.cinnabar{--node-c:var(--cinnabar)}
.tl-node.gold{--node-c:var(--gold)}
.tl-node.jade{--node-c:var(--jade)}
.tl-node.indigo{--node-c:var(--indigo)}
.tl-node.ink{--node-c:var(--ink-2)}
.tl-date{font-size:11px;color:var(--ink-4);font-family:var(--f-num);letter-spacing:.03em}
.tl-h{font-size:13px;font-weight:600;margin-top:2px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tl-p{font-size:12px;color:var(--ink-3);margin-top:3px;line-height:1.65}
.tl-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;padding:1px 6px;border-radius:3px;background:var(--paper-2);color:var(--ink-3)}

/* ---------------- 段位阶梯（横向分布） ---------------- */
.belt-ladder{display:flex;gap:6px;align-items:flex-end}
.bl-item{flex:1;min-width:0;text-align:center;display:flex;flex-direction:column;justify-content:flex-end}
.bl-bar{width:100%;max-width:38px;margin:0 auto;border-radius:3px 3px 0 0;background:var(--belt);min-height:4px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.bl-n{font-family:var(--f-num);font-size:12.5px;font-weight:700;margin-top:4px}
.bl-l{font-size:10.5px;color:var(--ink-4)}

/* ---------------- 迷你图例 ---------------- */
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--ink-3)}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:-1px}

/* ---------------- 图表容器 ---------------- */
.chart{width:100%;display:block;overflow:visible}
.chart text{font-family:var(--f-sans);fill:var(--ink-4);font-size:10.5px}
.chart .axis-line{stroke:var(--line);stroke-width:1}
.chart .grid-line{stroke:var(--paper-2);stroke-width:1;stroke-dasharray:3 3}
.chart .v-label{font-family:var(--f-num);fill:var(--ink-2);font-size:11px}
.chart .bar-hit{cursor:pointer}
.chart .bar-hit:hover{opacity:.82}

/* ---------------- 表格内的迷你条 ---------------- */
.mini-bar{height:5px;border-radius:5px;background:var(--paper-2);overflow:hidden;min-width:60px}
.mini-bar > i{display:block;height:100%;background:var(--mb-c,var(--gold));border-radius:5px}