/* ===== 项目管理的8个表格 —— 主题样式（与原Excel模板一致） ===== */
:root{
  --purple:#CCC0DA;        /* 区块标题紫 */
  --purple-deep:#B4A7D6;   /* 大标题紫 */
  --purple-light:#E5E5F3;  /* 浅紫 */
  --green:#70DBB8;         /* 已完成 */
  --green-deep:#7BC0A5;
  --green-text:#00B050;
  --yellow:#FFE3B4;        /* 进行中 */
  --yellow-card:#FDE9B8;
  --amber-text:#E8A000;
  --pink:#F2CDDC;          /* 已逾期浅粉 */
  --pink-card:#F5C6D6;
  --red-text:#C00000;
  --red:#FF0000;
  --gray:#BFBFBF;
  --gray-text:#7F7F7F;
  --teal:#ACDDCF;          /* 优先级2 */
  --cyan:#B7DEE8;          /* 分割线 */
  --cyan-row:#D9EDF3;
  --cell:#F6F6F6;
  --border:#D9D9D9;
  --text:#262626;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"等线","Microsoft YaHei","宋体",sans-serif;color:var(--text);font-size:14px;background:#fff}
#app{display:flex;min-height:100vh}

/* ===== 左侧导航 ===== */
#sidenav{width:208px;flex:0 0 208px;background:linear-gradient(180deg,#CFC6E0,#C4BADB);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.nav-logo{text-align:center;font-size:20px;font-weight:bold;letter-spacing:4px;padding:22px 8px;line-height:1.7;color:#000}
#navlist{flex:1;overflow-y:auto;padding:6px 10px}
.nav-item{display:block;padding:10px 12px;margin:5px 0;border-radius:6px;background:rgba(255,255,255,.55);cursor:pointer;color:#000;text-decoration:none;font-size:14px;transition:.15s;border:1px solid transparent}
.nav-item:hover{background:#fff}
.nav-item.active{background:#fff;border-color:#9E8FC4;font-weight:bold;box-shadow:0 1px 4px rgba(80,60,130,.25)}
.nav-item .sub{display:block;font-size:11px;color:#6B6390;margin-top:2px;font-weight:normal}
.nav-footer{padding:12px 10px}
#btn-reset{width:100%;padding:8px;border:1px solid #9E8FC4;background:rgba(255,255,255,.6);border-radius:6px;cursor:pointer;font-size:12px;color:#4A3F75}
#btn-reset:hover{background:#fff}

#view{flex:1;min-width:0;padding:0 0 60px}

/* ===== 通用：大标题条 ===== */
.sheet-title{background:var(--purple);font-size:26px;font-weight:bold;padding:12px 24px;letter-spacing:2px;margin-bottom:14px}
.sheet-subtitle{font-size:12px;color:var(--gray-text);padding:0 24px;margin:-8px 0 12px}

/* ===== 状态卡片 ===== */
.stat-cards{display:flex;gap:28px;padding:6px 24px 16px;flex-wrap:wrap}
.stat-card{width:210px;height:96px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.stat-card .t{font-size:16px;font-weight:bold}
.stat-card .n{font-size:15px}
.stat-card.green{background:var(--green)}
.stat-card.yellow{background:var(--yellow-card)}
.stat-card.pink{background:var(--pink-card)}
.stat-card.gray{background:var(--gray)}
.stat-card.purple{background:var(--purple-light)}
.stat-card.deepgreen{background:var(--green-deep)}

/* 小标签 / 芯片 */
.chip{display:inline-block;padding:2px 10px;border-radius:3px;font-size:13px}
.prio-1{background:var(--pink)}
.prio-2{background:var(--teal)}
.prio-3{background:var(--yellow)}
.prio-4{background:var(--purple-light)}
td.prio-1{background:var(--pink) !important}
td.prio-2{background:var(--teal) !important}
td.prio-3{background:var(--yellow) !important}
td.prio-4{background:var(--purple-light) !important}

/* 负责人滚动显示（多人时） */
.marquee{display:block;overflow:hidden;white-space:nowrap;max-width:150px}
.marquee>span{display:inline-block;min-width:100%;animation:mq 27s linear infinite}
@keyframes mq{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}
.score-pos{color:var(--green-text);font-weight:bold}
.score-neg{color:var(--red-text);font-weight:bold}

/* ===== 登录 / 注册 ===== */
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#EFEBF6,#DDD5EE)}
.auth-card{background:#fff;border-radius:16px;box-shadow:0 8px 40px rgba(80,60,130,.18);padding:40px 44px;width:420px}
.auth-logo{text-align:center}
.auth-logo img{height:64px}
.auth-title{text-align:center;font-size:24px;font-weight:bold;letter-spacing:4px;margin:12px 0 20px}
.auth-form label{display:block;font-size:13px;color:#555;margin-bottom:10px}
.auth-form input{width:100%;padding:9px 12px;border:1px solid #C9BEDE;border-radius:6px;font:inherit;margin-top:4px}
.auth-form input:focus{outline:none;border-color:#9E8FC4;box-shadow:0 0 0 3px rgba(158,143,196,.2)}
.auth-err{min-height:22px;font-size:13px;color:#C00000;margin:8px 0}
.nav-item.nav-disabled{opacity:.45;cursor:not-allowed}
.noperm{padding:40px;text-align:center;color:var(--gray-text);font-size:16px;background:#fff;border-radius:8px}

/* LOGO */
.logo-img{height:52px;display:block;margin:0 auto}
.logo-text{text-align:center;font-size:16px;font-weight:bold;letter-spacing:2px;margin-top:8px;color:#000}
.nav-logo{padding:14px 8px}
.userbox{background:rgba(255,255,255,.55);border-radius:8px;padding:10px;margin-bottom:10px;text-align:center}
.userbox .uname{font-weight:bold}
.userbox .uemail{font-size:11px;color:#6B6390;word-break:break-all}

/* 绩效考核表 */
.perf-table{border-collapse:collapse;width:100%;background:#fff}
.perf-table th,.perf-table td{border:1px solid #B9B9B9;padding:6px 8px;text-align:center;font-size:13px;vertical-align:middle}
.perf-table thead th{background:var(--purple)}
.perf-table .perf-title{font-size:20px;font-weight:bold;letter-spacing:3px;padding:14px}
.perf-table .perf-info{padding:10px;font-size:14px}
.perf-table td.l{text-align:left}
.perf-dim{background:#EFEBF6;font-weight:bold;white-space:pre-line;font-size:13px;line-height:1.8}
.perf-std{font-size:12px;color:#444;line-height:1.7;white-space:pre-line}
.perf-num{width:52px;border:1px solid transparent;text-align:center;font:inherit;padding:4px;background:transparent}
.perf-num:hover,.perf-num:focus{border-color:#9E8FC4;outline:none;background:#fff}
.perf-reason{width:100%;min-width:120px;border:1px solid transparent;font:inherit;padding:4px;font-size:12px;background:transparent;resize:vertical;white-space:pre;overflow-x:auto;line-height:1.6}
.perf-reason:hover,.perf-reason:focus{border-color:#9E8FC4;outline:none;background:#fff}
.perf-h{font-weight:bold;background:#F6F6F6}
.perf-total{background:var(--purple-light);font-weight:bold}
.perf-level{color:#6A5ACD}
.perf-notes{font-size:12px;color:#555;line-height:1.9;padding:12px}
.perf-cur td{background:#DDF0E8;font-weight:bold}
#pf-person,#pf-month{padding:6px 10px;font:inherit;border:1px solid #B9AFD6;border-radius:5px}
.perf-table input[disabled],.perf-table textarea[disabled]{background:transparent;color:inherit;-webkit-text-fill-color:inherit;opacity:1;cursor:not-allowed}

/* 模拟邮件弹窗 */
.mail-mask{position:fixed;inset:0;background:rgba(40,30,70,.45);z-index:999;display:flex;align-items:center;justify-content:center}
.mail-box{background:#fff;border-radius:12px;box-shadow:0 10px 50px rgba(0,0,0,.3);padding:26px 30px;width:520px;max-width:90vw}
.mail-box h3{font-size:16px;color:#4A3F75;margin-bottom:14px}
.mail-row{font-size:14px;margin:6px 0;word-break:break-all}
.mail-body{background:#F6F4FB;border-radius:8px;padding:14px;font-size:13px;line-height:1.9;max-height:300px;overflow:auto;margin-top:10px}

/* 打印（导出PDF）：考核表横向A4，绩效汇总表竖向A4；只打印表本体，不含级别表/系数表/月度汇总表/按钮 */
@page{ size:A4 landscape; margin:10mm; }
@page sumpage{ size:A4 portrait; margin:10mm; }
@media print{
  body *{visibility:hidden}
  .perf-print,.perf-print *,.sum-print,.sum-print *{visibility:visible}
  .perf-print,.sum-print{position:absolute;left:0;top:0;width:100%;zoom:0.62}
  .sum-print{zoom:0.5}
  body.print-sum{page:sumpage}   /* 汇总打印整页使用竖向页面，避免命名页切换产生空白页 */
  body.print-sum #app{display:none !important}   /* 汇总打印时隐藏底层页面，避免隐藏内容撑出空白页 */
  body.print-sum .perf-print{display:none !important}
  body.print-sum .sum-print{position:static;zoom:0.85}   /* 汇总表竖向单页输出 */
  body.print-sum .mail-mask{position:static !important;background:none !important;display:block !important}
  body.print-sum .mail-box{position:static !important;box-shadow:none !important;border-radius:0 !important;width:100% !important;max-width:none !important;padding:0 !important}
  body.print-sum .mail-box h3{display:none !important}   /* 弹窗标题不打印，表内已有标题 */
  body.print-sum .pf-modal-body>div{max-height:none !important;overflow:visible !important}   /* 打印时不裁切汇总表 */
  .perf-print .perf-notes-row{break-before:page;page-break-before:always}   /* 考核人签字行以上在第1页，注释内容从第2页开始 */
  .perf-print .no-print,.sum-print .no-print{display:none!important}
  .perf-table input,.perf-table textarea{border:none !important}
  .perf-table th,.perf-table td{padding:5px 6px}
  .sum-print .perf-table th,.sum-print .perf-table td{padding:3px 6px}
}

/* 签字行 */
.sig-cell{padding:12px 10px !important;white-space:nowrap}
.sig-line{display:inline-block;width:150px;border-bottom:1px solid #333;height:14px;vertical-align:bottom;margin:0 8px}
.sig-btn{min-width:88px}

/* 考核理由单元格：文字按单元格大小换行，底部一字高操作按钮 */
.reason-cell{vertical-align:top;text-align:left}
.reason-text{white-space:pre-wrap;word-break:break-all;font-size:12px;line-height:1.6;max-height:64px;overflow-y:auto}
.reason-ops{display:flex;gap:6px;margin-top:6px}
.btn.xs{padding:1px 8px;font-size:11px;height:20px;line-height:16px}

/* 只读锁定：无修改权限用户禁用编辑，但数据颜色保持原有深浅 */
.ro-lock td,.ro-lock th{pointer-events:none !important;cursor:default !important}
.ro-lock table,.ro-lock .gantt-today{pointer-events:auto}
.ro-lock input,.ro-lock select{pointer-events:none !important;opacity:1 !important;color:inherit !important;-webkit-text-fill-color:inherit !important;background:transparent !important;border-color:transparent !important}
.ro-lock button{pointer-events:none !important;display:none !important}

/* 考核表标题栏 LOGO */
.perf-title-row{display:flex;align-items:center}
.perf-title-logo{height:46px;flex:0 0 auto}
.perf-title-row span{flex:1;text-align:center}

/* 首页更改记录 */
.changelog{margin:20px 80px 60px;background:#fff;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.08);overflow:hidden}
.changelog h3{background:var(--purple);padding:10px 18px;font-size:16px}
.changelog .cl-list{max-height:320px;overflow-y:auto}
.changelog .cl-item{display:flex;gap:14px;padding:8px 18px;border-bottom:1px solid #F0EDF7;font-size:13px;align-items:baseline}
.changelog .cl-item:nth-child(odd){background:#FAF9FC}
.changelog .cl-time{color:#8B84A8;white-space:nowrap;font-variant-numeric:tabular-nums}
.changelog .cl-user{color:#4A3F75;font-weight:bold;white-space:nowrap}
.changelog .cl-empty{padding:24px;text-align:center;color:var(--gray-text)}
.st-已完成{color:var(--green-text)}
.st-进行中{color:var(--amber-text)}
.st-已逾期{color:var(--red-text)}
.st-未开始{color:var(--gray-text)}
.remind-overdue{background:var(--red);color:#fff;padding:2px 8px;display:inline-block}
.remind-early{color:var(--green-text)}
.remind-late{color:var(--red-text)}

/* ===== 表格 ===== */
table.grid{border-collapse:collapse;background:#fff}
table.grid th{background:var(--purple);font-weight:bold;padding:7px 10px;border:1px solid #fff;text-align:center;white-space:nowrap}
table.grid td{border:1px solid #E3E3E3;padding:6px 10px;background:var(--cell);text-align:center;white-space:nowrap}
table.grid td.l,table.grid th.l{text-align:left}
table.grid tr.divider-row td{background:var(--cyan-row)}
table.grid input[type=text],table.grid input[type=date],table.grid input[type=number],table.grid select{border:none;background:transparent;font:inherit;text-align:center;width:100%;outline:none}
table.grid td.editable:hover{outline:2px solid #9E8FC4;outline-offset:-2px}
table.grid input[type=date]{min-width:120px}

.btn{display:inline-block;border:1px solid #9E8FC4;background:#fff;border-radius:6px;padding:6px 16px;cursor:pointer;font-size:13px;color:#4A3F75}
.btn:hover{background:#F0EBFA}
.btn.primary{background:var(--purple-deep);color:#fff;border-color:var(--purple-deep)}
.btn.primary:hover{background:#9E8FC4}
.btn-blue{background:#2E86DE;color:#fff;border-color:#2E86DE}
.btn-blue:hover{background:#2270C4}
.btn.danger{border-color:#D98A94;color:#B02330}
.btn.sm{padding:2px 8px;font-size:12px}
.btn[disabled]{background:#C9C9C9 !important;color:#fff !important;border-color:#C9C9C9 !important;cursor:not-allowed}
.btn-red-arrow{background:var(--red);color:#fff;border:none;padding:8px 18px;font-weight:bold;cursor:pointer;clip-path:polygon(0 0,85% 0,100% 50%,85% 100%,0 100%);font-size:14px}
.btn-red-arrow:hover{background:#D00000}

/* 页签（仿模板“今日/本周”等切换） */
.tab-strip{display:inline-flex;background:#EDEAF4;border-radius:4px;overflow:hidden}
.tab-strip .tab{padding:6px 18px;cursor:pointer;font-size:13px;color:#555}
.tab-strip .tab.active{background:#fff;font-weight:bold;box-shadow:inset 0 0 0 1px #C9BEDE}

/* 甜甜圈图 */
.donut-wrap{display:flex;gap:34px;padding:4px 24px 10px;flex-wrap:wrap}
.donut-item{display:flex;align-items:center;gap:10px}
.donut-item .lab{text-align:center}
.donut-item .lab .t{font-size:14px}
.donut-item .lab .n{font-size:13px;margin-top:2px}

/* 下拉多选筛选器 */
.msf{position:relative;display:inline-block}
.msf>button{border:1px solid #B9AFD6;background:#fff;padding:5px 10px;border-radius:4px;cursor:pointer;font-size:13px;min-width:110px;text-align:left}
.msf>button::after{content:" ▼";font-size:10px;color:#7A6CA8}
.msf .panel{display:none;position:absolute;z-index:60;top:105%;left:0;background:#fff;border:1px solid #B9AFD6;border-radius:4px;box-shadow:0 4px 14px rgba(0,0,0,.18);min-width:150px;max-height:260px;overflow:auto;padding:6px}
.msf.open .panel{display:block}
.msf .panel label{display:flex;gap:6px;align-items:center;padding:3px 6px;font-size:13px;white-space:nowrap;cursor:pointer}
.msf .panel label:hover{background:#F0EBFA}
.msf .panel .ops{display:flex;gap:8px;padding:4px 6px;border-bottom:1px solid #eee;margin-bottom:4px}
.msf .panel .ops a{font-size:12px;color:#6A5ACD;cursor:pointer}

.hint{font-size:12px;color:var(--gray-text)}
.note-red{color:var(--red-text);font-size:13px;line-height:1.9;white-space:pre-line}
.section{padding:0 24px;margin-bottom:26px}
.flex{display:flex}
.between{justify-content:space-between}
.aic{align-items:center}
.gap{gap:14px}
.mt{margin-top:14px}
.mb{margin-bottom:14px}

/* ===== 首页 ===== */
.home-banner{background:var(--purple);text-align:center;font-size:44px;font-weight:bold;letter-spacing:26px;padding:30px 0 30px 26px;color:#000}
.home-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:70px 90px;padding:60px 80px 40px}
.home-card{text-align:center;cursor:pointer;transition:.15s}
.home-card:hover{transform:translateY(-3px)}
.home-card .icon{height:88px;display:flex;align-items:center;justify-content:center}
.home-card .icon svg{width:72px;height:72px;stroke:#8B7BB8;fill:none;stroke-width:1.6}
.home-card .name{background:var(--purple);font-size:18px;font-weight:bold;padding:10px 6px}
.home-card .desc{background:#EFEBF6;font-size:12px;color:#3D3757;padding:10px 12px;line-height:1.7;min-height:64px}
.home-settings{margin:20px 80px 60px;background:var(--purple);text-align:center;font-size:18px;font-weight:bold;padding:12px;cursor:pointer}
.home-settings:hover{background:#BBAFD8}

/* ===== 甘特图 ===== */
.gantt-controls{display:flex;gap:40px;align-items:flex-start;padding:0 24px;flex-wrap:wrap}
.gantt-info{background:var(--purple-light);min-width:300px}
.gantt-info .row{display:flex;border-bottom:1px solid #fff}
.gantt-info .row:last-child{border-bottom:none}
.gantt-info .k{flex:0 0 130px;padding:6px 12px;background:var(--purple);font-size:13px}
.gantt-info .v{flex:1;padding:6px 12px;background:#fff;text-align:center}
.gantt-filters{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.gantt-table-wrap{overflow:auto;margin:0 24px;border:1px solid var(--border);max-height:calc(100vh - 340px);position:relative;background:#fff}
.gantt-table{border-collapse:separate;border-spacing:0}
.gantt-table th,.gantt-table td{border-right:1px solid #E3E3E3;border-bottom:1px solid #E3E3E3;padding:4px 6px;font-size:13px;white-space:nowrap;background:var(--cell)}
.gantt-table thead th{position:sticky;top:0;z-index:5;background:var(--purple);border-bottom:1px solid #fff}
.gantt-table thead tr:nth-child(2) th{top:29px}
.gantt-table .freeze{position:sticky;z-index:4}
.gantt-table thead .freeze{z-index:6}
.gantt-table td.tl-cell{padding:0;background:#fff;min-width:34px}
.gantt-table tr.divider-row td{background:var(--cyan-row)}
.gantt-table tr.divider-row td.tl-cell{background:var(--cyan-row)}
.gantt-bar{position:absolute;top:50%;transform:translateY(-50%);height:10px;border-radius:5px;background:#CBD8CB}
.gantt-bar .prog{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--green)}
.gantt-today{position:absolute;top:0;bottom:0;width:0;border-left:2px solid var(--red);z-index:3}
.gantt-today-flag{position:absolute;top:0;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--red);transform:translateX(-6px)}
.wk-head{font-size:12px;text-align:center;line-height:1.4}
.wk-head .d{font-size:11px;color:#3D3757}

/* ===== 计划进度表 ===== */
.plan-grid{display:grid;grid-template-columns:330px 1fr;gap:24px;padding:0 24px}
.cal{background:#fff}
.cal .ym{font-size:20px;font-weight:bold;text-align:center;padding:8px 0 4px}
.cal .ym input{width:70px;border:none;text-align:center;font:inherit;font-weight:bold;background:transparent;border-bottom:1px dashed #9E8FC4}
.cal table{width:100%;border-collapse:collapse}
.cal th{background:#F0EDF7;padding:6px 0;text-align:center;font-size:13px}
.cal td{text-align:center;padding:6px 0;font-size:13px}
.cal td.today{background:#E74C3C;color:#fff;font-weight:bold;border-radius:2px}
.plan-stat-list{display:flex;flex-direction:column;gap:14px;margin-bottom:20px}
.plan-stat{display:flex;width:300px}
.plan-stat .k{flex:1;padding:10px;text-align:center;font-size:15px}
.plan-stat .v{flex:0 0 120px;padding:10px;text-align:center;background:rgba(255,255,255,.5);font-size:15px}
.plan-stat.green .k{background:var(--green)}
.plan-stat.pink .k{background:var(--pink-card)}
.plan-stat.yellow .k{background:var(--yellow-card)}
.plan-stat.purple .k{background:var(--purple-light)}
.milestone-wrap{background:#fff;border:1px solid #EEE;position:relative;overflow-x:auto}
td.month-on{background:var(--cyan) !important}
td.month-cur{box-shadow:inset 0 0 0 2px #67C7DE}
.prog-cell{position:relative;min-width:70px}
.prog-cell .bar{position:absolute;left:4px;right:4px;top:50%;transform:translateY(-50%);height:8px;background:#E0E0E0;border-radius:4px}
.prog-cell .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--green);border-radius:4px}
.prog-cell span{position:relative;z-index:1}

/* ===== 四象限 ===== */
.q-layout{display:grid;grid-template-columns:230px 1fr;gap:0}
.q-side{background:#F4F2F9;padding:18px 14px;display:flex;flex-direction:column;gap:14px}
.q-side .title{font-size:18px;font-weight:bold;text-align:center}
.q-side select{width:100%;padding:6px;font:inherit}
.q-date-big{text-align:center;background:#fff;padding:14px 0}
.q-date-big .d{font-size:56px;color:#6A5ACD;font-weight:300}
.q-date-big .ym{background:var(--purple-light);padding:4px;margin-top:6px}
.q-side .statline{display:flex;justify-content:space-between;padding:8px 12px;font-size:14px}
.q-side .statline.clickable{cursor:pointer}
.q-side .statline.clickable:hover{filter:brightness(.95)}
.q-side .statline.off{opacity:.4}
.quadrants{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 24px}
.quad{min-height:230px}
.quad h3{text-align:center;padding:8px;font-size:15px}
.quad.q1 h3{background:var(--pink)}
.quad.q2 h3{background:var(--teal)}
.quad.q3 h3{background:var(--yellow)}
.quad.q4 h3{background:var(--purple-light)}
.quad table{width:100%;border-collapse:collapse}
.quad th{font-size:12px;padding:5px;border:1px solid #fff}
.quad.q1 th{background:#F8E2EA}
.quad.q2 th{background:#D2EAE2}
.quad.q3 th{background:#FFF0D6}
.quad.q4 th{background:#EFEEFA}
.quad td{border:1px solid #EEE;padding:5px;font-size:12px;text-align:center;background:#fff}
.quad.q1{background:#FDF3F7}
.quad.q2{background:#F0F9F5}
.quad.q3{background:#FFFAF0}
.quad.q4{background:#F7F6FB}

/* ===== 周工作计划 ===== */
.week-cols{display:grid;gap:2px;padding:0 24px}
.week-col{background:#fff;min-height:420px}
.week-col .hd{background:var(--purple);text-align:center;padding:8px 4px;font-weight:bold}
.week-col .hd .dt{font-size:12px;font-weight:normal}
.week-col .bd{padding:8px;display:flex;flex-direction:column;gap:8px;background:#FBFBFD;min-height:380px}
.wtask{background:#fff;border-left:4px solid var(--purple-deep);padding:6px 8px;font-size:12px;box-shadow:0 1px 2px rgba(0,0,0,.08);line-height:1.6}
.wtask .meta{color:var(--gray-text)}

/* ===== 日待办 ===== */
.todo-top{display:grid;grid-template-columns:300px 1fr;gap:24px;padding:0 24px}
.todo-date{background:var(--purple-light);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:bold;min-height:110px}
.todo-cards{display:flex;gap:24px;flex-wrap:wrap}
.todo-card{display:flex;background:var(--purple-light);border-radius:10px;overflow:hidden;min-width:250px}
.todo-card .main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;gap:6px}
.todo-card .main .t{font-size:16px;font-weight:bold}
.todo-card .side{font-size:12px;background:rgba(255,255,255,.45);padding:6px 10px;display:flex;flex-direction:column;justify-content:center;gap:2px}

/* ===== 周总结 ===== */
.sum-layout{display:grid;grid-template-columns:280px 1fr;gap:0}
.sum-side{background:#F4F2F9;padding:16px 12px}
.sum-side h3{font-size:16px;margin-bottom:10px;text-align:center}
.sum-sec{margin:0 24px 22px}
.sum-sec>h3{padding:8px 14px;font-size:15px;text-align:center}
.sum-sec.green>h3{background:#DDF0E8}
.sum-sec.yellow>h3{background:#FDF3D8}
.sum-sec.pink>h3{background:#FBE9EF}
.sum-sec table{width:100%}

/* 图表容器 */
.chart-box{background:#fff;padding:10px}
.legend{font-size:12px;display:flex;gap:14px;justify-content:flex-end;padding:4px 8px}
.legend i{display:inline-block;width:10px;height:10px;margin-right:4px;vertical-align:middle}

::-webkit-scrollbar{height:10px;width:10px}
::-webkit-scrollbar-thumb{background:#C4BADB;border-radius:5px}
::-webkit-scrollbar-track{background:#F0EDF7}

@media (max-width:1100px){
  .home-cards{grid-template-columns:repeat(2,1fr);gap:30px;padding:30px}
  .home-banner{font-size:30px;letter-spacing:12px}
  .plan-grid,.todo-top,.q-layout,.sum-layout{grid-template-columns:1fr}
}

/* ================= 移动端适配（桌面 UI 保持不变） ================= */
#menu-toggle{display:none}
#menu-backdrop{display:none}

/* ---- 第一层：手机通用（竖屏 ≤900px 或 矮横屏 高≤480px） ---- */
@media (max-width:900px), (max-height:480px){
  /* 侧边栏改为抽屉式 */
  #menu-toggle{display:flex;position:fixed;top:10px;left:10px;z-index:210;width:40px;height:40px;align-items:center;justify-content:center;
    background:rgba(255,255,255,.92);border:1px solid #B9AFD6;border-radius:8px;font-size:20px;color:#4A3F75;box-shadow:0 1px 6px rgba(0,0,0,.2);cursor:pointer}
  #sidenav{position:fixed;left:0;top:0;height:100vh;z-index:200;transform:translateX(-105%);transition:transform .2s ease;box-shadow:none}
  #sidenav.open{transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,.35)}
  #menu-backdrop.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:150}
  #app{display:block}
  #view{padding:0 0 40px}
  .sheet-title{padding-left:56px !important;letter-spacing:1px}
  .sheet-subtitle{padding:0 14px;font-size:11px}
  .section{padding:0 12px;overflow-x:auto}
  .gantt-controls{padding:0 12px;gap:14px}
  .gantt-filters{gap:8px}
  .btn-red-arrow{padding:6px 12px;font-size:12px}
  table.grid td,table.grid th{padding:5px 6px;font-size:12px}
  .msf>button{min-width:96px}
  .auth-card{width:92vw;padding:26px 22px}
  .auth-title{font-size:19px;letter-spacing:2px}
  .mail-box{width:92vw;padding:18px}
  .pf-modal-body textarea{min-height:120px !important}
  .perf-table{font-size:12px}
  .perf-title-row span{font-size:15px}
  .perf-title-logo{height:34px}
  .sig-cell{white-space:normal}
  #pf-monthly{min-width:320px}
}

/* ---- 第二层：竖屏（宽 ≤768px）：单列布局 ---- */
@media (max-width:768px){
  /* 标题与首页 */
  .home-banner{font-size:20px;letter-spacing:4px !important;padding:16px 8px 16px 56px;gap:10px;flex-wrap:wrap}
  .home-banner img{height:44px !important}
  .home-cards{grid-template-columns:1fr;gap:22px;padding:22px 18px}
  .home-card .desc{min-height:0}
  .home-settings{margin:12px 18px 30px}
  .changelog{margin:14px 14px 36px}
  .sheet-title{font-size:18px;padding-top:10px;padding-bottom:10px}

  /* 卡片与统计 */
  .stat-cards{gap:10px;padding:6px 12px 14px}
  .stat-card{width:calc(50vw - 30px);height:78px}
  .stat-card .t{font-size:14px}.stat-card .n{font-size:13px}
  .donut-wrap{gap:14px;padding:4px 12px 10px}
  .plan-stat{width:100% !important}
  .plan-grid{padding:0 12px}
  .cal .ym{font-size:17px}

  /* 甘特图 */
  .gantt-info{min-width:260px;width:100%}
  .gantt-table-wrap{margin:0 6px;max-height:68vh}

  /* 四象限 / 周计划 / 日待办 / 周总结 */
  .quadrants{grid-template-columns:1fr;padding:0 12px}
  .q-side{padding:12px}
  .week-cols{display:flex;overflow-x:auto;padding:0 8px}
  .week-col{flex:0 0 76vw;min-height:320px}
  .week-col .bd{min-height:280px}
  .todo-top{grid-template-columns:1fr;padding:0 12px}
  .todo-cards{gap:12px}
  .todo-card{min-width:100%}
  .sum-layout,.q-layout{grid-template-columns:1fr}
  .q-side .title{font-size:16px}
}

/* ---- 第三层：矮横屏（高 ≤480px）：压缩纵向空间、保留双列 ---- */
@media (max-height:480px) and (min-width:481px){
  .home-banner{font-size:17px;letter-spacing:3px !important;padding:8px 8px 8px 56px;gap:8px}
  .home-banner img{height:34px !important}
  .home-cards{grid-template-columns:repeat(2,1fr);gap:14px;padding:14px 18px}
  .home-card .icon{height:52px}
  .home-card .icon svg{width:44px;height:44px}
  .home-card .name{font-size:14px;padding:6px}
  .home-card .desc{font-size:11px;padding:6px 10px;min-height:0}
  .home-settings{margin:8px 18px 16px;padding:8px}
  .changelog{margin:8px 14px 20px}
  .changelog .cl-list{max-height:180px}
  .sheet-title{font-size:16px;padding-top:8px;padding-bottom:8px;margin-bottom:8px}
  .stat-cards{gap:10px;padding:4px 12px 8px}
  .stat-card{height:62px}
  .stat-card .t{font-size:13px}.stat-card .n{font-size:12px}
  .donut-wrap{gap:14px;padding:0 12px 4px}
  .gantt-controls{margin-bottom:4px}
  .gantt-table-wrap{max-height:58vh}
  .week-col{min-height:230px}
  .week-col .bd{min-height:190px}
  .todo-card .main{padding:8px}
  .sum-side{padding:10px}
  .q-side{padding:10px}
  .auth-wrap{min-height:100vh}
}