/* ===== +1up 工作台 · 视觉规范 =====
   主色：淡白 / 极淡粉白背景 / 白卡片 / 淡粉大横幅
   文字：深色正文 / 浅灰辅助
   样式：大圆角 + 柔和阴影 + 扁平新拟态轻质感
   字体：清晰无衬线系统字体
*/

:root{
  --bg:#fdf5f8;
  --bg-2:#fbeef3;
  --card:#ffffff;
  --card-2:#fffafc;
  --text:#2c2a2e;
  --muted:#9a93a0;
  --pink:#f6b9cc;
  --pink-soft:#fde8ef;
  --pink-deep:#e98aa6;
  --pink-line:#f7d4e0;
  --line:#f1e7ec;
  --shadow:0 8px 24px rgba(176,120,140,.10);
  --shadow-sm:0 4px 14px rgba(176,120,140,.08);
  --radius:22px;
  --radius-sm:16px;
  --radius-lg:28px;
  --sidebar-w:244px;
  --tabbar-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 布局骨架 ---------- */
.layout{display:flex;min-height:100vh;}

/* 桌面侧边栏 */
.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:var(--card);
  border-right:1px solid var(--line);
  padding:22px 14px 22px;
  position:fixed;top:0;left:0;bottom:0;
  display:flex;flex-direction:column;
  z-index:30;
  overflow-y:auto;
}
.brand{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;}
.brand .heart{
  width:38px;height:38px;border-radius:14px;
  background:linear-gradient(135deg,var(--pink-soft),var(--pink-line));
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);
}
.brand .heart svg{width:20px;height:20px;}
.brand .uname{font-weight:700;font-size:17px;letter-spacing:.3px;}

.nav{display:flex;flex-direction:column;gap:4px;}
.nav-group-label{font-size:11px;color:var(--muted);padding:14px 12px 4px;letter-spacing:1px;}
.nav-item{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;border-radius:14px;
  color:var(--text);text-decoration:none;font-size:14.5px;
  cursor:pointer;transition:.15s;user-select:none;
}
.nav-item .ico{font-size:18px;width:22px;text-align:center;}
.nav-item:hover{background:var(--card-2);}
.nav-item.active{background:var(--pink-soft);color:var(--pink-deep);font-weight:600;}
.sidebar .spacer{flex:1;}

/* 主区域 */
.main{
  margin-left:var(--sidebar-w);
  flex:1;padding:20px 26px 40px;
  max-width:1180px;width:100%;
}

/* 顶部栏 */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap;}
.topbar .ttl{display:flex;flex-direction:column;}
.topbar .ttl h1{margin:0;font-size:26px;font-weight:800;letter-spacing:.4px;}
.topbar .ttl .date{color:var(--muted);font-size:13px;margin-top:2px;}
.btn-checkin{
  border:none;cursor:pointer;
  background:linear-gradient(135deg,#fbd0dd,#f7b9cc);
  color:#fff;font-weight:700;font-size:14px;
  padding:12px 20px;border-radius:18px;
  box-shadow:var(--shadow-sm);transition:.15s;
  display:flex;align-items:center;gap:8px;
}
.btn-checkin:active{transform:scale(.97);}
.btn-checkin.done{background:var(--pink-soft);color:var(--pink-deep);}

/* 大横幅 */
.banner{
  position:relative;
  background:linear-gradient(120deg,#ffffff 0%,#fdeef3 55%,#fbe2ec 100%);
  border-radius:var(--radius-lg);
  padding:26px 28px;
  box-shadow:var(--shadow);
  margin-bottom:24px;overflow:hidden;
}
.banner .b-ttl{font-size:30px;font-weight:800;letter-spacing:1px;}
.banner .b-sub{color:var(--muted);font-size:13px;margin-top:4px;}
.ring{
  position:absolute;top:24px;right:28px;
  width:84px;height:84px;border-radius:50%;
  background:conic-gradient(var(--pink-deep) calc(var(--p)*1%), #f3e3ea 0);
  display:flex;align-items:center;justify-content:center;
}
.ring .inner{
  width:64px;height:64px;border-radius:50%;background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:inset 0 2px 6px rgba(176,120,140,.08);
}
.ring .pct{font-weight:800;font-size:18px;color:var(--pink-deep);}
.ring .plabel{font-size:10px;color:var(--muted);}
.banner .b-foot{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:26px;gap:14px;flex-wrap:wrap;
}
.banner .b-count{font-size:14px;font-weight:600;}
.banner .b-count span{color:var(--pink-deep);}
.banner .bar{
  flex:1;min-width:160px;height:10px;border-radius:8px;
  background:#f3e3ea;overflow:hidden;
}
.banner .bar > i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--pink),var(--pink-deep));}
.banner .b-streak{font-size:13px;color:var(--muted);}

/* 板块标题 */
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin:6px 2px 14px;}
.sec-head h2{margin:0;font-size:15px;font-weight:800;letter-spacing:1.5px;color:#7d7480;}
.sec-head .more{font-size:12px;color:var(--muted);}

/* 双列卡片网格 */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.card{
  background:var(--card);border-radius:var(--radius);
  padding:18px 18px;box-shadow:var(--shadow-sm);
  border:1px solid #fbf2f6;position:relative;
}
.card.click{cursor:pointer;transition:.15s;}
.card.click:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
.card .c-top{display:flex;align-items:center;gap:10px;margin-bottom:6px;}
.card .c-ico{font-size:22px;}
.card .c-name{font-weight:700;font-size:15.5px;}
.card .c-sub{color:var(--muted);font-size:13px;}
.card .c-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
.check-circle{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--pink-line);
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--pink-deep);font-size:14px;flex:0 0 auto;
}
.check-circle.on{background:var(--pink-soft);border-color:var(--pink-deep);}

/* ---------- 通用列表/区块 ---------- */
.panel{background:var(--card);border-radius:var(--radius);padding:18px 18px;box-shadow:var(--shadow-sm);margin-bottom:16px;}
.panel h3{margin:0 0 12px;font-size:16px;font-weight:700;}
.row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);}
.row:last-child{border-bottom:none;}
.row .r-main{flex:1;min-width:0;}
.row .r-title{font-weight:600;font-size:14.5px;}
.row .r-meta{color:var(--muted);font-size:12px;margin-top:2px;}
.tag{display:inline-block;font-size:11px;padding:2px 9px;border-radius:9px;background:var(--pink-soft);color:var(--pink-deep);margin-right:6px;}
.tag.gray{background:#f3eef1;color:var(--muted);}

.btn{
  border:none;cursor:pointer;border-radius:14px;padding:11px 16px;
  font-size:14px;font-weight:600;background:var(--pink-soft);color:var(--pink-deep);
  transition:.15s;display:inline-flex;align-items:center;gap:7px;
}
.btn:active{transform:scale(.97);}
.btn.primary{background:linear-gradient(135deg,#fbd0dd,#f7b9cc);color:#fff;box-shadow:var(--shadow-sm);}
.btn.ghost{background:transparent;color:var(--muted);}
.btn.danger{background:#fde8e8;color:#d9536b;}
.btn.block{width:100%;justify-content:center;}

input,textarea,select{
  font-family:inherit;font-size:14px;color:var(--text);
  border:1px solid var(--line);border-radius:14px;
  padding:11px 13px;background:var(--card-2);width:100%;outline:none;
}
input:focus,textarea:focus,select:focus{border-color:var(--pink);background:#fff;}
textarea{resize:vertical;min-height:74px;}
label.fld{display:block;font-size:12.5px;color:var(--muted);margin:12px 0 5px;}

/* 分段控件（工作/生活、范围） */
.seg{display:inline-flex;background:var(--card-2);border-radius:14px;padding:4px;gap:4px;flex-wrap:wrap;}
.seg button{
  border:none;background:transparent;cursor:pointer;border-radius:11px;
  padding:8px 14px;font-size:13px;color:var(--muted);font-weight:600;
}
.seg button.on{background:#fff;color:var(--pink-deep);box-shadow:var(--shadow-sm);}

/* 阶段看板 */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.kcol{background:var(--card-2);border-radius:var(--radius-sm);padding:12px;}
.kcol h4{margin:0 0 10px;font-size:13px;color:var(--muted);font-weight:700;letter-spacing:.5px;}
.kcard{background:#fff;border-radius:14px;padding:12px;margin-bottom:10px;box-shadow:var(--shadow-sm);}
.kcard .t{font-weight:600;font-size:14px;}
.kcard .m{color:var(--muted);font-size:12px;margin-top:4px;}

/* 日历 */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-cell{
  background:var(--card-2);border-radius:12px;min-height:62px;padding:7px;
  font-size:12px;cursor:pointer;position:relative;
}
.cal-cell.dim{opacity:.4;}
.cal-cell.today{outline:2px solid var(--pink);}
.cal-cell .d{font-weight:700;}
.cal-cell .ev{font-size:10px;background:var(--pink-soft);color:var(--pink-deep);border-radius:6px;padding:1px 5px;margin-top:3px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-day{background:var(--card-2);border-radius:12px;padding:8px;min-height:120px;font-size:12px;}
.cal-day .dh{font-weight:700;margin-bottom:4px;}

/* 帮助问号入口 */
.help-btn{
  width:22px;height:22px;border-radius:50%;border:1.5px solid var(--pink-line);
  background:var(--card);color:var(--pink-deep);font-size:12px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;cursor:help;
  position:relative;flex:0 0 auto;
}
.help-btn:hover::after{
  content:attr(data-tip);position:absolute;left:50%;top:-6px;transform:translate(-50%,-100%);
  background:#3a3540;color:#fff;font-size:11.5px;font-weight:500;line-height:1.4;
  padding:7px 10px;border-radius:10px;width:200px;white-space:normal;text-align:left;
  box-shadow:var(--shadow);z-index:60;pointer-events:none;
}
.help-inline{display:inline-flex;align-items:center;gap:7px;margin-left:8px;vertical-align:middle;}

/* 空 / 加载 / 错误 状态 */
.empty{text-align:center;padding:40px 16px;color:var(--muted);}
.empty .e-ico{font-size:40px;}
.empty .e-ttl{font-weight:700;color:var(--text);margin:10px 0 4px;font-size:15px;}
.empty .e-sub{font-size:13px;margin-bottom:16px;}
.skeleton{background:linear-gradient(90deg,#f6eef2,#fceff4,#f6eef2);background-size:200% 100%;
  animation:sk 1.2s infinite;border-radius:12px;height:14px;margin:8px 0;}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.errbox{background:#fdeef0;border:1px solid #f6cfd6;color:#c0506a;border-radius:14px;padding:16px;}

/* 弹窗 / 抽屉 */
.overlay{position:fixed;inset:0;background:rgba(60,40,50,.32);z-index:80;display:none;align-items:flex-end;justify-content:center;}
.overlay.show{display:flex;}
.sheet{
  background:var(--card);width:100%;max-width:560px;border-radius:24px 24px 0 0;
  padding:22px 20px calc(22px + var(--safe-b));max-height:86vh;overflow-y:auto;
  animation:up .22s ease;
}
@keyframes up{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
.modal{background:var(--card);width:100%;max-width:480px;border-radius:22px;padding:22px;
  margin:auto;animation:pop .18s ease;}
@keyframes pop{from{transform:scale(.95);opacity:.6}to{transform:none;opacity:1}}
.sheet h3,.modal h3{margin:0 0 14px;font-size:18px;font-weight:800;}
.field-grid{display:grid;gap:4px;}
.sheet-actions{display:flex;gap:10px;margin-top:18px;}

/* Toast */
.toast{
  position:fixed;left:50%;bottom:calc(80px + var(--safe-b));transform:translateX(-50%);
  background:#3a3540;color:#fff;padding:11px 18px;border-radius:14px;font-size:13.5px;
  z-index:120;box-shadow:var(--shadow);opacity:0;transition:.2s;pointer-events:none;max-width:86vw;
}
.toast.show{opacity:1;}

/* 移动端顶部条 / 抽屉 / 底部导航（默认隐藏） */
.mtop{display:none;}
.drawer{display:none;}
.tabbar{display:none;}

/* ---------- 响应式：手机端 ---------- */
@media (max-width:820px){
  .sidebar{display:none;}
  .main{margin-left:0;padding:14px 14px calc(96px + var(--safe-b));max-width:none;}
  .topbar .ttl h1{font-size:22px;}
  .banner{padding:20px 18px;border-radius:24px;}
  .banner .b-ttl{font-size:24px;}
  .ring{width:70px;height:70px;top:18px;right:16px;}
  .ring .inner{width:52px;height:52px;}
  .ring .pct{font-size:15px;}
  .grid-2{grid-template-columns:1fr;}
  .kanban{grid-template-columns:1fr;}
  .cal-grid{gap:3px;}
  .cal-cell{min-height:46px;padding:4px;}
  .cal-week{gap:3px;}
  .cal-day{min-height:78px;}

  /* 手机顶部 */
  .mtop{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 4px 14px;position:sticky;top:0;background:var(--bg);z-index:25;
  }
  .mtop .m-brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;}
  .mtop .m-brand .heart{width:32px;height:32px;border-radius:11px;background:linear-gradient(135deg,var(--pink-soft),var(--pink-line));display:flex;align-items:center;justify-content:center;}
  .mtop .m-brand .heart svg{width:17px;height:17px;}

  /* 抽屉（侧栏） */
  .drawer{
    display:block;position:fixed;top:0;left:0;bottom:0;width:80%;max-width:300px;
    background:var(--card);z-index:90;transform:translateX(-100%);transition:.25s;
    padding:22px 14px;overflow-y:auto;box-shadow:var(--shadow);
  }
  .drawer.show{transform:none;}
  .drawer-overlay{position:fixed;inset:0;background:rgba(60,40,50,.3);z-index:85;display:none;}
  .drawer-overlay.show{display:block;}

  /* 底部导航：占满宽度，入口等分，图标上文字下 */
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
    height:calc(var(--tabbar-h) + var(--safe-b));
    padding-bottom:var(--safe-b);
  }
  .tabbar .tab{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;color:var(--muted);font-size:10.5px;cursor:pointer;text-decoration:none;
    min-height:44px;
  }
  .tabbar .tab .ti{font-size:21px;line-height:1;}
  .tabbar .tab.on{color:var(--pink-deep);font-weight:700;}
  .tabbar .tab.add .ti{
    width:46px;height:46px;border-radius:16px;background:linear-gradient(135deg,#fbd0dd,#f7b9cc);
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;
    box-shadow:var(--shadow-sm);margin-top:-10px;
  }
  /* 弹窗在手机端占满宽度底部弹出 */
  .overlay{align-items:flex-end;}
  .sheet{border-radius:24px 24px 0 0;}
}

@media (min-width:821px){
  .drawer,.drawer-overlay{display:none !important;}
}

/* 断网提示 / 保存状态（全局） */
.hidden{display:none !important;}
.netbar{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:#fbe3e9;color:#c0567a;font-size:13px;text-align:center;
  padding:9px 12px;box-shadow:0 2px 8px rgba(180,120,140,.18);
  opacity:0;transition:opacity .25s;
}
.netbar:not(.hidden){opacity:1;}
.savestate{
  position:fixed;top:60px;right:10px;z-index:80;
  background:rgba(255,255,255,.96);color:#b36a86;border:1px solid #f3d5df;
  font-size:12px;padding:5px 11px;border-radius:999px;
  box-shadow:0 2px 8px rgba(180,120,140,.15);opacity:0;transition:opacity .25s;
}
.savestate:not(.hidden){opacity:1;}
code{background:#f6eef2;color:#b06a86;padding:1px 5px;border-radius:5px;font-size:12px;}