/* ============================================================
   COMPONENTS — 按钮 / 卡片 / 徽标 / 进度条 / 表格 / 表单 / 提示
   像素风：直角、1px 描边、8px 步进
   ============================================================ */

/* ---------------- BUTTON ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--u1);
  height:32px; padding:0 var(--u2);
  background:var(--panel-2);
  border:1px solid var(--line-2);
  color:var(--txt-2);
  font-size:12px; letter-spacing:.02em;
  cursor:pointer; border-radius:0;
  transition:all var(--dur) var(--ease);
  white-space:nowrap;
}
.btn:hover{ background:var(--panel-3); border-color:var(--line-3); color:var(--txt); }
.btn:active{ transform:translateY(1px); }
.btn .btn-plus{ font-size:14px; line-height:1; }

.btn-primary{
  background:var(--acid); border-color:var(--acid); color:#04120A; font-weight:700;
}
.btn-primary:hover{
  background:var(--acid); border-color:var(--acid); color:#04120A;
  box-shadow:0 0 0 1px var(--acid), 0 0 18px -6px var(--acid-glow);
  filter:brightness(1.08);
}
.btn-danger{ color:var(--red); border-color:var(--red-dim2); background:var(--red-dim); }
.btn-danger:hover{ background:var(--red); border-color:var(--red); color:#1A0505; }
.btn-ghost{ background:transparent; border-color:transparent; color:var(--txt-3); }
.btn-ghost:hover{ background:var(--panel-2); border-color:var(--line); color:var(--txt); }
.btn-sm{ height:24px; padding:0 var(--u1); font-size:11px; }
.btn-block{ width:100%; height:40px; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

/* ---------------- PANEL / CARD ---------------- */
.panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
}
.panel-h{
  display:flex; align-items:center; gap:var(--u2);
  height:40px; padding:0 var(--u3);
  border-bottom:1px solid var(--line);
}
.panel-h .t{ font-size:12px; font-weight:700; letter-spacing:.04em; }
.panel-h .sub{ font-size:11px; color:var(--txt-3); }
.panel-b{ padding:var(--u3); }
.panel-b.flush{ padding:0; }

/* 像素角标：四角 4px 实心小方块 */
.px-corners::before,.px-corners::after{
  content:""; position:absolute; width:4px; height:4px; background:var(--line-3);
  pointer-events:none;
}
.px-corners::before{ top:-1px; left:-1px; box-shadow:calc(100% + 2px) 0 0 0 var(--line-3); }
.px-corners::after{ bottom:-1px; left:-1px; box-shadow:calc(100% + 2px) 0 0 0 var(--line-3); }
.px-corners.is-acid::before,.px-corners.is-acid::after{ background:var(--acid); }

/* ---------------- STAT 大卡片 ---------------- */
.stat-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--u3);
}
.stat-card{
  position:relative;
  height:var(--card-h);      /* 160px = 5 x 32 */
  padding:var(--u3);
  background:var(--panel);
  border:1px solid var(--line);
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.stat-card:hover{ border-color:var(--line-3); background:var(--panel-2); }
.stat-card .sc-top{ display:flex; align-items:center; gap:var(--u1); }
.stat-card .sc-ico{ width:16px; height:16px; }
.stat-card .sc-ico svg{ width:16px; height:16px; display:block; }
.stat-card .sc-name{
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3);
}
.stat-card .sc-val{
  font-family:var(--pixel); font-size:40px; line-height:1;
  margin-top:var(--u3); letter-spacing:-.02em;
}
.stat-card .sc-unit{ font-family:var(--mono); font-size:13px; color:var(--txt-3); margin-left:var(--u1); }
.stat-card .sc-foot{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  font-size:11px; color:var(--txt-3);
}
.stat-card .sc-trend{ display:flex; align-items:center; gap:4px; }
/* 大号水印数字，像素风点缀 */
.stat-card .sc-ghost{
  position:absolute; right:-8px; bottom:-24px;
  font-family:var(--pixel); font-size:88px; line-height:1;
  color:var(--txt); opacity:.035; pointer-events:none; user-select:none;
}
.stat-card.tone-acid{ --c:var(--acid); }
.stat-card.tone-red{ --c:var(--red); }
.stat-card.tone-mute{ --c:var(--txt-2); }
.stat-card .sc-ico,.stat-card .sc-val{ color:var(--c); }
.stat-card .sc-bar{
  position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--c);
}
.stat-card.tone-acid:hover{ box-shadow:inset 0 0 0 1px var(--acid-dim2); }
.stat-card.tone-red:hover{ box-shadow:inset 0 0 0 1px var(--red-dim2); }

/* 底部迷你柱状图（卡片内） */
.spark{ display:flex; align-items:flex-end; gap:2px; height:24px; }
.spark i{ width:4px; background:var(--c); opacity:.45; display:block; }
.spark i.hi{ opacity:1; }

/* ---------------- BADGE / CHIP ---------------- */
.badge{
  display:inline-flex; align-items:center; gap:4px;
  height:20px; padding:0 var(--u1);
  font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line-2); color:var(--txt-2);
  white-space:nowrap;
}
.badge .d{ width:6px; height:6px; flex:0 0 6px; }
.badge.b-high{ color:var(--red); border-color:var(--red-dim2); background:var(--red-dim); }
.badge.b-high .d{ background:var(--red); }
.badge.b-med{ color:var(--acid); border-color:var(--acid-dim2); background:var(--acid-dim); }
.badge.b-med .d{ background:var(--acid); }
.badge.b-low{ color:var(--txt-3); }
.badge.b-low .d{ background:var(--txt-3); }
.badge.b-todo{ color:var(--txt-2); }
.badge.b-doing{ color:var(--acid); border-color:var(--acid-dim2); background:var(--acid-dim); }
.badge.b-done{ color:var(--acid-3); border-color:var(--line); background:transparent; }
.badge.b-late{ color:var(--red); border-color:var(--red-dim2); background:var(--red-dim); }
.badge.b-cat{ color:var(--txt-2); }

.tag{
  display:inline-flex; align-items:center; height:18px; padding:0 6px;
  font-size:10px; color:var(--txt-3); border:1px solid var(--line);
}

/* ---------------- PROGRESS ---------------- */
.pbar{
  position:relative; height:8px; background:var(--panel-3);
  border:1px solid var(--line); overflow:hidden;
}
.pbar > i{
  display:block; height:100%; background:var(--acid);
  box-shadow:0 0 8px -2px var(--acid-glow);
  transition:width .18s var(--ease);
}
.pbar.is-red > i{ background:var(--red); box-shadow:0 0 8px -2px var(--red-glow); }
/* 像素刻度：每 10% 一个断点 */
.pbar.ticks{
  background-image:repeating-linear-gradient(to right,
    transparent 0, transparent calc(10% - 1px), var(--line) calc(10% - 1px), var(--line) 10%);
}

.pbar-lg{ height:16px; }
.pbar-drag{ cursor:ew-resize; }
.pbar-drag > i::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:4px;
  background:var(--acid); box-shadow:0 0 8px 0 var(--acid-glow);
}

/* ---------------- SEGMENTED / FILTER ---------------- */
.seg{
  display:inline-flex; border:1px solid var(--line-2); background:var(--panel);
  height:32px;
}
.seg button{
  display:inline-flex; align-items:center; gap:6px;
  height:100%; padding:0 var(--u2);
  background:transparent; border:0; border-right:1px solid var(--line);
  color:var(--txt-3); font-size:12px; cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.seg button:last-child{ border-right:0; }
.seg button:hover{ color:var(--txt); background:var(--panel-2); }
.seg button.is-active{ background:var(--acid); color:#04120A; font-weight:700; }
.seg button .ico{ width:12px; height:12px; display:block; }
.seg button .ico svg{ width:12px; height:12px; display:block; fill:currentColor; }

.filters{
  display:flex; align-items:center; gap:var(--u1); flex-wrap:wrap;
}
.sel{
  position:relative; display:inline-flex; align-items:center;
  height:32px; border:1px solid var(--line-2); background:var(--panel);
  color:var(--txt-2); font-size:12px; cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.sel:hover{ border-color:var(--line-3); color:var(--txt); }
.sel > span{ padding:0 var(--u2); pointer-events:none; white-space:nowrap; }
.sel .caret{
  width:16px; height:100%; display:grid; place-items:center;
  border-left:1px solid var(--line); color:var(--txt-3); font-size:9px;
}
.sel.is-on{ border-color:var(--acid-dim2); color:var(--acid); background:var(--acid-dim); }
.sel.is-on .caret{ border-color:var(--acid-dim2); color:var(--acid); }

/* 下拉浮层 */
.pop{
  position:fixed; z-index:200; min-width:176px;
  background:var(--panel-2); border:1px solid var(--line-3);
  box-shadow:0 16px 40px -16px #000;
  padding:var(--u1) 0; display:none;
}
.pop.is-open{ display:block; }
.pop-item{
  display:flex; align-items:center; gap:var(--u1);
  width:100%; padding:0 var(--u2); height:32px;
  background:transparent; border:0; color:var(--txt-2); font-size:12px;
  cursor:pointer; text-align:left;
}
.pop-item:hover{ background:var(--panel-3); color:var(--txt); }
.pop-item.is-on{ color:var(--acid); }
.pop-item.is-on::after{ content:"●"; margin-left:auto; font-size:9px; }
.pop-sep{ height:1px; background:var(--line); margin:var(--u1) 0; }
.pop-h{
  padding:0 var(--u2); height:24px; display:flex; align-items:center;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-4);
}

/* 搜索框 */
.search{
  display:inline-flex; align-items:center; height:32px;
  border:1px solid var(--line-2); background:var(--panel);
  padding:0 var(--u2); gap:var(--u1);
}
.search input{
  background:transparent; border:0; outline:0; color:var(--txt);
  font-size:12px; width:144px;
}
.search input::placeholder{ color:var(--txt-4); }
.search:focus-within{ border-color:var(--acid-dim2); }

/* ---------------- TABLE ---------------- */
.tbl{ width:100%; border-collapse:collapse; }
.tbl th{
  height:40px; padding:0 var(--u2);
  text-align:left; font-size:10px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--txt-3);
  border-bottom:1px solid var(--line); background:var(--panel-2);
  white-space:nowrap; position:sticky; top:0; z-index:2;
}
.tbl td{
  height:48px; padding:0 var(--u2);
  border-bottom:1px solid var(--line);
  font-size:13px; vertical-align:middle;
}
.tbl tbody tr{ transition:background var(--dur) var(--ease); }
.tbl tbody tr:hover{ background:var(--panel-2); }
.tbl tbody tr.is-done td{ color:var(--txt-3); }
.tbl tbody tr.is-done .t-title{ text-decoration:line-through; text-decoration-color:var(--txt-4); }
.tbl .c-chk{ width:40px; }
.tbl .c-act{ width:88px; text-align:right; }
.t-title{ display:flex; align-items:center; gap:var(--u1); min-width:0; }
.t-title .txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 勾选框：像素方块 */
.chk{
  width:16px; height:16px; flex:0 0 16px;
  border:1px solid var(--line-3); background:var(--bg-2);
  display:grid; place-items:center; cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.chk:hover{ border-color:var(--acid); }
.chk.is-on{ background:var(--acid); border-color:var(--acid); }
.chk.is-on::after{
  content:""; width:8px; height:4px; border-left:2px solid #04120A; border-bottom:2px solid #04120A;
  transform:rotate(-45deg) translate(1px,-2px);
}

/* ---------------- EMPTY ---------------- */
.empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--u2); padding:var(--u8) var(--u4); color:var(--txt-4);
}
.empty .eg{ font-family:var(--pixel); font-size:16px; color:var(--line-3); }
.empty .et{ font-size:12px; }

/* ---------------- TOAST ---------------- */
.toast-wrap{
  position:fixed; right:var(--u3); bottom:var(--u3); z-index:500;
  display:flex; flex-direction:column; gap:var(--u1); pointer-events:none;
}
.toast{
  min-width:216px; padding:0 var(--u2); height:40px;
  display:flex; align-items:center; gap:var(--u1);
  background:var(--panel-2); border:1px solid var(--line-3);
  border-left:2px solid var(--acid);
  font-size:12px; color:var(--txt);
  animation:toastIn .2s var(--ease);
}
.toast.t-red{ border-left-color:var(--red); }
.toast .dot{ width:8px; height:8px; background:var(--acid); flex:0 0 8px; }
.toast.t-red .dot{ background:var(--red); }
@keyframes toastIn{ from{ opacity:0; transform:translateX(16px);} to{opacity:1;transform:none;} }

/* ---------------- FORM ---------------- */
.form{ display:flex; flex-direction:column; gap:var(--u4); max-width:720px; }
.fsec{ display:flex; flex-direction:column; gap:var(--u2); }
.fsec-h{
  display:flex; align-items:center; gap:var(--u1);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--txt-3);
  padding-bottom:var(--u1); border-bottom:1px solid var(--line);
}
.fsec-h .n{
  width:16px; height:16px; display:grid; place-items:center;
  background:var(--acid); color:#04120A; font-size:10px; font-weight:700;
}
.field{ display:flex; flex-direction:column; gap:var(--u1); }
.field > label{ font-size:11px; color:var(--txt-2); letter-spacing:.04em; }
.field .hint{ font-size:10px; color:var(--txt-4); }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--u3); }

.inp,select.inp,textarea.inp{
  height:40px; padding:0 var(--u2);
  background:var(--bg-2); border:1px solid var(--line-2);
  color:var(--txt); font-size:13px; outline:0; width:100%;
  border-radius:0; transition:border-color var(--dur) var(--ease);
  font-family:var(--mono);
}
textarea.inp{ height:96px; padding:var(--u1) var(--u2); line-height:1.7; resize:vertical; }
.inp:focus{ border-color:var(--acid); box-shadow:0 0 0 1px var(--acid-dim2); }
.inp::placeholder{ color:var(--txt-4); }
select.inp{ cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--txt-3) 50%),linear-gradient(135deg,var(--txt-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 18px, calc(100% - 11px) 18px;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
}
option{ background:var(--panel); color:var(--txt); }

/* 分段选择器（表单内） */
.opt-row{ display:flex; gap:var(--u1); flex-wrap:wrap; }
.opt{
  height:32px; padding:0 var(--u2);
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--line-2); background:var(--bg-2);
  color:var(--txt-3); font-size:12px; cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.opt:hover{ border-color:var(--line-3); color:var(--txt-2); }
.opt.is-on{ border-color:var(--acid); color:var(--acid); background:var(--acid-dim); }
.opt.is-on .d{ background:var(--acid); }
.opt .d{ width:6px; height:6px; }
.opt.o-red.is-on{ border-color:var(--red); color:var(--red); background:var(--red-dim); }
.opt.o-red.is-on .d{ background:var(--red); }

/* 滑块 */
input[type=range].rng{
  -webkit-appearance:none; appearance:none; width:100%; height:24px;
  background:transparent; cursor:pointer;
}
.rng::-webkit-slider-runnable-track{ height:8px; background:var(--panel-3); border:1px solid var(--line-2); }
.rng::-webkit-slider-thumb{
  -webkit-appearance:none; width:12px; height:20px; margin-top:-7px;
  background:var(--acid); border:0; box-shadow:0 0 8px -2px var(--acid-glow);
}
.rng::-moz-range-track{ height:8px; background:var(--panel-3); border:1px solid var(--line-2); }
.rng::-moz-range-thumb{ width:12px; height:20px; border:0; background:var(--acid); border-radius:0; }

/* ---------------- 通用拖拽状态 ---------------- */
.drag-src{ opacity:.35; }
.drop-on{ outline:1px dashed var(--acid); outline-offset:-1px; background:var(--acid-dim); }
.dz-over{ background:var(--acid-dim); outline:1px solid var(--acid); outline-offset:-1px; }

/* ============================================================
   右侧抽屉（新建 / 编辑任务）—— 非全屏，从右侧滑出
   ============================================================ */
.drawer-mask{
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.6);
  opacity:0; visibility:hidden;
  transition:opacity .24s var(--ease), visibility .24s var(--ease);
}
.drawer-mask.is-open{ opacity:1; visibility:visible; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:301;
  width:480px; max-width:92vw;
  display:flex; flex-direction:column;
  background:var(--panel);
  border-left:1px solid var(--line-2);
  box-shadow:-32px 0 64px -32px #000;
  transform:translateX(100%);
  transition:transform .28s var(--ease);
}
.drawer.is-open{ transform:none; }

.drawer-head{
  flex:0 0 64px; height:64px;
  display:flex; align-items:center; gap:var(--u2);
  padding:0 var(--u3);
  border-bottom:0;                   /* 换成下方 4px 像素点阵分隔线 */
  background:var(--panel-2);
  position:relative;
}
.drawer-head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:4px;
  background-image:repeating-linear-gradient(90deg,
    var(--line-3) 0 4px, transparent 4px 12px);
  pointer-events:none;
}
.drawer-back{
  width:32px; height:32px; flex:0 0 32px;
  display:grid; place-items:center;
  background:transparent; border:1px solid var(--line-2);
  color:var(--txt-2); cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.drawer-back:hover{ border-color:var(--acid); color:var(--acid); background:var(--acid-dim); }
.drawer-back svg{ width:16px; height:16px; display:block; fill:currentColor; }
.drawer-title{ font-size:15px; font-weight:700; letter-spacing:.02em; }
.drawer-sub{ font-size:11px; color:var(--txt-3); margin-top:2px; }

.drawer-body{
  flex:1; min-height:0;
  overflow-y:hidden;                /* 表单内容不多：默认不滚动（矮屏自动放开） */
  padding:var(--u4);
}
@media (max-height:780px){
  .drawer-body{ overflow-y:auto; }
}

/* 抽屉内表单：占满宽度 */
.drawer .form{ max-width:none; }
.drawer .new-foot{
  position:sticky; bottom:calc(-1 * var(--u4));
  background:var(--panel);
  padding-bottom:var(--u4);
  border-top:1px solid var(--line);
  padding-top:var(--u3);
  margin-top:var(--u1);
}

/* ============================================================
   标题行工具区（筛选 + 新建 同行，节省纵向空间）
   ============================================================ */
.section-h .tb-tools{
  margin-left:auto;
  display:flex; align-items:center; gap:var(--u1);
  flex-wrap:nowrap;
}
.section-h .tb-div{ width:1px; height:20px; background:var(--line); margin:0 4px; }
@media (max-width:1500px){
  .section-h{ height:auto; min-height:32px; flex-wrap:wrap; padding-bottom:var(--u1); }
}

/* ============================================================
   侧栏账号区（tab 栏左下角长条：头像 + 昵称 + 邮箱）
   ============================================================ */
/* 云端未开通提示横幅（登录抽屉内） */
.cloud-off{
  display:flex; flex-direction:column; gap:var(--u1);
  padding:var(--u2);
  background:var(--red-dim); border:1px solid var(--red-dim2);
  border-left:2px solid var(--red);
}
.cloud-off b{ font-size:12px; color:var(--red); letter-spacing:.04em; }
.cloud-off span{ font-size:11px; color:var(--txt-2); line-height:1.7; }

.acct{
  width:100%; height:56px;
  display:flex; align-items:center; gap:var(--u1);
  padding:0 var(--u1);
  background:var(--panel-2); border:1px solid var(--line-2);
  color:var(--txt); cursor:pointer;
  transition:all var(--dur) var(--ease);
  margin-bottom:var(--u1);
}
.acct:hover{ background:var(--panel-3); border-color:var(--line-3); }
.acct-ava{
  width:32px; height:32px; flex:0 0 32px;
  display:grid; place-items:center;
  background:var(--acid); color:#04120A;
  font-family:var(--pixel); font-size:12px;
  box-shadow:0 0 0 1px var(--acid), 0 0 12px -4px var(--acid-glow);
}
.acct-ava.is-off{
  background:var(--panel-3); color:var(--txt-3);
  box-shadow:0 0 0 1px var(--line-3);
}
.acct-txt{
  flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
  text-align:left;
}
.acct-txt b{
  font-size:12px; font-weight:700; letter-spacing:.02em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acct-txt i{
  font-style:normal; font-size:10px; color:var(--txt-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acct-caret{ flex:0 0 auto; font-size:9px; color:var(--txt-3); }
.acct:hover .acct-caret{ color:var(--acid); }
.acct.is-off .acct-txt b{ color:var(--txt-2); }

/* ============================================================
   日期选择器：输入框 + 底部弹出的像素风日历
   弹层与输入框左右边缘对齐（铺满 .dp-wrap）
   ============================================================ */
.dp-wrap{ position:relative; }
.dp-inp{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--u1); text-align:left; cursor:pointer;
  font-family:var(--mono);
}
.dp-inp .dp-val{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.dp-inp .dp-val.empty{ color:var(--txt-4); }
.dp-inp .dp-ico{
  flex:0 0 16px; width:16px; height:16px; color:var(--txt-3);
  display:inline-flex;
}
.dp-inp .dp-ico svg{ width:16px; height:16px; display:block; }
.dp-inp:hover .dp-ico{ color:var(--acid); }
.dp-wrap.is-picking .dp-inp,
.dp-inp.is-on{
  border-color:var(--acid); box-shadow:0 0 0 1px var(--acid-dim2);
}

/* —— 日历弹层：与输入框同宽（left:0; right:0 → 边对边） —— */
.dcal{
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  z-index:120;
  background:var(--panel-2); border:1px solid var(--line-3);
  box-shadow:0 16px 40px -16px #000;
  opacity:0; transform:translateY(-4px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events:none;
}
.dcal.is-open{ opacity:1; transform:none; pointer-events:auto; }
/* 下方空间不足 → 在日期栏上方弹出（动画方向相应翻转） */
.dcal.is-up{
  top:auto; bottom:calc(100% + 4px);
  transform:translateY(4px);
  box-shadow:0 -16px 40px -16px #000;
}
.dcal.is-up.is-open{ transform:none; }

.dcal-h{
  display:flex; align-items:center; gap:var(--u1);
  height:40px; padding:0 var(--u1);
  border-bottom:1px solid var(--line);
}
.dcal-h .dcal-t{
  flex:1; text-align:center; font-size:12px; font-weight:700;
  letter-spacing:.04em; color:var(--txt);
}
.dcal-nav{
  width:24px; height:24px; flex:0 0 24px;
  display:grid; place-items:center;
  background:transparent; border:1px solid var(--line-2);
  color:var(--txt-3); font-size:9px; cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.dcal-nav:hover{ border-color:var(--acid); color:var(--acid); background:var(--acid-dim); }

.dcal-wd{
  display:grid; grid-template-columns:repeat(7,1fr);
  height:24px; border-bottom:1px solid var(--line);
  background:var(--panel);
}
.dcal-wd span{
  display:grid; place-items:center;
  font-size:9px; letter-spacing:.1em; color:var(--txt-4);
}

.dcal-grid{ display:grid; grid-template-columns:repeat(7,1fr); }
.dcal-d{
  height:32px;
  background:transparent; border:0; border-bottom:1px solid var(--line);
  color:var(--txt-2); font-size:12px; cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:all var(--dur) var(--ease);
  position:relative;
}
.dcal-d:nth-child(7n){ border-right:0; }
.dcal-d:hover{ background:var(--panel-3); color:var(--txt); }
.dcal-d.dim{ color:var(--txt-4); opacity:.45; }
.dcal-d.wk{ color:var(--red); opacity:.75; }
.dcal-d.today{ color:var(--acid); box-shadow:inset 0 0 0 1px var(--acid-dim2); }
.dcal-d.sel{
  background:var(--acid); color:#04120A; font-weight:700;
  box-shadow:0 0 12px -4px var(--acid-glow);
}
.dcal-d.sel:hover{ background:var(--acid); color:#04120A; }
.dcal-d.sel.dim{ background:var(--line-3); color:var(--txt-4); box-shadow:none; }

.dcal-foot{
  display:flex; align-items:center; justify-content:space-between;
  height:32px; padding:0 var(--u1);
  border-top:1px solid var(--line);
  background:var(--panel);
}
.dcal-foot .dcal-cur{ font-size:10px; color:var(--txt-4); letter-spacing:.06em; }
.dcal-clear{
  height:20px; padding:0 var(--u1);
  background:transparent; border:1px solid var(--line-2);
  color:var(--txt-3); font-size:10px; cursor:pointer;
  transition:all var(--dur) var(--ease);
}
.dcal-clear:hover{ border-color:var(--red); color:var(--red); background:var(--red-dim); }


/* ============================================================
   像素点缀（克制版）：面板标题方块 / 主按钮硬阴影 / 账号条角标
   ============================================================ */
/* 面板标题前 6px 荧光绿实心方块（甘特图 / 任务池 / 年度目标等标题） */
.panel-h .t::before{
  content:""; display:inline-block;
  width:6px; height:6px; background:var(--acid);
  margin-right:8px; vertical-align:1px;
  box-shadow:0 0 6px -1px var(--acid-glow);
}

/* 主按钮：复古硬阴影（像素质感的 3px 偏移色块），按下时位移吃掉阴影 */
.btn-primary{ box-shadow:3px 3px 0 0 var(--acid-3); }
.btn-primary:hover{ box-shadow:3px 3px 0 0 var(--acid-3); }
.btn-primary:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 0 var(--acid-3); }

/* 账号条：支持像素角标 */
.acct{ position:relative; }

/* 顶部面包屑后的像素小方块（呼应品牌） */
.topbar-crumb::after{
  content:""; display:inline-block;
  width:5px; height:5px; background:var(--acid);
  margin-left:8px; vertical-align:1px; opacity:.75;
}